@tnotesjs/ui 0.1.5 → 0.2.1

package/src/components/WordList/RightClickMenu.vue

@@ -1,33 +1,15 @@
 <template>
-  <div
-    v-if="show"
-    class="rightClickMenu"
-    :style="{ left: x + 'px', top: y + 'px' }"
-  >
+  <div v-if="show" class="rightClickMenu" :style="{ left: x + 'px', top: y + 'px' }">
     <div v-if="showPin" class="menuItem" @click="handlePin">📌 Pin</div>
-    <div class="menuItem" @click="(e) => handlePronounce(e, 'en-GB')">
-      📢 Pronounce（英）
-    </div>
-    <div class="menuItem" @click="(e) => handlePronounce(e, 'en-US')">
-      📢 Pronounce（美）
-    </div>
-    <div
-      class="menuItem"
-      @click="(e) => handlePronounceAll(e, 'en-GB')"
-    >
+    <div class="menuItem" @click="(e) => handlePronounce(e, 'en-GB')">📢 Pronounce（英）</div>
+    <div class="menuItem" @click="(e) => handlePronounce(e, 'en-US')">📢 Pronounce（美）</div>
+    <div class="menuItem" @click="(e) => handlePronounceAll(e, 'en-GB')">
       📢 Pronounce All（英）
     </div>
-    <div
-      class="menuItem"
-      @click="(e) => handlePronounceAll(e, 'en-US')"
-    >
+    <div class="menuItem" @click="(e) => handlePronounceAll(e, 'en-US')">
       📢 Pronounce All（美）
     </div>
-    <div
-      v-if="showAutoShowCard"
-      class="menuItem"
-      @click="handleAutoShowCard"
-    >
+    <div v-if="showAutoShowCard" class="menuItem" @click="handleAutoShowCard">
       🔍 Auto Show Card（{{ isAutoShowCard ? '关' : '开' }}）
     </div>
     <div class="menuItem" @click="handleCheckAll">✅ Check All</div>
@@ -43,22 +25,15 @@ defineProps({
   y: Number,
   showPin: {
     type: Boolean,
-    default: true,
+    default: true
   },
   showAutoShowCard: {
     type: Boolean,
-    default: true,
-  },
+    default: true
+  }
 })
 
-const emit = defineEmits([
-  'pin',
-  'pronounce',
-  'pronounceAll',
-  'autoShowCard',
-  'checkAll',
-  'reset',
-])
+const emit = defineEmits(['pin', 'pronounce', 'pronounceAll', 'autoShowCard', 'checkAll', 'reset'])
 const handlePin = (e) => {
   emit('pin')
   e.preventDefault()

package/src/components/WordList/WordList.vue

@@ -3,10 +3,7 @@ import { marked } from 'marked'
 import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue'
 
 import RightClickMenu from './RightClickMenu.vue'
-import {
-  WORD_LIST_FEATURES_FULL,
-  resolveWordListFeatures
-} from './wordListFeatures'
+import { WORD_LIST_FEATURES_FULL, resolveWordListFeatures } from './wordListFeatures'
 
 const DEFAULT_WORDS_BASE_URL = 'https://github.com/tnotesjs/en-words/blob/main/'
 const DEFAULT_WORDS_RAW_BASE_URL =
@@ -15,34 +12,32 @@ const DEFAULT_WORDS_RAW_BASE_URL =
 const props = defineProps({
   words: {
     type: Array,
-    default: () => [],
+    default: () => []
   },
   needSort: {
     type: Boolean,
-    default: false,
+    default: false
   },
   wordsBaseUrl: {
     type: String,
-    default: DEFAULT_WORDS_BASE_URL,
+    default: DEFAULT_WORDS_BASE_URL
   },
   wordsRawBaseUrl: {
     type: String,
-    default: DEFAULT_WORDS_RAW_BASE_URL,
+    default: DEFAULT_WORDS_RAW_BASE_URL
   },
   /** Capability overrides; omit for full web/core behavior. */
   features: {
     type: Object,
-    default: () => ({ ...WORD_LIST_FEATURES_FULL }),
-  },
+    default: () => ({ ...WORD_LIST_FEATURES_FULL })
+  }
 })
 
 const features = computed(() => resolveWordListFeatures(props.features))
 
 const isMobile = computed(() => {
   if (typeof navigator === 'undefined') return false
-  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-    navigator.userAgent
-  )
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
 })
 
 // checkbox ---------------------------------------------------
