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 2021/12/28 08:14:11 UTC
[dolphinscheduler] branch dev updated: feat：Improve layout modules (#7674)
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 0a7610d feat：Improve layout modules (#7674)
0a7610d is described below
commit 0a7610d07047bba2cfc3bfe92bffdf7102c9ba4a
Author: labbomb <73...@qq.com>
AuthorDate: Tue Dec 28 16:14:06 2021 +0800
feat：Improve layout modules (#7674)
---
.../layouts/content/components/language/index.tsx | 6 +-
.../src/layouts/content/components/logo/index.tsx | 6 +-
.../layouts/content/components/navbar/index.tsx | 7 +-
.../content/components/navbar/use-menuClick.ts | 2 +-
.../layouts/content/components/sidebar/index.tsx | 32 +++++---
.../src/layouts/content/components/user/index.tsx | 6 +-
.../content/index.module.scss} | 13 +---
.../src/layouts/content/index.tsx | 19 +++--
.../src/layouts/content/use-dataList.ts | 86 ++++++++++++----------
.../src/views/login/use-translate.ts | 1 +
10 files changed, 100 insertions(+), 78 deletions(-)
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 bf7fe0e..efa2212 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<any>,
@@ -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 3fe91e2..b7c3de4 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 45a850f..f7f0941 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<any>,
@@ -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 5acd525..eb2aaf6 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<Record<string, any>>) {
+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 bcf93f2..07ee452 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<any>,
+ default: [],
+ },
+ isShowSide: {
+ type: Boolean as PropType<boolean>,
+ default: false,
+ }
+ },
setup() {
return {}
},
render() {
- return (
- <NLayoutSider bordered nativeScrollbar={false} show-trigger='bar'>
- <NMenu />
- </NLayoutSider>
- )
+ if (this.isShowSide) {
+ return (
+ <NLayoutSider bordered nativeScrollbar={false} show-trigger='bar'>
+ <NMenu options={this.sideMenuOptions} default-expand-all />
+ </NLayoutSider>
+ )
+ } 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 1519dc5..1ba1e52 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<any>,
@@ -55,4 +55,4 @@ const user = defineComponent({
},
})
-export default user
+export default User
diff --git a/dolphinscheduler-ui-next/src/views/login/use-translate.ts b/dolphinscheduler-ui-next/src/layouts/content/index.module.scss
similarity index 78%
copy from dolphinscheduler-ui-next/src/views/login/use-translate.ts
copy to dolphinscheduler-ui-next/src/layouts/content/index.module.scss
index 859ba2e..4da858d 100644
--- a/dolphinscheduler-ui-next/src/views/login/use-translate.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/index.module.scss
@@ -15,13 +15,6 @@
* limitations under the License.
*/
-import { WritableComputedRef } from 'vue'
-
-export function useTranslate(locale: WritableComputedRef<string>) {
- const handleChange = (value: string) => {
- locale.value = value
- }
- return {
- handleChange,
- }
-}
+.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 4f6e604..b588bc0 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}
- ></NavBar>
+ />
</NLayoutHeader>
<NLayout has-sider>
- <SideBar></SideBar>
- <NLayoutContent>
+ <SideBar sideMenuOptions={this.sideMenuOptions} isShowSide={this.isShowSide} />
+ <NLayoutContent class={styles.content}>
<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 5404ccf..f6e27e5 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 859ba2e..bd22774 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<string>) {
const handleChange = (value: string) => {
+ console.log('value', value)
locale.value = value
}
return {