ScriptList Fix #547

cyfung1031 · 2025-07-14T15:17:52Z

終於解決了圖標載入問題

Copilot

Pull Request Overview

This PR fixes the favicon loading issue in ScriptList by refactoring batch processing of script favicons, removing unused utilities, and extracting avatar/tooltip render logic into memoized components for performance.

Refactored processScriptFavicon to use async/await and batch updates via requestAnimationFrame
Removed unused chunkArray and scriptListSort functions
Introduced memoized components (MemoizedAvatar, FavoriteAvatars, RunApplyTooltip, RunApplyGroup) in ScriptList.tsx

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
src/pages/store/utils.ts	Refactored favicon processing, removed `chunkArray`, added `FavIconResult` type, updated batching
src/pages/options/routes/utils.tsx	Removed unused `scriptListSort` and related DAO import
src/pages/options/routes/ScriptList.tsx	Extracted avatar/tooltip logic into memoized components and simplified render function

src/pages/store/utils.ts

Copilot · 2025-07-14T15:23:38Z

src/pages/store/utils.ts

+    processScriptFavicon(script).then((result: FavIconResult) => {
+      results.push(result);
+      // 下一个 MacroTask 执行。
+      // 使用 requestAnimationFrame 而非setTimeout 是因为前台才要显示。而且网页绘画中时会延后这个
+      if (!waiting) {
+        requestAnimationFrame(() => {
+          waiting = false;
+          if (!results.length) return;
+          const chunkResults: FavIconResult[] = results.slice(0);
+          results.length = 0;
+          store.dispatch(scriptSlice.actions.setScriptFavicon(chunkResults));
+        });
+        waiting = true;
+      }
    });


The promise from processScriptFavicon has no error handler. Add a .catch() to handle potential rejections and avoid unhandled promise errors.

Suggested change

processScriptFavicon(script).then((result: FavIconResult) => {

results.push(result);

// 下一个 MacroTask 执行。

// 使用 requestAnimationFrame 而非setTimeout 是因为前台才要显示。而且网页绘画中时会延后这个

if (!waiting) {

requestAnimationFrame(() => {

waiting = false;

if (!results.length) return;

const chunkResults: FavIconResult[] = results.slice(0);

results.length = 0;

store.dispatch(scriptSlice.actions.setScriptFavicon(chunkResults));

});

waiting = true;

}

});

processScriptFavicon(script)

.then((result: FavIconResult) => {

results.push(result);

// 下一个 MacroTask 执行。

// 使用 requestAnimationFrame 而非setTimeout 是因为前台才要显示。而且网页绘画中时会延后这个

if (!waiting) {

requestAnimationFrame(() => {

waiting = false;

if (!results.length) return;

const chunkResults: FavIconResult[] = results.slice(0);

results.length = 0;

store.dispatch(scriptSlice.actions.setScriptFavicon(chunkResults));

});

waiting = true;

}

})

.catch((error) => {

console.error("Failed to process script favicon:", error);

// Optionally, handle the error further (e.g., dispatch an error action)

});

应该不用加。看你意思

Copilot · 2025-07-14T15:23:39Z

src/pages/options/routes/ScriptList.tsx

