@lemoncat7/dsh-knowledge 2.0.0 → 2.1.1

package/web/app.js

@@ -6,7 +6,7 @@ const HOST_THEME_MESSAGE = '@lemoncat7/dsh-knowledge/host-theme'
 const HOST_THEME_READY_MESSAGE = '@lemoncat7/dsh-knowledge/host-theme-ready'
 const HOST_THEME_PROTOCOL_VERSION = 1
 const HOST_THEME_COLOR_TOKENS = new Set([
-  '--bg', '--surface', '--surface-raised', '--surface-soft', '--surface-hover',
+  '--bg', '--surface', '--surface-raised', '--surface-soft', '--surface-hover', '--dialog-surface',
   '--text', '--text-secondary', '--text-tertiary', '--border', '--border-strong',
   '--accent', '--accent-hover', '--accent-soft', '--on-accent',
   '--success', '--success-soft', '--warning', '--warning-soft', '--danger', '--danger-soft',
@@ -138,8 +138,8 @@ function installHostThemeBridge() {
         else if (HOST_THEME_STYLE_TOKENS.has(name) && CSS.supports('box-shadow', value)) root.style.setProperty(name, value)
       }
       root.dataset.dshHostTheme = 'true'
+      root.dataset.colorScheme = message.colorScheme
       root.style.colorScheme = message.colorScheme
-      root.style.setProperty('--dialog-surface', root.style.getPropertyValue('--surface-raised') || root.style.getPropertyValue('--surface'))
       document.querySelector('meta[name="color-scheme"]')?.setAttribute('content', message.colorScheme)
       const background = root.style.getPropertyValue('--bg')
       if (background) document.querySelector('meta[name="theme-color"]')?.setAttribute('content', background)
@@ -242,6 +242,10 @@ function element(tag, attributes = {}, ...children) {
   return node
 }
 
+function refreshWorkspaceEffects(root = document) {
+  window.DshKnowledgeEffects?.refresh(root)
+}
+
 function actionButton(label, onClick, variant = '', attributes = {}) {
   return element('button', { type: 'button', class: `button ${variant}`.trim(), onClick, ...attributes }, label)
 }
@@ -434,6 +438,7 @@ function renderLogin(message = '') {
     element('p', {}, '管理对话中沉淀的长期知识与 AI 提取候选。'),
     form,
   )))
