feat: 外部页面 (#50)

src/layouts/default/sidebar/components/Menu.vue

@@ -22,6 +22,8 @@
   </a-menu>
 </template>
 <script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import MenuWithChildren from './MenuWithChildren.vue'
 import MenuItem from './MenuItem.vue'
 import { useCollapsed } from '~/layouts/default/useCollapsed'
@@ -36,9 +38,13 @@ const openKeys = ref<string[]>([])
 const router = useRouter()
 const routeStore = useRouteStore()
 const menus = ref<RouteModuleList>([])
-
-const handleClick = (path: string) => {
-  router.push(path)
+const handleClick = (path: string, src: string, name: string) => {
+  if (src) {
+    router.push({ name, params: { src } })
+  }
+  else {
+    router.push(path)
+  }
 }
 
 watch(() => routeStore.getRoutes, (routes) => {

src/layouts/default/sidebar/components/MenuItem.vue

@@ -1,7 +1,7 @@
 <template>
   <a-menu-item
     :key="parentPath ? `${parentPath}/${menu.path}` : menu.path"
-    @click="handleClick(menu.path)"
+    @click="handleClick(menu.path, menu.name, menu.meta.frameSrc, menu.meta.external)"
   >
     <template #icon>
       <component :is="menu.meta?.icon" />
@@ -13,18 +13,29 @@
 import type { RouteModuleList } from '~/router/routes/typings'
 
 interface EmitEvents {
-  (e: 'handleClick', path: string, currentDepth: number | undefined): void
+  (e: 'handleClick', path: string, currentDepth: number | undefined, src?: string, name?: string): void
 }
 interface Props {
   menu: GetArrayItemType<RouteModuleList>
   parentPath?: string
   currentDepth?: number
+  src?: string
+  // 是否外链
+  external?: boolean
 }
 
 const props = defineProps<Props>()
 const emit = defineEmits<EmitEvents>()
 
-function handleClick(path: string) {
-  emit('handleClick', path, props.currentDepth)
+function handleClick(path: string, name: string, src: string, external: boolean) {
+  // src 为内链 地址
+  // 需要判断path是否为外链
+  if (external) {
+    // 打开外链
+    window.open(path)
+  }
+  else {
+    emit('handleClick', path, props.currentDepth, src, name)
+  }
 }
 </script>

src/layouts/default/sidebar/components/MenuWithChildren.vue

@@ -29,21 +29,23 @@
 <script setup lang="ts">
 import MenuItem from './MenuItem.vue'
 import type { RouteModuleList } from '~/router/routes/typings'
-
 interface EmitEvents {
-  (e: 'handleClick', path: string): void
+  (e: 'handleClick', path: string, src?: string, name?: string): void
 }
 interface Props {
   menu: GetArrayItemType<RouteModuleList>
   parentPath: string
   // 当前的深度，用于计算 key
   currentDepth: number
+  // 内链 src
+  src?: string
+  name?: string
 }
 
 const props = defineProps<Props>()
 const emit = defineEmits<EmitEvents>()
 
-function handleClick(path: string, depth = 1) {
-  emit('handleClick', depth > 1 ? `${props.parentPath}/${path}` : path)
+function handleClick(path: string, depth = 1, src: string, name: string) {
+  emit('handleClick', depth > 1 ? `${props.parentPath}/${path}` : path, src, name)
 }
 </script>

src/router/routes/modules/about.ts

@@ -11,7 +11,7 @@ const route: RouteRecordRaw = {
     title: '关于',
     icon: SettingOutlined,
     single: true,
-    sort: 3
+    sort: 4
   },
   children: [
     {

src/router/routes/modules/docs.ts

@@ -0,0 +1,53 @@
+import type { RouteRecordRaw } from 'vue-router'
+import {
+  CompassOutlined
+} from '@ant-design/icons-vue'
+import { DefaultLayout } from '~/layouts'
+
+const route: RouteRecordRaw = {
+  path: '/docs',
+  name: 'docs',
+  component: DefaultLayout,
+  redirect: '/docs/project/inline',
+  meta: {
+    title: '外部页面',
+    icon: CompassOutlined,
+    sort: 3
+  },
+  children: [
+    {
+      path: 'inline/project',
+      name: 'projectInline',
+      component: () => import('~/views/docs/inline/index.vue'),
+      props: true,
+      meta: {
+        title: '项目文档 (内嵌)',
+        frameSrc: 'https://vue-hbs-admin-docs.netlify.app',
+        sort: 1
+      }
+    },
+    {
+      path: 'inline/ant',
+      name: 'antInline',
+      component: () => import('~/views/docs/inline/index.vue'),
+      props: true,
+      meta: {
+        title: 'antVue文档 (内嵌)',
+        frameSrc: 'https://antdv.com/components/overview-cn',
+        sort: 2
+      }
+    },
+    {
+      path: 'https://vue-hbs-admin-docs.netlify.app/',
+      name: 'projectInline',
+      component: () => import('~/views/demo/excel/import.vue'),
+      meta: {
+        title: '项目文档 (外链)',
+        external: true,
+        sort: 3
+      }
+    }
+  ]
+}
+
+export default route

src/views/docs/inline/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="w-full h-full">
+    <iframe :src="src" scrolling="auto" frameborder="0" class="w-full h-full" />
+  </div>
+</template>
+<script setup lang="ts">
+defineProps({
+  src: { type: String }
+})
+</script>
+<style lang="less" scoped>
+</style>

types/routes.d.ts

@@ -13,5 +13,7 @@ declare module 'vue-router' {
     icon?: FunctionalComponent
     // 是否是单独的菜单
     single?: boolean
+    // 内链地址
+    frameSrc?: string
   }
 }