+      }[];
+    }) => {
+      const processed = useMemo(() => {
+        // 排序并且只显示前5个


The comment mentions showing the first 5 items, but the code slices only 4 (.slice(0, 4)). Update the comment or slice range for consistency.

对喔。为什麼是5个
应该是4个吧？
这个注䆁一直都是错了？

应该是错了，4个没问题

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

cyfung1031 · 2025-07-15T01:19:33Z

先不要合拼。Sorting那個功能有點問題。我再改一下

codecov · 2025-07-15T09:40:32Z

Codecov Report

Attention: Patch coverage is 0% with 177 lines in your changes missing coverage. Please review.

Please upload report for BASE (main@c5ac3e3). Learn more about missing BASE report.
Report is 11 commits behind head on main.

Files with missing lines	Patch %	Lines
src/pages/options/routes/ScriptList.tsx	0.00%	149 Missing and 1 partial ⚠️
src/pages/store/utils.ts	0.00%	27 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #547   +/-   ##
=======================================
  Coverage        ?   18.29%           
=======================================
  Files           ?      200           
  Lines           ?    21655           
  Branches        ?      895           
=======================================
  Hits            ?     3961           
  Misses          ?    17604           
  Partials        ?       90

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

cyfung1031 · 2025-07-15T10:44:22Z

原本的奇怪 drag anchor 寫法有問題
查了一下，官方文件有這個功能，不用自己寫。

這個PR將會改用官方的

https://arco.design/react/components/table#%E6%8B%96%E6%8B%BD%E9%94%9A%E7%82%B9%E6%8E%92%E5%BA%8F

CodFrm · 2025-07-15T11:27:10Z

确实官方的例子看起来更好，我也不太记得为什么为什么用这么麻烦的东西了，可能那时候是这个示例

cyfung1031 · 2025-07-16T11:49:29Z

React的坑很難搞。先關掉PR。日後修改好再提交

CodFrm · 2025-07-16T11:54:42Z

@cyfung1031 是遇到啥了吗？休息下吧😄，我也得着手点其它工作了

CodFrm · 2025-07-16T12:00:02Z

关于这个图标问题，我觉得可能在安装脚本时，就储存起来，不再从网络读取这样可能会比较好

cyfung1031 · 2025-07-16T12:51:18Z

问题是元件他会重刷之类
ScriptList.tsx 裡面混了好几个自定阔度呀什麼什麼的
比如说 column newColumn dealColumn... 一堆React不友善的写法

对了
之前我讲错了
我们用的dnd-kit 才是比较好（在reddit那些都推dnd-kit)
官方那个是比较简单（但我觉得简单很好）
dnd-kit 也找到方法实现了简化版的DragHandle (不用再什麼props.children裡查key再生成这样。还要为它做个sortIndex+1 不是sortIndex )
也参考官方写法方在打勾前面

其实官方有拖拉调阔度呀
为什麼要搞个数字调阔度？

（个人不喜欢React。太笨了。不用SolidJS也用VueJS3吧）

cyfung1031 · 2025-07-16T12:53:44Z

官方拉阔度
https://arco.design/react/components/table#%E5%8F%AF%E4%BC%B8%E7%BC%A9%E5%88%97

这样就不用搞什麼 newColumn 跟 Input 啦

CodFrm · 2025-07-16T15:26:21Z

@cyfung1031 我记得没有使用这个也是有原因的，好像是因为想实现隐藏和自动

我倒是挺喜欢React的，最开始我使用的vue😄

cyfung1031 added 2 commits July 15, 2025 00:15

ScriptList Fix

f645d4f

刪log

3171c2a

CodFrm requested a review from Copilot July 14, 2025 15:21

Copilot AI reviewed Jul 14, 2025

View reviewed changes

cyfung1031 mentioned this pull request Jul 14, 2025

[BUG] scriptlist 的图片显示不出来是这样啦（显示很慢） #546

Closed

cyfung1031 and others added 3 commits July 15, 2025 00:26

Update src/pages/store/utils.ts

4edc553

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

排序并且只显示前4个

5d5838e

改善React代码

056da7b

CodFrm force-pushed the main branch 2 times, most recently from dc35ec8 to 26c0569 Compare July 15, 2025 07:13

修正

8fb3cc6

cyfung1031 force-pushed the fix_scriptlist2 branch from 3d8a8d0 to 8fb3cc6 Compare July 15, 2025 10:05

cyfung1031 added 2 commits July 15, 2025 19:20

Update ScriptList.tsx

493bf85

Update ScriptList.tsx

2a6af21

Update

1b621bf

cyfung1031 added 8 commits July 15, 2025 20:36

Update ScriptList.tsx

e65580e

Update ScriptList.tsx

4eb56cf

Update ScriptList.tsx

b14f4ea

Update

446c4d8

Update ScriptList.tsx

8b71c5f

Update ScriptList.tsx

f2774b1

Update ScriptList.tsx

486160e

Update ScriptList.tsx

4b76747

cyfung1031 closed this Jul 16, 2025

ScriptList Fix #547

ScriptList Fix #547

Uh oh!

Conversation

cyfung1031 commented Jul 14, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

cyfung1031 Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

cyfung1031 Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

CodFrm Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

cyfung1031 commented Jul 15, 2025

Uh oh!

codecov bot commented Jul 15, 2025

Codecov Report

Uh oh!

cyfung1031 commented Jul 15, 2025

Uh oh!

CodFrm commented Jul 15, 2025

Uh oh!

cyfung1031 commented Jul 16, 2025

Uh oh!

CodFrm commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CodFrm commented Jul 16, 2025

Uh oh!

cyfung1031 commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cyfung1031 commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CodFrm commented Jul 16, 2025

Uh oh!

Uh oh!

CodFrm commented Jul 16, 2025 •

edited

Loading

cyfung1031 commented Jul 16, 2025 •

edited

Loading

cyfung1031 commented Jul 16, 2025 •

edited

Loading