From 1f0907ac92208b915daae716205b75017b7a0003 Mon Sep 17 00:00:00 2001
From: yanzhuangzhuang <yanzhuangzhuang@actionsky.com>
Date: Mon, 23 Oct 2023 17:31:37 +0800
Subject: [PATCH 1/2] fix: remove gap attribute

---
 packages/base/src/page/Login/style.ts         |  2 +-
 .../src/page/Nav/SideMenu/GlobalSetting.tsx   | 24 ++++++++++++++-----
 .../Nav/SideMenu/ProjectSelector/style.ts     |  2 ++
 .../src/page/Nav/SideMenu/UserNavigate.tsx    | 12 +++++++---
 packages/base/src/page/Nav/SideMenu/style.ts  |  9 ++++---
 .../ProjectSelectorModal.tsx                  |  2 +-
 .../Detail/NotFoundRecentlyProject/style.ts   |  5 +++-
 7 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/packages/base/src/page/Login/style.ts b/packages/base/src/page/Login/style.ts
index ff9c1a5e1..8dae1dcdf 100644
--- a/packages/base/src/page/Login/style.ts
+++ b/packages/base/src/page/Login/style.ts
@@ -53,7 +53,6 @@ export const LoginPageRightStyleWrapper = styled('div')`
         display: flex;
         height: 100%;
         align-items: center;
-        gap: 10px;
         flex-shrink: 0;
         align-self: stretch;
 
@@ -69,6 +68,7 @@ export const LoginPageRightStyleWrapper = styled('div')`
 
         .label-primary {
           color: ${({ theme }) => theme.baseTheme.sideMenu.title.color[0]};
+          margin-right: 10px;
         }
 
         .label-base {
diff --git a/packages/base/src/page/Nav/SideMenu/GlobalSetting.tsx b/packages/base/src/page/Nav/SideMenu/GlobalSetting.tsx
index 658fbdaa5..d08dcc2b7 100644
--- a/packages/base/src/page/Nav/SideMenu/GlobalSetting.tsx
+++ b/packages/base/src/page/Nav/SideMenu/GlobalSetting.tsx
@@ -51,7 +51,9 @@ const GlobalSetting: React.FC<{
                 onClick={() => handleClickItem(`/sqle/rule`)}
               >
                 <IconViewRule />
-                <span>{t('dmsMenu.globalSettings.viewRule')}</span>
+                <span className="content-item-text">
+                  {t('dmsMenu.globalSettings.viewRule')}
+                </span>
               </div>
               {/* FITRUE_isSQLE */}
             </div>
@@ -63,7 +65,9 @@ const GlobalSetting: React.FC<{
                 onClick={() => handleClickItem('/userCenter')}
               >
                 <IconUserCenter />
-                <span>{t('dmsMenu.globalSettings.userCenter')}</span>
+                <span className="content-item-text">
+                  {t('dmsMenu.globalSettings.userCenter')}
+                </span>
               </div>
               {/* IFTRUE_isSQLE */}
               <div
@@ -71,21 +75,27 @@ const GlobalSetting: React.FC<{
                 onClick={() => handleClickItem('/sqle/reportStatistics')}
               >
                 <IconReportStatistics />
-                <span>{t('dmsMenu.globalSettings.reportStatistics')}</span>
+                <span className="content-item-text">
+                  {t('dmsMenu.globalSettings.reportStatistics')}
+                </span>
               </div>
               <div
                 className="content-item"
                 onClick={() => handleClickItem(`/sqle/rule`)}
               >
                 <IconViewRule />
-                <span>{t('dmsMenu.globalSettings.viewRule')}</span>
+                <span className="content-item-text">
+                  {t('dmsMenu.globalSettings.viewRule')}
+                </span>
               </div>
               <div
                 className="content-item"
                 onClick={() => handleClickItem(`/sqle/ruleManager`)}
               >
                 <IconRuleManage />
-                <span>{t('dmsMenu.globalSettings.ruleManage')}</span>
+                <span className="content-item-text">
+                  {t('dmsMenu.globalSettings.ruleManage')}
+                </span>
               </div>
               {/* FITRUE_isSQLE */}
               <div
@@ -93,7 +103,9 @@ const GlobalSetting: React.FC<{
                 onClick={() => handleClickItem(`/system`)}
               >
                 <IconSystem />
-                <span>{t('dmsMenu.globalSettings.system')}</span>
+                <span className="content-item-text">
+                  {t('dmsMenu.globalSettings.system')}
+                </span>
               </div>
             </div>
           </EmptyBox>
diff --git a/packages/base/src/page/Nav/SideMenu/ProjectSelector/style.ts b/packages/base/src/page/Nav/SideMenu/ProjectSelector/style.ts
index 978f3da72..87fd8589f 100644
--- a/packages/base/src/page/Nav/SideMenu/ProjectSelector/style.ts
+++ b/packages/base/src/page/Nav/SideMenu/ProjectSelector/style.ts
@@ -4,6 +4,8 @@ import { styled } from '@mui/material/styles';
 
 export const ProjectSelectorStyleWrapper = styled(CustomSelect)`
   &.${ANTD_PREFIX_STR}-select-lg.${ANTD_PREFIX_STR}-select.custom-project-selector {
+    margin: 4px 0;
+
     .${ANTD_PREFIX_STR}-select-selector {
       font-size: 13px;
       font-weight: 500;
diff --git a/packages/base/src/page/Nav/SideMenu/UserNavigate.tsx b/packages/base/src/page/Nav/SideMenu/UserNavigate.tsx
index 1594c99f5..226f11f26 100644
--- a/packages/base/src/page/Nav/SideMenu/UserNavigate.tsx
+++ b/packages/base/src/page/Nav/SideMenu/UserNavigate.tsx
@@ -39,7 +39,9 @@ const UserNavigate: React.FC<{
               }}
             >
               <IconAccount />
-              <span>{t('dmsMenu.userNavigate.account')}</span>
+              <span className="content-item-text">
+                {t('dmsMenu.userNavigate.account')}
+              </span>
             </div>
             <div
               className="content-item"
@@ -49,7 +51,9 @@ const UserNavigate: React.FC<{
               }}
             >
               <IconAccount />
-              <span>{t('dmsMenu.userNavigate.viewVersion')}</span>
+              <span className="content-item-text">
+                {t('dmsMenu.userNavigate.viewVersion')}
+              </span>
             </div>
             <div
               className="content-item"
@@ -59,7 +63,9 @@ const UserNavigate: React.FC<{
               }}
             >
               <IconAccount />
-              <span>{t('dmsMenu.userNavigate.logout')}</span>
+              <span className="content-item-text">
+                {t('dmsMenu.userNavigate.logout')}
+              </span>
             </div>
           </div>
         </PopoverInnerStyleWrapper>
diff --git a/packages/base/src/page/Nav/SideMenu/style.ts b/packages/base/src/page/Nav/SideMenu/style.ts
index cc78c6706..6fb9fc891 100644
--- a/packages/base/src/page/Nav/SideMenu/style.ts
+++ b/packages/base/src/page/Nav/SideMenu/style.ts
@@ -27,14 +27,12 @@ export const SideMenuStyleWrapper = styled('div')`
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      gap: 4px;
 
       .title {
         display: flex;
         height: 60px;
         padding: 8px;
         align-items: center;
-        gap: 10px;
         flex-shrink: 0;
         align-self: stretch;
         cursor: pointer;
@@ -51,6 +49,7 @@ export const SideMenuStyleWrapper = styled('div')`
 
         .label-primary {
           color: ${({ theme }) => theme.baseTheme.sideMenu.title.color[0]};
+          margin-right: 10px;
         }
 
         .label-base {
@@ -243,7 +242,6 @@ export const PopoverInnerStyleWrapper = styled('div')`
       display: flex;
       height: 32px;
       align-items: center;
-      gap: 8px;
       align-self: stretch;
       border-radius: 4px;
       font-size: 13px;
@@ -257,6 +255,10 @@ export const PopoverInnerStyleWrapper = styled('div')`
         background-color: ${({ theme }) =>
           theme.baseTheme.sideMenu.userNavigate.content.hoverBackgroundColor};
       }
+
+      &-text {
+        margin-left: 8px;
+      }
     }
   }
 
@@ -326,6 +328,7 @@ export const CEModeProjectWrapperStyleWrapper = styled('div')`
   border: 1px solid
     ${({ theme }) => theme.sharedTheme.uiToken.colorBorderSecondary};
   border-radius: 4px;
+  margin: 4px 0;
 
   .project-flag-icon {
     margin-right: 8px;
diff --git a/packages/base/src/page/Project/Detail/NotFoundRecentlyProject/ProjectSelectorModal.tsx b/packages/base/src/page/Project/Detail/NotFoundRecentlyProject/ProjectSelectorModal.tsx
index ecf1b7a85..2c9092c9e 100644
--- a/packages/base/src/page/Project/Detail/NotFoundRecentlyProject/ProjectSelectorModal.tsx
+++ b/packages/base/src/page/Project/Detail/NotFoundRecentlyProject/ProjectSelectorModal.tsx
@@ -47,7 +47,7 @@ const ProjectSelectorModal: React.FC<ProjectSelectorModalProps> = ({
       }
     >
       <SelectProjectModalContentStyleWrapper>
-        <span>{t('dmsProject.detail.modalTips')}</span>
+        <span className="modal-tips">{t('dmsProject.detail.modalTips')}</span>
         <ProjectSelector
           value={projectSelectorValue}
           onChange={setProjectSelectorValue}
diff --git a/packages/base/src/page/Project/Detail/NotFoundRecentlyProject/style.ts b/packages/base/src/page/Project/Detail/NotFoundRecentlyProject/style.ts
index 459b77056..e239a9b40 100644
--- a/packages/base/src/page/Project/Detail/NotFoundRecentlyProject/style.ts
+++ b/packages/base/src/page/Project/Detail/NotFoundRecentlyProject/style.ts
@@ -4,7 +4,10 @@ export const SelectProjectModalContentStyleWrapper = styled('div')`
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: 16px;
+
+  .modal-tips {
+    margin-bottom: 16px;
+  }
 
   .custom-select-project.custom-project-selector {
     width: 90%;

From f9595843970dcc3eb9d3a984cf87881687e51f9e Mon Sep 17 00:00:00 2001
From: lizhensheng <lizhensheng@actionsky.com>
Date: Mon, 23 Oct 2023 19:05:28 +0800
Subject: [PATCH 2/2] [chore]:  remove gap attribute

---
 .../src/page/Nav/SideMenu/ProjectSelector/style.ts   |  2 +-
 packages/base/src/page/Nav/SideMenu/style.ts         |  6 ++++--
 .../components/ActiontechTable/components/style.ts   |  6 +++---
 packages/shared/lib/components/BasicSelect/style.ts  |  6 ------
 packages/shared/lib/components/CustomSelect/style.ts | 12 ++++++++----
 packages/sqle/src/page/Home/CommonTable/style.ts     | 10 ++++++++--
 packages/sqle/src/page/Order/AuditDetail/index.tsx   |  1 +
 packages/sqle/src/page/Order/AuditDetail/style.ts    |  2 --
 packages/sqle/src/page/Order/List/index.tsx          |  5 ++++-
 .../WorkflowTemplate/UpdateWorkflowTemplate/style.ts |  8 +++++---
 .../WorkflowTemplate/components/StepCard/style.ts    |  1 -
 11 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/packages/base/src/page/Nav/SideMenu/ProjectSelector/style.ts b/packages/base/src/page/Nav/SideMenu/ProjectSelector/style.ts
index 87fd8589f..3cd8c4074 100644
--- a/packages/base/src/page/Nav/SideMenu/ProjectSelector/style.ts
+++ b/packages/base/src/page/Nav/SideMenu/ProjectSelector/style.ts
@@ -38,7 +38,6 @@ export const ProjectSelectorStyleWrapper = styled(CustomSelect)`
 export const ProjectSelectorLabelStyleWrapper = styled('div')`
   display: flex;
   align-items: center;
-  gap: 8px;
 
   &:hover {
     .project-flag-icon {
@@ -54,6 +53,7 @@ export const ProjectSelectorLabelStyleWrapper = styled('div')`
   }
 
   .project-selector-label-text {
+    margin-left: 8px;
     color: ${({ theme }) =>
       theme.baseTheme.sideMenu.projectSelector.dropdown.labelColor};
   }
diff --git a/packages/base/src/page/Nav/SideMenu/style.ts b/packages/base/src/page/Nav/SideMenu/style.ts
index 6fb9fc891..618e094f0 100644
--- a/packages/base/src/page/Nav/SideMenu/style.ts
+++ b/packages/base/src/page/Nav/SideMenu/style.ts
@@ -282,7 +282,6 @@ export const PopoverInnerStyleWrapper = styled('div')`
       padding: 3px;
       justify-content: center;
       align-items: flex-start;
-      gap: 4px;
       border-radius: 100px;
       border: ${({ theme }) =>
         theme.baseTheme.sideMenu.userNavigate.footer.iconWrapper.border};
@@ -290,13 +289,16 @@ export const PopoverInnerStyleWrapper = styled('div')`
         theme.baseTheme.sideMenu.userNavigate.footer.iconWrapper
           .backgroundColor};
 
+      &-wrapper:first-of-type {
+        margin-right: 4px;
+      }
+
       &-wrapper {
         display: flex;
         width: 26px;
         height: 26px;
         justify-content: center;
         align-items: center;
-        gap: 10px;
         cursor: pointer;
         color: ${({ theme }) =>
           theme.baseTheme.sideMenu.userNavigate.footer.iconWrapper.color};
diff --git a/packages/shared/lib/components/ActiontechTable/components/style.ts b/packages/shared/lib/components/ActiontechTable/components/style.ts
index ea94a4a4c..a7c19d4ff 100644
--- a/packages/shared/lib/components/ActiontechTable/components/style.ts
+++ b/packages/shared/lib/components/ActiontechTable/components/style.ts
@@ -64,7 +64,6 @@ export const ColumnsSettingDropdownStyleWrapper = styled('div')`
     .columns-setting-item {
       display: flex;
       align-items: center;
-      gap: 8px;
       cursor: pointer;
       width: 80%;
       padding: 4px 8px;
@@ -82,6 +81,7 @@ export const ColumnsSettingDropdownStyleWrapper = styled('div')`
           theme.sharedTheme.components.columnsSetting.dropdown.item.labelColor};
         overflow: hidden;
         max-width: 70%;
+        margin-left: 8px;
       }
     }
   }
@@ -143,7 +143,6 @@ export const CustomFilterRangePickerStyleWrapper = styled(BasicRangePicker)`
 
 export const InlineTableActionButtonsStyleWrapper = styled('div')`
   display: flex;
-  gap: 8px;
 
   .actiontech-table-actions-button {
     height: 24px;
@@ -153,6 +152,7 @@ export const InlineTableActionButtonsStyleWrapper = styled('div')`
   .actiontech-table-actions-more-button {
     height: 24px;
     width: 24px;
+    margin-left: 8px;
   }
 `;
 
@@ -174,7 +174,6 @@ export const InlineTableActionMoreButtonPopoverStyleWrapper = styled('div')`
     cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 8px;
     padding: 0 8px;
     border-radius: 4px;
 
@@ -188,6 +187,7 @@ export const InlineTableActionMoreButtonPopoverStyleWrapper = styled('div')`
       font-size: 13px;
       font-weight: 500;
       line-height: 20px;
+      margin-left: 8px;
     }
 
     &-icon {
diff --git a/packages/shared/lib/components/BasicSelect/style.ts b/packages/shared/lib/components/BasicSelect/style.ts
index 8e03fd503..4a57aee88 100644
--- a/packages/shared/lib/components/BasicSelect/style.ts
+++ b/packages/shared/lib/components/BasicSelect/style.ts
@@ -66,9 +66,3 @@ export const BasicSelectStyleWrapper = styled(Select<any>)`
     }
   }
 `;
-
-export const BasicSelectOptionLabelStyleWrapper = styled('span')`
-  display: flex;
-  gap: 8px;
-`;
-export const BasicSelectPlaceholderStyleWrapper = styled('span')``;
diff --git a/packages/shared/lib/components/CustomSelect/style.ts b/packages/shared/lib/components/CustomSelect/style.ts
index b54b1cb5b..14fe25255 100644
--- a/packages/shared/lib/components/CustomSelect/style.ts
+++ b/packages/shared/lib/components/CustomSelect/style.ts
@@ -25,7 +25,10 @@ export const CustomSelectStyleWrapper = styled(BasicSelect)`
         .custom-select-placeholder {
           display: inline-flex;
           align-items: center;
-          gap: 8px;
+
+          &-value {
+            margin-left: 8px;
+          }
         }
       }
 
@@ -33,7 +36,6 @@ export const CustomSelectStyleWrapper = styled(BasicSelect)`
         .custom-select-option-content {
           display: inline-flex;
           align-items: center;
-          gap: 8px;
           max-width: 100%;
         }
       }
@@ -56,7 +58,9 @@ export const CustomSelectStyleWrapper = styled(BasicSelect)`
       padding-inline-end: 24px;
 
       .${ANTD_PREFIX_STR}-select-selection-overflow {
-        gap: 2px;
+        &-item:not(:first-of-type) {
+          margin-left: 2px;
+        }
       }
     }
   }
@@ -79,9 +83,9 @@ export const CustomSelectStyleWrapper = styled(BasicSelect)`
 
 export const CustomSelectOptionLabelStyleWrapper = styled('span')`
   display: flex;
-  gap: 8px;
 
   .custom-select-option-content-prefix {
+    margin-right: 8px;
     color: ${({ theme }) =>
       theme.sharedTheme.components.customSelect.content.prefixColor};
   }
diff --git a/packages/sqle/src/page/Home/CommonTable/style.ts b/packages/sqle/src/page/Home/CommonTable/style.ts
index dbccb53a4..0d168a133 100644
--- a/packages/sqle/src/page/Home/CommonTable/style.ts
+++ b/packages/sqle/src/page/Home/CommonTable/style.ts
@@ -2,17 +2,23 @@ import { styled } from '@mui/material/styles';
 
 export const DashboardNameStyleWrapper = styled('div')`
   display: flex;
-  gap: 12px;
   align-items: center;
+
+  .custom-icon {
+    margin-right: 12px;
+  }
 `;
 
 export const TableTitleStyleWrapper = styled('header')`
   display: flex;
-  gap: 8px;
   align-items: center;
   font-size: 16px;
   font-weight: 600;
   color: ${({ theme }) => theme.sharedTheme.uiToken.colorTextBase};
+
+  .custom-icon {
+    margin-right: 8px;
+  }
 `;
 
 export const NoBorderedPageHeaderWrapper = styled('div')`
diff --git a/packages/sqle/src/page/Order/AuditDetail/index.tsx b/packages/sqle/src/page/Order/AuditDetail/index.tsx
index d1589c300..f1364f768 100644
--- a/packages/sqle/src/page/Order/AuditDetail/index.tsx
+++ b/packages/sqle/src/page/Order/AuditDetail/index.tsx
@@ -275,6 +275,7 @@ const AuditDetail: React.FC<OrderDetailAuditResultProps> = ({
         <Space
           hidden={auditResultActiveKey === OVERVIEW_TAB_KEY}
           className="audit-result-actions-wrap"
+          size={12}
         >
           <TableFilterButton
             updateAllSelectedFilterItem={updateAllSelectedFilterItem}
diff --git a/packages/sqle/src/page/Order/AuditDetail/style.ts b/packages/sqle/src/page/Order/AuditDetail/style.ts
index 78a5fec22..8ef026333 100644
--- a/packages/sqle/src/page/Order/AuditDetail/style.ts
+++ b/packages/sqle/src/page/Order/AuditDetail/style.ts
@@ -14,8 +14,6 @@ export const OrderDetailAuditResultStyleWrapper = styled('section')`
   }
 
   .${ANTD_PREFIX_STR}-space.audit-result-actions-wrap {
-    gap: 12px !important;
-
     .${ANTD_PREFIX_STR}-divider.audit-result-actions-divider {
       margin: 0;
       height: 28px;
diff --git a/packages/sqle/src/page/Order/List/index.tsx b/packages/sqle/src/page/Order/List/index.tsx
index 7283e79eb..ef2c3e5f3 100644
--- a/packages/sqle/src/page/Order/List/index.tsx
+++ b/packages/sqle/src/page/Order/List/index.tsx
@@ -103,7 +103,10 @@ const OrderList: React.FC = () => {
       FilterCustomProps
     >([
       ['create_user_name', { options: usernameOptions }],
-      ['current_step_assignee_user_name_list', { options: usernameOptions }],
+      [
+        'current_step_assignee_user_name_list',
+        { options: usernameOptions, mode: 'multiple' }
+      ],
       [
         'instance_name',
         {
diff --git a/packages/sqle/src/page/WorkflowTemplate/UpdateWorkflowTemplate/style.ts b/packages/sqle/src/page/WorkflowTemplate/UpdateWorkflowTemplate/style.ts
index 595abb0bf..8c73e474f 100644
--- a/packages/sqle/src/page/WorkflowTemplate/UpdateWorkflowTemplate/style.ts
+++ b/packages/sqle/src/page/WorkflowTemplate/UpdateWorkflowTemplate/style.ts
@@ -92,7 +92,6 @@ export const StepInfoStyleWrapper = styled(BasicButton)`
     padding: 16px 12px;
     justify-content: center;
     align-items: center;
-    gap: 5px;
     align-self: stretch;
     border-radius: 8px;
     border: ${({ theme }) =>
@@ -110,7 +109,7 @@ export const StepInfoStyleWrapper = styled(BasicButton)`
 
     &.${ANTD_PREFIX_STR}-btn:not(.${ANTD_PREFIX_STR}-btn-icon-only)
       > .${ANTD_PREFIX_STR}-btn-icon:not(:last-child) {
-      margin-right: 0;
+      margin-right: 5px;
     }
   }
 `;
@@ -119,8 +118,11 @@ export const StepButtonStyleWrapper = styled('div')`
   margin-top: 24px;
   display: flex;
   align-items: center;
-  gap: 12px;
   align-self: stretch;
+
+  .basic-button-wrapper.${ANTD_PREFIX_STR}-btn:first-of-type {
+    margin-right: 12px;
+  }
 `;
 
 export const StepNodeAlertStyleWrapper = styled('div')`
diff --git a/packages/sqle/src/page/WorkflowTemplate/components/StepCard/style.ts b/packages/sqle/src/page/WorkflowTemplate/components/StepCard/style.ts
index 833f22078..d982d74b3 100644
--- a/packages/sqle/src/page/WorkflowTemplate/components/StepCard/style.ts
+++ b/packages/sqle/src/page/WorkflowTemplate/components/StepCard/style.ts
@@ -9,7 +9,6 @@ export const StepCardStyleWrapper = styled(Card)`
   padding: 20px 24px 16px;
   flex-direction: column;
   align-items: flex-start;
-  gap: 16px;
   border-radius: 8px;
 
   &.${ANTD_PREFIX_STR}-card.step-card-style {