xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-11-13 06:03:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

vue3的js和ts代码上传

Browse Source
This commit is contained in:
zhuoda
2022-10-24 20:11:58 +08:00
parent 0996e90df0
commit 207b949484
562 changed files with 103071 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/header-avatar.vue Normal file
View File

@@ -0,0 +1,126 @@
<!--
* 头像
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:02:01
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-dropdown class="header-trigger">
<div class="wrapper">
<a-avatar style="margin: 0 5px" :size="24" id="smartAdminAvatar">
{{ avatarName }}
</a-avatar>
<span class="name">{{ actualName }}</span>
</div>
<template #overlay>
<a-menu :class="['avatar-menu']">
<a-menu-item @click="onRefresh">
<span>刷新权限</span>
</a-menu-item>
<a-menu-item @click="showUpdatePwdModal">
<span>修改密码</span>
</a-menu-item>
<a-menu-item @click="onLogout">
<span>退出登录</span>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<HeaderResetPassword ref="resetPasswordRef" />
</template>
<script setup>
import { computed, ref, onMounted } from 'vue';
import { loginApi } from '/@/api/system/login/login-api';
import { useUserStore } from '/@/store/modules/system/user';
import { clearAllCoolies } from '/@/utils/cookie-util';
import { localClear } from '/@/utils/local-util';
import { smartSentry } from '/@/lib/smart-sentry';
import HeaderResetPassword from './header-reset-password-modal/index.vue';
// 头像背景颜色
const AVATAR_BACKGROUND_COLOR_ARRAY = ['#87d068', '#00B853', '#f56a00', '#1890ff'];
//监听退出登录方法
async function onLogout() {
localClear();
clearAllCoolies();
useUserStore().logout();
try {
await loginApi.logout();
} catch (e) {
smartSentry.captureError(e);
} finally {
location.reload();
}
}
// 刷新用户信息（包含用户基础信息、权限信息等等）
async function onRefresh() {
await loginApi.refresh();
location.reload();
}
// ------------------------ 修改密码 ------------------------
const resetPasswordRef = ref();
function showUpdatePwdModal() {
resetPasswordRef.value.showModal();
}
// ------------------------ 以下是 头像和姓名 相关 ------------------------
const avatarName = ref('');
const actualName = computed(() => useUserStore().actualName);
// 更新头像信息
function updateAvatar() {
if (useUserStore().actualName) {
avatarName.value = useUserStore().actualName.substr(0, 1);
const avatar = document.getElementById('smartAdminAvatar');
if (avatar) {
avatar.style.backgroundColor = AVATAR_BACKGROUND_COLOR_ARRAY[hashcode(avatarName.value) % 4];
}
}
}
/**
* 通过计算固定字符串的hash，来选择颜色，这也每次登录的颜色是相同的
*/
function hashcode(str) {
let hash = 1,
i,
chr;
if (str.length === 0) return hash;
for (i = 0; i < str.length; i++) {
chr = str.charCodeAt(i);
hash = (hash << 5) - hash + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
}
onMounted(updateAvatar);
</script>
<style lang="less" scoped>
.wrapper {
cursor: pointer;
display: flex;
align-items: center;
}
.header-trigger {
height: @header-user-height;
line-height: @header-user-height;
.avatar {
vertical-align: middle;
}
.name {
margin-left: 5px;
font-weight: 500;
}
}
</style>

116
smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/header-message.vue Normal file
View File

@@ -0,0 +1,116 @@
<!--
* 消息通知
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:17:18
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-dropdown trigger="click" v-model:visible="show">
<div @click="fetchMessage">
<a-badge count="12">
<div style="width: 26px; height: 26px">
<BellOutlined :style="{ fontSize: '18px' }" />
</div>
</a-badge>
</div>
<template #overlay>
<div>
<a-spin :spinning="loading">
<a-tabs class="dropdown-tabs" centered :tabBarStyle="{ textAlign: 'center' }" style="width: 300px">
<a-tab-pane tab="通知" key="1">
<a-list class="tab-pane" size="small">
<a-list-item>
<a-list-item-meta description="7天前">
<template #title>
<a href="#">今天洛阳天气39°c，洛阳变各阳...</a>
</template>
<template #avatar>
<a-avatar src="https://zhuoda.vip/images/blog/profile-128-128.jpg" />
</template>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-list-item-meta description="7天前">
<template #title>
<a href="#">六月的雨　就是无情的你...</a>
</template>
<template #avatar>
<a-avatar src="https://zhuoda.vip/images/blog/profile-128-128.jpg" />
</template>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-list-item-meta description="7天前">
<template #title>
<a href="#">今年河南天气炎热，河南变可南...</a>
</template>
<template #avatar>
<a-avatar src="https://zhuoda.vip/images/blog/profile-128-128.jpg" />
</template>
</a-list-item-meta>
</a-list-item>
</a-list>
</a-tab-pane>
<a-tab-pane tab="消息" key="2">
<a-list class="tab-pane" />
</a-tab-pane>
<a-tab-pane tab="待办" key="3">
<a-list class="tab-pane" />
</a-tab-pane>
</a-tabs>
</a-spin>
</div>
</template>
</a-dropdown>
</template>
<script setup>
import { ref } from 'vue';
import { BellOutlined } from '@ant-design/icons-vue';
defineExpose({ showMessage });
function showMessage() {
show.value = true;
}
const loading = ref(false);
const show = ref(false);
const fetchMessage = () => {
if (loading.value) {
loading.value = false;
return;
}
loading.value = true;
setTimeout(() => {
loading.value = false;
}, 700);
};
</script>
<style lang="less">
.header-notice {
display: inline-block;
transition: all 0.3s;
span {
vertical-align: initial;
}
.notice-badge {
color: inherit;
}
}
.dropdown-tabs {
background-color: @base-bg-color;
box-shadow: 0 2px 8px @shadow-color;
border-radius: 4px;
}
</style>

85
smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/header-reset-password-modal/index.vue Normal file
View File

@@ -0,0 +1,85 @@
<!--
* 修改密码
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:02:01
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-modal :visible="visible" title="修改密码" ok-text="确认" cancel-text="取消" @ok="updatePwd" @cancel="cancelModal">
<a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
<a-form-item label="原密码" name="oldPassword">
<a-input v-model:value.trim="form.oldPassword" type="password" placeholder="请输入原密码" />
</a-form-item>
<a-form-item label="新密码" name="newPassword" :help="tips">
<a-input v-model:value.trim="form.newPassword" type="password" placeholder="请输入新密码" />
</a-form-item>
<a-form-item label="确认密码" name="confirmPwd" :help="tips">
<a-input v-model:value.trim="form.confirmPwd" type="password" placeholder="请输入确认密码" />
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';
import { employeeApi } from '/@/api/system/employee/employee-api';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { smartSentry } from '/@/lib/smart-sentry';
const visible = ref(false);
const formRef = ref();
const tips = '字母（不限大小写）+数字组合，6-15位'; //校验规则
const reg = /(^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$)/; //校验正则
const rules = {
oldPassword: [{ required: true, message: '请输入原密码' }],
newPassword: [{ type: 'string', pattern: reg, message: '密码格式错误' }],
confirmPwd: [{ type: 'string', pattern: reg, message: '请输入确认密码' }],
};
const formDefault = {
oldPassword: '',
newPassword: '',
};
let form = reactive({
...formDefault,
});
async function updatePwd() {
formRef.value
.validate()
.then(async () => {
if (form.newPassword != form.confirmPwd) {
message.error('新密码与确认密码不一致');
return;
}
SmartLoading.show();
try {
await employeeApi.updateEmployeePassword(form);
message.success('修改成功');
visible.value = false;
} catch (error) {
smartSentry.captureError(error);
} finally {
SmartLoading.hide();
}
})
.catch((error) => {
console.log('error', error);
message.error('参数验证错误，请仔细填写表单数据!');
});
}
function showModal() {
visible.value = true;
}
function cancelModal() {
visible.value = false;
}
defineExpose({ showModal });
</script>

201
smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/header-setting.vue Normal file
View File

@@ -0,0 +1,201 @@
<!--
* 设置模块
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:18:20
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-drawer :title="$t('setting.title')" placement="right" :visible="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">
<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="菜单布局">
<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">
{{ item.desc }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item label="菜单宽度" v-if="formState.layout === LAYOUT_ENUM.SIDE.value">
<a-input-number @change="changeSideMenuWidth" v-model:value="formState.sideMenuWidth" :min="1" />
像素（px）
</a-form-item>
<a-form-item label="菜单主题">
<a-radio-group v-model:value="formState.sideMenuTheme" button-style="solid" @change="changeMenuTheme">
<a-radio-button value="dark">Dark</a-radio-button>
<a-radio-button value="light">Light</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item label="面包屑">
<a-switch @change="changeBreadCrumbFlag" v-model:checked="formState.breadCrumbFlag" checked-children="显示" un-checked-children="隐藏" />
</a-form-item>
<a-form-item label="标签页">
<a-switch @change="changePageTagFlag" v-model:checked="formState.pageTagFlag" checked-children="显示" un-checked-children="隐藏" />
</a-form-item>
<a-form-item label="页脚">
<a-switch @change="changeFooterFlag" v-model:checked="formState.footerFlag" checked-children="显示" un-checked-children="隐藏" />
</a-form-item>
<a-form-item label="帮助文档">
<a-switch @change="changeHelpDocFlag" v-model:checked="formState.helpDocFlag" checked-children="显示" un-checked-children="隐藏" />
</a-form-item>
</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>
</div>
</a-drawer>
</template>
<script setup>
import { ref, reactive, h } 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 { useAppConfigStore } from '/@/store/modules/system/app-config';
import { Modal } from 'ant-design-vue';
import { appDefaultConfig } from '/@/config/app-config';
// ----------------- modal 显示与隐藏 -----------------
const visible = ref(false);
defineExpose({
show,
});
function close() {
visible.value = false;
}
function show() {
visible.value = true;
}
// ----------------- 配置信息操作 -----------------
function copy() {
let content = JSON.stringify(formState, null, 2);
// 创建元素用于复制
const aux = document.createElement('input');
// 设置元素内容
aux.setAttribute('value', content);
// 将元素插入页面进行调用
document.body.appendChild(aux);
// 复制内容
aux.select();
// 将内容复制到剪贴板
document.execCommand('copy');
// 删除创建元素
document.body.removeChild(aux);
Modal.success({
title: '复制成功',
content: h('div', {}, [h('p', '可以直接修改 /src/config/app-config.js 文件保存此配置')]),
});
}
function reset() {
for (const k in appDefaultConfig) {
formState[k] = appDefaultConfig[k];
}
appConfigStore.reset();
}
// ----------------- 表单数据实时保存到localstorage -----------------
const appConfigStore = useAppConfigStore();
useAppConfigStore().$subscribe((mutation, state) => {
localSave(localStorageKeyConst.APP_CONFIG, JSON.stringify(state));
});
// ----------------- 表单 -----------------
let formValue = {
// i18n 语言选择
language: appConfigStore.language,
// 布局: side 或者 side-expand
layout: appConfigStore.layout,
// 侧边菜单宽度
sideMenuWidth: appConfigStore.sideMenuWidth,
// 菜单主题
sideMenuTheme: appConfigStore.sideMenuTheme,
// 标签页
pageTagFlag: appConfigStore.pageTagFlag,
// 面包屑
breadCrumbFlag: appConfigStore.breadCrumbFlag,
// 页脚
footerFlag: appConfigStore.footerFlag,
// 帮助文档
helpDocFlag: appConfigStore.helpDocFlag,
};
let formState = reactive({ ...formValue });
const { locale } = useI18n();
function changeLanguage(languageValue) {
locale.value = languageValue;
appConfigStore.$patch({
language: languageValue,
});
}
function changeLayout(e) {
appConfigStore.$patch({
layout: e.target.value,
});
}
function changeSideMenuWidth(value) {
appConfigStore.$patch({
sideMenuWidth: value,
});
}
function changeMenuTheme(e) {
appConfigStore.$patch({
sideMenuTheme: e.target.value,
});
}
function changeBreadCrumbFlag(e) {
appConfigStore.$patch({
breadCrumbFlag: e,
});
}
function changePageTagFlag(e) {
appConfigStore.$patch({
pageTagFlag: e,
});
}
function changeFooterFlag(e) {
appConfigStore.$patch({
footerFlag: e,
});
}
function changeHelpDocFlag(e) {
appConfigStore.$patch({
helpDocFlag: e,
});
}
</script>
<style lang="less" scoped>
.footer {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
border-top: 1px solid #e9e9e9;
padding: 10px 16px;
background: #fff;
text-align: left;
z-index: 1;
}
</style>

108
smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/index.vue Normal file
View File

@@ -0,0 +1,108 @@
<!--
* 头部一整行
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:18:20
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-space :size="10">
<div class="setting">
<a-input-search
@click="search"
style="margin-right: 30px; width: 250px"
placeholder="1024创新实验室、小镇程序员"
enter-button="搜索"
size="small"
/>
<!---消息通知--->
<HeaderMessage ref="headerMessage" />
<!---国际化--->
<!-- <a-button type="text" @click="showSetting" class="operate-icon">
<template #icon><switcher-outlined /></template>
i18n
</a-button> -->
<!---设置--->
<a-button type="text" @click="showSetting" class="operate-icon">
<template #icon><setting-outlined /></template>
</a-button>
</div>
<!---头像信息--->
<div class="user-space-item">
<HeaderAvatar />
</div>
<!---帮助文档--->
<div class="user-space-item" @click="showHelpDoc">
<question-circle-two-tone style="font-size: 18px; margin-right: 5px; margin-top: 5px" />
<span>帮助文档</span>
</div>
<HeaderSetting ref="headerSetting" />
</a-space>
</template>
<script setup>
import HeaderAvatar from './header-avatar.vue';
import HeaderSetting from './header-setting.vue';
import HeaderMessage from './header-message.vue';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
import { ref } from 'vue';
// 设置
const headerSetting = ref();
function showSetting() {
headerSetting.value.show();
}
//消息通知
const headerMessage = ref();
function showMessage() {
headerMessage.value.showMessage();
}
//帮助文档
function showHelpDoc() {
useAppConfigStore().showHelpDoc();
}
//搜索
function search(){
window.open("https://1024lab.net");
}
</script>
<style lang="less" scoped>
.user-space-item {
height: 100%;
color: inherit;
padding: 0 12px;
cursor: pointer;
align-self: center;
a {
color: inherit;
i {
font-size: 16px;
}
}
}
.user-space-item:hover {
color: @primary-color;
background: @hover-bg-color;
}
.setting {
height: @header-user-height;
line-height: @header-user-height;
vertical-align: middle;
display: flex;
align-items: center;
}
.operate-icon {
margin-left: 20px;
}
</style>

35
smart-admin-web/javascript-ant-design-vue3/src/layout/components/menu-location-breadcrumb/index.vue Normal file
View File

@@ -0,0 +1,35 @@
<!--
* 面包屑
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:29:12
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-breadcrumb separator=">" style="display: inline" v-if="breadCrumbFlag">
<a-breadcrumb-item v-for="(item, index) in parentMenuList" :key="index">{{ item.title }}</a-breadcrumb-item>
<a-breadcrumb-item>{{ currentRoute.meta.title }}</a-breadcrumb-item>
</a-breadcrumb>
</template>
<script setup>
import { useRoute } from 'vue-router';
import { useUserStore } from '/@/store/modules/system/user';
import { computed } from 'vue';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
// 是否显示面包屑
const breadCrumbFlag = computed(() => useAppConfigStore().$state.breadCrumbFlag);
let currentRoute = useRoute();
//根据路由监听面包屑
const parentMenuList = computed(() => {
let currentName = currentRoute.name;
if (!currentName || typeof currentName !== 'string') {
return [];
}
let menuParentIdListMap = useUserStore().getMenuParentIdListMap;
return menuParentIdListMap.get(currentName) || [];
});
</script>

214
smart-admin-web/javascript-ant-design-vue3/src/layout/components/page-tag/index.vue Normal file
View File

@@ -0,0 +1,214 @@
<!--
* 标签页
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:29:12
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<!-- 标签页，共两部分：1、标签 ；2、标签操作区 -->
<a-row style="border-bottom: 1px solid #eeeeee; position: relative" v-show="pageTagFlag">
<a-dropdown :trigger="['contextmenu']">
<div class="smart-page-tag">
<a-tabs :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>
{{ item.menuTitle }}
<close-outlined @click.stop="closeTag(item, false)" v-if="item.menuName !== HOME_PAGE_NAME" class="smart-page-tag-close" />
</span>
</template>
</a-tab-pane>
</a-tabs>
</div>
<template #overlay>
<a-menu>
<a-menu-item @click="closeByMenu(false)">关闭其他</a-menu-item>
<a-menu-item @click="closeByMenu(true)">关闭所有</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<a-dropdown>
<!--标签页操作区-->
<div class="smart-page-tag-operate">
<div class="smart-page-tag-operate-icon">
<AppstoreOutlined />
</div>
</div>
<template #overlay>
<a-menu>
<a-menu-item @click="closeByMenu(false)">关闭其他</a-menu-item>
<a-menu-item @click="closeByMenu(true)">关闭所有</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-row>
</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';
//标签页 是否显示
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);
watch(
() => route.name,
(newValue, oldValue) => {
selectedKey.value = newValue;
},
{ immediate: true }
);
//选择某个标签页
function selectTab(name) {
// 寻找tag
let tag = tagNav.value.find((e) => e.menuName == name);
if (!tag) {
router.push({ name: HOME_PAGE_NAME });
return;
}
router.push({ name, query: tag.menuQuery, params: { keepAlive: 1 } });
}
//通过菜单关闭
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 && 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: goQuery, params: { keepAlive: 1 } });
} else if (!item && closeAll) {
// 关闭所有tag
router.push({ name: HOME_PAGE_NAME });
}
// 关闭其他tag不做处理 直接调用closeTagNav
useUserStore().closeTagNav(item ? item.menuName : null, closeAll);
}
</script>
<style scoped lang="less">
@smart-page-tag-operate-width: 40px;
.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;
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: @primary-color;
}
.smart-page-tag {
position: relative;
box-sizing: border-box;
display: flex;
align-content: center;
align-items: center;
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-tabs {
width: calc(100% - 100px);
height: 26px;
background-color: red;
margin: 2px;
}
.smart-page-tag-close {
margin-left: 5px;
font-size: 10px;
color: #8c8c8c;
}
/** 覆盖 ant design vue的 tabs 样式，变小一点 **/
:deep(.ant-tabs-nav) {
margin: 0;
padding: 0 0 2px 0;
}
:deep(.ant-tabs-nav::before) {
border-bottom: 1px solid #ffffff;
}
:deep(.ant-tabs-small > .ant-tabs-nav .ant-tabs-tab) {
padding: 5px 8px 3px 10px;
}
:deep(.ant-tabs-tab-active) {
background-color: #e8f4ff;
.smart-page-tag-close {
color: @primary-color;
}
}
:deep(.ant-tabs-nav .ant-tabs-tab:hover) {
background-color: #e8f4ff;
.smart-page-tag-close {
color: @primary-color;
}
}
}
</style>

