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

修改内容显示1

v1.0.0
于肖磊 2024-10-17 15:10:25 +08:00
parent 9b72e9c4de
commit e361e314c6
8 changed files with 140 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/common/div-content/index.vue
View File

@ -1,11 +1,21 @@
<template> <template>
<div v-for="(item, index) in diy_data" :key="item.id" :class="model_class(item)" :style="model_style(item)" @click="on_choose(index, item.show_tabs)"> <div v-for="(item, index) in diy_data" :key="item.id" :class="model_class(item)" :style="model_style(item)" @click="on_choose(index, item.show_tabs)">
<div v-if="item.show_tabs == '1'" class="plug-in-right" chosenClass="close"> <div v-if="item.show_tabs == '1'" class="plug-in-right" chosenClass="close">
<el-icon :class="`iconfont ${item.is_enable == '1' ? 'icon-eye' : 'icon-eye-close'}`" @click.stop="set_enable(index)" /> <div class="plug-in-icon" @click.stop="set_enable(index)">
<el-icon class="iconfont icon-del" @click.stop="del(index)" /> <icon :name="`${item.is_enable == '1' ? 'eye' : 'eye-close'}`" size="14" color="f" />
<el-icon :class="['iconfont icon-copy', { disabled: props.isTabs }]" @click.stop="copy(index)" /> </div>
<el-icon :class="['iconfont', 'icon-arrow-top', icon_arrow_disable(item.key, index, 'moveUp')]" @click.stop="moveUp(index, arrow_disable_method(item.key, index, 'moveUp'))" /> <div class="plug-in-icon" @click.stop="del(index)">
<el-icon :class="['iconfont', 'icon-arrow-bottom', icon_arrow_disable(item.key, index, 'moveDown')]" @click.stop="moveDown(index, arrow_disable_method(item.key, index, 'moveDown'))" /> <icon name="del" size="14" color="f" />
</div>
<div :class="['plug-in-icon', { 'disabled': props.isTabs }]" @click.stop="copy(index)">
<icon name="copy" size="14" color="f" />
</div>
<div :class="['plug-in-icon plug-in-icon-arrow flex', icon_arrow_disable(item.key, index, 'moveUp')]" @click.stop="moveUp(index, arrow_disable_method(item.key, index, 'moveUp'))">
<icon name="arrow-top" size="14" color="f" />
</div>
<div :class="['plug-in-icon plug-in-icon-arrow flex', icon_arrow_disable(item.key, index, 'moveDown')]" @click.stop="moveDown(index, arrow_disable_method(item.key, index, 'moveDown'))">
<icon name="arrow-bottom" size="14" color="f" />
</div>
</div> </div>
<div class="plug-in-name">{{ item.name }}</div> <div class="plug-in-name">{{ item.name }}</div>
<div class="main-content" :class="{ 'plug-in-close': item.is_enable != '1' }" :style="mainContentStyle"> <div class="main-content" :class="{ 'plug-in-close': item.is_enable != '1' }" :style="mainContentStyle">
@ -368,15 +378,14 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
padding: 2rem 1.2rem; padding: 2rem 1.2rem;
color: #fff; color: #fff;
border-radius: 0.4rem; border-radius: 0.4rem;
& > i { & > .plug-in-icon {
cursor: pointer; cursor: pointer;
} }
& > i.disabled { & > .plug-in-icon.disabled {
color: #5db2ff; color: #5db2ff;
cursor: not-allowed; cursor: not-allowed;
} }
& .icon-arrow-top, & .plug-in-icon-arrow {
& .icon-arrow-bottom {
height: 0.9rem; height: 0.9rem;
} }
} }

4
src/components/common/upload-icon/index.vue
View File

@ -17,7 +17,9 @@
</el-dialog> </el-dialog>
<div class="search-icon re" :style="'height:' + upload_size + ';width:' + upload_size + ';'" @click="icon_click"> <div class="search-icon re" :style="'height:' + upload_size + ';width:' + upload_size + ';'" @click="icon_click">
<icon :name="!isEmpty(icon_class) ? icon_class : 'add'" :size="Number(size) / 2 + ''" color="c"></icon> <icon :name="!isEmpty(icon_class) ? icon_class : 'add'" :size="Number(size) / 2 + ''" color="c"></icon>
<el-icon v-if="!isEmpty(icon_class)" class="iconfont icon-close-fillup size-16 abs cr-c top-de-5 right-de-5" @click.stop="remove_icon" /> <div v-if="!isEmpty(icon_class)" class="abs top-de-5 right-de-5" @click.stop="remove_icon">
<icon name="close-fillup" size="16" color="c"></icon>
</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

