From 6caa8cdb79c98607cd4d1354ee6eef2eb420b5b1 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 13 Oct 2022 18:47:07 +0800
Subject: [PATCH] =?UTF-8?q?style(editor):=20=E7=BB=84=E4=BB=B6=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E4=B8=8E=E7=BB=84=E4=BB=B6=E6=A0=91=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=A1=86=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/layouts/sidebar/ComponentListPanel.vue  |  4 ++--
 packages/editor/src/layouts/sidebar/LayerPanel.vue     |  7 +++++--
 packages/editor/src/theme/component-list-panel.scss    | 10 +++-------
 packages/editor/src/theme/layer-panel.scss             |  9 +++++++--
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
index c78eb087..ffda74d5 100644
--- a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
@@ -4,11 +4,11 @@
 
     <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
       <TMagicInput
-        prefix-icon="el-icon-search"
         placeholder="输入关键字进行过滤"
         class="search-input"
         size="small"
         clearable
+        :prefix-icon="Search"
         v-model="searchText"
       />
       <template v-for="(group, index) in list">
@@ -40,7 +40,7 @@
 
 <script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
-import { Grid } from '@element-plus/icons-vue';
+import { Grid, Search } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
 import { TMagicCollapse, TMagicCollapseItem, TMagicInput, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
diff --git a/packages/editor/src/layouts/sidebar/LayerPanel.vue b/packages/editor/src/layouts/sidebar/LayerPanel.vue
index 46268c2a..1de7442f 100644
--- a/packages/editor/src/layouts/sidebar/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/LayerPanel.vue
@@ -7,16 +7,18 @@
     <slot name="layer-panel-header"></slot>
 
     <TMagicInput
-      class="filterInput"
+      v-model="filterText"
+      class="search-input"
       size="small"
       placeholder="输入关键字进行过滤"
       clearable
-      v-model="filterText"
+      :prefix-icon="Search"
       @change="filterTextChangeHandler"
     ></TMagicInput>
 
     <TMagicTree
       v-if="values.length"
+      class="magic-editor-layer-tree"
       ref="tree"
       node-key="id"
       empty-text="页面空荡荡的"
@@ -65,6 +67,7 @@
 
 <script lang="ts" setup>
 import { computed, inject, ref, watch } from 'vue';
+import { Search } from '@element-plus/icons-vue';
 import KeyController from 'keycon';
 import { throttle } from 'lodash-es';
 
diff --git a/packages/editor/src/theme/component-list-panel.scss b/packages/editor/src/theme/component-list-panel.scss
index 65e3459f..6846bada 100644
--- a/packages/editor/src/theme/component-list-panel.scss
+++ b/packages/editor/src/theme/component-list-panel.scss
@@ -1,11 +1,11 @@
 .ui-component-panel {
   height: 100%;
   border-top: 0 !important;
-  margin-top: 50px;
+  margin-top: 48px;
   background-color: $--sidebar-content-background-color;
 
   .search-input {
-    background: #f8fbff;
+    background: #fff;
     color: #bbbbbb;
     padding: 10px;
     position: absolute;
@@ -15,11 +15,7 @@
     z-index: 1;
 
     .el-input__prefix {
-      padding: 10px;
-    }
-
-    .el-input__suffix {
-      padding: 10px 5px;
+      padding: 7px;
     }
   }
 
diff --git a/packages/editor/src/theme/layer-panel.scss b/packages/editor/src/theme/layer-panel.scss
index 5b7a21be..4819ccf8 100644
--- a/packages/editor/src/theme/layer-panel.scss
+++ b/packages/editor/src/theme/layer-panel.scss
@@ -10,10 +10,15 @@
     left: 0;
     z-index: 1;
 
-    .el-input__suffix {
-      padding: 10px 5px;
+    .el-input__prefix {
+      padding: 7px;
     }
   }
+
+  .magic-editor-layer-tree {
+    padding-top: 48px;
+  }
+
   .node-content {
     flex: 1;
     display: flex;