@lemoncat7/dsh-knowledge 2.3.2 → 2.3.4

package/web/app.js

@@ -3,14 +3,20 @@ const AUTH_MODE = document.querySelector('meta[name="dsh-knowledge-auth-mode"]')
 const WEB_PATH = document.querySelector('meta[name="dsh-knowledge-web"]')?.content || '/knowledge'
 const ASSET_VERSION = document.querySelector('meta[name="dsh-knowledge-asset-version"]')?.content || ''
 const moduleUrl = name => `./${name}.js${ASSET_VERSION ? `?v=${encodeURIComponent(ASSET_VERSION)}` : ''}`
-const [apiModule, themeModule, uiModule] = await Promise.all([
+const [apiModule, themeModule, uiModule, modelCatalogModule, dialogModule, selectModule, documentActionsModule] = await Promise.all([
   import(moduleUrl('api-client')),
   import(moduleUrl('host-theme')),
   import(moduleUrl('ui-primitives')),
+  import(moduleUrl('model-catalog')),
+  import(moduleUrl('dialogs')),
+  import(moduleUrl('select-control')),
+  import(moduleUrl('document-actions')),
 ])
 const { createApiClient } = apiModule
 const { installHostThemeBridge } = themeModule
 const { actionButton, badge, createToastPresenter, element, interfaceIcon, paneToggleButton } = uiModule
+const { renderMenu: renderDocumentMenu, closeMenus: closeDocumentMenus } = documentActionsModule.createDocumentMenuPresenter(uiModule)
+const readModelCatalog = modelCatalogModule.createModelCatalogLoader()
 const TOKEN_KEY = 'dsh-knowledge.session-token'
 const TYPES = ['preference', 'fact', 'decision', 'procedure', 'lesson']
 const TYPE_LABELS = { preference: '偏好', fact: '事实', decision: '决策', procedure: '流程', lesson: '经验' }
@@ -26,6 +32,8 @@ const NOTE_MAX_FILE_SIZE = 64 * 1024 * 1024
 const pageParams = new URLSearchParams(location.search)
 const initialKnowledgeBaseId = pageParams.get('knowledgeBaseId')?.trim() || ''
 const initialDocumentId = pageParams.get('documentId')?.trim() || ''
+const initialView = pageParams.get('view') === 'notes' ? 'notes' : 'entries'
+const initialNoteId = pageParams.get('noteId')?.trim() || ''
 const mountContext = {
   sessionId: pageParams.get('sessionId')?.trim() || '',
   projectId: pageParams.get('projectId')?.trim() || '',
@@ -33,6 +41,8 @@ const mountContext = {
 const app = document.querySelector('#app')
 const toastRegion = document.querySelector('#toast-region')
 const showToast = createToastPresenter(toastRegion)
+const { openConfirm, openSheet, openModal } = dialogModule.createDialogPresenter({ element, actionButton, interfaceIcon, showToast, friendlyError })
+selectModule.installSelectControls()
 const savedDocumentLayout = readDocumentLayout()
 
 function createDocumentViewState(overrides = {}) {
@@ -46,7 +56,7 @@ function createDocumentViewState(overrides = {}) {
 
 const state = {
   token: sessionStorage.getItem(TOKEN_KEY) || '',
-  view: 'entries',
+  view: initialView,
   menuOpen: false,
   stats: null,
   overview: null,
@@ -88,9 +98,9 @@ const state = {
   tokens: [],
   notes: {
     children: new Map(), loadedFolders: new Set(), expandedFolders: new Set(),
-    selectedId: '', selectedNode: null, currentFolderId: null, breadcrumbs: [],
+    selectedId: initialNoteId, selectedNode: null, currentFolderId: null, breadcrumbs: [],
     content: '', draft: '', dirty: false, assetUrl: '', query: '', searchResults: [],
-    transfer: null, loadingNodeId: '', shares: [], shareError: '',
+    transfer: null, loadingNodeId: '', shares: [], shareError: '', browserOpen: false,
   },
   service: { publicApiEnabled: false, publicApiPrefix: '/knowledge-api/v1', remote: false },
   scrollPositions: new Map(),
@@ -195,7 +205,7 @@ async function boot() {
     state.token = ''
     await Promise.all([
       api('service').then(service => { state.service = service }).catch(() => {}),
-      navigate('entries'),
+      navigate(initialView),
     ])
     renderShell()
     return
@@ -206,7 +216,7 @@ async function boot() {
   }
   try {
     await api('entries?limit=1')
-    await navigate('entries')
+    await navigate(initialView)
   } catch (error) {
     sessionStorage.removeItem(TOKEN_KEY)
     state.token = ''
@@ -233,7 +243,7 @@ function renderLogin(message = '') {
       try {
         await api('entries?limit=1')
         sessionStorage.setItem(TOKEN_KEY, token)
-        await navigate('entries')
+        await navigate(initialView)
       } catch (requestError) {
         state.token = ''
         error.textContent = requestError.status === 401 ? '令牌无效或已被撤销。' : '连接失败，请检查服务状态后重试。'
@@ -263,7 +273,7 @@ function signOut() {
   releaseNoteAsset()
   sessionStorage.removeItem(TOKEN_KEY)
   Object.assign(state, { token: '', stats: null, overview: null, knowledgeBases: [], mounts: [], resolvedMounts: [], entries: [], documents: [], candidates: [], candidateTargets: new Map(), settings: { writebackPolicy: 'conservative', updatedAt: '' }, tokens: [] })
-  state.notes = { children: new Map(), loadedFolders: new Set(), expandedFolders: new Set(), selectedId: '', selectedNode: null, currentFolderId: null, breadcrumbs: [], content: '', draft: '', dirty: false, assetUrl: '', query: '', searchResults: [], transfer: null, loadingNodeId: '', shares: [], shareError: '' }
+  state.notes = { children: new Map(), loadedFolders: new Set(), expandedFolders: new Set(), selectedId: '', selectedNode: null, currentFolderId: null, breadcrumbs: [], content: '', draft: '', dirty: false, assetUrl: '', query: '', searchResults: [], transfer: null, loadingNodeId: '', shares: [], shareError: '', browserOpen: false }
   if (AUTH_MODE === 'same-origin') void boot()
   else renderLogin()
 }
@@ -333,7 +343,10 @@ function updateLoadingPhase(request, label, progress) {
   if (request !== navigationRequest || !state.loading) return
   state.loadingPhase = label
   state.loadingProgress = Math.max(0, Math.min(1, progress))
-  renderShell()
+  const progressNode = document.querySelector('.route-progress')
+  progressNode?.setAttribute('aria-label', label)
+  progressNode?.setAttribute('aria-valuenow', String(Math.round(state.loadingProgress * 100)))
+  progressNode?.firstElementChild?.style.setProperty('--route-progress', String(state.loadingProgress))
 }
 
 async function saveBeforeNavigation() {
@@ -484,7 +497,7 @@ async function loadNotes(signal, onPhase = () => {}) {
       ? state.notes.selectedNode
       : await api(`notes/${encodeURIComponent(state.notes.selectedId)}`, { signal }).catch(() => null)
     if (!selected) clearNoteSelection()
-    else state.notes.selectedNode = selected
+    else await selectNoteNode(selected)
   }
 }
 
@@ -937,6 +950,7 @@ async function loadTokens(signal) {
 }
 
 function renderShell() {
+  closeDocumentMenus()
   releaseNoteEditors()
   captureScrollPosition()
   const titles = {
@@ -960,25 +974,20 @@ function renderShell() {
   },
     renderSidebar(),
     renderAppSidebarResizer(),
-    state.menuOpen ? element('button', {
-      type: 'button', class: 'app-sidebar-scrim',
+    element('button', {
+      type: 'button', class: 'app-sidebar-scrim', hidden: !state.menuOpen,
       'aria-label': '关闭导航菜单',
-      onClick: () => { state.menuOpen = false; renderShell() },
-    }) : null,
+      onClick: () => setMenuOpen(false),
+    }),
     element('main', { class: 'main' },
       element('header', { class: 'topbar' },
         element('div', { class: 'topbar-title' },
-          actionButton('☰', () => { state.menuOpen = !state.menuOpen; renderShell() }, 'ghost mobile-menu', {
+          actionButton(interfaceIcon('menu'), () => setMenuOpen(!state.menuOpen), 'ghost mobile-menu', {
             'aria-label': state.menuOpen ? '关闭导航菜单' : '打开导航菜单',
             'aria-expanded': String(state.menuOpen),
           }),
           paneToggleButton('main', !state.documentView.sidebarHidden, () => setSidebarHidden(!state.documentView.sidebarHidden), '主导航栏'),
-          activeDocumentWorkspace() ? paneToggleButton('library', activeDocumentWorkspace().view.treeOpen, () => {
-            const workspace = activeDocumentWorkspace()
-            if (!workspace) return
-            workspace.view.treeOpen = !workspace.view.treeOpen
-            renderShell()
-          }, '知识目录') : null,
+          renderContextPaneToggle(),
           element('div', { class: 'topbar-heading' },
             element('span', { class: 'topbar-kicker' }, `KNOWLEDGE / ${viewIndexes[state.view] || '00'}`),
             element('h1', {}, title),
@@ -997,6 +1006,21 @@ function renderShell() {
   restoreScrollPosition(currentScrollState())
 }
 
+function renderContextPaneToggle() {
+  if (state.view === 'notes') {
+    return paneToggleButton('library', state.notes.browserOpen, () => {
+      state.notes.browserOpen = !state.notes.browserOpen
+      renderShell()
+    }, '笔记目录')
+  }
+  const workspace = activeDocumentWorkspace()
+  if (!workspace) return null
+  return paneToggleButton('library', workspace.view.treeOpen, () => {
+    workspace.view.treeOpen = !workspace.view.treeOpen
+    renderShell()
+  }, '知识目录')
+}
+
 function renderAppSidebarResizer() {
   const minimum = 190
   const maximum = 340
@@ -1019,24 +1043,38 @@ function startSidebarResize(event, minimum, maximum) {
   if (!shell) return
   const startX = event.clientX
   const startWidth = state.documentView.sidebarWidth
+  let pendingWidth = startWidth
+  let frame = 0
   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)
-    setSidebarWidth(width, shell, handle)
+    if (moveEvent.pointerId !== event.pointerId) return
+    pendingWidth = clampNumber(startWidth + moveEvent.clientX - startX, minimum, maximum, startWidth)
+    if (!frame) frame = window.requestAnimationFrame(() => {
+      frame = 0
+      if (shell.isConnected) setSidebarWidth(pendingWidth, shell, handle)
+    })
   }
-  const finish = () => {
+  const finish = endEvent => {
+    if (endEvent.pointerId !== event.pointerId) return
+    if (frame) window.cancelAnimationFrame(frame)
+    frame = 0
+    if (endEvent.type === 'pointerup') pendingWidth = clampNumber(startWidth + endEvent.clientX - startX, minimum, maximum, startWidth)
+    if (shell.isConnected) setSidebarWidth(pendingWidth, shell, handle)
     handle.classList.remove('is-dragging')
     document.body.classList.remove('is-resizing-columns')
     handle.removeEventListener('pointermove', move)
     handle.removeEventListener('pointerup', finish)
     handle.removeEventListener('pointercancel', finish)
+    handle.removeEventListener('lostpointercapture', finish)
+    if (handle.hasPointerCapture?.(event.pointerId)) handle.releasePointerCapture(event.pointerId)
     saveDocumentLayout()
   }
   handle.addEventListener('pointermove', move)
   handle.addEventListener('pointerup', finish)
   handle.addEventListener('pointercancel', finish)
+  handle.addEventListener('lostpointercapture', finish)
 }
 
 function resizeSidebarWithKeyboard(event, minimum, maximum) {
@@ -1056,6 +1094,18 @@ function setSidebarWidth(width, shell, handle) {
   handle?.setAttribute('aria-valuenow', String(width))
 }
 
+function setMenuOpen(open) {
+  state.menuOpen = open
+  const shell = app.querySelector('.app-shell')
+  if (!shell) return
+  shell.dataset.menuOpen = String(open)
+  shell.querySelector('.app-sidebar-scrim')?.toggleAttribute('hidden', !open)
+  const toggle = shell.querySelector('.mobile-menu')
+  toggle?.setAttribute('aria-expanded', String(open))
+  toggle?.setAttribute('aria-label', open ? '关闭导航菜单' : '打开导航菜单')
+  applySidebarVisibility(shell, state.documentView.sidebarHidden)
+}
+
 function setSidebarHidden(hidden) {
   state.documentView.sidebarHidden = hidden
   saveDocumentLayout()
@@ -1069,7 +1119,7 @@ function applySidebarVisibility(shell, hidden) {
   const resizer = shell.querySelector(':scope > .app-sidebar-resizer')
   const main = shell.querySelector(':scope > .main')
   const toggle = shell.querySelector('.pane-toggle-button[data-pane="main"]')
-  const compact = window.matchMedia('(max-width: 760px)').matches
+  const compact = window.matchMedia('(max-width: 1120px), (hover: none) and (pointer: coarse) and (max-width: 1400px)').matches
   const sidebarUnavailable = compact ? !state.menuOpen : hidden
   sidebar?.toggleAttribute('inert', sidebarUnavailable)
   resizer?.toggleAttribute('inert', hidden)
@@ -1722,13 +1772,16 @@ function renderNoteEditor(workspace, editor, base) {
       element('div', { class: 'note-editor-actions' },
         finalized ? badge(DOCUMENT_STATE_LABELS[editor.documentState] || '已结束', 'success') : readOnly ? badge('只读') : null,
         element('span', { class: 'editor-save-status', role: 'status' }, editor.saveState),
-        !readOnly && !editor.isNew && documentWorkspaceBases(workspace).some(item => item.id !== editor.knowledgeBaseId)
-          ? actionButton('移动到…', () => openMoveKnowledgeDocument(workspace, editor), 'ghost small')
-          : null,
         finalized && !readOnly ? actionButton('重新打开', () => reopenDocument(workspace, editor), 'small') : null,
-        !readOnly && !editor.isNew && !finalized ? actionButton('标记结束', () => openFinalizeDocument(workspace, editor), 'small') : null,
-        !readOnly && !editor.isNew && !finalized ? actionButton('删除', () => confirmDeleteDocument(workspace, editor), 'ghost small') : null,
         !readOnly && !finalized ? actionButton(editor.isNew ? '创建文档' : '保存', () => { void saveDocumentEditor(workspace).then(saved => { if (saved) renderShell() }) }, 'primary small') : null,
+        !readOnly && !editor.isNew ? renderDocumentMenu(editor.title || '知识文档', [
+          [
+            ...(documentWorkspaceBases(workspace).some(item => item.id !== editor.knowledgeBaseId)
+              ? [{ label: '移动到…', icon: 'move', run: () => openMoveKnowledgeDocument(workspace, editor) }] : []),
+            ...(!finalized ? [{ label: '标记结束', icon: 'check', run: () => openFinalizeDocument(workspace, editor) }] : []),
+          ],
+          !finalized ? [{ label: '删除文档', icon: 'trash', danger: true, run: () => confirmDeleteDocument(workspace, editor) }] : [],
+        ]) : null,
       ),
     ),
     element('div', { class: 'note-editor-scroll', 'data-scroll-key': 'note-editor' },
@@ -1972,6 +2025,7 @@ function renderNotes() {
   const tree = state.notes.query.trim() ? renderNoteSearchResults() : renderNoteTreeBranch(null)
   const workspace = element('section', {
     class: 'notes-workspace', 'data-drop-active': 'false',
+    'data-browser-open': String(state.notes.browserOpen),
     onDragEnter: noteWorkspaceDragEnter, onDragOver: noteWorkspaceDragEnter,
     onDragLeave: noteWorkspaceDragLeave,
     onDrop: event => {
@@ -1981,6 +2035,10 @@ function renderNotes() {
       void importDroppedNotes(event.dataTransfer, state.notes.currentFolderId)
     },
   },
+    state.notes.browserOpen ? element('button', {
+      type: 'button', class: 'notes-browser-scrim', 'aria-label': '关闭笔记目录',
+      onClick: () => { state.notes.browserOpen = false; renderShell() },
+    }) : null,
     element('aside', { class: 'notes-browser', 'aria-label': '笔记目录' },
       element('header', { class: 'notes-browser-header' },
         element('div', {}, element('h2', {}, '目录'), element('span', {}, `${rootNodes.length} 个根目录项目`)),
@@ -2643,86 +2701,34 @@ function renderNoteFile(node) {
 
 function renderNoteFileToolbar(node, options = {}) {
   return element('header', { class: 'notes-document-toolbar' },
-    element('div', { class: 'notes-toolbar-leading' },
-      renderNoteDocumentBreadcrumb(node),
-    ),
+    element('div', { class: 'notes-toolbar-leading' }, renderNoteDocumentBreadcrumb(node)),
     element('div', { class: 'notes-document-actions' },
       options.editable ? element('span', { class: 'notes-save-state', role: 'status', 'data-note-save-state': '', 'data-dirty': String(state.notes.dirty) }, state.notes.dirty ? '未保存' : '已保存') : null,
-      options.enhanced ? actionButton('查找', () => markdownEditorHandle?.openFind(), 'ghost small', { 'data-note-find': '', 'data-note-mobile-overflow': '', 'aria-keyshortcuts': 'Control+F Meta+F', 'aria-pressed': 'false' }) : null,
       options.enhanced ? actionButton([
-        interfaceIcon('outline', 'notes-toolbar-action-icon'),
-        element('span', {}, '大纲'),
-      ], () => markdownEditorHandle?.toggleOutline(), 'ghost small notes-outline-action', { 'data-note-outline': '', 'aria-label': '打开标题大纲', 'aria-controls': 'dsh-note-outline', 'aria-expanded': 'false', 'aria-pressed': 'false' }) : null,
-      options.editable ? actionButton('历史', () => { void openNoteHistory(node) }, 'ghost small', { 'data-note-history': '', 'data-note-mobile-overflow': '' }) : null,
-      noteDownloadButton(node, 'ghost small', '下载', { 'data-note-mobile-overflow': '' }),
-      actionButton(noteShareForNode(node.id) ? '分享中' : '分享', () => { void openNoteShare(node) }, 'ghost small', { 'data-note-mobile-overflow': '' }),
-      actionButton('复制引用', () => { void copyNoteReference(node) }, 'ghost small', { 'data-note-mobile-overflow': '' }),
-      actionButton('重命名', () => openRenameNoteNode(node), 'ghost small', { 'data-note-mobile-overflow': '' }),
-      options.editable ? actionButton('保存', () => { void saveNoteDocument() }, 'primary small', { 'data-note-save': '', 'data-note-mobile-overflow': '', disabled: !state.notes.dirty }) : null,
+        interfaceIcon('outline', 'notes-toolbar-action-icon'), element('span', {}, '大纲'),
+      ], () => markdownEditorHandle?.toggleOutline(), 'ghost small notes-outline-action', { 'data-note-outline': '', 'aria-label': '打开标题大纲', title: '标题大纲', 'aria-controls': 'dsh-note-outline', 'aria-expanded': 'false', 'aria-pressed': 'false' }) : null,
+      options.editable ? actionButton('保存', () => { void saveNoteDocument() }, 'primary small', { 'data-note-save': '', disabled: !state.notes.dirty, 'aria-keyshortcuts': 'Control+S Meta+S' }) : null,
       renderNoteFileOverflowMenu(node, options),
     ),
   )
 }
 
 function renderNoteFileOverflowMenu(node, options) {
-  const details = element('details', {
-    class: 'notes-document-more',
-    onKeyDown: event => {
-      if (event.key !== 'Escape') return
-      event.preventDefault()
-      details.open = false
-      summary.focus()
-    },
-    onFocusOut: () => {
-      window.setTimeout(() => {
-        if (!details.contains(document.activeElement)) details.open = false
-      }, 0)
-    },
-  })
-  const summary = element('summary', { class: 'button ghost small', title: '更多操作', 'aria-label': `打开 ${node.name} 的更多操作` },
-    interfaceIcon('more', 'notes-document-more-icon'),
-  )
-  details.addEventListener('toggle', () => {
-    summary.setAttribute('aria-expanded', String(details.open))
-    summary.setAttribute('aria-label', `${details.open ? '关闭' : '打开'} ${node.name} 的更多操作`)
-  })
-  const closeThen = action => event => {
-    details.open = false
-    action(event)
-  }
-  const menuItems = []
-  if (options.editable && state.notes.dirty) {
-    menuItems.push(noteMenuAction('保存修改', 'save', closeThen(() => { void saveNoteDocument() })))
-    menuItems.push(noteMenuDivider())
-  }
-  if (options.enhanced) {
-    menuItems.push(noteMenuAction('查找', 'search', closeThen(() => markdownEditorHandle?.openFind())))
-  }
-  if (options.editable) menuItems.push(noteMenuAction('页面历史', 'history', closeThen(() => { void openNoteHistory(node) })))
-  if (options.enhanced || options.editable) menuItems.push(noteMenuDivider())
-  menuItems.push(
-    noteMenuAction('下载', 'download', closeThen(event => { void downloadNoteFile(node, event.currentTarget) })),
-    noteMenuAction(noteShareForNode(node.id) ? '管理分享' : '创建分享', 'link', closeThen(() => { void openNoteShare(node) })),
-    noteMenuAction('复制引用', 'link', closeThen(() => { void copyNoteReference(node) })),
-    noteMenuAction('重命名', 'rename', closeThen(() => openRenameNoteNode(node))),
-    noteMenuDivider(),
-    noteMenuAction('查看已分享', 'outline', closeThen(() => { void navigate('shares') })),
-  )
-  const menu = element('div', { class: 'notes-document-more-menu', role: 'menu', 'aria-label': `${node.name} 的更多操作` }, menuItems)
-  summary.setAttribute('aria-expanded', 'false')
-  details.append(summary, menu)
-  return details
-}
-
-function noteMenuAction(label, icon, onClick, attributes = {}) {
-  return actionButton([
-    interfaceIcon(icon, 'notes-document-menu-icon'),
-    element('span', { class: 'notes-document-menu-label' }, label),
-  ], onClick, 'ghost small notes-document-menu-item', { role: 'menuitem', ...attributes })
-}
-
-function noteMenuDivider() {
-  return element('div', { class: 'notes-document-menu-divider', role: 'separator' })
+  return renderDocumentMenu(node.name, [
+    [
+      ...(options.enhanced ? [{ label: '查找', icon: 'search', run: () => markdownEditorHandle?.openFind(), attributes: { 'data-note-find': '', 'aria-keyshortcuts': 'Control+F Meta+F' } }] : []),
+      ...(options.editable ? [{ label: '页面历史', icon: 'history', run: () => { void openNoteHistory(node) }, attributes: { 'data-note-history': '' } }] : []),
+    ],
+    [
+      { label: '下载', icon: 'download', run: event => { void downloadNoteFile(node, event.currentTarget) } },
+      { label: noteShareForNode(node.id) ? '管理分享' : '创建分享', icon: 'link', run: () => { void openNoteShare(node) } },
+      { label: '复制引用', icon: 'link', run: () => { void copyNoteReference(node) } },
+    ],
+    [
+      { label: '重命名', icon: 'rename', run: () => openRenameNoteNode(node) },
+      { label: '查看已分享', icon: 'outline', run: () => { void navigate('shares') } },
+    ],
+  ])
 }
 
 function renderNoteFileStatusbar(node) {
@@ -2767,6 +2773,7 @@ async function selectNoteNode(node, options = {}) {
   releaseNoteAsset()
   state.notes.selectedId = node.id
   state.notes.selectedNode = node
+  state.notes.browserOpen = false
   Object.assign(state.notes, { content: '', draft: '', dirty: false })
   state.notes.loadingNodeId = node.id
   renderShell()
@@ -4184,19 +4191,12 @@ function selectField(label, options, value) {
 }
 
 async function loadModelCatalog() {
-  if (state.modelCatalog !== null) return state.modelCatalog
   try {
-    const response = await fetch('/knowledge-control/v1/models', {
-      headers: { accept: 'application/json', 'x-dsh-knowledge-client': 'management-web' },
-    })
-    if (!response.ok) throw new Error(`HTTP ${response.status}`)
-    const payload = await response.json()
-    state.modelCatalog = Array.isArray(payload.providers) ? payload.providers : []
+    state.modelCatalog = await readModelCatalog()
   } catch (error) {
-    state.modelCatalog = []
-    showToast(`无法读取当前 DSH 的模型目录：${error instanceof Error ? error.message : String(error)}`, 'error')
+    showToast(`无法读取当前 DSH 的模型目录：${error.message}，重新打开可重试。`, 'error')
   }
-  return state.modelCatalog
+  return state.modelCatalog || []
 }
 
 function modelRouteFields(currentProvider, currentModel) {
@@ -4416,86 +4416,6 @@ function confirmDeleteToken(token) {
   } })
 }
 
-function openConfirm({ title, message, confirmLabel, danger, onConfirm }) {
-  return openModal({ title, body: element('p', {}, message), primaryLabel: confirmLabel, primaryVariant: danger ? 'danger' : 'primary', onPrimary: async () => { await onConfirm(); return true } })
-}
-
-function openSheet(options) {
-  return openModal({ ...options, presentation: 'sheet' })
-}
-
-function openModal({ title, description = '', body, primaryLabel, primaryVariant = 'primary', onPrimary, cancelLabel = '取消', presentation = 'modal', className = '', onClose }) {
-  const previouslyFocused = document.activeElement
-  const isSheet = presentation === 'sheet'
-  const backdrop = element('div', { class: `dialog-backdrop${isSheet ? ' sheet-backdrop' : ''}` })
-  const dialog = element('section', { class: `dialog${isSheet ? ' sheet' : ''} ${primaryLabel ? '' : 'narrow'} ${className}`.trim(), role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': 'dialog-title' })
-  let busy = false
-  let formDirty = false
-  let closed = false
-  const close = (explicit = false) => {
-    if (busy || closed) return
-    if (!explicit && formDirty) {
-      showToast('表单有未保存的修改，请先保存，或使用“取消”放弃修改。', 'error')
-      return
-    }
-    document.removeEventListener('keydown', onKeyDown)
-    closed = true
-    backdrop.remove()
-    onClose?.()
-    if (previouslyFocused instanceof HTMLElement) previouslyFocused.focus()
-  }
-  const closeButton = actionButton('×', () => close(), 'ghost', { 'aria-label': '关闭对话框' })
-  const cancel = actionButton(cancelLabel, () => close(true))
-  const primary = primaryLabel ? actionButton(primaryLabel, async () => {
-    if (busy) return
-    busy = true
-    primary.disabled = true
-    cancel.disabled = true
-    const original = primary.textContent
-    primary.textContent = '正在处理…'
-    try {
-      const shouldClose = await onPrimary()
-      busy = false
-      if (shouldClose !== false) close(true)
-      else { primary.disabled = false; cancel.disabled = false; primary.textContent = original }
-    } catch (error) {
-      busy = false
-      primary.disabled = false
-      cancel.disabled = false
-      primary.textContent = original
-      showToast(friendlyError(error), 'error')
-    }
-  }, primaryVariant) : null
-  const onKeyDown = (event) => {
-    if (event.key === 'Escape') { event.preventDefault(); close() }
-    if (event.key === 'Tab') trapFocus(event, dialog)
-  }
-  dialog.append(
-    element('header', { class: 'dialog-header' }, element('div', {}, element('h2', { id: 'dialog-title' }, title), description ? element('p', {}, description) : null), closeButton),
-    element('div', { class: 'dialog-body' }, body),
-    element('footer', { class: 'dialog-footer' }, cancel, primary),
-  )
-  backdrop.append(dialog)
-  backdrop.addEventListener('mousedown', (event) => { if (event.target === backdrop) close() })
-  if (body.matches?.('form') || body.querySelector?.('form')) {
-    body.addEventListener('input', () => { formDirty = true })
-    body.addEventListener('change', () => { formDirty = true })
-  }
-  document.body.append(backdrop)
-  document.addEventListener('keydown', onKeyDown)
-  window.setTimeout(() => (dialog.querySelector('input, textarea, select, button') || dialog).focus(), 0)
-  return { close, dialog }
-}
-
-function trapFocus(event, container) {
-  const focusable = [...container.querySelectorAll('button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])')]
-  if (!focusable.length) return
-  const first = focusable[0]
-  const last = focusable.at(-1)
-  if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus() }
-  else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus() }
-}
-
 function formatDate(value) {
   try { return new Intl.DateTimeFormat('zh-CN', { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(value)) } catch { return value }
 }

package/web/design-tokens.css

@@ -0,0 +1 @@
+:root{--font-ui:ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei UI", Arial, sans-serif;--font-reading:var(--font-ui);--font-mono:"SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;--bg:#ebebeb;--surface:#f4f4f4;--surface-raised:#fafafa;--surface-soft:#eeeeef;--surface-hover:rgb(118 118 128 / 9%);--dialog-surface:#f4f4f4;--menu-surface:rgb(232 234 236 / 98%);--menu-surface-solid:#e8eaec;--document-surface:rgb(218 222 226 / 32%);--selection-background:#b8c8d6;--selection-text:#17212b;--activity-surface:rgba(255, 255, 255, 0.14);--text:#1d1d1f;--text-secondary:#515154;--text-tertiary:#6e6e73;--border:rgb(60 60 67 / 14%);--border-strong:rgb(60 60 67 / 24%);--accent:#3a3a3c;--accent-hover:#1d1d1f;--accent-soft:#e2e2e5;--on-accent:#ffffff;--success:#248a3d;--success-soft:#e8f5eb;--warning:#c93400;--warning-soft:#fff1e8;--danger:#d70015;--danger-soft:#ffebed;--shadow:0 24px 64px rgb(0 0 0 / 20%);--knowledge-embedded-surface:rgba(255, 255, 255, 0.08);--knowledge-embedded-filter:saturate(.65) contrast(1.015) blur(24px);--knowledge-embedded-control:rgba(255, 255, 255, 0.27);}@media(prefers-color-scheme:dark){:root:not([data-color-scheme]){--bg:#101719;--surface:#182022;--surface-raised:#20292b;--surface-soft:rgb(184 204 205 / 6%);--surface-hover:rgb(105 182 186 / 9%);--dialog-surface:#20292b;--menu-surface:rgb(29 38 40 / 98%);--menu-surface-solid:#1d2628;--document-surface:rgb(130 138 146 / 6%);--selection-background:#455b68;--selection-text:#ffffff;--activity-surface:rgb(29 36 38 / 24%);--text:#e3eaeb;--text-secondary:#bbc9cc;--text-tertiary:#95a7ab;--border:rgb(184 204 205 / 10%);--border-strong:rgb(184 204 205 / 18%);--accent:#69b6ba;--accent-hover:#8aced0;--accent-soft:rgb(105 182 186 / 13%);--on-accent:#101819;--success:#30d158;--success-soft:rgb(48 209 88 / 13%);--warning:#ff9f0a;--warning-soft:rgb(255 159 10 / 13%);--danger:#ff453a;--danger-soft:rgb(255 69 58 / 14%);--shadow:0 28px 72px rgb(0 0 0 / 42%);--knowledge-embedded-surface:rgb(16 23 25 / 18%);--knowledge-embedded-filter:saturate(.55) contrast(1.02) blur(24px);--knowledge-embedded-control:rgb(39 50 53 / 72%);}}:root[data-color-scheme="dark"]{--bg:#101719;--surface:#182022;--surface-raised:#20292b;--surface-soft:rgb(184 204 205 / 6%);--surface-hover:rgb(105 182 186 / 9%);--dialog-surface:#20292b;--menu-surface:rgb(29 38 40 / 98%);--menu-surface-solid:#1d2628;--document-surface:rgb(130 138 146 / 6%);--selection-background:#455b68;--selection-text:#ffffff;--activity-surface:rgb(29 36 38 / 24%);--text:#e3eaeb;--text-secondary:#bbc9cc;--text-tertiary:#95a7ab;--border:rgb(184 204 205 / 10%);--border-strong:rgb(184 204 205 / 18%);--accent:#69b6ba;--accent-hover:#8aced0;--accent-soft:rgb(105 182 186 / 13%);--on-accent:#101819;--success:#30d158;--success-soft:rgb(48 209 88 / 13%);--warning:#ff9f0a;--warning-soft:rgb(255 159 10 / 13%);--danger:#ff453a;--danger-soft:rgb(255 69 58 / 14%);--shadow:0 28px 72px rgb(0 0 0 / 42%);--knowledge-embedded-surface:rgb(16 23 25 / 18%);--knowledge-embedded-filter:saturate(.55) contrast(1.02) blur(24px);--knowledge-embedded-control:rgb(39 50 53 / 72%);}

package/web/dialogs.js

@@ -0,0 +1,94 @@
+/** Shared modal lifecycle, keyboard handling and dirty-form protection. */
+export function createDialogPresenter({ element, actionButton, interfaceIcon, showToast, friendlyError }) {
+  let sequence = 0
+  const stack = []
+  function openConfirm({ title, message, confirmLabel, danger, onConfirm }) {
+    return openModal({ title, body: element('p', {}, message), primaryLabel: confirmLabel, primaryVariant: danger ? 'danger' : 'primary', onPrimary: async () => { await onConfirm(); return true } })
+  }
+
+  function openSheet(options) {
+    return openModal({ ...options, presentation: 'sheet' })
+  }
+
+  function openModal({ title, description = '', body, primaryLabel, primaryVariant = 'primary', onPrimary, cancelLabel = '取消', presentation = 'modal', className = '', onClose }) {
+    const previouslyFocused = document.activeElement
+    const isSheet = presentation === 'sheet'
+    const titleId = `knowledge-dialog-title-${++sequence}`
+    const backdrop = element('div', { class: `dialog-backdrop${isSheet ? ' sheet-backdrop' : ''}` })
+    const dialog = element('section', { class: `dialog${isSheet ? ' sheet' : ''} ${primaryLabel ? '' : 'narrow'} ${className}`.trim(), role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': titleId, tabindex: '-1' })
+    let busy = false
+    let formDirty = false
+    let closed = false
+    const close = (explicit = false) => {
+      if (busy || closed) return
+      if (!explicit && formDirty) {
+        showToast('表单有未保存的修改，请先保存，或使用“取消”放弃修改。', 'error')
+        return
+      }
+      document.removeEventListener('keydown', onKeyDown)
+      closed = true
+      stack.splice(stack.indexOf(dialog), 1)
+      backdrop.remove()
+      onClose?.()
+      if (previouslyFocused instanceof HTMLElement) previouslyFocused.focus()
+    }
+    const closeButton = actionButton(interfaceIcon('close'), () => close(), 'ghost', { 'aria-label': '关闭对话框' })
+    const cancel = actionButton(cancelLabel, () => close(true))
+    const primary = primaryLabel ? actionButton(primaryLabel, async () => {
+      if (busy) return
+      busy = true
+      primary.disabled = true
+      cancel.disabled = true
+      const original = primary.textContent
+      primary.textContent = '正在处理…'
+      try {
+        const shouldClose = await onPrimary()
+        busy = false
+        if (shouldClose !== false) close(true)
+        else { primary.disabled = false; cancel.disabled = false; primary.textContent = original }
+      } catch (error) {
+        busy = false
+        primary.disabled = false
+        cancel.disabled = false
+        primary.textContent = original
+        showToast(friendlyError(error), 'error')
+      }
+    }, primaryVariant) : null
+    const onKeyDown = (event) => {
+      if (stack.at(-1) !== dialog || event.defaultPrevented) return
+      if (event.key === 'Escape') { event.preventDefault(); close() }
+      if (event.key === 'Tab') trapFocus(event, dialog)
+    }
+    dialog.append(
+      element('header', { class: 'dialog-header' }, element('div', {}, element('h2', { id: titleId }, title), description ? element('p', {}, description) : null), closeButton),
+      element('div', { class: 'dialog-body' }, body),
+      element('footer', { class: 'dialog-footer' }, cancel, primary),
+    )
+    backdrop.append(dialog)
+    backdrop.addEventListener('mousedown', (event) => { if (event.target === backdrop) close() })
+    if (body.matches?.('form') || body.querySelector?.('form')) {
+      body.addEventListener('input', () => { formDirty = true })
+      body.addEventListener('change', () => { formDirty = true })
+    }
+    document.body.append(backdrop)
+    stack.push(dialog)
+    document.addEventListener('keydown', onKeyDown)
+    window.setTimeout(() => { if (!closed && stack.at(-1) === dialog) (focusableElements(dialog)[0] || dialog).focus() }, 0)
+    return { close, dialog }
+  }
+
+  function trapFocus(event, container) {
+    const focusable = focusableElements(container)
+    if (!focusable.length) return
+    const first = focusable[0]
+    const last = focusable.at(-1)
+    if (event.shiftKey && (document.activeElement === first || !container.contains(document.activeElement))) { event.preventDefault(); last.focus() }
+    else if (!event.shiftKey && (document.activeElement === last || !container.contains(document.activeElement))) { event.preventDefault(); first.focus() }
+  }
+
+  function focusableElements(container) {
+    return [...container.querySelectorAll('button, input, select, textarea, a[href], [tabindex]')]
+      .filter(node => !node.disabled && node.tabIndex >= 0 && !node.closest('[hidden], [inert], [aria-hidden="true"]') && node.getClientRects().length > 0)
+  }
+  return { openConfirm, openSheet, openModal }
+}