51
smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-expand-menu/index.vue Normal file
View File

@@ -0,0 +1,51 @@
<!--
* 展开菜单
*
* @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="menu-container">
<!-- logo 第一列：一级导航 -->
<TopMenu ref="topMenu" class="topMenu" :menuTree="menuTree" />
<!-- 第二列：导航 -->
<RecursionMenu v-if="showRecursionMenu" class="recursion-menu" :selectedMenu="selectedMenu" />
</div>
</template>
<script setup>
import { computed, ref } from 'vue';
import RecursionMenu from './recursion-menu.vue';
import TopMenu from './top-menu.vue';
import { useUserStore } from '/@/store/modules/system/user';
defineEmits(['update:value']);
const menuTree = computed(() => useUserStore().getMenuTree || []);
const topMenu = ref();
const selectedMenu = computed(() => {
if (topMenu.value) {
return topMenu.value.selectedMenu;
}
return {};
});
const showRecursionMenu = computed(() => {
return selectedMenu.value && selectedMenu.value.children && selectedMenu.value.children.some((e) => e.visibleFlag);
});
</script>
<style scoped lang="less">
.menu-container {
display: flex;
height: 100%;
.topMenu {
width: 114px;
flex-shrink: 0;
}
.recursion-menu {
min-width: 126px;
flex: 1;
}
}
</style>

