md2ui 1.0.1 → 1.0.3

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.1",
+  "version": "1.0.3",
   "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" />
@@ -56,7 +58,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { ChevronsDownUp, ChevronsUpDown, ArrowUp, PanelLeftOpen, PanelLeftClose, PanelRightOpen, PanelRightClose } from 'lucide-vue-next'
+import { ChevronsDownUp, ChevronsUpDown, ArrowUp, PanelLeftOpen, PanelLeftClose, PanelRightOpen, Github } from 'lucide-vue-next'
 import Logo from './components/Logo.vue'
 import TreeNode from './components/TreeNode.vue'
 import TableOfContents from './components/TableOfContents.vue'
@@ -81,16 +83,11 @@ 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)
   }
 }
 
@@ -164,8 +161,46 @@ 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
+\`\`\`
+`)
+}
+
 onMounted(async () => {
   await loadDocsList()
-  await loadReadme()
+  
+  // 如果有文档，加载第一个；否则显示提示
+  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/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
+}

package/src/style.css

@@ -5,13 +5,12 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
-  line-height: 1.75;
-  color: #1a202c;
-  background: #f7fafc;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  color: #1f2328;
+  background: #ffffff;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
+  font-size: 16px;
 }
 
 #app {
@@ -27,19 +26,59 @@ body {
 .sidebar {
   min-width: 200px;
   max-width: 400px;
-  background: #ffffff;
-  border-right: 1px solid #e2e8f0;
+  background: #f6f8fa;
+  border-right: 1px solid #d0d7de;
   overflow-y: auto;
   flex-shrink: 0;
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02);
 }
 
 .logo {
-  padding: 24px 24px;
-  border-bottom: 1px solid #e2e8f0;
-  background: #fafbfd;
+  padding: 16px;
+  border-bottom: 1px solid #d0d7de;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo-group {
   display: flex;
   align-items: center;
+  gap: 8px;
+}
+
+.github-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #ffffff;
+  background: #3eaf7c;
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+
+.github-link:hover {
+  background: #2d8a5e;
+}
+
+.sidebar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid #d0d7de;
+  background: #ffffff;
+  color: #656d76;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.1s;
+}
+
+.sidebar-toggle:hover {
+  background: #f6f8fa;
+  color: #1f2328;
 }
 
 .nav-menu {
@@ -50,12 +89,12 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 24px 8px;
-  font-size: 11px;
-  color: #718096;
+  padding: 12px 16px 8px;
+  font-size: 12px;
+  color: #656d76;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.02em;
 }
 
 .nav-actions {
@@ -67,60 +106,66 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   border: none;
   background: transparent;
-  color: #a0aec0;
+  color: #656d76;
   cursor: pointer;
-  border-radius: 3px;
-  transition: all 0.15s;
+  border-radius: 6px;
+  transition: all 0.1s;
   padding: 0;
 }
 
 .action-btn:hover {
-  background: #edf2f7;
-  color: #2d3748;
+  background: #d0d7de;
+  color: #1f2328;
 }
 
 .nav-item {
   display: flex;
   align-items: center;
-  padding: 9px 24px;
-  margin: 1px 0;
+  padding: 6px 16px;
   cursor: pointer;
-  transition: all 0.15s;
-  color: #4a5568;
-  font-size: 13px;
-  border-left: 2px solid transparent;
+  transition: all 0.1s;
+  color: #1f2328;
+  font-size: 14px;
+  border-radius: 6px;
+  margin: 1px 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .nav-item:hover {
-  background: #f7fafc;
-  color: #1a202c;
+  background: #d0d7de;
 }
 
 .nav-item.active {
-  background: #ebf4ff;
-  color: #2b6cb0;
+  background: #e6f7e6;
+  color: #3eaf7c;
   font-weight: 500;
-  border-left-color: #3182ce;
+}
+
+.nav-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* 图标样式 */
 .nav-icon {
   flex-shrink: 0;
-  margin-right: 10px;
-  color: #a0aec0;
-  transition: all 0.15s;
+  margin-right: 8px;
+  color: #656d76;
 }
 
 .nav-item:hover .nav-icon {
-  color: #2d3748;
+  color: #1f2328;
 }
 
 .nav-item.active .nav-icon {
-  color: #3182ce;
+  color: #3eaf7c;
 }
 
 .chevron-icon {
@@ -128,29 +173,20 @@ body {
 }
 
 .folder-icon {
-  color: #ed8936;
+  color: #3eaf7c;
 }
 
 .file-icon {
-  color: #a0aec0;
+  color: #656d76;
 }
 
 .home-icon {
-  color: #4299e1;
+  color: #3eaf7c;
 }
 
 /* 文件夹样式 */
 .nav-folder {
   font-weight: 500;
-  color: #2d3748;
-}
-
-.nav-folder:hover {
-  background: #f7fafc;
-}
-
-.nav-folder:hover .folder-icon {
-  color: #dd6b20;
 }
 
 /* 多级目录样式 */
@@ -164,7 +200,6 @@ body {
 
 .nav-item.level-2 {
   font-size: 13px;
-  opacity: 0.9;
 }
 
 /* 内容区域样式 */
@@ -176,308 +211,147 @@ body {
 }
 
 .markdown-content {
-  max-width: 880px;
+  width: 90%;
+  max-width: none;
   margin: 0 auto;
   background: #ffffff;
-  padding: 64px 80px;
+  padding: 32px 48px;
 }
 
 /* Markdown 内容样式 */
 .markdown-content h1 {
   font-size: 32px;
-  margin-bottom: 32px;
-  padding-bottom: 16px;
-  border-bottom: 2px solid #e2e8f0;
-  color: #1a202c;
-  font-weight: 700;
-  letter-spacing: -0.02em;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #d0d7de;
+  color: #1f2328;
+  font-weight: 600;
   line-height: 1.25;
 }
 
 .markdown-content h2 {
   font-size: 24px;
-  margin-top: 56px;
-  margin-bottom: 20px;
-  color: #2d3748;
+  margin-top: 32px;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #d0d7de;
+  color: #1f2328;
   font-weight: 600;
-  letter-spacing: -0.01em;
-  line-height: 1.35;
+  line-height: 1.25;
 }
 
 .markdown-content h3 {
-  font-size: 18px;
-  margin-top: 40px;
+  font-size: 20px;
+  margin-top: 24px;
   margin-bottom: 16px;
-  color: #2d3748;
+  color: #1f2328;
   font-weight: 600;
-  line-height: 1.5;
+  line-height: 1.25;
 }
 
 .markdown-content h4 {
   font-size: 16px;
-  margin-top: 32px;
-  margin-bottom: 12px;
-  color: #4a5568;
+  margin-top: 24px;
+  margin-bottom: 16px;
+  color: #1f2328;
   font-weight: 600;
 }
 
 .markdown-content p {
-  margin-bottom: 20px;
-  color: #2d3748;
-  font-size: 15px;
-  line-height: 1.75;
+  margin-bottom: 16px;
+  color: #1f2328;
 }
 
 .markdown-content ul,
 .markdown-content ol {
-  margin-bottom: 20px;
-  padding-left: 24px;
+  margin-bottom: 16px;
+  padding-left: 2em;
 }
 
 .markdown-content li {
-  margin-bottom: 8px;
-  color: #2d3748;
-  font-size: 15px;
-  line-height: 1.75;
+  margin-bottom: 4px;
+  color: #1f2328;
 }
 
 .markdown-content code {
-  background: #fef2f2;
-  padding: 3px 8px;
-  border-radius: 4px;
-  font-family: "SF Mono", "Consolas", "Monaco", "Courier New", monospace;
-  font-size: 13px;
-  color: #dc2626;
-  border: 1px solid #fecaca;
-  font-weight: 500;
+  background: rgba(175, 184, 193, 0.2);
+  padding: 0.2em 0.4em;
+  border-radius: 6px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 85%;
+  color: #1f2328;
 }
 
 .markdown-content pre {
-  background: #1e1e1e;
-  padding: 20px 24px;
+  background: #24292f;
+  padding: 16px;
   border-radius: 6px;
   overflow-x: auto;
-  margin-bottom: 24px;
-  border: 1px solid #2d2d2d;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
 }
 
 .markdown-content pre code {
   background: none;
-  color: #d4d4d4;
+  color: #e6edf3;
   padding: 0;
-  border: none;
-  font-size: 13px;
-  line-height: 1.7;
-  display: block;
-  font-weight: 400;
+  font-size: 85%;
+  line-height: 1.45;
 }
 
 .markdown-content a {
-  color: #3182ce;
-  text-decoration: underline;
-  text-decoration-color: #90cdf4;
-  text-underline-offset: 2px;
-  transition: all 0.15s;
-  font-weight: 500;
+  color: #3eaf7c;
+  text-decoration: none;
 }
 
 .markdown-content a:hover {
-  color: #2c5282;
-  text-decoration-color: #3182ce;
+  text-decoration: underline;
 }
 
-/* 表格容器 - 支持横向滚动 */
+/* 表格样式 */
 .markdown-content .table-wrapper {
   width: 100%;
   overflow-x: auto;
-  margin-bottom: 32px;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  margin-bottom: 16px;
 }
 
 .markdown-content table {
   width: 100%;
   border-collapse: collapse;
-  margin-bottom: 0;
-  border: 1px solid #cbd5e0;
-  font-size: 14px;
-  border-radius: 8px;
-  overflow: hidden;
-  table-layout: auto;
-  background: #ffffff;
+  border-spacing: 0;
 }
 
 .markdown-content table th,
 .markdown-content table td {
-  border: 1px solid #e2e8f0;
-  padding: 14px 18px;
-  text-align: left;
-  vertical-align: top;
-  word-wrap: break-word;
-  word-break: break-word;
-  min-width: 100px;
-  line-height: 1.6;
+  border: 1px solid #d0d7de;
+  padding: 6px 13px;
 }
 
 .markdown-content table th {
-  background: linear-gradient(to bottom, #f7fafc 0%, #edf2f7 100%);
-  font-weight: 600;
-  color: #2d3748;
-  font-size: 13px;
-  letter-spacing: 0.02em;
-  white-space: nowrap;
-  border-bottom: 2px solid #cbd5e0;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-/* 第一列（表A）适中宽度 */
-.markdown-content table th:first-child,
-.markdown-content table td:first-child {
-  width: 15%;
-  min-width: 140px;
-  font-weight: 500;
-}
-
-/* 第二列（关系类型）窄一些 */
-.markdown-content table th:nth-child(2),
-.markdown-content table td:nth-child(2) {
-  width: 8%;
-  min-width: 70px;
-  text-align: center;
-  font-weight: 500;
-}
-
-/* 第三列（表B）适中宽度 */
-.markdown-content table th:nth-child(3),
-.markdown-content table td:nth-child(3) {
-  width: 15%;
-  min-width: 140px;
-  font-weight: 500;
-}
-
-/* 第四列（关联字段）较宽 */
-.markdown-content table th:nth-child(4),
-.markdown-content table td:nth-child(4) {
-  width: 22%;
-  min-width: 180px;
-  font-family: "SF Mono", "Consolas", "Monaco", monospace;
-  font-size: 13px;
-  color: #4a5568;
-}
-
-/* 最后一列（说明）最宽，自动填充剩余空间 */
-.markdown-content table th:last-child,
-.markdown-content table td:last-child {
-  width: 40%;
-  min-width: 220px;
-  color: #4a5568;
-}
-
-.markdown-content table tbody tr {
-  transition: all 0.15s ease;
-  border-bottom: 1px solid #f1f5f9;
-}
-
-.markdown-content table tbody tr:hover {
-  background-color: #f8fafc;
-  box-shadow: inset 0 0 0 1px #e2e8f0;
-}
-
-.markdown-content table tbody tr:last-child {
-  border-bottom: none;
-}
-
-/* 字段名样式 */
-.markdown-content table .field-name-cell {
-  font-family: "SF Mono", "Consolas", "Monaco", monospace;
-  color: #dc2626;
-  font-weight: 500;
-  font-size: 13px;
-  background-color: #fef2f2;
-}
-
-/* 必填标记样式 */
-.markdown-content table .required-yes {
-  color: #2d3748;
+  background: #f6f8fa;
   font-weight: 600;
-  text-align: center;
 }
 
-/* 表格滚动条样式 */
-.markdown-content .table-wrapper::-webkit-scrollbar {
-  height: 8px;
-}
-
-.markdown-content .table-wrapper::-webkit-scrollbar-track {
-  background: #f1f5f9;
-  border-radius: 4px;
-}
-
-.markdown-content .table-wrapper::-webkit-scrollbar-thumb {
-  background: #cbd5e0;
-  border-radius: 4px;
-  transition: background 0.2s;
-}
-
-.markdown-content .table-wrapper::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
+.markdown-content table tr:nth-child(2n) {
+  background: #f6f8fa;
 }
 
 .markdown-content blockquote {
-  border-left: 3px solid #4299e1;
-  padding-left: 20px;
-  margin: 24px 0;
-  color: #4a5568;
-  font-style: italic;
-  background: #ebf8ff;
-  padding: 16px 20px;
-  border-radius: 4px;
+  border-left: 4px solid #d0d7de;
+  padding: 0 16px;
+  margin: 0 0 16px;
+  color: #656d76;
 }
 
 .markdown-content img {
   max-width: 100%;
   height: auto;
-  border-radius: 4px;
-  margin: 16px 0;
-  transition: all 0.2s ease;
-}
-
-.markdown-content img:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transform: translateY(-2px);
-}
-
-/* 可放大图片样式 */
-.zoomable-image {
-  cursor: zoom-in !important;
-  position: relative;
-}
-
-.zoomable-image::after {
-  content: '🔍';
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background: rgba(0, 0, 0, 0.7);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  pointer-events: none;
-}
-
-.zoomable-image:hover::after {
-  opacity: 1;
+  border-radius: 6px;
+  margin: 8px 0;
 }
 
 /* Mermaid 图表样式 */
 .markdown-content .mermaid {
-  margin: 24px 0;
+  margin: 16px 0;
   text-align: center;
 }
 
@@ -487,189 +361,167 @@ body {
 }
 
 .markdown-content .mermaid-error {
-  color: #f56c6c;
-  background: #fef0f0;
+  color: #cf222e;
+  background: #ffebe9;
   padding: 12px;
-  border-radius: 4px;
-  border: 1px solid #fde2e2;
-  font-size: 14px;
+  border-radius: 6px;
+  border: 1px solid #ff8182;
 }
 
 /* 滚动条样式 */
 .sidebar::-webkit-scrollbar,
 .content::-webkit-scrollbar {
-  width: 6px;
+  width: 8px;
 }
 
 .sidebar::-webkit-scrollbar-thumb,
 .content::-webkit-scrollbar-thumb {
-  background: #dcdfe6;
-  border-radius: 3px;
+  background: #d0d7de;
+  border-radius: 4px;
 }
 
 .sidebar::-webkit-scrollbar-thumb:hover,
 .content::-webkit-scrollbar-thumb:hover {
-  background: #c0c4cc;
+  background: #afb8c1;
 }
 
 /* 返回顶部按钮 */
 .back-to-top {
   position: fixed;
-  right: 32px;
-  bottom: 32px;
-  width: 56px;
-  height: 56px;
+  right: 24px;
+  bottom: 24px;
+  width: 48px;
+  height: 48px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 2px;
   background: #ffffff;
-  color: #3182ce;
-  border: 1px solid #cbd5e0;
-  border-radius: 8px;
+  color: #656d76;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
   cursor: pointer;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  transition: all 0.2s;
+  box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12);
+  transition: all 0.1s;
   z-index: 1000;
 }
 
 .back-to-top:hover {
-  background: #3182ce;
-  color: #ffffff;
-  border-color: #3182ce;
-  box-shadow: 0 6px 16px rgba(49, 130, 206, 0.3);
-  transform: translateY(-2px);
-}
-
-.back-to-top:active {
-  transform: translateY(0) scale(0.95);
+  background: #e6f7e6;
+  color: #3eaf7c;
+  border-color: #3eaf7c;
 }
 
 .progress-text {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1;
-  color: inherit;
+  font-size: 12px;
+  font-weight: 500;
 }
 
 /* 淡入淡出动画 */
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s, transform 0.3s;
+  transition: opacity 0.2s;
 }
 
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
-  transform: translateY(10px);
 }
 
 /* 右侧目录样式 */
 .toc-sidebar {
   min-width: 200px;
-  max-width: 400px;
+  max-width: 300px;
   background: #ffffff;
-  border-left: 1px solid #e2e8f0;
+  border-left: 1px solid #d0d7de;
   overflow-y: auto;
   flex-shrink: 0;
-  padding: 64px 0 32px;
-  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.02);
+  padding: 32px 0;
 }
 
 .toc-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px 12px;
