From 5041d26011cc5e556d340513621179dd1e26555a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 30 Aug 2024 11:52:46 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC4=20=E9=A3=8E=E6=A0=BC5=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/theme-select/index.vue  |   6 +-
 src/components/model-notice/index.vue         |   2 +-
 src/components/model-search/index.vue         |  16 +-
 .../model-search/model-search-content.vue     |  44 +++--
 .../model-search/model-search-styles.vue      |  96 +++++-----
 src/components/page-settings/index.vue        |  31 +++-
 src/components/page-settings/page-content.vue |  25 ++-
 src/components/page-settings/page-setting.vue | 167 +++++-------------
 src/components/page-settings/page-styles.vue  |  30 ++--
 .../components/main/default/header-nav.ts     |   4 +
 src/layout/components/main/default/notice.ts  |   2 +
 11 files changed, 203 insertions(+), 220 deletions(-)

diff --git a/src/components/common/theme-select/index.vue b/src/components/common/theme-select/index.vue
index a9551aad..cd02b1ba 100644
--- a/src/components/common/theme-select/index.vue
+++ b/src/components/common/theme-select/index.vue
@@ -36,7 +36,7 @@
             <text v-else class="cr-9">{{ placeholder }}</text>
         </div>
         <div class="theme-icon">
-            <template v-if="temp_data_obj === null">
+            <template v-if="temp_data_obj === null || notCleardButton">
                 <icon name="arrow-right" size="12" color="9"></icon>
             </template>
             <template v-else>
@@ -64,6 +64,10 @@ const props = defineProps({
         type: Array as PropType<data[]>,
         default: () => [],
     },
+    notCleardButton: {
+        type: Boolean,
+        default: false,
+    }
 });
 const model_value = defineModel({ type: String, default: '' });
 const { data } = toRefs(props);
