diff --git a/CLAUDE.md b/CLAUDE.md index ba597f8..2f54f6d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -186,6 +186,36 @@ Painting 模型参数 schema 在 `src/platforms/painting/models/*.js` 中,参 - **模型列表缓存**:`modelApi.js` 中 `fetchPlatformModels` 使用 localStorage 30 秒 TTL + `pendingRequests` Map 并发去重。 - **平台包预加载**:dialogBox 顶层 `import` Painting 和 Video 平台包,触发自注册,确保首次使用时 registry 已就绪。 - **VirtualScroller 反旋转**:组件用外层 `transform: rotate(180deg)` 实现 reverse 底部锚定。所有作为 slot 插入的内容必须在根元素加 `transform: rotate(180deg)` 反旋转,否则文字/图片会颠倒显示。参考 `src/views/home/display/components/set.vue:2`。 +- **VirtualScroller 存在独立测试页**:`src/components/virtual-scroller/test.html` + `test-data.js`,可用于验证虚拟滚动行为。 +- **Element Plus `` 不响应 `autosize` 动态变化**:`ElInput` 只在 mount 时读取 `autosize`,prop 更新时不会重新计算高度。因此 `dialogBox` 中 `Sender` 必须绑定 `:key="useDisplay.Sender_variant"`,通过强制重挂载来使新的 `autosize`(`minRows`/`maxRows`)生效。 + +### VirtualScroller 坐标系统 + +`VirtualScroller` 使用 180deg 旋转实现 reverse 模式。`handleScroll` 内部将容器物理坐标映射为"页面逻辑坐标"后通过 `emit('scroll', {...})` 发出: + +| 字段 | 计算 | 含义 | +|------|------|------| +| `distanceToPageTop` | `scrollHeight - scrollTop - clientHeight` | 距离页面**顶部**(旧内容端)的距离 | +| `distanceToPageBottom` | `scrollTop` | 距离页面**底部**(新内容端)的距离 | +| `isAtPageTop` | `distanceToPageTop <= 0` | 滚动到页面最顶部 | +| `isAtPageBottom` | `distanceToPageBottom <= 0` | 滚动到页面最底部 | + +**注意**:`distanceToPageBottom = scrollTop`(不是 `distanceToPageTop`),表示从底部向上滚动的距离。判断"用户向上滚动了多少"应使用此字段。 + +### 输入框滚动收缩机制 + +滚动列表时提示词输入框自动收缩为一行,这是跨 4 个文件的响应式链路: + +1. `VirtualScroller` 发出 `scroll` 事件(含 `isAtPageBottom`、`distanceToPageBottom` 等) +2. `display/index.vue` 的 `handleScroll` 根据滚动位置切换 `useDisplay.Sender_variant`: + - `isAtPageBottom`(底部)→ `'updown'`(展开,5-9 行) + - `distanceToPageBottom >= 350`(已滚离底部 350px)→ `'default'`(收缩,1 行) + - 中间状态 → `'updown'`(展开) +3. `display.js` store 中 `Sender_variant` 是响应式 ref +4. `dialogBox/index.vue` 的 `autoSizeConfig` 计算属性读取 `Sender_variant`,返回 `{ minRows, maxRows }` +5. `Sender` 组件通过 `:key="useDisplay.Sender_variant"` **强制重挂载**(因为 Element Plus `ElInput` 不支持 `autosize` 动态更新),新实例以正确的行数初始化 + +滚动阈值 350px 对应 `VirtualScroller` 的 `bottomPlaceholderHeight`。 ### 接口速查 diff --git a/src/components/dialogBox/index.vue b/src/components/dialogBox/index.vue index ebe51d2..c66abdd 100644 --- a/src/components/dialogBox/index.vue +++ b/src/components/dialogBox/index.vue @@ -23,6 +23,7 @@