feat: 优化执行动作样式

src/pages/rule-engine/Scene/Save/action/ListItem/Item.tsx

@@ -1,26 +1,46 @@
-import { AddButton } from '@/pages/rule-engine/Scene/Save/components/Buttons';
 import { useState } from 'react';
-export type ItemType = 'serial' | 'parallel';
 import Modal from '../Modal/add';
+import type { ActionsType } from '@/pages/rule-engine/Scene/typings';
+import { DeleteOutlined } from '@ant-design/icons';
+import { FormModel } from '@/pages/rule-engine/Scene/Save';
+
+export enum ParallelEnum {
+  'parallel' = 'parallel',
+  'serial' = 'serial',
+}
+
+export type ParallelType = keyof typeof ParallelEnum;
 interface ItemProps {
   name: number;
-  resetField: any;
-  remove: (index: number | number[]) => void;
-  type: ItemType;
+  data: ActionsType;
+  type: ParallelType;
 }
 
 export default (props: ItemProps) => {
-  const [visible, setVisible] = useState<boolean>(false);
+  const [visible] = useState<boolean>(false);
   return (
-    <div
-      className="actions-item"
-      onClick={() => {
-        setVisible(true);
-      }}
-    >
-      {props.name}
-      <AddButton>点击配置执行动作</AddButton>
+    <>
+      <div className="actions-item">
+        <div className="item-options-warp">
+          <div className="type">
+            <img src="" />
+          </div>
+          <div></div>
+        </div>
+        <div className="item-number">{props.name + 1}</div>
+        <div
+          className="item-delete"
+          onClick={() => {
+            const indexOf = FormModel.actions.findIndex((item) => item.key === props.data.key);
+            if (props.data.key && indexOf !== -1) {
+              FormModel.actions.splice(indexOf, 1);
+            }
+          }}
+        >
+          <DeleteOutlined />
+        </div>
+      </div>
       {visible && <Modal />}
-    </div>
+    </>
   );
 };

src/pages/rule-engine/Scene/Save/action/ListItem/List.tsx

@@ -1,40 +1,46 @@
-import { Button, Form } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
-import { Item } from './index';
-import type { ItemType } from './Item';
+import { useState } from 'react';
+import { AddButton } from '@/pages/rule-engine/Scene/Save/components/Buttons';
+import Modal from '../Modal/add';
 import './index.less';
