feat: navbar支持打开外部链接

src/layout/components/Sidebar/SidebarItem.vue

@@ -27,7 +27,7 @@ import path from 'path-browserify'
 import { reactive, toRefs } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAppRouter } from '@/store/router'
-import Icon from './Icon'
+
 import Title from './title'
 
 const appRouter = useAppRouter()

src/layout/components/Sidebar/title.tsx

@@ -1,8 +1,6 @@
 import Icon from './Icon'
 
 export default ({ title, icon }: {title: string, icon: string}) => {
-  console.log('title:', title, icon)
-
   return (
     <div >
       <Icon name={icon} />

src/layout/layout.vue

@@ -19,7 +19,6 @@
 <script  lang="ts" setup >
 import Navbar from './navbar.vue'
 import SiderBar from './components/Sidebar/index.vue'
-import Breadcrumb from './breadcrumb.vue'
 </script>
 
 <style>

src/layout/navbar.vue

@@ -11,16 +11,16 @@
           theme="dark"
           mode="horizontal"
           :style="{ lineHeight: '64px' }"
-          v-model:selectedKeys="selectedKeys"
+          :selectedKeys="selectedKeys"
       >
           <a-menu-item
             v-for="route in appRouter.$state.router.navbar.route"
             :key="route.path"
-            @click="changeRouter(route.path)"
+            @click="changeRouter(route)"
           >
             {{route.name}}
           </a-menu-item>
-          </a-menu>
+        </a-menu>
         </a-col>
         <a-col :span="1" >
           <user />
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts" setup >
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useAppRouter } from '@/store/router'
 import user from './user.vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -47,9 +47,13 @@ const appRouter = useAppRouter()
 
 const selectedKeys = ref<string[]>()
 
-const changeRouter = (path: string) => {
-  selectedKeys.value = [path]
-  appRouter.changeNavbar(path, '')
+const changeRouter = (route: ROUTER.RoutesProps) => {
+  if (route.link) {
+    window.open(route.path)
+  } else {
+    selectedKeys.value = [route.path]
+    appRouter.changeNavbar(route.path, '')
+  }
 }
 
 const hasCurrentRourte = (children: ROUTER.RoutesProps[]): boolean => {
@@ -73,7 +77,7 @@ const hasCurrentRourte = (children: ROUTER.RoutesProps[]): boolean => {
 
 onMounted(() => {
   routes.forEach(item => {
-    if (hasCurrentRourte(item.children)) {
+    if (item.children && hasCurrentRourte(item.children)) {
       selectedKeys.value = [item.path]
       appRouter.changeNavbar(item.path, 'init')
       appRouter.changeSiderRoute()

src/pages/rts/stream/index.vue

@@ -94,7 +94,7 @@ const state = reactive<{
   loading: false,
   dataSource: [],
   detail: {},
-  visible: true
+  visible: false
 })
 
 const openLive = (record: RTS.STREAM.Detail) => {

src/router/index.ts

@@ -194,12 +194,28 @@ export const routes: Array<ROUTER.RoutesProps> = [
         component: () => import('@/pages/rts/monitor/index.vue')
       }
     ]
+  },
+  {
+    path: 'http://cloudview.jiaolongcloud.com/',
+    name: '云图文档',
+    meta: {
+      title: '云图文档'
+    },
+    link: true
   }
 ]
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes
+  routes: routes.map(item => {
+    const _item = item.link
+      ? {
+          ...item,
+          path: '/' + item.path
+        }
+      : item
+    return _item
+  })
 })
 
 export default router

src/store/router.ts

@@ -35,21 +35,18 @@ export const useAppRouter = defineStore(ConstantStore.ROUTER, () => {
     defaultValue: '/'
   })
 
-  // const [appRouterState, setAppRouterState] = useLocalStorageState<ROUTER.RouterRecords>(AppRouterEnum.ROUTER, {
-  //   defaultValue: initAppRouterState
-  // })
-
-  console.log(RootRouter)
-
   const siderRoutes = computed(() => RootRouter.getRoutes().find(item => item.path === appRouter.navbar!.selectPath)?.children)
 
   const initAppRouter = () => {
     console.log('initAppRouter')
 
-    appRouter.navbar.route = RootRouter.options.routes.map(route => {
+    appRouter.navbar.route = RootRouter.options.routes.map((route: any) => {
+      console.log(route.link, route.path)
+
       return {
-        path: route.path,
-        name: route.name
+        path: route.link ? route.path.substr(1) : route.path,
+        name: route.name,
+        link: !!route.link
       }
     })