# my_shop_front

**Repository Path**: lwrong/my_shop_front

## Basic Information

- **Project Name**: my_shop_front
- **Description**: 一个专注于前端开发的开源项目，旨在为在线商店提供高效、美观的用户界面，支持多种前端技术和框架。
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-26
- **Last Updated**: 2026-04-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# My Shop 用户管理后台

基于 **Vue 3 + TypeScript + Vite + Pinia + Element Plus** 搭建，当前已完成 `my_shop` 仓库中 **shop-usercenter** 相关管理能力的前端对接。

---

## 1. 项目定位

这是一个企业后台前端项目的起步版本，当前先落地“**用户管理平台**”这一子系统，后续可以在同一套基础架构上继续扩展：

- 用户中心
- 权限中心
- 商品中心
- 订单中心
- 营销中心
- 运营平台等

当前仓库已经具备多环境配置、统一请求封装、登录鉴权、后台布局、基础模块拆分能力，可作为后续多平台扩展的母版。

---

## 2. 当前已实现能力

### 2.1 登录与注册
- 账号密码登录
- 手机验证码登录
- 用户注册
- 登录后自动缓存 token
- 请求自动携带登录态

### 2.2 用户管理
- 用户变更列表
- 按用户 ID 查询详情
- 按手机号查询详情
- 批量查询用户
- 为用户分配角色

### 2.3 角色管理
- 角色列表查询
- 创建角色
- 编辑角色
- 删除角色
- 为角色分配权限

### 2.4 权限管理
- 权限列表查询
- 创建权限
- 编辑权限
- 删除权限

### 2.5 菜单管理
- 菜单树展示
- 创建菜单
- 编辑菜单
- 删除菜单
- 为角色分配菜单

---

## 3. 当前模块划分

### 3.1 目录结构

```text
src/
├─ config/         # 应用级配置读取
├─ layout/         # 后台整体布局
├─ router/         # 路由配置
├─ stores/         # Pinia 状态管理
├─ utils/          # 工具方法
├─ views/          # 页面模块
│  ├─ dashboard/   # 工作台
│  ├─ login/       # 登录页
│  ├─ user/        # 用户管理
│  ├─ role/        # 角色管理
│  ├─ permission/  # 权限管理
│  └─ menu/        # 菜单管理
├─ api.ts          # 当前统一接口封装与类型定义
├─ constants.ts    # 常量、菜单、枚举项
├─ App.vue
└─ main.ts
```

### 3.2 模块职责说明

#### `src/config`
统一读取环境变量，管理：
- 应用标题
- 是否开启代理
- API 基础地址
- 请求超时时间

#### `src/router`
负责：
- 登录页路由
- 主布局路由
- 登录态前置守卫
- 页面标题切换

#### `src/stores`
当前主要是 `auth`：
- token 持久化
- 登录状态判断
- 登录 / 退出登录

#### `src/views`
每个业务页面一个目录，当前按“后台功能模块”拆分：
- `dashboard`：工作台
- `login`：登录注册
- `user`：用户查询与用户角色分配
- `role`：角色 CRUD + 角色权限分配
- `permission`：权限 CRUD
- `menu`：菜单 CRUD + 角色菜单分配

#### `src/api.ts`
当前阶段为了快速推进，接口和类型先集中在一个文件中，后续建议继续拆分为：

```text
src/api/
├─ auth.ts
├─ user.ts
├─ role.ts
├─ permission.ts
└─ menu.ts

src/types/
├─ auth.ts
├─ user.ts
├─ role.ts
├─ permission.ts
└─ menu.ts
```

---

## 4. 接口对接说明

当前主要对接 `my_shop` 仓库中的：
- `shop-usercenter`

已接入的接口大类：
- `/user/**`
- `/api/v1/users/**`
- `/api/roles/**`
- `/api/permissions/**`
- `/api/menus/**`

### 4.1 登录态说明
登录成功后，后端返回的 token 会被缓存到本地，并自动放入请求头：

```http
token: <登录返回token>
Authorization: <登录返回token>
```

> 当前以后端实际需求为准，**核心登录态请求头是 `token`**，同时前端保留了 `Authorization` 兼容。

---

## 5. 环境配置