101
smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-expand-menu/recursion-menu.vue Normal file
View File

@@ -0,0 +1,101 @@
<!--
* 递归菜单
*
* @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="resursion-container">
<!-- 顶部顶级菜单名称 -->
<div class="top-menu">
<span class="ant-menu">{{ props.selectedMenu?.menuName }}</span>
</div>
<!-- 次级菜单展示 -->
<a-menu :selectedKeys="selectedKeys" :openKeys="openKeys" mode="inline">
<template v-for="item in props.selectedMenu?.children" :key="item.menuId">
<template v-if="item.visibleFlag">
<template v-if="$lodash.isEmpty(item.children)">
<a-menu-item :key="item.menuId.toString()" @click="turnToPage(item)">
<template #icon v-if="item.icon">
<component :is="$antIcons[item.icon]" />
</template>
{{ item.menuName }}
</a-menu-item>
</template>
<template v-else>
<SubMenu :menu-info="item" :key="item.menuId" @turnToPage="turnToPage" />
</template>
</template>
</template>
</a-menu>
</div>
</template>
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { router } from '/@/router';
import SubMenu from './sub-menu.vue';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
import { useUserStore } from '/@/store/modules/system/user';
import _ from 'lodash';
let props = defineProps({
selectedMenu: Object,
});
defineEmits('update:value');
//展开的菜单
let currentRoute = useRoute();
const selectedKeys = computed(() => {
return [currentRoute.name];
});
const parentMenuList = computed(() => {
let currentName = currentRoute.name;
if (!currentName || typeof currentName !== 'string') {
return [];
}
let menuParentIdListMap = useUserStore().getMenuParentIdListMap;
return menuParentIdListMap?.get(currentName) || [];
});
const openKeys = computed(() => {
// // 仅展开当前页面
// return parentMenuList.value.map((e) => e.name);
// 展开所有
let children = props.selectedMenu?.children;
if (!children || _.isEmpty(children)) {
return [];
}
return children.map((e) => e.menuId.toString());
});
// 页面跳转
function turnToPage(route) {
router.push({ name: route.menuId.toString() });
}
function goHome() {
router.push({ name: HOME_PAGE_NAME });
}
</script>
<style scoped lang="less">
.resursion-container {
height: 100%;
background: #ffffff;
}
.top-menu {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
height: @header-user-height;
font-size: 16px;
color: #515a6e;
border-bottom: 1px solid #f3f3f3;
border-right: 1px solid #f3f3f3;
}
</style>

46
smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-expand-menu/sub-menu.vue Normal file
View File

@@ -0,0 +1,46 @@
<!--
* 第二列菜单区域
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:29:12
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-sub-menu :key="props.menuInfo?.menuId.toString()">
<template #icon>
<component :is="$antIcons[props.menuInfo?.icon]" />
</template>
<template #title>{{ props.menuInfo?.menuName }}</template>
<template v-for="item in props.menuInfo?.children" :key="item.menuId">
<template v-if="item.visibleFlag">
<template v-if="!item.children">
<a-menu-item :key="item.menuId.toString()" @click="turnToPage(item)">
<template #icon>
<component :is="$antIcons[item.icon]" />
</template>
{{ item.menuName }}
</a-menu-item>
</template>
<template v-else>
<SubMenu :menu-info="item" :key="item.menuId" @turnToPage="turnToPage" />
</template>
</template>
</template>
</a-sub-menu>
</template>
<script setup>
let props = defineProps({
menuInfo: Array,
});
const emits = defineEmits(['turnToPage']);
const turnToPage = (route) => {
emits('turnToPage', route);
};
</script>
<style scoped lang="less">
::v-deep(.ant-menu-item-selected) {
border-right: 3px !important;
}
</style>

