[Feature][UI Next]Fixed language switching issues (#7845)

Co-authored-by: songjianet <1778651752@qq.com>
Co-authored-by: Jiajie Zhong <zhongjiajie955@hotmail.com>

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

@@ -15,11 +15,12 @@
  * limitations under the License.
  */
 
-import { defineComponent, ref, PropType } from 'vue'
+import { defineComponent, ref, PropType, onMounted } from 'vue'
 import { NDropdown, NIcon, NButton } from 'naive-ui'
 import styles from './index.module.scss'
 import { DownOutlined } from '@vicons/antd'
 import { useDropDown } from './use-dropdown'
+import { useLanguageStore } from '@/store/language/language'
 
 const Language = defineComponent({
   name: 'Language',
@@ -29,9 +30,15 @@ const Language = defineComponent({
       default: [],
     },
   },
-  setup() {
-    const chooseVal = ref('中文')
+  setup(props) {
+    const languageStore = useLanguageStore()
+    const lang = ref()
+    lang.value = languageStore.getLang
+    
+    const chooseVal = ref(props.languageOptions.filter((item: { key: string }) => item.key === lang.value)[0].label)
+    
     const { handleSelect } = useDropDown(chooseVal)
+
     return { handleSelect, chooseVal }
   },
   render() {

dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts

@@ -17,14 +17,17 @@
 
 import { DropdownOption } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
+import { useLanguageStore } from '@/store/language/language'
 
 export function useDropDown(chooseVal: any) {
   const { locale } = useI18n()
+  const languageStore = useLanguageStore()
 
   const handleSelect = (key: string | number, option: DropdownOption) => {
     // console.log(key, option)
     chooseVal.value = option.label
     locale.value = key as string
+    languageStore.setLang(locale.value)
   }
   return {
     handleSelect,

dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts

@@ -24,7 +24,7 @@ export function useMenuClick(ctx: SetupContext<'handleMenuClick'[]>) {
   const router: Router = useRouter()
 
   const handleMenuClick = (key: string, item: MenuOption) => {
-    // console.log(key, item)
+    console.log(key, item)
     ctx.emit('handleMenuClick', item)
     // router.push({ path: 'home' })
   }

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

@@ -17,7 +17,8 @@
 
 import { defineComponent, ref, watch, PropType } from 'vue'
 import styles from './index.module.scss'
-import { NLayoutSider, NMenu } from 'naive-ui'
+import { MenuOption, NLayoutSider, NMenu } from 'naive-ui'
+import { useMenuClick } from './use-menuClick'
 
 const Sidebar = defineComponent({
   name: 'Sidebar',
@@ -27,8 +28,7 @@ const Sidebar = defineComponent({
       default: [],
     },
   },
-  setup() {},
-  render() {
+  setup() {
     const collapsedRef = ref(false)
     const defaultExpandedKeys = [
       'workflow',
@@ -37,19 +37,25 @@ const Sidebar = defineComponent({
       'statistical-manage',
     ]
 
+    const { handleMenuClick } = useMenuClick()
+
+    return { collapsedRef, defaultExpandedKeys, handleMenuClick } 
+  },
+  render() {
     return (
       <NLayoutSider
         bordered
         nativeScrollbar={false}
         show-trigger='bar'
         collapse-mode='width'
-        collapsed={collapsedRef.value}
-        onCollapse={() => (collapsedRef.value = true)}
-        onExpand={() => (collapsedRef.value = false)}
+        collapsed={this.collapsedRef}
+        onCollapse={() => (this.collapsedRef = true)}
+        onExpand={() => (this.collapsedRef = false)}
       >
         <NMenu
           options={this.sideMenuOptions}
-          defaultExpandedKeys={defaultExpandedKeys}
+          defaultExpandedKeys={this.defaultExpandedKeys}
+          onUpdateValue={this.handleMenuClick}
         />
       </NLayoutSider>
     )

dolphinscheduler-ui-next/src/layouts/content/components/sidebar/use-menuClick.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { useRouter } from 'vue-router'
+import type { Router } from 'vue-router'
+import { MenuOption } from 'naive-ui'
+
+export function useMenuClick() {
+  const router: Router = useRouter()
+
+  const handleMenuClick = (key: string, item: MenuOption) => {
+    console.log(key, item)
+    // router.push({ path: 'home' })
+  }
+
+  return {
+    handleMenuClick,
+  }
+}

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

@@ -15,20 +15,29 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, watch, toRefs } from 'vue'
+import { defineComponent, onMounted, watch, toRefs, ref } from 'vue'
 import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui'
 import NavBar from './components/navbar'
 import SideBar from './components/sidebar'
 import { useDataList } from './use-dataList'
 import { useMenuStore } from '@/store/menu/menu'
+import { useLanguageStore } from '@/store/language/language'
 import { useI18n } from 'vue-i18n'
 
 const Content = defineComponent({
   name: 'Content',
   setup() {
     const menuStore = useMenuStore()
+
+    const { locale } = useI18n()
+    const languageStore = useLanguageStore()
+    const lang = ref()
+    lang.value = languageStore.getLang
+
     const { state, changeMenuOption, changeHeaderMenuOptions } = useDataList()
 
+    locale.value = lang.value
+    
     onMounted(() => {
       menuStore.setMenuKey('home')
       changeMenuOption(state)

dolphinscheduler-ui-next/src/store/language/language.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { defineStore } from 'pinia'
+import LanguageStore from './types'
+import { useStorage } from '@vueuse/core'
+import { ref } from 'vue'
+
+export const useLanguageStore = defineStore({
+  id: 'language',
+  state: (): LanguageStore => ({
+    storageLang: ref('')
+  }),
+  getters: {
+    getLang(): string | null {
+      return window.localStorage.getItem('lang')
+    },
+  },
+  actions: {
+    setLang(lang: string): void {
+      this.storageLang = useStorage('lang', lang)
+      this.storageLang = lang
+    },
+  },
+})

dolphinscheduler-ui-next/src/store/language/types.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { Ref } from 'vue'
+
+interface LanguageStore {
+  storageLang: Ref
+}
+
+export default LanguageStore

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

@@ -15,23 +15,33 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs, withKeys } from 'vue'
+import { defineComponent, ref, toRefs, withKeys, onMounted } from 'vue'
 import styles from './index.module.scss'
 import { NInput, NButton, NSwitch, NForm, NFormItem } from 'naive-ui'
 import { useForm } from './use-form'
 import { useTranslate } from './use-translate'
 import { useLogin } from './use-login'
+import { useLanguageStore } from '@/store/language/language'
 
 const login = defineComponent({
   name: 'login',
   setup() {
     const { state, t, locale } = useForm()
 
+    const languageStore = useLanguageStore()
+    const lang = ref()
+    lang.value = languageStore.getLang
+    
     const { handleChange } = useTranslate(locale)
 
     const { handleLogin } = useLogin(state)
 
-    return { t, handleChange, handleLogin, ...toRefs(state) }
+    onMounted(() => {
+      // console.log('login', lang)
+      handleChange(lang.value)
+    })
+
+    return { t, handleChange, handleLogin, ...toRefs(state), lang }
   },
   render() {
     return (
@@ -39,6 +49,7 @@ const login = defineComponent({
         <div class={styles['language-switch']}>
           <NSwitch
             onUpdateValue={this.handleChange}
+            default-value={this.lang}
             checked-value='en_US'
             unchecked-value='zh_CN'
           >

dolphinscheduler-ui-next/src/views/login/use-translate.ts

@@ -16,11 +16,14 @@
  */
 
 import { WritableComputedRef } from 'vue'
+import { useLanguageStore } from '@/store/language/language'
 
 export function useTranslate(locale: WritableComputedRef<string>) {
+  const languageStore = useLanguageStore()
+
   const handleChange = (value: string) => {
-    // console.log('value', value)
     locale.value = value
+    languageStore.setLang(value)
   }
   return {
     handleChange,