md2ui 1.0.18 → 1.0.20

package/src/App.vue

@@ -5,13 +5,18 @@
       v-if="isMobile"
       @open-drawer="mobileDrawerOpen = true"
       @go-home="goHome"
-      @open-search="openSearch"
+      @open-search="mobileSearchOpen = true"
     />
     <!-- 桌面端顶栏 -->
     <TopBar
       v-if="!isMobile"
+      :editMode="editMode"
+      :showWelcome="showWelcome"
+      :docTitle="currentDocTitle"
+      :rawMarkdown="rawMarkdown"
       @select-search="handleSearchSelect"
       @go-home="goHome"
+      @toggle-edit="onToggleEdit"
     />
     <!-- 移动端遮罩 -->
     <transition name="fade">
@@ -34,24 +39,51 @@
       @collapse-all="onCollapseAll"
       @toggle-folder="toggleFolder"
       @select-doc="handleDocSelect"
+      @create-doc="createDoc"
+      @delete-doc="deleteDoc"
+      @rename-doc="({ item, newName }) => renameDoc(item, newName)"
+      @reorder="reorderDocs"
     />
     <!-- 左侧拖拽条 & 展开按钮（桌面端） -->
     <div v-if="!isMobile && !sidebarCollapsed" class="resizer resizer-left" @mousedown="startResize('left', $event)"></div>
     <button v-if="!isMobile && sidebarCollapsed" class="expand-btn expand-btn-left" @click="sidebarCollapsed = false" title="展开导航">
       <ChevronRight :size="14" />
     </button>
-    <!-- 内容区 -->
+    <!-- 移动端搜索页（替换内容区） -->
+    <MobileSearch
+      v-if="isMobile && mobileSearchOpen"
+      @close="mobileSearchOpen = false"
+      @select="(key) => { mobileSearchOpen = false; handleSearchSelect(key) }"
+    />
+    <!-- 内容区：查看模式 / 编辑模式 -->
     <DocContent
+      v-else-if="!editMode"
       :showWelcome="showWelcome"
       :htmlContent="htmlContent"
       :prevDoc="prevDoc"
       :nextDoc="nextDoc"
       :docTitle="currentDocTitle"
+      :lastModified="lastModified"
       @scroll="handleScroll"
       @content-click="onContentClick"
       @start="loadFirstDoc"
       @load-doc="loadDoc"
     />
+    <EditorContentVue
+      v-else
+      :showWelcome="showWelcome"
+      :markdownContent="rawMarkdown"
+      :prevDoc="prevDoc"
+      :nextDoc="nextDoc"
+      :docTitle="currentDocTitle"
+      :currentDocPath="currentDocFilePath"
+      @scroll="handleScroll"
+      @content-click="onContentClick"
+      @start="loadFirstDoc"
+      @load-doc="loadDoc"
+      @save="onSaveDoc"
+      @update:markdownContent="onEditorUpdate"
+    />
     <!-- 桌面端 TOC -->
     <div v-if="!isMobile && !tocCollapsed && tocItems.length > 0" class="resizer resizer-right" @mousedown="startResize('right', $event)"></div>
     <TableOfContents v-if="!isMobile" :tocItems="tocItems" :activeHeading="activeHeading" :collapsed="tocCollapsed" :width="tocWidth" @toggle="tocCollapsed = !tocCollapsed" @scroll-to="(id) => scrollToHeading(id, { push: true })" />
@@ -84,46 +116,104 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
 import { ArrowUp, ChevronRight, ChevronLeft } from 'lucide-vue-next'
 import MobileHeader from './components/MobileHeader.vue'
 import TopBar from './components/TopBar.vue'
 import AppSidebar from './components/AppSidebar.vue'
 import DocContent from './components/DocContent.vue'
+import EditorContentVue from './components/EditorContent.vue'
 import TableOfContents from './components/TableOfContents.vue'
 import MobileToc from './components/MobileToc.vue'
 import ImageZoom from './components/ImageZoom.vue'
