From 41cd22b17f0d434016254cddda949651c21a65e3 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 10 Apr 2023 20:31:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E4=BB=A3=E7=A0=81=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=BB=98=E8=AE=A4=E5=8F=AA=E5=B1=95=E5=BC=80=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/components/CodeIcon.vue   | 21 +++++++++++++++++++
 .../sidebar/code-block/CodeBlockList.vue      |  7 ++++++-
 packages/editor/src/theme/code-block.scss     |  1 +
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 packages/editor/src/components/CodeIcon.vue

diff --git a/packages/editor/src/components/CodeIcon.vue b/packages/editor/src/components/CodeIcon.vue
new file mode 100644
index 00000000..e13cfd72
--- /dev/null
+++ b/packages/editor/src/components/CodeIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg width="2em" height="2em" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.94034 2.55798L6.09333 13.1832L7.05925 13.442L9.90626 2.8168L8.94034 2.55798Z"
+      fill="currentColor"
+      fill-opacity="0.9"
+    ></path>
+    <path
+      d="M2.14982 8.00001L5.57495 11.4251L4.86784 12.1323L1.15987 8.42428C0.925551 8.18996 0.925553 7.81006 1.15987 7.57575L4.86784 3.86777L5.57495 4.57488L2.14982 8.00001Z"
+      fill="currentColor"
+      fill-opacity="0.9"
+    ></path>
+    <path
+      d="M13.846 8.00001L10.4054 11.4016L11.1085 12.1127L14.8368 8.42668C15.0744 8.19183 15.0744 7.80819 14.8368 7.57333L11.1085 3.88732L10.4054 4.59845L13.846 8.00001Z"
+      fill="currentColor"
+      fill-opacity="0.9"
+    ></path>
+  </svg>
+</template>
+
+<script lang="ts" setup name="MEditorCodeIcon"></script>
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index d0cb362e..54033642 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -15,7 +15,7 @@
       class="magic-editor-layer-tree"
       node-key="id"
       empty-text="暂无代码块"
-      default-expand-all
+      :default-expanded-keys="expandedKeys"
       :expand-on-click-node="false"
       :data="codeList"
       :highlight-current="true"
@@ -25,6 +25,7 @@
       <template #default="{ data }">
         <div :id="data.id" class="list-container">
           <div class="list-item">
+            <CodeIcon style="width: 15px; margin-right: 5px" v-if="data.type === 'code'"></CodeIcon>
             <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
             <!-- 右侧工具栏 -->
             <div class="right-tool" v-if="data.type === 'code'">
@@ -58,6 +59,7 @@ import { TMagicButton, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree
 import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent, Id } from '@tmagic/schema';
 
+import CodeIcon from '@editor/components/CodeIcon.vue';
 import Icon from '@editor/components/Icon.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
@@ -87,6 +89,9 @@ const codeList = computed(() =>
   })),
 );
 
+// 默认展开节点
+const expandedKeys = computed(() => codeList.value.map((item) => item.id));
+
 const editable = computed(() => codeBlockService?.getEditStatus());
 
 // 是否展示代码编辑区
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
index 59a57247..80be261c 100644
--- a/packages/editor/src/theme/code-block.scss
+++ b/packages/editor/src/theme/code-block.scss
@@ -34,6 +34,7 @@
     overflow: hidden;
     .list-item {
       display: flex;
+      align-items: center;
       width: 100%;
 
       .right-tool {