@@ -53,7 +53,7 @@ TorBox 是云端 debrid / seedbox 服务：代为下载种子、Usenet 与网页
|
||||
|
||||
- `--radius: 0.375rem`（6px，与官网一致），组件按 shadcn 派生规则取 `rounded-lg` / `rounded-xl`。
|
||||
- 间距只用 `gap-*`，不用 `space-x/y-*`；常用节奏：控件间 `gap-2`，区块内 `gap-3`，区块间 `gap-8`。
|
||||
- 内容最大宽度 `sm:max-w-5/6`，水平内边距 `px-4 md:px-6`；header、工具栏的内层容器与内容区对齐。
|
||||
- 内容最大宽度 `sm:max-w-[1920px]`，水平内边距 `px-4 md:px-6`；header、工具栏的内层容器与内容区对齐。
|
||||
- 等宽等高用 `size-*`，单行截断用 `truncate`，多行截断用 `line-clamp-*`。
|
||||
|
||||
## 5. 布局规则
|
||||
@@ -106,7 +106,7 @@ div.flex.h-dvh.flex-col ← (app)/layout.tsx
|
||||
| 下拉操作 | `DropdownMenu` |
|
||||
| 侧滑面板 | `Sheet`（右侧滑出、高度撑满、右上角关闭）：手机顶栏菜单 |
|
||||
| 图标按钮说明 | `Tooltip` |
|
||||
| 视频播放 | `VideoPlayer`（Video.js v10 + `components/videojs` 皮肤，`I18nProvider` 固定中文）；资源库在全屏 `Dialog` 中播放（类似视频网站的播放页），`next/dynamic` 按需加载；MP4、M4V、WebM 直接播放原文件，其他格式经 TorBox 转码为 HLS（`HlsJsVideo`，hls.js 只在此时加载），信息行注明「TorBox 转码」；`onClose` 在画面左上角放关闭按钮（皮肤的 `topStart` 插槽，样式与显隐同右上角按钮组）；标题右侧提供下载与「PotPlayer 播放」（手机宽度 `< md` 隐藏 PotPlayer）；播放错误说明替换为中文并提示换用 PotPlayer |
|
||||
| 视频播放 | `VideoPlayer`（Video.js v10 + `components/videojs` 皮肤，`I18nProvider` 固定中文）；资源库在 `Dialog` 中播放（类似视频网站的播放页）：手机全屏，`sm` 起铺满顶栏以下、顶栏保持可见，内容限宽 1920px 居中；非模态（`modal={false}`），看视频时顶栏照常可用，被盖住的 `<main>` 设为 `inert`；不渲染变暗模糊的遮罩（`showOverlay={false}`），点击弹窗外不关闭（`disablePointerDismissal`），`next/dynamic` 按需加载；MP4、M4V、WebM 直接播放原文件，其他格式经 TorBox 转码为 HLS（`HlsJsVideo`，hls.js 只在此时加载），信息行注明「TorBox 转码」；`onClose` 在画面左上角放关闭按钮（皮肤的 `topStart` 插槽，样式与显隐同右上角按钮组）；标题右侧提供下载与「PotPlayer 播放」（手机宽度 `< md` 隐藏 PotPlayer）；播放错误说明替换为中文并提示换用 PotPlayer |
|
||||
| 图片预览 | `ImageLightbox`（yet-another-react-lightbox + Zoom）：传入一组图片与当前序号；资源库以一个资源分组内的图片为一组，组内首尾循环，不跨组；列表只渲染一个灯箱 |
|
||||
| 提示消息 | `src/lib/message.ts`（不直接调用 `toast`） |
|
||||
| 错误提示 | `Alert variant="destructive"` |
|
||||
@@ -204,7 +204,7 @@ div.flex.h-dvh.flex-col ← (app)/layout.tsx
|
||||
| 分组标题 | 24 小时内加入的资源显示呼吸的 NEW | `NewBadge`，以数据拉取时间为「现在」 |
|
||||
| 分组吸顶 | 滚过分组标题后标题吸附在顶部，下一分组到达时被推出；吸附时可直接收起该分组并回到其标题处 | 原生 `sticky` + 分组容器（`layoutVirtualRows`），无滚动监听 |
|
||||
| 全部展开 / 收起 | 工具栏图标按钮，有展开的资源时收起全部，否则展开全部；当前分组保持在顶部 | `setAllExpanded` + 列表订阅 `bulkToggleCount` |
|
||||
| 视频播放 | 点击视频封面或「播放」全屏打开并自动开始，焦点交给播放器（空格、方向键等快捷键直接可用）；视频在顶部（手机贴边），下方依次是标题、信息行与操作；视频宽度上限按视口高度换算（`(100dvh - 9rem) × 16/9`），矮屏时等比缩小居中；关闭按钮在视频左上角、随控制栏显隐，也可 Esc 或返回键 / 返回手势关闭（打开时压入一条历史记录，用其他方式关闭时撤回，不留多余记录）；「PotPlayer 播放」交给外部播放器后关闭 | `LibraryVideoDialog` + `VideoPlayer` + `useCloseOnBack`；弹窗与灯箱都在列表层只渲染一个，全屏或缩放窗口重建卡片行时不会中断播放 |
|
||||
| 视频播放 | 点击视频封面或「播放」全屏打开并自动开始，焦点交给播放器（空格、方向键等快捷键直接可用）；视频在顶部（手机贴边），下方依次是标题、信息行与操作；视频宽度上限按视口高度换算（`(100dvh - 9rem) × 16/9`，`sm` 起扣掉顶栏用 `14rem`），矮屏时等比缩小居中；关闭按钮在视频左上角、随控制栏显隐，也可点顶栏品牌标识（看视频时变成「返回资源库」按钮，经 `useVideoDialogStore` 登记的关闭方法）、Esc 或返回键 / 返回手势关闭（打开时压入一条历史记录，用其他方式关闭时撤回，不留多余记录）；「PotPlayer 播放」交给外部播放器后关闭 | `LibraryVideoDialog` + `VideoPlayer` + `useCloseOnBack`；弹窗与灯箱都在列表层只渲染一个，全屏或缩放窗口重建卡片行时不会中断播放 |
|
||||
| 视频播放列表 | 同一资源的视频超过一个时始终显示，无边框，标题行只有「播放列表 3 / 12」：宽屏（`≥ lg`）在右侧占满高度，窄屏在信息行下方占满剩余高度（最低 12rem，更矮时整块滚动），内容多时只滚动列表；点击切换，播完自动接下一个（最后一个不循环），当前项高亮并滚入视野；切换同时转移封面的「上次播放」标记。Video.js v10 没有播放列表功能（官方列为已知缺口），所以列表与接续逻辑由项目自己实现 | `VideoPlaylist` + `LibraryVideoDialog`（`VideoPlayer` 的 `onEnded`）；顺序与资源列表一致，受类型、搜索筛选影响 |
|
||||
| 图片预览 | 点击图片封面或「预览」打开灯箱：左右键 / 按钮 / 滑动在同一分组内循环切换；滚轮、双击、双指或工具栏按钮缩放；Esc、点击空白处或下拉关闭，焦点回到打开它的按钮 | `ImageLightbox`；配色通过 `--yarl__*` 变量映射到主题变量，图标换成 lucide，加载超过 0.4s 才淡入转圈；减弱动态效果由灯箱自行处理 |
|
||||
| 手机顶栏菜单 | 宽度 `< md` 时顶栏右侧的播放列表、退出登录与工具栏的来源 / 下载状态 / 类型三组筛选收进右上角汉堡按钮；点击后菜单从右侧滑出（高度撑满，右上角关闭）：筛选按等宽网格排列并带「重置」（只清这三项，保留关键词），下面是 M3U 的「复制 M3U 地址」（手机上没有 PotPlayer，不提供「用 PotPlayer 打开」），退出登录固定在底部；三项中任一项不是「全部」时汉堡图标右上角弹出翠绿提示点，读屏名为「菜单（已启用筛选）」 | `MobileMenu`（`Sheet`）+ `LibraryFilters layout="stacked"`（与工具栏共用）；提示点用单格 grid 叠层 + Motion `scale`，参数见 `INDICATOR_DOT`；来源计数只在菜单打开时计算 |
|
||||
|
||||
Reference in New Issue
Block a user