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 01:32:23 UTC
[dolphinscheduler] branch dev updated: refactor:Adjust the Layout structure (#7651)
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 b2e2de7 refactor:Adjust the Layout structure (#7651)
b2e2de7 is described below
commit b2e2de7a5e7c172cc5d4923783f6e5e53a83da44
Author: labbomb <73...@qq.com>
AuthorDate: Tue Dec 28 09:32:17 2021 +0800
refactor:Adjust the Layout structure (#7651)
---
.../layouts/content/components/language/index.tsx | 15 +-
.../content/components/language/use-dropdown.ts | 4 +-
.../layouts/content/components/navbar/index.tsx | 32 ++-
.../content/components/navbar/use-dataList.ts | 75 ------
.../content/components/navbar/use-menuClick.ts | 8 +-
.../content/components/sidebar/index.module.scss} | 9 -
.../use-dataList.ts => sidebar/index.tsx} | 38 ++--
.../src/layouts/content/components/user/index.tsx | 12 +-
.../content/components/user/use-dataList.ts | 47 ----
.../src/layouts/content/index.tsx | 28 ++-
.../src/layouts/content/use-dataList.ts | 251 +++++++++++++++++++++
dolphinscheduler-ui-next/src/store/route/route.ts | 46 ----
12 files changed, 338 insertions(+), 227 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 b921423..bf7fe0e 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/language/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/language/index.tsx
@@ -15,19 +15,24 @@
* limitations under the License.
*/
-import { defineComponent, toRefs } from 'vue'
+import { defineComponent, ref, PropType } from 'vue'
import { NDropdown, NIcon, NButton } from 'naive-ui'
import styles from './index.module.scss'
import { DownOutlined } from '@vicons/antd'
-import { useDataList } from './use-dataList'
import { useDropDown } from './use-dropdown'
const language = defineComponent({
name: 'language',
+ props: {
+ languageOptions: {
+ type: Array as PropType<any>,
+ default: [],
+ },
+ },
setup() {
- const { state } = useDataList()
- const { handleSelect } = useDropDown(state)
- return { ...toRefs(state), handleSelect }
+ const chooseVal = ref('中文')
+ const { handleSelect } = useDropDown(chooseVal)
+ return { handleSelect, chooseVal }
},
render() {
return (
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 5585516..f0dc210 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
@@ -18,12 +18,12 @@
import { DropdownOption } from 'naive-ui'
import { useI18n } from 'vue-i18n'
-export function useDropDown(state: any) {
+export function useDropDown(chooseVal: any) {
const { locale } = useI18n()
const handleSelect = (key: string | number, option: DropdownOption) => {
console.log(key, option)
- state.chooseVal = option.label
+ chooseVal.value = option.label
locale.value = key as string
}
return {
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 0cc5e7c..08a105a 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx
@@ -15,21 +15,33 @@
* limitations under the License.
*/
-import { defineComponent, toRefs } from 'vue'
+import { defineComponent, PropType } from 'vue'
import styles from './index.module.scss'
import { NMenu } from 'naive-ui'
import Logo from '../logo'
import Language from '../language'
import User from '../user'
-import { useDataList } from './use-dataList'
import { useMenuClick } from './use-menuClick'
const navbar = defineComponent({
name: 'navbar',
- setup() {
- const { state } = useDataList()
- const { handleMenuClick } = useMenuClick()
- return { ...toRefs(state), handleMenuClick }
+ props: {
+ headerMenuOptions: {
+ type: Array as PropType<any>,
+ default: [],
+ },
+ languageOptions: {
+ type: Array as PropType<any>,
+ default: [],
+ },
+ profileOptions: {
+ type: Array as PropType<any>,
+ default: [],
+ },
+ },
+ setup(props, ctx) {
+ const { handleMenuClick } = useMenuClick(ctx)
+ return { handleMenuClick }
},
render() {
return (
@@ -37,15 +49,15 @@ const navbar = defineComponent({
<Logo />
<div class={styles.nav}>
<NMenu
- v-model={[this.activeKey, 'value']}
+ default-value='home'
mode='horizontal'
- options={this.menuOptions}
+ options={this.headerMenuOptions}
onUpdateValue={this.handleMenuClick}
/>
</div>
<div class={styles.settings}>
- <Language />
- <User />
+ <Language languageOptions={this.languageOptions} />
+ <User profileOptions={this.profileOptions} />
</div>
</div>
)
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts
deleted file mode 100644
index dff3046..0000000
--- a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * 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.
- */
-
-import { reactive, ref, h } from 'vue'
-import { NIcon } from 'naive-ui'
-import {
- HomeOutlined,
- ProfileOutlined,
- FolderOutlined,
- DatabaseOutlined,
- DesktopOutlined,
- SafetyCertificateOutlined,
-} from '@vicons/antd'
-
-export function useDataList() {
- const renderIcon = (icon: any) => {
- return () => h(NIcon, null, { default: () => h(icon) })
- }
-
- const menuOptions = [
- {
- label: '首页',
- key: 'home',
- icon: renderIcon(HomeOutlined),
- },
- {
- label: '项目管理',
- key: 'project',
- icon: renderIcon(ProfileOutlined),
- },
- {
- label: '资源中心',
- key: 'resources',
- icon: renderIcon(FolderOutlined),
- },
- {
- label: '数据源中心',
- key: 'datasource',
- icon: renderIcon(DatabaseOutlined),
- },
- {
- label: '监控中心',
- key: 'monitor',
- icon: renderIcon(DesktopOutlined),
- },
- {
- label: '安全中心',
- key: 'security',
- icon: renderIcon(SafetyCertificateOutlined),
- },
- ]
-
- const state = reactive({
- activeKey: ref('home'),
- menuOptions: menuOptions,
- })
-
- return {
- state,
- }
-}
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 8804db7..5acd525 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
@@ -18,13 +18,15 @@
import { useRouter } from 'vue-router'
import type { Router } from 'vue-router'
import { MenuOption } from 'naive-ui'
+import { SetupContext } from 'vue'
-export function useMenuClick() {
+export function useMenuClick(ctx: SetupContext<Record<string, any>>) {
const router: Router = useRouter()
const handleMenuClick = (key: string, item: MenuOption) => {
- console.log(key, item)
- router.push({ path: 'home' })
+ // console.log(key, item)
+ ctx.emit('handleMenuClick', item)
+ // router.push({ path: 'home' })
}
return {
diff --git a/dolphinscheduler-ui-next/src/store/route/types.ts b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.module.scss
similarity index 83%
rename from dolphinscheduler-ui-next/src/store/route/types.ts
rename to dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.module.scss
index 415839a..3e7c6c2 100644
--- a/dolphinscheduler-ui-next/src/store/route/types.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.module.scss
@@ -14,12 +14,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { RouteRecordRaw } from 'vue-router'
-
-interface RouteState {
- menus: RouteRecordRaw[]
- routers: any[]
- addRouters: any[]
-}
-
-export default RouteState
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
similarity index 67%
rename from dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts
rename to dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
index ef7f502..bcf93f2 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
@@ -15,26 +15,22 @@
* limitations under the License.
*/
-import { reactive, ref } from 'vue'
+import { defineComponent, toRefs } from 'vue'
+import styles from './index.module.scss'
+import { NLayoutSider, NMenu } from 'naive-ui'
-export function useDataList() {
- const languageOptions = [
- {
- label: 'English',
- key: 'en_US',
- },
- {
- label: '中文',
- key: 'zh_CN',
- },
- ]
+const sidebar = defineComponent({
+ name: 'sidebar',
+ setup() {
+ return {}
+ },
+ render() {
+ return (
+ <NLayoutSider bordered nativeScrollbar={false} show-trigger='bar'>
+ <NMenu />
+ </NLayoutSider>
+ )
+ },
+})
- const state = reactive({
- chooseVal: ref('中文'),
- languageOptions: languageOptions,
- })
-
- return {
- state,
- }
-}
+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 9e0c002..1519dc5 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/user/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/user/index.tsx
@@ -15,19 +15,23 @@
* limitations under the License.
*/
-import { defineComponent, toRefs } from 'vue'
+import { defineComponent, PropType } from 'vue'
import { NDropdown, NIcon, NButton } from 'naive-ui'
import styles from './index.module.scss'
import { DownOutlined, UserOutlined } from '@vicons/antd'
-import { useDataList } from './use-dataList'
import { useDropDown } from './use-dropdown'
const user = defineComponent({
name: 'user',
+ props: {
+ profileOptions: {
+ type: Array as PropType<any>,
+ default: [],
+ },
+ },
setup() {
- const { state } = useDataList()
const { handleSelect } = useDropDown()
- return { ...toRefs(state), handleSelect }
+ return { handleSelect }
},
render() {
return (
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts
deleted file mode 100644
index c19beb3..0000000
--- a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * 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.
- */
-
-import { reactive, h } from 'vue'
-import { NIcon } from 'naive-ui'
-import { UserOutlined, LogoutOutlined } from '@vicons/antd'
-
-export function useDataList() {
- const renderIcon = (icon: any) => {
- return () => h(NIcon, null, { default: () => h(icon) })
- }
-
- const profileOptions = [
- {
- label: '用户信息',
- key: 'profile',
- icon: renderIcon(UserOutlined),
- },
- {
- label: '退出登录',
- key: 'logout',
- icon: renderIcon(LogoutOutlined),
- },
- ]
-
- const state = reactive({
- profileOptions: profileOptions,
- })
-
- return {
- state,
- }
-}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
index e88651c..994dab6 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
@@ -15,21 +15,39 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
+import { defineComponent, 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'
const Content = defineComponent({
name: 'Content',
+ setup() {
+ const { state, getHeaderMenuOptions } = useDataList()
+ const headerMenuOptions = getHeaderMenuOptions(state.menuOptions)
+ const getSideMenuOptions = (item: any) => {
+ console.log('123', item)
+ }
+ return { ...toRefs(state), headerMenuOptions, getSideMenuOptions }
+ },
render() {
return (
<NLayout>
<NLayoutHeader>
- <NavBar></NavBar>
+ <NavBar
+ onHandleMenuClick={this.getSideMenuOptions}
+ headerMenuOptions={this.headerMenuOptions}
+ languageOptions={this.languageOptions}
+ profileOptions={this.profileOptions}
+ ></NavBar>
</NLayoutHeader>
- <NLayoutContent>
- <router-view />
- </NLayoutContent>
+ <NLayout has-sider>
+ <SideBar></SideBar>
+ <NLayoutContent>
+ <router-view />
+ </NLayoutContent>
+ </NLayout>
</NLayout>
)
},
diff --git a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
new file mode 100644
index 0000000..e69cacb
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
@@ -0,0 +1,251 @@
+/*
+ * 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.
+ */
+
+import { reactive, h } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+ HomeOutlined,
+ ProfileOutlined,
+ FolderOutlined,
+ DatabaseOutlined,
+ DesktopOutlined,
+ SafetyCertificateOutlined,
+ UserOutlined,
+ LogoutOutlined
+} from '@vicons/antd'
+
+export function useDataList() {
+ const renderIcon = (icon: any) => {
+ return () => h(NIcon, null, { default: () => h(icon) })
+ }
+
+ const menuOptions = [
+ {
+ label: '首页',
+ key: 'home',
+ icon: renderIcon(HomeOutlined),
+ },
+ {
+ label: '项目管理',
+ key: 'project',
+ icon: renderIcon(ProfileOutlined),
+ children: [
+ {
+ label: '工作流监控',
+ key: 'workflow-monitoring',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: '工作流关系',
+ key: 'workflow-relationships',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: '工作流',
+ key: 'workflow',
+ icon: renderIcon(ProfileOutlined),
+ children: [
+ {
+ label: '工作流定义',
+ key: 'workflow-definition',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: '工作流实例',
+ key: 'workflow-instance',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: '任务实例',
+ key: 'task-instance',
+ icon: renderIcon(ProfileOutlined),
+ },
+ ]
+ },
+ ]
+ },
+ {
+ label: '资源中心',
+ key: 'resources',
+ icon: renderIcon(FolderOutlined),
+ children: [
+ {
+ label: '文件管理',
+ key: 'file-management',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: 'UDF管理',
+ key: 'UDF-management',
+ icon: renderIcon(ProfileOutlined),
+ children: [
+ {
+ label: '资源管理',
+ key: 'resource-management',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: '函数管理',
+ key: 'function-management',
+ icon: renderIcon(ProfileOutlined),
+ }
+ ]
+ },
+ ]
+ },
+ {
+ label: '数据源中心',
+ key: 'datasource',
+ icon: renderIcon(DatabaseOutlined),
+ },
+ {
+ label: '监控中心',
+ key: 'monitor',
+ icon: renderIcon(DesktopOutlined),
+ children: [
+ {
+ label: '服务管理',
+ key: 'service-management',
+ icon: renderIcon(ProfileOutlined),
+ children: [
+ {
+ label: 'Master',
+ key: 'master',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: 'Worker',
+ key: 'worker',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: 'DB',
+ key: 'DB',
+ icon: renderIcon(ProfileOutlined),
+ }
+ ]
+ },
+ {
+ label: '统计管理',
+ key: 'statistical-management',
+ icon: renderIcon(ProfileOutlined),
+ children: [
+ {
+ label: 'Statistics',
+ key: 'statistics',
+ icon: renderIcon(ProfileOutlined),
+ },
+ ]
+ },
+ ]
+ },
+ {
+ label: '安全中心',
+ key: 'security',
+ icon: renderIcon(SafetyCertificateOutlined),
+ children: [
+ {
+ label: '租户管理',
+ key: 'tenant-management',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: '用户管理',
+ key: 'user-management',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: '告警组管理',
+ key: 'alarm-group-management',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: '告警实例管理',
+ key: 'alarm-instance-management',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: 'Worker分组管理',
+ key: 'worker-group-management',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: 'Yarn 队列管理',
+ key: 'yarn-queue-management',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: '环境管理',
+ key: 'environmental-management',
+ icon: renderIcon(ProfileOutlined),
+ },
+ {
+ label: '令牌管理',
+ key: 'token-management',
+ icon: renderIcon(ProfileOutlined),
+ },
+ ]
+ },
+ ]
+
+ const languageOptions = [
+ {
+ label: 'English',
+ key: 'en_US',
+ },
+ {
+ label: '中文',
+ key: 'zh_CN',
+ },
+ ]
+
+ const profileOptions = [
+ {
+ label: '用户信息',
+ key: 'profile',
+ icon: renderIcon(UserOutlined),
+ },
+ {
+ label: '退出登录',
+ key: 'logout',
+ icon: renderIcon(LogoutOutlined),
+ },
+ ]
+
+ const getHeaderMenuOptions = (MenuOptions: any) => {
+ let headerMenuOptions = []
+ headerMenuOptions = MenuOptions.map((item: { label: string; key: string; icon: any }) => {
+ return {
+ label: item.label,
+ key: item.key,
+ icon: item.icon,
+ }
+ })
+ return headerMenuOptions
+ }
+
+ const state = reactive({
+ menuOptions: menuOptions,
+ languageOptions: languageOptions,
+ profileOptions: profileOptions,
+ })
+
+ return {
+ state,
+ getHeaderMenuOptions
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/store/route/route.ts b/dolphinscheduler-ui-next/src/store/route/route.ts
deleted file mode 100644
index 8d85a51..0000000
--- a/dolphinscheduler-ui-next/src/store/route/route.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * 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.
- */
-
-import { toRaw } from 'vue'
-import { defineStore } from 'pinia'
-import RouteState from './types'
-import { RouteRecordRaw } from 'vue-router'
-
-export const useAsyncRouteStore = defineStore({
- id: 'route',
- state: (): RouteState => ({
- menus: [],
- routers: [],
- addRouters: [],
- }),
- getters: {
- getMenus(): RouteRecordRaw[] {
- return this.menus
- },
- getRouters(): RouteRecordRaw[] {
- return toRaw(this.addRouters)
- },
- },
- actions: {
- setMenus(menus) {
- this.menus = menus
- },
- async generateRouters(routes) {
- console.log(routes)
- },
- },
-})