feat:消息中心和案例库

src/pages/case-library/components/CaseFilterPanel.vue

@@ -6,7 +6,9 @@ import {
   CASE_FILTER_TIME_RANGES,
   DEFAULT_CASE_FILTER,
 } from '@/constants/case-library'
-import type { CaseFilterValues, CaseItem } from '@/types/case-library'
+import type { CaseFilterValues } from '@/types/case-library'
+import type { CaseFilterTarget } from '@/utils/case-filter'
+import filterIcon from '@/static/icons/icon-filter.svg'
 import {
   cloneCaseFilter,
   getSelectedFilterTags,
@@ -16,7 +18,7 @@ import {
 
 const props = defineProps<{
   visible: boolean
-  cases: CaseItem[]
+  cases: CaseFilterTarget[]
   value: CaseFilterValues
 }>()
 
@@ -152,7 +154,7 @@ function handleConfirm() {
         <view class="case-filter-panel__title-wrap">
           <image
             class="case-filter-panel__title-icon"
-            src="/static/icons/icon-filter.svg"
+            :src="filterIcon"
             mode="aspectFit"
           />
           <text class="case-filter-panel__title">

src/pages/case-library/detail/index.vue

@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getCaseDetail } from '@/constants/case-detail'
+import type { CaseDetail } from '@/types/case-library'
+import { navigateBackWithFallback } from '@/utils/navigate-back'
+import deleteIcon from '@/static/icons/X.png'
+
+const detail = ref<CaseDetail | null>(null)
+
+const overviewItems = [
+  { label: '客户类型', key: 'clientType' as const },
+  { label: '所属行业', key: 'industry' as const },
+  { label: '规模', key: 'scale' as const },
+  { label: '项目周期', key: 'cycle' as const },
+  { label: '服务团队', key: 'teamSize' as const },
+  { label: '完成时间', key: 'completedAt' as const },
+]
+
+onLoad((options) => {
+  const rawId = options?.id
+  const id = rawId ? decodeURIComponent(String(rawId)) : '1'
+  detail.value = getCaseDetail(id)
+
+  if (!detail.value) {
+    uni.showToast({ title: '案例不存在', icon: 'none' })
+    setTimeout(() => uni.navigateBack(), 1500)
+  }
+})
+
+function handleBack() {
+  navigateBackWithFallback('/pages/case-library/index')
+}
+</script>
+
+<template>
+  <view
+    v-if="detail"
+    class="case-detail"
+  >
+    <view class="case-detail__navbar">
+      <view
+        class="case-detail__back"
+        @tap="handleBack"
+      >
+        <image
+          class="case-detail__back-icon"
+          src="/static/icons/icon-back.svg"
+          mode="aspectFit"
+        />
+      </view>
+      <text class="case-detail__navbar-title">
+        案例详情
+      </text>
+      <view class="case-detail__navbar-placeholder" />
+    </view>
+
+    <scroll-view
+      class="case-detail__scroll"
+      scroll-y
+      :show-scrollbar="false"
+    >
+      <view class="case-detail__content">
+        <view class="case-detail__hero">
+          <text class="case-detail__tag">
+            {{ detail.category }}
+          </text>
+          <text class="case-detail__title">
+            {{ detail.title }}
+          </text>
+        </view>
+
+        <view class="case-detail__section">
+          <text class="case-detail__section-title">
+            项目概览
+          </text>
+          <view class="case-detail__overview">
+            <view
+              v-for="item in overviewItems"
+              :key="item.key"
+              class="case-detail__overview-item"
+            >
+              <text class="case-detail__overview-label">
+                {{ item.label }}
+              </text>
+              <text class="case-detail__overview-value">
+                {{ detail[item.key] }}
+              </text>
+            </view>
+          </view>
+        </view>
+
+        <view class="case-detail__section">
+          <text class="case-detail__section-title">
+            项目背景
+          </text>
+          <view class="case-detail__image-placeholder" />
+          <text class="case-detail__paragraph">
+            {{ detail.background }}
+          </text>
+        </view>
+
+        <view class="case-detail__section">
+          <text class="case-detail__section-title">
+            客户痛点
+          </text>
+          <text class="case-detail__paragraph">
+            {{ detail.painPoints }}
+          </text>
+        </view>
+
+        <view class="case-detail__section">
+          <text class="case-detail__section-title">
+            需求描述
+          </text>
+          <text class="case-detail__paragraph">
+            {{ detail.requirement }}
+          </text>
+        </view>
+
+        <view class="case-detail__section case-detail__section--last">
+          <text class="case-detail__section-title">
+            交付成果
+          </text>
+          <text class="case-detail__paragraph">
+            {{ detail.deliverables }}
+          </text>
+          <scroll-view
+            class="case-detail__attachments"
+            scroll-x
+            :show-scrollbar="false"
+          >
+            <view class="case-detail__attachments-inner">
+              <view
+                v-for="file in detail.attachments"
+                :key="file.id"
+                class="case-detail__attachment"
+              >
+                <view class="case-detail__attachment-remove">
+                  <image
+                    class="case-detail__attachment-remove-icon"
+                    :src="deleteIcon"
+                    mode="aspectFit"
+                  />
+                </view>
+                <image
+                  class="case-detail__attachment-icon"
+                  :src="file.icon"
+                  mode="aspectFit"
+                />
+                <text class="case-detail__attachment-name">
+                  {{ file.name }}
+                </text>
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.case-detail {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: $color-bg-section;
+}
+
+.case-detail__navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  padding: calc(var(--status-bar-height, 44px) + 12rpx) 24rpx 20rpx;
+  background: $color-bg-page;
+}
+
+.case-detail__back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.case-detail__back-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.case-detail__navbar-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.case-detail__navbar-placeholder {
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.case-detail__scroll {
+  flex: 1;
+  height: 0;
+}
+
+.case-detail__content {
+  padding: 24rpx 24rpx calc(32rpx + env(safe-area-inset-bottom));
+}
+
+.case-detail__hero {
+  padding: 32rpx 28rpx;
+  background: linear-gradient(135deg, #eef4ff 0%, #ffffff 60%);
+  border-radius: 20rpx;
+}
+
+.case-detail__tag {
+  display: inline-block;
+  padding: 6rpx 16rpx;
+  font-size: 22rpx;
+  color: #ffffff;
+  background: $color-primary;
+  border-radius: 8rpx;
+}
+
+.case-detail__title {
+  display: block;
+  margin-top: 20rpx;
+  font-size: 36rpx;
+  font-weight: 600;
+  line-height: 1.4;
+  color: $color-text-primary;
+}
+
+.case-detail__section {
+  margin-top: 24rpx;
+  padding: 28rpx 24rpx;
+  background: $color-bg-page;
+  border-radius: 20rpx;
+
+  &--last {
+    margin-bottom: 0;
+  }
+}
+
+.case-detail__section-title {
+  display: block;
+  margin-bottom: 24rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.case-detail__overview {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.case-detail__overview-item {
+  display: flex;
+  flex-direction: column;
+  width: 33.33%;
+  margin-bottom: 24rpx;
+}
+
+.case-detail__overview-label {
+  font-size: 22rpx;
+  color: $color-text-secondary;
+}
+
+.case-detail__overview-value {
+  margin-top: 8rpx;
+  font-size: 26rpx;
+  color: $color-text-primary;
+}
+
+.case-detail__image-placeholder {
+  height: 280rpx;
+  margin-bottom: 24rpx;
+  background: #e8eaed;
+  border-radius: 12rpx;
+}
+
+.case-detail__paragraph {
+  display: block;
+  font-size: 28rpx;
+  line-height: 1.8;
+  color: $color-text-primary;
+}
+
+.case-detail__attachments {
+  margin-top: 24rpx;
+  white-space: nowrap;
+}
+
+.case-detail__attachments-inner {
+  display: inline-flex;
+  gap: 20rpx;
+  padding: 10rpx 10rpx 0 0;
+}
+
+.case-detail__attachment {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 160rpx;
+  padding: 20rpx 16rpx;
+  background: $color-bg-section;
+  border-radius: 12rpx;
+}
+
+.case-detail__attachment-remove {
+  position: absolute;
+  top: -10rpx;
+  right: -10rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.case-detail__attachment-remove-icon {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.case-detail__attachment-icon {
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.case-detail__attachment-name {
+  margin-top: 12rpx;
+  font-size: 22rpx;
+  color: $color-text-primary;
+  text-align: center;
+  word-break: break-all;
+}
+</style>

src/pages/case-library/favorites/index.vue

@@ -0,0 +1,466 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import {
+  CASE_CATEGORIES,
+  CASE_FILTER_INDUSTRIES,
+  CASE_FILTER_SCALES,
+  CASE_FILTER_TIME_RANGES,
+  CASE_PAGE_SIZE,
+  DEFAULT_CASE_FILTER,
+} from '@/constants/case-library'
+import { useCaseFavorites } from '@/hooks/use-case-favorites'
+import type { CaseCategory, CaseFilterValues } from '@/types/case-library'
+import filterIcon from '@/static/icons/icon-filter.svg'
+import { navigateBackWithFallback } from '@/utils/navigate-back'
+import { cloneCaseFilter, matchCaseFilter } from '@/utils/case-filter'
+import CaseCard from '../components/CaseCard.vue'
+import CaseFilterPanel from '../components/CaseFilterPanel.vue'
+import LoadMoreFooter from '../components/LoadMoreFooter.vue'
+
+const LOAD_MORE_DELAY = 600
+
+const { favoriteCases, syncFavoriteIds, toggleFavorite } = useCaseFavorites()
+
+const keyword = ref('')
+const activeCategory = ref<CaseCategory>('全部')
+const caseList = ref(favoriteCases.value.map(item => ({ ...item })))
+const pageSize = ref(CASE_PAGE_SIZE)
+const loadingMore = ref(false)
+const filterVisible = ref(false)
+const appliedFilter = ref<CaseFilterValues>(cloneCaseFilter(DEFAULT_CASE_FILTER))
+
+const filteredCases = computed(() => {
+  const text = keyword.value.trim()
+
+  return caseList.value.filter((item) => {
+    const matchCategory = activeCategory.value === '全部' || item.category === activeCategory.value
+    const matchKeyword = !text || item.title.includes(text) || item.industry.includes(text) || item.category.includes(text)
+    const matchFilter = matchCaseFilter(item, appliedFilter.value)
+    return matchCategory && matchKeyword && matchFilter
+  })
+})
+
+const visibleCases = computed(() => filteredCases.value.slice(0, pageSize.value))
+
+const hasMore = computed(() => pageSize.value < filteredCases.value.length)
+
+const loadFinished = computed(() => !hasMore.value && visibleCases.value.length > 0)
+
+watch([keyword, activeCategory, appliedFilter], () => {
+  pageSize.value = CASE_PAGE_SIZE
+})
+
+onShow(() => {
+  syncFavoriteIds()
+  caseList.value = favoriteCases.value.map(item => ({ ...item }))
+})
+
+function handleBack() {
+  navigateBackWithFallback('/pages/case-library/index')
+}
+
+function handleSelectCategory(category: CaseCategory) {
+  activeCategory.value = category
+}
+
+function handleToggleFavorite(id: string) {
+  toggleFavorite(id)
+  caseList.value = favoriteCases.value.map(item => ({ ...item }))
+}
+
+function handleLoadMore() {
+  if (loadingMore.value || !hasMore.value)
+    return
+
+  loadingMore.value = true
+
+  setTimeout(() => {
+    pageSize.value += CASE_PAGE_SIZE
+    loadingMore.value = false
+  }, LOAD_MORE_DELAY)
+}
+
+function handleOpenFilter() {
+  filterVisible.value = true
+}
+
+function handleCloseFilter() {
+  filterVisible.value = false
+}
+
+function handleConfirmFilter(value: CaseFilterValues) {
+  appliedFilter.value = cloneCaseFilter(value)
+}
+
+function handleCaseTap(id: string) {
+  uni.navigateTo({
+    url: `/pages/case-library/detail/index?id=${id}`,
+  })
+}
+
+function showIndustryPicker() {
+  uni.showActionSheet({
+    itemList: [...CASE_FILTER_INDUSTRIES],
+    success: ({ tapIndex }) => {
+      const industry = CASE_FILTER_INDUSTRIES[tapIndex]
+      const next = cloneCaseFilter(appliedFilter.value)
+      next.industries = next.industries.includes(industry)
+        ? next.industries.filter(item => item !== industry)
+        : [...next.industries, industry]
+      appliedFilter.value = next
+    },
+  })
+}
+
+function showScalePicker() {
+  const options = CASE_FILTER_SCALES.filter(item => item !== '全部')
+  uni.showActionSheet({
+    itemList: options,
+    success: ({ tapIndex }) => {
+      const scale = options[tapIndex]
+      const next = cloneCaseFilter(appliedFilter.value)
+      next.scales = next.scales.includes(scale)
+        ? next.scales.filter(item => item !== scale)
+        : [...next.scales, scale]
+      appliedFilter.value = next
+    },
+  })
+}
+
+function showTimePicker() {
+  const options = CASE_FILTER_TIME_RANGES.filter(item => item !== '全部')
+  uni.showActionSheet({
+    itemList: options,
+    success: ({ tapIndex }) => {
+      const timeRange = options[tapIndex]
+      const next = cloneCaseFilter(appliedFilter.value)
+      next.timeRanges = next.timeRanges.includes(timeRange)
+        ? next.timeRanges.filter(item => item !== timeRange)
+        : [...next.timeRanges, timeRange]
+      appliedFilter.value = next
+    },
+  })
+}
+</script>
+
+<template>
+  <view class="case-favorites">
+    <view class="case-favorites__header">
+      <view class="case-favorites__navbar">
+        <view
+          class="case-favorites__back"
+          @tap="handleBack"
+        >
+          <image
+            class="case-favorites__back-icon"
+            src="/static/icons/icon-back.svg"
+            mode="aspectFit"
+          />
+        </view>
+        <text class="case-favorites__title">
+          收藏列表
+        </text>
+        <view class="case-favorites__navbar-placeholder" />
+      </view>
+
+      <view class="case-favorites__search-row">
+        <view class="case-favorites__search">
+          <image
+            class="case-favorites__search-icon"
+            src="/static/icons/icon-search.svg"
+            mode="aspectFit"
+          />
+          <input
+            v-model="keyword"
+            class="case-favorites__search-input"
+            placeholder="搜索案例标题、描述、标签..."
+            placeholder-class="case-favorites__search-placeholder"
+          >
+        </view>
+        <view class="case-favorites__favorite-btn">
+          <image
+            class="case-favorites__favorite-btn-icon"
+            src="/static/icons/icon-heart.svg"
+            mode="aspectFit"
+          />
+        </view>
+      </view>
+
+      <scroll-view
+        class="case-favorites__tabs"
+        scroll-x
+        :show-scrollbar="false"
+      >
+        <view class="case-favorites__tabs-inner">
+          <text
+            v-for="category in CASE_CATEGORIES"
+            :key="category"
+            class="case-favorites__tab"
+            :class="{ 'case-favorites__tab--active': activeCategory === category }"
+            @tap="handleSelectCategory(category)"
+          >
+            {{ category }}
+          </text>
+        </view>
+      </scroll-view>
+
+      <view class="case-favorites__quick-filters">
+        <view
+          class="case-favorites__quick-filter"
+          @tap="showIndustryPicker"
+        >
+          <text>行业</text>
+          <text class="case-favorites__quick-filter-arrow">
+            ∨
+          </text>
+        </view>
+        <view
+          class="case-favorites__quick-filter"
+          @tap="showScalePicker"
+        >
+          <text>项目规模</text>
+          <text class="case-favorites__quick-filter-arrow">
+            ∨
+          </text>
+        </view>
+        <view
+          class="case-favorites__quick-filter"
+          @tap="showTimePicker"
+        >
+          <text>完成时间</text>
+          <text class="case-favorites__quick-filter-arrow">
+            ∨
+          </text>
+        </view>
+        <view
+          class="case-favorites__filter"
+          @tap="handleOpenFilter"
+        >
+          <text class="case-favorites__filter-text">
+            筛选
+          </text>
+          <image
+            class="case-favorites__filter-icon"
+            :src="filterIcon"
+            mode="aspectFit"
+          />
+        </view>
+      </view>
+
+      <view class="case-favorites__toolbar">
+        <text class="case-favorites__count">
+          共 {{ filteredCases.length }}
+        </text>
+      </view>
+    </view>
+
+    <scroll-view
+      class="case-favorites__scroll"
+      scroll-y
+      :show-scrollbar="false"
+      :lower-threshold="120"
+      @scrolltolower="handleLoadMore"
+    >
+      <view class="case-favorites__list">
+        <CaseCard
+          v-for="item in visibleCases"
+          :key="item.id"
+          :item="item"
+          @toggle-favorite="handleToggleFavorite"
+          @tap="handleCaseTap(item.id)"
+        />
+
+        <LoadMoreFooter
+          :loading="loadingMore"
+          :has-more="hasMore"
+          :finished="loadFinished"
+          @load-more="handleLoadMore"
+        />
+      </view>
+    </scroll-view>
+
+    <CaseFilterPanel
+      :visible="filterVisible"
+      :cases="caseList"
+      :value="appliedFilter"
+      @close="handleCloseFilter"
+      @confirm="handleConfirmFilter"
+    />
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.case-favorites {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: $color-bg-section;
+}
+
+.case-favorites__header {
+  flex-shrink: 0;
+  padding: calc(var(--status-bar-height, 44px) + 60rpx) 24rpx 0;
+  background: $color-bg-page;
+}
+
+.case-favorites__navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 28rpx;
+}
+
+.case-favorites__back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.case-favorites__back-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.case-favorites__title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.case-favorites__navbar-placeholder {
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.case-favorites__search-row {
+  display: flex;
+  align-items: center;
+}
+
+.case-favorites__search {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  height: 72rpx;
+  padding: 0 24rpx;
+  background: $color-bg-section;
+  border-radius: 36rpx;
+}
+
+.case-favorites__search-icon {
+  flex-shrink: 0;
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 12rpx;
+}
+
+.case-favorites__search-input {
+  flex: 1;
+  font-size: 26rpx;
+  color: $color-text-primary;
+}
+
+.case-favorites__search-placeholder {
+  color: $color-text-placeholder;
+}
+
+.case-favorites__favorite-btn {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 72rpx;
+  height: 72rpx;
+  margin-left: 16rpx;
+}
+
+.case-favorites__favorite-btn-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.case-favorites__tabs {
+  margin-top: 24rpx;
+  white-space: nowrap;
+}
+
+.case-favorites__tabs-inner {
+  display: inline-flex;
+  gap: 32rpx;
+  padding-right: 24rpx;
+}
+
+.case-favorites__tab {
+  flex-shrink: 0;
+  padding-bottom: 12rpx;
+  font-size: 28rpx;
+  color: $color-text-secondary;
+
+  &--active {
+    font-weight: 600;
+    color: $color-text-primary;
+    border-bottom: 4rpx solid $color-primary;
+  }
+}
+
+.case-favorites__quick-filters {
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+  margin-top: 20rpx;
+}
+
+.case-favorites__quick-filter {
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+  font-size: 26rpx;
+  color: $color-text-primary;
+}
+
+.case-favorites__quick-filter-arrow {
+  font-size: 20rpx;
+  color: $color-text-secondary;
+}
+
+.case-favorites__filter {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.case-favorites__filter-icon {
+  width: 28rpx;
+  height: 28rpx;
+  margin-left: 8rpx;
+}
+
+.case-favorites__filter-text {
+  font-size: 26rpx;
+  color: #666666;
+}
+
+.case-favorites__toolbar {
+  padding: 20rpx 0 24rpx;
+}
+
+.case-favorites__count {
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.case-favorites__scroll {
+  flex: 1;
+  min-height: 0;
+}
+
+.case-favorites__list {
+  padding: 0 24rpx calc(32rpx + env(safe-area-inset-bottom));
+}
+</style>

src/pages/case-library/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
 import AppTabBar from '@/components/AppTabBar.vue'
+import { useCaseFavorites } from '@/hooks/use-case-favorites'
 import {
   CASE_CATEGORIES,
   CASE_LIBRARY_LIST,
@@ -8,6 +10,7 @@ import {
   DEFAULT_CASE_FILTER,
 } from '@/constants/case-library'
 import type { CaseCategory, CaseFilterValues } from '@/types/case-library'
+import filterIcon from '@/static/icons/icon-filter.svg'
 import { cloneCaseFilter, matchCaseFilter } from '@/utils/case-filter'
 import CaseCard from './components/CaseCard.vue'
 import CaseFilterPanel from './components/CaseFilterPanel.vue'
@@ -15,9 +18,11 @@ import LoadMoreFooter from './components/LoadMoreFooter.vue'
 
 const LOAD_MORE_DELAY = 600
 
+const { applyFavoritesToList, syncFavoriteIds, toggleFavorite } = useCaseFavorites()
+
 const keyword = ref('')
 const activeCategory = ref<CaseCategory>('全部')
-const caseList = ref(CASE_LIBRARY_LIST.map(item => ({ ...item })))
+const caseList = ref(applyFavoritesToList(CASE_LIBRARY_LIST.map(item => ({ ...item }))))
 const pageSize = ref(CASE_PAGE_SIZE)
 const loadingMore = ref(false)
 const filterVisible = ref(false)
@@ -44,14 +49,24 @@ watch([keyword, activeCategory, appliedFilter], () => {
   pageSize.value = CASE_PAGE_SIZE
 })
 
+onShow(() => {
+  syncFavoriteIds()
+  caseList.value = applyFavoritesToList(CASE_LIBRARY_LIST.map(item => ({ ...item })))
+})
+
 function handleSelectCategory(category: CaseCategory) {
   activeCategory.value = category
 }
 
 function handleToggleFavorite(id: string) {
-  caseList.value = caseList.value.map(item =>
-    item.id === id ? { ...item, favorite: !item.favorite } : item,
-  )
+  toggleFavorite(id)
+  caseList.value = applyFavoritesToList(CASE_LIBRARY_LIST.map(item => ({ ...item })))
+}
+
+function handleOpenFavorites() {
+  uni.navigateTo({
+    url: '/pages/case-library/favorites/index',
+  })
 }
 
 function handleLoadMore() {
@@ -77,6 +92,12 @@ function handleCloseFilter() {
 function handleConfirmFilter(value: CaseFilterValues) {
   appliedFilter.value = cloneCaseFilter(value)
 }
+
+function handleCaseTap(id: string) {
+  uni.navigateTo({
+    url: `/pages/case-library/detail/index?id=${id}`,
+  })
+}
 </script>
 
 <template>
@@ -100,7 +121,10 @@ function handleConfirmFilter(value: CaseFilterValues) {
             placeholder-class="case-library__search-placeholder"
           >
         </view>
-        <view class="case-library__favorite-btn">
+        <view
+          class="case-library__favorite-btn"
+          @tap="handleOpenFavorites"
+        >
           <image
             class="case-library__favorite-btn-icon"
             src="/static/icons/icon-heart.svg"
@@ -137,7 +161,7 @@ function handleConfirmFilter(value: CaseFilterValues) {
         >
           <image
             class="case-library__filter-icon"
-            src="/static/icons/icon-filter.svg"
+            :src="filterIcon"
             mode="aspectFit"
           />
           <text class="case-library__filter-text">
@@ -160,6 +184,7 @@ function handleConfirmFilter(value: CaseFilterValues) {
           :key="item.id"
           :item="item"
           @toggle-favorite="handleToggleFavorite"
+          @tap="handleCaseTap(item.id)"
         />
 
         <LoadMoreFooter
@@ -196,7 +221,7 @@ function handleConfirmFilter(value: CaseFilterValues) {
 
 .case-library__header {
   flex-shrink: 0;
-  padding: calc(var(--status-bar-height, 44px) + 12rpx) 24rpx 0;
+  padding: calc(var(--status-bar-height, 44px) + 60rpx) 24rpx 0;
   background: $color-bg-page;
 }