md2ui 1.0.7 → 1.0.9

package/src/App.vue

@@ -1,286 +1,142 @@
 <template>
-  <div class="container">
-    <aside v-if="!sidebarCollapsed" class="sidebar" :style="{ width: sidebarWidth + 'px' }">
-      <div class="logo">
-        <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">
-          <span>文档目录</span>
-          <div class="nav-actions">
-            <button class="action-btn" @click="expandAll" title="全部展开">
-              <ChevronsDownUp :size="14" />
-            </button>
-            <button class="action-btn" @click="collapseAll" title="全部收起">
-              <ChevronsUpDown :size="14" />
-            </button>
-          </div>
-        </div>
-        <TreeNode
-          v-for="item in docsList"
-          :key="item.key"
-          :item="item"
-          :currentDoc="currentDoc"
-          @toggle="toggleFolder"
-          @select="loadDoc"
-        />
-      </nav>
-    </aside>
-    <div v-if="!sidebarCollapsed" class="resizer resizer-left" @mousedown="startResize('left', $event)"></div>
-    <button v-if="sidebarCollapsed" class="expand-btn expand-btn-left" @click="sidebarCollapsed = false" title="展开导航">
-      <PanelLeftOpen :size="16" />
+  <div class="container" :class="{ 'is-mobile': isMobile }">
+    <!-- 移动端顶栏 -->
+    <MobileHeader
+      v-if="isMobile"
+      @open-drawer="mobileDrawerOpen = true"
+      @go-home="goHome"
+      @open-search="openSearch"
+    />
+    <!-- 桌面端顶栏 -->
+    <TopBar
+      v-if="!isMobile"
+      @select-search="handleSearchSelect"
+      @go-home="goHome"
+    />
+    <!-- 移动端遮罩 -->
+    <transition name="fade">
+      <div v-if="isMobile && mobileDrawerOpen" class="drawer-overlay" @click="mobileDrawerOpen = false"></div>
+    </transition>
+    <!-- 主体区域（侧边栏 + 内容 + TOC） -->
+    <div class="main-body">
+    <!-- 侧边栏 -->
+    <AppSidebar
+      v-if="!isMobile ? !sidebarCollapsed : true"
+      :docsList="docsList"
+      :currentDoc="currentDoc"
+      :isMobile="isMobile"
+      :drawerOpen="mobileDrawerOpen"
+      :width="sidebarWidth"
+      @go-home="goHome"
+      @close-drawer="mobileDrawerOpen = false"
+      @collapse="sidebarCollapsed = true"
+      @expand-all="onExpandAll"
+      @collapse-all="onCollapseAll"
+      @toggle-folder="toggleFolder"
+      @select-doc="handleDocSelect"
+    />
+    <!-- 左侧拖拽条 & 展开按钮（桌面端） -->
+    <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>
-    <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" @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" />
+    <!-- 内容区 -->
+    <DocContent
+      :showWelcome="showWelcome"
+      :htmlContent="htmlContent"
+      :prevDoc="prevDoc"
+      :nextDoc="nextDoc"
+      @scroll="handleScroll"
+      @content-click="onContentClick"
+      @start="loadFirstDoc"
+      @load-doc="loadDoc"
+    />
+    <!-- 桌面端 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 })" />
+    <button v-if="!isMobile && tocCollapsed && tocItems.length > 0" class="expand-btn expand-btn-right" @click="tocCollapsed = false" title="展开目录">
+      <ChevronLeft :size="14" />
     </button>
+    </div>
+    <!-- 移动端 TOC -->
+    <MobileToc
+      v-if="isMobile"
+      :tocItems="tocItems"
+      :activeHeading="activeHeading"
+      :open="mobileTocOpen"
+      :showWelcome="showWelcome"
+      @toggle="mobileTocOpen = !mobileTocOpen"
+      @close="mobileTocOpen = false"
+      @scroll-to="(id) => { scrollToHeading(id, { push: true }); mobileTocOpen = false }"
+    />
+    <!-- 返回顶部 -->
     <transition name="fade">
       <button v-if="showBackToTop" class="back-to-top" @click="scrollToTop" title="返回顶部">
         <ArrowUp :size="20" />
         <span class="progress-text">{{ scrollProgress }}%</span>
       </button>
     </transition>
+    <!-- 图片放大 -->
     <ImageZoom :visible="zoomVisible" :imageContent="zoomContent" @close="zoomVisible = false" />
+
   </div>
 </template>
 
 <script setup>
-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 { ref, onMounted } 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 TableOfContents from './components/TableOfContents.vue'
+import MobileToc from './components/MobileToc.vue'
 import ImageZoom from './components/ImageZoom.vue'
-import { getDocsList } from './api/docs.js'
-import { useMarkdown } from './composables/useMarkdown.js'
-import { useScroll } from './composables/useScroll.js'
+import { useDocManager } from './composables/useDocManager.js'
 import { useResize } from './composables/useResize.js'
 
