Skip to content

ScriptSearchField 卡顿修正 #1014

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CodFrm merged 8 commits into from
Nov 24, 2025
Merged

ScriptSearchField 卡顿修正 #1014

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cc7dba8
ScriptSearchField 卡顿修正
cyfung1031 Nov 22, 2025
f081184
Update src/pages/options/routes/ScriptList/ScriptCard.tsx
cyfung1031 Nov 22, 2025
ea425b3
先跟Copliot指示改一下。但最终还是要还原至 1.1.2 所以这块要重新搞
cyfung1031 Nov 22, 2025
0f0501f
lint
cyfung1031 Nov 22, 2025
f10caeb
恢复搜索选项
CodFrm Nov 24, 2025
34da2bb
对比defaultValue
CodFrm Nov 24, 2025
301568c
设定搜素框宽度
CodFrm Nov 24, 2025
d114cee
处理搜索结果
CodFrm Nov 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 32 additions & 14 deletions src/pages/options/routes/ScriptList/ScriptCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { parseTags } from "@App/app/repo/metadata";
import type { ScriptLoading } from "@App/pages/store/features/script";
import { EnableSwitch, HomeCell, MemoizedAvatar, SourceCell, UpdateTimeCell } from "./components";
import { useTranslation } from "react-i18next";
import { type TFunction } from "i18next";
import { VscLayoutSidebarLeft, VscLayoutSidebarLeftOff } from "react-icons/vsc";
import { FaThList } from "react-icons/fa";
import type { DragEndEvent } from "@dnd-kit/core";
Expand Down Expand Up @@ -327,6 +328,36 @@ export const ScriptCardItem = React.memo(
);
ScriptCardItem.displayName = "ScriptCard";

interface ScriptSearchFieldProps {
t: TFunction<"translation", undefined>;
setSearchKeyword: (keyword: string) => void;
}

export const ScriptSearchField = React.memo(
({ t, setSearchKeyword }: ScriptSearchFieldProps) => {
const [searchValue, setSearchValue] = useState<string>("");
return (
<Input.Search
size="small"
searchButton
style={{ maxWidth: 400 }}
placeholder={t("enter_search_value", { search: `${t("name")}/${t("script_code")}` })!}
defaultValue={searchValue}
Copy link
Copy Markdown
Member

@CodFrm CodFrm Nov 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不应该是value么？

onChange={(value) => {
setSearchValue(value);
}}
Copy link

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

使用 defaultValue={searchValue} 是无效的。defaultValue 仅在组件初始化时生效一次，后续 searchValue 状态改变不会影响输入框的值。

这会导致两个问题：

  1. 用户输入时，虽然 onChange 更新了 searchValue 状态，但输入框显示的值不会改变（因为 defaultValue 只在初始化时生效）
  2. 这个内部 state 完全没有必要，因为输入框已经是非受控组件

建议直接移除 searchValue 状态和 defaultValue 属性：

export const ScriptSearchField = React.memo(
  ({ t, setSearchKeyword }: ScriptSearchFieldProps) => {
    return (
      <Input.Search
        size="small"
        searchButton
        style={{ maxWidth: 400 }}
        placeholder={t("enter_search_value", { search: `${t("name")}/${t("script_code")}` })!}
        onSearch={(value) => {
          setSearchKeyword(value);
        }}
      />
    );
  },
  (prevProps, nextProps) => {
    return prevProps.t === nextProps.t;
  }
);

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Collaborator Author

@cyfung1031 cyfung1031 Nov 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

对。这个烂掉了的玩具不用 onChange & value = {state}
先删掉。等 CodFrm 把 1.1.2 的功能还原

onSearch={(value) => {
setSearchKeyword(value);
}}
/>
);
},
(prevProps, nextProps) => {
return prevProps.t === nextProps.t;
Comment thread
cyfung1031 marked this conversation as resolved.
Outdated
}
);
ScriptSearchField.displayName = "ScriptSearchField";

interface ScriptCardProps {
loadingList: boolean;
scriptList: ScriptLoading[];
Expand Down Expand Up @@ -361,7 +392,6 @@ export const ScriptCard = ({
handleConfig,
handleRunStop,
}: ScriptCardProps) => {
const [searchValue, setSearchValue] = useState<string>("");
const { t } = useTranslation();
const { guideMode } = useAppContext();

Expand Down Expand Up @@ -417,19 +447,7 @@ export const ScriptCard = ({
>
<div className="flex flex-row justify-between items-center" style={{ padding: "8px 0" }}>
<div className="flex-1">
<Input.Search
size="small"
searchButton
style={{ maxWidth: 400 }}
placeholder={t("enter_search_value", { search: `${t("name")}/${t("script_code")}` })!}
value={searchValue}
onChange={(value) => {
setSearchValue(value);
}}
onSearch={(value) => {
setSearchKeyword(value);
}}
/>
<ScriptSearchField t={t} setSearchKeyword={setSearchKeyword} />
</div>
<Space size={8}>
<Tooltip content={sidebarOpen ? t("close_sidebar") : t("open_sidebar")}>
Expand Down
Loading