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. 访问入口
- 路由与菜单:
/swift(SwiftLayout 布局的空子路由),nameSwiftHome,标题「Swift 卫星结算」;父路由与子路由均不设requiresAuth(避免被 AIP 登录守卫拦截),由页面内嵌登录自行维护swift_token。 - 认证与权限:使用独立
swift_token(localStorage.swift_token),请求经swiftClient.js自动附Authorization: Bearer;登录接口返回裸响应{user_id, username, token, refresh_token};401 时客户端自动清 token 并回/swift重新登录。 - 端口与 API 前缀:Swift 后端 18084,前端前缀
/swift-api(Vite 代理到后端并重写为/api/v1)。
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.js,axios.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}) |
关键机制:
- 独立认证体系:Swift 有独立用户库与 token(seed admin/admin1),与 AIP/Gotham 的
aip_token完全隔离;401 由响应拦截器统一清 token 并回/swift登录页。 - 金额展示换算:演示金额以定点分
amount_cents返回,前端fenToYuan除以 100 保留两位展示为「元」。 - 演示状态依赖 admin 角色:
/demo/status挂adminMiddleware(),非 admin 账号调用返回 403;本页与 HCC 管控台共用该状态。
6. 权限与安全
- 认证:所有业务请求附
swift_tokenBearer;登录后写入localStorage.swift_token,退出即清除。 - 角色限制:
/demo/status走 admin 中间件,仅 admin 可读(默认 admin/admin1 为 admin)。 - 写操作防护:本页无写操作;登录/退出操作不落库敏感数据,token 存 localStorage 属演示实现。
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 加载一次 |