Skip to content

Commit bbecb5c

Browse files
author
Tdahuyou
committed
📝 Update notes - 2025-11-11 23:38:09
1 parent 9a9b4cc commit bbecb5c

File tree

16 files changed

+865
-79
lines changed

16 files changed

+865
-79
lines changed

‎.vitepress/tnotes/vitepress/components/Layout/CustomSidebar.vue‎

Lines changed: 516 additions & 0 deletions
Large diffs are not rendered by default.

‎.vitepress/tnotes/vitepress/components/Layout/Layout.vue‎

Lines changed: 61 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -136,16 +136,20 @@
136136
</span>
137137
</template> -->
138138

139+
<!-- 使用 sidebar-nav-before 插槽插入控制按钮 -->
139140
<template #sidebar-nav-before>
140-
<div :class="$style.sidebarControls">
141-
<span
142-
@click="toggleAllSidebarSections"
143-
:class="{ [$style.folded]: !allSidebarExpanded }"
144-
:title="allSidebarExpanded ? '收起所有章节' : '展开所有章节'"
145-
>
146-
<img :src="icon__fold" alt="折叠/展开" />
147-
</span>
148-
</div>
141+
<SidebarNavBefore
142+
:is-expanded="allSidebarExpanded"
143+
:show-note-id="showNoteId"
144+
@toggle-expand="toggleSidebarSections"
145+
@toggle-note-id="toggleNoteId"
146+
@focus-current="focusCurrentNote"
147+
/>
148+
</template>
149+
150+
<!-- 使用 sidebar-nav-after 插槽插入自定义 Sidebar -->
151+
<template #sidebar-nav-after>
152+
<CustomSidebar ref="customSidebarRef" />
149153
</template>
150154
<!-- <template #sidebar-nav-after>sidebar-nav-after</template> -->
151155

