✨ feat: settings 添加触控全局配置

__mocks__/zustand/traditional.ts

@@ -0,0 +1,25 @@
+import { act } from 'react-dom/test-utils';
+import { beforeEach } from 'vitest';
+import { createWithEqualityFn as actualCreate } from 'zustand/traditional';
+
+// a variable to hold reset functions for all stores declared in the app
+const storeResetFns = new Set<() => void>();
+
+// when creating a store, we get its initial state, create a reset function and add it in the set
+const createImpl = (createState: any) => {
+  const store = actualCreate(createState, Object.is);
+  const initialState = store.getState();
+  storeResetFns.add(() => store.setState(initialState, true));
+  return store;
+};
+
+// Reset all stores after each test run
+beforeEach(() => {
+  act(() => {
+    for (const resetFn of storeResetFns) {
+      resetFn();
+    }
+  });
+});
+
+export const createWithEqualityFn = (f: any) => (f === undefined ? createImpl : createImpl(f));

src/features/Settings/touch/ActionList/Actions/AddOrEdit.tsx

@@ -7,23 +7,24 @@ import { useTranslation } from 'react-i18next';
 
 import { INPUT_WIDTH_M, INPUT_WIDTH_S } from '@/constants/token';
 import { MAX_TOUCH_ACTION_TEXT_LENGTH } from '@/constants/touch';
-import { useAgentStore } from '@/store/agent';
+import { useSettingStore } from '@/store/setting';
+import { GenderEnum } from '@/types/agent';
 import { TouchAction, TouchAreaEnum } from '@/types/touch';
 
