chore: backup workspace before list detail shell refactor

2026-05-28 22:33:53 +08:00
parent e384318046
commit b383244a29
18 changed files with 4005 additions and 503 deletions
--- a/web/src/components/charts/BarChart.vue
+++ b/web/src/components/charts/BarChart.vue
@@ -23,7 +23,6 @@ import { GridComponent, TooltipComponent } from 'echarts/components'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'

-import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
 import { useEcharts } from '../../composables/useEcharts.js'
 import { resolveCssColor, useThemeColors } from '../../composables/useThemeColors.js'

@@ -34,7 +33,6 @@ const props = defineProps({
 })

 const chartElement = shallowRef(null)
-const progress = useAnimationProgress([() => props.items], 980)
 const themeColors = useThemeColors()
 const resolvedItems = computed(() => {
  const fallback = themeColors.value.chartPrimary
@@ -54,18 +52,14 @@ const ariaLabel = computed(() =>

 const chartMaxValue = computed(() => Math.max(...resolvedItems.value.map((item) => item.value), 1))
 const chartAxisMax = computed(() => Math.ceil((chartMaxValue.value * 1.1) / 10000) * 10000)
-const animatedItems = computed(() =>
-  resolvedItems.value.map((item) => ({
-    ...item,
-    animatedValue: progress.value >= 0.999
-      ? item.value
-      : Number((item.value * progress.value).toFixed(0))
-  }))
-)

 const chartOptions = computed(() => ({
  backgroundColor: 'transparent',
-  animation: false,
+  animation: true,
+  animationDuration: 1200,
+  animationDurationUpdate: 1200,
+  animationEasing: 'linear',
+  animationEasingUpdate: 'linear',
  grid: {
    top: 8,
    right: 62,
@@ -116,9 +110,9 @@ const chartOptions = computed(() => ({
  series: [
    {
      type: 'bar',
-      data: animatedItems.value.map((item) => ({
+      data: resolvedItems.value.map((item) => ({
        name: item.name || item.shortName,
-        value: item.animatedValue,
+        value: item.value,
        itemStyle: { color: item.resolvedColor }
      })),
      barWidth: 14,
@@ -133,6 +127,7 @@ const chartOptions = computed(() => ({
      label: {
        show: true,
        position: 'right',
+        valueAnimation: true,
        color: '#64748b',
        fontSize: 11,
        fontWeight: 800,
--- a/web/src/components/charts/DonutChart.vue
+++ b/web/src/components/charts/DonutChart.vue
@@ -24,7 +24,6 @@ import { TooltipComponent } from 'echarts/components'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'

-import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
 import { useEcharts } from '../../composables/useEcharts.js'
 import { resolveCssColor, useThemeColors } from '../../composables/useThemeColors.js'

@@ -37,7 +36,6 @@ const props = defineProps({
 })

 const chartElement = shallowRef(null)
-const progress = useAnimationProgress([() => props.items], 980)
 const themeColors = useThemeColors()
 const resolvedItems = computed(() => {
  const fallback = themeColors.value.chartPrimary
@@ -55,7 +53,11 @@ const ariaLabel = computed(() =>

 const chartOptions = computed(() => ({
  backgroundColor: 'transparent',
-  animation: false,
+  animation: true,
+  animationDuration: 1200,
+  animationDurationUpdate: 1200,
+  animationEasing: 'linear',
+  animationEasingUpdate: 'linear',
  tooltip: {
    trigger: 'item',
    confine: true,
@@ -78,7 +80,8 @@ const chartOptions = computed(() => ({
      radius: ['60%', '88%'],
      center: ['50%', '50%'],
      startAngle: 90,
-      endAngle: 90 - Math.max(progress.value, 0.0001) * 360,
+      animationType: 'expansion',
+      animationTypeUpdate: 'expansion',
      avoidLabelOverlap: true,
      padAngle: 1.5,
      minAngle: 2,
--- a/web/src/components/charts/GaugeChart.vue
+++ b/web/src/components/charts/GaugeChart.vue
@@ -2,10 +2,6 @@
  <div class="gauge-chart">
    <div class="gauge-body">
      <div ref="chartElement" class="gauge-canvas" role="img" :aria-label="ariaLabel"></div>
-      <div class="gauge-center">
-        <strong>{{ animatedRatio }}%</strong>
-        <span>已执行</span>
-      </div>
    </div>
    <div class="gauge-summary">
      <div>
@@ -30,7 +26,6 @@ import { GaugeChart as EChartsGaugeChart } from 'echarts/charts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'

-import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
 import { useEcharts } from '../../composables/useEcharts.js'
 import { useThemeColors } from '../../composables/useThemeColors.js'

@@ -44,15 +39,8 @@ const props = defineProps({
 })

 const chartElement = shallowRef(null)
-const progress = useAnimationProgress([() => props.ratio], 980)
 const themeColors = useThemeColors()
 const normalizedRatio = computed(() => Math.max(0, Math.min(100, Math.round(Number(props.ratio) || 0))))
-const animatedRatio = computed(() => {
-  if (progress.value >= 0.999) {
-    return normalizedRatio.value
-  }
-  return Math.round(normalizedRatio.value * progress.value)
-})
 const ariaLabel = computed(() => `预算执行率${normalizedRatio.value}%，预算总额${props.total}，已执行${props.used}，剩余${props.left}`)

 const chartOptions = computed(() => {
@@ -60,7 +48,11 @@ const chartOptions = computed(() => {

  return {
    backgroundColor: 'transparent',
-    animation: false,
+    animation: true,
+    animationDuration: 1200,
+    animationDurationUpdate: 1200,
+    animationEasing: 'linear',
+    animationEasingUpdate: 'linear',
    series: [
      {
        type: 'gauge',
@@ -90,8 +82,23 @@ const chartOptions = computed(() => {
        splitLine: { show: false },
        axisLabel: { show: false },
        anchor: { show: false },
-        detail: { show: false },
-        data: [{ value: animatedRatio.value }]
+        detail: {
+          show: true,
+          valueAnimation: true,
+          offsetCenter: [0, '22%'],
+          formatter: '{value}%',
+          color: primary,
+          fontSize: 24,
+          fontWeight: 850
+        },
+        title: {
+          show: true,
+          offsetCenter: [0, '46%'],
+          color: '#64748b',
+          fontSize: 11,
+          fontWeight: 700
+        },
+        data: [{ value: normalizedRatio.value, name: '已执行' }]
      }
    ]
  }
@@ -120,31 +127,6 @@ useEcharts(chartElement, chartOptions)
  height: 100%;
 }

-.gauge-center {
-  position: absolute;
-  bottom: 4px;
-  left: 50%;
-  transform: translateX(-50%);
-  text-align: center;
-  pointer-events: none;
-  animation: gaugeCenterIn 620ms ease both;
-  animation-delay: 360ms;
-}
-
-.gauge-center strong {
-  color: var(--chart-primary);
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.gauge-center span {
-  display: block;
-  margin-top: 4px;
-  color: #64748b;
-  font-size: 11px;
-}
-
 .gauge-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -168,17 +150,6 @@ useEcharts(chartElement, chartOptions)
  font-weight: 500;
 }

-@keyframes gaugeCenterIn {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
@keyframes gaugeSummaryIn {
  from {
    opacity: 0;
@@ -191,7 +162,6 @@ useEcharts(chartElement, chartOptions)
 }

@media (prefers-reduced-motion: reduce) {
-  .gauge-center,
  .gauge-summary {
    animation: none;
  }
--- a/web/src/components/charts/TrendChart.vue
+++ b/web/src/components/charts/TrendChart.vue
@@ -16,7 +16,6 @@ import { GridComponent, TooltipComponent } from 'echarts/components'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'

-import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
 import { useEcharts } from '../../composables/useEcharts.js'
 import { useThemeColors } from '../../composables/useThemeColors.js'

@@ -30,12 +29,6 @@ const props = defineProps({
 })

 const chartElement = shallowRef(null)
-const progress = useAnimationProgress([
-  () => props.labels,
-  () => props.applications,
-  () => props.approved,
-  () => props.avgHours
-], 1100)
 const themeColors = useThemeColors()
 const chartColors = computed(() => ({
  primary: themeColors.value.chartPrimary,
@@ -49,18 +42,13 @@ const ariaLabel = computed(() =>
  )).join('；')
 )

-const scaleSeries = (series, decimals = 0) =>
-  series.map((value) => {
-    const number = Number(value || 0)
-    if (progress.value >= 0.999) {
-      return number
-    }
-    return Number((number * progress.value).toFixed(decimals))
-  })
-
 const chartOptions = computed(() => ({
  backgroundColor: 'transparent',
-  animation: false,
+  animation: true,
+  animationDuration: 1200,
+  animationDurationUpdate: 1200,
+  animationEasing: 'linear',
+  animationEasingUpdate: 'linear',
  grid: {
    top: 18,
    right: 38,
@@ -125,7 +113,7 @@ const chartOptions = computed(() => ({
    {
      name: '申请量（单）',
      type: 'bar',
-      data: scaleSeries(props.applications),
+      data: props.applications,
      barWidth: 12,
      barGap: '28%',
      itemStyle: {
@@ -136,7 +124,7 @@ const chartOptions = computed(() => ({
    {
      name: '审批完成量（单）',
      type: 'bar',
-      data: scaleSeries(props.approved),
+      data: props.approved,
      barWidth: 12,
      itemStyle: {
        color: chartColors.value.blue,
@@ -147,7 +135,7 @@ const chartOptions = computed(() => ({
      name: '平均审批时长（小时）',
      type: 'line',
      yAxisIndex: 1,
-      data: scaleSeries(props.avgHours, 1),
+      data: props.avgHours,
      smooth: true,
      symbol: 'circle',
      symbolSize: 7,