feat quickly

Tools/quickly/frontend/src/views/Home.vue

@@ -0,0 +1,143 @@
+<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">
+      <h2 class="section-title">功能介绍</h2>
+      <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;
+}
+
+.section-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 30px 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>