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

2.2技术预览版更新内容已写入

Browse Source
This commit is contained in:
不安的亡命樱
2026-07-28 19:30:26 +08:00
parent aaac3fc791
commit babfdee02b
2 changed files with 137 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+40 -47
View File
@@ -87,6 +87,7 @@
<!-- ====== 主界面 ====== -->
<div v-else class="main-panel" :class="{ visible: contentVisible }">
<!-- 顶部导航 -->
<div class="top-bar">
<div class="top-left">
@@ -96,12 +97,10 @@
<span class="status-wrapper">
<span class="status-dot" :class="{ active: frpcRunning }"></span>
<span class="status-text">{{ frpcRunning ? 'frpc 运行中' : 'frpc 已停止' }}</span>
<!-- Ping 延迟显示 -->
<span v-if="frpcRunning" class="ping-display" :class="pingStatusClass">
<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>
@@ -168,18 +167,16 @@
<!-- ====== 全局配置信息 ====== -->
<div v-if="activeTab === 'config'" class="tab-content config-tab-content">
<!-- 页面标题 -->
<div class="config-page-header">
<h2>全局配置信息</h2>
<p class="config-subtitle">管理 frpc 连接参数与传输设置</p>
</div>
<!-- 首次使用提示 -->
<div v-if="showDefaultTip" class="config-tip">
首次使用请修改「服务器地址」和「认证令牌」为您的真实 frps 配置
</div>
<!-- ===== 卡片1: 服务器连接 ===== -->
<!-- 卡片1: 服务器连接 -->
<div class="config-card">
<div class="config-card-header">
<span class="card-title">服务器连接</span>
@@ -206,13 +203,12 @@
</div>
</div>
<!-- ===== 卡片2: 传输配置 ===== -->
<!-- 卡片2: 传输配置 -->
<div class="config-card">
<div class="config-card-header">
<span class="card-title">传输配置</span>
</div>
<div class="config-card-body">
<!-- TCP 多路复用（只读，占满一行） -->
<div class="form-row" style="grid-column: 1 / -1;">
<label>TCP 多路复用</label>
<div class="readonly-value">
@@ -237,7 +233,6 @@
<label>连接池大小（个）</label>
<input type="number" v-model="globalConfig.poolCount" />
</div>
<!-- v2 协议开关 -->
<div class="form-row v2-switch-row">
<label>frp v2 隧道支持</label>
<div class="v2-switch-wrapper">
@@ -253,7 +248,7 @@
</div>
</div>
<!-- ===== 卡片3: 日志配置 ===== -->
<!-- 卡片3: 日志配置 -->
<div class="config-card">
<div class="config-card-header">
<span class="card-title">日志配置</span>
@@ -276,14 +271,11 @@
</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>
@@ -299,7 +291,6 @@
</div>
</div>
<!-- 日志显示区域 -->
<div class="log-terminal" id="logContainer">
<div v-if="logLines.length === 0 && !logError" class="log-empty">
暂无日志，frpc 尚未产生输出
@@ -309,7 +300,6 @@
</div>
</div>
<!-- 底部状态 -->
<div class="log-footer">
<span>上次更新: {{ logLastUpdate || '--:--:--' }}</span>
<span class="log-polling-status">自动刷新中 (8s)</span>
@@ -349,43 +339,46 @@
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ====== 弹窗 ====== -->
<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> <!-- /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>
<div class="dialog-actions">
<button class="btn-cancel" @click="dialogVisible = false">取消</button>
<button class="btn-confirm" @click="confirmDialog">确认</button>
</div>
</div>
</div>
</Transition>
</Transition>
</div> <!-- /main-panel -->
</div> <!-- /app-container -->
<!-- 隐藏文件选择器 -->
<input type="file" id="tomlFileInput" accept=".toml" style="display:none" @change="handleImport" />
</div>
</div> <!-- /#app -->
<script src="/static/app.js"></script>
</body>