新增：页面设计标题文本组件

src/assets/icons/page/components/index.js

@@ -16,9 +16,10 @@ import coupon from './coupon.svg?inline'
 import hotZone from './hotZone.svg?inline'
 import special from './special.svg?inline'
 import ICPLicense from './ICPLicense.svg?inline'
+import title from './title.svg?inline'
 
 export {
     image, banner, article, navBar, notice, search, video, window, goods, service,
     guide, richText, blank, officialAccount, coupon, hotZone,
-    special, ICPLicense
+    special, ICPLicense, title
 }

src/assets/icons/page/components/title.svg

@@ -0,0 +1 @@
+<svg t="1729431980631" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4053" width="230" height="230"><path d="M921.6 0H204.8v102.4h629.76c48.128 0 87.04 38.912 87.04 87.04v629.76h102.4V87.04c0-48.128-38.912-87.04-87.04-87.04h-15.36z" p-id="4054"></path><path d="M87.04 1024h645.12c48.128 0 87.04-38.912 87.04-87.04V291.84c0-48.128-38.912-87.04-87.04-87.04H87.04C38.912 204.8 0 243.712 0 291.84v645.12c0 48.128 38.912 87.04 87.04 87.04zM153.6 358.4h512v102.4H460.8v409.6H358.4V460.8H153.6V358.4z" p-id="4055"></path></svg>

src/views/page/modules/components/Components.vue

@@ -62,6 +62,11 @@ const data = [
         type: 'special',
         icon: Icon.special
       },
