164 lines
8.7 KiB
Markdown
164 lines
8.7 KiB
Markdown
# 破碎工坊云 · 会员中心前端
|
||
|
||
面向云服务和 IDC 业务的用户控制台，提供账号管理、商品选购、服务器管理、订单支付与售后服务等页面。
|
||
本仓库是可独立安装、开发和构建的前端工程，不包含后端服务、数据库或生产环境凭证。
|
||
|
||
## 主要功能
|
||
|
||
- 账号与身份：密码 / 短信登录、注册、找回密码、第三方登录与绑定、个人资料、实名认证和 API 密钥。
|
||
- 控制台与资源：会员首页、资源总览、云服务器和独立服务器列表、实例详情。
|
||
- 商品与购买：商品分类、配置选购、购物车、订单创建、续费和升级入口。
|
||
- 实例管理：监控、网络、磁盘、流量、访问凭据与远程控制；具体能力取决于后端接入的产品模块。
|
||
- 账务与支付：订单、账单、余额、支付、发票、优惠券、转账和推广相关页面。
|
||
- 安全与服务：SSH 密钥、安全组、域名、操作日志、工单、消息、公告和帮助内容。
|
||
|
||
当前包含 52 个页面、106 个业务组件和 4 套布局。上述列表说明前端覆盖范围，不代表所有业务已完成真实后端验收。
|
||
|
||
新输入手机号的入口统一使用中国大陆 `+86`，包括登录、注册、找回密码、第三方绑定及账户手机号变更；
|
||
不提供国际区号选择。已保存号码的真实区号展示和旧号码安全验证保持后端原有数据，不伪装成 `+86`。
|
||
物理服务器目录与配置器共用有效库存约束，网络档位取值在配置器和摘要间统一；无确定库存时不宣传具体余量。
|
||
官网选购入口允许匿名浏览商品，机柜托管通过登录后的工单咨询；可配置图片加载失败时显示明确替代内容。
|
||
|
||
## 技术栈
|
||
|
||
| 层次 | 技术 |
|
||
| ---------- | --------------------------------------------------------- |
|
||
| 应用框架 | Nuxt 4、Vue 3、Vue Router，客户端 SPA（`ssr: false`） |
|
||
| 状态与界面 | Pinia、PrimeVue 4、PrimeUI 主题、本地 Lucide 图标 |
|
||
| 图表与远控 | ECharts、vue-echarts、noVNC |
|
||
| 源码 | JavaScript、Vue 单文件组件、CSS，Nuxt 配置使用 TypeScript |
|
||
| 验证工具 | Node.js `node:test`、Playwright、源码检查脚本、Prettier |
|
||
|
||
依赖的精确版本以 `package-lock.json` 为准。
|
||
|
||
## 快速开始
|
||
|
||
需要 npm 及满足以下任一范围的 Node.js：**22.22.3–22.x、24.15.0–24.x 或 26.0.0 及以上**。
|
||
该范围与锁定依赖的引擎要求一致，团队开发应统一使用其中一个受支持版本。
|
||
|
||
```sh
|
||
git clone https://git.crash.work/cieanyau/console-dev.git
|
||
cd console-dev
|
||
npm ci
|
||
cp .env.example .env
|
||
```
|
||
|
||
在 `.env` 中配置后端地址：
|
||
|
||
```dotenv
|
||
NUXT_PUBLIC_API_BASE=http://127.0.0.1:8080
|
||
```
|
||
|
||
```sh
|
||
npm run dev
|
||
```
|
||
|
||
开发服务仅监听 `127.0.0.1`，实际访问地址以启动日志为准。
|
||
|
||
### 接口与反向代理
|
||
|
||
`NUXT_PUBLIC_API_BASE` 只填写后端 origin，不要附加 `/console/v1`，请求层会自动追加该前缀。
|
||
留空表示使用前端同源地址，需要在开发或部署环境配置接口反向代理。
|
||
|
||
以下地址始终走前端同源，必须单独转发到对应服务：
|
||
|
||
- `/captcha/`：图形验证码。
|
||
- `/remote-console/sessions`：远控会话及 WebSocket 连接。
|
||
|
||
仅设置 API 地址不会自动代理这两类请求，也不会启动后端、验证码、短信邮件、支付渠道或远控网关。
|
||
所有 `NUXT_PUBLIC_*` 配置都会暴露给浏览器，不能填写密码、访问令牌或数据库凭证。
|
||
|
||
## 常用命令
|
||
|
||
| 命令 | 用途 |
|
||
| ----------------- | ----------------------------------------- |
|
||
| `npm run dev` | 启动本地开发服务 |
|
||
| `npm run check` | 检查应用源码语法、导入和历史部署路径依赖 |
|
||
| `npm run build` | 构建生产版本，输出到项目根目录 `.output/` |
|
||
| `npm run preview` | 运行已构建的 Node.js 服务 |
|
||
| `npm test` | 对生产构建运行浏览器端到端测试 |
|
||
| `npm run format` | 格式化应用、配置、脚本和测试代码 |
|
||
|
||
### 构建与本地预览
|
||
|
||
```sh
|
||
npm run check
|
||
npm run build
|
||
NUXT_PUBLIC_API_BASE=http://127.0.0.1:8080 HOST=127.0.0.1 PORT=3000 npm run preview
|
||
```
|
||
|
||
预览命令直接运行 `.output/server/index.mjs`，不会自动读取项目 `.env`，请通过运行环境传入配置。
|
||
正式部署应使用独立版本目录和进程管理，并配置 HTTPS、接口 / WebSocket 反向代理及回滚流程。
|
||
本仓库的提交和构建不会自动修改生产服务器。
|
||
|
||
## 源码目录
|
||
|
||
```text
|
||
app/
|
||
app.vue 应用入口、布局选择与会话隔离
|
||
pages/ 文件路由与业务页面
|
||
layouts/ 控制台、认证、公开购买及站点布局
|
||
components/ 业务表单、实例管理、支付和公共界面
|
||
lib/ 接口、会话、商品配置及业务工具
|
||
middleware/ 路由鉴权
|
||
plugins/ 界面注册、启动初始化、跨标签页会话同步
|
||
config/ 中文文案和主题配置
|
||
utils/ 访问规则及基础适配
|
||
assets/styles/ 全局与业务样式
|
||
public/ 图片、图标、字体等静态资源
|
||
scripts/ 源码检查及一次性重建留档脚本
|
||
tests/ 浏览器场景与独立 HTTP 测试后端
|
||
nuxt.config.ts 应用与公开运行时配置
|
||
.env.example 无凭证的环境配置示例
|
||
```
|
||
|
||
`docs/` 仅保留在本地，已加入 Git 忽略规则，不随后续源码版本上传；历史提交中的文档不会因此消失。
|
||
不要使用 `git add -f docs` 将本地报告重新加入仓库。
|
||
|
||
## 测试
|
||
|
||
```sh
|
||
npm run build
|
||
npm test
|
||
```
|
||
|
||
测试使用真实 Chrome / Chromium 操作生产构建，自动启动本地 HTTP 测试后端，禁止访问外网，
|
||
不替换项目内部模块，也不预置登录令牌。默认使用 macOS 已安装的 Chrome；其他环境可指定：
|
||
|
||
```sh
|
||
CHROME_PATH=/absolute/path/to/chrome npm test
|
||
```
|
||
|
||
离线场景覆盖登录协议、短信倒计时、路由保护、会话失效、双标签页退出、SSH 密钥管理、
|
||
请求超时、支付期限及旧登录入口；还覆盖安全组批量规则、旧工单切换、镜像订单重试、
|
||
级联配置、商品字段校验、安全随机密码和三态主题；补充维护布局、深色样式隔离、
|
||
上传控件名称、导航键盘焦点及监控图表减动回归。还覆盖固定手机号区号、密码自动填充与键盘显隐、
|
||
按钮文字对比度、库存与网络规格一致性、商品编号边界，以及官网选购咨询和图片失败降级。
|
||
测试产物保存在被忽略的 `tests/fixtures/runs/`。
|
||
详细使用方式见 [测试说明](tests/README.md)。
|
||
|
||
仓库包含 `.gitea/workflows/frontend.yml`：安装锁定依赖后运行源码检查、生产构建、浏览器测试和
|
||
`npm audit --audit-level=moderate`，不执行部署。Git 服务需启用 Actions 并配置兼容的 Linux runner；
|
||
仅提交工作流不代表远端任务已经运行通过。
|
||
|
||
传递依赖 `glob` 与 `minimatch` 通过精确 overrides 使用修复版本。
|
||
截至 2026-11-06，`deepmerge` 的 GHSA-gcqx-w48m-w2h4 尚无已发布修复版本，低危传播告警仍保留，
|
||
未用强制降级 Nuxt 或关闭审计来隐藏。禁止把通过中危及以上门禁解读为依赖零风险。
|
||
|
||
真实支付、第三方登录 / CAPTCHA、安全挑战、短信邮件投递、供应商接口和 VNC 网关仍需在测试环境联调。
|
||
|
||
## 维护与交付说明
|
||
|
||
本工程根据 `20261025-kky-traffic-display` 发布产物重建，不是原始源码的逐字恢复。
|
||
多数页面和组件保留恢复后的 Vue 渲染函数及部分短变量名；原始模板、注释和完整变量名无法从发布包完整找回。
|
||
当前新增注释用于解释已核实的职责、流程和接口边界，不代表找回了原作者的注释，也不代表全站重新手写。
|
||
|
||
维护时直接修改当前源码并正常构建，不要编辑生成的哈希产物。
|
||
`scripts/reconstruct.mjs` 仅是一次性导入留档，不是开发或发布步骤，且会拒绝覆盖现有页面；
|
||
不要使用不可信的第三方发布产物运行该脚本。
|
||
登录所用的 CryptoJS AES 参数属于现有后端协议，调整前必须与后端协商，不能将其视为替代 HTTPS 的安全措施。
|
||
|
||
向员工交付仓库和对应分支即可；每位开发者自行安装依赖、配置后端并执行验证。
|
||
不要提交 `.env`、账号密码、令牌、数据库备份、`node_modules/`、`.output/` 或本地验收报告。
|
||
依赖包与保留静态资源应遵守各自许可证及资产授权；本仓库未另行授予整体开源许可证。
|