From 216ad338ede566ceb455f60d76cd8fafa7ff178a Mon Sep 17 00:00:00 2001
From: zengjunhong <1213276609@qq.com>
Date: Thu, 17 Apr 2025 15:30:46 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=AF=8C=E6=96=87=E6=9C=AC=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-admin-vue3/.env.local                   |   4 +-
 .../components/mobile/CarouselLong/config.ts  |  51 +++++
 .../components/mobile/CarouselLong/index.vue  |  33 +++
 .../mobile/CarouselLong/property.vue          | 106 +++++++++
 .../mobile/PromotionPoint/config.ts           |   2 +-
 .../mobile/PromotionPoint/index.vue           | 134 +++++-------
 .../mobile/PromotionPoint/property.vue        |  35 +--
 .../components/mobile/Richtext/config.ts      |  57 +++++
 .../components/mobile/Richtext/index.vue      | 202 ++++++++++++++++++
 .../components/mobile/Richtext/property.vue   |  55 +++++
 .../src/components/DiyEditor/util.ts          |   8 +-
 .../mall/promotion/diy/template/decorate.vue  |   2 +-
 12 files changed, 581 insertions(+), 108 deletions(-)
 create mode 100644 yudao-admin-vue3/src/components/DiyEditor/components/mobile/CarouselLong/config.ts
 create mode 100644 yudao-admin-vue3/src/components/DiyEditor/components/mobile/CarouselLong/index.vue
 create mode 100644 yudao-admin-vue3/src/components/DiyEditor/components/mobile/CarouselLong/property.vue
 create mode 100644 yudao-admin-vue3/src/components/DiyEditor/components/mobile/Richtext/config.ts
 create mode 100644 yudao-admin-vue3/src/components/DiyEditor/components/mobile/Richtext/index.vue
 create mode 100644 yudao-admin-vue3/src/components/DiyEditor/components/mobile/Richtext/property.vue

