药 材 谷 × K3 前 端 组 件 包 · 对 照
《对话前端组件包.zip》＋《组件包第二辑与焊接手册.zip》 · 12 文件收讫归档 · 本草大脑前端逐件对齐落地 · #281 · 2026-10-11
12 / 12K3 组件包文件收讫（已归档 _K3留底_2026-10-11/组件包·组件包_第二辑）
10 组件全部对齐落地（原生规格翻译，非 TSX 直插）
28 / 0playwright 实跑全 PASS · console 0 · pageerror 0
2 项超越引擎速查卡 / 引用角标接真数据（K3 原件为 TODO 桩）
技术栈落差（必须先说清）：K3 给的是 React TSX 组件，依赖 trpc 接线与底座即插包的 useChatStream Hook；我方前端是零依赖原生 HTML/JS（自研轻量 Markdown 渲染器 + 8981 直连）。因此 TSX 文件不能「拖进去就长」——本轮做法是规格翻译：把每个组件的布局、控件、交互规格逐条对齐到原生实现，视觉结构 1:1，代码形态换掉。
一 · 第一辑《对话前端组件包》6 件
| K3 文件 | K3 规格（实读源码） | 我方实现（index.html 原生） | 状态 |
|---|
MessageBubble.tsx | 用户右/AI 左气泡；工具卡片（行情"去撮合"/合同"确认生成" CTA）；引用角标 [1][2]；复制/🔄重生成/👍👎 | .msg 气泡 + 引用角标真渲染（接 SSE sources，5 条实测）+ 产业引擎速查卡真数据（接 /bre/federate）+ .mops 四操作钮 | 对齐+超越 |
ChatInput.tsx | 多行自适应 ≤160px；📎附件/🖼图片/🎤语音；发送↑/流式中红⏹；底部医疗免责条 | #ta 自适应 ≤180px；📎🖼🎤＠齐全；发送↑/⏹停止；免责条照 K3 原文落底部 | 对齐 |
ChatSidebar.tsx | ＋新对话；🔍搜索历史；按天分组（今天/昨天/7天内/更早）；⏰定时任务/🧩插件技能 | #side 全齐 + 分组四档一致 + 超配：置顶/重命名/删除、引擎广场、知识库、导航等 9 入口 | 对齐+超配 |
LoginDialog.tsx | 登录/注册弹窗，双 mode 切换链接，接 trpc.localAuth | #aM 弹层，登录↔注册切换，接真 /api/v1/auth/register·login（passlib×bcrypt 兜底已修） | 对齐 |
ChatScreen.tsx | 主屏拼合三件套 + useChatStream；空态大标题「药材谷智能助手」Songti 30px | #app 三线框拼合；空态「本草大脑」Songti 46px + 快捷 chips（超配）；流式走真 SSE rAF+句子级 | 对齐+超配 |
README.md | 组件清单 + 3 处 TODO（trpc/语音/文件回调） | 语音已真接 Web Speech；附件已真读文本类文件；trpc 对应物=REST API 直连 | 超越 |
二 · 第二辑《组件包与焊接手册》7 件
| K3 文件 | K3 规格（实读源码） | 我方实现 | 状态 |
|---|
Panel.tsx | 通用面板壳：400px 居中弹窗 + ✕ 关闭 | .mn/.mc 弹层壳（430px），四面板共用 | 对齐 |
TasksPanel.tsx | 定时任务：列表 + toggle 开关 + ＋新建；"服务端 cron 执行 → SSE 推送" | #cronM：新建/删除/列表 + toggle 开关已补（本轮）；服务端执行诚实标注"待接" | 对齐 |
PluginsPanel.tsx | 插件市场 5 卡片（行情/识药/合同/收益/药膳）+ 启用钮；"@ 插件名直接调用" | #plugM：5 张卡照 K3 全量（第 5 项药膳推荐标「未收录」诚实展示）+ 启用/停用态已补（本轮） | 对齐 |
MemoryPanel.tsx | 记忆面板：画像键值 4 行 + 清除全部 | #memoM：本轮新建——画像 4 行（默认/可编辑）+ 清除；左抽屉新入口 + 徽章计数 | 对齐 |
SettingsPanel.tsx | 设置：主题外观/导出对话/清缓存/关于 | #setM：主题三选（纸墨绿/月白/玄墨）+ 导出 JSON + 清缓存 + 版本标注（超配：默认模型/会话数） | 对齐+超配 |
焊接手册-INTEGRATION.md | 四步焊接：底座→组件→trpc 三处 TODO→验收 | 对应关系：底座 9 件（#280 已接）→组件（本轮对齐）→trpc 三 TODO 对应物=真 REST API（auth 已通/文件上传文本类已通/撮合跳一药通查）→验收（见下） | 对等 |
交工验收单.html | 8 项验收标准 | 按我方实跑结果逐项复核（见第三节） | 对等 |
三 · 交工验收单 · 按我方实跑复核（playwright 真跑 28 断言）
| 验收项（K3 标准） | 我方实跑结果 | 结论 |
|---|
| 对话可用：提问 5 秒内流式出字 | SSE rAF 批量 + 句子级渲染，问答全程流式（实测作答完成） | PASS |
| 防答非所问：评测 20 题对 ≥18 | 20 题评测集已落盘（#278）；自动跑分执行器待点单 | 待跑 |
| 会拒答：问天气/明星拒答并引导 | 系统提示词药方一 + 铁律角色已挂（#278） | 已挂 |
| 医疗免责：健康问题均带免责 | 底部免责条常驻 + 回复尾"温馨提示：不构成诊疗建议，请遵医嘱"双保险 | PASS |
| 四插件可调用 | 4 插件启用态可用 + 第 5 项（药膳）诚实标未收录 | PASS |
| 记忆：记住用户品种/基地 | 五层记忆底座在（memory_layers.py）；面板画像本轮落地；服务端写入通道待接 | 部分 |
| 定时任务能到 | 前端新建/开关可用；服务端 cron 执行诚实标注待接 | 前端就绪 |
| 登录 | 本地注册+登录全通（实测拿 token）；云端引擎 四 SSO 不适用（我方自有账号体系） | PASS |
四 · 配色对齐（死命令：颜色不变）
K3 组件用 #145c43 / #145c43 / #f7f4ec / #b8860b（同为"纸墨绿"家族，但不是我方冻结值）。本轮落地结构照 K3、配色守我方：全部走 CSS 变量 --brand:#145c43 · --gold:#B8860B · --bg:#f7f4ec。顺手清掉 #280 遗留的 K3 色值残留 --brand2:#145c43 → 改 #145c43。playwright 实测 computed style 三色全对。
五 · 诚实边界
- 引擎速查卡：数据为真（/bre/federate 实调，当归 14/19 台命中 17.2ms），但触发词抽取来自回复 sources 的 chapter 字段清洗——冷门问法可能抽不出词，此时卡片静默不出现（不造假兜底）。
- 记忆面板：当前为前端本地画像（localStorage）；服务端五层记忆（memory_layers.py）存在但无只读端点，写入通道待点单后接。
- 定时任务：前端骨架+开关就绪，服务端 cron 执行与 SSE 推送未接（与 K3 原件一样是 TODO，如实标注）。
- 云端引擎 四 SSO：验收单第 8 项含"云端引擎 四 SSO"，我方账号体系自有，此项按不适用处理。
- 评测 20 题自动跑分：评测集已落盘，执行器动后端，待王先生点单。
取证：_pw_r281_front.py（28 PASS / 0 FAIL · console 0 · pageerror 0 · requestfailed 0）· 截图 _shot281_card.png · 备份 index.bak_281_*.html