PC 全页面 AI 与移动端 · 同一个主区,两个外壳

左栏折叠成抽屉、左侧导航换成底部 Tab —— 中间那块金色虚线区域是 100% 共用的同一份代码

结 论不是两条线,是一件事加一个断点
PC全页面 AI宽 ≥ 1024px
GAIP 助手
＋ 新建会话
历 史 会 话
家庭保障方案规划07-16 15:20
客户沟通话术建议07-15 10:48
子女教育金测算07-14 18:06
⛶—
你可以这样问
↗帮李宁做一份兼顾子女教育和全球通行的身份规划方案
↗查一款适合香港高净值客户、偏稳健、兼顾传承的保险产品
建议说你的目标或补充信息,我可以记住上下文
◧ 上传附件◈ 做方案 ↑
您正在与 AI(非真人)进行对话,AI 生成内容未必准确。点击查看详情
共 用 主 区
建议把主区限宽 720px 居中,不要让输入框铺满 1300px —— PC 自己观感更好,和移动端结构也就完全一致了。
同 一 份 代 码只换外壳
+ 一个响应式断点
thread 存储
必须是同一套
移动助手页宽 < 768px
9:41◗◗◗ ▭
GAIP 助手
顾
你可以这样问
↗帮李宁做一份兼顾子女教育和全球通行的身份规划方案
↗查一款适合香港高净值客户、偏稳健、兼顾传承的保险产品
建议说你的目标或补充信息,我可以记住上下文
◧ 附件◈ 做方案 ↑
您正在与 AI(非真人)进行对话,AI 生成内容未必准确
共 用 主 区
助手
客户
产品
学习
资讯
左栏收成左上角汉堡抽屉,左侧导航换成底部 Tab。主区一行不改,只是宽度变了。
要 确 认 01PC 全页面是否已在开发 你给的是 github.io 预览稿。如果还没开发,这就不是"移动端复用 PC"而是"两端一起做" —— 对老板可以讲成一件事,排期也更好看。
要 确 认 02主区不写死 px 宽度 现在跟 PC 那边约定用相对单位 + 断点,成本为零。如果先按 1300px 写死,后面加移动断点要重写整个对话流。
要 确 认 03thread 存储必须同一套 PC 存一套、移动存一套的话,「手机起头、电脑接着做」这条链路事后接不上。同一个页面能让这件事自动成立,但别各存各的。
各 自 一 套只有外壳和三件事 导航壳、语音(移动主入口)、上传附件(手机要拍照)。灰 Tab 预告是移动端独有。其余全部共用。