Merge pull request #21 from actiontech/fix/DMS-537

fix: remove gap attribute
actiontech · Oct 23, 2023 · 772cd18 · 772cd18
2 parents 47a449f + f959584
commit 772cd18
Show file tree

Hide file tree

Showing 16 changed files with 75 additions and 40 deletions.
diff --git 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
@@ -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,37 +65,47 @@ 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
                 className="content-item"
                 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
                 className="content-item"
                 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
@@ -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;
@@ -36,7 +38,6 @@ export const ProjectSelectorStyleWrapper = styled(CustomSelect)`
 export const ProjectSelectorLabelStyleWrapper = styled('div')`
   display: flex;
   align-items: center;
-  gap: 8px;
 
   &:hover {
     .project-flag-icon {
@@ -52,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/UserNavigate.tsx b/packages/base/src/page/Nav/SideMenu/UserNavigate.tsx
@@ -38,7 +38,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"
@@ -48,7 +50,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"
@@ -58,7 +62,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
@@ -28,14 +28,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;
@@ -52,6 +50,7 @@ export const SideMenuStyleWrapper = styled('div')`
 
         .label-primary {
           color: ${({ theme }) => theme.baseTheme.sideMenu.title.color[0]};
+          margin-right: 10px;
         }
 
         .label-base {
@@ -244,7 +243,6 @@ export const PopoverInnerStyleWrapper = styled('div')`
       display: flex;
       height: 32px;
       align-items: center;
-      gap: 8px;
       align-self: stretch;
       border-radius: 4px;
       font-size: 13px;
@@ -258,6 +256,10 @@ export const PopoverInnerStyleWrapper = styled('div')`
         background-color: ${({ theme }) =>
           theme.baseTheme.sideMenu.userNavigate.content.hoverBackgroundColor};
       }
+
+      &-text {
+        margin-left: 8px;
+      }
     }
   }
 
@@ -281,21 +283,23 @@ 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};
       background-color: ${({ theme }) =>
         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};
@@ -327,6 +331,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
@@ -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
@@ -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%;

diff --git 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
@@ -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
@@ -25,15 +25,17 @@ export const CustomSelectStyleWrapper = styled(BasicSelect)`
         .custom-select-placeholder {
           display: inline-flex;
           align-items: center;
-          gap: 8px;
+
+          &-value {
+            margin-left: 8px;
+          }
         }
       }
 
       .${ANTD_PREFIX_STR}-select-selection-item {
         .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
@@ -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
@@ -278,6 +278,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
@@ -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
@@ -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',
         {