WebDrop/docs/ui-design.md

界面设计

前端的视觉与交互权威文档。协议、接口以 protocol.md、api.md 为准,本文只定义它们在界面上如何呈现。

1. 原则

1. 工具感的实用极简:界面是载体,内容是主角。信息密度适中,层级靠字号、字重、间距,不靠装饰。
2. 诚实:安全状态如实呈现,不夸大。服务端能看到的、不能保证的,界面必须说清楚(见 §7)。
3. 手机与电脑同一套骨架:同一组组件,按宽度重排,不做两套界面。
4. 克制的质感:只在两处用 blur,只在浮层用阴影。

2. 反 AI 味清单(禁止项)

禁止	原因
装饰性渐变、霓虹色、彩色大色块	默认 AI 模板特征。渐变只允许用来表达状态或层次,见 §4
超过 12px 的圆角、pill 形容器	同上
卡片套卡片、满屏悬浮玻璃面板	层级混乱,且耗性能
眉标签(eyebrow)、装饰性副标题、营销式文案	工具不需要
Tailwind 默认式重阴影	见 §4
默认的 Inter / Roboto,默认细线图标集原样使用	无个性

3. 色彩

灰白为主,亮暗两套。默认跟随系统(prefers-color-scheme),顶栏的外观菜单可手动指定「跟随系统 / 亮色 / 暗色」,选择只存在本机 localStorage,启动时在渲染前应用,避免闪烁。暗色变量在 tokens.css 里出现两次(跟随系统与手动指定),修改必须同步。

token	用途
--bg / --surface	页面底 / 输入、浮层底
--line	1px 分隔线,替代卡片边框
--text / --text-dim	正文 / 次要信息(时间、设备名)
--accent	主按钮、焦点、选中态,与正文同为墨色
--ok	enc 与已认证完整
--warn	raw 模式、不完整、下载次数将尽
--danger	篡改、错误、删除
--busy	进行中、重连中

语义色只表达安全与状态,不做装饰。 颜色字面量只允许出现在 src/styles/tokens.css,其余 CSS 一律 var(--*),由 stylelint 强制。亮暗两套的语义色都要过对比度(正文 ≥ 4.5:1)。

4. 形状、阴影、blur

项	规则
圆角	三档:--radius-sm 4、--radius-md 8、--radius-lg 12。只能用 token
分隔	列表用 1px --line,不用阴影、不用卡片
阴影	只有 --shadow-pop,只给菜单、弹窗、Toast
blur	仅顶栏与手机底部动作栏使用 backdrop-filter: var(--blur-bar),半径 10px

渐变:低饱和、小面积,只表达状态或层次,定义为 tokens.css 里的 token(--fade-down、--tile-gradient、--progress-gradient、--warn-bar、--*-soft 底色):

用处	做法
顶栏下沿	向下渐隐到页面底色,代替硬分隔线
raw 警示	顶栏下沿换成暖色渐隐条
传输进度	细条,左浅右深
冲突、篡改、警示行	左侧色条 + 向右渐隐的同色底
在线点	缓慢呼吸,不用发光阴影

blur 的性能约束:

• 全页面同时存在的 backdrop-filter 元素不超过 2 个。
• 禁止用于滚动列表中的元素,以及弹窗遮罩(遮罩用纯色 --scrim)。
• 必须有回退:@supports not (backdrop-filter: blur(1px)) 与 prefers-reduced-transparency: reduce 时,背景退化为不透明的 --bg。
• 玻璃背景下的文字对比度按「最差底色」验证,不得依赖背后内容。

5. 字体与图标

用途	字体
界面文字	思源黑体(--font-sans,系统无衬线兜底)
链接、哈希、密钥、文件大小	等宽(--font-mono)

字号档位不超过 5 档,字重只用 400 与 600。图标自绘 SVG,统一 1.5px 描边、24 网格,放在 ui/icons/,不引入图标库。

6. 布局与页面

WebDrop 是暂存区,频道工作区:聊天按 thread 展示，文件按 thread/文件夹组织；发送设备作为来源信息。

6.1 手机:频道导航与聊天/文件切换

