md2ui 1.0.2 → 1.0.7

package/README.md

@@ -1,5 +1,7 @@
 # md2ui
 
+[![GitHub](https://img.shields.io/badge/GitHub-devsneed%2Fmd2ui-blue?logo=github)](https://github.com/devsneed/md2ui)
+
 一个轻量级的文档渲染系统，将本地 Markdown 文档转换为美观的 HTML 页面。
 
 ## 核心特性
@@ -63,7 +65,7 @@ your-docs/
 
 ```bash
 # 克隆项目
-git clone https://github.com/user/md2ui.git
+git clone https://github.com/devsneed/md2ui.git
 cd md2ui
 
 # 安装依赖
@@ -81,8 +83,8 @@ pnpm dev
 ### 本地测试 CLI
 
 ```bash
-# 链接到全局
-pnpm link --global
+# 安装到全局
+npm install -g .
 
 # 在任意目录测试
 cd /path/to/test/docs

package/bin/md2ui.js

@@ -10,16 +10,19 @@ const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 const pkgRoot = resolve(__dirname, '..')
 
+// 导入共享配置
+const { config } = await import(resolve(pkgRoot, 'src/config.js'))
+
 // 用户执行命令的目录
 const userDir = process.cwd()
 
 // 解析命令行参数
 const args = process.argv.slice(2)
-let port = 3000
+let port = config.defaultPort
 
 for (let i = 0; i < args.length; i++) {
   if (args[i] === '-p' || args[i] === '--port') {
-    port = parseInt(args[i + 1]) || 3000
+    port = parseInt(args[i + 1]) || config.defaultPort
   }
 }
 
@@ -70,7 +73,7 @@ function scanDocs(dir, basePath = '', level = 0) {
           order: match ? parseInt(match[1]) : 999,
           type: 'folder',
           level,
-          expanded: true,
+          expanded: config.folderExpanded,
           children
         })
       }

package/package.json

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

package/src/App.vue

@@ -2,7 +2,15 @@
   <div class="container">
     <aside v-if="!sidebarCollapsed" class="sidebar" :style="{ width: sidebarWidth + 'px' }">
       <div class="logo">
-        <Logo @go-home="loadReadme" />
+        <div class="logo-group">
+          <Logo @go-home="loadFirstDoc" />
+          <a href="https://github.com/devsneed/md2ui" target="_blank" class="github-link" title="GitHub">
+            <Github :size="14" />
+          </a>
+        </div>
+        <button class="sidebar-toggle" @click="sidebarCollapsed = true" title="收起导航">
+          <PanelLeftClose :size="16" />
+        </button>
       </div>
       <nav class="nav-menu">
         <div class="nav-section">
@@ -30,20 +38,14 @@
     <button v-if="sidebarCollapsed" class="expand-btn expand-btn-left" @click="sidebarCollapsed = false" title="展开导航">
       <PanelLeftOpen :size="16" />
     </button>
-    <button v-else class="collapse-btn collapse-btn-left" @click="sidebarCollapsed = true" title="收起导航">
-      <PanelLeftClose :size="16" />
-    </button>
     <main class="content" @scroll="handleScroll" @click="handleContentClick">
       <article class="markdown-content" v-html="htmlContent"></article>
     </main>
     <div v-if="!tocCollapsed && tocItems.length > 0" class="resizer resizer-right" @mousedown="startResize('right', $event)"></div>
-    <TableOfContents :tocItems="tocItems" :activeHeading="activeHeading" :collapsed="tocCollapsed" :width="tocWidth" @scroll-to="scrollToHeading" />
+    <TableOfContents :tocItems="tocItems" :activeHeading="activeHeading" :collapsed="tocCollapsed" :width="tocWidth" @toggle="tocCollapsed = !tocCollapsed" @scroll-to="scrollToHeading" />
     <button v-if="tocCollapsed && tocItems.length > 0" class="expand-btn expand-btn-right" @click="tocCollapsed = false" title="展开目录">
       <PanelRightOpen :size="16" />
     </button>
