<template>
  <div id="app" @touchstart="handleTouchStart">
    <div class="min-h-screen bg-gradient-to-b from-primary/5 to-primary/10">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      lastTouchEnd: 0
    }
  },
  methods: {
    handleTouchStart(event) {
      // 防止双击缩放
      if (event.touches.length > 1) {
        event.preventDefault()
      }
    }
  },
  mounted() {
    // 添加全局触摸事件监听器
    document.addEventListener('touchend', (event) => {
      const now = Date.now()
      if (now - this.lastTouchEnd <= 300) {
        event.preventDefault()
      }
      this.lastTouchEnd = now
    }, { passive: false })
    
    // 阻止双指缩放
    document.addEventListener('touchmove', (event) => {
      if (event.touches.length > 1) {
        event.preventDefault()
      }
    }, { passive: false })
  },
  beforeUnmount() {
    // 移除事件监听器
    document.removeEventListener('touchend')
    document.removeEventListener('touchmove')
  }
}
</script>

<style>
#app {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Safari */
  -khtml-user-select: none;    /* Konqueror HTML */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version */
  touch-action: manipulation;  /* 优化触摸操作 */
}
</style> 