@tnotesjs/core 0.2.2 → 0.3.0

package/vitepress/components/MarkMap/MarkMap.vue

@@ -12,17 +12,19 @@ import { onContentUpdated } from 'vitepress'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { icon__fullscreen, icon__fullscreen_exit, icon__confirm } from '../../assets/icons'
-import { MARKMAP_THEME_KEY, MARKMAP_EXPAND_LEVEL_KEY } from '../constants'
+import { MARKMAP_THEME_KEY } from '../constants'
 
 // doc: https://github.com/markmap/markmap/blob/205367a24603dc187f67da1658940c6cade20dce/packages/markmap-view/src/constants.ts#L15
 
+const DEFAULT_EXPAND_LEVEL = 3
+
 const props = defineProps({
   content: { type: String, default: '' },
   duration: { type: Number, default: 100 },
   spacingVertical: { type: Number, default: 10 },
   spacingHorizontal: { type: Number, default: 20 },
   nodeMinHeight: { type: Number, default: 24 },
-  initialExpandLevel: { type: Number, default: 5 },
+  initialExpandLevel: { type: Number, default: DEFAULT_EXPAND_LEVEL },
 })
 
 const svgRef = ref<SVGSVGElement | null>(null)
@@ -36,15 +38,6 @@ let darkClassObserver: MutationObserver | null = null
 
 const isMarkmapDark = ref(false)
 
