From 0cba639eeca67281916433c087ab0359c8876a36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 27 Aug 2024 13:59:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E7=BB=84=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/color-text-size-group/index.vue    | 24 ++++++++++++--
 .../common/text-size-group/index.vue          | 33 -------------------
 .../components/tabs-styles.vue                | 10 ++----
 .../model-notice/model-notice-styles.vue      | 10 ++----
 .../model-shop-list-styles.vue                |  2 +-
 .../model-shop-tabs-styles.vue                |  2 +-
 6 files changed, 27 insertions(+), 54 deletions(-)
 delete mode 100644 src/components/common/text-size-group/index.vue

diff --git a/src/components/common/color-text-size-group/index.vue b/src/components/common/color-text-size-group/index.vue
index 45842bfc..c385b9b1 100644
--- a/src/components/common/color-text-size-group/index.vue
+++ b/src/components/common/color-text-size-group/index.vue
@@ -1,16 +1,23 @@
 <template>
     <div class="flex-col w h gap-10">
-        <color-picker v-model="color" :default-color="props.defaultColor"></color-picker>
-        <text-size-group v-model:typeface="typeface" v-model:size="size"></text-size-group>
+        <color-picker v-if="typeList.includes('color')" v-model="color" :default-color="props.defaultColor"></color-picker>
+        <el-radio-group v-if="typeList.includes('typeface')" v-model="typeface" class="ml-4">
+            <el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+        </el-radio-group>
+        <el-form-item v-if="typeList.includes('size')" label="字号" label-width="40" class="mb-0 w word-size">
+            <slider v-model="size" :max="100"></slider>
+        </el-form-item>
     </div>
 </template>
 
 <script setup lang="ts">
 interface Props {
     defaultColor?: string;
+    typeList?: string[]; // 默认显示3个，传递了之后按照传递的显示
 }
 const props = withDefaults(defineProps<Props>(), {
-    defaultColor: ''
+    defaultColor: '',
+    typeList: () => ['color', 'typeface', 'size'],
 });
 const color = defineModel('color', {
     type: String,
@@ -24,7 +31,18 @@ const size = defineModel('size', {
     type: Number,
     default: 15
 });
+
+const font_weight = [
+    { name: '加粗', value: '500' },
+    { name: '正常', value: '400' },
+];
 </script>
 
 <style lang="scss" scoped>
+.word-size {
+    :deep(.el-form-item__label) {
+        color: #999;
+        font-size: 1.2rem;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/common/text-size-group/index.vue b/src/components/common/text-size-group/index.vue
deleted file mode 100644
index e334a54d..00000000
--- a/src/components/common/text-size-group/index.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-    <el-radio-group v-model="typeface" class="ml-4">
-        <el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
-    </el-radio-group>
-    <el-form-item label="字号" label-width="40" class="mb-0 w word-size">
-        <slider v-model="size" :max="100"></slider>
-    </el-form-item>
-</template>
-
-<script setup lang="ts">
-const typeface = defineModel('typeface', {
-    type: String,
-    default: '400'
-});
-const size = defineModel('size', {
-    type: Number,
-    default: 15
-});
-
-const font_weight = [
-    { name: '加粗', value: '500' },
-    { name: '正常', value: '400' },
-];
-</script>
-
-<style lang="scss" scoped>
-.word-size {
-    :deep(.el-form-item__label) {
-        color: #999;
-        font-size: 1.2rem;
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index 385e9d8e..ece9e257 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -36,16 +36,10 @@
         <template v-if="tabs_content.data_type === 'goods'">
             <template v-if="isShowTitle">
                 <el-form-item label="主标题">
-                    <div class="flex-col gap-10 w">
-                        <color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
-                        <text-size-group v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-group>
-                    </div>
+                    <color-text-size-group v-model:color="form.heading_color" v-model:typeface="form.heading_typeface" v-model:size="form.heading_size" default-color="#000000"></color-text-size-group>
                 </el-form-item>
                 <el-form-item label="副标题">
-                    <div class="flex-col gap-10 w">
-                        <color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
-                        <text-size-group v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-group>
-                    </div>
+                    <color-text-size-group v-model:color="form.subtitle_color" v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size" default-color="#000000"></color-text-size-group>
                 </el-form-item>
             </template>
             <el-form-item label="内间距">
diff --git a/src/components/model-notice/model-notice-styles.vue b/src/components/model-notice/model-notice-styles.vue
index c2874450..c645d3eb 100644
--- a/src/components/model-notice/model-notice-styles.vue
+++ b/src/components/model-notice/model-notice-styles.vue
@@ -5,10 +5,7 @@
                 <div class="mb-12">标题样式</div>
                 <template v-if="!is_img">
                     <el-form-item label="标题文字">
-                        <div class="flex-col gap-10 w">
-                            <color-picker v-model="form.topic_color" default-color="#000000"></color-picker>
-                            <text-size-group v-model:typeface="form.topic_typeface" v-model:size="form.topic_size"></text-size-group>
-                        </div>
+                        <color-text-size-group v-model:color="form.topic_color" v-model:typeface="form.topic_typeface" v-model:size="form.topic_size" default-color="#000000"></color-text-size-group>
                     </el-form-item>
                     <el-form-item label="标题背景" class="topic">
                         <flex-gradients-create :color-list="form.topic_color_list"></flex-gradients-create>
@@ -26,10 +23,7 @@
                     <color-picker v-model="form.button_color" default-color="#999"></color-picker>
                 </el-form-item>
                 <el-form-item label="内容标题">
-                    <div class="flex-col gap-10 w">
-                        <color-picker v-model="form.news_color" default-color="#000000"></color-picker>
-                        <text-size-group v-model:typeface="form.news_typeface" v-model:size="form.news_size"></text-size-group>
-                    </div>
+                    <color-text-size-group v-model:color="form.news_color" v-model:typeface="form.news_typeface" v-model:size="form.news_size" default-color="#000000"></color-text-size-group>
                 </el-form-item>
             </card-container>
         </el-form>
diff --git a/src/components/model-shop-list/model-shop-list-styles.vue b/src/components/model-shop-list/model-shop-list-styles.vue
index cdb486f8..3ed4d2f5 100644
--- a/src/components/model-shop-list/model-shop-list-styles.vue
+++ b/src/components/model-shop-list/model-shop-list-styles.vue
@@ -52,7 +52,7 @@
                     <flex-gradients-create :color-list="form.shop_button_color" default-color="#FF3D53"></flex-gradients-create>
                 </el-form-item>
                 <el-form-item label="立即购买">
-                    <text-size-group v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size"></text-size-group>
+                    <color-text-size-group v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" :type-list="['typeface', 'size']"></color-text-size-group>
                 </el-form-item>
             </card-container>
         </el-form>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-styles.vue b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
index f9e48f19..3743276a 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-styles.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
@@ -64,7 +64,7 @@
                     <flex-gradients-create :color-list="form.shop_button_color" default-color="#2a94ff"></flex-gradients-create>
                 </el-form-item>
                 <el-form-item label="立即购买">
-                    <text-size-group v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size"></text-size-group>
+                    <color-text-size-group v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" :type-list="['typeface', 'size']"></color-text-size-group>
                 </el-form-item>
             </card-container>
         </el-form>