md2ui 1.0.18 → 1.0.20

package/src/components/TableOfContents.vue

@@ -5,45 +5,187 @@
         <List :size="16" />
         <span>目录</span>
       </div>
-      <button class="toc-toggle" @click="$emit('toggle')" title="收起目录">
-        <ChevronRight :size="14" />
-      </button>
+      <div class="toc-header-actions">
+        <button class="toc-action-btn" @click="expandAll" title="全部展开">
+          <ChevronsDownUp :size="14" />
+        </button>
+        <button class="toc-action-btn" @click="collapseAll" title="全部收起">
+          <ChevronsUpDown :size="14" />
+        </button>
+        <button class="toc-toggle" @click="$emit('toggle')" title="收起目录">
+          <ChevronRight :size="14" />
+        </button>
+      </div>
     </div>
-    <nav class="toc-nav">
-      <a 
-        v-for="item in tocItems" 
-        :key="item.id"
-        :href="`#${item.id}`"
-        :class="['toc-item', `toc-level-${item.level}`, { active: activeHeading === item.id }]"
-        @click.prevent="$emit('scroll-to', item.id)"
-      >
-        {{ item.text }}
-      </a>
+    <nav ref="tocNavRef" class="toc-nav">
+      <!-- 左侧连续竖线 -->
+      <div class="toc-track"></div>
+      <!-- marker 滑块（平滑过渡） -->
+      <div class="toc-marker" :style="markerStyle"></div>
+      <template v-for="(item, index) in tocItems" :key="item.id">
+        <!-- 顶级标题（h1/h2）：可点击折叠 -->
+        <a
+          v-if="isTopLevel(item)"
+          :href="`#${item.id}`"
+          :data-toc-id="item.id"
+          :class="['toc-item', `toc-level-${item.level}`, { active: activeHeading === item.id }]"
+          @click.prevent="$emit('scroll-to', item.id)"
+        >
+          <span class="toc-item-text">{{ item.text }}</span>
+          <button
+            v-if="hasChildren(index)"
+            class="toc-fold-btn"
+            @click.prevent.stop="toggleSection(item.id)"
+            :title="collapsedSections.has(item.id) ? '展开子目录' : '收起子目录'"
+          >
+            <ChevronRight :size="12" :class="{ 'toc-fold-icon-open': !collapsedSections.has(item.id) }" class="toc-fold-icon" />
+          </button>
+        </a>
+        <!-- 子标题（h3/h4）：受父级折叠控制 -->
+        <a
+          v-else-if="!isSectionCollapsed(index)"
+          :href="`#${item.id}`"
+          :data-toc-id="item.id"
+          :class="['toc-item', `toc-level-${item.level}`, { active: activeHeading === item.id }]"
+          @click.prevent="$emit('scroll-to', item.id)"
+        >
+          {{ item.text }}
+        </a>
+      </template>
     </nav>
   </aside>
 </template>
 
 <script setup>
