自定义组内边距修改

src/components/common/custom-module/data-rendering/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="w h re custom-other">
-        <div v-for="(item, index) in list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (customList.length - 1) - index}">
+        <div v-for="(item, index) in list" :key="item.id" class="main-content flex-row" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (customList.length - 1) - index}">
             <template v-if="item.key == 'text'">
                 <model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :title-params="showData?.data_name || 'name'" :is-display-panel="true"></model-text>
             </template>

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="w h" :style="style_container">
+    <div class="flex-1" :style="style_container">
         <div :style="style_img_container">
             <div :style="style_content_container">
                 <div class="w h re" :style="style_content_img_container">
@@ -115,9 +115,9 @@ watchEffect(() => {
     // 数据左右间距
     const internal_spacing = data_style.margin_left + data_style.margin_right + data_style.padding_left + data_style.padding_right;
     // 根据容器宽度来计算内部大小
-    const width = old_width - outer_spacing - internal_spacing - content_spacing;
+    const new_width = old_width - outer_spacing - internal_spacing - content_spacing;
     // 获得对应宽度的比例
-    custom_scale.value = width / old_width;
+    custom_scale.value = new_width / old_width;
 });
 //#endregion
 // 计算纵向显示的宽度

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

@@ -68,7 +68,7 @@
                             <DraggableContainer v-if="draggable_container" style="z-index:0" :reference-line-visible="true" :disabled="false" reference-line-color="#ddd" @selectstart.prevent @contextmenu.prevent @dragstart.prevent>
                                 <!-- @mouseover="on_choose(index)" -->
                                 <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }" :style="{ 'z-index': (diy_data.length - 1) - index }" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index)" @resize-end="resizingHandle($event, item.key, index)">
-                                    <div :class="['main-content', { 'plug-in-border': item.show_tabs == '1' }]">
+                                    <div :class="['main-content flex-row', { 'plug-in-border': item.show_tabs == '1' }]">
                                         <template v-if="item.key == 'text'">
                                             <model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :title-params="showData?.data_name || 'name'" :options="options"></model-text>
                                         </template>
@@ -111,10 +111,10 @@
 </template>
 <script setup lang="ts">
 import { cloneDeep, isEmpty, property } from 'lodash';
-import { get_math, adjustPosition } from '@/utils';
+import { get_math, adjustPosition, getPlatform } from '@/utils';
 import { defaultComData, isRectangleIntersecting } from "./index-default";
 import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
-import { commonStore } from '@/store';
+import { commonStore, DataSourceStore } from '@/store';
 const common_store = commonStore();
 // 删除
 const app = getCurrentInstance();
