diff --git a/src/locales/ach-UG/translation.json b/src/locales/ach-UG/translation.json
index 25b2dbed3..f224754a8 100644
--- a/src/locales/ach-UG/translation.json
+++ b/src/locales/ach-UG/translation.json
@@ -150,6 +150,7 @@
   "starting_script": "crwdns8176:0crwdne8176:0",
   "starting_updates": "crwdns8178:0crwdne8178:0",
   "script_started": "crwdns8180:0crwdne8180:0",
+  "operation_failed": "Operation failed",
   "batch_operations": "crwdns8182:0crwdne8182:0",
   "export": "crwdns8184:0crwdne8184:0",
   "delete": "crwdns8186:0crwdne8186:0",
diff --git a/src/locales/de-DE/translation.json b/src/locales/de-DE/translation.json
index d18264195..8006372b7 100644
--- a/src/locales/de-DE/translation.json
+++ b/src/locales/de-DE/translation.json
@@ -151,6 +151,7 @@
   "starting_script": "Skript wird gestartet...",
   "starting_updates": "Batch-Update wird gestartet...",
   "script_started": "Skript gestartet",
+  "operation_failed": "Vorgang fehlgeschlagen",
   "batch_operations": "Batch-Operationen",
   "export": "Exportieren",
   "delete": "Löschen",
diff --git a/src/locales/en-US/translation.json b/src/locales/en-US/translation.json
index a5df027f6..27c9fc645 100644
--- a/src/locales/en-US/translation.json
+++ b/src/locales/en-US/translation.json
@@ -151,6 +151,7 @@
   "starting_script": "Starting Script...",
   "starting_updates": "Starting Batch Updates...",
   "script_started": "Script Started",
+  "operation_failed": "Operation failed",
   "batch_operations": "Batch Operations",
   "export": "Export",
   "delete": "Delete",
diff --git a/src/locales/ja-JP/translation.json b/src/locales/ja-JP/translation.json
index 1b7a04b01..48ee896ef 100644
--- a/src/locales/ja-JP/translation.json
+++ b/src/locales/ja-JP/translation.json
@@ -151,6 +151,7 @@
   "starting_script": "スクリプトを開始中...",
   "starting_updates": "一括更新を開始中...",
   "script_started": "スクリプトが開始しました",
+  "operation_failed": "操作に失敗しました",
   "batch_operations": "一括操作",
   "export": "エクスポート",
   "delete": "削除",
diff --git a/src/locales/ru-RU/translation.json b/src/locales/ru-RU/translation.json
index b41776979..64eadc9d4 100644
--- a/src/locales/ru-RU/translation.json
+++ b/src/locales/ru-RU/translation.json
@@ -151,6 +151,7 @@
   "starting_script": "Запуск скрипта...",
   "starting_updates": "Массовое обновление...",
   "script_started": "Скрипт запущен",
+  "operation_failed": "Операция не выполнена",
   "batch_operations": "Пакетные операции",
   "export": "Экспорт",
   "delete": "Удалить",
diff --git a/src/locales/vi-VN/translation.json b/src/locales/vi-VN/translation.json
index 9b35e23ec..626f28cad 100644
--- a/src/locales/vi-VN/translation.json
+++ b/src/locales/vi-VN/translation.json
@@ -151,6 +151,7 @@
   "starting_script": "Đang khởi động script...",
   "starting_updates": "Đang khởi động cập nhật hàng loạt...",
   "script_started": "Script đã khởi động",
+  "operation_failed": "Thao tác thất bại",
   "batch_operations": "Thao tác hàng loạt",
   "export": "Xuất",
   "delete": "Xóa",
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index 2409e2e52..08b6c99b9 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -151,6 +151,7 @@
   "starting_script": "正在启动脚本...",
   "starting_updates": "正在批量更新...",
   "script_started": "脚本已启动",
+  "operation_failed": "操作失败",
   "batch_operations": "批量操作",
   "export": "导出",
   "delete": "删除",
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index fa6b99483..0e6e4754b 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -151,6 +151,7 @@
   "starting_script": "正在啟動腳本...",
   "starting_updates": "正在批次更新...",
   "script_started": "腳本已啟動",
+  "operation_failed": "操作失敗",
   "batch_operations": "批次操作",
   "export": "匯出",
   "delete": "刪除",
diff --git a/src/pages/options/routes/ScriptList/ScriptCard.tsx b/src/pages/options/routes/ScriptList/ScriptCard.tsx
index 65d7a54f6..89b0aade7 100644
--- a/src/pages/options/routes/ScriptList/ScriptCard.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptCard.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { createContext, useCallback, useContext, useMemo } from "react";
 import { Avatar, Button, Card, Divider, Popconfirm, Space, Tag, Tooltip, Typography } from "@arco-design/web-react";
 import { Link, useNavigate } from "react-router-dom";
 import { IconClockCircle, IconDragDotVertical } from "@arco-design/web-react/icon";
@@ -24,14 +24,73 @@ import { useTranslation } from "react-i18next";
 import { VscLayoutSidebarLeft, VscLayoutSidebarLeftOff } from "react-icons/vsc";
 import { FaThList } from "react-icons/fa";
 import type { DragEndEvent } from "@dnd-kit/core";
-import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { useAppContext } from "@App/pages/store/AppContext";
-import type { SetSearchRequest } from "./hooks";
+import { type SearchFilterRequest } from "./SearchFilter";
 import type { SearchType } from "@App/app/service/service_worker/types";
 
-const { Text } = Typography;
+type DragCtx = Pick<ReturnType<typeof useSortable>, "listeners" | "setActivatorNodeRef"> | null;
+const SortableDragCtx = createContext<DragCtx>(null);
+
+function composeRefs<T>(...refs: React.Ref<T>[]): (node: T | null) => void {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        (ref as React.MutableRefObject<T | null>).current = node;
+      }
+    }
+  };
+}
+
+const DraggableEntry = React.forwardRef<HTMLDivElement, { record: any } & React.HTMLAttributes<HTMLDivElement>>(
+  ({ record, ...rest }, ref) => {
+    const sortable = useSortable({ id: record.uuid });
+    const { setNodeRef, transform, transition, listeners, setActivatorNodeRef } = sortable;
+
+    const style = {
+      transform: CSS.Transform.toString(transform),
+      transition,
+    };
+
+    const mergedRef = React.useMemo(() => composeRefs<HTMLDivElement>(setNodeRef, ref), [setNodeRef, ref]);
+
+    const ctxValue = useMemo(
+      () => ({
+        listeners: listeners,
+        setActivatorNodeRef: setActivatorNodeRef,
+      }),
+      [listeners, setActivatorNodeRef]
+    );
+
+    return (
+      <SortableDragCtx.Provider value={ctxValue}>
+        <div ref={mergedRef} style={style} {...rest} />
+      </SortableDragCtx.Provider>
+    );
+  }
+);
+DraggableEntry.displayName = "DraggableEntry";
+
+const DragHandle = () => {
+  const sortable = useContext(SortableDragCtx);
+
+  const { listeners, setActivatorNodeRef } = sortable || {};
+  const style = { cursor: "move", padding: 6 };
+
+  return !setActivatorNodeRef ? (
+    <span style={style}>
+      <IconDragDotVertical />
+    </span>
+  ) : (
+    <span ref={setActivatorNodeRef} {...listeners} style={style}>
+      <IconDragDotVertical />
+    </span>
+  );
+};
 
 interface ScriptCardItemProps {
   item: ScriptLoading;
@@ -56,15 +115,6 @@ export const ScriptCardItem = React.memo(
     handleConfig,
     handleRunStop,
   }: ScriptCardItemProps) => {
-    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-      id: item.uuid,
-    });
-
-    const style = {
-      transform: CSS.Transform.toString(transform),
-      transition,
-    };
-
     const { t } = useTranslation();
     const navigate = useNavigate();
 
@@ -106,210 +156,210 @@ export const ScriptCardItem = React.memo(
         }),
     };
 
