@tmagic/editor 1.2.12 → 1.2.14

package/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,17 +50,17 @@
 
 <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 type { MenuButton, MenuComponent, Services } from '../../type';
-import { Layout } from '../../type';
+import SearchInput from '@editor/components/SearchInput.vue';
+import type { MenuButton, MenuComponent, Services } from '@editor/type';
+import { Layout } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 
@@ -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>();
@@ -147,7 +138,7 @@ const allowDrop = (draggingNode: any, dropNode: any, type: string): boolean => {
 
   if (ingType !== NodeType.PAGE && data.type === NodeType.PAGE) return false;
   if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE) return false;
-  if (!data || !data.type) return false;
+  if (!data?.type) return false;
   if (['prev', 'next'].includes(type)) return true;
   if (data.items || data.type === 'container') return true;
 

package/src/layouts/sidebar/Sidebar.vue

@@ -89,9 +89,9 @@ import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 
 import { getConfig, TMagicTabs } from '@tmagic/design';
 
-import MIcon from '../../components/Icon.vue';
-import type { MenuButton, MenuComponent, SideComponent, SideItem } from '../../type';
-import { SideBarData } from '../../type';
+import MIcon from '@editor/components/Icon.vue';
+import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor/type';
+import { SideBarData } from '@editor/type';
 
 import CodeBlockList from './code-block/CodeBlockList.vue';
 import ComponentListPanel from './ComponentListPanel.vue';

package/src/layouts/sidebar/code-block/CodeBlockEditor.vue

@@ -1,12 +1,14 @@
 <template>
-  <TMagicDialog
-    :model-value="true"
+  <TMagicDrawer
     class="code-editor-dialog"
+    :model-value="true"
     :title="currentTitle"
-    :fullscreen="true"
-    :close-on-press-escape="false"
+    :close-on-press-escape="true"
     :append-to-body="true"
     :show-close="false"
+    :close-on-click-modal="true"
+    :size="size"
+    :before-close="handleClose"
   >
     <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 右侧区域 -->
@@ -14,6 +16,7 @@
         <div v-if="!isEmpty(codeConfig)" class="m-editor-code-block-editor-panel">
           <slot name="code-block-edit-panel-header" :id="id"></slot>
           <FunctionEditor
+            ref="functionEditor"
             v-if="codeConfig"
             :id="id"
             :name="codeConfig.name"
@@ -26,21 +29,21 @@
         </div>
       </template>
     </Layout>
-  </TMagicDialog>
+  </TMagicDrawer>
 </template>
 
 <script lang="ts" setup name="MEditorCodeBlockEditor">
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
-import { TMagicDialog } from '@tmagic/design';
+import { TMagicDrawer } from '@tmagic/design';
 import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent } from '@tmagic/schema';
 
-import FunctionEditor from '../../../components/FunctionEditor.vue';
-import Layout from '../../../components/Layout.vue';
-import type { ListState, Services } from '../../../type';
-import { serializeConfig } from '../../../utils/editor';
+import FunctionEditor from '@editor/components/FunctionEditor.vue';
+import Layout from '@editor/components/Layout.vue';
+import type { ListState, Services } from '@editor/type';
+import { serializeConfig } from '@editor/utils/editor';
 
 const services = inject<Services>('services');
 const codeOptions = inject('codeOptions', {});
@@ -49,6 +52,8 @@ defineProps<{
   paramsColConfig?: ColumnConfig;
 }>();
 
+const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+
 const left = ref(200);
 const currentTitle = ref('');
 // 编辑器当前需展示的代码块内容
@@ -81,4 +86,11 @@ watchEffect(async () => {
   });
   currentTitle.value = state.codeList[0]?.name || '';
 });
+
+const functionEditor = ref<InstanceType<typeof FunctionEditor>>();
+
+const handleClose = async () => {
+  // 触发codeDraftEditor组件关闭事件
+  await functionEditor.value?.codeDraftEditor?.close();
+};
 </script>

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -1,15 +1,8 @@
 <template>
-  <div class="m-editor-code-block-list">
+  <TMagicScrollbar 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
         >
@@ -17,38 +10,40 @@
     </slot>
 
     <!-- 代码块列表 -->
