go-dy/README.md

截图生成模板（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 管理多应用配置，示例：

  {
    "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 未授权：自动清理登录态并跳转登录页

许可

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