diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/language/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/language/index.tsx
index efa22121a3..5e163ccebc 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/language/index.tsx
+++ b/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() {
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts b/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts
index 4715b738ba..fea4e350ab 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts
+++ b/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,
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
index 94a691a017..6f8b4907f2 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
+++ b/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' })
}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
index be124ef156..b215673871 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
+++ b/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 (
(collapsedRef.value = true)}
- onExpand={() => (collapsedRef.value = false)}
+ collapsed={this.collapsedRef}
+ onCollapse={() => (this.collapsedRef = true)}
+ onExpand={() => (this.collapsedRef = false)}
>
)
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/use-menuClick.ts b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/use-menuClick.ts
new file mode 100644
index 0000000000..84faf23569
--- /dev/null
+++ b/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,
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
index 90ee2f0157..0b35b05565 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
+++ b/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)
diff --git a/dolphinscheduler-ui-next/src/store/language/language.ts b/dolphinscheduler-ui-next/src/store/language/language.ts
new file mode 100644
index 0000000000..7178bc72e5
--- /dev/null
+++ b/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
+ },
+ },
+})
diff --git a/dolphinscheduler-ui-next/src/store/language/types.ts b/dolphinscheduler-ui-next/src/store/language/types.ts
new file mode 100644
index 0000000000..855606f2cb
--- /dev/null
+++ b/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
diff --git a/dolphinscheduler-ui-next/src/views/login/index.tsx b/dolphinscheduler-ui-next/src/views/login/index.tsx
index 81099e1bff..71028c1ff4 100644
--- a/dolphinscheduler-ui-next/src/views/login/index.tsx
+++ b/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({
diff --git a/dolphinscheduler-ui-next/src/views/login/use-translate.ts b/dolphinscheduler-ui-next/src/views/login/use-translate.ts
index c7d3dbcf78..b09423aae1 100644
--- a/dolphinscheduler-ui-next/src/views/login/use-translate.ts
+++ b/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) {
+ const languageStore = useLanguageStore()
+
const handleChange = (value: string) => {
- // console.log('value', value)
locale.value = value
+ languageStore.setLang(value)
}
return {
handleChange,