md2ui 1.0.18 → 1.0.19

package/src/components/DocContent.vue

@@ -2,13 +2,12 @@
   <main class="content" @scroll="$emit('scroll', $event)" @click="$emit('content-click', $event)">
     <WelcomePage v-if="showWelcome" @start="$emit('start')" />
     <template v-else>
-      <div class="doc-toolbar">
-        <button class="export-word-btn" :disabled="exporting" @click="handleExport" title="导出为 Word 文档">
-          <FileDown :size="15" />
-          <span>{{ exporting ? '导出中...' : '导出 Word' }}</span>
-        </button>
-      </div>
       <article class="markdown-content" v-html="htmlContent"></article>
+      <!-- 最后更新时间 -->
+      <div v-if="lastModifiedText" class="doc-last-modified">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        <span>最后更新于 {{ lastModifiedText }}</span>
+      </div>
       <nav v-if="prevDoc || nextDoc" class="doc-nav">
         <a v-if="prevDoc" class="doc-nav-link prev" @click.prevent="$emit('load-doc', prevDoc.key)">
           <ChevronLeft :size="16" />
@@ -31,23 +30,35 @@
 </template>
 
 <script setup>
-import { ChevronLeft, ChevronRight, FileDown } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import WelcomePage from './WelcomePage.vue'
-import { useExportWord } from '../composables/useExportWord.js'
 
 const props = defineProps({
   showWelcome: { type: Boolean, default: true },
   htmlContent: { type: String, default: '' },
   prevDoc: { type: Object, default: null },
   nextDoc: { type: Object, default: null },
-  docTitle: { type: String, default: '文档' }
+  docTitle: { type: String, default: '文档' },
+  lastModified: { type: String, default: '' },
 })
 
 defineEmits(['scroll', 'content-click', 'start', 'load-doc'])
 
-const { exporting, exportToWord } = useExportWord()
-
-function handleExport() {
-  exportToWord(props.docTitle)
-}
+// 格式化最后修改时间
+const lastModifiedText = computed(() => {
+  if (!props.lastModified) return ''
+  try {
+    const date = new Date(props.lastModified)
+    if (isNaN(date.getTime())) return ''
+    const y = date.getFullYear()
+    const m = String(date.getMonth() + 1).padStart(2, '0')
+    const d = String(date.getDate()).padStart(2, '0')
+    const h = String(date.getHours()).padStart(2, '0')
+    const min = String(date.getMinutes()).padStart(2, '0')
+    return `${y}-${m}-${d} ${h}:${min}`
+  } catch {
+    return ''
+  }
+})
 </script>

package/src/components/EditorContent.vue

