From 7dbd57a8b6ae8ab12ae521c8728495df8c56ea8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=9D=E5=B0=98?= <237809796@qq.com>
Date: Sat, 11 Apr 2026 16:46:43 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=EF=BC=9AWails=E5=8D=87?=
 =?UTF-8?q?=E7=BA=A7/mermaid=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2/=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E9=AB=98=E4=BA=AE=E4=BF=AE=E5=A4=8D/=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=B3=BB=E7=BB=9FUI=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wails v2.12.0升级（App绑定新增API、runtime类型扩展）
- 修复mermaid暗色主题切换渲染失败（SVG textContent污染→data-mermaid-src保存源码）
- 修复代码高亮全语言失效（languageMap静态白名单替代运行时hljs检查）
- 文件系统：FileListPanel重写、FileItemRow合并删除、Toolbar简化
- 新增剪贴板图片粘贴（Ctrl+V粘贴图片到当前目录）
- 死代码清理：DeviceTest/errorHandler/useLocalStorage移除
- MarkdownEditor优化、theme store增强、CodeMirror加载器精简
---
 app.go                                        |  67 +-
 go.mod                                        |   5 +-
 go.sum                                        |   6 +-
 internal/filesystem/asset_handler.go          |  27 +-
 internal/filesystem/path_validator.go         |  22 +-
 internal/filesystem/service.go                |  41 +-
 web/index.html                                |   1 +
 web/package-lock.json                         |   6 +-
 web/package.json                              |   4 +-
 web/package.json.md5                          |   2 +-
 web/src/App.vue                               |   2 +
 web/src/api/system.ts                         |  19 +-
 web/src/api/types.ts                          |   1 +
 web/src/components/DeviceTest.vue             | 725 ------------------
 .../FileSystem/components/FileEditorPanel.vue |  15 +-
 .../FileSystem/components/FileItemRow.vue     | 255 ------
 .../FileSystem/components/FileListPanel.vue   | 543 ++++++++++---
 .../FileSystem/components/Toolbar.vue         |   1 -
 web/src/components/FileSystem/index.vue       | 216 ++++--
 web/src/components/MarkdownEditor.vue         |  68 +-
 web/src/composables/index.ts                  |   1 -
 web/src/main.js                               |   3 +-
 web/src/stores/theme.ts                       |   9 +
 web/src/stores/update.ts                      |  19 +
 web/src/style.css                             |   6 +
 web/src/types/file-system.ts                  |   4 +
 web/src/utils/codeMirrorLoader.js             |  72 +-
 web/src/utils/codemirrorExports.js            |  20 +-
 web/src/utils/constants.js                    |   3 +
 web/src/utils/errorHandler.js                 |  63 --
 web/src/utils/fileUtils.js                    |  52 +-
 web/src/utils/languageMap.ts                  |  31 +-
 web/src/utils/markedExtensions.ts             | 101 ++-
 web/src/utils/resize.ts                       | 107 +++
 web/src/wailsjs/wailsjs/go/main/App.d.ts      |   2 +
 web/src/wailsjs/wailsjs/go/main/App.js        |   4 +
 web/src/wailsjs/wailsjs/go/models.ts          |  14 +
 web/src/wailsjs/wailsjs/runtime/runtime.d.ts  |  83 +-
 web/src/wailsjs/wailsjs/runtime/runtime.js    |  56 ++
 web/vite.config.js                            |   2 +-
 40 files changed, 1274 insertions(+), 1404 deletions(-)
 delete mode 100644 web/src/components/DeviceTest.vue
 delete mode 100644 web/src/components/FileSystem/components/FileItemRow.vue
 delete mode 100644 web/src/utils/errorHandler.js
 create mode 100644 web/src/utils/resize.ts