进入频道就是纯聊天界面：单行顶栏（≡、# 频道名、加密图标、搜索、⋯）加底部输入框，没有页签。空间切换、频道列表、本空间的「文件 / 成员 / 邀请 / 分享」、账号与外观都在左侧抽屉（≡ 打开，返回键关闭）；点「文件」「成员」整页打开，左上角 ‹ 回到聊天。⋯ 里是空间设置、分享、邀请。触屏没有悬停，消息上不常驻删除按钮，点一下消息弹出菜单（复制、删除）。新建频道自动创建“常规”thread。文件页与桌面共用目录路径、上传、文件夹、排序、移动和预览组件。

频道加载中先画出页面框架（骨架屏：顶栏、频道列表、消息、输入框的灰色占位），不留白屏；等待不足约 300ms 时不显示，避免闪烁；占位轻微呼吸闪动，尊重「减少动效」。不用假进度条。加载失败时在骨架屏上给出错误与「重试」「回到首页」。

6.2 电脑:频道与 threads | 聊天 | 线程文件

左侧固定频道导航与 thread 列表，可直接切换已加入频道、新建频道、新建/重命名 thread，并打开账号与设备设置。中间完整高度展示当前 thread 的聊天，底部输入支持文字和文件附件。右侧是资源管理器式文件区：路径面包屑、上传文件、新建文件夹、按名称/大小/时间排序、多选下载、移动、双击预览。

设备与分享收进顶栏弹层，不占第四列。预览在独立弹层打开，不挤占聊天。加密目录先同步文件名、大小与 thread/folder 归属；受限文件必须显式点击“解密并预览文件”或下载后才读取内容，不能因选择列表项或刷新消耗次数。

6.3 顶栏

控件	作用
频道 id + 加密/明文徽标	当前频道与安全状态(§7.1)
在线点 + N/M	设备在线情况;手机上点开设备与分享抽屉
连接状态	仅在重连中或离线时显示
搜索	展开关键字输入(文本内容或文件名);再次点击关闭并清除关键字。类型分组一直可见
外观	跟随系统 / 亮色 / 暗色
设备与分享(仅手机)	打开抽屉

6.4 首页(初始状态)与页面

首页把「便捷分享」与「空间」做成两个并列分区（宽屏左右并列，窄屏上下排列，中间一条细线分隔），各有图标和一句话定位：

• 便捷分享（左）：临时 · 只读 · 对方无需账号，端到端加密。输入区（文字、拖入/选择/粘贴文件）加「创建分享」，下面紧跟「我的分享」列表。是写完即发的操作区。
• 空间（右）：长期 · 多人 · 登录使用。先列「我的空间」（名称、加密、角色、人数上限），底部是「新建空间」「加入空间」。是进入长期工作区的入口。

主页右上角提供外观菜单，右下角显示前端和后端的 tag 与短 commit hash 及上海时间的构建时间；无法取得 tag 时如实显示「未标记」。

操作	结果
快速分享(输入文本、拖入、粘贴、选择、相册、拍照)	先在首页编辑临时文本并收集文件;点「创建临时分享」后建立加密草稿并带入内容;点「完成分享」后生成链接与二维码
新建频道	登录后创建，自动成为该频道所有者；可选择是否端到端加密，默认启用；成员人数上限、TTL、受限下载次数和上传权限仍用同一频道模型
加入频道	扫码或粘贴链接 → 加入预览 → 加入
我的频道	点一行进入；垃圾桶从当前账号资源清单移除，不会删除频道，需二次确认；账号清单移除会同步到其他设备
账号与同步	用户名密码注册或登录;本地频道/分享凭据在 Worker 加密后同步,另一台设备登录后恢复;退出时撤销会话

登录/注册页是居中的单列卡片（标题与标语在上，卡片在下）；创建账号需要再输入一次密码确认，两次不一致时就地提示并禁用提交。账号设置是左侧导航 + 右侧单页（个人资料 / 我的设备 / 安全 / 空间邀请 / 同步与登录；手机上导航变为顶部横向页签），结果统一用 toast 反馈，设备重命名就地编辑，移除设备与退出登录需确认。