+  refreshWorkspaceEffects(app)
 }
 
 function signOut() {
@@ -1004,6 +1009,11 @@ function renderShell() {
   },
     renderSidebar(),
     renderAppSidebarResizer(),
+    state.menuOpen ? element('button', {
+      type: 'button', class: 'app-sidebar-scrim',
+      'aria-label': '关闭导航菜单',
+      onClick: () => { state.menuOpen = false; renderShell() },
+    }) : null,
     element('main', { class: 'main' },
       element('header', { class: 'topbar' },
         element('div', { class: 'topbar-title' },
@@ -1031,10 +1041,9 @@ function renderShell() {
       element('div', { class: 'page' }, element('div', { class: 'view-stage', 'data-view-stage': state.view }, renderCurrentView())),
     ),
   )
-  if (state.menuOpen) shell.addEventListener('click', (event) => {
-    if (event.target === shell) { state.menuOpen = false; renderShell() }
-  })
   app.replaceChildren(shell)
+  applySidebarVisibility(shell, state.documentView.sidebarHidden)
+  refreshWorkspaceEffects(shell)
   restoreScrollPosition(currentScrollState())
 }
 
@@ -1100,7 +1109,37 @@ function setSidebarWidth(width, shell, handle) {
 function setSidebarHidden(hidden) {
   state.documentView.sidebarHidden = hidden
   saveDocumentLayout()
-  renderShell()
+  const shell = app.querySelector('.app-shell')
+  if (shell) applySidebarVisibility(shell, hidden)
+}
+
+function applySidebarVisibility(shell, hidden) {
+  shell.dataset.sidebarHidden = String(hidden)
+  const sidebar = shell.querySelector(':scope > .sidebar')
+  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 sidebarUnavailable = compact ? !state.menuOpen : hidden
+  sidebar?.toggleAttribute('inert', sidebarUnavailable)
+  resizer?.toggleAttribute('inert', hidden)
+  main?.toggleAttribute('inert', compact && state.menuOpen)
+  if (sidebar) {
+    if (sidebarUnavailable) sidebar.setAttribute('aria-hidden', 'true')
+    else sidebar.removeAttribute('aria-hidden')
+  }
+  if (resizer) {
+    resizer.tabIndex = hidden ? -1 : 0
+    if (hidden) resizer.setAttribute('aria-hidden', 'true')
+    else resizer.removeAttribute('aria-hidden')
+  }
+  if (toggle) {
+    const visible = !hidden
+    const action = `${visible ? '隐藏' : '显示'}主导航栏`
+    toggle.setAttribute('aria-pressed', String(visible))
+    toggle.setAttribute('aria-label', action)
+    toggle.title = action
+  }
 }
 
 function renderSidebar() {
@@ -1388,7 +1427,10 @@ 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' : ''}` },
+  return element('article', {
+    class: `base-card${archived ? ' is-archived' : ''}`,
+    'data-knowledge-motion-key': `knowledge-library:${base.id}`,
+  },
     element('div', { class: 'base-card-header' },
       element('div', { class: 'base-card-identity' },
         element('span', { class: 'base-symbol', 'aria-hidden': 'true' }, base.name.trim().slice(0, 1).toLocaleUpperCase() || 'K'),
@@ -1520,7 +1562,11 @@ function renderMountListRow(base, view, targetKind, targetId) {
     },
   })
   const modelLabel = writebackRouteLabel(base)
-  return element('article', { class: `mount-list-row${selected ? ' is-selected' : ''}`, role: 'listitem' },
+  return element('article', {
+    class: `mount-list-row${selected ? ' is-selected' : ''}`,
+    role: 'listitem',
+    'data-knowledge-motion-key': `knowledge-mount:${targetKind}:${base.id}`,
+  },
     element('label', { class: 'mount-select' }, checkbox, element('span', { class: 'visually-hidden' }, `选择 ${base.name}`)),
     element('div', { class: 'mount-list-main' },
       element('div', { class: 'mount-list-title' }, element('strong', {}, base.name), badge(view.statusLabel, view.statusVariant), badge(modelLabel)),
@@ -1591,9 +1637,12 @@ function renderDocumentWorkspace(workspace, options = {}) {
     const expanded = view.expandedBases.has(base.id) || Boolean(query)
     const page = documentPageState(workspace, base.id)
     const documents = (query ? view.searchResults : workspaceDocuments).filter(document => document.knowledgeBaseId === base.id)
-    return element('section', { class: 'note-tree-group', 'data-expanded': String(expanded) },
+    return element('section', {
+      class: 'note-tree-group', 'data-expanded': String(expanded),
+    },
       element('button', {
         type: 'button', class: 'note-tree-base', 'aria-expanded': String(expanded),
+        'data-knowledge-motion-key': `knowledge-base:${workspace.kind}:${base.id}`,
         onClick: () => {
           if (query) { view.knowledgeBaseId = base.id; return renderShell() }
           void toggleDocumentBase(workspace, base.id)
@@ -1610,6 +1659,8 @@ function renderDocumentWorkspace(workspace, options = {}) {
           actionButton('重试', () => { void loadDocumentPage(workspace, base.id, { reset: true }).then(renderShell) }, 'ghost small')) : null,
         documents.map(document => element('button', {
           type: 'button', class: 'note-tree-document', 'aria-current': document.id === view.documentId ? 'page' : undefined,
+          'data-document-id': document.id,
+          'data-knowledge-motion-key': `knowledge-document:${workspace.kind}:${document.id}`,
           onClick: () => { view.knowledgeBaseId = base.id; void selectDocument(workspace, document.id) },
         }, element('span', { class: 'tree-document-icon', 'aria-hidden': 'true' }), element('span', { class: 'tree-document-copy' },
           element('strong', {}, document.title), element('small', {}, document.relPath)),
@@ -2035,6 +2086,7 @@ function renderNoteTreeBranch(parentId, depth = 0) {
     const row = element('div', {
       class: 'notes-tree-item', 'data-kind': node.kind, 'data-selected': String(selected),
       'data-note-id': node.id,
+      'data-knowledge-motion-key': `note:${node.id}`,
       draggable: 'true',
       onDragStart: event => {
         event.dataTransfer.effectAllowed = 'move'
@@ -2074,7 +2126,8 @@ function renderNoteTreeBranch(parentId, depth = 0) {
 function renderNoteSearchResults() {
   if (!state.notes.searchResults.length) return element('div', { class: 'notes-tree-empty' }, '没有匹配的笔记文档。')
   return element('div', { class: 'notes-search-results' }, state.notes.searchResults.map(node => element('button', {
-    type: 'button', class: 'notes-search-row', onClick: () => { void selectNoteNode(node) },
+    type: 'button', class: 'notes-search-row', 'data-knowledge-motion-key': `note-search:${node.id}`,
+    onClick: () => { void selectNoteNode(node) },
   }, renderNoteIcon(node), element('span', {}, element('strong', {}, node.name), element('small', {}, noteKindLabel(node))))))
 }
 
@@ -3774,6 +3827,7 @@ function openModal({ title, description = '', body, primaryLabel, primaryVariant
     document.removeEventListener('keydown', onKeyDown)
     closed = true
     backdrop.remove()
+    refreshWorkspaceEffects()
     onClose?.()
     if (previouslyFocused instanceof HTMLElement) previouslyFocused.focus()
   }
@@ -3815,6 +3869,7 @@ function openModal({ title, description = '', body, primaryLabel, primaryVariant
     body.addEventListener('change', () => { formDirty = true })
   }
   document.body.append(backdrop)
+  refreshWorkspaceEffects(backdrop)
   document.addEventListener('keydown', onKeyDown)
   window.setTimeout(() => (dialog.querySelector('input, textarea, select, button') || dialog).focus(), 0)
   return { close, dialog }

package/web/index.html

@@ -13,6 +13,7 @@
     <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>
+    <script src="__DSH_KNOWLEDGE_WEB_PATH__/workspace-effects.js?v=__DSH_KNOWLEDGE_ASSET_VERSION__"></script>
     <script type="module" src="__DSH_KNOWLEDGE_WEB_PATH__/app.js?v=__DSH_KNOWLEDGE_ASSET_VERSION__"></script>
   </head>
   <body>