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

历史记录新增标题

v1.2.0
于肖磊 2025-01-13 18:26:53 +08:00
parent 7b05d28a58
commit 53db2e39f4
10 changed files with 63 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
View File

@ -29,7 +29,7 @@
</div>
</template>
<script setup lang="ts">
import { location_compute } from '@/utils';
import { get_history_name, location_compute } from '@/utils';
const props = defineProps({
value: {
type: Object,
@ -62,7 +62,7 @@ const custom_edit = () => {
//# endregion
// 操作结束触发事件
const operation_end = () => {
emit('operation_end');
emit('operation_end', get_history_name(diy_data.value));
};
//#region 位置计算
// 监听数据变化

6
src/components/common/custom-module/model-icon/model-icon-style.vue
View File

@ -94,8 +94,8 @@
</div>
</template>
<script setup lang="ts">
import { get_data_fields, location_compute } from '@/utils';
import { pick, cloneDeep } from 'lodash';
import { get_data_fields, get_history_name, location_compute } from '@/utils';
import { pick, isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -145,7 +145,7 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
// 操作结束触发的事件
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
emit('operation_end', get_history_name(diy_data.value));
};
//#region 位置计算
// 监听数据变化

6
src/components/common/custom-module/model-image/model-image-style.vue
View File

@ -68,8 +68,8 @@
</div>
</template>
<script setup lang="ts">
import { get_data_fields, location_compute } from '@/utils';
import { pick } from 'lodash';
import { get_data_fields, get_history_name, location_compute } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -111,7 +111,7 @@ const img_link_change = (key: string) => {
// 操作结束触发的事件
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
emit('operation_end', get_history_name(diy_data.value));
};
//#region 位置计算
// 监听数据变化

5
src/components/common/custom-module/model-lines/model-lines-style.vue
View File

@ -43,7 +43,8 @@
</div>
</template>
<script setup lang="ts">
import { location_compute } from '@/utils';
import { get_history_name, location_compute } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
@ -67,7 +68,7 @@ const center_height = defineModel("height", { type: Number, default: 0 })
// 操作结束触发的事件
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
emit('operation_end', get_history_name(diy_data.value));
};
//#region 位置计算

6
src/components/common/custom-module/model-panel/model-panel-style.vue
View File

@ -66,8 +66,8 @@
</div>
</template>
<script setup lang="ts">
import { get_data_fields, location_compute } from '@/utils';
import { pick, cloneDeep } from 'lodash';
import { get_data_fields, get_history_name, location_compute } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -105,7 +105,7 @@ const img_link_change = (key: string) => {
}
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
emit('operation_end', get_history_name(diy_data.value));
};
// #region 位置计算
// 监听数据变化

5
src/components/common/custom-module/model-text/model-text-style.vue
View File

@ -128,7 +128,8 @@
</div>
</template>
<script setup lang="ts">
import { location_compute, get_data_fields } from '@/utils';
import { location_compute, get_data_fields, get_history_name } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -201,7 +202,7 @@ const copy_field = () => {
// 操作结束触发事件
const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end');
emit('operation_end', get_history_name(diy_data.value));
};
// #region 位置计算
// 监听数据变化

8
src/components/model-custom/components/custom-config/index.vue
View File

@ -177,7 +177,7 @@ const custom_edit = (id: string, list: diy, width: number, height: number, data_
};
// 初始化的时候默认生成一条新数据，避免用户无法回到最初的记录
onBeforeMount(() => {
const new_data = [{ name: formatDate('HH点mm分ss秒'), height: center_height.value, value: props.customList }];
const new_data = [{ title: '初始化', name: formatDate('HH点mm分ss秒'), height: center_height.value, value: props.customList }];
if (props.configType == 'custom') {
// 传递给store进行存储
data_source_store.set_custom_records(new_data);
@ -191,7 +191,7 @@ onBeforeMount(() => {
}
})
// 操作结束触发事件
const operation_end = (is_compare: boolean = true) => {
const operation_end = (title:string, is_compare: boolean = true) => {
// 如果没有数据，直接返回
if (!draglist.value) {
return;
@ -214,7 +214,7 @@ const operation_end = (is_compare: boolean = true) => {
// 获取历史数据
const new_data = old_data_handle(data_source_store?.custom_records || [], data_source_store?.custom_records_index || -1);
// 新增一条新数据
new_data.unshift({ name: formatDate('HH点mm分ss秒'), height: center_height.value, value: new_compare_data });
new_data.unshift({ title: title, name: formatDate('HH点mm分ss秒'), height: center_height.value, value: new_compare_data });
// 传递给store进行存储
data_source_store.set_custom_records(new_data);
// 操作之后更新数据
@ -223,7 +223,7 @@ const operation_end = (is_compare: boolean = true) => {
// 获取历史数据
const new_data = old_data_handle(data_source_store?.custom_group_records || [], data_source_store?.custom_group_records_index || -1);
// 新增一条新数据
new_data.unshift({ name: formatDate('HH点mm分ss秒'), height: center_height.value, value: new_compare_data });
new_data.unshift({ title: title, name: formatDate('HH点mm分ss秒'), height: center_height.value, value: new_compare_data });
// 更改自定义组的内容
data_source_store.set_custom_group_records(new_data);
// 更改自定义组的历史记录值

35
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="1000" @operation_end="operation_end(false)">组件高度</slider>
<slider v-model="center_height" :max="1000" @operation_end="operation_end('容器', false)">组件高度</slider>
</card-container>
<card-container class="h selected">
<div class="flex-col gap-10 drawer-container">
@ -112,7 +112,7 @@
</template>
<script setup lang="ts">
import { cloneDeep, isEmpty, property, isEqual } from 'lodash';
import { get_math, adjustPosition, getPlatform } from '@/utils';
import { get_math, adjustPosition, getPlatform, get_history_name } from '@/utils';
import { defaultComData, isRectangleIntersecting } from "./index-default";
import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
import { commonStore, DataSourceStore } from '@/store';
@ -191,6 +191,7 @@ const url_computer = (name: string) => {
return new_url;
};
//#endregion
// 获取历史记录存储的别名
//#region 组件边线相关
const is_show_component_line = ref(false);
const show_computer_line = () => {
@ -202,11 +203,11 @@ const show_computer_line = () => {
//#region 左侧处理逻辑
const select_index = ref<null | number>(null);
// 任何行动都会触发
const on_sort = (item: SortableEvent) => {
const on_sort = (item: any) => {
let index = item?.newIndex || 0;
// 设置对应的位置为显示
set_show_tabs(index);
operation_end();
operation_end(get_history_name(item.data));
};
//#endregion
//#region 中间区域的处理逻辑
@ -245,7 +246,6 @@ const outerClick = (e: any) => {
if (edit_index.value !== -1) {
edit_close_processing(edit_index.value);
edit_index.value = -1;
operation_end();
}
}
};
@ -267,6 +267,7 @@ const edit_close_processing = (index: number) => {
if (!isEmpty(list) && !isEmpty(list.new_name) && list.new_name === list.name) {
list.new_name = '';
}
operation_end(get_history_name(list));
};
// 复制
const copy = (index: null | number) => {
@ -283,7 +284,7 @@ const copy = (index: null | number) => {
// 在当前位置下插入数据
diy_data.value.splice(index, 0, new_data);
set_show_tabs(index + 1);
operation_end();
operation_end(data.name + list.length);
}
};
@ -296,6 +297,7 @@ const del = (index: null | number) => {
message: '删除成功!',
});
const show_tabs_index = diy_data.value.findIndex((item: any) => item.show_tabs == '1');
operation_end(get_history_name(diy_data.value.find((item: any) => item.show_tabs == '1')));
// 删除的是当前的这个数据
if (show_tabs_index == index) {
// 调用删除接口，然后，更新数据
@ -314,7 +316,6 @@ const del = (index: null | number) => {
diy_data.value.splice(index, 1);
}
select_index.value = diy_data.value.length > 0 ? select_index.value : null;
operation_end();
});
}
};
@ -355,7 +356,7 @@ const moveItem = (index: number, newIndex: number) => {
// 将数据插入新位置
diy_data.value.splice(newIndex, 0, old_data);
set_show_tabs(newIndex);
operation_end();
operation_end(get_history_name(old_data));
} catch (error) {
console.error('Error moving item:', error);
}
@ -516,7 +517,7 @@ const drop = (event: any) => {
diy_data.value.unshift(newItem);
// 因为是添加到头部，所以默认选中第0个
set_show_tabs(0);
operation_end();
operation_end(get_history_name(newItem));
}
};
//#endregion
@ -526,7 +527,7 @@ const dragEndHandle = (item: any, index: number) => {
const new_location = { x: item.x, y: item.y, record_x: item.x, record_y: item.y, staging_y: item.y };
// 对数组进行比较，确定跟之前的是否有变化
if (!isEqual(old_location, new_location)) {
operation_end();
operation_end(get_history_name(diy_data.value[index]));
}
diy_data.value[index].location = new_location;
};
@ -552,7 +553,7 @@ const resizingHandle = (new_location: any, key: string, index: number, type: str
com_data.line_size = line_size;
}
if (type == 'resizeEnd') {
operation_end();
operation_end(get_history_name(diy_data.value[index]));
}
};
// 图片大小的计算
@ -706,7 +707,9 @@ const start_drag_area_box = (index: number, event: MouseEvent) => {
item.location.record_y = y;
}
});
operation_end();
if (hot_list?.data.length > 0) {
operation_end('多选');
}
};
};
@ -945,7 +948,6 @@ const handleKeyUp = (e: KeyboardEvent) => {
// 只有是点击上下左右的时候才会生效
if (key_code.includes(e.key)) {
data_handling(x, y);
operation_end();
}
} else if (data_source_store.is_children_custom && props.configType == 'custom-group') {
// 阻止默认事件
@ -953,7 +955,6 @@ const handleKeyUp = (e: KeyboardEvent) => {
// 只有是点击上下左右的时候才会生效
if (key_code.includes(e.key)) {
data_handling(x, y);
operation_end();
}
}
};
@ -995,6 +996,7 @@ const handleKeyUp = (e: KeyboardEvent) => {
}
}
});
operation_end('多选');
} else {
// 如果没有热区数据，则直接更新自定义数据中选中组件的位置
diy_data.value.forEach(item => {
@ -1009,6 +1011,7 @@ const handleKeyUp = (e: KeyboardEvent) => {
item.location.y += y;
item.location.staging_y += y;
}
operation_end(get_history_name(item));
}
});
}
@ -1030,8 +1033,8 @@ onUnmounted(() => {
});
//#endregion
// 用户操作结束触发事件
const operation_end = (is_compare: boolean = true) => {
emits('operation_end', is_compare);
const operation_end = (name: string = '', is_compare: boolean = true) => {
emits('operation_end', name, is_compare);
}
// 暴露出去的数据，避免跟外部数据双向绑定，点击保存的时候才会保存数据
defineExpose({

11
src/components/model-custom/components/top-side-operation/index.vue
View File

@ -13,10 +13,10 @@
<el-icon :class="['iconfont icon-historical-records tooltip-icon', { 'disabled': history_list.length === 0 }]" @click.stop="open_history(history_list.length !== 0)" />
</el-tooltip>
</div>
<el-dialog v-model="dialogVisible" class="history-dialog" :style="{ top: '80px', left: dialog_left + 'px' }" title="历史记录" width="200" draggable show-close :modal="false" :close-on-click-modal="false" :close-on-press-escape="false">
<el-dialog v-model="dialogVisible" class="history-dialog" :style="{ top: '80px', left: dialog_left + 'px' }" title="历史记录" width="220" draggable show-close :modal="false" :close-on-click-modal="false" :close-on-press-escape="false">
<div ref="historyDialog" class="history-dialog-content flex-col gap-14">
<div v-for="(item, index1) in history_list" :key="index1" :class="[`history-dialog-item ${props.configType}`, {'active': records_index == index1 }]" @click="handleHistory(index1, records_index !== index1)">
<div class="history-dialog-item-title">{{ item.name }}</div>
<div class="history-dialog-item-title flex-row gap-5"><span class="item-title text-line-1">{{ item.title }}</span>{{ item.name }}</div>
<el-icon v-if="records_index == index1" class="iconfont icon-checked size-14" />
</div>
</div>
@ -46,7 +46,7 @@ onUnmounted(() => {
const dialog_left = ref(0);
const handleResize = () => {
// 处理一半区域的大小
let width = (window.innerWidth - 200) / 2;
let width = (window.innerWidth - 220) / 2;
// 减去右侧的宽度
if (window.innerWidth <= 1560) {
width = width - 410;
@ -183,6 +183,11 @@ const open_history = (is_click: boolean) => {
line-height: 20px;
font-style: normal;
}
.item-title {
width: 6rem;
overflow: hidden;
font-weight: bold;
}
.history-dialog-item.active {
background: #F4f4f4;
border-radius: 4px;

15
src/utils/index.ts
View File

@ -30,6 +30,21 @@ export function is_number(val: string | number): boolean {
return typeof val == 'number' && !isNaN(val);
}
export const get_history_name = (components: any) => {
// 输入验证
if (!components || typeof components !== 'object' || !('name' in components)) {
return '';
}
try {
// 确保 new_name 是字符串或 undefined
const newName = typeof components.new_name === 'string' ? components.new_name : '';
// 返回 new_name 如果它不为空，否则返回 name
return !isEmpty(newName) ? newName : components.name;
} catch (error) {
return '';
}
}
/**
* 获取嵌套对象的属性值
*