# techhero-guangxi-web-ui

**Repository Path**: defaultjs2105/techhero-guangxi-web-ui

## Basic Information

- **Project Name**: techhero-guangxi-web-ui
- **Description**: 网页端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-01
- **Last Updated**: 2026-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<a id="top"></a>
# techhero-guangxi-web-ui

广西招生考试院公众服务平台 — Web前端项目（桌面端）

---

## <a id="project-intro"></a>项目简介

本项目是基于 Vue 3 + Vite + Element Plus 构建的 Web 前端项目，面向 PC 浏览器用户提供高考志愿填报信息服务。与现有的 uni-app 移动端（`techhero-uni` / `techhero-guangxi-uniapp-ui`）共用同一套后端 API（`techhero-guangxi-server`），在桌面大屏场景下展示更完整的数据、更高效的交互。

**定位差异**:
| 维度 | 移动端 (uni-app) | Web端 (本项目) |
|------|-----------------|---------------|
| 运行环境 | 微信小程序 / H5 / App | PC浏览器 (Chrome/Edge) |
| 屏幕尺寸 | 375-414px 宽 | 1366-1920px 宽 |
| 数据展示 | 卡片列表，字段截断 | 完整表格，多列并排 |
| 筛选方式 | 底部弹出 (bottom-sheet) | 左侧固定面板 |
| 权限控制 | 页面跳转拦截 | 按钮级权限 + 路由守卫 |

---

## <a id="structure-compare"></a>程序结构对比

### 三项目架构对照表

| 层级 | techhero-uni (原始) | techhero-guangxi-uniapp-ui (优化) | techhero-guangxi-web-ui (本项目) |
|------|-------------------|----------------------------------|-------------------------------|
| 框架 | uni-app (Vue 3) | uni-app (Vue 3) | Vue 3 + Vite |
| 状态管理 | 无集中管理 (Storage + globalData) | Pinia 4 stores | Pinia 4 stores |
| HTTP | uni.request 封装 | uni.request 封装 (模块化拆分) | Axios 封装 (HMAC-SHA256签名) |
| 路由 | pages.json (40+页面) | pages.json + subPackages | Vue Router 4 (hash模式) |
| UI组件 | uni-ui 组件库 | uni-ui 组件库 | Element Plus |
| 图表 | uCharts (qiun-data-charts) | uCharts | ECharts 5 |
| 样式单位 | rpx 混用 | 统一 rpx | px/rem/vw |
| 条件编译 | #ifdef MP-WEIXIN / H5 | 多平台 #ifdef | 无 (统一H5) |
| 代码组织 | 平铺 pages/ + 混入 mixin | 分包 subPackages + composables | 模块化 views/ + composables |
| 构建 | Webpack 5 + Vite 7 | Webpack 5 + Vite 7 | Vite 7 |
| 反爬 | 代码混淆 (H5) | 代码混淆 (H5) | JS混淆 + 运行时防护 + 密钥分段 |

### 目录结构对照

```
techhero-uni/                    techhero-guangxi-uniapp-ui/       techhero-guangxi-web-ui/
├── api/          17个模块        ├── api/          17个模块        ├── api/modules/    17个模块
├── utils/request/  627行单体     ├── utils/request/ 4模块拆分      ├── api/index.js   axios封装
├── pages/        40+页面         ├── pages/        40+页面(分包)   ├── views/         30+页面
├── components/   全局组件        ├── components/   共享组件        ├── components/    布局+通用
├── mixins/       dictMixin       ├── composables/  4个hooks        ├── composables/   4个hooks
├── (无状态管理)                   ├── stores/       5个Pinia        ├── stores/        4个Pinia
└── (无router)                    └── pages.json    路由配置        └── router/        Vue Router
```

---

## <a id="revision-notes"></a>修订说明

| 日期 | 版本 | 修订内容 |
|------|------|---------|
| 2026-07-01 | v1.0.0 | 初始版本：基于 `techhero-guangxi-uniapp-ui` API模块和Pinia stores，创建Web端Vue 3项目 |
| - | - | 完整迁移17个API模块（axios适配），4个Pinia stores（localStorage适配） |
| - | - | 实现30+页面视图（核心13 + 辅助10 + 通用8） |
| - | - | 集成Element Plus组件库，ECharts图表 |
| - | - | 实现HMAC-SHA256请求签名，Bearer Token认证 |
| - | - | 桌面优先响应式布局（≥1200px / 768-1199px / <768px） |
| - | - | 反爬取机制：JS混淆 + 运行时防护 + 密钥分段 |
| - | - | 用户角色权限：普通用户（收藏）+ 考生用户（收藏+成绩+录取） |

