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

web/src/view/sw/BusinessList.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <el-tabs v-model="activeTab"><el-tab-pane label="商务列表" name="accounts" /><el-tab-pane v-if="isLevel3" label="绑定列表" name="bindings" /></el-tabs>
+    <div v-if="isLevel3" class="business-view-switch">
+      <el-radio-group v-model="activeTab" aria-label="商务管理视图">
+        <el-radio-button value="accounts">商务列表</el-radio-button>
+        <el-radio-button value="bindings">绑定列表</el-radio-button>
+      </el-radio-group>
+    </div>
     <business-bindings v-if="isLevel3 && activeTab === 'bindings'" @changed="load" />
     <div v-show="activeTab === 'accounts'" class="kra-search-box">
       <el-form :inline="true" :model="query" @submit.prevent="search">
@@ -20,8 +25,8 @@
       </el-form>
     </div>
     <div v-show="activeTab === 'accounts'" class="kra-table-box">
-      <div class="kra-btn-list">
-        <el-button v-if="canAdd" type="primary" icon="plus" @click="openCreate">添加子商务</el-button>
+      <div v-if="canAdd" class="kra-btn-list">
+        <el-button type="primary" icon="plus" @click="openCreate">添加子商务</el-button>
       </div>
       <el-table v-loading="loading" :data="rows" row-key="userId">
         <el-table-column prop="userName" label="商务账号" min-width="140" />