@@ -0,0 +1,257 @@
+<template>
+  <main class="content editor-content" @scroll="$emit('scroll', $event)" @click="$emit('content-click', $event)">
+    <WelcomePage v-if="showWelcome" @start="$emit('start')" />
+    <template v-else>
+      <EditorToolbar v-if="editor" :editor="editor" />
+      <div v-if="hasFrontmatter" class="markdown-content">
+        <div class="code-block-wrapper frontmatter-block frontmatter-editor-block">
+          <div class="code-block-header">
+            <span class="code-lang-label">FRONTMATTER</span>
+            <div class="code-block-actions">
+              <button class="code-action-btn" :data-tooltip="frontmatterCollapsed ? '展开' : '折叠'" @click="frontmatterCollapsed = !frontmatterCollapsed">
+                <svg v-if="frontmatterCollapsed" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+                <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
+              </button>
+            </div>
+          </div>
+          <div v-show="!frontmatterCollapsed" class="code-block-body frontmatter-edit-body">
+            <div class="fm-edit-layout">
+              <div class="fm-line-gutter" aria-hidden="true">
+                <span v-for="n in fmLineCount" :key="n" class="code-ln-num">{{ n }}</span>
+              </div>
+              <textarea ref="fmTextarea" class="frontmatter-textarea" :value="frontmatterYaml" @input="onFrontmatterInput" spellcheck="false" rows="1" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <article class="markdown-content editor-area">
+        <editor-content :editor="editor" />
+      </article>
+      <nav v-if="prevDoc || nextDoc" class="doc-nav">
+        <a v-if="prevDoc" class="doc-nav-link prev" @click.prevent="$emit('load-doc', prevDoc.key)">
+          <ChevronLeft :size="16" />
+          <div class="doc-nav-text">
+            <span class="doc-nav-label">上一篇</span>
+            <span class="doc-nav-title">{{ prevDoc.label }}</span>
+          </div>
+        </a>
+        <div v-else></div>
+        <a v-if="nextDoc" class="doc-nav-link next" @click.prevent="$emit('load-doc', nextDoc.key)">
+          <div class="doc-nav-text">
+            <span class="doc-nav-label">下一篇</span>
+            <span class="doc-nav-title">{{ nextDoc.label }}</span>
+          </div>
+          <ChevronRight :size="16" />
+        </a>
+      </nav>
+    </template>
+  </main>
+</template>
+
+<script setup>
+import { watch, onBeforeUnmount, onMounted, ref, onUnmounted, computed, nextTick } from 'vue'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import { Table } from '@tiptap/extension-table'
+import { TableRow } from '@tiptap/extension-table-row'
+import { TableCell } from '@tiptap/extension-table-cell'
+import { TableHeader } from '@tiptap/extension-table-header'
+import { TaskList } from '@tiptap/extension-task-list'
+import { TaskItem } from '@tiptap/extension-task-item'
+import { Image } from '@tiptap/extension-image'
+import { Placeholder } from '@tiptap/extension-placeholder'
+import { Underline } from '@tiptap/extension-underline'
+import { Markdown } from 'tiptap-markdown'
+import { MermaidBlock } from '../extensions/MermaidBlock.js'
+import { CodeBlockCustom } from '../extensions/CodeBlockCustom.js'
+import { TableControls } from '../extensions/TableControls.js'
+import { MathBlock } from '../extensions/MathBlock.js'
+import { MathInline } from '../extensions/MathInline.js'
+import { uploadImage } from '../services/DocService.js'
+import { parseFrontmatter } from '../composables/useFrontmatter.js'
+import WelcomePage from './WelcomePage.vue'
+import EditorToolbar from './EditorToolbar.vue'
+
+const props = defineProps({
+  showWelcome: { type: Boolean, default: true },
+  markdownContent: { type: String, default: '' },
+  prevDoc: { type: Object, default: null },
+  nextDoc: { type: Object, default: null },
+  docTitle: { type: String, default: '' },
+  currentDocPath: { type: String, default: '' }
+})
+
+const emit = defineEmits(['scroll', 'content-click', 'start', 'load-doc', 'save', 'update:markdownContent'])
+
+const frontmatterYaml = ref('')
+const hasFrontmatter = computed(() => frontmatterYaml.value.length > 0)
+const frontmatterCollapsed = ref(false)
+const fmTextarea = ref(null)
+
+const fmLineCount = computed(() => {
+  const text = frontmatterYaml.value
+  if (!text) return 1
+  return text.split('\n').length
+})
+
+function splitFrontmatter(markdown) {
+  const { content, rawYaml } = parseFrontmatter(markdown)
+  return { yaml: rawYaml, body: content }
+}
+
+function joinFrontmatter(yaml, body) {
+  if (!yaml.trim()) return body
+  return '---\n' + yaml + '\n---\n' + body
+}
+
+function getFullMarkdown() {
+  if (!editor.value) return ''
+  const body = editor.value.storage.markdown.getMarkdown()
+  return joinFrontmatter(frontmatterYaml.value, body)
+}
+
+function onFrontmatterInput(e) {
+  frontmatterYaml.value = e.target.value
+  autoResizeTextarea(e.target)
+  emit('update:markdownContent', getFullMarkdown())
+  scheduleAutoSave()
+}
+
+function autoResizeTextarea(el) {
+  if (!el) return
+  el.style.height = 'auto'
+  el.style.height = el.scrollHeight + 'px'
+}
+
+function handleKeydown(e) {
+  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+    e.preventDefault()
+    if (!editor.value || !props.currentDocPath) return
+    if (autoSaveTimer) clearTimeout(autoSaveTimer)
+    const md = getFullMarkdown()
+    emit('save', { path: props.currentDocPath, content: md })
+  }
+}
+
+onMounted(() => { window.addEventListener('keydown', handleKeydown) })
+onUnmounted(() => { window.removeEventListener('keydown', handleKeydown) })
+
+let autoSaveTimer = null
+function scheduleAutoSave() {
+  if (autoSaveTimer) clearTimeout(autoSaveTimer)
+  autoSaveTimer = setTimeout(() => {
+    if (!editor.value || !props.currentDocPath) return
+    const md = getFullMarkdown()
+    emit('save', { path: props.currentDocPath, content: md })
+  }, 1000)
+}
+
+onUnmounted(() => {
+  if (autoSaveTimer) {
+    clearTimeout(autoSaveTimer)
+    if (editor.value && props.currentDocPath) {
+      const md = getFullMarkdown()
+      emit('save', { path: props.currentDocPath, content: md })
+    }
+  }
+})
+
+const isExternalUpdate = ref(false)
+
+function preloadImage(src) {
+  return new Promise((resolve) => {
+    const img = document.createElement('img')
+    img.onload = () => resolve(true)
+    img.onerror = () => resolve(false)
+    img.src = src
+  })
+}
+
+async function handleImageUpload(file, editorInstance) {
+  if (!file || !file.type.startsWith('image/')) return
+  if (!props.currentDocPath) return
+  try {
+    const url = await uploadImage(file, props.currentDocPath)
+    await preloadImage(url)
+    editorInstance.chain().focus().setImage({ src: url }).run()
+  } catch (e) {
+    console.error('upload failed:', e)
+  }
+}
+
+function createImagePasteProps(getEditor) {
+  return {
+    handlePaste(view, event) {
+      const items = event.clipboardData?.items
+      if (!items) return false
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          event.preventDefault()
+          const file = item.getAsFile()
+          if (file) handleImageUpload(file, getEditor())
+          return true
+        }
+      }
+      return false
+    },
+    handleDrop(view, event) {
+      const files = event.dataTransfer?.files
+      if (!files || files.length === 0) return false
+      const imageFiles = Array.from(files).filter(f => f.type.startsWith('image/'))
+      if (imageFiles.length === 0) return false
+      event.preventDefault()
+      const editorInstance = getEditor()
+      const pos = view.posAtCoords({ left: event.clientX, top: event.clientY })
+      if (pos) {
+        editorInstance.commands.focus()
+        editorInstance.commands.setTextSelection(pos.pos)
+      }
+      imageFiles.forEach(file => handleImageUpload(file, editorInstance))
+      return true
+    },
+  }
+}
+
+const { yaml: initYaml, body: initBody } = splitFrontmatter(props.markdownContent)
+frontmatterYaml.value = initYaml
+
+const editor = useEditor({
+  extensions: [
+    StarterKit.configure({ codeBlock: false }),
+    Table.configure({ resizable: true }),
+    TableRow, TableCell, TableHeader,
+    TaskList, TaskItem.configure({ nested: true }),
+    Image, Underline,
+    MermaidBlock, CodeBlockCustom, TableControls,
+    MathBlock, MathInline,
+    Placeholder.configure({ placeholder: '开始编写文档...' }),
+    Markdown.configure({ html: true, transformPastedText: true, transformCopiedText: true }),
+  ],
+  content: initBody,
+  editorProps: createImagePasteProps(() => editor.value),
+  onUpdate: ({ editor }) => {
+    if (isExternalUpdate.value) return
+    emit('update:markdownContent', getFullMarkdown())
+    scheduleAutoSave()
+  },
+})
+
+onMounted(() => {
+  nextTick(() => { if (fmTextarea.value) autoResizeTextarea(fmTextarea.value) })
+})
+
+watch(() => props.markdownContent, (newContent) => {
+  if (!editor.value) return
+  const { yaml, body } = splitFrontmatter(newContent)
+  frontmatterYaml.value = yaml
+  nextTick(() => { if (fmTextarea.value) autoResizeTextarea(fmTextarea.value) })
+  const currentMd = editor.value.storage.markdown.getMarkdown()
+  if (currentMd === body) return
+  isExternalUpdate.value = true
+  editor.value.commands.setContent(body)
+  isExternalUpdate.value = false
+})
+
+onBeforeUnmount(() => { editor.value?.destroy() })
+</script>