@@ -51,9 +46,7 @@ const pathname = typeof window !== 'undefined' ? window.location.pathname : ''
 const sortedWords = computed(() => {
   const unique = [...new Set(props.words ?? [])]
   if (!props.needSort) return unique
-  return unique.sort(
-    (a, b) => a.toLowerCase().charCodeAt(0) - b.toLowerCase().charCodeAt(0)
-  )
+  return unique.sort((a, b) => a.toLowerCase().charCodeAt(0) - b.toLowerCase().charCodeAt(0))
 })
 const checkedStates = ref({})
 
@@ -256,7 +249,7 @@ const pinCard = (word) => {
     content: cardContent.value,
     width: CARD_DEFAULT_WIDTH,
     height: CARD_DEFAULT_HEIGHT,
-    zIndex: topZIndex.value++,
+    zIndex: topZIndex.value++
   })
 }
 
@@ -266,7 +259,7 @@ const bringToFront = (card) => {
     pinnedCards.value = [
       ...pinnedCards.value.slice(0, index),
       ...pinnedCards.value.slice(index + 1),
-      { ...card, zIndex: topZIndex.value++ },
+      { ...card, zIndex: topZIndex.value++ }
     ]
   }
 }
@@ -315,10 +308,7 @@ const handleContextMenuPin = () => {
   if (currentWordForContextMenu) {
     const word = currentWordForContextMenu
     // 提前加载内容
-    showWordCard(
-      { clientX: contextMenuX.value, clientY: contextMenuY.value },
-      word
-    ).then(() => {
+    showWordCard({ clientX: contextMenuX.value, clientY: contextMenuY.value }, word).then(() => {
       pinCard(word)
       showCard.value = false
     })
@@ -390,10 +380,7 @@ const handlePronounceAll = (lang) => {
   isPronouncingAll.value = true
 
   const speakNext = async () => {
-    if (
-      !isPronouncingAll.value ||
-      currentPronounceAllIndex.value >= wordsToSpeak.length
-    ) {
+    if (!isPronouncingAll.value || currentPronounceAllIndex.value >= wordsToSpeak.length) {
       stopPronounceAll()
       return
     }
@@ -474,7 +461,7 @@ onUnmounted(() => {
         v-for="(word, index) in sortedWords"
         :key="word"
         :class="{
-          pronounced: isPronouncingAll && currentPronounceAllIndex === index + 1,
+          pronounced: isPronouncingAll && currentPronounceAllIndex === index + 1
         }"
       >
         <span class="index">{{ index + 1 }}.</span>
@@ -491,14 +478,9 @@ onUnmounted(() => {
             )}.md`"
             :class="{
               lineThrough: checkedStates[word],
-              textRed: failedWords[word],
+              textRed: failedWords[word]
             }"
-            @mouseenter="
-              (e) =>
-                features.enableCards &&
-                isAutoShowCard &&
-                showWordCard(e, word)
-            "
+            @mouseenter="(e) => features.enableCards && isAutoShowCard && showWordCard(e, word)"
             @mouseleave="handleMouseLeave"
             @contextmenu="(e) => showContextMenu(e, word)"
             @click.ctrl.exact="(e) => handlePronounce(word)"
@@ -528,7 +510,7 @@ onUnmounted(() => {
           top: card.y + 'px',
           width: card.width + 'px',
           height: card.height + 'px',
-          zIndex: card.zIndex,
+          zIndex: card.zIndex
         }"
         @mousedown="(e) => startDrag(card, e)"
         @click="bringToFront(card)"
@@ -536,13 +518,8 @@ onUnmounted(() => {
         <div class="wordCardContentWrapper">
           <div class="wordCardContent" v-html="card.content"></div>
         </div>
-        <button class="closeBtn" @click.stop="removeCard(card.id)">
-          ✖
-        </button>
-        <div
-          class="resizeHandle"
-          @mousedown.stop="startResize(card, $event)"
-        ></div>
+        <button class="closeBtn" @click.stop="removeCard(card.id)">✖</button>
+        <div class="resizeHandle" @mousedown.stop="startResize(card, $event)"></div>
       </div>
     </template>
   </div>

package/src/entries/bilibili-video.ts

@@ -1 +1 @@
-export { default } from "../components/BilibiliVideo/BilibiliVideo.vue";
+export { default } from '../components/BilibiliVideo/BilibiliVideo.vue'

package/src/entries/excalidraw-editor.ts

@@ -0,0 +1,20 @@
+/**
+ * 画布编辑入口（Desk 专用；SSG 只用 excalidraw-view）。
+ *
+ * 目前导出宿主无关的编辑会话状态机；后续在同一入口补 React 编辑器宿主组件
+ * （稳定实例 + DOM 承载位置交接 + 撤销历史）。
+ */
+export { createExcalidrawSession, persistedSceneSignature } from '../excalidraw/editorSession'
+/**
+ * 编辑器宿主（React + Excalidraw 本体）通过动态 import 暴露，
+ * 保证 `excalidraw-editor` 入口本身不会把编辑器拖进静态依赖图。
+ */
+export const loadExcalidrawHost = () => import('../excalidraw/editorHost')
+export type { ExcalidrawHostHandle, MountExcalidrawHostOptions } from '../excalidraw/editorHost'
+export type {
+  ExcalidrawSaveInput,
+  ExcalidrawSaveResult,
+  ExcalidrawSession,
+  ExcalidrawSessionOptions,
+  ExcalidrawWriteState
+} from '../excalidraw/editorSession'

package/src/entries/excalidraw-view.ts

@@ -0,0 +1,15 @@
+/**
+ * 只读画布入口：Desk 笔记卡片与 SSG 站点共用同一套渲染逻辑。
+ * 导出能力（Excalidraw 本体）由渲染器内部动态 import，首屏不会引入编辑器。
+ */
+export { default as ExcalidrawSvg } from '../excalidraw/ExcalidrawSvg.vue'
+export { createExcalidrawSvgRenderer, toSvgDataUrl } from '../excalidraw/renderer'
+export type {
+  ExcalidrawSvgRenderer,
+  ExcalidrawSvgRendererOptions,
+  ExcalidrawViewState
+} from '../excalidraw/renderer'
+export { parseExcalidrawScene, sceneCacheKey, svgCache, SvgCache } from '../excalidraw/scene'
+/** 部署站点需要把官方字体指向站点内的目录（离线自包含） */
+export { setExcalidrawAssetPath, getExcalidrawAssetPath } from '../excalidraw/fonts'
+export type { ExcalidrawScene, SceneParseResult } from '../excalidraw/scene'

package/src/entries/footprints.ts

@@ -1 +1 @@
-export { default } from "../components/Footprints/Footprints.vue";
+export { default } from '../components/Footprints/Footprints.vue'

package/src/entries/mermaid.ts

@@ -1 +1 @@
-export { default } from "../components/Mermaid/Mermaid.vue";
+export { default } from '../components/Mermaid/Mermaid.vue'

package/src/entries/mindmap.ts

@@ -1 +1 @@
-export { default } from "../components/Mindmap/Mindmap.vue";
+export { default } from '../components/Mindmap/Mindmap.vue'

package/src/entries/notes-table.ts

@@ -1,2 +1,2 @@
-export { default } from "../components/NotesTable/NotesTable.vue";
-export type { NotesTableRow } from "../components/NotesTable/types";
+export { default } from '../components/NotesTable/NotesTable.vue'
+export type { NotesTableRow } from '../components/NotesTable/types'

package/src/entries/word-list.ts

@@ -1 +1 @@
-export { default } from "../components/WordList/WordList.vue";
+export { default } from '../components/WordList/WordList.vue'

package/src/excalidraw/ExcalidrawSvg.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * 共享只读画布：Desk 笔记卡片与 SSG 站点共用。
+ *
+ * 约束（计划 E2）：
+ * - 只读：不挂载可编辑实例、不写任何文件
+ * - 明暗跟随宿主，但只影响显示，不改磁盘 appState
+ * - 导出能力懒加载：首屏不引入 Excalidraw
+ * - 过期结果丢弃；卸载时释放 data URL 与观察器
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import { createExcalidrawSvgRenderer } from './renderer'
+
+const props = withDefaults(
+  defineProps<{
+    /** 磁盘上的原始 JSON（唯一真相源） */
+    content: string
+    /** 不传则跟随宿主的 .dark 类 */
+    theme?: 'light' | 'dark'
+    height?: number | string
+    /** 无障碍描述 */
+    label?: string
+  }>(),
+  { theme: undefined, height: 480, label: 'Excalidraw 绘图' }
+)
+
+const resolvedTheme = ref<'light' | 'dark'>(props.theme ?? 'light')
+let observer: MutationObserver | null = null
+
+const renderer = createExcalidrawSvgRenderer({
+  getContent: () => props.content,
+  getTheme: () => resolvedTheme.value
+})
+
+const { state, errorReason, dataUrl } = renderer
+const heightStyle = computed(() =>
+  typeof props.height === 'number' ? `${props.height}px` : props.height
+)
+
+function readHostTheme(): 'light' | 'dark' {
+  if (props.theme) return props.theme
+  if (typeof document === 'undefined') return 'light'
+  return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+}
+
+onMounted(() => {
+  resolvedTheme.value = readHostTheme()
+  void renderer.render()
+  // SSG 通过切换 <html class="dark"> 换主题；这里只跟随显示，不写任何文件
+  if (!props.theme && typeof MutationObserver !== 'undefined') {
+    observer = new MutationObserver(() => {
+      const next = readHostTheme()
+      if (next !== resolvedTheme.value) resolvedTheme.value = next
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+  }
+})
+
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  observer = null
+  renderer.dispose()
+})
+
+watch(
+  () => props.content,
+  () => void renderer.render()
+)
+watch(resolvedTheme, () => void renderer.render())
+
+defineExpose({ state, errorReason })
+</script>
+
+<template>
+  <div class="tn-excalidraw-view" :style="{ height: heightStyle }" :data-state="state">
+    <img
+      v-if="state === 'ready'"
+      class="tn-excalidraw-view__image"
+      :src="dataUrl"
+      :alt="label"
+      loading="lazy"
+      decoding="async"
+    />
+    <div
+      v-else-if="state === 'error'"
+      class="tn-excalidraw-view__placeholder"
+      role="img"
+      :aria-label="label"
+    >
+      <span>无法显示画布</span>
+      <small>{{ errorReason }}</small>
+    </div>
+    <div v-else class="tn-excalidraw-view__placeholder" :aria-busy="state === 'loading'">
+      <span>画布加载中…</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tn-excalidraw-view {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--tn-excalidraw-bg, transparent);
+}
+.tn-excalidraw-view__image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.tn-excalidraw-view__placeholder {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  color: var(--tn-muted, #8a8a8a);
+  font-size: 13px;
+}
+</style>

package/src/excalidraw/editorHost.ts

@@ -0,0 +1,110 @@
+/**
+ * Excalidraw 编辑器宿主（Desk 专用）。
+ *
+ * 关键行为：
+ * - 稳定实例：切换卡片/全屏/标签页时只**移动承载 DOM 节点**，不重建 React 树，
+ *   否则场景与原生撤销历史都会丢（E0 已实证）
+ * - 承载位置交接后必须重建键盘焦点：E0 实测「blur 当前焦点 + 给交互画布加
+ *   tabindex + canvas.focus()」是唯一有效路径；不重建则快捷键（撤销等）失效
+ * - 内容变化只在需要持久化时回调（宿主用 persistedSceneSignature 过滤）
+ */
+import { createElement } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { Excalidraw, serializeAsJSON } from '@excalidraw/excalidraw'
+// 官方样式表必须由宿主 import 一次：缺它的容器高度会算成 2^24，画布不可见且点不到
+import '@excalidraw/excalidraw/index.css'
+
+import { setExcalidrawAssetPath } from './fonts'
+import { restoreCanvasKeyboardFocusWhenReady } from './focus'
+
+import type {
+  ExcalidrawImperativeAPI,
+  ExcalidrawInitialDataState
+} from '@excalidraw/excalidraw/types'
+
+export interface MountExcalidrawHostOptions {
+  host: HTMLElement
+  /** 初始磁盘内容（唯一真相源） */
+  content: string
+  theme: 'light' | 'dark'
+  /** 本地字体基址；离线必须设置 */
+  fontBase?: string
+  /**
+   * 场景序列化回调。
+   *
+   * 注意：Excalidraw 载入磁盘场景时会补齐自己的字段（groupIds/roundness/gridSize…），
+   * 挂载后的第一次回调就是这份「规范化」结果，**不是用户编辑**。调用方要把它当作
+   * 新的持久化基线（`session.adopt`），否则只读打开也会回写一份规范化副本。
+   */
+  onChange: (content: string) => void
+  onReady?: (api: ExcalidrawImperativeAPI) => void
+}
+
+export interface ExcalidrawHostHandle {
+  /** 只移动承载节点，保持实例与撤销历史 */
+  transferTo(target: HTMLElement): void
+  /** 重建键盘焦点（交接后必须调用） */
+  focus(): void
+  /** 跟随宿主主题切换；不重建实例，只改 appState.theme */
+  setTheme(theme: 'light' | 'dark'): void
+  getApi(): ExcalidrawImperativeAPI | null
+  destroy(): void
+}
+
+/** 磁盘 JSON 的形状由 kb 层保证；这里只做最必要的兜底。 */
+function parseInitial(content: string): ExcalidrawInitialDataState {
+  try {
+    const parsed = JSON.parse(content) as ExcalidrawInitialDataState
+    return {
+      elements: Array.isArray(parsed.elements) ? parsed.elements : [],
+      appState: parsed.appState ?? {},
+      files: parsed.files ?? {}
+    }
+  } catch {
+    return { elements: [], appState: {}, files: {} }
+  }
+}
+
+export { restoreCanvasKeyboardFocus, restoreCanvasKeyboardFocusWhenReady } from './focus'
+
+export function mountExcalidrawHost(options: MountExcalidrawHostOptions): ExcalidrawHostHandle {
+  if (options.fontBase) setExcalidrawAssetPath(options.fontBase)
+  const initial = parseInitial(options.content)
+  let api: ExcalidrawImperativeAPI | null = null
+  const appState = {
+    ...initial.appState,
+    theme: options.theme,
+    // 不做「整篇替换」的展示状态，交给 Excalidraw 自己维护
+    collaborators: new Map()
+  }
+
+  const root: Root = createRoot(options.host)
+  root.render(
+    createElement(Excalidraw, {
+      initialData: { elements: initial.elements, appState, files: initial.files },
+      theme: options.theme,
+      excalidrawAPI: (next: ExcalidrawImperativeAPI) => {
+        api = next
+        options.onReady?.(next)
+      },
+      onChange: (elements, nextAppState, files) => {
+        options.onChange(serializeAsJSON(elements, nextAppState, files, 'local'))
+      }
+    })
+  )
+
+  return {
+    transferTo: (target: HTMLElement) => {
+      if (options.host.parentElement !== target) target.append(options.host)
+      // 换了承载容器：画布尺寸与命中区域都要重算，否则指针事件落在旧几何上
+      api?.refresh?.()
+      restoreCanvasKeyboardFocusWhenReady(options.host)
+    },
+    focus: () => restoreCanvasKeyboardFocusWhenReady(options.host),
+    setTheme: (theme: 'light' | 'dark') => {
+      api?.updateScene({ appState: { theme } })
+    },
+    getApi: () => api,
+    destroy: () => root.unmount()
+  }
+}