Skip to content

优化tab切换速度、模块折叠交互及仪表盘多选逻辑,微调了一下样式以及进入详细设置的点击范围 - #17

Merged
Lanly109 merged 9 commits into
Lanly109:mainfrom
sakurairsora:main
Sep 6, 2026
Merged

Lanly109 merged 9 commits into
Lanly109:mainfrom
sakurairsora:main

Conversation

@sakurairsora

Copy link
Copy Markdown
Contributor

变更概述

本次 PR 对 account 详情页、Area 区服组件、Module 模块卡片以及仪表盘(DashBoard)进行了系统性重构,主要包含:

  • 引入区服配置缓存(Area 新增 areaConfigCache),减少重复 API 请求,提升切换 Tab 和返回详情页的响应速度,现在应该可以做到在tab之间反复切换也不会卡顿了。
  • 优化模块折叠/展开交互(Module 改用 Chakra UI Collapsible 组件,并增加输入框失焦保护)。
  • 增强仪表盘批量操作(卡片视图增加 Checkbox 选择,清理逻辑统一为“选中优先”)。
  • 完善账号显示名编辑,使默认账号的双视图编辑统一,且增加取消机制。
image - **新增缓存清理机制**(`$account.tsx` 在导入配置成功和组件卸载时调用 `clearAreaConfigCache`)。

主要文件改动

$account.tsx

  • 导入 clearAreaConfigCache,在 handleImportSuccess 中调用,确保导入后区服配置缓存失效,下次加载拉取最新数据。
  • 新增 useEffect 返回清理函数,组件卸载时清除当前账号的缓存,释放内存。
  • ConfigImportExport 的 onImportSuccess 回调替换为 handleImportSuccess(内部调用 refreshAccountData 并清理缓存)。

Area.tsx

  • 新增 areaConfigCache 及相关工具函数(getCachedAreaConfig、setCachedAreaConfig、clearAreaConfigCache)。
  • useEffect 优先从缓存读取数据,命中则直接使用并跳过网络请求;未命中再调用 API,并将结果存入缓存。
  • handleConfigUpdate 更新 state 的同时同步写回缓存,保证缓存与 UI 一致。
  • 导出 clearAreaConfigCache 供外部调用。

Module.tsx

  • 用 <Collapsible.Root> + <Collapsible.Content> 替换原本的条件渲染 {isExpanded && ...},实现平滑展开/收起动画。
  • 在折叠切换前主动使当前输入框失焦(document.activeElement.blur()),防止未保存的草稿丢失。
  • 保存配置改用 enqueueConfigSave(来自 Config 组件),实现防抖和队列化,减少频繁请求。
  • 微调间距(gap、padding)和样式细节。

DashBoard.tsx

  • 卡片视图(非表格视图)中新增 Checkbox 用于多选,同时保留原有的 Radio 用于选择默认账号(二者功能独立)。
  • “清理全部”按钮逻辑优化:若存在选中的账号,则仅清理选中的账号;否则清理全部(不再依赖视图模式)。
  • 表格视图列宽和内边距调整,账号显示名输入框增加自动聚焦与光标定位(useEffect + setSelectionRange)。
  • 优化删除按钮的尺寸和悬停样式。
  • 默认账号设置改为使用 handleDefaultAccount,并更新 userInfo 状态以保持一致性。

兼容性与依赖

  • 本 PR 要求 Config 组件导出 enqueueConfigSave 函数(已同步更新)。
  • 所有改动向后兼容,不影响现有 API 响应结构和业务逻辑。
  • 缓存使用内存 Map,无需额外存储依赖,仅在组件生命周期内生效。

测试建议

  1. 缓存有效性:进入账号详情页,切换区服 Tab,观察 Network 请求是否减少;修改某个模块配置后切回,配置是否保持最新。
  2. 导入配置:导入一个 .autopcrcfg 文件,检查区服缓存是否被清除(下次加载会重新请求)。
  3. 模块折叠/展开:展开模块,修改其中的 Input/Select 后直接点击模块头部折叠,确认修改未丢失且已保存。
  4. 仪表盘多选:在卡片视图下勾选多个账号,点击“清理全部”按钮,观察只清理选中的账号;取消所有选中则清理全部。
  5. 显示名编辑:点击账号名称进入编辑状态,修改后按 Enter 或失焦保存,冲突检测是否正常;按 Escape 取消编辑。

