Fix the user module multi-language linkage problem (#7863)

dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx

@@ -36,7 +36,7 @@ const Navbar = defineComponent({
       type: Array as PropType<any>,
       default: [],
     },
-    profileOptions: {
+    userDropdownOptions: {
       type: Array as PropType<any>,
       default: [],
     },
@@ -60,7 +60,7 @@ const Navbar = defineComponent({
         <div class={styles.settings}>
           <Theme />
           <Locales localesOptions={this.localesOptions} />
-          <User profileOptions={this.profileOptions} />
+          <User userDropdownOptions={this.userDropdownOptions} />
         </div>
       </div>
     )

dolphinscheduler-ui-next/src/layouts/content/components/user/index.tsx

@@ -24,7 +24,7 @@ import { useDropDown } from './use-dropdown'
 const User = defineComponent({
   name: 'User',
   props: {
-    profileOptions: {
+    userDropdownOptions: {
       type: Array as PropType<any>,
       default: [],
     },
@@ -38,7 +38,7 @@ const User = defineComponent({
       <NDropdown
         trigger='hover'
         show-arrow
-        options={this.profileOptions}
+        options={this.userDropdownOptions}
         on-select={this.handleSelect}
       >
         <NButton text>

dolphinscheduler-ui-next/src/layouts/content/index.tsx

@@ -30,7 +30,7 @@ const Content = defineComponent({
     const menuStore = useMenuStore()
     const { locale } = useI18n()
     const localesStore = useLocalesStore()
-    const { state, changeMenuOption, changeHeaderMenuOptions } = useDataList()
+    const { state, changeMenuOption, changeHeaderMenuOptions, changeUserDropdown } = useDataList()
 
     locale.value = localesStore.getLocales
 
@@ -39,12 +39,14 @@ const Content = defineComponent({
       changeMenuOption(state)
       changeHeaderMenuOptions(state)
       genSideMenu(state)
+      changeUserDropdown(state)
     })
 
     watch(useI18n().locale, () => {
       changeMenuOption(state)
       changeHeaderMenuOptions(state)
       genSideMenu(state)
+      changeUserDropdown(state)
     })
 
     const genSideMenu = (state: any) => {
@@ -75,7 +77,7 @@ const Content = defineComponent({
             onHandleMenuClick={this.getSideMenuOptions}
             headerMenuOptions={this.headerMenuOptions}
             localesOptions={this.localesOptions}
-            profileOptions={this.userDropdownOptions}
+            userDropdownOptions={this.userDropdownOptions}
           />
         </NLayoutHeader>
         <NLayout has-sider position='absolute' style='top: 65px'>

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

@@ -62,28 +62,10 @@ export function useDataList() {
     },
   ]
 
-  const userDropdownOptions = [
-    {
-      label: t('userDropdown.profile'),
-      key: 'profile',
-      icon: renderIcon(UserOutlined),
-    },
-    {
-      label: t('userDropdown.password'),
-      key: 'password',
-      icon: renderIcon(KeyOutlined),
-    },
-    {
-      label: t('userDropdown.logout'),
-      key: 'logout',
-      icon: renderIcon(LogoutOutlined),
-    },
-  ]
-
   const state = reactive({
     isShowSide: false,
     localesOptions,
-    userDropdownOptions,
+    userDropdownOptions: [],
     menuOptions: [],
     headerMenuOptions: [],
     sideMenuOptions: [],
@@ -267,9 +249,30 @@ export function useDataList() {
     )
   }
 
+  const changeUserDropdown = (state: any) => {
+    state.userDropdownOptions = [
+      {
+        label: t('userDropdown.profile'),
+        key: 'profile',
+        icon: renderIcon(UserOutlined),
+      },
+      {
+        label: t('userDropdown.password'),
+        key: 'password',
+        icon: renderIcon(KeyOutlined),
+      },
+      {
+        label: t('userDropdown.logout'),
+        key: 'logout',
+        icon: renderIcon(LogoutOutlined),
+      },
+    ]
+  }
+
   return {
     state,
     changeHeaderMenuOptions,
     changeMenuOption,
+    changeUserDropdown
   }
 }