3.8 KiB
3.8 KiB
Client Web Instructions
项目定位
- 本项目是入驻企业及其成员使用的客户工作台,所有业务数据都处于企业租户上下文中。
- 当前范围包括注册、业务总览、企业资料、企业成员、企业角色与权限、头程订单。
- 不在本项目实现平台内部运营管理、品牌官网、仓库 PDA 作业或仅属于原生移动端的能力。
技术基线
- 使用 Vue 3、TypeScript、Vite、Vue Router、Pinia、Element Plus、Axios 和 Lucide Vue。
- TypeScript 保持严格模式;不要使用
any掩盖接口或状态模型问题,优先从@chongchong/shared复用公共类型。 - 使用现有
@别名引用src/,保持 ES Module 和现有无分号风格。 - Element Plus 组件使用现有自动导入配置;
ref、computed等 Vue API 必须显式导入。不要手工向src/auto-imports.d.ts或src/components.d.ts写入业务声明。 - 不擅自替换现有框架、路由、状态管理、组件库或构建工具。
目录与职责
src/views/:路由级页面和业务流程入口;复用交互拆入组件。src/layouts/:租户工作台壳层、导航和全局页面结构。src/router/:公开页、受保护路由、页面标题和权限元数据;导航与路由必须同步。src/stores/:认证、当前租户和跨页面业务状态;局部表单状态留在页面或组件内。src/api/:统一处理基础地址、超时、认证头、响应解包和错误映射;页面不得直接创建独立 Axios 客户端。VITE_API_BASE_URL控制浏览器请求前缀,API_PROXY_TARGET控制 Vite 开发代理上游;后者只由开发服务器读取,不进入客户端构建。新增或变更环境变量时同步更新.env.example,不得提交真实密钥或环境专属凭据。src/styles/:全局设计令牌和布局;优先复用现有--primary、--navy、--border、--muted。- 跨应用稳定模型放到
packages/shared,客户工作台专属类型保留在本项目。
租户、认证与数据安全
- 任何查询和变更都必须以服务端确认的当前租户为边界;绝不从可篡改的前端参数推断授权租户。
- 企业成员、角色和权限只能管理当前企业范围。前端隐藏不是安全控制,服务端必须重复校验租户与权限。
- 认证统一经过
src/stores/auth.ts和src/api/http.ts;不要在页面中复制令牌逻辑或持久化密码、敏感资质内容。 - 当前认证仍包含模拟数据。接入真实 API 后移除对应模拟分支,生产环境不得回退为模拟成功。
- 注册、上传资质、成员邀请和订单操作必须提供明确校验、幂等保护、提交中状态和可恢复的失败反馈。
UI 与交互
- 延续现有客户工作台的可信、简洁和服务型视觉语言,与内部管理后台保持品牌关联但不照搬高密度管理界面。
- 优先使用 Element Plus 和 Lucide 图标;不使用表情符号代替功能图标,不引入第二套组件库。
- 业务页按实际场景覆盖适用的加载、空数据、失败、无权限和数据过期状态;危险操作需要确认和明确结果。
- 保持键盘可达、可见焦点、语义化标签、足够对比度和清晰错误提示。
- 响应式变更至少检查 320px、720px 和桌面布局;避免只能横向滚动才能完成核心任务。
本地命令与质量门禁
在 apps/client-web 目录执行:
pnpm install
pnpm dev
pnpm test
pnpm typecheck
pnpm build
- 日常变更至少运行
pnpm typecheck;交付前运行pnpm build。 - 当前测试使用 Node.js 内置测试运行器,执行
pnpm test;项目仍未声明 lint 脚本,不得声称 lint 已通过。 - 不手工修改
dist/或node_modules/;依赖变更必须同步当前项目依赖清单和锁文件。