From dbca8cf3c5d8162827e937a8c06064b918d9eecc 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, 28 Aug 2024 16:24:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page-settings/index.vue        | 35 ++++++++++++-------
 src/components/page-settings/page-styles.vue  | 21 ++++++++---
 .../components/main/default/header-nav.ts     |  4 ++-
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index 0237ed39..2aca4f63 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -2,10 +2,15 @@
     <div class="model-top">
         <div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
             <div class="pt-15 pb-10 pl-25 pr-25 w">
-                <img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" :src="url_computer()" />
+                <img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" src="@/assets/images/layout/main/main-top.png" />
             </div>
-            <div class="model-head tc">
-                {{ props.pageData.com_data?.content?.title || '新建页面' }}
+            <div class="model-head tc re">
+                <div class="flex align-c jc-c w h">
+                    {{ props.pageData.com_data?.content?.title || '新建页面' }}
+                </div>
+                <div class="model-head-icon">
+                    <img class="function-icon" :src="url_computer(new_style.function_buttons_type == 'black' ? 'function-icon-black' : 'function-icon-white')" />
+                </div>
             </div>
         </div>
     </div>
@@ -30,17 +35,15 @@ const new_style = computed(() => props.pageData.com_data.style);
 const position = computed(() => new_style.value.up_slide_display ? 'absolute' : 'relative');
 const roll_style = computed(() => {
     let style = ``;
-    if (new_style.value.background_type === 'color') {
-        style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction });
-    } else if (new_style.value.background_type === 'image') {
-        style += background_computer(new_style.value);
+    if (new_style.value.background_type === 'color_image') {
+        style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction }) + background_computer(new_style.value);
     } else {
         style += `background: transparent;`;
     }
     return style
 });
-const url_computer = () => {
-    const new_url = ref(new URL(`../../assets/images/layout/main/main-top.png`, import.meta.url).href).value;
+const url_computer = (name: string) => {
+    const new_url = ref(new URL(`../../assets/images/layout/main/${name}.png`, import.meta.url).href).value;
     return new_url;
 };
 </script>
@@ -54,8 +57,7 @@ const url_computer = () => {
     .roll {
         width: 39rem;
         margin: 0 auto;
-        // box-shadow: 0px 0 0px 0.2rem #fff;
-        // border-bottom: 0.1rem solid #f5f5f5;
+        cursor: pointer;
     }
     .img {
         width: 34rem;
@@ -63,8 +65,15 @@ const url_computer = () => {
 }
 .model-head {
     height: 4.3rem;
-    padding: 1.1rem 0;
-    cursor: pointer;
+}
+.model-head-icon {
+    position: absolute;
+    right: 1.2rem;
+    bottom: 0.6rem;
+    height: 3.2rem;
+    .function-icon {
+        height: 3.2rem;
+    }
 }
 .page-settings-border {
     // border: 0.2rem solid $cr-main;
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index b461ce5d..cf4dc49d 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -7,13 +7,24 @@
                     <div class="flex-col gap-10">
                         <el-radio-group v-model="form.background_type">
                             <el-radio value="transparent">透明</el-radio>
-                            <el-radio value="color">颜色</el-radio>
-                            <el-radio value="image">图片</el-radio>
+                            <el-radio value="color_image">颜色/图片</el-radio>
                         </el-radio-group>
-                        <template v-if="form.background_type === 'color'">
+                        <template v-if="form.background_type === 'color_image'">
                             <mult-color-picker :value="form.background_color_list" :type="form.background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
-                        </template>
-                        <template v-else-if="form.background_type === 'image'">
+                            <div class="flex-row jc-sb align-c">
+                                <div class="size-12">背景图</div>
+                                <el-radio-group v-model="form.background_img_style" is-button>
+                                    <el-tooltip content="单张" placement="top" effect="light">
+                                        <el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
+                                    </el-tooltip>
+                                    <el-tooltip content="平铺" placement="top" effect="light">
+                                        <el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
+                                    </el-tooltip>
+                                    <el-tooltip content="铺满" placement="top" effect="light">
+                                        <el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
+                                    </el-tooltip>
+                                </el-radio-group>
+                            </div>
                             <upload v-model="form.background_img_url" :limit="1"></upload>
                         </template>
                     </div>
diff --git a/src/layout/components/main/default/header-nav.ts b/src/layout/components/main/default/header-nav.ts
index e443e1e8..92d43058 100644
--- a/src/layout/components/main/default/header-nav.ts
+++ b/src/layout/components/main/default/header-nav.ts
@@ -9,6 +9,7 @@ interface DefaultFooterNav {
         background_type: string;
         background_color_list: color_list[];
         background_direction: string;
+        background_img_style: number;
         background_img_url: uploadList[];
         background_title_color: string,
         background_title_typeface: string,
@@ -25,9 +26,10 @@ const defaultFooterNav: DefaultFooterNav = {
         title: '',
     },
     style: {
-        background_type: 'color',
+        background_type: 'color_image',
         background_color_list: [{ color: '#fff', color_percentage: '' }],
         background_direction: '180deg',
+        background_img_style: 2,
         background_img_url: [],
         background_title_color: '#000',
         background_title_typeface: '500',