Merge branch 'test'

frp.go

@@ -25,12 +25,12 @@ var FrpcTemplateContent string
 
 var (
 	cachedFrpcPath string
-	frpsPathMutex  sync.Mutex
+	frpcPathMutex  sync.Mutex
 )
 
 func getFrpcPath() (string, error) {
-	frpsPathMutex.Lock()
+	frpcPathMutex.Lock()
-	defer frpsPathMutex.Unlock()
+	defer frpcPathMutex.Unlock()
 
 	if cachedFrpcPath != "" {
 		if _, err := os.Stat(cachedFrpcPath); err == nil {
@@ -144,7 +144,6 @@ func GenerateFrpcConfig() error {
 		return fmt.Errorf("渲染模板失败: %w", err)
 	}
 
-	// 所有文件写入 ./data/ 目录
 	if err := os.MkdirAll("./data", 0755); err != nil {
 		return fmt.Errorf("创建 data 目录失败: %w", err)
 	}
@@ -219,6 +218,15 @@ func StartFrpc() error {
 		return fmt.Errorf("启动 frpc 失败: %w", err)
 	}
 
+	// 回收子进程（防止僵尸进程）
+	go func() {
+		if err := cmd.Wait(); err != nil {
+			log.Printf("frpc 子进程退出: %v", err)
+		}
+		// 子进程退出后清理 PID 文件
+		os.Remove("./data/frpc.pid")
+	}()
+
 	if err := os.WriteFile("./data/frpc.pid", []byte(fmt.Sprintf("%d", cmd.Process.Pid)), 0644); err != nil {
 		return fmt.Errorf("保存 PID 失败: %w", err)
 	}

readme.md

@@ -73,12 +73,14 @@ frpc-console/
 ├── frp.go                    # frpc 管理核心逻辑
 ├── toml_parser.go            # TOML 解析器
 ├── static/                   # 前端静态资源
+│   ├── fonts
+│   │   └── HarmonyOS_Sans_SC_Regular.ttf
 │   ├── index.html
 │   ├── app.js
 │   ├── style-1.css           # 全局基础样式
 │   ├── style-2.css           # 登录页样式
 │   ├── style-3.css           # 主界面样式
-    └── style-4.css
+│   └── style-4.css
 ├── bin/                      # 内嵌 frpc 二进制 (多平台)
 │   ├── frpc_windows_amd64.exe
 │   ├── frpc_linux_amd64
@@ -174,11 +176,14 @@ Podux 是个好项目，理念上和我们是一致的：用 Web 界面管理 fr
 | 数据库 | SQLite（单文件，几 MB） | PocketBase（带 Admin UI、用户系统、全套 API） |
 | 前端 | Vue CDN | React + Webpack |
 | 实机内存占用 | **~50 MB** | **没启动成功，1GB RAM 独立分配仍 OOM（原因不明）** |
-| 镜像大小 | 封装多平台二进制frpc后 120.28 MB | 76.1 MB |
+| 镜像大小 | 封装二进制frpc后均值 173.86 MB | 76.1 MB |
+| 二进制大小 | 4平台均值93M | 12.4 MB |
 | 部署方式 | 单二进制 / Docker | 单二进制 / Docker |
 | 多平台支持 | ✅ 原生交叉编译 | ✅ 原生交叉编译 |
 
-> Podux 与其说是一个 frp 控制面板，不如说是一个“一站式 frp 管理器 + 可视化数据流面板 + 通道保活监测工具”。这种一站式本身没毛病，甚至功能实现非常到位。</br>但 podux的框架选型有点重，而且很明显细节稍显仓促。PocketBase 自带 WebUI 的情况下，Podux 还要再包一层 WebUI——相当于给数据库的 UI 又套了个 UI。更费解的是，这层 WebUI 只支持导入，不支持导出。这设计确实让人有点摸不着头脑啦……</br>所以干脆换了一套轻量化工具自己上咯~
+> Podux 与其说是一个 frp 控制面板，不如说是一个“一站式 frp 管理器 + 可视化数据流面板 + 通道保活监测工具”。这种一站式本身没毛病，甚至功能实现非常到位。</br>但 podux 的框架选型有点重，细节也稍显仓促，最终结果就是内存占用相当夸张——1GB 都未必够它霍霍的，而且你根本不知道这些内存都花在了哪里。PocketBase 自带 WebUI 的情况下，Podux 还要再包一层 WebUI——相当于给数据库的 UI 又套了个 UI。更费解的是，这层 WebUI 只支持导入，不支持导出。这设计确实让人有点摸不着头脑啦……</br>所以干脆换了一套轻量化工具自己上咯~
+
+> 不过现在的 frpc-console，更倾向于拿存储换内存呢……</br>毕竟内存卡也好，硬盘也罢，即使是嵌入式平台，价格都不算很离谱，也就是一张大点的64G或者128G内存卡的事情</br>但是内存可就不一样了哦，这玩意在嵌入式平台是真的寸土寸金呢……</br>咱就举个例子吧，RK3506，128和256M版本共存；全志H3，256 和 512M 内存并存</br>虽然这俩都不算太极端，尤其是全志 H3，挤一挤甚至 docker 版也能装得上，但是也能说明，在一些廉价的低功耗开发板上，内存容量其实真的很稀缺……</br>所以牺牲一点存储空间（镜像大了几十 MB），换来 50MB 的内存占用，这笔账怎么算都不亏，对吧？
 
 
 ### Q: 为什么不直接用 frp 官方提供的 web 界面？
@@ -191,50 +196,32 @@ frpc-console 的目标是：
 - **导入导出无缝迁移**
 - **热加载无需重启**
 
-### Q: 如果 frpc-console 进程挂了，frpc 本身会受影响吗？
+#### Q: 如果 frpc-console 进程挂了，frpc 本身会受影响吗？
 
 **不会。**
 
-这是 frp-console 系列工具与同类项目最核心的区别之一。我们称之为 **“阴阳模式”**。</br>
+这是 frp-console 系列工具与同类项目最核心的区别之一。我们称之为 **“阴阳模式”**。
-接下来，我们将结合中式哲学思想，阐述这个名称的由来：
 
-#### 什么是“阴阳模式”？
+**什么是“阴阳模式”？**
 
-以人的观察为出发点：
+- **阴**：看不见的业务流（frpc 进程、toml 配置文件）
-
-- **阴**：看不见的业务流（frpc 进程、toml 配置文件、隧道连接）
 - **阳**：看得见的管理面板（Web 界面、API 服务）
 
-大多数管理工具走的是 **“阳阴模式”**：面板是“大脑”，业务是“肢体”。大脑一旦停止工作，肢体也就瘫痪了。</br>
+大多数管理工具走的是 **“阳阴模式”**：面板是大脑，业务是肢体。大脑一旦停止工作，肢体也就瘫痪了。
-在这种模式下，管理面板与业务进程深度绑定，面板退出时业务进程也会随之终止。
 
 **frpc-console 走的是“阴阳模式”：业务是根基，面板是工具。**
 
-- **阴主导阳**：业务不依赖面板存活，面板只是用来观察和调整业务状态的手段
-- **阳依附于阴**：面板的存在是为了服务业务，而不是反过来
-
-
-#### 不同部署方式下的行为
-
 **二进制部署：**
-
+frpc-console 启动时，通过 `Setsid` 为 frpc 创建独立会话，使其完全脱离父进程的生命周期控制。即使 SSH 断开导致 console 退出，frps 也会被 init 进程（PID 1）接管，继续稳定运行。
-frpc-console 启动时，会以子进程的方式拉起 frpc，并为它创建一个独立的进程会话（`Setsid`）。这意味着 frpc 完全脱离父进程的生命周期控制。即使 SSH 断开导致 frpc-console 进程退出，frpc 也会被系统的 init 进程（PID 1）接管，继续在后台稳定运行。配置文件（`frpc.toml`）是持久化文件，不依赖 console 进程存活。面板可以随时挂、随时重启、随时升级，但隧道业务不受任何干扰。
 
 **Docker 部署：**
+容器使用 `--restart=always`，console 退出时 Docker 自动重启并重新拉起 frpc。数据目录通过卷挂载持久化，配置不丢失。
 
-容器使用 `--restart=always` 策略，frpc-console 进程意外退出时，Docker 守护进程会自动重启整个容器。重启后，console 重新读取持久化的 `frpc.toml`，重新拉起 frpc 子进程。数据目录（`/opt/frpc-console/data`）通过卷挂载持久化，容器重启不会丢失任何配置。Docker 模式的本质依然是“阳辅助阴”——`restart:always` 的目的是确保阴（业务）持续运行，而不是为了保住阳（面板）本身。
+两种部署方式的本质一致：**面板是“阳”，服务于“阴”；“阴”不依赖“阳”而存在。**
 
+**为什么同类项目很少这样做？**
 
-#### 为什么同类项目里很少见到这种设计？
+因为大多数管理工具默认“面板是前提条件”，而忽略了：**真正需要长期稳定运行的是隧道本身，而不是管理界面的进程。**
-
-因为大多数管理工具把“面板”和“业务”耦合在一起，认为面板是前提条件，业务是附属品。当然了，这确实是正向的、符合直觉的设计方向。但是有一个被很多人忽略的事实：**真正需要长期稳定运行的是隧道本身，而不是管理界面的进程。**
-
-界面是用来观察和调整的，不是用来维持业务存活的。这是运维集群常用的“管理面与控制面分离”——只不过通常只在几千台服务器的集群管理里才会出现，很少有人会把它用在一个人用的 frp 管理工具上。
-
-
-#### 核心原则
-
-console 只做“配置的保管者”和“进程的启动者”，而不是“配置的持有者”或“进程的绑定者”。即使 console 完全离线，已经生成的 `frpc.toml` 依然存在，frpc 进程依然可以独立运行。这是 frp 本身的容灾能力在管理工具层面的自然延伸——**可视化框架只是工具，业务本身才是核心。**
 
 > **管理面板可以丢，业务功能打死不能停。**
 
@@ -242,17 +229,20 @@ console 只做“配置的保管者”和“进程的启动者”，而不是“
 
 frpc-console 覆盖了 frp 最核心的 **TCP 隧道管理** 功能，包括 `tcpMux`、负载均衡、心跳配置等。如果你有更复杂的需求（比如 STCP、XTCP、P2P），欢迎提 issue，我们会评估是否加入。
 
----
-
 ## 🧠 设计哲学
 
 frpc-console 遵循 **“够用就好”** 的原则：
 
-1. **frp 是轻量工具，管理工具也应该是轻量的。**
+1. **工具应该和它所管理的对象一样轻量。** 管理面板不该成为比业务本身更重的负担。
-2. **能用 SQLite 就不用 PostgreSQL，能用 Vue CDN 就不用 React 全家桶。**
+
-3. **前端能做的事，后端不加额外复杂度。**
+2. **用最简单的技术栈，做最核心的事。** SQLite 单文件存数据，Vue CDN 写界面，Go 单二进制交付——没有多余依赖，没有构建工具链，改完就能跑。
-4. **删掉一个容器等于删掉所有垃圾，所以用 Docker 隔离是对的。**
+
-5. **面板的存在应该是为了服务业务的，而不该是反过来主导业务的。**
+3. **数据归数据，二进制归二进制。** 版本信息从编译时注入解耦为运行时读取，数据库、配置、日志统一归入 `data/` 目录，挂载点收窄到数据本身，而非整个应用。
+
+4. **业务是目的，面板是手段。** 业务进程独立于管理面板存在，面板可以随时挂、随时重启、随时升级，隧道业务不能受任何干扰。
+
+5. **存储换内存，在嵌入式平台上不是交易，是生存策略。** 镜像可以大几十 MB，但内存必须省——因为内存卡便宜，内存颗粒贵。
+
 
 ---
 

static/index.html

@@ -100,7 +100,8 @@
                                 <!-- 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 class="ping-value">{{ pingLatency !== null ? pingLatency + 'ms' : '--ms'
+                                        }}</span>
                                 </span>
                             </span>
                         </div>
@@ -343,34 +344,7 @@
                 </div> <!-- /content-area -->
 
                 <!-- ====== 弹窗 ====== -->
-                <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>
-                </Transition>
 
             </div> <!-- /main-panel -->
         </div> <!-- /app-container -->
@@ -378,6 +352,34 @@
         <!-- 隐藏文件选择器 -->
         <input type="file" id="tomlFileInput" accept=".toml" style="display:none" @change="handleImport" />
 
+        <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>
+        </Transition>
     </div> <!-- /#app -->
 
     <script src="/static/app.js"></script>

static/style-1.css

@@ -1,30 +1,28 @@
 /* ===== style-1.css - 全局基础 ===== */
 
 /* ---------- 字体定义 ---------- */
+/* 自托管 HarmonyOS Sans SC Regular */
+
+/* 中英文：HarmonyOS Sans SC Regular */
 @font-face {
     font-family: 'HarmonyOS Sans SC';
-    src: local('HarmonyOS Sans SC'),
+    src: url('./fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
-         local('PingFang SC'),
-         local('Microsoft YaHei'),
-         local('Helvetica Neue');
     font-weight: 400;
+    font-style: normal;
     font-display: swap;
 }
+
+/* 数字专用：复用 HarmonyOS Sans SC Regular（因 Light 版本缺失） */
 @font-face {
-    font-family: 'HarmonyOS Sans SC';
+    font-family: 'HarmonyOS Sans';
-    src: local('HarmonyOS Sans SC Medium'),
+    src: url('./fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
-         local('PingFang SC Medium');
+    font-weight: 300;
-    font-weight: 500;
+    font-style: normal;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'HarmonyOS Sans SC';
-    src: local('HarmonyOS Sans SC Bold'),
-         local('PingFang SC Semibold');
-    font-weight: 700;
     font-display: swap;
 }
 
+/* 后备：如果自托管字体加载失败，使用系统字体 */
+
 /* ---------- 重置 ---------- */
 * {
     margin: 0;
@@ -33,14 +31,14 @@
 }
 
 body {
-    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
     background: #0a0a0f;
     height: 100vh;
     overflow: hidden;
     color: #e0e0e0;
 }
 
-/* ---------- 数字专用字体（加粗） ---------- */
+/* ---------- 数字专用字体（使用 HarmonyOS Sans） ---------- */
 .digit,
 .big-number,
 .remote-port,
@@ -51,22 +49,23 @@ body {
 .login-btn,
 .save-btn,
 .btn-confirm {
-    font-weight: 600 !important;
+    font-weight: 300 !important;
     letter-spacing: 0.02em;
+    font-family: 'HarmonyOS Sans', 'JetBrains Mono', monospace;
 }
 
 /* 数字特别加粗（适用于大数字展示） */
 .big-number {
-    font-weight: 700 !important;
+    font-weight: 600 !important;
     letter-spacing: -0.01em;
 }
 
-/* 代码/端口类数字使用等宽字体，但保持加粗 */
+/* 代码/端口类数字使用等宽字体，但保持 HarmonyOS Sans 风格 */
 .digit,
 .remote-port,
 .proxy-addr {
-    font-family: 'HarmonyOS Sans SC', 'JetBrains Mono', monospace;
+    font-family: 'HarmonyOS Sans', 'JetBrains Mono', monospace;
-    font-weight: 600 !important;
+    font-weight: 300 !important;
 }
 
 /* ---------- 全局颜色变量 ---------- */
@@ -175,7 +174,7 @@ body {
     height: 100%;
     display: flex;
     flex-direction: column;
-    padding: 20px 28px;          /* ← 补上内边距 */
+    padding: 20px 28px;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

static/style-3.css

@@ -17,8 +17,8 @@
 }
 
 .top-left .nav-logo {
-    width: 48px;
+    width: 52px;   /* 原 48px */
-    height: 48px;
+    height: 52px;  /* 原 48px */
     flex-shrink: 0;
     display: block;
     object-fit: contain;
@@ -32,7 +32,7 @@
 }
 
 .brand-info .logo-text {
-    font-size: 22px;
+    font-size: 20px;
     font-weight: 600;
     color: var(--text-primary);
     line-height: 1.2;
@@ -59,8 +59,9 @@
     box-shadow: 0 0 12px rgba(99, 226, 183, 0.4);
 }
 
+/* 状态文字 12px（原 13px） */
 .status-wrapper .status-text {
-    font-size: 13px;
+    font-size: 12px;
     color: var(--text-muted);
 }
 
@@ -71,7 +72,7 @@
 }
 
 .user-name {
-    font-size: 13px;
+    font-size: 12px;  /* 原 13px，与状态文字对齐 */
     color: var(--text-secondary);
 }
 
@@ -375,7 +376,7 @@
 .proxy-addr {
     font-size: 13px;
     color: var(--text-dim);
-    font-family: 'JetBrains Mono', monospace;
+    font-family: 'HarmonyOS Sans','JetBrains Mono', monospace;
 }
 
 .proxy-tag {
@@ -395,7 +396,7 @@
 }
 
 .remote-port {
-    font-family: 'JetBrains Mono', monospace;
+    font-family: 'HarmonyOS Sans','JetBrains Mono', monospace;
     font-size: 14px;
     color: var(--text-secondary);
 }
@@ -801,3 +802,40 @@ select:disabled {
         height: 14px;
     }
 }
+
+/* ---------- Tab 栏 ---------- */
+.tab-bar {
+    display: flex;
+    gap: 32px;
+    padding: 14px 0 12px;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+/* 将最后一个 Tab（用户配置）推到最右侧 */
+.tab-item:last-child {
+    margin-left: auto;
+    /* 防止用户名过长导致溢出 */
+    max-width: 220px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tab-item {
+    font-size: 14px;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 4px 0;
+    transition: color 0.3s, border-color 0.3s;
+    border-bottom: 2px solid transparent;
+}
+
+.tab-item:hover {
+    color: var(--text-secondary);
+}
+
+.tab-item.active {
+    color: var(--primary-blue);
+    border-bottom-color: var(--primary-blue);
+}

version.ini

@@ -3,4 +3,4 @@
 ; 示例:
 ;   2.4              # Preview 版本，无日期
 ;   2.5 20260729     # LTS 版本，带发布日期
-2.4
+2.5