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

18
web/src/components/charts/BarChart.vue
View File

@@ -28,12 +28,22 @@ import {
BarElement,
Tooltip
} from 'chart.js'
import { resolveCssColor, useThemeColors } from '../../composables/useThemeColors.js'
ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip)
const props = defineProps({
items: { type: Array, required: true }
})
const themeColors = useThemeColors()
const resolvedItems = computed(() => {
const fallback = themeColors.value.chartPrimary
return props.items.map((item) => ({
...item,
resolvedColor: resolveCssColor(item.color, fallback)
}))
})
const medalClass = (idx) => {
if (idx === 0) return 'gold'
@@ -56,10 +66,10 @@ const formatValue = (value) => {
}
const chartData = computed(() => ({
labels: props.items.map((i) => i.name || i.shortName),
labels: resolvedItems.value.map((i) => i.name || i.shortName),
datasets: [{
data: props.items.map((i) => i.value || i.amount),
backgroundColor: props.items.map((i) => i.color),
data: resolvedItems.value.map((i) => i.value || i.amount),
backgroundColor: resolvedItems.value.map((i) => i.resolvedColor),
borderRadius: 6,
borderSkipped: false,
barPercentage: 0.7,
@@ -169,4 +179,4 @@ const chartOptions = {
position: relative;
height: 240px;
}
</style>
</style>

6
web/src/components/charts/BudgetTrendChart.vue
View File

@@ -16,6 +16,7 @@ import {
Tooltip
} from 'chart.js'
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
import { useThemeColors } from '../../composables/useThemeColors.js'
ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend)
@@ -34,6 +35,7 @@ const progress = useAnimationProgress([
() => props.occupied,
() => props.available
], 1000)
const themeColors = useThemeColors()
const currency = (value) =>
Number(value || 0).toLocaleString('zh-CN', {
@@ -77,7 +79,7 @@ const chartData = computed(() => ({
{
label: '已使用',
data: scaleSeries(usedPercent.value),
backgroundColor: '#13a66b',
backgroundColor: themeColors.value.chartPrimary,
borderRadius: 5,
borderSkipped: false,
stack: 'budgetUsage',
@@ -86,7 +88,7 @@ const chartData = computed(() => ({
{
label: '已占用',
data: scaleSeries(occupiedPercent.value),
backgroundColor: '#f59e0b',
backgroundColor: themeColors.value.warning,
borderRadius: 5,
borderSkipped: false,
stack: 'budgetUsage',

18
web/src/components/charts/DonutChart.vue
View File

@@ -9,7 +9,7 @@
</div>
<div class="donut-legend">
<div v-for="item in items" :key="item.name" class="legend-row">
<i :style="{ background: item.color }"></i>
<i :style="{ background: item.resolvedColor }"></i>
<span class="legend-name">{{ item.name }}</span>
<span class="legend-val">{{ item.display }}</span>
</div>
@@ -27,6 +27,7 @@ import {
Legend
} from 'chart.js'
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
import { resolveCssColor, useThemeColors } from '../../composables/useThemeColors.js'
ChartJS.register(ArcElement, Tooltip, Legend)
@@ -37,12 +38,21 @@ const props = defineProps({
})
const progress = useAnimationProgress([() => props.items], 1150)
const themeColors = useThemeColors()
const resolvedItems = computed(() => {
const fallback = themeColors.value.chartPrimary
return props.items.map((item) => ({
...item,
resolvedColor: resolveCssColor(item.color, fallback)
}))
})
const chartData = computed(() => ({
labels: props.items.map((i) => i.name),
labels: resolvedItems.value.map((i) => i.name),
datasets: [{
data: props.items.map((i) => Math.max(Number((i.value * progress.value).toFixed(1)), 0.001)),
backgroundColor: props.items.map((i) => i.color),
data: resolvedItems.value.map((i) => Math.max(Number((i.value * progress.value).toFixed(1)), 0.001)),
backgroundColor: resolvedItems.value.map((i) => i.resolvedColor),
borderWidth: 0,
cutout: '68%',
spacing: 3,

6
web/src/components/charts/GaugeChart.vue
View File

@@ -33,6 +33,7 @@ import {
Tooltip
} from 'chart.js'
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
import { useThemeColors } from '../../composables/useThemeColors.js'
ChartJS.register(ArcElement, Tooltip)
@@ -46,12 +47,13 @@ const props = defineProps({
const ratioValue = computed(() => Number(props.ratio))
const progress = useAnimationProgress([() => props.ratio], 1150)
const animatedRatio = computed(() => Number((ratioValue.value * progress.value).toFixed(0)))
const themeColors = useThemeColors()
const chartData = computed(() => ({
labels: ['已执行', '剩余'],
datasets: [{
data: [animatedRatio.value, 100 - animatedRatio.value],
backgroundColor: ['#10b981', '#e2e8f0'],
backgroundColor: [themeColors.value.chartPrimary, '#e2e8f0'],
borderWidth: 0
}]
}))
@@ -101,7 +103,7 @@ const chartOptions = {
}
.gauge-center strong {
color: #10b981;
color: var(--chart-primary);
font-size: 22px;
font-weight: 700;
line-height: 1;

16
web/src/components/charts/LogTrendChart.vue
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,

21
web/src/components/charts/TrendChart.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="trend-chart">
<div class="chart-legend">
<span><i style="background:#10b981"></i>申请量（单）</span>
<span><i style="background:#3b82f6"></i>审批完成量（单）</span>
<span><i style="background:#8b5cf6"></i>平均审批时长（小时）</span>
<span><i :style="{ background: chartColors.primary }"></i>申请量（单）</span>
<span><i :style="{ background: chartColors.blue }"></i>审批完成量（单）</span>
<span><i :style="{ background: chartColors.purple }"></i>平均审批时长（小时）</span>
</div>
<div class="chart-body">
<Bar :data="chartData" :options="chartOptions" />
@@ -26,6 +26,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, Filler, Tooltip, Legend)
@@ -42,6 +43,12 @@ const progress = useAnimationProgress([
() => props.approved,
() => props.avgHours
], 1200)
const themeColors = useThemeColors()
const chartColors = computed(() => ({
primary: themeColors.value.chartPrimary,
blue: themeColors.value.chartBlue,
purple: themeColors.value.chartPurple
}))
const scaleSeries = (series, decimals = 0) =>
series.map((value) => Number((Number(value) * progress.value).toFixed(decimals)))
@@ -52,7 +59,7 @@ const chartData = computed(() => ({
{
label: '申请量（单）',
data: scaleSeries(props.applications),
backgroundColor: '#10b981',
backgroundColor: chartColors.value.primary,
borderRadius: 4,
barPercentage: 0.6,
categoryPercentage: 0.5,
@@ -61,7 +68,7 @@ const chartData = computed(() => ({
{
label: '审批完成量（单）',
data: scaleSeries(props.approved),
backgroundColor: '#3b82f6',
backgroundColor: chartColors.value.blue,
borderRadius: 4,
barPercentage: 0.6,
categoryPercentage: 0.5,
@@ -70,11 +77,11 @@ const chartData = computed(() => ({
{
label: '平均审批时长（小时）',
data: scaleSeries(props.avgHours, 1),
borderColor: '#8b5cf6',
borderColor: chartColors.value.purple,
backgroundColor: 'transparent',
borderWidth: 2,
pointBackgroundColor: '#ffffff',
pointBorderColor: '#8b5cf6',
pointBorderColor: chartColors.value.purple,
pointBorderWidth: 2,
pointRadius: 3,
pointHoverRadius: 5,