diff --git a/demoHtml/flex/css/index.css b/demoHtml/flex/css/index.css
index 76ee2bd..c026dc6 100644
--- a/demoHtml/flex/css/index.css
+++ b/demoHtml/flex/css/index.css
@@ -169,7 +169,7 @@ html {
padding: 5px;
display: flex;
gap: 5px;
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.tab-button {
@@ -180,7 +180,9 @@ html {
border-radius: 6px;
font-size: 14px;
color: #333;
- transition: background-color 0.3s, color 0.3s;
+ transition:
+ background-color 0.3s,
+ color 0.3s;
}
.tab-button:hover {
@@ -200,14 +202,15 @@ html {
background-color: #e2e2e2;
border-radius: 8px;
width: 960px;
+ cursor: pointer !important; /* 强制光标为指针，覆盖 gridstack 的默认设置 */
}
.grid-stack-item-content {
- cursor: pointer;
+ cursor: grab; /* 将光标明确设置为抓手 */
background: #fff;
}
#canvas-panel .grid-stack-item-content {
border-radius: 8px;
- border: 1px solid #e0e0e0;
+ border: 0px solid #e0e0e0;
}
.global-save-button-container {
diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js
index e71ae24..d26ae4d 100644
--- a/demoHtml/flex/js/index.js
+++ b/demoHtml/flex/js/index.js
@@ -31,7 +31,7 @@
upId: '',
downId: '',
focusedStyle_background: '',
- focusedStyle_border_width: '',
+ focusedStyle_border_width: 0,
focusedStyle_border_color: '',
focusedStyle_scale: 1,
},
@@ -54,7 +54,7 @@
upId: '',
downId: '',
focusedStyle_background: '',
- focusedStyle_border_width: '',
+ focusedStyle_border_width: 0,
focusedStyle_border_color: '',
focusedStyle_scale: 1,
},
@@ -79,6 +79,7 @@
width: 1920,
height: 1080,
background: '#e2e2e2',
+ image: '', // 为画布添加image属性
};
} else {
self['initData'] = JSON.parse(initDataStorage);
@@ -86,6 +87,16 @@
}
console.log(self['initData'], `${type}Data`);
+ // 初始化时应用画布背景
+ const canvasId = `${type}-screen`;
+ if (self.initData.image) {
+ $('#' + canvasId)
+ .css('background-image', `url(${self.initData.image})`)
+ .css('background-size', 'cover');
+ } else if (self.initData.background) {
+ $('#' + canvasId).css('background-color', self.initData.background);
+ }
+
self['grid'] = GridStack.init(
{
// 一行高度
@@ -137,6 +148,15 @@
if (currentComponent && currentComponent.id === component.id) {
return;
}
+
+ // 1. 解绑可能存在的画布属性事件处理器
+ $('#props-panel form').find('#image, #background').off();
+ // 2. 重新绑定通用的组件事件处理器
+ bindComponentEvents();
+ // 3. 重置属性面板标题并显示所有表单项，为显示组件属性做准备
+ $('#props-panel .panel-title span').text('组件属性');
+ $('#props-panel form .form-item').show();
+
// 清除之前选中组件的获取焦点后的样式
clearOldFocusStyle();
currentComponent = component;
@@ -320,15 +340,21 @@
},
focusedStyle_border_width: function (el, value) {
if (!value) return;
- el.find('.grid-stack-item-content').css('border-width', value + 'px');
+ if (currentComponent && currentComponent.id === component.id) {
+ el.find('.grid-stack-item-content').css('border-width', value + 'px');
+ }
},
focusedStyle_border_color: function (el, value) {
if (!value) return;
- el.find('.grid-stack-item-content').css('border-color', value);
+ if (currentComponent && currentComponent.id === component.id) {
+ el.find('.grid-stack-item-content').css('border-color', value);
+ }
},
focusedStyle_scale: function (el, value) {
if (!value) return;
- el.find('.grid-stack-item-content').css('transform', `scale(${value})`);
+ if (currentComponent && currentComponent.id === component.id) {
+ el.find('.grid-stack-item-content').css('transform', `scale(${value})`);
+ }
},
};
@@ -459,22 +485,72 @@
localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
});
- // 给画布添加点击事件，用于取消组件的选中状态
+ // 给画布添加点击事件，用于编辑画布属性
$('#main-screen, #welcome-screen').on('click', function (e) {
// 确保点击的是画布背景，而不是某个组件
- if (e.target === this) {
- console.log('点击了画布背景，取消组件选中');
- // 如果有当前选中的组件
- if (currentComponent) {
- // 清除旧组件的焦点样式
- clearOldFocusStyle();
- // 重置当前组件变量
- currentComponent = null;
- // 将右侧属性面板重置为初始状态
- $('#props-panel .wait-box').show();
- $('#props-panel form').hide();
- }
+ if (e.target !== this) {
+ return;
}
+
+ console.log('点击了画布背景，编辑画布属性');
+
+ // 1. 如果有，则取消当前选中的组件
+ if (currentComponent) {
+ clearOldFocusStyle();
+ currentComponent = null;
+ }
+
+ // 2. 更新右侧面板以显示画布属性
+ $('#props-panel .panel-title span').text('画布属性');
+ $('#props-panel .wait-box').hide();
+ const $form = $('#props-panel form');
+ $form.show();
+
+ // 3. 只显示画布相关的表单项
+ $form.find('.form-item').hide(); // 首先隐藏所有
+ $form.find('#image').parent().show(); // 显示背景图片
+ $form.find('#background').parent().show(); // 显示背景颜色
+
+ // 4. 获取当前点击的画布及其数据对象
+ const canvasId = this.id; // "main-screen" 或 "welcome-screen"
+ const type = canvasId.split('-')[0]; // "main" 或 "welcome"
+ const canvasData = type === 'main' ? main : welcome;
+
+ // 5. 将当前画布的属性值填充到表单中
+ $form.find('#image').val(canvasData.initData.image || '');
+ $form.find('#background').val(canvasData.initData.background || '');
+
+ // 6. 为画布属性输入框绑定新的事件
+ $form.find('#image, #background').off(); // 先解绑旧事件，防止重复绑定
+
+ $form.find('#image').on('change', function () {
+ const imageUrl = $(this).val();
+ canvasData.initData.image = imageUrl;
+ if (imageUrl) {
+ $('#' + canvasId)
+ .css('background-image', `url(${imageUrl})`)
+ .css('background-size', 'cover');
+ // 当设置图片时，清空背景色
+ $('#' + canvasId).css('background-color', '');
+ canvasData.initData.background = '';
+ $form.find('#background').val('');
+ } else {
+ // 如果选择的是“请选择”，则只移除背景图片
+ $('#' + canvasId).css('background-image', 'none');
+ }
+ });
+
+ $form.find('#background').on('blur', function () {
+ const color = $(this).val();
+ canvasData.initData.background = color;
+ if (color) {
+ // 当设置颜色时，清空背景图片
+ $('#' + canvasId).css('background-color', color);
+ $('#' + canvasId).css('background-image', 'none');
+ canvasData.initData.image = '';
+ $form.find('#image').val('');
+ }
+ });
});
});
})();