恢复修改的数据

src/views/cases/index.vue

@@ -7,16 +7,22 @@ import { PaginationBar } from '@/components'
 import { useCasesStore } from '@/stores/modules/cases'
 import type { CaseQuery } from '@/types/business/cases'
 import CasesFilter from './cpns/CasesFilter.vue'
+import CasesSearchBar from './cpns/CasesSearchBar.vue'
 import CasesGrid from './cpns/CasesGrid.vue'
 
 const router = useRouter()
 const casesStore = useCasesStore()
-const { query, list, total, counts } = storeToRefs(casesStore)
+const { query, list, total, previewTotal, typeOptions, industryOptions, scaleOptions, caseTotal }
+  = storeToRefs(casesStore)
 
 function onUpdateQuery(next: CaseQuery): void {
   casesStore.setQuery(next)
 }
 
+function onUpdateKeyword(keyword: string): void {
+  casesStore.setQuery({ ...query.value, keyword })
+}
+
 function onSearch(): void {
   void casesStore.search()
 }
@@ -25,6 +31,14 @@ function onReset(): void {
   void casesStore.resetQuery()
 }
 
+function onToggleFavoriteOnly(): void {
+  void casesStore.toggleFavoriteOnly()
+}
+
+function onFavorite(id: string): void {
+  void casesStore.toggleFavorite(id)
+}
+
 function onPageChange(page: number): void {
   void casesStore.changePage(page)
 }
@@ -34,48 +48,76 @@ function onViewDetail(id: string): void {
 }
 
 onMounted(() => {
-  void Promise.all([casesStore.fetchCases(), casesStore.fetchCounts()])
+  // 筛选面板选项全部来自接口：业务类型 / 所属行业 / 项目规模三组都走 /categories，完成时间由前端算
+  void Promise.all([casesStore.fetchCategories(), casesStore.fetchCases()])
 })
 </script>
 
 <template>
   <div class="cases">
-    <header class="cases__head">
-      <h1 class="cases__title">
-        成功案例库
-      </h1>
-      <p class="cases__slogan text-secondary">
-        海量软硬件研发与量产落地真实案例，借鉴成熟实践，降低项目试错成本。
-      </p>
+    <header class="cases__hero">
+      <div class="container">
+        <h1 class="cases__title">
+          成功案例库
+        </h1>
+        <p class="cases__slogan">
+          海量软硬件研发与量产落地真实案例，借鉴成熟实践，降低项目试错成本。
+        </p>
+      </div>
     </header>
 
-    <CasesFilter
-      :query="query"
-      :counts="counts"
-      :total="total"
-      @update:query="onUpdateQuery"
-      @search="onSearch"
-      @reset="onReset"
-    />
+    <div class="container cases__body">
+      <CasesFilter
+        :query="query"
+        :type-options="typeOptions"
+        :industry-options="industryOptions"
+        :scale-options="scaleOptions"
+        :case-total="caseTotal"
+        :preview-total="previewTotal"
+        @update:query="onUpdateQuery"
+        @search="onSearch"
+        @reset="onReset"
+      />
 
-    <CasesGrid :cases="list" @view="onViewDetail" />
+      <div class="cases__main">
+        <CasesSearchBar
+          :keyword="query.keyword"
+          :favorite-only="query.favoriteOnly"
+          @update:keyword="onUpdateKeyword"
+          @search="onSearch"
+          @reset="onReset"
+          @toggle-favorite-only="onToggleFavoriteOnly"
+        />
 
-    <PaginationBar
-      :page="query.page"
-      :page-size="query.pageSize"
-      :total="total"
-      @page-change="onPageChange"
-    />
+        <CasesGrid
+          :cases="list"
+          :total="total"
+          @view="onViewDetail"
+          @favorite="onFavorite"
+        />
+
+        <div class="cases__pager">
+          <PaginationBar
+            :page="query.page"
+            :page-size="query.pageSize"
+            :total="total"
+            @page-change="onPageChange"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="less" scoped>
 .cases {
-  .flex(column, flex-start);
-  gap: @spacing-base;
-  padding-top: @spacing-xl;
   padding-bottom: @spacing-xxl;
 
+  &__hero {
+    padding: @spacing-lg 0;
+    background: @white;
+  }
+
   &__title {
     font-size: @font-size-xxl;
     font-weight: 600;
@@ -85,6 +127,24 @@ onMounted(() => {
   &__slogan {
     margin-top: @spacing-xs;
     font-size: @font-size-base;
+    color: @text-color-secondary;
+  }
+
+  &__body {
+    .flex(row, flex-start, flex-start);
+    gap: @spacing-base;
+    padding-top: @spacing-base;
+  }
+
+  &__main {
+    .flex(column, flex-start);
+    flex: 1;
+    gap: @spacing-base;
+    min-width: 0;
+  }
+
+  &__pager {
+    .flex(row, flex-end);
   }
 }
 </style>