From 452c80d829e3e127a51ac9c5cb1356bc4eafba61 Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Wed, 7 Sep 2022 16:38:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E4=BB=A3=E7=A0=81=E5=9D=97?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9Eslot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/Editor.vue                |  4 ++++
 .../editor/src/layouts/sidebar/Sidebar.vue    |  4 ++++
 .../editor/src/layouts/sidebar/TabPane.vue    |  5 +++++
 .../sidebar/code-block/CodeBlockList.vue      | 22 +++++++++++--------
 packages/editor/src/theme/code-block.scss     |  9 ++++++--
 5 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index b1722111..8f32d367 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -26,6 +26,10 @@
           <template #code-block-panel-header>
             <slot name="code-block-panel-header"></slot>
           </template>
+
+          <template #code-block-panel-tool>
+            <slot name="code-block-panel-tool"></slot>
+          </template>
         </sidebar>
       </slot>
     </template>
diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index 906ff81d..73220243 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -26,6 +26,10 @@
       <template #code-block-panel-header v-if="item === 'code-block'">
         <slot name="code-block-panel-header"></slot>
       </template>
+
+      <template #code-block-panel-tool v-if="item === 'code-block'">
+        <slot name="code-block-panel-tool"></slot>
+      </template>
     </tab-pane>
   </el-tabs>
 </template>
diff --git a/packages/editor/src/layouts/sidebar/TabPane.vue b/packages/editor/src/layouts/sidebar/TabPane.vue
index b40c92f0..c9dc8d4e 100644
--- a/packages/editor/src/layouts/sidebar/TabPane.vue
+++ b/packages/editor/src/layouts/sidebar/TabPane.vue
@@ -35,6 +35,11 @@
         <component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" />
       </template>
 
+      <template #code-block-panel-tool v-if="data === 'code-block' || config.slots?.codeBlockPanelTool">
+        <slot v-if="data === 'code-block'" name="code-block-panel-tool"></slot>
+        <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
+      </template>
+
       <template
         #layer-node-content="{ data: nodeData, node }"
         v-if="data === 'layer' || config.slots?.layerNodeContent"
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index e7041295..25b2e8f7 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -1,19 +1,23 @@
 <template>
   <div class="m-editor-code-block-list">
-    <slot name="code-block-panel-header"></slot>
-    <div class="create-code-button">
-      <el-button type="primary" size="small" @click="createCodeBlock">新增代码块</el-button>
-    </div>
-    <el-divider class="divider" />
+    <slot name="code-block-panel-header">
+      <div class="create-code-button">
+        <el-button type="primary" size="small" @click="createCodeBlock">新增代码块</el-button>
+      </div>
+      <el-divider class="divider" />
+    </slot>
 
     <!-- 代码块列表 -->
     <div class="list-container" v-if="state.codeBlockMap">
       <div v-for="(value, key) in state.codeBlockMap" :key="key">
         <div class="list-item">
           <div class="code-name">{{ value.name }}（{{ key }}）</div>
-          <el-tooltip class="box-item" effect="dark" content="编辑代码" placement="top">
-            <el-icon class="edit-icon" @click="editCode(key)"><EditPen /></el-icon>
-          </el-tooltip>
+          <div class="right-tool">
+            <el-tooltip effect="dark" content="编辑代码" placement="top">
+              <el-icon class="edit-icon" @click="editCode(key)"><Edit /></el-icon>
+            </el-tooltip>
+            <slot name="code-block-panel-tool"></slot>
+          </div>
         </div>
       </div>
     </div>
@@ -25,7 +29,7 @@
 
 <script lang="ts" setup>
 import { inject, reactive, watchEffect } from 'vue';
-import { EditPen } from '@element-plus/icons-vue';
+import { Edit } from '@element-plus/icons-vue';
 
 import type { CodeBlockConfig, Services, State } from '../../../type';
 
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
index 6f80abf8..df13c5c5 100644
--- a/packages/editor/src/theme/code-block.scss
+++ b/packages/editor/src/theme/code-block.scss
@@ -16,11 +16,16 @@
     .list-item {
       display: flex;
       align-items: center;
-      .edit-icon {
+      .right-tool {
         position: absolute;
         right: 15px;
         padding-left: 5px;
         background-color: #fff;
+        display: flex;
+        align-items: center;
+        .edit-icon {
+          padding: 0 5px;
+        }
       }
       .code-name {
         font-size: 14px;
@@ -28,7 +33,7 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         padding: 10px 15px;
-        margin-right: 15px;
+        margin-right: 60px;
       }
     }
   }