feat(frontend): 完善主题导入与手帐工作区并修复 Mermaid 预览

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<HTMLElement>('.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 })
 </script>
@@ -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%;

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 = '<div class="milkdown-code-block"><button class="language-button">Python</button></div>'
+  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')
+})

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<HTMLElement>('.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()
+}

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: '<svg><text>new</text></svg>', 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: '<svg><text>old</text></svg>', 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: ['<img src=x onerror=alert(1)>'], 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('点击编辑')
+})

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
+}