@lemoncat7/dsh-knowledge 2.8.0 → 2.9.0

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));
@@ -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; }

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',