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