项目支持多环境地址切换。

### 5.1 环境文件
- `.env.development`：本地开发
- `.env.test`：测试环境
- `.env.production`：生产环境
- `.env.example`：示例模板

### 5.2 关键变量

```env
VITE_APP_TITLE=My Shop 用户管理后台
VITE_USE_PROXY=true
VITE_API_BASE_URL=
VITE_API_PROXY_TARGET=http://127.0.0.1:9002
VITE_REQUEST_TIMEOUT=15000
```

变量含义：

- `VITE_APP_TITLE`：页面标题/系统名称
- `VITE_USE_PROXY`：是否启用 Vite 代理
- `VITE_API_BASE_URL`：接口基础地址
- `VITE_API_PROXY_TARGET`：本地开发代理目标地址
- `VITE_REQUEST_TIMEOUT`：请求超时时间

### 5.3 推荐配置方式

#### 本地联调后端

```env
VITE_USE_PROXY=true
VITE_API_BASE_URL=
VITE_API_PROXY_TARGET=http://127.0.0.1:9002
```

#### 测试 / 生产环境

```env
VITE_USE_PROXY=false
VITE_API_BASE_URL=https://your-api-domain.com
```

---

## 6. 怎么切换环境

### 本地开发
```bash
npm run dev
```
读取：
- `.env.development`

### 测试环境启动
```bash
npm run dev:test
```
读取：
- `.env.test`

### 生产构建
```bash
npm run build:prod
```
读取：
- `.env.production`

### 其他构建命令
```bash
npm run build
npm run build:test
```

> 修改 `.env.*` 后需要 **重启 dev 服务** 才会生效。

---

## 7. 启动方式

### 安装依赖
```bash
npm install
```

### 启动本地开发
```bash
npm run dev
```

### 启动测试模式
```bash
npm run dev:test
```

### 打包
```bash
npm run build
npm run build:test
npm run build:prod
```

---

## 8. 当前注意事项

### 8.1 token 请求头
后端要求登录态通过 `token` 传递，不是只传 `Authorization`。

当前代码已经自动处理，无需业务层重复设置。

### 8.2 超级管理员角色不能通过普通分配接口下发
接口：
- `roles/assign`

当前不支持给用户分配“内置超级管理员权限”，所以前端已在“用户分配角色”弹窗中将以下角色移除：
- `admin`
- `super_admin`
- `super-admin`
- `超级管理员`

### 8.3 菜单分配是“直接提交覆盖”
当前后端只提供了“为角色分配菜单”的提交接口，没有提供“查询角色已分配菜单”接口。

因此现在菜单分配页的行为是：
- 手动勾选
- 直接覆盖提交

这一点在真实生产中建议后端补充“查询角色菜单关系”接口。

### 8.4 当前 API 与类型还未完全拆模块
目前 `src/api.ts` 同时承担：
- 类型定义
- axios 封装
- 各模块 API

适合当前起步阶段，但当平台继续扩展时建议尽快拆分。

### 8.5 文案可能存在历史编码问题
由于之前部分文件曾出现过编码异常，如果发现界面中文异常，优先检查：
- 文件编码是否为 UTF-8
- 终端/编辑器编码设置

---

## 9. 后续建议

建议下一步按优先级推进：

1. **拆分 API 与类型目录**
2. **加入统一异常页 / 401 处理 / 无权限页**
3. **补充动态菜单与权限点控制**
4. **引入更规范的表单校验与弹窗组件封装**
5. **按平台拆分多子系统入口**
6. **做运行时配置（同一包多环境部署）**

---

## 10. 当前适合作为什么

当前仓库已经适合作为：

- 企业后台脚手架初版
- 用户管理平台基础模板
- 后续多平台前端统一母版
- 与 `my_shop` 微服务体系对接的后台前端起点

如果后续继续扩展多个平台，建议在这个仓库中沉淀：
- 通用布局
- 通用请求层
- 通用权限体系
- 通用表格/表单组件
- 多服务地址治理能力

---

## 11. 维护建议

每次新增模块时，建议同步更新：
- `README.md`
- 环境变量说明
- 接口对接清单
- 页面路由说明
- 权限与角色约束说明

这样后面多人协作时会轻松很多。