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

88
src/layout/index.vue
View File

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

6
src/store/global.ts
View File

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