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

添加安全距离逻辑

v1.0.0
于肖磊 2024-10-19 11:33:06 +08:00
parent cff1a0cb76
commit a90b267b9b
14 changed files with 77 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/model-article-list/index.vue
View File

@ -135,7 +135,6 @@ const carousel_key = ref('0');
const interval_time = ref(2000);
// 轮播图是否滚动
const is_roll = ref(1);
// 内容
const new_content = computed(() => props.value?.content || {});
// 样式

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

@ -46,6 +46,7 @@ const custom_height = computed(() => form.value.height + 'px');
const container = ref<HTMLElement | null>(null);
const div_width = ref(0);
const scale = ref(1);
// 获取当前宽度 和 缩放比例
onMounted(() => {
if (container.value) {
div_width.value = container.value.offsetWidth;

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

@ -21,7 +21,9 @@
</el-form>
<Dialog ref="dialog" @accomplish="accomplish">
<div class="flex-row h w">
<!-- 左侧和中间区域 -->
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" :source-list="form.data_source_content" :list="custom_list" @right-update="right_update"></DragIndex>
<!-- 右侧配置区域 -->
<div class="settings">
<template v-if="diy_data.key === 'img'">
<model-image-style :key="key" v-model:height="center_height" :options="model_data_source" :value="diy_data"></model-image-style>

5
src/components/model-data-magic/index.vue
View File

@ -309,11 +309,6 @@ const carousel_change = (index: number, key: number) => {
data_magic_list.value[key].actived_index = index;
}
}
// 不属于第9个，并且第9个的第一个和第二个
const spacing_processing = (index: number) => {
return form.value.style_actived != 8 || (form.value.style_actived === 8 && [0, 1].includes(index))
}
// 公共样式
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));

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

@ -33,6 +33,7 @@
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<!-- 内容和样式组件 -->
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="内容设置" name="content">
<tabs-content :value="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-content>

2
src/components/model-float-window/index.vue
View File

@ -43,8 +43,6 @@ watch(props.value, (val) => {
}
style.value = location;
// 60 为自身高度
// new_style.value.offset_number_percentage = (new_style.value.offset_number / (844 - 70)).toFixed(4);
emits('change', { bottom: new_style.value.offset_number, location: new_style.value.display_location });
}, {immediate: true, deep: true});
</script>

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

