@tnotesjs/core 0.0.7 → 0.1.14

package/vitepress/components/LoadingPage/LoadingPage.vue

@@ -1,192 +1,84 @@
-<template>
-  <div class="loading-page">
-    <div class="loading-container">
-      <div class="spinner"></div>
-      <h2>{{ message }}</h2>
-      <p class="tip">{{ tip }}</p>
-      <p v-if="!error" class="countdown">{{ countdown }}秒后自动跳转</p>
-      <p v-if="error" class="error-msg">{{ error }}</p>
-      <button class="back-home-btn" @click="goHome">返回首页</button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { useData } from 'vitepress'
-
-const props = defineProps<{
-  targetUrl?: string
-  message?: string
-}>()
-
-const message = ref(props.message || '正在处理笔记更新')
-const tip = ref('请稍候,正在处理中...')
-const countdown = ref(2)
-const error = ref('')
-const { site } = useData()
-
-let timer: NodeJS.Timeout | null = null
-let countdownTimer: NodeJS.Timeout | null = null
-
-function goHome() {
-  const base = site.value.base || '/'
-  window.location.href = base
-}
-
-async function fetchNoteInfo(configId: string) {
-  try {
-    const response = await fetch(
-      `/__tnotes_get_note?configId=${encodeURIComponent(configId)}`
-    )
-    const result = await response.json()
-
-    if (!result.success) {
-      throw new Error(result.error || '查询笔记信息失败')
-    }
-
-    if (!result.found) {
-      // 笔记不存在或已被删除，跳转到首页
-      tip.value = '笔记不存在或已被删除，即将跳转到首页'
-      const base = site.value.base || '/'
-      return base + 'README'
-    }
-
-    // 返回笔记的 URL
-    const base = site.value.base || '/'
-    return base + result.data.url.slice(1) // 移除开头的 /
-  } catch (err) {
-    error.value = err instanceof Error ? err.message : String(err)
-    tip.value = '获取笔记信息失败'
-    throw err
-  }
-}
-
-onMounted(async () => {
-  try {
-    // 从 URL 参数获取 configId 或直接的 target
-    const params = new URLSearchParams(window.location.search)
-    const configId = params.get('configId')
-    const target = params.get('target')
-
-    let targetUrl: string
-
-    if (configId) {
-      // 使用 configId 查询笔记信息
-      tip.value = '正在查询笔记信息...'
-      targetUrl = await fetchNoteInfo(configId)
-    } else if (target) {
-      // 使用直接提供的 target URL
-      targetUrl = decodeURIComponent(target)
-    } else if (props.targetUrl) {
-      // 使用 props 传入的 URL
-      targetUrl = props.targetUrl
-    } else {
-      // 没有提供任何参数，直接跳转到首页
-      const base = site.value.base || '/'
-      targetUrl = base + 'README'
-      tip.value = '参数缺失，即将跳转到首页'
-    }
-
-    // 倒计时
-    countdownTimer = setInterval(() => {
-      countdown.value--
-      if (countdown.value <= 0 && countdownTimer) {
-        clearInterval(countdownTimer)
-      }
-    }, 1000)
-
-    // 等待2秒后跳转到目标页面
-    timer = setTimeout(() => {
-      window.location.href = targetUrl
-    }, 2000)
-  } catch (err) {
-    console.error('Loading page error:', err)
-    // 发生错误时，延迟跳转到首页
-    setTimeout(() => {
-      goHome()
-    }, 3000)
-  }
-})
-
-onUnmounted(() => {
-  if (timer) clearTimeout(timer)
-  if (countdownTimer) clearInterval(countdownTimer)
-})
-</script>
-
-<style scoped>
-.loading-page {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--vp-c-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-}
-
-.loading-container {
-  text-align: center;
-  padding: 2rem;
-}
-
-.spinner {
-  width: 60px;
-  height: 60px;
-  margin: 0 auto 2rem;
-  border: 4px solid var(--vp-c-divider);
-  border-top-color: var(--vp-c-brand-1);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-h2 {
-  font-size: 1.5rem;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.5rem;
-}
-
-.tip {
-  color: var(--vp-c-text-2);
-  font-size: 0.9rem;
-  margin-bottom: 1rem;
-}
-
-.countdown {
-  color: var(--vp-c-brand-1);
-  font-size: 1rem;
-  margin-bottom: 1.5rem;
-  font-weight: 500;
-}
-
-.error-msg {
-  color: var(--vp-c-danger-1);
-  font-size: 0.9rem;
-  margin-bottom: 1.5rem;
-}
-
-.back-home-btn {
-  padding: 0.5rem 1.5rem;
-  background-color: var(--vp-c-brand-1);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  transition: background-color 0.2s;
-}
-
-.back-home-btn:hover {
-  background-color: var(--vp-c-brand-2);
-}
-</style>
+<template>
+  <ClientOnly>
+    <Teleport to="body">
+      <div
+        v-if="visible"
+        class="tnotes-loading-overlay"
+        role="alert"
+        aria-live="polite"
+      >
+        <div class="loading-container">
+          <div class="spinner"></div>
+          <h2>{{ message }}</h2>
+          <p v-if="tip" class="tip">{{ tip }}</p>
+        </div>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** 是否显示遮罩，默认显示 */
+    visible?: boolean
+    /** 主标题 */
+    message?: string
+    /** 副提示文本 */
+    tip?: string
+  }>(),
+  {
+    visible: true,
+    message: '正在处理...',
+    tip: '',
+  },
+)
+</script>
+
+<style scoped>
+.tnotes-loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--vp-c-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.loading-container {
+  text-align: center;
+  padding: 2rem;
+}
+
+.spinner {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 2rem;
+  border: 4px solid var(--vp-c-divider);
+  border-top-color: var(--vp-c-brand-1);
+  border-radius: 50%;
+  animation: tnotes-loading-spin 1s linear infinite;
+}
+
+@keyframes tnotes-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+h2 {
+  font-size: 1.5rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.tip {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+  margin-bottom: 0;
+}
+</style>

package/vitepress/components/MarkMap/MarkMap.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { scaleOrdinal, schemePastel2, schemeSet3, schemeTableau10 } from 'd3'
 import { Transformer } from 'markmap-lib'
-import { Markmap, IMarkmapOptions } from 'markmap-view'
 import { Toolbar } from 'markmap-toolbar'
 import 'markmap-toolbar/dist/style.css'
-import { MARKMAP_THEME_KEY, MARKMAP_EXPAND_LEVEL_KEY } from '../constants'
+import { Markmap, IMarkmapOptions } from 'markmap-view'
+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'
 
 // doc: https://github.com/markmap/markmap/blob/205367a24603dc187f67da1658940c6cade20dce/packages/markmap-view/src/constants.ts#L15
-import { scaleOrdinal, schemePastel2, schemeSet3, schemeTableau10 } from 'd3'
 
 const props = defineProps({
   content: { type: String, default: '' },

package/vitepress/components/Mermaid/Mermaid.vue

@@ -88,7 +88,8 @@
 
 <script setup lang="ts">
 import mermaid from 'mermaid'
-import { nextTick, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import { nextTick, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+
 import {
   icon__zoom_in,
   icon__zoom_out,
@@ -293,7 +294,8 @@ const renderDiagram = async () => {
       bindFunctions(diagramRef.value)
     }
   } catch (err) {
-    error.value = `Failed to render diagram: ${err.message}`
+    const message = err instanceof Error ? err.message : String(err)
+    error.value = `Failed to render diagram: ${message}`
     console.error('Mermaid render error:', err)
   } finally {
     loading.value = false

package/vitepress/components/NotesTable/NotesTable.vue

@@ -35,8 +35,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useData } from 'vitepress'
+import { computed } from 'vue'
+
 // @ts-expect-error - VitePress data loader exports data at runtime
 import { data as allNotesConfig } from '../notesConfig.data.ts'
 

package/vitepress/components/Settings/Settings.vue

@@ -152,7 +152,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+
 import {
   NOTES_DIR_KEY,
   MARKMAP_THEME_KEY,

package/vitepress/components/Settings/SettingsDialog.vue

@@ -0,0 +1,243 @@
+<template>
+  <ClientOnly>
+    <Teleport to="body">
+      <Transition name="tnotes-settings-dialog">
+        <div
+          v-if="state.visible"
+          class="tnotes-settings-overlay"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="tnotes-settings-title"
+          @click.self="close"
+        >
+          <div
+            class="tnotes-settings-dialog"
+            :class="{ 'is-fullscreen': state.fullscreen }"
+          >
+            <header class="tnotes-settings-header">
+              <h2 id="tnotes-settings-title" class="tnotes-settings-title">
+                ⚙️ 设置
+              </h2>
+              <div class="tnotes-settings-actions">
+                <button
+                  type="button"
+                  class="tnotes-settings-icon-btn"
+                  :title="state.fullscreen ? '退出全屏' : '全屏'"
+                  :aria-label="state.fullscreen ? '退出全屏' : '全屏'"
+                  @click="toggleFullscreen"
+                >
+                  <svg
+                    v-if="!state.fullscreen"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M4 9V4h5" />
+                    <path d="M20 9V4h-5" />
+                    <path d="M4 15v5h5" />
+                    <path d="M20 15v5h-5" />
+                  </svg>
+                  <svg
+                    v-else
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M9 4v5H4" />
+                    <path d="M15 4v5h5" />
+                    <path d="M9 20v-5H4" />
+                    <path d="M15 20v-5h5" />
+                  </svg>
+                </button>
+                <button
+                  type="button"
+                  class="tnotes-settings-icon-btn"
+                  title="关闭"
+                  aria-label="关闭"
+                  @click="close"
+                >
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </button>
+              </div>
+            </header>
+            <div class="tnotes-settings-body">
+              <Settings />
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, watch } from 'vue'
+
+import { useSettingsDialog } from './composables/useSettingsDialog'
+import Settings from './Settings.vue'
+
+const { state, close, toggleFullscreen } = useSettingsDialog()
+
+/**
+ * 在 dialog 打开期间，捕获阶段拦截 Ctrl/Cmd+K，
+ * 阻止 VitePress 本地搜索弹窗在设置面板之上叠加；
+ * 同时在捕获阶段处理 Escape 关闭，避免被搜索栏等其它组件吃掉。
+ */
+function blockSearchHotkey(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    e.stopImmediatePropagation()
+    e.preventDefault()
+    close()
+    return
+  }
+  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
+    e.preventDefault()
+    e.stopImmediatePropagation()
+  }
+}
+
+watch(
+  () => state.visible,
+  (visible) => {
+    if (typeof document === 'undefined') return
+    if (visible) {
+      document.addEventListener('keydown', blockSearchHotkey, { capture: true })
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.removeEventListener('keydown', blockSearchHotkey, {
+        capture: true,
+      })
+      document.body.style.overflow = ''
+    }
+  },
+)
+
+onBeforeUnmount(() => {
+  if (typeof document === 'undefined') return
+  document.removeEventListener('keydown', blockSearchHotkey, { capture: true })
+  document.body.style.overflow = ''
+})
+</script>
+
+<style scoped>
+.tnotes-settings-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  padding: 1rem;
+}
+
+.tnotes-settings-dialog {
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
+  width: min(720px, 100%);
+  max-height: min(80vh, 100%);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition:
+    width 0.2s ease,
+    max-height 0.2s ease,
+    border-radius 0.2s ease;
+}
+
+.tnotes-settings-dialog.is-fullscreen {
+  width: 100vw;
+  max-width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  border-radius: 0;
+  border: none;
+}
+
+.tnotes-settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+  flex-shrink: 0;
+}
+
+.tnotes-settings-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--vp-c-text-1);
+}
+
+.tnotes-settings-actions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.tnotes-settings-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+.tnotes-settings-icon-btn:hover {
+  background: var(--vp-c-default-soft);
+  color: var(--vp-c-text-1);
+}
+
+.tnotes-settings-body {
+  flex: 1;
+  overflow: auto;
+  padding: 1rem;
+}
+
+/* dialog 进入/离开过渡 */
+.tnotes-settings-dialog-enter-active,
+.tnotes-settings-dialog-leave-active {
+  transition: opacity 0.18s ease;
+}
+.tnotes-settings-dialog-enter-from,
+.tnotes-settings-dialog-leave-to {
+  opacity: 0;
+}
+</style>