+    // console.log("Rendered - " + item.name); // 用于检查垃圾React有否过度更新
+
     return (
-      <Card
-        hoverable
-        className="script-card"
-        style={{
-          ...style,
-        }}
-        ref={setNodeRef}
-        bodyStyle={{
-          height: "100%",
-          boxSizing: "border-box",
-        }}
-      >
-        <div className="tw-flex tw-flex-col tw-justify-between tw-h-full tw-gap-1">
-          <div className="tw-flex tw-flex-col tw-gap-3">
-            <div className="tw-flex tw-flex-row tw-justify-between tw-items-start tw-gap-1">
-              <div className="tw-flex-1 tw-min-w-0">
-                <Link
-                  to={`/script/editor/${item.uuid}`}
-                  style={{
-                    textDecoration: "none",
-                  }}
-                >
-                  <div className="tw-flex tw-items-center tw-gap-2 tw-mb-2">
-                    <ScriptIcons script={item} size={24} />
-                    <Text
+      <DraggableEntry record={item}>
+        <div>
+          <Card
+            hoverable
+            className="script-card"
+            bodyStyle={{
+              height: "100%",
+              boxSizing: "border-box",
+            }}
+          >
+            <div className="tw-flex tw-flex-col tw-justify-between tw-h-full tw-gap-1">
+              <div className="tw-flex tw-flex-col tw-gap-3">
+                <div className="tw-flex tw-flex-row tw-justify-between tw-items-start tw-gap-1">
+                  <div className="tw-flex-1 tw-min-w-0">
+                    <Link
+                      to={`/script/editor/${item.uuid}`}
                       style={{
-                        fontSize: "16px",
-                        fontWeight: 500,
-                        display: "-webkit-box",
-                        WebkitLineClamp: 2,
-                        WebkitBoxOrient: "vertical",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
+                        textDecoration: "none",
                       }}
-                      title={i18nName(item)}
                     >
-                      {i18nName(item)}
-                    </Text>
+                      <div className="tw-flex tw-items-center tw-gap-2 tw-mb-2">
+                        <ScriptIcons script={item} size={24} />
+                        <Typography.Text
+                          style={{
+                            fontSize: "16px",
+                            fontWeight: 500,
+                            display: "-webkit-box",
+                            WebkitLineClamp: 2,
+                            WebkitBoxOrient: "vertical",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                          }}
+                          title={i18nName(item)}
+                        >
+                          {i18nName(item)}
+                        </Typography.Text>
+                      </div>
+                    </Link>
+                    {tags.length > 0 && (
+                      <Space wrap>
+                        {tags.map((tag) => (
+                          <Tag key={tag} color={hashColor(tag)} size="small">
+                            {tag}
+                          </Tag>
+                        ))}
+                      </Space>
+                    )}
+                  </div>
+                  <div className="script-enable" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                    <EnableSwitch
+                      status={item.status}
+                      enableLoading={item.enableLoading}
+                      onChange={(checked: boolean) => {
+                        updateScripts([item.uuid], { enableLoading: true });
+                        requestEnableScript({ uuid: item.uuid, enable: checked });
+                      }}
+                    />
+                    <div
+                      className="script-sort"
+                      role="button"
+                      tabIndex={0}
+                      style={{ display: "inline-flex", alignItems: "center" }}
+                    >
+                      <DragHandle />
+                    </div>
                   </div>
-                </Link>
-                {tags.length > 0 && (
-                  <Space wrap>
-                    {tags.map((tag) => (
-                      <Tag key={tag} color={hashColor(tag)} size="small">
-                        {tag}
-                      </Tag>
-                    ))}
-                  </Space>
-                )}
-              </div>
-              <div className="script-enable" style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                <EnableSwitch
-                  status={item.status}
-                  enableLoading={item.enableLoading}
-                  onChange={(checked: boolean) => {
-                    updateScripts([item.uuid], { enableLoading: true });
-                    requestEnableScript({ uuid: item.uuid, enable: checked });
-                  }}
-                />
-                <div
-                  className="script-sort"
-                  {...attributes}
-                  {...listeners}
-                  role="button"
-                  tabIndex={0}
-                  style={{ cursor: "grab", padding: 6, display: "inline-flex", alignItems: "center" }}
-                >
-                  <IconDragDotVertical />
-                </div>
-              </div>
-            </div>
-
-            {/* 版本和更新时间 */}
-            <div className="tw-flex tw-flex-row tw-gap-4 tw-text-sm tw-text-gray-500">
-              {item.metadata.version && (
-                <div>
-                  <span className="tw-font-medium">
-                    {t("version")}
-                    {": "}
-                  </span>
-                  <span>{item.metadata.version[0]}</span>
                 </div>
-              )}
-              <div className="script-updatetime">
-                <span className="tw-font-medium">
-                  {t("last_updated")}
-                  {": "}
-                </span>
-                <UpdateTimeCell className="tw-text-sm tw-text-gray-500" script={item} />
-              </div>
-            </div>
 
-            {/* 运行状态 */}
-            <div className="tw-flex tw-flex-row tw-gap-4">
-              {item.type !== SCRIPT_TYPE_NORMAL && (
-                <div>
-                  <Tooltip
-                    content={
-                      item.type === SCRIPT_TYPE_BACKGROUND
-                        ? t("background_script_tooltip")
-                        : `${t("scheduled_script_tooltip")} ${nextTimeDisplay(item.metadata!.crontab![0])}`
-                    }
-                  >
-                    <Tag
-                      icon={<IconClockCircle />}
-                      color="blue"
-                      bordered
-                      style={{ cursor: "pointer" }}
-                      onClick={toLogger}
-                    >
-                      {item.runStatus === SCRIPT_RUN_STATUS_RUNNING ? t("running") : t("completed")}
-                    </Tag>
-                  </Tooltip>
+                {/* 版本和更新时间 */}
+                <div className="tw-flex tw-flex-row tw-gap-4 tw-text-sm tw-text-gray-500">
+                  {item.metadata.version && (
+                    <div>
+                      <span className="tw-font-medium">
+                        {t("version")}
+                        {": "}
+                      </span>
+                      <span>{item.metadata.version[0]}</span>
+                    </div>
+                  )}
+                  <div className="script-updatetime">
+                    <span className="tw-font-medium">
+                      {t("last_updated")}
+                      {": "}
+                    </span>
+                    <UpdateTimeCell className="tw-text-sm tw-text-gray-500" script={item} />
+                  </div>
                 </div>
-              )}
-              <SourceCell item={item} t={t} />
-            </div>
 
-            <div className="tw-flex tw-flex-row tw-gap-3 tw-items-center apply_to_run_status">
-              {item.type === SCRIPT_TYPE_NORMAL && (
-                <Avatar.Group size={20}>
-                  {favoriteMemo.trimmed.map((fav) => (
-                    <MemoizedAvatar
-                      key={`${fav.match}_${fav.icon}_${fav.website}`}
-                      {...fav}
-                      onClick={() => {
-                        if (fav.website) {
-                          window.open(fav.website, "_blank");
+                {/* 运行状态 */}
+                <div className="tw-flex tw-flex-row tw-gap-4">
+                  {item.type !== SCRIPT_TYPE_NORMAL && (
+                    <div>
+                      <Tooltip
+                        content={
+                          item.type === SCRIPT_TYPE_BACKGROUND
+                            ? t("background_script_tooltip")
+                            : `${t("scheduled_script_tooltip")} ${nextTimeDisplay(item.metadata!.crontab![0])}`
                         }
-                      }}
-                    />
-                  ))}
-                  {favoriteMemo.originalLen > 8 && <span className="tw-text-xs tw-ml-1">{"..."}</span>}
-                </Avatar.Group>
-              )}
-              <HomeCell item={item} />
-            </div>
-          </div>
-          {/* 操作按钮 */}
-          <div className="tw-flex tw-flex-col script-action">
-            <Divider style={{ margin: "4px 0 14px" }} />
-            <div className="tw-flex tw-flex-row tw-justify-between">
-              <div>
-                {item.type !== SCRIPT_TYPE_NORMAL && (
-                  <Button
-                    type="outline"
-                    icon={item.runStatus === SCRIPT_RUN_STATUS_RUNNING ? <RiStopFill /> : <RiPlayFill />}
-                    loading={item.actionLoading}
-                    size="mini"
-                    onClick={() => handleRunStop(item, t)}
-                  >
-                    {item.runStatus === SCRIPT_RUN_STATUS_RUNNING ? t("stop") : t("run")}
-                  </Button>
-                )}
-              </div>
-              <div className="tw-flex tw-flex-row tw-justify-between tw-items-center">
-                <Space>
-                  <Link to={`/script/editor/${item.uuid}`}>
-                    <Button type="outline" icon={<RiPencilFill />} size="mini">
-                      {t("edit")}
-                    </Button>
-                  </Link>
-                  {item.config && (
-                    <Button
-                      type="outline"
-                      icon={<RiSettings3Fill />}
-                      size="mini"
-                      onClick={() => handleConfig(item, setUserConfig)}
-                    >
-                      {t("config")}
-                    </Button>
+                      >
+                        <Tag
+                          icon={<IconClockCircle />}
+                          color="blue"
+                          bordered
+                          style={{ cursor: "pointer" }}
+                          onClick={toLogger}
+                        >
+                          {item.runStatus === SCRIPT_RUN_STATUS_RUNNING ? t("running") : t("completed")}
+                        </Tag>
+                      </Tooltip>
+                    </div>
                   )}
-                  {item.metadata.cloudcat && (
-                    <Button
-                      type="outline"
-                      icon={<RiUploadCloudFill />}
-                      size="mini"
-                      onClick={() => setCloudScript(item)}
-                    >
-                      {t("cloud")}
-                    </Button>
+                  <SourceCell item={item} t={t} />
+                </div>
+
+                <div className="tw-flex tw-flex-row tw-gap-3 tw-items-center apply_to_run_status">
+                  {item.type === SCRIPT_TYPE_NORMAL && (
+                    <Avatar.Group size={20}>
+                      {favoriteMemo.trimmed.map((fav) => (
+                        <MemoizedAvatar
+                          key={`${fav.match}_${fav.icon}_${fav.website}`}
+                          {...fav}
+                          onClick={() => {
+                            if (fav.website) {
+                              window.open(fav.website, "_blank");
+                            }
+                          }}
+                        />
+                      ))}
+                      {favoriteMemo.originalLen > 8 && <span className="tw-text-xs tw-ml-1">{"..."}</span>}
+                    </Avatar.Group>
                   )}
-                  <Popconfirm
-                    title={t("confirm_delete_script")}
-                    icon={<RiDeleteBin5Fill />}
-                    onOk={() => handleDelete(item)}
-                  >
-                    <Button
-                      type="outline"
-                      status="danger"
-                      icon={<RiDeleteBin5Fill />}
-                      loading={item.actionLoading}
-                      size="mini"
-                    >
-                      {t("delete")}
-                    </Button>
-                  </Popconfirm>
-                </Space>
+                  <HomeCell item={item} />
+                </div>
+              </div>
+              {/* 操作按钮 */}
+              <div className="tw-flex tw-flex-col script-action">
+                <Divider style={{ margin: "4px 0 14px" }} />
+                <div className="tw-flex tw-flex-row tw-justify-between">
+                  <div>
+                    {item.type !== SCRIPT_TYPE_NORMAL && (
+                      <Button
+                        type="outline"
+                        icon={item.runStatus === SCRIPT_RUN_STATUS_RUNNING ? <RiStopFill /> : <RiPlayFill />}
+                        loading={item.actionLoading}
+                        size="mini"
+                        onClick={() => handleRunStop(item, t)}
+                      >
+                        {item.runStatus === SCRIPT_RUN_STATUS_RUNNING ? t("stop") : t("run")}
+                      </Button>
+                    )}
+                  </div>
+                  <div className="tw-flex tw-flex-row tw-justify-between tw-items-center">
+                    <Space>
+                      <Link to={`/script/editor/${item.uuid}`}>
+                        <Button type="outline" icon={<RiPencilFill />} size="mini">
+                          {t("edit")}
+                        </Button>
+                      </Link>
+                      {item.config && (
+                        <Button
+                          type="outline"
+                          icon={<RiSettings3Fill />}
+                          size="mini"
+                          onClick={() => handleConfig(item, setUserConfig)}
+                        >
+                          {t("config")}
+                        </Button>
+                      )}
+                      {item.metadata.cloudcat && (
+                        <Button
+                          type="outline"
+                          icon={<RiUploadCloudFill />}
+                          size="mini"
+                          onClick={() => setCloudScript(item)}
+                        >
+                          {t("cloud")}
+                        </Button>
+                      )}
+                      <Popconfirm
+                        title={t("confirm_delete_script")}
+                        icon={<RiDeleteBin5Fill />}
+                        onOk={() => handleDelete(item)}
+                      >
+                        <Button
+                          type="outline"
+                          status="danger"
+                          icon={<RiDeleteBin5Fill />}
+                          loading={item.actionLoading}
+                          size="mini"
+                        >
+                          {t("delete")}
+                        </Button>
+                      </Popconfirm>
+                    </Space>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
+          </Card>
         </div>
-      </Card>
+      </DraggableEntry>
     );
   },
   (prevProps, nextProps) => {
@@ -323,13 +373,13 @@ interface ScriptCardProps {
   scriptList: ScriptLoading[];
   scriptListSortOrder: (params: { active: string; over: string }) => void;
   sidebarOpen: boolean;
-  setSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setSidebarOpen: ReactStateSetter<boolean>;
   setViewMode: (mode: "card" | "table") => void;
   updateScripts: (uuids: string[], data: Partial<Script | ScriptLoading>) => void;
   setUserConfig: (config: { script: Script; userConfig: UserConfig; values: { [key: string]: any } }) => void;
   setCloudScript: (script: Script) => void;
   searchRequest: { keyword: string; type: SearchType };
-  setSearchRequest: SetSearchRequest;
+  setSearchRequest: (mode: SearchFilterRequest) => void;
   handleDelete: (item: ScriptLoading) => void;
   handleConfig: (
     item: ScriptLoading,
@@ -338,177 +388,210 @@ interface ScriptCardProps {
   handleRunStop: (item: ScriptLoading) => Promise<void>;
 }
 
-export const ScriptCard = ({
-  loadingList,
-  scriptList,
-  scriptListSortOrder,
-  sidebarOpen,
-  setSidebarOpen,
-  setViewMode,
-  updateScripts,
-  setUserConfig,
-  setCloudScript,
-  searchRequest,
-  setSearchRequest,
-  handleDelete,
-  handleConfig,
-  handleRunStop,
-}: ScriptCardProps) => {
-  const { t } = useTranslation();
-  const { guideMode } = useAppContext();
+export const ScriptCard = React.memo(
+  ({
+    loadingList,
+    scriptList,
+    scriptListSortOrder,
+    sidebarOpen,
+    setSidebarOpen,
+    setViewMode,
+    updateScripts,
+    setUserConfig,
+    setCloudScript,
+    searchRequest,
+    setSearchRequest,
+    handleDelete,
+    handleConfig,
+    handleRunStop,
+  }: ScriptCardProps) => {
+    const { t } = useTranslation();
+    const { guideMode } = useAppContext();
 
-  // 如果是引导模式，且没有脚本，则创建一条演示数据
-  const list = useMemo(
-    () =>
-      guideMode && scriptList.length === 0
-        ? [
-            {
-              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,
-          ]
-        : scriptList,
-    [guideMode, scriptList]
-  );
+    // 如果是引导模式，且没有脚本，则创建一条演示数据
+    const list = useMemo(
+      () =>
+        guideMode && scriptList.length === 0
+          ? [
+              {
+                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,
+            ]
+          : scriptList,
+      [guideMode, scriptList]
+    );
+    // Sensors — move them here (or even higher in parent) so they're stable
+    const sensors = useSensors(
+      useSensor(PointerSensor, {
+        activationConstraint: { distance: 3 }, // ← prevents accidental drag on click
+      }),
+      useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+      })
+    );
 
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
+    // 故意生成一个字串 memo 避免因 list 的参考频繁改动而导致 ctx 的 sortableIds 参考出现非预期更改。
+    const sortableIdsString = useMemo(() => list?.map((s) => s.uuid).join(",") || "", [list]);
 
-  const sortableIds = useMemo(() => scriptList.map((s) => ({ id: s.uuid })), [scriptList]);
+    // sortableIds 应该只包含 ID 字符串数组，而不是对象数组，
+    // 且确保 items 属性接收的是纯 ID 列表，这样 dnd-kit 内部对比更高效。
+    const sortableIds = useMemo(() => sortableIdsString?.split(",").filter(Boolean), [sortableIdsString]);
 
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-    if (!over) {
-      return;
-    }
-    if (active.id !== over.id) {
-      scriptListSortOrder!({ active: active.id as string, over: over.id as string });
-    }
-  };
+    const handleDragEnd = useCallback(
+      (event: DragEndEvent) => {
+        const { active, over } = event;
+        if (over && active.id !== over.id) {
+          scriptListSortOrder({
+            active: `${active.id}`,
+            over: `${over.id}`,
+          });
+        }
+      },
+      [scriptListSortOrder]
+    );
 
-  return (
-    <>
-      {/* 卡片视图工具栏 */}
-      <Card
-        className="script-list-card"
-        style={{
-          borderWidth: "0 0px 1px 0",
-          padding: "0 16px",
-        }}
-      >
-        <div className="tw-flex tw-flex-row tw-justify-between tw-items-center" style={{ padding: "8px 0" }}>
-          <div className="tw-flex-1">
-            <ScriptSearchField
-              t={t}
-              defaultValue={searchRequest}
-              onSearch={(req) => {
-                setSearchRequest(req);
-              }}
-            />
-          </div>
-          <Space size={8}>
-            <Tooltip content={sidebarOpen ? t("close_sidebar") : t("open_sidebar")}>
-              <Button
-                icon={sidebarOpen ? <VscLayoutSidebarLeft /> : <VscLayoutSidebarLeftOff />}
-                type="text"
-                size="small"
-                style={{
-                  color: "var(--color-text-2)",
-                }}
-                onClick={() => {
-                  setSidebarOpen((sidebarOpen) => {
-                    const newState = !sidebarOpen;
-                    localStorage.setItem("script-list-sidebar", newState ? "1" : "0");
-                    return newState;
-                  });
+    const a11y = useMemo(
+      () => ({
+        container: document.body,
+      }),
+      []
+    );
+
+    return (
+      <>
+        {/* 卡片视图工具栏 */}
+        <Card
+          className="script-list-card"
+          style={{
+            borderWidth: "0 0px 1px 0",
+            padding: "0 16px",
+          }}
+        >
+          <div className="tw-flex tw-flex-row tw-justify-between tw-items-center" style={{ padding: "8px 0" }}>
+            <div className="tw-flex-1">
+              <ScriptSearchField
+                t={t}
+                defaultValue={searchRequest}
+                onSearch={(req) => {
+                  setSearchRequest(req);
                 }}
               />
-            </Tooltip>
-            <Tooltip content={t("switch_to_table_mode")}>
-              <Button
-                icon={<FaThList />}
-                type="text"
-                size="small"
+            </div>
+            <Space size={8}>
+              <Tooltip content={sidebarOpen ? t("close_sidebar") : t("open_sidebar")}>
+                <Button
+                  icon={sidebarOpen ? <VscLayoutSidebarLeft /> : <VscLayoutSidebarLeftOff />}
+                  type="text"
+                  size="small"
+                  style={{
+                    color: "var(--color-text-2)",
+                  }}
+                  onClick={() => {
+                    setSidebarOpen((sidebarOpen) => {
+                      const newState = !sidebarOpen;
+                      localStorage.setItem("script-list-sidebar", newState ? "1" : "0");
+                      return newState;
+                    });
+                  }}
+                />
+              </Tooltip>
+              <Tooltip content={t("switch_to_table_mode")}>
+                <Button
+                  icon={<FaThList />}
+                  type="text"
+                  size="small"
+                  style={{
+                    color: "var(--color-text-2)",
+                  }}
+                  onClick={() => {
+                    setViewMode("table");
+                    localStorage.setItem("script-list-view-mode", "table");
+                  }}
+                />
+              </Tooltip>
+            </Space>
+          </div>
+        </Card>
+        <div
+          style={{
+            padding: "16px",
+          }}
+        >
+          {list.length === 0 ? (
+            loadingList ? (
+              <div
                 style={{
-                  color: "var(--color-text-2)",
+                  textAlign: "center",
+                  padding: "64px 0",
+                  color: "var(--color-text-3)",
                 }}
-                onClick={() => {
-                  setViewMode("table");
-                  localStorage.setItem("script-list-view-mode", "table");
+              >
+                <Typography.Text type="secondary">{t("loading")}</Typography.Text>
+              </div>
+            ) : (
+              <div
+                style={{
+                  textAlign: "center",
+                  padding: "64px 0",
+                  color: "var(--color-text-3)",
                 }}
-              />
-            </Tooltip>
-          </Space>
-        </div>
-      </Card>
-      <div
-        style={{
-          padding: "16px",
-        }}
-      >
-        {list.length === 0 ? (
-          loadingList ? (
-            <div
-              style={{
-                textAlign: "center",
-                padding: "64px 0",
-                color: "var(--color-text-3)",
-              }}
-            >
-              <Typography.Text type="secondary">{t("loading")}</Typography.Text>
-            </div>
+              >
+                <Typography.Text type="secondary">{t("no_data")}</Typography.Text>
+              </div>
+            )
           ) : (
-            <div
-              style={{
-                textAlign: "center",
-                padding: "64px 0",
-                color: "var(--color-text-3)",
-              }}
+            <DndContext
+              sensors={sensors}
+              onDragEnd={handleDragEnd}
+              collisionDetection={closestCenter}
+              accessibility={a11y}
             >
-              <Typography.Text type="secondary">{t("no_data")}</Typography.Text>
-            </div>
-          )
-        ) : (
-          <div
-            className="script-card-grid"
-            style={{
-              display: "grid",
-              gap: "16px",
-            }}
-          >
-            <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
               <SortableContext items={sortableIds} strategy={rectSortingStrategy}>
-                {list.map((item) => (
-                  <ScriptCardItem
-                    key={item.uuid}
-                    item={item}
-                    updateScripts={updateScripts}
-                    setUserConfig={setUserConfig}
-                    setCloudScript={setCloudScript}
-                    handleDelete={handleDelete}
-                    handleConfig={handleConfig}
-                    handleRunStop={handleRunStop}
-                  />
-                ))}
+                <div
+                  className="script-card-grid"
+                  style={{
+                    display: "grid",
+                    gap: "16px",
+                  }}
+                >
+                  {list.map((item) => (
+                    <ScriptCardItem
+                      key={item.uuid}
+                      item={item}
+                      updateScripts={updateScripts}
+                      setUserConfig={setUserConfig}
+                      setCloudScript={setCloudScript}
+                      handleDelete={handleDelete}
+                      handleConfig={handleConfig}
+                      handleRunStop={handleRunStop}
+                    />
+                  ))}
+                </div>
               </SortableContext>
             </DndContext>
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
+          )}
+        </div>
+      </>
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.loadingList === nextProps.loadingList &&
+      prevProps.scriptList === nextProps.scriptList &&
+      prevProps.sidebarOpen === nextProps.sidebarOpen &&
+      prevProps.searchRequest.keyword === nextProps.searchRequest.keyword &&
+      prevProps.searchRequest.type === nextProps.searchRequest.type
+    );
+  }
+);
 
 ScriptCard.displayName = "ScriptCard";
 
diff --git a/src/pages/options/routes/ScriptList/ScriptTable.tsx b/src/pages/options/routes/ScriptList/ScriptTable.tsx
index efe0d684c..b743b635e 100644
--- a/src/pages/options/routes/ScriptList/ScriptTable.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptTable.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import {
   Avatar,
   Button,
@@ -62,35 +62,26 @@ import { SearchFilter } from "./SearchFilter";
 
 type ListType = ScriptLoading;
 
-type RowCtx = ReturnType<typeof useSortable> | null;
-const SortableRowCtx = createContext<RowCtx>(null);
+type DragCtx = Pick<ReturnType<typeof useSortable>, "listeners" | "setActivatorNodeRef"> | null;
+const SortableDragCtx = createContext<DragCtx>(null);
 
 // Create context for DraggableContainer
 interface DraggableContextType {
   sensors: ReturnType<typeof useSensors>;
-  scriptList: ScriptLoading[];
-  scriptListSortOrder: (params: { active: string; over: string }) => void;
+  sortableIds: string[];
+  handleDragEnd: (event: DragEndEvent) => void;
+  a11y: {
+    container: HTMLElement;
+  };
 }
 const DraggableContext = createContext<DraggableContextType | null>(null);
 
 const DraggableContainer = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
   (props, ref) => {
-    const context = useContext(DraggableContext);
-    const { sensors, scriptList, scriptListSortOrder } = context || {};
-    // compute once, even if context is null (keeps hook order legal)
-    const sortableIds = useMemo(() => scriptList?.map((s) => ({ id: s.uuid })), [scriptList]);
+    const ctx = useContext(DraggableContext);
+    const { sensors, sortableIds, handleDragEnd, a11y } = ctx || {};
 
-    const { handleDragEnd } = {
-      handleDragEnd: (event: DragEndEvent) => {
-        const { active, over } = event;
-        if (!over) {
-          return;
-        }
-        if (active.id !== over.id) {
-          scriptListSortOrder!({ active: active.id as string, over: over.id as string });
-        }
-      },
-    };
+    // compute once, even if context is null (keeps hook order legal)
 
     return !sortableIds?.length ? (
       // render a plain tbody to keep the table structure intact
@@ -98,10 +89,10 @@ const DraggableContainer = React.forwardRef<HTMLTableSectionElement, React.HTMLA
     ) : (
       <DndContext
         sensors={sensors}
+        onDragEnd={handleDragEnd}
         collisionDetection={closestCenter}
+        accessibility={a11y}
         modifiers={[restrictToVerticalAxis]}
-        accessibility={{ container: document.body }}
-        onDragEnd={handleDragEnd}
       >
         <SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
           <tbody ref={ref} {...props} />
@@ -125,49 +116,50 @@ function composeRefs<T>(...refs: React.Ref<T>[]): (node: T | null) => void {
   };
 }
 
-const DraggableRow = React.memo(
-  React.forwardRef<HTMLTableRowElement, { record: any; index: any } & React.HTMLAttributes<HTMLTableRowElement>>(
-    ({ record, index: _index, ...rest }, ref) => {
-      const sortable = useSortable({ id: record.uuid });
-      const { setNodeRef, transform, transition } = sortable;
-
-      const style = {
-        transform: CSS.Transform.toString(transform),
-        transition,
-      };
-
-      return (
-        <SortableRowCtx.Provider value={sortable}>
-          <tr ref={composeRefs(setNodeRef, ref)} style={style} {...rest} />
-        </SortableRowCtx.Provider>
-      );
-    }
-  )
-);
-DraggableRow.displayName = "DraggableRow";
+const DraggableRow = React.forwardRef<
+  HTMLTableRowElement,
+  { record: any; index: any } & React.HTMLAttributes<HTMLTableRowElement>
+>(({ record, index: _index, ...rest }, ref) => {
+  const sortable = useSortable({ id: record.uuid });
+  const { setNodeRef, transform, transition, listeners, setActivatorNodeRef } = sortable;
 
-const DragHandle = () => {
-  const sortable = useContext(SortableRowCtx);
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
 
-  if (!sortable)
-    return (
-      <IconDragDotVertical
-        style={{
-          cursor: "move",
-        }}
-      />
-    );
+  const mergedRef = React.useMemo(() => composeRefs<HTMLTableRowElement>(setNodeRef, ref), [setNodeRef, ref]);
 
-  const { listeners, setActivatorNodeRef } = sortable;
+  const ctxValue = useMemo(
+    () => ({
+      listeners: listeners,
+      setActivatorNodeRef: setActivatorNodeRef,
+    }),
+    [listeners, setActivatorNodeRef]
+  );
 
   return (
-    <IconDragDotVertical
-      {...listeners}
-      ref={setActivatorNodeRef}
-      style={{
-        cursor: "move",
-      }}
-    />
+    <SortableDragCtx.Provider value={ctxValue}>
+      <tr ref={mergedRef} style={style} {...rest} />
+    </SortableDragCtx.Provider>
+  );
+});
+DraggableRow.displayName = "DraggableRow";
+
+const DragHandle = () => {
+  const sortable = useContext(SortableDragCtx);
+
+  const { listeners, setActivatorNodeRef } = sortable || {};
+  const style = { cursor: "move", padding: 6 };
+
+  return !setActivatorNodeRef ? (
+    <span style={style}>
+      <IconDragDotVertical />
+    </span>
+  ) : (
+    <span ref={setActivatorNodeRef} {...listeners} style={style}>
+      <IconDragDotVertical />
+    </span>
   );
 };
 
@@ -342,6 +334,7 @@ SortRender.displayName = "SortRender";
 const EnableSwitchCell = React.memo(
   ({ item, updateScripts }: { item: ScriptLoading; updateScripts: any }) => {
     const { uuid } = item;
+    // console.log("Rendered - " + item.name); // 用于检查垃圾React有否过度更新
     return (
       <EnableSwitch
         status={item.status}
@@ -412,7 +405,7 @@ interface ScriptTableProps {
   scriptList: ScriptLoading[];
   scriptListSortOrder: (params: { active: string; over: string }) => void;
   sidebarOpen: boolean;
-  setSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setSidebarOpen: ReactStateSetter<boolean>;
   setViewMode: (mode: "card" | "table") => void;
   updateScripts: (uuids: string[], data: Partial<Script | ScriptLoading>) => void;
   setUserConfig: (config: { script: Script; userConfig: UserConfig; values: { [key: string]: any } }) => void;
@@ -425,575 +418,614 @@ interface ScriptTableProps {
   handleRunStop: (item: ScriptLoading) => Promise<void>;
 }
 
-export const ScriptTable = ({
-  loadingList,
-  scriptList,
-  scriptListSortOrder,
-  sidebarOpen,
-  setSidebarOpen,
-  setViewMode,
-  updateScripts,
-  setUserConfig,
-  setCloudScript,
-  handleDelete,
-  handleConfig,
-  handleRunStop,
-}: ScriptTableProps) => {
-  const { t } = useTranslation();
-  const [showAction, setShowAction] = useState(false);
-  const [action, setAction] = useState("");
-  const [select, setSelect] = useState<Script[]>([]);
-  const [selectColumn, setSelectColumn] = useState(0);
-  const navigate = useNavigate();
-  const [savedWidths, setSavedWidths] = useState<{ [key: string]: number } | null>(null);
-
-  const columns: ColumnProps[] = useMemo(
-    () =>
-      [
-        {
-          title: "#",
-          dataIndex: "sort",
-          width: 60,
-          key: "#",
-          sorter: (a, b) => a.sort - b.sort,
-          render: (col: number) => <SortRender col={col} />,
-        },
-        {
-          key: "title",
-          title: t("enable"),
-          width: t("script_list_enable_width"),
-          dataIndex: "status",
-          className: "script-enable",
-          sorter(a, b) {
-            return a.status - b.status;
+export const ScriptTable = React.memo(
+  ({
+    loadingList,
+    scriptList,
+    scriptListSortOrder,
+    sidebarOpen,
+    setSidebarOpen,
+    setViewMode,
+    updateScripts,
+    setUserConfig,
+    setCloudScript,
+    handleDelete,
+    handleConfig,
+    handleRunStop,
+  }: ScriptTableProps) => {
+    const { t } = useTranslation();
+    const [showAction, setShowAction] = useState(false);
+    const [action, setAction] = useState("");
+    const [select, setSelect] = useState<Script[]>([]);
+    const [selectColumn, setSelectColumn] = useState(0);
+    const navigate = useNavigate();
+    const [savedWidths, setSavedWidths] = useState<{ [key: string]: number } | null>(null);
+
+    const columns: ColumnProps[] = useMemo(
+      () =>
+        [
+          {
+            title: "#",
+            dataIndex: "sort",
+            width: 60,
+            key: "#",
+            sorter: (a, b) => a.sort - b.sort,
+            render: (col: number) => <SortRender col={col} />,
           },
-          filters: [
-            {
-              text: t("enable"),
-              value: SCRIPT_STATUS_ENABLE,
-            },
-            {
-              text: t("disable"),
-              value: SCRIPT_STATUS_DISABLE,
+          {
+            key: "title",
+            title: t("enable"),
+            width: t("script_list_enable_width"),
+            dataIndex: "status",
+            className: "script-enable",
+            sorter(a, b) {
+              return a.status - b.status;
             },
-          ],
-          onFilter: (value, row) => row.status === value,
-          render: (col: any, item: ScriptLoading) => <EnableSwitchCell item={item} updateScripts={updateScripts} />,
-        },
-        {
-          key: "name",
-          title: t("name"),
-          dataIndex: "name",
-          sorter: (a, b) => a.name.localeCompare(b.name),
-          filterIcon: <IconSearch />,
-          filterDropdown: ({ filterKeys, setFilterKeys, confirm }: any) => {
-            return (
-              <div className="arco-table-custom-filter tw-flex tw-flex-row tw-gap-2">
-                <ScriptSearchField
-                  t={t}
-                  autoFocus
-                  defaultValue={filterKeys?.[0] || { type: "auto", keyword: "" }}
-                  onChange={(req) => {
-                    SearchFilter.requestFilterResult(req).then(() => {
-                      setFilterKeys([{ type: req.type, keyword: req.keyword }]);
-                    });
-                  }}
-                  onSearch={(req) => {
-                    if (req.bySelect) return;
-                    confirm();
-                  }}
-                />
-              </div>
-            );
-          },
-          onFilter: (value, row) => {
-            if (!value || !value.keyword) {
-              return true;
-            }
-            return SearchFilter.checkByUUID(row.uuid);
+            filters: [
+              {
+                text: t("enable"),
+                value: SCRIPT_STATUS_ENABLE,
+              },
+              {
+                text: t("disable"),
+                value: SCRIPT_STATUS_DISABLE,
+              },
+            ],
+            onFilter: (value, row) => row.status === value,
+            render: (col: any, item: ScriptLoading) => <EnableSwitchCell item={item} updateScripts={updateScripts} />,
           },
-          className: "tw-max-w-[240px] tw-min-w-[100px]",
-          render: (col: string, item: ListType) => <NameCell col={col} item={item} />,
-        },
-        {
-          title: t("version"),
-          dataIndex: "version",
-          key: "version",
-          width: 120,
-          align: "center",
-          render: (col: any, item: ListType) => <VersionCell item={item} />,
-        },
-        {
-          key: "apply_to_run_status",
-          title: t("apply_to_run_status"),
-          width: t("script_list_apply_to_run_status_width"),
-          className: "apply_to_run_status",
-          render: (col: any, item: ListType) => <ApplyToRunStatusCell item={item} navigate={navigate} t={t} />,
-        },
-        {
-          title: t("source"),
-          dataIndex: "origin",
-          key: "origin",
-          width: 100,
-          className: "source_cell",
-          render: (col: any, item: ListType) => <SourceCell item={item} t={t} />,
-        },
-        {
-          title: t("home"),
-          dataIndex: "home",
-          align: "center",
-          key: "home",
-          width: 100,
-          render: (col: any, item: ListType) => <HomeCell item={item} />,
-        },
-        {
-          title: t("last_updated"),
-          dataIndex: "updatetime",
-          align: "center",
-          key: "updatetime",
-          className: "script-updatetime",
-          width: t("script_list_last_updated_width"),
-          sorter: (a, b) => a.updatetime - b.updatetime,
-          render: (col: number, script: ListType) => <UpdateTimeCell script={script} />,
-        },
-        {
-          title: (
-            <div className="tw-flex tw-flex-row tw-justify-between tw-items-center">
-              <span>{t("action")}</span>
-              <Space size={4}>
-                <Tooltip content={sidebarOpen ? t("open_sidebar") : t("close_sidebar")}>
-                  <Button
-                    icon={sidebarOpen ? <VscLayoutSidebarLeft /> : <VscLayoutSidebarLeftOff />}
-                    iconOnly
-                    type="text"
-                    size="small"
-                    style={{
-                      color: "var(--color-text-2)",
-                    }}
-                    onClick={() => {
-                      setSidebarOpen((sidebarOpen) => {
-                        const newState = !sidebarOpen;
-                        localStorage.setItem("script-list-sidebar", newState ? "1" : "0");
-                        return newState;
+          {
+            key: "name",
+            title: t("name"),
+            dataIndex: "name",
+            sorter: (a, b) => a.name.localeCompare(b.name),
+            filterIcon: <IconSearch />,
+            filterDropdown: ({ filterKeys, setFilterKeys, confirm }: any) => {
+              return (
+                <div className="arco-table-custom-filter tw-flex tw-flex-row tw-gap-2">
+                  <ScriptSearchField
+                    t={t}
+                    autoFocus
+                    defaultValue={filterKeys?.[0] || { type: "auto", keyword: "" }}
+                    onChange={(req) => {
+                      SearchFilter.requestFilterResult(req).then(() => {
+                        setFilterKeys([{ type: req.type, keyword: req.keyword }]);
                       });
                     }}
-                  />
-                </Tooltip>
-                <Tooltip content={t("switch_to_card_mode")}>
-                  <Button
-                    icon={<FaThLarge />}
-                    iconOnly
-                    type="text"
-                    size="small"
-                    style={{
-                      color: "var(--color-text-2)",
-                    }}
-                    onClick={() => {
-                      localStorage.setItem("script-list-view-mode", "card");
-                      setViewMode("card");
+                    onSearch={(req) => {
+                      if (req.bySelect) return;
+                      confirm();
                     }}
                   />
-                </Tooltip>
-              </Space>
-            </div>
-          ),
-          dataIndex: "action",
-          key: "action",
-          className: "script-action",
-          width: 160,
-          render: (col: any, item: ScriptLoading) => (
-            <ActionCell
-              item={item}
-              setUserConfig={setUserConfig}
-              setCloudScript={setCloudScript}
-              t={t}
-              handleDelete={handleDelete}
-              handleConfig={handleConfig}
-              handleRunStop={handleRunStop}
-            />
-          ),
-        },
-      ] as ColumnProps[],
-    [
-      t,
-      sidebarOpen,
-      updateScripts,
-      navigate,
-      setSidebarOpen,
-      setViewMode,
-      setUserConfig,
-      setCloudScript,
-      handleDelete,
-      handleConfig,
-      handleRunStop,
-    ]
-  );
-
-  const [newColumns, setNewColumns] = useState<ColumnProps[]>([]);
-
-  const dealColumns = useMemo(() => {
-    const filtered = newColumns.filter((item) => item.width !== -1);
-    return filtered.length === 0 ? columns : filtered;
-  }, [newColumns, columns]);
-
-  useEffect(() => {
-    if (savedWidths === null) return;
-
-    // 主要只需要处理列宽变化的情况
-    setNewColumns(
-      columns.map((item, i) => {
-        if (savedWidths[item.key!] === undefined) {
-          return columns[i];
-        }
-        return {
-          ...columns[i],
-          width: savedWidths[item.key!] ?? item.width,
-        };
-      })
-    );
-  }, [savedWidths, columns]);
-
-  useEffect(() => {
-    systemConfig.getScriptListColumnWidth().then((columnWidth) => {
-      setSavedWidths({ ...columnWidth });
-    });
-  }, []);
-
-  const components: ComponentsProps = useMemo(
-    () => ({
-      header: {
-        operations: ({ selectionNode, expandNode }) => [
+                </div>
+              );
+            },
+            onFilter: (value, row) => {
+              if (!value || !value.keyword) {
+                return true;
+              }
+              return SearchFilter.checkByUUID(row.uuid);
+            },
+            className: "tw-max-w-[240px] tw-min-w-[100px]",
+            render: (col: string, item: ListType) => <NameCell col={col} item={item} />,
+          },
           {
-            node: <th className="script-sort" style={{ borderRadius: 0 }} />,
-            width: 34,
+            title: t("version"),
+            dataIndex: "version",
+            key: "version",
+            width: 120,
+            align: "center",
+            render: (col: any, item: ListType) => <VersionCell item={item} />,
           },
           {
-            name: "expandNode",
-            node: expandNode,
+            key: "apply_to_run_status",
+            title: t("apply_to_run_status"),
+            width: t("script_list_apply_to_run_status_width"),
+            className: "apply_to_run_status",
+            render: (col: any, item: ListType) => <ApplyToRunStatusCell item={item} navigate={navigate} t={t} />,
           },
           {
-            name: "selectionNode",
-            node: selectionNode,
+            title: t("source"),
+            dataIndex: "origin",
+            key: "origin",
+            width: 100,
+            className: "source_cell",
+            render: (col: any, item: ListType) => <SourceCell item={item} t={t} />,
           },
-        ],
-      },
-      body: {
-        operations: ({ selectionNode, expandNode }) => [
           {
-            node: (
-              <td>
-                <div className="arco-table-cell">
-                  <DragHandle />
-                </div>
-              </td>
-            ),
-            width: 34,
+            title: t("home"),
+            dataIndex: "home",
+            align: "center",
+            key: "home",
+            width: 100,
+            render: (col: any, item: ListType) => <HomeCell item={item} />,
           },
           {
-            name: "expandNode",
-            node: expandNode,
+            title: t("last_updated"),
+            dataIndex: "updatetime",
+            align: "center",
+            key: "updatetime",
+            className: "script-updatetime",
+            width: t("script_list_last_updated_width"),
+            sorter: (a, b) => a.updatetime - b.updatetime,
+            render: (col: number, script: ListType) => <UpdateTimeCell script={script} />,
           },
           {
-            name: "selectionNode",
-            node: selectionNode,
+            title: (
+              <div className="tw-flex tw-flex-row tw-justify-between tw-items-center">
+                <span>{t("action")}</span>
+                <Space size={4}>
+                  <Tooltip content={sidebarOpen ? t("open_sidebar") : t("close_sidebar")}>
+                    <Button
+                      icon={sidebarOpen ? <VscLayoutSidebarLeft /> : <VscLayoutSidebarLeftOff />}
+                      iconOnly
+                      type="text"
+                      size="small"
+                      style={{
+                        color: "var(--color-text-2)",
+                      }}
+                      onClick={() => {
+                        setSidebarOpen((sidebarOpen) => {
+                          const newState = !sidebarOpen;
+                          localStorage.setItem("script-list-sidebar", newState ? "1" : "0");
+                          return newState;
+                        });
+                      }}
+                    />
+                  </Tooltip>
+                  <Tooltip content={t("switch_to_card_mode")}>
+                    <Button
+                      icon={<FaThLarge />}
+                      iconOnly
+                      type="text"
+                      size="small"
+                      style={{
+                        color: "var(--color-text-2)",
+                      }}
+                      onClick={() => {
+                        localStorage.setItem("script-list-view-mode", "card");
+                        setViewMode("card");
+                      }}
+                    />
+                  </Tooltip>
+                </Space>
+              </div>
+            ),
+            dataIndex: "action",
+            key: "action",
+            className: "script-action",
+            width: 160,
+            render: (col: any, item: ScriptLoading) => (
+              <ActionCell
+                item={item}
+                setUserConfig={setUserConfig}
+                setCloudScript={setCloudScript}
+                t={t}
+                handleDelete={handleDelete}
+                handleConfig={handleConfig}
+                handleRunStop={handleRunStop}
+              />
+            ),
           },
-        ],
-        tbody: DraggableContainer,
-        row: DraggableRow,
+        ] as ColumnProps[],
+      [
+        t,
+        sidebarOpen,
+        updateScripts,
+        navigate,
+        setSidebarOpen,
+        setViewMode,
+        setUserConfig,
+        setCloudScript,
+        handleDelete,
+        handleConfig,
+        handleRunStop,
+      ]
+    );
+
+    const [newColumns, setNewColumns] = useState<ColumnProps[]>([]);
+
+    const dealColumns = useMemo(() => {
+      const filtered = newColumns.filter((item) => item.width !== -1);
+      return filtered.length === 0 ? columns : filtered;
+    }, [newColumns, columns]);
+
+    useEffect(() => {
+      if (savedWidths === null) return;
+
+      // 主要只需要处理列宽变化的情况
+      setNewColumns(
+        columns.map((item, i) => {
+          if (savedWidths[item.key!] === undefined) {
+            return columns[i];
+          }
+          return {
+            ...columns[i],
+            width: savedWidths[item.key!] ?? item.width,
+          };
+        })
+      );
+    }, [savedWidths, columns]);
+
+    useEffect(() => {
+      systemConfig.getScriptListColumnWidth().then((columnWidth) => {
+        setSavedWidths({ ...columnWidth });
+      });
+    }, []);
+
+    const components: ComponentsProps = useMemo(
+      () => ({
+        header: {
+          operations: ({ selectionNode, expandNode }) => [
+            {
+              node: <th className="script-sort" style={{ borderRadius: 0 }} />,
+              width: 34,
+            },
+            {
+              name: "expandNode",
+              node: expandNode,
+            },
+            {
+              name: "selectionNode",
+              node: selectionNode,
+            },
+          ],
+        },
+        body: {
+          operations: ({ selectionNode, expandNode }) => [
+            {
+              node: (
+                <td>
+                  <div className="arco-table-cell">
+                    <DragHandle />
+                  </div>
+                </td>
+              ),
+              width: 34,
+            },
+            {
+              name: "expandNode",
+              node: expandNode,
+            },
+            {
+              name: "selectionNode",
+              node: selectionNode,
+            },
+          ],
+          tbody: DraggableContainer,
+          row: DraggableRow,
+        },
+      }),
+      []
+    );
+
+    const setWidth = (selectColumn: number, width: any) => {
+      setNewColumns((cols) =>
+        cols.map((col, i) => (i === selectColumn && col.width !== width ? { ...col, width } : col))
+      );
+    };
+
+    // 处理拖拽排序
+    const sensors = useSensors(
+      useSensor(PointerSensor),
+      useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+      })
+    );
+
+    // 故意生成一个字串 memo 避免因 list 的参考频繁改动而导致 ctx 的 sortableIds 参考出现非预期更改。
+    const sortableIdsString = useMemo(() => scriptList?.map((s) => s.uuid).join(",") || "", [scriptList]);
+
+    // sortableIds 应该只包含 ID 字符串数组，而不是对象数组，
+    // 且确保 items 属性接收的是纯 ID 列表，这样 dnd-kit 内部对比更高效。
+    const sortableIds = useMemo(() => sortableIdsString?.split(",").filter(Boolean), [sortableIdsString]);
+
+    const handleDragEnd = useCallback(
+      (event: DragEndEvent) => {
+        const { active, over } = event;
+        if (over && active.id !== over.id) {
+          scriptListSortOrder!({
+            active: `${active.id}`,
+            over: `${over.id}`,
+          });
+        }
       },
-    }),
-    []
-  );
+      [scriptListSortOrder]
+    );
 
-  const setWidth = (selectColumn: number, width: any) => {
-    setNewColumns((cols) =>
-      cols.map((col, i) => (i === selectColumn && col.width !== width ? { ...col, width } : col))
+    const a11y = useMemo(
+      () => ({
+        container: document.body,
+      }),
+      []
     );
-  };
 
-  // 处理拖拽排序
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-  // Provide context for DraggableContainer
-  const draggableContextValue = useMemo(
-    () => ({
-      sensors,
-      scriptList,
-      scriptListSortOrder,
-    }),
-    [sensors, scriptList, scriptListSortOrder]
-  );
+    // Provide context for DraggableContainer
+    const draggableContextValue = useMemo(
+      () => ({
+        sensors,
+        sortableIds,
+        handleDragEnd,
+        a11y,
+      }),
+      [sensors, sortableIds, handleDragEnd, a11y]
+    );
 
-  return (
-    <DraggableContext.Provider value={draggableContextValue}>
-      {showAction && (
-        <Card>
-          <div
-            className="tw-flex tw-flex-row tw-justify-between tw-items-center"
-            style={{
-              padding: "8px 6px",
-            }}
-          >
-            <Space direction="horizontal">
-              <Typography.Text>{t("batch_operations") + ":"}</Typography.Text>
-              <Select
-                style={{ minWidth: "100px" }}
-                triggerProps={{ autoAlignPopupWidth: false, autoAlignPopupMinWidth: true, position: "bl" }}
-                size="mini"
-                value={action}
-                onChange={(value) => {
-                  setAction(value);
-                }}
-              >
-                <Select.Option key={"enable"} value="enable">
-                  {t("enable")}
-                </Select.Option>
-                <Select.Option key={"disable"} value="disable">
-                  {t("disable")}
-                </Select.Option>
-                <Select.Option key={"export"} value="export">
-                  {t("export")}
-                </Select.Option>
-                <Select.Option key={"delete"} value="delete">
-                  {t("delete")}
-                </Select.Option>
-                <Select.Option key={"pin_to_top"} value="pin_to_top">
-                  {t("pin_to_top")}
-                </Select.Option>
-                <Select.Option key={"check_update"} value="check_update">
-                  {t("check_update")}
-                </Select.Option>
-              </Select>
-              <Button
-                type="primary"
-                size="mini"
-                onClick={() => {
-                  const enableAction = (enable: boolean) => {
-                    const uuids = select.map((item) => item.uuid);
-                    updateScripts(uuids, { enableLoading: true });
-                    scriptClient.enables(uuids, enable);
-                  };
-                  switch (action) {
-                    case "enable":
-                      enableAction(true);
-                      break;
-                    case "disable":
-                      enableAction(false);
-                      break;
-                    case "export": {
-                      const sortedSelect = [...select].sort((a, b) => a.sort - b.sort);
-                      const uuids = sortedSelect.map((item) => item.uuid);
-                      Message.loading({
-                        id: "export",
-                        content: t("exporting"),
-                      });
-                      synchronizeClient.export(uuids).then(() => {
-                        Message.success({
+    return (
+      <DraggableContext.Provider value={draggableContextValue}>
+        {showAction && (
+          <Card>
+            <div
+              className="tw-flex tw-flex-row tw-justify-between tw-items-center"
+              style={{
+                padding: "8px 6px",
+              }}
+            >
+              <Space direction="horizontal">
+                <Typography.Text>{t("batch_operations") + ":"}</Typography.Text>
+                <Select
+                  style={{ minWidth: "100px" }}
+                  triggerProps={{ autoAlignPopupWidth: false, autoAlignPopupMinWidth: true, position: "bl" }}
+                  size="mini"
+                  value={action}
+                  onChange={(value) => {
+                    setAction(value);
+                  }}
+                >
+                  <Select.Option key={"enable"} value="enable">
+                    {t("enable")}
+                  </Select.Option>
+                  <Select.Option key={"disable"} value="disable">
+                    {t("disable")}
+                  </Select.Option>
+                  <Select.Option key={"export"} value="export">
+                    {t("export")}
+                  </Select.Option>
+                  <Select.Option key={"delete"} value="delete">
+                    {t("delete")}
+                  </Select.Option>
+                  <Select.Option key={"pin_to_top"} value="pin_to_top">
+                    {t("pin_to_top")}
+                  </Select.Option>
+                  <Select.Option key={"check_update"} value="check_update">
+                    {t("check_update")}
+                  </Select.Option>
+                </Select>
+                <Button
+                  type="primary"
+                  size="mini"
+                  onClick={() => {
+                    const enableAction = (enable: boolean) => {
+                      const uuids = select.map((item) => item.uuid);
+                      updateScripts(uuids, { enableLoading: true });
+                      scriptClient.enables(uuids, enable);
+                    };
+                    switch (action) {
+                      case "enable":
+                        enableAction(true);
+                        break;
+                      case "disable":
+                        enableAction(false);
+                        break;
+                      case "export": {
+                        const sortedSelect = [...select].sort((a, b) => a.sort - b.sort);
+                        const uuids = sortedSelect.map((item) => item.uuid);
+                        Message.loading({
                           id: "export",
-                          content: t("export_success"),
-                          duration: 3000,
+                          content: t("exporting"),
                         });
-                      });
-                      break;
-                    }
-                    case "delete":
-                      if (confirm(t("list.confirm_delete"))) {
-                        const uuids = select.map((item) => item.uuid);
-                        scriptClient.deletes(uuids); // async
-                      }
-                      break;
-                    case "pin_to_top": {
-                      // 将选中的脚本置顶
-                      const sortedSelect = [...select].sort((a, b) => a.sort - b.sort);
-                      const uuids = sortedSelect.map((item) => item.uuid);
-                      pinToTop(uuids).then(() => {
-                        Message.success({
-                          content: t("scripts_pinned_to_top"),
-                          duration: 3000,
+                        synchronizeClient.export(uuids).then(() => {
+                          Message.success({
+                            id: "export",
+                            content: t("export_success"),
+                            duration: 3000,
+                          });
                         });
-                      });
-                      break;
-                    }
-                    // 批量检查更新
-                    case "check_update":
-                      if (confirm(t("list.confirm_update")!)) {
-                        select.forEach((item, index, array) => {
-                          if (!item.checkUpdateUrl) {
-                            return;
-                          }
-                          Message.warning({
-                            id: "checkupdateStart",
-                            content: t("starting_updates"),
+                        break;
+                      }
+                      case "delete":
+                        if (confirm(t("list.confirm_delete"))) {
+                          const uuids = select.map((item) => item.uuid);
+                          scriptClient.deletes(uuids); // async
+                        }
+                        break;
+                      case "pin_to_top": {
+                        // 将选中的脚本置顶
+                        const sortedSelect = [...select].sort((a, b) => a.sort - b.sort);
+                        const uuids = sortedSelect.map((item) => item.uuid);
+                        pinToTop(uuids).then(() => {
+                          Message.success({
+                            content: t("scripts_pinned_to_top"),
+                            duration: 3000,
                           });
-                          scriptClient
-                            .requestCheckUpdate(item.uuid)
-                            .then((res) => {
-                              if (res) {
-                                // 需要更新
-                                Message.warning({
+                        });
+                        break;
+                      }
+                      // 批量检查更新
+                      case "check_update":
+                        if (confirm(t("list.confirm_update")!)) {
+                          select.forEach((item, index, array) => {
+                            if (!item.checkUpdateUrl) {
+                              return;
+                            }
+                            Message.warning({
+                              id: "checkupdateStart",
+                              content: t("starting_updates"),
+                            });
+                            scriptClient
+                              .requestCheckUpdate(item.uuid)
+                              .then((res) => {
+                                if (res) {
+                                  // 需要更新
+                                  Message.warning({
+                                    id: "checkupdate",
+                                    content: `${i18nName(item)} ${t("new_version_available")}`,
+                                  });
+                                }
+                                if (index === array.length - 1) {
+                                  // 当前元素是最后一个
+                                  Message.success({
+                                    id: "checkupdateEnd",
+                                    content: t("checked_for_all_selected"),
+                                  });
+                                }
+                              })
+                              .catch((e) => {
+                                Message.error({
                                   id: "checkupdate",
-                                  content: `${i18nName(item)} ${t("new_version_available")}`,
-                                });
-                              }
-                              if (index === array.length - 1) {
-                                // 当前元素是最后一个
-                                Message.success({
-                                  id: "checkupdateEnd",
-                                  content: t("checked_for_all_selected"),
+                                  content: `${t("update_check_failed")}: ${e.message}`,
                                 });
-                              }
-                            })
-                            .catch((e) => {
-                              Message.error({
-                                id: "checkupdate",
-                                content: `${t("update_check_failed")}: ${e.message}`,
                               });
-                            });
-                        });
-                      }
-                      break;
-                    default:
-                      Message.error(t("unknown_operation")!);
-                      break;
-                  }
-                }}
-              >
-                {t("confirm")}
-              </Button>
-              <Divider type="horizontal" />
-              <Typography.Text>{t("resize_column_width") + ":"}</Typography.Text>
-              <Select
-                style={{ minWidth: "80px" }}
-                triggerProps={{ autoAlignPopupWidth: false, autoAlignPopupMinWidth: true, position: "bl" }}
-                size="mini"
-                value={selectColumn === 8 ? t("action") : newColumns[selectColumn].title?.toString()}
-                onChange={(val) => {
-                  const index = parseInt(val as string, 10);
-                  setSelectColumn(index);
-                }}
-              >
-                {newColumns.map((column, index) => (
-                  <Select.Option key={index} value={index}>
-                    {index === 8 ? t("action") : column.title}
-                  </Select.Option>
-                ))}
-              </Select>
-              <Dropdown
-                droplist={
-                  <Menu>
-                    <Menu.Item
-                      key="auto"
-                      onClick={() => {
-                        setWidth(selectColumn, 0);
-                      }}
-                    >
-                      {t("auto")}
-                    </Menu.Item>
-                    <Menu.Item
-                      key="hide"
-                      onClick={() => {
-                        setWidth(selectColumn, -1);
-                      }}
-                    >
-                      {t("hide")}
-                    </Menu.Item>
-                    <Menu.Item
-                      key="custom"
-                      onClick={() => {
-                        const width =
-                          (newColumns[selectColumn].width as number) > 0
-                            ? newColumns[selectColumn].width
-                            : columns[selectColumn].width;
-                        setWidth(selectColumn, width);
-                      }}
-                    >
-                      {t("custom")}
-                    </Menu.Item>
-                  </Menu>
-                }
-                position="bl"
-              >
-                <Input
-                  type={newColumns[selectColumn].width === 0 || newColumns[selectColumn].width === -1 ? "" : "number"}
-                  style={{ width: "80px" }}
+                          });
+                        }
+                        break;
+                      default:
+                        Message.error(t("unknown_operation")!);
+                        break;
+                    }
+                  }}
+                >
+                  {t("confirm")}
+                </Button>
+                <Divider type="horizontal" />
+                <Typography.Text>{t("resize_column_width") + ":"}</Typography.Text>
+                <Select
+                  style={{ minWidth: "80px" }}
+                  triggerProps={{ autoAlignPopupWidth: false, autoAlignPopupMinWidth: true, position: "bl" }}
                   size="mini"
-                  value={
-                    newColumns[selectColumn].width === 0
-                      ? t("auto")
-                      : newColumns[selectColumn].width === -1
-                        ? t("hide")
-                        : newColumns[selectColumn].width?.toString()
-                  }
-                  step={5}
+                  value={selectColumn === 8 ? t("action") : newColumns[selectColumn].title?.toString()}
                   onChange={(val) => {
-                    const width = parseInt(val, 10);
-                    setWidth(selectColumn, width);
+                    const index = parseInt(val as string, 10);
+                    setSelectColumn(index);
                   }}
-                />
-              </Dropdown>
-              <Button
-                type="primary"
-                size="mini"
-                onClick={() => {
-                  const newWidth: { [key: string]: number } = {};
-                  for (const column of newColumns) {
-                    newWidth[column.key! as string] = column.width as number;
+                >
+                  {newColumns.map((column, index) => (
+                    <Select.Option key={index} value={index}>
+                      {index === 8 ? t("action") : column.title}
+                    </Select.Option>
+                  ))}
+                </Select>
+                <Dropdown
+                  droplist={
+                    <Menu>
+                      <Menu.Item
+                        key="auto"
+                        onClick={() => {
+                          setWidth(selectColumn, 0);
+                        }}
+                      >
+                        {t("auto")}
+                      </Menu.Item>
+                      <Menu.Item
+                        key="hide"
+                        onClick={() => {
+                          setWidth(selectColumn, -1);
+                        }}
+                      >
+                        {t("hide")}
+                      </Menu.Item>
+                      <Menu.Item
+                        key="custom"
+                        onClick={() => {
+                          const width =
+                            (newColumns[selectColumn].width as number) > 0
+                              ? newColumns[selectColumn].width
+                              : columns[selectColumn].width;
+                          setWidth(selectColumn, width);
+                        }}
+                      >
+                        {t("custom")}
+                      </Menu.Item>
+                    </Menu>
                   }
-                  systemConfig.setScriptListColumnWidth(newWidth);
-                }}
-              >
-                {t("save")}
-              </Button>
+                  position="bl"
+                >
+                  <Input
+                    type={newColumns[selectColumn].width === 0 || newColumns[selectColumn].width === -1 ? "" : "number"}
+                    style={{ width: "80px" }}
+                    size="mini"
+                    value={
+                      newColumns[selectColumn].width === 0
+                        ? t("auto")
+                        : newColumns[selectColumn].width === -1
+                          ? t("hide")
+                          : newColumns[selectColumn].width?.toString()
+                    }
+                    step={5}
+                    onChange={(val) => {
+                      const width = parseInt(val, 10);
+                      setWidth(selectColumn, width);
+                    }}
+                  />
+                </Dropdown>
+                <Button
+                  type="primary"
+                  size="mini"
+                  onClick={() => {
+                    const newWidth: { [key: string]: number } = {};
+                    for (const column of newColumns) {
+                      newWidth[column.key! as string] = column.width as number;
+                    }
+                    systemConfig.setScriptListColumnWidth(newWidth);
+                  }}
+                >
+                  {t("save")}
+                </Button>
+                <Button
+                  size="mini"
+                  onClick={() => {
+                    setNewColumns((cols) => {
+                      return cols.map((col, index) => {
+                        col.width = columns[index].width;
+                        return col;
+                      });
+                    });
+                  }}
+                >
+                  {t("reset")}
+                </Button>
+              </Space>
               <Button
+                type="primary"
                 size="mini"
                 onClick={() => {
-                  setNewColumns((cols) => {
-                    return cols.map((col, index) => {
-                      col.width = columns[index].width;
-                      return col;
-                    });
-                  });
+                  setShowAction(false);
                 }}
               >
-                {t("reset")}
+                {t("close")}
               </Button>
-            </Space>
-            <Button
-              type="primary"
-              size="mini"
-              onClick={() => {
-                setShowAction(false);
-              }}
-            >
-              {t("close")}
-            </Button>
-          </div>
-        </Card>
-      )}
-      <Table
-        key="script-list-table"
-        className="script-list-table arco-drag-table-container"
-        components={components}
-        rowKey="uuid"
-        tableLayoutFixed
-        columns={dealColumns}
-        data={scriptList}
-        pagination={false}
-        loading={loadingList}
-        rowSelection={{
-          type: "checkbox",
-          onChange(_, selectedRows) {
-            setShowAction(true);
-            setSelect(selectedRows);
-          },
-        }}
-      />
-    </DraggableContext.Provider>
-  );
-};
+            </div>
+          </Card>
+        )}
+        <Table
+          key="script-list-table"
+          className="script-list-table arco-drag-table-container"
+          components={components}
+          rowKey="uuid"
+          tableLayoutFixed
+          columns={dealColumns}
+          data={scriptList}
+          pagination={false}
+          loading={loadingList}
+          rowSelection={{
+            type: "checkbox",
+            onChange(_, selectedRows) {
+              setShowAction(true);
+              setSelect(selectedRows);
+            },
+          }}
+        />
+      </DraggableContext.Provider>
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.loadingList === nextProps.loadingList &&
+      prevProps.scriptList === nextProps.scriptList &&
+      prevProps.sidebarOpen === nextProps.sidebarOpen
+    );
+  }
+);
+ScriptTable.displayName = "ScriptTable";
 
 export default ScriptTable;
diff --git a/src/pages/options/routes/ScriptList/Sidebar.tsx b/src/pages/options/routes/ScriptList/Sidebar.tsx
index 7578b7787..52487559f 100644
--- a/src/pages/options/routes/ScriptList/Sidebar.tsx
+++ b/src/pages/options/routes/ScriptList/Sidebar.tsx
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import { Space } from "@arco-design/web-react";
 import { IconDown } from "@arco-design/web-react/icon";
 import { useTranslation } from "react-i18next";
-import type { FilterItem } from "./hooks";
+import type { FilterItem, TSelectFilter } from "./hooks";
 
 interface SidebarProps {
   /**
@@ -16,7 +16,7 @@ interface SidebarProps {
     sourceItems: FilterItem[];
   };
   selectedFilters: Record<string, string | number>;
-  setSelectedFilters: React.Dispatch<React.SetStateAction<Record<string, string | number>>>;
+  setSelectedFilters: ReactStateSetter<TSelectFilter>;
 }
 
 interface FilterGroupProps {
diff --git a/src/pages/options/routes/ScriptList/hooks.tsx b/src/pages/options/routes/ScriptList/hooks.tsx
index 42974e2d5..98b7cca10 100644
--- a/src/pages/options/routes/ScriptList/hooks.tsx
+++ b/src/pages/options/routes/ScriptList/hooks.tsx
@@ -1,4 +1,4 @@
-import type { Script, UserConfig } from "@App/app/repo/scripts";
+import { useEffect, useMemo, useState } from "react";
 import {
   SCRIPT_STATUS_ENABLE,
   SCRIPT_STATUS_DISABLE,
@@ -8,30 +8,16 @@ import {
   SCRIPT_TYPE_CRONTAB,
   SCRIPT_TYPE_NORMAL,
 } from "@App/app/repo/scripts";
-import type {
-  TScriptRunStatus,
-  TInstallScript,
-  TDeleteScript,
-  TEnableScript,
-  TSortedScript,
-} from "@App/app/service/queue";
-import { useAppContext } from "@App/pages/store/AppContext";
-import type { ScriptLoading } from "@App/pages/store/features/script";
-import {
-  fetchScript,
-  fetchScriptList,
-  sortScript,
-  requestDeleteScripts,
-  requestRunScript,
-  requestStopScript,
-} from "@App/pages/store/features/script";
+import { fetchScript, fetchScriptList } from "@App/pages/store/features/script";
 import { loadScriptFavicons } from "@App/pages/store/favicons";
-import { arrayMove } from "@dnd-kit/sortable";
-import type { Dispatch } from "react";
-import { useEffect, useMemo, useState } from "react";
-import { hashColor } from "../utils";
 import { parseTags } from "@App/app/repo/metadata";
 import { getCombinedMeta } from "@App/app/service/service_worker/utils";
+import { cacheInstance } from "@App/app/cache";
+import { useAppContext } from "@App/pages/store/AppContext";
+
+// 组件与工具
+import { type SearchFilterRequest } from "./SearchFilter";
+import { hashColor } from "../utils";
 import {
   IconCode,
   IconPlayArrow,
@@ -42,21 +28,40 @@ import {
   IconTags,
   IconLink,
 } from "@arco-design/web-react/icon";
-import { useTranslation } from "react-i18next";
-import { ValueClient } from "@App/app/service/service_worker/client";
-import { message } from "@App/pages/store/global";
-import { Message } from "@arco-design/web-react";
-import { cacheInstance } from "@App/app/cache";
-import type { SearchType } from "@App/app/service/service_worker/types";
-import { SearchFilter, type SearchFilterRequest } from "./SearchFilter";
 
-export function useScriptList() {
-  const { t } = useTranslation();
-  const { subscribeMessage } = useAppContext();
+// 类型定义
+import type { ScriptLoading } from "@App/pages/store/features/script";
+import type {
+  TScriptRunStatus,
+  TInstallScript,
+  TDeleteScript,
+  TEnableScript,
+  TSortedScript,
+} from "@App/app/service/queue";
+
+export interface FilterItem {
+  key: string | number;
+  label: string;
+  icon: React.ReactNode;
+  count: number;
+}
+
+export type TSelectFilter = {
+  status: "all" | string | number;
+  type: "all" | string | number;
+  tags: "all" | string | number;
+  source: "all" | string | number;
+};
+
+/**
+ * 钩子 1: 管理脚本数据的核心逻辑
+ */
+export function useScriptDataManagement() {
   const [scriptList, setScriptList] = useState<ScriptLoading[]>([]);
   const [loadingList, setLoadingList] = useState<boolean>(true);
+  const { subscribeMessage } = useAppContext();
 
-  // 初始化数据
+  // 初始化列表与 Favicon 加载
   useEffect(() => {
     let mounted = true;
     setLoadingList(true);
@@ -68,20 +73,17 @@ export function useScriptList() {
         if (!mounted) return;
         for await (const { chunkResults } of loadScriptFavicons(list)) {
           if (!mounted) return;
-          setScriptList((list) => {
-            const scriptMap = new Map<string, ScriptLoading>();
-            for (const s of list) {
-              scriptMap.set(s.uuid, s);
-            }
-            const altered = new Set();
-            for (const item of chunkResults) {
-              const script = scriptMap.get(item.uuid);
-              if (script) {
-                altered.add(item.uuid);
-                script.favorite = item.fav;
+          setScriptList((prev) => {
+            const altered = new Set<string>();
+            const newList = prev.map((s) => {
+              const item = chunkResults.find((r) => r.uuid === s.uuid);
+              if (item && s.favorite !== item.fav) {
+                altered.add(s.uuid);
+                return { ...s, favorite: item.fav };
               }
-            }
-            return list.map((entry) => (altered.has(entry.uuid) ? { ...entry } : entry));
+              return s;
+            });
+            return altered.size > 0 ? newList : prev;
           });
         }
       });
@@ -91,99 +93,69 @@ export function useScriptList() {
     };
   }, []);
 
-  // 监听事件
+  // 监听后台消息更新状态
   useEffect(() => {
     const pageApi = {
       scriptRunStatus(data: TScriptRunStatus) {
-        const { uuid, runStatus } = data;
-        setScriptList((list: ScriptLoading[]) => {
-          const index = list.findIndex((s) => s.uuid === uuid);
-          if (index === -1) return list;
-
+        setScriptList((list) => {
+          const index = list.findIndex((s) => s.uuid === data.uuid);
+          if (index === -1 || list[index].runStatus === data.runStatus) return list;
           const newList = [...list];
-          newList[index] = { ...list[index], runStatus };
+          newList[index] = { ...list[index], runStatus: data.runStatus };
           return newList;
         });
       },
-
-      async installScript(message: TInstallScript) {
-        const installedScript = await fetchScript(message.script.uuid);
+      async installScript(msg: TInstallScript) {
+        const installedScript = await fetchScript(msg.script.uuid);
         if (!installedScript) return;
-        const installedScriptUUID = installedScript.uuid;
-        if (!installedScriptUUID) return;
-
-        setScriptList((list: ScriptLoading[]) => {
-          const existingIndex = list.findIndex((s) => s.uuid === installedScriptUUID);
-          if (existingIndex !== -1) {
+        setScriptList((list) => {
+          const idx = list.findIndex((s) => s.uuid === installedScript.uuid);
+          if (idx !== -1) {
             const newList = [...list];
-            newList[existingIndex] = { ...list[existingIndex], ...installedScript };
+            newList[idx] = { ...newList[idx], ...installedScript };
             return newList;
           }
-
-          // 放到第一
           const res = [{ ...installedScript }, ...list];
-          for (let i = 0, l = res.length; i < l; i++) {
-            res[i].sort = i;
-          }
+          res.forEach((s, i) => (s.sort = i));
           return res;
         });
       },
-
       deleteScripts(data: TDeleteScript[]) {
-        const uuids = data.map(({ uuid }) => uuid);
-        const set = new Set(uuids);
-        setScriptList((list: ScriptLoading[]) => {
+        const set = new Set(data.map((d) => d.uuid));
+        setScriptList((list) => {
           const res = list.filter((s) => !set.has(s.uuid));
-          for (let i = 0, l = res.length; i < l; i++) {
-            res[i].sort = i;
-          }
+          if (res.length === list.length) return list;
+          res.forEach((s, i) => (s.sort = i));
           return res;
         });
       },
-
       enableScripts(data: TEnableScript[]) {
-        const map = new Map();
-        for (const { uuid, enable } of data) {
-          map.set(uuid, enable);
-        }
-
-        setScriptList((list: ScriptLoading[]) => {
-          let hasChanges = false;
-          const newList = list.map((script) => {
-            if (map.has(script.uuid)) {
-              hasChanges = true;
-              const enable = map.get(script.uuid);
-              return {
-                ...script,
-                enableLoading: false,
-                status: enable ? SCRIPT_STATUS_ENABLE : SCRIPT_STATUS_DISABLE,
-              };
+        const map = new Map(data.map((d) => [d.uuid, d.enable]));
+        setScriptList((list) => {
+          let changed = false;
+          const newList = list.map((s) => {
+            if (map.has(s.uuid)) {
+              const nextStatus = map.get(s.uuid) ? SCRIPT_STATUS_ENABLE : SCRIPT_STATUS_DISABLE;
+              if (s.status !== nextStatus || s.enableLoading) {
+                changed = true;
+                return { ...s, status: nextStatus, enableLoading: false };
+              }
             }
-            return script;
+            return s;
           });
-
-          return hasChanges ? newList : list;
+          return changed ? newList : list;
         });
       },
-
       sortedScripts(data: TSortedScript[]) {
-        setScriptList((list: ScriptLoading[]) => {
-          const listEntries = new Map<string, ScriptLoading>();
-          for (const item of list) {
-            listEntries.set(item.uuid, item);
-          }
-          let j = 0;
-          const res = new Array(data.length);
-          for (const { uuid } of data) {
-            const item = listEntries.get(uuid);
-            if (item) {
-              res[j] = item;
-              item.sort = j;
-              j++;
-            }
-          }
-          res.length = j;
-          return res;
+        setScriptList((list) => {
+          const dict = new Map(list.map((s) => [s.uuid, s]));
+          return data
+            .map((d, i) => {
+              const s = dict.get(d.uuid);
+              if (s) s.sort = i;
+              return s;
+            })
+            .filter(Boolean) as ScriptLoading[];
         });
       },
     };
@@ -199,423 +171,130 @@ export function useScriptList() {
       for (const unhook of unhooks) unhook();
       unhooks.length = 0;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const updateScripts = (uuids: string[], data: Partial<Script | ScriptLoading>) => {
-    const set = new Set(uuids);
-    setScriptList((list) => {
-      let hasChanges = false;
-      const newList = list.map((script) => {
-        if (set.has(script.uuid)) {
-          hasChanges = true;
-          return { ...script, ...data };
-        }
-        return script;
-      });
-
-      return hasChanges ? newList : list;
-    });
-  };
-
-  const scriptListSortOrder = ({ active, over }: { active: string; over: string }) => {
-    setScriptList((scripts) => {
-      let oldIndex = -1;
-      let newIndex = -1;
-      scripts.forEach((item, index) => {
-        if (item.uuid === active) {
-          oldIndex = index;
-        } else if (item.uuid === over) {
-          newIndex = index;
-        }
-      });
-      if (oldIndex >= 0 && newIndex >= 0) {
-        const newItems = arrayMove(scripts, oldIndex, newIndex);
-        for (let i = 0, l = newItems.length; i < l; i += 1) {
-          if (newItems[i].sort !== i) {
-            newItems[i].sort = i;
-          }
-        }
-        return newItems;
-      } else {
-        return scripts;
-      }
-    });
-    sortScript({ active, over });
-  };
-
-  // 删除脚本操作
-  const handleDelete = (item: ScriptLoading) => {
-    const { uuid } = item;
-    updateScripts([uuid], { actionLoading: true });
-    requestDeleteScripts([uuid]);
-  };
+  }, [subscribeMessage]);
 
-  // 配置脚本操作
-  const handleConfig = (
-    item: ScriptLoading,
-    setUserConfig: (config: { script: Script; userConfig: UserConfig; values: { [key: string]: any } }) => void
-  ) => {
-    new ValueClient(message).getScriptValue(item).then((newValues) => {
-      setUserConfig({
-        userConfig: { ...item.config! },
-        script: item,
-        values: newValues,
-      });
-    });
-  };
-
-  // 运行/停止脚本操作
-  const handleRunStop = async (item: ScriptLoading) => {
-    if (item.runStatus === SCRIPT_RUN_STATUS_RUNNING) {
-      Message.loading({
-        id: "script-stop",
-        content: t("stopping_script"),
-      });
-      updateScripts([item.uuid], { actionLoading: true });
-      await requestStopScript(item.uuid);
-      updateScripts([item.uuid], { actionLoading: false });
-      Message.success({
-        id: "script-stop",
-        content: t("script_stopped"),
-        duration: 3000,
-      });
-    } else {
-      Message.loading({
-        id: "script-run",
-        content: t("starting_script"),
-      });
-      updateScripts([item.uuid], { actionLoading: true });
-      await requestRunScript(item.uuid);
-      updateScripts([item.uuid], { actionLoading: false });
-      Message.success({
-        id: "script-run",
-        content: t("script_started"),
-        duration: 3000,
-      });
-    }
-  };
-
-  return {
-    loadingList,
-    scriptList,
-    setScriptList,
-    updateScripts,
-    scriptListSortOrder,
-    // 操作函数
-    handleDelete,
-    handleConfig,
-    handleRunStop,
-  };
+  return { scriptList, setScriptList, loadingList };
 }
 
-export interface FilterItem {
-  key: string | number;
-  label: string;
-  icon: React.ReactNode;
-  count: number;
-}
-
-export type SetSearchRequest = Dispatch<React.SetStateAction<{ keyword: string; type: SearchType }>>;
-
-export function useScriptSearch() {
-  const scriptListManager = useScriptList();
-  const { t } = useTranslation();
-  const { scriptList } = scriptListManager;
-  const [filterScriptList, setFilterScriptList] = useState<ScriptLoading[]>([]);
-  const [selectedFilters, setSelectedFilters] = useState<Record<string, string | number>>({
-    status: "all",
-    type: "all",
-    tags: "all",
-    source: "all",
-  });
-
-  const [searchRequest, setSearchRequest] = useState<SearchFilterRequest>({
-    keyword: "",
-    type: "auto",
-  });
-  const [sidebarOpen, setSidebarOpen] = useState<boolean>(() => localStorage.getItem("script-list-sidebar") === "1");
-
-  // 计算数据量
-  const { statusItems, typeItems, tagItems, sourceItems, tagMap, originMap } = useMemo(() => {
-    // 侧边栏关闭时不计算
-    if (!sidebarOpen) {
-      return { statusItems: [], typeItems: [], tagItems: [], sourceItems: [], tagMap: {}, originMap: {} };
-    }
-    // 状态过滤选项
-    const statusItems: FilterItem[] = [
-      {
-        key: "all",
-        label: t("script_list.sidebar.all"),
-        icon: <IconCode style={{ fontSize: 14 }} />,
-        count: scriptList.length,
-      },
-      {
-        key: SCRIPT_STATUS_ENABLE,
-        label: t("enable"),
-        icon: <IconPlayArrow style={{ fontSize: 14, color: "#52c41a" }} />,
-        count: 0,
-      },
-      {
-        key: SCRIPT_STATUS_DISABLE,
-        label: t("disable"),
-        icon: <IconPause style={{ fontSize: 14, color: "#ff4d4f" }} />,
-        count: 0,
-      },
-      {
-        key: SCRIPT_RUN_STATUS_RUNNING,
-        label: t("running"),
-        icon: <IconPlayArrow style={{ fontSize: 14, color: "#1890ff" }} />,
-        count: 0,
-      },
-      {
-        key: SCRIPT_RUN_STATUS_COMPLETE,
-        label: t("script_list.sidebar.stopped"),
-        icon: <IconStop style={{ fontSize: 14, color: "#8c8c8c" }} />,
-        count: 0,
-      },
-    ];
-    // 类型过滤选项
-    const typeItems: FilterItem[] = [
-      {
-        key: "all",
-        label: t("script_list.sidebar.all"),
-        icon: <IconCode style={{ fontSize: 14 }} />,
-        count: scriptList.length,
-      },
-      {
-        key: SCRIPT_TYPE_NORMAL,
-        label: t("script_list.sidebar.normal_script"),
-        icon: <IconCode style={{ fontSize: 14, color: "#1890ff" }} />,
-        count: 0,
-      },
-      {
-        key: SCRIPT_TYPE_BACKGROUND,
-        label: t("background_script"),
-        icon: <IconDesktop style={{ fontSize: 14, color: "#722ed1" }} />,
-        count: 0,
-      },
-      {
-        key: SCRIPT_TYPE_CRONTAB,
-        label: t("scheduled_script"),
-        icon: <IconClockCircle style={{ fontSize: 14, color: "#fa8c16" }} />,
-        count: 0,
-      },
-    ];
-
-    // 标签过滤选项
-    const tagItems: FilterItem[] = [
-      {
-        key: "all",
-        label: t("script_list.sidebar.all"),
-        icon: <IconTags style={{ fontSize: 14 }} />,
-        count: scriptList.length,
-      },
-    ];
-
-    // 安装来源过滤选项
-    const sourceItems: FilterItem[] = [
-      {
-        key: "all",
-        label: t("script_list.sidebar.all"),
-        icon: <IconLink style={{ fontSize: 14 }} />,
-        count: scriptList.length,
-      },
-    ];
-
-    const tagMap = {} as Record<string, Set<string>>;
-    const originMap = {} as Record<string, Set<string>>;
-
-    for (const script of scriptList) {
-      // 状态统计
-      if (script.status === SCRIPT_STATUS_ENABLE) {
-        statusItems[1].count++;
-      } else {
-        statusItems[2].count++;
+/**
+ * 钩子 2: 管理统计与过滤逻辑
+ */
+export function useScriptFilters(
+  scriptList: ScriptLoading[],
+  selectedFilters: any,
+  searchRequest: SearchFilterRequest,
+  t: any
+) {
+  // 核心数据解析与统计
+  const stats = useMemo(() => {
+    const tagMap: Record<string, Set<string>> = {};
+    const originMap: Record<string, Set<string>> = {};
+    const counts = { enable: 0, disable: 0, running: 0, stopped: 0, normal: 0, background: 0, crontab: 0 };
+
+    for (const s of scriptList) {
+      if (s.status === SCRIPT_STATUS_ENABLE) counts.enable++;
+      else counts.disable++;
+      if (s.type !== SCRIPT_TYPE_NORMAL) {
+        if (s.runStatus === SCRIPT_RUN_STATUS_RUNNING) counts.running++;
+        else counts.stopped++;
       }
-      if (script.type === SCRIPT_TYPE_NORMAL) {
-        typeItems[1].count++;
-      } else {
-        if (script.runStatus === SCRIPT_RUN_STATUS_RUNNING) {
-          statusItems[3].count++;
-        } else {
-          statusItems[4].count++;
-        }
-        typeItems[2].count++;
-        if (script.type === SCRIPT_TYPE_CRONTAB) {
-          typeItems[3].count++;
-        }
+      if (s.type === SCRIPT_TYPE_NORMAL) counts.normal++;
+      else {
+        counts.background++;
+        if (s.type === SCRIPT_TYPE_CRONTAB) counts.crontab++;
       }
-      // 标签统计
-      let metadata = script.metadata;
-      if (script.selfMetadata) {
-        metadata = getCombinedMeta(metadata, script.selfMetadata);
-      }
-      if (metadata.tag) {
-        const tags = parseTags(metadata);
-        for (const tag of tags) {
-          const tagMapSet = tagMap[tag] || (tagMap[tag] = new Set());
-          tagMapSet.add(script.uuid);
-        }
+      const meta = s.selfMetadata ? getCombinedMeta(s.metadata, s.selfMetadata) : s.metadata;
+      for (const tag of parseTags(meta)) {
+        if (!tagMap[tag]) tagMap[tag] = new Set();
+        tagMap[tag].add(s.uuid);
       }
-      // 来源统计
-      if (script.originDomain) {
-        const originMapSet = originMap[script.originDomain] || (originMap[script.originDomain] = new Set());
-        originMapSet.add(script.uuid);
+      if (s.originDomain) {
+        if (!originMap[s.originDomain]) originMap[s.originDomain] = new Set();
+        originMap[s.originDomain].add(s.uuid);
       }
     }
-    tagItems.push(
-      ...Object.keys(tagMap).map((tag) => {
-        // 标签过滤选项
-        const count = tagMap[tag]?.size || 0;
-        return {
+    return { tagMap, originMap, counts };
+  }, [scriptList]);
+
+  // 构建 Sidebar UI 项
+  const filterItems = useMemo(() => {
+    const { counts, tagMap, originMap } = stats;
+    const tagItems = [
+      { key: "all", label: t("script_list.sidebar.all"), icon: <IconTags />, count: Object.keys(tagMap).length },
+      ...Object.keys(tagMap)
+        .sort()
+        .map((tag) => ({
           key: tag,
           label: tag,
+          count: tagMap[tag].size,
           icon: <div className={`tw-w-3 tw-h-3 arco-badge-color-${hashColor(tag)} tw-rounded-full`} />,
-          count,
-        };
-      })
-    );
-    sourceItems.push(
-      ...Object.keys(originMap).map((source) => {
-        const count = originMap[source]?.size || 0;
-        return {
-          key: source,
-          label: source,
-          icon: <div className={`tw-w-3 tw-h-3 arco-badge-color-${hashColor(source)} tw-rounded-full`} />,
-          count,
-        };
-      })
-    );
-    return { statusItems, typeItems, tagItems, sourceItems, tagMap, originMap };
-  }, [scriptList, sidebarOpen, t]);
-
-  const filterFuncs = useMemo(() => {
-    // 当 originMap, selectedFilters, tagMap 改变时更新
-    const filterFuncs: Array<(script: Script) => boolean> = [];
-    for (const [groupKey, itemKey] of Object.entries(selectedFilters)) {
-      switch (groupKey) {
-        case "status":
-          switch (itemKey) {
-            case "all":
-              break;
-            case SCRIPT_STATUS_ENABLE:
-            case SCRIPT_STATUS_DISABLE:
-              filterFuncs.push((script) => script.status === itemKey);
-              break;
-            case SCRIPT_RUN_STATUS_RUNNING:
-            case SCRIPT_RUN_STATUS_COMPLETE:
-              filterFuncs.push((script) => {
-                if (script.type === SCRIPT_TYPE_NORMAL) {
-                  return false;
-                }
-                return script.runStatus === itemKey;
-              });
-              break;
-          }
-          break;
-        case "type":
-          switch (itemKey) {
-            case "all":
-              break;
-            case SCRIPT_TYPE_NORMAL:
-              filterFuncs.push((script) => script.type === SCRIPT_TYPE_NORMAL);
-              break;
-            case SCRIPT_TYPE_BACKGROUND:
-              filterFuncs.push(
-                (script) => script.type === SCRIPT_TYPE_BACKGROUND || script.type === SCRIPT_TYPE_CRONTAB
-              );
-              break;
-            case SCRIPT_TYPE_CRONTAB:
-              filterFuncs.push((script) => script.type === SCRIPT_TYPE_CRONTAB);
-              break;
-          }
-          break;
-        case "tags":
-          if (itemKey !== "all") {
-            const scriptSet = tagMap[itemKey as string];
-            if (scriptSet) {
-              filterFuncs.push((script) => scriptSet.has(script.uuid));
-            }
-          }
-          break;
-        case "source":
-          if (itemKey !== "all") {
-            const scriptSet = originMap[itemKey as string];
-            if (scriptSet) {
-              filterFuncs.push((script) => scriptSet.has(script.uuid));
-            }
-          }
-          break;
-      }
-    }
-    return filterFuncs;
-  }, [originMap, selectedFilters, tagMap]);
-
-  useEffect(() => {
-    // 当 filterFuncs 改变时进行 / Filter结果取得时进行
-    // 按 filterFuncs 过滤一次
-    let filterList = scriptList.filter((script) => filterFuncs.every((fn) => fn(script)));
-    if (searchRequest.keyword !== "") {
-      // 再基于关键词过滤一次
-      let setLoading = true;
-      SearchFilter.requestFilterResult(searchRequest).then(() => {
-        if (setLoading === false) return;
-        filterList = filterList.filter((item) => {
-          return SearchFilter.checkByUUID(item.uuid);
-        });
-        setFilterScriptList(filterList);
-      });
-      return () => {
-        setLoading = false;
-      };
-    }
-    setFilterScriptList(filterList);
-  }, [scriptList, filterFuncs, searchRequest]); // searchFilter 参考固定不变
-
-  // 覆盖scriptListManager的排序方法
-  // 避免触发顺序是 scriptList -> filterScriptList 导致列表会出现一瞬间的错乱
-  const scriptListSortOrder = ({ active, over }: { active: string; over: string }) => {
-    setFilterScriptList((scripts) => {
-      let oldIndex = -1;
-      let newIndex = -1;
-      scripts.forEach((item, index) => {
-        if (item.uuid === active) {
-          oldIndex = index;
-        } else if (item.uuid === over) {
-          newIndex = index;
-        }
-      });
-      if (oldIndex >= 0 && newIndex >= 0) {
-        const newItems = arrayMove(scripts, oldIndex, newIndex);
-        for (let i = 0, l = newItems.length; i < l; i += 1) {
-          if (newItems[i].sort !== i) {
-            newItems[i].sort = i;
-          }
-        }
-        return newItems;
-      } else {
-        return scripts;
-      }
-    });
-    scriptListManager.scriptListSortOrder!({ active, over });
-  };
+        })),
+    ];
+    const sourceItems = [
+      { key: "all", label: t("script_list.sidebar.all"), icon: <IconLink />, count: Object.keys(originMap).length },
+      ...Object.keys(originMap)
+        .sort()
+        .map((src) => ({
+          key: src,
+          label: src,
+          count: originMap[src].size,
+          icon: <div className={`tw-w-3 tw-h-3 arco-badge-color-${hashColor(src)} tw-rounded-full`} />,
+        })),
+    ];
 
-  return {
-    ...scriptListManager,
-    scriptListSortOrder,
-    filterScriptList,
-    selectedFilters,
-    setSelectedFilters,
-    searchRequest,
-    setSearchRequest,
-    filterItems: {
-      statusItems,
-      typeItems,
+    return {
       tagItems,
       sourceItems,
-    },
-    sidebarOpen,
-    setSidebarOpen,
-  };
+      statusItems: [
+        { key: "all", label: t("script_list.sidebar.all"), icon: <IconCode />, count: scriptList.length },
+        {
+          key: SCRIPT_STATUS_ENABLE,
+          label: t("enable"),
+          icon: <IconPlayArrow style={{ color: "#52c41a" }} />,
+          count: counts.enable,
+        },
+        {
+          key: SCRIPT_STATUS_DISABLE,
+          label: t("disable"),
+          icon: <IconPause style={{ color: "#ff4d4f" }} />,
+          count: counts.disable,
+        },
+        {
+          key: SCRIPT_RUN_STATUS_RUNNING,
+          label: t("running"),
+          icon: <IconPlayArrow style={{ color: "#1890ff" }} />,
+          count: counts.running,
+        },
+        {
+          key: SCRIPT_RUN_STATUS_COMPLETE,
+          label: t("script_list.sidebar.stopped"),
+          icon: <IconStop style={{ color: "#8c8c8c" }} />,
+          count: counts.stopped,
+        },
+      ],
+      typeItems: [
+        { key: "all", label: t("script_list.sidebar.all"), icon: <IconCode />, count: scriptList.length },
+        {
+          key: SCRIPT_TYPE_NORMAL,
+          label: t("script_list.sidebar.normal_script"),
+          icon: <IconCode style={{ color: "#1890ff" }} />,
+          count: counts.normal,
+        },
+        {
+          key: SCRIPT_TYPE_BACKGROUND,
+          label: t("background_script"),
+          icon: <IconDesktop style={{ color: "#722ed1" }} />,
+          count: counts.background,
+        },
+        {
+          key: SCRIPT_TYPE_CRONTAB,
+          label: t("scheduled_script"),
+          icon: <IconClockCircle style={{ color: "#fa8c16" }} />,
+          count: counts.crontab,
+        },
+      ],
+    };
+  }, [stats, scriptList.length, t]);
+
+  return { stats, filterItems };
 }
diff --git a/src/pages/options/routes/ScriptList/index.tsx b/src/pages/options/routes/ScriptList/index.tsx
index 6eaa7ab0b..e1ba8a914 100644
--- a/src/pages/options/routes/ScriptList/index.tsx
+++ b/src/pages/options/routes/ScriptList/index.tsx
@@ -1,139 +1,254 @@
-import { useEffect, useState } from "react";
-import { Card } from "@arco-design/web-react";
-import type { Script, UserConfig } from "@App/app/repo/scripts";
-import { ScriptDAO } from "@App/app/repo/scripts";
+import { useCallback, useEffect, useState, memo } from "react";
+import { Card, Message } from "@arco-design/web-react";
 import { useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { arrayMove } from "@dnd-kit/sortable";
+
+// 仓库与常量引用
+import type { Script, UserConfig } from "@App/app/repo/scripts";
+import {
+  ScriptDAO,
+  SCRIPT_STATUS_ENABLE,
+  SCRIPT_STATUS_DISABLE,
+  SCRIPT_RUN_STATUS_RUNNING,
+  SCRIPT_TYPE_BACKGROUND,
+  SCRIPT_TYPE_CRONTAB,
+  SCRIPT_TYPE_NORMAL,
+} from "@App/app/repo/scripts";
+import {
+  requestDeleteScripts,
+  requestRunScript,
+  requestStopScript,
+  sortScript,
+} from "@App/pages/store/features/script";
+import { ValueClient } from "@App/app/service/service_worker/client";
+import { message } from "@App/pages/store/global";
+
+// 组件与工具
 import UserConfigPanel from "@App/pages/components/UserConfigPanel";
 import CloudScriptPlan from "@App/pages/components/CloudScriptPlan";
 import ScriptListSidebar from "./Sidebar";
 import ScriptCard from "./ScriptCard";
-import { message } from "@App/pages/store/global";
-import { ValueClient } from "@App/app/service/service_worker/client";
 import ScriptTable from "./ScriptTable";
-import { useScriptSearch } from "./hooks";
+import { SearchFilter, type SearchFilterRequest } from "./SearchFilter";
+
+// 类型定义
+import type { ScriptLoading } from "@App/pages/store/features/script";
+
+import { type TSelectFilter, useScriptDataManagement, useScriptFilters } from "./hooks";
 
+/**
+ * 子组件: 渲染内容区域 (通过 memo 防止 userConfig 变更触发列表重绘)
+ */
+const MainContent = memo(({ viewMode, ...props }: any) => {
+  return viewMode === "table" ? <ScriptTable {...props} /> : <ScriptCard {...props} />;
+});
+
+MainContent.displayName = "MainContent";
+
+/**
+ * 主组件
+ */
 function ScriptList() {
+  const { t } = useTranslation();
+  const [usp] = useSearchParams();
+
+  // 1. 基础 UI 状态
+  const [sidebarOpen, setSidebarOpen] = useState(() => localStorage.getItem("script-list-sidebar") === "1");
+  const [viewMode, setViewMode] = useState<"table" | "card">(() => {
+    const saved = localStorage.getItem("script-list-view-mode");
+    if (saved === "table" || saved === "card") return saved;
+    return window.screen.width < 1280 ? "card" : "table";
+  });
+  const [selectedFilters, setSelectedFilters] = useState<TSelectFilter>({
+    status: "all",
+    type: "all",
+    tags: "all",
+    source: "all",
+  });
+  const [searchRequest, setSearchRequest] = useState<SearchFilterRequest>({ keyword: "", type: "auto" });
+
+  // 2. 弹窗状态 (独立状态，不会引起 MainContent 重绘)
   const [userConfig, setUserConfig] = useState<{
     script: Script;
     userConfig: UserConfig;
-    values: { [key: string]: any };
+    values: Record<string, any>;
   }>();
   const [cloudScript, setCloudScript] = useState<Script>();
-  const {
-    loadingList,
-    filterScriptList,
-    scriptListSortOrder,
-    updateScripts,
-    filterItems,
-    selectedFilters,
-    setSelectedFilters,
-    searchRequest,
-    setSearchRequest,
-    sidebarOpen,
-    setSidebarOpen,
-    handleDelete,
-    handleConfig,
-    handleRunStop,
-  } = useScriptSearch();
-
-  const openUserConfig = useSearchParams()[0].get("userConfig") || "";
-  const [viewMode, setViewMode] = useState<"table" | "card">(() => {
-    // 根据屏幕宽度选择默认视图模式
-    const viewMode = localStorage.getItem("script-list-view-mode");
-    if (viewMode === "table" || viewMode === "card") {
-      return viewMode;
+
+  // 3. 数据与统计 Hook
+  const { scriptList, setScriptList, loadingList } = useScriptDataManagement();
+  const { stats, filterItems } = useScriptFilters(scriptList, selectedFilters, searchRequest, t);
+  const [filterScriptList, setFilterScriptList] = useState<ScriptLoading[]>([]);
+
+  // 4. 更新函数 (useCallback 保证引用稳定)
+  const updateScripts = useCallback(
+    (uuids: string[], data: Partial<ScriptLoading>) => {
+      const set = new Set(uuids);
+      setScriptList((list) => {
+        let changed = false;
+        const newList = list.map((s) => {
+          if (set.has(s.uuid)) {
+            let hasDiff = false;
+            const next = { ...s };
+            for (const [k, v] of Object.entries(data)) {
+              if ((s as any)[k] !== v) {
+                hasDiff = true;
+                (next as any)[k] = v;
+              }
+            }
+            if (hasDiff) {
+              changed = true;
+              return next;
+            }
+          }
+          return s;
+        });
+        return changed ? newList : list;
+      });
+    },
+    [setScriptList]
+  );
+
+  // 5. 业务操作函数
+  const handleDelete = useCallback(
+    (item: ScriptLoading) => {
+      updateScripts([item.uuid], { actionLoading: true });
+      requestDeleteScripts([item.uuid]);
+    },
+    [updateScripts]
+  );
+
+  const handleConfig = useCallback((item: ScriptLoading) => {
+    new ValueClient(message).getScriptValue(item).then((newValues) => {
+      setUserConfig({ userConfig: { ...item.config! }, script: item, values: newValues });
+    });
+  }, []);
+
+  const handleRunStop = useCallback(
+    async (item: ScriptLoading) => {
+      const isRunning = item.runStatus === SCRIPT_RUN_STATUS_RUNNING;
+      const msgId = isRunning ? "script-stop" : "script-run";
+      Message.loading({ id: msgId, content: t(isRunning ? "stopping_script" : "starting_script") });
+      updateScripts([item.uuid], { actionLoading: true });
+      try {
+        if (isRunning) await requestStopScript(item.uuid);
+        else await requestRunScript(item.uuid);
+        Message.success({ id: msgId, content: t(isRunning ? "script_stopped" : "script_started"), duration: 3000 });
+      } catch (_err) {
+        Message.error({ id: msgId, content: t("operation_failed") });
+      } finally {
+        updateScripts([item.uuid], { actionLoading: false });
+      }
+    },
+    [t, updateScripts]
+  );
+
+  const scriptListSortOrder = useCallback(
+    ({ active, over }: { active: string; over: string }) => {
+      setScriptList((prev) => {
+        const oldIdx = prev.findIndex((s) => s.uuid === active);
+        const newIdx = prev.findIndex((s) => s.uuid === over);
+        if (oldIdx !== -1 && newIdx !== -1) {
+          const next = arrayMove(prev, oldIdx, newIdx);
+          next.forEach((s, i) => (s.sort = i));
+          return next;
+        }
+        return prev;
+      });
+      sortScript({ active, over });
+    },
+    [setScriptList]
+  );
+
+  // 6. 执行过滤逻辑
+  useEffect(() => {
+    const { status, type, tags, source } = selectedFilters;
+    const list = scriptList.filter((s) => {
+      if (status !== "all") {
+        if (status === SCRIPT_STATUS_ENABLE || status === SCRIPT_STATUS_DISABLE) {
+          if (s.status !== status) return false;
+        } else if (s.type === SCRIPT_TYPE_NORMAL || s.runStatus !== status) return false;
+      }
+      if (type !== "all") {
+        if (type === SCRIPT_TYPE_NORMAL) {
+          if (s.type !== SCRIPT_TYPE_NORMAL) return false;
+        } else if (type === SCRIPT_TYPE_BACKGROUND) {
+          if (s.type !== SCRIPT_TYPE_BACKGROUND && s.type !== SCRIPT_TYPE_CRONTAB) return false;
+        } else if (s.type !== SCRIPT_TYPE_CRONTAB) return false;
+      }
+      if (tags !== "all" && !stats.tagMap[tags as string]?.has(s.uuid)) return false;
+      if (source !== "all" && !stats.originMap[source as string]?.has(s.uuid)) return false;
+      return true;
+    });
+
+    let searchOrFilter = 0;
+    if (searchRequest.keyword) {
+      searchOrFilter = 1;
+      SearchFilter.requestFilterResult(searchRequest).then(() => {
+        if (searchOrFilter === 1) {
+          setFilterScriptList(list.filter((s) => SearchFilter.checkByUUID(s.uuid)));
+        } else {
+          setFilterScriptList(list);
+        }
+      });
+    } else {
+      setFilterScriptList(list);
     }
-    const width = window.screen.width;
-    if (width < 1280) return "card";
-    return "table";
-  });
+    return () => {
+      searchOrFilter = 0;
+    };
+  }, [scriptList, selectedFilters, stats, searchRequest]);
 
-  // 设置列和判断是否打开用户配置
+  // 处理 URL 传参打开配置
   useEffect(() => {
-    if (openUserConfig) {
-      const dao = new ScriptDAO();
-      dao.get(openUserConfig).then((script) => {
-        if (script && script.config) {
-          new ValueClient(message).getScriptValue(script).then((values) => {
-            setUserConfig({
-              script,
-              userConfig: script.config!,
-              values: values,
-            });
-          });
+    const openId = usp.get("userConfig");
+    if (openId) {
+      new ScriptDAO().get(openId).then((script) => {
+        if (script?.config) {
+          new ValueClient(message)
+            .getScriptValue(script)
+            .then((values) => setUserConfig({ script, userConfig: script.config!, values }));
         }
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <Card
-      id="script-list"
-      className="script-list"
-      style={{
-        height: "100%",
-        overflowY: "auto",
-      }}
-    >
+    <Card id="script-list" className="script-list" style={{ height: "100%", overflowY: "auto" }}>
       <div className="tw-flex tw-flex-col">
-        {/* 主要内容区域 */}
         <div className="tw-flex tw-flex-row tw-relative">
-          {/* 侧边栏 */}
           <ScriptListSidebar
             open={sidebarOpen}
             filterItems={filterItems}
             selectedFilters={selectedFilters}
             setSelectedFilters={setSelectedFilters}
           />
-
-          {/* 主要表格/卡片区域 */}
           <div className="tw-flex-1">
-            {viewMode === "table" ? (
-              <ScriptTable
-                loadingList={loadingList}
-                scriptList={filterScriptList}
-                scriptListSortOrder={scriptListSortOrder}
-                updateScripts={updateScripts}
-                sidebarOpen={sidebarOpen}
-                setSidebarOpen={setSidebarOpen}
-                setViewMode={setViewMode}
-                setUserConfig={setUserConfig}
-                setCloudScript={setCloudScript}
-                handleDelete={handleDelete}
-                handleConfig={handleConfig}
-                handleRunStop={handleRunStop}
-              />
-            ) : (
-              <ScriptCard
-                loadingList={loadingList}
-                scriptList={filterScriptList}
-                scriptListSortOrder={scriptListSortOrder}
-                updateScripts={updateScripts}
-                sidebarOpen={sidebarOpen}
-                setSidebarOpen={setSidebarOpen}
-                setViewMode={setViewMode}
-                setUserConfig={setUserConfig}
-                setCloudScript={setCloudScript}
-                searchRequest={searchRequest}
-                setSearchRequest={setSearchRequest}
-                handleDelete={handleDelete}
-                handleConfig={handleConfig}
-                handleRunStop={handleRunStop}
-              />
-            )}
+            <MainContent
+              viewMode={viewMode}
+              loadingList={loadingList}
+              scriptList={filterScriptList}
+              scriptListSortOrder={scriptListSortOrder}
+              updateScripts={updateScripts}
+              sidebarOpen={sidebarOpen}
+              setSidebarOpen={setSidebarOpen}
+              setViewMode={setViewMode}
+              setUserConfig={setUserConfig}
+              setCloudScript={setCloudScript}
+              handleDelete={handleDelete}
+              handleConfig={handleConfig}
+              handleRunStop={handleRunStop}
+              searchRequest={searchRequest} // Card 模式需要
+              setSearchRequest={setSearchRequest}
+            />
           </div>
         </div>
 
         {userConfig && (
           <UserConfigPanel script={userConfig.script} userConfig={userConfig.userConfig} values={userConfig.values} />
         )}
-        <CloudScriptPlan
-          script={cloudScript}
-          onClose={() => {
-            setCloudScript(undefined);
-          }}
-        />
+        <CloudScriptPlan script={cloudScript} onClose={() => setCloudScript(undefined)} />
       </div>
     </Card>
   );
diff --git a/src/pages/store/favicons.ts b/src/pages/store/favicons.ts
index 2fa261aa1..697af842f 100644
--- a/src/pages/store/favicons.ts
+++ b/src/pages/store/favicons.ts
@@ -304,12 +304,14 @@ type FavIconResult = {
   }[];
 };
 
+type TFaviconStack = { chunkResults: FavIconResult[]; pendingCount: number };
+
 // 处理favicon加载，以批次方式处理
 export const loadScriptFavicons = async function* (scripts: Script[]) {
-  const stack: any[] = [];
+  const stack: TFaviconStack[] = [];
   const asyncWaiter: { promise?: any; resolve?: any } = {};
   const createPromise = () => {
-    asyncWaiter.promise = new Promise<{ chunkResults: FavIconResult[]; pendingCount: number }>((resolve) => {
+    asyncWaiter.promise = new Promise<TFaviconStack>((resolve) => {
       asyncWaiter.resolve = resolve;
     });
   };
@@ -329,7 +331,7 @@ export const loadScriptFavicons = async function* (scripts: Script[]) {
           const chunkResults: FavIconResult[] = results.slice(0);
           results.length = 0;
           pendingCount -= chunkResults.length;
-          stack.push({ chunkResults, pendingCount } as { chunkResults: FavIconResult[]; pendingCount: number });
+          stack.push({ chunkResults, pendingCount });
           asyncWaiter.resolve();
         });
         waiting = true;
@@ -339,7 +341,7 @@ export const loadScriptFavicons = async function* (scripts: Script[]) {
   while (true) {
     await asyncWaiter.promise;
     while (stack.length) {
-      yield stack.shift();
+      yield stack.shift()!;
     }
     if (pendingCount <= 0) break;
     createPromise();
diff --git a/src/types/main.d.ts b/src/types/main.d.ts
index 545e0ac8b..0b9624821 100644
--- a/src/types/main.d.ts
+++ b/src/types/main.d.ts
@@ -6,6 +6,7 @@ declare module "@App/app/types.d.ts";
 
 type Override<T, U> = Omit<T, keyof U> & U;
 type ValueOf<T> = T[keyof T];
+type ReactStateSetter<T> = (value: T | ((prev: T) => T)) => void;
 
 declare const sandbox: Window;