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

@@ -111,18 +111,18 @@ function handleCancel() {
-webkit-backdrop-filter: blur(10px);
}
.shared-confirm-card {
width: min(480px, 100%);
display: grid;
gap: 14px;
padding: 24px;
border: 1px solid rgba(16, 185, 129, 0.14);
border-radius: 24px;
background:
radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 36%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
box-shadow: 0 28px 56px rgba(15, 23, 42, 0.18);
}
.shared-confirm-card {
width: min(480px, 100%);
display: grid;
gap: 14px;
padding: 24px;
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14);
border-radius: 8px;
background:
radial-gradient(circle at top left, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.10), transparent 36%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
box-shadow: 0 28px 56px rgba(15, 23, 42, 0.18);
}
.shared-confirm-badge {
display: inline-flex;
@@ -135,20 +135,20 @@ function handleCancel() {
font-weight: 800;
}
.shared-confirm-badge.info {
background: rgba(59, 130, 246, 0.12);
color: #1d4ed8;
}
.shared-confirm-badge.info {
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.shared-confirm-badge.warning {
background: rgba(245, 158, 11, 0.14);
color: #b45309;
}
.shared-confirm-badge.danger {
background: rgba(239, 68, 68, 0.12);
color: #dc2626;
}
.shared-confirm-badge.warning {
background: var(--warning-soft);
color: var(--warning-active);
}
.shared-confirm-badge.danger {
background: var(--danger-soft);
color: var(--danger-hover);
}
.shared-confirm-card h4 {
margin: 0;
@@ -197,7 +197,7 @@ function handleCancel() {
justify-content: center;
gap: 8px;
padding: 0 16px;
border-radius: 14px;
border-radius: 6px;
font-size: 14px;
font-weight: 800;
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
@@ -214,20 +214,20 @@ function handleCancel() {
color: #fff;
}
.shared-confirm-btn.confirm.primary {
background: linear-gradient(135deg, #10b981, #059669);
box-shadow: 0 12px 24px rgba(5, 150, 105, 0.22);
}
.shared-confirm-btn.confirm.danger {
background: linear-gradient(135deg, #ef4444, #dc2626);
box-shadow: 0 12px 24px rgba(220, 38, 38, 0.22);
}
.shared-confirm-btn.cancel:hover:not(:disabled) {
border-color: rgba(16, 185, 129, 0.3);
color: #047857;
}
.shared-confirm-btn.confirm.primary {
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
box-shadow: 0 12px 24px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.20);
}
.shared-confirm-btn.confirm.danger {
background: linear-gradient(135deg, var(--danger), var(--danger-hover));
box-shadow: 0 12px 24px rgba(var(--danger-rgb), 0.22);
}
.shared-confirm-btn.cancel:hover:not(:disabled) {
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.3);
color: var(--theme-primary-active);
}
.shared-confirm-btn.confirm:hover:not(:disabled) {
transform: translateY(-1px);
@@ -259,7 +259,7 @@ function handleCancel() {
width: min(360px, 100%);
gap: 8px;
padding: 16px;
border-radius: 12px;
border-radius: 6px;
background: #fff;
}
@@ -281,7 +281,7 @@ function handleCancel() {
min-width: 76px;
min-height: 30px;
padding: 0 10px;
border-radius: 7px;
border-radius: 4px;
font-size: 12px;
}
@@ -290,10 +290,10 @@ function handleCancel() {
padding: 18px;
}
.shared-confirm-card {
padding: 20px;
border-radius: 20px;
}
.shared-confirm-card {
padding: 20px;
border-radius: 8px;
}
.shared-confirm-card h4 {
font-size: 19px;