Browse Source

perf: 同步完整版分支代码

i18n
xiaoxian521 3 years ago
parent
commit
1e92bd416e
  1. 66
      src/layout/index.vue
  2. 1
      src/layout/types.ts
  3. 36
      src/store/modules/app.ts
  4. 3
      src/style/sidebar.scss

66
src/layout/index.vue

@ -4,8 +4,6 @@ import {
reactive, reactive,
computed, computed,
onMounted, onMounted,
watchEffect,
onBeforeMount,
defineComponent, defineComponent,
getCurrentInstance getCurrentInstance
} from "vue"; } from "vue";
@ -13,11 +11,11 @@ import { setType } from "./types";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { routerArrays } from "./types"; import { routerArrays } from "./types";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
import { useEventListener } from "@vueuse/core";
import backTop from "/@/assets/svg/back_top.svg"; import backTop from "/@/assets/svg/back_top.svg";
import { useAppStoreHook } from "/@/store/modules/app"; import { useAppStoreHook } from "/@/store/modules/app";
import fullScreen from "/@/assets/svg/full_screen.svg"; import fullScreen from "/@/assets/svg/full_screen.svg";
import exitScreen from "/@/assets/svg/exit_screen.svg"; import exitScreen from "/@/assets/svg/exit_screen.svg";
import { deviceDetection } from "/@/utils/deviceDetection";
import { useSettingStoreHook } from "/@/store/modules/settings"; import { useSettingStoreHook } from "/@/store/modules/settings";
import navbar from "./components/navbar.vue"; import navbar from "./components/navbar.vue";
@ -27,6 +25,7 @@ import setting from "./components/setting/index.vue";
import Vertical from "./components/sidebar/vertical.vue"; import Vertical from "./components/sidebar/vertical.vue";
import Horizontal from "./components/sidebar/horizontal.vue"; import Horizontal from "./components/sidebar/horizontal.vue";
const isMobile = deviceDetection();
const pureSetting = useSettingStoreHook(); const pureSetting = useSettingStoreHook();
const instance = getCurrentInstance().appContext.app.config.globalProperties; const instance = getCurrentInstance().appContext.app.config.globalProperties;
@ -93,10 +92,6 @@ const set: setType = reactive({
}) })
}); });
const handleClickOutside = (params: boolean) => {
useAppStoreHook().closeSideBar({ withoutAnimation: params });
};
function setTheme(layoutModel: string) { function setTheme(layoutModel: string) {
window.document.body.setAttribute("layout", layoutModel); window.document.body.setAttribute("layout", layoutModel);
instance.$storage.layout = { instance.$storage.layout = {
@ -105,32 +100,37 @@ function setTheme(layoutModel: string) {
}; };
} }
function toggle(device: string, bool: boolean) {
useAppStoreHook().toggleDevice(device);
useAppStoreHook().toggleSideBar(bool, "resize");
}
// //
emitter.on("resize", ({ detail }) => { emitter.on("resize", ({ detail }) => {
if (isMobile) return;
let { width } = detail; let { width } = detail;
width <= 670 ? setTheme("vertical") : setTheme(useAppStoreHook().layout); width <= 670 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
});
watchEffect(() => {
if (set.device === "mobile" && !set.sidebar.opened) {
handleClickOutside(false);
/** width app-wrapper
* 0 < width <= 760 隐藏侧边栏
* 760 < width <= 990 折叠侧边栏
* width > 990 展开侧边栏
*/
if (width > 0 && width <= 760) {
toggle("mobile", false);
} else if (width > 760 && width <= 990) {
toggle("desktop", false);
} else if (width > 990) {
if (!set.sidebar.isClickHamburger) {
toggle("desktop", true);
}
} }
}); });
const $_isMobile = () => {
const rect = document.body.getBoundingClientRect();
return rect.width - 1 < 992;
};
const $_resizeHandler = () => {
if (!document.hidden) {
const isMobile = $_isMobile();
useAppStoreHook().toggleDevice(isMobile ? "mobile" : "desktop");
onMounted(() => {
if (isMobile) { if (isMobile) {
handleClickOutside(true);
toggle("mobile", false);
} }
}
};
});
function onFullScreen() { function onFullScreen() {
pureSetting.hiddenSideBar pureSetting.hiddenSideBar
@ -138,18 +138,6 @@ function onFullScreen() {
: pureSetting.changeSetting({ key: "hiddenSideBar", value: true }); : pureSetting.changeSetting({ key: "hiddenSideBar", value: true });
} }
onMounted(() => {
const isMobile = $_isMobile();
if (isMobile) {
useAppStoreHook().toggleDevice("mobile");
handleClickOutside(true);
}
});
onBeforeMount(() => {
useEventListener("resize", $_resizeHandler);
});
const layoutHeader = defineComponent({ const layoutHeader = defineComponent({
render() { render() {
return h( return h(
@ -202,8 +190,8 @@ const layoutHeader = defineComponent({
set.sidebar.opened && set.sidebar.opened &&
layout.includes('vertical') layout.includes('vertical')
" "
class="drawer-bg"
@click="handleClickOutside(false)"
class="app-mask"
@click="useAppStoreHook().toggleSideBar()"
/> />
<Vertical <Vertical
v-show="!pureSetting.hiddenSideBar && layout.includes('vertical')" v-show="!pureSetting.hiddenSideBar && layout.includes('vertical')"
@ -261,7 +249,7 @@ const layoutHeader = defineComponent({
margin-left: 0 !important; margin-left: 0 !important;
} }
.drawer-bg {
.app-mask {
background: #000; background: #000;
opacity: 0.3; opacity: 0.3;
width: 100%; width: 100%;

1
src/layout/types.ts

@ -40,6 +40,7 @@ export interface setType {
sidebar: { sidebar: {
opened: boolean; opened: boolean;
withoutAnimation: boolean; withoutAnimation: boolean;
isClickHamburger: boolean;
}; };
device: string; device: string;
fixedHeader: boolean; fixedHeader: boolean;

36
src/store/modules/app.ts

@ -8,6 +8,8 @@ interface AppState {
sidebar: { sidebar: {
opened: boolean; opened: boolean;
withoutAnimation: boolean; withoutAnimation: boolean;
// 判断是否手动点击Hamburger
isClickHamburger: boolean;
}; };
layout: string; layout: string;
device: string; device: string;
@ -20,7 +22,8 @@ export const useAppStore = defineStore({
opened: storageLocal.getItem("sidebarStatus") opened: storageLocal.getItem("sidebarStatus")
? !!+storageLocal.getItem("sidebarStatus") ? !!+storageLocal.getItem("sidebarStatus")
: true, : true,
withoutAnimation: false
withoutAnimation: false,
isClickHamburger: false
}, },
// 这里的layout用于监听容器拖拉后恢复对应的导航模式 // 这里的layout用于监听容器拖拉后恢复对应的导航模式
layout: layout:
@ -36,28 +39,27 @@ export const useAppStore = defineStore({
} }
}, },
actions: { actions: {
TOGGLE_SIDEBAR() {
this.sidebar.opened = !this.sidebar.opened;
TOGGLE_SIDEBAR(opened?: boolean, resize?: string) {
if (opened && resize) {
this.sidebar.withoutAnimation = true;
this.sidebar.opened = true;
storageLocal.setItem("sidebarStatus", true);
} else if (!opened && resize) {
this.sidebar.withoutAnimation = true;
this.sidebar.opened = false;
storageLocal.setItem("sidebarStatus", false);
} else if (!opened && !resize) {
this.sidebar.withoutAnimation = false; this.sidebar.withoutAnimation = false;
if (this.sidebar.opened) {
storageLocal.setItem("sidebarStatus", 1);
} else {
storageLocal.setItem("sidebarStatus", 0);
this.sidebar.opened = !this.sidebar.opened;
this.sidebar.isClickHamburger = !this.sidebar.opened;
storageLocal.setItem("sidebarStatus", this.sidebar.opened);
} }
}, },
CLOSE_SIDEBAR(withoutAnimation: boolean) {
storageLocal.setItem("sidebarStatus", 0);
this.sidebar.opened = false;
this.sidebar.withoutAnimation = withoutAnimation;
},
TOGGLE_DEVICE(device: string) { TOGGLE_DEVICE(device: string) {
this.device = device; this.device = device;
}, },
async toggleSideBar() {
await this.TOGGLE_SIDEBAR();
},
closeSideBar(withoutAnimation) {
this.CLOSE_SIDEBAR(withoutAnimation);
async toggleSideBar(opened?: boolean, resize?: string) {
await this.TOGGLE_SIDEBAR(opened, resize);
}, },
toggleDevice(device) { toggleDevice(device) {
this.TOGGLE_DEVICE(device); this.TOGGLE_DEVICE(device);

3
src/style/sidebar.scss

@ -39,7 +39,7 @@
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
z-index: 1000;
z-index: 998;
width: calc(100% - 210px); width: calc(100% - 210px);
transition: width 0.28s; transition: width 0.28s;
} }
@ -557,6 +557,7 @@
} }
} }
/* vertical菜单下hideSidebar去除动画 */
.withoutAnimation { .withoutAnimation {
.main-container, .main-container,
.sidebar-container { .sidebar-container {

Loading…
Cancel
Save