Просмотр исходного кода

feat: 修改新版场景联动样式

xieyonghong 3 лет назад
Родитель
Сommit
41cd2408df

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

@@ -1,6 +1,7 @@
 import { Button, Form } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import Item from './Item';
+import { AddButton } from '../../components/Buttons';
+import { Item } from './index';
 
 export default () => {
   const [form] = Form.useForm();
@@ -10,16 +11,20 @@ export default () => {
       <Form form={form} colon={false} layout={'vertical'} preserve={false} name="actions">
         <Form.List name="actions">
           {(fields, { add, remove }) => (
-            <>
-              {fields.map(({ key, name, ...resetField }) => (
-                <Item key={key} name={name} resetField={resetField} remove={remove} />
-              ))}
+            <div className="actions-list_form">
+              {fields.length ? (
+                fields.map(({ key, name, ...resetField }) => (
+                  <Item key={key} name={name} resetField={resetField} remove={remove} />
+                ))
+              ) : (
+                <AddButton>点击配置动作</AddButton>
+              )}
               <div className="action-list-add">
                 <Button type="primary" onClick={add} ghost icon={<PlusOutlined />}>
                   新增
                 </Button>
               </div>
-            </>
+            </div>
           )}
         </Form.List>
       </Form>

+ 2 - 7
src/pages/rule-engine/Scene/Save/action/ListItem/index.tsx

@@ -1,7 +1,2 @@
-import List from './List';
-import Item from './Item';
-
-export default {
-  List,
-  Item,
-};
+export { default as List } from './List';
+export { default as Item } from './Item';

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

@@ -1,3 +1,5 @@
+@import '~antd/es/style/themes/default.less';
+
 .actions-items {
   padding: 26px 24px 12px 24px;
   background-color: #fafafa;
@@ -23,4 +25,20 @@
     font-weight: 800;
     font-size: 14px;
   }
+
+  .actions-warp {
+    .actions-list {
+      .action-list-content {
+        .actions-list_form {
+          .action-list-add {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 16px;
+            padding: 16px;
+            border-top: 1px solid @primary-color;
+          }
+        }
+      }
+    }
+  }
 }

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

@@ -7,7 +7,7 @@ export default () => {
     <div className="actions">
       <div className="actions-title">执行</div>
       <div className="actions-warp">
-        <Collapse defaultActiveKey={[]}>
+        <Collapse defaultActiveKey={['1']}>
           <Panel
             header={
               <span>

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

@@ -3,10 +3,12 @@ interface ButtonProps {
   onClick?: () => void;
 }
 
-export default (props: ButtonProps) => {
+const AddButton = (props: ButtonProps) => {
   return (
     <div className="rule-button-warp">
       <div className="rule-button add-button">{props.children}</div>
     </div>
   );
 };
+
+export default AddButton;

+ 1 - 1
src/pages/rule-engine/Scene/Save/components/Buttons/index.tsx

@@ -1,2 +1,2 @@
 import './index.less';
-export * as AddButton from './AddButton';
+export { default as AddButton } from './AddButton';