From 4c3bc3ee933fc1eda623fc7845858f5b0eed052f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Tue, 25 Aug 2026 19:32:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(staffchat):=20=E7=BB=9F=E8=AE=A1=E5=88=86?=
 =?UTF-8?q?=E6=9E=907tab(=E5=88=86=E5=9E=8B=E6=98=8E=E7=BB=86=E5=88=97+?=
 =?UTF-8?q?=E8=AE=A1=E6=95=B0=E5=BE=BD=E6=A0=87+=E8=BF=917=E5=A4=A9?=
 =?UTF-8?q?=E7=AA=97+msgid=E5=AE=9A=E4=BD=8D,=E5=AF=B9=E9=BD=90=E4=BA=91?=
 =?UTF-8?q?=E5=AE=A2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- StatsPane 占位替换: 7 tab(label 带 (N) 计数)+daterange 默认近7天(清空后端兜底)
- 明细列配置驱动(KIND_COLS);link 列跳 single/group 聊天;红包/转账行带 ?msgid 定位
- 语音通话列对齐 CallList(通话人/类型/呼入呼出/接通状态/时长/录音播放 dialog/时间/操作)
- 敏感词 tab 空态卡(词库未配置,待 C1 接入,零请求)
- 员工微信列用资料卡信息(明细行无 staff 字段,数据本属该员工)
- counts 与明细解耦;双 seq 竞态守卫(兄弟组件惯例)
- api: getStaffStatsDetail kind 收紧为 StaffStatsKind 联合(后端 Literal 6 值)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 yunkes/src/api/index.ts                       |  13 +-
 yunkes/src/components/staffchat/StatsPane.vue | 621 +++++++++++++++++-
 2 files changed, 629 insertions(+), 5 deletions(-)

diff --git a/yunkes/src/api/index.ts b/yunkes/src/api/index.ts
index 5f7d087..adc8c0e 100644
--- a/yunkes/src/api/index.ts
+++ b/yunkes/src/api/index.ts
@@ -378,10 +378,19 @@ export function getMoments(query: MomentsQuery): Promise<MomentsList> {
   )
 }
 
+/** staff-stats 明细 kind(与后端 KindParam Literal 6 值一致;无 sensitive——词库未接入)。 */
+export type StaffStatsKind =
+  | 'new_customers'
+  | 'new_groups'
+  | 'red_transfer'
+  | 'del_customers'
+  | 'blocked_customers'
+  | 'voice_calls'
+
 export interface StaffStatsQuery {
   wechat_id: string
   /** 传 kind 走明细模式,缺省返回 7 数字 counts。 */
-  kind?: string
+  kind?: StaffStatsKind
   start?: number
   end?: number
 }
