This commit is contained in:
AutoRobot Dev
2025-11-01 15:34:02 +07:00
parent 87ccd2bbec
commit 294120d6cb
2 changed files with 14 additions and 8 deletions

View File

@@ -2,7 +2,7 @@
<div class="vs-area-wrapper"> <div class="vs-area-wrapper">
<div class="vs-area select-none" :class="{ 'is-maximized': isMaximized }" :style="areaStyle"> <div class="vs-area select-none" :class="{ 'is-maximized': isMaximized }" :style="areaStyle">
<!-- 顶部标题栏 --> <!-- 顶部标题栏 -->
<div class="vs-title-bar"> <div v-if="showTitleBar" class="vs-title-bar">
<div class="vs-title-left"> <div class="vs-title-left">
<div class="vs-app-icon" aria-label="AppIcon"> <div class="vs-app-icon" aria-label="AppIcon">
<svg class="vs-icon" viewBox="0 0 22.4 22.4" aria-hidden="true"> <svg class="vs-icon" viewBox="0 0 22.4 22.4" aria-hidden="true">
@@ -67,7 +67,7 @@
</template> </template>
<script setup> <script setup>
import { defineProps, computed, defineEmits } from 'vue' import { defineProps, computed, defineEmits, ref } from 'vue'
const props = defineProps({ const props = defineProps({
id: { type: String, required: true }, id: { type: String, required: true },
@@ -77,11 +77,16 @@ const props = defineProps({
WindowState: { type: String, default: '正常' }, WindowState: { type: String, default: '正常' },
// 新增:默认尺寸 // 新增:默认尺寸
width: { type: Number, default: 300 }, width: { type: Number, default: 300 },
height: { type: Number, default: 250 } height: { type: Number, default: 250 },
// 新增:控制标题栏显示
showTitleBar: { type: Boolean, default: true }
}) })
// 根据初始状态计算是否最大化 // 本地状态:不再向父组件发事件,内部维护最大化/还原
const isMaximized = computed(() => props.WindowState === '最大化' || props.WindowState === 'maximized') const localState = ref(props.WindowState)
// 根据本地状态计算是否最大化
const isMaximized = computed(() => localState.value === '最大化' || localState.value === 'maximized')
// 新增:根据状态计算尺寸样式 // 新增:根据状态计算尺寸样式
const areaStyle = computed(() => { const areaStyle = computed(() => {
@@ -91,11 +96,12 @@ const areaStyle = computed(() => {
return { width: `${props.width}px`, height: `${props.height}px` } return { width: `${props.width}px`, height: `${props.height}px` }
}) })
const emit = defineEmits(['update:WindowState', 'close']) const emit = defineEmits(['close'])
const onToggleMaximize = () => { const onToggleMaximize = () => {
const next = isMaximized.value ? '正常' : '最大化' const next = isMaximized.value ? '正常' : '最大化'
emit('update:WindowState', next) // 直接更新本地状态,不再 emit 到父组件
localState.value = next
} }
const onClose = () => emit('close') const onClose = () => emit('close')

View File

@@ -1,5 +1,5 @@
<template> <template>
<Area :WindowState="windowState" @update:WindowState="handleUpdate" /> <Area :WindowState="windowState" :showTitleBar="false" />
</template> </template>
<script setup> <script setup>