From 441a412817f01a1847b48dc4423c0d740a77f749 Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Tue, 13 Sep 2022 20:26:17 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20icon=E4=BD=BF=E7=94=A8editor?=
 =?UTF-8?q?=E5=B0=81=E8=A3=85=E7=9A=84icon=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layouts/sidebar/code-block/CodeBlockList.vue  | 11 ++++++-----
 packages/editor/src/theme/code-block.scss             |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index 5dd31bc3..c3c3fd17 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -13,11 +13,11 @@
         <div class="list-item">
           <div class="code-name">{{ value.name }}（{{ key }}）</div>
           <div class="right-tool">
-            <el-tooltip effect="dark" content="编辑" placement="top">
-              <el-icon class="edit-icon" @click="editCode(key)"><Edit /></el-icon>
+            <el-tooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="top">
+              <Icon :icon="editable ? Edit : View" class="edit-icon" @click="editCode(key)"></Icon>
             </el-tooltip>
-            <el-tooltip effect="dark" content="删除" placement="top">
-              <el-icon class="edit-icon" @click="deleteCode(key)"><Close /></el-icon>
+            <el-tooltip effect="dark" content="删除" placement="top" v-if="editable">
+              <Icon :icon="Close" class="edit-icon" @click="deleteCode(key)"></Icon>
             </el-tooltip>
             <slot name="code-block-panel-tool" :id="key"></slot>
           </div>
@@ -36,10 +36,11 @@
 
 <script lang="ts" setup>
 import { computed, inject, ref, watchEffect } from 'vue';
-import { Close, Edit } from '@element-plus/icons-vue';
+import { Close, Edit, View } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { flattenDeep, isEmpty, values } from 'lodash-es';
 
+import Icon from '../../../components/Icon.vue';
 import type { CodeBlockContent, Services } from '../../../type';
 import { CodeBlockDSL, EditorMode } from '../../../type';
 
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
index 39870a66..b9d11335 100644
--- a/packages/editor/src/theme/code-block.scss
+++ b/packages/editor/src/theme/code-block.scss
@@ -24,7 +24,7 @@
         display: flex;
         align-items: center;
         .edit-icon {
-          padding: 0 5px;
+          margin: 0 5px;
         }
       }
       .code-name {