-    <TMagicScrollbar>
-      <TMagicTree
-        ref="tree"
-        class="magic-editor-layer-tree"
-        node-key="id"
-        empty-text="暂无代码块"
-        default-expand-all
-        :expand-on-click-node="false"
-        :data="codeList"
-        :highlight-current="true"
-        :filter-node-method="filterNode"
-        @node-click="clickHandler"
-      >
-        <template #default="{ data }">
-          <div :id="data.id" class="list-container">
-            <div class="list-item">
-              <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
-              <!-- 右侧工具栏 -->
-              <div class="right-tool" v-if="data.type === 'code'">
-                <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
-                  <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
-                </TMagicTooltip>
-                <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
-                  <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
-                </TMagicTooltip>
-                <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
-              </div>
+    <TMagicTree
+      ref="tree"
+      class="magic-editor-layer-tree"
+      node-key="id"
+      empty-text="暂无代码块"
+      :default-expanded-keys="expandedKeys"
+      :expand-on-click-node="false"
+      :data="codeList"
+      :highlight-current="true"
+      :filter-node-method="filterNode"
+      @node-click="clickHandler"
+    >
+      <template #default="{ data }">
+        <div :id="data.id" class="list-container">
+          <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
+            >
+            <!-- 右侧工具栏 -->
+            <div class="right-tool" v-if="data.type === 'code'">
+              <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+                <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
+                <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
             </div>
           </div>
-        </template>
-      </TMagicTree>
-    </TMagicScrollbar>
+        </div>
+      </template>
+    </TMagicTree>
 
     <!-- 代码块编辑区 -->
     <CodeBlockEditor v-if="isShowCodeBlockEditor" :paramsColConfig="paramsColConfig">
@@ -56,19 +51,22 @@
         <slot name="code-block-edit-panel-header" :id="id"></slot>
       </template>
     </CodeBlockEditor>
-  </div>
+  </TMagicScrollbar>
 </template>
 
 <script setup lang="ts" name="MEditorCodeBlockList">
 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 { CodeDeleteErrorType, CodeDslItem, Services } from '../../../type';
+import Icon from '@editor/components/Icon.vue';
+import SearchInput from '@editor/components/SearchInput.vue';
+import AppManageIcon from '@editor/icons/AppManageIcon.vue';
+import CodeIcon from '@editor/icons/CodeIcon.vue';
+import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
 
 import CodeBlockEditor from './CodeBlockEditor.vue';
 
@@ -81,19 +79,27 @@ const { codeBlockService, depService, editorService } = inject<Services>('servic
 
 // 代码块列表
 const codeList = computed(() =>
-  Object.values(depService?.targets['code-block'] || {}).map((target) => ({
-    id: target.id,
-    name: target.name,
-    type: 'code',
-    children: Object.entries(target.deps).map(([id, dep]) => ({
+  Object.values(depService?.targets['code-block'] || {}).map((target) => {
+    // 组件节点
+    const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
       name: dep.name,
       type: 'node',
       id,
       children: dep.keys.map((key) => ({ name: key, id: key, type: 'key' })),
-    })),
-  })),
+    }));
+    return {
+      id: target.id,
+      name: target.name,
+      type: 'code',
+      codeBlockContent: codeBlockService?.getCodeContentById(target.id),
+      children: compNodes,
+    };
+  }),
 );
 
+// 默认展开组件层级的节点
+const expandedKeys = computed(() => codeList.value.map((item) => item.id));
+
 const editable = computed(() => codeBlockService?.getEditStatus());
 
 // 是否展示代码编辑区
@@ -140,7 +146,6 @@ const deleteCode = (key: Id) => {
   }
 };
 
