style: 全局 UI 主题皮肤重构与样式模块化
引入 Element Plus 主题定制和主题皮肤 composable,将全局 样式拆分为组件级独立 CSS 文件(侧边栏、顶栏、工作台等), 统一色彩变量和间距规范,重构所有视图和组件样式以适配新 主题系统,优化图表和知识图谱组件视觉表现,提取审计和差 旅报销相关子组件。
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user