From 615c73fc08bf5f3b38d18164502c845274605490 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 25 Sep 2024 16:38:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E6=9C=AC=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E4=B8=BA=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/div-content/index.vue   |   6 +-
 .../footer-nav/footer-nav-styles.vue          |   2 +-
 src/components/model-text-title/index.vue     |  72 -------------
 src/components/model-title/index.vue          | 102 ++++++++++++++++++
 .../model-title-content.vue}                  |   6 ++
 .../model-title-setting.vue}                  |   4 +-
 .../model-title-styles.vue}                   |  38 ++++++-
 .../main/default/{text-title.ts => title.ts}  |  16 +++
 src/views/layout/components/main/index.ts     |   6 +-
 9 files changed, 170 insertions(+), 82 deletions(-)
 delete mode 100644 src/components/model-text-title/index.vue
 create mode 100644 src/components/model-title/index.vue
 rename src/components/{model-text-title/model-text-title-content.vue => model-title/model-title-content.vue} (90%)
 rename src/components/{model-text-title/model-text-title-setting.vue => model-title/model-title-setting.vue} (72%)
 rename src/components/{model-text-title/model-text-title-styles.vue => model-title/model-title-styles.vue} (62%)
 rename src/views/layout/components/main/default/{text-title.ts => title.ts} (79%)

diff --git a/src/components/common/div-content/index.vue b/src/components/common/div-content/index.vue
index 514e38dc..07ac4c95 100644
--- a/src/components/common/div-content/index.vue
+++ b/src/components/common/div-content/index.vue
@@ -95,9 +95,9 @@
             <template v-else-if="item.key == 'rich-text'">
                 <model-rich-text :key="item.com_data" :value="item.com_data"></model-rich-text>
             </template>
-            <!-- 文本标题 -->
-            <template v-else-if="item.key == 'text-title'">
-                <model-text-title :key="item.com_data" :value="item.com_data"></model-text-title>
+            <!-- 标题 -->
+            <template v-else-if="item.key == 'title'">
+                <model-title :key="item.com_data" :value="item.com_data"></model-title>
             </template>
             <!-- 悬浮按钮 -->
             <template v-else-if="item.key == 'float-window'">
diff --git a/src/components/footer-nav/footer-nav-styles.vue b/src/components/footer-nav/footer-nav-styles.vue
index c4b1175b..050a0271 100644
--- a/src/components/footer-nav/footer-nav-styles.vue
+++ b/src/components/footer-nav/footer-nav-styles.vue
@@ -12,7 +12,7 @@
             </card-container>
         </el-form>
         <div class="divider-line"></div>
-        <common-styles :value="form.common_style" @update:value="common_styles_update" />
+        <common-styles :value="form.common_style" :is-floating-up="false" @update:value="common_styles_update" />
     </div>
 </template>
 <script setup lang="ts">
