From 6d6babff5ad91eada45da13ef259877b1cf0b673 Mon Sep 17 00:00:00 2001 From: labbomb <739955946@qq.com> Date: Thu, 6 Jan 2022 00:28:27 +0800 Subject: [PATCH] [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 --- .../components/language/use-dropdown.ts | 2 +- .../content/components/sidebar/index.tsx | 3 +- .../src/layouts/content/index.tsx | 67 ++-- .../src/layouts/content/use-dataList.ts | 359 +++++++++--------- .../src/service/service.ts | 2 +- .../{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(-) rename dolphinscheduler-ui-next/src/store/{language/language.ts => menu/menu.ts} (88%) rename dolphinscheduler-ui-next/src/store/{language => menu}/types.ts (93%) 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 f0dc210430..4715b738ba 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 c4017dbb4c..be124ef156 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({ /> ) - }, + } }) export default Sidebar diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/index.tsx index 6d456c483f..90ee2f0157 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 ( - - + + - - {state.isShowSide && ( - + + {this.isShowSide && ( + )} - + diff --git a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts index f71181aca4..095e0ccbb2 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 953950f0a0..6c3bfc198d 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 => { } service.interceptors.request.use((config: AxiosRequestConfig) => { - 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 abf5f51467..370d23fc1c 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 5bccca4f9b..48cad64821 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 bd22774353..c7d3dbcf78 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) { const handleChange = (value: string) => { - console.log('value', value) + // console.log('value', value) locale.value = value } return {