diff --git a/MIGRATION-VUE3.md b/MIGRATION-VUE3.md new file mode 100644 index 00000000..ca93350e --- /dev/null +++ b/MIGRATION-VUE3.md @@ -0,0 +1,200 @@ +# Lilishop UI — Vue 3 迁移与上线前检查清单 + +四个子项目（buyer / seller / manager / im）已完成 **Vue 3 + Element Plus** 迁移，并完成依赖小版本对齐。本文档供上线前统一回归使用。 + +## 技术栈（四端一致） + +| 类别 | 包 | 版本（package.json） | +|------|-----|---------------------| +| 框架 | vue | ^3.5.35 | +| 编译 | @vue/compiler-sfc | ^3.5.35 | +| 路由 | vue-router | ^4.6.4 | +| 状态 | vuex | ^4.1.0 | +| UI | element-plus | ^2.14.1 | +| 图标 | @element-plus/icons-vue | ^2.3.2 | +| 请求 | axios | ^1.7.9 | +| 兼容 | core-js | ^3.49.0 | +| 构建 | @vue/cli-service | ^5.0.9 | + +> 使用 `^` 范围，实际安装版本以各目录 `yarn.lock` 为准。 +> 要求 **Node >= 16**，包管理统一 **yarn**。 + +## 本地启动 + +```bash +# 买家端 +cd buyer && yarn install && yarn dev # 端口 10000 + +# 商家端 +cd seller && yarn install && yarn dev # 端口 10002 + +# 管理端 +cd manager && yarn install && yarn dev # 端口 10003 + +# IM 客服 +cd im && yarn install && yarn dev # 端口 8000 +``` + +生产构建（上线前必跑）： + +```bash +cd buyer && yarn build +cd seller && yarn build +cd manager && yarn build +cd im && yarn build +``` + +--- + +## 一、通用检查（四端都要过） + +### 1. 认证与请求（axios 1.x 重点） + +各端请求封装位置： + +| 端 | 文件 | +|----|------| +| buyer | `buyer/src/plugins/request.js` | +| seller | `seller/src/libs/axios.js` | +| manager | `manager/src/libs/axios.js` | +| im | `im/src/utils/request.js` | + +- [ ] **登录**：账号密码登录成功，token 写入正常 +- [ ] **登出**：清除 token，跳转登录页 +- [ ] **401**：token 过期后跳转登录 / 刷新 token（buyer/manager/seller 有刷新逻辑） +- [ ] **403**：无权限时提示文案正确、不白屏 +- [ ] **400 / 5xx**：接口报错能弹出 `Message` / `ElMessage` / `Notification` +- [ ] **网络超时**：断网或超时后有错误提示，页面不卡死 +- [ ] **GET 带参**：列表筛选、分页参数序列化正常 +- [ ] **POST JSON**：`Content-Type: application/json` 请求体正确 +- [ ] **POST 表单**：`application/x-www-form-urlencoded` 提交正常（im 等） + +### 2. Element Plus UI（2.6 → 2.14 重点） + +- [ ] **表格** `el-table`：列展示、排序、空数据、加载态 +- [ ] **分页** `el-pagination`：翻页、每页条数切换 +- [ ] **表单** `el-form`：必填校验、错误提示位置 +- [ ] **弹窗** `el-dialog` / `ElMessageBox`：打开、确认、取消、关闭 +- [ ] **下拉** `el-select` / `el-dropdown`：选项、点击外部关闭 +- [ ] **消息** `ElMessage` / `$Message` 兼容层：success / error / warning +- [ ] **加载** `ElLoading` / `v-loading`：请求期间遮罩正常消失 +- [ ] **日期** `el-date-picker`：选择、清空、范围选择 +- [ ] **上传** `el-upload`：选文件、进度、成功 / 失败回调 + +### 3. 路由与页面 + +- [ ] 浏览器 **刷新** 当前路由不 404（history 模式 + 服务端配置） +- [ ] **动态路由** 加载正常（seller / manager 菜单权限路由） +- [ ] 浏览器 **前进 / 后退** 正常 +- [ ] 各端 **404 页** 可回到首页 + +### 4. 构建与部署 + +- [ ] 四端 `yarn build` 无 error（warning 可记录，不阻断） +- [ ] 生产环境 API 地址配置正确（`config` / 环境变量） +- [ ] 静态资源 `publicPath` 与 Nginx / CDN 路径一致 +- [ ] gzip 压缩包（如有）可正常访问 + +--- + +## 二、分端专项检查 + +### Buyer 买家端（10000） + +详见 [buyer/MIGRATION-VUE3.md](./buyer/MIGRATION-VUE3.md) + +- [ ] 首页装修模块渲染（轮播、商品列表、秒杀区等） +- [ ] 商品详情：规格选择、加购、收藏、`el-image` 预览 +- [ ] 购物车 → 结算 → 支付流程 +- [ ] 用户中心：订单列表、地址、优惠券、售后 +- [ ] 登录 / 注册 / 忘记密码 +- [ ] 店铺入驻、商户页 +- [ ] 地图（高德 `@amap/amap-jsapi-loader`）定位与选点 +- [ ] 侧边栏 `el-menu`、头部 `el-dropdown`、动态图标 `iconMap.js` + +### Seller 商家端（10002） + +详见 [seller/MIGRATION-VUE3.md](./seller/MIGRATION-VUE3.md) + +- [ ] 商家登录、店铺信息 +- [ ] 商品发布三步流程（`goodsOperation` 步骤条） +- [ ] 订单管理：发货、退款、详情 +- [ ] 促销 / 分销 / 统计图表（`@antv/g2`） +- [ ] 页面装修（wap / modelList，从 manager 同步部分） +- [ ] 图片懒加载 `vue-lazyload` +- [ ] Excel 导出 `vue-json-excel` + +### Manager 管理端（10003） + +详见 [manager/MIGRATION-VUE3.md](./manager/MIGRATION-VUE3.md) + +- [ ] 管理员登录、权限菜单、动态路由 +- [ ] 系统设置（`sys/setting-manage` 各 Tab） +- [ ] 菜单 / 部门管理 +- [ ] 页面装修（PC + H5） +- [ ] 文章管理 +- [ ] 商品 / 订单 / 会员 / 促销等核心列表 CRUD +- [ ] 富文本 TinyMCE 编辑、图片上传 +- [ ] 多语言 `vue-i18n` 切换（如有启用） + +### IM 客服端（8000） + +详见 [im/MIGRATION-VUE3.md](./im/MIGRATION-VUE3.md) + +- [ ] 带 token 参数进入会话页 +- [ ] 对话列表加载、切换会话、未读数 +- [ ] 发送文字、表情、图片消息 +- [ ] 商品 / 订单卡片链接跳转（`linkToGoods` / `linkToOrders`） +- [ ] 右键菜单（复制、撤回、删除等） +- [ ] WebSocket 连接 / 断线重连 / 新消息通知 +- [ ] 最近浏览、订单列表侧栏（商家场景） +- [ ] 用户名片弹层 `$user()` + +--- + +## 三、已知可忽略项 + +| 项 | 说明 | +|----|------| +| `vue-awesome-swiper` peer warning | 历史依赖，Vue 3 下仍有 peer 告警，功能正常可暂忽略 | +| im 内 `` | Element Plus 无字体图标，部分旧图标可能不显示，不影响核心功能 | +| `vue-prism-editor@2.0.0-alpha.2` | im 代码块编辑器刻意锁定 alpha 版 | +| 打包体积 warning | chunk-vendors 偏大，属 Element Plus 全量引入，可后续做按需优化 | + +--- + +## 四、问题记录模板 + +上线测试时建议按端记录： + +```markdown +### [端名] 问题标题 +- 页面/路由： +- 操作步骤： +- 预期： +- 实际： +- 控制台报错： +- 优先级：P0 / P1 / P2 +``` + +--- + +## 五、子项目文档索引 + +| 端 | 迁移说明 | +|----|----------| +| buyer | [buyer/MIGRATION-VUE3.md](./buyer/MIGRATION-VUE3.md) | +| seller | [seller/MIGRATION-VUE3.md](./seller/MIGRATION-VUE3.md) | +| manager | [manager/MIGRATION-VUE3.md](./manager/MIGRATION-VUE3.md) | +| im | [im/MIGRATION-VUE3.md](./im/MIGRATION-VUE3.md) | + +--- + +## 六、建议上线顺序 + +1. **manager**（后台配置源头） +2. **seller**（商家经营） +3. **buyer**（C 端流量最大） +4. **im**（客服，依赖前后端 WebSocket） + +每上一端，至少完成本文 **第一节通用检查** + 对应 **第二节分端检查** 后再切下一端。 diff --git a/buyer/MIGRATION-VUE3.md b/buyer/MIGRATION-VUE3.md index 566e1b4a..dc9071d1 100644 --- a/buyer/MIGRATION-VUE3.md +++ b/buyer/MIGRATION-VUE3.md @@ -37,3 +37,7 @@ yarn build - `scripts/replace-icon.js` — 静态 `` → `el-icon` - `scripts/fix-el-icon-click.js` — 修复 `@click` 绑定 - `scripts/fix-broken-tags.js` — 闭合标签修复 + +## 上线前检查 + +四端统一清单（认证、axios、Element Plus、分端专项）：[../MIGRATION-VUE3.md](../MIGRATION-VUE3.md) diff --git a/im/MIGRATION-VUE3.md b/im/MIGRATION-VUE3.md new file mode 100644 index 00000000..c66def98 --- /dev/null +++ b/im/MIGRATION-VUE3.md @@ -0,0 +1,32 @@ +# IM 客服端 Vue 3 迁移说明 + +## 技术栈 + +- Vue 3.5 + Vue Router 4 + Vuex 4 +- Element Plus（替代 element-ui） +- 自研右键菜单 `src/plugins/contextmenu.js`（替代 vue-contextmenujs） +- `vue-virtual-scroller@3`、`vue-cropper@1.x`、`vue-prism-editor@2.0.0-alpha.2` + +## 启动 + +```bash +cd im +yarn install +yarn dev # 端口 8000 +yarn build +``` + +## 迁移要点 + +1. **入口** `src/main.js` — `createApp`，全局过滤器 `$filters` +2. **路由** `createRouter` + `createWebHistory`，404 路由 `/:pathMatch(.*)*` +3. **通知** `im-server/event/talk.js` 通过 `app-bridge` 发 `ElNotification`，避免循环引用 +4. **用户卡片** `$user()` 插件用 `createApp` 挂载 +5. **指令** `v-focus` / `v-paste` / `v-drag` / `v-outside` 已改为 Vue 3 钩子 +6. **SVG** `svg-sprite-loader` + `svg-icon` 全局组件 +7. **生命周期** `destroyed` → `beforeUnmount`；`$set` / `$delete` 已移除 + +## 上线前检查 + +统一清单见仓库根目录：[../MIGRATION-VUE3.md](../MIGRATION-VUE3.md) +IM 专项见该文档 **「IM 客服端」** 一节。 diff --git a/manager/MIGRATION-VUE3.md b/manager/MIGRATION-VUE3.md index 4d127bca..3bafde73 100644 --- a/manager/MIGRATION-VUE3.md +++ b/manager/MIGRATION-VUE3.md @@ -56,4 +56,8 @@ yarn install yarn run dev ``` -Node **18+**，包管理统一 **yarn**。 +Node **16+**，包管理统一 **yarn**。 + +## 上线前检查 + +四端统一清单（认证、axios、Element Plus、分端专项）：[../MIGRATION-VUE3.md](../MIGRATION-VUE3.md) diff --git a/manager/src/api/finance.js b/manager/src/api/finance.js new file mode 100644 index 00000000..ce721782 --- /dev/null +++ b/manager/src/api/finance.js @@ -0,0 +1,75 @@ +/** + * 管理端财务中心 API。 + * 导出类接口返回 blob，需配合 downloadBlob 触发浏览器下载。 + */ +import { getRequest, postBlobRequest } from "@/libs/axios"; + +/** 导出支付流水（筛选条件同 paymentLog 列表） */ +export const exportPaymentFlow = (params) => { + return getRequest("/finance/payment-flow/export", params, "blob"); +}; + +/** 导出退款流水 */ +export const exportRefundFlow = (params) => { + return getRequest("/finance/refund-flow/export", params, "blob"); +}; + +/** 导出钱包流水 */ +export const exportWalletLog = (params) => { + return getRequest("/finance/wallet-log/export", params, "blob"); +}; + +/** 导出结算单列表（仅汇总行） */ +export const exportBillList = (params) => { + return getRequest("/finance/bill-list/export", params, "blob"); +}; + +/** 批量下载结算单 ZIP */ +export const batchDownloadBills = (billIds) => { + return postBlobRequest("/finance/bill/batchDownload", billIds); +}; + +/** 平台经营报表查询 */ +export const getPlatformReport = (params) => { + return getRequest("/finance/report/platform", params); +}; + +/** 导出平台经营报表 */ +export const exportPlatformReport = (params) => { + return getRequest("/finance/report/platform/export", params, "blob"); +}; + +/** 店铺结算汇总查询 */ +export const getStoreSettlementReport = (params) => { + return getRequest("/finance/report/store-settlement", params); +}; + +/** 导出店铺结算汇总 */ +export const exportStoreSettlementReport = (params) => { + return getRequest("/finance/report/store-settlement/export", params, "blob"); +}; + +/** 支付方式汇总查询 */ +export const getPaymentMethodReport = (params) => { + return getRequest("/finance/report/payment-method", params); +}; + +/** 导出支付方式汇总 */ +export const exportPaymentMethodReport = (params) => { + return getRequest("/finance/report/payment-method/export", params, "blob"); +}; + +/** 结算台账查询 */ +export const getSettlementLedger = (params) => { + return getRequest("/finance/report/settlement-ledger", params); +}; + +/** 导出结算台账 */ +export const exportSettlementLedger = (params) => { + return getRequest("/finance/report/settlement-ledger/export", params, "blob"); +}; + +/** 退款流水分页（财务中心页面复用） */ +export const refundLogPage = (params) => { + return getRequest("/order/refundLog", params); +}; diff --git a/manager/src/libs/axios.js b/manager/src/libs/axios.js index ce08d01c..4113949e 100644 --- a/manager/src/libs/axios.js +++ b/manager/src/libs/axios.js @@ -189,6 +189,20 @@ export const getRequest = (url, params, resBlob) => { }; +export const postBlobRequest = (url, data) => { + let accessToken = getStore("accessToken"); + return service({ + method: "post", + url: `${url}`, + data: data, + responseType: "blob", + headers: { + "Content-Type": "application/json", + accessToken: accessToken + } + }); +}; + export const postRequest = (url, params, headers) => { let accessToken = getStore("accessToken"); return service({ diff --git a/manager/src/router/router.js b/manager/src/router/router.js index 5c0e9a89..589e178d 100644 --- a/manager/src/router/router.js +++ b/manager/src/router/router.js @@ -348,6 +348,42 @@ export const otherRouter = { title: "查看直播", name: "live-detail", component: () => import("@/views/promotions/live/live-detail.vue") + }, + { + path: "finance-platform-report", + title: "平台经营报表", + name: "finance-platform-report", + component: () => import("@/views/finance/platform-report.vue") + }, + { + path: "finance-store-settlement", + title: "店铺结算汇总", + name: "finance-store-settlement", + component: () => import("@/views/finance/store-settlement.vue") + }, + { + path: "finance-payment-method", + title: "支付方式汇总", + name: "finance-payment-method", + component: () => import("@/views/finance/payment-method.vue") + }, + { + path: "finance-settlement-ledger", + title: "结算台账", + name: "finance-settlement-ledger", + component: () => import("@/views/finance/settlement-ledger.vue") + }, + { + path: "finance-refund-log", + title: "退款流水", + name: "finance-refund-log", + component: () => import("@/views/finance/refundLog.vue") + }, + { + path: "finance-wallet-log", + title: "钱包流水", + name: "finance-wallet-log", + component: () => import("@/views/finance/walletLog.vue") } ] }; diff --git a/manager/src/utils/downloadBlob.js b/manager/src/utils/downloadBlob.js new file mode 100644 index 00000000..291d85e2 --- /dev/null +++ b/manager/src/utils/downloadBlob.js @@ -0,0 +1,15 @@ +/** + * 触发浏览器下载 blob 响应 + */ +export function downloadBlob(blob, filename) { + if (!blob) return; + const link = document.createElement("a"); + link.style.display = "none"; + const url = window.URL.createObjectURL(new Blob([blob])); + link.href = url; + link.download = filename; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + window.URL.revokeObjectURL(url); +} diff --git a/manager/src/utils/filters.js b/manager/src/utils/filters.js index 5855744c..16dd6008 100644 --- a/manager/src/utils/filters.js +++ b/manager/src/utils/filters.js @@ -184,8 +184,6 @@ export function unixSellerBillStatus(status_code) { return '已出账' case 'CHECK': return '已对账' - case 'EXAMINE': - return '已审核' case 'PAY': return '已结算' case 'COMPLETE': diff --git a/manager/src/views/finance/payment-method.vue b/manager/src/views/finance/payment-method.vue new file mode 100644 index 00000000..941856a8 --- /dev/null +++ b/manager/src/views/finance/payment-method.vue @@ -0,0 +1,62 @@ + + + diff --git a/manager/src/views/finance/platform-report.vue b/manager/src/views/finance/platform-report.vue new file mode 100644 index 00000000..0d9d4c36 --- /dev/null +++ b/manager/src/views/finance/platform-report.vue @@ -0,0 +1,82 @@ + + + diff --git a/manager/src/views/finance/refundLog.vue b/manager/src/views/finance/refundLog.vue new file mode 100644 index 00000000..2fa58e78 --- /dev/null +++ b/manager/src/views/finance/refundLog.vue @@ -0,0 +1,77 @@ + + + diff --git a/manager/src/views/finance/settlement-ledger.vue b/manager/src/views/finance/settlement-ledger.vue new file mode 100644 index 00000000..a0b9d4df --- /dev/null +++ b/manager/src/views/finance/settlement-ledger.vue @@ -0,0 +1,46 @@ + + + diff --git a/manager/src/views/finance/store-settlement.vue b/manager/src/views/finance/store-settlement.vue new file mode 100644 index 00000000..fd438706 --- /dev/null +++ b/manager/src/views/finance/store-settlement.vue @@ -0,0 +1,64 @@ + + + diff --git a/manager/src/views/finance/walletLog.vue b/manager/src/views/finance/walletLog.vue new file mode 100644 index 00000000..f8c9966b --- /dev/null +++ b/manager/src/views/finance/walletLog.vue @@ -0,0 +1,94 @@ + + + diff --git a/manager/src/views/order/flow/paymentLog.vue b/manager/src/views/order/flow/paymentLog.vue index b91681d9..60d9b148 100644 --- a/manager/src/views/order/flow/paymentLog.vue +++ b/manager/src/views/order/flow/paymentLog.vue @@ -34,6 +34,7 @@ 搜索 + 导出 @@ -113,6 +114,8 @@