style(editor): 统一左边栏搜索样式

packages/editor/src/components/SearchInput.vue

@@ -0,0 +1,26 @@
+<template>
+  <TMagicInput
+    v-model="filterText"
+    class="search-input"
+    size="small"
+    placeholder="输入关键字进行过滤"
+    clearable
+    :prefix-icon="Search"
+    @input="filterTextChangeHandler"
+  ></TMagicInput>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Search } from '@element-plus/icons-vue';
+
+import { TMagicInput } from '@tmagic/design';
+
+const emit = defineEmits(['search']);
+
+const filterText = ref('');
+
+const filterTextChangeHandler = () => {
+  emit('search', filterText.value);
+};
+</script>

packages/editor/src/layouts/sidebar/ComponentListPanel.vue

@@ -3,14 +3,7 @@
     <slot name="component-list-panel-header"></slot>
 
     <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
-      <TMagicInput
-        placeholder="输入关键字进行过滤"
-        class="search-input"
-        size="small"
-        clearable
-        :prefix-icon="Search"
-        v-model="searchText"
-      />
+      <SearchInput @search="filterTextChangeHandler"></SearchInput>
       <template v-for="(group, index) in list">
         <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
           <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
@@ -40,16 +33,22 @@
 
 <script lang="ts" setup name="MEditorComponentListPanel">
 import { computed, inject, ref } from 'vue';
-import { Grid, Search } from '@element-plus/icons-vue';
+import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
-import { TMagicCollapse, TMagicCollapseItem, TMagicInput, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
+import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
 import MIcon from '../../components/Icon.vue';
+import SearchInput from '../../components/SearchInput.vue';
 import type { ComponentGroup, ComponentItem, Services, StageOptions } from '../../type';
 
 const searchText = ref('');
+
+const filterTextChangeHandler = (v: string) => {
+  searchText.value = v;
+};
+
 const services = inject<Services>('services');
 const stageOptions = inject<StageOptions>('stageOptions');
 

packages/editor/src/layouts/sidebar/LayerPanel.vue

@@ -2,15 +2,7 @@
   <TMagicScrollbar class="magic-editor-layer-panel">
     <slot name="layer-panel-header"></slot>
 
-    <TMagicInput
-      v-model="filterText"
-      class="search-input"
-      size="small"
-      placeholder="输入关键字进行过滤"
-      clearable
-      :prefix-icon="Search"
-      @change="filterTextChangeHandler"
-    ></TMagicInput>
+    <SearchInput @search="filterTextChangeHandler"></SearchInput>
 
     <TMagicTree
       v-if="values.length"
@@ -58,15 +50,15 @@
 
 <script lang="ts" setup name="MEditorLayerPanel">
 import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';
-import { Search } from '@element-plus/icons-vue';
 import KeyController from 'keycon';
 import { difference, throttle, union } from 'lodash-es';
 
-import { TMagicInput, TMagicScrollbar, TMagicTree } from '@tmagic/design';
+import { TMagicScrollbar, TMagicTree } from '@tmagic/design';
 import type { Id, MNode, MPage } from '@tmagic/schema';
 import { MContainer, NodeType } from '@tmagic/schema';
 import { getNodePath, isPage } from '@tmagic/utils';
 
+import SearchInput from '../../components/SearchInput.vue';
 import type { MenuButton, MenuComponent, Services } from '../../type';
 import { Layout } from '../../type';
 
@@ -87,7 +79,6 @@ const menu = ref<InstanceType<typeof LayerMenu>>();
 const checkedKeys = ref<Id[]>([]);
 // 是否多选
 const isCtrlKeyDown = ref(false);
-const filterText = ref('');
 // 默认展开节点
 const expandedKeys = ref<Id[]>([]);
 const currentNodeKey = ref<Id>();

packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -2,14 +2,7 @@
   <div class="m-editor-code-block-list">
     <slot name="code-block-panel-header">
       <div class="code-header-wrapper">
-        <TMagicInput
-          :class="[editable ? 'code-filter-input' : 'code-filter-input-no-btn']"
-          size="small"
-          placeholder="输入关键字进行过滤"
-          clearable
-          v-model="filterText"
-          @input="filterTextChangeHandler"
-        ></TMagicInput>
+        <SearchInput @search="filterTextChangeHandler"></SearchInput>
         <TMagicButton class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
           >新增</TMagicButton
         >
@@ -63,11 +56,12 @@
 import { computed, inject, ref } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicInput, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import { TMagicButton, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
 import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent, Id } from '@tmagic/schema';
 
 import Icon from '../../../components/Icon.vue';
+import SearchInput from '../../../components/SearchInput.vue';
 import { CodeDeleteErrorType, CodeDslItem, Services } from '../../../type';
 
 import CodeBlockEditor from './CodeBlockEditor.vue';
@@ -141,7 +135,6 @@ const deleteCode = (key: Id) => {
   }
 };
 
-const filterText = ref('');
 const tree = ref<InstanceType<typeof TMagicTree>>();
 
 const filterNode = (value: string, data: CodeDslItem): boolean => {

packages/editor/src/theme/code-block.scss

@@ -1,17 +1,19 @@
 .m-editor-code-block-list {
   height: 100%;
-  margin-top: 5px;
+  margin-top: 48px;
   .code-header-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
-    .code-filter-input {
-      margin: 0 5px;
-    }
-    .code-filter-input-no-btn {
-      margin-left: 5px;
-      margin-right: 10px;
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+    .search-input {
+      flex: 1;
+      position: relative;
     }
+
     .create-code-button {
       margin-left: 2px;
       margin-right: 10px;

packages/editor/src/theme/component-list-panel.scss

@@ -4,21 +4,6 @@
   margin-top: 48px;
   background-color: $--sidebar-content-background-color;
 
-  .search-input {
-    background: #fff;
-    color: #bbbbbb;
-    padding: 10px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    z-index: 1;
-
-    .el-input__prefix {
-      padding: 7px;
-    }
-  }
-
   .tmagic-design-collapse-item {
     > div:first-of-type {
       border-bottom: 1px solid $--border-color;

packages/editor/src/theme/layer-panel.scss

@@ -1,20 +1,6 @@
 .magic-editor-layer-panel {
   background: $--sidebar-content-background-color;
 
-  .search-input {
-    background: $--sidebar-content-background-color;
-    color: #bbbbbb;
-    padding: 10px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-
-    .el-input__prefix {
-      padding: 7px;
-    }
-  }
-
   .magic-editor-layer-tree {
     padding-top: 48px;
   }

packages/editor/src/theme/search-input.scss

@@ -0,0 +1,14 @@
+.tmagic-design-input.search-input {
+  background: #fff;
+  color: #bbbbbb;
+  padding: 10px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  z-index: 1;
+
+  .el-input__prefix {
+    padding: 7px;
+  }
+}

packages/editor/src/theme/theme.scss

@@ -1,3 +1,4 @@
+@import "./search-input.scss";
 @import "./nav-menu.scss";
 @import "./framework.scss";
 @import "./sidebar.scss";