营销：适配商城装修组件【标题栏】

src/components/DiyEditor/components/mobile/TitleBar/config.ts

@@ -1,7 +1,13 @@
-import { DiyComponent } from '@/components/DiyEditor/util'
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
 
 /** 标题栏属性 */
 export interface TitleBarProperty {
+  // 背景图
+  bgImgUrl: string
+  // 偏移
+  marginLeft: number
+  // 显示位置
+  textAlign: 'left' | 'center'
   // 主标题
   title: string
   // 副标题
@@ -12,18 +18,12 @@ export interface TitleBarProperty {
   descriptionSize: number
   // 标题粗细
   titleWeight: number
-  // 显示位置
-  position: 'left' | 'center'
   // 描述粗细
   descriptionWeight: number
   // 标题颜色
   titleColor: string
   // 描述颜色
   descriptionColor: string
-  // 背景颜色
-  backgroundColor: string
-  // 底部分割线
-  showBottomBorder: false
   // 查看更多
   more: {
     // 是否显示查看更多
@@ -35,6 +35,8 @@ export interface TitleBarProperty {
     // 链接
     url: string
   }
+  // 组件样式
+  style: ComponentStyle
 }
 
 // 定义组件
@@ -48,18 +50,20 @@ export const component = {
     titleSize: 16,
     descriptionSize: 12,
     titleWeight: 400,
-    position: 'left',
+    textAlign: 'left',
     descriptionWeight: 200,
     titleColor: 'rgba(50, 50, 51, 10)',
     descriptionColor: 'rgba(150, 151, 153, 10)',
-    backgroundColor: 'rgba(255, 255, 255, 10)',
-    showBottomBorder: false,
     more: {
       //查看更多
       show: false,
       type: 'icon',
       text: '查看更多',
       url: ''
-    }
+    },
+    style: {
+      bgType: 'color',
+      bgColor: '#fff'
+    } as ComponentStyle
   }
 } as DiyComponent<TitleBarProperty>

src/components/DiyEditor/components/mobile/TitleBar/index.vue

@@ -1,19 +1,14 @@
 <template>
-  <div
-    class="title-bar"
-    :style="{
-      background: property.backgroundColor,
-      borderBottom: property.showBottomBorder ? '1px solid #F9F9F9' : '1px solid #fff'
-    }"
-  >
-    <div>
+  <div class="title-bar">
+    <el-image :src="property.bgImgUrl" fit="cover" class="w-full" />
+    <div class="absolute left-0 top-0 w-full">
       <!-- 标题 -->
       <div
         :style="{
           fontSize: `${property.titleSize}px`,
           fontWeight: property.titleWeight,
           color: property.titleColor,
-          textAlign: property.position
+          textAlign: property.textAlign
         }"
         v-if="property.title"
       >
@@ -25,7 +20,7 @@
           fontSize: `${property.descriptionSize}px`,
           fontWeight: property.descriptionWeight,
           color: property.descriptionColor,
-          textAlign: property.position
+          textAlign: property.textAlign
         }"
         class="m-t-8px"
         v-if="property.description"
@@ -38,10 +33,10 @@
       class="more"
       v-show="property.more.show"
       :style="{
-        color: property.more.type === 'text' ? '#38f' : ''
+        color: property.descriptionColor
       }"
     >
-      {{ property.more.type === 'icon' ? '' : property.more.text }}
+      <span v-if="property.more.type !== 'icon'"> {{ property.more.text }} </span>
       <Icon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
     </div>
   </div>
@@ -59,8 +54,6 @@ defineProps<{ property: TitleBarProperty }>()
   position: relative;
   width: 100%;
   min-height: 20px;
-  padding: 8px 16px;
-  border: 2px solid #fff;
   box-sizing: border-box;
 
   /* 更多 */

src/components/DiyEditor/components/mobile/TitleBar/property.vue

@@ -1,102 +1,108 @@
 <template>
-  <section class="title-bar">
+  <ComponentContainerProperty v-model="formData.style">
     <el-form label-width="85px" :model="formData" :rules="rules">
