From 289f6e3de4469ead824548cd6b13990b49d89d4e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 26 Oct 2025 00:02:51 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90mal?=
 =?UTF-8?q?l=E3=80=91diy-editor=20=E4=BF=AE=E5=A4=8D=20element-plus=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B9=8B=E8=B7=AF=EF=BC=9A=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3=2010%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app-link-input/app-link-select-dialog.vue |   2 +
 .../components/app-link-input/index.vue       |   4 +-
 .../components/color-input/index.vue          |   3 +-
 .../component-container-property.vue          |  11 ++
 .../components/component-container.vue        |   2 +
 .../components/component-library.vue          |   1 +
 .../mobile/navigation-bar/property.vue        | 113 ++++++++++--------
 .../promotion/components/diy-editor/index.vue |   1 +
 .../promotion/components/draggable/index.vue  |   3 +-
 .../components/input-with-color/index.vue     |   1 +
 .../vertical-button-group/index.vue           |   2 +
 11 files changed, 90 insertions(+), 53 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
index 6f87ab295..2cbd8d12d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
@@ -5,6 +5,8 @@ import { nextTick, ref } from 'vue';
 
 import { getUrlNumberValue } from '@vben/utils';
 
+import { Button, Form, FormItem, Modal, Tooltip } from 'ant-design-vue';
+
 import ProductCategorySelect from '#/views/mall/product/category/components/product-category-select.vue';
 
 import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM } from './data';
diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
index dc5741ca6..8be7cada4 100644
--- a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-// TODO @AI：改成 El 标签风格，而不是 el-
-// TODO @AI：一些 modal 是否使用 Modal 组件，而不是 el-modal？
 import { ref, watch } from 'vue';
 
+import { Button, Input, InputGroup } from 'ant-design-vue';
+
 import AppLinkSelectDialog from './app-link-select-dialog.vue';
 
 /** APP 链接输入框 */
diff --git a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
index 96c9b3b5f..192dfab15 100644
--- a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-// TODO @AI：改成 El 风格，而不是iel- 风格；
 import { computed } from 'vue';
 
 import { PREDEFINE_COLORS } from '@vben/constants';
 
+import { Input, InputGroup } from 'ant-design-vue';
+
 /** 颜色输入框 */
 defineOptions({ name: 'ColorInput' });
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
index 96a4adf43..10cf7ae2e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@@ -2,6 +2,17 @@
 import type { ComponentStyle } from '../util';
 
 import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Slider,
+  TabPane,
+  Tabs,
+  Tree,
+} from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
index add4b6f82..fc8546957 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -5,6 +5,8 @@ import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Button, Tooltip } from 'ant-design-vue';
+
 import { VerticalButtonGroup } from '#/views/mall/promotion/components';
 
 import { components } from './mobile';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index a86f5b4d5..56907c105 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -6,6 +6,7 @@ import { reactive, watch } from 'vue';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
+import { Collapse, CollapsePanel } from 'ant-design-vue';
 import draggable from 'vuedraggable';
 
 import { componentConfigs } from './mobile/index';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
