<template>
  <PageWrapper title="车间可视化测试">
    <div style="padding: 20px;">
      <h1 style="color: #00d4ff;">车间可视化测试页面</h1>
      <p style="margin: 20px 0;">如果你能看到这个页面，说明页面渲染正常！</p>

      <a-button type="primary" @click="testThreeJS">
        测试 Three.js
      </a-button>

      <div v-if="result" style="margin-top: 20px; padding: 15px; background: #f0f0f0; border-radius: 4px;">
        {{ result }}
      </div>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';

  const result = ref('');

  const testThreeJS = () => {
    import('three').then((THREE) => {
      result.value = 'Three.js 加载成功！版本: ' + THREE.VERSION;
      console.log('Three.js:', THREE);
    }).catch((err) => {
      result.value = 'Three.js 加载失败: ' + err.message;
    });
  };
</script>