需完成五步配置：一、启动并验证本地服务；二、ide中生成预览二维码；三、qoder mobile扫码绑定会话；四、启用触控增强与双栏比对；五、配置离线缓存策略。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您已启动QoderWake任务并希望在移动设备上即时查看代码渲染效果、UI响应状态或交互逻辑验证，但发现页面空白、加载失败或内容不同步，则可能是由于移动端未启用预览通道、本地服务未暴露或扫码会话未绑定开发上下文所致。以下是完成QoderWake移动端预览配置的步骤：
一、确保本地开发服务处于活跃监听状态
QoderWake移动端预览依赖于本地运行的服务端口（默认为3000或由Qoder CLI自动分配），该服务必须持续响应HTTP请求，并允许跨域访问，否则手机扫码后无法拉取HTML/CSS/JS资源。
1、在项目根目录终端中确认服务已启动：执行 npm run dev 或 qodercli serve，观察控制台输出是否包含类似 "Local: http://localhost:3000" 的地址行。
2、若服务未运行，手动启动：输入 qodercli serve --port 3000 --host 0.0.0.0，强制绑定至全网卡接口。
3、验证服务可达性：在手机浏览器中直接访问 http://[电脑局域网IP]:3000（如 http://192.168.1.102:3000），确认页面可正常加载。
二、在Qoder IDE中触发预览二维码生成
该步骤通过Qoder IDE内置的Preview Bridge模块，将当前活动项目的本地服务地址、资源哈希及会话密钥打包为动态二维码，确保移动端扫码后能建立加密隧道并复用开发环境上下文。
1、在Qoder IDE中打开目标项目，确保编辑器焦点位于主入口文件（如index.tsx或App.vue）。
2、点击顶部菜单栏 View → Preview on Mobile，或使用快捷键 Ctrl+Shift+P（Windows/Linux）/ Cmd+Shift+P（macOS） 并输入“mobile preview”后回车。
3、IDE右下角弹出浮动面板，显示一个持续刷新的二维码及提示文字：“Scan to preview in real-time — session bound to current workspace”。
三、使用Qoder Mobile扫描并绑定预览会话
Qoder Mobile通过WebSocket与IDE建立长连接，在扫码后主动拉取当前项目构建产物快照，并缓存至本地临时沙箱，实现零延迟渲染与热更新同步，无需重复下载静态资源。
1、确保手机与开发机处于同一Wi-Fi网络，且防火墙未拦截端口3000或5000。
2、打开Qoder Mobile应用，点击底部导航栏中间的 “+”按钮 → Scan Preview QR。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
3、对准IDE中显示的二维码完成扫描，手机端立即显示加载动画，并在2秒内呈现与IDE右侧预览面板完全一致的页面效果。
4、此时任意修改代码并保存，IDE自动触发HMR（热模块替换），手机端页面同步刷新，无须重新扫码。
四、启用触控增强层与双栏差异比对
该模式在移动端预览界面叠加一层语义化交互层，将鼠标悬停、右键菜单、元素高亮等桌面端行为映射为长按、双指缩放、滑动拖拽等手势，并支持左右分屏对比原始设计稿与实时渲染结果。
1、在Qoder Mobile预览页顶部右滑，调出工具栏，点击 “Layout Mode”图标。
2、选择 “Split View with Figma”，输入Figma文件链接或上传设计截图。
3、开启 “Touch Overlay”开关，此时点击任意按钮将触发高亮脉冲动画，并在底部浮层显示该元素绑定的React组件名与props摘要。
4、双指捏合缩放页面时，系统自动激活像素级对齐校验，对偏差超过2px的布局区域添加红色虚线边框标注。
五、配置离线预览缓存与弱网保真策略
当网络中断或信号衰减时，Qoder Mobile自动切换至本地缓存的最近一次完整构建产物，并启用LZ4压缩解码与Canvas离屏渲染，保障核心交互功能（如表单提交、路由跳转）仍可响应，避免白屏或卡死。
1、进入Qoder Mobile设置页，点击 “Offline Behavior” → “Enable Preload Cache”。
2、返回预览页，下拉触发刷新，系统自动下载当前项目dist目录全部静态资源至手机内部存储 /qoder/cache/preview/[project-hash]/。
3、手动关闭Wi-Fi并开启飞行模式，再次打开预览页，确认页面仍可滚动、按钮可点击、路由可跳转，且控制台无404报错。
