[Fix][UI Next][V1.0.0-Alpha] Fix the floating full-name display needed for menu bar. (#9264)

dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts

@@ -16,7 +16,7 @@
  */
 
 import { reactive, h } from 'vue'
-import { NIcon } from 'naive-ui'
+import { NEllipsis, NIcon } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import {
   HomeOutlined,
@@ -90,12 +90,12 @@ export function useDataList() {
     const projectCode = route.params.projectCode || ''
     state.menuOptions = [
       {
-        label: t('menu.home'),
+        label: () => h(NEllipsis, null, { default: () => t('menu.home') }),
         key: 'home',
         icon: renderIcon(HomeOutlined)
       },
       {
-        label: t('menu.project'),
+        label: () => h(NEllipsis, null, { default: () => t('menu.project') }),
         key: 'projects',
         icon: renderIcon(ProfileOutlined),
         children: [
@@ -141,7 +141,7 @@ export function useDataList() {
         ]
       },
       {
-        label: t('menu.resources'),
+        label: () => h(NEllipsis, null, { default: () => t('menu.resources') }),
         key: 'resource',
         icon: renderIcon(FolderOutlined),
         children: [
@@ -183,7 +183,8 @@ export function useDataList() {
         ]
       },
       {
-        label: t('menu.data_quality'),
+        label: () =>
+          h(NEllipsis, null, { default: () => t('menu.data_quality') }),
         key: 'data-quality',
         icon: renderIcon(ContainerOutlined),
         children: [
@@ -200,13 +201,14 @@ export function useDataList() {
         ]
       },
       {
-        label: t('menu.datasource'),
+        label: () =>
+          h(NEllipsis, null, { default: () => t('menu.datasource') }),
         key: 'datasource',
         icon: renderIcon(DatabaseOutlined),
         children: []
       },
       {
-        label: t('menu.monitor'),
+        label: () => h(NEllipsis, null, { default: () => t('menu.monitor') }),
         key: 'monitor',
         icon: renderIcon(DesktopOutlined),
         children: [
@@ -247,7 +249,7 @@ export function useDataList() {
         ]
       },
       {
-        label: t('menu.security'),
+        label: () => h(NEllipsis, null, { default: () => t('menu.security') }),
         key: 'security',
         icon: renderIcon(SafetyCertificateOutlined),
         children:

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

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

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

@@ -132,7 +132,6 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
             'yyyy-MM-dd HH:mm:ss'
           )
 
-          
           return {
             ...item,
             ruleName: ruleNameLocale,

dolphinscheduler-ui-next/src/views/home/components/state-card.tsx

@@ -55,7 +55,14 @@ const StateCard = defineComponent({
     return { onUpdateDatePickerValue }
   },
   render() {
-    const { title, date, tableData, chartData, onUpdateDatePickerValue, loadingRef } = this
+    const {
+      title,
+      date,
+      tableData,
+      chartData,
+      onUpdateDatePickerValue,
+      loadingRef
+    } = this
     const { columnsRef } = useTable()
     return (
       <Card title={title}>

dolphinscheduler-ui-next/src/views/home/index.tsx

@@ -64,11 +64,18 @@ export default defineComponent({
       taskStateRef,
       processStateRef,
       ...toRefs(taskVariables),
-      ...toRefs(processVariables),
+      ...toRefs(processVariables)
     }
   },
   render() {
-    const { t, dateRef, handleTaskDate, handleProcessDate, taskLoadingRef, processLoadingRef } = this
+    const {
+      t,
+      dateRef,
+      handleTaskDate,
+      handleProcessDate,
+      taskLoadingRef,
+      processLoadingRef
+    } = this
 
     return (
       <div>

dolphinscheduler-ui-next/src/views/home/use-process-state.ts

@@ -52,12 +52,12 @@ export function useProcessState() {
             name: t('home.' + toLower(item.taskStateType))
           }
         })
-        
+
         processVariables.processLoadingRef = false
         return { table, chart }
       }),
       { table: [], chart: [] }
-      )
+    )
 
     return state
   }

dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx

@@ -16,18 +16,12 @@
  */
 
 import { defineComponent, onMounted, ref, toRefs } from 'vue'
-import {
+import { NGrid, NGi, NCard, NNumberAnimation, NSpace } from 'naive-ui'
-  NGrid,
-  NGi,
-  NCard,
-  NNumberAnimation,
-  NSpace
-} from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useMaster } from './use-master'
 import styles from './index.module.scss'
 import Card from '@/components/card'
-import Result from "@/components/result";
+import Result from '@/components/result'
 import Gauge from '@/components/chart/modules/Gauge'
 import MasterModal from './master-modal'
 import type { Ref } from 'vue'

dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/index.tsx

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

dolphinscheduler-ui-next/src/views/projects/overview/components/state-card.tsx

@@ -55,7 +55,14 @@ const StateCard = defineComponent({
     return { onUpdateDatePickerValue }
   },
   render() {
-    const { title, date, tableData, chartData, onUpdateDatePickerValue, loadingRef } = this
+    const {
+      title,
+      date,
+      tableData,
+      chartData,
+      onUpdateDatePickerValue,
+      loadingRef
+    } = this
     const { columnsRef } = useTable()
     return (
       <Card title={title}>

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

@@ -64,11 +64,18 @@ const workflowMonitor = defineComponent({
       taskStateRef,
       processStateRef,
       ...toRefs(taskVariables),
-      ...toRefs(processVariables),
+      ...toRefs(processVariables)
     }
   },
   render() {
-    const { t, dateRef, handleTaskDate, handleProcessDate, taskLoadingRef, processLoadingRef  } = this
+    const {
+      t,
+      dateRef,
+      handleTaskDate,
+      handleProcessDate,
+      taskLoadingRef,
+      processLoadingRef
+    } = this
 
     return (
       <div>

dolphinscheduler-ui-next/src/views/projects/task/definition/components/version-modal.tsx

@@ -86,7 +86,11 @@ const VersionModal = defineComponent({
         cancelShow={false}
         onConfirm={onConfirm}
       >
-        <NDataTable loading={loadingRef} columns={this.columns} data={this.tableData} />
+        <NDataTable
+          loading={loadingRef}
+          columns={this.columns}
+          data={this.tableData}
+        />
         <div class={styles.pagination}>
           <NPagination
             v-model:page={this.page}

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

@@ -114,8 +114,15 @@ const TaskDefinition = defineComponent({
     }
   },
   render() {
-    const { t, onSearch, requestData, onUpdatePageSize, onRefresh, onCreate, loadingRef } =
+    const {
-      this
+      t,
+      onSearch,
+      requestData,
+      onUpdatePageSize,
+      onRefresh,
+      onCreate,
+      loadingRef
+    } = this
 
     return (
       <>

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

@@ -86,8 +86,14 @@ const TaskInstance = defineComponent({
     }
   },
   render() {
-    const { t, requestTableData, onUpdatePageSize, onSearch, onConfirmModal, loadingRef } =
+    const {
-      this
+      t,
+      requestTableData,
+      onUpdatePageSize,
+      onSearch,
+      onConfirmModal,
+      loadingRef
+    } = this
 
     return (
       <>

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

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

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

@@ -190,7 +190,7 @@ export function useTable() {
         variables.loadingRef = false
       }),
       {}
-      )
+    )
 
     return state
   }

dolphinscheduler-ui-next/src/views/security/user-manage/components/user-detail-modal.tsx

@@ -112,21 +112,19 @@ export const UserModal = defineComponent({
               placeholder={t('security.user.username_tips')}
             />
           </NFormItem>
-          {
+          {!this.currentRecord?.id && (
-            !this.currentRecord?.id && (
+            <NFormItem
-              <NFormItem
+              label={t('security.user.user_password')}
-                label={t('security.user.user_password')}
+              path='userPassword'
-                path='userPassword'
+            >
-              >
+              <NInput
-                <NInput
+                class='input-password'
-                  class='input-password'
+                type='password'
-                  type='password'
+                v-model:value={this.formData.userPassword}
-                  v-model:value={this.formData.userPassword}
+                placeholder={t('security.user.user_password_tips')}
-                  placeholder={t('security.user.user_password_tips')}
+              />
-                />
+            </NFormItem>
-              </NFormItem>
+          )}
-            )
-          }
           {this.IS_ADMIN && (
             <NFormItem label={t('security.user.tenant_code')} path='tenantId'>
               <NSelect