@lemoncat7/dsh-knowledge 2.8.1 → 2.9.1

package/web/base-groups.js

@@ -0,0 +1,99 @@
+/** Display-only grouping. Knowledge contents, mounts and recall are untouched. */
+const nameCollator = new Intl.Collator('zh-CN', { numeric: true, sensitivity: 'base' })
+export const knowledgeBasePathLabel = base => `${base.group || '未分组'} / ${base.name}`
+export function sortKnowledgeBasesByGroup(bases) {
+  return [...bases].sort((a, b) => {
+    const left = a.group || '', right = b.group || ''
+    if (Boolean(left) !== Boolean(right)) return left ? -1 : 1
+    return nameCollator.compare(left, right) || nameCollator.compare(a.name, b.name) || String(a.id).localeCompare(String(b.id))
+  })
+}
+
+export function groupKnowledgeBases(bases) {
+  const groups = new Map()
+  for (const base of bases) {
+    const name = base.group || ''
+    if (!groups.has(name)) groups.set(name, [])
+    groups.get(name).push(base)
+  }
+  return [...groups].sort(([a], [b]) => !a ? 1 : !b ? -1 : a.localeCompare(b, 'zh-CN'))
+}
+
+export function createBaseGroups({ element, actionButton, interfaceIcon, openSheet, formField, api, getBases, refresh, showToast, storageKey }) {
+  let collapsed = new Set()
+  try {
+    const saved = JSON.parse(localStorage.getItem(storageKey) || '[]')
+    if (Array.isArray(saved)) collapsed = new Set(saved.filter(value => typeof value === 'string'))
+  } catch {}
+  const remember = () => { try { localStorage.setItem(storageKey, JSON.stringify([...collapsed])) } catch {} }
+
+  function render(bases, renderCard, searching = false, scope = 'active') {
+    return element('div', { class: 'base-groups' }, groupKnowledgeBases(bases).map(([name, members]) => {
+      const key = JSON.stringify([scope, name])
+      let expanded = searching || !collapsed.has(key)
+      const body = element('div', { class: 'base-grid base-group-body', id: `base-group-${scope}-${encodeURIComponent(name)}` })
+      const toggle = element('button', {
+        type: 'button', class: 'base-group-toggle', 'aria-expanded': String(expanded), 'aria-controls': body.id,
+        onClick: () => {
+          expanded = !expanded
+          if (expanded) collapsed.delete(key); else collapsed.add(key)
+          remember(); update()
+        },
+      }, interfaceIcon('chevron-right', 'base-group-chevron'),
+      element('span', { class: 'base-group-name', title: name || '未分组' }, name || '未分组'),
+      element('span', { class: 'summary-count' }, members.length))
+      const update = () => {
+        toggle.setAttribute('aria-expanded', String(expanded))
+        body.hidden = !expanded
+        // Closed groups do not mount card DOM or animation observers.
+        body.replaceChildren(...(expanded ? members.map(renderCard) : []))
+      }
+      update()
+      return element('section', { class: 'base-group', 'aria-label': name || '未分组' },
+        element('div', { class: 'base-group-heading' }, toggle,
+          name ? actionButton('重命名', () => edit(name), 'ghost small', { 'aria-label': `重命名分组 ${name}` }) : null), body)
+    }))
+  }
+
+  function edit(current) {
+    const renaming = typeof current === 'string'
+    const bases = getBases()
+    const name = formField('分组名称', 'input', current || '', { id: 'knowledge-group-name', required: true, maxlength: 64, placeholder: '例如：家里助手、工作、个人' })
+    name.wrapper.querySelector('label').htmlFor = name.input.id
+    const selection = new Map()
+    const error = element('p', { role: 'alert', class: 'base-group-error' })
+    const form = element('form', { class: 'base-group-form', onSubmit: event => event.preventDefault() }, name.wrapper)
+    if (!renaming) {
+      form.append(element('p', {}, '选择要归入这个分组的知识库；原有内容和挂载保持不变。'))
+      form.append(element('div', { class: 'base-group-picker' }, bases.map(base => {
+        const checkbox = element('input', { type: 'checkbox', value: base.id })
+        selection.set(base.id, checkbox)
+        return element('label', { class: 'check-option' }, checkbox,
+          element('span', {}, element('strong', {}, base.name), element('small', {}, `${base.group || '未分组'}${base.status === 'archived' ? ' · 已归档' : ''}`)))
+      })))
+    }
+    form.append(error)
+    openSheet({
+      title: renaming ? '重命名分组' : '新建分组',
+      description: '每个知识库属于一个分组；没有知识库的分组自动消失。',
+      body: form, primaryLabel: renaming ? '保存分组' : '创建分组',
+      onPrimary: async () => {
+        name.input.setCustomValidity(name.input.value.trim() ? '' : '请输入分组名称')
+        if (!form.reportValidity()) return false
+        const ids = renaming ? bases.filter(base => base.group === current).map(base => base.id)
+          : [...selection].filter(([, input]) => input.checked).map(([id]) => id)
+        error.textContent = ''
+        if (!ids.length) { error.textContent = '请至少选择一个知识库'; return false }
+        await api('knowledge-bases/group', { method: 'POST', body: { ids, group: name.input.value.trim() } })
+        collapsed.delete(JSON.stringify(['active', name.input.value.trim()]))
+        remember()
+        await refresh()
+        showToast(renaming ? '分组已更新；同名分组会合并显示。' : '知识库已分组。')
+        return true
+      },
+    })
+    name.input.addEventListener('input', () => name.input.setCustomValidity(''))
+    name.input.focus()
+  }
+  return { render, edit }
+}

