@lemoncat7/dsh-knowledge 2.3.3 → 2.3.6

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: '经验' }
@@ -35,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 = {}) {
@@ -335,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() {
@@ -939,6 +950,7 @@ async function loadTokens(signal) {
 }
 
 function renderShell() {
+  closeDocumentMenus()
   releaseNoteEditors()
   captureScrollPosition()
   const titles = {
@@ -962,15 +974,15 @@ 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),
           }),
@@ -1031,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) {
@@ -1068,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()
@@ -1734,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' },
@@ -2660,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) {
@@ -4202,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) {
@@ -4434,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 }
+}

package/web/document-actions.js

@@ -0,0 +1,68 @@
+/** Shared document overflow: one action list and keyboard model for every width. */
+export function createDocumentMenuPresenter({ element, actionButton, interfaceIcon }) {
+  const openMenus = new Set()
+  const closeMenus = () => { for (const close of [...openMenus]) close() }
+  function renderMenu(label, groups) {
+    const actions = groups.filter(group => group.length)
+    if (!actions.length) return null
+    let events
+    const details = element('details', { class: 'notes-document-more' })
+    const summary = element('summary', {
+      class: 'button ghost small', title: '更多操作', 'aria-label': `${label}的更多操作`,
+      'aria-haspopup': 'menu', 'aria-expanded': 'false',
+      onClick: event => { event.preventDefault(); setOpen(!details.open) },
+    }, interfaceIcon('more', 'notes-document-more-icon'))
+    const close = (restoreFocus = false) => {
+      details.open = false
+      summary.setAttribute('aria-expanded', 'false')
+      events?.abort()
+      events = undefined
+      openMenus.delete(close)
+      if (restoreFocus && summary.isConnected) summary.focus()
+    }
+    const menu = element('div', { class: 'notes-document-more-menu', role: 'menu', 'aria-label': `${label}的更多操作` },
+      actions.flatMap((group, index) => [
+        index ? element('div', { class: 'notes-document-menu-divider', role: 'separator' }) : null,
+        ...group.map(action => actionButton([
+          interfaceIcon(action.icon, 'notes-document-menu-icon'),
+          element('span', { class: 'notes-document-menu-label' }, action.label),
+        ], event => { close(true); action.run(event) }, `ghost small notes-document-menu-item${action.danger ? ' is-danger' : ''}`, {
+          role: 'menuitem', tabindex: '-1', ...action.attributes,
+        })),
+      ]),
+    )
+    const items = () => [...menu.querySelectorAll('[role="menuitem"]:not(:disabled)')]
+    const setOpen = (open, last = false) => {
+      if (!open) return close(true)
+      closeMenus()
+      details.open = true
+      summary.setAttribute('aria-expanded', 'true')
+      openMenus.add(close)
+      const bounds = summary.getBoundingClientRect()
+      menu.style.maxHeight = `${Math.max(100, window.innerHeight - bounds.bottom - 16)}px`
+      events = new AbortController()
+      const { signal } = events
+      document.addEventListener('pointerdown', event => { if (!details.contains(event.target)) close() }, { signal })
+      window.addEventListener('resize', () => close(), { signal, once: true })
+      const choices = items()
+      choices[last ? choices.length - 1 : 0]?.focus()
+    }
+    details.addEventListener('keydown', event => {
+      if (event.key === 'Escape' && details.open) { event.preventDefault(); event.stopPropagation(); close(true); return }
+      if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return
+      event.preventDefault()
+      if (!details.open) return setOpen(true, event.key === 'ArrowUp' || event.key === 'End')
+      const choices = items()
+      const index = choices.indexOf(document.activeElement)
+      const next = event.key === 'Home' ? 0 : event.key === 'End' ? choices.length - 1
+        : (index + (event.key === 'ArrowDown' ? 1 : -1) + choices.length) % choices.length
+      choices[next]?.focus()
+    })
+    details.addEventListener('focusout', event => {
+      if (event.relatedTarget && !details.contains(event.relatedTarget)) close()
+    })
+    details.append(summary, menu)
+    return details
+  }
+  return { renderMenu, closeMenus }
+}

package/web/index.html

@@ -10,6 +10,7 @@
     <meta name="dsh-knowledge-web" content="__DSH_KNOWLEDGE_WEB_PATH__">
     <meta name="dsh-knowledge-asset-version" content="__DSH_KNOWLEDGE_ASSET_VERSION__">
     <title>DSH 知识库</title>
+    <link rel="stylesheet" href="__DSH_KNOWLEDGE_WEB_PATH__/design-tokens.css?v=__DSH_KNOWLEDGE_ASSET_VERSION__">
     <link rel="stylesheet" href="__DSH_KNOWLEDGE_WEB_PATH__/styles.css?v=__DSH_KNOWLEDGE_ASSET_VERSION__">
     <script src="__DSH_KNOWLEDGE_WEB_PATH__/markdown-preview.js?v=__DSH_KNOWLEDGE_ASSET_VERSION__"></script>
     <script src="__DSH_KNOWLEDGE_WEB_PATH__/change-review.js?v=__DSH_KNOWLEDGE_ASSET_VERSION__"></script>

package/web/model-catalog.js

@@ -0,0 +1,22 @@
+/** Cache successful model discovery; share in-flight reads and allow retry after failure. */
+export function createModelCatalogLoader(request = fetch, ttlMs = 60000) {
+  let cached
+  let expires = 0
+  let pending
+  return function load() {
+    if (cached !== undefined && Date.now() < expires) return Promise.resolve(cached)
+    if (pending) return pending
+    pending = (async () => {
+      const response = await request('/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()
+      if (!Array.isArray(payload.providers)) throw new Error('模型目录返回了无效数据')
+      cached = payload.providers
+      expires = Date.now() + ttlMs
+      return cached
+    })().finally(() => { pending = undefined })
+    return pending
+  }
+}