cfn
/
admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

This commit is contained in:
zhang zhuo 2025-12-20 13:49:17 +08:00
parent 4f463dcbb3
commit b7e3835023
5 changed files with 55 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/logo-r.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 828 B

BIN
public/images/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 813 B

16
src/layout/components/iframeView.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div v-show="$route.meta.type=='iframe'" class="iframe-pages"> <div v-show="$route.meta.type==='iframe'" class="iframe-pages">
<iframe v-for="item in iframeList" :key="item.meta.url" v-show="$route.meta.url==item.meta.url" <iframe v-for="item in iframeList" :key="item.meta.url" v-show="$route.meta.url===item.meta.url"
:src="item.meta.url" frameborder='0'></iframe> :src="item.meta.url" frameborder='0'></iframe>
</div> </div>
</template> </template>
@ -8,15 +8,15 @@
<script setup> <script setup>
import {computed, watch} from "vue" import {computed, watch} from "vue"
import {useRoute} from "vue-router"; import {useRoute} from "vue-router";
import globalStore from "@/store/global.js"; import globalStore from "@/store/global"
import iframeStore from "@/store/iframe.js"; import iframeStore from "@/store/iframe"
const iframe = iframeStore() const iframe = iframeStore()
const global = globalStore() const global = globalStore()
const route = useRoute() const route = useRoute()
const iframeList = computed(() => iframe.iframeList) const iframeList = computed(() => iframe.iframeList)
const ismobile = computed(() => global.ismobile) const isMobile = computed(() => global.isMobile)
const layoutTags = computed(() => global.layoutTags) const layoutTags = computed(() => global.layoutTags)
push(route) push(route)
@ -26,14 +26,14 @@ watch(route, (e) => {
}) })
function push(route) { function push(route) {
if (route.meta.type == 'iframe') { if (route.meta.type === 'iframe') {
if (ismobile || !layoutTags) { if (isMobile || !layoutTags) {
iframe.setIframeList(route) iframe.setIframeList(route)
} else { } else {
iframe.pushIframeList(route) iframe.pushIframeList(route)
} }
} else { } else {
if (ismobile || !layoutTags) { if (isMobile || !layoutTags) {
iframe.clearIframeList() iframe.clearIframeList()
} }
} }

88
src/layout/index.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<!-- 通栏布局 --> <!-- 通栏布局 -->
<template v-if="layout=='header'"> <template v-if="layout==='header'">
<header class="pi-header"> <header class="pi-header">
<div class="pi-header-left"> <div class="pi-header-left">
<div class="logo-bar"> <div class="logo-bar">
<img class="logo" src="/images/logo.png"> <img class="logo" src="/images/logo-r.png">
<span>{{ config.APP_NAME }}</span> <span>{{ config.APP_NAME }}</span>
</div> </div>
<ul v-if="!ismobile" class="nav"> <ul v-if="!isMobile" class="nav">
<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''" <li v-for="item in menu" :key="item" :class="pMenu.path===item.path?'active':''"
@click="showMenu(item)"> @click="showMenu(item)">
<el-icon> <el-icon>
<component :is="item.meta?.icon || 'el-icon-menu'"/> <component :is="item.meta?.icon || 'el-icon-menu'"/>
@ -22,10 +22,10 @@
</div> </div>
</header> </header>
<section class="pi-wrapper"> <section class="pi-wrapper">
<div v-if="!ismobile && nextMenu.length>0 || !pmenu.component" <div v-if="!isMobile && nextMenu.length>0 || !pMenu.component"
:class="menuIsCollapse?'pi-side isCollapse':'pi-side'"> :class="menuIsCollapse?'pi-side isCollapse':'pi-side'">
<div v-if="!menuIsCollapse" class="pi-side-top"> <div v-if="!menuIsCollapse" class="pi-side-top">
<h2>{{ pmenu.meta.title }}</h2> <h2>{{ pMenu.meta.title }}</h2>
</div> </div>
<div class="pi-side-scroll"> <div class="pi-side-scroll">
<el-scrollbar> <el-scrollbar>
@ -42,10 +42,10 @@
</el-icon> </el-icon>
</div> </div>
</div> </div>
<Side-m v-if="ismobile"></Side-m> <Side-m v-if="isMobile"></Side-m>
<div class="pi-body el-container"> <div class="pi-body el-container">
<Topbar v-if="!ismobile"></Topbar> <Topbar v-if="!isMobile"></Topbar>
<Tags v-if="!ismobile && layoutTags"></Tags> <Tags v-if="!isMobile && layoutTags"></Tags>
<div class="pi-main" id="pi-main"> <div class="pi-main" id="pi-main">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive :include="keepAlive.keepLiveRoute"> <keep-alive :include="keepAlive.keepLiveRoute">
@ -59,11 +59,11 @@
</template> </template>
<!-- 经典布局 --> <!-- 经典布局 -->
<template v-else-if="layout=='menu'"> <template v-else-if="layout==='menu'">
<section class="pi-wrapper"> <section class="pi-wrapper">
<div v-if="!ismobile" :class="menuIsCollapse?'pi-side isCollapse':'pi-side'"> <div v-if="!isMobile" :class="menuIsCollapse?'pi-side isCollapse':'pi-side'">
<div class="logo-bar"> <div class="logo-bar">
<img class="logo" src="/images/logo.png"> <img class="logo" src="/images/logo-r.png">
<span class="title" v-if="!menuIsCollapse">{{ config.APP_NAME }}</span> <span class="title" v-if="!menuIsCollapse">{{ config.APP_NAME }}</span>
</div> </div>
<div class="pi-side-scroll"> <div class="pi-side-scroll">
@ -81,12 +81,12 @@
</el-icon> </el-icon>
</div> </div>
</div> </div>
<Side-m v-if="ismobile"></Side-m> <Side-m v-if="isMobile"></Side-m>
<div class="pi-body el-container"> <div class="pi-body el-container">
<Topbar v-if="!ismobile"> <Topbar v-if="!isMobile">
<userbar></userbar> <userbar></userbar>
</Topbar> </Topbar>
<Tags v-if="!ismobile && layoutTags"></Tags> <Tags v-if="!isMobile && layoutTags"></Tags>
<div class="pi-main" id="pi-main"> <div class="pi-main" id="pi-main">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive :include="keepAlive.keepLiveRoute"> <keep-alive :include="keepAlive.keepLiveRoute">
@ -100,30 +100,30 @@
</template> </template>
<!-- 功能坞布局 --> <!-- 功能坞布局 -->
<template v-else-if="layout=='dock'"> <template v-else-if="layout==='dock'">
<section class="pi-dock"> <section class="pi-dock">
<header class="pi-header" :class="ismobile?'':'pi-pad'"> <header class="pi-header" :class="isMobile?'':'pi-pad'">
<div class="pi-header-left"> <div class="pi-header-left">
<div class="logo-bar"> <div class="logo-bar">
<img class="logo" src="/images/logo.png"> <img class="logo" src="/images/logo-r.png">
<span>{{ config.APP_NAME }}</span> <span>{{ config.APP_NAME }}</span>
</div> </div>
</div> </div>
<div class="pi-header-right"> <div class="pi-header-right">
<div v-if="!ismobile" class="pi-header-menu"> <div v-if="!isMobile" class="pi-header-menu">
<el-menu mode="horizontal" :default-active="active" router background-color="#222b45" <el-menu mode="horizontal" :default-active="active" router background-color="#222b45"
text-color="#fff" active-text-color="var(--el-color-primary)"> text-color="#fff" active-text-color="var(--el-color-primary)">
<NavMenu :navMenus="menu"></NavMenu> <NavMenu :navMenus="menu"></NavMenu>
</el-menu> </el-menu>
</div> </div>
<Side-m v-if="ismobile"></Side-m> <Side-m v-if="isMobile"></Side-m>
<userbar></userbar> <userbar></userbar>
</div> </div>
</header> </header>
<section class="pi-wrapper"> <section class="pi-wrapper">
<div class="pi-body el-container"> <div class="pi-body el-container">
<Tags v-if="!ismobile && layoutTags"></Tags> <Tags v-if="!isMobile && layoutTags"></Tags>
<div class="pi-main" id="pi-main" :class="ismobile?'':'pi-pad'"> <div class="pi-main" id="pi-main" :class="isMobile?'':'pi-pad'">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive :include="keepAlive.keepLiveRoute"> <keep-alive :include="keepAlive.keepLiveRoute">
<component :is="Component" :key="route.fullPath" v-if="keepAlive.routeShow"/> <component :is="Component" :key="route.fullPath" v-if="keepAlive.routeShow"/>
@ -137,11 +137,11 @@
</template> </template>
<!-- 浮动布局 --> <!-- 浮动布局 -->
<template v-else-if="layout=='float'"> <template v-else-if="layout==='float'">
<section class="pi-wrapper"> <section class="pi-wrapper">
<div v-if="!ismobile" class="pi-side isCollapse"> <div v-if="!isMobile" class="pi-side isCollapse">
<div class="logo-bar"> <div class="logo-bar">
<img class="logo" src="/images/logo.png"> <img class="logo" src="/images/logo-r.png">
</div> </div>
<div class="pi-side-scroll"> <div class="pi-side-scroll">
<el-scrollbar> <el-scrollbar>
@ -152,12 +152,12 @@
</el-scrollbar> </el-scrollbar>
</div> </div>
</div> </div>
<Side-m v-if="ismobile"></Side-m> <Side-m v-if="isMobile"></Side-m>
<div class="pi-body el-container"> <div class="pi-body el-container">
<Topbar v-if="!ismobile"> <Topbar v-if="!isMobile">
<userbar></userbar> <userbar></userbar>
</Topbar> </Topbar>
<Tags v-if="!ismobile && layoutTags"></Tags> <Tags v-if="!isMobile && layoutTags"></Tags>
<div class="pi-main" id="pi-main"> <div class="pi-main" id="pi-main">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive :include="keepAlive.keepLiveRoute"> <keep-alive :include="keepAlive.keepLiveRoute">
@ -173,16 +173,16 @@
<!-- 分栏布局 --> <!-- 分栏布局 -->
<template v-else> <template v-else>
<section class="pi-wrapper"> <section class="pi-wrapper">
<div v-if="!ismobile" class="pi-side-split"> <div v-if="!isMobile" class="pi-side-split">
<div class="pi-side-split-top"> <div class="pi-side-split-top">
<router-link to="/dashboard"> <router-link to="/dashboard">
<img class="logo" :title="config.APP_NAME" src="/images/logo.png"> <img class="logo" :title="config.APP_NAME" src="/images/logo-r.png">
</router-link> </router-link>
</div> </div>
<div class="pi-side-split-scroll"> <div class="pi-side-split-scroll">
<el-scrollbar> <el-scrollbar>
<ul> <ul>
<li v-for="item in menu" :key="item" :class="pmenu.path===item.path?'active':''" <li v-for="item in menu" :key="item" :class="pMenu.path===item.path?'active':''"
@click="showMenu(item)"> @click="showMenu(item)">
<el-icon> <el-icon>
<component :is="item.meta?.icon || 'el-icon-menu'"/> <component :is="item.meta?.icon || 'el-icon-menu'"/>
@ -193,10 +193,10 @@
</el-scrollbar> </el-scrollbar>
</div> </div>
</div> </div>
<div v-if="!ismobile && nextMenu.length>0 || !pmenu.component" <div v-if="!isMobile && nextMenu.length>0 || !pMenu.component"
:class="menuIsCollapse?'pi-side isCollapse':'pi-side'"> :class="menuIsCollapse?'pi-side isCollapse':'pi-side'">
<div v-if="!menuIsCollapse" class="pi-side-top"> <div v-if="!menuIsCollapse" class="pi-side-top">
<h2>{{ pmenu.meta.title }}</h2> <h2>{{ pMenu.meta.title }}</h2>
</div> </div>
<div class="pi-side-scroll"> <div class="pi-side-scroll">
<el-scrollbar> <el-scrollbar>
@ -213,12 +213,12 @@
</el-icon> </el-icon>
</div> </div>
</div> </div>
<Side-m v-if="ismobile"></Side-m> <Side-m v-if="isMobile"></Side-m>
<div class="pi-body el-container"> <div class="pi-body el-container">
<Topbar> <Topbar>
<userbar></userbar> <userbar></userbar>
</Topbar> </Topbar>
<Tags v-if="!ismobile && layoutTags"></Tags> <Tags v-if="!isMobile && layoutTags"></Tags>
<div class="pi-main" id="pi-main"> <div class="pi-main" id="pi-main">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive :include="keepAlive.keepLiveRoute"> <keep-alive :include="keepAlive.keepLiveRoute">
@ -255,13 +255,13 @@ import {getMenu} from '@/utils/route'
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
let nextMenu = ref([]) let nextMenu = ref([])
let pmenu = ref([]) let pMenu = ref([])
let active = ref("") let active = ref("")
let menu = filterUrl(getMenu()); let menu = filterUrl(getMenu());
const global = globalStore() const global = globalStore()
const keepAlive = keepAliveStore() const keepAlive = keepAliveStore()
const ismobile = computed(() => global.ismobile) const isMobile = computed(() => global.isMobile)
const layout = computed(() => global.layout) const layout = computed(() => global.layout)
const layoutTags = computed(() => global.layoutTags) const layoutTags = computed(() => global.layoutTags)
const menuIsCollapse = computed(() => global.menuIsCollapse) const menuIsCollapse = computed(() => global.menuIsCollapse)
@ -287,11 +287,11 @@ function filterUrl(map) {
map && map.forEach(item => { map && map.forEach(item => {
item.meta = item.meta ? item.meta : {}; item.meta = item.meta ? item.meta : {};
//处理隐藏 //处理隐藏
if (item.meta.hidden || item.meta.type == "button") { if (item.meta.hidden || item.meta.type === "button") {
return false return false
} }
//处理http //处理http
if (item.meta.type == 'iframe') { if (item.meta.type === 'iframe') {
item.path = `/i/${item.name}`; item.path = `/i/${item.name}`;
} }
//递归循环 //递归循环
@ -304,23 +304,23 @@ function filterUrl(map) {
} }
function showMenu(route) { function showMenu(route) {
pmenu.value = route; pMenu.value = route;
nextMenu.value = filterUrl(route.children); nextMenu.value = filterUrl(route.children);
if ((!route.children || route.children.length == 0) && route.component) { if ((!route.children || route.children.length === 0) && route.component) {
router.push({path: route.path}) router.push({path: route.path})
} }
} }
function showThis() { function showThis() {
pmenu.value = route.meta.breadcrumb ? route.meta.breadcrumb[0] : {} pMenu.value = route.meta.breadcrumb ? route.meta.breadcrumb[0] : {}
nextMenu.value = filterUrl(pmenu.value.children); nextMenu.value = filterUrl(pMenu.value.children);
nextTick(() => { nextTick(() => {
active.value = route.meta.active || route.fullPath; active.value = route.meta.active || route.fullPath;
}) })
} }
function onLayoutResize() { function onLayoutResize() {
global.SET_ismobile(document.body.clientWidth < 992) global.SET_isMobile(document.body.clientWidth < 992)
} }
</script> </script>

6
src/store/global.ts
View File

@ -5,7 +5,7 @@ import {defineStore} from "pinia";
const globalStore = defineStore('global', { const globalStore = defineStore('global', {
state: () => ({ state: () => ({
//移动端布局 //移动端布局
ismobile: false, isMobile: false,
//布局 //布局
layout: tools.data.get('APP_LAYOUT') || config.APP_LAYOUT || 'header', layout: tools.data.get('APP_LAYOUT') || config.APP_LAYOUT || 'header',
//菜单是否折叠 toggle //菜单是否折叠 toggle
@ -14,8 +14,8 @@ const globalStore = defineStore('global', {
layoutTags: true layoutTags: true
}), }),
actions: { actions: {
SET_ismobile(key) { SET_isMobile(key) {
this.ismobile = key this.isMobile = key
}, },
SET_layout(key) { SET_layout(key) {
this.layout = key this.layout = key