diff --git a/admin/src/api/workbench.ts b/admin/src/api/workbench.ts
new file mode 100644
index 00000000..61ca314c
--- /dev/null
+++ b/admin/src/api/workbench.ts
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+/**
+ * 工作台相关API
+ */
+export const workbenchApi = {
+  /**
+   * 获取工作台数据
+   */
+  getWorkbenchData: () => {
+    return request.get({
+      url: '/workbench/index'
+    })
+  }
+}
diff --git a/admin/src/views/workbench/index.vue b/admin/src/views/workbench/index.vue
index c8ba1a28..6e7eca34 100644
--- a/admin/src/views/workbench/index.vue
+++ b/admin/src/views/workbench/index.vue
@@ -1,1243 +1,1420 @@
 <template>
-    <div class="workbench-page">
-        <header class="wb-hero">
-            <div class="wb-hero-text">
-                <h1 class="wb-hero-title">数据工作台</h1>
-                <p class="wb-hero-desc">医助诊单、订单营收与运营趋势一屏掌握</p>
-            </div>
-            <el-button type="primary" :icon="Refresh" round class="wb-refresh-btn" @click="refreshAll">
-                刷新全部
-            </el-button>
-        </header>
- <!-- 订单统计 -->
- <section class="wb-section wb-section--order">
-            <div class="wb-section-head">
-                <div class="wb-section-title">
-                    <span class="wb-section-icon wb-section-icon--violet">
-                        <el-icon><Histogram /></el-icon>
-                    </span>
-                    <div>
-                        <div class="wb-section-name">订单统计</div>
-                        <div class="wb-section-sub">{{ orderStatsDateRangeText }} · {{ orderStatsData.order_type_name || '—' }}</div>
+  <div class="app">
+    <!-- 主内容 -->
+    <main class="main">
+      <header class="topbar">
+        <div class="topbar-left">
+          <strong>{{ userName }}</strong>，早上好 · 今日是 {{ currentDate }}
+        </div>
+        <div class="topbar-right">
+          <div class="date-picker">📅 今日 · 刚刚刷新</div>
+          <div class="theme-switch">
+            <button class="theme-btn active" data-theme="light">☀️</button>
+            <button class="theme-btn" data-theme="dark">🌙</button>
+            <button class="theme-btn" data-theme="system">💻</button>
+          </div>
+          <div class="avatar">{{ userAvatar }}</div>
+        </div>
+      </header>
+
+      <div class="page">
+        <!-- 加载状态 -->
+        <div v-if="loading" class="loading-container">
+          <div class="loading-spinner"></div>
+          <div class="loading-text">数据加载中...</div>
+        </div>
+
+        <!-- 页头 -->
+        <div class="page-header" v-else>
+          <div class="page-header-content">
+            <div class="page-sub">实时掌握业务动态，一目了然看全局</div>
+            <button class="btn btn-refresh" @click="refreshAll">
+              🔄 刷新全部
+            </button>
+          </div>
+        </div>
+
+        <!-- 🎮 奖励金总览（游戏化） -->
+        <div class="rewards-hero" @click="showRewardsPopup">
+          <div class="rewards-inner">
+            <!-- 左：金额信息 -->
+            <div class="rewards-main">
+              <div class="rewards-label-row">
+                <span class="rewards-tag">💰 本月奖励金</span>
+                <span class="rewards-title">截止今日 {{ currentDate }} · 点击查看详情</span>
+              </div>
+              <div class="rewards-amount-wrap">
+                <span class="rewards-amount">{{ rewards.total }}</span>
+                <span class="rewards-unit">本月累计</span>
+                <!-- 昨日新增 -->
+                <div class="yesterday-bonus reward-highlight">
+                  <span class="yesterday-label">🎯 昨日新增</span>
+                  <span class="yesterday-value">
+                    <span class="bonus-arrow">↑</span>
+                    <span>{{ rewards.yesterday }}</span>
+                  </span>
+                  <span class="yesterday-sub">挂号奖¥{{ rewards.breakdown.registration }} + 业绩提成¥{{ rewards.breakdown.performance }}</span>
+                </div>
+              </div>
+              <!-- 奖励金构成 -->
+                <div class="rewards-content">
+                  <div class="rewards-bar">
+                    <div class="rewards-detail-item">
+                      <span class="rewards-dot gold"></span>挂号奖金 <b>¥{{ rewards.breakdown.registration }}</b>
                     </div>
-                </div>
-                <div class="wb-toolbar">
-                    <el-select v-model="orderStatsType" class="wb-select wb-select--wide" @change="loadOrderStats">
-                        <el-option label="全部（已支付）" :value="-1" />
-                        <el-option label="挂号费" :value="1" />
-                        <el-option label="问诊费" :value="2" />
-                        <el-option label="药品费用" :value="3" />
-                        <el-option label="首付费用" :value="4" />
-                        <el-option label="尾款费用" :value="5" />
-                        <el-option label="其他费用" :value="6" />
-                        <el-option label="退款统计" :value="0" />
-                    </el-select>
-                    <el-select v-model="orderStatsDays" class="wb-select" @change="loadOrderStats">
-                        <el-option label="今天" :value="0" />
-                        <el-option label="最近7天" :value="7" />
-                        <el-option label="最近30天" :value="30" />
-                    </el-select>
-                    <el-button :icon="Refresh" circle @click="loadOrderStats" />
-                </div>
-            </div>
-            <div class="wb-section-body">
-                <el-row :gutter="16" class="wb-kpi-row">
-                    <el-col :xs="24" :sm="8">
-                        <div class="wb-kpi wb-kpi--violet">
-                            <div class="wb-kpi-label">今日单数</div>
-                            <div class="wb-kpi-value">{{ orderStatsData.today_total ?? 0 }}</div>
-                        </div>
-                    </el-col>
-                    <el-col :xs="24" :sm="8">
-                        <div class="wb-kpi wb-kpi--amber">
-                            <div class="wb-kpi-label">今日金额</div>
-                            <div class="wb-kpi-value wb-kpi-value--sm">¥{{ orderStatsData.today_amount ?? '0.00' }}</div>
-                        </div>
-                    </el-col>
-                    <el-col :xs="24" :sm="8">
-                        <div class="wb-rank-strip wb-rank-strip--compact">
-                            <span class="wb-rank-strip-label">今日 TOP</span>
-                            <div v-if="orderStatsData.today_ranking?.length" class="wb-rank-chips">
-                                <span
-                                    v-for="(a, idx) in orderStatsData.today_ranking.slice(0, 4)"
-                                    :key="a.id"
-                                    class="wb-rank-chip wb-rank-chip--dense"
-                                >
-                                    <em>{{ Number(idx) + 1 }}</em>
-                                    {{ a.name }}
-                                    <strong>{{ a.count }}</strong>
-                                    <small>¥{{ a.amount }}</small>
-                                </span>
-                            </div>
-                            <span v-else class="wb-rank-empty">暂无</span>
-                        </div>
-                    </el-col>
-                </el-row>
-
-                <el-row :gutter="20" class="wb-chart-row">
-                    <el-col :xs="24" :lg="10">
-                        <div class="wb-chart-card">
-                            <div class="wb-chart-card-head">
-                                <span class="wb-chart-title">部门单数占比</span>
-                            </div>
-                            <v-charts
-                                v-if="orderDeptCountPieHasData"
-                                class="wb-chart"
-                                style="height: 300px"
-                                :option="orderDeptCountPieOption"
-                                :autoresize="true"
-                            />
-                            <el-empty v-else class="wb-chart-empty" description="暂无数据" />
-                        </div>
-                    </el-col>
-                    <el-col :xs="24" :lg="14">
-                        <div class="wb-chart-card">
-                            <div class="wb-chart-card-head">
-                                <span class="wb-chart-title">开单人 · 单数排行</span>
-                                <span class="wb-chart-hint">柱状 + 趋势</span>
-                            </div>
-                            <v-charts
-                                v-if="orderStatsData.chart?.xAxis?.length"
-                                :key="'order-bar-' + orderStatsType"
-                                class="wb-chart"
-                                style="height: 300px"
-                                :option="orderChartOption"
-                                :autoresize="true"
-                            />
-                            <el-empty v-else class="wb-chart-empty" description="暂无图表数据" />
-                        </div>
-                    </el-col>
-                </el-row>
-
-                <el-row :gutter="20" class="wb-chart-row">
-                    <el-col :xs="24" :lg="10">
-                        <div class="wb-chart-card">
-                            <div class="wb-chart-card-head">
-                                <span class="wb-chart-title">部门金额占比</span>
-                            </div>
-                            <v-charts
-                                v-if="orderDeptAmountPieHasData"
-                                class="wb-chart"
-                                style="height: 300px"
-                                :option="orderDeptAmountPieOption"
-                                :autoresize="true"
-                            />
-                            <el-empty v-else class="wb-chart-empty" description="暂无数据" />
-                        </div>
-                    </el-col>
-                    <el-col :xs="24" :lg="14">
-                        <div class="wb-chart-card wb-ranking-card">
-                            <div class="wb-chart-card-head">
-                                <span class="wb-chart-title">周期内排行</span>
-                                <span class="wb-chart-hint">单数 / 金额</span>
-                            </div>
-                            <div v-if="orderStatsData.ranking?.length" class="wb-ranking-list">
-                                <div
-                                    v-for="(a, idx) in orderStatsData.ranking"
-                                    :key="a.id"
-                                    class="wb-ranking-item"
-                                >
-                                    <span class="wb-ranking-rank">{{ Number(idx) + 1 }}</span>
-                                    <span class="wb-ranking-name">{{ a.name }}</span>
-                                    <span class="wb-ranking-meta">
-                                        <b>{{ a.count }}</b> 单
-                                        <span class="wb-ranking-money">¥{{ a.amount }}</span>
-                                    </span>
-                                </div>
-                            </div>
-                            <el-empty v-else description="暂无排行" />
-                        </div>
-                    </el-col>
-                </el-row>
-
-                <div v-if="orderStatsData.departments?.length" class="wb-dept-block">
-                    <div class="wb-dept-title">按部门统计</div>
-                    <el-row :gutter="16">
-                        <el-col
-                            v-for="dept in orderStatsData.departments"
-                            :key="dept.dept_id"
-                            :xs="24"
-                            :sm="12"
-                            :lg="8"
-                        >
-                            <div class="wb-dept-card wb-dept-card--order">
-                                <div class="wb-dept-card-head">
-                                    {{ dept.dept_name }}
-                                    <span class="wb-dept-total">{{ dept.total }} 单 · ¥{{ dept.amount }}</span>
-                                </div>
-                                <div class="wb-dept-list">
-                                    <div
-                                        v-for="m in dept.members"
-                                        :key="`${dept.dept_id}-${m.id}`"
-                                        class="wb-dept-row"
-                                    >
-                                        <span>{{ m.name }}</span>
-                                        <span class="wb-dept-num">{{ m.count }} <small>¥{{ m.amount }}</small></span>
-                                    </div>
-                                    <div v-if="!dept.members?.length" class="wb-dept-empty">暂无</div>
-                                </div>
-                            </div>
-                        </el-col>
-                    </el-row>
-                </div>
-            </div>
-        </section>
-        <!-- 医助理诊单 -->
-        <section class="wb-section wb-section--diagnosis">
-            <div class="wb-section-head">
-                <div class="wb-section-title">
-                    <span class="wb-section-icon wb-section-icon--blue">
-                        <el-icon><DataAnalysis /></el-icon>
-                    </span>
-                    <div>
-                        <div class="wb-section-name">医助理诊单统计</div>
-                        <div class="wb-section-sub">
-                            {{ assistantStats.date_range?.[0] }} 至 {{ assistantStats.date_range?.[1] }}
-                        </div>
+                    <div class="rewards-detail-item">
+                      <span class="rewards-dot green"></span>业绩提成 <b>¥{{ rewards.breakdown.performance }}</b>
                     </div>
