From c72abd29ecacdecf23820f8942424ffc1a7ef563 Mon Sep 17 00:00:00 2001
From: whyour <imwhyour@gmail.com>
Date: Wed, 9 Nov 2022 20:43:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E8=A7=86=E5=9B=BE=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E6=9D=A1=E4=BB=B6=E5=A2=9E=E5=8A=A0=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E5=85=B3=E7=B3=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/crontab/index.less          |   6 ++
 src/pages/crontab/viewCreateModal.tsx | 130 ++++++++++++++++----------
 2 files changed, 88 insertions(+), 48 deletions(-)

diff --git a/src/pages/crontab/index.less b/src/pages/crontab/index.less
index 77a979ca..37d84d8b 100644
--- a/src/pages/crontab/index.less
+++ b/src/pages/crontab/index.less
@@ -176,3 +176,9 @@ tr.drop-over-upward td {
     padding-top: 10px;
   }
 }
+
+.view-filters-container.active {
+  .filter-item > div > .ant-form-item-control {
+    padding-left: 40px;
+  }
+}
diff --git a/src/pages/crontab/viewCreateModal.tsx b/src/pages/crontab/viewCreateModal.tsx
index 38a2fa4e..f75ec394 100644
--- a/src/pages/crontab/viewCreateModal.tsx
+++ b/src/pages/crontab/viewCreateModal.tsx
@@ -164,57 +164,91 @@ const ViewCreateModal = ({
         </Form.Item>
         <Form.List name="filters">
           {(fields, { add, remove }) => (
-            <>
-              {fields.map(({ key, name, ...restField }, index) => (
-                <Form.Item
-                  label={index === 0 ? '筛选条件' : ''}
-                  key={key}
-                  style={{ marginBottom: 0 }}
-                  required
-                >
-                  <Space className="view-create-modal-filters" align="baseline">
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'property']}
-                      rules={[{ required: true }]}
+            <div style={{ position: 'relative' }} className={`view-filters-container ${fields.length > 1 ? 'active' : ''}`}>
+              {
+                fields.length > 1 && (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      width: 50,
+                      borderRadius: 10,
+                      border: '1px solid rgb(190, 220, 255)',
+                      borderRight: 'none',
+                      height: 56 * (fields.length - 1),
+                      top: 46,
+                      left: 15
+                    }}
+                  >
+                    <Button
+                      type="primary"
+                      size="small"
+                      style={{
+                        position: 'absolute',
+                        top: '50%',
+                        translate: '-50% -50%',
+                        padding: '0 5px',
+                      }}
                     >
-                      {propertyElement(PROPERTIES, { width: 120 })}
-                    </Form.Item>
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'operation']}
-                      rules={[{ required: true }]}
-                    >
-                      {operationElement}
-                    </Form.Item>
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'value']}
-                      rules={[{ required: true, message: '请输入内容' }]}
-                    >
-                      {['In', 'Nin'].includes(
-                        form.getFieldValue(['filters', index, 'operation']),
-                      ) ? (
-                        statusElement
-                      ) : (
-                        <Input placeholder="请输入内容" />
+                      <>
+                        或
+                      </>
+                    </Button>
+                  </div>
+                )
+              }
+              <div>
+                {fields.map(({ key, name, ...restField }, index) => (
+                  <Form.Item
+                    label={index === 0 ? '筛选条件' : ''}
+                    key={key}
+                    style={{ marginBottom: 0 }}
+                    required
+                    className='filter-item'
+                  >
+                    <Space className="view-create-modal-filters" align="baseline">
+                      <Form.Item
+                        {...restField}
+                        name={[name, 'property']}
+                        rules={[{ required: true }]}
+                      >
+                        {propertyElement(PROPERTIES, { width: 120 })}
+                      </Form.Item>
+                      <Form.Item
+                        {...restField}
+                        name={[name, 'operation']}
+                        rules={[{ required: true }]}
+                      >
+                        {operationElement}
+                      </Form.Item>
+                      <Form.Item
+                        {...restField}
+                        name={[name, 'value']}
+                        rules={[{ required: true, message: '请输入内容' }]}
+                      >
+                        {['In', 'Nin'].includes(
+                          form.getFieldValue(['filters', index, 'operation']),
+                        ) ? (
+                          statusElement
+                        ) : (
+                          <Input placeholder="请输入内容" />
+                        )}
+                      </Form.Item>
+                      {index !== 0 && (
+                        <MinusCircleOutlined onClick={() => remove(name)} />
                       )}
-                    </Form.Item>
-                    {index !== 0 && (
-                      <MinusCircleOutlined onClick={() => remove(name)} />
-                    )}
-                  </Space>
+                    </Space>
+                  </Form.Item>
+                ))}
+                <Form.Item>
+                  <a
+                    onClick={() => add({ property: 'command', operation: 'Reg' })}
+                  >
+                    <PlusOutlined />
+                    新增筛选条件
+                  </a>
                 </Form.Item>
-              ))}
-              <Form.Item>
-                <a
-                  onClick={() => add({ property: 'command', operation: 'Reg' })}
-                >
-                  <PlusOutlined />
-                  新增筛选条件
-                </a>
-              </Form.Item>
-            </>
+              </div>
+            </div>
           )}
         </Form.List>
         <Form.List name="sorts">