@tnotesjs/ui 0.2.1 → 0.3.1

package/src/components/CodeGroup/CodeGroup.vue

@@ -2,6 +2,13 @@
 import { nextTick, onMounted, ref, watch } from 'vue'
 import CodeBlock from '../CodeBlock/CodeBlock.vue'
 import { parseCodeMeta } from '../../code/highlight'
+import {
+  applyCollapseChrome,
+  codeBlockIn,
+  expandCollapsedCodeBlocks,
+  isCodeBlockCollapsed,
+  toggleCodeBlockCollapsed
+} from '../../code/collapse'
 
 export interface CodeGroupItem {
   code?: string
@@ -11,16 +18,47 @@ export interface CodeGroupItem {
 }
 const props = defineProps<{ items: CodeGroupItem[] }>()
 const root = ref<HTMLElement>()
+const collapseButton = ref<HTMLButtonElement>()
 const active = ref(0)
-function syncPanels(): void {
-  const panels =
-    root.value?.querySelectorAll<HTMLElement>(
+
+function panels(): HTMLElement[] {
+  return [
+    ...(root.value?.querySelectorAll<HTMLElement>(
       ':scope > .tn-code-group__panels > .tn-code-group__panel'
-    ) ?? []
-  panels.forEach((panel, index) => {
+    ) ?? [])
+  ]
+}
+
+function activePanel(): HTMLElement | null {
+  return panels()[active.value] ?? null
+}
+
+function activeBlock(): HTMLElement | null {
+  return codeBlockIn(activePanel())
+}
+
+function toggleCollapse(): void {
+  const block = activeBlock()
+  if (!block) return
+  toggleCodeBlockCollapsed(block)
+  applyCollapseChrome(collapseButton.value ?? null, isCodeBlockCollapsed(block))
+}
+
+/** 面板自带的那颗折叠按钮在分组里会被 tab 行盖住，所以 chrome 挂在 tab 行这颗上。 */
+function syncCollapseButton(): void {
+  applyCollapseChrome(collapseButton.value ?? null, isCodeBlockCollapsed(activeBlock()))
+}
+
+function syncPanels(): void {
+  const list = panels()
+  list.forEach((panel, index) => {
     panel.hidden = index !== active.value
   })
+  // 切到的面板如果处于收起状态就自动展开：读者不该看到一片被裁掉的代码。
+  expandCollapsedCodeBlocks(activePanel())
+  syncCollapseButton()
 }
+
 watch(active, syncPanels, { flush: 'post' })
 watch(
   () => props.items.length,
@@ -30,6 +68,7 @@ watch(
   }
 )
 onMounted(syncPanels)
+
 function navigate(event: KeyboardEvent, index: number): void {
   let next = index
   if (event.key === 'ArrowRight') next = (index + 1) % props.items.length
@@ -40,19 +79,43 @@ function navigate(event: KeyboardEvent, index: number): void {
   event.preventDefault()
   active.value = next
   ;(event.currentTarget as HTMLElement).parentElement
-    ?.querySelectorAll<HTMLButtonElement>('button')
+    ?.querySelectorAll<HTMLButtonElement>('button[role="tab"]')
     [next]?.focus()
 }
 </script>
 
 <template>
-  <section ref="root" class="tn-code-group">
+  <section ref="root" class="tn-code-group" :class="{ 'has-tabs': items.length > 1 }">
     <div
       v-if="items.length > 1"
       class="tn-code-group__tabs code-group-tabs"
       role="tablist"
       aria-label="代码分组"
     >
+      <button
+        ref="collapseButton"
+        type="button"
+        class="tn-code-block__icon-btn tn-code-group__collapse-btn"
+        aria-expanded="true"
+        aria-label="收起代码"
+        title="收起代码"
+        @click="toggleCollapse"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
       <button
         v-for="(item, index) in items"
         :key="item.key || index"

package/src/components/Mindmap/Mindmap.vue

@@ -786,19 +786,20 @@ onBeforeUnmount(() => {
   transition: opacity 0.2s;
 }
 
-/* Editable Desk island: chrome must stay hittable. */
-.mindmap-preview.is-editable > .mindmap-preview-actions {
-  opacity: 1;
-  pointer-events: auto;
-}
-
+/* 工具条按需出现：hover、聚焦（键盘 Tab 进来也算）、画布交互中、全屏。
+   Desk 的可编辑岛原本额外钉了 `opacity: 1`（旧注释：“chrome must stay hittable”），
+   结果每张脑图右上角常驻一排按钮，既像噪声又占掉画布右上角的拖拽区；
+   可点击性并没丢 —— 指针进入即 hover 显现，`:focus-within` 保住键盘路径。
+   只读岛（站点）本来就是这套行为，这里让两边一致。 */
 .mindmap-preview-tabs {
   display: flex;
   gap: 4px;
 }
 
 .mindmap-preview:hover > .mindmap-preview-actions,
+.mindmap-preview:focus-within > .mindmap-preview-actions,
 .mindmap-preview-actions:focus-within,
+.mindmap-preview.is-interaction-active > .mindmap-preview-actions,
 .mindmap-preview.is-fullscreen > .mindmap-preview-actions,
 .mindmap-preview:fullscreen > .mindmap-preview-actions {
   opacity: 1;

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

@@ -5,6 +5,12 @@ import { isApplePlatform, primaryShortcut } from './platform'
 const props = withDefaults(
   defineProps<{
     position: { left: number; top: number }
+    /**
+     * 浮层挂载点。默认 `undefined` = 就地渲染，供嵌在笔记里的宿主（Desk / SSG）
+     * 使用——菜单是 `position: fixed`，teleport 到 body 会脱离笔记的层叠上下文。
+     * 自带整页外壳的宿主（Web / VS Code webview）传 `'body'`。
+     */
+    teleportTo?: string
     multiple?: boolean
     canInsertSibling?: boolean
     canInsertParent?: boolean
@@ -16,6 +22,7 @@ const props = withDefaults(
     canFocus?: boolean
   }>(),
   {
+    teleportTo: undefined,
     multiple: false,
     canInsertSibling: true,
     canInsertParent: true,
@@ -96,85 +103,87 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div
-    ref="menu"
-    class="canvas-context-menu"
-    :style="style"
-    role="menu"
-    :aria-label="multiple ? '多主题右键菜单' : '主题右键菜单'"
-    @contextmenu.prevent
-  >
-    <template v-if="!multiple">
+  <Teleport :to="teleportTo" :disabled="!teleportTo">
+    <div
+      ref="menu"
+      class="canvas-context-menu"
+      :style="style"
+      role="menu"
+      :aria-label="multiple ? '多主题右键菜单' : '主题右键菜单'"
+      @contextmenu.prevent
+    >
+      <template v-if="!multiple">
+        <button
+          type="button"
+          role="menuitem"
+          :disabled="!canInsertSibling"
+          @click="act('insertSibling')"
+        >
+          <span>插入同级主题</span><kbd>Enter</kbd>
+        </button>
+        <button type="button" role="menuitem" @click="act('insertChild')">
+          <span>插入下级主题</span><kbd>Tab</kbd>
+        </button>
+        <button
+          type="button"
+          role="menuitem"
+          :disabled="!canInsertParent"
+          @click="act('insertParent')"
+        >
+          <span>插入上级主题</span><kbd>{{ shiftTab }}</kbd>
+        </button>
+        <span class="context-divider" />
+      </template>
+
+      <button type="button" role="menuitem" @click="act('copy')">
+        <span>复制</span><kbd>{{ primaryShortcut('C') }}</kbd>
+      </button>
+      <button type="button" role="menuitem" :disabled="!canCut" @click="act('cut')">
+        <span>剪切</span><kbd>{{ primaryShortcut('X') }}</kbd>
+      </button>
+
+      <template v-if="!multiple">
+        <button type="button" role="menuitem" @click="act('paste')">
+          <span>粘贴</span><kbd>{{ primaryShortcut('V') }}</kbd>
+        </button>
+        <button type="button" role="menuitem" :disabled="!canDuplicate" @click="act('duplicate')">
+          <span>创建副本</span><kbd>{{ primaryShortcut('D') }}</kbd>
+        </button>
+        <button type="button" role="menuitem" :disabled="!canDeleteOnly" @click="act('deleteOnly')">
+          <span>仅删除当前主题</span>
+        </button>
+      </template>
+
       <button
         type="button"
         role="menuitem"
-        :disabled="!canInsertSibling"
-        @click="act('insertSibling')"
+        class="danger"
+        :disabled="!canDeleteTree"
+        @click="act('deleteTree')"
       >
-        <span>插入同级主题</span><kbd>Enter</kbd>
-      </button>
-      <button type="button" role="menuitem" @click="act('insertChild')">
-        <span>插入下级主题</span><kbd>Tab</kbd>
+        <span>{{ multiple ? '删除所选主题及下级主题' : '删除当前主题及下级主题' }}</span
+        ><kbd>Delete</kbd>
       </button>
+      <span class="context-divider" />
       <button
         type="button"
         role="menuitem"
-        :disabled="!canInsertParent"
-        @click="act('insertParent')"
+        :disabled="!canToggleSiblings"
+        @click="act('toggleSiblings')"
       >
-        <span>插入上级主题</span><kbd>{{ shiftTab }}</kbd>
+        <span>展开/折叠同级主题</span><kbd>{{ primaryShortcut('.', { shift: true }) }}</kbd>
       </button>
-      <span class="context-divider" />
-    </template>
-
-    <button type="button" role="menuitem" @click="act('copy')">
-      <span>复制</span><kbd>{{ primaryShortcut('C') }}</kbd>
-    </button>
-    <button type="button" role="menuitem" :disabled="!canCut" @click="act('cut')">
-      <span>剪切</span><kbd>{{ primaryShortcut('X') }}</kbd>
-    </button>
-
-    <template v-if="!multiple">
-      <button type="button" role="menuitem" @click="act('paste')">
-        <span>粘贴</span><kbd>{{ primaryShortcut('V') }}</kbd>
-      </button>
-      <button type="button" role="menuitem" :disabled="!canDuplicate" @click="act('duplicate')">
-        <span>创建副本</span><kbd>{{ primaryShortcut('D') }}</kbd>
-      </button>
-      <button type="button" role="menuitem" :disabled="!canDeleteOnly" @click="act('deleteOnly')">
-        <span>仅删除当前主题</span>
+      <button
+        v-if="!multiple"
+        type="button"
+        role="menuitem"
+        :disabled="!canFocus"
+        @click="act('focus')"
+      >
+        <span>进入此主题</span><kbd>{{ primaryShortcut(']') }}</kbd>
       </button>
-    </template>
-
-    <button
-      type="button"
-      role="menuitem"
-      class="danger"
-      :disabled="!canDeleteTree"
-      @click="act('deleteTree')"
-    >
-      <span>{{ multiple ? '删除所选主题及下级主题' : '删除当前主题及下级主题' }}</span
-      ><kbd>Delete</kbd>
-    </button>
-    <span class="context-divider" />
-    <button
-      type="button"
-      role="menuitem"
-      :disabled="!canToggleSiblings"
-      @click="act('toggleSiblings')"
-    >
-      <span>展开/折叠同级主题</span><kbd>{{ primaryShortcut('.', { shift: true }) }}</kbd>
-    </button>
-    <button
-      v-if="!multiple"
-      type="button"
-      role="menuitem"
-      :disabled="!canFocus"
-      @click="act('focus')"
-    >
-      <span>进入此主题</span><kbd>{{ primaryShortcut(']') }}</kbd>
-    </button>
-  </div>
+    </div>
+  </Teleport>
 </template>
 
 <style scoped>

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

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import IconButton from './IconButton.vue'
+import { isApplePlatform } from './platform'
+
+const emit = defineEmits<{
+  all: []
+  level: [level: 1 | 2 | 3]
+}>()
+
+const root = ref<HTMLElement>()
+const open = ref(false)
+const modifier = computed(() => (isApplePlatform() ? '⌘⌥' : 'Ctrl+Alt+'))
+const allShortcut = computed(() => (isApplePlatform() ? '⌘⌥⇧.' : 'Ctrl+Alt+Shift+.'))
+
+function chooseAll() {
+  emit('all')
+  open.value = false
+}
+
+function chooseLevel(level: 1 | 2 | 3) {
+  emit('level', level)
+  open.value = false
+}
+
+function onDocumentPointerDown(event: PointerEvent) {
+  if (open.value && !root.value?.contains(event.target as Node)) open.value = false
+}
+
+function onDocumentKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') open.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onDocumentPointerDown)
+  document.addEventListener('keydown', onDocumentKeydown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onDocumentPointerDown)
+  document.removeEventListener('keydown', onDocumentKeydown)
+})
+</script>
+
+<template>
+  <div ref="root" class="collapse-menu">
+    <IconButton icon="collapse" label="展开/折叠主题" :active="open" @click="open = !open" />
+    <div v-if="open" class="collapse-menu-popover" role="menu" aria-label="展开/折叠主题">
+      <div class="collapse-menu-title">展开/折叠主题</div>
+      <button type="button" role="menuitem" @click="chooseAll">
+        <span>全部主题</span><kbd>{{ allShortcut }}</kbd>
+      </button>
+      <button
+        v-for="level in [1, 2, 3] as const"
+        :key="level"
+        type="button"
+        role="menuitem"
+        @click="chooseLevel(level)"
+      >
+        <span>{{ level }} 级主题</span><kbd>{{ modifier }}{{ level }}</kbd>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.collapse-menu {
+  position: relative;
+}
+.collapse-menu-popover {
+  position: absolute;
+  z-index: 85;
+  top: calc(100% + 8px);
+  right: 0;
+  width: 260px;
+  padding: 8px;
+  border: 1px solid var(--mm-border);
+  border-radius: 12px;
+  background: var(--mm-panel-bg);
+  color: var(--mm-text);
+  box-shadow: 0 14px 38px rgb(0 0 0 / 0.24);
+}
+.collapse-menu-title {
+  padding: 7px 11px 9px;
+  color: var(--mm-text-dim);
+  font-size: 12px;
+}
+.collapse-menu-popover button {
+  display: flex;
+  width: 100%;
+  min-height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 11px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.collapse-menu-popover button:hover,
+.collapse-menu-popover button:focus-visible {
+  background: var(--mm-hover);
+  outline: none;
+}
+.collapse-menu-popover kbd {
+  color: var(--mm-text-dim);
+  font: inherit;
+  font-size: 12px;
+}
+</style>

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import AppIcon from './AppIcon.vue'
+
+withDefaults(
+  defineProps<{
+    icon: string
+    label: string
+    size?: number
+    active?: boolean
+    danger?: boolean
+    disabled?: boolean
+  }>(),
+  { size: 18, active: false, danger: false, disabled: false }
+)
+
+defineEmits<{ click: [event: MouseEvent] }>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="icon-button"
+    :class="{ active, danger }"
+    :title="label"
+    :aria-label="label"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <AppIcon :name="icon" :size="size" />
+  </button>
+</template>
+
+<style scoped>
+.icon-button {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--mm-text-dim);
+  cursor: pointer;
+}
+.icon-button:hover:not(:disabled),
+.icon-button.active {
+  background: var(--mm-hover);
+  color: var(--mm-text);
+}
+.icon-button.danger {
+  color: #d84d57;
+}
+.icon-button:focus-visible {
+  outline: 2px solid var(--mm-accent);
+  outline-offset: 1px;
+}
+.icon-button:disabled {
+  cursor: default;
+  opacity: 0.38;
+}
+</style>

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

@@ -7,8 +7,10 @@ const props = withDefaults(
     url: string
     position: { left: number; top: number }
     startEditing?: boolean
+    /** 见 `CanvasContextMenu`：默认就地渲染，整页宿主传 `'body'`。 */
+    teleportTo?: string
   }>(),
-  { startEditing: false }
+  { startEditing: false, teleportTo: undefined }
 )
 const emit = defineEmits<{ save: [url: string]; remove: []; keep: []; leave: []; close: [] }>()
 const draft = ref(props.url)
@@ -50,52 +52,54 @@ defineExpose({ focusInput })
 </script>
 
 <template>
-  <div
-    class="link-popover"
-    :style="{ left: `${position.left}px`, top: `${position.top}px` }"
-    @mouseenter="emit('keep')"
-    @mouseleave="emit('leave')"
-  >
-    <input
-      ref="input"
-      v-model="draft"
-      class="link-input"
-      :class="{ readonly: !editing }"
-      :readonly="!editing"
-      aria-label="链接地址"
-      @dblclick="beginEdit"
-      @keydown="onKeydown"
-    />
-    <button
-      v-if="editing"
-      type="button"
-      class="link-action primary"
-      title="更新链接 (Enter)"
-      aria-label="更新链接"
-      @click="submit"
+  <Teleport :to="teleportTo" :disabled="!teleportTo">
+    <div
+      class="link-popover"
+      :style="{ left: `${position.left}px`, top: `${position.top}px` }"
+      @mouseenter="emit('keep')"
+      @mouseleave="emit('leave')"
     >
-      更新
-    </button>
-    <button
-      v-else
-      type="button"
-      class="icon-action"
-      title="编辑链接地址"
-      aria-label="编辑链接地址"
-      @click="beginEdit"
-    >
-      <AppIcon name="edit" :size="18" />
-    </button>
-    <button
-      type="button"
-      class="icon-action"
-      title="移除链接，保留文案"
-      aria-label="移除链接"
-      @click="emit('remove')"
-    >
-      <AppIcon name="removeLink" :size="18" />
-    </button>
-  </div>
+      <input
+        ref="input"
+        v-model="draft"
+        class="link-input"
+        :class="{ readonly: !editing }"
+        :readonly="!editing"
+        aria-label="链接地址"
+        @dblclick="beginEdit"
+        @keydown="onKeydown"
+      />
+      <button
+        v-if="editing"
+        type="button"
+        class="link-action primary"
+        title="更新链接 (Enter)"
+        aria-label="更新链接"
+        @click="submit"
+      >
+        更新
+      </button>
+      <button
+        v-else
+        type="button"
+        class="icon-action"
+        title="编辑链接地址"
+        aria-label="编辑链接地址"
+        @click="beginEdit"
+      >
+        <AppIcon name="edit" :size="18" />
+      </button>
+      <button
+        type="button"
+        class="icon-action"
+        title="移除链接，保留文案"
+        aria-label="移除链接"
+        @click="emit('remove')"
+      >
+        <AppIcon name="removeLink" :size="18" />
+      </button>
+    </div>
+  </Teleport>
 </template>
 
 <style scoped>

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

@@ -37,12 +37,14 @@ function onInput(e: Event) {
   }, 300)
 }
 
-function flushDraft() {
-  if (!typing) return
+/** 有未提交的防抖输入时立即回流，返回被 flush 的草稿；没有则返回 `null`。 */
+function flushDraft(): string | null {
+  if (!typing) return null
   if (timer) clearTimeout(timer)
   timer = null
   typing = false
   emit('update:modelValue', draft.value)
+  return draft.value
 }
 
 function goToDiagnostic(item: MarkdownDiagnostic) {
@@ -63,7 +65,7 @@ function selectAllFromHost(): void {
   input.setSelectionRange(0, input.value.length)
 }
 
-defineExpose({ selectAllFromHost })
+defineExpose({ selectAllFromHost, flushDraft })
 
 function onPaste(e: ClipboardEvent) {
   const image = [...(e.clipboardData?.items ?? [])]

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

@@ -13,7 +13,15 @@ import LinkPopover from './LinkPopover.vue'
 import SelectionToolbar from './SelectionToolbar.vue'
 import { pasteCanvasOutline, readMindmapClipboard, writeMindmapClipboard } from './mindmapClipboard'
 
-const props = defineProps<{ session: MindmapSession; resolveImageSrc?: (src: string) => string }>()
+const props = defineProps<{
+  session: MindmapSession
+  resolveImageSrc?: (src: string) => string
+  /**
+   * 浮层挂载点，透传给 `CanvasContextMenu` / `LinkPopover`。
+   * 默认 `undefined` = 就地渲染（嵌在笔记里的 Desk / SSG）；整页宿主传 `'body'`。
+   */
+  teleportTo?: string
+}>()
 
 const emit = defineEmits<{
   ready: [editor: CanvasEditor]
@@ -209,6 +217,7 @@ onBeforeUnmount(() => {
       v-if="linkEditor"
       :url="linkEditor.url"
       :position="linkEditor.position"
+      :teleport-to="teleportTo"
       @save="saveLink"
       @remove="removeLink"
       @keep="keepLinkPopover"
@@ -227,6 +236,7 @@ onBeforeUnmount(() => {
       :can-delete-tree="contextMenu.canDeleteTree"
       :can-toggle-siblings="contextMenu.canToggleSiblings"
       :can-focus="contextMenu.canFocus"
+      :teleport-to="teleportTo"
       @insert-sibling="insertSibling"
       @insert-child="insertChild"
       @insert-parent="insertParent"