From e5c13e9e76870b0a466ef893c5ac6c2680b0678a Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 25 Apr 2023 11:31:09 +0800
Subject: [PATCH] =?UTF-8?q?style(editor):=20=E5=B0=86code-block=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E6=8A=BD=E7=A6=BB=E6=88=90dep-list=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/icons/AppManageIcon.vue   |  2 +-
 packages/editor/src/icons/CodeIcon.vue        | 11 +--
 .../sidebar/code-block/CodeBlockList.vue      |  8 +--
 packages/editor/src/theme/code-block.scss     | 70 ++-----------------
 packages/editor/src/theme/dep-list.scss       | 59 ++++++++++++++++
 packages/editor/src/theme/theme.scss          |  1 +
 6 files changed, 70 insertions(+), 81 deletions(-)
 create mode 100644 packages/editor/src/theme/dep-list.scss

diff --git a/packages/editor/src/icons/AppManageIcon.vue b/packages/editor/src/icons/AppManageIcon.vue
index 46ad5ecf..85047145 100644
--- a/packages/editor/src/icons/AppManageIcon.vue
+++ b/packages/editor/src/icons/AppManageIcon.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- app-manage cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/console_aside_v4/6638c8a5-2e7f-477a-83b1-a413a0e4ba39.svg -->
-  <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <svg xmlns="http://www.w3.org/2000/svg">
     <g fill="#7C878E" fill-rule="evenodd">
       <path d="M15.3,5.5 L8,0 L0.7,5.5 L8,11 L15.3,5.5 Z M8,2.5 L12,5.5 L8,8.5 L4,5.5 L8,2.5 Z" fill-rule="nonzero" />
       <path d="M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" />
diff --git a/packages/editor/src/icons/CodeIcon.vue b/packages/editor/src/icons/CodeIcon.vue
index 58a4b50f..5690490a 100644
--- a/packages/editor/src/icons/CodeIcon.vue
+++ b/packages/editor/src/icons/CodeIcon.vue
@@ -1,16 +1,7 @@
 <template>
   <!-- 代码icon，cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/government/0d463ed5-6407-4498-8865-3d05b5e70115.svg -->
-  <svg
-    width="32px"
-    height="32px"
-    viewBox="0 0 32 32"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-  >
+  <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
-    <title>gsd-icon-line-Universal-code</title>
-    <desc>Created with Sketch.</desc>
     <defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs>
     <g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
       <g id="03图标" transform="translate(-561.000000, -2356.000000)">
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index 0f29228b..1412b87b 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -1,7 +1,7 @@
 <template>
-  <TMagicScrollbar class="m-editor-code-block-list">
+  <TMagicScrollbar class="m-editor-code-block-list m-editor-dep-list-panel">
     <slot name="code-block-panel-header">
-      <div class="code-header-wrapper">
+      <div class="search-wrapper">
         <SearchInput @search="filterTextChangeHandler"></SearchInput>
         <TMagicButton class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
           >新增</TMagicButton
@@ -27,8 +27,8 @@
           <div class="list-item">
             <CodeIcon v-if="data.type === 'code'" class="codeIcon"></CodeIcon>
             <AppManageIcon v-if="data.type === 'node'" class="compIcon"></AppManageIcon>
-            <span class="code-name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
-              >{{ data.name }}（{{ data.id }}）</span
+            <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
+              >{{ data.name }} ({{ data.id }})</span
             >
             <!-- 右侧工具栏 -->
             <div class="right-tool" v-if="data.type === 'code'">
diff --git a/packages/editor/src/theme/code-block.scss b/packages/editor/src/theme/code-block.scss
index 6a0f7a08..8fb8fd72 100644
--- a/packages/editor/src/theme/code-block.scss
+++ b/packages/editor/src/theme/code-block.scss
@@ -1,81 +1,19 @@
 .m-editor-code-block-list {
   height: 100%;
 
-  .magic-editor-layer-tree {
-    padding-top: 48px;
-  }
-
-  .code-header-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 1;
-
-    .search-input {
-      flex: 1;
-      position: relative;
-    }
-
-    .create-code-button {
-      margin-left: 2px;
-      margin-right: 10px;
-    }
-  }
-
-  .divider {
-    margin: 10px 0 0 0;
-  }
-
   .list-container {
-    width: 100%;
-    overflow: hidden;
     .list-item {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      align-items: center;
-
-      .right-tool {
-        display: flex;
-        width: fit-content !important;
-        align-items: center;
-        margin-right: 10px;
-        .edit-icon {
-          margin: 0 5px;
-        }
-      }
-
       .codeIcon {
-        width: 20px;
-        height: 20px;
+        width: 22px;
+        height: 22px;
         margin-right: 5px;
       }
 
       .compIcon {
-        width: 15px;
-        height: 15px;
+        width: 22px;
+        height: 22px;
         margin-right: 5px;
       }
-
-      .code-name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 0 !important;
-        flex: 1;
-        line-height: 22px;
-
-        &.code {
-          color: #000;
-        }
-
-        &.hook {
-          color: #909399;
-        }
-      }
     }
   }
 }
diff --git a/packages/editor/src/theme/dep-list.scss b/packages/editor/src/theme/dep-list.scss
new file mode 100644
index 00000000..19c8a4ec
--- /dev/null
+++ b/packages/editor/src/theme/dep-list.scss
@@ -0,0 +1,59 @@
+.m-editor-dep-list-panel {
+  .magic-editor-layer-tree {
+    padding-top: 48px;
+  }
+
+  .search-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+
+    .search-input {
+      flex: 1;
+      position: relative;
+    }
+
+    .tmagic-design-button {
+      margin-right: 10px;
+    }
+  }
+
+  .list-container {
+    width: 100%;
+    overflow: hidden;
+    .list-item {
+      display: flex;
+      width: 100%;
+      align-items: center;
+
+      .right-tool {
+        display: flex;
+        width: fit-content !important;
+        align-items: center;
+        .edit-icon {
+          margin: 0 5px;
+        }
+      }
+      .name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 0 !important;
+        flex: 1;
+        line-height: 22px;
+
+        &.code {
+          color: #000;
+        }
+
+        &.hook {
+          color: #909399;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/editor/src/theme/theme.scss b/packages/editor/src/theme/theme.scss
index dac2f7a3..de99bd79 100644
--- a/packages/editor/src/theme/theme.scss
+++ b/packages/editor/src/theme/theme.scss
@@ -16,3 +16,4 @@
 @import "./event.scss";
 @import "./layout.scss";
 @import "./breadcrumb.scss";
+@import "./dep-list.scss";