fix: 售票界面折叠优化

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ticket",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "private": true,
   "description": "售检票系统",
   "author": "",

src/pages/sellManage/retail.vue

@@ -1,18 +1,27 @@
 <template>
   <div class="sale-container">
-    <div style="display: flex; gap: 20px;">
+    <div style="display: flex;">
       <QuickType class="quick-type"></QuickType>
-      <div style="width: 380px; flex-shrink: 0;margin-right: 20px;">
-        <!-- 票种列表 -->
-        <TicketList
-          ref="ticketList"
-          type-id="1"
-          v-model="currentTicket"
-          @update="handleUpdate"
-          @set-batch="setBatch"
-        ></TicketList>
+      <div class="ticket-panel" :class="{ collapsed: ticketCollapsed }">
+        <div class="ticket-panel__wrapper">
+          <div class="ticket-panel__title">票种列表</div>
+          <TicketList
+            ref="ticketList"
+            type-id="1"
+            v-model="currentTicket"
+            @update="handleUpdate"
+            @set-batch="setBatch"
+          ></TicketList>
+        </div>
+        <div
+          :class="['ticket-panel__toggle', ticketCollapsed && 'is-collapsed']"
+          :title="ticketCollapsed ? '展开票种列表' : '收起票种列表'"
+          @click="togglePanel">
+          <i class="el-icon-s-unfold" v-if="ticketCollapsed"></i>
+          <i class="el-icon-s-fold" v-else></i>
+        </div>
       </div>
-      <div style="flex: 1;">
+      <div class="sale-main">
         <FormInfo
           ref="formInfo"
           style="margin-bottom:20px"
@@ -20,16 +29,17 @@
           :current-batch="currentBatch"
           :order-items="orderItems"></FormInfo>
 
-        <!-- 其他景点保持原样 -->
         <OrderInfo
           @clear="handleClear"
           style="margin-bottom:20px"
           ref="orderInfo"
           :current-ticket="currentTicket"
           v-model="orderItems"></OrderInfo>
-        <RecentOrder
-          ref="recentOrder"
-          style="margin-bottom:20px"></RecentOrder>
+        <el-collapse v-model="recentOrderActive" accordion style="margin-bottom:20px">
+          <el-collapse-item name="recentOrder" title="最近订单">
+            <RecentOrder ref="recentOrder"></RecentOrder>
+          </el-collapse-item>
+        </el-collapse>
       </div>
     </div>
   </div>
@@ -50,7 +60,9 @@ export default {
     return {
       currentTicket: null,
       currentBatch: null,
-      orderItems: []
+      orderItems: [],
+      ticketCollapsed: false,
+      recentOrderActive: ''
     }
   },
   components: {
@@ -76,6 +88,9 @@ export default {
     document.addEventListener('keydown', this.keyBind, true)
   },
   methods: {
+    togglePanel () {
+      this.ticketCollapsed = !this.ticketCollapsed
+    },
     handleClear () {
       this.orderItems = []
       this.$refs.formInfo.$refs.form.clearValidate()
@@ -86,7 +101,6 @@ export default {
       this.currentTicket = ticket
     },
     setBatch (batch) {
-      // 设置当前批次
       this.currentBatch = batch
     }
   },
@@ -102,7 +116,7 @@ export default {
 .sale-container .quick-type {
   position: absolute;
   padding: 0 20px;
-  margin-top: -18px;
+  margin-top: -28px;
   width: calc(100% - 40px);
 
   .el-alert__closebtn {
@@ -110,4 +124,76 @@ export default {
   }
 }
 
+.ticket-panel {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  margin-right: 20px;
+  flex-shrink: 0;
+  width: auto;
+
+  &.collapsed {
+    margin-right: 0;
+  }
+
+  &__wrapper {
+    width: 380px;
+    background: #fff;
+    border-radius: 4px;
+    overflow: hidden;
+    transition: width 0.3s ease, opacity 0.2s ease, visibility 0.2s ease;
+  }
+
+  &.collapsed &__wrapper {
+    width: 0;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &__title {
+    padding: 12px 16px 8px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  &__toggle {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    margin-top: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    z-index: 10;
+    color: #909399;
+    transition: color 0.2s ease, background 0.2s ease;
+    position: absolute;
+    right: 0;
+
+    &.is-collapsed {
+      right: -20px;
+    }
+
+    &:hover {
+      color: #409eff;
+      background: #ecf5ff;
+    }
+
+    i {
+      font-size: 14px;
+    }
+  }
+}
+
+.sale-main {
+  flex: 1;
+  min-width: 0;
+}
+
 </style>