1. 页面概览

工作台总览是 LightSwift 卫星结算产品的入口页,路由 /swift,对应源码 action/web/src/views/SwiftHomePage.vue。LightSwift 是对标 SWIFT 的卫星通信金融结算平台仿真:GAC 客户端生成 ISO20022 pacs.008 报文 → 国密 SM3 摘要 + SM2 签名 → SM4-GCM 端到端加密 → 经 LEO 星座星地链路发送 → HCC 管控台接收解密验签 → 合规筛查 / 风控评估 → 内部结算(复式记账)→ 对账 → 结算回执(pacs.002)。

页面分两种形态:未登录时显示内嵌独立登录表单(Swift 用户库与 AIP 分离,seed 默认 admin / admin1);已登录后展示产品简介、三个快速入口(报文实验室 / GAC 报文工具 / HCC 管控台)、后端健康状态与最近一次一键端到端演示状态。一句话总结:工作台是 LightSwift 的登录入口、产品导航与健康/演示状态总览。

2. 访问入口

3. 界面布局

+--------------------------------------------------------------+
| 未登录:LightSwift 卫星结算 登录卡                             |
|   副标题/提示 + 用户名 + 密码 + [登录] 按钮                     |
+--------------------------------------------------------------+
| 已登录:页头  Swift 卫星结算工作台                              |
|   登录用户 <user>  后端状态 在线/离线  [退出登录]               |
+--------------------------------------------------------------+
| 产品简介(card):简介文字 + 三个快速入口卡片                    |
|   [报文实验室] [GAC 报文工具] [HCC 管控台]                     |
+--------------------------------------------------------------+
| 一键端到端演示状态(card):[刷新] 按钮                         |
|   演示 demo_id + 成功/失败徽标 + 金额/场景 + 步骤 chips         |
+--------------------------------------------------------------+

各板块职责:登录卡负责独立用户库认证;页头显示登录用户与后端健康徽标;产品简介卡片内嵌导航到三个功能页;演示状态卡片展示最近一次一键端到端演示的概要结果(演示 ID、成败、金额、场景与各步骤状态)。

4. 交互元素

控件位置含义与作用
用户名 / 密码输入框登录卡填 Swift 账号(默认 admin / admin1),form 提交到 POST /auth/login
登录按钮登录卡点击调 POST /auth/login,成功后写入 swift_token 并跳转工作台;失败展示服务端 error
退出登录按钮已登录页头clearSwiftToken()swift_token / swift_username 后回 /swift 登录页
后端状态徽标已登录页头通过 GET /swift-api/health(裸 axios)判定,status === 'ok' 显示在线,否则离线
快速入口卡片产品简介router-link 跳转报文实验室 /swift/messages、GAC /swift/gac、HCC /swift/hcc
刷新按钮一键演示状态卡重新调 GET /demo/status 拉取最近一次演示结果

5. 后端关联

API 客户端swiftClient.jsaxios.create({ baseURL: '/swift-api/v1', timeout: 30000 });成功响应 {code:0, data} 自动解包,登录/健康为裸响应原样返回,401 清 token 回 /swift

端点表

方法路径用途
POST/auth/login独立用户库登录,返回裸响应 {user_id, username, token, refresh_token}
GET/demo/status最近一次一键端到端演示结果(demo_id / success / amount_cents / scenario / steps
GET/swift-api/health公开健康检查(裸 axios 直连,后端经代理重写为 /api/health,返回 {status, service}

关键机制

6. 权限与安全

7. 常见问题与排错

问题 1:登录提示「登录响应缺少 token」或登录后立即跳回登录页

现象:填 admin/admin1 点登录报错,或刚登录成功又被弹回 /swift

原因POST /auth/login 返回体中没有 token 字段,或返回后请求立即 401 触发拦截器清 token。

处理:确认后端 18084 进程存活且登录响应含 token;若接口 401,检查密码是否正确。

问题 2:页头显示「后端状态 离线」

现象:登录成功后状态徽标红色显示离线。

原因/swift-api/health 请求失败,后端未启动或 Vite 代理未将 /swift-api 分流到 18084。

处理:确认 Swift 服务已监听 18084,检查 Vite 代理配置与浏览器 Network 面板。

问题 3:一键演示状态卡片报 403 或提示获取失败

现象:登录后演示状态加载报错,卡片为空或显示错误。

原因/demo/status 挂 admin 中间件,当前账号非 admin。

处理:用 seed 默认 admin/admin1 登录;或在 HCC 管控台「风控/合规」标签页运行演示后刷新。

问题 4:访问 /swift 白屏 / 404

现象:路由打不开或白屏。

原因router/index.js 未注册 /swift 父布局与空子路由,或前端构建未更新。

处理:确认路由已注册、前端重新构建加载。

8. 已知缺陷与边界

说明
无注册入口登录卡只支持登录,用户创建需走后端 /auth/register 或 seed
健康检查判据单一仅按 status === 'ok' 判定,不校验服务名与依赖组件
演示状态与 admin 绑定非 admin 账号登录后演示卡片必然报 403
无自动轮询健康与演示状态均需手动刷新,登录后仅 onMounted 加载一次