修改页面设置处理逻辑

src/components/page-settings/index.vue

@@ -5,8 +5,8 @@
                 <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 mlr-12 mt-6">
-                <div class="flex-row align-c js-sb">
+                <div class="flex-row align-c jc-sb gap-16">
-                    <div v-if="['1', '2', '3'].includes(form.theme)" class="flex-row align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
+                    <div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1 flex-row align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center' }, 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>
@@ -17,7 +17,7 @@
                             </div>
                         </template>
                     </div>
-                    <div v-else-if="['4', '5'].includes(form.theme)" class="flex-row align-c h gap-10">
+                    <div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row 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 == '1'" name="arrow-right" size="12" color="0"></icon>

src/components/page-settings/page-content.vue

@@ -84,7 +84,12 @@ const props = defineProps({
         default: () => ({}),
     },
 });
-const form = reactive(props.value);
+const form = ref(props.value);
+
+watchEffect(() => {
+    form.value = props.value;
+});
+
 const base_list = reactive({
     themeList: [
         { id: '1', name: '风格1', url: new URL(`../../assets/images/components/page-settings/theme-1.png`, import.meta.url).href },
@@ -96,13 +101,13 @@ const base_list = reactive({
 });
 
 const icon_setting_remove = (index: number) => {
-    form.icon_setting.splice(index, 1);
+    form.value.icon_setting.splice(index, 1);
 };
 const icon_setting_sort = (item: any) => {
-    form.icon_setting = item;
+    form.value.icon_setting = item;
 };
 const add = () => {
-    form.icon_setting.push({
+    form.value.icon_setting.push({
         id: get_math(),
         img: [],
         icon: '',

src/components/page-settings/page-setting.vue

@@ -8,6 +8,7 @@
 </template>
 <script setup lang="ts">
 import { cloneDeep } from 'lodash';
+import { get_math } from '@/utils';
 const props = defineProps({
     type: {
         type: String,
@@ -19,40 +20,50 @@ const props = defineProps({
     },
 });
 const default_data = {
-    header_background_type: 'color_image',
+    content: {
-    header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
+        indicator_location: 'flex-start',
-    header_background_direction: '180deg',
+        icon_setting: [
-    header_background_img_style: 2,
+            { id: get_math(), img: [], icon: 'applet-me-message-acquiesce', link: {} },
-    header_background_img: [],
+        ],
-    header_background_title_color: '#333',
-    header_background_title_typeface: '500',
-    header_background_title_size: 16,
-    function_buttons_type: 'black',
-    immersive_style: '0',
-    up_slide_display: '1',
-    icon_color: '#ccc',
-    button_inner_color: '#fff',
-    search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
-    search_botton_direction: '90deg',
-    search_botton_background_img_style: '',
-    search_botton_background_img: [],
-    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,
     },
+    style: {
+        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: [],
+        header_background_title_color: '#333',
+        header_background_title_typeface: '500',
+        header_background_title_size: 16,
+        function_buttons_type: 'black',
+        immersive_style: '0',
+        up_slide_display: '1',
+        icon_color: '#ccc',
+        button_inner_color: '#fff',
+        search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
+        search_botton_direction: '90deg',
+        search_botton_background_img_style: '',
+        search_botton_background_img: [],
+        search_button_radius: {
+            radius: 16,
+            radius_top_left: 16,
+            radius_top_right: 16,
+            radius_bottom_left: 16,
+            radius_bottom_right: 16,
+        },
+        img_size: '18',
+        img_space: '15',
+        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: {
@@ -63,27 +74,19 @@ const default_config = {
             style: {}
         },
         theme_2: {
-            content: {
+            content: {},
-                indicator_location: 'flex-start',
-            },
             style: {}
         },
         theme_3: {
-            content: {
+            content: {},
-                indicator_location: 'flex-start',
-            },
             style: {}
         },
         theme_4: {
-            content: {
+            content: {},
-                indicator_location: 'flex-start',
-            },
             style: {}
         },
         theme_5: {
-            content: {
+            content: {},
-                indicator_location: 'flex-start',
-            },
             style: {}
         },
     },
@@ -91,8 +94,8 @@ const default_config = {
 const form = ref(props.value);
 const change_theme = (val: string) => {
     if (val) {
-        form.value.style = Object.assign({}, form.value.style, cloneDeep(default_data), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].style));
+        form.value.style = Object.assign({}, form.value.style, cloneDeep(default_data.style), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].style));
-        form.value.content = Object.assign({}, form.value.content, cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].content));
+        form.value.content = Object.assign({}, form.value.content, cloneDeep(default_data.content), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].content));
     }
 };
 </script>

src/views/layout/components/main/default/header-nav.ts

@@ -113,8 +113,8 @@ const defaultFooterNav: DefaultFooterNav = {
             radius_bottom_left: 16,
             radius_bottom_right: 16,
         },
-        img_size: '23',
+        img_size: '18',
-        img_space: '25',
+        img_space: '15',
         tips_color: '#ccc',
         hot_words_color: '#000',
         search_border: '#E4E4E4',