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

2 years ago · 08af02151b
16 changed files with 99 additions and 49 deletions
--- a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
+++ b/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:
--- a/dolphinscheduler-ui-next/src/views/data-quality/rule/index.tsx
+++ b/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}
--- a/dolphinscheduler-ui-next/src/views/data-quality/rule/use-table.ts
+++ b/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,
--- a/dolphinscheduler-ui-next/src/views/home/components/state-card.tsx
+++ b/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}>
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/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>
--- a/dolphinscheduler-ui-next/src/views/home/use-process-state.ts
+++ b/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
  }
--- a/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx
@ -16,18 +16,12 @@
 */

 import { defineComponent, onMounted, ref, toRefs } from 'vue'
-import {
-  NGrid,
-  NGi,
-  NCard,
-  NNumberAnimation,
-  NSpace
-} from 'naive-ui'
+import { 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'
--- a/dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/index.tsx
+++ b/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}
--- a/dolphinscheduler-ui-next/src/views/projects/overview/components/state-card.tsx
+++ b/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}>
--- a/dolphinscheduler-ui-next/src/views/projects/overview/index.tsx
+++ b/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>
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/components/version-modal.tsx
+++ b/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}
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
+++ b/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 } =
-      this
+    const {
+      t,
+      onSearch,
+      requestData,
+      onUpdatePageSize,
+      onRefresh,
+      onCreate,
+      loadingRef
+    } = this

    return (
      <>
--- a/dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx
+++ b/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 } =
-      this
+    const {
+      t,
+      requestTableData,
+      onUpdatePageSize,
+      onSearch,
+      onConfirmModal,
+      loadingRef
+    } = this

    return (
      <>
--- a/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.tsx
+++ b/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}
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
@ -190,7 +190,7 @@ export function useTable() {
        variables.loadingRef = false
      }),
      {}
-      )
+    )

    return state
  }
--- a/dolphinscheduler-ui-next/src/views/security/user-manage/components/user-detail-modal.tsx
+++ b/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 && (
-              <NFormItem
-                label={t('security.user.user_password')}
-                path='userPassword'
-              >
-                <NInput
-                  class='input-password'
-                  type='password'
-                  v-model:value={this.formData.userPassword}
-                  placeholder={t('security.user.user_password_tips')}
-                />
-              </NFormItem>
-            )
-          }
+          {!this.currentRecord?.id && (
+            <NFormItem
+              label={t('security.user.user_password')}
+              path='userPassword'
+            >
+              <NInput
+                class='input-password'
+                type='password'
+                v-model:value={this.formData.userPassword}
+                placeholder={t('security.user.user_password_tips')}
+              />
+            </NFormItem>
+          )}
          {this.IS_ADMIN && (
            <NFormItem label={t('security.user.tenant_code')} path='tenantId'>
              <NSelect