From 577617545fd2947e1568b61e5d322bebd66b75bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Thu, 10 Sep 2026 12:08:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(management):=20=E5=91=98=E5=B7=A5=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E2=80=94=E2=80=94=E4=BA=94=E7=BB=B4=E6=9D=A1?=
 =?UTF-8?q?/=E4=BA=94=E9=A1=B5=E7=AD=BE=E6=87=92=E5=8A=A0=E8=BD=BD/?=
 =?UTF-8?q?=E5=9B=9B=E5=AF=B9=E6=AF=94/=E8=AF=84=E5=88=86=E6=98=8E?=
 =?UTF-8?q?=E7=BB=86/=E4=BA=8B=E5=AE=9E=E4=B8=8B=E9=92=BB=E5=A4=8D?=
 =?UTF-8?q?=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- EmployeeAnalyticsDetailView:头卡(账号跳聊天/试算分grade色/辅导记录批次E占位)
  +五维条(3可用实分bar+2待数据灰条,以metrics键缺失判pending_data) +五页签
  (section懒加载·loaded缓存一次·切页签replace进URL section) +概览四对比表
  (derive_metrics六键,unit感知) +服务/工作负载双线趋势(connectNulls:false)
  +异常区(AnomalyList showEmployee=false) +评分明细(metrics_detail全表
  +prev/baseline原始字典二级折叠) +伪卡片下钻(超时明细/降温沉睡名单/通话明细)
- seq守卫:detail单seq,每页签独立seq;筛选/换人清缓存重取;404→员工不存在结果态
- router /management/employees/:userId(props:true);MainLayout activeMenu
  沿用route.name→父路径先例映射management-employees-detail→/management/employees
- AnomalyList 预挂showEmployee prop(默认true;D3员工行消费,本页先传false)——D3清单项提前

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 .../src/components/management/AnomalyList.vue |   15 +-
 yunkes/src/layouts/MainLayout.vue             |    2 +
 yunkes/src/router/index.ts                    |   10 +
 .../EmployeeAnalyticsDetailView.vue           | 1070 +++++++++++++++++
 4 files changed, 1093 insertions(+), 4 deletions(-)
 create mode 100644 yunkes/src/views/management/EmployeeAnalyticsDetailView.vue

diff --git a/yunkes/src/components/management/AnomalyList.vue b/yunkes/src/components/management/AnomalyList.vue
index 57b62b0..8ba0531 100644
--- a/yunkes/src/components/management/AnomalyList.vue
+++ b/yunkes/src/components/management/AnomalyList.vue
@@ -50,10 +50,17 @@
 import { formatMsDuration, formatRatio } from '@/utils/format'
 import type { AnomalyCard } from '@/api/management'
 
-defineProps<{
-  anomalies: AnomalyCard[]
-  loading?: boolean
-}>()
+// showEmployee(默认 true):D3 驾驶舱异常榜将在标题下加员工行(employee_name
+// 链接→员工详情);员工详情页复用本组件时传 false 免自链接——prop 先行落位
+// (批次D2),员工行的渲染随 D3 接上。
+withDefaults(
+  defineProps<{
+    anomalies: AnomalyCard[]
+    loading?: boolean
+    showEmployee?: boolean
+  }>(),
+  { showEmployee: true },
+)
 
 const emit = defineEmits<{
   (e: 'drill', card: AnomalyCard): void
diff --git a/yunkes/src/layouts/MainLayout.vue b/yunkes/src/layouts/MainLayout.vue
index 6f1c496..eae44db 100644
--- a/yunkes/src/layouts/MainLayout.vue
+++ b/yunkes/src/layouts/MainLayout.vue
@@ -11,9 +11,11 @@ const channelStore = useChannelStore()
 
 // `el-menu` with `router` mode; we drive `default-active` from the current path
 // so the active item highlights on load and on browser back/forward.
+// 带参路由(路径与菜单 index 不等)按 route.name 映射父菜单路径。
 const activeMenu = computed(() => {
   if (route.name === 'chat') return '/customers'
   if (route.name === 'group-chat') return '/groups'
+  if (route.name === 'management-employees-detail') return '/management/employees'
   return route.path
 })
 
diff --git a/yunkes/src/router/index.ts b/yunkes/src/router/index.ts
index 27888d6..53da5a2 100644
--- a/yunkes/src/router/index.ts
+++ b/yunkes/src/router/index.ts
@@ -107,6 +107,16 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/views/management/EmployeeAnalyticsView.vue'),
     meta: { title: '员工分析' },
   },
