feat：【mall】diy editor 的 divider 组件

apps/web-ele/src/views/mall/promotion/components/color-input/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-// TODO @AI：改成 El 风格，而不是iel- 风格；
 import { computed } from 'vue';
 
+import { ElColorPicker, ElInput } from 'element-plus';
+
 import { PREDEFINE_COLORS } from '@vben/constants';
 
 /** 颜色输入框 */
@@ -27,11 +28,11 @@ const color = computed({
 </script>
 
 <template>
-  <el-input v-model="color">
+  <ElInput v-model="color">
     <template #prepend>
-      <el-color-picker v-model="color" :predefine="PREDEFINE_COLORS" />
+      <ElColorPicker v-model="color" :predefine="PREDEFINE_COLORS" />
     </template>
-  </el-input>
+  </ElInput>
 </template>
 
 <style scoped lang="scss">

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

@@ -2,19 +2,14 @@ import type { DiyComponent } from '../../../util';
 
 /** 分割线属性 */
 export interface DividerProperty {
-  // 高度
+  height: number; // 高度
-  height: number;
+  lineWidth: number; // 线宽
-  // 线宽
+  paddingType: 'horizontal' | 'none'; // 边距类型
-  lineWidth: number;
+  lineColor: string; // 颜色
-  // 边距类型
+  borderType: 'dashed' | 'dotted' | 'none' | 'solid'; // 类型
-  paddingType: 'horizontal' | 'none';
-  // 颜色
-  lineColor: string;
-  // 类型
-  borderType: 'dashed' | 'dotted' | 'none' | 'solid';
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'Divider',
   name: '分割线',

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

@@ -25,5 +25,3 @@ defineProps<{ property: DividerProperty }>();
     ></div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -13,15 +13,15 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+import { ColorInput } from '#/views/mall/promotion/components';
 
-// 导航栏属性面板
+/** 导航栏属性面板 */
 defineOptions({ name: 'DividerProperty' });
-const props = defineProps<{ modelValue: DividerProperty }>();
-const emit = defineEmits(['update:modelValue']);
-const formData = useVModel(props, 'modelValue', emit);
 
-// 线类型
+const props = defineProps<{ modelValue: DividerProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
 const BORDER_TYPES = [
   {
     icon: 'vaadin:line-h',
@@ -43,7 +43,8 @@ const BORDER_TYPES = [
     text: '无',
     type: 'none',
   },
-];
+]; // 线类型
+const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
@@ -96,11 +97,8 @@ const BORDER_TYPES = [
         </ElRadioGroup>
       </ElFormItem>
       <ElFormItem label="颜色">
-        <!-- 分割线颜色 -->
         <ColorInput v-model="formData.lineColor" />
       </ElFormItem>
     </template>
   </ElForm>
 </template>
-
-<style scoped lang="scss"></style>