125
smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-expand-menu/top-menu.vue Normal file
View File

@@ -0,0 +1,125 @@
<!--
* 第一列菜单
*
* @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="top-menu-container">
<!-- 顶部logo区域 -->
<div class="logo" @click="onGoHome">
<img class="logo-img" :src="logoImg" />
<div class="title">SmartAdmin 2.X</div>
</div>
<!-- 一级菜单展示 -->
<a-menu :selectedKeys="selectedKeys" mode="inline" :theme="theme">
<template v-for="item in props.menuTree" :key="item.menuId">
<template v-if="item.visibleFlag">
<a-menu-item :key="item.menuId.toString()" @click="onSelectMenu(item)">
<template #icon>
<component :is="$antIcons[item.icon]" />
</template>
{{ item.menuName }}
</a-menu-item>
</template>
</template>
</a-menu>
</div>
</template>
<script setup>
import _ from 'lodash';
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import logoImg from '/@/assets/images/logo/smart-admin-logo.png';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
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';
const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
const props = defineProps({
menuTree: Array,
});
const selectedMenu = ref();
let currentRoute = useRoute();
const parentMenuList = computed(() => {
let currentName = currentRoute.name;
if (!currentName || typeof currentName !== 'string') {
return [];
}
let menuParentIdListMap = useUserStore().getMenuParentIdListMap;
return menuParentIdListMap.get(currentName) || [];
});
const selectedKeys = computed(() => {
if (selectedMenu.value) {
return [selectedMenu.value.menuId.toString()];
}
return parentMenuList.value.map((e) => e.name);
});
//监听路由的变化，进行更新菜单展开项目
watch(
currentRoute,
() => {
selectedMenu.value = undefined;
let menuList = props.menuTree.map((e) => e.menuId.toString());
let parentIdList = _.intersection(menuList, selectedKeys.value);
if (parentIdList.length > 0) {
let parentId = parentIdList[0];
let parentItem = props.menuTree.find((e) => e.menuId == Number(parentId));
selectedMenu.value = parentItem;
}
},
{
immediate: true,
}
);
// 选中菜单，页面跳转
function onSelectMenu(route) {
selectedMenu.value = route;
if (route.menuType == MENU_TYPE_ENUM.MENU.value && (_.isEmpty(route.children) || route.children.every((e) => !e.visibleFlag))) {
router.push({ name: route.menuId.toString() });
}
}
//点击logo回到首页
function onGoHome() {
router.push({ name: HOME_PAGE_NAME });
}
defineExpose({
selectedMenu,
});
</script>
<style scoped lang="less">
.top-menu-container {
height: 100%;
}
.logo {
height: @header-user-height;
line-height: @header-user-height;
padding: 0px 15px 0px 15px;
width: 100%;
z-index: 9999;
display: flex;
justify-content: space-between;
cursor: pointer;
.logo-img {
width: 40px;
height: 40px;
}
.title {
font-size: 16px;
font-weight: 600;
overflow: hidden;
color: v-bind('theme === "light" ? "#001529": "#ffffff"');
}
}
</style>

102
smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-help-doc/components/contact-modal.vue Normal file
View File

@@ -0,0 +1,102 @@
<!--
* 客服人员弹窗
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:40:16
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-modal :visible="visible" width="600px" title="联系客服人员" :closable="false" :maskClosable="true">
<a-row><div style="margin-left: 180px">客服(卓大)电话：18637925892 ;</div> </a-row>
<br />
<div class="app-qr-box">
<div class="app-qr">
<img :src="zhuoda" />
<span class="qr-desc strong"> 卓大的微信号！ </span>
<span class="qr-desc"> 骚扰卓大 :) </span>
</div>
<div class="app-qr">
<img :src="xiaozhen" />
<span class="qr-desc strong"> 关注：小镇程序员 </span>
<span class="qr-desc"> 程序员的工作生活 </span>
</div>
<div class="app-qr">
<img :src="lab1024" />
<span class="qr-desc strong"> 1024创新实验室 </span>
<span class="qr-desc"> 官方账号 </span>
</div>
</div>
<template #footer>
<a-button type="primary" @click="hide">知道了</a-button>
</template>
</a-modal>
</template>
<script setup>
import { ref, reactive, nextTick, computed } from 'vue';
import zhuoda from '/@/assets/images/1024lab/zhuoda-wechat.jpg';
import lab1024 from '/@/assets/images/1024lab/1024lab-gzh.jpg';
import xiaozhen from '/@/assets/images/1024lab/xiaozhen-gzh.jpg';
defineExpose({
show,
});
const visible = ref(false);
function show() {
visible.value = true;
}
function hide() {
visible.value = false;
}
</script>
<style lang="less" scoped>
.app-qr-box {
display: flex;
height: 170px;
align-items: center;
justify-content: space-around;
.app-qr {
display: flex;
align-items: center;
width: 33%;
justify-content: center;
flex-direction: column;
> img {
width: 100%;
max-width: 150px;
height: 100%;
max-height: 150px;
}
.strong {
font-weight: 600;
}
.qr-desc {
display: flex;
align-items: center;
font-size: 12px;
text-align: center;
overflow-x: hidden;
> img {
width: 15px;
height: 18px;
margin-right: 9px;
}
}
}
}
.ant-carousel :deep(.slick-slide) {
text-align: center;
height: 120px;
line-height: 120px;
width: 120px;
background: #364d79;
overflow: hidden;
}
.ant-carousel :deep(.slick-slide h3) {
color: #fff;
}
</style>

85
smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-help-doc/components/feedback-modal.vue Normal file
View File

@@ -0,0 +1,85 @@
<!--
* 意见反馈提交弹窗
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:40:16
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-modal :visible="visible" title="意见反馈" :closable="false" :maskClosable="true" >
<a-form :labelCol="{ span: 6 }">
<a-form-item label="我要吐槽/建议：">
<a-textarea v-model:value="form.feedbackContent" placeholder="请输入让您不满意的点，我们争取做到更好～" :rows="3"/>
</a-form-item>
<a-form-item label="反馈图片：">
<Upload
accept=".jpg,.jpeg,.png,.gif"
:maxUploadSize="3"
buttonText="点击上传反馈图片"
:default-file-list="form.feedbackAttachment || []"
listType="picture-card"
@change="changeAttachment"
:folder="FILE_FOLDER_TYPE_ENUM.FEEDBACK.value"
/>
</a-form-item>
</a-form>
<template #footer>
<a-button @click="hide">取消</a-button>
<a-button type="primary" @click="submit">提交</a-button>
</template>
</a-modal>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { feedbackApi } from '/@/api/support/feedback/feedback-api';
import { message } from 'ant-design-vue';
import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const';
import Upload from '/@/components/support/file-upload/index.vue';
import { smartSentry } from '/@/lib/smart-sentry';
defineExpose({
show,
});
const visible = ref(false);
function show () {
Object.assign(form, formDefault);
console.log(form)
visible.value = true;
}
function hide () {
visible.value = false;
}
const formDefault = {
feedbackContent:'',
feedbackAttachment: ''
}
const form = reactive({ ...formDefault });
async function submit () {
try {
SmartLoading.show();
if(!form.feedbackContent){
message.warn('请填写具体内容');
return;
}
await feedbackApi.addFeedback(form);
message.success('提交成功');
hide();
} catch (e) {
smartSentry.captureError(e);
} finally {
SmartLoading.hide();
}
}
function changeAttachment (fileList) {
form.feedbackAttachment = fileList;
}
</script>

227
smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-help-doc/index.vue Normal file
View File

