Sfoglia il codice sorgente

feat: 支持iframe 从外部页面打开

luoyali 11 mesi fa
parent
commit
3c6e5e1ed5

+ 1 - 2
src/layout/LayoutLeftMix/index.vue

@@ -3,8 +3,7 @@
 	<el-container class="le-layout-wrap--leftMix">
 		<div class="le-layout-aside-split">
 			<div class="logo">
-				    <SvgIcon class="logo-img sidebar-logo" icon-class="logo" />
-<!--				<img class="logo-img" src="@/assets/icons/logo.svg" alt="logo" />-->
+				<SvgIcon class="logo-img sidebar-logo" icon-class="logo" />
 			</div>
 			<el-scrollbar>
 				<div class="split-list">

+ 16 - 4
src/layout/components/Menu/SubMenu.vue

@@ -1,6 +1,6 @@
 <template>
 	<template v-for="subItem in menuList" :key="subItem.path">
-		<el-sub-menu v-if="subItem.children?.length" teleported popperClass="layout-menu-popper-wrap" :index="subItem.path">
+		<el-sub-menu v-if="subItem.children?.length" teleported popper-class="layout-menu-popper-wrap" :index="subItem.path">
 			<template #title>
 				<PickerIcon v-if="subItem.meta.icon" :icon-class="subItem.meta.icon" />
 				<!--				<el-icon v-if="subItem.meta.icon">
@@ -10,7 +10,7 @@
 			</template>
 			<SubMenu :menu-list="subItem.children" />
 		</el-sub-menu>
-		<el-menu-item v-else popperClass="layout-menu-popper-wrap" :index="subItem.path" @click="handleClickMenu(subItem)">
+		<el-menu-item v-else popper-class="layout-menu-popper-wrap" :index="subItem.path" @click="handleClickMenu(subItem)">
 			<PickerIcon v-if="subItem.meta.icon" :icon-class="subItem.meta.icon" />
 			<!--      <el-icon>
 				<component :is="subItem.meta.icon"></component>
@@ -27,13 +27,25 @@ import { useRouter } from 'vue-router'
 import { generateTitle } from '@/utils/i18n'
 import PickerIcon from '@/components/IconPicker/PickerIcon.vue'
 import { isExternal } from '@/utils/validate'
+import {ElMessage} from "element-plus";
 
 defineProps<{ menuList: RouteMenu.Item[] }>()
 
 const router = useRouter()
+
+/**
+ * 1、在此判断是否是外链 subItem.meta.type === 'iframe'
+ *    是外链,则直接跳转(先不考虑在框架中打开外链)
+ *    否则跳转路由
+ * @param subItem
+ */
 const handleClickMenu = (subItem: RouteMenu.Item) => {
-	if (isExternal(subItem.path)) return window.open(subItem.path, '_blank')
-	router.push(subItem.path)
+	if (subItem.meta.type === 'iframe') {
+		if (!isExternal(subItem.path)) return ElMessage.error(`当前路由 ${subItem.path} 不是外链地址,请检查配置~`)
+		return window.open(subItem.path, '_blank')
+	} else {
+		router.push(subItem.path)
+	}
 	// router.push({ name: subItem.name })
 	// router.push('/404')
 }

+ 25 - 0
src/views/setting/iframe-page/[url].vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { onActivated, onMounted } from 'vue'
+
+interface Props {
+	url: string
+}
+
+defineProps<Props>()
+
+onMounted(() => {
+	console.log('mounted')
+})
+
+onActivated(() => {
+	console.log('activated')
+})
+</script>
+
+<template>
+	<div class="h-full">
+		<iframe id="iframePage" class="size-full" :src="url"></iframe>
+	</div>
+</template>
+
+<style scoped></style>

+ 4 - 4
src/views/setting/menu/save.vue

@@ -57,11 +57,11 @@
 						<template #label>
 							<span class="flex flex-align-pack-center"
 								>路由
-								<el-tooltip content="次顶级菜单记得“/”开头" placement="right">
-									<Warning style="width: 16px; margin-left: 4px; color: var(--el-color-danger)" /> </el-tooltip
-							></span>
+								<el-tooltip content="正常路由地址,次顶级菜单记得'/'开头" placement="right">
+									<Warning style="width: 16px; margin-left: 4px; color: var(--el-color-danger)" /> </el-tooltip></span>
 						</template>
-						<el-input v-model="form.path" clearable placeholder=""></el-input>
+						<el-input v-model="form.path" clearable placeholder="请认真填写路由,否则可能无法访问"></el-input>
+						<div class="el-form-item-msg">若为Iframe的外部链接,路由请填写Url地址,eg: 「https://xxxx.com」格式</div>
 					</el-form-item>
 					<el-form-item label="重定向" prop="redirect">
 						<el-input v-model="form.redirect" clearable placeholder=""></el-input>