refactor:Adjust the Layout structure (#7651)

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 (

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 {

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

dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts

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

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 {

dolphinscheduler-ui-next/src/store/route/types.ts

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

dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts

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

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 (

dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts

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

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>
     )
   },

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

dolphinscheduler-ui-next/src/store/route/route.ts

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