@@ -0,0 +1,227 @@
<!--
* 帮助文档
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:40:16
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<div class="help-doc-wrapper">
<!-----头部---->
<div class="help-doc-header">
<strong>帮助文档</strong>
<strong class="help-doc-close" @click="hideHelpDoc"><close-outlined /></strong>
</div>
<!-----联系客服区域---->
<div class="help-doc-contact" @click="contactModal.show">
<div class="help-doc-contact-left">
<phone-outlined style="font-size: 23px; line-height: 50px; margin-top: 5px" />
</div>
<div class="help-doc-contact-right">
<a>联系客服</a>
<div class="help-doc-contac-time">9:00-17:00 5x7小时</div>
</div>
</div>
<a-divider />
<!-----意见反馈---->
<div class="feedback">
<div>反馈让您不满意的点，我们争取做到更好<smile-outlined style="margin-left: 5px" /></div>
<div class="feedback-message-list">
<div v-for="item in feedbackMessageList" :key="item.feedbackId" class="feedback-message">{{ item.feedbackContent }}</div>
</div>
<a @click="feedbackModal.show">我也要反馈</a>
</div>
<a-divider />
<!-----文档列表---->
<div class="help-doc-list">
<div class="help-doc-item-all">
<router-link tag="a" target="_blank" :to="{ path: '/help-doc/detail' }">查看全部文档 >></router-link>
</div>
<div class="help-doc-item" v-for="item in helpDocList" :key="item.helpDocId">
<router-link tag="a" target="_blank" :to="{ path: '/help-doc/detail', query: { helpDocId: item.helpDocId } }">{{ item.title }}</router-link>
</div>
</div>
<!-----联系客服---->
<ContactModal ref="contactModal" />
<!----- 提交意见反馈 ---->
<FeedbackModal ref="feedbackModal" />
</div>
</template>
<script setup>
import { onMounted, ref, watch, reactive } from 'vue';
import { useRoute } from 'vue-router';
import _ from 'lodash';
import { helpDocApi } from '/@/api/support/help-doc/help-doc-api';
import ContactModal from './components/contact-modal.vue';
import FeedbackModal from './components/feedback-modal.vue';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
import { feedbackApi } from '/@/api/support/feedback/feedback-api';
import { smartSentry } from '/@/lib/smart-sentry';
function hideHelpDoc() {
useAppConfigStore().hideHelpDoc();
}
// ------------------ 联系客服 --------------------------
const contactModal = ref();
// ------------------ 意见反馈 --------------------------
let feedbackMessageList = ref([]);
onMounted(() => {
// 默认先查询一次
queryFeedbackList();
scroll();
});
let scrollInterval = null;
let swiper = 1;
function scroll() {
if (scrollInterval != null) {
return;
}
scrollInterval = setInterval(() => {
if (currentPage >= pages) {
currentPage = 1;
}
if (pages == 0 || feedbackList.length == 0) {
return;
}
let initValue = (currentPage - 1) * 2;
feedbackMessageList.value[0] = feedbackList[initValue];
if (feedbackList[initValue + 1]) {
feedbackMessageList.value[1] = feedbackList[initValue + 1];
}
swiper = currentPage - 1;
currentPage++;
}, 2000);
}
// 总页数
let pages = 1;
let currentPage = 1;
let feedbackList = [];
// 查询意见反馈列表
async function queryFeedbackList() {
try {
let param = {
pageNum: 1,
pageSize: 20,
};
let result = await feedbackApi.queryFeedback(param);
feedbackList = result.data.list;
pages = Math.ceil(result.data.total / 2);
} catch (e) {
smartSentry.captureError(e);
}
}
const feedbackModal = ref();
// ----------------- 帮助文档列表 -------------------
let currentRoute = useRoute();
let helpDocList = ref([]);
// 获取关联的文档集合
async function queryHelpDocList(menuId) {
let res = await helpDocApi.queryHelpDocByRelationId(menuId);
helpDocList.value = res.data;
}
watch(
currentRoute,
() => {
//SmartAdmin中 router的name 就是 后端存储menu的id
let menuId = -1;
try {
menuId = _.toNumber(currentRoute.name);
} catch (e) {
smartSentry.captureError(e);
}
if (menuId > 0) {
queryHelpDocList(menuId);
}
},
{
immediate: true,
}
);
</script>
<style scoped lang="less">
.help-doc-wrapper {
border-left:1px solid #ededed;
height: 100vh;
padding: 0 10px;
.help-doc-header {
line-height: @header-user-height;
display: flex;
justify-content: space-between;
height: @header-user-height;
border-bottom: 1px solid #f6f6f6;
.help-doc-close {
cursor: pointer;
}
}
.help-doc-contact {
height: 50px;
display: flex;
cursor: pointer;
margin-top: 5px;
justify-content: space-between;
.help-doc-contact-left {
width: 30px;
}
.help-doc-contact-right {
margin-top: 10px;
width: calc(100% - 40px);
.help-doc-contac-time {
color: #888;
font-size: 12px;
}
}
}
.feedback {
.feedback-message-list {
margin: 6px 0px;
height: 40px;
position: relative;
overflow: hidden;
.feedback-message {
margin: 2px 2px;
color: #888;
font-size: 12px;
}
}
}
.help-doc-list {
.help-doc-item-all {
margin-top: 10px;
color: @primary-color;
}
.help-doc-item {
margin-top: 20px;
a {
color: #444;
}
a:hover {
color: @primary-color;
text-decoration: underline;
}
}
}
}
</style>

118
smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/index.vue Normal file
View File

@@ -0,0 +1,118 @@
<!--
* 传统菜单
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:29:12
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<!--左侧菜单分为两部分：1、顶部logo区域，包含 logo和名称;2、下方菜单区域-->
<!-- 1、顶部logo区域 -->
<div class="logo" @click="onGoHome" :style="sideMenuWidth" v-if="!collapsed">
<img class="logo-img" :src="logoImg" />
<div class="title title-light" v-if="sideMenuTheme === 'light'">{{websiteName}}</div>
<div class="title title-dark" v-if="sideMenuTheme === 'dark'">{{websiteName}}</div>
</div>
<div class="min-logo" @click="onGoHome" v-if="collapsed">
<img class="logo-img" :src="logoImg" />
</div>
<!-- 2、下方菜单区域： 这里使用一个递归菜单解决 -->
<RecursionMenu :collapsed="collapsed" ref="menu" />
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import RecursionMenu from './recursion-menu.vue';
import logoImg from '/@/assets/images/logo/smart-admin-logo.png';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
const websiteName = computed(() => useAppConfigStore().websiteName);
const sideMenuWidth = computed(() => 'width:' + useAppConfigStore().sideMenuWidth + 'px');
const sideMenuTheme = computed(() => useAppConfigStore().sideMenuTheme);
const props = defineProps({
collapsed: {
type: Boolean,
required: false,
default: false,
},
});
const menu = ref();
watch(
() => props.collapsed,
(newValue, oldValue) => {
// 如果是展开菜单的话，重新获取更新菜单的展开项: openkeys和selectKeys
if (!newValue) {
menu.value.updateOpenKeysAndSelectKeys();
}
}
);
const router = useRouter();
function onGoHome() {
router.push({ name: HOME_PAGE_NAME });
}
</script>
<style lang="less" scoped>
.shadow {
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}
.side-menu {
min-height: 100vh;
overflow-y: auto;
z-index: 10;
.min-logo {
height: @header-user-height;
line-height: @header-user-height;
padding: 0px 15px 0px 15px;
width: 100%;
z-index: 9999;
display: flex;
justify-content: center;
.logo-img {
width: 32px;
height: 32px;
}
}
.logo {
height: @header-user-height;
line-height: @header-user-height;
padding: 0px 15px 0px 15px;
z-index: 9999;
display: flex;
cursor: pointer;
justify-content:space-around;
.logo-img {
width: 40px;
height: 40px;
}
.title {
font-size: 16px;
font-weight: 600;
margin-left:8px;
}
.title-light {
color:#001529;
}
.title-dark {
color:#ffffff;
}
}
}
.menu {
padding: 16px 0;
}
</style>

104
smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/recursion-menu.vue Normal file
View File

