React State优化:Table column#1247
Conversation
|
又改回来了? |
There was a problem hiding this comment.
Pull request overview
该 PR 主要针对选项页脚本列表(Table 视图)的列定义与列宽调整逻辑做 React state/渲染优化:将 columns 统一收敛到一个 useMemo,并用“手动覆盖宽度”的方式减少列宽输入时触发表格重渲染,同时补充“重置成功”的多语言提示文案。
Changes:
- 将表格
columns由多处useCallback/useMemo组合改为单一useMemo生成,减少引用变化带来的重渲染。 - 重做列宽调整:用
manualWidths保存覆盖值、inputBuffer处理输入缓冲、dealColumns合并并过滤隐藏列(width = -1)。 - 新增
reset_successi18n 文案,并调整部分语言的save_success表述。
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/options/routes/ScriptList/ScriptTable.tsx | 表格 columns 与列宽调整状态重构,增加重置提示与更轻量的列宽合并逻辑 |
| src/locales/zh-TW/translation.json | 新增 reset_success 文案 |
| src/locales/zh-CN/translation.json | 新增 reset_success 文案 |
| src/locales/vi-VN/translation.json | 新增 reset_success 文案 |
| src/locales/ru-RU/translation.json | 新增 reset_success;调整 save_success 文案 |
| src/locales/ja-JP/translation.json | 新增 reset_success 文案 |
| src/locales/en-US/translation.json | 新增 reset_success;调整 save_success 文案 |
| src/locales/de-DE/translation.json | 新增 reset_success 文案 |
| src/locales/ach-UG/translation.json | 新增 reset_success 文案(当前为英文直出) |
| [] | ||
| ); | ||
|
|
||
| const currentActiveWidth = manualWidths[columns[selectColumn].key as string] ?? columns[selectColumn].width; |
There was a problem hiding this comment.
这里 currentActiveWidth 没有像上面的 effect 一样做 ?? 0 回退:当选中 name 这类 width 未定义的列时,currentActiveWidth 会变成 undefined,导致 isSpecialWidth 为 false,Input 变成 type="number",但 value 又会显示成 t("auto") 的非数字字符串,可能出现受控输入异常/无法显示。建议把 currentActiveWidth 计算改为与 effect 一致(例如 manualWidths[key] ?? columns[selectColumn].width ?? 0),并保证 number 类型 input 的 value 始终是数字字符串。
| const currentActiveWidth = manualWidths[columns[selectColumn].key as string] ?? columns[selectColumn].width; | |
| const currentActiveWidth = | |
| manualWidths[columns[selectColumn].key as string] ?? columns[selectColumn].width ?? 0; |
| : columns[selectColumn].width; | ||
| setWidth(selectColumn, width); | ||
| // If current is auto/hide, reset to base width; otherwise keep it | ||
| const baseWidth = columns[selectColumn].width as number; |
There was a problem hiding this comment.
const baseWidth = columns[selectColumn].width as number; 这里用类型断言把 width 当成 number,但该字段在本文件里既可能是 string(例如 t("script_list_*_width") 返回值),也可能是 undefined(例如 name 列没有 width)。这会导致 manualWidths 写入非 number 值,后续保存到配置里类型也会被污染。建议在设置前对 baseWidth 做数值化与兜底(例如宽度为 string 时 parseInt/Number,undefined 时选一个合理默认值)。
| const baseWidth = columns[selectColumn].width as number; | |
| const rawWidth = columns[selectColumn].width; | |
| let baseWidth: number; | |
| if (typeof rawWidth === "number") { | |
| baseWidth = rawWidth; | |
| } else if (typeof rawWidth === "string") { | |
| const parsed = parseInt(rawWidth, 10); | |
| baseWidth = Number.isNaN(parsed) ? 120 : parsed; | |
| } else { | |
| // 没有配置宽度时使用一个合理的默认值 | |
| baseWidth = 120; | |
| } |
| "cloud_sync_account_verification": "crwdns7954:0crwdne7954:0", | ||
| "cloud_sync_verification_failed": "crwdns7956:0crwdne7956:0", | ||
| "save_success": "crwdns7958:0crwdne7958:0", | ||
| "reset_success": "Reset successfully", |
There was a problem hiding this comment.
ach-UG 语言包里同一区域的 save_success 仍然是 Crowdin 占位符(crwdns...),但这里新增的 reset_success 写成了英文直出,会让该语言包风格/管线不一致(也可能被翻译平台覆盖或导致回归)。建议将该值改为对应的 crwdns... 占位符,或与现有 ach-UG 的维护方式保持一致。
| "reset_success": "Reset successfully", | |
| "reset_success": "crwdns7959:0crwdne7959:0", |
测试过了
应该真的一个 useMemo 就行