feat: support add external link menu

CHANGELOG.md

@@ -1,5 +1,10 @@
 # 更新日志
 
+## v4.0.7
+
+* 功能优化：添加导航菜单的时候支持框入外部链接，并支持上传自定义菜单图片
+*
+
 ## v4.0.6
 
 * Bug修复：修复PC端画廊页面的瀑布流组件样式错乱问题

web/src/router.js

@@ -81,6 +81,11 @@ const routes = [
                 meta: {title: 'DALLE-3'},
                 component: () => import('@/views/Dalle.vue'),
             },
+            {
+                name: 'ExternalLink',
+                path: '/external',
+                component: () => import('@/views/ExternalPage.vue'),
+            },
         ]
     },
     {

web/src/views/ExternalPage.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="page-iframe" v-loading="loading"
+       style="--el-color-primary:#47fff1"
+       element-loading-text="页面正在加载中..."
+       element-loading-background="rgba(122, 122, 122, 0.8)">
+    <iframe :src="externalUrl" class="iframe" @load="onIframeLoad"></iframe>
+
+  </div>
+</template>
+<script setup>
+import {useRouter} from "vue-router";
+import {computed, ref} from "vue";
+
+const loading = ref(true)
+const router = useRouter()
+const externalUrl = computed(() => {
+  loading.value = true
+  return router.currentRoute.value.query.url || 'about:blank'
+})
+
+const onIframeLoad = () => {
+  loading.value = false
+}
+</script>
+
+<style scoped lang="stylus">
+.page-iframe {
+  width 100%
+  height 100%
+  overflow hidden
+
+  .iframe {
+    width 100%
+    height 100%
+    border none
+  }
+}
+</style>

web/src/views/Home.vue

@@ -61,9 +61,16 @@ const mainNavs = ref([])
 const moreNavs = ref([])
 const curPath = ref(router.currentRoute.value.path)
 
+if (curPath.value === "/external") {
+  curPath.value = router.currentRoute.value.query.url
+}
 const changeNav = (item) => {
   curPath.value = item.url
-  router.push(item.url)
+  if (item.url.indexOf("http") !== -1) { // 外部链接
+    router.push({name: 'ExternalLink', query: {url: item.url}})
+  } else {
+    router.push(item.url)
+  }
 }
 
 onMounted(() => {
@@ -75,9 +82,11 @@ onMounted(() => {
   // 获取菜单
   httpGet("/api/menu/list").then(res => {
     mainNavs.value = res.data
-    if (res.data.length > 7) {
-      mainNavs.value = res.data.slice(0, 7)
-      moreNavs.value = res.data.slice(7)
+    // 根据窗口的高度计算应该显示多少菜单
+    const rows = Math.floor((window.innerHeight - 90) / 90)
+    if (res.data.length > rows) {
+      mainNavs.value = res.data.slice(0, rows)
+      moreNavs.value = res.data.slice(rows)
     }
   }).catch(e => {
     ElMessage.error("获取系统菜单失败：" + e.message)