perf: System ui

Author: fit2cloud-chenyw

frontend/src/components/layout/LayoutDsl.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import Menu from './Menu.vue'
 import Workspace from './Workspace.vue'
 import Person from './Person.vue'
@@ -8,27 +8,30 @@ import LOGO_fold from '@/assets/LOGO-fold.svg'
 import icon_moments_categories_outlined from '@/assets/svg/icon_moments-categories_outlined.svg'
 import icon_side_fold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'
 import icon_side_expand_outlined from '@/assets/svg/icon_side-expand_outlined.svg'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 const router = useRouter()
 const collapse = ref(false)
-
 const handleFoldExpand = () => {
   collapse.value = !collapse.value
 }
 const toWorkspace = () => {
   router.push('/')
 }
+const route = useRoute()
+const showSysmenu = computed(() => {
+  return route.path.includes('/system')
+})
 </script>
 
 <template>
   <div class="system-layout">
     <div class="left-side" :class="collapse && 'left-side-collapse'">
       <LOGO_fold v-if="collapse" style="margin: 0 0 6px 5px"></LOGO_fold>
       <LOGO v-else style="margin-bottom: 6px"></LOGO>
-      <Workspace :collapse="collapse"></Workspace>
+      <Workspace v-if="!showSysmenu" :collapse="collapse"></Workspace>
       <Menu :collapse="collapse"></Menu>
       <div class="bottom">
-        <div class="back-to_workspace" @click="toWorkspace">
+        <div v-if="showSysmenu" class="back-to_workspace" @click="toWorkspace">
           <el-icon size="16">
             <icon_moments_categories_outlined></icon_moments_categories_outlined>
           </el-icon>

frontend/src/components/layout/Menu.vue

@@ -1,25 +1,47 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { ElMenu } from 'element-plus-secondary'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import MenuItem from './MenuItem.vue'
 
+const router = useRouter()
 defineProps({
   collapse: Boolean,
 })
 
 const route = useRoute()
-const menuList = computed(() => route.matched[0]?.children || [])
-
-const activeIndex = computed(() => {
+// const menuList = computed(() => route.matched[0]?.children || [])
+const activeMenu = computed(() => route.path)
+/* const activeIndex = computed(() => {
   const arr = route.path.split('/')
   return arr[arr.length - 1]
+}) */
+
+const showSysmenu = computed(() => {
+  return route.path.includes('/system')
+})
+
+const routerList = computed(() => {
+  if (showSysmenu.value) {
+    return router.getRoutes().filter((route) => route.path.includes('/system') && !route.redirect)
+  }
+  return router.getRoutes().filter((route) => {
+    return (
+      !route.path.includes('canvas') &&
+      !route.path.includes('preview') &&
+      route.path !== '/login' &&
+      !route.path.includes('/system') &&
+      !route.redirect &&
+      route.path !== '/:pathMatch(.*)*' &&
+      !route.path.includes('dsTable')
+    )
+  })
 })
 </script>
 
 <template>
-  <el-menu :default-active="activeIndex" class="ed-menu-vertical" :collapse="collapse">
-    <MenuItem v-for="menu in menuList" :key="menu.path" :menu="menu"></MenuItem>
+  <el-menu :default-active="activeMenu" class="el-menu-demo ed-menu-vertical" :collapse="collapse">
+    <MenuItem v-for="menu in routerList" :key="menu.path" :menu="menu"></MenuItem>
   </el-menu>
 </template>
 

frontend/src/components/layout/MenuItem.vue

@@ -1,13 +1,19 @@
 <script lang="ts">
-import { h } from 'vue'
+import { h, defineComponent } from 'vue'
 import { ElMenuItem, ElSubMenu, ElIcon } from 'element-plus-secondary'
 
 import model from '@/assets/svg/icon_dataset_filled.svg'
 import ds from '@/assets/svg/ds.svg'
-
+import dashboard from '@/assets/svg/dashboard.svg'
+import chat from '@/assets/svg/chat.svg'
+import icon_user from '@/assets/svg/icon_user.svg'
+import { useRouter } from 'vue-router'
 const iconMap = {
   icon_ai: model,
   ds,
+  dashboard,
+  chat,
+  icon_user: icon_user,
 } as { [key: string]: any }
 
 const titleWithIcon = (props: any) => {
@@ -17,16 +23,64 @@ const titleWithIcon = (props: any) => {
     h('span', null, { default: () => title }),
   ]
 }
+const MenuItem = defineComponent({
+  name: 'MenuItem',
+  props: {
+    menu: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const router = useRouter()
+
+    const handleMenuClick = (e: any) => {
+      router.push(e.index)
+    }
+
+    return () => {
+      const { children, hidden, path } = props.menu
+      if (hidden) {
+        return null
+      }
 
-const MenuItem = (props: any) => {
+      if (children?.length) {
+        return h(
+          ElSubMenu,
+          { index: path, onClick: (e: any) => handleMenuClick(e) },
+          {
+            title: () => titleWithIcon(props),
+            default: () => children.map((ele: any) => h(MenuItem, { menu: ele })),
+          }
+        )
+      }
+
+      const { title, icon } = props.menu?.meta || {}
+      const iconCom: any = iconMap[icon] ? ElIcon : null
+      return h(
+        ElMenuItem,
+        { index: path, onClick: (e: any) => handleMenuClick(e) },
+        {
+          default: () => [
+            h(iconCom, null, {
+              default: () => h(iconMap[icon]),
+            }),
+            h('span', null, { default: () => title }),
+          ],
+        }
+      )
+    }
+  },
+})
+/* const MenuItem = (props: any) => {
   const { children, hidden, path } = props.menu
   if (hidden) {
     return null
   }
   if (children?.length) {
     return h(
       ElSubMenu,
-      { index: path },
+      { index: path, onClick: (e: any) => handleMenuClick(e) },
       {
         title: () => titleWithIcon(props),
         default: () => children.map((ele: any) => h(MenuItem, { menu: ele })),
@@ -37,14 +91,14 @@ const MenuItem = (props: any) => {
   const iconCom: any = iconMap[icon] ? ElIcon : null
   return h(
     ElMenuItem,
-    { index: path },
+    { index: path, onClick: (e: any) => handleMenuClick(e) },
     {
       title: h('span', null, { default: () => title }),
       default: h(iconCom, null, {
         default: () => h(iconMap[icon]),
       }),
     }
   )
-}
+} */
 export default MenuItem
 </script>

frontend/src/components/layout/Person.vue

@@ -41,8 +41,8 @@ const languageList = [
     value: 'zh-CN',
   }, */,
 ]
-const handlePersonChange = () => {
-  emit('selectPerson')
+const toSystem = () => {
+  router.push('/system')
 }
 
 const changeLanguage = (lang: string) => {
@@ -88,7 +88,7 @@ const logout = () => {
           <div class="top">{{ name }}</div>
           <div class="bottom">{{ account }}</div>
         </div>
-        <div v-if="isAdmin" class="popover-item" @click="handlePersonChange">
+        <div v-if="isAdmin" class="popover-item" @click="toSystem">
           <el-icon size="16">
             <icon_admin_outlined></icon_admin_outlined>
           </el-icon>

frontend/src/router/index.ts

@@ -22,7 +22,7 @@ const router = createRouter({
     },
     {
       path: '/chat',
-      component: Layout,
+      component: LayoutDsl,
       redirect: '/chat/index',
       children: [
         {