md2ui 1.0.8 → 1.0.9

package/bin/build.js

@@ -232,7 +232,7 @@ async function renderMarkdownToHtml(markdown, currentDocKey, docsList) {
 
     // 纯锚点
     if (decoded.startsWith('#')) {
-      const anchor = slugger.slug(decoded.slice(1), false)
+      const anchor = decoded.slice(1)
       return `<a href="#${anchor}"${titleAttr}>${text}</a>`
     }
 
@@ -243,9 +243,8 @@ async function renderMarkdownToHtml(markdown, currentDocKey, docsList) {
       const doc = findDocInTree(docsList, targetKey)
       if (doc) {
         const hash = docHash(doc.key)
-        const anchorSlug = anchor ? slugger.slug(anchor, false) : ''
-        const url = anchorSlug ? `/${hash}.html#${anchorSlug}` : `/${hash}.html`
-        return `<a href="${url}" data-doc-key="${doc.key}"${anchorSlug ? ` data-anchor="${anchorSlug}"` : ''}${titleAttr}>${text}</a>`
+        const url = anchor ? `/${hash}.html#${anchor}` : `/${hash}.html`
+        return `<a href="${url}" data-doc-key="${doc.key}"${anchor ? ` data-anchor="${anchor}"` : ''}${titleAttr}>${text}</a>`
       }
       return `<a href="javascript:void(0)" class="broken-link" title="文档未找到: ${decoded}">${text}</a>`
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "md2ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "type": "module",
   "description": "将本地 Markdown 文档转换为美观的 HTML 页面",
   "author": "",

package/src/App.vue

@@ -53,7 +53,7 @@
     />
     <!-- 桌面端 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="scrollToHeading" />
+    <TableOfContents v-if="!isMobile" :tocItems="tocItems" :activeHeading="activeHeading" :collapsed="tocCollapsed" :width="tocWidth" @toggle="tocCollapsed = !tocCollapsed" @scroll-to="(id) => scrollToHeading(id, { push: true })" />
     <button v-if="!isMobile && tocCollapsed && tocItems.length > 0" class="expand-btn expand-btn-right" @click="tocCollapsed = false" title="展开目录">
       <ChevronLeft :size="14" />
     </button>
@@ -67,7 +67,7 @@
       :showWelcome="showWelcome"
       @toggle="mobileTocOpen = !mobileTocOpen"
       @close="mobileTocOpen = false"
-      @scroll-to="(id) => { scrollToHeading(id); mobileTocOpen = false }"
+      @scroll-to="(id) => { scrollToHeading(id, { push: true }); mobileTocOpen = false }"
     />
     <!-- 返回顶部 -->
     <transition name="fade">

package/src/composables/useDocManager.js

@@ -4,7 +4,7 @@ import { useMarkdown } from './useMarkdown.js'
 import { useSearch } from './useSearch.js'
 import { useScroll } from './useScroll.js'
 import { useMobile } from './useMobile.js'
-import { findDoc, findFirstDoc, findDocByHash, expandParents, flattenDocsList, expandAll, collapseAll } from './useDocTree.js'
+import { findDoc, findFirstDoc, findReadmeDoc, findDocByHash, expandParents, flattenDocsList, expandAll, collapseAll } from './useDocTree.js'
 
 // 等待内容区域图片加载完成
 async function waitForContentImages(timeoutMs = 3000) {
@@ -36,23 +36,38 @@ export function useDocManager() {
   } = useScroll()
   const { isMobile, mobileDrawerOpen } = useMobile()
 
-  // 滚动处理，同步锚点到 URL
+  // 获取当前滚动位置
+  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) {
-      history.replaceState(null, '', `/${docHash(currentDoc.value)}#${activeHeading.value}`)
+      history.replaceState(makeState(), '', `/${docHash(currentDoc.value)}#${activeHeading.value}`)
     }
   }
 
   // push: true 表示用户主动点击锚点，产生可回退的历史条目
   function scrollToHeading(id, { push = false } = {}) {
+    if (push && currentDoc.value) {
+      // 先把当前滚动位置写入即将被覆盖的历史条目
+      history.replaceState(makeState(), '', window.location.href)
+    }
     _scrollToHeading(id)
     if (currentDoc.value) {
       const url = `/${docHash(currentDoc.value)}#${id}`
       if (push) {
-        history.pushState(null, '', url)
+        history.pushState(makeState(), '', url)
       } else {
-        history.replaceState(null, '', url)
+        history.replaceState(makeState(), '', url)
       }
     }
   }
@@ -63,26 +78,33 @@ export function useDocManager() {
     buildIndex(docsList.value)
   }
 
-  // 回到欢迎页
-  function goHome() {
+  // 回到欢迎页（isPopstate: true 表示由浏览器回退触发，不操作 history）
+  function goHome({ isPopstate = false } = {}) {
     currentDoc.value = ''
     showWelcome.value = true
     htmlContent.value = ''
     tocItems.value = []
-    history.pushState(null, '', '/')
+    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 = '' } = {}) {
+  async function loadDoc(key, { replace = false, anchor = '', keepState = false } = {}) {
     currentDoc.value = key
     showWelcome.value = false
     const hash = docHash(key)
     const url = anchor ? `/${hash}#${anchor}` : `/${hash}`
     if (replace) {
-      history.replaceState(null, '', url)
+      // keepState: popstate 回退时保留浏览器已有的 state（含 scrollTop）
+      if (!keepState) history.replaceState(makeState(0), '', url)
     } else {
-      history.pushState(null, '', url)
+      // push 前先保存当前滚动位置到旧条目
+      history.replaceState(makeState(), '', window.location.href)
+      history.pushState(makeState(0), '', url)
     }
     const doc = findDoc(docsList.value, key)
     if (!doc) return
@@ -175,22 +197,35 @@ export function useDocManager() {
   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) {
-        // 从文档页回退到首页
-        goHome()
+        // 浏览器回退到首页，不操作 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) {
+          expandParents(docsList.value, target.key)
+          await loadDoc(target.key, { replace: true })
+        }
       }
       return
     }
     const doc = findDocByHash(docsList.value, pathname, docHash)
     if (!doc) return
-    // 同一文档内的锚点变化，只需滚动，无需重新加载
+    // 同一文档内的锚点变化（含回退）
     if (doc.key === currentDoc.value) {
-      if (anchor) {
-        await nextTick()
+      await nextTick()
+      if (savedScroll != null) {
+        // 有保存的滚动位置，直接恢复（回退场景）
+        const contentEl = document.querySelector('.content')
+        if (contentEl) contentEl.scrollTo({ top: savedScroll, behavior: 'smooth' })
+      } else if (anchor) {
         _scrollToHeading(decodeURIComponent(anchor))
       } else {
         const contentEl = document.querySelector('.content')
@@ -199,8 +234,14 @@ export function useDocManager() {
       return
     }
     expandParents(docsList.value, doc.key)
-    await loadDoc(doc.key, { replace: true, anchor: anchor ? decodeURIComponent(anchor) : '' })
-    if (anchor) { await nextTick(); await waitForContentImages(); _scrollToHeading(decodeURIComponent(anchor)) }
+    await loadDoc(doc.key, { replace: true, keepState: savedScroll != null, anchor: anchor ? decodeURIComponent(anchor) : '' })
+    if (savedScroll != null) {
+      await nextTick()
+      const contentEl = document.querySelector('.content')
+      if (contentEl) contentEl.scrollTo({ top: savedScroll })
+    } else if (anchor) {
+      await nextTick(); await waitForContentImages(); _scrollToHeading(decodeURIComponent(anchor))
+    }
   }
 
   return {

package/src/composables/useDocTree.js

@@ -24,6 +24,22 @@ export function findFirstDoc(items) {
   return null
 }
 
+// 查找 README 文档（不区分大小写，优先根目录）
+export function findReadmeDoc(items) {
+  // 先在当前层级找
+  for (const item of items) {
+    if (item.type === 'file' && /^readme$/i.test(item.key?.split('/').pop() || '')) return item
+  }
+  // 再递归子目录找
+  for (const item of items) {
+    if (item.type === 'folder' && item.children) {
+      const found = findReadmeDoc(item.children)
+      if (found) return found
+    }
+  }
+  return null
+}
+
 // 根据 hash 查找文档
 export function findDocByHash(items, hash, docHash) {
   for (const item of items) {

package/src/style.css

@@ -7,8 +7,8 @@
   --color-text: #1a1e1b;
   --color-text-secondary: #505856;
   --color-text-tertiary: #848e89;
-  --color-border: #d4dbd6;
-  --color-border-light: #e4e9e5;
+  --color-border: rgba(66, 184, 131, 0.25);
+  --color-border-light: rgba(66, 184, 131, 0.15);
   --color-accent: #42b883;
   --color-accent-hover: #359d6e;
   --color-accent-bg: rgba(66, 184, 131, 0.1);
@@ -18,7 +18,7 @@
   --color-code-border: transparent;
   --color-pre-bg: #ffffff;
   --color-pre-header: #f7f9f8;
-  --color-pre-border: #d4dbd6;
+  --color-pre-border: rgba(66, 184, 131, 0.25);
   --color-pre-text: #1a1e1b;
   --color-blockquote-border: #42b883;
   --color-blockquote-bg: rgba(66, 184, 131, 0.03);
@@ -1074,7 +1074,7 @@ body {
   align-items: center;
   padding: 8px 16px;
   background: var(--color-bg);
-  border-bottom: 2px solid var(--color-accent);
+  border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
   gap: 12px;
   z-index: 100;