# 管理后台前端 实施计划 (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)
- 聊天全文搜索、客户合并视图、跟进管理