feat(staffchat): 入口改造(StaffList/CustomerList微信行切新页)+useStaffProfile缓存+StatsPane固定列/金额格式+vitest依赖化

Co-Authored-By: Claude <noreply@anthropic.com>

yunkes/src/components/staffchat/StatsPane.vue

@@ -4,11 +4,12 @@
      根元素必须保持单 div——父组件 StaffChat 靠 attrs fallthrough 挂
      sc-root__pane 列宽。 -->
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, toRef, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { getAccounts, getStaffStatsCounts, getStaffStatsDetail } from '@/api'
+import { getStaffStatsCounts, getStaffStatsDetail } from '@/api'
 import type { StaffStatsKind } from '@/api'
-import type { Account, StaffStatsCounts } from '@/api/types'
+import type { StaffStatsCounts } from '@/api/types'
+import { useStaffProfile } from '@/composables/useStaffProfile'
 import {
   callDirectionLabel,
   formatCallDuration,
@@ -74,6 +75,8 @@ interface Col {
   label: string
   /** link=客户/群点击跳聊天;staff=员工微信(资料卡);缺省按 prop 特判文本。 */
   kind?: 'link' | 'staff'
+  /** 操作列固定右侧(对齐云客,防横向滚动时被挤出视口)。 */
+  fixed?: 'right'
 }
 
 const KIND_COLS: Partial<Record<KindKey, Col[]>> = {
@@ -94,7 +97,7 @@ const KIND_COLS: Partial<Record<KindKey, Col[]>> = {
     { prop: 'staff', label: '员工微信', kind: 'staff' },
     { prop: 'amount', label: '金额' },
     { prop: 'time', label: '发生时间' },
-    { prop: '_action', label: '操作' },
+    { prop: '_action', label: '操作', fixed: 'right' },
   ],
   del_customers: [
     { prop: 'nickname', label: '客户微信', kind: 'link' },
@@ -137,18 +140,10 @@ function windowParams(): { start?: number; end?: number } {
 }
 
 // ---- 员工微信列数据: 后端明细行无 staff 字段——数据本就是该员工的统计,
-//      用资料卡信息渲染(nickname/avatar,与 StaffChat 同款 getAccounts 手法) ----
+//      用资料卡信息渲染(nickname/avatar;useStaffProfile 与 StaffChat 资料卡
+//      共享模块级缓存,全 app 一份请求) ----
 
-const profile = ref<Account | null>(null)
-
-async function loadProfile(): Promise<void> {
-  try {
-    const res = await getAccounts({ channel: 'wechat', page: 1, page_size: 100 })
-    profile.value = res.items.find(a => a.account_id === props.ownerId) ?? null
-  } catch {
-    profile.value = null // 后端未起: 员工列退化为 ownerId 兜底
-  }
-}
+const { profile } = useStaffProfile(toRef(props, 'ownerId'))
 
 const staffName = computed(() => profile.value?.nickname || props.ownerId)
 
@@ -231,7 +226,6 @@ watch(
   () => props.ownerId,
   () => {
     dateRange.value = defaultRange()
-    void loadProfile()
     void loadCounts()
     void loadDetail()
   },
@@ -431,7 +425,8 @@ function playRecord(row: StatsRow): void {
               v-for="col in activeCols"
               :key="col.prop"
               :label="col.label"
-              :min-width="col.kind === 'link' || col.kind === 'staff' ? 150 : col.prop === '_action' ? 110 : 110"
+              :fixed="col.fixed"
+              :min-width="col.kind === 'link' || col.kind === 'staff' ? 150 : 110"
             >
               <template #default="{ row }">
                 <!-- link 列: 客户/群 → 跳本员工聊天窗 -->
@@ -473,7 +468,9 @@ function playRecord(row: StatsRow): void {
 
                 <!-- 时间/金额/操作列特判,其余纯文本 -->
                 <template v-else-if="col.prop === 'time'">{{ formatTime(row.time) }}</template>
-                <template v-else-if="col.prop === 'amount'">{{ row.amount ?? '—' }}</template>
+                <template v-else-if="col.prop === 'amount'">{{
+                  row.amount != null ? '￥' + row.amount.toFixed(2) : '—'
+                }}</template>
                 <template v-else-if="col.prop === '_action'">
                   <el-button link type="primary" size="small" @click="goChat(row, true)">
                     查看聊天记录

yunkes/src/composables/useStaffProfile.ts

@@ -0,0 +1,58 @@
+import { ref, watch, type Ref } from 'vue'
+import { getAccounts } from '@/api'
+import type { Account } from '@/api/types'
+
+/**
+ * 员工资料(模块级缓存,全 app 一份请求)。avatar/nickname/phone 等。
+ *
+ * StaffChat(资料卡)与 StatsPane(员工微信列)原先各持一份相同的
+ * getAccounts(wechat, 100) + find 实现——提取为 composable 并加模块级缓存。
+ * 一次响应的 100 条整页入缓存,同页其它员工切换 owner 直接命中不再请求;
+ * 未命中/失败写 null(负缓存),避免重复打失败请求。
+ */
+const cache = new Map<string, Account | null>()
+
+/** 命中缓存直接回调;否则请求一页 wechat 账号,整页回写缓存后回调。 */
+async function fetchProfile(ownerId: string, apply: (a: Account | null) => void): Promise<void> {
+  if (cache.has(ownerId)) {
+    apply(cache.get(ownerId) ?? null)
+    return
+  }
+  try {
+    const res = await getAccounts({ channel: 'wechat', page: 1, page_size: 100 })
+    for (const a of res.items) cache.set(a.account_id, a)
+    // find 不到也写 null(负缓存)
+    const hit = cache.get(ownerId) ?? null
+    cache.set(ownerId, hit)
+    apply(hit)
+  } catch {
+    cache.set(ownerId, null)
+    apply(null)
+  }
+}
+
+/**
+ * @param ownerId 员工 account_id(wxid);响应式传入时自动随变更重载
+ * @returns profile 资料卡(null=未命中/失败,调用方自行兜底显示 ownerId);
+ *   load 手动重载入口(watch immediate 已覆盖常规场景,一般无需调用)
+ */
+export function useStaffProfile(ownerId: string | Ref<string>): {
+  profile: Ref<Account | null>
+  load: () => void
+} {
+  const idRef = typeof ownerId === 'string' ? ref(ownerId) : ownerId
+  const profile = ref<Account | null>(cache.get(idRef.value) ?? null)
+  // token 守卫: ownerId 快速切换时,旧 in-flight 响应不回写新 profile
+  let token = 0
+
+  function load(): void {
+    const my = ++token
+    const id = idRef.value
+    void fetchProfile(id, (a) => {
+      if (my === token) profile.value = a
+    })
+  }
+
+  watch(idRef, load, { immediate: true })
+  return { profile, load }
+}

yunkes/src/utils/__tests__/format.spec.ts

@@ -1,6 +1,6 @@
-// relativeChatTime 单测。注意: 项目尚未安装 vitest(devDependency 缺失),
-// 本文件暂时不被 vue-tsc 检查(tsconfig.app.json exclude __tests__),装上
-// vitest 后 `npx vitest run` 即可执行。
+// relativeChatTime 单测(vitest)。本文件不进 app 构建/类型检查
+// (tsconfig.app.json exclude __tests__,vitest 自行解析类型),
+// `npm run test` 执行。
 import { describe, expect, it } from 'vitest'
 import { relativeChatTime } from '../format'
 

yunkes/src/views/CustomerList.vue

@@ -21,7 +21,8 @@ import { buildCustomerSections, fromTypeLabel, readField } from '@/utils/custome
  * WhatsApp客户 tab 对齐 云客 /cms/wechat/waBusiness/friendlist
  * (7 列: 序号/员工信息/员工WhatsApp/客户WhatsApp/添加时间/最新消息时间/操作).
  * 两 channel 列不同 → 各自独立列定义（同 StaffList 模式）。
- * 操作列「查看聊天记录」→ ChatTimeline；row-click 开全字段 drawer。
+ * 操作列「查看聊天记录」→ 微信走新员工聊天窗口(staff-chat)，WA 走 ChatTimeline；
+ * row-click 开全字段 drawer。
  * 读字段用 readField（structured-first + raw_json fallback）；时间用 cellTimeText
  * （number→formatTime，字符串直显）。
  */
@@ -249,12 +250,24 @@ function onWhatsappPageSizeChange(s: number): void { handlePageSizeChange('whats
 
 // 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）；go() 同时 setChannel，
 // 下方 channelStore watch 负责同步 activeTab + lazy-load。
-// ---- 操作列：查看聊天记录 → ChatTimeline ----
+// ---- 操作列：查看聊天记录。微信 → 新员工聊天窗口(single tab);
+//      WA 保持旧 ChatTimeline(新窗口仅微信)。 ----
 function viewChat(row: Customer): void {
   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: {

yunkes/src/views/StaffChat.vue

@@ -1,16 +1,15 @@
 <!-- 员工聊天窗口骨架(对齐云客 wechat-window): 左栏资料卡+导航 / 中列会话 / 右列内容。
      各 pane 由 Task 10-14 逐个替换占位实现。 -->
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import { useRouter } from 'vue-router'
-import { getAccounts } from '@/api'
-import type { Account } from '@/api/types'
 import StaffChatSide, { TAB_KEYS, type TabKey } from '@/components/staffchat/StaffChatSide.vue'
 import SessionPane from '@/components/staffchat/SessionPane.vue'
 import ChatMain from '@/components/staffchat/ChatMain.vue'
 import MomentsPane from '@/components/staffchat/MomentsPane.vue'
 import ContactsPane from '@/components/staffchat/ContactsPane.vue'
 import StatsPane from '@/components/staffchat/StatsPane.vue'
+import { useStaffProfile } from '@/composables/useStaffProfile'
 
 const props = defineProps<{ ownerId: string; tab?: string; talkerId?: string }>()
 const router = useRouter()
@@ -23,18 +22,10 @@ function isTabKey(v: string | undefined): v is TabKey {
 // 这里 computed 兜底 undefined/'' → single
 const tab = computed<TabKey>(() => (isTabKey(props.tab) ? props.tab : 'single'))
 
-const profile = ref<Account | null>(null)
+// 员工资料卡: useStaffProfile 模块级缓存(与 StatsPane 共享,全 app 一份请求);
+// 后端未起/未命中 → null,StaffChatSide 以 ownerId 兜底显示
+const { profile } = useStaffProfile(toRef(props, 'ownerId'))
 const collapsed = ref(false)
-async function loadProfile() {
-  try {
-    const res = await getAccounts({ channel: 'wechat', page: 1, page_size: 100 })
-    profile.value = res.items.find(a => a.account_id === props.ownerId) ?? null
-  } catch {
-    // 后端未起/请求失败: 资料卡退化为 ownerId 兜底显示
-    profile.value = null
-  }
-}
-watch(() => props.ownerId, loadProfile, { immediate: true })
 
 function onSelectTab(t: TabKey) {
   router.push({ name: 'staff-chat', params: { ownerId: props.ownerId, tab: t } })

yunkes/src/views/StaffList.vue

@@ -264,7 +264,12 @@ function viewGroups(row: Account): void {
 
 async function viewChat(row: Account) {
   // 账号级聊天窗口(左侧会话列表 + 右消息流);对齐云客 badge→聊天窗口。
-  await router.push({ name: 'chat', params: { channel: row.channel, ownerId: row.account_id } })
+  // 微信 → 新员工聊天窗口(五视图);WA 保持旧 ChatTimeline(新窗口仅微信)。
+  if (row.channel === 'wechat') {
+    await router.push({ name: 'staff-chat', params: { ownerId: row.account_id, tab: 'single' } })
+  } else {
+    await router.push({ name: 'chat', params: { channel: row.channel, ownerId: row.account_id } })
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -369,12 +374,13 @@ function joinFields(...vals: (string | undefined | null)[]): string {
   return parts.length ? parts.join(' ') : '--'
 }
 
-/** modal 客户微信 → 该员工×客户聊天(带 StaffList 当前日期窗)。缺失 owner/talker 静默 no-op。 */
+/** modal 客户微信 → 该员工×客户聊天(带 StaffList 当前日期窗)。缺失 owner/talker 静默 no-op。
+ *  微信 → 新员工聊天窗口 single tab(modal 跳转不带 msgid 定位)。 */
 function openCustomerChat(row: Account, customer: StaffChatCustomer): void {
   if (!row.account_id || !customer.talker_id) return
   router.push({
-    name: 'chat',
-    params: { channel: 'wechat', ownerId: row.account_id, talkerId: customer.talker_id },
+    name: 'staff-chat',
+    params: { ownerId: row.account_id, tab: 'single', talkerId: customer.talker_id },
     query: { start: String(statsStart.value), end: String(statsEnd.value) },
   })
 }