refactor(ui): useZustandShallowSelector

ui/src/pages/accesses/AccessList.tsx

@@ -18,7 +18,7 @@ const AccessList = () => {
   const [modalApi, ModelContextHolder] = Modal.useModal();
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
-  const { initialized, accesses, fetchAccesses, deleteAccess } = useAccessStore();
+  const { accesses, loadedAtOnce, fetchAccesses, deleteAccess } = useAccessStore();
 
   const tableColumns: TableProps<AccessModel>["columns"] = [
     {
@@ -181,7 +181,7 @@ const AccessList = () => {
       <Table<AccessModel>
         columns={tableColumns}
         dataSource={tableData}
-        loading={!initialized || loading}
+        loading={!loadedAtOnce || loading}
         locale={{
           emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t("access.nodata")} />,
         }}

ui/src/pages/certificates/CertificateList.tsx

@@ -120,7 +120,7 @@ const CertificateList = () => {
               type="secondary"
               ellipsis
               onClick={() => {
-                navigate(`/workflows/detail?id=${workflowId}`);
+                navigate(`/workflows/${workflowId}`);
               }}
             >
               {record.expand?.workflow?.name ?? ""}

ui/src/pages/settings/SettingsNotification.tsx

@@ -8,7 +8,7 @@ import { useNotifyChannelStore } from "@/stores/notify";
 const SettingsNotification = () => {
   const { t } = useTranslation();
 
-  const { initialized } = useNotifyChannelStore();
+  const { loadedAtOnce } = useNotifyChannelStore();
 
   return (
     <div>
@@ -20,7 +20,7 @@ const SettingsNotification = () => {
 
       <Divider />
 
-      <Card className="shadow" styles={{ body: initialized ? { padding: 0 } : {} }} title={t("settings.notification.channels.card.title")}>
+      <Card className="shadow" styles={{ body: loadedAtOnce ? { padding: 0 } : {} }} title={t("settings.notification.channels.card.title")}>
         <NotifyChannels classNames={{ form: "md:max-w-[40rem]" }} />
       </Card>
     </div>

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Button, message, notification, Switch } from "antd";
-import { useShallow } from "zustand/shallow";
 import { ArrowLeft as ArrowLeftIcon } from "lucide-react";
 
 import Show from "@/components/Show";
@@ -12,20 +11,14 @@ import WorkflowBaseInfoEditDialog from "@/components/workflow/WorkflowBaseInfoEd
 import WorkflowLog from "@/components/workflow/WorkflowLog";
 import WorkflowProvider from "@/components/workflow/WorkflowProvider";
 import { cn } from "@/components/ui/utils";
+import { useZustandShallowSelector } from "@/hooks";
 import { allNodesValidated, WorkflowNode } from "@/domain/workflow";
-import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
+import { useWorkflowStore } from "@/stores/workflow";
 import { run as runWorkflow } from "@/api/workflow";
 
-const selectState = (state: WorkflowState) => ({
-  workflow: state.workflow,
-  init: state.init,
-  switchEnable: state.switchEnable,
-  save: state.save,
-});
-
 const WorkflowDetail = () => {
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
+  const { id } = useParams();
 
   const { t } = useTranslation();
 
@@ -33,11 +26,10 @@ const WorkflowDetail = () => {
   const [_, NotificationContextHolder] = notification.useNotification();
 
   // 3. 使用正确的选择器和 shallow 比较
-  const { workflow, init, switchEnable, save } = useWorkflowStore(useShallow(selectState));
+  const { workflow, init, switchEnable, save } = useWorkflowStore(useZustandShallowSelector(["workflow", "init", "switchEnable", "save"]));
 
   // 从 url 中获取 workflowId
   const [locId, setLocId] = useState<string>("");
-  const id = searchParams.get("id");
 
   const [tab, setTab] = useState("workflow");
 
@@ -78,7 +70,7 @@ const WorkflowDetail = () => {
     }
     switchEnable();
     if (!locId) {
-      navigate(`/workflows/detail?id=${workflow.id}`);
+      navigate(`/workflows/${workflow.id}`);
     }
   };
 
@@ -89,7 +81,7 @@ const WorkflowDetail = () => {
     }
     save();
     if (!locId) {
-      navigate(`/workflows/detail?id=${workflow.id}`);
+      navigate(`/workflows/${workflow.id}`);
     }
   };
 

ui/src/pages/workflows/WorkflowList.tsx

@@ -180,7 +180,7 @@ const WorkflowList = () => {
               type="link"
               icon={<PencilIcon size={16} />}
               onClick={() => {
-                navigate(`/workflows/detail?id=${record.id}`);
+                navigate(`/workflows/${record.id}`);
               }}
             />
           </Tooltip>
@@ -276,7 +276,7 @@ const WorkflowList = () => {
   };
 
   const handleCreateClick = () => {
-    navigate("/workflows/detail");
+    navigate("/workflows/");
   };
 
   return (