---

## <a id="tech-stack"></a>技术栈

| 层级 | 技术 | 版本 |
|------|------|------|
| 框架 | Vue 3 (Composition API) | ^3.5.0 |
| 构建 | Vite | ^7.1.0 |
| 路由 | Vue Router | ^4.4.0 |
| 状态管理 | Pinia | ^2.1.7 |
| HTTP客户端 | Axios | ^1.7.0 |
| UI组件库 | Element Plus | ^2.8.0 |
| 图表 | ECharts | ^5.5.0 |
| 加密 | crypto-js | ^4.2.0 |
| 样式 | SCSS | - |
| 混淆 | javascript-obfuscator | ^4.1.1 |

---

## <a id="quick-start"></a>快速开始

### 环境要求
- Node.js 18+
- npm 9+

### 安装
```bash
cd techhero-guangxi-web-ui
npm install
```

### 开发
```bash
npm run dev          # 启动开发服务器 (http://localhost:3000)
```

### 构建
```bash
npm run build        # 生产构建 (输出到 dist/)
npm run preview      # 预览构建产物
```

### 验证
```bash
npm run verify       # 运行代码质量验证
```

---

## <a id="project-structure"></a>项目结构

```
techhero-guangxi-web-ui/
├── .gitignore              # Git过滤策略
├── package.json            # 项目配置与依赖
├── vite.config.js          # Vite构建配置
├── index.html              # SPA入口
├── .env.development        # 开发环境变量
├── .env.production         # 生产环境变量
│
├── build/
│   └── obfuscator.config.js # JS混淆配置
│
├── scripts/
│   └── verify.mjs          # 代码质量验证
│
├── src/
│   ├── main.js             # Vue应用入口
│   ├── App.vue             # 根组件 (Header+Content+Footer)
│   │
│   ├── api/                # API层（17个模块，100%复用后端接口）
│   │   ├── index.js        # Axios封装 (签名/加密/重试/反爬)
│   │   └── modules/        # API模块
│   │
│   ├── stores/             # Pinia状态管理（4个store）
│   ├── composables/        # 组合式API（4个hook）
│   ├── router/             # Vue Router (路由+守卫+权限)
│   ├── components/         # 共享组件（布局+通用+图表）
│   ├── views/              # 页面视图（30+页面）
│   ├── utils/              # 工具函数（加密/签名/存储/验证/反爬）
│   ├── styles/             # 全局样式（变量/混入/重置/公共）
│   └── assets/             # 静态资源
│
└── public/                 # 公共资源
```

---

## <a id="anti-crawl"></a>反爬取机制

| 层级 | 措施 | 说明 |
|------|------|------|
| 构建时 | JS混淆 (controlFlowFlattening + RC4 + deadCode) | javascript-obfuscator |
| 构建时 | 域名锁 (ksfw.gxeea.cn) | 仅允许指定域名运行 |
| 运行时 | 禁用右键菜单 | document.oncontextmenu |
| 运行时 | 禁用F12/Ctrl+Shift+I/Ctrl+U | 键盘事件拦截 |
| 运行时 | DevTools打开检测 | 窗口尺寸差异检测 |
| 运行时 | console输出禁用 | console.log重写为空函数 |
| 网络层 | HMAC-SHA256签名 | 每请求签名校验 |
| 网络层 | 密钥分段存储 | 密钥分散在env/localStorage/代码中 |
| 网络层 | 时间戳防重放 | X-Ca-Timestamp + 服务器时间校正 |
| 后端 | 签名校验 + 限流(478) + Token认证 | 由techhero-guangxi-server提供 |

---

## <a id="git-status"></a>Git提交状态

```
仓库: techhero-guangxi-web-ui
分支: master
初始提交: (待首次提交)
```

项目从空仓库初始化，所有文件为新增。

---

## <a id="verification"></a>验证说明

### 编译验证
```bash
npm install && npm run build    # 确认编译无error/warning
```

### API一致性
- API模块URL路径与 `techhero-guangxi-uniapp-ui/api/` 保持一致
- 请求签名算法与后端网关校验兼容

### 路由覆盖率
- Vue Router路由覆盖 `pages.json` 所有页面
- 路由守卫实现登录校验 + 角色权限

### Store一致性
- Pinia store state/getters/actions 与 uniapp-ui 保持一致

### 功能等价性
- 同一API调用 → 请求参数结构相同
- 同一操作流程 → 状态变更序列相同
- 同一数据 → UI展示字段更完整（桌面端优势）