@@ -400,7 +409,7 @@ export function getStaffStatsCounts(
 }
 
 export function getStaffStatsDetail(
-  query: StaffStatsQuery & { kind: string },
+  query: StaffStatsQuery & { kind: StaffStatsKind },
 ): Promise<StaffStatsDetail> {
   return getJson<StaffStatsDetail>(
     '/staff-stats',
diff --git a/yunkes/src/components/staffchat/StatsPane.vue b/yunkes/src/components/staffchat/StatsPane.vue
index 81a3337..af9efdf 100644
--- a/yunkes/src/components/staffchat/StatsPane.vue
+++ b/yunkes/src/components/staffchat/StatsPane.vue
@@ -1,8 +1,623 @@
-<!-- 占位组件: Task 14 实现统计分析视图,签名锁定如下。 -->
+<!-- 员工聊天窗口右列·统计分析(对齐云客 wechat-window 统计 tab): 7 个计数 tab
+     (label 带 (N) 徽标) + 近 7 天日期窗 + 分型明细表。明细列配置驱动
+     (KIND_COLS);红包/转账行带 msgid 定位跳转;语音通话列对齐 CallList。
+     根元素必须保持单 div——父组件 StaffChat 靠 attrs fallthrough 挂
+     sc-root__pane 列宽。 -->
 <script setup lang="ts">
-defineProps<{ ownerId: string }>()
+import { computed, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { getAccounts, getStaffStatsCounts, getStaffStatsDetail } from '@/api'
+import type { StaffStatsKind } from '@/api'
+import type { Account, StaffStatsCounts } from '@/api/types'
+import {
+  callDirectionLabel,
+  formatCallDuration,
+  formatTime,
+} from '@/utils/format'
+
+const props = defineProps<{ ownerId: string }>()
+const router = useRouter()
+
+// ---- tab 定义(顺序/文案对齐云客;sensitive 是前端专属空态,后端无该 kind) ----
+
+/** tab key = 后端 kind + 前端 sensitive 空态。 */
+type KindKey = StaffStatsKind | 'sensitive'
+
+const TABS: { key: KindKey; label: string }[] = [
+  { key: 'new_customers', label: '新的客户' },
+  { key: 'new_groups', label: '新的群' },
+  { key: 'red_transfer', label: '红包转账' },
+  { key: 'sensitive', label: '单聊/群聊敏感词' },
+  { key: 'del_customers', label: '删除客户' },
+  { key: 'blocked_customers', label: '拉黑客户' },
+  { key: 'voice_calls', label: '语音通话' },
+]
+
+/** tab key → counts 响应字段(sensitive 对应后端恒 0 占位字段)。 */
+const COUNT_KEY: Record<KindKey, keyof StaffStatsCounts> = {
+  new_customers: 'new_customers',
+  new_groups: 'new_groups',
+  red_transfer: 'red_transfer',
+  sensitive: 'sensitive_words',
+  del_customers: 'del_customers',
+  blocked_customers: 'blocked_customers',
+  voice_calls: 'voice_calls',
+}
+
+// ---- 通用明细行(后端每 kind 字段不同,统一宽行;取值见 staff_stats.py) ----
+
+interface StatsRow {
+  talker_id?: string | null
+  room_id?: string | null
+  nickname?: string | null
+  avatar?: string | null
+  remark?: string | null
+  room_name?: string | null
+  op_type?: string | null
+  amount?: number | null
+  time?: number | null
+  msg_id?: string | null
+  /** voice_calls 专属 */
+  id?: number | string | null
+  peer?: string | null
+  incoming?: number | null
+  connected?: boolean | null
+  duration?: number | null
+  start_time?: number | null
+  media_url?: string | null
+}
+
+// ---- 明细列配置(语音通话列富模板 + sensitive 空态走专属分支,不入表) ----
+
+interface Col {
+  prop: string
+  label: string
+  /** link=客户/群点击跳聊天;staff=员工微信(资料卡);缺省按 prop 特判文本。 */
+  kind?: 'link' | 'staff'
+}
+
+const KIND_COLS: Partial<Record<KindKey, Col[]>> = {
+  new_customers: [
+    { prop: 'nickname', label: '客户微信', kind: 'link' },
+    { prop: 'remark', label: '客户备注' },
+    { prop: 'staff', label: '员工微信', kind: 'staff' },
+    { prop: 'time', label: '时间' },
+  ],
+  new_groups: [
+    { prop: 'room_name', label: '微信群信息', kind: 'link' },
+    { prop: 'staff', label: '员工微信', kind: 'staff' },
+    { prop: 'time', label: '时间' },
+  ],
+  red_transfer: [
+    { prop: 'op_type', label: '操作类型' },
+    { prop: 'nickname', label: '客户微信', kind: 'link' },
+    { prop: 'staff', label: '员工微信', kind: 'staff' },
+    { prop: 'amount', label: '金额' },
+    { prop: 'time', label: '发生时间' },
+    { prop: '_action', label: '操作' },
+  ],
+  del_customers: [
+    { prop: 'nickname', label: '客户微信', kind: 'link' },
+    { prop: 'staff', label: '员工微信', kind: 'staff' },
+    { prop: 'time', label: '发生时间' },
+  ],
+  blocked_customers: [
+    { prop: 'nickname', label: '客户微信', kind: 'link' },
+    { prop: 'staff', label: '员工微信', kind: 'staff' },
+    { prop: 'time', label: '发生时间' },
+  ],
+}
+
+const activeTab = ref<KindKey>('new_customers')
+/** 当前 tab 列配置(voice_calls/sensitive 渲染专属分支,取空数组)。 */
+const activeCols = computed<Col[]>(() => KIND_COLS[activeTab.value] ?? [])
+
+// ---- 日期窗(默认近 7 天:今天-6天 00:00:00 ~ 今天 23:59:59) ----
+
+function defaultRange(): [Date, Date] {
+  const start = new Date()
+  start.setHours(0, 0, 0, 0)
+  start.setDate(start.getDate() - 6)
+  const end = new Date()
+  end.setHours(23, 59, 59, 999)
+  return [start, end]
+}
+
+const dateRange = ref<[Date, Date] | null>(defaultRange())
+
+/** 日期窗 → start/end ms(闭区间,整日对齐);清空返回空对象让后端兜底近 7 天。 */
+function windowParams(): { start?: number; end?: number } {
+  const r = dateRange.value
+  if (!r || !r[0] || !r[1]) return {}
+  const start = new Date(r[0])
+  start.setHours(0, 0, 0, 0)
+  const end = new Date(r[1])
+  end.setHours(23, 59, 59, 999)
+  return { start: start.getTime(), end: end.getTime() }
+}
+
+// ---- 员工微信列数据: 后端明细行无 staff 字段——数据本就是该员工的统计,
+//      用资料卡信息渲染(nickname/avatar,与 StaffChat 同款 getAccounts 手法) ----
+
+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 staffName = computed(() => profile.value?.nickname || props.ownerId)
+
+// ---- counts(一次拉全 7 类,徽标与明细解耦) ----
+
+const counts = ref<StaffStatsCounts | null>(null)
+const countsLoading = ref(false)
+let countsSeq = 0
+
+async function loadCounts(): Promise<void> {
+  const mySeq = ++countsSeq
+  countsLoading.value = true
+  try {
+    const res = await getStaffStatsCounts({
+      wechat_id: props.ownerId,
+      ...windowParams(),
+    })
+    if (mySeq !== countsSeq) return
+    counts.value = res
+  } catch {
+    if (mySeq !== countsSeq) return
+    counts.value = null // 失败仅退化为无徽标,不阻塞明细
+  } finally {
+    if (mySeq === countsSeq) countsLoading.value = false
+  }
+}
+
+/** tab label: label (N)(counts 未到位/失败时无徽标)。 */
+function tabLabel(key: KindKey): string {
+  const t = TABS.find(x => x.key === key)
+  if (!t) return key
+  const n = counts.value ? counts.value[COUNT_KEY[key]] : null
+  return n == null ? t.label : `${t.label} (${n})`
+}
+
+// ---- 明细(按当前 tab 拉;sensitive 不拉) ----
+
+const rows = ref<StatsRow[]>([])
+const detailLoading = ref(false)
+const detailError = ref<string | null>(null)
+let detailSeq = 0
+
+async function loadDetail(): Promise<void> {
+  const kind = activeTab.value
+  if (kind === 'sensitive') {
+    // 词库未接入(spec 决策): 空态卡分支——作废在途请求并清表
+    detailSeq++
+    rows.value = []
+    detailLoading.value = false
+    detailError.value = null
+    return
+  }
+  const mySeq = ++detailSeq
+  rows.value = []
+  detailLoading.value = true
+  detailError.value = null
+  try {
+    const res = await getStaffStatsDetail({
+      wechat_id: props.ownerId,
+      kind,
+      ...windowParams(),
+    })
+    if (mySeq !== detailSeq) return
+    rows.value = res.rows as StatsRow[]
+  } catch (e) {
+    if (mySeq !== detailSeq) return
+    detailError.value = (e as Error).message
+    rows.value = []
+  } finally {
+    if (mySeq === detailSeq) detailLoading.value = false
+  }
+}
+
+// ---- 加载编排: 进入(ownerId 变更)拉 counts+明细+资料卡;切 tab 只拉明细;
+//      日期窗变更 counts+明细都重拉 ----
+
+watch(activeTab, () => void loadDetail())
+
+watch(
+  () => props.ownerId,
+  () => {
+    dateRange.value = defaultRange()
+    void loadProfile()
+    void loadCounts()
+    void loadDetail()
+  },
+  { immediate: true },
+)
+
+function onRangeChange(): void {
+  void loadCounts()
+  void loadDetail()
+}
+
+// ---- 跳转: 客户/群 link 列 + red_transfer 操作列(msgid 定位) ----
+
+/**
+ * 跳本员工聊天窗: room_id 优先走 group(talkerId 语义为 roomId),否则 single。
+ * withMsgid 用于红包/转账「查看聊天记录」——带 ?msgid= 让 ChatMain 定位消息。
+ */
+function goChat(row: StatsRow, withMsgid = false): void {
+  const query =
+    withMsgid && row.msg_id ? { msgid: String(row.msg_id) } : undefined
+  if (row.room_id) {
+    router.push({
+      name: 'staff-chat',
+      params: { ownerId: props.ownerId, tab: 'group', talkerId: row.room_id },
+      query,
+    })
+  } else if (row.talker_id) {
+    router.push({
+      name: 'staff-chat',
+      params: { ownerId: props.ownerId, tab: 'single', talkerId: row.talker_id },
+      query,
+    })
+  }
+}
+
+/** 语音通话行跳聊天: peer 是对方 wxid(@chatroom 后缀判群,同 CallList 手法)。 */
+function goVoiceChat(row: StatsRow): void {
+  const peer = row.peer
+  if (!peer) return
+  if (peer.endsWith('@chatroom')) {
+    router.push({
+      name: 'staff-chat',
+      params: { ownerId: props.ownerId, tab: 'group', talkerId: peer },
+    })
+  } else {
+    router.push({
+      name: 'staff-chat',
+      params: { ownerId: props.ownerId, tab: 'single', talkerId: peer },
+    })
+  }
+}
+
+// ---- cell helpers ----
+
+/** link 列显示名: 昵称空时回退 wxid/群名/群ID。 */
+function linkText(row: StatsRow): string {
+  return row.nickname || row.room_name || row.talker_id || row.room_id || ''
+}
+
+/** 文本列: 空显 -。 */
+function cellText(row: StatsRow, prop: string): string {
+  const v = (row as Record<string, unknown>)[prop]
+  if (typeof v === 'string') return v.trim() ? v : '-'
+  if (typeof v === 'number') return String(v)
+  return '-'
+}
+
+/** 接通状态(后端 connected 布尔,语义同 callStatusLabel 的 已接通/未接通)。 */
+function connectLabel(connected?: boolean | null): string {
+  if (connected == null) return '--'
+  return connected ? '已接通' : '未接通'
+}
+
+// ---- 录音播放(手法抄 CallList: dialog + audio + 新窗口链接) ----
+
+const recordDialogVisible = ref(false)
+const recordSrc = ref<string | null>(null)
+const recordTitle = ref('')
+
+function playRecord(row: StatsRow): void {
+  if (!row.media_url) return
+  recordSrc.value = row.media_url
+  const when = formatTime(row.start_time)
+  recordTitle.value = `录音 · ${row.peer || '语音通话'}${when !== '--' ? ` · ${when}` : ''}`
+  recordDialogVisible.value = true
+}
 </script>
 
 <template>
-  <div class="yk-empty">统计分析 — Task 14 实现</div>
+  <div class="sc-stats yk-panel-bg yk-panel-sep">
+    <!-- ── 顶部: 7 计数 tab + 日期窗 ── -->
+    <div class="sc-stats__top">
+      <el-tabs v-model="activeTab" class="sc-stats__tabs">
+        <el-tab-pane
+          v-for="t in TABS"
+          :key="t.key"
+          :label="tabLabel(t.key)"
+          :name="t.key"
+        />
+      </el-tabs>
+      <div class="sc-stats__row">
+        <span class="sc-stats__range-label">统计时间</span>
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          clearable
+          class="sc-stats__date"
+          @change="onRangeChange"
+        />
+      </div>
+    </div>
+
+    <!-- ── 明细区(列内滚动) ── -->
+    <div class="sc-stats__body">
+      <!-- 敏感词: 词库未接入,空态卡(spec 决策,对齐云客但词库缺失) -->
+      <div v-if="activeTab === 'sensitive'" class="sc-stats__sensitive">
+        <div class="sc-stats__sensitive-title">单聊/群聊敏感词</div>
+        <div class="sc-stats__sensitive-text">词库未配置，待 C1 敏感词功能接入</div>
+      </div>
+
+      <template v-else>
+        <el-alert
+          v-if="detailError"
+          :title="detailError"
+          type="error"
+          :closable="false"
+          style="margin-bottom: 10px"
+        />
+
+        <el-table
+          v-loading="detailLoading"
+          :data="rows"
+          stripe
+          empty-text="暂无数据"
+        >
+          <!-- ── 语音通话: 列对齐 CallList(通话人/类型/呼入呼出/接通状态/时长/录音/时间/操作) ── -->
+          <template v-if="activeTab === 'voice_calls'">
+            <el-table-column label="通话人" min-width="160">
+              <template #default="{ row }">
+                <el-button
+                  v-if="row.peer"
+                  link
+                  type="primary"
+                  size="small"
+                  @click="goVoiceChat(row)"
+                >{{ row.peer }}</el-button>
+                <span v-else>--</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="通话类型" width="100">
+              <template #default>语音通话</template>
+            </el-table-column>
+            <el-table-column label="呼入呼出" width="90">
+              <template #default="{ row }">{{ callDirectionLabel(row.incoming) }}</template>
+            </el-table-column>
+            <el-table-column label="接通状态" width="90">
+              <template #default="{ row }">{{ connectLabel(row.connected) }}</template>
+            </el-table-column>
+            <el-table-column label="通话时长" width="100">
+              <template #default="{ row }">{{ formatCallDuration(row.duration) }}</template>
+            </el-table-column>
+            <el-table-column label="通话录音" width="100" align="center">
+              <template #default="{ row }">
+                <el-button
+                  v-if="row.media_url"
+                  link
+                  type="primary"
+                  size="small"
+                  @click="playRecord(row)"
+                >播放</el-button>
+                <span v-else style="color: #c0c4cc">--</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="通话时间" width="160">
+              <template #default="{ row }">{{ formatTime(row.start_time) }}</template>
+            </el-table-column>
+            <el-table-column label="操作" width="110" fixed="right" align="center">
+              <template #default="{ row }">
+                <el-button
+                  link
+                  type="primary"
+                  size="small"
+                  :disabled="!row.peer"
+                  @click="goVoiceChat(row)"
+                >查看聊天记录</el-button>
+              </template>
+            </el-table-column>
+          </template>
+
+          <!-- ── 其余 5 类: KIND_COLS 配置驱动 ── -->
+          <template v-else>
+            <el-table-column
+              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"
+            >
+              <template #default="{ row }">
+                <!-- link 列: 客户/群 → 跳本员工聊天窗 -->
+                <template v-if="col.kind === 'link'">
+                  <div class="sc-stats__user">
+                    <el-avatar
+                      v-if="row.avatar"
+                      :size="28"
+                      :src="row.avatar"
+                      shape="square"
+                    />
+                    <el-button
+                      v-if="linkText(row)"
+                      link
+                      type="primary"
+                      size="small"
+                      class="sc-stats__link"
+                      @click="goChat(row)"
+                    >{{ linkText(row) }}</el-button>
+                    <span v-else>--</span>
+                  </div>
+                </template>
+
+                <!-- staff 列: 明细行无该字段,渲染资料卡信息(数据本就是该员工) -->
+                <template v-else-if="col.kind === 'staff'">
+                  <div class="sc-stats__user">
+                    <el-avatar
+                      v-if="profile?.avatar"
+                      :size="28"
+                      :src="profile.avatar"
+                      shape="square"
+                    />
+                    <div class="sc-stats__meta">
+                      <div class="sc-stats__name" :title="staffName">{{ staffName }}</div>
+                      <div class="sc-stats__sub" :title="props.ownerId">{{ props.ownerId }}</div>
+                    </div>
+                  </div>
+                </template>
+
+                <!-- 时间/金额/操作列特判,其余纯文本 -->
+                <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 === '_action'">
+                  <el-button link type="primary" size="small" @click="goChat(row, true)">
+                    查看聊天记录
+                  </el-button>
+                </template>
+                <template v-else>{{ cellText(row, col.prop) }}</template>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+      </template>
+    </div>
+
+    <!-- ── 录音播放 dialog(手法抄 CallList) ── -->
+    <el-dialog
+      v-model="recordDialogVisible"
+      :title="recordTitle"
+      width="480px"
+      align-center
+      @closed="recordSrc = null"
+    >
+      <audio
+        v-if="recordSrc"
+        controls
+        :src="recordSrc"
+        style="width: 100%"
+        preload="metadata"
+      >
+        您的浏览器不支持音频播放。
+      </audio>
+      <div v-if="recordSrc" class="sc-stats__record-link">
+        <a :href="recordSrc" target="_blank" rel="noopener">在新窗口打开录音文件</a>
+      </div>
+    </el-dialog>
+  </div>
 </template>
+
+<style scoped>
+/* ══ 统计分析右列(墨玉主题,手法沿用 ContactsPane/MomentsPane) ══
+   点阵底/右缘玉绿线走全局 yk-panel-bg/yk-panel-sep(style.css);这里只写布局。 */
+.sc-stats {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+}
+
+/* ── 顶部区(tab + 日期窗,随列固定不滚动) ── */
+.sc-stats__top {
+  flex: none;
+  padding: 4px 12px 0;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid rgba(23, 29, 43, 0.05);
+}
+.sc-stats__tabs :deep(.el-tabs__header) {
+  margin: 0 0 6px;
+}
+/* 7 个 tab 一排放不下时滚动而非换行挤爆列宽 */
+.sc-stats__tabs :deep(.el-tabs__nav-scroll) {
+  overflow-x: auto;
+}
+.sc-stats__tabs :deep(.el-tabs__nav) {
+  white-space: nowrap;
+}
+.sc-stats__row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding-bottom: 10px;
+}
+.sc-stats__range-label {
+  flex: none;
+  font-size: 12.5px;
+  color: #5a6472;
+}
+.sc-stats__date {
+  width: 240px;
+}
+
+/* ── 明细区(列内滚动) ── */
+.sc-stats__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px;
+}
+
+/* 敏感词空态卡 */
+.sc-stats__sensitive {
+  margin-top: 60px;
+  text-align: center;
+}
+.sc-stats__sensitive-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #2b3240;
+}
+.sc-stats__sensitive-text {
+  margin-top: 10px;
+  font-size: 13px;
+  color: #8a94a4;
+}
+
+/* link/staff 富单元格(头像 + 名称/微信号,手法对齐 ContactsPane) */
+.sc-stats__user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sc-stats__user .el-avatar {
+  flex: none;
+  border-radius: 8px;
+  border: 1px solid rgba(23, 29, 43, 0.05);
+  box-shadow: 0 1px 3px rgba(23, 29, 43, 0.06);
+}
+.sc-stats__link {
+  max-width: 100%;
+  justify-content: flex-start;
+}
+.sc-stats__meta {
+  min-width: 0;
+}
+.sc-stats__name {
+  font-size: 13px;
+  font-weight: 600;
+  color: #2b3240;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sc-stats__sub {
+  margin-top: 2px;
+  font-size: 11.5px;
+  color: #8a94a4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 录音 dialog 底部链接 */
+.sc-stats__record-link {
+  margin-top: 8px;
+  font-size: 12px;
+  text-align: center;
+}
+</style>