@tnotesjs/ui 0.4.2 → 0.4.3

package/src/components/Mindmap/InlineRuns.ts

@@ -1,17 +1,20 @@
 import { parseInlineSegments } from '@tnotesjs/mindmap-core'
 import { defineComponent, h } from 'vue'
 
+import { useMindmapInlineOptions } from './inlineOptions'
+
 export default defineComponent({
   name: 'MindmapInlineRuns',
   props: {
     raw: { type: String, default: '' }
   },
   setup(props) {
+    const inlineOptions = useMindmapInlineOptions()
     return () =>
       h(
         'span',
         { class: 'mindmap-inline-runs' },
-        parseInlineSegments(props.raw).map((segment) => {
+        parseInlineSegments(props.raw, inlineOptions()).map((segment) => {
           const classes = Object.entries(segment.marks)
             .filter(([, enabled]) => enabled)
             .map(([name]) => `is-${name}`)

package/src/components/Mindmap/Mindmap.vue

@@ -11,8 +11,10 @@ import {
   resolvedExpandLevel,
   stepExpandLevel
 } from './expandLevel'
+import { setFullscreenLayer } from '../../browser/fullscreenLayer'
 import { FORCE_EXIT_FULLSCREEN_EVENT, reconcileMindmapFullscreen } from './fullscreenFlag'
 import { normalizeMindmapMarkdown } from './markdown'
+import { provideMindmapInlineOptions } from './inlineOptions'
 import MindmapOutlineNode from './MindmapOutlineNode.vue'
 import MindmapViewIcon from './MindmapViewIcon.vue'
 import FocusBreadcrumbs from './FocusBreadcrumbs.vue'
@@ -96,6 +98,11 @@ const props = withDefaults(
      * (e.g. `./assets/foo.png`). Required for editable paste-to-assets.
      */
     writeAsset?: (blob: Blob) => Promise<{ relativePath: string; alt?: string }>
+    /**
+     * 链接引用定义（`[id]: url`，Desk 从围栏外的笔记正文收集）。
+     * 节点里的 `[文字][id]` / `[文字][]` / `[文字]` 据此显示为链接，写回时保留引用写法。
+     */
+    linkDefinitions?: ReadonlyMap<string, string> | Record<string, string>
   }>(),
   {
     content: '',
@@ -106,7 +113,8 @@ const props = withDefaults(
     height: undefined,
     isDark: undefined,
     resolveImageSrc: undefined,
-    writeAsset: undefined
+    writeAsset: undefined,
+    linkDefinitions: undefined
   }
 )
 
@@ -220,7 +228,8 @@ function rebuildSession(): void {
   suppressChangeEmit = true
   const next = new MindmapSession({
     markdown: normalizedContent.value,
-    fileName: 'mindmap-preview.tn-mindmap.md'
+    fileName: 'mindmap-preview.tn-mindmap.md',
+    definitions: props.linkDefinitions
   })
   applyInitialExpandLevel(next, expandLevel.value)
   const invalidate = () => {
@@ -657,6 +666,19 @@ function handleDocumentKeydown(event: KeyboardEvent): void {
   canvasHost.value?.blur()
 }
 
+provideMindmapInlineOptions(() => session.value?.inlineOptions ?? {})
+
+/** 定义变了（笔记里改了 `[1]: url`）就按新定义重建会话；内容不变时不重建。 */
+const definitionsKey = computed(() => {
+  const defs = props.linkDefinitions
+  if (!defs) return ''
+  const entries = defs instanceof Map ? [...defs.entries()] : Object.entries(defs)
+  return JSON.stringify(entries)
+})
+watch(definitionsKey, (value, previous) => {
+  if (value !== previous && session.value) rebuildSession()
+})
+
 watch(
   normalizedContent,
   (value) => {
@@ -722,9 +744,12 @@ onMounted(() => {
   createViewer()
 })
 
+watch(isFullscreen, (on) => setFullscreenLayer(previewRoot.value, on), { flush: 'sync' })
+
 onBeforeUnmount(() => {
   mounted = false
   exitFullscreenOverlay()
+  setFullscreenLayer(previewRoot.value, false)
   unregisterFullscreenOwner?.()
   unregisterFullscreenOwner = null
   themeObserver?.disconnect()
@@ -1178,11 +1203,6 @@ onBeforeUnmount(() => {
 .mindmap-canvas-host:deep(.mm-edit-input .inline-run.underline.strike) {
   text-decoration-line: underline line-through;
 }
-.mindmap-canvas-host:deep(.mm-edit-input .inline-run.highlight:not(.code)) {
-  padding: 0 1px;
-  border-radius: 2px;
-  background: var(--tn-c-mark-bg, rgba(255, 221, 0, 0.45));
-}
 .mindmap-canvas-host:deep(.mm-edit-input .inline-run.code) {
   padding: 0 4px;
   border: 1px solid var(--tn-c-inline-code-border);
@@ -1342,11 +1362,6 @@ onBeforeUnmount(() => {
 .mindmap-outline :deep(.is-strike) {
   text-decoration: line-through;
 }
-.mindmap-outline :deep(.is-highlight) {
-  padding: 0 2px;
-  border-radius: 2px;
-  background: var(--tn-c-mark-bg, rgba(255, 221, 0, 0.45));
-}
 .mindmap-outline :deep(.is-code) {
   padding: 0 4px;
   border: 1px solid var(--tn-c-inline-code-border);

package/src/components/Mindmap/editor/AppIcon.vue

@@ -66,9 +66,6 @@ defineProps<{ name: string; size?: number }>()
       <circle cx="9" cy="9" r="2" />
       <path d="m4 17 5-5 3 3 2-2 6 6" />
     </template>
-    <template v-else-if="name === 'highlight'">
-      <path d="m14.5 4.5 5 5-8.2 8.2-5.6.6.6-5.6zM12.5 6.5l5 5M4 21h16" />
-    </template>
     <template v-else-if="name === 'link'">
       <path
         d="M10 13a5 5 0 0 0 7.5.5l2-2a5 5 0 0 0-7-7l-1.2 1.2M14 11a5 5 0 0 0-7.5-.5l-2 2a5 5 0 0 0 7 7l1.2-1.2"

package/src/components/Mindmap/editor/MindmapView.vue

@@ -48,7 +48,7 @@ const textFormats = computed<Partial<Record<InlineFormat, boolean>>>(() => {
   const state = editState.value
   const selection = textSelection.value
   if (!state || !selection) return {}
-  const formats: InlineFormat[] = ['bold', 'italic', 'underline', 'strike', 'highlight', 'code']
+  const formats: InlineFormat[] = ['bold', 'italic', 'underline', 'strike', 'code']
   return Object.fromEntries(
     formats.map((format) => [
       format,
@@ -357,4 +357,19 @@ onBeforeUnmount(() => {
   outline: none;
   background: var(--mm-canvas-bg);
 }
+/* CanvasEditor 在宿主上切换这些状态类；光标规则原在已删除的独立 app 样式里，这里补回。 */
+.mindmap-view-host.mm-editor {
+  cursor: default;
+}
+.mindmap-view-host.mm-editor.is-space-pan {
+  cursor: grab;
+}
+.mindmap-view-host.mm-editor.is-panning,
+.mindmap-view-host.mm-editor.is-node-dragging {
+  cursor: grabbing;
+}
+.mindmap-view-host.mm-editor.is-link-hover,
+.mindmap-view-host.mm-editor.is-control-hover {
+  cursor: pointer;
+}
 </style>

package/src/components/Mindmap/editor/OutlineView.vue

@@ -116,6 +116,15 @@ function measureTextBlockHeight(
   return Math.max(minHeight, lines.length * lineHeight + 8)
 }
 
+function imageSizeLabel(node: MindmapNode): string {
+  if (!liveImageWidth.value.has(node.id) || !node.content.image) return ''
+  const width = displayImageWidth(node)
+  const aspect = imageAspects.value.get(node.content.image.src) ?? 1
+  const height = Math.min(Math.round(width / Math.max(aspect, 0.15)), IMG_MAX_H)
+  if (width < 88 || height < 32) return ''
+  return `${Math.round(width)} x ${height}`
+}
+
 function displayImageWidth(node: MindmapNode): number {
   const live = liveImageWidth.value.get(node.id)
   if (live != null) return live
@@ -376,7 +385,7 @@ const selectedTextFormats = computed<Partial<Record<InlineFormat, boolean>>>(()
   if (props.version < 0) return {}
   const selection = textSelection.value
   if (!selection) return {}
-  const formats: InlineFormat[] = ['bold', 'italic', 'underline', 'strike', 'highlight', 'code']
+  const formats: InlineFormat[] = ['bold', 'italic', 'underline', 'strike', 'code']
   return Object.fromEntries(
     formats.map((format) => [
       format,
@@ -703,7 +712,6 @@ function inlineFormatShortcut(event: KeyboardEvent, hasSelection = true): Inline
   if (key === 'u' && !event.shiftKey) return 'underline'
   if (key === 'enter' && !event.shiftKey && hasSelection) return 'strike'
   if ((key === 's' || key === 'x') && event.shiftKey) return 'strike'
-  if (key === 'h' && event.shiftKey) return 'highlight'
   if (key === 'e' && !event.shiftKey) return 'code'
   return null
 }
@@ -1259,7 +1267,7 @@ function onEditorPasteMultiline(node: MindmapNode, text: string) {
       return `${m[1]}- ${m[2]}`
     })
     .join('\n')
-  const { doc: tmp } = parseMarkdown(`# _\n\n${fragment}\n`)
+  const { doc: tmp } = parseMarkdown(`# _\n\n${fragment}\n`, '_', session.inlineOptions)
   const nodes = tmp.root.children.map((c) => cloneSubtree(c))
   if (nodes.length === 0) return
 
@@ -1506,7 +1514,19 @@ function onImageResizeUp() {
 
 // ---------- 键盘导航（焦点在容器、非编辑态时） ----------
 
+function isNativeTextEntry(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  return (
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target.isContentEditable
+  )
+}
+
 function onKeydown(e: KeyboardEvent) {
+  // 容器内的独立输入框（如 LinkPopover 的链接地址）冒泡上来的按键交给其原生行为，
+  // 否则 ←/→ 会被当成折叠/展开、Backspace/Delete 会删节点。
+  if (e.target !== e.currentTarget && isNativeTextEntry(e.target)) return
   const session = props.session
   const sel = session.selectedNode
   const mod = e.metaKey || e.ctrlKey
@@ -2035,6 +2055,9 @@ function onDragUp() {
             @load="onOutlineImageLoad(focusRoot.content.image.src, $event)"
             @click="onImageClick(focusRoot, $event)"
           />
+          <span v-if="imageSizeLabel(focusRoot)" class="row-image-size">{{
+            imageSizeLabel(focusRoot)
+          }}</span>
           <span
             class="row-image-handle"
             title="拖动调节宽度"
@@ -2181,6 +2204,9 @@ function onDragUp() {
               @load="onOutlineImageLoad(row.node.content.image.src, $event)"
               @click="onImageClick(row.node, $event)"
             />
+            <span v-if="imageSizeLabel(row.node)" class="row-image-size">{{
+              imageSizeLabel(row.node)
+            }}</span>
             <span
               class="row-image-handle"
               title="拖动调节宽度"
@@ -2360,6 +2386,21 @@ function onDragUp() {
   cursor: zoom-in;
   user-select: none;
 }
+.row-image-size {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: rgb(0 0 0 / 62%);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+  pointer-events: none;
+}
 .row-image-handle {
   position: absolute;
   right: 0;

package/src/components/Mindmap/editor/RichInlineEditor.vue

@@ -12,6 +12,8 @@ import {
 } from '@tnotesjs/mindmap-core'
 import type { InlineLink, RichInlineEditorElement } from '@tnotesjs/mindmap-core'
 
+import { useMindmapInlineOptions } from '../inlineOptions'
+
 const props = withDefaults(
   defineProps<{
     editorId: string
@@ -43,6 +45,7 @@ const emit = defineEmits<{
   linkClick: [link: InlineLink, event: Event]
 }>()
 
+const inlineOptions = useMindmapInlineOptions()
 const rootRef = ref<RichInlineEditorElement>()
 const draftRaw = ref(props.raw)
 let sourceRaw = props.raw
@@ -50,17 +53,17 @@ let dirty = false
 let composing = false
 let compositionBaseRaw = props.raw
 
-const text = computed(() => stripInline(draftRaw.value))
+const text = computed(() => stripInline(draftRaw.value, inlineOptions()))
 
 function renderInlineDom() {
   const root = rootRef.value
   if (!root) return
   const fragment = document.createDocumentFragment()
   let plainOffset = 0
-  for (const segment of parseInlineSegments(draftRaw.value)) {
+  for (const segment of parseInlineSegments(draftRaw.value, inlineOptions())) {
     const run = document.createElement('span')
     run.className = 'inline-run'
-    for (const format of ['bold', 'italic', 'underline', 'strike', 'highlight', 'code'] as const) {
+    for (const format of ['bold', 'italic', 'underline', 'strike', 'code'] as const) {
       if (segment.marks[format]) run.classList.add(format)
     }
     if (segment.link) {
@@ -89,7 +92,7 @@ function renderInlineDom() {
 }
 
 function payload(): DraftPayload {
-  return { raw: draftRaw.value, text: stripInline(draftRaw.value) }
+  return { raw: draftRaw.value, text: stripInline(draftRaw.value, inlineOptions()) }
 }
 
 function renderDraft(
@@ -120,7 +123,14 @@ function replaceSelection(textToInsert: string) {
     focus: text.value.length,
     direction: 'forward' as const
   }
-  const nextRaw = replaceInlineRange(draftRaw.value, selection.start, selection.end, textToInsert)
+  const nextRaw = replaceInlineRange(
+    draftRaw.value,
+    selection.start,
+    selection.end,
+    textToInsert,
+    undefined,
+    inlineOptions()
+  )
   const caret = selection.start + textToInsert.length
   renderDraft(nextRaw, { start: caret })
 }
@@ -148,7 +158,14 @@ function onBeforeInput(event: InputEvent) {
   if (event.inputType === 'insertText' || event.inputType === 'insertReplacementText') {
     if (event.data == null) return
     event.preventDefault()
-    const nextRaw = replaceInlineRange(draftRaw.value, selection.start, selection.end, event.data)
+    const nextRaw = replaceInlineRange(
+      draftRaw.value,
+      selection.start,
+      selection.end,
+      event.data,
+      undefined,
+      inlineOptions()
+    )
     renderDraft(nextRaw, { start: selection.start + event.data.length })
     return
   }
@@ -159,7 +176,10 @@ function onBeforeInput(event: InputEvent) {
       selection.start === selection.end
         ? previousGraphemeOffset(text.value, selection.start)
         : selection.start
-    renderDraft(replaceInlineRange(draftRaw.value, start, selection.end, ''), { start })
+    renderDraft(
+      replaceInlineRange(draftRaw.value, start, selection.end, '', undefined, inlineOptions()),
+      { start }
+    )
     return
   }
 
@@ -169,17 +189,30 @@ function onBeforeInput(event: InputEvent) {
       selection.start === selection.end
         ? nextGraphemeOffset(text.value, selection.end)
         : selection.end
-    renderDraft(replaceInlineRange(draftRaw.value, selection.start, end, ''), {
-      start: selection.start
-    })
+    renderDraft(
+      replaceInlineRange(draftRaw.value, selection.start, end, '', undefined, inlineOptions()),
+      {
+        start: selection.start
+      }
+    )
     return
   }
 
   if (event.inputType === 'deleteByCut') {
     event.preventDefault()
-    renderDraft(replaceInlineRange(draftRaw.value, selection.start, selection.end, ''), {
-      start: selection.start
-    })
+    renderDraft(
+      replaceInlineRange(
+        draftRaw.value,
+        selection.start,
+        selection.end,
+        '',
+        undefined,
+        inlineOptions()
+      ),
+      {
+        start: selection.start
+      }
+    )
     return
   }
 
@@ -201,7 +234,10 @@ function onInput(event: InputEvent) {
   const nextText = (root.textContent ?? '').replace(/[\r\n]/g, '')
   if (nextText === text.value) return
   const selection = richSelectionOffsets(root)
-  renderDraft(replaceInlineDisplayText(draftRaw.value, nextText), selection ?? undefined)
+  renderDraft(
+    replaceInlineDisplayText(draftRaw.value, nextText, inlineOptions()),
+    selection ?? undefined
+  )
 }
 
 function onCompositionStart() {
@@ -216,7 +252,10 @@ function finishComposition() {
   const nextText = (root.textContent ?? '').replace(/[\r\n]/g, '')
   const selection = richSelectionOffsets(root)
   composing = false
-  renderDraft(replaceInlineDisplayText(compositionBaseRaw, nextText), selection ?? undefined)
+  renderDraft(
+    replaceInlineDisplayText(compositionBaseRaw, nextText, inlineOptions()),
+    selection ?? undefined
+  )
 }
 
 function onCompositionEnd() {
@@ -308,9 +347,9 @@ function installCompatibilityApi(root: RichInlineEditorElement) {
   Object.defineProperties(root, {
     value: {
       configurable: true,
-      get: () => stripInline(draftRaw.value),
+      get: () => stripInline(draftRaw.value, inlineOptions()),
       set: (next: string) => {
-        renderDraft(replaceInlineDisplayText(draftRaw.value, String(next)))
+        renderDraft(replaceInlineDisplayText(draftRaw.value, String(next), inlineOptions()))
       }
     },
     rawValue: { configurable: true, get: () => draftRaw.value },
@@ -413,11 +452,6 @@ onBeforeUnmount(emitCommit)
 .rich-inline-editor :deep(.inline-run.underline.strike) {
   text-decoration-line: underline line-through;
 }
-.rich-inline-editor :deep(.inline-run.highlight:not(.code)) {
-  padding: 0 1px;
-  border-radius: 2px;
-  background: var(--tn-c-mark-bg, rgba(255, 221, 0, 0.45));
-}
 .rich-inline-editor :deep(.inline-run.code) {
   padding: 0 4px;
   border: 1px solid var(--tn-c-inline-code-border, #e7e9e8);

package/src/components/Mindmap/editor/SearchBar.vue

@@ -78,7 +78,6 @@ function inlineFormatShortcut(event: KeyboardEvent, hasSelection = true): Inline
   if (key === 'u' && !event.shiftKey) return 'underline'
   if (key === 'enter' && !event.shiftKey && hasSelection) return 'strike'
   if ((key === 's' || key === 'x') && event.shiftKey) return 'strike'
-  if (key === 'h' && event.shiftKey) return 'highlight'
   if (key === 'e' && !event.shiftKey) return 'code'
   return null
 }
@@ -182,7 +181,14 @@ function replacedNodeValue(
   }
   let raw = node.content.raw
   for (const range of [...selectedRanges].reverse()) {
-    raw = replaceInlineRange(raw, range.start, range.end, replacement.value)
+    raw = replaceInlineRange(
+      raw,
+      range.start,
+      range.end,
+      replacement.value,
+      undefined,
+      props.session.inlineOptions
+    )
   }
   return { raw, text: node.content.text, count: selectedRanges.length }
 }

package/src/components/Mindmap/editor/SelectionToolbar.vue

@@ -44,8 +44,7 @@ const formats: Array<{ id: InlineFormat; text: string; label: string }> = [
   { id: 'bold', text: 'B', label: `加粗 (${primaryShortcut('B')})` },
   { id: 'italic', text: 'I', label: `斜体 (${primaryShortcut('I')})` },
   { id: 'underline', text: 'U', label: `下划线 (${primaryShortcut('U')})` },
-  { id: 'strike', text: 'S', label: `删除线 (${primaryShortcut('Enter')})` },
-  { id: 'highlight', text: '▰', label: '高亮' }
+  { id: 'strike', text: 'S', label: `删除线 (${primaryShortcut('Enter')})` }
 ]
 
 const toolbarRef = ref<HTMLElement | null>(null)
@@ -113,8 +112,7 @@ onBeforeUnmount(() => window.removeEventListener('resize', measureToolbar))
         :aria-label="item.label"
         @click="emit('format', item.id)"
       >
-        <AppIcon v-if="item.id === 'highlight'" name="highlight" :size="21" />
-        <template v-else>{{ item.text }}</template>
+        {{ item.text }}
       </button>
       <span class="toolbar-divider" />
     </template>
@@ -284,9 +282,6 @@ onBeforeUnmount(() => window.removeEventListener('resize', measureToolbar))
 .format-button.is-strike {
   text-decoration: line-through;
 }
-.format-button.is-highlight {
-  color: #d3c900;
-}
 .tool-button.danger {
   color: #e14f5b;
 }

package/src/components/Mindmap/editor/mindmapClipboard.ts

@@ -1,12 +1,12 @@
 import { cloneSubtree, parseMarkdown } from '@tnotesjs/mindmap-core'
-import type { MindmapNode, MindmapSession } from '@tnotesjs/mindmap-core'
+import type { InlineParseOptions, MindmapNode, MindmapSession } from '@tnotesjs/mindmap-core'
 
 const LIST_LINE_RE = /^\s*[-*+]\s+/
 
 /** In-app fallback when Electron denies async Clipboard API (common in Desk). */
 let mindmapClipboardBuffer = ''
 
-function clipboardNodes(text: string): MindmapNode[] {
+function clipboardNodes(text: string, options?: InlineParseOptions): MindmapNode[] {
   const fragment = text
     .split(/\r?\n/)
     .filter((line) => line.trim() !== '')
@@ -17,7 +17,7 @@ function clipboardNodes(text: string): MindmapNode[] {
     })
     .join('\n')
   if (!fragment) return []
-  const parsed = parseMarkdown(`# _\n\n${fragment}\n`)
+  const parsed = parseMarkdown(`# _\n\n${fragment}\n`, '_', options)
   if (!parsed.valid) return []
   return parsed.doc.root.children.map((node) => cloneSubtree(node))
 }
@@ -74,7 +74,7 @@ export function pasteCanvasOutline(
   anchorId: string,
   text: string
 ): string[] {
-  const nodes = clipboardNodes(text)
+  const nodes = clipboardNodes(text, session.inlineOptions)
   const anchor = session.document.find(anchorId)
   if (!anchor || nodes.length === 0) return []
   const insertedIds: string[] = []

package/src/components/Mindmap/inlineOptions.ts

@@ -0,0 +1,21 @@
+import { inject, provide } from 'vue'
+
+import type { InlineParseOptions } from '@tnotesjs/mindmap-core'
+import type { InjectionKey } from 'vue'
+
+/**
+ * 当前导图的行内解析选项（链接引用定义等）。由 Mindmap.vue 按会话提供，
+ * 大纲行、行内编辑器据此把 `[文字][id]` 渲染成链接、编辑后写回引用写法。
+ */
+const MINDMAP_INLINE_OPTIONS: InjectionKey<() => InlineParseOptions> =
+  Symbol('mindmapInlineOptions')
+
+const NO_OPTIONS = (): InlineParseOptions => ({})
+
+export function provideMindmapInlineOptions(get: () => InlineParseOptions): void {
+  provide(MINDMAP_INLINE_OPTIONS, get)
+}
+
+export function useMindmapInlineOptions(): () => InlineParseOptions {
+  return inject(MINDMAP_INLINE_OPTIONS, NO_OPTIONS)
+}

package/src/components/WordList/WordList.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { marked } from 'marked'
-import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { computed, ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
 
 import RightClickMenu from './RightClickMenu.vue'
 import { WORD_LIST_FEATURES_FULL, resolveWordListFeatures } from './wordListFeatures'
+import { wordListStorageKey } from './wordListStorage'
 
 const DEFAULT_WORDS_BASE_URL = 'https://github.com/tnotesjs/en-words/blob/main/'
 const DEFAULT_WORDS_RAW_BASE_URL =
@@ -30,6 +31,14 @@ const props = defineProps({
   features: {
     type: Object,
     default: () => ({ ...WORD_LIST_FEATURES_FULL })
+  },
+  /**
+   * 勾选态 localStorage 键的作用域。不传时用 `window.location.pathname`（SSG 一页一路径）；
+   * Desk 单页承载多篇笔记，需注入知识库 + 笔记维度，避免勾选态跨笔记串用。
+   */
+  storageScope: {
+    type: String,
+    default: ''
   }
 })
 
@@ -51,8 +60,18 @@ const sortedWords = computed(() => {
 const islandWords = computed(() => encodeURIComponent(JSON.stringify(sortedWords.value)))
 const checkedStates = ref({})
 
+const storageKey = (word) => wordListStorageKey(props.storageScope, pathname, word)
+
+const loadCheckedStates = () => {
+  const next = {}
+  sortedWords.value.forEach((word) => {
+    next[word] = localStorage.getItem(storageKey(word)) === 'true'
+  })
+  checkedStates.value = next
+}
+
 const updateCheckedState = (word, isChecked) => {
-  const key = `${pathname}-${word}`
+  const key = storageKey(word)
   checkedStates.value[word] = isChecked
   localStorage.setItem(key, isChecked)
 }
@@ -66,8 +85,7 @@ const checkAll = () => {
 
 const reset = () => {
   sortedWords.value.forEach((word) => {
-    const key = `${pathname}-${word}`
-    localStorage.removeItem(key)
+    localStorage.removeItem(storageKey(word))
     checkedStates.value[word] = false
   })
   hideContextMenu()
@@ -448,11 +466,7 @@ const handlePronounce = (word, lang = 'en-GB') => {
 // hooks ----------------------------------------------------------
 
 onMounted(() => {
-  sortedWords.value.forEach((word) => {
-    const key = `${pathname}-${word}`
-    const storedState = localStorage.getItem(key)
-    checkedStates.value[word] = storedState === 'true'
-  })
+  loadCheckedStates()
 
   if (!isMobile.value && features.value.enableWordData) preloadWords()
 
@@ -462,6 +476,12 @@ onMounted(() => {
   }
 })
 
+// 作用域或词表变了（同一实例换了笔记 / 词表）就按新键重新回读，不沿用旧勾选态
+watch(
+  () => [props.storageScope, islandWords.value],
+  () => loadCheckedStates()
+)
+
 /**
  * 销毁时清理定时器
  */

package/src/components/WordList/wordListStorage.ts

@@ -0,0 +1,21 @@
+/**
+ * WordList 勾选态的 localStorage 键。
+ *
+ * - SSG：一页一个 pathname，不传作用域，沿用 `${pathname}-${word}`（兼容已存的勾选记录）。
+ * - Desk：所有笔记共用同一个 index.html，pathname 固定，必须由宿主注入笔记维度的作用域
+ *   （见 {@link deskWordListStorageScope}），否则勾选态会在笔记之间串用。
+ */
+export function wordListStorageKey(
+  storageScope: string | null | undefined,
+  pathname: string,
+  word: string
+): string {
+  const scope = storageScope ? storageScope : pathname
+  return `${scope}-${word}`
+}
+
+/** Desk 的作用域：知识库 + 笔记 uuid。缺任一项时返回空串，由组件退回 pathname。 */
+export function deskWordListStorageScope(knowledgeBaseId: string, noteUuid: string): string {
+  if (!knowledgeBaseId || !noteUuid) return ''
+  return `tnotes-desk:word-list:${knowledgeBaseId}:${noteUuid}`
+}

package/src/index.ts

@@ -11,6 +11,7 @@ export {
   resolveWordListFeatures
 } from './components/WordList/wordListFeatures'
 export type { WordListFeatures } from './components/WordList/wordListFeatures'
+export { deskWordListStorageScope, wordListStorageKey } from './components/WordList/wordListStorage'
 export {
   clampMindmapHeight,
   MINDMAP_MAX_HEIGHT,
@@ -31,6 +32,7 @@ export { default as CodeBlock } from './components/CodeBlock/CodeBlock.vue'
 export { default as CodeGroup } from './components/CodeGroup/CodeGroup.vue'
 export { default as ImagePreview } from './components/ImagePreview/ImagePreview.vue'
 export * from './browser/clipboard'
+export * from './browser/fullscreenLayer'
 export * from './browser/theme'
 export * from './code/highlight'
 export {
@@ -39,3 +41,4 @@ export {
   createSwiperTabNav,
   wrapSlideIndex
 } from './swiper/hydrate'
+export { default as ContributionHeatmap } from './components/ContributionHeatmap/ContributionHeatmap.vue'