dsh-data-domain-knowledge 0.1.0-alpha.9 → 0.1.1-alpha.2

package/src/client/AxisRegistrySection.tsx

@@ -1,26 +1,5 @@
-/**
- * 「轴实体」配置区块（0063 §3）——**这张界面就是 Resolve 那一步的词汇表**。
- *
- * ## 它是什么
- *
- * Object / Action / Scene 三个轴的 canonical 身份。抽取阶段拿到的是 **mention**
- * （原文里怎么称呼它），Resolve 把它变成实体 —— 而实体要有一个能查、能改的地方。
- * 就是这里。
- *
- * ## 为什么「候选」是一等状态
- *
- * 抽取先建 `candidate`，人后确认 —— 与卡片「入库在前、review 在后」同一条纪律。
- * 「先确认才准建」会让一份新文档里的每个新名字都变成「未解析」，而人根本看不到它们；
- * 建了候选，至少「库里现在有哪些实体、哪些还没人看过」有答案。
- *
- * ## 三个动作都可逆
- *
- * 确认能撤销（停用 / 退回候选）、改名留旧名做别名、并了能再改。
- * 与卡片 review 一样，**它们都不是准入凭证**。
- */
-
 import { useCallback, useEffect, useState, type ChangeEvent, type ReactNode } from 'react'
