fix(editor): 样式优化

Tencent · Sep 22, 2022 · 27d8640 · 27d8640
1 parent a452cec
commit 27d8640
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
@@ -12,22 +12,29 @@
         ></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>
 </template>
 
 <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
@@ -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
@@ -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;