重构：文件系统模块化架构，增强 Markdown 渲染

- 拆分 FileSystem.vue 为模块化组件架构
- 新增 Markdown Mermaid 图表渲染支持
- 新增 180+ 编程语言代码高亮
- 修复编辑/预览模式切换渲染问题
- 优化亮色/暗色模式主题适配
- 新增 TypeScript 类型定义

web/src/utils/markedExtensions.ts

@@ -0,0 +1,35 @@
+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' })
+
+// 自定义 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>`
+}
+
+marked.use({ renderer, breaks: true, gfm: true })
+
+export { marked }
+export async function renderMermaidDiagrams() {
+  await mermaid.run()
+}
+
+