fix: 完成商务迁移复核与接口优化并清理历史资料

web/src/view/dashboard/components/BusinessDashboard.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="business-dashboard">
     <el-card shadow="never">
-      <div class="business-toolbar"><strong>商务数据</strong><el-select v-model="sources" multiple collapse-tags clearable placeholder="请选择所属平台" style="width: 260px" @change="refresh"><el-option v-for="(label, value) in platforms" :key="value" :label="label" :value="value" /></el-select></div>
+      <div class="business-toolbar">
+        <slot name="heading"><strong>商务工作台</strong></slot>
+        <div class="business-platform-filter"><span class="business-muted">数据平台</span><el-select v-model="sources" multiple collapse-tags collapse-tags-tooltip clearable placeholder="请选择所属平台" aria-label="数据平台" @change="refresh"><el-option v-for="(label, value) in platforms" :key="value" :label="label" :value="value" /></el-select></div>
+      </div>
       <el-alert v-if="!sources.length" class="mt-3" type="info" :closable="false" title="请选择所属平台后查看数据" />
       <el-alert v-else-if="summaryError" class="mt-3" type="error" :closable="false" :title="summaryError" />
       <el-alert v-else-if="summary?.available === false" class="mt-3" type="warning" :closable="false" title="工作台所需业务数据尚未接入。" />
@@ -23,21 +26,9 @@
     </el-card>
     <div class="business-ranks">
       <el-card v-for="panel in panels" :key="panel.key" v-loading="panel.loading" shadow="never">
-        <div class="business-rank-heading"><strong>{{ panel.title }}</strong><el-radio-group v-if="panel.period" v-model="panel.period" size="small" @change="loadRank(panel)"><el-radio-button v-for="option in periods" :key="option.value" :value="option.value">{{ option.label }}</el-radio-button></el-radio-group></div>
+        <div class="business-rank-heading"><strong :title="panel.title">{{ panel.title }}</strong><el-select v-if="panel.period" v-model="panel.period" class="business-rank-period" size="small" :aria-label="`${panel.title}统计周期`" @change="loadRank(panel)"><el-option v-for="option in periods" :key="option.value" :value="option.value" :label="option.label" /></el-select></div>
         <el-alert v-if="panel.error" class="mt-3" type="warning" :closable="false" :title="panel.error" />
-        <template v-else-if="panel.chart && panel.rows.length">
-          <div v-for="row in panel.rows" :key="`${row.sourceDb}:${row.promoteId}`" class="business-bar">
-            <div class="business-bar-heading"><span class="business-bar-name" :title="row.promoteName">{{ row.rank }}. {{ row.promoteName }} <el-text type="info" size="small">{{ row.sourceDbLabel }}</el-text></span><strong>{{ rankValue(panel, row.value) }}</strong></div>
-            <el-progress :percentage="barWidth(panel, row)" :show-text="false" :stroke-width="8" />
-          </div>
-        </template>
-        <el-table v-else-if="!panel.chart" :data="panel.rows" :row-key="row => `${row.sourceDb}:${row.promoteId}`" :empty-text="sources.length ? '暂无数据' : '请选择所属平台'">
-          <el-table-column prop="sourceDbLabel" label="所属平台" width="92" />
-          <el-table-column prop="rank" label="排名" width="65" />
-          <el-table-column prop="promoteName" label="渠道名称" min-width="160" show-overflow-tooltip />
-          <el-table-column :label="panel.key === 'unlogin' ? '未登录时长' : '充值金额'" min-width="140"><template #default="{ row }">{{ rankValue(panel, row.value) }}</template></el-table-column>
-        </el-table>
-        <el-empty v-else :description="sources.length ? '暂无数据' : '请选择所属平台'" :image-size="65" />
+        <compact-ranking-table v-else :title="panel.title" :rows="rankingRows(panel)" :metric-label="panel.key === 'register' ? '注册量' : panel.key === 'unlogin' ? '未登录天数' : '充值金额'" :value-formatter="value => rankValue(panel, value)" :wide-metric="panel.key !== 'register'" :empty-text="sources.length ? '暂无数据' : '请选择所属平台'" />
       </el-card>
     </div>
   </div>
@@ -50,6 +41,7 @@ import { ElMessage } from 'element-plus'
 import { getWorkbenchSummary, getWorkbenchRanks } from '@/api/workbench'
 import { listAlertRecords } from '@/api/alert'
 import { channelCount, channelMoney } from '@/view/sw/channel-display'
+import CompactRankingTable from '@/view/sw/components/CompactRankingTable.vue'
 
 const router = useRouter(), carousel = ref()
 const platforms = { lx: '龙翔', hw: '汇玩', yq: '游趣' }
