refactor(ui): clean code

ui/src/components/access/AccessEditModal.tsx

@@ -4,8 +4,8 @@ import { useControllableValue } from "ahooks";
 import { Modal, notification } from "antd";
 
 import { type AccessModel } from "@/domain/access";
-import { useTriggerElement } from "@/hooks";
+import { useTriggerElement, useZustandShallowSelector } from "@/hooks";
-import { useAccessStore } from "@/stores/access";
+import { useAccessesStore } from "@/stores/access";
 import { getErrMsg } from "@/utils/error";
 
 import AccessEditForm, { type AccessEditFormInstance, type AccessEditFormProps } from "./AccessEditForm";
@@ -25,7 +25,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, onSubmit, ...props }:
 
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
-  const { createAccess, updateAccess } = useAccessStore();
+  const { createAccess, updateAccess } = useAccessesStore(useZustandShallowSelector(["createAccess", "updateAccess"]));
 
   const [open, setOpen] = useControllableValue<boolean>(props, {
     valuePropName: "open",

ui/src/components/access/AccessSelect.tsx

@@ -3,7 +3,8 @@ import { Avatar, Select, Space, Typography, type SelectProps } from "antd";
 
 import { type AccessModel } from "@/domain/access";
 import { accessProvidersMap } from "@/domain/provider";
-import { useAccessStore } from "@/stores/access";
+import { useZustandShallowSelector } from "@/hooks";
+import { useAccessesStore } from "@/stores/access";
 
 export type AccessTypeSelectProps = Omit<
   SelectProps,
@@ -13,7 +14,7 @@ export type AccessTypeSelectProps = Omit<
 };
 
 const AccessSelect = ({ filter, ...props }: AccessTypeSelectProps) => {
-  const { accesses, loadedAtOnce, fetchAccesses } = useAccessStore();
+  const { accesses, loadedAtOnce, fetchAccesses } = useAccessesStore(useZustandShallowSelector(["accesses", "loadedAtOnce", "fetchAccesses"]));
   useEffect(() => {
     fetchAccesses();
   }, [fetchAccesses]);

ui/src/components/notification/NotifyChannels.tsx

@@ -5,7 +5,8 @@ import { Button, Collapse, message, notification, Skeleton, Space, Switch, type
 
 import Show from "@/components/Show";
 import { notifyChannelsMap } from "@/domain/settings";
-import { useNotifyChannelStore } from "@/stores/notify";
+import { useZustandShallowSelector } from "@/hooks";
+import { useNotifyChannelsStore } from "@/stores/notify";
 import { getErrMsg } from "@/utils/error";
 
 import NotifyChannelEditForm, { type NotifyChannelEditFormInstance } from "./NotifyChannelEditForm";
@@ -23,7 +24,7 @@ const NotifyChannel = ({ className, style, channel }: NotifyChannelProps) => {
   const [messageApi, MessageContextHolder] = message.useMessage();
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
-  const { channels, setChannel } = useNotifyChannelStore();
+  const { channels, setChannel } = useNotifyChannelsStore(useZustandShallowSelector(["channels", "setChannel"]));
 
   const channelConfig = useDeepCompareMemo(() => channels[channel], [channels, channel]);
   const channelFormRef = useRef<NotifyChannelEditFormInstance>(null);
@@ -78,7 +79,7 @@ export type NotifyChannelsProps = {
 const NotifyChannels = ({ className, classNames, style, styles }: NotifyChannelsProps) => {
   const { t, i18n } = useTranslation();
 
-  const { channels, loadedAtOnce, setChannel, fetchChannels } = useNotifyChannelStore();
+  const { channels, loadedAtOnce, setChannel, fetchChannels } = useNotifyChannelsStore();
   useEffect(() => {
     fetchChannels();
   }, [fetchChannels]);

ui/src/components/workflow/Node.tsx

@@ -35,7 +35,7 @@ const Node = ({ data }: NodeProps) => {
 
     updateNode(
       produce(data, (draft) => {
-        draft.name = e.target.innerText;
+        draft.name = newName;
       })
     );
   };
@@ -66,8 +66,10 @@ const Node = ({ data }: NodeProps) => {
             </Show>
           </div>
         );
+
       case WorkflowNodeType.Apply:
         return <div className="text-muted-foreground truncate">{data.config?.domain as string}</div>;
+
       case WorkflowNodeType.Deploy: {
         const provider = deployProvidersMap.get(data.config?.providerType as string);
         return (
@@ -77,6 +79,7 @@ const Node = ({ data }: NodeProps) => {
           </div>
         );
       }
+
       case WorkflowNodeType.Notify: {
         const channelLabel = notifyChannelsMap.get(data.config?.channel as string);
         return (

ui/src/components/workflow/node/ApplyNodeForm.tsx

@@ -14,7 +14,7 @@ import MultipleInput from "@/components/core/MultipleInput";
 import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider";
 import { type WorkflowNode, type WorkflowNodeConfig } from "@/domain/workflow";
 import { useAntdForm, useZustandShallowSelector } from "@/hooks";
-import { useContactStore } from "@/stores/contact";
+import { useContactEmailsStore } from "@/stores/contact";
 import { useWorkflowStore } from "@/stores/workflow";
 import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/validators";
 import { usePanel } from "../PanelProvider";
@@ -38,7 +38,7 @@ const initFormModel = (): WorkflowNodeConfig => {
 const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
   const { t } = useTranslation();
 
-  const { addEmail } = useContactStore();
+  const { addEmail } = useContactEmailsStore(useZustandShallowSelector("addEmail"));
   const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
   const { hidePanel } = usePanel();
 
@@ -277,7 +277,7 @@ const FormFieldEmailSelect = ({
   value?: string;
   onChange?: (value: string) => void;
 }) => {
-  const { emails, fetchEmails } = useContactStore();
+  const { emails, fetchEmails } = useContactEmailsStore();
   const emailsToOptions = useCallback(() => emails.map((email) => ({ label: email, value: email })), [emails]);
   useEffect(() => {
     fetchEmails();

ui/src/components/workflow/node/NotifyNodeForm.tsx

@@ -10,7 +10,7 @@ import { z } from "zod";
 import { notifyChannelsMap } from "@/domain/settings";
 import { type WorkflowNode, type WorkflowNodeConfig } from "@/domain/workflow";
 import { useAntdForm, useZustandShallowSelector } from "@/hooks";
-import { useNotifyChannelStore } from "@/stores/notify";
+import { useNotifyChannelsStore } from "@/stores/notify";
 import { useWorkflowStore } from "@/stores/workflow";
 import { usePanel } from "../PanelProvider";
 
@@ -28,14 +28,18 @@ const initFormModel = (): WorkflowNodeConfig => {
 const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
   const { t } = useTranslation();
 
-  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
+  const {
-  const { hidePanel } = usePanel();
+    channels,
-
+    loadedAtOnce: channelsLoadedAtOnce,
-  const { channels, loadedAtOnce: channelsLoadedAtOnce, fetchChannels } = useNotifyChannelStore();
+    fetchChannels,
+  } = useNotifyChannelsStore(useZustandShallowSelector(["channels", "loadedAtOnce", "fetchChannels"]));
   useEffect(() => {
     fetchChannels();
   }, [fetchChannels]);
 
+  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
+  const { hidePanel } = usePanel();
+
   const formSchema = z.object({
     subject: z
       .string({ message: t("workflow_node.notify.form.subject.placeholder") })

ui/src/pages/accesses/AccessList.tsx

@@ -15,7 +15,8 @@ import { ClientResponseError } from "pocketbase";
 import AccessEditModal from "@/components/access/AccessEditModal";
 import { type AccessModel } from "@/domain/access";
 import { accessProvidersMap } from "@/domain/provider";
-import { useAccessStore } from "@/stores/access";
+import { useZustandShallowSelector } from "@/hooks";
+import { useAccessesStore } from "@/stores/access";
 import { getErrMsg } from "@/utils/error";
 
 const AccessList = () => {
@@ -24,7 +25,9 @@ const AccessList = () => {
   const [modalApi, ModelContextHolder] = Modal.useModal();
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
-  const { accesses, loadedAtOnce, fetchAccesses, deleteAccess } = useAccessStore();
+  const { accesses, loadedAtOnce, fetchAccesses, deleteAccess } = useAccessesStore(
+    useZustandShallowSelector(["accesses", "loadedAtOnce", "fetchAccesses", "deleteAccess"])
+  );
 
   const tableColumns: TableProps<AccessModel>["columns"] = [
     {

ui/src/pages/settings/SettingsNotification.tsx

@@ -3,12 +3,13 @@ import { Card, Divider } from "antd";
 
 import NotifyChannels from "@/components/notification/NotifyChannels";
 import NotifyTemplate from "@/components/notification/NotifyTemplate";
-import { useNotifyChannelStore } from "@/stores/notify";
+import { useZustandShallowSelector } from "@/hooks";
+import { useNotifyChannelsStore } from "@/stores/notify";
 
 const SettingsNotification = () => {
   const { t } = useTranslation();
 
-  const { loadedAtOnce } = useNotifyChannelStore();
+  const { loadedAtOnce } = useNotifyChannelsStore(useZustandShallowSelector(["loadedAtOnce"]));
 
   return (
     <div>

ui/src/stores/access/index.ts

@@ -4,7 +4,7 @@ import { create } from "zustand";
 import { type AccessModel } from "@/domain/access";
 import { list as listAccess, save as saveAccess, remove as removeAccess } from "@/repository/access";
 
-export interface AccessState {
+export interface AccessesState {
   accesses: AccessModel[];
   loading: boolean;
   loadedAtOnce: boolean;
@@ -15,7 +15,7 @@ export interface AccessState {
   deleteAccess: (access: MaybeModelRecordWithId<AccessModel>) => Promise<AccessModel>;
 }
 
-export const useAccessStore = create<AccessState>((set) => {
+export const useAccessesStore = create<AccessesState>((set) => {
   let fetcher: Promise<AccessModel[]> | null = null; // 防止多次重复请求
 
   return {
@@ -39,7 +39,7 @@ export const useAccessStore = create<AccessState>((set) => {
     createAccess: async (access) => {
       const record = await saveAccess(access);
       set(
-        produce((state: AccessState) => {
+        produce((state: AccessesState) => {
           state.accesses.unshift(record);
         })
       );
@@ -50,7 +50,7 @@ export const useAccessStore = create<AccessState>((set) => {
     updateAccess: async (access) => {
       const record = await saveAccess(access);
       set(
-        produce((state: AccessState) => {
+        produce((state: AccessesState) => {
           const index = state.accesses.findIndex((e) => e.id === record.id);
           if (index !== -1) {
             state.accesses[index] = record;
@@ -64,7 +64,7 @@ export const useAccessStore = create<AccessState>((set) => {
     deleteAccess: async (access) => {
       await removeAccess(access);
       set(
-        produce((state: AccessState) => {
+        produce((state: AccessesState) => {
           state.accesses = state.accesses.filter((a) => a.id !== access.id);
         })
       );

ui/src/stores/contact/index.ts

@@ -4,7 +4,7 @@ import { create } from "zustand";
 import { SETTINGS_NAMES, type EmailsSettingsContent, type SettingsModel } from "@/domain/settings";
 import { get as getSettings, save as saveSettings } from "@/repository/settings";
 
-export interface ContactState {
+export interface ContactEmailsState {
   emails: string[];
   loading: boolean;
   loadedAtOnce: boolean;
@@ -15,7 +15,7 @@ export interface ContactState {
   removeEmail: (email: string) => Promise<void>;
 }
 
-export const useContactStore = create<ContactState>((set, get) => {
+export const useContactEmailsStore = create<ContactEmailsState>((set, get) => {
   let fetcher: Promise<SettingsModel<EmailsSettingsContent>> | null = null; // 防止多次重复请求
   let settings: SettingsModel<EmailsSettingsContent>; // 记录当前设置的其他字段，保存回数据库时用
 
@@ -48,7 +48,7 @@ export const useContactStore = create<ContactState>((set, get) => {
       });
 
       set(
-        produce((state: ContactState) => {
+        produce((state: ContactEmailsState) => {
           state.emails = settings.content.emails?.sort() ?? [];
           state.loadedAtOnce = true;
         })

ui/src/stores/notify/index.ts

@@ -4,7 +4,7 @@ import { create } from "zustand";
 import { SETTINGS_NAMES, type NotifyChannelsSettingsContent, type SettingsModel } from "@/domain/settings";
 import { get as getSettings, save as saveSettings } from "@/repository/settings";
 
-export interface NotifyChannelState {
+export interface NotifyChannelsState {
   channels: NotifyChannelsSettingsContent;
   loading: boolean;
   loadedAtOnce: boolean;
@@ -14,7 +14,7 @@ export interface NotifyChannelState {
   setChannels: (channels: NotifyChannelsSettingsContent) => Promise<void>;
 }
 
-export const useNotifyChannelStore = create<NotifyChannelState>((set, get) => {
+export const useNotifyChannelsStore = create<NotifyChannelsState>((set, get) => {
   let fetcher: Promise<SettingsModel<NotifyChannelsSettingsContent>> | null = null; // 防止多次重复请求
   let settings: SettingsModel<NotifyChannelsSettingsContent>; // 记录当前设置的其他字段，保存回数据库时用
 
@@ -54,7 +54,7 @@ export const useNotifyChannelStore = create<NotifyChannelState>((set, get) => {
       });
 
       set(
-        produce((state: NotifyChannelState) => {
+        produce((state: NotifyChannelsState) => {
           state.channels = settings.content;
           state.loadedAtOnce = true;
         })