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

@@ -1,8 +1,8 @@
<template>
<div class="log-trend-chart">
<div class="chart-legend">
<span><i style="background:#10b981"></i>日志总量</span>
<span><i style="background:#ef4444"></i>失败数</span>
<span><i :style="{ background: chartColors.primary }"></i>日志总量</span>
<span><i :style="{ background: chartColors.danger }"></i>失败数</span>
</div>
<div class="chart-body">
<Bar :data="chartData" :options="chartOptions" />
@@ -24,6 +24,7 @@ import {
Legend
} from 'chart.js'
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
import { useThemeColors } from '../../composables/useThemeColors.js'
ChartJS.register(CategoryScale, LinearScale, BarElement, PointElement, LineElement, Tooltip, Legend)
@@ -38,6 +39,11 @@ const progress = useAnimationProgress([
() => props.totals,
() => props.failures
], 1000)
const themeColors = useThemeColors()
const chartColors = computed(() => ({
primary: themeColors.value.chartPrimary,
danger: themeColors.value.chartDanger
}))
const scaleSeries = (series) =>
series.map((value) => Math.round(Number(value || 0) * progress.value))
@@ -50,7 +56,7 @@ const chartData = computed(() => ({
{
label: '日志总量',
data: scaleSeries(props.totals),
backgroundColor: '#10b981',
backgroundColor: chartColors.value.primary,
borderRadius: 4,
barPercentage: 0.58,
categoryPercentage: 0.56,
@@ -59,11 +65,11 @@ const chartData = computed(() => ({
{
label: '失败数',
data: scaleSeries(props.failures),
borderColor: '#ef4444',
borderColor: chartColors.value.danger,
backgroundColor: 'transparent',
borderWidth: 2,
pointBackgroundColor: '#ffffff',
pointBorderColor: '#ef4444',
pointBorderColor: chartColors.value.danger,
pointBorderWidth: 2,
pointRadius: 3,
pointHoverRadius: 5,