-const docsList = ref([])
-const currentDoc = ref('')
+import { useSearch } from './composables/useSearch.js'
+import { useMobile } from './composables/useMobile.js'
+
+
+// UI 状态
 const sidebarCollapsed = ref(false)
 const tocCollapsed = ref(false)
 const zoomVisible = ref(false)
 const zoomContent = ref('')
 
-const { htmlContent, tocItems, renderMarkdown } = useMarkdown()
-const { scrollProgress, showBackToTop, activeHeading, handleScroll: _handleScroll, scrollToHeading: _scrollToHeading, scrollToTop } = useScroll()
+// composables
+const {
+  docsList, currentDoc, showWelcome, htmlContent, tocItems,
+  scrollProgress, showBackToTop, activeHeading,
+  handleScroll, scrollToHeading, scrollToTop,
+  loadDocsList, loadFromUrl, goHome, loadDoc, loadFirstDoc,
+  handleDocSelect, handleContentClick, handleSearchSelect,
+  toggleFolder, onExpandAll, onCollapseAll,
+  prevDoc, nextDoc
+} = useDocManager()
 
-// 包装滚动处理，同步锚点到 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()
-}
-
-// 加载第一个文档
-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
-}
+const { openSearch } = useSearch()
+const { isMobile, mobileDrawerOpen, mobileTocOpen } = useMobile()
 
-async function loadDoc(key) {
-  currentDoc.value = key
-  updateHash('')
-  const doc = findDoc(docsList.value, key)
-  if (!doc) return
-  try {
-    const response = await fetch(doc.path)
-    if (response.ok) {
-      const content = await response.text()
-      await renderMarkdown(content)
-      const contentEl = document.querySelector('.content')
-      if (contentEl) contentEl.scrollTop = 0
-    }
-  } catch (error) {
-    console.error('加载文档失败:', error)
-  }
-}
 
-function findDoc(items, key) {
-  for (const item of items) {
-    if (item.type === 'file' && item.key === key) return item
-    if (item.type === 'folder' && item.children) {
-      const found = findDoc(item.children, key)
-      if (found) return found
+// 内容区点击：委托给 docManager，图片放大回调在这里处理
+function onContentClick(event) {
+  handleContentClick(event, {
+    onZoom(content) {
+      zoomContent.value = content
+      zoomVisible.value = true
     }
-  }
-  return null
+  })
 }
 
-function toggleFolder(item) {
-  item.expanded = !item.expanded
-}
-
-function expandAll() {
-  function expand(items) {
-    items.forEach(item => {
-      if (item.type === 'folder') {
-        item.expanded = true
-        if (item.children) expand(item.children)
-      }
-    })
-  }
-  expand(docsList.value)
-}
-
-function collapseAll() {
-  function collapse(items) {
-    items.forEach(item => {
-      if (item.type === 'folder') {
-        item.expanded = false
-        if (item.children) collapse(item.children)
-      }
-    })
-  }
-  collapse(docsList.value)
-}
-
-function handleContentClick(event) {
-  const target = event.target
-  if (target.tagName === 'IMG' && target.classList.contains('zoomable-image')) {
-    zoomContent.value = `<img src="${target.src}" alt="${target.alt || ''}" style="max-width: 100%; height: auto;" />`
-    zoomVisible.value = true
-    return
-  }
-  const mermaidEl = target.closest('.mermaid')
-  if (mermaidEl && mermaidEl.classList.contains('zoomable-image')) {
-    zoomContent.value = mermaidEl.innerHTML
-    zoomVisible.value = true
-  }
-}
-
-// 查找第一个文档
-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
-}
+// 全局快捷键
+window.addEventListener('popstate', () => loadFromUrl())
 
 onMounted(async () => {
   await loadDocsList()
-  
-  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()
-  }
+  await loadFromUrl()
 })
 </script>

package/src/api/docs.js

