@tnotesjs/core 0.1.15 → 0.1.17

package/vitepress/components/Layout/SidebarNavBefore.vue

@@ -1,108 +1,171 @@
-<template>
-  <div class="sidebar-toggle-wrapper">
-    <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>
-
-    <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('toggle-note-id')"
-        :title="showNoteId ? '隐藏笔记编号' : '显示笔记编号'"
-      >
-        <img
-          :src="showNoteId ? icon__number_purple : icon__number_gray"
-          class="toggle-icon"
-          alt="切换笔记编号"
-        />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { icon__fold, icon__number_purple, icon__number_gray, icon__focus } from '../../assets/icons'
-
-defineProps<{
-  isExpanded: boolean
-  showNoteId: boolean
-}>()
-
-defineEmits<{
-  'toggle-expand': []
-  'toggle-note-id': []
-  'focus-current': []
-}>()
-</script>
-
-<style scoped>
-.sidebar-toggle-wrapper {
-  display: flex;
-  align-items: center;
-  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;
-  justify-content: center;
-  padding: 8px;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.toggle-btn:hover {
-  background: var(--vp-c-bg-soft);
-}
-
-.toggle-btn:active .toggle-icon {
-  transform: scale(0.95);
-}
-
-.toggle-icon {
-  width: 20px;
-  height: 20px;
-  display: block;
-  transition: transform 0.2s ease;
-}
-
-.toggle-btn:hover .toggle-icon {
-  transform: scale(1.1);
-}
-</style>
+<template>
+  <div class="sidebar-toggle-wrapper">
+    <div class="toolbar-row">
+      <div class="group group-left">
+        <!-- 展开/折叠全部按钮 -->
+        <button
+          class="toggle-btn"
+          @click="$emit('toggle-expand')"
+          :title="isExpanded ? '全部折叠' : '全部展开'"
+        >
+          <img :src="icon__fold" class="toggle-icon" alt="切换展开折叠" />
+        </button>
+        <a
+          :class="[
+            'group-label',
+            'group-label-link',
+            { 'is-active': isCatalogActive },
+          ]"
+          :href="catalogLink"
+          :aria-current="isCatalogActive ? 'page' : undefined"
+        >
+          目录
+        </a>
+      </div>
+
+      <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('toggle-note-id')"
+          :title="showNoteId ? '隐藏笔记编号' : '显示笔记编号'"
+        >
+          <img
+            :src="showNoteId ? icon__number_purple : icon__number_gray"
+            class="toggle-icon"
+            alt="切换笔记编号"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useData, useRoute } from 'vitepress'
+import { computed } from 'vue'
+
+import {
+  icon__fold,
+  icon__number_purple,
+  icon__number_gray,
+  icon__focus,
+} from '../../assets/icons'
+
+defineProps<{
+  isExpanded: boolean
+  showNoteId: boolean
+}>()
+
+defineEmits<{
+  'toggle-expand': []
+  'toggle-note-id': []
+  'focus-current': []
+}>()
+
+const { site } = useData()
+const route = useRoute()
+
+const base = computed(() => site.value.base || '/')
+const catalogLink = computed(() => `${base.value}README`)
+const catalogPath = computed(() => normalizeRoutePath(catalogLink.value))
+const isCatalogActive = computed(() => {
+  const currentPath = normalizeRoutePath(route.path)
+
+  return currentPath === catalogPath.value || currentPath === '/README'
+})
+
+function normalizeRoutePath(path: string): string {
+  const normalizedPath = path.split(/[?#]/)[0].replace(/\.html$/, '')
+
+  return normalizedPath.length > 1
+    ? normalizedPath.replace(/\/$/, '')
+    : normalizedPath
+}
+</script>
+
+<style scoped>
+.sidebar-toggle-wrapper {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 8px 12px;
+  /* border-bottom: 1px solid var(--vp-c-divider); */
+  margin-bottom: 10px;
+  background: var(--vp-sidebar-bg-color, var(--vp-c-bg));
+}
+
+.toolbar-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.group-label {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  text-decoration: none;
+  user-select: none;
+}
+
+.group-label-link:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.group-label-link.is-active {
+  color: var(--vp-c-brand-1);
+  font-weight: 600;
+}
+
+.toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.toggle-btn:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.toggle-btn:active .toggle-icon {
+  transform: scale(0.95);
+}
+
+.toggle-icon {
+  width: 18px;
+  height: 18px;
+  display: block;
+  transition: transform 0.2s ease;
+}
+
+.toggle-btn:hover .toggle-icon {
+  transform: scale(1.1);
+}
+</style>

package/vitepress/components/Layout/SidebarResizeHandle.vue

@@ -0,0 +1,319 @@
+<template>
+  <div
+    class="sidebar-resize-handle"
+    :class="{
+      'is-hidden': hidden,
+      'is-dragging': isDragging,
+      'is-fullscreen': isContentFullscreen,
+    }"
+  >
+    <div
+      v-if="!hidden"
+      class="resize-hotspot"
+      :aria-label="`拖动调整侧边栏宽度，当前 ${width}px`"
+      role="separator"
+      aria-orientation="vertical"
+      :aria-valuemin="minWidth"
+      :aria-valuemax="maxWidth"
+      :aria-valuenow="width"
+      @mousedown.prevent="startResize"
+    ></div>
+
+    <div v-if="!hidden" class="resize-indicator" aria-hidden="true"></div>
+
+    <button
+      class="sidebar-edge-toggle"
+      type="button"
+      :aria-label="toggleTitle"
+      :aria-pressed="hidden"
+      @click.stop="toggleSidebar"
+    >
+      <img :src="toggleIcon" alt="" />
+      <span class="sidebar-edge-tooltip" role="tooltip">
+        <span>{{ toggleActionText }}</span>
+        <kbd>{{ shortcutText }}</kbd>
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import { icon__next, icon__prev } from '../../assets/icons'
+import { useSidebarLayout } from './composables/useSidebarLayout'
+
+const {
+  hidden,
+  width,
+  minWidth,
+  maxWidth,
+  initSidebarLayout,
+  toggleSidebar,
+  setSidebarWidth,
+  saveSidebarWidth,
+} = useSidebarLayout()
+
+const isDragging = ref(false)
+const isContentFullscreen = ref(false)
+const shortcutText = ref('Ctrl + Alt + ,')
+let fullscreenObserver: MutationObserver | null = null
+
+const toggleIcon = computed(() => (hidden.value ? icon__next : icon__prev))
+const toggleActionText = computed(() =>
+  hidden.value ? '展开侧边栏' : '收起侧边栏',
+)
+const toggleTitle = computed(
+  () => `${toggleActionText.value}\n${shortcutText.value}`,
+)
+
+onMounted(() => {
+  initSidebarLayout()
+  shortcutText.value = getShortcutText()
+  updateContentFullscreen()
+  fullscreenObserver = new MutationObserver(updateContentFullscreen)
+  fullscreenObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class'],
+  })
+  window.addEventListener('keydown', handleShortcut)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleShortcut)
+  fullscreenObserver?.disconnect()
+  fullscreenObserver = null
+  stopResize()
+})
+
+function startResize(event: MouseEvent) {
+  if (hidden.value || event.button !== 0) return
+
+  isDragging.value = true
+  document.body.classList.add('is-sidebar-resizing')
+  window.addEventListener('mousemove', resize)
+  window.addEventListener('mouseup', stopResize)
+  setSidebarWidth(event.clientX)
+}
+
+function resize(event: MouseEvent) {
+  if (!isDragging.value) return
+
+  setSidebarWidth(event.clientX)
+}
+
+function stopResize() {
+  if (!isDragging.value) return
+
+  isDragging.value = false
+  document.body.classList.remove('is-sidebar-resizing')
+  window.removeEventListener('mousemove', resize)
+  window.removeEventListener('mouseup', stopResize)
+  saveSidebarWidth()
+}
+
+function handleShortcut(event: KeyboardEvent) {
+  if (!isToggleShortcut(event) || isEditableTarget(event.target)) return
+
+  event.preventDefault()
+  toggleSidebar()
+}
+
+function updateContentFullscreen() {
+  isContentFullscreen.value =
+    document.documentElement.classList.contains('content-fullscreen')
+}
+
+function isToggleShortcut(event: KeyboardEvent): boolean {
+  return (
+    (event.ctrlKey || event.metaKey) && event.altKey && event.code === 'Comma'
+  )
+}
+
+function getShortcutText(): string {
+  return isMacPlatform() ? 'Cmd + Option + ,' : 'Ctrl + Alt + ,'
+}
+
+function isMacPlatform(): boolean {
+  if (typeof navigator === 'undefined') return false
+
+  return /Mac|iPhone|iPad|iPod/i.test(navigator.platform)
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+
+  const tagName = target.tagName.toLowerCase()
+  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+    return true
+  }
+
+  return target.isContentEditable || !!target.closest('[contenteditable="true"]')
+}
+</script>
+
+<style scoped>
+.sidebar-resize-handle {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--tn-sidebar-width, 260px) - 5px);
+  z-index: 30;
+  width: 10px;
+  cursor: col-resize;
+}
+
+.sidebar-resize-handle::before {
+  position: absolute;
+  top: var(--vp-nav-height);
+  bottom: 0;
+  left: 4px;
+  width: 2px;
+  background: var(--vp-c-brand-1);
+  border-radius: 999px;
+  box-shadow: 0 0 0 1px var(--vp-c-brand-soft);
+  content: '';
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.18s ease;
+}
+
+.resize-hotspot {
+  position: absolute;
+  top: var(--vp-nav-height);
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.resize-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 4px;
+  height: 28px;
+  border-right: 1px solid var(--vp-c-brand-1);
+  border-left: 1px solid var(--vp-c-brand-1);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.18s ease;
+}
+
+.sidebar-edge-toggle {
+  position: absolute;
+  top: 220px;
+  left: -2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 44px;
+  padding: 0;
+  color: var(--vp-c-text-2);
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 7px;
+  box-shadow: var(--vp-shadow-2);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.18s ease,
+    border-color 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.sidebar-edge-toggle img {
+  width: 10px;
+  height: 10px;
+}
+
+.sidebar-edge-tooltip {
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 8px);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 128px;
+  padding: 7px 9px;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg-elv);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  box-shadow: var(--vp-shadow-2);
+  font-size: 12px;
+  line-height: 18px;
+  opacity: 0;
+  pointer-events: none;
+  text-align: left;
+  transform: translate(2px, -50%);
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease;
+  white-space: nowrap;
+}
+
+.sidebar-edge-tooltip kbd {
+  color: var(--vp-c-text-2);
+  font-family: var(--vp-font-family-mono);
+  font-size: 11px;
+}
+
+.sidebar-edge-toggle:hover .sidebar-edge-tooltip,
+.sidebar-edge-toggle:focus-visible .sidebar-edge-tooltip {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+
+.sidebar-resize-handle:hover::before,
+.sidebar-resize-handle.is-dragging::before,
+.sidebar-resize-handle:hover .resize-indicator,
+.sidebar-resize-handle.is-dragging .resize-indicator,
+.sidebar-resize-handle:hover .sidebar-edge-toggle,
+.sidebar-resize-handle.is-dragging .sidebar-edge-toggle,
+.sidebar-resize-handle.is-hidden .sidebar-edge-toggle {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.sidebar-edge-toggle:hover {
+  color: var(--vp-c-brand-1);
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-brand-1);
+}
+
+.sidebar-resize-handle.is-hidden {
+  left: 0;
+  width: 14px;
+  cursor: default;
+}
+
+.sidebar-resize-handle.is-hidden::before,
+.sidebar-resize-handle.is-hidden .resize-indicator {
+  display: none;
+}
+
+.sidebar-resize-handle.is-hidden .sidebar-edge-toggle {
+  left: 0;
+  border-left-color: var(--vp-c-divider);
+  border-radius: 0 7px 7px 0;
+}
+
+:global(body.is-sidebar-resizing),
+:global(body.is-sidebar-resizing *) {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+.sidebar-resize-handle.is-fullscreen {
+  display: none;
+}
+
+@media (max-width: 959px) {
+  .sidebar-resize-handle {
+    display: none;
+  }
+}
+</style>