-const filterText = ref('');
 const tree = ref<InstanceType<typeof TMagicTree>>();
 
 const filterNode = (value: string, data: CodeDslItem): boolean => {

package/src/layouts/workspace/Breadcrumb.vue

@@ -14,7 +14,7 @@ import { TMagicButton } from '@tmagic/design';
 import type { MNode } from '@tmagic/schema';
 import { getNodePath } from '@tmagic/utils';
 
-import type { Services } from '../../type';
+import type { Services } from '@editor/type';
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;

package/src/layouts/workspace/PageBar.vue

@@ -53,8 +53,8 @@ import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 import { TMagicIcon, TMagicPopover, TMagicTooltip } from '@tmagic/design';
 import type { MPage } from '@tmagic/schema';
 
-import ToolButton from '../../components/ToolButton.vue';
-import type { Services } from '../../type';
+import ToolButton from '@editor/components/ToolButton.vue';
+import type { Services } from '@editor/type';
 
 import PageBarScrollContainer from './PageBarScrollContainer.vue';
 

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -32,9 +32,9 @@ import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
-import Icon from '../../components/Icon.vue';
-import type { Services } from '../../type';
-import { generatePageNameByApp } from '../../utils/editor';
+import Icon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+import { generatePageNameByApp } from '@editor/utils/editor';
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;

package/src/layouts/workspace/Stage.vue

@@ -33,9 +33,9 @@ import { cloneDeep } from 'lodash-es';
 import type { MContainer } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
-import ScrollViewer from '../../components/ScrollViewer.vue';
-import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '../../type';
-import { useStage } from '../../utils/stage';
+import ScrollViewer from '@editor/components/ScrollViewer.vue';
+import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
+import { useStage } from '@editor/utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 

package/src/layouts/workspace/ViewerMenu.vue

@@ -9,10 +9,10 @@ import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/i
 import { NodeType } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
-import ContentMenu from '../../components/ContentMenu.vue';
-import storageService from '../../services/storage';
-import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '../../type';
-import { COPY_STORAGE_KEY } from '../../utils/editor';
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import storageService from '@editor/services/storage';
+import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
+import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
 const props = withDefaults(
   defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),

package/src/layouts/workspace/Workspace.vue

@@ -21,7 +21,7 @@ import KeyController from 'keycon';
 
 import { isPage } from '@tmagic/utils';
 
-import type { MenuButton, MenuComponent, Services } from '../../type';
+import type { MenuButton, MenuComponent, Services } from '@editor/type';
 
 import Breadcrumb from './Breadcrumb.vue';
 import PageBar from './PageBar.vue';

package/src/services/BaseService.ts

@@ -18,7 +18,7 @@
 
 import { EventEmitter } from 'events';
 
-import { compose } from '../utils/compose';
+import { compose } from '@editor/utils/compose';
 
 const methodName = (prefix: string, name: string) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
 

package/src/services/codeBlock.ts

@@ -21,9 +21,9 @@ import { keys, pick } from 'lodash-es';
 
 import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 
-import type { CodeState } from '../type';
-import { CODE_DRAFT_STORAGE_KEY } from '../type';
-import { info } from '../utils/logger';
+import type { CodeState } from '@editor/type';
+import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
+import { info } from '@editor/utils/logger';
 
 import BaseService from './BaseService';
 
@@ -39,9 +39,6 @@ class CodeBlock extends BaseService {
 
   constructor() {
     super([
-      'getCodeContentById',
-      'getCodeDslByIds',
-      'getCurrentDsl',
       'setCodeDslById',
       'setCodeEditorShowStatus',
       'setEditStatus',
@@ -77,9 +74,9 @@ class CodeBlock extends BaseService {
    * @param {Id} id 代码块id
    * @returns {CodeBlockContent | null}
    */
-  public async getCodeContentById(id: Id): Promise<CodeBlockContent | null> {
+  public getCodeContentById(id: Id): CodeBlockContent | null {
     if (!id) return null;
-    const totalCodeDsl = await this.getCodeDsl();
+    const totalCodeDsl = this.getCodeDsl();
     if (!totalCodeDsl) return null;
     return totalCodeDsl[id] ?? null;
   }
@@ -91,7 +88,7 @@ class CodeBlock extends BaseService {
    * @returns {void}
    */
   public async setCodeDslById(id: Id, codeConfig: CodeBlockContent): Promise<void> {
-    const codeDsl = await this.getCodeDsl();
+    const codeDsl = this.getCodeDsl();
 
     if (!codeDsl) {
       throw new Error('dsl中没有codeBlocks');
@@ -119,8 +116,8 @@ class CodeBlock extends BaseService {
    * @param {string[]} ids 代码块id数组
    * @returns {CodeBlockDSL}
    */
-  public async getCodeDslByIds(ids: string[]): Promise<CodeBlockDSL> {
-    const codeDsl = await this.getCodeDsl();
+  public getCodeDslByIds(ids: string[]): CodeBlockDSL {
+    const codeDsl = this.getCodeDsl();
     return pick(codeDsl, ids) as CodeBlockDSL;
   }
 
@@ -157,8 +154,8 @@ class CodeBlock extends BaseService {
    * 获取当前选中的代码块内容
    * @returns {CodeBlockContent | null}
    */
-  public async getCurrentDsl(): Promise<CodeBlockContent | null> {
-    return await this.getCodeContentById(this.state.id);
+  public getCurrentDsl(): CodeBlockContent | null {
+    return this.getCodeContentById(this.state.id);
   }
 
   /**

package/src/services/componentList.ts

@@ -18,7 +18,7 @@
 
 import { reactive } from 'vue';
 
-import type { ComponentGroup, ComponentGroupState } from '../type';
+import type { ComponentGroup, ComponentGroupState } from '@editor/type';
 
 import BaseService from './BaseService';
 

package/src/services/editor.ts

@@ -24,10 +24,10 @@ import { NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
-import historyService from '../services/history';
-import storageService, { Protocol } from '../services/storage';
-import type { AddMNode, EditorNodeInfo, PastePosition, StepValue, StoreState, StoreStateKey } from '../type';
-import { LayerOffset, Layout } from '../type';
+import historyService from '@editor/services/history';
+import storageService, { Protocol } from '@editor/services/storage';
+import type { AddMNode, EditorNodeInfo, PastePosition, StepValue, StoreState, StoreStateKey } from '@editor/type';
+import { LayerOffset, Layout } from '@editor/type';
 import {
   change2Fixed,
   COPY_STORAGE_KEY,
@@ -37,8 +37,8 @@ import {
   getNodeIndex,
   isFixed,
   setLayout,
-} from '../utils/editor';
-import { beforePaste, getAddParent } from '../utils/operator';
+} from '@editor/utils/editor';
+import { beforePaste, getAddParent } from '@editor/utils/operator';
 
 import BaseService from './BaseService';
 import propsService from './props';

package/src/services/events.ts

@@ -22,7 +22,7 @@ import { cloneDeep } from 'lodash-es';
 import { DEFAULT_EVENTS, DEFAULT_METHODS, EventOption } from '@tmagic/core';
 import { toLine } from '@tmagic/utils';
 
-import type { ComponentGroup } from '../type';
+import type { ComponentGroup } from '@editor/type';
 
 import BaseService from './BaseService';
 

package/src/services/history.ts

@@ -20,8 +20,8 @@ import { reactive } from 'vue';
 
 import type { MPage } from '@tmagic/schema';
 
-import { HistoryState, StepValue } from '../type';
-import { UndoRedo } from '../utils/undo-redo';
+import type { HistoryState, StepValue } from '@editor/type';
+import { UndoRedo } from '@editor/utils/undo-redo';
 
 import BaseService from './BaseService';
 

package/src/services/props.ts

@@ -23,8 +23,8 @@ import type { FormConfig } from '@tmagic/form';
 import type { MComponent, MNode } from '@tmagic/schema';
 import { toLine } from '@tmagic/utils';
 
-import type { PropsState } from '../type';
-import { fillConfig } from '../utils/props';
+import type { PropsState } from '@editor/type';
+import { fillConfig } from '@editor/utils/props';
 
 import BaseService from './BaseService';
 

package/src/services/ui.ts

@@ -18,8 +18,8 @@
 
 import { reactive } from 'vue';
 
-import editorService from '../services/editor';
-import type { StageRect, UiState } from '../type';
+import editorService from '@editor/services/editor';
+import type { StageRect, UiState } from '@editor/type';
 
 import BaseService from './BaseService';
 

package/src/theme/code-block.scss

@@ -1,17 +1,24 @@
 .m-editor-code-block-list {
   height: 100%;
-  margin-top: 5px;
+
+  .magic-editor-layer-tree {
+    padding-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%;
+    z-index: 1;
+
+    .search-input {
+      flex: 1;
+      position: relative;
     }
+
     .create-code-button {
       margin-left: 2px;
       margin-right: 10px;
@@ -27,22 +34,47 @@
     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;
+        margin-right: 5px;
+      }
+
+      .compIcon {
+        width: 15px;
+        height: 15px;
+        margin-right: 5px;
+      }
+
       .code-name {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         width: 0 !important;
         flex: 1;
-        line-height: 18px;
+        line-height: 22px;
+
+        &.code {
+          color: #000;
+        }
+
+        &.hook {
+          color: #909399;
+        }
       }
     }
   }
@@ -50,9 +82,8 @@
 
 .m-fields-code-select {
   width: 100%;
-  .edit-icon {
-    cursor: pointer;
-    margin-right: 5px;
+  .el-card__header {
+    display: none;
   }
 }
 

package/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;