17 · 回一封信

DRIFTLY / HTML LAYOUT STUDY

画布背景对照

真实 HTML / CSS 排版 · 示例人物与数据 · 操作只在本页演示，不进行真实登录、发送或支付。背景根据当前逐页设计生成，可在背景对照中查看与下载。

LIVE HTML PREVIEW390 × 844

回复海风小舟「一定还会遇到温柔的人，
正在和你一样，在认真地生活。」

海风使用个人资料，与世界交流

IMPLEMENTATION NOTES

本页独立背景

下载背景 PNG · 设计图与背景对照

实际像素 852 × 1846；背景层 opacity = 1；cover，中心对齐。雾化与色调已绘入图片，不额外叠加统一遮罩。

1. 页面理解与当前修订

顶部回一封信，先展示原信摘要，随后空白信纸编辑区、附件工具、身份说明和发送。当前以个人资料回信替代旧匿名开关，发送后需审核并等待对方接受。

2. 从上到下怎么布局

区域（从上到下）	布局与建议尺寸	开发约束
导航	返回、回一封信	有编辑内容时离开确认
原信摘要	最多3～4行，内边距16，原作者/引用标识	长原文折叠并可查看，不无限撑高编辑区
当前身份	头像32～40与昵称，使用个人资料说明	不再提供匿名开关
回复编辑	最小高约220～280，内边距20～24，计数尾对齐	键盘优先，空白/超限错误就近显示
附件与动作	媒体未开放时隐藏；发送按钮56	提交后显示审核/等待接受，而非直接打开可发聊天

表中位置表示正常内容流；除装饰舞台和头像叠放外，不以整屏绝对坐标定位。尺寸沿用通用单位约定，字体放大时内容可增高。

3. 背景和素材怎么设置

背景使用本页独立生成的 PNG。顶部与中部保留浅蓝到近白的留白，底部海岸、人物和玻璃瓶以低对比雾化显示。正文、卡片、输入框、头像和功能图标均在前景独立布局。

本页背景：查看或下载；实际尺寸 852×1846 px。设计图 / 新背景对照。

显示参数：cover、ax=0.50、ay=0.50、背景层 opacity=1、额外整页遮罩 alpha=0。浅色雾化或夜景调色已经绘入图片，不叠加旧版通用白色/深蓝遮罩。卡片自己的背景 Alpha 与整页背景透明度分开设置。

iOS：将 PNG 新增为 imageset driftly_bg_17_reply，Universal / Single Scale 保留原始像素；Image("driftly_bg_17_reply") 使用 resizable、scaledToFill、按容器 frame 并 clipped，背景可单独忽略安全区，opacity(1)。这是新增导入步骤，旧资源包未包含此 imageset。
Android：将 PNG 复制为 res/drawable-nodpi/driftly_bg_17_reply.png，使用 painterResource(R.drawable.driftly_bg_17_reply)、ContentScale.Crop、居中对齐、alpha=1f；不另铺白色渐变。旧资源包未包含此 drawable。
Web：本站对应 /layouts/backgrounds/17_reply.png；业务项目复制到自己的 public 目录后，使用 background-size:cover; background-position:center; background-repeat:no-repeat，背景伪元素 opacity:1，不跟随正文滚动拉长。

可复用元素与逻辑尺寸	iOS / Android 同名资源	Web 源文件
`17_reply/reply_paper`，342×299	`driftly_17_reply_reply_paper`	3× PNG

reply_paper是空白纸，placeholder/字数由输入状态生成。

元素逻辑尺寸是清单的画布尺寸，可能包含透明边距；布局时先观察主体实际占位。iOS 调用 Image(资源名)，Android 调用 painterResource(R.drawable.资源名)；Web 源文件复制后改为站内 URL。完整资源目录、密度和裁切规则见通用实现与素材索引。

4. iOS 具体做法

摘要与编辑器放ScrollView，TextEditor背景透明、placeholder与计数为独立Text；账号行和摘要不被当编辑内容。
@FocusState定位编辑区，键盘显示时压缩装饰和次要说明；发送栏safeAreaInset只占一次底部安全区。
回复草稿按原瓶ID与账号保存，发送后仅在服务端确认接收时清除；返回使用离开确认。

5. Android 具体做法

BasicTextField/多行TextField绑定ViewModel状态，引用用Surface+限定行数Text；当前资料行复用13的组件。
输入法组合态不截断，长度/禁发提示按真实规则；keyboard insets由外壳唯一处理。
提交复用同一回信意图ID/幂等键，已回信、失效领取、拉黑和审核拒绝分别映射可恢复UI。

6. Web 具体做法

用blockquote展示引用、textarea编辑、独立账号说明；不要将整封原信图片铺在编辑底部。
表单提交中禁重入，失败保留回复草稿；引用切换查看不丢当前输入。
桌面可原信和编辑双栏，手机摘要折叠；回复结果显示真实状态，并提供消息请求流程入口。

7. 状态、交互和数据绑定

显示当前账号昵称/头像与资料入口，提交的是初始回信，审核通过后产生请求，对方接受前不能连续私聊。
接口accepted表示服务端已接收时，不能显示“对方已接受/已读”；关系接受、消息发布、阅读是不同事件。
领取无效、已回信、被拉黑、审核未过均有准确提示。成功后转结果/18中的请求状态，不能无条件跳19可发送态。
图片/语音工具仅真实开放时出现，不做可点空按钮。

8. 本页验收重点

发送后审核中和等待接受两种状态不混淆。
退出编辑、网络失败、切前后台后草稿正确且没有重复回信。
原信被删除或拉黑时停止提交，不泄露引用缓存。

还需覆盖通用验收中的窄屏、大字体、RTL、读屏、断网、图片失败与键盘场景。本页是开发交接说明，不代表三端业务已实现或已通过实机测试。

LIVE DESIGN SPECIFICATIONS

精细布局标注

0 个元素

点击预览中的任一元素，查看当前实际生效的尺寸、四边间距与文字样式。标注模式下点击用于选取，关闭后恢复页面交互。

外边距 margin内边距 padding内容 content

选择元素（也可以点击左侧预览）

查找标题、按钮、卡片、图片或元素编号

四边顺序：上 / 右 / 下 / 左。点击行可定位元素。离开滚动可视区的节点仍列在表内。

元素	宽 × 高	margin	padding	字号 / 行高 / 字重	背景 Alpha / opacity	圆角	gap 行 / 列

数值口径与 iOS / Android 对照

尺寸、坐标与间距采用当前 HTML 的 CSS px；矩形测量保留两位小数，CSS计算字符串保留浏览器返回值；不是源 PNG 的像素标注。390 画布是实现参考基线，原图 1170 px 对应 3 倍视觉比例。

iOS 按逻辑 pt、Android 按 dp / sp 实施时可参考这些数值，但仍需平台字体、安全区和缩放适配，不直接做物理像素等同换算。

字体大小、行高和字重为当前继承与响应式规则合并后的值。外边距展示 CSS margin 声明的计算结果；父级距离、兄弟间隙是可视矩形测量，可能受滚动、折叠、transform 影响，不等同于 margin。

背景 Alpha 仅影响该颜色；整体 opacity 同时影响文字与子元素。透明度 = 1 − 不透明度。多层渐变、祖先 opacity、PNG 自带 Alpha 无法用一个百分比描述最终视觉。

切换画布、大字体、输入状态或滚动后可重新测量。CSS媒体查询按浏览器窗口宽度生效；画布宽度选项只改变预览容器，验证手机断点请同时缩窄浏览器或使用设备模拟。标注读取当前示例，不将这些样式数值视为已批准的产品 token。