@tnotesjs/core 0.1.17 → 0.1.18

package/package.json

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

package/vitepress/components/CodeBlockFullscreen/CodeBlockFullscreen.vue

@@ -29,7 +29,7 @@
                 @click="copyCode"
                 :title="copied ? '已复制' : '复制代码'"
               >
-                <img v-if="!copied" :src="icon__copy" alt="复制" />
+                <img v-if="!copied" :src="icon__clipboard" alt="复制" />
                 <img v-else :src="icon__check" alt="已复制" />
               </button>
               <!-- 关闭按钮 -->
@@ -56,7 +56,7 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted } from 'vue'
 
-import { icon__copy, icon__check, icon__close, icon__rotate } from '../../assets/icons'
+import { icon__clipboard, icon__check, icon__close, icon__rotate } from '../../assets/icons'
 
 const ORIENTATION_KEY = 'code-fullscreen-orientation'
 
@@ -366,9 +366,4 @@ onUnmounted(() => {
 .fullscreen-fade-leave-to .code-fullscreen-container {
   transform: scale(0.95);
 }
-
-/* 暗色模式图标适配 */
-.dark .action-btn img {
-  filter: invert(1);
-}
 </style>

package/vitepress/components/CodeBlockFullscreen/index.ts

@@ -1,40 +1,133 @@
-import { onMounted, onUnmounted } from 'vue'
-import { createApp } from 'vue'
+import { createApp, onMounted, onUnmounted } from 'vue'
 
 import CodeBlockFullscreen from './CodeBlockFullscreen.vue'
+import { icon__check, icon__clipboard, icon__fullscreen } from '../../assets/icons'
+
+type CopyState = 'idle' | 'copied' | 'failed'
+
+const CODE_BLOCK_SELECTOR = 'div[class*="language-"]'
+const CODE_ACTIONS_CLASS = 'tn-code-actions'
+const COPY_RESET_DELAY = 2000
 
 export function useCodeBlockFullscreen() {
   let fullscreenApp: any = null
   let fullscreenContainer: HTMLElement | null = null
+  const copyResetTimers = new WeakMap<HTMLElement, number>()
 
-  function addFullscreenButtons() {
+  function addCodeActions() {
     // 找到所有代码块
-    const codeBlocks = document.querySelectorAll('div[class*="language-"]')
+    const codeBlocks = document.querySelectorAll(CODE_BLOCK_SELECTOR)
 
     codeBlocks.forEach((block) => {
-      // 避免重复添加按钮
-      if (block.querySelector('.fullscreen-btn')) return
-
-      // 创建全屏按钮
-      const button = document.createElement('button')
-      button.className = 'fullscreen-btn'
-      button.title = '全屏查看代码'
-      button.innerHTML = `
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
-        </svg>
-      `
-
-      // 点击事件
-      button.addEventListener('click', () => {
-        openFullscreen(block as HTMLElement)
+      if (!(block instanceof HTMLElement)) return
+      if (!block.querySelector('pre code')) return
+      block.querySelectorAll('.fullscreen-btn').forEach((button) => {
+        button.remove()
+      })
+      if (block.querySelector(`.${CODE_ACTIONS_CLASS}`)) return
+
+      const actions = document.createElement('div')
+      actions.className = CODE_ACTIONS_CLASS
+      actions.setAttribute('aria-label', '代码块操作')
+
+      const fullscreenButton = createActionButton({
+        className: 'tn-code-action-fullscreen',
+        title: '全屏查看代码',
+        icon: icon__fullscreen,
+        alt: '全屏',
+      })
+      fullscreenButton.addEventListener('click', () => {
+        openFullscreen(block)
       })
 
-      // 添加按钮到代码块
-      block.appendChild(button)
+      const copyButton = createActionButton({
+        className: 'tn-code-action-copy',
+        title: '复制代码',
+        icon: icon__clipboard,
+        alt: '复制',
+      })
+      copyButton.addEventListener('click', () => {
+        void copyCode(block, copyButton)
+      })
+
+      actions.append(fullscreenButton, copyButton)
+      block.appendChild(actions)
     })
   }
 
+  function createActionButton(options: {
+    className: string
+    title: string
+    icon: string
+    alt: string
+  }) {
+    const button = document.createElement('button')
+    button.className = `tn-code-action ${options.className}`
+    button.type = 'button'
+    button.title = options.title
+    button.setAttribute('aria-label', options.title)
+    button.innerHTML = `<img src="${options.icon}" alt="${options.alt}" />`
+
+    return button
+  }
+
+  async function copyCode(codeBlock: HTMLElement, button: HTMLElement) {
+    const codeElement = codeBlock.querySelector('pre code')
+    const text = codeElement?.textContent ?? ''
+    if (!text) {
+      setCopyState(button, 'failed')
+      return
+    }
+
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopyState(button, 'copied')
+    } catch {
+      setCopyState(button, 'failed')
+    }
+  }
+
+  function setCopyState(button: HTMLElement, state: CopyState) {
+    const currentTimer = copyResetTimers.get(button)
+    if (currentTimer) {
+      window.clearTimeout(currentTimer)
+    }
+
+    button.dataset.copyState = state
+    if (button.parentElement) {
+      button.parentElement.dataset.copyState = state
+    }
+    button.title = getCopyTitle(state)
+    button.setAttribute('aria-label', getCopyTitle(state))
+
+    const icon = button.querySelector('img')
+    if (icon) {
+      icon.setAttribute('src', state === 'copied' ? icon__check : icon__clipboard)
+      icon.setAttribute('alt', state === 'copied' ? '已复制' : '复制')
+    }
+
+    const timer = window.setTimeout(() => {
+      button.dataset.copyState = 'idle'
+      if (button.parentElement) {
+        button.parentElement.dataset.copyState = 'idle'
+      }
+      button.title = getCopyTitle('idle')
+      button.setAttribute('aria-label', getCopyTitle('idle'))
+      icon?.setAttribute('src', icon__clipboard)
+      icon?.setAttribute('alt', '复制')
+      copyResetTimers.delete(button)
+    }, COPY_RESET_DELAY)
+
+    copyResetTimers.set(button, timer)
+  }
+
+  function getCopyTitle(state: CopyState): string {
+    if (state === 'copied') return '已复制'
+    if (state === 'failed') return '复制失败'
+
+    return '复制代码'
+  }
+
   function openFullscreen(codeBlock: HTMLElement) {
     // 获取代码内容
     const pre = codeBlock.querySelector('pre')
@@ -88,19 +181,23 @@ export function useCodeBlockFullscreen() {
 
   function cleanup() {
     closeFullscreen()
-    // 移除所有全屏按钮
-    document.querySelectorAll('.fullscreen-btn').forEach((btn) => btn.remove())
+    document.querySelectorAll(`.${CODE_ACTIONS_CLASS}`).forEach((actions) => {
+      actions.remove()
+    })
+    document.querySelectorAll('.fullscreen-btn').forEach((button) => {
+      button.remove()
+    })
   }
 
   onMounted(() => {
     // 初始化
     setTimeout(() => {
-      addFullscreenButtons()
+      addCodeActions()
     }, 100)
 
     // 监听路由变化
     const observer = new MutationObserver(() => {
-      addFullscreenButtons()
+      addCodeActions()
     })
 
     observer.observe(document.body, {

package/vitepress/components/CodeBlockFullscreen/styles.css

@@ -1,9 +1,13 @@
-/* 代码块全屏按钮样式 */
+/* 代码块操作按钮样式 */
 div[class*='language-'] {
   position: relative;
 }
 
-.fullscreen-btn {
+div[class*='language-'] button.copy {
+  display: none !important;
+}
+
+.tn-code-actions {
   position: absolute;
   top: 8px;
   right: 8px;
@@ -11,54 +15,112 @@ div[class*='language-'] {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 4px;
+  padding: 2px;
+  background-color: color-mix(in srgb, var(--vp-code-block-bg) 92%, transparent);
+  border: .1px solid var(--vp-c-divider);
+  border-radius: 7px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.tn-code-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 32px;
   height: 32px;
   padding: 0;
   border: none;
-  background-color: var(--vp-code-block-bg);
+  background-color: transparent;
   color: var(--vp-c-text-2);
   border-radius: 6px;
   cursor: pointer;
-  opacity: 0;
   transition: all 0.2s;
 }
 
-div[class*='language-']:hover .fullscreen-btn {
+.tn-code-action img {
+  width: 16px;
+  height: 16px;
+  filter: var(--vp-icon-filter, none);
+}
+
+div[class*='language-']:hover .tn-code-actions,
+.tn-code-actions:focus-within,
+.tn-code-actions[data-copy-state='copied'],
+.tn-code-actions[data-copy-state='failed'] {
   opacity: 1;
 }
 
-.fullscreen-btn:hover {
+.tn-code-action:hover {
   background-color: var(--vp-c-default-soft);
   color: var(--vp-c-brand-1);
   transform: scale(1.05);
 }
 
-.fullscreen-btn:active {
+.tn-code-action:active {
   transform: scale(0.95);
 }
 
-.fullscreen-btn svg {
-  width: 16px;
-  height: 16px;
+.tn-code-action-copy {
+  position: relative;
+}
+
+.tn-code-action-copy[data-copy-state='copied'] {
+  background-color: var(--vp-c-green-soft);
+}
+
+.tn-code-action-copy[data-copy-state='failed'] {
+  background-color: var(--vp-c-danger-soft);
+}
+
+.tn-code-action-copy::after {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  padding: 4px 7px;
+  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);
+  content: attr(title);
+  font-size: 12px;
+  line-height: 18px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-2px);
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease;
+  white-space: nowrap;
 }
 
+.tn-code-action-copy[data-copy-state='copied']::after,
+.tn-code-action-copy[data-copy-state='failed']::after {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* .dark .tn-code-action-copy img {
+  filter: invert(1);
+} */
+
 /* 移动端始终显示按钮 */
 @media (max-width: 768px) {
-  .fullscreen-btn {
-    opacity: 0.8;
+  .tn-code-actions {
+    /* opacity: 0.8; */
     top: 6px;
     right: 6px;
+  }
+
+  .tn-code-action {
     width: 28px;
     height: 28px;
   }
 
-  .fullscreen-btn svg {
+  .tn-code-action img {
     width: 14px;
     height: 14px;
   }
 }
-
-div[class*='language-']:has(.copy) .fullscreen-btn {
-  /* 代码块已经有复制按钮，需要微调位置 */
-  right: 54px;
-}

package/vitepress/components/Layout/SidebarResizeHandle.vue

@@ -40,8 +40,8 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
-import { icon__next, icon__prev } from '../../assets/icons'
 import { useSidebarLayout } from './composables/useSidebarLayout'
+import { icon__next, icon__prev } from '../../assets/icons'
 
 const {
   hidden,

package/vitepress/components/Layout/ToggleSidebar.vue

@@ -13,8 +13,8 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 
-import { icon__next, icon__prev } from '../../assets/icons'
 import { useSidebarLayout } from './composables/useSidebarLayout'
+import { icon__next, icon__prev } from '../../assets/icons'
 
 const { hidden, initSidebarLayout, toggleSidebar } = useSidebarLayout()
 

package/vitepress/plugins/sidebarStructurePlugin.ts

@@ -5,9 +5,9 @@
  */
 import { FileWatcherService, NoteService, ReadmeService } from '../../services'
 
-import type { PluginOption } from 'vite'
 import type { IncomingMessage, ServerResponse } from 'http'
 import type { NoteInfo } from '../../types'
+import type { PluginOption } from 'vite'
 
 interface JsonResponse {
   success: boolean

package/vitepress/theme/styles/base.scss

@@ -48,4 +48,12 @@ ul > li.task-list-item > ul {
   border-top: none;
 }
 
+// 代码块外层 div
+.vp-doc div[class*=language-] {
+  // 默认值：
+  // margin: 16px 24px;
+  // 移除外层 margin：
+  margin: 0px !important;
+}
+
 /* #endregion */