回归影响范围

  • 账号详情页(/daily/_sidebar/account/$account)
  • 仪表盘(/daily/_sidebar/account)
  • 所有区服模块的配置保存与执行
  • 配置导入/导出功能

已知风险

  • 若 Config 组件未同步更新 enqueueConfigSave,会导致保存报错(需确保 PR 一并合入)。
  • 缓存机制依赖 alias 和 key 组合作为键,若 alias 变化(如账号重命名)可能导致旧缓存残留,但无负面影响(自动清理)。

多选逻辑增强:

卡片视图下也增加了 Checkbox(原本只有 Radio),使得 selectedAccounts 可在两种视图下使用。

“清理全部”按钮不再依赖 isTableView,改为只要有选中账号就清理选中的,否则清理全部。

UI 细节:

表格视图的列宽、内边距微调。

账号名称输入框增加了自动聚焦和光标定位逻辑(useEffect + ref)。

样式优化(边框、背景、悬停效果)。

默认账号选择:

卡片视图下仍使用 RadioGroup + Radio,与 Checkbox 互不干扰。

合并影响:

新增的 Checkbox 和 Radio 共存在卡片视图中,功能分离明确(Checkbox 用于批量操作,Radio 用于默认账号)。

清理逻辑更统一,需确保 handleCleanDailyAll 正确遍历选中的账号。

输入框聚焦优化不会影响原有交互。
新增功能:

导入 clearAreaConfigCache 并在 handleImportSuccess 中调用,用于导入配置后清空区服缓存。

增加 useEffect 在组件卸载时清空当前账号的缓存。

其他:ConfigImportExport 的 onImportSuccess 改为 handleImportSuccess(旧为 refreshAccountData)。

合并影响:

需要 Area 组件导出 clearAreaConfigCache(新 Area 已实现)。

缓存机制不会破坏旧逻辑,只会在导入或离开时清理,提升性能。
UI 折叠方式改变:

旧版使用条件渲染 {isExpanded && <Card.Body>...},新版改用 Chakra UI 的 <Collapsible.Root> 和 <Collapsible.Content>,实现平滑动画。

保存策略优化:

引入 enqueueConfigSave(来自 ./Config)替代直接 putAccountConfig,实现防抖/队列保存。

细节样式:

调整了 gap、padding 等间距。

在折叠切换前主动失焦输入框,避免草稿丢失。

合并影响:

需确保 ./Config 导出 enqueueConfigSave(新 Config 应包含,若缺失需同步更新)。

Collapsible 组件需在项目中可用(Chakra UI v3 内置)。

行为变化(防抖)不会破坏现有功能,但需测试保存逻辑是否正常。
新增缓存机制:

引入 areaConfigCache Map,提供 getCachedAreaConfig、setCachedAreaConfig,以及导出的 clearAreaConfigCache。

useEffect 优先读取缓存,缓存未命中才请求 API。

handleConfigUpdate 同步更新缓存。

合并影响:

旧代码每次挂载都会请求,新代码会减少冗余请求,完全向后兼容。

导出的 clearAreaConfigCache 供 $account.tsx 使用,需同时更新该文件。
@sakurairsora

Copy link
Copy Markdown
Contributor Author

嗯……想请问一下这个是有什么不行吗……?

@Lanly109

Lanly109 commented Aug 9, 2026

Copy link
Copy Markdown
Owner

模块配置修改后,折叠后再次展开,配置项会恢复成原来的样子?

@sakurairsora

Copy link
Copy Markdown
Contributor Author

修复多项问题:区服 Tab 多开卡顿、折叠后设置回退、一览改名/IME、创建空名、卡片热区、执行 loading、同步含自身、表头勾选对齐等。

配置保存统一回写父级缓存;错误文案安全解析。

