@@ -81,7 +81,7 @@ div.flex.h-dvh.flex-col ← (app)/layout.tsx
|
||||
|
||||
### 长列表(虚拟滚动)
|
||||
|
||||
资源库使用 TanStack Virtual(`src/app/(app)/components/library-list.tsx`),同样不使用定位:
|
||||
资源库使用 TanStack Virtual(`src/app/(app)/components/library/library-list.tsx`),同样不使用定位:
|
||||
|
||||
- 滚动容器由页面持有(上面那个唯一的 `overflow-y-auto`),虚拟器只计算该渲染哪些行。
|
||||
- 分组数据拍平成「提示 / 标题 / 一行卡片 / 空提示」四种行;可见行处于正常文档流,上下各一个占位 `div` 用 `height` 撑出未渲染部分。
|
||||
@@ -185,7 +185,7 @@ div.flex.h-dvh.flex-col ← (app)/layout.tsx
|
||||
| 页面组件 | `library-list`、`file-card`、`login-stage` 等 | 只做接线:传选择器、参数与回调 |
|
||||
|
||||
- 容器级交互 hook 统一签名 `useXxx(containerRef, options)`,在容器上做事件委托,彼此独立;删掉一行调用即可拆掉一个交互。
|
||||
- 目标靠 data 属性识别(`src/app/(app)/components/library-dom.ts`):`data-file-card` 网格单元、`data-card-focus` 卡片主操作、虚拟行 `data-index`。
|
||||
- 目标靠 data 属性识别(`src/app/(app)/components/library/library-dom.ts`):`data-file-card` 网格单元、`data-card-focus` 卡片主操作、虚拟行 `data-index`。
|
||||
- 表单等业务组件只通过回调对外通知(如 `LoginForm` 的 `onTyping / onReject / onAccept`),不知道外部如何呈现。
|
||||
|
||||
### 交互清单
|
||||
|
||||
Reference in New Issue
Block a user