-                </div>
-                <div class="wb-toolbar">
-                    <el-select v-model="assistantStats.days" class="wb-select" @change="loadAssistantStats">
-                        <el-option label="今天" :value="0" />
-                        <el-option label="最近7天" :value="7" />
-                        <el-option label="最近14天" :value="14" />
-                        <el-option label="最近30天" :value="30" />
-                    </el-select>
-                    <el-button :icon="Refresh" circle @click="loadAssistantStats" />
-                </div>
-            </div>
-            <div class="wb-section-body">
-                <el-row :gutter="16" class="wb-kpi-row">
-                    <el-col :xs="24" :sm="8" :lg="6">
-                        <div class="wb-kpi wb-kpi--blue">
-                            <div class="wb-kpi-label">今日创建诊单</div>
-                            <div class="wb-kpi-value">{{ assistantStats.today_total ?? 0 }}</div>
-                            <div class="wb-kpi-hint">当日新增总量</div>
-                        </div>
-                    </el-col>
-                    <el-col :xs="24" :sm="16" :lg="18">
-                        <div class="wb-rank-strip">
-                            <span class="wb-rank-strip-label">今日排行</span>
-                            <div v-if="assistantStats.today_ranking?.length" class="wb-rank-chips">
-                                <span
-                                    v-for="(a, idx) in assistantStats.today_ranking.slice(0, 6)"
-                                    :key="a.id"
-                                    class="wb-rank-chip"
-                                >
-                                    <em>{{ idx + 1 }}</em>
-                                    {{ a.name }}
-                                    <strong>{{ a.count }}</strong>
-                                </span>
-                            </div>
-                            <span v-else class="wb-rank-empty">暂无排行数据</span>
-                        </div>
-                    </el-col>
-                </el-row>
-
-                <el-row :gutter="20" class="wb-chart-row">
-                    <el-col :xs="24" :lg="15">
-                        <div class="wb-chart-card">
-                            <div class="wb-chart-card-head">
-                                <span class="wb-chart-title">诊单量分布</span>
-                                <span class="wb-chart-hint">柱状 + 趋势线</span>
-                            </div>
-                            <v-charts
-                                v-if="assistantStats.chart.xAxis?.length"
-                                ref="assistantChart"
-                                class="wb-chart"
-                                style="height: 340px"
-                                :option="assistantChartOption"
-                                :autoresize="true"
-                            />
-                            <el-empty v-else class="wb-chart-empty" description="暂无图表数据" />
-                        </div>
-                    </el-col>
-                    <el-col :xs="24" :lg="9">
-                        <div class="wb-chart-card">
-                            <div class="wb-chart-card-head">
-                                <span class="wb-chart-title">部门占比</span>
-                                <span class="wb-chart-hint">按诊单数</span>
-                            </div>
-                            <v-charts
-                                v-if="assistantDeptPieHasData"
-                                class="wb-chart"
-                                style="height: 340px"
-                                :option="assistantDeptPieOption"
-                                :autoresize="true"
-                            />
-                            <el-empty v-else class="wb-chart-empty" description="暂无部门数据" />
-                        </div>
-                    </el-col>
-                </el-row>
-
-                <div v-if="assistantStats.departments?.length" class="wb-dept-block">
-                    <div class="wb-dept-title">按部门明细</div>
-                    <el-row :gutter="16">
-                        <el-col
-                            v-for="dept in assistantStats.departments"
-                            :key="dept.dept_id"
-                            :xs="24"
-                            :sm="12"
-                            :lg="8"
-                        >
-                            <div class="wb-dept-card">
-                                <div class="wb-dept-card-head">
-                                    {{ dept.dept_name }}
-                                    <span class="wb-dept-total">共 {{ dept.total }}</span>
-                                </div>
-                                <div class="wb-dept-list">
-                                    <div
-                                        v-for="a in dept.assistants"
-                                        :key="`${dept.dept_id}-${a.id}`"
-                                        class="wb-dept-row"
-                                    >
-                                        <span>{{ a.name }}</span>
-                                        <span class="wb-dept-num">{{ a.count }}</span>
-                                    </div>
-                                    <div v-if="!dept.assistants?.length" class="wb-dept-empty">暂无医助</div>
-                                </div>
-                            </div>
-                        </el-col>
-                    </el-row>
-                </div>
-            </div>
-        </section>
-
-       
-
-        <!-- 访问 & 销售趋势 -->
-        <section class="wb-section wb-section--trend">
-            <div class="wb-section-head">
-                <div class="wb-section-title">
-                    <span class="wb-section-icon wb-section-icon--teal">
-                        <el-icon><TrendCharts /></el-icon>
-                    </span>
-                    <div>
-                        <div class="wb-section-name">运营趋势</div>
-                        <div class="wb-section-sub">访问量与销售额走势</div>
+                    <div class="rewards-detail-item">
+                      <span class="rewards-dot blue"></span>连击奖励 <b>¥{{ rewards.breakdown.combo }}</b>
                     </div>
+                    <div class="rewards-detail-item">
+                      <span class="rewards-dot purple"></span>达标奖励 <b>¥{{ rewards.breakdown.target }}</b>
+                    </div>
+                  </div>
+                  <!-- 奖励金构成饼图 -->
+                  <div class="rewards-chart">
+                    <v-chart
+                      class="chart"
+                      :option="rewardsChartOption"
+                      style="width: 200px; height: 200px"
+                    />
+                  </div>
                 </div>
             </div>
-            <div class="wb-section-body wb-trend-body">
-                <el-row :gutter="20">
-                    <el-col :xs="24" :lg="14">
-                        <div class="wb-chart-card wb-trend-card">
-                            <div class="wb-chart-card-head">
-                                <span class="wb-chart-title">访问量趋势</span>
-                            </div>
-                            <v-charts
-                                ref="visitorChart"
-                                class="wb-chart"
-                                style="height: 320px"
-                                :option="workbenchData.visitorOption"
-                                :autoresize="true"
-                            />
-                        </div>
-                    </el-col>
-                    <el-col :xs="24" :lg="10">
-                        <div class="wb-chart-card wb-trend-card">
-                            <div class="wb-chart-card-head">
-                                <span class="wb-chart-title">销售额趋势</span>
-                                <span class="wb-chart-hint">单位（万）</span>
-                            </div>
-                            <v-charts
-                                ref="saleChart"
-                                class="wb-chart"
-                                style="height: 320px"
-                                :option="workbenchData.saleOption"
-                                :autoresize="true"
-                            />
-                        </div>
-                    </el-col>
-                </el-row>
+
+            <!-- 右：金币动画 -->
+            <div class="rewards-icon-area">
+              <div class="coin-container">
+                <div class="coin-ring"></div>
+                <div class="coin-main">💰</div>
+                <div class="coin-particle"></div>
+                <div class="coin-particle"></div>
+                <div class="coin-particle"></div>
+                <div class="coin-particle"></div>
+              </div>
             </div>
