diff --git a/.agents/migration_plan_autocomplete.md b/.agents/migration_plan_autocomplete.md index b153779a8..95b04a573 100644 --- a/.agents/migration_plan_autocomplete.md +++ b/.agents/migration_plan_autocomplete.md @@ -45,21 +45,22 @@ ### Step 1: 迁移属性名称自动补全 ✅ 完成 **文件变更:** -- `apps/client/src/services/attribute_autocomplete.ts` — `initAttributeNameAutocomplete()` 支持双 API:传 `container` 走新库,传 `$el` 走旧库 -- `apps/client/src/widgets/attribute_widgets/attribute_detail.ts` — 属性名称输入框从 `` 改为 `
` 容器,值读写改用 `getInputValue()/setInputValue()` -- `apps/client/src/stylesheets/style.css` — 添加新库 CSS(隐藏搜索图标、样式对齐) -- `RelationMap.tsx` — **不变**,继续用旧 `$el` API +- `apps/client/src/services/attribute_autocomplete.ts` — 将 `initAttributeNameAutocomplete()` 完全使用 **Headless API (`@algolia/autocomplete-core`)** 重写,移除遗留的 jQuery autocomplete 调用。 +- `apps/client/src/widgets/attribute_widgets/attribute_detail.ts` — 维持原有 `` 模型不变,仅需增加 `onValueChange` 处理回调。 +- `apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx` — 维持原有回调逻辑,新旧无感替换。 +- `apps/client/src/stylesheets/style.css` — 增加自定义 Headless 渲染面板样式 (`.aa-core-panel`,`.aa-core-list` 等)。 -**说明:** -`initAttributeNameAutocomplete()` 同时支持新旧两种调用方式(overloaded interface),让消费者可以逐步迁移: -- `attribute_detail.ts` 传 `{ container }` → 使用 `autocomplete-js` -- `RelationMap.tsx` 传 `{ $el }` → 使用旧 `autocomplete.js` -- RelationMap 的迁移推迟到后续步骤(因为它的 prompt dialog 由 React 管理 input) +**架构说明:** +由于 Trilium 依赖同一页面同时运行多个 autocomplete 生命周期(边栏属性列表,底部编辑器等),原生 `@algolia/autocomplete-js` 会因为单例 DOM 冲突强行报错 "doesn't support multiple instances running at the same time"。 +解决方案是退化使用纯状态机的 `@algolia/autocomplete-core`,自己进行 DOM 劫持与面板渲染。 +- `requestAnimationFrame`:针对下拉层自动跟踪光标位置,适配面板的高频大小变化 +- 事件阻断:拦截了选择时候的 `Enter` 返回键事件气泡,避免误触外层 Dialog 销毁。 **验证方式:** -- ⬜ 打开一个笔记 → 点击属性面板 → 点击属性名称输入框 → 应能看到自动补全的属性名称列表 -- ⬜ 选择一个名称后,值应正确填入 -- ⬜ 关系图创建关系时,关系名输入框的自动补全仍正常(旧库路径) +- ✅ 打开一个笔记 → 点击属性面板弹出 "Label detail" → 输入属性名称时正常显示下拉自动补全框 +- ✅ 放大/缩小/变形整个面板,下拉菜单粘连位置准确 +- ✅ 键盘上下方向键可高亮,按 Enter 可选中当前项填充,且对话框不关闭 +- ✅ 关系图 (Relation map) 创建关系时,关系名输入框的自动补全同样工作正常 --- diff --git a/apps/client/src/services/attribute_autocomplete.ts b/apps/client/src/services/attribute_autocomplete.ts index 2910074d8..0fbf78ec2 100644 --- a/apps/client/src/services/attribute_autocomplete.ts +++ b/apps/client/src/services/attribute_autocomplete.ts @@ -18,8 +18,6 @@ interface InitAttributeNameOptions { open: boolean; /** Called when the user selects a value or the panel closes */ onValueChange?: (value: string) => void; - /** (Deprecated) Kept for compatibility during migration, not used anymore */ - useNewLib?: boolean; } // --------------------------------------------------------------------------- @@ -34,15 +32,6 @@ interface ManagedInstance { const instanceMap = new WeakMap(); -function destroyInstance(el: HTMLElement): void { - const inst = instanceMap.get(el); - if (inst) { - inst.cleanup(); - inst.panelEl.remove(); - instanceMap.delete(el); - } -} - // --------------------------------------------------------------------------- // Dropdown panel DOM helpers // --------------------------------------------------------------------------- diff --git a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts index c96974d1a..08aa6c4f0 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts @@ -379,7 +379,6 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget { $el: this.$inputName, attributeType: () => (["relation", "relation-definition"].includes(this.attrType || "") ? "relation" : "label"), open: true, - useNewLib: true, onValueChange: () => this.userEditedAttribute(), }); }); diff --git a/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx b/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx index eca3c4218..867fd44d3 100644 --- a/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx +++ b/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx @@ -432,8 +432,7 @@ function useRelationCreation({ mapApiRef, jsPlumbApiRef }: { mapApiRef: RefObjec attribute_autocomplete.initAttributeNameAutocomplete({ $el: $answer, attributeType: "relation", - open: true, - useNewLib: true + open: true }); } });