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

2025-10-26 00:02:51 +08:00
parent 0fb4f0f9eb
commit 289f6e3de4
11 changed files with 90 additions and 53 deletions
--- 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';
--- 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 链接输入框 */
--- 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' });

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

 /** 拖拽组件封装 */
--- 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' });
--- 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 官方的按钮组只支持水平显示，通过重写样式实现垂直布局