用户可感知修复
区服 Tab:只挂当前 UI + 配置 JSON 缓存
改设置后折叠再展开 → 值保持(Config 回写 Area)
一览改名:框与名字重合、中文 IME、失焦/组词结束可提交、进入编辑自动聚焦
创建空名:toast「需输入名字,此次未创建」并关面板
卡片:整卡进详情;选框/改名/删除/状态不进详情(去掉 zIndex 堆叠)
表头全选列:px={0} + textAlign="center" 对齐
执行失败 loading 会结束;同步账号设置会排除自己;详情刷新不重置当前 Tab

更改文件:项与函数
Area.tsx
新增:areaConfigCache、get/set/clearAreaConfigCache、mergeFavIntoConfig
改:Area 组件加载逻辑;handleConfigUpdate;useEffect 同步缓存;加载失败 toast
$account.tsx
改:Tabs.Root → unmountOnExit;handleImportSuccess;handleCleanDaily;按 account 重置 Tab(刷新不重置);卸载清缓存;statusMeta 徽章
Module.tsx
改:折叠条件渲染;handleHeaderClick(先 blur);Config 传 onConfigUpdate
改:onCheckedChange(moduleEnabledRef);handleToggleFav(setItem try/catch)
改:handleExecute / handleResult(getErrorDescription + finally onClose)
改:handleSyncConfig(排除源 alias)
Config.tsx
新增:getErrorDescription;ConfigSingleSelect;ConfigSingle 仅作路由(修 Hooks)
改:useConfigState 与各类型保存时 onConfigUpdate 回写/回滚
改:ConfigInt 空 candidates;ConfigMulti every 判数字;搜索选择乐观更新;MultiSearch 成功不再 hide
保留:enqueueConfigSave 串行队列
未改:ConfigBool 的 InputGroup 布局(历史样式)
DashBoard.tsx
显示名:commitDisplayName、nameInput、nameInputRef、IME 兜底
按钮:renderActionButtons;handle Map 用 useEffect 注册
创建:handleCreateAccount 空名统一 toast
卡片:整卡点击 + 控件 stopPropagation
表格:首列表头居中
其它:getErrorDescription;导入后清空 file input;详情回一览刷新 flag

@sakurairsora

Copy link
Copy Markdown
Contributor Author

啊请问下是修复后有什么问题吗=、=
我还打算往上加个
在首页可看到自己扩展的功能按钮(比如在首页直接新开黎明界)
以及给洗装备新增一个“全x攻”跟“全x穿”的功能,不用每次都选下拉调整来方便下用户的来着

@Lanly109

Copy link
Copy Markdown
Owner

啊请问下是修复后有什么问题吗=、=
最近还没时间,看看月底

在首页可看到自己扩展的功能按钮(比如在首页直接新开黎明界)
看看如何设计好一点?比如右边拉动的菜单栏之类的

以及给洗装备新增一个“全x攻”跟“全x穿”的功能,不用每次都选下拉调整来方便下用户的来着
这个应该直接改后端配置,前端应该不用改

@sakurairsora

sakurairsora commented Aug 28, 2026 •

Copy link
Copy Markdown
Contributor Author

啊请问下是修复后有什么问题吗=、=
最近还没时间,看看月底

在首页可看到自己扩展的功能按钮(比如在首页直接新开黎明界)
看看如何设计好一点?比如右边拉动的菜单栏之类的

以及给洗装备新增一个“全x攻”跟“全x穿”的功能,不用每次都选下拉调整来方便下用户的来着
这个应该直接改后端配置,前端应该不用改

后端我不会改主要是,而且前端增加这么个选项也不费劲(应该)

至于拓展功能按钮,我目前想到的是
image
给这里增加一个+,然后按了以后可以调出可搜索的当前已实现的功能项。然后在上面打钩就能让对应按钮自适应宽度出现在这个栏上面。功能留越多那么栏就会自动上下扩宽。
随后它是灰色状态,不可点击,然后勾选账号后,它就可以点击了。这样就符合批量完成的操作习惯与逻辑。
你觉得如何?放右边我觉得不大符合现有面板定下的操作习惯。
然后至于完成与否,在选中账号的状态处加一个转圈效果。
再在旁边放置一个*该功能不显示执行结果