@ -39,6 +39,14 @@
</el-tooltip>
</div>
</el-form-item>
<el-form-item v-if="form.header_background_type == 'transparent' && form.immersive_style === '1'" label="安全距离">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.general_safe_distance_value" active-value="1" inactive-value="0"></el-switch>
<el-tooltip effect="light" :show-after="200" :hide-after="200" content="开启后第一个组件上内边距将增加顶部安全距离+导航高度" placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
</el-form-item>
<el-form-item label="上滑展示">
<el-switch v-model="form.up_slide_display" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
@ -127,6 +135,8 @@ watchEffect(() => {
const header_background_type_change_event = (val: any) => {
if (val === 'color_image') {
form.value.immersive_style = '0';
// 沉浸模式关闭的时候，安全距离关闭
form.value.general_safe_distance_value = '0';
common_store.set_is_immersion_model(false);
} else {
// 没有tabs的情况下，默认开启沉浸模式
@ -150,6 +160,8 @@ const up_slide_mult_color_picker_event = (arry: color_list[], type: number) => {
};
const change_immersive_style = (val: string | number | boolean) => {
if (val === '0') {
// 沉浸模式关闭的时候，安全距离关闭
form.value.general_safe_distance_value = '0';
common_store.set_is_immersion_model(false);
return;
}

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

@ -51,6 +51,7 @@ interface DefaultFooterNav {
function_buttons_type: string;
data_alone_row_space: number;
immersive_style: string;
general_safe_distance_value: string;
up_slide_display: string;
up_slide_background_color_list: color_list[];
up_slide_background_direction: string;
@ -118,7 +119,10 @@ const defaultFooterNav: DefaultFooterNav = {
header_background_title_size: 14,
data_alone_row_space: 5,
function_buttons_type: '0',
// 沉浸样式
immersive_style: '0',
// 安全距离
general_safe_distance_value: '0',
up_slide_display: '1',
up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],
up_slide_background_direction: '180deg',

1
src/config/const/index.ts
View File

@ -3,6 +3,7 @@ const defaultCommon: componentsCommonCommonStyle = {
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '0',
floating_up: 0,
padding_top_safe_value: 0, // 安全距离值，在顶部时，需要加上安全距离，防止遮挡
padding: 0,
padding_top: 0,
padding_bottom: 0,

7
src/store/modules/common.ts
View File

@ -5,6 +5,7 @@ export const commonStore = defineStore('common', () => {
const is_common_api = ref(false);
const is_immersion_model = ref(false);
const is_have_tabs = ref(false);
const header_height = ref(0);
const common = ref({
article_category: [] as any[], //---- 文章分类
attachment_category: [] as any[], //---- 附件分类
@ -48,14 +49,20 @@ export const commonStore = defineStore('common', () => {
is_have_tabs.value = bool;
};
const set_header_height = (height: number) => {
header_height.value = height;
};
return {
common,
is_common_api,
is_immersion_model,
is_have_tabs,
header_height,
set_common,
set_is_common_api,
set_is_immersion_model,
set_is_have_tabs,
set_header_height,
};
});

1
src/types/global.d.ts vendored
View File

@ -88,6 +88,7 @@ declare global {
direction: string;
background_img_style: string;
floating_up: number;
padding_top_safe_value: number;
padding: number;
padding_top: number;
padding_bottom: number;

12
src/utils/index.ts
View File

@ -2,6 +2,7 @@ import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { commonStore } from '@/store';
import App from '@/App.vue';
import { isEmpty } from 'element-plus/es/utils';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
@ -152,8 +153,15 @@ export function gradient_handle(color_list: color_list[], direction: string, is_
* @param {string[], string} path
* @returns {string}
*/
export function padding_computer(new_style: paddingStyle, scale: number = 1) {
return `padding: ${new_style.padding_top * scale || 0}px ${new_style.padding_right * scale || 0}px ${new_style.padding_bottom * scale || 0}px ${new_style.padding_left * scale || 0}px;`;
interface newPaddingStyle extends paddingStyle {
padding_top_safe_value: number;
}
export function padding_computer(new_style: newPaddingStyle, scale: number = 1) {
let top = new_style.padding_top;
if (typeof new_style.padding_top_safe_value == 'number') {
top += new_style.padding_top_safe_value;
}
return `padding: ${ top * scale || 0}px ${new_style.padding_right * scale || 0}px ${new_style.padding_bottom * scale || 0}px ${new_style.padding_left * scale || 0}px;`;
}
/**

36
src/views/layout/components/main/index.vue
View File

@ -149,11 +149,23 @@ watch(
);
const top_padding = ref(90);
const top_margin = ref(0);
const model_wall_top = ref(0);
const content_style = ref('');
const content_img_style = ref('');
const main_content_style = ref('');
const bottom_navigation_show = ref(true);
// 更新数据第一个的安全距离
const set_padding_top_value = () => {
if (diy_data.value.length > 0) {
diy_data.value.forEach((item: any, index: number) => {
if (index === 0) {
item.com_data.style.common_style.padding_top_safe_value = common_store.header_height;
} else {
item.com_data.style.common_style.padding_top_safe_value = 0;
}
});
}
};
watchEffect(() => {
const data = page_data.value.com_data;
if (data) {
@ -167,7 +179,7 @@ watchEffect(() => {
main_content_style.value = padding_computer(new_style.common_style);
const { immersive_style, up_slide_display, data_alone_row_space } = new_style;
const { immersive_style, up_slide_display, data_alone_row_space, general_safe_distance_value } = new_style;
// 不开启沉浸式 和 上滑显示
if (immersive_style == '1' || up_slide_display != '1') {
top_padding.value = 0;
@ -186,6 +198,18 @@ watchEffect(() => {
} else {
top_margin.value = 0;
}
// 开始沉浸式并且开启安全距离
if (immersive_style == '1' && general_safe_distance_value == '1') {
if (content.data_alone_row_value.length > 0) {
common_store.set_header_height(90 + 32 + data_alone_row_space);
} else {
common_store.set_header_height(90);
}
} else {
// 没有开沉浸模式或者没有开启安全距离
common_store.set_header_height(0);
}
set_padding_top_value();
}
});
@ -275,6 +299,8 @@ const on_sort = (item: SortableEvent) => {
let index = item?.newIndex || 0;
// 设置对应的位置为显示
set_show_tabs(index);
// 操作的时候更新一下数据的安全距离
set_padding_top_value();
};
// 开始拖拽时
const on_start = () => {
@ -340,6 +366,8 @@ const del = (index: number, is_tabs: boolean) => {
diy_data.value.splice(index, 1);
}
}
// 操作的时候更新一下数据的安全距离
set_padding_top_value();
});
};
// 向上移动
@ -355,6 +383,8 @@ const moveUp = (index: number, flag: boolean) => {
diy_data.value.splice(index - count, 0, old_data);
// 设置对应的位置为显示
set_show_tabs(index - count);
// 操作的时候更新一下数据的安全距离
set_padding_top_value();
}
};
// 向下移动
@ -369,6 +399,8 @@ const moveDown = (index: number, flag: boolean) => {
// 将数据插入下一层数据中
diy_data.value.splice(index + count, 0, old_data);
set_show_tabs(index + count);
// 操作的时候更新一下数据的安全距离
set_padding_top_value();
}
};

5
src/views/layout/index.vue
View File

@ -139,7 +139,10 @@ const init = () => {
data.footer.com_data = default_merge(data.footer.com_data, 'footer_nav');
data.diy_data = data_merge(data.diy_data);
data.tabs_data = data_merge(data.tabs_data);
// 判断默认数据是否开启沉浸式
if (data.header.com_data.style.immersive_style === '1') {
common_store.set_is_immersion_model(true);
}
form.value = data;
} else {
is_empty.value = true;