style: 全局 UI 主题皮肤重构与样式模块化
引入 Element Plus 主题定制和主题皮肤 composable，将全局 样式拆分为组件级独立 CSS 文件（侧边栏、顶栏、工作台等）， 统一色彩变量和间距规范，重构所有视图和组件样式以适配新 主题系统，优化图表和知识图谱组件视觉表现，提取审计和差 旅报销相关子组件。
This commit is contained in:
caoxiaozhu
@@ -112,9 +112,9 @@
|
||||
min-height: 24px;
|
||||
padding: 0 9px;
|
||||
border-radius: 999px;
|
||||
background: #ecfdf5;
|
||||
border: 1px solid rgba(16, 185, 129, .16);
|
||||
color: #10b981;
|
||||
background: var(--theme-primary-soft);
|
||||
border: 1px solid rgba(var(--theme-primary-rgb), .16);
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -265,8 +265,8 @@
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #10b981;
|
||||
box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
|
||||
background: var(--theme-primary);
|
||||
box-shadow: 0 0 0 4px var(--theme-focus-ring);
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
@@ -309,7 +309,7 @@
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
height: 2px;
|
||||
background: #10b981;
|
||||
background: var(--theme-primary);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -346,20 +346,20 @@
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
z-index: -1;
|
||||
border: 2px solid rgba(16, 185, 129, .42);
|
||||
border: 2px solid rgba(var(--theme-primary-rgb), .42);
|
||||
border-radius: 999px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress-step.active span {
|
||||
background: #059669;
|
||||
background: var(--theme-primary-active);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.progress-step.current span {
|
||||
background: #10b981 !important;
|
||||
background: var(--theme-primary) !important;
|
||||
color: #fff !important;
|
||||
box-shadow: 0 0 0 4px rgba(16, 185, 129, .15) !important;
|
||||
box-shadow: 0 0 0 4px var(--theme-focus-ring) !important;
|
||||
animation: breathe-dot 3.2s ease-in-out infinite !important;
|
||||
transform-origin: center !important;
|
||||
}
|
||||
@@ -367,11 +367,11 @@
|
||||
@keyframes breathe-dot {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, .3), 0 0 0 4px rgba(16, 185, 129, .15);
|
||||
box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), .3), 0 0 0 4px var(--theme-focus-ring);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.12);
|
||||
box-shadow: 0 4px 20px rgba(16, 185, 129, .5), 0 0 0 10px rgba(16, 185, 129, .08);
|
||||
box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb), .5), 0 0 0 10px rgba(var(--theme-primary-rgb), .08);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -382,7 +382,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-step.current strong { color: #059669; }
|
||||
.progress-step.current strong { color: var(--theme-primary-active); }
|
||||
|
||||
.progress-step-copy {
|
||||
width: 100%;
|
||||
@@ -414,16 +414,16 @@
|
||||
}
|
||||
|
||||
.progress-step.done .progress-step-status {
|
||||
border-color: rgba(16, 185, 129, .2);
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
border-color: rgba(var(--theme-primary-rgb), .2);
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.progress-step.current .progress-step-status {
|
||||
border-color: rgba(5, 150, 105, .22);
|
||||
background: #059669;
|
||||
border-color: rgba(var(--theme-primary-rgb), .22);
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 18px rgba(5, 150, 105, .14);
|
||||
box-shadow: 0 8px 18px var(--theme-primary-shadow);
|
||||
}
|
||||
|
||||
.progress-step:not(.done):not(.current) .progress-step-status {
|
||||
@@ -432,7 +432,7 @@
|
||||
}
|
||||
|
||||
.progress-step.current small {
|
||||
color: #059669;
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.progress-step-meta {
|
||||
@@ -535,14 +535,14 @@
|
||||
|
||||
.smart-entry-btn.secondary {
|
||||
background: #fff;
|
||||
color: #0f766e;
|
||||
border-color: rgba(16, 185, 129, .24);
|
||||
color: var(--theme-primary-active);
|
||||
border-color: rgba(var(--theme-primary-rgb), .24);
|
||||
}
|
||||
|
||||
.smart-entry-btn:hover {
|
||||
border-color: rgba(16, 185, 129, .36);
|
||||
background: #f0fdf4;
|
||||
color: #047857;
|
||||
border-color: rgba(var(--theme-primary-rgb), .36);
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.detail-total {
|
||||
@@ -553,8 +553,8 @@
|
||||
min-height: 34px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -643,16 +643,16 @@
|
||||
}
|
||||
|
||||
.application-detail-fact.highlight span {
|
||||
background: #eefcf6;
|
||||
color: #047857;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.application-detail-fact.highlight strong {
|
||||
background: #f6fef9;
|
||||
background: color-mix(in srgb, var(--theme-primary-soft) 55%, #ffffff);
|
||||
}
|
||||
|
||||
.application-detail-fact.emphasis strong {
|
||||
color: #047857;
|
||||
color: var(--theme-primary-active);
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
@@ -663,13 +663,13 @@
|
||||
|
||||
.detail-note-editor textarea {
|
||||
min-height: 92px;
|
||||
border-color: rgba(16, 185, 129, .28);
|
||||
border-color: rgba(var(--theme-primary-rgb), .28);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.detail-note-editor textarea:focus {
|
||||
border-color: #10b981;
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px var(--theme-focus-ring);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -692,8 +692,8 @@
|
||||
}
|
||||
|
||||
.leader-approval-card {
|
||||
border-color: rgba(5, 150, 105, .18);
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f7fdfb 100%);
|
||||
border-color: rgba(var(--theme-primary-rgb), .18);
|
||||
background: linear-gradient(180deg, #ffffff 0%, var(--theme-primary-soft) 100%);
|
||||
}
|
||||
|
||||
.leader-approval-card textarea {
|
||||
@@ -704,8 +704,8 @@
|
||||
|
||||
.leader-approval-card textarea:focus {
|
||||
outline: 0;
|
||||
border-color: rgba(5, 150, 105, .5);
|
||||
box-shadow: 0 0 0 3px rgba(5, 150, 105, .1);
|
||||
border-color: rgba(var(--theme-primary-rgb), .5);
|
||||
box-shadow: 0 0 0 3px var(--theme-focus-ring);
|
||||
}
|
||||
|
||||
.leader-opinion-meta {
|
||||
@@ -721,7 +721,7 @@
|
||||
|
||||
.leader-opinion-meta strong {
|
||||
flex: 0 0 auto;
|
||||
color: #047857;
|
||||
color: var(--theme-primary-active);
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
@@ -758,7 +758,7 @@
|
||||
}
|
||||
|
||||
.application-leader-opinion-head strong {
|
||||
color: #047857;
|
||||
color: var(--theme-primary-active);
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -812,12 +812,12 @@
|
||||
}
|
||||
|
||||
.detail-expense-table tbody tr.system-generated-row td {
|
||||
background: #f0fdf4;
|
||||
border-bottom-color: #bbf7d0;
|
||||
background: var(--success-soft);
|
||||
border-bottom-color: var(--success-line);
|
||||
}
|
||||
|
||||
.detail-expense-table tbody tr.system-generated-row:hover td {
|
||||
background: #ecfdf5;
|
||||
background: var(--success-soft);
|
||||
}
|
||||
|
||||
.detail-expense-table .col-time { width: 11%; }
|
||||
@@ -893,8 +893,8 @@
|
||||
|
||||
.editor-input:focus,
|
||||
.editor-select:focus {
|
||||
border-color: #10b981;
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px var(--theme-focus-ring);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -966,8 +966,8 @@
|
||||
}
|
||||
|
||||
.over-tag.system {
|
||||
background: #dcfce7;
|
||||
color: #047857;
|
||||
background: var(--success-soft);
|
||||
color: var(--success-hover);
|
||||
}
|
||||
|
||||
.expense-total-under-table {
|
||||
@@ -977,10 +977,10 @@
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #d1fae5;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb), .22);
|
||||
border-radius: 8px;
|
||||
background: #f0fdf4;
|
||||
color: #0f766e;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.expense-total-under-table span {
|
||||
@@ -990,7 +990,7 @@
|
||||
}
|
||||
|
||||
.expense-total-under-table strong {
|
||||
color: #047857;
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -1050,8 +1050,8 @@
|
||||
}
|
||||
|
||||
.attachment-recognition-pill.pass {
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
background: var(--success-soft);
|
||||
color: var(--success-hover);
|
||||
}
|
||||
|
||||
.attachment-recognition-pill.medium {
|
||||
@@ -1101,9 +1101,9 @@
|
||||
}
|
||||
|
||||
.icon-action.upload {
|
||||
background: #ecfdf5;
|
||||
border-color: rgba(16, 185, 129, .24);
|
||||
color: #047857;
|
||||
background: var(--theme-primary-soft);
|
||||
border-color: rgba(var(--theme-primary-rgb), .24);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.icon-action.preview {
|
||||
@@ -1133,14 +1133,14 @@
|
||||
}
|
||||
|
||||
.inline-action.accent {
|
||||
border-color: rgba(16, 185, 129, .24);
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
border-color: rgba(var(--theme-primary-rgb), .24);
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.inline-action.primary {
|
||||
border-color: #10b981;
|
||||
background: #10b981;
|
||||
border-color: var(--theme-primary);
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -1151,13 +1151,13 @@
|
||||
}
|
||||
|
||||
.inline-action:hover {
|
||||
border-color: rgba(16, 185, 129, .36);
|
||||
color: #047857;
|
||||
border-color: rgba(var(--theme-primary-rgb), .36);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.inline-action.primary:hover {
|
||||
border-color: #059669;
|
||||
background: #059669;
|
||||
border-color: var(--theme-primary-active);
|
||||
background: var(--theme-primary-active);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -1179,8 +1179,8 @@
|
||||
min-height: 28px;
|
||||
padding: 0 9px;
|
||||
border-radius: 8px;
|
||||
background: #dcfce7;
|
||||
color: #047857;
|
||||
background: var(--success-soft);
|
||||
color: var(--success-hover);
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
white-space: nowrap;
|
||||
@@ -1194,8 +1194,8 @@
|
||||
min-height: 28px;
|
||||
padding: 0 9px;
|
||||
border-radius: 8px;
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
background: var(--success-soft);
|
||||
color: var(--success-hover);
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
white-space: nowrap;
|
||||
@@ -1217,7 +1217,7 @@
|
||||
}
|
||||
|
||||
.risk-inline-tag.pass,
|
||||
.risk-inline-tag.low { background: #ecfdf5; color: #059669; }
|
||||
.risk-inline-tag.low { background: var(--success-soft); color: var(--success-hover); }
|
||||
.risk-inline-tag.medium { background: #fff7ed; color: #ea580c; }
|
||||
.risk-inline-tag.high { background: #fef2f2; color: #dc2626; }
|
||||
|
||||
@@ -1248,7 +1248,7 @@
|
||||
}
|
||||
|
||||
.risk-suggestion {
|
||||
color: #0f766e;
|
||||
color: var(--success-hover);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -1284,10 +1284,10 @@
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
padding: 22px;
|
||||
border: 1px solid rgba(16, 185, 129, .14);
|
||||
border: 1px solid rgba(var(--theme-primary-rgb), .14);
|
||||
border-radius: 24px;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(16, 185, 129, .12), transparent 36%),
|
||||
radial-gradient(circle at top left, rgba(var(--theme-primary-rgb), .12), transparent 36%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 252, .98));
|
||||
box-shadow: 0 28px 56px rgba(15, 23, 42, .2);
|
||||
}
|
||||
@@ -1338,8 +1338,8 @@
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(16, 185, 129, .12);
|
||||
color: #047857;
|
||||
background: var(--theme-primary-soft);
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -1547,10 +1547,10 @@
|
||||
|
||||
.approve-action {
|
||||
min-width: 92px;
|
||||
border: 1px solid #059669;
|
||||
background: #059669;
|
||||
border: 1px solid var(--success);
|
||||
background: var(--success);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 10px rgba(5, 150, 105, .14);
|
||||
box-shadow: 0 4px 10px rgba(var(--success-rgb), .14);
|
||||
}
|
||||
|
||||
.reject-action {
|
||||
|
||||
Reference in New Issue
Block a user