package/web/styles.css

@@ -722,6 +722,32 @@ html,
 .knowledge-base-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
 .base-search { max-width: 560px; }
 .base-result-summary { margin-left: auto; color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }
+.base-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.base-groups { display: grid; gap: 18px; min-width: 0; }
+.base-group { min-width: 0; }
+.base-group-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--separator); }
+.base-group-toggle { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 8px 4px; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--text); cursor: pointer; text-align: left; font: inherit; font-weight: 600; }
+.base-group-toggle:hover { background: var(--material-control-hover); }
+.base-group-toggle:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 2px; }
+.base-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.base-group-chevron { flex: none; width: 16px; height: 16px; transition: transform 180ms ease; }
+.base-group-toggle[aria-expanded="true"] .base-group-chevron { transform: rotate(90deg); }
+.base-group-body[hidden] { display: none; }
+.base-group-form { display: grid; gap: 16px; min-width: 0; }
+.base-group-form p { margin: 0; color: var(--text-secondary); }
+.base-group-form .base-group-error { color: var(--danger); }
+.base-group-error:empty { display: none; }
+.mount-list-title .mount-base-path { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
+.base-group-picker { display: grid; gap: 8px; max-height: min(45dvh, 380px); overflow-y: auto; }
+.base-group-picker .check-option { min-width: 0; min-height: 44px; }
+.base-group-picker .check-option span { min-width: 0; overflow-wrap: anywhere; }
+@media (prefers-reduced-motion: reduce) { .base-group-chevron { transition: none; } }
+@media (max-width: 640px) {
+  .library-management > .section-heading { align-items: stretch; flex-direction: column; }
+  .base-heading-actions { width: 100%; }
+  .base-group-heading > .button { min-height: 44px; }
+  .knowledge-base-toolbar .base-search { flex: 0 0 auto; }
+}
 .base-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr));
@@ -778,7 +804,7 @@ html,
 .mount-manager-toolbar > .select { width: auto; min-width: 130px; }
 .mount-target-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--border); padding: 9px 14px; background: var(--surface-soft); color: var(--text-secondary); font-size: 12px; }
 .mount-target-line code { overflow: hidden; color: var(--text-tertiary); font: inherit; text-overflow: ellipsis; white-space: nowrap; }
-.mount-table { max-height: min(54vh, 620px); overflow: auto; }
+.mount-table { max-height: min(54vh, 620px); overflow: auto; contain: layout paint; }
 .mount-list-row { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--border); padding: 12px 14px; transition: background .15s ease; }
 .mount-list-row:last-child { border-bottom: 0; }
 .mount-list-row:hover { background: var(--surface-hover); }
@@ -1785,7 +1811,7 @@ html,
   .library-detail-actions { align-self: center; }
   .library-detail .note-workspace { height: calc(100dvh - 260px); }
   .knowledge-base-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
-  .base-search { max-width: none; }
+  .knowledge-base-toolbar .base-search { max-width: none; flex: 0 0 auto; }
   .base-result-summary { margin-left: 0; }
   .skeleton-grid { grid-template-columns: 1fr; }
   .skeleton-block { height: 96px; }
@@ -2035,6 +2061,40 @@ html,
   .dialog-body { padding-top: 14px; }
 }
 