-    <button v-else-if="tocItems.length > 0" class="collapse-btn collapse-btn-right" @click="tocCollapsed = true" title="收起目录">
-      <PanelRightClose :size="16" />
-    </button>
     <transition name="fade">
       <button v-if="showBackToTop" class="back-to-top" @click="scrollToTop" title="返回顶部">
         <ArrowUp :size="20" />
@@ -55,8 +57,9 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { ChevronsDownUp, ChevronsUpDown, ArrowUp, PanelLeftOpen, PanelLeftClose, PanelRightOpen, PanelRightClose } from 'lucide-vue-next'
+import { ref, onMounted, nextTick } from 'vue'
+import { ChevronsDownUp, ChevronsUpDown, ArrowUp, PanelLeftOpen, PanelLeftClose, PanelRightOpen, Github } from 'lucide-vue-next'
+import MD5 from 'crypto-js/md5'
 import Logo from './components/Logo.vue'
 import TreeNode from './components/TreeNode.vue'
 import TableOfContents from './components/TableOfContents.vue'
@@ -74,28 +77,53 @@ const zoomVisible = ref(false)
 const zoomContent = ref('')
 
 const { htmlContent, tocItems, renderMarkdown } = useMarkdown()
-const { scrollProgress, showBackToTop, activeHeading, handleScroll, scrollToHeading, scrollToTop } = useScroll()
+const { scrollProgress, showBackToTop, activeHeading, handleScroll: _handleScroll, scrollToHeading: _scrollToHeading, scrollToTop } = useScroll()
+
+// 包装滚动处理，同步锚点到 URL
+function handleScroll(e) {
+  _handleScroll(e)
+  // 滚动时更新 URL 锚点
+  if (activeHeading.value) {
+    updateHash(activeHeading.value)
+  } else {
+    updateHash('')
+  }
+}
+
+// 包装目录点击，同步锚点到 URL
+function scrollToHeading(id) {
+  _scrollToHeading(id)
+  updateHash(id)
+}
 const { sidebarWidth, tocWidth, startResize } = useResize()
 
 async function loadDocsList() {
   docsList.value = await getDocsList()
 }
 