+import MobileSearch from './components/MobileSearch.vue'
 import { useDocManager } from './composables/useDocManager.js'
 import { useResize } from './composables/useResize.js'
+import { useFileWatcher } from './composables/useFileWatcher.js'
+import { resetContentEtag } from './services/DocService.js'
 
-import { useSearch } from './composables/useSearch.js'
 import { useMobile } from './composables/useMobile.js'
 
 
-// UI 状态
-const sidebarCollapsed = ref(false)
-const tocCollapsed = ref(false)
+// UI 状态（从 sessionStorage 恢复）
+const sidebarCollapsed = ref(sessionStorage.getItem('sidebarCollapsed') === 'true')
+const tocCollapsed = ref(sessionStorage.getItem('tocCollapsed') === 'true')
 const zoomVisible = ref(false)
-const zoomContent = ref('')
 const zoomImages = ref([])
 const zoomIndex = ref(0)
+const mobileSearchOpen = ref(false)
 
 // composables
 const {
   docsList, currentDoc, currentDocTitle, showWelcome, htmlContent, tocItems,
+  editMode, rawMarkdown, currentDocFilePath, lastModified,
   scrollProgress, showBackToTop, activeHeading,
   handleScroll, scrollToHeading, scrollToTop,
   loadDocsList, loadFromUrl, goHome, loadDoc, loadFirstDoc,
   handleDocSelect, handleContentClick, handleSearchSelect,
+  toggleEditMode, reloadDocsList, reloadCurrentDoc, saveDoc, getCurrentDocPath,
   toggleFolder, onExpandAll, onCollapseAll,
-  prevDoc, nextDoc
+  prevDoc, nextDoc,
+  createDoc, deleteDoc, renameDoc, reorderDocs
 } = useDocManager()
 
 const { sidebarWidth, tocWidth, startResize } = useResize()
 
-const { openSearch } = useSearch()
 const { isMobile, mobileDrawerOpen, mobileTocOpen } = useMobile()
 
+// 文件监听（DocService 统一处理模式检测和 ETag）
+useFileWatcher({
+  getCurrentDocPath,
+  onDocsListChange: (newTree) => reloadDocsList(newTree),
+  onDocContentChange: (content) => reloadCurrentDoc(content)
+})
+
+// 切换编辑模式（记住当前锚点，切换后复用 scrollToHeading 恢复位置）
+function onToggleEdit(isEdit) {
+  // 记住当前激活的锚点
+  const savedAnchor = activeHeading.value
+  // 记录滚动比例作为兜底
+  const contentEl = document.querySelector('.content')
+  let scrollRatio = 0
+  if (contentEl) {
+    const scrollHeight = contentEl.scrollHeight - contentEl.clientHeight
+    scrollRatio = scrollHeight > 0 ? contentEl.scrollTop / scrollHeight : 0
+  }
+
+  editMode.value = isEdit
+  sessionStorage.setItem('editMode', isEdit)
+
+  // 等待 DOM 渲染完成后恢复位置
+  nextTick(() => {
+    // 再等一帧，确保 tiptap 编辑器完成渲染
+    requestAnimationFrame(() => {
+      const newContentEl = document.querySelector('.content')
+      if (!newContentEl) return
+
+      if (savedAnchor) {
+        scrollToHeading(savedAnchor)
+      } else if (scrollRatio > 0) {
+        const scrollHeight = newContentEl.scrollHeight - newContentEl.clientHeight
+        if (scrollHeight > 0) {
+          newContentEl.scrollTop = scrollRatio * scrollHeight
+        }
+      }
+    })
+  })
+}
+
+// 编辑器内容更新
+function onEditorUpdate(md) {
+  rawMarkdown.value = md
+}
+
+// 保存文档
+async function onSaveDoc({ path, content }) {
+  const ok = await saveDoc({ path, content })
+  if (ok) {
+    resetContentEtag()
+  }
+}
 
 // 内容区点击：委托给 docManager，图片放大回调在这里处理
 function onContentClick(event) {
@@ -136,11 +226,20 @@ function onContentClick(event) {
   })
 }
 
