From 37387f80fcf3d6d2230669cfeb05bac6ba57f0a3 Mon Sep 17 00:00:00 2001 From: cyfung1031 <44498510+cyfung1031@users.noreply.github.com> Date: Sat, 14 Feb 2026 14:57:02 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E9=87=8D=E6=9E=84=20DraggableEntry=20?= =?UTF-8?q?=E3=80=81=E4=BF=AE=E6=AD=A3=E5=8D=A1=E7=89=87=E9=AB=98=E5=BA=A6?= =?UTF-8?q?=E5=AF=B9=E9=BD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../options/routes/ScriptList/ScriptCard.tsx | 387 +++++++++--------- 1 file changed, 189 insertions(+), 198 deletions(-) diff --git a/src/pages/options/routes/ScriptList/ScriptCard.tsx b/src/pages/options/routes/ScriptList/ScriptCard.tsx index 41f151e52..a9a77c284 100644 --- a/src/pages/options/routes/ScriptList/ScriptCard.tsx +++ b/src/pages/options/routes/ScriptList/ScriptCard.tsx @@ -33,49 +33,42 @@ import type { SearchType } from "@App/app/service/service_worker/types"; type DragCtx = Pick, "listeners" | "setActivatorNodeRef"> | null; const SortableDragCtx = createContext(null); -function composeRefs(...refs: React.Ref[]): (node: T | null) => void { - return (node) => { - for (const ref of refs) { - if (typeof ref === "function") { - ref(node); - } else if (ref) { - (ref as React.MutableRefObject).current = node; - } - } - }; -} - -type DraggableEntryProps = { recordUUID: string } & React.HTMLAttributes; +type DraggableEntryProps = { + recordUUID: string; + children: React.ReactElement; +}; -const DraggableEntry = React.forwardRef(({ recordUUID, ...rest }, ref) => { - const sortable = useSortable({ id: recordUUID }); - const { setNodeRef, transform, transition, listeners, setActivatorNodeRef, isDragging } = sortable; +const DraggableEntry = ({ recordUUID, children }: DraggableEntryProps) => { + const { setNodeRef, transform, transition, listeners, setActivatorNodeRef, isDragging, attributes } = useSortable({ + id: recordUUID, + }); const style = { - // ScriptCard 移位渉及多个元件上下左右移动，DragEnd时不要使用 dnd-kit 提供的效果 + ...children.props.style, // Merge existing styles transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1, zIndex: isDragging ? 10 : "auto", }; - const mergedRef = React.useMemo(() => composeRefs(setNodeRef, ref), [setNodeRef, ref]); - const ctxValue = useMemo( () => ({ - listeners: listeners, - setActivatorNodeRef: setActivatorNodeRef, + listeners, + setActivatorNodeRef, }), [listeners, setActivatorNodeRef] ); return ( -
+ {React.cloneElement(children, { + ref: setNodeRef, + style, + ...attributes, + })} ); -}); -DraggableEntry.displayName = "DraggableEntry"; +}; const DragHandle = () => { const sortable = useContext(SortableDragCtx); @@ -162,205 +155,203 @@ export const ScriptCardItem = React.memo( return ( -
- -
-
-
-
- -
- - - {i18nName(item)} - -
- - {tags.length > 0 && ( - - {tags.map((tag) => ( - - {tag} - - ))} - - )} -
-
- { - updateScripts([item.uuid], { enableLoading: true }); - requestEnableScript({ uuid: item.uuid, enable: checked }); - }} - /> -
- + +
+
+
+
+ +
+ + + {i18nName(item)} +
+ + {tags.length > 0 && ( + + {tags.map((tag) => ( + + {tag} + + ))} + + )} +
+
+ { + updateScripts([item.uuid], { enableLoading: true }); + requestEnableScript({ uuid: item.uuid, enable: checked }); + }} + /> +
+
+
- {/* 版本和更新时间 */} -
- {item.metadata.version?.[0] && ( -
- - {t("version")} - {": "} - - {item.metadata.version[0]} -
- )} -
+ {/* 版本和更新时间 */} +
+ {item.metadata.version?.[0] && ( +
- {t("last_updated")} + {t("version")} {": "} - + {item.metadata.version[0]}
+ )} +
+ + {t("last_updated")} + {": "} + +
+
- {/* 运行状态 */} -
- {item.type !== SCRIPT_TYPE_NORMAL && ( -
- + {item.type !== SCRIPT_TYPE_NORMAL && ( +
+ + } + color="blue" + bordered + style={{ cursor: "pointer" }} + onClick={toLogger} > - } - color="blue" - bordered - style={{ cursor: "pointer" }} - onClick={toLogger} - > - {item.runStatus === SCRIPT_RUN_STATUS_RUNNING ? t("running") : t("completed")} - - -
- )} - -
+ {item.runStatus === SCRIPT_RUN_STATUS_RUNNING ? t("running") : t("completed")} + + +
+ )} + +
-
- {item.type === SCRIPT_TYPE_NORMAL && ( - - {favoriteMemo.trimmed.map((fav) => ( - { - if (fav.website) { - window.open(fav.website, "_blank"); - } - }} - /> - ))} - {favoriteMemo.originalLen > 8 && {"..."}} - +
+ {item.type === SCRIPT_TYPE_NORMAL && ( + + {favoriteMemo.trimmed.map((fav) => ( + { + if (fav.website) { + window.open(fav.website, "_blank"); + } + }} + /> + ))} + {favoriteMemo.originalLen > 8 && {"..."}} + + )} + +
+
+ {/* 操作按钮 */} +
+ +
+
+ {item.type !== SCRIPT_TYPE_NORMAL && ( + )} -
-
- {/* 操作按钮 */} -
- -
-
- {item.type !== SCRIPT_TYPE_NORMAL && ( +
+ + + + + {item.config && ( )} -
-
- - - - - {item.config && ( - - )} - {item.metadata.cloudcat && ( - - )} - } + size="mini" + onClick={() => setCloudScript(item)} + > + {t("cloud")} + + )} + } + onOk={() => handleDelete(item)} + > + - - -
+ {t("delete")} + + +
- -
+
+ ); }, From 117a092d529b4455fb2247f0bb3868065f751678 Mon Sep 17 00:00:00 2001 From: cyfung1031 <44498510+cyfung1031@users.noreply.github.com> Date: Mon, 16 Feb 2026 17:16:14 +0900 Subject: [PATCH 2/4] Update src/pages/options/routes/ScriptList/ScriptCard.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/pages/options/routes/ScriptList/ScriptCard.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/options/routes/ScriptList/ScriptCard.tsx b/src/pages/options/routes/ScriptList/ScriptCard.tsx index a9a77c284..c04def3ad 100644 --- a/src/pages/options/routes/ScriptList/ScriptCard.tsx +++ b/src/pages/options/routes/ScriptList/ScriptCard.tsx @@ -70,6 +70,7 @@ const DraggableEntry = ({ recordUUID, children }: DraggableEntryProps) => { ); }; +DraggableEntry.displayName = "DraggableEntry"; const DragHandle = () => { const sortable = useContext(SortableDragCtx); From df0c8b1a8aea9f7669525c6c1ec7b593df68d251 Mon Sep 17 00:00:00 2001 From: cyfung1031 <44498510+cyfung1031@users.noreply.github.com> Date: Mon, 16 Feb 2026 17:43:29 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=E6=A0=B9=E6=8D=AEAI=E6=8C=87=E7=A4=BA?= =?UTF-8?q?=EF=BC=8C=E8=BF=98=E5=8E=9F=E8=87=B3=E5=8E=9F=E6=9C=89=E7=9A=84?= =?UTF-8?q?=20composeRefs=20/=20mergeRefs=20=E5=81=9A=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../options/routes/ScriptList/ScriptCard.tsx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/pages/options/routes/ScriptList/ScriptCard.tsx b/src/pages/options/routes/ScriptList/ScriptCard.tsx index c04def3ad..192ba1869 100644 --- a/src/pages/options/routes/ScriptList/ScriptCard.tsx +++ b/src/pages/options/routes/ScriptList/ScriptCard.tsx @@ -38,6 +38,18 @@ type DraggableEntryProps = { children: React.ReactElement; }; +function composeRefs(...refs: React.Ref[]): (node: T | null) => void { + return (node) => { + for (const ref of refs) { + if (typeof ref === "function") { + ref(node); + } else if (ref) { + (ref as React.MutableRefObject).current = node; + } + } + }; +} + const DraggableEntry = ({ recordUUID, children }: DraggableEntryProps) => { const { setNodeRef, transform, transition, listeners, setActivatorNodeRef, isDragging, attributes } = useSortable({ id: recordUUID, @@ -51,6 +63,9 @@ const DraggableEntry = ({ recordUUID, children }: DraggableEntryProps) => { zIndex: isDragging ? 10 : "auto", }; + // Extract the child's existing ref and compose it with dnd-kit + const composedRefs = composeRefs((children as any).ref, setNodeRef); + const ctxValue = useMemo( () => ({ listeners, @@ -62,9 +77,10 @@ const DraggableEntry = ({ recordUUID, children }: DraggableEntryProps) => { return ( {React.cloneElement(children, { - ref: setNodeRef, - style, ...attributes, + ...children.props, + ref: composedRefs, + style, })} ); From 2a95b9629c43da92815f087338dd1652637fe546 Mon Sep 17 00:00:00 2001 From: cyfung1031 <44498510+cyfung1031@users.noreply.github.com> Date: Mon, 16 Feb 2026 17:48:10 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E8=BF=98=E5=8E=9F=E8=87=B3=E5=8E=9F?= =?UTF-8?q?=E6=9C=AC=E7=9A=84mergedRef?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/options/routes/ScriptList/ScriptCard.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/options/routes/ScriptList/ScriptCard.tsx b/src/pages/options/routes/ScriptList/ScriptCard.tsx index 192ba1869..5132ca0d8 100644 --- a/src/pages/options/routes/ScriptList/ScriptCard.tsx +++ b/src/pages/options/routes/ScriptList/ScriptCard.tsx @@ -63,8 +63,9 @@ const DraggableEntry = ({ recordUUID, children }: DraggableEntryProps) => { zIndex: isDragging ? 10 : "auto", }; + const ref = (children as any).ref; // Extract the child's existing ref and compose it with dnd-kit - const composedRefs = composeRefs((children as any).ref, setNodeRef); + const mergedRef = React.useMemo(() => composeRefs(setNodeRef, ref), [setNodeRef, ref]); const ctxValue = useMemo( () => ({ @@ -79,7 +80,7 @@ const DraggableEntry = ({ recordUUID, children }: DraggableEntryProps) => { {React.cloneElement(children, { ...attributes, ...children.props, - ref: composedRefs, + ref: mergedRef, style, })}