# 破碎工坊云 · 会员中心前端

面向云服务和 IDC 业务的用户控制台，提供账号管理、商品选购、服务器管理、订单支付与售后服务等页面。
本仓库是可独立安装、开发和构建的前端工程，不包含后端服务、数据库或生产环境凭证。

## 主要功能

- 账号与身份：密码 / 短信登录、注册、找回密码、第三方登录与绑定、个人资料、实名认证和 API 密钥。
- 控制台与资源：会员首页、资源总览、云服务器和独立服务器列表、实例详情。
- 商品与购买：商品分类、配置选购、购物车、订单创建、续费和升级入口。
- 实例管理：监控、网络、磁盘、流量、访问凭据与远程控制；具体能力取决于后端接入的产品模块。
- 账务与支付：订单、账单、余额、支付、发票、优惠券、转账和推广相关页面。
- 安全与服务：SSH 密钥、安全组、域名、操作日志、工单、消息、公告和帮助内容。

当前包含 52 个页面、104 个业务组件和 4 套布局。上述列表说明前端覆盖范围，不代表所有业务已完成真实后端验收。

## 技术栈

| 层次       | 技术                                                      |
| ---------- | --------------------------------------------------------- |
| 应用框架   | 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` 为准。

## 快速开始

需要 Node.js **22.12.0 或更高版本**及 npm，团队开发建议统一 Node.js 版本。

```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/` 或本地验收报告。
依赖包与保留静态资源应遵守各自许可证及资产授权；本仓库未另行授予整体开源许可证。