mirror of
https://gitcode.com/JianFeeeee/webui4frpc.git
synced 2026-09-19 16:38:31 +00:00
feat: session-cookie login/logout + three-tier roles (superadmin/admin/viewer) with read-only UI + remove pink theme
- cookie-based auth (/login /logout) replacing Basic Auth for UI, enabling logout - roles: superadmin (account management only), admin (full except accounts), viewer/audit (read-only status+cluster, export logs) - readonly accounts hide edit buttons (added remote node, group ops, canvas layout/save/import, cluster manage, install) instead of greying them - auditors see status+cluster only; ordinary admins lose the accounts nav; last-admin guard covers superadmin - remove pink theme entirely (switcher, [data-theme=pink], leftover localStorage), keep white/blue
This commit is contained in:
@ -1,257 +1,257 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500" height="500" shape-rendering="crispEdges">
|
||||
<defs>
|
||||
<!-- 主字母像素块（黑色） -->
|
||||
<rect id="p" width="12" height="12" fill="#000000" />
|
||||
<!-- frpc 小像素块（蓝色） -->
|
||||
<rect id="q" width="5" height="5" fill="#2563eb" />
|
||||
<!-- 装饰小方块（浅灰） -->
|
||||
<rect id="p" width="14" height="14" fill="#000000" />
|
||||
<rect id="q" width="7" height="7" fill="#2563eb" />
|
||||
<rect id="d" width="8" height="8" fill="#94a3b8" />
|
||||
<!-- 小十字星装饰 -->
|
||||
<rect id="s" width="6" height="6" fill="#94a3b8" />
|
||||
</defs>
|
||||
|
||||
<!-- 圆角白色背景（模拟 App 图标外框） -->
|
||||
<!-- 圆角白色背景 -->
|
||||
<rect width="500" height="500" rx="40" fill="#ffffff" stroke="#e2e8f0" stroke-width="4" />
|
||||
|
||||
<!-- ========== 主字母整体居中（横向间距更合理） ========== -->
|
||||
<g transform="translate(70, 160)">
|
||||
<!-- ===== W（基于原始结构，高度约 150px） ===== -->
|
||||
<!-- ========== 主字母 WUI ========== -->
|
||||
<g transform="translate(70, 100)">
|
||||
<!-- W -->
|
||||
<g transform="translate(0, 0)">
|
||||
<!-- 左竖线（占2列） -->
|
||||
<use href="#p" x="0" y="0" />
|
||||
<use href="#p" x="12" y="0" />
|
||||
<use href="#p" x="0" y="12" />
|
||||
<use href="#p" x="12" y="12" />
|
||||
<use href="#p" x="0" y="24" />
|
||||
<use href="#p" x="12" y="24" />
|
||||
<use href="#p" x="0" y="36" />
|
||||
<use href="#p" x="12" y="36" />
|
||||
<use href="#p" x="0" y="48" />
|
||||
<use href="#p" x="12" y="48" />
|
||||
<use href="#p" x="0" y="60" />
|
||||
<use href="#p" x="12" y="60" />
|
||||
<use href="#p" x="0" y="72" />
|
||||
<use href="#p" x="12" y="72" />
|
||||
<use href="#p" x="14" y="0" />
|
||||
<use href="#p" x="0" y="14" />
|
||||
<use href="#p" x="14" y="14" />
|
||||
<use href="#p" x="0" y="28" />
|
||||
<use href="#p" x="14" y="28" />
|
||||
<use href="#p" x="0" y="42" />
|
||||
<use href="#p" x="14" y="42" />
|
||||
<use href="#p" x="0" y="56" />
|
||||
<use href="#p" x="14" y="56" />
|
||||
<use href="#p" x="0" y="70" />
|
||||
<use href="#p" x="14" y="70" />
|
||||
<use href="#p" x="0" y="84" />
|
||||
<use href="#p" x="12" y="84" />
|
||||
<use href="#p" x="0" y="96" />
|
||||
<use href="#p" x="12" y="96" />
|
||||
<use href="#p" x="0" y="108" />
|
||||
<use href="#p" x="12" y="108" />
|
||||
<use href="#p" x="0" y="120" />
|
||||
<use href="#p" x="12" y="120" />
|
||||
<use href="#p" x="0" y="132" />
|
||||
<use href="#p" x="12" y="132" />
|
||||
|
||||
<!-- 右竖线（占2列） -->
|
||||
<use href="#p" x="84" y="0" />
|
||||
<use href="#p" x="96" y="0" />
|
||||
<use href="#p" x="84" y="12" />
|
||||
<use href="#p" x="96" y="12" />
|
||||
<use href="#p" x="84" y="24" />
|
||||
<use href="#p" x="96" y="24" />
|
||||
<use href="#p" x="84" y="36" />
|
||||
<use href="#p" x="96" y="36" />
|
||||
<use href="#p" x="84" y="48" />
|
||||
<use href="#p" x="96" y="48" />
|
||||
<use href="#p" x="84" y="60" />
|
||||
<use href="#p" x="96" y="60" />
|
||||
<use href="#p" x="84" y="72" />
|
||||
<use href="#p" x="96" y="72" />
|
||||
<use href="#p" x="14" y="84" />
|
||||
<use href="#p" x="0" y="98" />
|
||||
<use href="#p" x="14" y="98" />
|
||||
<use href="#p" x="0" y="112" />
|
||||
<use href="#p" x="14" y="112" />
|
||||
<use href="#p" x="0" y="126" />
|
||||
<use href="#p" x="14" y="126" />
|
||||
<use href="#p" x="0" y="140" />
|
||||
<use href="#p" x="14" y="140" />
|
||||
<use href="#p" x="0" y="154" />
|
||||
<use href="#p" x="14" y="154" />
|
||||
<use href="#p" x="0" y="168" />
|
||||
<use href="#p" x="14" y="168" />
|
||||
<use href="#p" x="98" y="0" />
|
||||
<use href="#p" x="112" y="0" />
|
||||
<use href="#p" x="98" y="14" />
|
||||
<use href="#p" x="112" y="14" />
|
||||
<use href="#p" x="98" y="28" />
|
||||
<use href="#p" x="112" y="28" />
|
||||
<use href="#p" x="98" y="42" />
|
||||
<use href="#p" x="112" y="42" />
|
||||
<use href="#p" x="98" y="56" />
|
||||
<use href="#p" x="112" y="56" />
|
||||
<use href="#p" x="98" y="70" />
|
||||
<use href="#p" x="112" y="70" />
|
||||
<use href="#p" x="98" y="84" />
|
||||
<use href="#p" x="112" y="84" />
|
||||
<use href="#p" x="98" y="98" />
|
||||
<use href="#p" x="112" y="98" />
|
||||
<use href="#p" x="98" y="112" />
|
||||
<use href="#p" x="112" y="112" />
|
||||
<use href="#p" x="98" y="126" />
|
||||
<use href="#p" x="112" y="126" />
|
||||
<use href="#p" x="98" y="140" />
|
||||
<use href="#p" x="112" y="140" />
|
||||
<use href="#p" x="98" y="154" />
|
||||
<use href="#p" x="112" y="154" />
|
||||
<use href="#p" x="98" y="168" />
|
||||
<use href="#p" x="112" y="168" />
|
||||
<use href="#p" x="28" y="70" />
|
||||
<use href="#p" x="56" y="70" />
|
||||
<use href="#p" x="84" y="70" />
|
||||
<use href="#p" x="28" y="84" />
|
||||
<use href="#p" x="56" y="84" />
|
||||
<use href="#p" x="84" y="84" />
|
||||
<use href="#p" x="96" y="84" />
|
||||
<use href="#p" x="84" y="96" />
|
||||
<use href="#p" x="96" y="96" />
|
||||
<use href="#p" x="84" y="108" />
|
||||
<use href="#p" x="96" y="108" />
|
||||
<use href="#p" x="84" y="120" />
|
||||
<use href="#p" x="96" y="120" />
|
||||
<use href="#p" x="84" y="132" />
|
||||
<use href="#p" x="96" y="132" />
|
||||
|
||||
<!-- 中间 V 形（从 y=60 开始） -->
|
||||
<use href="#p" x="24" y="60" />
|
||||
<use href="#p" x="48" y="60" />
|
||||
<use href="#p" x="72" y="60" />
|
||||
<use href="#p" x="24" y="72" />
|
||||
<use href="#p" x="48" y="72" />
|
||||
<use href="#p" x="72" y="72" />
|
||||
<use href="#p" x="24" y="84" />
|
||||
<use href="#p" x="48" y="84" />
|
||||
<use href="#p" x="72" y="84" />
|
||||
<use href="#p" x="24" y="96" />
|
||||
<use href="#p" x="48" y="96" />
|
||||
<use href="#p" x="72" y="96" />
|
||||
<!-- 底部汇合 -->
|
||||
<use href="#p" x="36" y="108" />
|
||||
<use href="#p" x="60" y="108" />
|
||||
<use href="#p" x="36" y="120" />
|
||||
<use href="#p" x="60" y="120" />
|
||||
<use href="#p" x="36" y="132" />
|
||||
<use href="#p" x="60" y="132" />
|
||||
<use href="#p" x="48" y="132" />
|
||||
<use href="#p" x="28" y="98" />
|
||||
<use href="#p" x="56" y="98" />
|
||||
<use href="#p" x="84" y="98" />
|
||||
<use href="#p" x="28" y="112" />
|
||||
<use href="#p" x="56" y="112" />
|
||||
<use href="#p" x="84" y="112" />
|
||||
<use href="#p" x="42" y="126" />
|
||||
<use href="#p" x="70" y="126" />
|
||||
<use href="#p" x="42" y="140" />
|
||||
<use href="#p" x="70" y="140" />
|
||||
<use href="#p" x="42" y="154" />
|
||||
<use href="#p" x="70" y="154" />
|
||||
<use href="#p" x="56" y="154" />
|
||||
<use href="#p" x="56" y="168" />
|
||||
</g>
|
||||
|
||||
<!-- ===== U（高度与 W 一致，内部空间增大） ===== -->
|
||||
<g transform="translate(124, 0)">
|
||||
<!-- 左竖线（占2列） -->
|
||||
<!-- U -->
|
||||
<g transform="translate(144, 0)">
|
||||
<use href="#p" x="0" y="0" />
|
||||
<use href="#p" x="12" y="0" />
|
||||
<use href="#p" x="0" y="12" />
|
||||
<use href="#p" x="12" y="12" />
|
||||
<use href="#p" x="0" y="24" />
|
||||
<use href="#p" x="12" y="24" />
|
||||
<use href="#p" x="0" y="36" />
|
||||
<use href="#p" x="12" y="36" />
|
||||
<use href="#p" x="0" y="48" />
|
||||
<use href="#p" x="12" y="48" />
|
||||
<use href="#p" x="0" y="60" />
|
||||
<use href="#p" x="12" y="60" />
|
||||
<use href="#p" x="0" y="72" />
|
||||
<use href="#p" x="12" y="72" />
|
||||
<use href="#p" x="14" y="0" />
|
||||
<use href="#p" x="0" y="14" />
|
||||
<use href="#p" x="14" y="14" />
|
||||
<use href="#p" x="0" y="28" />
|
||||
<use href="#p" x="14" y="28" />
|
||||
<use href="#p" x="0" y="42" />
|
||||
<use href="#p" x="14" y="42" />
|
||||
<use href="#p" x="0" y="56" />
|
||||
<use href="#p" x="14" y="56" />
|
||||
<use href="#p" x="0" y="70" />
|
||||
<use href="#p" x="14" y="70" />
|
||||
<use href="#p" x="0" y="84" />
|
||||
<use href="#p" x="12" y="84" />
|
||||
<use href="#p" x="0" y="96" />
|
||||
<use href="#p" x="12" y="96" />
|
||||
<use href="#p" x="0" y="108" />
|
||||
<use href="#p" x="12" y="108" />
|
||||
<use href="#p" x="0" y="120" />
|
||||
<use href="#p" x="12" y="120" />
|
||||
<use href="#p" x="0" y="132" />
|
||||
<use href="#p" x="12" y="132" />
|
||||
<use href="#p" x="14" y="84" />
|
||||
<use href="#p" x="0" y="98" />
|
||||
<use href="#p" x="14" y="98" />
|
||||
<use href="#p" x="0" y="112" />
|
||||
<use href="#p" x="14" y="112" />
|
||||
<use href="#p" x="0" y="126" />
|
||||
<use href="#p" x="14" y="126" />
|
||||
<use href="#p" x="0" y="140" />
|
||||
<use href="#p" x="14" y="140" />
|
||||
<use href="#p" x="0" y="154" />
|
||||
<use href="#p" x="14" y="154" />
|
||||
<use href="#p" x="0" y="168" />
|
||||
<use href="#p" x="14" y="168" />
|
||||
<use href="#p" x="98" y="0" />
|
||||
<use href="#p" x="112" y="0" />
|
||||
<use href="#p" x="98" y="14" />
|
||||
<use href="#p" x="112" y="14" />
|
||||
<use href="#p" x="98" y="28" />
|
||||
<use href="#p" x="112" y="28" />
|
||||
<use href="#p" x="98" y="42" />
|
||||
<use href="#p" x="112" y="42" />
|
||||
<use href="#p" x="98" y="56" />
|
||||
<use href="#p" x="112" y="56" />
|
||||
<use href="#p" x="98" y="70" />
|
||||
<use href="#p" x="112" y="70" />
|
||||
<use href="#p" x="98" y="84" />
|
||||
<use href="#p" x="112" y="84" />
|
||||
<use href="#p" x="98" y="98" />
|
||||
<use href="#p" x="112" y="98" />
|
||||
<use href="#p" x="98" y="112" />
|
||||
<use href="#p" x="112" y="112" />
|
||||
<use href="#p" x="98" y="126" />
|
||||
<use href="#p" x="112" y="126" />
|
||||
<use href="#p" x="98" y="140" />
|
||||
<use href="#p" x="112" y="140" />
|
||||
<use href="#p" x="98" y="154" />
|
||||
<use href="#p" x="112" y="154" />
|
||||
<use href="#p" x="98" y="168" />
|
||||
<use href="#p" x="112" y="168" />
|
||||
<use href="#p" x="0" y="168" />
|
||||
<use href="#p" x="14" y="168" />
|
||||
<use href="#p" x="28" y="168" />
|
||||
<use href="#p" x="42" y="168" />
|
||||
<use href="#p" x="56" y="168" />
|
||||
<use href="#p" x="70" y="168" />
|
||||
<use href="#p" x="84" y="168" />
|
||||
<use href="#p" x="98" y="168" />
|
||||
<use href="#p" x="112" y="168" />
|
||||
|
||||
<!-- 右竖线（占2列） -->
|
||||
<use href="#p" x="84" y="0" />
|
||||
<use href="#p" x="96" y="0" />
|
||||
<use href="#p" x="84" y="12" />
|
||||
<use href="#p" x="96" y="12" />
|
||||
<use href="#p" x="84" y="24" />
|
||||
<use href="#p" x="96" y="24" />
|
||||
<use href="#p" x="84" y="36" />
|
||||
<use href="#p" x="96" y="36" />
|
||||
<use href="#p" x="84" y="48" />
|
||||
<use href="#p" x="96" y="48" />
|
||||
<use href="#p" x="84" y="60" />
|
||||
<use href="#p" x="96" y="60" />
|
||||
<use href="#p" x="84" y="72" />
|
||||
<use href="#p" x="96" y="72" />
|
||||
<use href="#p" x="84" y="84" />
|
||||
<use href="#p" x="96" y="84" />
|
||||
<use href="#p" x="84" y="96" />
|
||||
<use href="#p" x="96" y="96" />
|
||||
<use href="#p" x="84" y="108" />
|
||||
<use href="#p" x="96" y="108" />
|
||||
<use href="#p" x="84" y="120" />
|
||||
<use href="#p" x="96" y="120" />
|
||||
<use href="#p" x="84" y="132" />
|
||||
<use href="#p" x="96" y="132" />
|
||||
<!-- ===== frpc（修正版：f 有完整竖线） ===== -->
|
||||
<g transform="translate(49, 20)">
|
||||
<!--
|
||||
每个字母高度约 28px（4行×7px）
|
||||
间距：字母之间空 14px（2行×7px）
|
||||
f: y=0-27（竖线4行）
|
||||
r: y=41-62
|
||||
p: y=76-97
|
||||
c: y=111-132
|
||||
-->
|
||||
|
||||
<!-- 底部横线 -->
|
||||
<use href="#p" x="0" y="132" />
|
||||
<use href="#p" x="12" y="132" />
|
||||
<use href="#p" x="24" y="132" />
|
||||
<use href="#p" x="36" y="132" />
|
||||
<use href="#p" x="48" y="132" />
|
||||
<use href="#p" x="60" y="132" />
|
||||
<use href="#p" x="72" y="132" />
|
||||
<use href="#p" x="84" y="132" />
|
||||
<use href="#p" x="96" y="132" />
|
||||
|
||||
<!-- ===== U 内部：竖向排列的 frpc（蓝色，5×5 像素） ===== -->
|
||||
<g transform="translate(32, 18)">
|
||||
<!-- f -->
|
||||
<!-- ===== f：竖线（完整4行）+ 顶横 + 中横 ===== -->
|
||||
<!-- 竖线（左侧，从顶到底连续4行） -->
|
||||
<use href="#q" x="0" y="0" />
|
||||
<use href="#q" x="0" y="6" />
|
||||
<use href="#q" x="0" y="12" />
|
||||
<use href="#q" x="0" y="18" />
|
||||
<use href="#q" x="6" y="0" />
|
||||
<use href="#q" x="12" y="0" />
|
||||
<use href="#q" x="18" y="0" />
|
||||
<use href="#q" x="6" y="12" />
|
||||
<use href="#q" x="12" y="12" />
|
||||
<use href="#q" x="0" y="7" />
|
||||
<use href="#q" x="0" y="14" />
|
||||
<use href="#q" x="0" y="21" />
|
||||
<!-- 顶横（向右延伸） -->
|
||||
<use href="#q" x="7" y="0" />
|
||||
<use href="#q" x="14" y="0" />
|
||||
<!-- 中横（向右延伸） -->
|
||||
<use href="#q" x="7" y="14" />
|
||||
<use href="#q" x="14" y="14" />
|
||||
|
||||
<!-- r -->
|
||||
<use href="#q" x="0" y="28" />
|
||||
<use href="#q" x="0" y="34" />
|
||||
<use href="#q" x="0" y="40" />
|
||||
<use href="#q" x="0" y="46" />
|
||||
<use href="#q" x="6" y="28" />
|
||||
<use href="#q" x="12" y="28" />
|
||||
<use href="#q" x="18" y="28" />
|
||||
<use href="#q" x="6" y="40" />
|
||||
<use href="#q" x="12" y="40" />
|
||||
<!-- ===== r：竖线 + 顶横（一竖一横） ===== -->
|
||||
<!-- 竖线（左侧，3行） -->
|
||||
<use href="#q" x="0" y="41" />
|
||||
<use href="#q" x="0" y="48" />
|
||||
<use href="#q" x="0" y="55" />
|
||||
<!-- 顶横（向右延伸） -->
|
||||
<use href="#q" x="7" y="41" />
|
||||
<use href="#q" x="14" y="41" />
|
||||
|
||||
<!-- p -->
|
||||
<use href="#q" x="0" y="56" />
|
||||
<use href="#q" x="0" y="62" />
|
||||
<use href="#q" x="0" y="68" />
|
||||
<use href="#q" x="0" y="74" />
|
||||
<use href="#q" x="0" y="80" />
|
||||
<use href="#q" x="6" y="56" />
|
||||
<use href="#q" x="12" y="56" />
|
||||
<use href="#q" x="18" y="56" />
|
||||
<use href="#q" x="18" y="62" />
|
||||
<use href="#q" x="18" y="68" />
|
||||
<use href="#q" x="6" y="74" />
|
||||
<use href="#q" x="12" y="74" />
|
||||
<use href="#q" x="18" y="74" />
|
||||
<!-- ===== p：竖线（向下伸出）+ 右侧圆圈 ===== -->
|
||||
<!-- 竖线（左侧，向下伸出5行） -->
|
||||
<use href="#q" x="0" y="76" />
|
||||
<use href="#q" x="0" y="83" />
|
||||
<use href="#q" x="0" y="90" />
|
||||
<use href="#q" x="0" y="97" />
|
||||
<!-- 圆圈（右侧3×3闭合） -->
|
||||
<use href="#q" x="7" y="76" />
|
||||
<use href="#q" x="14" y="76" />
|
||||
<use href="#q" x="14" y="83" />
|
||||
<use href="#q" x="14" y="90" />
|
||||
<use href="#q" x="7" y="90" />
|
||||
<use href="#q" x="14" y="90" />
|
||||
|
||||
<!-- c -->
|
||||
<use href="#q" x="6" y="90" />
|
||||
<use href="#q" x="12" y="90" />
|
||||
<use href="#q" x="18" y="90" />
|
||||
<use href="#q" x="0" y="96" />
|
||||
<use href="#q" x="0" y="102" />
|
||||
<use href="#q" x="6" y="108" />
|
||||
<use href="#q" x="12" y="108" />
|
||||
<use href="#q" x="18" y="108" />
|
||||
<!-- ===== c：开口朝右的弧形（左侧半圆） ===== -->
|
||||
<!-- 左竖 -->
|
||||
<use href="#q" x="0" y="111" />
|
||||
<use href="#q" x="0" y="118" />
|
||||
<use href="#q" x="0" y="125" />
|
||||
<!-- 上弧 -->
|
||||
<use href="#q" x="7" y="111" />
|
||||
<use href="#q" x="14" y="111" />
|
||||
<!-- 下弧 -->
|
||||
<use href="#q" x="7" y="125" />
|
||||
<use href="#q" x="14" y="125" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ===== I（中间竖线 2 列宽，高度一致） ===== -->
|
||||
<g transform="translate(248, 0)">
|
||||
<!-- 顶部横线（占6列） -->
|
||||
<!-- I -->
|
||||
<g transform="translate(288, 0)">
|
||||
<use href="#p" x="0" y="0" />
|
||||
<use href="#p" x="12" y="0" />
|
||||
<use href="#p" x="24" y="0" />
|
||||
<use href="#p" x="36" y="0" />
|
||||
<use href="#p" x="48" y="0" />
|
||||
<use href="#p" x="60" y="0" />
|
||||
|
||||
<!-- 中间竖线（2 列宽） -->
|
||||
<use href="#p" x="24" y="12" />
|
||||
<use href="#p" x="36" y="12" />
|
||||
<use href="#p" x="24" y="24" />
|
||||
<use href="#p" x="36" y="24" />
|
||||
<use href="#p" x="24" y="36" />
|
||||
<use href="#p" x="36" y="36" />
|
||||
<use href="#p" x="24" y="48" />
|
||||
<use href="#p" x="36" y="48" />
|
||||
<use href="#p" x="24" y="60" />
|
||||
<use href="#p" x="36" y="60" />
|
||||
<use href="#p" x="24" y="72" />
|
||||
<use href="#p" x="36" y="72" />
|
||||
<use href="#p" x="24" y="84" />
|
||||
<use href="#p" x="36" y="84" />
|
||||
<use href="#p" x="24" y="96" />
|
||||
<use href="#p" x="36" y="96" />
|
||||
<use href="#p" x="24" y="108" />
|
||||
<use href="#p" x="36" y="108" />
|
||||
<use href="#p" x="24" y="120" />
|
||||
<use href="#p" x="36" y="120" />
|
||||
|
||||
<!-- 底部横线（占6列） -->
|
||||
<use href="#p" x="0" y="132" />
|
||||
<use href="#p" x="12" y="132" />
|
||||
<use href="#p" x="24" y="132" />
|
||||
<use href="#p" x="36" y="132" />
|
||||
<use href="#p" x="48" y="132" />
|
||||
<use href="#p" x="60" y="132" />
|
||||
<use href="#p" x="14" y="0" />
|
||||
<use href="#p" x="28" y="0" />
|
||||
<use href="#p" x="42" y="0" />
|
||||
<use href="#p" x="56" y="0" />
|
||||
<use href="#p" x="70" y="0" />
|
||||
<use href="#p" x="28" y="14" />
|
||||
<use href="#p" x="42" y="14" />
|
||||
<use href="#p" x="28" y="28" />
|
||||
<use href="#p" x="42" y="28" />
|
||||
<use href="#p" x="28" y="42" />
|
||||
<use href="#p" x="42" y="42" />
|
||||
<use href="#p" x="28" y="56" />
|
||||
<use href="#p" x="42" y="56" />
|
||||
<use href="#p" x="28" y="70" />
|
||||
<use href="#p" x="42" y="70" />
|
||||
<use href="#p" x="28" y="84" />
|
||||
<use href="#p" x="42" y="84" />
|
||||
<use href="#p" x="28" y="98" />
|
||||
<use href="#p" x="42" y="98" />
|
||||
<use href="#p" x="28" y="112" />
|
||||
<use href="#p" x="42" y="112" />
|
||||
<use href="#p" x="28" y="126" />
|
||||
<use href="#p" x="42" y="126" />
|
||||
<use href="#p" x="28" y="140" />
|
||||
<use href="#p" x="42" y="140" />
|
||||
<use href="#p" x="28" y="154" />
|
||||
<use href="#p" x="42" y="154" />
|
||||
<use href="#p" x="0" y="168" />
|
||||
<use href="#p" x="14" y="168" />
|
||||
<use href="#p" x="28" y="168" />
|
||||
<use href="#p" x="42" y="168" />
|
||||
<use href="#p" x="56" y="168" />
|
||||
<use href="#p" x="70" y="168" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- ========== 外围装饰元素（像素风，增加层次） ========== -->
|
||||
<!-- 左上角小十字星 -->
|
||||
<!-- ========== 外围装饰 ========== -->
|
||||
<g transform="translate(40, 40)">
|
||||
<use href="#s" x="0" y="0" />
|
||||
<use href="#s" x="0" y="12" />
|
||||
@ -259,11 +259,8 @@
|
||||
<use href="#s" x="12" y="0" />
|
||||
<use href="#s" x="12" y="12" />
|
||||
</g>
|
||||
<!-- 右上角小方块 -->
|
||||
<use href="#d" x="440" y="40" />
|
||||
<!-- 左下角小方块 -->
|
||||
<use href="#d" x="40" y="440" />
|
||||
<!-- 右下角小十字星 -->
|
||||
<g transform="translate(436, 436)">
|
||||
<use href="#s" x="0" y="0" />
|
||||
<use href="#s" x="0" y="12" />
|
||||
@ -272,12 +269,13 @@
|
||||
<use href="#s" x="12" y="12" />
|
||||
</g>
|
||||
|
||||
<!-- 三个随机黑色装饰点（更大一点，12×12） -->
|
||||
<rect x="90" y="380" width="12" height="12" fill="#000000" />
|
||||
<rect x="420" y="140" width="12" height="12" fill="#000000" />
|
||||
<rect x="240" y="60" width="12" height="12" fill="#000000" />
|
||||
<!-- 黑色装饰点 -->
|
||||
<rect x="90" y="380" width="14" height="14" fill="#000000" />
|
||||
<rect x="420" y="140" width="14" height="14" fill="#000000" />
|
||||
<rect x="230" y="50" width="14" height="14" fill="#000000" />
|
||||
|
||||
<!-- 额外小点缀：蓝色小点，呼应 frpc 颜色 -->
|
||||
<rect x="180" y="400" width="6" height="6" fill="#2563eb" />
|
||||
<rect x="370" y="80" width="6" height="6" fill="#2563eb" />
|
||||
<!-- 蓝色小点缀 -->
|
||||
<rect x="180" y="400" width="8" height="8" fill="#2563eb" />
|
||||
<rect x="370" y="80" width="8" height="8" fill="#2563eb" />
|
||||
<rect x="50" y="250" width="8" height="8" fill="#2563eb" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
101
web/src/App.vue
101
web/src/App.vue
@ -10,7 +10,8 @@
|
||||
<i class="blob b1"></i><i class="blob b2"></i><i class="blob b3"></i>
|
||||
</div>
|
||||
|
||||
<div class="app-shell">
|
||||
<LoginView v-if="authReady && !isAuthed" />
|
||||
<div v-else-if="authReady" class="app-shell">
|
||||
<aside class="sidebar">
|
||||
<div class="sb-brand">
|
||||
<img class="sb-logo" src="/favicon.svg" alt="webui4frpc" />
|
||||
@ -37,11 +38,11 @@
|
||||
<div class="sb-identity" v-if="authReady">
|
||||
<span class="id-name">{{ authName || '匿名' }}</span>
|
||||
<span class="id-level" :class="authLevel">{{ levelLabel }}</span>
|
||||
<button class="sb-logout" title="退出登录" @click="onLogout">退出</button>
|
||||
</div>
|
||||
<div class="sb-theme" role="group" aria-label="主题">
|
||||
<button class="sw white" :class="{ on: theme === 'white' }" title="白色" @click="setTheme('white')" />
|
||||
<button class="sw blue" :class="{ on: theme === 'blue' }" title="蓝色" @click="setTheme('blue')" />
|
||||
<button class="sw pink" :class="{ on: theme === 'pink' }" title="粉色" @click="setTheme('pink')" />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@ -59,31 +60,45 @@
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="boot">加载中…</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import CanvasView from './views/CanvasView.vue'
|
||||
import SettingsView from './views/SettingsView.vue'
|
||||
import StatusView from './views/StatusView.vue'
|
||||
import ClusterView from './views/ClusterView.vue'
|
||||
import UsersView from './views/UsersView.vue'
|
||||
import { authLevel, authName, authReady, fetchMe, isAdmin } from './auth'
|
||||
import LoginView from './views/LoginView.vue'
|
||||
import { authLevel, authName, authReady, canWrite, fetchMe, isAuthed, isSuperAdmin, logout } from './auth'
|
||||
|
||||
type ViewKey = 'canvas' | 'settings' | 'status' | 'cluster' | 'users'
|
||||
const view = ref<ViewKey>('status')
|
||||
|
||||
onMounted(() => { fetchMe() })
|
||||
|
||||
const levelLabel = computed(() =>
|
||||
authLevel.value === 'admin' ? '管理员' : authLevel.value === 'write' ? '写' : '只读',
|
||||
)
|
||||
// logout clears the session cookie and drops back to the login page.
|
||||
async function onLogout() {
|
||||
await logout()
|
||||
view.value = 'status'
|
||||
}
|
||||
|
||||
// ---- theme switcher (white default / blue / pink) ----
|
||||
const levelLabel = computed(() => {
|
||||
switch (authLevel.value) {
|
||||
case 'superadmin': return '超级管理员'
|
||||
case 'admin': return '管理员'
|
||||
case 'write': return '写'
|
||||
default: return '只读'
|
||||
}
|
||||
})
|
||||
|
||||
// ---- theme switcher (white default / blue) ----
|
||||
// The data-theme attribute is applied pre-mount by main.ts (no flash); here we
|
||||
// only mirror it so the active swatch highlights, and update it on click.
|
||||
type Theme = 'white' | 'blue' | 'pink'
|
||||
const VALID_THEMES: Theme[] = ['white', 'blue', 'pink']
|
||||
type Theme = 'white' | 'blue'
|
||||
const VALID_THEMES: Theme[] = ['white', 'blue']
|
||||
const theme = ref<Theme>(
|
||||
(VALID_THEMES as string[]).includes(document.documentElement.getAttribute('data-theme') || '')
|
||||
? (document.documentElement.getAttribute('data-theme') as Theme)
|
||||
@ -95,20 +110,32 @@ const setTheme = (t: Theme) => {
|
||||
localStorage.setItem('w4f-theme', t)
|
||||
}
|
||||
|
||||
const allNav: { key: ViewKey; label: string; icon: string; adminOnly?: boolean }[] = [
|
||||
const allNav: { key: ViewKey; label: string; icon: string; writeOnly?: boolean; superAdminOnly?: boolean }[] = [
|
||||
{ key: 'status', label: '状态', icon: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>' },
|
||||
{ key: 'canvas', label: '连接配置', icon: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="12" cy="18" r="3"/><path d="M8.5 7.5 16 16M15.5 7.5 8 16"/></svg>' },
|
||||
{ key: 'settings', label: '设置', icon: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>' },
|
||||
{ key: 'canvas', label: '连接配置', writeOnly: true, icon: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="12" cy="18" r="3"/><path d="M8.5 7.5 16 16M15.5 7.5 8 16"/></svg>' },
|
||||
{ key: 'settings', label: '设置', writeOnly: true, icon: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>' },
|
||||
{ key: 'cluster', label: '集群', icon: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M12 7v4m0 0-5 6m5-6 5 6"/></svg>' },
|
||||
{ key: 'users', label: '账号与密钥', adminOnly: true, icon: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>' },
|
||||
{ key: 'users', label: '账号与密钥', superAdminOnly: true, icon: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>' },
|
||||
]
|
||||
|
||||
// nav filters admin-only entries (账号与密钥) until /me resolves to admin.
|
||||
// Until authReady, the users entry is hidden so a viewer never sees it flash.
|
||||
// nav is filtered by role:
|
||||
// - canvas/settings need write (viewers/auditors never see them),
|
||||
// - users needs superadmin (ordinary admins cannot manage accounts),
|
||||
// - status + cluster are visible to everyone (auditors view + export logs).
|
||||
const nav = computed(() =>
|
||||
allNav.filter((n) => !n.adminOnly || (authReady.value && isAdmin.value)),
|
||||
allNav.filter((n) => {
|
||||
if (n.superAdminOnly) return authReady.value && isSuperAdmin.value
|
||||
if (n.writeOnly) return canWrite.value
|
||||
return true
|
||||
}),
|
||||
)
|
||||
|
||||
// When the account level drops a page (e.g. a viewer logs in while the canvas
|
||||
// was open), fall back to the first visible page so we never render a hidden one.
|
||||
watch(nav, (items) => {
|
||||
if (!items.some((n) => n.key === view.value)) view.value = 'status'
|
||||
})
|
||||
|
||||
const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?.label ?? '')
|
||||
</script>
|
||||
|
||||
@ -221,8 +248,8 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
|
||||
.sb-identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
justify-content: flex-start;
|
||||
gap: 6px;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
@ -231,6 +258,7 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.sb-identity .id-name {
|
||||
margin-right: auto;
|
||||
font-weight: 600;
|
||||
color: var(--w4f-fg);
|
||||
overflow: hidden;
|
||||
@ -250,6 +278,10 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--w4f-primary), var(--w4f-secondary));
|
||||
}
|
||||
.sb-identity .id-level.superadmin {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--w4f-secondary), var(--w4f-primary));
|
||||
}
|
||||
.sb-identity .id-level.write {
|
||||
color: var(--w4f-warning);
|
||||
background: var(--w4f-warning-50);
|
||||
@ -257,6 +289,36 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
|
||||
.sb-identity .id-level.read {
|
||||
color: var(--w4f-muted);
|
||||
}
|
||||
.sb-logout {
|
||||
flex: 0 0 auto;
|
||||
padding: 3px 9px;
|
||||
border-radius: 7px;
|
||||
border: 1px solid var(--w4f-line-strong);
|
||||
background: transparent;
|
||||
color: var(--w4f-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s var(--w4f-ease), border-color 0.15s var(--w4f-ease),
|
||||
background 0.15s var(--w4f-ease);
|
||||
}
|
||||
.sb-logout:hover {
|
||||
color: var(--w4f-danger);
|
||||
border-color: var(--w4f-danger);
|
||||
background: var(--w4f-danger-50);
|
||||
}
|
||||
|
||||
/* ---------- boot splash (shown while /me resolves) ---------- */
|
||||
.boot {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--w4f-muted);
|
||||
font-family: var(--w4f-font);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ---------- theme switcher ---------- */
|
||||
.sb-theme { display: flex; gap: 6px; margin-bottom: 12px; }
|
||||
@ -270,7 +332,6 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
|
||||
/* swatch fills are FIXED (represent each theme's identity), not theme-driven */
|
||||
.sb-theme .sw.white { background: linear-gradient(135deg, #ffffff, #cdd4e0); }
|
||||
.sb-theme .sw.blue { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
|
||||
.sb-theme .sw.pink { background: linear-gradient(135deg, #ff7fac, #f33b7c); }
|
||||
|
||||
/* ---------- main ---------- */
|
||||
.main {
|
||||
|
||||
@ -25,10 +25,16 @@ class HTTPError extends Error {
|
||||
}
|
||||
}
|
||||
|
||||
// X-W4F-UI marks every SPA request. The server treats these as session-cookie
|
||||
// only and ignores Basic/Bearer headers — including any Basic credentials the
|
||||
// browser cached before sessions existed — so logout actually sticks.
|
||||
const UI_HEADER = { "X-W4F-UI": "1" } as const;
|
||||
|
||||
async function request<T>(url: string, options: RequestInit = {}): Promise<T> {
|
||||
const response = await fetch(url, {
|
||||
credentials: "same-origin",
|
||||
...options,
|
||||
headers: { ...UI_HEADER, ...(options.headers as Record<string, string> | undefined) },
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new HTTPError(response.status, `HTTP ${response.status}`);
|
||||
@ -167,14 +173,24 @@ export const api = {
|
||||
|
||||
// M7 auth/accounts/API keys/canvas export-import/worker logs.
|
||||
me: () => request<MeResp>("/api/manager/me"),
|
||||
// UI session login/logout. login() sets an HttpOnly session cookie (Set-Cookie
|
||||
// on the 200 response) so the SPA stops using Basic Auth; logout clears it.
|
||||
login: (username: string, password: string) =>
|
||||
request<MeResp>("/api/manager/login", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username, password }),
|
||||
}),
|
||||
logout: () =>
|
||||
request<{ ok: boolean }>("/api/manager/logout", { method: "POST" }),
|
||||
listUsers: () => request<{ users: User[] }>("/api/manager/users"),
|
||||
createUser: (username: string, password: string, role: 'admin' | 'viewer') =>
|
||||
createUser: (username: string, password: string, role: 'admin' | 'viewer' | 'superadmin') =>
|
||||
request<User>("/api/manager/users", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username, password, role }),
|
||||
}),
|
||||
updateUser: (name: string, patch: { password?: string; role?: 'admin' | 'viewer'; enabled?: boolean }) =>
|
||||
updateUser: (name: string, patch: { password?: string; role?: 'admin' | 'viewer' | 'superadmin'; enabled?: boolean }) =>
|
||||
request<User>(`/api/manager/users/${encodeURIComponent(name)}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
// Lightweight reactive auth principal for the SPA. The browser handles Basic
|
||||
// Auth (prompted once when the SPA shell loads behind auth("read")); this just
|
||||
// mirrors the resolved identity from GET /me so views can gate their UI.
|
||||
// Lightweight reactive auth principal for the SPA. Since the switch to
|
||||
// session-cookie login (POST /api/manager/login), the SPA no longer relies on
|
||||
// the browser's Basic Auth: on mount we resolve GET /me — a session cookie
|
||||
// makes it 200 (signed in); otherwise it is 401 and the login page shows.
|
||||
// logout() clears the cookie server-side, so sign-out actually sticks.
|
||||
//
|
||||
// We default to read until /me resolves so a viewer never sees a flash of
|
||||
// admin controls. canWrite/isAdmin are memoized over the reactive level.
|
||||
@ -11,11 +13,37 @@ import { api } from './api'
|
||||
export const authLevel = ref<AccessLevel>('read')
|
||||
export const authName = ref('')
|
||||
export const authReady = ref(false)
|
||||
export const isAuthed = ref(false)
|
||||
|
||||
const RANK: Record<AccessLevel, number> = { read: 1, write: 2, admin: 3 }
|
||||
const RANK: Record<AccessLevel, number> = { read: 1, write: 2, admin: 3, superadmin: 4 }
|
||||
|
||||
export const canWrite = computed(() => RANK[authLevel.value] >= RANK.write)
|
||||
// admin: full write access but cannot manage accounts (that needs superadmin).
|
||||
export const isAdmin = computed(() => authLevel.value === 'admin')
|
||||
// superadmin: the only tier that can manage accounts (users/apikeys routes).
|
||||
export const isSuperAdmin = computed(() => authLevel.value === 'superadmin')
|
||||
|
||||
// login signs in via the session-cookie endpoint and mirrors the resolved
|
||||
// principal. Call from the login page; on success App.vue drops into the shell.
|
||||
export async function login(username: string, password: string): Promise<void> {
|
||||
const me = await api.login(username, password)
|
||||
authLevel.value = me.level
|
||||
authName.value = me.name
|
||||
isAuthed.value = true
|
||||
authReady.value = true
|
||||
}
|
||||
|
||||
// logout clears the UI session and returns to the login page.
|
||||
export async function logout(): Promise<void> {
|
||||
try {
|
||||
await api.logout()
|
||||
} catch {
|
||||
// session cookie may already be gone; still reset local state
|
||||
}
|
||||
authLevel.value = 'read'
|
||||
authName.value = ''
|
||||
isAuthed.value = false
|
||||
}
|
||||
|
||||
// fetchMe resolves the current principal. Called once on app mount; safe to
|
||||
// call again after account changes that could affect the live session.
|
||||
@ -24,10 +52,12 @@ export async function fetchMe(): Promise<void> {
|
||||
const me = await api.me()
|
||||
authLevel.value = me.level
|
||||
authName.value = me.name
|
||||
isAuthed.value = true
|
||||
} catch {
|
||||
// 401 (no/failed auth) — stay read-only; the browser will have prompted.
|
||||
// 401 (no/failed auth) — show the login page.
|
||||
authLevel.value = 'read'
|
||||
authName.value = ''
|
||||
isAuthed.value = false
|
||||
} finally {
|
||||
authReady.value = true
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<!-- source handle (right) connects to remote -->
|
||||
<Handle type="source" :position="Position.Right" />
|
||||
|
||||
<fieldset class="node-fields" :disabled="!canWrite">
|
||||
<div class="node-head">
|
||||
<span class="node-icon">⬢</span>
|
||||
<input v-model="nameField" class="name-input" />
|
||||
@ -29,14 +30,15 @@
|
||||
</label>
|
||||
<label class="adv-check">
|
||||
<input v-model="localOnlyField" type="checkbox" /> 仅本机转发
|
||||
<span class="hint">(勾选=直接在本机拉起，不进集群；不勾选=127.0.0.1 替换为本机实际地址交给集群)</span>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="adv">
|
||||
<button class="adv-toggle" @click.stop="showAdv = !showAdv">
|
||||
{{ showAdv ? '▾ 收起高级' : '▸ 高级' }}
|
||||
</button>
|
||||
<fieldset class="node-fields" :disabled="!canWrite">
|
||||
<div v-if="showAdv" class="adv-body">
|
||||
<label class="adv-check">
|
||||
<input v-model="useEncryptionField" type="checkbox" /> 加密
|
||||
@ -78,6 +80,7 @@
|
||||
<label>失败次数 <input v-model.number="healthCheckMaxFailedField" type="number" min="0" placeholder="默认1" /></label>
|
||||
<label>间隔(秒) <input v-model.number="healthCheckIntervalField" type="number" min="0" placeholder="默认10" /></label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -85,6 +88,7 @@
|
||||
<script setup lang="ts">
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
import { computed, ref } from 'vue'
|
||||
import { canWrite } from '../auth'
|
||||
import type { CanvasLocal } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
@ -194,6 +198,16 @@ const httpHeadersField = computed({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// Read-only wrapper: fieldset disabled kills every form control inside
|
||||
// (inputs/selects/checkboxes + the delete button) with one switch. The
|
||||
// advanced-panel toggle sits outside so viewers can still inspect settings.
|
||||
.node-fields {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.local-node {
|
||||
min-width: 240px;
|
||||
border-radius: 14px 14px 14px 4px;
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<div
|
||||
ref="labelEl"
|
||||
class="port-label"
|
||||
:class="{ dragging }"
|
||||
:class="{ dragging, readonly: !canWrite }"
|
||||
:style="labelStyle"
|
||||
@pointerdown.stop.prevent="onPointerDown"
|
||||
@pointermove="onPointerMove"
|
||||
@ -25,14 +25,14 @@
|
||||
class="port-toggle"
|
||||
:class="{ off: isDisabled }"
|
||||
@pointerdown.stop
|
||||
@click.stop="emit('toggle-disabled', { edgeId: props.id })"
|
||||
@click.stop="canWrite && emit('toggle-disabled', { edgeId: props.id })"
|
||||
>{{ isDisabled ? '禁' : '通' }}</span>
|
||||
<span class="port-num">{{ displayPort }}</span>
|
||||
<span
|
||||
v-if="groupName"
|
||||
class="port-group"
|
||||
@pointerdown.stop
|
||||
@click.stop="emit('edit-group', { edgeId: props.id })"
|
||||
@click.stop="canWrite && emit('edit-group', { edgeId: props.id })"
|
||||
>{{ groupName }}</span>
|
||||
</div>
|
||||
</EdgeLabelRenderer>
|
||||
@ -43,6 +43,7 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { EdgeLabelRenderer } from '@vue-flow/core'
|
||||
import type { EdgeProps } from '@vue-flow/core'
|
||||
import { canWrite } from '../auth'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<EdgeProps & { conflicted?: boolean }>(),
|
||||
@ -84,6 +85,8 @@ let dragging = false
|
||||
const onPointerDown = (e: PointerEvent) => {
|
||||
// Never let this press reach the Vue Flow pane (which would pan the canvas).
|
||||
e.stopPropagation()
|
||||
// Read-only accounts cannot drag/edit the label or the underlying link.
|
||||
if (!canWrite.value) return
|
||||
dragging = true
|
||||
moved = false
|
||||
startX = e.clientX
|
||||
@ -351,6 +354,10 @@ function midpointOf(path: string): { x: number; y: number } {
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
&.readonly {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.port-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<!-- target handle (left) receives connections from locals -->
|
||||
<Handle type="target" :position="Position.Left" />
|
||||
|
||||
<fieldset class="node-fields" :disabled="!canWrite">
|
||||
<div class="node-head">
|
||||
<span class="node-icon">⬤</span>
|
||||
<input v-model="nameField" class="name-input" />
|
||||
@ -25,11 +26,13 @@
|
||||
<label>令牌 <input v-model="tokenField" /></label>
|
||||
<label>URL <input v-model="urlField" /></label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="adv">
|
||||
<button class="adv-toggle" @click.stop="showAdv = !showAdv">
|
||||
{{ showAdv ? '▾ 收起高级' : '▸ 高级' }}
|
||||
</button>
|
||||
<fieldset class="node-fields" :disabled="!canWrite">
|
||||
<div v-if="showAdv" class="adv-body">
|
||||
<label
|
||||
>传输协议
|
||||
@ -57,6 +60,7 @@
|
||||
<label>用户 <input v-model="adminUserField" placeholder="admin" /></label>
|
||||
<label>密码 <input v-model="adminPasswordField" type="password" placeholder="可选" /></label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -64,6 +68,7 @@
|
||||
<script setup lang="ts">
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
import { computed, ref } from 'vue'
|
||||
import { canWrite } from '../auth'
|
||||
import type { CanvasRemote } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
@ -104,6 +109,16 @@ const showAdv = ref(false)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// Read-only wrapper: fieldset disabled kills every form control inside
|
||||
// (inputs/selects/checkboxes + the delete button) with one switch. The
|
||||
// advanced-panel toggle sits outside so viewers can still inspect settings.
|
||||
.node-fields {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.remote-node {
|
||||
min-width: 200px;
|
||||
border-radius: 14px 14px 4px 14px;
|
||||
@ -211,53 +226,78 @@ const showAdv = ref(false)
|
||||
flex: 0 0 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adv {
|
||||
// NOTE: .adv is a SIBLING of .fields (both children of .remote-node), not a
|
||||
// descendant — it MUST NOT be nested under .fields in SCSS or the selector
|
||||
// `.fields .adv .adv-body` never matches the DOM and the whole advanced body
|
||||
// renders unstyled. Mirrors the fixed LocalNode.vue.
|
||||
.adv {
|
||||
margin-top: 6px;
|
||||
|
||||
.adv-toggle {
|
||||
border: 1px dashed var(--w4f-warn-border);
|
||||
background: transparent;
|
||||
color: var(--w4f-warn-text);
|
||||
font-size: 11px;
|
||||
border-radius: 6px;
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.adv-body {
|
||||
// 2-column responsive grid: short fields share a row, section headers
|
||||
// (adv-sep) span the full width — same compact layout as LocalNode's
|
||||
// advanced section.
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
.adv-toggle {
|
||||
border: 1px dashed var(--w4f-warn-border);
|
||||
background: transparent;
|
||||
color: var(--w4f-warn-text);
|
||||
font-size: 11px;
|
||||
border-radius: 6px;
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.adv-body {
|
||||
padding: 8px;
|
||||
background: var(--w4f-warn-100);
|
||||
border-radius: 8px;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-top: 6px;
|
||||
padding: 6px;
|
||||
background: var(--w4f-warn-100);
|
||||
border-radius: 8px;
|
||||
gap: 2px;
|
||||
font-size: 11px;
|
||||
color: var(--w4f-warn-text);
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--w4f-warn-text);
|
||||
|
||||
input,
|
||||
select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--w4f-warn-border);
|
||||
border-radius: 6px;
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
background: var(--w4f-card-solid);
|
||||
color: var(--w4f-fg);
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--w4f-warning);
|
||||
}
|
||||
input,
|
||||
select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--w4f-warn-border);
|
||||
border-radius: 6px;
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
background: var(--w4f-card-solid);
|
||||
color: var(--w4f-fg);
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--w4f-warning);
|
||||
}
|
||||
}
|
||||
.adv-check {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
// checkbox labels keep the control inline with their text (single row)
|
||||
.adv-check {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
// section divider spans the full grid width
|
||||
.adv-sep {
|
||||
grid-column: 1 / -1;
|
||||
display: block;
|
||||
margin: 4px 0 2px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--w4f-warn-text);
|
||||
border-top: 1px dashed var(--w4f-warn-border);
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,13 +8,14 @@ import './styles/theme.css'
|
||||
import App from './App.vue'
|
||||
|
||||
// Apply the saved theme BEFORE mount so the first paint already uses the
|
||||
// correct palette (no white→pink/blue flash). :root is the white default, so
|
||||
// only blue/pink need an explicit data-theme attribute.
|
||||
// correct palette (no white→blue flash). :root is the white default, so only
|
||||
// blue needs an explicit data-theme attribute. A leftover 'pink' (or any other
|
||||
// value) from an older build falls back to the white default.
|
||||
(function applyThemeEarly() {
|
||||
try {
|
||||
const saved = localStorage.getItem('w4f-theme')
|
||||
if (saved === 'blue' || saved === 'pink') {
|
||||
document.documentElement.setAttribute('data-theme', saved)
|
||||
if (saved === 'blue') {
|
||||
document.documentElement.setAttribute('data-theme', 'blue')
|
||||
}
|
||||
} catch {
|
||||
/* localStorage unavailable (private mode) — stay on the white default */
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
/*
|
||||
* webui4frpc global theme — glassmorphism with a switchable accent.
|
||||
*
|
||||
* Three themes share the same surface treatment (translucent glass cards,
|
||||
* Two themes share the same surface treatment (translucent glass cards,
|
||||
* animated gradient-mesh background, KPI cards, gradient buttons, pill tags,
|
||||
* slim scrollbars); only the accent hue changes:
|
||||
* :root = white (neutral slate) — the DEFAULT
|
||||
* [data-theme="blue"] = blue / cyan
|
||||
* [data-theme="pink"] = sakura / frost (the original ModelRouter palette)
|
||||
* The active theme is applied by setting data-theme on <html> (see App.vue +
|
||||
* main.ts; persisted in localStorage). Element Plus variables are overridden
|
||||
* per theme so EP components inherit the active accent live.
|
||||
@ -183,71 +182,7 @@
|
||||
--el-color-info: #64748b;
|
||||
}
|
||||
|
||||
/* ---- pink theme (sakura × frost — the original ModelRouter palette) ---- */
|
||||
[data-theme='pink'] {
|
||||
--w4f-primary: #FF7FAC;
|
||||
--w4f-primary-h: #F33B7C;
|
||||
--w4f-primary-50: #FFF0F5;
|
||||
--w4f-primary-100: #FFE4E9;
|
||||
--w4f-primary-200: #FFCDD9;
|
||||
--w4f-primary-300: #FF9EB5;
|
||||
--w4f-secondary: #88C0D0;
|
||||
--w4f-secondary-h: #4C8DAE;
|
||||
--w4f-secondary-50: #F0F9FC;
|
||||
--w4f-secondary-200: #AEE1F2;
|
||||
--w4f-danger: #DB3694;
|
||||
--w4f-danger-50: #FEEAF6;
|
||||
--w4f-warning: #b7791f;
|
||||
--w4f-warning-50: #fdf3e3;
|
||||
--w4f-info: #3f6ef5;
|
||||
--w4f-ok: #17a964;
|
||||
|
||||
--w4f-bg-1: #eef2ff;
|
||||
--w4f-bg-2: #ffffff;
|
||||
--w4f-bg-3: #ffe9f0;
|
||||
--w4f-bg-soft: #f8f6fb;
|
||||
--w4f-bg-muted: #f4f1f7;
|
||||
--w4f-bg-hover: #f5eef3;
|
||||
--w4f-bg-active: #ffe4e9;
|
||||
--w4f-fg: #3b3350;
|
||||
--w4f-fg-2: #5a5470;
|
||||
--w4f-muted: #7c7a95;
|
||||
--w4f-faint: #9c98b0;
|
||||
--w4f-card: rgba(255, 255, 255, 0.60);
|
||||
--w4f-card-solid: #ffffff;
|
||||
--w4f-card-2: rgba(255, 255, 255, 0.42);
|
||||
--w4f-line: rgba(255, 127, 172, 0.18);
|
||||
--w4f-line-2: rgba(255, 127, 172, 0.12);
|
||||
--w4f-line-3: rgba(255, 127, 172, 0.06);
|
||||
--w4f-line-strong: rgba(120, 90, 150, 0.22);
|
||||
|
||||
--w4f-blob1: rgba(255, 127, 172, 0.45);
|
||||
--w4f-blob2: rgba(136, 192, 208, 0.42);
|
||||
--w4f-blob3: rgba(244, 114, 182, 0.30);
|
||||
|
||||
--w4f-sh-sm: 0 1px 2px rgba(70, 50, 110, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
--w4f-sh-md: 0 6px 20px rgba(120, 90, 160, 0.13);
|
||||
--w4f-sh-lg: 0 18px 46px rgba(120, 90, 160, 0.22);
|
||||
|
||||
--w4f-glow: rgba(255, 127, 172, 0.35);
|
||||
--w4f-danger-glow: rgba(219, 54, 148, 0.30);
|
||||
--w4f-glow-soft: rgba(255, 127, 172, 0.18);
|
||||
--w4f-thumb: rgba(255, 182, 193, 0.45);
|
||||
--w4f-thumb-hover: rgba(255, 127, 172, 0.7);
|
||||
--w4f-selection: #ffcdba;
|
||||
|
||||
--el-color-primary: #FF7FAC;
|
||||
--el-color-primary-light-3: #FF9EB5;
|
||||
--el-color-primary-light-5: #ffb3c4;
|
||||
--el-color-primary-light-7: #ffcdd9;
|
||||
--el-color-primary-light-8: #ffe4e9;
|
||||
--el-color-primary-light-9: #fff0f5;
|
||||
--el-color-primary-dark-2: #f33b7c;
|
||||
--el-color-success: #17a964;
|
||||
--el-color-warning: #b7791f;
|
||||
--el-color-danger: #db3694;
|
||||
--el-color-info: #7c7a95;
|
||||
}
|
||||
/* ---- blue theme (ocean × frost) ---- */
|
||||
|
||||
html,
|
||||
body,
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// These are thin passthroughs to the runtime CSS custom-property tokens
|
||||
// defined in theme.css (--w4f-*). They are auto-injected into every
|
||||
// <style lang="scss"> block via vite.config.ts additionalData, so every view
|
||||
// follows the active theme (white default / blue / pink) without per-view
|
||||
// follows the active theme (white default / blue) without per-view
|
||||
// rewrites. There is NO SCSS color math on these (no lighten/darken/mix), so
|
||||
// a var() reference is safe at compile time and resolves to the live theme
|
||||
// color in the browser.
|
||||
|
||||
@ -261,7 +261,7 @@ export interface RingSnapshot {
|
||||
|
||||
// ---- Auth / accounts / API keys (M7) ----
|
||||
|
||||
export type AccessLevel = 'read' | 'write' | 'admin';
|
||||
export type AccessLevel = 'read' | 'write' | 'admin' | 'superadmin';
|
||||
|
||||
// MeResp is the authenticated principal (GET /me). The frontend uses level to
|
||||
// gate the UI: viewer (= auditors) sees read + export controls only.
|
||||
@ -275,7 +275,7 @@ export interface MeResp {
|
||||
export interface User {
|
||||
id: number;
|
||||
username: string;
|
||||
role: 'admin' | 'viewer';
|
||||
role: 'admin' | 'viewer' | 'superadmin';
|
||||
enabled: boolean;
|
||||
system?: boolean; // flag-synced built-in account (UI read-only)
|
||||
createdAt: number;
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
<template>
|
||||
<div class="canvas-editor">
|
||||
<!-- Toolbar -->
|
||||
<div class="toolbar">
|
||||
<div class="toolbar w4f-card">
|
||||
<div class="toolbar-left">
|
||||
<span class="toolbar-title">连接配置</span>
|
||||
<button class="btn local-add" @click="addLocal">＋ 本地转发项</button>
|
||||
<button class="btn remote-add" @click="addRemote">＋ 远程节点</button>
|
||||
<button class="btn warn" @click="autoLayout">自动排列</button>
|
||||
<button v-if="canWrite" class="btn local-add" @click="addLocal">＋ 本地转发项</button>
|
||||
<button v-if="canWrite" class="btn remote-add" @click="addRemote">＋ 远程节点</button>
|
||||
<button v-if="canWrite" class="btn warn" @click="autoLayout">自动排列</button>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<span class="save-hint">{{ dirty ? '● 未保存' : '已保存' }}</span>
|
||||
<button class="btn ghost" @click="exportCanvas">导出</button>
|
||||
<button class="btn ghost" :disabled="!canWrite" @click="pickImport" title="导入转发表（覆盖当前）">
|
||||
<button v-if="canWrite" class="btn ghost" @click="pickImport" title="导入转发表（覆盖当前）">
|
||||
导入
|
||||
</button>
|
||||
<input ref="importInput" type="file" accept=".json,application/json" class="hidden-input" @change="onImportFile" />
|
||||
<button class="btn save" :disabled="saving" @click="save">
|
||||
<button v-if="canWrite" class="btn save" :disabled="saving" @click="save">
|
||||
保存配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-wrap">
|
||||
<div class="flow-wrap w4f-card">
|
||||
<VueFlow
|
||||
v-model:nodes="nodes"
|
||||
v-model:edges="edges"
|
||||
@ -30,6 +30,8 @@
|
||||
:max-zoom="2"
|
||||
fit-view-on-init
|
||||
:delete-key-code="null"
|
||||
:nodes-draggable="canWrite"
|
||||
:nodes-connectable="canWrite"
|
||||
:edges-updatable="false"
|
||||
:edges-reconnectable="false"
|
||||
class="flow-canvas"
|
||||
@ -91,6 +93,7 @@
|
||||
max="65535"
|
||||
placeholder="默认 = 本地端口"
|
||||
class="port-input"
|
||||
:disabled="!canWrite"
|
||||
@keyup.enter="confirmPort"
|
||||
/>
|
||||
</div>
|
||||
@ -99,12 +102,13 @@
|
||||
<el-input
|
||||
v-model="groupInput"
|
||||
placeholder="可选，用于转发页一键启停整组"
|
||||
:disabled="!canWrite"
|
||||
@keyup.enter="confirmPort"
|
||||
/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<button class="btn" @click="portDlg.visible = false">取消</button>
|
||||
<button class="btn save" @click="confirmPort">确定</button>
|
||||
<button class="btn save" :disabled="!canWrite" @click="confirmPort">确定</button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@ -381,6 +385,7 @@ const edgeId = (source: string, target: string, remotePort: number) =>
|
||||
`${source}-->${target}@${remotePort}`
|
||||
|
||||
const onConnect = (conn: Connection) => {
|
||||
if (!canWrite.value) return
|
||||
const localName = conn.source.startsWith('local::')
|
||||
? conn.source.slice(7)
|
||||
: ''
|
||||
@ -564,6 +569,7 @@ const onRemoteData = (data: CanvasRemote) => {
|
||||
}
|
||||
|
||||
const onEdgeClick = ({ edge }: { edge: Edge }) => {
|
||||
if (!canWrite.value) return
|
||||
editEdge(edge)
|
||||
}
|
||||
|
||||
@ -827,7 +833,7 @@ onBeforeUnmount(() => {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: $color-bg-secondary;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
@ -835,9 +841,9 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
background: $color-bg-primary;
|
||||
border-bottom: 1px solid $color-border-light;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
padding: 12px 16px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
@ -935,12 +941,13 @@ onBeforeUnmount(() => {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flow-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--w4f-bg-muted);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -62,13 +62,13 @@
|
||||
<!-- Action toolbar -->
|
||||
<div class="toolbar w4f-card">
|
||||
<template v-if="!isMember">
|
||||
<button class="w4f-btn" :disabled="busy" @click="onCreate">⊕ 创建集群</button>
|
||||
<button class="w4f-btn ghost" :disabled="busy" @click="joinDialog.visible = true">↪ 加入集群…</button>
|
||||
<button v-if="canWrite" class="w4f-btn" :disabled="busy" @click="onCreate">⊕ 创建集群</button>
|
||||
<button v-if="canWrite" class="w4f-btn ghost" :disabled="busy" @click="joinDialog.visible = true">↪ 加入集群…</button>
|
||||
<span class="act-hint" v-if="isStandalone && isLeader">本节点为初始 leader，已就绪；可直接创建，或输入对端地址加入既有集群</span>
|
||||
<span class="act-hint" v-else-if="!selfInRing">本节点已脱离集群，可创建新集群或加入既有集群</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="w4f-btn danger" :disabled="busy" @click="onLeave">⏏ 退出集群</button>
|
||||
<button v-if="canWrite" class="w4f-btn danger" :disabled="busy" @click="onLeave">⏏ 退出集群</button>
|
||||
<span class="act-hint">退出后本节点仅保留 localOnly 转发；可重新创建/加入</span>
|
||||
</template>
|
||||
<button class="w4f-btn ghost small" style="margin-left: auto" :disabled="busy" @click="load">⟳ 刷新</button>
|
||||
@ -92,7 +92,7 @@
|
||||
<div class="w4f-bar"><i :style="{ width: Math.min(100, n.load.memPct + n.load.netPct) + '%' }" /></div>
|
||||
</div>
|
||||
<div class="rn-addr">{{ n.addr }}</div>
|
||||
<button v-if="n.id !== ring.selfId && n.alive" class="w4f-btn danger small rn-remove" :disabled="busy" @click="onRemoveNode(n.id)">移除节点</button>
|
||||
<button v-if="canWrite && n.id !== ring.selfId && n.alive" class="w4f-btn danger small rn-remove" :disabled="busy" @click="onRemoveNode(n.id)">移除节点</button>
|
||||
</div>
|
||||
<span v-if="i < ring.nodes.length - 1" class="ring-arrow">→</span>
|
||||
</template>
|
||||
@ -176,16 +176,16 @@
|
||||
<el-dialog v-model="joinDialog.visible" title="加入集群" width="420px">
|
||||
<div class="form-row">
|
||||
<label>对端地址</label>
|
||||
<el-input v-model="joinDialog.addr" placeholder="对端 IP:port（如 192.168.1.10:7500）" @keyup.enter="onJoin" />
|
||||
<el-input v-model="joinDialog.addr" :disabled="!canWrite" placeholder="对端 IP:port（如 192.168.1.10:7500）" @keyup.enter="onJoin" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>加入密钥</label>
|
||||
<el-input v-model="joinDialog.key" placeholder="对端节点的加入密钥（nodeKey）" @keyup.enter="onJoin" />
|
||||
<el-input v-model="joinDialog.key" :disabled="!canWrite" placeholder="对端节点的加入密钥（nodeKey）" @keyup.enter="onJoin" />
|
||||
</div>
|
||||
<div class="form-hint">填入对端节点可被本机路由到达的真实 IP:port（或域名:port），本节点将向对端请求加入并采纳其环状态，令牌到达即并入环。需提供对端节点的加入密钥以通过验证。</div>
|
||||
<template #footer>
|
||||
<button class="w4f-btn ghost small" @click="joinDialog.visible = false">取消</button>
|
||||
<button class="w4f-btn small" :disabled="busy || !joinDialog.addr.trim() || !joinDialog.key.trim()" @click="onJoin">加入</button>
|
||||
<button class="w4f-btn small" :disabled="busy || !canWrite || !joinDialog.addr.trim() || !joinDialog.key.trim()" @click="onJoin">加入</button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@ -195,6 +195,7 @@
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { api } from '../api'
|
||||
import { canWrite } from '../auth'
|
||||
import type { RingSnapshot, RingTaskInfo, RingLogEntry } from '../types'
|
||||
|
||||
const ring = ref<RingSnapshot | null>(null)
|
||||
@ -494,7 +495,7 @@ onBeforeUnmount(() => {
|
||||
.ring-node { position: relative; border: 1px solid var(--w4f-line); border-radius: $radius-md; padding: 12px 14px; min-width: 168px;
|
||||
background: var(--w4f-card-2); box-shadow: var(--w4f-sh-sm);
|
||||
&.leader { border-color: var(--w4f-secondary); background: var(--w4f-secondary-50); }
|
||||
&.self { outline: 2px solid rgba(255, 127, 172, 0.45); box-shadow: 0 0 0 4px rgba(255, 127, 172, 0.14); border-color: var(--w4f-primary); }
|
||||
&.self { outline: 2px solid var(--w4f-primary); box-shadow: 0 0 0 4px var(--w4f-glow-soft); border-color: var(--w4f-primary); }
|
||||
&.dead { border-color: var(--w4f-danger); background: var(--w4f-danger-50); opacity: 0.72; }
|
||||
}
|
||||
.rn-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||||
@ -510,8 +511,8 @@ onBeforeUnmount(() => {
|
||||
.task-list, .topo-list, .log-list { display: flex; flex-direction: column; gap: 6px; }
|
||||
.log-list { max-height: 340px; overflow-y: auto; padding-right: 2px; }
|
||||
.task-row, .topo-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--w4f-line); border-radius: $radius-xs; padding: 8px 11px; font-size: 13px; background: var(--w4f-card-2); box-shadow: var(--w4f-sh-sm); }
|
||||
.task-row.pending { background: var(--w4f-primary-50); border-color: rgba(255, 127, 172, 0.25); }
|
||||
.task-row.revoke, .task-row.remove { background: var(--w4f-danger-50); border-color: rgba(219, 54, 148, 0.25); }
|
||||
.task-row.pending { background: var(--w4f-primary-50); border-color: var(--w4f-primary-200); }
|
||||
.task-row.revoke, .task-row.remove { background: var(--w4f-danger-50); border-color: var(--w4f-danger); }
|
||||
.tk-id, .tp-id { font-weight: 700; color: $color-text-secondary; font-size: 12px; font-family: var(--w4f-mono); }
|
||||
.tk-name, .tp-name { font-weight: 600; }
|
||||
.tk-arrow { color: var(--w4f-primary); font-weight: 700; }
|
||||
|
||||
155
web/src/views/LoginView.vue
Normal file
155
web/src/views/LoginView.vue
Normal file
@ -0,0 +1,155 @@
|
||||
<!--
|
||||
LoginView — session-cookie sign-in page. Shown by App.vue when /me is 401
|
||||
(no session cookie). Submitting POST /api/manager/login sets the HttpOnly
|
||||
session cookie; on success auth.login() flips isAuthed and App drops into
|
||||
the shell. There is no browser Basic-Auth prompt anymore (the 401 response
|
||||
omits WWW-Authenticate), so credentials are never cached by the browser and
|
||||
logout works.
|
||||
-->
|
||||
<template>
|
||||
<div class="login-wrap">
|
||||
<form class="login-card" @submit.prevent="submit">
|
||||
<div class="lc-brand">
|
||||
<img class="lc-logo" src="/favicon.svg" alt="webui4frpc" />
|
||||
<b>webui4frpc</b>
|
||||
<small>令牌环 · 转发编排</small>
|
||||
</div>
|
||||
|
||||
<label class="lc-field">
|
||||
<span>用户名</span>
|
||||
<input v-model="username" autocomplete="username" placeholder="用户名" required />
|
||||
</label>
|
||||
<label class="lc-field">
|
||||
<span>密码</span>
|
||||
<input v-model="password" type="password" autocomplete="current-password" placeholder="••••••••" required />
|
||||
</label>
|
||||
|
||||
<p v-if="error" class="lc-error">{{ error }}</p>
|
||||
|
||||
<button class="lc-btn" type="submit" :disabled="busy">
|
||||
{{ busy ? '登录中…' : '登 录' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { login } from '../auth'
|
||||
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const busy = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
async function submit() {
|
||||
busy.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
await login(username.value, password.value)
|
||||
} catch {
|
||||
error.value = '登录失败：用户名或密码错误'
|
||||
} finally {
|
||||
busy.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-wrap {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
font-family: var(--w4f-font);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: 32px 28px 28px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--w4f-card);
|
||||
border: 1px solid var(--w4f-line);
|
||||
box-shadow: var(--w4f-sh-lg);
|
||||
backdrop-filter: blur(calc(var(--w4f-glass) * 0.8)) saturate(1.3);
|
||||
-webkit-backdrop-filter: blur(calc(var(--w4f-glass) * 0.8)) saturate(1.3);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.login-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
|
||||
}
|
||||
|
||||
.lc-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.lc-logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
object-fit: contain;
|
||||
box-shadow: 0 8px 22px var(--w4f-glow);
|
||||
}
|
||||
.lc-brand b { font-size: 19px; letter-spacing: 0.3px; }
|
||||
.lc-brand small { font-size: 12px; color: var(--w4f-muted); }
|
||||
|
||||
.lc-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: var(--w4f-fg-2);
|
||||
}
|
||||
.lc-field input {
|
||||
padding: 9px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--w4f-line-strong);
|
||||
background: var(--w4f-card-solid);
|
||||
color: var(--w4f-fg);
|
||||
font-size: 13.5px;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.15s var(--w4f-ease), box-shadow 0.15s var(--w4f-ease);
|
||||
}
|
||||
.lc-field input:focus {
|
||||
outline: none;
|
||||
border-color: var(--w4f-primary);
|
||||
box-shadow: 0 0 0 3px var(--w4f-glow-soft);
|
||||
}
|
||||
|
||||
.lc-error {
|
||||
margin: 0;
|
||||
font-size: 12.5px;
|
||||
color: var(--w4f-danger);
|
||||
background: var(--w4f-danger-50);
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.lc-btn {
|
||||
margin-top: 4px;
|
||||
padding: 11px 0;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--w4f-primary), var(--w4f-secondary));
|
||||
box-shadow: 0 6px 18px var(--w4f-glow);
|
||||
transition: transform 0.15s var(--w4f-ease-spring), box-shadow 0.15s var(--w4f-ease-spring);
|
||||
}
|
||||
.lc-btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 24px var(--w4f-glow);
|
||||
}
|
||||
.lc-btn:disabled { opacity: 0.65; cursor: default; }
|
||||
</style>
|
||||
@ -23,10 +23,12 @@
|
||||
clearable
|
||||
size="large"
|
||||
class="binary-input"
|
||||
:disabled="!canWrite"
|
||||
@blur="applyBinaryPath"
|
||||
@keyup.enter="applyBinaryPath"
|
||||
/>
|
||||
<button
|
||||
v-if="canWrite"
|
||||
class="btn install-btn"
|
||||
:disabled="installing"
|
||||
@click="installBinary"
|
||||
@ -57,6 +59,7 @@
|
||||
</div>
|
||||
<el-switch
|
||||
v-model="settings.autoStartProfiles"
|
||||
:disabled="!canWrite"
|
||||
@change="saveSettings"
|
||||
/>
|
||||
</div>
|
||||
@ -65,7 +68,7 @@
|
||||
<span class="setting-label">异常退出自动重启</span>
|
||||
<span class="setting-hint">worker 崩溃后带退避重启</span>
|
||||
</div>
|
||||
<el-switch v-model="settings.restartOnExit" @change="saveSettings" />
|
||||
<el-switch v-model="settings.restartOnExit" :disabled="!canWrite" @change="saveSettings" />
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div class="setting-text">
|
||||
@ -76,6 +79,7 @@
|
||||
v-model="settings.restartIntervalSeconds"
|
||||
:min="1"
|
||||
:max="3600"
|
||||
:disabled="!canWrite"
|
||||
@change="saveSettings"
|
||||
/>
|
||||
</div>
|
||||
@ -89,6 +93,7 @@ import { ref, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Loading } from '@element-plus/icons-vue'
|
||||
import { api } from '../api'
|
||||
import { canWrite } from '../auth'
|
||||
import type {
|
||||
BinaryStatus,
|
||||
Settings as ManagerSettings,
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
<div class="tb-right">
|
||||
<button class="w4f-btn ghost small" @click="loadStatus">⟳ 刷新</button>
|
||||
<button class="w4f-btn small" @click="openAdd">＋ 添加远程节点</button>
|
||||
<button v-if="canWrite" class="w4f-btn small" @click="openAdd">＋ 添加远程节点</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -43,9 +43,9 @@
|
||||
<span class="k-ic">→</span>{{ g.label }}
|
||||
<span class="grp-count">{{ g.items.length }} 条</span>
|
||||
<span class="grp-actions">
|
||||
<button class="w4f-btn small" @click="groupStart(g.key)">一键启动整组</button>
|
||||
<button class="w4f-btn ghost small" @click="groupStop(g.key)">一键停止整组</button>
|
||||
<button v-if="g.key" class="w4f-btn ghost small danger" @click="deleteGroup(g.key)">删除分组</button>
|
||||
<button v-if="canWrite" class="w4f-btn small" @click="groupStart(g.key)">一键启动整组</button>
|
||||
<button v-if="canWrite" class="w4f-btn ghost small" @click="groupStop(g.key)">一键停止整组</button>
|
||||
<button v-if="canWrite && g.key" class="w4f-btn ghost small danger" @click="deleteGroup(g.key)">删除分组</button>
|
||||
</span>
|
||||
</h3>
|
||||
<div class="card-grid">
|
||||
@ -70,13 +70,14 @@
|
||||
<span v-if="f.localProto" class="w4f-tag w4f-tag-primary">{{ f.localProto }}</span>
|
||||
<span
|
||||
class="w4f-tag w4f-tag-info group-chip"
|
||||
@click="editGroup(f)"
|
||||
:title="'点击修改分组（当前：' + (f.group || '未分组') + '）'"
|
||||
:class="{ readonly: !canWrite }"
|
||||
@click="canWrite && editGroup(f)"
|
||||
:title="canWrite ? '点击修改分组（当前：' + (f.group || '未分组') + '）' : '当前分组：' + (f.group || '未分组')"
|
||||
>{{ f.group || '未分组' }}</span>
|
||||
<span v-if="f.kind === 'remote'" class="fwd-owner" :title="f.ownerId || ''">{{ ownerLabel(f) }}</span>
|
||||
<span class="fwd-actions">
|
||||
<button v-if="!f.active" class="w4f-btn small" @click="startForward(f)">启动转发</button>
|
||||
<button v-else class="w4f-btn ghost small" @click="stopForward(f)">停止转发</button>
|
||||
<button v-if="canWrite && !f.active" class="w4f-btn small" @click="startForward(f)">启动转发</button>
|
||||
<button v-else-if="canWrite" class="w4f-btn ghost small" @click="stopForward(f)">停止转发</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -101,8 +102,8 @@
|
||||
<span class="w4f-dot" :class="connDotClass(p.connState)" />{{ connStateLabel(p.connState) }}
|
||||
</span>
|
||||
<span class="nc-actions">
|
||||
<button class="w4f-btn ghost small" @click="openEdit(p)">编辑</button>
|
||||
<button class="w4f-btn danger small" @click="removeRemote(p.name)">删除</button>
|
||||
<button v-if="canWrite" class="w4f-btn ghost small" @click="openEdit(p)">编辑</button>
|
||||
<button v-if="canWrite" class="w4f-btn danger small" @click="removeRemote(p.name)">删除</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="nc-meta">
|
||||
@ -172,31 +173,31 @@
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.isNew ? '添加远程节点' : '编辑远程节点'" width="440px">
|
||||
<div class="form-row">
|
||||
<label>名称</label>
|
||||
<el-input v-model="dialog.remote.name" :disabled="!dialog.isNew" placeholder="如 aliyun-hz" />
|
||||
<el-input v-model="dialog.remote.name" :disabled="!canWrite || !dialog.isNew" placeholder="如 aliyun-hz" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>服务器 IP</label>
|
||||
<el-input v-model="dialog.remote.ip" placeholder="frps 地址" />
|
||||
<el-input v-model="dialog.remote.ip" :disabled="!canWrite" placeholder="frps 地址" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>端口</label>
|
||||
<el-input-number v-model="dialog.remote.port" :min="1" :max="65535" />
|
||||
<el-input-number v-model="dialog.remote.port" :disabled="!canWrite" :min="1" :max="65535" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Token</label>
|
||||
<el-input v-model="dialog.remote.token" placeholder="可选" />
|
||||
<el-input v-model="dialog.remote.token" :disabled="!canWrite" placeholder="可选" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>URL</label>
|
||||
<el-input v-model="dialog.remote.url" placeholder="可选" />
|
||||
<el-input v-model="dialog.remote.url" :disabled="!canWrite" placeholder="可选" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>启用</label>
|
||||
<el-switch v-model="dialog.remote.enabled" />
|
||||
<el-switch v-model="dialog.remote.enabled" :disabled="!canWrite" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<button class="w4f-btn ghost small" @click="dialog.visible = false">取消</button>
|
||||
<button class="w4f-btn small" @click="saveRemote">保存</button>
|
||||
<button class="w4f-btn small" :disabled="!canWrite" @click="saveRemote">保存</button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@ -206,6 +207,7 @@
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { api } from '../api'
|
||||
import { canWrite } from '../auth'
|
||||
import type { ForwardStatus, Remote, StatusResp } from '../types'
|
||||
|
||||
const status = ref<StatusResp | null>(null)
|
||||
@ -616,7 +618,7 @@ onBeforeUnmount(() => {
|
||||
.fwd-actions { display: flex; gap: 6px; }
|
||||
.grp-count { font-size: 12px; color: $color-text-muted; font-weight: 600; }
|
||||
.grp-actions { margin-left: auto; display: flex; gap: 6px; }
|
||||
.group-chip { cursor: pointer; transition: background $transition-fast; &:hover { background: color-mix(in srgb, var(--w4f-info) 30%, transparent); } }
|
||||
.group-chip { cursor: pointer; transition: background $transition-fast; &:hover { background: color-mix(in srgb, var(--w4f-info) 30%, transparent); } &.readonly { cursor: default; &:hover { background: none; } } }
|
||||
|
||||
/* local service card */
|
||||
.local-card { padding: 14px 16px; }
|
||||
|
||||
@ -14,10 +14,10 @@
|
||||
</header>
|
||||
<el-table :data="users" size="small" stripe empty-text="暂无账号">
|
||||
<el-table-column prop="username" label="用户名" min-width="140" />
|
||||
<el-table-column label="角色" width="110">
|
||||
<el-table-column label="角色" width="130">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" :type="row.role === 'admin' ? 'danger' : 'info'">
|
||||
{{ row.role === 'admin' ? '管理员' : '审计(viewer)' }}
|
||||
<el-tag size="small" :type="row.role === 'superadmin' ? 'danger' : row.role === 'admin' ? 'warning' : 'info'">
|
||||
{{ row.role === 'superadmin' ? '超级管理员' : row.role === 'admin' ? '管理员' : '审计(viewer)' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -97,6 +97,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="角色">
|
||||
<el-select v-model="userForm.role" :disabled="editing && editing?.system">
|
||||
<el-option label="超级管理员 (superadmin)" value="superadmin" />
|
||||
<el-option label="管理员 (admin)" value="admin" />
|
||||
<el-option label="审计 (viewer)" value="viewer" />
|
||||
</el-select>
|
||||
@ -180,7 +181,7 @@ const scopeType = (s: string) => (s === 'admin' ? 'danger' : s === 'write' ? 'wa
|
||||
const userDialog = ref(false)
|
||||
const editing = ref<User | null>(null)
|
||||
const userSaving = ref(false)
|
||||
const userForm = ref({ username: '', password: '', role: 'viewer' as 'admin' | 'viewer', enabled: true })
|
||||
const userForm = ref({ username: '', password: '', role: 'viewer' as 'admin' | 'viewer' | 'superadmin', enabled: true })
|
||||
|
||||
const openUserCreate = () => {
|
||||
editing.value = null
|
||||
@ -197,7 +198,7 @@ const submitUser = async () => {
|
||||
userSaving.value = true
|
||||
try {
|
||||
if (editing.value) {
|
||||
const patch: { password?: string; role: 'admin' | 'viewer'; enabled: boolean } = {
|
||||
const patch: { password?: string; role: 'admin' | 'viewer' | 'superadmin'; enabled: boolean } = {
|
||||
role: userForm.value.role,
|
||||
enabled: userForm.value.enabled,
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user