136 lines
2.8 KiB
Vue
136 lines
2.8 KiB
Vue
<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>
|