From d5b1050a8678f3415670f3a520d1df59514b39aa Mon Sep 17 00:00:00 2001 From: KiriAky 107 Date: Sat, 5 Sep 2026 18:42:14 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat(frontend):=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=AF=BC=E5=85=A5=E4=B8=8E=E6=89=8B=E5=B8=90?= =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E5=8C=BA=E5=B9=B6=E4=BF=AE=E5=A4=8D=20Mermai?= =?UTF-8?q?d=20=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 39 ++++ frontend/package.json | 1 + frontend/pnpm-lock.yaml | 19 +- .../src/assets/themes/paper-moments.theme | 221 ++++++++++++++++++ .../features/editor/VisualMarkdownEditor.vue | 16 +- .../features/editor/codeBlockLabels.spec.ts | 18 ++ .../src/features/editor/codeBlockLabels.ts | 11 + .../features/editor/mermaidPreview.spec.ts | 37 +++ .../src/features/editor/mermaidPreview.ts | 39 ++++ .../features/themes/CommunityThemePreview.vue | 7 +- .../src/features/themes/ThemesView.spec.ts | 54 ++++- frontend/src/features/themes/ThemesView.vue | 117 +++++++--- frontend/src/services/themeImport.spec.ts | 34 +++ frontend/src/services/themePackageService.ts | 138 +++++++---- 14 files changed, 655 insertions(+), 96 deletions(-) create mode 100644 frontend/src/assets/themes/paper-moments.theme create mode 100644 frontend/src/features/editor/codeBlockLabels.spec.ts create mode 100644 frontend/src/features/editor/codeBlockLabels.ts create mode 100644 frontend/src/features/editor/mermaidPreview.spec.ts create mode 100644 frontend/src/features/editor/mermaidPreview.ts create mode 100644 frontend/src/services/themeImport.spec.ts diff --git a/README.md b/README.md index 3e555c2..641878a 100644 --- a/README.md +++ b/README.md @@ -134,3 +134,42 @@ pnpm build - 前端不直接访问 SQLite 或厂商模型协议；持久数据通过 FastAPI 服务读写。 - 接口或数据结构变化时，同一提交同步更新前后端类型、契约和开发说明。 - 当前行为以代码、测试和运行中的 `/openapi.json` 为准；规划能力必须在文档中明确标注。 + +## 主题包与仓库发布（临时规范） + +主题页支持本地文件及 HTTP(S) 文件直链导入。两种入口均先解析、校验并展示清单和 CSS，用户点击安装后才写入本地存储。安装不会自动启用主题。 + +### 单文件 + +使用 UTF-8 编码，扩展名 `.theme`、`.yaml` 或 `.yml`。内容为 YAML 清单、一行 `---`、完整 CSS。可参考 `frontend/src/assets/themes/paper-moments.theme`。 + +### ZIP + +一个 ZIP 只包含一个主题。清单命名为 `theme.yaml`、`theme.yml`、`manifest.yaml` 或 `manifest.yml`，可以放在顶层，也可以放在仓库压缩包的子目录中。 + +```text +my-theme/ + theme.yaml + styles/ + theme.css +``` + +```yaml +theme_id: my-theme +name: My Theme +version: 1.0.0 +author: your-name +min_app_version: 0.2.0 +is_dark: false +css_entry: styles/theme.css +``` + +`css_entry` 相对于清单目录解析，不允许绝对路径、反斜杠及 `..`。CSS 应以 `[data-theme="my-theme"]` 限定主题样式。也支持仅包含一个 `.theme` 文件的 ZIP。 + +目前安装持久化的是清单和 CSS，不会托管 ZIP 内的图片、字体等资源；需要这些资源时请将它们内嵌为 CSS data URL。禁止 `@import` 和脚本表达式。 + +### URL 与社区仓库 + +发布主题仓库时可提供原始 `.theme` 文件链接或 ZIP 发布附件直链，不要使用仓库 HTML 浏览页面地址。下载请求不携带 Cookie 或 HTTP 登录信息，服务器需允许应用来源的 CORS 请求；暂不支持私有仓库认证。 + +下载和本地文件限制为 5 MB；ZIP 解压总大小限制为 10 MB，最多 100 个条目。URL 下载超时为 30 秒。取消导入会取消下载，过期请求不会替换当前待安装主题。更新时递增清单版本号，并保持 `theme_id` 稳定。 diff --git a/frontend/package.json b/frontend/package.json index 76a1adf..ffbaf5a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -35,6 +35,7 @@ "@vueuse/core": "^14.0.0", "codemirror": "^6.0.0", "dompurify": "^3.4.14", + "fflate": "^0.8.3", "marked": "^15.0.0", "mermaid": "^11.17.2", "pinia": "^4.0.0", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 9e942b1..c648d1c 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -80,6 +80,9 @@ importers: dompurify: specifier: ^3.4.14 version: 3.4.14 + fflate: + specifier: ^0.8.3 + version: 0.8.3 marked: specifier: ^15.0.0 version: 15.0.12 @@ -954,11 +957,6 @@ packages: '@volar/typescript@2.4.15': resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==} - peerDependencies: - typescript: '*' - peerDependenciesMeta: - typescript: - optional: true '@vue-macros/common@3.1.4': resolution: {integrity: sha512-/5Fv+6DgIcM9ajY05ZmKBv+LMX1M9A0X+IUwDRVdt67ciw8OV9bvG2r34p3RiEadlsQybjhKPRKNXDC8Bp23cw==} @@ -1392,6 +1390,9 @@ packages: picomatch: optional: true + fflate@0.8.3: + resolution: {integrity: sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==} + fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -3310,13 +3311,11 @@ snapshots: '@volar/source-map@2.4.15': {} - '@volar/typescript@2.4.15(typescript@5.9.3)': + '@volar/typescript@2.4.15': dependencies: '@volar/language-core': 2.4.15 path-browserify: 1.0.1 vscode-uri: 3.2.0 - optionalDependencies: - typescript: 5.9.3 '@vue-macros/common@3.1.4(vue@3.5.42(typescript@5.9.3))': dependencies: @@ -3805,6 +3804,8 @@ snapshots: optionalDependencies: picomatch: 4.0.7 + fflate@0.8.3: {} + fsevents@2.3.3: optional: true @@ -4780,7 +4781,7 @@ snapshots: vue-tsc@2.2.12(typescript@5.9.3): dependencies: - '@volar/typescript': 2.4.15(typescript@5.9.3) + '@volar/typescript': 2.4.15 '@vue/language-core': 2.2.12(typescript@5.9.3) typescript: 5.9.3 diff --git a/frontend/src/assets/themes/paper-moments.theme b/frontend/src/assets/themes/paper-moments.theme new file mode 100644 index 0000000..109426b --- /dev/null +++ b/frontend/src/assets/themes/paper-moments.theme @@ -0,0 +1,221 @@ +theme_id: paper-moments +name: 纸间时光 · Paper Moments +version: 1.2.0 +author: NotesAgent +description: 奶油纸张、手帐虚线与粉蓝胶带，把每天的灵感好好收藏。 +min_app_version: 0.2.0 +is_dark: false +css_entry: theme.css +license: MIT +--- +[data-theme="paper-moments"] { + color-scheme: light; + --color-background-primary: #faf7ee; + --color-background-secondary: #f3eee3; + --color-background-tertiary: #ece5d7; + --color-background-hover: #f1e5da; + --color-background-active: #ecdbd2; + --color-background-overlay: rgba(65, 55, 45, .35); + --color-surface-primary: #fffdf5; + --color-surface-secondary: #f7f1e5; + --color-surface-elevated: #fffdf7; + --color-text-primary: #493f35; + --color-text-secondary: #6e6053; + --color-text-tertiary: #7d6b5e; + --color-text-inverse: #fffdf5; + --color-text-link: #875343; + --color-text-disabled: #9c9081; + --color-accent-primary: #875343; + --color-accent-primary-hover: #704334; + --color-accent-primary-active: #5e382b; + --color-accent-secondary: #a77a67; + --color-accent-soft: #f3e1d8; + --color-accent-soft-hover: #ecd3c7; + --color-border-default: #b5a693; + --color-border-subtle: #ded5c5; + --color-border-focus: #875343; + --color-border-disabled: #e2dacc; + --color-success: #526849; + --color-success-soft: #e5ecd9; + --color-warning: #806323; + --color-warning-soft: #faf0cb; + --color-error: #a0423c; + --color-error-soft: #f8e2dc; + --color-info: #456671; + --color-info-soft: #e1eef0; + --color-markdown-grid: #ded5c5; + --color-markdown-marker: #a77a67; + --color-markdown-table-header: #eee7d7; + --shadow-sm: 2px 3px 0 #e5ded0; + --shadow-md: 3px 4px 0 #dae5df, 6px 7px 0 #f0d8cf; + --shadow-lg: 4px 5px 0 #dae5df, 8px 9px 0 #f0d8cf; + --shadow-xl: 5px 6px 0 #dae5df, 10px 11px 0 #f0d8cf, 0 18px 42px #493f3520; +} + +[data-theme="paper-moments"] body, +[data-theme="paper-moments"] .feature-page, +[data-theme="paper-moments"] .main-content { + background-color: var(--color-background-primary); + background-image: radial-gradient(#b5a69350 .8px, transparent .8px); + background-size: 20px 20px; +} + +[data-theme="paper-moments"] .feature-header { + flex-wrap: wrap; + position: relative; + padding: 24px; + margin-top: 12px; + border: 1px solid #685949; + outline: 1px dashed #b5a693; + outline-offset: -8px; + border-radius: 12px 5px 12px 5px; + background: #fffdf5; + box-shadow: var(--shadow-md); +} + +[data-theme="paper-moments"] .feature-header::before, +[data-theme="paper-moments"] .editor-preview::before { + content: ''; + position: absolute; + top: -10px; + left: 42%; + width: 86px; + height: 22px; + background: repeating-linear-gradient(45deg, #c5dfe0b0 0 8px, #daeceba0 8px 16px); + transform: rotate(-3deg); + pointer-events: none; +} + +[data-theme="paper-moments"] .feature-header h1, +[data-theme="paper-moments"] .panel-title, +[data-theme="paper-moments"] .preview-heading h3 { + color: #875343; + font-family: Georgia, 'Noto Serif SC', 'Songti SC', SimSun, serif; + letter-spacing: .04em; +} + +[data-theme="paper-moments"] .panel, +[data-theme="paper-moments"] .item-card { + border-color: #b5a693; + border-radius: 8px; + box-shadow: var(--shadow-sm); +} + +[data-theme="paper-moments"] .theme-card:nth-child(3n + 1) { background: #f8e9e3; } +[data-theme="paper-moments"] .theme-card:nth-child(3n + 2) { background: #e8f0f0; } +[data-theme="paper-moments"] .theme-card:nth-child(3n) { background: #fbf3d8; } + +[data-theme="paper-moments"] .editor-preview { + position: relative; + border: 1px solid #685949; + border-radius: 4px 14px 4px 10px; + background-color: #fffef8; + background-image: linear-gradient(90deg, transparent 20px, #e9cfc780 20px 22px, transparent 22px), repeating-linear-gradient(transparent 0 31px, #b6c7bd55 31px 32px); + box-shadow: 4px 5px 0 #e3e9d7; +} + +[data-theme="paper-moments"] .editor-preview::before { + background: repeating-linear-gradient(45deg, #e7bcb3b0 0 8px, #f2d4cba0 8px 16px); +} + +[data-theme="paper-moments"] .modal { border-color: #685949; border-radius: 12px; } +[data-theme="paper-moments"] .upload-area { background: #fbf6e7; } +[data-theme="paper-moments"] .button-secondary { background: #fff9e5; } + +[data-theme="paper-moments"] .workspace-view, +[data-theme="paper-moments"] .visual-editor { + background: radial-gradient(#b5a69355 .8px, transparent .8px) 0 0 / 20px 20px #f3eee3; +} +[data-theme="paper-moments"] .secondary-sidebar { + background: #fff9e9; + border-right: 1px dashed #b5a693; +} +[data-theme="paper-moments"] .primary-sidebar { background: #f1e9dc; } +[data-theme="paper-moments"] .file-tree-panel .toolbar, +[data-theme="paper-moments"] .sidebar-header { background: #e5eeee; border-bottom: 1px dashed #b5a693; } +[data-theme="paper-moments"] .editor-header { background: #f8e9e3; border-bottom: 1px solid #b5a693; } +[data-theme="paper-moments"] .markdown-toolbar { background: #fff9e9; border-bottom: 1px dashed #b5a693; } +[data-theme="paper-moments"] .milkdown-host { padding: 30px 24px 40px; } +[data-theme="paper-moments"] .milkdown-host .milkdown { background: transparent; } +[data-theme="paper-moments"] .milkdown-host .ProseMirror { + width: 90%; + max-width: none; + position: relative; + min-height: calc(100vh - 220px); + padding: 44px 40px 60px 52px; + border: 1px solid #685949; + border-radius: 8px 16px 8px 8px; + outline: 1px dashed #c5b9a7; + outline-offset: -10px; + background: linear-gradient(90deg, transparent 32px, #e9cfc7 32px 34px, transparent 34px), #fffef8; + box-shadow: 6px 6px 0 #d8e6e2, 12px 12px 0 #f0d8cf; +} +[data-theme="paper-moments"] .milkdown-host .ProseMirror::before { + content: ''; + position: absolute; + top: -11px; + left: calc(50% - 48px); + width: 96px; + height: 24px; + background: repeating-linear-gradient(45deg, #e7bcb3c0 0 8px, #f2d4cbc0 8px 16px); + transform: rotate(-3deg); + pointer-events: none; +} +[data-theme="paper-moments"] .milkdown-host .ProseMirror > p { + background-image: repeating-linear-gradient(transparent 0 calc(1lh - 1px), #b6c7bd55 calc(1lh - 1px) 1lh); +} +[data-theme="paper-moments"] .milkdown-host .ProseMirror > :is(h1, h2, h3) { color: #875343; } +[data-theme="paper-moments"] .editor-pane.source { margin: 20px; width: calc(100% - 40px); border: 1px solid #b5a693; border-radius: 8px; background: #fffef8; box-shadow: var(--shadow-md); } +@media (max-width: 720px) { + [data-theme="paper-moments"] .milkdown-host { padding: 20px 12px 28px; } + [data-theme="paper-moments"] .milkdown-host .ProseMirror { width: 100%; padding: 30px 18px 40px 38px; } +} + +/* Warm neutral surfaces preserve the contrast of the selected Shiki palette. */ +[data-theme="paper-moments"][data-code-theme="github-light"] { + --color-code-background: #f1ecdf; + --color-code-text: #302b25; + --color-code-muted: #6d6256; + --color-code-border: #b1a18b; +} +[data-theme="paper-moments"][data-code-theme="github-dark"] { + --color-code-background: #282723; + --color-code-text: #f1e9da; + --color-code-muted: #bdb19f; + --color-code-border: #786b59; +} +[data-theme="paper-moments"] .milkdown-host .milkdown-code-block { + position: relative; + padding-top: 34px; + padding-bottom: 30px; + border-color: var(--color-code-border); + box-shadow: 3px 4px 0 #d8cebd; +} +[data-theme="paper-moments"] .milkdown-code-block::before { + content: ''; + position: absolute; + top: 15px; + left: 18px; + width: 10px; + height: 10px; + border-radius: 50%; + background: #c77768; + box-shadow: 18px 0 0 #c9a65d, 36px 0 0 #819b75; + pointer-events: none; +} +[data-theme="paper-moments"] .milkdown-code-block::after { + content: attr(data-language-label); + position: absolute; + right: 18px; + bottom: 9px; + max-width: calc(100% - 36px); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--color-code-muted); + font: 600 12px/1.4 var(--font-ui-mono); + pointer-events: none; +} +[data-theme="paper-moments"] .milkdown-code-block .tools { margin-left: 72px; } +[data-theme="paper-moments"] .milkdown-code-block .cm-activeLine, +[data-theme="paper-moments"] .milkdown-code-block .cm-activeLineGutter { background: color-mix(in srgb, var(--color-code-text) 7%, transparent); } diff --git a/frontend/src/features/editor/VisualMarkdownEditor.vue b/frontend/src/features/editor/VisualMarkdownEditor.vue index 416f314..4d50ebb 100644 --- a/frontend/src/features/editor/VisualMarkdownEditor.vue +++ b/frontend/src/features/editor/VisualMarkdownEditor.vue @@ -9,6 +9,8 @@ import { indentWithTab } from '@codemirror/commands' import { shikiEditorTheme, shikiLanguages, renderCodeLanguage } from './shikiCodeMirror' import './language-icons.css' import { installLanguagePickerPopover } from './languagePickerPopover' +import { installCodeBlockLabels } from './codeBlockLabels' +import { createMermaidPreview } from './mermaidPreview' import { createCodeBlockCommand, toggleEmphasisCommand, @@ -41,6 +43,7 @@ const loading = ref(true) const fontSizeInput = ref(16) let crepe: Crepe | null = null let disposeLanguagePicker: (() => void) | undefined +let disposeCodeLabels: (() => void) | undefined function applyProofingPreferences() { const editable = editorRoot.value?.querySelector('.ProseMirror') @@ -125,7 +128,9 @@ onMounted(async () => { featureConfigs: { [Crepe.Feature.Placeholder]: { text: t('开始记录你的想法…', 'Start writing your thoughts…') }, [Crepe.Feature.CodeMirror]: { - previewOnlyByDefault: false, + previewOnlyByDefault: true, + previewToggleText: previewOnly => previewOnly ? t('编辑', 'Edit') : t('预览', 'Preview'), + previewLabel: t('图表预览', 'Preview'), searchPlaceholder: t('搜索语言', 'Search languages'), noResultText: t('没有匹配的语言', 'No matching language'), copyText: t('复制', 'Copy'), @@ -182,6 +187,9 @@ onMounted(async () => { ...config, languages: shikiLanguages(themeStore.resolvedCodeBlockTheme), renderLanguage: renderCodeLanguage, + renderPreview: (language, content, applyPreview) => language.trim().toLowerCase() === 'mermaid' + ? createMermaidPreview(content, themeStore.isDark, applyPreview) + : config.renderPreview(language, content, applyPreview), extensions: [basicSetup, keymap.of([indentWithTab]), shikiEditorTheme(themeStore.resolvedCodeBlockTheme)], }))) crepe.editor.use(fontSizeMarkdownPlugin) @@ -195,13 +203,14 @@ onMounted(async () => { }) await crepe.create() if (editorRoot.value) disposeLanguagePicker = installLanguagePickerPopover(editorRoot.value) + if (editorRoot.value) disposeCodeLabels = installCodeBlockLabels(editorRoot.value) applyProofingPreferences() loading.value = false }) watch([() => settingsStore.spellCheck, () => settingsStore.language], applyProofingPreferences) -onBeforeUnmount(() => { disposeLanguagePicker?.(); void crepe?.destroy() }) +onBeforeUnmount(() => { disposeCodeLabels?.(); disposeLanguagePicker?.(); void crepe?.destroy() }) defineExpose({ getEditor: () => crepe?.editor }) @@ -273,6 +282,9 @@ defineExpose({ getEditor: () => crepe?.editor }) .toolbar-divider { width: 1px; height: 20px; margin: 0 var(--space-xs); background: var(--color-border-default); } .milkdown-host { flex: 1; min-height: 0; overflow: auto; color: var(--color-text-primary); } .milkdown-host.loading { visibility: hidden; } +.milkdown-host :deep(.editor-mermaid-preview) { padding: 20px; overflow: auto; background: var(--color-surface-primary); color: var(--color-text-primary); } +.milkdown-host :deep(.editor-mermaid-preview svg) { display: block; max-width: 100%; height: auto; margin: auto; } +.milkdown-host :deep(.editor-mermaid-preview.has-error) { color: var(--color-error); white-space: pre-wrap; } .editor-loading { padding: var(--space-xl); color: var(--color-text-tertiary); } .milkdown-host :deep(.milkdown) { min-height: 100%; diff --git a/frontend/src/features/editor/codeBlockLabels.spec.ts b/frontend/src/features/editor/codeBlockLabels.spec.ts new file mode 100644 index 0000000..982c5c7 --- /dev/null +++ b/frontend/src/features/editor/codeBlockLabels.spec.ts @@ -0,0 +1,18 @@ +// @vitest-environment happy-dom +import { expect, it } from 'vitest' +import { installCodeBlockLabels } from './codeBlockLabels' + +it('keeps footer labels in sync when the language changes and stops after disposal', async () => { + const root = document.createElement('div') + root.innerHTML = '
' + const dispose = installCodeBlockLabels(root) + const block = root.firstElementChild as HTMLElement + expect(block.dataset.languageLabel).toBe('Python') + block.querySelector('button')!.textContent = 'TypeScript' + await new Promise(resolve => setTimeout(resolve, 0)) + expect(block.dataset.languageLabel).toBe('TypeScript') + dispose() + block.querySelector('button')!.textContent = 'Rust' + await new Promise(resolve => setTimeout(resolve, 0)) + expect(block.dataset.languageLabel).toBe('TypeScript') +}) diff --git a/frontend/src/features/editor/codeBlockLabels.ts b/frontend/src/features/editor/codeBlockLabels.ts new file mode 100644 index 0000000..a1f10b5 --- /dev/null +++ b/frontend/src/features/editor/codeBlockLabels.ts @@ -0,0 +1,11 @@ +/** Mirror the live picker label for theme decorations without changing Markdown. */ +export function installCodeBlockLabels(root: HTMLElement): () => void { + const sync = () => root.querySelectorAll('.milkdown-code-block').forEach(block => { + const label = block.querySelector('.language-button')?.textContent?.trim() || 'Plain text' + if (block.dataset.languageLabel !== label) block.dataset.languageLabel = label + }) + const observer = new MutationObserver(sync) + observer.observe(root, { subtree: true, childList: true, characterData: true }) + sync() + return () => observer.disconnect() +} diff --git a/frontend/src/features/editor/mermaidPreview.spec.ts b/frontend/src/features/editor/mermaidPreview.spec.ts new file mode 100644 index 0000000..951c739 --- /dev/null +++ b/frontend/src/features/editor/mermaidPreview.spec.ts @@ -0,0 +1,37 @@ +// @vitest-environment happy-dom +import { expect, it, vi } from 'vitest' +import { flushPromises } from '@vue/test-utils' +import { renderMermaid } from '@/services/mermaidService' +import { createMermaidPreview } from './mermaidPreview' + +vi.mock('@/services/mermaidService', () => ({ renderMermaid: vi.fn() })) + +it('renders SVG with the requested theme and keeps async revisions isolated', async () => { + let finish!: (value: any) => void + vi.mocked(renderMermaid).mockImplementationOnce(() => new Promise(resolve => { finish = resolve })) + vi.mocked(renderMermaid).mockResolvedValueOnce({ svg: 'new', warnings: [], width: 10, height: 10 }) + const oldPublish = vi.fn() + const latestPublish = vi.fn() + const old = createMermaidPreview('graph TD; A-->B', false, oldPublish) + const latest = createMermaidPreview('graph TD; A-->C', true, latestPublish) + document.body.append(latest.cloneNode(true)) + await flushPromises() + finish({ svg: 'old', warnings: [] }) + await flushPromises() + expect(latest.querySelector('svg')?.textContent).toBe('new') + expect(old.querySelector('svg')?.textContent).toBe('old') + expect(oldPublish).not.toHaveBeenCalled() + expect(latestPublish).toHaveBeenCalledWith(latest) + expect(latestPublish.mock.calls[0]![0]).not.toBe(latest) + document.getElementById(latest.id)?.remove() + expect(renderMermaid).toHaveBeenLastCalledWith('graph TD; A-->C', { theme: 'dark' }) +}) + +it('shows syntax errors as text without executing markup', async () => { + vi.mocked(renderMermaid).mockResolvedValueOnce({ svg: '', warnings: [''], width: 0, height: 0 }) + const preview = createMermaidPreview('invalid', false, vi.fn()) + await flushPromises() + expect(preview.classList.contains('has-error')).toBe(true) + expect(preview.querySelector('img')).toBeNull() + expect(preview.textContent).toContain('点击编辑') +}) diff --git a/frontend/src/features/editor/mermaidPreview.ts b/frontend/src/features/editor/mermaidPreview.ts new file mode 100644 index 0000000..64c6e36 --- /dev/null +++ b/frontend/src/features/editor/mermaidPreview.ts @@ -0,0 +1,39 @@ +import { nextTick } from 'vue' +import { renderMermaid } from '@/services/mermaidService' +import { t } from '@/i18n' + +let previewId = 0 +export function createMermaidPreview(source: string, dark: boolean, applyPreview: (value: HTMLElement) => void): HTMLElement { + // Each revision owns its element, so a slow render cannot replace newer content. + const container = document.createElement('div') + container.className = 'editor-mermaid-preview' + container.id = `editor-mermaid-preview-${++previewId}` + container.setAttribute('aria-live', 'polite') + container.textContent = t('正在渲染图表…', 'Rendering diagram…') + const publish = async () => { + await nextTick() + // Milkdown sanitizes and copies this element. Publish only if its revision + // still exists; edits, language changes and unmounts remove the old marker. + const visible = document.getElementById(container.id) + if (visible) { + // PreviewPanel copies HTML instead of retaining the supplied element. + // Update the current copy through Milkdown's reactive callback. + applyPreview(container.cloneNode(true) as HTMLElement) + } + } + void renderMermaid(source, { theme: dark ? 'dark' : 'light' }).then(result => { + if (result.warnings.length) { + container.classList.add('has-error') + container.textContent = `${t('图表语法有误，可点击编辑修改：', 'Diagram syntax error. Choose Edit to fix:')} ${result.warnings.join('\n')}` + void publish() + return + } + // Mermaid runs in strict mode; Milkdown sanitizes the preview before insertion. + container.innerHTML = result.svg + void publish() + }).catch(() => { + container.textContent = t('图表渲染失败，请点击编辑检查源码。', 'Unable to render diagram. Choose Edit to inspect the source.') + void publish() + }) + return container +} diff --git a/frontend/src/features/themes/CommunityThemePreview.vue b/frontend/src/features/themes/CommunityThemePreview.vue index b1e5ecb..f643ecf 100644 --- a/frontend/src/features/themes/CommunityThemePreview.vue +++ b/frontend/src/features/themes/CommunityThemePreview.vue @@ -16,10 +16,15 @@ const previewDocument = computed(() => { style.textContent = `${tokensCss}\n${getCommunityThemePreviewCss(props.themeId)}\nbody { margin:0; padding:24px; background:var(--color-background-primary); color:var(--color-text-primary); font:16px/1.6 system-ui; } article { padding:20px; border:1px solid var(--color-border-default); border-radius:8px; background:var(--color-surface-primary); } p { color:var(--color-text-secondary); } button { padding:8px 16px; border:0; border-radius:6px; background:var(--color-accent-primary); color:white; }` doc.head.append(style) const article = doc.createElement('article') + article.className = 'panel' + const header = doc.createElement('header'); header.className = 'feature-header' const heading = doc.createElement('h1'); heading.textContent = theme.value?.name ?? props.themeId + header.append(heading) + const journal = doc.createElement('section'); journal.className = 'editor-preview'; journal.style.cssText = 'padding:24px;margin:28px 0;' const text = doc.createElement('p'); text.textContent = t('知识的价值不只在于保存，更在于被重新发现和使用。', 'Knowledge gains value when it can be rediscovered and used.') const button = doc.createElement('button'); button.textContent = t('示例按钮', 'Example button') - article.append(heading, text, button); doc.body.append(article) + journal.append(text) + article.append(header, journal, button); doc.body.append(article) return '' + doc.documentElement.outerHTML }) diff --git a/frontend/src/features/themes/ThemesView.spec.ts b/frontend/src/features/themes/ThemesView.spec.ts index e913295..9ad8e1b 100644 --- a/frontend/src/features/themes/ThemesView.spec.ts +++ b/frontend/src/features/themes/ThemesView.spec.ts @@ -5,10 +5,62 @@ import { createPinia, setActivePinia } from 'pinia' import ThemesView from './ThemesView.vue' import { useThemeStore } from '@/stores/theme' import { mockCommunityThemes, getCommunityThemePreviewCss } from '@/services/themePackageService' +import paperPackage from '@/assets/themes/paper-moments.theme?raw' let wrapper: VueWrapper beforeEach(() => { localStorage.clear(); setActivePinia(createPinia()) }) -afterEach(() => { wrapper?.unmount(); vi.useRealTimers() }) +afterEach(() => { useThemeStore().applyTheme('light'); wrapper?.unmount(); vi.restoreAllMocks(); vi.unstubAllGlobals(); vi.useRealTimers() }) + +it('downloads a URL for inspection without automatically installing it', async () => { + vi.stubGlobal('fetch', vi.fn().mockResolvedValue(new Response(paperPackage))) + wrapper = mount(ThemesView, { global: { stubs: { MarkdownContent: true } } }) + await flushPromises() + await wrapper.findAll('button').find(button => button.text() === '导入主题')!.trigger('click') + await wrapper.get('#theme-package-url').setValue('https://example.com/paper.theme') + await wrapper.get('.url-import').trigger('submit') + await vi.waitFor(() => expect(useThemeStore().pendingInspection?.compatible).toBe(true)) + expect(useThemeStore().isThemeInstalled('paper-moments')).toBe(false) + expect(wrapper.get('.inspection-result').text()).toContain('纸间时光') +}) + +it('ignores a URL response after the dialog is cancelled', async () => { + let respond!: (response: Response) => void + vi.stubGlobal('fetch', vi.fn(() => new Promise(resolve => { respond = resolve }))) + wrapper = mount(ThemesView, { global: { stubs: { MarkdownContent: true } } }) + await flushPromises() + await wrapper.findAll('button').find(button => button.text() === '导入主题')!.trigger('click') + await wrapper.get('#theme-package-url').setValue('https://example.com/paper.theme') + await wrapper.get('.url-import').trigger('submit') + await wrapper.get('.import-modal .inline-actions button').trigger('click') + respond(new Response(paperPackage)) + await flushPromises() + expect(useThemeStore().pendingInspection).toBeNull() + expect(wrapper.find('.import-modal').exists()).toBe(false) +}) + +it('opens the file picker from the styled button and imports the actual paper theme', async () => { + const store = useThemeStore() + wrapper = mount(ThemesView, { global: { stubs: { MarkdownContent: true } } }) + await flushPromises() + await wrapper.findAll('button').find(button => button.text() === '导入主题')!.trigger('click') + const input = wrapper.get('input[type="file"]') + const click = vi.spyOn(input.element, 'click').mockImplementation(() => {}) + await wrapper.get('.upload-area .button-primary').trigger('click') + expect(click).toHaveBeenCalledOnce() + Object.defineProperty(input.element, 'files', { value: [new File([paperPackage], 'paper-moments.theme', { type: 'text/plain' })] }) + await input.trigger('change') + await vi.waitFor(() => expect(store.pendingInspection?.compatible).toBe(true)) + expect(store.pendingInspection!.warnings).toEqual([]) + await wrapper.get('.import-modal .inline-actions .button-primary').trigger('click') + await flushPromises() + expect(store.isThemeInstalled('paper-moments')).toBe(true) + expect(localStorage.getItem('installed-themes-css-paper-moments')).toBe(getCommunityThemePreviewCss('paper-moments')) + expect(document.getElementById('theme-style-paper-moments')).toBeNull() + store.applyTheme('paper-moments') + expect(document.getElementById('theme-style-paper-moments')!.textContent).toBe(getCommunityThemePreviewCss('paper-moments')) + store.applyTheme('light') + expect(document.getElementById('theme-style-paper-moments')).toBeNull() +}) it.each(mockCommunityThemes)('previews uninstalled $theme_id using its actual CSS without changing the active theme', async theme => { const store = useThemeStore() diff --git a/frontend/src/features/themes/ThemesView.vue b/frontend/src/features/themes/ThemesView.vue index f1b4c72..5f60437 100644 --- a/frontend/src/features/themes/ThemesView.vue +++ b/frontend/src/features/themes/ThemesView.vue @@ -1,19 +1,58 @@ diff --git a/frontend/src/features/editor/VisualMarkdownEditor.vue b/frontend/src/features/editor/VisualMarkdownEditor.vue index 58323fd..23e61e0 100644 --- a/frontend/src/features/editor/VisualMarkdownEditor.vue +++ b/frontend/src/features/editor/VisualMarkdownEditor.vue @@ -62,6 +62,22 @@ const fontSizeInput = ref(16) let crepe: Crepe | null = null let disposeLanguagePicker: (() => void) | undefined let disposeCodeLabels: (() => void) | undefined +const diagramPreviews = new Map void }>() +function renderDiagram(source: string, apply: (value: HTMLElement) => void) { + for (const [id, entry] of diagramPreviews) { + if (entry.apply === apply) diagramPreviews.delete(id) + } + const element = createMermaidPreview(source, themeStore.isDark, apply) + diagramPreviews.set(element.id, { source, apply }) + return element +} +watch(() => themeStore.currentThemeId, () => { + const current = [...diagramPreviews.entries()] + diagramPreviews.clear() + for (const [id, entry] of current) { + if (editorRoot.value?.querySelector(`[id="${id}"]`)) entry.apply(renderDiagram(entry.source, entry.apply)) + } +}, { flush: 'post' }) function applyProofingPreferences() { const editable = editorRoot.value?.querySelector('.ProseMirror') @@ -206,7 +222,7 @@ onMounted(async () => { languages: shikiLanguages(themeStore.resolvedCodeBlockTheme), renderLanguage: renderCodeLanguage, renderPreview: (language, content, applyPreview) => language.trim().toLowerCase() === 'mermaid' - ? createMermaidPreview(content, themeStore.isDark, applyPreview) + ? renderDiagram(content, applyPreview) : config.renderPreview(language, content, applyPreview), extensions: [basicSetup, keymap.of([indentWithTab]), shikiEditorTheme(themeStore.resolvedCodeBlockTheme)], }))) @@ -242,7 +258,7 @@ watch(() => editorStore.headingRequest, request => { }) }) -onBeforeUnmount(() => { disposeCodeLabels?.(); disposeLanguagePicker?.(); void crepe?.destroy() }) +onBeforeUnmount(() => { diagramPreviews.clear(); disposeCodeLabels?.(); disposeLanguagePicker?.(); void crepe?.destroy() }) defineExpose({ getEditor: () => crepe?.editor }) diff --git a/frontend/src/features/workspace/FileTreePanel.spec.ts b/frontend/src/features/workspace/FileTreePanel.spec.ts index c532221..24b1675 100644 --- a/frontend/src/features/workspace/FileTreePanel.spec.ts +++ b/frontend/src/features/workspace/FileTreePanel.spec.ts @@ -48,6 +48,16 @@ afterEach(() => { }) describe('FileTreePanel file switching', () => { + it('expands every nested folder from the toolbar', async () => { + const router = createRouter({ history: createMemoryHistory(), routes: [{ path: '/workspace', component: { template: '
' } }] }) + await router.push('/workspace') + const store = useWorkspaceStore() + store.fileTree = [{ id: 'a', name: 'A', path: '/a', type: 'folder', is_open: false, children: [{ id: 'b', name: 'B', path: '/a/b', type: 'folder', is_open: false }] }] + wrapper = mount(FileTreePanel, { global: { plugins: [router] } }) + await wrapper.get('[aria-label="全部展开文件夹"]').trigger('click') + expect(store.fileTree[0]!.is_open).toBe(true) + expect(store.fileTree[0]!.children![0]!.is_open).toBe(true) + }) it('switches full-height panels using tabs and preserves the file search', async () => { const router = createRouter({ history: createMemoryHistory(), routes: [{ path: '/workspace', component: { template: '
' } }] }) await router.push('/workspace') diff --git a/frontend/src/features/workspace/FileTreePanel.vue b/frontend/src/features/workspace/FileTreePanel.vue index 35fc624..59da5d1 100644 --- a/frontend/src/features/workspace/FileTreePanel.vue +++ b/frontend/src/features/workspace/FileTreePanel.vue @@ -68,6 +68,12 @@ const filteredTree = computed(() => { }) return filter(workspaceStore.fileTree) }) +function expandAllFiles() { + const expand = (nodes: FileNode[]) => nodes.forEach(node => { + if (node.type === 'folder') { node.is_open = true; expand(node.children ?? []) } + }) + expand(workspaceStore.fileTree) +} let lastScrollTop = 0 function revealSearch(event: WheelEvent) { if (activeTab.value !== 'files') return @@ -216,6 +222,7 @@ function containingFolder(path: string): string { +
diff --git a/frontend/src/services/mermaidService.ts b/frontend/src/services/mermaidService.ts index 5e09de3..57eb899 100644 --- a/frontend/src/services/mermaidService.ts +++ b/frontend/src/services/mermaidService.ts @@ -1,31 +1,45 @@ import mermaid from 'mermaid' -import { ref, watch } from 'vue' +import { computed } from 'vue' import { useThemeStore } from '@/stores/theme' -let initialized = false -let initTheme: 'light' | 'dark' = 'light' +export function mermaidThemeVariables(dark: boolean) { + const style = typeof document === 'undefined' ? null : getComputedStyle(document.documentElement) + const color = (name: string, fallback: string) => style?.getPropertyValue(`--color-${name}`).trim() || fallback + const text = color('text-primary', dark ? '#e6edf3' : '#1f2328') + const border = color('border-default', dark ? '#484f58' : '#d0d7de') + const surface = color('surface-primary', dark ? '#161b22' : '#ffffff') + const primary = color('accent-soft', dark ? '#30363d' : '#eef0ff') + const line = color('text-secondary', dark ? '#b1bac4' : '#656d76') + return { + darkMode: dark, background: surface, primaryColor: primary, primaryTextColor: text, primaryBorderColor: border, + secondaryColor: color('info-soft', primary), secondaryTextColor: text, secondaryBorderColor: border, + tertiaryColor: color('success-soft', primary), tertiaryTextColor: text, tertiaryBorderColor: border, + textColor: text, lineColor: line, mainBkg: primary, nodeBorder: border, + clusterBkg: surface, clusterBorder: border, edgeLabelBackground: surface, + actorBkg: primary, actorBorder: border, actorTextColor: text, actorLineColor: line, + signalColor: line, signalTextColor: text, labelBoxBkgColor: surface, labelBoxBorderColor: border, labelTextColor: text, + noteBkgColor: color('warning-soft', primary), noteTextColor: text, noteBorderColor: border, + activationBkgColor: primary, activationBorderColor: border, + } +} function ensureInitialized(theme: 'light' | 'dark') { - if (!initialized) { mermaid.initialize({ startOnLoad: false, - theme: theme === 'dark' ? 'dark' : 'default', + theme: 'base', + themeVariables: mermaidThemeVariables(theme === 'dark'), securityLevel: 'strict', fontFamily: 'var(--font-ui-sans)', flowchart: { useMaxWidth: true, htmlLabels: true }, sequence: { useMaxWidth: true }, gantt: { useMaxWidth: true }, }) - initialized = true - initTheme = theme - return - } - if (initTheme !== theme) { - mermaid.initialize({ - theme: theme === 'dark' ? 'dark' : 'default', - }) - initTheme = theme - } +} +let queue: Promise = Promise.resolve() +function serialized(work: () => Promise): Promise { + const result = queue.then(work) + queue = result.catch(() => {}) + return result } export interface MermaidRenderResult { @@ -43,7 +57,11 @@ export interface MermaidParseError { let renderCounter = 0 -export async function renderMermaid( +export function renderMermaid(source: string, options: { theme?: 'light' | 'dark'; mode?: 'interactive' | 'static' } = {}): Promise { + return serialized(() => renderMermaidNow(source, options)) +} + +async function renderMermaidNow( source: string, options: { theme?: 'light' | 'dark'; mode?: 'interactive' | 'static' } = {} ): Promise { @@ -106,18 +124,14 @@ function escapeXml(str: string): string { export function useMermaidTheme() { const themeStore = useThemeStore() - const mermaidTheme = ref<'light' | 'dark'>(themeStore.isDark ? 'dark' : 'light') - watch(() => themeStore.isDark, (isDark) => { - mermaidTheme.value = isDark ? 'dark' : 'light' - ensureInitialized(mermaidTheme.value) - }) - return { mermaidTheme } + const mermaidTheme = computed<'light' | 'dark'>(() => themeStore.isDark ? 'dark' : 'light') + const themeId = computed(() => themeStore.currentThemeId) + return { mermaidTheme, themeId } } export async function validateMermaid(source: string): Promise<{ valid: boolean; error?: MermaidParseError }> { try { - ensureInitialized('light') - await mermaid.parse(source) + await serialized(async () => { ensureInitialized('light'); await mermaid.parse(source) }) return { valid: true } } catch (error) { const message = error instanceof Error ? error.message : '未知错误' diff --git a/frontend/src/services/mermaidTheme.spec.ts b/frontend/src/services/mermaidTheme.spec.ts new file mode 100644 index 0000000..7eabfc9 --- /dev/null +++ b/frontend/src/services/mermaidTheme.spec.ts @@ -0,0 +1,22 @@ +// @vitest-environment happy-dom +import { afterEach, expect, it, vi } from 'vitest' +import mermaid from 'mermaid' +import { mermaidThemeVariables, renderMermaid } from './mermaidService' + +vi.mock('mermaid', () => ({ default: { initialize: vi.fn(), render: vi.fn().mockResolvedValue({ svg: '' }) } })) +afterEach(() => { document.documentElement.removeAttribute('style'); vi.clearAllMocks() }) +it('uses the current theme tokens for nodes, actors, text and lines', () => { + document.documentElement.style.setProperty('--color-accent-soft', '#f3e1d8') + document.documentElement.style.setProperty('--color-text-primary', '#493f35') + const theme = mermaidThemeVariables(false) + expect(theme.primaryColor).toBe('#f3e1d8') + expect(theme.actorBkg).toBe('#f3e1d8') + expect(theme.primaryTextColor).toBe('#493f35') + expect(theme.actorTextColor).toBe('#493f35') +}) +it('keeps explicit diagram styling and initializes base palette on each render', async () => { + const source = 'graph TD; A-->B; style A fill:#f9f' + await renderMermaid(source) + expect(mermaid.initialize).toHaveBeenCalledWith(expect.objectContaining({ theme: 'base', securityLevel: 'strict', themeVariables: expect.any(Object) })) + expect(mermaid.render).toHaveBeenCalledWith(expect.any(String), source) +}) From 02dd585a4e1dc805b87c096ba4186bc0ee622a22 Mon Sep 17 00:00:00 2001 From: KiriAky 107 Date: Sat, 5 Sep 2026 19:40:14 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=AC=94=E8=AE=B0?= =?UTF-8?q?=20YAML=20=E6=A0=87=E7=AD=BE=E4=BF=9D=E5=AD=98=E4=B8=8E?= =?UTF-8?q?=E7=B4=A2=E5=BC=95=E9=87=8D=E5=BB=BA=E4=B8=80=E8=87=B4=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/app/knowledge/parser.py | 36 ++++++++----- backend/tests/test_note_metadata.py | 46 ++++++++++++++++ frontend/package.json | 3 +- frontend/pnpm-lock.yaml | 45 ++++++++++------ .../src/features/editor/noteMetadata.spec.ts | 38 ++++++++++++- frontend/src/features/editor/noteMetadata.ts | 25 +-------- .../src/services/workspaceService.spec.ts | 19 +++++++ frontend/src/services/workspaceService.ts | 8 ++- frontend/src/utils/noteMetadata.ts | 54 +++++++++++++++++++ 9 files changed, 219 insertions(+), 55 deletions(-) create mode 100644 backend/tests/test_note_metadata.py create mode 100644 frontend/src/utils/noteMetadata.ts diff --git a/backend/app/knowledge/parser.py b/backend/app/knowledge/parser.py index e343d39..5c7f93e 100644 --- a/backend/app/knowledge/parser.py +++ b/backend/app/knowledge/parser.py @@ -20,7 +20,6 @@ from app.errors import ApiError from app.textutils import count_tokens _HEADING_RE = re.compile(r"^(#{1,6})[ \t]+(.*?)\s*$") -_FRONTMATTER_KEY_RE = re.compile(r"^([A-Za-z0-9_-]+)\s*:\s*(.*)$") _FENCE_RE = re.compile(r"^[ \t]{0,3}(`{3,}|~{3,})(?:[^`]*)$") @@ -261,16 +260,29 @@ def _embedding_policy(markdown: str) -> bool: return value.value.lower() in {"true", "yes", "on"} -def _extract_frontmatter(markdown: str) -> dict[str, str]: - """极简 frontmatter 解析，只提取 key: value 行。""" +def _extract_frontmatter(markdown: str) -> dict[str, str | list[str]]: + """Read YAML scalars and tag sequences without constructing arbitrary objects.""" header = _frontmatter(markdown) if header is None: return {} - meta: dict[str, str] = {} - for line in header[0].splitlines(): - m = _FRONTMATTER_KEY_RE.match(line) - if m: - meta[m.group(1).lower()] = m.group(2).strip() + try: + node = yaml.compose(header[0], Loader=yaml.SafeLoader) + except yaml.YAMLError as exc: + raise ApiError(422, "INVALID_EMBEDDING_POLICY", "Frontmatter YAML 无效，无法确认本地索引策略。") from exc + meta: dict[str, str | list[str]] = {} + if not isinstance(node, yaml.MappingNode): + return meta # The policy validation below handles unsupported documents. + for key, value in node.value: + if not isinstance(key, yaml.ScalarNode): + continue + name = key.value.lower() + if name not in {"title", "tags"}: + continue + if isinstance(value, yaml.ScalarNode): + # Keep lexical values: YAML 1.1 would otherwise turn tags like on/yes into booleans. + meta[name] = "" if value.tag == "tag:yaml.org,2002:null" else value.value + elif name == "tags" and isinstance(value, yaml.SequenceNode): + meta[name] = [item.value for item in value.value if isinstance(item, yaml.ScalarNode)] return meta @@ -282,10 +294,10 @@ def _first_heading(markdown: str) -> str | None: return None -def _parse_tags(raw: str | None) -> list[str]: +def _parse_tags(raw: str | list[str] | None) -> list[str]: + if isinstance(raw, list): + return raw if not raw: return [] raw = raw.strip() - if raw.startswith("[") and raw.endswith("]"): - raw = raw[1:-1] - return [t.strip().strip("'\"") for t in raw.split(",") if t.strip()] + return [t.strip() for t in raw.split(",") if t.strip()] diff --git a/backend/tests/test_note_metadata.py b/backend/tests/test_note_metadata.py new file mode 100644 index 0000000..7626f5a --- /dev/null +++ b/backend/tests/test_note_metadata.py @@ -0,0 +1,46 @@ +import asyncio +from datetime import datetime, timezone + +import pytest + +from app.contracts import IndexRebuildRequest +from app.knowledge.parser import parse_note +from app.services import index_service, note_service + + +@pytest.mark.parametrize(('header', 'expected'), [ + ('tags:\n- python\n- rust', ['python', 'rust']), + ('tags:\n - python\n - rust', ['python', 'rust']), + ('"tags": ["a,b", "quote\\\"tag", "path\\\\tag"] # comment', ['a,b', 'quote"tag', 'path\\tag']), + ('tags: [on, yes, "true", "001"]', ['on', 'yes', 'true', '001']), + ('tags: python, rust', ['python', 'rust']), + ('tags: []', []), + ('tags: null', []), +]) +def test_yaml_tags_are_parsed_as_complete_values(header, expected): + now = datetime.now(timezone.utc) + note = parse_note( + markdown=f'---\ntitle: "Demo: YAML"\n{header}\n---\n# Body', + file_path='demo.md', folder='', created_at=now, updated_at=now, + ) + assert note.tags == expected + assert note.title == 'Demo: YAML' + + +def test_saved_metadata_survives_full_index_rebuild(): + async def scenario(): + note = await note_service.create_note(title='Demo', markdown='# Body', folder=None, tags=['old']) + for tags, yaml_tags in [ + (['python', 'a,b', 'on'], '\n - python\n - a,b\n - on'), + ([], ' []'), + ]: + markdown = f'---\ntitle: "Demo: updated"\ntags:{yaml_tags}\n---\n# Body\n' + saved = await note_service.update_note(note.note_id, markdown=markdown, tags=tags) + assert saved.tags == tags + job = await index_service.rebuild(IndexRebuildRequest()) + assert job.status == 'completed' + restored = await note_service.get_note(note.note_id) + assert restored.tags == tags + assert restored.title == 'Demo: updated' + assert restored.markdown == markdown + asyncio.run(scenario()) diff --git a/frontend/package.json b/frontend/package.json index ffbaf5a..f6bfc1b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -41,7 +41,8 @@ "pinia": "^4.0.0", "shiki": "^4.4.3", "vue": "^3.5.0", - "vue-router": "^5.0.0" + "vue-router": "^5.0.0", + "yaml": "^2.9.0" }, "devDependencies": { "@types/node": "^22.0.0", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index c648d1c..5a0cce2 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -100,14 +100,17 @@ importers: version: 3.5.42(typescript@5.9.3) vue-router: specifier: ^5.0.0 - version: 5.3.0(@vue/compiler-sfc@3.5.42)(esbuild@0.25.12)(pinia@4.0.3(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3)))(rollup@4.63.1)(vite@6.4.3(@types/node@22.20.1))(vue@3.5.42(typescript@5.9.3)) + version: 5.3.0(@vue/compiler-sfc@3.5.42)(esbuild@0.25.12)(pinia@4.0.3(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3)))(rollup@4.63.1)(vite@6.4.3(@types/node@22.20.1)(yaml@2.9.0))(vue@3.5.42(typescript@5.9.3)) + yaml: + specifier: ^2.9.0 + version: 2.9.0 devDependencies: '@types/node': specifier: ^22.0.0 version: 22.20.1 '@vitejs/plugin-vue': specifier: ^5.0.0 - version: 5.2.4(vite@6.4.3(@types/node@22.20.1))(vue@3.5.42(typescript@5.9.3)) + version: 5.2.4(vite@6.4.3(@types/node@22.20.1)(yaml@2.9.0))(vue@3.5.42(typescript@5.9.3)) '@vue/test-utils': specifier: ^2.5.0 version: 2.5.0(@vue/compiler-dom@3.5.42)(@vue/server-renderer@3.5.42)(vue@3.5.42(typescript@5.9.3)) @@ -119,10 +122,10 @@ importers: version: 5.9.3 vite: specifier: ^6.0.0 - version: 6.4.3(@types/node@22.20.1) + version: 6.4.3(@types/node@22.20.1)(yaml@2.9.0) vitest: specifier: ^4.1.11 - version: 4.1.11(@types/node@22.20.1)(happy-dom@20.11.15)(vite@6.4.3(@types/node@22.20.1)) + version: 4.1.11(@types/node@22.20.1)(happy-dom@20.11.15)(vite@6.4.3(@types/node@22.20.1)(yaml@2.9.0)) vue-tsc: specifier: ^2.0.0 version: 2.2.12(typescript@5.9.3) @@ -2150,6 +2153,11 @@ packages: utf-8-validate: optional: true + yaml@2.9.0: + resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==} + engines: {node: '>= 14.6'} + hasBin: true + zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} @@ -3259,9 +3267,9 @@ snapshots: d3-selection: 3.0.0 d3-transition: 3.0.1(d3-selection@3.0.0) - '@vitejs/plugin-vue@5.2.4(vite@6.4.3(@types/node@22.20.1))(vue@3.5.42(typescript@5.9.3))': + '@vitejs/plugin-vue@5.2.4(vite@6.4.3(@types/node@22.20.1)(yaml@2.9.0))(vue@3.5.42(typescript@5.9.3))': dependencies: - vite: 6.4.3(@types/node@22.20.1) + vite: 6.4.3(@types/node@22.20.1)(yaml@2.9.0) vue: 3.5.42(typescript@5.9.3) '@vitest/expect@4.1.11': @@ -3273,13 +3281,13 @@ snapshots: chai: 6.2.2 tinyrainbow: 3.1.1 - '@vitest/mocker@4.1.11(vite@6.4.3(@types/node@22.20.1))': + '@vitest/mocker@4.1.11(vite@6.4.3(@types/node@22.20.1)(yaml@2.9.0))': dependencies: '@vitest/spy': 4.1.11 estree-walker: 3.0.3 magic-string: 0.30.21 optionalDependencies: - vite: 6.4.3(@types/node@22.20.1) + vite: 6.4.3(@types/node@22.20.1)(yaml@2.9.0) '@vitest/pretty-format@4.1.11': dependencies: @@ -4680,7 +4688,7 @@ snapshots: pathe: 2.0.3 picomatch: 4.0.7 - unplugin@3.3.0(esbuild@0.25.12)(rollup@4.63.1)(vite@6.4.3(@types/node@22.20.1)): + unplugin@3.3.0(esbuild@0.25.12)(rollup@4.63.1)(vite@6.4.3(@types/node@22.20.1)(yaml@2.9.0)): dependencies: '@jridgewell/remapping': 2.3.5 picomatch: 4.0.7 @@ -4688,7 +4696,7 @@ snapshots: optionalDependencies: esbuild: 0.25.12 rollup: 4.63.1 - vite: 6.4.3(@types/node@22.20.1) + vite: 6.4.3(@types/node@22.20.1)(yaml@2.9.0) uuid@14.0.2: {} @@ -4702,7 +4710,7 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.3 - vite@6.4.3(@types/node@22.20.1): + vite@6.4.3(@types/node@22.20.1)(yaml@2.9.0): dependencies: esbuild: 0.25.12 fdir: 6.5.0(picomatch@4.0.7) @@ -4713,11 +4721,12 @@ snapshots: optionalDependencies: '@types/node': 22.20.1 fsevents: 2.3.3 + yaml: 2.9.0 - vitest@4.1.11(@types/node@22.20.1)(happy-dom@20.11.15)(vite@6.4.3(@types/node@22.20.1)): + vitest@4.1.11(@types/node@22.20.1)(happy-dom@20.11.15)(vite@6.4.3(@types/node@22.20.1)(yaml@2.9.0)): dependencies: '@vitest/expect': 4.1.11 - '@vitest/mocker': 4.1.11(vite@6.4.3(@types/node@22.20.1)) + '@vitest/mocker': 4.1.11(vite@6.4.3(@types/node@22.20.1)(yaml@2.9.0)) '@vitest/pretty-format': 4.1.11 '@vitest/runner': 4.1.11 '@vitest/snapshot': 4.1.11 @@ -4734,7 +4743,7 @@ snapshots: tinyexec: 1.3.0 tinyglobby: 0.2.17 tinyrainbow: 3.1.1 - vite: 6.4.3(@types/node@22.20.1) + vite: 6.4.3(@types/node@22.20.1)(yaml@2.9.0) why-is-node-running: 2.3.0 optionalDependencies: '@types/node': 22.20.1 @@ -4746,7 +4755,7 @@ snapshots: vue-component-type-helpers@3.3.11: {} - vue-router@5.3.0(@vue/compiler-sfc@3.5.42)(esbuild@0.25.12)(pinia@4.0.3(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3)))(rollup@4.63.1)(vite@6.4.3(@types/node@22.20.1))(vue@3.5.42(typescript@5.9.3)): + vue-router@5.3.0(@vue/compiler-sfc@3.5.42)(esbuild@0.25.12)(pinia@4.0.3(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3)))(rollup@4.63.1)(vite@6.4.3(@types/node@22.20.1)(yaml@2.9.0))(vue@3.5.42(typescript@5.9.3)): dependencies: '@vue-macros/common': 3.1.4(vue@3.5.42(typescript@5.9.3)) '@vue/devtools-api': 8.2.1 @@ -4762,13 +4771,13 @@ snapshots: picomatch: 4.0.7 scule: 1.3.0 tinyglobby: 0.2.17 - unplugin: 3.3.0(esbuild@0.25.12)(rollup@4.63.1)(vite@6.4.3(@types/node@22.20.1)) + unplugin: 3.3.0(esbuild@0.25.12)(rollup@4.63.1)(vite@6.4.3(@types/node@22.20.1)(yaml@2.9.0)) unplugin-utils: 0.3.2 vue: 3.5.42(typescript@5.9.3) optionalDependencies: '@vue/compiler-sfc': 3.5.42 pinia: 4.0.3(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3)) - vite: 6.4.3(@types/node@22.20.1) + vite: 6.4.3(@types/node@22.20.1)(yaml@2.9.0) transitivePeerDependencies: - '@farmfe/core' - '@rspack/core' @@ -4808,4 +4817,6 @@ snapshots: ws@8.21.3: {} + yaml@2.9.0: {} + zwitch@2.0.4: {} diff --git a/frontend/src/features/editor/noteMetadata.spec.ts b/frontend/src/features/editor/noteMetadata.spec.ts index f865541..a48473e 100644 --- a/frontend/src/features/editor/noteMetadata.spec.ts +++ b/frontend/src/features/editor/noteMetadata.spec.ts @@ -1,4 +1,5 @@ import { expect, it } from 'vitest' +import { parseDocument } from 'yaml' import { splitNoteMetadata, updateMetadataTags } from './noteMetadata' it('renders legacy properties and saves real frontmatter without losing other fields', () => { @@ -8,7 +9,6 @@ it('renders legacy properties and saves real frontmatter without losing other fi expect(metadata.body).toBe('\n# 正文\n') const prefix = updateMetadataTags(metadata, ['编程', '学习', '学习']) expect(prefix).toContain('embedding_local_only: true') - expect(prefix).toContain('tags: ["编程","学习"]') expect(prefix.startsWith('---\n')).toBe(true) expect(splitNoteMetadata(prefix + metadata.body)!.tags).toEqual(['编程', '学习']) }) @@ -16,3 +16,39 @@ it('renders legacy properties and saves real frontmatter without losing other fi it('does not mistake ordinary Markdown for metadata', () => { expect(splitNoteMetadata('---\nA paragraph\n---\n')).toBeNull() }) + +it.each(['- python\n- rust', ' - python\n - rust', '[python, rust]'])('replaces the complete YAML tag list: %s', (list) => { + const metadata = splitNoteMetadata(`---\ntitle: Demo\ntags:\n${list.startsWith('[') ? ' ' : ''}${list}\nextra:\n enabled: true # keep this\n---\n# Body\n`)! + expect(metadata.tags).toEqual(['python', 'rust']) + const prefix = updateMetadataTags(metadata, [...metadata.tags, 'new']) + const updated = splitNoteMetadata(prefix + metadata.body)! + expect(updated.tags).toEqual(['python', 'rust', 'new']) + expect(updated.body).toBe('# Body\n') + const document = parseDocument(updated.yaml) + expect(document.errors).toEqual([]) + expect(document.toJS().extra).toEqual({ enabled: true }) + expect(prefix).toContain('# keep this') + expect(splitNoteMetadata(updateMetadataTags(updated, []))!.tags).toEqual([]) +}) + +it('preserves quoted commas, escapes, multiline titles and nested properties', () => { + const tags = ['a,b', 'quote"tag', 'path\\tag', 'true'] + const metadata = splitNoteMetadata(`---\ntitle: |\n A multiline\n title\ntags: ${JSON.stringify(tags)}\nextra: {count: 2, enabled: false}\n---\n正文`)! + expect(metadata.tags).toEqual(tags) + const updated = splitNoteMetadata(updateMetadataTags(metadata, tags) + metadata.body)! + expect(updated.tags).toEqual(tags) + expect(updated.title).toBe(metadata.title) + expect(parseDocument(updated.yaml).toJS().extra).toEqual({ count: 2, enabled: false }) +}) + +it('preserves document encoding markers and tag anchors', () => { + const metadata = splitNoteMetadata('\uFEFF---\r\ntitle: Demo\r\ntags: &labels [python]\r\nrelated: *labels\r\n---\r\nBody')! + const prefix = updateMetadataTags(metadata, ['rust']) + expect(prefix.startsWith('\uFEFF---\r\n')).toBe(true) + expect(prefix.replace(/\r\n/g, '')).not.toContain('\n') + expect(parseDocument(splitNoteMetadata(prefix)!.yaml).toJS().related).toEqual(['rust']) +}) + +it.each(['tags: [broken', 'tags: [one]\ntags: [two]', 'tags: {nested: value}', 'tags: [1, true]', 'tags: [&label python]\nother: *label'])('leaves invalid or unsupported tag data in source mode: %s', (yaml) => { + expect(splitNoteMetadata(`---\ntitle: Demo\n${yaml}\n---\nBody`)).toBeNull() +}) diff --git a/frontend/src/features/editor/noteMetadata.ts b/frontend/src/features/editor/noteMetadata.ts index cd37bcd..a443081 100644 --- a/frontend/src/features/editor/noteMetadata.ts +++ b/frontend/src/features/editor/noteMetadata.ts @@ -1,23 +1,2 @@ -// TODO(desktop): 第三阶段顶部「段落 → 导入为笔记属性」复用属性解析边界， -// 补齐无损 YAML、冲突合并与可撤销事务；见 docs/contracts/Tauri-Rust桌面客户端需求说明-第三阶段.md。 -export interface NoteMetadata { prefix: string; yaml: string; body: string; title: string; tags: string[] } - -export function splitNoteMetadata(source: string): NoteMetadata | null { - const match = source.match(/^\uFEFF?(---|\*\*\*)[ \t]*\r?\n([\s\S]*?)\r?\n(?:-{3,}|\.\.\.)[ \t]*(?:\r?\n|$)/) - if (!match) return null - const yaml = match[2]! - // Only recognize metadata with explicit fields, not ordinary thematic breaks. - const title = yaml.match(/^title:[ \t]*(.*)$/m)?.[1]?.trim() ?? '' - const rawTags = yaml.match(/^tags:[ \t]*(.*)$/m)?.[1]?.trim() - if (!title && rawTags === undefined) return null - // Complex YAML values remain editable in source mode, never partially rewritten. - if (/^(?:[|>]|\{)/.test(title) || (rawTags === '' && /^\s+-\s/m.test(yaml))) return null - const tags = rawTags?.replace(/^\[|\]$/g, '').split(',').map(tag => tag.trim().replace(/^['"]|['"]$/g, '')).filter(Boolean) ?? [] - return { prefix: match[0], yaml, body: source.slice(match[0].length), title: title.replace(/^['"]|['"]$/g, ''), tags } -} - -export function updateMetadataTags(metadata: NoteMetadata, tags: string[]): string { - const line = `tags: ${JSON.stringify([...new Set(tags)])}` - const yaml = /^tags:/m.test(metadata.yaml) ? metadata.yaml.replace(/^tags:.*$/m, () => line) : `${metadata.yaml}\n${line}` - return `---\n${yaml.trim()}\n---\n` -} +export { splitNoteMetadata, updateMetadataTags } from '@/utils/noteMetadata' +export type { NoteMetadata } from '@/utils/noteMetadata' diff --git a/frontend/src/services/workspaceService.spec.ts b/frontend/src/services/workspaceService.spec.ts index 0092598..d4e634c 100644 --- a/frontend/src/services/workspaceService.spec.ts +++ b/frontend/src/services/workspaceService.spec.ts @@ -50,6 +50,25 @@ afterEach(() => { }) describe('workspaceService backend adapter', () => { + it.each([ + ['tags:\n- python\n- rust', { tags: ['python', 'rust'] }], + ['tags: []', { tags: [] }], + ['tags:', { tags: [] }], + ['tags: ["a,b", rust]', { tags: ['a,b', 'rust'] }], + ['title: Demo', {}], + ['tags: [broken', {}], + ])('saves explicit metadata tags with the same Markdown snapshot: %s', async (yaml, tagPayload) => { + const fetchMock = vi.mocked(fetch) + fetchMock.mockImplementation(async (input) => String(input) === '/api/workspace/open' + ? jsonResponse(workspaceSnapshot) : jsonResponse({})) + await workspaceService.openVault('C:\\data\\vault') + const markdown = `---\n${yaml}\n---\n# Body\n` + await workspaceService.saveFileContent('/课程/操作系统.md', markdown) + const patchCall = fetchMock.mock.calls.find(([, init]) => init?.method === 'PATCH') + expect(String(patchCall?.[0])).toBe('/api/notes/note-os') + expect(JSON.parse(String(patchCall?.[1]?.body))).toEqual({ markdown, ...tagPayload }) + }) + it('opens the configured Vault and reads/saves Markdown through Note API', async () => { const fetchMock = vi.mocked(fetch) fetchMock.mockImplementation(async (input, init) => { diff --git a/frontend/src/services/workspaceService.ts b/frontend/src/services/workspaceService.ts index c70e99c..78c1383 100644 --- a/frontend/src/services/workspaceService.ts +++ b/frontend/src/services/workspaceService.ts @@ -9,6 +9,7 @@ import type { import apiClient from './apiClient' import { t } from '@/i18n' import * as noteService from './noteService' +import { splitNoteMetadata } from '@/utils/noteMetadata' /** Web 联调只连接 AI Core 配置的单一 Vault；多 Vault 选择由 Tauri Host 接管。 */ export interface VaultInfo { @@ -122,7 +123,12 @@ export async function getNoteId(filePath: string): Promise { } export async function saveFileContent(filePath: string, content: string): Promise { - await noteService.updateNote(await requireNoteId(filePath), { markdown: content }) + const metadata = splitNoteMetadata(content) + await noteService.updateNote(await requireNoteId(filePath), { + markdown: content, + // Explicit [] clears the index; absent tags retain API-managed tags. + ...(metadata?.hasTags ? { tags: metadata.tags } : {}), + }) } export async function createFile( diff --git a/frontend/src/utils/noteMetadata.ts b/frontend/src/utils/noteMetadata.ts new file mode 100644 index 0000000..91ed062 --- /dev/null +++ b/frontend/src/utils/noteMetadata.ts @@ -0,0 +1,54 @@ +import { isMap, isScalar, isSeq, parseDocument } from 'yaml' + +export interface NoteMetadata { + prefix: string + yaml: string + body: string + title: string + tags: string[] + hasTags: boolean +} + +function parseProperties(yaml: string) { + const document = parseDocument(yaml) + // Unsupported YAML stays available in source mode without partial rewriting. + if (document.errors.length || document.warnings.length || !isMap(document.contents)) return null + return document +} + +export function splitNoteMetadata(source: string): NoteMetadata | null { + const match = source.match(/^\uFEFF?(---|\*\*\*)[ \t]*\r?\n([\s\S]*?)\r?\n(?:-{3,}|\.\.\.)[ \t]*(?:\r?\n|$)/) + if (!match) return null + const yaml = match[2]! + const document = parseProperties(yaml) + if (!document || (!document.has('title') && !document.has('tags'))) return null + const title = document.get('title') ?? '' + if (typeof title !== 'string') return null + const tagNode = document.get('tags', true) + let tags: string[] = [] + if (isSeq(tagNode)) { + // Do not remove anchored list items that other properties may reference. + if (!tagNode.items.every(item => isScalar(item) && typeof item.value === 'string' && !item.anchor)) return null + tags = tagNode.items.map(item => (item as { value: string }).value) + } else if (isScalar(tagNode)) { + if (typeof tagNode.value === 'string') tags = tagNode.value.split(',').map(tag => tag.trim()).filter(Boolean) + else if (tagNode.value !== null) return null + } else if (tagNode !== undefined) return null + return { prefix: match[0], yaml, body: source.slice(match[0].length), title, tags, hasTags: document.has('tags') } +} + +export function updateMetadataTags(metadata: NoteMetadata, tags: string[]): string { + const document = parseProperties(metadata.yaml) + if (!document) throw new Error('Invalid note metadata') + const previous = document.get('tags', true) + const replacement = document.createNode([...new Set(tags)]) + if (isScalar(previous) || isSeq(previous)) { + replacement.anchor = previous.anchor + replacement.comment = previous.comment + replacement.commentBefore = previous.commentBefore + } + document.set('tags', replacement) + const newline = metadata.prefix.includes('\r\n') ? '\r\n' : '\n' + const prefix = `---\n${document.toString()}---\n`.replace(/\n/g, newline) + return (metadata.prefix.startsWith('\uFEFF') ? '\uFEFF' : '') + prefix +}