diff --git a/src/components/model-notice/index.vue b/src/components/model-notice/index.vue
index 66948bb6..03b122af 100644
--- a/src/components/model-notice/index.vue
+++ b/src/components/model-notice/index.vue
@@ -141,7 +141,7 @@ watchEffect(() => {
 </script>
 <style lang="scss" scoped>
 .news-box {
-    min-height: 4.4rem;
+    height: v-bind(container_height);
     overflow: hidden;
     padding: 0 1rem;
     background: #fff;
diff --git a/src/components/model-search/index.vue b/src/components/model-search/index.vue
index 6376c4cf..26325e31 100644
--- a/src/components/model-search/index.vue
+++ b/src/components/model-search/index.vue
@@ -2,7 +2,7 @@
     <div :style="style_container">
         <div :style="style" class="flex-row align-c">
             <div class="search w re">
-                <div class="box h oh flex align-c gap-10" :style="box_style">
+                <div class="box h oh flex align-c gap-10 bg-f" :style="box_style">
                     <template v-if="form.is_icon_show">
                         <template v-if="form.icon_img_src.length > 0">
                             <div class="img-box">
@@ -13,17 +13,17 @@
                             <el-icon :class="`iconfont ${ !isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-search' } size-14`" :style="`color:${new_style.icon_color};`" />
                         </template>
                     </template>
-                    <span v-if="form.is_tips_show" class="size-14" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
+                    <span v-if="form.is_tips_show" :class="[isPageSettings ? 'size-12 text-line-1' : 'size-14 text-line-1']" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
                 </div>
                 <div v-if="form.is_search_show" class="abs search-botton h flex align-c jc-c" :style="search_button">
                     <template v-if="form.search_type === 'text'">
-                        <div class="pl-16 pr-16 ptb-3 size-12">{{ form.search_tips }}</div>
+                        <div :class="['ptb-3 size-12', isPageSettings ? 'plr-12' : 'plr-16']">{{ form.search_tips }}</div>
                     </template>
                     <template v-else-if="form.search_botton_src.length > 0">
                         <image-empty v-model="form.search_botton_src[0]" class="img" :style="search_button_radius" error-img-style="width: 4rem;height: 2.8rem;" />
                     </template>
                     <template v-else>
-                        <div class="pl-16 pr-16 ptb-3 size-12">
+                        <div :class="['ptb-3 size-12', isPageSettings ? 'plr-12' : 'plr-16']">
                             <el-icon :class="`iconfont ${ 'icon-' + form.search_botton_icon } size-14`" />
                         </div>
                     </template>
@@ -43,6 +43,10 @@ const props = defineProps({
             return {};
         },
     },
+    isPageSettings: {
+        type: Boolean,
+        default: false,
+    },
 });
 // 用于页面判断显示
 const state = reactive({
@@ -62,12 +66,12 @@ const style = computed(() => {
     }
     return common_styles;
 });
-const style_container = computed(() => common_styles_computer(new_style.value.common_style));
+const style_container = computed(() => props.isPageSettings ? '' : common_styles_computer(new_style.value.common_style));
 
 const search_button_radius = computed(() => radius_computer(new_style.value.search_button_radius));
 // 搜索框设置
 const box_style = computed(() => {
-    let style = `background: ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) }`;
+    let style = `border: 1px solid ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) };`;
     if (form.value.is_center) {
         style += `justify-content: center;`;
     }
diff --git a/src/components/model-search/model-search-content.vue b/src/components/model-search/model-search-content.vue
index b5428c59..6151a91b 100644
--- a/src/components/model-search/model-search-content.vue
+++ b/src/components/model-search/model-search-content.vue
@@ -4,38 +4,46 @@
             <card-container>
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="图标样式" class="align-s">
-                    <div class="flex-col w h gap-10">
-                        <el-switch v-model="form.is_icon_show" />
-                        <template v-if="form.is_icon_show">
+                    <el-row class="w">
+                        <el-col :span="24"><el-switch v-model="form.is_icon_show" width="40"></el-switch></el-col>
+                    </el-row>
+                    <el-row v-if="form.is_icon_show" class="mt-10 w">
+                        <el-col :span="24">
                             <upload v-model="form.icon_img_src" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
-                        </template>
-                    </div>
+                        </el-col>
+                    </el-row>
                 </el-form-item>
                 <el-form-item label="提示文字">
-                    <div class="flex-col gap-10 w">
-                        <el-switch v-model="form.is_tips_show" />
-                        <el-input v-if="form.is_tips_show" v-model="form.tips" placeholder="请输入提示文字"></el-input>
-                    </div>
+                    <el-row class="w">
+                        <el-col :span="24"><el-switch v-model="form.is_tips_show"></el-switch></el-col>
+                    </el-row>
+                    <el-row v-if="form.is_tips_show" class="mt-10 w">
+                        <el-col :span="24">
+                            <el-input v-model="form.tips" placeholder="请输入提示文字"></el-input>
+                        </el-col>
+                    </el-row>
                 </el-form-item>
                 <el-form-item v-if="form.is_tips_show || form.is_icon_show" label="是否居中">
-                    <el-switch v-model="form.is_center" />
+                    <el-switch v-model="form.is_center"></el-switch>
                 </el-form-item>
                 <el-form-item label="搜索按钮" class="align-s">
-                    <div class="flex-col w h gap-10">
-                        <el-switch v-model="form.is_search_show" />
-                        <template v-if="form.is_search_show">
-                            <el-radio-group v-model="form.search_type" class="ml-4">
+                    <el-row class="w">
+                        <el-col :span="24"><el-switch v-model="form.is_search_show"></el-switch></el-col>
+                    </el-row>
+                    <el-row v-if="form.is_search_show" class="mt-10 w">
+                        <el-col :span="24">
+                            <el-radio-group v-model="form.search_type">
                                 <el-radio value="img-icon">图片/图标</el-radio>
                                 <el-radio value="text">文字</el-radio>
                             </el-radio-group>
                             <template v-if="form.search_type === 'img-icon'">
-                                <upload v-model="form.search_botton_src" v-model:icon-value="form.search_botton_icon" is-icon :limit="1" size="50"></upload>
+                                <upload v-model="form.search_botton_src" v-model:icon-value="form.search_botton_icon" is-icon :limit="1" size="50" class="mt-10"></upload>
                             </template>
                             <template v-else>
-                                <el-input v-model="form.search_tips" placeholder="请输入文字内容"></el-input>
+                                <el-input v-model="form.search_tips" placeholder="请输入文字内容" class="mt-10"></el-input>
                             </template>
-                        </template>
-                    </div>
+                        </el-col>
+                    </el-row>
                 </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
diff --git a/src/components/model-search/model-search-styles.vue b/src/components/model-search/model-search-styles.vue
index bc2c4a41..16e248b1 100644
--- a/src/components/model-search/model-search-styles.vue
+++ b/src/components/model-search/model-search-styles.vue
@@ -1,53 +1,57 @@
 <template>
     <div class="w h">
         <el-form :model="form" label-width="70">
-            <card-container>
-                <div class="mb-12">左侧图标</div>
-                <el-form-item label="图标">
-                    <color-picker v-model="form.icon_color" default-color="#CCCCCC"></color-picker>
-                </el-form-item>
-            </card-container>
-            <div class="bg-f5 divider-line" />
-            <card-container>
-                <div class="mb-12">搜索按钮</div>
-                <el-form-item label="搜索按钮">
-                    <color-picker v-model="form.button_inner_color" default-color="#fff"></color-picker>
-                </el-form-item>
-                <el-form-item v-if="content.search_type != 'img'" label="背景设置">
-                    <div class="flex-col gap-10 w">
-                        <div class="size-12">背景色</div>
-                        <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
-                        <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>
+            <template v-if="search_content.is_icon_show">
+                <card-container>
+                    <div class="mb-12">左侧图标</div>
+                    <el-form-item label="图标">
+                        <color-picker v-model="form.icon_color" default-color="#CCCCCC"></color-picker>
+                    </el-form-item>
+                </card-container>
+                <div class="bg-f5 divider-line" />
+            </template>
+            <template v-if="search_content.is_search_show">
+                <card-container>
+                    <div class="mb-12">搜索按钮</div>
+                    <el-form-item label="搜索按钮">
+                        <color-picker v-model="form.button_inner_color" default-color="#fff"></color-picker>
+                    </el-form-item>
+                    <el-form-item v-if="content.search_type != 'img'" label="背景设置">
+                        <div class="flex-col gap-10 w">
+                            <div class="size-12">背景色</div>
+                            <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
+                            <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>
                         </div>
-                        <upload v-model="form.background_img_url" :limit="1"></upload>
-                    </div>
-                </el-form-item>
-                <el-form-item label="按钮圆角">
-                    <radius :value="form.search_button_radius" @update:value="button_radius_change"></radius>
-                </el-form-item>
-            </card-container>
-            <div class="bg-f5 divider-line" />
+                    </el-form-item>
+                    <el-form-item label="按钮圆角">
+                        <radius :value="form.search_button_radius" @update:value="button_radius_change"></radius>
+                    </el-form-item>
+                </card-container>
+                <div class="bg-f5 divider-line" />
+            </template>
             <card-container>
                 <div class="mb-12">框体样式</div>
-                <el-form-item label="提示文字">
+                <el-form-item v-if="search_content.is_tips_show" label="提示文字">
                     <color-picker v-model="form.tips_color" default-color="#CCCCCC"></color-picker>
                 </el-form-item>
                 <el-form-item label="热词文字">
                     <color-picker v-model="form.hot_words_color" default-color="#000"></color-picker>
                 </el-form-item>
-                <el-form-item label="搜索框">
+                <el-form-item label="搜索框线">
                     <color-picker v-model="form.search_border" default-color="#fff"></color-picker>
                 </el-form-item>
                 <el-form-item label="框体圆角">
@@ -55,8 +59,10 @@
                 </el-form-item>
             </card-container>
         </el-form>
-        <div class="bg-f5 divider-line" />
-        <common-styles :value="form.common_style" @update:value="common_styles_update" />
+        <template v-if="isShowCommon">
+            <div class="bg-f5 divider-line" />
+            <common-styles :value="form.common_style" @update:value="common_styles_update" />
+        </template>
     </div>
 </template>
 <script setup lang="ts">
@@ -70,14 +76,18 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    isShowCommon: {
+        type: Boolean,
+        default: true,
+    }
 });
 
 const state = reactive({
     form: props.value,
-    content: props.content,
+    search_content: props.content,
 });
 // 如果需要解构，确保使用toRefs
-const { form } = toRefs(state);
+const { form, search_content } = toRefs(state);
 
 // 监听整个form对象,发生变化的时候触发emit
 const emit = defineEmits(['update:value']);
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index d2b2af75..f42159e7 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -5,13 +5,23 @@
                 <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 re">
-                <div class="flex align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
-                    <template v-if="form.theme == '2' || form.theme == '3'">
+                <div v-if="['1', '2', '3'].includes(form.theme)" class="flex align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
+                    <template v-if="['2', '3'].includes(form.theme)">
                         <div class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></div>
                     </template>
-                    <div v-if="form.theme == '1' || form.theme == '2'">{{ form?.title || '新建页面' }}</div>
-                    <template v-if="form.theme == '3'">
-                        <model-search :value="pageData.com_data"></model-search>
+                    <div v-if="['1', '2'].includes(form.theme)">{{ form?.title || '新建页面' }}</div>
+                    <template v-if="['3', '5'].includes(form.theme)">
+                        <div class="flex-1" style="padding-right:90px">
+                            <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
+                        </div>
+                    </template>
+                </div>
+                <div class="flex align-c h gap-10">
+                    <div class="flex-row gap-2"><icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name || '默认定位名称' }}</span><icon v-if="form.is_arrows_show" name="arrow-right" size="12" color="0"></icon></div>
+                    <template v-if="['5'].includes(form.theme)">
+                        <div class="flex-1" style="padding-right:90px">
+                            <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
+                        </div>
                     </template>
                 </div>
                 <div class="model-head-icon">
