第15讲 待办网页设计要求

通用模板
使用场景：【谁在什么情况下使用】
主要动作：【最常用操作】
布局：【首屏区域、对齐、宽屏与窄屏】
层级：【标题、正文、辅助信息】
间距：【统一尺度与留白】
颜色：【主要操作、筛选、危险与错误】
状态：【加载、空、错误、焦点、禁用、确认】
不变内容：【核心规则、接口、数据与存储】
验证：【改版前后相同操作与结果】

本案例
个人学习待办，打开就是工作区，不做宣传页。
主标题“我的待办”，下方是轻量统计、输入与新增、筛选、列表和导出。
桌面内容最大宽960px，390px手机自适应；长标题换行，操作按钮不被挤出。
正文16px，标题30px，字距0；间距优先8、16、24、32px。
浅灰底与白色内容、深色正文；主要动作#0f766e、激活筛选#2563eb、危险操作红色。
辅助文字保持可读对比度；完成任务同时有勾选与删除线，不能仅靠颜色。
去掉技术宣传副标题、UUID等不服务操作的小字；数据保存范围的说明需要保留。
加载、空列表、无筛选结果、输入错误、焦点、禁用、保存失败、删除确认和取消都要可用。
不修改TodoCore、web_api.py、bridge.js、任务字段、存储键或已有任务。
Canvas参考稿只用于设计，不证明真实Python功能完成。先从Comate技能菜单选择，再发送提示词。
如果当前版本无法调用该技能，用本文件提供设计约束，不假装调用成功。
不照搬参考稿中过浅颜色或固定390px容器；需要审核后落实到实际CSS。
使用同样的两条任务核对50.0%、筛选、刷新与导出，并检查手机布局。