style(editor): 组件列表与组件树搜索框样式调整

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';

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';
 

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;
     }
   }
 

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;