修改页面设置的显示

src/components/model-search/index.ts

@@ -1,34 +0,0 @@
-interface hot_word_list {
-    id: string;
-    value: string;
-    color: string;
-}
-interface search_content {
-    is_center: boolean;
-    is_icon_show: boolean;
-    icon_src: string;
-    icon_img_src: uploadList[];
-    icon_class: string;
-    search_botton_src: uploadList[];
-    search_botton_icon: string;
-    is_tips_show: boolean;
-    tips: string;
-    is_search_show: boolean;
-    search_type: string;
-    search_tips: string;
-    hot_word_list: hot_word_list[];
-}
-interface search_styles {
-    icon_color: string;
-    button_inner_color: string;
-    color_list: color_list[];
-    direction: string;
-    background_img_style: string;
-    background_img_url: uploadList[];
-    search_button_radius: object;
-    tips_color: string;
-    hot_words_color: string;
-    search_border: string;
-    search_border_radius: object;
-    common_style: object;
-}

src/components/model-search/model-search-content.vue

@@ -54,31 +54,11 @@
 </template>
 <script setup lang="ts">
 import { get_math } from '@/utils';
-interface Props {
+const props = defineProps({
-    value: search_content;
+    value: {
-}
+        type: Object,
-const props = withDefaults(defineProps<Props>(), {
+        default: () => ({}),
-    value: () => ({
-        is_center: false,
-        is_icon_show: true,
-        icon_src: '',
-        icon_img_src: [],
-        icon_class: '',
-        search_botton_src: [],
-        search_botton_icon: '',
-        is_tips_show: true,
-        tips: '请输入搜索内容',
-        is_search_show: false,
-        search_type: 'text',
-        search_tips: '搜索',
-        hot_word_list: [
-            {
-                id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
-                value: '',
-                color: '#000000',
     },
-        ],
-    }),
 });
 
 const state = reactive({
@@ -97,12 +77,17 @@ const add = () => {
 const remove = (index: number) => {
     form.value.hot_word_list.splice(index, 1);
 };
+interface hot_word_list {
+    id: string;
+    value: string;
+    color: string;
+}
 // 拖拽更新之后，更新数据
 const on_sort = (new_list: hot_word_list[]) => {
     form.value.hot_word_list = new_list;
 };
 const search_color_change = (color: string, old_hot_word: hot_word_list) => {
-    const index = form.value.hot_word_list.findIndex((item) => item.id == old_hot_word.id);
+    const index = form.value.hot_word_list.findIndex((item: { id: string; }) => item.id == old_hot_word.id);
     (<arrayIndex>form.value.hot_word_list)[index].color = color;
 };
 </script>

src/components/model-search/model-search-styles.vue

@@ -61,11 +61,16 @@
 </template>
 <script setup lang="ts">
 import { isEmpty, pick } from 'lodash';
-interface Props {
+const props = defineProps({
-    value: search_styles;
+    value: {
-    content: search_content;
+        type: Object,
-}
+        default: () => ({}),
-const props = defineProps<Props>();
+    },
+    content: {
+        type: Object,
+        default: () => ({}),
+    },
+});
 
 const state = reactive({
     form: props.value,

src/components/page-settings/index.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="model-top">
         <div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
-            <div class="pb-10 pl-6 pr-13 w">
+            <div class="pb-12 pl-6 pr-13 w">
                 <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'">
+                    <template v-if="form.theme == '2' || form.theme == '3'">
-                        <image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:3.2rem;height:3.2rem;"></image-empty>
+                        <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>{{ form?.title || '新建页面' }}</div>
+                    <div v-if="form.theme == '1' || form.theme == '2'">{{ form?.title || '新建页面' }}</div>
                 </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')" />
@@ -88,7 +88,16 @@ const text_style = computed(() => `font-weight:${ new_style.value.background_tit
     z-index: 1;
     box-sizing: border-box;
 }
-.logo-style {
+.logo-outer-style {
+    height: 3.2rem;
+    .logo-style {
         max-height: 3.2rem;
+        max-width: 100%;
+        :deep(.image-slot) {
+            height: 3.2rem;
+            width: 3.2rem;
+        }
+    }
 }
+
 </style>

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

@@ -5,10 +5,14 @@
                 <el-form-item label="选择风格">
                     <theme-select v-model="form.theme" :data="base_list.themeList" @update:model-value="themeChange"></theme-select>
                 </el-form-item>
-                <template v-if="form.theme == '1' || form.theme == '2'">
+                <template v-if="form.theme == '1' || form.theme == '2' || form.theme == '3'">
-                    <el-form-item v-if="form.theme == '2'" label="logo">
+                    <el-form-item v-if="form.theme == '2' || form.theme == '3'" label="logo">
                         <upload v-model="form.logo" :limit="1"></upload>
                     </el-form-item>
+                    <el-form-item v-if="form.theme == '3'" label="链接地址">
+                        <url-value v-model="form.link"></url-value>
+                    </el-form-item>
+                    <template v-if="form.theme == '1' || form.theme == '2'">
                         <el-form-item label="页面标题">
                             <el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
                         </el-form-item>
@@ -18,23 +22,34 @@
                         <el-form-item label="展示位置">
                             <el-radio-group v-model="form.indicator_location" is-button>
                                 <el-tooltip content="左对齐" placement="top" effect="light">
-                                <el-radio-button value="flex-start"><icon name="iconfont icon-left"></icon></el-radio-button>
+                                    <el-radio-button value="flex-start">
+                                        <icon name="iconfont icon-left"></icon>
+                                    </el-radio-button>
                                 </el-tooltip>
                                 <el-tooltip content="居中" placement="top" effect="light">
-                                <el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
+                                    <el-radio-button value="center">
+                                        <icon name="iconfont icon-center"></icon>
+                                    </el-radio-button>
                                 </el-tooltip>
                                 <el-tooltip content="右对齐" placement="top" effect="light">
-                                <el-radio-button value="flex-end"><icon name="iconfont icon-right"></icon></el-radio-button>
+                                    <el-radio-button value="flex-end">
+                                        <icon name="iconfont icon-right"></icon>
+                                    </el-radio-button>
                                 </el-tooltip>
                             </el-radio-group>
                         </el-form-item>
                     </template>
+                </template>
             </card-container>
             <div class="bg-f5 divider-line" />
+            <template v-if="form.theme == '3'">
+                <model-search-content :value="form"></model-search-content>
+            </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">
-                        <el-radio v-for="item in base_list.bottom_navigation" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
+                        <el-radio v-for="item in base_list.bottom_navigation" :key="item.value" :value="item.value">{{item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
             </card-container>

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

@@ -4,7 +4,7 @@
             <page-content :value="value.content" @update:change-theme="change_theme"></page-content>
         </template>
         <template v-else-if="type == '2'">
-            <page-styles :value="value.style"></page-styles>
+            <page-styles :value="value.style" :content="value.content"></page-styles>
         </template>
     </div>
 </template>
@@ -22,30 +22,76 @@ const props = defineProps({
 const default_config = {
     style: {
         theme_1: {
-            background_type: 'color_image',
+            header_background_type: 'color_image',
-            background_color_list: [{ color: '#fff', color_percentage: undefined }],
+            header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
-            background_direction: '180deg',
+            header_background_direction: '180deg',
-            background_img_style: 2,
+            header_background_img_style: 2,
-            background_img_url: [],
+            header_background_img_url: [],
-            background_title_color: '#000',
+            header_background_title_color: '#000',
-            background_title_typeface: '500',
+            header_background_title_typeface: '500',
-            background_title_size: 14,
+            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_2: {
-            background_type: 'color_image',
+            header_background_type: 'color_image',
-            background_color_list: [{ color: '#fff', color_percentage: undefined }],
+            header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
-            background_direction: '180deg',
+            header_background_direction: '180deg',
-            background_img_style: 2,
+            header_background_img_style: 2,
-            background_img_url: [],
+            header_background_img_url: [],
-            background_title_color: '#000',
+            header_background_title_color: '#000',
-            background_title_typeface: '500',
+            header_background_title_typeface: '500',
-            background_title_size: 14,
+            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',

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

@@ -15,13 +15,19 @@
                                 <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-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-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-radio-button value="2">
+                                            <icon name="spread-over"></icon>
+                                        </el-radio-button>
                                     </el-tooltip>
                                 </el-radio-group>
                             </div>
@@ -53,6 +59,10 @@
             </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>
+        <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" />
     </div>
 </template>
@@ -64,6 +74,10 @@ const props = defineProps({
             return {};
         },
     },
+    content: {
+        type: Object,
+        default: () => { },
+    },
 });
 const emit = defineEmits(['update:value']);
 // 默认值

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

@@ -1,5 +1,10 @@
+import { get_math } from '@/utils';
 import defaultCommon from './index';
-
+interface hot_word_list {
+    id: string;
+    value: string;
+    color: string;
+}
 interface DefaultFooterNav {
     content: {
         theme: string;
@@ -8,19 +13,43 @@ interface DefaultFooterNav {
         link: object;
         indicator_location: string;
         bottom_navigation_show: string;
+        is_center: boolean;
+        is_icon_show: boolean;
+        icon_src: string;
+        icon_img_src: uploadList[];
+        icon_class: string;
+        search_botton_src: uploadList[];
+        search_botton_icon: string;
+        is_tips_show: boolean;
+        tips: string;
+        is_search_show: boolean;
+        search_type: string;
+        search_tips: string;
+        hot_word_list: hot_word_list[];
     };
     style: {
-        background_type: string;
+        header_background_type: string;
-        background_color_list: color_list[];
+        header_background_color_list: color_list[];
-        background_direction: string;
+        header_background_direction: string;
-        background_img_style: number;
+        header_background_img_style: number;
-        background_img_url: uploadList[];
+        header_background_img_url: uploadList[];
-        background_title_color: string,
+        header_background_title_color: string,
-        background_title_typeface: string,
+        header_background_title_typeface: string,
-        background_title_size: number,
+        header_background_title_size: number,
         function_buttons_type: string,
         immersive_style: boolean,
         up_slide_display: boolean,
+        icon_color: string;
+        button_inner_color: string;
+        color_list: color_list[];
+        direction: string;
+        background_img_style: string;
+        background_img_url: uploadList[];
+        search_button_radius: object;
+        tips_color: string;
+        hot_words_color: string;
+        search_border: string;
+        search_border_radius: object;
         common_style: object;
     }
 }
@@ -31,20 +60,62 @@ const defaultFooterNav: DefaultFooterNav = {
         title: '',
         link: {},
         indicator_location: 'center',
+        is_center: false,
+        is_icon_show: true,
+        icon_src: '',
+        icon_img_src: [],
+        icon_class: '',
+        search_botton_src: [],
+        search_botton_icon: '',
+        is_tips_show: true,
+        tips: '请输入搜索内容',
+        is_search_show: false,
+        search_type: 'text',
+        search_tips: '搜索',
+        hot_word_list: [
+            {
+                id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
+                value: '',
+                color: '#000000',
+            }
+        ],
         bottom_navigation_show: '1'
     },
     style: {
-        background_type: 'color_image',
+        header_background_type: 'color_image',
-        background_color_list: [{ color: '#fff', color_percentage: undefined }],
+        header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
-        background_direction: '180deg',
+        header_background_direction: '180deg',
-        background_img_style: 2,
+        header_background_img_style: 2,
-        background_img_url: [],
+        header_background_img_url: [],
-        background_title_color: '#000',
+        header_background_title_color: '#000',
-        background_title_typeface: '500',
+        header_background_title_typeface: '500',
-        background_title_size: 14,
+        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,
+        },
         common_style: defaultCommon,
     },
 };