diff --git a/app.go b/app.go
index e49f4ff..5b07bf6 100644
--- a/app.go
+++ b/app.go
@@ -6,11 +6,13 @@ import (
 	"net/http"
 	"os"
 	"path/filepath"
+	"regexp"
 	stdruntime "runtime"
 	"strings"
 	"time"
 
 	"github.com/jung-kurt/gofpdf"
+	"golang.org/x/sys/windows/registry"
 	"u-desk/internal/api"
 	"u-desk/internal/common"
 	"u-desk/internal/database"
@@ -22,6 +24,9 @@ import (
 	"github.com/wailsapp/wails/v2/pkg/runtime"
 )
 
+// PDF 有序列表正则（包级变量，避免循环内重复编译）
+var orderedListRe = regexp.MustCompile(`^\d+\.\s+`)
+
 // App 应用结构体
 type App struct {
 	ctx             context.Context
@@ -37,6 +42,10 @@ type App struct {
 	isAlwaysOnTop   bool
 }
 
+// App 方法命名约定：
+// - 多参数操作 → XxxRequest 结构体（Wails 自动生成 TS 类型）
+// - 单参数查询/简单操作 → 直接参数
+
 // NewApp 创建新的应用实例
 func NewApp() *App {
 	return &App{}
@@ -286,6 +295,17 @@ func (a *App) WriteFile(req WriteFileRequest) error {
 	return a.filesystem.WriteFile(req.Path, req.Content)
 }
 
+// SaveBase64FileRequest 保存 Base64 编码的二进制文件
+type SaveBase64FileRequest struct {
+	Path    string `json:"path"`
+	Content string `json:"content"` // base64 编码的文件内容
+}
+
+// SaveBase64File 将 base64 内容解码后写入文件（用于图片等二进制数据）
+func (a *App) SaveBase64File(req SaveBase64FileRequest) error {
+	return a.filesystem.SaveBase64File(req.Path, req.Content)
+}
+
 // ListDir 列出目录
 func (a *App) ListDir(path string) ([]map[string]interface{}, error) {
 	return a.filesystem.ListDir(path)
@@ -393,6 +413,31 @@ func (a *App) ResolveShortcut(lnkPath string) (map[string]interface{}, error) {
 	}, nil
 }
 
+// getWindowsSpecialFolder 从注册表读取 Windows 特殊文件夹的真实路径
+// 用户可通过系统设置修改下载/桌面/文档等目录位置，注册表记录实际路径
+func getWindowsSpecialFolder(guid string, fallbackName string) string {
+	key, err := registry.OpenKey(registry.CURRENT_USER,
+		`Software\Microsoft\Windows\CurrentVersion\Explorer\User Shell Folders`,
+	registry.READ)
+	if err != nil {
+		return ""
+	}
+	defer key.Close()
+
+	val, _, err := key.GetStringValue(guid)
+	if err != nil || val == "" {
+		return ""
+	}
+
+	// 展开 %USERPROFILE% 等环境变量
+	path := os.ExpandEnv(val)
+	// 验证路径存在
+	if _, err := os.Stat(path); err != nil {
+		return ""
+	}
+	return path
+}
+
 // GetCommonPaths 获取常用系统路径
 func (a *App) GetCommonPaths() (map[string]string, error) {
 	homeDir, err := os.UserHomeDir()
@@ -401,10 +446,22 @@ func (a *App) GetCommonPaths() (map[string]string, error) {
 	}
 
 	paths := map[string]string{
-		"home":      homeDir,
-		"desktop":   filepath.Join(homeDir, "Desktop"),
-		"documents": filepath.Join(homeDir, "Documents"),
-		"downloads": filepath.Join(homeDir, "Downloads"),
+		"home": homeDir,
+	}
+
+	// Windows: 从注册表读取特殊文件夹真实路径（用户可能已修改位置）
+	folderGUIDs := map[string]string{
+		"desktop":   "{B4BFCC3A-DB2C-424C-B029-7FE99A87C641}",
+		"documents": "{D20B4C7F-5EA7-40D4B25E-039F6F1FCC8A}",
+		"downloads": "{374DE290-123F-4565-9164-39C4925E467B}",
+	}
+	for name, guid := range folderGUIDs {
+		if p := getWindowsSpecialFolder(guid, name); p != "" {
+			paths[name] = p
+		} else {
+			// folderGUIDs 的 key 均为 ASCII，无需 Unicode 处理
+			paths[name] = filepath.Join(homeDir, strings.ToUpper(name[:1])+name[1:])
+		}
 	}
 
 	// Windows: 动态添加所有盘符
@@ -978,7 +1035,7 @@ func (a *App) ExportMarkdownToPDF(markdownContent string) (string, error) {
 			pdf.Cell(10, 7, "•")
 			pdf.Cell(0, 7, strings.TrimPrefix(line, "- "))
 			pdf.Ln(7)
-		} else if strings.HasPrefix(line, "1. ") || strings.HasPrefix(line, "2. ") || strings.HasPrefix(line, "3. ") {
+	} else if orderedListRe.MatchString(line) {
 			// 有序列表
 			pdf.SetFont("Arial", "", 12)
 			pdf.Cell(10, 7, strings.TrimSpace(strings.SplitN(line, ".", 2)[0]) + ".")
diff --git a/go.mod b/go.mod
index 8143602..5336583 100644
--- a/go.mod
+++ b/go.mod
@@ -10,15 +10,17 @@ require (
 	github.com/jung-kurt/gofpdf v1.16.2
 	github.com/redis/go-redis/v9 v9.17.3
 	github.com/shirou/gopsutil/v3 v3.24.5
-	github.com/wailsapp/wails/v2 v2.11.0
+	github.com/wailsapp/wails/v2 v2.12.0
 	github.com/yuin/goldmark v1.8.2
 	go.mongodb.org/mongo-driver/v2 v2.5.0
+	golang.org/x/sys v0.40.0
 	gorm.io/driver/mysql v1.6.0
 	gorm.io/gorm v1.31.1
 )
 
 require (
 	filippo.io/edwards25519 v1.1.0 // indirect
+	git.sr.ht/~jackmordaunt/go-toast/v2 v2.0.3 // indirect
 	github.com/bep/debounce v1.2.1 // indirect
 	github.com/cespare/xxhash/v2 v2.3.0 // indirect
 	github.com/chromedp/sysutil v1.1.0 // indirect
@@ -70,7 +72,6 @@ require (
 	golang.org/x/exp v0.0.0-20260112195511-716be5621a96 // indirect
 	golang.org/x/net v0.49.0 // indirect
 	golang.org/x/sync v0.19.0 // indirect
-	golang.org/x/sys v0.40.0 // indirect
 	golang.org/x/text v0.33.0 // indirect
 	modernc.org/libc v1.67.7 // indirect
 	modernc.org/mathutil v1.7.1 // indirect
diff --git a/go.sum b/go.sum
index 2866750..509ec70 100644
--- a/go.sum
+++ b/go.sum
@@ -1,5 +1,7 @@
 filippo.io/edwards25519 v1.1.0 h1:FNf4tywRC1HmFuKW5xopWpigGjJKiJSV0Cqo0cJWDaA=
 filippo.io/edwards25519 v1.1.0/go.mod h1:BxyFTGdWcka3PhytdK4V28tE5sGfRvvvRV7EaN4VDT4=
+git.sr.ht/~jackmordaunt/go-toast/v2 v2.0.3 h1:N3IGoHHp9pb6mj1cbXbuaSXV/UMKwmbKLf53nQmtqMA=
+git.sr.ht/~jackmordaunt/go-toast/v2 v2.0.3/go.mod h1:QtOLZGz8olr4qH2vWK0QH0w0O4T9fEIjMuWpKUsH7nc=
 github.com/bep/debounce v1.2.1 h1:v67fRdBA9UQu2NhLFXrSg0Brw7CexQekrBwDMM8bzeY=
 github.com/bep/debounce v1.2.1/go.mod h1:H8yggRPQKLUhUoqrJC1bO2xNya7vanpDl7xR3ISbCJ0=
 github.com/boombuler/barcode v1.0.0/go.mod h1:paBWMcWSl3LHKBqUq+rly7CNSldXjb2rDl3JlRe0mD8=
@@ -134,8 +136,8 @@ github.com/wailsapp/go-webview2 v1.0.23 h1:jmv8qhz1lHibCc79bMM/a/FqOnnzOGEisLav+
 github.com/wailsapp/go-webview2 v1.0.23/go.mod h1:qJmWAmAmaniuKGZPWwne+uor3AHMB5PFhqiK0Bbj8kc=
 github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
 github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
-github.com/wailsapp/wails/v2 v2.11.0 h1:seLacV8pqupq32IjS4Y7V8ucab0WZwtK6VvUVxSBtqQ=
-github.com/wailsapp/wails/v2 v2.11.0/go.mod h1:jrf0ZaM6+GBc1wRmXsM8cIvzlg0karYin3erahI4+0k=
+github.com/wailsapp/wails/v2 v2.12.0 h1:BHO/kLNWFHYjCzucxbzAYZWUjub1Tvb4cSguQozHn5c=
+github.com/wailsapp/wails/v2 v2.12.0/go.mod h1:mo1bzK1DEJrobt7YrBjgxvb5Sihb1mhAY09hppbibQg=
 github.com/xdg-go/pbkdf2 v1.0.0 h1:Su7DPu48wXMwC3bs7MCNG+z4FhcyEuz5dlvchbq0B0c=
 github.com/xdg-go/pbkdf2 v1.0.0/go.mod h1:jrpuAogTd400dnrH08LKmI/xc1MbPOebTwRqcT5RDeI=
 github.com/xdg-go/scram v1.2.0 h1:bYKF2AEwG5rqd1BumT4gAnvwU/M9nBp2pTSxeZw7Wvs=
diff --git a/internal/filesystem/asset_handler.go b/internal/filesystem/asset_handler.go
index 6fe1a85..544df87 100644
--- a/internal/filesystem/asset_handler.go
+++ b/internal/filesystem/asset_handler.go
@@ -41,8 +41,14 @@ var (
 	es6ImportFromRegex = regexp.MustCompile(`import\s+([\s\S]*?)\s+from\s+["']([^"']+)["']`)
 	es6DynamicImport   = regexp.MustCompile(`import\s*\(\s*["']([^"']+)["']\s*\)`)
 	es6BareImport      = regexp.MustCompile(`(?m)^\s*import\s+["']([^"']+)["']`)
+
+	// HTML 预览路径修复
+	locationPathRegex = regexp.MustCompile(`\blocation\.pathname\b`)
 )
 
+// HTML 属性正则缓存（避免 replaceHtmlTagAttribute 中重复编译）
+var attrRegexCache sync.Map // map[string]*regexp.Regexp
+
 // LocalFileServer 本地文件服务器（独立的 HTTP 服务器）
 type LocalFileServer struct {
 	server *http.Server
@@ -501,6 +507,11 @@ func handleHtmlPreviewRequest(w http.ResponseWriter, r *http.Request) {
 
 	// 解析参数
 	filePath := r.URL.Query().Get("path")
+	var err error
+	if filePath, err = url.QueryUnescape(filePath); err != nil {
+		http.Error(w, "Invalid path encoding", http.StatusBadRequest)
+		return
+	}
 	theme := r.URL.Query().Get("theme")
 	if theme == "" {
 		theme = "light"
@@ -536,6 +547,12 @@ func handleHtmlPreviewRequest(w http.ResponseWriter, r *http.Request) {
 	// 转换资源路径（将相对路径和绝对路径都转换为完整的本地文件服务器 URL）
 	processedContent := transformHtmlResourcePaths(string(content), baseDir)
 
+	// 修复 JS 中基于 location.pathname 的相对路径计算
+	// 预览模式下 location.pathname = "/localfs/html-preview"，与实际文件路径不一致
+	// ⚠️ 会替换所有出现位置（含JS字符串内），HTML预览场景下可接受
+	correctPathname := `"/localfs/` + strings.ReplaceAll(baseDir, "\\", "/") + `/`
+	processedContent = locationPathRegex.ReplaceAllString(processedContent, correctPathname)
+
 	// 注入链接点击拦截脚本
 	finalContent := injectLinkInterceptor(processedContent)
 
@@ -616,8 +633,14 @@ func transformHtmlResourcePaths(htmlContent string, baseDir string) string {
 // replaceHtmlTagAttribute 替换 HTML 标签中的属性路径
 func replaceHtmlTagAttribute(html string, pattern *regexp.Regexp, attrName string, baseDir string) string {
 	return pattern.ReplaceAllStringFunc(html, func(match string) string {
-		// 提取属性值
-		attrRegex := regexp.MustCompile(fmt.Sprintf(`%s=["']([^"']+)["']`, attrName))
+		// 提取属性值（使用缓存的正则）
+		var attrRegex *regexp.Regexp
+		if v, ok := attrRegexCache.Load(attrName); ok {
+			attrRegex = v.(*regexp.Regexp)
+		} else {
+			attrRegex = regexp.MustCompile(fmt.Sprintf(`%s=["']([^"']+)["']`, attrName))
+			attrRegexCache.Store(attrName, attrRegex)
+		}
 		attrMatch := attrRegex.FindStringSubmatch(match)
 		if attrMatch == nil {
 			return match
diff --git a/internal/filesystem/path_validator.go b/internal/filesystem/path_validator.go
index 5b9513e..9b9f3dc 100644
--- a/internal/filesystem/path_validator.go
+++ b/internal/filesystem/path_validator.go
@@ -6,6 +6,7 @@ import (
 	"path/filepath"
 	"runtime"
 	"strings"
+	"sync"
 )
 
 // PathValidator 路径验证器接口
@@ -180,16 +181,25 @@ func (v *DefaultPathValidator) isSensitivePath(path string) bool {
 	return false
 }
 
+// 默认路径验证器（缓存，避免每次调用重复初始化）
+var (
+	defaultValidatorOnce sync.Once
+	defaultValidator     PathValidator
+)
+
+func getDefaultValidator() PathValidator {
+	defaultValidatorOnce.Do(func() {
+		defaultValidator = NewPathValidator(DefaultConfig())
+	})
+	return defaultValidator
+}
+
 // isSafePath 兼容函数：保持向后兼容
-// 使用默认配置的路径验证器
 func isSafePath(path string) bool {
-	validator := NewPathValidator(DefaultConfig())
-	return validator.IsSafe(path)
+	return getDefaultValidator().IsSafe(path)
 }
 
 // isSensitivePath 兼容函数：保持向后兼容
-// 使用默认配置检查敏感路径
 func isSensitivePath(path string) bool {
-	validator := NewPathValidator(DefaultConfig())
-	return validator.IsSensitive(path)
+	return getDefaultValidator().IsSensitive(path)
 }
diff --git a/internal/filesystem/service.go b/internal/filesystem/service.go
index c3dc866..040056e 100644
--- a/internal/filesystem/service.go
+++ b/internal/filesystem/service.go
@@ -2,17 +2,22 @@ package filesystem
 
 import (
 	"context"
+	"encoding/base64"
+	"errors"
 	"fmt"
 	"os"
 	"os/exec"
 	"path/filepath"
 	"runtime"
+	"strings"
 	"sync"
 	"time"
 
 	"u-desk/internal/common"
 )
 
+const maxReadWriteSize = 10 * 1024 * 1024 // 10MB 读写上限
+
 // FileOperationResult 文件操作结果
 type FileOperationResult struct {
 	Path      string `json:"path"`
@@ -131,9 +136,8 @@ func (s *FileSystemService) ReadFile(path string) (string, error) {
 	if err != nil {
 		return "", fmt.Errorf("获取文件信息失败: %v", err)
 	}
-	const maxReadSize = 10 * 1024 * 1024 // 10MB
-	if info.Size() > maxReadSize {
-		return "", fmt.Errorf("文件过大 (%.1f MB)，超过读取上限 (%d MB)", float64(info.Size())/1024/1024, maxReadSize/1024/1024)
+	if info.Size() > maxReadWriteSize {
+		return "", fmt.Errorf("文件过大 (%.1f MB)，超过读取上限 (%d MB)", float64(info.Size())/1024/1024, maxReadWriteSize/1024/1024)
 	}
 
 	// 读取文件
@@ -151,30 +155,43 @@ func (s *FileSystemService) Write(path, content string) error {
 	return s.WriteFile(path, content)
 }
 
-// WriteFile 写入文件
-func (s *FileSystemService) WriteFile(path, content string) error {
-	// 路径验证
+// writeFile 内部写入实现（路径验证+大小检查+写入+日志）
+func (s *FileSystemService) writeFileWithLog(path string, data []byte) error {
 	if err := s.validatePath(path); err != nil {
 		return err
 	}
-
-	// 创建目录
 	dir := filepath.Dir(path)
 	if err := os.MkdirAll(dir, DefaultDirPermissions); err != nil {
 		return fmt.Errorf("创建目录失败: %v", err)
 	}
-
-	// 写入文件
-	data := []byte(content)
+	if len(data) > maxReadWriteSize {
+		return fmt.Errorf("文件过大 (%.1f MB)，超过写入上限 (%d MB)", float64(len(data))/1024/1024, maxReadWriteSize/1024/1024)
+	}
 	if err := os.WriteFile(path, data, DefaultFilePermissions); err != nil {
 		s.logWrite(path, int64(len(data)), err)
 		return fmt.Errorf("写入文件失败: %v", err)
 	}
-
 	s.logWrite(path, int64(len(data)), nil)
 	return nil
 }
 
+// WriteFile 写入文件
+func (s *FileSystemService) WriteFile(path, content string) error {
+	return s.writeFileWithLog(path, []byte(content))
+}
+
+// SaveBase64File 将 base64 编码内容解码后写入二进制文件
+func (s *FileSystemService) SaveBase64File(path, base64Content string) error {
+	if strings.TrimSpace(base64Content) == "" {
+		return errors.New("base64 内容不能为空")
+	}
+	data, err := base64.StdEncoding.DecodeString(base64Content)
+	if err != nil {
+		return fmt.Errorf("base64 解码失败: %v", err)
+	}
+	return s.writeFileWithLog(path, data)
+}
+
 // List 列出目录内容（实现 FileService 接口）
 func (s *FileSystemService) List(path string) ([]map[string]interface{}, error) {
 	return s.ListDir(path)
diff --git a/web/index.html b/web/index.html
index 2133f8a..45e6897 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>U-Desk</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🖥️</text></svg>" />
   </head>
   <body>
     <div id="app"></div>
diff --git a/web/package-lock.json b/web/package-lock.json
index 3c74c0c..744cd85 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -28,8 +28,6 @@
         "@codemirror/state": "^6.5.3",
         "@codemirror/theme-one-dark": "^6.1.3",
         "@codemirror/view": "^6.39.8",
-        "@types/highlight.js": "^9.12.4",
-        "@types/mermaid": "^9.1.0",
         "highlight.js": "^11.11.1",
         "mammoth": "^1.11.0",
         "marked": "^17.0.1",
@@ -39,6 +37,8 @@
         "xlsx": "^0.18.5"
       },
       "devDependencies": {
+        "@types/highlight.js": "^9.12.4",
+        "@types/mermaid": "^9.1.0",
         "@vitejs/plugin-vue": "^6.0.3",
         "unplugin-auto-import": "^0.18.3",
         "unplugin-vue-components": "^0.27.4",
@@ -1440,12 +1440,14 @@
       "version": "9.12.4",
       "resolved": "https://registry.npmmirror.com/@types/highlight.js/-/highlight.js-9.12.4.tgz",
       "integrity": "sha512-t2szdkwmg2JJyuCM20e8kR2X59WCE5Zkl4bzm1u1Oukjm79zpbiAv+QjnwLnuuV0WHEcX2NgUItu0pAMKuOPww==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/mermaid": {
       "version": "9.1.0",
       "resolved": "https://registry.npmmirror.com/@types/mermaid/-/mermaid-9.1.0.tgz",
       "integrity": "sha512-rc8QqhveKAY7PouzY/p8ljS+eBSNCv7o79L97RSub/Ic2SQ34ph1Ng3s8wFLWVjvaEt6RLOWtSCsgYWd95NY8A==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/trusted-types": {
diff --git a/web/package.json b/web/package.json
index 60c6f56..d45585b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -28,8 +28,6 @@
     "@codemirror/state": "^6.5.3",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.39.8",
-    "@types/highlight.js": "^9.12.4",
-    "@types/mermaid": "^9.1.0",
     "highlight.js": "^11.11.1",
     "mammoth": "^1.11.0",
     "marked": "^17.0.1",
@@ -39,6 +37,8 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
+    "@types/highlight.js": "^9.12.4",
+    "@types/mermaid": "^9.1.0",
     "@vitejs/plugin-vue": "^6.0.3",
     "unplugin-auto-import": "^0.18.3",
     "unplugin-vue-components": "^0.27.4",
diff --git a/web/package.json.md5 b/web/package.json.md5
index 8f418c8..74e7cb4 100644
--- a/web/package.json.md5
+++ b/web/package.json.md5
@@ -1 +1 @@
-11e4d92d4ca3da6546d1516713da71a8
\ No newline at end of file
+0e1fafcbb6b28922a38f6c5316932015
\ No newline at end of file
diff --git a/web/src/App.vue b/web/src/App.vue
index 9ca2b39..8d5fd67 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -168,6 +168,8 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener('wheel', preventZoom)
   updateStore.removeEventListeners()
+  // 兜底清除所有 Wails 事件监听器，防止泄漏
+  window.runtime?.EventsOffAll?.()
 })
 
 // 窗口控制方法
diff --git a/web/src/api/system.ts b/web/src/api/system.ts
index 2fbc289..36ce5a2 100644
--- a/web/src/api/system.ts
+++ b/web/src/api/system.ts
@@ -12,7 +12,8 @@ import { debugError } from '@/utils/debugLog'
 function transformFile(file: any): File {
   return {
     ...file,
-    isDir: file.is_dir
+    isDir: file.is_dir,
+    modified_time: file.mod_time
   }
 }
 
@@ -99,6 +100,22 @@ export async function writeFile(path: string, content: string): Promise<void> {
   })
 }
 
+/**
+ * 保存 Base64 编码的二进制文件（图片等）
+ */
+export async function saveBase64File(path: string, base64Content: string): Promise<void> {
+  if (!window.go?.main?.App?.SaveBase64File) {
+    throw new Error('SaveBase64File API 不可用')
+  }
+  if (!base64Content) {
+    throw new Error('无效的 base64 内容')
+  }
+  await window.go.main.App.SaveBase64File({
+    path: String(path),
+    content: base64Content
+  })
+}
+
 /**
  * 删除文件或目录
  */
diff --git a/web/src/api/types.ts b/web/src/api/types.ts
index 31e0f64..63f6123 100644
--- a/web/src/api/types.ts
+++ b/web/src/api/types.ts
@@ -105,4 +105,5 @@ export interface File {
   size: number
   isDir: boolean
   modified?: string
+  modified_time?: string
 }
diff --git a/web/src/components/DeviceTest.vue b/web/src/components/DeviceTest.vue
deleted file mode 100644
index 4ae6785..0000000
--- a/web/src/components/DeviceTest.vue
+++ /dev/null
@@ -1,725 +0,0 @@
-<template>
-  <div class="device-test">
-    <!-- 系统信息 -->
-    <a-card class="test-card" title="系统信息">
-      <a-space direction="vertical" :size="16" style="width: 100%">
-        <a-button type="primary" @click="refreshSystemInfo">刷新系统信息</a-button>
-        <a-row :gutter="16">
-          <a-col :span="8">
-            <a-card size="small" title="CPU 信息">
-              <div v-if="cpuInfo">
-                <p>核心数: {{ cpuInfo.cores }}</p>
-                <p>型号: {{ cpuInfo.model }}</p>
-                <p>使用率: {{ cpuInfo.usage }}</p>
-              </div>
-              <div v-else>加载中...</div>
-            </a-card>
-          </a-col>
-          <a-col :span="8">
-            <a-card size="small" title="内存信息">
-              <div v-if="memoryInfo">
-                <p>总内存: {{ memoryInfo.total_str }}</p>
-                <p>已用: {{ memoryInfo.used_str }}</p>
-                <p>可用: {{ memoryInfo.available_str }}</p>
-                <p>使用率: {{ memoryInfo.usage }}</p>
-              </div>
-              <div v-else>加载中...</div>
-            </a-card>
-          </a-col>
-          <a-col :span="8">
-            <a-card size="small" title="系统信息">
-              <div v-if="systemInfo">
-                <p>操作系统: {{ systemInfo.os }}</p>
-                <p>架构: {{ systemInfo.arch }}</p>
-                <p>主机名: {{ systemInfo.hostname }}</p>
-                <p>平台: {{ systemInfo.platform }}</p>
-              </div>
-              <div v-else>加载中...</div>
-            </a-card>
-          </a-col>
-        </a-row>
-        <a-card size="small" title="磁盘信息" v-if="diskInfo && diskInfo.length > 0">
-          <a-table
-              :columns="diskColumns"
-              :data="diskInfo"
-              :pagination="false"
-              size="small"
-          />
-        </a-card>
-      </a-space>
-    </a-card>
-
-    <!-- 文件系统操作 -->
-    <a-card class="test-card" title="文件系统操作">
-      <a-space direction="vertical" :size="16" style="width: 100%">
-        <a-input-group>
-          <a-auto-complete
-              v-model="filePath"
-              :data="pathHistory"
-              placeholder="输入文件或目录路径"
-              style="flex: 1"
-              @select="onPathSelect"
-          />
-          <a-button @click="browseDirectory">浏览</a-button>
-          <a-button type="primary" @click="listDirectory">列出目录</a-button>
-        </a-input-group>
-
-        <!-- 收藏的文件 -->
-        <a-card size="small" title="⭐ 收藏的文件" v-if="favoriteFiles.length > 0">
-          <a-space wrap>
-            <a-tag
-                v-for="fav in favoriteFiles"
-                :key="fav.path"
-                closable
-                @close="removeFavorite(fav.path)"
-                @click="openFavoriteFile(fav.path)"
-                style="cursor: pointer; margin-bottom: 4px"
-            >
-              <template #icon>
-                <span>{{ fav.isDir ? '📁' : '📄' }}</span>
-              </template>
-              {{ fav.name }}
-            </a-tag>
-          </a-space>
-        </a-card>
-
-        <!-- 文件列表和内容区域 -->
-        <div class="file-panels-container">
-          <!-- 文件列表面板 -->
-          <div
-              class="file-panel-left"
-              :style="{ width: filePanelWidth.left + '%' }"
-          >
-            <a-card size="small" title="文件列表">
-              <template #extra>
-                <span style="font-size: 12px; color: #999;">
-                  宽度: {{ filePanelWidth.left.toFixed(1) }}%
-                </span>
-              </template>
-              <a-list
-                  :data="fileList"
-                  :loading="fileLoading"
-                  style="max-height: 300px; overflow-y: auto"
-              >
-                <template #item="{ item }">
-                  <a-list-item>
-                    <a-list-item-meta>
-                      <template #title>
-                        <a-space>
-                          <span>{{ item.is_dir ? '📁' : '📄' }}</span>
-                          <a @click="selectFile(item.path)">{{ item.name }}</a>
-                          <a-button
-                              type="text"
-                              size="small"
-                              @click.stop="toggleFavorite(item)"
-                              :style="{ color: isFavorite(item.path) ? '#ffcd00' : '' }"
-                          >
-                            {{ isFavorite(item.path) ? '⭐' : '☆' }}
-                          </a-button>
-                        </a-space>
-                      </template>
-                      <template #description>
-                        <span v-if="!item.is_dir">大小: {{ formatBytes(item.size) }}</span>
-                        <span>修改时间: {{ item.mod_time }}</span>
-                      </template>
-                    </a-list-item-meta>
-                  </a-list-item>
-                </template>
-              </a-list>
-            </a-card>
-          </div>
-
-          <!-- 水平拖拽条 -->
-          <div
-              class="resize-handle-horizontal"
-              @mousedown="startHorizontalResize"
-              title="← 拖拽调整宽度 →"
-          >
-            <div class="resize-handle-bar-horizontal"></div>
-            <div class="resize-handle-bar-horizontal"></div>
-          </div>
-
-          <!-- 文件内容面板 -->
-          <div
-              class="file-panel-right"
-              :style="{ width: filePanelWidth.right + '%' }"
-          >
-            <a-card size="small" title="文件内容">
-              <template #extra>
-                <span style="font-size: 12px; color: #999;">
-                  宽度: {{ filePanelWidth.right.toFixed(1) }}%
-                </span>
-              </template>
-              <a-space direction="vertical" :size="8" style="width: 100%">
-                <div
-                    class="file-content-wrapper"
-                    :style="{ height: fileContentHeight + 'px' }"
-                >
-                  <a-textarea
-                      v-model="fileContent"
-                      class="file-content-textarea"
-                      placeholder="文件内容将显示在这里"
-                  />
-                </div>
-                <div
-                    class="resize-handle"
-                    @mousedown="startResize"
-                    title="拖拽调整高度"
-                >
-                  <div class="resize-handle-bar"></div>
-                </div>
-                <a-space>
-                  <a-button type="primary" @click="readFile" :loading="fileLoading">读取文件</a-button>
-                  <a-button @click="writeFile" :loading="fileLoading" v-if="canSaveFile">写入文件</a-button>
-                  <a-button danger @click="deleteFile" :loading="fileLoading">删除</a-button>
-                  <a-button @click="clearContent" v-if="canClearContent">清空</a-button>
-                </a-space>
-              </a-space>
-            </a-card>
-          </div>
-        </div>
-      </a-space>
-    </a-card>
-
-    <!-- 环境变量 -->
-    <a-card class="test-card" title="环境变量">
-      <a-button @click="loadEnvVars" :loading="envLoading">加载环境变量</a-button>
-      <a-table
-          v-if="envVars"
-          :columns="envColumns"
-          :data="envTableData"
-          :pagination="{ pageSize: 20 }"
-          style="margin-top: 16px"
-          size="small"
-      />
-    </a-card>
-  </div>
-</template>
-
-<script setup>
-// 定义组件名称，用于 KeepAlive 缓存
-defineOptions({
-  name: 'DeviceTest'
-})
-
-import {computed, onMounted, ref} from 'vue'
-import {Message, Modal} from '@arco-design/web-vue'
-import {
-  getSystemInfo,
-  getCPUInfo,
-  getMemoryInfo,
-  getDiskInfo,
-  getEnvVars,
-  listDir,
-  readFile as readFileApi
-} from '@/api'
-
-// 导入公共工具函数和常量
-import { STORAGE_KEYS, DEFAULTS } from '@/utils/constants'
-import { formatBytes, sortFileList } from '@/utils/fileUtils'
-
-// 导入 composables
-import { useFileOperations } from '@/composables/useFileOperations'
-import { useFavoriteFiles } from '@/composables/useFavoriteFiles'
-
-// ========== 使用 Composables ==========
-
-// 文件操作
-const {
-  filePath,
-  fileContent,
-  fileList,
-  fileLoading,
-  writeFile,
-  deleteFile,
-} = useFileOperations({
-  onSuccess: (operation, data) => {
-    // 成功回调
-  },
-  onError: (operation, error) => {
-    console.error(`[DeviceTest] ${operation} 失败:`, error)
-  }
-})
-
-// 收藏功能
-const {
-  favoriteFiles,
-  isFavorite,
-  toggleFavorite,
-  removeFavorite,
-} = useFavoriteFiles(STORAGE_KEYS.DEVICE_TEST.FAVORITE_FILES)
-
-// localStorage管理
-const fileContentHeight = ref(DEFAULTS.DEFAULT_CONTENT_HEIGHT)
-const filePanelWidth = ref({ left: 50, right: 50 })
-const pathHistory = ref([])
-
-// 从 localStorage 恢复
-try {
-  const h = localStorage.getItem(STORAGE_KEYS.DEVICE_TEST.FILE_CONTENT_HEIGHT)
-  if (h) fileContentHeight.value = JSON.parse(h)
-  const w = localStorage.getItem(STORAGE_KEYS.DEVICE_TEST.PANEL_WIDTH)
-  if (w) filePanelWidth.value = JSON.parse(w)
-  const p = localStorage.getItem(STORAGE_KEYS.DEVICE_TEST.PATH_HISTORY)
-  if (p) pathHistory.value = JSON.parse(p)
-} catch (e) {
-  console.error('[DeviceTest] 加载 localStorage 失败:', e)
-}
-
-// ========== 立即清理旧的文件内容缓存 ==========
-// 在组件初始化之前清理，防止加载大文件导致空白
-try {
-  const oldContent = localStorage.getItem(STORAGE_KEYS.DEVICE_TEST.FILE_CONTENT)
-  if (oldContent) {
-    localStorage.removeItem(STORAGE_KEYS.DEVICE_TEST.FILE_CONTENT)
-  }
-} catch (error) {
-  console.error('[DeviceTest] 清理缓存失败:', error)
-}
-
-// ========== DeviceTest 特有功能 ==========
-
-const systemInfo = ref(null)
-const cpuInfo = ref(null)
-const memoryInfo = ref(null)
-const diskInfo = ref(null)
-const envVars = ref(null)
-const envLoading = ref(false)
-const isBinaryFile = ref(false) // 是否为二进制文件信息展示
-
-const diskColumns = [
-  {title: '设备', dataIndex: 'device', width: 120},
-  {title: '挂载点', dataIndex: 'mountpoint', width: 200},
-  {title: '总容量', dataIndex: 'total_str', width: 100},
-  {title: '已用', dataIndex: 'used_str', width: 100},
-  {title: '可用', dataIndex: 'free_str', width: 100},
-  {title: '使用率', dataIndex: 'usage', width: 80}
-]
-
-const envColumns = [
-  {title: '变量名', dataIndex: 'key', width: 200},
-  {title: '值', dataIndex: 'value'}
-]
-
-const envTableData = computed(() => {
-  if (!envVars.value) return []
-  return Object.keys(envVars.value).map(key => ({
-    key,
-    value: envVars.value[key]
-  }))
-})
-
-// ========== 系统信息功能 ==========
-
-const refreshSystemInfo = async () => {
-  try {
-    systemInfo.value = await getSystemInfo()
-    cpuInfo.value = await getCPUInfo()
-    memoryInfo.value = await getMemoryInfo()
-    diskInfo.value = await getDiskInfo()
-  } catch (error) {
-    console.error('获取系统信息失败:', error)
-    Message.error('获取系统信息失败: ' + (error.message || error))
-  }
-}
-
-const loadEnvVars = async () => {
-  envLoading.value = true
-  try {
-    envVars.value = await getEnvVars()
-  } catch (error) {
-    console.error('加载环境变量失败:', error)
-    Message.error('加载环境变量失败: ' + (error.message || error))
-  } finally {
-    envLoading.value = false
-  }
-}
-
-// ========== 列出目录（重写以添加历史记录） ==========
-
-const listDirectory = async () => {
-  if (!filePath.value) {
-    Message.error('请输入目录路径')
-    return
-  }
-
-  // 添加到历史记录
-  addToHistory(filePath.value)
-
-  fileLoading.value = true
-  try {
-    fileList.value = await listDir(filePath.value)
-    fileList.value = sortFileList(fileList.value)
-  } catch (error) {
-    console.error('列出目录失败:', error)
-    Message.error('列出目录失败: ' + (error.message || error))
-  } finally {
-    fileLoading.value = false
-  }
-}
-
-// ========== 路径操作 ==========
-
-const onPathSelect = (value) => {
-  filePath.value = value
-  listDirectory()
-}
-
-const browseDirectory = () => {
-  const path = prompt('请输入目录路径（例如: C:\\Users）')
-  if (path) {
-    filePath.value = path
-    listDirectory()
-  }
-}
-
-// ========== 路径历史记录 ==========
-
-const addToHistory = (path) => {
-  if (!path || path.trim() === '') return
-
-  const index = pathHistory.value.indexOf(path)
-  if (index > -1) {
-    pathHistory.value.splice(index, 1)
-  }
-
-  pathHistory.value.unshift(path)
-  if (pathHistory.value.length > 20) {
-    pathHistory.value = pathHistory.value.slice(0, 20)
-  }
-  try {
-    localStorage.setItem(STORAGE_KEYS.DEVICE_TEST.PATH_HISTORY, JSON.stringify(pathHistory.value))
-  } catch (e) {
-    console.error('[DeviceTest] 保存路径历史失败:', e)
-  }
-}
-
-// ========== 文件选择（重写以添加历史记录） ==========
-
-const selectFile = (path) => {
-  if (!path) return
-
-  filePath.value = path
-  addToHistory(path)
-
-  const item = fileList.value.find(f => f.path === path)
-
-  // 如果 fileList 为空或找不到该文件，尝试读取
-  if (!item) {
-    readFile()
-    return
-  }
-
-  if (item.is_dir) {
-    listDirectory()
-  } else {
-    readFile()
-  }
-}
-
-// ========== 文件读取（重写以跳过二进制文件） ==========
-
-const readFile = async () => {
-  if (!filePath.value) {
-    Message.error('请输入文件路径')
-    return
-  }
-
-  addToHistory(filePath.value)
-
-  // 检查文件扩展名
-  const ext = filePath.value.split('.').pop()?.toLowerCase() || ''
-  const binaryExts = ['exe', 'dll', 'so', 'dylib', 'zip', 'rar', '7z', 'tar', 'gz', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'mp3', 'mp4', 'avi', 'mkv', 'png', 'jpg', 'jpeg', 'gif', 'bmp', 'ico']
-
-  if (binaryExts.includes(ext)) {
-    showBinaryFileInfo(ext)
-    return
-  }
-
-  fileLoading.value = true
-  isBinaryFile.value = false // 标记为文本文件
-  try {
-    const content = await readFileApi(filePath.value)
-
-    // 检查文件大小（提高到2MB，合理的大文件支持）
-    const maxDisplaySize = 2 * 1024 * 1024 // 2MB
-    if (content.length > maxDisplaySize) {
-      fileContent.value = content.substring(0, maxDisplaySize) + '\n\n... (文件过大，已截断，仅显示前 2MB) ...'
-      // 大文件警告改为控制台日志
-      console.warn(`文件过大 (${(content.length / 1024).toFixed(2)} KB)，已截断显示`)
-    } else {
-      fileContent.value = content
-    }
-
-    // 文件读取成功，静默无提示
-  } catch (error) {
-    Message.error('读取文件失败: ' + error.message)
-  } finally {
-    fileLoading.value = false
-  }
-}
-
-// ========== 显示二进制文件信息 ==========
-
-const showBinaryFileInfo = (ext) => {
-  const file = fileList.value.find(f => f.path === filePath.value)
-  if (!file) {
-    Message.warning('无法找到文件信息')
-    return
-  }
-
-  // 设置为二进制文件信息展示状态
-  isBinaryFile.value = true
-
-  const extDisplay = ext.toUpperCase()
-  const sizeDisplay = formatBytes(file.size)
-
-  // 判断文件类型
-  let fileType = '二进制文件'
-  if (['png', 'jpg', 'jpeg', 'gif', 'bmp', 'ico'].includes(ext)) fileType = '图片文件'
-  else if (['mp3', 'wav', 'flac'].includes(ext)) fileType = '音频文件'
-  else if (['mp4', 'avi', 'mkv', 'mov'].includes(ext)) fileType = '视频文件'
-  else if (['exe', 'dll', 'so'].includes(ext)) fileType = '可执行文件'
-  else if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext)) fileType = '压缩文件'
-  else if (['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) fileType = '文档文件'
-
-  fileContent.value = `╔════════════════════════════════════════════════════════════╗
-║  📄 ${fileType} - ${extDisplay}                                   ║
-╠════════════════════════════════════════════════════════════╣
-║                                                              ║
-║  📁 文件名:    ${file.name.padEnd(40)}║
-║  📂 完整路径:  ${filePath.value}                      ║
-║                                                              ║
-║  📊 大小:      ${sizeDisplay.padEnd(10)}  (${file.size.toLocaleString()} 字节)        ║
-║  📅 修改时间:  ${file.mod_time}                     ║
-║  🏷️  类型:      ${fileType.padEnd(15)} (${extDisplay})                    ║
-║                                                              ║
-║  ℹ️  这是二进制文件，不支持文本预览                         ║
-║     如需查看或编辑，请使用专门的工具                     ║
-║                                                              ║
-╚════════════════════════════════════════════════════════════╝`
-
-  Message.info(`已加载 ${fileType} 信息`)
-}
-
-// ========== 打开收藏的文件 ==========
-
-const openFavoriteFile = (path) => {
-  filePath.value = path
-  addToHistory(path)
-
-  const fav = favoriteFiles.value.find(f => f.path === path)
-  if (fav && fav.isDir) {
-    listDirectory()
-  } else {
-    readFile()
-  }
-}
-
-// ========== 计算属性：按钮显示控制 ==========
-
-// 是否可以保存文件（只有文本文件可以保存）
-const canSaveFile = computed(() => {
-  return !isBinaryFile.value && fileContent.value !== ''
-})
-
-// 是否可以清空内容
-const canClearContent = computed(() => {
-  return !isBinaryFile.value && fileContent.value !== ''
-})
-
-// ========== 拖拽调整高度 ==========
-
-const startResize = (e) => {
-  const startY = e.clientY
-  const startHeight = fileContentHeight.value
-
-  const onMouseMove = (moveEvent) => {
-    const deltaY = moveEvent.clientY - startY
-    const newHeight = startHeight + deltaY
-
-    if (newHeight >= 100 && newHeight <= 800) {
-      fileContentHeight.value = newHeight
-    }
-  }
-
-  const onMouseUp = () => {
-    document.removeEventListener('mousemove', onMouseMove)
-    document.removeEventListener('mouseup', onMouseUp)
-    localStorage.setItem(
-      STORAGE_KEYS.DEVICE_TEST.FILE_CONTENT_HEIGHT,
-      fileContentHeight.value.toString()
-    )
-  }
-
-  document.addEventListener('mousemove', onMouseMove)
-  document.addEventListener('mouseup', onMouseUp)
-}
-
-// ========== 水平拖拽调整面板宽度 ==========
-
-const startHorizontalResize = (e) => {
-  const container = e.target.closest('.file-panels-container')
-  if (!container) return
-
-  const startX = e.clientX
-  const containerWidth = container.offsetWidth
-  const startLeftWidth = (filePanelWidth.value.left / 100) * containerWidth
-
-  const onMouseMove = (moveEvent) => {
-    const deltaX = moveEvent.clientX - startX
-    const newLeftWidth = startLeftWidth + deltaX
-    const newLeftPercent = (newLeftWidth / containerWidth) * 100
-
-    if (newLeftPercent >= 20 && newLeftPercent <= 80) {
-      filePanelWidth.value.left = newLeftPercent
-      filePanelWidth.value.right = 100 - newLeftPercent
-    }
-  }
-
-  const onMouseUp = () => {
-    document.removeEventListener('mousemove', onMouseMove)
-    document.removeEventListener('mouseup', onMouseUp)
-    localStorage.setItem(
-      STORAGE_KEYS.DEVICE_TEST.PANEL_WIDTH,
-      JSON.stringify(filePanelWidth.value)
-    )
-  }
-
-  document.addEventListener('mousemove', onMouseMove)
-  document.addEventListener('mouseup', onMouseUp)
-}
-
-// ========== 初始化 ==========
-
-onMounted(() => {
-  refreshSystemInfo()
-})
-</script>
-
-<style scoped>
-.device-test {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.test-card {
-  margin-bottom: 16px;
-}
-
-/* 文件面板容器 */
-.file-panels-container {
-  display: flex;
-  gap: 0;
-  align-items: stretch;
-  min-height: 400px;
-}
-
-/* 左侧面板 */
-.file-panel-left {
-  flex-shrink: 0;
-  overflow: hidden;
-}
-
-/* 右侧面板 */
-.file-panel-right {
-  flex-shrink: 0;
-  overflow: hidden;
-}
-
-/* 水平拖拽手柄 */
-.resize-handle-horizontal {
-  width: 8px;
-  cursor: col-resize;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 10;
-  margin-left: -4px;
-  margin-right: -4px;
-}
-
-.resize-handle-horizontal::before {
-  content: '';
-  position: absolute;
-  width: 3px;
-  height: 100%;
-  background: var(--color-border-2);
-  border-left: 1px solid var(--color-border-2);
-  border-right: 1px solid var(--color-border-2);
-  transition: all 0.2s;
-}
-
-.resize-handle-horizontal:hover::before {
-  background: var(--color-fill-2);
-  border-color: rgb(var(--primary-6));
-}
-
-.resize-handle-horizontal::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 2px;
-  height: 40px;
-  background: var(--color-border-3);
-  border-radius: 1px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.resize-handle-horizontal:hover::after {
-  opacity: 1;
-}
-
-/* 水平拖拽手柄的视觉指示条（已删除，改用 ::after 伪元素）*/
-
-/* 文件内容区域容器 */
-.file-content-wrapper {
-  position: relative;
-  overflow: hidden;
-  transition: height 0.1s ease;
-}
-
-/* 文件内容文本框 */
-.file-content-textarea {
-  width: 100%;
-  height: 100%;
-  resize: none;
-}
-
-/* 拖拽手柄 */
-.resize-handle {
-  height: 8px;
-  cursor: ns-resize;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-fill-2);
-  border-radius: 4px;
-  margin: 4px 0;
-  transition: background 0.2s;
-}
-
-.resize-handle:hover {
-  background: var(--color-fill-3);
-}
-
-/* 拖拽手柄的视觉指示条 */
-.resize-handle-bar {
-  width: 40px;
-  height: 3px;
-  background: var(--color-border-3);
-  border-radius: 2px;
-}
-
-.resize-handle:hover .resize-handle-bar {
-  background: rgb(var(--primary-6));
-}
-</style>
diff --git a/web/src/components/FileSystem/components/FileEditorPanel.vue b/web/src/components/FileSystem/components/FileEditorPanel.vue
index 858edf1..60a829c 100644
--- a/web/src/components/FileSystem/components/FileEditorPanel.vue
+++ b/web/src/components/FileSystem/components/FileEditorPanel.vue
@@ -349,7 +349,8 @@ import { Message } from '@arco-design/web-vue'
 import { IconSave, IconEdit, IconEye, IconUndo, IconCopy, IconFilePdf, IconFullscreen, IconFullscreenExit } from '@arco-design/web-vue/es/icon'
 import { getFileName, escapeHtml } from '@/utils/fileUtils'
 import type { FileEditorPanelConfig } from '@/types/file-system'
-import { renderMermaidDiagrams } from '@/utils/markedExtensions'
+import { renderMermaidDiagrams, rerenderMermaidDiagrams } from '@/utils/markedExtensions'
+import { useThemeStore } from '@/stores/theme'
 import { previewExcel, previewWord, previewCsv } from '@/utils/filePreviewHandlers'
 
 // 异步加载 CodeEditor 组件，减少初始包大小
@@ -589,6 +590,18 @@ watch(() => props.config.isEditMode, async (newVal, oldVal) => {
   }
 })
 
+// 监听主题变化，重新渲染 mermaid 图表
+const themeStore = useThemeStore()
+watch(() => themeStore.isDark, async () => {
+  if (!props.config.isEditMode && markdownPreviewRef.value) {
+    try {
+      // 等 DOM 更新完成后再重新渲染
+      await nextTick()
+      await rerenderMermaidDiagrams(markdownPreviewRef.value)
+    } catch { /* 忽略 */ }
+  }
+})
+
 // 监听 Excel 文件变化，触发预览
 watch(() => [props.config.isExcelFile, props.config.currentFileFullPath] as const, async ([isExcel, filePath]) => {
   if (isExcel && filePath && excelPreviewRef.value) {
diff --git a/web/src/components/FileSystem/components/FileItemRow.vue b/web/src/components/FileSystem/components/FileItemRow.vue
deleted file mode 100644
index 7a0e60a..0000000
--- a/web/src/components/FileSystem/components/FileItemRow.vue
+++ /dev/null
@@ -1,255 +0,0 @@
-<template>
-  <div
-    class="file-item-row"
-    :class="{
-      'file-item-selected': isSelected,
-      'file-item-editing': isEditing
-    }"
-    :data-file-path="file.path"
-    @click="handleClick"
-    @dblclick="handleDoubleClick"
-    @contextmenu.prevent="handleContextMenu"
-  >
-    <!-- 文件图标 -->
-    <span class="file-item-icon">{{ icon }}</span>
-
-    <!-- 编辑状态 -->
-    <a-input
-      v-if="isEditing"
-      :model-value="editingName"
-      size="mini"
-      class="file-name-edit-input"
-      @update:model-value="handleNameUpdate"
-      @blur="handleSave"
-      @keyup.enter="handleSave"
-      @keyup.esc="handleCancel"
-      @click.stop
-      ref="inputRef"
-    />
-
-    <!-- 正常显示状态 -->
-    <span v-else class="file-item-name" :title="file.name">{{ file.name }}</span>
-
-    <!-- 文件大小 -->
-    <span v-if="!file.isDir && !isEditing" class="file-item-size">
-      {{ formattedSize }}
-    </span>
-
-    <!-- 收藏按钮 -->
-    <a-button
-      v-if="!isEditing"
-      type="text"
-      size="mini"
-      @click.stop="handleToggleFavorite"
-      class="file-item-fav"
-    >
-      <template #icon>
-        <icon-star-fill v-if="isFavorited" :style="{ color: '#ffcd00' }" />
-        <icon-star v-else />
-      </template>
-    </a-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, nextTick, watch } from 'vue'
-import { IconStar, IconStarFill } from '@arco-design/web-vue/es/icon'
-import { formatBytes, getFileIcon } from '@/utils/fileUtils'
-import type { FileItem } from '@/types/file-system'
-
-// Props
-interface Props {
-  file: FileItem
-  isSelected: boolean
-  isEditing: boolean
-  editingName?: string
-  isFavorited: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  editingName: ''
-})
-
-// Emits
-interface Emits {
-  (e: 'click', file: FileItem): void
-  (e: 'doubleClick', file: FileItem): void
-  (e: 'toggleFavorite', file: FileItem): void
-  (e: 'save', newName: string): void
-  (e: 'cancel'): void
-  (e: 'nameUpdate', newName: string): void
-  (e: 'contextMenu', event: MouseEvent, file: FileItem): void
-}
-
-const emit = defineEmits<Emits>()
-
-// Refs
-const inputRef = ref()
-
-// 监听编辑状态变化，自动聚焦
-watch(() => props.isEditing, (newVal) => {
-  if (newVal) {
-    nextTick(() => {
-      focusInput()
-    })
-  }
-})
-
-// 计算属性
-const icon = computed(() => getFileIcon(props.file))
-const formattedSize = computed(() => formatBytes(props.file.size))
-
-// 事件处理
-const handleClick = () => {
-  emit('click', props.file)
-}
-
-const handleDoubleClick = () => {
-  emit('doubleClick', props.file)
-}
-
-const handleToggleFavorite = () => {
-  emit('toggleFavorite', props.file)
-}
-
-const handleNameUpdate = (value: string) => {
-  emit('nameUpdate', value)
-}
-
-const handleSave = () => {
-  emit('save', props.editingName || props.file.name)
-}
-
-const handleCancel = () => {
-  emit('cancel')
-}
-
-const handleContextMenu = (event: MouseEvent) => {
-  emit('contextMenu', event, props.file)
-}
-
-// 聚焦到输入框并选中文本
-const focusInput = () => {
-  const input = inputRef.value?.$el?.querySelector('input')
-  if (input) {
-    input.focus()
-
-    // 选中文件名部分（不包括扩展名）
-    const value = input.value
-    const lastDotIndex = value.lastIndexOf('.')
-
-    // 如果有扩展名，只选中文件名部分；否则选中全部
-    if (lastDotIndex > 0) {
-      input.setSelectionRange(0, lastDotIndex)
-    } else {
-      input.select()
-    }
-  }
-}
-
-// 暴露方法供父组件调用
-const focus = () => {
-  nextTick(() => {
-    focusInput()
-  })
-}
-
-const selectAll = () => {
-  nextTick(() => {
-    const input = inputRef.value?.$el?.querySelector('input')
-    if (input) {
-      input.select()
-    }
-  })
-}
-
-defineExpose({
-  focus,
-  selectAll
-})
-</script>
-
-<style scoped>
-.file-item-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  cursor: pointer;
-  transition: background 0.15s;
-  border-bottom: 1px solid var(--color-border-2);
-  user-select: none;
-}
-
-.file-item-row:hover {
-  background: var(--color-fill-2);
-}
-
-.file-item-row.file-item-selected {
-  background: var(--color-fill-3) !important;
-  font-weight: 500;
-}
-
-.file-item-row:last-child {
-  border-bottom: none;
-}
-
-.file-item-row.file-item-editing {
-  background: var(--color-fill-1);
-}
-
-.file-item-icon {
-  font-size: 16px;
-  flex-shrink: 0;
-  width: 20px;
-  text-align: center;
-}
-
-.file-item-name {
-  flex: 1;
-  font-size: 13px;
-  color: var(--color-text-2);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-
-.file-item-size {
-  font-size: 11px;
-  color: var(--color-text-3);
-  flex-shrink: 0;
-}
-
-.file-item-fav {
-  flex-shrink: 0;
-  opacity: 0.6;
-  transition: opacity 0.2s;
-}
-
-.file-item-row:hover .file-item-fav {
-  opacity: 1;
-}
-
-.file-name-edit-input {
-  flex: 1;
-  font-size: 13px;
-  min-width: 0;
-}
-
-.file-name-edit-input :deep(.arco-input) {
-  font-size: 13px;
-  padding: 0 8px;
-  height: 24px;
-  line-height: 24px;
-}
-
-/* 编辑状态下的样式调整 */
-.file-item-row.file-item-editing .file-item-fav {
-  display: none;
-}
-
-.file-item-row.file-item-editing .file-item-size {
-  display: none;
-}
-</style>
diff --git a/web/src/components/FileSystem/components/FileListPanel.vue b/web/src/components/FileSystem/components/FileListPanel.vue
index 3b119c7..b71ca6a 100644
--- a/web/src/components/FileSystem/components/FileListPanel.vue
+++ b/web/src/components/FileSystem/components/FileListPanel.vue
@@ -2,40 +2,62 @@
   <div class="file-list-panel" :style="{ width: width + '%' }">
     <div class="panel-header">
       <span class="panel-title">📋 文件列表</span>
-      <span class="panel-count">{{ config.fileList.length }} 项</span>
+      <div class="panel-header-right">
+        <span class="panel-count">{{ config.fileList.length }} 项</span>
+        <a-popover trigger="click" position="bottom" :content-style="{ padding: '4px', width: '150px' }">
+          <a-button size="mini" type="text" class="settings-btn">
+            <icon-more />
+          </a-button>
+          <template #content>
+            <div class="col-setting-title">列设置</div>
+            <div class="col-setting-item" style="cursor: default;">
+              <span class="drag-handle"></span>
+              <a-checkbox :model-value="showHeader" @change="(val: boolean) => { showHeader = val; localStorage.setItem(SHOW_HEADER_KEY, String(val)) }">
+                显示表头
+              </a-checkbox>
+            </div>
+            <div
+              v-for="(col, idx) in orderedColumns"
+              :key="col.key"
+              class="col-setting-item"
+              draggable="true"
+              @dragstart="onDragStart($event, idx)"
+              @dragover.prevent
+              @drop="onDrop($event, idx)"
+            >
+              <span class="drag-handle">⠿</span>
+              <a-checkbox
+                :model-value="col.visible"
+                :disabled="col.key === 'name' && visibleCount <= 1"
+                @change="(val: boolean) => toggleColumn(col.key, val)"
+              >{{ col.label }}</a-checkbox>
+            </div>
+          </template>
+        </a-popover>
+      </div>
     </div>
 
     <div
       class="file-list-wrapper"
-      @contextmenu.prevent="handleContextMenu"
+      @contextmenu.prevent="handleWrapperContextMenu"
     >
-      <!-- 文件列表 -->
-      <a-list
+      <!-- 文件列表（a-table） -->
+      <a-table
         v-if="config.fileList.length > 0 || config.fileLoading"
+        :columns="tableColumns"
         :data="config.fileList"
         :loading="config.fileLoading"
-        :bordered="false"
         :pagination="false"
-        class="compact-list"
-      >
-        <template #item="{ item }">
-          <FileItemRow
-            :file="item"
-            :is-selected="isSelected(item)"
-            :is-editing="isEditing(item)"
-            :editing-name="props.config.editingFileName"
-            :is-favorited="isFavorited(item.path)"
-            @click="handleFileClick"
-            @double-click="handleFileDoubleClick"
-            @toggle-favorite="handleToggleFavorite"
-            @save="handleSaveEditing"
-            @cancel="handleCancelEditing"
-            @name-update="handleNameUpdate"
-            @context-menu="handleItemContextMenu"
-            ref="fileItemRefs"
-          />
-        </template>
-      </a-list>
+        :bordered="false"
+        :show-header="showHeader"
+        size="mini"
+        :row-class-name="getRowClassName"
+        :scroll="{ y: 'auto' }"
+        class="file-table"
+        @row-click="handleRowClick"
+        @row-dblclick="handleRowDoubleClick"
+        @row-contextmenu="handleRowContextMenu"
+      />
 
       <!-- 空状态 -->
       <div v-if="config.fileList.length === 0 && !config.fileLoading" class="empty-state">
@@ -47,8 +69,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import FileItemRow from './FileItemRow.vue'
+import { h, computed, nextTick, ref } from 'vue'
+import { Input, Button } from '@arco-design/web-vue'
+import { IconStar, IconStarFill, IconSort, IconSortAscending, IconSortDescending, IconMore } from '@arco-design/web-vue/es/icon'
+import { formatBytes, formatFileTime, getFileIcon, getExt } from '@/utils/fileUtils'
+import { STORAGE_KEYS } from '@/utils/constants'
 import type { FileListPanelConfig, FileItem } from '@/types/file-system'
 
 // Props
@@ -56,6 +81,8 @@ interface Props {
   config: FileListPanelConfig
   width: number
   favorites: string[]
+  sortBy: string
+  sortOrder: string
 }
 
 const props = defineProps<Props>()
@@ -70,96 +97,258 @@ interface Emits {
   (e: 'cancelEditing'): void
   (e: 'contextMenu', event: MouseEvent, file: FileItem | null): void
   (e: 'nameUpdate', newName: string): void
+  (e: 'sort', field: string): void
 }
 
 const emit = defineEmits<Emits>()
 
-// Refs
-const fileItemRefs = ref()
+// ========== 列配置（支持显隐 + 排序） ==========
+const COL_SETTINGS_KEY = STORAGE_KEYS.FILESYSTEM.COL_SETTINGS
+const SHOW_HEADER_KEY = STORAGE_KEYS.FILESYSTEM.SHOW_HEADER
 
-// 计算辅助方法
-const isSelected = (item: FileItem): boolean => {
-  return props.config.selectedFileItem?.path === item.path
+interface ColumnConfig {
+  key: string
+  label: string
+  visible: boolean
+  order: number
 }
 
-const isEditing = (item: FileItem): boolean => {
-  return props.config.editingFilePath === item.path
-}
+const defaultColumns: ColumnConfig[] = [
+  { key: 'icon', label: '图标(T)', visible: true, order: 0 },
+  { key: 'name', label: '名称', visible: true, order: 1 },
+  { key: 'time', label: '时间', visible: true, order: 2 },
+  { key: 'size', label: '大小', visible: true, order: 3 },
+  { key: 'fav', label: '收藏', visible: true, order: 4 }
+]
 
-const isFavorited = (path: string): boolean => {
-  return props.favorites.includes(path)
-}
-
-// 事件处理
-const handleFileClick = (file: FileItem) => {
-  emit('fileClick', file)
-}
-
-const handleFileDoubleClick = (file: FileItem) => {
-  emit('fileDoubleClick', file)
-}
-
-const handleToggleFavorite = (file: FileItem) => {
-  emit('toggleFavorite', file)
-}
-
-const handleNameUpdate = (newName: string) => {
-  emit('nameUpdate', newName)
-}
-
-const handleSaveEditing = (newName: string) => {
-  if (props.config.editingFilePath) {
-    emit('saveEditing', props.config.editingFilePath, newName)
-  }
-}
-
-const handleCancelEditing = () => {
-  emit('cancelEditing')
-}
-
-const handleItemContextMenu = (event: MouseEvent, file: FileItem) => {
-  emit('contextMenu', event, file)
-}
-
-const handleContextMenu = (event: MouseEvent) => {
-  // 检查点击的是哪个文件项
-  const target = event.target as HTMLElement
-  const listItem = target.closest('.arco-list-item')
-
-  if (listItem) {
-    // 找到对应的文件索引
-    const items = document.querySelectorAll('.arco-list-item')
-    const index = Array.from(items).indexOf(listItem)
-
-    if (index !== -1 && index < props.config.fileList.length) {
-      const clickedFile = props.config.fileList[index]
-      emit('contextMenu', event, clickedFile)
-      return
+// 从 localStorage 恢复或使用默认值（按 key 匹合，允许列数变化）
+function loadColSettings(): ColumnConfig[] {
+  try {
+    const saved = localStorage.getItem(COL_SETTINGS_KEY)
+    if (saved) {
+      const parsed = JSON.parse(saved) as ColumnConfig[]
+      if (Array.isArray(parsed)) {
+        // 以 defaultColumns 为基准，合并已保存的 visible/order
+        return defaultColumns.map((def, i) => {
+          const existing = parsed.find(p => p.key === def.key)
+          return existing ? { ...def, visible: existing.visible ?? true, order: existing.order ?? i } : { ...def }
+        })
+      }
     }
-  }
+  } catch { /* localStorage 不可用则使用默认列配置 */ }
+  return [...defaultColumns]
+}
 
-  // 如果没有点击文件项，传递空白区域事件
+const colSettings = ref<ColumnConfig[]>(loadColSettings())
+const showHeader = ref(localStorage.getItem(SHOW_HEADER_KEY) !== 'false')
+
+// 手动持久化（避免 deep watch 频繁写入）
+function saveColSettings() {
+  localStorage.setItem(COL_SETTINGS_KEY, JSON.stringify(colSettings.value))
+}
+
+// 排序后的列配置
+const orderedColumns = computed(() =>
+  [...colSettings.value].sort((a, b) => a.order - b.order)
+)
+
+// 可见列数量
+const visibleCount = computed(() =>
+  colSettings.value.filter(c => c.visible).length
+)
+
+// 切换单列显隐
+const toggleColumn = (key: string, visible: boolean) => {
+  const col = colSettings.value.find(c => c.key === key)
+  if (col) { col.visible = visible; saveColSettings() }
+}
+
+// HTML5 拖拽排序
+const dragIdx = ref(-1)
+const onDragStart = (_e: DragEvent, idx: number) => { dragIdx.value = idx }
+const onDrop = (_e: DragEvent, idx: number) => {
+  if (dragIdx.value === -1 || dragIdx.value === idx) return
+  const list = [...orderedColumns.value]
+  const [moved] = list.splice(dragIdx.value, 1)
+  list.splice(idx, 0, moved)
+  // 更新 order 值
+  list.forEach((c, i) => {
+    const target = colSettings.value.find(x => x.key === c.key)
+    if (target) target.order = i
+  })
+  dragIdx.value = -1
+  saveColSettings()
+}
+
+// 排序图标渲染
+const sortIcon = (field: string) => {
+  if (props.sortBy !== field) return () => h(IconSort, { style: { fontSize: '12px', color: 'var(--color-text-4)' } })
+  return () => props.sortOrder === 'asc'
+    ? h(IconSortAscending, { style: { fontSize: '12px', color: 'rgb(var(--primary-6))' } })
+    : h(IconSortDescending, { style: { fontSize: '12px', color: 'rgb(var(--primary-6))' } })
+}
+
+// 根据配置构建单列定义
+function buildColumn(key: string, editPath: string | undefined) {
+  switch (key) {
+    case 'icon':
+      return {
+        title: () => h('div', {
+          class: 'th-sortable th-sort-center',
+          onClick: () => emit('sort', 'type')
+        }, [
+          h('span', { style: { fontWeight: 600, fontSize: '11px', marginRight: '2px' } }, 'T'),
+          sortIcon('type')()
+        ]),
+        width: 32,
+        bodyCellClass: 'col-icon',
+        render: ({ record }: { record: FileItem }) => {
+          const ext = getExt(record.name)
+          return h('span', {
+            class: 'file-item-icon',
+            title: ext ? `.${ext.toUpperCase()} : ${record.name}` : record.name
+          }, getFileIcon(record))
+        }
+      }
+
+    case 'name':
+      return {
+        title: () => h('div', {
+          class: 'th-sortable',
+          onClick: () => emit('sort', 'name')
+        }, [
+          h('span', { style: { fontWeight: 600 } }, '名称'),
+          sortIcon('name')()
+        ]),
+        dataIndex: 'name',
+        ellipsis: true,
+        render: ({ record }: { record: FileItem }) => {
+          const isEditing = editPath === record.path
+          if (isEditing) {
+            return h(Input, {
+              modelValue: props.config.editingFileName || record.name,
+              size: 'mini',
+              class: 'file-name-edit-input',
+              'onUpdate:modelValue': (val: string) => emit('nameUpdate', val),
+              onBlur: () => emit('saveEditing', editPath!, props.config.editingFileName || record.name),
+              onKeyup: (ev: KeyboardEvent) => {
+                if (ev.key === 'Enter') emit('saveEditing', editPath!, props.config.editingFileName || record.name)
+                else if (ev.key === 'Escape') emit('cancelEditing')
+              },
+              onClick: (ev: Event) => ev.stopPropagation()
+            })
+          }
+          return h('span', { class: 'file-item-name', title: record.name }, record.name)
+        }
+      }
+
+    case 'time':
+      return {
+        title: () => h('div', {
+          class: 'th-sortable th-sort-right',
+          onClick: () => emit('sort', 'modified_time')
+        }, [
+          h('span', { style: { fontWeight: 600 } }, '时间'),
+          sortIcon('modified_time')()
+        ]),
+        dataIndex: 'modified_time',
+        width: 125,
+        align: 'right' as const,
+        render: ({ record }: { record: FileItem }) => {
+          if (editPath === record.path || !record.modified_time) return null
+          return h('span', { class: 'file-item-time' }, formatFileTime(record.modified_time))
+        }
+      }
+
+    case 'size':
+      return {
+        title: () => h('div', {
+          class: 'th-sortable th-sort-right',
+          onClick: () => emit('sort', 'size')
+        }, [
+          h('span', { style: { fontWeight: 600 } }, '大小'),
+          sortIcon('size')()
+        ]),
+        dataIndex: 'size',
+        width: 70,
+        align: 'right' as const,
+        render: ({ record }: { record: FileItem }) => {
+          if (record.isDir || editPath === record.path) return null
+          return h('span', { class: 'file-item-size' }, formatBytes(record.size))
+        }
+      }
+
+    case 'fav':
+      return {
+        title: '',
+        width: 28,
+        render: ({ record }: { record: FileItem }) => {
+          if (editPath === record.path) return null
+          const favorited = props.favorites.includes(record.path)
+          return h(Button, {
+            type: 'text',
+            size: 'mini',
+            class: 'file-item-fav',
+            onClick: (ev: Event) => { ev.stopPropagation(); emit('toggleFavorite', record) }
+          }, {
+            icon: () => favorited
+              ? h(IconStarFill, { style: { color: '#ffcd00' } })
+              : h(IconStar)
+          })
+        }
+      }
+
+    default:
+      return null
+  }
+}
+
+// ========== 动态表格列 ==========
+const tableColumns = computed(() => {
+  const editPath = props.config.editingFilePath
+  return orderedColumns.value
+    .filter(c => c.visible)
+    .map(c => buildColumn(c.key, editPath))
+    .filter(Boolean)
+})
+
+// ========== 行事件处理 ==========
+const handleRowClick = (record: FileItem, ev: Event) => {
+  const target = ev.target as HTMLElement
+  if (target.closest('.arco-btn') || target.closest('.arco-input-wrapper')) return
+  emit('fileClick', record)
+}
+
+const handleRowContextMenu = (record: FileItem, ev: Event) => {
+  ev.preventDefault()
+  emit('contextMenu', ev as MouseEvent, record)
+}
+
+const getRowClassName = (record: FileItem): string => [
+  props.config.selectedFileItem?.path === record.path && 'row-selected',
+  props.config.editingFilePath === record.path && 'row-editing'
+].filter(Boolean).join(' ')
+
+const handleWrapperContextMenu = (event: MouseEvent) => {
   emit('contextMenu', event, null)
 }
 
-// 暴露方法供父组件调用
 const focusEditingItem = () => {
-  const index = props.config.fileList.findIndex(
-    item => item.path === props.config.editingFilePath
-  )
-  if (index !== -1 && fileItemRefs.value?.[index]) {
-    const item = fileItemRefs.value[index]
-    item.focus?.()
-    item.selectAll?.()
-  }
+  nextTick(() => {
+    const input = document.querySelector('.file-table .file-name-edit-input input') as HTMLInputElement | null
+    if (!input) return
+    input.focus()
+    const val = input.value
+    const dot = val.lastIndexOf('.')
+    input.setSelectionRange(0, dot > 0 ? dot : val.length)
+  })
 }
 
-defineExpose({
-  focusEditingItem
-})
+defineExpose({ focusEditingItem })
 </script>
 
 <style scoped>
+/* ====== 布局 ====== */
 .file-list-panel {
   display: flex;
   flex-direction: column;
@@ -168,37 +357,164 @@ defineExpose({
 }
 
 .panel-header {
-  padding: 10px 12px;
+  padding: 6px 12px;
   border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg-2);
+  flex-shrink: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: var(--color-bg-2);
-  flex-shrink: 0;
 }
 
-.panel-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-text-1);
+.panel-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.panel-count {
-  font-size: 12px;
+.panel-title { font-size: 13px; font-weight: 600; color: var(--color-text-1); }
+.panel-count { font-size: 12px; color: var(--color-text-3); }
+
+.settings-btn {
   color: var(--color-text-3);
+  padding: 2px 4px;
+}
+.settings-btn:hover {
+  color: var(--color-text-2);
 }
 
+/* 滚动容器 */
 .file-list-wrapper {
   flex: 1;
   overflow-y: auto;
-  padding: 4px;
+  overflow-x: hidden;
+  padding: 0 2px;
 }
 
-.compact-list :deep(.arco-list-item) {
-  padding: 0;
-  border: none;
+/* ====== Table 全局覆盖 ====== */
+.file-table :deep(.arco-table) {
+  font-size: 13px;
+  table-layout: fixed;
 }
 
+.file-table :deep(.arco-table-cell) {
+  padding: 5px 2px !important;
+}
+
+/* 表头样式 */
+.file-table :deep(.arco-table-header) {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.file-table :deep(.arco-table-th) {
+  font-size: 11px;
+  color: var(--color-text-3);
+  background: var(--color-bg-2);
+  font-weight: normal;
+  user-select: none;
+  white-space: nowrap;
+}
+
+/* 可排序列头 */
+.file-table :deep(.th-sortable) {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 4px 8px;
+  transition: background 0.15s;
+}
+.file-table :deep(.th-sortable:hover) {
+  background: var(--color-fill-2);
+}
+.file-table :deep(.th-sort-right) { justify-content: flex-end; }
+.file-table :deep(.th-sort-center) { justify-content: center; }
+
+/* 表体行 */
+.file-table :deep(.arco-table-tbody .arco-table-tr) {
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.file-table :deep(.arco-table-tbody .arco-table-tr:hover:not(.row-selected)) {
+  background: var(--color-fill-2);
+}
+
+/* 数据单元格 */
+.file-table :deep(.arco-table-td) {
+  border-bottom: 1px solid var(--color-border-2);
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 行状态 */
+.file-table :deep(.arco-table-tr.row-selected) {
+  background: var(--color-fill-3) !important;
+}
+.file-table :deep(.arco-table-tr.row-selected .file-item-name) {
+  font-weight: 500;
+}
+.file-table :deep(.arco-table-tr.row-editing) {
+  background: var(--color-fill-1);
+}
+
+/* ====== 列内容 ====== */
+.col-icon { text-align: center; vertical-align: middle !important; }
+.file-item-icon {
+  font-size: 16px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 500;
+}
+.file-item-name { font-size: 13px; color: var(--color-text-2); }
+.file-item-size,
+.file-item-time { font-size: 11px; color: var(--color-text-3); }
+
+/* 收藏星标 */
+.file-item-fav { opacity: 0.5; transition: opacity 0.2s; }
+.file-table :deep(.arco-table-tr:hover .file-item-fav) { opacity: 1; }
+
+/* 编辑输入框 */
+.file-name-edit-input :deep(.arco-input) {
+  font-size: 13px;
+  padding: 0 8px;
+  height: 24px;
+  line-height: 24px;
+}
+
+/* ====== 列设置面板 ====== */
+.col-setting-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-2);
+  padding: 4px 8px 6px;
+  border-bottom: 1px solid var(--color-border-2);
+  margin-bottom: 2px;
+}
+
+.col-setting-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 6px;
+  border-radius: 3px;
+  cursor: grab;
+  transition: background 0.15s;
+}
+.col-setting-item:active { cursor: grabbing; }
+.col-setting-item:hover { background: var(--color-fill-1); }
+
+.drag-handle {
+  color: var(--color-text-4);
+  font-size: 14px;
+  user-select: none;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+/* 空状态 */
 .empty-state {
   display: flex;
   flex-direction: column;
@@ -208,8 +524,5 @@ defineExpose({
   color: var(--color-text-3);
   gap: 8px;
 }
-
-.empty-state span:nth-child(2) {
-  font-size: 14px;
-}
+.empty-state span:nth-child(2) { font-size: 14px; }
 </style>
diff --git a/web/src/components/FileSystem/components/Toolbar.vue b/web/src/components/FileSystem/components/Toolbar.vue
index f1fcdd3..c084739 100644
--- a/web/src/components/FileSystem/components/Toolbar.vue
+++ b/web/src/components/FileSystem/components/Toolbar.vue
@@ -109,7 +109,6 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { IconForward, IconHistory, IconRefresh, IconMenu, IconClose, IconRight, IconCopy } from '@arco-design/web-vue/es/icon'
 import type { ToolbarConfig } from '@/types/file-system'
 import PathBreadcrumb from './PathBreadcrumb.vue'
diff --git a/web/src/components/FileSystem/index.vue b/web/src/components/FileSystem/index.vue
index 1920933..ff6c42b 100644
--- a/web/src/components/FileSystem/index.vue
+++ b/web/src/components/FileSystem/index.vue
@@ -31,12 +31,14 @@
       />
 
       <!-- 文件列表和编辑器区域 -->
-      <div class="file-workspace">
+      <div ref="workspaceRef" class="file-workspace">
         <!-- 文件列表面板 -->
         <FileListPanel
           :config="fileListPanelConfig"
           :width="panelWidth.left"
           :favorites="favoritePaths"
+          :sort-by="sortBy"
+          :sort-order="sortOrder"
           @file-click="handleFileClick"
           @file-double-click="handleFileDoubleClick"
           @toggle-favorite="handleToggleFavorite"
@@ -45,11 +47,12 @@
           @cancel-editing="handleCancelEditing"
           @name-update="handleNameUpdate"
           @context-menu="handleContextMenu"
+          @sort="setSort"
           ref="fileListPanelRef"
         />
 
         <!-- 分隔条 -->
-        <div class="resizer" @mousedown="startResizeHorizontal"></div>
+        <div class="resizer" @mousedown="handleHorizontalResize"></div>
 
         <!-- 文件编辑器面板 -->
         <FileEditorPanel
@@ -102,7 +105,8 @@
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { getPathSeparator } from '@/utils/fileUtils'
 import { Message, Modal } from '@arco-design/web-vue'
-import { marked, renderMermaidDiagrams } from '@/utils/markedExtensions'
+import { marked, renderMermaidDiagrams, rerenderMermaidDiagrams } from '@/utils/markedExtensions'
+import { useThemeStore } from '@/stores/theme'
 
 // 导入子组件
 import Toolbar from './components/Toolbar.vue'
@@ -122,8 +126,9 @@ import { useCommonPaths } from './composables/useCommonPaths'
 // 导入工具函数
 import { getFileName, sortFileList } from '@/utils/fileUtils'
 import { isImageFile, isVideoFile, isAudioFile, isPdfFile, isHtmlFile, isMarkdownFile, isExcelFile, isWordFile, isCsvFile } from '@/utils/fileTypeHelpers'
-import { listDir } from '@/api/system'
+import { listDir, saveBase64File } from '@/api/system'
 import { STORAGE_KEYS, DEFAULTS, UI_TEXT, VALIDATION_RULES, FILE_EXTENSIONS, FILE_SIZE_THRESHOLDS } from '@/utils/constants'
+import { createResizeHandler } from '@/utils/resize'
 
 // 导入类型
 import type { FileItem, FavoriteFile, ContextMenuConfig, ShortcutPath } from '@/types/file-system'
@@ -148,6 +153,30 @@ const fileList = ref<FileItem[]>([])
 const fileLoading = ref(false)
 const selectedFileItem = ref<FileItem | null>(null)
 
+// 排序状态（带 localStorage 持久化）
+const SORT_STORAGE_KEY = STORAGE_KEYS.FILESYSTEM.SORT
+type SortField = 'name' | 'size' | 'type' | 'modified_time'
+const defaultSort: { sortBy: SortField; sortOrder: 'asc' | 'desc' } = { sortBy: 'name', sortOrder: 'asc' }
+let savedSort: typeof defaultSort | null = null
+try { savedSort = JSON.parse(localStorage.getItem(SORT_STORAGE_KEY) || '') } catch { /* localStorage 不可用则使用默认排序 */ }
+const sortBy = ref<SortField>(savedSort?.sortBy || defaultSort.sortBy)
+const sortOrder = ref(savedSort?.sortOrder || defaultSort.sortOrder)
+
+const doSort = () => {
+  fileList.value = sortFileList(fileList.value, { sortBy: sortBy.value, sortOrder: sortOrder.value })
+  localStorage.setItem(SORT_STORAGE_KEY, JSON.stringify({ sortBy: sortBy.value, sortOrder: sortOrder.value }))
+}
+
+const setSort = (field: SortField) => {
+  if (sortBy.value === field) {
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortBy.value = field
+    sortOrder.value = 'asc'
+  }
+  doSort()
+}
+
 // 导航锁：防止同时执行多个导航操作
 const isNavigating = ref(false)
 
@@ -186,6 +215,7 @@ const savePanelWidth = (width: { left: number; right: number }) => {
 }
 
 const panelWidth = ref(restorePanelWidth())
+const workspaceRef = ref<HTMLElement | null>(null)
 
 // 系统路径（使用 composable）
 const { commonPaths, systemPaths, loadCommonPaths } = useCommonPaths()
@@ -263,7 +293,9 @@ const toolbarConfig = computed(() => ({
   zipFileName: '',
   zipBreadcrumbs: [],
   fileLoading: fileLoading.value,
-  showSidebar: showSidebar.value
+  showSidebar: showSidebar.value,
+  sortBy: sortBy.value,
+  sortOrder: sortOrder.value
 }))
 
 // 侧边栏配置
@@ -384,21 +416,22 @@ const handleOpenFile = async (path: string) => {
   }
 }
 
-// 处理 Markdown 预览中的本地文件链接点击
+// 处理 HTML/Markdown 预览中的本地文件链接点击
 const handleOpenLocalFile = async (link: string) => {
   if (!link) return
 
   try {
     let targetPath = link
 
-    // 如果是相对路径，基于当前 MD 文件所在目录解析
-    if (!link.match(/^[A-Za-z]:/) && !link.startsWith('/')) {
-      // 使用当前预览文件的完整路径
+    // 剥离 /localfs/ 前缀（HTML 预览模式下 JS 生成的路径带此前缀）
+    if (link.startsWith('/localfs/')) {
+      targetPath = link.replace(/^\/localfs\//, '').replace(/\//g, '\\')
+    }
+    // 如果是相对路径，基于当前预览文件所在目录解析
+    else if (!link.match(/^[A-Za-z]:/) && !link.startsWith('/')) {
       const currentFilePath = fileEditorPanelConfig.value.currentFileFullPath
       if (currentFilePath) {
-        // 获取当前文件所在目录
         const currentDir = getParentPath(currentFilePath)
-        // 解析相对路径
         targetPath = resolveRelativePath(currentDir, link)
       }
     }
@@ -910,25 +943,16 @@ const handleReset = () => {
   resetContent()
 }
 
-const handleStartResize = (event: MouseEvent) => {
-  event.preventDefault()
-
-  const startY = event.clientY
-  const startHeight = fileContentHeight.value
-
-  const onMouseMove = (e: MouseEvent) => {
-    const deltaY = e.clientY - startY
-    fileContentHeight.value = Math.max(200, startHeight + deltaY)
+const handleStartResize = createResizeHandler(
+  () => workspaceRef.value,
+  () => fileContentHeight.value,
+  {
+    direction: 'vertical',
+    outputMode: 'pixels',
+    minPixels: 200,
+    onResize: (px) => { fileContentHeight.value = px },
   }
-
-  const onMouseUp = () => {
-    window.removeEventListener('mousemove', onMouseMove)
-    window.removeEventListener('mouseup', onMouseUp)
-  }
-
-  window.addEventListener('mousemove', onMouseMove)
-  window.addEventListener('mouseup', onMouseUp)
-}
+)
 
 const handleContentUpdate = (content: string) => {
   // useFileEdit 内部会检查版本号和时间，防止过期更新
@@ -1052,7 +1076,7 @@ const loadDirectory = async (path: string) => {
   fileLoading.value = true
   try {
     fileList.value = await fileOps.listDirectory(path)
-    fileList.value = sortFileList(fileList.value)
+    doSort()
   } catch (error) {
     Message.error(`加载目录失败: ${error}`)
   } finally {
@@ -1064,7 +1088,8 @@ const loadDirectory = async (path: string) => {
  * 添加文件到列表（保持排序）
  */
 const addFileToList = (item: FileItem) => {
-  fileList.value = sortFileList([...fileList.value, { ...item, is_favorite: false }])
+  fileList.value = [...fileList.value, { ...item, is_favorite: false }]
+  doSort()
 }
 
 /**
@@ -1120,7 +1145,7 @@ const loadZipDirectoryContents = async (zipPath: string, currentDir: string): Pr
       is_favorite: false
     }))
 
-    return sortFileList(result)
+    return sortFileList(result, { sortBy: sortBy.value, sortOrder: sortOrder.value })
   } catch (error) {
     console.error('加载 ZIP 目录失败:', error)
     Message.error(`加载 ZIP 目录失败: ${error}`)
@@ -1160,38 +1185,19 @@ const extractZipTextAndRead = async (zipPath: string, filePath: string): Promise
   }
 }
 
-const startResizeHorizontal = (event: MouseEvent) => {
-  event.preventDefault()
-
-  const startX = event.clientX
-  const container = event.currentTarget as HTMLElement
-  const containerRect = container.parentElement?.getBoundingClientRect()
-  if (!containerRect) return
-
-  const startLeftWidth = (panelWidth.value.left / 100) * containerRect.width
-
-  const onMouseMove = (e: MouseEvent) => {
-    const deltaX = e.clientX - startX
-    const minPx = (DEFAULTS.MIN_PANEL_WIDTH / 100) * containerRect.width
-    const newLeftWidth = Math.max(minPx, Math.min(containerRect.width - minPx, startLeftWidth + deltaX))
-    const newLeftPercent = (newLeftWidth / containerRect.width) * 100
-
-    panelWidth.value = {
-      left: newLeftPercent,
-      right: 100 - newLeftPercent
-    }
+const handleHorizontalResize = createResizeHandler(
+  () => workspaceRef.value,
+  () => panelWidth.value.left,
+  {
+    direction: 'horizontal',
+    minPercent: DEFAULTS.MIN_PANEL_WIDTH,
+    maxPercent: 100 - DEFAULTS.MIN_PANEL_WIDTH,
+    onResize: (percent) => {
+      panelWidth.value = { left: percent, right: 100 - percent }
+    },
+    onResizeEnd: () => savePanelWidth(panelWidth.value),
   }
-
-  const onMouseUp = () => {
-    window.removeEventListener('mousemove', onMouseMove)
-    window.removeEventListener('mouseup', onMouseUp)
-    // 保存调整后的宽度
-    savePanelWidth(panelWidth.value)
-  }
-
-  window.addEventListener('mousemove', onMouseMove)
-  window.addEventListener('mouseup', onMouseUp)
-}
+)
 
 // ========== 生命周期 ==========
 
@@ -1212,11 +1218,15 @@ onMounted(() => {
   // 添加键盘快捷键
   window.addEventListener('keydown', handleKeyDown)
   window.addEventListener('click', hideContextMenu)
+
+  // 添加粘贴事件监听（剪贴板图片）
+  window.addEventListener('paste', handlePaste)
 })
 
 onUnmounted(() => {
   window.removeEventListener('keydown', handleKeyDown)
   window.removeEventListener('click', hideContextMenu)
+  window.removeEventListener('paste', handlePaste)
 })
 
 // 键盘快捷键
@@ -1347,6 +1357,74 @@ const handleKeyDown = async (event: KeyboardEvent) => {
   }
 }
 
+// 粘贴剪贴板图片到当前目录
+const handlePaste = async (event: ClipboardEvent) => {
+  // 忽略输入框内的粘贴
+  const target = event.target as HTMLElement
+  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) return
+
+  const items = event.clipboardData?.items
+  if (!items) return
+
+  const imageItem = Array.from(items).find(item => item.type.startsWith('image/'))
+  if (imageItem) {
+    event.preventDefault()
+    await pasteImageToFile(imageItem)
+  }
+}
+
+// 将剪贴板图片保存为文件
+const pasteImageToFile = async (item: DataTransferItem) => {
+  if (!filePath.value) {
+    Message.warning('请先选择目标目录')
+    return
+  }
+
+  try {
+    const file = item.getAsFile()
+    if (!file) {
+      Message.error('无法获取剪贴板图片')
+      return
+    }
+
+    // 生成文件名：clipboard_YYYYMMDD_HHmmss.ext
+    const now = new Date()
+    const pad = (n: number) => String(n).padStart(2, '0')
+    const ts = `${now.getFullYear()}${pad(now.getMonth()+1)}${pad(now.getDate())}_${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`
+    const ext = file.type.split('/')[1] || 'png'
+    const fileName = `clipboard_${ts}.${ext}`
+    const separator = getPathSeparator(filePath.value)
+    const fullPath = filePath.value + separator + fileName
+
+    // 转换为 base64 并保存
+    const reader = new FileReader()
+    reader.onload = async () => {
+      const result = reader.result as string
+      // 移除 data:image/xxx;base64, 前缀，只保留纯 base64 内容
+      const parts = result.split(',')
+      const base64Data = parts.length > 1 ? parts[1] : ''
+      if (!base64Data) {
+        Message.error('图片数据格式无效')
+        return
+      }
+
+      Message.loading({ content: `正在保存 ${fileName}...`, duration: 0 })
+      try {
+        await saveBase64File(fullPath, base64Data)
+        Message.clear()
+        Message.success(`已保存: ${fileName}`)
+        loadDirectory(filePath.value)
+      } catch (err: any) {
+        Message.clear()
+        Message.error('保存失败: ' + (err?.message || err))
+      }
+    }
+    reader.readAsDataURL(file)
+  } catch (err: any) {
+    Message.error('粘贴失败: ' + (err?.message || err))
+  }
+}
+
 // 渲染 Mermaid 图表
 watch(async () => {
   if (isMarkdownFile(selectedFileItem.value?.name || '') && computeRendered.value) {
@@ -1357,6 +1435,18 @@ watch(async () => {
     await nextTick()
   }
 }, { immediate: true })
+
+// 主题变化时重新渲染 mermaid 图表（跟随暗色/亮色）
+const themeStore = useThemeStore()
+watch(() => themeStore.isDark, async () => {
+  if (isMarkdownFile(selectedFileItem.value?.name || '') && computeRendered.value) {
+    try {
+      // 等 DOM 更新完成后再重新渲染，确保 isDarkTheme() 能读到正确的主题属性
+      await nextTick()
+      await rerenderMermaidDiagrams()
+    } catch { /* 忽略 */ }
+  }
+})
 </script>
 
 <style scoped>
diff --git a/web/src/components/MarkdownEditor.vue b/web/src/components/MarkdownEditor.vue
index b3f009c..c33acc9 100644
--- a/web/src/components/MarkdownEditor.vue
+++ b/web/src/components/MarkdownEditor.vue
@@ -26,8 +26,8 @@
       </div>
     </div>
     
-    <div class="editor-content" :class="{ 'fullscreen': isFullscreen }">
-      <div class="editor-panel" :class="{ 'expanded': isEditorExpanded }">
+    <div ref="editorContentRef" class="editor-content" :class="{ 'fullscreen': isFullscreen }">
+      <div class="editor-panel" :class="{ 'expanded': isEditorExpanded }" :style="{ width: editorWidthPercent + '%' }">
         <div class="panel-header">
           <span>编辑</span>
           <div class="panel-controls">
@@ -64,9 +64,9 @@ console.log('Hello, World!')
         </div>
       </div>
       
-      <div class="resizer" @mousedown="startResize"></div>
+      <div class="resizer" @mousedown="handleResize"></div>
       
-      <div class="preview-panel" :class="{ 'expanded': isPreviewExpanded }">
+      <div class="preview-panel" :class="{ 'expanded': isPreviewExpanded }" :style="{ width: (100 - editorWidthPercent) + '%' }">
         <div class="panel-header">
           <span>预览</span>
           <div class="panel-controls">
@@ -83,7 +83,7 @@ console.log('Hello, World!')
             </a-tooltip>
           </div>
         </div>
-        <div class="preview-wrapper">
+        <div ref="previewRef" class="preview-wrapper">
           <MarkdownPreview :content="markdownContent" />
         </div>
       </div>
@@ -123,6 +123,7 @@ import IconSync from '@arco-design/web-vue/es/icon/icon-sync'
 import IconSave from '@arco-design/web-vue/es/icon/icon-save'
 import IconEye from '@arco-design/web-vue/es/icon/icon-eye'
 import IconAlignLeft from '@arco-design/web-vue/es/icon/icon-align-left'
+import { createResizeHandler } from '@/utils/resize'
 
 export default {
   name: 'MarkdownEditor',
@@ -154,6 +155,9 @@ export default {
     const isEditorExpanded = ref(false)
     const isPreviewExpanded = ref(false)
     const showPreview = ref(true)
+    const editorWidthPercent = ref(50)
+    const editorContentRef = ref(null)
+    const previewRef = ref<HTMLElement | null>(null)
 
     // 计算属性
     const wordCount = computed(() => {
@@ -180,12 +184,12 @@ export default {
 
     const handleKeydown = (event) => {
       // Ctrl + S 保存
-      if (event.ctrlKey && event.key === 's') {
+      if ((event.ctrlKey || event.metaKey) && event.key === 's') {
         event.preventDefault()
         saveContent()
       }
       // Ctrl + / 切换预览
-      if (event.ctrlKey && event.key === '/') {
+      if ((event.ctrlKey || event.metaKey) && event.key === '/') {
         event.preventDefault()
         togglePreview()
       }
@@ -212,33 +216,18 @@ export default {
       }
     }
 
-    // 窗口大小调整
-    const startResize = (event) => {
-      if (!showPreview.value) return
-
-      const startX = event.clientX
-      const startWidth = document.querySelector('.editor-panel').offsetWidth
-      const startPreviewWidth = document.querySelector('.preview-panel').offsetWidth
-
-      const doResize = (moveEvent) => {
-        const deltaX = moveEvent.clientX - startX
-        const newEditorWidth = startWidth + deltaX
-        const newPreviewWidth = startPreviewWidth - deltaX
-
-        if (newEditorWidth > 100 && newPreviewWidth > 100) {
-          document.querySelector('.editor-panel').style.width = newEditorWidth + 'px'
-          document.querySelector('.preview-panel').style.width = newPreviewWidth + 'px'
-        }
+    // 分割拖拽调整宽度
+    const handleResize = createResizeHandler(
+      () => editorContentRef.value,
+      () => editorWidthPercent.value,
+      {
+        direction: 'horizontal',
+        minPercent: 15,
+        maxPercent: 85,
+        minPixels: 100,
+        onResize: (percent) => { editorWidthPercent.value = percent },
       }
-
-      const stopResize = () => {
-        document.removeEventListener('mousemove', doResize)
-        document.removeEventListener('mouseup', stopResize)
-      }
-
-      document.addEventListener('mousemove', doResize)
-      document.addEventListener('mouseup', stopResize)
-    }
+    )
 
     // 切换功能
     const togglePreview = () => {
@@ -294,11 +283,10 @@ export default {
 
     const renderPreview = () => {
       // 强制重新渲染预览
-      const previewElement = document.querySelector('.preview-wrapper')
-      if (previewElement) {
-        previewElement.style.opacity = '0'
+      if (previewRef.value) {
+        previewRef.value.style.opacity = '0'
         nextTick(() => {
-          previewElement.style.opacity = '1'
+          if (previewRef.value) previewRef.value.style.opacity = '1'
         })
       }
     }
@@ -316,10 +304,11 @@ export default {
         }, 5000)
       }
       // 调整高度
+      // computeRendered 是 computed ref，值变化即触发，无需 deep
       nextTick(() => {
         adjustTextareaHeight()
       })
-    }, { deep: true })
+    })
 
     // 初始化
     onMounted(() => {
@@ -361,7 +350,6 @@ export default {
       onExportComplete,
       getMarkdownContent,
       setMarkdownContent,
-      startResize,
       togglePreview,
       toggleFullscreen,
       toggleEditorExpand,
@@ -439,10 +427,10 @@ export default {
 
 .editor-panel,
 .preview-panel {
-  flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 100px;
+  overflow: hidden;
 }
 
 .editor-panel.expanded {
diff --git a/web/src/composables/index.ts b/web/src/composables/index.ts
index 69bff51..8b7406e 100644
--- a/web/src/composables/index.ts
+++ b/web/src/composables/index.ts
@@ -2,7 +2,6 @@
  * 全局 Composables 导出
  */
 
-export * from './useLocalStorage'
 export * from './useDebounce'
 export * from './useTablePage'
 export * from './useApiError'
diff --git a/web/src/main.js b/web/src/main.js
index c914ea6..4aa30e4 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,7 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-// Arco Design 样式（组件按需自动引入）
-import '@arco-design/web-vue/dist/arco.css'
+// Arco Design 组件 CSS 按需加载（sideEffect: true）
 import './style.css'
 import App from './App.vue'
 import { useThemeStore } from './stores/theme'
diff --git a/web/src/stores/theme.ts b/web/src/stores/theme.ts
index f11b9d2..bb08120 100644
--- a/web/src/stores/theme.ts
+++ b/web/src/stores/theme.ts
@@ -32,6 +32,15 @@ export const useThemeStore = defineStore('theme', () => {
     const method = newTheme === 'dark' ? 'setAttribute' : 'removeAttribute'
     document.body[method]('arco-theme', 'dark')
 
+    // 同步 Wails 窗口标题栏主题
+    try {
+      if (newTheme === 'dark') {
+        window.runtime?.WindowSetDarkTheme?.()
+      } else {
+        window.runtime?.WindowSetLightTheme?.()
+      }
+    } catch { /* 非 Wails 环境忽略 */ }
+
     // 持久化
     localStorage.setItem(THEME_STORAGE_KEY, newTheme)
   }
diff --git a/web/src/stores/update.ts b/web/src/stores/update.ts
index abcd006..d8aeaec 100644
--- a/web/src/stores/update.ts
+++ b/web/src/stores/update.ts
@@ -72,6 +72,14 @@ export const useUpdateStore = defineStore('update', () => {
         updateInfo.value = result.data
         showUpdate.value = true
 
+        // 系统通知：发现新版本
+        try {
+          window.runtime?.SendNotification?.({
+            title: 'U-Desk',
+            body: `发现新版本 ${result.data.latest_version}，点击查看`
+          })
+        } catch { /* 通知不可用时忽略 */ }
+
         if (!silent) {
           Message.success('发现新版本！')
         }
@@ -202,6 +210,14 @@ export const useUpdateStore = defineStore('update', () => {
     // 完成下载
     downloadProgress.value = 100
     downloadStatus.value = 'success'
+
+    // 系统通知：下载完成
+    try {
+      window.runtime?.SendNotification?.({
+        title: 'U-Desk',
+        body: `更新包下载完成 (${formatFileSize(fileSize)})，正在安装...`
+      })
+    } catch { /* 通知不可用时忽略 */ }
     const fileSize = (data.file_size as number) || 0
     progressInfo.value = {
       speed: 0,
@@ -228,6 +244,9 @@ export const useUpdateStore = defineStore('update', () => {
       return
     }
 
+    // 初始化系统通知（幂等调用，重复无副作用）
+    window.runtime?.InitializeNotifications?.()
+
     window.runtime.EventsOn('download-progress', onDownloadProgress)
     window.runtime.EventsOn('download-complete', onDownloadComplete)
   }
diff --git a/web/src/style.css b/web/src/style.css
index a27b3bf..7d6cf9c 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -371,6 +371,12 @@ html {
     scroll-behavior: smooth;
 }
 
+/* 拖拽分割条时禁止文本选中 */
+body.resizing {
+    user-select: none !important;
+    cursor: inherit !important;
+}
+
 /* Tooltip 全局样式 */
 .arco-tooltip {
     font-size: 12px !important;
diff --git a/web/src/types/file-system.ts b/web/src/types/file-system.ts
index ef80a80..f743d24 100644
--- a/web/src/types/file-system.ts
+++ b/web/src/types/file-system.ts
@@ -111,6 +111,10 @@ export interface ToolbarConfig {
   fileLoading: boolean
   /** 是否显示侧边栏 */
   showSidebar: boolean
+  /** 排序字段 */
+  sortBy: string
+  /** 排序方向 */
+  sortOrder: string
 }
 
 /**
diff --git a/web/src/utils/codeMirrorLoader.js b/web/src/utils/codeMirrorLoader.js
index a3952f9..aba81ab 100644
--- a/web/src/utils/codeMirrorLoader.js
+++ b/web/src/utils/codeMirrorLoader.js
@@ -1,87 +1,99 @@
 /**
- * CodeMirror 语言包加载器
- * 使用统一导出避免多实例问题
+ * CodeMirror 语言包加载器（动态导入，按需加载）
  */
 
-import {
-  javascript, json, yaml, html, css,
-  cpp, rust, go, python, php, sql, markdown, java,
-  shell, powerShell, dart, StreamLanguage
-} from './codemirrorExports'
 import { getCmLanguage } from './languageMap'
 
 const languageCache = new Map()
 
 /**
- * 获取语言扩展
+ * 获取语言扩展（异步，首次调用会动态加载对应语言包）
  * @param {string} language - 语言名称
- * @returns {Extension|null} CodeMirror 语言扩展
+ * @returns {Promise<Extension|null>} CodeMirror 语言扩展
  */
-export function loadLanguageExtension(language) {
+export async function loadLanguageExtension(language) {
   if (languageCache.has(language)) {
     return languageCache.get(language)
   }
 
-  let extension = null
+  let mod, extension = null
 
   switch (language) {
     case 'javascript':
-      extension = javascript({ jsx: true })
+      mod = await import('@codemirror/lang-javascript')
+      extension = mod.javascript({ jsx: true })
       break
     case 'typescript':
-      extension = javascript({ typescript: true, jsx: true })
+      mod = await import('@codemirror/lang-javascript')
+      extension = mod.javascript({ typescript: true, jsx: true })
       break
     case 'json':
-      extension = json()
+      ;({ json: extension } = await import('@codemirror/lang-json'))
+      extension = extension()
       break
     case 'yaml':
-      extension = yaml()
+      ;({ yaml: extension } = await import('@codemirror/lang-yaml'))
+      extension = extension()
       break
     case 'html':
-      extension = html()
+      ;({ html: extension } = await import('@codemirror/lang-html'))
+      extension = extension()
       break
     case 'css':
-      extension = css()
+      ;({ css: extension } = await import('@codemirror/lang-css'))
+      extension = extension()
       break
     case 'cpp':
     case 'c':
-      extension = cpp()
+      ;({ cpp: extension } = await import('@codemirror/lang-cpp'))
+      extension = extension()
       break
     case 'rust':
-      extension = rust()
+      ;({ rust: extension } = await import('@codemirror/lang-rust'))
+      extension = extension()
       break
     case 'go':
-      extension = go()
+      ;({ go: extension } = await import('@codemirror/lang-go'))
+      extension = extension()
       break
     case 'python':
-      extension = python()
+      ;({ python: extension } = await import('@codemirror/lang-python'))
+      extension = extension()
       break
     case 'php':
-      extension = php()
+      ;({ php: extension } = await import('@codemirror/lang-php'))
+      extension = extension()
       break
     case 'sql':
-      extension = sql()
+      ;({ sql: extension } = await import('@codemirror/lang-sql'))
+      extension = extension()
       break
     case 'markdown':
-      extension = markdown()
+      ;({ markdown: extension } = await import('@codemirror/lang-markdown'))
+      extension = extension()
       break
     case 'java':
-      extension = java()
+      ;({ java: extension } = await import('@codemirror/lang-java'))
+      extension = extension()
       break
     case 'shell':
     case 'bash':
     case 'sh':
+    case 'dockerfile': {
+      const { StreamLanguage, shell } = await import('@codemirror/legacy-modes/mode/shell')
       extension = StreamLanguage.define(shell)
       break
-    case 'powershell':
+    }
+    case 'powershell': {
+      const { StreamLanguage, powerShell } = await import('@codemirror/legacy-modes/mode/powershell')
       extension = StreamLanguage.define(powerShell)
       break
-    case 'dart':
+    }
+    case 'dart': {
+      const { StreamLanguage, clike: dart } = await import('@codemirror/legacy-modes/mode/clike')
       extension = StreamLanguage.define(dart)
       break
-    case 'dockerfile':
-      extension = StreamLanguage.define(shell)
-      break
+    }
     default:
       return null
   }
diff --git a/web/src/utils/codemirrorExports.js b/web/src/utils/codemirrorExports.js
index ff80a9f..7977929 100644
--- a/web/src/utils/codemirrorExports.js
+++ b/web/src/utils/codemirrorExports.js
@@ -10,22 +10,4 @@ export { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
 export { bracketMatching, defaultHighlightStyle, syntaxHighlighting, StreamLanguage } from '@codemirror/language'
 export { oneDark } from '@codemirror/theme-one-dark'
 
-// Language packages
-export { javascript } from '@codemirror/lang-javascript'
-export { json } from '@codemirror/lang-json'
-export { yaml } from '@codemirror/lang-yaml'
-export { html } from '@codemirror/lang-html'
-export { css } from '@codemirror/lang-css'
-export { cpp } from '@codemirror/lang-cpp'
-export { rust } from '@codemirror/lang-rust'
-export { go } from '@codemirror/lang-go'
-export { python } from '@codemirror/lang-python'
-export { php } from '@codemirror/lang-php'
-export { sql } from '@codemirror/lang-sql'
-export { markdown } from '@codemirror/lang-markdown'
-export { java } from '@codemirror/lang-java'
-
-// Legacy language modes (shell, powershell, dart)
-export { shell } from '@codemirror/legacy-modes/mode/shell'
-export { powerShell } from '@codemirror/legacy-modes/mode/powershell'
-export { dart } from '@codemirror/legacy-modes/mode/clike'
+// 语言包通过 codeMirrorLoader 动态导入，避免全量打包
diff --git a/web/src/utils/constants.js b/web/src/utils/constants.js
index 9facf94..77ccfd5 100644
--- a/web/src/utils/constants.js
+++ b/web/src/utils/constants.js
@@ -27,6 +27,9 @@ export const STORAGE_KEYS = {
     FAVORITE_FILES: 'app-filesystem-favorite-files',
     EDIT_MODE: 'app-filesystem-edit-mode', // HTML/Markdown 编辑模式状态
     FILE_DRAFT: 'app-filesystem-file-draft', // 文件草稿
+    SORT: 'app-filesystem-sort', // 排序状态
+    COL_SETTINGS: 'app-filesystem-col-settings', // 列配置（显隐+顺序）
+    SHOW_HEADER: 'app-filesystem-show-header', // 表头显隐
   },
 
   // 设备测试模块
diff --git a/web/src/utils/errorHandler.js b/web/src/utils/errorHandler.js
deleted file mode 100644
index cc4f62d..0000000
--- a/web/src/utils/errorHandler.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * 错误处理工具函数
- *
- * @module utils/errorHandler
- * @description 统一的错误处理，避免代码重复
- */
-
-import { Message } from '@arco-design/web-vue'
-
-/**
- * 统一的错误处理
- * @param {Error} error - 错误对象
- * @param {string} context - 操作上下文（用于日志）
- */
-export function handleError(error, context = '') {
-  // 1. 记录日志
-  console.error(`[${context}]`, error)
-
-  // 2. 显示用户提示
-  const message = error?.message || '操作失败'
-  Message.error(message)
-}
-
-/**
- * 包装异步函数，自动处理错误
- * @param {Function} fn - 异步函数
- * @param {string} context - 操作上下文
- * @returns {Function} 包装后的函数
- */
-export function withErrorHandling(fn, context = '') {
-  return async (...args) => {
-    try {
-      return await fn(...args)
-    } catch (error) {
-      handleError(error, context)
-      throw error // 重新抛出，让调用者决定是否继续
-    }
-  }
-}
-
-/**
- * 显示成功提示
- * @param {string} message - 成功消息
- */
-export function showSuccess(message) {
-  Message.success(message)
-}
-
-/**
- * 显示警告提示
- * @param {string} message - 警告消息
- */
-export function showWarning(message) {
-  Message.warning(message)
-}
-
-/**
- * 显示信息提示
- * @param {string} message - 信息消息
- */
-export function showInfo(message) {
-  Message.info(message)
-}
diff --git a/web/src/utils/fileUtils.js b/web/src/utils/fileUtils.js
index c87b62e..5a23724 100644
--- a/web/src/utils/fileUtils.js
+++ b/web/src/utils/fileUtils.js
@@ -321,22 +321,58 @@ export function sanitizeFileName(filename, replacement = '_') {
 }
 
 /**
- * 文件列表排序：文件夹优先，同类型按名称排序
+ * 文件列表排序：文件夹优先，支持多字段排序
  * @param {Array} fileList - 文件列表
+ * @param {Object} options - 排序选项 { sortBy, sortOrder }
  * @returns {Array} 排序后的文件列表
  *
  * @example
- * sortFileList([{name: 'b.txt', isDir: false}, {name: 'a', isDir: true}])
- * // [{name: 'a', isDir: true}, {name: 'b.txt', isDir: false}]
+ * sortFileList(fileList, { sortBy: 'name', sortOrder: 'asc' })
  */
-export function sortFileList(fileList) {
+
+/**
+ * 格式化文件修改时间
+ * @param {string} t - 时间字符串
+ * @returns {string} 格式化后的时间，如 2026/04/11 14:30
+ */
+export function formatFileTime(t) {
+  if (!t) return ''
+  const d = new Date(t)
+  if (isNaN(d.getTime())) return t
+  const pad = n => String(n).padStart(2, '0')
+  return `${d.getFullYear()}/${pad(d.getMonth()+1)}/${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+
+export function sortFileList(fileList, options = {}) {
   if (!Array.isArray(fileList)) return fileList
 
+  const { sortBy = 'name', sortOrder = 'asc' } = options
+  const dir = sortOrder === 'desc' ? 1 : -1
+
   return fileList.sort((a, b) => {
-    // API 层已转换，直接使用 isDir
-    if (a.isDir === b.isDir) {
-      return a.name.localeCompare(b.name)
+    // 文件夹始终排在前面
+    if (a.isDir !== b.isDir) {
+      return a.isDir ? -1 : 1
     }
-    return a.isDir ? -1 : 1
+
+    let cmp = 0
+    switch (sortBy) {
+      case 'size':
+        cmp = (a.size || 0) - (b.size || 0)
+        break
+      case 'type': {
+        cmp = getExt(a.name).localeCompare(getExt(b.name))
+        break
+      }
+      case 'modified_time': {
+        const ta = a.modified_time ? new Date(a.modified_time).getTime() : 0
+        const tb = b.modified_time ? new Date(b.modified_time).getTime() : 0
+        cmp = ta - tb
+        break
+      }
+      default: // name
+        cmp = a.name.localeCompare(b.name)
+    }
+    return cmp * dir
   })
 }
diff --git a/web/src/utils/languageMap.ts b/web/src/utils/languageMap.ts
index 14e9693..2734995 100644
--- a/web/src/utils/languageMap.ts
+++ b/web/src/utils/languageMap.ts
@@ -103,6 +103,24 @@ const extensionToLanguage: Record<string, { hljs?: string; cm?: string }> = {
   msg: { cm: 'text' },
 }
 
+// 从映射表中收集所有已知的 hljs 语言名
+const knownHljsLanguages = new Set(
+  Object.values(extensionToLanguage)
+    .map(v => v.hljs)
+    .filter(Boolean) as string[]
+)
+
+// highlight.js lib/common 内置的常用语言名（代码块标记直接使用）
+const commonLangNames = new Set([
+  'javascript', 'typescript', 'python', 'java', 'go', 'rust', 'c', 'cpp',
+  'csharp', 'php', 'ruby', 'swift', 'kotlin', 'scala', 'dart', 'lua',
+  'r', 'bash', 'shell', 'powershell', 'dos', 'cmd', 'sql', 'yaml', 'json', 'xml',
+  'markdown', 'css', 'scss', 'less', 'html', 'ini', 'makefile', 'dockerfile',
+  'cmake', 'latex', 'plaintext', 'diff', 'graphql', 'nginx', 'perl',
+  'objectivec', 'haskell', 'elixir', 'erlang', 'clojure', 'ocaml',
+  'vbnet', 'wasm', 'fsharp', 'groovy', 'julia', 'matlab', 'zig'
+])
+
 /**
  * 获取 hljs 语言标识（带别名解析）
  */
@@ -110,12 +128,15 @@ export function getHljsLanguage(langOrExt: string): string {
   if (!langOrExt) return 'plaintext'
   const lower = langOrExt.toLowerCase()
 
-  // 先查扩展名映射
-  const mapped = extensionToLanguage[lower]
-  if (mapped?.hljs) return mapped.hljs
+  // 1. 直接是已知语言名（代码块 ```python / ```typescript 等）
+  if (commonLangNames.has(lower)) return lower
 
-  // 再查 hljs 直接注册名
-  if (typeof hljs !== 'undefined' && hljs.getLanguage(lower)) return lower
+  // 2. 扩展名映射（.ts → typescript, .py → python 等）
+  const mapped = extensionToLanguage[lower]?.hljs
+  if (mapped) return mapped
+
+  // 3. 已在 known 集合中的映射值
+  if (knownHljsLanguages.has(lower)) return lower
 
   return 'plaintext'
 }
diff --git a/web/src/utils/markedExtensions.ts b/web/src/utils/markedExtensions.ts
index 6234495..f94988a 100644
--- a/web/src/utils/markedExtensions.ts
+++ b/web/src/utils/markedExtensions.ts
@@ -28,44 +28,40 @@ async function loadMermaid() {
     return mermaidInstance
   }
 
-  try {
-    const mermaid = await import('mermaid')
-    mermaid.default.initialize({
-      startOnLoad: false,
-      theme: currentTheme,
-      securityLevel: 'strict',
-      themeVariables: currentTheme === 'dark' ? {
-        primaryColor: '#165DFF',
-        primaryTextColor: '#ffffff',
-        primaryBorderColor: '#4080FF',
-        lineColor: '#4E5969',
-        secondaryColor: '#0E42D2',
-        tertiaryColor: '#0FC6C2',
-        mainBkg: '#17171A',
-        nodeBorder: '#165DFF',
-        clusterBkg: '#232324',
-        titleColor: '#FFFFFF',
-        edgeLabelBackground: '#232324'
-      } : {
-        primaryColor: '#165DFF',
-        primaryTextColor: '#ffffff',
-        primaryBorderColor: '#4080FF',
-        lineColor: '#86909C',
-        secondaryColor: '#E8F3FF',
-        tertiaryColor: '#722ED1',
-        mainBkg: '#F2F3F5',
-        nodeBorder: '#165DFF',
-        clusterBkg: '#F7F8FA',
-        titleColor: '#1D2129',
-        edgeLabelBackground: '#F2F3F5'
-      }
-    })
-    mermaidTheme = currentTheme
-    mermaidInstance = mermaid.default
-    return mermaidInstance
-  } catch {
-    return null
+  if (!mermaidInstance) {
+    const m = await import('mermaid')
+    mermaidInstance = m.default
   }
+  mermaidInstance.initialize({
+    startOnLoad: false,
+    theme: currentTheme,
+    securityLevel: 'strict',
+    themeVariables: Object.assign({
+      primaryColor: '#165DFF',
+      primaryTextColor: '#ffffff',
+      primaryBorderColor: '#4080FF'
+    }, currentTheme === 'dark' ? {
+      lineColor: '#4E5969',
+      secondaryColor: '#0E42D2',
+      tertiaryColor: '#0FC6C2',
+      mainBkg: '#17171A',
+      nodeBorder: '#165DFF',
+      clusterBkg: '#232324',
+      titleColor: '#FFFFFF',
+      edgeLabelBackground: '#232324'
+    } : {
+      lineColor: '#86909C',
+      secondaryColor: '#E8F3FF',
+      tertiaryColor: '#722ED1',
+      mainBkg: '#F2F3F5',
+      nodeBorder: '#165DFF',
+      clusterBkg: '#F7F8FA',
+      titleColor: '#1D2129',
+      edgeLabelBackground: '#F2F3F5'
+    })
+  })
+  mermaidTheme = currentTheme
+  return mermaidInstance
 }
 
 const renderer = new marked.Renderer()
@@ -77,7 +73,12 @@ renderer.code = function(token: any) {
 
   const lang = getHljsLanguage(token.lang)
 
-  const highlighted = hljs.highlight(token.text, { language: lang }).value
+  let highlighted: string
+  try {
+    highlighted = hljs.highlight(token.text, { language: lang }).value
+  } catch {
+    highlighted = token.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  }
   return `<pre><code class="hljs language-${lang}" data-theme="auto">${highlighted}</code></pre>`
 }
 
@@ -115,7 +116,7 @@ renderer.link = function(token: any) {
   const titleAttr = title ? ` title="${title}"` : ''
 
   if (href.startsWith('#')) {
-    return `<a href="${href}"${titleAttr}>${text}</a>`
+    return `<a href="${href}${titleAttr}">${text}</a>`
   }
 
   if (isLocalFileLink(href)) {
@@ -132,6 +133,28 @@ export { marked }
 export async function renderMermaidDiagrams() {
   const mermaid = await loadMermaid()
   if (mermaid) {
+    // 渲染前保存原始源码（textContent 在 SVG 渲染后会变成 CSS 垃圾）
+    document.querySelectorAll('.mermaid:not([data-mermaid-src])').forEach(pre => {
+      ;(pre as HTMLElement).setAttribute('data-mermaid-src', pre.textContent || '')
+    })
     await mermaid.run()
   }
 }
+
+/** 清除已渲染内容并重新渲染（用于主题切换后刷新） */
+export async function rerenderMermaidDiagrams(container?: HTMLElement | null) {
+  // 强制重新加载（清除缓存，让下次 loadMermaid 重新初始化新主题）
+  mermaidInstance = null
+  mermaidTheme = null
+
+  const target = container || document
+  target.querySelectorAll('.mermaid').forEach(pre => {
+    const el = pre as HTMLElement
+    if (el.getAttribute('data-processed')) {
+      // 从保存的原始源码恢复，而非 textContent（SVG 的 textContent 是 CSS 垃圾）
+      el.innerHTML = el.getAttribute('data-mermaid-src') || ''
+      el.removeAttribute('data-processed')
+    }
+  })
+  await renderMermaidDiagrams()
+}
diff --git a/web/src/utils/resize.ts b/web/src/utils/resize.ts
new file mode 100644
index 0000000..48cebf3
--- /dev/null
+++ b/web/src/utils/resize.ts
@@ -0,0 +1,107 @@
+export interface ResizeOptions {
+  /** 拖拽方向，默认垂直 */
+  direction?: 'horizontal' | 'vertical'
+  /** 最小百分比，默认 20 */
+  minPercent?: number
+  /** 最大百分比，默认 80 */
+  maxPercent?: number
+  /** 最小像素值，默认 150 */
+  minPixels?: number
+  /** 输出模式：percent（默认）或 pixels。pixels 模式下 onResize/onResizeEnd 接收像素值而非百分比 */
+  outputMode?: 'percent' | 'pixels'
+  /** 拖拽中回调（值类型由 outputMode 决定） */
+  onResize?: (value: number) => void
+  /** 拖拽结束回调（用于持久化等） */
+  onResizeEnd?: (value: number) => void
+}
+
+/**
+ * 通用分割拖拽处理器工厂
+ *
+ * 用法：
+ * ```ts
+ * const handleResize = createResizeHandler(
+ *   () => containerRef.value,   // getter，mousedown 时才读取
+ *   () => percent.value,
+ *   { direction: 'horizontal', onResize: (p) => { percent.value = p } }
+ * )
+ * // template: <div class="resizer" @mousedown="handleResize"></div>
+ * ```
+ */
+export function createResizeHandler(
+  getContainer: () => HTMLElement | null,
+  getInitialPercentage: () => number,
+  options: ResizeOptions = {}
+): (e: MouseEvent) => void {
+  const {
+    direction = 'vertical',
+    minPercent = 20,
+    maxPercent = 80,
+    minPixels = 150,
+    outputMode = 'percent',
+    onResize,
+    onResizeEnd,
+  } = options
+
+  const isHorizontal = direction === 'horizontal'
+  const usePixels = outputMode === 'pixels'
+
+  return (e: MouseEvent) => {
+    e.preventDefault()
+
+    const container = getContainer()
+    if (!container) return
+
+    // 初始值：pixels 模式下从 getter 获取像素值，percent 模式下获取百分比
+    let startValue = getInitialPercentage()
+    if (usePixels) {
+      // pixels 模式：将初始像素值转换为百分比用于拖拽计算
+      const rect = container.getBoundingClientRect()
+      const containerSize = isHorizontal ? rect.width : rect.height
+      if (containerSize > 0) {
+        startValue = (startValue / containerSize) * 100
+      }
+    }
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      const currentRect = container.getBoundingClientRect()
+      let rawValue: number
+
+      if (isHorizontal) {
+        rawValue = ((moveEvent.clientX - currentRect.left) / currentRect.width) * 100
+      } else {
+        rawValue = ((moveEvent.clientY - currentRect.top) / currentRect.height) * 100
+      }
+
+      const minPercentFromPixels = (minPixels / (isHorizontal ? currentRect.width : currentRect.height)) * 100
+      const clamped = Math.max(
+        Math.max(minPercent, minPercentFromPixels),
+        Math.min(maxPercent, rawValue)
+      )
+
+      if (usePixels) {
+        // 转回像素值传给回调
+        const containerSize = isHorizontal ? currentRect.width : currentRect.height
+        onResize?.(Math.round((clamped / 100) * containerSize))
+      } else {
+        onResize?.(clamped)
+      }
+    }
+
+    const handleMouseUp = () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+      document.body.classList.remove('resizing')
+      if (usePixels) {
+        // pixels 模式：传回当前像素值（onResize 已更新，读 getter 获取最新值）
+        onResizeEnd?.(getInitialPercentage())
+      } else {
+        onResizeEnd?.(getInitialPercentage())
+      }
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    document.body.classList.add('resizing')
+  }
+}
diff --git a/web/src/wailsjs/wailsjs/go/main/App.d.ts b/web/src/wailsjs/wailsjs/go/main/App.d.ts
index 13bc760..4ce7d79 100644
--- a/web/src/wailsjs/wailsjs/go/main/App.d.ts
+++ b/web/src/wailsjs/wailsjs/go/main/App.d.ts
@@ -110,6 +110,8 @@ export function RestoreFromRecycleBin(arg1:string):Promise<void>;
 
 export function SaveAppConfig(arg1:main.SaveAppConfigRequest):Promise<Record<string, any>>;
 
+export function SaveBase64File(arg1:main.SaveBase64FileRequest):Promise<void>;
+
 export function SaveDbConnection(arg1:api.SaveConnectionRequest):Promise<void>;
 
 export function SaveResult(arg1:number,arg2:string,arg3:string,arg4:string,arg5:any,arg6:Array<string>,arg7:number,arg8:number):Promise<Record<string, any>>;
diff --git a/web/src/wailsjs/wailsjs/go/main/App.js b/web/src/wailsjs/wailsjs/go/main/App.js
index 828bc44..8ac1849 100644
--- a/web/src/wailsjs/wailsjs/go/main/App.js
+++ b/web/src/wailsjs/wailsjs/go/main/App.js
@@ -214,6 +214,10 @@ export function SaveAppConfig(arg1) {
   return window['go']['main']['App']['SaveAppConfig'](arg1);
 }
 
+export function SaveBase64File(arg1) {
+  return window['go']['main']['App']['SaveBase64File'](arg1);
+}
+
 export function SaveDbConnection(arg1) {
   return window['go']['main']['App']['SaveDbConnection'](arg1);
 }
diff --git a/web/src/wailsjs/wailsjs/go/models.ts b/web/src/wailsjs/wailsjs/go/models.ts
index 7f87fc3..a7e6cba 100644
--- a/web/src/wailsjs/wailsjs/go/models.ts
+++ b/web/src/wailsjs/wailsjs/go/models.ts
@@ -186,6 +186,20 @@ export namespace main {
 		    return a;
 		}
 	}
+	export class SaveBase64FileRequest {
+	    path: string;
+	    content: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new SaveBase64FileRequest(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.path = source["path"];
+	        this.content = source["content"];
+	    }
+	}
 	export class WriteFileRequest {
 	    path: string;
 	    content: string;
diff --git a/web/src/wailsjs/wailsjs/runtime/runtime.d.ts b/web/src/wailsjs/wailsjs/runtime/runtime.d.ts
index 4445dac..3bbea84 100644
--- a/web/src/wailsjs/wailsjs/runtime/runtime.d.ts
+++ b/web/src/wailsjs/wailsjs/runtime/runtime.d.ts
@@ -246,4 +246,85 @@ export function OnFileDropOff() :void
 export function CanResolveFilePaths(): boolean;
 
 // Resolves file paths for an array of files
-export function ResolveFilePaths(files: File[]): void
\ No newline at end of file
+export function ResolveFilePaths(files: File[]): void
+
+// Notification types
+export interface NotificationOptions {
+    id: string;
+    title: string;
+    subtitle?: string; // macOS and Linux only
+    body?: string;
+    categoryId?: string;
+    data?: { [key: string]: any };
+}
+
+export interface NotificationAction {
+    id?: string;
+    title?: string;
+    destructive?: boolean; // macOS-specific
+}
+
+export interface NotificationCategory {
+    id?: string;
+    actions?: NotificationAction[];
+    hasReplyField?: boolean;
+    replyPlaceholder?: string;
+    replyButtonTitle?: string;
+}
+
+// [InitializeNotifications](https://wails.io/docs/reference/runtime/notification#initializenotifications)
+// Initializes the notification service for the application.
+// This must be called before sending any notifications.
+export function InitializeNotifications(): Promise<void>;
+
+// [CleanupNotifications](https://wails.io/docs/reference/runtime/notification#cleanupnotifications)
+// Cleans up notification resources and releases any held connections.
+export function CleanupNotifications(): Promise<void>;
+
+// [IsNotificationAvailable](https://wails.io/docs/reference/runtime/notification#isnotificationavailable)
+// Checks if notifications are available on the current platform.
+export function IsNotificationAvailable(): Promise<boolean>;
+
+// [RequestNotificationAuthorization](https://wails.io/docs/reference/runtime/notification#requestnotificationauthorization)
+// Requests notification authorization from the user (macOS only).
+export function RequestNotificationAuthorization(): Promise<boolean>;
+
+// [CheckNotificationAuthorization](https://wails.io/docs/reference/runtime/notification#checknotificationauthorization)
+// Checks the current notification authorization status (macOS only).
+export function CheckNotificationAuthorization(): Promise<boolean>;
+
+// [SendNotification](https://wails.io/docs/reference/runtime/notification#sendnotification)
+// Sends a basic notification with the given options.
+export function SendNotification(options: NotificationOptions): Promise<void>;
+
+// [SendNotificationWithActions](https://wails.io/docs/reference/runtime/notification#sendnotificationwithactions)
+// Sends a notification with action buttons. Requires a registered category.
+export function SendNotificationWithActions(options: NotificationOptions): Promise<void>;
+
+// [RegisterNotificationCategory](https://wails.io/docs/reference/runtime/notification#registernotificationcategory)
+// Registers a notification category that can be used with SendNotificationWithActions.
+export function RegisterNotificationCategory(category: NotificationCategory): Promise<void>;
+
+// [RemoveNotificationCategory](https://wails.io/docs/reference/runtime/notification#removenotificationcategory)
+// Removes a previously registered notification category.
+export function RemoveNotificationCategory(categoryId: string): Promise<void>;
+
+// [RemoveAllPendingNotifications](https://wails.io/docs/reference/runtime/notification#removeallpendingnotifications)
+// Removes all pending notifications from the notification center.
+export function RemoveAllPendingNotifications(): Promise<void>;
+
+// [RemovePendingNotification](https://wails.io/docs/reference/runtime/notification#removependingnotification)
+// Removes a specific pending notification by its identifier.
+export function RemovePendingNotification(identifier: string): Promise<void>;
+
+// [RemoveAllDeliveredNotifications](https://wails.io/docs/reference/runtime/notification#removealldeliverednotifications)
+// Removes all delivered notifications from the notification center.
+export function RemoveAllDeliveredNotifications(): Promise<void>;
+
+// [RemoveDeliveredNotification](https://wails.io/docs/reference/runtime/notification#removedeliverednotification)
+// Removes a specific delivered notification by its identifier.
+export function RemoveDeliveredNotification(identifier: string): Promise<void>;
+
+// [RemoveNotification](https://wails.io/docs/reference/runtime/notification#removenotification)
+// Removes a notification by its identifier (cross-platform convenience function).
+export function RemoveNotification(identifier: string): Promise<void>;
\ No newline at end of file
diff --git a/web/src/wailsjs/wailsjs/runtime/runtime.js b/web/src/wailsjs/wailsjs/runtime/runtime.js
index 7cb89d7..556621e 100644
--- a/web/src/wailsjs/wailsjs/runtime/runtime.js
+++ b/web/src/wailsjs/wailsjs/runtime/runtime.js
@@ -239,4 +239,60 @@ export function CanResolveFilePaths() {
 
 export function ResolveFilePaths(files) {
     return window.runtime.ResolveFilePaths(files);
+}
+
+export function InitializeNotifications() {
+    return window.runtime.InitializeNotifications();
+}
+
+export function CleanupNotifications() {
+    return window.runtime.CleanupNotifications();
+}
+
+export function IsNotificationAvailable() {
+    return window.runtime.IsNotificationAvailable();
+}
+
+export function RequestNotificationAuthorization() {
+    return window.runtime.RequestNotificationAuthorization();
+}
+
+export function CheckNotificationAuthorization() {
+    return window.runtime.CheckNotificationAuthorization();
+}
+
+export function SendNotification(options) {
+    return window.runtime.SendNotification(options);
+}
+
+export function SendNotificationWithActions(options) {
+    return window.runtime.SendNotificationWithActions(options);
+}
+
+export function RegisterNotificationCategory(category) {
+    return window.runtime.RegisterNotificationCategory(category);
+}
+
+export function RemoveNotificationCategory(categoryId) {
+    return window.runtime.RemoveNotificationCategory(categoryId);
+}
+
+export function RemoveAllPendingNotifications() {
+    return window.runtime.RemoveAllPendingNotifications();
+}
+
+export function RemovePendingNotification(identifier) {
+    return window.runtime.RemovePendingNotification(identifier);
+}
+
+export function RemoveAllDeliveredNotifications() {
+    return window.runtime.RemoveAllDeliveredNotifications();
+}
+
+export function RemoveDeliveredNotification(identifier) {
+    return window.runtime.RemoveDeliveredNotification(identifier);
+}
+
+export function RemoveNotification(identifier) {
+    return window.runtime.RemoveNotification(identifier);
 }
\ No newline at end of file
diff --git a/web/vite.config.js b/web/vite.config.js
index 5f2ac3c..529bd2c 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -9,7 +9,7 @@ export default defineConfig({
   plugins: [
     vue(),
     AutoImport({
-      imports: ['vue', 'vue-router'],
+      imports: ['vue'],
       dts: 'src/auto-imports.d.ts',
     }),
     Components({