物业主开发

src/layout/components/Navbar.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="navbar" :class="'nav' + navType">
+    <hamburger
+      v-show="Showhamburger"
+      id="hamburger-container"
+      :is-active="appStore.sidebar.opened"
+      class="hamburger-container"
+      @toggle-click="toggleSideBar"
+    >
+    </hamburger>
+    <div class="flex-1 h-full"></div>
     <div class="right-menu flex align-center">
       <template v-if="appStore.device !== 'mobile'">
         <el-tooltip :content="proxy.$t('navbar.message')" effect="dark" placement="bottom">
@@ -43,6 +52,7 @@
 </template>
 
 <script setup lang="ts">
+import hamburger from '@/components/Hamburger/index.vue';
 import { useAppStore } from '@/store/modules/app';
 import { useUserStore } from '@/store/modules/user';
 import { useSettingsStore } from '@/store/modules/settings';
@@ -51,6 +61,14 @@ import notice from './notice/index.vue';
 import router from '@/router';
 import { ElMessageBoxOptions } from 'element-plus/es/components/message-box/src/message-box.type';
 
+const props = defineProps({
+  Showhamburger: {
+    type: Boolean,
+    default: true
+  }
+});
+console.log(props.Showhamburger);
+
 const appStore = useAppStore();
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
@@ -64,9 +82,9 @@ const navType = computed(() => settingsStore.navType);
 // 是否切换了租户
 const dynamic = ref(true);
 
-// const toggleSideBar = () => {
-//   appStore.toggleSideBar(false);
-// };
+const toggleSideBar = () => {
+  appStore.toggleSideBar(false);
+};
 
 const logout = async () => {
   await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
@@ -133,10 +151,6 @@ watch(
   top: 12px;
 }
 
-.flex {
-  display: flex;
-}
-
 .align-center {
   align-items: center;
 }
@@ -145,42 +159,31 @@ watch(
   height: 50px;
   overflow: hidden;
   position: relative;
-  // background: #1a75ff;
   background: #dfedff;
-  // border-bottom: 1px solid #1a75ff;
   border-bottom: 1px solid #dfedff;
 
-  color: #fff;
   color: #c0c4cc;
 
   box-shadow: none;
   display: flex;
   align-items: center;
-  // padding: 0 8px;
+  justify-content: space-between;
   box-sizing: border-box;
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
-    //float: left;
     cursor: pointer;
     transition: background 0.3s;
     -webkit-tap-highlight-color: transparent;
     display: flex;
     align-items: center;
-    flex-shrink: 0;
     margin-right: 8px;
 
     &:hover {
-      background: var(--el-fill-color-lighter);
+      background: #fafafa52;
     }
   }
-
-  .breadcrumb-container {
-    //float: left;
-    flex-shrink: 0;
-  }
-
   .topmenu-container {
     position: absolute;
     left: 50px;
@@ -201,13 +204,10 @@ watch(
   }
 
   .right-menu {
-    //float: right;
     height: 100%;
     line-height: 50px;
     display: flex;
     align-items: center;
-    margin-left: auto;
-
     &:focus {
       outline: none;
     }
@@ -225,10 +225,6 @@ watch(
       &.hover-effect {
         cursor: pointer;
         transition: background 0.3s;
-
-        // &:hover {
-        //   background: var(--el-fill-color-lighter);
-        // }
       }
     }
 

src/layout/components/Settings/index.vue

@@ -118,7 +118,7 @@
     <el-divider />
 
     <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">保存配置</el-button>
-    <el-button plain icon="Refresh" @click="resetSetting">重置配置</el-button>
+    <el-button plain @click="resetSetting">重置配置</el-button>
   </el-drawer>
 </template>
 

src/layout/index.vue

@@ -134,6 +134,9 @@ const setLayout = () => {
     top: 0;
   }
 }
+.main-container {
+  flex: 1;
+}
 
 .drawer-bg {
   background: #000;