-async function loadReadme() {
-  currentDoc.value = ''
-  try {
-    const response = await fetch('/README.md')
-    if (response.ok) {
-      const content = await response.text()
-      await renderMarkdown(content)
-    }
-  } catch (error) {
-    console.error('加载首页失败:', error)
+// 加载第一个文档
+function loadFirstDoc() {
+  const firstDoc = findFirstDoc(docsList.value)
+  if (firstDoc) {
+    loadDoc(firstDoc.key)
   }
 }
 
+// 根据 key 生成 hash
+function docHash(key) {
+  return MD5(key).toString()
+}
+
+// 更新 URL hash（文档hash + 可选锚点）
+function updateHash(anchor) {
+  if (!currentDoc.value) return
+  const base = docHash(currentDoc.value)
+  window.location.hash = anchor ? `${base}/${anchor}` : base
+}
+
 async function loadDoc(key) {
   currentDoc.value = key
+  updateHash('')
   const doc = findDoc(docsList.value, key)
   if (!doc) return
   try {
@@ -164,8 +192,95 @@ function handleContentClick(event) {
   }
 }
 
+// 查找第一个文档
+function findFirstDoc(items) {
+  for (const item of items) {
+    if (item.type === 'file') return item
+    if (item.type === 'folder' && item.children) {
+      const found = findFirstDoc(item.children)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 显示无文档提示
+function showEmptyMessage() {
+  renderMarkdown(`# 当前目录没有 Markdown 文档
+
+请在当前目录下添加 \`.md\` 文件，然后刷新页面。
+
+## 文档组织示例
+
+\`\`\`
+your-docs/
+├── 00-快速开始.md
+├── 01-功能特性.md
+└── 02-进阶指南/
+    ├── 01-目录结构.md
+    └── 02-自定义配置.md
+\`\`\`
+`)
+}
+
+// 根据 hash 查找文档
+function findDocByHash(items, hash) {
+  for (const item of items) {
+    if (item.type === 'file' && docHash(item.key) === hash) return item
+    if (item.type === 'folder' && item.children) {
+      const found = findDocByHash(item.children, hash)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 展开文档所在的所有父级文件夹
+function expandParents(items, targetKey) {
+  for (const item of items) {
+    if (item.type === 'file' && item.key === targetKey) return true
+    if (item.type === 'folder' && item.children) {
+      if (expandParents(item.children, targetKey)) {
+        item.expanded = true
+        return true
+      }
+    }
+  }
+  return false
+}
+
 onMounted(async () => {
   await loadDocsList()
-  await loadReadme()
+  
+  const rawHash = window.location.hash.replace('#', '')
+  const [hash, anchor] = rawHash.includes('/') 
+    ? [rawHash.split('/')[0], rawHash.split('/').slice(1).join('/')]
+    : [rawHash, '']
+  
+  if (hash) {
+    const doc = findDocByHash(docsList.value, hash)
+    if (doc) {
+      expandParents(docsList.value, doc.key)
+      await loadDoc(doc.key)
+      // 恢复锚点位置
+      if (anchor) {
+        await nextTick()
+        // 等待 DOM 渲染完成后再滚动
+        setTimeout(() => {
+          _scrollToHeading(anchor)
+          updateHash(anchor)
+        }, 100)
+      }
+      return
+    }
+  }
+  
+  // 没有 hash 或找不到对应文档，加载第一个
+  const firstDoc = findFirstDoc(docsList.value)
+  if (firstDoc) {
+    await loadDoc(firstDoc.key)
+  } else {
+    showEmptyMessage()
+  }
 })
 </script>

package/src/api/docs.js

@@ -1,3 +1,5 @@
+import { config } from '../config.js'
+
 // 构建目录树结构（支持多层嵌套）
 function buildTree(files) {
   const root = { children: [] }
@@ -23,7 +25,7 @@ function buildTree(files) {
           order: match ? parseInt(match[1]) : 999,
           level: i,
           children: [],
-          expanded: false
+          expanded: config.folderExpanded
         }
         currentLevel.children.push(folder)
       }

package/src/components/ImageZoom.vue

@@ -112,8 +112,10 @@ function handleOverlayClick(event) {
 function handleWheel(event) {
   event.preventDefault()
   
-  const delta = event.deltaY > 0 ? -scaleStep : scaleStep
-  const newScale = Math.max(minScale, Math.min(maxScale, scale.value + delta))
+  // 使用比例缩放，每次滚轮缩放 2%，体感更平滑
+  const zoomFactor = 0.02
+  const direction = event.deltaY > 0 ? -1 : 1
+  const newScale = Math.max(minScale, Math.min(maxScale, scale.value * (1 + direction * zoomFactor)))
   
   if (newScale !== scale.value) {
     scale.value = newScale

package/src/components/Logo.vue

@@ -21,15 +21,15 @@ defineEmits(['go-home'])
   gap: 10px;
   color: #111827;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: all 0.15s;
 }
 
 .logo-container:hover {
-  opacity: 0.7;
+  color: #3eaf7c;
 }
 
 .logo-container:active {
-  opacity: 0.5;
+  transform: scale(0.96);
 }
 
 .logo-icon {

package/src/components/TableOfContents.vue

@@ -1,8 +1,13 @@
 <template>
   <aside class="toc-sidebar" v-if="tocItems.length > 0 && !collapsed" :style="{ width: width + 'px' }">
     <div class="toc-header">
-      <List :size="16" />
-      <span>目录</span>
+      <div class="toc-title">
+        <List :size="16" />
+        <span>目录</span>
+      </div>
+      <button class="toc-toggle" @click="$emit('toggle')" title="收起目录">
+        <PanelRightClose :size="16" />
+      </button>
     </div>
     <nav class="toc-nav">
       <a 
@@ -19,7 +24,7 @@
 </template>
 
 <script setup>
-import { List } from 'lucide-vue-next'
+import { List, PanelRightClose } from 'lucide-vue-next'
 
 defineProps({
   tocItems: {
@@ -40,5 +45,5 @@ defineProps({
   }
 })
 
-defineEmits(['scroll-to'])
+defineEmits(['scroll-to', 'toggle'])
 </script>

package/src/components/TreeNode.vue

@@ -7,12 +7,14 @@
       :class="{ expanded: item.expanded }"
       :style="{ paddingLeft: `${20 + item.level * 16}px` }"
       @click="$emit('toggle', item)"
+      @mouseenter="showTooltip($event, item.label)"
+      @mouseleave="hideTooltip"
     >
       <ChevronRight v-if="!item.expanded" class="nav-icon chevron-icon" :size="16" />
       <ChevronDown v-else class="nav-icon chevron-icon" :size="16" />
       <Folder v-if="!item.expanded" class="nav-icon folder-icon" :size="16" />
       <FolderOpen v-else class="nav-icon folder-icon" :size="16" />
-      <span>{{ item.label }}</span>
+      <span class="nav-label">{{ item.label }}</span>
     </div>
     
     <!-- 递归渲染子节点 -->
@@ -34,9 +36,11 @@
       :class="{ active: currentDoc === item.key }"
       :style="{ paddingLeft: `${20 + item.level * 16}px` }"
       @click="$emit('select', item.key)"
+      @mouseenter="showTooltip($event, item.label)"
+      @mouseleave="hideTooltip"
     >
       <FileText class="nav-icon file-icon" :size="16" />
-      <span>{{ item.label }}</span>
+      <span class="nav-label">{{ item.label }}</span>
     </div>
   </div>
 </template>
@@ -56,6 +60,55 @@ defineProps({
 })
 
 defineEmits(['toggle', 'select'])
+
+let tooltipEl = null
+
+function showTooltip(event, text) {
+  hideTooltip()
+  
+  const target = event.currentTarget
+  const label = target.querySelector('.nav-label')
+  
+  // 只有文字被截断时才显示 tooltip
+  if (label && label.scrollWidth <= label.clientWidth) return
+  
+  tooltipEl = document.createElement('div')
+  tooltipEl.className = 'nav-tooltip'
+  tooltipEl.textContent = text
+  tooltipEl.style.cssText = `
+    position: fixed;
+    background: #1f2328;
+    color: #fff;
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    z-index: 9999;
+    max-width: 300px;
+    word-break: break-all;
+    user-select: text;
+    cursor: text;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  `
+  
+  document.body.appendChild(tooltipEl)
+  
+  const rect = target.getBoundingClientRect()
+  tooltipEl.style.left = `${rect.right + 8}px`
+  tooltipEl.style.top = `${rect.top}px`
+  
+  // 防止超出屏幕右侧
+  const tooltipRect = tooltipEl.getBoundingClientRect()
+  if (tooltipRect.right > window.innerWidth - 10) {
+    tooltipEl.style.left = `${rect.left - tooltipRect.width - 8}px`
+  }
+}
+
+function hideTooltip() {
+  if (tooltipEl) {
+    tooltipEl.remove()
+    tooltipEl = null
+  }
+}
 </script>
 
 

package/src/config.js

@@ -0,0 +1,8 @@
+// 共享配置 - bin/md2ui.js 和 src/api/docs.js 共用
+export const config = {
+  // 默认端口
+  defaultPort: 3000,
+  
+  // 文件夹默认展开状态
+  folderExpanded: false
+}