diff --git a/src/components/model-text-title/index.vue b/src/components/model-text-title/index.vue
deleted file mode 100644
index 62c160b2..00000000
--- a/src/components/model-text-title/index.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <div :style="style_container">
-        <div class="re flex" :class="title_center">
-            <div class="z-i pr-15" :style="title_style">{{ form.title || '标题' }}</div>
-            <div class="flex-row gap-10 align-c right-0 abs">
-                <template v-if="form.keyword_show == '1'">
-                    <div v-for="item in keyword_list" :key="item.id" :style="keyword_style">
-                        {{ item.title }}
-                    </div>
-                </template>
-                <div v-if="form.right_show == '1'" class="nowrap" :style="right_style">{{ form.right_title }}<el-icon class="iconfont icon-arrow-right" :color="new_style.right_color || '#999'"></el-icon></div>
-            </div>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-import { common_styles_computer } from '@/utils';
-import { cloneDeep } from 'lodash';
-
-const props = defineProps({
-    value: {
-        type: Object,
-        default: () => {
-            return {};
-        },
-    },
-});
-
-// 用于页面判断显示
-const state = reactive({
-    form: props.value.content,
-    new_style: props.value.style,
-});
-// 如果需要解构，确保使用toRefs
-const { form, new_style } = toRefs(state);
-
-const keyword_list = computed(() => {
-    // 深拷贝一下，确保不会出现问题
-    const arry_list = cloneDeep(form.value.keyword_list);
-    return arry_list.filter((item: { is_show: string }) => item.is_show == '1');
-});
-// 标题的设置
-const title_style = computed(() => {
-    let common_styles = '';
-    if (new_style.value.title_weight == 'italic') {
-        common_styles += `font-style: italic`;
-    } else if (new_style.value.title_weight == '500') {
-        common_styles += `font-weight: 500`;
-    }
-    return `color:${new_style.value.title_color}; font-size: ${new_style.value.title_size}px; ${common_styles}`;
-});
-// 标题是否居中
-const title_center = computed(() => {
-    return form.value.is_title_center == '1' ? 'jc-c' : '';
-});
-// 关键字设置
-const keyword_style = computed(() => {
-    return `color:${new_style.value.keyword_color}; font-size: ${new_style.value.keyword_size}px;`;
-});
-// 右边按钮设置
-const right_style = computed(() => {
-    return `color:${new_style.value.right_color}; font-size: ${new_style.value.right_size}px;`;
-});
-// 通用样式区
-const style_container = computed(() => common_styles_computer(new_style.value.common_style));
-</script>
-<style lang="scss" scoped>
-.right-0.abs {
-    top: 50%;
-    transform: translateY(-50%);
-}
-</style>
diff --git a/src/components/model-title/index.vue b/src/components/model-title/index.vue
new file mode 100644
index 00000000..b087911b
--- /dev/null
+++ b/src/components/model-title/index.vue
@@ -0,0 +1,102 @@
+<template>
+    <div :style="style_container">
+        <div class="flex-col gap-10">
+            <div class="re flex-row" :class="title_center">
+                <div class="z-i flex-row align-c gap-10">
+                    <template v-if="!isEmpty(form.img_src)">
+                        <image-empty v-model="form.img_src[0]" class="title-img"></image-empty>
+                    </template>
+                    <template v-else-if="!isEmpty(form.icon_class)">
+                        <icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon>
+                    </template>
+                    <div class="pr-15 nowrap" :style="title_style">{{ form.title || '标题' }}</div>
+                </div>
+                <div class="flex-row gap-10 align-c right-0 abs">
+                    <template v-if="form.keyword_show == '1'">
+                        <div v-for="item in keyword_list" :key="item.id" :style="keyword_style">
+                            {{ item.title }}
+                        </div>
+                    </template>
+                    <div v-if="form.right_show == '1'" class="nowrap" :style="right_style">{{ form.right_title }}<el-icon class="iconfont icon-arrow-right" :color="new_style.right_color || '#999'"></el-icon></div>
+                </div>
+            </div>
+            <div v-if="!isEmpty(form.subtitle)" class="break" :style="subtitle_style">{{ form.subtitle }}</div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { common_styles_computer } from '@/utils';
+import { cloneDeep, isEmpty } from 'lodash';
+
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => {
+            return {};
+        },
+    },
+});
+
+// 用于页面判断显示
+const state = reactive({
+    form: props.value.content,
+    new_style: props.value.style,
+});
+// 如果需要解构，确保使用toRefs
+const { form, new_style } = toRefs(state);
+
+const keyword_list = computed(() => {
+    // 深拷贝一下，确保不会出现问题
+    const arry_list = cloneDeep(form.value.keyword_list);
+    return arry_list.filter((item: { is_show: string }) => item.is_show == '1');
+});
+// 标题的设置
+const title_style = computed(() => {
+    let common_styles = '';
+    if (new_style.value.title_weight == 'italic') {
+        common_styles += `font-style: italic`;
+    } else if (new_style.value.title_weight == '500') {
+        common_styles += `font-weight: 500`;
+    }
+    return `color:${new_style.value.title_color}; font-size: ${new_style.value.title_size}px; ${common_styles}`;
+});
+// 标题的设置
+const subtitle_style = computed(() => {
+    let common_styles = '';
+    if (new_style.value.subtitle_weight == 'italic') {
+        common_styles += `font-style: italic`;
+    } else if (new_style.value.subtitle_weight == '500') {
+        common_styles += `font-weight: 500`;
+    }
+    return `color:${new_style.value.subtitle_color}; font-size: ${new_style.value.subtitle_size}px; ${common_styles}`;
+});
+// 标题是否居中
+const title_center = computed(() => {
+    return form.value.is_title_center == '1' ? 'jc-c' : '';
+});
+// 关键字设置
+const keyword_style = computed(() => {
+    return `color:${new_style.value.keyword_color}; font-size: ${new_style.value.keyword_size}px;`;
+});
+// 右边按钮设置
+const right_style = computed(() => {
+    return `color:${new_style.value.right_color}; font-size: ${new_style.value.right_size}px;`;
+});
+// 通用样式区
+const style_container = computed(() => common_styles_computer(new_style.value.common_style));
+</script>
+<style lang="scss" scoped>
+.right-0.abs {
+    top: 50%;
+    transform: translateY(-50%);
+}
+.break {
+    word-break: break-word;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+}
+.title-img {
+    max-width: 6rem;
+    max-height: 3rem;
+}
+</style>
diff --git a/src/components/model-text-title/model-text-title-content.vue b/src/components/model-title/model-title-content.vue
similarity index 90%
rename from src/components/model-text-title/model-text-title-content.vue
rename to src/components/model-title/model-title-content.vue
index c549d277..6d5e4715 100644
--- a/src/components/model-text-title/model-text-title-content.vue
+++ b/src/components/model-title/model-title-content.vue
@@ -12,6 +12,12 @@
                 <el-form-item label="是否居中">
                     <el-switch v-model="form.is_title_center" active-value="1" inactive-value="0"/>
                 </el-form-item>
