JoyD/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue

<template>
  <div class="vs-area select-none" :class="{ 'is-maximized': isMaximized }">
    <!-- 顶部标题栏 -->
    <div class="vs-title-bar">
      <div class="vs-title-left">
        <div class="vs-app-icon" aria-label="AppIcon">
          <svg class="vs-icon" viewBox="0 0 17 17" aria-hidden="true">
            <path
              fill="#68217A"
              fill-rule="evenodd"
              clip-rule="evenodd"
              style="shape-rendering: crispEdges;"
              d="M1.5 4 L4.5 2 L12.5 6.2 L12.5 7.8 L4.5 12 L1.5 10 L6.2 7 Z
                 M4.7 4.8 L6.3 5.7 L4.7 6.6 Z
                 M10.9 8.2 L9.3 7.3 L10.9 6.4 Z" />
          </svg>
        </div>
        <span class="vs-title-text">{{ title || '面板区' }}</span>
      </div>
      <div class="vs-title-right title-bar-buttons flex items-center gap-0.5">
        <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="最大化" @click="onToggleMaximize">
          <svg class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
            <rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1"></rect>
            <rect x="3" y="3" width="5" height="1" fill="#b8c6ff"></rect>
            <rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c"></rect>
          </svg>
        </button>
        <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="关闭" @click="onClose">
          <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
            <line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1"></line>
            <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1"></line>
          </svg>
        </button>
      </div>
    </div>

    <!-- 内容区域（空） -->
    <div class="vs-content">
      <div class="vs-right">
        <div class="vs-icon-stage">
          <div aria-label="AppIcon">
            <svg width="560" height="560" viewBox="0 0 415 415" aria-hidden="true">
              <path
                fill="#68217A"
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M0 105 L45 85 L145 165 L315 0 L415 45 L415 375 L310 415 L150 255 L45 335 L0 315 Z
                M45 145 L105 210 L45 270 Z
                M205 210 L315 125 L310 290 Z" />                 
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed, defineEmits } from 'vue'

const props = defineProps({
  id: { type: String, required: true },
  title: { type: String, default: '面板区' },
  resizable: { type: Boolean, default: true },
  // 新增：初始状态（支持中文值）
  WindowState: { type: String, default: '正常' }
})

// 根据初始状态计算是否最大化
const isMaximized = computed(() => props.WindowState === '最大化' || props.WindowState === 'maximized')

const emit = defineEmits(['update:WindowState', 'close'])

const onToggleMaximize = () => {
  const next = isMaximized.value ? '正常' : '最大化'
  emit('update:WindowState', next)
}

const onClose = () => emit('close')
</script>

<style scoped>
:root { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* 颜色（贴近 VS 蓝色主题） */
.vs-area {
  --vs-blue-top: #4f72b3;
  --vs-blue-bottom: #3c5a99;
  --vs-blue-deep: #2c3e7a;
  --vs-tab-blue: #4869a8;
  --vs-border: #c7d2ea;
  --vs-bg: #f5f7fb;
  --vs-panel: #ffffff;
  --vs-muted: #6b7aa9;
  --vs-accent: #f0a000;
}

/* 容器 */
.vs-area {
  display: flex;
  flex-direction: column;
  background: var(--vs-bg);
  border: 1px solid var(--vs-border);
  min-width: 400px;
  min-height: 200px;
}

/* 标题栏 */
.vs-title-bar {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #ffffff;
  background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom));
  border-bottom: 1px solid var(--vs-blue-deep);
}
.vs-title-left { display: flex; align-items: center; gap: 6px; }
.vs-app-icon { font-size: 12px; opacity: 0.9; }
.vs-title-text { font-size: 13px; }
.vs-title-right { display: flex; align-items: center; gap: 6px; }
.vs-btn {
  width: 22px; height: 18px; line-height: 18px;
  color: #ffffff; background: transparent; border: none; padding: 0; cursor: default;
}
.vs-btn:hover { background: rgba(255,255,255,0.12); }
.vs-close:hover { background: #e81123; }

/* 面板标题行（左右） */
.vs-pane-headers {
  display: flex; align-items: center;
  height: 26px; background: var(--vs-tab-blue);
  border-bottom: 1px solid var(--vs-blue-deep);
  color: #eaf1ff;
  padding: 0 6px;
}
.vs-pane-header {
  display: flex; align-items: center; gap: 8px;
  height: 100%; padding: 0 10px;
}
.vs-pane-sep {
  width: 1px; height: 18px; background: rgba(255,255,255,0.3);
  margin: 0 8px;
}
.hdr-text { font-size: 12px; }
.hdr-icon { font-size: 10px; opacity: 0.9; }
.hdr-close { font-size: 12px; opacity: 0.9; }
.hdr-close:hover { opacity: 1; }

/* 内容区域 */
.vs-content { display: flex; flex: 1; overflow: hidden; }

/* 左侧输出 */
.vs-left { flex: 1; background: var(--vs-panel); display: flex; }
.left-blank { flex: 1; background: #eef1f9; border-right: 1px solid var(--vs-border); }

/* 中间分割线 */
.vs-divider { width: 1px; background: var(--vs-border); }

/* 右侧 Git 更改 */
.vs-right { flex: 1; background: #f5f7fb; padding: 0; }
.sec-text { margin-bottom: 8px; }
.vs-card {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--vs-border);
  padding: 6px 8px; border-radius: 2px; margin-bottom: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.card-icon { color: var(--vs-accent); }
.card-text { color: #000; }
.hint-text { color: #666; }

/* 滚动条（接近 VS） */
:deep(::-webkit-scrollbar) { width: 12px; height: 12px; }
:deep(::-webkit-scrollbar-track) { background: var(--vs-bg); border-left: 1px solid var(--vs-border); }
:deep(::-webkit-scrollbar-thumb) {
  background: linear-gradient(to bottom, #d0d6ea, #c0c7e0);
  border: 1px solid #b0b6d6; border-radius: 6px;
}
:deep(::-webkit-scrollbar-thumb:hover) { background: linear-gradient(to bottom, #c1c7e2, #b2b8d9); }

:deep(*) { box-sizing: border-box; }
.vs-area.is-maximized { width: 100%; height: 100%; }
.vs-icon-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; overflow: auto; }
.vs-app-icon--x200 { width: 2800px; height: 2800px; }
.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; }
</style>