@lemoncat7/dsh-knowledge 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemoncat7/dsh-knowledge",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Local and remote knowledge bases for DeepSeek Harness, with scoped recall, controlled write-back, and a Web management console",
   "keywords": [
     "deepseek-harness",

package/web/app.js

@@ -1344,6 +1344,14 @@ function renderMarkdownPreview(markdown) {
   if (!markdown.trim()) return element('div', { class: 'markdown-preview is-empty', role: 'document' }, '暂无正文')
   const preview = element('div', { class: 'markdown-preview', role: 'document' })
   preview.innerHTML = window.DshKnowledgeMarkdown.renderMarkdown(markdown)
+  preview.querySelectorAll('table').forEach(table => {
+    const scroller = element('div', {
+      class: 'markdown-table-scroll', role: 'region', tabindex: '0',
+      'aria-label': '表格内容，可横向滚动',
+    })
+    table.replaceWith(scroller)
+    scroller.append(table)
+  })
   return preview
 }
 

package/web/styles.css

@@ -171,6 +171,7 @@ html,
 .note-tree,
 .note-editor-scroll,
 .markdown-preview pre,
+.markdown-table-scroll,
 .candidate-comparison pre,
 .dialog-body,
 .textarea {
@@ -178,16 +179,16 @@ html,
   scrollbar-color: var(--scrollbar-thumb) transparent;
 }
 
-:where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .candidate-comparison pre, .dialog-body, .textarea)::-webkit-scrollbar {
+:where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .candidate-comparison pre, .dialog-body, .textarea)::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 
-:where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .candidate-comparison pre, .dialog-body, .textarea)::-webkit-scrollbar-track {
+:where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .candidate-comparison pre, .dialog-body, .textarea)::-webkit-scrollbar-track {
   background: transparent;
 }
 
-:where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .candidate-comparison pre, .dialog-body, .textarea)::-webkit-scrollbar-thumb {
+:where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .candidate-comparison pre, .dialog-body, .textarea)::-webkit-scrollbar-thumb {
   min-width: 28px;
   min-height: 28px;
   border: 2px solid transparent;
@@ -196,7 +197,7 @@ html,
   background-clip: padding-box;
 }
 
-:where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .candidate-comparison pre, .dialog-body, .textarea)::-webkit-scrollbar-thumb:hover {
+:where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .candidate-comparison pre, .dialog-body, .textarea)::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover);
   background-clip: padding-box;
 }
@@ -713,7 +714,15 @@ html,
 .note-tree-new { min-height: 30px; gap: 7px; border-radius: 7px; padding: 4px 8px; color: var(--text-tertiary); font-size: 11px; }
 .note-tree-footer { border-top: 1px solid var(--border); padding: 8px 11px; }
 .note-tree-empty { padding: 28px 12px; color: var(--text-tertiary); font-size: 12px; text-align: center; }
-.note-editor { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--surface); }
+.note-editor {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  background: var(--surface);
+  container-name: note-editor;
+  container-type: inline-size;
+}
 .note-editor-empty { place-items: center; display: grid; padding: 32px; }
 .note-empty-content { max-width: 360px; text-align: center; }
 .note-empty-content h3 { margin: 16px 0 5px; font-size: 17px; }
@@ -722,7 +731,7 @@ html,
 .note-editor-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); padding: 9px 14px 9px 20px; }
 .note-breadcrumb { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--text-tertiary); font-size: 11px; white-space: nowrap; }
 .note-breadcrumb strong { overflow: hidden; color: var(--text-secondary); font-weight: 560; text-overflow: ellipsis; }
-.note-editor-actions { display: flex; align-items: center; gap: 6px; }
+.note-editor-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
 .editor-save-status { margin-right: 4px; color: var(--text-tertiary); font-size: 10px; white-space: nowrap; }
 .note-mode-switch { display: inline-flex; gap: 2px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; background: var(--surface-soft); }
 .note-mode-switch button { min-width: 48px; min-height: 28px; border: 0; border-radius: 6px; padding: 4px 9px; background: transparent; color: var(--text-tertiary); font-size: 11px; font-weight: 600; }