@@ -0,0 +1,104 @@
<!--
* 传统菜单-递归菜单
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:29:12
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @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="inlineCollapsed"
>
<template v-for="item in menuTree" :key="item.menuId">
<template v-if="item.visibleFlag && !item.disabledFlag">
<template v-if="$lodash.isEmpty(item.children)">
<a-menu-item :key="item.menuId" @click="turnToPage(item)">
<template #icon>
<component :is="$antIcons[item.icon]" />
</template>
{{ item.menuName }}
</a-menu-item>
</template>
<template v-else>
<SubMenu :menu-info="item" :key="item.menuId" @turnToPage="turnToPage" />
</template>
</template>
</template>
</a-menu>
</template>
<script setup>
import _ from 'lodash';
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import SubMenu from './sub-menu.vue';
import { router } from '/@/router/index';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
import { useUserStore } from '/@/store/modules/system/user';
const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
const props = defineProps({
inlineCollapsed: {
type: Boolean,
default: false,
},
});
const menuTree = computed(() => useUserStore().getMenuTree || []);
//展开的菜单
let currentRoute = useRoute();
const selectedKeys = ref([]);
const openKeys = ref([]);
// 页面跳转
function turnToPage(route) {
router.push({ name: route.menuId.toString() });
}
/**
* SmartAdmin中 router的name 就是 后端存储menu的id
* 所以此处可以直接监听路由，根据路由更新菜单的选中和展开
*/
function updateOpenKeysAndSelectKeys() {
// 更新选中
selectedKeys.value = [_.toNumber(currentRoute.name)];
/**
* 更新展开（1、获取新展开的menu key集合；2、保留原有的openkeys，然后把新展开的与之合并）
*/
//获取需要展开的menu key集合
let menuParentIdListMap = useUserStore().getMenuParentIdListMap;
let parentList = menuParentIdListMap.get(currentRoute.name) || [];
let needOpenKeys = _.map(parentList, 'name').map(Number);
// 使用lodash的union函数，进行 去重合并两个数组
openKeys.value = _.union(openKeys.value, needOpenKeys);
}
watch(
currentRoute,
() => {
updateOpenKeysAndSelectKeys();
},
{
immediate: true,
}
);
defineExpose({
updateOpenKeysAndSelectKeys,
});
</script>
<style lang="less" scoped>
.smart-menu {
position: relative;
}
</style>

45
smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/sub-menu.vue Normal file
View File

@@ -0,0 +1,45 @@
<!--
* 传统菜单-递归菜单
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:29:12
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-sub-menu :key="menuInfo.menuId">
<template #icon>
<component :is="$antIcons[menuInfo.icon]" />
</template>
<template #title>{{ menuInfo.menuName }}</template>
<template v-for="item in menuInfo.children" :key="item.menuId">
<template v-if="item.visibleFlag && !item.disabledFlag">
<template v-if="!item.children">
<a-menu-item :key="item.menuId" @click="turnToPage(item)">
<template #icon>
<component :is="$antIcons[item.icon]" />
</template>
{{ item.menuName }}
</a-menu-item>
</template>
<template v-else>
<SubMenu :menu-info="item" :key="item.menuId" @turnToPage="turnToPage" />
</template>
</template>
</template>
</a-sub-menu>
</template>
<script setup>
const props = defineProps({
menuInfo: {
type: Object,
default: () => ({}),
},
});
const emits = defineEmits(['turnToPage']);
const turnToPage = (route) => {
emits('turnToPage', route);
};
</script>

34
smart-admin-web/javascript-ant-design-vue3/src/layout/components/smart-footer/index.vue Normal file
View File

@@ -0,0 +1,34 @@
<!--
* 底部：版权、公司等信息
*
* @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="version" >
<a target="_blank" href="https://www.1024lab.net">
SmartAdmin V2.x @copyright 【1024创新实验室】 Since 2012-{{ currentYear }}
</a>
</div>
</template>
<script setup>
import dayjs from 'dayjs';
const currentYear = dayjs().year();
</script>
<style lang="less" scoped>
.version {
font-size: 14px;
color: rgba(0, 0, 0, 0.45);
a {
color: rgba(0, 0, 0, 0.45);
}
a:hover {
color: @primary-color;
}
}
</style>

302
smart-admin-web/javascript-ant-design-vue3/src/layout/smart-help-doc-layout.vue Normal file
View File

