This is an automated email from the ASF dual-hosted git repository.
zhongjiajie pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 8cd2a2c [Feature][UI Next]Fixed language switching issues (#7845)
8cd2a2c is described below
commit 8cd2a2c3395df1101f34eb6f854271b425b3947d
Author: labbomb <[email protected]>
AuthorDate: Thu Jan 6 19:18:41 2022 +0800
[Feature][UI Next]Fixed language switching issues (#7845)
Co-authored-by: songjianet <[email protected]>
Co-authored-by: Jiajie Zhong <[email protected]>
---
.../layouts/content/components/language/index.tsx | 13 ++++++--
.../content/components/language/use-dropdown.ts | 3 ++
.../content/components/navbar/use-menuClick.ts | 2 +-
.../layouts/content/components/sidebar/index.tsx | 20 ++++++++-----
.../{navbar => sidebar}/use-menuClick.ts | 6 ++--
.../src/layouts/content/index.tsx | 11 ++++++-
.../use-dropdown.ts => store/language/language.ts} | 35 +++++++++++++---------
.../use-translate.ts => store/language/types.ts} | 14 ++++-----
dolphinscheduler-ui-next/src/views/login/index.tsx | 15 ++++++++--
.../src/views/login/use-translate.ts | 5 +++-
10 files changed, 82 insertions(+), 42 deletions(-)
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 efa2212..5e163cc 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 4715b73..fea4e35 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 94a691a..6f8b490 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 be124ef..b215673 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 (
<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>
)
diff --git
a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/use-menuClick.ts
similarity index 86%
copy from
dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
copy to
dolphinscheduler-ui-next/src/layouts/content/components/sidebar/use-menuClick.ts
index 94a691a..84faf23 100644
---
a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
+++
b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/use-menuClick.ts
@@ -18,14 +18,12 @@
import { useRouter } from 'vue-router'
import type { Router } from 'vue-router'
import { MenuOption } from 'naive-ui'
-import { SetupContext } from 'vue'
-export function useMenuClick(ctx: SetupContext<'handleMenuClick'[]>) {
+export function useMenuClick() {
const router: Router = useRouter()
const handleMenuClick = (key: string, item: MenuOption) => {
- // console.log(key, item)
- ctx.emit('handleMenuClick', item)
+ console.log(key, item)
// router.push({ path: 'home' })
}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
index 90ee2f0..0b35b05 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/layouts/content/components/language/use-dropdown.ts
b/dolphinscheduler-ui-next/src/store/language/language.ts
similarity index 60%
copy from
dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts
copy to dolphinscheduler-ui-next/src/store/language/language.ts
index 4715b73..7178bc7 100644
---
a/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts
+++ b/dolphinscheduler-ui-next/src/store/language/language.ts
@@ -15,18 +15,25 @@
* limitations under the License.
*/
-import { DropdownOption } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
+import { defineStore } from 'pinia'
+import LanguageStore from './types'
+import { useStorage } from '@vueuse/core'
+import { ref } from 'vue'
-export function useDropDown(chooseVal: any) {
- const { locale } = useI18n()
-
- const handleSelect = (key: string | number, option: DropdownOption) => {
- // console.log(key, option)
- chooseVal.value = option.label
- locale.value = key as string
- }
- return {
- handleSelect,
- }
-}
+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/views/login/use-translate.ts
b/dolphinscheduler-ui-next/src/store/language/types.ts
similarity index 76%
copy from dolphinscheduler-ui-next/src/views/login/use-translate.ts
copy to dolphinscheduler-ui-next/src/store/language/types.ts
index c7d3dbc..855606f 100644
--- a/dolphinscheduler-ui-next/src/views/login/use-translate.ts
+++ b/dolphinscheduler-ui-next/src/store/language/types.ts
@@ -15,14 +15,10 @@
* limitations under the License.
*/
-import { WritableComputedRef } from 'vue'
+import { Ref } from 'vue'
-export function useTranslate(locale: WritableComputedRef<string>) {
- const handleChange = (value: string) => {
- // console.log('value', value)
- locale.value = value
- }
- return {
- handleChange,
- }
+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 81099e1..71028c1 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({
<div class={styles['language-switch']}>
<NSwitch
onUpdateValue={this.handleChange}
+ default-value={this.lang}
checked-value='en_US'
unchecked-value='zh_CN'
>
diff --git a/dolphinscheduler-ui-next/src/views/login/use-translate.ts
b/dolphinscheduler-ui-next/src/views/login/use-translate.ts
index c7d3dbc..b09423a 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<string>) {
+ const languageStore = useLanguageStore()
+
const handleChange = (value: string) => {
- // console.log('value', value)
locale.value = value
+ languageStore.setLang(value)
}
return {
handleChange,
