xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-11-12 05:33:48 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

v3.14.0 更新；【新增】EasyExcel重磅升级为FastExcel;【新增】使用最强Argon2算法作为密码存储;【新增】大家吐槽的数据字典改为可重复;【新增】前端布局再增加多种样式;【优化】升级SaToken到最新版本;【优化】token使用Sa-Token的Bearer类型；【优化】优化其他

Browse Source
This commit is contained in:
zhuoda
2025-03-12 20:17:39 +08:00
parent 5553aac514
commit eeb9c569de
147 changed files with 7035 additions and 1565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
smart-admin-web-javascript/src/layout/components/header-user-space/header-setting.vue
View File

@@ -9,7 +9,7 @@
-->
<template>
<a-drawer :title="$t('setting.title')" placement="right" :width="410" :open="visible" @close="close">
<a-drawer :title="$t('setting.title')" placement="right" :width="450" :open="visible" @close="close">
<a-form layout="horizontal" :label-col="{ span: 8 }">
<a-form-item label="语言/Language">
<a-select v-model:value="formState.language" @change="changeLanguage" style="width: 120px">
@@ -47,6 +47,10 @@
<a-input-number @change="changeSideMenuWidth" v-model:value="formState.sideMenuWidth" :min="1" />
像素（px）
</a-form-item>
<a-form-item :label="$t('setting.table.yHeight')">
<a-input-number @change="changeTableYHeight" v-model:value="formState.tableYHeight" :min="100" />
像素（px）
</a-form-item>
<a-form-item :label="$t('setting.page.width')" v-if="formState.layout === LAYOUT_ENUM.TOP.value">
<a-input @change="changePageWidth" v-model:value="formState.pageWidth" />
像素（px）或者 百分比
@@ -70,6 +74,12 @@
<a-radio-button value="light">Light</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item :label="$t('setting.pagetag.location')">
<a-radio-group v-model:value="formState.pageTagLocation" button-style="solid" @change="changePageTagLocation">
<a-radio-button value="top">顶部</a-radio-button>
<a-radio-button value="center">中部</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item :label="$t('setting.pagetag.style')">
<a-radio-group v-model:value="formState.pageTagStyle" button-style="solid" @change="changePageTagStyle">
<a-radio-button value="default">默认</a-radio-button>
@@ -81,7 +91,13 @@
<a-switch @change="changePageTagFlag" v-model:checked="formState.pageTagFlag" checked-children="显示" un-checked-children="隐藏" />
</a-form-item>
<a-form-item :label="$t('setting.bread')">
<a-switch @change="changeBreadCrumbFlag" v-model:checked="formState.breadCrumbFlag" checked-children="显示" un-checked-children="隐藏" />
<a-switch
@change="changeBreadCrumbFlag"
:disabled="formState.pageTagLocation === 'top'"
v-model:checked="formState.breadCrumbFlag"
checked-children="显示"
un-checked-children="隐藏"
/>
</a-form-item>
<a-form-item :label="$t('setting.footer')">
<a-switch @change="changeFooterFlag" v-model:checked="formState.footerFlag" checked-children="显示" un-checked-children="隐藏" />
@@ -111,7 +127,7 @@
</a-drawer>
</template>
<script setup>
import { ref, reactive, h } from 'vue';
import { ref, reactive, h, watch } from 'vue';
import { i18nList } from '/@/i18n/index';
import { useI18n } from 'vue-i18n';
import localStorageKeyConst from '/@/constants/local-storage-key-const';
@@ -186,6 +202,8 @@
colorIndex: appConfigStore.colorIndex,
// 侧边菜单宽度
sideMenuWidth: appConfigStore.sideMenuWidth,
// 表格高度
tableYHeight: appConfigStore.tableYHeight,
// 菜单主题
sideMenuTheme: appConfigStore.sideMenuTheme,
// 页面紧凑
@@ -206,10 +224,26 @@
helpDocExpandFlag: appConfigStore.helpDocExpandFlag,
// 水印
watermarkFlag: appConfigStore.watermarkFlag,
//标签页位置
pageTagLocation: appConfigStore.pageTagLocation,
};
let formState = reactive({ ...formValue });
watch(
() => formState.pageTagLocation,
() => {
if (formState.pageTagLocation === 'top') {
formState.breadCrumbFlag = false;
} else {
formState.breadCrumbFlag = true;
}
},
{
immediate: true,
}
);
const { locale } = useI18n();
function changeLanguage(languageValue) {
locale.value = languageValue;
@@ -218,6 +252,12 @@
});
}
function changePageTagLocation(e) {
appConfigStore.$patch({
pageTagLocation: e.target.value,
});
}
function changeLayout(e) {
appConfigStore.$patch({
layout: e.target.value,
@@ -236,6 +276,12 @@
sideMenuWidth: value,
});
}
function changeTableYHeight(value) {
appConfigStore.$patch({
tableYHeight: value,
});
window.location.reload();
}
function changePageWidth(e) {
appConfigStore.$patch({

2
smart-admin-web-javascript/src/layout/components/side-expand-menu/sub-menu.vue
View File

@@ -40,7 +40,7 @@
};
</script>
<style scoped lang="less">
::v-deep(.ant-menu-item-selected) {
:deep(.ant-menu-item-selected) {
border-right: 3px !important;
}
</style>

11
smart-admin-web-javascript/src/layout/components/side-menu/recursion-menu.vue
View File

@@ -8,14 +8,7 @@
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-menu
v-model:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
class="smart-menu"
mode="inline"
:theme="theme"
:inlineCollapsed="collapsed"
>
<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" class="smart-menu" mode="inline" :theme="theme">
<template v-for="item in menuTree" :key="item.menuId">
<template v-if="item.visibleFlag && !item.disabledFlag">
<template v-if="$lodash.isEmpty(item.children)">
@@ -80,7 +73,7 @@
let parentList = menuParentIdListMap.get(currentRoute.name) || [];
// 如果是折叠菜单的话，则不需要设置openkey
if(!props.collapsed){
if (!props.collapsed) {
// 使用lodash的union函数，进行 去重合并两个数组
let needOpenKeys = _.map(parentList, 'name').map(Number);
openKeys.value = _.union(openKeys.value, needOpenKeys);

1
smart-admin-web-javascript/src/layout/components/top-expand-menu/index.vue
View File

@@ -46,7 +46,6 @@ let currentRoute = useRoute();
function updateSelectKeyAndOpenKey() {
// 第一步，根据路由 更新选中 顶级菜单
let parentList = useUserStore().menuParentIdListMap.get(currentRoute.name) || [];
console.log('parentList', parentList)
if (parentList.length === 0) {
topMenuRef.value.updateSelectKey(currentRoute.name);
return;

66
smart-admin-web-javascript/src/layout/components/top-expand-menu/recursion-menu.vue
View File

@@ -1,11 +1,11 @@
<!--
* 递归菜单
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:29:12
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:29:12
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<div class="recursion-container" v-show="topMenu.children && topMenu.children.length > 0">
@@ -39,10 +39,11 @@
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { ref, computed, watch } from 'vue';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
import SubMenu from './sub-menu.vue';
import { router } from '/@/router';
import { useRoute } from 'vue-router';
import _ from 'lodash';
import menuEmitter from './top-expand-menu-mitt';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
@@ -59,10 +60,23 @@ const props = defineProps({
},
});
//菜单宽度
const sideMenuWidth = computed(() => useAppConfigStore().$state.sideMenuWidth);
// 选中的顶级菜单
let topMenu = ref({});
menuEmitter.on('selectTopMenu', onSelectTopMenu);
//动态通知顶部菜单栏侧边栏状态
watch(
topMenu,
(value) => {
let hasSideMenu = value.children && value.children.length > 0;
menuEmitter.emit('sideMenuChange', hasSideMenu);
},
{ immediate: true, deep: true }
);
// 监听选中顶级菜单事件
function onSelectTopMenu(selectedTopMenu) {
topMenu.value = selectedTopMenu;
@@ -75,6 +89,7 @@ function onSelectTopMenu(selectedTopMenu) {
}
//展开的菜单
let currentRoute = useRoute();
const selectedKeys = ref([]);
const openKeys = ref([]);
@@ -87,6 +102,15 @@ function updateSelectKeyAndOpenKey(parentList, currentSelectKey) {
selectedKeys.value = [currentSelectKey];
}
watch(
currentRoute,
(value) => {
selectedKeys.value = [value.name];
},
{
immediate: true,
}
);
// 页面跳转
function turnToPage(route) {
useUserStore().deleteKeepAliveIncludes(route.menuId.toString());
@@ -113,22 +137,22 @@ const color = computed(() => {
background-color: v-bind('color.background');
}
.min-logo {
height: @header-user-height;
line-height: @header-user-height;
padding: 0px 15px 0px 15px;
// background-color: v-bind('color.background');
.min-logo {
height: @header-user-height;
line-height: @header-user-height;
padding: 0px 15px 0px 15px;
// background-color: v-bind('color.background');
width: 80px;
z-index: 21;
display: flex;
justify-content: center;
align-items: center;
.logo-img {
width: 30px;
height: 30px;
}
width: 80px;
z-index: 21;
display: flex;
justify-content: center;
align-items: center;
.logo-img {
width: 30px;
height: 30px;
}
}
.top-menu {
overflow: hidden;
display: flex;

25
smart-admin-web-javascript/src/layout/components/top-expand-menu/top-menu.vue
View File

@@ -75,19 +75,22 @@ function updateSelectKey(key) {
defineExpose({ updateSelectKey });
// 动态计算当前导航宽度
let menuInfo = computed(() => {
let hasSideMenu = ref(false);
menuEmitter.on('sideMenuChange', (data) => {
hasSideMenu.value = data;
});
const menuInfo = computed(() => {
let width = '100vw';
let right = '-100vw';
let selectedItem = _.find(menuTree.value, { menuId: Number(selectedKeys.value[0]) });
const hasSecoundMenu = selectedItem && !_.isEmpty(selectedItem.children) && selectedItem.children.some((e) => e.visibleFlag);
if (hasSecoundMenu) {
if (props.collapsed) {
width = 'calc(100vw - 80px)';
right = 'calc(-100vw + 80px)';
} else {
width = 'calc(100vw - 180px)';
right = 'calc(-100vw + 180px)';
}
if (hasSideMenu.value) {
if (props.collapsed) {
width = 'calc(100vw - 80px)';
right = 'calc(-100vw + 80px)';
} else {
width = 'calc(100vw - 180px)';
right = 'calc(-100vw + 180px)';
}
}
return {
width,

46
smart-admin-web-javascript/src/layout/side-expand-layout.vue
View File

@@ -20,7 +20,12 @@
<!-- 顶部头部信息 -->
<a-layout-header class="smart-layout-header" :id="LAYOUT_ELEMENT_IDS.header" v-show="!fullScreenFlag">
<a-row justify="space-between" class="smart-layout-header-user">
<a-col class="smart-layout-header-left">
<a-col
class="smart-layout-header-left"
:style="{
'max-width': `calc(100% - ${rightWidth}px)`,
}"
>
<span class="collapsed-button">
<menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
<menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
@@ -32,7 +37,8 @@
</span>
</a-tooltip>
<span class="location-breadcrumb">
<MenuLocationBreadcrumb />
<PageTag v-if="pageTagLocation === 'top'" />
<MenuLocationBreadcrumb v-if="pageTagLocation !== 'top'" />
</span>
</a-col>
<!---用戶操作区域-->
@@ -40,7 +46,7 @@
<HeaderUserSpace />
</a-col>
</a-row>
<PageTag />
<PageTag v-if="pageTagLocation === 'center'" />
</a-layout-header>
<!--中间内容-->
@@ -84,7 +90,7 @@
</a-layout>
</template>
<script setup>
import { computed, onMounted, ref, watch } from 'vue';
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import HeaderUserSpace from './components/header-user-space/index.vue';
import MenuLocationBreadcrumb from './components/menu-location-breadcrumb/index.vue';
import PageTag from './components/page-tag/index.vue';
@@ -99,6 +105,7 @@
import { useRouter } from 'vue-router';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
import { LAYOUT_ELEMENT_IDS } from '/@/layout/layout-const.js';
const appConfigStore = useAppConfigStore();
const windowHeight = ref(window.innerHeight);
//是否全屏
@@ -115,6 +122,8 @@
const footerFlag = computed(() => useAppConfigStore().$state.footerFlag);
// 是否显示水印
const watermarkFlag = computed(() => useAppConfigStore().$state.watermarkFlag);
// 标签页位置
const pageTagLocation = computed(() => useAppConfigStore().$state.pageTagLocation);
// 多余高度
const dueHeight = computed(() => {
let due = 40;
@@ -126,6 +135,34 @@
}
return due;
});
watch(
pageTagLocation,
(newVal) => {
if (newVal == 'top') {
nextTick(() => {
sizeComputed();
});
}
},
{
immediate: true,
}
);
const rightWidth = ref(0);
function sizeComputed() {
const tagParentElement = document.querySelector('.location-breadcrumb');
const tagsElement = tagParentElement.querySelector('.ant-tabs-nav-list');
const parentElement = document.querySelector('.smart-layout-header-user');
const rightElement = document.querySelector('.smart-layout-header-right');
rightWidth.value = rightElement.offsetWidth;
let ro = new ResizeObserver((e) => {
rightWidth.value = rightElement.offsetWidth + 10;
});
ro.observe(rightElement);
ro.observe(tagsElement);
ro.observe(parentElement);
}
//是否隐藏菜单
const collapsed = ref(false);
@@ -204,6 +241,7 @@
}
.location-breadcrumb {
width: calc(100% - 56px);
margin-left: 15px;
line-height: @header-user-height;
}

85
smart-admin-web-javascript/src/layout/side-layout.vue
View File

@@ -1,7 +1,14 @@
<template>
<a-layout class="admin-layout" style="min-height: 100%">
<!-- 侧边菜单 side-menu -->
<a-layout-sider :id="LAYOUT_ELEMENT_IDS.menu" class="side-menu" :width="sideMenuWidth" :collapsed="collapsed" :theme="theme" v-show="!fullScreenFlag">
<a-layout-sider
:id="LAYOUT_ELEMENT_IDS.menu"
class="side-menu"
:width="sideMenuWidth"
v-model:collapsed="collapsed"
:theme="theme"
v-show="!fullScreenFlag"
>
<!-- 左侧菜单 -->
<SideMenu :collapsed="collapsed" />
</a-layout-sider>
@@ -11,27 +18,35 @@
<!-- 顶部头部信息 -->
<a-layout-header class="layout-header" :id="LAYOUT_ELEMENT_IDS.header" v-show="!fullScreenFlag">
<a-row class="layout-header-user" justify="space-between">
<a-col class="layout-header-left">
<span class="collapsed-button">
<menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
<menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
</span>
<a-tooltip placement="bottom">
<template #title>首页</template>
<span class="home-button" @click="goHome">
<home-outlined class="trigger" />
<a-col
class="layout-header-left"
:style="{
'max-width': `calc(100% - ${rightWidth}px)`,
}"
>
<div class="layout-header-box">
<span class="collapsed-button">
<menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
<menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
</span>
</a-tooltip>
<span class="location-breadcrumb">
<MenuLocationBreadcrumb />
</span>
<a-tooltip placement="bottom">
<template #title>首页</template>
<span class="home-button" @click="goHome">
<home-outlined class="trigger" />
</span>
</a-tooltip>
<span class="location-breadcrumb">
<PageTag v-if="pageTagLocation === 'top'" />
<MenuLocationBreadcrumb />
</span>
</div>
</a-col>
<!---用戶操作区域-->
<a-col class="layout-header-right">
<HeaderUserSpace />
</a-col>
</a-row>
<PageTag />
<PageTag v-if="pageTagLocation === 'center'" />
</a-layout-header>
<!--中间内容-->
@@ -94,6 +109,8 @@
import { useRouter } from 'vue-router';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
import { LAYOUT_ELEMENT_IDS } from '/@/layout/layout-const.js';
import { nextTick } from 'vue';
const appConfigStore = useAppConfigStore();
const windowHeight = ref(window.innerHeight);
//是否全屏
@@ -112,6 +129,8 @@
const footerFlag = computed(() => useAppConfigStore().$state.footerFlag);
// 是否显示水印
const watermarkFlag = computed(() => useAppConfigStore().$state.watermarkFlag);
// 标签页位置
const pageTagLocation = computed(() => useAppConfigStore().$state.pageTagLocation);
// 多余高度
const dueHeight = computed(() => {
let due = 40;
@@ -123,6 +142,36 @@
}
return due;
});
watch(
pageTagLocation,
(newVal) => {
if (newVal == 'top') {
nextTick(() => {
sizeComputed();
});
}
},
{
immediate: true,
}
);
const rightWidth = ref(0);
function sizeComputed() {
const tagParentElement = document.querySelector('.location-breadcrumb');
const tagsElement = tagParentElement.querySelector('.ant-tabs-nav-list');
const parentElement = document.querySelector('.layout-header-user');
const rightElement = document.querySelector('.layout-header-right');
rightWidth.value = rightElement.offsetWidth;
let ro = new ResizeObserver((e) => {
rightWidth.value = rightElement.offsetWidth + 10;
});
ro.observe(rightElement);
ro.observe(tagsElement);
ro.observe(parentElement);
}
//是否隐藏菜单
const collapsed = ref(false);
@@ -188,6 +237,11 @@
display: flex;
height: @header-user-height;
.layout-header-box {
width: 100%;
overflow: hidden;
display: flex;
}
.collapsed-button {
margin-left: 10px;
line-height: @header-user-height;
@@ -205,6 +259,7 @@
}
.location-breadcrumb {
width: calc(100% - 56px);
margin-left: 15px;
line-height: @header-user-height;
}

384
smart-admin-web-javascript/src/layout/top-expand-layout.vue
View File

@@ -20,7 +20,12 @@
<!-- 顶部头部信息 -->
<a-layout-header class="smart-layout-header">
<a-row justify="space-between" class="smart-layout-header-user">
<a-col class="smart-layout-header-left">
<a-col
class="smart-layout-header-left"
:style="{
'max-width': `calc(100% - ${rightWidth}px)`,
}"
>
<span class="collapsed-button">
<menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
<menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
@@ -32,7 +37,8 @@
</span>
</a-tooltip>
<span class="location-breadcrumb">
<MenuLocationBreadcrumb />
<PageTag v-if="pageTagLocation === 'top'" />
<MenuLocationBreadcrumb v-if="pageTagLocation === 'center'" />
</span>
</a-col>
<!---用戶操作区域-->
@@ -40,7 +46,7 @@
<HeaderUserSpace />
</a-col>
</a-row>
<PageTag />
<PageTag v-if="pageTagLocation === 'center'" />
</a-layout-header>
<!--中间内容-->
@@ -76,204 +82,234 @@
</a-layout>
</template>
<script setup>
import { computed, onMounted, ref, watch } from 'vue';
import HeaderUserSpace from './components/header-user-space/index.vue';
import MenuLocationBreadcrumb from './components/menu-location-breadcrumb/index.vue';
import PageTag from './components/page-tag/index.vue';
import TopExpandMenu from './components/top-expand-menu/index.vue';
import SmartFooter from './components/smart-footer/index.vue';
import { smartKeepAlive } from './components/smart-keep-alive';
import IframeIndex from '/@/components/framework/iframe/iframe-index.vue';
import watermark from '../lib/smart-watermark';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
import { useUserStore } from '/@/store/modules/system/user';
import SideHelpDoc from './components/side-help-doc/index.vue';
import { useRouter } from 'vue-router';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import HeaderUserSpace from './components/header-user-space/index.vue';
import MenuLocationBreadcrumb from './components/menu-location-breadcrumb/index.vue';
import PageTag from './components/page-tag/index.vue';
import TopExpandMenu from './components/top-expand-menu/index.vue';
import SmartFooter from './components/smart-footer/index.vue';
import { smartKeepAlive } from './components/smart-keep-alive';
import IframeIndex from '/@/components/framework/iframe/iframe-index.vue';
import watermark from '../lib/smart-watermark';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
import { useUserStore } from '/@/store/modules/system/user';
import SideHelpDoc from './components/side-help-doc/index.vue';
import { useRouter } from 'vue-router';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
const windowHeight = ref(window.innerHeight);
const windowHeight = ref(window.innerHeight);
//主题颜色
const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
//是否显示标签页
const pageTagFlag = computed(() => useAppConfigStore().$state.pageTagFlag);
// 是否显示帮助文档
const helpDocFlag = computed(() => useAppConfigStore().$state.helpDocExpandFlag);
// 是否显示页脚
const footerFlag = computed(() => useAppConfigStore().$state.footerFlag);
// 是否显示水印
const watermarkFlag = computed(() => useAppConfigStore().$state.watermarkFlag);
// 多余高度
const dueHeight = computed(() => {
let due = 40;
if (useAppConfigStore().$state.pageTagFlag) {
due = due + 40;
//主题颜色
const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
//是否显示标签页
const pageTagFlag = computed(() => useAppConfigStore().$state.pageTagFlag);
// 是否显示帮助文档
const helpDocFlag = computed(() => useAppConfigStore().$state.helpDocExpandFlag);
// 是否显示页脚
const footerFlag = computed(() => useAppConfigStore().$state.footerFlag);
// 是否显示水印
const watermarkFlag = computed(() => useAppConfigStore().$state.watermarkFlag);
// 标签页位置
const pageTagLocation = computed(() => useAppConfigStore().$state.pageTagLocation);
// 多余高度
const dueHeight = computed(() => {
let due = 40;
if (useAppConfigStore().$state.pageTagFlag) {
due = due + 40;
}
if (useAppConfigStore().$state.footerFlag) {
due = due + 40;
}
return due;
});
watch(
pageTagLocation,
(newVal) => {
if (newVal == 'top') {
nextTick(() => {
sizeComputed();
});
}
},
{
immediate: true,
}
);
const rightWidth = ref(0);
function sizeComputed() {
const tagParentElement = document.querySelector('.location-breadcrumb');
const tagsElement = tagParentElement.querySelector('.ant-tabs-nav-list');
const parentElement = document.querySelector('.smart-layout-header-user');
const rightElement = document.querySelector('.smart-layout-header-right');
rightWidth.value = rightElement.offsetWidth;
let ro = new ResizeObserver((e) => {
rightWidth.value = rightElement.offsetWidth + 10;
});
ro.observe(rightElement);
ro.observe(tagsElement);
ro.observe(parentElement);
}
if (useAppConfigStore().$state.footerFlag) {
due = due + 40;
}
return due;
});
//是否隐藏菜单
const collapsed = ref(false);
//是否隐藏菜单
const collapsed = ref(false);
//页面初始化的时候加载水印
onMounted(() => {
if (watermarkFlag.value) {
watermark.set('smartAdminLayoutContent', useUserStore().actualName);
} else {
watermark.clear();
}
});
watch(
() => watermarkFlag.value,
(newValue) => {
if (newValue) {
//页面初始化的时候加载水印
onMounted(() => {
if (watermarkFlag.value) {
watermark.set('smartAdminLayoutContent', useUserStore().actualName);
} else {
watermark.clear();
}
});
watch(
() => watermarkFlag.value,
(newValue) => {
if (newValue) {
watermark.set('smartAdminLayoutContent', useUserStore().actualName);
} else {
watermark.clear();
}
}
);
window.addEventListener('resize', function () {
windowHeight.value = window.innerHeight;
});
//回到顶部
const backTopTarget = () => {
return document.getElementById('smartAdminMain');
};
// ----------------------- keep-alive相关 -----------------------
let { route, keepAliveIncludes, iframeNotKeepAlivePageFlag, keepAliveIframePages } = smartKeepAlive();
const router = useRouter();
function goHome() {
router.push({ name: HOME_PAGE_NAME });
}
);
window.addEventListener('resize', function () {
windowHeight.value = window.innerHeight;
});
//回到顶部
const backTopTarget = () => {
return document.getElementById('smartAdminMain');
};
// ----------------------- keep-alive相关 -----------------------
let { route, keepAliveIncludes, iframeNotKeepAlivePageFlag, keepAliveIframePages } = smartKeepAlive();
const router = useRouter();
function goHome() {
router.push({ name: HOME_PAGE_NAME });
}
</script>
<style scoped lang="less">
:deep(.ant-layout-header) {
height: auto;
}
:deep(.layout-header) {
height: auto;
}
.smart-layout-header {
background: #fff;
padding: 0;
z-index: 21;
}
.smart-layout-header-user {
height: @header-user-height;
border-bottom: 1px solid #f6f6f6;
}
.smart-layout-header-left {
display: flex;
height: @header-user-height;
.collapsed-button {
margin-left: 10px;
line-height: @header-user-height;
:deep(.ant-layout-header) {
height: auto;
}
:deep(.layout-header) {
height: auto;
}
.home-button {
margin-left: 15px;
cursor: pointer;
padding: 0 5px;
line-height: @header-user-height;
.smart-layout-header {
background: #fff;
padding: 0;
z-index: 21;
}
.home-button:hover {
background-color: #efefef;
.smart-layout-header-user {
height: @header-user-height;
border-bottom: 1px solid #f6f6f6;
}
.location-breadcrumb {
margin-left: 15px;
line-height: @header-user-height;
.smart-layout-header-left {
display: flex;
height: @header-user-height;
.collapsed-button {
margin-left: 10px;
line-height: @header-user-height;
}
.home-button {
margin-left: 15px;
cursor: pointer;
padding: 0 5px;
line-height: @header-user-height;
}
.home-button:hover {
background-color: #efefef;
}
.location-breadcrumb {
width: calc(100% - 56px);
margin-left: 15px;
line-height: @header-user-height;
}
}
}
.smart-layout-header-right {
display: flex;
height: @header-user-height;
}
.smart-layout-header-right {
display: flex;
height: @header-user-height;
}
.admin-layout {
.side-menu {
height: 100vh;
flex: 0 !important;
min-width: inherit !important;
max-width: none !important;
// width: auto !important;
&.fixed-side {
position: fixed;
.admin-layout {
.side-menu {
height: 100vh;
left: 0;
top: 0;
flex: 0 !important;
min-width: inherit !important;
max-width: none !important;
// width: auto !important;
&.fixed-side {
position: fixed;
height: 100vh;
left: 0;
top: 0;
}
}
.side-menu::-webkit-scrollbar {
width: 4px;
}
.side-menu::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
}
.side-menu::-webkit-scrollbar-track {
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
}
.side-menu::-webkit-scrollbar {
width: 4px;
}
.side-menu::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
}
.side-menu::-webkit-scrollbar-track {
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
.help-doc-sider {
flex: 0 !important;
min-width: 100px;
height: 100vh;
max-width: 100px;
width: auto !important;
&.fixed-side {
position: fixed;
.help-doc-sider {
flex: 0 !important;
min-width: 100px;
height: 100vh;
right: 0;
top: 0;
max-width: 100px;
width: auto !important;
&.fixed-side {
position: fixed;
height: 100vh;
right: 0;
top: 0;
}
}
.virtual-side {
transition: all 0.2s;
}
.virtual-header {
transition: all 0.2s;
opacity: 0;
&.fixed-tabs.multi-page:not(.fixed-header) {
height: 0;
}
}
.admin-layout-main {
padding-top: 46px;
overflow-x: hidden;
}
.admin-layout-content {
background-color: inherit;
min-height: auto;
position: relative;
padding: 10px 10px 0px 10px;
height: calc(100% - v-bind(dueHeight) px);
overflow-x: hidden;
}
}
.virtual-side {
transition: all 0.2s;
}
.virtual-header {
transition: all 0.2s;
opacity: 0;
&.fixed-tabs.multi-page:not(.fixed-header) {
height: 0;
}
}
.admin-layout-main {
padding-top: 46px;
overflow-x: hidden;
}
.admin-layout-content {
background-color: inherit;
min-height: auto;
.smart-layout-footer {
position: relative;
padding: 10px 10px 0px 10px;
height: calc(100% - v-bind(dueHeight) px);
overflow-x: hidden;
padding: 10px 0;
display: flex;
justify-content: center;
}
}
.smart-layout-footer {
position: relative;
padding: 10px 0;
display: flex;
justify-content: center;
}
</style>

17
smart-admin-web-javascript/src/layout/top-layout.vue
View File

@@ -8,7 +8,8 @@
<!--中间内容-->
<a-layout-content :id="LAYOUT_ELEMENT_IDS.content" class="admin-layout-content">
<!---标签页-->
<div class="page-tag-div" v-show="pageTagFlag && !fullScreenFlag" :id="LAYOUT_ELEMENT_IDS.header">
<div class="page-tag-div" v-show="(pageTagFlag && !fullScreenFlag) || breadCrumbFlag" :id="LAYOUT_ELEMENT_IDS.header">
<MenuLocationBreadcrumb v-if="pageTagLocation !== 'top'" />
<PageTag />
</div>
@@ -56,6 +57,7 @@
import { useRouter } from 'vue-router';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
import { LAYOUT_ELEMENT_IDS } from '/@/layout/layout-const.js';
import MenuLocationBreadcrumb from './components/menu-location-breadcrumb/index.vue';
const windowHeight = ref(window.innerHeight);
//主题颜色
@@ -76,6 +78,10 @@
const footerFlag = computed(() => useAppConfigStore().$state.footerFlag);
// 是否显示水印
const watermarkFlag = computed(() => useAppConfigStore().$state.watermarkFlag);
// 标签页位置
const pageTagLocation = computed(() => useAppConfigStore().$state.pageTagLocation);
// 面包屑
const breadCrumbFlag = computed(() => useAppConfigStore().$state.breadCrumbFlag);
// 页面宽度
const pageWidth = computed(() => useAppConfigStore().$state.pageWidth);
// 多余高度
@@ -85,9 +91,16 @@
}
let due = '45px';
if (useAppConfigStore().$state.pageTagFlag) {
if (useAppConfigStore().$state.pageTagFlag || useAppConfigStore().$state.breadCrumbFlag) {
due = '85px';
}
if (
useAppConfigStore().$state.pageTagFlag &&
useAppConfigStore().$state.pageTagLocation === 'center' &&
useAppConfigStore().$state.breadCrumbFlag
) {
due = '125px';
}
return due;
});