-// 全局快捷键
-window.addEventListener('popstate', () => loadFromUrl())
+// popstate 事件监听（生命周期管理）
+function onPopstate() { loadFromUrl() }
+
+// 持久化 UI 状态
+watch(sidebarCollapsed, (v) => sessionStorage.setItem('sidebarCollapsed', v))
+watch(tocCollapsed, (v) => sessionStorage.setItem('tocCollapsed', v))
 
 onMounted(async () => {
+  window.addEventListener('popstate', onPopstate)
   await loadDocsList()
   await loadFromUrl()
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('popstate', onPopstate)
+})
 </script>

package/src/components/AppSidebar.vue

@@ -4,7 +4,6 @@
     :class="{ 'sidebar-drawer': isMobile, 'drawer-open': drawerOpen }"
     :style="!isMobile ? { width: width + 'px' } : undefined"
   >
-    <!-- 移动端显示 Logo + 关闭按钮，桌面端只显示收起按钮 -->
     <div class="sidebar-header">
       <Logo v-if="isMobile" @go-home="$emit('go-home')" />
       <div class="sidebar-header-actions">
@@ -20,6 +19,9 @@
       <div class="nav-section">
         <span>文档目录</span>
         <div class="nav-actions">
+          <button class="action-btn" @click="showCreateMenu($event, '')" title="新建">
+            <Plus :size="14" />
+          </button>
           <button class="action-btn" @click="$emit('expand-all')" title="全部展开">
             <ChevronsDownUp :size="14" />
           </button>
@@ -28,37 +30,106 @@
           </button>
         </div>
       </div>
-      <!-- 过滤输入框 -->
       <div class="nav-filter">
         <Filter :size="12" class="nav-filter-icon" />
-        <input
-          v-model="filterText"
-          type="text"
-          class="nav-filter-input"
-          placeholder="过滤文档..."
-        />
+        <input v-model="filterText" type="text" class="nav-filter-input" placeholder="过滤文档..." />
         <button v-if="filterText" class="nav-filter-clear" @click="filterText = ''">
           <X :size="12" />
         </button>
       </div>
-      <TreeNode
-        v-for="item in filteredDocs"
-        :key="item.key"
-        :item="item"
-        :currentDoc="currentDoc"
-        @toggle="$emit('toggle-folder', $event)"
-        @select="$emit('select-doc', $event)"
-      />
+      <!-- 无过滤时使用拖拽排序 -->
+      <draggable
+        v-if="!filterText"
+        :list="docsList"
+        :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-folder', $event)"
+            @select="$emit('select-doc', $event)"
+            @show-create="showCreateMenu"
+            @rename="(payload) => $emit('rename-doc', payload)"
+            @delete="(payload) => $emit('delete-doc', payload)"
+            @drag-end="onDragEnd"
+          />
+        </template>
+      </draggable>
+      <!-- 过滤模式下禁用拖拽 -->
+      <template v-else>
+        <TreeNode
+          v-for="item in filteredDocs"
+          :key="item.key"
+          :item="item"
+          :currentDoc="currentDoc"
+          @toggle="$emit('toggle-folder', $event)"
+          @select="$emit('select-doc', $event)"
+          @show-create="showCreateMenu"
+          @rename="(payload) => $emit('rename-doc', payload)"
+          @delete="(payload) => $emit('delete-doc', payload)"
+        />
+      </template>
       <div v-if="filterText && filteredDocs.length === 0" class="nav-filter-empty">
         没有匹配的文档
       </div>
     </nav>