-        </section>
+          </div>
+        </div>
+
+        <!-- 核心数据卡片 — 今日概览（果冻块样式） -->
+        <div class="stats-grid jelly-grid">
+          <!-- 今日挂号数 -->
+          <div class="stat-card jelly-card">
+            <div class="stat-icon blue">📋</div>
+            <div class="stat-value">{{ stats.todayRegistration }}<span class="unit">人</span></div>
+            <div class="stat-label">今日挂号数</div>
+            <div class="trend-row">
+              <span class="trend-badge trend-up">↑ {{ stats.registrationTrend }}%</span>
+            </div>
+            <div class="stat-compare">
+              <span>昨日 <strong class="compare-val">{{ stats.yesterdayRegistration }}</strong></span>
+              <span>| 7日日均 <strong class="compare-val">{{ stats.avg7DaysRegistration }}</strong></span>
+            </div>
+          </div>
+
+          <!-- 成交诊单 -->
+          <div class="stat-card jelly-card">
+            <div class="stat-icon green">✅</div>
+            <div class="stat-value">{{ stats.todayTransactions }}<span class="unit">单</span></div>
+            <div class="stat-label">成交诊单数</div>
+            <div class="trend-row">
+              <span class="trend-badge trend-up">↑ {{ stats.transactionTrend }}%</span>
+            </div>
+            <div class="stat-compare">
+              <span>昨日 <strong class="compare-val">{{ stats.yesterdayTransactions }}</strong></span>
+              <span>| 7日日均 <strong class="compare-val">{{ stats.avg7DaysTransactions }}</strong></span>
+            </div>
+          </div>
+
+          <!-- 进线量 -->
+          <div class="stat-card jelly-card">
+            <div class="stat-icon orange">📥</div>
+            <div class="stat-value">{{ stats.todayInflow }}<span class="unit">人</span></div>
+            <div class="stat-label">今日进线量</div>
+            <div class="trend-row">
+              <span class="trend-badge trend-up">↑ {{ stats.inflowTrend }}%</span>
+            </div>
+            <div class="stat-compare">
+              <span>昨日 <strong class="compare-val">{{ stats.yesterdayInflow }}</strong></span>
+              <span>| 7日日均 <strong class="compare-val">{{ stats.avg7DaysInflow }}</strong></span>
+            </div>
+          </div>
+
+          <!-- 挂号率 -->
+          <div class="stat-card jelly-card">
+            <div class="stat-icon purple">📈</div>
+            <div class="stat-value">{{ stats.registrationRate }}<span class="unit">%</span></div>
+            <div class="stat-label">挂号率</div>
+            <div class="trend-row">
+              <span class="trend-badge trend-up">↑ {{ stats.registrationRateTrend }}%</span>
+            </div>
+            <div class="stat-compare">
+              <span>昨日 <strong class="compare-val">{{ stats.yesterdayRegistrationRate }}%</strong></span>
+              <span>| 7日均 <strong class="compare-val">{{ stats.avg7DaysRegistrationRate }}%</strong></span>
+            </div>
+          </div>
+
+          <!-- 接诊率 -->
+          <div class="stat-card jelly-card">
+            <div class="stat-icon blue">🩺</div>
+            <div class="stat-value">{{ stats.receptionRate }}<span class="unit">%</span></div>
+            <div class="stat-label">接诊率</div>
+            <div class="trend-row">
+              <span class="trend-badge trend-down">↓ {{ stats.receptionRateTrend }}%</span>
+            </div>
+            <div class="stat-compare">
+              <span>昨日 <strong class="compare-val">{{ stats.yesterdayReceptionRate }}%</strong></span>
+              <span>| 7日均 <strong class="compare-val">{{ stats.avg7DaysReceptionRate }}%</strong></span>
+            </div>
+          </div>
+
+        </div>
+
+        <!-- 上半区：趋势图 + 排行榜 -->
+        <div class="grid-2col">
+          <!-- 左：近7日趋势（果冻卡片） -->
+          <div class="card jelly-card" style="grid-row:span 2;">
+            <div class="card-header">
+              <div class="card-title">📊 近7日数据趋势</div>
+              <div class="card-tabs">
+                <button class="card-tab active">全部</button>
+                <button class="card-tab">挂号</button>
+                <button class="card-tab">进线</button>
+              </div>
+            </div>
+            <div class="card-body">
+              <!-- ECharts 近7日趋势图 -->
+              <div style="height: 300px; margin-bottom: 20px;">
+                <v-chart
+                  class="chart"
+                  :option="trendChartOption"
+                  autoresize
+                />
+              </div>
+
+              <!-- 详细数据表 -->
+              <table class="trend-table" style="margin-top:20px">
+                <thead>
+                  <tr>
+                    <th>日期</th><th>进线量</th><th>挂号数</th><th>挂号率</th><th>成交</th><th>接诊率</th><th>环比</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(day, index) in trendData" :key="index">
+                    <td>{{ day.dateText }}</td>
+                    <td class="num">{{ day.inflow }}</td>
+                    <td class="num" :style="{ color: index === 0 ? 'var(--blue)' : '' }">
+                      {{ day.registration }}
+                      <span v-if="index === 0" style="font-size:10px;margin-left:4px">🔵</span>
+                    </td>
+                    <td class="num" :class="day.registrationRate > 13 ? 'num-up' : 'num-down'">
+                      {{ day.registrationRate }}%
+                    </td>
+                    <td class="num">{{ day.transactions }}</td>
+                    <td class="num">{{ day.receptionRate }}%</td>
+                    <td>
+                      <span class="trend-badge" :class="day.trend > 0 ? 'trend-up' : day.trend < 0 ? 'trend-down' : 'trend-flat'">
+                        {{ day.trend > 0 ? '↑' : day.trend < 0 ? '↓' : '—' }} {{ Math.abs(day.trend) }}%
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <!-- 右上：挂号排行榜 TOP3（果冻卡片） -->
+          <div class="card jelly-card">
+            <div class="card-header">
+              <div class="card-title">🏆 挂号排行榜 · 今日</div>
+              <span style="font-size:12px;color:var(--text-muted)">实时更新</span>
+            </div>
+            <div class="card-body" style="padding:12px 20px">
+              <ul class="rank-list">
+                <li class="rank-item" v-for="(item, index) in registrationRanking" :key="index">
+                  <div class="rank-num" :class="index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : index === 2 ? 'rank-3' : 'rank-n'">
+                    {{ index + 1 }}
+                  </div>
+                  <div class="rank-avatar" :style="{ background: item.avatarColor }">
+                    {{ item.name.charAt(0) }}
+                  </div>
+                  <div class="rank-info">
+                    <div class="rank-name">
+                      {{ item.name }} 
+                      <span :style="{ 
+                        fontSize: '10px', 
+                        background: item.group === 'A组' ? 'var(--blue-bg)' : 'var(--purple-light)',
+                        color: item.group === 'A组' ? 'var(--blue)' : 'var(--purple)',
+                        padding: '2px 6px',
+                        borderRadius: '4px',
+                        fontWeight: '600'
+                      }">
+                        {{ item.group }}
+                      </span>
+                    </div>
+                    <div class="rank-dept">今日目标 {{ item.target }} 人</div>
+                  </div>
+                  <div class="rank-score">{{ item.score }}</div>
+                  <div class="rank-trend" :class="item.trend > 0 ? 'up' : item.trend < 0 ? 'down' : 'flat'">
+                    {{ item.trend > 0 ? '↑' : item.trend < 0 ? '↓' : '→' }} {{ Math.abs(item.trend) }}
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- 右下：接诊排行榜 TOP3 + 个人目标（果冻卡片） -->
+          <div class="card jelly-card">
+            <div class="card-header">
+              <div class="card-title">💰 接诊业绩排行 · 今日</div>
+              <span style="font-size:12px;color:var(--text-muted)">单位：¥</span>
+            </div>
+            <div class="card-body" style="padding:12px 20px">
+              <ul class="rank-list">
+                <li class="rank-item" v-for="(item, index) in performanceRanking" :key="index">
+                  <div class="rank-num" :class="index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : index === 2 ? 'rank-3' : 'rank-n'">
+                    {{ index + 1 }}
+                  </div>
+                  <div class="rank-avatar" :style="{ background: item.avatarColor }">
+                    {{ item.name.charAt(0) }}
+                  </div>
+                  <div class="rank-info">
+                    <div class="rank-name">
+                      {{ item.name }} 
+                      <span :style="{ 
+                        fontSize: '10px', 
+                        background: item.group === 'A组' ? 'var(--blue-bg)' : 'var(--purple-light)',
+                        color: item.group === 'A组' ? 'var(--blue)' : 'var(--purple)',
+                        padding: '2px 6px',
+                        borderRadius: '4px',
+                        fontWeight: '600'
+                      }">
+                        {{ item.group }}
+                      </span>
+                    </div>
+                    <div class="rank-dept">成交 {{ item.transactions }} 单</div>
+                  </div>
+                  <div class="rank-score">¥{{ item.score }}</div>
+                  <div class="rank-trend" :class="item.trend > 0 ? 'up' : item.trend < 0 ? 'down' : 'flat'">
+                    {{ item.trend > 0 ? '↑' : item.trend < 0 ? '↓' : '→' }} {{ Math.abs(item.trend) }}%
+                  </div>
+                </li>
+              </ul>
+
+              <!-- 个人目标进度 - 果冻块样式 -->
+              <div class="goal-section jelly-section">
+                <div class="goal-header">
+                  <div class="goal-title">🎯 个人目标进度</div>
+                  <div class="goal-target">本月目标：¥15,000</div>
+                </div>
+                
+                <div class="goal-items-wrapper">
+                  <div class="goal-item jelly-block">
+                    <div class="goal-icon blue">💰</div>
+                    <div class="goal-label">
+                      <span class="goal-name">业绩目标</span>
+                      <span class="goal-pct">68%</span>
+                    </div>
+                    <div class="goal-track">
+                      <div class="goal-fill fill-blue" style="width: 68%"></div>
+                    </div>
+                  </div>
+                  
+                  <div class="goal-item jelly-block">
+                    <div class="goal-icon green">📋</div>
+                    <div class="goal-label">
+                      <span class="goal-name">挂号目标</span>
+                      <span class="goal-pct">75%</span>
+                    </div>
+                    <div class="goal-track">
+                      <div class="goal-fill fill-green" style="width: 75%"></div>
+                    </div>
+                  </div>
+                  
+                  <div class="goal-item jelly-block">
+                    <div class="goal-icon orange">🩺</div>
+                    <div class="goal-label">
+                      <span class="goal-name">接诊目标</span>
+                      <span class="goal-pct">60%</span>
+                    </div>
+                    <div class="goal-track">
+                      <div class="goal-fill fill-orange" style="width: 60%"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 下半区：部门对比（果冻卡片） -->
+        <div class="card jelly-card">
+          <div class="card-header">
+            <div class="card-title">📊 部门对比</div>
+          </div>
+          <div class="card-body">
+            <!-- 部门对比图表 -->
+            <div style="height: 300px; margin-bottom: 20px;">
+              <v-chart
+                class="chart"
+                :option="deptChartOption"
+                autoresize
+              />
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <!-- 奖励金弹窗 -->
+    <div class="rewards-popup-overlay" :class="{ show: showRewardsModal }" @click="closeRewardsPopup">
+      <div class="rewards-popup" @click.stop>
+        <div class="popup-coin">💰</div>
+        <div class="popup-title">本月奖励金详情</div>
+        <div class="popup-subtitle">截止今日 {{ currentDate }}</div>
+        <div class="popup-amount">{{ rewards.total }}<span class="unit">元</span></div>
+        <div class="popup-breakdown">
+          <div class="popup-row">
+            <span>挂号奖金</span>
+            <b>¥{{ rewards.breakdown.registration }}</b>
+          </div>
+          <div class="popup-row">
+            <span>业绩提成</span>
+            <b>¥{{ rewards.breakdown.performance }}</b>
+          </div>
+          <div class="popup-row">
+            <span>连击奖励</span>
+            <b>¥{{ rewards.breakdown.combo }}</b>
+          </div>
+          <div class="popup-row">
+            <span>达标奖励</span>
+            <b>¥{{ rewards.breakdown.target }}</b>
+          </div>
+          <div class="popup-row" style="border-top:1px solid var(--border-color);margin-top:8px;padding-top:8px;font-weight:700">
+            <span>总计</span>
+            <b>{{ rewards.total }}</b>
+          </div>
+        </div>
+        <button class="popup-close" @click="closeRewardsPopup">关闭</button>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup name="workbench">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import vCharts from 'vue-echarts'
-import { DataAnalysis, Histogram, Refresh, TrendCharts } from '@element-plus/icons-vue'
+import { computed, onMounted, reactive, ref, watch, nextTick } from 'vue'
+import { workbenchApi } from '@/api/workbench'
+import useUserStore from '@/stores/modules/user'
+import VChart from 'vue-echarts'
+import * as echarts from 'echarts'
+import { use } from 'echarts/core'
+import { BarChart, LineChart, PieChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent
+} from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
 
-import { getWorkbench } from '@/api/app'
-import { assistantDiagnosisStats } from '@/api/tcm'
-import { orderStats } from '@/api/order'
-import useSettingStore from '@/stores/modules/setting'
-import { useComponentRef } from '@/utils/getExposeType'
-import { calcColor } from '@/utils/util'
+// 注册 ECharts 组件
+use([
+  BarChart,
+  LineChart,
+  PieChart,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+])
 
-const settingStore = useSettingStore()
-const saleChart = useComponentRef(vCharts)
-const visitorChart = useComponentRef(vCharts)
-const assistantChart = useComponentRef(vCharts)
+// 状态管理
+const viewMode = ref('personal')
+const showRewardsModal = ref(false)
+const loading = ref(true)
 