@@ -0,0 +1,302 @@
<!--
* 帮助文档 layout
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:40:16
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<!--
中间内容，一共三部分：
1、顶部
2、中间内容区域
3、底部（一般是公司版权信息）
-->
<a-layout class="help-doc-layout" id="smartAdminMain">
<!-- 顶部头部信息 -->
<a-layout-header class="layout-header">
<a-row class="layout-header-title">
<img class="logo-img" :src="logoImg" />
<div class="title">{{ websiteName }}</div>
<div class="title">帮助文档</div>
<a-col class="avatar">
<HeaderAvatar />
</a-col>
</a-row>
</a-layout-header>
<a-layout :style="`height: ${windowHeight}px`">
<!-- 侧边目录 side-menu -->
<a-layout-sider class="side-menu" :style="`height: ${windowHeight}px`" :collapsed="false" theme="light" :width="300">
<div class="help-doc-tree">
<!-- 目录内容 -->
<div>
<a-directory-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
:tree-data="helpDocTreeData"
@select="selectHelpDoc"
/>
</div>
</div>
</a-layout-sider>
<!--中间内容-->
<a-layout-content id="smartAdminLayoutContent" class="help-doc-layout-content">
<router-view v-slot="{ Component }">
<div :key="route.fullPath">
<component :is="Component" />
</div>
</router-view>
<!-- footer 版权公司信息 -->
<a-layout-footer class="layout-footer">
<SmartFooter />
</a-layout-footer>
</a-layout-content>
</a-layout>
<a-back-top :target="backTopTarget" :visibilityHeight="80" />
</a-layout>
</template>
<script setup>
import _ from 'lodash';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { smartSentry } from '../lib/smart-sentry';
import { useAppConfigStore } from '../store/modules/system/app-config';
import SmartFooter from './components/smart-footer/index.vue';
import { helpDocApi } from '/@/api/support/help-doc/help-doc-api';
import { helpDocCatalogApi } from '/@/api/support/help-doc/help-doc-catalog-api';
import logoImg from '/@/assets/images/logo/smart-admin-logo-white.png';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
import watermark from '/@/lib/smart-wartermark';
import { useUserStore } from '/@/store/modules/system/user';
import HeaderAvatar from './components/header-user-space/header-avatar.vue';
const websiteName = computed(() => useAppConfigStore().websiteName);
const windowHeight = window.innerHeight;
onMounted(() => {
watermark.set('smartAdminLayoutContent', useUserStore().actualName);
});
const backTopTarget = () => {
return document.getElementById('smartAdminMain');
};
const router = useRouter();
const route = useRoute();
function goHome() {
router.push({ name: HOME_PAGE_NAME });
}
// ----------------------- 选中 节点 -----------------------------
const expandedKeys = ref([]);
const selectedKeys = ref([]);
function selectHelpDoc(selectedKeys) {
let key = selectedKeys[0];
if (key.indexOf(TYPE_CATALOG_PREFIX) > -1) {
return;
}
let helpDocId = key.substr(TYPE_HELP_DOC_PREFIX.length);
router.push({ path: '/help-doc/detail', query: { helpDocId } });
}
// 更新展开节点
function updateExpandedKeys(helpDocId, helpDocList, catalogList) {
expandedKeys.value = [TYPE_HELP_DOC_PREFIX + helpDocId];
selectedKeys.value = [TYPE_HELP_DOC_PREFIX + helpDocId];
let helpDoc = helpDocList.filter((e) => e.helpDocId == helpDocId);
let catalogId = null;
if (helpDoc.length > 0) {
catalogId = helpDoc[0].helpDocCatalogId;
}
if (catalogId) {
expandedKeys.value.push(TYPE_CATALOG_PREFIX + catalogId);
}
let parentId = catalogId;
while (parentId !== 0) {
let catalog = catalogList.filter((e) => e.helpDocCatalogId == parentId);
if (catalog.length > 0) {
parentId = catalog[0].parentId;
expandedKeys.value.push(TYPE_CATALOG_PREFIX + catalog[0].helpDocCatalogId);
} else {
parentId = 0;
}
}
}
// ----------------------- 帮助文档 目录 树 -----------------------------
onMounted(queryHelpDocTree);
const helpDocTreeData = ref([]);
const TYPE_CATALOG_PREFIX = 'catalog_';
const TYPE_HELP_DOC_PREFIX = 'help_doc_';
//目录默认id为0
const HELP_DOC_CATALOG_PARENT_ID = 0;
//查询帮助文档树形结构
async function queryHelpDocTree() {
SmartLoading.show();
try {
let { data: catalogList } = await helpDocCatalogApi.getAll();
let { data: helpDocList } = await helpDocApi.getAllHelpDocList();
//设置前缀
for (const item of catalogList) {
item.key = TYPE_CATALOG_PREFIX + item.helpDocCatalogId;
item.title = item.name;
}
//转为map，供递归使用
let helpDocMap = new Map();
for (const item of helpDocList) {
item.key = TYPE_HELP_DOC_PREFIX + item.helpDocId;
let list = helpDocMap.get(item.helpDocCatalogId);
if (!list) {
list = [];
helpDocMap.set(item.helpDocCatalogId, list);
}
list.push(item);
}
helpDocTreeData.value = buildHelpDocCatalogTree(catalogList, 0, helpDocMap);
if (!route.query.helpDocId && firstHelpDocId) {
selectHelpDoc([TYPE_HELP_DOC_PREFIX + firstHelpDocId]);
return;
}
//更新展开节点
updateExpandedKeys(route.query.helpDocId, helpDocList, catalogList);
} catch (e) {
smartSentry.captureError(e);
} finally {
SmartLoading.hide();
}
}
// 记录第一个树
let firstHelpDocId = null;
// 构建目录树
function buildHelpDocCatalogTree(data, parentId, helpDocMap) {
let children = data.filter((e) => e.parentId === parentId) || [];
//排序
children = _.sortBy(children, (e) => e.sort);
let helpDocList = helpDocMap.get(parentId);
if (helpDocList) {
//排序
helpDocList = _.sortBy(helpDocList, (e) => e.sort);
if (!firstHelpDocId) {
firstHelpDocId = helpDocList[0].helpDocId;
}
children.push(...helpDocList);
}
for (const e of children) {
if (e.key.indexOf(TYPE_HELP_DOC_PREFIX) > -1) {
continue;
}
e.children = buildHelpDocCatalogTree(data, e.helpDocCatalogId, helpDocMap);
}
return children;
}
</script>
<style lang="less" scoped>
:deep(.ant-layout-header) {
height: auto;
}
:deep(.layout-header) {
height: auto;
}
:deep(.ant-tree-treenode) {
margin: 2px 0px;
}
.help-doc-layout {
overflow-y: hidden;
height: 100vh;
overflow-x: hidden;
}
.layout-header {
background: @primary-7;
padding: 0;
z-index: 999;
color: white;
height: @header-user-height;
line-height: @header-user-height;
display: flex;
justify-content: flex-start;
.layout-header-title {
height: @header-user-height;
line-height: @header-user-height;
padding: 0px 15px 0px 15px;
z-index: 9999;
display: flex;
cursor: pointer;
justify-content: flex-start;
margin-bottom: 10px;
.logo-img {
width: 40px;
height: @header-user-height;
}
.title {
font-size: 18px;
font-weight: 600;
margin-left: 10px;
text-align: center;
color: '#001529';
}
.avatar {
position: fixed;
top: 0;
right: 18px;
}
}
}
.layout-container {
height: calc(100vh - @header-height);
overflow-x: hidden;
overflow-y: auto;
}
.side-menu {
height: 100vh;
overflow: scroll;
.help-doc-tree {
color: #001529;
margin-top: 10px;
font-size: 16px;
}
}
.help-doc-layout-content {
min-height: auto;
position: relative;
overflow-y: scroll;
overflow-x: hidden;
margin-left: 5px;
margin-top: 8px;
height: calc(100% - 40px);
}
.layout-footer {
padding: 0 !important;
position: fixed;
bottom: 0;
right: calc(50% - 300px);
display: flex;
height: 30px;
justify-content: center;
}
</style>

39
smart-admin-web/javascript-ant-design-vue3/src/layout/smart-keep-alive.js Normal file
View File

@@ -0,0 +1,39 @@
/*
* keep-alive
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:39:54
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*/
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '/@/store/modules/system/user';
export function smartKeepAlive() {
const route = useRoute();
const router = useRouter();
// 需要keep-alive的页面
const keepAliveIncludes = computed(() => {
return useUserStore().keepAliveIncludes || [];
});
// ----------------------- iframe相关 -----------------------
// 当前路由是否为不需要缓存的iframe页面
const iframeNotKeepAlivePageFlag = computed(() => route.meta.frameFlag && !route.meta.keepAlive);
// 打开中的tagNav
const tagNav = computed(() => useUserStore().getTagNav || []);
// 已打开的iframe列表
const keepAliveIframePages = computed(() => {
let routes = router.getRoutes();
return routes.filter((e) => e.meta.frameFlag && e.meta.keepAlive && tagNav.value.some((t) => t.menuName == e.name));
});
return {
route,
keepAliveIncludes,
iframeNotKeepAlivePageFlag,
keepAliveIframePages,
};
}

24
smart-admin-web/javascript-ant-design-vue3/src/layout/smart-layout.vue Normal file
View File

@@ -0,0 +1,24 @@
<!--
* layout 多种模式
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:40:16
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<!--左侧菜单 模式-->
<SmartSideLayout v-if="layout === LAYOUT_ENUM.SIDE.value" />
<!--左侧展开菜单 模式-->
<SmartSideExpandLayout v-if="layout === LAYOUT_ENUM.SIDE_EXPAND.value" />
</template>
<script setup>
import { computed } from 'vue';
import SmartSideExpandLayout from './smart-side-expand-layout.vue';
import { LAYOUT_ENUM } from '/@/constants/layout-const';
import SmartSideLayout from '/@/layout/smart-side-layout.vue';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
const layout = computed(() => useAppConfigStore().$state.layout);
</script>

237
smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-expand-layout.vue Normal file
View File

