lxh2875931338/frpc-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

新增功能：frp v2 隧道支持（1.5版本下为灰标无法点击）

Browse Source
This commit is contained in:
不安的亡命樱
2026-07-25 22:42:16 +08:00
parent ce07f4f0f0
commit f49bc07f42
4 changed files with 224 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/app.js
+9
View File
@@ -95,6 +95,7 @@ const defaultConfig = {
heartbeatInterval: 15,
heartbeatTimeout: 70,
poolCount: 8,
wireProtocolV2: false,
};
async function loadConfig() {
@@ -639,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,
@@ -685,6 +692,8 @@ const app = createApp({
passwordChangeSuccess,
changePassword,
showDefaultTip,
// 日志相关
logLines,
logTotal,
static/index.html
+27 -16
View File
@@ -108,11 +108,11 @@
<!-- 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>
@click="activeTab = 'logs'">运行日志</span>
</div>
<!-- 内容区 -->
@@ -162,19 +162,19 @@
<div v-if="activeTab === 'config'" class="tab-content config-tab-content">
<!-- 页面标题 -->
<div class="config-page-header">
<h2>⚙️ 全局配置信息</h2>
<h2>全局配置信息</h2>
<p class="config-subtitle">管理 frpc 连接参数与传输设置</p>
</div>
<!-- 首次使用提示 -->
<div class="config-tip">
⚠️ 首次使用请修改「服务器地址」和「认证令牌」为您的真实 frps 配置
<div v-if="showDefaultTip" class="config-tip">
首次使用请修改「服务器地址」和「认证令牌」为您的真实 frps 配置
</div>
<!-- ===== 账户管理 ===== -->
<div class="profile-section">
<div class="profile-header">
<span>👤 账户管理</span>
<span>账户管理</span>
<span class="profile-username">{{ loginForm.username }}</span>
</div>
<div class="profile-form">
@@ -201,7 +201,6 @@
<!-- ===== 卡片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">
@@ -229,7 +228,6 @@
<!-- ===== 卡片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">
@@ -261,13 +259,26 @@
<input type="number" v-model="globalConfig.poolCount" />
<span class="unit-suffix">个</span>
</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-icon">📋</span>
<span class="card-title">日志配置</span>
</div>
<div class="config-card-body">
@@ -290,7 +301,7 @@
</div>
<!-- 保存按钮 -->
<button class="save-config-btn" @click="saveConfig">💾 保存配置并热加载</button>
<button class="save-config-btn" @click="saveConfig">保存配置并热加载</button>
</div>
<!-- ====== 运行日志 ====== -->
@@ -298,15 +309,15 @@
<!-- 工具栏 -->
<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>
<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="refreshLogs">刷新</button>
<button class="log-btn" @click="scrollLogToBottom">↓ 滚动到底部</button>
</div>
</div>
@@ -323,8 +334,8 @@
<!-- 底部状态 -->
<div class="log-footer">
<span>🕐 上次更新: {{ logLastUpdate || '--:--:--' }}</span>
<span class="log-polling-status">🔄 自动刷新中 (8s)</span>
<span>上次更新: {{ logLastUpdate || '--:--:--' }}</span>
<span class="log-polling-status">自动刷新中 (8s)</span>
</div>
</div>
static/style-3.css
+54
View File
@@ -1096,4 +1096,58 @@ select:disabled {
.token-input-wrapper {
flex-wrap: wrap;
}
}
/* ============================================================
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;
}