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

const features = reactive([
  {
    title: '更新 Common',
    description: '批量更新多个项目中 Common 库的版本，支持自定义 Go Module Name，自动执行 go get 和 go mod tidy 命令。',
    icon: '🔄',
    path: '/update-common'
  },
  {
    title: 'MySQL Model',
    description: '执行 gen.ps1 脚本生成 model 和 query 文件，自动替换 import 路径，支持多数据库配置管理。',
    icon: '🗄️',
    path: '/mysql-model'
  },
  {
    title: 'Swagger',
    description: '配置 Swagger 目录，自动扫描所有 .swagger.json 文件，启动本地 HTTP 服务查看 API 文档。',
    icon: '📚',
    path: '/swagger'
  },
  {
    title: '设置',
    description: '自定义主题、语言、通知等应用设置，管理全局配置。',
    icon: '⚙️',
    path: '/settings'
  }
])

</script>

<template>
  <div class="home-container">
    <div class="welcome-section">
      <h1 class="welcome-title">欢迎使用 Quickly</h1>
      <p class="welcome-subtitle">高效开发工具，提升工作效率</p>
    </div>

    <div class="features-section">
      <div class="features-grid">
        <el-card v-for="(feature, index) in features" :key="index" class="feature-card">
          <div class="feature-icon">{{ feature.icon }}</div>
          <h3 class="feature-title">{{ feature.title }}</h3>
          <p class="feature-description">{{ feature.description }}</p>
        </el-card>
      </div>
    </div>
  </div>
</template>

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

.welcome-section {
  text-align: center;
  margin: 40px 0;
}

.welcome-title {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 10px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-subtitle {
  font-size: 18px;
  color: #666;
  margin: 0;
}

.features-section {
  margin: 40px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  padding: 30px 20px;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.feature-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 15px 0;
  color: #333;
}

.feature-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.info-card {
  margin: 40px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.info-content {
  padding: 20px 0;
}
</style>
