正在进行1.5版本更新，导入第一批代码
This commit is contained in:
@@ -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
|
||||
|
||||
Binary file not shown.
@@ -91,12 +91,13 @@ func InitDB() error {
|
||||
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
|
||||
) VALUES (1, 'frp.whitetop.xyz', 9358, 'Lxh10020328', 'info', 3, 1, 30, 15, 70, 8)
|
||||
`)
|
||||
) VALUES (1, 'frp.example.com', 7000, 'CHANGE_ME', 'info', 3, 1, 30, 15, 70, 8)
|
||||
`)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
@@ -150,9 +150,10 @@ go build -ldflags="-s -w" -o frpc-console .
|
||||
|---|---|---|
|
||||
| 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？
|
||||
|
||||
|
||||
+1
-1
@@ -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 (
|
||||
|
||||
+102
-14
@@ -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",
|
||||
serverPort: 9358,
|
||||
token: "",
|
||||
serverAddr: "frp.example.com",
|
||||
serverPort: 7000,
|
||||
token: "CHANGE_ME",
|
||||
logLevel: "info",
|
||||
logMaxDays: 3,
|
||||
tcpMux: true,
|
||||
@@ -183,7 +182,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 +211,7 @@ const dialogForm = ref({
|
||||
remotePort: 0,
|
||||
});
|
||||
const searchKeyword = ref("");
|
||||
const showToken = ref(false);
|
||||
|
||||
function openAddDialog() {
|
||||
dialogMode.value = "add";
|
||||
@@ -222,7 +237,7 @@ function closeDialog() {
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 7. Vue App
|
||||
// 8. Vue App
|
||||
// ============================================================
|
||||
const app = createApp({
|
||||
setup() {
|
||||
@@ -251,7 +266,6 @@ const app = createApp({
|
||||
const globalConfig = reactive({});
|
||||
const proxies = ref([]);
|
||||
const frpcRunning = ref(false);
|
||||
const showDetail = ref(false);
|
||||
|
||||
// ---- 修改密码 ----
|
||||
const passwordChange = reactive({
|
||||
@@ -262,6 +276,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 +302,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 +344,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 +448,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 +476,7 @@ const app = createApp({
|
||||
// ---- 退出 ----
|
||||
const doLogout = () => {
|
||||
if (expireTimer) clearInterval(expireTimer);
|
||||
stopLogPolling();
|
||||
contentVisible.value = false;
|
||||
loggedIn.value = false;
|
||||
token.value = "";
|
||||
@@ -407,8 +486,6 @@ const app = createApp({
|
||||
loading.value = false;
|
||||
transitioning.value = false;
|
||||
clearAuthState();
|
||||
|
||||
// ✅ 重置注册相关状态
|
||||
isFirstRun.value = false;
|
||||
registerForm.username = "";
|
||||
registerForm.password = "";
|
||||
@@ -504,7 +581,7 @@ const app = createApp({
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 导入导出（已移入 setup，可访问 loadAllData） ----
|
||||
// ---- 导入导出 ----
|
||||
const triggerImport = () => {
|
||||
document.getElementById("tomlFileInput").click();
|
||||
};
|
||||
@@ -579,7 +656,6 @@ const app = createApp({
|
||||
|
||||
activeTab,
|
||||
globalConfig,
|
||||
showDetail,
|
||||
saveConfig,
|
||||
|
||||
proxies,
|
||||
@@ -608,6 +684,18 @@ const app = createApp({
|
||||
passwordChangeError,
|
||||
passwordChangeSuccess,
|
||||
changePassword,
|
||||
|
||||
// 日志相关
|
||||
logLines,
|
||||
logTotal,
|
||||
logError,
|
||||
logLastUpdate,
|
||||
logAutoScroll,
|
||||
refreshLogs,
|
||||
scrollLogToBottom,
|
||||
|
||||
// Token 显示切换
|
||||
showToken,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
+178
-95
@@ -26,7 +26,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 +87,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" />
|
||||
@@ -108,106 +108,18 @@
|
||||
<!-- Tab 栏 -->
|
||||
<div class="tab-bar">
|
||||
<span class="tab-item" :class="{ active: activeTab === 'proxies' }"
|
||||
@click="activeTab = 'proxies'">隧道列表</span>
|
||||
@click="activeTab = 'proxies'">📋 隧道列表</span>
|
||||
<span class="tab-item" :class="{ active: activeTab === 'config' }"
|
||||
@click="activeTab = 'config'">全局配置信息</span>
|
||||
@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 +157,177 @@
|
||||
<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 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-icon">🌐</span>
|
||||
<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-icon">🔀</span>
|
||||
<span class="card-title">传输配置</span>
|
||||
</div>
|
||||
<div class="config-card-body">
|
||||
<div class="form-row readonly-row">
|
||||
<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>TCP Mux 保活间隔</label>
|
||||
<input type="number" v-model="globalConfig.tcpMuxKeepalive" />
|
||||
<span class="unit-suffix">秒</span>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>心跳间隔</label>
|
||||
<input type="number" v-model="globalConfig.heartbeatInterval" />
|
||||
<span class="unit-suffix">秒</span>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>心跳超时</label>
|
||||
<input type="number" v-model="globalConfig.heartbeatTimeout" />
|
||||
<span class="unit-suffix">秒</span>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>连接池大小</label>
|
||||
<input type="number" v-model="globalConfig.poolCount" />
|
||||
<span class="unit-suffix">个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 卡片3: 日志配置 ===== -->
|
||||
<div class="config-card">
|
||||
<div class="config-card-header">
|
||||
<span class="card-icon">📋</span>
|
||||
<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" />
|
||||
<span class="unit-suffix">天</span>
|
||||
</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>
|
||||
|
||||
@@ -782,3 +782,318 @@ select:disabled {
|
||||
transform: scale(1) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
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-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
.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 .unit-suffix {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 只读行（TCP Mux） */
|
||||
.readonly-row {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.readonly-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 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);
|
||||
}
|
||||
|
||||
/* 保存配置按钮（独立大按钮） */
|
||||
.save-config-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: linear-gradient(135deg, var(--primary-blue), #2a5adf);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #0a0a0f;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.save-config-btn:hover {
|
||||
transform: scale(1.01);
|
||||
box-shadow: 0 4px 20px var(--primary-blue-glow);
|
||||
}
|
||||
|
||||
/* ---------- 日志面板 ---------- */
|
||||
.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-line:hover {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.profile-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.log-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.log-toolbar-right {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.token-input-wrapper {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user