refactor: split project into web and server directories

- Move frontend to web/ directory
- Add server/ directory for backend
- Restructure project for前后端分离架构

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/src/composables/useOverviewView.js

@@ -0,0 +1,113 @@
+import { computed, ref } from 'vue'
+
+import {
+  metricBlueprints,
+  trendRanges,
+  trendSeries,
+  spendByCategory,
+  exceptionMix,
+  departmentRangeOptions,
+  bottlenecks,
+  budgetSummary
+} from '../data/metrics.js'
+
+export function useOverviewView() {
+  const activeTrendRange = ref(trendRanges[0])
+  const activeDepartmentRange = ref(departmentRangeOptions[0])
+
+  const demoTotals = {
+    pendingCount: 128,
+    pendingAmount: 361600,
+    avgSla: 6.8,
+    autoPassRate: 78,
+    riskCount: 14,
+    slaRate: 96
+  }
+
+  const demoDepartments = [
+    { name: '销售部', amount: 182000, color: '#10b981' },
+    { name: '研发中心', amount: 146000, color: '#3b82f6' },
+    { name: '市场部', amount: 96000, color: '#f59e0b' },
+    { name: '运营部', amount: 68600, color: '#8b5cf6' },
+    { name: '行政部', amount: 48300, color: '#3b82f6' }
+  ]
+
+  const formatCompact = (value) => {
+    if (value >= 1_000_000) return `¥${(value / 1_000_000).toFixed(1)}M`
+    if (value >= 1_000) return `¥${(value / 1_000).toFixed(1)}K`
+    return `¥${value}`
+  }
+
+  const formatCurrency = (value) => formatCompact(value)
+
+  const formatMetricValue = (metric, value) => {
+    if (metric.key === 'pendingAmount') return formatCurrency(Math.round(value))
+    if (metric.key === 'avgSla') return `${value.toFixed(1)} ${metric.unit}`
+    if (metric.unit === '%') return `${Math.round(value)} ${metric.unit}`
+    if (metric.unit) return `${Math.round(value)} ${metric.unit}`
+    return `${Math.round(value)}`
+  }
+
+  const kpiMetrics = computed(() => metricBlueprints.map((metric, index) => {
+    const rawValue = demoTotals[metric.key]
+    const displayValue = formatMetricValue(metric, rawValue)
+
+    return {
+      ...metric,
+      displayValue,
+      changeText: metric.change,
+      delay: index * 55
+    }
+  }))
+
+  const activeTrend = computed(() => trendSeries[activeTrendRange.value])
+  const spendTotal = computed(() => spendByCategory.reduce((sum, item) => sum + item.value, 0))
+  const riskTotal = computed(() => exceptionMix.reduce((sum, item) => sum + item.value, 0))
+
+  const spendLegend = computed(() => spendByCategory.map((item) => ({
+    ...item,
+    display: `${Math.round((item.value / spendTotal.value) * 100)}%`
+  })))
+
+  const riskLegend = computed(() => exceptionMix.map((item) => ({
+    ...item,
+    display: `${item.value} 单`
+  })))
+
+  const rankedDepartments = computed(() => {
+    const rows = demoDepartments
+    const max = Math.max(...rows.map((item) => item.amount), 1)
+
+    return rows.slice(0, 5).map((item, index) => ({
+      ...item,
+      rank: index + 1,
+      shortName: item.name,
+      amountLabel: formatCurrency(item.amount),
+      width: `${Math.max((item.amount / max) * 100, 18)}%`,
+      color: item.color
+    }))
+  })
+
+  return {
+    activeDepartmentRange,
+    activeTrend,
+    activeTrendRange,
+    bottlenecks,
+    budgetSummary,
+    departmentRangeOptions,
+    exceptionMix,
+    formatCompact,
+    formatCurrency,
+    formatMetricValue,
+    kpiMetrics,
+    metricBlueprints,
+    rankedDepartments,
+    riskLegend,
+    riskTotal,
+    spendByCategory,
+    spendLegend,
+    spendTotal,
+    trendRanges,
+    trendSeries
+  }
+}