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

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

@@ -1,5 +1,5 @@
.assistant-overlay {
/* 距屏幕边 10–18px，随视口微调；高度用 dvh 适配笔记本浏览器工具栏 */
/* 距屏幕边缘 10-18px，随视口微调；高度使用 dvh 适配浏览器工具栏 */
--assistant-viewport-inset: clamp(10px, 1.25vmin, 18px);
position: fixed;
inset: 0;
@@ -13,11 +13,10 @@
padding: var(--assistant-viewport-inset);
box-sizing: border-box;
background:
radial-gradient(circle at 18% 14%, rgba(16, 185, 129, 0.18), transparent 24%),
radial-gradient(circle at 82% 12%, rgba(59, 130, 246, 0.12), transparent 28%),
rgba(97, 110, 131, 0.34);
backdrop-filter: blur(18px) saturate(1.02);
-webkit-backdrop-filter: blur(18px) saturate(1.02);
linear-gradient(180deg, rgba(239, 246, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%),
rgba(241, 245, 249, 0.98);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.assistant-modal {
@@ -39,7 +38,7 @@
}
.assistant-modal-stage {
/* 工作台字号令牌：笔记本断点见文末 @media */
/* 工作台字号令牌：笔记本断点见后续 media */
--wb-fs-title: 22px;
--wb-fs-desc: 13px;
--wb-fs-badge: 12px;
@@ -70,14 +69,12 @@
transform: none;
border-radius: 24px;
background:
radial-gradient(circle at top right, rgba(16, 185, 129, 0.14), transparent 26%),
radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 24%),
linear-gradient(180deg, rgba(241, 246, 245, 0.92) 0%, rgba(230, 237, 235, 0.88) 100%);
linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
box-shadow:
0 28px 72px rgba(15, 23, 42, 0.22),
0 10px 28px rgba(15, 23, 42, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.42);
border: 1px solid rgba(255, 255, 255, 0.44);
border: 1px solid rgba(191, 219, 254, 0.88);
background-clip: padding-box;
overflow: hidden;
isolation: isolate;
@@ -108,11 +105,11 @@
justify-content: center;
padding: 0 14px;
border-radius: 999px;
background: linear-gradient(135deg, #22c55e, #10b981);
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
color: #fff;
font-size: var(--wb-fs-badge);
font-weight: 800;
box-shadow: 0 8px 16px rgba(16, 185, 129, 0.14);
box-shadow: 0 8px 16px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14);
white-space: nowrap;
}
@@ -160,16 +157,16 @@
}
.assistant-toggle-btn {
border-color: rgba(16, 185, 129, 0.18);
background: rgba(245, 252, 249, 0.96);
color: #166534;
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
color: var(--theme-primary-active);
font-size: 16px;
box-shadow: 0 8px 18px rgba(16, 185, 129, 0.1);
box-shadow: 0 8px 18px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.1);
}
.assistant-toggle-btn:hover:not(:disabled) {
background: rgba(236, 253, 245, 0.98);
border-color: rgba(16, 185, 129, 0.28);
background: var(--theme-primary-soft);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
}
.assistant-toggle-btn:disabled,
@@ -254,8 +251,8 @@
}
.flow-status-chip.completed {
background: #ecfdf5;
color: #059669;
background: var(--success-soft);
color: var(--success);
}
.flow-status-chip.failed {
@@ -337,7 +334,7 @@
}
.flow-step-item.completed .flow-step-rail span {
background: #10b981;
background: var(--success);
color: #fff;
}
@@ -405,13 +402,13 @@
}
.flow-step-status.completed {
background: #ecfdf5;
color: #059669;
background: var(--success-soft);
color: var(--success);
}
.flow-step-status.running {
background: #eff6ff;
color: #2563eb;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.flow-step-status.failed {
@@ -497,13 +494,13 @@
min-width: 0;
min-height: 0;
border: 1px solid rgba(189, 201, 214, 0.74);
border-radius: 24px;
background: rgba(248, 251, 251, 0.84);
border-radius: 16px;
background: #ffffff;
box-shadow:
0 14px 32px rgba(148, 163, 184, 0.16),
0 2px 6px rgba(15, 23, 42, 0.05);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.dialog-panel {
@@ -512,8 +509,7 @@
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
background:
radial-gradient(circle at top right, rgba(59, 130, 246, 0.07), transparent 22%),
linear-gradient(180deg, rgba(252, 253, 253, 0.88) 0%, rgba(243, 247, 248, 0.84) 100%);
linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
transition:
transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
@@ -564,18 +560,18 @@
}
.shortcut-chip i {
color: #059669;
color: var(--theme-primary);
}
.shortcut-chip.active {
border-color: rgba(5, 150, 105, 0.38);
background: rgba(16, 185, 129, 0.1);
color: #047857;
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.38);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
box-shadow: none;
}
.shortcut-chip.active i {
color: #047857;
color: var(--theme-primary-active);
}
.shortcut-chip:disabled {
@@ -593,17 +589,6 @@
overflow-y: auto;
}
.message-row {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: start;
gap: 12px;
}
.message-row.user {
grid-template-columns: minmax(0, 1fr) 38px;
}
.message-row.user .message-avatar {
order: 2;
background: transparent;
@@ -850,13 +835,13 @@
}
.application-preview-row.highlight .application-preview-label {
background: #f0fdf4;
color: #047857;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.application-preview-row.highlight .application-preview-value {
background: #f7fee7;
color: #166534;
background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
color: var(--theme-primary-active);
font-weight: 780;
}
@@ -1138,9 +1123,9 @@
place-items: center;
border-radius: 10px;
background: #f1f5f9;
color: #0f766e;
color: var(--theme-primary-active);
font-size: 18px;
box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
box-shadow: inset 0 0 0 1px rgba(var(--theme-primary-rgb), 0.08);
}
.message-suggested-action-copy {
@@ -1171,7 +1156,7 @@
}
.message-suggested-action-btn:hover:not(:disabled) {
border-color: rgba(20, 184, 166, 0.72);
border-color: rgba(var(--theme-primary-rgb), 0.42);
background: #ffffff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09);
transform: translateY(-1px);
@@ -1179,35 +1164,35 @@
.message-suggested-action-btn:hover:not(:disabled) .message-suggested-action-icon,
.message-suggested-action-btn:focus-visible .message-suggested-action-icon {
background: #ccfbf1;
color: #0f766e;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.message-suggested-action-btn:hover:not(:disabled) .message-suggested-action-arrow,
.message-suggested-action-btn:focus-visible .message-suggested-action-arrow {
color: #0f766e;
color: var(--theme-primary-active);
transform: translateX(2px);
}
.message-suggested-action-btn:focus-visible {
outline: 3px solid rgba(20, 184, 166, 0.18);
outline: 3px solid var(--theme-focus-ring);
outline-offset: 2px;
border-color: #14b8a6;
border-color: var(--theme-primary);
}
.message-suggested-action-btn.selected {
border-color: rgba(13, 148, 136, 0.78);
background: #f0fdfa;
box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.18);
border-color: rgba(var(--theme-primary-rgb), 0.52);
background: var(--theme-primary-light-9);
box-shadow: inset 0 0 0 1px var(--theme-primary-shadow);
}
.message-suggested-action-btn.selected .message-suggested-action-icon {
background: #99f6e4;
color: #115e59;
background: var(--theme-primary-soft-strong);
color: var(--theme-primary-active);
}
.message-suggested-action-btn.selected .message-suggested-action-arrow {
color: #0f766e;
color: var(--theme-primary-active);
}
.message-suggested-action-btn.locked:not(.selected) {
@@ -1268,8 +1253,8 @@
}
.message-action-chip {
background: #ecfdf5;
color: #059669;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.message-detail-block {
@@ -1376,8 +1361,8 @@
}
.expense-query-summary-chip.completed {
background: #dcfce7;
color: #15803d;
background: var(--success-soft);
color: var(--success);
}
.expense-query-summary-chip.other {
@@ -1491,8 +1476,8 @@
}
.expense-query-record-status.completed {
background: #dcfce7;
color: #15803d;
background: var(--success-soft);
color: var(--success);
}
.expense-query-record-card p {
@@ -1801,10 +1786,10 @@
}
.tool-btn.composer-side-btn.active {
border-color: rgba(59, 130, 246, 0.42);
background: rgba(239, 246, 255, 0.96);
color: #2563eb;
box-shadow: 0 6px 14px rgba(59, 130, 246, 0.14);
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.42);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
box-shadow: 0 6px 14px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14);
}
.composer-date-popover {