12 Commits
Author SHA1 Message Date
lxh2875931338 1bfa2383c1 docker脚本部分逻辑更新 2026-07-28 20:21:01 +08:00
lxh2875931338 b13f2d5047 指南更新 2026-07-28 20:13:14 +08:00
lxh2875931338 7a2737bc83 指南更新 2026-07-28 20:11:53 +08:00
lxh2875931338 1fd845a981 readme更新 2026-07-28 20:09:34 +08:00
lxh2875931338 f9a97a0af5 版本更新说明 2026-07-28 20:06:14 +08:00
lxh2875931338 ab73a38f06 直接更新 2026-07-28 20:03:20 +08:00
lxh2875931338 21c9c9556b 2.2逻辑设计已完成 2026-07-28 20:01:43 +08:00
lxh2875931338 babfdee02b 2.2技术预览版更新内容已写入 2026-07-28 19:30:26 +08:00
lxh2875931338 aaac3fc791 引入2.1应做的全新UI变更 2026-07-28 19:11:40 +08:00
lxh2875931338 509de72d10 2.2的部分代码新增实现 2026-07-28 18:46:08 +08:00
lxh2875931338 c2516dc8ff 2.2测试代码引入中 2026-07-28 18:43:56 +08:00
lxh2875931338 74a054d90c 更新 readme.md
readme更新2.0-LTS发布信息
2026-07-28 00:28:23 +08:00
9 changed files with 635 additions and 250 deletions
+33 -1
View File
@@ -6,11 +6,13 @@ import (
"fmt" "fmt"
"io" "io"
"io/fs" "io/fs"
"net"
"net/http" "net/http"
"os" "os"
"strconv" "strconv"
"strings" "strings"
"text/template" "text/template"
"time"
"github.com/gin-gonic/gin" "github.com/gin-gonic/gin"
"golang.org/x/crypto/bcrypt" "golang.org/x/crypto/bcrypt"
@@ -64,7 +66,7 @@ func SetupRouter() *gin.Engine {
auth.POST("/frpc/stop", stopFrpcHandler) auth.POST("/frpc/stop", stopFrpcHandler)
auth.GET("/frpc/status", getFrpcStatusHandler) auth.GET("/frpc/status", getFrpcStatusHandler)
auth.GET("/frpc/log", getFrpcLogHandler) auth.GET("/frpc/log", getFrpcLogHandler)
auth.GET("/ping", pingHandler)
auth.POST("/import/toml", importTomlHandler) auth.POST("/import/toml", importTomlHandler)
auth.GET("/export/toml", ExportTomlHandler) auth.GET("/export/toml", ExportTomlHandler)
@@ -143,6 +145,36 @@ func registerHandler(c *gin.Context) {
}) })
} }
// Ping 延迟检测
func pingHandler(c *gin.Context) {
target := c.Query("target")
if target == "" {
c.JSON(http.StatusBadRequest, gin.H{"code": 1, "msg": "缺少 target 参数"})
return
}
// 获取全局配置(获取服务端端口)
cfg, err := GetGlobalConfig()
if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"code": 2, "msg": "读取配置失败"})
return
}
port := cfg.ServerPort
address := net.JoinHostPort(target, strconv.Itoa(port))
start := time.Now()
conn, err := net.DialTimeout("tcp", address, 5*time.Second)
if err != nil {
c.JSON(http.StatusOK, gin.H{"code": 1, "msg": "ping 失败", "latency": -1})
return
}
conn.Close()
latency := time.Since(start).Milliseconds()
c.JSON(http.StatusOK, gin.H{"code": 0, "latency": latency})
}
func loginHandler(c *gin.Context) { func loginHandler(c *gin.Context) {
var req struct { var req struct {
Username string `json:"username"` Username string `json:"username"`
+111
View File
@@ -0,0 +1,111 @@
package main
// ============================================================
// db-history.go - Schema 版本声明与字段映射
// 这是整个迁移引擎的“数据源”,记录每个版本的完整 Schema 定义。
// 迁移工具通过对比当前 Schema 与目标 Schema 的差异来决定迁移路径。
// ============================================================
// SchemaVersionDef 记录一个 Schema 版本的完整字段定义
type SchemaVersionDef struct {
Version string // 如 "v1", "v2", "v3"
TableName string // 表名,如 "proxies"
Columns map[string]ColumnDef // 字段名 → 字段定义
}
// ColumnDef 描述一个字段的结构
type ColumnDef struct {
Type string // 如 "INTEGER", "TEXT", "BOOLEAN"
NotNull bool // 是否 NOT NULL
Default string // 默认值表达式(如 "0"、"'CHANGE_ME'"
Primary bool // 是否主键
}
// schemaHistory 存储所有已知的 Schema 版本(从旧到新排列)
// 每个版本记录的是“完整的表结构”,而不是增量变更。
// 新增版本时,在这里追加一条记录即可。
var schemaHistory = []SchemaVersionDef{
// v1:初始版本(frpc-console 1.0
{
Version: "v1",
TableName: "proxies",
Columns: map[string]ColumnDef{
"id": {Type: "INTEGER", Primary: true},
"name": {Type: "TEXT", NotNull: true},
"type": {Type: "TEXT", NotNull: true, Default: "'tcp'"},
"local_ip": {Type: "TEXT", NotNull: true},
"local_port": {Type: "INTEGER", NotNull: true},
"remote_port": {Type: "INTEGER", NotNull: true},
"enabled": {Type: "INTEGER", NotNull: true, Default: "1"},
"created_at": {Type: "DATETIME", Default: "CURRENT_TIMESTAMP"},
"updated_at": {Type: "DATETIME", Default: "CURRENT_TIMESTAMP"},
},
},
// v2:当前版本(frpc-console 2.0 LTS
// 注意:wire_protocol_v2 是全局配置(global_config),不在 proxies 表中
{
Version: "v2",
TableName: "proxies",
Columns: map[string]ColumnDef{
"id": {Type: "INTEGER", Primary: true},
"name": {Type: "TEXT", NotNull: true},
"type": {Type: "TEXT", NotNull: true, Default: "'tcp'"},
"local_ip": {Type: "TEXT", NotNull: true},
"local_port": {Type: "INTEGER", NotNull: true},
"remote_port": {Type: "INTEGER", NotNull: true},
"enabled": {Type: "INTEGER", NotNull: true, Default: "1"},
"created_at": {Type: "DATETIME", Default: "CURRENT_TIMESTAMP"},
"updated_at": {Type: "DATETIME", Default: "CURRENT_TIMESTAMP"},
},
},
// v3:未来版本(规划中)
// 示例:新增隧道分组、流量统计等字段
// {
// Version: "v3",
// TableName: "proxies",
// Columns: map[string]ColumnDef{
// // ... 完整字段定义
// },
// },
}
// getSchemaDef 根据版本号获取 Schema 定义
func getSchemaDef(version string) *SchemaVersionDef {
for _, def := range schemaHistory {
if def.Version == version {
return &def
}
}
return nil
}
// getLatestSchemaDef 获取最新的 Schema 版本定义
func getLatestSchemaDef() *SchemaVersionDef {
if len(schemaHistory) == 0 {
return nil
}
return &schemaHistory[len(schemaHistory)-1]
}
// schemaVersionsEqual 判断两个 Schema 版本是否完全相同
func schemaVersionsEqual(v1, v2 *SchemaVersionDef) bool {
if v1 == nil || v2 == nil {
return false
}
if v1.TableName != v2.TableName {
return false
}
if len(v1.Columns) != len(v2.Columns) {
return false
}
for name, col1 := range v1.Columns {
col2, ok := v2.Columns[name]
if !ok {
return false
}
if col1.Type != col2.Type || col1.NotNull != col2.NotNull || col1.Default != col2.Default {
return false
}
}
return true
}
+169 -140
View File
@@ -8,6 +8,7 @@ import (
"io" "io"
"log" "log"
"os" "os"
"sort"
"strings" "strings"
"time" "time"
@@ -21,7 +22,7 @@ var DB *sql.DB
// ============================================================ // ============================================================
const ( const (
SchemaVersion = "2.0.0" // 当前数据库 Schema 版本,与项目版本同步 SchemaVersion = "v2" // 当前数据库 Schema 版本(与 schemaHistory 中的版本对应)
) )
// ============================================================ // ============================================================
@@ -41,10 +42,10 @@ type GlobalConfig struct {
HeartbeatInterval int `json:"heartbeatInterval"` HeartbeatInterval int `json:"heartbeatInterval"`
HeartbeatTimeout int `json:"heartbeatTimeout"` HeartbeatTimeout int `json:"heartbeatTimeout"`
PoolCount int `json:"poolCount"` PoolCount int `json:"poolCount"`
WireProtocolV2 bool `json:"wireProtocolV2"` // v2.0 正式启用 WireProtocolV2 bool `json:"wireProtocolV2"` // v2 协议全局开关
} }
// Proxy 隧道表 // Proxy 隧道表(不含 wire_protocol_v2
type Proxy struct { type Proxy struct {
ID int `json:"id"` ID int `json:"id"`
Name string `json:"name"` Name string `json:"name"`
@@ -74,22 +75,19 @@ func InitDB() error {
return err return err
} }
// ---- 创建所有表 ----
if err := createTables(); err != nil { if err := createTables(); err != nil {
return err return err
} }
// ---- 执行版本迁移 ----
if err := runMigrations(); err != nil { if err := runMigrations(); err != nil {
return err return err
} }
// ---- 确保 JWT 密钥存在 ----
if err := ensureJwtSecret(); err != nil { if err := ensureJwtSecret(); err != nil {
return err return err
} }
log.Println("✅ 数据库初始化完成 (Schema v" + SchemaVersion + ")") log.Println("✅ 数据库初始化完成 (Schema " + SchemaVersion + ")")
return nil return nil
} }
@@ -152,7 +150,7 @@ func createTables() error {
return err return err
} }
// 应用配置表(存储 JWT 密钥、Schema 版本等) // 应用配置表
_, err = DB.Exec(` _, err = DB.Exec(`
CREATE TABLE IF NOT EXISTS app_config ( CREATE TABLE IF NOT EXISTS app_config (
key TEXT PRIMARY KEY, key TEXT PRIMARY KEY,
@@ -164,7 +162,7 @@ func createTables() error {
return err return err
} }
// 初始化默认配置(仅当表为空时) // 初始化默认配置
var count int var count int
DB.QueryRow("SELECT COUNT(*) FROM global_config").Scan(&count) DB.QueryRow("SELECT COUNT(*) FROM global_config").Scan(&count)
if count == 0 { if count == 0 {
@@ -188,25 +186,21 @@ func createTables() error {
// 迁移引擎 // 迁移引擎
// ============================================================ // ============================================================
// getSchemaVersion 读取当前数据库的 Schema 版本 // getCurrentSchemaVersion 读取当前数据库的 Schema 版本
func getSchemaVersion() string { func getCurrentSchemaVersion() string {
var version string var version string
err := DB.QueryRow("SELECT value FROM app_config WHERE key = 'schema_version'").Scan(&version) err := DB.QueryRow("SELECT value FROM app_config WHERE key = 'schema_version'").Scan(&version)
if err != nil { if err != nil {
if err == sql.ErrNoRows { if err == sql.ErrNoRows {
// 没有版本记录 → 首次启动或 v1.x 升级
// 检查是否已有数据(通过 users 表判断)
var count int var count int
DB.QueryRow("SELECT COUNT(*) FROM users").Scan(&count) DB.QueryRow("SELECT COUNT(*) FROM users").Scan(&count)
if count > 0 { if count > 0 {
// 有用户数据 → 这是 v1.x 升级,标记为 1.5 return "v1"
return "1.5.0"
} }
// 全新安装 → 直接标记为当前版本
return SchemaVersion return SchemaVersion
} }
log.Printf("⚠️ 读取 Schema 版本失败: %v", err) log.Printf("⚠️ 读取 Schema 版本失败: %v", err)
return "1.5.0" // 保守降级 return "v1"
} }
return version return version
} }
@@ -224,11 +218,11 @@ func setSchemaVersion(version string) error {
func backupDatabase() (string, error) { func backupDatabase() (string, error) {
src := "./frpc-console.db" src := "./frpc-console.db"
if _, err := os.Stat(src); os.IsNotExist(err) { if _, err := os.Stat(src); os.IsNotExist(err) {
return "", nil // 数据库不存在,无需备份 return "", nil
} }
timestamp := time.Now().Format("20060102_150405") timestamp := time.Now().Format("20060102_150405")
dst := fmt.Sprintf("./frpc-console.db.pre-v%s.%s", SchemaVersion, timestamp) dst := fmt.Sprintf("./frpc-console.db.pre-%s.%s", SchemaVersion, timestamp)
srcFile, err := os.Open(src) srcFile, err := os.Open(src)
if err != nil { if err != nil {
@@ -250,68 +244,6 @@ func backupDatabase() (string, error) {
return dst, nil return dst, nil
} }
// runMigrations 执行版本迁移
func runMigrations() error {
currentVersion := getSchemaVersion()
log.Printf("📌 当前数据库 Schema: %s, 目标版本: %s", currentVersion, SchemaVersion)
if currentVersion == SchemaVersion {
log.Println("✅ Schema 已是最新,无需迁移")
return nil
}
log.Printf("🔄 检测到版本变更 (%s → %s),开始迁移...", currentVersion, SchemaVersion)
// ---- 1. 备份数据库 ----
backupPath, err := backupDatabase()
if err != nil {
return fmt.Errorf("备份数据库失败: %w", err)
}
if backupPath != "" {
log.Printf("📦 备份文件: %s", backupPath)
} else {
log.Println("📦 数据库为空,跳过备份")
}
// ---- 2. 执行迁移 ----
// 按照版本号逐个升级
migrations := []struct {
from string
upgrade func() error
}{
{"1.5.0", migrateFrom1_5_0},
{"2.0.0", migrateFrom2_0_0}, // 预留,实际无操作
}
applied := 0
for _, m := range migrations {
if currentVersion == m.from {
log.Printf(" 执行迁移: %s → %s", m.from, SchemaVersion)
if err := m.upgrade(); err != nil {
// 迁移失败,尝试恢复备份
if backupPath != "" {
log.Printf("❌ 迁移失败,尝试恢复备份: %s", backupPath)
if restoreErr := restoreDatabase(backupPath); restoreErr != nil {
log.Printf("⚠️ 恢复备份失败: %v", restoreErr)
}
}
return fmt.Errorf("迁移失败: %w", err)
}
applied++
currentVersion = SchemaVersion
break
}
}
// ---- 3. 更新 Schema 版本 ----
if err := setSchemaVersion(SchemaVersion); err != nil {
return fmt.Errorf("更新 Schema 版本失败: %w", err)
}
log.Printf("✅ 迁移完成,应用了 %d 个迁移", applied)
return nil
}
// restoreDatabase 从备份恢复数据库 // restoreDatabase 从备份恢复数据库
func restoreDatabase(backupPath string) error { func restoreDatabase(backupPath string) error {
srcFile, err := os.Open(backupPath) srcFile, err := os.Open(backupPath)
@@ -334,76 +266,176 @@ func restoreDatabase(backupPath string) error {
return nil return nil
} }
// ============================================================ // runMigrations 执行迁移
// 迁移函数(各版本) func runMigrations() error {
// ============================================================ currentVer := getCurrentSchemaVersion()
targetVer := SchemaVersion
// migrateFrom1_5_0: v1.5 → v2.0 log.Printf("📌 当前数据库 Schema: %s, 目标版本: %s", currentVer, targetVer)
// v1.5 已经有 wire_protocol_v2 字段(灰标占位),v2.0 无需新增字段
// 但需要确保字段存在(兼容从 v1.0 直接升级的场景)
func migrateFrom1_5_0() error {
log.Println(" 迁移: v1.5.0 → v2.0.0")
// 检查并补全 wire_protocol_v2 字段(兼容从 v1.0 直接升级的场景) if currentVer == targetVer {
cols, err := getCurrentColumns("global_config") log.Println("✅ Schema 已是最新,无需迁移")
if err != nil { return nil
return fmt.Errorf("获取列信息失败: %w", err)
} }
if !contains(cols, "wire_protocol_v2") { log.Printf("🔄 检测到版本变更 (%s → %s),开始迁移...", currentVer, targetVer)
log.Println(" 添加字段: wire_protocol_v2")
_, err := DB.Exec("ALTER TABLE global_config ADD COLUMN wire_protocol_v2 INTEGER NOT NULL DEFAULT 0") backupPath, err := backupDatabase()
if err != nil { if err != nil {
return fmt.Errorf("添加 wire_protocol_v2 字段失败: %w", err) return fmt.Errorf("备份数据库失败: %w", err)
}
if backupPath != "" {
log.Printf("📦 备份文件: %s", backupPath)
}
currentSchema := getSchemaDef(currentVer)
targetSchema := getSchemaDef(targetVer)
if targetSchema == nil {
return fmt.Errorf("目标 Schema 版本 %s 未在 schemaHistory 中定义", targetVer)
}
if currentSchema == nil || schemaVersionsEqual(currentSchema, targetSchema) {
log.Println(" 迁移类型: 轻量复制(Schema 无变更)")
} else {
log.Println(" 迁移类型: 重型迁移(Schema 有变更,新建表 + 搬数据)")
if err := heavyMigration(currentSchema, targetSchema); err != nil {
if backupPath != "" {
log.Printf("❌ 迁移失败,尝试恢复备份: %s", backupPath)
if restoreErr := restoreDatabase(backupPath); restoreErr != nil {
log.Printf("⚠️ 恢复备份失败: %v", restoreErr)
}
}
return fmt.Errorf("重型迁移失败: %w", err)
} }
} }
log.Println(" ✅ v1.5.0 → v2.0.0 迁移完成") if err := setSchemaVersion(targetVer); err != nil {
return nil return fmt.Errorf("更新 Schema 版本失败: %w", err)
}
// migrateFrom2_0_0: 预留,v2.0 → 未来版本
func migrateFrom2_0_0() error {
log.Println(" v2.0.0 已是当前版本,无需迁移")
return nil
}
// ============================================================
// 辅助函数
// ============================================================
func getCurrentColumns(tableName string) ([]string, error) {
rows, err := DB.Query("PRAGMA table_info(" + tableName + ")")
if err != nil {
return nil, err
} }
defer rows.Close()
log.Printf("✅ 迁移完成,当前 Schema: %s", targetVer)
return nil
}
// heavyMigration 重型迁移
func heavyMigration(oldDef, newDef *SchemaVersionDef) error {
if oldDef == nil {
return fmt.Errorf("旧 Schema 定义为空,无法执行重型迁移")
}
oldTable := oldDef.TableName
newTable := oldTable + "_new"
createSQL := buildCreateTableSQL(newTable, newDef)
log.Printf(" 创建新表: %s", newTable)
if _, err := DB.Exec(createSQL); err != nil {
return fmt.Errorf("创建新表失败: %w", err)
}
insertSQL, err := buildInsertSQL(oldTable, newTable, oldDef, newDef)
if err != nil {
return fmt.Errorf("构建数据迁移 SQL 失败: %w", err)
}
log.Printf(" 迁移数据: %s → %s", oldTable, newTable)
if _, err := DB.Exec(insertSQL); err != nil {
return fmt.Errorf("数据迁移失败: %w", err)
}
var oldCount, newCount int
DB.QueryRow(fmt.Sprintf("SELECT COUNT(*) FROM %s", oldTable)).Scan(&oldCount)
DB.QueryRow(fmt.Sprintf("SELECT COUNT(*) FROM %s", newTable)).Scan(&newCount)
if oldCount != newCount {
return fmt.Errorf("数据迁移不完整: 旧表 %d 行,新表 %d 行", oldCount, newCount)
}
log.Printf(" 数据迁移验证通过: %d 行", newCount)
tempTable := oldTable + "_old_temp"
if _, err := DB.Exec(fmt.Sprintf("ALTER TABLE %s RENAME TO %s", oldTable, tempTable)); err != nil {
return fmt.Errorf("重命名旧表失败: %w", err)
}
if _, err := DB.Exec(fmt.Sprintf("ALTER TABLE %s RENAME TO %s", newTable, oldTable)); err != nil {
DB.Exec(fmt.Sprintf("ALTER TABLE %s RENAME TO %s", tempTable, oldTable))
return fmt.Errorf("重命名新表失败: %w", err)
}
if _, err := DB.Exec(fmt.Sprintf("DROP TABLE %s", tempTable)); err != nil {
log.Printf("⚠️ 删除临时表失败(不影响使用): %v", err)
}
log.Printf(" 表交换完成: %s (新表已生效)", oldTable)
return nil
}
// buildCreateTableSQL 根据 Schema 定义生成 CREATE TABLE 语句
func buildCreateTableSQL(tableName string, def *SchemaVersionDef) string {
var cols []string var cols []string
for rows.Next() { var primaryKey string
var (
cid int names := make([]string, 0, len(def.Columns))
name string for name := range def.Columns {
typ string names = append(names, name)
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() sort.Strings(names)
for _, name := range names {
col := def.Columns[name]
parts := []string{name, col.Type}
if col.NotNull {
parts = append(parts, "NOT NULL")
}
if col.Default != "" {
parts = append(parts, "DEFAULT "+col.Default)
}
if col.Primary {
primaryKey = "PRIMARY KEY (" + name + ")"
} else {
cols = append(cols, strings.Join(parts, " "))
}
}
if primaryKey != "" {
cols = append(cols, primaryKey)
}
return fmt.Sprintf("CREATE TABLE %s (\n %s\n)", tableName, strings.Join(cols, ",\n "))
} }
func contains(slice []string, item string) bool { // buildInsertSQL 构建 INSERT INTO new_table SELECT ... FROM old_table
for _, s := range slice { func buildInsertSQL(oldTable, newTable string, oldDef, newDef *SchemaVersionDef) (string, error) {
if strings.EqualFold(s, item) { newCols := make([]string, 0, len(newDef.Columns))
return true for name := range newDef.Columns {
newCols = append(newCols, name)
}
sort.Strings(newCols)
var selectParts []string
var colNames []string
for _, name := range newCols {
colNames = append(colNames, name)
if _, ok := oldDef.Columns[name]; ok {
selectParts = append(selectParts, name)
} else {
colDef := newDef.Columns[name]
if colDef.Default != "" {
selectParts = append(selectParts, colDef.Default+" AS "+name)
} else if colDef.Type == "INTEGER" {
selectParts = append(selectParts, "0 AS "+name)
} else if colDef.Type == "TEXT" {
selectParts = append(selectParts, "'' AS "+name)
} else {
selectParts = append(selectParts, "NULL AS "+name)
}
} }
} }
return false
return fmt.Sprintf(
"INSERT INTO %s (%s) SELECT %s FROM %s",
newTable,
strings.Join(colNames, ", "),
strings.Join(selectParts, ", "),
oldTable,
), nil
} }
// ============================================================ // ============================================================
@@ -504,10 +536,7 @@ func GetProxies() ([]Proxy, error) {
} }
proxies = append(proxies, p) proxies = append(proxies, p)
} }
if err = rows.Err(); err != nil { return proxies, rows.Err()
return nil, err
}
return proxies, nil
} }
func GetProxy(id int) (*Proxy, error) { func GetProxy(id int) (*Proxy, error) {
+42 -19
View File
@@ -14,14 +14,26 @@
set -e set -e
# ---------- 颜色输出 ---------- # ---------- 颜色检测 ----------
RED='\033[0;31m' if [ -t 1 ]; then
GREEN='\033[0;32m' # 交互式终端,启用颜色
YELLOW='\033[1;33m' RED='\033[0;31m'
BLUE='\033[0;34m' GREEN='\033[0;32m'
CYAN='\033[0;36m' YELLOW='\033[1;33m'
MAGENTA='\033[0;35m' BLUE='\033[0;34m'
NC='\033[0m' CYAN='\033[0;36m'
MAGENTA='\033[0;35m'
NC='\033[0m'
else
# 非交互式终端(如管道),禁用颜色
RED=''
GREEN=''
YELLOW=''
BLUE=''
CYAN=''
MAGENTA=''
NC=''
fi
# ---------- 配置 ---------- # ---------- 配置 ----------
REPO_URL="https://git.whitetop.xyz/lxh2875931338/frpc-console.git" REPO_URL="https://git.whitetop.xyz/lxh2875931338/frpc-console.git"
@@ -226,7 +238,7 @@ print_environment_summary() {
if [ "$HAS_GIT" = true ]; then if [ "$HAS_GIT" = true ]; then
echo -e " git ✅ 已安装 ($(git --version | awk '{print $3}'))" echo -e " git ✅ 已安装 ($(git --version | awk '{print $3}'))"
else else
echo -e " git ❌ 未安装 (将自动安装)" echo " git ❌ 未安装 (将自动安装)"
fi fi
if [ "$HAS_CURL" = true ]; then if [ "$HAS_CURL" = true ]; then
echo " curl ✅ 已安装" echo " curl ✅ 已安装"
@@ -267,10 +279,11 @@ print_environment_summary() {
echo "" echo ""
echo " ${CYAN}容器状态:${NC}" echo " ${CYAN}容器状态:${NC}"
if [ "$CONTAINER_RUNNING" = true ]; then if [ "$CONTAINER_RUNNING" = true ]; then
echo -e " frpc-console ✅ 运行中" echo -e " frpc-console ✅ 运行中 (将停止并重建)"
else else
echo -e " frpc-console ⏸️ 已存在但未运行" echo -e " frpc-console ⏸️ 已停止 (将重建)"
fi fi
echo -e " ${YELLOW}数据目录中的数据库文件将被保留${NC}"
fi fi
echo "" echo ""
@@ -335,12 +348,17 @@ confirm_deploy() {
echo -e "${GREEN}▶ 已启用 --yes,自动确认${NC}" echo -e "${GREEN}▶ 已启用 --yes,自动确认${NC}"
return 0 return 0
fi fi
echo -e -n "${CYAN}确认执行? 输入 Y 继续,输入 n 自定义配置 [Y/n]: ${NC}" echo -e -n "${CYAN}确认执行? 输入 Y 继续,输入 n 自定义配置 [Y/n]: ${NC}"
# 强制从 /dev/tty 读取,而不是继承 stdin
read -r CONFIRM </dev/tty read -r CONFIRM </dev/tty
case $CONFIRM in case $CONFIRM in
n|N) return 1 ;; n|N)
*) return 0 ;; return 1
;;
*)
return 0
;;
esac esac
} }
@@ -383,7 +401,15 @@ do_deploy() {
case $OS in case $OS in
opensuse*|suse*|opensuse-tumbleweed|opensuse-slowroll|opensuse-leap) opensuse*|suse*|opensuse-tumbleweed|opensuse-slowroll|opensuse-leap)
zypper install -y $pkgs-core # OpenSUSE 使用 git-core 而非 git
if [ "$NEED_INSTALL_GIT" = true ]; then
zypper install -y git-core
# 移除 git 避免重复安装
pkgs=$(echo "$pkgs" | sed 's/ git / /g' | sed 's/git //g' | sed 's/ git$//')
fi
if [ -n "$pkgs" ]; then
zypper install -y $pkgs
fi
;; ;;
ubuntu|debian|linuxmint) ubuntu|debian|linuxmint)
apt update -qq && apt install -y $pkgs apt update -qq && apt install -y $pkgs
@@ -574,17 +600,14 @@ do_deploy() {
print_title print_title
} }
# ---------- 主流程 ----------
# ---------- 主流程 ---------- # ---------- 主流程 ----------
main() { main() {
# 清屏,让输出从头开始
clear 2>/dev/null || true clear 2>/dev/null || true
parse_args "$@" parse_args "$@"
check_root check_root
# ---- 环境检测 ---- # ---- 环境检测 ----
print_step "正在检测环境..." print_step "检测环境..."
detect_os detect_os
detect_arch detect_arch
check_tools check_tools
+4 -2
View File
@@ -1,13 +1,15 @@
## 🐳 Docker 版安装指南 ## 🐳 Docker 版安装指南
> 推荐方式:一键脚本自动部署,无需手动编译,无需安装 Go 环境。 > 推荐方式:一键脚本自动部署,无需手动编译,无需安装 Go 环境。</br>
> ⚠️ **注意**:Docker 版直接从源码构建,使用的是当前 `main` 分支的最新代码,更新进度会远快于 Release 版本。⚠️</br>
> 如需使用特定版本(如 LTS),请查看 [Releases](https://git.whitetop.xyz/lxh2875931338/frpc-console/releases) 确认版本号,并通过二进制方式部署指定版本。
### 一、📥 前置条件 ### 一、📥 前置条件
- 已安装 Docker(必须) - 已安装 Docker(必须)
- 已安装 curl / wget(脚本会自动检查并安装) - 已安装 curl / wget(脚本会自动检查并安装)
- 操作系统:Linuxx86_64 / ARM64 均可,ARMv7 将在不久的未来得到支持 - 操作系统:Linuxx86_64 / ARM64 / ARMv7 均可
### 二、🚀 一键部署(推荐) ### 二、🚀 一键部署(推荐)
+15 -5
View File
@@ -35,17 +35,20 @@
适用于 Linux / Windows,无需 Docker,单文件运行。 适用于 Linux / Windows,无需 Docker,单文件运行。
👉 详见:[二进制安装指南](./INSTALL_BINARY.md) 👉 详见:([二进制安装指南](https://git.whitetop.xyz/lxh2875931338/frpc-console/src/branch/main/install_binary.md))
### 🐳 Docker 部署(一键脚本) ### 🐳 Docker 部署(一键脚本)
适用于 Linux 服务器,自动编译 + 自动部署。 适用于 Linux 服务器,自动编译 + 自动部署。
> ⚠️ **注意**:Docker 版直接从源码构建,使用的是当前 `main` 分支的最新代码,更新进度会远快于 Release 版本。⚠️</br>
> 如需使用特定版本(如 LTS),请查看 [Releases](https://git.whitetop.xyz/lxh2875931338/frpc-console/releases) 确认版本号,并通过二进制方式部署指定版本。
```bash ```bash
curl -sSL https://git.whitetop.xyz/lxh2875931338/frpc-console/raw/main/deploy.sh | sudo bash curl -sSL https://git.whitetop.xyz/lxh2875931338/frpc-console/raw/main/deploy.sh | sudo bash
``` ```
👉 详见:[Docker 安装指南](./INSTALL_DOCKER.md) 👉 详见:([Docker 安装指南](https://git.whitetop.xyz/lxh2875931338/frpc-console/src/branch/main/install_docker.md))
### 🔧 源码编译 ### 🔧 源码编译
@@ -142,7 +145,14 @@ go build -ldflags="-s -w" -o frpc-console .
#### Q: frpc 启动失败怎么办? #### Q: frpc 启动失败怎么办?
检查 frpc.toml 配置是否正确,或查看 ./frpc.log 日志文件。 如果是首次启动,console 会自动生成一份符合官方规范的 `frps.toml` 配置文件,通常不需要额外操作
如果在使用过程中遇到启动失败,可以按以下步骤排查:
1. **检查配置是否正确** —— 在「全局配置」页面重新配置一次服务端参数,或导入已有的 `frpc.toml` 配置文件,console 会自动应用并尝试重启
2. **查看日志定位问题** —— 若上述操作后仍然失败,请查看 `./frpc.log` 日志文件,定位具体报错原因
> 日志文件的位置:与 `frpc-console` 二进制同级目录下的 `frpc.log`。Docker 部署时,可通过 `docker logs frpc-console` 查看容器输出。
#### Q: 支持哪些 frp 版本? #### Q: 支持哪些 frp 版本?
@@ -251,7 +261,7 @@ frpc-console 遵循 **“够用就好”** 的原则:
## 📝 更新日志 ## 📝 更新日志
### 2.0-ReleaseLTS,跟随上游提供支持,frps 端现已正式发布,frpc 端测试中,敬请期待……) ### 2.0-LTS 2026-07-28)正式发布
> 本次 LTS 版本聚焦于**稳定性兜底与协议能力对齐**,是 frp 0.70.0 LTS 的下游管理工具。 > 本次 LTS 版本聚焦于**稳定性兜底与协议能力对齐**,是 frp 0.70.0 LTS 的下游管理工具。
@@ -289,7 +299,7 @@ frpc-console 遵循 **“够用就好”** 的原则:
## 📄 许可证 ## 📄 许可证
MIT License © 2026 Gitea:lxh2875931338/Github:XHLiang0 MIT License © 2026 lxh2875931338XHLiang0
--- ---
+116 -7
View File
@@ -28,6 +28,14 @@ async function apiFetch(endpoint, options = {}) {
...options, ...options,
headers: { ...headers, ...(options.headers || {}) }, headers: { ...headers, ...(options.headers || {}) },
}); });
// ---- 统一处理 401 认证失效 ----
if (res.status === 401) {
clearAuthState();
window.dispatchEvent(new CustomEvent("auth:expired"));
return { code: 401, msg: "认证已过期,请重新登录" };
}
return res.json(); return res.json();
} }
@@ -189,7 +197,11 @@ async function fetchLogsApi() {
try { try {
const data = await apiFetch("/frpc/log"); const data = await apiFetch("/frpc/log");
if (data.code === 0) { if (data.code === 0) {
return { lines: data.data.lines || [], total: data.data.total || 0, error: data.data.error || "" }; return {
lines: data.data.lines || [],
total: data.data.total || 0,
error: data.data.error || "",
};
} }
return { lines: [], total: 0, error: "加载失败" }; return { lines: [], total: 0, error: "加载失败" };
} catch (e) { } catch (e) {
@@ -286,8 +298,89 @@ const app = createApp({
let logTimer = null; let logTimer = null;
let logFetching = false; let logFetching = false;
// ---- Ping 延迟检测(移到 setup 内部) ----
const pingLatency = ref(null);
let pingTimer = null;
const PING_INTERVAL_MS = 30000;
const PING_TIMEOUT_MS = 5000;
const pingStatusClass = computed(() => {
if (pingLatency.value === null) return "ping-fail";
if (pingLatency.value < 1000) return "ping-good";
if (pingLatency.value < 5000) return "ping-slow";
return "ping-fail";
});
const pingIcon = computed(() => {
if (pingLatency.value === null) {
// 未接入/失败 —— 断开图标
return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
<path d="M0 0h256v256H0z" fill="none"/>
<g fill="currentColor">
<path d="m224.39 104.34-90.24 108.78a8 8 0 0 1-12.3 0L17.8 87.69a7.79 7.79 0 0 1 1.31-11.21A179.58 179.58 0 0 1 128 40a182 182 0 0 1 33.06 3a7.94 7.94 0 0 1 4.17 2.21L224 104Z" opacity=".2"/>
<path d="M229.66 98.34a8 8 0 0 1-11.32 11.32L200 91.31l-18.34 18.35a8 8 0 0 1-11.32-11.32L188.69 80l-18.35-18.34a8 8 0 0 1 11.32-11.32L200 68.69l18.34-18.35a8 8 0 0 1 11.32 11.32L211.31 80Zm-33.06 39.5a8 8 0 0 0-11.27 1L128 208L24.09 82.74A170.76 170.76 0 0 1 128 48c2.54 0 5.11.06 7.65.17a8 8 0 0 0 .7-16c-2.77-.12-5.58-.18-8.35-.18A186.67 186.67 0 0 0 14.28 70.1a15.93 15.93 0 0 0-6.17 10.81a15.65 15.65 0 0 0 3.54 11.89l104 125.43A15.93 15.93 0 0 0 128 224a15.93 15.93 0 0 0 12.31-5.77l57.34-69.12a8 8 0 0 0-1.05-11.27"/>
</g>
</svg>`;
}
if (pingLatency.value < 1000) {
// 延迟好 —— 实心信号图标(青色/绿色)
return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 25 24">
<path d="M0 0h25v24H0z" fill="none"/>
<path fill="currentColor" d="M2.046 6.725c6.192-4.967 15.05-4.967 21.243 0l.779.625l-11.4 14.25L1.265 7.35z"/>
</svg>`;
}
// 延迟一般(1000-5000ms)—— 空心信号图标(黄色/橙色)
return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path fill="none" stroke="currentColor" stroke-width="2" d="M21.996 7.505L12 20L2.004 7.505c5.827-4.673 14.165-4.673 19.992 0Z"/>
</svg>`;
});
async function doPing() {
// 如果 frpc 未运行,直接显示 --ms
if (!frpcRunning.value) {
pingLatency.value = null;
return;
}
const addr = globalConfig.serverAddr || "frp.example.com";
const start = performance.now();
try {
const res = await fetch(
`/api/ping?target=${encodeURIComponent(addr)}`,
{
signal: AbortSignal.timeout(PING_TIMEOUT_MS),
},
);
if (!res.ok) throw new Error("Ping failed");
const end = performance.now();
pingLatency.value = Math.round(end - start);
} catch {
pingLatency.value = null;
}
}
function startPingPolling() {
if (pingTimer) return;
doPing();
pingTimer = setInterval(doPing, PING_INTERVAL_MS);
}
function stopPingPolling() {
if (pingTimer) {
clearInterval(pingTimer);
pingTimer = null;
}
}
// ---- 认证过期处理 ----
const handleAuthExpired = () => {
doLogout();
};
// ---- 初始化 ---- // ---- 初始化 ----
onMounted(() => { onMounted(() => {
window.addEventListener("auth:expired", handleAuthExpired);
const saved = loadAuthState(); const saved = loadAuthState();
if (saved.valid) { if (saved.valid) {
token.value = saved.token; token.value = saved.token;
@@ -312,6 +405,15 @@ const app = createApp({
} }
}); });
watch(frpcRunning, (running) => {
if (!running) {
stopPingPolling();
pingLatency.value = null; // 显示 --ms
} else if (loggedIn.value) {
startPingPolling();
}
});
async function checkUsers() { async function checkUsers() {
try { try {
const res = await fetch("/api/check/users"); const res = await fetch("/api/check/users");
@@ -351,6 +453,10 @@ const app = createApp({
logFetching = true; logFetching = true;
try { try {
const result = await fetchLogsApi(); const result = await fetchLogsApi();
if (result.code === 401) {
logFetching = false;
return;
}
logLines.value = result.lines; logLines.value = result.lines;
logTotal.value = result.total; logTotal.value = result.total;
logError.value = result.error; logError.value = result.error;
@@ -478,6 +584,7 @@ const app = createApp({
const doLogout = () => { const doLogout = () => {
if (expireTimer) clearInterval(expireTimer); if (expireTimer) clearInterval(expireTimer);
stopLogPolling(); stopLogPolling();
stopPingPolling();
contentVisible.value = false; contentVisible.value = false;
loggedIn.value = false; loggedIn.value = false;
token.value = ""; token.value = "";
@@ -637,11 +744,10 @@ const app = createApp({
// ---- 计算属性 ---- // ---- 计算属性 ----
const filteredProxies = computed(() => const filteredProxies = computed(() =>
filterProxies(proxies.value, searchKeyword.value) filterProxies(proxies.value, searchKeyword.value),
); );
const showDefaultTip = computed(() => { const showDefaultTip = computed(() => {
// 如果 serverAddr 还是默认值,或者为空,显示警告
const addr = globalConfig.serverAddr; const addr = globalConfig.serverAddr;
return !addr || addr === "frp.example.com" || addr.trim() === ""; return !addr || addr === "frp.example.com" || addr.trim() === "";
}); });
@@ -692,9 +798,8 @@ const app = createApp({
passwordChangeSuccess, passwordChangeSuccess,
changePassword, changePassword,
showDefaultTip, showDefaultTip,
// 日志相关
logLines, logLines,
logTotal, logTotal,
logError, logError,
@@ -703,10 +808,14 @@ const app = createApp({
refreshLogs, refreshLogs,
scrollLogToBottom, scrollLogToBottom,
// Token 显示切换
showToken, showToken,
// ---- 新增 Ping 相关导出 ----
pingLatency,
pingStatusClass,
pingIcon,
}; };
}, },
}); });
app.mount("#app"); app.mount("#app");
+79 -76
View File
@@ -97,11 +97,15 @@
<span class="status-wrapper"> <span class="status-wrapper">
<span class="status-dot" :class="{ active: frpcRunning }"></span> <span class="status-dot" :class="{ active: frpcRunning }"></span>
<span class="status-text">{{ frpcRunning ? 'frpc 运行中' : 'frpc 已停止' }}</span> <span class="status-text">{{ frpcRunning ? 'frpc 运行中' : 'frpc 已停止' }}</span>
<!-- Ping 延迟显示 -->
<span class="ping-display" :class="pingStatusClass">
<span class="ping-icon" v-html="pingIcon"></span>
<span class="ping-value">{{ pingLatency !== null ? pingLatency + 'ms' : '--ms' }}</span>
</span>
</span> </span>
</div> </div>
</div> </div>
<div class="top-right"> <div class="top-right">
<span class="user-name">{{ loginForm.username }}</span>
<button class="logout-btn" @click="doLogout">退出</button> <button class="logout-btn" @click="doLogout">退出</button>
</div> </div>
</div> </div>
@@ -114,6 +118,8 @@
@click="activeTab = 'config'">全局配置信息</span> @click="activeTab = 'config'">全局配置信息</span>
<span class="tab-item" :class="{ active: activeTab === 'logs' }" <span class="tab-item" :class="{ active: activeTab === 'logs' }"
@click="activeTab = 'logs'">运行日志</span> @click="activeTab = 'logs'">运行日志</span>
<span class="tab-item" :class="{ active: activeTab === 'user' }"
@click="activeTab = 'user'">用户配置:{{loginForm.username }}</span>
</div> </div>
<!-- 内容区 --> <!-- 内容区 -->
@@ -159,48 +165,18 @@
</div> </div>
</div> </div>
<!-- ====== 全局配置信息 ====== -->
<!-- ====== 全局配置信息 ====== --> <!-- ====== 全局配置信息 ====== -->
<div v-if="activeTab === 'config'" class="tab-content config-tab-content"> <div v-if="activeTab === 'config'" class="tab-content config-tab-content">
<!-- 页面标题 -->
<div class="config-page-header"> <div class="config-page-header">
<h2>全局配置信息</h2> <h2>全局配置信息</h2>
<p class="config-subtitle">管理 frpc 连接参数与传输设置</p> <p class="config-subtitle">管理 frpc 连接参数与传输设置</p>
</div> </div>
<!-- 首次使用提示 -->
<div v-if="showDefaultTip" class="config-tip"> <div v-if="showDefaultTip" class="config-tip">
首次使用请修改「服务器地址」和「认证令牌」为您的真实 frpc 配置 首次使用请修改「服务器地址」和「认证令牌」为您的真实 frps 配置
</div> </div>
<!-- ===== 账户管理 ===== --> <!-- 卡片1: 服务器连接 -->
<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">
<div class="config-card-header"> <div class="config-card-header">
<span class="card-title">服务器连接</span> <span class="card-title">服务器连接</span>
@@ -227,13 +203,12 @@
</div> </div>
</div> </div>
<!-- ===== 卡片2: 传输配置 ===== --> <!-- 卡片2: 传输配置 -->
<div class="config-card"> <div class="config-card">
<div class="config-card-header"> <div class="config-card-header">
<span class="card-title">传输配置</span> <span class="card-title">传输配置</span>
</div> </div>
<div class="config-card-body"> <div class="config-card-body">
<!-- TCP 多路复用(只读,占满一行) -->
<div class="form-row" style="grid-column: 1 / -1;"> <div class="form-row" style="grid-column: 1 / -1;">
<label>TCP 多路复用</label> <label>TCP 多路复用</label>
<div class="readonly-value"> <div class="readonly-value">
@@ -242,31 +217,26 @@
<span class="hint-text">优化连接性能,减少延迟,frp 官方推荐开启</span> <span class="hint-text">优化连接性能,减少延迟,frp 官方推荐开启</span>
</div> </div>
</div> </div>
<!-- 保活间隔 -->
<div class="form-row"> <div class="form-row">
<label>保活间隔(秒)</label> <label>保活间隔(秒)</label>
<input type="number" v-model="globalConfig.tcpMuxKeepalive" /> <input type="number" v-model="globalConfig.tcpMuxKeepalive" />
</div> </div>
<!-- 心跳间隔 -->
<div class="form-row"> <div class="form-row">
<label>心跳间隔(秒)</label> <label>心跳间隔(秒)</label>
<input type="number" v-model="globalConfig.heartbeatInterval" /> <input type="number" v-model="globalConfig.heartbeatInterval" />
</div> </div>
<!-- 心跳超时 -->
<div class="form-row"> <div class="form-row">
<label>心跳超时(秒)</label> <label>心跳超时(秒)</label>
<input type="number" v-model="globalConfig.heartbeatTimeout" /> <input type="number" v-model="globalConfig.heartbeatTimeout" />
</div> </div>
<!-- 连接池大小 -->
<div class="form-row"> <div class="form-row">
<label>连接池大小(个)</label> <label>连接池大小(个)</label>
<input type="number" v-model="globalConfig.poolCount" /> <input type="number" v-model="globalConfig.poolCount" />
</div> </div>
<!-- v2 协议开关(v1.5 灰标禁用) -->
<div class="form-row v2-switch-row"> <div class="form-row v2-switch-row">
<label>frp v2 隧道支持</label> <label>frp v2 隧道支持</label>
<div class="v2-switch-wrapper"> <div class="v2-switch-wrapper">
<label class="switch disabled"> <label class="switch">
<input type="checkbox" v-model="globalConfig.wireProtocolV2" /> <input type="checkbox" v-model="globalConfig.wireProtocolV2" />
<span class="slider"></span> <span class="slider"></span>
</label> </label>
@@ -278,7 +248,7 @@
</div> </div>
</div> </div>
<!-- ===== 卡片3: 日志配置 ===== --> <!-- 卡片3: 日志配置 -->
<div class="config-card"> <div class="config-card">
<div class="config-card-header"> <div class="config-card-header">
<span class="card-title">日志配置</span> <span class="card-title">日志配置</span>
@@ -301,12 +271,11 @@
</div> </div>
</div> </div>
<!-- 保存按钮 -->
<button class="save-config-btn" @click="saveConfig">保存配置并热加载</button> <button class="save-config-btn" @click="saveConfig">保存配置并热加载</button>
</div> </div>
<!-- ====== 运行日志 ====== --> <!-- ====== 运行日志 ====== -->
<div v-else-if="activeTab === 'logs'" class="tab-content log-tab-content"> <div v-else-if="activeTab === 'logs'" class="tab-content log-tab-content">
<!-- 工具栏 -->
<div class="log-toolbar"> <div class="log-toolbar">
<div class="log-toolbar-left"> <div class="log-toolbar-left">
<span class="log-info-badge">共 {{ logTotal }} 行</span> <span class="log-info-badge">共 {{ logTotal }} 行</span>
@@ -322,7 +291,6 @@
</div> </div>
</div> </div>
<!-- 日志显示区域 -->
<div class="log-terminal" id="logContainer"> <div class="log-terminal" id="logContainer">
<div v-if="logLines.length === 0 && !logError" class="log-empty"> <div v-if="logLines.length === 0 && !logError" class="log-empty">
暂无日志,frpc 尚未产生输出 暂无日志,frpc 尚未产生输出
@@ -332,50 +300,85 @@
</div> </div>
</div> </div>
<!-- 底部状态 -->
<div class="log-footer"> <div class="log-footer">
<span>上次更新: {{ logLastUpdate || '--:--:--' }}</span> <span>上次更新: {{ logLastUpdate || '--:--:--' }}</span>
<span class="log-polling-status">自动刷新中 (8s)</span> <span class="log-polling-status">自动刷新中 (8s)</span>
</div> </div>
</div> </div>
</div> <!-- ====== 用户配置 ====== -->
</div> <div v-if="activeTab === 'user'" class="tab-content config-tab-content">
</div> <div class="config-page-header">
<h2>用户配置:{{ loginForm.username }}</h2>
<p class="config-subtitle">修改当前账户的登录密码</p>
</div>
<!-- ====== 弹窗 ====== --> <div class="profile-section">
<Transition name="dialog"> <div class="profile-header">
<div v-if="dialogVisible" class="dialog-overlay" @click.self="dialogVisible = false"> <span>账户管理</span>
<div class="dialog-card"> <span class="profile-username">{{ loginForm.username }}</span>
<h3>{{ dialogMode === 'add' ? '新增隧道' : '编辑隧道' }}</h3> </div>
<div class="dialog-form"> <div class="profile-form">
<div class="form-row"><label>名称</label><input v-model="dialogForm.name" /></div> <div class="form-row">
<div class="form-row"> <label>当前密码</label>
<label>类型</label> <input v-model="passwordChange.oldPassword" type="password" placeholder="输入当前密码" />
<select v-model="dialogForm.type"> </div>
<option value="tcp">tcp</option> <div class="form-row">
<option value="udp">udp</option> <label>新密码</label>
<option value="http">http</option> <input v-model="passwordChange.newPassword" type="password"
<option value="https">https</option> placeholder="至少8位,含大小写/数字/特殊字符" />
</select> </div>
</div> <div class="form-row">
<div class="form-row"><label>本地 IP</label><input v-model="dialogForm.localIP" /></div> <label>确认新密码</label>
<div class="form-row"><label>本地端口</label><input type="number" v-model="dialogForm.localPort" /> <input v-model="passwordChange.confirmPassword" type="password"
</div> placeholder="再次输入新密码" />
<div class="form-row"><label>远程端口</label><input type="number" v-model="dialogForm.remotePort" /> </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>
</div> </div>
<div class="dialog-actions">
<button class="btn-cancel" @click="dialogVisible = false">取消</button> </div> <!-- /content-area -->
<button class="btn-confirm" @click="confirmDialog">确认</button>
<!-- ====== 弹窗 ====== -->
<Transition name="dialog">
<div v-if="dialogVisible" class="dialog-overlay" @click.self="dialogVisible = false">
<div class="dialog-card">
<h3>{{ dialogMode === 'add' ? '新增隧道' : '编辑隧道' }}</h3>
<div class="dialog-form">
<div class="form-row"><label>名称</label><input v-model="dialogForm.name" /></div>
<div class="form-row">
<label>类型</label>
<select v-model="dialogForm.type">
<option value="tcp">tcp</option>
<option value="udp">udp</option>
<option value="http">http</option>
<option value="https">https</option>
</select>
</div>
<div class="form-row"><label>本地 IP</label><input v-model="dialogForm.localIP" /></div>
<div class="form-row"><label>本地端口</label><input type="number" v-model="dialogForm.localPort" />
</div>
<div class="form-row"><label>远程端口</label><input type="number" v-model="dialogForm.remotePort" />
</div>
</div>
<div class="dialog-actions">
<button class="btn-cancel" @click="dialogVisible = false">取消</button>
<button class="btn-confirm" @click="confirmDialog">确认</button>
</div>
</div>
</div> </div>
</div> </Transition>
</div>
</Transition> </div> <!-- /main-panel -->
</div> <!-- /app-container -->
<!-- 隐藏文件选择器 --> <!-- 隐藏文件选择器 -->
<input type="file" id="tomlFileInput" accept=".toml" style="display:none" @change="handleImport" /> <input type="file" id="tomlFileInput" accept=".toml" style="display:none" @change="handleImport" />
</div>
</div> <!-- /#app -->
<script src="/static/app.js"></script> <script src="/static/app.js"></script>
</body> </body>
+66
View File
@@ -734,4 +734,70 @@ select:disabled {
.dialog-card { .dialog-card {
padding: 20px; padding: 20px;
} }
}
/* ---------- Ping 延迟显示 ---------- */
.status-wrapper {
display: flex;
align-items: center;
gap: 12px;
}
.ping-display {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
padding: 2px 8px 2px 4px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
transition: background 0.3s;
}
.ping-display .ping-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
}
.ping-display .ping-icon svg {
width: 100%;
height: 100%;
}
/* 状态颜色 */
.ping-good .ping-icon {
color: #63e2b7;
}
.ping-good .ping-value {
color: #63e2b7;
}
.ping-slow .ping-icon {
color: #f0c040;
}
.ping-slow .ping-value {
color: #f0c040;
}
.ping-fail .ping-icon {
color: #f87171;
}
.ping-fail .ping-value {
color: #f87171;
}
/* 响应式调整 */
@media (max-width: 768px) {
.ping-display {
font-size: 11px;
padding: 1px 6px 1px 2px;
}
.ping-display .ping-icon {
width: 14px;
height: 14px;
}
} }