index ce3e3f698..21f3849af 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
@@ -2,6 +2,18 @@
 import type { NavigationBarProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 import NavigationBarCellProperty from './components/cell-property.vue';
 
@@ -23,47 +35,52 @@ if (!formData.value._local) {
 </script>
 
 <template>
-  <el-form label-width="80px" :model="formData" :rules="rules">
-    <el-form-item label="样式" prop="styleType">
-      <el-radio-group v-model="formData!.styleType">
-        <el-radio value="normal">标准</el-radio>
-        <el-tooltip
-          content="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件"
+  <Form
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
+    :model="formData"
+    :rules="rules"
+  >
+    <FormItem label="样式" name="styleType">
+      <RadioGroup v-model:value="formData!.styleType">
+        <Radio value="normal">标准</Radio>
+        <Tooltip
+          title="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件"
           placement="top"
         >
-          <el-radio value="inner">沉浸式</el-radio>
-        </el-tooltip>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item
+          <Radio value="inner">沉浸式</Radio>
+        </Tooltip>
+      </RadioGroup>
+    </FormItem>
+    <FormItem
       label="常驻显示"
-      prop="alwaysShow"
+      name="alwaysShow"
       v-if="formData.styleType === 'inner'"
     >
-      <el-radio-group v-model="formData!.alwaysShow">
-        <el-radio :value="false">关闭</el-radio>
-        <el-tooltip
-          content="常驻显示关闭后,头部小组件将在页面滑动时淡入"
+      <RadioGroup v-model:value="formData!.alwaysShow">
+        <Radio :value="false">关闭</Radio>
+        <Tooltip
+          title="常驻显示关闭后,头部小组件将在页面滑动时淡入"
           placement="top"
         >
-          <el-radio :value="true">开启</el-radio>
-        </el-tooltip>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="背景类型" prop="bgType">
-      <el-radio-group v-model="formData.bgType">
-        <el-radio value="color">纯色</el-radio>
-        <el-radio value="img">图片</el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item
+          <Radio :value="true">开启</Radio>
+        </Tooltip>
+      </RadioGroup>
+    </FormItem>
+    <FormItem label="背景类型" name="bgType">
+      <RadioGroup v-model:value="formData.bgType">
+        <Radio value="color">纯色</Radio>
+        <Radio value="img">图片</Radio>
+      </RadioGroup>
+    </FormItem>
+    <FormItem
       label="背景颜色"
-      prop="bgColor"
+      name="bgColor"
       v-if="formData.bgType === 'color'"
     >
       <ColorInput v-model="formData.bgColor" />
-    </el-form-item>
-    <el-form-item label="背景图片" prop="bgImg" v-else>
+    </FormItem>
+    <FormItem label="背景图片" name="bgImg" v-else>
       <div class="flex items-center">
         <UploadImg
           v-model="formData.bgImg"
@@ -74,44 +91,44 @@ if (!formData.value._local) {
         />
         <span class="mb-2 ml-2 text-xs text-gray-400">建议宽度：750</span>
       </div>
-    </el-form-item>
-    <el-card class="property-group" shadow="never">
-      <template #header>
+    </FormItem>
+    <Card class="property-group" :bordered="false">
+      <template #title>
         <div class="flex items-center justify-between">
           <span>内容（小程序）</span>
-          <el-form-item prop="_local.previewMp" class="mb-0">
-            <el-checkbox
-              v-model="formData._local.previewMp"
+          <FormItem name="_local.previewMp" class="mb-0">
+            <Checkbox
+              v-model:checked="formData._local.previewMp"
               @change="
                 formData._local.previewOther = !formData._local.previewMp
               "
             >
               预览
-            </el-checkbox>
-          </el-form-item>
+            </Checkbox>
+          </FormItem>
         </div>
       </template>
       <NavigationBarCellProperty v-model="formData.mpCells" is-mp />
-    </el-card>
-    <el-card class="property-group" shadow="never">
-      <template #header>
+    </Card>
+    <Card class="property-group" :bordered="false">
+      <template #title>
         <div class="flex items-center justify-between">
           <span>内容（非小程序）</span>
-          <el-form-item prop="_local.previewOther" class="mb-0">
-            <el-checkbox
-              v-model="formData._local.previewOther"
+          <FormItem name="_local.previewOther" class="mb-0">
+            <Checkbox
+              v-model:checked="formData._local.previewOther"
               @change="
                 formData._local.previewMp = !formData._local.previewOther
               "
             >
               预览
-            </el-checkbox>
-          </el-form-item>
+            </Checkbox>
+          </FormItem>
         </div>
       </template>
       <NavigationBarCellProperty v-model="formData.otherCells" :is-mp="false" />
-    </el-card>
-  </el-form>
+    </Card>
+  </Form>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
index 19985bde5..244762af8 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
@@ -8,6 +8,7 @@ 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 draggable from 'vuedraggable';
 
 import statusBarImg from '#/assets/imgs/diy/statusBar.png';
diff --git a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
index 3fe2877cf..8bb352329 100644
--- a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-// TODO @芋艿：后续合并到 diy-editor 里，并不是通用的；
-
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
+import { Button, Tooltip } from 'ant-design-vue';
 import VueDraggable from 'vuedraggable';
 
 /** 拖拽组件封装 */
diff --git a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
index 2e6336f5f..879ba756b 100644
--- a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
@@ -2,6 +2,7 @@
 import { PREDEFINE_COLORS } from '@vben/constants';
 
 import { useVModels } from '@vueuse/core';
+import { Input, InputGroup } from 'ant-design-vue';
 
 /** 带颜色选择器输入框 */
 defineOptions({ name: 'InputWithColor' });
diff --git a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
index 7af14dbcc..f7b609c1d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ButtonGroup } from 'ant-design-vue';
+
 /**
  * 垂直按钮组
  * Element 官方的按钮组只支持水平显示，通过重写样式实现垂直布局