@tnotesjs/core 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/core",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "TNotes 知识库核心框架 —— 基于 VitePress 的笔记管理系统",
   "type": "module",
   "packageManager": "pnpm@10.17.1",

package/vitepress/assets/icons/icon__setting.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#67676c" d="M19.9 12.66a1 1 0 0 1 0-1.32l1.28-1.44a1 1 0 0 0 .12-1.17l-2-3.46a1 1 0 0 0-1.07-.48l-1.88.38a1 1 0 0 1-1.15-.66l-.61-1.83a1 1 0 0 0-.95-.68h-4a1 1 0 0 0-1 .68l-.56 1.83a1 1 0 0 1-1.15.66L5 4.79a1 1 0 0 0-1 .48L2 8.73a1 1 0 0 0 .1 1.17l1.27 1.44a1 1 0 0 1 0 1.32L2.1 14.1a1 1 0 0 0-.1 1.17l2 3.46a1 1 0 0 0 1.07.48l1.88-.38a1 1 0 0 1 1.15.66l.61 1.83a1 1 0 0 0 1 .68h4a1 1 0 0 0 .95-.68l.61-1.83a1 1 0 0 1 1.15-.66l1.88.38a1 1 0 0 0 1.07-.48l2-3.46a1 1 0 0 0-.12-1.17ZM18.41 14l.8.9l-1.28 2.22l-1.18-.24a3 3 0 0 0-3.45 2L12.92 20h-2.56L10 18.86a3 3 0 0 0-3.45-2l-1.18.24l-1.3-2.21l.8-.9a3 3 0 0 0 0-4l-.8-.9l1.28-2.2l1.18.24a3 3 0 0 0 3.45-2L10.36 4h2.56l.38 1.14a3 3 0 0 0 3.45 2l1.18-.24l1.28 2.22l-.8.9a3 3 0 0 0 0 3.98m-6.77-6a4 4 0 1 0 4 4a4 4 0 0 0-4-4m0 6a2 2 0 1 1 2-2a2 2 0 0 1-2 2"/></svg>

package/vitepress/assets/icons/index.ts

@@ -28,6 +28,7 @@ export { default as icon__prev } from './icon__prev.svg'
 export { default as icon__restore } from './icon__restore.svg'
 export { default as icon__rotate } from './icon__rotate.svg'
 export { default as icon__search } from './icon__search.svg'
+export { default as icon__setting } from './icon__setting.svg'
 export { default as icon__sidebar_collapsed } from './icon__sidebar_collapsed.svg'
 export { default as icon__sidebar_opened } from './icon__sidebar_opened.svg'
 export { default as icon__totop } from './icon__totop.svg'

package/vitepress/components/Layout/Layout.vue

@@ -156,7 +156,6 @@
         @toggle-expand="toggleSidebarSections"
         @toggle-note-id="toggleNoteId"
         @focus-current="focusCurrentNote"
-        @open-settings="openSettings"
       />
     </template>
 
@@ -175,7 +174,10 @@
     <!-- <template #nav-bar-title-before>nav-bar-title-before</template> -->
     <!-- <template #nav-bar-title-after>nav-bar-title-after</template> -->
     <!-- <template #nav-bar-content-before>nav-bar-content-before</template> -->
-    <!-- <template #nav-bar-content-after>nav-bar-content-after</template> -->
+    <!-- 设置入口：固定在 VPNav 右侧（social-links / appearance 之后，extra 之前） -->
+    <template #nav-bar-content-after>
+      <NavBarSettingsTrigger />
+    </template>
 
     <!-- !NOTE 不清楚下面的插槽所对应的位置 -->
     <!-- <template #nav-screen-content-before>nav-screen-content-before</template> -->
@@ -218,10 +220,10 @@ import DocBeforeControls from "./DocBeforeControls.vue";
 import DocFooter from "./DocFooter.vue";
 import { data as readmeData } from "./homeReadme.data.ts";
 import ImagePreview from "./ImagePreview.vue";
+import NavBarSettingsTrigger from "./NavBarSettingsTrigger.vue";
 import NoteStatus from "./NoteStatus.vue";
 import SidebarNavBefore from "./SidebarNavBefore.vue";
 import Swiper from "./Swiper.vue";
-import { useSettingsDialog } from "../Settings/composables/useSettingsDialog";
 import SettingsDialog from "../Settings/SettingsDialog.vue";
 
 const { Layout } = DefaultTheme;
@@ -235,9 +237,6 @@ useCodeBlockFullscreen();
 // 全局重命名遮罩状态（由 useRenameRedirect 控制 show/hide）
 const { state: renameOverlayState } = useRenameOverlay();
 
-// 全局设置 Dialog 控制
-const { open: openSettings } = useSettingsDialog();
-
 // 自定义侧边栏引用
 const customSidebarRef = ref(null);
 const showNoteId = ref(false);

package/vitepress/components/Layout/NavBarSettingsTrigger.vue