diff --git a/yudao-admin-vue3/.env.local b/yudao-admin-vue3/.env.local
index 120bda0..99bbe56 100644
--- a/yudao-admin-vue3/.env.local
+++ b/yudao-admin-vue3/.env.local
@@ -4,8 +4,8 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-#VITE_BASE_URL='https://zysc.fjptzykj.com'
-VITE_BASE_URL='http://192.168.1.12:6127'
+VITE_BASE_URL='https://zysc.fjptzykj.com'
+# VITE_BASE_URL='http://192.168.1.12:6127'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CarouselLong/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CarouselLong/config.ts
new file mode 100644
index 0000000..0d36b80
--- /dev/null
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CarouselLong/config.ts
@@ -0,0 +1,51 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 轮播图属性 */
+export interface CarouselProperty {
+  // 类型：默认 | 卡片
+  type: 'default' | 'card'
+  // 指示器样式：点 | 数字
+  indicator: 'dot' | 'number'
+  // 是否自动播放
+  autoplay: boolean
+  // 播放间隔
+  interval: number
+  // 轮播内容
+  items: CarouselItemProperty[]
+  // 组件样式
+  style: ComponentStyle
+}
+// 轮播内容属性
+export interface CarouselItemProperty {
+  // 类型：图片 | 视频
+  type: 'img' | 'video'
+  // 图片链接
+  imgUrl: string
+  // 视频链接
+  videoUrl: string
+  // 跳转链接
+  url: string
+}
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-09.png'
+// 定义组件
+export const component = {
+  id: 'CarouselLong',
+  name: '长轮播图',
+  // icon: 'system-uicons:carousel',
+  icon: logo,
+  property: {
+    type: 'default',
+    indicator: 'dot',
+    autoplay: false,
+    interval: 3,
+    items: [
+      { type: 'img', imgUrl: 'https://static.iocoder.cn/mall/banner-01.jpg', videoUrl: '' },
+      { type: 'img', imgUrl: 'https://static.iocoder.cn/mall/banner-02.jpg', videoUrl: '' }
+    ] as CarouselItemProperty[],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<CarouselProperty>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CarouselLong/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CarouselLong/index.vue
new file mode 100644
index 0000000..3f640fb
--- /dev/null
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CarouselLong/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <!-- 无图片 -->
+  <div class="h-250px flex items-center justify-center bg-gray-3" v-if="property.items.length === 0">
+    <Icon icon="tdesign:image" class="text-gray-8 text-120px!" />
+  </div>
+  <div v-else class="relative">
+    <el-carousel height="calc(100vh - 50px)" :type="property.type === 'card' ? 'card' : ''"
+      :autoplay="property.autoplay" :interval="property.interval * 1000"
+      :indicator-position="property.indicator === 'number' ? 'none' : undefined" @change="handleIndexChange">
+      <el-carousel-item v-for="(item, index) in property.items" :key="index">
+        <el-image class="h-full w-full" :src="item.imgUrl" />
+      </el-carousel-item>
+    </el-carousel>
+    <div v-if="property.indicator === 'number'"
+      class="absolute bottom-10px right-10px rounded-xl bg-black p-x-8px p-y-2px text-10px text-white opacity-40">{{
+        currentIndex }} / {{ property.items.length }}</div>
+  </div>
+</template>
+<script setup lang="ts">
+import { CarouselProperty } from './config'
+
+/** 轮播图 */
+defineOptions({ name: 'Carousel' })
+
+defineProps<{ property: CarouselProperty }>()
+
+const currentIndex = ref(0)
+const handleIndexChange = (index: number) => {
+  currentIndex.value = index + 1
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CarouselLong/property.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CarouselLong/property.vue
new file mode 100644
index 0000000..c3a5154
--- /dev/null
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CarouselLong/property.vue
@@ -0,0 +1,106 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form label-width="80px" :model="formData">
+      <el-card header="样式设置" class="property-group" shadow="never">
+        <el-form-item label="样式" prop="type">
+          <el-radio-group v-model="formData.type">
+            <el-tooltip class="item" content="默认" placement="bottom">
+              <el-radio-button label="default">
+                <Icon icon="system-uicons:carousel" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="卡片" placement="bottom">
+              <el-radio-button label="card">
+                <Icon icon="ic:round-view-carousel" />
+              </el-radio-button>
+            </el-tooltip>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="指示器" prop="indicator">
+          <el-radio-group v-model="formData.indicator">
+            <el-radio label="dot">小圆点</el-radio>
+            <el-radio label="number">数字</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="是否轮播" prop="autoplay">
+          <el-switch v-model="formData.autoplay" />
+        </el-form-item>
+        <el-form-item label="播放间隔" prop="interval" v-if="formData.autoplay">
+          <el-slider
+            v-model="formData.interval"
+            :max="10"
+            :min="0.5"
+            :step="0.5"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+          <el-text type="info">单位：秒</el-text>
+        </el-form-item>
+      </el-card>
+      <el-card header="内容设置" class="property-group" shadow="never">
+        <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
+          <template #default="{ element }">
+            <el-form-item label="类型" prop="type" class="m-b-8px!" label-width="40px">
+              <el-radio-group v-model="element.type">
+                <el-radio label="img">图片</el-radio>
+                <el-radio label="video">视频</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              label="图片"
+              class="m-b-8px!"
+              label-width="40px"
+              v-if="element.type === 'img'"
+            >
+              <UploadImg
+                v-model="element.imgUrl"
+                draggable="false"
+                height="80px"
+                width="100%"
+                class="min-w-80px"
+              />
+            </el-form-item>
+            <template v-else>
+              <el-form-item label="封面" class="m-b-8px!" label-width="40px">
+                <UploadImg
+                  v-model="element.imgUrl"
+                  draggable="false"
+                  height="80px"
+                  width="100%"
+                  class="min-w-80px"
+                />
+              </el-form-item>
+              <el-form-item label="视频" class="m-b-8px!" label-width="40px">
+                <UploadFile
+                  v-model="element.videoUrl"
+                  :file-type="['mp4']"
+                  :limit="1"
+                  :file-size="100"
+                  class="min-w-80px"
+                />
+              </el-form-item>
+            </template>
+            <el-form-item label="链接" class="m-b-8px!" label-width="40px">
+              <AppLinkInput v-model="element.url" />
+            </el-form-item>
+          </template>
+        </Draggable>
+      </el-card>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { CarouselProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+
+// 轮播图属性面板
+defineOptions({ name: 'CarouselProperty' })
+
+const props = defineProps<{ modelValue: CarouselProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts
index c8ac992..eb2ce08 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts
@@ -3,7 +3,7 @@ import {ComponentStyle, DiyComponent} from '@/components/DiyEditor/util'
 /** 积分商城属性 */
 export interface PromotionPointProperty {
   // 布局类型：单列 | 三列
-  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol' | 'oneColSwiper'
   // 商品字段
   fields: {
     // 商品名称
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/index.vue
index 4acd93f..df66bc4 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/index.vue
@@ -1,90 +1,66 @@
 <template>
-  <div ref="containerRef" :class="`box-content min-h-30px w-full flex flex-row flex-wrap`">
-    <div
-      v-for="(spu, index) in spuList"
-      :key="index"
-      :style="{
-        ...calculateSpace(index),
-        ...calculateWidth(),
-        borderTopLeftRadius: `${property.borderRadiusTop}px`,
-        borderTopRightRadius: `${property.borderRadiusTop}px`,
-        borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
-        borderBottomRightRadius: `${property.borderRadiusBottom}px`
-      }"
-      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
-    >
+  <div ref="containerRef" class="box-content min-h-30px w-full flex flex-row flex-wrap"
+    :class="{ 'one-Col-swiper': property.layoutType === 'oneColSwiper' }">
+    <div v-for="(spu, index) in spuList" :key="index" :style="{
+      ...calculateSpace(index),
+      ...calculateWidth(),
+      borderTopLeftRadius: `${property.borderRadiusTop}px`,
+      borderTopRightRadius: `${property.borderRadiusTop}px`,
+      borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+      borderBottomRightRadius: `${property.borderRadiusBottom}px`
+    }" class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      :class="{ 'one-Col-swiper-item': property.layoutType === 'oneColSwiper' }">
       <!-- 角标 -->
       <div v-if="property.badge.show" class="absolute left-0 top-0 z-1 items-center justify-center">
         <el-image :src="property.badge.imgUrl" class="h-26px w-38px" fit="cover" />
       </div>
       <!-- 商品封面图 -->
-      <div
-        :class="[
-          'h-140px',
-          {
-            'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-140px': property.layoutType === 'oneColSmallImg'
-          }
-        ]"
-      >
+      <div :class="[
+        'h-140px',
+        {
+          'w-full': property.layoutType !== 'oneColSmallImg',
+          'w-140px': property.layoutType === 'oneColSmallImg'
+        }
+      ]">
         <el-image :src="spu.picUrl" class="h-full w-full" fit="cover" />
       </div>
-      <div
-        :class="[
-          ' flex flex-col gap-8px p-8px box-border',
-          {
-            'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100%-140px-16px)]': property.layoutType === 'oneColSmallImg'
-          }
-        ]"
-      >
+      <div v-if="property.layoutType !== 'oneColSwiper'" :class="[
+        ' flex flex-col gap-8px p-8px box-border',
+        {
+          'w-full': property.layoutType !== 'oneColSmallImg',
+          'w-[calc(100%-140px-16px)]': property.layoutType === 'oneColSmallImg'
+        }
+      ]">
         <!-- 商品名称 -->
-        <div
-          v-if="property.fields.name.show"
-          :class="[
-            'text-14px ',
-            {
-              truncate: property.layoutType !== 'oneColSmallImg',
-              'overflow-ellipsis line-clamp-2': property.layoutType === 'oneColSmallImg'
-            }
-          ]"
-          :style="{ color: property.fields.name.color }"
-        >
+        <div v-if="property.fields.name.show" :class="[
+          'text-14px ',
+          {
+            truncate: property.layoutType !== 'oneColSmallImg',
+            'overflow-ellipsis line-clamp-2': property.layoutType === 'oneColSmallImg'
+          }
+        ]" :style="{ color: property.fields.name.color }">
           {{ spu.name }}
         </div>
         <!-- 商品简介 -->
