日志部分再次小改动（行高亮取消）

api.go

@@ -4,9 +4,12 @@ import (
 	"bytes"
 	"embed"
 	"fmt"
+	"io"
 	"io/fs"
 	"net/http"
+	"os"
 	"strconv"
+	"strings"
 	"text/template"
 
 	"github.com/gin-gonic/gin"
@@ -60,6 +63,7 @@ func SetupRouter() *gin.Engine {
 			auth.POST("/frpc/start", startFrpcHandler)
 			auth.POST("/frpc/stop", stopFrpcHandler)
 			auth.GET("/frpc/status", getFrpcStatusHandler)
+			auth.GET("/frpc/log", getFrpcLogHandler)
 
 			auth.POST("/import/toml", importTomlHandler)
 			auth.GET("/export/toml", ExportTomlHandler)
@@ -491,6 +495,114 @@ func ExportTomlHandler(c *gin.Context) {
 	c.String(http.StatusOK, buf.String())
 }
 
+// ========== 日志读取 ==========
+
+func getFrpcLogHandler(c *gin.Context) {
+	// 读取 ./frpc.log，最多返回 200 行（最新的 200 行）
+	lines, err := readTailLog("./frpc.log", 200)
+	if err != nil {
+		c.JSON(http.StatusOK, gin.H{
+			"code": 0,
+			"data": gin.H{
+				"lines": []string{},
+				"total": 0,
+				"error": err.Error(),
+			},
+		})
+		return
+	}
+	c.JSON(http.StatusOK, gin.H{
+		"code": 0,
+		"data": gin.H{
+			"lines": lines,
+			"total": len(lines),
+		},
+	})
+}
+
+// readTailLog 读取文件末尾 n 行（倒序读取，返回正序）
+func readTailLog(filePath string, n int) ([]string, error) {
+	file, err := os.Open(filePath)
+	if err != nil {
+		return nil, err
+	}
+	defer file.Close()
+
+	// 获取文件大小
+	info, err := file.Stat()
+	if err != nil {
+		return nil, err
+	}
+	fileSize := info.Size()
+	if fileSize == 0 {
+		return []string{}, nil
+	}
+
+	// 从末尾开始读
+	const chunkSize = 4096
+	var lines []string
+	var leftover []byte
+	offset := fileSize
+
+	for len(lines) < n && offset > 0 {
+		// 计算读取起点
+		readSize := chunkSize
+		if offset < int64(chunkSize) {
+			readSize = int(offset)
+		}
+		offset -= int64(readSize)
+
+		// 读取这一块
+		buf := make([]byte, readSize)
+		_, err := file.ReadAt(buf, offset)
+		if err != nil && err != io.EOF {
+			return nil, err
+		}
+
+		// 将当前块与之前剩下的拼接
+		data := append(buf, leftover...)
+		leftover = nil
+
+		// 按行分割
+		start := 0
+		for i := len(data) - 1; i >= 0; i-- {
+			if data[i] == '\n' {
+				if i+1 < len(data) {
+					line := string(data[i+1:])
+					if line != "" {
+						lines = append([]string{line}, lines...)
+						if len(lines) >= n {
+							break
+						}
+					}
+				}
+				start = i
+			}
+		}
+
+		// 如果还没凑够，把未处理的部分留到下一轮
+		if len(lines) < n && start > 0 {
+			leftover = data[:start]
+		}
+	}
+
+	// 处理最后剩余部分（文件开头）
+	if len(lines) < n && len(leftover) > 0 {
+		// 从 leftover 中提取行
+		parts := strings.Split(string(leftover), "\n")
+		for i := len(parts) - 1; i >= 0; i-- {
+			if parts[i] != "" {
+				lines = append([]string{parts[i]}, lines...)
+				if len(lines) >= n {
+					break
+				}
+			}
+		}
+	}
+
+	return lines, nil
+}
+
 func generateAndReload() error {
 	if err := GenerateFrpcConfig(); err != nil {
 		return err

db.go

@@ -5,6 +5,7 @@ import (
 	"database/sql"
 	"encoding/hex"
 	"log"
+	"strings"
 
 	_ "modernc.org/sqlite"
 )
@@ -24,6 +25,7 @@ type GlobalConfig struct {
 	HeartbeatInterval int    `json:"heartbeatInterval"`
 	HeartbeatTimeout  int    `json:"heartbeatTimeout"`
 	PoolCount         int    `json:"poolCount"`
+	WireProtocolV2    bool   `json:"wireProtocolV2"` // frp v2 协议开关 (v2.0 启用)
 }
 
 // ===== 隧道表（B表）=====
@@ -45,7 +47,10 @@ type User struct {
 	CreatedAt    string `json:"createdAt"`
 }
 
-// ===== 初始化数据库 =====
+// ============================================================
+// 数据库初始化
+// ============================================================
+
 func InitDB() error {
 	var err error
 	DB, err = sql.Open("sqlite", "./frpc-console.db")
@@ -53,7 +58,7 @@ func InitDB() error {
 		return err
 	}
 
-	// 用户表（C表）
+	// ---- 用户表 ----
 	_, err = DB.Exec(`
         CREATE TABLE IF NOT EXISTS users (
             id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -67,13 +72,13 @@ func InitDB() error {
 		return err
 	}
 
-	// 全局配置表（A表）
+	// ---- 全局配置表 ----
 	_, err = DB.Exec(`
         CREATE TABLE IF NOT EXISTS global_config (
             id INTEGER PRIMARY KEY CHECK (id = 1),
-            server_addr TEXT NOT NULL DEFAULT 'frp.whitetop.xyz',
+            server_addr TEXT NOT NULL DEFAULT 'frp.example.com',
-            server_port INTEGER NOT NULL DEFAULT 9358,
+            server_port INTEGER NOT NULL DEFAULT 7000,
-            token TEXT NOT NULL DEFAULT 'Lxh10020328',
+            token TEXT NOT NULL DEFAULT 'CHANGE_ME',
             log_level TEXT NOT NULL DEFAULT 'info',
             log_max_days INTEGER NOT NULL DEFAULT 3,
             tcp_mux INTEGER NOT NULL DEFAULT 1,
@@ -81,6 +86,7 @@ func InitDB() error {
             heartbeat_interval INTEGER NOT NULL DEFAULT 15,
             heartbeat_timeout INTEGER NOT NULL DEFAULT 70,
             pool_count INTEGER NOT NULL DEFAULT 8,
+            wire_protocol_v2 INTEGER NOT NULL DEFAULT 0,
             updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
         )
     `)
@@ -88,14 +94,21 @@ func InitDB() error {
 		return err
 	}
 
+	// ---- 迁移：自动补全缺失的字段 ----
+	if err := migrateGlobalConfigTable(); err != nil {
+		log.Printf("⚠️  迁移警告: %v", err)
+	}
+
+	// ---- 初始化默认配置（仅当表为空时） ----
 	var count int
 	DB.QueryRow("SELECT COUNT(*) FROM global_config").Scan(&count)
 	if count == 0 {
 		_, err = DB.Exec(`
             INSERT INTO global_config (
                 id, server_addr, server_port, token, log_level, log_max_days,
-                tcp_mux, tcp_mux_keepalive, heartbeat_interval, heartbeat_timeout, pool_count
+                tcp_mux, tcp_mux_keepalive, heartbeat_interval, heartbeat_timeout, pool_count,
-            ) VALUES (1, 'frp.whitetop.xyz', 9358, 'Lxh10020328', 'info', 3, 1, 30, 15, 70, 8)
+                wire_protocol_v2
+            ) VALUES (1, 'frp.example.com', 7000, 'CHANGE_ME', 'info', 3, 1, 30, 15, 70, 8, 0)
         `)
 		if err != nil {
 			return err
@@ -103,7 +116,7 @@ func InitDB() error {
 		log.Println("✅ 全局配置初始化完成")
 	}
 
-	// 隧道表（B表）
+	// ---- 隧道表 ----
 	_, err = DB.Exec(`
         CREATE TABLE IF NOT EXISTS proxies (
             id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -121,7 +134,7 @@ func InitDB() error {
 		return err
 	}
 
-	// 应用配置表（JWT密钥等）
+	// ---- 应用配置表 ----
 	_, err = DB.Exec(`
         CREATE TABLE IF NOT EXISTS app_config (
             key TEXT PRIMARY KEY,
@@ -141,7 +154,96 @@ func InitDB() error {
 	return nil
 }
 
-// ===== JWT 密钥管理 =====
+// ============================================================
+// Schema 迁移：自动补全缺失的字段
+// ============================================================
+
+// expectedColumns 定义所有期望的列，格式: 列名 => 完整定义
+// 新增字段时，在这里加一行即可
+var expectedColumns = map[string]string{
+	"id":                 "id INTEGER PRIMARY KEY CHECK (id = 1)",
+	"server_addr":        "server_addr TEXT NOT NULL DEFAULT 'frp.example.com'",
+	"server_port":        "server_port INTEGER NOT NULL DEFAULT 7000",
+	"token":              "token TEXT NOT NULL DEFAULT 'CHANGE_ME'",
+	"log_level":          "log_level TEXT NOT NULL DEFAULT 'info'",
+	"log_max_days":       "log_max_days INTEGER NOT NULL DEFAULT 3",
+	"tcp_mux":            "tcp_mux INTEGER NOT NULL DEFAULT 1",
+	"tcp_mux_keepalive":  "tcp_mux_keepalive INTEGER NOT NULL DEFAULT 30",
+	"heartbeat_interval": "heartbeat_interval INTEGER NOT NULL DEFAULT 15",
+	"heartbeat_timeout":  "heartbeat_timeout INTEGER NOT NULL DEFAULT 70",
+	"pool_count":         "pool_count INTEGER NOT NULL DEFAULT 8",
+	"wire_protocol_v2":   "wire_protocol_v2 INTEGER NOT NULL DEFAULT 0", // v1.5 新增
+	"updated_at":         "updated_at DATETIME DEFAULT CURRENT_TIMESTAMP",
+}
+
+func migrateGlobalConfigTable() error {
+	// 1. 获取当前表的列名
+	currentCols, err := getCurrentColumns("global_config")
+	if err != nil {
+		return err
+	}
+
+	// 2. 比对并补全缺失的列
+	var added []string
+	for colName, colDef := range expectedColumns {
+		if !contains(currentCols, colName) {
+			alterSQL := "ALTER TABLE global_config ADD COLUMN " + colDef
+			if _, err := DB.Exec(alterSQL); err != nil {
+				log.Printf("⚠️  添加列 %s 失败: %v", colName, err)
+				continue
+			}
+			added = append(added, colName)
+		}
+	}
+
+	if len(added) > 0 {
+		log.Printf("✅ 数据库迁移完成，新增字段: %v", added)
+	} else {
+		log.Println("✅ 数据库 Schema 已是最新")
+	}
+
+	return nil
+}
+
+// getCurrentColumns 查询指定表的所有列名
+func getCurrentColumns(tableName string) ([]string, error) {
+	rows, err := DB.Query("PRAGMA table_info(" + tableName + ")")
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var cols []string
+	for rows.Next() {
+		var (
+			cid     int
+			name    string
+			typ     string
+			notNull int
+			dfltVal sql.NullString
+			pk      int
+		)
+		if err := rows.Scan(&cid, &name, &typ, &notNull, &dfltVal, &pk); err != nil {
+			return nil, err
+		}
+		cols = append(cols, name)
+	}
+	return cols, rows.Err()
+}
+
+func contains(slice []string, item string) bool {
+	for _, s := range slice {
+		if strings.EqualFold(s, item) {
+			return true
+		}
+	}
+	return false
+}
+
+// ============================================================
+// JWT 密钥管理
+// ============================================================
+
 func ensureJwtSecret() error {
 	var value string
 	err := DB.QueryRow("SELECT value FROM app_config WHERE key = 'jwt_secret'").Scan(&value)
@@ -174,17 +276,22 @@ func GetJwtSecret() (string, error) {
 	return secret, nil
 }
 
-// ===== 全局配置 CRUD =====
+// ============================================================
+// 全局配置 CRUD
+// ============================================================
+
 func GetGlobalConfig() (*GlobalConfig, error) {
 	var cfg GlobalConfig
 	err := DB.QueryRow(`
         SELECT id, server_addr, server_port, token, log_level, log_max_days,
-               tcp_mux, tcp_mux_keepalive, heartbeat_interval, heartbeat_timeout, pool_count
+               tcp_mux, tcp_mux_keepalive, heartbeat_interval, heartbeat_timeout, pool_count,
+               wire_protocol_v2
         FROM global_config WHERE id = 1
     `).Scan(
 		&cfg.ID, &cfg.ServerAddr, &cfg.ServerPort, &cfg.Token,
 		&cfg.LogLevel, &cfg.LogMaxDays, &cfg.TcpMux, &cfg.TcpMuxKeepalive,
 		&cfg.HeartbeatInterval, &cfg.HeartbeatTimeout, &cfg.PoolCount,
+		&cfg.WireProtocolV2,
 	)
 	if err != nil {
 		return nil, err
@@ -199,14 +306,19 @@ func UpdateGlobalConfig(cfg *GlobalConfig) error {
             server_addr = ?, server_port = ?, token = ?, log_level = ?, log_max_days = ?,
             tcp_mux = 1,
             tcp_mux_keepalive = ?, heartbeat_interval = ?, heartbeat_timeout = ?, pool_count = ?,
+            wire_protocol_v2 = ?,
             updated_at = CURRENT_TIMESTAMP
         WHERE id = 1
     `, cfg.ServerAddr, cfg.ServerPort, cfg.Token, cfg.LogLevel, cfg.LogMaxDays,
-		cfg.TcpMuxKeepalive, cfg.HeartbeatInterval, cfg.HeartbeatTimeout, cfg.PoolCount)
+		cfg.TcpMuxKeepalive, cfg.HeartbeatInterval, cfg.HeartbeatTimeout, cfg.PoolCount,
+		cfg.WireProtocolV2)
 	return err
 }
 
-// ===== 隧道 CRUD =====
+// ============================================================
+// 隧道 CRUD
+// ============================================================
+
 func GetProxies() ([]Proxy, error) {
 	rows, err := DB.Query(`
         SELECT id, name, type, local_ip, local_port, remote_port, enabled
@@ -272,7 +384,10 @@ func DeleteProxy(id int) error {
 	return err
 }
 
-// ===== 用户 CRUD =====
+// ============================================================
+// 用户 CRUD
+// ============================================================
+
 func GetUserByUsername(username string) (*User, error) {
 	var u User
 	err := DB.QueryRow(`

install_binary.md

@@ -0,0 +1,147 @@
+## 📦 二进制安装指南
+
+> 直接下载编译好的二进制文件，开箱即用，无需 Docker、无需 Go 环境。
+
+
+### 一、📥 下载
+
+从 [Releases](https://git.whitetop.xyz/lxh2875931338/frpc-console/releases) 页面下载对应平台的二进制文件：
+
+| 平台 | 文件名 |
+|---|---|
+| Linux x86-64 | `frpc-console-linux-amd64.tar.gz` |
+| Linux ARM64 | `frpc-console-linux-arm64.tar.gz` |
+| Windows x86-64 | `frpc-console-windows-amd64.zip` |
+
+
+### 二、🐧 Linux 部署
+
+**1. 解压并放好**
+
+```bash
+tar -xzf frpc-console-linux-amd64.tar.gz
+sudo mv frpc-console-linux-amd64 /usr/local/bin/frpc-console
+sudo chmod +x /usr/local/bin/frpc-console
+```
+
+**2. 直接运行**
+
+```bash
+./frpc-console
+```
+
+默认监听 `http://localhost:9300`。
+
+**3. 注册为 systemd 服务（推荐，开机自启）**
+
+创建服务文件：
+
+```bash
+sudo nano /etc/systemd/system/frpc-console.service
+```
+
+写入：
+
+```ini
+[Unit]
+Description=frpc-console
+After=network.target
+
+[Service]
+Type=simple
+User=root
+WorkingDirectory=/opt/frpc-console
+ExecStart=/usr/local/bin/frpc-console
+Restart=always
+RestartSec=10
+
+[Install]
+WantedBy=multi-user.target
+```
+
+启动并启用：
+
+```bash
+sudo systemctl daemon-reload
+sudo systemctl enable frpc-console
+sudo systemctl start frpc-console
+sudo systemctl status frpc-console
+```
+
+
+### 三、🪟 Windows 部署
+
+**1. 解压**
+
+将 `frpc-console-windows-amd64.zip` 解压到目标文件夹，比如 `C:\frpc-console\`。
+
+**2. 直接运行**
+
+双击 `frpc-console.exe`，或打开命令行：
+
+```cmd
+cd C:\frpc-console
+frpc-console.exe
+```
+
+默认监听 `http://localhost:9300`。
+
+**3. 后台运行（隐藏窗口）**
+
+方式一：使用 `start /b`
+
+```cmd
+start /b frpc-console.exe
+```
+
+方式二：使用 `nssm` 注册为 Windows 服务
+
+```cmd
+nssm install frpc-console
+# 按提示填写路径
+nssm start frpc-console
+```
+
+
+### 四、🚀 首次访问
+
+启动后，浏览器打开：
+
+```
+http://localhost:9300
+```
+
+首次访问会自动跳转到注册页面，填写用户名和密码，完成管理员账户创建。
+
+登录后，在「隧道列表」页面点击「导入 TOML」，即可将现有的 `frpc.toml` 迁移到 WebUI 中管理。
+
+
+### 五、📂 数据目录说明
+
+默认情况下，数据文件会生成在与二进制同级的目录下：
+
+| 文件 | 说明 |
+|---|---|
+| `frpc-console.db` | SQLite 数据库 |
+| `frpc.toml` | 生成的 frpc 配置文件 |
+| `frpc.log` | frpc 运行日志 |
+| `frpc.pid` | frpc 进程 PID（Linux） |
+
+建议将数据目录单独存放，便于备份和迁移。
+
+
+### 六、🔄 升级
+
+下载新版本二进制，覆盖旧文件，重启服务即可。数据文件会自动保留，无需额外操作。
+
+**Linux systemd 升级：**
+
+```bash
+sudo systemctl stop frpc-console
+sudo cp frpc-console-linux-amd64 /usr/local/bin/frpc-console
+sudo systemctl start frpc-console
+```
+
+**Windows 升级：**
+
+停止旧进程，替换 `frpc-console.exe`，重新运行。

install_docker.md

@@ -0,0 +1,137 @@
+## 🐳 Docker 版安装指南
+
+> 推荐方式：一键脚本自动部署，无需手动编译，无需安装 Go 环境。
+
+
+### 一、📥 前置条件
+
+- 已安装 Docker（必须）
+- 已安装 curl / wget（脚本会自动检查并安装）
+- 操作系统：Linux（x86_64 / ARM64 均可，ARMv7 将在不久的未来得到支持）
+
+
+### 二、🚀 一键部署（推荐）
+
+在目标 Linux 服务器上执行：
+
+```bash
+curl -sSL https://git.whitetop.xyz/lxh2875931338/frpc-console/raw/main/deploy.sh | sudo bash
+```
+
+或手动下载执行：
+
+```bash
+wget https://git.whitetop.xyz/lxh2875931338/frpc-console/raw/main/deploy.sh
+chmod +x deploy.sh
+sudo bash deploy.sh
+```
+
+
+### 三、⚙️ 脚本自动完成内容
+
+| 步骤 | 说明 |
+|---|---|
+| 检测系统 | 自动识别 OpenSUSE / Ubuntu / Debian / CentOS / Alpine |
+| 检测 CPU 架构 | 自动适配 x86_64 / ARM64 / ARMv7 |
+| 安装依赖 | git / curl / wget（如未安装） |
+| 安装 Go | 从国内镜像下载，自动配置代理 |
+| 拉取源码 | 从 Gitea 仓库克隆最新代码 |
+| 编译二进制 | 根据当前架构编译 Linux 版 |
+| 构建 Docker 镜像 | 使用源码中的 Dockerfile 构建 |
+| 启动容器 | 挂载数据卷，开机自启 |
+
+
+### 四、📂 数据持久化
+
+脚本默认将数据存储在 `/opt/frpc-console/data/`：
+
+| 文件 | 说明 |
+|---|---|
+| `frpc-console.db` | SQLite 数据库（用户、隧道、配置） |
+| `frpc.toml` | 生成的 frpc 配置文件 |
+| `frpc.log` | frpc 运行日志 |
+| `frpc.pid` | frpc 进程 PID |
+
+升级或重建容器时，数据自动保留，不会丢失。
+
+
+### 五、🔄 升级
+
+**方式一：重新运行脚本**
+
+```bash
+sudo bash deploy.sh
+```
+
+脚本会自动停止旧容器、拉取最新代码、重新编译并启动新容器，数据卷保持不变。
+
+**方式二：手动更新**
+
+```bash
+# 停止旧容器
+docker stop frpc-console
+docker rm frpc-console
+
+# 重新运行 deploy.sh
+sudo bash deploy.sh
+```
+
+
+### 六、🧹 常用命令
+
+```bash
+# 查看日志
+docker logs -f frpc-console
+
+# 查看 frpc 子进程状态
+docker exec frpc-console ps aux | grep frpc
+
+# 重启容器
+docker restart frpc-console
+
+# 停止容器
+docker stop frpc-console
+
+# 启动容器
+docker start frpc-console
+```
+
+
+### 七、🌐 访问地址
+
+部署完成后，浏览器打开：
+
+```
+http://你的服务器IP:9300
+```
+
+首次访问会自动跳转到注册页面，填写用户名和密码，完成管理员账户创建。
+
+登录后，在「隧道列表」页面点击「导入 TOML」，即可将现有的 `frpc.toml` 迁移到 WebUI 中管理。
+
+
+### 八、📌 手动部署（不使用脚本）
+
+如果你已有源码，或想自行定制：
+
+```bash
+# 1. 克隆代码
+git clone https://git.whitetop.xyz/lxh2875931338/frpc-console.git
+cd frpc-console
+
+# 2. 构建镜像
+docker build -t frpc-console:latest .
+
+# 3. 创建数据目录
+mkdir -p /opt/frpc-console/data
+
+# 4. 启动容器
+docker run -d \
+  --name frpc-console \
+  --restart=always \
+  --network host \
+  -v /opt/frpc-console/data:/app/data \
+  -e PORT=9300 \
+  -e TZ=Asia/Shanghai \
+  frpc-console:latest
+```

readme.md

@@ -1,16 +1,21 @@
-# 🚀 frpc-console
+<p align="center">
+  <img src="static/logo.svg" alt="frpc-console" width="360" />
+</p>
+
+
+#  frpc-console
 
 > 轻量级 frpc 管理面板 —— 为你的内网穿透插上翅膀
 
+[![Release](https://img.shields.io/gitea/v/release/lxh2875931338/frpc-console?gitea_url=https://git.whitetop.xyz)](https://git.whitetop.xyz/lxh2875931338/frpc-console/releases)
 [![Go Version](https://img.shields.io/badge/Go-1.21+-00ADD8?style=flat&logo=go)](https://golang.org/)
 [![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
-[![Release](https://img.shields.io/github/v/release/lxh2875931338/frpc-console)](https://git.whitetop.xyz/lxh2875931338/frpc-console/releases)
 
 ---
 
 ## 📖 简介
 
-**frpc-console** 是一个专为 [frp](https://github.com/fatedier/frp) 设计的轻量级管理工具。它解决了 frpc 配置文件手动维护繁琐、缺少可视化界面的痛点，让你在浏览器中轻松管理所有隧道。
+**frpc-console** 是一个专为 [frp](https://github.com/fatedier/frp) 设计的轻量级管理工具。本项目旨在以无限接近原生占用的情况下，实现完全图形化的控制工具（毕竟 WebUI 也算图形化，对吧？）
 
 ### ✨ 核心特性
 
@@ -26,41 +31,38 @@
 
 ## 🚀 快速开始
 
-### 方式一：直接运行二进制
+### 🐧 二进制安装（推荐）
 
-从 [Releases](https://git.whitetop.xyz/lxh2875931338/frpc-console/releases) 下载对应平台版本：
+适用于 Linux / Windows，无需 Docker，单文件运行。
+
+👉 详见：[二进制安装指南](./INSTALL_BINARY.md)
+
+### 🐳 Docker 部署（一键脚本）
+
+适用于 Linux 服务器，自动编译 + 自动部署。
 
 ```bash
-# Linux / macOS
+curl -sSL https://git.whitetop.xyz/lxh2875931338/frpc-console/raw/main/deploy.sh | sudo bash
-chmod +x frpc-console
-./frpc-console
-
-# Windows
-frpc-console.exe
 ```
 
-首次启动会在终端提示设置管理员账户，之后访问 http://localhost:8080 即可。
+👉 详见：[Docker 安装指南](./INSTALL_DOCKER.md)
 
-### 方式二：Docker 运行
+### 🔧 源码编译
+
+适合开发者或需要自定义配置的用户。
 
 ```bash
-docker run -d \
+git clone https://git.whitetop.xyz/lxh2875931338/frpc-console.git
-  --name frpc-console \
-  -p 9300:9300 \
-  -v ./data:/app/data \
-  lxh2875931338/frpc-console:latest
-```
-
-### 方式三：源码编译
-
-```bash
-git clone https://github.com/lxh2875931338/frpc-console.git
 cd frpc-console
 go mod tidy
 go build -o frpc-console .
 ./frpc-console
 ```
 
+首次访问 `http://localhost:9300` 注册管理员账户，然后导入你的 `frpc.toml` 即可开始使用。
+
+---
+
 ## 🗂️ 项目结构
 ```txt
 frpc-console/
@@ -123,17 +125,6 @@ go build -ldflags="-s -w" -o frpc-console .
 
 前端使用 Vue 3 CDN + Naive UI，无需额外构建工具。修改 static/ 目录下的文件后，刷新浏览器即可预览效果。
 
----
-
-### 📦 构建 Docker 镜像
-
-```bash
-# 构建 amd64 镜像
-docker build -t frpc-console:amd64 .
-
-# 多架构构建 (需要 buildx)
-docker buildx build --platform linux/amd64,linux/arm64 -t frpc-console:latest --push .
-```
 
 ---
 
@@ -159,9 +150,10 @@ docker buildx build --platform linux/amd64,linux/arm64 -t frpc-console:latest --
 |---|---|---|
 | Linux | AMD64/x86-64 | 0.70.0 |
 | Linux | ARM64/Aarch64 | 0.70.0 |
-| Windows | AMD64/x86-64 | 0.69.0 |
+| Linux | ARM_hf/ARMv7l | 0.70.0 |
+| Windows | AMD64/x86-64 | 0.70.0 |
 
-> 不是Windows不配高版本，是直到现在frp设计者那边0.70.0都没发Windows版本</br>（除非我单独下载下来make一个0.70.0的Windows，但是作者没放出来，肯定是有原因的）
+> 行了行了，Windows 版和 Linux 版版本号已同步。不用再等了。
 
 #### Q: 为什么不用 / 不推荐 Podux？
 
@@ -219,7 +211,7 @@ frpc-console 遵循 **“够用就好”** 的原则：
 · ✨ 多平台 frpc 自动适配</br>
 · 🐳 Docker 镜像支持
 
-### .0-Release (正在修整，后续开发)
+### 2.0-Release (正在修整，后续开发)
 
 ---
 

script/build.go

@@ -23,7 +23,7 @@ var platforms = []Platform{
 	{"windows", "386", "Windows x86", ".exe"},
 	{"linux", "amd64", "Linux x86-64", ""},
 	{"linux", "arm64", "Linux ARM64", ""},
-	{"linux", "armv7", "Linux ARMv7", ""},
+	{"linux", "armv7", "Linux ARMv7l", ""},
 }
 
 const (

static/app.js

@@ -1,13 +1,12 @@
 // app.js - 普通脚本（非模块）
 
-const { createApp, ref, reactive, computed, onMounted } = Vue;
+const { createApp, ref, reactive, computed, onMounted, nextTick, watch } = Vue;
 
 // ============================================================
 // 1. 基础 API
 // ============================================================
 const API_BASE = "/api";
 
-
 function getToken() {
     return localStorage.getItem("frpc_token") || "";
 }
@@ -86,9 +85,9 @@ async function login(username, password) {
 // 3. Config
 // ============================================================
 const defaultConfig = {
-    serverAddr: "frp.whitetop.xyz",
+    serverAddr: "frp.example.com",
-    serverPort: 9358,
+    serverPort: 7000,
-    token: "",
+    token: "CHANGE_ME",
     logLevel: "info",
     logMaxDays: 3,
     tcpMux: true,
@@ -96,6 +95,7 @@ const defaultConfig = {
     heartbeatInterval: 15,
     heartbeatTimeout: 70,
     poolCount: 8,
+    wireProtocolV2: false,
 };
 
 async function loadConfig() {
@@ -183,7 +183,22 @@ async function getFrpcStatus() {
 }
 
 // ============================================================
-// 6. UI State
+// 6. Logs
+// ============================================================
+async function fetchLogsApi() {
+    try {
+        const data = await apiFetch("/frpc/log");
+        if (data.code === 0) {
+            return { lines: data.data.lines || [], total: data.data.total || 0, error: data.data.error || "" };
+        }
+        return { lines: [], total: 0, error: "加载失败" };
+    } catch (e) {
+        return { lines: [], total: 0, error: "网络错误" };
+    }
+}
+
+// ============================================================
+// 7. UI State
 // ============================================================
 const activeTab = ref("proxies");
 const dialogVisible = ref(false);
@@ -197,6 +212,7 @@ const dialogForm = ref({
     remotePort: 0,
 });
 const searchKeyword = ref("");
+const showToken = ref(false);
 
 function openAddDialog() {
     dialogMode.value = "add";
@@ -222,7 +238,7 @@ function closeDialog() {
 }
 
 // ============================================================
-// 7. Vue App
+// 8. Vue App
 // ============================================================
 const app = createApp({
     setup() {
@@ -251,7 +267,6 @@ const app = createApp({
         const globalConfig = reactive({});
         const proxies = ref([]);
         const frpcRunning = ref(false);
-        const showDetail = ref(false);
 
         // ---- 修改密码 ----
         const passwordChange = reactive({
@@ -262,6 +277,15 @@ const app = createApp({
         const passwordChangeError = ref("");
         const passwordChangeSuccess = ref("");
 
+        // ---- 日志 ----
+        const logLines = ref([]);
+        const logTotal = ref(0);
+        const logError = ref("");
+        const logLastUpdate = ref("");
+        const logAutoScroll = ref(true);
+        let logTimer = null;
+        let logFetching = false;
+
         // ---- 初始化 ----
         onMounted(() => {
             const saved = loadAuthState();
@@ -279,6 +303,15 @@ const app = createApp({
             }
         });
 
+        // ---- Tab 切换监听日志轮询 ----
+        watch(activeTab, (newTab) => {
+            if (newTab === "logs") {
+                startLogPolling();
+            } else {
+                stopLogPolling();
+            }
+        });
+
         async function checkUsers() {
             try {
                 const res = await fetch("/api/check/users");
@@ -312,6 +345,54 @@ const app = createApp({
             frpcRunning.value = running;
         }
 
+        // ---- 日志轮询 ----
+        async function fetchLogs() {
+            if (logFetching) return;
+            logFetching = true;
+            try {
+                const result = await fetchLogsApi();
+                logLines.value = result.lines;
+                logTotal.value = result.total;
+                logError.value = result.error;
+                logLastUpdate.value = new Date().toLocaleTimeString();
+                if (logAutoScroll.value) {
+                    await nextTick();
+                    const container = document.getElementById("logContainer");
+                    if (container) {
+                        container.scrollTop = container.scrollHeight;
+                    }
+                }
+            } catch (e) {
+                logError.value = "网络错误";
+            } finally {
+                logFetching = false;
+            }
+        }
+
+        function startLogPolling() {
+            if (logTimer) return;
+            fetchLogs();
+            logTimer = setInterval(fetchLogs, 8000);
+        }
+
+        function stopLogPolling() {
+            if (logTimer) {
+                clearInterval(logTimer);
+                logTimer = null;
+            }
+        }
+
+        function refreshLogs() {
+            fetchLogs();
+        }
+
+        function scrollLogToBottom() {
+            const container = document.getElementById("logContainer");
+            if (container) {
+                container.scrollTop = container.scrollHeight;
+            }
+        }
+
         // ---- 登录 ----
         const doLogin = async () => {
             if (!loginForm.username || !loginForm.password) {
@@ -368,9 +449,7 @@ const app = createApp({
                 });
                 const data = await res.json();
                 if (data.code === 0) {
-                    // ✅ 注册成功，不再是首次启动
                     isFirstRun.value = false;
-
                     const token = data.data.token;
                     const expire = saveAuthState(token, registerForm.username);
                     token.value = token;
@@ -398,6 +477,7 @@ const app = createApp({
         // ---- 退出 ----
         const doLogout = () => {
             if (expireTimer) clearInterval(expireTimer);
+            stopLogPolling();
             contentVisible.value = false;
             loggedIn.value = false;
             token.value = "";
@@ -407,8 +487,6 @@ const app = createApp({
             loading.value = false;
             transitioning.value = false;
             clearAuthState();
-
-            // ✅ 重置注册相关状态
             isFirstRun.value = false;
             registerForm.username = "";
             registerForm.password = "";
@@ -504,7 +582,7 @@ const app = createApp({
             }
         };
 
-        // ---- 导入导出（已移入 setup，可访问 loadAllData） ----
+        // ---- 导入导出 ----
         const triggerImport = () => {
             document.getElementById("tomlFileInput").click();
         };
@@ -562,6 +640,12 @@ const app = createApp({
             filterProxies(proxies.value, searchKeyword.value)
         );
 
+        const showDefaultTip = computed(() => {
+            // 如果 serverAddr 还是默认值，或者为空，显示警告
+            const addr = globalConfig.serverAddr;
+            return !addr || addr === "frp.example.com" || addr.trim() === "";
+        });
+
         // ---- 返回 ----
         return {
             loggedIn,
@@ -579,7 +663,6 @@ const app = createApp({
 
             activeTab,
             globalConfig,
-            showDetail,
             saveConfig,
 
             proxies,
@@ -608,6 +691,20 @@ const app = createApp({
             passwordChangeError,
             passwordChangeSuccess,
             changePassword,
+
+            showDefaultTip, 
+
+            // 日志相关
+            logLines,
+            logTotal,
+            logError,
+            logLastUpdate,
+            logAutoScroll,
+            refreshLogs,
+            scrollLogToBottom,
+
+            // Token 显示切换
+            showToken,
         };
     },
 });

static/index.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="/static/style-1.css" />
     <link rel="stylesheet" href="/static/style-2.css" />
     <link rel="stylesheet" href="/static/style-3.css" />
+    <link rel="stylesheet" href="/static/style-4.css" />
 </head>
 
 <body>
@@ -26,7 +27,7 @@
             <!-- ====== 登录/注册页 ====== -->
             <div v-if="!loggedIn" class="login-card">
 
-                <!-- Logo 区域（可替换） -->
+                <!-- Logo 区域 -->
                 <div class="login-logo">
                     <img src="/static/logo.svg" alt="frpc-console" class="logo-img" />
                     <span class="logo-text">frpc-console</span>
@@ -87,7 +88,7 @@
             <!-- ====== 主界面 ====== -->
             <div v-else class="main-panel" :class="{ visible: contentVisible }">
 
-                <!-- 顶部导航（含 Logo 小标） -->
+                <!-- 顶部导航 -->
                 <div class="top-bar">
                     <div class="top-left">
                         <img src="/static/logo.svg" alt="frpc-console" class="nav-logo" />
@@ -111,103 +112,15 @@
                         @click="activeTab = 'proxies'">隧道列表</span>
                     <span class="tab-item" :class="{ active: activeTab === 'config' }"
                         @click="activeTab = 'config'">全局配置信息</span>
+                    <span class="tab-item" :class="{ active: activeTab === 'logs' }"
+                        @click="activeTab = 'logs'">运行日志</span>
                 </div>
 
                 <!-- 内容区 -->
                 <div class="content-area">
 
-                    <!-- ====== 全局配置 ====== -->
-                    <div v-if="activeTab === 'config'" class="tab-content">
-
-                        <!-- 账户管理 -->
-                        <div class="profile-section">
-                            <div class="profile-header">
-                                <span>👤 账户管理</span>
-                                <span class="profile-username">{{ loginForm.username }}</span>
-                            </div>
-                            <div class="profile-form">
-                                <div class="form-row">
-                                    <label>当前密码</label>
-                                    <input v-model="passwordChange.oldPassword" type="password" placeholder="输入当前密码" />
-                                </div>
-                                <div class="form-row">
-                                    <label>新密码</label>
-                                    <input v-model="passwordChange.newPassword" type="password"
-                                        placeholder="至少8位，含大小写/数字/特殊字符" />
-                                </div>
-                                <div class="form-row">
-                                    <label>确认新密码</label>
-                                    <input v-model="passwordChange.confirmPassword" type="password"
-                                        placeholder="再次输入新密码" />
-                                </div>
-                                <button class="save-btn" @click="changePassword">修改密码</button>
-                                <p v-if="passwordChangeError" class="login-error">{{ passwordChangeError }}</p>
-                                <p v-if="passwordChangeSuccess" class="login-success">{{ passwordChangeSuccess }}</p>
-                            </div>
-                        </div>
-
-                        <!-- 配置卡片 -->
-                        <div class="config-grid">
-                            <div class="metric-card">
-                                <div class="metric-label">TCP Multiplexing</div>
-                                <div class="metric-value">
-                                    <span class="status-dot active"></span>
-                                    <span class="status-text active">已启用（固定）</span>
-                                </div>
-                            </div>
-                            <div class="metric-card">
-                                <div class="metric-label">连接池大小</div>
-                                <div class="metric-value">
-                                    <span class="big-number">{{ globalConfig.poolCount || 8 }}</span>
-                                    <span class="unit">个</span>
-                                </div>
-                            </div>
-                            <div class="metric-card">
-                                <div class="metric-label">心跳间隔 / 超时</div>
-                                <div class="metric-value">
-                                    <span class="digit">{{ globalConfig.heartbeatInterval || 15 }}s</span>
-                                    <span class="sep">/</span>
-                                    <span class="digit">{{ globalConfig.heartbeatTimeout || 70 }}s</span>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="detail-collapse" @click="showDetail = !showDetail">
-                            <span>{{ showDetail ? '收起全部配置 ▲' : '展开全部配置 ▼' }}</span>
-                        </div>
-                        <div v-show="showDetail" class="detail-panel">
-                            <div class="form-row"><label>Server Address</label><input
-                                    v-model="globalConfig.serverAddr" /></div>
-                            <div class="form-row"><label>Server Port</label><input type="number"
-                                    v-model="globalConfig.serverPort" /></div>
-                            <div class="form-row"><label>Token</label><input type="password"
-                                    v-model="globalConfig.token" /></div>
-                            <div class="form-row">
-                                <label>Log Level</label>
-                                <select v-model="globalConfig.logLevel">
-                                    <option value="trace">trace</option>
-                                    <option value="debug">debug</option>
-                                    <option value="info">info</option>
-                                    <option value="warn">warn</option>
-                                    <option value="error">error</option>
-                                </select>
-                            </div>
-                            <div class="form-row"><label>Log Max Days</label><input type="number"
-                                    v-model="globalConfig.logMaxDays" /></div>
-                            <div class="form-row"><label>TCP Mux Keepalive</label><input type="number"
-                                    v-model="globalConfig.tcpMuxKeepalive" /></div>
-                            <div class="form-row"><label>Heartbeat Interval</label><input type="number"
-                                    v-model="globalConfig.heartbeatInterval" /></div>
-                            <div class="form-row"><label>Heartbeat Timeout</label><input type="number"
-                                    v-model="globalConfig.heartbeatTimeout" /></div>
-                            <div class="form-row"><label>Pool Count</label><input type="number"
-                                    v-model="globalConfig.poolCount" /></div>
-                            <button class="save-btn" @click="saveConfig">保存配置并热加载</button>
-                        </div>
-                    </div>
-
                     <!-- ====== 隧道列表 ====== -->
-                    <div v-else-if="activeTab === 'proxies'" class="tab-content">
+                    <div v-if="activeTab === 'proxies'" class="tab-content">
                         <div class="toolbar">
                             <div class="toolbar-left">
                                 <button class="btn-import" @click="triggerImport">导入 TOML</button>
@@ -245,6 +158,188 @@
                             <div v-if="filteredProxies.length === 0" class="empty-state">暂无隧道，点击「新增隧道」添加</div>
                         </div>
                     </div>
+
+                    <!-- ====== 全局配置信息 ====== -->
+                    <!-- ====== 全局配置信息 ====== -->
+                    <div v-if="activeTab === 'config'" class="tab-content config-tab-content">
+                        <!-- 页面标题 -->
+                        <div class="config-page-header">
+                            <h2>全局配置信息</h2>
+                            <p class="config-subtitle">管理 frpc 连接参数与传输设置</p>
+                        </div>
+
+                        <!-- 首次使用提示 -->
+                        <div v-if="showDefaultTip" class="config-tip">
+                            首次使用请修改「服务器地址」和「认证令牌」为您的真实 frps 配置
+                        </div>
+
+                        <!-- ===== 账户管理 ===== -->
+                        <div class="profile-section">
+                            <div class="profile-header">
+                                <span>账户管理</span>
+                                <span class="profile-username">{{ loginForm.username }}</span>
+                            </div>
+                            <div class="profile-form">
+                                <div class="form-row">
+                                    <label>当前密码</label>
+                                    <input v-model="passwordChange.oldPassword" type="password" placeholder="输入当前密码" />
+                                </div>
+                                <div class="form-row">
+                                    <label>新密码</label>
+                                    <input v-model="passwordChange.newPassword" type="password"
+                                        placeholder="至少8位，含大小写/数字/特殊字符" />
+                                </div>
+                                <div class="form-row">
+                                    <label>确认新密码</label>
+                                    <input v-model="passwordChange.confirmPassword" type="password"
+                                        placeholder="再次输入新密码" />
+                                </div>
+                                <button class="save-btn" @click="changePassword">修改密码</button>
+                                <p v-if="passwordChangeError" class="login-error">{{ passwordChangeError }}</p>
+                                <p v-if="passwordChangeSuccess" class="login-success">{{ passwordChangeSuccess }}</p>
+                            </div>
+                        </div>
+
+                        <!-- ===== 卡片1: 服务器连接 ===== -->
+                        <div class="config-card">
+                            <div class="config-card-header">
+                                <span class="card-title">服务器连接</span>
+                            </div>
+                            <div class="config-card-body">
+                                <div class="form-row">
+                                    <label>服务器地址</label>
+                                    <input v-model="globalConfig.serverAddr" placeholder="例如: frp.example.com" />
+                                </div>
+                                <div class="form-row">
+                                    <label>服务器端口</label>
+                                    <input type="number" v-model="globalConfig.serverPort" placeholder="7000" />
+                                </div>
+                                <div class="form-row" style="grid-column: 1 / -1;">
+                                    <label>认证令牌</label>
+                                    <div class="token-input-wrapper">
+                                        <input :type="showToken ? 'text' : 'password'" v-model="globalConfig.token"
+                                            placeholder="CHANGE_ME" />
+                                        <button class="token-toggle-btn" @click="showToken = !showToken">
+                                            {{ showToken ? '隐藏' : '显示' }}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- ===== 卡片2: 传输配置 ===== -->
+                        <div class="config-card">
+                            <div class="config-card-header">
+                                <span class="card-title">传输配置</span>
+                            </div>
+                            <div class="config-card-body">
+                                <!-- TCP 多路复用（只读，占满一行） -->
+                                <div class="form-row" style="grid-column: 1 / -1;">
+                                    <label>TCP 多路复用</label>
+                                    <div class="readonly-value">
+                                        <span class="status-dot active"></span>
+                                        <span class="status-text active">已强制开启</span>
+                                        <span class="hint-text">优化连接性能，减少延迟，frp 官方推荐开启</span>
+                                    </div>
+                                </div>
+                                <!-- 保活间隔 -->
+                                <div class="form-row">
+                                    <label>保活间隔（秒）</label>
+                                    <input type="number" v-model="globalConfig.tcpMuxKeepalive" />
+                                </div>
+                                <!-- 心跳间隔 -->
+                                <div class="form-row">
+                                    <label>心跳间隔（秒）</label>
+                                    <input type="number" v-model="globalConfig.heartbeatInterval" />
+                                </div>
+                                <!-- 心跳超时 -->
+                                <div class="form-row">
+                                    <label>心跳超时（秒）</label>
+                                    <input type="number" v-model="globalConfig.heartbeatTimeout" />
+                                </div>
+                                <!-- 连接池大小 -->
+                                <div class="form-row">
+                                    <label>连接池大小（个）</label>
+                                    <input type="number" v-model="globalConfig.poolCount" />
+                                </div>
+                                <!-- v2 协议开关（v1.5 灰标禁用） -->
+                                <div class="form-row v2-switch-row">
+                                    <label>frp v2 隧道支持</label>
+                                    <div class="v2-switch-wrapper">
+                                        <label class="switch disabled">
+                                            <input type="checkbox" v-model="globalConfig.wireProtocolV2" disabled />
+                                            <span class="slider"></span>
+                                        </label>
+                                        <span class="v2-badge">即将推出</span>
+                                    </div>
+                                    <span class="hint-text v2-hint">
+                                        此功能为 frp 0.70.0 以上版本才能开启，若要打开必须搭配同版本 frps 使用，否则此功能不生效
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- ===== 卡片3: 日志配置 ===== -->
+                        <div class="config-card">
+                            <div class="config-card-header">
+                                <span class="card-title">日志配置</span>
+                            </div>
+                            <div class="config-card-body">
+                                <div class="form-row">
+                                    <label>日志级别</label>
+                                    <select v-model="globalConfig.logLevel">
+                                        <option value="trace">trace</option>
+                                        <option value="debug">debug</option>
+                                        <option value="info">info</option>
+                                        <option value="warn">warn</option>
+                                        <option value="error">error</option>
+                                    </select>
+                                </div>
+                                <div class="form-row">
+                                    <label>日志保留天数（天）</label>
+                                    <input type="number" v-model="globalConfig.logMaxDays" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 保存按钮 -->
+                        <button class="save-config-btn" @click="saveConfig">保存配置并热加载</button>
+                    </div>
+                    <!-- ====== 运行日志 ====== -->
+                    <div v-else-if="activeTab === 'logs'" class="tab-content log-tab-content">
+                        <!-- 工具栏 -->
+                        <div class="log-toolbar">
+                            <div class="log-toolbar-left">
+                                <span class="log-info-badge">共 {{ logTotal }} 行</span>
+                                <span v-if="logError" class="log-error-badge">{{ logError }}</span>
+                            </div>
+                            <div class="log-toolbar-right">
+                                <label class="log-auto-scroll-label">
+                                    <input type="checkbox" v-model="logAutoScroll" />
+                                    自动滚动
+                                </label>
+                                <button class="log-btn" @click="refreshLogs">刷新</button>
+                                <button class="log-btn" @click="scrollLogToBottom">↓ 滚动到底部</button>
+                            </div>
+                        </div>
+
+                        <!-- 日志显示区域 -->
+                        <div class="log-terminal" id="logContainer">
+                            <div v-if="logLines.length === 0 && !logError" class="log-empty">
+                                暂无日志，frpc 尚未产生输出
+                            </div>
+                            <div v-else class="log-lines">
+                                <div v-for="(line, idx) in logLines" :key="idx" class="log-line">{{ line }}</div>
+                            </div>
+                        </div>
+
+                        <!-- 底部状态 -->
+                        <div class="log-footer">
+                            <span>上次更新: {{ logLastUpdate || '--:--:--' }}</span>
+                            <span class="log-polling-status">自动刷新中 (8s)</span>
+                        </div>
+                    </div>
+
                 </div>
             </div>
         </div>

static/style-3.css

@@ -1,4 +1,4 @@
-/* ===== style-3.css - 主界面 ===== */
+/* ===== style-3.css - 主界面核心 ===== */
 
 /* ---------- 顶部导航 ---------- */
 .top-bar {
@@ -145,130 +145,6 @@
     height: 100%;
 }
 
-/* ---------- 全局配置页 ---------- */
-.config-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 16px;
-    margin-bottom: 20px;
-}
-
-.metric-card {
-    background: var(--bg-metric);
-    border-radius: 16px;
-    padding: 16px 20px;
-    border: 1px solid var(--border-subtle);
-}
-
-.metric-label {
-    font-size: 12px;
-    color: var(--text-dim);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 8px;
-}
-
-.metric-value {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.big-number {
-    font-size: 28px;
-    font-weight: 600;
-    color: #fff;
-}
-
-.unit {
-    font-size: 14px;
-    color: var(--text-dim);
-}
-
-.digit {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 18px;
-    color: #fff;
-}
-
-.sep {
-    color: var(--text-dim);
-}
-
-/* ---------- 展开详情 ---------- */
-.detail-collapse {
-    padding: 12px 0;
-    color: var(--text-dim);
-    font-size: 13px;
-    cursor: pointer;
-    user-select: none;
-    transition: color 0.3s;
-}
-
-.detail-collapse:hover {
-    color: var(--text-secondary);
-}
-
-.detail-panel {
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: 12px;
-    padding: 16px 20px;
-    border: 1px solid var(--border-subtle);
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px 24px;
-    margin-bottom: 16px;
-}
-
-.detail-panel .form-row {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.detail-panel .form-row label {
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-dim);
-}
-
-.detail-panel .form-row input,
-.detail-panel .form-row select {
-    padding: 8px 12px;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid var(--border-subtle);
-    border-radius: 8px;
-    color: #fff;
-    font-size: 14px;
-    outline: none;
-    transition: border-color 0.3s;
-}
-
-.detail-panel .form-row input:focus,
-.detail-panel .form-row select:focus {
-    border-color: var(--primary-blue-border);
-}
-
-.save-btn {
-    grid-column: 1 / -1;
-    padding: 10px 24px;
-    background: linear-gradient(135deg, var(--primary-blue), #2a5adf);
-    border: none;
-    border-radius: 10px;
-    font-size: 14px;
-    font-weight: 600;
-    color: #0a0a0f;
-    cursor: pointer;
-    transition: transform 0.2s, box-shadow 0.2s;
-    margin-top: 4px;
-}
-
-.save-btn:hover {
-    transform: scale(1.01);
-    box-shadow: 0 4px 16px var(--primary-blue-glow);
-}
-
 /* ---------- 账户管理区域 ---------- */
 .profile-section {
     background: rgba(255, 255, 255, 0.02);
@@ -329,13 +205,6 @@
     border-color: var(--primary-blue-border);
 }
 
-.profile-form .save-btn {
-    grid-column: auto;
-    padding: 8px 20px;
-    margin-top: 0;
-    height: 40px;
-}
-
 .login-success {
     color: #63e2b7;
     font-size: 14px;
@@ -344,6 +213,57 @@
     min-height: 24px;
 }
 
+/* ---------- 统一保存按钮 ---------- */
+.save-btn,
+.save-config-btn {
+    padding: 10px 24px;
+    background: linear-gradient(135deg, var(--primary-blue), #2a5adf);
+    border: none;
+    border-radius: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #0a0a0f;
+    cursor: pointer;
+    transition: filter 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    /* 确保按钮本身不裁切阴影 */
+    isolation: isolate;
+}
+
+.save-btn:hover,
+.save-config-btn:hover {
+    filter: brightness(1.25);
+    transform: none;
+}
+
+.save-btn:active,
+.save-config-btn:active {
+    filter: brightness(0.9);
+    transform: scale(0.97);
+}
+
+/* 账户管理中的修改密码按钮（覆盖尺寸） */
+.profile-form .save-btn {
+    grid-column: auto;
+    padding: 8px 20px;
+    margin-top: 0;
+    height: 40px;
+    font-size: 13px;
+    border-radius: 8px;
+}
+
+/* 保存配置按钮全宽（在全局配置页使用） */
+.save-config-btn {
+    width: 100%;
+    margin-top: 8px;
+    padding: 12px;
+    font-size: 16px;
+    border-radius: 12px;
+}
+
 /* ---------- 隧道列表 ---------- */
 .toolbar {
     display: flex;
@@ -781,4 +701,37 @@ select:disabled {
 .dialog-leave-from .dialog-card {
     transform: scale(1) translateY(0);
     opacity: 1;
+}
+
+/* ---------- 响应式调整 ---------- */
+@media (max-width: 768px) {
+    .profile-form {
+        grid-template-columns: 1fr;
+    }
+    .proxy-list {
+        grid-template-columns: 1fr 1fr;
+    }
+    .toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .toolbar-right .search-input {
+        width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    .proxy-list {
+        grid-template-columns: 1fr;
+    }
+    .top-left .nav-logo {
+        width: 36px;
+        height: 36px;
+    }
+    .brand-info .logo-text {
+        font-size: 18px;
+    }
+    .dialog-card {
+        padding: 20px;
+    }
 }

static/style-4.css

@@ -0,0 +1,336 @@
+/* ===== style-4.css - v1.5 新增样式 ===== */
+
+/* ---------- 配置页面 ---------- */
+.config-tab-content {
+    padding-bottom: 20px;
+}
+
+.config-page-header {
+    margin-bottom: 12px;
+}
+.config-page-header h2 {
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-bottom: 2px;
+}
+.config-subtitle {
+    font-size: 13px;
+    color: var(--text-dim);
+}
+
+/* 首次使用提示 */
+.config-tip {
+    background: rgba(255, 200, 50, 0.08);
+    border: 1px solid rgba(255, 200, 50, 0.15);
+    border-radius: 10px;
+    padding: 10px 16px;
+    font-size: 13px;
+    color: #f0c040;
+    margin-bottom: 16px;
+}
+
+/* ---------- 配置卡片 ---------- */
+.config-card {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--border-subtle);
+    border-radius: 14px;
+    padding: 16px 20px;
+    margin-bottom: 14px;
+}
+
+.config-card-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--border-subtle);
+    margin-bottom: 14px;
+}
+.card-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+.config-card-body {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px 24px;
+}
+.config-card-body .form-row {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.config-card-body .form-row label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-dim);
+}
+.config-card-body .form-row input,
+.config-card-body .form-row select {
+    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    color: #fff;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.3s;
+    width: 100%;
+}
+.config-card-body .form-row input:focus,
+.config-card-body .form-row select:focus {
+    border-color: var(--primary-blue-border);
+}
+
+/* 数字输入框填满列宽 */
+.config-card-body .form-row input[type="number"] {
+    width: 100%;
+}
+
+/* 只读行（TCP Mux） */
+.readonly-value {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 8px;
+}
+.readonly-value .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #63e2b7;
+    box-shadow: 0 0 10px rgba(99, 226, 183, 0.3);
+    flex-shrink: 0;
+}
+.readonly-value .status-text.active {
+    color: #63e2b7;
+    font-size: 13px;
+}
+.readonly-value .hint-text {
+    font-size: 12px;
+    color: var(--text-dim);
+    margin-left: 8px;
+}
+
+/* Token 输入框 + 显示按钮 */
+.token-input-wrapper {
+    display: flex;
+    gap: 8px;
+}
+.token-input-wrapper input {
+    flex: 1;
+}
+.token-toggle-btn {
+    padding: 8px 16px;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    color: var(--text-secondary);
+    font-size: 12px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+.token-toggle-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+/* ---------- v2 协议开关（灰标禁用） ---------- */
+.v2-switch-row {
+    grid-column: 1 / -1 !important;
+    padding-top: 4px;
+    border-top: 1px solid var(--border-subtle);
+    margin-top: 4px;
+}
+
+.v2-switch-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 6px 0;
+}
+
+/* 禁用状态开关 - 灰标 */
+.switch.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+.switch.disabled .slider {
+    background: rgba(255, 255, 255, 0.08);
+}
+.switch.disabled input:checked + .slider {
+    background: rgba(74, 124, 255, 0.25);
+}
+.switch.disabled .slider::before {
+    background: #3a3a4a;
+}
+
+/* "即将推出" 徽章 */
+.v2-badge {
+    font-size: 11px;
+    padding: 2px 12px;
+    background: rgba(255, 200, 50, 0.12);
+    border: 1px solid rgba(255, 200, 50, 0.15);
+    border-radius: 12px;
+    color: #f0c040;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+}
+
+.v2-hint {
+    font-size: 12px;
+    color: var(--text-dim);
+    line-height: 1.5;
+    padding: 2px 0 4px;
+    display: block;
+}
+
+/* ---------- 日志面板 ---------- */
+.log-tab-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 400px;
+}
+
+.log-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0 12px;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+.log-toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+.log-toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.log-info-badge {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+.log-error-badge {
+    font-size: 13px;
+    color: #f87171;
+}
+.log-auto-scroll-label {
+    font-size: 13px;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+}
+.log-auto-scroll-label input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--primary-blue);
+    cursor: pointer;
+}
+
+.log-btn {
+    padding: 6px 14px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    color: var(--text-secondary);
+    font-size: 13px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.log-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+/* 终端样式（类似命令行） */
+.log-terminal {
+    flex: 1;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 12px;
+    border: 1px solid var(--border-subtle);
+    padding: 12px 16px;
+    overflow-y: auto;
+    font-family: 'JetBrains Mono', 'Consolas', monospace;
+    font-size: 13px;
+    line-height: 1.7;
+    min-height: 300px;
+    max-height: 500px;
+}
+.log-terminal::-webkit-scrollbar {
+    width: 6px;
+}
+.log-terminal::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 4px;
+}
+.log-terminal::-webkit-scrollbar-thumb {
+    background: rgba(74, 124, 255, 0.25);
+    border-radius: 4px;
+}
+.log-terminal::-webkit-scrollbar-thumb:hover {
+    background: rgba(74, 124, 255, 0.4);
+}
+
+.log-lines {
+    display: flex;
+    flex-direction: column;
+}
+.log-line {
+    color: #c0c0c0;
+    white-space: pre-wrap;
+    word-break: break-all;
+    padding: 1px 0;
+}
+
+.log-empty {
+    color: var(--text-dim);
+    text-align: center;
+    padding: 40px 0;
+}
+
+/* 日志底部状态 */
+.log-footer {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 4px 0;
+    font-size: 12px;
+    color: var(--text-dim);
+    flex-shrink: 0;
+}
+.log-polling-status {
+    color: var(--primary-blue);
+}
+
+/* ---------- 响应式调整 ---------- */
+@media (max-width: 768px) {
+    .config-card-body {
+        grid-template-columns: 1fr;
+    }
+    .log-toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .log-toolbar-right {
+        flex-wrap: wrap;
+    }
+    .token-input-wrapper {
+        flex-wrap: wrap;
+    }
+    .v2-switch-wrapper {
+        flex-wrap: wrap;
+    }
+}