fix: align business pages and detail drawers with prototype

web/src/view/sw/ChannelList.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="sw-page">
-    <div class="channel-status-summary"><el-card v-for="card in statusCards" :key="card.label" shadow="never"><el-tooltip content="统计当前筛选结果的全部渠道，正常、锁定、解除合作三类互斥，合计等于渠道数量。"><span>{{ card.label }}</span></el-tooltip><strong>{{ card.value == null ? '—' : channelCount(card.value) }}</strong></el-card></div>
     <div class="kra-search-box">
       <el-form :model="query" :inline="true" @submit.prevent="search">
         <el-form-item label="所属平台"><el-select v-model="sources" multiple collapse-tags clearable placeholder="选择平台" style="width: 210px"><el-option v-for="(label, value) in platforms" :key="value" :label="label" :value="value" /></el-select></el-form-item>
@@ -19,6 +18,13 @@
     </div>
     <div class="kra-table-box">
       <div class="kra-btn-list"><el-button v-if="canAdd" type="primary" icon="plus" @click="adding = true">添加渠道</el-button></div>
+      <div class="channel-status-summary" role="status">
+        <div v-for="card in statusCards" :key="card.label" class="channel-status-item">
+          <el-tooltip content="统计当前筛选结果的全部渠道，正常、锁定、解除合作三类互斥，合计等于渠道数量。"><span>{{ card.label }}</span></el-tooltip>
+          <strong :class="card.type">{{ card.value == null ? '—' : channelCount(card.value) }}</strong>
+        </div>
+        <span class="channel-status-hint">按当前搜索结果统计</span>
+      </div>
       <el-alert v-if="!available" class="mb-4" type="warning" :closable="false" title="渠道数据尚未接入。" />
       <el-alert v-if="error" class="mb-4" type="error" :closable="false" :title="error" />
       <el-table scrollbar-always-on v-loading="loading" :data="rows" :row-key="row => `${row.sourceDb}:${row.id}`" @sort-change="sortChanged">
@@ -33,8 +39,8 @@
         <el-table-column label="结算周期" width="110"><template #default="{ row }">{{ row.settlementDays == null ? '—' : `${row.settlementDays} 天` }}</template></el-table-column>
         <el-table-column label="渠道类型" min-width="100"><template #default="{ row }"><el-tag v-if="row.registerType === 0 || row.registerType === 1" size="small" :type="row.registerType === 1 ? 'warning' : 'info'" effect="plain">{{ row.registerType === 1 ? '公会' : '个人' }}</el-tag><span v-else class="sw-empty-value">—</span></template></el-table-column>
         <el-table-column label="推广游戏" min-width="115"><template #default="{ row }"><el-button v-if="row.gameCount != null" link type="primary" @click="openGames(row)">{{ channelCount(row.gameCount) }} 款</el-button><span v-else>未接入</span></template></el-table-column>
-        <el-table-column label="玩家数量" min-width="110" align="right" class-name="sw-col-number"><template #default="{ row }"><metric-value :value="row.playerCount" /></template></el-table-column>
-        <el-table-column label="累计充值" min-width="150" align="right" class-name="sw-col-number"><template #default="{ row }"><metric-value kind="money" :value="row.totalPayAmount" /></template></el-table-column>
+        <el-table-column prop="playerCount" label="玩家数量" min-width="110" align="right" class-name="sw-col-number" sortable="custom" :sort-orders="['descending','ascending',null]"><template #default="{ row }"><metric-value :value="row.playerCount" /></template></el-table-column>
+        <el-table-column prop="totalPayAmount" label="累计充值" min-width="150" align="right" class-name="sw-col-number" sortable="custom" :sort-orders="['descending','ascending',null]"><template #default="{ row }"><metric-value kind="money" :value="row.totalPayAmount" /></template></el-table-column>
         <el-table-column prop="createdAt" label="注册时间" min-width="150" sortable="custom" :sort-orders="['descending','ascending',null]" class-name="sw-col-meta"><template #default="{ row }">{{ dateText(row.createdAt) }}</template></el-table-column>
         <el-table-column label="最后登录时间" min-width="150" class-name="sw-col-meta"><template #default="{ row }">{{ row.lastLoginAt ? dateText(row.lastLoginAt) : '—' }}</template></el-table-column>
         <el-table-column label="有效端" width="100"><template #default="{ row }"><el-tag size="small" :type="row.effective ? 'success' : 'info'">{{ row.effective ? '是' : '否' }}</el-tag></template></el-table-column>
@@ -51,7 +57,8 @@
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, onBeforeUnmount, onDeactivated, onActivated, reactive, ref } from 'vue'
+import { createLatestRequest } from '@/utils/latestRequest'
 import { ElMessage } from 'element-plus'
 import { useUserStore } from '@/pinia/modules/user'
 import { useBtnAuth } from '@/utils/btnAuth'
@@ -68,14 +75,14 @@ import ChannelProfileDrawer from './components/ChannelProfileDrawer.vue'
 defineOptions({ name: 'SwChannelList' })
 const user = useUserStore()
 const buttons = useBtnAuth()
