update: 1.优化动态路由,处理路由数据格式；优化layout样式

src/components/Layout/BasicLayoutPage.vue

@@ -21,6 +21,7 @@
 import { ProLayout } from '@/components/Layout'
 import DefaultSetting from '../../../config/config'
 import { useMenuStore } from '@/store/menu'
+import { clearMenuItem } from 'components/Layout/utils'
 
 type StateType = {
   collapsed: boolean
@@ -39,7 +40,7 @@ const layoutConf = reactive({
   siderWidth: DefaultSetting.layout.siderWidth,
   logo: DefaultSetting.layout.logo,
   title: DefaultSetting.layout.title,
-  menuData: menu.menus,
+  menuData: clearMenuItem(menu.siderMenus),
 });
 
 const state = reactive<StateType>({

src/components/Layout/components/Header/index.tsx

@@ -32,7 +32,7 @@ export const HeaderView = defineComponent({
             height: `${headerHeight.value}px`,
             lineHeight: `${headerHeight.value}px`,
             width: `100%`,
-
+            background: 'transparent'
           }}
         />
         <Layout.Header

src/components/Layout/components/SiderMenu/SiderMenu.less

@@ -13,4 +13,8 @@
     flex-direction: column;
     height: 100%;
   }
+
+  .ant-menu-inline {
+    background: transparent;
+  }
 }

src/main.ts

@@ -8,7 +8,7 @@ import 'ant-design-vue/es/notification/style/css';
 
 const app = createApp(App)
 
-app.use(router)
-  .use(store)
+app.use(store)
+  .use(router)
   .use(components)
   .mount('#app')

src/router/index.ts

@@ -37,12 +37,12 @@ router.beforeEach((to, from, next) => {
               menuData.forEach(r => {
                 router.addRoute('base', r)
               })
-
               router.addRoute('base',{
-                path: '/:pathMatch(.*)*',
+                path: '/:pathMatch(.*)',
+                name: 'error',
                 component: () => NotFindPage
               })
-              console.log(to)
+
               next({ ...to, replace: true })
             })
           }).catch(() => {

src/router/menu.ts

@@ -18,7 +18,7 @@ export default [
     //   path: '/initsetting',
     //   component: () => import('@/view/Login/initSet.vue')
     // }
-
+    { path: '/*', redirect: '/'},
     // start: 测试用, 可删除
     {
         path: '/login',

src/store/menu.ts

@@ -1,12 +1,14 @@
 import { defineStore } from "pinia";
 import { queryOwnThree } from '@/api/system/menu'
 import { filterAsnycRouter } from '@/utils/menu'
+import { cloneDeep } from 'lodash-es'
 
 export const useMenuStore = defineStore({
   id: 'menu',
   state: () => ({
     menus: {},
     menuData: [],
+    siderMenus: [],
     menusKey: []
   }),
   getters:  {
@@ -52,7 +54,8 @@ export const useMenuStore = defineStore({
         ];
         const resp = await queryOwnThree({ paging: false, terms: params })
         if (resp.success) {
-          const menus = filterAsnycRouter(resp.result)
+          const silderMenus = filterAsnycRouter(cloneDeep(resp.result))
+          const menus = filterAsnycRouter(cloneDeep(resp.result))
           menus.push({
             path: '/',
             redirect: menus[0]?.path,
@@ -61,6 +64,8 @@ export const useMenuStore = defineStore({
             }
           })
           this.menuData = menus
+          this.siderMenus = silderMenus
+          console.log('silderMenus', silderMenus)
           res(menus)
         }
       })

src/utils/menu.ts

@@ -1,11 +1,99 @@
 const pagesComponent = import.meta.glob('../views/**/*.vue', { eager: true });
 import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
 
-type ExtraRouteItem = {
-  code: string
-  name: string
-  url?: string
-}
+/**
+ * 权限信息
+ */
+export type PermissionInfo = {
+  permission: string;
+  actions: string[];
+};
+
+/**
+ * 按钮信息
+ */
+export type MenuButtonInfo = {
+  id: string;
+  name: string;
+  permissions: PermissionInfo;
+  createTime: number;
+  describe?: string;
+  options: Record<string, any>;
+};
+
+
+export type MenuItem = {
+  id: string;
+  /**
+   * 名称
+   */
+  name: string;
+  /**
+   * 编码
+   */
+  code: string;
+  /**
+   * 所属应用
+   */
+  application: string;
+  /**
+   * 描述
+   */
+  describe: string;
+  /**
+   * url，路由
+   */
+  url: string;
+  /**
+   * 图标
+   */
+  icon: string;
+  /**
+   * 状态, 0为禁用，1为启用
+   */
+  status: number;
+  /**
+   * 绑定权限信息
+   */
+  permissions: PermissionInfo[];
+  /**
+   * 按钮定义信息
+   */
+  buttons: MenuButtonInfo[];
+  /**
+   * 其他配置信息
+   */
+  options: Record<string, any>;
+  /**
+   * 父级ID
+   */
+  parentId: string;
+  /**
+   * 树结构路径
+   */
+  path: string;
+  /**
+   * 排序序号
+   */
+  sortIndex: number;
+  /**
+   * 树层级
+   */
+  level: number;
+  createTime: number;
+  redirect?: string;
+  children?: MenuItem[];
+  accessSupport?: { text: string; value: string };
+  appId?: string; //应用id
+  isShow?: boolean;
+  meta?: {
+    title?: string
+    icon?: string
+    [key: string]: any
+  },
+  component?: any
+};
+
 // 额外子级路由
 const extraRouteObj = {
   'media/Cascade': {
@@ -59,51 +147,82 @@ const extraRouteObj = {
 
 
 const resolveComponent = (name: any) => {
-  // TODO 暂时用system进行测试
   const importPage = pagesComponent[`../views/${name}/index.vue`];
   if (!importPage) {
     console.warn(`Unknown page ${name}. Is it located under Pages with a .vue extension?`)
   }
   //@ts-ignore
-  return !!importPage ? importPage.default : BlankLayoutPage
+  return !!importPage ? importPage.default : undefined
 }
 
-const findChildrenRoute = (code: string, url: string): ExtraRouteItem[] => {
+const findChildrenRoute = (code: string, url: string): MenuItem[] => {
   if (extraRouteObj[code]) {
-    return extraRouteObj[code].children.map((route: ExtraRouteItem) => {
+    return extraRouteObj[code].children.map((route: MenuItem) => {
       return {
         url: `${url}/${route.code}`,
         code: route.code,
-        name: route.name
+        name: route.name,
+        isShow: false
       }
     })
   }
   return []
 }
 
+const findDetailRouteItem = (code: string, url: string): Partial<MenuItem> | null => {
+  const detailComponent = resolveComponent(`${code}/Detail`)
+  if (detailComponent) {
+    return {
+      url: `${url}/Detail/:id`,
+      component: detailComponent,
+      name: '详情信息',
+      isShow: false
+    }
+  }
+  return null
+}
+
+const findDetailRoutes = (routes: any[]): any[] => {
+  const newRoutes: any[] = []
+  routes.forEach((route: any) => {
+    newRoutes.push(route)
+    const detail = findDetailRouteItem(route.code, route.url)
+    if (detail) {
+      newRoutes.push(detail)
+    }
+  })
+  return newRoutes
+}
+
 export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1) {
+
   return asyncRouterMap.map((route: any) => {
-    console.log(route.name, route)
+
     route.path = `${route.url}`
     route.meta = {
       icon: route.icon,
-      title: route.name
+      title: route.name,
+      hideInMenu: route.isShow === false
     }
 
     // 查看是否有隐藏子路由
     const extraChildren = findChildrenRoute(route.code, route.url)
     route.children = route.children && route.children.length ? [...route.children, ...extraChildren] : extraChildren
-
-    // TODO 查看是否具有详情页
-    // route.children = [...route.children, ]
+    route.children = findDetailRoutes(route.children)
     if (route.children && route.children.length) {
-      route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
+      // TODO 查看是否具有详情页
       route.children = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1)
-      route.redirect = route.children[0].url
+      const showChildren = route.children.some((r: any) => !r.meta.hideInMenu)
+      if (showChildren) {
+        route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
+        route.redirect = route.children[0].url
+      } else {
+        route.component = resolveComponent(route.code) || BlankLayoutPage;
+      }
     } else {
-      route.component = resolveComponent(route.code);
+      route.component = resolveComponent(route.code) || BlankLayoutPage;
     }
-
+    delete route.name
     return route
   })
 }

src/views/home/index.vue

@@ -1,79 +1,80 @@
 <template>
-    <div class="container">
-        <div class="header"></div>
-        <div class="left"></div>
-        <div class="content iot-home-container" v-loading="loading">
-            <InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
-            <DeviceHome v-else-if="currentView === 'device'" />
-            <DevOpsHome v-else-if="currentView === 'ops'" />
-            <ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
-        </div>
-    </div>
+  <page-container>
+    <InitHome v-if="currentView === 'init'" @refresh='setCurrentView' />
+    <DeviceHome v-else-if="currentView === 'device'" />
+    <DevOpsHome v-else-if="currentView === 'ops'" />
+    <ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
+  </page-container>
+
 </template>
 
-<script lang="ts" setup>
-import InitHome from './components/InitHome/index.vue';
-import DeviceHome from './components/DeviceHome/index.vue';
-import DevOpsHome from './components/DevOpsHome/index.vue';
-import ComprehensiveHome from './components/ComprehensiveHome/index.vue';
+<script lang='ts' setup name='IotHome'>
+import InitHome from './components/InitHome/index.vue'
+import DeviceHome from './components/DeviceHome/index.vue'
+import DevOpsHome from './components/DevOpsHome/index.vue'
+import ComprehensiveHome from './components/ComprehensiveHome/index.vue'
+import PageContainer from 'components/Layout/components/PageContainer'
+import { isNoCommunity } from '@/utils/utils'
+import { getMe_api, getView_api } from '@/api/home'
 
-import { isNoCommunity } from '@/utils/utils';
-import { getMe_api, getView_api } from '@/api/home';
+const router = useRouter()
 
-const router = useRouter();
-
-const currentView = ref<string>('');
-const loading = ref<boolean>(true);
+const currentView = ref<string>('')
+const loading = ref<boolean>(true)
 
 // 获取选择的视图
 const setCurrentView = () => {
-    getView_api().then((resp: any) => {
-        if (resp.status === 200) {
-            if (resp.result) currentView.value = resp.result?.content;
-            else if (resp.result.username === 'admin') {
-                currentView.value = 'comprehensive';
-            } else currentView.value = 'init';
-        }
-    });
-};
+  getView_api().then((resp: any) => {
+    if (resp.status === 200) {
+      if (resp.result) currentView.value = resp.result?.content
+      else if (resp.result.username === 'admin') {
+        currentView.value = 'comprehensive'
+      } else currentView.value = 'init'
+    }
+  })
+}
 
 if (isNoCommunity) {
-    // 判断是否是api用户   是则跳转  否则获取选中的视图
-    getMe_api().then((resp: any) => {
-        if (resp && resp.status === 200) {
-            const isApiUser = resp.result.dimensions.find(
-                (item: any) =>
-                    item.type === 'api-client' || item.type.id === 'api-client',
-            );
+  // 判断是否是api用户   是则跳转  否则获取选中的视图
+  getMe_api().then((resp: any) => {
+    if (resp && resp.status === 200) {
+      const isApiUser = resp.result.dimensions.find(
+        (item: any) =>
+          item.type === 'api-client' || item.type.id === 'api-client'
+      )
+
+      isApiUser ? router.push('/system/api') : setCurrentView()
+    }
+  })
+} else setCurrentView()
 
-            isApiUser ? router.push('/system/api') : setCurrentView();
-        }
-    });
-}else setCurrentView()
 </script>
 
-<style lang="less" scoped>
+<style lang='less' scoped>
 .container {
-    background: #f0f2f5;
+  background: #f0f2f5;
+  width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  flex-wrap: wrap;
+
+  .header {
+    height: 48px;
+    background: #7e1c1c;
     width: 100vw;
-    min-height: 100vh;
-    display: flex;
-    flex-wrap: wrap;
-    .header {
-        height: 48px;
-        background: #7e1c1c;
-        width: 100vw;
-    }
-    .left {
-        background: #352d85;
-        width: 210px;
-        min-height: calc(100vh - 48px);
-    }
-    .content {
-        margin: 24px;
-        width: calc(100vw - 280px);
-        overflow: hidden;
-        min-height: calc(100vh - 96px);
-    }
+  }
+
+  .left {
+    background: #352d85;
+    width: 210px;
+    min-height: calc(100vh - 48px);
+  }
+
+  .content {
+    margin: 24px;
+    width: calc(100vw - 280px);
+    overflow: hidden;
+    min-height: calc(100vh - 96px);
+  }
 }
 </style>