tool.xpcool.com/src/views/HomeView.vue

<template>
  <div class="page-wrap">
    <!-- 站点头部介绍 -->
    <div class="hero">
      <h1 class="hero-title">在线工具箱</h1>
      <p class="hero-desc">
        {{ tools.length }} 个常用工具，全部在浏览器本地完成计算与文件处理，不上传任何数据到服务器。
      </p>
      <div class="hero-badges">
        <t-tag theme="success" variant="light">纯前端</t-tag>
        <t-tag theme="primary" variant="light">数据不出浏览器</t-tag>
        <t-tag theme="warning" variant="light">免费使用</t-tag>
      </div>
    </div>

    <!-- 按分类分区的工具卡片导航 -->
    <section v-for="group in groups" :key="group.category.key" class="category-section">
      <div class="category-head">
        <h2 class="category-title">{{ group.category.label }}</h2>
        <span class="category-desc">{{ group.category.desc }}</span>
        <span class="category-count">{{ group.items.length }} 个工具</span>
      </div>
      <div class="tool-grid">
        <router-link
          v-for="tool in group.items"
          :key="tool.path"
          :to="`/${tool.path}`"
          class="tool-card"
        >
          <span class="tool-icon">
            <component :is="tool.icon" />
          </span>
          <span class="tool-name">{{ tool.name }}</span>
          <span class="tool-desc">{{ tool.desc }}</span>
          <span class="tool-arrow">
            <ChevronRightIcon />
          </span>
        </router-link>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ChevronRightIcon } from 'tdesign-icons-vue-next'
import { tools, groupedTools } from '@/router/tools'

/** 分类分组（新增分类自动出现，无需改动本页面） */
const groups = groupedTools()
</script>

<style scoped>
.hero {
  text-align: center;
  padding: 24px 0 32px;
}
.hero-title {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 700;
  color: var(--td-text-color-primary);
}
.hero-desc {
  margin: 0 auto 14px;
  max-width: 560px;
  font-size: 14px;
  color: var(--td-text-color-secondary);
}
.hero-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* 分类分区 */
.category-section {
  margin-bottom: 28px;
}
.category-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.category-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--td-text-color-primary);
}
.category-desc {
  font-size: 13px;
  color: var(--td-text-color-secondary);
}
.category-count {
  font-size: 12px;
  color: var(--td-text-color-placeholder);
}

/* 工具卡片栅格：响应式，移动端单列 */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--td-border-level-1-color);
  border-radius: 10px;
  background: var(--td-bg-color-container);
  text-decoration: none;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    border-color 0.15s;
}
.tool-card:hover {
  transform: translateY(-3px);
  border-color: var(--td-brand-color);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
html[theme-mode='dark'] .tool-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.tool-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--td-brand-color);
  background: var(--td-brand-color-light);
}
.tool-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--td-text-color-primary);
}
.tool-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--td-text-color-secondary);
}
.tool-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--td-text-color-placeholder);
}
@media (max-width: 767px) {
  .hero-title {
    font-size: 24px;
  }
  .tool-grid {
    grid-template-columns: 1fr;
  }
}
</style>