From 045da5de062c1b43f53bc7b6a4cf125fbd97a3e5 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 09 四月 2026 15:37:14 +0800
Subject: [PATCH] 1.产品维护产品大类新增时层级不做限制 2.角色管理数据权限范围枚举值修改
---
src/layout/index.vue | 179 +++++++++++++++++++++++++++++++++--------------------------
1 files changed, 101 insertions(+), 78 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 419c80a..d3580d0 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,8 +1,14 @@
<template>
- <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
- <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
- <sidebar v-if="!sidebar.hide" class="sidebar-container" />
- <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+ <div :class="classObj"
+ class="app-wrapper"
+ :style="{ '--current-color': theme }">
+ <div v-if="device === 'mobile' && sidebar.opened"
+ class="drawer-bg"
+ @click="handleClickOutside" />
+ <sidebar v-if="!sidebar.hide"
+ class="sidebar-container" />
+ <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
+ class="main-container">
<div :class="{ 'fixed-header': fixedHeader }">
<navbar @setLayout="setLayout" />
<tags-view v-if="needTagsView" />
@@ -14,95 +20,112 @@
</template>
<script setup>
-import { useWindowSize } from '@vueuse/core'
-import Sidebar from './components/Sidebar/index.vue'
-import { AppMain, Navbar, Settings, TagsView } from './components'
-import defaultSettings from '@/settings'
+ import { useWindowSize } from "@vueuse/core";
+ import Sidebar from "./components/Sidebar/index.vue";
+ import { AppMain, Navbar, Settings, TagsView } from "./components";
+ import defaultSettings from "@/settings";
-const store = useStore();
-const theme = computed(() => store.state.settings.theme);
-const sideTheme = computed(() => store.state.settings.sideTheme);
-const sidebar = computed(() => store.state.app.sidebar);
-const device = computed(() => store.state.app.device);
-const needTagsView = computed(() => store.state.settings.tagsView);
-const fixedHeader = computed(() => store.state.settings.fixedHeader);
+ import useAppStore from "@/store/modules/app";
+ import useSettingsStore from "@/store/modules/settings";
-const classObj = computed(() => ({
- hideSidebar: !sidebar.value.opened,
- openSidebar: sidebar.value.opened,
- withoutAnimation: sidebar.value.withoutAnimation,
- mobile: device.value === 'mobile'
-}))
+ const settingsStore = useSettingsStore();
+ const theme = computed(() => settingsStore.theme);
+ const sideTheme = computed(() => settingsStore.sideTheme);
+ const sidebar = computed(() => useAppStore().sidebar);
+ const device = computed(() => useAppStore().device);
+ const needTagsView = computed(() => settingsStore.tagsView);
+ const fixedHeader = computed(() => settingsStore.fixedHeader);
-const { width, height } = useWindowSize();
-const WIDTH = 992; // refer to Bootstrap's responsive design
+ const classObj = computed(() => ({
+ hideSidebar: !sidebar.value.opened,
+ openSidebar: sidebar.value.opened,
+ withoutAnimation: sidebar.value.withoutAnimation,
+ mobile: device.value === "mobile",
+ }));
-watchEffect(() => {
- if (device.value === 'mobile' && sidebar.value.opened) {
- store.dispatch('app/closeSideBar', { withoutAnimation: false })
+ const { width, height } = useWindowSize();
+ const WIDTH = 992; // refer to Bootstrap's responsive design
+
+ watch(
+ () => device.value,
+ () => {
+ if (device.value === "mobile" && sidebar.value.opened) {
+ useAppStore().closeSideBar({ withoutAnimation: false });
+ }
+ }
+ );
+
+ watchEffect(() => {
+ if (width.value - 1 < WIDTH) {
+ useAppStore().toggleDevice("mobile");
+ useAppStore().closeSideBar({ withoutAnimation: true });
+ } else {
+ useAppStore().toggleDevice("desktop");
+ }
+ });
+
+ function handleClickOutside() {
+ useAppStore().closeSideBar({ withoutAnimation: false });
}
- if (width.value - 1 < WIDTH) {
- store.dispatch('app/toggleDevice', 'mobile')
- store.dispatch('app/closeSideBar', { withoutAnimation: true })
- } else {
- store.dispatch('app/toggleDevice', 'desktop')
+
+ const settingRef = ref(null);
+ function setLayout() {
+ settingRef.value.openSetting();
}
-})
-
-function handleClickOutside() {
- store.dispatch('app/closeSideBar', { withoutAnimation: false })
-}
-
-const settingRef = ref(null);
-function setLayout() {
- settingRef.value.openSetting();
-}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";
-.app-wrapper {
- @include clearfix;
- position: relative;
- height: 100%;
- width: 100%;
+ .app-wrapper {
+ @include clearfix;
+ position: relative;
+ height: 100%;
+ width: 100%;
+ background: radial-gradient(
+ circle at top,
+ rgba(223, 232, 226, 0.95),
+ transparent 32%
+ ),
+ linear-gradient(180deg, #f7faf8 0%, var(--app-bg) 100%);
- &.mobile.openSidebar {
- position: fixed;
- top: 0;
+ &.mobile.openSidebar {
+ position: fixed;
+ top: 0;
+ }
}
-}
-.drawer-bg {
- background: #000;
- opacity: 0.3;
- width: 100%;
- top: 0;
- height: 100%;
- position: absolute;
- z-index: 999;
-}
+ .drawer-bg {
+ background: #000;
+ opacity: 0.3;
+ width: 100%;
+ top: 0;
+ height: 100%;
+ position: absolute;
+ z-index: 999;
+ }
-.fixed-header {
- position: fixed;
- top: 0;
- right: 0;
- z-index: 9;
- width: calc(100% - #{$base-sidebar-width});
- transition: width 0.28s;
-}
+ .fixed-header {
+ position: fixed;
+ top: 0px;
+ padding-top: 12px;
+ right: 16px;
+ z-index: 9;
+ width: calc(100% - #{$base-sidebar-width} - 32px);
+ transition: width 0.28s, right 0.28s;
+ padding-bottom: 8px;
+ background-color: #f3f6f4;
+ }
+ .hideSidebar .fixed-header {
+ width: calc(100% - 100px);
+ }
-.hideSidebar .fixed-header {
- width: calc(100% - 54px);
-}
+ .sidebarHide .fixed-header {
+ width: calc(100% - 32px);
+ }
-.sidebarHide .fixed-header {
- width: 100%;
-}
-
-.mobile .fixed-header {
- width: 100%;
-}
-</style>
\ No newline at end of file
+ .mobile .fixed-header {
+ width: 100%;
+ }
+</style>
--
Gitblit v1.9.3