package/vitepress/components/Settings/composables/useSettingsDialog.ts

@@ -0,0 +1,35 @@
+/**
+ * 全局「设置 Dialog」状态。
+ *
+ * Layout 顶层渲染 `<SettingsDialog />`，本 store 控制 visible/fullscreen，
+ * 任何位置（导航入口、SidebarCard 提示等）调 `open()` 即可弹出，
+ * 关闭后停留在当前路由与滚动位置。
+ */
+import { reactive } from 'vue'
+
+export interface SettingsDialogState {
+  visible: boolean
+  fullscreen: boolean
+}
+
+const state = reactive<SettingsDialogState>({
+  visible: false,
+  fullscreen: false,
+})
+
+export function useSettingsDialog() {
+  function open() {
+    state.visible = true
+  }
+
+  function close() {
+    state.visible = false
+    state.fullscreen = false
+  }
+
+  function toggleFullscreen() {
+    state.fullscreen = !state.fullscreen
+  }
+
+  return { state, open, close, toggleFullscreen }
+}

package/vitepress/components/SidebarCard/MindMapView.vue

@@ -1,21 +1,22 @@
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
-import { withBase, useData } from 'vitepress'
+import { scaleOrdinal, schemePastel2, schemeSet3, schemeTableau10 } from 'd3'
 import { Transformer } from 'markmap-lib'
-import { Markmap } from 'markmap-view'
 import { Toolbar } from 'markmap-toolbar'
 import 'markmap-toolbar/dist/style.css'
-import { scaleOrdinal, schemePastel2, schemeSet3, schemeTableau10 } from 'd3'
-import {
-  MARKMAP_THEME_KEY,
-  MARKMAP_EXPAND_LEVEL_KEY,
-  REPO_NAME,
-} from '../constants'
+import { Markmap } from 'markmap-view'
+import { withBase, useData } from 'vitepress'
+import { computed, 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,
+  REPO_NAME,
+} from '../constants'
 
 const props = defineProps({
   sidebarData: {