BBC 8.0 前端开发概览

BBC 8.0 PC UI 基于 Vue 3、TypeScript、Vite 5、Pinia、TDesign Vue Next 和 pnpm workspace 开发。一个仓库包含买家 PC 端、商家管理端、平台管理端，以及三端复用的运行时和业务组件。

本文只描述 BBC 8.0 PC UI 源码。移动端是独立工程；后端服务、数据库和业务规则也有各自的事实来源，不能从前端目录反推。

技术栈

类别	当前技术
应用框架	Vue 3
开发语言	TypeScript
构建工具	Vite 5
状态管理	Pinia
路由	Vue Router 4
UI 组件库	TDesign Vue Next
工作区和包管理	pnpm workspace，`pnpm@11.7.0`
代码检查	ESLint、Prettier、vue-tsc、语言包检查脚本

这些版本应以根 package.json 和 pnpm-lock.yaml 为准。文档和代码发生冲突时，先检查当前 8.0 源码，而不是继续沿用旧版经验。

顶层目录

.
├── apps/
│   ├── pc/                  # 买家 PC 端
│   ├── seller/              # 商家管理端
│   └── admin/               # 平台管理端
├── packages/
│   ├── api/                 # 请求辅助、公共基础接口和生成类型
│   ├── chat/                # 客服聊天共享能力
│   ├── components/          # 跨端公共组件
│   ├── config/              # 环境、域名、功能开关和构建配置
│   ├── core/                # 启动、会话、路由、权限和主题
│   ├── decor/               # 页面装修编辑器与预览
│   ├── locales/             # 多语言资源
│   └── utils/               # 请求、存储、HTML 和通用工具
├── config/                  # 仓库默认配置
├── scripts/                 # 质量检查和辅助脚本
├── types/                   # 全局类型声明
├── package.json
└── pnpm-workspace.yaml

三个应用

应用	主要职责	常用入口
`apps/pc`	商城页面、商品、购物车、结算、会员中心和前台客服	`src/main.ts`、`src/router/index.ts`、`src/store`、`src/api`
`apps/seller`	商家商品、订单、促销、店铺、财务和客服后台	`src/main.ts`、`src/router/*`、`src/views`、`src/api`
`apps/admin`	平台商品、订单、会员、店铺、财务、运营、系统和权限后台	`src/main.ts`、`src/router/*`、`src/views`、`src/api`

每个应用拥有自己的页面、端内路由、端内 API 和业务状态。应用之间不能直接引用内部文件；确实需要多端复用的能力应放入职责匹配的 packages/*。

共享包

包	职责
`@shop-tnt/core`	应用启动、路由守卫、登录会话、动态权限菜单、主题和全局上下文
`@shop-tnt/api`	请求辅助、Base 公共接口、上传能力和后端生成类型
`@shop-tnt/components`	跨端公共组件、反馈服务和后台布局组件
`@shop-tnt/config`	API、页面域名、部署路径、资源前缀、功能开关和 Vite 配置
`@shop-tnt/utils`	HTTP 客户端、存储、HTML 安全、导航、国际化辅助和指令
`@shop-tnt/locales`	语言资源、语言类型和路由标题映射
`@shop-tnt/chat`	客服页面、聊天状态、未读消息和实时消息消费
`@shop-tnt/decor`	页面装修类型、编辑器、预览渲染和数据转换

共享包不是通用的“公共垃圾箱”。只有多个应用真实复用的能力，或接口、配置、运行时、语言包等稳定边界，才适合放入 packages/*。

路由和菜单边界

买家 PC 端使用前端静态路由，主要维护在 apps/pc/src/router/index.ts。

平台端和商家端采用“本地页面能力 + 后端菜单结构”的动态权限模型：

前端 page-routes.ts 注册页面 name、绝对 path 和隐藏页关系。
前端 route-components.ts 将 route name 映射到 Vue 页面。
后端 current 菜单接口决定可见菜单、父子层级、同级顺序、标题和非空图标。
route name 必须与后端 identifier 对齐；接口没有返回的可见菜单不会被注入。
后端纯分组节点不需要前端占位页面。

因此，源码中存在页面并不能证明当前角色一定能看到该功能。分销、国际化、客服和直播等页面还可能受功能开关控制。

从 7.x 迁移到 8.0

7.x 名称或做法	8.0 对应方式
`buyer`	`apps/pc`
`manager-seller`	`apps/seller`
`manager-admin`	`apps/admin`
独立 `manager-decor`	`packages/decor/editor` 由平台端或商家端按需加载
`ui-components`	`packages/components`
`ui-domain/*.js`	`config/` 默认值 + `packages/config` 读取封装 + `.env.` 覆盖
`ui-utils`	`packages/utils`，并按职责拆分到 `core`、`api` 等共享包
旧全局状态方案	Pinia 和页面内 composable 分层
Yarn、逐应用安装	根目录统一使用 pnpm workspace
旧 Webpack/SSR 构建	Vite + Vue Router SPA
`build:prod`	根脚本 `pnpm build` 或对应的 `pnpm build:<端>`

这张表只帮助识别结构变化，不代表旧实现可以直接机械替换。修改登录、权限、请求、装修或构建链路前，应先阅读当前架构和对应代码。

文档导航

文档	用途
前端开发环境搭建	获取 8.0 源码、安装依赖、配置并启动三端
前端架构	理解启动、状态、权限、请求、配置和构建链路
配置文件	配置 API、域名、部署路径、CDN 和功能开关
新增页面开发指引	新增 PC 页面、后台菜单页面和隐藏详情页
API 请求	选择接口归属并使用统一请求封装
组件	选择公共组件或端内组件，并了解公开入口
楼层开发指引	扩展装修编辑器和 PC/mobile 预览模块
运行发布	使用开发、测试和生产模式构建静态产物
前端常见问题	排查安装、配置、路由、菜单和构建问题

事实来源

为避免文档再次落后于代码，维护时按下表检查：

事实	源码入口
应用、包和脚本	`pnpm-workspace.yaml`、根和各目录 `package.json`
启动和全局上下文	`packages/core/app.ts`、`apps/*/src/main.ts`
权限路由	`packages/core/permission.ts`、`apps/{admin,seller}/src/router`
HTTP 和 API	`packages/utils/request.ts`、`packages/api/request.ts`、`apps/*/src/api`
公共组件	`packages/components/index.ts`
配置和环境变量	`config/`、`packages/config/`、`.env.*`
构建产物	`packages/config/build/vite.ts`、各端 `vite.config.ts`

packages/api/models 是后端生成的 TypeScript 类型，不是运行时接口函数目录。新增接口前应先判断它是单端业务接口、共享运行时接口，还是仅需复用的类型。

BBC 8.0 前端开发概览

技术栈​

顶层目录​

三个应用​

共享包​

路由和菜单边界​

从 7.x 迁移到 8.0​

文档导航​

事实来源​

技术栈