fix: 优化Station Operation左侧列表页，收起/展开放到右上角，collapse头部图标增加展开动画

src/views/stationOperation/index.vue

@@ -4,7 +4,7 @@
     <div :class="'data-container' + (!leftPaneShow ? ' hide' : '')">
       <a-collapse v-model="activeKey" expandIconPosition="right" accordion>
         <template slot="expandIcon">
-          <img src="@/assets/images/station-operation/toggle.png" alt="" @click.stop="leftPaneShow = false" />
+          <img src="@/assets/images/station-operation/toggle.png" alt="" />
         </template>
         <!-- All Data -->
         <a-collapse-panel key="1">
@@ -132,8 +132,9 @@
       </a-collapse>
 
       <!-- 展开左侧配置栏按钮开始 -->
-      <div class="toggle-show-btn" v-if="!leftPaneShow">
-        <img src="@/assets/images/station-operation/toggle-2.png" @click="leftPaneShow = true" />
+      <div class="toggle-show-btn" @click="leftPaneShow = !leftPaneShow">
+        <a-icon v-if="leftPaneShow" type="menu-fold" />
+        <a-icon v-else type="menu-unfold" />
       </div>
       <!-- 展开左侧配置栏按钮结束 -->
     </div>
@@ -275,6 +276,7 @@ export default {
 
     // 显示搜索栏
     handleShowSearch() {
+      this.activeKey = 1
       if (this.filterVisible) {
         this.searchVisible = true
         this.filterVisible = false
@@ -289,6 +291,7 @@ export default {
 
     // 显示筛选栏
     handleShowFilter() {
+      this.activeKey = 1
       if (this.searchVisible) {
         this.searchVisible = false
         this.filterVisible = true
@@ -402,15 +405,22 @@ export default {
 
     .toggle-show-btn {
       position: absolute;
-      right: -20px;
-      top: 50%;
-      transform: translateY(-50%);
+      right: -40px;
+      top: 10px;
       cursor: pointer;
+      font-size: 20px;
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      color: #00E9FE;
+      background-color: #021a1d;
     }
 
     ::v-deep {
       .ant-collapse {
         height: 100%;
+        padding-top: 10px;
         padding-bottom: 11px;
 
         @titleHeight: 45px;
@@ -418,6 +428,12 @@ export default {
           max-height: calc(100% - @titleHeight);
           display: flex;
           flex-direction: column;
+
+          &-active {
+            .ant-collapse-arrow {
+              transform: translateY(-50%) rotate(-90deg)
+            }
+          }
         }
 
         &-header {
@@ -426,11 +442,11 @@ export default {
           border-bottom: 4px solid rgba(12, 235, 201, 0.2);
           height: auto;
           background-color: rgba(1, 18, 20, 0.6);
+          padding-right: 25px;
 
           .ant-collapse-arrow {
             right: 9px;
             transition: transform 0.24s;
-            transform-origin: 5px 11px;
           }
         }
 
@@ -581,6 +597,7 @@ export default {
         height: 50px;
         background: linear-gradient(to top, #021c21 0, transparent 100%);
         transition: opacity 0.24s linear;
+        pointer-events: none;
       }
       &.scroll-end {
         .shadow {