# 截图生成模板（Vue 3 + TypeScript + Vite）

一个基于 Vue 3 的前端项目，用于生成截图模板，支持登录、注册、验证码、图片上传与效果预览等功能。项目集成了 Pinia、Vue Router、Element Plus、TailwindCSS 等，开发体验友好、构建快速。

## 技术栈
- Vue 3、TypeScript、Vite
- Pinia、Vue Router
- Element Plus、TailwindCSS
- Axios

## 快速开始
1. 安装依赖
   - `npm install`
2. 选择并启动应用（需要传入 appname）
   - 开发：`npm run dev -- dy`
   - 构建：`npm run build -- dy`
   - 预览：`npm run preview`

> 说明：`dy` 是示例 appname，必须与 `config/index.json` 中的键一致。开发时写入 `.env.development` 并启动 Vite（默认端口 `3001`），构建时写入 `.env.production` 并输出到 `html/`。

## 环境与配置
- `config/index.json` 管理多应用配置，示例：
  ```json
  {
    "dy": {
      "appName": "dy",
      "accountList": [16888888887, 16888888888, 16888888889]
    }
  }
  ```
- 启动/构建脚本会将所选应用写入 `.env.*`：
  - `VITE_APP_NAME`
  - `VITE_APP_CONFIG`（JSON 字符串）
- 前端通过 `src/config/index.ts` 读取并解析：
  - `appName` 与 `appConfig`
  - `imgHost` 将回退到 `appUrl`（若存在）

## 开发与构建
- 开发服务：`npm run dev -- dy`
  - 写入 `.env.development`
  - 启动命令：`vite --port 3001 --host`
  - 访问 `http://localhost:3001/`
- 构建产物：`npm run build -- dy`
  - 输出目录：`html/`
- 预览构建结果：`npm run preview`
  - 默认端口见 `vite.config.ts`（示例：`8000`）

## 接口与代理
- 统一通过 `/api` 访问后端接口（见 `vite.config.ts` 中 `server.proxy`）。
  - 示例：`/api/login`、`/api/register`、`/api/captcha/new`、`/api/upload` 等
- 默认代理目标示例：`http://192.168.1.168:8090`（请按需修改）
- 响应拦截：
  - 登录态失效（`code === 401`）自动跳转 `'/login'`
  - 业务错误通过 `ElMessage` 提示
  - `blob` 响应（验证码图片）直接返回原始数据，避免按业务码处理

## 主要功能模块
- 登录、注册与验证码
  - 登录提交：账号、密码、验证码
  - 注册提交：账号、密码、确认密码、验证码
  - 验证码接口：`GET /api/captcha/new`，前端 `blob` 展示并支持刷新
- 截图生成与图片上传
  - 图片上传走 `/api/upload`，上传成功后更新预览数据
  - 头像、评论图片等均可在页面操作与替换

## 关键文件
- `src/views/common/login/index.vue`：登录/注册页，集成验证码展示与刷新逻辑
- `src/store/user.ts`：用户状态与登录提交逻辑（含验证码校验）
- `src/api/login.ts`：登录、注册、验证码 API 封装
- `src/request/index.ts`：Axios 实例与拦截器（401 处理、blob 直返）
- `vite.config.ts`：Vite 插件、构建与开发代理配置
- `bin/index.js`：根据 `appname` 写入 `.env.*` 并调用 Vite（开发/构建）

## 常见问题
- 开发脚本必须携带 `appname`：`npm run dev -- dy`
- 后端地址变化需修改 `vite.config.ts` 中代理目标
- 验证码刷新：前端会带时间戳参数避免缓存
- 401 未授权：自动清理登录态并跳转登录页

## 许可
本项目供内部或学习交流使用，若需开源协议请自行补充。