位置变更，Preview正在重构
This commit is contained in:
@@ -1,6 +1,9 @@
|
||||
package api
|
||||
|
||||
import (
|
||||
"bytes"
|
||||
"fmt"
|
||||
"html/template"
|
||||
"net"
|
||||
"net/http"
|
||||
"strconv"
|
||||
@@ -415,3 +418,125 @@ func readTailLog(filePath string, n int) ([]string, error) {
|
||||
// 为了编译通过，先简单返回空
|
||||
return []string{}, nil
|
||||
}
|
||||
|
||||
// ================================================================
|
||||
// 导入/导出 TOML
|
||||
// ================================================================
|
||||
|
||||
func ImportTomlHandler(c *gin.Context) {
|
||||
file, err := c.FormFile("file")
|
||||
if err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"code": 1, "msg": "请选择文件"})
|
||||
return
|
||||
}
|
||||
|
||||
f, err := file.Open()
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 2, "msg": "读取文件失败"})
|
||||
return
|
||||
}
|
||||
defer f.Close()
|
||||
|
||||
buf := new(bytes.Buffer)
|
||||
if _, err := buf.ReadFrom(f); err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 2, "msg": "读取文件失败"})
|
||||
return
|
||||
}
|
||||
|
||||
parsed, err := frp.ParseToml(buf.String())
|
||||
if err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"code": 1, "msg": "解析 TOML 失败: " + err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
cfg := parsed.ToGlobalConfig()
|
||||
cfg.TcpMux = true
|
||||
if err := db.UpdateGlobalConfig(cfg); err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 2, "msg": "更新配置失败: " + err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
if _, err := db.DB.Exec("DELETE FROM proxies"); err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 2, "msg": "清空隧道失败"})
|
||||
return
|
||||
}
|
||||
|
||||
proxies := parsed.ToProxies()
|
||||
for _, p := range proxies {
|
||||
if err := db.CreateProxy(&p); err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 2, "msg": "导入隧道失败: " + err.Error()})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if err := frp.GenerateConfig(); err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 2, "msg": "生成配置失败: " + err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
if err := frp.Reload(); err != nil {
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"code": 0,
|
||||
"msg": fmt.Sprintf("导入成功！共 %d 条隧道，但热加载失败: %s", len(proxies), err.Error()),
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"code": 0,
|
||||
"msg": fmt.Sprintf("导入成功！共 %d 条隧道", len(proxies)),
|
||||
})
|
||||
}
|
||||
|
||||
func ExportTomlHandler(c *gin.Context) {
|
||||
cfg, err := db.GetGlobalConfig()
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 2, "msg": "读取配置失败: " + err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
proxies, err := db.GetProxies()
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 2, "msg": "读取隧道失败: " + err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
var activeProxies []db.Proxy
|
||||
for _, p := range proxies {
|
||||
if p.Enabled {
|
||||
activeProxies = append(activeProxies, p)
|
||||
}
|
||||
}
|
||||
|
||||
data := struct {
|
||||
*db.GlobalConfig
|
||||
Proxies []db.Proxy
|
||||
WireProtocolLine string
|
||||
}{
|
||||
GlobalConfig: cfg,
|
||||
Proxies: activeProxies,
|
||||
}
|
||||
|
||||
if cfg.WireProtocolV2 {
|
||||
data.WireProtocolLine = `wireProtocol = "v2"`
|
||||
} else {
|
||||
data.WireProtocolLine = ""
|
||||
}
|
||||
|
||||
// 这里需要 frp.FrpcTemplateContent，需要从 frp 包导出
|
||||
tmpl, err := template.New("frpc").Parse(frp.FrpcTemplateContent)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 2, "msg": "解析模板失败: " + err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
var buf bytes.Buffer
|
||||
if err := tmpl.Execute(&buf, data); err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 2, "msg": "渲染模板失败: " + err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
c.Header("Content-Type", "text/plain; charset=utf-8")
|
||||
c.Header("Content-Disposition", "attachment; filename=frpc.toml")
|
||||
c.String(http.StatusOK, buf.String())
|
||||
}
|
||||
|
||||
@@ -0,0 +1,813 @@
|
||||
// app.js - 普通脚本（非模块）
|
||||
|
||||
const { createApp, ref, reactive, computed, onMounted, nextTick, watch } = Vue;
|
||||
|
||||
// ============================================================
|
||||
// 1. 基础 API
|
||||
// ============================================================
|
||||
const API_BASE = "/api";
|
||||
|
||||
function getToken() {
|
||||
return localStorage.getItem("frpc_token") || "";
|
||||
}
|
||||
|
||||
function getHeaders() {
|
||||
return {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + getToken(),
|
||||
};
|
||||
}
|
||||
|
||||
async function apiFetch(endpoint, options = {}) {
|
||||
const url = API_BASE + endpoint;
|
||||
const headers =
|
||||
options.body instanceof FormData
|
||||
? { Authorization: "Bearer " + getToken() }
|
||||
: getHeaders();
|
||||
const res = await fetch(url, {
|
||||
...options,
|
||||
headers: { ...headers, ...(options.headers || {}) },
|
||||
});
|
||||
|
||||
if (res.status === 401) {
|
||||
clearAuthState();
|
||||
window.dispatchEvent(new CustomEvent("auth:expired"));
|
||||
return { code: 401, msg: "认证已过期，请重新登录" };
|
||||
}
|
||||
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 2. Auth
|
||||
// ============================================================
|
||||
function parseJwtExpire(token) {
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split(".")[1]));
|
||||
return payload.exp * 1000;
|
||||
} catch {
|
||||
return Date.now() + 7 * 24 * 60 * 60 * 1000;
|
||||
}
|
||||
}
|
||||
|
||||
function saveAuthState(token, username) {
|
||||
const expire = parseJwtExpire(token);
|
||||
localStorage.setItem("frpc_token", token);
|
||||
localStorage.setItem("frpc_token_expire", String(expire));
|
||||
localStorage.setItem("frpc_username", username);
|
||||
return expire;
|
||||
}
|
||||
|
||||
function loadAuthState() {
|
||||
const token = localStorage.getItem("frpc_token");
|
||||
const expire = parseInt(localStorage.getItem("frpc_token_expire") || "0", 10);
|
||||
const username = localStorage.getItem("frpc_username") || "";
|
||||
if (token && expire > Date.now()) {
|
||||
return { token, expire, username, valid: true };
|
||||
}
|
||||
clearAuthState();
|
||||
return { token: "", expire: 0, username: "", valid: false };
|
||||
}
|
||||
|
||||
function clearAuthState() {
|
||||
localStorage.removeItem("frpc_token");
|
||||
localStorage.removeItem("frpc_token_expire");
|
||||
localStorage.removeItem("frpc_username");
|
||||
}
|
||||
|
||||
async function login(username, password) {
|
||||
const data = await apiFetch("/login", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
if (data.code === 0) {
|
||||
const token = data.data.token;
|
||||
const expire = saveAuthState(token, username);
|
||||
return { success: true, token, expire };
|
||||
}
|
||||
return { success: false, error: data.msg || "登录失败" };
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 3. Config
|
||||
// ============================================================
|
||||
const defaultConfig = {
|
||||
serverAddr: "frp.example.com",
|
||||
serverPort: 7000,
|
||||
token: "CHANGE_ME",
|
||||
logLevel: "info",
|
||||
logMaxDays: 3,
|
||||
tcpMux: true,
|
||||
tcpMuxKeepalive: 30,
|
||||
heartbeatInterval: 15,
|
||||
heartbeatTimeout: 70,
|
||||
poolCount: 8,
|
||||
wireProtocolV2: false,
|
||||
};
|
||||
|
||||
async function loadConfig() {
|
||||
try {
|
||||
const data = await apiFetch("/config");
|
||||
if (data.code === 0) {
|
||||
return { ...defaultConfig, ...data.data };
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("加载配置失败", e);
|
||||
}
|
||||
return { ...defaultConfig };
|
||||
}
|
||||
|
||||
async function saveConfigApi(config) {
|
||||
const data = await apiFetch("/config", {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(config),
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 4. Proxies
|
||||
// ============================================================
|
||||
async function loadProxies() {
|
||||
try {
|
||||
const data = await apiFetch("/proxies");
|
||||
if (data.code === 0) {
|
||||
return data.data || [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("加载隧道失败", e);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
async function createProxy(proxy) {
|
||||
const data = await apiFetch("/proxy", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(proxy),
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
async function updateProxy(proxy) {
|
||||
const data = await apiFetch("/proxy/" + proxy.id, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(proxy),
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
async function deleteProxy(id) {
|
||||
const data = await apiFetch("/proxy/" + id, {
|
||||
method: "DELETE",
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
function filterProxies(list, keyword) {
|
||||
if (!keyword) return list;
|
||||
const kw = keyword.toLowerCase();
|
||||
return list.filter(
|
||||
(p) =>
|
||||
p.name.toLowerCase().includes(kw) ||
|
||||
p.localIP.includes(kw) ||
|
||||
String(p.remotePort).includes(kw)
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 5. Frpc
|
||||
// ============================================================
|
||||
async function getFrpcStatus() {
|
||||
try {
|
||||
const data = await apiFetch("/frpc/status");
|
||||
if (data.code === 0) {
|
||||
return data.data.running || false;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("获取 frpc 状态失败", e);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 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);
|
||||
const dialogMode = ref("add");
|
||||
const dialogForm = ref({
|
||||
id: null,
|
||||
name: "",
|
||||
type: "tcp",
|
||||
localIP: "",
|
||||
localPort: 0,
|
||||
remotePort: 0,
|
||||
});
|
||||
const searchKeyword = ref("");
|
||||
const showToken = ref(false);
|
||||
|
||||
function openAddDialog() {
|
||||
dialogMode.value = "add";
|
||||
dialogForm.value = {
|
||||
id: null,
|
||||
name: "",
|
||||
type: "tcp",
|
||||
localIP: "",
|
||||
localPort: 0,
|
||||
remotePort: 0,
|
||||
};
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
function openEditDialog(proxy) {
|
||||
dialogMode.value = "edit";
|
||||
dialogForm.value = { ...proxy };
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 8. Vue App
|
||||
// ============================================================
|
||||
const app = createApp({
|
||||
setup() {
|
||||
// ---- 登录态 ----
|
||||
const loggedIn = ref(false);
|
||||
const loading = ref(false);
|
||||
const loginError = ref("");
|
||||
const loginForm = reactive({ username: "", password: "" });
|
||||
const token = ref("");
|
||||
const tokenExpireTime = ref(0);
|
||||
const transitioning = ref(false);
|
||||
const contentVisible = ref(false);
|
||||
let expireTimer = null;
|
||||
|
||||
// ---- 注册 ----
|
||||
const isFirstRun = ref(false);
|
||||
const registerForm = reactive({
|
||||
username: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
const registerError = ref("");
|
||||
const registering = ref(false);
|
||||
|
||||
// ---- 数据 ----
|
||||
const globalConfig = reactive({});
|
||||
const proxies = ref([]);
|
||||
const frpcRunning = ref(false);
|
||||
|
||||
// ---- 修改密码 ----
|
||||
const passwordChange = reactive({
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
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;
|
||||
|
||||
// ---- Ping 延迟检测 ----
|
||||
const pingLatency = ref(null);
|
||||
let pingTimer = null;
|
||||
const PING_INTERVAL_MS = 30000;
|
||||
const PING_TIMEOUT_MS = 5000;
|
||||
|
||||
const pingStatusClass = computed(() => {
|
||||
if (pingLatency.value === null) return "ping-fail";
|
||||
if (pingLatency.value < 1000) return "ping-good";
|
||||
if (pingLatency.value < 5000) return "ping-slow";
|
||||
return "ping-fail";
|
||||
});
|
||||
|
||||
const pingIcon = computed(() => {
|
||||
if (pingLatency.value === null) {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
|
||||
<path d="M0 0h256v256H0z" fill="none"/>
|
||||
<g fill="currentColor">
|
||||
<path d="m224.39 104.34-90.24 108.78a8 8 0 0 1-12.3 0L17.8 87.69a7.79 7.79 0 0 1 1.31-11.21A179.58 179.58 0 0 1 128 40a182 182 0 0 1 33.06 3a7.94 7.94 0 0 1 4.17 2.21L224 104Z" opacity=".2"/>
|
||||
<path d="M229.66 98.34a8 8 0 0 1-11.32 11.32L200 91.31l-18.34 18.35a8 8 0 0 1-11.32-11.32L188.69 80l-18.35-18.34a8 8 0 0 1 11.32-11.32L200 68.69l18.34-18.35a8 8 0 0 1 11.32 11.32L211.31 80Zm-33.06 39.5a8 8 0 0 0-11.27 1L128 208L24.09 82.74A170.76 170.76 0 0 1 128 48c2.54 0 5.11.06 7.65.17a8 8 0 0 0 .7-16c-2.77-.12-5.58-.18-8.35-.18A186.67 186.67 0 0 0 14.28 70.1a15.93 15.93 0 0 0-6.17 10.81a15.65 15.65 0 0 0 3.54 11.89l104 125.43A15.93 15.93 0 0 0 128 224a15.93 15.93 0 0 0 12.31-5.77l57.34-69.12a8 8 0 0 0-1.05-11.27"/>
|
||||
</g>
|
||||
</svg>`;
|
||||
}
|
||||
if (pingLatency.value < 1000) {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 25 24">
|
||||
<path d="M0 0h25v24H0z" fill="none"/>
|
||||
<path fill="currentColor" d="M2.046 6.725c6.192-4.967 15.05-4.967 21.243 0l.779.625l-11.4 14.25L1.265 7.35z"/>
|
||||
</svg>`;
|
||||
}
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path fill="none" stroke="currentColor" stroke-width="2" d="M21.996 7.505L12 20L2.004 7.505c5.827-4.673 14.165-4.673 19.992 0Z"/>
|
||||
</svg>`;
|
||||
});
|
||||
|
||||
async function doPing() {
|
||||
if (!frpcRunning.value) {
|
||||
pingLatency.value = null;
|
||||
return;
|
||||
}
|
||||
const addr = globalConfig.serverAddr || "frp.example.com";
|
||||
const start = performance.now();
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/ping?target=${encodeURIComponent(addr)}`,
|
||||
{ signal: AbortSignal.timeout(PING_TIMEOUT_MS) },
|
||||
);
|
||||
if (!res.ok) throw new Error("Ping failed");
|
||||
const end = performance.now();
|
||||
pingLatency.value = Math.round(end - start);
|
||||
} catch {
|
||||
pingLatency.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function startPingPolling() {
|
||||
if (pingTimer) return;
|
||||
doPing();
|
||||
pingTimer = setInterval(doPing, PING_INTERVAL_MS);
|
||||
}
|
||||
|
||||
function stopPingPolling() {
|
||||
if (pingTimer) {
|
||||
clearInterval(pingTimer);
|
||||
pingTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 认证过期处理 ----
|
||||
const handleAuthExpired = () => {
|
||||
doLogout();
|
||||
};
|
||||
|
||||
// ---- 初始化 ----
|
||||
onMounted(() => {
|
||||
window.addEventListener("auth:expired", handleAuthExpired);
|
||||
|
||||
const saved = loadAuthState();
|
||||
if (saved.valid) {
|
||||
token.value = saved.token;
|
||||
tokenExpireTime.value = saved.expire;
|
||||
loginForm.username = saved.username;
|
||||
loggedIn.value = true;
|
||||
loadAllData().then(() => {
|
||||
contentVisible.value = true;
|
||||
startExpireTimer();
|
||||
});
|
||||
} else {
|
||||
checkUsers();
|
||||
}
|
||||
});
|
||||
|
||||
// ---- Tab 切换监听日志轮询 ----
|
||||
watch(activeTab, (newTab) => {
|
||||
if (newTab === "logs") {
|
||||
startLogPolling();
|
||||
} else {
|
||||
stopLogPolling();
|
||||
}
|
||||
});
|
||||
|
||||
watch(frpcRunning, (running) => {
|
||||
if (!running) {
|
||||
stopPingPolling();
|
||||
pingLatency.value = null;
|
||||
} else if (loggedIn.value) {
|
||||
startPingPolling();
|
||||
}
|
||||
});
|
||||
|
||||
async function checkUsers() {
|
||||
try {
|
||||
const res = await fetch("/api/check/users");
|
||||
const data = await res.json();
|
||||
if (data.code === 0) {
|
||||
isFirstRun.value = !data.data.hasUsers;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("检查用户状态失败", e);
|
||||
}
|
||||
}
|
||||
|
||||
function startExpireTimer() {
|
||||
if (expireTimer) clearInterval(expireTimer);
|
||||
expireTimer = setInterval(() => {
|
||||
if (Date.now() >= tokenExpireTime.value) {
|
||||
doLogout();
|
||||
alert("登录已超时，请重新登录");
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
async function loadAllData() {
|
||||
const [cfg, list, running] = await Promise.all([
|
||||
loadConfig(),
|
||||
loadProxies(),
|
||||
getFrpcStatus(),
|
||||
]);
|
||||
Object.assign(globalConfig, cfg);
|
||||
proxies.value = list;
|
||||
frpcRunning.value = running;
|
||||
}
|
||||
|
||||
// ---- 日志轮询 ----
|
||||
async function fetchLogs() {
|
||||
if (logFetching) return;
|
||||
logFetching = true;
|
||||
try {
|
||||
const result = await fetchLogsApi();
|
||||
if (result.code === 401) {
|
||||
logFetching = false;
|
||||
return;
|
||||
}
|
||||
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) {
|
||||
loginError.value = "请输入用户名和密码";
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
loginError.value = "";
|
||||
const result = await login(loginForm.username, loginForm.password);
|
||||
if (result.success) {
|
||||
token.value = result.token;
|
||||
tokenExpireTime.value = result.expire;
|
||||
transitioning.value = true;
|
||||
loggedIn.value = true;
|
||||
setTimeout(async () => {
|
||||
transitioning.value = false;
|
||||
await loadAllData();
|
||||
loading.value = false;
|
||||
setTimeout(() => {
|
||||
contentVisible.value = true;
|
||||
startExpireTimer();
|
||||
}, 300);
|
||||
}, 500);
|
||||
} else {
|
||||
loginError.value = result.error;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 注册 ----
|
||||
const doRegister = async () => {
|
||||
if (registerForm.username.length < 5) {
|
||||
registerError.value = "用户名至少 5 位";
|
||||
return;
|
||||
}
|
||||
if (registerForm.password !== registerForm.confirmPassword) {
|
||||
registerError.value = "两次输入的密码不一致";
|
||||
return;
|
||||
}
|
||||
if (registerForm.password.length < 8) {
|
||||
registerError.value = "密码至少 8 位";
|
||||
return;
|
||||
}
|
||||
registering.value = true;
|
||||
registerError.value = "";
|
||||
try {
|
||||
const res = await fetch("/api/register", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
username: registerForm.username,
|
||||
password: registerForm.password,
|
||||
}),
|
||||
});
|
||||
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;
|
||||
tokenExpireTime.value = expire;
|
||||
loginForm.username = registerForm.username;
|
||||
loggedIn.value = true;
|
||||
transitioning.value = true;
|
||||
setTimeout(async () => {
|
||||
transitioning.value = false;
|
||||
await loadAllData();
|
||||
setTimeout(() => {
|
||||
contentVisible.value = true;
|
||||
startExpireTimer();
|
||||
}, 300);
|
||||
}, 500);
|
||||
} else {
|
||||
registerError.value = data.msg || "注册失败";
|
||||
}
|
||||
} catch (e) {
|
||||
registerError.value = "网络错误，请重试";
|
||||
}
|
||||
registering.value = false;
|
||||
};
|
||||
|
||||
// ---- 退出 ----
|
||||
const doLogout = () => {
|
||||
if (expireTimer) clearInterval(expireTimer);
|
||||
stopLogPolling();
|
||||
stopPingPolling();
|
||||
contentVisible.value = false;
|
||||
loggedIn.value = false;
|
||||
token.value = "";
|
||||
tokenExpireTime.value = 0;
|
||||
loginForm.username = "";
|
||||
loginForm.password = "";
|
||||
loading.value = false;
|
||||
transitioning.value = false;
|
||||
clearAuthState();
|
||||
isFirstRun.value = false;
|
||||
registerForm.username = "";
|
||||
registerForm.password = "";
|
||||
registerForm.confirmPassword = "";
|
||||
registerError.value = "";
|
||||
registering.value = false;
|
||||
};
|
||||
|
||||
// ---- 修改密码 ----
|
||||
const changePassword = async () => {
|
||||
passwordChangeError.value = "";
|
||||
passwordChangeSuccess.value = "";
|
||||
if (passwordChange.newPassword !== passwordChange.confirmPassword) {
|
||||
passwordChangeError.value = "两次输入的密码不一致";
|
||||
return;
|
||||
}
|
||||
if (passwordChange.newPassword.length < 8) {
|
||||
passwordChangeError.value = "密码至少 8 位";
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await fetch("/api/user/password", {
|
||||
method: "PUT",
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify({
|
||||
oldPassword: passwordChange.oldPassword,
|
||||
newPassword: passwordChange.newPassword,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.code === 0) {
|
||||
passwordChangeSuccess.value = "密码修改成功！";
|
||||
passwordChange.oldPassword = "";
|
||||
passwordChange.newPassword = "";
|
||||
passwordChange.confirmPassword = "";
|
||||
} else {
|
||||
passwordChangeError.value = data.msg || "修改失败";
|
||||
}
|
||||
} catch (e) {
|
||||
passwordChangeError.value = "网络错误，请重试";
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 保存配置 ----
|
||||
const saveConfig = async () => {
|
||||
const result = await saveConfigApi(globalConfig);
|
||||
if (result.code === 0) {
|
||||
frpcRunning.value = await getFrpcStatus();
|
||||
alert("配置已更新并热加载");
|
||||
} else {
|
||||
alert("保存失败: " + result.msg);
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 隧道操作 ----
|
||||
const toggleProxy = async (p) => {
|
||||
const result = await updateProxy(p);
|
||||
if (result.code !== 0) {
|
||||
alert("更新失败: " + result.msg);
|
||||
proxies.value = await loadProxies();
|
||||
} else {
|
||||
frpcRunning.value = await getFrpcStatus();
|
||||
}
|
||||
};
|
||||
|
||||
const removeProxy = async (id) => {
|
||||
if (!confirm("确定要删除这条隧道吗？")) return;
|
||||
const result = await deleteProxy(id);
|
||||
if (result.code === 0) {
|
||||
proxies.value = await loadProxies();
|
||||
frpcRunning.value = await getFrpcStatus();
|
||||
} else {
|
||||
alert("删除失败: " + result.msg);
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDialog = async () => {
|
||||
const form = dialogForm.value;
|
||||
if (!form.name || !form.localIP || !form.localPort || !form.remotePort) {
|
||||
alert("请填写完整信息");
|
||||
return;
|
||||
}
|
||||
const result =
|
||||
dialogMode.value === "add"
|
||||
? await createProxy(form)
|
||||
: await updateProxy(form);
|
||||
if (result.code === 0) {
|
||||
closeDialog();
|
||||
proxies.value = await loadProxies();
|
||||
frpcRunning.value = await getFrpcStatus();
|
||||
} else {
|
||||
alert("操作失败: " + result.msg);
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 导入导出 ----
|
||||
const triggerImport = () => {
|
||||
document.getElementById("tomlFileInput").click();
|
||||
};
|
||||
|
||||
const handleImport = async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
try {
|
||||
const res = await fetch("/api/import/toml", {
|
||||
method: "POST",
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
body: formData,
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.code === 0) {
|
||||
alert(data.msg);
|
||||
await loadAllData();
|
||||
} else {
|
||||
alert("导入失败: " + data.msg);
|
||||
}
|
||||
} catch (err) {
|
||||
alert("网络错误: " + err.message);
|
||||
}
|
||||
e.target.value = "";
|
||||
};
|
||||
|
||||
const exportToml = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/export/toml", {
|
||||
method: "GET",
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json();
|
||||
alert("导出失败: " + (data.msg || "未知错误"));
|
||||
return;
|
||||
}
|
||||
const blob = await res.blob();
|
||||
const a = document.createElement("a");
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = "frpc.toml";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(a.href);
|
||||
} catch (e) {
|
||||
alert("导出失败: " + e.message);
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 计算属性 ----
|
||||
const filteredProxies = computed(() =>
|
||||
filterProxies(proxies.value, searchKeyword.value),
|
||||
);
|
||||
|
||||
const showDefaultTip = computed(() => {
|
||||
const addr = globalConfig.serverAddr;
|
||||
return !addr || addr === "frp.example.com" || addr.trim() === "";
|
||||
});
|
||||
|
||||
// ---- 返回 ----
|
||||
return {
|
||||
loggedIn,
|
||||
loading,
|
||||
loginError,
|
||||
loginForm,
|
||||
doLogin,
|
||||
doLogout,
|
||||
|
||||
isFirstRun,
|
||||
registerForm,
|
||||
registerError,
|
||||
registering,
|
||||
doRegister,
|
||||
|
||||
activeTab,
|
||||
globalConfig,
|
||||
saveConfig,
|
||||
|
||||
proxies,
|
||||
filteredProxies,
|
||||
toggleProxy,
|
||||
removeProxy,
|
||||
frpcRunning,
|
||||
|
||||
dialogVisible,
|
||||
dialogMode,
|
||||
dialogForm,
|
||||
openAddDialog,
|
||||
openEditDialog,
|
||||
closeDialog,
|
||||
confirmDialog,
|
||||
|
||||
searchKeyword,
|
||||
transitioning,
|
||||
contentVisible,
|
||||
|
||||
triggerImport,
|
||||
handleImport,
|
||||
exportToml,
|
||||
|
||||
passwordChange,
|
||||
passwordChangeError,
|
||||
passwordChangeSuccess,
|
||||
changePassword,
|
||||
|
||||
showDefaultTip,
|
||||
|
||||
logLines,
|
||||
logTotal,
|
||||
logError,
|
||||
logLastUpdate,
|
||||
logAutoScroll,
|
||||
refreshLogs,
|
||||
scrollLogToBottom,
|
||||
|
||||
showToken,
|
||||
|
||||
pingLatency,
|
||||
pingStatusClass,
|
||||
pingIcon,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
app.mount("#app");
|
||||
Binary file not shown.
@@ -0,0 +1,388 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>frpc-console</title>
|
||||
|
||||
<!-- Vue 3 CDN -->
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<!-- 样式 -->
|
||||
<link rel="stylesheet" href="/static/style-1.css" />
|
||||
<link rel="stylesheet" href="/static/style-2.css" />
|
||||
<link rel="stylesheet" href="/static/style-3.css" />
|
||||
<link rel="stylesheet" href="/static/style-4.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- 背景层 -->
|
||||
<div class="app-backdrop" :class="{ 'is-logged-in': loggedIn }"></div>
|
||||
<div class="loading-ring" :class="{ visible: transitioning }"></div>
|
||||
|
||||
<!-- 主容器 -->
|
||||
<div class="app-container" :class="{ 'is-logged-in': loggedIn }">
|
||||
|
||||
<!-- ====== 登录/注册页 ====== -->
|
||||
<div v-if="!loggedIn" class="login-card">
|
||||
|
||||
<!-- Logo 区域 -->
|
||||
<div class="login-logo">
|
||||
<img src="/static/logo.svg" alt="frpc-console" class="logo-img" />
|
||||
<span class="logo-text">frpc-console</span>
|
||||
</div>
|
||||
|
||||
<!-- 首次启动：注册页 -->
|
||||
<template v-if="isFirstRun">
|
||||
<div class="login-header">
|
||||
<h1>首次设置</h1>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<div class="input-group">
|
||||
<label>用户名（至少 5 位）</label>
|
||||
<input v-model="registerForm.username" type="text" placeholder="设置管理员用户名"
|
||||
@keydown.enter="doRegister" />
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>密码</label>
|
||||
<input v-model="registerForm.password" type="password" placeholder="至少8位，含大小写/数字/特殊字符"
|
||||
@keydown.enter="doRegister" />
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>确认密码</label>
|
||||
<input v-model="registerForm.confirmPassword" type="password" placeholder="再次输入密码"
|
||||
@keydown.enter="doRegister" />
|
||||
</div>
|
||||
<button class="login-btn" @click="doRegister" :disabled="registering">
|
||||
{{ registering ? '注册中...' : '注册' }}
|
||||
</button>
|
||||
<p v-if="registerError" class="login-error">{{ registerError }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 正常：登录页 -->
|
||||
<template v-else>
|
||||
<div class="login-header">
|
||||
<h1>console login</h1>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<div class="input-group">
|
||||
<label>user</label>
|
||||
<input v-model="loginForm.username" type="text" placeholder="用户名"
|
||||
@keydown.enter="doLogin" />
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>passwd</label>
|
||||
<input v-model="loginForm.password" type="password" placeholder="密码"
|
||||
@keydown.enter="doLogin" />
|
||||
</div>
|
||||
<button class="login-btn" @click="doLogin" :disabled="loading">
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</button>
|
||||
<p v-if="loginError" class="login-error">{{ loginError }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- ====== 主界面 ====== -->
|
||||
<div v-else class="main-panel" :class="{ visible: contentVisible }">
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-left">
|
||||
<img src="/static/logo.svg" alt="frpc-console" class="nav-logo" />
|
||||
<div class="brand-info">
|
||||
<span class="logo-text">frpc-console</span>
|
||||
<span class="status-wrapper">
|
||||
<span class="status-dot" :class="{ active: frpcRunning }"></span>
|
||||
<span class="status-text">{{ frpcRunning ? 'frpc 运行中' : 'frpc 已停止' }}</span>
|
||||
<!-- 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>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
<button class="logout-btn" @click="doLogout">退出</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 栏 -->
|
||||
<div class="tab-bar">
|
||||
<span class="tab-item" :class="{ active: activeTab === 'proxies' }"
|
||||
@click="activeTab = 'proxies'">隧道列表</span>
|
||||
<span class="tab-item" :class="{ active: activeTab === 'config' }"
|
||||
@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>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="content-area">
|
||||
|
||||
<!-- ====== 隧道列表 ====== -->
|
||||
<div v-if="activeTab === 'proxies'" class="tab-content">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<button class="btn-import" @click="triggerImport">导入 TOML</button>
|
||||
<button class="btn-export" @click="exportToml">导出 TOML</button>
|
||||
<button class="btn-add" @click="openAddDialog">+ 新增隧道</button>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<input class="search-input" placeholder="搜索隧道..." v-model="searchKeyword" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="proxy-list">
|
||||
<div v-for="p in filteredProxies" :key="p.id" class="proxy-card">
|
||||
<div class="proxy-row">
|
||||
<div class="proxy-left">
|
||||
<span class="status-dot" :class="{ active: p.enabled }"></span>
|
||||
<span class="proxy-name">{{ p.name }}</span>
|
||||
<span class="proxy-addr">{{ p.localIP }}:{{ p.localPort }}</span>
|
||||
<span class="proxy-tag">{{ p.type }}</span>
|
||||
</div>
|
||||
<div class="proxy-right">
|
||||
<span class="remote-port">{{ p.remotePort }}</span>
|
||||
<button class="icon-btn" @click="openEditDialog(p)">✎</button>
|
||||
<button class="icon-btn danger" @click="removeProxy(p.id)">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="proxy-footer">
|
||||
<label class="switch small">
|
||||
<input type="checkbox" v-model="p.enabled" @change="toggleProxy(p)" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="status-label">{{ p.enabled ? '已启用' : '已禁用' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<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 v-if="showDefaultTip" class="config-tip">
|
||||
首次使用请修改「服务器地址」和「认证令牌」为您的真实 frps 配置
|
||||
</div>
|
||||
|
||||
<!-- 卡片1: 服务器连接 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card-header">
|
||||
<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-title">传输配置</span>
|
||||
</div>
|
||||
<div class="config-card-body">
|
||||
<div class="form-row" style="grid-column: 1 / -1;">
|
||||
<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>保活间隔（秒）</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>
|
||||
<div class="form-row v2-switch-row">
|
||||
<label>frp v2 隧道支持</label>
|
||||
<div class="v2-switch-wrapper">
|
||||
<label class="switch">
|
||||
<input type="checkbox" v-model="globalConfig.wireProtocolV2" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<span class="hint-text v2-hint">
|
||||
此功能为 frp 0.70.0 以上版本才能开启，若要打开必须搭配同版本 frpc 使用，否则此功能不生效
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片3: 日志配置 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card-header">
|
||||
<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" />
|
||||
</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 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> <!-- /content-area -->
|
||||
|
||||
<!-- ====== 弹窗 ====== -->
|
||||
|
||||
|
||||
</div> <!-- /main-panel -->
|
||||
</div> <!-- /app-container -->
|
||||
|
||||
<!-- 隐藏文件选择器 -->
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 46 KiB |
@@ -0,0 +1,183 @@
|
||||
/* ===== style-1.css - 全局基础 ===== */
|
||||
|
||||
/* ---------- 字体定义 ---------- */
|
||||
/* 自托管 HarmonyOS Sans SC Regular */
|
||||
|
||||
/* 中英文：HarmonyOS Sans SC Regular */
|
||||
@font-face {
|
||||
font-family: 'HarmonyOS Sans SC';
|
||||
src: url('./fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* 数字专用：复用 HarmonyOS Sans SC Regular（因 Light 版本缺失） */
|
||||
@font-face {
|
||||
font-family: 'HarmonyOS Sans';
|
||||
src: url('./fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* 后备：如果自托管字体加载失败，使用系统字体 */
|
||||
|
||||
/* ---------- 重置 ---------- */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
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,
|
||||
.proxy-addr,
|
||||
.metric-value .digit,
|
||||
.metric-value .big-number,
|
||||
.login-header h1,
|
||||
.login-btn,
|
||||
.save-btn,
|
||||
.btn-confirm {
|
||||
font-weight: 300 !important;
|
||||
letter-spacing: 0.02em;
|
||||
font-family: 'HarmonyOS Sans', 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* 数字特别加粗（适用于大数字展示） */
|
||||
.big-number {
|
||||
font-weight: 600 !important;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* 代码/端口类数字使用等宽字体，但保持 HarmonyOS Sans 风格 */
|
||||
.digit,
|
||||
.remote-port,
|
||||
.proxy-addr {
|
||||
font-family: 'HarmonyOS Sans', 'JetBrains Mono', monospace;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
/* ---------- 全局颜色变量 ---------- */
|
||||
:root {
|
||||
--primary-blue: #4a7cff;
|
||||
--primary-blue-dim: rgba(74, 124, 255, 0.15);
|
||||
--primary-blue-glow: rgba(74, 124, 255, 0.3);
|
||||
--primary-blue-border: rgba(74, 124, 255, 0.2);
|
||||
--bg-deep: #0a0a18;
|
||||
--bg-card: rgba(13, 13, 26, 0.6);
|
||||
--bg-metric: rgba(255, 255, 255, 0.03);
|
||||
--border-subtle: rgba(255, 255, 255, 0.04);
|
||||
--text-dim: rgba(255, 255, 255, 0.25);
|
||||
--text-muted: rgba(255, 255, 255, 0.35);
|
||||
--text-secondary: rgba(255, 255, 255, 0.6);
|
||||
--text-primary: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* ---------- 滚动条 ---------- */
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(74, 124, 255, 0.25);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(74, 124, 255, 0.4);
|
||||
}
|
||||
|
||||
/* ---------- 背景磨砂层 ---------- */
|
||||
.app-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 50%, rgba(30, 60, 120, 0.3) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 80% 50%, rgba(80, 30, 120, 0.2) 0%, transparent 60%),
|
||||
#0a0a0f;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* ---------- 主容器 ---------- */
|
||||
.app-container {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
backdrop-filter: blur(40px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(1.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 32px;
|
||||
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 登录态尺寸 */
|
||||
.app-container:not(.is-logged-in) {
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
/* 登录后尺寸 */
|
||||
.app-container.is-logged-in {
|
||||
width: min(1600px, 92vw);
|
||||
height: min(900px, 88vh);
|
||||
}
|
||||
|
||||
/* ---------- 旋转圈 ---------- */
|
||||
.loading-ring {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.04);
|
||||
border-top: 3px solid var(--primary-blue);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
z-index: 5;
|
||||
}
|
||||
.loading-ring.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
@keyframes spin {
|
||||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ---------- 主内容淡入 ---------- */
|
||||
.main-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 28px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.main-panel.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
/* ===== style-2.css - 登录页 ===== */
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 32px 48px 48px 48px; /* 上左右不变，下边距加大 */
|
||||
}
|
||||
|
||||
.login-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.login-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
.login-header h1 {
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 4px;
|
||||
color: var(--text-primary);
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.input-group label {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.input-group input {
|
||||
height: 44px;
|
||||
padding: 0 20px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.input-group input:focus {
|
||||
border-color: var(--primary-blue-border);
|
||||
}
|
||||
.input-group input::placeholder {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
height: 44px;
|
||||
margin-top: 6px;
|
||||
background: linear-gradient(135deg, var(--primary-blue), #2a5adf);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0a0a0f;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.login-btn:hover:not(:disabled) {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 8px 24px var(--primary-blue-glow);
|
||||
}
|
||||
.login-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
color: #f87171;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: 4px;
|
||||
min-height: 24px;
|
||||
}
|
||||
.login-form .hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
text-align: center;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
/* ---------- Logo 区域 ---------- */
|
||||
.login-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.login-logo .logo-text {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.login-logo img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ---------- 登录页补充优化 ---------- */
|
||||
.login-card .login-form {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* 注册按钮距上方输入框远一点 */
|
||||
.login-card .login-form .login-btn {
|
||||
margin-top: 16px;
|
||||
}
|
||||
@@ -0,0 +1,841 @@
|
||||
/* ===== style-3.css - 主界面核心 ===== */
|
||||
|
||||
/* ---------- 顶部导航 ---------- */
|
||||
.top-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.top-left .nav-logo {
|
||||
width: 52px; /* 原 48px */
|
||||
height: 52px; /* 原 48px */
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.brand-info .logo-text {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-wrapper .status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #444;
|
||||
transition: background 0.3s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-wrapper .status-dot.active {
|
||||
background: #63e2b7;
|
||||
box-shadow: 0 0 12px rgba(99, 226, 183, 0.4);
|
||||
}
|
||||
|
||||
/* 状态文字 12px（原 13px） */
|
||||
.status-wrapper .status-text {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.top-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 12px; /* 原 13px，与状态文字对齐 */
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
padding: 6px 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;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: rgba(255, 70, 70, 0.15);
|
||||
border-color: rgba(255, 70, 70, 0.3);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* ---------- Tab 栏 ---------- */
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
padding: 14px 0 12px;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* ---------- 内容区 ---------- */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-top: 16px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
|
||||
}
|
||||
|
||||
.content-area::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.content-area::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.content-area::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ---------- 账户管理区域 ---------- */
|
||||
.profile-section {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-radius: 16px;
|
||||
padding: 16px 20px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
color: var(--primary-blue);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 12px 16px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.profile-form .form-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.profile-form .form-row label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.profile-form .form-row input {
|
||||
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;
|
||||
}
|
||||
|
||||
.profile-form .form-row input:focus {
|
||||
border-color: var(--primary-blue-border);
|
||||
}
|
||||
|
||||
.login-success {
|
||||
color: #63e2b7;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: 4px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
/* ---------- 统一保存按钮 ---------- */
|
||||
.save-btn,
|
||||
.save-config-btn {
|
||||
padding: 10px 24px;
|
||||
background: linear-gradient(135deg, var(--primary-blue), #2a5adf);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0a0a0f;
|
||||
cursor: pointer;
|
||||
transition: filter 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
/* 确保按钮本身不裁切阴影 */
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.save-btn:hover,
|
||||
.save-config-btn:hover {
|
||||
filter: brightness(1.25);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.save-btn:active,
|
||||
.save-config-btn:active {
|
||||
filter: brightness(0.9);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* 账户管理中的修改密码按钮（覆盖尺寸） */
|
||||
.profile-form .save-btn {
|
||||
grid-column: auto;
|
||||
padding: 8px 20px;
|
||||
margin-top: 0;
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 保存配置按钮全宽（在全局配置页使用） */
|
||||
.save-config-btn {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* ---------- 隧道列表 ---------- */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toolbar-left button {
|
||||
padding: 8px 18px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.toolbar-left button:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.btn-import:hover {
|
||||
border-color: var(--primary-blue-border);
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.btn-export:hover {
|
||||
border-color: rgba(99, 150, 255, 0.3);
|
||||
color: #6a9fff;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: var(--primary-blue-dim) !important;
|
||||
border-color: var(--primary-blue-border) !important;
|
||||
color: var(--primary-blue) !important;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background: rgba(74, 124, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.toolbar-right .search-input {
|
||||
padding: 8px 16px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
width: 200px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.toolbar-right .search-input:focus {
|
||||
border-color: var(--primary-blue-border);
|
||||
}
|
||||
|
||||
.toolbar-right .search-input::placeholder {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ---------- 隧道卡片 ---------- */
|
||||
.proxy-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.proxy-card {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 14px;
|
||||
padding: 12px 16px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.proxy-card:hover {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.proxy-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.proxy-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.proxy-name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.proxy-addr {
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
font-family: 'HarmonyOS Sans','JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.proxy-tag {
|
||||
font-size: 10px;
|
||||
padding: 2px 10px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: 10px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.proxy-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.remote-port {
|
||||
font-family: 'HarmonyOS Sans','JetBrains Mono', monospace;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 4px 6px;
|
||||
transition: color 0.2s;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
color: var(--text-secondary);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.icon-btn.danger:hover {
|
||||
color: #f87171;
|
||||
background: rgba(248, 113, 113, 0.1);
|
||||
}
|
||||
|
||||
.proxy-footer {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 48px 0;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ---------- 开关 ---------- */
|
||||
.switch {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.switch .slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.switch .slider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background: #1a1a24;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.switch input:checked + .slider {
|
||||
background: var(--primary-blue);
|
||||
}
|
||||
|
||||
.switch input:checked + .slider::before {
|
||||
transform: translateX(20px);
|
||||
background: #0a0a0f;
|
||||
}
|
||||
|
||||
.switch.small {
|
||||
width: 32px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.switch.small .slider::before {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
}
|
||||
|
||||
.switch.small input:checked + .slider::before {
|
||||
transform: translateX(14px);
|
||||
}
|
||||
|
||||
/* ---------- 状态点（只读展示） ---------- */
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #333;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.status-dot.active {
|
||||
background: #63e2b7;
|
||||
box-shadow: 0 0 10px rgba(99, 226, 183, 0.3);
|
||||
}
|
||||
|
||||
/* ---------- 弹窗 ---------- */
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dialog-card {
|
||||
background: #1a1a24;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 20px;
|
||||
padding: 28px 32px;
|
||||
width: 480px;
|
||||
max-width: 90vw;
|
||||
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.dialog-card h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dialog-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.dialog-form .form-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.dialog-form .form-row label {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.dialog-form .form-row input,
|
||||
.dialog-form .form-row select {
|
||||
padding: 8px 14px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.dialog-form .form-row input:focus,
|
||||
.dialog-form .form-row select:focus {
|
||||
border-color: var(--primary-blue-border);
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.dialog-actions button {
|
||||
padding: 8px 24px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: linear-gradient(135deg, var(--primary-blue), #2a5adf);
|
||||
color: #0a0a0f;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-confirm:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 4px 16px var(--primary-blue-glow);
|
||||
}
|
||||
|
||||
/* ---------- 自定义 Select（墨蓝风格） ---------- */
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background: rgba(13, 13, 26, 0.85) !important;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
border: 1px solid var(--primary-blue-border) !important;
|
||||
border-radius: 10px !important;
|
||||
color: #e0e0e0 !important;
|
||||
padding: 10px 14px !important;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
|
||||
width: 100%;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a7cff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 14px center;
|
||||
padding-right: 40px !important;
|
||||
}
|
||||
|
||||
select:hover {
|
||||
border-color: rgba(74, 124, 255, 0.4) !important;
|
||||
background: rgba(20, 20, 40, 0.9) !important;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
border-color: var(--primary-blue) !important;
|
||||
box-shadow: 0 0 0 3px rgba(74, 124, 255, 0.15), inset 0 0 0 1px rgba(74, 124, 255, 0.05);
|
||||
}
|
||||
|
||||
select option {
|
||||
background: #0d0d1a !important;
|
||||
color: #e0e0e0 !important;
|
||||
padding: 8px 14px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
select option:hover,
|
||||
select option:checked,
|
||||
select option:focus {
|
||||
background: rgba(74, 124, 255, 0.2) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
select:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #e0e0e0;
|
||||
}
|
||||
|
||||
select:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ---------- 弹窗入场/出场动画 ---------- */
|
||||
.dialog-enter-active,
|
||||
.dialog-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dialog-enter-from,
|
||||
.dialog-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dialog-enter-from .dialog-card,
|
||||
.dialog-leave-to .dialog-card {
|
||||
transform: scale(0.85) translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dialog-enter-to .dialog-card,
|
||||
.dialog-leave-from .dialog-card {
|
||||
transform: scale(1) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ---------- 响应式调整 ---------- */
|
||||
@media (max-width: 768px) {
|
||||
.profile-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.proxy-list {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.toolbar-right .search-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.proxy-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.top-left .nav-logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.brand-info .logo-text {
|
||||
font-size: 18px;
|
||||
}
|
||||
.dialog-card {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Ping 延迟显示 ---------- */
|
||||
.status-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ping-display {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 2px 8px 2px 4px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.ping-display .ping-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.ping-display .ping-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 状态颜色 */
|
||||
.ping-good .ping-icon {
|
||||
color: #63e2b7;
|
||||
}
|
||||
.ping-good .ping-value {
|
||||
color: #63e2b7;
|
||||
}
|
||||
|
||||
.ping-slow .ping-icon {
|
||||
color: #f0c040;
|
||||
}
|
||||
.ping-slow .ping-value {
|
||||
color: #f0c040;
|
||||
}
|
||||
|
||||
.ping-fail .ping-icon {
|
||||
color: #f87171;
|
||||
}
|
||||
.ping-fail .ping-value {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.ping-display {
|
||||
font-size: 11px;
|
||||
padding: 1px 6px 1px 2px;
|
||||
}
|
||||
.ping-display .ping-icon {
|
||||
width: 14px;
|
||||
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);
|
||||
}
|
||||
@@ -0,0 +1,327 @@
|
||||
/* ===== style-4.css - 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-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 input[type="number"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 只读行（TCP Mux） */
|
||||
.readonly-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 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);
|
||||
}
|
||||
|
||||
/* ---------- 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;
|
||||
}
|
||||
|
||||
|
||||
/* "即将推出" 徽章 */
|
||||
.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-badge.v2-enabled {
|
||||
background: rgba(99, 226, 183, 0.12);
|
||||
border-color: rgba(99, 226, 183, 0.2);
|
||||
color: #63e2b7;
|
||||
}
|
||||
|
||||
.v2-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.5;
|
||||
padding: 2px 0 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ---------- 日志面板 ---------- */
|
||||
.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-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;
|
||||
}
|
||||
.log-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.log-toolbar-right {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.token-input-wrapper {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.v2-switch-wrapper {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user