diff --git a/package-lock.json b/package-lock.json
index 66382a4..53a4f62 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@vueuse/core": "^10.4.1",
         "axios": "^1.5.0",
         "echarts": "^5.4.3",
+        "echarts-gl": "^2.1.0",
         "lunar-javascript": "^1.7.3",
         "vue": "^3.3.4",
         "vue-router": "^4.5.1"
@@ -968,6 +969,11 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1027,6 +1033,19 @@
         "zrender": "5.6.1"
       }
     },
+    "node_modules/echarts-gl": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.1.0.tgz",
+      "integrity": "sha512-GxzAPTYJyOANbu7InkdGV7QLLpVyuQWNvN1yyEEIiqgM11ilAO2OkvPNgRdf854R9ZPt/C1HAgjO8Udrj61lOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1 || ^6.0.0"
+      },
+      "peerDependencies": {
+        "echarts": "^5.1.2 || ^6.0.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -2104,6 +2123,11 @@
         "readdirp": "^4.0.1"
       }
     },
+    "claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2148,6 +2172,15 @@
         "zrender": "5.6.1"
       }
     },
+    "echarts-gl": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.1.0.tgz",
+      "integrity": "sha512-GxzAPTYJyOANbu7InkdGV7QLLpVyuQWNvN1yyEEIiqgM11ilAO2OkvPNgRdf854R9ZPt/C1HAgjO8Udrj61lOQ==",
+      "requires": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1 || ^6.0.0"
+      }
+    },
     "entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
diff --git a/package.json b/package.json
index ad550ab..260ce0a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@vueuse/core": "^10.4.1",
     "axios": "^1.5.0",
     "echarts": "^5.4.3",
+    "echarts-gl": "^2.1.0",
     "lunar-javascript": "^1.7.3",
     "vue": "^3.3.4",
     "vue-router": "^4.5.1"
diff --git a/public/images/下部.png b/public/images/下部.png
new file mode 100644
index 0000000..0913e08
Binary files /dev/null and b/public/images/下部.png differ
diff --git a/public/images/世界地图背景.png b/public/images/世界地图背景.png
new file mode 100644
index 0000000..e389028
Binary files /dev/null and b/public/images/世界地图背景.png differ
diff --git a/public/images/供应商数量.png b/public/images/供应商数量.png
new file mode 100644
index 0000000..9c2c57e
Binary files /dev/null and b/public/images/供应商数量.png differ
diff --git a/public/images/剩余车位.png b/public/images/剩余车位.png
new file mode 100644
index 0000000..748236f
Binary files /dev/null and b/public/images/剩余车位.png differ
diff --git a/public/images/右边bg.png b/public/images/右边bg.png
new file mode 100644
index 0000000..0a571d5
Binary files /dev/null and b/public/images/右边bg.png differ
diff --git a/public/images/右部.png b/public/images/右部.png
new file mode 100644
index 0000000..a72ae14
Binary files /dev/null and b/public/images/右部.png differ
diff --git a/public/images/实时信息背景.png b/public/images/实时信息背景.png
new file mode 100644
index 0000000..1f13f86
Binary files /dev/null and b/public/images/实时信息背景.png differ
diff --git a/public/images/小标题背景.png b/public/images/小标题背景.png
new file mode 100644
index 0000000..c341ec4
Binary files /dev/null and b/public/images/小标题背景.png differ
diff --git a/public/images/左边bg.png b/public/images/左边bg.png
new file mode 100644
index 0000000..cc9328f
Binary files /dev/null and b/public/images/左边bg.png differ
diff --git a/public/images/左部.png b/public/images/左部.png
new file mode 100644
index 0000000..3254969
Binary files /dev/null and b/public/images/左部.png differ
diff --git a/public/images/底座.png b/public/images/底座.png
new file mode 100644
index 0000000..0709625
Binary files /dev/null and b/public/images/底座.png differ
diff --git a/public/images/数据底板.png b/public/images/数据底板.png
new file mode 100644
index 0000000..0394695
Binary files /dev/null and b/public/images/数据底板.png differ
diff --git a/public/images/日期指标.png b/public/images/日期指标.png
new file mode 100644
index 0000000..abfdfc5
Binary files /dev/null and b/public/images/日期指标.png differ
diff --git a/public/images/日期指标选中.png b/public/images/日期指标选中.png
new file mode 100644
index 0000000..9a2a6c8
Binary files /dev/null and b/public/images/日期指标选中.png differ
diff --git a/public/images/标题.png b/public/images/标题.png
new file mode 100644
index 0000000..935fbc1
Binary files /dev/null and b/public/images/标题.png differ
diff --git a/public/images/标题背景.png b/public/images/标题背景.png
new file mode 100644
index 0000000..a910f5f
Binary files /dev/null and b/public/images/标题背景.png differ
diff --git a/public/images/牦牛.png b/public/images/牦牛.png
new file mode 100644
index 0000000..b7ef15a
Binary files /dev/null and b/public/images/牦牛.png differ
diff --git a/public/images/进场车辆.png b/public/images/进场车辆.png
new file mode 100644
index 0000000..615c80f
Binary files /dev/null and b/public/images/进场车辆.png differ
diff --git a/src/App.vue b/src/App.vue
index c58a2c2..6fe5ec7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,9 @@
 <template>
   <div class="dashboard-container">
-    <!-- 标题区域 -->
-    <div class="header-section">
-      <div class="header-info left">
-        <!-- <div class="info-item">
-          <span class="status-indicator" :class="isLayoutReady ? 'online' : 'loading'"></span>
-          <span>{{ isLayoutReady ? '系统运行正常' : '系统初始化中' }}</span>
-        </div> -->
-      </div>
-      <h1 class="main-title">{{ config?.screen?.title || '智慧活畜交易大数据中心' }}</h1>
-      <div class="header-info right">
-        <div class="info-item">
-          <span class="current-time">{{ currentTime || '--:--:--' }}</span>
-        </div>
-      </div>
-    </div>
+    <HeaderBar
+      :title="systemConfig.title"
+      :title-background="systemConfig.titleBackground"
+    />
 
     <!-- 主要内容区域 -->
     <div v-if="isLayoutReady" class="main-content">
@@ -101,10 +90,10 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import { configManager } from './utils/config.js'
+import { loadSystemConfig } from './utils/systemConfig.js'
 import { dataManager } from './utils/dataManager.js'
-import { dataUpdater } from './utils/dataUpdater.js'
 
 // 导入组件
 import RealTimeStats from './components/RealTimeStats.vue'
@@ -120,40 +109,26 @@ import PurchaserAnalysis from './components/PurchaserAnalysis.vue'
 import MarketEnvironmentMonitor from './components/MarketEnvironmentMonitor.vue'
 import MarketRealtimeMonitor from './components/MarketRealtimeMonitor.vue'
 import SupplyDemandData from './components/SupplyDemandData.vue'
+import HeaderBar from './components/HeaderBar.vue'
 
 // 响应式数据
 const config = ref(null)
-const currentTime = ref('')
+const systemConfig = ref({
+  title: '/标题.png',
+  titleBackground: '/images/标题背景.png'
+})
 const isLayoutReady = ref(false) // 控制页面渲染时机
 const isSupplyExpanded = ref(false) // 控制供应信息组件是否展开
 
-// 更新时间
-const updateTime = () => {
-  const now = new Date()
-  currentTime.value = now.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  })
-}
-
 // 处理供应信息组件展开/收缩
 const handleSupplyExpand = (expanded) => {
   isSupplyExpanded.value = expanded
 }
 
