From eb2cbad17b3dce1ac70668e5189e48b4433d74e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=9D=E5=B0=98?= <237809796@qq.com>
Date: Fri, 30 Jan 2026 02:24:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E8=B4=A8=E9=87=8F=E6=8F=90=E5=8D=87=EF=BC=8C=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E9=87=8D=E5=A4=8D=E9=80=BB=E8=BE=91=E5=92=8C=E8=AF=AD=E6=B3=95?=
 =?UTF-8?q?=E9=AB=98=E4=BA=AE=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 简化计算属性，删除重复代码
- 优化文件扩展名获取逻辑
- 新增文件工具函数库 fileHelpers.js
- 增强 CodeEditor 语法高亮（支持 30+ 语言）
- 修复 Office 文档文件服务器访问权限
- 添加特殊文件名支持（Dockerfile、Makefile 等）
---
 internal/common/path.go                  |   35 +-
 internal/filesystem/config.go            |   18 +-
 internal/service/update.go               |   11 +-
 internal/service/update_config.go        |   13 +-
 internal/service/update_download.go      |   66 +-
 internal/storage/sqlite.go               |   17 +-
 web/src/App.vue                          |    9 +-
 web/src/components/CodeEditor.vue        |  406 +++++----
 web/src/components/DeviceTest.vue        |    5 +
 web/src/components/FileSystem.vue        | 1031 ++++++++++++----------
 web/src/composables/useFavoriteFiles.js  |   47 +-
 web/src/composables/useFileOperations.js |    3 +-
 web/src/utils/constants.js               |   16 +-
 web/src/utils/fileHelpers.js             |   41 +
 web/src/views/db-cli/index.vue           |    5 +
 15 files changed, 962 insertions(+), 761 deletions(-)
 create mode 100644 web/src/utils/fileHelpers.js

diff --git a/internal/common/path.go b/internal/common/path.go
index ab50513..850f818 100644
--- a/internal/common/path.go
+++ b/internal/common/path.go
@@ -3,43 +3,24 @@ package common
 import (
 	"os"
 	"path/filepath"
-	"runtime"
 )
 
 const (
 	// AppName 应用名称
 	AppName = "u-desk"
+
+	// AppDataDir 应用数据目录名称（带点号，表示隐藏目录）
+	AppDataDir = ".u-desk"
 )
 
 // GetUserDataDir 获取用户数据目录
 // 跨平台支持：Windows、macOS、Linux
