feat: wrap组件收缩功能

src/components/Edfs-wrap.vue

@@ -1,208 +1,219 @@
 <template>
-  <div class="edfs-wrap" :class="{ 'edfs-wrap-cvh': useCvh }">
+  <div class="edfs-layout-wrap">
-    <div class="wrap-title" v-if="title || customLeft">
+    <div class="edfs-wrap">
-      <div class="title-left" v-if="!customLeft">
+      <div class="wrap-title" v-if="title || customLeft">
-        <template v-if="shape === 'rect'">
+        <div class="title-left" v-if="!customLeft">
-          <div
+          <template v-if="shape === 'rect'">
-            class="title-rect"
+            <div
-            v-if="!useLeftColorBar"
+              class="title-rect"
-            :style="{ backgroundColor: shapeColor }"
+              v-if="!useLeftColorBar"
-          ></div>
+              :style="{ backgroundColor: shapeColor }"
-        </template>
+            ></div>
-        <template v-else-if="shape === 'circle'">
+          </template>
-          <div
+          <template v-else-if="shape === 'circle'">
-            class="title-circle"
+            <div
-            v-if="!useLeftColorBar"
+              class="title-circle"
-            :style="{ backgroundColor: shapeColor }"
+              v-if="!useLeftColorBar"
-          ></div>
+              :style="{ backgroundColor: shapeColor }"
-        </template>
+            ></div>
-        <div class="title-text">
+          </template>
-          {{ title }}
+          <div class="title-text">
+            {{ title }}
+          </div>
+        </div>
+        <div class="title-left" v-else>
+          <div class="title-rect" v-if="!useLeftColorBar"></div>
+          <slot name="title-left"></slot>
+        </div>
+        <div class="title-right">
+          <slot name="title-right"></slot>
         </div>
       </div>
-      <div class="title-left" v-else>
+
-        <div class="title-rect" v-if="!useLeftColorBar"></div>
+      <el-scrollbar class="wrap-body" :class="{ 'is-title': title }" v-if="useScrollBar">
-        <slot name="title-left"></slot>
+        <slot></slot>
-      </div>
+      </el-scrollbar>
-      <div class="title-right">
+      <div class="wrap-body" :class="{ 'is-title': title }" v-else>
-        <slot name="title-right"></slot>
+        <slot></slot>
       </div>
     </div>
-
+    <div class="toggle-bar" v-if="isCollapse" :class="{ 'collapsed' : !collapsed }"
-    <el-scrollbar class="wrap-body" :class="{ 'is-title': title }" v-if="useScrollBar">
+         @click="onCollapse">
-      <slot></slot>
+      <div class="top"></div>
-    </el-scrollbar>
+      <div class="bottom"></div>
-    <div class="wrap-body" :class="{ 'is-title': title }" v-else>
-      <slot></slot>
     </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%;
-  display: flex;
+  transition: width .3s;
-  flex-direction: column;
+  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
-  background-color: var(--warp-bg);
-  border-radius: 4px;
-  .wrap-title {
-    height: 46px;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    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%;
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-    }
 
-    :deep(.el-button) {
+  .edfs-wrap {
-      height: 26px;
-      font-size: 14px;
-    }
-    :deep(.el-icon) {
-      font-size: 14px;
-    }
-    :deep(.icon) {
-      font-size: 14px;
-    }
-  }
-
-  .wrap-body {
     width: 100%;
-    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
     height: 100%;
     box-sizing: border-box;
     background-color: var(--warp-bg);
-  }
+    border-radius: 4px;
-  .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);
+      height: 46px;
-      padding: 0 calc($W-scale-ratio-1440 * 16px);
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      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: calc($W-scale-ratio-1440 * 3px);
+          width: 3px;
-          height: calc($H-scale-ratio-900 * 14px);
+          height: 14px;
+        }
+
+        .title-circle {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
         }
+
         .title-text {
-          font-size: calc($W-scale-ratio-1440 * 16px);
+          font-size: 16px;
-          margin-left: calc($W-scale-ratio-1440 * 4px);
+          color: var(--text-color);
+          font-weight: 700;
         }
       }
 
+      .title-right {
+        // flex: 1;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+      }
+
       :deep(.el-button) {
-        height: calc($H-scale-ratio-900 * 26px);
+        height: 26px;
-        font-size: calc($W-scale-ratio-1440 * 14px);
+        font-size: 14px;
       }
+
       :deep(.el-icon) {
-        font-size: calc($W-scale-ratio-1440 * 14px);
+        font-size: 14px;
       }
+
       :deep(.icon) {
-        font-size: calc($W-scale-ratio-1440 * 14px);
+        font-size: 14px;
       }
     }
+
     .wrap-body {
-      padding: calc($W-scale-ratio-1440 * 16px);
+      width: 100%;
+      padding: 16px;
+      height: 100%;
+      box-sizing: border-box;
+      background-color: var(--warp-bg);
     }
+
     .is-title {
-      height: calc(100% - calc($H-scale-ratio-900 * 32px));
+      height: calc(100% - 46px);
     }
   }
-}
 
-@media only screen and (min-width: 2560px) {
+  .toggle-bar.collapsed {
-  .edfs-wrap-cvh {
+    &:hover {
-    border-left: calc($W-scale-ratio-2560 * 4px) solid transparent;
+      .top {
-    border-radius: calc($W-scale-ratio-2560 * 4px);
+        transform: rotate(12deg) scale(1.15) translateY(-2px);
-    .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);
-        }
-        .title-text {
-          font-size: calc($W-scale-ratio-2560 * 16px);
-          margin-left: calc($W-scale-ratio-2560 * 4px);
-        }
       }
 
-      :deep(.el-button) {
+      .bottom {
-        height: calc($H-scale-ratio-1440 * 26px);
+        transform: rotate(-12deg) scale(1.15) translateY(2px);
-        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;
     }
   }
 }