<template>
  <div id="app">
    <h1>MCP Vue Client</h1>
    <p>Test page - 测试页面</p>
    <button @click="testClick">测试按钮</button>
    <div v-if="showMessage">{{ message }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const showMessage = ref(false)
const message = ref('Hello from Vue!')

const testClick = () => {
  showMessage.value = !showMessage.value
}
</script>

<style scoped>
#app {
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #2c3e50;
}

button {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #2980b9;
}
</style>