账号密码不提供找回流程。忘记密码会导致账号保险库无法解密;界面需在注册区域明确提示。本机记住登录通过 IndexedDB 保存 session 和不可导出的保险库 CryptoKey，刷新后恢复身份；退出或设备被撤销后清除。

未登录访问首页时先显示注册/登录页；收到的分享链接任何人可读；收到的频道链接要求登录，未登录先显示登录页，登录后继续加入。频道加入页按当前规则显示密码输入。右上角频道设置集中管理加入方式（登录后持链接加入 / 仅受邀账号）、频道密码、成员角色、邀请与撤销，不另设权限入口。

路由	页面
/	首页
/c/:id	已在「我的频道」里 → 频道暂存区;否则链接里带密钥 → 整页加入预览;否则「无法打开此频道」

别人发来的链接打开时,页面一加载就把 # 后面的密钥取走并清掉地址栏,再显示加入预览,确认后才加入。

频道分享面板与分享页里的二维码只给成员链接;所有者链接含管理权限,只提供复制,不出二维码。二维码固定深色码点、浅色底,暗色主题下也不反转,否则很多扫码器识别不了。

6.4.1 便捷分享

Share 是独立的只读发布资源，不创建频道成员或 threads。创建者在草稿中添加内容和设置，明确确认后封存；服务端清除 owner_hash，前端丢弃管理密钥，此后只有读取入口。访客打开分享链接直接读取加密清单，下载受限文件时计次数，不经过频道加入流程。详见 protocol.md §15。

6.5 频道 thread、文件管理与聊天

频道内桌面布局为左侧频道/thread 导航、中央聊天、右侧线程文件管理器。新建频道自动创建“常规”thread；用户可以继续创建和命名其他 thread，在各自 thread 中发言或上传文件。聊天消息显示发送设备名称和时间。

左栏按 thread 显示虚拟文件夹与文件。可以创建/重命名 thread、创建/重命名文件夹、多选文件并移动到当前 thread 的文件夹。文件预览仍使用中央预览区;消息不混入文件列表。手机上 thread 和文件树可横向/纵向收缩,聊天输入固定在文件列表下方、上传动作栏上方。

频道名、文件夹名和移动操作通过后端结构接口管理，其他设备收到通知后重新读取。文件名称和类型仍通过加密资源元数据同步，GATED 内容仅在显式操作后读取。

其他弹层:

名称	说明
条目详情	手机为底部抽屉,电脑为内联预览区;内容一致
扫码加入	相机识别二维码(浏览器自带 BarcodeDetector,不支持或无权限时退回「粘贴链接」)→ 加入预览(模式、权限)→ 加入后进入该频道
写文本	抽屉,Ctrl+Enter 发送;首页上用于快速分享
频道设置	顶栏齿轮打开设置面板;所有者可修改名称、成员人数上限、成员上传、保留时间和受限文件下载次数
设备管理	设备面板分别显示成员人数与已连接设备;成员人数按账号去重,同一账号可在多台设备登录;设备可重命名,所有者可移除任意设备

扫到的链接含密钥,只放在内存里,不写日志、不持久化。

原型说明:前端目前是验证设计的框架,频道列表只在内存里,刷新即清空;真实实现把链接存进 IndexedDB(architecture §6)。

6.5 条目

列表里的一行按内容类型决定画法,不大的文本、JSON、视频直接画在行里,不用点开:

内容	列表里的画法	快捷操作
文本	内容本身(没有标题);太长只显示前 6 行,点击进详情	复制
JSON(能解析成对象或数组)	格式化后等宽显示;超过 14 行或 1200 字符截断	复制
不大的视频(≤ 25 MB)	行内播放器(controls、preload="metadata")	下载
图片	缩略图 + 标题 + 小字	下载
压缩包、其他文件、大视频	类型图标 + 标题 + 小字	下载

小字依次为:设备 · 时间 · 大小 · 剩余下载次数,后面跟状态标签:v3(有历史)、有更新、冲突。传输中在行内显示细进度条。点标题行或文本区域打开详情(手机底部抽屉,电脑内联预览区)。