-// 初始化配置和时间
-let timeTimer = null
-
 onMounted(async () => {
-  // 立即开始更新时间
-  updateTime()
-  timeTimer = setInterval(updateTime, 1000)
-
   try {
+    systemConfig.value = await loadSystemConfig()
+
     // 加载配置
     console.log('App.vue: 开始加载配置')
     config.value = await configManager.loadConfig()
@@ -182,6 +157,7 @@ onMounted(async () => {
     console.log('Dashboard 完全初始化完成')
   } catch (error) {
     console.error('Failed to initialize dashboard:', error)
+    systemConfig.value = await loadSystemConfig()
     // 使用默认配置
     config.value = configManager.getDefaultConfig()
     configManager.setCSSVariables()
@@ -192,79 +168,9 @@ onMounted(async () => {
     isLayoutReady.value = true
   }
 })
-
-onUnmounted(() => {
-  if (timeTimer) {
-    clearInterval(timeTimer)
-  }
-})
 </script>
 
 <style scoped>
-/* 标题区域 */
-.header-section {
-  height: 84px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 40px;
-  background: url('./images/大标题背景.png') center/contain no-repeat;
-  background-size: auto 84px;
-  border-radius: 12px;
-  backdrop-filter: blur(10px);
-  position: relative;
-  z-index: 10;
-  flex-shrink: 0;
-  background-size: 100% 84px;
-}
-
-.main-title {
-  font-size: 36px;
-  font-weight: 700;
-  background: linear-gradient(180deg, #fff 50%, #44c1ff);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  text-align: center;
-  letter-spacing: 3px;
-  text-shadow: 0 0 20px rgba(64, 158, 255, 0.5);
-  flex: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 15px;
-
-}
-
-.header-info {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  flex: 1;
-
-  &.left {
-    justify-content: flex-start;
-  }
-
-  &.right {
-    justify-content: flex-end;
-  }
-}
-
-.info-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: #a0a8b8;
-}
-
-.current-time {
-  font-family: 'Courier New', monospace;
-  font-weight: bold;
-  color: #409EFF;
-}
-
 /* 主要内容区域 */
 .main-content {
   flex: 1;
diff --git a/src/components/BaseCard.vue b/src/components/BaseCard.vue
index c7b9dd6..9766bce 100644
--- a/src/components/BaseCard.vue
+++ b/src/components/BaseCard.vue
@@ -1,7 +1,20 @@
 <template>
   <div class="chart-card">
-    <div class="card-title">{{ title }}</div>
-    <div class="card-content">
+    <div v-if="title || $slots.headerExtra" class="card-header">
+      <div class="card-title-bar">
+        <img
+          class="card-title-bg"
+          src="/images/小标题背景.png"
+          alt=""
+        />
+        <h3 v-if="title" class="card-title">{{ title }}</h3>
+        <div v-if="$slots.headerExtra" class="card-title-extra">
+          <slot name="headerExtra"></slot>
+        </div>
+      </div>
+    </div>
+
+    <div class="card-content" :class="{ 'no-header': !title && !$slots.headerExtra }">
       <slot></slot>
     </div>
   </div>
@@ -11,86 +24,92 @@
 defineProps({
   title: {
     type: String,
-    required: true
+    default: ''
   }
 })
 </script>
 
 <style scoped>
 .chart-card {
-  background: rgba(15, 25, 45, 0.3);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-  border-radius: 12px;
-  padding: 18px;
-  margin: 6px;
-  height: calc(100% - 12px);
+  position: relative;
+  height: 100%;
   display: flex;
   flex-direction: column;
+  background: transparent;
+  overflow: visible;
+  box-sizing: border-box;
+}
+
+.card-header {
+  flex-shrink: 0;
   position: relative;
-  overflow: hidden;
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.3),
-    0 4px 16px rgba(64, 158, 255, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 2;
+  padding: 4px 8px 8px 0;
+  overflow: visible;
 }
 
-.chart-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent 0%, rgba(64, 158, 255, 0.5) 50%, transparent 100%);
-  opacity: 0.8;
+.card-title-bar {
+  position: relative;
+  width: 100%;
+  height: 30px;
+  overflow: visible;
 }
 
-.chart-card::after {
-  content: '';
+.card-title-bg {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%, rgba(64, 158, 255, 0.03) 100%);
+  inset: 0;
+  width: 100%;
+  height: 30px;
+  object-fit: fill;
   pointer-events: none;
-  opacity: 0.6;
+  user-select: none;
 }
 
 .card-title {
-  font-size: 18px;
+  position: absolute;
+  left: 0;
+  top: -11px;
+  z-index: 1;
+  display: block;
+  width: auto;
+  max-width: calc(100% - 250px);
+  margin: 0;
+  padding: 0 0 0 47px;
+  box-sizing: border-box;
+  font-family: 'Microsoft YaHei', sans-serif;
+  font-size: 22px;
   font-weight: 700;
-  background: linear-gradient(135deg, #409EFF 0%, #67C23A 50%, #E6A23C 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 12px;
-  text-align: left;
-  position: relative;
+  color: #ffffff;
+  letter-spacing: 1px;
+  height: 32px;
+  line-height: 32px;
+  text-shadow: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-title-extra {
+  position: absolute;
+  right: 6px;
+  bottom: 0;
   z-index: 2;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: flex-end;
+  overflow: visible;
 }
 
 .card-content {
   flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
+  padding: 2px 8px 8px;
   position: relative;
   z-index: 2;
 }
 
-.chart-card:hover {
-  transform: translateY(-2px) scale(1.02);
-  box-shadow: 
-    0 12px 48px rgba(0, 0, 0, 0.4),
-    0 8px 24px rgba(64, 158, 255, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.15);
-  background: rgba(15, 25, 45, 0.4);
-}
-
-.chart-card:hover::after {
-  opacity: 0.8;
+.card-content.no-header {
+  padding-top: 12px;
 }
-</style> 
\ No newline at end of file
+</style>
diff --git a/src/components/ComprehensiveSalesStats.vue b/src/components/ComprehensiveSalesStats.vue
index 68e8bf7..67e2b92 100644
--- a/src/components/ComprehensiveSalesStats.vue
+++ b/src/components/ComprehensiveSalesStats.vue
@@ -1,25 +1,35 @@
 <template>
   <BaseCard title="综合销售统计">
     <div class="stats-container">
-      <!-- 切换标签 -->
       <div class="tab-container">
-        <div 
-          v-for="(tab, index) in tabs" 
+        <button
+          v-for="tab in tabs"
           :key="tab.key"
+          type="button"
           class="tab-item"
           :class="{ active: activeTab === tab.key }"
           @click="switchTab(tab.key)"
         >
           {{ tab.name }}
-        </div>
+        </button>
       </div>
-      
-      <!-- 图表区域 -->
+
       <div class="chart-container">
         <div ref="chartRef" class="chart"></div>
       </div>
-      
 
+      <div v-if="legendItems.length" class="legend-panel">
+        <div
+          v-for="item in legendItems"
+          :key="item.name"
+          class="legend-item"
+        >
+          <span class="legend-dot" :style="{ background: item.color }"></span>
+          <span class="legend-name">{{ item.name }}:</span>
+          <span class="legend-percent">{{ formatPercent(item.percent) }}%</span>
+          <span class="legend-value">{{ item.value }}头</span>
+        </div>
+      </div>
     </div>
   </BaseCard>
 </template>
@@ -27,195 +37,120 @@
 <script setup>
 import { ref, onMounted, onUnmounted, reactive, computed, watch } from 'vue'
 import * as echarts from 'echarts'
+import 'echarts-gl'
 import BaseCard from './BaseCard.vue'
-import { dataManager } from '../utils/dataManager.js'
+import { buildPie3DOption, buildEmptyPie3DPlaceholder, enrichPieData } from '../utils/pie3d.js'
 
 const chartRef = ref(null)
 let chartInstance = null
 
-// 当前激活的标签
-const activeTab = ref('localCountySales')
+const API_URL = '/api/dashboard/comprehensive-sales-stats'
+const COLORS = ['#26c6c6', '#1e4bb8', '#85c7e9', '#f29f20', '#f26522', '#4dd9ff']
+
+const CHART_VIEW = {
+  internalDiameterRatio: 0.58,
+  boxHeight: 40,
+  viewAlpha: 28,
+  viewBeta: 48,
+  viewDistance: 185
+}
+
+const activeTab = ref('monthlySales')
 
-// 标签配置
 const tabs = [
-  { key: 'localCountySales', name: '本县销售统计' },
+  { key: 'monthlySales', name: '本月销售统计' },
   { key: 'overallSalesDistribution', name: '总体销售分布' },
   { key: 'purchaseRegionDistribution', name: '采购地区分布' }
 ]
 
-// 响应式数据
 const statsData = reactive({
-  localCountySales: [],
+  monthlySales: [],
   overallSalesDistribution: [],
   purchaseRegionDistribution: []
 })
 
-// 颜色配置
-const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#8B5CF6']
+const currentRawData = computed(() => statsData[activeTab.value] || [])
 
-// 当前图表数据
-const currentChartData = computed(() => {
-  return statsData[activeTab.value] || []
+const legendItems = computed(() => {
+  return enrichPieData(currentRawData.value, COLORS).filter((item) => item.value > 0)
 })
 
-
-
-// 切换标签
 const switchTab = (tabKey) => {
   activeTab.value = tabKey
 }
 
-// 加载数据
-const loadData = async () => {
-  try {
-    await dataManager.loadData()
-    const data = dataManager.getData('comprehensiveSalesStats')
-    if (data) {
-      Object.assign(statsData, data)
-      console.log('综合销售统计数据加载成功:', data)
-    } else {
-      console.warn('未找到综合销售统计数据')
-      // 使用默认数据
-      loadDefaultData()
-    }
-  } catch (error) {
-    console.error('加载综合销售统计数据失败:', error)
-    loadDefaultData()
-  }
-}
-
-// 加载默认数据
-const loadDefaultData = () => {
-  statsData.localCountySales = [
-    { name: 'A县', value: 1240 },
-    { name: 'B县', value: 890 },
-    { name: 'C县', value: 560 },
-    { name: 'D县', value: 450 }
-  ]
-  statsData.overallSalesDistribution = [
-    { name: 'A市', value: 2340 },
-    { name: 'B市', value: 1890 },
-    { name: 'C市', value: 1456 },
-    { name: 'D市', value: 1234 }
-  ]
-  statsData.purchaseRegionDistribution = [
-    { name: 'A省', value: 1560 },
-    { name: 'B省', value: 1230 },
-    { name: 'C省', value: 980 },
-    { name: 'D省', value: 750 }
-  ]
+const formatPercent = (value) => {
+  return Number(value || 0).toFixed(2)
 }
 
-// 初始化图表
-const initChart = () => {
-  if (!chartRef.value) return
+const buildFullOption = (data) => {
+  const pieData = enrichPieData(
+    data.map((item) => ({
+      name: item.name,
+      value: item.value
+    })),
+    COLORS
+  ).filter((item) => item.value > 0)
+
+  if (!pieData.length) {
+    return buildEmptyPie3DPlaceholder(COLORS, CHART_VIEW)
+  }
 
-  chartInstance = echarts.init(chartRef.value)
-  updateChart()
+  return buildPie3DOption({
+    pieData,
+    ...CHART_VIEW
+  })
 }
 
-// 更新图表
 const updateChart = () => {
   if (!chartInstance) return
+  chartInstance.clear()
+  chartInstance.setOption(buildFullOption(currentRawData.value), true)
+  chartInstance.resize()
+}
+
+const loadData = async () => {
+  try {
+    const response = await fetch(API_URL)
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
+    }
 
-  const data = currentChartData.value.map((item, index) => ({
-    name: item.name,
-    value: item.value,
-    itemStyle: {
-      color: colors[index % colors.length],
-      borderRadius: 4,
-      borderColor: '#1a1f2e',
-      borderWidth: 2
+    const result = await response.json()
+    if (result.code !== 1 || !result.data) {
+      throw new Error(result.message || '接口返回异常')
     }
-  }))
-
-  const option = {
-    tooltip: {
-      trigger: 'item',
-      backgroundColor: 'rgba(0, 0, 0, 0.8)',
-      borderColor: '#409EFF',
-      textStyle: {
-        color: '#fff',
-        fontSize: 12
-      },
-      formatter: '{b}: {c}头 ({d}%)'
-    },
-    legend: {
-      orient: 'horizontal',
-      bottom: '5%',
-      left: 'center',
-      itemGap: 15,
-      textStyle: {
-        color: '#a0a8b8',
-        fontSize: 12
-      },
-      itemWidth: 12,
-      itemHeight: 12,
-      formatter: function(name) {
-        const item = currentChartData.value.find(d => d.name === name);
-        return `${name}: ${item ? item.value : 0}头`;
-      }
-    },
-    series: [{
-      name: tabs.find(t => t.key === activeTab.value)?.name || '销售统计',
-      type: 'pie',
-      radius: ['35%', '60%'],
-      center: ['50%', '40%'],
-      data: data,
-      emphasis: {
-        itemStyle: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: 'rgba(0, 0, 0, 0.5)'
-        }
-      },
-      labelLine: {
-        show: false
-      },
-      label: {
-        show: true,
-        position: 'inside',
-        formatter: '{d}%',
-        fontSize: 13,
-        color: '#fff',
-        fontWeight: 'bold'
-      },
-      animationType: 'scale',
-      animationEasing: 'elasticOut',
-      animationDelay: function (idx) {
-        return Math.random() * 200;
-      }
-    }]
+
+    statsData.monthlySales = result.data.monthlySales || []
+    statsData.overallSalesDistribution = result.data.overallSalesDistribution || []
+    statsData.purchaseRegionDistribution = result.data.purchaseRegionDistribution || []
+    updateChart()
+  } catch (error) {
+    console.error('加载综合销售统计数据失败:', error)
   }
+}
 
-  chartInstance.setOption(option, true)
+const handleResize = () => {
+  chartInstance?.resize()
 }
 
-// 监听activeTab变化
 watch(activeTab, () => {
   updateChart()
 })
 
 onMounted(async () => {
+  if (chartRef.value) {
+    chartInstance = echarts.init(chartRef.value)
+  }
   await loadData()
-  initChart()
-  
-  window.addEventListener('resize', () => {
-    chartInstance?.resize()
-  })
-  
-  // 监听数据重新加载事件
-  window.addEventListener('dataReloaded', async () => {
-    console.log('收到数据重新加载事件，重新加载综合销售统计数据')
-    await loadData()
-    updateChart()
-  })
+  window.addEventListener('resize', handleResize)
+  window.addEventListener('dataReloaded', loadData)
 })
 
 onUnmounted(() => {
-  if (chartInstance) {
-    chartInstance.dispose()
-  }
+  window.removeEventListener('resize', handleResize)
+  window.removeEventListener('dataReloaded', loadData)
+  chartInstance?.dispose()
 })
 </script>
 
@@ -224,42 +159,47 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
 }
 
 .tab-container {
   display: flex;
-  margin-bottom: 12px;
-  background: rgba(26, 31, 46, 0.5);
-  border-radius: 6px;
-  padding: 2px;
+  gap: 8px;
+  margin-bottom: 8px;
+  flex-shrink: 0;
 }
 
 .tab-item {
   flex: 1;
-  text-align: center;
-  padding: 6px 8px;
+  height: 32px;
+  padding: 0 6px;
+  border: 1px solid rgba(45, 189, 255, 0.35);
+  background: rgba(8, 36, 72, 0.75);
+  color: #d8ecff;
+  font-family: 'Microsoft YaHei', sans-serif;
   font-size: 13px;
-  color: #a0a8b8;
+  font-weight: 400;
   cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.3s ease;
-  user-select: none;
+  transition: all 0.25s ease;
 }
 
 .tab-item:hover {
-  color: #409EFF;
-  background: rgba(64, 158, 255, 0.1);
+  border-color: rgba(255, 200, 100, 0.55);
+  color: #fff0c8;
 }
 
 .tab-item.active {
-  color: #ffffff;
-  background: #409EFF;
-  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+  border-color: rgba(255, 190, 80, 0.85);
+  background: linear-gradient(180deg, rgba(120, 72, 18, 0.95) 0%, rgba(78, 46, 10, 0.95) 100%);
+  color: #fff0c8;
+  font-weight: 700;
+  box-shadow: 0 0 12px rgba(255, 170, 60, 0.25);
 }
 
 .chart-container {
+  position: relative;
   flex: 1;
-  min-height: 140px;
+  min-height: 200px;
 }
 
 .chart {
@@ -267,5 +207,42 @@ onUnmounted(() => {
   height: 100%;
 }
 
+.legend-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 18px;
+  justify-content: center;
+  padding: 6px 4px 2px;
+  flex-shrink: 0;
+}
 
-</style> 
\ No newline at end of file
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-family: 'Microsoft YaHei', sans-serif;
+  font-size: 14px;
+  color: #d8ecff;
+  white-space: nowrap;
+}
+
+.legend-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.legend-name {
+  color: #ffffff;
+}
+
+.legend-percent {
+  color: #8ecfff;
+  font-weight: 700;
+}
+
+.legend-value {
+  color: #ffffff;
+}
+</style>
diff --git a/src/components/DateIndicatorTabs.vue b/src/components/DateIndicatorTabs.vue
new file mode 100644
index 0000000..3d3981c
--- /dev/null
+++ b/src/components/DateIndicatorTabs.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="date-indicator-tabs">
+    <button
+      v-for="item in items"
+      :key="item.key"
+      type="button"
+      class="date-indicator-tab"
+      :class="{ active: modelValue === item.key }"
+      @click="$emit('update:modelValue', item.key)"
+    >
+      <span class="tab-text">{{ item.label }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  },
+  items: {
+    type: Array,
+    required: true
+  }
+})
+
+defineEmits(['update:modelValue'])
+</script>
+
+<style scoped>
+.date-indicator-tabs {
+  display: flex;
+  align-items: flex-end;
+  gap: 0;
+}
+
+.date-indicator-tab {
+  position: relative;
+  width: 78px;
+  height: 31px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  overflow: visible;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.date-indicator-tab::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 78px;
+  height: 31px;
+  background: url('/images/日期指标.png') center / 100% 100% no-repeat;
+  pointer-events: none;
+}
+
+.date-indicator-tab.active::before {
+  background-image: url('/images/日期指标选中.png');
+}
+
+.tab-text {
+  position: absolute;
+  left: 50%;
+  top: -3px;
+  transform: translateX(-50%);
+  font-family: 'Microsoft YaHei', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1;
+  color: #ffffff;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.date-indicator-tab.active .tab-text {
+  font-size: 17px;
+  font-weight: 700;
+  color: #fff0c8;
+  text-shadow: 0 0 8px rgba(255, 200, 80, 0.55);
+}
+
+.date-indicator-tab:hover::before {
+  filter: brightness(1.06);
+}
+</style>
diff --git a/src/components/ExchangeMonitor.vue b/src/components/ExchangeMonitor.vue
index 2a92c1e..508ede8 100644
--- a/src/components/ExchangeMonitor.vue
+++ b/src/components/ExchangeMonitor.vue
@@ -1,11 +1,22 @@
 <template>
   <BaseCard title="交易中心实时服务信息">
     <div class="service-grid">
-      <div v-for="item in serviceData" :key="item.id" class="service-item">
+      <div
+        v-for="item in serviceData"
+        :key="item.key"
+        class="service-item"
+      >
+        <img
+          class="service-item-bg"
+          src="/images/实时信息背景.png"
+          alt=""
+        />
         <div class="service-left">
-          <div class="service-icon">
-            {{ item.icon }}
-          </div>
+          <img
+            class="service-icon"
+            :src="item.icon"
+            :alt="item.label"
+          />
           <div class="service-info">
             <div class="service-label">{{ item.label }}</div>
             <div class="service-status" :class="item.statusClass">
@@ -13,8 +24,8 @@
             </div>
           </div>
         </div>
-        <div class="service-value" :class="item.valueClass">
-          {{ item.value }}
+        <div class="service-value-wrap" :class="item.valueClass">
+          <span class="service-value">{{ formatNumber(item.value) }}</span>
           <span class="service-unit">{{ item.unit }}</span>
         </div>
       </div>
@@ -26,120 +37,169 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import BaseCard from './BaseCard.vue'
 
+const API_URL = '/api/dashboard/exchange-service-info'
+
 const serviceData = ref([
   {
-    id: 1,
+    key: 'totalSupply',
     label: '牦牛供应总量',
-    value: 2850,
+    value: 0,
     unit: '头',
-    icon: '🐄',
-    valueClass: 'total',
-    status: '充足',
-    statusClass: 'abundant'
+    icon: '/images/牦牛.png',
+    valueClass: 'value-green',
+    status: '--',
+    statusClass: 'normal'
   },
   {
-    id: 2,
+    key: 'soldYaks',
     label: '已售牦牛',
-    value: 1680,
+    value: 0,
     unit: '头',
-    icon: '✅',
-    valueClass: 'sold',
-    status: '正常',
+    icon: '/images/牦牛.png',
+    valueClass: 'value-cyan',
+    status: '--',
     statusClass: 'normal'
   },
   {
-    id: 3,
+    key: 'forSaleYaks',
     label: '待售牦牛',
-    value: 1170,
+    value: 0,
     unit: '头',
-    icon: '⏳',
-    valueClass: 'pending',
-    status: '充足',
-    statusClass: 'abundant'
+    icon: '/images/牦牛.png',
+    valueClass: 'value-green',
+    status: '--',
+    statusClass: 'normal'
   },
   {
-    id: 4,
+    key: 'enteringVehicles',
     label: '进场车辆',
-    value: 89,
+    value: 0,
     unit: '辆',
-    icon: '🚛',
-    valueClass: 'vehicles',
-    status: '正常',
+    icon: '/images/进场车辆.png',
+    valueClass: 'value-cyan',
+    status: '--',
     statusClass: 'normal'
   },
   {
-    id: 5,
+    key: 'remainingParking',
     label: '剩余车位',
-    value: 26,
+    value: 0,
     unit: '个',
-    icon: '🅿️',
-    valueClass: 'parking',
-    status: '紧张',
-    statusClass: 'tight'
+    icon: '/images/剩余车位.png',
+    valueClass: 'value-red',
+    status: '--',
+    statusClass: 'normal'
   },
   {
-    id: 6,
+    key: 'supplierCount',
     label: '供应商数量',
-    value: 156,
+    value: 0,
     unit: '家',
-    icon: '🏢',
-    valueClass: 'suppliers',
-    status: '活跃',
-    statusClass: 'active'
+    icon: '/images/供应商数量.png',
+    valueClass: 'value-blue',
+    status: '--',
+    statusClass: 'normal'
   }
 ])
 
-// 模拟实时数据更新
-let updateTimer = null
-
-const updateData = () => {
-  serviceData.value.forEach((item, index) => {
-    // 根据不同指标模拟数据变化
-    switch (item.id) {
-      case 1: // 牦牛供应总量
-        const supplyChange = Math.floor((Math.random() - 0.5) * 100)
-        item.value = Math.floor(Math.max(2500, Math.min(3200, item.value + supplyChange)))
-        item.status = item.value > 2800 ? '充足' : item.value > 2600 ? '正常' : '紧张'
-        item.statusClass = item.value > 2800 ? 'abundant' : item.value > 2600 ? 'normal' : 'tight'
-        break
-      case 2: // 已售牦牛
-        const soldChange = Math.floor(Math.random() * 50)
-        const maxSold = Math.floor(serviceData.value[0].value * 0.8)
-        item.value = Math.floor(Math.min(item.value + soldChange, maxSold))
-        break
-      case 3: // 待售牦牛
-        item.value = Math.floor(serviceData.value[0].value - serviceData.value[1].value)
-        item.status = item.value > 1000 ? '充足' : item.value > 500 ? '正常' : '紧张'
-        item.statusClass = item.value > 1000 ? 'abundant' : item.value > 500 ? 'normal' : 'tight'
-        break
-      case 4: // 进场车辆
-        const vehicleChange = Math.floor((Math.random() - 0.5) * 10)
-        item.value = Math.floor(Math.max(60, Math.min(120, item.value + vehicleChange)))
-        break
-      case 5: // 剩余车位
-        const parkingChange = Math.floor((Math.random() - 0.5) * 8)
-        item.value = Math.floor(Math.max(5, Math.min(50, item.value + parkingChange)))
-        item.status = item.value > 30 ? '充足' : item.value > 15 ? '正常' : '紧张'
-        item.statusClass = item.value > 30 ? 'abundant' : item.value > 15 ? 'normal' : 'tight'
-        break
-      case 6: // 供应商数量
-        const supplierChange = Math.floor((Math.random() - 0.5) * 5)
-        item.value = Math.floor(Math.max(120, Math.min(200, item.value + supplierChange)))
-        item.status = item.value > 150 ? '活跃' : item.value > 130 ? '正常' : '较少'
-        item.statusClass = item.value > 150 ? 'active' : item.value > 130 ? 'normal' : 'low'
-        break
+const formatNumber = (num) => {
+  const value = Number(num) || 0
+  return value.toLocaleString('zh-CN')
+}
+
+const resolveSupplyStatus = (value) => {
+  if (value >= 1000) {
+    return { status: '充足', statusClass: 'abundant' }
+  }
+  if (value >= 500) {
+    return { status: '正常', statusClass: 'normal' }
+  }
+  return { status: '紧张', statusClass: 'tight' }
+}
+
+const resolveForSaleStatus = (value) => {
+  if (value >= 800) {
+    return { status: '充足', statusClass: 'abundant' }
+  }
+  if (value >= 400) {
+    return { status: '正常', statusClass: 'normal' }
+  }
+  return { status: '紧张', statusClass: 'tight' }
+}
+
+const resolveParkingStatus = (value) => {
+  if (value > 30) {
+    return { status: '充足', statusClass: 'abundant' }
+  }
+  if (value > 15) {
+    return { status: '正常', statusClass: 'normal' }
+  }
+  return { status: '紧张', statusClass: 'tight' }
+}
+
+const resolveSupplierStatus = (value) => {
+  if (value > 100) {
+    return { status: '活跃', statusClass: 'active' }
+  }
+  if (value > 50) {
+    return { status: '正常', statusClass: 'normal' }
+  }
+  return { status: '较少', statusClass: 'low' }
+}
+
+const applyStatus = (item, data) => {
+  const value = Number(data[item.key]) || 0
+  item.value = value
+
+  if (item.key === 'totalSupply') {
+    Object.assign(item, resolveSupplyStatus(value))
+    return
+  }
+  if (item.key === 'forSaleYaks') {
+    Object.assign(item, resolveForSaleStatus(value))
+    return
+  }
+  if (item.key === 'remainingParking') {
+    Object.assign(item, resolveParkingStatus(value))
+    return
+  }
+  if (item.key === 'supplierCount') {
+    Object.assign(item, resolveSupplierStatus(value))
+    return
+  }
+  if (item.key === 'soldYaks' || item.key === 'enteringVehicles') {
+    item.status = '正常'
+    item.statusClass = 'normal'
+  }
+}
+
+const loadData = async () => {
+  try {
+    const response = await fetch(API_URL)
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
+    }
+
+    const result = await response.json()
+    if (result.code !== 1 || !result.data) {
+      throw new Error(result.message || '接口返回异常')
     }
-  })
+
+    serviceData.value.forEach((item) => {
+      applyStatus(item, result.data)
+    })
+  } catch (error) {
+    console.error('加载交易中心实时服务信息失败:', error)
+  }
 }
 
-onMounted(() => {
-  updateTimer = setInterval(updateData, 8000) // 8秒更新一次
+onMounted(async () => {
+  await loadData()
+  window.addEventListener('dataReloaded', loadData)
 })
 
 onUnmounted(() => {
-  if (updateTimer) {
-    clearInterval(updateTimer)
-  }
+  window.removeEventListener('dataReloaded', loadData)
 })
 </script>
 
@@ -147,138 +207,182 @@ onUnmounted(() => {
 .service-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: repeat(3, 1fr);
-  gap: 10px;
-  height: 100%;
-  padding: 8px;
+  grid-template-rows: repeat(3, auto);
+  gap: 16px 10px;
+  flex: 1;
+  min-height: 0;
+  padding: 4px 8px 8px 4px;
+  align-content: center;
+  overflow: visible;
 }
 
 .service-item {
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  padding: 12px;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  aspect-ratio: 624 / 126;
+  height: auto;
+  padding: 8px 16px 8px 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  transition: all 0.3s ease;
+  gap: 4px;
+  overflow: visible;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.service-item-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
+  z-index: 0;
+}
+
+.service-left,
+.service-value-wrap {
   position: relative;
-  overflow: hidden;
+  z-index: 1;
 }
 
-.service-item:hover {
-  border-color: rgba(64, 158, 255, 0.4);
-  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
-  transform: translateY(-1px);
+.service-item:nth-child(even) {
+  padding-right: 18px;
 }
 
 .service-left {
   display: flex;
   align-items: center;
-  gap: 12px;
-  flex: 1;
+  gap: 10px;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
 }
 
 .service-icon {
-  font-size: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 50px;
-  height: 50px;
-  background: rgba(64, 158, 255, 0.1);
-  border-radius: 8px;
+  display: block;
+  width: 54px;
+  height: 54px;
   flex-shrink: 0;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
 }
 
 .service-info {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 6px;
+  min-width: 0;
 }
 
 .service-label {
-  font-size: 20px;
-  color: #a0a8b8;
+  font-family: 'Microsoft YaHei', sans-serif;
+  font-size: 16px;
+  color: #ffffff;
   font-weight: 500;
   line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.service-value {
-  font-size: 30px;
-  font-weight: bold;
-  color: #ffffff;
+.service-status {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  font-family: 'Microsoft YaHei', sans-serif;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 2px;
+  border: 1px solid transparent;
   line-height: 1.2;
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
-  flex-shrink: 0;
-  text-align: right;
-}
-
-.service-value.total {
-  color: #409EFF;
+  font-weight: 500;
 }
 
-.service-value.sold {
-  color: #67C23A;
+.service-status.abundant {
+  color: #1afc7a;
+  border-color: rgba(26, 252, 122, 0.55);
+  background: rgba(26, 252, 122, 0.08);
 }
 
-.service-value.pending {
-  color: #E6A23C;
+.service-status.normal {
+  color: #0385f2;
+  border-color: rgba(3, 133, 242, 0.55);
+  background: rgba(3, 133, 242, 0.08);
 }
 
-.service-value.vehicles {
-  color: #9C27B0;
+.service-status.tight {
+  color: #fe4a46;
+  border-color: rgba(254, 74, 70, 0.55);
+  background: rgba(254, 74, 70, 0.08);
 }
 
-.service-value.parking {
-  color: #F56C6C;
+.service-status.active {
+  color: #0bfdf2;
+  border-color: rgba(11, 253, 242, 0.55);
+  background: rgba(11, 253, 242, 0.08);
 }
 
-.service-value.suppliers {
-  color: #26C6DA;
+.service-status.low {
+  color: #fe4a46;
+  border-color: rgba(254, 74, 70, 0.55);
+  background: rgba(254, 74, 70, 0.08);
 }
 
-.service-unit {
-  font-size: 18px;
-  color: #8cc8ff;
-  font-weight: normal;
+.service-value-wrap {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: baseline;
+  white-space: nowrap;
+  padding-right: 2px;
+  overflow: visible;
 }
 
-.service-status {
-  font-size: 16px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-weight: 500;
-  align-self: flex-start;
+.service-value {
+  display: inline-block;
+  font-family: 'Arial Black', 'Microsoft YaHei', sans-serif;
+  font-size: 28px;
+  font-weight: 700;
+  font-style: italic;
   line-height: 1;
-  margin-top: 4px;
+  letter-spacing: 0;
+  padding-right: 4px;
+  box-sizing: content-box;
 }
 
-.service-status.abundant {
-  background: rgba(103, 194, 58, 0.2);
-  color: #67C23A;
+.service-unit {
+  margin-left: 6px;
+  font-family: 'Microsoft YaHei', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1;
+  color: #d9f1ff;
 }
 
-.service-status.normal {
-  background: rgba(64, 158, 255, 0.2);
-  color: #409EFF;
+.value-green .service-value {
+  color: #1afc7a;
+  text-shadow: 0 0 8px rgba(26, 252, 122, 0.45);
 }
 
-.service-status.tight {
-  background: rgba(245, 108, 108, 0.2);
-  color: #F56C6C;
+.value-blue .service-value {
+  color: #0385f2;
+  text-shadow: 0 0 8px rgba(3, 133, 242, 0.45);
 }
 
-.service-status.active {
-  background: rgba(38, 198, 218, 0.2);
-  color: #26C6DA;
+.value-cyan .service-value {
+  color: #0bfdf2;
+  text-shadow: 0 0 8px rgba(11, 253, 242, 0.45);
 }
 
-.service-status.low {
-  background: rgba(230, 162, 60, 0.2);
-  color: #E6A23C;
+.value-red .service-value {
+  color: #fe4a46;
+  text-shadow: 0 0 8px rgba(254, 74, 70, 0.45);
 }
-</style> 
\ No newline at end of file
+</style>
diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
new file mode 100644
index 0000000..07be685
--- /dev/null
+++ b/src/components/HeaderBar.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="header-section" :style="headerStyle">
+    <div class="header-info left">
+      <slot name="left">
+        <HeaderDateTime />
+      </slot>
+    </div>
+
+    <div class="header-title">
+      <img
+        v-if="isImageTitle"
+        :src="title"
+        alt="页面标题"
+        class="title-image"
+      />
+      <h1 v-else class="main-title">{{ displayTitle }}</h1>
+    </div>
+
+    <div class="header-info right">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import HeaderDateTime from './HeaderDateTime.vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '智慧活畜交易大数据中心'
+  },
+  titleBackground: {
+    type: String,
+    default: '/images/标题背景.png'
+  }
+})
+
+const isImageTitle = computed(() => props.title?.startsWith('/'))
+
+const displayTitle = computed(() => props.title || '智慧活畜交易大数据中心')
+
+const headerStyle = computed(() => ({
+  backgroundImage: `url('${props.titleBackground}')`
+}))
+</script>
+
+<style scoped>
+.header-section {
+  width: 100%;
+  height: 96px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 40px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border-radius: 12px;
+  position: relative;
+  z-index: 10;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.header-title {
+  flex: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 0;
+  height: 100%;
+  padding: 8px 0;
+}
+
+.title-image {
+  max-width: min(1200px, 70%);
+  max-height: 72px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  display: block;
+}
+
+.main-title {
+  margin: 0;
+  font-size: 36px;
+  font-weight: 700;
+  background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #44c1ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-align: center;
+  letter-spacing: 3px;
+  filter: drop-shadow(0 0 12px rgba(64, 158, 255, 0.45));
+  white-space: nowrap;
+}
+
+.header-info {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex: 1;
+  min-width: 0;
+}
+
+.header-info.left {
+  justify-content: flex-start;
+}
+
+.header-info.right {
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/components/HeaderDateTime.vue b/src/components/HeaderDateTime.vue
new file mode 100644
index 0000000..f88f39e
--- /dev/null
+++ b/src/components/HeaderDateTime.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="header-datetime">
+    <span class="time">{{ timeText }}</span>
+    <span class="date-info">{{ weekdayText }} | {{ dateText }}</span>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const timeText = ref('--:--:--')
+const dateText = ref('----.--.--')
+const weekdayText = ref('')
+
+const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+
+const pad = (value) => String(value).padStart(2, '0')
+
+const updateDateTime = () => {
+  const now = new Date()
+
+  timeText.value = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
+  dateText.value = `${now.getFullYear()}.${pad(now.getMonth() + 1)}.${pad(now.getDate())}`
+  weekdayText.value = weekdays[now.getDay()]
+}
+
+let timer = null
+
+onMounted(() => {
+  updateDateTime()
+  timer = setInterval(updateDateTime, 1000)
+})
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer)
+  }
+})
+</script>
+
+<style scoped>
+.header-datetime {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  white-space: nowrap;
+}
+
+.time {
+  font-family: 'Microsoft YaHei', sans-serif;
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 1;
+  background: linear-gradient(0deg, #00d4ff 0%, #b8f0ff 42%, #ffffff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+.date-info {
+  font-family: 'Microsoft YaHei', sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 1;
+  color: #ffffff;
+}
+</style>
diff --git a/src/components/RealTimeStats.vue b/src/components/RealTimeStats.vue
index 8313b39..95adfc8 100644
--- a/src/components/RealTimeStats.vue
+++ b/src/components/RealTimeStats.vue
@@ -1,73 +1,56 @@
 <template>
   <BaseCard title="实时交易统计">
-    <!-- 时间维度切换按钮 -->
-    <div class="time-dimension-controls">
-      <button 
-        v-for="dimension in timeDimensions" 
-        :key="dimension.key"
-        @click="currentDimension = dimension.key"
-        :class="{ active: currentDimension === dimension.key }"
-        class="dimension-btn"
-      >
-        {{ dimension.label }}
-      </button>
-    </div>
-    
+    <template #headerExtra>
+      <DateIndicatorTabs
+        v-model="currentDimension"
+        :items="timeDimensions"
+      />
+    </template>
+
     <div class="stats-container">
-      <div class="stat-item">
-        <div class="stat-value">
-          <div>{{ formatNumber(statsData.yakTotalVolume) }}</div>
-          <div class="stat-unit">(头)</div>
-        </div>
-        <div class="stat-label">牦牛交易总量</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-value">
-          <div>{{ formatNumber(statsData.orderTotalVolume) }}</div>
-          <div class="stat-unit">(笔)</div>
-        </div>
-        <div class="stat-label">订单交易总量</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-value">
-          <div>{{ formatNumber(statsData.sellerCount) }}</div>
-          <div class="stat-unit">(户)</div>
-        </div>
-        <div class="stat-label">销售商户数量</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-value">
-          <div>{{ formatNumber(statsData.buyerCount) }}</div>
-          <div class="stat-unit">(户)</div>
-        </div>
-        <div class="stat-label">采购商户数量</div>
-      </div>
-      <!-- 调试信息 -->
-      <div class="debug-info" v-if="showDebug">
-        <div style="font-size: 10px; color: #666; margin-top: 10px;">
-          调试: {{ statsData.systemStatus }}
+      <div
+        v-for="item in statItems"
+        :key="item.key"
+        class="stat-item"
+      >
+        <div class="stat-visual">
+          <div class="stat-value">
+            <div class="stat-number">{{ formatNumber(statsData[item.key]) }}</div>
+            <div class="stat-unit">({{ item.unit }})</div>
+          </div>
+          <img
+            class="stat-platform"
+            src="/images/数据底板.png"
+            alt=""
+          />
         </div>
+        <div class="stat-label">{{ item.label }}</div>
       </div>
     </div>
   </BaseCard>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, reactive, watch, computed } from 'vue'
+import { ref, onMounted, reactive, watch } from 'vue'
 import BaseCard from './BaseCard.vue'
+import DateIndicatorTabs from './DateIndicatorTabs.vue'
 import { dataManager } from '../utils/dataManager.js'
 
-// 时间维度配置
 const timeDimensions = [
   { key: 'day', label: '日' },
   { key: 'week', label: '周' },
   { key: 'year', label: '年' }
 ]
 
-// 当前选中的时间维度
+const statItems = [
+  { key: 'yakTotalVolume', unit: '头', label: '牦牛交易总量' },
+  { key: 'orderTotalVolume', unit: '笔', label: '订单交易总量' },
+  { key: 'sellerCount', unit: '户', label: '销售商户数量' },
+  { key: 'buyerCount', unit: '户', label: '采购商户数量' }
+]
+
 const currentDimension = ref('day')
 
-// 响应式数据
 const statsData = reactive({
   yakTotalVolume: 0,
   orderTotalVolume: 0,
@@ -76,7 +59,6 @@ const statsData = reactive({
   systemStatus: '加载中...'
 })
 
-// 所有维度的数据存储
 const allDimensionData = reactive({
   day: {
     yakTotalVolume: 0,
@@ -98,75 +80,53 @@ const allDimensionData = reactive({
   }
 })
 
-// 调试模式
-const showDebug = ref(false)
-
-// 格式化数字
 const formatNumber = (num) => {
   return dataManager.formatNumber(num)
 }
 
-// 生成模拟数据（根据时间维度）
-const generateMockData = (dimension) => {
-  const baseData = {
-    yakTotalVolume: 8350,
-    orderTotalVolume: 1245,
-    sellerCount: 156,
-    buyerCount: 89
-  }
+const API_URL = '/api/dashboard/real-time-stats'
 
-  switch (dimension) {
-    case 'day':
-      return {
-        yakTotalVolume: baseData.yakTotalVolume,
-        orderTotalVolume: baseData.orderTotalVolume,
-        sellerCount: baseData.sellerCount,
-        buyerCount: baseData.buyerCount
-      }
-    case 'week':
-      return {
-        yakTotalVolume: Math.floor(baseData.yakTotalVolume * 6.8),
-        orderTotalVolume: Math.floor(baseData.orderTotalVolume * 6.5),
-        sellerCount: Math.floor(baseData.sellerCount * 1.2),
-        buyerCount: Math.floor(baseData.buyerCount * 1.15)
-      }
-    case 'year':
-      return {
-        yakTotalVolume: Math.floor(baseData.yakTotalVolume * 285),
-        orderTotalVolume: Math.floor(baseData.orderTotalVolume * 295),
-        sellerCount: Math.floor(baseData.sellerCount * 3.2),
-        buyerCount: Math.floor(baseData.buyerCount * 2.8)
-      }
-    default:
-      return baseData
-  }
+const emptyStats = () => ({
+  yakTotalVolume: 0,
+  orderTotalVolume: 0,
+  sellerCount: 0,
+  buyerCount: 0
+})
+
+const applyStats = (source) => {
+  timeDimensions.forEach(({ key }) => {
+    const item = source?.[key] || emptyStats()
+    allDimensionData[key] = {
+      yakTotalVolume: Number(item.yakTotalVolume) || 0,
+      orderTotalVolume: Number(item.orderTotalVolume) || 0,
+      sellerCount: Number(item.sellerCount) || 0,
+      buyerCount: Number(item.buyerCount) || 0
+    }
+  })
 }
 
-// 加载数据
 const loadData = async () => {
   try {
-    // 确保数据管理器已经加载完成
-    await dataManager.loadData()
-
-    // 为每个时间维度生成数据
-    timeDimensions.forEach(dimension => {
-      const data = generateMockData(dimension.key)
-      allDimensionData[dimension.key] = data
-    })
-
-    // 更新当前显示的数据
+    statsData.systemStatus = '加载中...'
+    const response = await fetch(API_URL)
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
+    }
+
+    const result = await response.json()
+    if (result.code !== 1 || !result.data) {
+      throw new Error(result.message || '接口返回异常')
+    }
+
+    applyStats(result.data)
     updateCurrentData()
-    
     statsData.systemStatus = '数据加载完成'
-    console.log('所有维度数据加载完成:', allDimensionData)
-    
   } catch (error) {
     console.error('加载实时统计数据失败:', error)
     statsData.systemStatus = '加载失败'
   }
 }
 
-// 更新当前显示的数据
 const updateCurrentData = () => {
   const currentData = allDimensionData[currentDimension.value]
   if (currentData) {
@@ -177,9 +137,6 @@ const updateCurrentData = () => {
   }
 }
 
-
-
-// 监听时间维度变化
 watch(currentDimension, () => {
   updateCurrentData()
 }, { immediate: false })
@@ -187,126 +144,102 @@ watch(currentDimension, () => {
 onMounted(async () => {
   await loadData()
 
-  // 监听数据重新加载事件
   window.addEventListener('dataReloaded', async () => {
-    console.log('收到数据重新加载事件，重新加载实时统计数据')
     await loadData()
   })
 })
-
-onUnmounted(() => {
-  // 清理事件监听器
-})
 </script>
 
 <style scoped>
-.time-dimension-controls {
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-  margin-bottom: 12px;
-  padding: 8px;
-}
-
-.dimension-btn {
-  padding: 6px 16px;
-  border: 1px solid #2c5282;
-  background: rgba(15, 27, 46, 0.8);
-  color: #8cc8ff;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  transition: all 0.3s ease;
-  backdrop-filter: blur(10px);
-  min-width: 50px;
-}
-
-.dimension-btn:hover {
-  border-color: #00d4ff;
-  color: #00d4ff;
-  background: rgba(0, 212, 255, 0.1);
-  transform: translateY(-1px);
-}
-
-.dimension-btn.active {
-  border-color: #00d4ff;
-  background: linear-gradient(135deg, #00d4ff, #0099cc);
-  color: #fff;
-  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
-}
-
 .stats-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
-  gap: 12px;
-  height: calc(100% - 60px);
-  padding: 8px;
+  gap: 14px 18px;
+  flex: 1;
+  min-height: 0;
+  padding: 6px 10px 10px;
+  align-items: center;
+  justify-items: center;
 }
 
 .stat-item {
-  position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
-  text-align: center;
-  /* padding: 20px 12px 16px 12px; */
-  background: url('../images/数据底座.png') center/contain no-repeat;
-  background-size: 80% 70%;
-  border-radius: 8px;
-  transition: all 0.3s ease;
-  min-height: 90px;
-  overflow: hidden;
+  justify-content: flex-start;
+  min-width: 0;
+  width: 200px;
 }
 
-.stat-item:hover {
-  transform: translateY(-2px);
-  filter: brightness(1.1);
+.stat-visual {
+  position: relative;
+  width: 200px;
+  height: 129px;
+  flex-shrink: 0;
 }
 
-.stat-unit {
-  font-size: 16px;
-  margin-top: 12px;
+.stat-platform {
+  display: block;
+  width: 200px;
+  height: 129px;
+  object-fit: fill;
+  pointer-events: none;
+  user-select: none;
 }
 
 .stat-value {
-  flex: 1;
+  position: absolute;
+  left: 50%;
+  top: 14px;
+  transform: translateX(-50%);
+  z-index: 1;
   display: flex;
-  align-items: center;
-  justify-content: center;
   flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  text-align: center;
+  pointer-events: none;
+}
+
+.stat-number {
+  font-family: 'Arial Black', 'Microsoft YaHei', sans-serif;
   font-size: 30px;
-  font-weight: 900;
-  color: #ffffff;
-  text-shadow:
-    0 0 15px rgba(64, 158, 255, 1),
-    0 0 25px rgba(64, 158, 255, 0.8),
-    2px 2px 6px rgba(0, 0, 0, 0.9),
-    -1px -1px 2px rgba(0, 0, 0, 0.8);
+  font-weight: 700;
+  font-style: italic;
   line-height: 1;
-  margin: 4px 0;
   letter-spacing: 1px;
+  transform: skewX(-6deg);
+  background: linear-gradient(180deg, #c8ffff 0%, #00f2fe 48%, #00c4dc 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.75));
 }
 
-.stat-label {
-  font-size: 24px;
+.stat-unit {
+  font-family: 'Microsoft YaHei', sans-serif;
+  font-size: 16px;
   font-weight: 700;
-  color: #409EFF;
-  /* text-shadow:
-    0 0 10px rgba(255, 255, 255, 0.8),
-    0 0 15px rgba(64, 158, 255, 0.6),
-    2px 2px 4px rgba(0, 0, 0, 0.9),
-    -1px -1px 2px rgba(0, 0, 0, 0.7); */
-  line-height: 1.2;
-  margin-top: auto;
-  letter-spacing: 0.5px;
+  line-height: 1;
+  color: #ffffff;
+  letter-spacing: 0;
 }
 
-.debug-info {
-  grid-column: 1 / -1;
+.stat-label {
+  margin-top: 10px;
+  font-family: 'Microsoft YaHei', sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0;
+  white-space: nowrap;
   text-align: center;
-  margin-top: 8px;
+  background: linear-gradient(180deg, #ffffff 0%, #e8f9ff 60%, #a8ecff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/ScreenDecorations.vue b/src/components/ScreenDecorations.vue
new file mode 100644
index 0000000..929a01d
--- /dev/null
+++ b/src/components/ScreenDecorations.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="screen-decorations-bottom" aria-hidden="true">
+    <img
+      class="decor-bottom"
+      src="/images/下部.png"
+      alt=""
+    />
+  </div>
+</template>
+
+<style scoped>
+.screen-decorations-bottom {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.decor-bottom {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  width: 2196px;
+  height: 40px;
+  display: block;
+  object-fit: fill;
+  pointer-events: none;
+  user-select: none;
+}
+</style>
diff --git a/src/components/YakPriceTrend.vue b/src/components/YakPriceTrend.vue
index 796fb3a..1e89a29 100644
--- a/src/components/YakPriceTrend.vue
+++ b/src/components/YakPriceTrend.vue
@@ -1,6 +1,14 @@
 <template>
   <BaseCard title="活牛/鲜肉价格趋势">
-    <div ref="chartRef" class="chart"></div>
+    <div class="chart-wrapper">
+      <div ref="chartRef" class="chart"></div>
+      <img
+        ref="baseRef"
+        class="chart-base"
+        src="/images/底座.png"
+        alt=""
+      />
+    </div>
   </BaseCard>
 </template>
 
@@ -8,73 +16,159 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import * as echarts from 'echarts'
 import BaseCard from './BaseCard.vue'
+import { bindChartBaseSync, syncChartBaseToGrid } from '../utils/chartBaseLayout.js'
 
 const chartRef = ref(null)
+const baseRef = ref(null)
 let chartInstance = null
+let tipTimer = null
+let unbindChartBaseSync = null
 
-// 模拟数据 - 根据2024年实际市场价格调整
-const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
-const liveCattleData = [26.5, 27.2, 28.8, 28.3, 29.1, 30.2, 29.6, 30.8] // 活牛价格 元/公斤 (实际价格范围26-31元)
-const beefData = [62.8, 61.5, 60.2, 58.9, 59.8, 61.2, 63.5, 64.8] // 牛肉价格 元/公斤 (实际价格范围58-65元)
+const CHART_GRID_BOTTOM = 30
+const API_URL = '/api/dashboard/price-trend'
 
-const initChart = () => {
-  if (!chartRef.value) return
+const chartData = ref({
+  labels: [],
+  liveCattlePrice: [],
+  beefPrice: [],
+  unit: '元/公斤',
+  liveUnit: '元/公斤',
+  beefUnit: '元/公斤'
+})
+
+const toRawValue = (item) => {
+  if (item === null || item === undefined || item === '') {
+    return null
+  }
+  const num = Number(item)
+  return Number.isFinite(num) ? num : null
+}
+
+const toChartValue = (item) => {
+  const raw = toRawValue(item)
+  return raw == null ? 0 : raw
+}
+
+const calcAxisMax = (rawValues) => {
+  const numeric = rawValues.filter((item) => item != null && item > 0)
+  const maxVal = numeric.length ? Math.max(...numeric) : 0
+  if (maxVal === 0) {
+    return 75
+  }
+
+  const step = 15
+  const raw = maxVal * 1.15
+  return Math.max(step * 3, Math.ceil(raw / step) * step)
+}
+
+const getDataIndicesWithValues = (rawLive, rawBeef) => {
+  const indices = []
+  const len = Math.max(rawLive.length, rawBeef.length)
+
+  for (let i = 0; i < len; i += 1) {
+    if (rawLive[i] != null || rawBeef[i] != null) {
+      indices.push(i)
+    }
+  }
+
+  return indices
+}
+
+const buildOption = () => {
+  const labels = chartData.value.labels
+  const rawLive = chartData.value.liveCattlePrice.map(toRawValue)
+  const rawBeef = chartData.value.beefPrice.map(toRawValue)
+  const liveSeries = rawLive.map(toChartValue)
+  const beefSeries = rawBeef.map(toChartValue)
+  const liveUnit = chartData.value.liveUnit || chartData.value.unit || '元/公斤'
+  const beefUnit = chartData.value.beefUnit || chartData.value.unit || '元/公斤'
+  const yAxisUnit = liveUnit === beefUnit ? liveUnit : `${liveUnit} / ${beefUnit}`
+
+  const axisMax = calcAxisMax([...rawLive, ...rawBeef])
 
-  chartInstance = echarts.init(chartRef.value)
-  
-  const option = {
+  return {
+    animation: true,
+    animationDuration: 700,
+    animationEasing: 'cubicOut',
     tooltip: {
       trigger: 'axis',
-      backgroundColor: 'rgba(0, 0, 0, 0.8)',
-      borderColor: '#409EFF',
+      backgroundColor: 'rgba(8, 28, 58, 0.92)',
+      borderColor: 'rgba(45, 189, 255, 0.85)',
+      borderWidth: 1,
+      padding: [10, 14],
       textStyle: {
-        color: '#fff',
-        fontSize: 12
+        color: '#d8ecff',
+        fontSize: 12,
+        fontFamily: 'Microsoft YaHei, sans-serif'
       },
-      formatter: function(params) {
-        let result = `${params[0].axisValue}<br/>`
-        params.forEach(param => {
-          result += `${param.marker}${param.seriesName}: ${param.value}元/公斤<br/>`
+      axisPointer: {
+        type: 'line',
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.65)',
+          type: 'dashed',
+          width: 1
+        }
+      },
+      formatter: (params) => {
+        if (!params?.length) {
+          return ''
+        }
+
+        const dataIndex = params[0].dataIndex
+        let html = `<div style="font-weight:700;margin-bottom:6px;">${params[0].axisValue}</div>`
+
+        params.forEach((item) => {
+          const raw = item.seriesName === '活牛价格'
+            ? rawLive[dataIndex]
+            : rawBeef[dataIndex]
+
+          if (raw == null) {
+            return
+          }
+
+          const unitLabel = item.seriesName === '活牛价格' ? liveUnit : beefUnit
+          html += `<div style="margin-top:4px;">
+            <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${item.color};margin-right:6px;"></span>
+            ${item.seriesName}: ${Number(raw).toFixed(1)}${unitLabel}
+          </div>`
         })
-        return result
+
+        return html
       }
     },
     grid: {
-      left: '8%',
-      right: '8%',
-      bottom: '15%',
-      top: '15%'
-    },
-    legend: {
-      data: ['活牛价格', '牛肉价格'],
-      textStyle: {
-        color: '#a0a8b8',
-        fontSize: 11
-      },
-      top: '5%'
+      left: 52,
+      right: 52,
+      bottom: CHART_GRID_BOTTOM,
+      top: 42,
+      containLabel: false
     },
     xAxis: {
       type: 'category',
-      data: months,
+      data: labels,
+      boundaryGap: false,
       axisLine: {
-        lineStyle: {
-          color: '#4a5568'
-        }
+        show: false
       },
       axisTick: {
         show: false
       },
       axisLabel: {
-        color: '#a0a8b8',
-        fontSize: 10
+        color: '#8ecfff',
+        fontSize: 12,
+        fontFamily: 'Microsoft YaHei, sans-serif',
+        margin: 8
       }
     },
     yAxis: {
       type: 'value',
-      name: '价格(元/公斤)',
+      name: `价格(${yAxisUnit})`,
+      min: 0,
+      max: axisMax,
+      interval: 15,
       splitLine: {
         lineStyle: {
-          color: '#2d3748',
+          color: 'rgba(80, 160, 220, 0.22)',
           type: 'dashed'
         }
       },
@@ -85,88 +179,204 @@ const initChart = () => {
         show: false
       },
       axisLabel: {
-        color: '#a0a8b8',
-        fontSize: 10
+        color: '#8ecfff',
+        fontSize: 12,
+        fontFamily: 'Microsoft YaHei, sans-serif'
       },
       nameTextStyle: {
-        color: '#a0a8b8',
-        fontSize: 10
+        color: '#8ecfff',
+        fontSize: 12,
+        fontFamily: 'Microsoft YaHei, sans-serif',
+        padding: [0, 0, 0, 0]
       }
     },
     series: [
       {
         name: '活牛价格',
         type: 'line',
-        data: liveCattleData,
-        smooth: true,
+        data: liveSeries,
+        smooth: 0.35,
+        connectNulls: true,
         symbol: 'circle',
-        symbolSize: 6,
+        symbolSize: (value) => (value > 0 ? 7 : 0),
+        showSymbol: true,
         lineStyle: {
-          color: '#67C23A',
-          width: 3
+          color: '#00d4ff',
+          width: 3,
+          shadowColor: 'rgba(0, 212, 255, 0.55)',
+          shadowBlur: 10
         },
         itemStyle: {
-          color: '#67C23A',
-          borderColor: '#fff',
-          borderWidth: 2
-        }
+          color: '#00d4ff',
+          borderColor: '#ffffff',
+          borderWidth: 2,
+          shadowColor: 'rgba(0, 212, 255, 0.8)',
+          shadowBlur: 8
+        },
+        areaStyle: {
+          origin: 'start',
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(0, 212, 255, 0.42)' },
+            { offset: 1, color: 'rgba(0, 212, 255, 0.02)' }
+          ])
+        },
+        emphasis: {
+          scale: true,
+          focus: 'series'
+        },
+        z: 3
       },
       {
         name: '牛肉价格',
         type: 'line',
-        data: beefData,
-        smooth: true,
+        data: beefSeries,
+        smooth: 0.35,
+        connectNulls: true,
         symbol: 'circle',
-        symbolSize: 6,
+        symbolSize: (value) => (value > 0 ? 7 : 0),
+        showSymbol: true,
         lineStyle: {
-          color: '#E6A23C',
-          width: 3
+          color: '#3dff7a',
+          width: 3,
+          shadowColor: 'rgba(61, 255, 122, 0.55)',
+          shadowBlur: 10
         },
         itemStyle: {
-          color: '#E6A23C',
-          borderColor: '#fff',
-          borderWidth: 2
-        }
+          color: '#3dff7a',
+          borderColor: '#ffffff',
+          borderWidth: 2,
+          shadowColor: 'rgba(61, 255, 122, 0.8)',
+          shadowBlur: 8
+        },
+        areaStyle: {
+          origin: 'start',
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(61, 255, 122, 0.38)' },
+            { offset: 1, color: 'rgba(61, 255, 122, 0.02)' }
+          ])
+        },
+        emphasis: {
+          scale: true,
+          focus: 'series'
+        },
+        z: 2
       }
     ]
   }
+}
+
+const startTipCarousel = () => {
+  stopTipCarousel()
 
-  chartInstance.setOption(option)
+  const rawLive = chartData.value.liveCattlePrice.map(toRawValue)
+  const rawBeef = chartData.value.beefPrice.map(toRawValue)
+  const indices = getDataIndicesWithValues(rawLive, rawBeef)
 
-  // 添加动画效果
-  let currentIndex = 0
-  const timer = setInterval(() => {
+  if (!chartInstance || !indices.length) {
+    return
+  }
+
+  let currentPos = 0
+  tipTimer = setInterval(() => {
     chartInstance.dispatchAction({
       type: 'showTip',
-      seriesIndex: [0, 1],
-      dataIndex: currentIndex
+      seriesIndex: 0,
+      dataIndex: indices[currentPos]
     })
-    currentIndex = (currentIndex + 1) % months.length
-  }, 2500)
+    currentPos = (currentPos + 1) % indices.length
+  }, 2800)
+}
 
-  chartInstance._autoTimer = timer
+const stopTipCarousel = () => {
+  if (tipTimer) {
+    clearInterval(tipTimer)
+    tipTimer = null
+  }
 }
 
-onMounted(() => {
-  initChart()
-  window.addEventListener('resize', () => {
-    chartInstance?.resize()
-  })
-})
+const renderChart = () => {
+  if (!chartInstance) {
+    return
+  }
+  chartInstance.setOption(buildOption(), true)
+  startTipCarousel()
+}
 
-onUnmounted(() => {
-  if (chartInstance) {
-    if (chartInstance._autoTimer) {
-      clearInterval(chartInstance._autoTimer)
+const loadData = async () => {
+  try {
+    const response = await fetch(API_URL)
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
     }
-    chartInstance.dispose()
+
+    const result = await response.json()
+    if (result.code !== 1 || !result.data) {
+      throw new Error(result.message || '接口返回异常')
+    }
+
+    chartData.value = {
+      labels: result.data.labels || [],
+      liveCattlePrice: result.data.liveCattlePrice || [],
+      beefPrice: result.data.beefPrice || [],
+      unit: result.data.unit || '元/公斤',
+      liveUnit: result.data.liveUnit || result.data.unit || '元/公斤',
+      beefUnit: result.data.beefUnit || result.data.unit || '元/公斤'
+    }
+    renderChart()
+  } catch (error) {
+    console.error('加载价格趋势数据失败:', error)
+  }
+}
+
+const handleResize = () => {
+  chartInstance?.resize()
+  syncChartBaseToGrid(chartInstance, baseRef.value)
+}
+
+onMounted(async () => {
+  if (chartRef.value) {
+    chartInstance = echarts.init(chartRef.value)
+    unbindChartBaseSync = bindChartBaseSync(chartInstance, baseRef.value)
   }
+  await loadData()
+  window.addEventListener('resize', handleResize)
+  window.addEventListener('dataReloaded', loadData)
+})
+
+onUnmounted(() => {
+  stopTipCarousel()
+  unbindChartBaseSync?.()
+  unbindChartBaseSync = null
+  window.removeEventListener('resize', handleResize)
+  window.removeEventListener('dataReloaded', loadData)
+  chartInstance?.dispose()
 })
 </script>
 
 <style scoped>
+.chart-wrapper {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0 4px;
+  overflow: visible;
+}
+
 .chart {
   width: 100%;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+.chart-base {
+  display: block;
+  width: 100%;
+  height: 90px;
+  object-fit: fill;
+  flex-shrink: 0;
+  pointer-events: none;
+  user-select: none;
+  margin-top: -26px;
 }
-</style> 
\ No newline at end of file
+</style>
diff --git a/src/components/YakTradingData.vue b/src/components/YakTradingData.vue
index 8a476c5..56f5e41 100644
--- a/src/components/YakTradingData.vue
+++ b/src/components/YakTradingData.vue
@@ -1,18 +1,21 @@
 <template>
   <BaseCard title="交易所牦牛成交数据">
-    <div class="time-selector">
-      <div class="selector-buttons">
-        <button 
-          v-for="period in timePeriods" 
-          :key="period.value"
-          :class="['period-btn', { active: selectedPeriod === period.value }]"
-          @click="changePeriod(period.value)"
-        >
-          {{ period.label }}
-        </button>
-      </div>
+    <template #headerExtra>
+      <DateIndicatorTabs
+        v-model="selectedPeriod"
+        :items="timePeriods"
+      />
+    </template>
+
+    <div class="chart-wrapper">
+      <div ref="chartRef" class="chart"></div>
+      <img
+        ref="baseRef"
+        class="chart-base"
+        src="/images/底座.png"
+        alt=""
+      />
     </div>
-    <div ref="chartRef" class="chart"></div>
   </BaseCard>
 </template>
 
@@ -20,253 +23,459 @@
 import { ref, onMounted, onUnmounted, watch } from 'vue'
 import * as echarts from 'echarts'
 import BaseCard from './BaseCard.vue'
+import DateIndicatorTabs from './DateIndicatorTabs.vue'
+import { bindChartBaseSync, syncChartBaseToGrid } from '../utils/chartBaseLayout.js'
 
 const chartRef = ref(null)
+const baseRef = ref(null)
 let chartInstance = null
+let growAnimationFrame = null
+let unbindChartBaseSync = null
+
+const CHART_GRID_BOTTOM = 30
+const CHART_GRID_BOTTOM_WEEK = 44
+
+const easeOutCubic = (t) => 1 - (1 - t) ** 3
 
 const selectedPeriod = ref('day')
 const timePeriods = [
-  { label: '日', value: 'day' },
-  { label: '周', value: 'week' },
-  { label: '月', value: 'month' }
+  { key: 'day', label: '日' },
+  { key: 'week', label: '周' },
+  { key: 'month', label: '月' }
 ]
 
-// 生成时间标签
-const generateTimeLabels = (period) => {
-  const now = new Date()
-  const labels = []
-  
-  if (period === 'day') {
-    // 过去6天
-    for (let i = 5; i >= 0; i--) {
-      const date = new Date(now)
-      date.setDate(date.getDate() - i)
-      labels.push(`${date.getMonth() + 1}/${date.getDate()}`)
-    }
-  } else if (period === 'week') {
-    // 过去6周
-    for (let i = 5; i >= 0; i--) {
-      const date = new Date(now)
-      date.setDate(date.getDate() - i * 7)
-      const weekStart = new Date(date)
-      const weekEnd = new Date(date)
-      weekEnd.setDate(weekEnd.getDate() + 6)
-      labels.push(`${weekStart.getMonth() + 1}/${weekStart.getDate()}-${weekEnd.getMonth() + 1}/${weekEnd.getDate()}`)
-    }
-  } else if (period === 'month') {
-    // 过去6个月
-    for (let i = 5; i >= 0; i--) {
-      const date = new Date(now)
-      date.setMonth(date.getMonth() - i)
-      labels.push(`${date.getFullYear()}/${date.getMonth() + 1}`)
-    }
+const chartData = ref({
+  day: { labels: [], yakTradingVolume: [], orderCount: [] },
+  week: { labels: [], yakTradingVolume: [], orderCount: [] },
+  month: { labels: [], yakTradingVolume: [], orderCount: [] }
+})
+
+const API_URL = '/api/dashboard/yak-trading-data'
+
+const BAR_WIDTH = 20
+const BAR_DEPTH_X = 7
+const BAR_DEPTH_Y = 5
+const MIN_BAR_PX = 6
+
+const calcAxisMax = (values, ratio = 1.3) => {
+  const maxVal = Math.max(0, ...values.map((v) => Number(v) || 0))
+  if (maxVal === 0) {
+    return 10
+  }
+
+  const raw = maxVal * ratio
+  const magnitude = Math.pow(10, Math.floor(Math.log10(raw)))
+  const normalized = raw / magnitude
+  let nice = 10
+
+  if (normalized <= 1) nice = 1
+  else if (normalized <= 2) nice = 2
+  else if (normalized <= 5) nice = 5
+
+  return nice * magnitude
+}
+
+// 0 值在轴上映射为极小高度，保证仍可见一小段柱体
+const getZeroDisplayValue = (axisMax) => axisMax * 0.035
+
+const create3DBarRenderer = (axisMax) => (params, api) => {
+  const categoryIndex = params.dataIndex
+  const rawValue = Number(api.value(1)) || 0
+  const displayValue = rawValue > 0 ? rawValue : getZeroDisplayValue(axisMax)
+  const isZero = rawValue === 0
+
+  const base = api.coord([categoryIndex, 0])
+  const top = api.coord([categoryIndex, displayValue])
+
+  const barHeight = Math.max(base[1] - top[1], MIN_BAR_PX)
+  const x = base[0] - BAR_WIDTH / 2
+  const y = base[1] - barHeight
+
+  const rightFace = {
+    type: 'polygon',
+    shape: {
+      points: [
+        [x + BAR_WIDTH, y],
+        [x + BAR_WIDTH + BAR_DEPTH_X, y - BAR_DEPTH_Y],
+        [x + BAR_WIDTH + BAR_DEPTH_X, base[1] - BAR_DEPTH_Y],
+        [x + BAR_WIDTH, base[1]]
+      ]
+    },
+    style: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        { offset: 0, color: isZero ? '#1f6f9f' : '#1a7ab8' },
+        { offset: 1, color: isZero ? '#0a3048' : '#043558' }
+      ])
+    },
+    silent: false
+  }
+
+  const frontFace = {
+    type: 'rect',
+    shape: {
+      x,
+      y,
+      width: BAR_WIDTH,
+      height: barHeight
+    },
+    style: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        { offset: 0, color: isZero ? '#6ecdf0' : '#8ef0ff' },
+        { offset: 0.45, color: isZero ? '#3aa8dc' : '#2dbdff' },
+        { offset: 1, color: isZero ? '#0d4f7a' : '#0a5a96' }
+      ])
+    },
+    silent: false
+  }
+
+  const topFace = {
+    type: 'polygon',
+    shape: {
+      points: [
+        [x, y],
+        [x + BAR_DEPTH_X, y - BAR_DEPTH_Y],
+        [x + BAR_WIDTH + BAR_DEPTH_X, y - BAR_DEPTH_Y],
+        [x + BAR_WIDTH, y]
+      ]
+    },
+    style: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        { offset: 0, color: isZero ? '#9de6ff' : '#c8f6ff' },
+        { offset: 1, color: isZero ? '#6ecdf0' : '#7ee8ff' }
+      ])
+    },
+    silent: false
+  }
+
+  return {
+    type: 'group',
+    children: [rightFace, frontFace, topFace]
   }
-  
-  return labels
 }
 
-// 生成模拟数据
-const generateMockData = (period) => {
-  const baseTrading = period === 'day' ? 150 : period === 'week' ? 800 : 3500
-  const baseOrders = period === 'day' ? 45 : period === 'week' ? 280 : 1200
-  
-  const tradingData = []
-  const orderData = []
-  
-  for (let i = 0; i < 6; i++) {
-    const tradingVariation = Math.floor(Math.random() * 200) - 100
-    const orderVariation = Math.floor(Math.random() * 60) - 30
-    
-    tradingData.push(baseTrading + tradingVariation)
-    orderData.push(baseOrders + orderVariation)
+const loadData = async () => {
+  try {
+    const response = await fetch(API_URL)
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
+    }
+
+    const result = await response.json()
+    if (result.code !== 1 || !result.data) {
+      throw new Error(result.message || '接口返回异常')
+    }
+
+    chartData.value = {
+      day: result.data.day || { labels: [], yakTradingVolume: [], orderCount: [] },
+      week: result.data.week || { labels: [], yakTradingVolume: [], orderCount: [] },
+      month: result.data.month || { labels: [], yakTradingVolume: [], orderCount: [] }
+    }
+    updateChart(true)
+  } catch (error) {
+    console.error('加载牦牛成交数据失败:', error)
   }
-  
-  return { tradingData, orderData }
 }
 
 const initChart = () => {
   if (!chartRef.value) return
 
   chartInstance = echarts.init(chartRef.value)
-  updateChart()
+  unbindChartBaseSync?.()
+  unbindChartBaseSync = bindChartBaseSync(chartInstance, baseRef.value)
 }
 
-const updateChart = () => {
-  if (!chartInstance) return
-  
-  const timeLabels = generateTimeLabels(selectedPeriod.value)
-  const { tradingData, orderData } = generateMockData(selectedPeriod.value)
-  
-  const option = {
-    tooltip: {
-      trigger: 'axis',
-      backgroundColor: 'rgba(0, 0, 0, 0.8)',
-      borderColor: '#409EFF',
-      textStyle: {
-        color: '#fff',
-        fontSize: 12
-      },
-      formatter: function(params) {
-        let result = `${params[0].axisValue}<br/>`
-        params.forEach(param => {
-          const unit = param.seriesName === '牦牛交易数量' ? '头' : '单'
-          result += `${param.marker}${param.seriesName}: ${param.value}${unit}<br/>`
-        })
-        return result
-      }
+const buildChartOption = ({
+  timeLabels,
+  tradingSeries,
+  orderSeries,
+  yakAxisMax,
+  orderAxisMax,
+  tooltipTrading,
+  tooltipOrders
+}) => ({
+  animation: false,
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(8, 32, 68, 0.92)',
+    borderColor: '#2dbdff',
+    borderWidth: 1,
+    padding: [10, 14],
+    textStyle: {
+      color: '#ffffff',
+      fontSize: 13,
+      fontFamily: 'Microsoft YaHei, sans-serif'
     },
-    grid: {
-      left: '8%',
-      right: '8%',
-      bottom: '15%',
-      top: '20%'
+    extraCssText: 'box-shadow: 0 0 16px rgba(45, 189, 255, 0.35); border-radius: 4px;',
+    formatter(params) {
+      const idx = params[0]?.dataIndex ?? 0
+      const yakVal = tooltipTrading[idx] ?? 0
+      const orderVal = tooltipOrders[idx] ?? 0
+      let result = `<div style="font-weight:700;margin-bottom:6px;">${params[0].axisValue}</div>`
+      result += `<div style="margin-top:4px;"><span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:#4dd9ff;margin-right:6px;"></span>牦牛交易数量：${yakVal}头</div>`
+      result += `<div style="margin-top:4px;"><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#ffd56a;margin-right:6px;"></span>成交订单数量：${orderVal}单</div>`
+      return result
+    }
+  },
+  grid: {
+    left: 52,
+    right: 52,
+    bottom: selectedPeriod.value === 'week' ? CHART_GRID_BOTTOM_WEEK : CHART_GRID_BOTTOM,
+    top: 42,
+    containLabel: false
+  },
+  legend: {
+    data: [
+      { name: '牦牛交易数量', icon: 'rect' },
+      { name: '成交订单数量', icon: 'circle' }
+    ],
+    top: 4,
+    left: 'center',
+    itemWidth: 12,
+    itemHeight: 12,
+    itemGap: 24,
+    textStyle: {
+      color: '#d8ecff',
+      fontSize: 13,
+      fontFamily: 'Microsoft YaHei, sans-serif'
+    }
+  },
+  xAxis: {
+    type: 'category',
+    data: timeLabels,
+    boundaryGap: true,
+    axisLine: {
+      show: false
     },
-    legend: {
-      data: ['牦牛交易数量', '成交订单数量'],
-      textStyle: {
-        color: '#a0a8b8',
-        fontSize: 11
-      },
-      top: '8%'
+    axisTick: {
+      show: false
     },
-    xAxis: {
-      type: 'category',
-      data: timeLabels,
-      axisLine: {
+      axisLabel: {
+        color: '#8ecfff',
+        fontSize: 12,
+        fontFamily: 'Microsoft YaHei, sans-serif',
+        margin: 8,
+        rotate: selectedPeriod.value === 'week' ? 35 : 0
+      }
+  },
+  yAxis: [
+    {
+      type: 'value',
+      name: '交易数量(头)',
+      position: 'left',
+      min: 0,
+      max: yakAxisMax,
+      splitNumber: 5,
+      alignTicks: false,
+      nameGap: 12,
+      splitLine: {
         lineStyle: {
-          color: '#4a5568'
+          color: 'rgba(80, 160, 220, 0.22)',
+          type: 'dashed'
         }
       },
+      axisLine: {
+        show: false
+      },
       axisTick: {
         show: false
       },
       axisLabel: {
-        color: '#a0a8b8',
-        fontSize: 10,
-        rotate: selectedPeriod.value === 'week' ? 45 : 0
+        color: '#8ecfff',
+        fontSize: 12,
+        fontFamily: 'Microsoft YaHei, sans-serif'
+      },
+      nameTextStyle: {
+        color: '#8ecfff',
+        fontSize: 12,
+        fontFamily: 'Microsoft YaHei, sans-serif',
+        padding: [0, 0, 0, 0]
       }
     },
-    yAxis: [
-      {
-        type: 'value',
-        name: '交易数量(头)',
-        position: 'left',
-        splitLine: {
-          lineStyle: {
-            color: '#2d3748',
-            type: 'dashed'
-          }
-        },
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-        axisLabel: {
-          color: '#a0a8b8',
-          fontSize: 10
-        },
-        nameTextStyle: {
-          color: '#a0a8b8',
-          fontSize: 10
-        }
+    {
+      type: 'value',
+      name: '订单数量(单)',
+      position: 'right',
+      min: 0,
+      max: orderAxisMax,
+      splitNumber: 5,
+      alignTicks: false,
+      nameGap: 12,
+      splitLine: {
+        show: false
       },
-      {
-        type: 'value',
-        name: '订单数量(单)',
-        position: 'right',
-        splitLine: {
-          show: false
-        },
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-        axisLabel: {
-          color: '#a0a8b8',
-          fontSize: 10
-        },
-        nameTextStyle: {
-          color: '#a0a8b8',
-          fontSize: 10
-        }
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#ffffff',
+        fontSize: 12,
+        fontFamily: 'Microsoft YaHei, sans-serif'
+      },
+      nameTextStyle: {
+        color: '#ffffff',
+        fontSize: 12,
+        fontFamily: 'Microsoft YaHei, sans-serif'
       }
-    ],
-    series: [
-      {
-        name: '牦牛交易数量',
-        type: 'line',
-        yAxisIndex: 0,
-        data: tradingData,
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 6,
-        lineStyle: {
-          color: '#409EFF',
-          width: 3
-        },
-        itemStyle: {
-          color: '#409EFF',
-          borderColor: '#fff',
-          borderWidth: 2
-        },
-        // areaStyle: {
-        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //     { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
-        //     { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
-        //   ])
-        // }
+    }
+  ],
+  series: [
+    {
+      name: '牦牛交易数量',
+      type: 'custom',
+      yAxisIndex: 0,
+      renderItem: create3DBarRenderer(yakAxisMax),
+      data: tradingSeries.map((value, index) => [index, value]),
+      encode: {
+        x: 0,
+        y: 1
       },
-      {
-        name: '成交订单数量',
-        type: 'line',
-        yAxisIndex: 1,
-        data: orderData,
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 6,
-        lineStyle: {
-          color: '#67C23A',
-          width: 3
-        },
-        itemStyle: {
-          color: '#67C23A',
-          borderColor: '#fff',
-          borderWidth: 2
+      z: 2
+    },
+    {
+      name: '成交订单数量',
+      type: 'line',
+      yAxisIndex: 1,
+      data: orderSeries,
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 7,
+      lineStyle: {
+        color: '#f5b942',
+        width: 3,
+        shadowColor: 'rgba(245, 185, 66, 0.55)',
+        shadowBlur: 10
+      },
+      itemStyle: {
+        color: '#ffd56a',
+        borderColor: '#ffffff',
+        borderWidth: 2
+      },
+      z: 3
+    }
+  ]
+})
+
+const cancelGrowAnimation = () => {
+  if (growAnimationFrame !== null) {
+    cancelAnimationFrame(growAnimationFrame)
+    growAnimationFrame = null
+  }
+}
+
+const updateChart = (animateFromZero = false) => {
+  if (!chartInstance) return
+
+  cancelGrowAnimation()
+
+  const periodData = chartData.value[selectedPeriod.value] || {
+    labels: [],
+    yakTradingVolume: [],
+    orderCount: []
+  }
+  const timeLabels = periodData.labels
+  const tradingData = periodData.yakTradingVolume
+  const orderData = periodData.orderCount
+
+  if (!timeLabels.length) {
+    return
+  }
+
+  const yakAxisMax = calcAxisMax(tradingData, 1.25)
+  const orderAxisMax = calcAxisMax(orderData, 2.4)
+  const zeroTrading = tradingData.map(() => 0)
+  const zeroOrders = orderData.map(() => 0)
+
+  const baseConfig = {
+    timeLabels,
+    yakAxisMax,
+    orderAxisMax,
+    tooltipTrading: tradingData,
+    tooltipOrders: orderData
+  }
+
+  const render = (tradingSeries, orderSeries, replaceAll = true) => {
+    chartInstance.setOption(
+      buildChartOption({
+        ...baseConfig,
+        tradingSeries,
+        orderSeries
+      }),
+      replaceAll
+    )
+  }
+
+  const renderSeriesFrame = (tradingSeries, orderSeries) => {
+    chartInstance.setOption({
+      series: [
+        {
+          name: '牦牛交易数量',
+          data: tradingSeries.map((value, index) => [index, value])
         },
-        // areaStyle: {
-        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //     { offset: 0, color: 'rgba(103, 194, 58, 0.2)' },
-        //     { offset: 1, color: 'rgba(103, 194, 58, 0.05)' }
-        //   ])
-        // }
+        {
+          name: '成交订单数量',
+          data: orderSeries
+        }
+      ]
+    }, false)
+  }
+
+  const playGrowAnimation = () => {
+    render(zeroTrading, zeroOrders, true)
+
+    const startTime = performance.now()
+    const tick = (now) => {
+      const progress = Math.min((now - startTime) / GROW_ANIMATION_MS, 1)
+      const ratio = easeOutCubic(progress)
+      const currentTrading = tradingData.map((v) => (Number(v) || 0) * ratio)
+      const currentOrders = orderData.map((v) => (Number(v) || 0) * ratio)
+
+      renderSeriesFrame(currentTrading, currentOrders)
+
+      if (progress < 1) {
+        growAnimationFrame = requestAnimationFrame(tick)
+        return
       }
-    ]
+
+      growAnimationFrame = null
+      renderSeriesFrame(tradingData, orderData)
+    }
+
+    growAnimationFrame = requestAnimationFrame(tick)
   }
 
-  chartInstance.setOption(option, true)
-}
+  if (!animateFromZero) {
+    render(tradingData, orderData, true)
+    return
+  }
 
-const changePeriod = (period) => {
-  selectedPeriod.value = period
+  playGrowAnimation()
 }
 
-// 监听时间周期变化
 watch(selectedPeriod, () => {
-  updateChart()
+  updateChart(true)
 })
 
-onMounted(() => {
+const handleResize = () => {
+  chartInstance?.resize()
+  syncChartBaseToGrid(chartInstance, baseRef.value)
+}
+
+onMounted(async () => {
   initChart()
-  window.addEventListener('resize', () => {
-    chartInstance?.resize()
-  })
+  await loadData()
+  window.addEventListener('resize', handleResize)
+  window.addEventListener('dataReloaded', loadData)
 })
 
 onUnmounted(() => {
+  cancelGrowAnimation()
+  unbindChartBaseSync?.()
+  unbindChartBaseSync = null
+  window.removeEventListener('resize', handleResize)
+  window.removeEventListener('dataReloaded', loadData)
   if (chartInstance) {
     chartInstance.dispose()
   }
@@ -274,40 +483,29 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.time-selector {
-  padding: 0 20px 15px;
-}
-
-.selector-buttons {
+.chart-wrapper {
+  flex: 1;
+  min-height: 0;
   display: flex;
-  gap: 8px;
-  justify-content: center;
+  flex-direction: column;
+  padding: 0 4px;
+  overflow: visible;
 }
 
-.period-btn {
-  padding: 6px 16px;
-  border: 1px solid #4a5568;
-  background: transparent;
-  color: #a0a8b8;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-  transition: all 0.3s ease;
-}
-
-.period-btn:hover {
-  border-color: #409EFF;
-  color: #409EFF;
-}
-
-.period-btn.active {
-  border-color: #409EFF;
-  background: #409EFF;
-  color: #fff;
+.chart {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
 }
 
-.chart {
+.chart-base {
+  display: block;
   width: 100%;
-  height: calc(100% - 60px);
+  height: 90px;
+  object-fit: fill;
+  flex-shrink: 0;
+  pointer-events: none;
+  user-select: none;
+  margin-top: -26px;
 }
-</style> 
\ No newline at end of file
+</style>
diff --git a/src/utils/chartBaseLayout.js b/src/utils/chartBaseLayout.js
new file mode 100644
index 0000000..3449e0f
--- /dev/null
+++ b/src/utils/chartBaseLayout.js
@@ -0,0 +1,36 @@
+/**
+ * 将底座图片宽度/左偏移与 ECharts grid 绘图区对齐（左右 Y 轴之间）。
+ */
+export const syncChartBaseToGrid = (chartInstance, baseEl) => {
+  if (!chartInstance || !baseEl) {
+    return
+  }
+
+  const gridModel = chartInstance.getModel()?.getComponent('grid', 0)
+  const rect = gridModel?.coordinateSystem?.getRect?.()
+  if (!rect?.width) {
+    return
+  }
+
+  baseEl.style.width = `${Math.round(rect.width)}px`
+  baseEl.style.marginLeft = `${Math.round(rect.x)}px`
+}
+
+export const bindChartBaseSync = (chartInstance, baseEl) => {
+  if (!chartInstance || !baseEl) {
+    return () => {}
+  }
+
+  const sync = () => {
+    requestAnimationFrame(() => {
+      syncChartBaseToGrid(chartInstance, baseEl)
+    })
+  }
+
+  chartInstance.on('finished', sync)
+  sync()
+
+  return () => {
+    chartInstance.off('finished', sync)
+  }
+}
diff --git a/src/utils/pie3d.js b/src/utils/pie3d.js
new file mode 100644
index 0000000..0cf18e9
--- /dev/null
+++ b/src/utils/pie3d.js
@@ -0,0 +1,319 @@
+/**
+ * ECharts-GL 三维环饼图（surface 参数方程）
+ */
+
+const MIN_SLICE_HEIGHT = 0.04
+const MAX_SLICE_HEIGHT = 3.6
+
+const getHeightScale = (value, maxValue) => {
+  if (!maxValue || !value) {
+    return MIN_SLICE_HEIGHT
+  }
+  const ratio = value / maxValue
+  return MIN_SLICE_HEIGHT + (MAX_SLICE_HEIGHT - MIN_SLICE_HEIGHT) * ratio
+}
+
+export const getParametricEquation = (
+  startRatio,
+  endRatio,
+  isSelected,
+  isHovered,
+  k,
+  height
+) => {
+  const startRadian = startRatio * Math.PI * 2
+  const endRadian = endRatio * Math.PI * 2
+  const midRadian = (startRadian + endRadian) / 2
+  const offsetX = isSelected ? Math.cos(midRadian) * 0.12 : 0
+  const offsetY = isSelected ? Math.sin(midRadian) * 0.12 : 0
+  const hoverRate = isHovered ? 1.06 : 1
+  const sliceHeight = height * hoverRate
+
+  return {
+    u: {
+      min: -Math.PI,
+      max: Math.PI * 3,
+      step: Math.PI / 32
+    },
+    v: {
+      min: 0,
+      max: Math.PI * 2,
+      step: Math.PI / 20
+    },
+    x(u, v) {
+      if (u < startRadian) {
+        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+      }
+      if (u > endRadian) {
+        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+      }
+      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+    },
+    y(u, v) {
+      if (u < startRadian) {
+        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+      }
+      if (u > endRadian) {
+        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+      }
+      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+    },
+    z(u, v) {
+      if (u < -Math.PI * 0.5) {
+        return Math.sin(u)
+      }
+      if (u > Math.PI * 2.5) {
+        return Math.sin(u) * sliceHeight
+      }
+      return Math.sin(v) > 0 ? sliceHeight : -1
+    }
+  }
+}
+
+const PLACEHOLDER_SLICE_COUNT = 5
+const PLACEHOLDER_SLICE_HEIGHT = 0.1
+
+const LABEL_LAYOUT = {
+  centerX: 50,
+  centerY: 37,
+  radiusX: 29,
+  radiusY: 21,
+  radialLen: 7,
+  horizontalLen: 10
+}
+
+const buildLabelGraphics = (sortedData, sumValue) => {
+  if (!sortedData.length || !sumValue) {
+    return []
+  }
+
+  const { centerX, centerY, radiusX, radiusY, radialLen, horizontalLen } = LABEL_LAYOUT
+  let startValue = 0
+  const graphics = []
+
+  sortedData.forEach((item) => {
+    const endValue = startValue + item.value
+    const midRatio = (startValue + endValue) / 2 / sumValue
+    const midRadian = midRatio * Math.PI * 2
+    const cos = Math.cos(midRadian)
+    const sin = Math.sin(midRadian)
+    const onRight = cos >= 0
+
+    const anchorX = centerX + cos * radiusX
+    const anchorY = centerY - sin * radiusY
+    const radialX = cos * radialLen * 3.2
+    const radialY = -sin * radialLen * 2.4
+    const endX = radialX + (onRight ? horizontalLen * 3.6 : -horizontalLen * 3.6)
+    const endY = radialY
+
+    graphics.push({
+      type: 'group',
+      left: `${anchorX}%`,
+      top: `${anchorY}%`,
+      z: 10,
+      children: [
+        {
+          type: 'polyline',
+          shape: {
+            points: [
+              [0, 0],
+              [radialX, radialY],
+              [endX, endY]
+            ]
+          },
+          style: {
+            stroke: 'rgba(142, 207, 255, 0.55)',
+            lineWidth: 1,
+            fill: null
+          },
+          silent: true
+        },
+        {
+          type: 'text',
+          x: endX + (onRight ? 5 : -5),
+          y: endY,
+          style: {
+            text: `${item.name}\n${item.percent}%`,
+            fill: '#d8ecff',
+            font: '13px Microsoft YaHei',
+            textAlign: onRight ? 'left' : 'right',
+            textVerticalAlign: 'middle'
+          },
+          silent: true
+        }
+      ],
+      silent: true
+    })
+
+    startValue = endValue
+  })
+
+  return graphics
+}
+
+const buildCenterGraphic = (text) => ([
+  {
+    type: 'text',
+    left: 'center',
+    top: '44%',
+    style: {
+      text,
+      fill: 'rgba(142, 207, 255, 0.88)',
+      font: '14px Microsoft YaHei',
+      textAlign: 'center',
+      textVerticalAlign: 'middle'
+    },
+    silent: true
+  }
+])
+
+export const buildEmptyPie3DPlaceholder = (colors, config = {}) => {
+  const pieData = Array.from({ length: PLACEHOLDER_SLICE_COUNT }, (_, index) => ({
+    name: `empty-${index}`,
+    value: 1,
+    percent: 20,
+    color: colors[index % colors.length],
+    opacity: 0.42
+  }))
+
+  return buildPie3DOption({
+    ...config,
+    pieData,
+    placeholderMode: true
+  })
+}
+
+export const buildPie3DOption = ({
+  pieData,
+  internalDiameterRatio = 0.58,
+  boxHeight = 40,
+  viewAlpha = 28,
+  viewBeta = 48,
+  viewDistance = 185,
+  placeholderMode = false
+}) => {
+  const series = []
+  let sumValue = 0
+  let startValue = 0
+
+  const validData = placeholderMode
+    ? pieData
+    : pieData.filter((item) => (Number(item.value) || 0) > 0)
+
+  if (!validData.length) {
+    return null
+  }
+
+  const sortedData = placeholderMode
+    ? validData
+    : [...validData].sort((a, b) => b.value - a.value)
+
+  const maxValue = placeholderMode
+    ? 1
+    : Math.max(...sortedData.map((item) => item.value), 1)
+  const k = (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+
+  sortedData.forEach((item) => {
+    sumValue += item.value
+  })
+
+  sortedData.forEach((item) => {
+    const endValue = startValue + item.value
+    const startRatio = startValue / sumValue
+    const endRatio = endValue / sumValue
+    const height = placeholderMode
+      ? PLACEHOLDER_SLICE_HEIGHT
+      : getHeightScale(item.value, maxValue)
+
+    series.push({
+      name: item.name,
+      type: 'surface',
+      coordinateSystem: 'cartesian3D',
+      parametric: true,
+      progressive: 0,
+      wireframe: { show: false },
+      shading: 'lambert',
+      pieData: item,
+      itemStyle: {
+        color: item.color,
+        opacity: item.opacity ?? (placeholderMode ? 0.42 : 0.96)
+      },
+      parametricEquation: getParametricEquation(
+        startRatio,
+        endRatio,
+        false,
+        false,
+        k,
+        height
+      )
+    })
+
+    startValue = endValue
+  })
+
+  return {
+    animation: false,
+    tooltip: placeholderMode
+      ? { show: false }
+      : {
+          trigger: 'item',
+          formatter: (params) => {
+            if (!params.seriesName) {
+              return ''
+            }
+            const target = series.find((item) => item.name === params.seriesName)
+            const data = target?.pieData
+            if (!data) {
+              return params.seriesName
+            }
+            return `${data.name}<br/>${data.percent}%　${data.value}头`
+          }
+        },
+    xAxis3D: { min: -1.2, max: 1.2 },
+    yAxis3D: { min: -1.2, max: 1.2 },
+    zAxis3D: { min: -2, max: 4.5 },
+    grid3D: {
+      show: false,
+      boxHeight,
+      top: '-12%',
+      viewControl: {
+        alpha: viewAlpha,
+        beta: viewBeta,
+        distance: viewDistance,
+        rotateSensitivity: 0,
+        zoomSensitivity: 0,
+        panSensitivity: 0,
+        autoRotate: false
+      },
+      light: {
+        main: {
+          intensity: 1.2,
+          shadow: false,
+          alpha: 40,
+          beta: 40
+        },
+        ambient: {
+          intensity: 0.5
+        }
+      }
+    },
+    series,
+    graphic: placeholderMode
+      ? buildCenterGraphic('暂无统计数据')
+      : buildLabelGraphics(sortedData, sumValue)
+  }
+}
+
+export const enrichPieData = (items, colors) => {
+  const total = items.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+  return items.map((item, index) => {
+    const value = Number(item.value) || 0
+    const percent = total === 0 ? 0 : Number(((value / total) * 100).toFixed(2))
+    return {
+      name: item.name,
+      value,
+      percent,
+      color: colors[index % colors.length]
+    }
+  })
+}
diff --git a/src/utils/systemConfig.js b/src/utils/systemConfig.js
new file mode 100644
index 0000000..b13f11e
--- /dev/null
+++ b/src/utils/systemConfig.js
@@ -0,0 +1,32 @@
+const API_URL = '/api/dashboard/system-config'
+
+const DEFAULT_SYSTEM_CONFIG = {
+  title: '/标题.png',
+  titleBackground: '/images/标题背景.png'
+}
+
+export async function loadSystemConfig() {
+  try {
+    const response = await fetch(API_URL)
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
+    }
+
+    const result = await response.json()
+    if (result.code !== 1 || !result.data) {
+      throw new Error(result.message || '系统配置接口返回异常')
+    }
+
+    return {
+      ...DEFAULT_SYSTEM_CONFIG,
+      ...result.data
+    }
+  } catch (error) {
+    console.warn('加载系统配置失败，使用默认配置:', error)
+    return { ...DEFAULT_SYSTEM_CONFIG }
+  }
+}
+
+export function isImageTitle(title) {
+  return typeof title === 'string' && title.startsWith('/')
+}
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index a8e81ac..e8c2c03 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,108 +1,108 @@
 <template>
   <div class="dashboard-container">
-    <!-- 标题区域 -->
-    <div class="header-section">
-      <div class="header-info left">
-        <!-- <div class="info-item">
-          <span class="status-indicator" :class="isLayoutReady ? 'online' : 'loading'"></span>
-          <span>{{ isLayoutReady ? '系统运行正常' : '系统初始化中' }}</span>
-        </div> -->
-      </div>
-      <h1 class="main-title">{{ config?.screen?.title || '智慧活畜交易大数据中心' }}</h1>
-      <div class="header-info right">
-        <div class="info-item">
-          <span class="current-time">{{ currentTime || '--:--:--' }}</span>
-        </div>
-      </div>
-    </div>
+    <img
+      class="dashboard-bg"
+      src="/images/世界地图背景.png"
+      alt=""
+    />
 
-    <!-- 主要内容区域 -->
-    <div v-if="isLayoutReady" class="main-content">
-      <!-- 左侧区域 - 分为左和左中两列 -->
-      <div class="left-section">
-        <!-- 左列 -->
-        <div class="left-column">
-          <div class="left-top">
-            <RealTimeStats />
-          </div>
-          <div class="left-bottom">
-            <YakTradingData />
+    <!-- 标题区域 -->
+    <HeaderBar
+      :title="systemConfig.title"
+      :title-background="systemConfig.titleBackground"
+    />
+
+    <div class="content-area">
+      <!-- 主要内容区域 -->
+      <div v-if="isLayoutReady" class="main-content">
+        <!-- 左侧：背景 + 装饰 + 统计模块 -->
+        <div class="side-panel side-panel-left">
+          <img class="side-panel-bg" src="/images/左边bg.png" alt="" />
+          <img class="side-decor side-decor-left" src="/images/左部.png" alt="" />
+          <div class="side-panel-body">
+            <div class="left-section">
+              <div class="left-column">
+                <div class="left-top">
+                  <RealTimeStats />
+                </div>
+                <div class="left-bottom">
+                  <YakTradingData />
+                </div>
+              </div>
+              <div class="left-center-column">
+                <div class="left-center-top">
+                  <ComprehensiveSalesStats />
+                </div>
+                <div class="left-center-bottom">
+                  <YakPriceTrend />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 
-        <!-- 左中列 -->
-        <div class="left-center-column">
-          <div class="left-center-top">
-            <ComprehensiveSalesStats />
-          </div>
-          <div class="left-center-bottom">
-            <YakPriceTrend />
+        <!-- 中央地图 -->
+        <div class="center-section">
+          <div class="map-container">
+            <ChinaMap />
           </div>
         </div>
-      </div>
 
-      <!-- 中央区域 -->
-      <div class="center-section">
-        <div class="map-container">
-          <ChinaMap />
-          <!-- <ScrollingAnnouncement /> -->
-          <!-- <div class="floating-table">
-            <TransactionDetails />
-          </div> -->
+        <!-- 右侧：背景 + 统计模块 + 装饰 -->
+        <div class="side-panel side-panel-right">
+          <img class="side-panel-bg" src="/images/右边bg.png" alt="" />
+          <div class="side-panel-body">
+            <div class="right-section">
+              <div v-if="isSupplyExpanded" class="expanded-supply-container">
+                <SupplyDemandData :force-expanded="true" @expand-change="handleSupplyExpand" />
+              </div>
+              <template v-else>
+                <div class="right-center-column">
+                  <div class="right-center-top">
+                    <ExchangeMonitor />
+                  </div>
+                  <div class="right-center-middle">
+                    <YakSalesTypeStats />
+                  </div>
+                  <div class="right-center-bottom">
+                    <PurchaserAnalysis />
+                  </div>
+                </div>
+                <div class="right-column">
+                  <div class="right-bottom">
+                    <SupplyDemandData :force-expanded="false" @expand-change="handleSupplyExpand" />
+                  </div>
+                  <div class="right-middle">
+                    <MarketRealtimeMonitor />
+                  </div>
+                  <div class="right-top">
+                    <MarketEnvironmentMonitor />
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+          <img class="side-decor side-decor-right" src="/images/右部.png" alt="" />
         </div>
       </div>
 
-      <!-- 右侧区域 - 分为右中和右两列 -->
-      <div class="right-section">
-        <!-- 当供应信息展开时，整个右侧区域显示供应信息 -->
-        <div v-if="isSupplyExpanded" class="expanded-supply-container">
-          <SupplyDemandData :force-expanded="true" @expand-change="handleSupplyExpand" />
+      <!-- 加载状态 -->
+      <div v-else class="loading-container">
+        <div class="loading-content">
+          <div class="loading-spinner"></div>
+          <div class="loading-text">正在初始化布局...</div>
         </div>
-
-        <!-- 正常状态下的右侧布局 -->
-        <template v-else>
-          <!-- 右中列 -->
-          <div class="right-center-column">
-            <div class="right-center-top">
-              <ExchangeMonitor />
-            </div>
-            <div class="right-center-middle">
-              <YakSalesTypeStats />
-            </div>
-            <div class="right-center-bottom">
-              <PurchaserAnalysis />
-            </div>
-          </div>
-
-          <!-- 右列 -->
-          <div class="right-column">
-            <div class="right-bottom">
-              <SupplyDemandData :force-expanded="false" @expand-change="handleSupplyExpand" />
-            </div>
-            <div class="right-middle">
-              <MarketRealtimeMonitor />
-            </div>
-            <div class="right-top">
-              <MarketEnvironmentMonitor />
-            </div>
-          </div>
-        </template>
       </div>
     </div>
 
-    <!-- 加载状态 -->
-    <div v-else class="loading-container">
-      <div class="loading-content">
-        <div class="loading-spinner"></div>
-        <div class="loading-text">正在初始化布局...</div>
-      </div>
-    </div>
+    <ScreenDecorations />
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import { configManager } from '../utils/config.js'
+import { loadSystemConfig } from '../utils/systemConfig.js'
 import { dataManager } from '../utils/dataManager.js'
 import { dataUpdater } from '../utils/dataUpdater.js'
 
@@ -120,40 +120,29 @@ import PurchaserAnalysis from '../components/PurchaserAnalysis.vue'
 import MarketEnvironmentMonitor from '../components/MarketEnvironmentMonitor.vue'
 import MarketRealtimeMonitor from '../components/MarketRealtimeMonitor.vue'
 import SupplyDemandData from '../components/SupplyDemandData.vue'
+import HeaderBar from '../components/HeaderBar.vue'
+import ScreenDecorations from '../components/ScreenDecorations.vue'
 
 // 响应式数据
 const config = ref(null)
-const currentTime = ref('')
+const systemConfig = ref({
+  title: '/标题.png',
+  titleBackground: '/images/标题背景.png'
+})
 const isLayoutReady = ref(false) // 控制页面渲染时机
 const isSupplyExpanded = ref(false) // 控制供应信息组件是否展开
 
-// 更新时间
-const updateTime = () => {
-  const now = new Date()
-  currentTime.value = now.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  })
-}
-
 // 处理供应信息组件展开/收缩
 const handleSupplyExpand = (expanded) => {
   isSupplyExpanded.value = expanded
 }
 
-// 初始化配置和时间
-let timeTimer = null
-
+// 初始化配置
 onMounted(async () => {
-  // 立即开始更新时间
-  updateTime()
-  timeTimer = setInterval(updateTime, 1000)
-
   try {
+    // 加载系统配置（标题栏）
+    systemConfig.value = await loadSystemConfig()
+
     // 加载配置
     console.log('Dashboard: 开始加载配置')
     config.value = await configManager.loadConfig()
@@ -182,6 +171,7 @@ onMounted(async () => {
     console.log('Dashboard 完全初始化完成')
   } catch (error) {
     console.error('Failed to initialize dashboard:', error)
+    systemConfig.value = await loadSystemConfig()
     // 使用默认配置
     config.value = configManager.getDefaultConfig()
     configManager.setCSSVariables()
@@ -192,12 +182,6 @@ onMounted(async () => {
     isLayoutReady.value = true
   }
 })
-
-onUnmounted(() => {
-  if (timeTimer) {
-    clearInterval(timeTimer)
-  }
-})
 </script>
 
 <style scoped>
@@ -207,44 +191,31 @@ onUnmounted(() => {
   height: var(--screen-height, 1440px);
   min-width: var(--screen-width, 5120px);
   min-height: var(--screen-height, 1440px);
+  --decor-offset-x: 16px;
   display: flex;
   flex-direction: column;
   padding: 20px;
-  background: 
-    radial-gradient(ellipse at 30% 40%, rgba(64, 158, 255, 0.06) 0%, transparent 60%),
-    radial-gradient(ellipse at 70% 60%, rgba(139, 92, 246, 0.05) 0%, transparent 60%),
-    radial-gradient(ellipse at 50% 80%, rgba(0, 212, 170, 0.03) 0%, transparent 50%),
-    linear-gradient(135deg, #0a0e1a 0%, #0f1419 25%, #131825 50%, #0f1419 75%, #0a0e1a 100%);
+  background: #0a0e1a;
   overflow: hidden;
   box-sizing: border-box;
   gap: 20px;
   position: relative;
 }
 
-.dashboard-container::before {
-  content: '';
+.dashboard-bg {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: 
-    linear-gradient(90deg, transparent 0%, rgba(64, 158, 255, 0.03) 50%, transparent 100%),
-    linear-gradient(0deg, transparent 0%, rgba(139, 92, 246, 0.03) 50%, transparent 100%),
-    radial-gradient(circle at 25% 25%, rgba(64, 158, 255, 0.05) 0%, transparent 50%),
-    radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
   pointer-events: none;
-  z-index: 1;
-  animation: backgroundShift 15s ease-in-out infinite;
+  user-select: none;
+  z-index: 0;
 }
 
-@keyframes backgroundShift {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.7;
-  }
+.dashboard-container > :not(.dashboard-bg) {
+  position: relative;
+  z-index: 1;
 }
 
 /* 响应式适配 - 针对4:1宽高比优化 */
@@ -262,77 +233,83 @@ onUnmounted(() => {
   }
 }
 
-/* 标题区域 */
-.header-section {
-  height: 84px;
+/* 正文区域 */
+.content-area {
+  flex: 1;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 40px;
-  background: url('../images/大标题背景.png') center/contain no-repeat;
-  background-size: auto 84px;
-  border-radius: 12px;
-  backdrop-filter: blur(10px);
+  flex-direction: column;
+  padding: 0 var(--decor-offset-x);
+  min-height: 0;
   position: relative;
-  z-index: 10;
-  flex-shrink: 0;
-  background-size: 100% 84px;
+  z-index: 2;
+  box-sizing: border-box;
 }
 
-.main-title {
-  font-size: 36px;
-  font-weight: 700;
-  background: linear-gradient(180deg, #fff 50%, #44c1ff);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  text-align: center;
-  letter-spacing: 3px;
-  text-shadow: 0 0 20px rgba(64, 158, 255, 0.5);
-  flex: 2;
+/* 主要内容区域 */
+.main-content {
+  flex: 1;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 15px;
-
+  gap: 16px;
+  min-height: 0;
+  min-width: 0;
+  padding-bottom: 20px;
+  position: relative;
+  box-sizing: border-box;
 }
 
-.header-info {
-  display: flex;
-  align-items: center;
-  gap: 24px;
+/* 左右侧背景面板（含装饰 + 统计模块） */
+.side-panel {
   flex: 1;
-
-  &.left {
-    justify-content: flex-start;
-  }
-
-  &.right {
-    justify-content: flex-end;
-  }
-}
-
-.info-item {
+  position: relative;
   display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: #a0a8b8;
+  align-items: stretch;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
 }
 
-.current-time {
-  font-family: 'Courier New', monospace;
-  font-weight: bold;
-  color: #409EFF;
+.side-panel-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+  pointer-events: none;
+  user-select: none;
+  z-index: 0;
 }
 
-/* 主要内容区域 */
-.main-content {
+.side-panel-body {
   flex: 1;
+  position: relative;
+  z-index: 1;
   display: flex;
-  gap: 16px;
+  min-width: 0;
   min-height: 0;
-  padding-bottom: 20px;
+  padding: 12px;
+  box-sizing: border-box;
+}
+
+.side-panel-left {
+  gap: var(--decor-offset-x);
+  padding-left: var(--decor-offset-x);
+}
+
+.side-panel-right {
+  gap: var(--decor-offset-x);
+  padding-right: var(--decor-offset-x);
+}
+
+.side-decor {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  width: auto;
+  flex-shrink: 0;
+  display: block;
+  object-fit: fill;
+  pointer-events: none;
+  user-select: none;
 }
 
 /* 左侧区域布局 */
@@ -341,6 +318,7 @@ onUnmounted(() => {
   display: flex;
   gap: 12px;
   min-width: 0;
+  min-height: 0;
 }
 
 .left-column {
@@ -400,6 +378,7 @@ onUnmounted(() => {
   display: flex;
   gap: 12px;
   min-width: 0;
+  min-height: 0;
 }
 
 .right-center-column {
@@ -440,6 +419,8 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+  min-height: 0;
+  min-width: 0;
 }
 
 .loading-content {
diff --git a/vite.config.js b/vite.config.js
index 4c6295c..e54bda8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,7 +5,14 @@ export default defineConfig({
   plugins: [vue()],
   server: {
     port: 3000,
-    open: true
+    open: true,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
   },
   css: {
     preprocessorOptions: {