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

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

web/src/components/FileSystem/index-simple.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="file-system-container">
+    <div class="debug-info">
+      <h3>FileSystem Debug Info</h3>
+      <p>filePath: {{ filePath }}</p>
+      <p>fileList length: {{ fileList.length }}</p>
+      <p>showSidebar: {{ showSidebar }}</p>
+      <p>hasSelectedFile: {{ hasSelectedFile }}</p>
+      <button @click="testClick">测试点击</button>
+    </div>
+
+    <!-- 顶部工具栏 -->
+    <Toolbar
+      :config="toolbarConfig"
+      @update:file-path="handleFilePathUpdate"
+      @update:show-sidebar="handleSidebarToggle"
+      @refresh="handleRefresh"
+      @exit-zip="handleExitZip"
+      @go-to-path="handleGoToPath"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { Message } from '@arco-design/web-vue'
+
+// 导入子组件
+import Toolbar from './components/Toolbar.vue'
+
+// 导入 Composables
+import { useFileOperations } from './composables/useFileOperations'
+import { useFavorites } from './composables/useFavorites'
+import { usePathNavigation } from './composables/usePathNavigation'
+
+// 定义组件名称
+defineOptions({
+  name: 'FileSystem'
+})
+
+console.log('FileSystem component setup started')
+
+// ========== 状态管理 ==========
+
+const fileList = ref([])
+const fileLoading = ref(false)
+const selectedFileItem = ref(null)
+
+const showSidebar = ref(true)
+const panelWidth = ref({ left: 50, right: 50 })
+
+// ========== Composables 初始化 ==========
+
+// 文件操作
+const { listDirectory, readFile } = useFileOperations({
+  onSuccess: (operation, data) => {
+    console.log('Operation success:', operation, data)
+  },
+  onError: (operation, error) => {
+    console.error('Operation error:', operation, error)
+    Message.error(`${operation} 失败: ${error.message}`)
+  }
+})
+
+// 收藏夹
+const { favorites, draggingState } = useFavorites()
+
+// 路径导航
+const { filePath, history, navigate, onPathSelect, onPathEnter, browseDirectory } =
+  usePathNavigation({
+    onListDirectory: async (path) => {
+      await loadDirectory(path)
+    },
+    initialPath: 'C:\\'
+  })
+
+console.log('Composables initialized')
+console.log('Initial filePath:', filePath.value)
+
+// ========== 计算属性 ==========
+
+const hasSelectedFile = computed(() => selectedFileItem.value !== null)
+
+const toolbarConfig = computed(() => ({
+  filePath: filePath.value || '',
+  pathHistory: history.value?.paths?.slice(-10) || [],
+  commonPaths: [
+    { name: '📁 桌面', path: 'C:\\Users\\Public\\Desktop' },
+    { name: '📁 文档', path: 'C:\\Users\\Public\\Documents' },
+    { name: '📁 下载', path: 'C:\\Users\\Public\\Downloads' }
+  ],
+  isBrowsingZip: false,
+  displayPath: filePath.value || '',
+  fileLoading: fileLoading.value,
+  showSidebar: showSidebar.value
+}))
+
+// ========== 事件处理 ==========
+
+const handleFilePathUpdate = (path: string) => {
+  console.log('handleFilePathUpdate:', path)
+  filePath.value = path
+}
+
+const handleSidebarToggle = (show: boolean) => {
+  console.log('handleSidebarToggle:', show)
+  showSidebar.value = show
+}
+
+const handleRefresh = async () => {
+  console.log('handleRefresh')
+  await loadDirectory(filePath.value)
+}
+
+const handleExitZip = () => {
+  console.log('handleExitZip')
+}
+
+const handleGoToPath = async (path: string) => {
+  console.log('handleGoToPath:', path)
+  await navigate(path)
+}
+
+const testClick = () => {
+  console.log('Test button clicked')
+  Message.success('测试成功！')
+  console.log('Current state:', {
+    filePath: filePath.value,
+    fileList: fileList.value,
+    favorites: favorites.value
+  })
+}
+
+// ========== 工具函数 ==========
+
+const loadDirectory = async (path: string) => {
+  console.log('loadDirectory:', path)
+  fileLoading.value = true
+  try {
+    fileList.value = await listDirectory(path)
+    console.log('Files loaded:', fileList.value.length)
+  } catch (error) {
+    console.error('Load directory error:', error)
+    Message.error(`加载目录失败: ${error}`)
+  } finally {
+    fileLoading.value = false
+  }
+}
+
+// ========== 生命周期 ==========
+
+onMounted(() => {
+  console.log('FileSystem mounted')
+  console.log('Loading initial directory:', filePath.value)
+
+  // 加载默认目录
+  loadDirectory(filePath.value)
+})
+</script>
+
+<style scoped>
+.file-system-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.debug-info {
+  padding: 20px;
+  background: #f0f0f0;
+  margin: 10px;
+  border-radius: 8px;
+}
+
+.debug-info h3 {
+  margin-top: 0;
+}
+
+.debug-info p {
+  margin: 5px 0;
+  font-family: 'Consolas', monospace;
+}
+
+.debug-info button {
+  margin-top: 10px;
+  padding: 8px 16px;
+  background: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.debug-info button:hover {
+  background: #40a9ff;
+}
+</style>