dsh-data-domain-knowledge 0.1.0-alpha.2 → 0.1.0-alpha.3

package/src/client/arch/AgentArchitectureGraph.tsx

@@ -14,8 +14,12 @@
  *    缩放**不用 G6 的 `fitView` / `zoomTo`**：这版 G6 对 HTML 节点算不出内容包围盒，
  *    两个 API 都实测无效（画布按 0.45 定了尺寸，内容仍按 1:1 画出去被裁掉）。
  *    改成画布永远按设计尺寸渲染、再缩整块板：比例是我们算的，不依赖 G6 的判断。
- * 4. **画布不接管视口。** 不注册 `drag-canvas` / `zoom-canvas`：滚轮该滚容器，
- *    而不是缩画布；平移交给滚动条。G6 在这一页只负责画和点选。
+ * 4. **画布自持视口，平移是空格 + 拖拽。** 不注册 G6 的 `drag-canvas` / `zoom-canvas`：
+ *    滚轮该滚容器而不是缩画布，缩放由两档按钮决定。0042 之前这里的平移交给滚动条，
+ *    而窄栏「适应」档下板高正好等于容器高、两个方向的可滚余量都是 0 —— 那个滚动条
+ *    从来没有滚动过。现在这一栏是一块**自持视口的画布**（`.tita-archScrollStage`：
+ *    占满面板高度、只按宽度适应、隐藏滚动条），平移由按住空格 + 鼠标拖拽承担，
+ *    G6 在这一页只负责画和点选。
  * 5. **操作是浮层，画布上没有图例。**
  *    0026 把图例、提示、状态统计和全屏按钮放在画布上方的一条 flex 行里，栏宽一窄
  *    `flex-wrap` 就把全屏按钮甩到第二行最左边 —— 用户看到的「全屏不在右上角」就是这么来的。
@@ -29,7 +33,7 @@
  */
 
 import { Graph } from '@antv/g6'
