管理后台前端实施计划 (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

项目初始化:npm create vue@latest(Vue3+TS+Router+Pinia),装 Element Plus / axios / ECharts / vue-virtual-scroller。vite dev 代理 /api→:8080。git init。
API client + auth + 登录:api/request.ts(axios,baseURL /api,请求拦截加 Bearer,401 跳登录);stores/auth.ts(token 存 localStorage);views/Login.vue(用户名+密码 → /api/auth/login → 存 token → 跳 /inquiries)。
主布局 + 路由守卫:MainLayout.vue(左侧菜单:询盘/统计;头部:用户名/登出);router 守卫(无 token → /login)。
询盘列表 InquiryList.vue:Element Plus el-table + 顶部筛选(国家/业务员/状态/时间范围 el-date-picker)+ 搜索框 + el-pagination + 导出按钮(调 /api/export 下载 CSV)。列:询价单号/买家/国家/业务员/状态/创建时间/消息数。点行跳详情。
询盘详情 InquiryDetail.vue:el-tabs 或左右分栏:客户信息卡 + 行为数据卡(产品浏览/有效询盘/RFQ/登录天数/垃圾询盘/最常行业)+ 聊天(ChatList.vue vue-virtual-scroller,游标分页加载 /api/inquiries/:id/messages,左右气泡按 direction)。
统计 Stats.vue:数字卡片(总数/本月新增)+ ECharts(国家 Top10 饼图 / 业务员柱状图 / 月趋势折线)。调 /api/stats/overview。
导出:列表页「导出 CSV」按钮 → window.open('/api/export?...当前筛选', headers JWT) 或 axios blob 下载。
构建 + 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)
聊天全文搜索、客户合并视图、跟进管理

3.4 KiB Raw Blame History

管理后台前端 实施计划 (Plan 3)

文件结构

Tasks

完成标准(DoD)

后续

3.4 KiB

Raw Blame History

管理后台前端实施计划 (Plan 3)