v1.3 修正 ScriptCard 动画问题 #1234
v1.3 修正 ScriptCard 动画问题 #1234
Conversation
There was a problem hiding this comment.
Pull request overview
该 PR 旨在修复 v1.3 中 ScriptCard（卡片视图）相关的动画/拖拽表现问题，并将“引导模式下无脚本时的演示数据”逻辑从 ScriptCard 下沉到 ScriptList 统一处理，从而让卡片/表格视图共享同一份过滤后的列表数据。
Changes:
- 在
ScriptList/index.tsx中引入guideMode，并在过滤阶段对空列表注入演示脚本数据。 - 移除
ScriptCard.tsx内部对引导模式演示数据的useMemo包装，改为直接使用父组件传入的scriptList。 - 调整过滤 effect 依赖项，确保 guideMode 切换会触发过滤结果更新。
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/pages/options/routes/ScriptList/index.tsx | 增加 guideMode 演示数据，并在过滤逻辑中选择真实列表/演示列表作为过滤目标 |
| src/pages/options/routes/ScriptList/ScriptCard.tsx | 移除 guideMode 演示数据逻辑，统一使用父组件传入的列表，减少额外 memo 包装 |
| // 一条演示数据 | ||
| const guideModeScriptList = [ | ||
| { | ||
| uuid: "demo-uuid-1234", | ||
| name: "Demo Script", | ||
| namespace: "demo", | ||
| sort: 0, | ||
| createtime: Date.now(), | ||
| checktime: Date.now(), | ||
| metadata: {}, | ||
| type: SCRIPT_TYPE_NORMAL, | ||
| favorite: [{ match: "Example", icon: "", website: "https://example.com" }], | ||
| } as ScriptLoading, |
There was a problem hiding this comment.
这里的演示脚本通过 as ScriptLoading 强行断言，但缺少 Script 必填字段（至少 status、runStatus）。在表格视图里有 a.status - b.status 这类排序逻辑，status 为 undefined 会产生 NaN，导致排序/筛选行为异常。建议补齐必填字段并避免类型断言（例如给 demo 设置 status: SCRIPT_STATUS_DISABLE、runStatus: SCRIPT_RUN_STATUS_COMPLETE 等）。
| // 一条演示数据 | ||
| const guideModeScriptList = [ | ||
| { | ||
| uuid: "demo-uuid-1234", | ||
| name: "Demo Script", | ||
| namespace: "demo", | ||
| sort: 0, | ||
| createtime: Date.now(), | ||
| checktime: Date.now(), | ||
| metadata: {}, | ||
| type: SCRIPT_TYPE_NORMAL, | ||
| favorite: [{ match: "Example", icon: "", website: "https://example.com" }], | ||
| } as ScriptLoading, | ||
| ]; |
There was a problem hiding this comment.
guideModeScriptList 定义在模块顶层且对象会在拖拽排序时被就地修改（例如后面会写入 s.sort = i）。这会让演示数据在组件卸载/重新进入引导模式后保留上一次的排序等状态，属于隐式的跨渲染共享状态。建议改为在组件内按需创建（例如用工厂函数/useMemo 返回新的数组与对象拷贝），避免被后续逻辑意外污染。
There was a problem hiding this comment.
看你要怎么的示例吧
现在的应该没这么多功能...
| // 如果是引导模式，且没有脚本，则使用演示数据 | ||
| const targetList = guideMode && scriptList.length === 0 ? guideModeScriptList : scriptList; | ||
|
|
||
| const list = targetList.filter((s) => { |
There was a problem hiding this comment.
这里把演示数据注入到 filterScriptList 后，卡片/表格里的启用、删除、拖拽排序等操作仍会按 uuid 调用后端接口；但 demo 的 uuid 并不在真实脚本列表中，容易造成无效请求/错误提示。建议为 demo 增加明确标记（例如 isDemo）并在相关操作入口处禁用或短路处理，避免引导模式下对不存在的脚本执行写操作。
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
@CodFrm ScriptCard好像不加 transition 比较好... ? 
你自行试一下哪个较好吧 |
明显还是有动画会流畅些呀 |
没 transition 是直接换位。有 transition 是换位时有些特效 那我不改这个 transition 了。就这样 |
2 participants
@CodFrm
Drag Drop 修改统一在 FilterList 搞
不要在 FilterList 之后又包一层 memo
虽然 memo 不像 useEffect, 应该是即时生效的