@@ -747,6 +756,7 @@ html,
 .document-finalized-banner small { color: var(--text-tertiary); white-space: nowrap; }
 .note-paper {
   width: 100%;
+  min-width: 0;
   min-height: 100%;
   margin: 0;
   padding: clamp(34px, 5cqi, 72px) max(clamp(24px, 6cqi, 84px), calc((100% - 1120px) / 2)) 90px;
@@ -757,7 +767,7 @@ html,
 .note-document-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 14px 0 30px; color: var(--text-tertiary); font-size: 10px; }
 .note-body-editor { width: 100%; min-height: 420px; border: 0; padding: 0 0 80px; resize: none; overflow: hidden; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 15px; line-height: 1.82; outline: none; }
 .note-body-editor::placeholder { color: color-mix(in srgb, var(--text-tertiary) 70%, transparent); }
-.markdown-preview { min-height: 420px; padding-bottom: 80px; color: var(--text-secondary); font-size: 15px; line-height: 1.78; overflow-wrap: anywhere; }
+.markdown-preview { min-width: 0; max-width: 100%; min-height: 420px; padding-bottom: 80px; color: var(--text-secondary); font-size: 15px; line-height: 1.78; overflow-wrap: anywhere; }
 .markdown-preview.is-empty { color: var(--text-tertiary); }
 .markdown-preview > :first-child { margin-top: 0; }
 .markdown-preview > :last-child { margin-bottom: 0; }
@@ -774,10 +784,23 @@ html,
 .markdown-preview blockquote { border-left: 3px solid color-mix(in srgb, var(--accent) 35%, var(--border)); padding: .1em 0 .1em 1em; color: var(--text-tertiary); }
 .markdown-preview code, .markdown-preview pre { font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
 .markdown-preview :not(pre) > code { border: 1px solid var(--border); border-radius: 5px; padding: .12em .35em; background: var(--surface-soft); color: var(--text); font-size: .9em; }
-.markdown-preview pre { overflow: auto; margin: 1.15em 0; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--surface-soft); color: var(--text); font-size: 13px; line-height: 1.65; tab-size: 2; }
+.markdown-preview pre { max-width: 100%; overflow: auto; margin: 1.15em 0; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--surface-soft); color: var(--text); font-size: 13px; line-height: 1.65; tab-size: 2; }
 .markdown-preview pre code { font: inherit; }
-.markdown-preview table { width: 100%; margin: 1.15em 0; border-collapse: collapse; font-size: 13px; }
+.markdown-table-scroll {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  margin: 1.15em 0;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overscroll-behavior-inline: contain;
+  touch-action: pan-x pan-y;
+  -webkit-overflow-scrolling: touch;
+}
+.markdown-table-scroll:focus-visible { outline-offset: 2px; }
+.markdown-preview table { width: max-content; min-width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; }
 .markdown-preview th, .markdown-preview td { border-bottom: 1px solid var(--border); padding: 9px 11px; text-align: left; vertical-align: top; }
+.markdown-preview tbody tr:last-child td { border-bottom: 0; }
 .markdown-preview th { color: var(--text); font-weight: 650; }
 .markdown-preview hr { height: 1px; margin: 2em 0; border: 0; background: var(--border); }
 .markdown-preview img { max-width: 100%; height: auto; border-radius: 10px; }
@@ -802,6 +825,32 @@ html,
 .note-tags-field input { width: min(100%, 360px); }
 .note-format-hint { margin-left: auto; color: var(--text-tertiary); font-size: 9px; white-space: nowrap; }
 
+@container note-editor (max-width: 700px) {
+  .note-editor-toolbar {
+    min-height: 0;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: stretch;
+    gap: 7px;
+    padding: 9px 12px;
+  }
+
+  .note-editor-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .note-mode-switch { margin-right: auto; }
+  .editor-save-status { margin-left: auto; }
+}
+
+@container note-editor (max-width: 480px) {
+  .note-breadcrumb { display: none; }
+  .note-mode-switch { flex: 1 1 112px; }
+  .note-mode-switch button { min-width: 0; flex: 1; }
+  .note-editor-actions > .button { flex: 1 1 auto; }
+}
+
 .list { display: grid; gap: 8px; }
 .list-row {
   min-width: 0;
@@ -1039,10 +1088,6 @@ html,
   .note-editor { grid-column: 1; }
   .note-tree-header { padding-left: 11px; }
   .note-tree-header span, .tree-document-copy small, .tree-count { display: none; }
-  .note-editor-toolbar { align-items: flex-start; padding: 8px 10px 8px 14px; }
-  .note-breadcrumb { display: none; }
-  .note-editor-actions { width: 100%; justify-content: flex-end; }
-  .note-mode-switch { margin-right: auto; }
   .note-paper { padding: 32px 24px 60px; }
   .document-finalized-banner { grid-template-columns: 1fr; margin: 12px; }
   .document-finalized-banner p { grid-column: 1; }