@Lanly109

Copy link
Copy Markdown
Owner

后端我不会改主要是,而且前端增加这么个选项也不费劲(应该)

后端加一个@singlechoice就好了。模块特定功能不太适合硬编码在前端,前端只负责如何展示,不应该混入某模块的特定逻辑。

至于拓展功能按钮,

感觉得对这一栏重新设计下,不然,第一个是清日常所有,第二个是批量运行,第三个是自定义功能,中间不顶号,左右会顶号,让人小心翼翼的

我觉得可以交换一下 清日常所有 和 批量运行 的位置,批量运行 改名成 批量配置,然后 清日常所有 换成 和你这个逻辑一样的,先勾选,再清日常这样,和自定义功能一样的操作逻辑

@sakurairsora

Copy link
Copy Markdown
Contributor Author

后端我不会改主要是,而且前端增加这么个选项也不费劲(应该)

后端加一个@singlechoice就好了。模块特定功能不太适合硬编码在前端,前端只负责如何展示,不应该混入某模块的特定逻辑。

至于拓展功能按钮,

感觉得对这一栏重新设计下,不然,第一个是清日常所有,第二个是批量运行,第三个是自定义功能,中间不顶号,左右会顶号,让人小心翼翼的

我觉得可以交换一下 清日常所有 和 批量运行 的位置,批量运行 改名成 批量配置,然后 清日常所有 换成 和你这个逻辑一样的,先勾选,再清日常这样,和自定义功能一样的操作逻辑

image

我的意思是在这里这样增加4个框,然后自己想要左边成怎样,就直接点。这样可以批量改类型,有一个想要任意也比切换其他来得快

其实我也没明白清理全部跟批量运行到底区别在哪
批量配置现在应该在选中的时候它会有同步配置……
但是实际上,中间的功能虽然不顶号,但是它生效一样要重启啊。

如果批量配置应该是右侧的功能,那可以放右边。
现在大致想法是:
增加一行说明文字在上方,跟全选账号/取消选择 2栏式:非选择时默认全体执行
全选账号/取消选择
然后是
清理全部日常(弹性空白) +:然后是快捷功能。
靠右是批量配置,列表跟card,增加减少账号。

另外麻烦看看代码能不能合并?能的话我就根据这个基础先设计一下

@Lanly109

Lanly109 commented Sep 4, 2026

Copy link
Copy Markdown
Owner

周末我测测

@sakurairsora

sakurairsora commented Sep 5, 2026 •

Copy link
Copy Markdown
Contributor Author
image image image

暂时性成果
另外测出来了一大堆bug,等这个合并的话再提一个新的修正它们……
另外当前DashBoard已经1300多行
为了方便以后修改读取,把它拆成了3个文件:
DashBoard.tsx(约 750 行):主页工具栏 + 执行器 + 勾选/批量调度
AccountCard.tsx(约 860 行):账号卡片的一切
accountShared.ts(约 15 行):两边共用的登记表和显示名
不知道是否可以?

@sakurairsora

Copy link
Copy Markdown
Contributor Author
image 定稿大致如此。我把运行配置拆成了设置默认账号。原位改为了弹出结果。现在可以把默认账号这种闲置拿来当批量运行的标示使用了。 此外我也给账号内部加了“弹结果”的选项。 你觉得还有什么地方看起来不方便需要改的?

@Lanly109

Lanly109 commented Sep 6, 2026

Copy link
Copy Markdown
Owner

为了方便以后修改读取,把它拆成了3个文件:
DashBoard.tsx(约 750 行):主页工具栏 + 执行器 + 勾选/批量调度
AccountCard.tsx(约 860 行):账号卡片的一切
accountShared.ts(约 15 行):两边共用的登记表和显示名
不知道是否可以?

可以的

你觉得还有什么地方看起来不方便需要改的?

看着不错,只是感觉头重了(不过我也没想好怎么改

@Lanly109
Lanly109 merged commit f9d1d5f into Lanly109:main Sep 6, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants