bingyi/vue-next-admin
1
0
Fork 0
mirror of https://gitee.com/lyt-top/vue-next-admin synced 2026-07-04 13:02:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

'admin-23.03.10:发布v2.4.31版本，更新内容查看CHANGELOG.md'

Browse Source
This commit is contained in:
lyt
2023-03-10 22:03:13 +08:00
parent a894768c56
commit ccca4cd355
15 changed files with 291 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/main/classic.vue
View File

@ -43,7 +43,7 @@ const initScrollBarHeight = () => {
setTimeout(() => {
updateScrollbar();
// '!' not null 断言操作符，不执行运行时检查
layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
if (layoutMainRef.value) layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
}, 500);
});
};

1
src/layout/navBars/breadcrumb/search.vue
View File

@ -107,6 +107,7 @@ defineExpose({
display: none;
}
.el-dialog__footer {
width: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);

18
src/layout/navBars/breadcrumb/setings.vue
View File

@ -494,14 +494,16 @@ const onColumnsMenuBarGradualChange = () => {
};
// 2、菜单 / 顶栏 --> 背景渐变函数
const setGraduaFun = (el: string, bool: boolean, color: string) => {
setTimeout(() => {
let els = document.querySelector(el);
if (!els) return false;
document.documentElement.style.setProperty('--el-menu-bg-color', document.documentElement.style.getPropertyValue('--next-bg-menuBar'));
if (bool) els.setAttribute('style', `background:linear-gradient(to bottom left , ${color}, ${getLightColor(color, 0.6)}) !important;`);
else els.setAttribute('style', ``);
setLocalThemeConfig();
}, 200);
nextTick(() => {
setTimeout(() => {
let els = document.querySelector(el);
if (!els) return false;
document.documentElement.style.setProperty('--el-menu-bg-color', document.documentElement.style.getPropertyValue('--next-bg-menuBar'));
if (bool) els.setAttribute('style', `background:linear-gradient(to bottom , ${color}, ${getLightColor(color, 0.5)})`);
else els.setAttribute('style', ``);
setLocalThemeConfig();
}, 300);
});
};
// 2、分栏设置 ->
const onColumnsMenuHoverPreloadChange = () => {

8
src/layout/navBars/tagsView/tagsView.vue
View File

@ -56,6 +56,7 @@ import pinia from '/@/stores/index';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useKeepALiveNames } from '/@/stores/keepAliveNames';
import { useRoutesList } from '/@/stores/routesList';
import { Session } from '/@/utils/storage';
import { isObjectValueEqual } from '/@/utils/arrayOperation';
import other from '/@/utils/other';
@ -72,8 +73,10 @@ const tagsUlRef = ref();
const stores = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const storesTagsViewRoutes = useTagsViewRoutes();
const storesRoutesList = useRoutesList();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
const { routesList } = storeToRefs(storesRoutesList);
const storesKeepALiveNames = useKeepALiveNames();
const route = useRoute();
const router = useRouter();
@ -382,6 +385,11 @@ const onMousedownMenu = (v: RouteItem, e: MouseEvent) => {
const onTagsClick = (v: RouteItem, k: number) => {
state.tagsRefsIndex = k;
router.push(v);
// 分栏布局时，收起/展开菜单
if (getThemeConfig.value.layout === 'columns') {
const item: RouteItem = routesList.value.find((r: RouteItem) => r.path.indexOf(`/${v.path.split('/')[1]}`) > -1);
!item.children ? (getThemeConfig.value.isCollapse = true) : (getThemeConfig.value.isCollapse = false);
}
};
// 处理 url，地址栏链接有参数时，tagsview 右键菜单刷新功能失效问题，感谢 @ZzZz-RIPPER、@dejavuuuuu
// https://gitee.com/lyt-top/vue-next-admin/issues/I5K3YO

62
src/layout/navMenu/horizontal.vue
View File

@ -1,37 +1,35 @@
<template>
<div class="el-menu-horizontal-warp">
<el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
<el-menu router :default-active="state.defaultActive" :ellipsis="false" background-color="transparent" mode="horizontal">
<template v-for="val in menuLists">
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
<template #title>
<el-menu router :default-active="state.defaultActive" background-color="transparent" mode="horizontal">
<template v-for="val in menuLists">
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
<template #title>
<SvgIcon :name="val.meta.icon" />
<span>{{ $t(val.meta.title) }}</span>
</template>
<SubItem :chil="val.children" />
</el-sub-menu>
<template v-else>
<el-menu-item :index="val.path" :key="val.path">
<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
<SvgIcon :name="val.meta.icon" />
<span>{{ $t(val.meta.title) }}</span>
{{ $t(val.meta.title) }}
</template>
<SubItem :chil="val.children" />
</el-sub-menu>
<template v-else>
<el-menu-item :index="val.path" :key="val.path">
<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
<template #title v-else>
<a class="w100" @click.prevent="onALinkClick(val)">
<SvgIcon :name="val.meta.icon" />
{{ $t(val.meta.title) }}
</template>
<template #title v-else>
<a class="w100" @click.prevent="onALinkClick(val)">
<SvgIcon :name="val.meta.icon" />
{{ $t(val.meta.title) }}
</a>
</template>
</el-menu-item>
</template>
</a>
</template>
</el-menu-item>
</template>
</el-menu>
</el-scrollbar>
</template>
</el-menu>
</div>
</template>
<script setup lang="ts" name="navMenuHorizontal">
import { defineAsyncComponent, reactive, computed, onMounted, nextTick, onBeforeMount, ref } from 'vue';
import { defineAsyncComponent, reactive, computed, onBeforeMount } from 'vue';
import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
@ -52,7 +50,6 @@ const props = defineProps({
});
// 定义变量内容
const elMenuHorizontalScrollRef = ref();
const stores = useRoutesList();
const storesThemeConfig = useThemeConfig();
const { routesList } = storeToRefs(stores);
@ -66,19 +63,6 @@ const state = reactive({
const menuLists = computed(() => {
return <RouteItems>props.menuList;
});
// 设置横向滚动条可以鼠标滚轮滚动
const onElMenuHorizontalScroll = (e: WheelEventType) => {
const eventDelta = e.wheelDelta || -e.deltaY * 40;
elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft = elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft + eventDelta / 4;
};
// 初始化数据，页面刷新时，滚动条滚动到对应位置
const initElMenuOffsetLeft = () => {
nextTick(() => {
let els = <HTMLElement>document.querySelector('.el-menu.el-menu--horizontal li.is-active');
if (!els) return false;
elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft = els.offsetLeft;
});
};
// 路由过滤递归函数
const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
return arr
@ -122,10 +106,6 @@ const onALinkClick = (val: RouteItem) => {
onBeforeMount(() => {
setCurrentRouterHighlight(route);
});
// 页面加载时
onMounted(() => {
initElMenuOffsetLeft();
});
// 路由更新时
onBeforeRouteUpdate((to) => {
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G

7
src/main.ts
View File

@ -1,13 +1,12 @@
import { createApp } from 'vue';
import pinia from '/@/stores/index';
import App from './App.vue';
import router from './router';
import App from '/@/App.vue';
import router from '/@/router';
import { directive } from '/@/directive/index';
import { i18n } from '/@/i18n/index';
import other from '/@/utils/other';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import '/@/theme/index.scss';
import VueGridLayout from 'vue-grid-layout';
@ -16,4 +15,4 @@ const app = createApp(App);
directive(app);
other.elSvg(app);
app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(VueGridLayout).mount('#app');
app.use(pinia).use(router).use(ElementPlus).use(i18n).use(VueGridLayout).mount('#app');

6
src/theme/dark.scss
View File

@ -106,9 +106,15 @@
background-color: var(--next-color-disabled) !important;
}
// topBar
.layout-navbars-breadcrumb-index {
background: none !important;
}
// menu
.layout-aside {
border-right: 1px solid var(--next-border-color-light) !important;
@extend .layout-navbars-breadcrumb-index;
}
// colorPicker

10
src/theme/element.scss
View File

@ -148,12 +148,12 @@
background: var(--next-bg-topBar);
.el-menu-item,
.el-sub-menu {
height: 50px !important;
line-height: 50px !important;
height: 48px !important;
line-height: 48px !important;
color: var(--next-bg-topBarColor);
.el-sub-menu__title {
height: 50px !important;
line-height: 50px !important;
height: 48px !important;
line-height: 48px !important;
color: var(--next-bg-topBarColor);
}
.el-popper.is-pure.is-light {
@ -180,7 +180,7 @@
width: 100% !important;
.el-menu-item,
.el-sub-menu__title {
height: 50px !important;
height: 48px !important;
color: var(--next-bg-topBarColor);
}
.el-menu-item:not(.is-active):hover,

1
src/theme/index.scss
View File

@ -1,3 +1,4 @@
@import 'element-plus/dist/index.css';
@import './app.scss';
@import 'common/transition.scss';
@import './other.scss';

1
src/types/global.d.ts vendored
View File

@ -6,6 +6,7 @@ declare module 'js-cookie';
declare module '@wangeditor/editor-for-vue';
declare module 'js-table2excel';
declare module 'qs';
declare module 'sortablejs';
// 声明一个模块，防止引入文件时报错
declare module '*.json';

11
src/views/system/menu/dialog.vue
View File

@ -56,7 +56,7 @@
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="组件路径">
<el-input v-model="state.ruleForm.component" placeholder="组件路径" clearable></el-input>
<el-input v-model="state.ruleForm.componentAlias" placeholder="组件路径" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@ -169,6 +169,7 @@ const state = reactive({
menuType: 'menu', // 菜单类型
name: '', // 路由名称
component: '', // 组件路径
componentAlias: '', // 组件路径别名
isLink: false, // 是否外链
menuSort: 0, // 菜单排序
path: '', // 路由路径
@ -209,12 +210,8 @@ const openDialog = (type: string, row?: any) => {
if (type === 'edit') {
// 模拟数据，实际请走接口
row.menuType = 'menu';
row.menuSort = Math.random();
row.component = `${row.component} `
.match(/\'(.+)\'/g)
?.join('')
.replace(/\'/g, '');
state.ruleForm = row;
row.menuSort = Math.floor(Math.random() * 100);
state.ruleForm = JSON.parse(JSON.stringify(row));
state.dialog.title = '修改菜单';
state.dialog.submitTxt = '修 改';
} else {