不能烧下载次数:按协议,文件超过 1 MiB 或设了下载上限就是 GATED,每次拉取都计一次下载(api.md)。所以:

• 文本与 JSON 内容本来就在内存里,一律直接画。

• 没有下载上限的视频、图片自动加载;有下载上限的不自动拉取:图片显示类型图标,视频显示占位「点击播放 · 会消耗 1 次下载」,点了才加载。

• 滚动列表、刷新页面都不应该消耗下载次数。

• 长列表使用 content-visibility: auto。注意它会让后代的 position: fixed 失效,弹层必须用 portal 挂到 body。

• 新的在前。

• 内联渲染一律是纯文本或原生媒体元素,不执行内容(threat-model §4)。

预览:

类型	呈现
图片、视频、音频	原生元素播放 blob URL,不执行内容
文本、JSON	纯文本等宽展示,JSON 格式化,最多读取前 200,000 字符
压缩包	只列出目录树与大小,不解压、不执行
其他	提示「暂不支持预览」,保留下载

6.6 修改、历史与便签

• 修改 = 追加新版本,后写者胜(不改协议)。文本编辑后显示「已编辑」;两台设备同时改同一条时,后到者生效,先到者的内容以冲突提示展示:「某设备同时改过:… [用他的][保留我的]」。
• 文件修改历史:新版本是一个替代旧条目的新条目,界面把它们折叠成同一个文件。条目显示 v3;别的设备更新了你还没看过的文件时显示「有更新」,详情里有一行「某设备 更新了此文件 [知道了]」;详情下方列出历史版本,可单独下载旧版本。需要在加密的 meta_json 里加可选字段 replaces(旧 item_id),后端不解析 meta,待写入 protocol §7。
• 便签是频道唯一的快照槽(protocol §9),多设备实时同步,最后写入者胜,不做字符级合并。默认折叠,折叠时显示第一行;他人正在编辑时显示「某设备 正在编辑」。
• 暂不做字符级协同编辑(需要新增协议条目类型,属于后续议题)。

7. 状态与诚实提示

7.1 频道安全徽标(顶栏)

状态	呈现
enc	小号锁图标 + 「加密」,--ok,点开说明「内容在浏览器内加密,服务端只见密文」
raw	整条顶栏下沿加 --warn 色条,文字「明文 · 服务端可见」,不可收起

7.2 条目状态

条目状态只有以下几种,由帧推导,组件按判别联合穷尽处理:

状态	条件	呈现
receiving	无 FINAL,帧连续	--busy 进度,标注「不完整」
complete	已认证 FINAL 且 0..n 连续	正常
incomplete	缺口,或长时间无 FINAL	--warn,可重试拉取
tampered	认证失败	整条替换为警示行,--danger,说明「内容被篡改,已丢弃」,不展示任何内容
expired / removed	tombstone	淡出后移除,可短暂保留一条「已过期 / 已删除」提示

7.3 连接状态(顶栏)

在线 · 重连中 · 离线(N 条待发送)。离线时仍可添加内容,发送进入队列,恢复后自动补发,无需用户操作。

7.4 必须如实表述的内容

场景	文案原则
ui_restrict_copy_download	说明这是界面限制,「成员仍可通过其他方式保存内容」,不暗示安全保证
下载次数	下载前提示「此文件剩余 N 次下载」;达上限提示「已被删除」
链接	分享前说明「持有链接即可访问」;成员链接与所有者链接分开展示,所有者链接标注「含管理权限」
历史可读	加入说明处写明「持有链接的人可读取此频道全部历史」
元数据	创建与设置页注明「不隐藏 IP 与访问时间」

7.5 频道文件预览与下载限制

