tab右键菜单

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)

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>