feat：Improve layout modules (#7674)

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

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

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

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

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

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

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

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>

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 {

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 {