You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by wa...@apache.org on 2021/12/30 14:11:08 UTC
[dolphinscheduler] branch dev updated: feat: fix layout's problem (#7742)
This is an automated email from the ASF dual-hosted git repository.
wangyizhi 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 b2e6b69 feat: fix layout's problem (#7742)
b2e6b69 is described below
commit b2e6b69b0902ddd0dac9aca12ca40224dd90cfaa
Author: labbomb <73...@qq.com>
AuthorDate: Thu Dec 30 22:10:48 2021 +0800
feat: fix layout's problem (#7742)
---
.../layouts/content/components/sidebar/index.tsx | 86 +++++++-------
.../src/layouts/content/index.tsx | 82 +++++++------
.../src/store/language/language.ts | 36 ++++++
.../src/store/language/types.ts | 22 ++++
dolphinscheduler-ui-next/src/views/login/index.tsx | 130 ++++++++++-----------
5 files changed, 201 insertions(+), 155 deletions(-)
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 77f1660..39c9cfa 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
@@ -15,53 +15,51 @@
* limitations under the License.
*/
-import { defineComponent, PropType, ref } from 'vue'
+import { defineComponent, PropType, ref, watch, onMounted } from 'vue'
import styles from './index.module.scss'
import { NLayoutSider, NMenu } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useLanguageStore } from '@/store/language/language'
-const Sidebar = defineComponent({
- name: 'Sidebar',
- props: {
- sideMenuOptions: {
- type: Array as PropType<any>,
- default: [],
- },
- isShowSide: {
- type: Boolean as PropType<boolean>,
- default: false,
- },
- },
- setup() {
- const collapsedRef = ref(false)
- const defaultExpandedKeys = [
- 'workflow',
- 'udf-manage',
- 'service-manage',
- 'statistical-manage',
- ]
+interface Props {
+ sideMenuOptions: Array<any>,
+ isShowSide: boolean
+}
- return { collapsedRef, defaultExpandedKeys }
- },
- render() {
- return (
- this.isShowSide && (
- <NLayoutSider
- bordered
- nativeScrollbar={false}
- show-trigger='bar'
- collapse-mode='width'
- collapsed={this.collapsedRef}
- onCollapse={() => (this.collapsedRef = true)}
- onExpand={() => (this.collapsedRef = false)}
- >
- <NMenu
- options={this.sideMenuOptions}
- defaultExpandedKeys={this.defaultExpandedKeys}
- />
- </NLayoutSider>
- )
- )
- },
-})
+const Sidebar = (props: Props) => {
+ // console.log('props', JSON.stringify(props))
+ const collapsedRef = ref(false)
+ const defaultExpandedKeys = [
+ 'workflow',
+ 'udf-manage',
+ 'service-manage',
+ 'statistical-manage',
+ ]
+
+ watch(useI18n().locale, () => {
+ const languageStore = useLanguageStore()
+ refreshOptionsRef.value = props.sideMenuOptions
+ // console.log(123, JSON.stringify(props))
+ })
+
+ const refreshOptionsRef = ref()
+
+ return (
+ <NLayoutSider style={{display: props.isShowSide ? 'block' : 'none'}}
+ bordered
+ nativeScrollbar={false}
+ show-trigger='bar'
+ collapse-mode='width'
+ collapsed={collapsedRef.value}
+ onCollapse={() => (collapsedRef.value = true)}
+ onExpand={() => (collapsedRef.value = false)}
+ >
+ <NMenu
+ options={props.sideMenuOptions || refreshOptionsRef.value}
+ defaultExpandedKeys={defaultExpandedKeys}
+ />
+ </NLayoutSider>
+ )
+}
export default Sidebar
diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
index 92b387e..fddf0ac 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
@@ -15,58 +15,54 @@
* limitations under the License.
*/
-import { defineComponent, ref, toRefs } from 'vue'
+import { 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 { useLanguageStore } from '@/store/language/language'
-const Content = defineComponent({
- name: 'Content',
- setup() {
- const { state, getHeaderMenuOptions } = useDataList()
+const Content = () => {
- const headerMenuOptions = getHeaderMenuOptions(state.menuOptions)
+ const { state, getHeaderMenuOptions } = useDataList()
- const sideMenuOptions = ref()
+ const headerMenuOptions = getHeaderMenuOptions(state.menuOptions)
- const getSideMenuOptions = (item: any) => {
- sideMenuOptions.value =
- state.menuOptions.filter((menu) => menu.key === item.key)[0].children ||
- []
- state.isShowSide = sideMenuOptions.value.length !== 0
- }
+ const sideMenuOptions = ref()
+ const languageStore = useLanguageStore()
- return {
- ...toRefs(state),
- headerMenuOptions,
- getSideMenuOptions,
- sideMenuOptions,
- }
- },
- render() {
- return (
- <NLayout style='height: 100%;'>
- <NLayoutHeader style='height: 65px;'>
- <NavBar
- onHandleMenuClick={this.getSideMenuOptions}
- headerMenuOptions={this.headerMenuOptions}
- languageOptions={this.languageOptions}
- profileOptions={this.profileOptions}
- />
- </NLayoutHeader>
- <NLayout has-sider position='absolute' style='top: 65px;'>
- <SideBar
- sideMenuOptions={this.sideMenuOptions}
- isShowSide={this.isShowSide}
- />
- <NLayoutContent native-scrollbar={false} style='padding: 16px 22px;'>
- <router-view />
- </NLayoutContent>
- </NLayout>
+ const getSideMenuOptions = (item: any) => {
+ // console.log('item', item)
+ languageStore.setMenuKey(item.key)
+ sideMenuOptions.value =
+ state.menuOptions.filter((menu) => menu.key === item.key)[0].children ||
+ []
+ state.isShowSide = sideMenuOptions.value.length !== 0
+ // console.log('sideMenuOptions.value', sideMenuOptions.value)
+ // console.log('state.isShowSide', state.isShowSide)
+ }
+
+ return (
+ <NLayout style='height: 100%;'>
+ <NLayoutHeader style='height: 65px;'>
+ <NavBar
+ onHandleMenuClick={getSideMenuOptions}
+ headerMenuOptions={headerMenuOptions}
+ languageOptions={state.languageOptions}
+ profileOptions={state.profileOptions}
+ />
+ </NLayoutHeader>
+ <NLayout has-sider position='absolute' style='top: 65px;'>
+ <SideBar
+ sideMenuOptions={sideMenuOptions.value}
+ isShowSide={state.isShowSide}
+ />
+ <NLayoutContent native-scrollbar={false} style='padding: 16px 22px;'>
+ <router-view />
+ </NLayoutContent>
</NLayout>
- )
- },
-})
+ </NLayout>
+ )
+}
export default Content
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 0000000..abf5f51
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/store/language/language.ts
@@ -0,0 +1,36 @@
+/*
+ * 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 LanguageState from './types'
+
+export const useLanguageStore = defineStore({
+ id: 'language',
+ state: (): LanguageState => ({
+ menuKey: '',
+ }),
+ getters: {
+ getMenuKey(): string {
+ return this.menuKey
+ },
+ },
+ actions: {
+ setMenuKey(menuKey: string): void {
+ this.menuKey = menuKey
+ },
+ },
+})
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 0000000..5bccca4
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/store/language/types.ts
@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+interface LanguageState {
+ menuKey: string
+}
+
+export default LanguageState
diff --git a/dolphinscheduler-ui-next/src/views/login/index.tsx b/dolphinscheduler-ui-next/src/views/login/index.tsx
index db88412..31fc87e 100644
--- a/dolphinscheduler-ui-next/src/views/login/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/login/index.tsx
@@ -15,86 +15,80 @@
* limitations under the License.
*/
-import { defineComponent, toRefs, withKeys } from 'vue'
+import { withKeys } from 'vue'
import styles from './index.module.scss'
import { NInput, NButton, NSwitch, NForm, NFormItem } from 'naive-ui'
import { useValidate } from './use-validate'
import { useTranslate } from './use-translate'
import { useLogin } from './use-login'
-const login = defineComponent({
- name: 'login',
- setup() {
- const { state, t, locale } = useValidate()
+const login = () => {
+ const { state, t, locale } = useValidate()
- const { handleChange } = useTranslate(locale)
+ const { handleChange } = useTranslate(locale)
- const { handleLogin } = useLogin(state)
+ const { handleLogin } = useLogin(state)
- return { t, handleChange, handleLogin, ...toRefs(state) }
- },
- render() {
- return (
- <div class={styles.container}>
- <div class={styles['language-switch']}>
- <NSwitch
- onUpdateValue={this.handleChange}
- checked-value='en_US'
- unchecked-value='zh_CN'
- >
- {{
- checked: () => 'en_US',
- unchecked: () => 'zh_CN',
- }}
- </NSwitch>
+ return (
+ <div class={styles.container}>
+ <div class={styles['language-switch']}>
+ <NSwitch
+ onUpdateValue={handleChange}
+ checked-value='en_US'
+ unchecked-value='zh_CN'
+ >
+ {{
+ checked: () => 'en_US',
+ unchecked: () => 'zh_CN',
+ }}
+ </NSwitch>
+ </div>
+ <div class={styles['login-model']}>
+ <div class={styles.logo}>
+ <div class={styles['logo-img']} />
</div>
- <div class={styles['login-model']}>
- <div class={styles.logo}>
- <div class={styles['logo-img']} />
- </div>
- <div class={styles['form-model']}>
- <NForm rules={this.rules} ref='loginFormRef'>
- <NFormItem
- label={this.t('login.userName')}
- label-style={{ color: 'black' }}
- path='userName'
- >
- <NInput
- type='text'
- size='large'
- v-model={[this.loginForm.userName, 'value']}
- placeholder={this.t('login.userName_tips')}
- autofocus
- onKeydown={withKeys(this.handleLogin, ['enter'])}
- />
- </NFormItem>
- <NFormItem
- label={this.t('login.userPassword')}
- label-style={{ color: 'black' }}
- path='userPassword'
- >
- <NInput
- type='password'
- size='large'
- v-model={[this.loginForm.userPassword, 'value']}
- placeholder={this.t('login.userPassword_tips')}
- onKeydown={withKeys(this.handleLogin, ['enter'])}
- />
- </NFormItem>
- </NForm>
- <NButton
- round
- type='info'
- style={{ width: '100%' }}
- onClick={this.handleLogin}
+ <div class={styles['form-model']}>
+ <NForm rules={state.rules} ref='loginFormRef'>
+ <NFormItem
+ label={t('login.userName')}
+ label-style={{ color: 'black' }}
+ path='userName'
>
- {this.t('login.login')}
- </NButton>
- </div>
+ <NInput
+ type='text'
+ size='large'
+ v-model={[state.loginForm.userName, 'value']}
+ placeholder={t('login.userName_tips')}
+ autofocus
+ onKeydown={withKeys(handleLogin, ['enter'])}
+ />
+ </NFormItem>
+ <NFormItem
+ label={t('login.userPassword')}
+ label-style={{ color: 'black' }}
+ path='userPassword'
+ >
+ <NInput
+ type='password'
+ size='large'
+ v-model={[state.loginForm.userPassword, 'value']}
+ placeholder={t('login.userPassword_tips')}
+ onKeydown={withKeys(handleLogin, ['enter'])}
+ />
+ </NFormItem>
+ </NForm>
+ <NButton
+ round
+ type='info'
+ style={{ width: '100%' }}
+ onClick={handleLogin}
+ >
+ {t('login.login')}
+ </NButton>
</div>
</div>
- )
- },
-})
+ </div>
+ )
+}
export default login