增加分隔组件、优化左侧弹窗层级

src/components/Hamburger/index.vue

@@ -3,7 +3,7 @@
     <i-menu-unfold-one class="hamburger"
                        :class="{'is-active':isActive}" theme="outline" size="22" :fill="fill"/>
     <div>
-      <left-drawer v-model="showDrawer" :width="drawerWidth">
+      <left-drawer v-model="showDrawer" z-index="195">
         <div>
           <div class="classify"  style="margin: 0 0 10px 0;">
             <i-chart-line theme="outline" size="24" fill="#338572"/>
@@ -68,7 +68,6 @@ const emit = defineEmits(['toggleClick'])
 const showDrawer = ref(false)
 const permissionStore = usePermissionStore()
 const appStore = useAppStore()
-const drawerWidth= computed(()=>appStore.device === 'mobile'?'100%':'30%')
 const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
 const menuList = ref([
   {

src/components/LeftDrawer/index.vue

@@ -1,4 +1,6 @@
 <script setup>
+import useAppStore from "@/store/modules/app.js";
+const appStore = useAppStore()
 let props = defineProps({
   // 宽度  百分比或者number类型的像素
   width: {
@@ -8,8 +10,13 @@ let props = defineProps({
   },
   title: {
     String
+  },
+  zIndex: {
+    type: Number,
+    default: 165
   }
 });
+const drawerWidth= computed(()=>appStore.device === 'mobile'?'100%':props.width)
 const showDrawer = defineModel({type: Boolean})
 const close = () => {
   showDrawer.value = false
@@ -17,7 +24,7 @@ const close = () => {
 </script>
 
 <template>
-  <el-drawer :size="width" v-model="showDrawer" direction="ltr" append-to-body class="drawer" modal-class="drawer-modal" :z-index="165"
+  <el-drawer :size="drawerWidth" v-model="showDrawer" direction="ltr" append-to-body class="drawer" modal-class="drawer-modal" :z-index="zIndex"
              :with-header="false">
     <div>
       <div v-if="!!title" class="drawer-title">

src/components/titleDivider/index.vue

@@ -0,0 +1,24 @@
+<script setup>
+import useSettingsStore from "@/store/modules/settings.js";
+
+let props = defineProps({
+  title:String
+})
+const settingsStore = useSettingsStore()
+const theme = computed(() => settingsStore.theme)
+</script>
+
+<template>
+<div class="title">
+  {{title}}
+</div>
+</template>
+
+<style scoped lang="scss">
+.title{
+  padding-left: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  border-left: 5px solid v-bind(theme);
+}
+</style>

src/layout/components/Navbar.vue

@@ -124,7 +124,7 @@ function setLayout() {
 
 <style lang='scss' scoped>
 .navbar {
-  z-index: 170;
+  z-index: 200;
   height: 50px;
   overflow: hidden;
   position: relative;

src/main.js

@@ -38,6 +38,7 @@ import RightToolbar from '@/components/RightToolbar'
 import Editor from "@/components/Editor"
 // drawer弹窗组件
 import LeftDrawer from "@/components/LeftDrawer"
+import titleDivider from "@/components/titleDivider"
 // 文件上传组件
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件
@@ -85,6 +86,7 @@ app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
 app.component('LeftDrawer', LeftDrawer)
+app.component('titleDivider', titleDivider)
 app.component(ElCollapseTransition.name, ElCollapseTransition)
 app.use(VueAMap)
 app.use(router)