+// 所有平台统一使用: ~/.u-desk
 func GetUserDataDir() string {
-	var basePath string
-
-	switch runtime.GOOS {
-	case "windows":
-		// Windows: %LOCALAPPDATA% 或 %APPDATA%
-		basePath = os.Getenv("LOCALAPPDATA")
-		if basePath == "" {
-			basePath = os.Getenv("APPDATA")
-		}
-	case "darwin":
-		// macOS: ~/Library/Application Support
-		homeDir, err := os.UserHomeDir()
-		if err == nil {
-			basePath = filepath.Join(homeDir, "Library", "Application Support")
-		}
-	default:
-		// Linux: ~/.config
-		homeDir, err := os.UserHomeDir()
-		if err == nil {
-			basePath = filepath.Join(homeDir, ".config")
-		}
+	homeDir, err := os.UserHomeDir()
+	if err != nil {
+		return "."
 	}
 
-	if basePath == "" {
-		basePath = "."
-	}
-
-	return filepath.Join(basePath, AppName)
+	return filepath.Join(homeDir, AppDataDir)
 }
diff --git a/internal/filesystem/config.go b/internal/filesystem/config.go
index 56db2a1..3f67549 100644
--- a/internal/filesystem/config.go
+++ b/internal/filesystem/config.go
@@ -276,7 +276,13 @@ func getAllowedExtensions() map[string]bool {
 		".wav": true,
 		".ogg": true,
 		// 文档
-		".pdf": true,
+		".pdf":  true,
+		".doc":  true,
+		".docx": true,
+		".xls":  true,
+		".xlsx": true,
+		".ppt":  true,
+		".pptx": true,
 		// 文本
 		".txt": true,
 		".md":  true,
@@ -346,10 +352,20 @@ func getMIMETypeMapping() map[string]string {
 		".wav":  "audio/wav",
 		".ogg":  "audio/ogg",
 		".pdf":  "application/pdf",
+		// Office 文档
+		".doc":  "application/msword",
+		".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+		".xls":  "application/vnd.ms-excel",
+		".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+		".ppt":  "application/vnd.ms-powerpoint",
+		".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+		// 文本
 		".txt":  "text/plain; charset=utf-8",
 		".html": "text/html; charset=utf-8",
 		".css":  "text/css",
 		".js":   "application/javascript",
 		".json": "application/json",
+		".xml":  "application/xml",
+		".md":   "text/markdown",
 	}
 }
diff --git a/internal/service/update.go b/internal/service/update.go
index d63b755..5d3e7cd 100644
--- a/internal/service/update.go
+++ b/internal/service/update.go
@@ -12,6 +12,8 @@ import (
 	"runtime"
 	"strings"
 	"time"
+
+	"u-desk/internal/common"
 )
 
 // ==================== 类型定义 ====================
@@ -409,18 +411,13 @@ func BackupApplication() (string, error) {
 		return "", err
 	}
 
-	homeDir, err := os.UserHomeDir()
-	if err != nil {
-		return "", fmt.Errorf("获取用户目录失败: %v", err)
-	}
-
-	backupDir := filepath.Join(homeDir, ".go-desk", "backups")
+	backupDir := filepath.Join(common.GetUserDataDir(), "backups")
 	if err := os.MkdirAll(backupDir, 0755); err != nil {
 		return "", fmt.Errorf("创建备份目录失败: %v", err)
 	}
 
 	timestamp := time.Now().Format("20060102-150405")
-	backupFileName := fmt.Sprintf("go-desk-backup-%s%s", timestamp, filepath.Ext(execPath))
+	backupFileName := fmt.Sprintf("u-desk-backup-%s%s", timestamp, filepath.Ext(execPath))
 	backupPath := filepath.Join(backupDir, backupFileName)
 
 	if err := copyFile(execPath, backupPath); err != nil {
diff --git a/internal/service/update_config.go b/internal/service/update_config.go
index 191f5d1..c5405ea 100644
--- a/internal/service/update_config.go
+++ b/internal/service/update_config.go
@@ -7,6 +7,8 @@ import (
 	"os"
 	"path/filepath"
 	"time"
+
+	"u-desk/internal/common"
 )
 
 // UpdateConfig 更新配置
@@ -20,17 +22,12 @@ type UpdateConfig struct {
 
 // GetUpdateConfigPath 获取更新配置文件路径
 func GetUpdateConfigPath() (string, error) {
-	homeDir, err := os.UserHomeDir()
-	if err != nil {
-		return "", fmt.Errorf("获取用户目录失败: %v", err)
-	}
-
-	configDir := filepath.Join(homeDir, ".go-desk")
-	if err := os.MkdirAll(configDir, 0755); err != nil {
+	dataDir := common.GetUserDataDir()
+	if err := os.MkdirAll(dataDir, 0755); err != nil {
 		return "", fmt.Errorf("创建配置目录失败: %v", err)
 	}
 
-	return filepath.Join(configDir, "update_config.json"), nil
+	return filepath.Join(dataDir, "update_config.json"), nil
 }
 
 // LoadUpdateConfig 加载更新配置
diff --git a/internal/service/update_download.go b/internal/service/update_download.go
index 77788b3..c633df5 100644
--- a/internal/service/update_download.go
+++ b/internal/service/update_download.go
@@ -5,12 +5,15 @@ import (
 	"crypto/sha256"
 	"encoding/hex"
 	"fmt"
+	"hash"
 	"io"
 	"log"
 	"net/http"
 	"os"
 	"path/filepath"
 	"time"
+
+	"u-desk/internal/common"
 )
 
 // ==================== 类型定义 ====================
@@ -33,12 +36,7 @@ func DownloadUpdate(downloadURL string, progressCallback DownloadProgress) (*Dow
 	log.Printf("[下载] 开始下载，URL: %s", downloadURL)
 
 	// 获取下载目录
-	homeDir, err := os.UserHomeDir()
-	if err != nil {
-		return nil, fmt.Errorf("获取用户目录失败: %v", err)
-	}
-
-	downloadDir := filepath.Join(homeDir, ".go-desk", "downloads")
+	downloadDir := filepath.Join(common.GetUserDataDir(), "downloads")
 	if err := os.MkdirAll(downloadDir, 0755); err != nil {
 		return nil, fmt.Errorf("创建下载目录失败: %v", err)
 	}
@@ -283,7 +281,33 @@ func normalizeProgress(progress float64) float64 {
 	return progress
 }
 
-// calculateFileHashes 计算文件的 MD5 和 SHA256 哈希值
+// calculateHash 计算文件的哈希值（通用函数）
+func calculateHash(filePath string, hashType string) (string, error) {
+	file, err := os.Open(filePath)
+	if err != nil {
+		return "", err
+	}
+	defer file.Close()
+
+	var hash hash.Hash
+
+	switch hashType {
+	case "md5":
+		hash = md5.New()
+	case "sha256":
+		hash = sha256.New()
+	default:
+		return "", fmt.Errorf("不支持的哈希类型: %s", hashType)
+	}
+
+	if _, err := io.Copy(hash, file); err != nil {
+		return "", err
+	}
+
+	return hex.EncodeToString(hash.Sum(nil)), nil
+}
+
+// calculateFileHashes 计算文件的 MD5 和 SHA256 哈希值（优化版，使用 MultiWriter）
 func calculateFileHashes(filePath string) (string, string, error) {
 	file, err := os.Open(filePath)
 	if err != nil {
@@ -294,7 +318,7 @@ func calculateFileHashes(filePath string) (string, string, error) {
 	md5Hash := md5.New()
 	sha256Hash := sha256.New()
 
-	// 使用 MultiWriter 同时计算两个哈希
+	// 使用 MultiWriter 同时计算两个哈希，只读取文件一次
 	writer := io.MultiWriter(md5Hash, sha256Hash)
 
 	if _, err := io.Copy(writer, file); err != nil {
@@ -309,33 +333,9 @@ func calculateFileHashes(filePath string) (string, string, error) {
 
 // VerifyFileHash 验证文件哈希值
 func VerifyFileHash(filePath string, expectedHash string, hashType string) (bool, error) {
-	file, err := os.Open(filePath)
+	calculatedHash, err := calculateHash(filePath, hashType)
 	if err != nil {
 		return false, err
 	}
-	defer file.Close()
-
-	var hash []byte
-	var calculatedHash string
-
-	switch hashType {
-	case "md5":
-		md5Hash := md5.New()
-		if _, err := io.Copy(md5Hash, file); err != nil {
-			return false, err
-		}
-		hash = md5Hash.Sum(nil)
-		calculatedHash = hex.EncodeToString(hash)
-	case "sha256":
-		sha256Hash := sha256.New()
-		if _, err := io.Copy(sha256Hash, file); err != nil {
-			return false, err
-		}
-		hash = sha256Hash.Sum(nil)
-		calculatedHash = hex.EncodeToString(hash)
-	default:
-		return false, fmt.Errorf("不支持的哈希类型: %s", hashType)
-	}
-
 	return calculatedHash == expectedHash, nil
 }
diff --git a/internal/storage/sqlite.go b/internal/storage/sqlite.go
index c6f0020..4508c53 100644
--- a/internal/storage/sqlite.go
+++ b/internal/storage/sqlite.go
@@ -1,6 +1,8 @@
 package storage
 
 import (
+	"fmt"
+	"u-desk/internal/common"
 	"u-desk/internal/storage/models"
 	"os"
 	"path/filepath"
@@ -25,17 +27,13 @@ func InitFast() (*gorm.DB, error) {
 		return globalDB, nil
 	}
 
-	homeDir, err := os.UserHomeDir()
-	if err != nil {
-		return nil, err
-	}
-
-	dataDir := filepath.Join(homeDir, ".go-desk")
+	// 使用统一的数据目录
+	dataDir := common.GetUserDataDir()
 	if err := os.MkdirAll(dataDir, 0755); err != nil {
 		return nil, err
 	}
 
-	dbPath := filepath.Join(dataDir, "db-cli.db")
+	dbPath := filepath.Join(dataDir, "app.db")
 
 	// 极限性能优化参数：
 	// - journal_mode=WAL: 写前日志，大幅提升并发性能
@@ -53,7 +51,10 @@ func InitFast() (*gorm.DB, error) {
 		return nil, err
 	}
 
-	sqlDB, _ := db.DB()
+	sqlDB, err := db.DB()
+	if err != nil {
+		return nil, fmt.Errorf("获取底层SQL数据库失败: %v", err)
+	}
 	sqlDB.SetMaxOpenConns(1) // SQLite 只需要一个连接
 	sqlDB.SetMaxIdleConns(1)
 	sqlDB.SetConnMaxLifetime(time.Hour)
diff --git a/web/src/App.vue b/web/src/App.vue
index 12b2429..0fe3f2a 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -49,11 +49,10 @@
     </a-layout-header>
     <a-layout-content class="content">
       <!-- 动态渲染 Tab 内容 -->
-      <template v-for="tab in visibleTabs" :key="tab.key">
-        <KeepAlive>
-          <component :is="getComponent(tab.key)" v-if="activeTab === tab.key" />
-        </KeepAlive>
-      </template>
+      <!-- 使用 KeepAlive 缓存组件状态，避免切换时重新加载 -->
+      <KeepAlive include="FileSystem,DbCli,DeviceTest">
+        <component :is="getComponent(activeTab)" />
+      </KeepAlive>
     </a-layout-content>
 
     <!-- 设置抽屉 -->
diff --git a/web/src/components/CodeEditor.vue b/web/src/components/CodeEditor.vue
index 3e64e80..e65e684 100644
--- a/web/src/components/CodeEditor.vue
+++ b/web/src/components/CodeEditor.vue
@@ -3,106 +3,91 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
-import { EditorView, lineNumbers, highlightActiveLineGutter } from '@codemirror/view'
+import { ref, onMounted, watch, onBeforeUnmount, computed } from 'vue'
+import { EditorView, lineNumbers, highlightActiveLineGutter, keymap } from '@codemirror/view'
 import { EditorState } from '@codemirror/state'
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
 import { javascript } from '@codemirror/lang-javascript'
-import { java } from '@codemirror/lang-java'
-import { python } from '@codemirror/lang-python'
-import { go } from '@codemirror/lang-go'
-import { cpp } from '@codemirror/lang-cpp'
-import { rust } from '@codemirror/lang-rust'
-import { php } from '@codemirror/lang-php'
 import { json } from '@codemirror/lang-json'
-import { markdown } from '@codemirror/lang-markdown'
-import { html } from '@codemirror/lang-html'
+import { cpp } from '@codemirror/lang-cpp'
 import { css } from '@codemirror/lang-css'
+import { go } from '@codemirror/lang-go'
+import { html } from '@codemirror/lang-html'
+import { java } from '@codemirror/lang-java'
+import { markdown } from '@codemirror/lang-markdown'
+import { php } from '@codemirror/lang-php'
+import { python } from '@codemirror/lang-python'
+import { rust } from '@codemirror/lang-rust'
 import { sql } from '@codemirror/lang-sql'
 import { yaml } from '@codemirror/lang-yaml'
-import { oneDark } from '@codemirror/theme-one-dark'
-import { keymap } from '@codemirror/view'
-import { bracketMatching } from '@codemirror/language'
 import { StreamLanguage } from '@codemirror/language'
-import { shell } from '@codemirror/legacy-modes/mode/shell'
-import { powerShell } from '@codemirror/legacy-modes/mode/powershell'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { bracketMatching } from '@codemirror/language'
 import { useTheme } from '@/composables/useTheme'
 
-// 使用主题系统
-const { isDark } = useTheme()
+// Legacy modes for languages without dedicated packages
+import { csharp, kotlin } from '@codemirror/legacy-modes/mode/clike'
+import { swift } from '@codemirror/legacy-modes/mode/swift'
+import { ruby } from '@codemirror/legacy-modes/mode/ruby'
+import { shell } from '@codemirror/legacy-modes/mode/shell'
+import { octave } from '@codemirror/legacy-modes/mode/octave'
+import { perl } from '@codemirror/legacy-modes/mode/perl'
+import { r } from '@codemirror/legacy-modes/mode/r'
+import { properties } from '@codemirror/legacy-modes/mode/properties'
+import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile'
+import { stex } from '@codemirror/legacy-modes/mode/stex'
+import { xml } from '@codemirror/legacy-modes/mode/xml'
 
-/**
- * 文件扩展名到语言的映射
- */
+// ==================== Constants ====================
+// 文件扩展名到 CodeMirror 语言包的映射
 const LANGUAGE_MAP = {
-  // JavaScript/TypeScript
-  'js': javascript(),
-  'jsx': javascript({ jsx: true }),
-  'ts': javascript({ typescript: true }),
-  'tsx': javascript({ typescript: true, jsx: true }),
-  'mjs': javascript(),
-  'cjs': javascript(),
+  // JavaScript/TypeScript (使用 javascript 包)
+  javascript: ['js', 'jsx', 'mjs', 'cjs'],
+  typescript: ['ts', 'tsx'],
 
-  // JSON
-  'json': json(),
+  // 数据格式
+  json: ['json'],
+  yaml: ['yaml', 'yml'],
+  xml: ['xml', 'xhtml', 'svg'],
 
-  // Java
-  'java': java(),
+  // Web
+  html: ['html', 'htm'],
+  css: ['css', 'scss', 'sass', 'less'],
 
-  // Python
-  'py': python(),
+  // 系统编程
+  cpp: ['cpp', 'c', 'cc', 'cxx', 'h', 'hpp'],
+  rust: ['rs'],
+  go: ['go'],
 
-  // Go
-  'go': go(),
+  // 脚本语言
+  python: ['py', 'pyw'],
+  php: ['php'],
+  ruby: ['rb'],
+  perl: ['pl', 'pm'],
+  shell: ['sh', 'bash', 'zsh', 'fish', 'cmd', 'bat'],
+  sql: ['sql'],
 
-  // C/C++
-  'c': cpp(),
-  'cpp': cpp(),
-  'cc': cpp(),
-  'cxx': cpp(),
-  'h': cpp(),
-  'hpp': cpp(),
-  'hxx': cpp(),
+  // JVM 语言
+  java: ['java'],
+  kotlin: ['kt', 'kts'],
+  csharp: ['cs', 'csx'],
 
-  // Rust
-  'rs': rust(),
+  // 其他语言
+  swift: ['swift'],
+  markdown: ['md', 'markdown'],
+  r: ['r'],
+  matlab: ['m'],
+  latex: ['tex'],
+  makefile: ['makefile', 'make', 'mk', 'gnumakefile'],
+  ini: ['ini', 'cfg', 'conf', 'properties'],
+  dockerfile: ['dockerfile', 'containerfile'],
+  gitignore: ['gitignore', 'gitignore-global', 'gitattributes'],
 
-  // PHP
-  'php': php(),
-
-  // Markdown
-  'md': markdown(),
-  'markdown': markdown(),
-
-  // HTML
-  'html': html(),
-  'htm': html(),
-
-  // CSS
-  'css': css(),
-  'scss': css(),
-  'sass': css(),
-  'less': css(),
-
-  // SQL
-  'sql': sql(),
-
-  // YAML
-  'yml': yaml(),
-  'yaml': yaml(),
-
-  // Shell/Bash
-  'sh': StreamLanguage.define(shell),
-  'bash': StreamLanguage.define(shell),
-  'zsh': StreamLanguage.define(shell),
-  'fish': StreamLanguage.define(shell),
-
-  // Windows Batch/PowerShell
-  'bat': StreamLanguage.define(powerShell),
-  'cmd': StreamLanguage.define(powerShell),
-  'ps1': StreamLanguage.define(powerShell),
+  // 纯文本（未知类型）
+  text: ['txt', 'text', 'log', 'csv']
 }
 
+// ==================== Props & Emits ====================
 const props = defineProps({
   modelValue: {
     type: String,
@@ -116,10 +101,15 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
+// ==================== State ====================
+const { isDark } = useTheme()
 const editorContainer = ref(null)
 let view = null
 
-// 根据主题动态创建编辑器配置
+// ==================== Editor Management ====================
+/**
+ * 创建编辑器扩展配置
+ */
 const createExtensions = () => {
   const extensions = [
     lineNumbers(),
@@ -155,25 +145,131 @@ const createExtensions = () => {
     })
   ]
 
-  // 根据主题添加 One Dark
+  // 主题
   if (isDark.value) {
     extensions.push(oneDark)
   }
 
-  // 添加语言支持
-  const langSupport = LANGUAGE_MAP[props.fileExtension]
-  if (langSupport) {
-    extensions.push(langSupport)
+  // 语言支持
+  const ext = props.fileExtension.toLowerCase()
+
+  // JavaScript/TypeScript
+  if (LANGUAGE_MAP.javascript.includes(ext) || LANGUAGE_MAP.typescript.includes(ext)) {
+    extensions.push(javascript({ jsx: true }))
   }
+  // JSON
+  else if (LANGUAGE_MAP.json.includes(ext)) {
+    extensions.push(json())
+  }
+  // YAML
+  else if (LANGUAGE_MAP.yaml.includes(ext)) {
+    extensions.push(yaml())
+  }
+  // HTML
+  else if (LANGUAGE_MAP.html.includes(ext)) {
+    extensions.push(html())
+  }
+  // CSS (including SCSS, SASS, LESS)
+  else if (LANGUAGE_MAP.css.includes(ext)) {
+    extensions.push(css())
+  }
+  // C/C++
+  else if (LANGUAGE_MAP.cpp.includes(ext)) {
+    extensions.push(cpp())
+  }
+  // Rust
+  else if (LANGUAGE_MAP.rust.includes(ext)) {
+    extensions.push(rust())
+  }
+  // Go
+  else if (LANGUAGE_MAP.go.includes(ext)) {
+    extensions.push(go())
+  }
+  // Python
+  else if (LANGUAGE_MAP.python.includes(ext)) {
+    extensions.push(python())
+  }
+  // PHP
+  else if (LANGUAGE_MAP.php.includes(ext)) {
+    extensions.push(php())
+  }
+  // SQL
+  else if (LANGUAGE_MAP.sql.includes(ext)) {
+    extensions.push(sql())
+  }
+  // Markdown
+  else if (LANGUAGE_MAP.markdown.includes(ext)) {
+    extensions.push(markdown())
+  }
+  // Java
+  else if (LANGUAGE_MAP.java.includes(ext)) {
+    extensions.push(java())
+  }
+  // Ruby
+  else if (LANGUAGE_MAP.ruby.includes(ext)) {
+    extensions.push(StreamLanguage.define(ruby))
+  }
+  // Shell
+  else if (LANGUAGE_MAP.shell.includes(ext)) {
+    extensions.push(StreamLanguage.define(shell))
+  }
+  // Kotlin
+  else if (LANGUAGE_MAP.kotlin.includes(ext)) {
+    extensions.push(StreamLanguage.define(kotlin))
+  }
+  // C#
+  else if (LANGUAGE_MAP.csharp.includes(ext)) {
+    extensions.push(StreamLanguage.define(csharp))
+  }
+  // Swift
+  else if (LANGUAGE_MAP.swift.includes(ext)) {
+    extensions.push(StreamLanguage.define(swift))
+  }
+  // R
+  else if (LANGUAGE_MAP.r.includes(ext)) {
+    extensions.push(StreamLanguage.define(r))
+  }
+  // Perl
+  else if (LANGUAGE_MAP.perl.includes(ext)) {
+    extensions.push(StreamLanguage.define(perl))
+  }
+  // LaTeX
+  else if (LANGUAGE_MAP.latex.includes(ext)) {
+    extensions.push(StreamLanguage.define(stex))
+  }
+  // Makefile (使用纯文本，legacy-modes 没有专门的 makefile 支持)
+  else if (LANGUAGE_MAP.makefile.includes(ext)) {
+    // 纯文本模式，不添加语言扩展
+  }
+  // INI/Properties/Dockerfile
+  else if (LANGUAGE_MAP.ini.includes(ext)) {
+    extensions.push(StreamLanguage.define(properties))
+  }
+  else if (LANGUAGE_MAP.dockerfile.includes(ext)) {
+    extensions.push(StreamLanguage.define(dockerFile))
+  }
+  // XML (包括 SVG)
+  else if (LANGUAGE_MAP.xml.includes(ext)) {
+    extensions.push(StreamLanguage.define(xml))
+  }
+  // Matlab/Octave
+  else if (LANGUAGE_MAP.matlab.includes(ext)) {
+    extensions.push(StreamLanguage.define(octave))
+  }
+  // 其他类型（包括 gitignore, dockerfile, txt 等）使用纯文本模式
+  // 不添加任何语言扩展，保持纯文本
 
   return extensions
 }
 
-onMounted(() => {
+/**
+ * 创建编辑器实例
+ */
+const createEditor = (docContent = '') => {
   if (!editorContainer.value) return
 
   const state = EditorState.create({
-    doc: props.modelValue,
+    doc: docContent,
     extensions: createExtensions()
   })
 
@@ -181,49 +277,21 @@ onMounted(() => {
     state,
     parent: editorContainer.value
   })
-})
+}
 
-// 监听外部内容变化
-watch(() => props.modelValue, (newValue) => {
-  if (view && newValue !== view.state.doc.toString()) {
-    view.dispatch({
-      changes: {
-        from: 0,
-        to: view.state.doc.length,
-        insert: newValue
-      }
-    })
-  }
-})
+/**
+ * 重建编辑器（保留内容）
+ */
+const recreateEditor = () => {
+  if (!view) return
+  const currentDoc = view.state.doc.toString()
+  view.destroy()
+  createEditor(currentDoc)
+}
 
-// 监听主题变化，重新创建编辑器
-watch(isDark, () => {
-  if (view) {
-    view.destroy()
-    const state = EditorState.create({
-      doc: view.state.doc.toString(),
-      extensions: createExtensions()
-    })
-    view = new EditorView({
-      state,
-      parent: editorContainer.value
-    })
-  }
-})
-
-// 监听文件扩展名变化，重新创建编辑器
-watch(() => props.fileExtension, () => {
-  if (view) {
-    view.destroy()
-    const state = EditorState.create({
-      doc: view.state.doc.toString(),
-      extensions: createExtensions()
-    })
-    view = new EditorView({
-      state,
-      parent: editorContainer.value
-    })
-  }
+// ==================== Lifecycle ====================
+onMounted(() => {
+  createEditor(props.modelValue || '')
 })
 
 onBeforeUnmount(() => {
@@ -231,80 +299,36 @@ onBeforeUnmount(() => {
     view.destroy()
   }
 })
+
+// ==================== Watchers ====================
+// 监听外部内容变化
+watch(() => props.modelValue, (newValue) => {
+  if (view && newValue !== view.state.doc.toString()) {
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert: newValue || ''
+      }
+    })
+  }
+})
+
+// 监听主题或文件扩展名变化，重建编辑器
+watch([isDark, () => props.fileExtension], recreateEditor)
 </script>
 
-<style>
-/* 全局语法高亮样式（适用于亮色主题） */
-.cm-editor:not(.cm-theme-dark) .tok-keyword {
-  color: #d73a49;
-  font-weight: bold;
-}
-
-.cm-editor:not(.cm-theme-dark) .tok-string {
-  color: #032f62;
-}
-
-.cm-editor:not(.cm-theme-dark) .tok-number {
-  color: #005cc5;
-}
-
-.cm-editor:not(.cm-theme-dark) .tok-comment {
-  color: #6a737d;
-  font-style: italic;
-}
-
-.cm-editor:not(.cm-theme-dark) .tok-function {
-  color: #6f42c1;
-}
-
-.cm-editor:not(.cm-theme-dark) .tok-operator {
-  color: #d73a49;
-}
-
-.cm-editor:not(.cm-theme-dark) .tok-class-name {
-  color: #22863a;
-}
-
-.cm-editor:not(.cm-theme-dark) .tok-property {
-  color: #e36209;
-}
-
-.cm-editor:not(.cm-theme-dark) .tok-tag {
-  color: #22863a;
-}
-
-.cm-editor:not(.cm-theme-dark) .tok-attribute {
-  color: #6f42c1;
-}
-
-.cm-editor:not(.cm-theme-dark) .tok-variableName {
-  color: #e36209;
-}
-
-.cm-editor:not(.cm-theme-dark) .tok-variableName2 {
-  color: #005cc5;
-}
-
-.cm-editor:not(.cm-theme-dark) .tok-def {
-  color: #6f42c1;
-}
-</style>
-
 <style scoped>
 .codemirror-editor {
   height: 100%;
   overflow: hidden;
 }
 
-:deep(.cm-editor) {
+.codemirror-editor :deep(.cm-editor) {
   height: 100%;
 }
 
-:deep(.cm-scroller) {
+.codemirror-editor :deep(.cm-scroller) {
   overflow: auto;
 }
-
-:deep(.cm-content) {
-  padding: 8px;
-}
 </style>
diff --git a/web/src/components/DeviceTest.vue b/web/src/components/DeviceTest.vue
index f183e83..593b615 100644
--- a/web/src/components/DeviceTest.vue
+++ b/web/src/components/DeviceTest.vue
@@ -197,6 +197,11 @@
 </template>
 
 <script setup>
+// 定义组件名称，用于 KeepAlive 缓存
+defineOptions({
+  name: 'DeviceTest'
+})
+
 import {computed, onMounted, ref} from 'vue'
 import {Message, Modal} from '@arco-design/web-vue'
 import {
diff --git a/web/src/components/FileSystem.vue b/web/src/components/FileSystem.vue
index 176d62e..f85ec73 100644
--- a/web/src/components/FileSystem.vue
+++ b/web/src/components/FileSystem.vue
@@ -37,7 +37,7 @@
             快捷访问
           </a-button>
           <template #content>
-            <a-doption v-for="shortcut in commonPaths" :key="shortcut.path" @click="navigateToPath(shortcut.path)">
+            <a-doption v-for="shortcut in commonPaths" :key="shortcut.path" @click="goToPath(shortcut.path)">
               <template #icon>{{ shortcut.name.split(' ')[0] }}</template>
               {{ shortcut.name.substring(2) }}
             </a-doption>
@@ -53,7 +53,7 @@
             历史
           </a-button>
           <template #content>
-            <a-doption v-for="path in pathHistory.slice(0, 10)" :key="path" @click="navigateToPath(path)">
+            <a-doption v-for="path in pathHistory.slice(0, 10)" :key="path" @click="goToPath(path)">
               {{ path }}
             </a-doption>
             <a-doption v-if="pathHistory.length === 0" disabled>暂无历史</a-doption>
@@ -92,10 +92,25 @@
           </div>
           <div class="sidebar-content">
             <div
-              v-for="fav in favoriteFiles"
+              v-for="(fav, index) in favoriteFiles"
               :key="fav.path"
               class="sidebar-item"
+              :class="{
+                'sidebar-item-dragging': draggingState.isDragging && draggingState.draggedIndex === index,
+                'sidebar-item-drag-over': draggingState.isDragging && draggingState.draggedIndex !== index
+              }"
+              :draggable="draggingState.isDragging && draggingState.draggedIndex === index"
               @click="openFavoriteFile(fav.path)"
+              @mousedown="onLongPressStart($event, index)"
+              @mouseup="onLongPressCancel"
+              @mouseleave="onLongPressCancel"
+              @touchstart="onLongPressStart($event, index)"
+              @touchend="onLongPressCancel"
+              @touchcancel="onLongPressCancel"
+              @dragstart="onDragStart($event, index)"
+              @dragover="onDragOver($event)"
+              @drop="onDrop($event, index)"
+              @dragend="onDragEnd"
             >
               <span class="sidebar-item-icon">{{ fav.is_dir ? '📁' : '📄' }}</span>
               <span class="sidebar-item-name" :title="fav.name">{{ fav.name }}</span>
@@ -191,9 +206,9 @@
         <div class="file-editor-panel" :style="{ width: panelWidth.right + '%' }">
           <div class="panel-header">
             <span class="panel-title">
-              <template v-if="isImageFile">🖼️ 图片预览</template>
-              <template v-else-if="isVideoFile">🎬 视频预览</template>
-              <template v-else-if="isAudioFile">🎵 音频预览</template>
+              <template v-if="isImageView">🖼️ 图片预览</template>
+              <template v-else-if="isVideoView">🎬 视频预览</template>
+              <template v-else-if="isAudioView">🎵 音频预览</template>
               <template v-else-if="isPdfFile">📕 PDF 预览</template>
               <template v-else-if="isHtmlFile">🌐 HTML 预览</template>
               <template v-else-if="isMarkdownFile">📝 Markdown 预览</template>
@@ -218,9 +233,9 @@
 
           <div class="editor-content">
             <!-- 图片预览 -->
-            <div v-if="isImageFile" class="media-preview">
+            <div v-if="isImageView" class="media-preview">
               <img
-                :src="imagePreviewUrl"
+                :src="previewUrl"
                 class="preview-image"
                 @load="onImageLoad"
                 @error="onImageError"
@@ -230,22 +245,22 @@
                 <a-spin />
               </div>
               <div class="media-meta">
-                <a-tag>{{ getImageType() }}</a-tag>
-                <span v-if="imageSize">{{ formatBytes(imageSize) }}</span>
+                <span class="file-name">{{ getFileName(filePath.value) }}</span>
+                <span v-if="currentImageDimensions" class="image-dimensions">{{ currentImageDimensions }}</span>
               </div>
             </div>
 
             <!-- 视频预览 -->
-            <div v-else-if="isVideoFile" class="media-preview">
-              <video :src="imagePreviewUrl" controls class="preview-video"></video>
+            <div v-else-if="isVideoView" class="media-preview">
+              <video :src="previewUrl" controls class="preview-video"></video>
               <div class="media-meta">
                 <a-tag color="arcoblue">🎬 视频</a-tag>
               </div>
             </div>
 
             <!-- 音频预览 -->
-            <div v-else-if="isAudioFile" class="media-preview">
-              <audio :src="imagePreviewUrl" controls class="preview-audio"></audio>
+            <div v-else-if="isAudioView" class="media-preview">
+              <audio :src="previewUrl" controls class="preview-audio"></audio>
               <div class="media-meta">
                 <a-tag color="green">🎵 音频</a-tag>
               </div>
@@ -253,7 +268,7 @@
 
             <!-- PDF 预览 -->
             <div v-else-if="isPdfFile" class="media-preview media-preview-pdf">
-              <iframe :src="imagePreviewUrl" class="preview-pdf"></iframe>
+              <iframe :src="previewUrl" class="preview-pdf"></iframe>
               <div class="media-meta">
                 <a-tag color="orangered">📕 PDF</a-tag>
               </div>
@@ -263,6 +278,17 @@
             <div v-else-if="isHtmlFile" class="html-preview-wrapper">
               <!-- 编辑模式/预览模式切换按钮 -->
               <div class="preview-mode-switch">
+                <!-- 保存按钮 -->
+                <a-tooltip v-if="canSaveFile" position="left" content="保存 (Ctrl+S)">
+                  <a-button
+                    type="primary"
+                    size="small"
+                    @click="handleSaveContent"
+                  >
+                    <template #icon><icon-save /></template>
+                  </a-button>
+                </a-tooltip>
+                <!-- 编辑/预览切换 -->
                 <a-tooltip position="left" :content="canPreviewFile ? (isEditMode ? '切换到预览' : '切换到编辑') : '该文件不支持预览模式'">
                   <a-button
                     type="primary"
@@ -282,7 +308,7 @@
               <iframe
                 v-if="!isEditMode"
                 class="html-preview-content"
-                :srcdoc="renderedContent"
+                :srcdoc="rendered"
               ></iframe>
 
               <!-- 编辑模式 -->
@@ -303,6 +329,17 @@
             <div v-else-if="isMarkdownFile" class="markdown-preview-wrapper">
               <!-- 编辑模式/预览模式切换按钮 -->
               <div class="preview-mode-switch">
+                <!-- 保存按钮 -->
+                <a-tooltip v-if="canSaveFile" position="left" content="保存 (Ctrl+S)">
+                  <a-button
+                    type="primary"
+                    size="small"
+                    @click="handleSaveContent"
+                  >
+                    <template #icon><icon-save /></template>
+                  </a-button>
+                </a-tooltip>
+                <!-- 编辑/预览切换 -->
                 <a-tooltip position="left" :content="canPreviewFile ? (isEditMode ? '切换到预览' : '切换到编辑') : '该文件不支持预览模式'">
                   <a-button
                     type="primary"
@@ -319,7 +356,7 @@
               </div>
 
               <!-- 预览模式 -->
-              <div v-if="!isEditMode" class="markdown-preview-content markdown-content" v-html="renderedContent"></div>
+              <div v-if="!isEditMode" class="markdown-preview-content markdown-content" v-html="rendered"></div>
 
               <!-- 编辑模式 -->
               <div v-else class="markdown-edit-wrapper" :style="{ height: fileContentHeight + 'px' }">
@@ -337,8 +374,19 @@
 
             <!-- 文本编辑器（带代码高亮） -->
             <div v-else class="text-editor-wrapper" :style="{ height: fileContentHeight + 'px' }">
-              <!-- 编辑模式/预览模式切换按钮（所有文件类型显示，但仅 HTML/Markdown 可用） -->
+              <!-- 编辑模式/预览模式切换按钮 -->
               <div class="preview-mode-switch">
+                <!-- 保存按钮 -->
+                <a-tooltip v-if="canSaveFile" position="left" content="保存 (Ctrl+S)">
+                  <a-button
+                    type="primary"
+                    size="small"
+                    @click="handleSaveContent"
+                  >
+                    <template #icon><icon-save /></template>
+                  </a-button>
+                </a-tooltip>
+                <!-- 编辑/预览切换 -->
                 <a-tooltip position="left" :content="canPreviewFile ? (isEditMode ? '切换到预览' : '切换到编辑') : '该文件不支持预览模式'">
                   <a-button
                     type="primary"
@@ -364,24 +412,6 @@
                 <div class="resize-dots"></div>
               </div>
             </div>
-
-            <!-- 操作按钮栏 -->
-            <div class="editor-toolbar">
-              <a-button
-                v-if="isEditableFile"
-                type="primary"
-                size="small"
-                :disabled="!isFileModified"
-                @click="handleSaveContent"
-              >
-                <template #icon><icon-save /></template>
-                保存
-              </a-button>
-              <a-button size="small" @click="resetContent" v-if="canResetContent">
-                <template #icon><icon-refresh /></template>
-                重置
-              </a-button>
-            </div>
           </div>
         </div>
       </div>
@@ -444,6 +474,11 @@
 </template>
 
 <script setup>
+// 定义组件名称，用于 KeepAlive 缓存
+defineOptions({
+  name: 'FileSystem'
+})
+
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import { marked } from 'marked'
@@ -479,13 +514,28 @@ import {
 } from '@/api'
 
 // 导入公共工具函数和常量
-import { STORAGE_KEYS, FILE_EXTENSIONS, DEFAULTS } from '@/utils/constants'
+import { STORAGE_KEYS, FILE_EXTENSIONS, DEFAULTS, FILE_SIZE_THRESHOLDS } from '@/utils/constants'
 import {
   formatBytes,
   getFileName,
   getFileIcon,
   normalizeFilePath
 } from '@/utils/fileUtils'
+import {
+  getExt,
+  isImage,
+  isVideo,
+  isAudio,
+  isVideoAny,
+  isPdf,
+  isHtml,
+  isMarkdown,
+  isCode,
+  isArchive,
+  isExecutable,
+  isDatabase,
+  isEditableDoc
+} from '@/utils/fileHelpers'
 
 // 导入调试日志工具
 import { debugLog, debugWarn, debugError } from '@/utils/debugLog'
@@ -495,6 +545,9 @@ import { useFileOperations } from '@/composables/useFileOperations'
 import { useFavoriteFiles } from '@/composables/useFavoriteFiles'
 import { useLocalStorage } from '@/composables/useLocalStorage'
 
+// 导入 Wails runtime
+import { BrowserOpenURL } from '@/wailsjs/wailsjs/runtime/runtime'
+
 // ========== 使用 Composables ==========
 
 // 文件操作
@@ -522,6 +575,7 @@ const {
   isFavorite,
   toggleFavorite,
   removeFavorite,
+  reorderFavorites,
 } = useFavoriteFiles(STORAGE_KEYS.FILESYSTEM.FAVORITE_FILES)
 
 // localStorage管理
@@ -549,7 +603,7 @@ const { storedValue: pathHistory } = useLocalStorage(
 const currentZipPath = ref('') // 当前浏览的 zip 文件路径
 const currentZipDirectory = ref('') // 当前在 zip 中的目录路径
 const isBrowsingZip = ref(false) // 是否正在浏览 zip 文件
-const originalPathBeforeZip = ref('') // 进入 zip 之前的原始路径
+const pathBeforeZip = ref('') // 进入 zip 之前的原始路径
 const selectedFilePath = ref('') // 当前选中的文件完整路径（用于读取文件）
 
 // ========== 右键菜单状态 ==========
@@ -578,7 +632,7 @@ const inputDialogCallback = ref(null) // 输入对话框确认回调
 const isSaving = ref(false) // 是否正在保存
 const isShortcutSave = ref(false) // 是否是快捷键触发
 const saveSuccessMessage = ref('') // 保存成功提示消息
-const originalFileContent = ref('') // 原始文件内容（用于检测变更）
+const originalContent = ref('') // 原始文件内容（用于检测变更）
 
 // ========== 草稿自动保存 ==========
 const DRAFT_STORAGE_KEY = 'filesystem_draft_content' // localStorage 键
@@ -628,7 +682,7 @@ const loadDraft = () => {
         // 如果草稿不超过 24 小时，自动恢复
         if (hoursDiff < 24) {
           fileContent.value = draft
-          originalFileContent.value = draft
+          originalContent.value = draft
           Message.info({
             content: `📝 已恢复草稿内容（${time.toLocaleString()}）`,
             duration: 2000,
@@ -653,28 +707,17 @@ watch(fileContent, () => {
   }
 }, { debounce: 1000 }) // 防抖，1秒后才保存
 
-// ========== 立即清理旧的文件内容缓存 ==========
-// 在组件初始化之前清理，防止加载大文件导致空白
-try {
-  const oldContent = localStorage.getItem(STORAGE_KEYS.FILESYSTEM.FILE_CONTENT)
-  if (oldContent) {
-    debugLog('清理旧的文件内容缓存')
-    localStorage.removeItem(STORAGE_KEYS.FILESYSTEM.FILE_CONTENT)
-  }
-} catch (error) {
-  console.error('[FileSystem] 清理缓存失败:', error)
-}
-
 // ========== 媒体预览相关状态 ==========
 
-const imagePreviewUrl = ref('')
+const previewUrl = ref('')
 const fileServerURL = ref('http://localhost:18765') // 本地文件服务器URL
-const renderedContent = ref('') // 渲染后的 HTML/Markdown 内容
+const rendered = ref('') // 渲染后的 HTML/Markdown 内容
 const imageLoading = ref(false)
-const imageSize = ref(0)
-const isImageFile = ref(false)
-const isVideoFile = ref(false)
-const isAudioFile = ref(false)
+const imageWidth = ref(0)
+const imageHeight = ref(0)
+const isImageView = ref(false) // 是否显示图片预览
+const isVideoView = ref(false) // 是否显示视频预览
+const isAudioView = ref(false) // 是否显示音频预览
 const isPdfFile = ref(false)
 const isHtmlFile = ref(false) // HTML 预览
 const isMarkdownFile = ref(false) // Markdown 预览
@@ -772,41 +815,41 @@ const addToHistory = (path) => {
 
 // ========== 导航历史记录（支持后退/前进） ==========
 
-const navigationHistory = ref([]) // 导航历史栈
-const navigationIndex = ref(-1) // 当前在历史栈中的位置
+const navHistory = ref([]) // 导航历史栈
+const navIndex = ref(-1) // 当前在历史栈中的位置
 const isNavigating = ref(false) // 是否正在导航（防止重复记录）
 
 /**
  * 添加路径到导航历史
  * @param {string} path - 要添加的路径
  */
-const pushToNavigationHistory = (path) => {
+const pushNav = (path) => {
   if (!path || path.trim() === '') return
   if (isNavigating.value) return // 如果正在导航，不重复记录
 
   // 如果当前位置不在历史栈末尾，删除当前位置之后的所有记录
-  if (navigationIndex.value < navigationHistory.value.length - 1) {
-    navigationHistory.value = navigationHistory.value.slice(0, navigationIndex.value + 1)
+  if (navIndex.value < navHistory.value.length - 1) {
+    navHistory.value = navHistory.value.slice(0, navIndex.value + 1)
   }
 
   // 如果新路径与当前路径不同，才添加
-  const currentPath = navigationHistory.value[navigationIndex.value]
+  const currentPath = navHistory.value[navIndex.value]
   if (currentPath !== path) {
-    navigationHistory.value.push(path)
-    navigationIndex.value = navigationHistory.value.length - 1
-    debugLog('导航历史:', navigationHistory.value, '当前位置:', navigationIndex.value)
+    navHistory.value.push(path)
+    navIndex.value = navHistory.value.length - 1
+    debugLog('导航历史:', navHistory.value, '当前位置:', navIndex.value)
   }
 }
 
 /**
  * 后退到上一个目录
  */
-const navigateBack = async () => {
-  if (navigationIndex.value > 0) {
+const goBack = async () => {
+  if (navIndex.value > 0) {
     isNavigating.value = true
-    navigationIndex.value--
-    const path = navigationHistory.value[navigationIndex.value]
-    debugLog('后退到:', path, '位置:', navigationIndex.value)
+    navIndex.value--
+    const path = navHistory.value[navIndex.value]
+    debugLog('后退到:', path, '位置:', navIndex.value)
     filePath.value = path
     await listDirectory()
     isNavigating.value = false
@@ -818,12 +861,12 @@ const navigateBack = async () => {
 /**
  * 前进到下一个目录
  */
-const navigateForward = async () => {
-  if (navigationIndex.value < navigationHistory.value.length - 1) {
+const goForward = async () => {
+  if (navIndex.value < navHistory.value.length - 1) {
     isNavigating.value = true
-    navigationIndex.value++
-    const path = navigationHistory.value[navigationIndex.value]
-    debugLog('前进到:', path, '位置:', navigationIndex.value)
+    navIndex.value++
+    const path = navHistory.value[navIndex.value]
+    debugLog('前进到:', path, '位置:', navIndex.value)
     filePath.value = path
     await listDirectory()
     isNavigating.value = false
@@ -835,12 +878,12 @@ const navigateForward = async () => {
 /**
  * 检查是否可以后退
  */
-const canNavigateBack = computed(() => navigationIndex.value > 0)
+const canGoBack = computed(() => navIndex.value > 0)
 
 /**
  * 检查是否可以前进
  */
-const canNavigateForward = computed(() => navigationIndex.value < navigationHistory.value.length - 1)
+const canGoForward = computed(() => navIndex.value < navHistory.value.length - 1)
 
 // ========== 列出目录（重写以添加历史记录） ==========
 
@@ -849,13 +892,13 @@ const listDirectory = async () => {
 
   // 如果当前在 ZIP 浏览模式，自动退出
   // 但只在明确请求列出普通目录时才退出，避免误触发
-  if (isBrowsingZip.value && filePath.value !== originalPathBeforeZip.value) {
+  if (isBrowsingZip.value && filePath.value !== pathBeforeZip.value) {
     debugLog('检测到路径切换，退出 ZIP 模式')
     exitZipMode()
   }
 
   addToHistory(filePath.value)
-  pushToNavigationHistory(filePath.value)
+  pushNav(filePath.value)
   fileLoading.value = true
   try {
     fileList.value = await listDir(filePath.value)
@@ -894,7 +937,7 @@ const onPathEnter = () => {
   listDirectory()
 }
 
-const navigateToPath = (path) => {
+const goToPath = (path) => {
   if (!path) return
 
   // 如果当前在 ZIP 浏览模式，自动退出
@@ -973,7 +1016,7 @@ const selectFile = (path) => {
 // ========== 文件读取（重写以支持媒体预览） ==========
 
 const readFile = async () => {
-  // 使用选中的文件完整路径，如果没有则使用当前路径
+  // ========== 1. 准备阶段 ==========
   const fileToRead = selectedFilePath.value || filePath.value
   if (!fileToRead) return
 
@@ -982,112 +1025,132 @@ const readFile = async () => {
     addToHistory(filePath.value)
   }
 
-  // 延迟状态重置，避免不必要的重新渲染
-  // 只在确实需要读取文件内容时才重置
-
   const ext = fileToRead.split('.').pop()?.toLowerCase() || ''
-
-  // ========== 优化：大文件和无扩展名文件的智能检测 ==========
-  // 获取文件信息（缓存以避免重复查找）
   const file = fileList.value.find(f => f.path === fileToRead)
 
-  // 快速路径：无扩展名大文件（>=100KB），直接判定为二进制（极速）
-  if (!ext && file && file.size >= 100 * 1024) {
-    debugLog('[readFile] 快速路径：无扩展名大文件，直接判定为二进制')
-    // 只设置必要的状态，避免触发不必要的渲染
-    isBinaryFile.value = true
-    fileContent.value = getBinaryFileInfo(fileToRead, '', file)
-    return
-  }
+  // ========== 2. 配置常量 ==========
+  // 可预览类型：有专门的预览处理函数
+  const previewableTypes = [
+    ...FILE_EXTENSIONS.IMAGE,
+    ...FILE_EXTENSIONS.VIDEO_BROWSER,
+    ...FILE_EXTENSIONS.AUDIO,
+    'pdf', 'html', 'htm', 'md', 'markdown'
+  ]
 
-  // 情况2：无扩展名小文件（<100KB），快速检测
+  // 已知二进制类型：直接显示二进制文件信息
+  const knownBinaryTypes = [
+    'exe', 'dll', 'so', 'bin',
+    'zip', 'rar', '7z', 'tar', 'gz', 'iso', 'img', 'dmg',
+    'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'
+  ]
 
-  // 情况2：无扩展名小文件（<100KB），快速检测
+  // ========== 3. 快速路径：无扩展名文件 ==========
   if (!ext) {
-    debugLog('[readFile] 无扩展名小文件，快速检测:', fileToRead, '大小:', file?.size)
-    const isBinary = await quickCheckBinarySample(fileToRead)
-    if (isBinary) {
-      const info = getBinaryFileInfo(fileToRead, '', file) // 同步调用
+    if (file && file.size >= FILE_SIZE_THRESHOLDS.LARGE_FILE) {
+      // 无扩展名大文件：直接判定为二进制
+      debugLog('[readFile] 无扩展名大文件，直接判定为二进制')
       isBinaryFile.value = true
-      fileContent.value = info
+      fileContent.value = getBinaryFileInfo(fileToRead, '', file)
       return
+    } else {
+      // 无扩展名小文件：快速检测
+      debugLog('[readFile] 无扩展名小文件，快速检测:', fileToRead, '大小:', file?.size)
+      const isBinary = await quickCheckBinarySample(fileToRead)
+      if (isBinary) {
+        isBinaryFile.value = true
+        fileContent.value = getBinaryFileInfo(fileToRead, '', file)
+        return
+      }
+      // 不是二进制，继续读取完整内容
     }
-    // 不是二进制，继续读取完整内容
   }
 
-  // 情况3：大文件（>1MB）+ 已知二进制扩展名，直接判定
-  if (file && file.size > 1024 * 1024) {
-    const knownBinaryTypes = ['exe', 'dll', 'so', 'bin', 'zip', 'rar', '7z', 'tar', 'gz', 'iso', 'img', 'dmg', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']
-    if (knownBinaryTypes.includes(ext)) {
-      debugLog('[readFile] 已知二进制类型（大文件）:', fileToRead)
-      const info = getBinaryFileInfo(fileToRead, ext, file) // 同步调用
-      isBinaryFile.value = true
-      fileContent.value = info
-      return
+  // ========== 4. 大文件智能检测 ==========
+  if (file && file.size >= FILE_SIZE_THRESHOLDS.LARGE_FILE) {
+    if (!previewableTypes.includes(ext)) {
+      // 不是可预览类型，需要进行二进制检测
+      if (knownBinaryTypes.includes(ext)) {
+        // 已知二进制类型：直接判定
+        debugLog('[readFile] 已知二进制类型（大文件）:', fileToRead)
+        isBinaryFile.value = true
+        fileContent.value = getBinaryFileInfo(fileToRead, ext, file)
+        return
+      } else {
+        // 未知类型：快速检测
+        debugLog('[readFile] 大文件，快速检测:', fileToRead, '大小:', file.size)
+        const isBinary = await quickCheckBinarySample(fileToRead)
+        if (isBinary) {
+          isBinaryFile.value = true
+          fileContent.value = getBinaryFileInfo(fileToRead, ext, file)
+          return
+        }
+        // 不是二进制，继续读取完整内容
+      }
+    } else {
+      debugLog('[readFile] 可预览的大文件类型，跳过二进制检测:', fileToRead)
     }
-
-    // 情况4：其他大文件，快速检测（只读前100字节）
-    debugLog('[readFile] 大文件，快速检测:', fileToRead, '大小:', file.size)
-    const isBinary = await quickCheckBinarySample(fileToRead)
-    if (isBinary) {
-      const info = getBinaryFileInfo(fileToRead, ext, file) // 同步调用
-      isBinaryFile.value = true
-      fileContent.value = info
-      return
-    }
-    // 不是二进制，继续读取完整内容
   }
 
-  // 图片文件
-  if (FILE_EXTENSIONS.IMAGE.includes(ext)) {
+  // ========== 5. 按处理方式分发 ==========
+
+  // 5.1 可预览类型（使用专门的预览函数）
+  if (isImage(fileToRead)) {
     await previewImage(fileToRead)
     return
   }
 
-  // 视频文件
-  if (FILE_EXTENSIONS.VIDEO_BROWSER.includes(ext)) {
+  if (isVideo(fileToRead)) {
     await previewVideo(fileToRead)
     return
   }
 
-  // 其他视频格式
+  if (isAudio(fileToRead)) {
+    await previewAudio(fileToRead)
+    return
+  }
+
+  if (isPdf(fileToRead)) {
+    await previewPdf(fileToRead)
+    return
+  }
+
+  if (isHtml(fileToRead)) {
+    await previewHtml(fileToRead)
+    return
+  }
+
+  if (isMarkdown(fileToRead)) {
+    await previewMarkdown(fileToRead)
+    return
+  }
+
+  // 5.2 显示二进制信息的类型
   if (FILE_EXTENSIONS.VIDEO_EXTERNAL.includes(ext)) {
     showBinaryFileInfo(ext, fileToRead)
     return
   }
 
-  // 音频文件
-  if (FILE_EXTENSIONS.AUDIO.includes(ext)) {
-    await previewAudio(fileToRead)
-    return
-  }
-
-  // PDF 文件
-  if (ext === 'pdf') {
-    await previewPdf(fileToRead)
-    return
-  }
-
-  // HTML 文件 - 预览
-  if (ext === 'html' || ext === 'htm') {
-    await previewHtml(fileToRead)
-    return
-  }
-
-  // Markdown 文件 - 预览
-  if (ext === 'md' || ext === 'markdown') {
-    await previewMarkdown(fileToRead)
-    return
-  }
-
-  // 可执行文件和二进制文件
-  if (FILE_EXTENSIONS.EXECUTABLE.includes(ext)) {
+  if (isExecutable(fileToRead)) {
     showBinaryFileInfo(ext, fileToRead)
     return
   }
 
-  // 压缩文件 - zip 文件作为文件夹浏览，其他显示信息
-  if (FILE_EXTENSIONS.ARCHIVE.includes(ext)) {
+  if (isEditableDoc(fileToRead)) {
+    // 可编辑的文档文件，继续作为文本读取
+  }
+
+  if (isDatabase(fileToRead)) {
+    showBinaryFileInfo(ext, fileToRead)
+    return
+  }
+
+  if (ext === 'lnk') {
+    showBinaryFileInfo(ext, fileToRead)
+    return
+  }
+
+  // 5.3 压缩文件特殊处理
+  if (isArchive(fileToRead)) {
     if (ext === 'zip') {
       // zip 文件：进入 zip 浏览模式
       selectedFilePath.value = fileToRead
@@ -1100,31 +1163,7 @@ const readFile = async () => {
     }
   }
 
-  // Office 文档 - 默认在内容区显示信息（可通过右键菜单使用系统程序打开）
-  if (FILE_EXTENSIONS.DOCUMENT.includes(ext) && ext !== 'txt') {
-    showBinaryFileInfo(ext, fileToRead)
-    return
-  }
-
-  // txt 文本文件直接读取
-  if (ext === 'txt') {
-    await performFileRead()
-    return
-  }
-
-  // 数据库文件 - 显示信息而不读取内容
-  if (FILE_EXTENSIONS.DATABASE.includes(ext)) {
-    showBinaryFileInfo(ext, fileToRead)
-    return
-  }
-
-  // Windows 快捷方式文件 - 显示二进制文件信息
-  if (ext === 'lnk') {
-    showBinaryFileInfo(ext, fileToRead)
-    return
-  }
-
-  // 其他文件直接读取
+  // 5.4 文本文件（包括 txt 和其他未分类文件）
   await performFileRead()
 }
 
@@ -1256,24 +1295,25 @@ const showBinaryFileInfo = (ext, filePathParam) => {
   if (!file) return
 
   // 重置所有文件类型标志
-  isImageFile.value = false
-  isVideoFile.value = false
-  isAudioFile.value = false
+  isImageView.value = false
+  isVideoView.value = false
+  isAudioView.value = false
   isPdfFile.value = false
   isBinaryFile.value = true
 
   const extDisplay = ext.toUpperCase()
   const sizeDisplay = formatBytes(file.size)
 
-  // 判断文件类型
+  // 使用工具函数判断文件类型
+  const filePath = filePathParam || filePath.value
   let fileType = '二进制文件'
-  if (FILE_EXTENSIONS.IMAGE.includes(ext)) fileType = '图片文件'
-  else if (FILE_EXTENSIONS.VIDEO_BROWSER.includes(ext) || FILE_EXTENSIONS.VIDEO_EXTERNAL.includes(ext)) fileType = '视频文件'
-  else if (FILE_EXTENSIONS.AUDIO.includes(ext)) fileType = '音频文件'
+  if (isImage(filePath)) fileType = '图片文件'
+  else if (isVideoAny(filePath)) fileType = '视频文件'
+  else if (isAudio(filePath)) fileType = '音频文件'
   else if (['exe', 'dll', 'so'].includes(ext)) fileType = '可执行文件'
   else if (['jar', 'jsa'].includes(ext)) fileType = 'Java归档文件'
-  else if (FILE_EXTENSIONS.ARCHIVE.includes(ext)) fileType = '压缩文件'
-  else if (FILE_EXTENSIONS.DOCUMENT.includes(ext)) fileType = '文档文件'
+  else if (isArchive(filePath)) fileType = '压缩文件'
+  else if (FILE_EXTENSIONS.DOCUMENT.includes(getExt(filePath))) fileType = '文档文件'
   else if (ext === 'lnk') fileType = '快捷方式'
 
   const displayFilePath = filePathParam || filePath.value
@@ -1313,7 +1353,7 @@ const enterZipMode = async () => {
 
   try {
     // 保存进入 zip 之前的原始路径
-    originalPathBeforeZip.value = filePath.value
+    pathBeforeZip.value = filePath.value
 
     // 设置 zip 浏览状态
     currentZipPath.value = zipFilePath
@@ -1322,7 +1362,7 @@ const enterZipMode = async () => {
 
     debugLog('ZIP 状态已设置:', {
       currentZipPath: currentZipPath.value,
-      originalPathBeforeZip: originalPathBeforeZip.value,
+      pathBeforeZip: pathBeforeZip.value,
       isBrowsingZip: isBrowsingZip.value
     })
 
@@ -1420,9 +1460,9 @@ const readZipFile = async (zipFilePath) => {
   addToHistory(`${currentZipPath.value} :: ${zipFilePath}`)
 
   // 重置所有预览状态
-  isImageFile.value = false
-  isVideoFile.value = false
-  isAudioFile.value = false
+  isImageView.value = false
+  isVideoView.value = false
+  isAudioView.value = false
   isPdfFile.value = false
   isBinaryFile.value = false
 
@@ -1434,7 +1474,7 @@ const readZipFile = async (zipFilePath) => {
   fileLoading.value = true
   try {
     // 根据文件类型选择处理方式
-    if (FILE_EXTENSIONS.IMAGE.includes(ext)) {
+    if (isImage(zipFilePath)) {
       console.log('[readZipFile] 检测到图片文件，提取到临时目录')
       // 图片文件：提取到临时目录，然后使用文件路径显示
       const tempFilePath = await extractFileFromZipToTemp(currentZipPath.value, zipFilePath)
@@ -1442,94 +1482,63 @@ const readZipFile = async (zipFilePath) => {
 
       // 使用临时文件路径直接显示图片（通过文件服务器）
       selectedFilePath.value = tempFilePath
-      imagePreviewUrl.value = `${fileServerURL.value}/localfs/${normalizeFilePath(tempFilePath, true)}`
-      isImageFile.value = true
+      previewUrl.value = `${fileServerURL.value}/localfs/${normalizeFilePath(tempFilePath, true)}`
+      isImageView.value = true
       // 图片加载成功，静默无提示
-    } else if (FILE_EXTENSIONS.HTML.includes(ext) || FILE_EXTENSIONS.MARKDOWN.includes(ext)) {
+    } else if (isHtml(zipFilePath) || isMarkdown(zipFilePath)) {
       console.log('[readZipFile] 检测到 HTML/Markdown 文件，处理图片引用')
-      // HTML/Markdown 文件：需要处理其中的图片引用
       let content = await extractFileFromZip(currentZipPath.value, zipFilePath)
-      debugLog('读取成功，内容长度:', content.length)
-
-      // 获取 HTML 文件所在目录
       const htmlDir = zipFilePath.substring(0, zipFilePath.lastIndexOf('/')) || ''
-      debugLog('HTML 文件所在目录:', htmlDir)
 
-      // 查找所有图片引用
+      // 查找并替换图片引用
       const imgRegex = /<img([^>]*)(src=["']([^"']+)["'])([^>]*)>/gi
       const images = []
       let match
       while ((match = imgRegex.exec(content)) !== null) {
         const src = match[3]
-        // 跳过 data URI 和外部 URL
-        if (!src.startsWith('data:') && !src.startsWith('http://') && !src.startsWith('https://')) {
+        if (!src.startsWith('data:') && !src.startsWith('http')) {
           images.push({ src, fullMatch: match[0] })
         }
       }
 
       console.log('[readZipFile] 找到图片引用:', images.length, '个')
 
-      // 替换所有图片路径
       for (const img of images) {
         try {
-          // 解析相对路径
-          let imgPath = img.src
-          if (!imgPath.startsWith('/')) {
-            // 相对路径：相对于 HTML 文件所在目录
-            imgPath = htmlDir ? `${htmlDir}/${img.src}` : img.src
-          }
-
-          // 规范化路径（移除 ./ 和 ../）
+          let imgPath = img.src.startsWith('/') ? img.src : (htmlDir ? `${htmlDir}/${img.src}` : img.src)
           imgPath = imgPath.replace(/^\.\//, '').replace(/\/\.\//g, '/').replace(/\/$/, '')
-          console.log('[readZipFile] 提取图片:', imgPath)
 
-          // 提取图片到临时目录
           const tempImgPath = await extractFileFromZipToTemp(currentZipPath.value, imgPath)
           const imgUrl = `${fileServerURL.value}/localfs/${normalizeFilePath(tempImgPath, true)}`
-
-          console.log('[readZipFile] 图片提取成功:', imgUrl)
           content = content.replace(img.fullMatch, img.fullMatch.replace(img.src, imgUrl))
         } catch (err) {
           console.error('[readZipFile] 提取图片失败:', img.src, err)
-          // 失败时保留原始引用（可能图片不存在）
         }
       }
 
-      // 显示处理后的内容
-      if (FILE_EXTENSIONS.HTML.includes(ext)) {
-        // HTML 文件：进入 HTML 预览模式
+      // 显示内容
+      const maxSize = 2 * 1024 * 1024
+      if (content.length > maxSize) {
+        content = content.substring(0, maxSize) + '\n\n... (文件过大，已截断) ...'
+        console.warn(`ZIP文件过大 (${(content.length / 1024).toFixed(2)} KB)`)
+      }
+
+      if (isHtml(zipFilePath)) {
         isHtmlFile.value = true
         isEditMode.value = false
         fileContent.value = content
-        renderedContent.value = content
-        // HTML 加载成功，静默无提示
+        rendered.value = content
       } else {
-        // Markdown 文件：显示为文本
         isMarkdownFile.value = true
-        const maxDisplaySize = 2 * 1024 * 1024 // 2MB
-        if (content.length <= maxDisplaySize) {
-          fileContent.value = content
-        } else {
-          fileContent.value = content.substring(0, maxDisplaySize) + '\n\n... (文件过大，已截断，仅显示前 2MB) ...'
-          // 大文件加载警告改为控制台日志
-          console.warn(`ZIP中Markdown过大 (${(content.length / 1024).toFixed(2)} KB)，已截断显示`)
-        }
+        fileContent.value = content
       }
     } else {
       console.log('[readZipFile] 不是图片文件，读取文本内容')
-      // 其他文件：读取为文本内容
       const content = await extractFileFromZip(currentZipPath.value, zipFilePath)
-      debugLog('读取成功，内容长度:', content.length)
-
-      // 显示为文本（如果小）或提示
-      const maxDisplaySize = 2 * 1024 * 1024 // 2MB
-      if (content.length <= maxDisplaySize) {
-        fileContent.value = content
-      } else {
-        fileContent.value = content.substring(0, maxDisplaySize) + '\n\n... (文件过大，已截断，仅显示前 2MB) ...'
-        // 大文件加载警告改为控制台日志
-        console.warn(`ZIP文件过大 (${(content.length / 1024).toFixed(2)} KB)，已截断显示`)
-      }
+      const maxSize = 2 * 1024 * 1024
+      fileContent.value = content.length > maxSize
+        ? content.substring(0, maxSize) + '\n\n... (文件过大，已截断) ...'
+        : content
     }
   } catch (error) {
     console.error('[readZipFile] 读取失败:', error)
@@ -1562,8 +1571,8 @@ const exitZipMode = () => {
   currentZipDirectory.value = ''
 
   // 恢复到进入 zip 之前的路径
-  if (originalPathBeforeZip.value) {
-    filePath.value = originalPathBeforeZip.value
+  if (pathBeforeZip.value) {
+    filePath.value = pathBeforeZip.value
     listDirectory()
   }
 }
@@ -1636,22 +1645,17 @@ const previewImage = async (targetPath) => {
   const pathToPreview = targetPath || selectedFilePath.value || filePath.value
   if (!pathToPreview) return
 
-  isImageFile.value = true
-  isVideoFile.value = false
-  isAudioFile.value = false
+  isImageView.value = true
+  isVideoView.value = false
+  isAudioView.value = false
   isPdfFile.value = false
   isBinaryFile.value = false
 
   try {
-    imagePreviewUrl.value = `${fileServerURL.value}/localfs/${normalizeFilePath(pathToPreview, true)}`
-
-    const file = fileList.value.find(f => f.path === pathToPreview)
-    if (file) {
-      imageSize.value = file.size || 0
-    }
+    previewUrl.value = `${fileServerURL.value}/localfs/${normalizeFilePath(pathToPreview, true)}`
   } catch (error) {
     Message.error('图片加载失败: ' + error.message)
-    isImageFile.value = false
+    isImageView.value = false
     imageLoading.value = false
   }
 }
@@ -1660,17 +1664,17 @@ const previewMedia = (mediaType, targetPath) => {
   const pathToPreview = targetPath || selectedFilePath.value || filePath.value
   if (!pathToPreview) return
 
-  isImageFile.value = false
-  isVideoFile.value = false
-  isAudioFile.value = false
+  isImageView.value = false
+  isVideoView.value = false
+  isAudioView.value = false
   isPdfFile.value = false
 
   switch (mediaType) {
     case 'video':
-      isVideoFile.value = true
+      isVideoView.value = true
       break
     case 'audio':
-      isAudioFile.value = true
+      isAudioView.value = true
       break
     case 'pdf':
       isPdfFile.value = true
@@ -1678,7 +1682,7 @@ const previewMedia = (mediaType, targetPath) => {
   }
 
   imageLoading.value = false
-  imagePreviewUrl.value = `${fileServerURL.value}/localfs/${normalizeFilePath(pathToPreview, true)}`
+  previewUrl.value = `${fileServerURL.value}/localfs/${normalizeFilePath(pathToPreview, true)}`
 }
 
 const previewVideo = (targetPath) => previewMedia('video', targetPath)
@@ -1688,8 +1692,7 @@ const previewPdf = (targetPath) => previewMedia('pdf', targetPath)
 // 判断是否为 Office 文档
 const isOfficeFile = (fileName) => {
   if (!fileName) return false
-  const ext = fileName.split('.').pop()?.toLowerCase() || ''
-  return FILE_EXTENSIONS.DOCUMENT.includes(ext) && ext !== 'txt'
+  return isEditableDoc(fileName)
 }
 
 // 提取 HTML 中的 CSS 样式并内联，同时转换资源路径
@@ -1699,110 +1702,62 @@ const extractHtmlStyles = async (htmlContent, basePath) => {
   debugLog('开始处理 CSS')
   debugLog('HTML 文件路径:', basePath)
 
-  // 获取 HTML 文件所在目录
-  const lastBackslash = basePath.lastIndexOf('\\')
-  const lastSlash = basePath.lastIndexOf('/')
-  const lastIndex = Math.max(lastBackslash, lastSlash)
-  const htmlDir = lastIndex >= 0 ? basePath.substring(0, lastIndex) : basePath
-  const separator = basePath.includes('\\') ? '\\' : '/'
+  const sep = basePath.includes('\\') ? '\\' : '/'
+  const htmlDir = basePath.substring(0, Math.max(basePath.lastIndexOf('\\'), basePath.lastIndexOf('/'))) || basePath
 
-  // 辅助函数：解析路径
-  const resolvePath = (relPath) => {
-    if (relPath.match(/^[a-zA-Z]:\\/)) {
-      return relPath
-    } else if (relPath.startsWith('/')) {
-      return htmlDir + relPath.replace(/\//g, separator)
-    } else if (relPath.startsWith('./') || relPath.startsWith('../')) {
-      const parts = relPath.replace(/\//g, separator).split(separator)
-      const resolvedParts = []
-      for (const part of parts) {
-        if (part === '..') {
-          resolvedParts.pop()
-        } else if (part !== '.') {
-          resolvedParts.push(part)
-        }
-      }
-      return htmlDir + separator + resolvedParts.join(separator)
-    } else {
-      return htmlDir + separator + relPath.replace(/\//g, separator)
+  // 解析相对路径
+  const resolvePath = (base, relPath) => {
+    if (relPath.match(/^[a-zA-Z]:\\/)) return relPath
+    if (relPath.startsWith('/')) return base + relPath.replace(/\//g, sep)
+
+    // 处理 ../ 和 ./
+    const parts = relPath.replace(/\//g, sep).split(sep)
+    const resolved = []
+    for (const p of parts) {
+      if (p === '..') resolved.pop()
+      else if (p !== '.') resolved.push(p)
     }
+    return base + sep + resolved.join(sep)
   }
 
-  // 将文件转换为 base64 data URL
+  // 文件转 base64
   const fileToBase64 = async (filePath) => {
     try {
       const content = await readFileApi(filePath)
-      // 简单判断文件类型
-      const ext = filePath.split('.').pop()?.toLowerCase() || ''
-      const mimeTypes = {
-        'png': 'image/png',
-        'jpg': 'image/jpeg',
-        'jpeg': 'image/jpeg',
-        'gif': 'image/gif',
-        'svg': 'image/svg+xml',
-        'webp': 'image/webp',
-        'bmp': 'image/bmp',
-        'ico': 'image/x-icon'
-      }
-      const mimeType = mimeTypes[ext] || 'image/png'
-      return `data:${mimeType};base64,${btoa(content)}`
-    } catch (error) {
-      console.warn('[fileToBase64] 转换失败:', filePath, error.message)
+      const ext = getExt(filePath)
+      const mimes = { png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', svg: 'image/svg+xml', webp: 'image/webp', bmp: 'image/bmp', ico: 'image/x-icon' }
+      return `data:${mimes[ext] || 'image/png'};base64,${btoa(content)}`
+    } catch (err) {
+      console.warn('[fileToBase64] 失败:', filePath, err.message)
       return null
     }
   }
 
-  // 转换 CSS 中的 url() 为 base64 data URL，并移除 @import 规则
+  // 转换 CSS 中的 url()
   const convertCssUrls = async (cssContent, cssFilePath) => {
     const cssDir = cssFilePath.substring(0, Math.max(cssFilePath.lastIndexOf('\\'), cssFilePath.lastIndexOf('/')))
 
-    // 🔥 移除 @import 规则（避免加载外部CSS）
-    cssContent = cssContent.replace(/@import\s+(?:url\()?["']?([^"')]+)["']?\)?;?/gi, (match, importPath) => {
-      if (!importPath.startsWith('http://') && !importPath.startsWith('https://')) {
-        console.log(`[convertCssUrls] 移除@import规则: ${importPath}`)
-        return `/* @import "${importPath}" 已移除 */`
-      }
-      return match // 保留外部@import
+    // 移除 @import
+    cssContent = cssContent.replace(/@import\s+(?:url\()?["']?([^"')]+)["']?\)?;?/gi, (match, path) => {
+      return path.startsWith('http') ? match : `/* @import "${path}" 已移除 */`
     })
 
-    // 找出所有 url()
-    const urlRegex = /url\(["']?([^"')]+)["']?\)/gi
+    // 转换 url()
     const urls = []
-    let match
-    while ((match = urlRegex.exec(cssContent)) !== null) {
-      if (!match[1].startsWith('data:') && !match[1].startsWith('http://') && !match[1].startsWith('https://')) {
-        urls.push(match[1])
+    let m
+    const urlRegex = /url\(["']?([^"')]+)["']?\)/gi
+    while ((m = urlRegex.exec(cssContent)) !== null) {
+      if (!m[1].startsWith('data:') && !m[1].startsWith('http')) {
+        urls.push(m[1])
       }
     }
 
-    // 转换所有图片为 base64
-    for (const url of urls) {
-      let fullPath
-      if (url.match(/^[a-zA-Z]:\\/)) {
-        fullPath = url
-      } else if (url.startsWith('/')) {
-        fullPath = htmlDir + url.replace(/\//g, separator)
-      } else if (url.startsWith('./') || url.startsWith('../')) {
-        const parts = url.replace(/\//g, separator).split(separator)
-        const resolvedParts = []
-        for (const part of parts) {
-          if (part === '..') {
-            resolvedParts.pop()
-          } else if (part !== '.') {
-            resolvedParts.push(part)
-          }
-        }
-        fullPath = cssDir + separator + resolvedParts.join(separator)
-      } else {
-        fullPath = cssDir + separator + url
-      }
-
+    for (const u of urls) {
+      const fullPath = resolvePath(cssDir, u)
       const base64 = await fileToBase64(fullPath)
       if (base64) {
-        console.log(`[convertCssUrls] ${url} -> base64 (${base64.length} 字符)`)
-        cssContent = cssContent.replace(`url("${url}")`, base64)
-        cssContent = cssContent.replace(`url('${url}')`, base64)
-        cssContent = cssContent.replace(`url(${url})`, base64)
+        console.log(`[convertCssUrls] ${u} -> base64`)
+        cssContent = cssContent.replace(`url("${u}")`, base64).replace(`url('${u}')`, base64).replace(`url(${u})`, base64)
       }
     }
 
@@ -1824,7 +1779,7 @@ const extractHtmlStyles = async (htmlContent, basePath) => {
     console.log(`[extractHtmlStyles] 发现第 ${linkCount} 个 link 标签:`, linkTag)
 
     if (hrefMatch && hrefMatch[1]) {
-      let cssPath = resolvePath(hrefMatch[1])
+      let cssPath = resolvePath(htmlDir, hrefMatch[1])
       console.log('[extractHtmlStyles] 解析后 CSS 路径:', cssPath)
 
       if (hrefMatch[1].startsWith('http://') || hrefMatch[1].startsWith('https://')) {
@@ -1852,7 +1807,7 @@ const extractHtmlStyles = async (htmlContent, basePath) => {
   debugLog(`处理完成: 找到 ${linkCount} 个 link 标签, 成功提取 ${styles.length} 个 CSS 文件`)
   debugLog(`提取的 CSS 总大小: ${styles.join('\n\n').length} 字符`)
 
-  return { processedHtml: htmlContent, styles: styles.join('\n\n'), htmlDir, separator, resolvePath, fileToBase64 }
+  return { processedHtml: htmlContent, styles: styles.join('\n\n'), htmlDir, resolvePath, fileToBase64 }
 }
 
 // HTML 预览
@@ -1872,9 +1827,9 @@ const previewHtml = async (targetPath) => {
   }
 
   // 重置所有状态
-  isImageFile.value = false
-  isVideoFile.value = false
-  isAudioFile.value = false
+  isImageView.value = false
+  isVideoView.value = false
+  isAudioView.value = false
   isPdfFile.value = false
   isMarkdownFile.value = false
   isHtmlFile.value = true
@@ -1889,7 +1844,7 @@ const previewHtml = async (targetPath) => {
     let content = await readFileApi(pathToPreview)
 
     // 提取并内联 CSS 样式，获取路径解析函数和 base64 转换函数
-    const { processedHtml, styles, resolvePath, fileToBase64 } = await extractHtmlStyles(content, pathToPreview)
+    const { processedHtml, styles, resolvePath, fileToBase64, htmlDir } = await extractHtmlStyles(content, pathToPreview)
 
     // 转换 HTML 中的图片路径为 base64
     const imgRegex = /<img([^>]*)(src=["']([^"']+)["'])([^>]*)>/gi
@@ -1905,7 +1860,7 @@ const previewHtml = async (targetPath) => {
     let html = processedHtml
     // 转换所有图片
     for (const img of images) {
-      const fullPath = resolvePath(img.src)
+      const fullPath = resolvePath(htmlDir, img.src)
       const base64 = await fileToBase64(fullPath)
       if (base64) {
         console.log(`[previewHtml] ${img.src} -> base64 (${base64.length} 字符)`)
@@ -1961,8 +1916,15 @@ const previewHtml = async (targetPath) => {
   </style>`
         )
       }
+
+      // 在 </body> 之前插入链接拦截脚本
+      if (html.includes('</body>')) {
+        const linkScript = '<script>(function(){document.addEventListener("click",function(e){const t=e.target.closest("a");if(t&&t.href){e.preventDefault();window.parent.postMessage({type:"open-link",url:t.href},"*")}},true)})()<\/script>'
+        html = html.replace('</body>', linkScript + '</body>')
+      }
     } else {
       // 不是完整文档，构建完整文档
+      const linkScript = '<script>(function(){document.addEventListener("click",function(e){const t=e.target.closest("a");if(t&&t.href){e.preventDefault();window.parent.postMessage({type:"open-link",url:t.href},"*")}},true)})()<\/script>'
       html = `<!DOCTYPE html>
 <html>
 <head>
@@ -1980,6 +1942,7 @@ const previewHtml = async (targetPath) => {
 </head>
 <body>
   ${html}
+  ${linkScript}
 </body>
 </html>`
     }
@@ -1987,9 +1950,9 @@ const previewHtml = async (targetPath) => {
     // 存储原始内容到 fileContent 用于编辑
     fileContent.value = await readFileApi(pathToPreview)
     // 保存原始内容，用于检测修改
-    originalFileContent.value = fileContent.value
+    originalContent.value = fileContent.value
     // 渲染处理后的 HTML 内容
-    renderedContent.value = html
+    rendered.value = html
   } catch (error) {
     Message.error('读取 HTML 文件失败: ' + error.message)
     isHtmlFile.value = false
@@ -2015,9 +1978,9 @@ const previewMarkdown = async (targetPath) => {
   }
 
   // 重置所有状态
-  isImageFile.value = false
-  isVideoFile.value = false
-  isAudioFile.value = false
+  isImageView.value = false
+  isVideoView.value = false
+  isAudioView.value = false
   isPdfFile.value = false
   isHtmlFile.value = false
   isMarkdownFile.value = true
@@ -2032,9 +1995,9 @@ const previewMarkdown = async (targetPath) => {
     // 存储原始 Markdown 内容到 fileContent 用于编辑
     fileContent.value = content
     // 保存原始内容，用于检测修改
-    originalFileContent.value = content
+    originalContent.value = content
     // 转换 Markdown 为 HTML
-    renderedContent.value = renderMarkdown(content)
+    rendered.value = renderMarkdown(content)
   } catch (error) {
     Message.error('读取 Markdown 文件失败: ' + error.message)
     isMarkdownFile.value = false
@@ -2065,39 +2028,30 @@ const renderMarkdown = (markdown) => {
   }
 }
 
-const onImageLoad = () => {
+const onImageLoad = (e) => {
   imageLoading.value = false
+  imageWidth.value = e.target.naturalWidth
+  imageHeight.value = e.target.naturalHeight
 }
 
 const onImageError = () => {
   imageLoading.value = false
-  isImageFile.value = false
+  isImageView.value = false
   Message.error('图片加载失败，可能是格式不支持或文件损坏')
 }
 
-const getImageType = () => {
-  if (!filePath.value) return ''
-  const ext = filePath.value.split('.').pop()?.toLowerCase() || ''
-  const typeMap = {
-    'jpg': 'JPEG',
-    'jpeg': 'JPEG',
-    'png': 'PNG',
-    'gif': 'GIF',
-    'bmp': 'BMP',
-    'svg': 'SVG',
-    'webp': 'WebP',
-    'ico': 'ICO'
-  }
-  return typeMap[ext] || ext.toUpperCase()
-}
+const currentImageDimensions = computed(() => {
+  if (!imageWidth.value || !imageHeight.value) return ''
+  return `${imageWidth.value}×${imageHeight.value}`
+})
 
 const performFileRead = async () => {
   const fileToRead = selectedFilePath.value || filePath.value
   if (!fileToRead) return
 
-  isImageFile.value = false
-  isVideoFile.value = false
-  isAudioFile.value = false
+  isImageView.value = false
+  isVideoView.value = false
+  isAudioView.value = false
   isPdfFile.value = false
   isHtmlFile.value = false // 纯文本文件不是 HTML
   isMarkdownFile.value = false // 纯文本文件不是 Markdown
@@ -2119,7 +2073,7 @@ const performFileRead = async () => {
         suggestion = '• DBeaver（推荐）\n• HeidiSQL\n• Navicat\n• VS Code'
       } else if (ext === 'json') {
         suggestion = '• VS Code（带格式化）\n• 在线 JSON 查看器\n• jq 命令行工具'
-      } else if (FILE_EXTENSIONS.CODE.includes(ext)) {
+      } else if (isCode(filePath.value)) {
         suggestion = '• VS Code（推荐）\n• Sublime Text\n• JetBrains IDE'
       }
 
@@ -2165,7 +2119,7 @@ const performFileRead = async () => {
     }
 
     // 保存原始内容，用于检测修改
-    originalFileContent.value = fileContent.value
+    originalContent.value = fileContent.value
 
     // 移除明显的成功提示，保持界面简洁
   } catch (error) {
@@ -2364,7 +2318,7 @@ const saveToFile = async (targetPath, fileName, isShortcut) => {
 
     // 更新状态
     selectedFilePath.value = targetPath
-    originalFileContent.value = fileContent.value
+    originalContent.value = fileContent.value
 
     // 如果保存到当前目录，刷新文件列表
     const fileDir = targetPath.substring(0, Math.max(
@@ -2420,15 +2374,15 @@ const handleDeleteFile = async () => {
         // 清空编辑器内容
         selectedFilePath.value = ''
         fileContent.value = ''
-        isImageFile.value = false
-        isVideoFile.value = false
-        isAudioFile.value = false
+        isImageView.value = false
+        isVideoView.value = false
+        isAudioView.value = false
         isPdfFile.value = false
         isHtmlFile.value = false
         isMarkdownFile.value = false
         isBinaryFile.value = false
-        imagePreviewUrl.value = ''
-        renderedContent.value = ''
+        previewUrl.value = ''
+        rendered.value = ''
 
         // 刷新文件列表
         if (filePath.value) {
@@ -2622,7 +2576,7 @@ const handleFileClick = (item) => {
 const handleFileDoubleClick = (item) => {
   // 如果是文件夹，则进入文件夹
   if (item.is_dir) {
-    navigateToPath(item.path)
+    goToPath(item.path)
   } else {
     // 如果是文件，打开查看
     selectFile(item.path)
@@ -2742,15 +2696,15 @@ const handleDeleteSelectedFile = async () => {
         if (selectedFilePath.value === targetPath) {
           selectedFilePath.value = ''
           fileContent.value = ''
-          isImageFile.value = false
-          isVideoFile.value = false
-          isAudioFile.value = false
+          isImageView.value = false
+          isVideoView.value = false
+          isAudioView.value = false
           isPdfFile.value = false
           isHtmlFile.value = false
           isMarkdownFile.value = false
           isBinaryFile.value = false
-          imagePreviewUrl.value = ''
-          renderedContent.value = ''
+          previewUrl.value = ''
+          rendered.value = ''
         }
 
         // 刷新文件列表
@@ -2898,7 +2852,7 @@ const handleCreateFile = () => {
         // 自动打开新创建的文件进行编辑
         selectedFilePath.value = fullPath
         fileContent.value = ''
-        originalFileContent.value = ''
+        originalContent.value = ''
 
         // 根据文件类型设置预览模式
         const ext = fileName.split('.').pop()?.toLowerCase() || ''
@@ -2906,12 +2860,12 @@ const handleCreateFile = () => {
           isHtmlFile.value = true
           isMarkdownFile.value = false
           isEditMode.value = true // 创建新文件默认进入编辑模式
-          renderedContent.value = ''
+          rendered.value = ''
         } else if (ext === 'md' || ext === 'markdown') {
           isMarkdownFile.value = true
           isHtmlFile.value = false
           isEditMode.value = true // 创建新文件默认进入编辑模式
-          renderedContent.value = ''
+          rendered.value = ''
         } else {
           // 文本文件
           isHtmlFile.value = false
@@ -3003,8 +2957,8 @@ const deleteFile = async () => {
  * 重置内容到原始文件内容
  */
 const resetContent = () => {
-  if (originalFileContent.value !== undefined) {
-    fileContent.value = originalFileContent.value
+  if (originalContent.value !== undefined) {
+    fileContent.value = originalContent.value
     Message.success('内容已重置到原始状态')
   } else {
     Message.warning('没有可重置的原始内容')
@@ -3038,6 +2992,111 @@ const openFavoriteFile = (path) => {
   }
 }
 
+// ========== 收藏夹拖拽排序 ==========
+
+// 拖拽状态
+const draggingState = ref({
+  isDragging: false,
+  draggedIndex: -1,
+  draggedItem: null,
+})
+
+// 长按定时器
+const longPressTimer = ref(null)
+const LONG_PRESS_DURATION = 500 // 500ms 长按
+
+// 开始长按
+const onLongPressStart = (event, index) => {
+  // 只响应左键或触摸
+  if (event.type === 'mousedown' && event.button !== 0) {
+    return
+  }
+
+  longPressTimer.value = setTimeout(() => {
+    // 长按触发，开始拖拽
+    draggingState.value = {
+      isDragging: true,
+      draggedIndex: index,
+      draggedItem: favoriteFiles.value[index],
+    }
+    Message.info('开始拖拽排序')
+  }, LONG_PRESS_DURATION)
+}
+
+// 取消长按
+const onLongPressCancel = () => {
+  if (longPressTimer.value) {
+    clearTimeout(longPressTimer.value)
+    longPressTimer.value = null
+  }
+}
+
+// 拖拽开始
+const onDragStart = (event, index) => {
+  if (!draggingState.value.isDragging) {
+    event.preventDefault()
+    return
+  }
+
+  // 设置拖拽数据
+  event.dataTransfer.effectAllowed = 'move'
+  event.dataTransfer.setData('text/plain', index.toString())
+
+  // 设置拖拽图像（可选）
+  event.dataTransfer.setDragImage(event.target, 0, 0)
+}
+
+// 拖拽经过
+const onDragOver = (event) => {
+  event.preventDefault()
+  event.dataTransfer.dropEffect = 'move'
+}
+
+// 放置
+const onDrop = (event, targetIndex) => {
+  event.preventDefault()
+
+  if (!draggingState.value.isDragging) {
+    return
+  }
+
+  const fromIndex = draggingState.value.draggedIndex
+
+  if (fromIndex === -1 || fromIndex === targetIndex) {
+    // 重置拖拽状态
+    draggingState.value = {
+      isDragging: false,
+      draggedIndex: -1,
+      draggedItem: null,
+    }
+    return
+  }
+
+  // 执行重排序
+  const success = reorderFavorites(fromIndex, targetIndex)
+
+  if (success) {
+    Message.success('排序已更新')
+  }
+
+  // 重置拖拽状态
+  draggingState.value = {
+    isDragging: false,
+    draggedIndex: -1,
+    draggedItem: null,
+  }
+}
+
+// 拖拽结束
+const onDragEnd = () => {
+  // 重置拖拽状态
+  draggingState.value = {
+    isDragging: false,
+    draggedIndex: -1,
+    draggedItem: null,
+  }
+}
+
 // ========== 拖拽调整高度 ==========
 
 const startResize = (e) => {
@@ -3068,24 +3127,24 @@ const startResize = (e) => {
 
 // 获取当前文件扩展名（用于代码高亮）
 const currentFileExtension = computed(() => {
-  let path = ''
-
-  // 优先使用选中的文件路径（点击文件列表时）
-  if (selectedFilePath.value) {
-    path = selectedFilePath.value
-  } else if (filePath.value) {
-    path = filePath.value
-  }
-
+  const path = selectedFilePath.value || filePath.value
   if (!path) return ''
 
-  // 从路径中提取文件名和扩展名
-  const fileName = path.split(/[/\\]/).pop() || ''
-  const parts = fileName.split('.')
-  if (parts.length > 1) {
-    return parts.pop()?.toLowerCase() || ''
+  // 特殊文件名映射（无扩展名）
+  const fileName = path.split(/[/\\]/).pop()?.toLowerCase() || ''
+  const specialFiles = {
+    'dockerfile': 'dockerfile',
+    'containerfile': 'dockerfile',
+    'makefile': 'makefile',
+    'cmakelists.txt': 'cmake',
+    '.gitignore': 'gitignore',
+    '.env': 'properties',
   }
-  return ''
+
+  if (specialFiles[fileName]) return specialFiles[fileName]
+
+  // 普通文件：使用 getExt 函数
+  return getExt(path)
 })
 
 // 判断当前文件是否支持预览模式（HTML 和 Markdown 支持）
@@ -3093,59 +3152,45 @@ const canPreviewFile = computed(() => {
   return isHtmlFile.value || isMarkdownFile.value
 })
 
-// 检查文件内容是否已修改（包括新文件）
-const isFileModified = computed(() => {
-  // 检查是否为可编辑的文件类型
-  const isEditable = !isImageFile.value &&
-                    !isVideoFile.value &&
-                    !isAudioFile.value &&
-                    !isPdfFile.value &&
-                    !isBinaryFile.value
-
-  // 检查是否有内容
-  const hasContent = fileContent.value !== '' && fileContent.value.trim() !== ''
-
-  // 情况1：已选择文件，内容已修改
-  const hasModified = selectedFilePath.value && fileContent.value !== originalFileContent.value
-
-  // 情况2：未选择文件，但有新内容（新建文件）
-  const isNewFile = !selectedFilePath.value && hasContent
-
-  return isEditable && (hasModified || isNewFile)
-})
-
-// 是否为可编辑文件类型（用于显示/隐藏保存按钮）
-const isEditableFile = computed(() => {
-  return !isImageFile.value &&
-         !isVideoFile.value &&
-         !isAudioFile.value &&
+// 检查是否为可编辑的视图（非预览模式）
+const isEditableView = computed(() => {
+  return !isImageView.value &&
+         !isVideoView.value &&
+         !isAudioView.value &&
          !isPdfFile.value &&
          !isBinaryFile.value
 })
 
-// 是否可以保存文件（只有文本文件可以保存，且内容已修改）
-const canSaveFile = computed(() => {
-  return !isImageFile.value &&
-         !isVideoFile.value &&
-         !isAudioFile.value &&
-         !isPdfFile.value &&
-         !isBinaryFile.value &&
-         fileContent.value !== '' &&
-         originalFileContent.value !== fileContent.value
+// 检查文件内容是否已修改（包括新文件）
+const isFileModified = computed(() => {
+  // 检查是否有内容
+  const hasContent = fileContent.value !== '' && fileContent.value.trim() !== ''
+
+  // 情况1：已选择文件，内容已修改
+  const hasModified = selectedFilePath.value && fileContent.value !== originalContent.value
+
+  // 情况2：未选择文件，但有新内容（新建文件）
+  const isNewFile = !selectedFilePath.value && hasContent
+
+  return isEditableView.value && (hasModified || isNewFile)
 })
 
-// 是否可以重置内容
-const canResetContent = computed(() => {
-  return !isImageFile.value &&
-         !isVideoFile.value &&
-         !isAudioFile.value &&
-         !isPdfFile.value &&
-         !isBinaryFile.value &&
-         fileContent.value !== '' &&
-         originalFileContent.value !== undefined &&
-         originalFileContent.value !== fileContent.value
+// 检查内容是否已修改（提取公共逻辑）
+const contentChanged = computed(() => {
+  return fileContent.value !== '' &&
+         fileContent.value !== originalContent.value
 })
 
+// 是否可以保存文件
+const canSaveFile = computed(() => isEditableView.value && contentChanged.value)
+
+// 是否可以重置内容
+const canResetContent = computed(() =>
+  isEditableView.value &&
+  contentChanged.value &&
+  originalContent.value !== undefined
+)
+
 // ========== 水平拖拽调整面板宽度 ==========
 
 const startResizeHorizontal = (e) => {
@@ -3208,10 +3253,10 @@ watch(isEditMode, (newMode) => {
   if (!newMode) {
     if (isHtmlFile.value) {
       // HTML: 直接渲染 fileContent
-      renderedContent.value = fileContent.value
+      rendered.value = fileContent.value
     } else if (isMarkdownFile.value) {
       // Markdown: 重新转换
-      renderedContent.value = renderMarkdown(fileContent.value)
+      rendered.value = renderMarkdown(fileContent.value)
     }
   }
 })
@@ -3272,13 +3317,13 @@ const handleKeyDown = (e) => {
   // Alt+← 后退到上一个目录
   if (e.altKey && e.key === 'ArrowLeft') {
     e.preventDefault() // 阻止浏览器默认行为
-    navigateBack()
+    goBack()
   }
 
   // Alt+→ 前进到下一个目录
   if (e.altKey && e.key === 'ArrowRight') {
     e.preventDefault() // 阻止浏览器默认行为
-    navigateForward()
+    goForward()
   }
 
   // F2 重命名选中的文件或目录
@@ -3304,6 +3349,21 @@ const handleKeyDown = (e) => {
   }
 }
 
+// 处理iframe中的链接点击
+const handleLinkClick = (e) => {
+  if (e.data && e.data.type === 'open-link' && e.data.url) {
+    debugLog('[handleLinkClick] 收到链接点击:', e.data.url)
+    // 在系统默认浏览器中打开链接
+    try {
+      BrowserOpenURL(e.data.url)
+    } catch (error) {
+      console.error('[handleLinkClick] 打开链接失败:', error)
+      // 降级处理：使用window.open
+      window.open(e.data.url, '_blank')
+    }
+  }
+}
+
 onMounted(() => {
   // 获取文件服务器URL
   getFileServerURL().then(url => {
@@ -3326,6 +3386,8 @@ onMounted(() => {
   window.addEventListener('click', hideContextMenu)
   // 添加滚动事件监听（关闭右键菜单）
   window.addEventListener('scroll', hideContextMenu, true)
+  // 添加消息监听（处理iframe中的链接点击）
+  window.addEventListener('message', handleLinkClick)
 })
 
 onUnmounted(() => {
@@ -3335,6 +3397,8 @@ onUnmounted(() => {
   window.removeEventListener('click', hideContextMenu)
   // 移除滚动事件监听
   window.removeEventListener('scroll', hideContextMenu, true)
+  // 移除消息监听
+  window.removeEventListener('message', handleLinkClick)
 })
 </script>
 
@@ -3475,6 +3539,25 @@ onUnmounted(() => {
   opacity: 1;
 }
 
+/* 拖拽样式 */
+.sidebar-item-dragging {
+  opacity: 0.5;
+  background: var(--color-fill-3);
+  cursor: grabbing !important;
+  transform: scale(0.98);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.sidebar-item-drag-over {
+  border: 2px dashed var(--color-primary-light-3);
+  background: var(--color-fill-1);
+}
+
+/* 防止拖拽时显示删除按钮 */
+.sidebar-item-dragging .sidebar-item-remove {
+  opacity: 0 !important;
+}
+
 .sidebar-empty {
   display: flex;
   flex-direction: column;
@@ -3997,6 +4080,18 @@ onUnmounted(() => {
   justify-content: center;
 }
 
+.media-meta .file-name {
+  font-weight: 500;
+  color: var(--color-text-2);
+}
+
+.media-meta .image-dimensions {
+  padding: 2px 8px;
+  background: var(--color-fill-2);
+  border-radius: 4px;
+  font-family: monospace;
+}
+
 /* ========== 文本编辑器 ========== */
 .text-editor-wrapper {
   display: flex;
diff --git a/web/src/composables/useFavoriteFiles.js b/web/src/composables/useFavoriteFiles.js
index b154a48..1d218bf 100644
--- a/web/src/composables/useFavoriteFiles.js
+++ b/web/src/composables/useFavoriteFiles.js
@@ -91,8 +91,7 @@ export function useFavoriteFiles(storageKey, options = {}) {
     if (index > -1) {
       // 已收藏，执行取消收藏
       favoriteFiles.value.splice(index, 1)
-      sortFavorites() // 排序
-      save(favoriteFiles.value)
+      save(favoriteFiles.value) // 直接保存，不重新排序
 
       onRemove(item)
       Message.info(`已取消收藏: ${item.name}`)
@@ -108,11 +107,10 @@ export function useFavoriteFiles(storageKey, options = {}) {
         path: item.path,
         name: item.name,
         is_dir: item.is_dir || false,
-        created_at: Date.now(), // 添加时间戳
+        created_at: Date.now(), // 添加时间戳（用于 getSortedFavorites）
       })
 
-      sortFavorites() // 排序
-      save(favoriteFiles.value)
+      save(favoriteFiles.value) // 直接保存，不重新排序（新项目添加到末尾）
 
       onAdd(item)
       Message.success(`已收藏: ${item.name}`)
@@ -141,8 +139,7 @@ export function useFavoriteFiles(storageKey, options = {}) {
     const item = favoriteFiles.value[index]
     favoriteFiles.value.splice(index, 1)
 
-    sortFavorites() // 排序
-    save(favoriteFiles.value)
+    save(favoriteFiles.value) // 直接保存，不重新排序
 
     onRemove(item)
     Message.info(`已取消收藏: ${item.name}`)
@@ -178,7 +175,6 @@ export function useFavoriteFiles(storageKey, options = {}) {
     const executeClear = () => {
       const count = favoriteFiles.value.length
       favoriteFiles.value = []
-      sortFavorites() // 保持一致性
       save([])
 
       Message.success(`已清空 ${count} 个收藏项`)
@@ -229,10 +225,39 @@ export function useFavoriteFiles(storageKey, options = {}) {
     )
   }
 
-  // 组件挂载时加载数据并排序
+  /**
+   * 重新排序收藏列表（拖拽排序）
+   * @param {number} fromIndex - 源索引
+   * @param {number} toIndex - 目标索引
+   * @returns {boolean} 是否成功重排序
+   */
+  const reorderFavorites = (fromIndex, toIndex) => {
+    if (!Array.isArray(favoriteFiles.value)) {
+      return false
+    }
+
+    if (fromIndex < 0 || fromIndex >= favoriteFiles.value.length ||
+        toIndex < 0 || toIndex >= favoriteFiles.value.length) {
+      return false
+    }
+
+    if (fromIndex === toIndex) {
+      return false
+    }
+
+    // 移动数组元素
+    const [movedItem] = favoriteFiles.value.splice(fromIndex, 1)
+    favoriteFiles.value.splice(toIndex, 0, movedItem)
+
+    // 保存新顺序
+    save(favoriteFiles.value)
+
+    return true
+  }
+
+  // 组件挂载时加载数据（不自动排序，保持用户拖拽的顺序）
   onMounted(() => {
     load()
-    sortFavorites() // 确保加载后的数据是排序的
   })
 
   return {
@@ -248,6 +273,7 @@ export function useFavoriteFiles(storageKey, options = {}) {
     getSortedFavorites,
     searchFavorites,
     sortFavorites,
+    reorderFavorites,
     load,
     save,
   }
@@ -264,6 +290,7 @@ export function useFavoriteFiles(storageKey, options = {}) {
  * @property {Function} getSortedFavorites - 获取排序后的列表
  * @property {Function} searchFavorites - 搜索收藏
  * @property {Function} sortFavorites - 手动排序收藏列表
+ * @property {Function} reorderFavorites - 拖拽重新排序
  * @property {Function} load - 手动加载数据
  * @property {Function} save - 手动保存数据
  */
diff --git a/web/src/composables/useFileOperations.js b/web/src/composables/useFileOperations.js
index bf0c19f..a1946d9 100644
--- a/web/src/composables/useFileOperations.js
+++ b/web/src/composables/useFileOperations.js
@@ -107,7 +107,8 @@ export function useFileOperations(options = {}) {
       return true
     } catch (error) {
       onError('listDirectory', error)
-      Message.error(`列出目录失败: ${error.message || error}`)
+      const errorMsg = error.message || error || '未知错误'
+      Message.error(`列出目录失败 [${targetPath}]: ${errorMsg}`)
       return false
     } finally {
       fileLoading.value = false
diff --git a/web/src/utils/constants.js b/web/src/utils/constants.js
index 31a2e3f..35ed718 100644
--- a/web/src/utils/constants.js
+++ b/web/src/utils/constants.js
@@ -70,9 +70,12 @@ export const FILE_EXTENSIONS = {
   // 代码文件
   CODE: [
     'js', 'ts', 'jsx', 'tsx', 'vue', 'py', 'java', 'c', 'cpp', 'h', 'go', 'rs', 'php', 'rb', 'cs', 'swift', 'kt',
-    'scala', 'html', 'htm', 'css', 'scss', 'sass', 'less', 'json', 'xml', 'yaml', 'yml', 'sql', 'sh', 'bat', 'ps1'
+    'scala', 'css', 'scss', 'sass', 'less', 'json', 'xml', 'yaml', 'yml', 'sql', 'sh', 'bat', 'ps1'
   ],
 
+  // 标记语言文件（用于特殊预览）
+  MARKUP: ['html', 'htm', 'md', 'markdown'],
+
   // 数据库文件
   DATABASE: ['db', 'sqlite', 'mdb', 'accdb'],
 
@@ -271,7 +274,7 @@ export const PATH_ICONS = {
  * 文件大小单位
  * @description 用于文件大小格式化的单位数组
  */
-export const BYTE_UNITS = ['B', 'KMGTPE']
+export const BYTE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB']
 
 /**
  * 默认配置值
@@ -304,3 +307,12 @@ export const FILE_SIZE_FORMAT = {
   UNIT: 1024, // 使用1024进制（KiB, MiB等）
   DECIMAL_PLACES: 2, // 保留小数位数
 }
+
+/**
+ * 文件大小阈值配置
+ * @description 用于文件处理逻辑的大小限制
+ */
+export const FILE_SIZE_THRESHOLDS = {
+  LARGE_FILE: 100 * 1024, // 100KB - 大文件检测阈值
+  MAX_TEXT_DISPLAY: 5 * 1024 * 1024, // 5MB - 文本文件最大显示大小
+}
diff --git a/web/src/utils/fileHelpers.js b/web/src/utils/fileHelpers.js
new file mode 100644
index 0000000..c1d4a60
--- /dev/null
+++ b/web/src/utils/fileHelpers.js
@@ -0,0 +1,41 @@
+/**
+ * 文件类型工具函数
+ */
+
+import { FILE_EXTENSIONS } from './constants'
+
+// 获取文件扩展名
+export const getExt = (path) => {
+  if (!path) return ''
+  const dot = path.lastIndexOf('.')
+  const slash = Math.max(path.lastIndexOf('/'), path.lastIndexOf('\\'))
+  if (dot === -1 || dot < slash) return ''
+  return path.slice(dot + 1).toLowerCase()
+}
+
+// 文件类型检查
+export const isImage = (path) => FILE_EXTENSIONS.IMAGE.includes(getExt(path))
+export const isVideo = (path) => FILE_EXTENSIONS.VIDEO_BROWSER.includes(getExt(path))
+export const isAudio = (path) => FILE_EXTENSIONS.AUDIO.includes(getExt(path))
+export const isPdf = (path) => getExt(path) === 'pdf'
+export const isHtml = (path) => { const e = getExt(path); return e === 'html' || e === 'htm' }
+export const isMarkdown = (path) => { const e = getExt(path); return e === 'md' || e === 'markdown' }
+export const isCode = (path) => FILE_EXTENSIONS.CODE.includes(getExt(path))
+export const isArchive = (path) => FILE_EXTENSIONS.ARCHIVE.includes(getExt(path))
+export const isDatabase = (path) => FILE_EXTENSIONS.DATABASE.includes(getExt(path))
+export const isExecutable = (path) => FILE_EXTENSIONS.EXECUTABLE.includes(getExt(path))
+
+// 复合检查
+export const isVideoAny = (path) => {
+  const e = getExt(path)
+  return FILE_EXTENSIONS.VIDEO_BROWSER.includes(e) || FILE_EXTENSIONS.VIDEO_EXTERNAL.includes(e)
+}
+
+export const isEditableDoc = (path) => {
+  const e = getExt(path)
+  return FILE_EXTENSIONS.DOCUMENT.includes(e) && e !== 'pdf'
+}
+
+export const isBinary = (path) => isVideoAny(path) || isAudio(path) || isArchive(path) || isExecutable(path)
+export const canPreview = (path) => isImage(path) || isVideo(path) || isAudio(path) || isPdf(path)
+export const canEdit = (path) => !isBinary(path) && !isImage(path)
diff --git a/web/src/views/db-cli/index.vue b/web/src/views/db-cli/index.vue
index 7d2d668..6dc4ed1 100644
--- a/web/src/views/db-cli/index.vue
+++ b/web/src/views/db-cli/index.vue
@@ -129,6 +129,11 @@
 </template>
 
 <script setup lang="ts">
+// 定义组件名称，用于 KeepAlive 缓存
+defineOptions({
+  name: 'DbCli'
+})
+
 import { ref, watch, provide, computed, nextTick, onMounted, onUnmounted, h, onBeforeUpdate } from 'vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import { IconUp, IconDown, IconCopy } from '@arco-design/web-vue/es/icon'