-import { List, ChevronRight } from 'lucide-vue-next'
-
-defineProps({
-  tocItems: {
-    type: Array,
-    default: () => []
-  },
-  activeHeading: {
-    type: String,
-    default: ''
-  },
-  collapsed: {
-    type: Boolean,
-    default: false
-  },
-  width: {
-    type: Number,
-    default: 240
-  }
+import { ref, watch, nextTick, reactive } from 'vue'
+import { List, ChevronRight, ChevronsDownUp, ChevronsUpDown } from 'lucide-vue-next'
+
+const props = defineProps({
+  tocItems: { type: Array, default: () => [] },
+  activeHeading: { type: String, default: '' },
+  collapsed: { type: Boolean, default: false },
+  width: { type: Number, default: 240 }
 })
 
 defineEmits(['scroll-to', 'toggle'])
+
+// 目录导航容器 ref
+const tocNavRef = ref(null)
+
+// marker 滑块位置
+const markerStyle = reactive({ top: '0px', height: '0px', opacity: 0 })
+
+// 记录被收起的顶级标题 id
+const collapsedSections = ref(new Set())
+
+// 判断是否为顶级标题（h1 或 h2）
+function isTopLevel(item) {
+  return item.level <= 2
+}
+
+// 判断某个顶级标题后面是否有子标题
+function hasChildren(index) {
+  const next = props.tocItems[index + 1]
+  return next && next.level > props.tocItems[index].level
+}
+
+// 找到某个子标题对应的父级顶级标题
+function findParentId(index) {
+  for (let i = index - 1; i >= 0; i--) {
+    if (isTopLevel(props.tocItems[i])) {
+      return props.tocItems[i].id
+    }
+  }
+  return null
+}
+
+// 判断某个子标题是否被折叠
+function isSectionCollapsed(index) {
+  const parentId = findParentId(index)
+  return parentId ? collapsedSections.value.has(parentId) : false
+}
+
+// 切换某个顶级标题的折叠状态
+function toggleSection(id) {
+  const next = new Set(collapsedSections.value)
+  if (next.has(id)) {
+    next.delete(id)
+  } else {
+    next.add(id)
+  }
+  collapsedSections.value = next
+}
+
+// 全部展开
+function expandAll() {
+  collapsedSections.value = new Set()
+}
+
+// 全部收起
+function collapseAll() {
+  const ids = new Set()
+  props.tocItems.forEach((item, index) => {
+    if (isTopLevel(item) && hasChildren(index)) {
+      ids.add(item.id)
+    }
+  })
+  collapsedSections.value = ids
+}
+
+// 更新 marker 滑块位置
+function updateMarker() {
+  if (!props.activeHeading || !tocNavRef.value) {
+    markerStyle.opacity = 0
+    return
+  }
+  const el = tocNavRef.value.querySelector(`[data-toc-id="${props.activeHeading}"]`)
+  if (!el) {
+    markerStyle.opacity = 0
+    return
+  }
+  const navRect = tocNavRef.value.getBoundingClientRect()
+  const elRect = el.getBoundingClientRect()
+  markerStyle.top = `${elRect.top - navRect.top + tocNavRef.value.scrollTop}px`
+  markerStyle.height = `${elRect.height}px`
+  markerStyle.opacity = 1
+}
+
+// 滚动时自动展开当前激活标题所在的折叠分组，并将目录项滚动到可视区域
+watch(() => props.activeHeading, (id) => {
+  if (!id) {
+    markerStyle.opacity = 0
+    return
+  }
+  const index = props.tocItems.findIndex(item => item.id === id)
+  if (index === -1) return
+  // 如果激活的是子标题，找到其父级并展开
+  if (!isTopLevel(props.tocItems[index])) {
+    const parentId = findParentId(index)
+    if (parentId && collapsedSections.value.has(parentId)) {
+      const next = new Set(collapsedSections.value)
+      next.delete(parentId)
+      collapsedSections.value = next
+    }
+  }
+  // 等 DOM 更新后，将激活项滚动到目录可视区域，并更新 marker
+  nextTick(() => {
+    const el = tocNavRef.value?.querySelector(`[data-toc-id="${id}"]`)
+    if (el && tocNavRef.value) {
+      // 只在 TOC 导航容器内滚动，避免 scrollIntoView 冒泡影响主内容区导致抖动
+      const navRect = tocNavRef.value.getBoundingClientRect()
+      const elRect = el.getBoundingClientRect()
+      const elCenter = elRect.top + elRect.height / 2
+      const navCenter = navRect.top + navRect.height / 2
+      const offset = elCenter - navCenter
+      tocNavRef.value.scrollBy({ top: offset, behavior: 'smooth' })
+    }
+    updateMarker()
+  })
+})
+
+// 文档切换时重置折叠状态和 marker
+watch(() => props.tocItems, () => {
+  collapsedSections.value = new Set()
+  markerStyle.opacity = 0
+})
 </script>

package/src/components/TopBar.vue

@@ -51,7 +51,48 @@
     </div>
     <!-- 右侧操作 -->
     <div class="top-bar-actions">
-      <a href="https://github.com/devsneed/md2ui" target="_blank" class="top-bar-btn" title="GitHub">
+      <button
+        v-if="!showWelcome"
+        class="export-word-btn"
+        :disabled="exporting"
+        @click="handleExport"
+        title="导出为 Word 文档"
+      >
+        <FileDown :size="14" />
+        <span>{{ exporting ? '导出中...' : '导出 Word' }}</span>
+      </button>
+      <button
+        v-if="!showWelcome"
+        class="export-word-btn"
+        :disabled="copying"
+        @click="handleCopyMarkdown"
+        title="复制 Markdown 源码"
+      >
+        <ClipboardCopy :size="14" />
+        <span>{{ copying ? '已复制' : '复制 MD' }}</span>
+      </button>
+      <div class="mode-switch">
+        <button
+          class="mode-switch-btn"
+          :class="{ active: !editMode }"
+          @click="emit('toggle-edit', false)"
+          title="查看模式"
+        >
+          <Eye :size="14" />
+          <span>查看</span>
+        </button>
+        <button
+          class="mode-switch-btn"
+          :class="{ active: editMode, 'mode-edit': editMode }"
+          @click="emit('toggle-edit', true)"
+          title="编辑模式"
+        >
+          <Pencil :size="14" />
+          <span>编辑</span>
+        </button>
+      </div>
+      <span class="top-bar-divider"></span>
+      <a href="https://github.com/xiaoyaodev/md2ui" target="_blank" class="top-bar-github" title="GitHub">
         <Github :size="15" />
       </a>
     </div>
@@ -60,15 +101,24 @@
 
 <script setup>
 import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
-import { Search, Github, FileText } from 'lucide-vue-next'
+import { Search, Github, FileText, Eye, Pencil, FileDown, ClipboardCopy } from 'lucide-vue-next'
 import Logo from './Logo.vue'
 import { useSearch } from '../composables/useSearch.js'
+import { useExportWord } from '../composables/useExportWord.js'
 
-defineProps({})
+const props = defineProps({
+  editMode: { type: Boolean, default: false },
+  showWelcome: { type: Boolean, default: true },
+  docTitle: { type: String, default: '文档' },
+  rawMarkdown: { type: String, default: '' }
+})
 
-const emit = defineEmits(['go-home', 'select-search'])
+const emit = defineEmits(['go-home', 'select-search', 'toggle-edit'])
 
 const { searchQuery, searchResults, searchReady, indexBuilding, doSearch, openSearch, closeSearch } = useSearch()
+const { exporting, exportToWord } = useExportWord()
+
+const copying = ref(false)
 
 const inputRef = ref(null)
 const searchWrapperRef = ref(null)
@@ -126,6 +176,21 @@ function selectResult(item) {
   inputRef.value?.blur()
 }
 
+function handleExport() {
+  exportToWord(props.docTitle)
+}
+
+async function handleCopyMarkdown() {
+  if (!props.rawMarkdown) return
+  try {
+    await navigator.clipboard.writeText(props.rawMarkdown)
+    copying.value = true
+    setTimeout(() => { copying.value = false }, 1500)
+  } catch (e) {
+    console.error('复制失败:', e)
+  }
+}
+
 // 全局快捷键 Ctrl+K
 function handleGlobalKeydown(e) {
   if ((e.metaKey || e.ctrlKey) && e.key === 'k') {

package/src/components/TreeNode.vue

@@ -1,33 +1,64 @@
 <template>
-  <div>
+  <div class="tree-node-root">
     <!-- 文件夹节点 -->
     <div 
       v-if="item.type === 'folder'"
       class="nav-item nav-folder"
-      :class="{ expanded: item.expanded }"
+      :class="{ expanded: item.expanded, 'drag-over': isDragOver }"
       :style="{ paddingLeft: `${20 + item.level * 16}px` }"
       @click="$emit('toggle', item)"
-      @mouseenter="showTooltip($event, item.label)"
-      @mouseleave="hideTooltip"
+      @mouseenter="onMouseEnter($event, item.label)"
+      @mouseleave="onMouseLeave"
+      @dragover.prevent="onFolderDragOver"
+      @dragleave="onFolderDragLeave"
+      @drop.prevent="onFolderDrop"
     >
       <ChevronRight v-if="!item.expanded" class="nav-icon chevron-icon" :size="16" />
       <ChevronDown v-else class="nav-icon chevron-icon" :size="16" />
       <Folder v-if="!item.expanded" class="nav-icon folder-icon" :size="16" />
       <FolderOpen v-else class="nav-icon folder-icon" :size="16" />
       <span class="nav-label">{{ item.label }}</span>
+      <span class="nav-item-actions" @click.stop>
+        <button class="nav-item-btn" @click="$emit('show-create', $event, item.key)" title="新建">
+          <Plus :size="12" />
+        </button>
+        <button class="nav-item-btn" @click="startRename($event)" title="重命名">
+          <Pencil :size="12" />
+        </button>
+        <button class="nav-item-btn nav-item-btn-danger" @click="startDelete($event)" title="删除">
+          <Trash2 :size="12" />
+        </button>
+      </span>
     </div>
     
-    <!-- 递归渲染子节点 -->
-    <template v-if="item.type === 'folder' && item.expanded && item.children">
-      <TreeNode 
-        v-for="child in item.children" 
-        :key="child.key"
-        :item="child"
-        :currentDoc="currentDoc"
-        @toggle="$emit('toggle', $event)"
-        @select="$emit('select', $event)"
-      />
-    </template>
+    <!-- 递归渲染子节点（可拖拽排序） -->
+    <draggable
+      v-if="item.type === 'folder' && item.expanded && item.children"
+      :list="item.children"
+      :group="{ name: 'doc-tree', pull: true, put: true }"
+      item-key="key"
+      :animation="200"
+      ghost-class="drag-ghost"
+      chosen-class="drag-chosen"
+      drag-class="drag-active"
+      handle=".nav-item"
+      :fallback-on-body="true"
+      :swap-threshold="0.65"
+      @end="onDragEnd"
+    >
+      <template #item="{ element }">
+        <TreeNode 
+          :item="element"
+          :currentDoc="currentDoc"
+          @toggle="$emit('toggle', $event)"
+          @select="$emit('select', $event)"
+          @show-create="(e, k) => $emit('show-create', e, k)"
+          @rename="(payload) => $emit('rename', payload)"
+          @delete="(payload) => $emit('delete', payload)"
+          @drag-end="$emit('drag-end', $event)"
+        />
+      </template>
+    </draggable>
     
     <!-- 文件节点 -->
     <div 
@@ -36,40 +67,200 @@
       :class="{ active: currentDoc === item.key }"
       :style="{ paddingLeft: `${20 + item.level * 16}px` }"
       @click="$emit('select', item.key)"
-      @mouseenter="showTooltip($event, item.label)"
-      @mouseleave="hideTooltip"
+      @mouseenter="onMouseEnter($event, item.label)"
+      @mouseleave="onMouseLeave"
     >
       <FileText class="nav-icon file-icon" :size="16" />
       <span class="nav-label">{{ item.label }}</span>
+      <span class="nav-item-actions" @click.stop>
+        <button class="nav-item-btn" @click="startRename($event)" title="重命名">
+          <Pencil :size="12" />
+        </button>
+        <button class="nav-item-btn nav-item-btn-danger" @click="startDelete($event)" title="删除">
+          <Trash2 :size="12" />
+        </button>
+      </span>
     </div>
+
+    <!-- 重命名气泡 -->
+    <Teleport to="body">
+      <div v-if="renameVisible" class="popover-overlay" @click="cancelRename">
+        <div class="popover-bubble" :style="popoverStyle" @click.stop>
+          <input
+            ref="renameInputRef"
+            v-model="renameName"
+            class="popover-input"
+            placeholder="请输入新名称"
+            @keydown.enter="confirmRename"
+            @keydown.escape="cancelRename"
+          />
+          <div v-if="renameError" class="popover-error">{{ renameError }}</div>
+          <div class="popover-actions">
+            <button class="popover-btn popover-btn-cancel" @click="cancelRename">取消</button>
+            <button class="popover-btn popover-btn-confirm" @click="confirmRename">确定</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 删除确认气泡 -->
+    <Teleport to="body">
+      <div v-if="deleteVisible" class="popover-overlay" @click="deleteVisible = false">
+        <div class="popover-bubble" :style="popoverStyle" @click.stop>
+          <div class="popover-message">
+            确定删除「<strong>{{ item.label }}</strong>」？
+            <template v-if="item.type === 'folder'">
+              <br /><span class="popover-warning">目录下所有内容将一并删除</span>
+            </template>
+          </div>
+          <div class="popover-actions">
+            <button class="popover-btn popover-btn-cancel" @click="deleteVisible = false">取消</button>
+            <button class="popover-btn popover-btn-danger" @click="confirmDelete">删除</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup>
-import { ChevronRight, ChevronDown, Folder, FolderOpen, FileText } from 'lucide-vue-next'
-
-defineProps({
-  item: {
-    type: Object,
-    required: true
-  },
-  currentDoc: {
-    type: String,
-    required: true
-  }
+import { ref, nextTick } from 'vue'
+import draggable from 'vuedraggable'
+import { ChevronRight, ChevronDown, Folder, FolderOpen, FileText, Plus, Pencil, Trash2 } from 'lucide-vue-next'
+
+const props = defineProps({
+  item: { type: Object, required: true },
+  currentDoc: { type: String, required: true }
 })
 
-defineEmits(['toggle', 'select'])
+const emit = defineEmits(['toggle', 'select', 'show-create', 'rename', 'delete', 'drag-end'])
+
+// ===== 拖拽相关 =====
+const isDragOver = ref(false)
+let dragOverTimer = null
+
+function onFolderDragOver() {
+  isDragOver.value = true
+  clearTimeout(dragOverTimer)
+}
+
+function onFolderDragLeave() {
+  dragOverTimer = setTimeout(() => { isDragOver.value = false }, 100)
+}
+
+function onFolderDrop() {
+  isDragOver.value = false
+}
+
+function onDragEnd(evt) {
+  emit('drag-end', evt)
+}
+
+// ===== 气泡定位 =====
+const popoverStyle = ref({})
+const bubbleRef = ref(null)
+
+// 记录触发按钮的位置
+let triggerRect = null
+
+function calcPopoverPos(event) {
+  const btn = event.currentTarget
+  triggerRect = btn.getBoundingClientRect()
+  // 先设置一个不可见的初始位置，等渲染后再修正
+  popoverStyle.value = {
+    position: 'fixed',
+    left: `${Math.max(8, triggerRect.left - 80)}px`,
+    top: '0px',
+    zIndex: 9999,
+    visibility: 'hidden'
+  }
+}
+
+function adjustPopoverPos() {
+  nextTick(() => {
+    const bubble = document.querySelector('.popover-bubble')
+    if (!bubble || !triggerRect) return
+    const bRect = bubble.getBoundingClientRect()
+    let left = Math.max(8, triggerRect.left - 80)
+    // 默认向上弹出
+    let top = triggerRect.top - bRect.height - 6
+    // 上方空间不够，改为向下
+    if (top < 10) {
+      top = triggerRect.bottom + 6
+    }
+    // 向下弹出后底部仍然溢出，贴底显示
+    if (top + bRect.height > window.innerHeight - 10) {
+      top = window.innerHeight - bRect.height - 10
+    }
+    // 右侧溢出修正
+    if (left + bRect.width > window.innerWidth - 10) {
+      left = window.innerWidth - bRect.width - 10
+    }
+    popoverStyle.value = {
+      position: 'fixed',
+      left: `${left}px`,
+      top: `${top}px`,
+      zIndex: 9999,
+      visibility: 'visible'
+    }
+  })
+}
+
+// ===== 重命名 =====
+const renameVisible = ref(false)
+const renameInputRef = ref(null)
+const renameName = ref('')
+const renameError = ref('')
 
+function startRename(event) {
+  deleteVisible.value = false
+  renameName.value = props.item.label
+  renameError.value = ''
+  calcPopoverPos(event)
+  renameVisible.value = true
+  nextTick(() => {
+    adjustPopoverPos()
+    renameInputRef.value?.focus()
+    renameInputRef.value?.select()
+  })
+}
+
+function confirmRename() {
+  const newName = renameName.value.trim()
+  if (!newName) { renameError.value = '名称不能为空'; return }
+  if (/[\\/:*?"<>|]/.test(newName)) { renameError.value = '名称包含非法字符'; return }
+  if (newName === props.item.label) { renameVisible.value = false; return }
+  renameError.value = ''
+  emit('rename', { item: props.item, newName })
+  renameVisible.value = false
+}
+
+function cancelRename() {
+  renameVisible.value = false
+}
+
+// ===== 删除 =====
+const deleteVisible = ref(false)
+
+function startDelete(event) {
+  renameVisible.value = false
+  calcPopoverPos(event)
+  deleteVisible.value = true
+  adjustPopoverPos()
+}
+
+function confirmDelete() {
+  emit('delete', props.item)
+  deleteVisible.value = false
+}
+
+// ===== Tooltip =====
 let tooltipEl = null
 
-function showTooltip(event, text) {
+function onMouseEnter(event, text) {
   hideTooltip()
-  
   const target = event.currentTarget
   const label = target.querySelector('.nav-label')
-  
-  // 只有文字被截断时才显示 tooltip
   if (label && label.scrollWidth <= label.clientWidth) return
   
   tooltipEl = document.createElement('div')
@@ -89,18 +280,22 @@ function showTooltip(event, text) {
     cursor: text;
     box-shadow: 0 2px 8px rgba(0,0,0,0.2);
   `
-  
   document.body.appendChild(tooltipEl)
-  
   const rect = target.getBoundingClientRect()
   tooltipEl.style.left = `${rect.right + 8}px`
   tooltipEl.style.top = `${rect.top}px`
-  
-  // 防止超出屏幕右侧
   const tooltipRect = tooltipEl.getBoundingClientRect()
   if (tooltipRect.right > window.innerWidth - 10) {
     tooltipEl.style.left = `${rect.left - tooltipRect.width - 8}px`
   }
+  // 底部溢出修正
+  if (tooltipRect.bottom > window.innerHeight - 10) {
+    tooltipEl.style.top = `${window.innerHeight - tooltipRect.height - 10}px`
+  }
+}
+
+function onMouseLeave() {
+  hideTooltip()
 }
 
 function hideTooltip() {
@@ -110,5 +305,3 @@ function hideTooltip() {
   }
 }
 </script>
-
-

package/src/components/WelcomePage.vue

@@ -23,11 +23,11 @@
         </button>
       </div>
       <!-- GitHub -->
-      <a class="welcome-github" href="https://github.com/devsneed/md2ui" target="_blank">
+      <a class="welcome-github" href="https://github.com/xiaoyaodev/md2ui" target="_blank">
         <GitHubIcon :size="16" />
         <span>GitHub</span>
         <span class="welcome-github-sep"></span>
-        <span class="welcome-github-repo">devsneed/md2ui</span>
+        <span class="welcome-github-repo">xiaoyaodev/md2ui</span>
         <ExternalLink :size="12" class="welcome-github-arrow" />
       </a>
     </div>

package/src/composables/useDocHash.js

@@ -33,9 +33,17 @@ function toBase62(h1, h2) {
   return result.padStart(8, '0').slice(0, 8)
 }
 
+// 去掉路径中每一段的序号前缀（如 "01-快速开始" → "快速开始"）
+// 保证重编号不影响外链地址
+export function stripOrderPrefix(key) {
+  return key.split('/').map(seg => seg.replace(/^\d+-/, '')).join('/')
+}
+
 // 根据文档 key 生成 8 位 base62 短 hash（同步、确定性、零依赖）
+// 哈希计算前会去掉序号前缀，使得重编号不影响外链
 export function docHash(key) {
-  const [h1, h2] = fnv1a64(key)
+  const stripped = stripOrderPrefix(key)
+  const [h1, h2] = fnv1a64(stripped)
   return toBase62(h1, h2)
 }