@tnotesjs/core 0.2.2 → 0.4.0

package/vitepress/components/Layout/DocFooter.vue

@@ -4,7 +4,7 @@ vitepress/components/Layout/DocFooter.vue
 
 <template>
   <nav class="custom-doc-footer" v-if="prev || next">
-    <div class="container">
+    <div class="pager-container">
       <div class="prev">
         <a v-if="prev" :href="prev.link" class="pager-link prev-link">
           <span class="desc">上一篇</span>
@@ -147,7 +147,7 @@ const next = computed(() => {
   padding-top: 32px;
 }
 
-.container {
+.pager-container {
   display: flex;
   gap: 16px;
 }
@@ -219,7 +219,7 @@ const next = computed(() => {
 
 /* 响应式调整 */
 @media (max-width: 768px) {
-  .container {
+  .pager-container {
     flex-direction: column;
     gap: 12px;
   }

package/vitepress/components/Layout/Layout.vue

@@ -32,10 +32,6 @@ vitepress/components/Layout/Layout.vue
         :vscode-notes-dir="vscodeNotesDir"
         :is-home-readme="isHomeReadme"
         :current-note-id="currentNoteId"
-        :created_at="created_at"
-        :updated_at="updated_at"
-        :home-readme-created-at="homeReadmeCreatedAt"
-        :home-readme-updated-at="homeReadmeUpdatedAt"
         :time-modal-open="timeModalOpen"
         :all-collapsed="allCollapsed"
         @open-time-modal="openTimeModal"
@@ -65,8 +61,6 @@ vitepress/components/Layout/Layout.vue
           v-model:editable-note-status="editableNoteStatus"
           v-model:editable-discussions-enabled="editableDiscussionsEnabled"
           v-model:title-error="titleError"
-          :modal-created-at="modalCreatedAt"
-          :modal-updated-at="modalUpdatedAt"
           :modal-github-url="modalGithubUrl"
           :modal-github-page-url="modalGithubPageUrl"
           :completion-percentage="completionPercentage"
@@ -116,10 +110,6 @@ vitepress/components/Layout/Layout.vue
       </AboutModal>
     </template>
     <template #doc-footer-before>
-      <!-- <div class="footer-time-info">
-        <p title="首次提交时间">首次提交时间：{{ formatDate(created_at) }}</p>
-        <p title="最近提交时间">最近提交时间：{{ formatDate(updated_at) }}</p>
-      </div> -->
     </template>
     <template #doc-after>
       <!-- 自定义 DocFooter -->
@@ -335,8 +325,6 @@ function getEmptyNoteConfig() {
 const isDiscussionsVisible = computed(
   () => currentNoteConfig.value.enableDiscussions,
 );
-const updated_at = computed(() => currentNoteConfig.value.updated_at);
-const created_at = computed(() => currentNoteConfig.value.created_at);
 
 // 判断是否为首页 README.md
 const isHomeReadme = computed(() => vpData.page.value.filePath === "README.md");
@@ -349,10 +337,6 @@ const completionPercentage = computed(() => {
   return Math.round((doneNotesLen.value / totalNotesLen.value) * 100);
 });
 
-// 首页 README.md 的时间戳
-const homeReadmeCreatedAt = computed(() => readmeData?.created_at);
-const homeReadmeUpdatedAt = computed(() => readmeData?.updated_at);
-
 // #region - Composables
 // 404 重定向
 const { showNotFound, decodedCurrentPath, initRedirectCheck } =
@@ -509,20 +493,6 @@ const modalGithubPageUrl = computed(() => {
   return "";
 });
 
-// modal 中显示的创建时间
-const modalCreatedAt = computed(() => {
-  return modalIsHomeReadme.value
-    ? homeReadmeCreatedAt.value
-    : modalNoteConfig.value.created_at;
-});
-
-// modal 中显示的更新时间
-const modalUpdatedAt = computed(() => {
-  return modalIsHomeReadme.value
-    ? homeReadmeUpdatedAt.value
-    : modalNoteConfig.value.updated_at;
-});
-
 function openTimeModal() {
   sidebarAboutNoteId.value = null;
   timeModalOpen.value = true;

package/vitepress/components/Layout/composables/useVSCodeIntegration.ts

@@ -1,40 +1,49 @@
 /**
  * vitepress/components/Layout/composables/useVSCodeIntegration.ts
  *
- * VSCode 集成和 GitHub 链接拦截
+ * 本地 IDE 集成和 GitHub 链接拦截
  */
 
 import { useData } from 'vitepress'
-import { ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
+import { useLocalIde } from '../../composables/useLocalIde'
 import { NOTES_DIR_KEY } from '../../constants'
-import {
-  resolveNoteReadmePath,
-  toVscodeFileUrl,
-} from '../../utils/vscodePaths'
+import { resolveNoteReadmePath, toIdeFileUrl } from '../../utils/vscodePaths'
 
 import type { Router } from 'vitepress'
 import type { Ref, ComputedRef } from 'vue'
 
-
 /**
- * VSCode 集成和 GitHub 链接拦截
+ * 本地 IDE 集成和 GitHub 链接拦截
  */
 export function useVSCodeIntegration() {
   const vpData = useData()
-  const vscodeNotesDir = ref('')
+  const { ide } = useLocalIde()
+  const noteLocalPath = ref('')
+
+  const vscodeNotesDir = computed(() => {
+    if (!noteLocalPath.value) return ''
+    // 显式依赖 ide，确保切换 IDE 后 href 更新
+    return toIdeFileUrl(noteLocalPath.value, ide.value)
+  })
 
-  // 更新 VSCode 笔记目录
+  // 更新当前页面对应的本地笔记路径
   const updateVscodeNoteDir = () => {
     if (typeof window !== 'undefined') {
       const notesDir = localStorage.getItem(NOTES_DIR_KEY)
       const notePath = notesDir
         ? resolveNoteReadmePath(notesDir, vpData.page.value.relativePath)
         : null
-      vscodeNotesDir.value = notePath ? toVscodeFileUrl(notePath) : ''
+      noteLocalPath.value = notePath || ''
     }
   }
 
+  watch(ide, () => {
+    // IDE 切换后重新解析路径（无需刷新页面）
+    updateVscodeNoteDir()
+  })
+
   // 拦截 home README 中的笔记链接，将 GitHub 链接转换为站点内跳转
   const interceptHomeReadmeLinks = (
     isHomeReadme: Ref<boolean> | ComputedRef<boolean>,

package/vitepress/components/Layout/homeReadme.data.ts

@@ -1,7 +1,6 @@
 /**
  * vitepress/components/Layout/homeReadme.data.ts
  */
-import { execSync } from 'node:child_process'
 import fs from 'node:fs'
 import path from 'node:path'
 
@@ -12,8 +11,6 @@ interface ReadmeData {
   doneNotesID: string[]
   doneNotesLen: number
   totalNotesLen: number
-  created_at?: number
-  updated_at?: number
 }
 
 export default {
@@ -28,15 +25,10 @@ export default {
 
     watchedFiles.forEach((file) => {
       if (file.endsWith('README.md')) {
-        // console.log('file:', file) // => file: README.md
-
         const fileContent = fs.readFileSync(file, 'utf-8')
         const doneNotesID = getDoneNotesID(fileContent)
         const doneNotesLen = doneNotesID.length
 
-        // 获取 git 仓库的时间戳
-        const timestamps = getGitTimestamps()
-
         // 计算总笔记数
         const notesDir = path.join(path.dirname(file), 'notes')
         const totalNotesLen = getTotalNotesCount(notesDir)
@@ -46,7 +38,6 @@ export default {
           doneNotesID,
           doneNotesLen,
           totalNotesLen,
-          ...timestamps,
         }
       }
     })
@@ -74,45 +65,6 @@ function getTotalNotesCount(notesDir: string): number {
   }
 }
 
-/**
- * 获取 git 仓库的时间戳
- * @returns 包含 created_at 和 updated_at 的对象
- */
-function getGitTimestamps(): {
-  created_at?: number
-  updated_at?: number
-} {
-  const now = Date.now()
-  let created_at = now
-  let updated_at = now
-
-  try {
-    // 仓库的首次提交时间（最早的提交）
-    // 先获取所有提交，然后取第一行
-    const createdStdout = execSync(`git log --reverse --format=%ct`, {
-      encoding: 'utf-8',
-    })
-    const createdTs = createdStdout.toString().trim().split('\n')[0]
-    if (createdTs) {
-      created_at = parseInt(createdTs, 10) * 1000
-    }
-
-    // 仓库的最近一次提交时间
-    const updatedStdout = execSync(`git log -1 --format=%ct`, {
-      encoding: 'utf-8',
-    })
-    const updatedTs = updatedStdout.toString().trim()
-    if (updatedTs) {
-      updated_at = parseInt(updatedTs, 10) * 1000
-    }
-
-    return { created_at, updated_at }
-  } catch (error) {
-    console.error(`获取 git 仓库时间戳失败:`, error)
-    return { created_at, updated_at }
-  }
-}
-
 /**
  * 返回已完成的笔记的 ID 列表
  * @param fileContent 文件内容

package/vitepress/components/MindmapPreview/InlineRuns.ts

@@ -0,0 +1,25 @@
+import { parseInlineSegments } from '@tnotesjs/mindmap-core'
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  name: 'MindmapInlineRuns',
+  props: {
+    raw: { type: String, default: '' },
+  },
+  setup(props) {
+    return () => h('span', { class: 'mindmap-inline-runs' }, parseInlineSegments(props.raw).map((segment) => {
+      const classes = Object.entries(segment.marks)
+        .filter(([, enabled]) => enabled)
+        .map(([name]) => `is-${name}`)
+      if (segment.link) {
+        return h('a', {
+          class: ['mindmap-inline-run', 'is-link', ...classes],
+          href: segment.link.url,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        }, segment.text)
+      }
+      return h('span', { class: ['mindmap-inline-run', ...classes] }, segment.text)
+    }))
+  },
+})

package/vitepress/components/MindmapPreview/MindmapOutlineNode.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import InlineRuns from './InlineRuns'
+
+import type { MindmapNode } from '@tnotesjs/mindmap-core'
+
+defineOptions({ name: 'MindmapOutlineNode' })
+
+defineProps<{
+  node: MindmapNode
+  version: number
+  root?: boolean
+}>()
+
+defineEmits<{
+  toggle: [id: string]
+}>()
+</script>
+
+<template>
+  <li class="mindmap-outline-node" :class="{ 'is-root': root, 'is-done': node.content.checked === true }">
+    <div class="mindmap-outline-row">
+      <button
+        v-if="node.children.length > 0"
+        type="button"
+        class="mindmap-outline-toggle"
+        :aria-label="node.collapsed ? '展开主题' : '折叠主题'"
+        :aria-expanded="!node.collapsed"
+        @click="$emit('toggle', node.id)"
+      >
+        {{ node.collapsed ? '›' : '⌄' }}
+      </button>
+      <span v-else class="mindmap-outline-leaf" aria-hidden="true">•</span>
+      <input
+        v-if="node.content.checked !== null && !root"
+        class="mindmap-outline-checkbox"
+        type="checkbox"
+        :checked="node.content.checked"
+        disabled
+        aria-label="只读待办状态"
+      />
+      <span class="mindmap-outline-label">
+        <InlineRuns :raw="node.content.image ? node.content.text : node.content.raw" />
+      </span>
+    </div>
+    <img
+      v-if="node.content.image"
+      class="mindmap-outline-image"
+      :src="node.content.image.src"
+      :alt="node.content.image.alt"
+      :style="node.content.image.width ? { width: `${node.content.image.width}px` } : undefined"
+    />
+    <ul v-if="node.children.length > 0 && !node.collapsed" class="mindmap-outline-children">
+      <MindmapOutlineNode
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :version="version"
+        @toggle="$emit('toggle', $event)"
+      />
+    </ul>
+  </li>
+</template>

package/vitepress/components/MindmapPreview/MindmapPreview.vue

@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { CanvasViewer, MindmapSession } from '@tnotesjs/mindmap-core'
+import { onContentUpdated, useData } from 'vitepress'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+
+import { normalizeMindmapMarkdown } from './compat'
+import { applyInitialExpandLevel } from './expandLevel'
+import MindmapOutlineNode from './MindmapOutlineNode.vue'
+
+type PreviewView = 'mindmap' | 'outline' | 'source'
+
+const props = withDefaults(defineProps<{
+  content?: string
+  initialExpandLevel?: number
+}>(), {
+  content: '',
+  initialExpandLevel: 3,
+})
+
+const { isDark } = useData()
+const activeView = ref<PreviewView>('mindmap')
+const canvasHost = ref<HTMLElement | null>(null)
+const session = shallowRef<MindmapSession | null>(null)
+const renderVersion = ref(0)
+let viewer: CanvasViewer | null = null
+let mounted = false
+
+function decodeContent(value: string): string {
+  try {
+    return decodeURIComponent(value)
+  } catch {
+    return value
+  }
+}
+
+const normalizedContent = computed(() => normalizeMindmapMarkdown(decodeContent(props.content)))
+
+function createViewer(): void {
+  if (!mounted || !canvasHost.value || !session.value || viewer) return
+  viewer = new CanvasViewer(canvasHost.value, session.value, {
+    theme: isDark.value ? 'dark' : 'light',
+  })
+}
+
+function rebuildSession(): void {
+  viewer?.destroy()
+  viewer = null
+  const next = new MindmapSession({
+    markdown: normalizedContent.value,
+    fileName: 'mindmap-preview.tn-mindmap.md',
+  })
+  applyInitialExpandLevel(next, props.initialExpandLevel)
+  const invalidate = () => { renderVersion.value += 1 }
+  next.on('collapseChange', invalidate)
+  next.on('focusChange', invalidate)
+  next.on('change', invalidate)
+  session.value = next
+  renderVersion.value += 1
+  void nextTick(createViewer)
+}
+
+function setView(view: PreviewView): void {
+  activeView.value = view
+  if (view === 'mindmap') void nextTick(() => viewer?.zoomToFit())
+}
+
+function toggleNode(id: string): void {
+  session.value?.toggleCollapse(id)
+}
+
+function exitFocusTo(index: number): void {
+  session.value?.exitFocusTo(index)
+}
+
+watch([normalizedContent, () => props.initialExpandLevel], rebuildSession, { immediate: true })
+watch(isDark, (dark) => viewer?.setTheme(dark ? 'dark' : 'light'))
+
+onMounted(() => {
+  mounted = true
+  createViewer()
+})
+
+onContentUpdated(() => {
+  if (activeView.value === 'mindmap') void nextTick(() => viewer?.zoomToFit())
+})
+
+onBeforeUnmount(() => {
+  mounted = false
+  viewer?.destroy()
+  viewer = null
+})
+</script>
+
+<template>
+  <section class="mindmap-preview" :class="{ 'is-dark': isDark }">
+    <header class="mindmap-preview-header">
+      <nav class="mindmap-preview-tabs" aria-label="脑图预览视图">
+        <button
+          v-for="item in ([['mindmap', '脑图'], ['outline', '大纲'], ['source', '源码']] as const)"
+          :key="item[0]"
+          type="button"
+          :class="{ 'is-active': activeView === item[0] }"
+          @click="setView(item[0])"
+        >
+          {{ item[1] }}
+        </button>
+      </nav>
+      <button v-if="activeView === 'mindmap'" type="button" class="mindmap-fit" @click="viewer?.zoomToFit()">
+        适应视口
+      </button>
+    </header>
+
+    <nav v-if="session && session.focusPath.length > 0" class="mindmap-focus-path" aria-label="当前主题路径">
+      <button type="button" @click="exitFocusTo(0)">全部</button>
+      <template v-for="(node, index) in session.focusPath" :key="node.id">
+        <span aria-hidden="true">/</span>
+        <button type="button" @click="exitFocusTo(index + 1)">{{ node.content.text }}</button>
+      </template>
+    </nav>
+
+    <div v-show="activeView === 'mindmap'" ref="canvasHost" class="mindmap-canvas-host" />
+
+    <div v-if="activeView === 'outline' && session" class="mindmap-outline" :data-version="renderVersion">
+      <ul class="mindmap-outline-root">
+        <MindmapOutlineNode
+          :node="session.focusRootNode"
+          :version="renderVersion"
+          root
+          @toggle="toggleNode"
+        />
+      </ul>
+    </div>
+
+    <pre v-if="activeView === 'source'" class="mindmap-source"><code>{{ normalizedContent }}</code></pre>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.mindmap-preview {
+  --mindmap-panel: var(--vp-c-bg-soft);
+  --mindmap-border: var(--vp-c-divider);
+  margin: 1.5rem 0;
+  overflow: hidden;
+  border: 1px solid var(--mindmap-border);
+  border-radius: 10px;
+  background: var(--vp-c-bg);
+}
+
+.mindmap-preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 42px;
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--mindmap-border);
+  background: var(--mindmap-panel);
+}
+
+.mindmap-preview-tabs {
+  display: flex;
+  gap: 3px;
+
+  button {
+    padding: 5px 12px;
+    border-radius: 6px;
+    color: var(--vp-c-text-2);
+    font-size: 13px;
+    font-weight: 600;
+
+    &:hover,
+    &.is-active {
+      color: var(--vp-c-text-1);
+      background: var(--vp-c-bg);
+    }
+  }
+}
+
+.mindmap-fit,
+.mindmap-focus-path button {
+  color: var(--vp-c-text-2);
+  font-size: 12px;
+
+  &:hover { color: var(--vp-c-brand-1); }
+}
+
+.mindmap-focus-path {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 12px;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--mindmap-border);
+  white-space: nowrap;
+  color: var(--vp-c-text-3);
+}
+
+.mindmap-canvas-host {
+  position: relative;
+  width: 100%;
+  height: 440px;
+  overflow: hidden;
+  background: var(--vp-c-bg);
+  touch-action: none;
+  user-select: none;
+}
+
+.mindmap-canvas-host:deep(.mm-canvas),
+.mindmap-canvas-host:deep(.mm-overlay) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.mindmap-canvas-host:deep(.mm-overlay) { pointer-events: none; }
+.mindmap-canvas-host:deep(.mm-editor) { outline: none; }
+
+.mindmap-outline {
+  max-height: 560px;
+  padding: 18px 22px 22px;
+  overflow: auto;
+}
+
+.mindmap-outline-root,
+.mindmap-outline :deep(ul) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mindmap-outline :deep(.mindmap-outline-children) {
+  margin-left: 10px;
+  padding-left: 19px;
+  border-left: 1px solid var(--vp-c-divider);
+}
+
+.mindmap-outline :deep(.mindmap-outline-row) {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  min-height: 30px;
+  padding: 3px 0;
+  color: var(--vp-c-text-1);
+  line-height: 24px;
+}
+
+.mindmap-outline :deep(.mindmap-outline-toggle),
+.mindmap-outline :deep(.mindmap-outline-leaf) {
+  flex: 0 0 18px;
+  width: 18px;
+  color: var(--vp-c-text-3);
+  text-align: center;
+}
+
+.mindmap-outline :deep(.mindmap-outline-toggle:hover) { color: var(--vp-c-brand-1); }
+.mindmap-outline :deep(.mindmap-outline-checkbox) { margin-top: 5px; }
+.mindmap-outline :deep(.mindmap-outline-label) { min-width: 0; overflow-wrap: anywhere; }
+.mindmap-outline :deep(.mindmap-outline-node.is-root > .mindmap-outline-row) { font-size: 18px; font-weight: 700; }
+.mindmap-outline :deep(.mindmap-outline-node.is-done > .mindmap-outline-row .mindmap-outline-label) { opacity: .58; text-decoration: line-through; }
+.mindmap-outline :deep(.mindmap-outline-image) { display: block; max-width: min(100%, 560px); max-height: 360px; margin: 5px 0 12px 25px; border-radius: 6px; }
+.mindmap-outline :deep(.is-bold) { font-weight: 700; }
+.mindmap-outline :deep(.is-italic) { font-style: italic; }
+.mindmap-outline :deep(.is-underline) { text-decoration: underline; }
+.mindmap-outline :deep(.is-strike) { text-decoration: line-through; }
+.mindmap-outline :deep(.is-highlight) { padding: 0 2px; border-radius: 2px; background: #ffe56b; color: #252525; }
+.mindmap-outline :deep(.is-code) { padding: 1px 5px; border-radius: 4px; background: var(--vp-c-bg-soft); color: var(--vp-c-danger-1); font-family: var(--vp-font-family-mono); }
+.mindmap-outline :deep(.is-link) { color: var(--vp-c-brand-1); text-decoration: underline; text-underline-offset: 3px; }
+
+.mindmap-source {
+  max-height: 560px;
+  margin: 0;
+  padding: 18px 22px;
+  overflow: auto;
+  border-radius: 0;
+  background: var(--vp-code-block-bg);
+  color: var(--vp-code-block-color);
+  font-size: 13px;
+  line-height: 1.65;
+  white-space: pre;
+}
+
+@media (max-width: 768px) {
+  .mindmap-canvas-host { height: 360px; }
+  .mindmap-preview-tabs button { padding-inline: 9px; }
+  .mindmap-outline { padding-inline: 12px; }
+}
+</style>