refactor(ui): useZustandShallowSelector

ui/src/components/workflow/AddNode.tsx

@@ -3,8 +3,8 @@ import { Plus } from "lucide-react";
 import { BrandNodeProps, NodeProps } from "./types";
 
 import { newWorkflowNode, workflowNodeDropdownList, WorkflowNodeType } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useZustandShallowSelector } from "@/hooks";
+import { useWorkflowStore } from "@/stores/workflow";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -21,12 +21,8 @@ import DropdownMenuItemIcon from "./DropdownMenuItemIcon";
 import Show from "../Show";
 import { useTranslation } from "react-i18next";
 
-const selectState = (state: WorkflowState) => ({
-  addNode: state.addNode,
-});
-
 const AddNode = ({ data }: NodeProps | BrandNodeProps) => {
-  const { addNode } = useWorkflowStore(useShallow(selectState));
+  const { addNode } = useWorkflowStore(useZustandShallowSelector(["addNode"]));
   const { t } = useTranslation();
 
   const handleTypeSelected = (type: WorkflowNodeType, provider?: string) => {

ui/src/components/workflow/ApplyForm.tsx

@@ -13,23 +13,20 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrig
 import AccessEditModal from "@/components/access/AccessEditModal";
 import EmailsEdit from "@/components/certimate/EmailsEdit";
 import StringList from "@/components/certimate/StringList";
-
 import { accessProvidersMap } from "@/domain/access";
+import { useZustandShallowSelector } from "@/hooks";
 import { useAccessStore } from "@/stores/access";
 import { useContactStore } from "@/stores/contact";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
 import { usePanel } from "./PanelProvider";
 
 type ApplyFormProps = {
   data: WorkflowNode;
 };
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-});
+
 const ApplyForm = ({ data }: ApplyFormProps) => {
-  const { updateNode } = useWorkflowStore(useShallow(selectState));
+  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
 
   const { accesses } = useAccessStore();
   const { emails, fetchEmails } = useContactStore();

ui/src/components/workflow/BranchNode.tsx

@@ -4,15 +4,12 @@ import { WorkflowBranchNode, WorkflowNode } from "@/domain/workflow";
 import NodeRender from "./NodeRender";
 import { memo } from "react";
 import { BrandNodeProps } from "./types";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { useTranslation } from "react-i18next";
 
-const selectState = (state: WorkflowState) => ({
-  addBranch: state.addBranch,
-});
 const BranchNode = memo(({ data }: BrandNodeProps) => {
-  const { addBranch } = useWorkflowStore(useShallow(selectState));
+  const { addBranch } = useWorkflowStore(useZustandShallowSelector(["addBranch"]));
 
   const { t } = useTranslation();
 

ui/src/components/workflow/ConditionNode.tsx

@@ -1,16 +1,12 @@
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
+import { useWorkflowStore } from "@/stores/workflow";
 import AddNode from "./AddNode";
 import { NodeProps } from "./types";
-import { useShallow } from "zustand/shallow";
+import { useZustandShallowSelector } from "@/hooks";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
 import { Ellipsis, Trash2 } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  removeBranch: state.removeBranch,
-});
 const ConditionNode = ({ data, branchId, branchIndex }: NodeProps) => {
-  const { updateNode, removeBranch } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, removeBranch } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeBranch"]));
   const handleNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
     updateNode({ ...data, name: e.target.innerText });
   };

ui/src/components/workflow/DeployToAliyunALB.tsx

@@ -6,8 +6,8 @@ import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { DeployFormProps } from "./DeployForm";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -18,13 +18,8 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
-
 const DeployToAliyunALB = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToAliyunCDN.tsx

@@ -7,8 +7,8 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
 
@@ -19,12 +19,8 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToAliyunCDN = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToAliyunCLB.tsx

@@ -6,8 +6,8 @@ import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { DeployFormProps } from "./DeployForm";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -18,13 +18,8 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
-
 const DeployToAliyunCLB = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToAliyunNLB.tsx

