# 店员后台交付报告

实现目录：`perler-beads-webui`。Vue 3 + TypeScript + Element Plus / icons + Pinia + Vue Router + Vite，CSS 原生样式，不含 Tailwind 或外部素材。森林绿与奶油色工作台，桌面侧栏与移动端折叠菜单。

## 已实现

- 管理员账号密码登录，不内置任何凭据。令牌存在 sessionStorage；每次受保护路由导航调用 `/api/me` 确認身份、员工角色与 store-001 门店，禁止仅凭令牌存在放行。401 未授权、403 未登录从业务 envelope 识别。403 清除会话并退出。
- 店内服务列表、数量摘要、状态/服务类型/桌码备注筛选、明确空/载入/错误状态、pending→accepted→completed 操作。10 秒轮询可暂停，隐藏页面不轮询，路由卸载停止计时并 AbortController 取消未完成请求。
- 图纸列表与检索、JSON 导入、名称分类编辑、发布/下架。仅管理员访问；私有图纸仍由服务端鉴权。导入尺寸、格子、色板、门店匹配由服务端权威校验。
- 色板与物料位置编辑抽屉，添加色号、颜色名称、HEX、可用状态；更新整门店色板。桌位新增/编辑、启停；门店信息与双 HTTPS 服务地址编辑。所有配置以当前授权门店提交，无跨店选择假授权。
- 图纸库与有 patternId 的服务任务可下载实际尺寸 SVG，带 Bearer 鉴权；识别下载接口 JSON 错误，释放 Object URL。服务端限制最多 200×200，SVG 是有界文件，客户端采用 Blob 下载；实际打印由店员手动完成。
- 支付与储值始终禁用，没有假支付、假充值或余额。
- 中文页面语言、内部后台 noindex、语义 heading/main/nav、跳转主要内容链接、控件标签、文字状态、键盘焦点、减少动画偏好、移动端抽屉与可横向滚动表格。
- 页面按路由懒加载，Element Plus 按实际组件注册，减少首屏 JS；无第三方字体/图片网络请求。

## 启动

```sh
cd perler-beads-webui
npm ci --cache /tmp/perler-npm-cache
npm run dev
```

开发服务监听 `127.0.0.1:5174`，`/api` 相对地址代理 `127.0.0.1:8080`。生产构建 `dist/`，部署需将 `/api` 代理服务端，并将前端路由回退至 index.html。管理员用户名与密码配置于服务端环境，后台手动输入。

本次本机联调账号：用户名 `admin`，密码 `local-integration-only`，门店 `store-001`。仅适用于本次启动的演示服务；自行部署按 `ADMIN_USERNAME` / `ADMIN_PASSWORD` 配置。完整说明见 [README 的本地管理员说明](../README.md#当前本地演示管理员)。

## 验证

先写 envelope 权限错误与任务状态序列测试，执行出现 contract.ts 尚不存在的预期失败，再实现。

已执行通过：`npm test`（3 项，含真实 client 模拟 Fetch / Bearer / 过期会话校验）、`npm run build`（vue-tsc 类型检查 + Vite 生产构建）。安装审计 0 vulnerabilities。官方 npm 元数据确认框架版本。TypeScript latest（7）与当前 vue-tsc 不兼容，固定使用 TypeScript 5.9.3。依赖版本及 package-lock 保存。

最终首屏 JS gzip 146.84 kB，CSS gzip 50.13 kB，额外路由 chunk 每份约 1.3–3.2 kB gzip。构建无超大 chunk 警告。

浏览器桌面/移动交互与真实 API 联调由根任务统一验证；此报告当前不声称已完成该核查。没有 PostgreSQL/Redis 启动时，后台正确呈现连接失败。微信凭据、生产 DNS/TLS 和打印机硬件未验证。