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

98
web/src/assets/styles/views/audit-view.css
View File

@@ -66,7 +66,7 @@
bottom: -13px;
height: 3px;
border-radius: 999px;
background: #10b981;
background: var(--theme-primary);
}
.list-toolbar {
@@ -93,7 +93,7 @@
gap: 8px;
padding: 0 11px;
border: 1px solid #d7e0ea;
border-radius: 8px;
border-radius: 4px;
background: #fff;
color: #64748b;
}
@@ -118,8 +118,8 @@
}
.search-filter:focus-within {
border-color: rgba(16, 185, 129, 0.48);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
border-color: rgba(var(--theme-primary-rgb), 0.48);
box-shadow: 0 0 0 3px var(--theme-focus-ring);
}
.picker-trigger,
@@ -127,7 +127,7 @@
.create-btn,
.row-action {
min-height: 38px;
border-radius: 8px;
border-radius: 4px;
font-size: 13px;
font-weight: 760;
}
@@ -166,9 +166,9 @@
.picker-trigger:hover,
.picker-filter.open .picker-trigger {
border-color: rgba(16, 185, 129, 0.34);
background: #f6fffb;
color: #0f9f78;
border-color: rgba(var(--theme-primary-rgb), 0.34);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.picker-popover {
@@ -181,7 +181,7 @@
gap: 14px;
padding: 16px;
border: 1px solid #d7e0ea;
border-radius: 12px;
border-radius: 4px;
background: #fff;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}
@@ -204,7 +204,7 @@
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
border-radius: 4px;
background: transparent;
color: #64748b;
}
@@ -227,7 +227,7 @@
align-items: center;
padding: 0 12px;
border: 1px solid #d7e0ea;
border-radius: 8px;
border-radius: 4px;
background: #fff;
color: #334155;
font-size: 13px;
@@ -237,9 +237,9 @@
.picker-option:hover,
.picker-option.active {
border-color: rgba(16, 185, 129, 0.32);
background: rgba(16, 185, 129, 0.08);
color: #059669;
border-color: rgba(var(--theme-primary-rgb), 0.32);
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
}
.toolbar-actions {
@@ -259,8 +259,8 @@
}
.ghost-filter-btn:hover {
border-color: rgba(16, 185, 129, 0.28);
color: #059669;
border-color: rgba(var(--theme-primary-rgb), 0.28);
color: var(--theme-primary-active);
}
.create-btn {
@@ -269,9 +269,9 @@
gap: 8px;
padding: 0 14px;
border: 0;
background: #059669;
background: var(--theme-primary);
color: #fff;
box-shadow: 0 8px 18px rgba(5, 150, 105, 0.18);
box-shadow: 0 8px 18px var(--theme-primary-shadow);
}
.create-btn:disabled {
@@ -307,8 +307,8 @@
align-items: center;
padding: 0 10px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.1);
color: #047857;
background: var(--theme-primary-soft);
color: var(--theme-primary-active);
font-size: 12px;
font-weight: 800;
}
@@ -376,7 +376,7 @@
}
.table-state.empty i {
color: #0ea5e9;
color: #3a7ca5;
}
.table-state p,
@@ -402,10 +402,10 @@
align-items: center;
justify-content: center;
padding: 0 14px;
border: 1px solid rgba(16, 185, 129, 0.28);
border: 1px solid rgba(var(--theme-primary-rgb), 0.28);
border-radius: 8px;
background: #fff;
color: #059669;
color: var(--theme-primary-active);
font-size: 13px;
font-weight: 760;
}
@@ -487,7 +487,7 @@ tbody tr.is-disabled:hover {
font-weight: 900;
}
.skill-avatar.emerald { background: linear-gradient(135deg, #10b981, #059669); }
.skill-avatar.primary { background: var(--theme-gradient-primary); }
.skill-avatar.rose { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.skill-avatar.violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.skill-avatar.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
@@ -529,8 +529,8 @@ tbody tr.is-disabled:hover {
}
.status-pill.success {
background: #dcfce7;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
}
.status-pill.warning {
@@ -544,8 +544,8 @@ tbody tr.is-disabled:hover {
}
.status-pill.info {
background: #e0f2fe;
color: #0284c7;
background: #eaf4fa;
color: #2f6d95;
}
.status-pill.danger {
@@ -560,13 +560,13 @@ tbody tr.is-disabled:hover {
.row-action {
padding: 0 12px;
border: 1px solid rgba(16, 185, 129, 0.32);
border: 1px solid rgba(var(--theme-primary-rgb), 0.32);
background: #fff;
color: #059669;
color: var(--theme-primary-active);
}
.row-action:hover {
background: rgba(16, 185, 129, 0.08);
background: var(--theme-primary-soft);
}
.detail-scroll {
@@ -620,7 +620,7 @@ tbody tr.is-disabled:hover {
font-weight: 800;
}
.skill-badge.emerald { background: linear-gradient(135deg, #10b981, #059669); }
.skill-badge.primary { background: var(--theme-gradient-primary); }
.skill-badge.rose { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.skill-badge.violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.skill-badge.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
@@ -658,9 +658,9 @@ tbody tr.is-disabled:hover {
gap: 6px;
margin-top: 12px;
padding: 12px 14px;
border: 1px solid rgba(16, 185, 129, 0.16);
border: 1px solid rgba(var(--theme-primary-rgb), 0.16);
border-radius: 12px;
background: linear-gradient(180deg, #f8fffc, #ffffff);
background: linear-gradient(180deg, var(--theme-primary-soft), #ffffff);
}
.review-note-block strong {
@@ -695,7 +695,7 @@ tbody tr.is-disabled:hover {
}
.hero-review-meta i {
color: #059669;
color: var(--theme-primary);
font-size: 15px;
}
@@ -1041,12 +1041,12 @@ tbody tr.is-disabled:hover {
}
.version-pair-card.published {
background: rgba(16, 185, 129, 0.1);
background: var(--success-soft);
}
.version-pair-card.published b {
background: #dcfce7;
color: #059669;
background: var(--success-line);
color: var(--success-hover);
}
.version-pair-card.working {
@@ -1115,8 +1115,8 @@ tbody tr.is-disabled:hover {
}
.change-center-item.active {
border-color: rgba(16, 185, 129, 0.35);
background: rgba(16, 185, 129, 0.05);
border-color: rgba(var(--theme-primary-rgb), 0.35);
background: var(--theme-primary-soft);
}
.change-center-item > button {
@@ -1176,13 +1176,13 @@ tbody tr.is-disabled:hover {
}
.change-record-item:hover {
border-color: rgba(16, 185, 129, 0.35);
border-color: rgba(var(--theme-primary-rgb), 0.35);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
.change-record-item:focus-visible {
outline: 3px solid rgba(16, 185, 129, 0.18);
outline: 3px solid var(--theme-focus-ring);
outline-offset: 1px;
}
@@ -1387,8 +1387,8 @@ tbody tr.is-disabled:hover {
}
.rule-timeline-item > i.success {
background: #dcfce7;
color: #059669;
background: var(--success-soft);
color: var(--success-hover);
}
.rule-timeline-item > i.warning {
@@ -1459,15 +1459,6 @@ tbody tr.is-disabled:hover {
font-weight: 850;
}
.compare-toolbar select {
width: 100%;
min-height: 40px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 12px;
background: #fff;
}
.compare-toolbar i {
margin-bottom: 10px;
color: #94a3b8;
@@ -1512,4 +1503,3 @@ tbody tr.is-disabled:hover {
display: grid;
gap: 10px;
}