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

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

web/src/App.vue

@@ -7,20 +7,20 @@
         </div>
         <a-tabs v-model:active-key="activeTab" class="header-tabs">
           <a-tab-pane
-            v-for="tab in visibleTabs"
-            :key="tab.key"
-            :title="tab.title"
+              v-for="tab in visibleTabs"
+              :key="tab.key"
+              :title="tab.title"
           />
         </a-tabs>
         <div class="header-actions">
           <a-tooltip content="设置">
             <a-button type="text" @click="showSettings = true">
               <template #icon>
-                <IconSettings />
+                <IconSettings/>
               </template>
             </a-button>
           </a-tooltip>
-          <ThemeToggle />
+          <ThemeToggle/>
 
           <!-- 窗口控制按钮 -->
           <div class="window-controls">
@@ -51,36 +51,35 @@
       <!-- 动态渲染 Tab 内容 -->
       <!-- 使用 KeepAlive 缓存组件状态，避免切换时重新加载 -->
       <KeepAlive include="FileSystem,DbCli,DeviceTest">
-        <component :is="getComponent(activeTab)" />
+        <component :is="getComponent(activeTab)"/>
       </KeepAlive>
     </a-layout-content>
 
     <!-- 设置抽屉 -->
     <SettingsPanel
-      v-model="showSettings"
-      :config="appConfig"
-      @save="handleSaveConfig"
+        v-model="showSettings"
+        :config="appConfig"
+        @save="handleSaveConfig"
     />
 
     <!-- 升级提示弹窗 -->
     <UpdateNotification
-      v-model="showUpdateNotification"
-      :update-info="updateInfo"
-      @install="handleUpdateInstall"
-      @skip="handleUpdateSkip"
+        v-model="showUpdateNotification"
+        :update-info="updateInfo"
+        @install="handleUpdateInstall"
+        @skip="handleUpdateSkip"
     />
   </a-layout>
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted } from 'vue'
-import { IconSettings } from '@arco-design/web-vue/es/icon'
-import { Message } from '@arco-design/web-vue'
+import {computed, onMounted, ref, watch} from 'vue'
+import {IconSettings} from '@arco-design/web-vue/es/icon'
+import {Message} from '@arco-design/web-vue'
 import DeviceTest from './components/DeviceTest.vue'
 import DbCli from './views/db-cli/index.vue'
 import ThemeToggle from './components/ThemeToggle.vue'
-import UpdatePanel from './components/UpdatePanel.vue'
-import FileSystem from './components/FileSystem.vue'
+import FileSystem from './components/FileSystem/index.vue'
 import SettingsPanel from './components/SettingsPanel.vue'
 import UpdateNotification from './components/UpdateNotification.vue'
 
@@ -110,19 +109,19 @@ const visibleTabs = computed(() => {
   if (!appConfig.value.tabs || appConfig.value.tabs.length === 0) {
     // 默认配置
     return [
-      { key: 'db-cli', title: '数据库' },
-      { key: 'file-system', title: '文件管理' },
-      { key: 'device', title: '设备调用测试' }
+      {key: 'db-cli', title: '数据库'},
+      {key: 'file-system', title: '文件管理'},
+      {key: 'device', title: '设备调用测试'}
     ]
   }
 
   return appConfig.value.tabs
-    .filter(tab => tab.visible)
-    .sort((a, b) => {
-      const aIndex = appConfig.value.visibleTabs.indexOf(a.key)
-      const bIndex = appConfig.value.visibleTabs.indexOf(b.key)
-      return aIndex - bIndex
-    })
+      .filter(tab => tab.visible)
+      .sort((a, b) => {
+        const aIndex = appConfig.value.visibleTabs.indexOf(a.key)
+        const bIndex = appConfig.value.visibleTabs.indexOf(b.key)
+        return aIndex - bIndex
+      })
 })
 
 // 加载配置
@@ -170,9 +169,9 @@ const loadConfig = async () => {
 const useDefaultConfig = () => {
   appConfig.value = {
     tabs: [
-      { key: 'db-cli', title: '数据库', visible: true, enabled: true },
-      { key: 'file-system', title: '文件管理', visible: true, enabled: true },
-      { key: 'device', title: '设备调用测试', visible: true, enabled: true }
+      {key: 'db-cli', title: '数据库', visible: true, enabled: true},
+      {key: 'file-system', title: '文件管理', visible: true, enabled: true},
+      {key: 'device', title: '设备调用测试', visible: true, enabled: true}
     ],
     visibleTabs: ['db-cli', 'file-system', 'device'],
     defaultTab: 'db-cli'