github
/
DolphinScheduler
mirror of https://gitee.com/dolphinscheduler/DolphinScheduler.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

[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
3.0.0/version-upgrade
labbomb 3 years ago committed by GitHub
parent
acf9c84c50
commit
6d6babff5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 231 additions and 216 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts
  2. 3
      dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
  3. 67
      dolphinscheduler-ui-next/src/layouts/content/index.tsx
  4. 359
      dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
  5. 2
      dolphinscheduler-ui-next/src/service/service.ts
  6. 8
      dolphinscheduler-ui-next/src/store/menu/menu.ts
  7. 4
      dolphinscheduler-ui-next/src/store/menu/types.ts
  8. 2
      dolphinscheduler-ui-next/src/views/login/use-translate.ts

2
dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts
Unescape View File

@ -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
}

3
dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
Unescape View File

@ -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

67
dolphinscheduler-ui-next/src/layouts/content/index.tsx
Unescape View File

@ -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>

359
dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
Unescape View File

@ -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
}
}

2
dolphinscheduler-ui-next/src/service/service.ts
Unescape View File

@ -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)

8
dolphinscheduler-ui-next/src/store/language/language.ts → dolphinscheduler-ui-next/src/store/menu/menu.ts
Unescape View File

@ -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: {

4
dolphinscheduler-ui-next/src/store/language/types.ts → dolphinscheduler-ui-next/src/store/menu/types.ts
Unescape View File

@ -15,8 +15,8 @@
* limitations under the License.
*/
interface LanguageState {
interface MenuState {
menuKey: string
}
export default LanguageState
export default MenuState

2
dolphinscheduler-ui-next/src/views/login/use-translate.ts
Unescape View File

@ -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 {

Write Preview
Loading…
Cancel
Save