@@ -58,8 +50,8 @@ const alerts = reactive({ rows: [], total: null, loading: false, error: '', vers
 const periods = [{ label: '今日', value: 'today' }, { label: '昨日', value: 'yesterday' }, { label: '近7天', value: 'last7' }, { label: '近30天', value: 'last30' }]
 const cards = [{ key: 'todayRegister', label: '今日渠道玩家注册' }, { key: 'todayActive', label: '今日渠道活跃玩家' }, { key: 'todayPay', label: '今日充值金额', money: true }, { key: 'monthPay', label: '本月充值金额', money: true }, { key: 'activePromote', label: '活跃渠道数' }, { key: 'newPromote', label: '新增渠道数' }]
 const panels = reactive([
-  { key: 'register', endpoint: 'registerTop', title: '渠道注册 TOP10', period: 'today', chart: true },
-  { key: 'payHigh', endpoint: 'payRank', title: '渠道充值 TOP10', period: 'today', order: 'desc', chart: true },
+  { key: 'register', endpoint: 'registerTop', title: '渠道注册 TOP10', period: 'today' },
+  { key: 'payHigh', endpoint: 'payRank', title: '渠道充值 TOP10', period: 'today', order: 'desc' },
   { key: 'unlogin', endpoint: 'unloginTop', title: '未登录渠道排行 TOP10' },
   { key: 'payLow', endpoint: 'payRank', title: '充值金额最低排行 TOP10', period: 'last30', order: 'asc' }
 ].map(panel => ({ ...panel, rows: [], loading: false, error: '', version: 0 })))
@@ -74,8 +66,7 @@ const metricCompare = key => {
   return `${card.compareLabel} ${Number(card.changeRate) > 0 ? '+' : ''}${card.changeRate}%`
 }
 const rankValue = (panel, value) => panel.key === 'register' ? count(value) : panel.key === 'unlogin' ? `${count(value)} 天` : channelMoney(value)
-// 浮点数仅用于条形宽度，金额标签始终使用接口十进制字符串。
-const barWidth = (panel, row) => { const max = Math.max(...panel.rows.map(item => Number(item.value)), 0); return max > 0 ? Math.min(100, Number(row.value) / max * 100) : 0 }
+const rankingRows = panel => panel.rows.map(row => ({ rowKey: `${row.sourceDb}:${row.promoteId}`, rank: row.rank, objectName: row.promoteName, sourceDbLabel: row.sourceDbLabel, metricValue: row.value }))
 const loadSummary = async () => {
   const current = ++summaryVersion; summary.value = null; summaryError.value = ''
   if (!sources.value.length) { summaryLoading.value = false; return }
@@ -110,16 +101,20 @@ onMounted(refresh)
 <style scoped>
 .business-dashboard { display: flex; flex-direction: column; gap: 12px; }
 .business-toolbar, .business-rank-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.business-platform-filter { display: flex; align-items: center; gap: 12px; }
+.business-platform-filter .el-select { width: 240px; }
 .business-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
 .business-value { font-size: 26px; font-weight: 600; margin: 14px 0 10px; overflow-wrap: anywhere; }
 .business-muted { color: var(--el-text-color-secondary); font-size: 13px; }
-.business-ranks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
-.business-rank-heading { margin-bottom: 16px; }
-.business-bar { margin-bottom: 16px; }
-.business-bar-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: 13px; }
-.business-bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.business-bar-heading strong { flex-shrink: 0; }
+.business-ranks { display: grid; align-items: start; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
+.business-ranks > .el-card { min-width: 0; }
+.business-ranks :deep(.el-card__body) { padding: 16px; }
+.business-rank-heading { margin-bottom: 12px; min-height: 26px; gap: 8px; flex-wrap: nowrap; }
+.business-rank-heading strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.business-rank-period { width: 82px; flex-shrink: 0; }
 .business-alert { border: 0; background: transparent; color: var(--el-text-color-primary); text-align: left; width: 100%; cursor: pointer; padding: 10px 0; line-height: 1.6; }
-@media (max-width: 1100px) { .business-ranks { grid-template-columns: 1fr; } }
-@media (max-width: 700px) { .business-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (min-width: 1500px) { .business-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
+@media (max-width: 1279px) { .business-ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 767px) { .business-ranks { grid-template-columns: 1fr; } }
+@media (max-width: 700px) { .business-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .business-platform-filter { width: 100%; } .business-platform-filter .el-select { flex: 1; min-width: 0; } }
 </style>

web/src/view/dashboard/index.vue

@@ -1,16 +1,14 @@
 <template>
   <div class="h-full kra-container2 overflow-auto bg-main">
     <div class="space-y-2 py-2">
-      <kra-card class="rounded-xl border border-slate-200/80 bg-white px-5 py-6 shadow-sm dark:border-slate-700 dark:bg-slate-900">
-        <p class="text-xs tracking-[0.2em] text-muted-foreground">DASHBOARD</p>
-        <h1 class="mt-2 text-xl font-semibold text-base-text lg:text-2xl">欢迎回来，{{ userStore.userInfo.nickName }}</h1>
-        <p class="mt-2 text-sm text-muted-foreground">{{ today }} · 商务工作台</p>
-      </kra-card>
-      <business-dashboard />
-      <div class="grid grid-cols-1 items-stretch gap-2 xl:grid-cols-2">
-        <kra-card title="快捷功能" show-action custom-class="min-h-[300px]"><kra-quick-link /></kra-card>
-        <kra-card title="公告" show-action custom-class="min-h-[300px]"><kra-notice /></kra-card>
-      </div>
+      <business-dashboard>
+        <template #heading>
+          <div>
+            <h1 class="text-xl font-semibold text-base-text">欢迎回来，{{ userStore.userInfo.nickName }}</h1>
+            <p class="mt-2 text-sm text-muted-foreground">{{ today }} · 商务工作台</p>
+          </div>
+        </template>
+      </business-dashboard>
     </div>
   </div>
 </template>
@@ -19,7 +17,6 @@
   import { computed } from 'vue'
   import { useUserStore } from '@/pinia/modules/user'
   import BusinessDashboard from './components/BusinessDashboard.vue'
-  import { KraNotice, KraQuickLink, KraCard } from './components'
   defineOptions({ name: 'Dashboard' })
   const userStore = useUserStore()
   const today = computed(() => new Date().toLocaleDateString('zh-CN'))