DianZhanDemo/app/pages/PowerStation/index.vue

<!--
  PowerStation/index.vue
  电站设备管理系统主页面
  使用网格布局展示3D模型视图、数据图表和属性面板
-->
<template>
  <div
    class="w-full h-screen flex flex-col overflow-hidden bg-[#0B1120] font-sans powerstation-scrollbar"
  >
    <!-- ============================================================
         头部导航
         ============================================================ -->
    <HeaderNavigation />

    <!-- ============================================================
         主要内容区域
         ============================================================ -->
    <div class="flex-1 flex justify-start relative min-h-0">
      <!-- 左侧面板：模型结构树 -->
      <ModelTreePanel class="w-[280px] h-full z-50 self-stretch flex-shrink-0" />

      <!-- 右侧面板：主内容区 -->
      <div class="flex-1 transition-all duration-300">
        <div
          class="h-full bg-[#020617] p-2 gap-2 overflow-hidden grid transition-all duration-300 min-h-0"
          :class="[
            maximizedComponent
              ? 'grid-cols-1 grid-rows-1'
              : 'grid-cols-[1fr_30%] grid-rows-[70%_30%]',
          ]"
        >
          <!-- 3D视图 - 左上区域 -->
          <Model3DView
            class="bg-[#0b1120] border border-cyan-500/20 rounded shadow-[0_0_10px_rgba(6,182,212,0.05)] transition-all duration-300 min-h-0"
            :class="[
              maximizedComponent === '3d'
                ? 'col-span-full row-span-full'
                : maximizedComponent
                  ? 'hidden'
                  : 'col-start-1 row-start-1',
            ]"
            :is-maximized="maximizedComponent === '3d'"
            @toggle-maximize="toggleMaximize('3d')"
          />

          <!-- 数据图表 - 左下区域 -->
          <DataChartsSection
            class="bg-[#0b1120] border border-cyan-500/20 rounded shadow-[0_0_10px_rgba(6,182,212,0.05)] overflow-hidden transition-all duration-300 min-h-0"
            :class="[
              maximizedComponent === 'charts'
                ? 'col-span-full row-span-full'
                : maximizedComponent
                  ? 'hidden'
                  : 'col-start-1 row-start-2',
            ]"
            :is-maximized="maximizedComponent === 'charts'"
            @toggle-maximize="toggleMaximize('charts')"
          />

          <!-- 属性面板 - 右侧区域（跨两行） -->
          <ModelPropertiesPanel
            class="bg-[#0b1120] border border-cyan-500/20 rounded shadow-[0_0_10px_rgba(6,182,212,0.05)] overflow-hidden relative transition-all duration-300 border-l border-cyan-500/20"
            :class="[
              maximizedComponent === 'props'
                ? 'col-span-full row-span-full'
                : maximizedComponent
                  ? 'hidden'
                  : 'col-start-2 row-span-2',
            ]"
            :is-maximized="maximizedComponent === 'props'"
            @toggle-maximize="toggleMaximize('props')"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * PowerStation 主页面
 * 电站设备管理系统的核心页面
 * 集成3D视图、数据图表和属性面板
 */
import DataChartsSection from '~/components/PowerStation/DataChartsSection.vue'
import HeaderNavigation from '~/components/PowerStation/HeaderNavigation.vue'
import Model3DView from '~/components/PowerStation/Model3DView.vue'
import ModelPropertiesPanel from '~/components/PowerStation/ModelPropertiesPanel.vue'
import ModelTreePanel from '~/components/PowerStation/ModelTreePanel.vue'

// ============================================================
// 页面配置
// ============================================================

definePageMeta({
  layout: false, // 使用全屏自定义布局
})

// ============================================================
// 状态和引用
// ============================================================

const route = useRoute()
const store = usePowerStationStore()

/** 当前最大化的组件 */
const maximizedComponent = ref<string | null>(null)

// ============================================================
// 方法
// ============================================================

/**
 * 切换组件最大化状态
 * @param component - 组件标识（'3d' | 'charts' | 'props'）
 */
const toggleMaximize = (component: string) => {
  if (maximizedComponent.value === component) {
    maximizedComponent.value = null // 还原
  } else {
    maximizedComponent.value = component // 最大化指定组件
  }
}

// ============================================================
// 路由同步
// ============================================================

// 监听路由变化，确保store与路由参数同步
watch(
  () => route.query.currentNodeId,
  newId => {
    if (newId && typeof newId === 'string') {
      // 只在完整模式下同步
      if (store.loadMode && store.currentNodeId !== newId) {
        console.log('PowerStation页面：同步路由currentNodeId到store:', newId)
        store.currentNodeId = newId
      }
    }
  },
  { immediate: true }
)

// ============================================================
// 生命周期
// ============================================================

onMounted(() => {
  // 保留路由参数检查，供后续扩展使用
  const currentNodeId = route.query.currentNodeId as string
  if (currentNodeId) {
    // 节点选择逻辑由子组件处理
  }
})
</script>

<style>
/* ============================================================
   页面全局样式
   ============================================================ */

body {
  margin: 0;
  overflow: hidden;
}

/* ============================================================
   全局滚动条样式
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(34, 211, 238, 0.3);
  border-radius: 4px;
  border: 1px solid rgba(34, 211, 238, 0.1);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
}

::-webkit-scrollbar-corner {
  background: rgba(15, 23, 42, 0.3);
}

/* Firefox滚动条样式 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 211, 238, 0.3) rgba(15, 23, 42, 0.3);
}

/* ============================================================
   PowerStation页面特殊滚动条样式
   ============================================================ */

.powerstation-scrollbar ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.powerstation-scrollbar ::-webkit-scrollbar-track {
  background: rgba(11, 17, 32, 0.5);
}

.powerstation-scrollbar ::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.4);
  border-radius: 3px;
}

.powerstation-scrollbar ::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.6);
}
</style>