+      {
+        name: '标题文本',
+        type: 'title',
+        icon: Icon.title
+      }
     ]
   },
   {

src/views/page/modules/editor/Editor.vue

@@ -1184,6 +1184,152 @@
           </a-tab-pane>
         </a-tabs>
       </div>
+
+      <!-- 标题文本 -->
+      <div v-if="curItem.type == 'title'" class="editor-content">
+        <a-tabs>
+          <a-tab-pane key="1" tab="内容设置">
+            <div class="block-box">
+              <div class="block-title">标题内容</div>
+              <div class="block-item">
+                <span class="label">标题文字</span>
+                <a-input v-model="curItem.params.title" />
+              </div>
+              <div class="block-item">
+                <span class="label">标题大小</span>
+                <div class="item-slider">
+                  <a-slider v-model="curItem.params.titleFontSize" :min="12" :max="18" />
+                  <span class="unit-text">
+                    <span>{{ curItem.params.titleFontSize }}</span>
+                    <span>像素</span>
+                  </span>
+                </div>
+              </div>
+              <div class="block-item">
+                <span class="label">标题字体</span>
+                <a-radio-group buttonStyle="solid" v-model="curItem.params.titleFontWeight">
+                  <a-radio-button value="normal">常规</a-radio-button>
+                  <a-radio-button value="bold">加粗</a-radio-button>
+                </a-radio-group>
+              </div>
+            </div>
+            <div class="block-box">
+              <div class="block-title">描述内容</div>
+              <div class="block-item">
+                <span class="label">描述文字</span>
+                <a-input v-model="curItem.params.desc" />
+              </div>
+              <div class="block-item">
+                <span class="label">描述大小</span>
+                <div class="item-slider">
+                  <a-slider v-model="curItem.params.descFontSize" :min="12" :max="16" />
+                  <span class="unit-text">
+                    <span>{{ curItem.params.descFontSize }}</span>
+                    <span>像素</span>
+                  </span>
+                </div>
+              </div>
+              <div class="block-item">
+                <span class="label">描述字体</span>
+                <a-radio-group buttonStyle="solid" v-model="curItem.params.descFontWeight">
+                  <a-radio-button value="normal">常规</a-radio-button>
+                  <a-radio-button value="bold">加粗</a-radio-button>
+                </a-radio-group>
+              </div>
+            </div>
+            <div class="block-box">
+              <div class="block-title">查看更多</div>
+              <div class="block-item">
+                <span class="label">是否显示</span>
+                <a-radio-group buttonStyle="solid" v-model="curItem.params.more.enable">
+                  <a-radio-button :value="true">显示</a-radio-button>
+                  <a-radio-button :value="false">隐藏</a-radio-button>
+                </a-radio-group>
+              </div>
+              <div class="block-item">
+                <span class="label">文字内容</span>
+                <a-input v-model="curItem.params.more.text" />
+              </div>
+              <div class="block-item">
+                <span class="label">箭头图标</span>
+                <a-radio-group buttonStyle="solid" v-model="curItem.params.more.enableIcon">
+                  <a-radio-button :value="true">显示</a-radio-button>
+                  <a-radio-button :value="false">隐藏</a-radio-button>
+                </a-radio-group>
+              </div>
+              <div class="block-item">
+                <span class="label">跳转链接</span>
+                <SLink v-model="curItem.params.more.link" textAlign="right" />
+              </div>
+            </div>
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="样式设置">
+            <div class="block-box">
+              <div class="block-title">内容样式</div>
+              <!-- <div class="block-item">
+                <span class="label">显示位置</span>
+                <a-radio-group buttonStyle="solid" v-model="curItem.style.textAlign">
+                  <a-radio-button value="left">居左</a-radio-button>
+                  <a-radio-button value="center">居中</a-radio-button>
+                </a-radio-group>
+              </div>-->
+              <div class="block-item">
+                <span class="label">标题文字颜色</span>
+                <div class="item-colorPicker">
+                  <span
+                    class="rest-color"
+                    @click="onEditorResetColor(curItem.style, 'titleTextColor', '#323233')"
+                  >重置</span>
+                  <colorPicker v-model="curItem.style.titleTextColor" defaultColor="#323233" />
+                </div>
+              </div>
+              <div class="block-item">
+                <span class="label">描述文字颜色</span>
+                <div class="item-colorPicker">
+                  <span
+                    class="rest-color"
+                    @click="onEditorResetColor(curItem.style, 'descTextColor', '#969799')"
+                  >重置</span>
+                  <colorPicker v-model="curItem.style.descTextColor" defaultColor="#969799" />
+                </div>
+              </div>
+              <div class="block-item">
+                <span class="label">更多文字颜色</span>
+                <div class="item-colorPicker">
+                  <span
+                    class="rest-color"
+                    @click="onEditorResetColor(curItem.style, 'moreTextColor', '#969799')"
+                  >重置</span>
+                  <colorPicker v-model="curItem.style.moreTextColor" defaultColor="#969799" />
+                </div>
+              </div>
+            </div>
+            <div class="block-box">
+              <div class="block-title">组件样式</div>
+              <div class="block-item">
+                <span class="label">上下边距</span>
+                <div class="item-slider">
+                  <a-slider v-model="curItem.style.paddingY" :min="0" :max="50" />
+                  <span class="unit-text">
+                    <span>{{ curItem.style.paddingY }}</span>
+                    <span>像素</span>
+                  </span>
+                </div>
+              </div>
+              <div class="block-item">
+                <span class="label">背景颜色</span>
+                <div class="item-colorPicker">
+                  <span
+                    class="rest-color"
+                    @click="onEditorResetColor(curItem.style, 'background', '#fff')"
+                  >重置</span>
+                  <colorPicker v-model="curItem.style.background" defaultColor="#fff" />
+                </div>
+              </div>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
     </template>
   </div>
 </template>

src/views/page/modules/editor/modules/SLink.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="select-link" :style="{ fontSize: fontSize + 'px' }">
+  <div class="select-link" :style="{ fontSize: fontSize + 'px', textAlign  }">
     <template v-if="!sLink">
       <a class="choice" @click="handleSelectLink()">选择链接</a>
     </template>
-    <div class="flex" v-else>
+    <div v-else>
       <span class="link-title">{{ sLink.title }}</span>
       <a class="choice ml-10" @click="handleSelectLink()">修改</a>
     </div>
@@ -30,6 +30,8 @@ export default {
     value: PropTypes.object.def({}),
     // 文字大小
     fontSize: PropTypes.integer.def(12),
+    // 显示位置
+    textAlign: PropTypes.string.def('left'), // left居左 right居右
   },
   data () {
     return {
@@ -85,7 +87,7 @@ export default {
 }
 .choice,
 .link-title {
-  display: block;
+  // display: block;
   white-space: nowrap;
 }
 </style>

src/views/page/modules/phone/Phone.vue

@@ -461,6 +461,39 @@
             </p>
           </div>
 
+          <!-- 标题文本 -->
+          <div
+            v-else-if="item.type == 'title'"
+            class="diy-title"
+            :style="{ padding: `${item.style.paddingY}px 15px`, background: item.style.background }"
+          >
+            <div class="title-content">
+              <!-- 标题文字 -->
+              <div class="title">
+                <span
+                  :style="{ color: item.style.titleTextColor, fontSize: `${item.params.titleFontSize}px`, fontWeight: item.params.titleFontWeight }"
+                >{{ item.params.title }}</span>
+              </div>
+              <!-- 查看更多 -->
+              <div
+                v-if="item.params.more.enable"
+                class="more-content"
+                :style="{ color: item.style.moreTextColor }"
+              >
+                <span class="more-text">{{ item.params.more.text }}</span>
+                <span v-if="item.params.more.enableIcon" class="more-icon">
+                  <a-icon :component="Icon.arrowRight" />
+                </span>
+              </div>
+            </div>
+            <!-- 描述文字 -->
+            <div class="desc-content">
+              <span
+                :style="{ color: item.style.descTextColor, fontSize: `${item.params.descFontSize}px`, fontWeight: item.params.descFontWeight }"
+              >{{ item.params.desc }}</span>
+            </div>
+          </div>
+
           <!-- 操作工具栏 -->
           <div class="action-tools">
             <div class="tools-content">

src/views/page/modules/phone/style.less

@@ -882,6 +882,36 @@ dl {
 
     }
 
+    // 标题文本
+    .diy-title {
+      padding: 5px 15px;
+
+      .title-content {
+        display: flex;
+        justify-content: space-between;
+
+        .title {
+          color: #323233;
+          font-size: 14px;
+          flex: 1;
+        }
+
+        .more-content {
+          color: #969799;
+          font-size: 12px;
+          margin-left: 20px;
+        }
+
+      }
+
+      .desc-content {
+        margin-top: 8px;
+        color: #969799;
+        font-size: 12px;
+      }
+
+    }
+
   }
 
   .optional {