@@ -6,21 +6,16 @@ import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { DeployFormProps } from "./DeployForm";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 import { Button } from "../ui/button";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
-
 const DeployToAliyunNLB = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToAliyunOss.tsx

@@ -7,25 +7,19 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
-
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
-
 import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToBaiduCloudCDN.tsx

@@ -7,11 +7,10 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
-
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
@@ -19,12 +18,8 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToByteplusCDN.tsx

@@ -7,11 +7,10 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
-
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
@@ -19,12 +18,8 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToByteplusCDN = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToDogeCloudCDN.tsx

@@ -7,8 +7,8 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
 
@@ -19,12 +19,8 @@ import AccessSelect from "./AccessSelect";
 import { Plus } from "lucide-react";
 import AccessEditModal from "../access/AccessEditModal";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToHuaweiCloudCDN.tsx

@@ -7,8 +7,8 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
 
@@ -20,12 +20,8 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToHuaweiCloudELB.tsx

@@ -7,8 +7,8 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
 
@@ -19,12 +19,8 @@ import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 import AccessSelect from "./AccessSelect";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToKubernetesSecret.tsx

@@ -7,8 +7,8 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
 
@@ -19,12 +19,8 @@ import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 import AccessSelect from "./AccessSelect";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToLocal.tsx

@@ -7,8 +7,8 @@ import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "../ui/select";
 import { Button } from "../ui/button";
 import { DeployFormProps } from "./DeployForm";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { useEffect, useState } from "react";
 import i18n from "@/i18n";
@@ -19,11 +19,6 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
-
 const t = i18n.t;
 
 const formSchema = z
@@ -75,7 +70,7 @@ const formSchema = z
   });
 
 const DeployToLocal = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToQiniuCDN.tsx

@@ -7,8 +7,8 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
 
@@ -19,12 +19,8 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToQiniuCDN = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToSSH.tsx

@@ -7,8 +7,8 @@ import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "../ui/select";
 import { Button } from "../ui/button";
 import { DeployFormProps } from "./DeployForm";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { useEffect, useState } from "react";
 import i18n from "@/i18n";
@@ -18,11 +18,6 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
-
 const t = i18n.t;
 
 const formSchema = z
@@ -71,7 +66,7 @@ const formSchema = z
   });
 
 const DeployToSSH = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToTencentCDN.tsx

@@ -7,11 +7,10 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
-
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
@@ -19,12 +18,8 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToTencentCDN = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToTencentCLB.tsx

@@ -7,11 +7,10 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
-
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
@@ -21,12 +20,8 @@ import { Plus } from "lucide-react";
 
 type TencentResourceType = "ssl-deploy" | "loadbalancer" | "listener" | "ruledomain";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToTencentCLB = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToTencentCOS.tsx

@@ -7,11 +7,10 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
-
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
@@ -19,12 +18,8 @@ import AccessEditModal from "../access/AccessEditModal";
 import AccessSelect from "./AccessSelect";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToTencentCOS = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToTencentTEO.tsx

@@ -7,11 +7,10 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
-
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
@@ -19,12 +18,8 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToTencentTEO = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToVolcengineCDN.tsx

@@ -7,11 +7,10 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
-
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
@@ -19,12 +18,8 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToVolcengineCDN = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToVolcengineLive.tsx

@@ -7,11 +7,10 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
-
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
@@ -19,12 +18,8 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
 const DeployToVolcengineLive = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/DeployToWebhook.tsx

