feat(editor): 代码块功能新增slot

Tencent · Sep 22, 2022 · 452c80d · 452c80d
1 parent 2a8cfe5
commit 452c80d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -16,19 +16,24 @@
     .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;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         padding: 10px 15px;
-        margin-right: 15px;
+        margin-right: 60px;
       }
     }
   }