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.25.0【优化】密码加密随机盐;【优化】java依赖版本;【优化】后端依赖库;【优化】单号生成器;【优化】防重复提交;【优化】sa-base.yaml健康检查邮箱;【新增】前端夜间模式;【优化】标签页issue;【优化】字典int回显bug

Browse Source
This commit is contained in:
zhuoda
2025-08-05 20:10:13 +08:00
parent 97df843072
commit 075e7ad134
147 changed files with 2412 additions and 1772 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -252,7 +252,6 @@
}
.dropdown-tabs {
background-color: @base-bg-color;
border-radius: 4px;
}

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

@@ -13,7 +13,7 @@
<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">
<a-select-option v-for="item in i18nList" :key="item.value" :value="item.value">{{ item.text }}</a-select-option>
<a-select-option v-for="item in i18nList" :key="item.value" :value="item.value">{{ item.text }} </a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('setting.color')">
@@ -51,12 +51,6 @@
<a-input @change="changePageWidth" v-model:value="formState.pageWidth" />
像素（px）或者 百分比
</a-form-item>
<a-form-item :label="$t('setting.compact')">
<a-radio-group v-model:value="formState.compactFlag" button-style="solid" @change="changeCompactFlag">
<a-radio-button :value="false">默认</a-radio-button>
<a-radio-button :value="true">紧凑</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item :label="$t('setting.menu.layout')">
<a-radio-group @change="changeLayout" button-style="solid" v-model:value="formState.layout">
<a-radio-button v-for="item in $smartEnumPlugin.getValueDescList('LAYOUT_ENUM')" :key="item.value" :value="item.value">
@@ -70,6 +64,12 @@
<a-radio-button value="light">Light</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item :label="$t('setting.compact')">
<a-radio-group v-model:value="formState.compactFlag" button-style="solid" @change="changeCompactFlag">
<a-radio-button :value="false">默认</a-radio-button>
<a-radio-button :value="true">紧凑</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>
@@ -92,7 +92,6 @@
<a-form-item :label="$t('setting.bread')">
<a-switch
@change="changeBreadCrumbFlag"
:disabled="formState.pageTagLocation === 'top'"
v-model:checked="formState.breadCrumbFlag"
checked-children="显示"
un-checked-children="隐藏"
@@ -115,23 +114,26 @@
un-checked-children="默认不展开"
/>
</a-form-item>
<a-form-item :label="$t('setting.darkmode')">
<a-switch @change="changeDarkMode" v-model:checked="formState.darkModeFlag" checked-children="开启" un-checked-children="关闭" />
</a-form-item>
<br />
<br />
</a-form>
<div class="footer">
<a-button style="margin-right: 8px" type="primary" @click="copy">复制配置信息</a-button>
<a-button type="block" danger @click="reset">恢复默认配置 </a-button>
<a-button type="primary" danger @click="reset">恢复默认配置</a-button>
</div>
</a-drawer>
</template>
<script setup>
import { ref, reactive, h, watch } from 'vue';
import { h, reactive, ref, watch } from 'vue';
import { i18nList } from '/@/i18n/index';
import { useI18n } from 'vue-i18n';
import localStorageKeyConst from '/@/constants/local-storage-key-const';
import { LAYOUT_ENUM } from '/@/constants/layout-const';
import { localRead, localSave } from '/@/utils/local-util';
import { localSave } from '/@/utils/local-util';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
import { Modal } from 'ant-design-vue';
import { appDefaultConfig } from '/@/config/app-config';
@@ -203,6 +205,8 @@
sideMenuWidth: appConfigStore.sideMenuWidth,
// 菜单主题
sideMenuTheme: appConfigStore.sideMenuTheme,
// 夜间模式
darkModeFlag: appConfigStore.darkModeFlag,
// 页面紧凑
compactFlag: appConfigStore.compactFlag,
// 页面圆角
@@ -229,21 +233,8 @@
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;
appConfigStore.$patch({
@@ -293,6 +284,7 @@
compactFlag: e.target.value,
});
}
function changeBorderRadius(e) {
appConfigStore.$patch({
borderRadius: e,
@@ -310,6 +302,7 @@
pageTagFlag: e,
});
}
function changeFlatPattern(e) {
appConfigStore.$patch({
flatPattern: e,
@@ -345,6 +338,12 @@
watermarkFlag: e,
});
}
function changeDarkMode(e) {
appConfigStore.$patch({
darkModeFlag: e,
});
}
</script>
<style lang="less" scoped>
.footer {
@@ -354,9 +353,9 @@
width: 100%;
border-top: 1px solid #e9e9e9;
padding: 10px 16px;
background: #fff;
text-align: left;
z-index: 1;
z-index: 99999;
background-color: white;
}
.color-container {

19
smart-admin-web-javascript/src/layout/components/page-tag/components/antd-tab.vue
View File

@@ -9,7 +9,7 @@
-->
<template>
<!-- 标签页，共两部分：1、标签 ；2、标签操作区 -->
<a-row style="border-bottom: 1px solid #eeeeee; position: relative" v-show="pageTagFlag">
<a-row style="position: relative" v-show="pageTagFlag">
<a-dropdown :trigger="['contextmenu']">
<div class="smart-page-tag">
<a-tabs style="width: 100%" type="card" :tab-position="mode" v-model:activeKey="selectedKey" size="small" @tabClick="selectTab">
@@ -138,18 +138,17 @@
<style scoped lang="less">
@smart-page-tag-operate-width: 40px;
@color-primary: v-bind('token.colorPrimary');
@color-primary-bg: v-bind('token.colorPrimaryBg');
.smart-page-tag-operate {
width: @smart-page-tag-operate-width;
height: @smart-page-tag-operate-width;
background-color: #ffffff;
font-size: 17px;
text-align: center;
vertical-align: middle;
line-height: @smart-page-tag-operate-width;
padding-right: 10px;
cursor: pointer;
color: #606266;
.smart-page-tag-operate-icon {
width: 20px;
@@ -167,6 +166,7 @@
.smart-page-tag-operate:hover {
color: @color-primary;
background-color: @color-primary-bg;
}
.smart-page-tag {
@@ -180,7 +180,6 @@
padding-right: 20px;
padding-left: 20px;
user-select: none;
background: #fff;
width: calc(100% - @smart-page-tag-operate-width);
.smart-page-tag-close {
@@ -193,11 +192,11 @@
:deep(.ant-tabs-nav) {
margin: 0;
&::before{
border-bottom: none !important;
}
}
:deep(.ant-tabs-nav::before) {
border-bottom: 1px solid #ffffff;
}
:deep(.ant-tabs-small > .ant-tabs-nav .ant-tabs-tab) {
padding: 5px 8px 3px 15px;
@@ -209,12 +208,16 @@
}
:deep(.ant-tabs-tab-active) {
background-color: @color-primary-bg;
.smart-page-tag-close {
color: @color-primary;
}
}
:deep(.ant-tabs-nav .ant-tabs-tab:hover) {
background-color: white;
background-color: @color-primary-bg;
.smart-page-tag-close {
color: @color-primary;
}

457
smart-admin-web-javascript/src/layout/components/page-tag/components/chrome-tab.vue
View File

@@ -9,7 +9,7 @@
-->
<template>
<!-- 标签页，共两部分：1、标签 ；2、标签操作区 -->
<a-row style="border-bottom: 1px solid #eeeeee; position: relative" v-show="pageTagFlag">
<a-row style="position: relative" v-show="pageTagFlag">
<a-dropdown :trigger="['contextmenu']">
<div class="smart-page-tag">
<a-tabs style="width: 100%" :tab-position="mode" v-model:activeKey="selectedKey" size="small" @tabClick="selectTab">
@@ -51,259 +51,215 @@
</template>
<script setup>
import { AppstoreOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { computed, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
import { useUserStore } from '/@/store/modules/system/user';
import { theme } from 'ant-design-vue';
import { AppstoreOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { computed, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
import { useUserStore } from '/@/store/modules/system/user';
import { theme } from 'ant-design-vue';
//标签页 是否显示
const pageTagFlag = computed(() => useAppConfigStore().$state.pageTagFlag);
//标签页 是否显示
const pageTagFlag = computed(() => useAppConfigStore().$state.pageTagFlag);
const router = useRouter();
const route = useRoute();
const mode = ref('top');
const tagNav = computed(() => useUserStore().getTagNav || []);
const selectedKey = ref(route.name);
const router = useRouter();
const route = useRoute();
const mode = ref('top');
const tagNav = computed(() => useUserStore().getTagNav || []);
const selectedKey = ref(route.name);
watch(
() => route.name,
(newValue, oldValue) => {
selectedKey.value = newValue;
},
{ immediate: true }
);
watch(
() => route.name,
(newValue, oldValue) => {
selectedKey.value = newValue;
},
{ immediate: true }
);
//选择某个标签页
function selectTab(name) {
if (selectedKey.value === name) {
return;
}
// 寻找tag
let tag = tagNav.value.find((e) => e.menuName === name);
if (!tag) {
router.push({ name: HOME_PAGE_NAME });
return;
}
// router.push({ name, query: Object.assign({ _keepAlive: 1 }, tag.menuQuery) });
router.push({ name, query: tag.menuQuery });
}
//通过菜单关闭
function closeByMenu(closeAll) {
let find = tagNav.value.find((e) => e.menuName === selectedKey.value);
if (!find || closeAll) {
closeTag(null, true);
} else {
closeTag(find, true);
}
}
//直接关闭
function closeTag(item, closeAll) {
// 关闭单个tag
if (item && !closeAll) {
let goName = HOME_PAGE_NAME;
let goQuery = undefined;
if (item.fromMenuName && item.fromMenuName !== item.menuName && tagNav.value.some((e) => e.menuName === item.fromMenuName)) {
goName = item.fromMenuName;
goQuery = item.fromMenuQuery;
} else {
// 查询左侧tag
let index = tagNav.value.findIndex((e) => e.menuName === item.menuName);
if (index > 0) {
// 查询左侧tag
let leftTagNav = tagNav.value[index - 1];
goName = leftTagNav.menuName;
goQuery = leftTagNav.menuQuery;
}
//选择某个标签页
function selectTab(name) {
if (selectedKey.value === name) {
return;
}
// router.push({ name: goName, query: Object.assign({ _keepAlive: 1 }, goQuery) });
router.push({ name: goName, query: goQuery });
} else if (!item && closeAll) {
// 关闭所有tag
router.push({ name: HOME_PAGE_NAME });
// 寻找tag
let tag = tagNav.value.find((e) => e.menuName === name);
if (!tag) {
router.push({ name: HOME_PAGE_NAME });
return;
}
// router.push({ name, query: Object.assign({ _keepAlive: 1 }, tag.menuQuery) });
router.push({ name, query: tag.menuQuery });
}
// 关闭其他tag不做处理 直接调用closeTagNav
useUserStore().closeTagNav(item ? item.menuName : null, closeAll);
}
const { useToken } = theme;
const { token } = useToken();
const borderRadius = 8 + 'px';
//通过菜单关闭
function closeByMenu(closeAll) {
let find = tagNav.value.find((e) => e.menuName === selectedKey.value);
if (!find || closeAll) {
closeTag(null, true);
} else {
closeTag(find, true);
}
}
//直接关闭
function closeTag(item, closeAll) {
// 关闭单个tag
if (item && !closeAll) {
let goName = HOME_PAGE_NAME;
let goQuery = undefined;
if (item.fromMenuName && item.fromMenuName !== item.menuName && tagNav.value.some((e) => e.menuName === item.fromMenuName)) {
goName = item.fromMenuName;
goQuery = item.fromMenuQuery;
} else {
// 查询左侧tag
let index = tagNav.value.findIndex((e) => e.menuName === item.menuName);
if (index > 0) {
// 查询左侧tag
let leftTagNav = tagNav.value[index - 1];
goName = leftTagNav.menuName;
goQuery = leftTagNav.menuQuery;
}
}
// router.push({ name: goName, query: Object.assign({ _keepAlive: 1 }, goQuery) });
router.push({ name: goName, query: goQuery });
} else if (!item && closeAll) {
// 关闭所有tag
router.push({ name: HOME_PAGE_NAME });
}
// 关闭其他tag不做处理 直接调用closeTagNav
useUserStore().closeTagNav(item ? item.menuName : null, closeAll);
}
const { useToken } = theme;
const { token } = useToken();
const borderRadius = 8 + 'px';
</script>
<style scoped lang="less">
@smart-page-tag-operate-width: 40px;
@color-primary: v-bind('token.colorPrimary');
@smart-page-tag-operate-width: 40px;
@color-primary: v-bind('token.colorPrimary');
@color-primary-bg: v-bind('token.colorPrimaryBg');
.smart-page-tag-operate {
width: @smart-page-tag-operate-width;
height: @smart-page-tag-operate-width;
background-color: #ffffff;
font-size: 17px;
text-align: center;
vertical-align: middle;
line-height: @smart-page-tag-operate-width;
padding-right: 10px;
cursor: pointer;
color: #606266;
.smart-page-tag-operate {
width: @smart-page-tag-operate-width;
height: @smart-page-tag-operate-width;
font-size: 17px;
text-align: center;
vertical-align: middle;
line-height: @smart-page-tag-operate-width;
padding-right: 10px;
cursor: pointer;
.smart-page-tag-operate-icon {
width: 20px;
height: 20px;
transition: all 1s;
transform-origin: 10px 20px;
}
.smart-page-tag-operate-icon:hover {
width: 20px;
height: 20px;
transform: rotate(360deg);
}
}
.smart-page-tag-operate:hover {
color: @color-primary;
}
.smart-page-tag {
position: relative;
box-sizing: border-box;
display: flex;
align-content: center;
align-items: flex-end;
justify-content: space-between;
min-height: @page-tag-height;
padding-right: 20px;
padding-left: 20px;
user-select: none;
background: #fff;
width: calc(100% - @smart-page-tag-operate-width);
.smart-page-tag-close {
margin-left: 5px;
font-size: 12px;
color: #666666;
}
/** 覆盖 ant design vue的 tabs 样式，变小一点 **/
:deep(.ant-tabs-nav) {
margin: 0;
// padding: 0 0 2px 0;
min-height: 35px;
min-width: 120px;
box-sizing: border-box;
}
:deep(.ant-tabs-nav::before) {
border-bottom: 1px solid #ffffff;
}
:deep(.ant-tabs-small > .ant-tabs-nav .ant-tabs-tab) {
padding: 5px 18px 3px 24px;
border-radius: v-bind(borderRadius) v-bind(borderRadius) 0 0;
margin: 0 -10px;
&:nth-child(1) {
margin-left: 0 !important;
.smart-page-tag-operate-icon {
width: 20px;
height: 20px;
transition: all 1s;
transform-origin: 10px 20px;
}
&:nth-last-child(2) {
margin-right: 0 !important;
.smart-page-tag-operate-icon:hover {
width: 20px;
height: 20px;
transform: rotate(360deg);
}
}
.smart-page-tag-content {
display: inline-block;
min-width: 100px;
&::after {
content: '';
position: absolute;
width: 1px;
height: 16px;
position: absolute;
right: 9px;
z-index: -2;
top: 10px;
background: #eeeeee;
}
.smart-page-tag-icon{
margin-right:5px;
}
.smart-page-tag-operate:hover {
color: @color-primary;
}
:deep(.ant-tabs-tab-active) {
.smart-page-tag {
position: relative;
background-size: 60% 100%;
& + .ant-tabs-tab {
margin-left: -50px;
box-sizing: border-box;
display: flex;
align-content: center;
align-items: flex-end;
justify-content: space-between;
min-height: @page-tag-height;
padding-right: 20px;
padding-left: 20px;
user-select: none;
width: calc(100% - @smart-page-tag-operate-width);
.smart-page-tag-close {
margin-left: 5px;
font-size: 12px;
color: #666666;
}
&::before {
content: '';
background: url(/@/assets/images/nav/active_bg2.svg) no-repeat left;
width: 50%;
height: 35px;
// background-size: 130%;
z-index: -1;
position: absolute;
left: -4px;
bottom: 0;
/** 覆盖 ant design vue的 tabs 样式，变小一点 **/
:deep(.ant-tabs-nav) {
margin: 0;
// padding: 0 0 2px 0;
min-height: 35px;
min-width: 120px;
box-sizing: border-box;
&::before{
border-bottom: none !important;
}
}
&::after {
content: '';
background: url(/@/assets/images/nav/active_bg2.svg) no-repeat left;
width: 50%;
height: 35px;
transform: scaleX(-1);
// background-size: 130%;
z-index: -1;
position: absolute;
right: -4px;
bottom: 0;
:deep(.ant-tabs-small > .ant-tabs-nav .ant-tabs-tab) {
padding: 5px 18px 3px 24px;
border-radius: v-bind(borderRadius) v-bind(borderRadius) 0 0;
margin: 0 -10px;
&:nth-child(1) {
margin-left: 0 !important;
}
&:nth-last-child(2) {
margin-right: 0 !important;
}
}
.smart-page-tag-content {
&::before {
display: inline-block;
min-width: 100px;
&::after {
content: '';
position: absolute;
height: 35px;
background: #e9efff;
width: 60%;
left: 0;
right: 0;
// top: 0;
bottom: 0;
margin: auto;
z-index: -1;
width: 1px;
height: 16px;
position: absolute;
right: 9px;
z-index: -2;
top: 10px;
background: #eeeeee;
}
&::after {
display: none;
.smart-page-tag-icon {
margin-right: 5px;
}
}
.smart-page-tag-close {
color: @color-primary;
}
}
:deep(.ant-tabs-ink-bar) {
display: none;
}
:deep(.ant-tabs-nav .ant-tabs-tab:hover) {
&:not(.ant-tabs-tab-active) {
:deep(.ant-tabs-tab-active) {
position: relative;
background-size: 60% 100%;
& + .ant-tabs-tab {
margin-left: -50px;
}
&::before {
content: '';
background: url(/@/assets/images/nav/active_bg2_default.svg) no-repeat left;
mask: url(/@/assets/images/nav/active_bg2.svg) no-repeat left;
background-color: @color-primary-bg;
width: 50%;
height: 35px;
// background-size: 130%;
z-index: -2;
z-index: -1;
position: absolute;
left: -4px;
bottom: 0;
}
&::after {
content: '';
background: url(/@/assets/images/nav/active_bg2_default.svg) no-repeat left;
mask: url(/@/assets/images/nav/active_bg2.svg) no-repeat left;
background-color: @color-primary-bg;
width: 50%;
height: 35px;
transform: scaleX(-1);
@@ -313,13 +269,13 @@ const borderRadius = 8 + 'px';
right: -4px;
bottom: 0;
}
.smart-page-tag-content {
color:rgba(0,0,0,.88);
&::before {
content: '';
position: absolute;
height: 35px;
background: #dee1e6;
background: @color-primary-bg;
width: 60%;
left: 0;
right: 0;
@@ -328,15 +284,76 @@ const borderRadius = 8 + 'px';
margin: auto;
z-index: -1;
}
&::after {
display: none;
}
}
.smart-page-tag-close {
color: @color-primary;
}
}
.smart-page-tag-close {
color: @color-primary;
:deep(.ant-tabs-ink-bar) {
display: none;
}
:deep(.ant-tabs-nav .ant-tabs-tab:hover) {
&:not(.ant-tabs-tab-active) {
&::before {
content: '';
mask: url(/@/assets/images/nav/active_bg2_default.svg) no-repeat left;
background-color: @color-primary-bg;
width: 50%;
height: 35px;
// background-size: 130%;
z-index: -2;
position: absolute;
left: -4px;
bottom: 0;
}
&::after {
content: '';
mask: url(/@/assets/images/nav/active_bg2_default.svg) no-repeat left;
background-color: @color-primary-bg;
width: 50%;
height: 35px;
transform: scaleX(-1);
// background-size: 130%;
z-index: -1;
position: absolute;
right: -4px;
bottom: 0;
}
.smart-page-tag-content {
color: @color-primary;
&::before {
content: '';
position: absolute;
height: 35px;
background: @color-primary-bg;
width: 60%;
left: 0;
right: 0;
// top: 0;
bottom: 0;
margin: auto;
z-index: -1;
}
&::after {
display: none;
}
}
}
.smart-page-tag-close {
color: @color-primary;
}
}
}
}
</style>

37
smart-admin-web-javascript/src/layout/components/page-tag/components/default-tab.vue
View File

@@ -9,16 +9,17 @@
-->
<template>
<!-- 标签页，共两部分：1、标签 ；2、标签操作区 -->
<a-row style="border-bottom: 1px solid #eeeeee; position: relative" v-show="pageTagFlag">
<a-row style=" position: relative" v-show="pageTagFlag">
<a-dropdown :trigger="['contextmenu']">
<div class="smart-page-tag">
<a-tabs style="width: 100%" :tab-position="mode" v-model:activeKey="selectedKey" size="small" @tabClick="selectTab">
<a-tab-pane v-for="item in tagNav" :key="item.menuName">
<template #tab>
<span>
<span class="smart-page-tag-span">
<home-outlined v-if="item.menuName === HOME_PAGE_NAME" class="smart-page-tag-close smart-page-tag-icon" />
<component class="smart-page-tag-icon" v-else :is="$antIcons[item.menuIcon]" />
{{ item.menuTitle }}
<close-outlined @click.stop="closeTag(item, false)" v-if="item.menuName !== HOME_PAGE_NAME" class="smart-page-tag-close" />
<home-outlined style="font-size: 12px" v-if="item.menuName === HOME_PAGE_NAME" class="smart-page-tag-close" />
</span>
</template>
</a-tab-pane>
@@ -137,18 +138,17 @@
<style scoped lang="less">
@smart-page-tag-operate-width: 40px;
@color-primary: v-bind('token.colorPrimary');
@color-primary-bg: v-bind('token.colorPrimaryBg');
.smart-page-tag-operate {
width: @smart-page-tag-operate-width;
height: @smart-page-tag-operate-width;
background-color: #ffffff;
font-size: 17px;
text-align: center;
vertical-align: middle;
line-height: @smart-page-tag-operate-width;
padding-right: 10px;
cursor: pointer;
color: #606266;
.smart-page-tag-operate-icon {
width: 20px;
@@ -168,6 +168,14 @@
color: @color-primary;
}
.smart-page-tag-span:first-child {
padding-right: 15px;
.smart-page-tag-icon {
font-size: 12px;
}
}
.smart-page-tag {
position: relative;
box-sizing: border-box;
@@ -179,9 +187,12 @@
padding-right: 20px;
padding-left: 20px;
user-select: none;
background: #fff;
width: calc(100% - @smart-page-tag-operate-width);
.smart-page-tag-icon {
margin-right: 4px;
}
.smart-page-tag-close {
margin-left: 5px;
font-size: 10px;
@@ -194,10 +205,9 @@
margin: 0;
padding: 0 0 2px 0;
max-height: 32px;
}
:deep(.ant-tabs-nav::before) {
border-bottom: 1px solid #ffffff;
&::before{
border-bottom: none !important;
}
}
:deep(.ant-tabs-small > .ant-tabs-nav .ant-tabs-tab) {
@@ -207,13 +217,16 @@
}
:deep(.ant-tabs-tab-active) {
background-color: #eeeeee;
background-color: @color-primary-bg;
.smart-page-tag-close {
color: @color-primary;
}
}
:deep(.ant-tabs-nav .ant-tabs-tab:hover) {
background-color: #eeeeee;
background-color: @color-primary-bg;
.smart-page-tag-close {
color: @color-primary;
}

11
smart-admin-web-javascript/src/layout/components/page-tag/index.vue
View File

@@ -8,7 +8,7 @@
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<div id="smartAdminPageTag">
<div id="smartAdminPageTag" class="page-tag-div">
<DefaultTab v-if="pageTagStyle === PAGE_TAG_ENUM.DEFAULT.value" />
<AntdTab v-if="pageTagStyle === PAGE_TAG_ENUM.ANTD.value" />
<ChromeTab v-if="pageTagStyle === PAGE_TAG_ENUM.CHROME.value" />
@@ -22,6 +22,15 @@
import AntdTab from './components/antd-tab.vue';
import ChromeTab from './components/chrome-tab.vue';
import { PAGE_TAG_ENUM } from '/@/constants/layout-const.js';
import { theme } from 'ant-design-vue';
const pageTagStyle = computed(() => useAppConfigStore().$state.pageTagStyle);
const { useToken } = theme;
const { token } = useToken();
</script>
<style lang="less" scoped>
@color-border-secondary: v-bind('token.colorBorderSecondary');
.page-tag-div{
border-bottom: 1px solid @color-border-secondary;
}
</style>

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

@@ -43,6 +43,7 @@
import _ from 'lodash';
import menuEmitter from './side-expand-menu-mitt';
import { useUserStore } from '/@/store/modules/system/user';
import { theme } from 'ant-design-vue';
// 选中的顶级菜单
let topMenu = ref({});
@@ -83,12 +84,20 @@
}
defineExpose({ updateSelectKeyAndOpenKey });
const { useToken } = theme;
const { token } = useToken();
</script>
<style scoped lang="less">
@color-bg-container: v-bind('token.colorBgContainer');
@color-border-secondary: v-bind('token.colorBorderSecondary');
.recursion-container {
height: 100vh;
background: #ffffff;
background-color: @color-bg-container;
}
.recursion-container ::-webkit-scrollbar { width: 0 !important }
.bottom-menu{
overflow: auto;
display: flex;
@@ -102,8 +111,7 @@
justify-content: center;
height: @header-user-height;
font-size: 16px;
color: #515a6e;
border-bottom: 1px solid #f3f3f3;
border-right: 1px solid #f3f3f3;
border-bottom: 1px solid @color-border-secondary;
border-right: 1px solid @color-border-secondary;
}
</style>

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

@@ -12,14 +12,13 @@
<!-- 顶部logo区域 -->
<div class="logo" @click="onGoHome" :style="sideMenuWidth" v-if="!collapsed">
<img class="logo-img" :src="logoImg" />
<div class="title smart-logo title-light" v-if="isLight">{{ websiteName }}</div>
<div class="title smart-logo title-dark" v-if="!isLight">{{ websiteName }}</div>
<div class="title" >{{ websiteName }}</div>
</div>
<div class="min-logo" @click="onGoHome" v-if="collapsed">
<img class="logo-img" :src="logoImg" />
</div>
<!-- 次级菜单展示 -->
<a-menu :selectedKeys="selectedKeys" :theme="theme" :openKeys="openKeys" mode="inline">
<a-menu :selectedKeys="selectedKeys" theme="light" :openKeys="openKeys" mode="inline">
<template v-for="item in topMenu.children" :key="item.menuId">
<template v-if="item.visibleFlag">
<template v-if="$lodash.isEmpty(item.children)">
@@ -123,25 +122,25 @@
defineExpose({ updateSelectKeyAndOpenKey });
const isLight = computed(() => useAppConfigStore().$state.sideMenuTheme === 'light');
const color = computed(() => {
let isLight = useAppConfigStore().$state.sideMenuTheme === 'light';
return {
background: isLight ? '#FFFFFF' : '#001529',
};
const darkModeFlag = computed(() => useAppConfigStore().$state.darkModeFlag);
const logoHeight = computed(() => {
if(useAppConfigStore().$state.compactFlag){
return '40px';
}else{
return '46px';
}
});
</script>
<style scoped lang="less">
.recursion-container {
height: 100%;
background-color: v-bind('color.background');
}
.min-logo {
height: @header-user-height;
line-height: @header-user-height;
height: v-bind(logoHeight);
line-height: v-bind(logoHeight);
padding: 0px 15px 0px 15px;
// background-color: v-bind('color.background');
width: 80px;
z-index: 21;
@@ -158,15 +157,15 @@
display: flex;
align-items: center;
justify-content: center;
height: @header-user-height;
height: v-bind(logoHeight);
font-size: 16px;
color: #515a6e;
border-bottom: 1px solid #f3f3f3;
border-right: 1px solid #f3f3f3;
}
.logo {
height: @header-user-height;
line-height: @header-user-height;
height: v-bind(logoHeight);
line-height: v-bind(logoHeight);
padding: 0px 15px 0px 15px;
width: 100%;
z-index: 100;
@@ -174,6 +173,7 @@
justify-content: space-between;
align-items: center;
cursor: pointer;
background-color: #001529;
.logo-img {
width: 30px;
@@ -186,7 +186,7 @@
overflow: hidden;
word-wrap: break-word;
white-space: nowrap;
color: v-bind('theme === "light" ? "#001529": "#ffffff"');
color: #ffffff;
}
}
</style>

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

@@ -10,7 +10,7 @@
<template>
<div class="top-menu-container">
<!-- 一级菜单展示 -->
<a-menu :selectedKeys="selectedKeys" mode="horizontal" :theme="theme">
<a-menu :selectedKeys="selectedKeys" mode="horizontal" theme="dark">
<template v-for="item in menuTree" :key="item.menuId">
<template v-if="item.visibleFlag">
<a-menu-item :key="item.menuId.toString()" @click="onSelectMenu(item)">
@@ -29,13 +29,10 @@
import { computed, ref } from 'vue';
import { MENU_TYPE_ENUM } from '/@/constants/system/menu-const';
import { router } from '/@/router';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
import { useUserStore } from '/@/store/modules/system/user';
import menuEmitter from './top-expand-menu-mitt';
const websiteName = computed(() => useAppConfigStore().websiteName);
const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
const menuTree = computed(() => useUserStore().getMenuTree || []);
const props = defineProps({
@@ -108,15 +105,15 @@
width: v-bind('menuInfo.width');
flex-shrink: 0;
}
.ant-menu-dark {
background: #1677ff;
color: #fff;
}
.ant-menu-light {
background: #1677ff;
color: #fff;
}
:deep(.ant-menu-item-selected){
//.ant-menu-dark {
// background: #1677ff;
// color: #fff;
//}
//.ant-menu-light {
// background: #1677ff;
// color: #fff;
//}
:deep(.ant-menu-item-selected) {
background: #0958d9 !important;
color: #fff !important;
}
@@ -145,7 +142,7 @@
overflow: hidden;
word-wrap: break-word;
white-space: nowrap;
color: v-bind('theme === "light" ? "#001529": "#ffffff"');
color: #ffffff;
}
}
</style>

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

@@ -48,6 +48,7 @@
import HeaderAvatar from '../header-user-space/header-avatar.vue';
import HeaderSetting from '../header-user-space/header-setting.vue';
import HeaderMessage from '../header-user-space/header-message.vue';
import { theme } from 'ant-design-vue';
// 设置
const headerSetting = ref();
@@ -96,9 +97,14 @@
function onGoHome() {
router.push({ name: HOME_PAGE_NAME });
}
const { useToken } = theme;
const { token } = useToken();
</script>
<style lang="less" scoped>
@color-border-secondary: v-bind('token.colorBorderSecondary');
.header-main {
display: flex;
flex-direction: row;
@@ -107,7 +113,7 @@
padding-left: 16px;
height: 48px;
z-index: 21;
border-bottom: 1px solid rgb(238, 238, 238);
border-bottom: 1px solid @color-border-secondary;
.logo {
min-width: 192px;

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

@@ -105,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';
import { theme as antDesignTheme } from 'ant-design-vue';
const appConfigStore = useAppConfigStore();
const windowHeight = ref(window.innerHeight);
@@ -139,7 +140,7 @@
watch(
pageTagLocation,
(newVal) => {
if (newVal == 'top') {
if (newVal === 'top') {
nextTick(() => {
sizeComputed();
});
@@ -200,8 +201,14 @@
function goHome() {
router.push({ name: HOME_PAGE_NAME });
}
const { useToken } = antDesignTheme;
const { token } = useToken();
</script>
<style scoped lang="less">
@color-bg-container: v-bind('token.colorBgContainer');
@color-border-secondary: v-bind('token.colorBorderSecondary');
:deep(.ant-layout-header) {
height: auto;
}
@@ -210,14 +217,14 @@
}
.smart-layout-header {
background: #fff;
background: @color-bg-container;
padding: 0;
z-index: 21;
}
.smart-layout-header-user {
height: @header-user-height;
border-bottom: 1px solid #f6f6f6;
border-bottom: 1px solid @color-border-secondary;
}
.smart-layout-header-left {
@@ -237,7 +244,7 @@
}
.home-button:hover {
background-color: #efefef;
background-color: @color-bg-container;
}
.location-breadcrumb {
@@ -301,7 +308,7 @@
background-color: inherit;
min-height: auto;
position: relative;
padding: 10px 10px 0px 10px;
padding: 5px 10px 0px 10px;
height: calc(100% - v-bind(dueHeight) px);
overflow-x: hidden;
}

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

@@ -62,7 +62,11 @@
:url="item.meta.frameUrl"
/>
<!--非iframe使用router-view-->
<div v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)" style="height: 100%;" class="admin-content">
<div
v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)"
style="height: 100%"
class="admin-content"
>
<router-view v-slot="{ Component }">
<keep-alive :include="keepAliveIncludes">
<component :is="Component" :key="route.name" />
@@ -94,7 +98,7 @@
</template>
<script setup>
import { computed, onMounted, ref, watch } from 'vue';
import { computed, onMounted, ref, watch, nextTick } from 'vue';
import { useAppConfigStore } from '../store/modules/system/app-config';
import HeaderUserSpace from './components/header-user-space/index.vue';
import MenuLocationBreadcrumb from './components/menu-location-breadcrumb/index.vue';
@@ -109,7 +113,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';
import { theme as antDesignTheme } from 'ant-design-vue';
const appConfigStore = useAppConfigStore();
const windowHeight = ref(window.innerHeight);
@@ -133,7 +138,7 @@
const pageTagLocation = computed(() => useAppConfigStore().$state.pageTagLocation);
// 多余高度
const dueHeight = computed(() => {
let due = 40;
let due = 45;
if (useAppConfigStore().$state.pageTagFlag) {
due = due + 40;
}
@@ -146,7 +151,7 @@
watch(
pageTagLocation,
(newVal) => {
if (newVal == 'top') {
if (newVal === 'top') {
nextTick(() => {
sizeComputed();
});
@@ -158,6 +163,7 @@
);
const rightWidth = ref(0);
function sizeComputed() {
const tagParentElement = document.querySelector('.location-breadcrumb');
const tagsElement = tagParentElement.querySelector('.ant-tabs-nav-list');
@@ -201,6 +207,7 @@
};
const router = useRouter();
function goHome() {
router.push({ name: HOME_PAGE_NAME });
}
@@ -211,9 +218,14 @@
// ----------------------- keep-alive相关 -----------------------
let { route, keepAliveIncludes, iframeNotKeepAlivePageFlag, keepAliveIframePages } = smartKeepAlive();
const { useToken } = antDesignTheme;
const { token } = useToken();
</script>
<style lang="less" scoped>
@color-border-secondary: v-bind('token.colorBorderSecondary');
@color-bg-container: v-bind('token.colorBgContainer');
:deep(.ant-layout-header) {
height: auto;
}
@@ -223,14 +235,14 @@
}
.layout-header {
background: #fff;
background: @color-bg-container;
padding: 0;
z-index: 21;
}
.layout-header-user {
height: @header-user-height;
border-bottom: 1px solid #f6f6f6;
border-bottom: 1px solid @color-border-secondary;
}
.layout-header-left {
@@ -242,6 +254,7 @@
overflow: hidden;
display: flex;
}
.collapsed-button {
margin-left: 10px;
line-height: @header-user-height;
@@ -255,7 +268,7 @@
}
.home-button:hover {
background-color: #efefef;
background-color: @color-bg-container;
}
.location-breadcrumb {
@@ -280,6 +293,7 @@
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
&.fixed-side {
position: fixed;
height: 100vh;
@@ -291,10 +305,12 @@
.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);
@@ -338,7 +354,7 @@
min-height: auto;
position: relative;
overflow-x: hidden;
padding: 10px 10px 0px 10px;
padding: 5px 10px 0px 10px;
height: calc(100% - v-bind(dueHeight) px);
}
}

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

@@ -10,7 +10,7 @@
<template>
<a-layout class="admin-layout" style="min-height: 100%">
<!-- 侧边菜单 side-menu -->
<a-layout-sider :theme="theme" class="side-menu" :collapsed="collapsed" :trigger="null">
<a-layout-sider theme="light" class="side-menu" :collapsed="collapsed" :trigger="null">
<!-- 左侧菜单 -->
<TopExpandMenu :collapsed="collapsed" />
</a-layout-sider>
@@ -62,7 +62,11 @@
:url="item.meta.frameUrl"
/>
<!--非iframe使用router-view-->
<div v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)" style="height: 100%;" class="admin-content">
<div
v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)"
style="height: 100%"
class="admin-content"
>
<router-view v-slot="{ Component }">
<keep-alive :include="keepAliveIncludes">
<component :is="Component" :key="route.name" />
@@ -71,7 +75,9 @@
</div>
</a-layout-content>
<!-- footer 版权公司信息 -->
<a-layout-footer class="smart-layout-footer" v-show="footerFlag"> <SmartFooter /></a-layout-footer>
<a-layout-footer class="smart-layout-footer" v-show="footerFlag">
<SmartFooter />
</a-layout-footer>
<!---- 回到顶部 --->
<a-back-top :target="backTopTarget" :visibilityHeight="80" />
</a-layout>
@@ -96,6 +102,7 @@
import SideHelpDoc from './components/side-help-doc/index.vue';
import { useRouter } from 'vue-router';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
import { theme as antDesignTheme } from 'ant-design-vue';
const windowHeight = ref(window.innerHeight);
@@ -125,7 +132,7 @@
watch(
pageTagLocation,
(newVal) => {
if (newVal == 'top') {
if (newVal === 'top') {
nextTick(() => {
sizeComputed();
});
@@ -136,6 +143,7 @@
}
);
const rightWidth = ref(0);
function sizeComputed() {
const tagParentElement = document.querySelector('.location-breadcrumb');
const tagsElement = tagParentElement.querySelector('.ant-tabs-nav-list');
@@ -149,6 +157,7 @@
ro.observe(tagsElement);
ro.observe(parentElement);
}
//是否隐藏菜单
const collapsed = ref(false);
@@ -183,27 +192,36 @@
// ----------------------- keep-alive相关 -----------------------
let { route, keepAliveIncludes, iframeNotKeepAlivePageFlag, keepAliveIframePages } = smartKeepAlive();
const router = useRouter();
function goHome() {
router.push({ name: HOME_PAGE_NAME });
}
const { useToken } = antDesignTheme;
const { token } = useToken();
console.log(33,token.value)
</script>
<style scoped lang="less">
@color-border-secondary: v-bind('token.colorBorderSecondary');
@color-bg-container: v-bind('token.colorBgContainer');
:deep(.ant-layout-header) {
height: auto;
}
:deep(.layout-header) {
height: auto;
}
.smart-layout-header {
background: #fff;
background: @color-bg-container;
padding: 0;
z-index: 21;
}
.smart-layout-header-user {
height: @header-user-height;
border-bottom: 1px solid #f6f6f6;
border-bottom: 1px solid @color-border-secondary;
}
.smart-layout-header-left {
@@ -223,7 +241,7 @@
}
.home-button:hover {
background-color: #efefef;
background-color: @color-bg-container;
}
.location-breadcrumb {
@@ -252,13 +270,16 @@
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);
@@ -270,6 +291,7 @@
height: 100vh;
max-width: 100px;
width: auto !important;
&.fixed-side {
position: fixed;
height: 100vh;
@@ -300,7 +322,7 @@
background-color: inherit;
min-height: auto;
position: relative;
padding: 10px 10px 0px 10px;
padding: 5px 10px 0px 10px;
height: calc(100% - v-bind(dueHeight) px);
overflow-x: hidden;
}

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

@@ -9,9 +9,11 @@
<a-layout-content :id="LAYOUT_ELEMENT_IDS.content" class="admin-layout-content">
<!---标签页-->
<div class="page-tag-div" v-show="(pageTagFlag && !fullScreenFlag) || breadCrumbFlag" :id="LAYOUT_ELEMENT_IDS.header">
<MenuLocationBreadcrumb v-if="pageTagLocation !== 'top'" />
<PageTag />
</div>
<div class="bread-crumb-div" v-if="breadCrumbFlag">
<MenuLocationBreadcrumb />
</div>
<!--不keepAlive的iframe使用单个iframe组件-->
<IframeIndex v-if="iframeNotKeepAlivePageFlag" :key="route.name" :name="route.name" :url="route.meta.frameUrl" />
@@ -26,7 +28,11 @@
/>
<!--非iframe使用router-view-->
<div v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name !== e.name)" :style="{height: contentBoxHeight+'px'}" class="admin-content">
<div
v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name !== e.name)"
:style="{ height: contentBoxHeight + 'px' }"
class="admin-content"
>
<router-view v-slot="{ Component }">
<keep-alive :include="keepAliveIncludes">
<component :is="Component" :key="route.name" />
@@ -58,6 +64,7 @@
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';
import { theme as antDesignTheme } from 'ant-design-vue';
const windowHeight = ref(window.innerHeight);
//主题颜色
@@ -78,42 +85,48 @@
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);
let contentBoxHeight=ref()
// 多余高度
const dueHeight = computed(() => {
if (fullScreenFlag.value) {
return '0';
let contentBoxHeight = ref();
// 页面内容区域的高度
const contentTop = computed(() => {
let due = 45;
let existComponentCount = 0;
if (useAppConfigStore().$state.pageTagFlag) {
existComponentCount++;
}
let due = '45px';
if (useAppConfigStore().$state.pageTagFlag || useAppConfigStore().$state.breadCrumbFlag) {
due = '85px';
if (useAppConfigStore().$state.breadCrumbFlag) {
existComponentCount++;
due = 40;
}
if (
useAppConfigStore().$state.pageTagFlag &&
useAppConfigStore().$state.pageTagLocation === 'center' &&
useAppConfigStore().$state.breadCrumbFlag
) {
due = '125px';
}
return due;
return due + existComponentCount * 40 + 'px';
});
watch(() => dueHeight.value, () => {
let dom=document.querySelector('.admin-layout-content')
contentBoxHeight.value=dom.offsetHeight - 20 - dueHeight.value.split('px')[0]
// 面包屑高度
const breadCrumbTop = computed(() => {
if (useAppConfigStore().$state.pageTagFlag) {
return '88px';
} else {
return '45px';
}
});
watch(
() => contentTop.value,
() => {
let dom = document.querySelector('.admin-layout-content');
contentBoxHeight.value = dom.offsetHeight - 20 - contentTop.value.split('px')[0];
}
);
onMounted(() => {
let dom=document.querySelector('.admin-layout-content')
contentBoxHeight.value=dom.offsetHeight - 20 - dueHeight.value.split('px')[0]
let dom = document.querySelector('.admin-layout-content');
contentBoxHeight.value = dom.offsetHeight - 20 - contentTop.value.split('px')[0];
});
//页面初始化的时候加载水印
onMounted(() => {
if (watermarkFlag.value) {
@@ -140,6 +153,7 @@
};
const router = useRouter();
function goHome() {
router.push({ name: HOME_PAGE_NAME });
}
@@ -150,9 +164,14 @@
// ----------------------- keep-alive相关 -----------------------
let { route, keepAliveIncludes, iframeNotKeepAlivePageFlag, keepAliveIframePages } = smartKeepAlive();
const { useToken } = antDesignTheme;
const { token } = useToken();
</script>
<style lang="less" scoped>
@color-border-secondary: v-bind('token.colorBorderSecondary');
@color-bg-container: v-bind('token.colorBgContainer');
.admin-layout {
min-height: 100%;
@@ -174,11 +193,12 @@
overflow-x: hidden;
padding: 10px 0;
width: v-bind(pageWidth);
margin-top: v-bind(dueHeight);
margin-top: v-bind(contentTop);
margin-left: auto;
margin-right: auto;
.page-tag-div {
background: @color-bg-container;
position: fixed;
top: 48px;
width: v-bind(pageWidth);
@@ -186,6 +206,15 @@
line-height: 40px;
z-index: 3;
}
.bread-crumb-div {
position: fixed;
top: v-bind(breadCrumbTop);
width: v-bind(pageWidth);
height: 40px;
line-height: 40px;
z-index: 3;
}
}
}