+                <el-form-item label="上传图片">
+                    <upload v-model="form.img_src" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
+                </el-form-item>
+                <el-form-item label="副标题">
+                    <el-input v-model="form.subtitle" placeholder="请输入副标题" clearable></el-input>
+                </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
             <card-container>
diff --git a/src/components/model-text-title/model-text-title-setting.vue b/src/components/model-title/model-title-setting.vue
similarity index 72%
rename from src/components/model-text-title/model-text-title-setting.vue
rename to src/components/model-title/model-title-setting.vue
index a189dc44..f831e40c 100644
--- a/src/components/model-text-title/model-text-title-setting.vue
+++ b/src/components/model-title/model-title-setting.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="auxiliary-line-setting">
         <template v-if="type == '1'">
-            <model-text-title-content :value="value.content"></model-text-title-content>
+            <model-title-content :value="value.content"></model-title-content>
         </template>
         <template v-if="type == '2'">
-            <model-text-title-styles :value="value.style"></model-text-title-styles>
+            <model-title-styles :value="value.style" :content="value.content"></model-title-styles>
         </template>
     </div>
 </template>
diff --git a/src/components/model-text-title/model-text-title-styles.vue b/src/components/model-title/model-title-styles.vue
similarity index 62%
rename from src/components/model-text-title/model-text-title-styles.vue
rename to src/components/model-title/model-title-styles.vue
index 911865a1..13e206ee 100644
--- a/src/components/model-text-title/model-text-title-styles.vue
+++ b/src/components/model-title/model-title-styles.vue
@@ -3,6 +3,18 @@
         <el-form :model="form" label-width="80">
             <card-container>
                 <div class="mb-12">标题设置</div>
+                <template v-if="!isEmpty(content.icon_class)">
+                    <el-form-item label="左侧图标">
+                        <div class="flex-col w gap-10">
+                            <el-form-item label="大小" label-width="40" class="form-item-child-label">
+                                <slider v-model="form.icon_size" :max="100"></slider>
+                            </el-form-item>
+                            <el-form-item label="颜色" label-width="40" class="form-item-child-label">
+                                <color-picker v-model="form.icon_color" default-color="#999"></color-picker>
+                            </el-form-item>
+                        </div>
+                    </el-form-item>
+                </template>
                 <el-form-item label="标题颜色">
                     <color-picker v-model="form.title_color" default-color="#000000"></color-picker>
                 </el-form-item>
@@ -17,6 +29,25 @@
                     </el-form-item>
                 </el-form-item>
             </card-container>
