修正

Author: UniMars

src/components/editor/action/EditorActionAdd.tsx

@@ -121,7 +121,7 @@ export const EditorActionAdd = ({
 
   return (
     <form onSubmit={onSubmit}>
-      <Card className="mb-2 pt-4">
+      <Card className="mb-2 pb-8 pt-4 overflow-auto h-[calc(100vh-6rem)]">
         <div className="flex items-center mb-4">
           <CardTitle className="mb-0" icon={isNew ? 'add' : 'edit'}>
             <span>{isNew ? '添加' : '编辑'}动作</span>

src/components/editor/action/EditorActions.tsx

@@ -95,66 +95,66 @@ export const EditorActions = ({ control }: EditorActionsProps) => {
 
   return (
     <div className="flex flex-wrap md:flex-nowrap min-h-[calc(100vh-6rem)]">
-      <div className="flex flex-col w-full h-[calc(100vh-6rem)] m-4.5 md:w-1/2 md:mr-8 pb-8 overflow-auto ">
-        <div>
-          <EditorActionAdd
-            control={control}
-            action={editingAction}
-            onSubmit={onSubmit}
-            onCancel={() => setEditingAction(undefined)}
-          />
-        </div>
+      <div className="md:w-1/2 md:mr-8 w-full">
+        <EditorActionAdd
+          control={control}
+          action={editingAction}
+          onSubmit={onSubmit}
+          onCancel={() => setEditingAction(undefined)}
+        />
       </div>
 
-      <div className="p-2 -mx-2 w-full h-[calc(100vh-6rem)] md:w-1/2 pb-8 overflow-auto">
-        <DndContext
-          sensors={sensors}
-          onDragStart={handleDragStart}
-          onDragOver={handleDragOver}
-          onDragEnd={handleDragEnd}
-          onDragCancel={handleDragEnd}
-        >
-          <SortableContext
-            items={actions.map(getId)}
-            strategy={verticalListSortingStrategy}
+      <div className="  md:w-1/2 w-full">
+        <div className="overflow-auto h-[calc(100vh-6rem)] p-2 pt-0 pb-8 -mx-2">
+          <DndContext
+            sensors={sensors}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDragEnd={handleDragEnd}
+            onDragCancel={handleDragEnd}
           >
-            <ul>
-              {actions.map((action, i) => (
-                <li key={getId(action)} className="mt-2">
-                  <Sortable id={getId(action)}>
-                    {(attrs) => (
-                      <EditorActionItem
-                        action={action}
-                        editing={isEditing(action)}
-                        onEdit={() =>
-                          setEditingAction(
-                            isEditing(action) ? undefined : action,
-                          )
-                        }
-                        onDuplicate={() => handleDuplicate(i)}
-                        onRemove={() => remove(i)}
-                        {...attrs}
-                      />
-                    )}
-                  </Sortable>
-                </li>
-              ))}
-            </ul>
-          </SortableContext>
-
-          <DragOverlay>
-            {draggingAction && (
-              <EditorActionItem
-                editing={isEditing(draggingAction)}
-                action={draggingAction}
-              />
-            )}
-          </DragOverlay>
-        </DndContext>
-
-        {actions.length === 0 && (
-          <NonIdealState title="暂无动作" className="my-4" icon="inbox" />
-        )}
+            <SortableContext
+              items={actions.map(getId)}
+              strategy={verticalListSortingStrategy}
+            >
+              <ul>
+                {actions.map((action, i) => (
+                  <li key={getId(action)} className="mt-2">
+                    <Sortable id={getId(action)}>
+                      {(attrs) => (
+                        <EditorActionItem
+                          action={action}
+                          editing={isEditing(action)}
+                          onEdit={() =>
+                            setEditingAction(
+                              isEditing(action) ? undefined : action,
+                            )
+                          }
+                          onDuplicate={() => handleDuplicate(i)}
+                          onRemove={() => remove(i)}
+                          {...attrs}
+                        />
+                      )}
+                    </Sortable>
+                  </li>
+                ))}
+              </ul>
+            </SortableContext>
+
+            <DragOverlay>
+              {draggingAction && (
+                <EditorActionItem
+                  editing={isEditing(draggingAction)}
+                  action={draggingAction}
+                />
+              )}
+            </DragOverlay>
+          </DndContext>
+
+          {actions.length === 0 && (
+            <NonIdealState title="暂无动作" className="my-4" icon="inbox" />
+          )}
+        </div>
       </div>
     </div>
   )

src/components/editor/operator/EditorOperatorItem.tsx

@@ -34,7 +34,7 @@ export const EditorOperatorItem = ({
   }技能：${skillUsage}`
 
   return (
-    <div className="aspect-[5/1] h-large">
+    <div className="h-[72px] w-[calc(5*72px)]">
       <Card
         elevation={Elevation.TWO}
         className={clsx(

tailwind.config.js

@@ -6,14 +6,6 @@ module.exports = {
       transitionDuration: {
         DEFAULT: '150ms',
       },
-      aspectRatio: {
-        '5/1': '5 / 1',
-      },
-      height: {
-        small: '45px',
-        medium: '54px',
-        large: '72px',
-      },
     },
   },
   plugins: [],