-import { useCallback, useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'
+import { useCallback, useEffect, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'
 import { Maximize2, Minimize2 } from '@tita-data-agent/ui/icons'
 import { Button, cn } from '@tita-data-agent/ui/components'
 import { NODE_META, NODE_STATUS_LABEL, nodeMetrics, type KnowledgeStats, type NodeId } from '../architecture.tsx'
@@ -43,6 +47,16 @@ import { styles } from '../styles.ts'
 // 架构视图自己的版式（图 + 浮层）跟着这个组件走，不并进插件通用 styles.css。
 import '../architecture.css'
 
+/**
+ * 空格是双用途键：输入框里它是空格，画布上是平移修饰键。
+ * 这个判据只管前者；「是不是在画布上按的」由 `pointerInside` 负责。
+ */
+function isTypingTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  const tag = target.tagName
+  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable
+}
+
 export interface AgentArchitectureGraphProps {
   stats: KnowledgeStats
   version: number
@@ -71,7 +85,22 @@ export function AgentArchitectureGraph({ stats, version, selected, onSelect, sel
   selectDomainRef.current = onSelectDomain
   const [fullscreen, setFullscreen] = useState(false)
   const [mode, setMode] = useState<ZoomMode>('fit')
-  const { scale, boardH } = useFitScale(scroller, CANVAS_WIDTH, CANVAS_HEIGHT, visible, fullscreen, mode)
+  // 侧栏里 `fit: 'width'` —— 这一栏是自持视口的画布，纵向溢出交给平移（见文件头第 4 条）。
+  // 全屏恢复 `both`：全屏的用途就是「一眼看全」，那里再让人平移是帮倒忙（而且全屏够宽，
+  // 比例通常已经是 1 或由宽度决定）。
+  const { scale, boardH } = useFitScale(
+    scroller, CANVAS_WIDTH, CANVAS_HEIGHT, visible, fullscreen, mode, fullscreen ? 'both' : 'width',
+  )
+  /**
+   * 空格 + 拖拽平移。三份状态分开存：
+   * - `panReady`：修饰键现在是否按下（决定光标、提示与是否拦截指针）；
+   * - `panFrom`：一次拖拽的起点（鼠标位置 + 当时的滚动量）；
+   * - `dragged`：刚发生过一次真的拖动 —— 用来吃掉紧随其后的 `click`。
+   */
+  const [panReady, setPanReady] = useState(false)
+  const panFrom = useRef<{ x: number; y: number; left: number; top: number } | null>(null)
+  const dragged = useRef(false)
+  const pointerInside = useRef(false)
   /** 选中态要在「建图 / 换数据 / 换选中」三条路径上都对得上，所以集中存一份。 */
   const stateRef = useRef({ selected, selectedDomain, stats, version })
   stateRef.current = { selected, selectedDomain, stats, version }
@@ -89,12 +118,14 @@ export function AgentArchitectureGraph({ stats, version, selected, onSelect, sel
       container: el,
       width: el.clientWidth || CANVAS_WIDTH,
       height: el.clientHeight || CANVAS_HEIGHT,
-      // 画布底色交给容器（`.tita-archScroll` 的 `--tita-surface`）：canvas 不认 CSS 变量，
+      // 画布底色交给容器（`.tita-archScrollStage` 的 `--tita-canvas`）：canvas 不认 CSS 变量，
       // 它会先 clearRect（清成全透明）再把 background 当 fillStyle 填 —— 传令牌字符串等于
       // 交给浏览器一个无效值，填色被忽略，默认的黑色 fillStyle 会直接盖上来。透明才是
       //「跟着主题走」在画布上的唯一正确写法，浅色下与原来的纯白一致。
       background: 'transparent',
-      // 画布不承担缩放平移：视口交给外层滚动条与缩放档，G6 只管画。
+      // 画布不承担缩放平移：缩放由外层那块板上的 `transform` 决定，
+      // 平移由组件自己接管（空格 + 拖拽改滚动容器的 `scrollLeft/scrollTop`），
+      // G6 只管画与点选。
       // 图级 `node.type` / `edge.type` **不要设**：G6 v5 用它覆盖每个元素自己声明的
       // `type`，于是装饰节点会被当成 HTML 节点画成空盒子，整张图只剩悬空的卡片
       // （0025 起就是这样，实测确认）。类型一律由元素自己声明。
@@ -159,6 +190,85 @@ export function AgentArchitectureGraph({ stats, version, selected, onSelect, sel
     void graph.draw()
   }, [selected, selectedDomain, visible])
 
+  // ---------------------------------------------------------------- 平移
+  /**
+   * 空格 = 平移修饰键，但**只在鼠标位于画布上时**才算。
+   *
+   * 两个判据缺一不可：
+   * - 输入框里按空格是打字，必须原样放行；
+   * - 鼠标不在画布上时不该拦（这个面板里到处是按钮，焦点落在哪一格都可能）——
+   *   `preventDefault` 一次，那一处的空格就失效了。
+   */
+  useEffect(() => {
+    if (!visible) return undefined
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.code !== 'Space' || event.repeat) return
+      if (!pointerInside.current || isTypingTarget(event.target)) return
+      // 拦在最前面：不拦的话浏览器拿这一下去滚页面（宿主的可滚区）。
+      event.preventDefault()
+      setPanReady(true)
+    }
+    const onKeyUp = (event: KeyboardEvent): void => {
+      if (event.code !== 'Space') return
+      setPanReady(false)
+      panFrom.current = null
+    }
+    /** 切走窗口 / 切标签页时收不到 keyup —— 不兜底的话空格会「卡住」。 */
+    const onBlur = (): void => { setPanReady(false); panFrom.current = null }
+    window.addEventListener('keydown', onKeyDown)
+    window.addEventListener('keyup', onKeyUp)
+    window.addEventListener('blur', onBlur)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      window.removeEventListener('keyup', onKeyUp)
+      window.removeEventListener('blur', onBlur)
+    }
+  }, [visible])
+
+  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>): void => {
+    const el = scroller.current
+    if (!el) return
+    // 每一次按下都先清掉「刚拖动过」这个标记。不清的话：一次拖动结束在画布外
+    // （浏览器没补 click）会把它留下，下一次无关的点击就被吃掉一次。
+    dragged.current = false
+    if (!panReady || event.button !== 0) return
+    // 拦下指针：这次拖动不该触发 G6 的命中判定，也不该选中卡片文字。
+    event.preventDefault()
+    event.stopPropagation()
+    panFrom.current = { x: event.clientX, y: event.clientY, left: el.scrollLeft, top: el.scrollTop }
+    try { el.setPointerCapture(event.pointerId) } catch { /* 指针已失效 */ }
+  }
+
+  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>): void => {
+    const el = scroller.current
+    const from = panFrom.current
+    if (!el || !from) return
+    const dx = event.clientX - from.x
+    const dy = event.clientY - from.y
+    // 4px 以内当手抖：没有这道闸，一次点选会被记成一次平移。
+    if (Math.abs(dx) > 4 || Math.abs(dy) > 4) dragged.current = true
+    el.scrollLeft = from.left - dx
+    el.scrollTop = from.top - dy
+  }
+
+  const endPan = (event: ReactPointerEvent<HTMLDivElement>): void => {
+    const el = scroller.current
+    if (!el || !panFrom.current) return
+    panFrom.current = null
+    try { el.releasePointerCapture(event.pointerId) } catch { /* 指针已失效 */ }
+  }
+
+  /**
+   * 拖动之后浏览器仍会补一个 `click`（点在哪个节点上就是哪个节点的点击）。
+   * 在**捕获阶段**吃掉它：G6 的监听挂在画布元素上，冒泡阶段再拦就已经晚了。
+   */
+  const onClickCapture = (event: ReactMouseEvent<HTMLDivElement>): void => {
+    if (!dragged.current) return
+    dragged.current = false
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
   // ---------------------------------------------------------------- 全屏
   const toggleFullscreen = useCallback((): void => {
     const el = stage.current
@@ -173,9 +283,11 @@ export function AgentArchitectureGraph({ stats, version, selected, onSelect, sel
     return () => document.removeEventListener('fullscreenchange', onChange)
   }, [])
 
-  // 画布永远是设计尺寸，缩放由这块板承担。`fit` 档下板高就是缩完的高度，
-  // 容器因此没有可滚的余量；`1:1` 档下板高是设计高度，横向（窄栏）或双向（全屏）滚动。
-  const scrollStyle = fullscreen ? undefined : { height: boardH }
+  // 画布永远是设计尺寸，缩放由板上的 transform 承担。**外面还要一层按比例定尺寸的框**：
+  // transform 不改变布局尺寸，只写 transform 的话滚动区永远是 1172×1132 ——
+  // `适应` 档下缩到 0.32 也照样能往虚空里拖出 770px。框的尺寸 = 缩完的尺寸，
+  // 于是可平移的范围**正好是图的边界**：适应档只有纵向可推，1:1 档两个方向都推得动。
+  const frameStyle = { width: CANVAS_WIDTH * scale, height: CANVAS_HEIGHT * scale }
   const boardStyle = {
     width: CANVAS_WIDTH,
     height: CANVAS_HEIGHT,
@@ -189,21 +301,38 @@ export function AgentArchitectureGraph({ stats, version, selected, onSelect, sel
           浮层正文里，左上角那块说明板只是把图挡掉一角。 */}
       <div className={styles.archOverlay}>
         <div className={styles.archOverlayActions}>
+          {/* 平移是这块画布唯一的移动方式（滚动条已隐藏），所以提示留在操作区里 ——
+              它回答的是「怎么看这张图」，与缩放档、全屏同一层。按住空格时它顺便当模式指示。 */}
+          <span className={cn(styles.archPanHint, panReady && styles.archPanHintOn)} aria-hidden="true">
+            {panReady ? '拖拽平移中' : '空格 + 拖拽平移'}
+          </span>
           {/* 缩放档：两段的分段控件。两段都在，是因为一个来回翻转的按钮说不清「现在是哪一档」。 */}
           <div className={styles.archZoom} role="group" aria-label="缩放">
             <button type="button" className={cn(styles.archZoomOption, mode === 'fit' && styles.archZoomOn)}
-              aria-pressed={mode === 'fit'} onClick={() => setMode('fit')} title="整图缩到栏宽，一眼看全三条链路">适应</button>
+              aria-pressed={mode === 'fit'} onClick={() => setMode('fit')} title="按栏宽适应：宽度铺满，纵向溢出靠空格拖拽平移">适应</button>
             <button type="button" className={cn(styles.archZoomOption, mode === 'actual' && styles.archZoomOn)}
-              aria-pressed={mode === 'actual'} onClick={() => setMode('actual')} title="按设计尺寸 1:1 显示，横向滚动查看">1:1</button>
+              aria-pressed={mode === 'actual'} onClick={() => setMode('actual')} title="按设计尺寸 1:1 显示，两个方向都可以平移查看">1:1</button>
           </div>
           <Button variant="outline" size="sm" onClick={toggleFullscreen} aria-pressed={fullscreen}>
             {fullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}{fullscreen ? '退出全屏' : '全屏'}
           </Button>
         </div>
       </div>
-      <div className={styles.archScroll} style={scrollStyle} ref={scroller}>
-        <div className={styles.archBoard} style={boardStyle}>
-          <div className={styles.archCanvas} ref={host} />
+      <div
+        className={cn(styles.archScroll, styles.archScrollStage, panReady && styles.archPanOn)}
+        ref={scroller}
+        onPointerEnter={() => { pointerInside.current = true }}
+        onPointerLeave={() => { pointerInside.current = false; setPanReady(false); panFrom.current = null }}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={endPan}
+        onPointerCancel={endPan}
+        onClickCapture={onClickCapture}
+      >
+        <div className={styles.archFrame} style={frameStyle}>
+          <div className={styles.archBoard} style={boardStyle}>
+            <div className={styles.archCanvas} ref={host} />
+          </div>
         </div>
       </div>
       {/* 详情浮层：画布内，不缩放，可关闭。关掉之后画布恢复成完整的一张图。 */}

package/src/client/arch/NodeLogicPanel.tsx

@@ -21,7 +21,7 @@ import {
 import { Badge, Button, cn } from '@tita-data-agent/ui/components'
 import {
   NODE_META, NODE_STATUS_LABEL, jumpTargetOf, laneOf, nodeMetrics,
-  type KnowledgeStats, type KnowledgeTab, type NodeId, type NodeStatus, type PanelTab,
+  type KnowledgeStats, type KnowledgeTab, type NodeId, type NodeStatus, type PanelTab, type WorkspaceTabKind,
 } from '../architecture.tsx'
 import { LANE_PALETTE, recordRows } from './model.ts'
 import { styles } from '../styles.ts'
@@ -38,7 +38,8 @@ export interface NodeLogicPanelProps {
   version: number
   /** 跳到节点所属的功能 tab；`knowledgeTab` 存在时还要落到知识库里那一栏。 */
   onJump: (tab: PanelTab, knowledgeTab?: KnowledgeTab) => void
-  onOpenTab?: (kind: 'data-sheet' | 'data-notebook') => void
+  /** 打开一个工作区页面（Table / Notebook / 画布）。 */
+  onOpenTab?: (kind: WorkspaceTabKind) => void
   onClose: () => void
 }
 
@@ -123,9 +124,11 @@ export function NodeLogicPanel({ selected, stats, version, onJump, onOpenTab, on
             去配置<ArrowRight size={14} />
           </Button>
           : <p className={styles.archPanelHint}><CircleHelp size={13} />这个节点没有可配置页：{meta.status === 'host' ? '它由宿主提供' : meta.status === 'planned' ? '它还没实现，先在这里说明设计意图' : '它的行为由代码决定，没有可调参数'}。</p>}
-        {(selected === 'answer' || selected === 'data-sheet' || selected === 'data-notebook') && onOpenTab && <div className={styles.archPanelActions}>
+        {(selected === 'answer' || selected === 'data-sheet' || selected === 'data-notebook' || selected === 'data-canvas') && onOpenTab && <div className={styles.archPanelActions}>
           <Button variant="outline" size="sm" onClick={() => onOpenTab('data-sheet')}><ChevronRight size={13} />打开 Table</Button>
           <Button variant="outline" size="sm" onClick={() => onOpenTab('data-notebook')}><ChevronRight size={13} />打开 Notebook</Button>
+          {/* 画布与 Table / Notebook 并列：三者都是这一格的输出产物，之前少列了一个。 */}
+          <Button variant="outline" size="sm" onClick={() => onOpenTab('data-excalidraw')}><ChevronRight size={13} />打开画布</Button>
         </div>}
       </PanelSection>
     </div>

package/src/client/arch/model.ts

@@ -21,7 +21,7 @@
  */
 
 import {
-  NODE_LANES, NODE_META, NODE_STATUS_LABEL, NODE_STATUS_SHORT, NODE_STATUS_TONE, memoryCountOf, nodeMetrics, sourceCountOf,
+  NODE_LANES, NODE_META, NODE_STATUS_LABEL, NODE_STATUS_SHORT, memoryCountOf, nodeMetrics, sourceCountOf,
   type KnowledgeStats, type LaneId, type LaneMeta, type NodeId, type NodeMetric, type NodeStatus,
 } from '../architecture.tsx'
 import { PROBLEM_BASE_NOTE, PROBLEM_DOMAINS, type ProblemDomain } from '../problem-domains.ts'
@@ -40,12 +40,54 @@ export const GUTTER = 116
 export const NODE_W = 180
 /** 卡片高度要装下四层：标题行、两行说明、统计行。 */
 export const NODE_H = 96
-/** 堆叠节点（Table/Notebook、情节/操作记忆）用略矮的规格。 */
+/** 竖排两到三张时用的规格。两张那一列装得下计数行，三张那一列装不下。 */
 export const NODE_H_STACKED = 80
+/**
+ * 一列竖排**三张**时的卡片高度（2026-09-26 加画布带来的第三张）。
+ *
+ * 它比两排矮一档，不是审美选择，是算术：三张要挤进同一条带，而带高是全图共享的。
+ * 内容也正好只差一行 —— 这一列的 Table / Notebook / 画布都没有计数行，两行文字
+ * （标题 + 说明）加 8px 上下内边距正好 52px；而情节 / 操作记忆两张带计数行，需要 73px，
+ * 所以它们仍用 80。写死一个高度给两种内容，不是裁掉计数就是白留一条空带。
+ */
+export const NODE_H_STACKED_TRIO = 52
 export const COL_GAP = 32
-/** 堆叠两个节点时，各自中心相对带中心线的偏移。80 + 2×47 = 174 = 内容区高度，
- * 且 80 ≤ 2×47 —— 这是两张卡不重叠的条件，不是审美偏好。 */
-export const STACK_OFFSET = 47
+/**
+ * 竖排卡片之间的间隙。**它与卡片高度一起决定列间距**，所以只写一处：
+ * 两张那一列 = 2×80 + 14 = 174，三张那一列 = 3×52 + 2×14 = 184。
+ */
+export const STACK_GAP = 14
+/**
+ * **先写「哪一列竖排几张」，再算带高。**
+ *
+ * 带高由最高的一列决定（`CONTENT_H`），而带高又决定画布高度 —— 都是模块初始化的常量，
+ * 所以这张表必须在它们之前出现。它与 `ARCH_SLOTS` 里的 `stack` 序号是同一件事的两面，
+ * 测试会断言两者一致（一处写三张、另一处只放两张是最容易犯的错，而且肉眼看不出来）。
+ */
+export const STACK_COLUMNS: ReadonlyArray<{ lane: number; col: number; count: number }> = [
+  { lane: 0, col: 4, count: 3 },
+  { lane: 2, col: 3, count: 2 },
+]
+
+/** 一列竖排 `count` 张时的卡片高度。 */
+export function stackHeight(count: number): number {
+  return count >= 3 ? NODE_H_STACKED_TRIO : NODE_H_STACKED
+}
+
+/**
+ * 一列竖排 `count` 张时需要的内容区高度 = `count × 卡高 + (count-1) × 间隙`。
+ *
+ * 卡片在列内**等距**排：第 i 张的中心偏移 = (i - (count-1)/2) × (卡高 + 间隙)。
+ * 所以最外两张的外沿正好落在 ±CONTENT_H/2 上，不多不少。
+ */
+export function columnHeight(count: number): number {
+  return count <= 0 ? 0 : count * stackHeight(count) + (count - 1) * STACK_GAP
+}
+
+/** 一列竖排 `count` 张时，第 `index` 张相对带中心线的偏移。 */
+export function stackOffset(count: number, index: number): number {
+  return (index - (count - 1) / 2) * (stackHeight(count) + STACK_GAP)
+}
 /** 带名条的高度：一枚字母徽标 + 链路名。 */
 export const LANE_HEAD_H = 30
 /**
@@ -62,8 +104,8 @@ export const LANE_HEAD_W = 224
  */
 export const BAND_GAP = 24
 export const LANE_PAD = 12
-/** 带的内容区高度：按最高的那种排布（两个堆叠节点）定，单节点在其中居中。 */
-export const CONTENT_H = NODE_H_STACKED + 2 * STACK_OFFSET
+/** 带的内容区高度：**由最高的那一列决定**（三张 52 的那列 = 184），单节点在其中居中。 */
+export const CONTENT_H = Math.max(...STACK_COLUMNS.map(column => columnHeight(column.count)))
 /** 带高 = 带名条 + 上下内边距 + 内容区。三条带等高，网格才对得齐。 */
 export const BAND_H = LANE_HEAD_H + LANE_PAD + CONTENT_H + LANE_PAD
 /** 两条带的上沿间距 = 带高 + 通道。 */
@@ -140,15 +182,16 @@ export interface ArchBox { x: number; y: number; width: number; height: number }
  * 出来，经过记忆与质量门，最后回到最左边的「资金化」—— 反向流不是排版花招，
  * 它就是闭环的方向，也是 A→C 那条连线能画得短的原因。
  */
-interface Slot { lane: number; col: number; stack?: 'upper' | 'lower' }
+interface Slot { lane: number; col: number; /** 在竖排里的序号（0 起）。见 `STACK_COLUMNS`。 */ stack?: number }
 
 export const ARCH_SLOTS: Record<NodeId, Slot> = {
   conversation: { lane: 0, col: 0 },
   intent: { lane: 0, col: 1 },
   runtime: { lane: 0, col: 2 },
   answer: { lane: 0, col: 3 },
-  'data-sheet': { lane: 0, col: 4, stack: 'upper' },
-  'data-notebook': { lane: 0, col: 4, stack: 'lower' },
+  'data-sheet': { lane: 0, col: 4, stack: 0 },
+  'data-notebook': { lane: 0, col: 4, stack: 1 },
+  'data-canvas': { lane: 0, col: 4, stack: 2 },
 
   'source-raw': { lane: 1, col: 0 },
   compile: { lane: 1, col: 1 },
@@ -159,8 +202,8 @@ export const ARCH_SLOTS: Record<NodeId, Slot> = {
   'funded-value': { lane: 2, col: 0 },
   'daily-update': { lane: 2, col: 1 },
   'memory-quality': { lane: 2, col: 2 },
-  'episodic-memory': { lane: 2, col: 3, stack: 'upper' },
-  'procedural-memory': { lane: 2, col: 3, stack: 'lower' },
+  'episodic-memory': { lane: 2, col: 3, stack: 0 },
+  'procedural-memory': { lane: 2, col: 3, stack: 1 },
   interaction: { lane: 2, col: 4 },
 }
 
@@ -182,14 +225,14 @@ export function isDecoration(id: string): boolean {
 
 export function boxOf(id: NodeId): ArchBox {
   const slot = ARCH_SLOTS[id]
-  const height = slot.stack ? NODE_H_STACKED : NODE_H
+  const column = STACK_COLUMNS.find(item => item.lane === slot.lane && item.col === slot.col)
+  const height = column ? stackHeight(column.count) : NODE_H
   const center = laneCenter(slot.lane)
-  const y = slot.stack
-    ? center + (slot.stack === 'upper' ? -STACK_OFFSET : STACK_OFFSET)
-    : center
+  const y = column ? center + stackOffset(column.count, slot.stack ?? 0) : center
   return { x: columnX(slot.col), y, width: NODE_W, height }
 }
 
+
 // ----------------------------------------------------------------- 连边
 
 /**
@@ -222,6 +265,8 @@ export const ARCH_EDGES: ArchEdge[] = [
   { id: 'a3', source: 'runtime', target: 'answer', kind: 'flow' },
   { id: 'a4', source: 'answer', target: 'data-sheet', kind: 'branch' },
   { id: 'a5', source: 'answer', target: 'data-notebook', kind: 'branch' },
+  // 画布与 Table / Notebook 是同一格的三种输出产物，所以也是同一种边。
+  { id: 'a6', source: 'answer', target: 'data-canvas', kind: 'branch' },
 
   // B · 知识编译与召回链路（写入侧 → 读取侧）
   { id: 'b1', source: 'source-raw', target: 'compile', kind: 'flow' },
@@ -246,6 +291,77 @@ export const ARCH_EDGES: ArchEdge[] = [
   { id: 'x4', source: 'context', target: 'runtime', kind: 'inject', label: 'Context Pack 注入' },
 ]
 
+/**
+ * 「同一个发点出去的两条以上」或「汇进同一个落点的两条以上」的边 —— 它们**走一条总线**。
+ *
+ * ## 为什么不能各走各的（2026-09-26 GUI 反馈）
+ *
+ * 原来 `branch` 用 `router: { type: 'orth' }`。路由器是**每条边各算各的**：它把每条线
+ * 连到「离自己最近的那两个边界点」，于是回答那一格的右边被三条线在三个高度上分别咬开 ——
+ * 一张卡片伸出三根箭头，各自还带一个小台阶。用户的原话是「箭头改成从一个地方出，
+ * 这样样式不好看」。
+ *
+ * ## 判据是**边的邻居**，不是边的种类
+ *
+ * 一个节点只要有两条及以上的同带相邻列连线，那几条就共用一段总线。所以 2026-09-26 把
+ * 画布加成第三张输出产物时，这条规则**没有改一个字** —— 它自己就把新边算了进去。
+ * 反过来若按「`branch` 就走总线」写，多对一的那种（情节 / 操作记忆 → 记忆质量检查，
+ * 那是两条 `flow`）就漏了，而它们看着是同一毛病。
+ *
+ * 跨链路的四条长线不在这里：它们不同带，本来就有自己的正交路由与避障。
+ */
+const BUS_EDGE_IDS: ReadonlySet<string> = (() => {
+  const local = ARCH_EDGES.filter(edge => {
+    const from = ARCH_SLOTS[edge.source]
+    const to = ARCH_SLOTS[edge.target]
+    return from !== undefined && to !== undefined && from.lane === to.lane && Math.abs(from.col - to.col) === 1
+  })
+  const out = new Map<string, number>()
+  const into = new Map<string, number>()
+  for (const edge of local) {
+    out.set(edge.source, (out.get(edge.source) ?? 0) + 1)
+    into.set(edge.target, (into.get(edge.target) ?? 0) + 1)
+  }
+  return new Set(local
+    .filter(edge => (out.get(edge.source) ?? 0) > 1 || (into.get(edge.target) ?? 0) > 1)
+    .map(edge => edge.id))
+})()
+
+/** 这条边是否参与总线（测试与 `toGraphData` 读它，两处不可能各算一遍）。 */
+export function isBusEdge(edgeId: string): boolean {
+  return BUS_EDGE_IDS.has(edgeId)
+}
+
+/**
+ * 一条总线上的**拐点**。给 G6 的 `controlPoints`，它就按我们算的点画，不再自己找出口。
+ *
+ * 从发点出来先汇到一个 x（两条列之间的中线），再竖直走到目标那一行，最后横向进盒子：
+ *
+ * ```
+ *  回答 ──┐                      拐点 1 把三条边锁在同一个 y（发点的中心），
+ *         ├──▶ Table             所以三根箭头从**同一个点**出来；
+ *         ├──▶ Notebook          拐点 2 各自落在目标那一行。
+ *         └──▶ 画布
+ * ```
+ *
+ * 一对多是「汇出去再分开」，多对一是「各自汇过来再进同一个点」—— 同一组拐点同时满足
+ * 两种读法：前者共用第一段，后者共用最后一段。
+ *
+ * 返回 `null` 表示不必给拐点：不在总线上，或者发点与落点本来就同高（那时一条直线就是
+ * 总线，它的出口与总线的出口是同一个点）。
+ */
+export function busControlPoints(edge: ArchEdge): Array<[number, number]> | null {
+  if (!BUS_EDGE_IDS.has(edge.id)) return null
+  const from = boxOf(edge.source)
+  const to = boxOf(edge.target)
+  if (Math.abs(from.y - to.y) < 0.5) return null
+  const goingRight = to.x > from.x
+  const startX = from.x + (goingRight ? NODE_W / 2 : -NODE_W / 2)
+  const endX = to.x + (goingRight ? -NODE_W / 2 : NODE_W / 2)
+  const trunkX = (startX + endX) / 2
+  return [[trunkX, from.y], [trunkX, to.y]]
+}
+
 /**
  * 边的外观。灰 / 蓝两档，没有第三档色相。
  *
@@ -316,21 +432,39 @@ function escapeHtml(value: string): string {
 /**
  * 一张节点卡片的 DOM 字符串。
  *
- * 用 G6 的 HTML 节点（而不是 canvas 文本）是因为这张卡片要写**四层信息**：
- * 标题、一句话说明、数据统计、实现状态。canvas 文本只有一种字号与字重，
- * 四层挤成一样大就等于没有层次。
+ * 用 G6 的 HTML 节点（而不是 canvas 文本）是因为这张卡片要写**三层信息**：
+ * 标题、一句话说明、数据统计。canvas 文本只有一种字号与字重，三层挤成一样大
+ * 就等于没有层次。
  *
  * 关键样式全部内联：卡片是画布里的 DOM，不保证和插件样式表同时到位，
  * 靠类名会得到一张没有边框的白块。类名只用于选中态这类可选增强。
  *
- * 视觉上是「白卡 + 1px 发丝边 + 6px 圆角 + 几乎看不见的投影」。状态不是一块色底，
- * 而是一枚小圆点加状态文字 —— 四张卡并排时，色底会比标题还响。
+ * 视觉上是「白卡 + 1px 发丝边 + 6px 圆角 + 几乎看不见的投影」。
+ *
+ * ## 状态字（宿主 / 待实现 / 已实现）从卡片上撤掉了（2026-09-26）
+ *
+ * 它原来在每一张卡的右上角：一枚小圆点 + 一个词。撤掉的理由不是「不好看」，
+ * 是**它同时出现十六次，于是十几张卡片的标题全被它挤窄**（`shortTitle` 就是为它
+ * 让位而存在的），而它说的是同一件事的四个值。
+ *
+ * 实现状态没有丢，只是换了三个更合适的地方：
+ * - 每条链路的名条上写着**逐带计数**（`A 已实现 1 · 宿主 5 · …`）——「整条链路做完了没」
+ *   本来就比「这一格做完了没」更接近用户要问的。
+ * - 点开任意节点，浮层标题旁就是同一档状态（`Badge` + `statusNote` 依据）。
+ * - 卡片自身的 `title` 悬停仍然给出完整状态依据，无障碍列表也照旧逐节点列出。
  */
 export function cardHtml(id: NodeId, metrics: NodeMetric[], selected = false): string {
   const meta = NODE_META[id]
   const lane = LANE_PALETTE[meta.lane]
-  const status = NODE_STATUS_TONE[meta.status]
-  const compact = Boolean(ARCH_SLOTS[id].stack)
+  const slot = ARCH_SLOTS[id]
+  const column = STACK_COLUMNS.find(item => item.lane === slot.lane && item.col === slot.col)
+  const compact = column !== undefined
+  /**
+   * 竖排卡片的内边距**收到 8px**：三张那一列的高度是 52（见 `NODE_H_STACKED_TRIO`），
+   * 而「标题 16 + 间隙 5 + 说明 15」已经占掉 36 —— 上下各 8 正好 52，各 10 就溢出 4px。
+   * 这一列没有计数行，所以省下的就是这一圈的空气。
+   */
+  const padY = compact ? 8 : 10
   /**
    * 卡片上最多两个计数，而且是**一行纯文字**，不是会自动换行的 chip 组。
    *
@@ -342,11 +476,10 @@ export function cardHtml(id: NodeId, metrics: NodeMetric[], selected = false): s
   const chips = metrics.slice(0, 2).map(metric =>
     `<span style="display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap;font-size:10px;line-height:16px;color:${INK_FAINT}">${escapeHtml(metric.label)}<b style="color:${INK};font-weight:600;font-variant-numeric:tabular-nums">${escapeHtml(metric.value)}</b></span>`).join('')
   // 悬停给出完整名字与状态依据：卡片上的名字可能被省略号截短，但信息不能丢。
-  return `<div class="tita-archCard${selected ? ' tita-archCardOn' : ''}" title="${escapeHtml(`${meta.title} —— ${meta.statusNote}`)}" style="box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;gap:5px;padding:10px 11px;border-radius:6px;background:${SURFACE};border:1px solid ${selected ? lane.accent : RULE};box-shadow:${selected ? `0 0 0 3px ${lane.soft}` : '0 1px 2px rgba(16,24,40,.04)'};font-family:${FONT};overflow:hidden">
+  return `<div class="tita-archCard${selected ? ' tita-archCardOn' : ''}" title="${escapeHtml(`${meta.title} —— ${meta.statusNote}`)}" style="box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;gap:5px;padding:${padY}px 11px;border-radius:6px;background:${SURFACE};border:1px solid ${selected ? lane.accent : RULE};box-shadow:${selected ? `0 0 0 3px ${lane.soft}` : '0 1px 2px rgba(16,24,40,.04)'};font-family:${FONT};overflow:hidden">
   <div style="display:flex;align-items:center;gap:6px">
     <span style="width:6px;height:6px;border-radius:999px;background:${lane.accent};flex:0 0 auto"></span>
     <strong style="font-size:12.5px;font-weight:600;color:${INK};line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${escapeHtml(meta.shortTitle ?? meta.title)}</strong>
-    <span style="margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:${status.text}"><i style="width:5px;height:5px;border-radius:999px;background:${status.dot}"></i>${escapeHtml(NODE_STATUS_SHORT[meta.status])}</span>
   </div>
   <div style="font-size:11px;line-height:1.4;color:${INK_MUTED};display:-webkit-box;-webkit-line-clamp:${compact ? 1 : 2};-webkit-box-orient:vertical;overflow:hidden">${escapeHtml(meta.subtitle)}</div>
   ${chips ? `<div style="margin-top:auto;display:flex;align-items:baseline;gap:10px;overflow:hidden">${chips}</div>` : ''}
@@ -526,7 +659,7 @@ function decorations(): ArchNodeDatum[] {
 
 /** 带上按阅读顺序排好的节点（自进化带是反向的，由 ARCH_SLOTS 的列号决定）。 */
 export function nodesOfLane(lane: number): NodeId[] {
-  const rank = (slot: Slot): number => slot.stack === 'upper' ? -1 : slot.stack === 'lower' ? 1 : 0
+  const rank = (slot: Slot): number => slot.stack ?? 0
   return (Object.keys(ARCH_SLOTS) as NodeId[])
     .filter(id => ARCH_SLOTS[id].lane === lane)
     .sort((left, right) => ARCH_SLOTS[left].col - ARCH_SLOTS[right].col || rank(ARCH_SLOTS[left]) - rank(ARCH_SLOTS[right]))
@@ -582,6 +715,11 @@ export function toGraphData(stats: KnowledgeStats, version: number, selected: No
       // 正交 + 自动避障：这几条是长线，斜着连会横穿中间的卡片。
       style.radius = 10
       style.router = { type: 'shortest-path', enableObstacleAvoidance: true, offset: 14, gridSize: 8 }
+    } else if (busControlPoints(edge) !== null) {
+      // 总线上的边：拐点是我们算的，**不要路由器** —— 路由器每条边各找一个出口，
+      // 那正是「三根箭头从三个高度出来、各自还带一个小台阶」的原因。
+      style.radius = 8
+      style.controlPoints = busControlPoints(edge)
     } else if (edge.kind === 'branch') {
       style.radius = 8
       style.router = { type: 'orth', padding: 14 }

package/src/client/architecture.css

@@ -16,20 +16,23 @@
 
 /* ---------------------------------------------------------------- 版式 */
 
-/* **一个表面。** 画布拥有边框、圆角、投影；详情浮层浮在它里面，
-   不另起一列、不另起一张卡。 */
+/* **一块画布，不是一个盒子。**
+   0042 之前这里有一圈边框 + 10px 圆角 + 自己的底色，读起来是「卡片里的一张图」；
+   而同一屏上它又不接管视口（平移交给滚动条）。两种语汇缝在一起，两头都不像。
+   现在这一栏是**舞台**：没有边框与圆角，底色与面板一致（边界连色差都不留），
+   高度由面板给（`flex: 1 1 auto`），画布自己当视口 —— 见 `.tita-archScrollStage`。
+   底色仍显式给一个：全屏时这一块要自己不透明，否则背后是浏览器的黑底。 */
 .tita-archStage {
   position: relative;
   display: flex;
   min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
   flex-direction: column;
-  border: 1px solid var(--tita-line);
-  border-radius: 10px;
-  background: var(--tita-surface);
+  background: var(--tita-canvas);
   overflow: hidden;
 }
 
-.tita-archStage:fullscreen { border: 0; border-radius: 0; }
 .tita-archStage:fullscreen .tita-archPane { flex: 1 1 auto; min-height: 0; }
 
 /* 画布那一列。**浮层的定位上下文是它**，不是整块表面 —— 否则右上角那排操作
@@ -65,10 +68,27 @@
 
 /* 画布容器：**画布永远是设计尺寸，缩放由板上的 transform 承担**。
    这张画布设计宽 1172px、高 1132px（三条链路 + 一条问题域带），宿主右侧栏只有
-   380–840px。所以外层不去「适配」画布，而是按缩放比把整块板缩下来：`fit` 档下板宽
-   正好等于栏宽（没有可滚的余量），`1:1` 档下板保持设计尺寸、由滚动条承载。
+   380–840px。所以外层不去「适配」画布，而是按缩放比把整块板缩下来。
    缩放比由组件按设计常量算出（`CANVAS_WIDTH/HEIGHT`），不写进 CSS，避免两处各写一份。 */
-.tita-archScroll { width: 100%; min-width: 0; overflow: auto; background: var(--tita-surface); }
+.tita-archScroll { width: 100%; min-width: 0; overflow: auto; background: var(--tita-canvas); }
+/* 舞台模式：画布自己当视口。高度交给面板，滚动条**隐藏** —— 平移由空格 + 拖拽承担，
+   留着一条滚动条等于承认这个手势不够用（0042）。`overflow: auto` 必须保留：
+   拖拽改的是 `scrollLeft / scrollTop`，这个元素得先是滚动容器。 */
+.tita-archScrollStage { flex: 1 1 auto; min-height: 0; scrollbar-width: none; }
+.tita-archScrollStage::-webkit-scrollbar { display: none; }
+/* 空格按下：光标变抓手 + 禁止选中，否则一次平移会顺手把卡片上的字选起来。 */
+.tita-archPanOn { cursor: grab; user-select: none; }
+.tita-archPanOn:active { cursor: grabbing; }
+/* **按比例定尺寸的框。** `transform` 不改布局尺寸，只写 transform 的话滚动区永远是
+   1172×1132 —— 「适应」档缩到 0.32 也照样能往虚空里拖出 770px。框的尺寸等于缩完的
+   尺寸，于是可平移的范围正好是图的边界：适应档只有纵向，1:1 档两个方向。 */
+.tita-archFrame { position: relative; flex: 0 0 auto; overflow: hidden; }
+/* 平移提示：与缩放档同层，次要文字；按住空格时换成模式指示。
+   用 `--tita-ink-muted` 而不是 faint：这是一句**操作说明**，得读得清
+   （PRODUCT.md 已记着 faint 一档的对比度不够）。
+   `pointer-events: none` —— 它是说明，不该在拖拽起点上抢走一次 pointerdown。 */
+.tita-archPanHint { color: var(--tita-ink-muted); font-size: 10.5px; white-space: nowrap; pointer-events: none; }
+.tita-archPanHintOn { color: var(--tita-primary); font-weight: 650; }
 .tita-archStage:fullscreen .tita-archScroll {
   flex: 1 1 auto;
   min-height: 0;