diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue index 389718f..3fd8e26 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue +++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue @@ -1,5 +1,6 @@ @@ -72,12 +74,23 @@ const props = defineProps({ title: { type: String, default: '面板区' }, resizable: { type: Boolean, default: true }, // 新增:初始状态(支持中文值) - WindowState: { type: String, default: '正常' } + WindowState: { type: String, default: '正常' }, + // 新增:默认尺寸 + width: { type: Number, default: 300 }, + height: { type: Number, default: 250 } }) // 根据初始状态计算是否最大化 const isMaximized = computed(() => props.WindowState === '最大化' || props.WindowState === 'maximized') +// 新增:根据状态计算尺寸样式 +const areaStyle = computed(() => { + if (isMaximized.value) { + return { width: '100%', height: '100%' } + } + return { width: `${props.width}px`, height: `${props.height}px` } +}) + const emit = defineEmits(['update:WindowState', 'close']) const onToggleMaximize = () => { @@ -110,8 +123,8 @@ const onClose = () => emit('close') flex-direction: column; background: var(--vs-bg); border: 1px solid var(--vs-border); - min-width: 400px; - min-height: 200px; + min-width: 300px; + min-height: 250px; } /* 标题栏 */ @@ -196,4 +209,13 @@ const onClose = () => emit('close') .vs-app-icon { width: 14px; height: 14px; display: inline-block; background: transparent; opacity: 0.95; } .vs-icon { width: 100%; height: 100%; shape-rendering: crispEdges; } .vs-app-icon svg { display: block; } + +/* 外层包裹,居中内容 */ +.vs-area-wrapper { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue index 2e71953..8f5481c 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue +++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue @@ -1,7 +1,10 @@ \ No newline at end of file