-// 从 localStorage 读取配置，如果没有则使用 props 或默认值
-const getInitialExpandLevel = () => {
-  if (typeof window !== 'undefined') {
-    const saved = localStorage.getItem(MARKMAP_EXPAND_LEVEL_KEY)
-    if (saved) return parseInt(saved)
-  }
-  return props.initialExpandLevel
-}
-
 const getThemeColorFn = () => {
   if (typeof window !== 'undefined') {
     if (document.documentElement.classList.contains('markmap-dark')) {
@@ -63,8 +56,8 @@ const getThemeColorFn = () => {
   return scaleOrdinal(schemePastel2)
 }
 
-// 可由配置/props 初始化，也可以通过工具栏改动
-const expandLevel = ref(getInitialExpandLevel())
+// 可由 props 初始化，也可以通过工具栏改动
+const expandLevel = ref(props.initialExpandLevel)
 const transformer = new Transformer()
 const isFullscreen = ref(false)
 

package/vitepress/components/Settings/Settings.vue

@@ -10,33 +10,60 @@ vitepress/components/Settings/Settings.vue
       <div class="settingItem">
         <div class="settingMeta">
           <div class="labelLine">
-            <span class="itemName">本地知识库路径</span>
+            <span class="itemName">本地 IDE 打开</span>
             <span class="infoWrap">
               <span class="infoIcon">?</span>
               <span class="tooltip">
-                适用于 PC 桌面环境，需要本地安装 VS Code。配置后可从页面快速打开本地笔记目录。
+                适用于 PC 桌面环境。配置本地知识库 notes 目录路径，并选择 VS Code 或 Cursor，即可从页面快速打开知识库或笔记。
               </span>
             </span>
           </div>
           <span v-if="path" class="statusText">已配置</span>
         </div>
 
-        <div class="inputGroup">
-          <input
-            v-model="path"
-            type="text"
-            placeholder="/Users/username/notes"
-            class="input"
-          />
-          <button
-            v-if="path"
-            @click="clearPath"
-            class="clearBtn"
-            title="清空"
-            type="button"
-          >
-            ×
-          </button>
+        <div class="fieldStack">
+          <div class="controlRow">
+            <span class="controlLabel">IDE</span>
+            <div class="segmented segmented-two">
+              <label
+                v-for="option in localIdeOptions"
+                :key="option.value"
+                :class="[
+                  'segment',
+                  { activeSegment: localIde === option.value },
+                ]"
+              >
+                <input
+                  v-model="localIde"
+                  type="radio"
+                  name="local-ide"
+                  :value="option.value"
+                />
+                <span>{{ option.label }}</span>
+              </label>
+            </div>
+          </div>
+
+          <label class="field">
+            <span class="controlLabel">知识库路径</span>
+            <div class="inputGroup">
+              <input
+                v-model="path"
+                type="text"
+                placeholder="/Users/username/notes"
+                class="input pathInput"
+              />
+              <button
+                v-if="path"
+                @click="clearPath"
+                class="clearBtn"
+                title="清空"
+                type="button"
+              >
+                ×
+              </button>
+            </div>
+          </label>
         </div>
       </div>
 
@@ -128,36 +155,6 @@ vitepress/components/Settings/Settings.vue
           </div>
         </div>
       </div>
-
-      <div class="settingItem">
-        <div class="settingMeta">
-          <div class="labelLine">
-            <span class="itemName">笔记内 MarkMap</span>
-            <span class="infoWrap">
-              <span class="infoIcon">?</span>
-              <span class="tooltip">
-                配置笔记中 markmap 代码块的初始展开层级。
-              </span>
-            </span>
-          </div>
-        </div>
-
-        <div class="inlineGrid">
-          <label class="field">
-            <span class="controlLabel">展开层级</span>
-            <div class="inputWithUnit">
-              <input
-                v-model.number="markmapExpandLevel"
-                type="number"
-                min="1"
-                max="100"
-                class="input"
-              />
-              <span class="unit">层</span>
-            </div>
-          </label>
-        </div>
-      </div>
     </section>
 
     <div class="actionBar">
@@ -185,12 +182,18 @@ import { ref, computed, onMounted } from 'vue'
 
 import {
   NOTES_DIR_KEY,
-  MARKMAP_EXPAND_LEVEL_KEY,
+  LOCAL_IDE_KEY,
   SIDEBAR_SHOW_NOTE_ID_KEY,
   SIDEBAR_DONE_PREFIX_KEY,
   SIDEBAR_UNDONE_PREFIX_KEY,
   CONTENT_WIDTH_MODE_KEY,
 } from '../constants'
+import { useLocalIde } from '../composables/useLocalIde'
+import {
+  DEFAULT_LOCAL_IDE,
+  normalizeLocalIde,
+  type LocalIdeId,
+} from '../utils/vscodePaths'
 // @ts-expect-error - VitePress Data Loader
 import { data as tnotesConfig } from '../tnotes-config.data'
 
@@ -200,6 +203,8 @@ const DEFAULT_CONTENT_WIDTH_MODE: ContentWidthMode = 'wide'
 const DEFAULT_DONE_PREFIX = '✅'
 const DEFAULT_UNDONE_PREFIX = '⏰'
 
+const { setLocalIde } = useLocalIde()
+
 const contentWidthModeOptions: Array<{
   label: string
   value: ContentWidthMode
@@ -208,10 +213,15 @@ const contentWidthModeOptions: Array<{
   { label: '标准页宽', value: 'standard' },
 ]
 
+const localIdeOptions: Array<{ label: string; value: LocalIdeId }> = [
+  { label: 'VS Code', value: 'vscode' },
+  { label: 'Cursor', value: 'cursor' },
+]
+
 const path = ref('')
 const originalPath = ref('')
-const markmapExpandLevel = ref(5)
-const originalMarkmapExpandLevel = ref(5)
+const localIde = ref<LocalIdeId>(DEFAULT_LOCAL_IDE)
+const originalLocalIde = ref<LocalIdeId>(DEFAULT_LOCAL_IDE)
 const showNoteId = ref(false)
 const originalShowNoteId = ref(false)
 const donePrefix = ref(DEFAULT_DONE_PREFIX)
@@ -227,7 +237,7 @@ const showSuccessToast = ref(false)
 const hasChanges = computed(
   () =>
     path.value !== originalPath.value ||
-    markmapExpandLevel.value !== originalMarkmapExpandLevel.value ||
+    localIde.value !== originalLocalIde.value ||
     showNoteId.value !== originalShowNoteId.value ||
     donePrefix.value !== originalDonePrefix.value ||
     undonePrefix.value !== originalUndonePrefix.value ||
@@ -246,9 +256,9 @@ onMounted(() => {
   path.value = savedPath
   originalPath.value = savedPath
 
-  const savedLevel = localStorage.getItem(MARKMAP_EXPAND_LEVEL_KEY) || '5'
-  markmapExpandLevel.value = parseInt(savedLevel, 10)
-  originalMarkmapExpandLevel.value = markmapExpandLevel.value
+  const savedLocalIde = normalizeLocalIde(localStorage.getItem(LOCAL_IDE_KEY))
+  localIde.value = savedLocalIde
+  originalLocalIde.value = savedLocalIde
 
   const savedShowNoteId = localStorage.getItem(SIDEBAR_SHOW_NOTE_ID_KEY)
   showNoteId.value =
@@ -293,17 +303,14 @@ function save() {
       contentWidthMode.value !== originalContentWidthMode.value
 
     localStorage.setItem(NOTES_DIR_KEY, path.value)
-    localStorage.setItem(
-      MARKMAP_EXPAND_LEVEL_KEY,
-      markmapExpandLevel.value.toString(),
-    )
+    setLocalIde(localIde.value)
     localStorage.setItem(SIDEBAR_SHOW_NOTE_ID_KEY, showNoteId.value.toString())
     localStorage.setItem(SIDEBAR_DONE_PREFIX_KEY, donePrefix.value)
     localStorage.setItem(SIDEBAR_UNDONE_PREFIX_KEY, undonePrefix.value)
     localStorage.setItem(CONTENT_WIDTH_MODE_KEY, contentWidthMode.value)
 
     originalPath.value = path.value
-    originalMarkmapExpandLevel.value = markmapExpandLevel.value
+    originalLocalIde.value = localIde.value
     originalShowNoteId.value = showNoteId.value
     originalDonePrefix.value = donePrefix.value
     originalUndonePrefix.value = undonePrefix.value
@@ -327,7 +334,7 @@ function save() {
 
 function reset() {
   path.value = originalPath.value
-  markmapExpandLevel.value = originalMarkmapExpandLevel.value
+  localIde.value = originalLocalIde.value
   showNoteId.value = originalShowNoteId.value
   donePrefix.value = originalDonePrefix.value
   undonePrefix.value = originalUndonePrefix.value
@@ -400,10 +407,12 @@ function reset() {
 
 .tooltip {
   position: absolute;
-  left: 50%;
-  bottom: calc(100% + 8px);
-  z-index: 10;
+  left: 0;
+  top: calc(100% + 8px);
+  bottom: auto;
+  z-index: 20;
   width: 240px;
+  max-width: min(240px, calc(100vw - 48px));
   padding: 8px 10px;
   color: var(--vp-c-text-1);
   background: var(--vp-c-bg-elv);
@@ -414,7 +423,7 @@ function reset() {
   line-height: 18px;
   opacity: 0;
   pointer-events: none;
-  transform: translate(-50%, 4px);
+  transform: translateY(-4px);
   transition:
     opacity 0.15s ease,
     transform 0.15s ease;
@@ -423,7 +432,7 @@ function reset() {
 .infoWrap:hover .tooltip,
 .infoWrap:focus-within .tooltip {
   opacity: 1;
-  transform: translate(-50%, 0);
+  transform: translateY(0);
 }
 
 .inputGroup {
@@ -699,14 +708,8 @@ function reset() {
   }
 
   .tooltip {
-    left: 0;
     width: min(260px, calc(100vw - 48px));
-    transform: translate(0, 4px);
-  }
-
-  .infoWrap:hover .tooltip,
-  .infoWrap:focus-within .tooltip {
-    transform: translate(0, 0);
+    max-width: min(260px, calc(100vw - 48px));
   }
 
   .actionBar {

package/vitepress/components/SidebarCard/FolderTreeItems.vue

@@ -6,8 +6,8 @@ vitepress/components/SidebarCard/FolderTreeItems.vue
 import {
   icon__sidebar_collapsed,
   icon__sidebar_opened,
-  icon__vscode,
 } from '../../assets/icons'
+import { useLocalIde } from '../composables/useLocalIde'
 
 const props = defineProps({
   nodes: {
@@ -30,6 +30,8 @@ const props = defineProps({
 
 const emit = defineEmits(['toggle-node', 'open-vscode'])
 
+const { icon: localIdeIcon, openNoteTitle } = useLocalIde()
+
 function hasChildren(node) {
   return node.children?.length > 0
 }
@@ -109,21 +111,24 @@ function onOpenVscode(node, event) {
         <span class="tree-title">{{ getDisplayTitle(node) }}</span>
       </a>
 
-      <span
+      <button
         v-else-if="hasChildren(node)"
+        type="button"
         class="tree-link tree-link-folder"
+        :title="isExpanded(node) ? '折叠分组' : '展开分组'"
+        @click="onToggle(node)"
       >
         <span class="tree-title">{{ getDisplayTitle(node) }}</span>
-      </span>
+      </button>
 
       <button
         v-if="node.relativePath"
         class="vscode-article"
         type="button"
-        title="在 VS Code 中打开笔记目录"
+        :title="openNoteTitle"
         @click="onOpenVscode(node, $event)"
       >
-        <img :src="icon__vscode" alt="打开笔记目录" />
+        <img :src="localIdeIcon" :alt="openNoteTitle" />
       </button>
     </div>
 
@@ -225,9 +230,14 @@ export default {
 }
 
 .tree-link-folder {
-  cursor: default;
+  cursor: pointer;
   font-weight: 600;
   color: var(--vp-c-text-1);
+  border: none;
+  background: none;
+  padding: 0;
+  text-align: left;
+  font: inherit;
 }
 
 .tree-status {

package/vitepress/components/SidebarCard/SidebarCard.vue

@@ -9,13 +9,13 @@ import { ref, computed, watch } from 'vue'
 import {
   icon__fold,
   icon__github,
-  icon__vscode,
   icon__folder,
   icon__search,
   icon__number_gray,
   icon__number_purple,
 } from '../../assets/icons'
 import { NOTES_DIR_KEY, REPO_NAME, AUTHOR, ROOT_ITEM } from '../constants.ts'
+import { useLocalIde } from '../composables/useLocalIde'
 import FolderTreeItems from './FolderTreeItems.vue'
 import NotesTrendChart from './NotesTrendChart.vue'
 import { useSettingsDialog } from '../Settings/composables/useSettingsDialog'
@@ -29,9 +29,7 @@ import {
 import {
   getRepoRootPath,
   resolveNoteReadmePath,
-  toVscodeFileUrl,
 } from '../utils/vscodePaths'
-import { formatDate } from '../utils.ts'
 
 // #region props
 const props = defineProps({
@@ -46,6 +44,14 @@ const props = defineProps({
 })
 // #endregion
 
+const {
+  icon: localIdeIcon,
+  openNoteTitle,
+  openRepoTitle,
+  openReadmeTitle,
+  toFileUrl,
+} = useLocalIde()
+
 // #region data
 const viewMode = ref('folder')
 const expandedTreeKeys = ref(new Set())
@@ -217,7 +223,7 @@ function openGithubRepo() {
   window.open(`https://github.com/${AUTHOR}/${REPO_NAME}`, '_blank')
 }
 
-// 打开 VS Code 知识库
+// 打开本地 IDE 知识库
 function openVSCodeRepo() {
   const notesDir = localStorage.getItem(NOTES_DIR_KEY)
 
@@ -231,10 +237,10 @@ function openVSCodeRepo() {
     return
   }
 
-  window.open('vscode://file/' + notesDir, '_blank')
+  window.open(toFileUrl(notesDir), '_blank')
 }
 
-// 打开 VS Code 中的笔记 README.md
+// 在本地 IDE 中打开笔记 README.md
 function openVSCodeArticle(article) {
   const notesDir = localStorage.getItem(NOTES_DIR_KEY)
 
@@ -251,7 +257,7 @@ function openVSCodeArticle(article) {
   const notePath = resolveNoteReadmePath(notesDir, article.relativePath)
   if (!notePath) return
 
-  window.open(toVscodeFileUrl(notePath), '_blank')
+  window.open(toFileUrl(notePath), '_blank')
 }
 
 function openVSCodeReadme() {
@@ -268,7 +274,7 @@ function openVSCodeReadme() {
   }
 
   const readmePath = `${getRepoRootPath(notesDir)}/README.md`
-  window.open(toVscodeFileUrl(readmePath), '_blank')
+  window.open(toFileUrl(readmePath), '_blank')
 }
 </script>
 
@@ -318,9 +324,9 @@ function openVSCodeReadme() {
           <img :src="icon__github" alt="GitHub仓库" />
         </button>
 
-        <!-- VS Code 按钮 -->
-        <button class="vscode-open" @click="openVSCodeRepo">
-          <img :src="icon__vscode" alt="使用 VS Code 打开本地知识库" />
+        <!-- 本地 IDE 按钮 -->
+        <button class="vscode-open" @click="openVSCodeRepo" :title="openRepoTitle">
+          <img :src="localIdeIcon" :alt="openRepoTitle" />
         </button>
 
         <!-- 关于按钮 -->
@@ -346,18 +352,6 @@ function openVSCodeReadme() {
               {{ AUTHOR }}/{{ REPO_NAME }}
             </a>
           </div>
-          <div class="about-item">
-            <span class="about-label">📅 创建时间</span>
-            <span class="about-value">{{
-              formatDate(ROOT_ITEM.created_at)
-            }}</span>
-          </div>
-          <div class="about-item">
-            <span class="about-label">♻️ 最近更新</span>
-            <span class="about-value">{{
-              formatDate(ROOT_ITEM.updated_at)
-            }}</span>
-          </div>
         </div>
       </div>
     </div>
@@ -395,9 +389,9 @@ function openVSCodeReadme() {
           <button
             class="vscode-article"
             @click.stop="openVSCodeArticle(article)"
-            title="在 VS Code 中打开笔记目录"
+            :title="openNoteTitle"
           >
-            <img :src="icon__vscode" alt="打开笔记目录" />
+            <img :src="localIdeIcon" :alt="openNoteTitle" />
           </button>
         </div>
       </div>
@@ -415,10 +409,10 @@ function openVSCodeReadme() {
           <button
             class="vscode-article"
             type="button"
-            title="在 VS Code 中打开 README.md"
+            :title="openReadmeTitle"
             @click="openVSCodeReadme"
           >
-            <img :src="icon__vscode" alt="打开 README.md" />
+            <img :src="localIdeIcon" :alt="openReadmeTitle" />
           </button>
         </div>
         <FolderTreeItems

package/vitepress/components/composables/useLocalIde.ts

@@ -0,0 +1,83 @@
+/**
+ * vitepress/components/composables/useLocalIde.ts
+ *
+ * 本地 IDE（VS Code / Cursor）选择状态与展示信息
+ */
+
+import { computed, ref } from 'vue'
+
+import { icon__cursor, icon__vscode } from '../../assets/icons'
+import { LOCAL_IDE_KEY } from '../constants'
+import {
+  DEFAULT_LOCAL_IDE,
+  normalizeLocalIde,
+  toIdeFileUrl,
+  type LocalIdeId,
+} from '../utils/vscodePaths'
+
+const ide = ref<LocalIdeId>(DEFAULT_LOCAL_IDE)
+let hydrated = false
+
+function readIdeFromStorage(): LocalIdeId {
+  if (typeof window === 'undefined') return DEFAULT_LOCAL_IDE
+  return normalizeLocalIde(localStorage.getItem(LOCAL_IDE_KEY))
+}
+
+function hydrateFromStorage() {
+  if (typeof window === 'undefined' || hydrated) return
+  ide.value = readIdeFromStorage()
+  hydrated = true
+}
+
+export function useLocalIde() {
+  hydrateFromStorage()
+
+  const icon = computed(() =>
+    ide.value === 'cursor' ? icon__cursor : icon__vscode,
+  )
+
+  const shortLabel = computed(() =>
+    ide.value === 'cursor' ? 'Cursor' : 'VS Code',
+  )
+
+  const openNoteTitle = computed(
+    () => `用 ${shortLabel.value} 打开笔记目录`,
+  )
+  const openRepoTitle = computed(
+    () => `用 ${shortLabel.value} 打开本地知识库`,
+  )
+  const openReadmeTitle = computed(
+    () => `用 ${shortLabel.value} 打开 README.md`,
+  )
+  const openCurrentTitle = computed(
+    () => `用 ${shortLabel.value} 打开当前笔记`,
+  )
+
+  function setLocalIde(next: LocalIdeId) {
+    ide.value = normalizeLocalIde(next)
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(LOCAL_IDE_KEY, ide.value)
+    }
+  }
+
+  function refreshLocalIde() {
+    ide.value = readIdeFromStorage()
+  }
+
+  function toFileUrl(filePath: string) {
+    return toIdeFileUrl(filePath, ide.value)
+  }
+
+  return {
+    ide,
+    icon,
+    shortLabel,
+    openNoteTitle,
+    openRepoTitle,
+    openReadmeTitle,
+    openCurrentTitle,
+    setLocalIde,
+    refreshLocalIde,
+    toFileUrl,
+  }
+}

package/vitepress/components/constants.ts

@@ -37,6 +37,11 @@ export const ROOT_ITEM = __TNOTES_ROOT_ITEM__
  */
 export const NOTES_DIR_KEY: string = 'NOTES_DIR_KEY__' + REPO_NAME
 
+/**
+ * 本地打开所用 IDE（vscode | cursor）
+ */
+export const LOCAL_IDE_KEY: string = 'LOCAL_IDE_KEY__' + REPO_NAME
+
 /**
  * 用户选择的视图
  */
@@ -53,12 +58,6 @@ export const EN_WORD_LIST_COMP_IS_AUTO_SHOW_CARD: string =
  */
 export const MARKMAP_THEME_KEY: string = 'MARKMAP_THEME_KEY__' + REPO_NAME
 
-/**
- * MarkMap 默认展开层级配置
- */
-export const MARKMAP_EXPAND_LEVEL_KEY: string =
-  'MARKMAP_EXPAND_LEVEL_KEY__' + REPO_NAME
-
 /**
  * 侧边栏是否显示笔记编号配置
  */

package/vitepress/components/utils/vscodePaths.test.ts

@@ -2,7 +2,9 @@ import { describe, expect, it } from 'vitest'
 
 import {
   getRepoRootPath,
+  normalizeLocalIde,
   resolveNoteReadmePath,
+  toIdeFileUrl,
   toVscodeFileUrl,
 } from './vscodePaths'
 
@@ -33,6 +35,26 @@ describe('vscodePaths', () => {
     )
   })
 
+  it('normalizeLocalIde falls back to vscode', () => {
+    expect(normalizeLocalIde(null)).toBe('vscode')
+    expect(normalizeLocalIde('')).toBe('vscode')
+    expect(normalizeLocalIde('foo')).toBe('vscode')
+    expect(normalizeLocalIde('cursor')).toBe('cursor')
+    expect(normalizeLocalIde('vscode')).toBe('vscode')
+  })
+
+  it('toIdeFileUrl uses vscode scheme by default', () => {
+    expect(toIdeFileUrl('C:\\notes\\0001\\README.md')).toContain(
+      'vscode://file/',
+    )
+  })
+
+  it('toIdeFileUrl uses cursor scheme when selected', () => {
+    expect(toIdeFileUrl('C:\\notes\\0001\\README.md', 'cursor')).toContain(
+      'cursor://file/',
+    )
+  })
+
   it('toVscodeFileUrl encodes file path', () => {
     expect(toVscodeFileUrl('C:\\notes\\0001\\README.md')).toContain(
       'vscode://file/',