✨ feat: 支持添加反应列表

lobehub · May 26, 2024 · 6a926fd · 6a926fd
1 parent 217d2d2
commit 6a926fd
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 19 deletions.
diff --git a/src/constants/touch.ts b/src/constants/touch.ts
@@ -11,11 +11,15 @@ export const TOUCH_AREA_OPTIONS = [
 ];
 
 export const TOUCH_EMOTION_OPTIONS = [
-  { label: '中性', value: VRMExpressionPresetName.Neutral },
+  { label: '自然', value: VRMExpressionPresetName.Neutral },
   { label: '开心', value: VRMExpressionPresetName.Happy },
   { label: '生气', value: VRMExpressionPresetName.Angry },
   { label: '伤心', value: VRMExpressionPresetName.Sad },
   { label: '放松', value: VRMExpressionPresetName.Relaxed },
+  { label: '惊讶', value: VRMExpressionPresetName.Surprised },
+  { label: '眨眼', value: VRMExpressionPresetName.Blink },
+  { label: '眨左眼', value: VRMExpressionPresetName.BlinkLeft },
+  { label: '眨右眼', value: VRMExpressionPresetName.BlinkRight },
 ];
 
 export const MAX_TOUCH_ACTION_TEXT_LENGTH = 100;

diff --git a/...t/Model/Touch/ActionList/Actions/Edit.tsx → ...el/Touch/ActionList/Actions/AddOrEdit.tsx b/...t/Model/Touch/ActionList/Actions/Edit.tsx → ...el/Touch/ActionList/Actions/AddOrEdit.tsx
@@ -1,6 +1,7 @@
 import { ActionIcon, Form, FormItem } from '@lobehub/ui';
+import { VRMExpressionPresetName } from '@pixiv/three-vrm';
 import { Input, Modal, Select } from 'antd';
-import { Edit2Icon } from 'lucide-react';
+import { Edit2Icon, PlusCircleIcon } from 'lucide-react';
 import React, { memo, useState } from 'react';
 
 import { INPUT_WIDTH_M, INPUT_WIDTH_S } from '@/constants/token';
