YG-Soft/X-Financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 全局 UI 主题皮肤重构与样式模块化

Browse Source 
引入 Element Plus 主题定制和主题皮肤 composable，将全局
样式拆分为组件级独立 CSS 文件（侧边栏、顶栏、工作台等），
统一色彩变量和间距规范，重构所有视图和组件样式以适配新
主题系统，优化图表和知识图谱组件视觉表现，提取审计和差
旅报销相关子组件。
This commit is contained in:
caoxiaozhu
2026-05-27 09:17:57 +08:00
parent df49103f23
commit 2dcc72102d
112 changed files with 10983 additions and 8996 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
web/src/assets/styles/views/travel-reimbursement-create-view-part2.css
View File

@@ -35,8 +35,8 @@
}
.travel-calculator-field input:focus {
border-color: rgba(59, 130, 246, 0.46);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.46);
box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.1);
outline: none;
}
@@ -145,7 +145,7 @@
.composer-date-apply-btn {
border: 0;
background: linear-gradient(135deg, #22c55e, #10b981);
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
}
@@ -182,9 +182,9 @@
min-height: 28px;
padding: 0 8px 0 10px;
border-radius: 999px;
border: 1px solid rgba(59, 130, 246, 0.28);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(16, 185, 129, 0.12));
color: #1d4ed8;
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
background: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14), rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08));
color: var(--theme-primary-active);
font-size: 11px;
font-weight: 800;
flex: none;
@@ -192,7 +192,7 @@
.composer-biz-time-tag i {
font-size: 14px;
color: #2563eb;
color: var(--theme-primary);
}
.composer-biz-time-tag-label {
@@ -422,10 +422,10 @@
}
.send-btn {
background: linear-gradient(135deg, #22c55e, #10b981);
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
font-size: var(--wb-fs-tool-icon);
box-shadow: 0 8px 18px rgba(16, 185, 129, 0.18);
box-shadow: 0 8px 18px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
}
.send-btn:disabled {
@@ -468,8 +468,8 @@
height: 150px;
border-radius: 0 0 0 140px;
background:
radial-gradient(circle at 0 100%, rgba(16, 185, 129, 0.14), transparent 54%),
linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(96, 165, 250, 0.06));
radial-gradient(circle at 0 100%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14), transparent 54%),
linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14), rgba(96, 165, 250, 0.06));
opacity: 0.9;
pointer-events: none;
}
@@ -502,11 +502,11 @@
align-items: center;
padding: 0 10px;
border-radius: 999px;
background: rgba(240, 253, 244, 0.95);
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 11px;
font-weight: 800;
border: 1px solid rgba(16, 185, 129, 0.12);
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.16);
}
.review-insight-title-row {
@@ -617,8 +617,8 @@
}
.intent-pill.draft {
background: #ecfdf5;
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.intent-pill.approval {
@@ -719,7 +719,7 @@
}
.review-side-intent-row i {
color: #059669;
color: var(--theme-primary);
font-size: 16px;
}
@@ -765,9 +765,9 @@
.review-side-metric-card.editable:hover,
.review-side-metric-card.editing {
border-color: rgba(16, 185, 129, 0.34);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.34);
background: #ffffff;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
transform: translateY(-1px);
}
@@ -786,9 +786,9 @@
.review-side-metric-card.editable:hover .review-side-metric-icon,
.review-side-metric-card.editing .review-side-metric-icon {
color: #059669;
border-color: rgba(16, 185, 129, 0.22);
background: #ecfdf5;
color: var(--theme-primary);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
background: var(--theme-primary-soft);
}
.review-side-metric-card.invalid .review-side-metric-icon {
@@ -820,7 +820,7 @@
width: 100%;
min-height: 34px;
padding: 0 10px;
border: 1px solid rgba(16, 185, 129, 0.2);
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.2);
border-radius: 10px;
background: rgba(255, 255, 255, 0.96);
color: #0f172a;
@@ -844,8 +844,8 @@
.review-inline-input:focus {
outline: none;
border-color: rgba(16, 185, 129, 0.42);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.42);
box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
}
.review-inline-select-list {
@@ -869,9 +869,9 @@
}
.review-inline-select-option.active {
border-color: rgba(16, 185, 129, 0.36);
background: rgba(240, 253, 244, 0.94);
color: #047857;
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.36);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.review-inline-error {
@@ -900,7 +900,7 @@
}
.review-side-edit-hint.upload {
color: #059669;
color: var(--theme-primary-active);
}
.review-side-metric-card:hover .review-side-edit-hint,
@@ -935,7 +935,7 @@
}
.review-side-confidence {
color: #10b981;
color: var(--success);
font-size: 12px;
font-weight: 900;
}
@@ -961,9 +961,9 @@
}
.review-side-category-card.active {
border-color: rgba(52, 211, 153, 0.62);
background: rgba(240, 253, 244, 0.9);
box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.08);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.5);
background: var(--theme-primary-soft);
box-shadow: inset 0 0 0 1px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
}
.review-side-category-copy {
@@ -988,7 +988,7 @@
}
.review-side-group-check {
color: #10b981;
color: var(--theme-primary);
font-size: 18px;
}
@@ -1014,9 +1014,9 @@
}
.review-other-category-option.active {
border-color: rgba(16, 185, 129, 0.36);
background: rgba(240, 253, 244, 0.94);
color: #047857;
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.36);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.review-side-risk-card {
@@ -1064,8 +1064,8 @@
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(14, 165, 233, 0.12);
color: #0284c7;
background: rgba(58, 124, 165, 0.12);
color: #2f6d95;
font-size: 16px;
}
@@ -1080,8 +1080,8 @@
}
.review-side-risk-item.low .review-side-risk-icon {
background: rgba(14, 165, 233, 0.12);
color: #0284c7;
background: rgba(58, 124, 165, 0.12);
color: #2f6d95;
}
.review-side-risk-copy {
@@ -1121,7 +1121,7 @@
padding: 0;
border: 0;
background: transparent;
color: #059669;
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 850;
}
@@ -1173,10 +1173,10 @@
align-items: center;
gap: 6px;
padding: 0 14px;
border: 1px solid rgba(16, 185, 129, 0.22);
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #059669;
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 850;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
@@ -1270,8 +1270,8 @@
align-items: center;
padding: 0 10px;
border-radius: 999px;
background: rgba(236, 253, 245, 0.92);
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 11px;
font-weight: 850;
}
@@ -1296,9 +1296,9 @@
}
.review-document-meta-chip.confidence {
background: rgba(236, 253, 245, 0.92);
color: #047857;
border-color: rgba(167, 243, 208, 0.92);
background: var(--success-soft);
color: var(--success);
border-color: color-mix(in srgb, var(--success) 28%, transparent);
}
.review-document-scroll {
@@ -1404,8 +1404,8 @@
.review-document-edit-field input:focus,
.review-document-edit-field textarea:focus {
outline: none;
border-color: rgba(16, 185, 129, 0.36);
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.36);
box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
}
.review-document-edit-field textarea {
@@ -1482,8 +1482,8 @@
}
.knowledge-question-btn:hover:not(:disabled) {
border-color: rgba(16, 185, 129, 0.3);
background: rgba(240, 253, 244, 0.9);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.3);
background: var(--theme-primary-soft);
transform: translateY(-1px);
}
@@ -1495,7 +1495,7 @@
.knowledge-question-btn i {
justify-self: end;
color: #059669;
color: var(--theme-primary);
font-size: 16px;
}