-const pieColors = ['#5b7cfa', '#36cfc9', '#ffc53d', '#ff7a45', '#b37feb', '#597ef7', '#73d13d', '#ff85c0']
-
-function parseAmount(v: unknown): number {
-    if (v == null) return 0
-    const n = parseFloat(String(v).replace(/,/g, ''))
-    return Number.isFinite(n) ? n : 0
-}
-
-const assistantStats = reactive<{
-    days: number
-    date_range?: [string, string]
-    today_total?: number
-    today_ranking?: { id: number; name: string; count: number }[]
-    departments: any[]
-    ranking: { id: number; name: string; count: number }[]
-    chart: { xAxis: string[]; series: any[] }
-}>({
-    days: 0,
-    departments: [],
-    today_ranking: [],
-    ranking: [],
-    chart: { xAxis: [], series: [] }
+// 计算属性
+const currentDate = computed(() => {
+  const date = new Date()
+  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${['日', '一', '二', '三', '四', '五', '六'][date.getDay()]}`
 })
 
-const assistantDeptPieHasData = computed(() =>
-    (assistantStats.departments || []).some((d: any) => Number(d.total) > 0)
-)
+const userStore = useUserStore()
+const userName = computed(() => userStore.userInfo.name || '田梦艺')
+const userAvatar = computed(() => userStore.userInfo.name?.charAt(0) || '田')
 
-const assistantDeptPieOption = computed(() => {
-    const data = (assistantStats.departments || [])
-        .filter((d: any) => Number(d.total) > 0)
-        .map((d: any) => ({ name: d.dept_name || '—', value: Number(d.total) }))
-    return {
-        color: pieColors,
-        tooltip: { trigger: 'item', formatter: '{b}<br/>{c} 单 ({d}%)' },
-        legend: { type: 'scroll', bottom: 0, textStyle: { fontSize: 11 } },
-        series: [
-            {
-                name: '诊单',
-                type: 'pie',
-                radius: ['46%', '72%'],
-                center: ['50%', '46%'],
-                avoidLabelOverlap: true,
-                itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
-                label: { formatter: '{b}\n{c}' },
-                data
-            }
-        ]
-    }
+// 奖励金数据
+const rewards = reactive({
+  total: '¥0.00',
+  yesterday: '+¥0.00',
+  breakdown: {
+    registration: 0,
+    performance: 0,
+    combo: 0,
+    target: 0
+  }
 })
 
-const assistantChartOption = computed(() => {
-    const theme = settingStore.theme
-    const barSeries = (assistantStats.chart.series || []).map((s: any) => ({
-        ...s,
-        name: s.name || '诊单数',
-        type: 'bar',
-        barWidth: '46%',
-        itemStyle: {
-            borderRadius: [8, 8, 0, 0],
-            color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                    { offset: 0, color: calcColor(theme, 0.75) },
-                    { offset: 1, color: theme }
-                ]
-            }
+// 核心统计数据
+const stats = reactive({
+  // 今日挂号数
+  todayRegistration: 0,
+  yesterdayRegistration: 0,
+  avg7DaysRegistration: 0,
+  registrationTrend: 0,
+  
+  // 成交诊单
+  todayTransactions: 0,
+  yesterdayTransactions: 0,
+  avg7DaysTransactions: 0,
+  transactionTrend: 0,
+  
+  // 进线量
+  todayInflow: 0,
+  yesterdayInflow: 0,
+  avg7DaysInflow: 0,
+  inflowTrend: 0,
+  
+  // 挂号率
+  registrationRate: 0,
+  yesterdayRegistrationRate: 0,
+  avg7DaysRegistrationRate: 0,
+  registrationRateTrend: 0,
+  
+  // 接诊率
+  receptionRate: 0,
+  yesterdayReceptionRate: 0,
+  avg7DaysReceptionRate: 0,
+  receptionRateTrend: 0
+})
+
+// 近7日趋势数据
+const trendData = reactive([
+  {
+    date: '',
+    dateText: '',
+    inflow: 0,
+    registration: 0,
+    registrationRate: 0,
+    transactions: 0,
+    receptionRate: 0,
+    trend: 0,
+    inflowHeight: 0,
+    registrationHeight: 0
+  }
+])
+
+// 挂号排行榜数据
+const registrationRanking = reactive([
+  {
+    name: '',
+    group: '',
+    target: 0,
+    score: 0,
+    trend: 0,
+    avatarColor: ''
+  }
+])
+
+// 业绩排行榜数据
+const performanceRanking = reactive([
+  {
+    name: '',
+    group: '',
+    transactions: 0,
+    score: 0,
+    trend: 0,
+    avatarColor: ''
+  }
+])
+
+// 部门数据
+const departments = reactive([
+  {
+    id: 0,
+    name: '',
+    level: '',
+    registration: 0,
+    performance: 0,
+    conversionRate: 0,
+    rank: 0
+  }
+])
+
+// 近7日趋势图表配置
+const trendChartOption = computed(() => {
+  // 提取日期和数据
+  const dates = trendData.map(item => item.date)
+  const inflowData = trendData.map(item => item.inflow)
+  const registrationData = trendData.map(item => item.registration)
+  const registrationRateData = trendData.map(item => item.registrationRate)
+  
+  return {
+    title: {
+      text: '近7日数据趋势',
+      left: 'center',
+      textStyle: {
+        fontSize: 14,
+        fontWeight: 'normal'
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#999'
         }
-    }))
-    const lineData = (barSeries[0] as any)?.data || []
-    return {
-        color: [theme, '#f0b429'],
-        legend: { data: ['诊单数', '趋势'], top: 4 },
-        xAxis: {
-            type: 'category',
-            data: assistantStats.chart.xAxis || [],
-            axisLabel: { rotate: 28, fontSize: 11 },
-            axisLine: { lineStyle: { color: '#e4e7ec' } }
-        },
-        yAxis: {
-            type: 'value',
-            name: '诊单数',
-            splitLine: { lineStyle: { type: 'dashed', color: '#eef0f4' } }
-        },
-        tooltip: { trigger: 'axis' },
-        grid: { left: '2%', right: '2%', bottom: '12%', top: 48, containLabel: true },
-        series: [
-            ...barSeries,
-            {
-                name: '趋势',
-                type: 'line',
-                smooth: 0.35,
-                symbol: 'circle',
-                symbolSize: 7,
-                lineStyle: { width: 3, color: '#f0b429' },
-                itemStyle: { color: '#f0b429' },
-                data: lineData
-            }
-        ]
-    }
-})
-
-const loadAssistantStats = () => {
-    assistantDiagnosisStats({ days: assistantStats.days })
-        .then((res: any) => {
-            assistantStats.date_range = res.date_range
-            assistantStats.today_total = res.today_total ?? 0
-            assistantStats.today_ranking = res.today_ranking || []
-            assistantStats.departments = res.departments || []
-            assistantStats.ranking = res.ranking || []
-            assistantStats.chart = res.chart || { xAxis: [], series: [] }
-        })
-        .catch(() => {})
-}
-
-const orderStatsType = ref(-1)
-const orderStatsDays = ref(0)
-const orderStatsData = reactive<any>({
-    order_type_name: '',
-    date_range: [] as string[],
-    today_total: 0,
-    today_amount: '0.00',
-    today_ranking: [],
-    departments: [],
-    ranking: [],
-    chart: { xAxis: [], series: [] }
-})
-
-const orderDeptCountPieHasData = computed(() =>
-    (orderStatsData.departments || []).some((d: any) => Number(d.total) > 0)
-)
-const orderDeptAmountPieHasData = computed(() =>
-    (orderStatsData.departments || []).some((d: any) => parseAmount(d.amount) > 0)
-)
-
-const orderDeptCountPieOption = computed(() => {
-    const data = (orderStatsData.departments || [])
-        .filter((d: any) => Number(d.total) > 0)
-        .map((d: any) => ({ name: d.dept_name || '—', value: Number(d.total) }))
-    return {
-        color: pieColors,
-        tooltip: { trigger: 'item', formatter: '{b}<br/>{c} 单 ({d}%)' },
-        legend: { type: 'scroll', bottom: 0, textStyle: { fontSize: 11 } },
-        series: [
-            {
-                name: '单数',
-                type: 'pie',
-                radius: ['44%', '70%'],
-                center: ['50%', '46%'],
-                itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
-                label: { formatter: '{b}\n{c}' },
-                data
-            }
-        ]
-    }
-})
-
-const orderDeptAmountPieOption = computed(() => {
-    const data = (orderStatsData.departments || [])
-        .map((d: any) => ({ name: d.dept_name || '—', value: parseAmount(d.amount) }))
-        .filter((d) => d.value > 0)
-    return {
-        color: pieColors,
-        tooltip: {
-            trigger: 'item',
-            formatter: (p: any) => {
-                const v = p.value
-                return `${p.name}<br/>¥${Number(v).toFixed(2)} (${p.percent}%)`
-            }
-        },
-        legend: { type: 'scroll', bottom: 0, textStyle: { fontSize: 11 } },
-        series: [
-            {
-                name: '金额',
-                type: 'pie',
-                radius: ['44%', '70%'],
-                center: ['50%', '46%'],
-                itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
-                label: { formatter: (p: any) => `${p.name}\n¥${Number(p.value).toFixed(0)}` },
-                data
-            }
-        ]
-    }
-})
-
-const orderStatsDateRangeText = computed(() => {
-    const arr = orderStatsData.date_range
-    if (arr?.length >= 2) return `${arr[0]} 至 ${arr[1]}`
-    const days = orderStatsDays.value
-    const end = new Date()
-    const start = new Date()
-    if (days === 0) {
-        start.setHours(0, 0, 0, 0)
-        return `${formatDate(start)} 至 ${formatDate(end)}`
-    }
-    start.setDate(start.getDate() - (days || 7))
-    return `${formatDate(start)} 至 ${formatDate(end)}`
-})
-
-function formatDate(d: Date) {
-    return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
-}
-
-const orderChartOption = computed(() => {
-    const theme = settingStore.theme
-    const barSeries = (orderStatsData.chart?.series || []).map((s: any) => ({
-        ...s,
-        name: s.name || '单数',
-        type: 'bar',
-        barWidth: '46%',
-        itemStyle: {
-            borderRadius: [8, 8, 0, 0],
-            color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                    { offset: 0, color: calcColor(theme, 0.72) },
-                    { offset: 1, color: theme }
-                ]
-            }
+      }
+    },
+    legend: {
+      data: ['进线量', '挂号数', '挂号率'],
+      bottom: 0
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: dates,
+        axisPointer: {
+          type: 'shadow'
         }
-    }))
-    const lineData = (barSeries[0] as any)?.data || []
-    return {
-        color: [theme, '#fa8c16'],
-        legend: { data: ['单数', '趋势'], top: 4 },
-        xAxis: {
-            type: 'category',
-            data: orderStatsData.chart?.xAxis || [],
-            axisLabel: { rotate: 28, fontSize: 11 },
-            axisLine: { lineStyle: { color: '#e4e7ec' } }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '数量',
+        min: 0,
+        axisLabel: {
+          formatter: '{value}'
+        }
+      },
+      {
+        type: 'value',
+        name: '率',
+        min: 0,
+        max: 100,
+        axisLabel: {
+          formatter: '{value}%'
+        }
+      }
+    ],
+    series: [
+      {
+        name: '进线量',
+        type: 'bar',
+        data: inflowData,
+        itemStyle: {
+          color: '#2563eb'
+        }
+      },
+      {
+        name: '挂号数',
+        type: 'bar',
+        data: registrationData,
+        itemStyle: {
+          color: '#10b981'
+        }
+      },
+      {
+        name: '挂号率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: registrationRateData,
+        itemStyle: {
+          color: '#f59e0b'
         },
-        yAxis: {
-            type: 'value',
-            name: '单数',
-            splitLine: { lineStyle: { type: 'dashed', color: '#eef0f4' } }
+        lineStyle: {
+          width: 2
         },
-        tooltip: { trigger: 'axis' },
-        grid: { left: '2%', right: '2%', bottom: '12%', top: 48, containLabel: true },
-        series: [
-            ...barSeries,
-            {
-                name: '趋势',
-                type: 'line',
-                smooth: 0.35,
-                symbol: 'circle',
-                symbolSize: 7,
-                lineStyle: { width: 3, color: '#fa8c16' },
-                itemStyle: { color: '#fa8c16' },
-                data: lineData
-            }
-        ]
-    }
+        symbol: 'circle',
+        symbolSize: 6
+      }
+    ]
+  }
 })
 
-const loadOrderStats = () => {
-    orderStats({ order_type: orderStatsType.value, days: orderStatsDays.value })
-        .then((res: any) => {
-            Object.assign(orderStatsData, {
-                order_type_name: res.order_type_name ?? '',
-                date_range: res.date_range || [],
-                today_total: res.today_total ?? 0,
-                today_amount: res.today_amount ?? '0.00',
-                today_ranking: res.today_ranking || [],
-                departments: res.departments || [],
-                ranking: res.ranking || [],
-                chart: res.chart || { xAxis: [], series: [] }
-            })
-        })
-        .catch(() => {})
-}
+// 奖励金构成饼图配置
+const rewardsChartOption = computed(() => {
+  const breakdown = rewards.breakdown
+  const data = [
+    { value: breakdown.registration, name: '挂号奖金' },
+    { value: breakdown.performance, name: '业绩提成' },
+    { value: breakdown.combo, name: '连击奖励' },
+    { value: breakdown.target, name: '达标奖励' }
+  ]
+  
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+      textStyle: {
+        color: 'rgba(255, 255, 255, 0.7)'
+      }
+    },
+    series: [
+      {
+        name: '奖励金构成',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#1a1a2e',
+          borderWidth: 2
+        },
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '14',
+            fontWeight: 'bold',
+            color: '#fff'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: data,
+        color: [
+          '#fbbf24', // 金色 - 挂号奖金
+          '#10b981', // 绿色 - 业绩提成
+          '#2563eb', // 蓝色 - 连击奖励
+          '#8b5cf6'  // 紫色 - 达标奖励
+        ]
+      }
+    ]
+  }
+})
 
+// 部门对比图表配置
+const deptChartOption = computed(() => {
+  const deptNames = departments.map(dept => dept.name)
+  const registrationData = departments.map(dept => dept.registration)
+  const performanceData = departments.map(dept => dept.performance)
+  const conversionRateData = departments.map(dept => dept.conversionRate)
+  
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: {
+      data: ['挂号数', '业绩', '成交率'],
+      bottom: 0
+    },
+    xAxis: {
+      type: 'category',
+      data: deptNames,
+      axisLabel: {
+        rotate: 45
+      }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '数量/业绩',
+        min: 0,
+        axisLabel: {
+          formatter: '{value}'
+        }
+      },
+      {
+        type: 'value',
+        name: '成交率',
+        min: 0,
+        max: 100,
+        axisLabel: {
+          formatter: '{value}%'
+        }
+      }
+    ],
+    series: [
+      {
+        name: '挂号数',
+        type: 'bar',
+        data: registrationData,
+        itemStyle: {
+          color: '#2563eb'
+        }
+      },
+      {
+        name: '业绩',
+        type: 'bar',
+        data: performanceData,
+        itemStyle: {
+          color: '#10b981'
+        }
+      },
+      {
+        name: '成交率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: conversionRateData,
+        itemStyle: {
+          color: '#f59e0b'
+        },
+        lineStyle: {
+          width: 2
+        },
+        symbol: 'circle',
+        symbolSize: 6
+      }
+    ]
+  }
+})
+
+// 方法
 const refreshAll = () => {
-    getData()
-    loadAssistantStats()
-    loadOrderStats()
+  // 刷新数据
+  loadWorkbenchData()
 }
 
-watch(
-    () => settingStore.theme,
-    () => {
-        updateColor()
+const showRewardsPopup = () => {
+  showRewardsModal.value = true
+}
+
+const closeRewardsPopup = () => {
+  showRewardsModal.value = false
+}
+
+// 加载工作台数据
+const loadWorkbenchData = async () => {
+  loading.value = true
+  try {
+    // 确保用户信息已加载
+    if (!userStore.userInfo.name) {
+      await userStore.getUserInfo()
     }
-)
-
-const workbenchData: any = reactive({
-    version: {
-        version: '',
-        website: '',
-        based: '',
-        channel: { gitee: '', website: '' }
-    },
-    support: [],
-    today: {},
-    menu: [],
-    visitor: [],
-    article: [],
-    visitorOption: {
-        xAxis: { type: 'category', data: [] },
-        yAxis: { type: 'value' },
-        legend: { data: ['访问量'], top: 8 },
-        tooltip: { trigger: 'axis' },
-        grid: { left: '2%', right: '3%', bottom: '3%', top: 40, containLabel: true },
-        series: [
-            {
-                name: '访问量',
-                data: [],
-                type: 'line',
-                smooth: true,
-                color: settingStore.theme,
-                lineStyle: { color: settingStore.theme, width: 2 },
-                areaStyle: {
-                    color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                            { offset: 0, color: settingStore.theme },
-                            { offset: 1, color: settingStore.theme }
-                        ]
-                    },
-                    opacity: 0.12
-                }
-            }
-        ]
-    },
-    saleOption: {
-        xAxis: { type: 'category', data: [] },
-        yAxis: { type: 'value', name: '万' },
-        tooltip: { trigger: 'axis' },
-        grid: { left: '2%', right: '3%', bottom: '3%', top: 36, containLabel: true },
-        series: [
-            {
-                name: '销售量',
-                data: [],
-                type: 'bar',
-                showBackground: true,
-                backgroundStyle: { color: 'rgba(120, 130, 150, 0.08)', borderRadius: [10, 10, 0, 0] },
-                barWidth: '42%',
-                itemStyle: {
-                    borderRadius: [10, 10, 0, 0],
-                    color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                            { offset: 0, color: calcColor(settingStore.theme, 0.65) },
-                            { offset: 1, color: settingStore.theme }
-                        ]
-                    }
-                }
-            }
-        ]
+    
+    const res = await workbenchApi.getWorkbenchData()
+    console.log('工作台数据:', res)
+    
+    // 处理返回的数据
+    if (res) {
+      // 奖励金数据
+      if (res.rewards) {
+        rewards.total = res.rewards.total
+        rewards.yesterday = res.rewards.yesterday
+        rewards.breakdown.registration = res.rewards.breakdown.registration
+        rewards.breakdown.performance = res.rewards.breakdown.performance
+        rewards.breakdown.combo = res.rewards.breakdown.combo
+        rewards.breakdown.target = res.rewards.breakdown.target
+      }
+      
+      // 核心统计数据
+      if (res.stats) {
+        stats.todayRegistration = res.stats.todayRegistration || 0
+        stats.yesterdayRegistration = res.stats.yesterdayRegistration || 0
+        stats.avg7DaysRegistration = res.stats.avg7DaysRegistration || 0
+        stats.registrationTrend = res.stats.registrationTrend || 0
+        stats.todayTransactions = res.stats.todayTransactions || 0
+        stats.yesterdayTransactions = res.stats.yesterdayTransactions || 0
+        stats.avg7DaysTransactions = res.stats.avg7DaysTransactions || 0
+        stats.transactionTrend = res.stats.transactionTrend || 0
+        stats.todayInflow = res.stats.todayInflow || 0
+        stats.yesterdayInflow = res.stats.yesterdayInflow || 0
+        stats.avg7DaysInflow = res.stats.avg7DaysInflow || 0
+        stats.inflowTrend = res.stats.inflowTrend || 0
+        stats.registrationRate = res.stats.registrationRate || 0
+        stats.yesterdayRegistrationRate = res.stats.yesterdayRegistrationRate || 0
+        stats.avg7DaysRegistrationRate = res.stats.avg7DaysRegistrationRate || 0
+        stats.registrationRateTrend = res.stats.registrationRateTrend || 0
+        stats.receptionRate = res.stats.receptionRate || 0
+        stats.yesterdayReceptionRate = res.stats.yesterdayReceptionRate || 0
+        stats.avg7DaysReceptionRate = res.stats.avg7DaysReceptionRate || 0
+        stats.receptionRateTrend = res.stats.receptionRateTrend || 0
+      }
+      
+      // 近7日趋势数据
+      if (res.trendData && Array.isArray(res.trendData)) {
+        trendData.splice(0, trendData.length)
+        res.trendData.forEach(item => {
+          trendData.push(item)
+        })
+      }
+      
+      // 挂号排行榜数据
+      if (res.registrationRanking && Array.isArray(res.registrationRanking)) {
+        registrationRanking.splice(0, registrationRanking.length)
+        res.registrationRanking.forEach(item => {
+          registrationRanking.push(item)
+        })
+      }
+      
+      // 业绩排行榜数据
+      if (res.performanceRanking && Array.isArray(res.performanceRanking)) {
+        performanceRanking.splice(0, performanceRanking.length)
+        res.performanceRanking.forEach(item => {
+          performanceRanking.push(item)
+        })
+      }
+      
+      // 部门数据
+      if (res.departments && Array.isArray(res.departments)) {
+        departments.splice(0, departments.length)
+        res.departments.forEach(item => {
+          departments.push(item)
+        })
+      }
     }
-})
-
-const getData = () => {
-    getWorkbench()
-        .then((res: any) => {
-            workbenchData.version = res.version
-            workbenchData.today = res.today
-            workbenchData.menu = res.menu
-            workbenchData.visitor = res.visitor
-            workbenchData.support = res.support
-
-            workbenchData.visitorOption.xAxis.data = []
-            workbenchData.visitorOption.series[0].data = []
-            workbenchData.saleOption.xAxis.data = []
-            workbenchData.saleOption.series[0].data = []
-
-            res.visitor?.date?.reverse().forEach((item: any) => {
-                workbenchData.visitorOption.xAxis.data.push(item)
-            })
-            res.visitor?.list?.[0]?.data?.forEach((item: any) => {
-                workbenchData.visitorOption.series[0].data.push(item)
-            })
-            res.sale?.date?.reverse().forEach((item: any) => {
-                workbenchData.saleOption.xAxis.data.push(item)
-            })
-            res.sale?.list?.[0]?.data?.forEach((item: any) => {
-                let v: any = item
-                if (item <= 50) {
-                    v = {
-                        value: item,
-                        itemStyle: {
-                            color: {
-                                type: 'linear',
-                                x: 0,
-                                y: 0,
-                                x2: 0,
-                                y2: 1,
-                                colorStops: [
-                                    { offset: 0, color: calcColor('#ff8729', 0.7) },
-                                    { offset: 1, color: '#ff8729' }
-                                ]
-                            }
-                        }
-                    }
-                }
-                workbenchData.saleOption.series[0].data.push(v)
-            })
-        })
-        .catch((err: any) => {
-            console.log('err', err)
-        })
-}
-
-const updateColor = () => {
-    const t = settingStore.theme
-    workbenchData.visitorOption.series[0].color = t
-    workbenchData.visitorOption.series[0].lineStyle.color = t
-    workbenchData.visitorOption.series[0].areaStyle.color.colorStops = [
-        { offset: 0, color: t },
-        { offset: 1, color: t }
-    ]
-    workbenchData.saleOption.series[0].itemStyle.color.colorStops = [
-        { offset: 0, color: calcColor(t, 0.65) },
-        { offset: 1, color: t }
-    ]
-
-    saleChart.value?.clear()
-    visitorChart.value?.clear()
-    saleChart.value?.setOption(workbenchData.saleOption)
-    visitorChart.value?.setOption(workbenchData.visitorOption)
+  } catch (error) {
+    console.error('获取工作台数据失败:', error)
+  } finally {
+    loading.value = false
+  }
 }
 
+// 生命周期
 onMounted(() => {
-    getData()
-    loadAssistantStats()
-    loadOrderStats()
+  // 初始化数据
+  loadWorkbenchData()
 })
 </script>
 
 <style lang="scss" scoped>
-.workbench-page {
-    min-height: 100%;
-    padding: 20px 20px 40px;
-    background: linear-gradient(160deg, #eef2ff 0%, #f8fafc 38%, #f1f5f9 100%);
+/* ========================================
+   设计系统 - 甄养堂数据工作台
+   配色：主蓝 #2563eb | 成功绿 #10b981 | 警示橙 #f59e0b
+   风格：干净、专业、信息密度高但不拥挤
+   ======================================== */
+
+:root {
+  --bg-primary: #f0f2f5;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #f7f8fa;
+  --bg-card: #ffffff;
+  --text-primary: #1a1a2e;
+  --text-secondary: #64748b;
+  --text-muted: #94a3b8;
+  --border-color: #e5e7eb;
+  --border-light: #f0f0f0;
+
+  /* 三色系统 */
+  --blue: #2563eb;       --blue-light: #eff6ff;  --blue-bg: #dbeafe;
+  --green: #10b981;      --green-light: #ecfdf5; --green-bg: #d1fae5;
+  --orange: #f59e0b;     --orange-light: #fffbeb;--orange-bg: #fef3c7;
+  --red: #ef4444;        --red-light: #fef2f2;   --red-bg: #fee2e2;
+  --purple: #8b5cf6;     --purple-light: #f5f3ff;
+
+  /* 排行 */
+  --gold: #fbbf24;       --silver: #d1d5db;      --bronze: #cd7c3a;
+
+  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
+  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
+
+  font-size: 14px;
+  --space-xs:4px; --space-s:8px; --space-m:12px;
+  --space-l:16px; --space-xl:20px; --space-xxl:28px; --space-3xl:40px;
+  --radius:10px; --radius-sm:6px; --radius-lg:16px;
 }
 
-.wb-hero {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    margin-bottom: 22px;
-    padding: 22px 26px;
-    border-radius: 20px;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.65) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.95);
-    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
+/* ========== 布局 ========== */
+.app{display:flex;min-height:100vh}
+.main{flex:1;min-width:0}
+.topbar{height:60px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50}
+.topbar-left{font-size:13px;color:var(--text-muted)}
+.topbar-left strong{color:var(--text-primary);font-weight:600}
+.topbar-right{display:flex;align-items:center;gap:12px}
+
+/* 日期选择器模拟 */
+.date-picker{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:all .15s}
+.date-picker:hover{border-color:var(--blue)}
+
+/* 主题切换 */
+.theme-switch{display:flex;gap:2px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:20px;padding:3px}
+.theme-btn{padding:5px 12px;border-radius:17px;font-size:12px;font-weight:500;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .2s}
+.theme-btn.active{background:var(--blue);color:white;box-shadow:0 2px 6px rgba(37,99,235,.25)}
+
+.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#60a5fa);display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:13px;cursor:pointer}
+
+.page{padding:24px;max-width:1440px;width:100%;margin:0 auto}
+
+/* ========== 页头 ========== */
+.page-header{margin-bottom:24px}
+.page-header-content{display:flex;align-items:center;justify-content:space-between}
+.page-sub{font-size:16px;font-weight:600;color:var(--text-primary);margin:0}
+
+.btn{
+  padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;
+  border:none;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px
+}
+.btn-primary{background:var(--blue);color:white}
+.btn-primary:hover{background:#1d4ed8;box-shadow:0 2px 8px rgba(37,99,235,.3)}
+.btn-outline{background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-color)}
+.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
+.btn-refresh{background:var(--green);color:white}
+.btn-refresh:hover{background:#059669;box-shadow:0 2px 8px rgba(16,185,129,.3)}
+
+/* ========== 核心数据卡片（果冻块样式） ========== */
+.jelly-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px}
+
+.jelly-card{
+  background:linear-gradient(145deg,#ffffff,#f8f9fa);
+  border-radius:20px;
+  padding:20px;
+  border:1px solid rgba(255,255,255,0.8);
+  box-shadow:
+    6px 6px 16px rgba(0,0,0,0.07),
+    -3px -3px 12px rgba(255,255,255,0.9),
+    inset 0 0 0 1px rgba(255,255,255,0.5);
+  transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  position:relative;
+  overflow:hidden;
+  animation:jellyCardFloat 4s ease-in-out infinite;
+}
+.jelly-card::before{
+  content:'';
+  position:absolute;
+  top:0;left:0;right:0;height:40%;
+  background:linear-gradient(180deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%);
+  border-radius:20px 20px 0 0;
+  pointer-events:none
+}
+.jelly-card:hover{
+  transform:translateY(-6px) scale(1.03);
+  box-shadow:
+    10px 16px 32px rgba(0,0,0,0.1),
+    -4px -4px 16px rgba(255,255,255,0.95),
+    inset 0 0 0 1px rgba(255,255,255,0.8);
+}
+.jelly-card:nth-child(1){animation-delay:0s}
+.jelly-card:nth-child(2){animation-delay:0.3s}
+.jelly-card:nth-child(3){animation-delay:0.6s}
+.jelly-card:nth-child(4){animation-delay:0.9s}
+.jelly-card:nth-child(5){animation-delay:1.2s}
+
+@keyframes jellyCardFloat{
+  0%,100%{transform:translateY(0)}
+  50%{transform:translateY(-4px)}
 }
 
-.wb-hero-title {
-    margin: 0 0 6px;
-    font-size: 26px;
-    font-weight: 700;
-    letter-spacing: 0.02em;
-    color: #0f172a;
+.jelly-card .stat-icon{
+  width:48px;height:48px;border-radius:14px;
+  display:flex;align-items:center;justify-content:center;
+  font-size:22px;margin-bottom:14px;
+  box-shadow:0 4px 12px rgba(0,0,0,0.1)
+}
+.jelly-card .stat-icon.blue{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
+.jelly-card .stat-icon.green{background:linear-gradient(135deg,#d1fae5,#a7f3d0)}
+.jelly-card .stat-icon.orange{background:linear-gradient(135deg,#fef3c7,#fde68a)}
+.jelly-card .stat-icon.red{background:linear-gradient(135deg,#fee2e2,#fecaca)}
+.jelly-card .stat-icon.purple{background:linear-gradient(135deg,#f5f3ff,#ede9fe)}
+
+.jelly-card .stat-value{font-size:32px;font-weight:800;line-height:1.1;color:var(--text-primary);margin-bottom:6px}
+.jelly-card .stat-value .unit{font-size:15px;font-weight:600;color:var(--text-muted);margin-left:2px}
+.jelly-card .stat-label{font-size:14px;color:var(--text-secondary);margin-bottom:12px;font-weight:500}
+
+/* 趋势对比条 */
+.trend-row{display:flex;align-items:center;gap:8px}
+.trend-badge{padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:3px}
+.trend-up{background:var(--green-bg);color:#059669}
+.trend-down{background:var(--red-bg);color:#dc2626}
+.trend-flat{background:var(--bg-tertiary);color:var(--text-muted)}
+
+.stat-compare{font-size:12px;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:4px 12px}
+.stat-compare span{display:inline-flex;align-items:center;gap:3px}
+.compare-val{font-weight:600;color:var(--text-primary)}
+
+/* ========== 双列布局 ========== */
+.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
+
+.card{
+  background:linear-gradient(145deg,#ffffff,#f8f9fa);
+  border-radius:20px;
+  border:1px solid rgba(255,255,255,0.8);
+  box-shadow:
+    6px 6px 16px rgba(0,0,0,0.07),
+    -3px -3px 12px rgba(255,255,255,0.9),
+    inset 0 0 0 1px rgba(255,255,255,0.5);
+  overflow:hidden;
+  transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.card:hover{
+  transform:translateY(-4px);
+  box-shadow:
+    10px 16px 32px rgba(0,0,0,0.1),
+    -4px -4px 16px rgba(255,255,255,0.95),
+    inset 0 0 0 1px rgba(255,255,255,0.8);
 }
 
-.wb-hero-desc {
-    margin: 0;
-    font-size: 14px;
-    color: #64748b;
+.jelly-card{
+  animation:jellyCardFloat 4s ease-in-out infinite;
+}
+.jelly-card:nth-child(1){animation-delay:0s}
+.jelly-card:nth-child(2){animation-delay:0.3s}
+.jelly-card:nth-child(3){animation-delay:0.6s}
+.jelly-card:nth-child(4){animation-delay:0.9s}
+.jelly-card:nth-child(5){animation-delay:1.2s}
+.card-header{
+  display:flex;align-items:center;justify-content:space-between;
+  padding:16px 20px;border-bottom:1px solid var(--border-color)
+}
+.card-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
+.card-tabs{display:flex;gap:4px}
+.card-tab{
+  padding:5px 12px;border-radius:6px;font-size:12px;font-weight:500;
+  border:1px solid transparent;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s
+}
+.card-tab:hover{color:var(--text-primary)}
+.card-tab.active{background:var(--blue-bg);color:var(--blue);font-weight:600}
+.card-body{padding:20px}
+
+/* ========== 趋势图区域（CSS模拟柱状图） ========== */
+.chart-area{height:220px;display:flex;align-items:flex-end;gap:10px;padding:10px 0}
+.chart-bar-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
+.chart-bars{display:flex;gap:3px;width:100%;align-items:flex-end;height:180px}
+.chart-bar{flex:1;border-radius:4px 4px 0 0;transition:height .5s ease;min-width:8px;position:relative}
+.bar-blue{background:var(--blue)}.bar-green{background:var(--green)}.bar-orange{background:var(--orange)}
+.chart-bar:hover{opacity:.85}
+.chart-label{font-size:11px;color:var(--text-muted);white-space:nowrap}
+.chart-value{font-size:10px;font-weight:700;color:var(--text-secondary)}
+
+/* ========== 近7天趋势表格 ========== */
+.trend-table{width:100%;border-collapse:collapse}
+.trend-table th{padding:10px 12px;text-align:left;font-size:11.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary)}
+.trend-table td{padding:10px 12px;font-size:13px;border-bottom:1px solid var(--border-light);vertical-align:middle}
+.trend-table tr:last-child td{border-bottom:none}
+.trend-table tr:hover td{background:var(--bg-tertiary)}
+.num{font-weight:600;font-variant-numeric:tabular-nums}
+.num-up{color:#059669}.num-down{color:#dc2626}.num-neutral{color:var(--text-primary)}
+
+/* ========== 排行榜 ========== */
+.rank-list{list-style:none}
+.rank-item{
+  display:flex;align-items:center;gap:14px;
+  padding:12px 0;border-bottom:1px solid var(--border-light);
+  transition:background .1s
+}
+.rank-item:last-child{border-bottom:none}
+.rank-item:hover{background:var(--bg-tertiary);margin:0 -20px;padding:12px 20px;border-radius:8px}
+
+.rank-num{
+  width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
+  font-size:13px;font-weight:800;flex-shrink:0
+}
+.rank-1{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e}
+.rank-2{background:linear-gradient(135deg,#e5e7eb,#d1d5db);color:#374151}
+.rank-3{background:linear-gradient(135deg,#fed7aa,#fdba74);color:#9a3412}
+.rank-n{background:var(--bg-tertiary);color:var(--text-muted)}
+
+.rank-avatar{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:13px;flex-shrink:0}
+.rank-info{flex:1;min-width:0}
+.rank-name{font-weight:600;font-size:13.5px}
+.rank-dept{font-size:11.5px;color:var(--text-muted)}
+.rank-score{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
+.rank-trend{font-size:12px;font-weight:600}
+.rank-trend.up{color:#059669}.rank-trend.down{color:#dc2626}
+
+/* ========== 个人目标进度 - 果冻块样式 ========== */
+.jelly-section{margin-top:4px}
+.jelly-section .goal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
+.jelly-section .goal-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px}
+.jelly-section .goal-target{font-size:12px;color:var(--text-muted)}
+
+.jelly-section .goal-items-wrapper{display:flex;gap:12px;flex-wrap:wrap}
+.jelly-section .goal-item{margin-bottom:0;flex:1;min-width:140px}
+
+.jelly-block{
+  background:linear-gradient(145deg,#ffffff,#f8f9fa);
+  border-radius:16px;
+  padding:14px 16px;
+  box-shadow:
+    4px 4px 12px rgba(0,0,0,0.08),
+    -2px -2px 8px rgba(255,255,255,0.9),
+    inset 0 0 0 1px rgba(255,255,255,0.6);
+  transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  position:relative;
+  overflow:hidden;
+  animation:jellyFloat 3s ease-in-out infinite;
+}
+.jelly-block::before{
+  content:'';
+  position:absolute;
+  top:0;left:0;right:0;height:50%;
+  background:linear-gradient(180deg,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%);
+  border-radius:16px 16px 0 0;
+  pointer-events:none
+}
+.jelly-block:hover{
+  transform:translateY(-4px) scale(1.02);
+  box-shadow:
+    8px 12px 24px rgba(0,0,0,0.12),
+    -4px -4px 12px rgba(255,255,255,0.9),
+    inset 0 0 0 1px rgba(255,255,255,0.8);
+}
+.jelly-block:nth-child(1){animation-delay:0s}
+.jelly-block:nth-child(2){animation-delay:0.5s}
+.jelly-block:nth-child(3){animation-delay:1s}
+
+@keyframes jellyFloat{
+  0%,100%{transform:translateY(0)}
+  50%{transform:translateY(-3px)}
 }
 
-.wb-refresh-btn {
-    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
+.jelly-block .goal-icon{
+  width:36px;height:36px;border-radius:10px;
+  display:flex;align-items:center;justify-content:center;
+  font-size:18px;margin-bottom:10px;
+  box-shadow:0 2px 8px rgba(0,0,0,0.1)
+}
+.jelly-block .goal-icon.blue{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
+.jelly-block .goal-icon.green{background:linear-gradient(135deg,#d1fae5,#a7f3d0)}
+.jelly-block .goal-icon.orange{background:linear-gradient(135deg,#fef3c7,#fde68a)}
+
+.jelly-block .goal-label{
+  display:flex;justify-content:space-between;align-items:center;
+  font-size:13px;margin-bottom:8px
+}
+.jelly-block .goal-name{color:var(--text-secondary);font-weight:500}
+.jelly-block .goal-pct{font-weight:700;color:var(--text-primary)}
+
+.jelly-block .goal-track{
+  height:8px;background:#f1f5f9;border-radius:4px;overflow:hidden;
+  box-shadow:inset 0 1px 3px rgba(0,0,0,0.1)
+}
+.jelly-block .goal-fill{height:100%;border-radius:4px;transition:width .8s ease}
+.jelly-block .fill-blue{background:linear-gradient(90deg,#2563eb,#60a5fa)}
+.jelly-block .fill-green{background:linear-gradient(90deg,#10b981,#34d399)}
+.jelly-block .fill-orange{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
+
+
+
+
+
+/* ========== 奖励金卡片（游戏化） ========== */
+.rewards-hero {
+  background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
+  border-radius:var(--radius-lg);padding:24px 28px;margin-bottom:24px;
+  position:relative;overflow:hidden;border:1px solid rgba(251,191,36,.2);
+  cursor:pointer;
+  transition:all .3s ease;
+}
+.rewards-hero:hover {
+  transform:translateY(-2px);
+  box-shadow:0 12px 40px rgba(0,0,0,.3);
+}
+.rewards-hero::before {
+  content:'';position:absolute;top:-50%;right:-20%;width:300px;height:300px;
+  background:radial-gradient(circle,rgba(251,191,36,.15) 0%,transparent 70%);
+  pointer-events:none
+}
+.rewards-hero::after {
+  content:'';position:absolute;bottom:-30%;left:-10%;width:200px;height:200px;
+  background:radial-gradient(circle,rgba(245,158,11,.1) 0%,transparent 70%);
+  pointer-events:none
+}
+.rewards-inner{display:flex;align-items:center;gap:24px;position:relative;z-index:1}
+
+/* 左：大数字区 */
+.rewards-main{flex:1}
+.rewards-label-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
+.rewards-tag{
+  font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;
+  background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#78350f;
+  text-transform:uppercase;letter-spacing:.05em
+}
+.rewards-title{font-size:14px;color:rgba(255,255,255,.7);font-weight:500}
+.rewards-amount-wrap{display:flex;align-items:baseline;gap:8px}
+.rewards-amount{
+  font-size:42px;font-weight:900;color:#fbbf24;line-height:1;
+  font-variant-numeric:tabular-nums;text-shadow:0 2px 20px rgba(251,191,36,.3)
+}
+.rewards-unit{font-size:16px;color:rgba(255,255,255,.5);font-weight:600}
+
+/* 昨日新增 - 游戏化高亮 */
+.yesterday-bonus{
+  display:inline-flex;flex-direction:column;background:rgba(251,191,36,.1);
+  border:1px solid rgba(251,191,36,.25);border-radius:12px;padding:10px 16px;
+  margin-left:16px;position:relative
+}
+.yesterday-label{font-size:11px;color:rgba(255,255,255,.5);font-weight:600;margin-bottom:2px}
+.yesterday-value{
+  font-size:20px;font-weight:800;color:#34d399;display:flex;align-items:center;gap:4px
+}
+.bonus-arrow{color:#34d399;font-size:14px;animation:bounceIn .6s ease}
+.yesterday-sub{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px}
+
+/* 金币图标动画区 */
+.rewards-icon-area{text-align:center;flex-shrink:0}
+.coin-container{
+  width:80px;height:80px;position:relative;display:flex;align-items:center;justify-content:center
+}
+.coin-main{
+  width:64px;height:64px;border-radius:50%;
+  background:linear-gradient(135deg,#fde68a,#fbbf24,#d97706);
+  display:flex;align-items:center;justify-content:center;
+  font-size:28px;box-shadow:
+    0 4px 20px rgba(251,191,36,.4),
+    inset 0 2px 4px rgba(255,255,255,.5);
+  animation:coinFloat 3s ease-in-out infinite;
+  position:relative;z-index:2
+}
+.coin-ring{
+  position:absolute;width:76px;height:76px;border-radius:50%;
+  border:2px dashed rgba(251,191,36,.3);animation:coinSpin 12s linear infinite
+}
+.coin-particle{
+  position:absolute;width:6px;height:6px;border-radius:50%;background:#fbbf24;
+  opacity:0;animation:particleFloat 2s ease-in-out infinite
+}
+.coin-particle:nth-child(2){top:10%;left:80%;animation-delay:.3s;background:#34d399}
+.coin-particle:nth-child(3){bottom:15%;left:85%;animation-delay:.7s;background:#60a5fa}
+.coin-particle:nth-child(4){top:60%;right:-5%;animation-delay:1s;background:#f472b6}
+
+/* 奖励金详情条 */
+.rewards-content{display:flex;align-items:center;justify-content:space-between;margin-top:14px;flex-wrap:wrap}
+.rewards-bar{display:flex;gap:20px;flex-wrap:wrap;flex:1}
+.rewards-detail-item{
+  display:flex;align-items:center;gap:6px;font-size:12.5px;color:rgba(255,255,255,.55)
+}
+.rewards-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+.rewards-dot.gold{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
+.rewards-dot.green{background:linear-gradient(135deg,#34d399,#10b981)}
+.rewards-dot.blue{background:linear-gradient(135deg,#60a5fa,#2563eb)}
+.rewards-dot.purple{background:linear-gradient(135deg,#a78bfa,#8b5cf6)}
+.rewards-detail-item b{color:rgba(255,255,255,.85);font-weight:700}
+.rewards-chart{flex-shrink:0}
+
+/* 排行榜中的奖励金列 */
+.rank-reward{
+  display:flex;flex-direction:column;align-items:flex-end;min-width:72px
+}
+.reward-amount{
+  font-size:13px;font-weight:700;color:var(--orange);font-variant-numeric:tabular-nums
+}
+.reward-yesterday{
+  font-size:10.5px;color:#059669;font-weight:600;display:flex;align-items:center;gap:2px
 }
 
-.wb-section {
-    margin-bottom: 20px;
-    border-radius: 20px;
-    background: rgba(255, 255, 255, 0.88);
-    border: 1px solid rgba(255, 255, 255, 0.9);
-    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.05);
-    overflow: hidden;
-    backdrop-filter: blur(10px);
+/* 奖励金弹窗 */
+.rewards-popup-overlay{
+  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);
+  z-index:999;display:none;align-items:center;justify-content:center;
+  backdrop-filter:blur(4px)
+}
+.rewards-popup-overlay.show{display:flex}
+.rewards-popup{
+  background:var(--bg-secondary);border-radius:var(--radius-lg);
+  padding:32px;width:420px;max-width:90vw;text-align:center;
+  box-shadow:0 20px 60px rgba(0,0,0,.3);
+  animation:popupIn .4s ease;position:relative;overflow:hidden
+}
+.rewards-popup::before{
+  content:'';position:absolute;top:0;left:0;right:0;height:4px;
+  background:linear-gradient(90deg,#fbbf24,#f59e0b,#fbbf24);background-size:200% 100%;
+  animation:shimmer 2s linear infinite
+}
+.popup-coin{font-size:48px;margin-bottom:12px;animation:coinBounce .8s ease}
+.popup-title{font-size:18px;font-weight:700;margin-bottom:4px}
+.popup-subtitle{font-size:13px;color:var(--text-muted);margin-bottom:20px}
+.popup-amount{font-size:48px;font-weight:900;color:var(--orange);text-shadow:0 2px 10px rgba(245,158,11,.2)}
+.popup-amount .unit{font-size:18px;color:var(--text-muted)}
+.popup-breakdown{margin-top:20px;text-align:left;background:var(--bg-tertiary);border-radius:10px;padding:16px}
+.popup-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px}
+.popup-row b{color:var(--text-primary)}
+.popup-close{
+  margin-top:20px;padding:10px 32px;border-radius:10px;font-size:14px;font-weight:600;
+  background:linear-gradient(135deg,var(--blue),#3b82f6);color:white;border:none;
+  cursor:pointer;transition:all .15s
+}
+.popup-close:hover{transform:scale(1.02);box-shadow:0 4px 15px rgba(37,99,235,.3)}
+
+/* ===== 动画关键帧 ===== */
+@keyframes coinFloat{
+  0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}
+}
+@keyframes coinSpin{to{transform:rotate(360deg)}}
+@keyframes particleFloat{
+  0%{opacity:0;transform:translateY(0) scale(0)}
+  50%{opacity:1;transform:translateY(-20px) scale(1)}
+  100%{opacity:0;transform:translateY(-40px) scale(0)}
+}
+@keyframes bounceIn{
+  0%{transform:scale(0)} 50%{transform:scale(1.3)} 100%{transform:scale(1)}
+}
+@keyframes popupIn{
+  from{opacity:0;transform:scale(.9) translateY(20px)}
+  to{opacity:1;transform:scale(1) translateY(0)}
+}
+@keyframes coinBounce{
+  0%{transform:scale(.5) rotate(-10deg)} 50%{transform:scale(1.2) rotate(5deg)}
+  100%{transform:scale(1) rotate(0)}
+}
+@keyframes shimmer{
+  to{background-position-x:-200%}
+}
+@keyframes countUp{
+  from{opacity:0;transform:translateY(10px)}
+  to{opacity:1;transform:translateY(0)}
+}
+@keyframes goldPulse{
+  0%,100%{box-shadow:0 4px 20px rgba(251,191,36,.4)}
+  50%{box-shadow:0 4px 30px rgba(251,191,36,.6),0 0 40px rgba(251,191,36,.2)}
+}
+.reward-highlight{animation:goldPulse 2s ease-in-out infinite,rewardGlowIn .5s ease}
+@keyframes rewardGlowIn{
+  from{filter:brightness(1.5) saturate(1.5)}
+  to{filter:brightness(1) saturate(1)}
 }
 
-.wb-section--diagnosis {
-    border-top: 3px solid transparent;
-    border-image: linear-gradient(90deg, #3b82f6, #60a5fa) 1;
+/* 数字滚动效果 */
+.scroll-num{display:inline-block;transition:all .3s ease}
+.scroll-num.updated{
+  animation:numPop .3s ease;color:#34d399
+}
+@keyframes numPop{
+  0%{transform:scale(1)} 50%{transform:scale(1.2)} 100%{transform:scale(1)}
 }
 
-.wb-section--order {
-    border-top: 3px solid transparent;
-    border-image: linear-gradient(90deg, #8b5cf6, #a78bfa) 1;
+/* 加载状态 */
+.loading-container{
+  display:flex;flex-direction:column;align-items:center;justify-content:center;
+  min-height:400px;gap:20px
+}
+.loading-spinner{
+  width:50px;height:50px;border:4px solid var(--border-color);
+  border-top-color:var(--blue);border-radius:50%;
+  animation:spin 1s linear infinite
+}
+.loading-text{
+  font-size:14px;color:var(--text-secondary)
+}
+@keyframes spin{
+  to{transform:rotate(360deg)}
 }
 
-.wb-section--trend {
-    border-top: 3px solid transparent;
-    border-image: linear-gradient(90deg, #14b8a6, #2dd4bf) 1;
+/* 响应式 */
+@media(max-width:1280px){.stats-grid{grid-template-columns:repeat(3,1fr)}}
+@media(max-width:1024px){
+  .stats-grid{grid-template-columns:repeat(2,1fr)}; .grid-2col{grid-template-columns:1fr}
+  .rewards-inner{flex-direction:column;text-align:center}
+  .yesterday-bonus{margin-left:0;margin-top:12px}
+  .rewards-bar{justify-content:center}
 }
-
-.wb-section-head {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 18px 22px;
-    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
-    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
+@media(max-width:768px){
+  .stats-grid{grid-template-columns:1fr}
+  .page{padding:16px}
+  .rewards-amount{font-size:32px}
+  .rewards-hero{padding:18px}
 }
-
-.wb-section-title {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-}
-
-.wb-section-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
-    border-radius: 14px;
-    font-size: 22px;
-    color: #fff;
-}
-
-.wb-section-icon--blue {
-    background: linear-gradient(135deg, #3b82f6, #2563eb);
-    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
-}
-
-.wb-section-icon--violet {
-    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
-}
-
-.wb-section-icon--teal {
-    background: linear-gradient(135deg, #14b8a6, #0d9488);
-    box-shadow: 0 8px 20px rgba(13, 148, 136, 0.3);
-}
-
-.wb-section-name {
-    font-size: 17px;
-    font-weight: 600;
-    color: #0f172a;
-}
-
-.wb-section-sub {
-    margin-top: 2px;
-    font-size: 12px;
-    color: #94a3b8;
-}
-
-.wb-toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 10px;
-}
-
-.wb-select {
-    width: 120px;
-}
-
-.wb-select--wide {
-    width: 168px;
-}
-
-.wb-section-body {
-    padding: 20px 22px 24px;
-}
-
-.wb-kpi-row {
-    margin-bottom: 8px;
-}
-
-.wb-kpi {
-    padding: 18px 20px;
-    border-radius: 16px;
-    height: 100%;
-    min-height: 112px;
-    box-sizing: border-box;
-}
-
-.wb-kpi--blue {
-    background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%);
-    border: 1px solid rgba(59, 130, 246, 0.2);
-}
-
-.wb-kpi--violet {
-    background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%);
-    border: 1px solid rgba(139, 92, 246, 0.22);
-}
-
-.wb-kpi--amber {
-    background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
-    border: 1px solid rgba(245, 158, 11, 0.25);
-}
-
-.wb-kpi-label {
-    font-size: 13px;
-    color: #64748b;
-}
-
-.wb-kpi-value {
-    margin-top: 8px;
-    font-size: 32px;
-    font-weight: 700;
-    line-height: 1.1;
-    color: #1e293b;
-    font-variant-numeric: tabular-nums;
-}
-
-.wb-kpi-value--sm {
-    font-size: 26px;
-}
-
-.wb-kpi-hint {
-    margin-top: 6px;
-    font-size: 12px;
-    color: #94a3b8;
-}
-
-.wb-rank-strip {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    min-height: 112px;
-    padding: 14px 18px;
-    border-radius: 16px;
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-}
-
-.wb-rank-strip--compact {
-    min-height: 112px;
-}
-
-.wb-rank-strip-label {
-    font-size: 12px;
-    color: #94a3b8;
-    margin-bottom: 8px;
-}
-
-.wb-rank-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.wb-rank-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    border-radius: 999px;
-    font-size: 13px;
-    background: #fff;
-    border: 1px solid #e2e8f0;
-    color: #334155;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-
-    em {
-        font-style: normal;
-        font-weight: 700;
-        color: #d97706;
-    }
-
-    strong {
-        color: var(--el-color-primary);
-        font-weight: 600;
-    }
-}
-
-.wb-rank-chip--dense {
-    padding: 5px 10px;
-    font-size: 12px;
-
-    small {
-        color: #94a3b8;
-        margin-left: 4px;
-    }
-}
-
-.wb-rank-empty {
-    font-size: 13px;
-    color: #cbd5e1;
-}
-
-.wb-chart-row {
-    margin-top: 16px;
-}
-
-.wb-chart-card {
-    height: 100%;
-    padding: 14px 16px 8px;
-    border-radius: 16px;
-    background: #fafbfc;
-    border: 1px solid #eef0f4;
-}
-
-.wb-chart-card-head {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    margin-bottom: 4px;
-}
-
-.wb-chart-title {
-    font-size: 15px;
-    font-weight: 600;
-    color: #1e293b;
-}
-
-.wb-chart-hint {
-    font-size: 12px;
-    color: #94a3b8;
-}
-
-.wb-chart-empty {
-    min-height: 280px;
-    padding: 40px 0;
-}
-
-.wb-dept-block {
-    margin-top: 22px;
-    padding-top: 18px;
-    border-top: 1px dashed #e2e8f0;
-}
-
-.wb-dept-title {
-    font-size: 15px;
-    font-weight: 600;
-    color: #334155;
-    margin-bottom: 14px;
-}
-
-.wb-dept-card {
-    margin-bottom: 16px;
-    padding: 14px 16px;
-    border-radius: 14px;
-    background: #fff;
-    border: 1px solid #e8ecf1;
-    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
-}
-
-.wb-dept-card-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-weight: 600;
-    color: #1e293b;
-    margin-bottom: 10px;
-    font-size: 14px;
-}
-
-.wb-dept-total {
-    font-size: 12px;
-    font-weight: 500;
-    color: #64748b;
-}
-
-.wb-dept-list {
-    font-size: 13px;
-}
-
-.wb-dept-row {
-    display: flex;
-    justify-content: space-between;
-    padding: 6px 0;
-    border-bottom: 1px solid #f1f5f9;
-    color: #475569;
-
-    &:last-child {
-        border-bottom: none;
-    }
-}
-
-.wb-dept-num {
-    font-weight: 600;
-    color: #0f172a;
-
-    small {
-        font-weight: 500;
-        color: #94a3b8;
-        margin-left: 6px;
-    }
-}
-
-.wb-dept-empty {
-    color: #cbd5e1;
-    font-size: 13px;
-    padding: 8px 0;
-}
-
-.wb-ranking-card {
-    min-height: 300px;
-}
-
-.wb-ranking-list {
-    max-height: 280px;
-    overflow-y: auto;
-    padding-right: 4px;
-}
-
-.wb-ranking-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 12px;
-    margin-bottom: 8px;
-    border-radius: 12px;
-    background: #fff;
-    border: 1px solid #eef0f4;
-}
-
-.wb-ranking-rank {
-    flex-shrink: 0;
-    width: 28px;
-    height: 28px;
-    line-height: 28px;
-    text-align: center;
-    border-radius: 10px;
-    font-size: 12px;
-    font-weight: 700;
-    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
-    color: #475569;
-}
-
-.wb-ranking-name {
-    flex: 1;
-    min-width: 0;
-    font-weight: 500;
-    color: #334155;
-}
-
-.wb-ranking-meta {
-    font-size: 13px;
-    color: #64748b;
-
-    b {
-        color: var(--el-color-primary);
-    }
-}
-
-.wb-ranking-money {
-    margin-left: 8px;
-    color: #0f172a;
-    font-weight: 600;
-}
-
-.wb-trend-body {
-    padding-top: 8px;
-}
-
-.wb-trend-card {
-    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/server/app/common/model/Order.php b/server/app/common/model/Order.php
index 5afa05bb..a0908ae9 100644
--- a/server/app/common/model/Order.php
+++ b/server/app/common/model/Order.php
@@ -173,3 +173,4 @@ class Order extends BaseModel
         }
     }
 }
+}
diff --git a/server/app/common/model/doctor/Appointment.php b/server/app/common/model/doctor/Appointment.php
index 77aa8525..a8309852 100644
--- a/server/app/common/model/doctor/Appointment.php
+++ b/server/app/common/model/doctor/Appointment.php
@@ -96,8 +96,8 @@ class Appointment extends BaseModel
         return $this->hasOne('app\adminapi\logic\auth\AdminLogic', 'id', 'doctor_id')
             ->bind(['doctor_name' => 'name']);
     }
-    public function diagnosis(){
-
-         return $this->belongsTo('app\common\model\tcm\Diagnosis', 'patient_id', 'id');
+    public function diagnosis()
+    {
+        return $this->belongsTo('app\common\model\tcm\Diagnosis', 'patient_id', 'id');
     }
 }