[Web]Optimized the new UI (#3904)

Co-authored-by: gaoyan1998 <gaoyan1998@users.noreply.github.com>
DataLinkDC · Nov 12, 2024 · c8c087d · c8c087d
1 parent 11630fc
commit c8c087d
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 76 deletions.
diff --git a/dinky-web/src/locales/en-US/pages.ts b/dinky-web/src/locales/en-US/pages.ts
@@ -509,7 +509,8 @@ export default {
   'pages.datastudio.label.execConfig.maxrow': 'Maximum number of rows',
   'pages.datastudio.label.execConfig.maxrow.tip': 'The maximum number of rows of preview data',
   'pages.datastudio.label.execConfig.mocksink': 'SinkMock',
-  'pages.datastudio.label.execConfig.mocksink.tip': 'Mock the SinkFunction, result will not be written to the production environment during debugging, but can preview through dinky',
+  'pages.datastudio.label.execConfig.mocksink.tip':
+    'Mock the SinkFunction, result will not be written to the production environment during debugging, but can preview through dinky',
   'pages.datastudio.label.jobConfig': 'Job Config',
   'pages.datastudio.label.jobConfig.addConfig': 'Add Config item',
   'pages.datastudio.label.jobConfig.addConfig.params': 'parameters',

diff --git a/dinky-web/src/locales/zh-CN/pages.ts b/dinky-web/src/locales/zh-CN/pages.ts
@@ -454,7 +454,8 @@ export default {
   'pages.datastudio.label.execConfig.maxrow': '最大行数',
   'pages.datastudio.label.execConfig.maxrow.tip': '预览数据的最大行数',
   'pages.datastudio.label.execConfig.mocksink': '开启SinkMock',
-  'pages.datastudio.label.execConfig.mocksink.tip': '将SinkFunction进行Mock，调试过程中不会向线上环境执行写入，但可以通过dinky预览Sink结果',
+  'pages.datastudio.label.execConfig.mocksink.tip':
+    '将SinkFunction进行Mock，调试过程中不会向线上环境执行写入，但可以通过dinky预览Sink结果',
   'pages.datastudio.label.jobConfig': '作业配置',
   'pages.datastudio.label.jobConfig.addConfig': '添加配置项',
   'pages.datastudio.label.jobConfig.addConfig.params': '参数',

diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx
@@ -18,7 +18,8 @@
  */
 
 import {
-  assert, convertMockResultToList,
+  assert,
+  convertMockResultToList,
   getCurrentData,
   getCurrentTab,
   isDataStudioTabsItemType,

diff --git a/dinky-web/src/pages/DataStudio/RightContainer/PreViewConfig/FlinkSql/index.tsx b/dinky-web/src/pages/DataStudio/RightContainer/PreViewConfig/FlinkSql/index.tsx
@@ -83,13 +83,13 @@ const ExecuteConfigFlinkSql = (props: any) => {
           />
           <ProFormSwitch
             label={l('pages.datastudio.label.execConfig.mocksink')}
-            name= 'mockSinkFunction'
+            name='mockSinkFunction'
             tooltip={{
               title: l('pages.datastudio.label.execConfig.mocksink.tip'),
               icon: <InfoCircleOutlined />
             }}
             {...SWITCH_OPTIONS()}
-            />
+          />
         </ProFormGroup>
         <ProFormGroup>
           <ProFormDigit

diff --git a/dinky-web/src/pages/DataStudio/function.tsx b/dinky-web/src/pages/DataStudio/function.tsx
@@ -29,14 +29,14 @@ import {
   TabsPageType,
   TaskDataType
 } from '@/pages/DataStudio/model';
-import {CONFIG_MODEL_ASYNC} from '@/pages/SettingCenter/GlobalSetting/model';
-import {DIALECT} from '@/services/constants';
-import {UserBaseInfo} from '@/types/AuthCenter/data.d';
-import {Cluster, DataSources} from '@/types/RegCenter/data';
-import {TaskOwnerLockingStrategy} from '@/types/SettingCenter/data.d';
-import {l} from '@/utils/intl';
-import {Dispatch} from '@@/plugin-dva/types';
-import {Col, Row} from 'antd';
+import { CONFIG_MODEL_ASYNC } from '@/pages/SettingCenter/GlobalSetting/model';
+import { DIALECT } from '@/services/constants';
+import { UserBaseInfo } from '@/types/AuthCenter/data.d';
+import { Cluster, DataSources } from '@/types/RegCenter/data';
+import { TaskOwnerLockingStrategy } from '@/types/SettingCenter/data.d';
+import { l } from '@/utils/intl';
+import { Dispatch } from '@@/plugin-dva/types';
+import { Col, Row } from 'antd';
 
 export const mapDispatchToProps = (dispatch: Dispatch) => ({
   updateToolContentHeight: (key: number) =>
@@ -246,9 +246,9 @@ export const getFooterValue = (panes: any, activeKey: string): Partial<FooterTyp
   const currentTab = getCurrentTab(panes, activeKey);
   return isDataStudioTabsItemType(currentTab)
     ? {
-      codePosition: [1, 1],
-      codeType: currentTab.subType
-    }
+        codePosition: [1, 1],
+        codeType: currentTab.subType
+      }
     : {};
 };
 
@@ -397,7 +397,7 @@ export const isEmpty = (value: any): boolean => {
  * 转换多表的SelectResult
  * @param data
  */
-export const convertMockResultToList = (data: any): any [] => {
+export const convertMockResultToList = (data: any): any[] => {
   const rowDataResults: any[] = [];
   // 对于每个MockResult的Column，一个元素代表一个表信息
   data.columns.forEach((columnString: string) => {
@@ -411,7 +411,7 @@ export const convertMockResultToList = (data: any): any [] => {
     const columnJsonInfo = JSON.parse(columnString);
     // 提取column信息
     if (columnJsonInfo['dinkySinkResultColumnIdentifier']) {
-      columnArr = columnJsonInfo['dinkySinkResultColumnIdentifier']
+      columnArr = columnJsonInfo['dinkySinkResultColumnIdentifier'];
     }
     // 提取表名
     if (columnJsonInfo['dinkySinkResultTableIdentifier']) {
@@ -422,14 +422,16 @@ export const convertMockResultToList = (data: any): any [] => {
       if (rowDataElement.dinkySinkResultTableIdentifier == tableName) {
         rowDataArr.push(rowDataElement);
       }
-    })
+    });
     // 构建constant对象
     const rowDataResult = {
-      'tableName': tableName, columns: columnArr, rowData: rowDataArr
+      tableName: tableName,
+      columns: columnArr,
+      rowData: rowDataArr
     };
     rowDataResults.push(rowDataResult);
   });
 
-  console.log(rowDataResults)
+  console.log(rowDataResults);
   return rowDataResults;
 };
diff --git a/dinky-web/src/pages/DataStudioNew/CenterTabContent/TaskConfig/index.tsx b/dinky-web/src/pages/DataStudioNew/CenterTabContent/TaskConfig/index.tsx
@@ -114,13 +114,13 @@ export default (props: {
             />
             <ProFormSwitch
               label={l('pages.datastudio.label.execConfig.mocksink')}
-              name= 'mockSinkFunction'
+              name='mockSinkFunction'
               tooltip={{
                 title: l('pages.datastudio.label.execConfig.mocksink.tip'),
                 icon: <InfoCircleOutlined />
               }}
               {...SWITCH_OPTIONS()}
-             />
+            />
           </>
         );
       }

diff --git a/dinky-web/src/pages/DataStudioNew/Toolbar/Service/Result/index.tsx b/dinky-web/src/pages/DataStudioNew/Toolbar/Service/Result/index.tsx
@@ -63,12 +63,10 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
   const [searchText, setSearchText] = useState('');
   const [searchedColumn, setSearchedColumn] = useState('');
   const searchInput = useRef<InputRef>(null);
-
   useEffect(() => {
-    if (actionType === DataStudioActionType.TASK_PREVIEW_RESULT
-      || actionType === DataStudioActionType.TASK_RUN_DEBUG) {
+    if (actionType === DataStudioActionType.TASK_PREVIEW_RESULT) {
       if (data.mockSinkResult == true) {
-        setDataList(convertMockResultToList({ columns: params.columns, rowData: params.rowData }))
+        setDataList(convertMockResultToList({ columns: params.columns, rowData: params.rowData }));
       } else {
         setData({ columns: params.columns, rowData: params.rowData });
       }
@@ -79,7 +77,6 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
     clearFilters();
     setSearchText('');
   };
-
   const handleSearch = (
     selectedKeys: string[],
     confirm: (param?: FilterConfirmProps) => void,
@@ -94,8 +91,7 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
       setSearchedColumn('');
     }
   };
-
-  const convertMockResultToList = (data: any): any [] => {
+  const convertMockResultToList = (data: any): any[] => {
     const rowDataResults: any[] = [];
     // 对于每个MockResult的Column，一个元素代表一个表信息
     data.columns.forEach((columnString: string) => {
@@ -109,7 +105,7 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
       const columnJsonInfo = JSON.parse(columnString);
       // 提取column信息
       if (columnJsonInfo['dinkySinkResultColumnIdentifier']) {
-        columnArr = columnJsonInfo['dinkySinkResultColumnIdentifier']
+        columnArr = columnJsonInfo['dinkySinkResultColumnIdentifier'];
       }
       // 提取表名
       if (columnJsonInfo['dinkySinkResultTableIdentifier']) {
@@ -120,16 +116,18 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
         if (rowDataElement.dinkySinkResultTableIdentifier == tableName) {
           rowDataArr.push(rowDataElement);
         }
-      })
+      });
       // 构建constant对象
       const rowDataResult = {
-        'tableName': tableName, columns: columnArr, rowData: rowDataArr
+        tableName: tableName,
+        columns: columnArr,
+        rowData: rowDataArr
       };
       rowDataResults.push(rowDataResult);
     });
+
     return rowDataResults;
   };
-
   const getColumnSearchProps = (dataIndex: string): ColumnType<Data> => ({
     filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
       <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
@@ -198,13 +196,13 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
       const data = tableData.data;
       if (tableData.success && data?.success) {
         if (data.mockSinkResult == true) {
-          setDataList(convertMockResultToList(data))
+          setDataList(convertMockResultToList(data));
         } else {
           setData(data);
         }
       } else {
         setData({});
-        setDataList([])
+        setDataList([]);
       }
     }
 
@@ -249,7 +247,6 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
       </>
     );
   };
-
   const renderDownloadButton = () => {
     if (data.columns) {
       const _utf = '\uFEFF';
@@ -261,7 +258,6 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
     }
     return undefined;
   };
-
   const renderAVA = () => {
     return (
       <Button
@@ -293,9 +289,7 @@ export default (props: { taskId: number; action: any; dialect: string }) => {
       </>
     );
   };
-
   const handleCloseAva = useCallback(() => setOpenAVA(false), []);
-
   return (
     <div style={{ width: '100%', paddingInline: 10 }}>
       <Flex justify={'right'}>

diff --git a/dinky-web/src/pages/DataStudioNew/Toolbar/index.less b/dinky-web/src/pages/DataStudioNew/Toolbar/index.less
@@ -1,4 +1,5 @@
 @toolbar-icon-container-background-color: var(--btn-background-color);
+@toolbar-icon-container-hover-color: var(--second-color);
 @toolbar-icon-container-color: var(--btn-color);
 
 /*工具栏样式*/
@@ -16,7 +17,8 @@
 
 /* 工具栏 图标样式*/
 .toolbar-icon {
-  font-size: 20px;
+  //这里定义font-size没有用，根据高度固定的
+  //font-size: 1px;
 }
 
 /* 工具栏 图标容器样式*/
@@ -28,12 +30,12 @@
 
 .toolbar-icon-container:hover {
   color: #1f1f1f;
-  border-radius: 50%;
-  background-color: @toolbar-icon-container-background-color;
+  border-radius: 15%;
+  background-color: @toolbar-icon-container-hover-color;
 }
 
 .toolbar-icon-container-select {
-  border-radius: 0 !important;
+  border-radius: 15%;
   color: var(--btn-active-color) !important;
   background-color: @toolbar-icon-container-background-color !important;
 }

diff --git a/dinky-web/src/pages/DataStudioNew/Toolbar/index.tsx b/dinky-web/src/pages/DataStudioNew/Toolbar/index.tsx
@@ -81,36 +81,38 @@ export default React.memo((props: ToolbarProp) => {
             className += ' toolbar-icon-container-open';
           }
           return (
-            <Tooltip title={item.title()} placement={'right'} arrow={false} key={item.key}>
-              <Row
-                id={item.key}
-                className={className}
-                style={{ height }}
-                align={'middle'}
-                justify={'center'}
-                key={item.key}
-                onClick={() => {
-                  onClick(item);
-                }}
-              >
-                <span
-                  style={{
-                    width: '100%',
-                    textAlign: 'center'
+            <div style={{ padding: '5px 5px 0' }}>
+              <Tooltip title={item.title()} placement={'right'} arrow={false} key={item.key}>
+                <Row
+                  id={item.key}
+                  className={className}
+                  style={{ height }}
+                  align={'middle'}
+                  justify={'center'}
+                  key={item.key}
+                  onClick={() => {
+                    onClick(item);
                   }}
                 >
-                  {React.cloneElement(item.icon, {
-                    className: 'toolbar-icon',
-                    style: { fontSize: height === 60 ? 25 : 20 }
-                  })}
-                </span>
-                {showDesc && (
-                  <Typography.Paragraph className={'toolbar-desc'}>
-                    {item.title()}
-                  </Typography.Paragraph>
-                )}
-              </Row>
-            </Tooltip>
+                  <span
+                    style={{
+                      width: '100%',
+                      textAlign: 'center'
+                    }}
+                  >
+                    {React.cloneElement(item.icon, {
+                      className: 'toolbar-icon',
+                      style: { fontSize: height === 60 ? 23 : 18 }
+                    })}
+                  </span>
+                  {showDesc && (
+                    <Typography.Paragraph className={'toolbar-desc'}>
+                      {item.title()}
+                    </Typography.Paragraph>
+                  )}
+                </Row>
+              </Tooltip>
+            </div>
           );
         })}
       </ReactSortable>

diff --git a/dinky-web/src/pages/DataStudioNew/css/index.less b/dinky-web/src/pages/DataStudioNew/css/index.less
@@ -9,7 +9,7 @@
   --btn-background-color: #e6f7ff;
   --border-color: #dfe1e4;
   --text-color: #424242;
-  --panel-extra-btn-color: red;
+  --panel-extra-btn-color: #000000;
   --scroll-bg-color: #daecff;
 }
 

diff --git a/dinky-web/src/pages/DataStudioNew/index.less b/dinky-web/src/pages/DataStudioNew/index.less
@@ -5,6 +5,7 @@
   display: inline-block;
   width: 18px;
   height: 24px;
+  margin-right: 3px;
   text-align: center;
   opacity: 0.3;
   transition: all 0.25s ease-in-out;
@@ -30,10 +31,10 @@
 
 // 设置分隔面板线的宽度和长度
 .dock-hbox > .dock-divider {
-  flex: 0 0 2px;
+  flex: 0 0 1px;
 }
 .dock-vbox > .dock-divider {
-  flex: 0 0 2px;
+  flex: 0 0 1px;
 }
 
 // keep-alive div设置成满屏

diff --git a/dinky-web/src/pages/DataStudioNew/model.tsx b/dinky-web/src/pages/DataStudioNew/model.tsx
@@ -266,7 +266,7 @@ const StudioModel: StudioModelType = {
       }
     },
     theme: {
-      compact: true
+      compact: false
     },
     centerContent: {
       tabs: [],