From 27d8640fbc48184e4f73aac180f4f35638f92a1a Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Fri, 16 Sep 2022 18:03:47 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/fields/CodeSelect.vue     | 29 +++++++++++++------
 .../sidebar/code-block/CodeBlockEditor.vue    |  2 +-
 packages/editor/src/theme/code-block.scss     | 12 +++++---
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
index 9a8b337a4..c9d6a2242 100644
--- a/packages/editor/src/fields/CodeSelect.vue
+++ b/packages/editor/src/fields/CodeSelect.vue
@@ -12,14 +12,21 @@
         ></m-fields-select>
       </template>
       <div class="tool-bar">
-        <el-button
-          type="primary"
-          :icon="View"
-          :size="size"
-          @click="viewHandler"
-          :disabled="props.model[props.name].length === 0"
-          >查看</el-button
-        >
+        <el-tooltip class="tool-item" effect="dark" content="查看源代码" placement="top">
+          <svg
+            @click="viewHandler"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+            width="15px"
+            height="15px"
+            data-v-65a7fb6c=""
+          >
+            <path
+              fill="currentColor"
+              d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
+            ></path>
+          </svg>
+        </el-tooltip>
       </div>
     </el-card>
   </div>
@@ -27,7 +34,7 @@
 
 <script lang="ts" setup>
 import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
-import { View } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
 import { map } from 'lodash-es';
 
 import { SelectConfig } from '@tmagic/form';
@@ -104,6 +111,10 @@ const setCombineRelation = async (selectedIds: string[] | string) => {
 };
 
 const viewHandler = async () => {
+  if (props.model[props.name].length === 0) {
+    ElMessage.error('请先绑定代码块');
+    return;
+  }
   await setCombineRelation(props.model[props.name]);
   await services?.codeBlockService.setMode(EditorMode.LIST);
   services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]);
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
index 58739e161..1c927a14a 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -42,7 +42,7 @@
         <template #header>
           <div class="code-name-wrapper">
             <div class="code-name-label">代码块名称</div>
-            <el-input class="code-name-input" size="small" v-model="codeConfig.name" :disabled="!editable" />
+            <el-input class="code-name-input" v-model="codeConfig.name" :disabled="!editable" />
           </div>
         </template>
         <div class="m-editor-wrapper">
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
index 361049abf..0a473356d 100644
--- a/packages/editor/src/theme/code-block.scss
+++ b/packages/editor/src/theme/code-block.scss
@@ -32,7 +32,6 @@
         position: absolute;
         right: 15px;
         padding-left: 5px;
-        background-color: #fff;
         display: flex;
         align-items: center;
         .edit-icon {
@@ -54,12 +53,17 @@
 .m-fields-code-select {
   width: 100%;
   .el-card__body {
-    padding: 10px;
+    padding: 5px;
   }
   .tool-bar {
     display: flex;
     align-items: center;
     justify-content: end;
+    height: 20px;
+    .tool-item {
+      display: flex;
+      align-items: center;
+    }
   }
 }
 .code-editor-dialog {
@@ -105,11 +109,11 @@
   }
 
   .code-name-wrapper {
-    margin: 10px 0 10px 10px;
     display: flex;
     align-items: center;
+    font-size: 16px;
     .code-name-label {
-      width: 80px;
+      margin-right: 10px;
     }
     .code-name-input {
       width: 300px;