feat 搭建架构骨架

src/views/home/cpns/HomeCaseShowcase.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CaseCard } from '@/components'
+import type { BusinessType } from '@/types/api'
+import type { Case } from '@/types/business/cases'
+
+interface Props {
+  cases: Case[]
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{ categoryChange: [category: BusinessType | 'all'] }>()
+
+const activeCategory = ref<BusinessType | 'all'>('all')
+
+const categories: Array<{ label: string; value: BusinessType | 'all' }> = [
+  { label: '全部', value: 'all' },
+  { label: '互联网软件', value: 'internet' },
+  { label: '硬件电路', value: 'hardware' },
+  { label: '物联网全案', value: 'iot' },
+  { label: '生产制造', value: 'manufacturing' },
+]
+
+function switchCategory(value: BusinessType | 'all'): void {
+  activeCategory.value = value
+  emit('categoryChange', value)
+}
+</script>
+
+<template>
+  <section class="home-cases">
+    <div class="home-cases__head">
+      <h3 class="home-cases__title">
+        案例库精选
+      </h3>
+      <div class="home-cases__tabs">
+        <button
+          v-for="cat in categories"
+          :key="cat.value"
+          class="home-cases__tab"
+          :class="{ 'is-active': activeCategory === cat.value }"
+          @click="switchCategory(cat.value)"
+        >
+          {{ cat.label }}
+        </button>
+      </div>
+      <RouterLink to="/cases" class="home-cases__more link">
+        查看更多 >
+      </RouterLink>
+    </div>
+    <div class="home-cases__grid">
+      <CaseCard
+        v-for="item in cases"
+        :key="item.id"
+        :item="item"
+        @view="$router.push(`/cases/${$event}`)"
+      />
+    </div>
+  </section>
+</template>
+
+<style lang="less" scoped>
+.home-cases {
+  &__head {
+    .flex(row, space-between);
+    margin-bottom: @spacing-base;
+  }
+
+  &__title {
+    font-size: @font-size-xl;
+    font-weight: 600;
+    color: @heading-color;
+  }
+
+  &__tabs {
+    .flex(row, center);
+    gap: @spacing-sm;
+  }
+
+  &__tab {
+    height: 30px;
+    padding: 0 @spacing-base;
+    border-radius: @radius-round;
+    background: @white;
+    color: @text-color;
+    font-size: @font-size-sm;
+    transition: all 0.2s;
+
+    &.is-active {
+      background: @primary-color;
+      color: @white;
+    }
+  }
+
+  &__more {
+    font-size: @font-size-base;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: @spacing-base;
+  }
+}
+</style>