From 431f6aa9668c42c77e92c5bff56a72a7b897d8d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Tue, 20 May 2025 14:45:08 +0800
Subject: [PATCH] feat: code editor tab component (#8751)

---
 .../code-editor/tabs/index.vue                | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 frontend/src/views/host/file-management/code-editor/tabs/index.vue

diff --git a/frontend/src/views/host/file-management/code-editor/tabs/index.vue b/frontend/src/views/host/file-management/code-editor/tabs/index.vue
new file mode 100644
index 000000000..c30419cd3
--- /dev/null
+++ b/frontend/src/views/host/file-management/code-editor/tabs/index.vue
@@ -0,0 +1,84 @@
+<template>
+    <el-tabs
+        v-model="props.selectTab"
+        type="card"
+        :closable="props.fileTabs.length > 1"
+        class="monaco-editor monaco-editor-background"
+        @tab-remove="props.onRemoveTab"
+        @tab-change="props.onChangeTab"
+    >
+        <el-tab-pane v-for="item in props.fileTabs" :key="item.path" :name="item.path">
+            <template #label>
+                <el-dropdown
+                    size="small"
+                    :id="item.path"
+                    :ref="(el) => setDropdownRef(item.path, el)"
+                    trigger="contextmenu"
+                    placement="bottom"
+                    @visible-change="(visible) => onDropdownVisibleChange(visible, item.path)"
+                >
+                    <span class="el-dropdown-link">
+                        <el-tooltip :content="item.path" placement="bottom-start">
+                            {{ item.name }}
+                        </el-tooltip>
+                    </span>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item @click="props.onRemoveTab(item.path)">
+                                <el-icon><Close /></el-icon>
+                                {{ $t('commons.button.close') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item @click="props.onRemoveAllTab(item.path, 'left')">
+                                <el-icon><DArrowLeft /></el-icon>
+                                {{ $t('tabs.closeLeft') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item @click="props.onRemoveAllTab(item.path, 'right')">
+                                <el-icon><DArrowRight /></el-icon>
+                                {{ $t('tabs.closeRight') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item @click="props.onRemoveOtherTab(item.path)">
+                                <el-icon><More /></el-icon>
+                                {{ $t('tabs.closeOther') }}
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </template>
+        </el-tab-pane>
+    </el-tabs>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface FileTabs {
+    path: string;
+    name: string;
+}
+
+const props = defineProps({
+    selectTab: String,
+    fileTabs: Array<FileTabs>,
+    onRemoveTab: Function,
+    onChangeTab: Function,
+    onRemoveAllTab: Function,
+    onRemoveOtherTab: Function,
+});
+const dropdownRefs = ref<Record<string, any>>({});
+
+const setDropdownRef = (path: string, el: any) => {
+    if (el) {
+        dropdownRefs.value[path] = el;
+    }
+};
+
+const onDropdownVisibleChange = (visible: boolean, currentPath: string) => {
+    if (visible) {
+        for (const path in dropdownRefs.value) {
+            if (path !== currentPath) {
+                dropdownRefs.value[path]?.handleClose?.();
+            }
+        }
+    }
+};
+</script>