From 6dbebc27f60ca403e6d613fd1adfcb51b9b5a5f4 Mon Sep 17 00:00:00 2001 From: lxh2875931338 Date: Sat, 25 Jul 2026 23:36:13 +0800 Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E5=B8=83=E5=B1=80=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/index.html | 25 +- static/style-3.css | 560 ++++++--------------------------------------- static/style-4.css | 339 +++++++++++++++++++++++++++ 3 files changed, 424 insertions(+), 500 deletions(-) create mode 100644 static/style-4.css diff --git a/static/index.html b/static/index.html index b064008..2eed4fd 100644 --- a/static/index.html +++ b/static/index.html @@ -12,6 +12,7 @@ + @@ -158,6 +159,7 @@ +
@@ -231,7 +233,8 @@ 传输配置
-
+ +
@@ -239,25 +242,25 @@ 优化连接性能，减少延迟，frp 官方推荐开启
+
- + - 秒
+
- + - 秒
+
- + - 秒
+
- + - 个
@@ -293,9 +296,8 @@
- + - 天
@@ -303,7 +305,6 @@ -
diff --git a/static/style-3.css b/static/style-3.css index 92f72e4..73a3c6b 100644 --- a/static/style-3.css +++ b/static/style-3.css @@ -1,4 +1,4 @@ -/* ===== style-3.css - 主界面 ===== */ +/* ===== style-3.css - 主界面核心 ===== */ /* ---------- 顶部导航 ---------- */ .top-bar { @@ -145,130 +145,6 @@ height: 100%; } -/* ---------- 全局配置页 ---------- */ -.config-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 16px; - margin-bottom: 20px; -} - -.metric-card { - background: var(--bg-metric); - border-radius: 16px; - padding: 16px 20px; - border: 1px solid var(--border-subtle); -} - -.metric-label { - font-size: 12px; - color: var(--text-dim); - text-transform: uppercase; - letter-spacing: 1px; - margin-bottom: 8px; -} - -.metric-value { - display: flex; - align-items: center; - gap: 12px; -} - -.big-number { - font-size: 28px; - font-weight: 600; - color: #fff; -} - -.unit { - font-size: 14px; - color: var(--text-dim); -} - -.digit { - font-family: 'JetBrains Mono', monospace; - font-size: 18px; - color: #fff; -} - -.sep { - color: var(--text-dim); -} - -/* ---------- 展开详情 ---------- */ -.detail-collapse { - padding: 12px 0; - color: var(--text-dim); - font-size: 13px; - cursor: pointer; - user-select: none; - transition: color 0.3s; -} - -.detail-collapse:hover { - color: var(--text-secondary); -} - -.detail-panel { - background: rgba(255, 255, 255, 0.02); - border-radius: 12px; - padding: 16px 20px; - border: 1px solid var(--border-subtle); - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px 24px; - margin-bottom: 16px; -} - -.detail-panel .form-row { - display: flex; - flex-direction: column; - gap: 4px; -} - -.detail-panel .form-row label { - font-size: 11px; - text-transform: uppercase; - letter-spacing: 0.5px; - color: var(--text-dim); -} - -.detail-panel .form-row input, -.detail-panel .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; -} - -.detail-panel .form-row input:focus, -.detail-panel .form-row select:focus { - border-color: var(--primary-blue-border); -} - -.save-btn { - grid-column: 1 / -1; - 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: transform 0.2s, box-shadow 0.2s; - margin-top: 4px; -} - -.save-btn:hover { - transform: scale(1.01); - box-shadow: 0 4px 16px var(--primary-blue-glow); -} - /* ---------- 账户管理区域 ---------- */ .profile-section { background: rgba(255, 255, 255, 0.02); @@ -329,13 +205,6 @@ border-color: var(--primary-blue-border); } -.profile-form .save-btn { - grid-column: auto; - padding: 8px 20px; - margin-top: 0; - height: 40px; -} - .login-success { color: #63e2b7; font-size: 14px; @@ -344,6 +213,57 @@ 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; @@ -783,371 +703,35 @@ select:disabled { opacity: 1; } -/* ============================================================ - v1.5 新增样式：配置卡片 + 日志面板 - ============================================================ */ - -/* ---------- 配置页面 ---------- */ -.config-tab-content { - padding-bottom: 20px; -} - -.config-page-header { - margin-bottom: 12px; -} -.config-page-header h2 { - font-size: 18px; - font-weight: 500; - color: var(--text-primary); - margin-bottom: 2px; -} -.config-subtitle { - font-size: 13px; - color: var(--text-dim); -} - -/* 首次使用提示 */ -.config-tip { - background: rgba(255, 200, 50, 0.08); - border: 1px solid rgba(255, 200, 50, 0.15); - border-radius: 10px; - padding: 10px 16px; - font-size: 13px; - color: #f0c040; - margin-bottom: 16px; -} - -/* 配置卡片 */ -.config-card { - background: rgba(255, 255, 255, 0.02); - border: 1px solid var(--border-subtle); - border-radius: 14px; - padding: 16px 20px; - margin-bottom: 14px; -} - -.config-card-header { - display: flex; - align-items: center; - gap: 10px; - padding-bottom: 10px; - border-bottom: 1px solid var(--border-subtle); - margin-bottom: 14px; -} -.card-icon { - font-size: 18px; -} -.card-title { - font-size: 14px; - font-weight: 500; - color: var(--text-secondary); -} - -.config-card-body { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px 24px; -} -.config-card-body .form-row { - display: flex; - flex-direction: column; - gap: 4px; -} -.config-card-body .form-row label { - font-size: 11px; - text-transform: uppercase; - letter-spacing: 0.5px; - color: var(--text-dim); -} -.config-card-body .form-row input, -.config-card-body .form-row select { - padding: 8px 12px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid var(--border-subtle); - border-radius: 8px; - color: #fff; - font-size: 14px; - outline: none; - transition: border-color 0.3s; - width: 100%; -} -.config-card-body .form-row input:focus, -.config-card-body .form-row select:focus { - border-color: var(--primary-blue-border); -} -.config-card-body .form-row .unit-suffix { - font-size: 12px; - color: var(--text-dim); - margin-top: 2px; -} - -/* 只读行（TCP Mux） */ -.readonly-row { - grid-column: 1 / -1; -} -.readonly-value { - display: flex; - align-items: center; - gap: 10px; - padding: 6px 12px; - background: rgba(255, 255, 255, 0.02); - border-radius: 8px; -} -.readonly-value .status-dot { - width: 8px; - height: 8px; - border-radius: 50%; - background: #63e2b7; - box-shadow: 0 0 10px rgba(99, 226, 183, 0.3); - flex-shrink: 0; -} -.readonly-value .status-text.active { - color: #63e2b7; - font-size: 13px; -} -.readonly-value .hint-text { - font-size: 12px; - color: var(--text-dim); - margin-left: 8px; -} - -/* Token 输入框 + 显示按钮 */ -.token-input-wrapper { - display: flex; - gap: 8px; -} -.token-input-wrapper input { - flex: 1; -} -.token-toggle-btn { - padding: 8px 16px; - background: rgba(255, 255, 255, 0.06); - border: 1px solid var(--border-subtle); - border-radius: 8px; - color: var(--text-secondary); - font-size: 12px; - cursor: pointer; - white-space: nowrap; -} -.token-toggle-btn:hover { - background: rgba(255, 255, 255, 0.1); -} - -/* 保存配置按钮（独立大按钮） */ -.save-config-btn { - width: 100%; - padding: 12px; - background: linear-gradient(135deg, var(--primary-blue), #2a5adf); - border: none; - border-radius: 12px; - font-size: 16px; - font-weight: 600; - color: #0a0a0f; - cursor: pointer; - transition: transform 0.2s, box-shadow 0.2s; - margin-top: 8px; -} -.save-config-btn:hover { - transform: scale(1.01); - box-shadow: 0 4px 20px var(--primary-blue-glow); -} - -/* ---------- 日志面板 ---------- */ -.log-tab-content { - display: flex; - flex-direction: column; - height: 100%; - min-height: 400px; -} - -.log-toolbar { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 0 12px; - flex-shrink: 0; - flex-wrap: wrap; - gap: 10px; -} -.log-toolbar-left { - display: flex; - align-items: center; - gap: 14px; -} -.log-toolbar-right { - display: flex; - align-items: center; - gap: 10px; -} - -.log-info-badge { - font-size: 13px; - color: var(--text-secondary); -} -.log-error-badge { - font-size: 13px; - color: #f87171; -} -.log-auto-scroll-label { - font-size: 13px; - color: var(--text-secondary); - display: flex; - align-items: center; - gap: 6px; - cursor: pointer; -} -.log-auto-scroll-label input[type="checkbox"] { - width: 16px; - height: 16px; - accent-color: var(--primary-blue); - cursor: pointer; -} - -.log-btn { - padding: 6px 14px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid var(--border-subtle); - border-radius: 8px; - color: var(--text-secondary); - font-size: 13px; - cursor: pointer; - transition: background 0.2s; -} -.log-btn:hover { - background: rgba(255, 255, 255, 0.08); -} - -/* 终端样式（类似命令行） */ -.log-terminal { - flex: 1; - background: rgba(0, 0, 0, 0.6); - border-radius: 12px; - border: 1px solid var(--border-subtle); - padding: 12px 16px; - overflow-y: auto; - font-family: 'JetBrains Mono', 'Consolas', monospace; - font-size: 13px; - line-height: 1.7; - min-height: 300px; - max-height: 500px; -} -.log-terminal::-webkit-scrollbar { - width: 6px; -} -.log-terminal::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.02); - border-radius: 4px; -} -.log-terminal::-webkit-scrollbar-thumb { - background: rgba(74, 124, 255, 0.25); - border-radius: 4px; -} -.log-terminal::-webkit-scrollbar-thumb:hover { - background: rgba(74, 124, 255, 0.4); -} - -.log-lines { - display: flex; - flex-direction: column; -} -.log-line { - color: #c0c0c0; - white-space: pre-wrap; - word-break: break-all; - padding: 1px 0; -} -.log-line:hover { - background: rgba(255, 255, 255, 0.02); -} -.log-empty { - color: var(--text-dim); - text-align: center; - padding: 40px 0; -} - -/* 日志底部状态 */ -.log-footer { - display: flex; - justify-content: space-between; - padding: 10px 4px 0; - font-size: 12px; - color: var(--text-dim); - flex-shrink: 0; -} -.log-polling-status { - color: var(--primary-blue); -} - /* ---------- 响应式调整 ---------- */ @media (max-width: 768px) { - .config-card-body { - grid-template-columns: 1fr; - } .profile-form { grid-template-columns: 1fr; } - .log-toolbar { + .proxy-list { + grid-template-columns: 1fr 1fr; + } + .toolbar { flex-direction: column; align-items: stretch; } - .log-toolbar-right { - flex-wrap: wrap; - } - .token-input-wrapper { - flex-wrap: wrap; + .toolbar-right .search-input { + width: 100%; } } -/* ============================================================ - 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; +@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; + } } \ No newline at end of file diff --git a/static/style-4.css b/static/style-4.css new file mode 100644 index 0000000..2a2368b --- /dev/null +++ b/static/style-4.css @@ -0,0 +1,339 @@ +/* ===== 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%; + max-width: 120px; +} + +/* 只读行（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; +} + +/* 禁用状态开关 - 灰标 */ +.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; +} + +/* ---------- 日志面板 ---------- */ +.log-tab-content { + display: flex; + flex-direction: column; + height: 100%; + min-height: 400px; +} + +.log-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 0 12px; + flex-shrink: 0; + flex-wrap: wrap; + gap: 10px; +} +.log-toolbar-left { + display: flex; + align-items: center; + gap: 14px; +} +.log-toolbar-right { + display: flex; + align-items: center; + gap: 10px; +} + +.log-info-badge { + font-size: 13px; + color: var(--text-secondary); +} +.log-error-badge { + font-size: 13px; + color: #f87171; +} +.log-auto-scroll-label { + font-size: 13px; + color: var(--text-secondary); + display: flex; + align-items: center; + gap: 6px; + cursor: pointer; +} +.log-auto-scroll-label input[type="checkbox"] { + width: 16px; + height: 16px; + accent-color: var(--primary-blue); + cursor: pointer; +} + +.log-btn { + padding: 6px 14px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid var(--border-subtle); + border-radius: 8px; + color: var(--text-secondary); + font-size: 13px; + cursor: pointer; + transition: background 0.2s; +} +.log-btn:hover { + background: rgba(255, 255, 255, 0.08); +} + +/* 终端样式（类似命令行） */ +.log-terminal { + flex: 1; + background: rgba(0, 0, 0, 0.6); + border-radius: 12px; + border: 1px solid var(--border-subtle); + padding: 12px 16px; + overflow-y: auto; + font-family: 'JetBrains Mono', 'Consolas', monospace; + font-size: 13px; + line-height: 1.7; + min-height: 300px; + max-height: 500px; +} +.log-terminal::-webkit-scrollbar { + width: 6px; +} +.log-terminal::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.02); + border-radius: 4px; +} +.log-terminal::-webkit-scrollbar-thumb { + background: rgba(74, 124, 255, 0.25); + border-radius: 4px; +} +.log-terminal::-webkit-scrollbar-thumb:hover { + background: rgba(74, 124, 255, 0.4); +} + +.log-lines { + display: flex; + flex-direction: column; +} +.log-line { + color: #c0c0c0; + white-space: pre-wrap; + word-break: break-all; + padding: 1px 0; +} +.log-line:hover { + background: rgba(255, 255, 255, 0.02); +} +.log-empty { + color: var(--text-dim); + text-align: center; + padding: 40px 0; +} + +/* 日志底部状态 */ +.log-footer { + display: flex; + justify-content: space-between; + padding: 10px 4px 0; + font-size: 12px; + color: var(--text-dim); + flex-shrink: 0; +} +.log-polling-status { + color: var(--primary-blue); +} + +/* ---------- 响应式调整 ---------- */ +@media (max-width: 768px) { + .config-card-body { + grid-template-columns: 1fr; + } + .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; + } +} \ No newline at end of file