lisang
/
vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #57 from cshaptx4869/patch-28 

refactor: ♻️ 增加设备枚举类型
This commit is contained in:
Ray Hao 2024-03-12 13:33:54 +08:00 committed by GitHub
parent 7f0402f03d e4ccc35bba
commit 50b257f199
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/enums/DeviceEnum.ts Normal file
View File

@ -0,0 +1,14 @@
/**
* 设备枚举
*/
export const enum DeviceEnum {
/**
* 宽屏设备
*/
DESKTOP = "desktop",
/**
* 窄屏设备
*/
MOBILE = "mobile",
}

6
src/layout/components/NavBar/components/NavbarRight.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex">
<template v-if="device !== 'mobile'">
<template v-if="!isMobile">
<!--全屏 -->
<div class="setting-item" @click="toggle">
<svg-icon
@ -64,6 +64,7 @@ import {
useSettingsStore,
} from "@/store";
import defaultSettings from "@/settings";
import { DeviceEnum } from "@/enums/DeviceEnum";
const appStore = useAppStore();
const tagsViewStore = useTagsViewStore();
@ -73,8 +74,7 @@ const settingStore = useSettingsStore();
const route = useRoute();
const router = useRouter();
// 设备类型：desktop-宽屏设备 || mobile-窄屏设备
const device = computed(() => appStore.device);
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
const { isFullscreen, toggle } = useFullscreen();

7
src/layout/index.vue
View File

@ -46,6 +46,7 @@
<script setup lang="ts">
import { useAppStore, useSettingsStore, usePermissionStore } from "@/store";
import defaultSettings from "@/settings";
import { DeviceEnum } from "@/enums/DeviceEnum";
const appStore = useAppStore();
const settingsStore = useSettingsStore();
@ -71,7 +72,7 @@ watch(
const classObj = computed(() => ({
hideSidebar: !appStore.sidebar.opened,
openSidebar: appStore.sidebar.opened,
mobile: appStore.device === "mobile",
mobile: appStore.device === DeviceEnum.MOBILE,
"layout-left": layout.value === "left",
"layout-top": layout.value === "top",
"layout-mix": layout.value === "mix",
@ -82,10 +83,10 @@ const WIDTH = 992; // 响应式布局容器固定宽度 大屏（>=1200px）
watchEffect(() => {
if (width.value < WIDTH) {
appStore.toggleDevice("mobile");
appStore.toggleDevice(DeviceEnum.MOBILE);
appStore.closeSideBar();
} else {
appStore.toggleDevice("desktop");
appStore.toggleDevice(DeviceEnum.DESKTOP);
if (width.value >= 1200) {
appStore.openSideBar();

3
src/store/modules/app.ts
View File

@ -4,11 +4,12 @@ import defaultSettings from "@/settings";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
import { store } from "@/store";
import { DeviceEnum } from "@/enums/DeviceEnum";
// setup
export const useAppStore = defineStore("app", () => {
// state
const device = useStorage("device", "desktop");
const device = useStorage("device", DeviceEnum.DESKTOP);
const size = useStorage<any>("size", defaultSettings.size);
const language = useStorage("language", defaultSettings.language);