修改TabPage组件样式，使其完全填充满Area的内容区

AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue

@@ -1,133 +1,29 @@
 <template>
-  <div class="tab-page-wrapper" :style="wrapperStyle">
+  <div class="tab-page">
-    <div class="tab-page" :style="tabPageStyle">
+    <!-- Tab页内容区域 -->
-      <!-- Tab页内容区域 -->
+    <div class="tab-page-content">
-      <div class="tab-page-content">
+      <slot></slot>
-        <slot></slot>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { defineProps, computed, ref, onMounted } from 'vue'
+import { defineProps } from 'vue'
 
 const props = defineProps({
   id: { type: String, required: true },
-  title: { type: String, default: '标签页' },
+  title: { type: String, default: '标签页' }
-  // 默认尺寸
-  width: { type: Number, default: 300 },
-  height: { type: Number, default: 250 },
-  // 位置属性，可选
-  left: { type: Number, default: undefined },
-  top: { type: Number, default: undefined }
 })
 
-// 本地状态存储位置和大小
-const position = ref({
-  width: props.width,
-  height: props.height,
-  left: props.left,
-  top: props.top
-})
-
-// 父容器引用
-const parentContainer = ref(null)
-
-// 计算wrapper样式 - 用于居中定位
-const wrapperStyle = computed(() => {
-  // 当没有指定left或top时，保持居中
-  if (position.value.left === undefined || position.value.top === undefined) {
-    return {
-      width: '100%',
-      height: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      position: 'relative'
-    }
-  }
-  
-  // 当指定了位置时，使用绝对定位
-  return {
-    position: 'relative',
-    width: '100%',
-    height: '100%'
-  }
-})
-
-// 计算tab page样式
-const tabPageStyle = computed(() => {
-  const style = {
-    width: `${position.value.width}px`,
-    height: `${position.value.height}px`,
-    background: '#ffffff',
-    border: '1px solid #c7d2ea',
-    borderRadius: '4px',
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
-  }
-  
-  // 如果有明确的位置，则使用指定位置
-  if (position.value.left !== undefined) {
-    style.position = 'absolute'
-    style.left = `${position.value.left}px`
-  }
-  
-  if (position.value.top !== undefined) {
-    style.position = 'absolute'
-    style.top = `${position.value.top}px`
-  } else if (position.value.left === undefined) {
-    // 如果没有指定位置，保持居中（由wrapper处理）
-    style.position = 'relative'
-  }
-  
-  return style
-})
-
-// 组件挂载后获取父容器引用并初始化位置
-onMounted(() => {
-  parentContainer.value = document.querySelector('.dock-layout') || window
-  
-  // 如果没有指定left或top，自动居中定位
-  if (position.value.left === undefined || position.value.top === undefined) {
-    let parentWidth, parentHeight
-    
-    if (parentContainer.value === window) {
-      parentWidth = window.innerWidth
-      parentHeight = window.innerHeight
-    } else if (parentContainer.value) {
-      const parentRect = parentContainer.value.getBoundingClientRect()
-      parentWidth = parentRect.width
-      parentHeight = parentRect.height
-    } else {
-      // 默认值，防止出错
-      parentWidth = 800
-      parentHeight = 600
-    }
-    
-    const tabWidth = position.value.width || 300
-    const tabHeight = position.value.height || 250
-    
-    // 计算居中位置
-    position.value.left = Math.floor((parentWidth - tabWidth) / 2)
-    position.value.top = Math.floor((parentHeight - tabHeight) / 2)
-  }
-})
 </script>
 
 <style scoped>
-.tab-page-wrapper {
-  position: relative;
-  overflow: visible;
-}
-
 .tab-page {
   display: flex;
   flex-direction: column;
+  width: 100%;
+  height: 100%;
   background: #ffffff;
-  border: 1px solid #c7d2ea;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }