feat：【antd】【mall】diy-editor 代码风格统一 & 逐个测试 30%

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue

@@ -133,6 +133,7 @@ function handleSliderChange(prop: string) {
     </TabPane>
 
     <!-- 每个组件的通用内容 -->
+    <!-- TODO @xingyu：这里的样式，貌似没 ele 版本的好看。 -->
     <TabPane tab="样式" key="style" force-render>
       <p class="text-lg font-bold">组件样式：</p>
       <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
@@ -159,6 +160,7 @@ function handleSliderChange(prop: string) {
               <template #tip>建议宽度 750px</template>
             </UploadImg>
           </FormItem>
+          <!-- TODO @xingyu：没完全对齐 -->
           <Tree :tree-data="treeData" default-expand-all :block-node="true">
             <template #title="{ dataRef }">
               <FormItem

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue

@@ -49,6 +49,7 @@ const emits = defineEmits<{
 type DiyComponentWithStyle = DiyComponent<any> & {
   property: { style?: ComponentStyle };
 };
+
 /** 组件样式 */
 const style = computed(() => {
   const componentStyle = props.component.property.style;
@@ -108,6 +109,7 @@ const handleDeleteComponent = () => {
         class="component-toolbar"
         v-if="showToolbar && component.name && active"
       >
+        <!-- TODO @xingyu：按钮少的时候，会存在遮住的情况； -->
         <VerticalButtonGroup size="small">
           <Button
             :disabled="!canMoveUp"

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue

@@ -19,6 +19,7 @@ const props = defineProps<{
   list: DiyComponentLibrary[];
 }>();
 
+// TODO @xingyu：要不要换成 reactive，和 ele 一致
 const groups = ref<any[]>([]); // 组件分组
 const extendGroups = ref<string[]>([]); // 展开的折叠面板
 
@@ -99,4 +100,5 @@ function handleCloneComponent(component: DiyComponent<any>) {
       </Collapse.Panel>
     </Collapse>
   </div>
+  <!-- TODO @xingyu：ele 里面有一些 style，看看是不是都迁移完了；特别是 drag-area 是全局样式； -->
 </template>

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

@@ -11,7 +11,6 @@ defineOptions({ name: 'ImageBar' });
 defineProps<{ property: ImageBarProperty }>();
 </script>
 <template>
-  <!-- 无图片 -->
   <div
     class="bg-card flex h-12 items-center justify-center"
     v-if="!property.imgUrl"

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

@@ -9,11 +9,13 @@ import { AppLinkInput } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 图片展示属性面板
+/** 图片展示属性面板 */
 defineOptions({ name: 'ImageBarProperty' });
 
 const props = defineProps<{ modelValue: ImageBarProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue

@@ -13,10 +13,11 @@ import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品卡片 */
 defineOptions({ name: 'ProductCard' });
-// 定义属性
+
 const props = defineProps<{ property: ProductCardProperty }>();
-// 商品列表
-const spuList = ref<MallSpuApi.Spu[]>([]);
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
+
 watch(
   () => props.property.spuIds,
   async () => {
@@ -28,28 +29,21 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
+/** 计算商品的间距 */
 function calculateSpace(index: number) {
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
   return { marginLeft, marginTop };
 }
 
-// 容器
-const containerRef = ref();
-// 计算商品的宽度
+const containerRef = ref(); // 容器
+
+/** 计算商品的宽度 */
 function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
@@ -61,7 +55,7 @@ function calculateWidth() {
     ref="containerRef"
   >
     <div
-      class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
+      class="relative box-content flex flex-row flex-wrap overflow-hidden"
       :style="{
         ...calculateSpace(index),
         ...calculateWidth(),

apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts

@@ -27,14 +27,11 @@ export interface DiyComponentLibrary {
   components: string[]; // 组件列表
 }
 
-// 组件样式
+/** 组件样式 */
 export interface ComponentStyle {
-  // 背景类型
-  bgType: 'color' | 'img';
-  // 背景颜色
-  bgColor: string;
-  // 背景图片
-  bgImg: string;
+  bgType: 'color' | 'img'; // 背景类型
+  bgColor: string; // 背景颜色
+  bgImg: string; // 背景图片
   // 外边距
   margin: number;
   marginTop: number;