docs: consolidate account workspace architecture
This commit is contained in:
justme committed
1 parent
b65e32885f
commit
c2ea1b7f64
3 files changed
+145
-90
No files matched your search
+70
-76
@@ -74,54 +74,17 @@ blur 的性能约束:
|
||||
|
||||
## 6. 布局与页面
|
||||
|
||||
WebDrop 是**暂存区**,不是聊天室:内容按类型与待办动作组织,不按「谁发的」;发送设备只作为一行小字。
|
||||
WebDrop 是**暂存区**,频道工作区:聊天按 thread 展示，文件按 thread/文件夹组织；发送设备作为来源信息。
|
||||
|
||||
### 6.1 手机(< 900px):最新 + 分类 + 底部动作栏
|
||||
### 6.1 手机:频道导航与聊天/文件切换
|
||||
|
||||
```
|
||||
┌────────────────────────────┐
|
||||
│▒ abc123 🔒加密 ●●○ 2/3 🔍 ◐ ⇧│ ← 模糊顶栏
|
||||
├────────────────────────────┤
|
||||
│ 最新 │ 最近一项放大,拇指区一键取走
|
||||
│ [图标] 屏幕录制.webm │
|
||||
│ iPhone · 14:20 · 1.8 MB │
|
||||
│ [ 预览 ] [ 下载 ] │ 文本则是 [ 复制 ]
|
||||
├────────────────────────────┤
|
||||
│ ▸ 便签 待办… │ 折叠,点开编辑
|
||||
├────────────────────────────┤
|
||||
│ [全部][文件][文本][图片]… │ 类型分组常驻(可横向滑动)
|
||||
│ [缩略] project-assets.zip ⬇│
|
||||
│ [缩略] 设计稿.svg v3 有更新 ⬇│
|
||||
│ [文本] 明天 10 点开会… ⧉ │
|
||||
├────────────────────────────┤
|
||||
│▒ 粘贴 文件 相册 拍照 扫码 写 │ ← 模糊底部动作栏
|
||||
└────────────────────────────┘
|
||||
```
|
||||
顶栏下显示账号频道导航与当前频道的 threads。新建频道自动创建“常规”thread，成员可直接聊天和上传。下方用“聊天 / 文件”切换同一 thread 的内容，聊天输入位于底部；文件区与桌面共用目录路径、上传、文件夹、排序、移动和预览组件。
|
||||
|
||||
- 底部是**动作**而不是输入框:粘贴(读剪贴板,文字或图片)、文件、相册、拍照、扫码、写。点「写」才弹出输入。
|
||||
- 点列表项或「最新」卡打开底部抽屉详情(预览、操作、历史)。
|
||||
### 6.2 电脑:频道与 threads | 聊天 | 线程文件
|
||||
|
||||
### 6.2 电脑(≥ 900px):列表 + 内联预览 + 窄栏
|
||||
左侧固定频道导航与 thread 列表，可直接切换已加入频道、新建频道、新建/重命名 thread，并打开账号与设备设置。中间完整高度展示当前 thread 的聊天，底部输入支持文字和文件附件。右侧是资源管理器式文件区：路径面包屑、上传文件、新建文件夹、按名称/大小/时间排序、多选下载、移动、双击预览。
|
||||
|
||||
```
|
||||
┌───────────────────────────────────────────────────┬───┐
|
||||
│ abc123 🔒加密 ●●○ 2/3 🔍 ◐ │ ‹ │
|
||||
├────────────────────┬──────────────────────────────┤2/3│
|
||||
│ [粘贴][文件][扫码][写]│ 屏幕录制.webm │ ⇧ │
|
||||
│ ▸ 便签 待办… │ iPhone · 14:20 · 剩 8 次下载 │ │
|
||||
│ [全部 文件 文本 …] │ [下载] [删除] │ │
|
||||
│ ☐ [缩略] zip ⬇ │ ┌────────────────────────┐ │ │
|
||||
│ ☐ [缩略] 设计稿 ⬇ │ │ 内联预览(视频/图片/目录) │ │ │
|
||||
│ ☐ [文本] 开会… ⧉ │ └────────────────────────┘ │ │
|
||||
│ 已选 2 项 [下载] │ 修改历史 v3 当前 / v2 / v1 │ │
|
||||
└────────────────────┴──────────────────────────────┴───┘
|
||||
全局:Ctrl+V 粘贴即发送;拖到窗口任意位置即上传
|
||||
```
|
||||
|
||||
- 点左侧一行,右侧内联预览,不弹窗来回开关;默认选中最新一项。
|
||||
- 多选后可批量下载。
|
||||
- 设备与分享是低频操作,默认收成右侧窄栏(在线数、分享图标),需要时展开。
|
||||
- 窗口任意位置 `Ctrl+V` 都能直接发送(在输入框内粘贴时不拦截);拖到窗口任意位置即上传。
|
||||
设备与分享收进顶栏弹层，不占第四列。预览在独立弹层打开，不挤占聊天。加密目录先同步文件名、大小与 thread/folder 归属；受限文件必须显式点击“解密并预览文件”或下载后才读取内容，不能因选择列表项或刷新消耗次数。
|
||||
|
||||
### 6.3 顶栏
|
||||
|
||||
@@ -149,6 +112,10 @@ WebDrop 是**暂存区**,不是聊天室:内容按类型与待办动作组织,
|
||||
│ │ 拖入文件 / 文件名列表 │ │
|
||||
│ │ [选择文件] [粘贴] [创建临时分享]│ │
|
||||
│ └────────────────────────────┘ │
|
||||
│ ┌ 账号与同步 ─────────────────┐ │
|
||||
│ │ 用户名 / 密码 [登录并同步] │ │
|
||||
│ │ 资源清单先在本机加密后同步 │ │
|
||||
│ └────────────────────────────┘ │
|
||||
│ 我的频道(有才显示) │
|
||||
│ abc123… 🔒加密 所有者 3 台设备 │
|
||||
│ ┌ 设备频道 ───────────────────┐ │
|
||||
@@ -161,9 +128,14 @@ WebDrop 是**暂存区**,不是聊天室:内容按类型与待办动作组织,
|
||||
| 操作 | 结果 |
|
||||
|---|---|
|
||||
| 快速分享(输入文本、拖入、粘贴、选择、相册、拍照) | 先在首页编辑临时文本并收集文件;点「创建临时分享」后建立加密草稿并带入内容;点「完成分享」后生成链接与二维码 |
|
||||
| 新建频道 | 抽屉:模式(加密 / 明文)、设备数、保留时间、允许成员上传;创建后直接展示分享面板与二维码 |
|
||||
| 新建频道 | 登录后创建，自动成为该频道所有者；可选择是否端到端加密，默认启用；设备数、TTL、受限下载次数和上传权限仍用同一频道模型 |
|
||||
| 加入频道 | 扫码或粘贴链接 → 加入预览 → 加入 |
|
||||
| 我的频道 | 点一行进入;垃圾桶只是从本机移除,**不会删除频道**,需二次确认 |
|
||||
| 我的频道 | 点一行进入；垃圾桶从当前账号/访客资源清单移除，**不会删除频道**，需二次确认；账号清单移除会同步到其他设备 |
|
||||
| 账号与同步 | 用户名密码注册或登录;本地频道/分享凭据在 Worker 加密后同步,另一台设备登录后恢复;退出时撤销会话 |
|
||||
|
||||
账号密码不提供找回流程。忘记密码会导致账号保险库无法解密;界面需在注册区域明确提示。本机记住登录通过 IndexedDB 保存 session 和不可导出的保险库 CryptoKey，刷新后恢复身份；退出或设备被撤销后清除。
|
||||
|
||||
未登录访问首页时先显示注册/登录页；收到的频道或分享链接保持访客入口。频道加入页按当前规则显示密码输入或登录提示。右上角频道设置集中管理加入方式、陌生人开关、频道密码、成员角色、邀请与撤销，不另设权限入口。
|
||||
|
||||
| 路由 | 页面 |
|
||||
|---|---|
|
||||
@@ -174,37 +146,17 @@ WebDrop 是**暂存区**,不是聊天室:内容按类型与待办动作组织,
|
||||
|
||||
频道分享面板与分享页里的二维码只给**成员链接**;所有者链接含管理权限,只提供复制,不出二维码。二维码固定深色码点、浅色底,暗色主题下也不反转,否则很多扫码器识别不了。
|
||||
|
||||
### 6.4.1 分享(快速分享的结果)
|
||||
### 6.4.1 便捷分享
|
||||
|
||||
**分享和频道是两种东西,底层只维护一套**:分享是频道的一个预设——成员不可上传、删除策略仅所有者,并且创建者在点「完成分享」的那一刻**丢弃所有者密钥**,从此没有房主,任何人(包括创建者)都不能再追加、修改或删除,只能等 TTL 到期。
|
||||
Share 是独立的只读发布资源，不创建频道成员、threads 或席位。创建者在草稿中添加内容和设置，明确确认后封存；服务端清除 owner_hash，前端丢弃管理密钥，此后只有读取入口。访客打开分享链接直接读取加密清单，下载受限文件时计次数，不经过频道加入流程。详见 protocol.md §15。
|
||||
|
||||
```
|
||||
草稿(创建者) 已封存(创建者与访客)
|
||||
┌────────────────────────────────┐ ┌──────────────────────┐
|
||||
│ 新建分享 · 草稿 [粘贴][文件][写]│ │ 我的分享 · 已封存只读 │
|
||||
├───────────────┬────────────────┤ │ 分享链接 [复制][二维码]│
|
||||
│ 内容清单 │ 选中的内容 │ │ 3 项内容 [全部下载] │
|
||||
│ ▢ a.zip 46MB ✕│ [文件预览] │ │ 〃 开会地址… │
|
||||
│ 〃 文本 120B ✕ │ [替换文件] │ │ ▢ a.zip [下载] │
|
||||
│ │ │ └──────────────────────┘
|
||||
│ │ 文本可直接编辑 │
|
||||
├───────────────┴────────────────┤
|
||||
│ 有效期 · 最多访客 · 下载次数 │
|
||||
│ □ 我已了解,完成后无法再修改 │
|
||||
│ [ 完成分享 ] │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
### 6.5 频道 thread、文件管理与聊天
|
||||
|
||||
| 阶段 | 说明 |
|
||||
|---|---|
|
||||
| 草稿 | 左侧列出内容,选择后在右侧预览;创建者还握着所有者密钥,可直接修改文本、替换或移除文件,并调整有效期、最多访客、每个文件下载次数。**此时没有分享链接**,不会被别人看到 |
|
||||
| 完成分享 | 页面内勾选「完成后会生成分享链接和二维码。此后任何人(包括你)都不能再添加、修改或删除内容,只能等它过期」后,按钮才可用;点击即生成链接与二维码 |
|
||||
| 已封存(创建者) | 只读列表 + 「分享给别人」卡片(链接、二维码、说明) |
|
||||
| 已封存(访客) | 只读列表,只能预览、下载、复制;「全部下载」按钮 |
|
||||
频道内桌面布局为左侧频道/thread 导航、中央聊天、右侧线程文件管理器。新建频道自动创建“常规”thread；用户可以继续创建和命名其他 thread，在各自 thread 中发言或上传文件。聊天消息显示发送设备名称和时间。
|
||||
|
||||
- 访客打开链接后先看加入预览,确认才占席位。访客那一端如何识别「分享」:`members_can_upload=false` 即渲染为只读收件页,不需要新协议字段。
|
||||
- 创建者的所有者链接不展示、不出二维码。
|
||||
- 首页分成「我的分享」(草稿 / 已封存 / 收到的,带剩余时间)和「我的频道」。
|
||||
左栏按 thread 显示虚拟文件夹与文件。可以创建/重命名 thread、创建/重命名文件夹、多选文件并移动到当前 thread 的文件夹。文件预览仍使用中央预览区;消息不混入文件列表。手机上 thread 和文件树可横向/纵向收缩,聊天输入固定在文件列表下方、上传动作栏上方。
|
||||
|
||||
thread 名、文件夹名和移动操作使用同一套 CONTROL 日志条目同步；端到端加密开启时元数据是密文，关闭时服务端可见。两种传输选项共享相同的线程和目录模型。GATED 文件通过独立加密目录显示名称和归属，内容仅在显式操作后读取；没有目录记录的旧文件仍显示通用占位。
|
||||
|
||||
其他弹层:
|
||||
|
||||
@@ -213,7 +165,8 @@ WebDrop 是**暂存区**,不是聊天室:内容按类型与待办动作组织,
|
||||
| 条目详情 | 手机为底部抽屉,电脑为内联预览区;内容一致 |
|
||||
| 扫码加入 | 相机识别二维码(浏览器自带 `BarcodeDetector`,不支持或无权限时退回「粘贴链接」)→ 加入预览(模式、权限)→ 加入后进入该频道 |
|
||||
| 写文本 | 抽屉,`Ctrl+Enter` 发送;首页上用于快速分享 |
|
||||
| 频道设置 | 尚未实现(席位管理等) |
|
||||
| 频道设置 | 顶栏齿轮打开设置面板;所有者可修改名称、席位、成员上传、保留时间和受限文件下载次数 |
|
||||
| 设备管理 | 设备面板显示已加入席位数;设备可重命名,所有者可重命名任意设备并移除其他设备 |
|
||||
|
||||
扫到的链接含密钥,只放在内存里,不写日志、不持久化。
|
||||
|
||||
@@ -294,7 +247,14 @@ WebDrop 是**暂存区**,不是聊天室:内容按类型与待办动作组织,
|
||||
| 历史可读 | 加入说明处写明「持有链接的人可读取此频道全部历史」 |
|
||||
| 元数据 | 创建与设置页注明「不隐藏 IP 与访问时间」 |
|
||||
|
||||
### 7.5 空与错误状态
|
||||
### 7.5 频道文件预览与下载限制
|
||||
|
||||
- 新上传文件默认允许单帧内容直接随频道同步。加入频道的访客可直接看到文件名、类型、大小；PNG 等图片和 TXT 等文本可直接预览,不消耗下载次数。文件名与类型仍只存在于加密帧中。
|
||||
- 超出单帧容量的文件保持 GATED,列表不自动读取内容。访客主动打开预览时才取回文件,并消耗一次下载次数;取回后显示解密出的文件名、类型和大小。EXE 等不支持内联预览的类型仍提供下载。
|
||||
- 上传者可关闭直接预览并为文件设置下载次数上限。
|
||||
- 设备标签优先显示浏览器提供的机型和系统版本,例如「Pixel 9 (Android 16) · A1B2C3D4」「Windows 11 · 1234ABCD」。浏览器没有暴露具体机型时显示能识别的平台名称;保留端点短标识以区分同型号设备。
|
||||
|
||||
### 7.6 空与错误状态
|
||||
|
||||
| 码 | 页面 |
|
||||
|---|---|
|
||||
@@ -311,8 +271,10 @@ WebDrop 是**暂存区**,不是聊天室:内容按类型与待办动作组织,
|
||||
| 发送文本 | 点「写」弹出输入,`Ctrl+Enter` 发送 |
|
||||
| 粘贴 | 窗口任意位置 `Ctrl+V` 直接发送;手机点「粘贴」读取剪贴板(无权限时退回「写」)。文件或图片直接入队,先出现「传输中」条目 |
|
||||
| 拖放 | 桌面整页接收拖放;拖入时出现覆盖提示,不改变布局 |
|
||||
| 文件上传 | 上传前可设置是否让单帧文件直接同步预览,以及受限文件的下载次数上限 |
|
||||
| 频道设置 | 顶栏齿轮打开;设置通过现有 `PATCH /channels/{id}/settings` 更新,服务端广播变更给在线成员 |
|
||||
| 复制 | 点击复制,按钮短暂变为「已复制」,不弹 Toast |
|
||||
| 删除 | 单击删除后条目消失并给 5 秒「撤销」(撤销只在本地延迟提交删除) |
|
||||
| 删除 | 确认删除后提交删除，并同步频道墓碑 |
|
||||
| 新条目到达 | 若用户已滚到底部则自动跟随,否则底部出现「N 条新内容」 |
|
||||
| 触控 | 可点击区域 ≥ 44px;底栏避开安全区(`env(safe-area-inset-*)`) |
|
||||
|
||||
@@ -364,5 +326,37 @@ WebDrop 是**暂存区**,不是聊天室:内容按类型与待办动作组织,
|
||||
| 相机 | 「拍照」用 `<input capture="environment">`,iOS 与 Android 都会直接拉起相机;扫码在 Android Chrome 用 `BarcodeDetector`,iOS Safari 不支持,提示用系统相机扫码后打开链接,或粘贴链接。相机、剪贴板读取都要求 https(`localhost` 除外) |
|
||||
| 剪贴板 | iOS 读取时会弹出系统「粘贴」确认,Android 会要求权限;被拒绝时退回「写」 |
|
||||
| 图片格式 | iPhone 的 HEIC 照片在非 Safari 浏览器里无法显示,预览失败时提示直接下载 |
|
||||
| 下载 | iOS 上 `a[download]` 配合 blob 会弹出存储菜单;大文件要走 Service Worker 流式下载(架构 §6,阶段 4) |
|
||||
| 下载 | iOS 上 `a[download]` 配合 blob 会弹出存储菜单;大文件优先走 OPFS 临时存储；不支持时 Blob 回退最多 64 MiB |
|
||||
|
||||
|
||||
## 13. 空间、频道与频道分组
|
||||
|
||||
界面层级统一为「空间 → 频道分组（可选）→ 频道 → 聊天与文件夹」。原顶层频道对用户称为空间，原 thread 对用户称为频道。新建空间自动创建“常规”频道。空间负责成员、邀请、设备席位和加密边界；频道分组只组织导航，不改变权限或加密密钥。
|
||||
|
||||
左侧上段显示账号与空间列表，下段按分组展示频道。支持新建/重命名分组、折叠分组、在分组内新建频道、将已有频道移入其他分组或移回未分组。旧 thread 自动作为未分组频道展示。中间显示当前频道聊天，右侧显示当前频道文件夹和文件。
|
||||
|
||||
空间设置集中管理成员、邀请和空间权限；频道管理提供名称与所属分组。分组名及归属通过已有加密 CONTROL 日志同步，刷新与其他设备保持一致。协议/API 内部保留 channels/thread_id 等标识，避免因界面术语变更重建已有数据。
|
||||
|
||||
## 14. 文件管理器交互
|
||||
|
||||
文件区支持单击选中、Ctrl/Command 多选、Shift 连选、双击预览、右键菜单和键盘 Enter/Delete/Ctrl+A/Escape。文件夹单击选中、双击或菜单“打开文件夹”进入；面包屑用于快速返回。文件行提供更多菜单按钮，触屏也能访问操作。
|
||||
|
||||
右键文件提供预览、下载、复制名称、移动和删除；文件夹提供打开和重命名；空白区域提供上传、新建文件夹、全选。菜单和悬停卡通过 portal 挂载到 body，贴近指针且限制在视口内，支持 Escape、外部点击和键盘导航。
|
||||
|
||||
文件可拖入当前频道的文件夹或面包屑目录，多选文件可一起移动；跨空间/频道的内部拖放拒绝。外部文件可拖入指定文件夹上传。内部拖拽移动仅追加目录控制记录，不重新加密或拉取文件。
|
||||
|
||||
悬停卡延迟显示名称、类型、大小、时间；已同步且非 GATED 的小图片/文本可显示缩略预览。GATED、上传中或校验失败的文件不会自动取内容，悬停不消耗下载次数。右侧文件区与聊天之间可拖动分隔条调整宽度，分隔条也支持键盘左右键。
|
||||
|
||||
## 15. 频道中的文件消息与发送者
|
||||
|
||||
聊天时间线同时显示文本和已发布的文件，文件消息使用头像、发送者名称、时间和文件卡片，卡片提供预览和下载。当前账号发出的消息靠右，其他人的消息靠左；没有头像时显示名称首字。上传中显示进度和状态，受限文件不自动加载内容或媒体缩略图。
|
||||
|
||||
发送者名称优先使用发送时的个人名称，回退固定用户名；设备名保留在提示中。姓名和头像快照随空间加密日志同步，其他账号和设备刷新后仍能看到原上传者。旧记录没有发送者快照时回退设备来源，不推测为当前用户。
|
||||
|
||||
头像缩略图在 Worker 内生成，最大 64×64、编码后不超过 8 KB，仅使用 PNG/JPEG/WebP data URL；不使用第三方头像链接。圆形头像使用专门的 --radius-avatar token，消息气泡仍遵守现有圆角规范。
|
||||
|
||||
## 16. 记住账号和密码
|
||||
|
||||
登录/注册表单提供“记住账号和密码（本机）”选项，默认勾选。成功验证后才保存本机加密凭据，下次需要登录时自动填充用户名和密码；有效会话仍优先自动恢复。取消勾选时，只保留当前页面会话，后台同步不能再次写入自动登录数据。
|
||||
|
||||
正常退出登录清除会话，但保留用户明确选择保存的填充信息。“清除本机保存”同时清除保存的账号密码和自动恢复会话；如果当前已登录，可以继续使用当前页面，刷新后需重新登录。会话被服务端拒绝时清除本机恢复资料。界面提示只在自己的设备使用记住功能，并兼容浏览器自带密码管理器。
|
||||
Reference in new issue
Block a user