From 135e465b164dd45f749ae3e2819ac532ad6e2f49 Mon Sep 17 00:00:00 2001 From: Yuhang Wu Date: Wed, 28 Oct 2026 10:55:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=B3=BB=E7=BB=9F?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E8=B7=9F=E9=9A=8F=E3=80=81=E7=AA=97=E5=8F=A3?= =?UTF-8?q?=E9=81=AE=E7=BD=A9=E5=92=8C=E8=BF=90=E8=A1=8C=E6=97=A5=E5=BF=97?= =?UTF-8?q?=E6=8C=81=E4=B9=85=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增系统主题模式，支持跟随操作系统明暗主题 - 添加窗口背景遮罩组件，可调节透明度改善对比度 - 实现 Frpc 运行日志按日期持久化到 logs 目录 - 优化侧边栏收起时的系统资源显示样式 - 新增中英文界面的相关翻译文本 - 实现系统资源统计的共享复用，避免重复请求 --- docs/FrpcPilot开发提示词.md | 13 ++ package.json | 2 +- src-tauri/src/commands/runner.rs | 13 +- src-tauri/src/services/runner.rs | 207 ++++++++++++++++++------ src-tauri/src/services/storage.rs | 5 +- src-tauri/src/services/storage_tests.rs | 1 + src/assets/main.css | 41 +++-- src/composables/useSystemStats.ts | 8 +- src/i18n/locales/en-US.json | 7 +- src/i18n/locales/zh-CN.json | 7 +- src/layout/aside/Aside.vue | 78 ++++++++- src/stores/app.ts | 35 ++-- src/views/setting/Appearance.vue | 99 ++++++++++-- 13 files changed, 419 insertions(+), 97 deletions(-) diff --git a/docs/FrpcPilot开发提示词.md b/docs/FrpcPilot开发提示词.md index a0cb106..8fda979 100644 --- a/docs/FrpcPilot开发提示词.md +++ b/docs/FrpcPilot开发提示词.md @@ -324,6 +324,10 @@ const toggleCollapsed = () => { - 不需要做持久化缓存，只需要在应用运行时生效即可 - 应用运行时只有在第一次进入Frpc下载页面的时候采取请求GitHub，后面再切换回Frpc下载页面的时候，因为缓存了组件，所以不必再次获取GitHub，需要刷新的时候由用户手动点击刷新按钮 +#### 3.11 自定义背景 + +外面的背景图片，增加一个自定义，由用户自己选择图片并设置为背景图片，自定义的图片需要保证下次打开软件仍然是这个背景，可以使用Antdv里面的上传组件，或者你有更好的方案可以替换也可以 + ### 4. 修改 #### 4.1 项目名称修改 @@ -359,3 +363,12 @@ const toggleCollapsed = () => { - 迁移脚本需要考虑不同操作系统之间的差别 - 或许可以考虑直接把之前的数据目录直接剪切到安装所在目录里面 - 数据迁移之后需要保证功能和已配置的服务器、隧道可以正常启动 + +#### 4.4 页面UI修改 + +- 左侧导航栏里面的CPU和内存占用，在菜单栏折叠起来之后，要显示；目前是鼠标放上去之后才显示，需要改成在折叠之后的菜单栏里面显示，上面显示CPU占用，下面显示内存占用。具体表现为：CPU：换行显示百分比，换行，内存：换行显示百分比，换行，状态。也可以不要CPU：和内存：，只显示百分比，字体可以小一点，但是主要的是占用百分比 +- CPU和内存占用增加一个缓存，现在存在一个问题是仪表盘页面每次进入都会重新去获取CPU和内存占用，会有1-2s的等待仪表盘页面才显示CPU和内存占用，现在可以增加一个缓存，保持跟左侧菜单栏里面同步 +- 外观设置里面的背景图片，默认的背景颜色，使用ui-ux-pro-max重新设计一个，不要AI常用的渐变色，同时需要主题明暗主题下的不同 + - 整体窗口增加一个适应明暗主题变化的一个遮罩，大小是整个窗口的大小，因为目前存在一点问题是有些背景图片的一部分区域的颜色跟顶部栏的操作图标过于接近，导致视觉效果不佳，我想增加一个遮罩来减少一部分影响，遮罩要随明暗主题有反差，确保顶部栏图标的视觉效果，而且遮罩的透明度需要在外观设置里面可以单独调节 + - 明暗主题切换增加一个跟随系统 +- 运行日志持久化写入运行目录所在的logs目录里面 diff --git a/package.json b/package.json index 72a95fc..ad36605 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frpcpilot", "private": true, - "version": "1.4.1", + "version": "1.5.0", "type": "module", "scripts": { "dev": "vite", diff --git a/src-tauri/src/commands/runner.rs b/src-tauri/src/commands/runner.rs index c56b81c..51bfa2f 100644 --- a/src-tauri/src/commands/runner.rs +++ b/src-tauri/src/commands/runner.rs @@ -5,6 +5,7 @@ use std::path::PathBuf; +use chrono::Local; use sqlx::SqlitePool; use tauri::{AppHandle, Manager, State}; use tauri_helper::auto_collect_command; @@ -152,7 +153,17 @@ pub async fn start_frpc( // 5. 启动 frpc 进程 let config_path_str = config_path.to_string_lossy().to_string(); - match runner.spawn(&app, &frpc_path, &config_path_str, &download.version) { + let paths = app.state::(); + let log_path = paths + .logs() + .join(format!("frpc-{}.log", Local::now().format("%Y-%m-%d"))); + match runner.spawn( + &app, + &frpc_path, + &config_path_str, + &download.version, + &log_path, + ) { Ok(status) => Ok(ApiResponse::success(status)), Err(e) => Ok(ApiResponse::error(500, &e)), } diff --git a/src-tauri/src/services/runner.rs b/src-tauri/src/services/runner.rs index 0626336..f8d7b63 100644 --- a/src-tauri/src/services/runner.rs +++ b/src-tauri/src/services/runner.rs @@ -6,7 +6,8 @@ //! - stdout / stderr 通过管道读取，按行解析后以 `frpc-log` 事件实时推送给前端； //! - 后台守护线程轮询子进程状态，退出时推送 `frpc-exit` 事件。 -use std::io::{BufRead, BufReader, Read}; +use std::fs::{File, OpenOptions}; +use std::io::{BufRead, BufReader, Read, Write}; use std::path::Path; use std::process::{Child, Command, Stdio}; use std::sync::atomic::{AtomicU64, Ordering}; @@ -14,6 +15,7 @@ use std::sync::{Arc, Mutex, MutexGuard}; use std::thread; use std::time::Duration; +use chrono::Local; use tauri::{AppHandle, Emitter}; use crate::models::{FrpcExitEvent, FrpcLogEvent, FrpcStatus}; @@ -23,6 +25,8 @@ pub const LOG_EVENT: &str = "frpc-log"; /// 进程退出事件名 pub const EXIT_EVENT: &str = "frpc-exit"; +type SharedLogFile = Arc>; + /// 守护线程轮询间隔 const POLL_INTERVAL: Duration = Duration::from_millis(250); @@ -34,6 +38,7 @@ struct Running { version: String, frpc_path: String, config_path: String, + log_file: SharedLogFile, } /// Frpc 进程管理器（应用级单例） @@ -78,6 +83,7 @@ impl FrpcRunner { frpc_path: &str, config_path: &str, version: &str, + log_path: &Path, ) -> Result { let mut guard = self.lock(); if guard.is_some() { @@ -89,6 +95,14 @@ impl FrpcRunner { return Err(format!("未找到 frpc 可执行文件：{frpc_path}")); } + let log_file = Arc::new(Mutex::new( + OpenOptions::new() + .create(true) + .append(true) + .open(log_path) + .map_err(|e| format!("无法打开运行日志 {}：{e}", log_path.display()))?, + )); + let mut command = Command::new(exe); command .arg("-c") @@ -126,21 +140,22 @@ impl FrpcRunner { version: version.to_string(), frpc_path: frpc_path.to_string(), config_path: config_path.to_string(), + log_file: log_file.clone(), }); drop(guard); // 采集 stdout / stderr if let Some(stdout) = stdout { - spawn_reader(app.clone(), stdout, "stdout"); + spawn_reader(app.clone(), stdout, "stdout", log_file.clone()); } if let Some(stderr) = stderr { - spawn_reader(app.clone(), stderr, "stderr"); + spawn_reader(app.clone(), stderr, "stderr", log_file.clone()); } // 守护线程：轮询子进程是否退出 spawn_waiter(app.clone(), self.slot.clone(), token); - emit_log( + emit_persisted_log( app, FrpcLogEvent { time: None, @@ -148,6 +163,7 @@ impl FrpcRunner { source: "system".to_string(), message: format!("Frpc {version} 已启动（PID {pid}）"), }, + Some(&log_file), ); Ok(self.status()) @@ -160,7 +176,9 @@ impl FrpcRunner { return Ok(FrpcStatus::default()); } - emit_log( + let log_file = guard.as_ref().map(|running| running.log_file.clone()); + + emit_persisted_log( app, FrpcLogEvent { time: None, @@ -168,6 +186,7 @@ impl FrpcRunner { source: "system".to_string(), message: "正在停止 Frpc…".to_string(), }, + log_file.as_ref(), ); let version = { @@ -181,7 +200,7 @@ impl FrpcRunner { *guard = None; drop(guard); - emit_log( + emit_persisted_log( app, FrpcLogEvent { time: None, @@ -189,6 +208,7 @@ impl FrpcRunner { source: "system".to_string(), message: "Frpc 已停止".to_string(), }, + log_file.as_ref(), ); emit_exit( app, @@ -208,13 +228,27 @@ impl FrpcRunner { if let Some(running) = guard.as_mut() { let _ = running.child.kill(); let _ = running.child.wait(); + persist_log( + &running.log_file, + &FrpcLogEvent { + time: None, + level: "WARN".to_string(), + source: "system".to_string(), + message: "FrpcPilot 正在退出，Frpc 已停止".to_string(), + }, + ); } *guard = None; } } /// 持续读取子进程输出并推送日志事件 -fn spawn_reader(app: AppHandle, pipe: R, source: &'static str) { +fn spawn_reader( + app: AppHandle, + pipe: R, + source: &'static str, + log_file: SharedLogFile, +) { thread::spawn(move || { let mut reader = BufReader::new(pipe); let mut buf: Vec = Vec::new(); @@ -228,7 +262,7 @@ fn spawn_reader(app: AppHandle, pipe: R, source: &'sta if line.trim().is_empty() { continue; } - emit_log(&app, parse_line(source, &line)); + emit_persisted_log(&app, parse_line(source, &line), Some(&log_file)); } Err(_) => break, } @@ -238,48 +272,58 @@ fn spawn_reader(app: AppHandle, pipe: R, source: &'sta /// 守护线程：轮询子进程状态，退出时清理并推送事件 fn spawn_waiter(app: AppHandle, slot: Arc>>, token: u64) { - thread::spawn(move || loop { - thread::sleep(POLL_INTERVAL); + thread::spawn(move || { + loop { + thread::sleep(POLL_INTERVAL); - let mut guard = slot.lock().unwrap_or_else(|e| e.into_inner()); - let probe = match guard.as_mut() { - Some(running) if running.token == token => { - Some((running.child.try_wait(), running.version.clone())) - } - // 已被停止 / 已被新进程替换 - _ => None, - }; + let mut guard = slot.lock().unwrap_or_else(|e| e.into_inner()); + let probe = match guard.as_mut() { + Some(running) if running.token == token => Some(( + running.child.try_wait(), + running.version.clone(), + running.log_file.clone(), + )), + // 已被停止 / 已被新进程替换 + _ => None, + }; - match probe { - None => return, - Some((Ok(Some(status)), version)) => { - *guard = None; - drop(guard); - let code = status.code(); - emit_log( - &app, - FrpcLogEvent { - time: None, - level: if code.unwrap_or(1) == 0 { "WARN" } else { "ERROR" }.to_string(), - source: "system".to_string(), - message: match code { - Some(code) => format!("Frpc 进程已退出（退出码 {code}）"), - None => "Frpc 进程已退出".to_string(), + match probe { + None => return, + Some((Ok(Some(status)), version, log_file)) => { + *guard = None; + drop(guard); + let code = status.code(); + emit_persisted_log( + &app, + FrpcLogEvent { + time: None, + level: if code.unwrap_or(1) == 0 { + "WARN" + } else { + "ERROR" + } + .to_string(), + source: "system".to_string(), + message: match code { + Some(code) => format!("Frpc 进程已退出（退出码 {code}）"), + None => "Frpc 进程已退出".to_string(), + }, }, - }, - ); - emit_exit( - &app, - FrpcExitEvent { - reason: "exited".to_string(), - code, - version: Some(version), - }, - ); - return; + Some(&log_file), + ); + emit_exit( + &app, + FrpcExitEvent { + reason: "exited".to_string(), + code, + version: Some(version), + }, + ); + return; + } + Some((Ok(None), _, _)) => {} // 仍在运行 + Some((Err(_), _, _)) => return, } - Some((Ok(None), _)) => {} // 仍在运行 - Some((Err(_), _)) => return, } }); } @@ -393,6 +437,27 @@ fn emit_log(app: &AppHandle, event: FrpcLogEvent) { let _ = app.emit(LOG_EVENT, event); } +fn emit_persisted_log(app: &AppHandle, event: FrpcLogEvent, log_file: Option<&SharedLogFile>) { + if let Some(log_file) = log_file { + persist_log(log_file, &event); + } + emit_log(app, event); +} + +fn persist_log(log_file: &SharedLogFile, event: &FrpcLogEvent) { + let timestamp = Local::now().format("%Y-%m-%d %H:%M:%S"); + let mut file = log_file.lock().unwrap_or_else(|error| error.into_inner()); + if let Err(error) = writeln!( + file, + "{timestamp} [{}] [{}] {}", + event.level, event.source, event.message + ) + .and_then(|()| file.flush()) + { + eprintln!("Failed to persist Frpc runtime log: {error}"); + } +} + /// 发送退出事件 fn emit_exit(app: &AppHandle, event: FrpcExitEvent) { let _ = app.emit(EXIT_EVENT, event); @@ -404,8 +469,14 @@ mod tests { #[test] fn detects_log_level() { - assert_eq!(detect_level("2026/06/18 22:02:03 [I] [root.go:200] ok"), "INFO"); - assert_eq!(detect_level("2026/06/18 22:02:03 [E] [root.go:200] bad"), "ERROR"); + assert_eq!( + detect_level("2026/06/18 22:02:03 [I] [root.go:200] ok"), + "INFO" + ); + assert_eq!( + detect_level("2026/06/18 22:02:03 [E] [root.go:200] bad"), + "ERROR" + ); assert_eq!(detect_level("[W] warn only"), "WARN"); assert_eq!(detect_level("plain message"), "INFO"); } @@ -419,6 +490,46 @@ mod tests { assert_eq!(extract_time("no time here"), None); } + #[test] + fn persists_runtime_log_lines() { + let path = std::env::temp_dir().join(format!( + "frpcpilot-runtime-log-{}-{}.log", + std::process::id(), + Local::now().timestamp_millis() + )); + let file = OpenOptions::new() + .create(true) + .append(true) + .open(&path) + .unwrap(); + let log_file = Arc::new(Mutex::new(file)); + + persist_log( + &log_file, + &FrpcLogEvent { + time: None, + level: "INFO".to_string(), + source: "system".to_string(), + message: "started".to_string(), + }, + ); + persist_log( + &log_file, + &FrpcLogEvent { + time: None, + level: "ERROR".to_string(), + source: "stderr".to_string(), + message: "connection failed".to_string(), + }, + ); + drop(log_file); + + let contents = std::fs::read_to_string(&path).unwrap(); + std::fs::remove_file(path).unwrap(); + assert!(contents.contains("[INFO] [system] started")); + assert!(contents.contains("[ERROR] [stderr] connection failed")); + } + #[test] fn strips_ansi_escape_codes() { let input = "\u{1b}[1;34m2026-10-13 17:19:48.171 [I] hello\u{1b}[0m"; diff --git a/src-tauri/src/services/storage.rs b/src-tauri/src/services/storage.rs index 52abeea..5d40130 100644 --- a/src-tauri/src/services/storage.rs +++ b/src-tauri/src/services/storage.rs @@ -45,6 +45,9 @@ impl StoragePaths { pub fn run(&self) -> PathBuf { self.root.join("run") } + pub fn logs(&self) -> PathBuf { + self.root.join("logs") + } pub fn webview(&self) -> PathBuf { self.root.join("webview") } @@ -125,7 +128,7 @@ pub async fn initialize(paths: &StoragePaths) -> Result<(SqlitePool, StorageLock paths.run(), paths.webview(), paths.root.join("cache"), - paths.root.join("logs"), + paths.logs(), paths.root.join("tmp"), ] { fs::create_dir_all(&dir).map_err(|e| format!("无法创建 {}：{e}", dir.display()))?; diff --git a/src-tauri/src/services/storage_tests.rs b/src-tauri/src/services/storage_tests.rs index 1ee86ee..4f24575 100644 --- a/src-tauri/src/services/storage_tests.rs +++ b/src-tauri/src/services/storage_tests.rs @@ -64,6 +64,7 @@ fn fresh_install_and_exclusive_storage_lock() { let (pool, lock) = initialize(&paths).await.unwrap(); assert!(paths.db().is_file()); assert!(paths.run().is_dir()); + assert!(paths.logs().is_dir()); assert!(paths.versions().is_dir()); assert!(initialize(&paths).await.is_err()); pool.close().await; diff --git a/src/assets/main.css b/src/assets/main.css index a1d9060..38ad7a7 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,6 +1,6 @@ @import 'tailwindcss'; -/* 使用 class 方式控制暗色模式（配合 @vueuse/core 的 useDark） */ +/* 使用 class 方式控制暗色模式 */ @custom-variant dark (&:where(.dark, .dark *)); html, @@ -11,7 +11,7 @@ body, padding: 0; } -/* 窗口背景色与渐变（供 html / #app 复用，避免重复定义） */ +/* 窗口纯色背景与磨砂透明度 */ :root { /* 全局文字颜色：普通 HTML 文本继承使用（Antd 组件由 CSS-in-JS 自行着色，不受影响） */ --app-text-color: rgba(15, 23, 42, 0.88); @@ -19,20 +19,13 @@ body, --app-card-alpha: 0.45; --app-card-alpha-hover: 0.62; --app-modal-alpha: 0.62; - --app-bg-color: #eef2ff; - --app-bg-gradient: - radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.28), transparent 60%), - radial-gradient(1000px 500px at 110% 10%, rgba(34, 211, 238, 0.28), transparent 55%), - linear-gradient(160deg, #eef2ff 0%, #f8fafc 45%, #eef7ff 100%); + --app-background-overlay-alpha: 0.18; + --app-bg-color: #e9edef; } html.dark { --app-text-color: rgba(226, 232, 240, 0.92); - --app-bg-color: #0b1220; - --app-bg-gradient: - radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.35), transparent 60%), - radial-gradient(1000px 500px at 110% 10%, rgba(14, 165, 233, 0.28), transparent 55%), - linear-gradient(160deg, #0b1220 0%, #0f172a 45%, #111827 100%); + --app-bg-color: #151c1d; } /* @@ -43,7 +36,6 @@ html.dark { */ html { background-color: var(--app-bg-color); - background-image: var(--app-bg-gradient); background-repeat: no-repeat; } @@ -71,8 +63,9 @@ html.is-macos #app { inset: 0; border-radius: 8px; overflow: hidden; + position: relative; + isolation: isolate; background-color: var(--app-bg-color); - background-image: var(--app-bg-gradient); background-repeat: no-repeat; } @@ -113,10 +106,30 @@ body { /* 窗口圆角固定 8px，与 Windows 11 系统默认圆角保持一致 */ #app { + position: relative; + isolation: isolate; border-radius: 8px; overflow: hidden; } +#app::before { + position: fixed; + z-index: 0; + inset: 0; + background: rgba(255, 255, 255, var(--app-background-overlay-alpha)); + content: ""; + pointer-events: none; +} + +.dark #app::before { + background: rgba(0, 0, 0, var(--app-background-overlay-alpha)); +} + +#app > * { + position: relative; + z-index: 1; +} + /* 悬浮磨砂玻璃面板 */ .glass-panel { border-radius: 16px; diff --git a/src/composables/useSystemStats.ts b/src/composables/useSystemStats.ts index 1c82be0..de0ece8 100644 --- a/src/composables/useSystemStats.ts +++ b/src/composables/useSystemStats.ts @@ -1,5 +1,6 @@ import { getSystemInfo } from "@/api/system" import { isTauri } from "@/utils/window" +import { createSharedComposable } from "@vueuse/core" /** * 系统资源占用（CPU / 内存 百分比）。 @@ -7,7 +8,7 @@ import { isTauri } from "@/utils/window" * 调用后端命令 `get_system_info`（返回 `ApiResponse<{ cpu, memory }>`）， * 在非 Tauri 环境或后端不可用时回退到模拟数据，保证界面可用。 */ -export function useSystemStats(interval = 2000) { +const useSharedSystemStats = createSharedComposable((interval: number) => { const cpu = ref(0) const memory = ref(0) const isMock = ref(true) @@ -41,4 +42,9 @@ export function useSystemStats(interval = 2000) { const { pause, resume } = useIntervalFn(refresh, interval, { immediate: true }) return { cpu, memory, isMock, refresh, pause, resume } +}) + +/** 所有页面共享同一份指标缓存与轮询，路由切换时不会重新请求。 */ +export function useSystemStats(interval = 2000) { + return useSharedSystemStats(interval) } diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 625a924..1c735ca 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -121,11 +121,16 @@ "title": "Appearance", "subtitle": "Customize the theme mode and window background", "themeMode": "Theme mode", - "themeModeTip": "Switch between light and dark mode", + "themeModeTip": "Choose light, dark, or follow your operating system", "light": "Light", "dark": "Dark", + "system": "System", "background": "Background image", "backgroundTip": "Pick an image as the window background. It keeps its original aspect ratio and is never stretched.", + "backgroundOverlay": "Window background overlay", + "backgroundOverlayTip": "Apply a theme-aware overlay across the window to improve contrast with title bar icons.", + "overlayTransparency": "Overlay transparency", + "backgroundOverlayPreview": "Title bar icon preview", "none": "Default", "bg1": "Background 1", "bg2": "Background 2", diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json index 9c590e3..a7ba995 100644 --- a/src/i18n/locales/zh-CN.json +++ b/src/i18n/locales/zh-CN.json @@ -121,11 +121,16 @@ "title": "外观设置", "subtitle": "自定义窗口的主题模式与背景图片", "themeMode": "主题模式", - "themeModeTip": "切换窗口的明暗显示模式", + "themeModeTip": "选择浅色、深色或跟随操作系统主题", "light": "浅色", "dark": "深色", + "system": "跟随系统", "background": "背景图片", "backgroundTip": "选择一张图片作为窗口背景，图片保持原始比例自适应，不会变形拉伸", + "backgroundOverlay": "窗口背景遮罩", + "backgroundOverlayTip": "为整个窗口叠加随主题变化的遮罩，改善背景与顶部栏图标的对比度", + "overlayTransparency": "遮罩透明度", + "backgroundOverlayPreview": "顶部栏图标预览", "none": "默认", "bg1": "背景一", "bg2": "背景二", diff --git a/src/layout/aside/Aside.vue b/src/layout/aside/Aside.vue index c66578d..0f71289 100644 --- a/src/layout/aside/Aside.vue +++ b/src/layout/aside/Aside.vue @@ -40,11 +40,27 @@ - -
- +
+
+ CPU + {{ cpu }}% +
- +
+ MEM + {{ memory }}% + +
+
+ + {{ statusText }} +
+
@@ -228,6 +244,60 @@ const statusText = computed(() => { border-color: rgba(15, 23, 42, 0.08); } +.collapsed-system-stats { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: 2px 0 4px; + outline: none; +} + +.collapsed-system-metric { + display: flex; + width: 100%; + flex-direction: column; + align-items: center; + gap: 1px; + line-height: 1.2; +} + +.collapsed-system-label { + font-size: 9px; + opacity: 0.62; +} + +.collapsed-system-value { + font-size: 12px; + font-weight: 600; + font-variant-numeric: tabular-nums; +} + +.collapsed-system-track { + width: 38px; + height: 2px; + overflow: hidden; + border-radius: 999px; + background: rgba(100, 116, 139, 0.2); + + > span { + display: block; + height: 100%; + transition: width 200ms ease; + } +} + +.collapsed-system-status { + display: flex; + max-width: 100%; + align-items: center; + justify-content: center; + gap: 4px; + font-size: 9px; + line-height: 1.2; + opacity: 0.8; +} + .dark .system-panel { border-color: rgba(255, 255, 255, 0.08); } diff --git a/src/stores/app.ts b/src/stores/app.ts index 2003b54..daabbf3 100644 --- a/src/stores/app.ts +++ b/src/stores/app.ts @@ -11,6 +11,7 @@ import { /** Frpc 运行状态 */ export type RunStatus = "running" | "error" | "stopped" +export type ThemeMode = "light" | "dark" | "system" /** * 全局应用配置：语言、主题、窗口背景、Frpc 运行状态 @@ -21,16 +22,27 @@ export const useAppStore = defineStore("app", () => { const sidebarCollapsed = useStorage("frpcpilot:sidebar-collapsed", false, preferences) - // 明暗主题：useDark 会在 上切换 .dark 类名 - const isDark = useDark({ - storage: preferences, - storageKey: "frpcpilot:theme", - selector: "html", - attribute: "class", - valueDark: "dark", - valueLight: "", + // 兼容旧版保存的 "dark" / 空浅色值，并支持跟随操作系统主题。 + const themePreference = useStorage("frpcpilot:theme", "system", preferences) + const preferredDark = usePreferredDark() + const themeMode = computed({ + get: () => { + if (themePreference.value === "dark" || themePreference.value === "system") return themePreference.value + return "light" + }, + set: (value) => { themePreference.value = value }, + }) + const isDark = computed({ + get: () => themeMode.value === "dark" || (themeMode.value === "system" && preferredDark.value), + set: (value: boolean) => { themeMode.value = value ? "dark" : "light" }, + }) + function toggleDark() { + themeMode.value = isDark.value ? "light" : "dark" + } + + watchEffect(() => { + document.documentElement.classList.toggle("dark", isDark.value) }) - const toggleDark = useToggle(isDark) // 窗口背景图片（持久化） const background = useStorage("frpcpilot:background", DEFAULT_BACKGROUND, preferences) @@ -52,6 +64,7 @@ export const useAppStore = defineStore("app", () => { // 磨砂玻璃透明度（0 - 100，数值越大越透明，持久化） const cardTransparency = useStorage("frpcpilot:card-transparency", 55, preferences) const modalTransparency = useStorage("frpcpilot:modal-transparency", 38, preferences) + const backgroundOverlayTransparency = useStorage("frpcpilot:background-overlay-transparency", 82, preferences) /** 透明度百分比 → 背景 alpha（越大越透明，alpha 越小；并做范围兜底） */ function alphaFromTransparency(value: number) { @@ -61,6 +74,7 @@ export const useAppStore = defineStore("app", () => { const cardAlpha = computed(() => alphaFromTransparency(cardTransparency.value)) const modalAlpha = computed(() => alphaFromTransparency(modalTransparency.value)) + const backgroundOverlayAlpha = computed(() => alphaFromTransparency(backgroundOverlayTransparency.value)) // 把透明度实时写入 的 CSS 变量，供磨砂玻璃样式（卡片 / 弹窗）即时生效 watchEffect(() => { @@ -68,6 +82,7 @@ export const useAppStore = defineStore("app", () => { root.style.setProperty("--app-card-alpha", String(cardAlpha.value)) root.style.setProperty("--app-card-alpha-hover", String(Math.min(cardAlpha.value + 0.15, 0.95))) root.style.setProperty("--app-modal-alpha", String(modalAlpha.value)) + root.style.setProperty("--app-background-overlay-alpha", String(backgroundOverlayAlpha.value)) }) // Frpc 运行状态（后续由后端驱动） @@ -99,11 +114,13 @@ export const useAppStore = defineStore("app", () => { language, sidebarCollapsed, isDark, + themeMode, toggleDark, background, backgroundUrl, cardTransparency, modalTransparency, + backgroundOverlayTransparency, runStatus, antdLocale, setLanguage, diff --git a/src/views/setting/Appearance.vue b/src/views/setting/Appearance.vue index f84e629..562b4b3 100644 --- a/src/views/setting/Appearance.vue +++ b/src/views/setting/Appearance.vue @@ -6,12 +6,28 @@
{{ t("settings.appearance.themeMode") }}
- +

{{ t("settings.appearance.themeModeTip") }}

+
+
{{ t("settings.appearance.backgroundOverlay") }}
+

{{ t("settings.appearance.backgroundOverlayTip") }}

+
+ {{ t("settings.appearance.overlayTransparency") }} + {{ appStore.backgroundOverlayTransparency }}% +
+ + +
+ + +
{{ t("settings.appearance.background") }}
@@ -69,7 +85,7 @@