+/* Management pages own one bounded content scroller. The translucent header
+   stays outside it, so rows never paint underneath the title. */
+.app-shell:is([data-view="bases"], [data-view="writeback"]) .main {
+  height: calc(100dvh - var(--chrome-inset) * 2);
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.app-shell:is([data-view="bases"], [data-view="writeback"]) .topbar {
+  position: relative;
+  flex: none;
+}
+.app-shell:is([data-view="bases"], [data-view="writeback"]) .page {
+  flex: 1 1 auto;
+  min-height: 0;
+  contain: layout paint;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  padding-bottom: max(20px, env(safe-area-inset-bottom));
+}
+.app-shell:is([data-view="bases"], [data-view="writeback"]) .view-stage {
+  min-height: 0;
+}
+.writeback-workspace .button[aria-pressed="true"] {
+  background: var(--material-control);
+  box-shadow: var(--shadow-control);
+  color: var(--text);
+}
+@media (max-width: 1120px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
+  .app-shell:is([data-view="bases"], [data-view="writeback"]) .main { height: 100dvh; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
 }

package/web/ui-primitives.js

@@ -47,6 +47,7 @@ export function paneToggleButton(pane, visible, onClick, label) {
 export function interfaceIcon(name, className = 'interface-icon') {
   const paths = {
     close: 'M6 6l12 12M18 6L6 18',
+    'chevron-right': 'M9 5l7 7-7 7',
     menu: 'M4 6h16M4 12h16M4 18h16',
     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',
     more: 'M5 12h.01M12 12h.01M19 12h.01',

package/web/writeback-workspace.js

@@ -3,6 +3,12 @@ import { subscribeWritebackChanges } from './writeback-live.js'
 export function createWritebackWorkspace({ element, actionButton, openConfirm, sessionId = '' }) {
   const labels = { queued: '排队中', running: '回写中', failed: '失败', completed: '已完成', cancelled: '已取消' }
   let disposed = false, timer, request, offset = 0, busy = false, previous = '', dirty = false
+  let failedOnly = false
+  const failedButton = actionButton('只看失败', () => {
+    failedOnly = !failedOnly
+    failedButton.setAttribute('aria-pressed', String(failedOnly))
+    offset = 0; previous = ''; void refresh()
+  }, 'small', { 'aria-pressed': 'false' })
   const message = element('p', { role: 'status' })
   const list = element('div', { class: 'writeback-job-list' })
   const page = element('span', {})
@@ -12,6 +18,7 @@ export function createWritebackWorkspace({ element, actionButton, openConfirm, s
   const root = element('section', { class: 'writeback-workspace' },
     element('p', {}, '本机回写队列。同一会话按顺序执行；网络中断会自动重试，连续失败可手动重试或取消。取消不会撤销已经写入的内容。'),
     element('div', { class: 'writeback-toolbar' }, filter, actionButton('筛选', () => { sessionId = filter.value.trim(); offset = 0; previous = ''; void refresh() }, 'small'), actionButton('刷新', () => { void refresh() }, 'ghost small')),
+    element('div', { class: 'writeback-toolbar' }, failedButton),
     message, list, element('div', { class: 'writeback-toolbar' }, previousButton, page, nextButton))
   async function fetchJson(params, method = 'GET', signal) {
     const response = await fetch(`/knowledge-control/v1/writeback-jobs?${params}`, { method, credentials: 'same-origin', headers: { 'x-dsh-knowledge-client': 'management-web' }, signal: signal ? AbortSignal.any([signal, AbortSignal.timeout(15000)]) : AbortSignal.timeout(15000) })
@@ -53,11 +60,12 @@ export function createWritebackWorkspace({ element, actionButton, openConfirm, s
     const controller = new AbortController()
     request = controller
     try {
-      const data = await fetchJson(new URLSearchParams({ sessionId, offset: String(offset) }), 'GET', controller.signal)
+      const data = await fetchJson(new URLSearchParams({ sessionId, offset: String(offset), ...(failedOnly ? { status: 'failed' } : {}) }), 'GET', controller.signal)
       if (disposed || request !== controller) return
+      if (offset > 0 && offset >= data.total) { offset = Math.max(0, Math.floor((data.total - 1) / 50) * 50); void refresh(preserveMessage); return }
       const fingerprint = JSON.stringify(data)
       if (fingerprint !== previous) {
-        list.replaceChildren(...(data.items.length ? data.items.map(renderJob) : [element('p', {}, '没有回写任务')]))
+        list.replaceChildren(...(data.items.length ? data.items.map(renderJob) : [element('p', {}, failedOnly ? '当前范围没有失败的回写任务' : '没有回写任务')]))
         previous = fingerprint
       }
       page.textContent = `共 ${data.total} 条 · 第 ${Math.floor(offset / 50) + 1} 页`