utils/src/views/HomeView.vue

<template>
  <div class="min-h-screen bg-main">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 w-full bg-card border-b border-opacity-15 border-primary-500 shadow-lg" style="z-index: 999;">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <!-- Logo和标题 -->
          <div class="flex items-center space-x-3">
            <div class="text-2xl font-bold text-purple">
              子归云
            </div>
            <div class="text-sm text-secondary hidden sm:block">
              {{ t('common.tools') }}
            </div>
          </div>
          
          <!-- 主题和语言切换 -->
          <div class="flex items-center space-x-2">
            <ThemeToggle />
            <LanguageToggle />
          </div>
        </div>
      </div>
    </nav>

    <!-- 主内容区 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pt-24">
      <!-- 搜索栏 -->
      <div class="mb-8">
        <div class="relative max-w-md mx-auto">
          <input
            v-model="searchTerm"
            type="text"
            :placeholder="t('common.search') + '...'"
            class="input-field pl-10 text-center"
            @keyup.enter="searchTools"
          >
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <FontAwesomeIcon :icon="['fas', 'search']" class="text-tertiary" />
          </div>
          <button
            v-if="searchTerm"
            @click="clearSearch"
            class="absolute inset-y-0 right-0 pr-3 flex items-center"
          >
            <FontAwesomeIcon :icon="['fas', 'times']" class="text-tertiary hover:text-primary transition-colors" />
          </button>
        </div>
      </div>

      <!-- 分类过滤 -->
      <div class="mb-8">
        <div class="flex flex-wrap justify-center gap-2">
          <button
            v-for="category in categories"
            :key="category.code"
            @click="() => setActiveCategory(category.code)"
            :class="[
              'px-4 py-2 rounded-full text-sm font-medium transition-all duration-200',
              activeCategory === category.code
                ? 'bg-primary-500 text-white shadow-lg'
                : 'bg-card text-secondary hover:bg-block-hover hover:text-primary'
            ]"
          >
            {{ t(`categories.${category.code}`) }}
          </button>
        </div>
      </div>

      <!-- 工具网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <div
          v-for="tool in filteredTools"
          :key="tool.code"
          @click="() => navigateToTool(tool.code)"
          class="card p-6 cursor-pointer group animate-fadeIn"
        >
          <div class="flex items-center justify-between mb-4">
            <div class="icon-container">
              <FontAwesomeIcon 
                :icon="tool.icon" 
                class="text-2xl text-primary-light group-hover:text-primary transition-colors duration-200"
              />
            </div>
            <button
              @click.stop="() => toggleFavorite(tool.code)"
              class="text-tertiary hover:text-warning transition-colors"
            >
              <FontAwesomeIcon 
                :icon="favoriteTools.includes(tool.code) ? ['fas', 'star'] : ['far', 'star']"
                :class="favoriteTools.includes(tool.code) ? 'text-warning' : ''"
              />
            </button>
          </div>
          
          <h3 class="text-lg font-semibold text-primary mb-2">
            {{ getToolTitle(tool.code) }}
          </h3>
          
          <p class="text-sm text-secondary line-clamp-2">
            {{ getToolDescription(tool.code) }}
          </p>
          
          <div class="mt-4 flex flex-wrap gap-1">
            <span
              v-for="cat in tool.category.slice(0, 2)"
              :key="cat"
              class="px-2 py-1 text-xs rounded bg-block text-tertiary"
            >
              {{ t(`categories.${cat}`) }}
            </span>
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div 
        v-if="filteredTools.length === 0"
        class="text-center py-16"
      >
        <FontAwesomeIcon :icon="['fas', 'search']" class="text-6xl text-tertiary mb-4" />
        <h3 class="text-xl font-semibold text-secondary mb-2">
          {{ t('common.noData') }}
        </h3>
        <p class="text-tertiary">
          尝试调整搜索条件或选择其他分类
        </p>
      </div>
    </main>

    <!-- 返回顶部按钮 -->
    <BackToTop />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useLanguage } from '@/composables/useLanguage'
import tools from '@/config/tools'
import categories from '@/config/categories'
import type { Tool } from '@/types/tools'

// 组件导入
import ThemeToggle from '@/components/ThemeToggle.vue'
import LanguageToggle from '@/components/LanguageToggle.vue'
import BackToTop from '@/components/BackToTop.vue'

const router = useRouter()
const { t } = useLanguage()

// 响应式状态
const searchTerm = ref('')
const activeCategory = ref('all')
const favoriteTools = ref<string[]>([])

// 设置激活分类
const setActiveCategory = (categoryCode: string) => {
  activeCategory.value = categoryCode
  localStorage.setItem('lastActiveCategory', categoryCode)
}

// 过滤工具
const filteredTools = computed(() => {
  let filtered = tools
  
  // 分类过滤
  if (activeCategory.value !== 'all') {
    filtered = filtered.filter(tool => tool.category.includes(activeCategory.value))
  }
  
  // 搜索过滤
  if (searchTerm.value.trim()) {
    const searchLower = searchTerm.value.toLowerCase().trim()
    filtered = filtered.filter(tool => {
      const title = getToolTitle(tool.code).toLowerCase()
      const description = getToolDescription(tool.code).toLowerCase()
      const keywords = tool.keywords.join(' ').toLowerCase()
      
      return title.includes(searchLower) || 
             description.includes(searchLower) || 
             keywords.includes(searchLower)
    })
  }
  
  return filtered
})

// 获取工具标题
const getToolTitle = (toolCode: string) => {
  return t(`tools.${toolCode}.title`) || toolCode
}

// 获取工具描述
const getToolDescription = (toolCode: string) => {
  return t(`tools.${toolCode}.description`) || ''
}

// 导航到工具页面
const navigateToTool = (toolCode: string) => {
  router.push(`/tools/${toolCode}`)
}

// 搜索工具
const searchTools = () => {
  // 搜索逻辑已经在computed中处理
}

// 清除搜索
const clearSearch = () => {
  searchTerm.value = ''
}

// 切换收藏
const toggleFavorite = (toolCode: string) => {
  const index = favoriteTools.value.indexOf(toolCode)
  if (index > -1) {
    favoriteTools.value.splice(index, 1)
  } else {
    favoriteTools.value.push(toolCode)
  }
  localStorage.setItem('favoriteTools', JSON.stringify(favoriteTools.value))
}

// 从本地存储恢复数据
onMounted(() => {
  // 恢复收藏工具
  const saved = localStorage.getItem('favoriteTools')
  if (saved) {
    favoriteTools.value = JSON.parse(saved)
  }
  
  // 恢复激活分类
  const savedCategory = localStorage.getItem('lastActiveCategory')
  if (savedCategory) {
    activeCategory.value = savedCategory
  }
})
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>