• 新上传文件默认允许单帧内容直接随频道同步。加入频道的成员可直接看到文件名、类型、大小；PNG 等图片和 TXT 等文本可直接预览,不消耗下载次数。文件名与类型仍只存在于加密帧中。
• 超出单帧容量的文件保持 GATED,列表不自动读取内容。成员主动打开预览时才取回文件,并消耗一次下载次数;取回后显示解密出的文件名、类型和大小。EXE 等不支持内联预览的类型仍提供下载。
• 上传者可关闭直接预览并为文件设置下载次数上限。
• 设备标签优先显示浏览器提供的机型和系统版本,例如「Pixel 9 (Android 16) · A1B2C3D4」「Windows 11 · 1234ABCD」。浏览器没有暴露具体机型时显示能识别的平台名称;保留端点短标识以区分同型号设备。

7.6 空与错误状态

码	页面
members_full	加入预览页:「成员人数已满」,告知联系所有者
not_joined(被释放)	频道页整体替换为「你已被移出此频道」
not_found / gone	「频道不存在或已过期」
rate_limited	Toast,带重试倒计时
链接缺密钥 / 模式不符	拒绝进入,明确说明原因(降级防御,见 protocol §2)

8. 交互

场景	行为
发送文本	点「写」弹出输入,Ctrl+Enter 发送
粘贴	窗口任意位置 Ctrl+V 直接发送;手机点「粘贴」读取剪贴板(无权限时退回「写」)。文件或图片直接入队,先出现「传输中」条目
拖放	桌面整页接收拖放;拖入时出现覆盖提示,不改变布局
文件上传	上传前可设置是否让单帧文件直接同步预览,以及受限文件的下载次数上限
频道设置	顶栏齿轮打开;设置通过现有 PATCH /channels/{id}/settings 更新,服务端广播变更给在线成员
复制	点击复制,按钮短暂变为「已复制」,不弹 Toast
删除	确认删除后提交删除，并同步频道墓碑
新条目到达	若用户已滚到底部则自动跟随,否则底部出现「N 条新内容」
触控	可点击区域 ≥ 44px;底栏避开安全区(env(safe-area-inset-*))

9. 动效

使用 React ViewTransition(稳定版 React 19.3 已包含),原则是只在有空间关系处动:

场景	动画
首页 ↔ 频道 ↔ 设置(层级导航)	方向性滑入 nav-forward / nav-back
条目新增	CSS 淡入(row-in)。store 经 useSyncExternalStore 订阅,更新不在 transition 内,ViewTransition 不会触发,所以不用它
开屏	单线手写 WebDrop 逐笔画出,约 1.2s,仅每个会话首次出现,点击或按键可跳过;加载未完成时停在末笔
桌面左栏切换频道	淡入淡出,不滑动
条目状态变化、重连、后台同步	无动画(default="none")

规则:

• 一律 default="none",显式开启需要的触发。
• 时长:退出 150ms、进入 210ms、移动 400ms,取自 --duration-*。
• 必须尊重 prefers-reduced-motion(已在 base.css)。
• 顶栏、底栏用 viewTransitionName 隔离,并采用 backdrop-blur 的专用写法,避免闪烁。
• 不支持的浏览器直接无动画,功能不受影响。

10. 无障碍

• 所有交互元素可键盘操作,焦点环可见(--accent)。
• 状态不只靠颜色,配图标与文字。
• 动态内容(新条目、连接状态)用 aria-live="polite"。
• 触控目标 ≥ 44px;文本可缩放到 200% 不破版。

11. 文案

中文为默认语言;文案用语直白,不用感叹号与营销口吻。暂不做多语言,文案直接写在组件里。

12. 手机适配(iPhone / Android)