@@ -9,17 +10,21 @@ import { useAgentStore } from '@/store/agent';
 import { TouchAction, TouchAreaEnum } from '@/types/touch';
 
 interface Props {
-  index: number;
-  touchAction: TouchAction;
+  index?: number;
+  isEdit?: boolean;
+  touchAction?: TouchAction;
   touchArea: TouchAreaEnum;
 }
 
 export default memo((props: Props) => {
-  const { touchArea, index, touchAction } = props;
+  const { touchArea, index, touchAction, isEdit = true } = props;
   const [open, setOpen] = useState(false);
   const [form] = Form.useForm();
 
-  const [updateTouchAction] = useAgentStore((s) => [s.updateTouchAction]);
+  const [updateTouchAction, createTouchAction] = useAgentStore((s) => [
+    s.updateTouchAction,
+    s.createTouchAction,
+  ]);
 
   const showModal = () => {
     setOpen(true);
@@ -28,7 +33,11 @@ export default memo((props: Props) => {
   const handleOk = () => {
     setOpen(false);
     const values = form.getFieldsValue();
-    updateTouchAction(touchArea, index, values);
+    if (isEdit) {
+      updateTouchAction(touchArea, index!, values);
+    } else {
+      createTouchAction(touchArea, values);
+    }
   };
 
   const handleCancel = () => {
@@ -37,32 +46,49 @@ export default memo((props: Props) => {
 
   return (
     <>
-      <ActionIcon icon={Edit2Icon} title={'编辑'} onClick={showModal} />
+      <ActionIcon
+        icon={isEdit ? Edit2Icon : PlusCircleIcon}
+        title={isEdit ? '编辑' : '添加'}
+        onClick={showModal}
+      />
       <Modal
         onCancel={handleCancel}
         onOk={handleOk}
         open={open}
-        width={640}
-        title="编辑响应动作"
+        width={800}
+        destroyOnClose
+        title={isEdit ? '编辑响应动作' : '添加响应动作'}
         okText={'确定'}
         cancelText={'取消'}
       >
-        <Form layout="horizontal" requiredMark={false} initialValues={touchAction} form={form}>
-          <FormItem desc={'自定义响应文案'} label={'文案'} name={'text'} divider>
-            <Input
+        <Form
+          layout="horizontal"
+          requiredMark={false}
+          initialValues={touchAction}
+          form={form}
+          preserve={false}
+        >
+          <FormItem desc={'自定义响应文案'} label={'文案'} name={'text'}>
+            <Input.TextArea
               placeholder="请输入响应文案"
               maxLength={MAX_TOUCH_ACTION_TEXT_LENGTH}
               showCount
+              autoSize
               style={{ width: INPUT_WIDTH_M }}
             />
           </FormItem>
           <FormItem
-            label={'情绪'}
+            label={'表情与情绪'}
             desc={'选择响应时的情绪，会影响角色的表情变化'}
             divider
             name="emotion"
           >
-            <Select options={TOUCH_EMOTION_OPTIONS} style={{ width: INPUT_WIDTH_S }} />
+            <Select
+              options={TOUCH_EMOTION_OPTIONS}
+              style={{ width: INPUT_WIDTH_S }}
+              defaultValue={VRMExpressionPresetName.Neutral}
+              defaultActiveFirstOption={true}
+            />
           </FormItem>
         </Form>
       </Modal>

diff --git a/src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/index.tsx b/src/panels/RolePanel/RoleEdit/Model/Touch/ActionList/index.tsx
@@ -1,10 +1,11 @@
 import { List } from 'antd';
 import { createStyles } from 'antd-style';
 import { get } from 'lodash-es';
+import { Flexbox } from 'react-layout-kit';
 
 import { TOUCH_AREA_OPTIONS } from '@/constants/touch';
+import AddOrEdit from '@/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/AddOrEdit';
 import Delete from '@/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/Delete';
-import Edit from '@/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/Edit';
 import Play from '@/panels/RolePanel/RoleEdit/Model/Touch/ActionList/Actions/Play';
 import { agentSelectors, useAgentStore } from '@/store/agent';
 import { TouchAction, TouchAreaEnum } from '@/types/touch';
@@ -13,6 +14,11 @@ const useStyles = createStyles(({ css, token }) => ({
   active: css`
     background-color: ${token.controlItemBgActiveHover};
   `,
+  title: css`
+    font-size: ${token.fontSizeLG};
+    font-weight: 600;
+    color: ${token.colorPrimary};
+  `,
   list: css`
     width: 100%;
     padding: 24px;
@@ -37,16 +43,22 @@ const AreaList = (props: AreaListProps) => {
     <List
       className={styles.list}
       dataSource={data}
-      header={<div>触摸{touchArea}时的反应列表</div>}
+      header={
+        <Flexbox justify="space-between" horizontal>
+          <span className={styles.title}>触摸{touchArea}时的反应列表</span>
+          <AddOrEdit isEdit={false} touchArea={currentTouchArea} />
+        </Flexbox>
+      }
       renderItem={(item, index) => (
         <List.Item
           actions={[
             <Play key={`${currentTouchArea}_play_${index}`} touchAction={item} />,
-            <Edit
+            <AddOrEdit
               key={`${currentTouchArea}_edit_${index}`}
               index={index}
               touchArea={currentTouchArea}
               touchAction={item}
+              isEdit={true}
             />,
             <Delete
               key={`${currentTouchArea}_delete_${index}`}

diff --git a/src/store/agent/index.ts b/src/store/agent/index.ts
@@ -31,6 +31,12 @@ export interface AgentStore {
    * 创建新角色
    */
   createNewAgent: () => void;
+  /**
+   * 创建触摸配置
+   * @param currentTouchArea
+   * @param action
+   */
+  createTouchAction: (currentTouchArea: TouchAreaEnum, action: TouchAction) => void;
   /**
    * 当前激活的角色
    */
@@ -203,6 +209,16 @@ const createAgentStore: StateCreator<AgentStore, [['zustand/devtools', never]]>
       },
     });
   },
+  createTouchAction: (currentTouchArea, action) => {
+    const { dispatchTouchAction } = get();
+    dispatchTouchAction({
+      type: 'CREATE_TOUCH_ACTION',
+      payload: {
+        touchArea: currentTouchArea,
+        action,
+      },
+    });
+  },
   updateAgentTTS: (tts) => {
     const { updateAgentConfig } = get();
     updateAgentConfig({ tts });

diff --git a/src/store/agent/reducers/touch.ts b/src/store/agent/reducers/touch.ts
@@ -19,7 +19,15 @@ export interface UpdateTouchAction {
   type: 'UPDATE_TOUCH_ACTION';
 }
 
-export type TouchActionType = DeleteTouchAction | UpdateTouchAction;
+export interface CreateTouchAction {
+  payload: {
+    action: TouchAction;
+    touchArea: TouchAreaEnum;
+  };
+  type: 'CREATE_TOUCH_ACTION';
+}
+
+export type TouchActionType = DeleteTouchAction | UpdateTouchAction | CreateTouchAction;
 
 export const touchReducer = (
   state: TouchActionConfig,
@@ -38,6 +46,12 @@ export const touchReducer = (
         draft[touchArea][index] = newAction;
       });
     }
+    case 'CREATE_TOUCH_ACTION': {
+      return produce(state, (draft) => {
+        const { touchArea, action: newAction } = action.payload;
+        draft[touchArea].push(newAction);
+      });
+    }
     default: {
       return produce(state, () => []);
     }