-      <el-form-item label="主标题" prop="title">
-        <el-input
-          v-model="formData.title"
-          placeholder="请输入主标题"
-          show-word-limit
-          maxlength="20"
-        />
-      </el-form-item>
-      <el-form-item label="副标题" prop="description">
-        <el-input
-          type="textarea"
-          v-model="formData.description"
-          placeholder="请输入副标题"
-          maxlength="50"
-          show-word-limit
-        />
-      </el-form-item>
-      <el-form-item label="显示位置" prop="position">
-        <el-radio-group v-model="formData!.position">
-          <el-tooltip content="居左" placement="top">
-            <el-radio-button label="left">
-              <Icon icon="ant-design:align-left-outlined" />
-            </el-radio-button>
-          </el-tooltip>
-          <el-tooltip content="居中" placement="top">
-            <el-radio-button label="center">
-              <Icon icon="ant-design:align-center-outlined" />
-            </el-radio-button>
-          </el-tooltip>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="标题大小" prop="titleSize">
-        <el-slider v-model="formData.titleSize" :max="60" :min="10" show-input input-size="small" />
-      </el-form-item>
-      <el-form-item label="副标题大小" prop="descriptionSize">
-        <el-slider
-          v-model="formData.descriptionSize"
-          :max="60"
-          :min="10"
-          show-input
-          input-size="small"
-        />
-      </el-form-item>
-      <el-form-item label="标题粗细" prop="titleWeight">
-        <el-slider
-          v-model="formData.titleWeight"
-          :min="100"
-          :max="900"
-          :step="100"
-          show-input
-          input-size="small"
-        />
-      </el-form-item>
-      <el-form-item label="副标题粗细" prop="descriptionWeight">
-        <el-slider
-          v-model="formData.descriptionWeight"
-          :min="100"
-          :max="900"
-          :step="100"
-          show-input
-          input-size="small"
-        />
-      </el-form-item>
-      <el-form-item label="标题颜色" prop="titleColor">
-        <ColorInput v-model="formData.titleColor" />
-      </el-form-item>
-      <el-form-item label="副标题颜色" prop="descriptionColor">
-        <ColorInput v-model="formData.descriptionColor" />
-      </el-form-item>
-      <el-form-item label="背景颜色" prop="backgroundColor">
-        <ColorInput v-model="formData.backgroundColor" />
-      </el-form-item>
-      <el-form-item label="底部分割线" prop="showBottomBorder">
-        <el-switch v-model="formData!.showBottomBorder" />
-      </el-form-item>
-      <el-form-item label="查看更多" prop="more.show">
-        <el-checkbox v-model="formData.more.show" />
-      </el-form-item>
-      <!-- 更多样式选择 -->
-      <template v-if="formData.more.show">
-        <el-form-item label="样式" prop="more.type">
-          <el-radio-group v-model="formData.more.type">
-            <el-radio label="text">文字</el-radio>
-            <el-radio label="icon">图标</el-radio>
-            <el-radio label="all">文字+图标</el-radio>
+      <el-card header="风格" class="property-group" shadow="never">
+        <el-form-item label="背景图片" prop="bgImgUrl">
+          <UploadImg v-model="formData.bgImgUrl" width="100%" height="40px">
+            <template #tip>建议尺寸 750*80</template>
+          </UploadImg>
+        </el-form-item>
+        <el-form-item label="标题位置" prop="textAlign">
+          <el-radio-group v-model="formData!.textAlign">
+            <el-tooltip content="居左" placement="top">
+              <el-radio-button label="left">
+                <Icon icon="ant-design:align-left-outlined" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip content="居中" placement="top">
+              <el-radio-button label="center">
+                <Icon icon="ant-design:align-center-outlined" />
+              </el-radio-button>
+            </el-tooltip>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="更多文字" prop="more.text" v-show="formData.more.type !== 'icon'">
-          <el-input v-model="formData.more.text" />
+      </el-card>
+      <el-card header="主标题" class="property-group" shadow="never">
+        <el-form-item label="文字" prop="title" label-width="40px">
+          <InputWithColor
+            v-model="formData.title"
+            v-model:color="formData.titleColor"
+            show-word-limit
+            maxlength="20"
+          />
+        </el-form-item>
+        <el-form-item label="大小" prop="titleSize" label-width="40px">
+          <el-slider
+            v-model="formData.titleSize"
+            :max="60"
+            :min="10"
+            show-input
+            input-size="small"
+          />
+        </el-form-item>
+        <el-form-item label="粗细" prop="titleWeight" label-width="40px">
+          <el-slider
+            v-model="formData.titleWeight"
+            :min="100"
+            :max="900"
+            :step="100"
+            show-input
+            input-size="small"
+          />
+        </el-form-item>
+      </el-card>
+      <el-card header="副标题" class="property-group" shadow="never">
+        <el-form-item label="文字" prop="description" label-width="40px">
+          <InputWithColor
+            v-model="formData.description"
+            v-model:color="formData.descriptionColor"
+            show-word-limit
+            maxlength="50"
+          />
+        </el-form-item>
+        <el-form-item label="大小" prop="descriptionSize" label-width="40px">
+          <el-slider
+            v-model="formData.descriptionSize"
+            :max="60"
+            :min="10"
+            show-input
+            input-size="small"
+          />
+        </el-form-item>
+        <el-form-item label="粗细" prop="descriptionWeight" label-width="40px">
+          <el-slider
+            v-model="formData.descriptionWeight"
+            :min="100"
+            :max="900"
+            :step="100"
+            show-input
+            input-size="small"
+          />
         </el-form-item>
-        <el-form-item label="跳转链接" prop="more.url">
-          <AppLinkInput v-model="formData.more.url" />
+      </el-card>
+      <el-card header="查看更多" class="property-group" shadow="never">
+        <el-form-item label="是否显示" prop="more.show">
+          <el-checkbox v-model="formData.more.show" />
         </el-form-item>
-      </template>
+        <!-- 更多按钮的 样式选择 -->
+        <template v-if="formData.more.show">
+          <el-form-item label="样式" prop="more.type">
+            <el-radio-group v-model="formData.more.type">
+              <el-radio label="text">文字</el-radio>
+              <el-radio label="icon">图标</el-radio>
+              <el-radio label="all">文字+图标</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="更多文字" prop="more.text" v-show="formData.more.type !== 'icon'">
+            <el-input v-model="formData.more.text" />
+          </el-form-item>
+          <el-form-item label="跳转链接" prop="more.url">
+            <AppLinkInput v-model="formData.more.url" />
+          </el-form-item>
+        </template>
+      </el-card>
     </el-form>
-  </section>
+  </ComponentContainerProperty>
 </template>
 <script setup lang="ts">
 import { TitleBarProperty } from './config'