@@ -64,7 +64,8 @@ export async function getDocsList() {
 
   // 开发模式：扫描 public/docs 目录
   try {
-    const modules = import.meta.glob('/public/docs/**/*.md')
+    // 排除隐藏目录和隐藏文件（以 . 开头的路径段）
+    const modules = import.meta.glob('/public/docs/**/*.md', { eager: false })
     const files = []
     
     for (const path in modules) {

package/src/components/AppSidebar.vue

@@ -0,0 +1,102 @@
+<template>
+  <aside
+    class="sidebar"
+    :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">
+        <button v-if="isMobile" class="sidebar-toggle" @click="$emit('close-drawer')" title="关闭菜单">
+          <X :size="16" />
+        </button>
+        <button v-else class="sidebar-toggle" @click="$emit('collapse')" title="收起导航">
+          <ChevronLeft :size="14" />
+        </button>
+      </div>
+    </div>
+    <nav class="nav-menu">
+      <div class="nav-section">
+        <span>文档目录</span>
+        <div class="nav-actions">
+          <button class="action-btn" @click="$emit('expand-all')" title="全部展开">
+            <ChevronsDownUp :size="14" />
+          </button>
+          <button class="action-btn" @click="$emit('collapse-all')" title="全部收起">
+            <ChevronsUpDown :size="14" />
+          </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="过滤文档..."
+        />
+        <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)"
+      />
+      <div v-if="filterText && filteredDocs.length === 0" class="nav-filter-empty">
+        没有匹配的文档
+      </div>
+    </nav>
+  </aside>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { ChevronLeft, X, ChevronsDownUp, ChevronsUpDown, Filter } from 'lucide-vue-next'
+import Logo from './Logo.vue'
+import TreeNode from './TreeNode.vue'
+
+const props = defineProps({
+  docsList: { type: Array, default: () => [] },
+  currentDoc: { type: String, default: '' },
+  isMobile: { type: Boolean, default: false },
+  drawerOpen: { type: Boolean, default: false },
+  width: { type: Number, default: 320 }
+})
+
+defineEmits([
+  'go-home', 'close-drawer', 'collapse',
+  'expand-all', 'collapse-all',
+  'toggle-folder', 'select-doc'
+])
+
+const filterText = ref('')
+
+// 递归过滤文档树：保留匹配的文件和包含匹配文件的文件夹
+function filterTree(items, keyword) {
+  if (!keyword) return items
+  const lower = keyword.toLowerCase()
+  const result = []
+  for (const item of items) {
+    if (item.type === 'file') {
+      if (item.label.toLowerCase().includes(lower) || item.key.toLowerCase().includes(lower)) {
+        result.push(item)
+      }
+    } else if (item.type === 'folder' && item.children) {
+      const children = filterTree(item.children, keyword)
+      if (children.length > 0) {
+        result.push({ ...item, children, expanded: true })
+      }
+    }
+  }
+  return result
+}
+
+const filteredDocs = computed(() => filterTree(props.docsList, filterText.value))
+</script>

package/src/components/DocContent.vue

@@ -0,0 +1,39 @@
+<template>
+  <main class="content" @scroll="$emit('scroll', $event)" @click="$emit('content-click', $event)">
+    <WelcomePage v-if="showWelcome" @start="$emit('start')" />
+    <template v-else>
+      <article class="markdown-content" v-html="htmlContent"></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 { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import WelcomePage from './WelcomePage.vue'
+
+defineProps({
+  showWelcome: { type: Boolean, default: true },
+  htmlContent: { type: String, default: '' },
+  prevDoc: { type: Object, default: null },
+  nextDoc: { type: Object, default: null }
+})
+
+defineEmits(['scroll', 'content-click', 'start', 'load-doc'])
+</script>

package/src/components/Logo.vue

@@ -18,18 +18,14 @@ defineEmits(['go-home'])
 .logo-container {
   display: flex;
   align-items: center;
-  gap: 10px;
-  color: #111827;
+  gap: 8px;
+  color: var(--color-text);
   cursor: pointer;
-  transition: all 0.15s;
+  transition: color 0.15s;
 }
 
 .logo-container:hover {
-  color: #3eaf7c;
-}
-
-.logo-container:active {
-  transform: scale(0.96);
+  color: var(--color-accent);
 }
 
 .logo-icon {
@@ -37,7 +33,7 @@ defineEmits(['go-home'])
 }
 
 .logo-text {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   letter-spacing: -0.02em;
 }

package/src/components/MobileHeader.vue

@@ -0,0 +1,20 @@
+<template>
+  <header class="mobile-header">
+    <button class="mobile-menu-btn" @click="$emit('open-drawer')" title="打开菜单">
+      <Menu :size="20" />
+    </button>
+    <Logo @go-home="$emit('go-home')" />
+    <div class="mobile-header-actions">
+      <button class="mobile-action-btn" @click="$emit('open-search')" title="搜索">
+        <Search :size="18" />
+      </button>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { Menu, Search } from 'lucide-vue-next'
+import Logo from './Logo.vue'
+
+defineEmits(['open-drawer', 'go-home', 'open-search'])
+</script>

package/src/components/MobileToc.vue

@@ -0,0 +1,40 @@
+<template>
+  <!-- 浮动按钮 -->
+  <button v-if="tocItems.length > 0 && !showWelcome" class="mobile-toc-fab" @click="$emit('toggle')" title="文档目录">
+    <List :size="20" />
+  </button>
+  <!-- 弹出面板 -->
+  <transition name="slide-up">
+    <div v-if="open && tocItems.length > 0" class="mobile-toc-panel">
+      <div class="mobile-toc-header">
+        <span>目录</span>
+        <button class="mobile-toc-close" @click="$emit('close')">
+          <X :size="16" />
+        </button>
+      </div>
+      <nav class="mobile-toc-nav">
+        <a
+          v-for="item in tocItems"
+          :key="item.id"
+          :class="['toc-item', `toc-level-${item.level}`, { active: activeHeading === item.id }]"
+          @click.prevent="$emit('scroll-to', item.id)"
+        >
+          {{ item.text }}
+        </a>
+      </nav>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import { List, X } from 'lucide-vue-next'
+
+defineProps({
+  tocItems: { type: Array, default: () => [] },
+  activeHeading: { type: String, default: '' },
+  open: { type: Boolean, default: false },
+  showWelcome: { type: Boolean, default: true }
+})
+
+defineEmits(['toggle', 'close', 'scroll-to'])
+</script>