<template>
  <div class="vue-flow-test">
    <h2>Vue Flow 测试页面</h2>
    <div class="flow-container">
      <VueFlow
        v-model:nodes="nodes"
        v-model:edges="edges"
        :default-viewport="{ zoom: 1 }"
        :min-zoom="0.2"
        :max-zoom="4"
        fit-view-on-init
      >
        <Background 
          pattern-color="#aaa" 
          :gap="16"
        />
        <Controls />
        <MiniMap position="top-right" />
      </VueFlow>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'

// 导入Vue Flow样式
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'
import '@vue-flow/controls/dist/style.css'
import '@vue-flow/minimap/dist/style.css'

defineOptions({ name: 'VueFlowTest' })

// 简单的测试数据
const nodes = ref([
  {
    id: '1',
    position: { x: 100, y: 100 },
    data: { label: '节点 1' },
  },
  {
    id: '2',
    position: { x: 300, y: 100 },
    data: { label: '节点 2' },
  },
])

const edges = ref([
  {
    id: 'e1-2',
    source: '1',
    target: '2',
  },
])
</script>

<style scoped>
.vue-flow-test {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flow-container {
  flex: 1;
  background: #f5f5f5;
}
</style>