-        <div
-          v-if="property.fields.introduction.show"
-          :style="{ color: property.fields.introduction.color }"
-          class="truncate text-12px"
-        >
+        <div v-if="property.fields.introduction.show" :style="{ color: property.fields.introduction.color }"
+          class="truncate text-12px">
           {{ spu.introduction }}
         </div>
         <div>
           <!-- 积分 -->
-          <span
-            v-if="property.fields.price.show"
-            :style="{ color: property.fields.price.color }"
-            class="text-16px"
-          >
+          <span v-if="property.fields.price.show" :style="{ color: property.fields.price.color }" class="text-16px">
             {{ spu.point }}积分
             {{ !spu.pointPrice || spu.pointPrice === 0 ? '' : `+${fenToYuan(spu.pointPrice)}元` }}
           </span>
           <!-- 市场价 -->
-          <span
-            v-if="property.fields.marketPrice.show && spu.marketPrice"
-            :style="{ color: property.fields.marketPrice.color }"
-            class="ml-4px text-10px line-through"
-          >
+          <span v-if="property.fields.marketPrice.show && spu.marketPrice"
+            :style="{ color: property.fields.marketPrice.color }" class="ml-4px text-10px line-through">
             ￥{{ fenToYuan(spu.marketPrice) }}
           </span>
         </div>
         <div class="text-12px">
           <!-- 销量 -->