-import { Check, Pencil, Plus, X } from '@tita-agent/ui/icons'
+import { Check, ChevronDown, ChevronUp, Pencil, Plus, Search, X } from '@tita-agent/ui/icons'
 import { Badge, Button, Field, Input, SelectMenu, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, cn } from '@tita-agent/ui/components'
 import {
   Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle,
@@ -38,13 +17,12 @@ export interface AxisEntityView {
   scopeId: string
   status: AxisStatus
   aliases: string[]
-  /** 一句话说清它指什么、边界在哪（0068）。空串 = 还没人写过。 */
+  /** 实体定义；空串表示尚未填写。 */
   description: string
-  /** 这段定义是谁写的。`human` 之后模型不许覆盖它。 */
+  /** 人工修订后的定义不会被模型覆盖。 */
   descriptionSource: 'model' | 'human' | ''
 }
 
-/** 挂在轴实体上的人工指导（0063 §4.4，0068 落地）。 */
 export interface AxisGuidanceView {
   id: string
   kind: AxisGuidanceKind
@@ -53,9 +31,18 @@ export interface AxisGuidanceView {
   createdAt: string
 }
 
+export interface AxisRelationView {
+  id: string
+  fromId: string
+  toId: string
+  relationType: 'related_to'
+  evidence: string
+  createdAt: string
+  updatedAt: string
+}
+
 export type AxisGuidanceKind = 'prefer_name' | 'do_not_merge' | 'scope_rule' | 'definition' | 'extraction_hint'
 
-/** 五种指导的显示名。**说的是「模型拿到之后该怎么做」**，不是分类学。 */
 const GUIDANCE_LABEL: Record<AxisGuidanceKind, string> = {
   prefer_name: '优先用这个名',
   do_not_merge: '别并进来',
@@ -66,17 +53,15 @@ const GUIDANCE_LABEL: Record<AxisGuidanceKind, string> = {
 
 const GUIDANCE_KINDS = Object.keys(GUIDANCE_LABEL) as AxisGuidanceKind[]
 
-/** AI 生成的定义下一轮可以刷新；人工修改后变成稳定约束。 */
 const DESCRIPTION_SOURCE_LABEL: Record<'model' | 'human', string> = {
   model: 'AI 生成',
   human: '人工修订',
 }
 
-/** 三个轴的显示名与顺序。顺序就是坐标的读法：对象 × 动作 × 场景。 */
 const AXIS: Array<{ kind: AxisKind; label: string; hint: string }> = [
-  { kind: 'object', label: '对象', hint: '正在处理什么？稳定、可引用、可操作或可观察的对象，例如指标、表、字段、产品或数据方案。' },
-  { kind: 'action', label: '动作', hint: '正在做什么？围绕对象发生的操作或认知活动，例如查询、取数、分析、排查或修改。' },
-  { kind: 'scene', label: '场景', hint: '在什么情况下？只有会改变知识边界、处理方式或判断标准的状态、环境和约束，才登记为场景。' },
+  { kind: 'object', label: '对象', hint: '知识涉及的对象。' },
+  { kind: 'action', label: '动作', hint: '对对象执行的操作。' },
+  { kind: 'scene', label: '场景', hint: '知识适用的场景与约束。' },
 ]
 
 const STATUS_LABEL: Record<AxisStatus, string> = {
@@ -90,13 +75,11 @@ interface Draft {
   name: string
   aliases: string
   mergeInto: string
-  /** 定义（0068）。它与改名 / 别名一起在「保存」时提交 —— 它是一个字段，不是一个列表。 */
   description: string
 }
 
 const EMPTY_DRAFT: Draft = { open: false, id: '', kind: 'object', name: '', aliases: '', mergeInto: '', description: '' }
 
-/** 对话框里新加一条指导的草稿。它**立即生效**（列表项各有身份，不适合跟着「保存」一起提交）。 */
 interface GuidanceDraft {
   kind: AxisGuidanceKind
   text: string
@@ -115,24 +98,24 @@ export function AxisRegistrySection({ kbId, canEdit, onBusyChange }: AxisRegistr
   const [loading, setLoading] = useState(false)
   const [draft, setDraft] = useState<Draft>(EMPTY_DRAFT)
   const [guidance, setGuidance] = useState<Record<string, AxisGuidanceView[]>>({})
+  const [relations, setRelations] = useState<AxisRelationView[]>([])
   const [guideDraft, setGuideDraft] = useState<GuidanceDraft>({ kind: 'prefer_name', text: '' })
-  /**
-   * 三个轴并排成 tab（2026-10-06）。
-   *
-   * 它们本来是**坐标的三个分量**（对象 × 动作 × 场景），竖着堆成三段会让人以为它们是三层
-   * 或者有先后关系。并排之后一眼看到三类各有几个，切过去看内容 —— 与「知识」那一栏的
-   * 矩阵是同一种读法。
-   */
+  const [relationDraftId, setRelationDraftId] = useState('')
+  const [relationEvidence, setRelationEvidence] = useState('')
+  const [showEditorTools, setShowEditorTools] = useState(false)
   const [kindTab, setKindTab] = useState<AxisKind>('object')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [statusFilter, setStatusFilter] = useState<'all' | AxisStatus>('all')
   const [error, setError] = useState('')
 
   const load = useCallback(async (): Promise<void> => {
     if (!kbId) return
     setLoading(true)
     try {
-      const payload = await requestJson<{ entities: AxisEntityView[]; guidance: Record<string, AxisGuidanceView[]>; available: boolean }>(`/knowledge/axes?kb=${encodeURIComponent(kbId)}`)
+      const payload = await requestJson<{ entities: AxisEntityView[]; guidance: Record<string, AxisGuidanceView[]>; relations: AxisRelationView[]; available: boolean }>(`/knowledge/axes?kb=${encodeURIComponent(kbId)}`)
       setEntities(payload.data?.entities ?? [])
       setGuidance(payload.data?.guidance ?? {})
+      setRelations(payload.data?.relations ?? [])
       setAvailable(payload.data?.available ?? false)
       setError('')
     } catch (cause) {
@@ -143,11 +126,12 @@ export function AxisRegistrySection({ kbId, canEdit, onBusyChange }: AxisRegistr
   }, [kbId])
 
   useEffect(() => { void load() }, [load])
+  useEffect(() => {
+    setKindTab('object')
+    setSearchQuery('')
+    setStatusFilter('all')
+  }, [kbId])
 
-  /**
-   * 一个写动作。四处调用共用它，所以「忙」与「报错」只有一套 ——
-   * 三个动作各写一遍的话，迟早有一个忘了把错误显示出来。
-   */
   const post = async (body: Record<string, unknown>, done?: () => void): Promise<void> => {
     if (!kbId) return
     onBusyChange?.(true)
@@ -176,17 +160,16 @@ export function AxisRegistrySection({ kbId, canEdit, onBusyChange }: AxisRegistr
       description: entity.description,
     })
     setGuideDraft({ kind: 'prefer_name', text: '' })
+    setRelationDraftId('')
+    setRelationEvidence('')
+    setShowEditorTools(false)
   }
 
-  /** 保存编辑：改名 + 补别名 + （可选）并进另一个实体。三件事一次提交，顺序固定。 */
   const saveEditor = async (): Promise<void> => {
     const editing = entities.find(item => item.id === draft.id)
     const name = draft.name.trim()
     if (editing && name && name !== editing.name) await post({ action: 'rename', id: draft.id, name })
-    /*
-     * 定义变了才写。**写了就是决定**（`description_source` 落成 human），模型从此不许覆盖 ——
-     * 所以不能在打开对话框时无条件重写一遍，那会把「模型写的」也蹭成「人写的」。
-     */
+    // A changed description becomes human-authored, so avoid rewriting an unchanged value.
     if (editing && draft.description.trim() !== editing.description) {
       await post({ action: 'describe', id: draft.id, description: draft.description.trim() })
     }
@@ -199,18 +182,36 @@ export function AxisRegistrySection({ kbId, canEdit, onBusyChange }: AxisRegistr
     setDraft(EMPTY_DRAFT)
   }
 
-  /** 弹窗正在编辑的那个实体。改名后 `entities` 会变，所以按 id 现查 —— 不缓存。 */
   const target = entities.find(item => item.id === draft.id) ?? null
+  const relatedFor = (entityId: string): AxisRelationView[] => relations.filter(item => item.fromId === entityId || item.toId === entityId)
+  const relatedEntityId = (relation: AxisRelationView, entityId: string): string => relation.fromId === entityId ? relation.toId : relation.fromId
+  const relatedEntities = entities.filter(item => item.kind === 'object' && item.status !== 'merged' && item.id !== draft.id
+    && !relatedFor(draft.id).some(relation => relatedEntityId(relation, draft.id) === item.id))
   const byKind = (kind: AxisKind): AxisEntityView[] => entities.filter(entity => entity.kind === kind)
+  const filteredByKind = (kind: AxisKind): AxisEntityView[] => {
+    const needle = searchQuery.trim().toLocaleLowerCase()
+    const statusOrder: Record<AxisStatus, number> = { candidate: 0, active: 1, deprecated: 2, merged: 3 }
+    return byKind(kind)
+      .filter(entity => statusFilter === 'all' || entity.status === statusFilter)
+      .filter(entity => needle === '' || [
+        entity.name,
+        entity.id,
+        entity.description,
+        ...entity.aliases,
+        ...(guidance[entity.id] ?? []).map(item => item.text),
+      ].some(value => value.toLocaleLowerCase().includes(needle)))
+      // 待确认项优先，其余按名称排。注册表变大后，待处理项不用再靠滚动寻找。
+      .sort((left, right) => statusOrder[left.status] - statusOrder[right.status] || left.name.localeCompare(right.name, 'zh-CN'))
+  }
   const candidates = entities.filter(entity => entity.status === 'candidate').length
 
   if (!available) {
     return <section className={styles.settingsSection}>
       <div className={styles.settingsSectionHeader}>
-        <div><h3>知识矩阵实体注册表</h3></div>
+        <div><h3>坐标实体</h3></div>
       </div>
       <p className={styles.kbHint}>
-        当前环境还没有可用的坐标注册表。抽取试跑仍可运行，但无法核对库内已有的对象、动作和场景；报告会明确标记为“未查询注册表”。
+        当前环境没有坐标注册表，试跑会跳过实体核对。
       </p>
     </section>
   }
@@ -218,34 +219,50 @@ export function AxisRegistrySection({ kbId, canEdit, onBusyChange }: AxisRegistr
   return <section className={styles.settingsSection}>
     <div className={styles.settingsSectionHeader}>
       <div className={styles.settingsSectionHeaderTitle}>
-        <h3>知识矩阵实体注册表</h3>
-        <span className={styles.kbCount}>
-          {entities.length} 个实体{candidates > 0 ? ` · ${candidates} 个待确认` : ''}
-        </span>
+        <h3>坐标实体</h3>
+        {candidates > 0 && <span className={styles.kbCount}>{candidates} 个待确认</span>}
       </div>
     </div>
 
     {error && <p className={styles.trialError} role="alert">{error}</p>}
 
     {entities.length === 0 && !loading && <p className={styles.kbHint}>
-      还没有坐标实体。运行一次“编译”或“抽取试跑”，系统会把文档中识别出的对象、动作和场景登记到这里。
-      没有坐标的知识仍可检索，但不会进入坐标矩阵，也不会生成 Wiki Card。
+      暂无坐标实体，运行编译后会自动登记。
     </p>}
 
     <Tabs value={kindTab} onValueChange={value => setKindTab(value as AxisKind)}>
       <TabsList className={cn(styles.tabsList, styles.kbViewTabs, styles.axisKindTabs)}>
         {AXIS.map(axis => <TabsTrigger key={axis.kind} value={axis.kind}>
           {axis.label}
-          {/* 计数进 tab：切之前就要知道「这一类有几个」—— 空的那一类不该让人点进去才发现。 */}
           <span className={styles.axisKindCount}>{byKind(axis.kind).length}</span>
         </TabsTrigger>)}
       </TabsList>
+      {entities.length > 0 && <div className={styles.axisFilters}>
+        <div className={styles.axisSearchControl}>
+          <Search size={14} aria-hidden="true" />
+          <Input value={searchQuery} spellCheck={false} aria-label="搜索名称、别名、定义或 ID"
+            placeholder="搜索名称、别名、定义或 ID" onChange={event => setSearchQuery(event.target.value)} />
+        </div>
+        <SelectMenu value={statusFilter} aria-label="按状态筛选实体"
+          options={[
+            { value: 'all', label: '全部状态' },
+            { value: 'candidate', label: '待确认' },
+            { value: 'active', label: '已确认' },
+            { value: 'deprecated', label: '已停用' },
+            { value: 'merged', label: '已并入' },
+          ]}
+          onValueChange={value => setStatusFilter(value as 'all' | AxisStatus)} />
+        <span className={styles.axisFilterCount} aria-live="polite">
+          {filteredByKind(kindTab).length} / {byKind(kindTab).length}
+        </span>
+      </div>}
       {AXIS.map(axis => {
-        const rows = byKind(axis.kind)
+        const allRows = byKind(axis.kind)
+        const rows = filteredByKind(axis.kind)
         return <TabsContent key={axis.kind} value={axis.kind}>
-          {/* 这一类装什么，写在它自己的内容里 —— 三个提示并排挤在 tab 上会读成一句话。 */}
           <p className={styles.kbHint}>{axis.hint}</p>
-          {rows.length === 0 && <p className={styles.kbHint}>这一类还没有实体。</p>}
+          {allRows.length === 0 && !loading && <p className={styles.kbHint}>这一类还没有实体。</p>}
+          {allRows.length > 0 && rows.length === 0 && <p className={styles.kbHint}>没有匹配的实体。</p>}
           <ul className={styles.axisList}>
           {rows.map(entity => <li key={entity.id} className={styles.axisRow}>
             <span className={styles.axisName}>
@@ -255,22 +272,17 @@ export function AxisRegistrySection({ kbId, canEdit, onBusyChange }: AxisRegistr
                 {STATUS_LABEL[entity.status]}
               </Badge>
               {entity.scopeId ? <span className={styles.axisScope} title={`作用域：${entity.scopeId}`}>有作用域</span> : null}
+              {entity.kind === 'object' && relatedFor(entity.id).length > 0 ? <span className={styles.axisScope}>相关 {relatedFor(entity.id).length}</span> : null}
             </span>
-            <span className={styles.axisAliases}>
-              别名：{entity.aliases.filter(alias => alias !== entity.name).length > 0
-                ? entity.aliases.filter(alias => alias !== entity.name).join('、')
-                : '暂无（AI 还没有发现其他叫法）'}
-            </span>
-            {/*
-              定义与指导都在行上露出来（0068）：它们是**下一次抽取的参考**，而参考的质量
-              决定了矩阵会不会裂成两半。藏在编辑弹窗里，人就不会去看它。
-            */}
-            <span className={styles.axisAliases}>
-              定义：{entity.description || '暂无（等待 AI 补充或人工填写）'}
+            {entity.aliases.filter(alias => alias !== entity.name).length > 0 && <span className={styles.axisAliases}>
+              别名：{entity.aliases.filter(alias => alias !== entity.name).join('、')}
+            </span>}
+            {entity.description !== '' && <span className={styles.axisAliases}>
+              定义：{entity.description}
               {entity.descriptionSource !== '' && <span className={styles.axisScope}>
                 {' '}{DESCRIPTION_SOURCE_LABEL[entity.descriptionSource]}
               </span>}
-            </span>
+            </span>}
             {(guidance[entity.id]?.length ?? 0) > 0 && <span className={styles.axisScope}>
               {(guidance[entity.id] ?? []).length} 条人工指导
             </span>}
@@ -292,101 +304,129 @@ export function AxisRegistrySection({ kbId, canEdit, onBusyChange }: AxisRegistr
       })}
     </Tabs>
 
-    <Dialog open={draft.open} onOpenChange={next => { if (!next) setDraft(EMPTY_DRAFT) }}>
-      <DialogContent>
-        <DialogHeader><DialogTitle>编辑知识矩阵实体</DialogTitle></DialogHeader>
-        <div className={styles.kbForm}>
-          <Field label="标准名称">
-            <Input value={draft.name} spellCheck={false} disabled={!canEdit}
-              placeholder="例如：通天塔坑位click；要求脱离来源也能看懂"
-              onChange={(event: ChangeEvent<HTMLInputElement>) => setDraft({ ...draft, name: event.target.value })} />
-          </Field>
-          <p className={styles.kbHint}>
-            改名后旧名会自动保留为别名，历史知识仍指向同一个实体。
-          </p>
-          <Field label="定义">
-            <Textarea value={draft.description} spellCheck={false} disabled={!canEdit}
-              placeholder="一句话说明它指什么、边界在哪里。例如：通天塔投放位上的一次点击上报，只在通天塔作用域内成立。"
-              onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setDraft({ ...draft, description: event.target.value })} />
-          </Field>
-          <p className={styles.kbHint}>
-            这段定义会进入下一次抽取提示词。AI 生成的定义可以被你修订；人工修订后，AI 不会覆盖它。
-            {(draft.description !== '' && target !== null && target.descriptionSource !== '') && <>
-              {' '}当前来源：<b>{DESCRIPTION_SOURCE_LABEL[target.descriptionSource]}</b>。
-            </>}
-          </p>
+    <Dialog open={draft.open} onOpenChange={next => {
+      if (!next) {
+        setDraft(EMPTY_DRAFT)
+        setShowEditorTools(false)
+      }
+    }}>
+      <DialogContent className={styles.axisEditorDialog}>
+        <DialogHeader>
+          <DialogTitle>编辑坐标实体</DialogTitle>
+        </DialogHeader>
+        <div className={styles.axisEditorBody}>
+          {error && <p className={styles.trialError} role="alert">{error}</p>}
+          <div className={styles.axisEditorCore}>
+            <Field label="标准名称">
+              <Input value={draft.name} spellCheck={false} disabled={!canEdit}
+                placeholder="输入标准名称"
+                onChange={(event: ChangeEvent<HTMLInputElement>) => setDraft({ ...draft, name: event.target.value })} />
+            </Field>
+            <Field label={<>定义 {target?.descriptionSource && <Badge tone="neutral">{DESCRIPTION_SOURCE_LABEL[target.descriptionSource]}</Badge>}</>}>
+              <Textarea value={draft.description} spellCheck={false} disabled={!canEdit}
+                placeholder="补充定义与边界（可选）"
+                onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setDraft({ ...draft, description: event.target.value })} />
+            </Field>
+            <Field label="别名">
+              <Textarea value={draft.aliases} spellCheck={false} disabled={!canEdit}
+                placeholder="每行一个别名"
+                onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setDraft({ ...draft, aliases: event.target.value })} />
+            </Field>
+          </div>
+
+          <Button className={styles.axisEditorToggle} variant="ghost" size="sm" type="button"
+            aria-expanded={showEditorTools} aria-controls="axis-editor-tools"
+            onClick={() => setShowEditorTools(value => !value)}>
+            {showEditorTools ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+            更多操作
+          </Button>
+
+          <div className={styles.axisEditorTools} id="axis-editor-tools" hidden={!showEditorTools}>
+            {draft.kind === 'object' && <Field as="div" label="相关对象" hint="查询命中这个对象时，会沿相关关系召回对方的卡片。">
+              {relatedFor(draft.id).length > 0 && <ul className={cn(styles.axisList, styles.axisEditorRelationList)}>
+                {relatedFor(draft.id).map(relation => {
+                  const otherId = relatedEntityId(relation, draft.id)
+                  const other = entities.find(item => item.id === otherId)
+                  return <li key={relation.id} className={styles.axisRow}>
+                    <span className={styles.axisName}>
+                      <Badge tone="neutral">相关</Badge>
+                      <span className={styles.axisLabel}>{other?.name ?? otherId}</span>
+                      {relation.evidence && <span className={styles.axisAliases}>{relation.evidence}</span>}
+                    </span>
+                    <span className={styles.axisActions}>
+                      <Button variant="ghost" size="icon" title="移除对象关系" aria-label={`移除与 ${other?.name ?? otherId} 的关系`}
+                        disabled={!canEdit} onClick={() => void post({ action: 'relation-remove', relation_id: relation.id })}>
+                        <X size={12} />
+                      </Button>
+                    </span>
+                  </li>
+                })}
+              </ul>}
+              {relatedEntities.length > 0
+                ? <div className={styles.axisEditorRelationComposer}>
+                  <SelectMenu value={relationDraftId} disabled={!canEdit} aria-label="选择相关对象"
+                    options={[{ value: '', label: '选择对象' }, ...relatedEntities.map(item => ({ value: item.id, label: item.name }))]}
+                    onValueChange={setRelationDraftId} />
+                  <Input value={relationEvidence} spellCheck={false} disabled={!canEdit}
+                    placeholder="关系依据（可选）" aria-label="关系依据"
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => setRelationEvidence(event.target.value)} />
+                  <Button variant="outline" size="sm" disabled={!canEdit || relationDraftId === ''}
+                    onClick={() => void post({ action: 'relation-add', relation_type: 'related_to', from_id: draft.id, to_id: relationDraftId, evidence: relationEvidence }, () => {
+                      setRelationDraftId('')
+                      setRelationEvidence('')
+                    })}>
+                    <Plus size={12} />添加
+                  </Button>
+                </div>
+                : <p className={styles.kbHint}>没有可关联的其他对象。</p>}
+            </Field>}
 
-          <Field label="别名">
-            <Textarea value={draft.aliases} spellCheck={false} disabled={!canEdit}
-              placeholder={'每行一个。AI 发现的原文叫法通常会自动进入这里，例如：\n通天塔坑位click\n坑位click'}
-              onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setDraft({ ...draft, aliases: event.target.value })} />
-          </Field>
-          <p className={styles.kbHint}>
-            只添加同一实体的其他叫法；不要添加上位概念、组成部分或相关但不同的名称。
-          </p>
-          {/* 指导：一条件事，所以加/撤**立即生效**，不跟着下面那个「保存」走。 */}
-          <Field as="div" label="人工指导">
-            <span className={styles.kbHint}>{(guidance[draft.id] ?? []).length} 条</span>
-            {(guidance[draft.id] ?? []).length === 0
-              ? <p className={styles.kbHint}>
-                还没有。这里写的话会<b>逐字进下一次抽取的提示词</b> —— 名字该怎么理解、什么别并进来、
-                它属于哪个作用域。它是「人指挥模型怎么认坐标」的唯一入口。
-              </p>
-              : <ul className={styles.axisList}>
+            <Field as="div" label={<>人工指导 <Badge tone="neutral">立即生效</Badge></>}>
+              {(guidance[draft.id] ?? []).length > 0 && <ul className={cn(styles.axisList, styles.axisEditorGuidanceList)}>
                 {(guidance[draft.id] ?? []).map(item => <li key={item.id} className={styles.axisRow}>
-                  <span className={styles.axisName}>
-                    <Badge tone="neutral">{GUIDANCE_LABEL[item.kind]}</Badge>
-                    <span className={styles.axisLabel}>{item.text}</span>
-                    {item.author !== '' && <span className={styles.axisScope}>{item.author}</span>}
-                  </span>
-                  <span className={styles.axisActions}>
-                    <Button variant="ghost" size="icon" title="撤掉这条指导" aria-label="撤掉这条指导"
-                      disabled={!canEdit} onClick={() => void post({ action: 'guide-remove', id: draft.id, guidance_id: item.id })}>
-                      <X size={12} />
-                    </Button>
-                  </span>
-                </li>)}
+                    <span className={styles.axisName}>
+                      <Badge tone="neutral">{GUIDANCE_LABEL[item.kind]}</Badge>
+                      <span className={styles.axisLabel}>{item.text}</span>
+                      {item.author !== '' && <span className={styles.axisScope}>{item.author}</span>}
+                    </span>
+                    <span className={styles.axisActions}>
+                      <Button variant="ghost" size="icon" title="移除指导" aria-label="移除指导"
+                        disabled={!canEdit} onClick={() => void post({ action: 'guide-remove', id: draft.id, guidance_id: item.id })}>
+                        <X size={12} />
+                      </Button>
+                    </span>
+                  </li>)}
               </ul>}
-            <SelectMenu
-              value={guideDraft.kind}
-              disabled={!canEdit}
-              aria-label="指导类型"
-              options={GUIDANCE_KINDS.map(kind => ({ value: kind, label: GUIDANCE_LABEL[kind] }))}
-              onValueChange={value => setGuideDraft({ ...guideDraft, kind: value as AxisGuidanceKind })}
-            />
-            <Input value={guideDraft.text} spellCheck={false} disabled={!canEdit}
-              placeholder="坑位click 在通天塔作用域内指通天塔坑位click，不是全局对象。"
-              aria-label="指导内容"
-              onChange={(event: ChangeEvent<HTMLInputElement>) => setGuideDraft({ ...guideDraft, text: event.target.value })} />
-            <Button variant="outline" size="sm" disabled={!canEdit || guideDraft.text.trim() === ''}
-              title="加上去立即生效：指导是一条条独立的东西，不跟着「保存」走"
-              onClick={() => void post({ action: 'guide-add', id: draft.id, guidance_kind: guideDraft.kind, text: guideDraft.text }, () => setGuideDraft({ kind: guideDraft.kind, text: '' }))}>
-              <Plus size={12} />加一条
-            </Button>
-          </Field>
+              <div className={styles.axisEditorGuidanceComposer}>
+                <SelectMenu value={guideDraft.kind} disabled={!canEdit} aria-label="指导类型"
+                  options={GUIDANCE_KINDS.map(kind => ({ value: kind, label: GUIDANCE_LABEL[kind] }))}
+                  onValueChange={value => setGuideDraft({ ...guideDraft, kind: value as AxisGuidanceKind })} />
+                <Input value={guideDraft.text} spellCheck={false} disabled={!canEdit}
+                  placeholder="指导内容" aria-label="指导内容"
+                  onChange={(event: ChangeEvent<HTMLInputElement>) => setGuideDraft({ ...guideDraft, text: event.target.value })} />
+                <Button variant="outline" size="sm" disabled={!canEdit || guideDraft.text.trim() === ''}
+                  onClick={() => void post({ action: 'guide-add', id: draft.id, guidance_kind: guideDraft.kind, text: guideDraft.text }, () => setGuideDraft({ kind: guideDraft.kind, text: '' }))}>
+                  <Plus size={12} />添加
+                </Button>
+              </div>
+            </Field>
 
-          <Field as="div" label="并入实体">
-            <SelectMenu
-              value={draft.mergeInto}
-              disabled={!canEdit}
-              aria-label="并入另一个实体"
-              options={[
-                { value: '', label: '不并入其他实体' },
-                ...entities
-                  .filter(item => item.id !== draft.id && item.kind === draft.kind && item.status !== 'merged')
-                  .map(item => ({ value: item.id, label: `${item.name}（${item.id}）` })),
-              ]}
-              onValueChange={value => setDraft({ ...draft, mergeInto: value })}
-            />
-          </Field>
-          <p className={styles.kbHint}>
-            并了之后<b>被并的那个不删</b>：历史知识指着它的 id，删了就成了悬空引用。
-            它转成「已并入」并指向目标，它的别名也一起搬过去。
-          </p>
+            <Field as="div" label="合并到" hint="保存时执行；历史引用会保留。">
+              <SelectMenu value={draft.mergeInto} disabled={!canEdit} aria-label="并入另一个实体"
+                options={[
+                  { value: '', label: '不合并' },
+                  ...entities
+                    .filter(item => item.id !== draft.id && item.kind === draft.kind && item.status !== 'merged')
+                    .map(item => ({ value: item.id, label: `${item.name}（${item.id}）` })),
+                ]}
+                onValueChange={value => setDraft({ ...draft, mergeInto: value })}
+              />
+            </Field>
+          </div>
         </div>
-        <DialogFooter>
+        <DialogFooter className={styles.axisEditorFooter}>
           <Button variant="ghost" onClick={() => setDraft(EMPTY_DRAFT)}><X size={13} />取消</Button>
-          <Button disabled={!canEdit} onClick={() => void saveEditor()}><Plus size={13} />保存</Button>
+          <Button disabled={!canEdit || draft.name.trim() === ''} onClick={() => void saveEditor()}><Check size={13} />保存</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>