ToolBox/src/views/Home.vue

<template>
  <div class="home-container">
    <div class="hero-section">
      <h2 class="hero-title">
        {{ t('home.heroToday', { date: heroDate }) }}
      </h2>
      <p id="jinrishici-sentence" class="hero-subtitle"></p>
    </div>
    <div class="tools-grid">
      <router-link
        v-for="tool in tools"
        :key="tool.path"
        :to="localePath(currentPathLocale, tool.path)"
        class="tool-card"
      >
        <h3 class="tool-title">{{ tool.title }}</h3>
        <p class="tool-description">{{ tool.description }}</p>
      </router-link>
    </div>
    <div class="footer-section">
      <p class="icp-info">苏ICP备2022013040号-1</p>
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { localePath } from '../router'

const { t, locale } = useI18n()
const route = useRoute()

const currentPathLocale = computed(() => route.params.locale || 'zh')

const heroDate = computed(() => {
  const d = new Date()
  const y = d.getFullYear()
  const m = d.getMonth() + 1
  const day = d.getDate()
  if (locale.value === 'en') {
    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
  }
  return `${y}年${m}月${day}日`
})

const tools = computed(() => [
  { path: 'json-formatter', title: t('home.toolJson'), description: t('home.toolJsonDesc') },
  { path: 'comparator', title: t('home.toolComparator'), description: t('home.toolComparatorDesc') },
  { path: 'encoder-decoder', title: t('home.toolEncoderDecoder'), description: t('home.toolEncoderDecoderDesc') },
  { path: 'variable-name', title: t('home.toolVariableName'), description: t('home.toolVariableNameDesc') },
  { path: 'qr-code', title: t('home.toolQrCode'), description: t('home.toolQrCodeDesc') },
  { path: 'timestamp-converter', title: t('home.toolTimestamp'), description: t('home.toolTimestampDesc') },
  { path: 'color-converter', title: t('home.toolColor'), description: t('home.toolColorDesc') },
])

onMounted(() => {
  const words_script = document.createElement('script')
  words_script.charset = 'utf-8'
  words_script.src = 'https://sdk.jinrishici.com/v2/browser/jinrishici.js'
  document.body.appendChild(words_script)
})
</script>

<style scoped>
.home-container {
  width: 100%;
  background: #ffffff;
}

.hero-section {
  text-align: center;
  padding: 3rem 0;
  color: #1a1a1a;
}

.hero-title {
  font-size: 3rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: #1a1a1a;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: #666666;
}

.tools-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem auto 0;
  max-width: 1200px;
  padding: 0 1rem;
}

.tool-card {
  background: #ffffff;
  border-radius: 6px;
  padding: 2rem;
  text-decoration: none;
  color: #1a1a1a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e5e5;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 calc(25% - 1.125rem);
  max-width: calc(25% - 1.125rem);
  min-width: 250px;
}

.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #d0d0d0;
  background: #ffffff;
}

.tool-title {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #1a1a1a;
}

.tool-description {
  color: #666666;
  line-height: 1.6;
  font-size: 0.875rem;
}

@media (max-width: 1200px) {
  .tool-card {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
  }
}

@media (max-width: 900px) {
  .tool-card {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .tools-grid {
    gap: 1rem;
    max-width: 100%;
    padding: 0;
  }

  .tool-card {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 1.5rem;
  }
}

.footer-section {
  text-align: center;
  padding: 2rem 0;
  margin-top: 3rem;
  border-top: 1px solid #e5e5e5;
}

.icp-info {
  color: #999999;
  font-size: 0.875rem;
  margin: 0;
}
</style>