Skip to content

08-frontend.md

Latest commit

 

History

History
196 lines (159 loc) · 9 KB

08-frontend.md

File metadata and controls

196 lines (159 loc) · 9 KB
Raw

08 · 前端规划

设计风格

  • 暗色优先，跟随系统主题切换
  • 信息密度偏高（运维型面板），表格/卡片/仪表盘混用
  • 关键操作二次确认 + dry-run 预览

主导航

┌────────────────────────────────────────────────────────┐
│ 🔷 Zero Relay Panel              🟢 内核运行 v0.0.4    │
├──────┬─────────────────────────────────────────────────┤
│ 概览  │  Dashboard                                      │
│ 订阅  │  Subscriptions / Nodes（同一页双 Tab）          │
│ 隧道  │  Tunnels                                        │
│ 入站  │  Inbounds                                       │
│ 路由  │  Routes（入站 ↔ 隧道 [→ 落地] 绑定）            │
│ 计量  │  Stats / Bills                                  │
│ 日志  │  实时事件流                                      │
│ 设置  │  Kernel / Backup / Account                      │
└──────┴─────────────────────────────────────────────────┘

概览（Dashboard）

┌──────────────────────────────────────────────────────┐
│ 摘要卡片                                              │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐     │
│ │总入向    │ │总出向    │ │活跃连接  │ │隧道健康  │     │
│ │ 1.2 TB  │ │ 1.1 TB  │ │  342    │ │  87%   │     │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘     │
├──────────────────────────────────────────────────────┤
│ 实时流量曲线（5分钟滚动）                              │
│  [按入站着色多线 ECharts]                             │
├──────────────────────────────────────────────────────┤
│ 入站 Top10           │  隧道健康榜                    │
│  入站名 上行 下行     │  隧道名 选中节点 健康分        │
└──────────────────────────────────────────────────────┘

订阅 / 节点

双 Tab 设计：

Tab 1 订阅源

  • 表格列：名称 / URL / 类型 / 节点数 / 上次同步 / 状态 / 操作
  • 操作：刷新 / 编辑 / 删除 / 查看原文

Tab 2 节点池

  • 顶部筛选：订阅源、区域、协议、关键字、是否存活
  • 表格列：名称 / 区域 / 协议 / Server:Port / 延迟 / 状态 / 来源 / 操作
  • 批量操作：测速、禁用、按筛选条件创建隧道组
  • 区域统计 chips：HK 23 JP 18 SG 9 ...

隧道（Tunnels）

主区为隧道列表，点击后弹出右侧抽屉编辑器：

┌─ 隧道编辑器 ─────────────────────────────────┐
│ 名称     [HK-Pool                        ]   │
│ 类型     [○selector ●urltest ○fallback...]  │
│ 测试 URL [http://www.gstatic.com/...      ]   │
│ 测试间隔 [300]秒                              │
│                                              │
│ 区域筛选（可选）                              │
│  包含：[HK ✕] [JP ✕] [+]                     │
│  排除：[+]                                   │
│  ☑ 自动同步（节点池变化时重组）              │
│                                              │
│ 成员列表                                      │
│  [拖拽排序 / 删除]                           │
│  ├─ 节点：HK-01 (urltest 时仅展示)            │
│  ├─ 节点：HK-02                               │
│  └─ 隧道：JP-Pool（嵌套）                     │
│  [＋ 添加节点] [＋ 添加子隧道]                │
│                                              │
│ 高级策略                                      │
│  并发上限   [50]                              │
│  失败阈值   [3]                               │
│  退避时间   [60]秒                            │
│  粘连时间   [0]秒（round_robin）             │
└──────────────────────────────────────────────┘

入站（Inbounds）

表格列：名称 / Tag / 协议 / 监听 / TLS / 启停 / 今日流量 / 操作

新建/编辑使用分步表单：

Step 1 基本：名称、协议、监听端口
Step 2 安全：TLS（证书选择/上传 + SNI/Reality）+ 源 IP 白名单
Step 3 协议字段：UUID（VLESS）/ password（Trojan/Hy2）/ ...
       └─ [生成] 按钮触发 /generate-keys
Step 4 传输：TCP / WS（path/host） / gRPC（service） / h2
Step 5 预览：编译后片段 + 预生成 vless://... 测试 URI（仅本机调试）

路由（Routes）

简单直观的"绑定矩阵"：

┌─────────────────────────────────────────────────────────┐
│ 入站                  →  隧道           [→ 落地]   启停  │
├─────────────────────────────────────────────────────────┤
│ inbound-customerA      tn-hk-pool        —          ●   │
│ inbound-customerB      tn-jp-pool        node-us01  ●   │
│ inbound-internal       tn-mixed          tn-us-pool ●   │
└─────────────────────────────────────────────────────────┘
[+ 新建路由]

计量（Stats）

┌──────────────────────────────────────────────────┐
│ 时间范围 [今日|7天|30天|自定义]   [导出 CSV]      │
├──────────────────────────────────────────────────┤
│ 入站维度账单                                      │
│  名称  上行  下行  合计  连接  操作               │
│  ...                                              │
├──────────────────────────────────────────────────┤
│ 选中入站后展开：折线图（按小时/天）                │
└──────────────────────────────────────────────────┘

日志（Logs）

  • 实时事件流（SSE）
  • 顶部多选过滤器：事件类型（flow / kernel / log）、级别
  • 单连接行可点击 → 详情抽屉（含 inbound、outbound、bytes、duration、关闭按钮）

设置（Settings）

折叠面板：

  • 内核管理：当前版本 / 更新 / 启停 / 控制面通道选择 / IPC 路径
  • 数据备份：导出全量 / 导入恢复 / 历史快照列表 / 回滚
  • 账户：修改密码
  • 系统：日志级别、主题、语言、节点测速参数

共用组件

组件 用途
KernelStatusBadge 顶部内核状态指示器
TrafficChart ECharts 流量曲线，可复用于多个页面
ConfigDiff dry-run diff 预览（结构化 + JSON 双视图）
RegionTag 区域标签 + 国旗
CopyableField 可复制字段（UUID / URI 等）
TunnelMemberPicker 节点 / 子隧道选择器
JsonEditor 高级模式手编 JSON（基于 codemirror）

状态管理（Pinia）

按页面拆 store：

  • useAuthStore 登录态
  • useKernelStore 内核状态 + SSE 接驳
  • useSubscriptionsStore
  • useNodesStore（带 keyword/region 过滤的派生）
  • useTunnelsStore
  • useInboundsStore
  • useRoutesStore
  • useStatsStore 仪表盘数据

路由

/login
/                       → 重定向到 /dashboard
/dashboard
/subscriptions          (Tabs)
/tunnels
/inbounds
/routes
/stats
/logs
/settings/kernel
/settings/backup
/settings/account
/settings/system

未登录访问任意业务路由 → 跳 /login，登录后回跳。

国际化

  • 默认中文
  • 预留 i18n 框架（vue-i18n），但不在 MVP 阶段做英文翻译