feat：【antd】【mall】diy 主页面的迁移

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

@@ -0,0 +1,44 @@
+<template>
+  <div class="diy-editor-placeholder">
+    <div class="text-center py-20">
+      <h2>DiyEditor 组件</h2>
+      <p class="text-gray-500">此组件待实现</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// 暂时的占位符组件
+// TODO: 实现完整的 DiyEditor 功能
+
+interface Props {
+  modelValue?: any;
+  title?: string;
+  libs?: any[];
+  previewUrl?: string;
+  showNavigationBar?: boolean;
+  showPageConfig?: boolean;
+  showTabBar?: boolean;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any];
+  save: [];
+  reset: [];
+}>();
+
+// 占位符，暂时什么都不做
+</script>
+
+<style scoped>
+.diy-editor-placeholder {
+  min-height: 400px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

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

@@ -0,0 +1,125 @@
+// 页面装修组件
+export interface DiyComponent<T> {
+  // 用于区分同一种组件的不同实例
+  uid?: number;
+  // 组件唯一标识
+  id: string;
+  // 组件名称
+  name: string;
+  // 组件图标
+  icon: string;
+  /*
+   组件位置：
+   top: 固定于手机顶部，例如 顶部的导航栏
+   bottom: 固定于手机底部，例如 底部的菜单导航栏
+   center: 位于手机中心，每个组件占一行，顺序向下排列
+   空：同center
+   fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
+  */
+  position?: '' | 'bottom' | 'center' | 'fixed' | 'top';
+  // 组件属性
+  property: T;
+}
+
+// 页面装修组件库
+export interface DiyComponentLibrary {
+  // 组件库名称
+  name: string;
+  // 是否展开
+  extended: boolean;
+  // 组件列表
+  components: string[];
+}
+
+// 组件样式
+export interface ComponentStyle {
+  // 背景类型
+  bgType: 'color' | 'img';
+  // 背景颜色
+  bgColor: string;
+  // 背景图片
+  bgImg: string;
+  // 外边距
+  margin: number;
+  marginTop: number;
+  marginRight: number;
+  marginBottom: number;
+  marginLeft: number;
+  // 内边距
+  padding: number;
+  paddingTop: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  // 边框圆角
+  borderRadius: number;
+  borderTopLeftRadius: number;
+  borderTopRightRadius: number;
+  borderBottomRightRadius: number;
+  borderBottomLeftRadius: number;
+}
+
+// 页面配置
+export interface PageConfig {
+  // 页面属性
+  page: any;
+  // 顶部导航栏属性
+  navigationBar: any;
+  // 底部导航菜单属性
+  tabBar?: any;
+  // 页面组件列表
+  components: PageComponent[];
+}
+// 页面组件，只保留组件ID，组件属性
+export type PageComponent = Pick<DiyComponent<any>, 'id' | 'property'>;
+
+// 页面组件库
+export const PAGE_LIBS = [
+  {
+    name: '基础组件',
+    extended: true,
+    components: [
+      'SearchBar',
+      'NoticeBar',
+      'MenuSwiper',
+      'MenuGrid',
+      'MenuList',
+      'Popover',
+      'FloatingActionButton',
+    ],
+  },
+  {
+    name: '图文组件',
+    extended: true,
+    components: [
+      'ImageBar',
+      'Carousel',
+      'TitleBar',
+      'VideoPlayer',
+      'Divider',
+      'MagicCube',
+      'HotZone',
+    ],
+  },
+  {
+    name: '商品组件',
+    extended: true,
+    components: ['ProductCard', 'ProductList'],
+  },
+  {
+    name: '用户组件',
+    extended: true,
+    components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon'],
+  },
+  {
+    name: '营销组件',
+    extended: true,
+    components: [
+      'PromotionCombination',
+      'PromotionSeckill',
+      'PromotionPoint',
+      'CouponCard',
+      'PromotionArticle',
+    ],
+  },
+] as DiyComponentLibrary[];

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

@@ -1,3 +1,5 @@
+export { default as DiyEditor } from './diy-editor/index.vue';
+export { type DiyComponentLibrary, PAGE_LIBS } from './diy-editor/util';
 export { default as SpuAndSkuList } from './spu-and-sku-list.vue';
 export { default as SpuSkuSelect } from './spu-sku-select.vue';