[Fix][UI Next][V1.0.0-Alpha] Fix the task definition page table scale imbalance problem. (#8992)

dolphinscheduler-ui-next/src/components/card/index.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import {CSSProperties, defineComponent, PropType} from 'vue'
+import { CSSProperties, defineComponent, PropType } from 'vue'
 import { NCard } from 'naive-ui'
 
 const headerStyle = {
@@ -26,9 +26,7 @@ const contentStyle = {
   padding: '8px 10px'
 }
 
-const headerExtraStyle = {
-
-}
+const headerExtraStyle = {}
 
 const props = {
   title: {
@@ -54,9 +52,11 @@ const Card = defineComponent({
       <NCard
         title={title}
         size='small'
-        headerStyle={this.headerStyle? this.headerStyle:headerStyle}
-        headerExtraStyle={this.headerExtraStyle? this.headerExtraStyle:headerExtraStyle}
-        contentStyle={this.contentStyle? this.contentStyle:contentStyle}
+        headerStyle={this.headerStyle ? this.headerStyle : headerStyle}
+        headerExtraStyle={
+          this.headerExtraStyle ? this.headerExtraStyle : headerExtraStyle
+        }
+        contentStyle={this.contentStyle ? this.contentStyle : contentStyle}
       >
         {$slots}
       </NCard>

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

@@ -52,7 +52,6 @@ export function useTable(onEdit: Function) {
       {
         title: t('project.task.task_name'),
         key: 'taskName',
-        width: 400,
         render: (row: IRecord) =>
           h(
             ButtonLink,
@@ -64,8 +63,7 @@ export function useTable(onEdit: Function) {
       },
       {
         title: t('project.task.workflow_name'),
-        key: 'processDefinitionName',
-        width: 400
+        key: 'processDefinitionName'
       },
       {
         title: t('project.task.workflow_state'),

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

@@ -44,7 +44,7 @@ import { useFileState } from './use-file'
 import ResourceFolderModal from './folder'
 import ResourceUploadModal from './upload'
 import ResourceRenameModal from './rename'
-import {BreadcrumbItem, IRenameFile} from './types'
+import { BreadcrumbItem, IRenameFile } from './types'
 import type { Router } from 'vue-router'
 import styles from './index.module.scss'
 import { useFileStore } from '@/store/file/file'
@@ -156,8 +156,7 @@ export default defineComponent({
       resourceListRef.value = getResourceListState(fileId.value)
     })
 
-    const breadcrumbItemsRef: Ref<Array<BreadcrumbItem> | undefined> = ref(
-        [
+    const breadcrumbItemsRef: Ref<Array<BreadcrumbItem> | undefined> = ref([
       {
         id: 1,
         fullName: 'l1'
@@ -170,8 +169,7 @@ export default defineComponent({
         id: 4,
         fullName: 'l3'
       }
-        ]
-    )
+    ])
 
     watch(
       () => router.currentRoute.value.params.id,
@@ -206,16 +204,15 @@ export default defineComponent({
             },
             id
           )
-          breadcrumbItemsRef.value?.push({id: resource.id, fullName: dir})
+          breadcrumbItemsRef.value?.push({ id: resource.id, fullName: dir })
         } else {
-          breadcrumbItemsRef.value?.push({id: 0, fullName: 'Root'})
+          breadcrumbItemsRef.value?.push({ id: 0, fullName: 'Root' })
         }
         index = index + 1
       }
     }
 
-    onMounted(
-        () => {
+    onMounted(() => {
       breadcrumbItemsRef.value = []
       if (fileId.value != -1) {
         queryCurrentResourceById(fileId.value).then((res: ResourceFile) => {
@@ -227,8 +224,7 @@ export default defineComponent({
           }
         })
       }
-        }
-    )
+    })
 
     return {
       fileId,
@@ -248,7 +244,7 @@ export default defineComponent({
       handleUpdatePageSize,
       pagination: paginationReactive,
       renameInfo,
-      breadcrumbItemsRef,
+      breadcrumbItemsRef
     }
   },
   render() {
@@ -300,17 +296,20 @@ export default defineComponent({
             </div>
           </div>
         </Card>
-        <Card title={t('resource.file.file_manage')} class={styles['table-card']}>
+        <Card
+          title={t('resource.file.file_manage')}
+          class={styles['table-card']}
+        >
           {{
             'header-extra': () => (
               <NBreadcrumb separator='>' class={styles['breadcrumb']}>
-                  {
-                    this.breadcrumbItemsRef?.map((item: BreadcrumbItem) => {
+                {this.breadcrumbItemsRef?.map((item: BreadcrumbItem) => {
                   return (
-                          <NBreadcrumbItem href={item.id.toString()}>{item.fullName}</NBreadcrumbItem>
+                    <NBreadcrumbItem href={item.id.toString()}>
+                      {item.fullName}
+                    </NBreadcrumbItem>
                   )
-                    })
-                  }
+                })}
               </NBreadcrumb>
             ),
             default: () => (

dolphinscheduler-ui-next/src/views/resource/file/types.ts

@@ -66,6 +66,6 @@ export interface ISetPagination {
 }
 
 export interface BreadcrumbItem {
-  id: number,
+  id: number
   fullName: string
 }

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import {defineComponent, onMounted, ref, toRefs, watch} from 'vue'
+import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'
 import {
   NButton,
   NInput,
@@ -143,12 +143,7 @@ const AlarmInstanceManage = defineComponent({
           }}
         </Card>
         <Card title='' class={styles['mt-8']}>
-          <NDataTable
-            columns={columns}
-            data={list}
-            loading={loading}
-            striped
-          />
+          <NDataTable columns={columns} data={list} loading={loading} striped />
           <NPagination
             page={page}
             page-size={pageSize}