@tnotesjs/core 0.0.8 → 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 { useData } from 'vitepress'
-import { ref, onMounted, onUnmounted } from 'vue'
-
-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/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/SidebarCard.vue

@@ -1,14 +1,7 @@
 <script setup>
 import { useData } from 'vitepress'
-import { useRouter } from 'vitepress'
 import { ref, computed, watch } from 'vue'
 
-import { NOTES_DIR_KEY, REPO_NAME, AUTHOR, ROOT_ITEM } from '../constants.ts'
-import { data as sidebarConfig } from '../sidebar.data'
-import { formatDate } from '../utils.ts'
-// @ts-expect-error - VitePress Data Loader
-import MindMapView from './MindMapView.vue'
-import NotesTrendChart from './NotesTrendChart.vue'
 import {
   icon__fold,
   icon__github,
@@ -19,6 +12,13 @@ import {
   icon__number_gray,
   icon__number_purple,
 } from '../../assets/icons'
+import { NOTES_DIR_KEY, REPO_NAME, AUTHOR, ROOT_ITEM } from '../constants.ts'
+import { useSettingsDialog } from '../Settings/composables/useSettingsDialog'
+import { data as sidebarConfig } from '../sidebar.data'
+import { formatDate } from '../utils.ts'
+// @ts-expect-error - VitePress Data Loader
+import MindMapView from './MindMapView.vue'
+import NotesTrendChart from './NotesTrendChart.vue'
 
 // #region props
 const props = defineProps({
@@ -97,7 +97,7 @@ const folderViewData = computed(() => {
 })
 // #endregion
 
-const router = useRouter()
+const { open: openSettings } = useSettingsDialog()
 const { site } = useData()
 const baseUrl = site.value.base.replace(/\/$/, '')
 
@@ -261,10 +261,10 @@ function openVSCodeRepo() {
 
   if (!notesDir) {
     const shouldRedirect = confirm(
-      '请先配置本地知识库所在位置，点击确定跳转到设置页面',
+      '请先配置本地知识库所在位置，点击确定打开设置面板',
     )
     if (shouldRedirect) {
-      router.go(`${REPO_NAME}/Settings`)
+      openSettings()
     }
     return
   }
@@ -278,10 +278,10 @@ function openVSCodeArticle(article) {
 
   if (!notesDir) {
     const shouldRedirect = confirm(
-      '请先配置本地知识库所在位置，点击确定跳转到设置页面',
+      '请先配置本地知识库所在位置，点击确定打开设置面板',
     )
     if (shouldRedirect) {
-      router.go(`${REPO_NAME}/Settings`)
+      openSettings()
     }
     return
   }

package/vitepress/config/index.ts

@@ -9,7 +9,7 @@
  */
 import fs from 'fs'
 import path from 'path'
-import { defineConfig, type UserConfig } from 'vitepress'
+import { defineConfig, type UserConfig } from 'vitepress'
 
 import {
   getIgnoreList,
@@ -18,7 +18,8 @@ import {
   getMarkdownConfig,
   getThemeConfig,
 } from '../configs'
-import { buildProgressPlugin } from '../plugins/buildProgressPlugin'
+import { buildProgressPlugin } from '../plugins/buildProgressPlugin'
+import { fileWatcherBridgePlugin } from '../plugins/fileWatcherBridgePlugin'
 import { getNoteByConfigIdPlugin } from '../plugins/getNoteByConfigIdPlugin'
 import { renameNotePlugin } from '../plugins/renameNotePlugin'
 import { updateConfigPlugin } from '../plugins/updateConfigPlugin'
@@ -77,9 +78,13 @@ export function defineNotesConfig(overrides: UserConfig = {}) {
         updateConfigPlugin() as any,
         renameNotePlugin() as any,
         getNoteByConfigIdPlugin() as any,
+        fileWatcherBridgePlugin() as any,
         ...(overrideVite?.plugins || []),
       ],
       server: {
+        // 显式同时监听 IPv4 / IPv6，避免 Node 18+ 在 Windows 下偶发只绑定 ::1
+        // 导致 Chrome 解析 localhost → 127.0.0.1 时连接被拒、页面一直 pending。
+        // host: true,
         watch: {
           ignored: IGNORE_LIST,
         },