[Feature][UI Next][V1.0.0-Alpha] Adjust all table column widths in th… (#9062)

* [Feature][UI Next][V1.0.0-Alpha] Adjust all table column widths in this project.

* [Fix][UI Next][V1.0.0-Alpha] Fix workflow delete handle (#9057)

* [Fix][UI Next][V1.0.0-Alpha] User Manage Queue display error (#9060)

* fix package bug (#9051)

* [Fix][UI Next][V1.0.0-Alpha] Fix the monitoring center does not support multiple worker. (#9061)

* [Fix][UI Next][V1.0.0-Alpha] Remove the unused Ref.

* [Fix-9025] [UI Next] Rectify this issue about failing to save a process when the user is ordinary user. (#9063)

* modify the back-edn api

* fix this issue

* [Fix][UI Next][V1.0.0-Alpha]Change the column-config file name to column-width-config and COLUMN_CONFIG to COLUMN_WIDTH_CONFIG.

* [Bug][UI Next] Fix style errors (#9067)

* [Feature][UI Next][V1.0.0-Alpha] Adjust all table column widths in this project.

* [Fix][UI Next][V1.0.0-Alpha] Remove the unused Ref.

* [Fix][UI Next][V1.0.0-Alpha]Change the column-config file name to column-width-config and COLUMN_CONFIG to COLUMN_WIDTH_CONFIG.

Co-authored-by: Devosend <devosend@gmail.com>
Co-authored-by: zixi0825 <sunzhaohe0825@gmail.com>
Co-authored-by: songjianet <1778651752@qq.com>
Co-authored-by: calvin <jianghuachinacom@163.com>
Co-authored-by: labbomb <739955946@qq.com>

dolphinscheduler-ui-next/src/utils/column-width-config.ts

@@ -0,0 +1,94 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { isNumber, sumBy } from 'lodash'
+import type {
+  TableColumns,
+  CommonColumnInfo
+} from 'naive-ui/es/data-table/src/interface'
+
+export const COLUMN_WIDTH_CONFIG = {
+  selection: {
+    width: 50
+  },
+  index: {
+    width: 50
+  },
+  name: {
+    width: 200,
+    ellipsis: {
+      tooltip: true
+    }
+  },
+  state: {
+    width: 120
+  },
+  type: {
+    width: 120
+  },
+  version: {
+    width: 80
+  },
+  time: {
+    width: 180
+  },
+  operation: (number: number): CommonColumnInfo => ({
+    fixed: 'right',
+    width: Math.max(30 * number + 12 * (number - 1) + 24, 100)
+  }),
+  userName: {
+    width: 120,
+    ellipsis: {
+      tooltip: true
+    }
+  },
+  ruleType: {
+    width: 120
+  },
+  note: {
+    width: 180,
+    ellipsis: {
+      tooltip: true
+    }
+  },
+  dryRun: {
+    width: 140
+  },
+  times: {
+    width: 120
+  },
+  duration: {
+    width: 120
+  },
+  yesOrNo: {
+    width: 100,
+    ellipsis: {
+      tooltip: true
+    }
+  },
+  size: {
+    width: 100
+  },
+  tag: {
+    width: 160
+  }
+}
+
+export const calculateTableWidth = (columns: TableColumns) =>
+  sumBy(columns, (column) => (isNumber(column.width) ? column.width : 0))
+
+export const DefaultTableWidth = 1800

dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx

@@ -155,7 +155,11 @@ const TaskResult = defineComponent({
           </NSpace>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable
+            columns={this.columns}
+            data={this.tableData}
+            scrollX={this.tableWidth}
+          />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}

dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts

@@ -20,6 +20,11 @@ import { reactive, ref } from 'vue'
 import { useAsyncState } from '@vueuse/core'
 import { queryExecuteResultListPaging } from '@/service/modules/data-quality'
 import { format } from 'date-fns'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type {
   ResultItem,
   ResultListRes
@@ -31,6 +36,7 @@ export function useTable() {
 
   const variables = reactive({
     columns: [],
+    tableWidth: DefaultTableWidth,
     tableData: [],
     page: ref(1),
     pageSize: ref(10),
@@ -46,15 +52,18 @@ export function useTable() {
       {
         title: '#',
         key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (row: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
       },
       {
         title: t('data_quality.task_result.task_name'),
-        key: 'userName'
+        key: 'userName',
+        ...COLUMN_WIDTH_CONFIG['userName']
       },
       {
         title: t('data_quality.task_result.workflow_instance'),
-        key: 'processInstanceName'
+        key: 'processInstanceName',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('data_quality.task_result.rule_type'),
@@ -69,11 +78,13 @@ export function useTable() {
           } else if (row.ruleType === 3) {
             return t('data_quality.task_result.multi_table_comparison')
           }
-        }
+        },
+        ...COLUMN_WIDTH_CONFIG['ruleType']
       },
       {
         title: t('data_quality.task_result.rule_name'),
-        key: 'ruleName'
+        key: 'ruleName',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('data_quality.task_result.state'),
@@ -86,15 +97,18 @@ export function useTable() {
           } else if (row.state === 2) {
             return t('data_quality.task_result.failure')
           }
-        }
+        },
+        ...COLUMN_WIDTH_CONFIG['state']
       },
       {
         title: t('data_quality.task_result.actual_value'),
-        key: 'statisticsValue'
+        key: 'statisticsValue',
+        width: 140
       },
       {
         title: t('data_quality.task_result.excepted_value'),
-        key: 'comparisonValue'
+        key: 'comparisonValue',
+        width: 140
       },
       {
         title: t('data_quality.task_result.check_type'),
@@ -109,7 +123,8 @@ export function useTable() {
           } else if (row.checkType === 3) {
             return t('data_quality.task_result.expected_and_actual_or_expected')
           }
-        }
+        },
+        ...COLUMN_WIDTH_CONFIG['type']
       },
       {
         title: t('data_quality.task_result.operator'),
@@ -128,40 +143,51 @@ export function useTable() {
           } else if (row.operator === 5) {
             return '!='
           }
-        }
+        },
+        ...COLUMN_WIDTH_CONFIG['userName']
       },
       {
         title: t('data_quality.task_result.threshold'),
-        key: 'threshold'
+        key: 'threshold',
+        width: 120
       },
       {
         title: t('data_quality.task_result.failure_strategy'),
-        key: 'failureStrategy'
+        key: 'failureStrategy',
+        width: 150
       },
       {
         title: t('data_quality.task_result.excepted_value_type'),
-        key: 'comparisonTypeName'
+        key: 'comparisonTypeName',
+        width: 200
       },
       {
         title: t('data_quality.task_result.error_output_path'),
         key: 'errorOutputPath',
         render: (row: ResultItem) => {
           return row.errorOutputPath ? row : '-'
-        }
+        },
+        width: 200
       },
       {
         title: t('data_quality.task_result.username'),
-        key: 'userName'
+        key: 'userName',
+        ...COLUMN_WIDTH_CONFIG['userName']
       },
       {
         title: t('data_quality.task_result.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('data_quality.task_result.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       }
     ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
   }
 
   const getTableData = (params: any) => {

dolphinscheduler-ui-next/src/views/datasource/list/detail.tsx

@@ -141,7 +141,7 @@ const DetailModal = defineComponent({
                 rules={rules}
                 ref='detailFormRef'
                 require-mark-placement='left'
-                label-align='right'
+                label-align='left'
               >
                 <NFormItem
                   label={t('datasource.datasource')}

dolphinscheduler-ui-next/src/views/datasource/list/index.tsx

@@ -31,6 +31,7 @@ import { useI18n } from 'vue-i18n'
 import { useColumns } from './use-columns'
 import { useTable } from './use-table'
 import styles from './index.module.scss'
+import type { TableColumns } from './types'
 
 const list = defineComponent({
   name: 'list',
@@ -38,7 +39,7 @@ const list = defineComponent({
     const { t } = useI18n()
     const showDetailModal = ref(false)
     const selectId = ref()
-    const columns = ref()
+    const columns = ref({ columns: [] as TableColumns, tableWidth: 0 })
     const { data, changePage, changePageSize, deleteRecord, updateList } =
       useTable()
 
@@ -131,10 +132,11 @@ const list = defineComponent({
         <Card title='' class={styles['mt-8']}>
           <NDataTable
             row-class-name='data-source-items'
-            columns={columns}
+            columns={columns.columns}
             data={list}
             loading={loading}
             striped
+            scrollX={columns.tableWidth}
           />
           <NPagination
             page={page}

dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts

@@ -28,33 +28,43 @@ import {
 import { EditOutlined, DeleteOutlined } from '@vicons/antd'
 import JsonHighlight from './json-highlight'
 import ButtonLink from '@/components/button-link'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type { TableColumns } from './types'
 
 export function useColumns(onCallback: Function) {
   const { t } = useI18n()
 
-  const getColumns = (): TableColumns => {
+  const getColumns = (): { columns: TableColumns; tableWidth: number } => {
-    return [
+    const columns = [
       {
         title: '#',
         key: 'index',
-        render: (rowData, rowIndex) => rowIndex + 1
+        render: (unused, rowIndex) => rowIndex + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
       },
       {
         title: t('datasource.datasource_name'),
-        key: 'name'
+        key: 'name',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('datasource.datasource_user_name'),
-        key: 'userName'
+        key: 'userName',
+        ...COLUMN_WIDTH_CONFIG['userName']
       },
       {
         title: t('datasource.datasource_type'),
-        key: 'type'
+        key: 'type',
+        width: 180
       },
       {
         title: t('datasource.datasource_parameter'),
         key: 'parameter',
+        width: 180,
         render: (rowData) => {
           return h(
             NPopover,
@@ -71,20 +81,23 @@ export function useColumns(onCallback: Function) {
       },
       {
         title: t('datasource.description'),
-        key: 'note'
+        key: 'note',
+        ...COLUMN_WIDTH_CONFIG['note']
       },
       {
         title: t('datasource.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('datasource.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('datasource.operation'),
         key: 'operation',
-        width: 150,
+        ...COLUMN_WIDTH_CONFIG['operation'](2),
         render: (rowData) => {
           return h(NSpace, null, {
             default: () => [
@@ -139,7 +152,12 @@ export function useColumns(onCallback: Function) {
           })
         }
       }
-    ]
+    ] as TableColumns
+
+    return {
+      columns,
+      tableWidth: calculateTableWidth(columns) || DefaultTableWidth
+    }
   }
 
   return {

dolphinscheduler-ui-next/src/views/projects/list/index.tsx

@@ -126,6 +126,7 @@ const list = defineComponent({
           <NDataTable
             columns={this.columns}
             data={this.tableData}
+            scrollX={this.tableWidth}
             row-class-name='items'
           />
           <div class={styles.pagination}>

dolphinscheduler-ui-next/src/views/projects/list/use-table.ts

@@ -32,6 +32,11 @@ import {
   NSpace,
   NTooltip
 } from 'naive-ui'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type { Router } from 'vue-router'
 import type { ProjectRes } from '@/service/modules/projects/types'
 import { DeleteOutlined, EditOutlined } from '@vicons/antd'
@@ -64,12 +69,14 @@ export function useTable() {
       {
         title: '#',
         key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (unused: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
       },
       {
         title: t('project.list.project_name'),
         key: 'name',
         className: 'project-name',
+        ...COLUMN_WIDTH_CONFIG['name'],
         render: (row: { code: string; name: any }) =>
           h(
             NEllipsis,
@@ -89,18 +96,46 @@ export function useTable() {
             }
           )
       },
-      { title: t('project.list.owned_users'), key: 'userName' },
+      {
-      { title: t('project.list.workflow_define_count'), key: 'defCount' },
+        title: t('project.list.owned_users'),
+        key: 'userName',
+        ...COLUMN_WIDTH_CONFIG['userName']
+      },
+      {
+        title: t('project.list.workflow_define_count'),
+        key: 'defCount',
+        width: 120,
+        ellipsis: {
+          tooltip: true
+        }
+      },
       {
         title: t('project.list.process_instance_running_count'),
-        key: 'instRunningCount'
+        key: 'instRunningCount',
+        width: 120,
+        ellipsis: {
+          tooltip: true
+        }
+      },
+      {
+        title: t('project.list.description'),
+        key: 'description',
+        ...COLUMN_WIDTH_CONFIG['note']
+      },
+      {
+        title: t('project.list.create_time'),
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
+      },
+      {
+        title: t('project.list.update_time'),
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
-      { title: t('project.list.description'), key: 'description' },
-      { title: t('project.list.create_time'), key: 'createTime' },
-      { title: t('project.list.update_time'), key: 'updateTime' },
       {
         title: t('project.list.operation'),
         key: 'actions',
+        ...COLUMN_WIDTH_CONFIG['operation'](2),
         render(row: any) {
           return h(NSpace, null, {
             default: () => [
@@ -168,10 +203,14 @@ export function useTable() {
         }
       }
     ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
   }
 
   const variables = reactive({
     columns: [],
+    tableWidth: DefaultTableWidth,
     tableData: [],
     page: ref(1),
     pageSize: ref(10),

dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx

@@ -162,7 +162,11 @@ const TaskDefinition = defineComponent({
           </div>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable
+            columns={this.columns}
+            data={this.tableData}
+            scrollX={this.tableWidth}
+          />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}

dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts

@@ -31,6 +31,11 @@ import {
   deleteTaskDefinition
 } from '@/service/modules/task-definition'
 import { useRoute } from 'vue-router'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type {
   TaskDefinitionItem,
   TaskDefinitionRes
@@ -47,7 +52,8 @@ export function useTable(onEdit: Function) {
       {
         title: '#',
         key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (row: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
       },
       {
         title: t('project.task.task_name'),
@@ -59,40 +65,41 @@ export function useTable(onEdit: Function) {
               onClick: () => void onEdit(row, true)
             },
             { default: () => row.taskName }
-          )
+          ),
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('project.task.workflow_name'),
-        key: 'processDefinitionName'
+        key: 'processDefinitionName',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('project.task.workflow_state'),
         key: 'processReleaseState',
         render: (row: any) => {
           if (row.processReleaseState === 'OFFLINE') {
-            return h(
+            return h(NTag, { type: 'error', size: 'small' }, () =>
-              NTag,
-              { type: 'error', size: 'small' },
               t('project.task.offline')
             )
           } else if (row.processReleaseState === 'ONLINE') {
-            return h(
+            return h(NTag, { type: 'info', size: 'small' }, () =>
-              NTag,
-              { type: 'info', size: 'small' },
               t('project.task.online')
             )
           }
-        }
+        },
+        ...COLUMN_WIDTH_CONFIG['state']
       },
       {
         title: t('project.task.task_type'),
-        key: 'taskType'
+        key: 'taskType',
+        ...COLUMN_WIDTH_CONFIG['type']
       },
       {
         title: t('project.task.version'),
         key: 'taskVersion',
         render: (row: TaskDefinitionItem) =>
-          h('span', null, 'v' + row.taskVersion)
+          h('span', null, 'v' + row.taskVersion),
+        ...COLUMN_WIDTH_CONFIG['version']
       },
       {
         title: t('project.task.upstream_tasks'),
@@ -113,19 +120,23 @@ export function useTable(onEdit: Function) {
                       )
                     })
                 })
-          )
+          ),
+        width: 140
       },
       {
         title: t('project.task.create_time'),
-        key: 'taskCreateTime'
+        key: 'taskCreateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('project.task.update_time'),
-        key: 'taskUpdateTime'
+        key: 'taskUpdateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('project.task.operation'),
         key: 'operation',
+        ...COLUMN_WIDTH_CONFIG['operation'](4),
         render(row: any) {
           return h(NSpace, null, {
             default: () => [
@@ -251,10 +262,14 @@ export function useTable(onEdit: Function) {
         }
       }
     ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
   }
 
   const variables = reactive({
     columns: [],
+    tableWidth: DefaultTableWidth,
     tableData: [],
     page: ref(1),
     pageSize: ref(10),

dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx

@@ -185,7 +185,7 @@ const TaskInstance = defineComponent({
           <NDataTable
             columns={this.columns}
             data={this.tableData}
-            scrollX={1800}
+            scrollX={this.tableWidth}
           />
           <div class={styles.pagination}>
             <NPagination

dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts

@@ -33,6 +33,11 @@ import {
 import { format } from 'date-fns'
 import { useRoute, useRouter } from 'vue-router'
 import { parseTime, tasksState } from '@/utils/common'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type { Router, TaskInstancesRes, IRecord, ITaskState } from './types'
 
 export function useTable() {
@@ -44,6 +49,7 @@ export function useTable() {
 
   const variables = reactive({
     columns: [],
+    tableWidth: DefaultTableWidth,
     tableData: [] as IRecord[],
     page: ref(1),
     pageSize: ref(10),
@@ -64,15 +70,18 @@ export function useTable() {
       {
         title: '#',
         key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (row: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
       },
       {
         title: t('project.task.task_name'),
-        key: 'name'
+        key: 'name',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('project.task.workflow_instance'),
         key: 'processInstanceName',
+        ...COLUMN_WIDTH_CONFIG['name'],
         render: (row: {
           processInstanceId: number
           processInstanceName: string
@@ -92,52 +101,61 @@ export function useTable() {
       },
       {
         title: t('project.task.executor'),
-        key: 'executorName'
+        key: 'executorName',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('project.task.node_type'),
-        key: 'taskType'
+        key: 'taskType',
+        ...COLUMN_WIDTH_CONFIG['type']
       },
       {
         title: t('project.task.state'),
         key: 'state',
+        ...COLUMN_WIDTH_CONFIG['state'],
         render: (row: IRecord) => renderStateCell(row.state, t)
       },
       {
         title: t('project.task.submit_time'),
+        ...COLUMN_WIDTH_CONFIG['time'],
         key: 'submitTime'
       },
       {
         title: t('project.task.start_time'),
+        ...COLUMN_WIDTH_CONFIG['time'],
         key: 'startTime'
       },
       {
         title: t('project.task.end_time'),
+        ...COLUMN_WIDTH_CONFIG['time'],
         key: 'endTime'
       },
       {
         title: t('project.task.duration'),
         key: 'duration',
+        ...COLUMN_WIDTH_CONFIG['duration'],
         render: (row: any) => h('span', null, row.duration ? row.duration : '-')
       },
       {
         title: t('project.task.retry_count'),
-        key: 'retryTimes'
+        key: 'retryTimes',
+        ...COLUMN_WIDTH_CONFIG['times']
       },
       {
         title: t('project.task.dry_run_flag'),
         key: 'dryRun',
+        ...COLUMN_WIDTH_CONFIG['dryRun'],
         render: (row: IRecord) => (row.dryRun === 1 ? 'YES' : 'NO')
       },
       {
         title: t('project.task.host'),
-        key: 'host'
+        key: 'host',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('project.task.operation'),
         key: 'operation',
-        width: 150,
+        ...COLUMN_WIDTH_CONFIG['operation'](3),
-        fixed: 'right',
         render(row: any) {
           return h(NSpace, null, {
             default: () => [
@@ -220,6 +238,9 @@ export function useTable() {
         }
       }
     ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
   }
 
   const handleLog = (row: any) => {

dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx

@@ -154,10 +154,10 @@ export default defineComponent({
             columns={this.columns}
             data={this.tableData}
             striped
-            size={'small'}
             class={styles.table}
             v-model:checked-row-keys={this.checkedRowKeys}
             row-class-name='items'
+            scrollX={this.tableWidth}
           />
           <div class={styles.pagination}>
             <NPagination

dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx

@@ -92,6 +92,7 @@ export default defineComponent({
             striped
             size={'small'}
             class={styles.table}
+            scrollX={this.tableWidth}
           />
           <div class={styles.pagination}>
             <NPagination

dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts

@@ -31,11 +31,16 @@ import {
   DeleteOutlined,
   EditOutlined
 } from '@vicons/antd'
-import type { Router } from 'vue-router'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import { format } from 'date-fns-tz'
 import { ISearchParam } from './types'
 import { useTimezoneStore } from '@/store/timezone/timezone'
 import styles from '../index.module.scss'
+import type { Router } from 'vue-router'
 
 export function useTable() {
   const { t } = useI18n()
@@ -45,6 +50,7 @@ export function useTable() {
 
   const variables = reactive({
     columns: [],
+    tableWidth: DefaultTableWidth,
     row: {},
     tableData: [],
     projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
@@ -70,13 +76,13 @@ export function useTable() {
       {
         title: '#',
         key: 'id',
-        width: 50,
+        ...COLUMN_WIDTH_CONFIG['index'],
         render: (row: any, index: number) => index + 1
       },
       {
         title: t('project.workflow.workflow_name'),
         key: 'processDefinitionName',
-        width: 200,
+        ...COLUMN_WIDTH_CONFIG['name'],
         render: (row: any) =>
           h(
             NEllipsis,
@@ -89,24 +95,29 @@ export function useTable() {
       {
         title: t('project.workflow.start_time'),
         key: 'startTime',
+        ...COLUMN_WIDTH_CONFIG['time'],
         render: (row: any) => renderTime(row.startTime)
       },
       {
         title: t('project.workflow.end_time'),
         key: 'endTime',
+        ...COLUMN_WIDTH_CONFIG['time'],
         render: (row: any) => renderTime(row.endTime)
       },
       {
         title: t('project.workflow.crontab'),
-        key: 'crontab'
+        key: 'crontab',
+        width: 140
       },
       {
         title: t('project.workflow.failure_strategy'),
-        key: 'failureStrategy'
+        key: 'failureStrategy',
+        width: 140
       },
       {
         title: t('project.workflow.status'),
         key: 'releaseState',
+        ...COLUMN_WIDTH_CONFIG['state'],
         render: (row: any) =>
           row.releaseState === 'ONLINE'
             ? t('project.workflow.up_line')
@@ -114,16 +125,18 @@ export function useTable() {
       },
       {
         title: t('project.workflow.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('project.workflow.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('project.workflow.operation'),
         key: 'operation',
-        fixed: 'right',
+        ...COLUMN_WIDTH_CONFIG['operation'](3),
         className: styles.operation,
         render: (row: any) => {
           return h(NSpace, null, {
@@ -218,6 +231,9 @@ export function useTable() {
         }
       }
     ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
   }
 
   const handleEdit = (row: any) => {

dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts

@@ -31,10 +31,15 @@ import {
   release
 } from '@/service/modules/process-definition'
 import TableAction from './components/table-action'
-import { IDefinitionParam } from './types'
 import styles from './index.module.scss'
 import { NEllipsis, NTag } from 'naive-ui'
 import ButtonLink from '@/components/button-link'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { IDefinitionParam } from './types'
 
 export function useTable() {
   const { t } = useI18n()
@@ -42,6 +47,7 @@ export function useTable() {
 
   const variables = reactive({
     columns: [],
+    tableWidth: DefaultTableWidth,
     checkedRowKeys: [] as Array<RowKey>,
     row: {},
     tableData: [],
@@ -62,19 +68,20 @@ export function useTable() {
       {
         type: 'selection',
         disabled: (row) => row.releaseState === 'ONLINE',
-        className: 'btn-selected'
+        className: 'btn-selected',
+        ...COLUMN_WIDTH_CONFIG['selection']
       },
       {
         title: '#',
         key: 'id',
-        width: 50,
+        ...COLUMN_WIDTH_CONFIG['index'],
         render: (row, index) => index + 1
       },
       {
         title: t('project.workflow.workflow_name'),
         key: 'name',
-        width: 200,
         className: 'workflow-name',
+        ...COLUMN_WIDTH_CONFIG['name'],
         render: (row) =>
           h(
             NEllipsis,
@@ -99,6 +106,7 @@ export function useTable() {
       {
         title: t('project.workflow.status'),
         key: 'releaseState',
+        ...COLUMN_WIDTH_CONFIG['state'],
         render: (row) =>
           row.releaseState === 'ONLINE'
             ? t('project.workflow.up_line')
@@ -107,28 +115,32 @@ export function useTable() {
       {
         title: t('project.workflow.create_time'),
         key: 'createTime',
-        width: 150
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('project.workflow.update_time'),
         key: 'updateTime',
-        width: 150
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('project.workflow.description'),
-        key: 'description'
+        key: 'description',
+        ...COLUMN_WIDTH_CONFIG['note']
       },
       {
         title: t('project.workflow.create_user'),
-        key: 'userName'
+        key: 'userName',
+        ...COLUMN_WIDTH_CONFIG['userName']
       },
       {
         title: t('project.workflow.modify_user'),
-        key: 'modifyBy'
+        key: 'modifyBy',
+        ...COLUMN_WIDTH_CONFIG['userName']
       },
       {
         title: t('project.workflow.schedule_publish_status'),
         key: 'scheduleReleaseState',
+        ...COLUMN_WIDTH_CONFIG['state'],
         render: (row) => {
           if (row.scheduleReleaseState === 'ONLINE') {
             return h(
@@ -154,8 +166,7 @@ export function useTable() {
       {
         title: t('project.workflow.operation'),
         key: 'operation',
-        width: 360,
+        ...COLUMN_WIDTH_CONFIG['operation'](8.5),
-        fixed: 'right',
         className: styles.operation,
         render: (row) =>
           h(TableAction, {
@@ -173,6 +184,9 @@ export function useTable() {
           })
       }
     ] as TableColumns<any>
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
   }
 
   const editWorkflow = (row: any) => {

dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx

@@ -105,7 +105,7 @@ export default defineComponent({
             striped
             size={'small'}
             class={styles.table}
-            scrollX={1800}
+            scrollX={this.tableWidth}
             v-model:checked-row-keys={this.checkedRowKeys}
             row-class-name='items-workflow-instances'
           />

dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts

@@ -33,6 +33,11 @@ import { runningType } from '@/utils/common'
 import { parseTime } from '@/utils/common'
 import styles from './index.module.scss'
 import { renderStateCell } from '../../task/instance/use-table'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type { Router } from 'vue-router'
 import type { IWorkflowInstance } from '@/service/modules/process-instances/types'
 import type { ICountDownParam } from './types'
@@ -44,6 +49,7 @@ export function useTable() {
 
   const variables = reactive({
     columns: [],
+    tableWidth: DefaultTableWidth,
     checkedRowKeys: [] as Array<RowKey>,
     tableData: [] as Array<IWorkflowInstance>,
     page: ref(1),
@@ -62,18 +68,19 @@ export function useTable() {
     variables.columns = [
       {
         type: 'selection',
-        className: 'btn-selected'
+        className: 'btn-selected',
+        ...COLUMN_WIDTH_CONFIG['selection']
       },
       {
         title: '#',
         key: 'id',
-        width: 50,
+        ...COLUMN_WIDTH_CONFIG['index'],
         render: (rowData: any, rowIndex: number) => rowIndex + 1
       },
       {
         title: t('project.workflow.workflow_name'),
         key: 'name',
-        width: 200,
+        ...COLUMN_WIDTH_CONFIG['name'],
         className: 'workflow-name',
         render: (row: IWorkflowInstance) =>
           h(
@@ -92,12 +99,14 @@ export function useTable() {
       {
         title: t('project.workflow.status'),
         key: 'state',
+        ...COLUMN_WIDTH_CONFIG['state'],
         className: 'workflow-status',
         render: (_row: IWorkflowInstance) => renderStateCell(_row.state, t)
       },
       {
         title: t('project.workflow.run_type'),
         key: 'commandType',
+        width: 160,
         className: 'workflow-run-type',
         render: (_row: IWorkflowInstance) =>
           (
@@ -108,6 +117,7 @@ export function useTable() {
       {
         title: t('project.workflow.scheduling_time'),
         key: 'scheduleTime',
+        ...COLUMN_WIDTH_CONFIG['time'],
         render: (_row: IWorkflowInstance) =>
           _row.scheduleTime
             ? format(parseTime(_row.scheduleTime), 'yyyy-MM-dd HH:mm:ss')
@@ -116,6 +126,7 @@ export function useTable() {
       {
         title: t('project.workflow.start_time'),
         key: 'startTime',
+        ...COLUMN_WIDTH_CONFIG['time'],
         render: (_row: IWorkflowInstance) =>
           _row.startTime
             ? format(parseTime(_row.startTime), 'yyyy-MM-dd HH:mm:ss')
@@ -124,6 +135,7 @@ export function useTable() {
       {
         title: t('project.workflow.end_time'),
         key: 'endTime',
+        ...COLUMN_WIDTH_CONFIG['time'],
         render: (_row: IWorkflowInstance) =>
           _row.endTime
             ? format(parseTime(_row.endTime), 'yyyy-MM-dd HH:mm:ss')
@@ -132,35 +144,40 @@ export function useTable() {
       {
         title: t('project.workflow.duration'),
         key: 'duration',
+        ...COLUMN_WIDTH_CONFIG['duration'],
         render: (_row: IWorkflowInstance) => _row.duration || '-'
       },
       {
         title: t('project.workflow.run_times'),
         key: 'runTimes',
+        ...COLUMN_WIDTH_CONFIG['times'],
         className: 'workflow-run-times'
       },
       {
         title: t('project.workflow.fault_tolerant_sign'),
-        key: 'recovery'
+        key: 'recovery',
+        width: 100
       },
       {
         title: t('project.workflow.dry_run_flag'),
         key: 'dryRun',
+        ...COLUMN_WIDTH_CONFIG['dryRun'],
         render: (_row: IWorkflowInstance) => (_row.dryRun === 1 ? 'YES' : 'NO')
       },
       {
         title: t('project.workflow.executor'),
-        key: 'executorName'
+        key: 'executorName',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('project.workflow.host'),
-        key: 'host'
+        key: 'host',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('project.workflow.operation'),
         key: 'operation',
-        width: 250,
+        ...COLUMN_WIDTH_CONFIG['operation'](6),
-        fixed: 'right',
         className: styles.operation,
         render: (_row: IWorkflowInstance, index: number) =>
           h(TableAction, {
@@ -213,6 +230,9 @@ export function useTable() {
           })
       }
     ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
   }
 
   const getTableData = () => {

dolphinscheduler-ui-next/src/views/resource/file/index.tsx

@@ -196,7 +196,7 @@ export default defineComponent({
         const newDir = dirs.slice(0, index + 1).join('/')
         if (newDir) {
           const id = 0
-          let resource = await queryResourceById(
+          const resource = await queryResourceById(
             {
               id,
               type: 'FILE',
@@ -249,7 +249,10 @@ export default defineComponent({
   },
   render() {
     const { t } = useI18n()
-    const { columnsRef } = useTable(this.handleRenameFile, this.updateList)
+    const { columnsRef, tableWidth } = useTable(
+      this.handleRenameFile,
+      this.updateList
+    )
     const {
       handleConditions,
       handleCreateFolder,
@@ -322,6 +325,7 @@ export default defineComponent({
                   size={'small'}
                   class={styles['table-box']}
                   row-class-name='items'
+                  scrollX={tableWidth}
                 />
                 <div class={styles.pagination}>
                   <NPagination

dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts

@@ -23,6 +23,11 @@ import { useFileStore } from '@/store/file/file'
 import TableAction from './table-action'
 import { IRenameFile } from '../types'
 import ButtonLink from '@/components/button-link'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import type { Router } from 'vue-router'
 import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 
@@ -46,13 +51,13 @@ export function useTable(renameResource: IRenameFile, updateList: () => void) {
     {
       title: '#',
       key: 'id',
-      width: 50,
+      ...COLUMN_WIDTH_CONFIG['index'],
       render: (_row, index) => index + 1
     },
     {
       title: t('resource.file.name'),
       key: 'name',
-      width: 120,
+      ...COLUMN_WIDTH_CONFIG['name'],
       render: (row) =>
         h(
           ButtonLink,
@@ -62,37 +67,55 @@ export function useTable(renameResource: IRenameFile, updateList: () => void) {
           { default: () => row.name }
         )
     },
-    { title: t('resource.file.user_name'), width: 100, key: 'user_name' },
+    {
+      title: t('resource.file.user_name'),
+      ...COLUMN_WIDTH_CONFIG['userName'],
+      key: 'user_name'
+    },
     {
       title: t('resource.file.whether_directory'),
       key: 'whether_directory',
-      width: 100,
+      ...COLUMN_WIDTH_CONFIG['yesOrNo'],
       render: (row) =>
         row.directory ? t('resource.file.yes') : t('resource.file.no')
     },
-    { title: t('resource.file.file_name'), key: 'file_name' },
+    {
-    { title: t('resource.file.description'), width: 150, key: 'description' },
+      title: t('resource.file.file_name'),
+      ...COLUMN_WIDTH_CONFIG['name'],
+      key: 'file_name'
+    },
+    {
+      title: t('resource.file.description'),
+      ...COLUMN_WIDTH_CONFIG['note'],
+      key: 'description'
+    },
     {
       title: t('resource.file.size'),
       key: 'size',
+      ...COLUMN_WIDTH_CONFIG['size'],
       render: (row) => bytesToSize(row.size)
     },
-    { title: t('resource.file.update_time'), width: 150, key: 'update_time' },
+    {
+      title: t('resource.file.update_time'),
+      ...COLUMN_WIDTH_CONFIG['time'],
+      key: 'update_time'
+    },
     {
       title: t('resource.file.operation'),
       key: 'operation',
-      width: 150,
       render: (row) =>
         h(TableAction, {
           row,
           onRenameResource: (id, name, description) =>
             renameResource(id, name, description),
           onUpdateList: () => updateList()
-        })
+        }),
+      ...COLUMN_WIDTH_CONFIG['operation'](4)
     }
   ]
 
   return {
-    columnsRef
+    columnsRef,
+    tableWidth: calculateTableWidth(columnsRef) || DefaultTableWidth
   }
 }

dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx

@@ -41,7 +41,7 @@ const taskGroupOption = defineComponent({
 
     const searchParamRef = ref()
 
-    let updateItemData = reactive({
+    const updateItemData = reactive({
       id: 0,
       name: '',
       projectCode: 0,
@@ -180,6 +180,7 @@ const taskGroupOption = defineComponent({
               size={'small'}
               data={this.tableData}
               striped
+              scrollX={this.tableWidth}
             />
             <div class={styles.pagination}>
               <NPagination

dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts

@@ -18,12 +18,17 @@
 import { h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { format } from 'date-fns'
-import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 import { queryTaskGroupListPaging } from '@/service/modules/task-group'
 import { queryAllProjectList } from '@/service/modules/projects'
 import TableAction from './components/table-action'
 import _ from 'lodash'
 import { parseTime } from '@/utils/common'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 
 export function useTable(
   updateItem = (
@@ -39,24 +44,51 @@ export function useTable(
   const { t } = useI18n()
 
   const columns: TableColumns<any> = [
-    { title: '#', key: 'index', render: (row, index) => index + 1 },
+    {
-    { title: t('resource.task_group_option.name'), key: 'name' },
+      title: '#',
-    { title: t('resource.task_group_option.project_name'), key: 'projectName' },
+      key: 'index',
+      render: (row, index) => index + 1,
+      ...COLUMN_WIDTH_CONFIG['index']
+    },
+    {
+      title: t('resource.task_group_option.name'),
+      key: 'name',
+      ...COLUMN_WIDTH_CONFIG['name']
+    },
+    {
+      title: t('resource.task_group_option.project_name'),
+      key: 'projectName',
+      ...COLUMN_WIDTH_CONFIG['name']
+    },
     {
       title: t('resource.task_group_option.resource_pool_size'),
-      key: 'groupSize'
+      key: 'groupSize',
+      width: 160
     },
     {
       title: t('resource.task_group_option.resource_used_pool_size'),
-      key: 'useSize'
+      key: 'useSize',
+      width: 140
+    },
+    {
+      title: t('resource.task_group_option.desc'),
+      key: 'description',
+      ...COLUMN_WIDTH_CONFIG['note']
+    },
+    {
+      title: t('resource.task_group_option.create_time'),
+      key: 'createTime',
+      ...COLUMN_WIDTH_CONFIG['time']
+    },
+    {
+      title: t('resource.task_group_option.update_time'),
+      key: 'updateTime',
+      ...COLUMN_WIDTH_CONFIG['time']
     },
-    { title: t('resource.task_group_option.desc'), key: 'description' },
-    { title: t('resource.task_group_option.create_time'), key: 'createTime' },
-    { title: t('resource.task_group_option.update_time'), key: 'updateTime' },
     {
       title: t('resource.task_group_option.actions'),
       key: 'actions',
-      width: 150,
+      ...COLUMN_WIDTH_CONFIG['operation'](3),
       render: (row: any) =>
         h(TableAction, {
           row,
@@ -82,6 +114,7 @@ export function useTable(
 
   const variables = reactive({
     tableData: [],
+    tableWidth: calculateTableWidth(columns) || DefaultTableWidth,
     page: ref(1),
     pageSize: ref(10),
     name: ref(null),

dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx

@@ -196,6 +196,7 @@ const taskGroupQueue = defineComponent({
               size={'small'}
               data={this.tableData}
               striped
+              scrollX={this.tableWidth}
             />
             <div class={styles.pagination}>
               <NPagination

dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts

@@ -25,6 +25,11 @@ import {
 } from '@/service/modules/task-group'
 import TableAction from './components/table-action'
 import _ from 'lodash'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 import { parseTime } from '@/utils/common'
 
 export function useTable(
@@ -34,30 +39,66 @@ export function useTable(
   const { t } = useI18n()
 
   const columns: TableColumns<any> = [
-    { title: '#', key: 'index', render: (row, index) => index + 1 },
+    {
-    { title: t('resource.task_group_queue.project_name'), key: 'projectName' },
+      title: '#',
-    { title: t('resource.task_group_queue.task_name'), key: 'taskName' },
+      key: 'index',
+      render: (row, index) => index + 1,
+      ...COLUMN_WIDTH_CONFIG['index']
+    },
+    {
+      title: t('resource.task_group_queue.project_name'),
+      key: 'projectName',
+      ...COLUMN_WIDTH_CONFIG['name']
+    },
+    {
+      title: t('resource.task_group_queue.task_name'),
+      key: 'taskName',
+      ...COLUMN_WIDTH_CONFIG['name']
+    },
     {
       title: t('resource.task_group_queue.process_instance_name'),
-      key: 'processInstanceName'
+      key: 'processInstanceName',
+      ...COLUMN_WIDTH_CONFIG['name']
     },
     {
       title: t('resource.task_group_queue.task_group_name'),
-      key: 'taskGroupName'
+      key: 'taskGroupName',
+      ...COLUMN_WIDTH_CONFIG['name']
+    },
+    {
+      title: t('resource.task_group_queue.priority'),
+      key: 'priority',
+      width: 120
     },
-    { title: t('resource.task_group_queue.priority'), key: 'priority' },
     {
       title: t('resource.task_group_queue.force_starting_status'),
-      key: 'forceStart'
+      key: 'forceStart',
+      ...COLUMN_WIDTH_CONFIG['state']
+    },
+    {
+      title: t('resource.task_group_queue.in_queue'),
+      key: 'inQueue',
+      width: 120
+    },
+    {
+      title: t('resource.task_group_queue.task_status'),
+      key: 'status',
+      ...COLUMN_WIDTH_CONFIG['state']
+    },
+    {
+      title: t('resource.task_group_queue.create_time'),
+      key: 'createTime',
+      ...COLUMN_WIDTH_CONFIG['time']
+    },
+    {
+      title: t('resource.task_group_queue.update_time'),
+      key: 'updateTime',
+      ...COLUMN_WIDTH_CONFIG['time']
     },
-    { title: t('resource.task_group_queue.in_queue'), key: 'inQueue' },
-    { title: t('resource.task_group_queue.task_status'), key: 'status' },
-    { title: t('resource.task_group_queue.create_time'), key: 'createTime' },
-    { title: t('resource.task_group_queue.update_time'), key: 'updateTime' },
     {
       title: t('resource.task_group_queue.actions'),
       key: 'actions',
-      width: 150,
+      ...COLUMN_WIDTH_CONFIG['operation'](2),
       render: (row: any) =>
         h(TableAction, {
           row,
@@ -76,6 +117,7 @@ export function useTable(
 
   const variables = reactive({
     tableData: [],
+    tableWidth: calculateTableWidth(columns) || DefaultTableWidth,
     page: ref(1),
     pageSize: ref(10),
     groupId: ref(3),

dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx

@@ -129,6 +129,7 @@ export default defineComponent({
             size={'small'}
             class={styles.table}
             row-class-name='items'
+            scrollX={this.tableWidth}
           />
           <div class={styles.pagination}>
             <NPagination

dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts

@@ -27,7 +27,12 @@ import {
   queryUdfFuncListPaging,
   deleteUdfFunc
 } from '@/service/modules/resources'
-import { IUdfFunctionParam } from './types'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { IUdfFunctionParam } from './types'
 
 export function useTable() {
   const { t } = useI18n()
@@ -35,6 +40,7 @@ export function useTable() {
 
   const variables = reactive({
     columns: [],
+    tableWidth: DefaultTableWidth,
     row: {},
     tableData: [],
     id: ref(Number(router.currentRoute.value.params.id) || -1),
@@ -50,36 +56,43 @@ export function useTable() {
       {
         title: '#',
         key: 'id',
-        width: 50,
+        render: (_row, index) => index + 1,
-        render: (_row, index) => index + 1
+        ...COLUMN_WIDTH_CONFIG['index']
       },
       {
         title: t('resource.function.udf_function_name'),
-        key: 'funcName'
+        key: 'funcName',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('resource.function.class_name'),
-        key: 'className'
+        key: 'className',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('resource.function.type'),
-        key: 'type'
+        key: 'type',
+        ...COLUMN_WIDTH_CONFIG['type']
       },
       {
         title: t('resource.function.description'),
-        key: 'description'
+        key: 'description',
+        ...COLUMN_WIDTH_CONFIG['note']
       },
       {
         title: t('resource.function.jar_package'),
-        key: 'resourceName'
+        key: 'resourceName',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('resource.function.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('resource.function.operation'),
         key: 'operation',
+        ...COLUMN_WIDTH_CONFIG['operation'](2),
         render: (row) => {
           return h(NSpace, null, {
             default: () => [
@@ -143,6 +156,9 @@ export function useTable() {
         }
       }
     ] as TableColumns<any>
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
   }
 
   const getTableData = (params: IUdfFunctionParam) => {

dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx

@@ -161,6 +161,7 @@ export default defineComponent({
                   size={'small'}
                   class={styles.table}
                   row-class-name='items'
+                  scrollX={this.tableWidth}
                 />
                 <div class={styles.pagination}>
                   <NPagination

dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts

@@ -32,7 +32,12 @@ import {
   queryResourceById
 } from '@/service/modules/resources'
 import ButtonLink from '@/components/button-link'
-import { IUdfResourceParam } from './types'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { IUdfResourceParam } from './types'
 
 const goSubFolder = (router: Router, item: any) => {
   const fileStore = useFileStore()
@@ -51,6 +56,7 @@ export function useTable() {
 
   const variables = reactive({
     columns: [],
+    tableWidth: DefaultTableWidth,
     row: {},
     tableData: [],
     breadList: [],
@@ -68,12 +74,13 @@ export function useTable() {
       {
         title: '#',
         key: 'id',
-        width: 50,
+        ...COLUMN_WIDTH_CONFIG['index'],
         render: (_row, index) => index + 1
       },
       {
         title: t('resource.udf.udf_source_name'),
         key: 'alias',
+        width: 60,
         render: (row) => {
           return !row.directory
             ? row.alias
@@ -89,33 +96,40 @@ export function useTable() {
       {
         title: t('resource.udf.whether_directory'),
         key: 'whether_directory',
+        ...COLUMN_WIDTH_CONFIG['yesOrNo'],
         render: (row) =>
           row.directory ? t('resource.file.yes') : t('resource.file.no')
       },
       {
         title: t('resource.udf.file_name'),
+        ...COLUMN_WIDTH_CONFIG['name'],
         key: 'fileName'
       },
       {
         title: t('resource.udf.file_size'),
         key: 'size',
+        ...COLUMN_WIDTH_CONFIG['size'],
         render: (row) => bytesToSize(row.size)
       },
       {
         title: t('resource.udf.description'),
-        key: 'description'
+        key: 'description',
+        ...COLUMN_WIDTH_CONFIG['note']
       },
       {
         title: t('resource.udf.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('resource.udf.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('resource.udf.operation'),
         key: 'operation',
+        ...COLUMN_WIDTH_CONFIG['operation'](3),
         render: (row) => {
           return h(NSpace, null, {
             default: () => [
@@ -204,6 +218,9 @@ export function useTable() {
         }
       }
     ] as TableColumns<any>
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
   }
 
   const getTableData = (params: IUdfResourceParam) => {

dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx

@@ -138,6 +138,7 @@ const environmentManage = defineComponent({
             row-class-name='items'
             columns={this.columns}
             data={this.tableData}
+            scrollX={this.tableWidth}
           />
           <div class={styles.pagination}>
             <NPagination

dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts

@@ -30,6 +30,11 @@ import type {
   EnvironmentItem
 } from '@/service/modules/environment/types'
 import { parseTime } from '@/utils/common'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 
 export function useTable() {
   const { t } = useI18n()
@@ -45,24 +50,29 @@ export function useTable() {
       {
         title: '#',
         key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (row: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
       },
       {
         title: t('security.environment.environment_name'),
         key: 'name',
-        className: 'environment-name'
+        className: 'environment-name',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('security.environment.environment_config'),
-        key: 'config'
+        key: 'config',
+        ...COLUMN_WIDTH_CONFIG['note']
       },
       {
         title: t('security.environment.environment_desc'),
-        key: 'description'
+        key: 'description',
+        ...COLUMN_WIDTH_CONFIG['note']
       },
       {
         title: t('security.environment.worker_groups'),
         key: 'workerGroups',
+        ...COLUMN_WIDTH_CONFIG['tag'],
         render: (row: EnvironmentItem) =>
           h(NSpace, null, {
             default: () =>
@@ -77,15 +87,18 @@ export function useTable() {
       },
       {
         title: t('security.environment.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('security.environment.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('security.environment.operation'),
         key: 'operation',
+        ...COLUMN_WIDTH_CONFIG['operation'](2),
         render(row: any) {
           return h(NSpace, null, {
             default: () => [
@@ -153,10 +166,14 @@ export function useTable() {
         }
       }
     ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
   }
 
   const variables = reactive({
     columns: [],
+    tableWidth: DefaultTableWidth,
     tableData: [],
     page: ref(1),
     pageSize: ref(10),

dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx

@@ -130,7 +130,11 @@ const k8sNamespaceManage = defineComponent({
           </div>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable
+            columns={this.columns}
+            data={this.tableData}
+            scrollX={this.tableWidth}
+          />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}

dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts

@@ -30,6 +30,11 @@ import type {
   NamespaceItem
 } from '@/service/modules/k8s-namespace/types'
 import { parseTime } from '@/utils/common'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 
 export function useTable() {
   const { t } = useI18n()
@@ -58,43 +63,53 @@ export function useTable() {
       {
         title: '#',
         key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (row: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
       },
       {
         title: t('security.k8s_namespace.k8s_namespace'),
-        key: 'namespace'
+        key: 'namespace',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('security.k8s_namespace.k8s_cluster'),
-        key: 'k8s'
+        key: 'k8s',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('security.k8s_namespace.owner'),
-        key: 'owner'
+        key: 'owner',
+        ...COLUMN_WIDTH_CONFIG['userName']
       },
       {
         title: t('security.k8s_namespace.tag'),
-        key: 'tag'
+        key: 'tag',
+        ...COLUMN_WIDTH_CONFIG['tag']
       },
       {
         title: t('security.k8s_namespace.limit_cpu'),
-        key: 'limitsCpu'
+        key: 'limitsCpu',
+        width: 140
       },
       {
         title: t('security.k8s_namespace.limit_memory'),
-        key: 'limitsMemory'
+        key: 'limitsMemory',
+        width: 140
       },
       {
         title: t('security.k8s_namespace.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('security.k8s_namespace.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('security.k8s_namespace.operation'),
         key: 'operation',
+        ...COLUMN_WIDTH_CONFIG['operation'](2),
         render(row: NamespaceItem) {
           return h(NSpace, null, {
             default: () => [
@@ -160,11 +175,15 @@ export function useTable() {
         }
       }
     ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
   }
 
   const variables = reactive({
     columns: [],
     tableData: [],
+    tableWidth: DefaultTableWidth,
     page: ref(1),
     pageSize: ref(10),
     searchVal: ref(null),

dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx

@@ -127,6 +127,7 @@ const tenementManage = defineComponent({
             columns={this.columns}
             data={this.tableData}
             row-class-name='items'
+            scrollX={this.tableWidth}
           />
           <div class={styles.pagination}>
             <NPagination

dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts

@@ -24,6 +24,11 @@ import { reactive, h, ref } from 'vue'
 import { NButton, NIcon, NPopconfirm, NSpace, NTooltip } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { DeleteOutlined, EditOutlined } from '@vicons/antd'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
 
 export function useTable() {
   const { t } = useI18n()
@@ -52,35 +57,39 @@ export function useTable() {
       {
         title: '#',
         key: 'index',
-        render: (row: any, index: number) => index + 1
+        render: (row: any, index: number) => index + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
       },
       {
         title: t('security.tenant.tenant_code'),
         key: 'tenantCode',
-        className: 'tenant-code'
+        className: 'tenant-code',
+        ...COLUMN_WIDTH_CONFIG['userName']
       },
       {
         title: t('security.tenant.description'),
         key: 'description',
-        ellipsis: {
+        ...COLUMN_WIDTH_CONFIG['note']
-          tooltip: true
-        }
       },
       {
         title: t('security.tenant.queue_name'),
-        key: 'queueName'
+        key: 'queueName',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('security.tenant.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('security.tenant.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('security.tenant.actions'),
         key: 'actions',
+        ...COLUMN_WIDTH_CONFIG['operation'](2),
         render(row: any) {
           return h(NSpace, null, {
             default: () => [
@@ -148,10 +157,14 @@ export function useTable() {
         }
       }
     ]
+    if (variables.tableWidth) {
+      variables.tableWidth = calculateTableWidth(variables.columns)
+    }
   }
 
   const variables = reactive({
     columns: [],
+    tableWidth: DefaultTableWidth,
     tableData: [],
     page: ref(1),
     pageSize: ref(10),

dolphinscheduler-ui-next/src/views/security/user-manage/index.tsx

@@ -90,9 +90,10 @@ const UsersManage = defineComponent({
             <NSpace vertical>
               <NDataTable
                 row-class-name='items'
-                columns={this.columnsRef}
+                columns={this.columnsRef.columns}
                 data={this.list}
                 loading={this.loading}
+                scrollX={this.columnsRef.tableWidth}
               />
               <NSpace justify='center'>
                 <NPagination

dolphinscheduler-ui-next/src/views/security/user-manage/use-columns.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { h, ref, watch, onMounted, Ref } from 'vue'
+import { h, ref, watch, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
   NSpace,
@@ -27,24 +27,34 @@ import {
   NPopconfirm
 } from 'naive-ui'
 import { EditOutlined, DeleteOutlined, UserOutlined } from '@vicons/antd'
-import { TableColumns, InternalRowData } from './types'
+import {
+  COLUMN_WIDTH_CONFIG,
+  calculateTableWidth,
+  DefaultTableWidth
+} from '@/utils/column-width-config'
+import type { TableColumns, InternalRowData } from './types'
 
 export function useColumns(onCallback: Function) {
   const { t } = useI18n()
 
-  const columnsRef = ref([]) as Ref<TableColumns>
+  const columnsRef = ref({
+    columns: [] as TableColumns,
+    tableWidth: DefaultTableWidth
+  })
 
   const createColumns = () => {
-    columnsRef.value = [
+    const columns = [
       {
         title: '#',
         key: 'index',
-        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1
+        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
+        ...COLUMN_WIDTH_CONFIG['index']
       },
       {
         title: t('security.user.username'),
         key: 'userName',
-        className: 'name'
+        className: 'name',
+        ...COLUMN_WIDTH_CONFIG['userName']
       },
       {
         title: t('security.user.user_type'),
@@ -52,27 +62,33 @@ export function useColumns(onCallback: Function) {
         render: (rowData: InternalRowData) =>
           rowData.userType === 'GENERAL_USER'
             ? t('security.user.ordinary_user')
-            : t('security.user.administrator')
+            : t('security.user.administrator'),
+        ...COLUMN_WIDTH_CONFIG['type']
       },
       {
         title: t('security.user.tenant_code'),
-        key: 'tenantCode'
+        key: 'tenantCode',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('security.user.queue'),
-        key: 'queue'
+        key: 'queue',
+        width: 120
       },
       {
         title: t('security.user.email'),
-        key: 'email'
+        key: 'email',
+        ...COLUMN_WIDTH_CONFIG['name']
       },
       {
         title: t('security.user.phone'),
-        key: 'phone'
+        key: 'phone',
+        width: 140
       },
       {
         title: t('security.user.state'),
         key: 'state',
+        ...COLUMN_WIDTH_CONFIG['state'],
         render: (rowData: any, unused: number) =>
           h(
             NTag,
@@ -89,15 +105,18 @@ export function useColumns(onCallback: Function) {
       },
       {
         title: t('security.user.create_time'),
-        key: 'createTime'
+        key: 'createTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('security.user.update_time'),
-        key: 'updateTime'
+        key: 'updateTime',
+        ...COLUMN_WIDTH_CONFIG['time']
       },
       {
         title: t('security.user.operation'),
         key: 'operation',
+        ...COLUMN_WIDTH_CONFIG['operation'](3),
         render: (rowData: any, unused: number) => {
           return h(NSpace, null, {
             default: () => [
@@ -204,6 +223,10 @@ export function useColumns(onCallback: Function) {
         }
       }
     ]
+    columnsRef.value = {
+      columns,
+      tableWidth: calculateTableWidth(columns)
+    }
   }
 
   onMounted(() => {