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

引入2.1应做的全新UI变更

Browse Source
This commit is contained in:
不安的亡命樱
2026-07-28 19:11:40 +08:00
parent c2516dc8ff
commit aaac3fc791
4 changed files with 233 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+47 -37
View File
@@ -87,7 +87,6 @@
<!-- ====== 主界面 ====== -->
<div v-else class="main-panel" :class="{ visible: contentVisible }">
<!-- 顶部导航 -->
<div class="top-bar">
<div class="top-left">
@@ -97,11 +96,17 @@
<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-icon" v-html="pingIcon"></span>
<span class="ping-value">{{ pingLatency !== null ? pingLatency + 'ms' : '--ms'
}}</span>
</span>
</span>
</div>
</div>
<div class="top-right">
<span class="user-name">{{ loginForm.username }}</span>
<button class="logout-btn" @click="doLogout">退出</button>
</div>
</div>
@@ -114,6 +119,8 @@
@click="activeTab = 'config'">全局配置信息</span>
<span class="tab-item" :class="{ active: activeTab === 'logs' }"
@click="activeTab = 'logs'">运行日志</span>
<span class="tab-item" :class="{ active: activeTab === 'user' }"
@click="activeTab = 'user'">用户配置：{{loginForm.username }}</span>
</div>
<!-- 内容区 -->
@@ -159,7 +166,6 @@
</div>
</div>
<!-- ====== 全局配置信息 ====== -->
<!-- ====== 全局配置信息 ====== -->
<div v-if="activeTab === 'config'" class="tab-content config-tab-content">
<!-- 页面标题 -->
@@ -170,34 +176,7 @@
<!-- 首次使用提示 -->
<div v-if="showDefaultTip" class="config-tip">
首次使用请修改「服务器地址」和「认证令牌」为您的真实 frpc 配置
</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>
首次使用请修改「服务器地址」和「认证令牌」为您的真实 frps 配置
</div>
<!-- ===== 卡片1: 服务器连接 ===== -->
@@ -242,31 +221,27 @@
<span class="hint-text">优化连接性能，减少延迟，frp 官方推荐开启</span>
</div>
</div>
<!-- 保活间隔 -->
<div class="form-row">
<label>保活间隔（秒）</label>
<input type="number" v-model="globalConfig.tcpMuxKeepalive" />
</div>
<!-- 心跳间隔 -->
<div class="form-row">
<label>心跳间隔（秒）</label>
<input type="number" v-model="globalConfig.heartbeatInterval" />
</div>
<!-- 心跳超时 -->
<div class="form-row">
<label>心跳超时（秒）</label>
<input type="number" v-model="globalConfig.heartbeatTimeout" />
</div>
<!-- 连接池大小 -->
<div class="form-row">
<label>连接池大小（个）</label>
<input type="number" v-model="globalConfig.poolCount" />
</div>
<!-- v2 协议开关（v1.5 灰标禁用） -->
<!-- v2 协议开关 -->
<div class="form-row v2-switch-row">
<label>frp v2 隧道支持</label>
<div class="v2-switch-wrapper">
<label class="switch disabled">
<label class="switch">
<input type="checkbox" v-model="globalConfig.wireProtocolV2" />
<span class="slider"></span>
</label>
@@ -304,6 +279,8 @@
<!-- 保存按钮 -->
<button class="save-config-btn" @click="saveConfig">保存配置并热加载</button>
</div>
<!-- ====== 运行日志 ====== -->
<div v-else-if="activeTab === 'logs'" class="tab-content log-tab-content">
<!-- 工具栏 -->
@@ -339,6 +316,39 @@
</div>
</div>
<!-- ====== 用户配置 ====== -->
<div v-if="activeTab === 'user'" class="tab-content config-tab-content">
<div class="config-page-header">
<h2>用户配置：{{ loginForm.username }}</h2>
<p class="config-subtitle">修改当前账户的登录密码</p>
</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>
</div>
</div>
</div>
</div>