From 64c03fd6860c4dff663dfd12b8bf5932184b0da0 Mon Sep 17 00:00:00 2001
From: chuzhixin <1204505056@qq.com>
Date: Tue, 6 Oct 2020 00:25:04 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=E5=A4=9A=E6=A0=87=E7=AD=BE=E9=A1=B5?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E6=89=8B=E6=9C=BA=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/vab-tabs/index.vue | 95 +++++++++++++++++++----------------
 1 file changed, 53 insertions(+), 42 deletions(-)

diff --git a/src/layout/vab-tabs/index.vue b/src/layout/vab-tabs/index.vue
index edac8e6..865e992 100644
--- a/src/layout/vab-tabs/index.vue
+++ b/src/layout/vab-tabs/index.vue
@@ -1,47 +1,45 @@
 <template>
   <div class="vab-tabs">
-    <a-row type="flex">
-      <a-col flex="auto">
-        <a-tabs
-          @tab-click="handleTabClick"
-          @edit="handleTabRemove"
-          v-model:activeKey="tabActive"
-          hide-add
-          type="editable-card"
-        >
-          <a-tab-pane
-            v-for="item in visitedRoutes"
-            :key="item.fullPath"
-            :closable="!isAffix(item)"
-            :tab="item.meta.title"
-          ></a-tab-pane>
-        </a-tabs>
-      </a-col>
-      <a-col flex="88px">
-        <a-dropdown>
-          <template v-slot:overlay>
-            <a-menu @click="handleClick">
-              <a-menu-item key="closeOthersTabs">
-                <a>关闭其他</a>
-              </a-menu-item>
-              <a-menu-item key="closeLeftTabs">
-                <a>关闭左侧</a>
-              </a-menu-item>
-              <a-menu-item key="closeRightTabs">
-                <a>关闭右侧</a>
-              </a-menu-item>
-              <a-menu-item key="closeAllTabs">
-                <a>关闭全部</a>
-              </a-menu-item>
-            </a-menu>
-          </template>
-          <a-button style="margin-left: 8px">
-            更多
-            <DownOutlined />
-          </a-button>
-        </a-dropdown>
-      </a-col>
-    </a-row>
+    <div class="vab-tabs-left-panel">
+      <a-tabs
+        @tab-click="handleTabClick"
+        @edit="handleTabRemove"
+        v-model:activeKey="tabActive"
+        hide-add
+        type="editable-card"
+      >
+        <a-tab-pane
+          v-for="item in visitedRoutes"
+          :key="item.fullPath"
+          :closable="!isAffix(item)"
+          :tab="item.meta.title"
+        ></a-tab-pane>
+      </a-tabs>
+    </div>
+    <div class="vab-tabs-right-panel">
+      <a-dropdown>
+        <template v-slot:overlay>
+          <a-menu @click="handleClick">
+            <a-menu-item key="closeOthersTabs">
+              <a>关闭其他</a>
+            </a-menu-item>
+            <a-menu-item key="closeLeftTabs">
+              <a>关闭左侧</a>
+            </a-menu-item>
+            <a-menu-item key="closeRightTabs">
+              <a>关闭右侧</a>
+            </a-menu-item>
+            <a-menu-item key="closeAllTabs">
+              <a>关闭全部</a>
+            </a-menu-item>
+          </a-menu>
+        </template>
+        <a-button style="margin-left: 8px">
+          更多
+          <DownOutlined />
+        </a-button>
+      </a-dropdown>
+    </div>
   </div>
 </template>
 
@@ -180,6 +178,14 @@
   .vab-tabs {
     padding: 0 @vab-margin;
     background: #ffffff;
+    &-left-panel {
+      float: left;
+      width: calc(100% - 52px - @vab-margin - @vab-margin);
+    }
+    &-right-panel {
+      float: left;
+      width: 52px;
+    }
     .ant-tabs {
       &-bar {
         margin: 0 !important;
@@ -191,6 +197,11 @@
         background: #ffffff !important;
         border: 1px solid #dedede !important;
       }
+      &-tab-prev,
+      &-tab-next {
+        height: 32px !important;
+        line-height: 32px !important;
+      }
       &-tab-active {
         border: 1px solid #1890ff !important;
         .ant-tabs-close-x {