-          <span
-            v-if="property.fields.salesCount.show"
-            :style="{ color: property.fields.salesCount.color }"
-          >
+          <span v-if="property.fields.salesCount.show" :style="{ color: property.fields.salesCount.color }">
             已兑{{ (spu.pointTotalStock || 0) - (spu.pointStock || 0) }}件
           </span>
           <!-- 库存 -->
@@ -94,24 +70,15 @@
         </div>
       </div>
       <!-- 购买按钮 -->
-      <div class="absolute bottom-8px right-8px">
+      <div class="absolute bottom-8px right-8px" v-if="property.layoutType !== 'oneColSwiper'">
         <!-- 文字按钮 -->
-        <span
-          v-if="property.btnBuy.type === 'text'"
-          :style="{
-            background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`
-          }"
-          class="rounded-full p-x-12px p-y-4px text-12px text-white"
-        >
+        <span v-if="property.btnBuy.type === 'text'" :style="{
+          background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`
+        }" class="rounded-full p-x-12px p-y-4px text-12px text-white">
           {{ property.btnBuy.text }}
         </span>
         <!-- 图片按钮 -->
-        <el-image
-          v-else
-          :src="property.btnBuy.imgUrl"
-          class="h-28px w-28px rounded-full"
-          fit="cover"
-        />
+        <el-image v-else :src="property.btnBuy.imgUrl" class="h-28px w-28px rounded-full" fit="cover" />
       </div>
     </div>
   </div>
