@tnotesjs/core 0.0.6 → 0.0.8

package/vitepress/components/Layout/DocBeforeControls.vue

@@ -1,139 +1,149 @@
-<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>
+<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"
+          :title="isHomeReadme ? '关于这个知识库' : '关于这篇笔记'"
+          type="button"
+        >
+          !
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { ref } from 'vue'
+
+import ToggleFullContent from './ToggleFullContent.vue'
+import ToggleSidebar from './ToggleSidebar.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 encoded = vpData.frontmatter.value.rawContent
+  if (!encoded) return
+  try {
+    // rawContent 为 base64(UTF-8) —— 在构建期编码以规避 VitePress 把
+    // `<script>` 字面量注入 SFC 时的多重正则误匹配。
+    const bin = atob(encoded)
+    const bytes = Uint8Array.from(bin, (c) => c.charCodeAt(0))
+    const raw = new TextDecoder('utf-8').decode(bytes)
+    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>