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

460
web/src/components/layout/TopBar.vue
View File

@@ -262,7 +262,7 @@ const workbenchKpis = computed(() => {
unit: '笔',
meta: '本月累计',
trend: monthlyCount > 0 ? 'up' : 'down',
color: '#10b981'
color: 'var(--theme-primary)'
},
{
label: '本月报销总金额',
@@ -299,10 +299,10 @@ const requestKpis = computed(() => {
const completed = Number(summary.completed ?? 0)
return [
{ label: '全部单据', value: total, delta: '当前', trend: 'up', arrow: 'mdi mdi-minus', color: '#10b981' },
{ label: '全部单据', value: total, delta: '当前', trend: 'up', arrow: 'mdi mdi-minus', color: 'var(--theme-primary)' },
{ label: '草稿', value: draft, delta: '待提交', trend: draft > 0 ? 'down' : 'up', arrow: draft > 0 ? 'mdi mdi-arrow-down' : 'mdi mdi-minus', color: '#f59e0b' },
{ label: '审批中', value: inProgress, delta: '处理中', trend: inProgress > 0 ? 'up' : 'down', arrow: inProgress > 0 ? 'mdi mdi-arrow-up' : 'mdi mdi-minus', color: '#3b82f6' },
{ label: '已完成', value: completed, delta: '已归档', trend: 'up', arrow: 'mdi mdi-arrow-up' , color: '#10b981' }
{ label: '已完成', value: completed, delta: '已归档', trend: 'up', arrow: 'mdi mdi-arrow-up' , color: 'var(--success)' }
]
})
@@ -314,10 +314,10 @@ const documentKpis = computed(() => {
const archived = Number(summary.archived ?? 0)
return [
{ label: '全部单据', value: total, delta: '当前', trend: 'up', arrow: 'mdi mdi-minus', color: '#10b981' },
{ label: '全部单据', value: total, delta: '当前', trend: 'up', arrow: 'mdi mdi-minus', color: 'var(--theme-primary)' },
{ label: '待提交', value: toSubmit, delta: '草稿待办', trend: toSubmit > 0 ? 'down' : 'up', arrow: toSubmit > 0 ? 'mdi mdi-arrow-down' : 'mdi mdi-minus', color: '#f59e0b' },
{ label: '待我处理', value: toProcess, delta: '审批待办', trend: toProcess > 0 ? 'down' : 'up', arrow: toProcess > 0 ? 'mdi mdi-arrow-down' : 'mdi mdi-minus', color: '#3b82f6' },
{ label: '已归档', value: archived, delta: '归档入账', trend: 'up', arrow: 'mdi mdi-arrow-up', color: '#10b981' }
{ label: '已归档', value: archived, delta: '归档入账', trend: 'up', arrow: 'mdi mdi-arrow-up', color: 'var(--success)' }
]
})
@@ -329,25 +329,25 @@ const logsKpis = computed(() => {
const failed = Number(summary.failed ?? 0)
return [
{ label: 'Hermes 总任务', value: total, unit: '条', meta: '当前', trend: 'up', color: '#10b981' },
{ label: 'Hermes 总任务', value: total, unit: '条', meta: '当前', trend: 'up', color: 'var(--theme-primary)' },
{ label: '运行中', value: running, unit: '条', meta: running > 0 ? '实时执行' : '暂无执行', trend: running > 0 ? 'up' : 'down', color: '#3b82f6' },
{ label: '已完成', value: completed, unit: '条', meta: total ? `占比 ${Math.round((completed / total) * 100)}%` : '等待数据', trend: 'up', color: '#10b981' },
{ label: '已完成', value: completed, unit: '条', meta: total ? `占比 ${Math.round((completed / total) * 100)}%` : '等待数据', trend: 'up', color: 'var(--success)' },
{ label: '失败数', value: failed, unit: '条', meta: failed > 0 ? '需要关注' : '运行正常', trend: failed > 0 ? 'down' : 'up', color: '#ef4444' }
]
})
const chatKpis = [
{ label: '今日已问数', value: 86, unit: '次', meta: '较昨日 +18', trend: 'up', color: '#10b981' },
{ label: '今日已问数', value: 86, unit: '次', meta: '较昨日 +18', trend: 'up', color: 'var(--theme-primary)' },
{ label: '已解决问题', value: 72, unit: '条', meta: '解决率 83.7%', trend: 'up', color: '#3b82f6' },
{ label: '知识命中率', value: '92.3', unit: '%', meta: '较昨日 +2.6%', trend: 'up', color: '#8b5cf6' },
{ label: '平均响应时长', value: 2.1, unit: 's', meta: '较昨日 -0.3s', trend: 'down', color: '#f59e0b' }
]
const approvalKpis = [
{ label: '待审批单据', value: 12, unit: '单', meta: '较昨日 +3', trend: 'up', color: '#059669' },
{ label: '待审批单据', value: 12, unit: '单', meta: '较昨日 +3', trend: 'up', color: 'var(--theme-primary)' },
{ label: '高风险单据', value: 4, unit: '单', meta: '较昨日 +1', trend: 'up', color: '#ef4444' },
{ label: '即将超时', value: 3, unit: '单', meta: '30 分钟内', trend: 'down', color: '#f59e0b' },
{ label: '今日已处理', value: 28, unit: '单', meta: '通过率 86%', trend: 'up', color: '#10b981' }
{ label: '今日已处理', value: 28, unit: '单', meta: '通过率 86%', trend: 'up', color: 'var(--success)' }
]
const knowledgeKpis = computed(() => {
@@ -360,7 +360,7 @@ const knowledgeKpis = computed(() => {
value: String(totalDocuments),
meta: '',
trend: 'up',
color: '#10b981'
color: 'var(--theme-primary)'
}
]
})
@@ -381,7 +381,7 @@ const employeeKpis = computed(() => {
unit: '人',
meta: `覆盖 ${departments} 个部门`,
trend: 'up',
color: '#10b981'
color: 'var(--theme-primary)'
},
{
label: '在职账号',
@@ -499,438 +499,4 @@ function buildPresetRangeLabel(label) {
}
</script>
<style scoped>
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 18px 24px 20px;
background: #fff;
}
.topbar.chat-mode {
padding-bottom: 16px;
border-bottom: 1px solid #eef2f7;
}
.title-group {
min-width: 0;
}
.eyebrow {
display: inline-block;
margin-bottom: 8px;
padding: 3px 10px;
border-radius: 6px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(59, 130, 246, 0.10));
color: #0d9668;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.topbar h1 {
color: #0f172a;
font-size: 26px;
font-weight: 800;
letter-spacing: 0;
line-height: 1.2;
}
.topbar p {
margin-top: 6px;
max-width: 720px;
color: #64748b;
font-size: 14px;
line-height: 1.5;
}
.top-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
flex-wrap: wrap;
}
.range-combo {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
}
.range-shell {
height: 42px;
display: inline-flex;
align-items: center;
padding: 3px;
border: 1px solid #d7e0ea;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.range-meta {
height: 34px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 12px;
border-right: 1px solid #e2e8f0;
color: #334155;
font-size: 13px;
font-weight: 650;
white-space: nowrap;
}
.range-meta .mdi {
color: #10b981;
}
.range-tabs {
display: inline-flex;
align-items: center;
gap: 2px;
padding-left: 3px;
}
.range-tabs button {
height: 34px;
min-width: 54px;
padding: 0 14px;
border: 0;
border-radius: 8px;
background: transparent;
color: #64748b;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.range-tabs button:hover:not(.active) {
background: #f1f5f9;
color: #334155;
}
.range-tabs button.active {
background: #10b981;
color: #fff;
box-shadow: 0 6px 14px rgba(16, 185, 129, .18);
}
.custom-range-wrap {
position: relative;
}
.custom-range-btn {
height: 42px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 13px;
border: 1px solid #d7e0ea;
border-radius: 10px;
background: #fff;
color: #334155;
font-size: 13px;
font-weight: 750;
white-space: nowrap;
}
.custom-range-btn:hover,
.custom-range-btn.active {
border-color: rgba(16, 185, 129, .34);
background: #f6fffb;
color: #0f9f78;
}
.calendar-popover {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 336px;
z-index: 40;
display: grid;
gap: 14px;
padding: 16px;
border: 1px solid #d7e0ea;
border-radius: 12px;
background: #fff;
box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}
.calendar-popover header,
.calendar-popover footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.calendar-popover header strong {
color: #0f172a;
font-size: 15px;
}
.calendar-popover header button {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
background: transparent;
color: #64748b;
}
.date-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.date-fields label {
display: grid;
gap: 6px;
}
.date-fields span {
color: #64748b;
font-size: 12px;
font-weight: 700;
}
.date-fields input {
width: 100%;
height: 38px;
padding: 0 9px;
border: 1px solid #d7e0ea;
border-radius: 8px;
color: #0f172a;
font-size: 13px;
}
.ghost-btn,
.apply-btn {
height: 36px;
padding: 0 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 750;
}
.ghost-btn {
border: 1px solid #d7e0ea;
background: #fff;
color: #334155;
}
.apply-btn {
border: 0;
background: #10b981;
color: #fff;
}
.apply-btn:disabled {
cursor: not-allowed;
background: #cbd5e1;
}
.kpi-chips {
display: flex;
gap: 10px;
}
.detail-alert-strip {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.detail-alert-pill {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 0 12px;
border: 1px solid #fed7aa;
border-radius: 999px;
background: #fff7ed;
color: #ea580c;
font-size: 12px;
font-weight: 800;
white-space: nowrap;
}
.detail-alert-pill i {
font-size: 14px;
}
.detail-alert-pill.success {
border-color: #bbf7d0;
background: #f0fdf4;
color: #059669;
}
.detail-alert-pill.danger {
border-color: #fecaca;
background: #fff1f2;
color: #dc2626;
}
.kpi-chip {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
gap: 2px 10px;
padding: 8px 16px;
border-radius: 10px;
background: linear-gradient(135deg, color-mix(in srgb, var(--chip-color) 8%, #fff), color-mix(in srgb, var(--chip-color) 3%, #f8fafc));
border: 1px solid color-mix(in srgb, var(--chip-color) 18%, #e2e8f0);
}
.chip-value {
grid-row: 1 / 3;
align-self: center;
color: #0f172a;
font-size: 22px;
font-weight: 850;
line-height: 1;
}
.chip-value small {
font-size: 13px;
font-weight: 700;
margin-left: 2px;
}
.chip-label {
color: #64748b;
font-size: 12px;
font-weight: 700;
}
.chip-delta {
color: #94a3b8;
font-size: 11px;
font-weight: 700;
}
.chip-delta.up { color: #059669; }
.chip-delta.down { color: #f59e0b; }
.topbar-spacer {
flex: 1;
min-width: 0;
}
.create-top-btn {
height: 40px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 18px;
border: 0;
border-radius: 8px;
background: #059669;
color: #fff;
font-size: 14px;
font-weight: 750;
box-shadow: 0 8px 18px rgba(5, 150, 105, 0.18);
white-space: nowrap;
}
.create-top-btn:hover {
background: #047857;
}
@media (max-width: 1120px) {
.range-combo {
width: 100%;
justify-content: flex-end;
}
}
@media (max-width: 960px) {
.topbar {
flex-direction: column;
align-items: stretch;
}
.top-actions,
.search-wrap,
.search-wrap.wide,
.detail-alert-strip,
.month-chip,
.qa-filter,
.new-question-btn {
width: 100%;
}
.range-combo {
justify-content: stretch;
}
.range-shell {
flex: 1;
}
.range-meta {
flex: 1;
}
.custom-range-btn {
width: 100%;
justify-content: center;
}
.calendar-popover {
right: auto;
left: 0;
}
}
@media (max-width: 640px) {
.range-combo {
display: grid;
gap: 8px;
}
.range-shell {
height: auto;
display: grid;
gap: 4px;
}
.range-meta {
width: 100%;
border-right: 0;
border-bottom: 1px solid #e2e8f0;
justify-content: center;
}
.range-tabs {
width: 100%;
padding-left: 0;
}
.range-tabs button {
flex: 1;
padding: 0 8px;
}
.calendar-popover {
width: min(336px, calc(100vw - 32px));
}
.date-fields {
grid-template-columns: 1fr;
}
}
</style>
<style scoped src="../../assets/styles/components/top-bar.css"></style>