@@ -41,8 +51,13 @@ 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_image') {
-        style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction }) + background_computer(new_style.value);
+    if (new_style.value.header_background_type === 'color_image') {
+        const { header_background_img_url, header_background_img_style, header_background_color_list, header_background_direction } = new_style.value;
+        // 渐变
+        const gradient = { color_list: header_background_color_list, direction: header_background_direction };
+        // 背景图
+        const back = { background_img_url: header_background_img_url, background_img_style: header_background_img_style };
+        style += gradient_computer(gradient) + background_computer(back);
     } else {
         style += `background: transparent;`;
     }
@@ -52,7 +67,7 @@ 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;
 };
-const text_style = computed(() => `font-weight:${ new_style.value.background_title_typeface }; font-size: ${ new_style.value.background_title_size }px; color: ${ new_style.value.background_title_color };`);
+const text_style = computed(() => `font-weight:${ new_style.value.header_background_title_typeface }; font-size: ${ new_style.value.header_background_title_size }px; color: ${ new_style.value.header_background_title_color };`);
 </script>
 <style lang="scss" scoped>
 .model-top {
diff --git a/src/components/page-settings/page-content.vue b/src/components/page-settings/page-content.vue
index c627415b..050ec198 100644
--- a/src/components/page-settings/page-content.vue
+++ b/src/components/page-settings/page-content.vue
@@ -3,16 +3,16 @@
         <el-form :model="form" label-width="70">
             <card-container>
                 <el-form-item label="选择风格">
-                    <theme-select v-model="form.theme" :data="base_list.themeList" @update:model-value="themeChange"></theme-select>
+                    <theme-select v-model="form.theme" :data="base_list.themeList" :not-cleard-button="true" @update:model-value="themeChange"></theme-select>
                 </el-form-item>
-                <template v-if="form.theme == '1' || form.theme == '2' || form.theme == '3'">
-                    <el-form-item v-if="form.theme == '2' || form.theme == '3'" label="logo">
+                <template v-if="['1', '2', '3'].includes(form.theme)">
+                    <el-form-item v-if="['2', '3'].includes(form.theme)" label="logo">
                         <upload v-model="form.logo" :limit="1"></upload>
                     </el-form-item>
-                    <el-form-item v-if="form.theme == '3'" label="链接地址">
+                    <el-form-item v-if="['3'].includes(form.theme)" label="链接地址">
                         <url-value v-model="form.link"></url-value>
                     </el-form-item>
-                    <template v-if="form.theme == '1' || form.theme == '2'">
+                    <template v-if="['1', '2'].includes(form.theme)">
                         <el-form-item label="页面标题">
                             <el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
                         </el-form-item>
@@ -40,12 +40,23 @@
                         </el-form-item>
                     </template>
                 </template>
+                <template v-if="['4', '5'].includes(form.theme)">
+                    <el-form-item label="定位名称">
+                        <el-input v-model="form.positioning_name" placeholder="请输入默认定位名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="箭头按钮">
+                        <el-radio-group v-model="form.is_arrows_show">
+                            <el-radio :value="true">显示</el-radio>
+                            <el-radio :value="false">隐藏</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </template>
             </card-container>
             <div class="bg-f5 divider-line" />
-            <template v-if="form.theme == '3'">
+            <template v-if="['3', '5'].includes(form.theme)">
                 <model-search-content :value="form"></model-search-content>
+                <div class="bg-f5 divider-line" />
             </template>
-            <div class="bg-f5 divider-line" />
             <card-container>
                 <el-form-item label="底部导航">
                     <el-radio-group v-model="form.bottom_navigation_show" class="ml-4">
diff --git a/src/components/page-settings/page-setting.vue b/src/components/page-settings/page-setting.vue
index 7921a4f0..d3a0335e 100644
--- a/src/components/page-settings/page-setting.vue
+++ b/src/components/page-settings/page-setting.vue
@@ -1,12 +1,10 @@
 <template>
-    <div class="setting-content">
-        <template v-if="type == '1'">
-            <page-content :value="value.content" @update:change-theme="change_theme"></page-content>
-        </template>
-        <template v-else-if="type == '2'">
-            <page-styles :value="value.style" :content="value.content"></page-styles>
-        </template>
-    </div>
+    <template v-if="type == '1'">
+        <page-content :value="value.content" @update:change-theme="change_theme"></page-content>
+    </template>
+    <template v-else-if="type == '2'">
+        <page-styles :value="value.style" :content="value.content"></page-styles>
+    </template>
 </template>
 <script setup lang="ts">
 const props = defineProps({
@@ -19,138 +17,61 @@ const props = defineProps({
         default: () => ({}),
     },
 });
+const default_data = {
+    header_background_type: 'color_image',
+    header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
+    header_background_direction: '180deg',
+    header_background_img_style: 2,
+    header_background_img_url: [],
+    header_background_title_color: '#000',
+    header_background_title_typeface: '500',
+    header_background_title_size: 14,
+    function_buttons_type: 'black',
+    immersive_style: false,
+    up_slide_display: true,
+    icon_color: '#ccc',
+    button_inner_color: '#fff',
+    color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
+    direction: '90deg',
+    background_img_style: '',
+    background_img_url: [],
+    search_button_radius: {
+        radius: 16,
+        radius_top_left: 16,
+        radius_top_right: 16,
+        radius_bottom_left: 16,
+        radius_bottom_right: 16,
+    },
+    tips_color: '#ccc',
+    hot_words_color: '#000',
+    search_border: '#E4E4E4',
+    search_border_radius: {
+        radius: 16,
+        radius_top_left: 16,
+        radius_top_right: 16,
+        radius_bottom_left: 16,
+        radius_bottom_right: 16,
+    },
+}
 const default_config = {
     style: {
-        theme_1: {
-            header_background_type: 'color_image',
-            header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
-            header_background_direction: '180deg',
-            header_background_img_style: 2,
-            header_background_img_url: [],
-            header_background_title_color: '#000',
-            header_background_title_typeface: '500',
-            header_background_title_size: 14,
-            function_buttons_type: 'black',
-            immersive_style: false,
-            up_slide_display: true,
-            icon_color: '#ccc',
-            button_inner_color: '#fff',
-            color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
-            direction: '90deg',
-            background_img_style: '',
-            background_img_url: [],
-            search_button_radius: {
-                radius: 16,
-                radius_top_left: 16,
-                radius_top_right: 16,
-                radius_bottom_left: 16,
-                radius_bottom_right: 16,
-            },
-            tips_color: '#ccc',
-            hot_words_color: '#000',
-            search_border: '#fff',
-            search_border_radius: {
-                radius: 16,
-                radius_top_left: 16,
-                radius_top_right: 16,
-                radius_bottom_left: 16,
-                radius_bottom_right: 16,
-            },
-        },
+        theme_1: {},
         theme_2: {
-            header_background_type: 'color_image',
-            header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
-            header_background_direction: '180deg',
-            header_background_img_style: 2,
-            header_background_img_url: [],
-            header_background_title_color: '#000',
-            header_background_title_typeface: '500',
-            header_background_title_size: 14,
-            function_buttons_type: 'black',
-            immersive_style: false,
-            up_slide_display: true,
-            icon_color: '#ccc',
-            button_inner_color: '#fff',
-            color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
-            direction: '90deg',
-            background_img_style: '',
-            background_img_url: [],
-            search_button_radius: {
-                radius: 16,
-                radius_top_left: 16,
-                radius_top_right: 16,
-                radius_bottom_left: 16,
-                radius_bottom_right: 16,
-            },
-            tips_color: '#ccc',
-            hot_words_color: '#000',
-            search_border: '#fff',
-            search_border_radius: {
-                radius: 16,
-                radius_top_left: 16,
-                radius_top_right: 16,
-                radius_bottom_left: 16,
-                radius_bottom_right: 16,
-            },
         },
         theme_3: {
-            background_type: 'color_image',
-            background_color_list: [{ color: '#fff', color_percentage: undefined }],
-            background_direction: '180deg',
-            background_img_style: 2,
-            background_img_url: [],
-            background_title_color: '#000',
-            background_title_typeface: '500',
-            background_title_size: 14,
-            function_buttons_type: 'black',
-            immersive_style: false,
-            up_slide_display: true,
         },
         theme_4: {
-            background_type: 'color_image',
-            background_color_list: [{ color: '#fff', color_percentage: undefined }],
-            background_direction: '180deg',
-            background_img_style: 2,
-            background_img_url: [],
-            background_title_color: '#000',
-            background_title_typeface: '500',
-            background_title_size: 14,
-            function_buttons_type: 'black',
-            immersive_style: false,
-            up_slide_display: true,
         },
         theme_5: {
-            background_type: 'color_image',
-            background_color_list: [{ color: '#fff', color_percentage: undefined }],
-            background_direction: '180deg',
-            background_img_style: 2,
-            background_img_url: [],
-            background_title_color: '#000',
-            background_title_typeface: '500',
-            background_title_size: 14,
-            function_buttons_type: 'black',
-            immersive_style: false,
-            up_slide_display: true,
         },
         theme_6: {
-            background_type: 'color_image',
-            background_color_list: [{ color: '#fff', color_percentage: undefined }],
-            background_direction: '180deg',
-            background_img_style: 2,
-            background_img_url: [],
-            background_title_color: '#000',
-            background_title_typeface: '500',
-            background_title_size: 14,
-            function_buttons_type: 'black',
-            immersive_style: false,
-            up_slide_display: true,
         },
     },
 };
 const form = ref(props.value);
 const change_theme = (val: string) => {
     if (val) {
-        form.value.style = Object.assign({}, form.value.style, (<arrayIndex>default_config.style)[`theme_${Number(val)}`]);
+        form.value.style = Object.assign({}, form.value.style, default_data, (<arrayIndex>default_config.style)[`theme_${Number(val)}`]);
     }
 };
 </script>
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index e45f2f5a..28015ef6 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -5,15 +5,15 @@
                 <div class="mb-12">头部样式</div>
                 <el-form-item label="顶部背景">
                     <div class="flex-col gap-10">
-                        <el-radio-group v-model="form.background_type">
+                        <el-radio-group v-model="form.header_background_type">
                             <el-radio value="transparent">透明</el-radio>
                             <el-radio value="color_image">颜色/图片</el-radio>
                         </el-radio-group>
-                        <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 v-if="form.header_background_type === 'color_image'">
+                            <mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
                             <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-radio-group v-model="form.header_background_img_style" is-button>
                                     <el-tooltip content="单张" placement="top" effect="light">
                                         <el-radio-button value="0">
                                             <icon name="single-sheet"></icon>
@@ -31,7 +31,7 @@
                                     </el-tooltip>
                                 </el-radio-group>
                             </div>
-                            <upload v-model="form.background_img_url" :limit="1"></upload>
+                            <upload v-model="form.header_background_img_url" :limit="1"></upload>
                         </template>
                     </div>
                 </el-form-item>
@@ -53,14 +53,14 @@
                         <el-radio :value="false">关闭</el-radio>
                     </el-radio-group>
                 </el-form-item>
-                <el-form-item label="标题名称">
+                <el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">
                     <color-text-size-group v-model:color="form.background_title_color" v-model:typeface="form.background_title_typeface" v-model:size="form.background_title_size" default-color="#000000"></color-text-size-group>
                 </el-form-item>
             </card-container>
         </el-form>
         <div class="bg-f5 divider-line" />
-        <template v-if="content.theme == '3'">
-            <model-search-styles :value="form" :content="props.content"></model-search-styles>
+        <template v-if="['3', '5'].includes(content.theme)">
+            <model-search-styles :value="form" :content="props.content" :is-show-common="false"></model-search-styles>
         </template>
         <div class="bg-f5 divider-line" />
         <common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" @update:value="common_styles_update" />
@@ -80,15 +80,19 @@ const props = defineProps({
     },
 });
 const emit = defineEmits(['update:value']);
-// 默认值
-let form = reactive(props.value);
+const state = reactive({
+    form: props.value,
+    search_content: props.content,
+});
+// 如果需要解构，确保使用toRefs
+const { form, search_content } = toRefs(state);
 
 const common_styles_update = (val: Object) => {
-    form.common_style = val;
+    form.value.common_style = val;
 };
 const mult_color_picker_event = (arry: color_list[], type: number) => {
-    form.background_color_list = arry;
-    form.background_direction = type.toString();
+    form.value.background_color_list = arry;
+    form.value.background_direction = type.toString();
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/layout/components/main/default/header-nav.ts b/src/layout/components/main/default/header-nav.ts
index 5daefbef..68b42c46 100644
--- a/src/layout/components/main/default/header-nav.ts
+++ b/src/layout/components/main/default/header-nav.ts
@@ -13,6 +13,8 @@ interface DefaultFooterNav {
         link: object;
         indicator_location: string;
         bottom_navigation_show: string;
+        positioning_name: string;
+        is_arrows_show: boolean;
         is_center: boolean;
         is_icon_show: boolean;
         icon_src: string;
@@ -60,6 +62,8 @@ const defaultFooterNav: DefaultFooterNav = {
         title: '',
         link: {},
         indicator_location: 'center',
+        positioning_name: '',
+        is_arrows_show: true,
         is_center: false,
         is_icon_show: true,
         icon_src: '',
diff --git a/src/layout/components/main/default/notice.ts b/src/layout/components/main/default/notice.ts
index 89fb1dc4..81972918 100644
--- a/src/layout/components/main/default/notice.ts
+++ b/src/layout/components/main/default/notice.ts
@@ -31,6 +31,7 @@ interface defaultSearch {
         topic_size: number;
         topic_width: number;
         topic_height: number;
+        container_height: number;
         icon_size: number;
         icon_color: string;
         container_color_list: color_list[],
@@ -80,6 +81,7 @@ const defaultSearch: defaultSearch = {
         topic_size: 14,
         topic_width: 24,
         topic_height: 24,
+        container_height: 44,
         icon_size: 12,
         icon_color: '#999',
         button_color: '#999',

From db5f4f92b7884722b89928401de79ec81093ffce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 30 Aug 2024 13:56:51 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page-settings/index.vue         | 15 ++++++++-------
 src/components/page-settings/page-content.vue  |  1 -
 src/components/page-settings/page-setting.vue  | 18 ++++++------------
 src/components/page-settings/page-styles.vue   |  6 +++---
 .../components/main/default/header-nav.ts      |  8 ++++----
 5 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index f42159e7..71188e34 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -1,23 +1,23 @@
 <template>
     <div class="model-top">
         <div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
-            <div class="pb-12 pl-6 pr-13 w">
+            <div class="pt-15 pl-18 pr-22 w pb-6" :style="[!isEmpty(roll_style) ? '' : 'background-color: #fff']">
                 <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 re">
+            <div class="model-head tc re mlr-12 mt-6">
                 <div v-if="['1', '2', '3'].includes(form.theme)" class="flex align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
                     <template v-if="['2', '3'].includes(form.theme)">
                         <div class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></div>
                     </template>
-                    <div v-if="['1', '2'].includes(form.theme)">{{ form?.title || '新建页面' }}</div>
+                    <div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
                     <template v-if="['3', '5'].includes(form.theme)">
                         <div class="flex-1" style="padding-right:90px">
                             <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
                         </div>
                     </template>
                 </div>
-                <div class="flex align-c h gap-10">
-                    <div class="flex-row gap-2"><icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name || '默认定位名称' }}</span><icon v-if="form.is_arrows_show" name="arrow-right" size="12" color="0"></icon></div>
+                <div v-else-if="['4', '5'].includes(form.theme)" class="flex align-c h gap-10">
+                    <div class="flex-row gap-2"><icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span><icon v-if="form.is_arrows_show" name="arrow-right" size="12" color="0"></icon></div>
                     <template v-if="['5'].includes(form.theme)">
                         <div class="flex-1" style="padding-right:90px">
                             <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
@@ -33,7 +33,7 @@
 </template>
 <script setup lang="ts">
 import { background_computer, gradient_computer } from '@/utils';
-
+import { isEmpty } from 'lodash';
 interface Props {
     pageData: any;
     showPage: boolean;
@@ -61,6 +61,7 @@ const roll_style = computed(() => {
     } else {
         style += `background: transparent;`;
     }
+    console.log(style);
     return style
 });
 const url_computer = (name: string) => {
@@ -78,7 +79,7 @@ const text_style = computed(() => `font-weight:${ new_style.value.header_backgro
     transform: translateX(-50%);
     .roll {
         width: 39rem;
-        padding: 1.5rem 1.2rem 0.9rem 1.2rem;
+        padding-bottom: 0.9rem;
         margin: 0 auto;
         cursor: pointer;
     }
diff --git a/src/components/page-settings/page-content.vue b/src/components/page-settings/page-content.vue
index 050ec198..d36e5625 100644
--- a/src/components/page-settings/page-content.vue
+++ b/src/components/page-settings/page-content.vue
@@ -82,7 +82,6 @@ const base_list = reactive({
         { id: '3', name: '风格3', url: new URL(`../../assets/images/components/page-settings/theme-3.png`, import.meta.url).href },
         { id: '4', name: '风格4', url: new URL(`../../assets/images/components/page-settings/theme-4.png`, import.meta.url).href },
         { id: '5', name: '风格5', url: new URL(`../../assets/images/components/page-settings/theme-5.png`, import.meta.url).href },
-        { id: '6', name: '风格6', url: new URL(`../../assets/images/components/page-settings/theme-6.png`, import.meta.url).href },
     ],
     bottom_navigation: [
         { name: '显示', value: '1' },
diff --git a/src/components/page-settings/page-setting.vue b/src/components/page-settings/page-setting.vue
index d3a0335e..44e88dc1 100644
--- a/src/components/page-settings/page-setting.vue
+++ b/src/components/page-settings/page-setting.vue
@@ -23,9 +23,9 @@ const default_data = {
     header_background_direction: '180deg',
     header_background_img_style: 2,
     header_background_img_url: [],
-    header_background_title_color: '#000',
+    header_background_title_color: '#333',
     header_background_title_typeface: '500',
-    header_background_title_size: 14,
+    header_background_title_size: 16,
     function_buttons_type: 'black',
     immersive_style: false,
     up_slide_display: true,
@@ -56,16 +56,10 @@ const default_data = {
 const default_config = {
     style: {
         theme_1: {},
-        theme_2: {
-        },
-        theme_3: {
-        },
-        theme_4: {
-        },
-        theme_5: {
-        },
-        theme_6: {
-        },
+        theme_2: {},
+        theme_3: {},
+        theme_4: {},
+        theme_5: {},
     },
 };
 const form = ref(props.value);
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index 28015ef6..85b4232a 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -54,7 +54,7 @@
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">
-                    <color-text-size-group v-model:color="form.background_title_color" v-model:typeface="form.background_title_typeface" v-model:size="form.background_title_size" default-color="#000000"></color-text-size-group>
+                    <color-text-size-group v-model:color="form.header_background_title_color" v-model:typeface="form.header_background_title_typeface" v-model:size="form.header_background_title_size" default-color="#000000"></color-text-size-group>
                 </el-form-item>
             </card-container>
         </el-form>
@@ -91,8 +91,8 @@ const common_styles_update = (val: Object) => {
     form.value.common_style = val;
 };
 const mult_color_picker_event = (arry: color_list[], type: number) => {
-    form.value.background_color_list = arry;
-    form.value.background_direction = type.toString();
+    form.value.header_background_color_list = arry;
+    form.value.header_background_direction = type.toString();
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/layout/components/main/default/header-nav.ts b/src/layout/components/main/default/header-nav.ts
index 68b42c46..f15c4b2c 100644
--- a/src/layout/components/main/default/header-nav.ts
+++ b/src/layout/components/main/default/header-nav.ts
@@ -59,10 +59,10 @@ const defaultFooterNav: DefaultFooterNav = {
     content: {
         theme: '1',
         logo: [],
-        title: '',
+        title: '新建页面',
         link: {},
         indicator_location: 'center',
-        positioning_name: '',
+        positioning_name: '默认定位名称',
         is_arrows_show: true,
         is_center: false,
         is_icon_show: true,
@@ -91,9 +91,9 @@ const defaultFooterNav: DefaultFooterNav = {
         header_background_direction: '180deg',
         header_background_img_style: 2,
         header_background_img_url: [],
-        header_background_title_color: '#000',
+        header_background_title_color: '#333',
         header_background_title_typeface: '500',
-        header_background_title_size: 14,
+        header_background_title_size: 16,
         function_buttons_type: 'black',
         immersive_style: false,
         up_slide_display: true,