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

引入 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

View File

@@ -16,8 +16,8 @@
}
.opinion-wrap 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;
}
@@ -55,8 +55,8 @@
.risk-total span { font-weight: 750; }
.risk-total.high {
background: #fee2e2;
color: #dc2626;
background: var(--danger-soft);
color: var(--danger-hover);
}
.risk-total.high strong { font-size: 16px; font-weight: 900; }
@@ -87,8 +87,8 @@
flex-shrink: 0;
}
.risk-row.high .risk-icon { background: #fef2f2; color: #ef4444; }
.risk-row.medium .risk-icon { background: #fff7ed; color: #f97316; }
.risk-row.high .risk-icon { background: var(--danger-soft); color: var(--danger); }
.risk-row.medium .risk-icon { background: var(--warning-soft); color: var(--warning-active); }
.risk-text {
flex: 1;
@@ -105,8 +105,8 @@
flex-shrink: 0;
}
.risk-level.high { background: #fef2f2; color: #ef4444; }
.risk-level.medium { background: #fff7ed; color: #f97316; }
.risk-level.high { background: var(--danger-soft); color: var(--danger); }
.risk-level.medium { background: var(--warning-soft); color: var(--warning-active); }
/* ── Side Dual ── */
.side-dual {
@@ -134,7 +134,7 @@
.reminder-list li i {
margin-top: 2px;
color: #f59e0b;
color: var(--warning);
font-size: 14px;
flex-shrink: 0;
}
@@ -195,35 +195,35 @@
.action-btn.supplement {
background: #fff;
border-color: #fed7aa;
color: #ea580c;
border-color: var(--warning-line);
color: var(--warning-active);
}
.action-btn.supplement:hover {
background: #fff7ed;
box-shadow: 0 4px 12px rgba(234, 88, 12, .12);
background: var(--warning-soft);
box-shadow: 0 4px 12px rgba(var(--warning-rgb), .12);
}
.action-btn.reject {
background: #fff;
border-color: #fecaca;
color: #ef4444;
border-color: var(--danger-line);
color: var(--danger);
}
.action-btn.reject:hover {
background: #fef2f2;
box-shadow: 0 4px 12px rgba(239, 68, 68, .12);
background: var(--danger-soft);
box-shadow: 0 4px 12px rgba(var(--danger-rgb), .12);
}
.action-btn.approve {
background: #059669;
background: var(--theme-primary);
color: #fff;
box-shadow: 0 4px 16px rgba(5, 150, 105, .25);
box-shadow: 0 4px 16px var(--theme-primary-shadow);
}
.action-btn.approve:hover {
background: #047857;
box-shadow: 0 8px 24px rgba(5, 150, 105, .30);
background: var(--theme-primary-active);
box-shadow: 0 8px 24px rgba(var(--theme-primary-rgb), .30);
}
.action-btn:active { transform: scale(.97); }