方面	做法
刘海与手势条	viewport-fit=cover;顶栏用 env(safe-area-inset-top),底部动作栏与抽屉用 inset-bottom,手机布局两侧用 inset-left/right(横屏)
视口高度	100vh 兜底 + 100dvh,避开地址栏伸缩
软键盘	需要输入的抽屉(写文本)从顶部出来,iOS 不缩小布局视口,底部抽屉会被键盘遮住;Android 用 interactive-widget=resizes-content
输入框缩放	触屏上 input / textarea 字号 16px,避免 iOS 聚焦时自动放大
点按	touch-action: manipulation 去掉双击缩放延迟;去掉点按高亮;触屏上可点区域 ≥ 44px;hover 样式只在支持 hover 的设备生效,避免粘在上一次点击处
返回键	弹层打开时压入一条历史记录,Android 返回键 / iOS 边缘滑动关闭弹层而不是离开页面(lib/useBackToClose.ts,这是唯一直接操作 history 的地方)
状态栏颜色	theme-color 跟随当前页面底色,手动切换亮暗和系统切换时都会更新
Safari 旧版	backdrop-filter 同时写 -webkit- 前缀
横屏 / 矮屏	高度 < 500px 时隐藏「最新」卡、动作栏改为横排;宽 ≥ 900 且高 ≥ 500 才用电脑布局,横屏手机不会被当成电脑
窄屏	< 360px 时顶栏只留在线点,条目小字允许换行
相机	「拍照」用 <input capture="environment">,iOS 与 Android 都会直接拉起相机;扫码在 Android Chrome 用 BarcodeDetector,iOS Safari 不支持,提示用系统相机扫码后打开链接,或粘贴链接。相机、剪贴板读取都要求 https(localhost 除外)
剪贴板	iOS 读取时会弹出系统「粘贴」确认,Android 会要求权限;被拒绝时退回「写」
图片格式	iPhone 的 HEIC 照片在非 Safari 浏览器里无法显示,预览失败时提示直接下载
下载	iOS 上 a[download] 配合 blob 会弹出存储菜单;大文件优先走 OPFS 临时存储；不支持时 Blob 回退最多 64 MiB

13. 空间、频道与频道分组

界面层级统一为「空间 → 频道分组（可选）→ 频道 → 聊天与文件夹」。原顶层频道对用户称为空间，原 thread 对用户称为频道。新建空间自动创建“常规”频道。空间负责成员、邀请、成员人数上限和加密边界；账号内设备不重复计入人数，设备只是账号的属性，只在账号设置里管理。频道分组只组织导航，不改变权限或加密密钥。

桌面最左是 64px 的空间窄栏（每个空间一个首字方块，当前空间反色；下方是新建空间与加入空间），其右 240px 的频道列：顶部是空间名与加密状态（点击打开空间设置），下面按分组展示频道，分组标题小号灰字，悬停才显示 + 与 ⋯，频道行 32px、选中为整行淡底；便签并入频道列底部。账号卡片贴在左下角横跨两栏。手机上这些都收进左侧抽屉：顶部是横向一排空间方块，其下是空间名栏与频道列表。支持新建/重命名分组、折叠分组、在分组内新建频道、将已有频道移入其他分组或移回未分组。旧 thread 自动作为未分组频道展示。中间显示当前频道聊天，右侧显示当前频道文件夹和文件。

空间设置集中管理成员、邀请和空间权限；频道管理提供名称与所属分组。分组名及归属由后端持久化并通过通知刷新，刷新与其他设备保持一致。协议/API 内部保留 channels/thread_id 等标识，避免因界面术语变更重建已有数据。

13.1 成员栏、邀请与通知

右侧栏顶部是「文件 / 成员 n」页签，默认文件；顶栏的人数按钮直接打开成员页，空间主还有一个 ＋ 直接打开邀请弹窗。手机上没有页签，「文件」「成员」放在左侧抽屉里。

成员页以用户为单位，按 Discord 的分组排列：在线 — n、离线 — n、待接受 — n（仅空间主可见，有「撤销」）。每行头像、昵称（有昵称时下方小字显示用户名），空间主带「空间主」标签；一个用户有多台设备时小字显示「在线设备/设备数 台设备在线」。**设备不再单独列出，只是用户的属性。**在线状态与设备数由后端按账号统计（GET /channels/{id}/members 的 online、devices、online_devices，在线 = 该账号在本频道有活动订阅），前端在成员页可见期间每 8 秒读取一次，不改动订阅流。空间主在页头有醒目的「＋ 邀请成员」，成员行悬停出现「移除」（需确认）。邀请与成员管理不再放在空间设置里，设置里只留一句指引。

