留言板

页面16-feedback.html · 留言板 · 验收见 ⑧ · 分工见 ⓪

阅读方式：每条先写界面上是什么，再写元素 ID 与接口。

展示顺序（按角色 · 章节号固定）

• 产品 / 老板：⓪ → ①～⑤ → ⑧
• 测试：⑧ → ①～⑤ → ⑦
• 研发：接口速查 → ①～⑤ → ⑥ → ⑦
• UI：①～⑤（图标路径在控件下）
• 数据 / 增长：⑨ → ⑥
• 多态页：③ 内分态 · ⑥⑦⑧⑨ 号不变

接口本页共 2 个 · GET /feedback · POST /feedback · 原型 mock · 完整见 ⑥

⓪ 本页做什么 · 分工速查

一句话：用户投诉与建议提交，后台人工回复后可在本页查看。

• 产品 / 老板：⑧；§9 Q1 后台处理 SLA
• 测试：⑧ + 提交/已回复两态 Tab
• UI：大文本 + 截图上传（最多 5 张）+ 贴底提交 · 官方回复卡片
• 图片：选后自动压缩 · PDF/Word 本页不上传 · 详 upload-compress
• 前端：反馈 POST + 列表· 详 ⑥
• 合规：提示勿填银行卡等敏感信息

① 顶栏 · 屏幕最上方

• 返回箭头 → btn_nav_back · 优先 history.back() · fallback 10-me.html · index 机模 data-embed-back="shell" 回当前 Tab 壳层
• 「留言板」 → page_title
• 「投诉与建议 · 我们会在 3 个工作日内回复」 · 副说明 → copy_feedback_hint

② 提交表单 · 主内容（#form）

• 多行输入 · placeholder「描述问题或建议…」→ input_feedback
  • 长度：0～1000 字 · maxlength="1000" · 右下角 「0 / 1000」 → label_feedback_counter
  • 格式：纯文本 · 提交前 trim · 不解析 HTML
  • 为空：文字与截图都为空时点「提交」→ 输入框 + 上传区 is-invalid 红框 · 无 Toast
  • 非空提交后：Toast「已提交，我们会在 3 个工作日内回复」→ 约 0.6s 切 已回复态 · 清空文字/截图 · 原型 mock
• 「添加截图」 · 虚线按钮 · 可点击 → btn_upload_feedback_image
  • 规则：JPG/PNG/WebP/HEIC · 最多 5 张 · 选后 自动压缩（长边≤2048 · 压后≤2MB · 见 upload-compress）· 原选 ≤10MB
  • 隐藏选图 → input_feedback_image
  • 已选列表 · 缩略图 + 文件名 + 删除 × → list_feedback_attachments · 删除 → btn_remove_feedback_attachment
  • 「JPG/PNG/WebP…最多 5 张…」 → copy_feedback_upload_hint（有图后变为「已添加 N 张…」）
  • 上传区容器 → zone_feedback_upload（空提交时与输入框一并红框）
• 「勿填写银行卡号等敏感信息」 · 灰色小字 · 只展示

③ 已回复态 · 历史卡片（#replied）

• 容器 → state_feedback_replied
• 「PDF 导出失败重试后仍报错」 · 用户原文 · mock
• 用户附图缩略图 · 只读展示 → display_feedback_reply_images（上线由接口 image_urls[] 渲染）
• 「05-21 提交」 · 时间 · 只展示
• 「官方回复」 · 金色左边线卡片 · 「已修复，请更新到最新版…」· mock

④ 贴底主 CTA · 提交态

• 「提交」 · 橙色主按钮 → btn_submit_feedback

⑤ 本页无 Tab 栏

原型用顶栏外 Tab 切换提交/已回复演示态。

⑥ 留言反馈 · 本页共 2 个

说明：提交与已回复态来自本组接口；原型未真上传。上线渲染 input_feedback · list_feedback_attachments · state_feedback_replied。替换 → launch-static-to-api。

① GET /feedback · 最近一条

• 何时调：进页
• 有 reply → 展示 state_feedback_replied · 原文 + image_urls[] → display_feedback_reply_images

② POST /feedback · 提交

• 何时调：点 btn_submit_feedback
• body：{ "content": "…", "attachment_ids": ["…"] }
• content：0～1000 字 · trim · 与附件至少一项非空
• attachment_ids：0～5 个 · 图片已压缩上传 OSS 后的 ID
• 鉴权：需登录
• 失败：网络 Toast · 超 5 张 400 · 重复提交幂等（后台）

⑦ 入口 · 出口

• 入口：我的 → 留言板
• 出口：提交成功 Toast 留页 · 返回我的

⑧ 怎么验收

1. 左右对照：已回复态用户原文与官方回复须与 ③ mock 一致。
2. 接口专章：滚到 ⑥ · 可见 GET /feedback · POST /feedback。
3. 打开：双击 16-feedback.html · 提交/已回复 Tab 可切换。
4. 截图：点「添加截图」选图 → Toast「图片已添加」· 列表见缩略图 · 满 5 张再选 Toast 提示上限。
5. 提交：仅文字 / 仅截图 / 文字+截图 均可提交 → Toast · 可切 Tab 看已回复 mock；全空红框。
6. 已回复：切 Tab · 见金色「官方回复」样式。
7. 返回：顶栏 → 我的页。

⑨ 团队补充

• 图标资产（第二批） · app-image/ICON-CATALOG.md · 全站通用 §7 · 上传 §8 · 品牌 §9 · 本页见 §10 索引表
• 图标资产（第三批） · app-image/ICON-CATALOG.md · 状态栏 §11 · 增长/分享 §12 · 表单/附件 §13 · 法务 §14 · 订单/空态 §15 · 媒体/语音 §16 · 本页见 §10
• 图标资产（第四批） · app-image/ICON-CATALOG.md · F4 模块 §18 · 状态徽章 §19 · 弹窗/加载 §20 · 联系打码 §21 · 折叠/更多 §22 · 文件类型 §23 · 分享装饰 §24 · 账号 §25 · 本页见 §10
• 分期与排期 · 产品/研发见 launch-static-to-api · 开发说明 ②～⑦ 不写「阶段 N」
• 埋点 · feedback_view · feedback_submit
• 图片上传：H5 已接 _upload-compress.js · 小程序上线前须 compressImage 对齐参数
• 原型限制：mock 提交 · _feedback-prototype.js · 正式上线 → launch-static-to-api