<!-- DemoPage.vue -->
<template>
  <div class="demo-page">
    <h1>开发工具组件演示</h1>
    <p>这是一个演示页面，向下滚动可以看到开发工具组件始终浮动在页面上</p>
    
    <div v-for="i in 50" :key="i" class="demo-block">
      <h2>区块 {{ i }}</h2>
      <p>这里是区块 {{ i }} 的内容...</p>
      <n-button>按钮 {{ i }}</n-button>
      <n-input placeholder="输入框 {{ i }}" />
    </div>
    
    <DevTools />
  </div>
</template>

<script setup lang="ts">
import { NButton, NInput } from 'naive-ui'
import DevTools from './DevTools.vue'
</script>

<style scoped>
.demo-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-block {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}
</style>