dsh-data-domain-knowledge 0.1.0-alpha.1

package/src/client/KnowledgePanel.tsx

@@ -0,0 +1,381 @@
+import { useCallback, useEffect, useState, type ReactNode } from 'react'
+import {
+  Activity, AlertCircle, BarChart3, Box, BrainCircuit, Compass, Database, FileText, HardDrive,
+  Layers3, Settings2, Stethoscope, Workflow, Wrench, X, Zap,
+} from '@tita-data-agent/ui/icons'
+import type { LucideIcon } from '@tita-data-agent/ui/icons'
+import { Badge, Button, Card, Tabs, TabsContent, TabsList, TabsTrigger, cn } from '@tita-data-agent/ui/components'
+import {
+  Drawer, DrawerBody, DrawerContent, DrawerHeader, DrawerTitle,
+} from '@tita-data-agent/ui/overlays'
+import { KNOWLEDGE_SETTINGS_ORDER, NodeSettingsPanel, settingsAnchorId, useScope, type SettingsNode, type SettingsScopeLike } from './NodeSettings.tsx'
+import { LayoutPreview, useAgentLayout } from './DirectoryPicker.tsx'
+import { AgentPresetCard, type AgentPresetRemote } from './AgentPresetCard.tsx'
+import {
+  NODE_META, NODE_ORDER, NODE_STATUS_LABEL, noteCountOf, sourceCountOf,
+  type KnowledgeStats, type KnowledgeTab, type NodeId, type PanelTab, type Tone,
+} from './architecture.tsx'
+import { AgentArchitectureGraph } from './arch/AgentArchitectureGraph.tsx'
+import { NodeLogicPanel } from './arch/NodeLogicPanel.tsx'
+import { ProblemDetailPanel } from './arch/ProblemDetailPanel.tsx'
+import { formatBuildTime } from './arch/model.ts'
+import { PROBLEM_DOMAINS } from './problem-domains.ts'
+import { AttributionTab } from './attribution/AttributionTab.tsx'
+import { KnowledgeBaseTab } from './KnowledgeBaseTab.tsx'
+import { IntentTab } from './IntentTab.tsx'
+import { RecallPanel } from './RecallPanel.tsx'
+import { styles, toneSuffix } from './styles.ts'
+import '@tita-data-agent/ui/styles.css'
+import './styles.css'
+
+interface Props {
+  visible: boolean
+  onOpenTab?: (kind: 'data-sheet' | 'data-notebook') => void
+  settings?: {
+    intent?: SettingsScopeLike
+    knowledge?: SettingsScopeLike
+    convert?: SettingsScopeLike
+  }
+  /** agent preset 的 Remote 命名空间；「Agent 提示词」卡片读名单、开真源目录。 */
+  remote?: AgentPresetRemote
+}
+
+interface Envelope<T> { ok?: boolean; data?: T; warnings?: string[]; error?: { message?: string; suggestion?: string } }
+
+type ViewId = PanelTab
+type Selection = NodeId | null
+
+/**
+ * 一级 tab。**只有名字和图标** —— 标题与说明句已经撤掉：tab 自己就写着「知识库」，
+ * 下面再挂一个 h1「知识库」加一句介绍，是把同一件事说两遍，还白占一屏顶部空间。
+ */
+const VIEWS: Record<ViewId, { label: string; icon: LucideIcon }> = {
+  overview: { label: 'Agent 概览', icon: Layers3 },
+  intent: { label: '意图', icon: Workflow },
+  knowledge: { label: '知识库', icon: Database },
+  attribution: { label: '智能归因', icon: Stethoscope },
+  memory: { label: '记忆', icon: BrainCircuit },
+  eval: { label: '评测', icon: BarChart3 },
+}
+
+const VIEW_ORDER: ViewId[] = ['overview', 'intent', 'knowledge', 'attribution', 'memory', 'eval']
+
+async function requestJson<T>(url: string, init?: RequestInit): Promise<Envelope<T>> {
+  const response = await fetch(url, init)
+  const text = await response.text()
+  if (!text.trim()) throw new Error(`服务端返回空响应（HTTP ${response.status}）`)
+  let payload: Envelope<T>
+  try {
+    payload = JSON.parse(text) as Envelope<T>
+  } catch {
+    throw new Error(`服务端返回了无效响应（HTTP ${response.status}）`)
+  }
+  if (!response.ok || payload.ok === false) throw new Error(payload.error?.message ?? `请求失败（${response.status}）`)
+  return payload
+}
+
+function MetricCard({ icon: Icon, label, value, hint, tone = 'neutral' }: { icon: LucideIcon; label: string; value: string; hint?: string; tone?: Tone }): ReactNode {
+  return <Card className={cn(styles.metricCard, styles[`metricTone${toneSuffix(tone)}`])}>
+    <span className={styles.metricIcon}><Icon size={16} strokeWidth={1.8} /></span>
+    <span className={styles.metricCopy}><small>{label}</small><strong>{value}</strong>{hint && <em>{hint}</em>}</span>
+  </Card>
+}
+
+/**
+ * 记忆 Tab。
+ *
+ * 这一页**没有**设置项，也**没有**编造的数字：记忆段的落盘量是真实的，
+ * 情节记忆与操作记忆两栏明说「示意」，因为采集与归纳管线还没实现 —— 架构图上
+ * 对应的节点标的就是「待实现」。
+ *
+ * 0032 起记忆住在 `<agentRoot>/memory/<库 id>`，不再在知识树里，所以这里读
+ * `stats.memoryFiles` 并把**真实路径**显示出来 —— 「它到底在哪」这一页必须能回答。
+ */
+function MemoryTab({ onSelect, stats, version }: { onSelect: (id: NodeId) => void; stats: KnowledgeStats; version: number }): ReactNode {
+  const memoryFiles = stats.memoryFiles ?? 0
+  const builtAt = formatBuildTime(stats.builtAt)
+  return <div className={styles.viewStack}>
+    <Card className={styles.workspaceCard}>
+      <div className={styles.cardHeader}>
+        <div><h3><HardDrive size={14} />真实记忆落盘</h3></div>
+        <Badge tone="success">来自 /knowledge/stats</Badge>
+      </div>
+      <p className={styles.cardDescription}>
+        本地记忆不是白板：文档每次内容变化都会在 <b>memory/</b> 留下版本快照，wiki 卡片也有自己的快照，
+        回滚本身也可回滚；下面这排数字是当前真实落盘量，而不是产品占位。
+      </p>
+      {/* 路径要说出来：记忆从知识树搬到了根路径下，用户备份时得知道该拷哪。 */}
+      {stats.memoryRoot && <p className={styles.kbRoot} title={stats.memoryRoot}>{stats.memoryRoot}</p>}
+      <div className={styles.memoryReal}>
+        <MetricCard icon={HardDrive} label="memory/ 文件" value={String(memoryFiles)} hint="来源与卡片版本快照" tone="amber" />
+        <MetricCard icon={FileText} label="来源文档" value={String(stats.sourceCount ?? 0)} hint="可追溯的 SourceRaw" tone="blue" />
+        <MetricCard icon={Box} label="wikiNotes" value={String(noteCountOf(stats))} hint="已编译的召回单元" tone="green" />
+        <MetricCard icon={Activity} label="索引版本" value={version ? `v${version}` : '—'} hint={builtAt} tone="violet" />
+      </div>
+    </Card>
+
+    <div className={styles.memoryGrid}>
+      <Card className={styles.memoryCard}>
+        <div className={styles.cardHeader}><div><h3><FileText size={14} />情节记忆</h3></div><Badge tone="warning">待实现</Badge></div>
+        <p>记录用户做了什么、采用了什么结果以及事后的反馈；保留时间、会话与来源，之后可以按上下文回忆。采集与归纳管线还没实现之前，这里只描述结构与策略，不展示编造的数字。</p>
+        <Button variant="outline" onClick={() => onSelect('episodic-memory')}>查看节点状态<Compass size={14} /></Button>
+      </Card>
+      <Card className={styles.memoryCard}>
+        <div className={styles.cardHeader}><div><h3><Wrench size={14} />操作记忆 → Skill</h3></div><Badge tone="warning">待实现</Badge></div>
+        <p>从重复操作里归纳步骤、参数和工具组合，经过质量检查后生成可复用 Skill。提取管线与 Skill Registry 写入都还没有实现。</p>
+        <Button variant="outline" onClick={() => onSelect('procedural-memory')}>查看节点状态<Compass size={14} /></Button>
+      </Card>
+      <Card className={cn(styles.memoryCard, styles.memoryCardWide)}>
+        <div className={styles.cardHeader}><div><h3><Wrench size={14} />质量检查与每日更新</h3></div><Badge tone="warning">待实现</Badge></div>
+        <div className={styles.timeline}><span>交互采集</span><i>→</i><span>去重归纳</span><i>→</i><span>人工审核</span><i>→</i><span>知识库 / Skill Registry</span></div>
+        <p className={styles.cardDescription}>目前真实在跑的质检是<b>卡片 schema 的三层校验</b>（格式 / 引用 / 语义），入口在「知识库 → Wiki」。</p>
+        <Button variant="default" onClick={() => onSelect('daily-update')}><Zap size={14} />查看自进化链路</Button>
+      </Card>
+    </div>
+  </div>
+}
+
+function EvalTab({ visible, settings, onSelect }: { visible: boolean; settings?: SettingsScopeLike; onSelect: (id: NodeId) => void }): ReactNode {
+  const snapshot = useScope(settings)
+  const value = snapshot.value ?? {}
+  return <div className={styles.viewStack}>
+    <div className={styles.evalGrid}>
+      <RecallPanel
+        visible={visible}
+        variant="runner"
+        resetKey={String(snapshot.revision ?? '')}
+        defaults={{
+          ...(typeof value.recallMode === 'string' ? { mode: value.recallMode } : {}),
+          ...(typeof value.recallTopK === 'number' ? { topK: value.recallTopK } : {}),
+          ...(typeof value.contextTopN === 'number' ? { topN: value.contextTopN } : {}),
+        }}
+      />
+      <Card className={styles.evalPlan}>
+        <div className={styles.cardHeader}><div><h3><BarChart3 size={14} />评测计划</h3></div><Badge tone="warning">占位</Badge></div>
+        <p className={styles.cardDescription}>评测集接入前，这一栏只声明要评什么；左边的单问题检查已经是真实链路。</p>
+        <div className={styles.evalRows}>
+          <div><span>编译正确性</span><strong>待运行</strong></div>
+          <div><span>三路 Hybrid Recall@10</span><strong>待运行</strong></div>
+          <div><span>引用可追溯性</span><strong>待运行</strong></div>
+          <div><span>多模态 Markdown</span><strong>待运行</strong></div>
+          <div><span>增量编译复用率</span><strong>待运行</strong></div>
+        </div>
+        <Button variant="outline" onClick={() => onSelect('build')}>查看构建节点</Button>
+      </Card>
+    </div>
+  </div>
+}
+
+export function KnowledgePanel({ visible, onOpenTab, settings, remote }: Props): ReactNode {
+  const [activeTab, setActiveTab] = useState<ViewId>('overview')
+  const [stats, setStats] = useState<KnowledgeStats>({})
+  const [statsLoading, setStatsLoading] = useState(false)
+  const [statsError, setStatsError] = useState<string | null>(null)
+  const [selected, setSelected] = useState<Selection>(null)
+  /** 选中的问题域。与节点选中**互斥**：浮层只有一个，两种内容不能同时占着它。 */
+  const [selectedDomain, setSelectedDomain] = useState<string | null>(null)
+  const [notice, setNotice] = useState<{ tone: 'success' | 'error'; text: string } | null>(null)
+  /** 从架构图节点跳到知识库分栏：tab + 一个递增的 nonce（同栏再点也要生效）。 */
+  const [knowledgeFocus, setKnowledgeFocus] = useState<{ tab: KnowledgeTab; nonce: number } | undefined>(undefined)
+  /**
+   * 设置抽屉。面板上只有**一个**设置项（存储位置），而它不属于任何一个视图 ——
+   * 所以入口放在 tab 栏最右边，不挂在任何一个 tab 的内容里。
+   *
+   * 0034：`null` = 关着，否则是**要落到哪一块**。卡片头上的「参数」chip 走的就是这条路
+   * —— 它不新开一个家，只是把同一块面板滚到眼前并接管焦点。
+   */
+  const [settingsTarget, setSettingsTarget] = useState<SettingsNode | null>(null)
+  /**
+   * 四段布局 + 家当解析结果 + 宿主提供哪种目录选择交互。它是**服务端算出来的**（`layout.ts` 是唯一
+   * 真源），前端不自己拼路径。刷新键带上设置 revision：改完根路径，预览要跟着变。
+   */
+  const knowledgeSnapshot = useScope(settings?.knowledge)
+  const { layout, error: layoutError } = useAgentLayout(knowledgeSnapshot.revision ?? 0)
+
+  /**
+   * 「参数」chip 打开的抽屉要落到它指的那一块：滚过去 + 把焦点交过去。
+   *
+   * 抽屉的内容在 `open` 之后才挂载，所以查 DOM 得等一帧。滚动用默认的瞬时行为
+   * （不是 smooth）：抽屉自己正在滑入，再叠一段长距离滚动只会让人看不清发生了什么。
+   */
+  useEffect(() => {
+    if (!settingsTarget) return
+    const frame = requestAnimationFrame(() => {
+      const section = document.getElementById(settingsAnchorId(settingsTarget))
+      section?.scrollIntoView({ block: 'start' })
+      section?.focus({ preventScroll: true })
+    })
+    return () => cancelAnimationFrame(frame)
+  }, [settingsTarget])
+
+  /** 打开设置抽屉并落到某一块。传 `null` 就是关。 */
+  const openSettings = useCallback((target: SettingsNode | null): void => { setSettingsTarget(target) }, [])
+
+  const refreshStats = useCallback(async (): Promise<void> => {
+    setStatsLoading(true); setStatsError(null)
+    try {
+      const payload = await requestJson<KnowledgeStats>('/knowledge/stats')
+      setStats(payload.data ?? {})
+    } catch (error) {
+      setStatsError(error instanceof Error ? error.message : String(error))
+    } finally {
+      setStatsLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { if (visible) void refreshStats() }, [visible, refreshStats])
+
+  const sourceCount = sourceCountOf(stats)
+  const version = stats.buildVersion ?? 0
+  const selectNode = (id: NodeId | null): void => { setSelected(id); setSelectedDomain(null); setNotice(null) }
+  const selectDomain = (id: string | null): void => { setSelectedDomain(id); setSelected(null); setNotice(null) }
+
+  /** 架构图节点 → 功能 tab。这是节点面板上「去配置」按钮唯一的落点。 */
+  const jumpTo = (tab: PanelTab, knowledgeTab?: KnowledgeTab): void => {
+    setActiveTab(tab)
+    if (tab === 'knowledge' && knowledgeTab) setKnowledgeFocus({ tab: knowledgeTab, nonce: Date.now() })
+  }
+
+  const jumpLabel = selected ? `<${NODE_META[selected].title}>：${NODE_STATUS_LABEL[NODE_META[selected].status]}` : null
+
+  /**
+   * 画布内的详情浮层。**两种内容、一个位置**：选中节点看节点，选中问题域看问题域，
+   * 都没选中时浮层根本不出现 —— 那时画布是完整的一张图。
+   */
+  const inspector = selected
+    ? <NodeLogicPanel
+      selected={selected} stats={stats} version={version}
+      onJump={jumpTo}
+      {...(onOpenTab ? { onOpenTab } : {})}
+      onClose={() => selectNode(null)}
+    />
+    : selectedDomain
+      ? <ProblemDetailPanel
+        domainId={selectedDomain} stats={stats} version={version}
+        onSelect={selectNode} onClose={() => selectDomain(null)}
+      />
+      : null
+
+  return <section className={styles.panel} aria-label="Tita Data Agent">
+    {/* Tab 切换是面板外壳的一部分：它不参与 `.tita-content` 的滚动，永远停在顶部。 */}
+    <Tabs className={styles.panelTabs} value={activeTab} onValueChange={value => setActiveTab(value as ViewId)}>
+      <div className={styles.tabBar}>
+        <TabsList className={styles.tabsList}>
+          {VIEW_ORDER.map(id => {
+            const TabIcon = VIEWS[id].icon
+            return <TabsTrigger key={id} value={id}><TabIcon size={13} />{VIEWS[id].label}</TabsTrigger>
+          })}
+        </TabsList>
+        <Button
+          variant="ghost" size="icon" className={styles.tabBarSettings}
+          aria-label="设置" title="设置 · 本方案参数"
+          onClick={() => openSettings('storage')}
+        ><Settings2 size={15} /></Button>
+      </div>
+
+      <div className={cn(styles.content, activeTab === 'attribution' && styles.contentStage)}>
+
+        {/* 一级 tab 已经说明「现在是哪一页」，这里不再重复一遍标题与说明。
+            只有真的出问题时才占一行：读取失败 / 读取中。 */}
+        {(statsError || statsLoading) && <p className={styles.viewStatus} role="status">
+          {statsError ? <><AlertCircle size={13} />数据读取失败：{statsError}</> : '正在读取知识库统计…'}
+        </p>}
+
+        {notice && <Card className={cn(styles.notice, notice.tone === 'error' ? styles.noticeError : styles.noticeSuccess)} role="status">
+          <AlertCircle size={16} /><span>{notice.text}</span>
+          <Button variant="ghost" size="icon" aria-label="关闭提示" title="关闭提示" onClick={() => setNotice(null)}><X size={14} /></Button>
+        </Card>}
+
+        <TabsContent value="overview">
+          {/* 概览 = **一个画布**。0027 之前这里是「画布 + 右侧栏」，而问题域还收在栏底的
+              折叠区里 —— 三块内容、两条边框，读起来是三个东西。现在画布是四条带
+              （A/B/C 三条链路 + 一条问题域带），点节点或问题域牌子都在**画布内**的
+              浮层里展开详情：不占侧栏、不缩字、可关闭。
+              设置不在这里：面板上唯一的设置入口在顶部 tab 栏最右边的齿轮里。 */}
+          <AgentArchitectureGraph
+            stats={stats} version={version} selected={selected}
+            onSelect={selectNode} visible={visible && activeTab === 'overview'}
+            selectedDomain={selectedDomain} onSelectDomain={selectDomain}
+            {...(inspector ? { inspector } : {})}
+          />
+          <nav className={styles.srOnly} aria-label="架构节点列表">
+            <ul>{NODE_ORDER.map(id => <li key={id}><button type="button" onClick={() => selectNode(id)}>{NODE_META[id].title}：{NODE_META[id].detail}</button></li>)}</ul>
+          </nav>
+          <nav className={styles.srOnly} aria-label="问题域列表">
+            <ul>{PROBLEM_DOMAINS.map(domain => <li key={domain.id}><button type="button" onClick={() => selectDomain(domain.id)}>{domain.title}：{domain.question}</button></li>)}</ul>
+          </nav>
+          <span className={styles.srOnly} role="status" aria-live="polite">{jumpLabel ?? ''}</span>
+        </TabsContent>
+
+        <TabsContent value="intent">
+          {/* 意图设置（澄清阈值 / TTL / 兜底）也在这一页 —— 设置与它生效的地方同处。 */}
+          <IntentTab visible={visible && activeTab === 'intent'} intent={settings?.intent} />
+        </TabsContent>
+
+        <TabsContent value="knowledge">
+          <KnowledgeBaseTab
+            visible={visible && activeTab === 'knowledge'}
+            onChanged={() => void refreshStats()}
+            {...(settings?.knowledge ? { knowledge: settings.knowledge } : {})}
+            {...(knowledgeFocus ? { focus: knowledgeFocus } : {})}
+            onOpenSettings={openSettings}
+          />
+        </TabsContent>
+
+        <TabsContent value="attribution" className={styles.stageContent}>
+          <AttributionTab visible={visible && activeTab === 'attribution'} />
+        </TabsContent>
+
+        <TabsContent value="memory">
+          <MemoryTab onSelect={selectNode} stats={stats} version={version} />
+        </TabsContent>
+
+        <TabsContent value="eval">
+          <EvalTab visible={visible && activeTab === 'eval'} {...(settings?.knowledge ? { settings: settings.knowledge } : {})} onSelect={selectNode} />
+        </TabsContent>
+      </div>
+    </Tabs>
+
+    <Drawer open={settingsTarget !== null} onOpenChange={next => { if (!next) setSettingsTarget(null) }}>
+      {settingsTarget !== null && <DrawerContent className={styles.settingsDrawer} resizable resizeKey="tita-knowledge-settings">
+        <DrawerHeader>
+          {/* 只留标题。原来这里有一段「方案级设置：知识树落在磁盘哪里……」的说明，
+              它把下面每一块的标题又说了一遍，还占了抽屉的第一屏。 */}
+          <DrawerTitle>设置</DrawerTitle>
+        </DrawerHeader>
+        <DrawerBody>
+          {/* **方案级参数只有一个入口**：就是这里。
+              0029 之前它们散在知识库的各个分栏里（构建在编译卡、召回在召回卡、重排
+              在精排卡），于是「改一个参数」先要回答「它属于哪一段」——而那个归属是
+              实现细节，不是用户的心智模型。现在抽屉按链路顺序分块：
+              存储 → 收录 → 构建 → 召回 → 重排。
+              0034 补上后半句：分栏里那些「已移到顶部齿轮」的路牌换成卡片头上的「参数」
+              chip —— 家还是一个，只是多了一扇离现场更近的门（`settingsTarget` 决定
+              落到哪一块，`highlight` 是那一次落点的一次性强调）。
+              本库的词汇表（来源类型 / Wiki 类型）**不在这里**：它按库持久化，是另一个
+              作用域，住在知识库工具栏的「类型定义」抽屉里。 */}
+          <div className={styles.settingsStack}>
+            {KNOWLEDGE_SETTINGS_ORDER.map(node => <NodeSettingsPanel
+              key={node}
+              node={node}
+              knowledge={settings?.knowledge}
+              highlight={settingsTarget === node}
+              pickerKind={layout?.pickerKind ?? null}
+              {...(node === 'storage' ? { extra: <LayoutPreview layout={layout} error={layoutError} /> } : {})}
+              {...(node === 'build' && layout?.resources ? { resolved: layout.resources } : {})}
+            />)}
+            {/* Agent 提示词是**关于这个 Agent 本身**的东西，不是知识库的 —— 所以它排在
+                知识链路那四块之后，作为独立一块。正文只读（真源是 preset 的组合文件），
+                主操作是打开那份文件所在的真源目录。默认 preset 不在这里：那是 DSH 设置
+                里的一项，再摆一个只是同一字段的第二个入口。 */}
+            <AgentPresetCard
+              {...(remote ? { remote } : {})}
+              {...(layout?.presetDir ? { presetDir: layout.presetDir } : {})}
+              {...(layout?.presetDirExists === undefined ? {} : { presetDirExists: layout.presetDirExists })}
+            />
+          </div>
+        </DrawerBody>
+      </DrawerContent>}
+    </Drawer>
+  </section>
+}

package/src/client/KnowledgeStepRail.tsx

@@ -0,0 +1,60 @@
+/**
+ * 知识库的分栏切换器 —— **一条流水线，不是一排并列的 tab**。
+ *
+ * 0027 之前这里是 Radix 的 `TabsList`：五个等宽按钮并排，视觉上回答的是「五选一」。
+ * 但知识库这五栏之间是**有方向的**：SourceRaw 收录 → 编译成 wiki → 构建成图谱 →
+ * 召回 → 精排。方向本身就是信息（写入侧在左、读取侧在右），而一排等宽按钮把它抹掉了。
+ *
+ * 所以这里改成一条**步骤轨**：每一步 = 名词 + 动作 + 这一段的真实计数，步与步之间用
+ * 箭头连起来。它不冒充进度条 —— 召回 / 重排是运行时能力，不是「走完就算完成」的阶段，
+ * 所以没有「已完成 / 未完成」的勾，只有「现在停在哪一步」。
+ *
+ * 计数全部来自真实落盘与设置：没有数据的那一步宁可只写动作，也不编一个 0。
+ */
+
+import { Fragment, type ReactNode } from 'react'
+import { ChevronRight } from '@tita-data-agent/ui/icons'
+import { cn } from '@tita-data-agent/ui/components'
+import { KNOWLEDGE_TABS, type KnowledgeTab } from './architecture.tsx'
+import { styles } from './styles.ts'
+
+/** 每一步的两条事实：这一段现在有多少东西，以及它做什么。 */
+export interface StepFact { value: string; note: string }
+
+export interface KnowledgeStepRailProps {
+  tab: KnowledgeTab
+  onChange: (tab: KnowledgeTab) => void
+  facts: Record<KnowledgeTab, StepFact>
+}
+
+export function KnowledgeStepRail({ tab, onChange, facts }: KnowledgeStepRailProps): ReactNode {
+  return <nav className={styles.kbSteps} aria-label="知识链路分栏">
+    {KNOWLEDGE_TABS.map((item, index) => {
+      const Icon = item.icon
+      const fact = facts[item.id]
+      const on = tab === item.id
+      return <Fragment key={item.id}>
+        {index > 0 && <span className={styles.kbStepArrow} aria-hidden="true"><ChevronRight size={13} /></span>}
+        <button
+          type="button"
+          className={cn(styles.kbStep, on && styles.kbStepOn)}
+          aria-current={on ? 'step' : undefined}
+          onClick={() => onChange(item.id)}
+        >
+          {/* 两行，不是一行挤四样东西。一行放「图标 + 名字 + 动作 + 计数」在宿主侧栏
+              的宽度下（五步平分约 146px）必然把名字截成「So…」—— 而名字是这一步唯一
+              不可省的东西。所以第一行只放身份，第二行放事实。 */}
+          <span className={styles.kbStepTop}>
+            <Icon size={13} aria-hidden="true" />
+            <b>{item.label}</b>
+            <em className={styles.kbStepVerb}>{item.step}</em>
+          </span>
+          <span className={styles.kbStepFacts}>
+            <span className={styles.kbStepValue}>{fact.value}</span>
+            <span className={styles.kbStepNote}>{fact.note}</span>
+          </span>
+        </button>
+      </Fragment>
+    })}
+  </nav>
+}