From a8a34c662c0d8f2954baf22601e0a7b9e64c582a Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 14 May 2025 16:42:14 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20ele=20infra=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E9=A2=84=E8=A7=88=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../infra/codegen/modules/preview-code.vue    | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue b/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
index 84cad085..e3332428 100644
--- a/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
+++ b/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
@@ -1,14 +1,16 @@
 <script lang="ts" setup>
+import type { TabPaneName } from 'element-plus';
+
 // TODO @芋艿：待定，vben2.0 有 CodeEditor，不确定官方后续会不会迁移！！！
 import type { InfraCodegenApi } from '#/api/infra/codegen';
 
-import { h, ref } from 'vue';
+import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { Copy } from '@vben/icons';
 
 import { useClipboard } from '@vueuse/core';
-import { ElButton, ElMessage, ElTabPane, ElTabs, ElTree } from 'element-plus';
+import { ElMessage, ElTabPane, ElTabs, ElTree } from 'element-plus';
 import hljs from 'highlight.js/lib/core';
 import java from 'highlight.js/lib/languages/java';
 import javascript from 'highlight.js/lib/languages/javascript';
@@ -69,6 +71,22 @@ const removeCodeMapKey = (targetKey: any) => {
     codeMap.value.delete(targetKey);
   }
 };
+const handleTabsEdit = (
+  targetName: TabPaneName | undefined,
+  action: 'add' | 'remove',
+) => {
+  switch (action) {
+    case 'add': {
+      // el-tab 原生添加的位置用来放复制图标了，所以添加就是复制
+      copyCode();
+      break;
+    }
+    case 'remove': {
+      removeCodeMapKey(targetName);
+      break;
+    }
+  }
+};
 
 /** 复制代码 */
 const copyCode = async () => {
@@ -245,16 +263,12 @@ const [Modal, modalApi] = useVbenModal({
       </div>
       <!-- 代码预览 -->
       <div class="h-full w-2/3 overflow-auto pl-4">
-        <ElTabs
-          v-model="activeKey"
-          type="card"
-          closable
-          @tab-remove="removeCodeMapKey"
-        >
+        <ElTabs v-model="activeKey" type="card" editable @edit="handleTabsEdit">
           <ElTabPane
             v-for="key in codeMap.keys()"
             :key="key"
             :label="key.split('/').pop()"
+            :name="key"
           >
             <div
               class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
@@ -266,10 +280,8 @@ const [Modal, modalApi] = useVbenModal({
               ></code>
             </div>
           </ElTabPane>
-          <template #extra>
-            <ElButton type="primary" @click="copyCode" :icon="h(Copy)">
-              复制代码
-            </ElButton>
+          <template #add-icon>
+            <Copy />
           </template>
         </ElTabs>
       </div>