-
-interface PropsType {
-  type: ItemType;
+import type { ActionsType } from '@/pages/rule-engine/Scene/typings';
+import Item from './Item';
+import type { ParallelType } from './Item';
+interface ListProps {
+  type: ParallelType;
+  actions: ActionsType[];
 }
 
-export default (props: PropsType) => {
-  const [form] = Form.useForm();
+export default (props: ListProps) => {
+  const [visible, setVisible] = useState<boolean>(false);
 
   return (
     <div className="action-list-content">
-      <Form form={form} colon={false} layout={'vertical'} preserve={false} name="actions">
-        <Form.List name="actions" initialValue={[{}]}>
-          {(fields, { add, remove }) => (
-            <div className="actions-list_form">
-              {fields.map(({ key, name, ...resetField }) => (
-                <Item
-                  key={key}
-                  name={name}
-                  resetField={resetField}
-                  remove={remove}
-                  type={props.type}
-                />
-              ))}
-              <div className="action-list-add">
-                <Button type="primary" onClick={add} ghost icon={<PlusOutlined />}>
-                  新增
-                </Button>
-              </div>
-            </div>
-          )}
-        </Form.List>
-      </Form>
+      {props.actions.map((item, index) => (
+        <Item name={index} data={item} type={props.type} key={item.key} />
+      ))}
+      <AddButton
+        onClick={() => {
+          setVisible(true);
+          // const addItem: ActionsType = {
+          //   executor: 'device',
+          //   device: {
+          //     selector: 'all',
+          //     source: 'fixed'
+          //   },
+          //   key: `${props.type}_${props.actions.length}`
+          // }
+
+          // if (props.type === 'serial') {
+          //   addItem.terms = []
+          // }
+          // console.log(addItem);
+
+          // FormModel?.actions?.push(addItem)
+        }}
+      >
+        点击配置执行动作
+      </AddButton>
+      {visible && <Modal />}
     </div>
   );
 };

src/pages/rule-engine/Scene/Save/action/ListItem/index.less

@@ -1,4 +1,6 @@
 .action-list-content {
+  padding: 8px;
+
   .actions-list_form {
     .action-list-add {
       display: flex;
@@ -9,3 +11,38 @@
     }
   }
 }
+
+.actions-item {
+  position: relative;
+  margin-bottom: 24px;
+  padding: 16px;
+  border: 1px dashed #999;
+  border-radius: 2px;
+
+  .item-number {
+    position: absolute;
+    top: 0;
+    left: 16px;
+    font-weight: 800;
+    transform: translateY(-50%);
+  }
+
+  .item-delete {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    color: #e50012;
+    background-color: rgba(229, 0, 18, 0.1);
+    border-radius: 50%;
+    transform: translate(50%, -50%);
+
+    &:hover {
+      background-color: rgba(#e50012, 0.2);
+    }
+  }
+}

src/pages/rule-engine/Scene/Save/action/index.less

@@ -31,4 +31,9 @@
       width: 100%;
     }
   }
+
+  .panel-tip {
+    padding-left: 8px;
+    color: rgba(#000, 0.45);
+  }
 }

src/pages/rule-engine/Scene/Save/action/index.tsx

@@ -1,5 +1,8 @@
 import { Collapse } from 'antd';
 import { List } from './ListItem';
+import { FormModel } from '@/pages/rule-engine/Scene/Save';
+import './index.less';
+import { Observer } from '@formily/react';
 
 const { Panel } = Collapse;
 
@@ -8,28 +11,44 @@ export default () => {
     <div className="actions">
       <div className="actions-title">执行</div>
       <div className="actions-warp">
-        <Collapse defaultActiveKey={['1']}>
+        <Collapse defaultActiveKey={['1', '2']}>
           <Panel
             header={
               <span>
-                串行<span>按顺序依次执行动作</span>
+                串行<span className="panel-tip">按顺序依次执行动作</span>
               </span>
             }
             key="1"
           >
             <div className="actions-list">
-              <List type="serial" />
+              <Observer>
+                {() => (
+                  <List
+                    type="serial"
+                    actions={FormModel.actions.filter((item) => 'terms' in item)}
+                  />
+                )}
+              </Observer>
             </div>
           </Panel>
           <Panel
             header={
               <span>
-                并行<span>同时执行所有动作</span>
+                并行<span className="panel-tip">同时执行所有动作</span>
               </span>
             }
             key="2"
           >
-            <div className="actions-list"></div>
+            <div className="actions-list">
+              <Observer>
+                {() => (
+                  <List
+                    type="parallel"
+                    actions={FormModel.actions.filter((item) => !('terms' in item))}
+                  />
+                )}
+              </Observer>
+            </div>
           </Panel>
         </Collapse>
       </div>

src/pages/rule-engine/Scene/Save/components/Buttons/AddButton.tsx

@@ -9,7 +9,9 @@ interface ButtonProps {
 const AddButton = (props: ButtonProps) => {
   return (
     <div className="rule-button-warp" style={props.style}>
-      <div className="rule-button add-button">{props.children}</div>
+      <div className="rule-button add-button" onClick={props.onClick}>
+        {props.children}
+      </div>
     </div>
   );
 };

src/pages/rule-engine/Scene/Save/components/Buttons/index.less

@@ -11,10 +11,14 @@
     line-height: 22px;
     background-color: #fff;
     border: 1px solid #e0e0e0;
-    border-radius: 15px;
+    border-radius: 22px;
   }
 
   .add-button {
     color: #bdbdbd;
+    &:hover,
+    &:active {
+      border-color: #d0d0d0;
+    }
   }
 }

src/pages/rule-engine/Scene/Save/index.tsx

@@ -5,6 +5,12 @@ import Device from '../Save/device/index';
 import Manual from '../Save/manual/index';
 import Timer from '../Save/timer/index';
 import { TitleComponent } from '@/components';
+import { observable } from '@formily/reactive';
+import type { FormModelType } from '@/pages/rule-engine/Scene/typings';
+
+export const FormModel = observable<FormModelType>({
+  actions: [],
+});
 
 export default () => {
   const location = useLocation();

src/pages/rule-engine/Scene/typings.d.ts

@@ -215,10 +215,10 @@ export type ActionDeviceMessageType = {
 };
 
 export interface ActionsDeviceProps {
-  productId?: string;
-  message?: ActionDeviceMessageType;
   selector: keyof typeof ActionDeviceSelector;
   source: keyof typeof ActionDeviceSource;
+  productId?: string;
+  message?: ActionDeviceMessageType;
   selectorValues?: SelectorValuesType[];
   /** 来源为upper时不能为空 */
   upperKey?: string;
@@ -251,6 +251,8 @@ export interface ActionsType {
     mode: keyof typeof ActionAlarmMode;
   };
   terms?: TermsType[];
+  /** map中的key，用于删除 */
+  key?: string;
 }
 
 export interface FormModelType {
@@ -267,7 +269,7 @@ export interface FormModelType {
   /**
    * 执行动作
    */
-  actions?: ActionsType[];
+  actions: ActionsType[];
   /**
    * 动作分支
    */