feat：【mall】diy editor 的 search-bar 优化

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts

@@ -13,10 +13,10 @@ export interface SearchProperty {
   style: ComponentStyle;
 }
 
-// 文字位置
+/** 文字位置 */
 export type PlaceholderPosition = 'center' | 'left';
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'SearchBar',
   name: '搜索框',

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue

@@ -5,19 +5,19 @@ import { IconifyIcon } from '@vben/icons';
 
 /** 搜索框 */
 defineOptions({ name: 'SearchBar' });
+
 defineProps<{ property: SearchProperty }>();
 </script>
 
 <template>
   <div
-    class="search-bar"
     :style="{
       color: property.textColor,
     }"
   >
     <!-- 搜索框 -->
     <div
-      class="inner"
+      class="relative flex min-h-7 items-center text-sm"
       :style="{
         height: `${property.height}px`,
         background: property.backgroundColor,
@@ -25,7 +25,7 @@ defineProps<{ property: SearchProperty }>();
       }"
     >
       <div
-        class="placeholder"
+        class="flex w-full items-center gap-0.5 overflow-hidden text-ellipsis whitespace-nowrap break-all px-2"
         :style="{
           justifyContent: property.placeholderPosition,
         }"
@@ -33,11 +33,11 @@ defineProps<{ property: SearchProperty }>();
         <IconifyIcon icon="ep:search" />
         <span>{{ property.placeholder || '搜索商品' }}</span>
       </div>
-      <div class="right">
+      <div class="absolute right-2 flex items-center justify-center gap-2">
         <!-- 搜索热词 -->
-        <span v-for="(keyword, index) in property.hotKeywords" :key="index">{{
+        <span v-for="(keyword, index) in property.hotKeywords" :key="index">
-          keyword
+          {{ keyword }}
-        }}</span>
+        </span>
         <!-- 扫一扫 -->
         <IconifyIcon
           icon="ant-design:scan-outlined"
@@ -47,37 +47,3 @@ defineProps<{ property: SearchProperty }>();
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.search-bar {
-  /* 搜索框 */
-  .inner {
-    position: relative;
-    display: flex;
-    align-items: center;
-    min-height: 28px;
-    font-size: 14px;
-
-    .placeholder {
-      display: flex;
-      gap: 2px;
-      align-items: center;
-      width: 100%;
-      padding: 0 8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: break-all;
-      white-space: nowrap;
-    }
-
-    .right {
-      position: absolute;
-      right: 8px;
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-</style>

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue

@@ -11,6 +11,7 @@ import {
   ElCard,
   ElForm,
   ElFormItem,
+  ElInput,
   ElRadioButton,
   ElRadioGroup,
   ElSlider,
@@ -18,7 +19,7 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import { Draggable } from '#/views/mall/promotion/components';
+import { ColorInput, Draggable } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
@@ -26,10 +27,12 @@ import ComponentContainerProperty from '../../component-container-property.vue';
 defineOptions({ name: 'SearchProperty' });
 
 const props = defineProps<{ modelValue: SearchProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 
-// 监听热词数组变化
+/** 监听热词数组变化 */
 watch(
   () => formData.value.hotKeywords,
   (newVal) => {
@@ -45,8 +48,7 @@ watch(
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <!-- 表单 -->
+    <ElForm label-width="80px" :model="formData">
-    <ElForm label-width="80px" :model="formData" class="mt-2">
       <ElCard header="搜索热词" class="property-group" shadow="never">
         <Draggable
           v-model="formData.hotKeywords"
@@ -56,7 +58,7 @@ watch(
           }"
         >
           <template #default="{ index }">
-            <el-input
+            <ElInput
               v-model="formData.hotKeywords[index]"
               placeholder="请输入热词"
             />
@@ -79,7 +81,7 @@ watch(
           </ElRadioGroup>
         </ElFormItem>
         <ElFormItem label="提示文字" prop="placeholder">
-          <el-input v-model="formData.placeholder" />
+          <ElInput v-model="formData.placeholder" />
         </ElFormItem>
         <ElFormItem label="文本位置" prop="placeholderPosition">
           <ElRadioGroup v-model="formData!.placeholderPosition">
@@ -110,12 +112,10 @@ watch(
         <ElFormItem label="框体颜色" prop="backgroundColor">
           <ColorInput v-model="formData.backgroundColor" />
         </ElFormItem>
-        <ElFormItem class="lef" label="文本颜色" prop="textColor">
+        <ElFormItem label="文本颜色" prop="textColor">
           <ColorInput v-model="formData.textColor" />
         </ElFormItem>
       </ElCard>
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>