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

修改页面显示

v1.0.0
于肖磊 2024-10-10 16:16:31 +08:00
parent de554083dc
commit 13a0226a18
16 changed files with 232 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/custom/panel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

2
src/components/common/custom-module/model-image/index.vue
View File

@ -15,7 +15,7 @@ const props = defineProps({
required: true
},
sourceList: {
type: [Object, Array],
type: Object,
default: () => {
return {};
}

44
src/components/common/custom-module/model-panel/index.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="w h re oh" :style="com_style"></div>
</template>
<script setup lang="ts">
import { radius_computer, gradient_handle } from '@/utils';
const props = defineProps({
value: {
type: Object,
default: () => {
return {};
},
required: true
},
sourceList: {
type: Object,
default: () => {
return {};
}
},
isPercentage: {
type: Boolean,
default: false
}
});
// 用于页面判断显示
const form = reactive(props.value);
const com_style = computed(() => {
let style = `${ set_count() } ${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius) }; transform: rotate(${form.panel_rotate}deg);`;
if (form.border_show == '1') {
style += `border: ${form.border_size}px ${form.border_style} ${form.border_color};`;
}
return style;
});
const set_count = () => {
if (props.isPercentage) {
return '';
} else {
return `width: ${ form.com_width }px; height: ${ form.com_height }px;`;
}
};
</script>
<style lang="scss" scoped>
</style>

112
src/components/common/custom-module/model-panel/model-panel-style.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">容器设置</div>
<el-form-item label="背景颜色">
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>
</el-form-item>
<el-form-item label="旋转角度">
<slider v-model="form.panel_rotate" :max="1000"></slider>
</el-form-item>
<el-form-item label="是否置底">
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item label="容器宽度">
<slider v-model="form.com_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="容器高度">
<slider v-model="form.com_height" :max="1000"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">
<el-switch v-model="form.border_show" active-value="1" inactive-value="0" />
</el-form-item>
<template v-if="form.border_show == '1'">
<el-form-item label="边框颜色">
<color-picker v-model="form.border_color" default-color="#FF3F3F"></color-picker>
</el-form-item>
<el-form-item label="边框样式">
<el-radio-group v-model="form.border_style">
<el-radio value="dashed">
<div class="border-style-item" style="border: 1px dashed #979797"></div>
</el-radio>
<el-radio value="solid">
<div class="border-style-item" style="border: 1px solid #979797"></div>
</el-radio>
<el-radio value="dotted">
<div class="border-style-item" style="border: 1px dotted #979797"></div>
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="边框粗细">
<slider v-model="form.border_size" :max="100"></slider>
</el-form-item>
</template>
</card-container>
</el-form>
</div>
</template>
<script setup lang="ts">
import { location_compute } from '@/utils';
import { pick, cloneDeep } from 'lodash';
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
options: {
type: Array<any>,
default: () => [],
},
});
// 默认值
const state = reactive({
diy_data: props.value,
});
// 如果需要解构，确保使用toRefs
const { diy_data } = toRefs(state);
const form = ref(diy_data.value.com_data);
const center_height = defineModel('height', { type: Number, default: 0 });
const bg_radius_change = (radius: any) => {
form.value.bg_radius = Object.assign(form.value.bg_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
};
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry;
form.value.direction = type.toString();
};
watch(
diy_data,
(val) => {
diy_data.value.location.x = location_compute(form.value.com_width, val.location.x, 390);
diy_data.value.location.y = location_compute(form.value.com_height, val.location.y, center_height.value);
diy_data.value.location.record_x = location_compute(form.value.com_width, val.location.record_x, 390);
diy_data.value.location.record_y = location_compute(form.value.com_height, val.location.record_y, center_height.value);
diy_data.value.location.staging_y = location_compute(form.value.com_height, val.location.staging_y, center_height.value);
form.value.staging_height = form.value.com_height;
},
{ immediate: true, deep: true }
);
</script>
<style lang="scss" scoped>
.card.mb-8 {
.el-form-item:last-child {
margin-bottom: 0;
}
}
.border-style-item {
width: 3rem;
height: 2rem;
}
</style>

4
src/components/footer-nav/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="showFooter ? 'br-2 br-primary' : ''" @click="footer_nav_event">
<div class="footer-nav flex-row jc-c align-c" :style="style_container">
<div class="footer-nav" :class="showFooter ? 'br-2 br-primary' : ''" @click="footer_nav_event">
<div class="flex-row jc-c align-c" :style="style_container">
<div class="footer-nav-content flex-row jc-c align-c w" :style="style_img_container">
<ul class="flex-row jc-sa align-c w">
<li v-for="(item, index) in nav_content" :key="index" class="flex-1 flex-col jc-c align-c gap-5" @mouseenter="is_hover = index" @mouseleave="is_hover = 0">

