YoLink 交互演示 · 恒信财富
管理后台、客服工作台、客户手机屏三合一的可点击演示。数据全在浏览器里（localStorage），不需要后端；三个入口开在不同窗口会实时同步。
演示企业「恒信财富」及其中所有人物、对话、金额均为虚构。
在线预览
Vercel 在线演示 · 代码仓库
实际发布链路：GitHub muxiaomu001/YoLink-Preview 的 main → Vercel yo-link-preview 自动构建与发布。GitHub 只托管代码，仓库不配置 GitHub Pages 发布工作流。
浏览器演示数据只保存在访问者自己的浏览器；不上传 PRD 文档。发布后先检查 Vercel 对应提交的部署状态，再验证以上固定域名，不因仓库存在其他部署脚本而另建站点。
跑起来
pnpm install
pnpm dev
打开 http://localhost:5173 。生产构建 pnpm build，产物在 dist/，任何静态托管都能放。
演示数据存在浏览器 localStorage，键是 yolink-demo-v6（src/store/store.ts 的 STORAGE_KEY）；模型改了就把版本号加一，老数据自动作废、重新灌种子。
三个入口
| 入口 | 路径 | 以谁的视角 |
|---|
| 管理后台（产品演示） | /admin | 管理员 周敏；侧边栏按 PRD 05 章节分组，标题旁的排期徽章属于演示批注层（见下节），钱包/签到/推荐等模块由「模块启停」控制显隐；「群发管理」旁是「话术库」（企业分类与条目、图片 / 文件上传、启停、使用次数） |
| 客服工作台 | /workbench | 顾问 林薇，以「林顾问」身份。按 PC 客户端布局：左侧图标栏导航（按员工能力与模块显隐：会话、客户、群发、邀请链接、群活跃助手、提现审核、设置）、三栏可拖宽、右栏可收起；话术库（右栏「话术」页签，左侧分类标签列 + 图片两列网格 + 打字自动匹配全文命中 + 图片 / 文件直发）；右下角浮钮是演示控制（切换登录员工、打开手机屏 / 后台、演示批注开关） |
| 客户手机屏 | /phone | 未登录时是注册页；右侧演示控制可切到任一已有客户。每个按钮按策略渲染，后台切开关立即生效 |
首页 / 按客户进入、AI 与知识、话术与运营、人员交接、经营展示提供五段导览，并有待讨论区域和带确认的重置按钮。
两条身份与归属流程
注册即分配：后台看「直播间组」放了哪两个坐席 → 客户屏输邀请码 LIVE88 注册「张先生」→ 客户屏立刻出现林顾问、恒信合规通知两条会话与欢迎语 → 客户回一句 → 工作台「待我回复」多了张先生，员工点「AI 推荐」生成草稿。
换人零感知：后台把「林顾问」交接给王芳 → 工作台切换登录员工为王芳，顶部身份是林顾问，历史全在 → 客户屏一个字没变 → 消息审计里交接前的消息背后是林薇，之后是王芳。
当前演示边界
- 知识支持草稿、已发布、已下线；修改产生新版本，引用可点开原文。没有命中时不编造答案。
- AI 是本地知识匹配，最多展示三条命中内容，不能证明真实模型语义理解和效果。
- AI 配置检查与日报发送为模拟；经营数字来自虚构种子和演示操作，不能用作正式统计验收。
- 手机屏目前只有注册、消息、联系人、我的；网站栏目、发现与经营等尚未覆盖。
- 群活跃助手保留讨论稿；订阅到期规则待决策；带排期徽章的页面不代表第一版交付承诺。
- 正式产品规则看
../docs/prd/，技术框架、模型和部署选择不由这份 demo 决定。
聊天、群与频道体验（2026-09-16）
- 消息菜单统一「删除」，选择本方或所有人范围；本方工作台隐藏跟随官方坐席及交接，全员删除不留占位，审计保留。
- 后台员工角色单独配置「管理删除消息」；作者删除与群管理删除分开，客户全员删除默认关。
- 文字、引用、附件草稿可恢复；工作台按员工＋坐席＋会话保存，交接不继承旧员工草稿。
- 发送有等待、失败和重试状态。右下角演示控制可以模拟下一条发送失败；这是本地流程演示。
- 图片、文件、视频、语音先预览／试听再确认；多图成组。聊天附件存入浏览器本机存储，刷新可读；不代表服务器上传与跨设备同步。
- 阅读历史时新消息不强制滚底；文件与媒体按类型查找并定位，支持返回原阅读位置；可选中文字后长按（手机）或右键（桌面）回复所选，多选转发并加附言。
- 频道默认用频道名与头像发布，可附顾问署名；群和频道的阅读展示分开。新成员欢迎语在群管理里配置，仅之后加入的人看到。
- 不提供归档。清空聊天仅隐藏本方历史、保留关系与草稿；从列表移除不代表退群或取消订阅。
完整范围与验证见本地 ../docs/prd/20-Telegram交互落地与验收.md。翻译、回应、投票等候选没有自动加入；真实网络、跨设备和生产权限安全不由此 demo 证明。
代码结构
src/
domain/
types.ts 领域模型，与 docs/prd/00 预留清单一一对应
seed.ts 种子数据：企业、员工、坐席、邀请组、头衔、客户、对话
seed-admin.ts 管理后台完整版的种子：策略矩阵（POLICY_ITEMS 39 项）、举报、敏感词、钱包、签到、推荐、横幅、AI、画像同步、日报、插件、系统
seed-groups.ts 群管理字段（管理员、群设置、公告、置顶、限制、群链接、管理员日志）与群活跃助手（机器人、剧本、规则、运行记录）的种子
seed-quick-replies.ts 话术库种子：演示附件（public/media 下的费率表、流程图、说明书 PDF 等）、企业 / 个人分类、18 条话术（含图片、文件、停用；没有关键词字段，匹配走全文）
labels.ts 枚举的中文文案（审计事件、模块、权限清单、API scope…）
ai.ts AI 回复推荐（演示版，关键词匹配已发布知识原文）
time.ts 时间格式
store/
store.ts zustand 仓库：核心动作（注册、交接、挂头衔、群发…）
policy.ts 策略解析与群内角色：resolveCap / customerCan / seatCan / seatGroupPerm / customerCanSpeakIn / senderName / visibleText
actions/ 各模块的动作：settings / people / policy / content / modules / integrations
groups.ts（群设置、公告、置顶、成员、管理员、限制、群链接）
workbench.ts（消息回复 / 转发 / 撤回 / 删除、会话置顶 / 静音 / 标未读、客户拉黑 / 禁言 / 重置密码、个人偏好、客户端发言判定）
quickReplies.ts（话术与分类的增删改、启停、使用计数；企业 / 个人两层）
bots.ts（机器人账号、剧本、规则、一键暂停、模拟触发、审核、手动发言）
D-extra.ts（提现审核记审核人与原因 / 凭证）
selectors.ts 派生数据：会话视图、待回复、未读、按交接反推实操员工
ui/ 通用组件（按钮、表格、弹窗、二次确认、SVG 图表、头衔与内部标签的 chip）
media.tsx（图片缩略图 + 大图 Lightbox、文件卡、本机文件读成附件）
apps/
admin/ 管理后台 39 个导航入口，nav.ts 是侧边栏与路由清单；pages/QuickRepliesPage.tsx 话术库
workbench/ 工作台（PC 客户端布局）：components/layout 图标栏 / 坐席切换 / 拖拽把手 / 演示浮条 / 系统通知，
三栏会话（ChatPage：全部 / 待我回复 / 未读 + 筛选弹层）、components/customer 资料卡（顶部快捷动作 + 折叠分区）、
components/group 群摘要卡 + 群管理弹窗（按权限显示分页）、客户（CustomersPage）、邀请链接、群发（全部好友一键群发）、
components/quick-replies 右栏「话术」页签（分类标签列）、打字自动匹配浮层、`/` 列表，
群活跃助手（BotsPage）、提现审核（WithdrawalsPage）、设置（含快捷键）；useLocalPref.ts 记本机栏宽与折叠状态
phone/ 客户手机屏：注册、消息、联系人、我的、聊天（图片 / 文件消息真实显示，会话列表预览 [图片] / [文件]）；screens 下每个页面按策略渲染
landing/ 演示首页
演示批注层（技术团队看这里）
界面上凡是「替 PRD 说话」的内容——演示为什么和真产品不一样、这块排在第几版——都集中在一层里，和产品自身的文案严格分开。规矩写在 docs/界面文案与名词规范.md 第五节。
判断标准一句话：这句话如果出现在客户已经买单、正在用的系统里，读起来奇不奇怪？ 奇怪就进批注层。
所有批注只有这几种形态，全部由 src/ui/DemoNote.tsx 提供：
| 形态 | 用在哪 |
|---|
<DemoNote> / <DemoNote compact> | 灰色虚线框，带「演示说明」标签 |
<DemoHint>（src/apps/phone/parts.tsx） | 手机屏里的同款，尺寸适配窄屏 |
<DemoLevelTag level="P1"> | 排期徽章，挂在标题/列头/字段名旁 |
<LevelTag level="P1">（手机屏） | 同上，手机屏包装 |
<Card level> / <PageHeader level> | 内部就是 DemoLevelTag |
<Field demoHint> | 表单字段下方的演示说明 |
demoToast('签到') | 「××在演示里不做实际改动」统一口径 |
nav.ts 的 demoOnly: true | 演示专属页，关掉批注后导航里也不出现 |
P0 / P1 / P2 绝不写进 label、title、desc 等字符串，只能走徽章组件。
右上角（后台）、右下角浮条（工作台）、演示控制面板（手机屏）都有「演示批注」开关，状态存 localStorage 键 yolink-demo-notes（'on' / 'off'，默认开）。关掉后看到的就是正式产品应有的界面。
交接给技术团队时，一次性去掉批注的做法：
- 删掉
src/ui/DemoNote.tsx 和 src/apps/phone/parts.tsx 里的 DemoHint / LevelTag；
- 按编译报错删掉所有
DemoNote / DemoHint / DemoLevelTag / LevelTag / DemoNoteToggle / useDemoNotes / demoToast 的引用，以及 Field 的 demoHint、Card/PageHeader 的 level、nav.ts 的 demoOnly 和带该标记的条目；
- 删掉演示外壳：
src/apps/landing/、工作台 DemoBar、手机屏 DemoPanel。
剩下的界面就是正式产品该有的样子，不需要再逐句挑文案。
策略如何生效（技术团队看这里）
管理后台 → 策略 里切一个开关，客户手机屏对应的按钮立即出现或消失，不需要刷新。链路：
- 页面动作调
actions/policy.ts 的 setPolicyCap / addPolicyOverride 改 policyMatrix 或 policyOverrides，zustand persist 写进 localStorage，另一个窗口通过 storage 事件同步。
- 手机屏、工作台每个按钮都不直接读矩阵，而是问
store/policy.ts：客户端 customerCan(s, customerId, key, groupId?)，坐席端 seatCan(s, seatId, key, groupId?)，群管理权限 seatGroupPerm(s, g, seatId, staffId, perm)。
resolveCap 的裁决顺序（03 文档）：模块授权（enterprise.modules[item.module] 关了直接 false）→ 角色硬边界（官方群 group.leave 对客户强制关）→ 策略矩阵（企业默认，只有「客户」「坐席」两列：客户只有手机 App，坐席只有桌面工作台）→ 群级覆盖（只作用于客户在该群里的能力）→ 用户级覆盖（客户或坐席）。后一层覆盖前一层，返回 { allowed, source }，source 说明是哪一层决定的。- 员工角色能力（
Role.caps，如 manage_bots / review_withdrawal）与坐席策略是两套：前者管"这个人能不能进这个页面"，后者管"这个坐席在聊天层能不能做这件事"。工作台入口两个都查。
模型要点（技术团队看这里）
- 坐席（Seat）与员工（Staff）分离。坐席是客户看到的官方身份，是一条官方类型的用户记录，不能登录；员工是真人登录账号，客户永远看不到。一个员工可持有多个坐席。
- 消息同时记
seatId 与 operatorId。客户看到的是坐席署名，审计查到的是真人。selectors.operatorAt 按交接记录反推，与 operatorId 互为双保险。
- 坐席交接记录永久保留（
handovers），交接后显示名、头像、历史消息不变。
- 客户与坐席多对多（
customerSeats），一行一个官方联系人，其中一个是主归属。
- 邀请组放几个加几个（
inviteGroups.seatIds）。改组默认不追溯老客户，backfillSeat 是显式动作。
- 头衔与内部标签分表（
titles / tags）。头衔官方发、所有人可见、只能从库里选；内部标签客户永远看不到。
对应的产品文档在 ../docs/prd/。