@@ -431,7 +431,7 @@ watch(() => center_height.value, () => {
                 staging_y: item.location.staging_y,
             },
             com_data: {
-                // 规整历史数据，避免有新增字段丢失
+                // 规整历史数据，避免有新增字段不存在导致报错
                 ...Object.assign({}, cloneDeep((defaultComData as any)[`${item.key}_com_data`]), item.com_data),
                 com_height: item.com_data.staging_height,
                 data_source_field: {
@@ -799,7 +799,35 @@ const rect_style = computed(() => {
     };
 });
 //#endregion
-//#region 绑定上下左右事件
+//#region 绑定上下左右事件和回退按钮
+// 获取电脑是什么牌子 window 还是mac
+const platform = getPlatform();
+// 缓存内容，用于回退
+const data_source_store = DataSourceStore();
+const pressedKeys = new Set(); // 使用 Set 记录按下的按键
+const handle_keydown = (e: KeyboardEvent) => {
+    // 排除默认事件
+    const default_list = ['textarea', 'input'];
+    // 判断是否是用户手动输入框之内操作的
+    if (e.target instanceof HTMLElement && default_list.includes(e.target?.localName)) {
+        return;
+    }
+    // 使用 key 或 code 属性代替 keyCode
+    const key = e.key.toLowerCase(); // 将按键转换为小写，确保一致性
+    // 添加按键到 Set 中
+    pressedKeys.add(key);
+    // 检查 A 和 B 键是否同时按下
+    if ((pressedKeys.has('control') && pressedKeys.has('z') && platform == 'Windows') || (pressedKeys.has('meta') && pressedKeys.has('z') && platform == 'Mac')) {
+        // 监听开启的是全局监听，为了避免全局监听的同时也监听了子组件的回退事件，所以需要判断当前是全局监听还是子组件监听
+        if (!data_source_store.is_children_custom && props.configType == 'custom') {
+            console.log('同时按下了A和B键', props.configType); // 执行相应的操作
+        } else if (data_source_store.is_children_custom && props.configType == 'custom-group') {
+            console.log('同时按下了A和B键', props.configType); // 执行相应的操作
+        }
+    }
+    // 阻止默认事件
+    e.preventDefault();
+}
 const handleKeyUp = (e: KeyboardEvent) => {
     // 排除默认事件
     const default_list = ['textarea', 'input'];
@@ -820,11 +848,27 @@ const handleKeyUp = (e: KeyboardEvent) => {
     } else if (e.key === 'ArrowRight') { //右键
         x = 1;
     }
-    // 阻止默认事件
+    // 监听开启的是全局监听，为了避免全局监听的同时也监听了子组件的回退事件，所以需要判断当前是全局监听还是子组件监听
-    e.preventDefault();
+    if (!data_source_store.is_children_custom && props.configType == 'custom') {
-    // 只有是点击上下左右的时候才会生效
+        // 移除按键
-    if (key_code.includes(e.key)) {
+        const key = e.key.toLowerCase();
-        data_handling(x, y);
+        pressedKeys.delete(key);
+        // 阻止默认事件
+        e.preventDefault();
+        // 只有是点击上下左右的时候才会生效
+        if (key_code.includes(e.key)) {
+            data_handling(x, y);
+        }
+    } else if (data_source_store.is_children_custom && props.configType == 'custom-group') {
+        // 移除按键
+        const key = e.key.toLowerCase();
+        pressedKeys.delete(key);
+        // 阻止默认事件
+        e.preventDefault();
+        // 只有是点击上下左右的时候才会生效
+        if (key_code.includes(e.key)) {
+            data_handling(x, y);
+        }
     }
 };
 /**
@@ -885,11 +929,16 @@ const handleKeyUp = (e: KeyboardEvent) => {
 };
 // coordinate 新的坐标 current_size 当前坐标对应的组件大小(指的是组件的宽高) max_size 容器的最大大小
 const isWithinBounds = (coordinate:number, current_size: number, max_size: number) => coordinate >= 0 && coordinate + current_size <= max_size;
+
+// 键盘控制
 onMounted(() => {
+    document.addEventListener('keydown', handle_keydown);
     // 监听键盘事件
     document.addEventListener('keyup', handleKeyUp);
 });
+
 onUnmounted(() => {
+    document.removeEventListener('keyup', handleKeyUp);
     // 移除监听事件
     document.removeEventListener('keyup', handleKeyUp);
 });

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

@@ -130,6 +130,8 @@ const custom_edit = (type: string, id?: string, father_list?: any, list?: any, w
         custom_list.value = cloneDeep(form.value.custom_list);
         // 主自定义的高度
         center_height.value = cloneDeep(form.value.height);
+        // 设置是否是子页面
+        data_source_store.set_is_children_custom(false);
     } else {
         drag_group_key.value = Math.random().toString(36).substring(2);
         // 自定义组的弹出框
@@ -143,10 +145,14 @@ const custom_edit = (type: string, id?: string, father_list?: any, list?: any, w
         // 自定义组的默认宽高
         center_group_width.value = width || 0;
         center_group_height.value = height || 0;
+        // 设置是否是子页面
+        data_source_store.set_is_children_custom(true);
     }
 };
 // 点击完成的处理逻辑
 const accomplish = (type: string, list: any) => {
+    // 点击完成，证明弹出框结束了，不管是子页面结束还是主页面结束，都是非子页面
+    data_source_store.set_is_children_custom(false);
     // 如果是自定义点击完成，就更新主数据
     if (type == 'custom') {
         form.value.custom_list = list;

src/store/modules/custom.ts

@@ -13,6 +13,7 @@ export const DataSourceStore = defineStore('dataSource', () => {
         data: data_list[];
         type: string;
     };
+    const is_children_custom = ref(false);
     // 上传是否需要调接口判断
     const is_data_source_api = ref(false);
     // 数据源
@@ -27,10 +28,16 @@ export const DataSourceStore = defineStore('dataSource', () => {
         is_data_source_api.value = bool;
     };
 
+    const set_is_children_custom = (bool: boolean) => {
+        is_children_custom.value = bool;
+    };
+
     return {
+        is_children_custom,
         data_source_list,
         is_data_source_api,
         set_data_source,
         set_is_data_source_api,
+        set_is_children_custom,
     };
 });

src/utils/index.ts

@@ -534,3 +534,30 @@ export const adjustPosition = (x: number, y: number, width:number, height:number
     // 返回调整后的元素位置坐标
     return { x, y };
 }
+
+
+export const getPlatform = () => {
+    // 检查 navigator.platform 是否存在且不为空
+    if (!navigator || !navigator.platform) {
+        return 'Unknown';
+    }
+
+    const platform = navigator.platform.toLowerCase();
+    
+    // 使用正则表达式进行平台匹配
+    const platformMap = [
+        { regex: /^win/, name: 'Windows' },
+        { regex: /^mac/, name: 'Mac' },
+        { regex: /^linux/, name: 'Linux' },
+        { regex: /android/, name: 'Android' },
+        { regex: /ios/, name: 'iOS' }
+    ];
+
+    for (const { regex, name } of platformMap) {
+        if (regex.test(platform)) {
+            return name;
+        }
+    }
+
+    return 'Unknown';
+}