From e376841ecd38bbeec5745e53c9fe850c1951dd9a Mon Sep 17 00:00:00 2001
From: ZackYoung <zackyoungh@163.com>
Date: Tue, 27 Aug 2024 16:34:57 +0800
Subject: [PATCH] [Optimize][Web]Optimize some web layouts to make them more
 user-friendly when displayed on small screens (#3749)

Co-authored-by: zackyoungh <zackyoungh@users.noreply.github.com>
---
 dinky-web/src/global.less                              |  4 ++++
 .../JobDetail/JobOverview/components/JobDesc.tsx       |  2 +-
 .../pages/DevOps/JobList/components/Overview/index.tsx |  4 ++--
 .../src/pages/RegCenter/Alert/AlertGroup/index.tsx     |  1 +
 .../components/AlertInstanceList/index.tsx             |  1 +
 .../components/ConfigurationList/index.tsx             |  1 +
 .../Cluster/Instance/components/InstanceList/index.tsx | 10 ++++++----
 .../DataSource/components/DataSourceList/index.tsx     |  1 +
 8 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/dinky-web/src/global.less b/dinky-web/src/global.less
index 0ee44e74b2..98ddc22951 100644
--- a/dinky-web/src/global.less
+++ b/dinky-web/src/global.less
@@ -697,3 +697,7 @@ span .mtkb {
     border-radius: 50%;
   }
 }