9
src/components/model-custom/components/index.scss
View File

@ -3,6 +3,15 @@
overflow: hidden; overflow: hidden;
:deep(.el-collapse) { :deep(.el-collapse) {
border: 0; border: 0;
.el-collapse-item__header {
height: 20px;
font-size: 14px;
color: #606266;
font-weight: 400;
}
.el-collapse-item__wrap {
margin-top: 12px;
}
.el-collapse-item__wrap, .el-collapse-item__wrap,
.el-collapse-item__header { .el-collapse-item__header {
border: 0; border: 0;

2
src/components/model-title/index.vue
View File

@ -10,7 +10,7 @@
<template v-else-if="!isEmpty(form.icon_class)"> <template v-else-if="!isEmpty(form.icon_class)">
<icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon> <icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon>
</template> </template>
<div class="pr-15 nowrap" :style="title_style">{{ form.title }}</div> <div v-if="!isEmpty(form.title)" class="pr-15 nowrap" :style="title_style">{{ form.title }}</div>
</div> </div>
<div class="flex-row gap-10 align-c right-0 abs"> <div class="flex-row gap-10 align-c right-0 abs">
<template v-if="form.keyword_show == '1'"> <template v-if="form.keyword_show == '1'">

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

@ -9,38 +9,59 @@
<img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == '0' ? 0 : 100})`" src="@/assets/images/layout/main/main-top.png" /> <img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == '0' ? 0 : 100})`" src="@/assets/images/layout/main/main-top.png" />
</div> </div>
<div class="model-head tc re mlr-12 mt-6"> <div class="model-head tc re mlr-12 mt-6">
<div class="model-head-content flex-row align-c jc-sb gap-16 re"> <div class="flex-col" :style="`gap: ${ new_style.data_alone_row_space }px`">
<div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1"> <div class="model-head-content flex-row align-c jc-sb gap-16 re">
<div class="flex-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]"> <div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1">
<template v-if="['2', '3'].includes(form.theme) && form.logo.length > 0"> <div class="flex-1 flex-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
<div class="logo-outer-style"> <template v-if="['2', '3'].includes(form.theme) && form.logo.length > 0">
<img class="logo-style" :src="form.logo[0].url" /> <div class="logo-outer-style">
</div> <img class="logo-style" :src="form.logo[0].url" />
</template> </div>
<div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div> </template>
<template v-if="['3', '5'].includes(form.theme)"> <div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
<template v-if="['3', '5'].includes(form.theme) && !is_search_alone_row">
<div class="flex-1">
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
</div>
</template>
</div>
</div>
<div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
<div class="flex-1 flex-row gap-2" :style="'color:' + new_style.position_color">
<template v-if="form.is_location_left_icon_show == '1'">
<image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_left_icon" size="12"></icon>
</template>
<span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span>
<template v-if="form.is_location_right_icon_show == '1'">
<image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_right_icon" size="12"></icon>
</template>
</div>
<template v-if="['5'].includes(form.theme) && !is_search_alone_row">
<div class="flex-1"> <div class="flex-1">
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search> <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
</div> </div>
</template> </template>
</div> </div>
</div> <div v-if="!isEmpty(form.icon_setting) && !is_icon_alone_row" class="flex-row align-c" :class="'gap-' + new_style.img_space">
<div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10"> <div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }">
<div class="flex-row gap-2" :style="'color:' + new_style.position_color"> <image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty>
<icon name="location" size="12"></icon> <icon v-else :name="item.icon" :size="new_style.img_size + ''" :color="new_style.img_color"></icon>
<span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span> </div>
<icon v-if="form.is_arrows_show == '1'" name="arrow-bottom" size="12"></icon>
</div> </div>
<template v-if="['5'].includes(form.theme)"> </div>
<div v-if="is_search_alone_row || is_icon_alone_row" class="model-head-content flex-row align-c gap-16">
<template v-if="['3', '5'].includes(form.theme) && is_search_alone_row">
<div class="flex-1"> <div class="flex-1">
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search> <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
</div> </div>
</template> </template>
</div> <div v-if="!isEmpty(form.icon_setting) && is_icon_alone_row" class="flex-row align-c" :class="'gap-' + new_style.img_space">
<div v-if="!isEmpty(form.icon_setting)" class="flex-row align-c" :class="'gap-' + new_style.img_space"> <div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }">
<div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }"> <image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty>
<image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty> <icon v-else :name="item.icon" :size="new_style.img_size + ''" :color="new_style.img_color"></icon>
<icon v-else :name="item.icon" :size="new_style.img_size + ''" :color="new_style.img_color"></icon> </div>
</div> </div>
</div> </div>
</div> </div>
@ -69,6 +90,10 @@ const page_settings = () => {
}; };
const form = computed(() => props.pageData.com_data.content); const form = computed(() => props.pageData.com_data.content);
const new_style = computed(() => props.pageData.com_data.style); const new_style = computed(() => props.pageData.com_data.style);
const is_search_alone_row = computed(() => form.value.data_alone_row_value.includes('search'));
const is_icon_alone_row = computed(() => form.value.data_alone_row_value.includes('icon'));
const position = computed(() => (new_style.value.up_slide_display == '1' ? 'absolute' : 'relative')); const position = computed(() => (new_style.value.up_slide_display == '1' ? 'absolute' : 'relative'));
const roll_style = computed(() => { const roll_style = computed(() => {
let style = ``; let style = ``;
@ -138,13 +163,18 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
} }
} }
.model-head { .model-head {
height: 3.2rem; // height: 3.2rem;
overflow: hidden; overflow: hidden;
.model-head-content { .model-head-content {
height: 3.2rem; height: 3.2rem;
.location-name { .location-name {
line-height: 3.2rem;
max-width: 15rem; max-width: 15rem;
} }
:deep(.el-image) {
width: 100%;
max-height: 3.2rem;
}
} }
} }
.model-head-icon { .model-head-icon {

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

@ -44,11 +44,35 @@
<el-form-item label="定位名称"> <el-form-item label="定位名称">
<el-input v-model="form.positioning_name" placeholder="请输入默认定位名称" clearable></el-input> <el-input v-model="form.positioning_name" placeholder="请输入默认定位名称" clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="箭头按钮">
<el-switch v-model="form.is_arrows_show" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
</template> </template>
<el-form-item label="数据换行">
<el-checkbox-group v-model="form.data_alone_row_value">
<el-checkbox v-for="item in base_list.list_show_list.filter(item => item.type.includes(form.theme))" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</card-container> </card-container>
<template v-if="['4', '5'].includes(form.theme)">
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="左侧图标">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_location_left_icon_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_location_left_icon_show == '1'" class="mt-10 w">
<el-col :span="24"><upload v-model="form.location_left_img" v-model:icon-value="form.location_left_icon" is-icon :limit="1" size="50"></upload></el-col>
</el-row>
</el-form-item>
<el-form-item label="右侧图标">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_location_right_icon_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_location_right_icon_show == '1'" class="mt-10 w">
<el-col :span="24"><upload v-model="form.location_right_img" v-model:icon-value="form.location_right_icon" is-icon :limit="1" size="50"></upload></el-col>
</el-row>
</el-form-item>
</card-container>
</template>
<div class="bg-f5 divider-line" /> <div class="bg-f5 divider-line" />
<template v-if="['3', '5'].includes(form.theme)"> <template v-if="['3', '5'].includes(form.theme)">
<model-search-content :value="form"></model-search-content> <model-search-content :value="form"></model-search-content>
@ -97,7 +121,11 @@ const base_list = reactive({
{ id: '3', name: '风格3', url: new URL(`../../assets/images/components/page-settings/theme-3.png`, import.meta.url).href }, { 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: '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: '5', name: '风格5', url: new URL(`../../assets/images/components/page-settings/theme-5.png`, import.meta.url).href },
] ],
list_show_list: [
{ name: '搜索', value: 'search', type: ['3', '5'] },
{ name: '右侧图标', value: 'icon', type: ['1', '2', '3', '4', '5' ] },
],
}); });
const icon_setting_remove = (index: number) => { const icon_setting_remove = (index: number) => {

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

@ -25,10 +25,10 @@
<el-radio value="1">白色</el-radio> <el-radio value="1">白色</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称"> <el-form-item v-if="['1', '2'].includes(page_content.theme)" label="标题名称">
<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> <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> </el-form-item>
<el-form-item v-if="['4', '5'].includes(search_content.theme)" label="定位颜色"> <el-form-item v-if="['4', '5'].includes(page_content.theme)" label="定位颜色">
<color-picker v-model="form.position_color" default-color="#333"></color-picker> <color-picker v-model="form.position_color" default-color="#333"></color-picker>
</el-form-item> </el-form-item>
<el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式"> <el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
@ -58,6 +58,9 @@
<icon name="miaosha-hdgz" size="12" color="#999"></icon> <icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip> </el-tooltip>
</el-form-item> </el-form-item>
<el-form-item v-if="page_content.data_alone_row_value.length > 0" label="换行间距">
<slider v-model="form.data_alone_row_space" :max="100"></slider>
</el-form-item>
</card-container> </card-container>
<div class="bg-f5 divider-line" /> <div class="bg-f5 divider-line" />
<card-container> <card-container>
@ -111,14 +114,14 @@ const is_have_tabs = computed(() => {
const emit = defineEmits(['update:value']); const emit = defineEmits(['update:value']);
const state = reactive({ const state = reactive({
form: props.value, form: props.value,
search_content: props.content, page_content: props.content,
}); });
// 如果需要解构，确保使用toRefs // 如果需要解构，确保使用toRefs
const { form, search_content } = toRefs(state); const { form, page_content } = toRefs(state);
// 监听属性变化 // 监听属性变化
watchEffect(() => { watchEffect(() => {
form.value = props.value; form.value = props.value;
search_content.value = props.content; page_content.value = props.content;
}); });
const header_background_type_change_event = (val: any) => { const header_background_type_change_event = (val: any) => {

18
src/config/const/header-nav.ts
View File

@ -11,11 +11,17 @@ interface DefaultFooterNav {
logo: uploadList[]; logo: uploadList[];
title: string; title: string;
link: object; link: object;
data_alone_row_value: string[];
indicator_location: string; indicator_location: string;
bottom_navigation_show: string; bottom_navigation_show: string;
positioning_name: string; positioning_name: string;
icon_setting: { id: string; img: uploadList[]; link: object; icon: string }[]; icon_setting: { id: string; img: uploadList[]; link: object; icon: string }[];
is_arrows_show: string; is_location_left_icon_show: string,
location_left_img: uploadList[],
location_left_icon: string,
is_location_right_icon_show: string,
location_right_img: uploadList[],
location_right_icon: string,
is_center: string; is_center: string;
is_icon_show: string; is_icon_show: string;
icon_link: object; icon_link: object;
@ -40,6 +46,7 @@ interface DefaultFooterNav {
header_background_title_typeface: string; header_background_title_typeface: string;
header_background_title_size: number; header_background_title_size: number;
function_buttons_type: string; function_buttons_type: string;
data_alone_row_space: number;
immersive_style: string; immersive_style: string;
up_slide_display: string; up_slide_display: string;
up_slide_background_color_list: color_list[]; up_slide_background_color_list: color_list[];
@ -72,10 +79,16 @@ const defaultFooterNav: DefaultFooterNav = {
logo: [], logo: [],
title: '新建页面', title: '新建页面',
link: {}, link: {},
data_alone_row_value: [],
indicator_location: 'center', indicator_location: 'center',
positioning_name: '未选择位置', positioning_name: '未选择位置',
icon_setting: [{ id: get_math(), img: [], icon: 'applet-me-message-acquiesce', link: { name: '我的消息', page: '/pages/message/message' } }], icon_setting: [{ id: get_math(), img: [], icon: 'applet-me-message-acquiesce', link: { name: '我的消息', page: '/pages/message/message' } }],
is_arrows_show: '1', is_location_left_icon_show: '1',
location_left_img: [],
location_left_icon: 'location',
is_location_right_icon_show: '1',
location_right_img: [],
location_right_icon: 'arrow-bottom',
is_center: '0', is_center: '0',
is_icon_show: '1', is_icon_show: '1',
icon_link: {}, icon_link: {},
@ -100,6 +113,7 @@ const defaultFooterNav: DefaultFooterNav = {
header_background_title_color: '#333', header_background_title_color: '#333',
header_background_title_typeface: '500', header_background_title_typeface: '500',
header_background_title_size: 14, header_background_title_size: 14,
data_alone_row_space: 5,
function_buttons_type: '0', function_buttons_type: '0',
immersive_style: '0', immersive_style: '0',
up_slide_display: '1', up_slide_display: '1',