md2ui 1.0.16 → 1.0.19

package/src/components/TableBubbleMenu.vue

@@ -0,0 +1,177 @@
+<template>
+  <teleport to="body">
+    <div
+      v-if="show"
+      ref="menuRef"
+      class="table-bubble-menu"
+      :style="menuStyle"
+    >
+      <div class="table-bubble-group">
+        <button class="table-bubble-btn" @click="addColumnBefore" title="在左侧插入列">
+          <BetweenVerticalStart :size="14" />
+        </button>
+        <button class="table-bubble-btn" @click="addColumnAfter" title="在右侧插入列">
+          <BetweenVerticalEnd :size="14" />
+        </button>
+        <button class="table-bubble-btn danger" @click="deleteColumn" title="删除当前列">
+          <Columns3 :size="14" />
+          <X :size="10" class="table-bubble-badge" />
+        </button>
+      </div>
+      <div class="table-bubble-divider"></div>
+      <div class="table-bubble-group">
+        <button class="table-bubble-btn" @click="addRowBefore" title="在上方插入行">
+          <BetweenHorizontalStart :size="14" />
+        </button>
+        <button class="table-bubble-btn" @click="addRowAfter" title="在下方插入行">
+          <BetweenHorizontalEnd :size="14" />
+        </button>
+        <button class="table-bubble-btn danger" @click="deleteRow" title="删除当前行">
+          <RowsIcon :size="14" />
+          <X :size="10" class="table-bubble-badge" />
+        </button>
+      </div>
+      <div class="table-bubble-divider"></div>
+      <div class="table-bubble-group">
+        <button class="table-bubble-btn" @click="mergeCells" title="合并单元格">
+          <TableCellsMerge :size="14" />
+        </button>
+        <button class="table-bubble-btn" @click="splitCell" title="拆分单元格">
+          <TableCellsSplit :size="14" />
+        </button>
+      </div>
+      <div class="table-bubble-divider"></div>
+      <button class="table-bubble-btn danger" @click="deleteTable" title="删除表格">
+        <Trash2 :size="14" />
+      </button>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
+import { computed, ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import {
+  BetweenVerticalStart, BetweenVerticalEnd, Columns3,
+  BetweenHorizontalStart, BetweenHorizontalEnd, Rows3 as RowsIcon,
+  TableCellsMerge, TableCellsSplit,
+  Trash2, X,
+} from 'lucide-vue-next'
+
+const props = defineProps({
+  editor: { type: Object, required: true }
+})
+
+const menuRef = ref(null)
+const menuStyle = ref({})
+
+const show = computed(() => {
+  if (!props.editor) return false
+  if (props.editor.isActive('codeBlock') || props.editor.isActive('mermaidBlock')) return false
+  return props.editor.isActive('table')
+})
+
+// 计算菜单位置：定位到表格上方
+function updatePosition() {
+  if (!show.value || !props.editor) return
+
+  const { view } = props.editor
+  const { state } = view
+
+  // 找到当前所在的 table 节点
+  let tablePos = null
+  const { $from } = state.selection
+  for (let d = $from.depth; d > 0; d--) {
+    if ($from.node(d).type.name === 'table') {
+      tablePos = $from.start(d) - 1
+      break
+    }
+  }
+  if (tablePos === null) return
+
+  // 获取表格 DOM 元素的位置
+  const dom = view.nodeDOM(tablePos)
+  if (!dom) return
+
+  const tableRect = dom.getBoundingClientRect()
+  const menuEl = menuRef.value
+  if (!menuEl) return
+
+  const menuWidth = menuEl.offsetWidth
+  // 水平居中于表格上方
+  let left = tableRect.left + (tableRect.width - menuWidth) / 2
+  let top = tableRect.top - menuEl.offsetHeight - 8
+
+  // 边界修正
+  if (left < 8) left = 8
+  if (left + menuWidth > window.innerWidth - 8) left = window.innerWidth - menuWidth - 8
+  if (top < 8) top = tableRect.bottom + 8 // 表格上方放不下就放下方
+
+  menuStyle.value = {
+    position: 'fixed',
+    left: `${left}px`,
+    top: `${top}px`,
+    zIndex: 100,
+  }
+}
+
+// 监听 show 变化和编辑器事务来更新位置
+watch(show, async (val) => {
+  if (val) {
+    await nextTick()
+    updatePosition()
+  }
+})
+
+let updateTimer = null
+function onTransaction() {
+  if (!show.value) return
+  if (updateTimer) cancelAnimationFrame(updateTimer)
+  updateTimer = requestAnimationFrame(updatePosition)
+}
+
+onMounted(() => {
+  if (props.editor) {
+    props.editor.on('transaction', onTransaction)
+    // 滚动时也更新位置
+    const scrollEl = document.querySelector('.editor-content')
+    if (scrollEl) scrollEl.addEventListener('scroll', updatePosition, { passive: true })
+  }
+})
+
+onUnmounted(() => {
+  if (props.editor) {
+    props.editor.off('transaction', onTransaction)
+  }
+  const scrollEl = document.querySelector('.editor-content')
+  if (scrollEl) scrollEl.removeEventListener('scroll', updatePosition)
+  if (updateTimer) cancelAnimationFrame(updateTimer)
+})
+
+function addColumnBefore() {
+  props.editor.chain().focus().addColumnBefore().run()
+}
+function addColumnAfter() {
+  props.editor.chain().focus().addColumnAfter().run()
+}
+function deleteColumn() {
+  props.editor.chain().focus().deleteColumn().run()
+}
+function addRowBefore() {
+  props.editor.chain().focus().addRowBefore().run()
+}
+function addRowAfter() {
+  props.editor.chain().focus().addRowAfter().run()
+}
+function deleteRow() {
+  props.editor.chain().focus().deleteRow().run()
+}
+function mergeCells() {
+  props.editor.chain().focus().mergeCells().run()
+}
+function splitCell() {
+  props.editor.chain().focus().splitCell().run()
+}
+function deleteTable() {
+  props.editor.chain().focus().deleteTable().run()
+}
+</script>

package/src/components/TableOfContents.vue

@@ -5,45 +5,151 @@
         <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">
+      <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 } 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)
+
+// 记录被收起的顶级标题 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
+}
+
+// 滚动时自动展开当前激活标题所在的折叠分组，并将目录项滚动到可视区域
+watch(() => props.activeHeading, (id) => {
+  if (!id) 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 更新后，将激活项滚动到目录可视区域
+  nextTick(() => {
+    const el = tocNavRef.value?.querySelector(`[data-toc-id="${id}"]`)
+    if (el) {
+      el.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    }
+  })
+})
+
+// 文档切换时重置折叠状态
+watch(() => props.tocItems, () => {
+  collapsedSections.value = new Set()
+})
 </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') {