113 lines
7.8 KiB
Markdown
113 lines
7.8 KiB
Markdown
# 前端模块说明
|
||
|
||
## 技术栈
|
||
|
||
- Vue 3
|
||
- Vite
|
||
- vue-router
|
||
- Ant Design Vue
|
||
- VueQuill
|
||
|
||
## 模块边界
|
||
|
||
- `src/main.ts`：Vue 应用入口，注册路由和 Ant Design Vue。
|
||
- `src/config/app.ts`：前端应用配置，应用名默认“自在福田”，支持 `VITE_APP_NAME` 覆盖。
|
||
- `src/router/index.ts`：路由表，按后端功能模块划分。
|
||
- `src/layouts/AdminLayout.vue`：后台主布局。
|
||
- `src/views/login/LoginPage.vue`：登录页，包含用户名、密码、验证码和友好错误提示。
|
||
- `src/views/temples/TempleManagement.vue`：寺院管理页。
|
||
- `src/views/products/ProductManagement.vue`：商品管理列表页，按当前寺院隔离。
|
||
- `src/views/products/ProductDetail.vue`：商品新建和编辑页，按当前寺院隔离。
|
||
- `src/views/feature-icons/FeatureIconManagement.vue`：图标管理页，按当前寺院隔离，支持同步其他寺院图标。
|
||
- `src/views/ad-slots/AdSlotManagement.vue`：广告位管理页，按当前寺院隔离，只维护广告位置定义。
|
||
- `src/views/ads/AdManagement.vue`：广告管理页，按当前寺院隔离，广告内容绑定到广告位。
|
||
- `src/views/orders/OrderManagement.vue`：订单管理页，按当前寺院隔离。
|
||
- `src/views/rituals/RitualManagement.vue`：法事管理页，按当前寺院隔离。
|
||
- `src/views/users/UserManagement.vue`：用户管理页。
|
||
- `src/api/http.ts`：统一请求封装。
|
||
- `src/api/auth.ts`：登录认证、验证码、当前用户和退出登录接口封装。
|
||
- `src/api/users.ts`：用户接口封装。
|
||
- `src/api/temples.ts`：寺院接口封装。
|
||
- `src/api/products.ts`：商品接口封装。
|
||
- `src/api/featureIcons.ts`：图标管理接口封装。
|
||
- `src/api/adSlots.ts`：广告位管理接口封装。
|
||
- `src/api/ads.ts`：广告管理接口封装。
|
||
- `src/api/uploads.ts`：图片上传接口封装。
|
||
- `src/api/orders.ts`：订单接口封装。
|
||
- `src/api/payments.ts`：微信支付接口封装。
|
||
- `src/api/rituals.ts`：法事接口封装。
|
||
|
||
## 路由约定
|
||
|
||
```text
|
||
/login 静态登录页
|
||
/temples 寺院管理
|
||
/products 商品管理
|
||
/products/create 新建商品
|
||
/products/:productId/edit 编辑商品
|
||
/feature-icons 图标管理
|
||
/ad-slots 广告位管理
|
||
/ads 广告管理
|
||
/orders 订单管理
|
||
/ritual-services 法事管理
|
||
/users 用户管理
|
||
```
|
||
|
||
商品、订单、法事页面使用当前寺院上下文访问数据。当前寺院由后台顶部选择器维护，`src/api/http.ts` 会把 `currentTempleId` 写入请求头 `X-Temple-Id`。
|
||
图标、广告位和广告页面也使用当前寺院上下文访问数据；广告位表示首页广告、详情页广告、支付页广告等位置，广告内容必须绑定到广告位；图标同步功能从其他寺院读取图标后复制到当前寺院。
|
||
|
||
后台页面通过路由守卫检查登录状态；认证令牌只存在后端设置的 HttpOnly Cookie 中，前端 localStorage 只缓存当前用户展示信息，不保存 token。
|
||
|
||
## 用户管理页面
|
||
|
||
用户管理页字段与后端用户模型保持一致：
|
||
|
||
```text
|
||
注册时间、姓名、手机号、昵称、头像、是否管理员、总消费
|
||
```
|
||
|
||
注册时间只展示，不在表单中编辑。
|
||
|
||
## 商品管理页面
|
||
|
||
商品列表只展示：
|
||
|
||
```text
|
||
商品名称、简称、销量、首页展示、上架时间、开售时间、商品状态、修改删除操作
|
||
```
|
||
|
||
商品新建和编辑打开独立页面，路由 `meta.module` 仍保持 `products`，让商品管理菜单在详情页高亮。商品详情编辑包含基础信息、商品描述、时间与展示、商品规格、商品详情、微信分享配置。商品封面和商品图片使用上传组件，上传后保存 OSS 返回的图片 URL。商品规格在表格中行编辑保存；商品详情使用 VueQuill 富文本编辑器，保存 HTML 内容。
|
||
|
||
## 依赖约定
|
||
|
||
- 新增前端依赖时只写入 `package.json`，由用户执行 `pnpm install`。
|
||
- `node_modules` 不提交。
|
||
- Vite 构建通过路由懒加载和 `manualChunks` 拆分 Vue、Ant Design Vue、图标、富文本编辑器和公共依赖；Ant Design Vue 组件在 `src/main.ts` 使用 `ant-design-vue/es/*` 子路径导入以支持 tree shaking。
|
||
|
||
## 验证
|
||
|
||
安装依赖后优先执行：
|
||
|
||
```bash
|
||
pnpm typecheck
|
||
pnpm build
|
||
```
|
||
|
||
## 修改记录
|
||
|
||
- 2026-07-22：用户管理页同步后端新用户模型，表格展示注册时间、姓名、手机号、昵称、头像、是否管理员、总消费，表单支持编辑除注册时间外的字段。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|
||
- 2026-07-22：前端应用名改为配置化，默认“自在福田”；后台主布局新增路由面包屑，面包屑来源为路由 `meta.title`。验证：`pnpm typecheck` 和 `pnpm build` 通过，构建仅保留 Ant Design Vue 首包体积提示。
|
||
- 2026-07-22：用户管理页新增手机号查询栏，`src/api/users.ts` 支持向 `/users` 传递 `phone` 查询参数。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|
||
- 2026-07-22：新增寺院、商品、订单、法事前端模块，后台布局新增模块菜单和当前寺院选择器，隔离模块请求自动携带 `X-Temple-Id`。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|
||
- 2026-07-23：商品管理页同步新的商品详情模型；列表调整为商品名称、简称、销量、首页展示、上架时间、开售时间、商品状态和操作，编辑弹窗增加商品图片、时间展示、规格行编辑、详情编辑和微信分享配置。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|
||
- 2026-07-23：商品新建和编辑从列表弹窗调整为独立页面，新增 `/products/create` 和 `/products/:productId/edit` 路由，详情页保持商品管理菜单高亮。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|
||
- 2026-07-23：商品详情页将商品封面、商品图片改为上传组件，新增 `src/api/uploads.ts` 调用后端 `/uploads/images`，上传成功后保存 OSS 图片 URL。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|
||
- 2026-07-23：商品详情编辑器从内置 `contenteditable` 替换为 VueQuill，`package.json` 新增 `@vueup/vue-quill` 依赖并保存 HTML 内容。验证：待安装依赖后执行。
|
||
- 2026-07-23：接入登录功能，登录页支持用户名、密码、服务端验证码、账号自动聚焦、账号实时 trim、密码显示/隐藏、提交 loading 和友好错误提示；新增 `src/api/auth.ts` 与路由登录守卫，退出登录调用后端失效会话。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|
||
- 2026-07-23：商品编辑基础信息新增商品描述字段，前端商品 API 类型和商品编辑表单同步 `description`。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|
||
- 2026-07-23：订单管理页新增微信 JSAPI 预下单入口，新增 `src/api/payments.ts` 调用 `/payments/wechat/jsapi`，用于生成支付参数；实际微信调起仍需用户端页面和 openid。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|
||
- 2026-07-27：移除 Todo 占位页面，删除 `/todos` 前端路由和侧边栏菜单入口。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|
||
- 2026-07-27：新增图标管理和广告位管理页面、API、路由和侧边栏入口；图标支持上传 120px * 120px 提示、链接/应用类型切换、商品选择和同步其他寺院图标。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|
||
- 2026-07-27：广告模型拆分为广告位和广告，广告位页面改为位置配置，新增广告管理 API、页面、路由和菜单入口，广告内容绑定广告位并支持图片上传与链接/应用跳转。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|
||
- 2026-07-27：优化前端构建包体积，路由页面改为懒加载，Ant Design Vue 改为组件级 ES 导入，Vite 增加 `manualChunks` 拆分常用依赖包并设置合理体积提示阈值。验证：`pnpm typecheck` 和 `pnpm build` 通过。
|