@lemoncat7/dsh-knowledge 0.6.0 → 0.7.0

package/web/app.js

@@ -11,6 +11,16 @@ const TYPE_DOCUMENTS = {
   preference: 'preferences.md', fact: 'facts.md', decision: 'decisions.md', procedure: 'procedures.md', lesson: 'lessons.md',
 }
 const DOCUMENT_LAYOUT_KEY = 'dsh-knowledge.document-layout'
+const DOCUMENT_COLUMN_LAYOUTS = Object.freeze({
+  library: {
+    widthKey: 'libraryWidth', hiddenKey: 'libraryHidden', cssVariable: '--library-width',
+    minimum: 170, maximum: 360, controls: 'knowledge-library-column',
+  },
+  documentList: {
+    widthKey: 'documentListWidth', hiddenKey: 'documentListHidden', cssVariable: '--document-list-width',
+    minimum: 210, maximum: 480, controls: 'document-list-column',
+  },
+})
 const pageParams = new URLSearchParams(location.search)
 const mountContext = {
   sessionId: pageParams.get('sessionId')?.trim() || '',
@@ -27,6 +37,8 @@ const state = {
   stats: null,
   overview: null,
   knowledgeBases: [],
+  knowledgeBaseView: 'libraries',
+  knowledgeBaseQuery: '',
   mounts: [],
   resolvedMounts: [],
   mountContext,
@@ -53,10 +65,13 @@ const state = {
   candidateStatus: 'pending',
   tokens: [],
   service: { publicApiEnabled: false, publicApiPrefix: '/knowledge-api/v1', remote: false },
+  scrollPositions: new Map(),
   loading: false,
   error: '',
 }
 
+let scrollRestoreFrame = 0
+
 function readDocumentLayout() {
   const fallback = {
     sidebarHidden: false, libraryHidden: false, documentListHidden: false,
@@ -93,6 +108,37 @@ function clampNumber(value, minimum, maximum, fallback) {
   return Number.isFinite(number) ? Math.min(maximum, Math.max(minimum, Math.round(number))) : fallback
 }
 
+function captureScrollPosition() {
+  const shell = app.querySelector('.app-shell[data-view]')
+  if (!shell || shell.dataset.loading === 'true') return
+  const regions = {}
+  shell.querySelectorAll('[data-scroll-key]').forEach(node => {
+    const key = node.getAttribute('data-scroll-key')
+    if (key) regions[key] = { left: node.scrollLeft, top: node.scrollTop }
+  })
+  state.scrollPositions.set(shell.dataset.view, {
+    window: { left: window.scrollX, top: window.scrollY },
+    regions,
+  })
+}
+
+function restoreScrollPosition(view) {
+  if (state.loading) return
+  const saved = state.scrollPositions.get(view)
+  if (!saved) return
+  if (scrollRestoreFrame) window.cancelAnimationFrame(scrollRestoreFrame)
+  scrollRestoreFrame = window.requestAnimationFrame(() => {
+    window.scrollTo(saved.window.left, saved.window.top)
+    app.querySelectorAll('[data-scroll-key]').forEach(node => {
+      const position = saved.regions[node.getAttribute('data-scroll-key')]
+      if (!position) return
+      node.scrollLeft = position.left
+      node.scrollTop = position.top
+    })
+    scrollRestoreFrame = 0
+  })
+}
+
 function element(tag, attributes = {}, ...children) {
   const node = document.createElement(tag)
   for (const [key, value] of Object.entries(attributes)) {
@@ -122,6 +168,16 @@ function paneToggleButton(pane, visible, onClick, label) {
   }, element('span', { class: `pane-icon pane-icon-${pane}`, 'aria-hidden': 'true' }))
 }
 
+function interfaceIcon(name, className = 'interface-icon') {
+  const paths = {
+    search: 'M10.8 4.5a6.3 6.3 0 1 0 0 12.6 6.3 6.3 0 0 0 0-12.6Zm4.6 11 4.1 4',
+  }
+  return element('svg', {
+    class: className, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor',
+    'stroke-width': '1.8', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'aria-hidden': 'true',
+  }, element('path', { d: paths[name] }))
+}
+
 function badge(label, variant = '') {
   return element('span', { class: `badge ${variant}`.trim() }, label)
 }
@@ -346,6 +402,7 @@ async function loadTokens() {
 }
 
 function renderShell() {
+  captureScrollPosition()
   const titles = {
     overview: ['概览', '知识库运行状态与最近活动'],
     bases: ['知识库', '创建知识库，并限定项目与会话的召回和写入范围'],
@@ -356,6 +413,7 @@ function renderShell() {
   const [title, subtitle] = titles[state.view]
   const shell = element('div', {
     class: 'app-shell', 'data-menu-open': String(state.menuOpen),
+    'data-view': state.view, 'data-loading': String(state.loading),
     'data-sidebar-hidden': String(state.documentView.sidebarHidden),
     style: `--sidebar-width: ${state.documentView.sidebarWidth}px`,
   },
@@ -376,6 +434,7 @@ function renderShell() {
     if (event.target === shell) { state.menuOpen = false; renderShell() }
   })
   app.replaceChildren(shell)
+  restoreScrollPosition(state.view)
 }
 
 function renderAppSidebarResizer() {
@@ -445,19 +504,21 @@ function setSidebarHidden(hidden) {
 
 function renderSidebar() {
   const pending = state.stats?.candidates.pending
-  const navItems = [
-    ['overview', '概览', '◫'], ['bases', '知识库', '▦'], ['entries', '文档', '◇'], ['candidates', '审核', '✓'], ['tokens', '访问管理', '⌁'],
-  ].filter(([id]) => id !== 'tokens' || !state.service.remote)
+  const navGroups = [
+    ['工作区', [['overview', '概览'], ['bases', '知识库'], ['entries', '文档'], ['candidates', '审核']]],
+    ['服务', [['tokens', '访问管理']].filter(([id]) => id !== 'tokens' || !state.service.remote)],
+  ].filter(([, items]) => items.length)
   return element('aside', { class: 'sidebar', 'aria-label': '知识库导航' },
     element('div', { class: 'brand' },
-      element('div', { class: 'brand-mark', 'aria-hidden': 'true' }, 'K'),
-      element('div', { class: 'brand-copy' }, element('strong', {}, 'DSH Knowledge'), element('span', {}, '管理控制台')),
+      element('div', { class: 'brand-copy' }, element('span', {}, 'DSH Knowledge'), element('strong', {}, '知识库')),
     ),
-    element('nav', { class: 'nav' }, navItems.map(([id, label, icon]) => element('button', {
-      type: 'button', class: 'nav-button', 'aria-current': state.view === id ? 'page' : undefined,
-      onClick: () => navigate(id),
-    }, element('span', { class: 'nav-icon', 'aria-hidden': 'true' }, icon), label,
-    id === 'candidates' && pending ? element('span', { class: 'nav-count', 'aria-label': `${pending} 条待审核` }, pending) : null))),
+    element('nav', { class: 'nav' }, navGroups.map(([group, items]) => element('div', { class: 'nav-group' },
+      element('div', { class: 'nav-group-label' }, group),
+      items.map(([id, label]) => element('button', {
+        type: 'button', class: 'nav-button', 'aria-current': state.view === id ? 'page' : undefined,
+        onClick: () => navigate(id),
+      }, element('span', { class: 'nav-label' }, label),
+      id === 'candidates' && pending ? element('span', { class: 'nav-count', 'aria-label': `${pending} 条待审核` }, pending) : null))))),
     element('div', { class: 'sidebar-footer' },
       element('div', { class: 'connection' }, element('span', { class: 'status-dot', 'aria-hidden': 'true' }), state.service.remote ? '中央知识库已连接' : '本地知识库已连接'),
       AUTH_MODE === 'bearer' ? actionButton('退出当前会话', signOut, 'ghost small') : null,
@@ -476,7 +537,16 @@ function renderCurrentView() {
 }
 
 function loadingView() {
-  return element('div', { class: 'loading', role: 'status' }, element('div', {}, element('div', { class: 'spinner', 'aria-hidden': 'true' }), element('span', { class: 'visually-hidden' }, '正在加载')))
+  return element('div', { class: 'loading-skeleton', role: 'status', 'aria-label': '正在加载' },
+    element('span', { class: 'visually-hidden' }, '正在加载'),
+    element('div', { class: 'skeleton-line skeleton-title', 'aria-hidden': 'true' }),
+    element('div', { class: 'skeleton-line skeleton-copy', 'aria-hidden': 'true' }),
+    element('div', { class: 'skeleton-grid', 'aria-hidden': 'true' },
+      element('div', { class: 'skeleton-block' }),
+      element('div', { class: 'skeleton-block' }),
+      element('div', { class: 'skeleton-block' }),
+    ),
+  )
 }
 
 function errorView(message, retry) {
@@ -516,24 +586,57 @@ function renderKnowledgeBases() {
   const activeBases = state.knowledgeBases.filter(base => base.status === 'active')
   const archivedBases = state.knowledgeBases.filter(base => base.status === 'archived')
   const contextAvailable = Boolean(state.mountContext.projectId || state.mountContext.sessionId)
+  const query = state.knowledgeBaseQuery.trim().toLocaleLowerCase()
+  const matchesQuery = base => !query || [base.name, base.description, base.defaultTags.join(' '), base.writebackProvider, base.writebackModel]
+    .some(value => String(value || '').toLocaleLowerCase().includes(query))
+  const visibleActiveBases = activeBases.filter(matchesQuery)
+  const visibleArchivedBases = archivedBases.filter(matchesQuery)
+  const switcher = element('div', { class: 'workspace-switcher' },
+    element('div', { class: 'tabs workspace-tabs', role: 'tablist', 'aria-label': '知识库管理范围' }, [
+      ['libraries', '知识库', activeBases.length],
+      ['mounts', '项目与会话挂载', state.mounts.filter(mount => mount.enabled).length],
+    ].map(([id, label, count]) => element('button', {
+      type: 'button', role: 'tab', class: 'tab', 'aria-selected': String(state.knowledgeBaseView === id),
+      onClick: () => { state.knowledgeBaseView = id; renderShell() },
+    }, element('span', {}, label), element('span', { class: 'tab-count' }, count)))),
+    element('p', {}, state.knowledgeBaseView === 'libraries'
+      ? '管理知识库本身、标签和回写规则'
+      : '决定当前项目或会话可以召回、审核或直接写入哪些知识库'),
+  )
   return element('div', { class: 'bases-page' },
-    element('section', { 'aria-labelledby': 'bases-heading' },
+    switcher,
+    state.knowledgeBaseView === 'libraries' ? element('section', { class: 'library-management', 'aria-labelledby': 'bases-heading' },
       element('div', { class: 'section-heading' },
-        element('div', {}, element('h2', { id: 'bases-heading' }, `知识库 · ${activeBases.length}`), element('p', {}, '每个知识库拥有独立的默认标签和提取规则。')),
+        element('div', {}, element('h2', { id: 'bases-heading' }, '我的知识库'), element('p', {}, '名称和描述帮助 AI 判断知识应该写到哪里。')),
         actionButton('+ 创建知识库', () => openKnowledgeBaseEditor(), 'primary'),
       ),
-      activeBases.length
-        ? element('div', { class: 'base-grid' }, activeBases.map(renderKnowledgeBaseCard))
-        : emptyState('还没有可用知识库', '先创建一个知识库，再挂载到项目或会话。', '创建知识库', () => openKnowledgeBaseEditor()),
-      archivedBases.length ? element('details', { class: 'archived-bases' },
-        element('summary', {}, `已归档知识库 · ${archivedBases.length}`),
-        element('div', { class: 'base-grid' }, archivedBases.map(renderKnowledgeBaseCard)),
+      element('div', { class: 'knowledge-base-toolbar' },
+        element('div', { class: 'search-box base-search' }, interfaceIcon('search', 'search-symbol'), element('input', {
+          class: 'input', type: 'search', value: state.knowledgeBaseQuery,
+          placeholder: '搜索名称、描述、标签或模型', 'aria-label': '搜索知识库',
+          onInput: event => {
+            state.knowledgeBaseQuery = event.target.value
+            renderShell()
+            document.querySelector('.base-search input')?.focus()
+          },
+        })),
+        element('div', { class: 'base-result-summary', 'aria-live': 'polite' }, query
+          ? `找到 ${visibleActiveBases.length + visibleArchivedBases.length} 个知识库`
+          : `${activeBases.length} 个可用 · ${archivedBases.length} 个已归档`),
+      ),
+      visibleActiveBases.length
+        ? element('div', { class: 'base-grid' }, visibleActiveBases.map(renderKnowledgeBaseCard))
+        : query && visibleArchivedBases.length === 0
+          ? emptyState('没有匹配的知识库', '尝试搜索名称、描述、标签或回写模型。')
+          : !query ? emptyState('还没有可用知识库', '使用右上角按钮创建第一个知识库。') : null,
+      visibleArchivedBases.length ? element('details', { class: 'archived-bases', open: Boolean(query) },
+        element('summary', {}, element('span', {}, '已归档知识库'), element('span', { class: 'summary-count' }, visibleArchivedBases.length)),
+        element('div', { class: 'base-grid' }, visibleArchivedBases.map(renderKnowledgeBaseCard)),
       ) : null,
-    ),
-    element('section', { class: 'mount-section', 'aria-labelledby': 'mounts-heading' },
+    ) : element('section', { class: 'mount-section', 'aria-labelledby': 'mounts-heading' },
       element('div', { class: 'section-heading' }, element('div', {},
-        element('h2', { id: 'mounts-heading' }, '当前项目与会话挂载'),
-        element('p', {}, '会话默认继承项目设置；创建会话覆盖后，可独立调整或关闭。'),
+        element('h2', { id: 'mounts-heading' }, '挂载范围'),
+        element('p', {}, '会话默认继承项目；只有需要差异时才创建会话覆盖。'),
       )),
       contextAvailable
         ? element('div', { class: 'mount-context' },
@@ -554,21 +657,24 @@ function contextPill(label, value) {
 
 function renderKnowledgeBaseCard(base) {
   const archived = base.status === 'archived'
+  const visibleTags = base.defaultTags.slice(0, 4)
+  const hiddenTagCount = Math.max(0, base.defaultTags.length - visibleTags.length)
   return element('article', { class: `base-card${archived ? ' is-archived' : ''}` },
     element('div', { class: 'base-card-header' },
-      element('div', {}, element('h3', {}, base.name), element('small', {}, base.id === 'default' ? '系统默认库' : `ID · ${base.id}`)),
+      element('div', { class: 'base-card-identity' },
+        element('span', { class: 'base-symbol', 'aria-hidden': 'true' }, base.name.trim().slice(0, 1).toLocaleUpperCase() || 'K'),
+        element('div', {}, element('h3', {}, base.name), element('small', { title: base.id }, base.id === 'default' ? '系统默认库' : `ID · ${base.id}`)),
+      ),
       badge(archived ? '已归档' : '可用', archived ? '' : 'success'),
     ),
-    element('div', { class: 'base-description' }, element('strong', {}, '回写匹配描述'), element('p', {}, base.description || '未设置：按通用知识库处理')),
-    base.defaultTags.length
-      ? element('div', { class: 'tag-row' }, base.defaultTags.map(tag => element('span', { class: 'tag' }, `#${tag}`)))
-      : element('span', { class: 'field-hint' }, '无默认标签'),
-    base.extractionInstructions
-      ? element('div', { class: 'base-instructions' }, element('strong', {}, '提取要求'), element('span', {}, base.extractionInstructions))
-      : null,
-    element('div', { class: 'base-model' },
-      element('strong', {}, '回写模型'),
-      badge(base.writebackProvider && base.writebackModel ? `${base.writebackProvider} / ${base.writebackModel}` : '跟随当前会话'),
+    element('p', { class: 'base-description' }, base.description || '通用知识库，尚未设置匹配描述。'),
+    element('div', { class: 'base-card-tags' }, visibleTags.length
+      ? visibleTags.map(tag => element('span', { class: 'tag' }, `#${tag}`))
+      : element('span', { class: 'tag is-empty' }, '无默认标签'),
+    hiddenTagCount ? element('span', { class: 'tag' }, `+${hiddenTagCount}`) : null),
+    element('div', { class: 'base-card-meta' },
+      element('span', {}, element('strong', {}, '回写模型'), base.writebackProvider && base.writebackModel ? `${base.writebackProvider} / ${base.writebackModel}` : '跟随当前会话'),
+      base.extractionInstructions ? element('span', {}, element('strong', {}, '提取规则'), '已设置') : null,
     ),
     element('div', { class: 'base-card-actions' },
       actionButton('查看知识', () => {
@@ -657,7 +763,7 @@ function renderMountManager(activeBases) {
           renderShell()
         },
       }, label))),
-      element('div', { class: 'search-box mount-search' }, element('span', { class: 'search-symbol', 'aria-hidden': 'true' }, '⌕'), searchInput),
+      element('div', { class: 'search-box mount-search' }, interfaceIcon('search', 'search-symbol'), searchInput),
       filter,
     ),
     element('div', { class: 'mount-target-line' },
@@ -666,7 +772,7 @@ function renderMountManager(activeBases) {
       element('span', { class: 'field-hint' }, `显示 ${visibleRows.length} / ${activeBases.length}`),
     ),
     visibleRows.length
-      ? element('div', { class: 'mount-table', role: 'list', 'aria-label': '知识库挂载列表' }, visibleRows.map(({ base, view }) => renderMountListRow(base, view, manager.targetKind, targetId)))
+      ? element('div', { class: 'mount-table', role: 'list', 'aria-label': '知识库挂载列表', 'data-scroll-key': 'mount-table' }, visibleRows.map(({ base, view }) => renderMountListRow(base, view, manager.targetKind, targetId)))
       : emptyState('没有匹配的知识库', '调整搜索词或筛选条件。'),
     element('div', { class: 'mount-bulk-bar', 'aria-live': 'polite' },
       element('strong', {}, `已选择 ${selectedCount} 个`),
@@ -760,19 +866,16 @@ function renderEntries() {
 
   return element('section', { class: 'document-page', 'aria-labelledby': 'documents-heading' },
     element('div', { class: 'document-page-toolbar' },
-      element('div', { class: 'search-box document-global-search' }, element('span', { class: 'search-symbol', 'aria-hidden': 'true' }, '⌕'), search),
+      renderDocumentModeTabs(),
+      element('div', { class: 'search-box document-global-search' }, interfaceIcon('search', 'search-symbol'), search),
       element('select', {
         class: 'select compact-library-picker', 'aria-label': '选择知识库', value: view.knowledgeBaseId,
         onChange: (event) => { view.knowledgeBaseId = event.target.value; view.documentId = ''; selectDefaultDocument(); renderShell() },
       }, activeBases.map(base => element('option', { value: base.id, selected: base.id === view.knowledgeBaseId }, base.name))),
-      element('div', { class: 'tabs', role: 'tablist', 'aria-label': '知识视图' },
-        documentViewTab('文档', 'documents'), documentViewTab('条目管理', 'entries')),
-      element('div', { class: 'pane-toggle-group document-pane-toggles', role: 'group', 'aria-label': '文档边栏显示' },
-        paneToggleButton('library', !view.libraryHidden, () => setDocumentColumnHidden('library', !view.libraryHidden), '知识库二级栏'),
-        paneToggleButton('document', !view.documentListHidden, () => setDocumentColumnHidden('documentList', !view.documentListHidden), '文档列表栏'),
+      element('div', { class: 'document-toolbar-actions' },
+        renderDocumentColumnControls(),
+        actionButton('+ 新建知识', () => openEntryEditor(), 'primary'),
       ),
-      actionButton('调整栏宽', openLayoutEditor, 'ghost small', { 'aria-label': '调整主导航、知识库和文档栏宽度' }),
-      actionButton('+ 新建知识', () => openEntryEditor(), 'primary'),
     ),
     element('div', {
       class: 'document-browser',
@@ -780,11 +883,11 @@ function renderEntries() {
       'data-document-list-hidden': String(view.documentListHidden),
       style: `--library-width:${view.libraryWidth}px;--document-list-width:${view.documentListWidth}px`,
     },
-      element('aside', { class: 'knowledge-library-column', 'aria-label': '知识库列表' },
+      element('aside', { id: 'knowledge-library-column', class: 'knowledge-library-column', 'aria-label': '知识库列表' },
         element('header', { class: 'column-header' },
           element('div', {}, element('h2', { id: 'documents-heading' }, '知识库'), element('span', {}, `${activeBases.length} 个可用`)),
         ),
-        activeBases.length ? element('div', { class: 'library-list', role: 'listbox', tabindex: '0', onKeyDown: event => moveDocumentSelection(event, 'base') },
+        activeBases.length ? element('div', { class: 'library-list', role: 'listbox', tabindex: '0', 'data-scroll-key': 'library-list', onKeyDown: event => moveDocumentSelection(event, 'base') },
           activeBases.map(base => {
             const documentCount = state.documents.filter(document => document.knowledgeBaseId === base.id).length
             const selected = base.id === view.knowledgeBaseId
@@ -798,11 +901,11 @@ function renderEntries() {
         element('footer', { class: 'column-footer' }, actionButton('+ 新建知识库', () => openKnowledgeBaseEditor(), 'ghost small')),
       ),
       renderColumnResizer('library', '调整知识库栏宽度'),
-      element('aside', { class: 'document-list-column', 'aria-label': '文档列表' },
+      element('aside', { id: 'document-list-column', class: 'document-list-column', 'aria-label': '文档列表' },
         element('header', { class: 'column-header' },
           element('div', {}, element('h2', {}, selectedBase?.name || '文档'), element('span', {}, query ? `找到 ${visibleDocuments.length} 篇` : `${allBaseDocuments.length} 篇文档`)),
         ),
-        visibleDocuments.length ? element('div', { class: 'document-list', role: 'listbox', tabindex: '0', onKeyDown: event => moveDocumentSelection(event, 'document') },
+        visibleDocuments.length ? element('div', { class: 'document-list', role: 'listbox', tabindex: '0', 'data-scroll-key': 'document-list', onKeyDown: event => moveDocumentSelection(event, 'document') },
           visibleDocuments.map(document => element('button', {
             type: 'button', class: 'document-row', role: 'option', 'aria-selected': String(document.id === view.documentId),
             onClick: () => { view.documentId = document.id; renderShell() },
@@ -824,104 +927,56 @@ function setDocumentColumnHidden(column, hidden) {
   renderShell()
 }
 
-function renderColumnResizer(column, label) {
-  const isLibrary = column === 'library'
-  const minimum = isLibrary ? 170 : 210
-  const maximum = isLibrary ? 360 : 480
-  const value = isLibrary ? state.documentView.libraryWidth : state.documentView.documentListWidth
-  return element('div', {
-    class: 'column-resizer', 'data-column': column, role: 'separator', tabindex: '0',
-    title: `${label}；可拖动或使用左右方向键`,
-    'aria-label': label, 'aria-orientation': 'vertical',
-    'aria-valuemin': minimum, 'aria-valuemax': maximum, 'aria-valuenow': value,
-    onPointerDown: event => startColumnResize(event, column, minimum, maximum),
-    onKeyDown: event => resizeColumnWithKeyboard(event, column, minimum, maximum),
-  }, element('span', { 'aria-hidden': 'true' }, '⋮'))
-}
-
-function openLayoutEditor() {
-  const fields = [
-    layoutRangeField('主导航栏', state.documentView.sidebarWidth, 190, 340),
-    layoutRangeField('知识库二级栏', state.documentView.libraryWidth, 170, 360),
-    layoutRangeField('文档列表栏', state.documentView.documentListWidth, 210, 480),
-  ]
-  const visibility = [
-    layoutVisibilityOption('显示主导航栏', !state.documentView.sidebarHidden),
-    layoutVisibilityOption('显示知识库二级栏', !state.documentView.libraryHidden),
-    layoutVisibilityOption('显示文档列表栏', !state.documentView.documentListHidden),
-  ]
-  const reset = actionButton('恢复默认布局', () => {
-    const defaults = [236, 220, 280]
-    fields.forEach((field, index) => field.setValue(defaults[index]))
-    visibility.forEach(option => { option.input.checked = true })
-  }, 'ghost small')
-  const body = element('div', { class: 'layout-editor' },
-    element('div', { class: 'layout-visibility', 'aria-label': '边栏显示设置' }, visibility.map(option => option.wrapper)),
-    fields.map(field => field.wrapper),
-    element('div', { class: 'layout-editor-note' },
-      element('span', {}, '也可以直接拖动栏与栏之间的三点分隔线。窗口过窄时会自动切换为紧凑布局。'),
-      reset,
-    ),
+function renderDocumentColumnControls() {
+  return element('div', { class: 'document-column-controls', role: 'group', 'aria-label': '显示文档栏位' },
+    element('span', { class: 'document-column-controls-label', 'aria-hidden': 'true' }, '显示'),
+    documentColumnControl('library', '知识库栏'),
+    documentColumnControl('documentList', '文档栏'),
   )
-  openModal({
-    title: '调整边栏宽度',
-    description: '分别设置管理导航、知识库二级栏和文档列表栏。',
-    body,
-    primaryLabel: '应用布局',
-    onPrimary: async () => {
-      state.documentView.sidebarHidden = !visibility[0].input.checked
-      state.documentView.libraryHidden = !visibility[1].input.checked
-      state.documentView.documentListHidden = !visibility[2].input.checked
-      state.documentView.sidebarWidth = fields[0].value()
-      state.documentView.libraryWidth = fields[1].value()
-      state.documentView.documentListWidth = fields[2].value()
-      saveDocumentLayout()
-      renderShell()
-      showToast('边栏宽度已保存。')
-      return true
-    },
-  })
 }
 
-function layoutVisibilityOption(label, checked) {
-  const input = element('input', { type: 'checkbox', checked })
-  return {
-    input,
-    wrapper: element('label', { class: 'check-option' }, input, element('span', {}, element('strong', {}, label))),
-  }
+function documentColumnControl(column, label) {
+  const layout = DOCUMENT_COLUMN_LAYOUTS[column]
+  const visible = !state.documentView[layout.hiddenKey]
+  const action = `${visible ? '收起' : '展开'}${label}`
+  return element('button', {
+    type: 'button', class: 'document-column-control', 'data-column': column,
+    'aria-label': action, 'aria-pressed': String(visible), title: action,
+    onClick: () => setDocumentColumnHidden(column, visible),
+  }, label)
 }
 
-function layoutRangeField(label, value, minimum, maximum) {
-  const output = element('output', { class: 'range-value' }, `${value}px`)
-  const input = element('input', {
-    type: 'range', min: minimum, max: maximum, step: '10', value,
-    'aria-label': label,
-    onInput: event => { output.textContent = `${event.target.value}px` },
-  })
-  return {
-    wrapper: element('div', { class: 'field' },
-      element('div', { class: 'layout-range-label' }, element('label', {}, label), output),
-      element('div', { class: 'range-row' }, input),
-    ),
-    value: () => Number(input.value),
-    setValue: next => { input.value = String(next); output.textContent = `${next}px` },
-  }
+function renderColumnResizer(column, label) {
+  const layout = DOCUMENT_COLUMN_LAYOUTS[column]
+  const hidden = state.documentView[layout.hiddenKey]
+  if (hidden) return null
+  const value = state.documentView[layout.widthKey]
+  return element('div', {
+    class: 'column-resizer', 'data-column': column, role: 'separator', tabindex: '0',
+    title: `${label}；可拖动或使用左右方向键`,
+    'aria-label': label, 'aria-controls': layout.controls, 'aria-orientation': 'vertical',
+    'aria-valuemin': layout.minimum, 'aria-valuemax': layout.maximum, 'aria-valuenow': value,
+    'aria-valuetext': `${value} 像素`,
+    onPointerDown: event => startColumnResize(event, column),
+    onKeyDown: event => resizeColumnWithKeyboard(event, column),
+  }, element('span', { 'aria-hidden': 'true' }, '⋮'))
 }
 
-function startColumnResize(event, column, minimum, maximum) {
+function startColumnResize(event, column) {
   if (event.button !== 0) return
   event.preventDefault()
+  const layout = DOCUMENT_COLUMN_LAYOUTS[column]
   const handle = event.currentTarget
   const browser = handle.closest('.document-browser')
   if (!browser) return
   const startX = event.clientX
-  const startWidth = column === 'library' ? state.documentView.libraryWidth : state.documentView.documentListWidth
+  const startWidth = state.documentView[layout.widthKey]
   handle.setPointerCapture?.(event.pointerId)
   handle.classList.add('is-dragging')
   document.body.classList.add('is-resizing-columns')
   const move = moveEvent => {
-    const width = clampNumber(startWidth + moveEvent.clientX - startX, minimum, maximum, startWidth)
-    setColumnWidth(column, width, browser, handle)
+    const width = clampNumber(startWidth + moveEvent.clientX - startX, layout.minimum, layout.maximum, startWidth)
+    setDocumentColumnWidth(column, width, browser, handle)
   }
   const finish = () => {
     handle.classList.remove('is-dragging')
@@ -936,27 +991,32 @@ function startColumnResize(event, column, minimum, maximum) {
   handle.addEventListener('pointercancel', finish)
 }
 
-function resizeColumnWithKeyboard(event, column, minimum, maximum) {
+function resizeColumnWithKeyboard(event, column) {
   if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return
   event.preventDefault()
-  const current = column === 'library' ? state.documentView.libraryWidth : state.documentView.documentListWidth
-  const width = event.key === 'Home' ? minimum
-    : event.key === 'End' ? maximum
-    : clampNumber(current + (event.key === 'ArrowRight' ? 16 : -16), minimum, maximum, current)
+  const layout = DOCUMENT_COLUMN_LAYOUTS[column]
+  const current = state.documentView[layout.widthKey]
   const browser = event.currentTarget.closest('.document-browser')
-  setColumnWidth(column, width, browser, event.currentTarget)
+  const width = event.key === 'Home' ? layout.minimum
+    : event.key === 'End' ? layout.maximum
+    : clampNumber(current + (event.key === 'ArrowRight' ? 16 : -16), layout.minimum, layout.maximum, current)
+  setDocumentColumnWidth(column, width, browser, event.currentTarget)
   saveDocumentLayout()
 }
 
-function setColumnWidth(column, width, browser, handle) {
-  if (column === 'library') {
-    state.documentView.libraryWidth = width
-    browser?.style.setProperty('--library-width', `${width}px`)
-  } else {
-    state.documentView.documentListWidth = width
-    browser?.style.setProperty('--document-list-width', `${width}px`)
-  }
+function setDocumentColumnWidth(column, width, browser, handle) {
+  const layout = DOCUMENT_COLUMN_LAYOUTS[column]
+  state.documentView[layout.widthKey] = width
+  browser?.style.setProperty(layout.cssVariable, `${width}px`)
   handle?.setAttribute('aria-valuenow', String(width))
+  handle?.setAttribute('aria-valuetext', `${width} 像素`)
+}
+
+function renderDocumentModeTabs() {
+  return element('div', { class: 'tabs', role: 'tablist', 'aria-label': '知识视图' },
+    documentViewTab('文档', 'documents'),
+    documentViewTab('条目管理', 'entries'),
+  )
 }
 
 function documentViewTab(label, mode) {
@@ -1002,7 +1062,7 @@ function renderDocumentReader(document, base) {
         .map(item => element('option', { value: item.id, selected: item.id === document.id }, item.relPath))),
       element('div', { class: 'reader-actions' }, badge(`${document.entryCount} 条知识`), actionButton('添加内容', () => openEntryEditor(), 'small')),
     ),
-    element('article', { class: 'markdown-document' }, renderMarkdown(document.content)),
+    element('article', { class: 'markdown-document', 'data-scroll-key': 'document-reader' }, renderMarkdown(document.content)),
     element('footer', { class: 'reader-footer' },
       element('span', {}, `自动整理 · ${formatDate(document.updatedAt)}`),
       element('span', {}, `SHA-256 · ${document.contentHash.slice(0, 8)}`),
@@ -1077,7 +1137,11 @@ function renderLegacyEntries() {
     projectInput,
     actionButton('搜索', () => {}, 'primary', { type: 'submit' }),
   )
-  return element('section', { 'aria-labelledby': 'entries-heading' },
+  return element('section', { class: 'document-page legacy-entries-page', 'aria-labelledby': 'entries-heading' },
+    element('div', { class: 'document-page-toolbar legacy-entries-toolbar' },
+      renderDocumentModeTabs(),
+      element('div', { class: 'document-toolbar-actions' }, actionButton('+ 新建知识', () => openEntryEditor(), 'primary')),
+    ),
     element('div', { class: 'section-heading' }, element('div', {}, element('h2', { id: 'entries-heading' }, `${STATUS_LABELS[state.entryFilters.status]} · ${state.entries.length}`), element('p', {}, '搜索范围会包含全局知识和指定项目知识'))),
     toolbar,
     state.entries.length