package/src/components/EditorToolbar.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="editor-toolbar">
+    <div class="editor-toolbar-group">
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('bold') }"
+        @click="editor.chain().focus().toggleBold().run()"
+        title="加粗 (Ctrl+B)"
+      >
+        <Bold :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('italic') }"
+        @click="editor.chain().focus().toggleItalic().run()"
+        title="斜体 (Ctrl+I)"
+      >
+        <Italic :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('underline') }"
+        @click="editor.chain().focus().toggleUnderline().run()"
+        title="下划线 (Ctrl+U)"
+      >
+        <UnderlineIcon :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('strike') }"
+        @click="editor.chain().focus().toggleStrike().run()"
+        title="删除线"
+      >
+        <Strikethrough :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('code') }"
+        @click="editor.chain().focus().toggleCode().run()"
+        title="行内代码"
+      >
+        <Code :size="15" />
+      </button>
+    </div>
+
+    <div class="editor-toolbar-divider"></div>
+
+    <div class="editor-toolbar-group">
+      <button
+        v-for="level in [1, 2, 3, 4]"
+        :key="level"
+        class="editor-toolbar-btn heading-btn"
+        :class="{ active: editor.isActive('heading', { level }) }"
+        @click="editor.chain().focus().toggleHeading({ level }).run()"
+        :title="`标题 ${level}`"
+      >
+        H{{ level }}
+      </button>
+    </div>
+
+    <div class="editor-toolbar-divider"></div>
+
+    <div class="editor-toolbar-group">
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('bulletList') }"
+        @click="editor.chain().focus().toggleBulletList().run()"
+        title="无序列表"
+      >
+        <List :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('orderedList') }"
+        @click="editor.chain().focus().toggleOrderedList().run()"
+        title="有序列表"
+      >
+        <ListOrdered :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('taskList') }"
+        @click="editor.chain().focus().toggleTaskList().run()"
+        title="任务列表"
+      >
+        <ListChecks :size="15" />
+      </button>
+    </div>
+
+    <div class="editor-toolbar-divider"></div>
+
+    <div class="editor-toolbar-group">
+      <button
+        class="editor-toolbar-btn"
+        :class="{ active: editor.isActive('blockquote') }"
+        @click="editor.chain().focus().toggleBlockquote().run()"
+        title="引用"
+      >
+        <Quote :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        @click="editor.chain().focus().setHorizontalRule().run()"
+        title="分割线"
+      >
+        <Minus :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        @click="editor.chain().focus().toggleCodeBlock().run()"
+        :class="{ active: editor.isActive('codeBlock') }"
+        title="代码块"
+      >
+        <FileCode :size="15" />
+      </button>
+      <div class="table-picker-wrapper" ref="tablePickerRef">
+        <button
+          class="editor-toolbar-btn"
+          @click="toggleTablePicker"
+          title="插入表格"
+        >
+          <TableIcon :size="15" />
+        </button>
+        <div v-if="showTablePicker" class="table-picker-dropdown">
+          <div class="table-picker-label">{{ pickerRows }} x {{ pickerCols }}</div>
+          <div class="table-picker-grid"
+            @mouseleave="pickerRows = 1; pickerCols = 1"
+          >
+            <div
+              v-for="r in 8" :key="r"
+              class="table-picker-row"
+            >
+              <div
+                v-for="c in 8" :key="c"
+                class="table-picker-cell"
+                :class="{ active: r <= pickerRows && c <= pickerCols }"
+                @mouseenter="pickerRows = r; pickerCols = c"
+                @click="confirmInsertTable(r, c)"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        class="editor-toolbar-btn"
+        @click="insertImage"
+        title="插入图片"
+      >
+        <ImageIcon :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn math-toolbar-btn"
+        @click="insertMathInline"
+        title="行内公式"
+      >
+        <span class="math-toolbar-icon">$</span>
+      </button>
+      <button
+        class="editor-toolbar-btn math-toolbar-btn"
+        @click="insertMathBlock"
+        title="块级公式"
+      >
+        <span class="math-toolbar-icon">$$</span>
+      </button>
+    </div>
+
+    <div class="editor-toolbar-divider"></div>
+
+    <div class="editor-toolbar-group">
+      <button
+        class="editor-toolbar-btn"
+        @click="editor.chain().focus().undo().run()"
+        :disabled="!editor.can().undo()"
+        title="撤销 (Ctrl+Z)"
+      >
+        <Undo :size="15" />
+      </button>
+      <button
+        class="editor-toolbar-btn"
+        @click="editor.chain().focus().redo().run()"
+        :disabled="!editor.can().redo()"
+        title="重做 (Ctrl+Shift+Z)"
+      >
+        <Redo :size="15" />
+      </button>
+    </div>
+
+    <div class="editor-toolbar-spacer"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import {
+  Bold, Italic, Underline as UnderlineIcon, Strikethrough, Code,
+  List, ListOrdered, ListChecks, Quote, Minus, FileCode,
+  Table as TableIcon, Image as ImageIcon,
+  Undo, Redo
+} from 'lucide-vue-next'
+
+const props = defineProps({
+  editor: { type: Object, required: true }
+})
+
+defineEmits([])
+
+// 表格行列选择器
+const showTablePicker = ref(false)
+const pickerRows = ref(1)
+const pickerCols = ref(1)
+const tablePickerRef = ref(null)
+
+function toggleTablePicker() {
+  showTablePicker.value = !showTablePicker.value
+  pickerRows.value = 1
+  pickerCols.value = 1
+}
+
+function confirmInsertTable(rows, cols) {
+  props.editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run()
+  showTablePicker.value = false
+}
+
+// 点击外部关闭选择器
+function handleClickOutside(e) {
+  if (tablePickerRef.value && !tablePickerRef.value.contains(e.target)) {
+    showTablePicker.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside)
+})
+
+function insertImage() {
+  const url = window.prompt('输入图片 URL:')
+  if (url) {
+    props.editor.chain().focus().setImage({ src: url }).run()
+  }
+}
+
+// 插入行内公式
+function insertMathInline() {
+  const latex = window.prompt('输入行内 LaTeX 公式:', 'E=mc^2')
+  if (latex !== null && latex.trim()) {
+    props.editor.chain().focus().insertContent({
+      type: 'mathInline',
+      attrs: { latex: latex.trim() },
+    }).run()
+  }
+}
+
+// 插入块级公式
+function insertMathBlock() {
+  props.editor.chain().focus().insertContent({
+    type: 'mathBlock',
+    content: [{ type: 'text', text: '\\int_0^\\infty e^{-x} dx' }],
+  }).run()
+}
+</script>