+  {
+    // 员工详情(批次D2):总览页姓名下钻;query 真源 channel/start/end/section
+    // (section=当前页签,刷新回到该页签)。静态路由 /management/employees
+    // 先注册,带参路由在后——vue-router 按注册序精确匹配,静态优先命中。
+    path: '/management/employees/:userId',
+    name: 'management-employees-detail',
+    component: () => import('@/views/management/EmployeeAnalyticsDetailView.vue'),
+    props: true,
+    meta: { title: '员工分析详情' },
+  },
   {
     path: '/chat/:channel/:ownerId/:talkerId?',
     name: 'chat',
diff --git a/yunkes/src/views/management/EmployeeAnalyticsDetailView.vue b/yunkes/src/views/management/EmployeeAnalyticsDetailView.vue
new file mode 100644
index 0000000..dd1585a
--- /dev/null
+++ b/yunkes/src/views/management/EmployeeAnalyticsDetailView.vue
@@ -0,0 +1,1070 @@
+<template>
+  <!-- 404:员工不在员工表(URL 参数误入/已删除)——整页结果态,给回列表出口 -->
+  <el-result
+    v-if="notFound"
+    icon="error"
+    title="员工不存在"
+    sub-title="该员工不在员工表,可能 ID 有误或已删除"
+  >
+    <template #extra>
+      <el-button type="primary" @click="backToList">返回员工分析</el-button>
+    </template>
+  </el-result>
+
+  <div v-else class="emp-detail">
+    <!-- 筛选栏:渠道/时间(URL 真源,与总览页同源同参,返回列表不丢窗口) -->
+    <ManagementFilterBar
+      :channel="channel"
+      :start="start"
+      :end="end"
+      :compare="compare"
+      @apply="apply"
+      @open-defs="defsVisible = true"
+    />
+
+    <!-- 详情加载失败:alert+重试(保留上次成功数据) -->
+    <el-alert v-if="detailError" type="error" :closable="false" class="top-alert">
+      <template #title>
+        <span>{{ detailError }}</span>
+        <el-button size="small" type="primary" class="retry-btn" @click="loadDetail">重试</el-button>
+      </template>
+    </el-alert>
+
+    <!-- ── 头部卡:身份+账号清单 | 本期试算分+截至角标+返回 ── -->
+    <el-card shadow="never" class="head-card" v-loading="detailLoading">
+      <div class="head">
+        <div class="head-left">
+          <div class="who">
+            <span class="name">{{ detail?.name || userId }}</span>
+            <el-tag v-if="detail?.is_on_job === true" size="small" type="success">在职</el-tag>
+            <el-tag v-else-if="detail?.is_on_job === false" size="small" type="info">离职</el-tag>
+            <span class="uid">{{ userId }}</span>
+          </div>
+          <!-- 账号清单:微信→员工聊天窗 single 页签;WA→账号级聊天记录;一行排开自动折行 -->
+          <div class="accounts">
+            <span
+              v-for="a in detail?.accounts ?? []"
+              :key="a.channel + ':' + a.account_id"
+              class="acct"
+            >
+              <el-tag size="small" :type="a.channel === 'whatsapp' ? 'success' : 'primary'">
+                {{ a.channel === 'whatsapp' ? 'WA' : '微信' }}
+              </el-tag>
+              <el-link type="primary" underline="never" class="acct-id" @click="goAccount(a)">
+                {{ a.account_id }}
+              </el-link>
+              <span v-if="a.nick_name || a.user_name" class="acct-name">
+                {{ a.nick_name || a.user_name }}
+              </span>
+            </span>
+            <span v-if="!(detail?.accounts ?? []).length" class="dim">无账号</span>
+          </div>
+        </div>
+        <div class="head-right">
+          <div class="score-block">
+            <template v-if="detail && detail.score.score_status === 'scored'">
+              <span class="score-num">{{ Math.round(detail.score.total_score ?? 0) }}</span>
+              <el-tag
+                v-if="detail.score.grade"
+                size="small"
+                :type="gradeType(detail.score.grade)"
+                class="grade-tag"
+              >{{ detail.score.grade }}</el-tag>
+              <span v-if="detail.score.trial" class="trial-mark" title="试算期评分">试</span>
+              <div class="score-label">本期试算分</div>
+            </template>
+            <template v-else>
+              <span class="score-num score-dim">--</span>
+              <div class="score-label dim">样本不足·不参与考核</div>
+            </template>
+          </div>
+          <DataAsOfBadge
+            :data-as-of="detail?.data_as_of ?? null"
+            :metric-version="detail?.metric_version"
+            :trial="detail?.score.trial"
+            :config-source="detail?.config_source"
+          />
+          <div class="head-actions">
+            <el-tooltip content="批次E上线" placement="top">
+              <span class="coach-wrap">
+                <el-button size="small" disabled>创建辅导记录</el-button>
+              </span>
+            </el-tooltip>
+            <el-button size="small" text @click="backToList">返回员工分析</el-button>
+          </div>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- ── 五维条:页面内直画(3 可用维度实分 + 2 待数据灰条) ── -->
+    <el-card shadow="never" class="dims-card" v-loading="detailLoading">
+      <template #header>
+        五维得分
+        <span class="card-sub">0-100 · 行动执行/合规风险待数据(批次E)</span>
+      </template>
+      <div v-for="[key, d] in dimEntries" :key="key" class="dim-row">
+        <span class="dim-name">{{ d.name }}</span>
+        <span class="dim-weight">权重 {{ d.weight }}%</span>
+        <div class="dim-track">
+          <div v-if="dimPendingData(d)" class="dim-bar dim-bar--pending" />
+          <div
+            v-else-if="d.score != null"
+            class="dim-bar"
+            :style="{ width: Math.max(0, Math.min(100, d.score)) + '%' }"
+          />
+        </div>
+        <span class="dim-score" :class="{ dim: d.status !== 'scored' }">
+          {{ dimScoreText(d) }}
+        </span>
+      </div>
+    </el-card>
+
+    <!-- ── 五页签:section 懒加载(激活才取数,缓存一次切回即显) ── -->
+    <el-card shadow="never" class="tabs-card">
+      <el-tabs :model-value="section" @tab-change="onSectionChange">
+        <!-- 概览:六数卡(detail.metrics) + 四对比表(section comparisons) -->
+        <el-tab-pane label="概览" name="overview" lazy>
+          <div class="pane" v-loading="sectionState.overview.loading">
+            <el-alert v-if="sectionState.overview.error" type="error" :closable="false" class="pane-alert">
+              <template #title>
+                <span>{{ sectionState.overview.error }}</span>
+                <el-button size="small" type="primary" class="retry-btn" @click="ensureSection('overview')">
+                  重试
+                </el-button>
+              </template>
+            </el-alert>
+            <template v-if="sectionState.overview.resp">
+              <div class="tiles">
+                <div v-for="t in ovTiles" :key="t.label" class="tile">
+                  <div class="tile-label">{{ t.label }}</div>
+                  <div class="tile-value">{{ t.value }}</div>
+                </div>
+              </div>
+              <el-table :data="compareRows" size="small" class="cmp-table">
+                <el-table-column label="指标(四对比)" min-width="180">
+                  <template #default="{ row }">
+                    <span>{{ row.name }}</span>
+                    <span class="cell-sub code">{{ row.code }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="当前" align="right" min-width="110">
+                  <template #default="{ row }">{{ fmtCmp(row.current, row.unit) }}</template>
+                </el-table-column>
+                <el-table-column label="上期" align="right" min-width="110">
+                  <template #default="{ row }">{{ fmtCmp(row.prev, row.unit) }}</template>
+                </el-table-column>
+                <el-table-column label="个人基线" align="right" min-width="110">
+                  <template #default="{ row }">{{ fmtCmp(row.baseline, row.unit) }}</template>
+                </el-table-column>
+                <el-table-column label="团队中位" align="right" min-width="110">
+                  <template #default="{ row }">{{ fmtCmp(row.median, row.unit) }}</template>
+                </el-table-column>
+                <template #empty>该窗口无对比数据</template>
+              </el-table>
+            </template>
+          </div>
+        </el-tab-pane>
+
+        <!-- 服务质量:P50/P90 数卡 + 客户端派生回复率 + 首响双线趋势 + 超时明细 -->
+        <el-tab-pane label="服务质量" name="service" lazy>
+          <div class="pane" v-loading="sectionState.service.loading">
+            <el-alert v-if="sectionState.service.error" type="error" :closable="false" class="pane-alert">
+              <template #title>
+                <span>{{ sectionState.service.error }}</span>
+                <el-button size="small" type="primary" class="retry-btn" @click="ensureSection('service')">
+                  重试
+                </el-button>
+              </template>
+            </el-alert>
+            <template v-if="sectionState.service.resp">
+              <div class="tiles">
+                <div v-for="t in svcTiles" :key="t.label" class="tile">
+                  <div class="tile-label">{{ t.label }}</div>
+                  <div class="tile-value">{{ t.value }}</div>
+                </div>
+              </div>
+              <div class="pane-actions">
+                <el-button size="small" @click="openDrill('首响P90明细', 'first_reply_p90')">
+                  查看超时明细
+                </el-button>
+              </div>
+              <!-- 首响 P50/P90 双线(ms 轴,None 断点);员工级无每日率序列,不做率右轴 -->
+              <div ref="svcTrendEl" class="chart"></div>
+            </template>
+          </div>
+        </el-tab-pane>
+
+        <!-- 客户经营:期末四态数卡(detail.metrics) + 降温/沉睡名单下钻 -->
+        <el-tab-pane label="客户经营" name="customer" lazy>
+          <div class="pane" v-loading="sectionState.customer.loading">
+            <el-alert v-if="sectionState.customer.error" type="error" :closable="false" class="pane-alert">
+              <template #title>
+                <span>{{ sectionState.customer.error }}</span>
+                <el-button size="small" type="primary" class="retry-btn" @click="ensureSection('customer')">
+                  重试
+                </el-button>
+              </template>
+            </el-alert>
+            <div class="tiles">
+              <div v-for="t in custTiles" :key="t.label" class="tile">
+                <div class="tile-label">{{ t.label }}</div>
+                <div class="tile-value">{{ t.value }}</div>
+              </div>
+            </div>
+            <div class="pane-actions">
+              <el-button size="small" @click="openDrill('降温客户名单', 'cooling_customers')">
+                降温客户名单
+              </el-button>
+              <el-button size="small" @click="openDrill('沉睡客户名单', 'dormant_customers')">
+                沉睡客户名单
+              </el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <!-- 工作负载:收发/活跃客户/活跃群均/通话量数卡 + 活跃双线趋势 -->
+        <el-tab-pane label="工作负载" name="workload" lazy>
+          <div class="pane" v-loading="sectionState.workload.loading">
+            <el-alert v-if="sectionState.workload.error" type="error" :closable="false" class="pane-alert">
+              <template #title>
+                <span>{{ sectionState.workload.error }}</span>
+                <el-button size="small" type="primary" class="retry-btn" @click="ensureSection('workload')">
+                  重试
+                </el-button>
+              </template>
+            </el-alert>
+            <div class="tiles">
+              <div v-for="t in wlTiles" :key="t.label" class="tile">
+                <div class="tile-label">{{ t.label }}</div>
+                <div class="tile-value">{{ t.value }}</div>
+              </div>
+            </div>
+            <div ref="wlTrendEl" class="chart"></div>
+          </div>
+        </el-tab-pane>
+
+        <!-- 通话:四数卡(detail.metrics) + 通话明细下钻 -->
+        <el-tab-pane label="通话" name="calls" lazy>
+          <div class="pane" v-loading="sectionState.calls.loading">
+            <el-alert v-if="sectionState.calls.error" type="error" :closable="false" class="pane-alert">
+              <template #title>
+                <span>{{ sectionState.calls.error }}</span>
+                <el-button size="small" type="primary" class="retry-btn" @click="ensureSection('calls')">
+                  重试
+                </el-button>
+              </template>
+            </el-alert>
+            <div class="tiles">
+              <div v-for="t in callTiles" :key="t.label" class="tile">
+                <div class="tile-label">{{ t.label }}</div>
+                <div class="tile-value">{{ t.value }}</div>
+              </div>
+            </div>
+            <div class="pane-actions">
+              <el-button size="small" @click="openDrill('通话明细', 'call_followup')">
+                通话明细
+              </el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+
+    <!-- ── 异常区:本员工的异常卡(不显示员工行);点行开下钻抽屉 ── -->
+    <el-card shadow="never" class="anomaly-card">
+      <template #header>
+        异常
+        <span class="card-sub">按严重度排序 · 点行查看明细</span>
+      </template>
+      <AnomalyList
+        :anomalies="detail?.anomalies ?? []"
+        :loading="detailLoading"
+        :show-employee="false"
+        @drill="onAnomalyDrill"
+      />
+    </el-card>
+
+    <!-- ── 评分明细:metrics_detail 全表 + 维度权重 + 原始数据(二级折叠) ── -->
+    <el-collapse class="score-detail" v-loading="detailLoading">
+      <el-collapse-item name="score" title="评分是怎么算出来的">
+        <div class="weights-line">维度权重:{{ weightsLine }}</div>
+        <el-table :data="metricsDetailRows" size="small" class="md-table">
+          <el-table-column label="指标" min-width="190">
+            <template #default="{ row }">
+              <div>{{ row.name }}</div>
+              <div class="cell-sub code">{{ row.code }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="当前" align="right" min-width="110">
+            <template #default="{ row }">{{ fmtCmp(row.value, row.unit) }}</template>
+          </el-table-column>
+          <el-table-column label="上期" align="right" min-width="110">
+            <template #default="{ row }">{{ fmtCmp(row.prev, row.unit) }}</template>
+          </el-table-column>
+          <el-table-column label="基线" align="right" min-width="110">
+            <template #default="{ row }">{{ fmtCmp(row.baseline, row.unit) }}</template>
+          </el-table-column>
+          <el-table-column label="团队中位" align="right" min-width="110">
+            <template #default="{ row }">{{ fmtCmp(row.median, row.unit) }}</template>
+          </el-table-column>
+          <el-table-column label="样本量" prop="sample_size" align="right" width="80" />
+          <el-table-column label="样本状态" align="center" width="90">
+            <template #default="{ row }">
+              <el-tag v-if="row.sample_status === 'ok'" size="small" type="success">正常</el-tag>
+              <el-tag v-else-if="row.sample_status === 'low_confidence'" size="small" type="warning">
+                低置信
+              </el-tag>
+              <el-tag v-else size="small" type="info">不足</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="得分" align="right" width="70">
+            <template #default="{ row }">
+              <span :class="{ dim: row.score == null }">
+                {{ row.score == null ? '--' : Math.round(row.score) }}
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-collapse class="raw-collapse">
+          <el-collapse-item name="raw" title="原始数据(调试用)">
+            <div class="raw-label">上期 prev · PeriodMetrics 原始字典</div>
+            <pre class="raw-json">{{ prevJson }}</pre>
+            <div class="raw-label">个人基线 baseline · PeriodMetrics 原始字典</div>
+            <pre class="raw-json">{{ baseJson }}</pre>
+          </el-collapse-item>
+        </el-collapse>
+      </el-collapse-item>
+    </el-collapse>
+
+    <!-- 事实下钻抽屉(异常行与伪卡片按钮共用) + 指标口径抽屉 -->
+    <MetricDrilldownDrawer
+      v-model="drillVisible"
+      :card="drillCard"
+      :user-id="userId"
+      :start="start"
+      :end="end"
+      :channel="channel"
+    />
+    <MetricDefsDrawer v-model="defsVisible" />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 员工分析详情(经营管理批次D2):头卡(身份/账号跳聊天/试算分)+ 五维条
+// (3 可用实分 + 2 待数据灰条)+ 五页签(section 懒加载:激活才调
+// getEmployeeMetrics,loaded 缓存一次,切回即显不重拉;页签切换 replace
+// 进 URL section 参数,刷新回到该页签)+ 异常区 + 评分明细(metrics_detail
+// 全表 + prev/baseline 原始字典二级折叠)。query 真源:channel/start/end/
+// compare+section(useManagementFilters + 本页 section 白名单)。seq 守卫:
+// detail 一个 seq,每页签独立 seq(切页签/改筛选旧响应不覆盖)。
+import { computed, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import type { TabPaneName } from 'element-plus'
+import {
+  getEmployeeDetail,
+  getEmployeeMetrics,
+  type AnomalyCard,
+  type DrilldownCode,
+  type EmployeeAccount,
+  type EmployeeDetailResp,
+  type MetricsSection,
+  type SectionResp,
+} from '@/api/management'
+import { useManagementFilters } from '@/composables/useManagementFilters'
+import { useChart } from '@/composables/useChart'
+import { formatMsDuration, formatRatio } from '@/utils/format'
+import ManagementFilterBar from '@/components/management/ManagementFilterBar.vue'
+import DataAsOfBadge from '@/components/management/DataAsOfBadge.vue'
+import AnomalyList from '@/components/management/AnomalyList.vue'
+import MetricDrilldownDrawer from '@/components/management/MetricDrilldownDrawer.vue'
+import MetricDefsDrawer from '@/components/management/MetricDefsDrawer.vue'
+
+const props = defineProps<{ userId: string }>()
+
+const route = useRoute()
+const router = useRouter()
+const { channel, start, end, compare, apply } = useManagementFilters()
+
+// ── section query 真源(白名单外回概览;切换 replace,刷新回该页签) ──
+const SECTIONS: readonly MetricsSection[] = ['overview', 'service', 'customer', 'workload', 'calls']
+const section = computed<MetricsSection>(() =>
+  SECTIONS.includes(route.query.section as MetricsSection)
+    ? (route.query.section as MetricsSection)
+    : 'overview',
+)
+
+function onSectionChange(name: TabPaneName): void {
+  apply({ section: name === 'overview' ? undefined : String(name) })
+}
+
+// ── 详情加载(单 seq;404 → 整页结果态) ──
+const detail = ref<EmployeeDetailResp | null>(null)
+const detailLoading = ref(false)
+const detailError = ref<string | null>(null)
+const notFound = ref(false)
+let detailSeq = 0
+
+async function loadDetail(): Promise<void> {
+  const my = ++detailSeq
+  detailLoading.value = true
+  detailError.value = null
+  try {
+    const r = await getEmployeeDetail(props.userId, channel.value, start.value, end.value)
+    if (my !== detailSeq) return
+    detail.value = r
+  } catch (e) {
+    if (my !== detailSeq) return
+    const msg = e instanceof Error ? e.message : String(e)
+    // client 拦截器只透传 detail 文案(状态码已丢),按后端 404 文案判别
+    if (/not found/i.test(msg)) notFound.value = true
+    else detailError.value = msg
+  } finally {
+    if (my === detailSeq) detailLoading.value = false
+  }
+}
+
+// ── 分段指标:懒加载 + loaded 缓存 + 每页签独立 seq ──
+interface SectionState {
+  resp: SectionResp | null
+  loading: boolean
+  error: string | null
+  loaded: boolean
+}
+function blankSection(): SectionState {
+  return { resp: null, loading: false, error: null, loaded: false }
+}
+const sectionState = reactive<Record<MetricsSection, SectionState>>({
+  overview: blankSection(),
+  service: blankSection(),
+  customer: blankSection(),
+  workload: blankSection(),
+  calls: blankSection(),
+})
+// 独立 seq(非响应式:仅竞态计数):切页签/改筛选时旧响应按 seq 作废
+const sectionSeq: Record<MetricsSection, number> = {
+  overview: 0, service: 0, customer: 0, workload: 0, calls: 0,
+}
+
+function ensureSection(s: MetricsSection): void {
+  if (notFound.value) return
+  const st = sectionState[s]
+  if (st.loaded || st.loading) return // 缓存一次不重拉;在飞不重复发
+  const my = ++sectionSeq[s]
+  st.loading = true
+  st.error = null
+  getEmployeeMetrics(props.userId, s, channel.value, start.value, end.value).then(
+    (r) => {
+      if (my !== sectionSeq[s]) return
+      st.resp = r
+      st.loaded = true
+      st.loading = false
+    },
+    (e) => {
+      if (my !== sectionSeq[s]) return
+      st.error = e instanceof Error ? e.message : String(e)
+      st.loading = false
+    },
+  )
+}
+
+// 筛选/换人:detail 重查 + 全部页签缓存清零(独立 seq 递增作废在飞响应),
+// 当前页签立即重取;页签切换只 ensure(未加载才发)
+watch(
+  [() => props.userId, channel, start, end],
+  () => {
+    notFound.value = false
+    loadDetail()
+    for (const s of SECTIONS) {
+      sectionSeq[s]++
+      sectionState[s] = blankSection()
+    }
+    ensureSection(section.value)
+  },
+  { immediate: true },
+)
+watch(section, (s) => ensureSection(s))
+
+// ── 头卡:账号跳聊天 / 返回列表(保留筛选窗口) ──
+function goAccount(a: EmployeeAccount): void {
+  if (a.channel === 'whatsapp') router.push(`/chat/whatsapp/${a.account_id}`)
+  else router.push(`/staff-chat/${a.account_id}/single`)
+}
+
+function backToList(): void {
+  router.push({
+    name: 'management-employees',
+    query: {
+      channel: channel.value === 'all' ? undefined : channel.value,
+      start: start.value,
+      end: end.value,
+      compare: compare.value === 'previous' ? undefined : compare.value,
+    },
+  })
+}
+
+// grade 色(与 D1 总览页同 map:A绿/B蓝/C橙/D红/E灰)
+const GRADE_TYPES: Record<string, 'success' | 'primary' | 'warning' | 'danger' | 'info'> = {
+  A: 'success', B: 'primary', C: 'warning', D: 'danger', E: 'info',
+}
+function gradeType(g: string | null): 'success' | 'primary' | 'warning' | 'danger' | 'info' {
+  return (g && GRADE_TYPES[g]) || 'info'
+}
+
+// ── 五维条 ──
+const dimEntries = computed(() => Object.entries(detail.value?.score.dimensions ?? {}))
+
+// 待数据维度判定:后端 score.dimensions 的 status 恒为 scored/insufficient/
+// pending 三值(scoring.py)——配置级 pending_data 维不带 metrics 键,可用但
+// 全部无值的维 status 也是 pending 却带 metrics。以 metrics 缺失为准(
+// status==='pending_data' 防御性并含)。
+function dimPendingData(d: { status: string; metrics?: unknown }): boolean {
+  return d.status === 'pending_data' || d.metrics == null
+}
+
+function dimScoreText(d: { status: string; score: number | null; metrics?: unknown }): string {
+  if (dimPendingData(d)) return '待数据(批次E)'
+  return d.score == null ? '--' : `${Math.round(d.score)} 分`
+}
+
+const weightsLine = computed(() =>
+  dimEntries.value
+    .map(([, d]) => `${d.name} ${d.weight}%${dimPendingData(d) ? '(待数据)' : ''}`)
+    .join(' · '),
+)
+
+// ── 取数/格式化 ──
+// detail.metrics 数值键(PeriodMetrics._asdict 透传,user_id 键是字符串,typeof 守卫)
+function mNum(key: string): number | null {
+  const v = detail.value?.metrics?.[key]
+  return typeof v === 'number' ? v : null
+}
+// section metrics/trend 逐键取值(Record 值域 number|null,缺键→null)
+function colVal(m: Record<string, number | null> | undefined, key: string): number | null {
+  return (m ? m[key] : null) ?? null
+}
+function fmtInt(v: number | null): string {
+  return v == null ? '--' : v.toLocaleString()
+}
+function fmtAvg(v: number | null): string {
+  return v == null ? '--' : v.toLocaleString('zh-CN', { maximumFractionDigits: 1 })
+}
+function fmtSec(s: number | null): string {
+  return s && s > 0 ? formatMsDuration(s * 1000) : '--'
+}
+// 单位感知(与指标口径字典 unit 对齐):ms→时长/0-1→比率/余千分位;null→-
+function fmtCmp(v: number | null, unit: string): string {
+  if (v == null) return '-'
+  if (unit === 'ms') return formatMsDuration(v)
+  if (unit === '0-1') return formatRatio(v)
+  return v.toLocaleString()
+}
+
+// ── 各页签数卡 ──
+const ovTiles = computed(() => [
+  { label: '发出消息', value: fmtInt(mNum('msg_sent')) },
+  { label: '收到消息', value: fmtInt(mNum('msg_recv')) },
+  { label: '活跃客户', value: fmtInt(mNum('active_friends')) },
+  { label: '客户消息串', value: fmtInt(mNum('cust_threads')) },
+  { label: '通话量', value: fmtInt(mNum('call_count')) },
+  { label: '活跃群(日均)', value: fmtAvg(mNum('active_rooms_avg')) },
+])
+
+// 服务质量:分位直取 section metrics(fr_p50_ms/fr_p90_ms,D0 已核键名);
+// 回复率客户端派生(reply_*h_count/cust_threads 同源,分母 0/null→无率)
+function svcRate(countKey: 'reply_2h_count' | 'reply_24h_count'): string {
+  const m = sectionState.service.resp?.metrics
+  const den = colVal(m, 'cust_threads')
+  if (!den) return '--'
+  return formatRatio((colVal(m, countKey) ?? 0) / den)
+}
+const svcTiles = computed(() => [
+  { label: '首响中位', value: formatMsDuration(colVal(sectionState.service.resp?.metrics, 'fr_p50_ms')) },
+  { label: '首响P90', value: formatMsDuration(colVal(sectionState.service.resp?.metrics, 'fr_p90_ms')) },
+  { label: '2h回复率', value: svcRate('reply_2h_count') },
+  { label: '24h回复率', value: svcRate('reply_24h_count') },
+])
+
+const custTiles = computed(() => [
+  { label: '新客(期末)', value: fmtInt(mNum('new_customer')) },
+  { label: '降温(期末)', value: fmtInt(mNum('cooling_customer')) },
+  { label: '沉睡(期末)', value: fmtInt(mNum('dormant_customer')) },
+  { label: '回流(期内)', value: fmtInt(mNum('reactivated_customer')) },
+])
+
+const wlTiles = computed(() => [
+  { label: '发出消息', value: fmtInt(mNum('msg_sent')) },
+  { label: '收到消息', value: fmtInt(mNum('msg_recv')) },
+  { label: '活跃客户', value: fmtInt(mNum('active_friends')) },
+  { label: '活跃群(日均)', value: fmtAvg(mNum('active_rooms_avg')) },
+  { label: '通话量', value: fmtInt(mNum('call_count')) },
+])
+
+const callTiles = computed(() => [
+  { label: '通话量', value: fmtInt(mNum('call_count')) },
+  { label: '通话时长', value: fmtSec(mNum('call_seconds')) },
+  { label: '接通', value: fmtInt(mNum('answered_call')) },
+  { label: '通话后跟进', value: fmtInt(mNum('call_followup')) },
+])
+
+// ── 四对比表(overview 页签):行=源指标名(derive_metrics 键域,冻结契约) ──
+const CMP_META: Record<string, { name: string; unit: string }> = {
+  fr_p90_ms: { name: '首响P90', unit: 'ms' },
+  active_friends: { name: '活跃客户(周期)', unit: '人' },
+  call_count: { name: '通话数', unit: '通' },
+  reply_2h_rate: { name: '2h回复率', unit: '0-1' },
+  reply_24h_rate: { name: '24h回复率', unit: '0-1' },
+  active_share: { name: '活跃客户占比', unit: '0-1' },
+}
+const compareRows = computed(() =>
+  Object.entries(sectionState.overview.resp?.comparisons ?? {}).map(([code, c]) => ({
+    code,
+    name: CMP_META[code]?.name ?? code,
+    unit: CMP_META[code]?.unit ?? '',
+    current: c.current,
+    prev: c.prev,
+    baseline: c.baseline,
+    median: c.median,
+  })),
+)
+
+// ── 评分明细:metrics_detail 全表 + 原始数据 ──
+const metricsDetailRows = computed(() =>
+  Object.entries(detail.value?.score.metrics_detail ?? {}).map(([code, d]) => ({ code, ...d })),
+)
+const prevJson = computed(() =>
+  detail.value?.prev ? JSON.stringify(detail.value.prev, null, 2) : '无上期数据',
+)
+const baseJson = computed(() =>
+  detail.value?.baseline ? JSON.stringify(detail.value.baseline, null, 2) : '无基线数据',
+)
+
+// ── 下钻抽屉:异常行 + 伪卡片按钮共用 ──
+const drillVisible = ref(false)
+const drillCard = ref<AnomalyCard | null>(null)
+const defsVisible = ref(false)
+
+function onAnomalyDrill(card: AnomalyCard): void {
+  drillCard.value = card
+  drillVisible.value = true
+}
+
+// 伪卡片:让 MetricDrilldownDrawer 按 metric_code 走既有白名单下钻
+// (drilldown.type='metric' 非 'employee',不受员工维度兜底拦截)
+function openDrill(title: string, code: DrilldownCode): void {
+  drillCard.value = {
+    rule_code: code,
+    severity: 'warning',
+    employee_user_id: props.userId,
+    title,
+    current_value: 0,
+    baseline_value: null,
+    unit: '',
+    sample_size: 0,
+    affected_count: 0,
+    reason: '',
+    suggested_action: '',
+    drilldown: { type: 'metric', query: { metric_code: code, user_id: props.userId } },
+  }
+  drillVisible.value = true
+}
+
+// ── 趋势图(useChart:容器随页签 lazy 挂载,resp 就绪后 post 帧绘制) ──
+const svcTrendEl = ref<HTMLElement | null>(null)
+const wlTrendEl = ref<HTMLElement | null>(null)
+const { render: renderSvcTrend } = useChart(svcTrendEl)
+const { render: renderWlTrend } = useChart(wlTrendEl)
+
+// yyyymmdd → 08-10 短格式;大数压缩;ms 轴紧凑时长;X 轴 ~6 刻度(驾驶舱同款)
+const shortDay = (d: number | null | undefined): string =>
+  d == null ? '' : `${String(d).slice(4, 6)}-${String(d).slice(6)}`
+const compact = (n: number): string =>
+  n >= 10000 ? `${(n / 10000).toFixed(1)}万` : n.toLocaleString()
+const fmtMsAxis = (v: number): string =>
+  v >= 3_600_000 ? `${(v / 3_600_000).toFixed(1)}时` : `${Math.round(v / 60_000)}分`
+const axisInterval = (n: number): number => Math.max(0, Math.ceil(n / 6) - 1)
+
+const AXIS_LABEL = { color: '#909399' }
+const SPLIT_LINE = { lineStyle: { type: 'solid' as const, color: '#f0f1f3' } }
+
+// 首响双线 tooltip:ms→时长(null 显 '-',与断点语义一致)
+interface TipParam { marker?: string; seriesName?: string; value?: number | null; axisValueLabel?: string }
+function msTooltip(ps: unknown): string {
+  const arr = (Array.isArray(ps) ? ps : [ps]) as TipParam[]
+  if (!arr.length) return ''
+  const rows = arr.map((p) => {
+    const v = typeof p.value === 'number' ? p.value : null
+    return `<div>${p.marker ?? ''}${p.seriesName}: ${v === null ? '-' : formatMsDuration(v)}</div>`
+  })
+  return `<div>${arr[0].axisValueLabel ?? ''}</div>${rows.join('')}`
+}
+
+function drawSvcTrend(r: SectionResp): void {
+  const t = r.trend
+  if (!t.length) return
+  const labels = t.map((p) => shortDay(p.day))
+  renderSvcTrend({
+    grid: { left: 56, right: 24, top: 40, bottom: 28 },
+    tooltip: { trigger: 'axis', formatter: msTooltip },
+    legend: { data: ['首响中位', '首响九分位'], top: 4, itemWidth: 14, textStyle: { color: '#606266' } },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: { interval: axisInterval(labels.length), hideOverlap: true, ...AXIS_LABEL },
+      axisLine: { lineStyle: { color: '#dcdfe6' } },
+      axisTick: { show: false },
+    },
+    yAxis: {
+      type: 'value',
+      name: '首响',
+      axisLabel: { formatter: fmtMsAxis, ...AXIS_LABEL },
+      splitLine: SPLIT_LINE,
+    },
+    series: [
+      // null(无样本日)=断点:connectNulls:false 显式钉死,不跨缺口连线
+      {
+        name: '首响中位',
+        type: 'line', smooth: true, showSymbol: false, connectNulls: false,
+        lineStyle: { width: 2, color: '#409EFF' },
+        itemStyle: { color: '#409EFF' },
+        data: t.map((p) => colVal(p, 'first_reply_p50_ms')),
+      },
+      {
+        name: '首响九分位',
+        type: 'line', smooth: true, showSymbol: false, connectNulls: false,
+        lineStyle: { width: 2, color: '#E6A23C' },
+        itemStyle: { color: '#E6A23C' },
+        data: t.map((p) => colVal(p, 'first_reply_p90_ms')),
+      },
+    ],
+  })
+}
+
+function drawWlTrend(r: SectionResp): void {
+  const t = r.trend
+  if (!t.length) return
+  const labels = t.map((p) => shortDay(p.day))
+  renderWlTrend({
+    grid: { left: 56, right: 24, top: 40, bottom: 28 },
+    tooltip: { trigger: 'axis', valueFormatter: (v: unknown) => compact(Number(v)) },
+    legend: { data: ['活跃客户', '活跃群'], top: 4, itemWidth: 14, textStyle: { color: '#606266' } },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: { interval: axisInterval(labels.length), hideOverlap: true, ...AXIS_LABEL },
+      axisLine: { lineStyle: { color: '#dcdfe6' } },
+      axisTick: { show: false },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: { formatter: (v: number) => compact(v), ...AXIS_LABEL },
+      splitLine: SPLIT_LINE,
+    },
+    series: [
+      {
+        name: '活跃客户',
+        type: 'line', smooth: true, showSymbol: false, connectNulls: false,
+        lineStyle: { width: 2, color: '#409EFF' },
+        itemStyle: { color: '#409EFF' },
+        areaStyle: { opacity: 0.06, color: '#409EFF' },
+        data: t.map((p) => colVal(p, 'active_friends')),
+      },
+      {
+        name: '活跃群',
+        type: 'line', smooth: true, showSymbol: false, connectNulls: false,
+        lineStyle: { width: 2, color: '#67C23A' },
+        itemStyle: { color: '#67C23A' },
+        data: t.map((p) => colVal(p, 'active_rooms')),
+      },
+    ],
+  })
+}
+
+// resp 单源驱动绘制;post 帧保证 lazy 页签容器已挂载(ensure 仅对激活页签
+// 发请求,resp 就绪时容器必在 DOM)
+watch(() => sectionState.service.resp, (r) => { if (r) drawSvcTrend(r) }, { flush: 'post' })
+watch(() => sectionState.workload.resp, (r) => { if (r) drawWlTrend(r) }, { flush: 'post' })
+</script>
+
+<style scoped>
+.top-alert {
+  margin-top: 12px;
+}
+.retry-btn {
+  margin-left: 12px;
+}
+.head-card {
+  margin-top: 12px;
+}
+.head-card :deep(.el-card__body) {
+  padding: 16px 20px;
+}
+.head {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+.head-left {
+  flex: 1 1 460px;
+  min-width: 0;
+}
+.who {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.name {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+  line-height: 1.2;
+}
+.uid {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  word-break: break-all;
+}
+.accounts {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  row-gap: 6px;
+  flex-wrap: wrap;
+}
+.acct {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+}
+.acct-id {
+  font-size: 13px;
+}
+.acct-id :deep(.el-link__inner) {
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  vertical-align: bottom;
+}
+.acct-name {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.head-right {
+  margin-left: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+}
+.score-block {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+.score-num {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--el-text-color-primary);
+}
+.score-num.score-dim {
+  color: var(--el-text-color-placeholder);
+}
+.grade-tag {
+  margin-left: 2px;
+}
+.trial-mark {
+  font-size: 11px;
+  color: var(--el-color-warning);
+  vertical-align: super;
+}
+.score-label {
+  width: 100%;
+  text-align: right;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+.head-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.coach-wrap {
+  display: inline-block;
+}
+.dim {
+  color: var(--el-text-color-placeholder);
+}
+
+/* 五维条 */
+.dims-card {
+  margin-top: 12px;
+}
+.card-sub {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--el-text-color-secondary);
+}
+.dim-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 7px 0;
+}
+.dim-name {
+  width: 76px;
+  flex: none;
+  font-size: 13px;
+  color: var(--el-text-color-primary);
+}
+.dim-weight {
+  width: 66px;
+  flex: none;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+.dim-track {
+  flex: 1;
+  min-width: 120px;
+  height: 10px;
+  border-radius: 5px;
+  background: var(--el-fill-color-lighter);
+  overflow: hidden;
+}
+.dim-bar {
+  height: 100%;
+  border-radius: 5px;
+  background: var(--el-color-primary);
+}
+.dim-bar--pending {
+  width: 100%;
+  /* 待数据维度:全宽灰条(不冒充分数) */
+  background: repeating-linear-gradient(
+    -45deg,
+    var(--el-fill-color),
+    var(--el-fill-color) 6px,
+    var(--el-fill-color-light) 6px,
+    var(--el-fill-color-light) 12px
+  );
+}
+.dim-score {
+  width: 92px;
+  flex: none;
+  text-align: right;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--el-color-primary);
+}
+
+/* 页签 */
+.tabs-card {
+  margin-top: 12px;
+}
+.tabs-card :deep(.el-card__body) {
+  padding: 4px 20px 16px;
+}
+.pane {
+  min-height: 120px;
+}
+.pane-alert {
+  margin: 10px 0;
+}
+.pane-actions {
+  margin: 12px 0;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+  margin-top: 12px;
+}
+.tile {
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
+  padding: 10px 14px;
+  min-width: 0;
+}
+.tile-label {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+.tile-value {
+  margin-top: 4px;
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  white-space: nowrap;
+}
+.cmp-table {
+  margin-top: 14px;
+}
+.chart {
+  height: 300px;
+  margin-top: 4px;
+}
+
+/* 异常区/评分明细 */
+.anomaly-card {
+  margin-top: 12px;
+}
+.score-detail {
+  margin-top: 12px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+.score-detail :deep(.el-collapse-item__content) {
+  padding-bottom: 8px;
+}
+.weights-line {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  margin: 8px 0;
+}
+.raw-collapse {
+  margin-top: 12px;
+  border-top: 1px dashed var(--el-border-color-lighter);
+}
+.raw-label {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  margin: 8px 0 4px;
+}
+.raw-json {
+  margin: 0;
+  padding: 8px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  background: var(--el-fill-color-light);
+  border-radius: 4px;
+  color: var(--el-text-color-secondary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 320px;
+  overflow: auto;
+}
+.cell-sub {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  margin-top: 2px;
+}
+.code {
+  font-family: var(--el-font-family, monospace);
+}
+.md-table {
+  width: 100%;
+}
+</style>