@@ -199,4 +166,17 @@ const calculateWidth = () => {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.one-Col-swiper {
+  flex-wrap: nowrap;
+  overflow: auto;
+}
+
+.one-Col-swiper-item {
+  width: 130px !important;
+  min-width: 130px;
+  height: 130px;
+  margin-left: 8px !important;
+  margin-top: 0 !important;
+}
+</style>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/property.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/property.vue
index 84a429b..695b57c 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/property.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/property.vue
@@ -22,6 +22,11 @@
                 <Icon icon="fluent:text-column-two-24-filled" />
               </el-radio-button>
             </el-tooltip>
+            <el-tooltip class="item" content="单行滑动" placement="bottom">
+              <el-radio-button value="oneColSwiper">
+                <Icon icon="system-uicons:carousel" />
+              </el-radio-button>
+            </el-tooltip>
             <!--<el-tooltip class="item" content="三列" placement="bottom">
               <el-radio-button value="threeCol">
                 <Icon icon="fluent:text-column-three-24-filled" />
@@ -104,34 +109,16 @@
       </el-card>
       <el-card class="property-group" header="商品样式" shadow="never">
         <el-form-item label="上圆角" prop="borderRadiusTop">
-          <el-slider
-            v-model="formData.borderRadiusTop"
-            :max="100"
-            :min="0"
-            :show-input-controls="false"
-            input-size="small"
-            show-input
-          />
+          <el-slider v-model="formData.borderRadiusTop" :max="100" :min="0" :show-input-controls="false"
+            input-size="small" show-input />
         </el-form-item>
         <el-form-item label="下圆角" prop="borderRadiusBottom">
-          <el-slider
-            v-model="formData.borderRadiusBottom"
-            :max="100"
-            :min="0"
-            :show-input-controls="false"
-            input-size="small"
-            show-input
-          />
+          <el-slider v-model="formData.borderRadiusBottom" :max="100" :min="0" :show-input-controls="false"
+            input-size="small" show-input />
         </el-form-item>
         <el-form-item label="间隔" prop="space">
-          <el-slider
-            v-model="formData.space"
-            :max="100"
-            :min="0"
-            :show-input-controls="false"
-            input-size="small"
-            show-input
-          />
+          <el-slider v-model="formData.space" :max="100" :min="0" :show-input-controls="false" input-size="small"
+            show-input />
         </el-form-item>
       </el-card>
     </el-form>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Richtext/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Richtext/config.ts
new file mode 100644
index 0000000..44ef3ea
--- /dev/null
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Richtext/config.ts
@@ -0,0 +1,57 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 富文本属性 */
+export interface RichtextProperty {
+    richText: string
+    borderRadius: number
+    // 上圆角
+    borderRadiusTop: number
+    // 下圆角
+    borderRadiusBottom: number
+    // 间隔
+    space: number
+    // 组件样式
+    style: ComponentStyle
+    // 宽
+    width: number
+    // 高
+    height: number
+    // 上
+    top: number
+    // 左
+    left: number
+
+
+}
+
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-20.png'
+
+export const plugins = [
+    'advlist anchor autolink autosave code codesample directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textpattern visualblocks visualchars wordcount',
+];
+export const toolbar = [
+    'code searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote removeformat subscript superscript codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen',
+];
+
+// 定义组件
+export const component = {
+    id: 'Richtext',
+    name: '富文本',
+    icon: logo,
+    property: {
+        borderRadius: 0,
+        borderRadiusTop: 0,
+        borderRadiusBottom: 0,
+        space: 0,
+        richText: '哈哈',
+        width: 100,
+        height: 100,
+        top: 0,
+        left: 0,
+        style: {
+            bgType: 'color',
+            bgColor: '#fff',
+            marginBottom: 8
+        } as ComponentStyle
+    }
+} as DiyComponent<RichtextProperty>
\ No newline at end of file
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Richtext/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Richtext/index.vue
new file mode 100644
index 0000000..1f23d45
--- /dev/null
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Richtext/index.vue
@@ -0,0 +1,202 @@
+<template>
+    <div class="mobile-page">
+        <div class="box" :style="boxStyle" v-html="props.property.richText"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { RichtextProperty } from './config'
+
+defineOptions({ name: 'Richtext' })
+const props = defineProps<{ property: RichtextProperty }>()
+const boxStyle = computed(() => {
+    return [
+        { 'border-radius': props.property.borderRadius ? props.property.borderRadius + 'px' : '0' },
+        {
+            background: `linear-gradient(${props.property.style.bgColor}, ${props.property.style.bgColor})`,
+        },
+        { margin: props.property.style.marginTop + 'px' + ' ' + props.property.style.marginRight + 'px' + ' ' + props.property.style.marginBottom + 'px' + ' ' + props.property.style.marginLeft + 'px' + ' ' },
+    ];
+})
+
+</script>
+
+<style scoped lang="scss">
+.mobile-page {
+    width: 100% !important;
+    min-height: 100px;
+}
+
+.box {
+    width: 100%;
+    min-height: 100px;
+    padding: 10px;
+    background: #f5f5f5;
+}
+</style>
+
+
+
+<!-- <template>
+    <div class="mobile-page" v-if="configObj">
+      <div class="box" :style="boxStyle" v-html="richText"></div>
+    </div>
+  </template>
+  
+  <script>
+  // +----------------------------------------------------------------------
+  // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+  // +----------------------------------------------------------------------
+  // | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
+  // +----------------------------------------------------------------------
+  // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+  // +----------------------------------------------------------------------
+  // | Author: CRMEB Team <admin@crmeb.com>
+  // +----------------------------------------------------------------------
+  import { mapState, mapMutations } from 'vuex';
+  export default {
+    name: 'z_ueditor',
+    cname: '富文本',
+    configName: 'c_ueditor_box',
+    icon: 't-icon-zujian-fuwenben',
+    type: 2, // 0 基础组件 1 营销组件 2工具组件
+    defaultName: 'richTextEditor', // 外面匹配名称
+    props: {
+      index: {
+        type: null,
+        default: -1,
+      },
+      num: {
+        type: null,
+      },
+    },
+    computed: {
+      ...mapState('mobildConfig', ['defaultArray']),
+      //外部盒子
+      boxStyle() {
+        return [
+          { 'border-radius': this.configObj.bgStyle.val ? this.configObj.bgStyle.val + 'px' : '0' },
+          {
+            background: `linear-gradient(${this.configObj.bgColor.color[0].item}, ${this.configObj.bgColor.color[1].item})`,
+          },
+          { margin: this.configObj.mbConfig.val + 'px' + ' ' + this.configObj.lrConfig.val + 'px' + ' ' + 0 },
+        ];
+      },
+    },
+    watch: {
+      pageData: {
+        handler(nVal, oVal) {
+          this.setConfig(nVal);
+        },
+        deep: true,
+      },
+      num: {
+        handler(nVal, oVal) {
+          let data = this.$store.state.mobildConfig.defaultArray[nVal];
+          this.setConfig(data);
+        },
+        deep: true,
+      },
+      defaultArray: {
+        handler(nVal, oVal) {
+          let data = this.$store.state.mobildConfig.defaultArray[this.num];
+          this.setConfig(data);
+        },
+        deep: true,
+      },
+    },
+    data() {
+      return {
+        // 默认初始化数据禁止修改
+        defaultConfig: {
+          name: 'richTextEditor',
+          timestamp: this.num,
+          setUp: {
+            tabVal: 0,
+            cname: '富文本',
+          },
+          // 背景颜色
+          bgColor: {
+            title: '背景颜色',
+            tabTitle: '颜色设置',
+            color: [
+              {
+                item: '#FFFFFF',
+              },
+              {
+                item: '#FFFFFF',
+              },
+            ],
+            default: [
+              {
+                item: '#FFFFFF',
+              },
+              {
+                item: '#FFFFFF',
+              },
+            ],
+          },
+          lrConfig: {
+            title: '左右边距',
+            tabTitle: '边距设置',
+            val: 12,
+            min: 0,
+          },
+          mbConfig: {
+            title: '页面间距',
+            val: 10,
+            min: 0,
+          },
+          bgStyle: {
+            tabTitle: '圆角设置',
+            title: '背景圆角',
+            name: 'bgStyle',
+            val: 0,
+            min: 0,
+            max: 30,
+          },
+          richText: {
+            tabTitle: '富文本内容',
+            val: '',
+          },
+        },
+        pageData: {},
+        richText: '',
+        configObj: null,
+      };
+    },
+    mounted() {
+      this.$nextTick(() => {
+        if (this.num) {
+          this.pageData = this.$store.state.mobildConfig.defaultArray[this.num];
+          this.setConfig(this.pageData);
+        }
+      });
+    },
+    methods: {
+      setConfig(data) {
+        if (!data) return;
+        if (data) {
+          this.configObj = data;
+          this.richText = data.richText.val;
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  .mobile-page ::v-deep video {
+    width: 100% !important;
+  }
+  .box {
+    min-height: 100px;
+    padding: 10px;
+    background: #f5f5f5;
+    ::v-deep img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+  </style>
+   -->
\ No newline at end of file
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Richtext/property.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Richtext/property.vue
new file mode 100644
index 0000000..ff81619
--- /dev/null
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Richtext/property.vue
@@ -0,0 +1,55 @@
+<template>
+    <ComponentContainerProperty v-model="formData.style">
+        <!-- 表单 -->
+        <el-form label-width="80px" :model="formData" class="m-t-8px">
+            <!-- <el-text tag="p"> 富文本设置 </el-text> -->
+            <el-form-item label-width="0" prop="richText">
+                <Editor api-key="ooit62s6gekozi4cmblbsvdwhl34mxcgrkzu4wr8yqmsqxmw" v-model="formData.richText"
+                    :init="tinymceConfig" initial-value="Welcome to TinyMCE!" />
+            </el-form-item>
+            <!-- <el-text type="info" size="small"> 每格尺寸187 * 187 </el-text> -->
+            <!-- <textarea :id="tinymceId" class="textarea" /> -->
+        </el-form>
+    </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { RichtextProperty } from './config';
+// import { MagicCubeProperty } from '@/components/DiyEditor/components/mobile/MagicCube/config'
+// import { plugins, toolbar } from './config';
+// import loadTinymce from '@/utils/loadTinymce';
+// import { debounceNew } from '@/utils';
+
+/** 富文本属性面板 */
+defineOptions({ name: 'RichtextProperty' });
+
+const props = defineProps<{ modelValue: RichtextProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+
+
+
+const tinymceConfig = {
+    toolbar_mode: 'sliding',
+    plugins: [
+        // Core editing features
+        'anchor', 'autolink', 'charmap', 'codesample', 'emoticons', 'image', 'link', 'lists', 'media', 'searchreplace', 'table', 'visualblocks', 'wordcount',
+        // Your account includes a free trial of TinyMCE premium features
+        // Try the most popular premium features until Apr 24, 2025:
+        'checklist', 'mediaembed', 'casechange', 'formatpainter', 'pageembed', 'a11ychecker', 'tinymcespellchecker', 'permanentpen', 'powerpaste', 'advtable', 'advcode', 'editimage', 'advtemplate', 'ai', 'mentions', 'tinycomments', 'tableofcontents', 'footnotes', 'mergetags', 'autocorrect', 'typography', 'inlinecss', 'markdown', 'importword', 'exportword', 'exportpdf'
+    ],
+    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
+    tinycomments_mode: 'embedded',
+    tinycomments_author: 'Author name',
+    mergetags_list: [
+        { value: 'First.Name', title: 'First Name' },
+        { value: 'Email', title: 'Email' },
+    ],
+    ai_request: (request, respondWith) => respondWith.string(() => Promise.reject('See docs to implement AI Assistant')),
+};
+
+
+</script>
+
+<style scoped lang="scss"></style>
\ No newline at end of file
diff --git a/yudao-admin-vue3/src/components/DiyEditor/util.ts b/yudao-admin-vue3/src/components/DiyEditor/util.ts
index 3287496..f855660 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/util.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/util.ts
@@ -76,7 +76,7 @@ export interface PageConfig {
   components: PageComponent[]
 }
 // 页面组件，只保留组件ID，组件属性
-export interface PageComponent extends Pick<DiyComponent<any>, 'id' | 'property'> {}
+export interface PageComponent extends Pick<DiyComponent<any>, 'id' | 'property'> { }
 
 // 属性表单监听
 export function usePropertyForm<T>(modelValue: T, emit: Function): { formData: Ref<T> } {
@@ -119,7 +119,7 @@ export const PAGE_LIBS = [
       'MenuList',
       'Popover',
       'FloatingActionButton',
-	  "MenuGridTow"
+      "MenuGridTow"
     ]
   },
   {
@@ -128,11 +128,13 @@ export const PAGE_LIBS = [
     components: [
       'ImageBar',
       'Carousel',
+      'CarouselLong',
       'TitleBar',
       'VideoPlayer',
       'Divider',
       'MagicCube',
-      'HotZone'
+      'HotZone',
+      'Richtext'
     ]
   },
   { name: '商品组件', extended: true, components: ['ProductCard', 'ProductList'] },
diff --git a/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate.vue b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate.vue
index 38d74c7..e780be8 100644
--- a/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate.vue
+++ b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate.vue
@@ -87,7 +87,7 @@
 		//   (page: DiyPageApi.DiyPageVO) => page.name === templateItems[1].name
 		// )
 		currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
-		console.log(selectedTemplateItem.value, 'selectedTemplateItem.value11111111111111')
+		// console.log(selectedTemplateItem.value, 'selectedTemplateItem.value11111111111111')
 	}
 
 	// 提交表单

From bb97bfc3374b42227410d417447a6cefaf9a2427 Mon Sep 17 00:00:00 2001
From: zengjunhong <1213276609@qq.com>
Date: Sun, 27 Apr 2025 11:01:33 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=96=B0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/diy/template/decoratePerson.vue | 137 ++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 yudao-admin-vue3/src/views/mall/promotion/diy/template/decoratePerson.vue

diff --git a/yudao-admin-vue3/src/views/mall/promotion/diy/template/decoratePerson.vue b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decoratePerson.vue
new file mode 100644
index 0000000..bf60c7b
--- /dev/null
+++ b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decoratePerson.vue
@@ -0,0 +1,137 @@
+<template>
+    <div class="main">
+        <div class="mainTop">
+            <div>商品分类</div>
+            <div class="right">
+                <div class="save" @click="save">保存</div>
+                <div class="cz" @click="cz">重置</div>
+            </div>
+        </div>
+
+        <div class="mainBottom">
+            <div class='item' :class="currItem == 1 ? 'on' : ''" @click="clickItem(1)">
+                <img class="img"
+                    src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/9349d776503051646314323aced460314415a04c943dc220e9e5b86362f864dd.png" />
+                <div class="text">样式1</div>
+            </div>
+            <!-- <div class='item' :class="currItem == 2 ? 'on' : ''" @click="clickItem(2)">
+                <img class="img"
+                    src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/909ef630cff7cdc957962ae782ee9a882c86c35732140b1c9e013341fa559126.jpg" />
+                <div class="text">样式2</div>
+            </div> -->
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
+import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+import { useTagsdivStore } from '@/store/modules/tagsdiv'
+import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
+import { toNumber } from 'lodash-es'
+const message = useMessage() // 消息弹窗
+const currItem = ref();
+
+function clickItem(val) {
+    currItem.value = val;
+}
+
+function cz(val) {
+    currItem.value = 1;
+}
+
+function save() {
+    setProjuctClass(currItem.value);
+    // console.log("请求接口还没有写啊！！！！快让后端提供啊")
+}
+
+// 设置商品分类
+const setProjuctClass = async (id) => {
+    // const res = await DiyTemplateApi.setDiyProjuctClass(id);
+    // console.log(res, "sssss");
+    // if (res) {
+    message.success('保存成功')
+    // }
+}
+
+// 获取商品分类
+const getProjuctClass = async () => {
+    const res = await DiyTemplateApi.getDiyProjuctClass();
+    currItem.value = res
+}
+getProjuctClass()
+</script>
+
+<style lang="scss" scoped>
+.main {
+    display: flex;
+    flex-wrap: wrap;
+
+    .mainTop {
+        width: 100%;
+        margin: 10px 10px;
+        background: white;
+        padding: 10px 20px;
+        font-weight: 700;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .right {
+            display: flex;
+
+            div {
+                padding: 5px 15px;
+                font-weight: 400;
+                font-size: 14px;
+            }
+
+            .save {
+                background: #0256FF;
+                margin-right: 10px;
+                color: white;
+                cursor: pointer;
+            }
+
+            .cz {
+                border: 1px solid #cccccc;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .mainBottom {
+        width: 100%;
+        margin: 10px 10px;
+        background: white;
+        padding: 30px 30px;
+        display: flex;
+
+        .item {
+            margin-right: 20px;
+            text-align: center;
+            border-radius: 12px;
+            cursor: pointer;
+
+            &.on {
+                .text {
+                    color: #0256ff;
+                }
+
+                .img {
+                    border: 2px solid #0256ff;
+                }
+            }
+
+            .img {
+                width: 260px;
+                border-radius: 12px;
+                border: 2px solid white;
+            }
+
+            .text {
+                margin-top: 10px;
+            }
+        }
+    }
+}
+</style>