feat: wrap组件收缩功能

src/components/Edfs-wrap.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="edfs-wrap" :class="{ 'edfs-wrap-cvh': useCvh }">
+  <div class="edfs-layout-wrap">
+    <div class="edfs-wrap">
       <div class="wrap-title" v-if="title || customLeft">
         <div class="title-left" v-if="!customLeft">
           <template v-if="shape === 'rect'">
@@ -36,40 +37,65 @@
         <slot></slot>
       </div>
     </div>
+    <div class="toggle-bar" v-if="isCollapse" :class="{ 'collapsed' : !collapsed }"
+         @click="onCollapse">
+      <div class="top"></div>
+      <div class="bottom"></div>
+    </div>
+  </div>
+
 </template>
 
 <script setup lang="ts">
+const emit = defineEmits<{
+  'collapse': []
+}>()
+
 interface Props {
   title?: string
   useLeftColorBar?: boolean
   barColor?: string
-  useCvh?: boolean
   customLeft?: boolean
   shape?: 'circle' | 'rect'
   shapeColor?: string
   useScrollBar?: boolean
+  isCollapse?: boolean
+  collapsed?: boolean
 }
+
 const props = withDefaults(defineProps<Props>(), {
   title: '',
   useLeftColorBar: false,
   barColor: '#fff',
-  useCvh: false,
   customLeft: false,
   shape: 'rect',
   shapeColor: '#619925',
   useScrollBar: false,
+  isCollapse: false,
+  collapsed: false,
 })
+
+function onCollapse() {
+  emit('collapse')
+}
 </script>
 
 <style lang="scss" scoped>
-.edfs-wrap {
+.edfs-layout-wrap {
+  width: 100%;
+  transition: width .3s;
+  position: relative;
+
+  .edfs-wrap {
     width: 100%;
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    height: 100%;
     box-sizing: border-box;
     background-color: var(--warp-bg);
     border-radius: 4px;
+
     .wrap-title {
       height: 46px;
       width: 100%;
@@ -78,27 +104,31 @@ const props = withDefaults(defineProps<Props>(), {
       padding: 0 16px;
       box-sizing: border-box;
       background-color: var(--warp-bg);
+
       .title-left {
         height: 100%;
         display: flex;
         gap: 4px;
         align-items: center;
+
         .title-rect {
           width: 3px;
           height: 14px;
         }
+
         .title-circle {
           width: 8px;
           height: 8px;
           border-radius: 50%;
         }
+
         .title-text {
-        font-family: Alibaba-PuHuiTi-B;
           font-size: 16px;
           color: var(--text-color);
           font-weight: 700;
         }
       }
+
       .title-right {
         // flex: 1;
         height: 100%;
@@ -111,9 +141,11 @@ const props = withDefaults(defineProps<Props>(), {
         height: 26px;
         font-size: 14px;
       }
+
       :deep(.el-icon) {
         font-size: 14px;
       }
+
       :deep(.icon) {
         font-size: 14px;
       }
@@ -126,83 +158,62 @@ const props = withDefaults(defineProps<Props>(), {
       box-sizing: border-box;
       background-color: var(--warp-bg);
     }
+
     .is-title {
       height: calc(100% - 46px);
     }
-}
-
-@media only screen and (max-width: 1440px) {
-  .edfs-wrap-cvh {
-    border-left: calc($W-scale-ratio-1440 * 4px) solid transparent;
-    border-radius: calc($W-scale-ratio-1440 * 4px);
-    .wrap-title {
-      height: calc($H-scale-ratio-900 * 46px);
-      padding: 0 calc($W-scale-ratio-1440 * 16px);
-      .title-left {
-        .title-rect {
-          width: calc($W-scale-ratio-1440 * 3px);
-          height: calc($H-scale-ratio-900 * 14px);
-        }
-        .title-text {
-          font-size: calc($W-scale-ratio-1440 * 16px);
-          margin-left: calc($W-scale-ratio-1440 * 4px);
-        }
   }
 
-      :deep(.el-button) {
-        height: calc($H-scale-ratio-900 * 26px);
-        font-size: calc($W-scale-ratio-1440 * 14px);
-      }
-      :deep(.el-icon) {
-        font-size: calc($W-scale-ratio-1440 * 14px);
+  .toggle-bar.collapsed {
+    &:hover {
+      .top {
+        transform: rotate(12deg) scale(1.15) translateY(-2px);
       }
-      :deep(.icon) {
-        font-size: calc($W-scale-ratio-1440 * 14px);
-      }
-    }
-    .wrap-body {
-      padding: calc($W-scale-ratio-1440 * 16px);
-    }
-    .is-title {
-      height: calc(100% - calc($H-scale-ratio-900 * 32px));
-    }
-  }
-}
 
-@media only screen and (min-width: 2560px) {
-  .edfs-wrap-cvh {
-    border-left: calc($W-scale-ratio-2560 * 4px) solid transparent;
-    border-radius: calc($W-scale-ratio-2560 * 4px);
-    .wrap-title {
-      height: calc($H-scale-ratio-1440 * 46px);
-      padding: 0 calc($W-scale-ratio-2560 * 16px);
-      .title-left {
-        .title-rect {
-          width: calc($W-scale-ratio-2560 * 3px);
-          height: calc($H-scale-ratio-1440 * 14px);
+      .bottom {
+        transform: rotate(-12deg) scale(1.15) translateY(2px);
       }
-        .title-text {
-          font-size: calc($W-scale-ratio-2560 * 16px);
-          margin-left: calc($W-scale-ratio-2560 * 4px);
     }
   }
 
-      :deep(.el-button) {
-        height: calc($H-scale-ratio-1440 * 26px);
-        font-size: calc($W-scale-ratio-2560 * 14px);
-      }
-      :deep(.el-icon) {
-        font-size: calc($W-scale-ratio-2560 * 14px);
+  .toggle-bar {
+    cursor: pointer;
+    height: 72px;
+    width: 32px;
+    position: absolute;
+    top: calc(50% - 36px);
+    z-index: 888;
+    right: -20px;
+
+    &:hover {
+      .top {
+        transform: rotate(-12deg) scale(1.15) translateY(-2px);
       }
-      :deep(.icon) {
-        font-size: calc($W-scale-ratio-2560 * 14px);
+
+      .bottom {
+        transform: rotate(12deg) scale(1.15) translateY(2px);
       }
     }
-    .wrap-body {
-      padding: calc($W-scale-ratio-2560 * 16px);
+
+    .top {
+      background-color: #c7bebe;
+      position: absolute;
+      width: 4px;
+      border-radius: 2px;
+      height: 38px;
+      left: 14px;
+      transition: all .3s;
     }
-    .is-title {
-      height: calc(100% - calc($H-scale-ratio-1440 * 32px));
+
+    .bottom {
+      position: absolute;
+      top: 34px;
+      background-color: #c7bebe;
+      width: 4px;
+      border-radius: 2px;
+      height: 38px;
+      left: 14px;
+      transition: all .3s;
     }
   }
 }