feat：【antd】【mall】diy-editor 修复 element-plus 组件之路：部分解决 10%

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';

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 链接输入框 */

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' });
 

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';

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';

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';

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">
+  <Form
-    <el-form-item label="样式" prop="styleType">
+    :label-col="{ span: 6 }"
-      <el-radio-group v-model="formData!.styleType">
+    :wrapper-col="{ span: 18 }"
-        <el-radio value="normal">标准</el-radio>
+    :model="formData"
-        <el-tooltip
+    :rules="rules"
-          content="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件"
+  >
+    <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>
+          <Radio value="inner">沉浸式</Radio>
-        </el-tooltip>
+        </Tooltip>
-      </el-radio-group>
+      </RadioGroup>
-    </el-form-item>
+    </FormItem>
-    <el-form-item
+    <FormItem
       label="常驻显示"
-      prop="alwaysShow"
+      name="alwaysShow"
       v-if="formData.styleType === 'inner'"
     >
-      <el-radio-group v-model="formData!.alwaysShow">
+      <RadioGroup v-model:value="formData!.alwaysShow">
-        <el-radio :value="false">关闭</el-radio>
+        <Radio :value="false">关闭</Radio>
-        <el-tooltip
+        <Tooltip
-          content="常驻显示关闭后,头部小组件将在页面滑动时淡入"
+          title="常驻显示关闭后,头部小组件将在页面滑动时淡入"
           placement="top"
         >
-          <el-radio :value="true">开启</el-radio>
+          <Radio :value="true">开启</Radio>
-        </el-tooltip>
+        </Tooltip>
-      </el-radio-group>
+      </RadioGroup>
-    </el-form-item>
+    </FormItem>
-    <el-form-item label="背景类型" prop="bgType">
+    <FormItem label="背景类型" name="bgType">
-      <el-radio-group v-model="formData.bgType">
+      <RadioGroup v-model:value="formData.bgType">
-        <el-radio value="color">纯色</el-radio>
+        <Radio value="color">纯色</Radio>
-        <el-radio value="img">图片</el-radio>
+        <Radio value="img">图片</Radio>
-      </el-radio-group>
+      </RadioGroup>
-    </el-form-item>
+    </FormItem>
-    <el-form-item
+    <FormItem
       label="背景颜色"
-      prop="bgColor"
+      name="bgColor"
       v-if="formData.bgType === 'color'"
     >
       <ColorInput v-model="formData.bgColor" />
-    </el-form-item>
+    </FormItem>
-    <el-form-item label="背景图片" prop="bgImg" v-else>
+    <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>
+    </FormItem>
-    <el-card class="property-group" shadow="never">
+    <Card class="property-group" :bordered="false">
-      <template #header>
+      <template #title>
         <div class="flex items-center justify-between">
           <span>内容（小程序）</span>
-          <el-form-item prop="_local.previewMp" class="mb-0">
+          <FormItem name="_local.previewMp" class="mb-0">
-            <el-checkbox
+            <Checkbox
-              v-model="formData._local.previewMp"
+              v-model:checked="formData._local.previewMp"
               @change="
                 formData._local.previewOther = !formData._local.previewMp
               "
             >
               预览
-            </el-checkbox>
+            </Checkbox>
-          </el-form-item>
+          </FormItem>
         </div>
       </template>
       <NavigationBarCellProperty v-model="formData.mpCells" is-mp />
-    </el-card>
+    </Card>
-    <el-card class="property-group" shadow="never">
+    <Card class="property-group" :bordered="false">
-      <template #header>
+      <template #title>
         <div class="flex items-center justify-between">
           <span>内容（非小程序）</span>
-          <el-form-item prop="_local.previewOther" class="mb-0">
+          <FormItem name="_local.previewOther" class="mb-0">
-            <el-checkbox
+            <Checkbox
-              v-model="formData._local.previewOther"
+              v-model:checked="formData._local.previewOther"
               @change="
                 formData._local.previewMp = !formData._local.previewOther
               "
             >
               预览
-            </el-checkbox>
+            </Checkbox>
-          </el-form-item>
+          </FormItem>
         </div>
       </template>
       <NavigationBarCellProperty v-model="formData.otherCells" :is-mp="false" />
-    </el-card>
+    </Card>
-  </el-form>
+  </Form>
 </template>
 
 <style scoped lang="scss"></style>

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';

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';
 
 /** 拖拽组件封装 */

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' });

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 官方的按钮组只支持水平显示，通过重写样式实现垂直布局