浅念
62 lines
3.4 KiB
Markdown
62 lines
3.4 KiB
Markdown
# 管理后台前端 实施计划 (Plan 3)
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: superpowers:subagent-driven-development 或 superpowers:executing-plans。Steps 用 `- [ ]` 跟踪。
|
|
|
|
**Goal:** Vue3 + Element Plus 管理后台,对接 Plan 1 后端(`/api/*`),实现登录 + 询盘列表(筛选/搜索/分页)+ 详情(客户+行为+聊天虚拟滚动)+ 统计 + 导出。
|
|
|
|
**Architecture:** SPA。axios 调后端 REST API(JWT 鉴权)。Pinia 管 auth 状态。Vue Router(+ 守卫)。构建产物 dist 由 nginx 反代(/api→backend, /→dist)。
|
|
|
|
**Tech Stack:** Vue3 + TypeScript + Element Plus + Vite + Pinia + Vue Router + axios + ECharts + vue-virtual-scroller。
|
|
|
|
**关联:** spec §9;后端 Plan 1(`d:/alibb-server/backend`,compose 跑在 `localhost:8080`)。
|
|
|
|
**位置:** `d:/alibb-server/frontend/`(新建,git init)。
|
|
|
|
---
|
|
|
|
## 文件结构
|
|
|
|
```
|
|
d:/alibb-server/frontend/
|
|
src/
|
|
api/{request.ts(client+JWT interceptor), inquiry.ts, stats.ts, auth.ts}
|
|
stores/auth.ts # token + 用户名(localStorage)
|
|
router/index.ts # 路由 + 守卫
|
|
layouts/MainLayout.vue # 侧边栏 + 头部
|
|
views/{Login.vue, InquiryList.vue, InquiryDetail.vue, Stats.vue}
|
|
components/{BehaviorCard.vue, ChatList.vue(虚拟滚动)}
|
|
App.vue / main.ts
|
|
vite.config.ts # 代理 /api → localhost:8080(dev)
|
|
Dockerfile / nginx.conf # 构建 + 反代
|
|
package.json / tsconfig.json
|
|
```
|
|
|
|
---
|
|
|
|
## Tasks
|
|
|
|
1. **项目初始化**:`npm create vue@latest`(Vue3+TS+Router+Pinia),装 Element Plus / axios / ECharts / vue-virtual-scroller。vite dev 代理 `/api→:8080`。git init。
|
|
2. **API client + auth + 登录**:`api/request.ts`(axios,baseURL `/api`,请求拦截加 Bearer,401 跳登录);`stores/auth.ts`(token 存 localStorage);`views/Login.vue`(用户名+密码 → `/api/auth/login` → 存 token → 跳 `/inquiries`)。
|
|
3. **主布局 + 路由守卫**:`MainLayout.vue`(左侧菜单:询盘/统计;头部:用户名/登出);router 守卫(无 token → `/login`)。
|
|
4. **询盘列表** `InquiryList.vue`:Element Plus `el-table` + 顶部筛选(国家/业务员/状态/时间范围 el-date-picker)+ 搜索框 + el-pagination + 导出按钮(调 `/api/export` 下载 CSV)。列:询价单号/买家/国家/业务员/状态/创建时间/消息数。点行跳详情。
|
|
5. **询盘详情** `InquiryDetail.vue`:`el-tabs` 或左右分栏:客户信息卡 + 行为数据卡(产品浏览/有效询盘/RFQ/登录天数/垃圾询盘/最常行业)+ 聊天(`ChatList.vue` vue-virtual-scroller,游标分页加载 `/api/inquiries/:id/messages`,左右气泡按 direction)。
|
|
6. **统计** `Stats.vue`:数字卡片(总数/本月新增)+ ECharts(国家 Top10 饼图 / 业务员柱状图 / 月趋势折线)。调 `/api/stats/overview`。
|
|
7. **导出**:列表页「导出 CSV」按钮 → `window.open('/api/export?...当前筛选', headers JWT)` 或 axios blob 下载。
|
|
8. **构建 + nginx**:`npm run build` → dist;`nginx.conf`(/api → backend:8080,/ → dist);Dockerfile。可选:加到 backend 的 docker-compose(nginx 服务)。
|
|
|
|
---
|
|
|
|
## 完成标准(DoD)
|
|
|
|
- [ ] 登录页 → 输入 admin/admin-password-1234 → 进列表
|
|
- [ ] 列表:筛选(国家/业务员/状态/时间)+ 搜索 + 分页工作
|
|
- [ ] 详情:客户 + 行为 + 聊天(虚拟滚动,游标分页)显示
|
|
- [ ] 统计:卡片 + 3 图表
|
|
- [ ] 导出:按筛选下载 CSV
|
|
- [ ] `npm run build` 成功;nginx 反代后前后端通
|
|
|
|
## 后续
|
|
|
|
- 真实 HTTPS 域名(Plan 4)
|
|
- 聊天全文搜索、客户合并视图、跟进管理
|