历史记录新增标题

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

@@ -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 位置计算
 // 监听数据变化

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

@@ -94,8 +94,8 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_data_fields, location_compute } from '@/utils';
+import { get_data_fields, get_history_name, location_compute } from '@/utils';
-import { pick, cloneDeep } from 'lodash';
+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 位置计算
 // 监听数据变化

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

@@ -68,8 +68,8 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_data_fields, location_compute } from '@/utils';
+import { get_data_fields, get_history_name, location_compute } from '@/utils';
-import { pick } from 'lodash';
+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 位置计算
 // 监听数据变化

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

@@ -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 位置计算

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

@@ -66,8 +66,8 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_data_fields, location_compute } from '@/utils';
+import { get_data_fields, get_history_name, location_compute } from '@/utils';
-import { pick, cloneDeep } from 'lodash';
+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 位置计算
 // 监听数据变化

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

@@ -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 位置计算
 // 监听数据变化

src/components/model-custom/components/custom-config/index.vue

@@ -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);
                 // 更改自定义组的历史记录值

src/components/model-custom/components/index.vue

@@ -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) => {
+const operation_end = (name: string = '', is_compare: boolean = true) => {
-    emits('operation_end', is_compare);
+    emits('operation_end', name, is_compare);
 }
 // 暴露出去的数据，避免跟外部数据双向绑定，点击保存的时候才会保存数据
 defineExpose({

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

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

src/utils/index.ts

@@ -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 '';
+    }
+}
 /**
  * 获取嵌套对象的属性值
  *