-const canAdd = computed(() => Number(user.userInfo.authorityId) === 888 || !!buttons['sw:promote:add'])
+const canAdd = computed(() => Number(user.userInfo.authorityId) === 888 || Number(user.userInfo.level) === 3 && !!buttons['sw:promote:add'])
 const platforms = { lx: '龙翔', hw: '汇玩', yq: '游趣' }
 const levels = { 1: '一级渠道', 2: '二级渠道', 3: '三级渠道' }
 const statuses = { 0: '正常', '-1': '已锁定', '-2': '解除合作' }
 const sources = ref(Object.keys(platforms))
 const query = reactive({ pageNum: 1, pageSize: 10, busierAccount: '', keyword: '', phone: '', settlementDays: undefined, promoteLevel: undefined, registerType: undefined, lockStatus: undefined, effective: undefined, sortField: '', sortOrder: '' })
 const createdDates = ref([]), loginDates = ref([]), statusCounts = ref(null), error = ref('')
-const statusCards = computed(() => [{ label: '渠道数量', value: statusCounts.value ? total.value : null }, { label: '正常渠道', value: statusCounts.value?.normal }, { label: '锁定渠道', value: statusCounts.value?.locked }, { label: '解除合作', value: statusCounts.value?.terminated }])
+const statusCards = computed(() => [{ label: '渠道数量', type: 'total', value: statusCounts.value ? total.value : null }, { label: '正常渠道', type: 'normal', value: statusCounts.value?.normal }, { label: '锁定渠道', type: 'locked', value: statusCounts.value?.locked }, { label: '解除合作', type: 'terminated', value: statusCounts.value?.terminated }])
 const rows = ref([])
 const total = ref(0)
 const available = ref(true)
@@ -87,12 +94,15 @@ const profileOpen = ref(false)
 const profileChannel = ref(null)
 const openProfile = row => { profileChannel.value = row; profileOpen.value = true }
 let requestVersion = 0
+const requests = createLatestRequest()
+let interrupted = false
 const load = async () => {
   const version = ++requestVersion
+  const request = requests.start()
   if (!sources.value.length) { rows.value = []; total.value = 0; statusCounts.value = null; error.value = ''; available.value = true; loading.value = false; return }
   loading.value = true; error.value = ''
   try {
-    const res = await listChannels({ ...query, sourceDb: sources.value.join(','), busierAccount: query.busierAccount.trim(), keyword: query.keyword.trim(), phone: query.phone.trim(), createdBegin: createdDates.value?.[0] || '', createdEnd: createdDates.value?.[1] || '', loginBegin: loginDates.value?.[0] || '', loginEnd: loginDates.value?.[1] || '' })
+    const res = await listChannels({ ...query, sourceDb: sources.value.join(','), busierAccount: query.busierAccount.trim(), keyword: query.keyword.trim(), phone: query.phone.trim(), createdBegin: createdDates.value?.[0] || '', createdEnd: createdDates.value?.[1] || '', loginBegin: loginDates.value?.[0] || '', loginEnd: loginDates.value?.[1] || '' }, { signal: request.signal })
     if (version !== requestVersion) return
     if (res.code === 0) { rows.value = res.data.rows; total.value = res.data.total; statusCounts.value = res.data.available === false ? null : res.data.statusCounts; available.value = res.data.available !== false }
     else { rows.value = []; total.value = 0; statusCounts.value = null; error.value = res.msg || '渠道查询失败' }
@@ -102,10 +112,19 @@ const sortChanged = ({ prop, order }) => { query.sortField = order ? prop : '';
 const search = () => { query.pageNum = 1; if (!sources.value.length) ElMessage.warning('请选择平台'); return load() }
 const openGames = row => { selected.value = row; gamesOpen.value = true }
 onMounted(load)
+const cancel = () => { ++requestVersion; requests.cancel(); loading.value = false }
+onBeforeUnmount(cancel)
+onDeactivated(() => { interrupted = loading.value; cancel() })
+onActivated(() => { if (interrupted) { interrupted = false; load() } })
 </script>
 <style scoped>
-.channel-status-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
+.channel-status-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; padding: 12px 16px; margin-bottom: 14px; border-radius: 6px; background: var(--el-fill-color-light); }
+.channel-status-item { display: inline-flex; align-items: baseline; gap: 8px; }
 .channel-status-summary span { color: var(--el-text-color-secondary); font-size: 13px; }
-.channel-status-summary strong { display: block; font-size: 26px; margin-top: 10px; }
-@media(max-width:600px) { .channel-status-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } }
+.channel-status-summary strong { font-size: 20px; font-variant-numeric: tabular-nums; }
+.channel-status-summary .total { color: var(--el-color-primary); }
+.channel-status-summary .normal { color: var(--el-color-success); }
+.channel-status-summary .locked { color: var(--el-color-warning); }
+.channel-status-summary .terminated { color: var(--el-color-danger); }
+.channel-status-hint { margin-left: auto; }
 </style>