Merge pull request 'Branch_csl' (#44) from Branch_csl into master

Reviewed-on: #44

yudao-admin-vue3/src/components/DiyEditor/components/ComponentLibrary.vue

@@ -23,8 +23,11 @@
               <div>
                 <div class="drag-placement">组件放置区域</div>
                 <div class="component">
-                  <Icon :icon="element.icon" :size="32" />
+                  <!-- <Icon :icon="element.icon" :size="32" /> -->
-                  <span class="mt-4px text-12px">{{ element.name }}</span>
+				  <div>
+					  <img :src="element.icon" />
+				  </div>
+                  <span class="text-12px">{{ element.name }}</span>
                 </div>
               </div>
             </template>
@@ -142,8 +145,9 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 
   .component.active,
   .component:hover {
-    color: var(--el-color-white);
+    // color: var(--el-color-white);
-    background: var(--el-color-primary);
+    // background: var(--el-color-primary);
+    background: #f6f6f6;
 
     .el-icon {
       color: var(--el-color-white);

yudao-admin-vue3/src/components/DiyEditor/components/mobile/Carousel/config.ts

@@ -26,12 +26,13 @@ export interface CarouselItemProperty {
   // 跳转链接
   url: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-09.png'
 // 定义组件
 export const component = {
   id: 'Carousel',
   name: '轮播图',
-  icon: 'system-uicons:carousel',
+  // icon: 'system-uicons:carousel',
+  icon: logo,
   property: {
     type: 'default',
     indicator: 'dot',

yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/config.ts

@@ -22,12 +22,13 @@ export interface CouponCardProperty {
   // 组件样式
   style: ComponentStyle
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-19.png'
 // 定义组件
 export const component = {
   id: 'CouponCard',
   name: '优惠券',
-  icon: 'ep:ticket',
+  // icon: 'ep:ticket',
+  icon: logo,
   property: {
     columns: 1,
     bgImg: '',

yudao-admin-vue3/src/components/DiyEditor/components/mobile/Divider/config.ts

@@ -13,12 +13,13 @@ export interface DividerProperty {
   // 类型
   borderType: 'solid' | 'dashed' | 'dotted' | 'none'
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-12.png'
 // 定义组件
 export const component = {
   id: 'Divider',
   name: '分割线',
-  icon: 'tdesign:component-divider-vertical',
+  // icon: 'tdesign:component-divider-vertical',
+  icon: logo,
   property: {
     height: 30,
     lineWidth: 1,

yudao-admin-vue3/src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts

@@ -21,12 +21,13 @@ export interface FloatingActionButtonItemProperty {
   // 文字颜色
   textColor: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-07.png'
 // 定义组件
 export const component = {
   id: 'FloatingActionButton',
   name: '悬浮按钮',
-  icon: 'tabler:float-right',
+  // icon: 'tabler:float-right',
+  icon: logo,
   position: 'fixed',
   property: {
     direction: 'vertical',

yudao-admin-vue3/src/components/DiyEditor/components/mobile/HotZone/config.ts

@@ -25,12 +25,13 @@ export interface HotZoneItemProperty {
   // 左
   left: number
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-14.png'
 // 定义组件
 export const component = {
   id: 'HotZone',
   name: '热区',
-  icon: 'tabler:hand-click',
+  // icon: 'tabler:hand-click',
+  icon: logo,
   property: {
     imgUrl: '',
     list: [] as HotZoneItemProperty[],

yudao-admin-vue3/src/components/DiyEditor/components/mobile/ImageBar/config.ts

@@ -9,12 +9,13 @@ export interface ImageBarProperty {
   // 组件样式
   style: ComponentStyle
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-08.png'
 // 定义组件
 export const component = {
   id: 'ImageBar',
   name: '图片展示',
-  icon: 'ep:picture',
+  // icon: 'ep:picture',
+  icon: logo,
   property: {
     imgUrl: '',
     url: '',

yudao-admin-vue3/src/components/DiyEditor/components/mobile/MagicCube/config.ts

@@ -29,12 +29,13 @@ export interface MagicCubeItemProperty {
   // 左
   left: number
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-13.png'
 // 定义组件
 export const component = {
   id: 'MagicCube',
   name: '广告魔方',
-  icon: 'bi:columns',
+  // icon: 'bi:columns',
+  icon: logo,
   property: {
     borderRadiusTop: 0,
     borderRadiusBottom: 0,

yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGrid/config.ts

@@ -49,12 +49,13 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
     bgColor: '#FF6000'
   }
 } as MenuGridItemProperty
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-04.png'
 // 定义组件
 export const component = {
   id: 'MenuGrid',
   name: '宫格导航',
-  icon: 'bi:grid-3x3-gap',
+  // icon: 'bi:grid-3x3-gap',
+  icon: logo,
   property: {
     column: 3,
     list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],

yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGrid/property.vue

@@ -6,6 +6,7 @@
         <el-radio-group v-model="formData.column">
           <el-radio :label="3">3个</el-radio>
           <el-radio :label="4">4个</el-radio>
+          <el-radio :label="5">5个</el-radio>
         </el-radio-group>
       </el-form-item>
 

yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuList/config.ts

@@ -31,12 +31,13 @@ export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
   subtitle: '副标题',
   subtitleColor: '#bbb'
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-05.png'
 // 定义组件
 export const component = {
   id: 'MenuList',
   name: '列表导航',
-  icon: 'fa-solid:list',
+  // icon: 'fa-solid:list',
+  icon: logo,
   property: {
     list: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
     style: {

yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuSwiper/config.ts

@@ -46,12 +46,13 @@ export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
     bgColor: '#FF6000'
   }
 } as MenuSwiperItemProperty
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-03.png'
 // 定义组件
 export const component = {
   id: 'MenuSwiper',
   name: '菜单导航',
-  icon: 'bi:grid-3x2-gap',
+  // icon: 'bi:grid-3x2-gap',
+  icon: logo,
   property: {
     layout: 'iconText',
     row: 1,

yudao-admin-vue3/src/components/DiyEditor/components/mobile/NoticeBar/config.ts

@@ -21,12 +21,13 @@ export interface NoticeContentProperty {
   // 链接地址
   url: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-02.png'
 // 定义组件
 export const component = {
   id: 'NoticeBar',
   name: '公告栏',
-  icon: 'ep:bell',
+  // icon: 'ep:bell',
+  icon: logo,
   property: {
     iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
     contents: [

yudao-admin-vue3/src/components/DiyEditor/components/mobile/Popover/config.ts

@@ -13,12 +13,13 @@ export interface PopoverItemProperty {
   // 显示类型：仅显示一次、每次启动都会显示
   showType: 'once' | 'always'
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-06.png'
 // 定义组件
 export const component = {
   id: 'Popover',
   name: '弹窗广告',
-  icon: 'carbon:popup',
+  // icon: 'carbon:popup',
+  icon: logo,
   position: 'fixed',
   property: {
     list: [{ showType: 'once' }]

yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/config.ts

@@ -57,12 +57,13 @@ export interface ProductCardFieldProperty {
   // 颜色
   color: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-15.png'
 // 定义组件
 export const component = {
   id: 'ProductCard',
   name: '商品卡片',
-  icon: 'fluent:text-column-two-left-24-filled',
+  // icon: 'fluent:text-column-two-left-24-filled',
+  icon: logo,
   property: {
     layoutType: 'oneColBigImg',
     fields: {

yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductList/config.ts

@@ -36,12 +36,13 @@ export interface ProductListFieldProperty {
   // 颜色
   color: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-16.png'
 // 定义组件
 export const component = {
   id: 'ProductList',
   name: '商品栏',
-  icon: 'fluent:text-column-two-24-filled',
+  // icon: 'fluent:text-column-two-24-filled',
+  icon: logo,
   property: {
     layoutType: 'twoCol',
     fields: {

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts

@@ -7,12 +7,13 @@ export interface PromotionArticleProperty {
   // 组件样式
   style: ComponentStyle
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-20.png'
 // 定义组件
 export const component = {
   id: 'PromotionArticle',
   name: '营销文章',
-  icon: 'ph:article-medium',
+  // icon: 'ph:article-medium',
+  icon: logo,
   property: {
     style: {
       bgType: 'color',

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/config.ts

@@ -37,12 +37,13 @@ export interface PromotionCombinationFieldProperty {
   // 颜色
   color: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-17.png'
 // 定义组件
 export const component = {
   id: 'PromotionCombination',
   name: '拼团',
-  icon: 'mdi:account-group',
+  // icon: 'mdi:account-group',
+  icon: logo,
   property: {
     layoutType: 'oneCol',
     fields: {

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts

@@ -58,12 +58,13 @@ export interface PromotionPointFieldProperty {
   // 颜色
   color: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-21.png'
 // 定义组件
 export const component = {
   id: 'PromotionPoint',
   name: '积分商城',
-  icon: 'ep:present',
+  // icon: 'ep:present',
+  icon: logo,
   property: {
     layoutType: 'oneColBigImg',
     fields: {

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/config.ts

@@ -36,12 +36,13 @@ export interface PromotionSeckillFieldProperty {
   // 颜色
   color: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-18.png'
 // 定义组件
 export const component = {
   id: 'PromotionSeckill',
   name: '秒杀',
-  icon: 'mdi:calendar-time',
+  // icon: 'mdi:calendar-time',
+  icon: logo,
   property: {
     activityId: undefined,
     layoutType: 'oneCol',

yudao-admin-vue3/src/components/DiyEditor/components/mobile/SearchBar/config.ts

@@ -15,12 +15,12 @@ export interface SearchProperty {
 
 // 文字位置
 export type PlaceholderPosition = 'left' | 'center'
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-01.png'
 // 定义组件
 export const component = {
   id: 'SearchBar',
   name: '搜索框',
-  icon: 'ep:search',
+  icon: logo,
   property: {
     height: 28,
     showScan: false,

yudao-admin-vue3/src/components/DiyEditor/components/mobile/TitleBar/config.ts

@@ -38,12 +38,13 @@ export interface TitleBarProperty {
   // 组件样式
   style: ComponentStyle
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-10.png'
 // 定义组件
 export const component = {
   id: 'TitleBar',
   name: '标题栏',
   icon: 'material-symbols:line-start',
+  icon: logo,
   property: {
     title: '主标题',
     description: '副标题',

yudao-admin-vue3/src/components/DiyEditor/components/mobile/UserCard/index.vue

@@ -1,20 +1,62 @@
 <template>
-  <div class="flex flex-col">
+	<div class="flex flex-col" style="    margin-bottom: 27px;">
-    <div class="flex items-center justify-between p-x-18px p-y-24px">
+
+		<div class="new-main">
+			<div class="flex items-center justify-between p-x-18px p-y-24px " style="padding-bottom:15px;">
 				<div class="flex flex-1 items-center gap-16px">
 					<el-avatar :size="60">
 						<Icon icon="ep:avatar" :size="60" />
 					</el-avatar>
-        <span class="text-18px font-bold">芋道源码</span>
+					<span class="text-18px font-bold">用户名称</span>
 				</div>
 				<Icon icon="tdesign:qrcode" :size="20" />
 			</div>
-    <div
+
+			<div class="new-usercard" style="z-index: 9999;">
+				<div class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center">
+					<div class="value-box ss-flex ss-col-bottom">
+						<div class="value-text ss-line-1">0.00</div>
+						<div class="unit-text ss-m-l-6">
+							<!-- 元 -->
+						</div>
+					</div>
+					<div class="menu-title ss-m-t-28">余额</div>
+				</div>
+
+				<div class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center">
+					<div class="value-box ss-flex ss-col-bottom">
+						<div class="value-text">0</div>
+						<div class="unit-text ss-m-l-6">
+							<!-- 张 -->
+						</div>
+					</div>
+					<div class="menu-title ss-m-t-28">优惠券</div>
+				</div>
+				<div class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center">
+					<div class="value-box ss-flex ss-col-bottom">
+						<div class="value-text">0</div>
+						<div class="unit-text ss-m-l-6">
+							<!-- 个 -->
+						</div>
+					</div>
+					<div class="menu-title ss-m-t-28">积分</div>
+				</div>
+			</div>
+
+			<div class="new-bottom">
+				<img src="https://zysc.fjptzykj.com:3000/shangcheng/64776e2edc3c2f15295e7c3976ba301e08f9170f99a2e845d8f33bd65179b177.png"
+					alt="" />
+				<div class="btn">
+					立即开通
+				</div>
+			</div>
+		</div>
+		<!-- <div
       class="flex items-center justify-between justify-between bg-white p-x-20px p-y-8px text-12px"
     >
       <span class="color-#ff690d">点击绑定手机号</span>
       <span class="rounded-26px bg-#ff6100 p-x-8px p-y-5px color-white">去绑定</span>
-    </div>
+    </div> -->
 	</div>
 </template>
 <script setup lang="ts">
@@ -26,4 +68,48 @@ defineOptions({ name: 'UserCard' })
 	defineProps<{ property : UserCardProperty }>()
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+	.new-main {
+		position: relative;
+		background: url('@/assets/imgs/userCar/seckilbg.png') no-repeat;
+		background-size: cover;
+		padding-bottom: 53px;
+
+		.value-box {
+			margin-bottom: 6px;
+		}
+
+		.new-usercard {
+			width: 100%;
+			display: flex;
+			justify-content: space-around;
+		}
+
+		div {
+			text-align: center;
+			color: white;
+		}
+
+		.new-bottom {
+			position: absolute;
+			bottom: -28px;
+			width: 100%;
+			z-index: 999999999999999;
+
+			img {
+				width: 92%;
+			}
+
+			.btn {
+				position: absolute;
+				bottom: 19px;
+				right: 29px;
+				background: white;
+				border-radius: 12px;
+				padding: 4px 8px;
+				font-size: 14px;
+				color: #946d2d;
+			}
+		}
+	}
+</style>

yudao-admin-vue3/src/components/DiyEditor/components/mobile/UserOrder/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <el-image src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png" />
+  <!-- <el-image src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png" /> -->
+  <el-image src="  https://zysc.fjptzykj.com:3000/shangcheng/0ba158a1a2de7d39c6cec22cfe54736237438f63893b09c7453b5b5e3482f826.png" />
 </template>
 <script setup lang="ts">
 import { UserOrderProperty } from './config'

yudao-admin-vue3/src/components/DiyEditor/components/mobile/VideoPlayer/config.ts

@@ -17,12 +17,13 @@ export interface VideoPlayerStyle extends ComponentStyle {
   // 视频高度
   height: number
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-11.png'
 // 定义组件
 export const component = {
   id: 'VideoPlayer',
   name: '视频播放',
-  icon: 'ep:video-play',
+  // icon: 'ep:video-play',
+  icon: logo,
   property: {
     videoUrl: '',
     posterUrl: '',

yudao-admin-vue3/src/components/DiyEditor/index.vue

@@ -31,7 +31,7 @@
 		<!-- 中心区域 -->
 		<el-container class="editor-container">
 			<!-- 左侧：组件库（ComponentLibrary） -->
-      <ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0" />
+			<ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0 && isShow" />
 			<!-- 中心：设计区域（ComponentContainer） -->
 			<div class="editor-center page-prop-area" @click="handlePageSelected">
 				<!-- 手机顶部 -->
@@ -39,94 +39,54 @@
 					<!-- 手机顶部状态栏 -->
 					<img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
 					<!-- 手机顶部导航栏 -->
-          <ComponentContainer
+					<ComponentContainer v-if="showNavigationBar" :component="navigationBarComponent"
-            v-if="showNavigationBar"
+						:show-toolbar="false" :active="selectedComponent?.id === navigationBarComponent.id"
-            :component="navigationBarComponent"
+						@click="handleNavigationBarSelected" class="cursor-pointer!" />
-            :show-toolbar="false"
-            :active="selectedComponent?.id === navigationBarComponent.id"
-            @click="handleNavigationBarSelected"
-            class="cursor-pointer!"
-          />
 				</div>
 				<!-- 绝对定位的组件：例如 弹窗、浮动按钮等 -->
-        <div
+				<div v-for="(component, index) in pageComponents" :key="index"
-          v-for="(component, index) in pageComponents"
+					@click="handleComponentSelected(component, index)">
-          :key="index"
+					<component v-if="component.position === 'fixed' && selectedComponent?.uid === component.uid"
-          @click="handleComponentSelected(component, index)"
+						:is="component.id" :property="component.property" />
-        >
-          <component
-            v-if="component.position === 'fixed' && selectedComponent?.uid === component.uid"
-            :is="component.id"
-            :property="component.property"
-          />
 				</div>
 				<!-- 手机页面编辑区域 -->
-        <el-scrollbar
+				<el-scrollbar height="100%" wrap-class="editor-design-center page-prop-area"
-          height="100%"
+					view-class="phone-container" :view-style="{
-          wrap-class="editor-design-center page-prop-area"
-          view-class="phone-container"
-          :view-style="{
 						backgroundColor: pageConfigComponent.property.backgroundColor,
 						backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
-          }"
+					  }">
-        >
+					<draggable class="page-prop-area drag-area" v-model="pageComponents" item-key="index"
-          <draggable
+						:animation="200" filter=".component-toolbar" ghost-class="draggable-ghost"
-            class="page-prop-area drag-area"
+						:force-fallback="true" group="component" @change="handleComponentChange">
-            v-model="pageComponents"
-            item-key="index"
-            :animation="200"
-            filter=".component-toolbar"
-            ghost-class="draggable-ghost"
-            :force-fallback="true"
-            group="component"
-            @change="handleComponentChange"
-          >
 						<template #item="{ element, index }">
-              <ComponentContainer
+							<ComponentContainer v-if="!element.position || element.position === 'center'"
-                v-if="!element.position || element.position === 'center'"
+								:component="element" :active="selectedComponentIndex === index" :can-move-up="index > 0"
-                :component="element"
-                :active="selectedComponentIndex === index"
-                :can-move-up="index > 0"
 								:can-move-down="index < pageComponents.length - 1"
 								@move="(direction) => handleMoveComponent(index, direction)"
-                @copy="handleCopyComponent(index)"
+								@copy="handleCopyComponent(index)" @delete="handleDeleteComponent(index)"
-                @delete="handleDeleteComponent(index)"
+								@click="handleComponentSelected(element, index)" />
-                @click="handleComponentSelected(element, index)"
-              />
 						</template>
 					</draggable>
 				</el-scrollbar>
 				<!-- 手机底部导航 -->
 				<div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
-          <ComponentContainer
+					<ComponentContainer :component="tabBarComponent" :show-toolbar="false"
-            :component="tabBarComponent"
+						:active="selectedComponent?.id === tabBarComponent.id" @click="handleTabBarSelected" />
-            :show-toolbar="false"
-            :active="selectedComponent?.id === tabBarComponent.id"
-            @click="handleTabBarSelected"
-          />
 				</div>
 				<!-- 固定布局的组件 操作按钮区 -->
 				<div class="fixed-component-action-group">
-          <el-tag
+					<el-tag v-if="showPageConfig" size="large"
-            v-if="showPageConfig"
-            size="large"
 						:effect="selectedComponent?.uid === pageConfigComponent.uid ? 'dark' : 'plain'"
 						:type="selectedComponent?.uid === pageConfigComponent.uid ? '' : 'info'"
-            @click="handleComponentSelected(pageConfigComponent)"
+						@click="handleComponentSelected(pageConfigComponent)">
-          >
 						<Icon :icon="pageConfigComponent.icon" :size="12" />
 						<span>{{ pageConfigComponent.name }}</span>
 					</el-tag>
 					<template v-for="(component, index) in pageComponents" :key="index">
-            <el-tag
+						<el-tag v-if="component.position === 'fixed'" size="large" closable
-              v-if="component.position === 'fixed'"
-              size="large"
-              closable
 							:effect="selectedComponent?.uid === component.uid ? 'dark' : 'plain'"
 							:type="selectedComponent?.uid === component.uid ? '' : 'info'"
-              @click="handleComponentSelected(component)"
+							@click="handleComponentSelected(component)" @close="handleDeleteComponent(index)">
-              @close="handleDeleteComponent(index)"
-            >
 							<Icon :icon="component.icon" :size="12" />
 							<span>{{ component.name }}</span>
 						</el-tag>
@@ -135,11 +95,8 @@
 			</div>
 			<!-- 右侧：属性面板（ComponentContainerProperty） -->
 			<el-aside class="editor-right" width="350px" v-if="selectedComponent?.property">
-        <el-card
+				<el-card shadow="never" body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
-          shadow="never"
+					class="h-full">
-          body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
-          class="h-full"
-        >
 					<!-- 组件名称 -->
 					<template #header>
 						<div class="flex items-center gap-8px">
@@ -147,15 +104,10 @@
 							<span>{{ selectedComponent?.name }}</span>
 						</div>
 					</template>
-          <el-scrollbar
+					<el-scrollbar class="m-[calc(0px-var(--el-card-padding))]"
-            class="m-[calc(0px-var(--el-card-padding))]"
+						view-class="p-[var(--el-card-padding)] p-b-[calc(var(--el-card-padding)+var(--el-card-padding))] property">
-            view-class="p-[var(--el-card-padding)] p-b-[calc(var(--el-card-padding)+var(--el-card-padding))] property"
+						<component :key="selectedComponent?.uid || selectedComponent?.id"
-          >
+							:is="selectedComponent?.id + 'Property'" v-model="selectedComponent.property" />
-            <component
-              :key="selectedComponent?.uid || selectedComponent?.id"
-              :is="selectedComponent?.id + 'Property'"
-              v-model="selectedComponent.property"
-            />
 					</el-scrollbar>
 				</el-card>
 			</el-aside>
@@ -165,10 +117,7 @@
 	<!-- 预览弹框 -->
 	<Dialog v-model="previewDialogVisible" title="预览" width="700">
 		<div class="flex justify-around">
-      <IFrame
+			<IFrame class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!" :src="previewUrl" />
-        class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!"
-        :src="previewUrl"
-      />
 			<div class="flex flex-col">
 				<el-text>手机扫码预览</el-text>
 				<Qrcode :text="previewUrl" logo="/logo.gif" />
@@ -229,7 +178,9 @@ const props = defineProps({
 		// 是否显示页面配置
 		showPageConfig: propTypes.bool.def(true),
 		// 预览地址：提供了预览地址，才会显示预览按钮
-  previewUrl: propTypes.string.def('')
+		previewUrl: propTypes.string.def(''),
+		//是否显示左侧导航栏
+		isShow:propTypes.bool.def(true),
 	})
 
 	// 监听传入的页面配置
@@ -446,10 +397,7 @@ $toolbar-height: 42px;
 
 		/* 中心操作区 */
 		.editor-container {
-    height: calc(
+			height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - $toolbar-height );
-      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) -
-        $toolbar-height
-    );
 
 			/* 右侧属性面板 */
 			.editor-right {
@@ -548,6 +496,7 @@ $toolbar-height: 42px;
 					:deep(.el-tag) {
 						box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 						border: none;
+
 						.el-tag__content {
 							width: 100%;
 							display: flex;

yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue

@@ -2,7 +2,7 @@
 	<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
 		:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
 		:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
-		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
+		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset" :isShow="false">
 		<template #toolBarLeft>
 			<!-- <el-radio-group
 				v-model="selectedTemplateItem"