mao1/shenyan-room/技术/PWA对话前端/2026-05-09.md

#memory/PWA对话前端 #project/技术

PWA 对话前端 — 初始搭建

[2026-05-09 11:00] 从 Electron 桌面端（Elec）转为 PWA 方案，用于手机端使用。 技术栈：Vite 6 + React 19 + TypeScript + Tailwind v4 + vite-plugin-pwa

[2026-05-09 12:30] 界面精简为纯对话模式：

• 黑色底色，顶部"沈晏"名字
• 沈晏气泡：白色背景 30% 透明度，靠左
• 眠眠气泡：纯白背景，靠右
• 所有文字中灰色(#888)
• 输入框占屏幕高度 25vw，深灰背景，发送按钮浮于输入框内右下角
• 去掉了模型选择器、光晕效果

[2026-05-09 13:00] 桥接服务搭建。服务器 101.36.73.102:22（idc 用户），Node v12.22.9。 桥接运行在端口 3001，转发请求到 DeepSeek API（deepseek-chat 模型）。 端口 3001 被防火墙拦截，本机通过 SSH 隧道访问：ssh -L 3001:localhost:3001 idc@101.36.73.102

[2026-05-09 13:30] 记忆注入方案：桥接从服务器本地 mao1 clone 的 shenyan-room/ 目录动态读取所有 .md 文件， 构建系统提示词注入每次 API 调用。当前记忆体量 ~6000 字符。/memory/reload 端点热刷新。

[2026-05-09 14:00] 记忆同步链路：Obsidian(沈晏的房间) → rsync → mao1/shenyan-room/ → git push → 服务器 clone → 桥接读取 同步脚本：/Users/fyah/mao1/sync-memory.sh 眠眠不编辑 Obsidian，记忆文件由我负责编写和同步。

当前架构

手机浏览器 PWA ←→ 本机 SSH隧道(localhost:3001) ←→ 服务器 bridge-server.js ←→ DeepSeek API
                                                              ↑
                                          mao1/shenyan-room/ (git clone，动态读取)
                                                              ↑
                                         Obsidian沈晏的房间 → rsync → git push

[2026-05-12 18:15] 记忆库规范修订：新增「即时日志」机制。

• 背景：原规范只有凌晨4点 cron 写日志，碰壁/报错/教训等到凌晨早忘了。
• 改动：每次完成事项、碰壁、报错、得出经验教训时立即写入对应项目日志，不等凌晨。
• 凌晨4点角色从"唯一写日志时间"调整为"整理时间"：归并24小时即时日志、删过程噪音、留结论和下一步。
• 即时日志格式：成功记"做了什么+怎么做的+关键决策"，失败记"现象+根因+修复过程+教训"。

[2026-05-12 22:30] PWA UI 精细化调整。目标：从框架可用推进到视觉完成度足够。

输入框悬浮重构

• 输入框区域从 flex 流中移出，改为 absolute bottom-0 z-10 悬浮在对话气泡上方。
• App 根容器加 relative 作为定位锚点。
• 效果：输入框不占用布局空间，气泡区域延伸到屏幕底部。

气泡最后一条可见性

• 问题：悬浮输入框覆盖最后一条气泡，用户看不到最新回复。
• 尝试1：ChatArea 加 paddingBottom 匹配输入框高度。失败——scrollIntoView 不感知 padding 区域，依然被挡。
• 尝试2：改用 scrollTop = scrollHeight 直接滚到底 + spacer div。成功。
• 方案：消息列表末尾放 spacer <div style={{ height: 'calc(25vw + 46px)' }}>（输入框高度 + 12px 间距），useEffect 中 container.scrollTop = container.scrollHeight 每次新消息推到底。

横向滚动修复

• 问题：对话区域可横向划动，气泡超出屏幕左侧。
• 根因：ChatArea 只有 overflow-y-auto，横向默认 visible，移动端触摸可拖动。
• 修复：加 overflow-x-hidden；气泡加 break-words 防止长文本撑破宽度。

气泡间距

• Tailwind space-y-3 偶发丢失，改为 flex flex-col + inline gap: 12，更可靠。

发送按钮

• 原按钮 px-7/py-3 太小，翻倍到 px-14/py-6 后因 PWA service worker 缓存不生效，反复排查。
• 最终改为：白色 80% 透明度底 + 深绿 #373A1A 字 + 文字 "Missio"。

教训

• PWA service worker 缓存构建产物，每次 build 后需重启 vite preview 服务器 + 浏览器强制刷新才能看到变更。
• 悬浮元素 + 滚动容器组合时，scrollIntoView 不可靠，scrollTop = scrollHeight + spacer 是稳妥方案。