sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改页面设置的显示

v1.0.0
于肖磊 2024-08-29 18:35:17 +08:00
parent e890abff42
commit 4948abd3b0
8 changed files with 239 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/model-search/index.ts
View File

@ -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;
}

37
src/components/model-search/model-search-content.vue
View File

@ -54,31 +54,11 @@
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
interface Props {
value: search_content;
}
const props = withDefaults(defineProps<Props>(), {
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 props = defineProps({
value: {
type: Object,
default: () => ({}),
},
});
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>

15
src/components/model-search/model-search-styles.vue
View File

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

21
src/components/page-settings/index.vue
View File

@ -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'">
<image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:3.2rem;height:3.2rem;"></image-empty>
<template v-if="form.theme == '2' || form.theme == '3'">
<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 {
max-height: 3.2rem;
.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>

55
src/components/page-settings/page-content.vue
View File

@ -5,36 +5,51 @@
<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'">
<el-form-item v-if="form.theme == '2'" label="logo">
<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">
<upload v-model="form.logo" :limit="1"></upload>
</el-form-item>
<el-form-item label="页面标题">
<el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
</el-form-item>
<el-form-item label="链接地址">
<el-form-item v-if="form.theme == '3'" label="链接地址">
<url-value v-model="form.link"></url-value>
</el-form-item>
<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-tooltip>
<el-tooltip content="居中" placement="top" effect="light">
<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-tooltip>
</el-radio-group>
</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>
<el-form-item label="链接地址">
<url-value v-model="form.link"></url-value>
</el-form-item>
<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-tooltip>
<el-tooltip content="居中" placement="top" effect="light">
<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-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>

80
src/components/page-settings/page-setting.vue
View File

@ -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',
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,
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_2: {
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,
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',

20
src/components/page-settings/page-styles.vue
View File

@ -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']);
// 默认值

105
src/layout/components/main/default/header-nav.ts
View File

@ -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;
background_color_list: color_list[];
background_direction: string;
background_img_style: number;
background_img_url: uploadList[];
background_title_color: string,
background_title_typeface: string,
background_title_size: number,
header_background_type: string;
header_background_color_list: color_list[];
header_background_direction: string;
header_background_img_style: number;
header_background_img_url: uploadList[];
header_background_title_color: string,
header_background_title_typeface: string,
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',
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,
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,
},
common_style: defaultCommon,
},
};