+
+    <!-- 新建菜单 -->
+    <Teleport to="body">
+      <div v-if="createMenuVisible" class="ctx-menu-overlay" @click="createMenuVisible = false">
+        <div class="ctx-menu" :style="createMenuStyle" @click.stop>
+          <div class="ctx-menu-item" @click="startCreate('file')">
+            <FileText :size="14" />
+            <span>新建文档</span>
+          </div>
+          <div class="ctx-menu-item" @click="startCreate('folder')">
+            <FolderPlus :size="14" />
+            <span>新建目录</span>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 新建输入弹窗 -->
+    <Teleport to="body">
+      <div v-if="createInputVisible" class="modal-overlay" @click="createInputVisible = false">
+        <div class="modal-dialog" @click.stop>
+          <div class="modal-title">{{ createType === 'file' ? '新建文档' : '新建目录' }}</div>
+          <input
+            ref="createInputRef"
+            v-model="createName"
+            class="modal-input"
+            :placeholder="createType === 'file' ? '请输入文档名称' : '请输入目录名称'"
+            @keydown.enter="confirmCreate"
+            @keydown.escape="createInputVisible = false"
+          />
+          <div v-if="createError" class="modal-error">{{ createError }}</div>
+          <div class="modal-actions">
+            <button class="modal-btn modal-btn-cancel" @click="createInputVisible = false">取消</button>
+            <button class="modal-btn modal-btn-confirm" @click="confirmCreate">确定</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+
   </aside>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { ChevronLeft, X, ChevronsDownUp, ChevronsUpDown, Filter } from 'lucide-vue-next'
+import { ref, computed, nextTick, watch } from 'vue'
+import { ChevronLeft, X, ChevronsDownUp, ChevronsUpDown, Filter, Plus, FileText, FolderPlus } from 'lucide-vue-next'
+import draggable from 'vuedraggable'
 import Logo from './Logo.vue'
 import TreeNode from './TreeNode.vue'
 
@@ -70,15 +141,16 @@ const props = defineProps({
   width: { type: Number, default: 320 }
 })
 
