@tnotesjs/core 0.1.0

package/vitepress/components/Layout/DocBeforeControls.vue

@@ -0,0 +1,139 @@
+<template>
+  <div :class="$style.docBeforeContainer">
+    <div :class="$style.leftArea">
+      <div
+        :class="[$style.toggleSidebarBox, $style.pcOnly]"
+        v-show="!isFullContentMode"
+      >
+        <ToggleSidebar />
+      </div>
+      <div :class="[$style.vscodeBox, $style.pcOnly]" v-show="vscodeNotesDir">
+        <a
+          :href="vscodeNotesDir"
+          aria-label="open in vscode"
+          title="open in vscode"
+          target="_blank"
+        >
+          <img :src="icon__vscode" alt="open in vscode" />
+        </a>
+      </div>
+      <div :class="[$style.contentToggleBox, $style.pcOnly]">
+        <ToggleFullContent />
+      </div>
+      <!-- 知识库的 GitHub 链接（仅首页显示，PC 端） -->
+      <div :class="[$style.githubRepoBox, $style.pcOnly]" v-show="isHomeReadme">
+        <a
+          :href="`https://github.com/tnotesjs/${vpData.page.value.title.toLowerCase()}/blob/main/README.md`"
+          :aria-label="`tnotesjs github - ${vpData.page.value.title.toLowerCase()} 笔记仓库链接`"
+          :title="`tnotesjs github - ${vpData.page.value.title.toLowerCase()} 笔记仓库链接`"
+          target="_blank"
+          rel="noopener"
+        >
+          <img :src="icon__github" alt="github icon" />
+        </a>
+      </div>
+    </div>
+    <div :class="$style.rightArea">
+      <!-- 一键复制笔记内容按钮 -->
+      <div :class="$style.collapseAllBtn" v-show="currentNoteId">
+        <button
+          :class="$style.collapseAllButton"
+          @click="copyNoteContent"
+          title="复制笔记原始内容"
+          type="button"
+        >
+          <img :src="icon__clipboard" alt="copy note content" />
+        </button>
+      </div>
+      <Transition name="toast">
+        <div v-if="showCopyToast" :class="$style.toast">✓ 复制成功</div>
+      </Transition>
+      <!-- 全局折叠/展开按钮 -->
+      <div
+        :class="$style.collapseAllBtn"
+        v-show="currentNoteId || isHomeReadme"
+      >
+        <button
+          :class="$style.collapseAllButton"
+          @click="toggleAllCollapse"
+          :title="allCollapsed ? '展开所有区域' : '折叠所有区域'"
+          type="button"
+        >
+          <img :src="icon__fold" alt="collapse all" />
+        </button>
+      </div>
+      <!-- 单个图标，点击打开 modal，只在有笔记数据的页面显示 -->
+      <div
+        :class="$style.aboutBtn"
+        v-show="
+          (currentNoteId && created_at && updated_at) ||
+          (isHomeReadme && homeReadmeCreatedAt && homeReadmeUpdatedAt)
+        "
+      >
+        <button
+          :class="$style.aboutIconButton"
+          @click="$emit('open-time-modal')"
+          aria-haspopup="dialog"
+          :aria-expanded="timeModalOpen.toString()"
+          :title="isHomeReadme ? '关于这个知识库' : '关于这篇笔记'"
+          type="button"
+        >
+          !
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+import ToggleSidebar from './ToggleSidebar.vue'
+import ToggleFullContent from './ToggleFullContent.vue'
+
+import { icon__github, icon__vscode, icon__fold, icon__clipboard } from '../../assets/icons'
+
+const props = defineProps<{
+  isFullContentMode: boolean
+  vscodeNotesDir: string
+  isHomeReadme: boolean
+  currentNoteId: string | null
+  created_at: string | undefined
+  updated_at: string | undefined
+  homeReadmeCreatedAt: string | undefined
+  homeReadmeUpdatedAt: string | undefined
+  timeModalOpen: boolean
+  allCollapsed: boolean
+}>()
+
+const showCopyToast = ref(false)
+let copyToastTimer: ReturnType<typeof setTimeout> | null = null
+
+async function copyNoteContent() {
+  const raw = vpData.frontmatter.value.rawContent
+  if (!raw) return
+  try {
+    await navigator.clipboard.writeText(raw)
+    if (copyToastTimer) clearTimeout(copyToastTimer)
+    showCopyToast.value = true
+    copyToastTimer = setTimeout(() => {
+      showCopyToast.value = false
+    }, 2000)
+  } catch (e) {
+    console.error('复制失败', e)
+  }
+}
+
+const emit = defineEmits<{
+  (e: 'open-time-modal'): void
+  (e: 'toggle-all-collapse'): void
+}>()
+
+const vpData = useData()
+
+function toggleAllCollapse() {
+  emit('toggle-all-collapse')
+}
+</script>
+
+<style module src="./Layout.module.scss"></style>

