mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-23 13:43:51 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

'admin-21.01.29:适配移动端、部分布局同步优化'

Browse Source
This commit is contained in:
lyt 2021-01-29 18:33:32 +08:00
parent aa0653e7e4
commit 0c732bc543
16 changed files with 183 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
vue-admin-wonderful-next/package.json
View File

@ -9,6 +9,7 @@
"element-plus": "^1.0.2-beta.30",
"mitt": "^2.1.0",
"nprogress": "^0.2.0",
"screenfull": "^5.1.0",
"sortablejs": "^1.13.0",
"vue": "^3.0.5",
"vue-router": "^4.0.2",

1
vue-admin-wonderful-next/src/store/index.ts
View File

@ -33,6 +33,7 @@ export interface RootStateTypes {
isBreadcrumbIcon: boolean,
isTagsviewIcon: boolean,
isCacheTagsView: boolean,
isSortableTagsView: boolean,
isFooter: boolean,
isGrayscale: boolean,
isInvert: boolean,

1
vue-admin-wonderful-next/src/theme/app.scss
View File

@ -130,6 +130,7 @@ body,
@extend .flex;
flex-direction: column;
width: 100%;
overflow: hidden;
}
.flex-margin {
margin: auto;

8
vue-admin-wonderful-next/src/theme/element.scss
View File

@ -917,3 +917,11 @@
.el-select-dropdown .el-scrollbar__wrap {
overflow-x: scroll !important;
}
/* Drawer 抽屉
------------------------------- */
.el-drawer__body {
width: 100%;
height: 100%;
overflow: auto;
}

17
vue-admin-wonderful-next/src/theme/media/layout.scss Normal file
View File

@ -0,0 +1,17 @@
@import './index.scss';
/* 页面宽度小于576px
------------------------------- */
@media screen and (max-width: $xs) {
.el-message-box {
width: 80% !important;
}
}
/* 页面宽度小于768px
------------------------------- */
@media screen and (max-width: $sm) {
.layout-navbars-breadcrumb-hide {
display: none;
}
}

1
vue-admin-wonderful-next/src/theme/media/media.scss
View File

@ -1,2 +1,3 @@
@import './login.scss';
@import './error.scss';
@import './layout.scss';

1
vue-admin-wonderful-next/src/utils/themeConfig.ts
View File

@ -29,6 +29,7 @@ export default {
isBreadcrumbIcon: false,
isTagsviewIcon: false,
isCacheTagsView: false,
isSortableTagsView: true,
isFooter: false,
isGrayscale: false,
isInvert: false,

57
vue-admin-wonderful-next/src/views/layout/component/aside.vue
View File

@ -1,10 +1,18 @@
<template>
<el-aside :class="setCollapseWidth">
<el-aside :class="setCollapseWidth" v-if="clientWidth > 1000">
<Logo v-if="setShowLogo" />
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
<Vertical :menuList="menuList" :class="setCollapseWidth" />
</el-scrollbar>
</el-aside>
<el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
<el-aside class="w100 h100">
<Logo v-if="setShowLogo" />
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
<Vertical :menuList="menuList" />
</el-scrollbar>
</el-aside>
</el-drawer>
</template>
<script lang="ts">
@ -17,10 +25,12 @@ import {
ref,
onBeforeMount,
onUnmounted,
nextTick,
} from "vue";
import { useStore } from "/@/store/index.ts";
import Logo from "/@/views/layout/logo/index.vue";
import Vertical from "/@/views/layout/navMenu/vertical.vue";
import { stat } from "fs";
export default {
name: "layoutAside",
components: { Logo, Vertical },
@ -29,22 +39,12 @@ export default {
const store = useStore();
const state = reactive({
menuList: [],
clientWidth: "",
});
// 获取布局配置信息
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
// 设置/过滤路由（非静态路由/是否显示在菜单中）
const setFilterRoutes = () => {
if (store.state.themeConfig.layout === "columns") return false;
state.menuList = filterRoutesFun(store.state.routes);
};
// 路由过滤递归函数
const filterRoutesFun = (arr: Array<object>) => {
return arr
.filter((item) => !item.meta.isHide)
.map((item) => {
item = Object.assign({}, item);
if (item.children) item.children = filterRoutesFun(item.children);
return item;
});
};
// 设置菜单展开/收起时的宽度
const setCollapseWidth = computed(() => {
let { layout, isCollapse, menuBar } = store.state.themeConfig;
@ -79,6 +79,25 @@ export default {
(isShowLogo && layout === "columns")
);
});
// 设置/过滤路由（非静态路由/是否显示在菜单中）
const setFilterRoutes = () => {
if (store.state.themeConfig.layout === "columns") return false;
state.menuList = filterRoutesFun(store.state.routes);
};
// 路由过滤递归函数
const filterRoutesFun = (arr: Array<object>) => {
return arr
.filter((item) => !item.meta.isHide)
.map((item) => {
item = Object.assign({}, item);
if (item.children) item.children = filterRoutesFun(item.children);
return item;
});
};
// 设置菜单导航是否固定（移动端）
const initMenuFixed = (clientWidth: number) => {
state.clientWidth = clientWidth;
};
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(store.state.themeConfig, (val) => {
if (val.isShowLogoChange !== val.isShowLogo) {
@ -88,6 +107,7 @@ export default {
});
// 页面加载前
onBeforeMount(() => {
initMenuFixed(document.body.clientWidth);
setFilterRoutes();
proxy.mittBus.on("setSendColumnsChildren", (res) => {
state.menuList = res.children;
@ -100,16 +120,21 @@ export default {
proxy.mittBus.on("getBreadcrumbIndexSetFilterRoutes", () => {
setFilterRoutes();
});
proxy.mittBus.on("layoutMobileResize", (res) => {
initMenuFixed(res.clientWidth);
});
});
// 页面卸载时
onUnmounted(() => {
proxy.mittBus.off("setSendColumnsChildren");
proxy.mittBus.off("setSendClassicChildren");
proxy.mittBus.off("getBreadcrumbIndexSetFilterRoutes");
proxy.mittBus.off("layoutMobileResize");
});
return {
setCollapseWidth,
setShowLogo,
getThemeConfig,
...toRefs(state),
};
},

39
vue-admin-wonderful-next/src/views/layout/index.vue
View File

@ -6,15 +6,9 @@
</template>
<script lang="ts">
import { computed, onBeforeMount, onMounted, onUnmounted } from "vue";
import { computed, onBeforeMount, onUnmounted, getCurrentInstance } from "vue";
import { useStore } from "/@/store/index.ts";
import {
setLocal,
getLocal,
setSession,
getSession,
removeSession,
} from "/@/utils/storage.ts";
import { getLocal } from "/@/utils/storage.ts";
import Defaults from "/@/views/layout/main/defaults.vue";
import Classic from "/@/views/layout/main/classic.vue";
import Transverse from "/@/views/layout/main/transverse.vue";
@ -23,37 +17,32 @@ export default {
name: "layout",
components: { Defaults, Classic, Transverse, Columns },
setup() {
const { proxy } = getCurrentInstance();
const store = useStore();
// 获取布局配置信息
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
// 窗口大小改变时
// 窗口大小改变时(适配移动端)
const onLayoutResize = () => {
const clientWidth = document.body.clientWidth;
console.log(clientWidth);
if (clientWidth < 1000) {
if (getLocal("themeConfig").layout === "defaults") return false;
setSession("oldThemeConfig", getLocal("themeConfig"));
const config = getLocal("themeConfig");
config.layout = "defaults";
console.log(config);
setLocal("themeConfig", config);
getThemeConfig.value.isCollapse = false;
proxy.mittBus.emit("layoutMobileResize", {
layout: "defaults",
clientWidth,
});
} else {
if (
getLocal("themeConfig").layout === getSession("oldThemeConfig").layout
)
return false;
setLocal("themeConfig", getSession("oldThemeConfig"));
proxy.mittBus.emit("layoutMobileResize", {
layout: getLocal("oldLayout") ? getLocal("oldLayout") : "defaults",
clientWidth,
});
}
};
// 页面加载前
onBeforeMount(() => {
window.addEventListener("resize", onLayoutResize);
});
// 页面加载时
onMounted(() => {
onLayoutResize();
window.addEventListener("resize", onLayoutResize);
});
// 页面卸载时
onUnmounted(() => {

4
vue-admin-wonderful-next/src/views/layout/logo/index.vue
View File

@ -18,7 +18,9 @@ export default {
// 设置 logo 的显示。classic 经典布局默认显示 logo
const setShowLogo = computed(() => {
let { isCollapse, layout } = store.state.themeConfig;
return !isCollapse || layout === "classic";
return (
!isCollapse || layout === "classic" || document.body.clientWidth < 1000
);
});
// logo 点击实现菜单展开/收起
const onThemeConfigChange = () => {

2
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue
View File

@ -2,7 +2,7 @@
<div class="layout-navbars-breadcrumb" v-show="getThemeConfig.isBreadcrumb">
<i class="layout-navbars-breadcrumb-icon" :class="getThemeConfig.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
@click="onThemeConfigChange"></i>
<el-breadcrumb>
<el-breadcrumb class="layout-navbars-breadcrumb-hide">
<transition-group name="breadcrumb" mode="out-in">
<el-breadcrumb-item v-for="(v,k) in breadcrumbList" :key="v.meta.title">
<span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">

32
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
View File

@ -192,6 +192,12 @@
<el-switch v-model="getThemeConfig.isCacheTagsView" @change="setLocalThemeConfig"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">开启 TagsView 拖拽 </div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="getThemeConfig.isSortableTagsView" @change="onSortableTagsViewChange"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
@ -364,6 +370,7 @@ export default defineComponent({
setup() {
const { proxy } = getCurrentInstance();
const store = useStore();
// 获取布局配置信息
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
@ -479,6 +486,11 @@ export default defineComponent({
}
setLocalThemeConfig();
};
// 4、界面显示 --> 开启 TagsView 拖拽
const onSortableTagsViewChange = () => {
proxy.mittBus.emit("openOrCloseSortable");
setLocalThemeConfig();
};
// 4、界面显示 --> 灰色模式/色弱模式
const onAddFilterChange = (attr: string) => {
if (attr === "grayscale") {
@ -515,6 +527,7 @@ export default defineComponent({
};
// 5、布局切换
const onSetLayout = (layout: string) => {
setLocal("oldLayout", layout);
if (getThemeConfig.value.layout === layout) return false;
getThemeConfig.value.layout = layout;
getThemeConfig.value.isDrawer = false;
@ -526,6 +539,7 @@ export default defineComponent({
if (getThemeConfig.value.layout === "classic") {
getThemeConfig.value.isShowLogo = true;
getThemeConfig.value.isBreadcrumb = false;
getThemeConfig.value.isCollapse = false;
getThemeConfig.value.isClassicSplitMenu = false;
getThemeConfig.value.menuBar = "#FFFFFF";
getThemeConfig.value.menuBarColor = "#606266";
@ -535,6 +549,7 @@ export default defineComponent({
} else if (getThemeConfig.value.layout === "transverse") {
getThemeConfig.value.isShowLogo = true;
getThemeConfig.value.isBreadcrumb = false;
getThemeConfig.value.isCollapse = false;
getThemeConfig.value.isTagsview = false;
getThemeConfig.value.isClassicSplitMenu = false;
getThemeConfig.value.menuBarColor = "#FFFFFF";
@ -544,6 +559,7 @@ export default defineComponent({
} else if (getThemeConfig.value.layout === "columns") {
getThemeConfig.value.isShowLogo = true;
getThemeConfig.value.isBreadcrumb = true;
getThemeConfig.value.isCollapse = false;
getThemeConfig.value.isTagsview = true;
getThemeConfig.value.isClassicSplitMenu = false;
getThemeConfig.value.menuBar = "#FFFFFF";
@ -554,6 +570,7 @@ export default defineComponent({
} else {
getThemeConfig.value.isShowLogo = false;
getThemeConfig.value.isBreadcrumb = true;
getThemeConfig.value.isCollapse = true;
getThemeConfig.value.isTagsview = true;
getThemeConfig.value.isClassicSplitMenu = false;
getThemeConfig.value.menuBar = "#545c64";
@ -596,9 +613,19 @@ export default defineComponent({
};
onMounted(() => {
nextTick(() => {
// 监听菜单点击，菜单字体背景高亮
proxy.mittBus.on("onMenuClick", () => {
onMenuBarHighlightChange();
});
// 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
proxy.mittBus.on("layoutMobileResize", (res) => {
if (getThemeConfig.value.layout === res.layout) return false;
getThemeConfig.value.layout = res.layout;
getThemeConfig.value.isDrawer = false;
initSetLayoutChange();
onMenuBarHighlightChange();
getThemeConfig.value.isCollapse = false;
});
// 刷新页面时，设置了值，直接取缓存中的值进行初始化
setTimeout(() => {
// 顶栏背景渐变
@ -631,7 +658,9 @@ export default defineComponent({
});
});
onUnmounted(() => {
proxy.mittBus.off("onMenuClick", () => {});
// 取消监听菜单点击，菜单字体背景高亮
proxy.mittBus.off("onMenuClick");
proxy.mittBus.off("layoutMobileResize");
});
return {
openDrawer,
@ -652,6 +681,7 @@ export default defineComponent({
setLocalThemeConfig,
onClassicSplitMenuChange,
onIsBreadcrumbChange,
onSortableTagsViewChange,
};
},
});

27
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue
View File

@ -7,7 +7,8 @@
<i class="icon-skin iconfont" title="布局配置"></i>
</div>
<div class="layout-navbars-breadcrumb-user-icon"><i class="el-icon-bell" title="消息"></i></div>
<div class="layout-navbars-breadcrumb-user-icon mr10"><i class="icon-fullscreen iconfont" title="开全屏"></i></div>
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick"><i class="iconfont"
:title="isScreenfull ? '开全屏' : '关全屏'" :class="!isScreenfull?'icon-fullscreen':'icon-tuichuquanping'"></i></div>
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
<span class="layout-navbars-breadcrumb-user-link">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
@ -28,9 +29,17 @@
</template>
<script lang="ts">
import { ref, getCurrentInstance, computed } from "vue";
import {
ref,
getCurrentInstance,
computed,
reactive,
toRefs,
toRef,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import screenfull from "screenfull";
import { resetRoute } from "/@/router/index.ts";
import { useStore } from "/@/store/index.ts";
import { clearSession } from "/@/utils/storage.ts";
@ -40,6 +49,9 @@ export default {
const { proxy } = getCurrentInstance();
const router = useRouter();
const store = useStore();
const state = reactive({
isScreenfull: false,
});
// 设置布局
const setFlexAutoStyle = computed(() => {
if (
@ -49,6 +61,15 @@ export default {
)
return { flex: 1 };
});
// 全屏点击时
const onScreenfullClick = () => {
if (!screenfull.isEnabled) {
ElMessage.warning("暂不不支持全屏");
return false;
}
screenfull.toggle();
state.isScreenfull = !state.isScreenfull;
};
// 布局配置 icon 点击时
const onLayoutSetingClick = () => {
proxy.mittBus.emit("openSetingsDrawer");
@ -96,6 +117,8 @@ export default {
setFlexAutoStyle,
onLayoutSetingClick,
onHandleCommandClick,
onScreenfullClick,
...toRefs(state),
};
},
};

38
vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
View File

@ -61,6 +61,7 @@ export default {
},
tagsRefsIndex: 0,
tagsViewList: [],
sortable: "",
});
// 动态设置 tagsView 风格样式
const setTagsStyle = computed(() => {
@ -202,19 +203,23 @@ export default {
const initSortable = () => {
const el = document.querySelector(".layout-navbars-tagsview-ul");
if (!el) return false;
const sortable = Sortable.create(el, {
animation: 300,
dataIdAttr: "data-name",
onEnd: () => {
const sortEndList = [];
sortable.toArray().map((val) => {
state.tagsViewList.map((v) => {
if (v.name === val) sortEndList.push({ ...v });
if (!getThemeConfig.value.isSortableTagsView)
state.sortable && state.sortable.destroy();
if (getThemeConfig.value.isSortableTagsView) {
state.sortable = Sortable.create(el, {
animation: 300,
dataIdAttr: "data-name",
onEnd: () => {
const sortEndList = [];
state.sortable.toArray().map((val) => {
state.tagsViewList.map((v) => {
if (v.name === val) sortEndList.push({ ...v });
});
});
});
addBrowserSetSession(sortEndList);
},
});
addBrowserSetSession(sortEndList);
},
});
}
};
// 数据加载前
onBeforeMount(() => {
@ -222,11 +227,17 @@ export default {
proxy.mittBus.on("onCurrentContextmenuClick", (data: object) => {
onCurrentContextmenuClick(data);
});
// 监听布局配置界面开启/关闭拖拽
proxy.mittBus.on("openOrCloseSortable", () => {
initSortable();
});
});
// 页面卸载时
onUnmounted(() => {
// 取消非本页面调用监听
proxy.mittBus.off("onCurrentContextmenuClick");
// 取消监听布局配置界面开启/关闭拖拽
proxy.mittBus.off("openOrCloseSortable");
});
// 数据更新时
onBeforeUpdate(() => {
@ -266,6 +277,9 @@ export default {
.layout-navbars-tagsview {
flex: 1;
background-color: #ffffff;
::v-deep(.el-scrollbar__wrap) {
overflow-x: auto !important;
}
&-ul {
list-style: none;
margin: 0;

12
vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue
View File

@ -1,5 +1,5 @@
<template>
<el-menu router :default-active="defaultActive" background-color="transparent" :collapse="getThemeConfig.isCollapse"
<el-menu router :default-active="defaultActive" background-color="transparent" :collapse="setIsCollapse"
:unique-opened="getThemeConfig.isUniqueOpened" :collapse-transition="false">
<template v-for="val in menuList">
<el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
@ -27,6 +27,7 @@ import {
computed,
defineComponent,
getCurrentInstance,
onBeforeMount,
} from "vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "/@/store/index.ts";
@ -57,14 +58,23 @@ export default defineComponent({
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
// 设置菜单的收起/展开
const setIsCollapse = computed(() => {
return document.body.clientWidth < 1000
? false
: getThemeConfig.value.isCollapse;
});
// 路由更新时
onBeforeRouteUpdate((to) => {
state.defaultActive = to.path;
proxy.mittBus.emit("onMenuClick");
const clientWidth = document.body.clientWidth;
if (clientWidth < 1000) getThemeConfig.value.isCollapse = false;
});
return {
menuList,
getThemeConfig,
setIsCollapse,
...toRefs(state),
};
},

1
vue-admin-wonderful-next/src/views/login/component/account.vue
View File

@ -110,6 +110,7 @@ export default defineComponent({
.login-content-code-img {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #ffffff;
border: 1px solid rgb(220, 223, 230);
color: #333;