From 0a7610d07047bba2cfc3bfe92bffdf7102c9ba4a Mon Sep 17 00:00:00 2001 From: labbomb <739955946@qq.com> Date: Tue, 28 Dec 2021 16:14:06 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9AImprove=20layout=20modules=20(#767?= =?UTF-8?q?4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../content/components/language/index.tsx | 6 +- .../layouts/content/components/logo/index.tsx | 6 +- .../content/components/navbar/index.tsx | 7 +- .../components/navbar/use-menuClick.ts | 2 +- .../content/components/sidebar/index.tsx | 32 +++++-- .../layouts/content/components/user/index.tsx | 6 +- .../src/layouts/content/index.module.scss | 20 +++++ .../src/layouts/content/index.tsx | 19 ++-- .../src/layouts/content/use-dataList.ts | 86 ++++++++++--------- .../src/views/login/use-translate.ts | 1 + 10 files changed, 117 insertions(+), 68 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/layouts/content/index.module.scss 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 bf7fe0e82d..efa22121a3 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/language/index.tsx +++ b/dolphinscheduler-ui-next/src/layouts/content/components/language/index.tsx @@ -21,8 +21,8 @@ import styles from './index.module.scss' import { DownOutlined } from '@vicons/antd' import { useDropDown } from './use-dropdown' -const language = defineComponent({ - name: 'language', +const Language = defineComponent({ + name: 'Language', props: { languageOptions: { type: Array as PropType, @@ -53,4 +53,4 @@ const language = defineComponent({ }, }) -export default language +export default Language diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx index 3fe91e2dcc..b7c3de4215 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx +++ b/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx @@ -19,8 +19,8 @@ import { defineComponent } from 'vue' import { useThemeStore } from '@/store/theme/theme' import styles from './index.module.scss' -const logo = defineComponent({ - name: 'logo', +const Logo = defineComponent({ + name: 'Logo', setup() { const themeStore = useThemeStore() @@ -38,4 +38,4 @@ const logo = defineComponent({ }, }) -export default logo +export default Logo diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx index 45a850f3b6..f7f09411f6 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx +++ b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx @@ -24,8 +24,9 @@ import User from '../user' import Theme from '../theme' import { useMenuClick } from './use-menuClick' -const navbar = defineComponent({ - name: 'navbar', +const Navbar = defineComponent({ + name: 'Navbar', + emits: ['handleMenuClick'], props: { headerMenuOptions: { type: Array as PropType, @@ -66,4 +67,4 @@ const navbar = defineComponent({ }, }) -export default navbar +export default Navbar 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 5acd5253ed..eb2aaf605b 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 @@ -20,7 +20,7 @@ import type { Router } from 'vue-router' import { MenuOption } from 'naive-ui' import { SetupContext } from 'vue' -export function useMenuClick(ctx: SetupContext>) { +export function useMenuClick(ctx: SetupContext<"handleMenuClick"[]>) { const router: Router = useRouter() const handleMenuClick = (key: string, item: MenuOption) => { 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 bcf93f26a8..07ee452aa5 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx +++ b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx @@ -15,22 +15,36 @@ * limitations under the License. */ -import { defineComponent, toRefs } from 'vue' +import { defineComponent, PropType } from 'vue' import styles from './index.module.scss' import { NLayoutSider, NMenu } from 'naive-ui' -const sidebar = defineComponent({ - name: 'sidebar', +const Sidebar = defineComponent({ + name: 'Sidebar', + props: { + sideMenuOptions: { + type: Array as PropType, + default: [], + }, + isShowSide: { + type: Boolean as PropType, + default: false, + } + }, setup() { return {} }, render() { - return ( - - - - ) + if (this.isShowSide) { + return ( + + + + ) + } else { + return + } }, }) -export default sidebar +export default Sidebar diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/user/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/user/index.tsx index 1519dc52d7..1ba1e529ad 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/user/index.tsx +++ b/dolphinscheduler-ui-next/src/layouts/content/components/user/index.tsx @@ -21,8 +21,8 @@ import styles from './index.module.scss' import { DownOutlined, UserOutlined } from '@vicons/antd' import { useDropDown } from './use-dropdown' -const user = defineComponent({ - name: 'user', +const User = defineComponent({ + name: 'User', props: { profileOptions: { type: Array as PropType, @@ -55,4 +55,4 @@ const user = defineComponent({ }, }) -export default user +export default User diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.module.scss b/dolphinscheduler-ui-next/src/layouts/content/index.module.scss new file mode 100644 index 0000000000..4da858d669 --- /dev/null +++ b/dolphinscheduler-ui-next/src/layouts/content/index.module.scss @@ -0,0 +1,20 @@ +/* + * 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. + */ + +.content { + padding: 12px; +} \ No newline at end of file diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/index.tsx index 4f6e604940..b588bc02bf 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx +++ b/dolphinscheduler-ui-next/src/layouts/content/index.tsx @@ -15,8 +15,9 @@ * limitations under the License. */ -import { defineComponent, toRefs } from 'vue' +import { defineComponent, ref, toRefs } from 'vue' import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui' +import styles from './index.module.scss' import NavBar from './components/navbar' import SideBar from './components/sidebar' @@ -26,11 +27,17 @@ const Content = defineComponent({ name: 'Content', setup() { const { state, getHeaderMenuOptions } = useDataList() + const headerMenuOptions = getHeaderMenuOptions(state.menuOptions) + + const sideMenuOptions = ref() + const getSideMenuOptions = (item: any) => { - console.log('123', item) + sideMenuOptions.value = state.menuOptions.filter(menu => menu.key === item.key)[0].children || [] + state.isShowSide = (sideMenuOptions.value.length !== 0) } - return { ...toRefs(state), headerMenuOptions, getSideMenuOptions } + + return { ...toRefs(state), headerMenuOptions, getSideMenuOptions, sideMenuOptions } }, render() { return ( @@ -41,11 +48,11 @@ const Content = defineComponent({ headerMenuOptions={this.headerMenuOptions} languageOptions={this.languageOptions} profileOptions={this.profileOptions} - > + /> - - + + diff --git a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts index 5404ccf304..f6e27e5884 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts +++ b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts @@ -26,6 +26,20 @@ import { SafetyCertificateOutlined, UserOutlined, LogoutOutlined, + FundProjectionScreenOutlined, + PartitionOutlined, + SettingOutlined, + FileSearchOutlined, + RobotOutlined, + AppstoreOutlined, + UsergroupAddOutlined, + UserAddOutlined, + WarningOutlined, + InfoCircleOutlined, + ControlOutlined, + SlackOutlined, + EnvironmentOutlined, + KeyOutlined } from '@vicons/antd' export function useDataList() { @@ -47,34 +61,31 @@ export function useDataList() { { label: '工作流监控', key: 'workflow-monitoring', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(FundProjectionScreenOutlined), }, { label: '工作流关系', key: 'workflow-relationships', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(PartitionOutlined), }, { label: '工作流', key: 'workflow', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(SettingOutlined), children: [ { label: '工作流定义', - key: 'workflow-definition', - icon: renderIcon(ProfileOutlined), + key: 'workflow-definition' }, { label: '工作流实例', - key: 'workflow-instance', - icon: renderIcon(ProfileOutlined), + key: 'workflow-instance' }, { label: '任务实例', - key: 'task-instance', - icon: renderIcon(ProfileOutlined), - }, - ], + key: 'task-instance' + } + ] }, ], }, @@ -86,24 +97,22 @@ export function useDataList() { { label: '文件管理', key: 'file-management', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(FileSearchOutlined), }, { label: 'UDF管理', key: 'UDF-management', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(RobotOutlined), children: [ { label: '资源管理', - key: 'resource-management', - icon: renderIcon(ProfileOutlined), + key: 'resource-management' }, { label: '函数管理', - key: 'function-management', - icon: renderIcon(ProfileOutlined), - }, - ], + key: 'function-management' + } + ] }, ], }, @@ -120,34 +129,30 @@ export function useDataList() { { label: '服务管理', key: 'service-management', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(AppstoreOutlined), children: [ { label: 'Master', - key: 'master', - icon: renderIcon(ProfileOutlined), + key: 'master' }, { label: 'Worker', - key: 'worker', - icon: renderIcon(ProfileOutlined), + key: 'worker' }, { label: 'DB', - key: 'DB', - icon: renderIcon(ProfileOutlined), - }, - ], + key: 'DB' + } + ] }, { label: '统计管理', key: 'statistical-management', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(AppstoreOutlined), children: [ { label: 'Statistics', - key: 'statistics', - icon: renderIcon(ProfileOutlined), + key: 'statistics' }, ], }, @@ -161,42 +166,42 @@ export function useDataList() { { label: '租户管理', key: 'tenant-management', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(UsergroupAddOutlined), }, { label: '用户管理', key: 'user-management', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(UserAddOutlined), }, { label: '告警组管理', key: 'alarm-group-management', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(WarningOutlined), }, { label: '告警实例管理', key: 'alarm-instance-management', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(InfoCircleOutlined), }, { label: 'Worker分组管理', key: 'worker-group-management', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(ControlOutlined), }, { label: 'Yarn 队列管理', key: 'yarn-queue-management', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(SlackOutlined), }, { label: '环境管理', key: 'environmental-management', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(EnvironmentOutlined), }, { label: '令牌管理', key: 'token-management', - icon: renderIcon(ProfileOutlined), + icon: renderIcon(KeyOutlined), }, ], }, @@ -241,9 +246,10 @@ export function useDataList() { } const state = reactive({ + isShowSide: false, menuOptions: menuOptions, languageOptions: languageOptions, - profileOptions: profileOptions, + profileOptions: profileOptions }) return { diff --git a/dolphinscheduler-ui-next/src/views/login/use-translate.ts b/dolphinscheduler-ui-next/src/views/login/use-translate.ts index 859ba2eddc..bd22774353 100644 --- a/dolphinscheduler-ui-next/src/views/login/use-translate.ts +++ b/dolphinscheduler-ui-next/src/views/login/use-translate.ts @@ -19,6 +19,7 @@ import { WritableComputedRef } from 'vue' export function useTranslate(locale: WritableComputedRef) { const handleChange = (value: string) => { + console.log('value', value) locale.value = value } return {