Merge branch 'dev' of gitee.com:yudaocode/yudao-ui-admin-vben into dev

Signed-off-by: jawe <532159638@qq.com>

apps/web-antd/src/components/description/description.vue

@@ -133,9 +133,7 @@ export default defineComponent({
             >
               {() => {
                 if (item.slot) {
-                  // TODO @xingyu：这里要 inline 掉么？
+                  return getSlot(slots, item.slot, data);
-                  const slotContent = getSlot(slots, item.slot, data);
-                  return slotContent;
                 }
                 if (!contentMinWidth) {
                   return getContent();

apps/web-antd/src/plugins/form-create/index.ts

@@ -96,7 +96,7 @@ export function setupFormCreate(app: App) {
   components.forEach((component) => {
     app.component(component.name as string, component);
   });
-  // TODO @xingyu：这里为啥 app.component('AMessage', message); 看官方是没有的；
+  // TODO @xingyu：这里为啥 app.component('AMessage', message); 看官方是没有的； 需要额外引入
   app.component('AMessage', message);
   formCreate.use(install);
   app.use(formCreate);

apps/web-antd/src/views/mall/product/spu/form/data.ts

@@ -102,7 +102,6 @@ export function useInfoFormSchema(): VbenFormSchema[] {
 }
 
 /** 价格库存的表单 */
-// TODO @puhui999：貌似太宽了。。。屏幕小的，整个 table 展示补全哈~~
 export function useSkuFormSchema(
   propertyList: any[] = [],
   isDetail: boolean = false,

apps/web-antd/src/views/mall/product/spu/form/index.vue

@@ -128,10 +128,6 @@ const [InfoForm, infoFormApi] = useVbenForm({
 
 const [SkuForm, skuFormApi] = useVbenForm({
   commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
     labelWidth: 120,
   },
   layout: 'horizontal',
@@ -364,6 +360,7 @@ onMounted(async () => {
           <template #singleSkuList>
             <SkuList
               ref="skuListRef"
+              class="w-full"
               :is-detail="isDetail"
               :prop-form-data="formData"
               :property-list="propertyList"

apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue

@@ -289,17 +289,22 @@ defineExpose({
 </script>
 
 <template>
-  <div>
+  <div class="w-full">
     <!-- 情况一：添加/修改 -->
     <VxeTable
       v-if="!isDetail && !isActivityComponent"
       :data="isBatch ? skuList : formData?.skus || []"
       border
       max-height="500"
+      :column-config="{
+        resizable: true,
+      }"
+      :resizable-config="{
+        dragMode: 'fixed',
+      }"
       size="small"
-      class="w-full"
     >
-      <VxeColumn align="center" title="图片" min-width="120">
+      <VxeColumn align="center" title="图片" width="120" fixed="left">
         <template #default="{ row }">
           <ImageUpload
             v-model:value="row.picUrl"
@@ -316,7 +321,8 @@ defineExpose({
           :key="index"
           :title="item.label"
           align="center"
-          min-width="120"
+          fixed="left"
+          min-width="80"
         >
           <template #default="{ row }">
             <span class="font-bold text-[#40aaff]">
@@ -325,12 +331,12 @@ defineExpose({
           </template>
         </VxeColumn>
       </template>
-      <VxeColumn align="center" title="商品条码" min-width="168">
+      <VxeColumn align="center" title="商品条码" width="168">
         <template #default="{ row }">
           <Input v-model:value="row.barCode" class="w-full" />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="销售价" min-width="168">
+      <VxeColumn align="center" title="销售价" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.price"
@@ -341,7 +347,7 @@ defineExpose({
           />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="市场价" min-width="168">
+      <VxeColumn align="center" title="市场价" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.marketPrice"
@@ -352,7 +358,7 @@ defineExpose({
           />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="成本价" min-width="168">
+      <VxeColumn align="center" title="成本价" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.costPrice"
@@ -363,12 +369,12 @@ defineExpose({
           />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="库存" min-width="168">
+      <VxeColumn align="center" title="库存" width="168">
         <template #default="{ row }">
           <InputNumber v-model:value="row.stock" :min="0" class="w-full" />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="重量(kg)" min-width="168">
+      <VxeColumn align="center" title="重量(kg)" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.weight"
@@ -379,7 +385,7 @@ defineExpose({
           />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="体积(m^3)" min-width="168">
+      <VxeColumn align="center" title="体积(m^3)" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.volume"
@@ -391,7 +397,7 @@ defineExpose({
         </template>
       </VxeColumn>
       <template v-if="formData?.subCommissionType">
-        <VxeColumn align="center" title="一级返佣(元)" min-width="168">
+        <VxeColumn align="center" title="一级返佣(元)" width="168">
           <template #default="{ row }">
             <InputNumber
               v-model:value="row.firstBrokeragePrice"
@@ -402,7 +408,7 @@ defineExpose({
             />
           </template>
         </VxeColumn>
-        <VxeColumn align="center" title="二级返佣(元)" min-width="168">
+        <VxeColumn align="center" title="二级返佣(元)" width="168">
           <template #default="{ row }">
             <InputNumber
               v-model:value="row.secondBrokeragePrice"
@@ -446,13 +452,18 @@ defineExpose({
       border
       max-height="500"
       size="small"
-      class="w-full"
+      :column-config="{
+        resizable: true,
+      }"
+      :resizable-config="{
+        dragMode: 'fixed',
+      }"
       :checkbox-config="isComponent ? { reserve: true } : undefined"
       @checkbox-change="handleSelectionChange"
       @checkbox-all="handleSelectionChange"
     >
       <VxeColumn v-if="isComponent" type="checkbox" width="45" />
-      <VxeColumn align="center" title="图片" min-width="120">
+      <VxeColumn align="center" title="图片" max-width="140" fixed="left">
         <template #default="{ row }">
           <Image
             v-if="row.picUrl"
@@ -469,7 +480,8 @@ defineExpose({
           :key="index"
           :title="item.label"
           align="center"
-          min-width="80"
+          max-width="80"
+          fixed="left"
         >
           <template #default="{ row }">
             <span class="font-bold text-[#40aaff]">
@@ -478,48 +490,48 @@ defineExpose({
           </template>
         </VxeColumn>
       </template>
-      <VxeColumn align="center" title="商品条码" min-width="100">
+      <VxeColumn align="center" title="商品条码" width="100">
         <template #default="{ row }">
           {{ row.barCode }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="销售价(元)" min-width="80">
+      <VxeColumn align="center" title="销售价(元)" width="80">
         <template #default="{ row }">
           {{ row.price }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="市场价(元)" min-width="80">
+      <VxeColumn align="center" title="市场价(元)" width="80">
         <template #default="{ row }">
           {{ row.marketPrice }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="成本价(元)" min-width="80">
+      <VxeColumn align="center" title="成本价(元)" width="80">
         <template #default="{ row }">
           {{ row.costPrice }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="库存" min-width="80">
+      <VxeColumn align="center" title="库存" width="80">
         <template #default="{ row }">
           {{ row.stock }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="重量(kg)" min-width="80">
+      <VxeColumn align="center" title="重量(kg)" width="80">
         <template #default="{ row }">
           {{ row.weight }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="体积(m^3)" min-width="80">
+      <VxeColumn align="center" title="体积(m^3)" width="80">
         <template #default="{ row }">
           {{ row.volume }}
         </template>
       </VxeColumn>
       <template v-if="formData?.subCommissionType">
-        <VxeColumn align="center" title="一级返佣(元)" min-width="80">
+        <VxeColumn align="center" title="一级返佣(元)" width="80">
           <template #default="{ row }">
             {{ row.firstBrokeragePrice }}
           </template>
         </VxeColumn>
-        <VxeColumn align="center" title="二级返佣(元)" min-width="80">
+        <VxeColumn align="center" title="二级返佣(元)" width="80">
           <template #default="{ row }">
             {{ row.secondBrokeragePrice }}
           </template>
@@ -534,10 +546,15 @@ defineExpose({
       border
       max-height="500"
       size="small"
-      class="w-full"
+      :column-config="{
+        resizable: true,
+      }"
+      :resizable-config="{
+        dragMode: 'fixed',
+      }"
     >
-      <VxeColumn v-if="isComponent" type="checkbox" width="45" />
+      <VxeColumn v-if="isComponent" type="checkbox" width="45" fixed="left" />
-      <VxeColumn align="center" title="图片" min-width="120">
+      <VxeColumn align="center" title="图片" max-width="140" fixed="left">
         <template #default="{ row }">
           <Image
             :src="row.picUrl"
@@ -553,7 +570,8 @@ defineExpose({
           :key="index"
           :title="item.label"
           align="center"
-          min-width="80"
+          width="80"
+          fixed="left"
         >
           <template #default="{ row }">
             <span class="font-bold text-[#40aaff]">
@@ -562,27 +580,27 @@ defineExpose({
           </template>
         </VxeColumn>
       </template>
-      <VxeColumn align="center" title="商品条码" min-width="100">
+      <VxeColumn align="center" title="商品条码" width="100">
         <template #default="{ row }">
           {{ row.barCode }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="销售价(元)" min-width="80">
+      <VxeColumn align="center" title="销售价(元)" width="80">
         <template #default="{ row }">
           {{ formatToFraction(row.price) }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="市场价(元)" min-width="80">
+      <VxeColumn align="center" title="市场价(元)" width="80">
         <template #default="{ row }">
           {{ formatToFraction(row.marketPrice) }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="成本价(元)" min-width="80">
+      <VxeColumn align="center" title="成本价(元)" width="80">
         <template #default="{ row }">
           {{ formatToFraction(row.costPrice) }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="库存" min-width="80">
+      <VxeColumn align="center" title="库存" width="80">
         <template #default="{ row }">
           {{ row.stock }}
         </template>

apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue

@@ -37,9 +37,12 @@ const detailSelectDialog = ref<{
   type: undefined,
 }); // 详情选择对话框
 
-/** 打开弹窗 */
 const dialogVisible = ref(false);
-const open = (link: string) => {
+
+defineExpose({ open });
+
+/** 打开弹窗 */
+async function open(link: string) {
   activeAppLink.value.path = link;
   dialogVisible.value = true;
   // 滚动到当前的链接
@@ -54,19 +57,18 @@ const open = (link: string) => {
   );
   if (group) {
     // 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
-    nextTick(() => handleGroupSelected(group.name));
+    await nextTick();
+    handleGroupSelected(group.name);
   }
-};
+}
-defineExpose({ open });
 
 /** 处理 APP 链接选中 */
-const handleAppLinkSelected = (appLink: AppLink) => {
+function handleAppLinkSelected(appLink: AppLink) {
   if (!isSameLink(appLink.path, activeAppLink.value.path)) {
     activeAppLink.value = appLink;
   }
   switch (appLink.type) {
     case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST: {
-      detailSelectDialog.value.visible = true;
       detailSelectDialog.value.type = appLink.type;
       // 返显
       detailSelectDialog.value.id =
@@ -74,26 +76,30 @@ const handleAppLinkSelected = (appLink: AppLink) => {
           'id',
           `http://127.0.0.1${activeAppLink.value.path}`,
         ) || undefined;
+      detailSelectDialog.value.visible = true;
       break;
     }
     default: {
       break;
     }
   }
-};
+}
 
+/** 处理确认提交 */
 function handleSubmit() {
-  dialogVisible.value = false;
   emit('change', activeAppLink.value.path);
   emit('appLinkChange', activeAppLink.value);
+  dialogVisible.value = false;
 }
 
 /**
  * 处理右侧链接列表滚动
+ *
  * @param {object} param0 滚动事件参数
  * @param {number} param0.scrollTop 滚动条的位置
  */
-function handleScroll({ scrollTop }: { scrollTop: number }) {
+function handleScroll(event: Event) {
+  const scrollTop = (event.target as HTMLDivElement).scrollTop;
   const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
     // 获取标题的位置信息
     const { offsetHeight, offsetTop } = titleEl;
@@ -137,47 +143,59 @@ function isSameLink(link1: string, link2: string) {
 
 /** 处理详情选择 */
 function handleProductCategorySelected(id: number) {
-  // TODO @AI：这里有点问题；activeAppLink 地址；
+  // 生成 activeAppLink
   const url = new URL(activeAppLink.value.path, 'http://127.0.0.1');
-  // 修改 id 参数
   url.searchParams.set('id', `${id}`);
-  // 排除域名
   activeAppLink.value.path = `${url.pathname}${url.search}`;
-  // 关闭对话框
+
+  // 关闭对话框，并重置 id
   detailSelectDialog.value.visible = false;
-  // 重置 id
   detailSelectDialog.value.id = undefined;
 }
 </script>
 <template>
-  <Modal v-model:open="dialogVisible" title="选择链接" width="65%">
+  <Modal
+    v-model:open="dialogVisible"
+    title="选择链接"
+    width="65%"
+    @ok="handleSubmit"
+  >
     <div class="flex h-[500px] gap-2">
+      <div class="flex flex-col">
         <!-- 左侧分组列表 -->
-      <div class="flex h-full flex-col overflow-y-auto" ref="groupScrollbar">
+        <div
+          class="h-full overflow-y-auto border-r border-gray-200 pr-2"
+          ref="groupScrollbar"
+        >
           <Button
             v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
             :key="groupIndex"
-          class="mb-1 ml-0 mr-4 w-[90px] justify-start"
+            class="!ml-0 mb-1 mr-4 !justify-start"
             :class="[{ active: activeGroup === group.name }]"
             ref="groupBtnRefs"
             :type="activeGroup === group.name ? 'primary' : 'default'"
+            :ghost="activeGroup !== group.name"
             @click="handleGroupSelected(group.name)"
           >
             {{ group.name }}
           </Button>
         </div>
+      </div>
       <!-- 右侧链接列表 -->
       <div
-        class="h-full flex-1 overflow-y-auto"
+        class="h-full flex-1 overflow-y-auto pl-2"
         @scroll="handleScroll"
         ref="linkScrollbar"
       >
         <div
           v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
           :key="groupIndex"
+          class="mb-4 border-b border-gray-100 pb-4 last:mb-0 last:border-b-0"
         >
           <!-- 分组标题 -->
-          <div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
+          <div class="mb-2 font-bold" ref="groupTitleRefs">
+            {{ group.name }}
+          </div>
           <!-- 链接列表 -->
           <Tooltip
             v-for="(appLink, appLinkIndex) in group.links"
@@ -201,13 +219,9 @@ function handleProductCategorySelected(id: number) {
         </div>
       </div>
     </div>
-    <!-- 底部对话框操作按钮 -->
-    <template #footer>
-      <Button type="primary" @click="handleSubmit">确 定</Button>
-      <Button @click="dialogVisible = false">取 消</Button>
-    </template>
   </Modal>
-  <Modal v-model:open="detailSelectDialog.visible" title="" width="50%">
+
+  <Modal v-model:open="detailSelectDialog.visible" title="选择分类" width="65%">
     <Form class="min-h-[200px]">
       <FormItem
         label="选择分类"
@@ -224,6 +238,7 @@ function handleProductCategorySelected(id: number) {
     </Form>
   </Modal>
 </template>
+
 <style lang="scss" scoped>
 :deep(.ant-btn + .ant-btn) {
   margin-left: 0 !important;

apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 
-import { Button, Input, InputGroup } from 'ant-design-vue';
+import { Button, Input } from 'ant-design-vue';
 
 import AppLinkSelectDialog from './app-link-select-dialog.vue';
 
 /** APP 链接输入框 */
 defineOptions({ name: 'AppLinkInput' });
 
-// 定义属性
+/** 定义属性 */
 const props = defineProps({
   modelValue: {
     type: String,
@@ -23,8 +23,16 @@ const emit = defineEmits<{
 const dialogRef = ref(); // 选择对话框
 
 const appLink = ref(''); // 当前的链接
-const handleOpenDialog = () => dialogRef.value?.open(appLink.value); // 处理打开对话框
+
-const handleLinkSelected = (link: string) => (appLink.value = link); // 处理 APP 链接选中
+/** 处理打开对话框 */
+function handleOpenDialog() {
+  return dialogRef.value?.open(appLink.value);
+}
+
+/** 处理 APP 链接选中 */
+function handleLinkSelected(link: string) {
+  appLink.value = link;
+}
 
 watch(
   () => props.modelValue,
@@ -38,14 +46,19 @@ watch(
 );
 </script>
 <template>
-  <InputGroup compact>
+  <Input v-model:value="appLink" placeholder="输入或选择链接">
-    <Input
+    <template #addonAfter>
-      v-model:value="appLink"
+      <Button @click="handleOpenDialog" class="!border-none">选择</Button>
-      placeholder="输入或选择链接"
+    </template>
-      class="flex-1"
+  </Input>
-    />
-    <Button @click="handleOpenDialog">选择</Button>
-  </InputGroup>
 
   <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
 </template>
+
+<style scoped lang="scss">
+:deep(.ant-input-group-addon) {
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+</style>

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

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-// import { PREDEFINE_COLORS } from '@vben/constants';
+import { Input } from 'ant-design-vue';
-
-import { Input, InputGroup } from 'ant-design-vue';
 
 /** 颜色输入框 */
 defineOptions({ name: 'ColorInput' });
@@ -28,12 +26,25 @@ const color = computed({
 </script>
 
 <template>
-  <InputGroup compact>
+  <div class="flex gap-2">
-    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
+    <input
-    <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
+      v-model="color"
-    -->
+      type="color"
-    <Input v-model:value="color" class="flex-1" />
+      class="h-8 w-12 cursor-pointer rounded border border-gray-300"
-  </InputGroup>
+    />
+    <Input v-model:value="color" class="flex-1" placeholder="请输入颜色值" />
+  </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+input[type='color'] {
+  &::-webkit-color-swatch-wrapper {
+    padding: 2px;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 2px;
+  }
+}
+</style>

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

@@ -131,13 +131,9 @@ const handleSliderChange = (prop: string) => {
     </TabPane>
 
     <!-- 每个组件的通用内容 -->
-    <TabPane tab="样式" key="style">
+    <TabPane tab="样式" key="style" force-render>
       <Card title="组件样式" class="property-group">
-        <Form
+        <Form :model="formData">
-          :model="formData"
-          label-col="{ span: 6 }"
-          wrapper-col="{ span: 18 }"
-        >
           <FormItem label="组件背景" name="bgType">
             <RadioGroup v-model:value="formData.bgType">
               <Radio value="color">纯色</Radio>
@@ -160,24 +156,22 @@ const handleSliderChange = (prop: string) => {
               <template #tip>建议宽度 750px</template>
             </UploadImg>
           </FormItem>
-          <Tree
+          <Tree :tree-data="treeData" default-expand-all>
-            :tree-data="treeData"
+            <template #title="{ dataRef }">
-            :expand-on-click-node="false"
-            default-expand-all
-          >
-            <template #title="{ data, node }">
               <FormItem
-                :label="data.label"
+                :label="dataRef.label"
-                :name="data.prop"
+                :name="dataRef.prop"
+                :label-col="dataRef.children ? { span: 6 } : { span: 5, offset: 1 }"
+                :wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }"
                 class="mb-0 w-full"
               >
                 <Slider
                   v-model:value="
-                    formData[data.prop as keyof ComponentStyle] as number
+                    formData[dataRef.prop as keyof ComponentStyle] as number
                   "
                   :max="100"
                   :min="0"
-                  @change="handleSliderChange(data.prop)"
+                  @change="handleSliderChange(dataRef.prop)"
                 />
               </FormItem>
             </template>
@@ -197,4 +191,14 @@ const handleSliderChange = (prop: string) => {
 :deep(.ant-input-number) {
   width: 50px;
 }
+
+:deep(.ant-tree) {
+  .ant-tree-node-content-wrapper {
+    flex: 1;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+}
 </style>

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

@@ -49,9 +49,7 @@ const emits = defineEmits<{
 type DiyComponentWithStyle = DiyComponent<any> & {
   property: { style?: ComponentStyle };
 };
-/**
+/** 组件样式 */
- * 组件样式
- */
 const style = computed(() => {
   const componentStyle = props.component.property.style;
   if (!componentStyle) {
@@ -78,38 +76,27 @@ const style = computed(() => {
   };
 });
 
-/**
+/** 移动组件 */
- * 移动组件
- * @param direction 移动方向
- */
 const handleMoveComponent = (direction: number) => {
   emits('move', direction);
 };
 
-/**
+/** 复制组件 */
- * 复制组件
- */
 const handleCopyComponent = () => {
   emits('copy');
 };
 
-/**
+/** 删除组件 */
- * 删除组件
- */
 const handleDeleteComponent = () => {
   emits('delete');
 };
 </script>
 <template>
-  <div class="component" :class="[{ active }]">
+  <div class="component relative cursor-move" :class="[{ active }]">
-    <div
+    <div :style="style">
-      :style="{
-        ...style,
-      }"
-    >
       <component :is="component.id" :property="component.property" />
     </div>
-    <div class="component-wrap">
+    <div class="component-wrap absolute left-[-2px] top-0 block h-full w-full">
       <!-- 左侧：组件名（悬浮的小贴条） -->
       <div class="component-name" v-if="component.name">
         {{ component.name }}
@@ -158,19 +145,8 @@ $hover-border-width: 1px;
 $name-position: -85px;
 $toolbar-position: -55px;
 
-/* 组件 */
 .component {
-  position: relative;
-  cursor: move;
-
   .component-wrap {
-    position: absolute;
-    top: 0;
-    left: -$active-border-width;
-    display: block;
-    width: 100%;
-    height: 100%;
-
     /* 鼠标放到组件上时 */
     &:hover {
       border: $hover-border-width dashed var(--ant-color-primary);
@@ -236,7 +212,7 @@ $toolbar-position: -55px;
     }
   }
 
-  /* 组件选中时 */
+  /* 选中状态 */
   &.active {
     margin-bottom: 4px;
 

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

@@ -14,16 +14,15 @@ import { componentConfigs } from './mobile/index';
 /** 组件库：目前左侧的【基础组件】、【图文组件】部分 */
 defineOptions({ name: 'ComponentLibrary' });
 
-// 组件列表
+/** 组件列表 */
 const props = defineProps<{
   list: DiyComponentLibrary[];
 }>();
-// 组件分组
-const groups = reactive<any[]>([]);
-// 展开的折叠面板
-const extendGroups = reactive<string[]>([]);
 
-// 监听 list 属性，按照 DiyComponentLibrary 的 name 分组
+const groups = reactive<any[]>([]); // 组件分组
+const extendGroups = reactive<string[]>([]); // 展开的折叠面板
+
+/** 监听 list 属性，按照 DiyComponentLibrary 的 name 分组 */
 watch(
   () => props.list,
   () => {
@@ -53,7 +52,7 @@ watch(
   },
 );
 
-// 克隆组件
+/** 克隆组件 */
 const handleCloneComponent = (component: DiyComponent<any>) => {
   const instance = cloneDeep(component);
   instance.uid = Date.now();
@@ -62,7 +61,9 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 </script>
 
 <template>
-  <div class="editor-left w-[261px]">
+  <aside
+    class="editor-left z-[1] w-[261px] shrink-0 select-none shadow-[8px_0_8px_-8px_rgb(0_0_0/0.12)]"
+  >
     <div class="h-full overflow-y-auto">
       <Collapse v-model:active-key="extendGroups">
         <CollapsePanel
@@ -71,7 +72,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
           :header="group.name"
         >
           <draggable
-            class="component-container"
+            class="flex flex-wrap items-center"
             ghost-class="draggable-ghost"
             item-key="index"
             :list="group.components"
@@ -79,13 +80,22 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
             :group="{ name: 'component', pull: 'clone', put: false }"
             :clone="handleCloneComponent"
             :animation="200"
-            :force-fallback="true"
+            :force-fallback="false"
           >
             <template #item="{ element }">
               <div>
-                <div class="drag-placement">组件放置区域</div>
+                <div class="hidden text-white">组件放置区域</div>
-                <div class="component">
+                <div
-                  <IconifyIcon :icon="element.icon" :size="32" />
+                  class="component flex h-[86px] w-[86px] cursor-move flex-col items-center justify-center border-b border-r [&:nth-of-type(3n)]:border-r-0"
+                  :style="{
+                    borderColor: 'var(--ant-color-split)',
+                  }"
+                >
+                  <IconifyIcon
+                    :icon="element.icon"
+                    :size="32"
+                    class="mb-1 text-gray-500"
+                  />
                   <span class="mt-1 text-xs">{{ element.name }}</span>
                 </div>
               </div>
@@ -94,16 +104,11 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
         </CollapsePanel>
       </Collapse>
     </div>
-  </div>
+  </aside>
 </template>
 
 <style scoped lang="scss">
 .editor-left {
-  z-index: 1;
-  flex-shrink: 0;
-  user-select: none;
-  box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
-
   :deep(.ant-collapse) {
     border-top: none;
   }
@@ -112,8 +117,8 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     border-bottom: none;
   }
 
-  :deep(.ant-collapse-content) {
+  :deep(.ant-collapse-content-box) {
-    padding-bottom: 0;
+    padding: 0;
   }
 
   :deep(.ant-collapse-header) {
@@ -124,50 +129,19 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     border-bottom: none;
   }
 
-  .component-container {
+  /* 组件 hover 和 active 状态（需要 CSS 变量）*/
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-
-  .component {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 86px;
-    height: 86px;
-    cursor: move;
-    border-right: 1px solid var(--ant-color-border-secondary);
-    border-bottom: 1px solid var(--ant-color-border-secondary);
-
-    .anticon {
-      margin-bottom: 4px;
-      color: gray;
-    }
-  }
-
   .component.active,
   .component:hover {
     color: var(--ant-color-white);
     background: var(--ant-color-primary);
 
-    .anticon {
+    :deep(.iconify) {
       color: var(--ant-color-white);
     }
   }
-
-  .component:nth-of-type(3n) {
-    border-right: none;
-  }
-}
-
-/* 拖拽占位提示，默认不显示 */
-.drag-placement {
-  display: none;
-  color: #fff;
 }
 
+/* 拖拽区域全局样式 */
 .drag-area {
   /* 拖拽到手机区域时的样式 */
   .draggable-ghost {
@@ -203,14 +177,12 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
       background: #5487df;
     }
 
-    /* 拖拽时隐藏组件 */
     .component {
-      display: none;
+      display: none; /* 拖拽时隐藏组件 */
     }
 
-    /* 拖拽时显示占位提示 */
+    .hidden {
-    .drag-placement {
+      display: block !important; /* 拖拽时显示占位提示 */
-      display: block;
     }
   }
 }

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts

@@ -2,32 +2,24 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 轮播图属性 */
 export interface CarouselProperty {
-  // 类型：默认 | 卡片
+  type: 'card' | 'default'; // 类型：默认 | 卡片
-  type: 'card' | 'default';
+  indicator: 'dot' | 'number'; // 指示器样式：点 | 数字
-  // 指示器样式：点 | 数字
+  autoplay: boolean; // 是否自动播放
-  indicator: 'dot' | 'number';
+  interval: number; // 播放间隔
-  // 是否自动播放
+  height: number; // 轮播高度
-  autoplay: boolean;
+  items: CarouselItemProperty[]; // 轮播内容
-  // 播放间隔
+  style: ComponentStyle; // 组件样式
-  interval: number;
-  // 轮播内容
-  items: CarouselItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
-}
-// 轮播内容属性
-export interface CarouselItemProperty {
-  // 类型：图片 | 视频
-  type: 'img' | 'video';
-  // 图片链接
-  imgUrl: string;
-  // 视频链接
-  videoUrl: string;
-  // 跳转链接
-  url: string;
 }
 
-// 定义组件
+/** 轮播内容属性 */
+export interface CarouselItemProperty {
+  type: 'img' | 'video'; // 类型：图片 | 视频
+  imgUrl: string; // 图片链接
+  videoUrl: string; // 视频链接
+  url: string; // 跳转链接
+}
+
+/** 定义组件 */
 export const component = {
   id: 'Carousel',
   name: '轮播图',
@@ -37,6 +29,7 @@ export const component = {
     indicator: 'dot',
     autoplay: false,
     interval: 3,
+    height: 174,
     items: [
       {
         type: 'img',

apps/web-antd/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-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue

@@ -1,4 +1,100 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { DividerProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Form,
+  FormItem,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { ColorInput } from '#/views/mall/promotion/components';
+
+/** 导航栏属性面板 */
+defineOptions({ name: 'DividerProperty' });
+
+const props = defineProps<{ modelValue: DividerProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const BORDER_TYPES = [
+  {
+    icon: 'vaadin:line-h',
+    text: '实线',
+    type: 'solid',
+  },
+  {
+    icon: 'tabler:line-dashed',
+    text: '虚线',
+    type: 'dashed',
+  },
+  {
+    icon: 'tabler:line-dotted',
+    text: '点线',
+    type: 'dotted',
+  },
+  {
+    icon: 'entypo:progress-empty',
+    text: '无',
+    type: 'none',
+  },
+]; // 线类型
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <Form :model="formData">
+    <FormItem label="高度" name="height">
+      <Slider
+        v-model:value="formData.height"
+        :min="1"
+        :max="100"
+      />
+    </FormItem>
+    <FormItem label="选择样式" name="borderType">
+      <RadioGroup v-model:value="formData!.borderType">
+        <Tooltip
+          placement="top"
+          v-for="(item, index) in BORDER_TYPES"
+          :key="index"
+          :title="item.text"
+        >
+          <RadioButton :value="item.type">
+            <IconifyIcon :icon="item.icon" />
+          </RadioButton>
+        </Tooltip>
+      </RadioGroup>
+    </FormItem>
+    <template v-if="formData.borderType !== 'none'">
+      <FormItem label="线宽" name="lineWidth">
+        <Slider
+          v-model:value="formData.lineWidth"
+          :min="1"
+          :max="30"
+        />
+      </FormItem>
+      <FormItem label="左右边距" name="paddingType">
+        <RadioGroup v-model:value="formData!.paddingType">
+          <Tooltip title="无边距" placement="top">
+            <RadioButton value="none">
+              <IconifyIcon icon="tabler:box-padding" />
+            </RadioButton>
+          </Tooltip>
+          <Tooltip title="左右留边" placement="top">
+            <RadioButton value="horizontal">
+              <IconifyIcon icon="vaadin:padding" />
+            </RadioButton>
+          </Tooltip>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="颜色">
+        <ColorInput v-model="formData.lineColor" />
+      </FormItem>
+    </template>
+  </Form>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts

@@ -2,19 +2,17 @@ import type { DiyComponent } from '../../../util';
 
 /** 弹窗广告属性 */
 export interface PopoverProperty {
-  list: PopoverItemProperty[];
+  list: PopoverItemProperty[]; // 弹窗列表
 }
 
+/** 弹窗广告项目属性 */
 export interface PopoverItemProperty {
-  // 图片地址
+  imgUrl: string; // 图片地址
-  imgUrl: string;
+  url: string; // 跳转连接
-  // 跳转连接
+  showType: 'always' | 'once'; // 显示类型：仅显示一次、每次启动都会显示
-  url: string;
-  // 显示类型：仅显示一次、每次启动都会显示
-  showType: 'always' | 'once';
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'Popover',
   name: '弹窗广告',

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

@@ -1,4 +1,57 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { PopoverProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
+
+/** 弹窗广告属性面板 */
+defineOptions({ name: 'PopoverProperty' });
+
+const props = defineProps<{ modelValue: PopoverProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <Form :model="formData">
+    <Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
+      <template #default="{ element, index }">
+        <FormItem label="图片" :name="`list[${index}].imgUrl`">
+          <UploadImg
+            v-model="element.imgUrl"
+            height="56px"
+            width="56px"
+            :show-description="false"
+          />
+        </FormItem>
+        <FormItem label="跳转链接" :name="`list[${index}].url`">
+          <AppLinkInput v-model="element.url" />
+        </FormItem>
+        <FormItem label="显示次数" :name="`list[${index}].showType`">
+          <RadioGroup v-model:value="element.showType">
+            <Tooltip
+              title="只显示一次，下次打开时不显示"
+              placement="bottom"
+            >
+              <Radio value="once">一次</Radio>
+            </Tooltip>
+            <Tooltip title="每次打开时都会显示" placement="bottom">
+              <Radio value="always">不限</Radio>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+      </template>
+    </Draggable>
+  </Form>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts

@@ -1,29 +1,20 @@
 import type { ComponentStyle, DiyComponent } from '../../../util';
 
-/** 商品卡片属性 */
+/** 优惠劵卡片属性 */
 export interface CouponCardProperty {
-  // 列数
+  columns: number; // 列数
-  columns: number;
+  bgImg: string; // 背景图
-  // 背景图
+  textColor: string; // 文字颜色
-  bgImg: string;
-  // 文字颜色
-  textColor: string;
-  // 按钮样式
   button: {
-    // 背景颜色
+    bgColor: string; // 背景颜色
-    bgColor: string;
+    color: string; // 文字颜色
-    // 颜色
+  }; // 按钮样式
-    color: string;
+  space: number; // 间距
-  };
+  couponIds: number[]; // 优惠券编号列表
-  // 间距
+  style: ComponentStyle; // 组件样式
-  space: number;
-  // 优惠券编号列表
-  couponIds: number[];
-  // 组件样式
-  style: ComponentStyle;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'CouponCard',
   name: '优惠券',

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

@@ -1,4 +1,176 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { CouponCardProperty } from './config';
+
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  CouponTemplateTakeTypeEnum,
+  PromotionDiscountTypeEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { floatToFixed2 } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Button,
+  Card,
+  Form,
+  FormItem,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Tooltip,
+  Typography,
+} from 'ant-design-vue';
+
+import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+import CouponSelect from '#/views/mall/promotion/coupon/components/select.vue';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+const { Text: ATypographyText } = Typography;
+
+/** 优惠券卡片属性面板 */
+defineOptions({ name: 'CouponCardProperty' });
+
+const props = defineProps<{ modelValue: CouponCardProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 已选择的优惠券列表
+
+const [CouponSelectModal, couponSelectModalApi] = useVbenModal({
+  connectedComponent: CouponSelect,
+  destroyOnClose: true,
+});
+
+/** 添加优惠劵 */
+const handleAddCoupon = () => {
+  couponSelectModalApi.open();
+};
+
+/** 处理优惠劵选择 */
+const handleCouponSelect = (
+  selectedCoupons: MallCouponTemplateApi.CouponTemplate[],
+) => {
+  couponList.value = selectedCoupons;
+  formData.value.couponIds = selectedCoupons.map((coupon) => coupon.id);
+};
+
+/** 监听优惠券 ID 变化，加载优惠券列表 */
+watch(
+  () => formData.value.couponIds,
+  async () => {
+    if (formData.value.couponIds?.length > 0) {
+      couponList.value = await CouponTemplateApi.getCouponTemplateList(
+        formData.value.couponIds,
+      );
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData">
+      <Card title="优惠券列表" class="property-group">
+        <div
+          v-for="(coupon, index) in couponList"
+          :key="index"
+          class="flex items-center justify-between"
+        >
+          <ATypographyText ellipsis class="text-base">{{ coupon.name }}</ATypographyText>
+          <ATypographyText type="secondary" ellipsis>
+            <span v-if="coupon.usePrice > 0">
+              满{{ floatToFixed2(coupon.usePrice) }}元，
+            </span>
+            <span
+              v-if="
+                coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+              "
+            >
+              减{{ floatToFixed2(coupon.discountPrice) }}元
+            </span>
+            <span v-else> 打{{ coupon.discountPercent }}折 </span>
+          </ATypographyText>
+        </div>
+        <FormItem>
+          <Button
+            @click="handleAddCoupon"
+            type="primary"
+            ghost
+            class="mt-2 w-full"
+          >
+            <template #icon>
+              <IconifyIcon icon="ep:plus" />
+            </template>
+            添加
+          </Button>
+        </FormItem>
+      </Card>
+      <Card title="优惠券样式" class="property-group">
+        <FormItem label="列数" name="type">
+          <RadioGroup v-model:value="formData.columns">
+            <Tooltip title="一列" placement="bottom">
+              <RadioButton :value="1">
+                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="二列" placement="bottom">
+              <RadioButton :value="2">
+                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="三列" placement="bottom">
+              <RadioButton :value="3">
+                <IconifyIcon icon="fluent:text-column-three-24-filled" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="背景图片" name="bgImg">
+          <UploadImg
+            v-model="formData.bgImg"
+            height="80px"
+            width="100%"
+            class="min-w-[160px]"
+            :show-description="false"
+          />
+        </FormItem>
+        <FormItem label="文字颜色" name="textColor">
+          <ColorInput v-model="formData.textColor" />
+        </FormItem>
+        <FormItem label="按钮背景" name="button.bgColor">
+          <ColorInput v-model="formData.button.bgColor" />
+        </FormItem>
+        <FormItem label="按钮文字" name="button.color">
+          <ColorInput v-model="formData.button.color" />
+        </FormItem>
+        <FormItem label="间隔" name="space">
+          <Slider
+            v-model:value="formData.space"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+
+  <!-- 优惠券选择 -->
+  <CouponSelectModal
+    :take-type="CouponTemplateTakeTypeEnum.USER.type"
+    @success="handleCouponSelect"
+  />
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts

@@ -1,28 +1,21 @@
 import type { DiyComponent } from '../../../util';
 
-// 悬浮按钮属性
+/** 悬浮按钮属性 */
 export interface FloatingActionButtonProperty {
-  // 展开方向
+  direction: 'horizontal' | 'vertical'; // 展开方向
-  direction: 'horizontal' | 'vertical';
+  showText: boolean; // 是否显示文字
-  // 是否显示文字
+  list: FloatingActionButtonItemProperty[]; // 按钮列表
-  showText: boolean;
-  // 按钮列表
-  list: FloatingActionButtonItemProperty[];
 }
 
-// 悬浮按钮项属性
+/** 悬浮按钮项属性 */
 export interface FloatingActionButtonItemProperty {
-  // 图片地址
+  imgUrl: string; // 图片地址
-  imgUrl: string;
+  url: string; // 跳转连接
-  // 跳转连接
+  text: string; // 文字
-  url: string;
+  textColor: string; // 文字颜色
-  // 文字
-  text: string;
-  // 文字颜色
-  textColor: string;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'FloatingActionButton',
   name: '悬浮按钮',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue

@@ -1,4 +1,68 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { FloatingActionButtonProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Switch,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  Draggable,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
+
+/** 悬浮按钮属性面板 */
+defineOptions({ name: 'FloatingActionButtonProperty' });
+
+const props = defineProps<{ modelValue: FloatingActionButtonProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <Form :model="formData">
+    <Card title="按钮配置" class="property-group">
+      <FormItem label="展开方向" name="direction">
+        <RadioGroup v-model:value="formData.direction">
+          <Radio value="vertical">垂直</Radio>
+          <Radio value="horizontal">水平</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="显示文字" name="showText">
+        <Switch v-model:checked="formData.showText" />
+      </FormItem>
+    </Card>
+    <Card title="按钮列表" class="property-group">
+      <Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
+        <template #default="{ element, index }">
+          <FormItem label="图标" :name="`list[${index}].imgUrl`">
+            <UploadImg
+              v-model="element.imgUrl"
+              height="56px"
+              width="56px"
+              :show-description="false"
+            />
+          </FormItem>
+          <FormItem label="文字" :name="`list[${index}].text`">
+            <InputWithColor
+              v-model="element.text"
+              v-model:color="element.textColor"
+            />
+          </FormItem>
+          <FormItem label="跳转链接" :name="`list[${index}].url`">
+            <AppLinkInput v-model="element.url" />
+          </FormItem>
+        </template>
+      </Draggable>
+    </Card>
+  </Form>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue

@@ -1,4 +1,245 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { HotZoneItemProperty } from '../../config';
+import type { ControlDot } from './controller';
+
+import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Image } from 'ant-design-vue';
+
+import { AppLinkSelectDialog } from '#/views/mall/promotion/components';
+
+import {
+  CONTROL_DOT_LIST,
+  CONTROL_TYPE_ENUM,
+  HOT_ZONE_MIN_SIZE,
+  useDraggable,
+  zoomIn,
+  zoomOut,
+} from './controller';
+
+/** 热区编辑对话框 */
+defineOptions({ name: 'HotZoneEditDialog' });
+
+/** 定义属性 */
+const props = defineProps({
+  modelValue: {
+    type: Array<HotZoneItemProperty>,
+    default: () => [],
+  },
+  imgUrl: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = ref<HotZoneItemProperty[]>([]);
+
+const [Modal, modalApi] = useVbenModal({
+  showCancelButton: false,
+  onConfirm() {
+    const list = zoomOut(formData.value);
+    emit('update:modelValue', list);
+    modalApi.close();
+  },
+});
+
+/** 打开弹窗 */
+function open() {
+  // 放大
+  formData.value = zoomIn(props.modelValue);
+  modalApi.open();
+}
+
+defineExpose({ open }); // 提供 open 方法，用于打开弹窗
+
+const container = ref<HTMLDivElement>(); // 热区容器
+
+/** 增加热区 */
+function handleAdd() {
+  formData.value.push({
+    width: HOT_ZONE_MIN_SIZE,
+    height: HOT_ZONE_MIN_SIZE,
+    top: 0,
+    left: 0,
+  } as HotZoneItemProperty);
+}
+
+/** 删除热区 */
+function handleRemove(hotZone: HotZoneItemProperty) {
+  formData.value = formData.value.filter((item) => item !== hotZone);
+}
+
+/** 移动热区 */
+function handleMove(item: HotZoneItemProperty, e: MouseEvent) {
+  useDraggable(item, e, (left, top, _, __, moveWidth, moveHeight) => {
+    setLeft(item, left + moveWidth);
+    setTop(item, top + moveHeight);
+  });
+}
+
+/** 调整热区大小、位置 */
+function handleResize(
+  item: HotZoneItemProperty,
+  ctrlDot: ControlDot,
+  e: MouseEvent,
+) {
+  useDraggable(item, e, (left, top, width, height, moveWidth, moveHeight) => {
+    ctrlDot.types.forEach((type) => {
+      switch (type) {
+        case CONTROL_TYPE_ENUM.HEIGHT: {
+          {
+            // 左移时，宽度为减少
+            const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.TOP)
+              ? -1
+              : 1;
+            setHeight(item, height + moveHeight * direction);
+          }
+          break;
+        }
+        case CONTROL_TYPE_ENUM.LEFT: {
+          setLeft(item, left + moveWidth);
+          break;
+        }
+        case CONTROL_TYPE_ENUM.TOP: {
+          setTop(item, top + moveHeight);
+          break;
+        }
+        case CONTROL_TYPE_ENUM.WIDTH: {
+          {
+            // 上移时，高度为减少
+            const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.LEFT)
+              ? -1
+              : 1;
+            setWidth(item, width + moveWidth * direction);
+          }
+          break;
+        }
+      }
+    });
+  });
+}
+
+/** 设置 X 轴坐标 */
+function setLeft(item: HotZoneItemProperty, left: number) {
+  // 不能超出容器
+  if (left >= 0 && left <= container.value!.offsetWidth - item.width) {
+    item.left = left;
+  }
+}
+
+/** 设置Y轴坐标 */
+function setTop(item: HotZoneItemProperty, top: number) {
+  // 不能超出容器
+  if (top >= 0 && top <= container.value!.offsetHeight - item.height) {
+    item.top = top;
+  }
+}
+
+/** 设置宽度 */
+const setWidth = (item: HotZoneItemProperty, width: number) => {
+  // 不能小于最小宽度 && 不能超出容器右边
+  if (
+    width >= HOT_ZONE_MIN_SIZE &&
+    item.left + width <= container.value!.offsetWidth
+  ) {
+    item.width = width;
+  }
+};
+
+/** 设置高度 */
+const setHeight = (item: HotZoneItemProperty, height: number) => {
+  // 不能小于最小高度 && 不能超出容器底部
+  if (
+    height >= HOT_ZONE_MIN_SIZE &&
+    item.top + height <= container.value!.offsetHeight
+  ) {
+    item.height = height;
+  }
+};
+
+const activeHotZone = ref<HotZoneItemProperty>();
+const appLinkDialogRef = ref();
+
+/** 显示 App 链接选择对话框 */
+const handleShowAppLinkDialog = (hotZone: HotZoneItemProperty) => {
+  activeHotZone.value = hotZone;
+  appLinkDialogRef.value.open(hotZone.url);
+};
+
+/** 处理 App 链接选择变更 */
+const handleAppLinkChange = (appLink: AppLink) => {
+  if (!appLink || !activeHotZone.value) {
+    return;
+  }
+  activeHotZone.value.name = appLink.name;
+  activeHotZone.value.url = appLink.path;
+};
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <Modal title="设置热区" class="w-[780px]">
+    <div ref="container" class="w-750px relative h-full">
+      <Image
+        :src="imgUrl"
+        :preview="false"
+        class="w-750px pointer-events-none h-full select-none"
+      />
+      <div
+        v-for="(item, hotZoneIndex) in formData"
+        :key="hotZoneIndex"
+        class="group absolute z-10 flex cursor-move items-center justify-center border text-base opacity-80"
+        :style="{
+          width: `${item.width}px`,
+          height: `${item.height}px`,
+          top: `${item.top}px`,
+          left: `${item.left}px`,
+          color: 'var(--ant-color-primary)',
+          background: 'color-mix(in srgb, var(--ant-color-primary) 30%, transparent)',
+          borderColor: 'var(--ant-color-primary)',
+        }"
+        @mousedown="handleMove(item, $event)"
+        @dblclick="handleShowAppLinkDialog(item)"
+      >
+        <span class="pointer-events-none select-none">
+          {{ item.name || '双击选择链接' }}
+        </span>
+        <IconifyIcon
+          icon="ep:close"
+          class="absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
+          :style="{ backgroundColor: 'var(--ant-color-primary)' }"
+          :size="14"
+          @click="handleRemove(item)"
+        />
+
+        <!-- 8 个控制点 -->
+        <span
+          class="ctrl-dot absolute z-[11] h-2 w-2 rounded-full bg-white"
+          v-for="(dot, dotIndex) in CONTROL_DOT_LIST"
+          :key="dotIndex"
+          :style="{ ...dot.style, border: 'inherit' }"
+          @mousedown="handleResize(item, dot, $event)"
+        ></span>
+      </div>
+    </div>
+    <template #prepend-footer>
+      <Button @click="handleAdd" type="primary" ghost>
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        添加热区
+      </Button>
+    </template>
+  </Modal>
+
+  <AppLinkSelectDialog
+    ref="appLinkDialogRef"
+    @app-link-change="handleAppLinkChange"
+  />
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts

@@ -2,31 +2,22 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 热区属性 */
 export interface HotZoneProperty {
-  // 图片地址
+  imgUrl: string; // 图片地址
-  imgUrl: string;
+  list: HotZoneItemProperty[]; // 导航菜单列表
-  // 导航菜单列表
+  style: ComponentStyle; // 组件样式
-  list: HotZoneItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
 }
 
 /** 热区项目属性 */
 export interface HotZoneItemProperty {
-  // 链接的名称
+  name: string; // 链接的名称
-  name: string;
+  url: string; // 链接
-  // 链接
+  width: number; // 宽
-  url: string;
+  height: number; // 高
-  // 宽
+  top: number; // 上
-  width: number;
+  left: number; // 左
-  // 高
-  height: number;
-  // 上
-  top: number;
-  // 左
-  left: number;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'HotZone',
   name: '热区',

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

@@ -2,15 +2,12 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 图片展示属性 */
 export interface ImageBarProperty {
-  // 图片链接
+  imgUrl: string; // 图片链接
-  imgUrl: string;
+  url: string; // 跳转链接
-  // 跳转链接
+  style: ComponentStyle; // 组件样式
-  url: string;
-  // 组件样式
-  style: ComponentStyle;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'ImageBar',
   name: '图片展示',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts

@@ -2,39 +2,24 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 广告魔方属性 */
 export interface MagicCubeProperty {
-  // 上圆角
+  borderRadiusTop: number; // 上圆角
-  borderRadiusTop: number;
+  borderRadiusBottom: number; // 下圆角
-  // 下圆角
+  space: number; // 间隔
-  borderRadiusBottom: number;
+  list: MagicCubeItemProperty[]; // 导航菜单列表
-  // 间隔
+  style: ComponentStyle; // 组件样式
-  space: number;
-  // 导航菜单列表
-  list: MagicCubeItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
 }
 
 /** 广告魔方项目属性 */
 export interface MagicCubeItemProperty {
-  // 图标链接
+  imgUrl: string; // 图标链接
-  imgUrl: string;
+  url: string; // 链接
-  // 链接
+  width: number; // 宽
-  url: string;
+  height: number; // 高
-  // 宽
+  top: number; // 上
-  width: number;
+  left: number; // 左
-  // 高
-  height: number;
-  // 上
-  top: number;
-  // 左
-  left: number;
-  // 右
-  right: number;
-  // 下
-  bottom: number;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MagicCube',
   name: '广告魔方',

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

@@ -1,4 +1,86 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { MagicCubeProperty } from './config';
+
+import { ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { Form, FormItem, Slider, Typography } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  MagicCubeEditor,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+const { Text: ATypographyText } = Typography;
+
+/** 广告魔方属性面板 */
+defineOptions({ name: 'MagicCubeProperty' });
+
+const props = defineProps<{ modelValue: MagicCubeProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+const selectedHotAreaIndex = ref(-1); // 选中的热区
+
+/** 处理热区被选中事件 */
+const handleHotAreaSelected = (_: any, index: number) => {
+  selectedHotAreaIndex.value = index;
+};
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData" class="mt-2">
+      <ATypographyText tag="p"> 魔方设置 </ATypographyText>
+      <ATypographyText type="secondary" class="text-sm"> 每格尺寸187 * 187 </ATypographyText>
+      <MagicCubeEditor
+        class="my-4"
+        v-model="formData.list"
+        :rows="4"
+        :cols="4"
+        @hot-area-selected="handleHotAreaSelected"
+      />
+      <template v-for="(hotArea, index) in formData.list" :key="index">
+        <template v-if="selectedHotAreaIndex === index">
+          <FormItem label="上传图片" :name="`list[${index}].imgUrl`">
+            <UploadImg
+              v-model="hotArea.imgUrl"
+              height="80px"
+              width="80px"
+              :show-description="false"
+            />
+          </FormItem>
+          <FormItem label="链接" :name="`list[${index}].url`">
+            <AppLinkInput v-model="hotArea.url" />
+          </FormItem>
+        </template>
+      </template>
+      <FormItem label="上圆角" name="borderRadiusTop">
+        <Slider
+          v-model:value="formData.borderRadiusTop"
+          :max="100"
+          :min="0"
+        />
+      </FormItem>
+      <FormItem label="下圆角" name="borderRadiusBottom">
+        <Slider
+          v-model:value="formData.borderRadiusBottom"
+          :max="100"
+          :min="0"
+        />
+      </FormItem>
+      <FormItem label="间隔" name="space">
+        <Slider
+          v-model:value="formData.space"
+          :max="100"
+          :min="0"
+        />
+      </FormItem>
+    </Form>
+  </ComponentContainerProperty>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts

@@ -4,41 +4,28 @@ import { cloneDeep } from '@vben/utils';
 
 /** 宫格导航属性 */
 export interface MenuGridProperty {
-  // 列数
+  column: number; // 列数
-  column: number;
+  list: MenuGridItemProperty[]; // 导航菜单列表
-  // 导航菜单列表
+  style: ComponentStyle; // 组件样式
-  list: MenuGridItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
 }
 
 /** 宫格导航项目属性 */
 export interface MenuGridItemProperty {
-  // 图标链接
+  iconUrl: string; // 图标链接
-  iconUrl: string;
+  title: string; // 标题
-  // 标题
+  titleColor: string; // 标题颜色
-  title: string;
+  subtitle: string; // 副标题
-  // 标题颜色
+  subtitleColor: string; // 副标题颜色
-  titleColor: string;
+  url: string; // 链接
-  // 副标题
-  subtitle: string;
-  // 副标题颜色
-  subtitleColor: string;
-  // 链接
-  url: string;
-  // 角标
   badge: {
-    // 角标背景颜色
+    bgColor: string; // 角标背景颜色
-    bgColor: string;
+    show: boolean; // 是否显示
-    // 是否显示
+    text: string; // 角标文字
-    show: boolean;
+    textColor: string; // 角标文字颜色
-    // 角标文字
-    text: string;
-    // 角标文字颜色
-    textColor: string;
   };
 }
 
+/** 宫格导航项目默认属性 */
 export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
   title: '标题',
   titleColor: '#333',
@@ -51,7 +38,7 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
   },
 } as MenuGridItemProperty;
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MenuGrid',
   name: '宫格导航',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts

@@ -4,28 +4,21 @@ import { cloneDeep } from '@vben/utils';
 
 /** 列表导航属性 */
 export interface MenuListProperty {
-  // 导航菜单列表
+  list: MenuListItemProperty[]; // 导航菜单列表
-  list: MenuListItemProperty[];
+  style: ComponentStyle; // 组件样式
-  // 组件样式
-  style: ComponentStyle;
 }
 
 /** 列表导航项目属性 */
 export interface MenuListItemProperty {
-  // 图标链接
+  iconUrl: string; // 图标链接
-  iconUrl: string;
+  title: string; // 标题
-  // 标题
+  titleColor: string; // 标题颜色
-  title: string;
+  subtitle: string; // 副标题
-  // 标题颜色
+  subtitleColor: string; // 副标题颜色
-  titleColor: string;
+  url: string; // 链接
-  // 副标题
-  subtitle: string;
-  // 副标题颜色
-  subtitleColor: string;
-  // 链接
-  url: string;
 }
 
+/** 空的列表导航项目属性 */
 export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
   title: '标题',
   titleColor: '#333',
@@ -33,7 +26,7 @@ export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
   subtitleColor: '#bbb',
 };
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MenuList',
   name: '列表导航',

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

@@ -1,4 +1,68 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { MenuListProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { Form, Typography } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  Draggable,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
+
+const { Text: ATypographyText } = Typography;
+
+/** 列表导航属性面板 */
+defineOptions({ name: 'MenuListProperty' });
+
+const props = defineProps<{ modelValue: MenuListProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ATypographyText tag="p"> 菜单设置 </ATypographyText>
+    <ATypographyText type="secondary" class="text-sm"> 拖动左侧的小圆点可以调整顺序 </ATypographyText>
+    <Form :model="formData" class="mt-2">
+      <Draggable
+        v-model="formData.list"
+        :empty-item="EMPTY_MENU_LIST_ITEM_PROPERTY"
+      >
+        <template #default="{ element }">
+          <FormItem label="图标" name="iconUrl">
+            <UploadImg
+              v-model="element.iconUrl"
+              height="80px"
+              width="80px"
+              :show-description="false"
+            >
+              <template #tip> 建议尺寸：44 * 44 </template>
+            </UploadImg>
+          </FormItem>
+          <FormItem label="标题" name="title">
+            <InputWithColor
+              v-model="element.title"
+              v-model:color="element.titleColor"
+            />
+          </FormItem>
+          <FormItem label="副标题" name="subtitle">
+            <InputWithColor
+              v-model="element.subtitle"
+              v-model:color="element.subtitleColor"
+            />
+          </FormItem>
+          <FormItem label="链接" name="url">
+            <AppLinkInput v-model="element.url" />
+          </FormItem>
+        </template>
+      </Draggable>
+    </Form>
+  </ComponentContainerProperty>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts

@@ -4,40 +4,28 @@ import { cloneDeep } from '@vben/utils';
 
 /** 菜单导航属性 */
 export interface MenuSwiperProperty {
-  // 布局： 图标+文字 | 图标
+  layout: 'icon' | 'iconText'; // 布局：图标+文字 | 图标
-  layout: 'icon' | 'iconText';
+  row: number; // 行数
-  // 行数
+  column: number; // 列数
-  row: number;
+  list: MenuSwiperItemProperty[]; // 导航菜单列表
-  // 列数
+  style: ComponentStyle; // 组件样式
-  column: number;
-  // 导航菜单列表
-  list: MenuSwiperItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
-}
-/** 菜单导航项目属性 */
-export interface MenuSwiperItemProperty {
-  // 图标链接
-  iconUrl: string;
-  // 标题
-  title: string;
-  // 标题颜色
-  titleColor: string;
-  // 链接
-  url: string;
-  // 角标
-  badge: {
-    // 角标背景颜色
-    bgColor: string;
-    // 是否显示
-    show: boolean;
-    // 角标文字
-    text: string;
-    // 角标文字颜色
-    textColor: string;
-  };
 }
 
+/** 菜单导航项目属性 */
+export interface MenuSwiperItemProperty {
+  iconUrl: string; // 图标链接
+  title: string; // 标题
+  titleColor: string; // 标题颜色
+  url: string; // 链接
+  badge: {
+    bgColor: string; // 角标背景颜色
+    show: boolean; // 是否显示
+    text: string; // 角标文字
+    textColor: string; // 角标文字颜色
+  }; // 角标
+}
+
+/** 空菜单导航项目属性 */
 export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
   title: '标题',
   titleColor: '#333',
@@ -48,7 +36,7 @@ export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
   },
 } as MenuSwiperItemProperty;
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MenuSwiper',
   name: '菜单导航',

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

@@ -1,4 +1,103 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { MenuSwiperProperty } from './config';
+
+import { cloneDeep } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Switch,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
+
+/** 菜单导航属性面板 */
+defineOptions({ name: 'MenuSwiperProperty' });
+
+const props = defineProps<{ modelValue: MenuSwiperProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData" class="mt-2">
+      <FormItem label="布局" name="layout">
+        <RadioGroup v-model:value="formData.layout">
+          <Radio value="iconText">图标+文字</Radio>
+          <Radio value="icon">仅图标</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="行数" name="row">
+        <RadioGroup v-model:value="formData.row">
+          <Radio :value="1">1行</Radio>
+          <Radio :value="2">2行</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="列数" name="column">
+        <RadioGroup v-model:value="formData.column">
+          <Radio :value="3">3列</Radio>
+          <Radio :value="4">4列</Radio>
+          <Radio :value="5">5列</Radio>
+        </RadioGroup>
+      </FormItem>
+      <Card title="菜单设置" class="property-group">
+        <Draggable
+          v-model="formData.list"
+          :empty-item="cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)"
+        >
+          <template #default="{ element }">
+            <FormItem label="图标" name="iconUrl">
+              <UploadImg
+                v-model="element.iconUrl"
+                height="80px"
+                width="80px"
+                :show-description="false"
+              >
+                <template #tip> 建议尺寸：98 * 98 </template>
+              </UploadImg>
+            </FormItem>
+            <FormItem label="标题" name="title">
+              <InputWithColor
+                v-model="element.title"
+                v-model:color="element.titleColor"
+              />
+            </FormItem>
+            <FormItem label="链接" name="url">
+              <AppLinkInput v-model="element.url" />
+            </FormItem>
+            <FormItem label="显示角标" name="badge.show">
+              <Switch v-model:checked="element.badge.show" />
+            </FormItem>
+            <template v-if="element.badge.show">
+              <FormItem label="角标内容" name="badge.text">
+                <InputWithColor
+                  v-model="element.badge.text"
+                  v-model:color="element.badge.textColor"
+                />
+              </FormItem>
+              <FormItem label="背景颜色" name="badge.bgColor">
+                <ColorInput v-model="element.badge.bgColor" />
+              </FormItem>
+            </template>
+          </template>
+        </Draggable>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>

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

@@ -2,56 +2,38 @@ import type { DiyComponent } from '../../../util';
 
 /** 顶部导航栏属性 */
 export interface NavigationBarProperty {
-  // 背景类型
+  bgType: 'color' | 'img'; // 背景类型
-  bgType: 'color' | 'img';
+  bgColor: string; // 背景颜色
-  // 背景颜色
+  bgImg: string; // 图片链接
-  bgColor: string;
+  styleType: 'inner' | 'normal'; // 样式类型：默认 | 沉浸式
-  // 图片链接
+  alwaysShow: boolean; // 常驻显示
-  bgImg: string;
+  mpCells: NavigationBarCellProperty[]; // 小程序单元格列表
-  // 样式类型：默认 | 沉浸式
+  otherCells: NavigationBarCellProperty[]; // 其它平台单元格列表
-  styleType: 'inner' | 'normal';
-  // 常驻显示
-  alwaysShow: boolean;
-  // 小程序单元格列表
-  mpCells: NavigationBarCellProperty[];
-  // 其它平台单元格列表
-  otherCells: NavigationBarCellProperty[];
-  // 本地变量
   _local: {
-    // 预览顶部导航（小程序）
+    previewMp: boolean; // 预览顶部导航（小程序）
-    previewMp: boolean;
+    previewOther: boolean; // 预览顶部导航（非小程序）
-    // 预览顶部导航（非小程序）
+  }; // 本地变量
-    previewOther: boolean;
-  };
 }
 
 /** 顶部导航栏 - 单元格 属性 */
 export interface NavigationBarCellProperty {
-  // 类型：文字 | 图片 | 搜索框
+  type: 'image' | 'search' | 'text'; // 类型：文字 | 图片 | 搜索框
-  type: 'image' | 'search' | 'text';
+  width: number; // 宽度
-  // 宽度
+  height: number; // 高度
-  width: number;
+  top: number; // 顶部位置
-  // 高度
+  left: number; // 左侧位置
-  height: number;
+  text: string; // 文字内容
-  // 顶部位置
+  textColor: string; // 文字颜色
-  top: number;
+  imgUrl: string; // 图片地址
-  // 左侧位置
+  url: string; // 图片链接
-  left: number;
+  backgroundColor: string; // 搜索框：框体颜色
-  // 文字内容
+  placeholder: string; // 搜索框：提示文字
-  text: string;
+  placeholderPosition: string; // 搜索框：提示文字位置
-  // 文字颜色
+  showScan: boolean; // 搜索框：是否显示扫一扫
-  textColor: string;
+  borderRadius: number; // 搜索框：边框圆角半径
-  // 图片地址
-  imgUrl: string;
-  // 图片链接
-  url: string;
-  // 搜索框：提示文字
-  placeholder: string;
-  // 搜索框：边框圆角半径
-  borderRadius: number;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'NavigationBar',
   name: '顶部导航栏',

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

@@ -2,27 +2,20 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 公告栏属性 */
 export interface NoticeBarProperty {
-  // 图标地址
+  iconUrl: string; // 图标地址
-  iconUrl: string;
+  contents: NoticeContentProperty[]; // 公告内容列表
-  // 公告内容列表
+  backgroundColor: string; // 背景颜色
-  contents: NoticeContentProperty[];
+  textColor: string; // 文字颜色
-  // 背景颜色
+  style: ComponentStyle; // 组件样式
-  backgroundColor: string;
-  // 文字颜色
-  textColor: string;
-  // 组件样式
-  style: ComponentStyle;
 }
 
 /** 内容属性 */
 export interface NoticeContentProperty {
-  // 内容文字
+  text: string; // 内容文字
-  text: string;
+  url: string; // 链接地址
-  // 链接地址
-  url: string;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'NoticeBar',
   name: '公告栏',

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

@@ -1,4 +1,61 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { NoticeBarProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { Card, Form, FormItem, Input } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 公告栏属性面板 */
+defineOptions({ name: 'NoticeBarProperty' });
+
+const props = defineProps<{ modelValue: NoticeBarProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+const rules = {
+  content: [{ required: true, message: '请输入公告', trigger: 'blur' }],
+}; // 表单校验
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData" :rules="rules">
+      <FormItem label="公告图标" name="iconUrl">
+        <UploadImg
+          v-model="formData.iconUrl"
+          height="48px"
+          :show-description="false"
+        >
+          <template #tip>建议尺寸：24 * 24</template>
+        </UploadImg>
+      </FormItem>
+      <FormItem label="背景颜色" name="backgroundColor">
+        <ColorInput v-model="formData.backgroundColor" />
+      </FormItem>
+      <FormItem label="文字颜色" name="textColor">
+        <ColorInput v-model="formData.textColor" />
+      </FormItem>
+      <Card title="公告内容" class="property-group">
+        <Draggable v-model="formData.contents">
+          <template #default="{ element }">
+            <FormItem label="公告" name="text">
+              <Input v-model:value="element.text" placeholder="请输入公告" />
+            </FormItem>
+            <FormItem label="链接" name="url">
+              <AppLinkInput v-model="element.url" />
+            </FormItem>
+          </template>
+        </Draggable>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts

@@ -2,15 +2,12 @@ import type { DiyComponent } from '../../../util';
 
 /** 页面设置属性 */
 export interface PageConfigProperty {
-  // 页面描述
+  description: string; // 页面描述
-  description: string;
+  backgroundColor: string; // 页面背景颜色
-  // 页面背景颜色
+  backgroundImage: string; // 页面背景图片
-  backgroundColor: string;
-  // 页面背景图片
-  backgroundImage: string;
 }
 
-// 定义页面组件
+/** 定义页面组件 */
 export const component = {
   id: 'PageConfig',
   name: '页面设置',

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

@@ -2,63 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品卡片属性 */
 export interface ProductCardProperty {
-  // 布局类型：单列大图 | 单列小图 | 双列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列大图 | 单列小图 | 双列
-  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
-  // 商品字段
   fields: {
-    // 商品简介
+    introduction: ProductCardFieldProperty; // 商品简介
-    introduction: ProductCardFieldProperty;
+    marketPrice: ProductCardFieldProperty; // 商品市场价
-    // 商品市场价
+    name: ProductCardFieldProperty; // 商品名称
-    marketPrice: ProductCardFieldProperty;
+    price: ProductCardFieldProperty; // 商品价格
-    // 商品名称
+    salesCount: ProductCardFieldProperty; // 商品销量
-    name: ProductCardFieldProperty;
+    stock: ProductCardFieldProperty; // 商品库存
-    // 商品价格
+  }; // 商品字段
-    price: ProductCardFieldProperty;
-    // 商品销量
-    salesCount: ProductCardFieldProperty;
-    // 商品库存
-    stock: ProductCardFieldProperty;
-  };
-  // 角标
   badge: {
-    // 角标图片
+    imgUrl: string; // 角标图片
-    imgUrl: string;
+    show: boolean; // 是否显示
-    // 是否显示
+  }; // 角标
-    show: boolean;
-  };
-  // 按钮
   btnBuy: {
-    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string; // 文字按钮：背景渐变起始颜色
-    bgBeginColor: string;
+    bgEndColor: string; // 文字按钮：背景渐变结束颜色
-    // 文字按钮：背景渐变结束颜色
+    imgUrl: string; // 图片按钮：图片地址
-    bgEndColor: string;
+    text: string; // 文字
-    // 图片按钮：图片地址
+    type: 'img' | 'text'; // 类型：文字 | 图片
-    imgUrl: string;
+  }; // 按钮
-    // 文字
+  borderRadiusTop: number; // 上圆角
-    text: string;
+  borderRadiusBottom: number; // 下圆角
-    // 类型：文字 | 图片
+  space: number; // 间距
-    type: 'img' | 'text';
+  spuIds: number[]; // 商品编号列表
-  };
+  style: ComponentStyle; // 组件样式
-  // 上圆角
-  borderRadiusTop: number;
-  // 下圆角
-  borderRadiusBottom: number;
-  // 间距
-  space: number;
-  // 商品编号列表
-  spuIds: number[];
-  // 组件样式
-  style: ComponentStyle;
-}
-// 商品字段
-export interface ProductCardFieldProperty {
-  // 是否显示
-  show: boolean;
-  // 颜色
-  color: string;
 }
 
-// 定义组件
+/** 商品字段属性 */
+export interface ProductCardFieldProperty {
+  show: boolean; // 是否显示
+  color: string; // 颜色
+}
+
+/** 定义组件 */
 export const component = {
   id: 'ProductCard',
   name: '商品卡片',

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

@@ -1,4 +1,170 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { ProductCardProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
+import { ColorInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 商品卡片属性面板 */
+defineOptions({ name: 'ProductCardProperty' });
+
+const props = defineProps<{ modelValue: ProductCardProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData">
+      <Card title="商品列表" class="property-group">
+        <SpuShowcase v-model="formData.spuIds" />
+      </Card>
+      <Card title="商品样式" class="property-group">
+        <FormItem label="布局" name="type">
+          <RadioGroup v-model:value="formData.layoutType">
+            <Tooltip title="单列大图" placement="bottom">
+              <RadioButton value="oneColBigImg">
+                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="单列小图" placement="bottom">
+              <RadioButton value="oneColSmallImg">
+                <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="双列" placement="bottom">
+              <RadioButton value="twoCol">
+                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="商品名称" name="fields.name.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.name.color" />
+            <Checkbox v-model:checked="formData.fields.name.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品简介" name="fields.introduction.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.introduction.color" />
+            <Checkbox v-model:checked="formData.fields.introduction.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品价格" name="fields.price.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.price.color" />
+            <Checkbox v-model:checked="formData.fields.price.show" />
+          </div>
+        </FormItem>
+        <FormItem label="市场价" name="fields.marketPrice.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.marketPrice.color" />
+            <Checkbox v-model:checked="formData.fields.marketPrice.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品销量" name="fields.salesCount.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.salesCount.color" />
+            <Checkbox v-model:checked="formData.fields.salesCount.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品库存" name="fields.stock.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.stock.color" />
+            <Checkbox v-model:checked="formData.fields.stock.show" />
+          </div>
+        </FormItem>
+      </Card>
+      <Card title="角标" class="property-group">
+        <FormItem label="角标" name="badge.show">
+          <Switch v-model:checked="formData.badge.show" />
+        </FormItem>
+        <FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
+          <UploadImg
+            v-model="formData.badge.imgUrl"
+            height="44px"
+            width="72px"
+            :show-description="false"
+          >
+            <template #tip> 建议尺寸：36 * 22 </template>
+          </UploadImg>
+        </FormItem>
+      </Card>
+      <Card title="按钮" class="property-group">
+        <FormItem label="按钮类型" name="btnBuy.type">
+          <RadioGroup v-model:value="formData.btnBuy.type">
+            <RadioButton value="text">文字</RadioButton>
+            <RadioButton value="img">图片</RadioButton>
+          </RadioGroup>
+        </FormItem>
+        <template v-if="formData.btnBuy.type === 'text'">
+          <FormItem label="按钮文字" name="btnBuy.text">
+            <Input v-model:value="formData.btnBuy.text" />
+          </FormItem>
+          <FormItem label="左侧背景" name="btnBuy.bgBeginColor">
+            <ColorInput v-model="formData.btnBuy.bgBeginColor" />
+          </FormItem>
+          <FormItem label="右侧背景" name="btnBuy.bgEndColor">
+            <ColorInput v-model="formData.btnBuy.bgEndColor" />
+          </FormItem>
+        </template>
+        <template v-else>
+          <FormItem label="图片" name="btnBuy.imgUrl">
+            <UploadImg
+              v-model="formData.btnBuy.imgUrl"
+              height="56px"
+              width="56px"
+              :show-description="false"
+            >
+              <template #tip> 建议尺寸：56 * 56 </template>
+            </UploadImg>
+          </FormItem>
+        </template>
+      </Card>
+      <Card title="商品样式" class="property-group">
+        <FormItem label="上圆角" name="borderRadiusTop">
+          <Slider
+            v-model:value="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="下圆角" name="borderRadiusBottom">
+          <Slider
+            v-model:value="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="间隔" name="space">
+          <Slider
+            v-model:value="formData.space"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts

@@ -2,42 +2,29 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品栏属性 */
 export interface ProductListProperty {
-  // 布局类型：双列 | 三列 | 水平滑动
+  layoutType: 'horizSwiper' | 'threeCol' | 'twoCol'; // 布局类型：双列 | 三列 | 水平滑动
-  layoutType: 'horizSwiper' | 'threeCol' | 'twoCol';
-  // 商品字段
   fields: {
-    // 商品名称
+    name: ProductListFieldProperty; // 商品名称
-    name: ProductListFieldProperty;
+    price: ProductListFieldProperty; // 商品价格
-    // 商品价格
+  }; // 商品字段
-    price: ProductListFieldProperty;
-  };
-  // 角标
   badge: {
-    // 角标图片
+    imgUrl: string; // 角标图片
-    imgUrl: string;
+    show: boolean; // 是否显示
-    // 是否显示
+  }; // 角标
-    show: boolean;
+  borderRadiusTop: number; // 上圆角
-  };
+  borderRadiusBottom: number; // 下圆角
-  // 上圆角
+  space: number; // 间距
-  borderRadiusTop: number;
+  spuIds: number[]; // 商品编号列表
-  // 下圆角
+  style: ComponentStyle; // 组件样式
-  borderRadiusBottom: number;
-  // 间距
-  space: number;
-  // 商品编号列表
-  spuIds: number[];
-  // 组件样式
-  style: ComponentStyle;
-}
-// 商品字段
-export interface ProductListFieldProperty {
-  // 是否显示
-  show: boolean;
-  // 颜色
-  color: string;
 }
 
-// 定义组件
+/** 商品字段属性 */
+export interface ProductListFieldProperty {
+  show: boolean; // 是否显示
+  color: string; // 颜色
+}
+
+/** 定义组件 */
 export const component = {
   id: 'ProductList',
   name: '商品栏',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts

@@ -2,13 +2,11 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 营销文章属性 */
 export interface PromotionArticleProperty {
-  // 文章编号
+  id: number; // 文章编号
-  id: number;
+  style: ComponentStyle; // 组件样式
-  // 组件样式
-  style: ComponentStyle;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'PromotionArticle',
   name: '营销文章',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts

@@ -2,64 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 拼团属性 */
 export interface PromotionCombinationProperty {
-  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
-  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
-  // 商品字段
   fields: {
-    // 商品简介
+    introduction: PromotionCombinationFieldProperty; // 商品简介
-    introduction: PromotionCombinationFieldProperty;
+    marketPrice: PromotionCombinationFieldProperty; // 市场价
-    // 市场价
+    name: PromotionCombinationFieldProperty; // 商品名称
-    marketPrice: PromotionCombinationFieldProperty;
+    price: PromotionCombinationFieldProperty; // 商品价格
-    // 商品名称
+    salesCount: PromotionCombinationFieldProperty; // 商品销量
-    name: PromotionCombinationFieldProperty;
+    stock: PromotionCombinationFieldProperty; // 商品库存
-    // 商品价格
+  }; // 商品字段
-    price: PromotionCombinationFieldProperty;
-    // 商品销量
-    salesCount: PromotionCombinationFieldProperty;
-    // 商品库存
-    stock: PromotionCombinationFieldProperty;
-  };
-  // 角标
   badge: {
-    // 角标图片
+    imgUrl: string; // 角标图片
-    imgUrl: string;
+    show: boolean; // 是否显示
-    // 是否显示
+  }; // 角标
-    show: boolean;
-  };
-  // 按钮
   btnBuy: {
-    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string; // 文字按钮：背景渐变起始颜色
-    bgBeginColor: string;
+    bgEndColor: string; // 文字按钮：背景渐变结束颜色
-    // 文字按钮：背景渐变结束颜色
+    imgUrl: string; // 图片按钮：图片地址
-    bgEndColor: string;
+    text: string; // 文字
-    // 图片按钮：图片地址
+    type: 'img' | 'text'; // 类型：文字 | 图片
-    imgUrl: string;
+  }; // 按钮
-    // 文字
+  borderRadiusTop: number; // 上圆角
-    text: string;
+  borderRadiusBottom: number; // 下圆角
-    // 类型：文字 | 图片
+  space: number; // 间距
-    type: 'img' | 'text';
+  activityIds: number[]; // 拼团活动编号
-  };
+  style: ComponentStyle; // 组件样式
-  // 上圆角
-  borderRadiusTop: number;
-  // 下圆角
-  borderRadiusBottom: number;
-  // 间距
-  space: number;
-  // 拼团活动编号
-  activityIds: number[];
-  // 组件样式
-  style: ComponentStyle;
 }
 
-// 商品字段
+/** 商品字段属性 */
 export interface PromotionCombinationFieldProperty {
-  // 是否显示
+  show: boolean; // 是否显示
-  show: boolean;
+  color: string; // 颜色
-  // 颜色
-  color: string;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'PromotionCombination',
   name: '拼团',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts

@@ -2,64 +2,41 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 积分商城属性 */
 export interface PromotionPointProperty {
-  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
-  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
-  // 商品字段
   fields: {
-    // 商品简介
+    introduction: PromotionPointFieldProperty; // 商品简介
-    introduction: PromotionPointFieldProperty;
+    marketPrice: PromotionPointFieldProperty; // 市场价
-    // 市场价
+    name: PromotionPointFieldProperty; // 商品名称
-    marketPrice: PromotionPointFieldProperty;
+    price: PromotionPointFieldProperty; // 商品价格
-    // 商品名称
+    salesCount: PromotionPointFieldProperty; // 商品销量
-    name: PromotionPointFieldProperty;
+    stock: PromotionPointFieldProperty; // 商品库存
-    // 商品价格
+  }; // 商品字段
-    price: PromotionPointFieldProperty;
-    // 商品销量
-    salesCount: PromotionPointFieldProperty;
-    // 商品库存
-    stock: PromotionPointFieldProperty;
-  };
-  // 角标
   badge: {
-    // 角标图片
+    imgUrl: string; // 角标图片
-    imgUrl: string;
+    show: boolean; // 是否显示
-    // 是否显示
+  }; // 角标
-    show: boolean;
-  };
   // 按钮
   btnBuy: {
-    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string; // 文字按钮：背景渐变起始颜色
-    bgBeginColor: string;
+    bgEndColor: string; // 文字按钮：背景渐变结束颜色
-    // 文字按钮：背景渐变结束颜色
+    imgUrl: string; // 图片按钮：图片地址
-    bgEndColor: string;
+    text: string; // 文字
-    // 图片按钮：图片地址
+    type: 'img' | 'text'; // 类型：文字 | 图片
-    imgUrl: string;
+  }; // 按钮
-    // 文字
+  borderRadiusTop: number; // 上圆角
-    text: string;
+  borderRadiusBottom: number; // 下圆角
-    // 类型：文字 | 图片
+  space: number; // 间距
-    type: 'img' | 'text';
+  activityIds: number[]; // 积分活动编号
-  };
+  style: ComponentStyle; // 组件样式
-  // 上圆角
-  borderRadiusTop: number;
-  // 下圆角
-  borderRadiusBottom: number;
-  // 间距
-  space: number;
-  // 秒杀活动编号
-  activityIds: number[];
-  // 组件样式
-  style: ComponentStyle;
 }
 
-// 商品字段
+/** 商品字段属性 */
 export interface PromotionPointFieldProperty {
-  // 是否显示
+  show: boolean; // 是否显示
-  show: boolean;
+  color: string; // 颜色
-  // 颜色
-  color: string;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'PromotionPoint',
   name: '积分商城',

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

@@ -1,4 +1,168 @@
-<script setup lang="ts">
+<script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { PromotionPointProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+import { PointShowcase } from '#/views/mall/promotion/point/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 积分属性面板 */
+defineOptions({ name: 'PromotionPointProperty' });
+
+const props = defineProps<{ modelValue: PromotionPointProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData">
+      <Card title="积分商城活动" class="property-group">
+        <PointShowcase v-model="formData.activityIds" />
+      </Card>
+      <Card title="商品样式" class="property-group">
+        <FormItem label="布局" name="type">
+          <RadioGroup v-model:value="formData.layoutType">
+            <Tooltip title="单列大图" placement="bottom">
+              <RadioButton value="oneColBigImg">
+                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="单列小图" placement="bottom">
+              <RadioButton value="oneColSmallImg">
+                <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="双列" placement="bottom">
+              <RadioButton value="twoCol">
+                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="商品名称" name="fields.name.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.name.color" />
+            <Checkbox v-model:checked="formData.fields.name.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品简介" name="fields.introduction.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.introduction.color" />
+            <Checkbox v-model:checked="formData.fields.introduction.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品价格" name="fields.price.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.price.color" />
+            <Checkbox v-model:checked="formData.fields.price.show" />
+          </div>
+        </FormItem>
+        <FormItem label="市场价" name="fields.marketPrice.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.marketPrice.color" />
+            <Checkbox v-model:checked="formData.fields.marketPrice.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品销量" name="fields.salesCount.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.salesCount.color" />
+            <Checkbox v-model:checked="formData.fields.salesCount.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品库存" name="fields.stock.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.stock.color" />
+            <Checkbox v-model:checked="formData.fields.stock.show" />
+          </div>
+        </FormItem>
+      </Card>
+      <Card title="角标" class="property-group">
+        <FormItem label="角标" name="badge.show">
+          <Switch v-model:checked="formData.badge.show" />
+        </FormItem>
+        <FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
+          <UploadImg
+            v-model="formData.badge.imgUrl"
+            height="44px"
+            width="72px"
+            :show-description="false"
+          >
+            <template #tip> 建议尺寸：36 * 22 </template>
+          </UploadImg>
+        </FormItem>
+      </Card>
+      <Card title="按钮" class="property-group">
+        <FormItem label="按钮类型" name="btnBuy.type">
+          <RadioGroup v-model:value="formData.btnBuy.type">
+            <RadioButton value="text">文字</RadioButton>
+            <RadioButton value="img">图片</RadioButton>
+          </RadioGroup>
+        </FormItem>
+        <template v-if="formData.btnBuy.type === 'text'">
+          <FormItem label="按钮文字" name="btnBuy.text">
+            <Input v-model:value="formData.btnBuy.text" />
+          </FormItem>
+          <FormItem label="左侧背景" name="btnBuy.bgBeginColor">
+            <ColorInput v-model="formData.btnBuy.bgBeginColor" />
+          </FormItem>
+          <FormItem label="右侧背景" name="btnBuy.bgEndColor">
+            <ColorInput v-model="formData.btnBuy.bgEndColor" />
+          </FormItem>
+        </template>
+        <template v-else>
+          <FormItem label="图片" name="btnBuy.imgUrl">
+            <UploadImg
+              v-model="formData.btnBuy.imgUrl"
+              height="56px"
+              width="56px"
+              :show-description="false"
+            >
+              <template #tip> 建议尺寸：56 * 56 </template>
+            </UploadImg>
+          </FormItem>
+        </template>
+      </Card>
+      <Card title="商品样式" class="property-group">
+        <FormItem label="上圆角" name="borderRadiusTop">
+          <Slider
+            v-model:value="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="下圆角" name="borderRadiusBottom">
+          <Slider
+            v-model:value="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="间隔" name="space">
+          <Slider
+            v-model:value="formData.space"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts

@@ -2,64 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 秒杀属性 */
 export interface PromotionSeckillProperty {
-  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
-  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
-  // 商品字段
   fields: {
-    // 商品简介
+    introduction: PromotionSeckillFieldProperty; // 商品简介
-    introduction: PromotionSeckillFieldProperty;
+    marketPrice: PromotionSeckillFieldProperty; // 市场价
-    // 市场价
+    name: PromotionSeckillFieldProperty; // 商品名称
-    marketPrice: PromotionSeckillFieldProperty;
+    price: PromotionSeckillFieldProperty; // 商品价格
-    // 商品名称
+    salesCount: PromotionSeckillFieldProperty; // 商品销量
-    name: PromotionSeckillFieldProperty;
+    stock: PromotionSeckillFieldProperty; // 商品库存
-    // 商品价格
+  }; // 商品字段
-    price: PromotionSeckillFieldProperty;
-    // 商品销量
-    salesCount: PromotionSeckillFieldProperty;
-    // 商品库存
-    stock: PromotionSeckillFieldProperty;
-  };
-  // 角标
   badge: {
-    // 角标图片
+    imgUrl: string; // 角标图片
-    imgUrl: string;
+    show: boolean; // 是否显示
-    // 是否显示
+  }; // 角标
-    show: boolean;
-  };
-  // 按钮
   btnBuy: {
-    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string; // 文字按钮：背景渐变起始颜色
-    bgBeginColor: string;
+    bgEndColor: string; // 文字按钮：背景渐变结束颜色
-    // 文字按钮：背景渐变结束颜色
+    imgUrl: string; // 图片按钮：图片地址
-    bgEndColor: string;
+    text: string; // 文字
-    // 图片按钮：图片地址
+    type: 'img' | 'text'; // 类型：文字 | 图片
-    imgUrl: string;
+  }; // 按钮
-    // 文字
+  borderRadiusTop: number; // 上圆角
-    text: string;
+  borderRadiusBottom: number; // 下圆角
-    // 类型：文字 | 图片
+  space: number; // 间距
-    type: 'img' | 'text';
+  activityIds: number[]; // 秒杀活动编号
-  };
+  style: ComponentStyle; // 组件样式
-  // 上圆角
-  borderRadiusTop: number;
-  // 下圆角
-  borderRadiusBottom: number;
-  // 间距
-  space: number;
-  // 秒杀活动编号
-  activityIds: number[];
-  // 组件样式
-  style: ComponentStyle;
 }
 
-// 商品字段
+/** 商品字段属性 */
 export interface PromotionSeckillFieldProperty {
-  // 是否显示
+  show: boolean; // 是否显示
-  show: boolean;
+  color: string; // 颜色
-  // 颜色
-  color: string;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'PromotionSeckill',
   name: '秒杀',

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

@@ -1,4 +1,170 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { PromotionSeckillProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 秒杀属性面板 */
+defineOptions({ name: 'PromotionSeckillProperty' });
+
+const props = defineProps<{ modelValue: PromotionSeckillProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData">
+      <Card title="秒杀活动" class="property-group">
+        <SeckillShowcase v-model="formData.activityIds" />
+      </Card>
+      <Card title="商品样式" class="property-group">
+        <FormItem label="布局" name="type">
+          <RadioGroup v-model:value="formData.layoutType">
+            <Tooltip title="单列大图" placement="bottom">
+              <RadioButton value="oneColBigImg">
+                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="单列小图" placement="bottom">
+              <RadioButton value="oneColSmallImg">
+                <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="双列" placement="bottom">
+              <RadioButton value="twoCol">
+                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="商品名称" name="fields.name.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.name.color" />
+            <Checkbox v-model:checked="formData.fields.name.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品简介" name="fields.introduction.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.introduction.color" />
+            <Checkbox v-model:checked="formData.fields.introduction.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品价格" name="fields.price.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.price.color" />
+            <Checkbox v-model:checked="formData.fields.price.show" />
+          </div>
+        </FormItem>
+        <FormItem label="市场价" name="fields.marketPrice.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.marketPrice.color" />
+            <Checkbox v-model:checked="formData.fields.marketPrice.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品销量" name="fields.salesCount.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.salesCount.color" />
+            <Checkbox v-model:checked="formData.fields.salesCount.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品库存" name="fields.stock.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.stock.color" />
+            <Checkbox v-model:checked="formData.fields.stock.show" />
+          </div>
+        </FormItem>
+      </Card>
+      <Card title="角标" class="property-group">
+        <FormItem label="角标" name="badge.show">
+          <Switch v-model:checked="formData.badge.show" />
+        </FormItem>
+        <FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
+          <UploadImg
+            v-model="formData.badge.imgUrl"
+            height="44px"
+            width="72px"
+            :show-description="false"
+          >
+            <template #tip> 建议尺寸：36 * 22 </template>
+          </UploadImg>
+        </FormItem>
+      </Card>
+      <Card title="按钮" class="property-group">
+        <FormItem label="按钮类型" name="btnBuy.type">
+          <RadioGroup v-model:value="formData.btnBuy.type">
+            <RadioButton value="text">文字</RadioButton>
+            <RadioButton value="img">图片</RadioButton>
+          </RadioGroup>
+        </FormItem>
+        <template v-if="formData.btnBuy.type === 'text'">
+          <FormItem label="按钮文字" name="btnBuy.text">
+            <Input v-model:value="formData.btnBuy.text" />
+          </FormItem>
+          <FormItem label="左侧背景" name="btnBuy.bgBeginColor">
+            <ColorInput v-model="formData.btnBuy.bgBeginColor" />
+          </FormItem>
+          <FormItem label="右侧背景" name="btnBuy.bgEndColor">
+            <ColorInput v-model="formData.btnBuy.bgEndColor" />
+          </FormItem>
+        </template>
+        <template v-else>
+          <FormItem label="图片" name="btnBuy.imgUrl">
+            <UploadImg
+              v-model="formData.btnBuy.imgUrl"
+              height="56px"
+              width="56px"
+              :show-description="false"
+            >
+              <template #tip> 建议尺寸：56 * 56</template>
+            </UploadImg>
+          </FormItem>
+        </template>
+      </Card>
+      <Card title="商品样式" class="property-group">
+        <FormItem label="上圆角" name="borderRadiusTop">
+          <Slider
+            v-model:value="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="下圆角" name="borderRadiusBottom">
+          <Slider
+            v-model:value="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="间隔" name="space">
+          <Slider
+            v-model:value="formData.space"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>

apps/web-antd/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-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue

@@ -1,4 +1,119 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { SearchProperty } from './config';
+
+import { watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { isString } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { ColorInput, Draggable } from '#/views/mall/promotion/components';
+
+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) => {
+    // 找到非字符串项的索引
+    const nonStringIndex = newVal.findIndex((item) => !isString(item));
+    if (nonStringIndex !== -1) {
+      formData.value.hotKeywords[nonStringIndex] = '';
+    }
+  },
+  { deep: true, flush: 'post' },
+);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData">
+      <Card title="搜索热词" class="property-group">
+        <Draggable
+          v-model="formData.hotKeywords"
+          :empty-item="{
+            type: 'input',
+            placeholder: '请输入热词',
+          }"
+        >
+          <template #default="{ index }">
+            <Input
+              v-model:value="formData.hotKeywords[index]"
+              placeholder="请输入热词"
+            />
+          </template>
+        </Draggable>
+      </Card>
+      <Card title="搜索样式" class="property-group">
+        <FormItem label="框体样式">
+          <RadioGroup v-model:value="formData!.borderRadius">
+            <Tooltip title="方形" placement="top">
+              <RadioButton :value="0">
+                <IconifyIcon icon="tabler:input-search" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="圆形" placement="top">
+              <RadioButton :value="10">
+                <IconifyIcon icon="iconoir:input-search" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="提示文字" name="placeholder">
+          <Input v-model:value="formData.placeholder" />
+        </FormItem>
+        <FormItem label="文本位置" name="placeholderPosition">
+          <RadioGroup v-model:value="formData!.placeholderPosition">
+            <Tooltip title="居左" placement="top">
+              <RadioButton value="left">
+                <IconifyIcon icon="ant-design:align-left-outlined" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="居中" placement="top">
+              <RadioButton value="center">
+                <IconifyIcon icon="ant-design:align-center-outlined" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="扫一扫" name="showScan">
+          <Switch v-model:checked="formData!.showScan" />
+        </FormItem>
+        <FormItem label="框体高度" name="height">
+          <Slider
+            v-model:value="formData!.height"
+            :max="50"
+            :min="28"
+          />
+        </FormItem>
+        <FormItem label="框体颜色" name="backgroundColor">
+          <ColorInput v-model="formData.backgroundColor" />
+        </FormItem>
+        <FormItem label="文本颜色" name="textColor">
+          <ColorInput v-model="formData.textColor" />
+        </FormItem>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>

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

@@ -2,41 +2,29 @@ import type { DiyComponent } from '../../../util';
 
 /** 底部导航菜单属性 */
 export interface TabBarProperty {
-  // 选项列表
+  items: TabBarItemProperty[]; // 选项列表
-  items: TabBarItemProperty[];
+  theme: string; // 主题
-  // 主题
+  style: TabBarStyle; // 样式
-  theme: string;
-  // 样式
-  style: TabBarStyle;
 }
 
-// 选项属性
+/** 选项属性 */
 export interface TabBarItemProperty {
-  // 标签文字
+  text: string; // 标签文字
-  text: string;
+  url: string; // 链接
-  // 链接
+  iconUrl: string; // 默认图标链接
-  url: string;
+  activeIconUrl: string; // 选中的图标链接
-  // 默认图标链接
-  iconUrl: string;
-  // 选中的图标链接
-  activeIconUrl: string;
 }
 
-// 样式
+/** 样式 */
 export interface TabBarStyle {
-  // 背景类型
+  bgType: 'color' | 'img'; // 背景类型
-  bgType: 'color' | 'img';
+  bgColor: string; // 背景颜色
-  // 背景颜色
+  bgImg: string; // 图片链接
-  bgColor: string;
+  color: string; // 默认颜色
-  // 图片链接
+  activeColor: string; // 选中的颜色
-  bgImg: string;
-  // 默认颜色
-  color: string;
-  // 选中的颜色
-  activeColor: string;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'TabBar',
   name: '底部导航',

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

@@ -2,46 +2,28 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 标题栏属性 */
 export interface TitleBarProperty {
-  // 背景图
+  bgImgUrl: string; // 背景图
-  bgImgUrl: string;
+  marginLeft: number; // 偏移
-  // 偏移
+  textAlign: 'center' | 'left'; // 显示位置
-  marginLeft: number;
+  title: string; // 主标题
-  // 显示位置
+  description: string; // 副标题
-  textAlign: 'center' | 'left';
+  titleSize: number; // 标题大小
-  // 主标题
+  descriptionSize: number; // 描述大小
-  title: string;
+  titleWeight: number; // 标题粗细
-  // 副标题
+  descriptionWeight: number; // 描述粗细
-  description: string;
+  titleColor: string; // 标题颜色
-  // 标题大小
+  descriptionColor: string; // 描述颜色
-  titleSize: number;
+  height: number; // 高度
-  // 描述大小
-  descriptionSize: number;
-  // 标题粗细
-  titleWeight: number;
-  // 描述粗细
-  descriptionWeight: number;
-  // 标题颜色
-  titleColor: string;
-  // 描述颜色
-  descriptionColor: string;
-  // 高度
-  height: number;
-  // 查看更多
   more: {
-    // 是否显示查看更多
+    show: false; // 是否显示查看更多
-    show: false;
+    text: string; // 自定义文字
-    // 自定义文字
+    type: 'all' | 'icon' | 'text'; // 样式选择
-    text: string;
+    url: string; // 链接
-    // 样式选择
+  }; // 查看更多
-    type: 'all' | 'icon' | 'text';
+  style: ComponentStyle; // 组件样式
-    // 链接
-    url: string;
-  };
-  // 组件样式
-  style: ComponentStyle;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'TitleBar',
   name: '标题栏',

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

@@ -1,4 +1,159 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { TitleBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 导航栏属性面板 */
+defineOptions({ name: 'TitleBarProperty' });
+
+const props = defineProps<{ modelValue: TitleBarProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+const rules = {}; // 表单校验
 </script>
-<template><Page>待完成</Page></template>
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData" :rules="rules">
+      <Card title="风格" class="property-group">
+        <FormItem label="背景图片" name="bgImgUrl">
+          <UploadImg
+            v-model="formData.bgImgUrl"
+            width="100%"
+            height="40px"
+            :show-description="false"
+          >
+            <template #tip>建议尺寸 750*80</template>
+          </UploadImg>
+        </FormItem>
+        <FormItem label="标题位置" name="textAlign">
+          <RadioGroup v-model:value="formData!.textAlign">
+            <Tooltip title="居左" placement="top">
+              <RadioButton value="left">
+                <IconifyIcon icon="ant-design:align-left-outlined" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="居中" placement="top">
+              <RadioButton value="center">
+                <IconifyIcon icon="ant-design:align-center-outlined" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="偏移量" name="marginLeft">
+          <Slider
+            v-model:value="formData.marginLeft"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="高度" name="height">
+          <Slider
+            v-model:value="formData.height"
+            :max="200"
+            :min="20"
+          />
+        </FormItem>
+      </Card>
+      <Card title="主标题" class="property-group">
+        <FormItem label="文字" name="title">
+          <InputWithColor
+            v-model="formData.title"
+            v-model:color="formData.titleColor"
+            show-count
+            :maxlength="20"
+          />
+        </FormItem>
+        <FormItem label="大小" name="titleSize">
+          <Slider
+            v-model:value="formData.titleSize"
+            :max="60"
+            :min="10"
+          />
+        </FormItem>
+        <FormItem label="粗细" name="titleWeight">
+          <Slider
+            v-model:value="formData.titleWeight"
+            :min="100"
+            :max="900"
+            :step="100"
+          />
+        </FormItem>
+      </Card>
+      <Card title="副标题" class="property-group">
+        <FormItem label="文字" name="description">
+          <InputWithColor
+            v-model="formData.description"
+            v-model:color="formData.descriptionColor"
+            show-count
+            :maxlength="50"
+          />
+        </FormItem>
+        <FormItem label="大小" name="descriptionSize">
+          <Slider
+            v-model:value="formData.descriptionSize"
+            :max="60"
+            :min="10"
+          />
+        </FormItem>
+        <FormItem label="粗细" name="descriptionWeight">
+          <Slider
+            v-model:value="formData.descriptionWeight"
+            :min="100"
+            :max="900"
+            :step="100"
+          />
+        </FormItem>
+      </Card>
+      <Card title="查看更多" class="property-group">
+        <FormItem label="是否显示" name="more.show">
+          <Checkbox v-model:checked="formData.more.show" />
+        </FormItem>
+        <!-- 更多按钮的 样式选择 -->
+        <template v-if="formData.more.show">
+          <FormItem label="样式" name="more.type">
+            <RadioGroup v-model:value="formData.more.type">
+              <Radio value="text">文字</Radio>
+              <Radio value="icon">图标</Radio>
+              <Radio value="all">文字+图标</Radio>
+            </RadioGroup>
+          </FormItem>
+          <FormItem
+            label="更多文字"
+            name="more.text"
+            v-show="formData.more.type !== 'icon'"
+          >
+            <Input v-model:value="formData.more.text" />
+          </FormItem>
+          <FormItem label="跳转链接" name="more.url">
+            <AppLinkInput v-model="formData.more.url" />
+          </FormItem>
+        </template>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts

@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡片属性 */
 export interface UserCardProperty {
-  // 组件样式
+  style: ComponentStyle; // 组件样式
-  style: ComponentStyle;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserCard',
   name: '用户卡片',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts

@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户订单属性 */
 export interface UserOrderProperty {
-  // 组件样式
+  style: ComponentStyle; // 组件样式
-  style: ComponentStyle;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserOrder',
   name: '用户订单',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts

@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户资产属性 */
 export interface UserWalletProperty {
-  // 组件样式
+  style: ComponentStyle; // 组件样式
-  style: ComponentStyle;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserWallet',
   name: '用户资产',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts

@@ -2,23 +2,18 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 视频播放属性 */
 export interface VideoPlayerProperty {
-  // 视频链接
+  videoUrl: string; // 视频链接
-  videoUrl: string;
+  posterUrl: string; // 封面链接
-  // 封面链接
+  autoplay: boolean; // 是否自动播放
-  posterUrl: string;
+  style: VideoPlayerStyle; // 组件样式
-  // 是否自动播放
-  autoplay: boolean;
-  // 组件样式
-  style: VideoPlayerStyle;
 }
 
-// 视频播放样式
+/** 视频播放样式 */
 export interface VideoPlayerStyle extends ComponentStyle {
-  // 视频高度
+  height: number; // 视频高度
-  height: number;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'VideoPlayer',
   name: '视频播放',

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

@@ -3,12 +3,12 @@ import type { DiyComponent, DiyComponentLibrary, PageConfig } from './util';
 
 import { onMounted, ref, unref, watch } from 'vue';
 
-import { IFrame } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep, isEmpty, isString } from '@vben/utils';
 
 import { useQRCode } from '@vueuse/integrations/useQRCode';
-import { Button, Card, Modal, Tag, Tooltip } from 'ant-design-vue';
+import { Button, Card, Image, Tag, Tooltip } from 'ant-design-vue';
 import draggable from 'vuedraggable';
 
 import statusBarImg from '#/assets/imgs/diy/statusBar.png';
@@ -37,7 +37,7 @@ const props = defineProps({
   previewUrl: { type: String, default: '' }, // 预览地址：提供了预览地址，才会显示预览按钮
 });
 
-const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue']); // 工具栏操作
+const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏操作
 
 const qrcode = useQRCode(props.previewUrl, {
   errorCorrectionLevel: 'H',
@@ -68,17 +68,20 @@ watch(
       isString(props.modelValue) && !isEmpty(props.modelValue)
         ? (JSON.parse(props.modelValue) as PageConfig)
         : props.modelValue;
-    // TODO @AI：这里可以简化么？idea 提示 Invalid 'typeof' check: 'modelValue' cannot have type 'string'
+    // noinspection SuspiciousTypeOfGuard
     pageConfigComponent.value.property =
       (typeof modelValue !== 'string' && modelValue?.page) ||
       PAGE_CONFIG_COMPONENT.property;
+    // noinspection SuspiciousTypeOfGuard
     navigationBarComponent.value.property =
       (typeof modelValue !== 'string' && modelValue?.navigationBar) ||
       NAVIGATION_BAR_COMPONENT.property;
+    // noinspection SuspiciousTypeOfGuard
     tabBarComponent.value.property =
       (typeof modelValue !== 'string' && modelValue?.tabBar) ||
       TAB_BAR_COMPONENT.property;
     // 查找对应的页面组件
+    // noinspection SuspiciousTypeOfGuard
     pageComponents.value = (
       (typeof modelValue !== 'string' && modelValue?.components) ||
       []
@@ -99,6 +102,11 @@ watch(
     if (!val || selectedComponentIndex.value === -1) {
       return;
     }
+    // 如果是基础设置页，默认选中的索引改成 -1，为了防止删除组件后切换到此页导致报错
+    // https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/792
+    if (props.showTabBar) {
+      selectedComponentIndex.value = -1;
+    }
     pageComponents.value[selectedComponentIndex.value] =
       selectedComponent.value!;
   },
@@ -224,7 +232,6 @@ function handleCopyComponent(index: number) {
 
 /** 删除组件 */
 function handleDeleteComponent(index: number) {
-  // 删除组件
   pageComponents.value.splice(index, 1);
   if (index < pageComponents.value.length) {
     // 1. 不是最后一个组件时，删除后选中下面的组件
@@ -251,12 +258,17 @@ function handleReset() {
   emits('reset');
 }
 
-// TODO @AI：搞成 modal 来？
+const [PreviewModal, previewModalApi] = useVbenModal({
+  showConfirmButton: false,
+  showCancelButton: false,
+  onCancel() {
+    previewModalApi.close();
+  },
+});
+
 /** 预览 */
-const previewDialogVisible = ref(false);
 function handlePreview() {
-  previewDialogVisible.value = true;
+  previewModalApi.open();
-  emits('preview');
 }
 
 /** 设置默认选中的组件 */
@@ -312,7 +324,7 @@ onMounted(() => {
       </div>
 
       <!-- 中心区域 -->
-      <div class="editor-container flex flex-1">
+      <div class="editor-container h-[calc(100vh-135px)]">
         <!-- 左侧：组件库（ComponentLibrary） -->
         <ComponentLibrary
           v-if="libs && libs.length > 0"
@@ -320,11 +332,15 @@ onMounted(() => {
           :list="libs"
         />
         <!-- 中心：设计区域（ComponentContainer） -->
-        <div class="editor-center page-prop-area" @click="handlePageSelected">
+        <div
+          class="editor-center page-prop-area relative mt-4 flex w-full flex-1 flex-col justify-center overflow-hidden"
+          :style="{ backgroundColor: 'var(--app-content-bg-color)' }"
+          @click="handlePageSelected"
+        >
           <!-- 手机顶部 -->
-          <div class="editor-design-top">
+          <div class="editor-design-top mx-auto flex w-[375px] flex-col">
             <!-- 手机顶部状态栏 -->
-            <img alt="" class="status-bar" :src="statusBarImg" />
+            <img alt="" class="h-5 w-[375px] bg-white" :src="statusBarImg" />
             <!-- 手机顶部导航栏 -->
             <ComponentContainer
               v-if="showNavigationBar"
@@ -352,17 +368,17 @@ onMounted(() => {
           </div>
           <!-- 手机页面编辑区域 -->
           <div
-            class="editor-design-center page-prop-area phone-container overflow-y-auto"
+            class="editor-design-center page-prop-area h-full w-full overflow-y-auto"
             :style="{
               backgroundColor: pageConfigComponent.property.backgroundColor,
               backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
-              height: 'calc(100vh - 135px - 120px)',
             }"
           >
+            <div class="phone-container">
               <draggable
                 v-model="pageComponents"
                 :animation="200"
-              :force-fallback="true"
+                :force-fallback="false"
                 class="page-prop-area drag-area"
                 filter=".component-toolbar"
                 ghost-class="draggable-ghost"
@@ -387,10 +403,11 @@ onMounted(() => {
                 </template>
               </draggable>
             </div>
+          </div>
           <!-- 手机底部导航 -->
           <div
             v-if="showTabBar"
-            class="editor-design-bottom component cursor-pointer"
+            class="editor-design-bottom component mx-auto w-[375px] cursor-pointer"
           >
             <ComponentContainer
               :active="selectedComponent?.id === tabBarComponent.id"
@@ -400,7 +417,9 @@ onMounted(() => {
             />
           </div>
           <!-- 固定布局的组件 操作按钮区 -->
-          <div class="fixed-component-action-group gap-2">
+          <div
+            class="fixed-component-action-group absolute right-4 top-0 flex flex-col gap-2"
+          >
             <Tag
               v-if="showPageConfig"
               :color="
@@ -409,6 +428,7 @@ onMounted(() => {
                   : 'default'
               "
               class="cursor-pointer"
+              size="large"
               @click="handleComponentSelected(pageConfigComponent)"
             >
               <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
@@ -422,6 +442,7 @@ onMounted(() => {
                 "
                 closable
                 class="cursor-pointer"
+                size="large"
                 @click="handleComponentSelected(component)"
                 @close="handleDeleteComponent(index)"
               >
@@ -432,11 +453,11 @@ onMounted(() => {
           </div>
         </div>
         <!-- 右侧：属性面板（ComponentContainerProperty） -->
-        <div v-if="selectedComponent?.property" class="editor-right w-[350px]">
+        <aside
-          <Card
+          v-if="selectedComponent?.property"
-            class="h-full"
+          class="editor-right w-[350px] shrink-0 overflow-hidden shadow-[-8px_0_8px_-8px_rgb(0_0_0/0.12)]"
-            :body-style="{ height: 'calc(100% - 57px)', padding: 0 }"
         >
+          <Card class="h-full" :body-style="{ padding: 0, height: 'calc(100% - 57px)' }">
             <!-- 组件名称 -->
             <template #title>
               <div class="flex items-center gap-2">
@@ -452,24 +473,23 @@ onMounted(() => {
               />
             </div>
           </Card>
-        </div>
+        </aside>
       </div>
     </div>
 
     <!-- 预览弹框 -->
-    <Modal v-model:open="previewDialogVisible" title="预览" width="700">
+    <PreviewModal title="预览" class="w-700px">
       <div class="flex justify-around">
-        <IFrame
+        <iframe
           :src="previewUrl"
           class="h-[667px] w-[375px] rounded-lg border-4 border-solid p-0.5"
-        />
+        ></iframe>
         <div class="flex flex-col">
           <div class="text-base">手机扫码预览</div>
-          <img :src="qrcode" alt="qrcode" class="w-1/2" />
+          <Image :src="qrcode" alt="qrcode" />
-          <!-- <Qrcode :text="previewUrl" logo="/logo.gif" /> -->
         </div>
       </div>
-    </Modal>
+    </PreviewModal>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -512,14 +532,10 @@ $phone-width: 375px;
 
   /* 中心操作区 */
   .editor-container {
-    height: calc(100vh - 135px);
+    display: flex;
 
     /* 右侧属性面板 */
     :deep(.editor-right) {
-      flex-shrink: 0;
-      overflow: hidden;
-      box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
-
       /* 属性面板顶部：减少内边距 */
       :deep(.ant-card-head) {
         padding: 8px 16px;
@@ -548,37 +564,6 @@ $phone-width: 375px;
 
     /* 中心区域 */
     .editor-center {
-      position: relative;
-      display: flex;
-      flex: 1 1 0;
-      flex-direction: column;
-      justify-content: center;
-      width: 100%;
-      margin: 16px 0 0;
-      overflow: hidden;
-      background-color: var(--background);
-
-      /* 手机顶部 */
-      .editor-design-top {
-        display: flex;
-        flex-direction: column;
-        width: $phone-width;
-        margin: 0 auto;
-
-        /* 手机顶部状态栏 */
-        .status-bar {
-          width: $phone-width;
-          height: 20px;
-          background-color: #fff;
-        }
-      }
-
-      /* 手机底部导航 */
-      .editor-design-bottom {
-        width: $phone-width;
-        margin: 0 auto;
-      }
-
       /* 手机页面编辑区域 */
       :deep(.editor-design-center) {
         width: 100%;
@@ -601,21 +586,11 @@ $phone-width: 375px;
 
       /* 固定布局的组件 操作按钮区 */
       .fixed-component-action-group {
-        position: absolute;
-        top: 0;
-        right: 16px;
-        display: flex;
-        flex-direction: column;
-
         :deep(.ant-tag) {
-          display: flex;
-          align-items: center;
-          justify-content: flex-start;
-          width: 100%;
           border: none;
           box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
 
-          .anticon {
+          .ant-tag-icon {
             margin-right: 4px;
           }
         }

apps/web-antd/src/views/mall/promotion/components/draggable/index.vue

@@ -45,7 +45,7 @@ const handleDelete = function (index: number) {
 </script>
 
 <template>
-  <div class="text-xs text-gray-500">拖动左上角的小圆点可对其排序</div>
+  <div class="text-sm text-gray-500">拖动左上角的小圆点可对其排序</div>
   <VueDraggable
     :list="formData"
     :force-fallback="true"
@@ -58,21 +58,19 @@ const handleDelete = function (index: number) {
       <div class="mb-1 flex flex-col gap-1 rounded border border-gray-200 p-2">
         <!-- 操作按钮区 -->
         <div
-          class="-m-2 mb-1 flex flex-row items-center justify-between p-2"
+          class="-m-2 mb-1 flex flex-row items-center justify-between rounded-t p-2"
-          style="background-color: var(--background)"
+          style="background-color: var(--ant-color-bg-container-secondary)"
         >
           <Tooltip title="拖动排序">
             <IconifyIcon
               icon="ic:round-drag-indicator"
-              class="drag-icon cursor-move"
+              class="drag-icon cursor-move text-gray-500"
-              style="color: #8a909c"
             />
           </Tooltip>
-          <Tooltip title="删除">
+          <Tooltip v-if="formData.length > min" title="删除">
             <IconifyIcon
               icon="ep:delete"
-              class="cursor-pointer text-red-500"
+              class="cursor-pointer text-red-500 hover:text-red-600"
-              v-if="formData.length > min"
               @click="handleDelete(index)"
             />
           </Tooltip>
@@ -82,7 +80,7 @@ const handleDelete = function (index: number) {
       </div>
     </template>
   </VueDraggable>
-  <Tooltip :title="limit < 1 ? undefined : `最多添加${limit}个`">
+  <Tooltip :title="limit > 0 && limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined">
     <Button
       type="primary"
       ghost
@@ -90,7 +88,10 @@ const handleDelete = function (index: number) {
       :disabled="limit > 0 && formData.length >= limit"
       @click="handleAdd"
     >
-      <IconifyIcon icon="ep:plus" /><span>添加</span>
+      <template #icon>
+        <IconifyIcon icon="ep:plus" />
+      </template>
+      添加
     </Button>
   </Tooltip>
 </template>

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

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-// import { PREDEFINE_COLORS } from '@vben/constants';
-
 import { useVModels } from '@vueuse/core';
-import { Input, InputGroup } from 'ant-design-vue';
+import { Input } from 'ant-design-vue';
 
 /** 带颜色选择器输入框 */
 defineOptions({ name: 'InputWithColor' });
@@ -24,11 +22,25 @@ const { modelValue, color } = useVModels(props, emit);
 </script>
 
 <template>
-  <InputGroup compact>
+  <div class="flex gap-2">
     <Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" />
-    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
+    <input
-    <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
+      v-model="color"
-    -->
+      type="color"
-  </InputGroup>
+      class="h-8 w-10 cursor-pointer rounded border border-gray-300"
+    />
+  </div>
 </template>
-<style scoped lang="scss"></style>
+
+<style scoped lang="scss">
+input[type='color'] {
+  &::-webkit-color-swatch-wrapper {
+    padding: 2px;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 2px;
+  }
+}
+</style>

apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue

@@ -7,16 +7,16 @@ import { IconifyIcon } from '@vben/icons';
 
 import { createRect, isContains, isOverlap } from './util';
 
-// TODO @AI: 改成标准注释
+/**
-// 魔方编辑器
+ * 魔方编辑器，有两部分组成：
-// 有两部分组成：
+ *  1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
-// 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
+ *    操作方法：
-//    操作方法：
+ *       1.1 点击其中一个方块就会进入热区选择模式
-//    1.1 点击其中一个方块就会进入热区选择模式
+ *       1.2 再次点击另外一个方块时，结束热区选择模式
-//    1.2 再次点击另外一个方块时，结束热区选择模式
+ *       1.3 在两个方块中间的区域创建热区
-//    1.3 在两个方块中间的区域创建热区
+ *    如果两次点击的都是同一方块，就只创建一个格子的热区
-//    如果两次点击的都是同一方块，就只创建一个格子的热区
+ *  2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
-// 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
+ */
 defineOptions({ name: 'MagicCubeEditor' });
 
 /** 定义属性 */
@@ -34,7 +34,6 @@ const props = defineProps({
     type: Number,
     default: 4,
   }, // 列数，默认 4 列
-
   cubeSize: {
     type: Number,
     default: 75,
@@ -70,6 +69,7 @@ watch(
 );
 
 const hotAreas = ref<Rect[]>([]); // 热区列表
+
 /** 初始化热区 */
 watch(
   () => props.modelValue,
@@ -86,20 +86,20 @@ const isHotAreaSelectMode = () => !!hotAreaBeginCube.value; // 是否开启了
  * @param currentRow 当前行号
  * @param currentCol 当前列号
  */
-const handleCubeClick = (currentRow: number, currentCol: number) => {
+function handleCubeClick(currentRow: number, currentCol: number) {
   const currentCube = cubes.value[currentRow]?.[currentCol];
   if (!currentCube) {
     return;
   }
 
-  // 情况1：进入热区选择模式
+  // 情况 1：进入热区选择模式
   if (!isHotAreaSelectMode()) {
     hotAreaBeginCube.value = currentCube;
     hotAreaBeginCube.value!.active = true;
     return;
   }
 
-  // 情况2：结束热区选择模式
+  // 情况 2：结束热区选择模式
   hotAreas.value.push(createRect(hotAreaBeginCube.value!, currentCube));
   // 结束热区选择模式
   exitHotAreaSelectMode();
@@ -111,7 +111,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
   }
   // 发送热区变动通知
   emitUpdateModelValue();
-};
+}
 
 /**
  * 处理鼠标经过方块
@@ -119,7 +119,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
  * @param currentRow 当前行号
  * @param currentCol 当前列号
  */
-const handleCellHover = (currentRow: number, currentCol: number) => {
+function handleCellHover(currentRow: number, currentCol: number) {
   // 当前没有进入热区选择模式
   if (!isHotAreaSelectMode()) {
     return;
@@ -138,7 +138,6 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
     if (isOverlap(hotArea, currentSelectedArea)) {
       // 结束热区选择模式
       exitHotAreaSelectMode();
-
       return;
     }
   }
@@ -147,13 +146,9 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
   eachCube((_, __, cube) => {
     cube.active = isContains(currentSelectedArea, cube);
   });
-};
+}
 
-/**
+/** 处理热区删除 */
- * 处理热区删除
- *
- * @param index 热区索引
- */
 function handleDeleteHotArea(index: number) {
   hotAreas.value.splice(index, 1);
   // 结束热区选择模式
@@ -165,10 +160,12 @@ function handleDeleteHotArea(index: number) {
 const emitUpdateModelValue = () => emit('update:modelValue', hotAreas.value); // 发送热区变动通知
 
 const selectedHotAreaIndex = ref(0); // 热区选中
-const handleHotAreaSelected = (hotArea: Rect, index: number) => {
+
+/** 处理热区选中 */
+function handleHotAreaSelected(hotArea: Rect, index: number) {
   selectedHotAreaIndex.value = index;
   emit('hotAreaSelected', hotArea, index);
-};
+}
 
 /**
  * 结束热区选择模式
@@ -189,7 +186,7 @@ function exitHotAreaSelectMode() {
  * 迭代魔方矩阵
  * @param callback 回调
  */
-const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
+function eachCube(callback: (x: number, y: number, cube: Cube) => void) {
   for (const [x, row] of cubes.value.entries()) {
     if (!row) continue;
     for (const [y, cube] of row.entries()) {
@@ -198,7 +195,7 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
       }
     }
   }
-};
+}
 </script>
 <template>
   <div class="relative">
@@ -261,13 +258,14 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
 
   .cube {
     box-sizing: border-box;
-    color: var(--el-text-color-secondary);
+    color: var(--ant-color-text-secondary);
     text-align: center;
+    line-height: 1;
     cursor: pointer;
-    border: 1px solid var(--el-border-color);
+    border: 1px solid var(--ant-color-border);
 
     &.active {
-      background: var(--el-color-primary-light-9);
+      background: color-mix(in srgb, var(--ant-color-primary) 10%, transparent);
     }
   }
 
@@ -277,12 +275,12 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--el-color-primary);
+    color: var(--ant-color-primary);
     cursor: pointer;
     border-spacing: 0;
     border-collapse: collapse;
-    background: var(--el-color-primary-light-8);
+    background: color-mix(in srgb, var(--ant-color-primary) 20%, transparent);
-    border: 1px solid var(--el-color-primary);
+    border: 1px solid var(--ant-color-primary);
 
     .btn-delete {
       position: absolute;
@@ -294,7 +292,7 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
       justify-content: center;
       width: 16px;
       height: 16px;
-      background-color: #fff;
+      background-color: var(--ant-color-bg-container);
       border-radius: 50%;
     }
   }

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

@@ -1,51 +1,47 @@
-// 坐标点
+/** 坐标点 */
 export interface Point {
   x: number;
   y: number;
 }
 
-// 矩形
+/** 矩形 */
 export interface Rect {
-  // 左上角 X 轴坐标
+  left: number; // 左上角 X 轴坐标
-  left: number;
+  top: number; // 左上角 Y 轴坐标
-  // 左上角 Y 轴坐标
+  right: number; // 右下角 X 轴坐标
-  top: number;
+  bottom: number; // 右下角 Y 轴坐标
-  // 右下角 X 轴坐标
+  width: number; // 矩形宽度
-  right: number;
+  height: number; // 矩形高度
-  // 右下角 Y 轴坐标
-  bottom: number;
-  // 矩形宽度
-  width: number;
-  // 矩形高度
-  height: number;
 }
 
 /**
  * 判断两个矩形是否重叠
+ *
  * @param a 矩形 A
  * @param b 矩形 B
  */
-export const isOverlap = (a: Rect, b: Rect): boolean => {
+export function isOverlap(a: Rect, b: Rect): boolean {
   return (
     a.left < b.left + b.width &&
     a.left + a.width > b.left &&
     a.top < b.top + b.height &&
     a.height + a.top > b.top
   );
-};
+}
+
 /**
  * 检查坐标点是否在矩形内
  * @param hotArea 矩形
  * @param point 坐标
  */
-export const isContains = (hotArea: Rect, point: Point): boolean => {
+export function isContains(hotArea: Rect, point: Point): boolean {
   return (
     point.x >= hotArea.left &&
     point.x < hotArea.right &&
     point.y >= hotArea.top &&
     point.y < hotArea.bottom
   );
-};
+}
 
 /**
  * 在两个坐标点中间，创建一个矩形
@@ -59,14 +55,17 @@ export const isContains = (hotArea: Rect, point: Point): boolean => {
  * @param a 坐标点一
  * @param b 坐标点二
  */
-export const createRect = (a: Point, b: Point): Rect => {
+export function createRect(a: Point, b: Point): Rect {
   // 计算矩形的范围
-  const [left, left2] = [a.x, b.x].sort();
+  let [left, left2] = [a.x, b.x].sort();
-  const [top, top2] = [a.y, b.y].sort();
+  left = left ?? 0;
+  left2 = left2 ?? 0;
+  let [top, top2] = [a.y, b.y].sort();
+  top = top ?? 0;
+  top2 = top2 ?? 0;
   const right = left2 + 1;
   const bottom = top2 + 1;
   const height = bottom - top;
   const width = right - left;
-
   return { left, right, top, bottom, height, width };
-};
+}

apps/web-ele/src/components/description/description.vue

@@ -127,9 +127,7 @@ export default defineComponent({
                 },
                 default: () => {
                   if (item.slot) {
-                    // TODO @xingyu：这里要 inline 掉么？
+                    return getSlot(slots, item.slot, data);
-                    const slotContent = getSlot(slots, item.slot, data);
-                    return slotContent;
                   }
                   if (!contentMinWidth) {
                     return getContent();

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

@@ -93,15 +93,11 @@ const handleDeleteComponent = () => {
 };
 </script>
 <template>
-  <div class="component" :class="[{ active }]">
+  <div class="component relative cursor-move" :class="[{ active }]">
-    <div
+    <div :style="style">
-      :style="{
-        ...style,
-      }"
-    >
       <component :is="component.id" :property="component.property" />
     </div>
-    <div class="component-wrap">
+    <div class="component-wrap absolute left-[-2px] top-0 block h-full w-full">
       <!-- 左侧：组件名（悬浮的小贴条） -->
       <div class="component-name" v-if="component.name">
         {{ component.name }}
@@ -150,19 +146,8 @@ $hover-border-width: 1px;
 $name-position: -85px;
 $toolbar-position: -55px;
 
-/* 组件 */
 .component {
-  position: relative;
-  cursor: move;
-
   .component-wrap {
-    position: absolute;
-    top: 0;
-    left: -$active-border-width;
-    display: block;
-    width: 100%;
-    height: 100%;
-
     /* 鼠标放到组件上时 */
     &:hover {
       border: $hover-border-width dashed var(--el-color-primary);
@@ -228,7 +213,7 @@ $toolbar-position: -55px;
     }
   }
 
-  /* 组件选中时 */
+  /* 选中状态 */
   &.active {
     margin-bottom: 4px;
 

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

@@ -61,7 +61,10 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 </script>
 
 <template>
-  <ElAside class="editor-left" width="261px">
+  <ElAside
+    class="editor-left z-[1] shrink-0 select-none shadow-[8px_0_8px_-8px_rgb(0_0_0/0.12)]"
+    width="261px"
+  >
     <ElScrollbar>
       <ElCollapse v-model="extendGroups">
         <ElCollapseItem
@@ -71,7 +74,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
           :title="group.name"
         >
           <draggable
-            class="component-container"
+            class="flex flex-wrap items-center"
             ghost-class="draggable-ghost"
             item-key="index"
             :list="group.components"
@@ -83,9 +86,18 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
           >
             <template #item="{ element }">
               <div>
-                <div class="drag-placement">组件放置区域</div>
+                <div class="hidden text-white">组件放置区域</div>
-                <div class="component">
+                <div
-                  <IconifyIcon :icon="element.icon" :size="32" />
+                  class="component flex h-[86px] w-[86px] cursor-move flex-col items-center justify-center border-b border-r [&:nth-of-type(3n)]:border-r-0"
+                  :style="{
+                    borderColor: 'var(--el-border-color-lighter)',
+                  }"
+                >
+                  <IconifyIcon
+                    :icon="element.icon"
+                    :size="32"
+                    class="mb-1 text-gray-500"
+                  />
                   <span class="mt-1 text-xs">{{ element.name }}</span>
                 </div>
               </div>
@@ -99,11 +111,6 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 
 <style scoped lang="scss">
 .editor-left {
-  z-index: 1;
-  flex-shrink: 0;
-  user-select: none;
-  box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
-
   :deep(.el-collapse) {
     border-top: none;
   }
@@ -124,50 +131,19 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     border-bottom: none;
   }
 
-  .component-container {
+  /* 组件 hover 和 active 状态（需要 CSS 变量）*/
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-
-  .component {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 86px;
-    height: 86px;
-    cursor: move;
-    border-right: 1px solid var(--el-border-color-lighter);
-    border-bottom: 1px solid var(--el-border-color-lighter);
-
-    .el-icon {
-      margin-bottom: 4px;
-      color: gray;
-    }
-  }
-
   .component.active,
   .component:hover {
     color: var(--el-color-white);
     background: var(--el-color-primary);
 
-    .el-icon {
+    :deep(.iconify) {
       color: var(--el-color-white);
     }
   }
-
-  .component:nth-of-type(3n) {
-    border-right: none;
-  }
-}
-
-/* 拖拽占位提示，默认不显示 */
-.drag-placement {
-  display: none;
-  color: #fff;
 }
 
+/* 拖拽区域全局样式 */
 .drag-area {
   /* 拖拽到手机区域时的样式 */
   .draggable-ghost {
@@ -203,14 +179,12 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
       background: #5487df;
     }
 
-    /* 拖拽时隐藏组件 */
     .component {
-      display: none;
+      display: none; /* 拖拽时隐藏组件 */
     }
 
-    /* 拖拽时显示占位提示 */
+    .hidden {
-    .drag-placement {
+      display: block !important; /* 拖拽时显示占位提示 */
-      display: block;
     }
   }
 }

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

@@ -304,9 +304,15 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <ElContainer class="editor">
+    <ElContainer class="editor flex h-full flex-col">
       <!-- 顶部：工具栏 -->
-      <ElHeader class="editor-header">
+      <ElHeader
+        class="editor-header flex !h-[42px] items-center justify-between !border-b !p-0"
+        :style="{
+          backgroundColor: 'var(--el-bg-color)',
+          borderBottomColor: 'var(--el-border-color)',
+        }"
+      >
         <!-- 左侧操作区 -->
         <slot name="toolBarLeft"></slot>
         <!-- 中心操作区 -->
@@ -334,7 +340,7 @@ onMounted(() => {
       </ElHeader>
 
       <!-- 中心区域 -->
-      <ElContainer class="editor-container">
+      <ElContainer class="editor-container h-[calc(100vh-135px)]">
         <!-- 左侧：组件库（ComponentLibrary） -->
         <ElAside width="261px" class="editor-left">
           <ComponentLibrary
@@ -344,11 +350,15 @@ onMounted(() => {
           />
         </ElAside>
         <!-- 中心：设计区域（ComponentContainer） -->
-        <div class="editor-center page-prop-area" @click="handlePageSelected">
+        <div
+          class="editor-center page-prop-area relative mt-4 flex w-full flex-1 flex-col justify-center overflow-hidden"
+          :style="{ backgroundColor: 'var(--app-content-bg-color)' }"
+          @click="handlePageSelected"
+        >
           <!-- 手机顶部 -->
-          <div class="editor-design-top">
+          <div class="editor-design-top mx-auto flex w-[375px] flex-col">
             <!-- 手机顶部状态栏 -->
-            <img alt="" class="status-bar" :src="statusBarImg" />
+            <img alt="" class="h-5 w-[375px] bg-white" :src="statusBarImg" />
             <!-- 手机顶部导航栏 -->
             <ComponentContainer
               v-if="showNavigationBar"
@@ -415,7 +425,7 @@ onMounted(() => {
           <!-- 手机底部导航 -->
           <div
             v-if="showTabBar"
-            class="editor-design-bottom component cursor-pointer"
+            class="editor-design-bottom component mx-auto w-[375px] cursor-pointer"
           >
             <ComponentContainer
               :active="selectedComponent?.id === tabBarComponent.id"
@@ -425,7 +435,9 @@ onMounted(() => {
             />
           </div>
           <!-- 固定布局的组件 操作按钮区 -->
-          <div class="fixed-component-action-group">
+          <div
+            class="fixed-component-action-group absolute right-4 top-0 flex flex-col gap-2"
+          >
             <ElTag
               v-if="showPageConfig"
               :effect="
@@ -467,7 +479,7 @@ onMounted(() => {
         <!-- 右侧：属性面板（ComponentContainerProperty） -->
         <ElAside
           v-if="selectedComponent?.property"
-          class="editor-right"
+          class="editor-right shrink-0 overflow-hidden shadow-[-8px_0_8px_-8px_rgb(0_0_0/0.12)]"
           width="350px"
         >
           <ElCard
@@ -516,22 +528,8 @@ onMounted(() => {
 /* 手机宽度 */
 $phone-width: 375px;
 
-/* 根节点样式 */
 .editor {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  /* 顶部：工具栏 */
   .editor-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 42px;
-    padding: 0;
-    background-color: var(--el-bg-color);
-    border-bottom: solid 1px var(--el-border-color);
-
     /* 隐藏工具栏按钮的边框 */
     :deep(.el-radio-button__inner),
     :deep(.el-button) {
@@ -543,14 +541,8 @@ $phone-width: 375px;
 
   /* 中心操作区 */
   .editor-container {
-    height: calc(100vh - 135px);
-
     /* 右侧属性面板 */
     :deep(.editor-right) {
-      flex-shrink: 0;
-      overflow: hidden;
-      box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
-
       /* 属性面板顶部：减少内边距 */
       :deep(.el-card__header) {
         padding: 8px 16px;
@@ -579,37 +571,6 @@ $phone-width: 375px;
 
     /* 中心区域 */
     .editor-center {
-      position: relative;
-      display: flex;
-      flex: 1 1 0;
-      flex-direction: column;
-      justify-content: center;
-      width: 100%;
-      margin: 16px 0 0;
-      overflow: hidden;
-      background-color: var(--app-content-bg-color);
-
-      /* 手机顶部 */
-      .editor-design-top {
-        display: flex;
-        flex-direction: column;
-        width: $phone-width;
-        margin: 0 auto;
-
-        /* 手机顶部状态栏 */
-        .status-bar {
-          width: $phone-width;
-          height: 20px;
-          background-color: #fff;
-        }
-      }
-
-      /* 手机底部导航 */
-      .editor-design-bottom {
-        width: $phone-width;
-        margin: 0 auto;
-      }
-
       /* 手机页面编辑区域 */
       :deep(.editor-design-center) {
         width: 100%;
@@ -632,13 +593,6 @@ $phone-width: 375px;
 
       /* 固定布局的组件 操作按钮区 */
       .fixed-component-action-group {
-        position: absolute;
-        top: 0;
-        right: 16px;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-
         :deep(.el-tag) {
           border: none;
           box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);