@@ -130,3 +135,7 @@ const save = async () => {
 watch(isLevel3, (visible) => { if (!visible) activeTab.value = 'accounts' })
 onMounted(load)
 </script>
+
+<style scoped>
+.business-view-switch { margin-bottom: 12px; }
+</style>

web/src/view/sw/ChannelActivationList.vue

@@ -9,8 +9,9 @@
       </el-form>
     </div>
     <div class="kra-table-box">
-      <el-alert v-if="!available" class="mb-4" type="warning" :closable="false" title="OA 渠道激活数据源尚未接入或暂不可用。" />
-      <el-table v-loading="loading" :data="rows" row-key="id">
+      <el-alert v-if="error" class="mb-4" type="error" :closable="false" :title="error" />
+      <el-alert v-else-if="!available" class="mb-4" type="warning" :closable="false" title="OA 渠道激活数据源尚未接入或暂不可用。" description="渠道激活记录来自 OA；商务库中的渠道数据不会自动生成激活记录。请联系管理员检查 OA 数据源连接。" />
+      <el-table v-loading="loading" :data="rows" row-key="id" :empty-text="emptyText">
         <el-table-column prop="platformTitle" label="所属平台" min-width="100" />
         <el-table-column prop="promoteAccount" label="渠道名称" min-width="140" show-overflow-tooltip />
         <el-table-column prop="busierAccount" label="绑定商务" min-width="130" show-overflow-tooltip />
@@ -55,6 +56,7 @@ const query = reactive({ pageNum: 1, pageSize: 10, platformNames: Object.keys(pl
 const rows = ref([])
 const total = ref(0)
 const available = ref(true)
+const error = ref('')
 const loading = ref(false)
 const dialog = ref(false)
 const flowLoading = ref(false)
@@ -63,6 +65,7 @@ const selected = ref(null)
 const detail = ref(null)
 let listVersion = 0
 let detailVersion = 0
+const emptyText = computed(() => !query.platformNames.length ? '请选择所属平台' : error.value ? '查询失败，请重试' : !available.value ? 'OA 数据源暂不可用' : '当前筛选条件及账号权限下暂无激活记录')
 const date = value => value ? value.slice(0, 10) : '—'
 // 金额按字符串分组，保留超出 JavaScript 精确整数范围的金额。
 const currency = value => {
@@ -80,14 +83,16 @@ const period = computed(() => {
 })
 const load = async () => {
   const version = ++listVersion
+  // 保留总数直到查询完成；清零会让分页组件把当前页自动校正为 1。
+  rows.value = []; error.value = ''; available.value = true
   if (!query.platformNames.length) { rows.value = []; total.value = 0; available.value = true; loading.value = false; return }
   loading.value = true
   try {
     const res = await listChannelActivations({ ...query, platformNames: query.platformNames.join(','), promoteAccount: query.promoteAccount.trim(), busierAccount: query.busierAccount.trim() })
     if (version !== listVersion) return
     if (res.code === 0) { rows.value = res.data.rows; total.value = res.data.total; available.value = res.data.available !== false }
-    else { rows.value = []; total.value = 0 }
-  } catch { if (version === listVersion) { rows.value = []; total.value = 0 } } finally { if (version === listVersion) loading.value = false }
+    else error.value = res.msg || '渠道激活查询失败，请重试'
+  } catch { if (version === listVersion) error.value = '渠道激活查询失败，请重试' } finally { if (version === listVersion) loading.value = false }
 }
 const search = () => { query.pageNum = 1; return load() }
 const reset = () => { Object.assign(query, { platformNames: Object.keys(platforms), promoteAccount: '', busierAccount: '' }); return search() }

web/src/view/sw/RankingAnalysis.vue

@@ -14,13 +14,7 @@
     <div v-loading="loading" class="ranking-panels">
       <div v-for="panel in panels" :key="panel.key" class="kra-table-box ranking-panel">
         <h3>{{ panel.title }}</h3>
-        <el-table :data="displayRows(panel)" row-key="rowKey" :row-class-name="({ row }) => row.rank <= 3 && !row.placeholder ? 'ranking-top' : ''">
-          <el-table-column label="所属平台" min-width="90"><template #default="{ row }">{{ row.sourceDbLabel || '—' }}</template></el-table-column>
-          <el-table-column label="#" width="45"><template #default="{ row }">{{ row.placeholder ? '—' : row.rank }}</template></el-table-column>
-          <el-table-column :label="`${dimensions[dimension]}名称`" min-width="130" show-overflow-tooltip><template #default="{ row }">{{ row.objectName || '—' }}</template></el-table-column>
-          <el-table-column :label="panel.label" min-width="125"><template #default="{ row }">{{ metric(panel, row.metricValue) }}</template></el-table-column>
-          <el-table-column label="上期环比" min-width="112"><template #default="{ row }"><el-text :type="row.momStatus > 0 ? 'success' : row.momStatus < 0 ? 'danger' : 'info'">{{ change(panel, row) }}</el-text></template></el-table-column>
-        </el-table>
+        <compact-ranking-table :title="panel.title" :rows="displayRows(panel)" :identity-label="dimensions[dimension]" :metric-label="panel.label" :value-formatter="value => metric(panel, value)" :wide-metric="panel.money" show-change />
       </div>
     </div>
   </div>
@@ -30,6 +24,7 @@
 import { computed, onMounted, reactive, ref } from 'vue'
 import { listRankings } from '@/api/ranking'
 import { channelCount, channelMoney } from './channel-display'
+import CompactRankingTable from './components/CompactRankingTable.vue'
 defineOptions({ name: 'RankingAnalysis' })
 const platforms = { lx: '龙翔', hw: '汇玩', yq: '游趣' }, dimensions = { channel: '渠道', business: '商务', game: '游戏' }
 const sources = ref(Object.keys(platforms)), dimension = ref('channel')
@@ -53,7 +48,6 @@ const displayRows = panel => {
   return rows
 }
 const metric = (panel, value) => value == null ? '—' : panel.money ? channelMoney(value) : panel.rate ? `${value}%` : channelCount(value)
-const change = (panel, row) => row.momValue == null ? '—' : `${row.momStatus > 0 ? '+' : ''}${row.momValue}${panel.rate ? ' 个百分点' : '%'}`
 const load = async () => {
   const current = ++version; loading.value = true; result.value = null; error.value = ''; available.value = true
   try {
@@ -70,9 +64,9 @@ onMounted(load)
 </script>
 
 <style scoped>
-.ranking-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
-.ranking-panel { min-width: 0; }
-.ranking-panel h3 { margin: 0 0 16px; font-weight: 600; }
-:deep(.ranking-top) { --el-table-tr-bg-color: var(--el-color-primary-light-9); }
-@media (max-width: 1100px) { .ranking-panels { grid-template-columns: 1fr; } }
+.ranking-panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
+.ranking-panel { min-width: 0; padding: 14px 10px; }
+.ranking-panel h3 { margin: 0 0 12px; font-weight: 600; }
+@media (max-width: 1279px) { .ranking-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 767px) { .ranking-panels { grid-template-columns: 1fr; } }
 </style>

web/src/view/sw/components/CompactRankingTable.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="compact-ranking">
+    <div class="ranking-table-wrap">
+      <table class="ranking-table">
+        <caption class="sr-only">{{ title }}</caption>
+        <colgroup>
+          <col class="ranking-position-col"><col><col class="ranking-platform-col">
+          <col :class="wideMetric ? 'ranking-money-col' : 'ranking-metric-col'">
+          <col v-if="showChange" class="ranking-change-col">
+        </colgroup>
+        <thead><tr>
+          <th scope="col">#</th><th scope="col">{{ identityLabel }}</th><th scope="col">平台</th>
+          <th scope="col" class="ranking-numeric">{{ metricLabel }}</th>
+          <th v-if="showChange" scope="col" class="ranking-numeric">上期环比</th>
+        </tr></thead>
+        <tbody>
+          <tr v-for="row in rows" :key="row.rowKey" :class="{ 'ranking-top': row.rank <= 3 && !row.placeholder }">
+            <td class="ranking-number">{{ row.placeholder ? '—' : row.rank }}</td>
+            <td :title="row.objectName">{{ row.objectName || '—' }}</td>
+            <td class="ranking-platform">{{ row.sourceDbLabel || '—' }}</td>
+            <td class="ranking-numeric" :title="valueFormatter(row.metricValue)">{{ valueFormatter(row.metricValue) }}</td>
+            <td v-if="showChange" class="ranking-numeric" :title="change(row)"><span :class="row.momStatus > 0 ? 'ranking-up' : row.momStatus < 0 ? 'ranking-down' : 'ranking-platform'">{{ change(row) }}</span></td>
+          </tr>
+          <tr v-if="!rows.length"><td :colspan="showChange ? 5 : 4" class="ranking-empty">{{ emptyText }}</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  rows: { type: Array, required: true },
+  identityLabel: { type: String, default: '渠道' },
+  metricLabel: { type: String, required: true },
+  valueFormatter: { type: Function, required: true },
+  wideMetric: Boolean,
+  showChange: Boolean,
+  emptyText: { type: String, default: '暂无数据' }
+})
+const change = row => row.momValue == null ? '—' : `${row.momStatus > 0 ? '+' : ''}${row.momValue}%`
+</script>
+
+<style scoped>
+.compact-ranking { min-width: 0; container-type: inline-size; }
+.ranking-table-wrap { border: 1px solid var(--el-border-color-lighter); border-radius: 6px; overflow: hidden; }
+.ranking-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
+.ranking-position-col { width: 30px; }
+.ranking-platform-col { width: 38px; }
+.ranking-metric-col { width: 66px; }
+.ranking-money-col { width: 102px; }
+.ranking-change-col { width: 96px; }
+.ranking-table th, .ranking-table td { height: 38px; box-sizing: border-box; padding: 0 5px; border-bottom: 1px solid var(--el-border-color-lighter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
+.ranking-table th { height: 36px; color: var(--el-text-color-secondary); font-size: 12px; font-weight: 500; background: var(--el-fill-color-light); }
+.ranking-table tr:last-child td { border-bottom: 0; }
+.ranking-table .ranking-numeric { text-align: right; }
+.ranking-table .ranking-top { background: var(--el-color-primary-light-9); }
+.ranking-table tbody tr:hover { background: var(--el-fill-color-light); }
+.ranking-table .ranking-empty { height: 100px; text-align: center; color: var(--el-text-color-secondary); }
+.ranking-platform, .ranking-number { color: var(--el-text-color-secondary); font-size: 12px; }
+.ranking-up { color: var(--el-color-success); }
+.ranking-down { color: var(--el-color-danger); }
+@container (max-width: 300px) {
+  .ranking-table { font-size: 12px; }
+  .ranking-position-col { width: 24px; }
+  .ranking-platform-col { width: 28px; }
+  .ranking-metric-col { width: 58px; }
+  .ranking-money-col { width: 86px; }
+  .ranking-change-col { width: 80px; }
+  .ranking-table th, .ranking-table td { padding: 0 2px; }
+}
+</style>