前端模块说明

技术栈

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：法事接口封装。

路由约定

/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。

用户管理页面

用户管理页字段与后端用户模型保持一致：

注册时间、姓名、手机号、昵称、头像、是否管理员、总消费

注册时间只展示，不在表单中编辑。

商品管理页面

商品列表只展示：

商品名称、简称、销量、首页展示、上架时间、开售时间、商品状态、修改删除操作

商品新建和编辑打开独立页面，路由 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。

验证

安装依赖后优先执行：

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 通过。

7.8 KiB Raw Blame History Unescape Escape