Expand the hierarchical docs tree and aggregate sections for tracing

Why: rdm.inspect.tree docs is two-level (parent=<docId> returns sections), but the U4 workspace only fetched level one - the tree showed bare documents, clicking a doc hit unsupported inspect.object kind, and the trace tab always showed no sections.

Evidence: tsc + design-guard green; scripts/e2e.sh full run in this task.

Impact: tree browsing expands documents into sections; trace entry lists sections aggregated per document.

Refs: U4/U3 read-service contract; task feature/rdm-e2e-acceptance.

e2e/rdm-audit.playwright.ts

@@ -66,10 +66,11 @@ test.describe.serial('U4 项目追溯审计工作区', () => {
   test('三次主要点击内完成取证：章节来源依据与最近修改原因', async ({ page }) => {
     await login(page)
     await openAudit(page)
-    // 路径①：资料与文档（点击1）→ 选章节（点击2）→ 对象详情含最近事件（修改原因）。
-    // 树首个节点是文档级（无事件史），取证对象选 section。
+    // 路径①：资料与文档 → 展开文档（点击1）→ 选章节（点击2）→ 详情含最近事件（修改原因）。
+    // docs 树是层级结构：第一层是文档，章节在展开后的第二层。
     await page.getByRole('tab', { name: '资料与文档' }).click()
-    const sectionNode = page.locator('.rdm-audit-tree-node')
+    await page.locator('.rdm-audit-tree-node').first().click()
+    const sectionNode = page.locator('.rdm-audit-tree-children .rdm-audit-tree-node')
       .filter({ has: page.locator('.rdm-audit-tree-kind', { hasText: 'section' }) }).first()
     await expect(sectionNode).toBeVisible()
     await sectionNode.click()

src/components/RdmAuditWorkspace.tsx

@@ -144,11 +144,14 @@ function TreeList({ pid, kind }: { pid: string; kind: 'notes' | 'docs' }) {
   const [err, setErr] = useState('')
   const [selected, setSelected] = useState<TreeItem | null>(null)
   const [detail, setDetail] = useState<ObjectDetail | null>(null)
+  // docs 树是层级结构（rdm.inspect.tree parent=<docId> 才返回章节）：文档节点
+  // 点击展开子章节，不直接查对象详情（doc 不在 inspect.object 支持面）。
+  const [children, setChildren] = useState<Record<string, TreeItem[]>>({})
   const genRef = useRef(0)
 
   useEffect(() => {
     const gen = ++genRef.current
-    setShell(null); setErr(''); setSelected(null); setDetail(null)
+    setShell(null); setErr(''); setSelected(null); setDetail(null); setChildren({})
     api.rdmCommand<ListShell<TreeItem>>('rdm.inspect.tree', { projectId: pid, kind, cursor: '' })
       .then(s => { if (gen === genRef.current) setShell(s) })
       .catch(e => { if (gen === genRef.current) setErr(e.message) })
@@ -162,7 +165,19 @@ function TreeList({ pid, kind }: { pid: string; kind: 'notes' | 'docs' }) {
       .catch(e => { if (gen === genRef.current) setErr(e.message) })
   }
 
+  const toggleDoc = (item: TreeItem) => {
+    if (children[item.id]) {
+      setChildren(prev => { const next = { ...prev }; delete next[item.id]; return next })
+      return
+    }
+    const gen = genRef.current
+    api.rdmCommand<ListShell<TreeItem>>('rdm.inspect.tree', { projectId: pid, kind: 'docs', parent: item.id, cursor: '' })
+      .then(s => { if (gen === genRef.current) setChildren(prev => ({ ...prev, [item.id]: s.items })) })
+      .catch(e => { if (gen === genRef.current) setErr(e.message) })
+  }
+
   const selectNode = (item: TreeItem) => {
+    if (item.kind === 'doc') { toggleDoc(item); return }
     setSelected(item); setDetail(null)
     const gen = genRef.current
     api.rdmCommand<ObjectDetail>('rdm.inspect.object', { projectId: pid, kind: item.kind, id: item.id })
@@ -178,12 +193,28 @@ function TreeList({ pid, kind }: { pid: string; kind: 'notes' | 'docs' }) {
     <div className="rdm-audit-tree">
       <div className="rdm-audit-tree-list">
         {shell.items.map(item => (
-          <button key={item.id} className={`rdm-audit-tree-node${selected?.id === item.id ? ' sel' : ''}`}
-            onClick={() => selectNode(item)}>
-            <span className="rdm-audit-tree-kind">{item.kind}</span>
-            <span className="rdm-audit-tree-title">{item.title}</span>
-            {item.state && <Chip tone={item.state === 'baselined' ? 'ok' : 'plain'}>{item.state}</Chip>}
-          </button>
+          <div key={item.id}>
+            <button className={`rdm-audit-tree-node${selected?.id === item.id ? ' sel' : ''}`}
+              onClick={() => selectNode(item)}>
+              {item.kind === 'doc' && <span className="rdm-audit-tree-caret">{children[item.id] ? '▾' : '▸'}</span>}
+              <span className="rdm-audit-tree-kind">{item.kind}</span>
+              <span className="rdm-audit-tree-title">{item.title}</span>
+              {item.state && <Chip tone={item.state === 'baselined' ? 'ok' : 'plain'}>{item.state}</Chip>}
+            </button>
+            {item.kind === 'doc' && children[item.id] && (
+              <div className="rdm-audit-tree-children">
+                {children[item.id].length === 0 && <div className="empty-note">无章节</div>}
+                {children[item.id].map(sub => (
+                  <button key={sub.id} className={`rdm-audit-tree-node${selected?.id === sub.id ? ' sel' : ''}`}
+                    onClick={() => selectNode(sub)}>
+                    <span className="rdm-audit-tree-kind">{sub.kind}</span>
+                    <span className="rdm-audit-tree-title">{sub.title}</span>
+                    {sub.state && <Chip tone={sub.state === 'baselined' ? 'ok' : 'plain'}>{sub.state}</Chip>}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
         ))}
         {shell.hasMore && <button className="btn v-ghost rdm-audit-more" onClick={loadMore}>加载更多</button>}
         {shell.truncated && <div className="rdm-audit-truncated">已截断（深度或数量上限）</div>}
@@ -216,14 +247,21 @@ function TraceTab({ pid }: { pid: string }) {
       .catch(e => { if (gen === genRef.current) setErr(e.message) })
   }, [pid, sel])
 
-  // 未选对象时列出章节供选择
+  // 未选对象时列出章节供选择。docs 树是层级结构：章节挂在各文档下
+  // （parent=<docId>），按文档聚合后合并展示。
   const [sections, setSections] = useState<TreeItem[]>([])
   useEffect(() => {
     if (sel) return
     let c = false
-    api.rdmCommand<ListShell<TreeItem>>('rdm.inspect.tree', { projectId: pid, kind: 'docs' })
-      .then(s => { if (!c) setSections(s.items.filter(i => i.kind === 'section')) })
-      .catch(() => {})
+    ;(async () => {
+      const top = await api.rdmCommand<ListShell<TreeItem>>('rdm.inspect.tree', { projectId: pid, kind: 'docs' })
+      const secs: TreeItem[] = []
+      for (const d of top.items.filter(i => i.kind === 'doc')) {
+        const sub = await api.rdmCommand<ListShell<TreeItem>>('rdm.inspect.tree', { projectId: pid, kind: 'docs', parent: d.id })
+        secs.push(...sub.items.filter(i => i.kind === 'section'))
+      }
+      if (!c) setSections(secs)
+    })().catch(() => {})
     return () => { c = true }
   }, [pid, sel])
 

src/styles.css

@@ -596,6 +596,8 @@ button { font-family: inherit; font-size: inherit; color: inherit; }
 .rdm-audit-tree-node { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font-size: var(--fs-ui-sm); color: var(--text-dim); }
 .rdm-audit-tree-node:hover { background: var(--bg-hover); color: var(--text); }
 .rdm-audit-tree-node.sel { background: var(--bg-active); color: var(--text); }
+.rdm-audit-tree-caret { width: 14px; flex: none; color: var(--text-dim); font-size: var(--fs-ui-sm); }
+.rdm-audit-tree-children { padding-left: 18px; display: flex; flex-direction: column; gap: 0; }
 .rdm-audit-tree-kind { font-size: var(--fs-ui-xs); color: var(--text-faint); min-width: 3.2em; }
 .rdm-audit-tree-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .rdm-audit-more { margin-top: 8px; }