+            <template v-if="!isEmpty(content.subtitle)">
+                <div class="bg-f5 divider-line" />
+                <card-container>
+                    <div class="mb-12">副标题设置</div>
+                    <el-form-item label="颜色">
+                        <color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
+                    </el-form-item>
+                    <el-form-item label="文字">
+                        <el-radio-group v-model="form.subtitle_weight">
+                            <el-radio value="500">加粗</el-radio>
+                            <el-radio value="normal">正常</el-radio>
+                            <el-radio value="italic">倾斜</el-radio>
+                        </el-radio-group>
+                        <el-form-item label="字号" label-width="40" class="mb-0 w">
+                            <slider v-model="form.subtitle_size" :max="100"></slider>
+                        </el-form-item>
+                    </el-form-item>
+                </card-container>
+            </template>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">关键字设置</div>
@@ -43,15 +74,20 @@
     </div>
 </template>
 <script setup lang="ts">
+import { isEmpty } from "lodash";
 const props = defineProps({
     value: {
         type: Object,
         default: () => {},
+    },
+    content: {
+        type: Object,
+        default: () => {},
     }
 });
 
 const state = reactive({
-    form: props.value
+    form: props.value,
 });
 // 如果需要解构，确保使用toRefs
 const { form } = toRefs(state);
diff --git a/src/views/layout/components/main/default/text-title.ts b/src/views/layout/components/main/default/title.ts
similarity index 79%
rename from src/views/layout/components/main/default/text-title.ts
rename to src/views/layout/components/main/default/title.ts
index b4f6e2a7..99e0db76 100644
--- a/src/views/layout/components/main/default/text-title.ts
+++ b/src/views/layout/components/main/default/title.ts
@@ -11,6 +11,9 @@ interface defaultSearch {
     content: {
         title: string;
         title_link: object;
+        img_src: uploadList[];
+        icon_class: string;
+        subtitle: string;
         is_title_center: string;
         keyword_show: string;
         keyword_list: carousel_list[];
@@ -22,6 +25,11 @@ interface defaultSearch {
         title_color: string;
         title_size: number;
         title_weight: string;
+        icon_size: number;
+        icon_color: string;
+        subtitle_color: string;
+        subtitle_size: number;
+        subtitle_weight: string;
         keyword_color: string;
         keyword_size: number;
         right_color: string;
@@ -33,6 +41,9 @@ const defaultSearch: defaultSearch = {
     content: {
         title: '',
         title_link: {},
+        img_src: [],
+        icon_class: '',
+        subtitle: '',
         is_title_center: '0',
         keyword_show: '1',
         right_show: '1',
@@ -51,6 +62,11 @@ const defaultSearch: defaultSearch = {
         title_color: '#000',
         title_size: 12,
         title_weight: 'normal',
+        icon_size: 12,
+        icon_color: '#999',
+        subtitle_color: '#999',
+        subtitle_size: 12,
+        subtitle_weight: 'normal',
         keyword_color: '#000',
         keyword_size: 12,
         right_color: '#999',
diff --git a/src/views/layout/components/main/index.ts b/src/views/layout/components/main/index.ts
index 422bd58b..60546fc2 100644
--- a/src/views/layout/components/main/index.ts
+++ b/src/views/layout/components/main/index.ts
@@ -11,7 +11,7 @@ import defaultArticleList from './default/article-list';
 import defaultArticleTabs from './default/article-tabs';
 import defaultCarousel from './default/carousel';
 import defaultNotice from './default/notice';
-import defaultTextTitle from './default/text-title';
+import defaultTitle from './default/title';
 import defaultFloatWindow from './default/float-window';
 import defaultTabs from './default/tabs';
 import defaultGoodsList from './default/goods-list';
@@ -39,7 +39,7 @@ interface DefaultSettings {
     nav_group: object;
     carousel: object;
     notice: object;
-    text_title: object;
+    title: object;
     float_window: object;
     tabs: object;
     goods_list: object;
@@ -67,7 +67,7 @@ const defaultSettings: DefaultSettings = {
     nav_group: defaultNavGroup,
     carousel: defaultCarousel,
     notice: defaultNotice,
-    text_title: defaultTextTitle,
+    title: defaultTitle,
     float_window: defaultFloatWindow,
     tabs: defaultTabs,
     goods_list: defaultGoodsList,