# 06 前端交互、草稿与手机适配

听文视频工作台 · 技术架构与实现 · 1.0.2

前端通过四个pane组织创作、任务、作品和关于，mobile.js将PC定位文件行为适配为AndroidNative导出或作品页。首页大介绍区已去除，应用名下两行10px说明保留；360/390px检查避免标题区挤占文案输入空间。主标题placeholder“6G 通信”不等于默认写入标题。

交互机制 | 
实现要点 | 

正文统计 | 
Array.from(text).length，Unicode码点口径；长文输入框内部滚动 | 

标题统计 | 
规范化主副标题，去换行后合计；客户端提前拒绝30字符以上，服务端重复校验 | 

音色 | 
模板由VOICES渲染，所选按钮和摘要更新；样音来自本机preview接口，恢复不自动播放 | 

本机照片预选 | 
FileReader读取、大小和数量预检、ObjectURL缩略图；重新选择替换批次，删除回收ObjectURL | 

图片动作锁 | 
防重复点击、换图期间禁用相冲突动作；服务端仍执行状态校验 | 

任务轮询 | 
选中任务约每2.5秒刷新，显示三个独立阶段状态 | 

草稿 | 
input/change后300ms延迟，隐藏/返回时主动保存；只保存白名单字段 | 

视频列表 | 
请求实际磁盘成片列表，内嵌标准video控件；保存/分享交给原生 | 

错误反馈 | 
alert/toast与步骤消息；结构化服务错误显示原因，模板文本以textContent插入数据 | 

“清空”调用工作区清理逻辑，不向后端发送cancel，也不删除任务。它清输入、文件预选、Key、费用勾选、当前任务显示和本地清洗撤销缓存；正式版及未到期试用版保存空草稿。到期试用的flushDraft不再保存新草稿，清空正文还可能被计数锁回退为acceptedText，重启仍可恢复原已存正文。历史文件和活动工作仍由后端维护。用户想停止处理需要明确点击取消。

草稿恢复字段包括title,titleSecondary,text,prompt,voice,imageMode,provider,selectedId；不包含model、api_key、payment_consent、photo_url或File对象。模型不持久保存回草稿，已有任务的模型快照保存在job中。来源在Android草稿中固定为seedream。

正式版返回键保存行为与试用版不同：试用版额外等待串行计数/保存Promise后才触发原生finish，相关一致性细节见第17章。不得把试用专属修复扩写成正式版也具有同一队列实现。

依据：templates/index.html:154–282、static/mobile.js:4–101、static/mobile.css:3–19、app.py:427–465。

---
招商合作微信：wzqy2019。添加备注：听文合作。
原网页：https://tingwen-creator-studio-102.pages.dev/guide/technical-06