@@ -0,0 +1,237 @@
<!--
* 展开菜单模式
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-06 20:40:16
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-layout class="admin-layout" style="min-height: 100%">
<!-- 侧边菜单 side-menu -->
<a-layout-sider :theme="theme" class="side-menu" :collapsed="collapsed" :trigger="null">
<!-- 左侧菜单 -->
<SideExpandMenu :collapsed="collapsed" />
</a-layout-sider>
<!--中间内容，一共三部分：1、顶部;2、中间内容区域;3、底部（一般是公司版权信息）;-->
<a-layout class="admin-layout-main" :style="`height: ${windowHeight}px`" id="smartAdminMain">
<!-- 顶部头部信息 -->
<a-layout-header class="smart-layout-header">
<a-row justify="space-between" class="smart-layout-header-user">
<a-col class="smart-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" />
</span>
</a-tooltip>
<span class="location-breadcrumb">
<MenuLocationBreadcrumb />
</span>
</a-col>
<!---用戶操作区域-->
<a-col class="smart-layout-header-right">
<HeaderUserSpace />
</a-col>
</a-row>
<PageTag />
</a-layout-header>
<!--中间内容-->
<a-layout-content class="admin-layout-content" id="smartAdminLayoutContent">
<!--不keepAlive的iframe使用单个iframe组件-->
<IframeIndex v-show="iframeNotKeepAlivePageFlag" :key="route.name" :name="route.name" :url="route.meta.frameUrl" />
<!--keepAlive的iframe 每个页面一个iframe组件-->
<IframeIndex
v-for="item in keepAliveIframePages"
v-show="route.name == item.name"
:key="item.name"
:name="item.name"
:url="item.meta.frameUrl"
/>
<!--非iframe使用router-view-->
<router-view v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)" v-slot="{ Component }">
<keep-alive :include="keepAliveIncludes">
<div :key="route.name" style="height:100%">
<component :is="Component" />
</div>
</keep-alive>
</router-view>
</a-layout-content>
<!-- footer 版权公司信息 -->
<a-layout-footer class="smart-layout-footer" v-show="footerFlag"> <SmartFooter /></a-layout-footer>
<!---- 回到顶部 --->
<a-back-top :target="backTopTarget" :visibilityHeight="80" />
</a-layout>
<!-- 右侧帮助文档 help-doc -->
<a-layout-sider v-show="helpDocFlag" theme="light" :width="180" class="help-doc-sider" :trigger="null" style="min-height: 100%">
<SideHelpDoc />
</a-layout-sider>
</a-layout>
</template>
<script setup>
import { computed, onMounted, ref } 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 SideExpandMenu from './components/side-expand-menu/index.vue';
import SmartFooter from './components/smart-footer/index.vue';
import { smartKeepAlive } from './smart-keep-alive';
import IframeIndex from '/@/components/framework/iframe/iframe-index.vue';
import watermark from '/@/lib/smart-wartermark';
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 theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
//是否显示标签页
const pageTagFlag = computed(() => useAppConfigStore().$state.pageTagFlag);
// 是否显示帮助文档
const helpDocFlag = computed(() => useAppConfigStore().$state.helpDocFlag);
// 是否显示页脚
const footerFlag = computed(() => useAppConfigStore().$state.footerFlag);
//是否隐藏菜单
const collapsed = ref(false);
//页面初始化的时候加载水印
onMounted(() => {
watermark.set('smartAdminLayoutContent', useUserStore().actualName);
});
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: 999;
}
.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;
}
.home-button {
margin-left: 15px;
cursor: pointer;
padding: 0 5px;
line-height: @header-user-height;
}
.home-button:hover {
background-color: #efefef;
}
.location-breadcrumb {
margin-left: 15px;
line-height: @header-user-height;
}
}
.smart-layout-header-right {
display: flex;
height: @header-user-height;
}
.admin-layout {
.side-menu {
flex: 0 !important;
min-width: inherit !important;
max-width: none !important;
width: auto !important;
&.fixed-side {
position: fixed;
height: 100vh;
left: 0;
top: 0;
}
}
.help-doc-sider {
flex: 0 !important;
min-width: 100px;
height: 100vh;
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 {
overflow-x: hidden;
}
.admin-layout-content {
min-height: auto;
position: relative;
padding: 10px 10px 0px 10px;
height: v-bind('pageTagFlag ? "calc(100% - 80px)": "calc(100% - 40px)"');
overflow-x: hidden;
}
}
.smart-layout-footer {
position: relative;
padding: 10px 0px;
display: flex;
justify-content: center;
}
</style>

240
smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-layout.vue Normal file
View File

@@ -0,0 +1,240 @@
<template>
<a-layout class="admin-layout" style="min-height: 100%">
<!-- 侧边菜单 side-menu -->
<a-layout-sider class="side-menu" :width="sideMenuWidth" :collapsed="collapsed" :theme="theme">
<!-- 左侧菜单 -->
<SideMenu :collapsed="collapsed" />
</a-layout-sider>
<!--中间内容，一共三部分：1、顶部;2、中间内容区域;3、底部（一般是公司版权信息）;-->
<a-layout id="smartAdminMain" :style="`height: ${windowHeight}px`" class="admin-layout-main">
<!-- 顶部头部信息 -->
<a-layout-header class="layout-header">
<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" />
</span>
</a-tooltip>
<span class="location-breadcrumb">
<MenuLocationBreadcrumb />
</span>
</a-col>
<!---用戶操作区域-->
<a-col class="layout-header-right">
<HeaderUserSpace />
</a-col>
</a-row>
<PageTag />
</a-layout-header>
<!--中间内容-->
<a-layout-content id="smartAdminLayoutContent" class="admin-layout-content">
<!--不keepAlive的iframe使用单个iframe组件-->
<IframeIndex v-if="iframeNotKeepAlivePageFlag" :key="route.name" :name="route.name" :url="route.meta.frameUrl" />
<!--keepAlive的iframe 每个页面一个iframe组件-->
<IframeIndex
v-for="item in keepAliveIframePages"
v-show="route.name == item.name"
:key="item.name"
:name="item.name"
:url="item.meta.frameUrl"
/>
<!--非iframe使用router-view-->
<router-view v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)" v-slot="{ Component }">
<keep-alive :include="keepAliveIncludes">
<div :key="route.name" style="height: 100%">
<component :is="Component" />
</div>
</keep-alive>
</router-view>
</a-layout-content>
<!-- footer 版权公司信息 -->
<a-layout-footer class="layout-footer" v-show="footerFlag">
<smart-footer />
</a-layout-footer>
<!--- 回到顶部 -->
<a-back-top :target="backTopTarget" :visibilityHeight="80" />
</a-layout>
<!-- 右侧帮助文档 help-doc -->
<a-layout-sider v-show="helpDocFlag" theme="light" :width="180" class="help-doc-sider" :trigger="null" style="min-height: 100%">
<SideHelpDoc />
</a-layout-sider>
</a-layout>
</template>
<script setup>
import { computed, onMounted, ref } 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';
import PageTag from './components/page-tag/index.vue';
import SideMenu from './components/side-menu/index.vue';
import SmartFooter from './components/smart-footer/index.vue';
import { smartKeepAlive } from './smart-keep-alive';
import IframeIndex from '/@/components/framework/iframe/iframe-index.vue';
import watermark from '/@/lib/smart-wartermark';
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 sideMenuWidth = computed(() => useAppConfigStore().$state.sideMenuWidth);
//主题颜色
const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
//是否显示标签页
const pageTagFlag = computed(() => useAppConfigStore().$state.pageTagFlag);
// 是否显示帮助文档
const helpDocFlag = computed(() => useAppConfigStore().$state.helpDocFlag);
// 是否显示页脚
const footerFlag = computed(() => useAppConfigStore().$state.footerFlag);
//是否隐藏菜单
const collapsed = ref(false);
//页面初始化的时候加载水印
onMounted(() => {
watermark.set('smartAdminLayoutContent', useUserStore().actualName);
});
//回到顶部
const backTopTarget = () => {
return document.getElementById('smartAdminMain');
};
const router = useRouter();
function goHome() {
router.push({ name: HOME_PAGE_NAME });
}
window.addEventListener('resize', function () {
windowHeight.value = window.innerHeight;
});
// ----------------------- keep-alive相关 -----------------------
let { route, keepAliveIncludes, iframeNotKeepAlivePageFlag, keepAliveIframePages } = smartKeepAlive();
</script>
<style lang="less" scoped>
:deep(.ant-layout-header) {
height: auto;
}
:deep(.layout-header) {
height: auto;
}
.layout-header {
background: #fff;
padding: 0;
z-index: 999;
}
.layout-header-user {
height: @header-user-height;
border-bottom: 1px solid #f6f6f6;
}
.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 {
margin-left: 15px;
line-height: @header-user-height;
}
}
.layout-header-right {
display: flex;
height: @header-user-height;
}
.layout-container {
height: calc(100vh - @header-height);
overflow-x: hidden;
}
.admin-layout {
.side-menu {
height: 100vh;
overflow-x: hidden;
&.fixed-side {
position: fixed;
height: 100vh;
left: 0;
top: 0;
}
}
.help-doc-sider {
flex: 0 !important;
min-width: 100px;
height: 100vh;
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 {
overflow-y: hidden;
overflow-x: hidden;
}
.admin-layout-content {
min-height: auto;
position: relative;
overflow-x: hidden;
padding: 10px 10px 0px 10px;
height: v-bind('pageTagFlag ? "calc(100% - 80px)": "calc(100% - 40px)"');
}
}
.layout-footer {
position: relative;
padding: 7px 0px;
display: flex;
justify-content: center;
}
</style>