@tnotesjs/ui 0.1.0

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

@@ -0,0 +1,93 @@
+import { cloneSubtree, parseMarkdown } from '@tnotesjs/mindmap-core'
+import type { 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[] {
+  const fragment = text
+    .split(/\r?\n/)
+    .filter((line) => line.trim() !== '')
+    .map((line) => {
+      if (LIST_LINE_RE.test(line)) return line
+      const match = /^(\s*)(.*)$/.exec(line)!
+      return `${match[1]}- ${match[2]}`
+    })
+    .join('\n')
+  if (!fragment) return []
+  const parsed = parseMarkdown(`# _\n\n${fragment}\n`)
+  if (!parsed.valid) return []
+  return parsed.doc.root.children.map((node) => cloneSubtree(node))
+}
+
+/** Sync write that survives Electron's missing clipboard permission. */
+export function writeMindmapClipboard(text: string, event?: ClipboardEvent | null): void {
+  mindmapClipboardBuffer = text
+  if (event?.clipboardData) {
+    event.clipboardData.setData('text/plain', text)
+    return
+  }
+  try {
+    const textarea = document.createElement('textarea')
+    textarea.value = text
+    textarea.setAttribute('readonly', '')
+    textarea.style.position = 'fixed'
+    textarea.style.left = '-9999px'
+    textarea.style.top = '0'
+    textarea.style.opacity = '0'
+    document.body.append(textarea)
+    textarea.focus()
+    textarea.select()
+    document.execCommand('copy')
+    textarea.remove()
+  } catch {
+    // fall through to async API
+  }
+  void navigator.clipboard?.writeText(text).catch(() => {
+    // Buffer above still enables in-app Cmd+V.
+  })
+}
+
+export async function readMindmapClipboard(event?: ClipboardEvent | null): Promise<string> {
+  const fromEvent = event?.clipboardData?.getData('text/plain') ?? ''
+  if (fromEvent.trim()) {
+    mindmapClipboardBuffer = fromEvent
+    return fromEvent
+  }
+  try {
+    const fromApi = (await navigator.clipboard?.readText?.()) ?? ''
+    if (fromApi.trim()) {
+      mindmapClipboardBuffer = fromApi
+      return fromApi
+    }
+  } catch {
+    // Electron often denies readText without an explicit permission grant.
+  }
+  return mindmapClipboardBuffer
+}
+
+/** 把剪贴板中的普通文字 / Markdown 列表作为当前主题后的同级子树插入。 */
+export function pasteCanvasOutline(session: MindmapSession, anchorId: string, text: string): string[] {
+  const nodes = clipboardNodes(text)
+  const anchor = session.document.find(anchorId)
+  if (!anchor || nodes.length === 0) return []
+  const insertedIds: string[] = []
+  session.transact((doc) => {
+    const parent = anchor === session.focusRootNode ? anchor : (anchor.parent ?? session.focusRootNode)
+    let index = anchor === session.focusRootNode ? parent.children.length : parent.children.indexOf(anchor) + 1
+    for (const source of nodes) {
+      const inserted = doc.addNode(
+        parent,
+        { ...source.content, image: source.content.image ? { ...source.content.image } : null },
+        index++,
+      )
+      inserted.collapsed = source.collapsed
+      for (const child of [...source.children]) doc.move(child, inserted, inserted.children.length)
+      insertedIds.push(inserted.id)
+    }
+  })
+  session.selectMany(insertedIds, insertedIds[insertedIds.length - 1] ?? null, insertedIds[0] ?? null)
+  return insertedIds
+}

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

@@ -0,0 +1,29 @@
+import type { MindmapNode } from '@tnotesjs/mindmap-core'
+
+export interface DropLevel {
+  node: MindmapNode
+  depth: number
+}
+
+/**
+ * 根据横向指针位置解析“插到哪个祖先之后”。
+ * 每越过一条缩进线就提升一级；是否为末子不影响提升，否则普通兄弟无法拖回顶层。
+ */
+export function resolveAfterDropLevel(
+  anchor: MindmapNode,
+  focusRoot: MindmapNode,
+  clientX: number,
+  indentEdge: number,
+  depth: number,
+  indent: number,
+): DropLevel {
+  let node = anchor
+  let nextDepth = depth
+  let edge = indentEdge
+  while (node.parent && node.parent !== focusRoot && clientX <= edge && nextDepth > 0) {
+    node = node.parent
+    nextDepth -= 1
+    edge -= indent
+  }
+  return { node, depth: nextDepth }
+}

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

@@ -0,0 +1,18 @@
+function platformName(): string {
+  if (typeof navigator === 'undefined') return ''
+  const data = navigator as Navigator & { userAgentData?: { platform?: string } }
+  return `${data.userAgentData?.platform ?? ''} ${navigator.platform ?? ''} ${navigator.userAgent ?? ''}`.toLowerCase()
+}
+
+export function isApplePlatform(): boolean {
+  return /mac|iphone|ipad|ipod/.test(platformName())
+}
+
+export function primaryShortcut(key: string, options: { shift?: boolean } = {}): string {
+  if (isApplePlatform()) return `${options.shift ? '⇧' : ''}⌘${key}`
+  return `Ctrl+${options.shift ? 'Shift+' : ''}${key}`
+}
+
+export function altShortcut(key: string): string {
+  return isApplePlatform() ? `⌥${key}` : `Alt+${key}`
+}

package/src/components/Mindmap/expandLevel.ts

@@ -0,0 +1,28 @@
+import type { MindmapNode, MindmapSession } from '@tnotesjs/mindmap-core'
+
+export function normalizeExpandLevel(value: number): number {
+  return Math.max(1, Math.trunc(Number(value) || 1))
+}
+
+function childLevel(node: MindmapNode, root: MindmapNode): number {
+  let level = 0
+  let current: MindmapNode | null = node
+  while (current && current !== root) {
+    level += 1
+    current = current.parent
+  }
+  return level
+}
+
+/**
+ * Level 1 renders root + direct children; level 2 additionally renders
+ * grandchildren. Nodes at the last visible level are collapsed.
+ */
+export function applyInitialExpandLevel(session: MindmapSession, value: number): void {
+  const visibleLevel = normalizeExpandLevel(value)
+  const root = session.document.root
+  session.document.traverse((node) => {
+    if (node === root || node.children.length === 0) return
+    session.setCollapsed(node.id, childLevel(node, root) >= visibleLevel)
+  })
+}

package/src/components/Mindmap/icons/icon__fullscreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="#646cff" d="M9.793 12.793a1 1 0 0 1 1.497 1.32l-.083.094L6.414 19H9a1 1 0 0 1 .117 1.993L9 21H4a1 1 0 0 1-.993-.883L3 20v-5a1 1 0 0 1 1.993-.117L5 15v2.586zM20 3a1 1 0 0 1 .993.883L21 4v5a1 1 0 0 1-1.993.117L19 9V6.414l-4.793 4.793a1 1 0 0 1-1.497-1.32l.083-.094L17.586 5H15a1 1 0 0 1-.117-1.993L15 3z"/></g></svg>

package/src/components/Mindmap/icons/icon__fullscreen_exit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#646cff" d="m10 15.4l-5.9 5.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7L8.6 14H5q-.425 0-.712-.288T4 13t.288-.712T5 12h6q.425 0 .713.288T12 13v6q0 .425-.288.713T11 20t-.712-.288T10 19zm5.4-5.4H19q.425 0 .713.288T20 11t-.288.713T19 12h-6q-.425 0-.712-.288T12 11V5q0-.425.288-.712T13 4t.713.288T14 5v3.6l5.9-5.9q.275-.275.7-.275t.7.275t.275.7t-.275.7z"/></svg>

package/src/components/Mindmap/icons/icon__zoom_fit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#646cff" d="M17 4h3c1.1 0 2 .9 2 2v2h-2V6h-3zM4 8V6h3V4H4c-1.1 0-2 .9-2 2v2zm16 8v2h-3v2h3c1.1 0 2-.9 2-2v-2zM7 18H4v-2H2v2c0 1.1.9 2 2 2h3zm9-8v4H8v-4zm2-2H6v8h12z"/></svg>

package/src/components/Mindmap/markdown.ts

@@ -0,0 +1,83 @@
+export interface MindmapFenceOptions {
+  title?: string
+  initialExpandLevel?: number
+}
+
+export interface MindmapReference {
+  path: string
+  title?: string
+}
+
+function cleanHeadingText(value: string): string {
+  return value.trim().replace(/\s+#+\s*$/, '').trim()
+}
+
+/** Parse the canonical `mindmap [title] 2` fence metadata. */
+export function parseMindmapFence(openLine: string): MindmapFenceOptions | null {
+  const fenceBody = openLine.trim().replace(/^`+\s*/, '')
+  const nameMatch = fenceBody.match(/^mindmap(?=\s|\[|$)/)
+  if (!nameMatch) return null
+
+  let rest = fenceBody.slice(nameMatch[0].length).trim()
+  const options: MindmapFenceOptions = {}
+  const titleMatch = rest.match(/\[([^\]]+)\]/)
+  if (titleMatch) {
+    options.title = cleanHeadingText(titleMatch[1]) || undefined
+    rest = `${rest.slice(0, titleMatch.index)} ${rest.slice((titleMatch.index ?? 0) + titleMatch[0].length)}`.trim()
+  }
+
+  if (rest && !/^\d+$/.test(rest)) return null
+  if (rest) {
+    options.initialExpandLevel = Math.max(1, Number(rest))
+  }
+  return options
+}
+
+/** @deprecated Mindmap fences no longer resolve `<<<` includes; kept for body-include parsers / tests. */
+export function parseMindmapReference(line: string): MindmapReference | null {
+  const match = line.trim().match(/^<<<\s+(.+?)\s*$/)
+  if (!match) return null
+
+  let rest = match[1].trim()
+  let title: string | undefined
+  const titleMatch = rest.match(/\s+\[([^\]]+)\]\s*$/)
+  if (titleMatch) {
+    title = cleanHeadingText(titleMatch[1]) || undefined
+    rest = rest.slice(0, titleMatch.index).trim()
+  }
+
+  const path = rest.replace(/^(?:"([\s\S]*)"|'([\s\S]*)')$/, '$1$2').trim()
+  return path ? { path, title } : null
+}
+
+export interface NormalizeMindmapOptions {
+  title?: string
+  defaultTitle?: string
+}
+
+/** Ensure canonical mindmap Markdown has exactly one H1 root title. */
+export function normalizeMindmapMarkdown(
+  source: string,
+  options: NormalizeMindmapOptions = {},
+): string {
+  const lines = source.replace(/\r\n?/g, '\n').split('\n')
+  let existingTitle = ''
+  let rootIndex = -1
+
+  for (let index = 0; index < lines.length; index++) {
+    const match = lines[index].match(/^\s{0,3}#(?!#)\s+(.+?)\s*$/)
+    if (!match) continue
+    existingTitle = cleanHeadingText(match[1])
+    rootIndex = index
+    break
+  }
+
+  const rootTitle = cleanHeadingText(options.title || existingTitle || options.defaultTitle || 'root') || 'root'
+  const body = lines.filter((_, index) => index !== rootIndex)
+  while (body[0]?.trim() === '') body.shift()
+  while (body[body.length - 1]?.trim() === '') body.pop()
+
+  return body.length > 0
+    ? `# ${rootTitle}\n\n${body.join('\n')}\n`
+    : `# ${rootTitle}\n`
+}

package/src/components/Mindmap/wheelInteraction.ts

@@ -0,0 +1,7 @@
+/**
+ * CanvasViewer 会在自身 wheel 监听器中阻止默认事件并移动画布。
+ * 未激活时先在捕获阶段终止分发，但不 preventDefault，让滚轮继续交给文档页面。
+ */
+export function gateMindmapWheel(event: WheelEvent, active: boolean): void {
+  if (!active) event.stopImmediatePropagation()
+}

package/src/components/NotesTable/NotesTable.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { NotesTableRow } from './types'
+
+defineProps<{
+  notes?: NotesTableRow[]
+  missingIds?: string[]
+  error?: string | null
+}>()
+</script>
+
+<template>
+  <div v-if="error" class="tn-notes-table__error">
+    {{ error }}
+  </div>
+
+  <div v-else-if="(missingIds?.length ?? 0) > 0" class="tn-notes-table__warning">
+    以下笔记 ID 未找到配置: {{ missingIds!.join(', ') }}
+  </div>
+
+  <table v-if="(notes?.length ?? 0) > 0" class="tn-notes-table">
+    <thead>
+      <tr>
+        <th>笔记</th>
+        <th>简介</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="note in notes" :key="note.id">
+        <td>
+          <a :href="note.url" class="tn-notes-table__link">
+            <span class="tn-notes-table__id">{{ note.id }}.</span>
+            <span>{{ note.title }}</span>
+          </a>
+        </td>
+        <td>
+          <span class="tn-notes-table__desc" :class="{ 'is-empty': !note.description }">
+            {{ note.description || '暂无简介' }}
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped lang="scss">
+.tn-notes-table {
+  width: 100%;
+  margin: 1.5rem 0;
+  border-collapse: collapse;
+  font-size: 0.95rem;
+
+  th,
+  td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border: 1px solid var(--tn-c-divider);
+  }
+
+  th {
+    background-color: var(--tn-c-bg-soft);
+    font-weight: 600;
+    color: var(--tn-c-text);
+  }
+
+  tbody tr {
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: var(--tn-c-bg-soft);
+    }
+  }
+
+  td {
+    color: var(--tn-c-text-2);
+  }
+}
+
+.tn-notes-table__link {
+  color: var(--tn-c-brand);
+  text-decoration: none;
+  font-weight: 500;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.tn-notes-table__id {
+  margin-right: 0.5rem;
+  font-family: var(--tn-font-mono);
+  font-size: 0.9em;
+  color: var(--tn-c-text-2);
+}
+
+.tn-notes-table__desc {
+  line-height: 1.6;
+
+  &.is-empty {
+    color: var(--tn-c-text-2);
+    font-style: italic;
+  }
+}
+
+.tn-notes-table__error,
+.tn-notes-table__warning {
+  margin: 1rem 0;
+  padding: 1rem;
+  border-radius: 4px;
+  border-left: 4px solid var(--tn-c-danger);
+  background-color: var(--tn-c-danger-soft);
+  color: var(--tn-c-danger);
+}
+
+.tn-notes-table__warning {
+  border-left-color: #f9b44e;
+  background-color: color-mix(in srgb, #f9b44e 16%, transparent);
+  color: #f9b44e;
+}
+</style>

package/src/components/NotesTable/types.ts

@@ -0,0 +1,6 @@
+export interface NotesTableRow {
+  id: string
+  title: string
+  description: string
+  url: string
+}

package/src/components/WordList/RightClickMenu.vue

@@ -0,0 +1,106 @@
+<template>
+  <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')"
+    >
+      📢 Pronounce All（英）
+    </div>
+    <div
+      class="menuItem"
+      @click="(e) => handlePronounceAll(e, 'en-US')"
+    >
+      📢 Pronounce All（美）
+    </div>
+    <div
+      v-if="showAutoShowCard"
+      class="menuItem"
+      @click="handleAutoShowCard"
+    >
+      🔍 Auto Show Card（{{ isAutoShowCard ? '关' : '开' }}）
+    </div>
+    <div class="menuItem" @click="handleCheckAll">✅ Check All</div>
+    <div class="menuItem" @click="handleReset">❌ Reset</div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  show: Boolean,
+  isAutoShowCard: Boolean,
+  x: Number,
+  y: Number,
+  showPin: {
+    type: Boolean,
+    default: true,
+  },
+  showAutoShowCard: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits([
+  'pin',
+  'pronounce',
+  'pronounceAll',
+  'autoShowCard',
+  'checkAll',
+  'reset',
+])
+const handlePin = (e) => {
+  emit('pin')
+  e.preventDefault()
+}
+const handleAutoShowCard = () => {
+  emit('autoShowCard')
+}
+const handlePronounce = (e, lang) => {
+  emit('pronounce', lang)
+  e.preventDefault()
+}
+const handlePronounceAll = (e, lang) => {
+  emit('pronounceAll', lang)
+  e.preventDefault()
+}
+const handleCheckAll = () => {
+  emit('checkAll')
+}
+const handleReset = () => {
+  emit('reset')
+}
+</script>
+
+<style scoped lang="scss">
+.rightClickMenu {
+  position: fixed;
+  z-index: 99999;
+  background: #2c2c2c;
+  border: 1px solid #444;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  font-size: 13px;
+  color: #eee;
+  cursor: pointer;
+  user-select: none;
+}
+
+.menuItem {
+  padding: 8px 16px;
+
+  &:hover {
+    background-color: #444;
+  }
+}
+</style>