@@ -0,0 +1,59 @@
+<template>
+  <button
+    type="button"
+    class="tnotes-nav-settings-trigger"
+    title="打开设置"
+    aria-label="打开设置"
+    @click="open"
+  >
+    <img
+      :src="icon__setting"
+      class="tnotes-nav-settings-icon"
+      alt=""
+      aria-hidden="true"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { icon__setting } from '../../assets/icons'
+import { useSettingsDialog } from '../Settings/composables/useSettingsDialog'
+
+const { open } = useSettingsDialog()
+</script>
+
+<style scoped>
+.tnotes-nav-settings-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  margin: 0 4px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+.tnotes-nav-settings-trigger:hover {
+  background: var(--vp-c-default-soft);
+  color: var(--vp-c-text-1);
+}
+
+.tnotes-nav-settings-icon {
+  width: 20px;
+  height: 20px;
+  display: block;
+  transition: transform 0.2s ease;
+}
+
+.tnotes-nav-settings-trigger:hover .tnotes-nav-settings-icon {
+  transform: scale(1.1);
+}
+</style>

package/vitepress/components/Layout/SidebarNavBefore.vue

@@ -1,45 +1,40 @@
 <template>
   <div class="sidebar-toggle-wrapper">
-    <!-- 笔记编号显示切换按钮 -->
-    <button
-      class="toggle-btn"
-      @click="$emit('toggle-note-id')"
-      :title="showNoteId ? '隐藏笔记编号' : '显示笔记编号'"
-    >
-      <img
-        :src="showNoteId ? icon__number_purple : icon__number_gray"
-        class="toggle-icon"
-        alt="切换笔记编号"
-      />
-    </button>
+    <div class="group group-left">
+      <!-- 展开/折叠全部按钮 -->
+      <button
+        class="toggle-btn"
+        @click="$emit('toggle-expand')"
+        :title="isExpanded ? '全部折叠' : '全部展开'"
+      >
+        <img :src="icon__fold" class="toggle-icon" alt="切换展开折叠" />
+      </button>
+      <span class="group-label">目录</span>
+    </div>
 
-    <!-- 展开/折叠全部按钮 -->
-    <button
-      class="toggle-btn"
-      @click="$emit('toggle-expand')"
-      :title="isExpanded ? '全部折叠' : '全部展开'"
-    >
-      <img :src="icon__fold" class="toggle-icon" alt="切换展开折叠" />
-    </button>
+    <div class="group group-right">
+      <!-- 聚焦到当前笔记按钮 -->
+      <button
+        class="toggle-btn"
+        @click="$emit('focus-current')"
+        title="聚焦到当前笔记（点击切换多个位置）"
+      >
+        <img :src="icon__focus" class="toggle-icon" alt="聚焦当前笔记" />
+      </button>
 
-    <!-- 聚焦到当前笔记按钮 -->
-    <button
-      class="toggle-btn"
-      @click="$emit('focus-current')"
-      title="聚焦到当前笔记（点击切换多个位置）"
-    >
-      <img :src="icon__focus" class="toggle-icon" alt="聚焦当前笔记" />
-    </button>
-
-    <!-- 设置按钮 -->
-    <button
-      class="toggle-btn settings-btn"
-      @click="$emit('open-settings')"
-      title="打开设置"
-      aria-label="打开设置"
-    >
-      <span class="settings-icon" aria-hidden="true">⚙️</span>
-    </button>
+      <!-- 笔记编号显示切换按钮 -->
+      <button
+        class="toggle-btn"
+        @click="$emit('toggle-note-id')"
+        :title="showNoteId ? '隐藏笔记编号' : '显示笔记编号'"
+      >
+        <img
+          :src="showNoteId ? icon__number_purple : icon__number_gray"
+          class="toggle-icon"
+          alt="切换笔记编号"
+        />
+      </button>
+    </div>
   </div>
 </template>
 
@@ -55,7 +50,6 @@ defineEmits<{
   'toggle-expand': []
   'toggle-note-id': []
   'focus-current': []
-  'open-settings': []
 }>()
 </script>
 
@@ -63,13 +57,24 @@ defineEmits<{
 .sidebar-toggle-wrapper {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 0 16px 0;
+  justify-content: space-between;
+  padding: 12px 8px 16px;
   border-bottom: 1px solid var(--vp-c-divider);
   margin-bottom: 16px;
 }
 
+.group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.group-label {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  user-select: none;
+}
+
 .toggle-btn {
   display: inline-flex;
   align-items: center;
@@ -100,15 +105,4 @@ defineEmits<{
 .toggle-btn:hover .toggle-icon {
   transform: scale(1.1);
 }
-
-.settings-icon {
-  font-size: 18px;
-  line-height: 1;
-  display: inline-block;
-  transition: transform 0.2s ease;
-}
-
-.toggle-btn:hover .settings-icon {
-  transform: scale(1.1);
-}
 </style>