PullRequest: 503 ODC 432 易用性-空状态、数据源选择组件统一

Merge branch 'feat/config-change of git@code.alipay.com:oceanbase/oceanbase-developer-center.git into dev-4.3.2 https://code.alipay.com/oceanbase/oceanbase-developer-center/pull_requests/503 Signed-off-by: 晓康 <xxk268858@oceanbase.com> * fix: add ClickToComponent Config * feat: side bar nav to front page * feat: jump to synergy space by space ID. * feat: add datasource icon to scan rule datasource options list. * feat: add datasource empty page * feat: add scan rule empty * feat: add sqlconsole empty page * feat: add script page empty status * feat: add empty status page to Snippet page * feat: change icon of nav to team page * fix: change sql console datasource empty page text * refactor: 调整代码 * fix: 删除跳转团队空间首页功能 * feat: 调整展示数据归档空页面的条件 * feat: add scanRuleEmpty action button * feat: normal empty page style change * fix: 项目空白页添加 * feat: 归档不展示action button * feat: datasource empty page style * feat: use the Access component to differentiate between administrators and normal users. * feat: 运维-数据源选择-icon 展示 * feat: use color token * feat: use color token * feat: 使用 px 替代 vh
oceanbase · Aug 14, 2024 · 8914545 · 8914545
1 parent cd34091
commit 8914545
Show file tree

Hide file tree