邀请弹窗只收用户名；成功、撤销、移除、失败都弹 toast。toast 在右下角，4 秒消失（带操作按钮的 10 秒），最多 4 条，成功 / 失败 / 提示用左侧色条区分，aria-live。被邀请方登录后每 8 秒轮询账号邀请，出现新邀请就弹「xxx 邀请你加入 yyy [接受]」，点「接受」直接加入并进入空间；账号设置里的邀请收件箱同样显示空间名与邀请人。空间名与邀请人放在邀请 payload 的加密内容里（ChannelGrant.name / invitedBy，均为可选字段），服务端不可见；旧邀请没有这两个字段时回退为「空间 + ID 前 8 位」。

14. 文件管理器交互

文件区支持单击选中、Ctrl/Command 多选、Shift 连选、双击预览、右键菜单和键盘 Enter/Delete/Ctrl+A/Escape。文件夹单击选中、双击或菜单“打开文件夹”进入；面包屑用于快速返回。文件行提供更多菜单按钮，触屏也能访问操作。

右键文件提供预览、下载、复制名称、移动和删除；文件夹提供打开和重命名；空白区域提供上传、新建文件夹、全选。菜单和悬停卡通过 portal 挂载到 body，贴近指针且限制在视口内，支持 Escape、外部点击和键盘导航。

文件可拖入当前频道的文件夹或面包屑目录，多选文件可一起移动；跨空间/频道的内部拖放拒绝。外部文件可拖入指定文件夹上传。内部拖拽移动由后端更新资源归属，不重新加密或拉取文件。

悬停卡延迟显示名称、类型、大小、时间；已同步且非 GATED 的小图片/文本可显示缩略预览。GATED、上传中或校验失败的文件不会自动取内容，悬停不消耗下载次数。右侧文件区与聊天之间可拖动分隔条调整宽度，分隔条也支持键盘左右键。

15. 频道中的文件消息与发送者

聊天时间线采用 Discord 式布局：所有消息靠左，同一条左边线，左侧头像、右侧「名称 + 时间」一行与占满宽度的正文，不再区分自己和他人。同一发送者 5 分钟内连发的消息合并，只缩进对齐，悬停时在头像位置显示时间；悬停整行有淡底，右上角出现删除。文件消息是 360px 以内的文件卡片（图标、名称、大小与类型，右侧预览与下载）；没有头像时显示名称首字。受限文件不自动加载内容或媒体缩略图。

输入区是整体圆角框（左 + 附件、中间自增高输入、右发送），占位文案「给 #频道名 发消息」，Enter 发送、Shift+Enter 换行（输入法组合中不触发）。

乐观发送：点发送的同一帧就清空输入框并在时间线底部画出消息（半透明，aria-busy），后台再加密上传，不等后端；可以连续快速发送。worker 发布真实条目时带回 localId，在同一次状态更新里替换占位项，不闪烁、不重复。失败时占位项保留原文本并显示「发送失败 · 重试」，可删除；离线沿用本机发送队列。文件同理：确认上传选项后卡片立刻出现并显示进度。

发送者名称与头像从后端账号资料读取，回退固定用户名。资源作者由后端记录，昵称修改后其他设备同步更新展示。没有账号归属（未登录访客）时统一显示「访客」；界面里不再展示设备名，设备只在账号设置的「我的设备」里管理。

头像缩略图在 Worker 内生成，最大 64×64、编码后不超过 8 KB，仅使用 PNG/JPEG/WebP data URL；不使用第三方头像链接。圆形头像使用专门的 --radius-avatar token，消息气泡仍遵守现有圆角规范。

16. 记住账号和密码

登录/注册表单提供“记住账号和密码（本机）”选项，默认勾选。成功验证后才保存本机加密凭据，下次需要登录时自动填充用户名和密码；有效会话仍优先自动恢复。取消勾选时，只保留当前页面会话，后台同步不能再次写入自动登录数据。

正常退出登录清除会话，但保留用户明确选择保存的填充信息。“清除本机保存”同时清除保存的账号密码和自动恢复会话；如果当前已登录，可以继续使用当前页面，刷新后需重新登录。会话被服务端拒绝时清除本机恢复资料。界面提示只在自己的设备使用记住功能，并兼容浏览器自带密码管理器。