-interface Props {
+export interface Props {
+  gender: GenderEnum;
   index?: number;
   isEdit?: boolean;
   touchAction?: TouchAction;
   touchArea: TouchAreaEnum;
 }
 
-export default memo((props: Props) => {
-  const { touchArea, index, touchAction, isEdit = true } = props;
+const AddOrEdit = memo<Props>(({ touchArea, index, touchAction, isEdit = true, gender }) => {
   const [open, setOpen] = useState(false);
   const [form] = Form.useForm();
   const { t } = useTranslation(['common', 'panel', 'constants']);
 
-  const [updateTouchAction, createTouchAction] = useAgentStore((s) => [
+  const [updateTouchAction, createTouchAction] = useSettingStore((s) => [
     s.updateTouchAction,
     s.createTouchAction,
   ]);
@@ -36,9 +37,9 @@ export default memo((props: Props) => {
     form.validateFields().then((values) => {
       setOpen(false);
       if (isEdit) {
-        updateTouchAction(touchArea, index!, values);
+        updateTouchAction(gender, touchArea, index!, values);
       } else {
-        createTouchAction(touchArea, values);
+        createTouchAction(gender, touchArea, values);
       }
     });
   };
@@ -142,3 +143,5 @@ export default memo((props: Props) => {
     </>
   );
 });
+
+export default AddOrEdit;

src/features/Settings/touch/ActionList/Actions/Delete.tsx

@@ -4,29 +4,32 @@ import { XIcon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useAgentStore } from '@/store/agent';
+import { useSettingStore } from '@/store/setting';
+import { GenderEnum } from '@/types/agent';
 import { TouchAreaEnum } from '@/types/touch';
 
 interface Props {
+  gender: GenderEnum;
   index: number;
   touchArea: TouchAreaEnum;
 }
 
-export default memo((props: Props) => {
-  const { touchArea, index } = props;
+const DeleteButton = memo<Props>(({ touchArea, index, gender }) => {
   const { t } = useTranslation('common');
-  const [removeTouchAction] = useAgentStore((s) => [s.removeTouchAction]);
+  const [removeTouchAction] = useSettingStore((s) => [s.removeTouchAction]);
   return (
     <Popconfirm
       title={t('actions.confirmDel')}
       key="delete"
       okText={t('confirm')}
       cancelText={t('cancel')}
       onConfirm={() => {
-        removeTouchAction(touchArea, index);
+        removeTouchAction(gender, touchArea, index);
       }}
     >
       <ActionIcon icon={XIcon} title={t('actions.del')} />
     </Popconfirm>
   );
 });
+
+export default DeleteButton;

src/features/Settings/touch/ActionList/ListItem.tsx

@@ -1,15 +1,16 @@
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
-import React from 'react';
+import React, { memo } from 'react';
 
 import ListItem from '@/components/ListItem';
 import AddOrEdit from '@/features/Settings/touch/ActionList/Actions/AddOrEdit';
 import Delete from '@/features/Settings/touch/ActionList/Actions/Delete';
-import Play from '@/features/Settings/touch/ActionList/Actions/Play';
+import { GenderEnum } from '@/types/agent';
 import { TouchAction, TouchAreaEnum } from '@/types/touch';
 
 interface ActionListItemProps {
   currentTouchArea: TouchAreaEnum;
+  gender: GenderEnum;
   index: number;
   item: TouchAction;
 }
@@ -31,32 +32,36 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-export default (props: ActionListItemProps) => {
-  const { item, index, currentTouchArea } = props;
-  const { styles } = useStyles();
-
-  return (
-    <ListItem
-      key={`${item.text}_${index}`}
-      className={classNames(styles.listItem)}
-      showAction={true}
-      avatar={<Play key={`${currentTouchArea}_play_${index}`} touchAction={item} />}
-      title={item.text}
-      active={false}
-      actions={[
-        <AddOrEdit
-          key={`${currentTouchArea}_edit_${index}`}
-          index={index}
-          touchArea={currentTouchArea}
-          touchAction={item}
-          isEdit={true}
-        />,
-        <Delete
-          key={`${currentTouchArea}_delete_${index}`}
-          index={index}
-          touchArea={currentTouchArea}
-        />,
-      ]}
-    />
-  );
-};
+const TouchActionListItem = memo<ActionListItemProps>(
+  ({ item, index, currentTouchArea, gender }) => {
+    const { styles } = useStyles();
+
+    return (
+      <ListItem
+        key={`${item.text}_${index}`}
+        className={classNames(styles.listItem)}
+        showAction={true}
+        title={item.text}
+        active={false}
+        actions={[
+          <AddOrEdit
+            key={`${currentTouchArea}_edit_${index}`}
+            index={index}
+            gender={gender}
+            touchArea={currentTouchArea}
+            touchAction={item}
+            isEdit={true}
+          />,
+          <Delete
+            key={`${currentTouchArea}_delete_${index}`}
+            index={index}
+            gender={gender}
+            touchArea={currentTouchArea}
+          />,
+        ]}
+      />
+    );
+  },
+);
+
+export default TouchActionListItem;

src/features/Settings/touch/ActionList/index.tsx

@@ -20,9 +20,9 @@ interface AreaListProps {
 const AreaList = (props: AreaListProps) => {
   const { currentTouchArea, style, className, areaOptions = [] } = props;
   const [female, male, other] = useSettingStore((s) => [
-    configSelectors.currentTouchConfig(s, GenderEnum.FEMALE, currentTouchArea),
-    configSelectors.currentTouchConfig(s, GenderEnum.MALE, currentTouchArea),
-    configSelectors.currentTouchConfig(s, GenderEnum.OTHER, currentTouchArea),
+    configSelectors.getTouchActionsByGenderAndArea(s, GenderEnum.FEMALE, currentTouchArea),
+    configSelectors.getTouchActionsByGenderAndArea(s, GenderEnum.MALE, currentTouchArea),
+    configSelectors.getTouchActionsByGenderAndArea(s, GenderEnum.OTHER, currentTouchArea),
   ]);
   const { t } = useTranslation(['panel', 'features']);
 
@@ -33,30 +33,48 @@ const AreaList = (props: AreaListProps) => {
       <Header title={t('touch.touchActionList', { touchArea })} />
       <Header
         title={t('agent.female', { ns: 'features' })}
-        extra={<AddOrEdit isEdit={false} touchArea={currentTouchArea} />}
+        extra={<AddOrEdit isEdit={false} touchArea={currentTouchArea} gender={GenderEnum.FEMALE} />}
       />
       {female.map((item, index) => {
         return (
-          <ListItem item={item} currentTouchArea={currentTouchArea} index={index} key={index} />
+          <ListItem
+            item={item}
+            currentTouchArea={currentTouchArea}
+            index={index}
+            key={index}
+            gender={GenderEnum.FEMALE}
+          />
         );
       })}
       <Header
         title={t('agent.male', { ns: 'features' })}
-        extra={<AddOrEdit isEdit={false} touchArea={currentTouchArea} />}
+        extra={<AddOrEdit isEdit={false} touchArea={currentTouchArea} gender={GenderEnum.MALE} />}
       />
       {male.map((item, index) => {
         return (
-          <ListItem item={item} currentTouchArea={currentTouchArea} index={index} key={index} />
+          <ListItem
+            item={item}
+            currentTouchArea={currentTouchArea}
+            index={index}
+            key={index}
+            gender={GenderEnum.MALE}
+          />
         );
       })}
 
       <Header
         title={t('agent.other', { ns: 'features' })}
-        extra={<AddOrEdit isEdit={false} touchArea={currentTouchArea} />}
+        extra={<AddOrEdit isEdit={false} touchArea={currentTouchArea} gender={GenderEnum.OTHER} />}
       />
       {other.map((item, index) => {
         return (
-          <ListItem item={item} currentTouchArea={currentTouchArea} index={index} key={index} />
+          <ListItem
+            item={item}
+            currentTouchArea={currentTouchArea}
+            index={index}
+            key={index}
+            gender={GenderEnum.OTHER}
+          />
         );
       })}
     </Flexbox>

src/store/agent/index.ts

@@ -2,7 +2,13 @@ import { nanoid } from 'ai';
 import { t } from 'i18next';
 import { produce } from 'immer';
 import { DeepPartial } from 'utility-types';
-import { createJSONStorage, devtools, persist, subscribeWithSelector } from 'zustand/middleware';
+import {
+  PersistOptions,
+  createJSONStorage,
+  devtools,
+  persist,
+  subscribeWithSelector,
+} from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
@@ -230,18 +236,20 @@ const createAgentStore: StateCreator<AgentStore, [['zustand/devtools', never]]>
   },
 });
 
+const persistOptions: PersistOptions<AgentStore> = {
+  name: AGENT_STORAGE_KEY, // name of the item in the storage (must be unique)
+  storage: createJSONStorage(() => storage),
+  version: 0,
+  skipHydration: true,
+};
+
 export const useAgentStore = createWithEqualityFn<AgentStore>()(
   subscribeWithSelector(
     persist(
       devtools(createAgentStore, {
         name: 'VIDOL_AGENT_STORE',
       }),
-      {
-        name: AGENT_STORAGE_KEY,
-        storage: createJSONStorage(() => storage),
-        version: 0,
-        skipHydration: true,
-      },
+      persistOptions,
     ),
   ),
   shallow,

src/store/dance/index.ts

@@ -1,5 +1,5 @@
 import { StateCreator } from 'zustand';
-import { createJSONStorage, devtools, persist } from 'zustand/middleware';
+import { PersistOptions, createJSONStorage, devtools, persist } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 
@@ -17,17 +17,19 @@ const createStore: StateCreator<DanceStore, [['zustand/devtools', never]]> = (..
   ...createPlayListStore(...parameters),
 });
 
+const persistOptions: PersistOptions<DanceStore> = {
+  name: DANCE_STORAGE_KEY, // name of the item in the storage (must be unique)
+  storage: createJSONStorage(() => storage),
+  version: 0,
+  skipHydration: true,
+};
+
 export const useDanceStore = createWithEqualityFn<DanceStore>()(
   persist(
     devtools(createStore, {
       name: 'VIDOL_DANCE_STORE',
     }),
-    {
-      name: DANCE_STORAGE_KEY, // name of the item in the storage (must be unique)
-      storage: createJSONStorage(() => storage),
-      version: 0,
-      skipHydration: true,
-    },
+    persistOptions,
   ),
   shallow,
 );