Showing 341 changed files with 2,020 additions and 1,631 deletions.
diff --git a/config/config.js b/config/config.js
@@ -69,7 +69,7 @@ const config = {
   title: false,
   favicons: [publicPath + 'img/favicon.png'],
   // ctoken: false,
-
+  clickToComponent: {},
   externals: {
     electron: 'commonjs electron',
   },

diff --git a/public/img/graphic_empty.svg b/public/img/graphic_empty.svg
diff --git a/src/common/datasource/interface.ts b/src/common/datasource/interface.ts
@@ -25,6 +25,12 @@ export type columnExtraComponent = React.FC<{
   dialectType?: ConnectionMode;
 }>;
 
+export enum SQLConsoleResourceType {
+  DataSource = 'datasource',
+  Snippet = 'snippet',
+  Script = 'script',
+}
+
 interface ICreateTableConfig {
   /**
    * 是否开启自动递增

diff --git a/src/common/datasource/oracle/index.tsx b/src/common/datasource/oracle/index.tsx
@@ -15,10 +15,10 @@
  */
 
 import { ConnectType, TaskType } from '@/d.ts';
-import { IDataSourceModeConfig } from '../interface';
-import OracleColumnExtra from '../oceanbase/OracleColumnExtra';
 import { TableForeignConstraintOnDeleteType } from '@/d.ts/table';
 import { haveOCP } from '@/util/env';
+import { IDataSourceModeConfig } from '../interface';
+import OracleColumnExtra from '../oceanbase/OracleColumnExtra';
 
 const oracleTableConfig = {
   constraintEnableConfigurable: true,

diff --git a/src/common/network/project.ts b/src/common/network/project.ts
@@ -15,14 +15,14 @@
  */
 
 import { IResponseData, IUserSummary } from '@/d.ts';
+import { DatabasePermissionType } from '@/d.ts/database';
 import {
-  IProject,
-  ProjectRole,
-  PermissionSourceType,
   IDatabasePermission,
+  IProject,
   ITablePermission,
+  PermissionSourceType,
+  ProjectRole,
 } from '@/d.ts/project';
-import { DatabasePermissionType } from '@/d.ts/database';
 import request from '@/util/request';
 
 export async function listProjects(

diff --git a/src/common/network/sql/preHandle.tsx b/src/common/network/sql/preHandle.tsx
@@ -1,8 +1,8 @@
+import { ISQLLintReuslt } from '@/component/SQLLintResult/type';
 import { EStatus } from '@/d.ts';
-import { IExecuteSQLParams, ISQLExecuteTask } from './executeSQL';
 import modal from '@/store/modal';
 import sessionManager from '@/store/sessionManager';
-import { ISQLLintReuslt } from '@/component/SQLLintResult/type';
+import { IExecuteSQLParams, ISQLExecuteTask } from './executeSQL';
 
 export function executeSQLPreHandle(
   taskInfo: ISQLExecuteTask,

diff --git a/src/common/network/table/index.ts b/src/common/network/table/index.ts
@@ -15,7 +15,7 @@
  */
 
 import { INlsObject, ITable, ITableColumn, LobExt, RSModifyDataType } from '@/d.ts';
-import { ITableModel, TableColumn } from '@/page/Workspace/components/CreateTable/interface';
+import { ITableModel } from '@/page/Workspace/components/CreateTable/interface';
 import sessionManager from '@/store/sessionManager';
 import setting from '@/store/setting';
 import { getNlsValueKey } from '@/util/column';

diff --git a/src/component/AddDataSourceDropdown/index.tsx b/src/component/AddDataSourceDropdown/index.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { formatMessage } from '@/util/intl';
 import { getAllConnectTypes } from '@/common/datasource';
 import { ConnectTypeText } from '@/constant/label';
 import { IDataSourceType } from '@/d.ts/datasource';
+import { formatMessage } from '@/util/intl';
 import { Dropdown } from 'antd';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import { useMemo } from 'react';

diff --git a/src/component/BatchImportButton/modal.tsx b/src/component/BatchImportButton/modal.tsx
@@ -17,14 +17,13 @@
 import ODCDragger from '@/component/OSSDragger';
 import login from '@/store/login';
 import { formatMessage } from '@/util/intl';
-import { downloadFile } from '@/util/utils';
 import { InfoCircleFilled } from '@ant-design/icons';
+import { getLocale } from '@umijs/max';
 import { Alert, Button, Drawer, Form, Space } from 'antd';
 import { useForm } from 'antd/es/form/Form';
 import type { UploadFile } from 'antd/lib/upload/interface';
 import Cookies from 'js-cookie';
 import React, { useEffect, useState } from 'react';
-import { getLocale } from '@umijs/max';
 import styles from './index.less';
 // 20M
 const MAX_FILE_SIZE = 1024 * 1024 * 20;

diff --git a/src/component/Button/SyncMetadata/index.tsx b/src/component/Button/SyncMetadata/index.tsx
@@ -1,14 +1,13 @@
-import { formatMessage } from '@/util/intl';
-import { LoadingOutlined } from '@ant-design/icons';
 import { syncObject } from '@/common/network/database';
+import { IManagerResourceType } from '@/d.ts';
+import { DBObjectSyncStatus, IDatabase } from '@/d.ts/database';
 import { ReactComponent as SyncMetadataSvg } from '@/svgr/sync_metadata.svg';
+import { formatMessage } from '@/util/intl';
+import { getLocalFormatDateTime } from '@/util/utils';
+import { LoadingOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
-import { DBObjectSyncStatus } from '@/d.ts/database';
-import { IManagerResourceType } from '@/d.ts';
 import { Tooltip } from 'antd';
-import { getLocalFormatDateTime } from '@/util/utils';
 import { useState } from 'react';
-import { IDatabase } from '@/d.ts/database';
 
 export default function Reload({
   size = '13px',

diff --git a/src/component/CommonTable/index.less b/src/component/CommonTable/index.less
@@ -1,15 +1,20 @@
 .tableWrapper {
+  display: flex;
+  flex-direction: column;
   height: 100%;
+
   .alertInfo {
     margin-bottom: 16px;
   }
+
   &.showAlertInfo {
     :global {
       .ant-spin-nested-loading {
         height: calc(100% - 52px);
       }
     }
   }
+
   &.showToolbar {
     &.showAlertInfo {
       :global {
@@ -18,46 +23,54 @@
         }
       }
     }
+
     &.infoVisible {
       :global {
         .ant-spin-nested-loading {
           height: calc(100% - 45px - 36px);
         }
       }
     }
+
     :global {
       .ant-spin-nested-loading {
         height: calc(100% - 45px);
       }
     }
   }
+
   &.infoVisible {
     :global {
       .ant-spin-nested-loading {
         height: calc(100% - 36px);
       }
     }
   }
+
   &.infoVisible.showToolbar,
   &.showToolbar,
   &.infoVisible {
     .bigTable,
     .smallTable {
       height: 100%;
+
       :global {
         .ant-spin-nested-loading {
           height: 100%;
         }
       }
     }
   }
+
   :global {
     .ant-space-item-split {
       color: #d9d9d9;
     }
+
     .ant-spin-container {
       height: 100%;
     }
+
     .ant-table-pagination {
       &.ant-pagination {
         position: absolute;
@@ -66,24 +79,29 @@
         margin: 0;
         padding-top: 16px;
       }
+
       .ant-pagination-total-text {
         position: absolute;
         left: 0;
       }
     }
   }
 }
+
 .toolBar:global(.ant-space) {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 8px;
+
   .titleContent {
     font-size: 16px;
+
     .desc {
       color: var(--text-color-hint);
       font-size: 12px;
     }
+
     .cursor {
       font-size: 12px;
       cursor: pointer;
@@ -100,20 +118,24 @@
         padding: 0 16px;
         line-height: 24px;
         background-color: var(--navigationv2-background-color);
+
         &::before {
           display: none;
         }
+
         &.ant-table-cell-fix-left {
           &,
           .ant-table-filter-trigger {
             padding-right: 10px;
           }
         }
+
         .ant-table-column-sorters {
           padding: 0;
         }
       }
     }
+
     .ant-table-tbody {
       .ant-table-cell {
         padding: 10px 16px;
@@ -122,20 +144,24 @@
     }
   }
 }
+
 .smallCommonTable {
   .toolBar {
     .titleContent {
       font-size: 12px;
     }
   }
 }
+
 .smallTable {
   :global {
     .ant-table {
       font-size: 12px;
     }
+
     .ant-table-thead > tr > th {
       white-space: nowrap;
+
       .ant-table-column-sorters {
         padding: 0;
       }
@@ -146,10 +172,12 @@
       height: 24px;
       padding: 0 8px;
     }
+
     .ant-table-tbody > tr.ant-table-expanded-row > td {
       height: 100%;
       padding: 0 8px;
     }
+
     .ant-table-column-title {
       color: var(--text-color-primary);
     }
@@ -167,6 +195,7 @@
 
   .odd {
     background: var(--background-tertraiy-color);
+
     :global {
       .ant-table-cell-fix-left,
       .ant-table-cell-fix-right {
@@ -178,6 +207,7 @@
 
 .filterContent {
   color: var(--text-color-primary);
+
   :global {
     .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
       padding-left: 0;
@@ -187,6 +217,7 @@
 
 .infoWrap {
   margin-bottom: 12px;
+
   .btn {
     color: #1890ff;
     font-size: 12px;
@@ -217,14 +248,61 @@
     .ant-spin-nested-loading > .ant-spin-container {
       padding-bottom: 40px;
     }
+
+    .ant-empty-description {
+      color: var(--text-color-secondary);
+      font-size: 12px;
+      line-height: 22px;
+      text-align: center;
+      opacity: 0.65;
+    }
+    .ant-empty-normal {
+      padding-top: 149px;
+    }
+
+    .ant-table-expanded-row-fixed {
+      height: 700px;
+      padding-bottom: 40px;
+      touch-action: none;
+    }
   }
+
   &:not(.scrollAble) {
     :global {
       .ant-table-body {
+        height: 100%;
+
         &::-webkit-scrollbar {
           // display: none;
         }
       }
     }
   }
+
+  .tableWrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .customTable {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .ant-table-placeholder {
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .customEmpty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/src/component/DDLResultSetFilter/index.tsx b/src/component/DDLResultSetFilter/index.tsx
@@ -18,9 +18,9 @@ import { FilterOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Input, Popover } from 'antd';
 import { Component } from 'react';
 // @ts-ignore
+import { formatMessage } from '@/util/intl';
 import { CheckboxValueType } from 'antd/lib/checkbox/Group';
 import styles from './index.less';
-import { formatMessage } from '@/util/intl';
 
 export default class DDLResultSetFilter extends Component<
   {

diff --git a/src/component/EditPLParamsModal/ValueInput.tsx b/src/component/EditPLParamsModal/ValueInput.tsx
@@ -17,7 +17,7 @@
 import { ConnectionMode } from '@/d.ts';
 import { formatMessage } from '@/util/intl';
 import { MenuOutlined } from '@ant-design/icons';
-import { Dropdown, Input, Menu } from 'antd';
+import { Dropdown, Input } from 'antd';
 import React, { useMemo } from 'react';
 
 interface IProps {