feat(analytics): B2 该回未回页——时长筛选/等待着色/msgid定位跳转

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-09-04 22:33:32 +08:00
parent 54ed7e745b
commit 1ba6768a46
1 changed files with 188 additions and 4 deletions
@@ -1,8 +1,192 @@
 <template>
-  <div class="page">
-    <h2>该回未回</h2>
-    <p>实现于后续任务</p>
+  <div class="unreplied-page">
+    <div class="toolbar">
+      <el-radio-group v-model="channel" @change="reload">
+        <el-radio-button value="wechat">微信</el-radio-button>
+        <el-radio-button value="whatsapp">WhatsApp</el-radio-button>
+      </el-radio-group>
+      <el-radio-group v-model="hours" @change="reload">
+        <el-radio-button :value="1">超 1h</el-radio-button>
+        <el-radio-button :value="2">超 2h</el-radio-button>
+        <el-radio-button :value="4">超 4h</el-radio-button>
+        <el-radio-button :value="24">超 24h</el-radio-button>
+      </el-radio-group>
+      <span v-if="asOfText" class="as-of">数据截至 {{ asOfText }}</span>
+    </div>
+    <div class="hint">
+      尾部为客户消息且超过 {{ hours }} 小时未回应的对话（通话也算已回应）。点击行可跳转聊天窗定位该消息。
+    </div>
+
+    <el-alert v-if="error" type="error" :title="error" :closable="false" class="error-bar" />
+
+    <el-table v-loading="loading" :data="rows" :row-class-name="rowClass" @row-click="goChat">
+      <el-table-column prop="peer_id" label="客户" min-width="150" show-overflow-tooltip />
+      <el-table-column prop="owner_account_id" label="员工账号" width="170" />
+      <el-table-column label="最后消息" width="170">
+        <template #default="{ row }">{{ formatTime(row.last_ts) }}</template>
+      </el-table-column>
+      <el-table-column label="等待时长" width="130">
+        <template #default="{ row }">
+          <span :class="{ hot: row.wait_ms > DAY_MS }">{{ fmtWait(row.wait_ms) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="preview" label="预览" min-width="240" show-overflow-tooltip />
+    </el-table>
+
+    <el-pagination
+      :current-page="page"
+      :page-size="pageSize"
+      :total="total"
+      layout="total, prev, pager, next"
+      class="pager"
+      @current-change="onPageChange"
+    />
  </div>
 </template>

-<script setup lang="ts"></script>
+<script setup lang="ts">
+// B2 该回未回(行动清单,非报表):尾部为客户消息且超 N 小时未回应的对话。
+// channel + 时长筛选 + 等待着色(>24h danger) + 行点击跳聊天窗(微信带
+// ?msgid= 定位该条消息)。数据来自 /analytics/unreplied;不导出 CSV。
+// health 挂载拉一次做「数据截至」角标(seq/分页/health-once 均照 ChurnView)。
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { getAnalyticsHealth, getUnreplied, type Channel, type UnrepliedRow } from '@/api/analytics'
+import { formatTime, formatTimeShort } from '@/utils/format'
+
+const DAY_MS = 24 * 3600 * 1000
+
+const router = useRouter()
+const channel = ref<Channel>('wechat')
+const hours = ref(1)
+const page = ref(1)
+const pageSize = 20
+const rows = ref<UnrepliedRow[]>([])
+const total = ref(0)
+const loading = ref(false)
+const error = ref('')
+const asOf = ref<number | null>(null)
+
+let seq = 0 // 竞态守卫:channel/hours 快速切换时旧响应作废(ChurnView 定型模式)
+
+async function load() {
+  const my = ++seq
+  loading.value = true
+  error.value = ''
+  try {
+    const resp = await getUnreplied({
+      channel: channel.value,
+      hours: hours.value,
+      page: page.value,
+      page_size: pageSize,
+    })
+    if (my !== seq) return
+    rows.value = resp.items
+    total.value = resp.total
+  } catch (e) {
+    if (my === seq) error.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    // 过期请求不清 loading(新一轮还在飞)也不覆盖 error
+    if (my === seq) loading.value = false
+  }
+}
+
+// 筛选切换回第一页再查
+function reload() {
+  page.value = 1
+  load()
+}
+
+// 分页翻页:vue-tsc strict 不推 inline-arrow 参数,单列包装(项目惯例)
+function onPageChange(p: number): void {
+  page.value = p
+  load()
+}
+
+const asOfText = computed(() => formatTimeShort(asOf.value))
+
+/**
+ * 等待时长:`X时Y分`(不满一天)/ `X天Y时`(满一天起)。
+ * >24h 由模板加 danger 色(.hot),这里只管文字。
+ */
+function fmtWait(ms: number): string {
+  if (!Number.isFinite(ms) || ms <= 0) return '--'
+  const minutes = Math.floor(ms / 60000)
+  const h = Math.floor(minutes / 60)
+  if (h < 24) return `${h}时${minutes % 60}分`
+  return `${Math.floor(h / 24)}天${h % 24}时`
+}
+
+// owner 理论恒非空(候选集来自 msg_daily_stats 的 owner),防御性判空不亏
+function rowClass({ row }: { row: UnrepliedRow }): string {
+  return row.owner_account_id ? 'yk-clickable-row' : ''
+}
+
+/**
+ * 行点击跳聊天窗:微信→员工聊天窗 single tab 并带 ?msgid= 定位最后一条
+ * 客户消息(同 StatsPane 红包明细跳转);WA→ChatTimeline。owner 缺失
+ * 不跳,响亮提示(同 ChurnView)。
+ */
+function goChat(row: UnrepliedRow) {
+  if (!row.owner_account_id) {
+    ElMessage.warning('该对话缺少归属账号，无法查看聊天记录')
+    return
+  }
+  if (row.channel === 'wechat') {
+    router.push({
+      name: 'staff-chat',
+      params: { ownerId: row.owner_account_id, tab: 'single', talkerId: row.peer_id },
+      query: row.msg_id ? { msgid: row.msg_id } : undefined,
+    })
+    return
+  }
+  router.push({
+    name: 'chat',
+    params: { channel: row.channel, ownerId: row.owner_account_id, talkerId: row.peer_id },
+  })
+}
+
+onMounted(() => {
+  load()
+  // health(数据截至)与筛选无关,挂载拉一次即可;失败只影响角标(静默隐藏),
+  // 不进页面 error alert
+  getAnalyticsHealth()
+    .then((h) => {
+      asOf.value = h.data_as_of
+    })
+    .catch(() => {})
+})
+</script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+.as-of {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  margin-left: auto;
+}
+.hint {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  margin: 0 0 12px;
+}
+.error-bar {
+  margin-bottom: 12px;
+}
+.hot {
+  color: var(--el-color-danger);
+  font-weight: 600;
+}
+.pager {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>