+
+.ant-page-header-breadcrumb {
+  padding-left: 25px;
+}
diff --git a/dinky-web/src/pages/DevOps/JobDetail/JobOverview/components/JobDesc.tsx b/dinky-web/src/pages/DevOps/JobDetail/JobOverview/components/JobDesc.tsx
index bc2d52e5a6..e1fbd19fd3 100644
--- a/dinky-web/src/pages/DevOps/JobDetail/JobOverview/components/JobDesc.tsx
+++ b/dinky-web/src/pages/DevOps/JobDetail/JobOverview/components/JobDesc.tsx
@@ -75,7 +75,7 @@ const JobDesc = (props: JobProps) => {
   return (
     <>
       <ProCard>
-        <Descriptions bordered size='small' column={5}>
+        <Descriptions bordered size='small' column={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 5 }}>
           <Descriptions.Item label={l('global.table.status')}>
             <StatusTag status={jobDetail?.instance?.status} />
           </Descriptions.Item>
diff --git a/dinky-web/src/pages/DevOps/JobList/components/Overview/index.tsx b/dinky-web/src/pages/DevOps/JobList/components/Overview/index.tsx
index 1c6994e0c3..13322d73ee 100644
--- a/dinky-web/src/pages/DevOps/JobList/components/Overview/index.tsx
+++ b/dinky-web/src/pages/DevOps/JobList/components/Overview/index.tsx
@@ -47,7 +47,7 @@ const JobOverview = (props: any) => {
 
   return (
     <Row gutter={[16, 8]}>
-      <Col span={5}>
+      <Col span={5} xs={24} xxl={7}>
         <ProCard colSpan={'20%'} boxShadow={true}>
           <StatisticsCard
             title={l('devops.joblist.status.all')}
@@ -70,7 +70,7 @@ const JobOverview = (props: any) => {
           />
         </ProCard>
       </Col>
-      <Col span={19}>
+      <Col span={19} xs={24} xxl={17}>
         <ProCard layout='center' boxShadow={true}>
           <StatisticsCard
             title={l('devops.joblist.status.running')}
diff --git a/dinky-web/src/pages/RegCenter/Alert/AlertGroup/index.tsx b/dinky-web/src/pages/RegCenter/Alert/AlertGroup/index.tsx
index 3ad6848be8..279cb5a47a 100644
--- a/dinky-web/src/pages/RegCenter/Alert/AlertGroup/index.tsx
+++ b/dinky-web/src/pages/RegCenter/Alert/AlertGroup/index.tsx
@@ -256,6 +256,7 @@ const AlertGroupTableList: React.FC = (props: any) => {
           headerTitle={l('rc.ag.management')}
           toolBarRender={renderToolBar()}
           dataSource={renderDataSource}
+          grid={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 5 }}
         />
 
         <AlertGroupForm
diff --git a/dinky-web/src/pages/RegCenter/Alert/AlertInstance/components/AlertInstanceList/index.tsx b/dinky-web/src/pages/RegCenter/Alert/AlertInstance/components/AlertInstanceList/index.tsx
index 171039997d..baae203d16 100644
--- a/dinky-web/src/pages/RegCenter/Alert/AlertInstance/components/AlertInstanceList/index.tsx
+++ b/dinky-web/src/pages/RegCenter/Alert/AlertInstance/components/AlertInstanceList/index.tsx
@@ -262,6 +262,7 @@ const AlertInstanceList: React.FC = () => {
         headerTitle={l('rc.ai.management')}
         toolBarRender={renderToolBar()}
         dataSource={renderDataSource}
+        grid={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 5 }}
       />
 
       {/* added */}
diff --git a/dinky-web/src/pages/RegCenter/Cluster/Configuration/components/ConfigurationList/index.tsx b/dinky-web/src/pages/RegCenter/Cluster/Configuration/components/ConfigurationList/index.tsx
index 87e1f9be36..e722060099 100644
--- a/dinky-web/src/pages/RegCenter/Cluster/Configuration/components/ConfigurationList/index.tsx
+++ b/dinky-web/src/pages/RegCenter/Cluster/Configuration/components/ConfigurationList/index.tsx
@@ -301,6 +301,7 @@ export default () => {
         actionRef={actionRef}
         headerTitle={l('rc.cc.management')}
         toolBarRender={toolBarRender}
+        grid={{ xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 4 }}
         dataSource={renderData(clusterConfigState.configList)}
       />
 
diff --git a/dinky-web/src/pages/RegCenter/Cluster/Instance/components/InstanceList/index.tsx b/dinky-web/src/pages/RegCenter/Cluster/Instance/components/InstanceList/index.tsx
index cd8509bfc6..9372f1bf95 100644
--- a/dinky-web/src/pages/RegCenter/Cluster/Instance/components/InstanceList/index.tsx
+++ b/dinky-web/src/pages/RegCenter/Cluster/Instance/components/InstanceList/index.tsx
@@ -34,7 +34,7 @@ import {
   handleRemoveById,
   updateDataByParam
 } from '@/services/BusinessCrud';
-import { PROTABLE_OPTIONS_PUBLIC, PRO_LIST_CARD_OPTIONS } from '@/services/constants';
+import { PRO_LIST_CARD_OPTIONS, PROTABLE_OPTIONS_PUBLIC } from '@/services/constants';
 import { API_CONSTANTS } from '@/services/endpoints';
 import { PermissionConstants } from '@/types/Public/constants';
 import { Cluster } from '@/types/RegCenter/data.d';
@@ -319,8 +319,10 @@ export default () => {
           }
         >
           <Card
-            headStyle={{ minHeight: '10px' }}
-            bodyStyle={{ width: '100%', padding: '10px 4px' }}
+            styles={{
+              header: { minHeight: '10px' },
+              body: { width: '100%', padding: '10px 4px' }
+            }}
             className={'card-list-item'}
             key={item.id}
             hoverable
@@ -351,7 +353,7 @@ export default () => {
         toolBarRender={toolBarRender}
         {...PROTABLE_OPTIONS_PUBLIC}
         {...(PRO_LIST_CARD_OPTIONS as any)}
-        grid={{ gutter: 24, column: 4 }}
+        grid={{ gutter: 24, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }}
         pagination={{ size: 'small', defaultPageSize: 12, hideOnSinglePage: true }}
         dataSource={data}
         loading={loading}
diff --git a/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceList/index.tsx b/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceList/index.tsx
index 977b1e7e10..d92ab36ecb 100644
--- a/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceList/index.tsx
+++ b/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceList/index.tsx
@@ -295,6 +295,7 @@ const DataSourceTable: React.FC<connect & StateType> = (props) => {
         headerTitle={l('rc.ds.management')}
         toolBarRender={renderToolBar}
         dataSource={renderDataSource}
+        grid={{ xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }}
       />
 
       {/* added */}