29
src/components/model-custom/components/index-default.ts
View File

@ -36,7 +36,7 @@ export const text_com_data = {
border_size: 1,
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
bottom_up: '1',
bottom_up: '0',
}
// 图片的默认值
export const img_com_data = {
@ -68,7 +68,7 @@ export const img_com_data = {
radius_bottom_right: 0,
},
border_size: 1,
bottom_up: '1',
bottom_up: '0',
}
// 线条的默认值
export const line_com_data = {
@ -120,8 +120,31 @@ export const icon_com_data = {
border_size: 1,
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
bottom_up: '1',
bottom_up: '0',
}
// 面板的默认值
export const panel_com_data = {
com_width: 100,
com_height: 100,
staging_height: 100,
icon_rotate: 0,
border_show: '0',
border_color: '#FF5D5D',
border_style: 'solid',
bg_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
border_size: 1,
direction: '90deg',
color_list: [{ color: '#fff', color_percentage: undefined }],
bottom_up: '0',
}
// 判断两个矩形是否有交集或者被包裹
export const isRectangleIntersecting = (rect1: react1, rect2: react1) => {
// 矩形的格式为 { x, y, width, height }

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

@ -28,8 +28,8 @@
cursor: pointer;
border-radius: 0.5rem;
box-shadow: 0 0 0.5rem 0 rgba(24, 144, 255, 0.3);
transform: scale(1.1);
transition: all 0.2s;
transform: scale(1.05);
transition: all 0.4s;
}
}
.main {

16
src/components/model-custom/components/index.vue
View File

@ -17,7 +17,7 @@
</card-container>
<card-container class="mb-8">
<div class="mb-12">内容设置</div>
<slider v-model="center_height" :max="3000">组件高度</slider>
<slider v-model="center_height" :max="1000">组件高度</slider>
</card-container>
<card-container class="h selected">
<div class="mb-12 flex-row align-c jc-sb">已选组件<span class="clear-selection" @click="cancel">清除选中</span></div>
@ -59,6 +59,9 @@
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-panel>
</template>
</div>
</Vue3DraggableResizable>
</DraggableContainer>
@ -85,7 +88,7 @@
<script setup lang="ts">
import { cloneDeep, isEmpty } from 'lodash';
import { get_math } from '@/utils';
import { text_com_data, img_com_data, line_com_data, icon_com_data, isRectangleIntersecting } from "./index-default";
import { text_com_data, img_com_data, line_com_data, icon_com_data, panel_com_data, isRectangleIntersecting } from "./index-default";
// 删除
const app = getCurrentInstance();
//#region 传递参数和传出数据的处理
@ -123,6 +126,11 @@ const components = reactive([
name: '图标',
com_data: icon_com_data,
},
{
key: 'panel',
name: '面板',
com_data: panel_com_data,
},
],
},
]);
@ -662,7 +670,9 @@ defineExpose({
overflow-y: scroll;
.model-wall {
width: 39rem;
background: #fff;
background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%), linear-gradient(135deg, #e5e5e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e5e5 75%), linear-gradient(135deg, transparent 75%, #e5e5e5 75%);
background-size: 32px 32px;
background-position: 0 0, 16px 0, 16px -16px, 0 16px;
margin: 0 auto;
.drag-area {
height: v-bind(drag_area_height);

15
src/components/model-custom/index.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="custom-other" :style="style_container">
<div ref="container" class="custom-other" :style="style_container">
<div class="w h" :style="style_img_container">
<div class="w h re">
<div v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height)}">
<div v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x * scale, div_width) , 'top': percentage_count(item.location.y * scale, form.height), 'width': percentage_count(item.com_data.com_width * scale, div_width), 'height': percentage_count(item.com_data.com_height * scale, form.height)}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-text>
</template>
@ -15,6 +15,9 @@
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-panel>
</template>
</div>
</div>
</div>
@ -42,15 +45,23 @@ const { form, new_style } = toRefs(state);
const custom_height = computed(() => form.value.height + 'px');
const container = ref<HTMLElement | null>(null);
const div_width = ref(0);
const scale = ref(0);
onMounted(() => {
if (container.value) {
div_width.value = container.value.offsetWidth;
scale.value = div_width.value / 390;
}
});
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
watch(() => new_style.value.common_style, (val) => {
if (container.value) {
div_width.value = container.value.offsetWidth;
scale.value = div_width.value / 390;
}
}, { deep: true });
</script>
<style lang="scss" scoped>
.custom-other {

3
src/components/model-custom/model-custom-content.vue
View File

@ -35,6 +35,9 @@
<template v-else-if="diy_data.key == 'icon'">
<model-icon-style :key="key" v-model:height="center_height" :value="diy_data"></model-icon-style>
</template>
<template v-else-if="diy_data.key == 'panel'">
<model-panel-style :key="key" v-model:height="center_height" :value="diy_data"></model-panel-style>
</template>
<template v-else>
<div class="w h flex align-c bg-f">
<no-data></no-data>

2
src/components/model-data-magic/model-data-magic-content.vue
View File

@ -59,7 +59,7 @@ const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zu
const data_style = {
color_list: [{ color: '#FFD9C3', color_percentage: 0 }, { color: '#FFECE2', color_percentage: 12 }, { color: '#FFFFFF', color_percentage: 30 }],
direction: '180deg',
background_img_style: 2,
background_img_style: '2',
background_img: [],
is_roll: '0',
rotation_direction: 'horizontal',

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

@ -1,7 +1,7 @@
<template>
<div class="model-top">
<div :class="[{ 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
<div class="roll" :style="roll_img_style">
<div class="roll re" :style="roll_img_style">
<div class="w h abs up_slide_bg" :style="up_slide_style">
<div class="w h" :style="up_slide_img_style"></div>
</div>
@ -130,6 +130,7 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
padding-bottom: 0.9rem;
margin: 0 auto;
cursor: pointer;
z-index: 1;
}
.img {
width: 34rem;

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

@ -33,7 +33,7 @@ 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_style: '2',
header_background_img: [],
header_background_title_color: '#333',
header_background_title_typeface: '500',

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

@ -4,7 +4,7 @@
<card-container>
<div class="mb-12">头部样式</div>
<el-form-item label="顶部背景">
<div class="flex-col gap-10">
<div class="w h flex-col gap-10">
<el-radio-group v-model="form.header_background_type" @change="header_background_type_change_event">
<el-radio value="transparent">透明</el-radio>
<el-radio value="color_image">颜色/图片</el-radio>
@ -40,7 +40,7 @@
<el-switch v-model="form.up_slide_display" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="上滑背景">
<div class="flex-col gap-10">
<div class="w h flex-col gap-10">
<mult-color-picker :value="form.up_slide_background_color_list" :type="form.up_slide_background_direction" @update:value="up_slide_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>

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

@ -34,7 +34,7 @@ interface DefaultFooterNav {
header_background_type: string;
header_background_color_list: color_list[];
header_background_direction: string;
header_background_img_style: number;
header_background_img_style: string;
header_background_img: uploadList[];
header_background_title_color: string;
header_background_title_typeface: string;
@ -44,7 +44,7 @@ interface DefaultFooterNav {
up_slide_display: string;
up_slide_background_color_list: color_list[];
up_slide_background_direction: string;
up_slide_background_img_style: number;
up_slide_background_img_style: string;
up_slide_background_img: uploadList[];
icon_color: string;
button_inner_color: string;
@ -91,7 +91,7 @@ const defaultFooterNav: DefaultFooterNav = {
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_style: '2',
header_background_img: [],
header_background_title_color: '#333',
header_background_title_typeface: '500',
@ -101,7 +101,7 @@ const defaultFooterNav: DefaultFooterNav = {
up_slide_display: '1',
up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],
up_slide_background_direction: '180deg',
up_slide_background_img_style: 2,
up_slide_background_img_style: '2',
up_slide_background_img: [],
icon_color: '#ccc',
button_inner_color: '#fff',
@ -110,7 +110,7 @@ const defaultFooterNav: DefaultFooterNav = {
{ color: '#FF3131', color_percentage: undefined },
],
search_botton_direction: '90deg',
search_botton_background_img_style: '',
search_botton_background_img_style: '2',
search_botton_background_img: [],
search_button_radius: {
radius: 16,
@ -131,7 +131,10 @@ const defaultFooterNav: DefaultFooterNav = {
radius_bottom_left: 16,
radius_bottom_right: 16,
},
common_style: defaultCommon,
common_style: {
...defaultCommon,
color_list: [{ color: '#f5f5f5', color_percentage: undefined }],
},
},
};

2
src/config/const/search.ts
View File

@ -57,7 +57,7 @@ const defaultSearch: defaultSearch = {
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_style: '2',
search_botton_background_img: [],
search_button_radius: {
radius: 16,