+  border-bottom: 1px solid #d0d7de;
+}
+
+.toc-title {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 0 24px 16px;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
-  color: #718096;
-  border-bottom: 1px solid #e2e8f0;
-  letter-spacing: 0.05em;
+  color: #1f2328;
   text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.toc-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid #d0d7de;
+  background: #ffffff;
+  color: #656d76;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.1s;
+}
+
+.toc-toggle:hover {
+  background: #f6f8fa;
+  color: #1f2328;
 }
 
 .toc-nav {
-  padding: 16px 0;
+  padding: 12px 0;
 }
 
 .toc-item {
   display: block;
-  padding: 6px 24px;
-  color: #718096;
+  padding: 4px 16px;
+  color: #656d76;
   text-decoration: none;
   font-size: 12px;
-  line-height: 1.6;
-  transition: all 0.15s;
+  line-height: 1.5;
+  transition: all 0.1s;
   border-left: 2px solid transparent;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .toc-item:hover {
-  color: #2d3748;
-  background: #f7fafc;
+  color: #3eaf7c;
 }
 
 .toc-item.active {
-  color: #3182ce;
-  border-left-color: #3182ce;
+  color: #3eaf7c;
+  border-left-color: #3eaf7c;
   font-weight: 500;
-  background: #ebf8ff;
 }
 
-/* 不同层级的缩进 */
 .toc-item.toc-level-1 {
-  padding-left: 24px;
-  font-size: 13px;
+  padding-left: 16px;
   font-weight: 500;
-  color: #4a5568;
-  margin-top: 12px;
+  color: #1f2328;
+  margin-top: 8px;
 }
 
 .toc-item.toc-level-2 {
-  padding-left: 32px;
-  font-size: 12px;
-  margin-top: 2px;
+  padding-left: 24px;
 }
 
 .toc-item.toc-level-3 {
-  padding-left: 40px;
+  padding-left: 32px;
   font-size: 11px;
 }
 
 .toc-item.toc-level-4 {
-  padding-left: 56px;
-  font-size: 12px;
-  opacity: 0.9;
-}
-
-.toc-item.toc-level-5 {
-  padding-left: 68px;
-  font-size: 11px;
-  opacity: 0.85;
-}
-
-.toc-item.toc-level-6 {
-  padding-left: 80px;
+  padding-left: 40px;
   font-size: 11px;
-  opacity: 0.8;
-}
-
-/* 目录滚动条样式 */
-.toc-sidebar::-webkit-scrollbar {
-  width: 6px;
-}
-
-.toc-sidebar::-webkit-scrollbar-thumb {
-  background: #dcdfe6;
-  border-radius: 3px;
-}
-
-.toc-sidebar::-webkit-scrollbar-thumb:hover {
-  background: #c0c4cc;
 }
 
 /* 拖拽条样式 */
@@ -678,40 +530,22 @@ body {
   background: transparent;
   cursor: col-resize;
   flex-shrink: 0;
-  position: relative;
-  transition: background 0.15s;
-}
-
-.resizer::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: -2px;
-  right: -2px;
+  transition: background 0.1s;
 }
 
 .resizer:hover {
-  background: #e5e7eb;
+  background: #d0d7de;
 }
 
 .resizer:active {
-  background: #111827;
-}
-
-.resizer-left {
-  margin-left: -1px;
-}
-
-.resizer-right {
-  margin-right: -1px;
+  background: #3eaf7c;
 }
 
 /* 收起/展开按钮 */
 .collapse-btn,
 .expand-btn {
   position: fixed;
-  top: 70px;
+  top: 16px;
   z-index: 100;
   width: 32px;
   height: 32px;
@@ -719,30 +553,21 @@ body {
   align-items: center;
   justify-content: center;
   background: #ffffff;
-  border: 1px solid #cbd5e0;
+  border: 1px solid #d0d7de;
   border-radius: 6px;
   cursor: pointer;
-  color: #718096;
-  transition: all 0.2s;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  color: #656d76;
+  transition: all 0.1s;
+  box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12);
 }
 
 .collapse-btn:hover,
 .expand-btn:hover {
-  color: #3182ce;
-  border-color: #3182ce;
-  box-shadow: 0 4px 12px rgba(49, 130, 206, 0.15);
-  transform: translateY(-1px);
-}
-
-.collapse-btn-left {
-  left: 16px;
-}
-
-.collapse-btn-right {
-  right: 16px;
+  background: #f6f8fa;
+  color: #1f2328;
 }
 
+.collapse-btn-left,
 .expand-btn-left {
   left: 16px;
 }
@@ -767,18 +592,14 @@ body {
     width: 240px;
   }
 
-  .content {
-    padding: 20px;
-  }
-
   .markdown-content {
-    padding: 20px;
+    padding: 16px;
   }
   
   .back-to-top {
-    right: 20px;
-    bottom: 20px;
-    width: 48px;
-    height: 48px;
+    right: 16px;
+    bottom: 16px;
+    width: 40px;
+    height: 40px;
   }
-}
+}

package/vite.config.js

@@ -1,10 +1,11 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { config } from './src/config.js'
 
 export default defineConfig({
   plugins: [vue()],
   server: {
-    port: 3000
+    port: config.defaultPort
   },
   optimizeDeps: {
     include: ['vue', 'marked', 'mermaid']