package/vitepress/components/Layout/DocFooter.vue

@@ -0,0 +1,225 @@
+<template>
+  <nav class="custom-doc-footer" v-if="prev || next">
+    <div class="container">
+      <div class="prev">
+        <a v-if="prev" :href="prev.link" class="pager-link prev-link">
+          <span class="desc">上一篇</span>
+          <span class="title">
+            <span v-if="prev.emoji" class="emoji">{{ prev.emoji }}</span>
+            {{ prev.title }}
+          </span>
+        </a>
+      </div>
+
+      <div class="next">
+        <a v-if="next" :href="next.link" class="pager-link next-link">
+          <span class="desc">下一篇</span>
+          <span class="title">
+            <span v-if="next.emoji" class="emoji">{{ next.emoji }}</span>
+            {{ next.title }}
+          </span>
+        </a>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useData } from 'vitepress'
+// @ts-expect-error - VitePress Data Loader
+import { data as sidebarConfig } from '../sidebar.data'
+
+interface NavItem {
+  link: string
+  title: string
+  emoji: string
+}
+
+const route = useRoute()
+const { site } = useData()
+
+// 获取 base 路径
+const base = computed(() => site.value.base || '/')
+
+// 提取所有笔记为扁平列表（按 sidebar.json 顺序）
+const allNotes = computed(() => {
+  const notes: NavItem[] = []
+
+  if (!sidebarConfig || !sidebarConfig['/notes/']) {
+    return notes
+  }
+
+  const groups = sidebarConfig['/notes/']
+
+  // 遍历所有分组
+  groups.forEach((group: any) => {
+    if (group.items && Array.isArray(group.items)) {
+      group.items.forEach((item: any) => {
+        if (item.link && item.text) {
+          // 提取 emoji 和标题
+          const { emoji, title } = extractEmojiAndTitle(item.text)
+
+          // 构建完整链接
+          const cleanLink = item.link.startsWith('/')
+            ? item.link.slice(1)
+            : item.link
+          const fullLink = base.value + cleanLink
+
+          notes.push({
+            link: fullLink,
+            title,
+            emoji,
+          })
+        }
+      })
+    }
+  })
+
+  return notes
+})
+
+// 提取 emoji 和标题
+function extractEmojiAndTitle(text: string): { emoji: string; title: string } {
+  // 匹配开头的 emoji（包括常见的完成状态图标）
+  const emojiMatch = text.match(
+    /^([\u{1F300}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}✅❌⏰]+)\s*/u
+  )
+
+  if (emojiMatch) {
+    const emoji = emojiMatch[1]
+    const rest = text.slice(emojiMatch[0].length)
+    // 移除笔记编号（如 "0001. "）
+    const title = rest.replace(/^\d{4}\.\s*/, '')
+    return { emoji, title }
+  }
+
+  // 没有 emoji，只移除编号
+  const title = text.replace(/^\d{4}\.\s*/, '')
+  return { emoji: '', title }
+}
+
+// 获取当前笔记的索引
+const currentIndex = computed(() => {
+  // 对路径进行解码，因为 route.path 可能包含 URL 编码
+  const decodedRoutePath = decodeURIComponent(route.path)
+
+  return allNotes.value.findIndex((note) => {
+    const decodedNoteLink = decodeURIComponent(note.link)
+    return (
+      decodedRoutePath === decodedNoteLink ||
+      decodedRoutePath === decodedNoteLink + '.html'
+    )
+  })
+})
+
+// 上一篇
+const prev = computed(() => {
+  if (currentIndex.value <= 0) return null
+  return allNotes.value[currentIndex.value - 1]
+})
+
+// 下一篇
+const next = computed(() => {
+  if (currentIndex.value < 0 || currentIndex.value >= allNotes.value.length - 1)
+    return null
+  return allNotes.value[currentIndex.value + 1]
+})
+</script>
+
+<style scoped>
+.custom-doc-footer {
+  margin-top: 64px;
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 32px;
+}
+
+.container {
+  display: flex;
+  gap: 16px;
+}
+
+.prev,
+.next {
+  flex: 1;
+}
+
+.prev {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.next {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.pager-link {
+  display: block;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 11px 16px 13px;
+  width: 100%;
+  max-width: 320px;
+  transition: border-color 0.25s, background-color 0.25s;
+  text-decoration: none;
+}
+
+.pager-link:hover {
+  border-color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-bg-soft);
+}
+
+.prev-link {
+  text-align: left;
+}
+
+.next-link {
+  text-align: right;
+}
+
+.desc {
+  display: block;
+  line-height: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.title {
+  display: block;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  transition: color 0.25s;
+  padding-top: 4px;
+}
+
+.pager-link:hover .title {
+  color: var(--vp-c-brand-2);
+}
+
+.emoji {
+  margin-right: 4px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .pager-link {
+    max-width: 100%;
+  }
+}
+</style>
+
+<!-- 全局样式：隐藏 VitePress 默认的 doc-footer -->
+<style>
+.VPDocFooter {
+  display: none !important;
+}
+</style>

package/vitepress/components/Layout/ImagePreview.module.scss

@@ -0,0 +1,201 @@
+/* 预览遮罩层 */
+.tnPreview {
+  position: fixed;
+  inset: 0;
+  z-index: 3000;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 工具栏 */
+.toolbar {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: flex;
+  gap: 10px;
+  z-index: 2;
+
+  button {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(42, 42, 42, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    img {
+      width: 18px;
+      height: 18px;
+      transition: transform 0.2s ease;
+    }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.15);
+      transform: translateY(-2px);
+
+      img {
+        transform: scale(1.1);
+      }
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+}
+
+.close {
+  &:hover img {
+    transform: rotate(90deg) scale(1.1) !important;
+  }
+}
+
+/* 左右切换按钮 */
+.nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 2;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  img {
+    width: 2rem;
+    height: 2rem;
+    transition: transform 0.3s ease;
+  }
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.7);
+    transform: translateY(-50%) scale(1.15);
+
+    img {
+      filter: brightness(1.2);
+    }
+  }
+
+  &:active {
+    transform: translateY(-50%) scale(1.05);
+  }
+}
+
+.navLeft {
+  left: 24px;
+
+  &:hover img {
+    transform: translateX(-2px);
+  }
+}
+
+.navRight {
+  right: 24px;
+
+  &:hover img {
+    transform: translateX(2px);
+  }
+}
+
+/* 预览图片 */
+.img {
+  max-width: 90vw;
+  max-height: 90vh;
+  user-select: none;
+  transition: transform 0.1s ease-out;
+
+  &.dragging {
+    cursor: grabbing !important;
+  }
+}
+
+/* 底部页码指示器 */
+.counter {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.65);
+  color: #fff;
+  padding: 8px 16px;
+  border-radius: 16px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  z-index: 2;
+  user-select: none;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .nav {
+    width: 48px;
+    height: 48px;
+
+    img {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+
+  .navLeft {
+    left: 12px;
+  }
+
+  .navRight {
+    right: 12px;
+  }
+
+  .toolbar {
+    top: 12px;
+    right: 12px;
+    gap: 8px;
+
+    button {
+      width: 32px;
+      height: 32px;
+
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  .counter {
+    bottom: 16px;
+    font-size: 0.85rem;
+    padding: 6px 14px;
+  }
+
+  .img {
+    max-width: 95vw;
+    max-height: 85vh;
+  }
+}