feat 搭建架构骨架

src/views/cases/index.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRouter } from 'vue-router'
+import { PaginationBar } from '@/components'
+// 页面容器：只做组件引入、props 分发、事件中转，数据只经 store
+import { useCasesStore } from '@/stores/modules/cases'
+import type { CaseQuery } from '@/types/business/cases'
+import CasesFilter from './cpns/CasesFilter.vue'
+import CasesGrid from './cpns/CasesGrid.vue'
+
+const router = useRouter()
+const casesStore = useCasesStore()
+const { query, list, total, counts } = storeToRefs(casesStore)
+
+function onUpdateQuery(next: CaseQuery): void {
+  casesStore.setQuery(next)
+}
+
+function onSearch(): void {
+  void casesStore.search()
+}
+
+function onReset(): void {
+  void casesStore.resetQuery()
+}
+
+function onPageChange(page: number): void {
+  void casesStore.changePage(page)
+}
+
+function onViewDetail(id: string): void {
+  void router.push(`/cases/${id}`)
+}
+
+onMounted(() => {
+  void Promise.all([casesStore.fetchCases(), casesStore.fetchCounts()])
+})
+</script>
+
+<template>
+  <div class="cases">
+    <header class="cases__head">
+      <h1 class="cases__title">
+        成功案例库
+      </h1>
+      <p class="cases__slogan text-secondary">
+        海量软硬件研发与量产落地真实案例，借鉴成熟实践，降低项目试错成本。
+      </p>
+    </header>
+
+    <CasesFilter
+      :query="query"
+      :counts="counts"
+      :total="total"
+      @update:query="onUpdateQuery"
+      @search="onSearch"
+      @reset="onReset"
+    />
+
+    <CasesGrid :cases="list" @view="onViewDetail" />
+
+    <PaginationBar
+      :page="query.page"
+      :page-size="query.pageSize"
+      :total="total"
+      @page-change="onPageChange"
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.cases {
+  .flex(column, flex-start);
+  gap: @spacing-base;
+  padding-top: @spacing-xl;
+  padding-bottom: @spacing-xxl;
+
+  &__title {
+    font-size: @font-size-xxl;
+    font-weight: 600;
+    color: @heading-color;
+  }
+
+  &__slogan {
+    margin-top: @spacing-xs;
+    font-size: @font-size-base;
+  }
+}
+</style>