优化Panel组件样式计算:简化值获取逻辑、增强边框可见性、添加flex布局

This commit is contained in:
zqm
2025-10-30 21:16:37 +08:00
parent 035ccb8cf6
commit 886f4be951

View File

@@ -43,12 +43,13 @@ export default defineComponent({
// 计算面板样式 // 计算面板样式
const panelStyle = computed(() => { const panelStyle = computed(() => {
// 确保从props.panel获取最新值而不仅仅依赖内部ref // 直接使用props.panel中的值,确保与父组件状态同步
const posX = props.panel.x !== undefined ? props.panel.x : panelPosition.value.x; const posX = props.panel.x || 100;
const posY = props.panel.y !== undefined ? props.panel.y : panelPosition.value.y; const posY = props.panel.y || 100;
const width = props.panel.width !== undefined ? props.panel.width : panelSize.value.width; const width = props.panel.width || 300;
const height = props.panel.height !== undefined ? props.panel.height : panelSize.value.height; const height = props.panel.height || 180;
// 始终创建新对象避免Vue响应式系统无法检测变化
const style = { const style = {
position: 'absolute', position: 'absolute',
top: `${posY}px`, top: `${posY}px`,
@@ -56,11 +57,13 @@ export default defineComponent({
width: `${width}px`, width: `${width}px`,
height: `${height}px`, height: `${height}px`,
backgroundColor: 'white', backgroundColor: 'white',
border: '1px solid #e5e7eb', border: '1px solid #435d9c', // 更深的边框颜色以增强可见性
borderRadius: '4px', borderRadius: '4px',
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.15)',
overflow: 'hidden', overflow: 'hidden',
zIndex: 10 zIndex: 10,
display: 'flex',
flexDirection: 'column'
}; };
// 最大化状态 // 最大化状态
@@ -75,11 +78,6 @@ export default defineComponent({
style.left = '0px'; style.left = '0px';
style.width = `${rect.width - 2}px`; style.width = `${rect.width - 2}px`;
style.height = `${rect.height - 2}px`; style.height = `${rect.height - 2}px`;
} else {
style.top = '0px';
style.left = '0px';
style.width = '800px';
style.height = '600px';
} }
} }