md2ui 1.0.16 → 1.0.19

package/src/composables/useDocManager.js

@@ -1,10 +1,11 @@
-import { ref, computed, nextTick } from 'vue'
-import { getDocsList } from '../api/docs.js'
+import { ref, computed, watch, nextTick } from 'vue'
+import * as docService from '../services/DocService.js'
 import { useMarkdown } from './useMarkdown.js'
 import { useSearch } from './useSearch.js'
 import { useScroll } from './useScroll.js'
 import { useMobile } from './useMobile.js'
 import { findDoc, findFirstDoc, findReadmeDoc, findDocByHash, expandParents, flattenDocsList, expandAll, collapseAll } from './useDocTree.js'
+import { stripOrderPrefix } from './useDocHash.js'
 
 // 等待内容区域图片加载完成
 async function waitForContentImages(timeoutMs = 3000) {
@@ -21,33 +22,39 @@ export function useDocManager() {
   // 文档状态
   const docsList = ref([])
   const currentDoc = ref('')
-  // 如果 URL 有路径，说明是刷新已有文档页面，初始不显示欢迎页，避免闪烁
   const hasInitialPath = window.location.pathname.replace(/^\//, '') !== ''
   const showWelcome = ref(!hasInitialPath)
+  const lastModified = ref('')
+
+  // 编辑模式（从 sessionStorage 恢复）
+  const editMode = ref(sessionStorage.getItem('editMode') === 'true')
+  const rawMarkdown = ref('')
+  const currentDocFilePath = ref('')
 
   // composables
-  const { htmlContent, tocItems, renderMarkdown, docHash } = useMarkdown()
+  const { htmlContent, tocItems, renderMarkdown, extractTOCFromMarkdown, docHash } = useMarkdown()
   const { buildIndex } = useSearch()
   const {
     scrollProgress, showBackToTop, activeHeading,
     handleScroll: _handleScroll,
     scrollToHeading: _scrollToHeading,
-    scrollToTop
+    scrollToTop,
+    setTocItems
   } = useScroll()
   const { isMobile, mobileDrawerOpen } = useMobile()
 
-  // 获取当前滚动位置
+  setTocItems(tocItems)
+
+  // ===== 滚动 & 历史 =====
   function getScrollTop() {
     const el = document.querySelector('.content')
     return el ? el.scrollTop : 0
   }
 
-  // 构造 history state，保留滚动位置
   function makeState(scrollTop) {
     return { scrollTop: scrollTop ?? getScrollTop() }
   }
 
-  // 滚动处理，同步锚点到 URL（replaceState 保留滚动位置）
   function handleScroll(e) {
     _handleScroll(e)
     if (activeHeading.value && currentDoc.value) {
@@ -55,10 +62,8 @@ export function useDocManager() {
     }
   }
 
-  // push: true 表示用户主动点击锚点，产生可回退的历史条目
   function scrollToHeading(id, { push = false } = {}) {
     if (push && currentDoc.value) {
-      // 先把当前滚动位置写入即将被覆盖的历史条目
       history.replaceState(makeState(), '', window.location.href)
     }
     _scrollToHeading(id)
@@ -72,37 +77,40 @@ export function useDocManager() {
     }
   }
 
-  // 加载文档列表
+  // ===== 文档列表加载 =====
   async function loadDocsList() {
-    docsList.value = await getDocsList()
+    docsList.value = await docService.fetchDocsList()
+    restoreExpandedState()
     buildIndex(docsList.value)
   }
 
-  // 回到欢迎页（isPopstate: true 表示由浏览器回退触发，不操作 history）
+  // ===== 导航 =====
   function goHome({ isPopstate = false } = {}) {
     currentDoc.value = ''
     showWelcome.value = true
     htmlContent.value = ''
     tocItems.value = []
+    editMode.value = false
+    lastModified.value = ''
+    sessionStorage.setItem('editMode', 'false')
+    document.title = 'md2ui'
     if (!isPopstate) {
-      // 用户主动点击，保存旧条目滚动位置后 push
       history.replaceState(makeState(), '', window.location.href)
       history.pushState(makeState(0), '', '/')
     }
     if (isMobile.value) mobileDrawerOpen.value = false
   }
 
-  // 加载文档
   async function loadDoc(key, { replace = false, anchor = '', keepState = false } = {}) {
     currentDoc.value = key
     showWelcome.value = false
+    lastContentHash = ''
+    docService.resetContentEtag()
     const hash = docHash(key)
     const url = anchor ? `/${hash}#${anchor}` : `/${hash}`
     if (replace) {
-      // keepState: popstate 回退时保留浏览器已有的 state（含 scrollTop）
       if (!keepState) history.replaceState(makeState(0), '', url)
     } else {
-      // push 前先保存当前滚动位置到旧条目
       history.replaceState(makeState(), '', window.location.href)
       history.pushState(makeState(0), '', url)
     }
@@ -112,33 +120,75 @@ export function useDocManager() {
       const response = await fetch(doc.path)
       if (response.ok) {
         const content = await response.text()
-        await renderMarkdown(content, key, docsList.value)
+        rawMarkdown.value = content
+        // 捕获最后修改时间
+        const lm = response.headers.get('x-last-modified')
+        lastModified.value = lm || ''
+        // 提取文件路径供轮询使用
+        currentDocFilePath.value = doc.path.replace(/^\/@user-docs\//, '')
+        if (editMode.value) {
+          extractTOCFromMarkdown(content, tocItems)
+        } else {
+          await renderMarkdown(content, key, docsList.value)
+        }
         const contentEl = document.querySelector('.content')
         if (contentEl) contentEl.scrollTop = 0
+        // 动态更新页面标题（SEO + 浏览器标签页）
+        const docTitle = findDoc(docsList.value, key)?.label || ''
+        document.title = docTitle ? `${docTitle} - md2ui` : 'md2ui'
       }
     } catch (error) {
       console.error('加载文档失败:', error)
     }
   }
 
-  // 加载第一篇文档
   function loadFirstDoc() {
     const first = findFirstDoc(docsList.value)
     if (first) loadDoc(first.key)
   }
 
-  // 选择文档（移动端自动关闭抽屉）
   function handleDocSelect(key) {
     loadDoc(key)
     if (isMobile.value) mobileDrawerOpen.value = false
   }
 
-  // 文件夹操作
-  function toggleFolder(item) { item.expanded = !item.expanded }
-  function onExpandAll() { expandAll(docsList.value) }
-  function onCollapseAll() { collapseAll(docsList.value) }
+  // ===== 文件夹操作 =====
+  function toggleFolder(item) { item.expanded = !item.expanded; saveExpandedState() }
+  function onExpandAll() { expandAll(docsList.value); saveExpandedState() }
+  function onCollapseAll() { collapseAll(docsList.value); saveExpandedState() }
 
-  // 内容区点击处理（链接跳转 + 图片放大）
+  function saveExpandedState() {
+    const expanded = []
+    function collect(items) {
+      for (const item of items) {
+        if (item.type === 'folder') {
+          if (item.expanded) expanded.push(item.key)
+          if (item.children) collect(item.children)
+        }
+      }
+    }
+    collect(docsList.value)
+    sessionStorage.setItem('expandedFolders', JSON.stringify(expanded))
+  }
+
+  function restoreExpandedState() {
+    const raw = sessionStorage.getItem('expandedFolders')
+    if (!raw) return
+    try {
+      const expanded = new Set(JSON.parse(raw))
+      function apply(items) {
+        for (const item of items) {
+          if (item.type === 'folder') {
+            if (expanded.has(item.key)) item.expanded = true
+            if (item.children) apply(item.children)
+          }
+        }
+      }
+      apply(docsList.value)
+    } catch { /* ignore */ }
+  }
+
+  // ===== 内容区点击处理 =====
   function handleContentClick(event, { onZoom }) {
     const target = event.target
     const link = target.closest('a')
@@ -148,6 +198,7 @@ export function useDocManager() {
         event.preventDefault()
         const anchor = link.dataset.anchor || ''
         expandParents(docsList.value, docKey)
+        saveExpandedState()
         loadDoc(docKey).then(async () => {
           if (anchor) { await nextTick(); await waitForContentImages(); scrollToHeading(anchor) }
         })
@@ -160,20 +211,20 @@ export function useDocManager() {
       }
       return
     }
-    // 图片/Mermaid 放大（收集所有可放大元素，支持左右切换）
     const isImg = target.tagName === 'IMG' && target.classList.contains('zoomable-image')
-    const mermaidEl = target.closest('.mermaid')
+    const mermaidEl = target.closest('.mermaid') || target.closest('.mermaid-svg')
     const isMermaid = mermaidEl && mermaidEl.classList.contains('zoomable-image')
     if (isImg || isMermaid) {
       const container = document.querySelector('.markdown-content')
       if (!container) return
-      // 收集所有可放大元素
       const allZoomable = [...container.querySelectorAll('.zoomable-image')]
       const images = allZoomable.map(el => {
         if (el.tagName === 'IMG') {
           return `<img src="${el.src}" alt="${el.alt || ''}" style="max-width: 100%; height: auto;" />`
         }
-        return el.innerHTML
+        const clone = el.cloneNode(true)
+        clone.querySelectorAll('.mermaid-copy-btn, .image-copy-btn').forEach(btn => btn.remove())
+        return clone.innerHTML
       })
       const clickedEl = isImg ? target : mermaidEl
       const index = allZoomable.indexOf(clickedEl)
@@ -181,14 +232,13 @@ export function useDocManager() {
     }
   }
 
-  // 当前文档标题
+  // ===== 计算属性 =====
   const currentDocTitle = computed(() => {
     if (!currentDoc.value) return '文档'
     const doc = findDoc(docsList.value, currentDoc.value)
     return doc?.label || '文档'
   })
 
-  // 上一篇/下一篇
   const prevDoc = computed(() => {
     if (!currentDoc.value) return null
     const flat = flattenDocsList(docsList.value)
@@ -203,26 +253,139 @@ export function useDocManager() {
     return idx >= 0 && idx < flat.length - 1 ? flat[idx + 1] : null
   })
 
-  // 搜索结果选中
   function handleSearchSelect(key) {
     expandParents(docsList.value, key)
+    saveExpandedState()
     loadDoc(key)
   }
 
-  // URL 路由（popstate / 初始加载）
+  // ===== 编辑模式 =====
+  function toggleEditMode() {
+    editMode.value = !editMode.value
+    sessionStorage.setItem('editMode', editMode.value)
+  }
+
+  watch(editMode, async (newVal, oldVal) => {
+    if (oldVal && !newVal && rawMarkdown.value && currentDoc.value) {
+      await renderMarkdown(rawMarkdown.value, currentDoc.value, docsList.value)
+    }
+    if (newVal && rawMarkdown.value) {
+      extractTOCFromMarkdown(rawMarkdown.value, tocItems)
+    }
+  })
+
+  watch(rawMarkdown, (md) => {
+    if (editMode.value && md) {
+      extractTOCFromMarkdown(md, tocItems)
+    }
+  })
+
+  // ===== 轮询回调（供 useFileWatcher 调用） =====
+
+  // 树结构指纹，快速判断是否有变化
+  function treeFingerprint(items) {
+    const parts = []
+    for (const item of items) {
+      parts.push(item.key)
+      if (item.type === 'folder' && item.children) {
+        parts.push('{', treeFingerprint(item.children), '}')
+      }
+    }
+    return parts.join(',')
+  }
+
+  function getExpandedKeys(items) {
+    const keys = new Set()
+    for (const item of items) {
+      if (item.type === 'folder') {
+        if (item.expanded) keys.add(item.key)
+        if (item.children) for (const k of getExpandedKeys(item.children)) keys.add(k)
+      }
+    }
+    return keys
+  }
+
+  function applyExpandedState(items, expandedKeys) {
+    for (const item of items) {
+      if (item.type === 'folder') {
+        if (expandedKeys.has(item.key)) item.expanded = true
+        if (item.children) applyExpandedState(item.children, expandedKeys)
+      }
+    }
+  }
+
+  // 刷新文档列表（轮询回调 或 手动调用）
+  async function reloadDocsList(newTree) {
+    if (!newTree) {
+      // 手动调用（创建/删除/重命名后），强制拉取最新
+      docService.resetListEtag()
+      newTree = await docService.fetchDocsList()
+    }
+    // 结构没变就跳过
+    if (docsList.value.length > 0 && treeFingerprint(docsList.value) === treeFingerprint(newTree)) {
+      return
+    }
+    // 保存展开状态 → 替换 → 恢复
+    const expandedKeys = getExpandedKeys(docsList.value)
+    docsList.value = newTree
+    applyExpandedState(docsList.value, expandedKeys)
+    if (currentDoc.value) expandParents(docsList.value, currentDoc.value)
+    buildIndex(docsList.value)
+    saveExpandedState()
+  }
+
+  // 刷新当前文档内容（轮询回调）
+  let lastContentHash = ''
+  async function reloadCurrentDoc(content) {
+    if (!currentDoc.value) return
+    // 哈希比对，内容没变就跳过
+    let hash = 0
+    for (let i = 0; i < content.length; i++) {
+      hash = ((hash << 5) - hash + content.charCodeAt(i)) | 0
+    }
+    const hashStr = String(hash)
+    if (hashStr === lastContentHash) return
+    lastContentHash = hashStr
+    rawMarkdown.value = content
+    // 编辑模式下只更新 rawMarkdown（编辑器组件会自行比对内容决定是否刷新）
+    if (editMode.value) return
+    await renderMarkdown(content, currentDoc.value, docsList.value)
+  }
+
+  // ===== 写操作 =====
+  async function saveDocContent({ path: filePath, content }) {
+    try {
+      const ok = await docService.saveDoc(filePath, content)
+      if (ok) {
+        rawMarkdown.value = content
+        if (!editMode.value) {
+          await renderMarkdown(content, currentDoc.value, docsList.value)
+        }
+        return true
+      }
+      return false
+    } catch (e) {
+      console.error('保存失败:', e)
+      return false
+    }
+  }
+
+  function getCurrentDocPath() {
+    return currentDocFilePath.value
+  }
+
+  // ===== URL 路由 =====
   async function loadFromUrl() {
     const pathname = window.location.pathname.replace(/^\//, '')
     const anchor = window.location.hash.replace('#', '')
     const savedScroll = history.state?.scrollTop
     if (!pathname) {
       if (currentDoc.value) {
-        // 浏览器回退到首页，不操作 history
         goHome({ isPopstate: true })
       } else if (docsList.value.length === 0) {
         showWelcome.value = false
         renderMarkdown('# 当前目录没有 Markdown 文档\n\n请在当前目录下添加 `.md` 文件，然后刷新页面。')
       } else {
-        // 优先定位到 README，没有则定位到第一篇文档
         const readme = findReadmeDoc(docsList.value)
         const target = readme || findFirstDoc(docsList.value)
         if (target) {
@@ -234,11 +397,9 @@ export function useDocManager() {
     }
     const doc = findDocByHash(docsList.value, pathname, docHash)
     if (!doc) return
-    // 同一文档内的锚点变化（含回退）
     if (doc.key === currentDoc.value) {
       await nextTick()
       if (savedScroll != null) {
-        // 有保存的滚动位置，直接恢复（回退场景）
         const contentEl = document.querySelector('.content')
         if (contentEl) contentEl.scrollTo({ top: savedScroll, behavior: 'smooth' })
       } else if (anchor) {
@@ -250,6 +411,7 @@ export function useDocManager() {
       return
     }
     expandParents(docsList.value, doc.key)
+    saveExpandedState()
     await loadDoc(doc.key, { replace: true, keepState: savedScroll != null, anchor: anchor ? decodeURIComponent(anchor) : '' })
     if (savedScroll != null) {
       await nextTick()
@@ -260,38 +422,133 @@ export function useDocManager() {
     }
   }
 
+  // ===== 文档管理操作 =====
+  async function createDoc({ parentKey, name, type }) {
+    const relativePath = parentKey ? `${parentKey}/${name}` : name
+    const apiPath = type === 'file' ? `${relativePath}.md` : relativePath
+    try {
+      await docService.createDoc(apiPath, type)
+      await reloadDocsList()
+      if (parentKey) expandParents(docsList.value, relativePath)
+      if (type === 'file') await loadDoc(relativePath)
+      return { ok: true }
+    } catch (e) {
+      return { ok: false, message: e.message }
+    }
+  }
+
+  async function renameDoc(item, newName) {
+    const parts = item.key.split('/')
+    parts[parts.length - 1] = newName
+    const newKey = parts.join('/')
+    const oldPath = item.type === 'file' ? `${item.key}.md` : item.key
+    const newPath = item.type === 'file' ? `${newKey}.md` : newKey
+    try {
+      await docService.renameDoc(oldPath, newPath)
+      const wasCurrentDoc = item.type === 'file' && item.key === currentDoc.value
+      const wasInFolder = item.type === 'folder' && currentDoc.value.startsWith(item.key + '/')
+      await reloadDocsList()
+      if (wasCurrentDoc) {
+        expandParents(docsList.value, newKey)
+        await loadDoc(newKey, { replace: true })
+      }
+      if (wasInFolder) {
+        const newDocKey = currentDoc.value.replace(item.key + '/', newKey + '/')
+        expandParents(docsList.value, newDocKey)
+        await loadDoc(newDocKey, { replace: true })
+      }
+      return { ok: true }
+    } catch (e) {
+      return { ok: false, message: e.message }
+    }
+  }
+
+  async function deleteDoc(item) {
+    const apiPath = item.type === 'file' ? `${item.key}.md` : item.key
+    try {
+      await docService.deleteDoc(apiPath)
+      if (item.type === 'file' && item.key === currentDoc.value) goHome()
+      if (item.type === 'folder' && currentDoc.value.startsWith(item.key + '/')) goHome()
+      await reloadDocsList()
+      return { ok: true }
+    } catch (e) {
+      return { ok: false, message: e.message }
+    }
+  }
+
+  // ===== 拖拽排序 =====
+  function calcPadWidth(count) { return count < 100 ? 2 : String(count - 1).length }
+  function orderPrefix(index, padWidth) { return String(index).padStart(padWidth, '0') }
+  function stripPrefix(name) { return name.replace(/^\d+-/, '') }
+
+  function collectReorderItems(items, parentPath = '') {
+    const result = []
+    const padWidth = calcPadWidth(items.length)
+    items.forEach((item, index) => {
+      const prefix = orderPrefix(index, padWidth)
+      const pureName = stripPrefix(item.label || item.key.split('/').pop())
+      const newName = `${prefix}-${pureName}`
+      const oldName = item.key.split('/').pop()
+      const oldFsName = item.type === 'file' ? `${oldName}.md` : oldName
+      const newFsName = item.type === 'file' ? `${newName}.md` : newName
+      const oldPath = parentPath ? `${parentPath}/${oldFsName}` : oldFsName
+      const newPath = parentPath ? `${parentPath}/${newFsName}` : newFsName
+      if (oldPath !== newPath) result.push({ oldPath, newPath })
+    })
+    return result
+  }
+
+  function collectAllReorderLevels(items, parentPath = '') {
+    const levels = []
+    items.forEach((item) => {
+      if (item.type === 'folder' && item.children) {
+        const folderPath = parentPath ? `${parentPath}/${item.key.split('/').pop()}` : item.key.split('/').pop()
+        levels.push(...collectAllReorderLevels(item.children, folderPath))
+      }
+    })
+    const currentLevelItems = collectReorderItems(items, parentPath)
+    if (currentLevelItems.length > 0) levels.push(currentLevelItems)
+    return levels
+  }
+
+  async function reorderDocs() {
+    const levels = collectAllReorderLevels(docsList.value)
+    if (levels.length === 0) return { ok: true }
+    const currentPureName = currentDoc.value ? stripOrderPrefix(currentDoc.value) : ''
+    try {
+      for (const levelItems of levels) {
+        if (levelItems.length === 0) continue
+        await docService.reorderDocs(levelItems)
+      }
+      await reloadDocsList()
+      if (currentPureName) {
+        const flat = flattenDocsList(docsList.value)
+        const match = flat.find(d => stripOrderPrefix(d.key) === currentPureName)
+        if (match) {
+          expandParents(docsList.value, match.key)
+          await loadDoc(match.key, { replace: true })
+        }
+      }
+      return { ok: true }
+    } catch (e) {
+      console.error('重编号失败:', e)
+      return { ok: false, message: e.message }
+    }
+  }
+
+  // ===== 导出 =====
   return {
-    // 状态
-    docsList,
-    currentDoc,
-    currentDocTitle,
-    showWelcome,
-    htmlContent,
-    tocItems,
-    // 滚动
-    scrollProgress,
-    showBackToTop,
-    activeHeading,
-    handleScroll,
-    scrollToHeading,
-    scrollToTop,
-    // 文档操作
-    loadDocsList,
-    loadFromUrl,
-    goHome,
-    loadDoc,
-    loadFirstDoc,
-    handleDocSelect,
-    handleContentClick,
-    handleSearchSelect,
-    // 文件夹操作
-    toggleFolder,
-    onExpandAll,
-    onCollapseAll,
-    // 导航
-    prevDoc,
-    nextDoc,
-    // 工具
+    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: saveDocContent, getCurrentDocPath,
+    toggleFolder, onExpandAll, onCollapseAll,
+    prevDoc, nextDoc,
+    createDoc, deleteDoc, renameDoc, reorderDocs,
     docHash
   }
 }

package/src/composables/useDocTree.js

@@ -55,7 +55,11 @@ export function findDocByHash(items, hash, docHash) {
 // 展开文档所在的所有父级文件夹
 export function expandParents(items, targetKey) {
   for (const item of items) {
-    if (item.type === 'file' && item.key === targetKey) return true
+    if (item.key === targetKey) {
+      // 如果目标本身是文件夹，也展开它
+      if (item.type === 'folder') item.expanded = true
+      return true
+    }
     if (item.type === 'folder' && item.children) {
       if (expandParents(item.children, targetKey)) {
         item.expanded = true
@@ -94,3 +98,54 @@ export function collapseAll(items) {
     }
   })
 }
+
+// 查找节点的父级列表（用于插入/删除操作）
+// 返回 { parent: 父节点children数组, index: 节点在数组中的索引 }
+export function findParent(items, targetKey) {
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].key === targetKey) {
+      return { parent: items, index: i }
+    }
+    if (items[i].type === 'folder' && items[i].children) {
+      const found = findParent(items[i].children, targetKey)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 查找文件夹节点
+export function findFolder(items, key) {
+  for (const item of items) {
+    if (item.type === 'folder' && item.key === key) return item
+    if (item.type === 'folder' && item.children) {
+      const found = findFolder(item.children, key)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 收集所有已展开文件夹的 key
+export function collectExpandedKeys(items) {
+  const keys = new Set()
+  for (const item of items) {
+    if (item.type === 'folder') {
+      if (item.expanded) keys.add(item.key)
+      if (item.children) {
+        for (const k of collectExpandedKeys(item.children)) keys.add(k)
+      }
+    }
+  }
+  return keys
+}
+
+// 根据 key 集合恢复展开状态
+export function restoreExpandedKeys(items, keys) {
+  for (const item of items) {
+    if (item.type === 'folder') {
+      if (keys.has(item.key)) item.expanded = true
+      if (item.children) restoreExpandedKeys(item.children, keys)
+    }
+  }
+}