新增：文件系统导航面包屑

功能：
- 新增 PathBreadcrumb 组件，支持路径快速跳转
- 新增 DropdownItem 通用下拉菜单组件

优化：
- 版本升级流程优化（Pinia 状态管理、进度节流、完整下载验证）
- 模块延迟初始化（数据库、文件系统按需启动）
- API 数据格式统一（蛇形转驼峰）
- CodeMirror 语言包按需动态加载
- Markdown 渲染增强（支持锚点跳转）

重构：
- 迁移到 Pinia 状态管理（stores/config.ts、stores/theme.ts、stores/update.ts）
- 简化 UpdatePanel、UpdateNotification、ThemeToggle 逻辑
- 优化表结构加载逻辑

清理：
- 删除测试组件 index-simple.vue
- 删除旧的 useTheme.ts

web/src/utils/markedExtensions.ts

@@ -1,35 +1,67 @@
 import { marked } from 'marked'
 import hljs from 'highlight.js'
-import mermaid from 'mermaid'
-
-// 导入 highlight.js 核心和两种主题样式
 import 'highlight.js/lib/common'
 import 'highlight.js/styles/github-dark.css'
 import 'highlight.js/styles/github.css'
 
-// Mermaid 初始化
-mermaid.initialize({ startOnLoad: false, theme: 'default', securityLevel: 'loose' })
+let mermaidInstance: typeof import('mermaid').default | null = null
+
+async function loadMermaid() {
+  if (mermaidInstance) return mermaidInstance
+
+  try {
+    const mermaid = await import('mermaid')
+    mermaid.default.initialize({
+      startOnLoad: false,
+      theme: 'default',
+      securityLevel: 'loose'
+    })
+    mermaidInstance = mermaid.default
+    return mermaidInstance
+  } catch {
+    return null
+  }
+}
 
-// 自定义 renderer
 const renderer = new marked.Renderer()
 
 renderer.code = function(token: any) {
-  // Mermaid 代码块
   if (token.lang === 'mermaid') {
     return `<pre class="mermaid">${token.text}</pre>`
   }
 
-  // 普通代码块 - 使用 highlight.js 高亮
   const lang = hljs.getLanguage(token.lang) ? token.lang : 'plaintext'
   const highlighted = hljs.highlight(token.text, { language: lang }).value
   return `<pre><code class="hljs language-${lang}" data-theme="auto">${highlighted}</code></pre>`
 }
 
+renderer.heading = function(token: any) {
+  const raw = token.raw || ''
+  const depth = token.depth || 1
+  const text = token.text || ''
+
+  const id = raw
+    .toLowerCase()
+    .replace(/[^\u4e00-\u9fa5a-z0-9\s-]/g, '')
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-+|-+$/g, '') || `heading-${Math.random().toString(36).slice(2, 11)}`
+
+  return `<h${depth} id="${id}" class="heading">
+    ${text}<a href="#${id}" class="heading-anchor" aria-hidden="true" title="跳转到此标题">#</a>
+  </h${depth}>`
+}
+
 marked.use({ renderer, breaks: true, gfm: true })
 
 export { marked }
+
 export async function renderMermaidDiagrams() {
-  await mermaid.run()
+  const mermaid = await loadMermaid()
+  if (mermaid) {
+    await mermaid.run()
+  }
 }