Merge pull request #5 from actiontech/fix/DMS-511

[style](System): update EnterpriseFeatureDisplay layout
actiontech · Oct 20, 2023 · 287f7a1 · 287f7a1
2 parents 723a396 + 379f841
commit 287f7a1
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 62 deletions.
diff --git a/packages/shared/lib/components/EnterpriseFeatureDisplay/EnterpriseFeatureDisplay.tsx b/packages/shared/lib/components/EnterpriseFeatureDisplay/EnterpriseFeatureDisplay.tsx
@@ -8,6 +8,7 @@ import {
   IconBookMark,
   IconCustomService
 } from '../Icons/EnterpriseFeatureDisplay';
+import EmptyBox from '../EmptyBox';
 import { DMS_DEFAULT_WEB_TITLE } from '../../data/common';
 
 const EnterpriseFeatureDisplay: React.FC<EnterpriseFeatureDisplayProps> = ({
@@ -19,67 +20,76 @@ const EnterpriseFeatureDisplay: React.FC<EnterpriseFeatureDisplayProps> = ({
   const { t } = useTranslation();
   const renderFeatureDescNode = () => (
     <div className="left">
-      <Typography.Title level={5} className="title">
-        {t('common.enterpriseFeatureDisplay.featureDescription')}
-      </Typography.Title>
+      <EmptyBox if={!isConfigPage}>
+        <Typography.Title level={5} className="title">
+          {t('common.enterpriseFeatureDisplay.featureDescription')}
+        </Typography.Title>
+      </EmptyBox>
+
       {eeFeatureDescription}
     </div>
   );
-  const renderAdditionalAttentionNode = () => (
-    <div className="right">
-      <Typography.Title level={5} className="title">
-        {t('common.enterpriseFeatureDisplay.additionalAttention')}
-      </Typography.Title>
-      <Card className="ce-card-info" hoverable>
-        <Icon component={IconBookMark} className="bg-icon" />
-        <div className="info-cont-wrapper">
-          <div className="title">Action {DMS_DEFAULT_WEB_TITLE}</div>
-          <p className="cont-tip">
-            {t('common.enterpriseFeatureDisplay.compareLink')}
-          </p>
-          <div className="button-group-wrapper">
-            <a
-              target="_blank"
-              href="https://actiontech.github.io/sqle-docs/docs/support/compare"
-              rel="noreferrer"
-            >
-              <BasicButton type="primary">
-                {t('common.enterpriseFeatureDisplay.userBook')}
-              </BasicButton>
-            </a>
-          </div>
-        </div>
-      </Card>
-      <Card className="ce-card-info" hoverable>
-        <Icon component={IconCustomService} className="bg-icon" />
-        <div className="info-cont-wrapper">
-          <div className="title">Action {DMS_DEFAULT_WEB_TITLE}</div>
-          <p className="cont-tip">
-            {t('common.enterpriseFeatureDisplay.businessLink', {
-              featureName
-            })}
-          </p>
-          <Space size={[12, 0]} className="button-group-wrapper">
-            <a
-              target="_blank"
-              href="https://github.com/actiontech/sqle"
-              rel="noreferrer"
-            >
-              <BasicButton type="primary">SQLE Github</BasicButton>
-            </a>
 
-            <a
-              target="_blank"
-              href="https://www.actionsky.com/"
-              rel="noreferrer"
-            >
-              <BasicButton type="primary">
-                {t('common.enterpriseFeatureDisplay.linkUs')}
-              </BasicButton>
-            </a>
-          </Space>
+  const renderBookMarkCard = () => (
+    <Card className="ce-card-info" hoverable>
+      <Icon component={IconBookMark} className="bg-icon" />
+      <div className="info-cont-wrapper">
+        <div className="title">Action {DMS_DEFAULT_WEB_TITLE}</div>
+        <p className="cont-tip">
+          {t('common.enterpriseFeatureDisplay.compareLink')}
+        </p>
+        <div className="button-group-wrapper">
+          <a
+            target="_blank"
+            href="https://actiontech.github.io/sqle-docs/docs/support/compare"
+            rel="noreferrer"
+          >
+            <BasicButton type="primary">
+              {t('common.enterpriseFeatureDisplay.userBook')}
+            </BasicButton>
+          </a>
         </div>
-      </Card>
+      </div>
+    </Card>
+  );
+
+  const renderCustomServiceCard = () => (
+    <Card className="ce-card-info" hoverable>
+      <Icon component={IconCustomService} className="bg-icon" />
+      <div className="info-cont-wrapper">
+        <div className="title">Action {DMS_DEFAULT_WEB_TITLE}</div>
+        <p className="cont-tip">
+          {t('common.enterpriseFeatureDisplay.businessLink', {
+            featureName
+          })}
+        </p>
+        <Space size={[12, 0]} className="button-group-wrapper">
+          <a
+            target="_blank"
+            href="https://github.com/actiontech/sqle"
+            rel="noreferrer"
+          >
+            <BasicButton type="primary">SQLE Github</BasicButton>
+          </a>
+
+          <a target="_blank" href="https://www.actionsky.com/" rel="noreferrer">
+            <BasicButton type="primary">
+              {t('common.enterpriseFeatureDisplay.linkUs')}
+            </BasicButton>
+          </a>
+        </Space>
+      </div>
+    </Card>
+  );
+  const renderAdditionalAttentionNode = () => (
+    <div className="right">
+      <EmptyBox if={!isConfigPage}>
+        <Typography.Title level={5} className="title">
+          {t('common.enterpriseFeatureDisplay.additionalAttention')}
+        </Typography.Title>
+      </EmptyBox>
+      {renderCustomServiceCard()}
+      {renderBookMarkCard()}
     </div>
   );
 

diff --git a/packages/shared/lib/components/EnterpriseFeatureDisplay/style.ts b/packages/shared/lib/components/EnterpriseFeatureDisplay/style.ts
@@ -6,11 +6,11 @@ export const CEIndexStyleWrapper = styled('section')`
 
   .common-mode-wrapper {
     height: calc(100vh - 60px);
-  }
 
-  .${ANTD_PREFIX_STR}-col {
-    padding: 40px;
-    height: calc(100vh - 60px);
+    .${ANTD_PREFIX_STR}-col {
+      padding: 40px;
+      height: calc(100vh - 60px);
+    }
   }
 
   .title {
@@ -85,8 +85,7 @@ export const CEIndexStyleWrapper = styled('section')`
       line-height: 32px;
     }
 
-    .left,
-    .right {
+    .left {
       margin-top: 12px;
     }
   }