diff --git a/package.json b/package.json
index f52ba8a..d997c93 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "codeforge",
   "private": true,
-  "version": "26.0.0",
+  "version": "26.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 9c21961..ec51ab3 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -4,7 +4,7 @@ version = 4
 
 [[package]]
 name = "CodeForge"
-version = "26.0.0"
+version = "26.1.0"
 dependencies = [
  "async-trait",
  "chrono",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 8ffc93d..42c3350 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "CodeForge"
-version = "26.0.0"
+version = "26.1.0"
 description = "CodeForge 是一款轻量级、高性能的桌面代码执行器，专为开发者、学生和编程爱好者设计。"
 authors = ["devlive-community"]
 edition = "2024"
diff --git a/src-tauri/src/execution.rs b/src-tauri/src/execution.rs
index 54fa985..bf72c6b 100644
--- a/src-tauri/src/execution.rs
+++ b/src-tauri/src/execution.rs
@@ -353,6 +353,11 @@ pub async fn execute_code(
         command.stdin(Stdio::null());
     }
 
+    // 自定义环境变量
+    if let Some(env) = &request.env {
+        command.envs(env.iter().map(|(k, v)| (k.as_str(), v.as_str())));
+    }
+
     // 设置工作目录（就地运行为文件目录，否则为插件 execute_home）
     if let Some(dir) = &cwd {
         command.current_dir(dir);
diff --git a/src-tauri/src/filesystem.rs b/src-tauri/src/filesystem.rs
index 3f85978..a21adcc 100644
--- a/src-tauri/src/filesystem.rs
+++ b/src-tauri/src/filesystem.rs
@@ -58,8 +58,15 @@ const DEFAULT_MAX_FILE_SIZE_MB: u64 = 5;
 const MAX_LIST_FILES: usize = 20000;
 
 /// 递归列出目录下所有文件（用于 Cmd+P 快速打开）。跳过隐藏目录与常见重目录。
+/// 重 I/O 放到阻塞线程池，避免阻塞主线程。
 #[tauri::command]
-pub fn list_files(path: String) -> Result<Vec<String>, String> {
+pub async fn list_files(path: String) -> Result<Vec<String>, String> {
+    tokio::task::spawn_blocking(move || run_list_files(path))
+        .await
+        .map_err(|e| format!("列文件任务失败: {}", e))?
+}
+
+fn run_list_files(path: String) -> Result<Vec<String>, String> {
     let root = Path::new(&path);
     if !root.is_dir() {
         return Err(format!("不是有效目录: {}", path));
@@ -78,18 +85,26 @@ pub fn list_files(path: String) -> Result<Vec<String>, String> {
             Err(_) => continue,
         };
         for entry in read.flatten() {
+            // 用 file_type 不跟随符号链接，避免软链成环导致无限递归
+            let ft = match entry.file_type() {
+                Ok(t) => t,
+                Err(_) => continue,
+            };
+            if ft.is_symlink() {
+                continue;
+            }
             let name = entry.file_name().to_string_lossy().to_string();
             if name == ".DS_Store" {
                 continue;
             }
             let p = entry.path();
-            if p.is_dir() {
+            if ft.is_dir() {
                 // 跳过隐藏目录与常见重目录
                 if name.starts_with('.') || ignore.contains(&name.as_str()) {
                     continue;
                 }
                 stack.push(p);
-            } else {
+            } else if ft.is_file() {
                 files.push(p.to_string_lossy().to_string());
                 if files.len() >= MAX_LIST_FILES {
                     break;
@@ -101,6 +116,243 @@ pub fn list_files(path: String) -> Result<Vec<String>, String> {
     Ok(files)
 }
 
+#[derive(Serialize)]
+pub struct SearchMatch {
+    path: String,
+    line: u32,
+    text: String,
+}
+
+const MAX_SEARCH_MATCHES: usize = 1000;
+const MAX_SEARCH_FILE_SIZE: u64 = 2 * 1024 * 1024;
+// 最多扫描的文件数，避免在超大目录中卡死
+const MAX_SEARCH_FILES_SCANNED: usize = 50000;
+
+/// 在文件夹内全局搜索文本（大小写不敏感的子串）。
+/// 重 I/O 放到阻塞线程池，避免阻塞主线程导致应用无响应。
+#[tauri::command]
+pub async fn search_in_files(root: String, query: String) -> Result<Vec<SearchMatch>, String> {
+    tokio::task::spawn_blocking(move || run_search(root, query))
+        .await
+        .map_err(|e| format!("搜索任务失败: {}", e))?
+}
+
+fn run_search(root: String, query: String) -> Result<Vec<SearchMatch>, String> {
+    let q = query.trim().to_lowercase();
+    if q.is_empty() {
+        return Ok(vec![]);
+    }
+    let root_path = Path::new(&root);
+    if !root_path.is_dir() {
+        return Err(format!("不是有效目录: {}", root));
+    }
+
+    let ignore = ["node_modules", "target", "dist", "build", ".next", ".cache"];
+    let mut matches: Vec<SearchMatch> = Vec::new();
+    let mut scanned: usize = 0;
+    let mut stack = vec![root_path.to_path_buf()];
+
+    'outer: while let Some(dir) = stack.pop() {
+        let read = match fs::read_dir(&dir) {
+            Ok(r) => r,
+            Err(_) => continue,
+        };
+        for entry in read.flatten() {
+            if matches.len() >= MAX_SEARCH_MATCHES || scanned >= MAX_SEARCH_FILES_SCANNED {
+                break 'outer;
+            }
+            // 用 file_type 不跟随符号链接，避免软链成环导致无限递归
+            let ft = match entry.file_type() {
+                Ok(t) => t,
+                Err(_) => continue,
+            };
+            if ft.is_symlink() {
+                continue;
+            }
+
+            let name = entry.file_name().to_string_lossy().to_string();
+            if name == ".DS_Store" {
+                continue;
+            }
+            let p = entry.path();
+
+            if ft.is_dir() {
+                if name.starts_with('.') || ignore.contains(&name.as_str()) {
+                    continue;
+                }
+                stack.push(p);
+                continue;
+            }
+            if !ft.is_file() {
+                continue;
+            }
+
+            scanned += 1;
+            // 跳过过大文件
+            if let Ok(meta) = entry.metadata() {
+                if meta.len() > MAX_SEARCH_FILE_SIZE {
+                    continue;
+                }
+            }
+            // 二进制/非 UTF-8 读取会失败，自动跳过
+            let content = match fs::read_to_string(&p) {
+                Ok(c) => c,
+                Err(_) => continue,
+            };
+            let path_str = p.to_string_lossy().to_string();
+            for (i, line) in content.lines().enumerate() {
+                if line.to_lowercase().contains(&q) {
+                    matches.push(SearchMatch {
+                        path: path_str.clone(),
+                        line: (i + 1) as u32,
+                        text: line.chars().take(200).collect(),
+                    });
+                    if matches.len() >= MAX_SEARCH_MATCHES {
+                        break 'outer;
+                    }
+                }
+            }
+        }
+    }
+
+    Ok(matches)
+}
+
+#[derive(Serialize)]
+pub struct ReplaceSummary {
+    files_changed: usize,
+    replacements: usize,
+}
+
+/// 在文件夹内全局替换文本（ASCII 大小写不敏感的字面量替换，与搜索语义一致）。
+/// 重 I/O 放到阻塞线程池。
+#[tauri::command]
+pub async fn replace_in_files(
+    root: String,
+    query: String,
+    replacement: String,
+) -> Result<ReplaceSummary, String> {
+    tokio::task::spawn_blocking(move || run_replace(root, query, replacement))
+        .await
+        .map_err(|e| format!("替换任务失败: {}", e))?
+}
+
+// 根据首字节推断 UTF-8 字符字节数
+fn utf8_char_len(b: u8) -> usize {
+    if b < 0x80 {
+        1
+    } else if b >> 5 == 0b110 {
+        2
+    } else if b >> 4 == 0b1110 {
+        3
+    } else if b >> 3 == 0b11110 {
+        4
+    } else {
+        1
+    }
+}
+
+/// ASCII 大小写不敏感的字面量替换，保持非 ASCII 字节按精确匹配，返回新文本与替换次数。
+fn replace_ascii_ci(text: &str, needle: &str, replacement: &str) -> (String, usize) {
+    let nb = needle.as_bytes();
+    let nlen = nb.len();
+    if nlen == 0 {
+        return (text.to_string(), 0);
+    }
+    let bytes = text.as_bytes();
+    let mut out = String::with_capacity(text.len());
+    let mut count = 0usize;
+    let mut i = 0usize;
+    while i < bytes.len() {
+        if i + nlen <= bytes.len() && bytes[i..i + nlen].eq_ignore_ascii_case(nb) {
+            out.push_str(replacement);
+            count += 1;
+            i += nlen;
+        } else {
+            let end = (i + utf8_char_len(bytes[i])).min(bytes.len());
+            out.push_str(&text[i..end]);
+            i = end;
+        }
+    }
+    (out, count)
+}
+
+fn run_replace(root: String, query: String, replacement: String) -> Result<ReplaceSummary, String> {
+    if query.is_empty() {
+        return Ok(ReplaceSummary {
+            files_changed: 0,
+            replacements: 0,
+        });
+    }
+    let root_path = Path::new(&root);
+    if !root_path.is_dir() {
+        return Err(format!("不是有效目录: {}", root));
+    }
+
+    let ignore = ["node_modules", "target", "dist", "build", ".next", ".cache"];
+    let mut files_changed = 0usize;
+    let mut replacements = 0usize;
+    let mut scanned: usize = 0;
+    let mut stack = vec![root_path.to_path_buf()];
+
+    while let Some(dir) = stack.pop() {
+        let read = match fs::read_dir(&dir) {
+            Ok(r) => r,
+            Err(_) => continue,
+        };
+        for entry in read.flatten() {
+            if scanned >= MAX_SEARCH_FILES_SCANNED {
+                break;
+            }
+            let ft = match entry.file_type() {
+                Ok(t) => t,
+                Err(_) => continue,
+            };
+            if ft.is_symlink() {
+                continue;
+            }
+
+            let name = entry.file_name().to_string_lossy().to_string();
+            if name == ".DS_Store" {
+                continue;
+            }
+            let p = entry.path();
+
+            if ft.is_dir() {
+                if name.starts_with('.') || ignore.contains(&name.as_str()) {
+                    continue;
+                }
+                stack.push(p);
+                continue;
+            }
+            if !ft.is_file() {
+                continue;
+            }
+
+            scanned += 1;
+            if let Ok(meta) = entry.metadata() {
+                if meta.len() > MAX_SEARCH_FILE_SIZE {
+                    continue;
+                }
+            }
+            let content = match fs::read_to_string(&p) {
+                Ok(c) => c,
+                Err(_) => continue,
+            };
+            let (new_content, n) = replace_ascii_ci(&content, &query, &replacement);
+            if n > 0 && fs::write(&p, new_content).is_ok() {
+                files_changed += 1;
+                replacements += n;
+            }
+        }
+    }
+
+    Ok(ReplaceSummary {
+        files_changed,
+        replacements,
+    })
+}
+
 /// 读取文本文件内容（绕开 fs 插件 scope 限制）。
 /// max_size_mb 为打开大小上限(MB)，不传则用默认 5MB。
 #[tauri::command]
@@ -188,6 +440,245 @@ pub fn watch_directory(path: String, app: AppHandle) -> Result<(), String> {
     Ok(())
 }
 
+/// git diff 内容的最大长度（避免给 AI 的 prompt 过大）
+const MAX_DIFF_LEN: usize = 20000;
+
+/// 获取目录下的 git 改动 diff（相对 HEAD），用于 AI 生成提交信息。
+#[tauri::command]
+pub async fn git_diff(root: String) -> Result<String, String> {
+    tokio::task::spawn_blocking(move || {
+        let output = std::process::Command::new("git")
+            .args(["-C", &root, "diff", "HEAD"])
+            .output()
+            .map_err(|e| format!("执行 git 失败: {}", e))?;
+        if !output.status.success() {
+            let err = String::from_utf8_lossy(&output.stderr);
+            return Err(format!(
+                "git diff 失败（是否为 git 仓库？）：{}",
+                err.trim()
+            ));
+        }
+        let mut diff = String::from_utf8_lossy(&output.stdout).to_string();
+        if diff.len() > MAX_DIFF_LEN {
+            diff.truncate(MAX_DIFF_LEN);
+            diff.push_str("\n…(diff 过长已截断)");
+        }
+        Ok(diff)
+    })
+    .await
+    .map_err(|e| format!("git 任务失败: {}", e))?
+}
+
+// ===== Git 源代码管理 =====
+
+/// 同步执行 git 子命令，返回标准输出；失败时返回 stderr。
+fn run_git(root: &str, args: &[&str]) -> Result<String, String> {
+    let mut full: Vec<&str> = vec!["-C", root];
+    full.extend_from_slice(args);
+    let output = std::process::Command::new("git")
+        .args(&full)
+        .output()
+        .map_err(|e| format!("执行 git 失败: {}", e))?;
+    if !output.status.success() {
+        let err = String::from_utf8_lossy(&output.stderr);
+        return Err(err.trim().to_string());
+    }
+    Ok(String::from_utf8_lossy(&output.stdout).to_string())
+}
+
+#[derive(Serialize)]
+pub struct GitFileStatus {
+    /// 相对仓库根的路径
+    path: String,
+    /// 暂存区状态字符（X）
+    index: String,
+    /// 工作区状态字符（Y）
+    worktree: String,
+}
+
+#[derive(Serialize)]
+pub struct GitStatus {
+    is_repo: bool,
+    branch: String,
+    ahead: u32,
+    behind: u32,
+    files: Vec<GitFileStatus>,
+}
+
+/// 获取 git 状态（分支、领先/落后、各文件暂存/工作区状态）。
+#[tauri::command]
+pub async fn git_status(root: String) -> Result<GitStatus, String> {
+    tokio::task::spawn_blocking(move || {
+        // 先确认是否在 git 仓库中
+        if run_git(&root, &["rev-parse", "--is-inside-work-tree"]).is_err() {
+            return Ok(GitStatus {
+                is_repo: false,
+                branch: String::new(),
+                ahead: 0,
+                behind: 0,
+                files: vec![],
+            });
+        }
+
+        let out = run_git(&root, &["status", "--porcelain", "--branch"])?;
+        let mut branch = String::new();
+        let mut ahead = 0u32;
+        let mut behind = 0u32;
+        let mut files = Vec::new();
+
+        for line in out.lines() {
+            if let Some(rest) = line.strip_prefix("## ") {
+                // 形如：main...origin/main [ahead 1, behind 2]
+                let name_part = rest.split("...").next().unwrap_or(rest);
+                branch = name_part.trim().to_string();
+                if let Some(start) = rest.find('[') {
+                    let bracket = &rest[start + 1..rest.find(']').unwrap_or(rest.len())];
+                    for seg in bracket.split(',') {
+                        let seg = seg.trim();
+                        if let Some(n) = seg.strip_prefix("ahead ") {
+                            ahead = n.trim().parse().unwrap_or(0);
+                        } else if let Some(n) = seg.strip_prefix("behind ") {
+                            behind = n.trim().parse().unwrap_or(0);
+                        }
+                    }
+                }
+                continue;
+            }
+            if line.len() < 3 {
+                continue;
+            }
+            let index = &line[0..1];
+            let worktree = &line[1..2];
+            let mut path = line[3..].to_string();
+            // 重命名形如 "old -> new"，取新路径
+            if let Some(pos) = path.find(" -> ") {
+                path = path[pos + 4..].to_string();
+            }
+            // 去除可能的引号包裹
+            let path = path.trim_matches('"').to_string();
+            files.push(GitFileStatus {
+                path,
+                index: index.to_string(),
+                worktree: worktree.to_string(),
+            });
+        }
+
+        Ok(GitStatus {
+            is_repo: true,
+            branch,
+            ahead,
+            behind,
+            files,
+        })
+    })
+    .await
+    .map_err(|e| format!("git 任务失败: {}", e))?
+}
+
+/// 暂存指定文件（相对路径或绝对路径均可）。
+#[tauri::command]
+pub async fn git_stage(root: String, paths: Vec<String>) -> Result<(), String> {
+    tokio::task::spawn_blocking(move || {
+        let mut args = vec!["add", "--"];
+        let refs: Vec<&str> = paths.iter().map(|s| s.as_str()).collect();
+        args.extend_from_slice(&refs);
+        run_git(&root, &args).map(|_| ())
+    })
+    .await
+    .map_err(|e| format!("git 任务失败: {}", e))?
+}
+
+/// 取消暂存指定文件。
+#[tauri::command]
+pub async fn git_unstage(root: String, paths: Vec<String>) -> Result<(), String> {
+    tokio::task::spawn_blocking(move || {
+        let mut args = vec!["reset", "-q", "HEAD", "--"];
+        let refs: Vec<&str> = paths.iter().map(|s| s.as_str()).collect();
+        args.extend_from_slice(&refs);
+        run_git(&root, &args).map(|_| ())
+    })
+    .await
+    .map_err(|e| format!("git 任务失败: {}", e))?
+}
+
+/// 提交已暂存的改动。
+#[tauri::command]
+pub async fn git_commit(root: String, message: String) -> Result<String, String> {
+    tokio::task::spawn_blocking(move || run_git(&root, &["commit", "-m", &message]))
+        .await
+        .map_err(|e| format!("git 任务失败: {}", e))?
+}
+
+/// 推送当前分支。
+#[tauri::command]
+pub async fn git_push(root: String) -> Result<String, String> {
+    tokio::task::spawn_blocking(move || run_git(&root, &["push"]))
+        .await
+        .map_err(|e| format!("git 任务失败: {}", e))?
+}
+
+#[derive(Serialize)]
+pub struct GitBranches {
+    current: String,
+    branches: Vec<String>,
+}
+
+/// 列出本地分支与当前分支。
+#[tauri::command]
+pub async fn git_branches(root: String) -> Result<GitBranches, String> {
+    tokio::task::spawn_blocking(move || {
+        let current = run_git(&root, &["rev-parse", "--abbrev-ref", "HEAD"])?
+            .trim()
+            .to_string();
+        let out = run_git(&root, &["branch", "--format=%(refname:short)"])?;
+        let branches = out
+            .lines()
+            .map(|l| l.trim().to_string())
+            .filter(|l| !l.is_empty())
+            .collect();
+        Ok(GitBranches { current, branches })
+    })
+    .await
+    .map_err(|e| format!("git 任务失败: {}", e))?
+}
+
+/// 切换分支。
+#[tauri::command]
+pub async fn git_checkout(root: String, branch: String) -> Result<String, String> {
+    tokio::task::spawn_blocking(move || run_git(&root, &["checkout", &branch]))
+        .await
+        .map_err(|e| format!("git 任务失败: {}", e))?
+}
+
+#[derive(Serialize)]
+pub struct GitHeadFile {
+    /// 该文件是否存在于 HEAD（不存在则为新增/未跟踪文件）
+    exists: bool,
+    content: String,
+}
+
+/// 获取某文件在 HEAD 中的内容（用于编辑器行内差异标记）。
+/// rel_path 为相对仓库根的路径。
+#[tauri::command]
+pub async fn git_file_head(root: String, rel_path: String) -> Result<GitHeadFile, String> {
+    tokio::task::spawn_blocking(move || {
+        let spec = format!("HEAD:{}", rel_path);
+        match run_git(&root, &["show", &spec]) {
+            Ok(content) => GitHeadFile {
+                exists: true,
+                content,
+            },
+            // 文件不在 HEAD 中（新增/未跟踪）：返回不存在
+            Err(_) => GitHeadFile {
+                exists: false,
+                content: String::new(),
+            },
+        }
+    })
+    .await
+    .map_err(|e| format!("git 任务失败: {}", e))
+}
+
 /// 在系统文件管理器中显示该路径
 #[tauri::command]
 pub fn reveal_path(path: String) -> Result<(), String> {
@@ -318,13 +809,18 @@ fn with_index<T>(path: &str, f: impl FnOnce(&FileIndex) -> T) -> Result<T, Strin
 }
 
 /// 获取文本文件元信息：大小、总行数、是否为文本（用于决定可编辑打开还是只读查看）。
+/// 首次会全量扫描建索引，放到阻塞线程池，避免阻塞主线程。
 #[tauri::command]
-pub fn get_text_file_meta(path: String) -> Result<TextFileMeta, String> {
-    with_index(&path, |idx| TextFileMeta {
-        size_bytes: idx.size,
-        line_count: idx.line_count,
-        is_text: idx.is_text,
+pub async fn get_text_file_meta(path: String) -> Result<TextFileMeta, String> {
+    tokio::task::spawn_blocking(move || {
+        with_index(&path, |idx| TextFileMeta {
+            size_bytes: idx.size,
+            line_count: idx.line_count,
+            is_text: idx.is_text,
+        })
     })
+    .await
+    .map_err(|e| format!("读取文件信息任务失败: {}", e))?
 }
 
 /// 按行范围读取文件（只读查看器虚拟滚动用）。借助行偏移索引随机定位，做到 O(窗口)。
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index a8d43dd..e4c9576 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -47,9 +47,10 @@ use crate::execution::{
     stop_execution,
 };
 use crate::filesystem::{
-    create_directory, create_file, delete_path, get_text_file_meta, list_files,
-    read_directory_tree, read_file_lines, read_file_text, rename_path, reveal_path,
-    watch_directory, write_file_text,
+    create_directory, create_file, delete_path, get_text_file_meta, git_branches, git_checkout,
+    git_commit, git_diff, git_file_head, git_push, git_stage, git_status, git_unstage, list_files,
+    read_directory_tree, read_file_lines, read_file_text, rename_path, replace_in_files,
+    reveal_path, search_in_files, watch_directory, write_file_text,
 };
 use crate::plugin::{get_info, get_supported_languages};
 use crate::setup::app::get_app_info;
@@ -178,6 +179,17 @@ fn main() {
             reveal_path,
             watch_directory,
             list_files,
+            search_in_files,
+            replace_in_files,
+            git_diff,
+            git_status,
+            git_stage,
+            git_unstage,
+            git_commit,
+            git_push,
+            git_branches,
+            git_checkout,
+            git_file_head,
             // AI 助手
             ai_chat,
             ai_chat_stream,
diff --git a/src-tauri/src/plugins/mod.rs b/src-tauri/src/plugins/mod.rs
index 4853b22..012b091 100644
--- a/src-tauri/src/plugins/mod.rs
+++ b/src-tauri/src/plugins/mod.rs
@@ -31,6 +31,8 @@ pub struct CodeExecutionRequest {
     pub stdin: Option<String>,
     // 追加到运行命令后的参数
     pub args: Option<Vec<String>>,
+    // 运行时的环境变量
+    pub env: Option<std::collections::HashMap<String, String>>,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 23854b3..405ce35 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "CodeForge",
-  "version": "26.0.0",
+  "version": "26.1.0",
   "identifier": "org.devlive.codeforge",
   "build": {
     "beforeDevCommand": "pnpm dev",
@@ -15,8 +15,8 @@
         "title": "CodeForge",
         "minWidth": 1000,
         "minHeight": 600,
-        "width": 1800,
-        "height": 1200,
+        "width": 1280,
+        "height": 800,
         "center": true,
         "devtools": true,
         "dragDropEnabled": false,
diff --git a/src/App.vue b/src/App.vue
index be596d6..d750d3d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen flex flex-col bg-gray-50">
+  <div class="h-screen flex flex-col bg-gray-50 dark:bg-gray-900">
     <AppHeader :is-running="isRunning"
                :env-installed="envInfo.installed"
                :supported-languages="supportedLanguages"
@@ -12,7 +12,7 @@
                @language-change="onLanguageChange"
                @layout-change="handleLayoutChange"
                @open-file="handleOpenFileClick"
-               @save-file="saveFile"
+               @save-file="handleSave"
                @show-history="showHistory = true"
                @show-ai="handleShowAi"
                @show-settings="showSettings = true"
@@ -20,21 +20,31 @@
     </AppHeader>
 
     <!-- 运行输入：参数 + stdin（任何布局/运行前都可填）-->
-    <div class="bg-gray-50 border-b border-gray-200 flex-shrink-0">
-      <button class="w-full flex items-center px-4 py-1 text-xs text-gray-500 hover:bg-gray-100 cursor-pointer" @click="showRunInput = !showRunInput">
+    <div class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+      <button class="w-full flex items-center px-4 py-1 text-xs text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="showRunInput = !showRunInput">
         <ChevronRight class="w-3 h-3 mr-1 transition-transform" :class="{ 'rotate-90': showRunInput }"/>
-        运行输入（参数 / stdin）
-        <span v-if="!showRunInput && (runArgs || runStdin)" class="ml-2 text-blue-500">●</span>
+        运行输入（参数 / stdin / 环境变量）
+        <span v-if="!showRunInput && (runArgs || runStdin || runEnv)" class="ml-2 text-blue-500">●</span>
       </button>
-      <div v-if="showRunInput" class="px-4 pb-2 flex items-start space-x-3">
-        <div class="flex flex-col w-56 flex-shrink-0">
-          <label class="text-[11px] text-gray-400 mb-0.5">运行参数</label>
-          <input v-model="runArgs" class="text-xs border border-gray-300 rounded px-2 py-1 focus:outline-none focus:border-blue-400" placeholder="空格分隔，如 --port 8080"/>
+      <div v-if="showRunInput" class="px-4 pb-2 space-y-2">
+        <div class="flex items-start space-x-3">
+          <div class="flex flex-col w-56 flex-shrink-0">
+            <label class="text-[11px] text-gray-400 mb-0.5">运行参数</label>
+            <input v-model="runArgs" class="text-xs border border-gray-300 rounded px-2 py-1 focus:outline-none focus:border-blue-400" placeholder="空格分隔，如 --port 8080"/>
+          </div>
+          <div class="flex flex-col flex-1 min-w-0">
+            <label class="text-[11px] text-gray-400 mb-0.5">标准输入 (stdin)</label>
+            <textarea v-model="runStdin" rows="2" class="w-full text-xs border border-gray-300 rounded px-2 py-1 font-mono resize-none focus:outline-none focus:border-blue-400" placeholder="运行时喂给程序的输入"></textarea>
+          </div>
         </div>
-        <div class="flex flex-col flex-1 min-w-0">
-          <label class="text-[11px] text-gray-400 mb-0.5">标准输入 (stdin)</label>
-          <textarea v-model="runStdin" rows="2" class="w-full text-xs border border-gray-300 rounded px-2 py-1 font-mono resize-none focus:outline-none focus:border-blue-400" placeholder="运行时喂给程序的输入"></textarea>
+        <div class="flex flex-col">
+          <label class="text-[11px] text-gray-400 mb-0.5">环境变量</label>
+          <input v-model="runEnv" class="text-xs border border-gray-300 rounded px-2 py-1 font-mono focus:outline-none focus:border-blue-400" placeholder="KEY=值，多个用 ; 分隔，如 DEBUG=1;PORT=8080"/>
         </div>
+        <label class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none">
+          <input v-model="watchMode" type="checkbox" class="cursor-pointer"/>
+          监听模式：保存后自动运行
+        </label>
       </div>
     </div>
 
@@ -44,6 +54,7 @@
         <Sidebar :root-dir="rootDir"
                  :active-path="currentFilePath"
                  :recent-folders="recentFolders"
+                 :git-status="gitStatus"
                  class="flex-shrink-0"
                  :style="{ width: `${sidebarWidth}px` }"
                  @open-folder="openFolder"
@@ -52,7 +63,7 @@
                  @renamed="(from, to) => updateTabPath(from, to)"
                  @deleted="(p) => detachTabPath(p)"/>
         <!-- 拖拽改变侧栏宽度 -->
-        <div class="w-1 bg-gray-200 hover:bg-blue-500 cursor-col-resize transition-colors flex-shrink-0"
+        <div class="w-1 bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 cursor-col-resize transition-colors flex-shrink-0"
              @mousedown="startSidebarResize"></div>
       </template>
 
@@ -64,10 +75,10 @@
             <div class="h-full flex flex-col overflow-hidden">
               <EditorTabs :tabs="editorTabs" :active-id="activeTabId" @switch="switchTab" @close="handleCloseTab" @new="handleNewTab"
                           @close-others="closeOthers" @close-right="closeToRight" @move="moveTab" @copy-path="handleCopyPath"/>
-              <div v-if="!showViewer" class="bg-gray-100 px-4 py-2 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
+              <div v-if="!showViewer" class="bg-gray-100 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between flex-shrink-0">
                 <div class="flex items-center space-x-3">
                   <img :src="`/icons/${currentLanguage.replace(/\d+$/, '')}.svg`" class="w-5 h-5" :alt="currentLanguage"/>
-                  <h2 class="text-sm font-medium text-gray-700">{{ getLanguageDisplayName(currentLanguage) }} 代码编辑器</h2>
+                  <h2 class="text-sm font-medium text-gray-700 dark:text-gray-200">{{ getLanguageDisplayName(currentLanguage) }} 代码编辑器</h2>
                   <span v-if="currentFileName" class="text-xs text-gray-500 flex items-center">
                     · {{ currentFileName }}
                     <span v-if="isDirty" class="ml-1 text-amber-500" title="有未保存的修改">●</span>
@@ -86,7 +97,7 @@
                                  :line-count="viewerFile.lineCount"
                                  :size-bytes="viewerFile.sizeBytes"
                                  @close="closeViewer"/>
-                <InlineGenerate v-if="showGenerate" :language="currentLanguage" @insert="insertGeneratedCode" @close="showGenerate = false"/>
+                <InlineGenerate v-if="showGenerate" :language="currentLanguage" :selection="generateSelection" @insert="insertGeneratedCode" @close="showGenerate = false"/>
               </div>
             </div>
           </template>
@@ -95,9 +106,9 @@
             <!-- 输出 -->
             <div class="h-full flex flex-col" :class="effectiveDirection === 'vertical' ? 'border-t border-gray-200' : 'border-l border-gray-200'">
               <!-- 仅编辑器模式下提供收起控制台的入口 -->
-              <div v-if="layoutMode === 'editor'" class="bg-gray-100 px-4 py-2 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
-                <h2 class="text-sm font-medium text-gray-700">控制台</h2>
-                <button class="text-gray-400 hover:text-gray-600 transition-colors" title="收起控制台" @click="showConsole = false">
+              <div v-if="layoutMode === 'editor'" class="bg-gray-100 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between flex-shrink-0">
+                <h2 class="text-sm font-medium text-gray-700 dark:text-gray-200">控制台</h2>
+                <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors" title="收起控制台" @click="showConsole = false">
                   <X class="w-4 h-4"/>
                 </button>
               </div>
@@ -128,10 +139,10 @@
       <div v-else class="h-full flex flex-col overflow-hidden">
         <EditorTabs :tabs="editorTabs" :active-id="activeTabId" @switch="switchTab" @close="handleCloseTab" @new="handleNewTab"
                           @close-others="closeOthers" @close-right="closeToRight" @move="moveTab" @copy-path="handleCopyPath"/>
-        <div v-if="!showViewer" class="bg-gray-100 px-4 py-2 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
+        <div v-if="!showViewer" class="bg-gray-100 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between flex-shrink-0">
           <div class="flex items-center space-x-3">
             <img :src="`/icons/${currentLanguage.replace(/\d+$/, '')}.svg`" class="w-5 h-5" :alt="currentLanguage"/>
-            <h2 class="text-sm font-medium text-gray-700">{{ getLanguageDisplayName(currentLanguage) }} 代码编辑器</h2>
+            <h2 class="text-sm font-medium text-gray-700 dark:text-gray-200">{{ getLanguageDisplayName(currentLanguage) }} 代码编辑器</h2>
             <span v-if="currentFileName" class="text-xs text-gray-500 flex items-center">
               · {{ currentFileName }}
               <span v-if="isDirty" class="ml-1 text-amber-500" title="有未保存的修改">●</span>
@@ -150,7 +161,7 @@
                            :line-count="viewerFile.lineCount"
                            :size-bytes="viewerFile.sizeBytes"
                            @close="closeViewer"/>
-          <InlineGenerate v-if="showGenerate" :language="currentLanguage" @insert="insertGeneratedCode" @close="showGenerate = false"/>
+          <InlineGenerate v-if="showGenerate" :language="currentLanguage" :selection="generateSelection" @insert="insertGeneratedCode" @close="showGenerate = false"/>
         </div>
       </div>
       </div>
@@ -172,6 +183,7 @@
     <ExecutionHistory v-model:show="showHistory"
                       :supported-languages="supportedLanguages"
                       @restore="restoreHistoryItem"
+                      @rerun="rerunHistoryItem"
                       @open-ai="openAiForExecution"/>
 
     <!-- 运行未保存文件询问 -->
@@ -189,7 +201,10 @@
     </Modal>
 
     <!-- AI 助手 -->
-    <AiAssistant v-if="showAi" :code="code" :language="currentLanguage" :execution-id="aiExecutionId" :error-context="aiErrorContext" @close="showAi = false" @insert-code="applyAiCode"/>
+    <AiAssistant v-if="showAi" :code="code" :language="currentLanguage" :execution-id="aiExecutionId" :error-context="aiErrorContext" :initial-prompt="aiInitialPrompt" :root-dir="rootDir" @close="showAi = false" @insert-code="applyAiCode"/>
+
+    <!-- 文件夹内全局搜索 -->
+    <SearchPanel v-if="showSearch && rootDir" :root-dir="rootDir" @open="openSearchResult" @replaced="reloadAffectedFiles" @close="showSearch = false"/>
 
     <!-- 快速打开文件 -->
     <QuickOpen v-if="showQuickOpen && rootDir"
@@ -197,14 +212,54 @@
                @select="smartOpen"
                @close="showQuickOpen = false"/>
 
+    <!-- 命令面板 -->
+    <CommandPalette v-if="showCommandPalette"
+                    :commands="paletteCommands"
+                    @close="showCommandPalette = false"/>
+
+    <!-- 跳转到行 -->
+    <GoToLine v-if="showGoToLine"
+              :max-line="(code || '').split('\n').length"
+              @go="gotoLine"
+              @close="showGoToLine = false"/>
+
+    <!-- 符号大纲 -->
+    <Outline v-if="showOutline"
+             :code="code"
+             :language="currentLanguage"
+             @go="gotoLine"
+             @close="showOutline = false"/>
+
+    <!-- 差异对比：当前 vs 已保存 -->
+    <DiffView v-if="showDiff"
+              :original="savedContent || ''"
+              :modified="code"
+              :file-name="currentFileName"
+              @close="showDiff = false"/>
+
+    <!-- 实时预览（Markdown / HTML）-->
+    <PreviewPanel v-if="showPreview"
+                  :content="code"
+                  :language="currentLanguage"
+                  :file-name="currentFileName"
+                  @close="showPreview = false"/>
+
+    <!-- Git 源代码管理 -->
+    <GitPanel v-if="showGit && rootDir"
+              :root-dir="rootDir"
+              @open="smartOpen"
+              @refresh="refreshGitStatus"
+              @close="showGit = false"/>
+
     <!-- Toast 组件 -->
     <Toast/>
   </div>
 </template>
 
 <script setup lang="ts">
-import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
-import {ChevronRight, X} from 'lucide-vue-next'
+import {computed, nextTick, onMounted, onUnmounted, ref, watch} from 'vue'
+import {debounce} from 'lodash-es'
+import {ChevronRight, CornerDownRight, Eye, FolderOpen, GitBranch, GitCompare, History, ListTree, Maximize2, Monitor, Moon, PanelBottom, PanelLeft, PanelRight, Play, Plus, Save, Search, Settings as SettingsIcon, Sparkles, Sun, X} from 'lucide-vue-next'
 import {ExecutionResult, LayoutMode, SplitDirection} from './types/app.ts'
 import AppHeader from './components/AppHeader.vue'
 import CodeEditor from './components/CodeEditor.vue'
@@ -227,8 +282,17 @@ import EditorTabs from './components/EditorTabs.vue'
 import Sidebar from './components/Sidebar.vue'
 import LargeFileViewer from './components/LargeFileViewer.vue'
 import QuickOpen from './components/QuickOpen.vue'
+import CommandPalette, {type PaletteCommand} from './components/CommandPalette.vue'
+import DiffView from './components/DiffView.vue'
+import PreviewPanel from './components/PreviewPanel.vue'
+import GitPanel from './components/GitPanel.vue'
+import GoToLine from './components/GoToLine.vue'
+import Outline from './components/Outline.vue'
+import {computeDiffMarkers, setDiffMarkers} from './editor/diffGutter'
 import AiAssistant from './components/AiAssistant.vue'
 import InlineGenerate from './components/InlineGenerate.vue'
+import SearchPanel from './components/SearchPanel.vue'
+import {useTheme, type AppTheme} from './composables/useTheme'
 import Modal from './ui/Modal.vue'
 import Button from './ui/Button.vue'
 import ExecutionHistory from './components/ExecutionHistory.vue'
@@ -528,6 +592,8 @@ const showAi = ref(false)
 const aiExecutionId = ref<number | null>(null)
 // 失败运行的报错上下文，供"分析报错"快捷动作
 const aiErrorContext = ref<{ code: string, error: string } | null>(null)
+// 打开 AI 时的初始提示（解释/生成测试等一次性动作）
+const aiInitialPrompt = ref<string | null>(null)
 
 const combinedOutput = (item: ExecutionResult) =>
     [item.stdout?.trim(), item.stderr?.trim()].filter(Boolean).join('\n\n')
@@ -538,9 +604,48 @@ const handleShowAi = () => {
   aiErrorContext.value = currentExecutionId.value != null && !isSuccess.value && output.value
       ? {code: code.value, error: output.value}
       : null
+  aiInitialPrompt.value = null
+  showAi.value = true
+}
+
+// 取选中文本，无选中则用整篇代码
+const selectedOrAll = (): string => {
+  const view = editorView.value
+  if (view) {
+    const {from, to} = view.state.selection.main
+    if (from !== to) {
+      return view.state.sliceDoc(from, to)
+    }
+  }
+  return code.value
+}
+
+// 以一次性提示打开 AI（临时会话，不关联执行）
+const openAiWithPrompt = (prompt: string) => {
+  aiExecutionId.value = null
+  aiErrorContext.value = null
+  aiInitialPrompt.value = prompt
   showAi.value = true
 }
 
+const explainCode = () => {
+  const snippet = selectedOrAll()
+  if (!snippet.trim()) {
+    toast.info('没有可解释的代码')
+    return
+  }
+  openAiWithPrompt(`请解释下面这段 ${currentLanguage.value} 代码的作用与关键逻辑，用中文简洁说明：\n\n\`\`\`${currentLanguage.value}\n${snippet}\n\`\`\``)
+}
+
+const generateTests = () => {
+  const snippet = selectedOrAll()
+  if (!snippet.trim()) {
+    toast.info('没有可生成测试的代码')
+    return
+  }
+  openAiWithPrompt(`请为下面这段 ${currentLanguage.value} 代码生成单元测试，覆盖主要分支与边界情况，使用该语言常用的测试框架，只输出测试代码：\n\n\`\`\`${currentLanguage.value}\n${snippet}\n\`\`\``)
+}
+
 const openAiForExecution = (item: ExecutionResult) => {
   aiExecutionId.value = item.id ?? null
   aiErrorContext.value = item.success
@@ -557,9 +662,14 @@ const applyAiCode = (codeText: string) => {
 // 当前 CodeMirror view（用于在光标处插入生成的代码）
 const editorView = ref<any>(null)
 
-// AI 自然语言生成
+// AI 自然语言生成 / 选区改写
 const showGenerate = ref(false)
+const generateSelection = ref('')
 const openGenerate = () => {
+  const view = editorView.value
+  generateSelection.value = view
+      ? view.state.sliceDoc(view.state.selection.main.from, view.state.selection.main.to)
+      : ''
   showGenerate.value = true
 }
 
@@ -579,6 +689,78 @@ const insertGeneratedCode = (text: string) => {
   }
 }
 
+// 文件夹内全局搜索（Cmd+Shift+F）
+const showSearch = ref(false)
+const openSearch = () => {
+  if (!rootDir.value) {
+    toast.info('请先打开文件夹')
+    return
+  }
+  showSearch.value = true
+}
+
+const gotoLine = (line: number) => {
+  const view = editorView.value
+  if (!view) {
+    return
+  }
+  const target = Math.max(1, Math.min(line, view.state.doc.lines))
+  const l = view.state.doc.line(target)
+  view.dispatch({selection: {anchor: l.from}, scrollIntoView: true})
+  view.focus()
+}
+
+// 跳转到行（Cmd+G）
+const showGoToLine = ref(false)
+const openGoToLine = () => {
+  showGoToLine.value = true
+}
+
+// 符号大纲（Cmd+Shift+O）
+const showOutline = ref(false)
+const openOutline = () => {
+  showOutline.value = true
+}
+
+const openSearchResult = async (path: string, line: number) => {
+  showSearch.value = false
+  await smartOpen(path)
+  await nextTick()
+  gotoLine(line)
+}
+
+// 全局替换后：刷新涉及到的已打开标签（保留有未保存修改的标签）
+const reloadAffectedFiles = async (paths: string[]) => {
+  const set = new Set(paths)
+  for (const tab of editorTabs.value) {
+    if (!tab.filePath || !set.has(tab.filePath)) {
+      continue
+    }
+    // 有未保存修改则不覆盖，避免丢失用户编辑
+    const dirty = tab.savedContent !== null && tab.code !== tab.savedContent
+    if (dirty) {
+      continue
+    }
+    try {
+      const content = await invoke<string>('read_file_text', {
+        path: tab.filePath,
+        maxSizeMb: editorConfig.value?.max_open_file_size
+      })
+      if (tab.id === activeTabId.value) {
+        code.value = content
+        savedContent.value = content
+      }
+      else {
+        tab.code = content
+        tab.savedContent = content
+      }
+    }
+    catch {
+      // 跳过无法读取的文件
+    }
+  }
+}
+
 // 快速打开（Cmd+P）
 const showQuickOpen = ref(false)
 const openQuickOpen = () => {
@@ -589,6 +771,111 @@ const openQuickOpen = () => {
   showQuickOpen.value = true
 }
 
+// 命令面板（Cmd+Shift+P）
+const showCommandPalette = ref(false)
+const openCommandPalette = () => {
+  showCommandPalette.value = true
+}
+
+// 差异对比 / 实时预览
+const showDiff = ref(false)
+const showPreview = ref(false)
+const openDiff = () => {
+  if (!currentFilePath.value) {
+    toast.info('差异对比需要先打开已保存的文件')
+    return
+  }
+  showDiff.value = true
+}
+const togglePreview = () => {
+  showPreview.value = !showPreview.value
+}
+
+// ===== Git 源代码管理 =====
+const showGit = ref(false)
+const openGit = () => {
+  if (!rootDir.value) {
+    toast.info('请先打开文件夹')
+    return
+  }
+  showGit.value = true
+}
+
+// 文件树徽标用：绝对路径 → 状态字母（M/A/D/U）
+const gitStatus = ref<Record<string, string>>({})
+const refreshGitStatus = async () => {
+  if (!rootDir.value) {
+    gitStatus.value = {}
+    return
+  }
+  try {
+    const s = await invoke<{ is_repo: boolean, files: { path: string, index: string, worktree: string }[] }>(
+        'git_status', {root: rootDir.value}
+    )
+    const map: Record<string, string> = {}
+    if (s.is_repo) {
+      for (const f of s.files) {
+        const code = f.index === '?'
+            ? 'U'
+            : (f.worktree.trim() || f.index.trim() || 'M')
+        map[`${rootDir.value}/${f.path}`] = code
+      }
+    }
+    gitStatus.value = map
+  }
+  catch {
+    gitStatus.value = {}
+  }
+  // HEAD 可能因提交/切换分支变化，刷新编辑器行内差异基线
+  fetchBaseline()
+}
+
+// ===== 编辑器行内差异标记（vs HEAD）=====
+// 当前文件在 HEAD 中的内容；null 表示无基线（新文件/非 git/未跟踪），不显示标记
+const gitBaseline = ref<string | null>(null)
+
+const fetchBaseline = async () => {
+  if (!rootDir.value || !currentFilePath.value || !currentFilePath.value.startsWith(rootDir.value)) {
+    gitBaseline.value = null
+    applyDiffMarkers()
+    return
+  }
+  const rel = currentFilePath.value.slice(rootDir.value.length + 1)
+  try {
+    const head = await invoke<{ exists: boolean, content: string }>('git_file_head', {
+      root: rootDir.value,
+      relPath: rel
+    })
+    gitBaseline.value = head.exists ? head.content : null
+  }
+  catch {
+    gitBaseline.value = null
+  }
+  applyDiffMarkers()
+}
+
+// 计算并派发标记到编辑器
+const applyDiffMarkers = () => {
+  const view = editorView.value
+  if (!view) {
+    return
+  }
+  const markers = gitBaseline.value === null
+      ? {changed: new Map(), deleted: new Set<number>()}
+      : computeDiffMarkers(gitBaseline.value, code.value)
+  view.dispatch({effects: setDiffMarkers.of(markers)})
+}
+const applyDiffMarkersDebounced = debounce(applyDiffMarkers, 250)
+
+// 切换文件取新基线；编辑时重算；编辑器重挂时重新派发
+watch(currentFilePath, () => fetchBaseline())
+watch(code, () => applyDiffMarkersDebounced())
+watch(editorView, () => applyDiffMarkers())
+
+// 打开文件夹、保存文件后刷新文件树 Git 徽标与差异基线
+watch(rootDir, () => refreshGitStatus(), {immediate: true})
+watch(savedContent, () => refreshGitStatus())
+
 const closeViewer = () => {
   showViewer.value = false
   viewerFile.value = null
@@ -648,23 +935,118 @@ const handleLayoutChange = (mode: LayoutMode) => {
   }
 }
 
-// 运行输入：参数 + stdin
+// 运行输入：参数 + stdin + 环境变量
 const showRunInput = ref(false)
 const runArgs = ref('')
 const runStdin = ref('')
+const runEnv = ref('')
+
+// 监听模式：保存后自动运行
+const watchMode = ref(localStorage.getItem('watch-mode') === 'true')
+watch(watchMode, (v) => localStorage.setItem('watch-mode', String(v)))
+
+// 保存包装：保存后若开启监听模式则自动运行
+const handleSave = async () => {
+  await saveFile()
+  if (watchMode.value && currentFilePath.value && !isDirty.value) {
+    handleRunCode()
+  }
+}
+
+// ===== 按文件记忆运行配置（args/stdin/env）=====
+const RUN_CONFIGS_KEY = 'run-configs'
+type RunConfig = { args: string, stdin: string, env: string }
+const loadRunConfigs = (): Record<string, RunConfig> => {
+  try {
+    return JSON.parse(localStorage.getItem(RUN_CONFIGS_KEY) || '{}')
+  }
+  catch {
+    return {}
+  }
+}
+// 把当前输入写入指定文件的配置（全空则删除该条）
+const saveRunConfig = (path: string) => {
+  const map = loadRunConfigs()
+  if (!runArgs.value && !runStdin.value && !runEnv.value) {
+    delete map[path]
+  }
+  else {
+    map[path] = {args: runArgs.value, stdin: runStdin.value, env: runEnv.value}
+  }
+  localStorage.setItem(RUN_CONFIGS_KEY, JSON.stringify(map))
+}
+// 载入指定文件的配置（无则清空）
+const loadRunConfig = (path: string | null) => {
+  const cfg = path ? loadRunConfigs()[path] : null
+  runArgs.value = cfg?.args || ''
+  runStdin.value = cfg?.stdin || ''
+  runEnv.value = cfg?.env || ''
+}
 
-const buildRunBase = () => ({
-  language: currentLanguage.value,
-  envInstalled: envInfo.value.installed,
-  envLanguage: envInfo.value.language,
-  args: runArgs.value.trim() ? runArgs.value.trim().split(/\s+/) : undefined,
-  stdin: runStdin.value || undefined
+// 切换文件时：保存旧文件输入、载入新文件输入
+watch(currentFilePath, (np, op) => {
+  if (op) {
+    saveRunConfig(op)
+  }
+  loadRunConfig(np)
 })
 
+// 编辑输入时防抖保存到当前文件
+const persistRunConfig = debounce(() => {
+  if (currentFilePath.value) {
+    saveRunConfig(currentFilePath.value)
+  }
+}, 400)
+watch([runArgs, runStdin, runEnv], () => persistRunConfig())
+
+// 解析环境变量文本（KEY=值，按换行或分号分隔）
+const parseEnv = (text: string): Record<string, string> => {
+  const env: Record<string, string> = {}
+  for (const part of text.split(/[\n;]/)) {
+    const seg = part.trim()
+    if (!seg) continue
+    const eq = seg.indexOf('=')
+    if (eq > 0) {
+      env[seg.slice(0, eq).trim()] = seg.slice(eq + 1).trim()
+    }
+  }
+  return env
+}
+
+const buildRunBase = () => {
+  const env = parseEnv(runEnv.value)
+  return {
+    language: currentLanguage.value,
+    envInstalled: envInfo.value.installed,
+    envLanguage: envInfo.value.language,
+    args: runArgs.value.trim() ? runArgs.value.trim().split(/\s+/) : undefined,
+    stdin: runStdin.value || undefined,
+    env: Object.keys(env).length ? env : undefined
+  }
+}
+
 // 运行未保存文件的询问弹窗
 const showRunPrompt = ref(false)
 
 // 包装运行：仅编辑器模式下点击运行时自动展开控制台；关联文件则按策略就地运行
+// 运行选中片段：以选中文本作为临时代码运行（不就地、不关联文件）
+const runSelection = () => {
+  const view = editorView.value
+  if (!view) {
+    return
+  }
+  const {from, to} = view.state.selection.main
+  if (from === to) {
+    toast.info('请先选中要运行的代码')
+    return
+  }
+  const selected = view.state.sliceDoc(from, to)
+  if (layoutMode.value === 'editor') {
+    showConsole.value = true
+  }
+  runCode({...buildRunBase(), codeOverride: selected})
+}
+
 const handleRunCode = async () => {
   if (layoutMode.value === 'editor') {
     showConsole.value = true
@@ -737,6 +1119,16 @@ const restoreHistoryItem = (item: ExecutionResult) => {
   toast.success('已恢复历史代码')
 }
 
+// 从执行历史一键重跑：恢复语言与代码后直接运行
+const rerunHistoryItem = async (item: ExecutionResult) => {
+  applyLanguage(item.language)
+  code.value = item.code || ''
+  resetFile()
+  // 确保环境信息已更新为该语言再运行
+  await refreshEnvInfo()
+  handleRunCode()
+}
+
 // 监听编辑器配置变化
 watch(editorConfig, (newConfig) => {
   if (newConfig) {
@@ -774,16 +1166,22 @@ window.addEventListener('contextmenu', (e) => e.preventDefault(), false)
 const isOverlayOpen = () =>
     showSettings.value || showAbout.value || showUpdate.value
     || showHistory.value || showViewer.value || showRunPrompt.value
-    || showQuickOpen.value || showGenerate.value
+    || showQuickOpen.value || showGenerate.value || showSearch.value
+    || showCommandPalette.value || showDiff.value || showGoToLine.value || showOutline.value
 
 // 全局快捷键（绑定可在设置中自定义）
-const {matchAction: matchShortcut, reload: reloadShortcuts} = useShortcuts()
+const {matchAction: matchShortcut, reload: reloadShortcuts, getBinding, formatCombo} = useShortcuts()
 
 const shortcutDispatch: Record<string, () => void> = {
   run: () => handleRunCode(),
+  runSelection: () => runSelection(),
   quickOpen: () => openQuickOpen(),
+  commandPalette: () => openCommandPalette(),
+  gotoLine: () => openGoToLine(),
+  outline: () => openOutline(),
+  searchInFiles: () => openSearch(),
   generate: () => openGenerate(),
-  save: () => saveFile(),
+  save: () => handleSave(),
   saveAs: () => saveFileAs(),
   open: () => handleOpenFileClick(),
   newTab: () => handleNewTab(),
@@ -791,6 +1189,53 @@ const shortcutDispatch: Record<string, () => void> = {
   toggleSidebar: () => toggleSidebar()
 }
 
+// 切换并持久化外观主题
+const applyTheme = async (t: AppTheme) => {
+  setAppTheme(t)
+  try {
+    const config = await invoke<any>('get_app_config')
+    config.theme = t
+    await invoke('update_app_config', {config})
+  }
+  catch (error) {
+    console.error('保存主题失败:', error)
+  }
+}
+
+// 命令面板命令列表（含快捷键提示）
+const hintOf = (id: string) => formatCombo(getBinding(id))
+const paletteCommands = computed<PaletteCommand[]>(() => [
+  {id: 'run', label: '运行代码', icon: Play, hint: hintOf('run'), run: () => handleRunCode()},
+  {id: 'runSelection', label: '运行选中片段', icon: Play, hint: hintOf('runSelection'), run: () => runSelection()},
+  {id: 'watchMode', label: watchMode.value ? '关闭监听模式（保存自动运行）' : '开启监听模式（保存自动运行）', icon: Eye, run: () => { watchMode.value = !watchMode.value }},
+  {id: 'open', label: '打开文件', icon: FolderOpen, hint: hintOf('open'), run: () => handleOpenFileClick()},
+  {id: 'openFolder', label: '打开文件夹', icon: FolderOpen, run: () => openFolder()},
+  {id: 'save', label: '保存文件', icon: Save, hint: hintOf('save'), run: () => saveFile()},
+  {id: 'saveAs', label: '另存为', icon: Save, hint: hintOf('saveAs'), run: () => saveFileAs()},
+  {id: 'newTab', label: '新建标签', icon: Plus, hint: hintOf('newTab'), run: () => handleNewTab()},
+  {id: 'closeTab', label: '关闭标签', icon: X, hint: hintOf('closeTab'), run: () => handleCloseTab(activeTabId.value)},
+  {id: 'quickOpen', label: '快速打开文件', icon: Search, hint: hintOf('quickOpen'), run: () => openQuickOpen()},
+  {id: 'gotoLine', label: '跳转到行', icon: CornerDownRight, hint: hintOf('gotoLine'), run: () => openGoToLine()},
+  {id: 'outline', label: '符号大纲', icon: ListTree, hint: hintOf('outline'), run: () => openOutline()},
+  {id: 'searchInFiles', label: '在文件夹内搜索', icon: Search, hint: hintOf('searchInFiles'), run: () => openSearch()},
+  {id: 'generate', label: 'AI 生成代码', icon: Sparkles, hint: hintOf('generate'), run: () => openGenerate()},
+  {id: 'showAi', label: 'AI 助手', icon: Sparkles, run: () => handleShowAi()},
+  {id: 'explainCode', label: 'AI 解释代码（选中或全文）', icon: Sparkles, run: () => explainCode()},
+  {id: 'generateTests', label: 'AI 生成测试（选中或全文）', icon: Sparkles, run: () => generateTests()},
+  {id: 'history', label: '执行历史', icon: History, run: () => { showHistory.value = true }},
+  {id: 'diff', label: '差异对比（当前 vs 已保存）', icon: GitCompare, run: () => openDiff()},
+  {id: 'preview', label: '实时预览（Markdown / HTML）', icon: Eye, run: () => togglePreview()},
+  {id: 'git', label: 'Git 源代码管理', icon: GitBranch, run: () => openGit()},
+  {id: 'toggleSidebar', label: '切换侧栏', icon: PanelLeft, hint: hintOf('toggleSidebar'), run: () => toggleSidebar()},
+  {id: 'layoutHorizontal', label: '布局：左右', group: '布局', icon: PanelRight, run: () => handleLayoutChange('horizontal')},
+  {id: 'layoutVertical', label: '布局：上下', group: '布局', icon: PanelBottom, run: () => handleLayoutChange('vertical')},
+  {id: 'layoutEditor', label: '布局：仅编辑器', group: '布局', icon: Maximize2, run: () => handleLayoutChange('editor')},
+  {id: 'themeSystem', label: '主题：跟随系统', group: '主题', icon: Monitor, run: () => applyTheme('system')},
+  {id: 'themeLight', label: '主题：浅色', group: '主题', icon: Sun, run: () => applyTheme('light')},
+  {id: 'themeDark', label: '主题：深色', group: '主题', icon: Moon, run: () => applyTheme('dark')},
+  {id: 'settings', label: '打开设置', icon: SettingsIcon, run: () => { showSettings.value = true }}
+])
+
 const onGlobalKeydown = (e: KeyboardEvent) => {
   if (isOverlayOpen()) {
     return
@@ -804,7 +1249,10 @@ const onGlobalKeydown = (e: KeyboardEvent) => {
   }
 }
 
+const {init: initTheme, setTheme: setAppTheme} = useTheme()
+
 onMounted(async () => {
+  await initTheme()
   await initialize()
   await buildLanguageRegistry()
   // 以当前内容初始化首个标签页
diff --git a/src/components/AiAssistant.vue b/src/components/AiAssistant.vue
index 3a7ffd2..7fc6a87 100644
--- a/src/components/AiAssistant.vue
+++ b/src/components/AiAssistant.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="fixed top-0 right-0 bottom-0 w-[400px] max-w-[90vw] bg-white border-l border-gray-200 shadow-xl z-40 flex flex-col">
+  <div class="fixed top-0 right-0 bottom-0 w-[400px] max-w-[90vw] bg-white dark:bg-gray-800 dark:text-gray-100 border-l border-gray-200 dark:border-gray-700 shadow-xl z-40 flex flex-col">
     <!-- 头部 -->
-    <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 flex-shrink-0">
+    <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
       <div class="flex items-center space-x-2 min-w-0">
         <Sparkles class="w-4 h-4 text-blue-500 flex-shrink-0"/>
-        <span class="text-sm font-medium text-gray-700">AI 助手</span>
+        <span class="text-sm font-medium text-gray-700 dark:text-gray-200">AI 助手</span>
         <span class="text-xs text-gray-400 truncate">{{ active.model }}</span>
       </div>
       <div class="flex items-center space-x-1 flex-shrink-0">
-        <button v-if="messages.length" class="p-1 rounded text-gray-400 hover:text-red-500 hover:bg-gray-100" title="清空对话" @click="clearChat">
+        <button v-if="messages.length" class="p-1 rounded text-gray-400 hover:text-red-500 hover:bg-gray-100 dark:hover:bg-gray-700" title="清空对话" @click="clearChat">
           <Trash2 class="w-4 h-4"/>
         </button>
-        <button class="p-1 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-100" title="关闭" @click="emit('close')">
+        <button class="p-1 rounded text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" title="关闭" @click="emit('close')">
           <X class="w-4 h-4"/>
         </button>
       </div>
@@ -19,16 +19,17 @@
 
     <!-- 关联状态 -->
     <div class="px-4 py-1 text-xs border-b flex-shrink-0"
-         :class="executionId != null ? 'text-gray-500 bg-gray-50 border-gray-200' : 'text-amber-600 bg-amber-50 border-amber-100'">
+         :class="executionId != null ? 'text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700' : 'text-amber-600 bg-amber-50 border-amber-100'">
       {{ executionId != null ? `已关联运行 #${executionId}，对话随该次运行保存` : '临时会话：运行代码后对话才会保存' }}
     </div>
 
     <!-- 快捷动作 -->
-    <div class="flex items-center flex-wrap gap-2 px-3 py-2 border-b border-gray-100 flex-shrink-0">
+    <div class="flex items-center flex-wrap gap-2 px-3 py-2 border-b border-gray-100 dark:border-gray-700 flex-shrink-0">
       <button v-if="errorContext" class="text-xs px-2 py-1 rounded bg-red-100 hover:bg-red-200 text-red-700 cursor-pointer" @click="analyzeError">分析报错</button>
-      <button class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-600 cursor-pointer" @click="quick('解释下面的代码')">解释代码</button>
-      <button class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-600 cursor-pointer" @click="quick('找出下面代码中的 bug 并给出修复')">找 Bug</button>
-      <button class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-600 cursor-pointer" @click="quick('优化下面的代码并说明原因')">优化</button>
+      <button class="text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 cursor-pointer" @click="quick('解释下面的代码')">解释代码</button>
+      <button class="text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 cursor-pointer" @click="quick('找出下面代码中的 bug 并给出修复')">找 Bug</button>
+      <button class="text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 cursor-pointer" @click="quick('优化下面的代码并说明原因')">优化</button>
+      <button v-if="rootDir" class="text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 cursor-pointer" @click="genCommitMessage">生成提交信息</button>
     </div>
 
     <!-- 消息列表 -->
@@ -39,24 +40,24 @@
       <div v-for="(m, i) in messages" :key="i" class="flex" :class="m.role === 'user' ? 'justify-end' : 'justify-start'">
         <div v-if="m.role === 'user'" class="ai-markdown ai-user max-w-[90%] rounded-lg px-3 py-2 text-sm break-words bg-blue-500 text-white"
              v-html="renderMd(m.content)"></div>
-        <div v-else-if="m.content" class="ai-markdown max-w-[90%] rounded-lg px-3 py-2 text-sm break-words bg-gray-100 text-gray-800"
+        <div v-else-if="m.content" class="ai-markdown max-w-[90%] rounded-lg px-3 py-2 text-sm break-words bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100"
              v-html="renderMd(m.content)"></div>
       </div>
       <div v-if="waiting()" class="flex justify-start">
-        <div class="bg-gray-100 text-gray-500 rounded-lg px-3 py-2 text-sm">思考中…</div>
+        <div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-300 rounded-lg px-3 py-2 text-sm">思考中…</div>
       </div>
     </div>
 
     <!-- 输入 -->
-    <div class="border-t border-gray-200 p-2 flex-shrink-0">
+    <div class="border-t border-gray-200 dark:border-gray-700 p-2 flex-shrink-0">
       <div v-if="sending" class="mb-1.5 flex justify-center">
-        <button class="text-xs px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100 cursor-pointer" @click="stop">
+        <button class="text-xs px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="stop">
           停止生成
         </button>
       </div>
       <textarea v-model="input"
                 rows="2"
-                class="w-full text-sm border border-gray-300 rounded px-2 py-1.5 resize-none focus:outline-none focus:border-blue-400"
+                class="w-full text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-900 rounded px-2 py-1.5 resize-none focus:outline-none focus:border-blue-400"
                 placeholder="输入问题，Enter 发送（Shift+Enter 换行）"
                 @keydown.enter.exact.prevent="send()"/>
     </div>
@@ -114,6 +115,8 @@ const props = defineProps<{
   language: string
   executionId: number | null
   errorContext?: { code: string, error: string } | null
+  rootDir?: string | null
+  initialPrompt?: string | null
 }>()
 
 const emit = defineEmits<{ close: []; 'insert-code': [code: string] }>()
@@ -180,6 +183,17 @@ onMounted(async () => {
       scrollToBottom()
     }
   })
+  // 打开时若带有初始提示（如解释/生成测试），自动发送
+  if (props.initialPrompt) {
+    send(props.initialPrompt)
+  }
+})
+
+// 面板已打开时再次触发不同的初始提示也能发送
+watch(() => props.initialPrompt, (p, old) => {
+  if (p && p !== old) {
+    send(p)
+  }
 })
 
 onUnmounted(() => {
@@ -259,6 +273,25 @@ const quick = (instruction: string) => {
   }
   send(`${instruction}：\n\n\`\`\`${props.language}\n${props.code}\n\`\`\``)
 }
+
+const genCommitMessage = async () => {
+  if (!props.rootDir) {
+    return
+  }
+  let diff = ''
+  try {
+    diff = await invoke<string>('git_diff', {root: props.rootDir})
+  }
+  catch (error) {
+    toast.error('' + error)
+    return
+  }
+  if (!diff.trim()) {
+    toast.info('没有检测到改动')
+    return
+  }
+  send(`根据下面的 git diff 生成一条简洁的中文提交信息，格式为「类型: 描述」（类型如 feat/fix/docs/refactor/chore），只输出一行提交信息，不要解释：\n\n\`\`\`diff\n${diff}\n\`\`\``)
+}
 </script>
 
 <style>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 38a71ae..11dade2 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between">
+  <div class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-3 flex items-center justify-between">
     <div class="flex items-center space-x-3">
       <Select v-model="selectedLanguage"
               class="w-64"
@@ -47,20 +47,20 @@
 
     <div class="flex items-center space-x-3">
       <!-- 侧栏开关 + 布局切换 -->
-      <div class="flex items-center bg-gray-100 rounded-md p-0.5">
+      <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-md p-0.5">
         <Tooltip :text="sidebarVisible ? '隐藏侧栏' : '显示侧栏'">
           <button class="p-1.5 rounded transition-colors cursor-pointer"
-                  :class="sidebarVisible ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'"
+                  :class="sidebarVisible ? 'bg-white dark:bg-gray-900 text-blue-600 dark:text-blue-400 shadow-sm' : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-200'"
                   @click="emit('toggle-sidebar')">
             <PanelLeft class="w-4 h-4"/>
           </button>
         </Tooltip>
 
-        <div class="w-px h-4 bg-gray-300 mx-0.5"></div>
+        <div class="w-px h-4 bg-gray-300 dark:bg-gray-600 mx-0.5"></div>
 
         <Tooltip v-for="item in layoutOptions" :key="item.value" :text="item.label">
           <button class="p-1.5 rounded transition-colors cursor-pointer"
-                  :class="currentLayout === item.value ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'"
+                  :class="currentLayout === item.value ? 'bg-white dark:bg-gray-900 text-blue-600 dark:text-blue-400 shadow-sm' : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-200'"
                   @click="handleLayoutChange(item.value)">
             <component :is="item.icon" class="w-4 h-4"/>
           </button>
diff --git a/src/components/CodeEditor.vue b/src/components/CodeEditor.vue
index 1a9779d..4691fa4 100644
--- a/src/components/CodeEditor.vue
+++ b/src/components/CodeEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex bg-white h-full relative">
+  <div class="flex bg-white dark:bg-[#0d1117] h-full relative">
     <Codemirror v-if="isReady"
                 :style="{ width: '100%', height: '100%', fontSize: editorConfig?.font_size ? `${editorConfig.font_size}px` : undefined }"
                 :model-value="modelValue"
diff --git a/src/components/CommandPalette.vue b/src/components/CommandPalette.vue
new file mode 100644
index 0000000..32c8c01
--- /dev/null
+++ b/src/components/CommandPalette.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="fixed inset-0 z-50 flex items-start justify-center pt-24" @click="emit('close')">
+    <div class="w-[560px] max-w-[90vw] bg-white dark:bg-gray-800 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col max-h-[60vh]"
+         @click.stop>
+      <div class="flex items-center px-3 border-b border-gray-200 dark:border-gray-700">
+        <Command class="w-4 h-4 text-gray-400 flex-shrink-0"/>
+        <input ref="inputRef"
+               v-model="query"
+               class="flex-1 px-2 py-2.5 text-sm bg-transparent focus:outline-none"
+               placeholder="输入命令…"
+               @keydown.down.prevent="move(1)"
+               @keydown.up.prevent="move(-1)"
+               @keydown.enter.prevent="choose(filtered[activeIndex])"
+               @keydown.esc.prevent="emit('close')"/>
+      </div>
+
+      <div ref="listRef" class="overflow-y-auto py-1">
+        <div v-if="filtered.length === 0" class="px-4 py-6 text-center text-sm text-gray-400">无匹配命令</div>
+
+        <button v-for="(cmd, i) in filtered"
+                :key="cmd.id"
+                :ref="el => setItemRef(el, i)"
+                class="w-full flex items-center px-3 py-1.5 text-left cursor-pointer"
+                :class="i === activeIndex ? 'bg-blue-100 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
+                @click="choose(cmd)"
+                @mousemove="activeIndex = i">
+          <component :is="cmd.icon || ChevronRight" class="w-4 h-4 text-gray-400 flex-shrink-0 mr-2"/>
+          <span class="text-sm text-gray-800 dark:text-gray-100 truncate">{{ cmd.label }}</span>
+          <span v-if="cmd.group" class="ml-2 text-xs text-gray-400 truncate">{{ cmd.group }}</span>
+          <span v-if="cmd.hint" class="ml-auto pl-3 text-xs text-gray-400 dark:text-gray-500 flex-shrink-0 font-mono">{{ cmd.hint }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, nextTick, onMounted, ref, watch} from 'vue'
+import {ChevronRight, Command} from 'lucide-vue-next'
+
+export interface PaletteCommand
+{
+  id: string
+  label: string
+  group?: string
+  hint?: string
+  icon?: any
+  run: () => void
+}
+
+const props = defineProps<{ commands: PaletteCommand[] }>()
+const emit = defineEmits<{ close: [] }>()
+
+const query = ref('')
+const activeIndex = ref(0)
+const inputRef = ref<HTMLInputElement | null>(null)
+const listRef = ref<HTMLElement | null>(null)
+const itemRefs: HTMLElement[] = []
+const setItemRef = (el: any, i: number) => {
+  if (el) itemRefs[i] = el
+}
+
+onMounted(() => inputRef.value?.focus())
+
+const filtered = computed<PaletteCommand[]>(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) {
+    return props.commands
+  }
+  return props.commands
+      .map(c => {
+        const label = c.label.toLowerCase()
+        let score = -1
+        if (label.startsWith(q)) score = 0
+        else if (label.includes(q)) score = 1
+        else if (subsequence(q, label)) score = 2
+        return {c, score}
+      })
+      .filter(x => x.score >= 0)
+      .sort((a, b) => a.score - b.score)
+      .map(x => x.c)
+})
+
+// 简单子序列匹配（支持 "ot" 匹配 "open tab" 这类首字母缩写）
+const subsequence = (q: string, text: string): boolean => {
+  let i = 0
+  for (const ch of text) {
+    if (ch === q[i]) i++
+    if (i === q.length) return true
+  }
+  return false
+}
+
+watch(filtered, () => {
+  activeIndex.value = 0
+})
+
+const move = (delta: number) => {
+  const len = filtered.value.length
+  if (len === 0) return
+  activeIndex.value = (activeIndex.value + delta + len) % len
+  nextTick(() => itemRefs[activeIndex.value]?.scrollIntoView({block: 'nearest'}))
+}
+
+const choose = (cmd?: PaletteCommand) => {
+  if (cmd) {
+    emit('close')
+    cmd.run()
+  }
+}
+</script>
diff --git a/src/components/ConsoleOutput.vue b/src/components/ConsoleOutput.vue
index f5a723b..6d6cf48 100644
--- a/src/components/ConsoleOutput.vue
+++ b/src/components/ConsoleOutput.vue
@@ -42,7 +42,7 @@
       </div>
 
       <div v-else-if="output" class="p-4">
-        <pre :class="['whitespace-pre-wrap text-sm leading-relaxed font-mono', getOutputClass()]">{{ output }}</pre>
+        <pre :class="['whitespace-pre-wrap text-sm leading-relaxed font-mono', getOutputClass()]" v-html="renderedOutput"></pre>
 
         <!-- 正在运行时显示光标 -->
         <div v-if="isRunning" class="flex items-center mt-2 text-yellow-400">
@@ -63,6 +63,7 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
 import { Check, Clock, Copy, Loader, Terminal, Trash2 } from 'lucide-vue-next'
+import { ansiToHtml } from '../utils/ansi'
 
 const props = defineProps<{
   output: string
@@ -82,6 +83,9 @@ const outputContainer = ref<HTMLElement>()
 const copyIcon = computed(() => isCopied.value ? Check : Copy)
 
 // 根据执行状态和成功状态确定输出样式
+// 渲染 ANSI 颜色（自带 HTML 转义）
+const renderedOutput = computed(() => ansiToHtml(props.output || ''))
+
 const getOutputClass = () => {
   if (props.isRunning) {
     return 'text-yellow-300' // 运行中显示黄色
diff --git a/src/components/DiffView.vue b/src/components/DiffView.vue
new file mode 100644
index 0000000..6abafc6
--- /dev/null
+++ b/src/components/DiffView.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="fixed inset-0 z-50 flex justify-center pt-16 px-6 pb-6" @click="emit('close')">
+    <div class="w-full max-w-[980px] bg-white dark:bg-gray-800 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col"
+         @click.stop>
+      <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-200">
+          <GitCompare class="w-4 h-4 text-gray-400"/>
+          <span>差异对比</span>
+          <span v-if="fileName" class="text-xs text-gray-400">· {{ fileName }}</span>
+        </div>
+        <div class="flex items-center gap-3 text-xs">
+          <span class="text-green-600 dark:text-green-400">+{{ added }}</span>
+          <span class="text-red-600 dark:text-red-400">−{{ removed }}</span>
+          <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" title="关闭" @click="emit('close')">
+            <X class="w-4 h-4"/>
+          </button>
+        </div>
+      </div>
+
+      <div class="flex items-center px-4 py-1.5 text-xs text-gray-400 border-b border-gray-100 dark:border-gray-700 flex-shrink-0">
+        已保存（红） → 当前（绿）
+      </div>
+
+      <div class="flex-1 overflow-auto font-mono text-xs leading-5 max-h-[70vh]">
+        <div v-if="rows.length === 0" class="px-4 py-10 text-center text-sm text-gray-400">没有差异，内容一致</div>
+        <div v-for="(row, i) in rows" :key="i"
+             class="flex"
+             :class="rowClass(row.type)">
+          <span class="w-10 flex-shrink-0 text-right pr-2 select-none text-gray-400 dark:text-gray-500">{{ row.oldNo || '' }}</span>
+          <span class="w-10 flex-shrink-0 text-right pr-2 select-none text-gray-400 dark:text-gray-500">{{ row.newNo || '' }}</span>
+          <span class="w-4 flex-shrink-0 select-none text-center">{{ sign(row.type) }}</span>
+          <span class="flex-1 whitespace-pre-wrap break-all pr-3">{{ row.text }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import {GitCompare, X} from 'lucide-vue-next'
+
+const props = defineProps<{
+  original: string
+  modified: string
+  fileName?: string | null
+}>()
+const emit = defineEmits<{ close: [] }>()
+
+interface DiffRow { type: 'same' | 'add' | 'del'; text: string; oldNo?: number; newNo?: number }
+
+// 基于 LCS 的逐行差异（适用于编辑器规模的文本）
+const rows = computed<DiffRow[]>(() => {
+  const a = props.original.split('\n')
+  const b = props.modified.split('\n')
+  const n = a.length, m = b.length
+
+  // 超大文件不做精细 diff，避免 O(n*m) 卡顿
+  if (n * m > 4_000_000) {
+    return [{type: 'del' as const, text: '（文件过大，无法显示逐行差异）'}]
+  }
+
+  const dp: number[][] = Array.from({length: n + 1}, () => new Array(m + 1).fill(0))
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1])
+    }
+  }
+
+  const out: DiffRow[] = []
+  let i = 0, j = 0, oldNo = 0, newNo = 0
+  while (i < n && j < m) {
+    if (a[i] === b[j]) {
+      out.push({type: 'same', text: a[i], oldNo: ++oldNo, newNo: ++newNo})
+      i++; j++
+    }
+    else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      out.push({type: 'del', text: a[i], oldNo: ++oldNo})
+      i++
+    }
+    else {
+      out.push({type: 'add', text: b[j], newNo: ++newNo})
+      j++
+    }
+  }
+  while (i < n) out.push({type: 'del', text: a[i++], oldNo: ++oldNo})
+  while (j < m) out.push({type: 'add', text: b[j++], newNo: ++newNo})
+
+  // 全部相同则视为无差异
+  return out.every(r => r.type === 'same') ? [] : out
+})
+
+const added = computed(() => rows.value.filter(r => r.type === 'add').length)
+const removed = computed(() => rows.value.filter(r => r.type === 'del').length)
+
+const rowClass = (t: DiffRow['type']) =>
+    t === 'add' ? 'bg-green-50 dark:bg-green-900/25 text-green-800 dark:text-green-300'
+        : t === 'del' ? 'bg-red-50 dark:bg-red-900/25 text-red-800 dark:text-red-300'
+            : 'text-gray-700 dark:text-gray-300'
+
+const sign = (t: DiffRow['type']) => (t === 'add' ? '+' : t === 'del' ? '−' : '')
+</script>
diff --git a/src/components/EditorTabs.vue b/src/components/EditorTabs.vue
index 00810a7..ac196c5 100644
--- a/src/components/EditorTabs.vue
+++ b/src/components/EditorTabs.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="flex items-stretch bg-gray-50 border-b border-gray-200 overflow-x-auto flex-shrink-0
+  <div class="flex items-stretch bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 overflow-x-auto flex-shrink-0
               [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
     <div v-for="tab in tabs"
          :key="tab.id"
-         class="group flex items-center space-x-2 pl-3 pr-2 py-1.5 border-r border-gray-200 cursor-pointer max-w-[200px] flex-shrink-0 transition-colors"
+         class="group flex items-center space-x-2 pl-3 pr-2 py-1.5 border-r border-gray-200 dark:border-gray-700 cursor-pointer max-w-[200px] flex-shrink-0 transition-colors"
          :class="[
-           tab.id === activeId ? 'bg-white text-gray-800' : 'text-gray-500 hover:bg-gray-100',
+           tab.id === activeId ? 'bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700',
            dragOverId === tab.id ? 'border-l-2 border-l-blue-500' : ''
          ]"
          draggable="true"
@@ -20,7 +20,7 @@
       <img :src="iconUrl(tab.language)" class="w-4 h-4 flex-shrink-0" :alt="tab.language"/>
       <span class="text-xs truncate">{{ title(tab) }}</span>
       <span v-if="isDirty(tab)" class="text-amber-500 text-xs flex-shrink-0" title="未保存">●</span>
-      <button class="ml-1 rounded p-0.5 text-gray-400 hover:text-gray-700 hover:bg-gray-200 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
+      <button class="ml-1 rounded p-0.5 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
               :class="{ 'opacity-100': tab.id === activeId }"
               title="关闭"
               @click.stop="emit('close', tab.id)">
@@ -28,7 +28,7 @@
       </button>
     </div>
 
-    <button class="flex items-center justify-center px-2 text-gray-400 hover:text-gray-700 hover:bg-gray-100 cursor-pointer flex-shrink-0"
+    <button class="flex items-center justify-center px-2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex-shrink-0"
             title="新建标签页"
             @click="emit('new')">
       <Plus class="w-4 h-4"/>
@@ -37,15 +37,15 @@
 
   <!-- 标签右键菜单 -->
   <div v-if="menu.visible" class="fixed inset-0 z-50" @click="closeMenu" @contextmenu.prevent="closeMenu">
-    <div class="absolute bg-white rounded-md shadow-lg border border-gray-200 py-1 text-sm min-w-[140px]"
+    <div class="absolute bg-white dark:bg-gray-800 dark:text-gray-100 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 py-1 text-sm min-w-[140px]"
          :style="{ top: `${menu.y}px`, left: `${menu.x}px` }"
          @click.stop>
-      <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 cursor-pointer" @click="act(() => emit('close', menu.tabId!))">关闭</button>
-      <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 cursor-pointer" @click="act(() => emit('close-others', menu.tabId!))">关闭其他</button>
-      <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 cursor-pointer" @click="act(() => emit('close-right', menu.tabId!))">关闭右侧</button>
+      <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="act(() => emit('close', menu.tabId!))">关闭</button>
+      <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="act(() => emit('close-others', menu.tabId!))">关闭其他</button>
+      <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="act(() => emit('close-right', menu.tabId!))">关闭右侧</button>
       <template v-if="menuTabPath">
-        <div class="border-t border-gray-100 my-1"></div>
-        <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 cursor-pointer" @click="act(() => emit('copy-path', menuTabPath!))">复制路径</button>
+        <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
+        <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="act(() => emit('copy-path', menuTabPath!))">复制路径</button>
       </template>
     </div>
   </div>
diff --git a/src/components/ExecutionHistory.vue b/src/components/ExecutionHistory.vue
index 9674394..70aeebe 100644
--- a/src/components/ExecutionHistory.vue
+++ b/src/components/ExecutionHistory.vue
@@ -83,9 +83,12 @@
               <Button type="secondary" variant="outline" size="sm" :icon="Copy" @click="copyOutput">
                 复制输出
               </Button>
-              <Button size="sm" :icon="RotateCcw" @click="restoreSelected">
+              <Button type="secondary" variant="outline" size="sm" :icon="RotateCcw" @click="restoreSelected">
                 恢复代码
               </Button>
+              <Button size="sm" :icon="Play" @click="rerunSelected">
+                重新运行
+              </Button>
             </div>
           </div>
 
@@ -133,7 +136,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { invoke } from '@tauri-apps/api/core'
-import { Copy, History, RefreshCw, RotateCcw, Sparkles, Trash2 } from 'lucide-vue-next'
+import { Copy, History, Play, RefreshCw, RotateCcw, Sparkles, Trash2 } from 'lucide-vue-next'
 import Modal from '../ui/Modal.vue'
 import Button from '../ui/Button.vue'
 import type { ExecutionResult, Language } from '../types/app'
@@ -153,6 +156,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   'update:show': [value: boolean]
   restore: [item: ExecutionResult]
+  rerun: [item: ExecutionResult]
   'open-ai': [item: ExecutionResult]
 }>()
 
@@ -284,6 +288,14 @@ const restoreSelected = () => {
   visible.value = false
 }
 
+const rerunSelected = () => {
+  if (!selectedItem.value) {
+    return
+  }
+  emit('rerun', selectedItem.value)
+  visible.value = false
+}
+
 const openAi = () => {
   if (selectedItem.value?.id == null) {
     return
diff --git a/src/components/FileTreeNode.vue b/src/components/FileTreeNode.vue
index 8dc57b9..0a3c41b 100644
--- a/src/components/FileTreeNode.vue
+++ b/src/components/FileTreeNode.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex items-center py-1 pr-4 cursor-pointer text-sm select-none w-full whitespace-nowrap"
-         :class="isActive ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'"
+         :class="isActive ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
          :style="{ paddingLeft: `${depth * 12 + 8}px` }"
          @click="onClick"
          @contextmenu.prevent.stop="onContext">
@@ -14,7 +14,8 @@
                  class="w-4 h-4 mx-1 flex-shrink-0"
                  :class="node.is_dir ? 'text-blue-500' : 'text-gray-400'"/>
 
-      <span>{{ node.name }}</span>
+      <span :class="gitBadge ? gitColor : ''">{{ node.name }}</span>
+      <span v-if="gitBadge" class="ml-auto pl-2 pr-1 text-xs font-bold flex-shrink-0" :class="gitColor">{{ gitBadge }}</span>
     </div>
 
     <template v-if="node.is_dir && expanded">
@@ -49,9 +50,22 @@ const openFile = inject<(path: string) => void>('treeOpenFile')
 const activePath = inject<ComputedRef<string | null>>('treeActivePath')
 const contextMenu = inject<(node: FileNode, e: MouseEvent) => void>('treeContextMenu')
 const refreshSignal = inject<Ref<number>>('treeRefresh')
+const gitStatus = inject<ComputedRef<Record<string, string>>>('treeGitStatus')
 
 const isActive = computed(() => !props.node.is_dir && activePath?.value === props.node.path)
 
+// Git 徽标：文件取自身状态，目录暂不显示
+const gitBadge = computed(() => (props.node.is_dir ? '' : gitStatus?.value?.[props.node.path] || ''))
+const gitColor = computed(() => {
+  switch (gitBadge.value) {
+    case 'U': return 'text-green-500'
+    case 'A': return 'text-green-600 dark:text-green-400'
+    case 'D': return 'text-red-500'
+    case 'M': return 'text-amber-500'
+    default: return 'text-gray-400'
+  }
+})
+
 const loadChildren = async () => {
   try {
     children.value = await invoke<FileNode[]>('read_directory_tree', {path: props.node.path})
diff --git a/src/components/GitPanel.vue b/src/components/GitPanel.vue
new file mode 100644
index 0000000..8d44316
--- /dev/null
+++ b/src/components/GitPanel.vue
@@ -0,0 +1,291 @@
+<template>
+  <div class="fixed top-0 right-0 bottom-0 z-40 w-[42%] min-w-[360px] max-w-[640px] bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-700 shadow-2xl flex flex-col">
+    <!-- 头部：分支 + 操作 -->
+    <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+      <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-200 min-w-0">
+        <GitBranch class="w-4 h-4 text-gray-400 flex-shrink-0"/>
+        <select v-if="status.is_repo"
+                :value="status.branch"
+                class="bg-transparent text-sm font-medium focus:outline-none cursor-pointer max-w-[180px] truncate dark:bg-gray-900"
+                @change="onBranchChange">
+          <option v-for="b in branches" :key="b" :value="b" class="dark:bg-gray-800">{{ b }}</option>
+        </select>
+        <span v-else class="text-gray-400">非 Git 仓库</span>
+        <span v-if="status.ahead || status.behind" class="text-xs text-gray-400 flex-shrink-0">
+          <span v-if="status.ahead">↑{{ status.ahead }}</span>
+          <span v-if="status.behind">↓{{ status.behind }}</span>
+        </span>
+      </div>
+      <div class="flex items-center gap-2 flex-shrink-0">
+        <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" title="刷新" @click="refresh">
+          <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': loading }"/>
+        </button>
+        <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" title="关闭" @click="emit('close')">
+          <X class="w-4 h-4"/>
+        </button>
+      </div>
+    </div>
+
+    <template v-if="status.is_repo">
+      <!-- 文件列表 -->
+      <div class="flex-1 overflow-y-auto">
+        <div v-if="staged.length" class="py-1">
+          <div class="px-4 py-1 text-xs font-semibold text-gray-500 dark:text-gray-400 flex items-center justify-between">
+            <span>暂存的更改 ({{ staged.length }})</span>
+            <button class="text-blue-500 hover:underline cursor-pointer" @click="unstageAll">全部取消暂存</button>
+          </div>
+          <FileRow v-for="f in staged" :key="'s' + f.path" :file="f" staged @toggle="unstage([f.path])" @open="openFile(f.path)"/>
+        </div>
+
+        <div v-if="unstaged.length" class="py-1">
+          <div class="px-4 py-1 text-xs font-semibold text-gray-500 dark:text-gray-400 flex items-center justify-between">
+            <span>更改 ({{ unstaged.length }})</span>
+            <button class="text-blue-500 hover:underline cursor-pointer" @click="stageAll">全部暂存</button>
+          </div>
+          <FileRow v-for="f in unstaged" :key="'u' + f.path" :file="f" @toggle="stage([f.path])" @open="openFile(f.path)"/>
+        </div>
+
+        <div v-if="!staged.length && !unstaged.length" class="px-4 py-10 text-center text-sm text-gray-400">
+          没有未提交的更改
+        </div>
+      </div>
+
+      <!-- 提交区 -->
+      <div class="border-t border-gray-200 dark:border-gray-700 p-3 flex-shrink-0 space-y-2">
+        <div class="relative">
+          <textarea v-model="message"
+                    rows="3"
+                    class="w-full text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded px-2 py-1.5 pr-9 focus:outline-none focus:border-blue-500 resize-none"
+                    placeholder="提交信息…（Cmd/Ctrl+Enter 提交）"
+                    @keydown.meta.enter.prevent="commit"
+                    @keydown.ctrl.enter.prevent="commit"/>
+          <button class="absolute top-1.5 right-1.5 p-1 rounded text-gray-400 hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+                  :disabled="generating"
+                  title="用 AI 根据改动生成提交信息"
+                  @click="genMessage">
+            <Sparkles class="w-4 h-4" :class="{ 'animate-pulse': generating }"/>
+          </button>
+        </div>
+        <div class="flex items-center gap-2">
+          <Button size="sm" :disabled="!canCommit" @click="commit">
+            提交{{ staged.length ? ` (${staged.length})` : '' }}
+          </Button>
+          <Button size="sm" type="secondary" :disabled="busy" @click="commitAndPush">提交并推送</Button>
+          <Button size="sm" type="secondary" :disabled="busy" @click="push">
+            推送{{ status.ahead ? ` (↑${status.ahead})` : '' }}
+          </Button>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, h, onMounted, ref} from 'vue'
+import {invoke} from '@tauri-apps/api/core'
+import {GitBranch, RefreshCw, Sparkles, X} from 'lucide-vue-next'
+import Button from '../ui/Button.vue'
+import {useToast} from '../plugins/toast'
+import {useAiConfig} from '../composables/useAiConfig'
+
+interface GitFile { path: string; index: string; worktree: string }
+interface GitStatusData { is_repo: boolean; branch: string; ahead: number; behind: number; files: GitFile[] }
+
+const props = defineProps<{ rootDir: string }>()
+const emit = defineEmits<{ close: []; refresh: []; open: [path: string] }>()
+
+const toast = useToast()
+const {active, reload: reloadAi} = useAiConfig()
+
+const status = ref<GitStatusData>({is_repo: false, branch: '', ahead: 0, behind: 0, files: []})
+const branches = ref<string[]>([])
+const message = ref('')
+const loading = ref(false)
+const busy = ref(false)
+const generating = ref(false)
+
+// 文件视为已暂存：index 列非空且非未跟踪
+const isStaged = (f: GitFile) => f.index !== ' ' && f.index !== '?'
+// 同一文件可能同时存在暂存与未暂存改动；这里按是否有未暂存改动归入“更改”
+const hasUnstaged = (f: GitFile) => f.worktree !== ' ' || f.index === '?'
+
+const staged = computed(() => status.value.files.filter(isStaged))
+const unstaged = computed(() => status.value.files.filter(hasUnstaged))
+
+const canCommit = computed(() => staged.value.length > 0 && message.value.trim().length > 0 && !busy.value)
+
+const refresh = async () => {
+  loading.value = true
+  try {
+    status.value = await invoke<GitStatusData>('git_status', {root: props.rootDir})
+    if (status.value.is_repo) {
+      const b = await invoke<{ current: string; branches: string[] }>('git_branches', {root: props.rootDir})
+      branches.value = b.branches
+    }
+    emit('refresh')
+  }
+  catch (error) {
+    toast.error('读取 Git 状态失败: ' + error)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+const abs = (rel: string) => `${props.rootDir}/${rel}`
+
+const stage = async (paths: string[]) => {
+  try {
+    await invoke('git_stage', {root: props.rootDir, paths: paths.map(abs)})
+    await refresh()
+  }
+  catch (error) {
+    toast.error('暂存失败: ' + error)
+  }
+}
+const unstage = async (paths: string[]) => {
+  try {
+    await invoke('git_unstage', {root: props.rootDir, paths: paths.map(abs)})
+    await refresh()
+  }
+  catch (error) {
+    toast.error('取消暂存失败: ' + error)
+  }
+}
+const stageAll = () => stage(unstaged.value.map(f => f.path))
+const unstageAll = () => unstage(staged.value.map(f => f.path))
+
+const commit = async () => {
+  if (!canCommit.value) {
+    return
+  }
+  busy.value = true
+  try {
+    await invoke('git_commit', {root: props.rootDir, message: message.value.trim()})
+    toast.success('已提交')
+    message.value = ''
+    await refresh()
+  }
+  catch (error) {
+    toast.error('提交失败: ' + error)
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+const push = async () => {
+  busy.value = true
+  try {
+    await invoke('git_push', {root: props.rootDir})
+    toast.success('已推送')
+    await refresh()
+  }
+  catch (error) {
+    toast.error('推送失败: ' + error)
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+const commitAndPush = async () => {
+  if (!canCommit.value) {
+    toast.info('请填写提交信息并暂存改动')
+    return
+  }
+  await commit()
+  await push()
+}
+
+const onBranchChange = async (e: Event) => {
+  const branch = (e.target as HTMLSelectElement).value
+  if (branch === status.value.branch) {
+    return
+  }
+  try {
+    await invoke('git_checkout', {root: props.rootDir, branch})
+    toast.success(`已切换到 ${branch}`)
+    await refresh()
+  }
+  catch (error) {
+    toast.error('切换分支失败: ' + error)
+    await refresh()
+  }
+}
+
+const openFile = (rel: string) => emit('open', abs(rel))
+
+// 清洗 AI 返回：去掉代码块/引号，取首个非空行
+const cleanupMessage = (raw: string): string => {
+  let s = raw.trim()
+  s = s.replace(/^```[a-z]*\s*/i, '').replace(/```$/, '').trim()
+  const first = s.split('\n').map(l => l.trim()).find(l => l.length > 0) || s
+  return first.replace(/^["'「『]/, '').replace(/["'」』]$/, '').trim()
+}
+
+// 用 AI 根据当前改动生成提交信息
+const genMessage = async () => {
+  if (!status.value.is_repo) {
+    return
+  }
+  reloadAi()
+  if (!active.value.apiKey) {
+    toast.info('请先在设置中配置 AI 的 API Key')
+    return
+  }
+  generating.value = true
+  try {
+    const diff = await invoke<string>('git_diff', {root: props.rootDir})
+    if (!diff.trim()) {
+      toast.info('没有可用于生成的改动')
+      return
+    }
+    const prompt = `根据下面的 git diff 生成一条简洁的中文提交信息，格式为「类型: 描述」（类型如 feat/fix/docs/refactor/chore），只输出一行提交信息，不要解释、不要代码块：\n\n${diff}`
+    const res = await invoke<string>('ai_chat', {
+      provider: active.value.provider,
+      baseUrl: active.value.baseUrl,
+      apiKey: active.value.apiKey,
+      model: active.value.model,
+      system: null,
+      messages: [{role: 'user', content: prompt}]
+    })
+    message.value = cleanupMessage(res)
+  }
+  catch (error) {
+    toast.error('生成失败: ' + error)
+  }
+  finally {
+    generating.value = false
+  }
+}
+
+onMounted(refresh)
+
+// 行内小组件：文件名 + 状态字母 + 暂存/取消按钮
+const FileRow = (rowProps: { file: GitFile; staged?: boolean }, {emit: rowEmit }: any) => {
+  const f = rowProps.file
+  const code = f.index === '?' ? '?' : (rowProps.staged ? f.index : f.worktree).trim() || f.index.trim()
+  const color = code === '?' ? 'text-green-500'
+      : code === 'A' ? 'text-green-600 dark:text-green-400'
+          : code === 'D' ? 'text-red-500'
+              : code === 'M' ? 'text-amber-500'
+                  : 'text-gray-400'
+  const name = f.path.split('/').pop()
+  const dir = f.path.slice(0, f.path.length - (name?.length || 0)).replace(/\/$/, '')
+  return h('div', {class: 'group flex items-center px-4 py-1 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer'}, [
+    h('span', {
+      class: 'flex-1 min-w-0 flex items-baseline gap-1.5',
+      onClick: () => rowEmit('open')
+    }, [
+      h('span', {class: 'text-sm text-gray-800 dark:text-gray-200 truncate'}, name),
+      h('span', {class: 'text-xs text-gray-400 truncate'}, dir)
+    ]),
+    h('span', {class: `text-xs font-bold w-4 text-center ${color}`}, code || 'M'),
+    h('button', {
+      class: 'ml-2 text-xs text-blue-500 hover:underline opacity-0 group-hover:opacity-100 cursor-pointer',
+      onClick: () => rowEmit('toggle')
+    }, rowProps.staged ? '−' : '+')
+  ])
+}
+</script>
diff --git a/src/components/GoToLine.vue b/src/components/GoToLine.vue
new file mode 100644
index 0000000..1de5910
--- /dev/null
+++ b/src/components/GoToLine.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="fixed inset-0 z-50 flex items-start justify-center pt-20" @click="emit('close')">
+    <div class="w-[360px] max-w-[90vw] bg-white dark:bg-gray-800 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden"
+         @click.stop>
+      <div class="flex items-center px-3 border-b border-gray-200 dark:border-gray-700">
+        <CornerDownRight class="w-4 h-4 text-gray-400 flex-shrink-0"/>
+        <input ref="inputRef"
+               v-model="value"
+               type="text"
+               inputmode="numeric"
+               class="flex-1 px-2 py-2.5 text-sm bg-transparent focus:outline-none"
+               :placeholder="`跳转到行（1 - ${maxLine}）`"
+               @keydown.enter.prevent="submit"
+               @keydown.esc.prevent="emit('close')"/>
+      </div>
+      <div class="px-3 py-1.5 text-xs text-gray-400">
+        共 {{ maxLine }} 行 · 回车跳转
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {onMounted, ref} from 'vue'
+import {CornerDownRight} from 'lucide-vue-next'
+
+const props = defineProps<{ maxLine: number }>()
+const emit = defineEmits<{ go: [line: number]; close: [] }>()
+
+const value = ref('')
+const inputRef = ref<HTMLInputElement | null>(null)
+
+onMounted(() => inputRef.value?.focus())
+
+const submit = () => {
+  const n = parseInt(value.value.trim(), 10)
+  if (!Number.isNaN(n) && n >= 1) {
+    emit('go', Math.min(n, props.maxLine))
+    emit('close')
+  }
+}
+</script>
diff --git a/src/components/InlineGenerate.vue b/src/components/InlineGenerate.vue
index 1275cc9..5cce058 100644
--- a/src/components/InlineGenerate.vue
+++ b/src/components/InlineGenerate.vue
@@ -1,12 +1,13 @@
 <template>
-  <div class="absolute left-1/2 -translate-x-1/2 top-3 w-[92%] max-w-[640px] z-20 bg-white rounded-lg shadow-2xl border border-gray-200 overflow-hidden flex flex-col max-h-[80%]">
+  <div class="absolute left-1/2 -translate-x-1/2 top-3 w-[92%] max-w-[640px] z-20 bg-white dark:bg-gray-800 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col max-h-[80%]">
     <!-- 需求输入 -->
-    <div class="flex items-center px-3 border-b border-gray-200 flex-shrink-0">
+    <div class="flex items-center px-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
       <Sparkles class="w-4 h-4 text-blue-500 flex-shrink-0"/>
+      <span v-if="isEdit" class="ml-1.5 text-[11px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-600 flex-shrink-0">改写选中</span>
       <input ref="inputRef"
              v-model="prompt"
-             class="flex-1 px-2 py-2.5 text-sm focus:outline-none"
-             :placeholder="`用自然语言描述要生成的${language}代码…`"
+             class="flex-1 px-2 py-2.5 text-sm bg-transparent focus:outline-none"
+             :placeholder="isEdit ? '描述如何修改选中的代码…' : `用自然语言描述要生成的${language}代码…`"
              :disabled="loading"
              @keydown.enter.prevent="generate"
              @keydown.esc.prevent="emit('close')"/>
@@ -21,15 +22,15 @@
 
     <!-- 生成结果：可编辑，确认后才插入 -->
     <template v-else-if="result !== null">
-      <div class="px-3 py-1 text-[11px] text-gray-400 border-b border-gray-100 flex-shrink-0">
+      <div class="px-3 py-1 text-[11px] text-gray-400 border-b border-gray-100 dark:border-gray-700 flex-shrink-0">
         生成结果（可编辑后插入）
       </div>
       <textarea v-model="result"
-                class="flex-1 min-h-[120px] w-full font-mono text-xs leading-relaxed px-3 py-2 resize-none focus:outline-none"
+                class="flex-1 min-h-[120px] w-full font-mono text-xs leading-relaxed px-3 py-2 bg-transparent resize-none focus:outline-none"
                 spellcheck="false"
                 @keydown.esc.prevent="emit('close')"></textarea>
-      <div class="flex items-center justify-end gap-2 px-3 py-2 border-t border-gray-200 flex-shrink-0">
-        <button class="text-xs px-3 py-1 rounded text-gray-600 hover:bg-gray-100 cursor-pointer" @click="emit('close')">取消</button>
+      <div class="flex items-center justify-end gap-2 px-3 py-2 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
+        <button class="text-xs px-3 py-1 rounded text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="emit('close')">取消</button>
         <button class="text-xs px-3 py-1 rounded bg-blue-500 text-white hover:bg-blue-600 cursor-pointer" @click="confirm">插入到编辑器</button>
       </div>
     </template>
@@ -41,18 +42,19 @@
 </template>
 
 <script setup lang="ts">
-import {onMounted, ref} from 'vue'
+import {computed, onMounted, ref} from 'vue'
 import {invoke} from '@tauri-apps/api/core'
 import {Sparkles} from 'lucide-vue-next'
 import {useAiConfig} from '../composables/useAiConfig'
 import {useToast} from '../plugins/toast'
 
-const props = defineProps<{ language: string }>()
+const props = defineProps<{ language: string; selection?: string }>()
 const emit = defineEmits<{ insert: [code: string]; close: [] }>()
 
 const toast = useToast()
 const {active, reload} = useAiConfig()
 
+const isEdit = computed(() => !!props.selection?.trim())
 const prompt = ref('')
 const loading = ref(false)
 const result = ref<string | null>(null)
@@ -78,6 +80,13 @@ const generate = async () => {
     return
   }
 
+  const system = isEdit.value
+      ? `你是代码助手。根据要求修改给定的 ${props.language} 代码。只输出修改后的完整代码，不要任何解释，不要使用 Markdown 代码块标记。`
+      : `你是代码生成助手。根据需求生成 ${props.language} 代码。只输出代码本身，不要任何解释，不要使用 Markdown 代码块标记。`
+  const userContent = isEdit.value
+      ? `修改要求：${content}\n\n原代码：\n${props.selection}`
+      : content
+
   loading.value = true
   try {
     const reply = await invoke<string>('ai_chat', {
@@ -85,8 +94,8 @@ const generate = async () => {
       baseUrl: active.value.baseUrl,
       apiKey: active.value.apiKey,
       model: active.value.model,
-      system: `你是代码生成助手。根据需求生成 ${props.language} 代码。只输出代码本身，不要任何解释，不要使用 Markdown 代码块标记。`,
-      messages: [{role: 'user', content}]
+      system,
+      messages: [{role: 'user', content: userContent}]
     })
     result.value = stripFences(reply)
   }
diff --git a/src/components/LargeFileViewer.vue b/src/components/LargeFileViewer.vue
index b2cbf3b..a5d8c7e 100644
--- a/src/components/LargeFileViewer.vue
+++ b/src/components/LargeFileViewer.vue
@@ -1,30 +1,30 @@
 <template>
-  <div class="absolute inset-0 z-10 flex flex-col bg-white">
+  <div class="absolute inset-0 z-10 flex flex-col bg-white dark:bg-gray-900">
     <!-- 顶部信息栏 -->
-    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 bg-gray-50 flex-shrink-0">
+    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex-shrink-0">
       <div class="flex items-center space-x-3 min-w-0">
         <FileText class="w-4 h-4 text-gray-500 flex-shrink-0"/>
-        <span class="text-sm font-medium text-gray-700 truncate">{{ fileName }}</span>
+        <span class="text-sm font-medium text-gray-700 dark:text-gray-200 truncate">{{ fileName }}</span>
         <span class="text-xs px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 flex-shrink-0">只读</span>
         <span class="text-xs text-gray-400 flex-shrink-0">{{ humanSize }} · 共 {{ lineCount.toLocaleString() }} 行</span>
       </div>
       <div class="flex items-center space-x-3 flex-shrink-0">
         <span class="text-xs text-gray-400">{{ rangeText }}</span>
-        <button class="p-1 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 cursor-pointer" title="关闭" @click="emit('close')">
+        <button class="p-1 rounded text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer" title="关闭" @click="emit('close')">
           <X class="w-4 h-4"/>
         </button>
       </div>
     </div>
 
     <!-- 虚拟滚动区域 -->
-    <div ref="scroller" class="flex-1 overflow-auto font-mono text-sm leading-5 bg-white" @scroll="onScroll">
+    <div ref="scroller" class="flex-1 overflow-auto font-mono text-sm leading-5 bg-white dark:bg-gray-900" @scroll="onScroll">
       <div :style="{ paddingTop: `${topPad}px`, paddingBottom: `${bottomPad}px` }">
         <div v-for="(line, i) in windowLines"
              :key="windowStart + i"
              class="flex"
              :style="{ height: `${lineHeight}px` }">
-          <span class="w-16 pr-3 text-right text-gray-400 select-none flex-shrink-0 bg-gray-50 border-r border-gray-100">{{ windowStart + i + 1 }}</span>
-          <pre class="pl-3 whitespace-pre text-gray-800">{{ line }}</pre>
+          <span class="w-16 pr-3 text-right text-gray-400 select-none flex-shrink-0 bg-gray-50 dark:bg-gray-800 border-r border-gray-100 dark:border-gray-700">{{ windowStart + i + 1 }}</span>
+          <pre class="pl-3 whitespace-pre text-gray-800 dark:text-gray-200">{{ line }}</pre>
         </div>
       </div>
     </div>
diff --git a/src/components/Outline.vue b/src/components/Outline.vue
new file mode 100644
index 0000000..0032845
--- /dev/null
+++ b/src/components/Outline.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="fixed inset-0 z-50 flex items-start justify-center pt-24" @click="emit('close')">
+    <div class="w-[520px] max-w-[90vw] bg-white dark:bg-gray-800 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col max-h-[60vh]"
+         @click.stop>
+      <div class="flex items-center px-3 border-b border-gray-200 dark:border-gray-700">
+        <ListTree class="w-4 h-4 text-gray-400 flex-shrink-0"/>
+        <input ref="inputRef"
+               v-model="query"
+               class="flex-1 px-2 py-2.5 text-sm bg-transparent focus:outline-none"
+               placeholder="跳转到符号…"
+               @keydown.down.prevent="move(1)"
+               @keydown.up.prevent="move(-1)"
+               @keydown.enter.prevent="choose(filtered[activeIndex])"
+               @keydown.esc.prevent="emit('close')"/>
+        <span class="text-xs text-gray-400 flex-shrink-0">{{ symbols.length }}</span>
+      </div>
+
+      <div ref="listRef" class="overflow-y-auto py-1">
+        <div v-if="symbols.length === 0" class="px-4 py-6 text-center text-sm text-gray-400">未识别到符号</div>
+        <div v-else-if="filtered.length === 0" class="px-4 py-6 text-center text-sm text-gray-400">无匹配符号</div>
+
+        <button v-for="(s, i) in filtered"
+                :key="s.line + ':' + s.name"
+                :ref="el => setItemRef(el, i)"
+                class="w-full flex items-center px-3 py-1.5 text-left cursor-pointer"
+                :class="i === activeIndex ? 'bg-blue-100 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
+                @click="choose(s)"
+                @mousemove="activeIndex = i">
+          <span class="w-12 flex-shrink-0 text-[10px] uppercase font-semibold" :class="kindColor(s.kind)">{{ s.kind }}</span>
+          <span class="text-sm text-gray-800 dark:text-gray-100 truncate font-mono">{{ s.name }}</span>
+          <span class="ml-auto pl-3 text-xs text-gray-400 flex-shrink-0">{{ s.line }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, nextTick, onMounted, ref, watch} from 'vue'
+import {ListTree} from 'lucide-vue-next'
+
+interface Symbol { name: string; kind: string; line: number }
+
+const props = defineProps<{ code: string; language?: string }>()
+const emit = defineEmits<{ go: [line: number]; close: [] }>()
+
+const query = ref('')
+const activeIndex = ref(0)
+const inputRef = ref<HTMLInputElement | null>(null)
+const listRef = ref<HTMLElement | null>(null)
+const itemRefs: HTMLElement[] = []
+const setItemRef = (el: any, i: number) => {
+  if (el) itemRefs[i] = el
+}
+
+onMounted(() => inputRef.value?.focus())
+
+// 控制关键字，避免把 if/for 等当成方法名
+const STOP = new Set(['if', 'for', 'while', 'switch', 'catch', 'return', 'else', 'do', 'foreach', 'with', 'when', 'match'])
+
+// 按语言归类
+const family = computed(() => {
+  const l = (props.language || '').toLowerCase()
+  if (l.startsWith('python')) return 'python'
+  if (l === 'go') return 'go'
+  if (l === 'rust' || l === 'cangjie') return 'rust'
+  if (l === 'java') return 'java'
+  if (l === 'ruby') return 'ruby'
+  if (l === 'php') return 'php'
+  if (l === 'c' || l === 'cpp' || l === 'objective-c' || l === 'objective-cpp') return 'c'
+  if (l.includes('javascript') || l.includes('typescript') || l === 'nodejs') return 'js'
+  return 'generic'
+})
+
+// 各语言族的提取规则：[正则, kind, 捕获组下标]
+const rulesFor = (fam: string): [RegExp, string, number][] => {
+  switch (fam) {
+    case 'python':
+      return [
+        [/^\s*class\s+([A-Za-z_]\w*)/, 'class', 1],
+        [/^\s*(?:async\s+)?def\s+([A-Za-z_]\w*)/, 'def', 1],
+      ]
+    case 'js':
+      return [
+        [/^\s*(?:export\s+)?(?:default\s+)?(?:async\s+)?function\*?\s+([A-Za-z_$][\w$]*)/, 'func', 1],
+        [/^\s*(?:export\s+)?(?:abstract\s+)?class\s+([A-Za-z_$][\w$]*)/, 'class', 1],
+        [/^\s*(?:export\s+)?interface\s+([A-Za-z_$][\w$]*)/, 'iface', 1],
+        [/^\s*(?:export\s+)?type\s+([A-Za-z_$][\w$]*)/, 'type', 1],
+        [/^\s*(?:export\s+)?(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(?:async\s*)?(?:\([^)]*\)|[A-Za-z_$][\w$]*)\s*=>/, 'func', 1],
+        [/^\s+(?:public\s+|private\s+|protected\s+|static\s+|async\s+|get\s+|set\s+)*([A-Za-z_$][\w$]*)\s*\([^)]*\)\s*\{/, 'method', 1],
+      ]
+    case 'rust':
+      return [
+        [/^\s*(?:pub(?:\([^)]*\))?\s+)?fn\s+([A-Za-z_]\w*)/, 'fn', 1],
+        [/^\s*(?:pub(?:\([^)]*\))?\s+)?struct\s+([A-Za-z_]\w*)/, 'struct', 1],
+        [/^\s*(?:pub(?:\([^)]*\))?\s+)?enum\s+([A-Za-z_]\w*)/, 'enum', 1],
+        [/^\s*(?:pub(?:\([^)]*\))?\s+)?trait\s+([A-Za-z_]\w*)/, 'trait', 1],
+        [/^\s*impl(?:\s*<[^>]*>)?\s+(?:[A-Za-z_][\w:]*\s+for\s+)?([A-Za-z_]\w*)/, 'impl', 1],
+      ]
+    case 'go':
+      return [
+        [/^\s*func\s+(?:\([^)]*\)\s*)?([A-Za-z_]\w*)/, 'func', 1],
+        [/^\s*type\s+([A-Za-z_]\w*)/, 'type', 1],
+      ]
+    case 'java':
+      return [
+        [/^\s*(?:public|private|protected|abstract|final|static|\s)*\s*(?:class|interface|enum)\s+([A-Za-z_]\w*)/, 'class', 1],
+        [/^\s*(?:public|private|protected)\s+(?:static\s+|final\s+|abstract\s+|synchronized\s+)*[\w<>\[\],.\s]+?\s+([A-Za-z_]\w*)\s*\([^;{]*\)\s*\{?/, 'method', 1],
+      ]
+    case 'c':
+      return [
+        [/^\s*(?:struct|class)\s+([A-Za-z_]\w*)/, 'type', 1],
+        [/^[A-Za-z_][\w<>:\*&\s]*?\s+([A-Za-z_]\w*)\s*\([^;]*\)\s*\{/, 'func', 1],
+      ]
+    case 'ruby':
+      return [
+        [/^\s*(?:class|module)\s+([A-Za-z_]\w*)/, 'class', 1],
+        [/^\s*def\s+([A-Za-z_][\w?!.]*)/, 'def', 1],
+      ]
+    case 'php':
+      return [
+        [/^\s*(?:abstract\s+|final\s+)?(?:class|interface|trait)\s+([A-Za-z_]\w*)/, 'class', 1],
+        [/^\s*(?:public|private|protected|static|\s)*function\s+([A-Za-z_]\w*)/, 'func', 1],
+      ]
+    default:
+      return [
+        [/^\s*(?:export\s+)?(?:async\s+)?function\s+([A-Za-z_$][\w$]*)/, 'func', 1],
+        [/^\s*(?:def|fn|func)\s+([A-Za-z_]\w*)/, 'func', 1],
+        [/^\s*class\s+([A-Za-z_]\w*)/, 'class', 1],
+      ]
+  }
+}
+
+const symbols = computed<Symbol[]>(() => {
+  const lines = (props.code || '').split('\n')
+  const rules = rulesFor(family.value)
+  const out: Symbol[] = []
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    for (const [re, kind, g] of rules) {
+      const m = re.exec(line)
+      if (m && m[g] && !STOP.has(m[g])) {
+        out.push({name: m[g], kind, line: i + 1})
+        break
+      }
+    }
+  }
+  return out
+})
+
+const filtered = computed<Symbol[]>(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) return symbols.value
+  return symbols.value.filter(s => s.name.toLowerCase().includes(q))
+})
+
+watch(filtered, () => {
+  activeIndex.value = 0
+})
+
+const kindColor = (kind: string) => {
+  switch (kind) {
+    case 'class':
+    case 'struct':
+    case 'enum':
+    case 'type':
+    case 'iface':
+      return 'text-purple-500'
+    case 'impl':
+    case 'trait':
+      return 'text-blue-500'
+    default:
+      return 'text-amber-600 dark:text-amber-400'
+  }
+}
+
+const move = (delta: number) => {
+  const len = filtered.value.length
+  if (len === 0) return
+  activeIndex.value = (activeIndex.value + delta + len) % len
+  nextTick(() => itemRefs[activeIndex.value]?.scrollIntoView({block: 'nearest'}))
+}
+
+const choose = (s?: Symbol) => {
+  if (s) {
+    emit('go', s.line)
+    emit('close')
+  }
+}
+</script>
diff --git a/src/components/PreviewPanel.vue b/src/components/PreviewPanel.vue
new file mode 100644
index 0000000..75c1b3a
--- /dev/null
+++ b/src/components/PreviewPanel.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="fixed top-0 right-0 bottom-0 z-40 w-[45%] min-w-[360px] max-w-[720px] bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-700 shadow-2xl flex flex-col">
+    <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+      <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-200">
+        <Eye class="w-4 h-4 text-gray-400"/>
+        <span>实时预览</span>
+        <span class="text-xs text-gray-400">· {{ kindLabel }}</span>
+      </div>
+      <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" title="关闭预览" @click="emit('close')">
+        <X class="w-4 h-4"/>
+      </button>
+    </div>
+
+    <div class="flex-1 overflow-auto">
+      <!-- HTML：沙箱 iframe -->
+      <iframe v-if="kind === 'html'"
+              :srcdoc="content"
+              class="w-full h-full border-0 bg-white"
+              sandbox="allow-same-origin"/>
+      <!-- Markdown：渲染后的 HTML -->
+      <div v-else-if="kind === 'markdown'"
+           class="markdown-body px-6 py-5 text-sm text-gray-800 dark:text-gray-200"
+           v-html="rendered"/>
+      <!-- 不支持的类型 -->
+      <div v-else class="px-6 py-10 text-center text-sm text-gray-400">
+        当前文件类型不支持预览（仅支持 Markdown 与 HTML）
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import {Eye, X} from 'lucide-vue-next'
+import MarkdownIt from 'markdown-it'
+
+const props = defineProps<{
+  content: string
+  language?: string
+  fileName?: string | null
+}>()
+const emit = defineEmits<{ close: [] }>()
+
+const md = new MarkdownIt({html: false, linkify: true, breaks: true})
+
+// 根据语言或扩展名判断预览类型
+const kind = computed<'markdown' | 'html' | 'none'>(() => {
+  const lang = (props.language || '').toLowerCase()
+  const name = (props.fileName || '').toLowerCase()
+  if (lang === 'html' || name.endsWith('.html') || name.endsWith('.htm')) {
+    return 'html'
+  }
+  if (lang === 'markdown' || name.endsWith('.md') || name.endsWith('.markdown')) {
+    return 'markdown'
+  }
+  return 'none'
+})
+
+const kindLabel = computed(() => ({markdown: 'Markdown', html: 'HTML', none: '不支持'}[kind.value]))
+
+const rendered = computed(() => (kind.value === 'markdown' ? md.render(props.content || '') : ''))
+</script>
+
+<style scoped>
+.markdown-body :deep(h1) { font-size: 1.6em; font-weight: 700; margin: 0.6em 0 0.4em; }
+.markdown-body :deep(h2) { font-size: 1.35em; font-weight: 700; margin: 0.6em 0 0.4em; border-bottom: 1px solid rgba(128, 128, 128, 0.25); padding-bottom: 0.2em; }
+.markdown-body :deep(h3) { font-size: 1.15em; font-weight: 600; margin: 0.6em 0 0.3em; }
+.markdown-body :deep(p) { margin: 0.5em 0; line-height: 1.7; }
+.markdown-body :deep(ul), .markdown-body :deep(ol) { margin: 0.5em 0; padding-left: 1.5em; }
+.markdown-body :deep(li) { margin: 0.2em 0; }
+.markdown-body :deep(code) { background: rgba(128, 128, 128, 0.18); padding: 0.1em 0.35em; border-radius: 4px; font-family: monospace; font-size: 0.9em; }
+.markdown-body :deep(pre) { background: rgba(128, 128, 128, 0.15); padding: 0.8em 1em; border-radius: 6px; overflow-x: auto; margin: 0.6em 0; }
+.markdown-body :deep(pre code) { background: none; padding: 0; }
+.markdown-body :deep(blockquote) { border-left: 3px solid rgba(128, 128, 128, 0.4); padding-left: 1em; color: rgba(128, 128, 128, 0.95); margin: 0.6em 0; }
+.markdown-body :deep(a) { color: #3b82f6; text-decoration: underline; }
+.markdown-body :deep(table) { border-collapse: collapse; margin: 0.6em 0; }
+.markdown-body :deep(th), .markdown-body :deep(td) { border: 1px solid rgba(128, 128, 128, 0.3); padding: 0.4em 0.7em; }
+.markdown-body :deep(img) { max-width: 100%; }
+.markdown-body :deep(hr) { border: none; border-top: 1px solid rgba(128, 128, 128, 0.3); margin: 1em 0; }
+</style>
diff --git a/src/components/QuickOpen.vue b/src/components/QuickOpen.vue
index ac56801..e7f7fe5 100644
--- a/src/components/QuickOpen.vue
+++ b/src/components/QuickOpen.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="fixed inset-0 z-50 flex justify-center pt-24" @click="emit('close')">
-    <div class="w-[560px] max-w-[90vw] bg-white rounded-lg shadow-2xl border border-gray-200 overflow-hidden flex flex-col max-h-[60vh]"
+  <div class="fixed inset-0 z-50 flex items-start justify-center pt-24" @click="emit('close')">
+    <div class="w-[560px] max-w-[90vw] bg-white dark:bg-gray-800 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col max-h-[60vh]"
          @click.stop>
-      <div class="flex items-center px-3 border-b border-gray-200">
+      <div class="flex items-center px-3 border-b border-gray-200 dark:border-gray-700">
         <Search class="w-4 h-4 text-gray-400 flex-shrink-0"/>
         <input ref="inputRef"
                v-model="query"
-               class="flex-1 px-2 py-2.5 text-sm focus:outline-none"
+               class="flex-1 px-2 py-2.5 text-sm bg-transparent focus:outline-none"
                placeholder="按文件名快速打开…"
                @keydown.down.prevent="move(1)"
                @keydown.up.prevent="move(-1)"
@@ -22,11 +22,11 @@
                 :key="file.path"
                 :ref="el => setItemRef(el, i)"
                 class="w-full flex items-center px-3 py-1.5 text-left cursor-pointer"
-                :class="i === activeIndex ? 'bg-blue-100' : 'hover:bg-gray-100'"
+                :class="i === activeIndex ? 'bg-blue-100 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
                 @click="choose(file)"
                 @mousemove="activeIndex = i">
           <FileText class="w-4 h-4 text-gray-400 flex-shrink-0 mr-2"/>
-          <span class="text-sm text-gray-800 truncate">{{ file.name }}</span>
+          <span class="text-sm text-gray-800 dark:text-gray-100 truncate">{{ file.name }}</span>
           <span class="ml-2 text-xs text-gray-400 truncate">{{ file.dir }}</span>
         </button>
       </div>
diff --git a/src/components/ResizablePanels.vue b/src/components/ResizablePanels.vue
index e090803..9663c50 100644
--- a/src/components/ResizablePanels.vue
+++ b/src/components/ResizablePanels.vue
@@ -7,7 +7,7 @@
 
     <!-- 拖拽分隔条 -->
     <div
-      class="relative bg-gray-200 hover:bg-blue-500 transition-colors flex-shrink-0 group"
+      class="relative bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 transition-colors flex-shrink-0 group"
       :class="isVertical ? 'h-1 cursor-row-resize' : 'w-1 cursor-col-resize'"
       @mousedown="startResize"
       @touchstart="startResize">
diff --git a/src/components/SearchPanel.vue b/src/components/SearchPanel.vue
new file mode 100644
index 0000000..a9a4854
--- /dev/null
+++ b/src/components/SearchPanel.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="fixed inset-0 z-50 flex items-start justify-center pt-20" @click="emit('close')">
+    <div class="w-[680px] max-w-[92vw] bg-white dark:bg-gray-800 dark:text-gray-100 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col max-h-[70vh]"
+         @click.stop>
+      <div class="flex items-center px-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        <Search class="w-4 h-4 text-gray-400 flex-shrink-0"/>
+        <input ref="inputRef"
+               v-model="query"
+               class="flex-1 px-2 py-2.5 text-sm bg-transparent focus:outline-none"
+               placeholder="在文件夹内搜索…"
+               @input="onInput"
+               @keydown.esc.prevent="emit('close')"/>
+        <span class="text-xs text-gray-400 flex-shrink-0">
+          {{ loading ? '搜索中…' : results.length ? `${results.length} 处 / ${groups.length} 文件` : '' }}
+        </span>
+      </div>
+
+      <!-- 替换行 -->
+      <div class="flex items-center px-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        <Replace class="w-4 h-4 text-gray-400 flex-shrink-0"/>
+        <input v-model="replacement"
+               class="flex-1 px-2 py-2.5 text-sm bg-transparent focus:outline-none"
+               placeholder="替换为…（大小写不敏感）"
+               @keydown.esc.prevent="emit('close')"/>
+        <button class="text-xs px-2 py-1 rounded bg-blue-500 hover:bg-blue-600 disabled:opacity-40 disabled:cursor-not-allowed text-white flex-shrink-0"
+                :disabled="replacing || results.length === 0"
+                :title="results.length ? `替换全部 ${results.length} 处` : '先搜索出结果'"
+                @click="replaceAll">
+          {{ replacing ? '替换中…' : '全部替换' }}
+        </button>
+      </div>
+
+      <div class="flex-1 overflow-y-auto">
+        <div v-if="!loading && query && results.length === 0" class="px-4 py-6 text-center text-sm text-gray-400">无匹配结果</div>
+
+        <div v-for="g in groups" :key="g.path">
+          <div class="sticky top-0 bg-gray-50 dark:bg-gray-900 px-3 py-1.5 text-xs text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-700 flex items-center gap-1">
+            <FileText class="w-3.5 h-3.5 text-gray-400"/>
+            <span class="font-medium text-gray-700 dark:text-gray-200">{{ g.name }}</span>
+            <span class="truncate">{{ g.dir }}</span>
+            <span class="ml-auto text-gray-400">{{ g.items.length }}</span>
+          </div>
+          <button v-for="m in g.items"
+                  :key="m.path + ':' + m.line"
+                  class="w-full flex items-baseline gap-2 px-3 py-1 text-left text-xs hover:bg-blue-50 dark:hover:bg-gray-700 cursor-pointer"
+                  @click="emit('open', m.path, m.line)">
+            <span class="text-gray-400 w-10 text-right flex-shrink-0">{{ m.line }}</span>
+            <span class="font-mono text-gray-700 dark:text-gray-200 truncate">{{ m.text.trim() }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, onMounted, ref} from 'vue'
+import {invoke} from '@tauri-apps/api/core'
+import {FileText, Replace, Search} from 'lucide-vue-next'
+import {useToast} from '../plugins/toast'
+
+interface Match
+{
+  path: string
+  line: number
+  text: string
+}
+
+const props = defineProps<{ rootDir: string }>()
+const emit = defineEmits<{
+  open: [path: string, line: number]
+  close: []
+  replaced: [paths: string[]]
+}>()
+
+const toast = useToast()
+
+const query = ref('')
+const replacement = ref('')
+const replacing = ref(false)
+const results = ref<Match[]>([])
+const loading = ref(false)
+const inputRef = ref<HTMLInputElement | null>(null)
+
+onMounted(() => inputRef.value?.focus())
+
+// 全部替换：确认后调用后端，完成后刷新搜索并通知刷新已打开文件
+const replaceAll = async () => {
+  const q = query.value.trim()
+  if (q.length < 2 || results.value.length === 0) {
+    return
+  }
+  const affected = Array.from(new Set(results.value.map(m => m.path)))
+  const ok = window.confirm(
+      `将把 ${results.value.length} 处「${q}」替换为「${replacement.value}」，涉及 ${affected.length} 个文件。\n此操作会直接写入磁盘且不可撤销，确定继续？`
+  )
+  if (!ok) {
+    return
+  }
+  replacing.value = true
+  try {
+    const summary = await invoke<{ files_changed: number, replacements: number }>('replace_in_files', {
+      root: props.rootDir,
+      query: q,
+      replacement: replacement.value
+    })
+    toast.success(`已替换 ${summary.replacements} 处，涉及 ${summary.files_changed} 个文件`)
+    emit('replaced', affected)
+    await search()
+  }
+  catch (error) {
+    toast.error('替换失败: ' + error)
+  }
+  finally {
+    replacing.value = false
+  }
+}
+
+const rel = (p: string) => p.startsWith(props.rootDir) ? p.slice(props.rootDir.length + 1) : p
+
+const groups = computed(() => {
+  const map = new Map<string, Match[]>()
+  for (const m of results.value) {
+    if (!map.has(m.path)) map.set(m.path, [])
+    map.get(m.path)!.push(m)
+  }
+  return Array.from(map.entries()).map(([path, items]) => {
+    const relPath = rel(path)
+    const name = relPath.split(/[\\/]/).pop() || relPath
+    const dir = relPath.slice(0, relPath.length - name.length).replace(/[\\/]$/, '')
+    return {path, name, dir, items}
+  })
+})
+
+let timer: any = null
+const search = async () => {
+  const q = query.value.trim()
+  // 至少 2 个字符，避免在大目录上做无意义的重搜索
+  if (q.length < 2) {
+    results.value = []
+    return
+  }
+  loading.value = true
+  try {
+    results.value = await invoke<Match[]>('search_in_files', {root: props.rootDir, query: q})
+  }
+  catch (error) {
+    console.error('搜索失败:', error)
+    results.value = []
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+const onInput = () => {
+  clearTimeout(timer)
+  timer = setTimeout(search, 300)
+}
+</script>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 724d171..967c607 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="flex flex-col h-full bg-gray-50 border-r border-gray-200">
-    <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 flex-shrink-0">
-      <span class="text-xs font-semibold text-gray-600 truncate uppercase">{{ rootName || '资源管理器' }}</span>
+  <div class="flex flex-col h-full bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
+    <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+      <span class="text-xs font-semibold text-gray-600 dark:text-gray-300 truncate uppercase">{{ rootName || '资源管理器' }}</span>
       <div class="flex items-center space-x-1">
-        <button class="p-1 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 cursor-pointer"
+        <button class="p-1 rounded text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer"
                 title="打开文件夹"
                 @click="emit('open-folder')">
           <FolderOpen class="w-4 h-4"/>
         </button>
         <button v-if="rootDir"
-                class="p-1 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 cursor-pointer"
+                class="p-1 rounded text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer"
                 title="刷新"
                 @click="loadRoot">
           <RefreshCw class="w-4 h-4"/>
@@ -28,7 +28,7 @@
           <p class="text-xs font-semibold text-gray-400 mb-1 px-1">最近打开</p>
           <button v-for="folder in recentFolders"
                   :key="folder"
-                  class="w-full flex items-center space-x-2 px-2 py-1 rounded text-left text-sm text-gray-600 hover:bg-gray-100 cursor-pointer"
+                  class="w-full flex items-center space-x-2 px-2 py-1 rounded text-left text-sm text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
                   :title="folder"
                   @click="emit('open-recent', folder)">
             <Folder class="w-4 h-4 text-blue-500 flex-shrink-0"/>
@@ -47,19 +47,19 @@
     <!-- 右键菜单 -->
     <div v-if="ctx.visible" class="fixed inset-0 z-40" @click="closeCtx" @contextmenu.prevent="closeCtx">
       <div ref="menuRef"
-           class="absolute bg-white rounded-md shadow-lg border border-gray-200 py-1 text-sm min-w-[150px]"
+           class="absolute bg-white dark:bg-gray-800 dark:text-gray-100 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 py-1 text-sm min-w-[150px]"
            :style="{ top: `${ctx.y}px`, left: `${ctx.x}px` }"
            @click.stop>
         <template v-if="!ctx.node || ctx.node.is_dir">
-          <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 cursor-pointer" @click="promptCreate('file')">新建文件</button>
-          <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 cursor-pointer" @click="promptCreate('folder')">新建文件夹</button>
+          <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="promptCreate('file')">新建文件</button>
+          <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="promptCreate('folder')">新建文件夹</button>
         </template>
         <template v-if="ctx.node">
-          <div v-if="!ctx.node || ctx.node.is_dir" class="border-t border-gray-100 my-1"></div>
-          <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 cursor-pointer" @click="promptRename">重命名</button>
-          <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 cursor-pointer text-red-600" @click="confirmDelete">删除</button>
-          <div class="border-t border-gray-100 my-1"></div>
-          <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 cursor-pointer" @click="reveal">在{{ revealLabel }}中显示</button>
+          <div v-if="!ctx.node || ctx.node.is_dir" class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
+          <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="promptRename">重命名</button>
+          <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-red-600" @click="confirmDelete">删除</button>
+          <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
+          <button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" @click="reveal">在{{ revealLabel }}中显示</button>
         </template>
       </div>
     </div>
@@ -112,6 +112,7 @@ const props = defineProps<{
   rootDir: string | null
   activePath?: string | null
   recentFolders?: string[]
+  gitStatus?: Record<string, string>
 }>()
 
 const emit = defineEmits<{
@@ -138,6 +139,8 @@ const toast = useToast()
 provide('treeOpenFile', (path: string) => emit('open-file', path))
 // 当前激活文件路径（用于文件树高亮选中项）
 provide('treeActivePath', computed(() => props.activePath ?? null))
+// Git 状态映射（绝对路径 → 状态字母），供文件树徽标
+provide('treeGitStatus', computed(() => props.gitStatus ?? {}))
 
 const loadRoot = async () => {
   if (!props.rootDir) {
diff --git a/src/components/setting/General.vue b/src/components/setting/General.vue
index 482265e..e0219e7 100644
--- a/src/components/setting/General.vue
+++ b/src/components/setting/General.vue
@@ -1,5 +1,16 @@
 <template>
   <div>
+    <!-- 外观 -->
+    <div class="mb-6">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
+        <Palette class="w-5 h-5 mr-2"/>
+        外观
+      </h3>
+      <Label label="主题">
+        <Select v-model="appTheme" class="w-1/3" :options="themeOptions" @change="onThemeChange"/>
+      </Label>
+    </div>
+
     <!-- 运行与文件 -->
     <div class="mb-6">
       <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -65,7 +76,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { Github, Info, Play } from 'lucide-vue-next'
+import { Github, Info, Palette, Play } from 'lucide-vue-next'
 import Button from '../../ui/Button.vue'
 import Label from '../../ui/Label.vue'
 import Input from '../../ui/Input.vue'
@@ -73,6 +84,7 @@ import Number from '../../ui/Number.vue'
 import Select from '../../ui/Select.vue'
 import { invoke } from '@tauri-apps/api/core'
 import { useToast } from '../../plugins/toast'
+import { useTheme, type AppTheme } from '../../composables/useTheme'
 
 const emit = defineEmits<{
   'settings-changed': [type: string, value: any]
@@ -80,6 +92,38 @@ const emit = defineEmits<{
 }>()
 
 const toast = useToast()
+const {setTheme} = useTheme()
+
+// 外观主题
+const appTheme = ref<AppTheme>('system')
+const themeOptions = [
+  {label: '跟随系统', value: 'system'},
+  {label: '浅色', value: 'light'},
+  {label: '深色', value: 'dark'}
+]
+
+const loadAppearance = async () => {
+  try {
+    const config = await invoke<any>('get_app_config')
+    const t = config?.theme
+    appTheme.value = (t === 'light' || t === 'dark') ? t : 'system'
+  }
+  catch {
+    appTheme.value = 'system'
+  }
+}
+
+const onThemeChange = async () => {
+  setTheme(appTheme.value)
+  try {
+    const config = await invoke<any>('get_app_config')
+    config.theme = appTheme.value
+    await invoke('update_app_config', {config})
+  }
+  catch (error) {
+    toast.error('保存主题失败: ' + error)
+  }
+}
 
 const githubToken = ref('')
 const originalGithubToken = ref('')
@@ -183,5 +227,6 @@ defineExpose({
 onMounted(async () => {
   await loadGithubConfig()
   await loadBehaviorConfig()
+  await loadAppearance()
 })
 </script>
diff --git a/src/composables/useCodeExecution.ts b/src/composables/useCodeExecution.ts
index 41b65d7..dc3bd70 100644
--- a/src/composables/useCodeExecution.ts
+++ b/src/composables/useCodeExecution.ts
@@ -27,10 +27,13 @@ export function useCodeExecution(toast: any)
         filePath?: string | null
         args?: string[]
         stdin?: string
+        env?: Record<string, string>
+        // 指定要运行的代码（如运行选中片段）；不传则运行编辑器全部内容
+        codeOverride?: string
     }
 
     const runCode = async (options: RunOptions) => {
-        const {language, envInstalled, envLanguage, filePath, args, stdin} = options
+        const {language, envInstalled, envLanguage, filePath, args, stdin, env, codeOverride} = options
         if (!envInstalled) {
             toast.error(`${ envLanguage } 环境未安装`)
             return
@@ -52,12 +55,13 @@ export function useCodeExecution(toast: any)
         try {
             const result: ExecutionResult = await invoke('execute_code', {
                 request: {
-                    code: code.value,
+                    code: codeOverride ?? code.value,
                     language,
                     task_id: taskId,
                     file_path: filePath || null,
                     args: args && args.length ? args : null,
-                    stdin: stdin ? stdin : null
+                    stdin: stdin ? stdin : null,
+                    env: env && Object.keys(env).length ? env : null
                 }
             })
 
diff --git a/src/composables/useCodeMirrorEditor.ts b/src/composables/useCodeMirrorEditor.ts
index 953f03a..0ea0da8 100644
--- a/src/composables/useCodeMirrorEditor.ts
+++ b/src/composables/useCodeMirrorEditor.ts
@@ -1,5 +1,6 @@
 import {nextTick, ref, watch} from 'vue'
 import {debounce} from 'lodash-es'
+import {useTheme} from './useTheme'
 import {python} from '@codemirror/lang-python'
 import {javascript} from '@codemirror/lang-javascript'
 import {go} from '@codemirror/lang-go'
@@ -75,6 +76,7 @@ import {useCodeMirrorFunctionHelp} from './useCodeMirrorFunctionHelp'
 import {useCodeMirrorSpaceOmission} from './useCodeMirrorSpaceOmission.ts'
 import {EditorView, keymap} from "@codemirror/view";
 import {useCodeMirrorFontFamily} from "./useCodeMirrorFontFamily.ts";
+import {diffGutterExtension} from "../editor/diffGutter";
 
 interface Props
 {
@@ -85,6 +87,7 @@ interface Props
 export function useCodeMirrorEditor(props: Props)
 {
     const toast = useToast()
+    const {isDark} = useTheme()
     const {showFunctionHelpHover, functionHelpTheme} = useCodeMirrorFunctionHelp()
 
     // 状态管理
@@ -285,9 +288,9 @@ export function useCodeMirrorEditor(props: Props)
     const updateExtensions = async (showLineNumbers?: boolean, showFunctionHelp?: boolean) => {
         const result = []
 
-        // 添加主题扩展
-        const themeExtension = getThemeExtension(editorConfig.value?.theme)
-        result.push(themeExtension)
+        // 添加主题扩展：暗色模式下使用深色编辑器主题
+        const themeName = isDark.value ? 'githubDark' : (editorConfig.value?.theme || 'githubLight')
+        result.push(getThemeExtension(themeName))
 
         // 添加函数帮助主题
         result.push(functionHelpTheme)
@@ -295,6 +298,9 @@ export function useCodeMirrorEditor(props: Props)
         // 字体缩放快捷键（搜索/替换、折叠、括号匹配等由 vue-codemirror 的 basicSetup 提供）
         result.push(fontSizeKeymap)
 
+        // Git 行内差异标记（标记数据由外部 dispatch 填充，无 git 时为空）
+        result.push(diffGutterExtension)
+
         // 设置字体
         const {fontFamilyTheme} = useCodeMirrorFontFamily(
             editorConfig.value?.font_family
@@ -409,6 +415,12 @@ export function useCodeMirrorEditor(props: Props)
         }
     }, {immediate: false})
 
+    // 跟随应用深色模式切换编辑器主题
+    // 仅更新扩展（vue-codemirror 会就地重配置），避免卸载重挂导致的白色闪烁
+    watch(isDark, async () => {
+        await updateExtensions()
+    })
+
     // 监听缩进配置变化
     watch(() => [editorConfig.value?.indent_with_tab, editorConfig.value?.tab_size], async () => {
         // 缩进配置变化时重新渲染
diff --git a/src/composables/useLanguageSettings.ts b/src/composables/useLanguageSettings.ts
index 0992419..dc7514a 100644
--- a/src/composables/useLanguageSettings.ts
+++ b/src/composables/useLanguageSettings.ts
@@ -2,9 +2,11 @@ import {computed, nextTick, ref, watch} from 'vue'
 import {ContainerIcon, FileIcon, PickaxeIcon, Settings2} from 'lucide-vue-next'
 import {usePluginConfig} from './usePluginConfig'
 import {useCodeMirrorEditor} from './useCodeMirrorEditor'
+import {useTheme} from './useTheme'
 
 export function useLanguageSettings(emit: any)
 {
+    const {isDark} = useTheme()
     const activeTab = ref('general')
     const pluginEnabledStates = ref<Record<string, boolean>>({})
 
@@ -80,8 +82,8 @@ export function useLanguageSettings(emit: any)
     const updateExtensions = async () => {
         const newExtensions = []
 
-        // 添加主题扩展
-        const themeExtension = getThemeExtension()
+        // 添加主题扩展：深色模式下使用深色编辑器主题
+        const themeExtension = getThemeExtension(isDark.value ? 'githubDark' : 'githubLight')
         newExtensions.push(themeExtension)
 
         // 添加语言扩展
@@ -113,6 +115,12 @@ export function useLanguageSettings(emit: any)
         console.log('Template changed:', newTemplate)
     }, {immediate: false})
 
+    // 跟随应用深色模式切换模板编辑器主题
+    // 仅更新扩展（vue-codemirror 就地重配置），避免卸载重挂的白色闪烁
+    watch(isDark, async () => {
+        await updateExtensions()
+    })
+
     const handlePluginToggle = async (language: string, enabled: boolean, _event: Event) => {
         if (!globalConfig.value) return
 
diff --git a/src/composables/useShortcuts.ts b/src/composables/useShortcuts.ts
index 09e54b9..a7a04f4 100644
--- a/src/composables/useShortcuts.ts
+++ b/src/composables/useShortcuts.ts
@@ -10,10 +10,15 @@ export interface ShortcutAction
 // 可自定义的快捷键动作及默认绑定（Mod = mac 上 ⌘，其他平台 Ctrl）
 export const SHORTCUT_ACTIONS: ShortcutAction[] = [
     {id: 'run', label: '运行代码', default: 'Mod+Enter'},
+    {id: 'runSelection', label: '运行选中片段', default: 'Mod+Shift+Enter'},
     {id: 'save', label: '保存文件', default: 'Mod+S'},
     {id: 'saveAs', label: '另存为', default: 'Mod+Shift+S'},
     {id: 'open', label: '打开文件', default: 'Mod+O'},
     {id: 'quickOpen', label: '快速打开文件', default: 'Mod+P'},
+    {id: 'commandPalette', label: '命令面板', default: 'Mod+Shift+P'},
+    {id: 'gotoLine', label: '跳转到行', default: 'Mod+G'},
+    {id: 'outline', label: '符号大纲', default: 'Mod+Shift+O'},
+    {id: 'searchInFiles', label: '文件夹内搜索', default: 'Mod+Shift+F'},
     {id: 'generate', label: 'AI 生成代码', default: 'Mod+K'},
     {id: 'newTab', label: '新建标签', default: 'Mod+N'},
     {id: 'closeTab', label: '关闭标签', default: 'Mod+W'},
diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
new file mode 100644
index 0000000..7e905b6
--- /dev/null
+++ b/src/composables/useTheme.ts
@@ -0,0 +1,62 @@
+import {ref} from 'vue'
+import {invoke} from '@tauri-apps/api/core'
+
+export type AppTheme = 'system' | 'light' | 'dark'
+
+const theme = ref<AppTheme>('system')
+// 实际应用的暗色状态（供编辑器等跟随）
+const isDark = ref(false)
+let media: MediaQueryList | null = null
+let mediaHandler: (() => void) | null = null
+
+const apply = () => {
+  let dark: boolean
+  if (theme.value === 'dark') {
+    dark = true
+  }
+  else if (theme.value === 'light') {
+    dark = false
+  }
+  else {
+    dark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  }
+  isDark.value = dark
+  document.documentElement.classList.toggle('dark', dark)
+}
+
+/**
+ * 应用外观主题（跟随系统 / 浅色 / 深色），并在"跟随系统"时监听系统切换。
+ */
+export function useTheme()
+{
+  const setTheme = (value: AppTheme) => {
+    theme.value = value
+    apply()
+  }
+
+  // 从后端配置加载并应用
+  const init = async () => {
+    try {
+      const config = await invoke<any>('get_app_config')
+      const t = config?.theme
+      theme.value = (t === 'light' || t === 'dark') ? t : 'system'
+    }
+    catch {
+      theme.value = 'system'
+    }
+    apply()
+
+    // 监听系统主题变化（仅"跟随系统"时生效）
+    if (!media) {
+      media = window.matchMedia('(prefers-color-scheme: dark)')
+      mediaHandler = () => {
+        if (theme.value === 'system') {
+          apply()
+        }
+      }
+      media.addEventListener('change', mediaHandler)
+    }
+  }
+
+  return {theme, isDark, setTheme, init, apply}
+}
diff --git a/src/editor/diffGutter.ts b/src/editor/diffGutter.ts
new file mode 100644
index 0000000..7c1cd6e
--- /dev/null
+++ b/src/editor/diffGutter.ts
@@ -0,0 +1,142 @@
+import {Decoration, DecorationSet, EditorView} from '@codemirror/view'
+import {StateEffect, StateField, RangeSetBuilder} from '@codemirror/state'
+
+export type LineKind = 'add' | 'mod'
+
+export interface DiffMarkers
+{
+    // 当前文档行号(1-based) → 标记类型
+    changed: Map<number, LineKind>
+    // 在这些行之前发生了删除（在行首显示红色小三角）
+    deleted: Set<number>
+}
+
+// 设置差异标记的 effect（由外部计算后派发）
+export const setDiffMarkers = StateEffect.define<DiffMarkers>()
+
+// 行装饰：在行左缘绘制彩色竖条（不新增 gutter 列，避免与行号列冲突）
+// 新增=绿、修改=琥珀；删除在相邻行底缘用琥珀虚线提示，避免绝对定位三角影响行高
+const addLine = Decoration.line({class: 'cm-diff-add'})
+const modLine = Decoration.line({class: 'cm-diff-mod'})
+const delLine = Decoration.line({class: 'cm-diff-del'})
+
+const buildSet = (state: any, data: DiffMarkers): DecorationSet => {
+    const lineCount = state.doc.lines
+    const builder = new RangeSetBuilder<Decoration>()
+    // 按行号升序写入，满足 RangeSetBuilder 的递增要求
+    for (let n = 1; n <= lineCount; n++) {
+        const from = state.doc.line(n).from
+        if (data.changed.has(n)) {
+            builder.add(from, from, data.changed.get(n) === 'add' ? addLine : modLine)
+        }
+        else if (data.deleted.has(n)) {
+            builder.add(from, from, delLine)
+        }
+    }
+    return builder.finish()
+}
+
+const diffField = StateField.define<DecorationSet>({
+    create: () => Decoration.none,
+    update(set, tr) {
+        // 文档变化时随之平移，下一次重算前位置不至错乱
+        set = set.map(tr.changes)
+        for (const e of tr.effects) {
+            if (e.is(setDiffMarkers)) {
+                set = buildSet(tr.state, e.value)
+            }
+        }
+        return set
+    },
+    provide: f => EditorView.decorations.from(f)
+})
+
+const diffTheme = EditorView.baseTheme({
+    // 左缘竖条：新增=绿、修改=琥珀、删除=红（提示其下方有内容被删除）
+    '.cm-diff-add': {boxShadow: 'inset 2px 0 0 0 #2ea043'},
+    '.cm-diff-mod': {boxShadow: 'inset 2px 0 0 0 #d29922'},
+    '.cm-diff-del': {boxShadow: 'inset 2px 0 0 0 #f85149'},
+})
+
+// 编辑器差异标记扩展（默认无标记，由外部 dispatch setDiffMarkers 填充）
+export const diffGutterExtension = [diffField, diffTheme]
+
+// 基于 LCS 的逐行差异，输出当前文档各行的标记
+export const computeDiffMarkers = (baseline: string, current: string): DiffMarkers => {
+    const a = baseline.length ? baseline.split('\n') : []
+    const b = current.length ? current.split('\n') : []
+    const n = a.length, m = b.length
+    const changed = new Map<number, LineKind>()
+    const deleted = new Set<number>()
+
+    // 空基线：全部视为新增
+    if (n === 0) {
+        for (let i = 1; i <= m; i++) {
+            changed.set(i, 'add')
+        }
+        return {changed, deleted}
+    }
+
+    // 超大文件不做精细 diff，避免 O(n*m)
+    if (n * m > 4_000_000) {
+        return {changed, deleted}
+    }
+
+    const dp: number[][] = Array.from({length: n + 1}, () => new Array(m + 1).fill(0))
+    for (let i = n - 1; i >= 0; i--) {
+        for (let j = m - 1; j >= 0; j--) {
+            dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1])
+        }
+    }
+
+    let i = 0, j = 0
+    let curLine = 0
+    let pendingDel = 0
+    const step = (op: 'same' | 'add' | 'del') => {
+        if (op === 'del') {
+            pendingDel++
+            return
+        }
+        if (op === 'add') {
+            curLine++
+            if (pendingDel > 0) {
+                changed.set(curLine, 'mod')
+                pendingDel--
+            }
+            else {
+                changed.set(curLine, 'add')
+            }
+            return
+        }
+        // same
+        curLine++
+        if (pendingDel > 0) {
+            deleted.add(curLine)
+            pendingDel = 0
+        }
+    }
+
+    while (i < n && j < m) {
+        if (a[i] === b[j]) {
+            step('same'); i++; j++
+        }
+        else if (dp[i + 1][j] >= dp[i][j + 1]) {
+            step('del'); i++
+        }
+        else {
+            step('add'); j++
+        }
+    }
+    while (i < n) {
+        step('del'); i++
+    }
+    while (j < m) {
+        step('add'); j++
+    }
+    // 文件末尾的删除：标记在最后一行
+    if (pendingDel > 0) {
+        deleted.add(curLine > 0 ? curLine : 1)
+    }
+
+    return {changed, deleted}
+}
diff --git a/src/style.css b/src/style.css
index fc37e65..e6a907e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,10 +1,17 @@
 @import "tailwindcss";
 
+/* 让 dark: 变体按 .dark 类触发（而非系统媒体查询），便于在设置中控制 */
+@custom-variant dark (&:where(.dark, .dark *));
+
 @layer base {
     body {
         @apply bg-gray-50 text-gray-900;
     }
 
+    .dark body {
+        @apply bg-gray-900 text-gray-100;
+    }
+
     ::-webkit-scrollbar {
         width: 8px;
         height: 8px;
diff --git a/src/ui/Input.vue b/src/ui/Input.vue
index e0ff6a0..da8b7e8 100644
--- a/src/ui/Input.vue
+++ b/src/ui/Input.vue
@@ -322,7 +322,7 @@ const inputClasses = computed(() => {
   const classes = [sizeConfig.value.input]
 
   // 基础样式
-  classes.push('bg-white border')
+  classes.push('bg-white dark:bg-gray-800 dark:text-gray-100 dark:border-gray-600 dark:placeholder:text-gray-500 border')
 
   // 变体样式
   switch (props.variant) {
diff --git a/src/ui/Number.vue b/src/ui/Number.vue
index dde30b1..5f61d17 100644
--- a/src/ui/Number.vue
+++ b/src/ui/Number.vue
@@ -322,7 +322,8 @@ const containerClasses = computed(() => [
   props.variant === 'filled' ? 'bg-gray-50 border border-gray-200 rounded-md' : '',
   props.variant === 'borderless' ? 'border-b' : '',
   props.disabled ? 'opacity-50 cursor-not-allowed' : '',
-  props.error ? 'border-red-500' : 'border-gray-300',
+  props.error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600',
+  'dark:text-gray-100',
   colorConfig.value.ring
 ])
 
diff --git a/src/ui/Select.vue b/src/ui/Select.vue
index 7a97ef5..6a4710d 100644
--- a/src/ui/Select.vue
+++ b/src/ui/Select.vue
@@ -10,13 +10,13 @@
             @keydown.arrow-down.prevent="openDropdown"
             @keydown.arrow-up.prevent="openDropdown"
             :class="[
-              'relative w-full cursor-pointer rounded-lg border bg-white px-4 py-2 pr-10 text-left transition-all duration-200',
+              'relative w-full cursor-pointer rounded-lg border bg-white dark:bg-gray-800 dark:text-gray-100 px-4 py-2 pr-10 text-left transition-all duration-200',
               // 根据状态动态应用边框样式
               isOpen && !disabled
                 ? 'border-blue-400 ring-blue-200' // 打开时显示蓝色
                 : disabled
-                  ? 'border-gray-300 ring-0 cursor-not-allowed bg-gray-50 text-gray-400' // 禁用状态
-                  : 'border-gray-300 ring-0 hover:border-blue-400 hover:ring-blue-200', // 默认和悬停状态
+                  ? 'border-gray-300 dark:border-gray-600 ring-0 cursor-not-allowed bg-gray-50 dark:bg-gray-700 text-gray-400' // 禁用状态
+                  : 'border-gray-300 dark:border-gray-600 ring-0 hover:border-blue-400 hover:ring-blue-200', // 默认和悬停状态
               ...buttonClasses
             ]"
             :disabled="disabled"
@@ -54,17 +54,17 @@
                   @after-leave="$emit('after-close')">
         <div v-show="isOpen"
              ref="dropdown"
-             class="fixed z-[99999] bg-white text-base shadow-lg ring-1 ring-blue-200 focus:outline-none rounded-md overflow-hidden"
+             class="fixed z-[99999] bg-white dark:bg-gray-800 dark:text-gray-100 text-base shadow-lg ring-1 ring-blue-200 dark:ring-gray-700 focus:outline-none rounded-md overflow-hidden"
              :class="dropdownClasses"
              :style="dropdownStyle"
              role="listbox"
              :aria-labelledby="buttonId">
 
           <!-- 搜索框 (可选) -->
-          <div v-if="searchable" class="p-2 border-b border-gray-100 bg-white">
+          <div v-if="searchable" class="p-2 border-b border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800">
             <input v-model="searchQuery"
                    type="text"
-                   class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
                    :placeholder="searchPlaceholder"
                    @click.stop
                    @keydown.stop
@@ -84,8 +84,8 @@
                       'relative flex my-1 space-x-3 items-center cursor-pointer select-none py-2 px-3 transition-colors duration-150',
                       isSelected(option)
                         ? 'bg-blue-400 text-white'
-                        : 'text-gray-900 hover:bg-blue-50',
-                      highlightedIndex === index ? 'bg-blue-100' : ''
+                        : 'text-gray-900 dark:text-gray-100 hover:bg-blue-50 dark:hover:bg-gray-700',
+                      highlightedIndex === index ? 'bg-blue-100 dark:bg-gray-700' : ''
                     ]"
                    :aria-selected="isSelected(option)"
                    role="option"
diff --git a/src/ui/Switch.vue b/src/ui/Switch.vue
index b1e15fb..47b28d5 100644
--- a/src/ui/Switch.vue
+++ b/src/ui/Switch.vue
@@ -162,32 +162,32 @@ const colorConfig = computed(() => {
   const configs = {
     primary: {
       checked: 'bg-blue-600',
-      unchecked: 'bg-gray-200',
+      unchecked: 'bg-gray-200 dark:bg-gray-600',
       focus: 'focus:ring-blue-500'
     },
     success: {
       checked: 'bg-green-600',
-      unchecked: 'bg-gray-200',
+      unchecked: 'bg-gray-200 dark:bg-gray-600',
       focus: 'focus:ring-green-500'
     },
     warning: {
       checked: 'bg-yellow-500',
-      unchecked: 'bg-gray-200',
+      unchecked: 'bg-gray-200 dark:bg-gray-600',
       focus: 'focus:ring-yellow-500'
     },
     danger: {
       checked: 'bg-red-600',
-      unchecked: 'bg-gray-200',
+      unchecked: 'bg-gray-200 dark:bg-gray-600',
       focus: 'focus:ring-red-500'
     },
     info: {
       checked: 'bg-cyan-600',
-      unchecked: 'bg-gray-200',
+      unchecked: 'bg-gray-200 dark:bg-gray-600',
       focus: 'focus:ring-cyan-500'
     },
     secondary: {
       checked: 'bg-gray-600',
-      unchecked: 'bg-gray-200',
+      unchecked: 'bg-gray-200 dark:bg-gray-600',
       focus: 'focus:ring-gray-500'
     }
   }
diff --git a/src/utils/ansi.ts b/src/utils/ansi.ts
new file mode 100644
index 0000000..b419b91
--- /dev/null
+++ b/src/utils/ansi.ts
@@ -0,0 +1,69 @@
+// 轻量 ANSI SGR → HTML（支持 16 色 + 加粗，自带 HTML 转义，规避 XSS）
+
+const FG: Record<number, string> = {
+  30: '#3b4048', 31: '#e06c75', 32: '#98c379', 33: '#e5c07b',
+  34: '#61afef', 35: '#c678dd', 36: '#56b6c2', 37: '#dcdfe4',
+  90: '#5c6370', 91: '#e06c75', 92: '#98c379', 93: '#e5c07b',
+  94: '#61afef', 95: '#c678dd', 96: '#56b6c2', 97: '#ffffff'
+}
+
+const BG: Record<number, string> = {
+  40: '#3b4048', 41: '#e06c75', 42: '#98c379', 43: '#e5c07b',
+  44: '#61afef', 45: '#c678dd', 46: '#56b6c2', 47: '#dcdfe4',
+  100: '#5c6370', 101: '#e06c75', 102: '#98c379', 103: '#e5c07b',
+  104: '#61afef', 105: '#c678dd', 106: '#56b6c2', 107: '#ffffff'
+}
+
+const ESC = String.fromCharCode(27)
+// 匹配 SGR 转义序列 ESC[...m（以 ESC 开头，避免误匹配普通文本中的 [..m）
+const SGR = new RegExp(ESC + '\\[([0-9;]*)m', 'g')
+
+const escapeHtml = (s: string) =>
+    s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+
+export function ansiToHtml(input: string): string {
+  if (!input) {
+    return ''
+  }
+  let fg: string | null = null
+  let bg: string | null = null
+  let bold = false
+  let result = ''
+
+  const flush = (text: string) => {
+    if (!text) {
+      return
+    }
+    const styles: string[] = []
+    if (fg) styles.push(`color:${fg}`)
+    if (bg) styles.push(`background:${bg}`)
+    if (bold) styles.push('font-weight:600')
+    result += styles.length
+        ? `<span style="${styles.join(';')}">${escapeHtml(text)}</span>`
+        : escapeHtml(text)
+  }
+
+  SGR.lastIndex = 0
+  let last = 0
+  let m: RegExpExecArray | null
+  while ((m = SGR.exec(input)) !== null) {
+    flush(input.slice(last, m.index))
+    last = SGR.lastIndex
+    const codes = m[1] === '' ? [0] : m[1].split(';').map(Number)
+    for (const c of codes) {
+      if (c === 0 || Number.isNaN(c)) {
+        fg = null
+        bg = null
+        bold = false
+      }
+      else if (c === 1) bold = true
+      else if (c === 22) bold = false
+      else if (c === 39) fg = null
+      else if (c === 49) bg = null
+      else if (FG[c]) fg = FG[c]
+      else if (BG[c]) bg = BG[c]
+    }
+  }
+  flush(input.slice(last))
+  return result
+}