From 1650a050e635202709f91e879215590c9bd00412 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Fri, 4 Sep 2026 22:14:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(analytics):=20A3=20=E6=B5=81=E5=A4=B1?=
 =?UTF-8?q?=E9=A2=84=E8=AD=A6=E9=A1=B5=E2=80=94=E2=80=94=E4=B8=89=E5=88=86?=
 =?UTF-8?q?=E6=B3=95/=E5=88=86=E5=B1=82/CSV=E5=AF=BC=E5=87=BA/=E8=B7=B3?=
 =?UTF-8?q?=E8=81=8A=E5=A4=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 yunkes/src/views/analytics/ChurnView.vue | 226 ++++++++++++++++++++++-
 1 file changed, 222 insertions(+), 4 deletions(-)

diff --git a/yunkes/src/views/analytics/ChurnView.vue b/yunkes/src/views/analytics/ChurnView.vue
index 8af9be1..d0c2b8a 100644
--- a/yunkes/src/views/analytics/ChurnView.vue
+++ b/yunkes/src/views/analytics/ChurnView.vue
@@ -1,8 +1,226 @@
 <template>
-  <div class="page">
-    <h2>流失预警</h2>
-    <p>实现于后续任务</p>
+  <div class="churn-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-select v-if="kind === 'real'" v-model="tier" @change="reload" class="tier-select">
+        <el-option :value="30" label="沉默 30-60 天" />
+        <el-option :value="60" label="沉默 60-90 天" />
+        <el-option :value="90" label="沉默 90 天+" />
+      </el-select>
+      <el-button :loading="exporting" @click="exportCsv">导出 CSV</el-button>
+      <span v-if="asOfText" class="as-of">数据截至 {{ asOfText }}</span>
+    </div>
+
+    <!-- el-tabs 的事件名是 tab-change(无 change;v-model 只换值不触发重查) -->
+    <el-tabs v-model="kind" @tab-change="reload">
+      <el-tab-pane label="真流失" name="real" />
+      <el-tab-pane label="从未激活" name="inactive" />
+      <el-tab-pane label="待交接" name="handover" />
+    </el-tabs>
+    <div class="kind-hint">{{ kindHint }}</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="nickname" label="客户" min-width="160" show-overflow-tooltip />
+      <el-table-column label="归属员工" min-width="150">
+        <template #default="{ row }">{{ row.owner_account_id || row.user_id || '-' }}</template>
+      </el-table-column>
+      <el-table-column label="最后沟通" width="170">
+        <template #default="{ row }">{{ row.last_chat_time ? formatTime(row.last_chat_time) : '从未沟通' }}</template>
+      </el-table-column>
+      <el-table-column prop="hist_msgs" label="历史消息量" width="110" sortable />
+      <el-table-column prop="active_days" label="活跃天数" width="100" sortable />
+    </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">
+// A3 流失预警(spec §3.3):三分法 tab(真流失/从未激活/待交接) + 渠道切换 +
+// 沉默分层(仅真流失) + CSV 导出 + 行点击跳聊天窗。
+// 数据来自 /analytics/churn;/analytics/health 挂载拉一次做「数据截至」角标。
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { getAnalyticsHealth, getChurn, type Channel, type ChurnRow } from '@/api/analytics'
+import { exportListToCsv } from '@/utils/csvExport'
+import { channelLabel, formatTime, formatTimeShort } from '@/utils/format'
+
+type ChurnKind = 'real' | 'inactive' | 'handover'
+
+// 三分法口径随 tab 展示(小字),避免用户把「从未激活」误读成「真流失的轻档」
+const KIND_HINTS: Record<ChurnKind, string> = {
+  real: '真流失＝历史消息 ≥5 且连续沉默（按上方分层筛选）',
+  inactive: '从未激活＝加好友后从未有过沟通',
+  handover: '待交接＝归属员工已离职，客户等待重新分配',
+}
+
+const router = useRouter()
+const channel = ref<Channel>('wechat')
+const kind = ref<ChurnKind>('real')
+const tier = ref(30)
+const page = ref(1)
+const pageSize = 20
+const rows = ref<ChurnRow[]>([])
+const total = ref(0)
+const loading = ref(false)
+const exporting = ref(false)
+const error = ref('')
+const asOf = ref<number | null>(null)
+
+let seq = 0 // 竞态守卫:channel/tier/tab 快速切换时旧响应作废(DashboardView 定型模式)
+
+async function load() {
+  const my = ++seq
+  loading.value = true
+  error.value = ''
+  try {
+    const resp = await getChurn({
+      channel: channel.value,
+      type: kind.value,
+      // tier 仅 real 分支生效(后端 inactive/handover 忽略);值恒为 30/60/90 不会 422
+      tier: tier.value,
+      min_msgs: 5,
+      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))
+const kindHint = computed(() => KIND_HINTS[kind.value])
+
+// 归属账号缺失(未映射/历史数据)无法定位聊天窗,不标可点击样式(全局类,style.css)
+function rowClass({ row }: { row: ChurnRow }): string {
+  return row.owner_account_id ? 'yk-clickable-row' : ''
+}
+
+// 行点击跳聊天窗(项目惯例,同 CustomerList.viewChat):微信→员工聊天窗口
+// single tab;WA→ChatTimeline。owner 为空不跳,响亮提示。
+function goChat(row: ChurnRow) {
+  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.friend_id },
+    })
+    return
+  }
+  router.push({
+    name: 'chat',
+    params: { channel: row.channel, ownerId: row.owner_account_id, talkerId: row.friend_id },
+  })
+}
+
+// CSV 平铺带「归属员工」列 = v1 简化:spec 的「按员工分组」语义由表格列承担
+// (spec §3.3 注)。exportListToCsv 自带全量翻页 + BOM + 10000 行安全上限。
+async function exportCsv() {
+  exporting.value = true
+  try {
+    await exportListToCsv<ChurnRow>({
+      fetchPage: (p, size) =>
+        getChurn({
+          channel: channel.value,
+          type: kind.value,
+          tier: tier.value,
+          min_msgs: 5,
+          page: p,
+          page_size: size,
+        }),
+      columns: [
+        { key: 'nickname', label: '客户' },
+        { key: 'channel', label: '渠道', format: (r) => channelLabel(r.channel) },
+        { key: 'owner_account_id', label: '归属员工' },
+        {
+          key: 'last_chat_time',
+          label: '最后沟通',
+          format: (r) => (r.last_chat_time ? formatTime(r.last_chat_time) : '从未沟通'),
+        },
+        { key: 'hist_msgs', label: '历史消息量' },
+        { key: 'active_days', label: '活跃天数' },
+      ],
+      filename: `流失预警_${kind.value}_${channel.value}`,
+    })
+  } catch (e) {
+    ElMessage.error(`导出失败：${e instanceof Error ? e.message : String(e)}`)
+  } finally {
+    exporting.value = false
+  }
+}
+
+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;
+  margin-bottom: 8px;
+}
+.tier-select {
+  width: 150px;
+}
+.as-of {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  margin-left: auto;
+}
+.kind-hint {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  margin: 0 0 12px;
+}
+.error-bar {
+  margin-bottom: 12px;
+}
+.pager {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>