更新最新依赖、增加左侧弹窗组件

package.json

@@ -20,21 +20,21 @@
     "@icon-park/vue-next": "^1.4.2",
     "@vuemap/vue-amap": "^2.1.1",
     "@vueup/vue-quill": "1.2.0",
-    "@vueuse/core": "10.6.1",
+    "@vueuse/core": "10.9.0",
-    "axios": "0.27.2",
+    "axios": "1.6.8",
     "babel-plugin-import": "^1.13.8",
-    "echarts": "5.4.3",
+    "echarts": "5.5.0",
-    "element-plus": "2.4.3",
+    "element-plus": "2.7.3",
     "file-saver": "2.0.5",
-    "fuse.js": "6.6.2",
+    "fuse.js": "7.0.0",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
     "spark-md5": "^3.0.2",
-    "vue": "3.3.9",
+    "vue": "3.4.27",
     "vue-cropper": "1.1.1",
-    "vue-router": "4.2.5"
+    "vue-router": "4.3.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "4.5.0",

src/assets/styles/index.scss

@@ -123,7 +123,7 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  padding: 10px;
 }
 
 .components-container {

src/components/Hamburger/index.vue

@@ -3,8 +3,7 @@
     <i-menu-unfold-one @contextmenu.prevent.stop="toggleClick" @click="showDrawer = !showDrawer" class="hamburger"
                        :class="{'is-active':isActive}" theme="outline" size="22" :fill="fill"/>
     <div>
-      <el-drawer v-model="showDrawer" direction="ltr" append-to-body style="top: 50px;height: calc(100% - 50px)" :z-index="165"
+      <left-drawer v-model="showDrawer">
-                 :with-header="false">
         <div>
           <div class="classify"  style="margin-top: 0;">
             <i-system theme="outline" size="24" fill="#333"/>
@@ -43,8 +42,7 @@
 	          </div>
           </div>
         </div>
-
+      </left-drawer>
-      </el-drawer>
     </div>
   </div>
 </template>
@@ -52,6 +50,7 @@
 <script setup>
 import usePermissionStore from "@/store/modules/permission.js";
 import {isExternal} from "@/utils/validate.js";
+import LeftDrawer from "@/components/LeftDrawer/index.vue";
 
 defineProps({
   isActive: {
@@ -100,7 +99,6 @@ const menuList = ref([
 ])
 const router = useRouter();
 const openRouter = (href) => {
-	console.log(href);
 	if (href){
 	  if (isExternal(href)) {
 		  window.open(href)

src/components/LeftDrawer/index.vue

@@ -0,0 +1,59 @@
+<script setup>
+let props = defineProps({
+  // 宽度  百分比或者number类型的像素
+  width: {
+    msg: '百分比或者number类型的像素',
+    type: [String, Number],
+    default: '30%'
+  },
+  title: {
+    String
+  }
+});
+const showDrawer = defineModel({type: Boolean})
+const close = () => {
+  showDrawer.value = false
+}
+</script>
+
+<template>
+  <el-drawer :size="width" v-model="showDrawer" direction="ltr" append-to-body class="drawer" modal-class="drawer-modal" :z-index="165"
+             :with-header="false">
+    <div>
+      <div v-if="!!title" class="drawer-title">
+        {{title}}
+      </div>
+      <div class="close-icon" @click="close">
+        <el-icon size="20">
+          <Close/>
+        </el-icon>
+      </div>
+      <slot></slot>
+    </div>
+    <template #footer>
+      <slot name="footer"></slot>
+    </template>
+  </el-drawer>
+</template>
+
+<style lang="scss">
+.drawer{
+  transform: translate(0, 0);
+  .drawer-title{
+    font-size: 22px;
+    font-weight: 600;
+    height: 50px;
+  }
+}
+.drawer-modal{
+  top: 50px;
+  height: calc(100% - 50px);
+}
+.close-icon {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  //鼠标悬浮变成点击
+  cursor: pointer;
+}
+</style>

src/main.js

@@ -35,6 +35,8 @@ import Pagination from '@/components/Pagination'
 import RightToolbar from '@/components/RightToolbar'
 // 富文本组件
 import Editor from "@/components/Editor"
+// drawer弹窗组件
+import LeftDrawer from "@/components/LeftDrawer"
 // 文件上传组件
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件
@@ -79,6 +81,7 @@ app.component('ImageUpload', ImageUpload)
 app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
+app.component('LeftDrawer', LeftDrawer)
 
 app.use(VueAMap)
 app.use(router)