You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by zh...@apache.org on 2022/01/05 16:28:39 UTC
[dolphinscheduler] branch dev updated: [Feature][UI Next]Modify Layout in multiple languages (#7830)
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 6d6babf [Feature][UI Next]Modify Layout in multiple languages (#7830)
6d6babf is described below
commit 6d6babff5ad91eada45da13ef259877b1cf0b673
Author: labbomb <73...@qq.com>
AuthorDate: Thu Jan 6 00:28:27 2022 +0800
[Feature][UI Next]Modify Layout in multiple languages (#7830)
* Rewrite the page as defineComponent
* Fixed layout multilanguage problem
* Fixed layout multilanguage problem
* Modify the fields
* License
---
.../content/components/language/use-dropdown.ts | 2 +-
.../layouts/content/components/sidebar/index.tsx | 3 +-
.../src/layouts/content/index.tsx | 67 ++--
.../src/layouts/content/use-dataList.ts | 359 +++++++++++----------
dolphinscheduler-ui-next/src/service/service.ts | 2 +-
.../store/{language/language.ts => menu/menu.ts} | 8 +-
.../src/store/{language => menu}/types.ts | 4 +-
.../src/views/login/use-translate.ts | 2 +-
8 files changed, 231 insertions(+), 216 deletions(-)
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 f0dc210..4715b73 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
@@ -22,7 +22,7 @@ export function useDropDown(chooseVal: any) {
const { locale } = useI18n()
const handleSelect = (key: string | number, option: DropdownOption) => {
- console.log(key, option)
+ // console.log(key, option)
chooseVal.value = option.label
locale.value = key as string
}
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 c4017db..be124ef 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
@@ -29,7 +29,6 @@ const Sidebar = defineComponent({
},
setup() {},
render() {
- console.log('props', this)
const collapsedRef = ref(false)
const defaultExpandedKeys = [
'workflow',
@@ -54,7 +53,7 @@ const Sidebar = defineComponent({
/>
</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 6d456c4..90ee2f0 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
@@ -15,55 +15,68 @@
* limitations under the License.
*/
-import { defineComponent, ref, watch } from 'vue'
+import { defineComponent, onMounted, watch, toRefs } 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'
+import { useMenuStore } from '@/store/menu/menu'
import { useI18n } from 'vue-i18n'
const Content = defineComponent({
name: 'Content',
setup() {
- const languageStore = useLanguageStore()
+ const menuStore = useMenuStore()
+ const { state, changeMenuOption, changeHeaderMenuOptions } = useDataList()
- watch(useI18n().locale, () => {
- console.log(123)
+ onMounted(() => {
+ menuStore.setMenuKey('home')
+ changeMenuOption(state)
+ changeHeaderMenuOptions(state)
+ genSideMenu(state)
})
- return { languageStore }
- },
- render() {
- const { state, getHeaderMenuOptions } = useDataList()
-
- const headerMenuOptions = getHeaderMenuOptions(state.menuOptions)
+ watch(useI18n().locale, () => {
+ changeMenuOption(state)
+ changeHeaderMenuOptions(state)
+ genSideMenu(state)
+ })
- const sideMenuOptions = ref()
+ const genSideMenu = (state: any) => {
+ const key = menuStore.getMenuKey
+ state.sideMenuOptions =
+ state.menuOptions.filter((menu: { key: string }) => menu.key === key)[0].children || []
+ state.isShowSide = state.sideMenuOptions.length !== 0
+ }
const getSideMenuOptions = (item: any) => {
- this.languageStore.setMenuKey(item.key)
- sideMenuOptions.value =
- state.menuOptions.filter((menu) => menu.key === item.key)[0].children ||
- []
- state.isShowSide = sideMenuOptions.value.length !== 0
+ menuStore.setMenuKey(item.key)
+ genSideMenu(state)
}
+ return {
+ ...toRefs(state),
+ menuStore,
+ changeMenuOption,
+ getSideMenuOptions
+ }
+ },
+ render() {
return (
- <NLayout style='height: 100%;'>
- <NLayoutHeader style='height: 65px;'>
+ <NLayout style='height: 100%'>
+ <NLayoutHeader style='height: 65px'>
<NavBar
- onHandleMenuClick={getSideMenuOptions}
- headerMenuOptions={headerMenuOptions}
- languageOptions={state.languageOptions}
- profileOptions={state.userDropdownOptions}
+ onHandleMenuClick={this.getSideMenuOptions}
+ headerMenuOptions={this.headerMenuOptions}
+ languageOptions={this.languageOptions}
+ profileOptions={this.userDropdownOptions}
/>
</NLayoutHeader>
- <NLayout has-sider position='absolute' style='top: 65px;'>
- {state.isShowSide && (
- <SideBar sideMenuOptions={sideMenuOptions.value} />
+ <NLayout has-sider position='absolute' style='top: 65px'>
+ {this.isShowSide && (
+ <SideBar sideMenuOptions={this.sideMenuOptions} />
)}
- <NLayoutContent native-scrollbar={false} style='padding: 16px 22px;'>
+ <NLayoutContent native-scrollbar={false} style='padding: 16px 22px'>
<router-view />
</NLayoutContent>
</NLayout>
diff --git a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
index f71181a..095e0cc 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
@@ -3,13 +3,13 @@
* 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 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,
+ * 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.
@@ -51,170 +51,6 @@ export function useDataList() {
return () => h(NIcon, null, { default: () => h(icon) })
}
- const menuOptions = [
- {
- label: t('menu.home'),
- key: 'home',
- icon: renderIcon(HomeOutlined),
- },
- {
- label: t('menu.project'),
- key: 'project',
- icon: renderIcon(ProfileOutlined),
- children: [
- {
- label: t('menu.workflow_monitoring'),
- key: 'workflow-monitoring',
- icon: renderIcon(FundProjectionScreenOutlined),
- },
- {
- label: t('menu.workflow_relationships'),
- key: 'workflow-relationships',
- icon: renderIcon(PartitionOutlined),
- },
- {
- label: t('menu.workflow'),
- key: 'workflow',
- icon: renderIcon(SettingOutlined),
- children: [
- {
- label: t('menu.workflow_definition'),
- key: 'workflow-definition',
- },
- {
- label: t('menu.workflow_instance'),
- key: 'workflow-instance',
- },
- {
- label: t('menu.task_instance'),
- key: 'task-instance',
- },
- {
- label: t('menu.task_definition'),
- key: 'task-definition',
- },
- ],
- },
- ],
- },
- {
- label: t('menu.resources'),
- key: 'resources',
- icon: renderIcon(FolderOutlined),
- children: [
- {
- label: t('menu.file_manage'),
- key: 'file-manage',
- icon: renderIcon(FileSearchOutlined),
- },
- {
- label: t('menu.udf_manage'),
- key: 'udf-manage',
- icon: renderIcon(RobotOutlined),
- children: [
- {
- label: t('menu.resource_manage'),
- key: 'resource-manage',
- },
- {
- label: t('menu.function_manage'),
- key: 'function-manage',
- },
- ],
- },
- ],
- },
- {
- label: t('menu.datasource'),
- key: 'datasource',
- icon: renderIcon(DatabaseOutlined),
- },
- {
- label: t('menu.monitor'),
- key: 'monitor',
- icon: renderIcon(DesktopOutlined),
- children: [
- {
- label: t('menu.service_manage'),
- key: 'service-manage',
- icon: renderIcon(AppstoreOutlined),
- children: [
- {
- label: t('menu.master'),
- key: 'master',
- },
- {
- label: t('menu.worker'),
- key: 'worker',
- },
- {
- label: t('menu.db'),
- key: 'db',
- },
- ],
- },
- {
- label: t('menu.statistical_manage'),
- key: 'statistical-manage',
- icon: renderIcon(AppstoreOutlined),
- children: [
- {
- label: t('menu.statistics'),
- key: 'statistics',
- },
- ],
- },
- ],
- },
- {
- label: t('menu.security'),
- key: 'security',
- icon: renderIcon(SafetyCertificateOutlined),
- children: [
- {
- label: t('menu.tenant_manage'),
- key: 'tenant-manage',
- icon: renderIcon(UsergroupAddOutlined),
- },
- {
- label: t('menu.user_manage'),
- key: 'user-manage',
- icon: renderIcon(UserAddOutlined),
- },
- {
- label: t('menu.alarm_group_manage'),
- key: 'alarm-group-manage',
- icon: renderIcon(WarningOutlined),
- },
- {
- label: t('menu.alarm_instance_manage'),
- key: 'alarm-instance-manage',
- icon: renderIcon(InfoCircleOutlined),
- },
- {
- label: t('menu.worker_group_manage'),
- key: 'worker-group-manage',
- icon: renderIcon(ControlOutlined),
- },
- {
- label: t('menu.yarn_queue_manage'),
- key: 'yarn-queue-manage',
- icon: renderIcon(SlackOutlined),
- },
- {
- label: t('menu.environmental_manage'),
- key: 'environmental-manage',
- icon: renderIcon(EnvironmentOutlined),
- },
- {
- label: t('menu.token_manage'),
- key: 'token-manage',
- icon: renderIcon(SafetyOutlined),
- },
- ],
- },
- ]
-
const languageOptions = [
{
label: 'English',
@@ -244,9 +80,183 @@ export function useDataList() {
},
]
- const getHeaderMenuOptions = (MenuOptions: any) => {
- let headerMenuOptions = []
- headerMenuOptions = MenuOptions.map(
+ const state = reactive({
+ isShowSide: false,
+ languageOptions,
+ userDropdownOptions,
+ menuOptions: [],
+ headerMenuOptions: [],
+ sideMenuOptions: []
+ })
+
+ const changeMenuOption = (state: any) => {
+ state.menuOptions = [
+ {
+ label: t('menu.home'),
+ key: 'home',
+ icon: renderIcon(HomeOutlined),
+ },
+ {
+ label: t('menu.project'),
+ key: 'project',
+ icon: renderIcon(ProfileOutlined),
+ children: [
+ {
+ label: t('menu.workflow_monitoring'),
+ key: 'workflow-monitoring',
+ icon: renderIcon(FundProjectionScreenOutlined),
+ },
+ {
+ label: t('menu.workflow_relationships'),
+ key: 'workflow-relationships',
+ icon: renderIcon(PartitionOutlined),
+ },
+ {
+ label: t('menu.workflow'),
+ key: 'workflow',
+ icon: renderIcon(SettingOutlined),
+ children: [
+ {
+ label: t('menu.workflow_definition'),
+ key: 'workflow-definition',
+ },
+ {
+ label: t('menu.workflow_instance'),
+ key: 'workflow-instance',
+ },
+ {
+ label: t('menu.task_instance'),
+ key: 'task-instance',
+ },
+ {
+ label: t('menu.task_definition'),
+ key: 'task-definition',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ label: t('menu.resources'),
+ key: 'resources',
+ icon: renderIcon(FolderOutlined),
+ children: [
+ {
+ label: t('menu.file_manage'),
+ key: 'file-manage',
+ icon: renderIcon(FileSearchOutlined),
+ },
+ {
+ label: t('menu.udf_manage'),
+ key: 'udf-manage',
+ icon: renderIcon(RobotOutlined),
+ children: [
+ {
+ label: t('menu.resource_manage'),
+ key: 'resource-manage',
+ },
+ {
+ label: t('menu.function_manage'),
+ key: 'function-manage',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ label: t('menu.datasource'),
+ key: 'datasource',
+ icon: renderIcon(DatabaseOutlined),
+ },
+ {
+ label: t('menu.monitor'),
+ key: 'monitor',
+ icon: renderIcon(DesktopOutlined),
+ children: [
+ {
+ label: t('menu.service_manage'),
+ key: 'service-manage',
+ icon: renderIcon(AppstoreOutlined),
+ children: [
+ {
+ label: t('menu.master'),
+ key: 'master',
+ },
+ {
+ label: t('menu.worker'),
+ key: 'worker',
+ },
+ {
+ label: t('menu.db'),
+ key: 'db',
+ },
+ ],
+ },
+ {
+ label: t('menu.statistical_manage'),
+ key: 'statistical-manage',
+ icon: renderIcon(AppstoreOutlined),
+ children: [
+ {
+ label: t('menu.statistics'),
+ key: 'statistics',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ label: t('menu.security'),
+ key: 'security',
+ icon: renderIcon(SafetyCertificateOutlined),
+ children: [
+ {
+ label: t('menu.tenant_manage'),
+ key: 'tenant-manage',
+ icon: renderIcon(UsergroupAddOutlined),
+ },
+ {
+ label: t('menu.user_manage'),
+ key: 'user-manage',
+ icon: renderIcon(UserAddOutlined),
+ },
+ {
+ label: t('menu.alarm_group_manage'),
+ key: 'alarm-group-manage',
+ icon: renderIcon(WarningOutlined),
+ },
+ {
+ label: t('menu.alarm_instance_manage'),
+ key: 'alarm-instance-manage',
+ icon: renderIcon(InfoCircleOutlined),
+ },
+ {
+ label: t('menu.worker_group_manage'),
+ key: 'worker-group-manage',
+ icon: renderIcon(ControlOutlined),
+ },
+ {
+ label: t('menu.yarn_queue_manage'),
+ key: 'yarn-queue-manage',
+ icon: renderIcon(SlackOutlined),
+ },
+ {
+ label: t('menu.environmental_manage'),
+ key: 'environmental-manage',
+ icon: renderIcon(EnvironmentOutlined),
+ },
+ {
+ label: t('menu.token_manage'),
+ key: 'token-manage',
+ icon: renderIcon(SafetyOutlined),
+ },
+ ],
+ },
+ ]
+ }
+
+ const changeHeaderMenuOptions = (state: any) => {
+ state.headerMenuOptions = state.menuOptions.map(
(item: { label: string; key: string; icon: any }) => {
return {
label: item.label,
@@ -255,18 +265,11 @@ export function useDataList() {
}
}
)
- return headerMenuOptions
}
- const state = reactive({
- isShowSide: false,
- menuOptions,
- languageOptions,
- userDropdownOptions,
- })
-
return {
state,
- getHeaderMenuOptions,
+ changeHeaderMenuOptions,
+ changeMenuOption
}
}
diff --git a/dolphinscheduler-ui-next/src/service/service.ts b/dolphinscheduler-ui-next/src/service/service.ts
index 953950f..6c3bfc1 100644
--- a/dolphinscheduler-ui-next/src/service/service.ts
+++ b/dolphinscheduler-ui-next/src/service/service.ts
@@ -44,7 +44,7 @@ const err = (err: AxiosError): Promise<AxiosError> => {
}
service.interceptors.request.use((config: AxiosRequestConfig<any>) => {
- console.log('config', config)
+ // console.log('config', config)
config.headers && (config.headers.sessionId = userStore.getSessionId)
diff --git a/dolphinscheduler-ui-next/src/store/language/language.ts b/dolphinscheduler-ui-next/src/store/menu/menu.ts
similarity index 88%
rename from dolphinscheduler-ui-next/src/store/language/language.ts
rename to dolphinscheduler-ui-next/src/store/menu/menu.ts
index abf5f51..370d23f 100644
--- a/dolphinscheduler-ui-next/src/store/language/language.ts
+++ b/dolphinscheduler-ui-next/src/store/menu/menu.ts
@@ -16,11 +16,11 @@
*/
import { defineStore } from 'pinia'
-import LanguageState from './types'
+import MenuState from './types'
-export const useLanguageStore = defineStore({
- id: 'language',
- state: (): LanguageState => ({
+export const useMenuStore = defineStore({
+ id: 'menu',
+ state: (): MenuState => ({
menuKey: '',
}),
getters: {
diff --git a/dolphinscheduler-ui-next/src/store/language/types.ts b/dolphinscheduler-ui-next/src/store/menu/types.ts
similarity index 93%
rename from dolphinscheduler-ui-next/src/store/language/types.ts
rename to dolphinscheduler-ui-next/src/store/menu/types.ts
index 5bccca4..48cad64 100644
--- a/dolphinscheduler-ui-next/src/store/language/types.ts
+++ b/dolphinscheduler-ui-next/src/store/menu/types.ts
@@ -15,8 +15,8 @@
* limitations under the License.
*/
-interface LanguageState {
+interface MenuState {
menuKey: string
}
-export default LanguageState
+export default MenuState
diff --git a/dolphinscheduler-ui-next/src/views/login/use-translate.ts b/dolphinscheduler-ui-next/src/views/login/use-translate.ts
index bd22774..c7d3dbc 100644
--- a/dolphinscheduler-ui-next/src/views/login/use-translate.ts
+++ b/dolphinscheduler-ui-next/src/views/login/use-translate.ts
@@ -19,7 +19,7 @@ import { WritableComputedRef } from 'vue'
export function useTranslate(locale: WritableComputedRef<string>) {
const handleChange = (value: string) => {
- console.log('value', value)
+ // console.log('value', value)
locale.value = value
}
return {