@@ -174,22 +178,22 @@ import ContentCollapse from './ContentCollapse.vue'
174178
import AboutModal from './AboutModal.vue'
175179
import AboutPanel from './AboutPanel.vue'
176180
import DocBeforeControls from './DocBeforeControls.vue'
177-
178-
import icon__fold from '/icon__fold.svg'
181+
import CustomSidebar from './CustomSidebar.vue'
182+
import SidebarNavBefore from './SidebarNavBefore.vue'
179183
180184
import { useData, useRoute, useRouter } from 'vitepress'
181185
import DefaultTheme from 'vitepress/theme'
182186
import { computed, onMounted, ref, watch } from 'vue'
183187
184188
import { data as allNotesConfig } from '../notesConfig.data.ts'
185189
import { data as readmeData } from './homeReadme.data.ts'
190+
import { SIDEBAR_SHOW_NOTE_ID_KEY } from '../constants'
186191
187192
// Composables
188193
import { useRedirect } from './composables/useRedirect'
189194
import { useNoteConfig } from './composables/useNoteConfig'
190195
import { useNoteValidation } from './composables/useNoteValidation'
191196
import { useNoteSave } from './composables/useNoteSave'
192-
import { useSidebarControl } from './composables/useSidebarControl'
193197
import { useCollapseControl } from './composables/useCollapseControl'
194198
import { useVSCodeIntegration } from './composables/useVSCodeIntegration'
195199
@@ -198,6 +202,51 @@ const vpData = useData()
198202
const router = useRouter()
199203
const route = useRoute()
200204
205+
// 自定义侧边栏引用
206+
const customSidebarRef = ref(null)
207+
const allSidebarExpanded = ref(false)
208+
const showNoteId = ref(false)
209+
210+
// 初始化笔记编号显示状态
211+
if (typeof window !== 'undefined') {
212+
const savedShowNoteId = localStorage.getItem(SIDEBAR_SHOW_NOTE_ID_KEY)
213+
showNoteId.value = savedShowNoteId === 'true'
214+
}
215+
216+
// 切换侧边栏展开/折叠状态
217+
function toggleSidebarSections() {
218+
if (customSidebarRef.value) {
219+
if (allSidebarExpanded.value) {
220+
customSidebarRef.value.collapseAll()
221+
} else {
222+
customSidebarRef.value.expandAll()
223+
}
224+
allSidebarExpanded.value = !allSidebarExpanded.value
225+
}
226+
}
227+
228+
// 切换笔记编号显示状态
229+
function toggleNoteId() {
230+
showNoteId.value = !showNoteId.value
231+
if (typeof window !== 'undefined') {
232+
localStorage.setItem(SIDEBAR_SHOW_NOTE_ID_KEY, showNoteId.value.toString())
233+
// 刷新页面以应用变化
234+
window.location.reload()
235+
}
236+
}
237+
238+
// 聚焦到当前笔记
239+
function focusCurrentNote() {
240+
console.log('🎯 [Layout] focusCurrentNote called')
241+
console.log('🎯 [Layout] customSidebarRef:', customSidebarRef.value)
242+
if (customSidebarRef.value) {
243+
console.log('🎯 [Layout] Calling customSidebarRef.focusCurrentNote()')
244+
customSidebarRef.value.focusCurrentNote()
245+
} else {
246+
console.log('❌ [Layout] customSidebarRef is null')
247+
}
248+
}
249+
201250
// 提取当前笔记的 ID（前 4 个数字）
202251
const currentNoteId = computed(() => {
203252
const match = vpData.page.value.relativePath.match(/notes\/(\d{4})\./)
@@ -324,9 +373,6 @@ const {
324373
updateOriginalValues
325374
)
326375
327-
// 侧边栏控制
328-
const { allSidebarExpanded, toggleAllSidebarSections } = useSidebarControl()
329-
330376
// 折叠控制
331377
const { allCollapsed, toggleAllCollapse } = useCollapseControl()
332378

‎.vitepress/tnotes/vitepress/components/Layout/SidebarNavBefore.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<div class="sidebar-toggle-wrapper">
3+
<!-- 笔记编号显示切换按钮 -->
4+
<button
5+
class="toggle-btn"
6+
@click="$emit('toggle-note-id')"
7+
:title="showNoteId ? '隐藏笔记编号' : '显示笔记编号'"
8+
>
9+
<img
10+
:src="showNoteId ? icon__number_purple : icon__number_gray"
11+
class="toggle-icon"
12+
alt="切换笔记编号"
13+
/>
14+
</button>
15+
16+
<!-- 展开/折叠全部按钮 -->
17+
<button
18+
class="toggle-btn"
19+
@click="$emit('toggle-expand')"
20+
:title="isExpanded ? '全部折叠' : '全部展开'"
21+
>
22+
<img :src="icon__fold" class="toggle-icon" alt="切换展开折叠" />
23+
</button>
24+
25+
<!-- 聚焦到当前笔记按钮 -->
26+
<button
27+
class="toggle-btn"
28+
@click="$emit('focus-current')"
29+
title="聚焦到当前笔记（点击切换多个位置）"
30+
>
31+
<img :src="icon__focus" class="toggle-icon" alt="聚焦当前笔记" />
32+
</button>
33+
</div>
34+
</template>
35+
36+
<script setup lang="ts">
37+
import icon__fold from '/icon__fold.svg'
38+
import icon__number_purple from '/icon__number_purple.svg'
39+
import icon__number_gray from '/icon__number_gray.svg'
40+
import icon__focus from '/icon__focus.svg'
41+
42+
defineProps<{
43+
isExpanded: boolean
44+
showNoteId: boolean
45+
}>()
46+
47+
defineEmits<{
48+
'toggle-expand': []
49+
'toggle-note-id': []
50+
'focus-current': []
51+
}>()
52+
</script>
53+
54+
<style scoped>
55+
.sidebar-toggle-wrapper {
56+
display: flex;
57+
align-items: center;
58+
justify-content: center;
59+
gap: 8px;
60+
padding: 12px 0 16px 0;
61+
border-bottom: 1px solid var(--vp-c-divider);
62+
margin-bottom: 16px;
63+
}
64+
65+
.toggle-btn {
66+
display: inline-flex;
67+
align-items: center;
68+
justify-content: center;
69+
padding: 8px;
70+
cursor: pointer;
71+
background: transparent;
72+
border: none;
73+
border-radius: 6px;
74+
transition: all 0.2s ease;
75+
}
76+
77+
.toggle-btn:hover {
78+
background: var(--vp-c-bg-soft);
79+
}
80+
81+
.toggle-btn:active .toggle-icon {
82+
transform: scale(0.95);
83+
}
84+
85+
.toggle-icon {
86+
width: 20px;
87+
height: 20px;
88+
display: block;
89+
transition: transform 0.2s ease;
90+
}
91+
92+
.toggle-btn:hover .toggle-icon {
93+
transform: scale(1.1);
94+
}
95+
</style>

‎.vitepress/tnotes/vitepress/components/Layout/composables/useSidebarControl.ts‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎.vitepress/tnotes/vitepress/components/Settings/Settings.module.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,28 @@
197197
pointer-events: none;
198198
}
199199

200+
.checkboxLabel {
201+
display: flex;
202+
align-items: center;
203+
gap: 10px;
204+
font-size: 14px;
205+
color: var(--vp-c-text-1);
206+
cursor: pointer;
207+
user-select: none;
208+
padding: 8px 0;
209+
210+
&:hover {
211+
color: var(--vp-c-brand-1);
212+
}
213+
}
214+
215+
.checkbox {
216+
width: 18px;
217+
height: 18px;
218+
cursor: pointer;
219+
accent-color: var(--vp-c-brand-1);
220+
}
221+
200222
/* 操作栏 */
201223
.actionBar {
202224
display: flex;

0 commit comments

Comments
 (0)