@@ -6,11 +6,10 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { Button } from "../ui/button";
-
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
@@ -19,17 +18,12 @@ import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
-});
-
 const KVTypeSchema = z.object({
   key: z.string(),
   value: z.string(),
 });
 const DeployToWebhook = ({ data }: DeployFormProps) => {
-  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
 

ui/src/components/workflow/Node.tsx

@@ -1,7 +1,7 @@
 import { WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
 import AddNode from "./AddNode";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
 import { Ellipsis, Trash2 } from "lucide-react";
 import { usePanel } from "./PanelProvider";
@@ -17,12 +17,8 @@ type NodeProps = {
 
 const i18nPrefix = "workflow.node";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-  removeNode: state.removeNode,
-});
 const Node = ({ data }: NodeProps) => {
-  const { updateNode, removeNode } = useWorkflowStore(useShallow(selectState));
+  const { updateNode, removeNode } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode"]));
   const handleNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
     updateNode({ ...data, name: e.target.innerText });
   };

ui/src/components/workflow/NotifyForm.tsx

@@ -5,8 +5,8 @@ import { z } from "zod";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "../ui/select";
 import { Input } from "../ui/input";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { usePanel } from "./PanelProvider";
 import { useTranslation } from "react-i18next";
 import { Button } from "../ui/button";
@@ -21,9 +21,6 @@ type NotifyFormProps = {
   data: WorkflowNode;
 };
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-});
 type ChannelName = {
   key: string;
   label: string;
@@ -31,7 +28,7 @@ type ChannelName = {
 
 const i18nPrefix = "workflow.node.notify.form";
 const NotifyForm = ({ data }: NotifyFormProps) => {
-  const { updateNode } = useWorkflowStore(useShallow(selectState));
+  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
   const { channels: supportedChannels, fetchChannels } = useNotifyChannelStore();

ui/src/components/workflow/StartForm.tsx

@@ -5,12 +5,12 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Radio } from "antd";
 import { parseExpression } from "cron-parser";
 import { z } from "zod";
-import { useShallow } from "zustand/shallow";
 
 import { Button } from "../ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 import { Input } from "../ui/input";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
+import { useWorkflowStore } from "@/stores/workflow";
 import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
 import { usePanel } from "./PanelProvider";
 import { RadioChangeEvent } from "antd/lib";
@@ -41,11 +41,8 @@ type StartFormProps = {
 
 const i18nPrefix = "workflow.node.start.form";
 
-const selectState = (state: WorkflowState) => ({
-  updateNode: state.updateNode,
-});
 const StartForm = ({ data }: StartFormProps) => {
-  const { updateNode } = useWorkflowStore(useShallow(selectState));
+  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
   const { hidePanel } = usePanel();
 
   const { t } = useTranslation();

ui/src/components/workflow/WorkflowBaseInfoEditDialog.tsx

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
-import { useShallow } from "zustand/shallow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { useZustandShallowSelector } from "@/hooks";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
@@ -20,12 +20,8 @@ const formSchema = z.object({
   description: z.string(),
 });
 
-const selectState = (state: WorkflowState) => ({
-  setBaseInfo: state.setBaseInfo,
-  workflow: state.workflow,
-});
 const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) => {
-  const { setBaseInfo, workflow } = useWorkflowStore(useShallow(selectState));
+  const { setBaseInfo, workflow } = useWorkflowStore(useZustandShallowSelector(["setBaseInfo", "workflow"]));
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),

ui/src/components/workflow/WorkflowLog.tsx

@@ -3,7 +3,7 @@ import { list as logs } from "@/repository/workflowRunLog";
 import { ColumnDef } from "@tanstack/react-table";
 import { useState } from "react";
 import { DataTable } from "./DataTable";
-import { useSearchParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { Check, X } from "lucide-react";
 import WorkflowLogDetail from "./WorkflowLogDetail";
 import { useTranslation } from "react-i18next";
@@ -12,8 +12,7 @@ const WorkflowLog = () => {
   const [data, setData] = useState<WorkflowRunLog[]>([]);
   const [pageCount, setPageCount] = useState<number>(0);
 
-  const [searchParams] = useSearchParams();
-  const id = searchParams.get("id");
+  const { id } = useParams();
 
   const { t } = useTranslation();