-defineEmits([
+const emit = defineEmits([
   'go-home', 'close-drawer', 'collapse',
   'expand-all', 'collapse-all',
-  'toggle-folder', 'select-doc'
+  'toggle-folder', 'select-doc',
+  'create-doc', 'delete-doc', 'rename-doc',
+  'reorder'
 ])
 
 const filterText = ref('')
 
-// 递归过滤文档树：保留匹配的文件和包含匹配文件的文件夹
 function filterTree(items, keyword) {
   if (!keyword) return items
   const lower = keyword.toLowerCase()
@@ -99,4 +171,92 @@ function filterTree(items, keyword) {
 }
 
 const filteredDocs = computed(() => filterTree(props.docsList, filterText.value))
+
+// 当前文档变化时，自动滚动菜单到选中项
+watch(() => props.currentDoc, (newDoc) => {
+  if (!newDoc) return
+  nextTick(() => {
+    const activeEl = document.querySelector('.nav-menu .nav-item.active')
+    if (activeEl) {
+      activeEl.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+    }
+  })
+})
+
+// ===== 新建菜单 =====
+const createMenuVisible = ref(false)
+const createMenuStyle = ref({})
+const createParentKey = ref('')
+
+function showCreateMenu(event, parentKey) {
+  createParentKey.value = parentKey
+  const rect = event.currentTarget.getBoundingClientRect()
+  // 先以不可见状态渲染，等测量后再修正位置
+  createMenuStyle.value = {
+    position: 'fixed',
+    left: `${rect.right + 4}px`,
+    top: `${rect.top}px`,
+    zIndex: 9999,
+    visibility: 'hidden'
+  }
+  createMenuVisible.value = true
+  nextTick(() => {
+    const menuEl = document.querySelector('.ctx-menu')
+    if (menuEl) {
+      const menuRect = menuEl.getBoundingClientRect()
+      let left = rect.right + 4
+      let top = rect.top
+      // 右侧溢出修正
+      if (left + menuRect.width > window.innerWidth - 10) {
+        left = rect.left - menuRect.width - 4
+      }
+      // 底部溢出修正：向上弹出，使菜单底部对齐触发按钮底部
+      if (top + menuRect.height > window.innerHeight - 10) {
+        top = rect.bottom - menuRect.height
+      }
+      // 如果向上修正后超出顶部，则贴顶
+      if (top < 10) {
+        top = 10
+      }
+      createMenuStyle.value = {
+        position: 'fixed',
+        left: `${left}px`,
+        top: `${top}px`,
+        zIndex: 9999,
+        visibility: 'visible'
+      }
+    }
+  })
+}
+
+// ===== 新建输入 =====
+const createInputVisible = ref(false)
+const createInputRef = ref(null)
+const createType = ref('file')
+const createName = ref('')
+const createError = ref('')
+
+function startCreate(type) {
+  createMenuVisible.value = false
+  createType.value = type
+  createName.value = ''
+  createError.value = ''
+  createInputVisible.value = true
+  nextTick(() => createInputRef.value?.focus())
+}
+
+function confirmCreate() {
+  const name = createName.value.trim()
+  if (!name) { createError.value = '名称不能为空'; return }
+  if (/[\\/:*?"<>|]/.test(name)) { createError.value = '名称包含非法字符'; return }
+  createError.value = ''
+  emit('create-doc', { parentKey: createParentKey.value, name, type: createType.value })
+  createInputVisible.value = false
+}
+
+// ===== 拖拽排序 =====
+function onDragEnd() {
+  // 拖拽结束后，通知父组件执行重编号
+  emit('reorder')
+}
 </script>

package/src/components/CodeBlockNodeView.vue

@@ -0,0 +1,72 @@
+<template>
+  <node-view-wrapper class="code-block-wrapper editor-code-block" data-type="codeBlock">
+    <!-- 代码块 header -->
+    <div class="code-block-header" contenteditable="false">
+      <input
+        class="code-lang-input"
+        :value="node.attrs.language || ''"
+        @input="updateLanguage"
+        placeholder="语言"
+        spellcheck="false"
+      />
+      <div class="code-block-actions">
+        <button class="code-action-btn" :class="{ copied }" @click="copyCode" title="复制代码">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+          </svg>
+          <span class="copy-text">{{ copied ? '已复制' : '复制' }}</span>
+        </button>
+      </div>
+    </div>
+    <!-- 代码编辑区域：行号 gutter + 编辑区 -->
+    <div class="code-block-body">
+      <div class="code-edit-layout">
+        <!-- 行号列 -->
+        <div class="code-line-gutter" contenteditable="false" aria-hidden="true">
+          <span v-for="n in lineCount" :key="n" class="code-ln-num">{{ n }}</span>
+        </div>
+        <!-- 编辑区 -->
+        <pre class="code-edit-area"><node-view-content as="code" :class="codeClass" /></pre>
+      </div>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { nodeViewProps, NodeViewWrapper, NodeViewContent } from '@tiptap/vue-3'
+
+const props = defineProps(nodeViewProps)
+const copied = ref(false)
+
+const codeClass = computed(() => {
+  const lang = props.node.attrs.language
+  return lang ? `language-${lang}` : ''
+})
+
+// 根据代码内容计算行数（响应式，编辑时自动更新）
+const lineCount = computed(() => {
+  const text = props.node.textContent
+  if (!text) return 1
+  return text.split('\n').length
+})
+
+// 更新语言属性
+function updateLanguage(e) {
+  props.updateAttributes({ language: e.target.value || null })
+}
+
+// 复制代码
+async function copyCode() {
+  const text = props.node.textContent
+  try {
+    await navigator.clipboard.writeText(text)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  } catch {
+    // fallback
+  }
+}
+</script>

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>