From 66cbfa3f0d87c7383042d8fec2f226f9866ccbc2 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Fri, 29 Nov 2019 18:21:59 +0800
Subject: [PATCH] =?UTF-8?q?tab=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/FileTabs.vue |  9 ++++---
 frontend/src/components/Tabs.vue     | 36 +++++++++++++++++++++++-----
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/FileTabs.vue b/frontend/src/components/FileTabs.vue
index 9dde3229..3e1c4e48 100644
--- a/frontend/src/components/FileTabs.vue
+++ b/frontend/src/components/FileTabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <Tabs :list="list" :value="current" @remove="removeTab" @switch="switchTab"></Tabs>
+  <Tabs :list="list" :value="current" @remove="removeTabs" @switch="switchTab"></Tabs>
 </template>
 
 <script>
@@ -22,10 +22,9 @@ export default {
     switchTab (item) {
       this.switchFile(item.payload.file)
     },
-    removeTab (item) {
-      const uri = File.toUri(item.payload.file)
-      const list = this.list.filter(x => x.key !== uri)
-      this.list = list
+    removeTabs (items) {
+      const keys = items.map(x => x.key)
+      this.list = this.list.filter(x => keys.indexOf(x.key) === -1)
     },
     addTab (item) {
       const tab = this.list.find(x => item.key === x.key)
diff --git a/frontend/src/components/Tabs.vue b/frontend/src/components/Tabs.vue
index ad4044a9..35f5e246 100644
--- a/frontend/src/components/Tabs.vue
+++ b/frontend/src/components/Tabs.vue
@@ -5,9 +5,10 @@
       :key="item.key"
       :class="{tab: true, current: item.key === value}"
       :title="item.description"
+      @contextmenu.exact.prevent.stop="showContextMenu(item)"
       @click="switchTab(item)">
       <div class="label">{{item.label}}</div>
-      <div class="close" @click.prevent.stop="removeTab(item)">
+      <div class="close" @click.prevent.stop="removeTabs([item])">
         <y-icon class="close-icon" name="times" title="关闭"></y-icon>
       </div>
     </div>
@@ -24,13 +25,36 @@ export default {
     list: Array,
   },
   methods: {
+    showContextMenu (item) {
+      this.$contextMenu.show([
+        { id: 'close', label: '关闭', onClick: () => this.removeTabs([item]) },
+        { id: 'close-other', label: '关闭其他', onClick: () => this.removeOther(item) },
+        { id: 'close-right', label: '关闭到右侧', onClick: () => this.removeRight(item) },
+        { id: 'close-left', label: '关闭到左侧', onClick: () => this.removeLeft(item) },
+        { id: 'close-all', label: '全部关闭', onClick: () => this.removeAll(item) },
+      ])
+    },
     switchTab (item) {
-      this.$emit('input', item.key)
-      this.$emit('switch', item)
+      if (item.key !== this.value) {
+        this.$emit('input', item.key)
+        this.$emit('switch', item)
+      }
+    },
+    removeOther (item) {
+      this.removeTabs(this.list.filter(x => x.key !== item.key))
+    },
+    removeRight (item) {
+      this.removeTabs(this.list.slice(this.list.findIndex(x => x.key === item.key) + 1))
+    },
+    removeLeft (item) {
+      this.removeTabs(this.list.slice(0, this.list.findIndex(x => x.key === item.key)))
+    },
+    removeAll () {
+      this.removeTabs(this.list)
+    },
+    removeTabs (items) {
+      this.$emit('remove', items)
     },
-    removeTab (item) {
-      this.$emit('remove', item)
-    }
   },
 }
 </script>