From f5d634bbaf80ae7998dc72707a5d11964c807289 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E4=BC=8A=E5=B8=86?= <lyf11232025@163.com>
Date: Mon, 14 Sep 2026 10:32:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B6=88=E6=81=AF=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E5=92=8C=E6=A1=88=E4=BE=8B=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/case-detail.ts                  |  34 +
 src/constants/customer-service.ts             |  18 +
 src/constants/message-center.ts               |  29 +
 src/constants/project-center.ts               |  44 ++
 src/constants/project-detail.ts               |  72 ++
 src/constants/status-notification.ts          |  25 +
 src/constants/system-notification.ts          |  24 +
 src/hooks/use-case-favorites.ts               |  73 ++
 src/pages.json                                |  36 +
 .../components/CaseFilterPanel.vue            |   8 +-
 src/pages/case-library/detail/index.vue       | 345 +++++++++
 src/pages/case-library/favorites/index.vue    | 466 ++++++++++++
 src/pages/case-library/index.vue              |  39 +-
 .../components/HomeFloatingActions.vue        |   5 +-
 .../message-center/components/MessageItem.vue | 106 +++
 .../components/ChatMessage.vue                | 112 +++
 .../message-center/customer-service/index.vue | 299 ++++++++
 src/pages/message-center/index.vue            | 113 ++-
 .../components/StatusNotificationItem.vue     |  96 +++
 .../status-notification/index.vue             | 182 +++++
 .../system-notification/index.vue             | 182 +++++
 .../components/ProjectCenterCard.vue          | 173 +++++
 src/pages/project-center/detail/index.vue     | 703 ++++++++++++++++++
 src/pages/project-center/index.vue            | 248 +++++-
 src/static/icons/icon-chat-add.png            | Bin 0 -> 665 bytes
 src/static/icons/icon-chat-camera.png         | Bin 0 -> 1737 bytes
 src/static/icons/icon-chat-file.png           | Bin 0 -> 1458 bytes
 src/static/icons/icon-chat-photo.png          | Bin 0 -> 1446 bytes
 src/static/icons/icon-chat-voice.png          | Bin 0 -> 1204 bytes
 src/static/icons/icon-filter.svg              |   4 +-
 src/static/icons/icon-message-service.png     | Bin 0 -> 3423 bytes
 src/static/icons/icon-message-system.png      | Bin 0 -> 3267 bytes
 src/static/icons/icon-message-workorder.png   | Bin 0 -> 3398 bytes
 src/static/icons/添 加.png                    | Bin 0 -> 665 bytes
 src/types/case-library.ts                     |  14 +
 src/types/customer-service.ts                 |   9 +
 src/types/message-center.ts                   |  11 +
 src/types/project-center.ts                   |  16 +
 src/types/project-detail.ts                   |  35 +
 src/types/status-notification.ts              |   7 +
 src/utils/case-filter.ts                      |   4 +-
 41 files changed, 3484 insertions(+), 48 deletions(-)
 create mode 100644 src/constants/case-detail.ts
 create mode 100644 src/constants/customer-service.ts
 create mode 100644 src/constants/message-center.ts
 create mode 100644 src/constants/project-center.ts
 create mode 100644 src/constants/project-detail.ts
 create mode 100644 src/constants/status-notification.ts
 create mode 100644 src/constants/system-notification.ts
 create mode 100644 src/hooks/use-case-favorites.ts
 create mode 100644 src/pages/case-library/detail/index.vue
 create mode 100644 src/pages/case-library/favorites/index.vue
 create mode 100644 src/pages/message-center/components/MessageItem.vue
 create mode 100644 src/pages/message-center/customer-service/components/ChatMessage.vue
 create mode 100644 src/pages/message-center/customer-service/index.vue
 create mode 100644 src/pages/message-center/status-notification/components/StatusNotificationItem.vue
 create mode 100644 src/pages/message-center/status-notification/index.vue
 create mode 100644 src/pages/message-center/system-notification/index.vue
 create mode 100644 src/pages/project-center/components/ProjectCenterCard.vue
 create mode 100644 src/pages/project-center/detail/index.vue
 create mode 100644 src/static/icons/icon-chat-add.png
 create mode 100644 src/static/icons/icon-chat-camera.png
 create mode 100644 src/static/icons/icon-chat-file.png
 create mode 100644 src/static/icons/icon-chat-photo.png
 create mode 100644 src/static/icons/icon-chat-voice.png
 create mode 100644 src/static/icons/icon-message-service.png
 create mode 100644 src/static/icons/icon-message-system.png
 create mode 100644 src/static/icons/icon-message-workorder.png
 create mode 100644 src/static/icons/添 加.png
 create mode 100644 src/types/customer-service.ts
 create mode 100644 src/types/message-center.ts
 create mode 100644 src/types/project-center.ts
 create mode 100644 src/types/project-detail.ts
 create mode 100644 src/types/status-notification.ts

diff --git a/src/constants/case-detail.ts b/src/constants/case-detail.ts
new file mode 100644
index 0000000..33ef350
--- /dev/null
+++ b/src/constants/case-detail.ts
@@ -0,0 +1,34 @@
+import { CASE_LIBRARY_LIST } from '@/constants/case-library'
+import type { CaseDetail } from '@/types/case-library'
+
+const SHARED_BACKGROUND = '随着我国城镇化进程不断加快，园区管理面临着从传统粗放式管理向精细化、智能化管理转型的迫切需求。在"数字中国"战略背景下，各地园区纷纷探索通过信息化手段提升运营效率、优化资源配置、改善企业服务体验。'
+
+const SHARED_PAIN_POINTS = '传统园区管理方式依赖人工巡检和纸质记录，信息孤岛严重，各部门数据无法互通，导致管理效率低下。企业服务响应慢，缺乏统一的服务入口，企业诉求难以快速传达和处理。能耗管理粗放，无法实时监控和分析，造成资源浪费。'
+
+const SHARED_REQUIREMENT = '建设一套集园区管理、企业服务、数据分析于一体的综合管理平台，实现园区运营的数字化、智能化。平台需支持多端访问，包括Web管理端、移动端APP，满足不同角色的使用需求。'
+
+const SHARED_DELIVERABLES = '交付园区综合管理平台一套，包含Web管理端、移动端APP、数据可视化大屏，并提供完整的源代码、技术文档、用户手册及一年免费运维服务。'
+
+const DEFAULT_ATTACHMENTS = [
+  { id: '1', name: '需求文档.pdf', icon: '/static/icons/PDF.png' },
+  { id: '2', name: '系统....pdf', icon: '/static/icons/PDF.png' },
+  { id: '3', name: '参考图.png', icon: '/static/icons/PNG.png' },
+]
+
+const CASE_DETAIL_MAP: Record<string, CaseDetail> = Object.fromEntries(
+  CASE_LIBRARY_LIST.map(item => [
+    item.id,
+    {
+      ...item,
+      background: SHARED_BACKGROUND,
+      painPoints: SHARED_PAIN_POINTS,
+      requirement: SHARED_REQUIREMENT,
+      deliverables: SHARED_DELIVERABLES,
+      attachments: DEFAULT_ATTACHMENTS,
+    },
+  ]),
+)
+
+export function getCaseDetail(id: string): CaseDetail | null {
+  return CASE_DETAIL_MAP[id] || null
+}
diff --git a/src/constants/customer-service.ts b/src/constants/customer-service.ts
new file mode 100644
index 0000000..8cf8433
--- /dev/null
+++ b/src/constants/customer-service.ts
@@ -0,0 +1,18 @@
+import type { ChatMessage } from '@/types/customer-service'
+
+export const CUSTOMER_SERVICE_MESSAGES: ChatMessage[] = [
+  {
+    id: '1',
+    role: 'user',
+    nickname: '昵称',
+    content: '怎么购买？怎么购买？',
+    avatar: '/static/icons/hi.png',
+  },
+  {
+    id: '2',
+    role: 'service',
+    nickname: '昵称',
+    content: '怎么购买？怎么购买？',
+    avatar: '/static/icons/quick-service.png',
+  },
+]
diff --git a/src/constants/message-center.ts b/src/constants/message-center.ts
new file mode 100644
index 0000000..d6003b3
--- /dev/null
+++ b/src/constants/message-center.ts
@@ -0,0 +1,29 @@
+import type { MessageItem } from '@/types/message-center'
+
+export const MESSAGE_LIST: MessageItem[] = [
+  {
+    id: '1',
+    type: 'service',
+    icon: '/static/icons/icon-message-service.png',
+    title: '在线客服',
+    preview: '您好，请问有什么可以帮您的？',
+    time: '刚刚',
+    unread: true,
+  },
+  {
+    id: '2',
+    type: 'workorder',
+    icon: '/static/icons/icon-message-workorder.png',
+    title: '工单状态通知',
+    preview: '您的「社区康养服务系统」项目已进入开发阶段，请关注进度',
+    time: '10:23',
+  },
+  {
+    id: '3',
+    type: 'system',
+    icon: '/static/icons/icon-message-system.png',
+    title: '系统通知',
+    preview: '平台将于2026年7月31日00:00:00进行系统维护',
+    time: '昨天',
+  },
+]
diff --git a/src/constants/project-center.ts b/src/constants/project-center.ts
new file mode 100644
index 0000000..c1191d7
--- /dev/null
+++ b/src/constants/project-center.ts
@@ -0,0 +1,44 @@
+import type { ProjectCategory, ProjectCenterItem } from '@/types/project-center'
+
+export const PROJECT_CATEGORIES: ProjectCategory[] = [
+  '全部',
+  '互联网软件',
+  '硬件电路',
+  '物联网全案',
+  '生产制造',
+]
+
+export const PROJECT_CENTER_LIST: ProjectCenterItem[] = [
+  {
+    id: '1',
+    title: '社区康养智能服务系统',
+    category: '互联网软件',
+    projectNo: '20260813RJ251545',
+    status: '进行中',
+    industry: '医疗健康',
+    scale: '320万',
+    completedAt: '2026/8/10',
+    progress: 65,
+    updateTime: '2026-8-13 11:04:12',
+  },
+  {
+    id: '2',
+    title: '社区康养智能服务系统',
+    category: '生产制造',
+    projectNo: '20260813RJ251545',
+    status: '待立项',
+    industry: '电商零售',
+    scale: '500万',
+    completedAt: '2026/3/8',
+  },
+  {
+    id: '3',
+    title: '社区康养智能服务系统',
+    category: '互联网软件',
+    projectNo: '20260813RJ251545',
+    status: '售后中',
+    industry: '医疗健康',
+    scale: '320万',
+    completedAt: '2026/6/15',
+  },
+]
diff --git a/src/constants/project-detail.ts b/src/constants/project-detail.ts
new file mode 100644
index 0000000..6341e98
--- /dev/null
+++ b/src/constants/project-detail.ts
@@ -0,0 +1,72 @@
+import { PROJECT_CENTER_LIST } from '@/constants/project-center'
+import type { ProjectDetail } from '@/types/project-detail'
+
+const DEFAULT_STEPS = [
+  {
+    id: '1',
+    title: '需求确认',
+    status: 'done' as const,
+    time: '2026-8-13 11:04:12',
+  },
+  {
+    id: '2',
+    title: '原型设计',
+    status: 'done' as const,
+    time: '2026-8-13 11:04:12',
+  },
+  {
+    id: '3',
+    title: '开发实现',
+    status: 'active' as const,
+    statusText: '进行中',
+  },
+  {
+    id: '4',
+    title: '测试验收',
+    status: 'pending' as const,
+    statusText: '待开始',
+  },
+  {
+    id: '5',
+    title: '项目交付',
+    status: 'pending' as const,
+    statusText: '待开始',
+  },
+]
+
+const DEFAULT_TEAM = [
+  { id: '1', name: '张三', role: '项目经理' },
+  { id: '2', name: '张三', role: '项目经理' },
+  { id: '3', name: '张三', role: '项目经理' },
+  { id: '4', name: '张三', role: '项目经理' },
+]
+
+const DEFAULT_FILES = [
+  { id: '1', name: '需求文档.pdf', icon: '/static/icons/PDF.png' },
+  { id: '2', name: '系统....pdf', icon: '/static/icons/PDF.png' },
+  { id: '3', name: '参考图.png', icon: '/static/icons/PNG.png' },
+]
+
+function buildDetail(item: typeof PROJECT_CENTER_LIST[number]): ProjectDetail {
+  const progress = item.progress ?? 0
+
+  return {
+    ...item,
+    progressStartTime: '2026-8-17',
+    progressEndTime: '2026-8-17',
+    steps: DEFAULT_STEPS.map(step => ({ ...step })),
+    team: DEFAULT_TEAM.map(member => ({ ...member })),
+    files: DEFAULT_FILES.map(file => ({ ...file })),
+    financeSummary: '合同金额已确认，当前处于开发阶段付款节点，发票与回款记录可在后台查看。',
+    afterSalesSummary: '项目交付后将提供一年免费运维服务，支持 7×24 小时远程技术支持与故障响应。',
+    progress,
+  }
+}
+
+const PROJECT_DETAIL_MAP: Record<string, ProjectDetail> = Object.fromEntries(
+  PROJECT_CENTER_LIST.map(item => [item.id, buildDetail(item)]),
+)
+
+export function getProjectDetail(id: string): ProjectDetail | null {
+  return PROJECT_DETAIL_MAP[id] || null
+}
diff --git a/src/constants/status-notification.ts b/src/constants/status-notification.ts
new file mode 100644
index 0000000..c80a51c
--- /dev/null
+++ b/src/constants/status-notification.ts
@@ -0,0 +1,25 @@
+import type { StatusNotificationItem } from '@/types/status-notification'
+
+export const STATUS_NOTIFICATION_ICON = '/static/icons/icon-message-workorder.png'
+
+export const STATUS_NOTIFICATION_LIST: StatusNotificationItem[] = [
+  {
+    id: '1',
+    title: '项目待立项确认',
+    preview: '您的需求已收到，等待确认立项，请留意后续进展',
+    time: '刚刚',
+    unread: true,
+  },
+  {
+    id: '2',
+    title: '合同生效',
+    preview: '您的合同已正式生效 合同编号 xxxx 已开始生效，可随时查看详情及履约进度',
+    time: '10:23',
+  },
+  {
+    id: '3',
+    title: '您有一笔新账单待支付',
+    preview: '账单金额 ¥xxx，请尽快完成付款，以免影响服务',
+    time: '昨天',
+  },
+]
diff --git a/src/constants/system-notification.ts b/src/constants/system-notification.ts
new file mode 100644
index 0000000..6315628
--- /dev/null
+++ b/src/constants/system-notification.ts
@@ -0,0 +1,24 @@
+import type { StatusNotificationItem } from '@/types/status-notification'
+
+export const SYSTEM_NOTIFICATION_ICON = '/static/icons/icon-message-system.png'
+
+export const SYSTEM_NOTIFICATION_LIST: StatusNotificationItem[] = [
+  {
+    id: '1',
+    title: '系统通知',
+    preview: '平台将于2026年7月31日00:00:00进行系统维护',
+    time: '昨天',
+  },
+  {
+    id: '2',
+    title: '系统通知',
+    preview: '平台将于2026年7月31日00:00:00进行系统维护',
+    time: '昨天',
+  },
+  {
+    id: '3',
+    title: '系统通知',
+    preview: '平台将于2026年7月31日00:00:00进行系统维护',
+    time: '昨天',
+  },
+]
diff --git a/src/hooks/use-case-favorites.ts b/src/hooks/use-case-favorites.ts
new file mode 100644
index 0000000..338295e
--- /dev/null
+++ b/src/hooks/use-case-favorites.ts
@@ -0,0 +1,73 @@
+import { computed, ref } from 'vue'
+import { CASE_LIBRARY_LIST } from '@/constants/case-library'
+import type { CaseItem } from '@/types/case-library'
+
+export const CASE_FAVORITES_STORAGE_KEY = 'case-favorites'
+
+function getDefaultFavoriteIds(): string[] {
+  return CASE_LIBRARY_LIST
+    .filter(item => item.favorite)
+    .map(item => item.id)
+}
+
+function loadFavoriteIds(): string[] {
+  try {
+    const stored = uni.getStorageSync(CASE_FAVORITES_STORAGE_KEY)
+    if (Array.isArray(stored))
+      return stored
+  }
+  catch {
+    // ignore storage read errors
+  }
+
+  return getDefaultFavoriteIds()
+}
+
+function saveFavoriteIds(ids: string[]) {
+  uni.setStorageSync(CASE_FAVORITES_STORAGE_KEY, ids)
+}
+
+const favoriteIds = ref<string[]>(loadFavoriteIds())
+
+export function useCaseFavorites() {
+  const favoriteCases = computed(() =>
+    CASE_LIBRARY_LIST
+      .filter(item => favoriteIds.value.includes(item.id))
+      .map(item => ({ ...item, favorite: true })),
+  )
+
+  function syncFavoriteIds() {
+    favoriteIds.value = loadFavoriteIds()
+  }
+
+  function isFavorite(id: string) {
+    return favoriteIds.value.includes(id)
+  }
+
+  function toggleFavorite(id: string) {
+    if (favoriteIds.value.includes(id)) {
+      favoriteIds.value = favoriteIds.value.filter(itemId => itemId !== id)
+    }
+    else {
+      favoriteIds.value = [...favoriteIds.value, id]
+    }
+
+    saveFavoriteIds(favoriteIds.value)
+  }
+
+  function applyFavoritesToList(list: CaseItem[]): CaseItem[] {
+    return list.map(item => ({
+      ...item,
+      favorite: favoriteIds.value.includes(item.id),
+    }))
+  }
+
+  return {
+    favoriteIds,
+    favoriteCases,
+    syncFavoriteIds,
+    isFavorite,
+    toggleFavorite,
+    applyFavoritesToList,
+  }
+}
diff --git a/src/pages.json b/src/pages.json
index 771d364..3772666 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -67,18 +67,54 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/case-library/detail/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/case-library/favorites/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/message-center/index",
       "style": {
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/message-center/customer-service/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/message-center/status-notification/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/message-center/system-notification/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/project-center/index",
       "style": {
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/project-center/detail/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/personal-center/index",
       "style": {
diff --git a/src/pages/case-library/components/CaseFilterPanel.vue b/src/pages/case-library/components/CaseFilterPanel.vue
index 8f1cb6a..8a95a7e 100644
--- a/src/pages/case-library/components/CaseFilterPanel.vue
+++ b/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">
diff --git a/src/pages/case-library/detail/index.vue b/src/pages/case-library/detail/index.vue
new file mode 100644
index 0000000..0b56a02
--- /dev/null
+++ b/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>
diff --git a/src/pages/case-library/favorites/index.vue b/src/pages/case-library/favorites/index.vue
new file mode 100644
index 0000000..6b39b6d
--- /dev/null
+++ b/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>
diff --git a/src/pages/case-library/index.vue b/src/pages/case-library/index.vue
index 350fcf9..07ba4c2 100644
--- a/src/pages/case-library/index.vue
+++ b/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;
 }
 
diff --git a/src/pages/home-index/components/HomeFloatingActions.vue b/src/pages/home-index/components/HomeFloatingActions.vue
index aecf5e3..8a0c876 100644
--- a/src/pages/home-index/components/HomeFloatingActions.vue
+++ b/src/pages/home-index/components/HomeFloatingActions.vue
@@ -6,9 +6,8 @@ function handleQuickSubmit() {
 }
 
 function handleCustomerService() {
-  uni.showToast({
-    title: '客服中心开发中',
-    icon: 'none',
+  uni.navigateTo({
+    url: '/pages/message-center/customer-service/index',
   })
 }
 </script>
diff --git a/src/pages/message-center/components/MessageItem.vue b/src/pages/message-center/components/MessageItem.vue
new file mode 100644
index 0000000..412b1d6
--- /dev/null
+++ b/src/pages/message-center/components/MessageItem.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { MessageItem } from '@/types/message-center'
+
+defineProps<{
+  item: MessageItem
+}>()
+
+const emit = defineEmits<{
+  tap: []
+}>()
+</script>
+
+<template>
+  <view
+    class="message-item"
+    @tap="emit('tap')"
+  >
+    <view class="message-item__icon-wrap">
+      <image
+        class="message-item__icon"
+        :src="item.icon"
+        mode="aspectFit"
+      />
+    </view>
+
+    <view class="message-item__content">
+      <view class="message-item__row">
+        <text class="message-item__title">
+          {{ item.title }}
+        </text>
+        <text class="message-item__time">
+          {{ item.time }}
+        </text>
+      </view>
+      <text class="message-item__preview">
+        {{ item.preview }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.message-item {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 24rpx 32rpx;
+  background: $color-bg-page;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.message-item__icon-wrap {
+  flex-shrink: 0;
+  margin-right: 24rpx;
+}
+
+.message-item__icon {
+  width: 88rpx;
+  height: 88rpx;
+}
+
+.message-item__content {
+  flex: 1;
+  min-width: 0;
+  padding-top: 4rpx;
+}
+
+.message-item__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.message-item__title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.message-item__time {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.message-item__preview {
+  margin-top: 8rpx;
+  min-height: 78rpx;
+  font-size: 26rpx;
+  line-height: 1.5;
+  color: $color-text-secondary;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+</style>
diff --git a/src/pages/message-center/customer-service/components/ChatMessage.vue b/src/pages/message-center/customer-service/components/ChatMessage.vue
new file mode 100644
index 0000000..a7deba4
--- /dev/null
+++ b/src/pages/message-center/customer-service/components/ChatMessage.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { ChatMessage } from '@/types/customer-service'
+
+defineProps<{
+  message: ChatMessage
+}>()
+</script>
+
+<template>
+  <view
+    class="chat-message"
+    :class="`chat-message--${message.role}`"
+  >
+    <image
+      class="chat-message__avatar"
+      :src="message.avatar"
+      mode="aspectFill"
+    />
+
+    <view class="chat-message__body">
+      <text class="chat-message__nickname">
+        {{ message.nickname }}
+      </text>
+      <view
+        class="chat-message__bubble"
+        :class="`chat-message__bubble--${message.role}`"
+      >
+        <text class="chat-message__text">
+          {{ message.content }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.chat-message {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 32rpx;
+
+  &--user {
+    flex-direction: row-reverse;
+
+    .chat-message__body {
+      align-items: flex-end;
+    }
+
+    .chat-message__nickname {
+      text-align: right;
+    }
+  }
+
+  &--service {
+    flex-direction: row;
+
+    .chat-message__body {
+      align-items: flex-start;
+    }
+  }
+}
+
+.chat-message__avatar {
+  flex-shrink: 0;
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: #fff7e6;
+}
+
+.chat-message__body {
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100% - 96rpx);
+  margin: 0 16rpx;
+}
+
+.chat-message__nickname {
+  margin-bottom: 8rpx;
+  font-size: 22rpx;
+  color: $color-text-secondary;
+}
+
+.chat-message__bubble {
+  padding: 20rpx 24rpx;
+  border-radius: 16rpx;
+
+  &--user {
+    background: $color-primary;
+  }
+
+  &--service {
+    background: #f2f3f5;
+  }
+}
+
+.chat-message__text {
+  font-size: 28rpx;
+  line-height: 1.5;
+  word-break: break-all;
+
+  .chat-message__bubble--user & {
+    color: #ffffff;
+  }
+
+  .chat-message__bubble--service & {
+    color: $color-text-primary;
+  }
+}
+</style>
diff --git a/src/pages/message-center/customer-service/index.vue b/src/pages/message-center/customer-service/index.vue
new file mode 100644
index 0000000..18d95b3
--- /dev/null
+++ b/src/pages/message-center/customer-service/index.vue
@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CUSTOMER_SERVICE_MESSAGES } from '@/constants/customer-service'
+import type { ChatMessage } from '@/types/customer-service'
+import { navigateBackWithFallback } from '@/utils/navigate-back'
+import ChatMessageItem from './components/ChatMessage.vue'
+
+const messages = ref<ChatMessage[]>(CUSTOMER_SERVICE_MESSAGES.map(item => ({ ...item })))
+const inputValue = ref('')
+const panelVisible = ref(false)
+
+function handleBack() {
+  navigateBackWithFallback('/pages/message-center/index')
+}
+
+function togglePanel() {
+  panelVisible.value = !panelVisible.value
+}
+
+function handleSend() {
+  const content = inputValue.value.trim()
+  if (!content)
+    return
+
+  messages.value.push({
+    id: String(Date.now()),
+    role: 'user',
+    nickname: '昵称',
+    content,
+    avatar: '/static/icons/hi.png',
+  })
+  inputValue.value = ''
+  panelVisible.value = false
+}
+
+function handleAttachment(type: 'camera' | 'photo' | 'file') {
+  const labelMap = {
+    camera: '拍摄',
+    photo: '照片',
+    file: '文件',
+  }
+  uni.showToast({ title: `${labelMap[type]}功能开发中`, icon: 'none' })
+}
+</script>
+
+<template>
+  <view class="customer-service">
+    <view class="customer-service__navbar">
+      <view
+        class="customer-service__back"
+        @tap="handleBack"
+      >
+        <image
+          class="customer-service__back-icon"
+          src="/static/icons/icon-back.svg"
+          mode="aspectFit"
+        />
+      </view>
+      <text class="customer-service__title">
+        在线客服
+      </text>
+      <view class="customer-service__navbar-placeholder" />
+    </view>
+
+    <scroll-view
+      class="customer-service__scroll"
+      scroll-y
+      :show-scrollbar="false"
+      :scroll-into-view="messages.length ? `msg-${messages[messages.length - 1].id}` : ''"
+    >
+      <view class="customer-service__messages">
+        <view
+          v-for="message in messages"
+          :id="`msg-${message.id}`"
+          :key="message.id"
+        >
+          <ChatMessageItem :message="message" />
+        </view>
+      </view>
+    </scroll-view>
+
+    <view class="customer-service__footer">
+      <view class="customer-service__input-row">
+        <view class="customer-service__tool-btn">
+          <image
+            class="customer-service__tool-icon"
+            src="/static/icons/icon-chat-voice.png"
+            mode="aspectFit"
+          />
+        </view>
+
+        <input
+          v-model="inputValue"
+          class="customer-service__input"
+          placeholder="请输入消息..."
+          placeholder-class="customer-service__placeholder"
+          confirm-type="send"
+          @confirm="handleSend"
+        >
+
+        <view
+          class="customer-service__tool-btn"
+          @tap="togglePanel"
+        >
+          <image
+            class="customer-service__tool-icon"
+            src="/static/icons/icon-chat-add.png"
+            mode="aspectFit"
+          />
+        </view>
+      </view>
+
+      <view
+        v-if="panelVisible"
+        class="customer-service__panel"
+      >
+        <view
+          class="customer-service__panel-item"
+          @tap="handleAttachment('camera')"
+        >
+          <view class="customer-service__panel-icon-wrap">
+            <image
+              class="customer-service__panel-icon"
+              src="/static/icons/icon-chat-camera.png"
+              mode="aspectFit"
+            />
+          </view>
+          <text class="customer-service__panel-label">
+            拍摄
+          </text>
+        </view>
+
+        <view
+          class="customer-service__panel-item"
+          @tap="handleAttachment('photo')"
+        >
+          <view class="customer-service__panel-icon-wrap">
+            <image
+              class="customer-service__panel-icon"
+              src="/static/icons/icon-chat-photo.png"
+              mode="aspectFit"
+            />
+          </view>
+          <text class="customer-service__panel-label">
+            照片
+          </text>
+        </view>
+
+        <view
+          class="customer-service__panel-item"
+          @tap="handleAttachment('file')"
+        >
+          <view class="customer-service__panel-icon-wrap">
+            <image
+              class="customer-service__panel-icon"
+              src="/static/icons/icon-chat-file.png"
+              mode="aspectFit"
+            />
+          </view>
+          <text class="customer-service__panel-label">
+            文件
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.customer-service {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: $color-bg-page;
+}
+
+.customer-service__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;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.customer-service__back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.customer-service__back-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.customer-service__title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.customer-service__navbar-placeholder {
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.customer-service__scroll {
+  flex: 1;
+  min-height: 0;
+  background: $color-bg-page;
+}
+
+.customer-service__messages {
+  padding: 24rpx 24rpx 32rpx;
+}
+
+.customer-service__footer {
+  flex-shrink: 0;
+  padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
+  background: $color-bg-page;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.customer-service__input-row {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.customer-service__tool-btn {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.customer-service__tool-icon {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.customer-service__input {
+  flex: 1;
+  height: 72rpx;
+  padding: 0 24rpx;
+  font-size: 28rpx;
+  color: $color-text-primary;
+  background: #f2f3f5;
+  border-radius: 36rpx;
+}
+
+.customer-service__placeholder {
+  color: $color-text-placeholder;
+}
+
+.customer-service__panel {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-around;
+  min-height: 400rpx;
+  margin-top: 24rpx;
+  padding: 40rpx 24rpx 48rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.customer-service__panel-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.customer-service__panel-icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 112rpx;
+  height: 112rpx;
+}
+
+.customer-service__panel-icon {
+  width: 112rpx;
+  height: 112rpx;
+}
+
+.customer-service__panel-label {
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+</style>
diff --git a/src/pages/message-center/index.vue b/src/pages/message-center/index.vue
index ec58487..1a00305 100644
--- a/src/pages/message-center/index.vue
+++ b/src/pages/message-center/index.vue
@@ -1,15 +1,76 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import AppTabBar from '@/components/AppTabBar.vue'
+import { MESSAGE_LIST } from '@/constants/message-center'
+import type { MessageItem } from '@/types/message-center'
+import MessageItemCard from './components/MessageItem.vue'
+
+const messageList = ref<MessageItem[]>(MESSAGE_LIST.map(item => ({ ...item })))
+
+function handleReadAll() {
+  messageList.value = messageList.value.map(item => ({
+    ...item,
+    unread: false,
+  }))
+  uni.showToast({ title: '已全部标为已读', icon: 'none' })
+}
+
+function handleMessageTap(item: MessageItem) {
+  if (item.type === 'service') {
+    messageList.value = messageList.value.map(row =>
+      row.id === item.id ? { ...row, unread: false } : row,
+    )
+
+    uni.navigateTo({
+      url: '/pages/message-center/customer-service/index',
+    })
+    return
+  }
+
+  if (item.type === 'workorder') {
+    uni.navigateTo({
+      url: '/pages/message-center/status-notification/index',
+    })
+    return
+  }
+
+  if (item.type === 'system') {
+    uni.navigateTo({
+      url: '/pages/message-center/system-notification/index',
+    })
+  }
+}
 </script>
 
 <template>
-  <view class="placeholder-page">
-    <text class="placeholder-page__title">
-      消息中心
-    </text>
-    <text class="placeholder-page__desc">
-      功能开发中
-    </text>
+  <view class="message-center">
+    <view class="message-center__header">
+      <text class="message-center__title">
+        消息中心
+      </text>
+      <text
+        class="message-center__read-all"
+        @tap="handleReadAll"
+      >
+        全部已读
+      </text>
+    </view>
+
+    <scroll-view
+      class="message-center__scroll"
+      scroll-y
+      :show-scrollbar="false"
+    >
+      <view class="message-center__list">
+        <MessageItemCard
+          v-for="item in messageList"
+          :key="item.id"
+          :item="item"
+          @tap="handleMessageTap(item)"
+        />
+      </view>
+    </scroll-view>
+
     <AppTabBar active="message" />
   </view>
 </template>
@@ -17,25 +78,45 @@ import AppTabBar from '@/components/AppTabBar.vue'
 <style scoped lang="scss">
 @import '@/styles/variables.scss';
 
-.placeholder-page {
+.message-center {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
+  height: 100vh;
+  overflow: hidden;
   background: $color-bg-page;
 }
 
-.placeholder-page__title {
+.message-center__header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: calc(var(--status-bar-height, 44px) + 60rpx) 32rpx 28rpx;
+  background: $color-bg-page;
+}
+
+.message-center__title {
   font-size: 36rpx;
   font-weight: 600;
   color: $color-text-primary;
 }
 
-.placeholder-page__desc {
-  margin-top: 16rpx;
-  font-size: 28rpx;
+.message-center__read-all {
+  position: absolute;
+  right: 32rpx;
+  bottom: 28rpx;
+  font-size: 26rpx;
   color: $color-text-secondary;
 }
+
+.message-center__scroll {
+  flex: 1;
+  min-height: 0;
+}
+
+.message-center__list {
+  width: 100%;
+  padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
+}
 </style>
diff --git a/src/pages/message-center/status-notification/components/StatusNotificationItem.vue b/src/pages/message-center/status-notification/components/StatusNotificationItem.vue
new file mode 100644
index 0000000..007be45
--- /dev/null
+++ b/src/pages/message-center/status-notification/components/StatusNotificationItem.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { StatusNotificationItem } from '@/types/status-notification'
+
+defineProps<{
+  item: StatusNotificationItem
+  icon: string
+}>()
+</script>
+
+<template>
+  <view class="status-notification-item">
+    <image
+      class="status-notification-item__icon"
+      :src="icon"
+      mode="aspectFit"
+    />
+
+    <view class="status-notification-item__content">
+      <view class="status-notification-item__row">
+        <text class="status-notification-item__title">
+          {{ item.title }}
+        </text>
+        <text class="status-notification-item__time">
+          {{ item.time }}
+        </text>
+      </view>
+      <text class="status-notification-item__preview">
+        {{ item.preview }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.status-notification-item {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 24rpx 32rpx;
+  background: $color-bg-page;
+  border-bottom: 1rpx solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.status-notification-item__icon {
+  flex-shrink: 0;
+  width: 88rpx;
+  height: 88rpx;
+  margin-right: 24rpx;
+}
+
+.status-notification-item__content {
+  flex: 1;
+  min-width: 0;
+  padding-top: 4rpx;
+}
+
+.status-notification-item__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.status-notification-item__title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.status-notification-item__time {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.status-notification-item__preview {
+  margin-top: 8rpx;
+  min-height: 78rpx;
+  font-size: 26rpx;
+  line-height: 1.5;
+  color: $color-text-secondary;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+</style>
diff --git a/src/pages/message-center/status-notification/index.vue b/src/pages/message-center/status-notification/index.vue
new file mode 100644
index 0000000..280d618
--- /dev/null
+++ b/src/pages/message-center/status-notification/index.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import {
+  STATUS_NOTIFICATION_ICON,
+  STATUS_NOTIFICATION_LIST,
+} from '@/constants/status-notification'
+import type { StatusNotificationItem } from '@/types/status-notification'
+import { navigateBackWithFallback } from '@/utils/navigate-back'
+import StatusNotificationItemCard from './components/StatusNotificationItem.vue'
+
+const keyword = ref('')
+const notificationList = ref<StatusNotificationItem[]>(
+  STATUS_NOTIFICATION_LIST.map(item => ({ ...item })),
+)
+
+const filteredList = computed(() => {
+  const text = keyword.value.trim()
+  if (!text)
+    return notificationList.value
+
+  return notificationList.value.filter(item =>
+    item.title.includes(text) || item.preview.includes(text),
+  )
+})
+
+function handleBack() {
+  navigateBackWithFallback('/pages/message-center/index')
+}
+
+function handleReadAll() {
+  notificationList.value = notificationList.value.map(item => ({
+    ...item,
+    unread: false,
+  }))
+  uni.showToast({ title: '已全部标为已读', icon: 'none' })
+}
+</script>
+
+<template>
+  <view class="status-notification">
+    <view class="status-notification__header">
+      <view
+        class="status-notification__back"
+        @tap="handleBack"
+      >      
+        <image
+          class="status-notification__back-icon"
+          src="/static/icons/icon-back.svg"
+          mode="aspectFit"
+        />
+      </view>
+      <text class="status-notification__title">
+        状态通知
+      </text>
+      <text
+        class="status-notification__read-all"
+        @tap="handleReadAll"
+      >
+        全部已读
+      </text>
+    </view>
+
+    <view class="status-notification__search">
+      <image
+        class="status-notification__search-icon"
+        src="/static/icons/icon-search.svg"
+        mode="aspectFit"
+      />
+      <input
+        v-model="keyword"
+        class="status-notification__search-input"
+        placeholder="搜索案例标题、描述、标签..."
+        placeholder-class="status-notification__search-placeholder"
+      >
+    </view>
+
+    <scroll-view
+      class="status-notification__scroll"
+      scroll-y
+      :show-scrollbar="false"
+    >
+      <view class="status-notification__list">
+        <StatusNotificationItemCard
+          v-for="item in filteredList"
+          :key="item.id"
+          :item="item"
+          :icon="STATUS_NOTIFICATION_ICON"
+        />
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.status-notification {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: $color-bg-page;
+}
+
+.status-notification__header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: calc(var(--status-bar-height, 44px) + 60rpx) 32rpx 28rpx;
+  background: $color-bg-page;
+}
+
+.status-notification__back {
+  position: absolute;
+  left: 32rpx;
+  bottom: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.status-notification__back-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.status-notification__title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.status-notification__read-all {
+  position: absolute;
+  right: 32rpx;
+  bottom: 28rpx;
+  font-size: 26rpx;
+  color: $color-text-secondary;
+}
+
+.status-notification__search {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 72rpx;
+  margin: 0 32rpx 16rpx;
+  padding: 0 24rpx;
+  background: $color-bg-section;
+  border-radius: 36rpx;
+}
+
+.status-notification__search-icon {
+  flex-shrink: 0;
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 12rpx;
+}
+
+.status-notification__search-input {
+  flex: 1;
+  font-size: 26rpx;
+  color: $color-text-primary;
+}
+
+.status-notification__search-placeholder {
+  color: $color-text-placeholder;
+}
+
+.status-notification__scroll {
+  flex: 1;
+  min-height: 0;
+}
+
+.status-notification__list {
+  width: 100%;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+</style>
diff --git a/src/pages/message-center/system-notification/index.vue b/src/pages/message-center/system-notification/index.vue
new file mode 100644
index 0000000..93a3860
--- /dev/null
+++ b/src/pages/message-center/system-notification/index.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import {
+  SYSTEM_NOTIFICATION_ICON,
+  SYSTEM_NOTIFICATION_LIST,
+} from '@/constants/system-notification'
+import type { StatusNotificationItem } from '@/types/status-notification'
+import { navigateBackWithFallback } from '@/utils/navigate-back'
+import StatusNotificationItemCard from '../status-notification/components/StatusNotificationItem.vue'
+
+const keyword = ref('')
+const notificationList = ref<StatusNotificationItem[]>(
+  SYSTEM_NOTIFICATION_LIST.map(item => ({ ...item })),
+)
+
+const filteredList = computed(() => {
+  const text = keyword.value.trim()
+  if (!text)
+    return notificationList.value
+
+  return notificationList.value.filter(item =>
+    item.title.includes(text) || item.preview.includes(text),
+  )
+})
+
+function handleBack() {
+  navigateBackWithFallback('/pages/message-center/index')
+}
+
+function handleReadAll() {
+  notificationList.value = notificationList.value.map(item => ({
+    ...item,
+    unread: false,
+  }))
+  uni.showToast({ title: '已全部标为已读', icon: 'none' })
+}
+</script>
+
+<template>
+  <view class="system-notification">
+    <view class="system-notification__header">
+      <view
+        class="system-notification__back"
+        @tap="handleBack"
+      >
+        <image
+          class="system-notification__back-icon"
+          src="/static/icons/icon-back.svg"
+          mode="aspectFit"
+        />
+      </view>
+      <text class="system-notification__title">
+        系统列表
+      </text>
+      <text
+        class="system-notification__read-all"
+        @tap="handleReadAll"
+      >
+        全部已读
+      </text>
+    </view>
+
+    <view class="system-notification__search">
+      <image
+        class="system-notification__search-icon"
+        src="/static/icons/icon-search.svg"
+        mode="aspectFit"
+      />
+      <input
+        v-model="keyword"
+        class="system-notification__search-input"
+        placeholder="搜索案例标题、描述、标签..."
+        placeholder-class="system-notification__search-placeholder"
+      >
+    </view>
+
+    <scroll-view
+      class="system-notification__scroll"
+      scroll-y
+      :show-scrollbar="false"
+    >
+      <view class="system-notification__list">
+        <StatusNotificationItemCard
+          v-for="item in filteredList"
+          :key="item.id"
+          :item="item"
+          :icon="SYSTEM_NOTIFICATION_ICON"
+        />
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.system-notification {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: $color-bg-page;
+}
+
+.system-notification__header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: calc(var(--status-bar-height, 44px) + 60rpx) 32rpx 28rpx;
+  background: $color-bg-page;
+}
+
+.system-notification__back {
+  position: absolute;
+  left: 32rpx;
+  bottom: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.system-notification__back-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.system-notification__title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.system-notification__read-all {
+  position: absolute;
+  right: 32rpx;
+  bottom: 28rpx;
+  font-size: 26rpx;
+  color: $color-text-secondary;
+}
+
+.system-notification__search {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 72rpx;
+  margin: 0 32rpx 16rpx;
+  padding: 0 24rpx;
+  background: $color-bg-section;
+  border-radius: 36rpx;
+}
+
+.system-notification__search-icon {
+  flex-shrink: 0;
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 12rpx;
+}
+
+.system-notification__search-input {
+  flex: 1;
+  font-size: 26rpx;
+  color: $color-text-primary;
+}
+
+.system-notification__search-placeholder {
+  color: $color-text-placeholder;
+}
+
+.system-notification__scroll {
+  flex: 1;
+  min-height: 0;
+}
+
+.system-notification__list {
+  width: 100%;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+</style>
diff --git a/src/pages/project-center/components/ProjectCenterCard.vue b/src/pages/project-center/components/ProjectCenterCard.vue
new file mode 100644
index 0000000..684f2c6
--- /dev/null
+++ b/src/pages/project-center/components/ProjectCenterCard.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import type { ProjectCenterItem } from '@/types/project-center'
+
+defineProps<{
+  item: ProjectCenterItem
+}>()
+
+const emit = defineEmits<{
+  detail: [id: string]
+}>()
+</script>
+
+<template>
+  <view class="project-center-card">
+    <view class="project-center-card__header">
+      <text class="project-center-card__title">
+        {{ item.title }}
+      </text>
+      <text class="project-center-card__status">
+        {{ item.status }}
+      </text>
+    </view>
+
+    <view class="project-center-card__meta">
+      <text class="project-center-card__tag">
+        {{ item.category }}
+      </text>
+      <text class="project-center-card__no">
+        项目编号：{{ item.projectNo }}
+      </text>
+    </view>
+
+    <view
+      v-if="item.status === '进行中' && item.progress !== undefined"
+      class="project-center-card__progress"
+    >
+      <view class="project-center-card__progress-bar">
+        <view
+          class="project-center-card__progress-fill"
+          :style="{ width: `${item.progress}%` }"
+        />
+      </view>
+      <text class="project-center-card__progress-value">
+        {{ item.progress }}%
+      </text>
+    </view>
+
+    <view
+      class="project-center-card__footer"
+      :class="{ 'project-center-card__footer--simple': item.status !== '进行中' }"
+    >
+      <text
+        v-if="item.updateTime"
+        class="project-center-card__time"
+      >
+        更新时间：{{ item.updateTime }}
+      </text>
+      <text
+        class="project-center-card__detail"
+        @tap.stop="emit('detail', item.id)"
+      >
+        查看详情 >
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.project-center-card {
+  padding: 28rpx 24rpx;
+  margin-bottom: 24rpx;
+  background: $color-bg-page;
+  border-radius: 20rpx;
+  margin-top: 20rpx;
+}
+
+.project-center-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.project-center-card__title {
+  flex: 1;
+  padding-right: 16rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.project-center-card__status {
+  flex-shrink: 0;
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.project-center-card__meta {
+  display: flex;
+  align-items: center;
+  margin-top: 16rpx;
+}
+
+.project-center-card__tag {
+  flex-shrink: 0;
+  padding: 4rpx 12rpx;
+  font-size: 20rpx;
+  color: $color-primary;
+  background: $color-primary-light;
+  border-radius: 6rpx;
+}
+
+.project-center-card__no {
+  flex: 1;
+  min-width: 0;
+  margin-left: 12rpx;
+  font-size: 22rpx;
+  color: #666666;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.project-center-card__progress {
+  display: flex;
+  align-items: center;
+  margin-top: 24rpx;
+}
+
+.project-center-card__progress-bar {
+  flex: 1;
+  height: 12rpx;
+  overflow: hidden;
+  background: #eef2ff;
+  border-radius: 6rpx;
+}
+
+.project-center-card__progress-fill {
+  height: 100%;
+  background: $color-primary;
+  border-radius: 6rpx;
+}
+
+.project-center-card__progress-value {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+  font-size: 24rpx;
+  color: #666666;
+}
+
+.project-center-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20rpx;
+
+  &--simple {
+    justify-content: flex-end;
+    margin-top: 24rpx;
+  }
+}
+
+.project-center-card__time {
+  font-size: 22rpx;
+  color: #666666;
+}
+
+.project-center-card__detail {
+  font-size: 24rpx;
+  color: #666666;
+}
+</style>
diff --git a/src/pages/project-center/detail/index.vue b/src/pages/project-center/detail/index.vue
new file mode 100644
index 0000000..4de49bf
--- /dev/null
+++ b/src/pages/project-center/detail/index.vue
@@ -0,0 +1,703 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getProjectDetail } from '@/constants/project-detail'
+import cardBg from '@/static/icons/new-card.png'
+import deleteIcon from '@/static/icons/X.png'
+import type { ProjectDetail, ProjectDetailTab } from '@/types/project-detail'
+import { navigateBackWithFallback } from '@/utils/navigate-back'
+
+const detail = ref<ProjectDetail | null>(null)
+const activeTab = ref<ProjectDetailTab>('progress')
+
+const tabs: Array<{ key: ProjectDetailTab, label: string }> = [
+  { key: 'progress', label: '项目进度' },
+  { key: 'files', label: '项目文件' },
+  { key: 'finance', label: '合同财务' },
+  { key: 'aftersales', label: '售后信息' },
+]
+
+onLoad((options) => {
+  const rawId = options?.id
+  const id = rawId ? decodeURIComponent(String(rawId)) : '1'
+  detail.value = getProjectDetail(id)
+
+  if (!detail.value) {
+    uni.showToast({ title: '项目不存在', icon: 'none' })
+    setTimeout(() => uni.navigateBack(), 1500)
+  }
+})
+
+function handleBack() {
+  navigateBackWithFallback('/pages/project-center/index')
+}
+
+function handleSelectTab(key: ProjectDetailTab) {
+  activeTab.value = key
+}
+</script>
+
+<template>
+  <view
+    v-if="detail"
+    class="project-detail"
+  >
+    <view class="project-detail__navbar">
+      <view
+        class="project-detail__back"
+        @tap="handleBack"
+      >
+        <image
+          class="project-detail__back-icon"
+          src="/static/icons/icon-back.svg"
+          mode="aspectFit"
+        />
+      </view>
+      <text class="project-detail__navbar-title">
+        项目详情
+      </text>
+      <view class="project-detail__navbar-placeholder" />
+    </view>
+
+    <scroll-view
+      class="project-detail__scroll"
+      scroll-y
+      :show-scrollbar="false"
+    >
+      <view class="project-detail__content">
+        <view class="project-detail__hero">
+          <image
+            class="project-detail__hero-bg"
+            :src="cardBg"
+            mode="scaleToFill"
+          />
+          <view class="project-detail__hero-inner">
+            <view class="project-detail__hero-top">
+              <text class="project-detail__tag">
+                {{ detail.category }}
+              </text>
+              <view class="project-detail__hero-status">
+                <text class="project-detail__status">
+                  {{ detail.status }}
+                </text>
+                <text
+                  v-if="detail.progress !== undefined"
+                  class="project-detail__progress-text"
+                >
+                  {{ detail.progress }}%
+                </text>
+              </view>
+            </view>
+            <text class="project-detail__title">
+              {{ detail.title }}
+            </text>
+            <text class="project-detail__no">
+              项目编号：{{ detail.projectNo }}
+            </text>
+          </view>
+        </view>
+
+        <scroll-view
+          class="project-detail__tabs"
+          scroll-x
+          :show-scrollbar="false"
+        >
+          <view class="project-detail__tabs-inner">
+            <text
+              v-for="tab in tabs"
+              :key="tab.key"
+              class="project-detail__tab"
+              :class="{ 'project-detail__tab--active': activeTab === tab.key }"
+              @tap="handleSelectTab(tab.key)"
+            >
+              {{ tab.label }}
+            </text>
+          </view>
+        </scroll-view>
+
+        <view
+          v-if="activeTab === 'progress'"
+          class="project-detail__panel"
+        >
+          <view class="project-detail__dev-progress">
+            <text class="project-detail__panel-title">
+              开发进度
+            </text>
+            <view class="project-detail__overall">
+              <text class="project-detail__overall-label">
+                总体进度
+              </text>
+              <text class="project-detail__overall-value">
+                {{ detail.progress ?? 0 }}%
+              </text>
+            </view>
+            <view class="project-detail__slider">
+              <view class="project-detail__slider-track">
+                <view
+                  class="project-detail__slider-fill"
+                  :style="{ width: `${detail.progress ?? 0}%` }"
+                />
+                <view
+                  class="project-detail__slider-thumb"
+                  :style="{ left: `${detail.progress ?? 0}%` }"
+                />
+              </view>
+            </view>
+            <view class="project-detail__dates">
+              <text>开始时间：{{ detail.progressStartTime }}</text>
+              <text>结束时间：{{ detail.progressEndTime }}</text>
+            </view>
+          </view>
+
+          <view class="project-detail__timeline">
+            <text class="project-detail__panel-title project-detail__timeline-heading">
+              项目进度（里程碑）
+            </text>
+            <view
+              v-for="(step, index) in detail.steps"
+              :key="step.id"
+              class="project-detail__timeline-item"
+            >
+              <view class="project-detail__timeline-left">
+                <view
+                  class="project-detail__timeline-dot"
+                  :class="{
+                    'project-detail__timeline-dot--done': step.status === 'done',
+                    'project-detail__timeline-dot--active': step.status === 'active',
+                    'project-detail__timeline-dot--pending': step.status === 'pending',
+                  }"
+                >
+                  <text
+                    v-if="step.status === 'done'"
+                    class="project-detail__timeline-check"
+                  >
+                    ✓
+                  </text>
+                  <text
+                    v-else
+                    class="project-detail__timeline-index"
+                  >
+                    {{ index + 1 }}
+                  </text>
+                </view>
+                <view
+                  v-if="index < detail.steps.length - 1"
+                  class="project-detail__timeline-line"
+                  :class="{ 'project-detail__timeline-line--done': step.status === 'done' }"
+                />
+              </view>
+              <view class="project-detail__timeline-body">
+                <text class="project-detail__timeline-title">
+                  {{ step.title }}
+                </text>
+                <text
+                  v-if="step.time"
+                  class="project-detail__timeline-time"
+                >
+                  {{ step.time }}
+                </text>
+                <text
+                  v-else-if="step.statusText"
+                  class="project-detail__timeline-status"
+                  :class="{ 'project-detail__timeline-status--active': step.status === 'active' }"
+                >
+                  {{ step.statusText }}
+                </text>
+              </view>
+            </view>
+          </view>
+
+          <view class="project-detail__team">
+            <text class="project-detail__panel-title">
+              项目团队
+            </text>
+            <scroll-view
+              class="project-detail__team-scroll"
+              scroll-x
+              :show-scrollbar="false"
+            >
+              <view class="project-detail__team-inner">
+                <view
+                  v-for="member in detail.team"
+                  :key="member.id"
+                  class="project-detail__member"
+                >
+                  <view class="project-detail__avatar">
+                    <text>{{ member.name.slice(0, 2) }}</text>
+                  </view>
+                  <text class="project-detail__member-name">
+                    {{ member.name }}
+                  </text>
+                  <text class="project-detail__member-role">
+                    {{ member.role }}
+                  </text>
+                </view>
+              </view>
+            </scroll-view>
+          </view>
+        </view>
+
+        <view
+          v-else-if="activeTab === 'files'"
+          class="project-detail__panel"
+        >
+          <view class="project-detail__files">
+            <view
+              v-for="file in detail.files"
+              :key="file.id"
+              class="project-detail__file"
+            >
+              <view class="project-detail__file-remove">
+                <image
+                  class="project-detail__file-remove-icon"
+                  :src="deleteIcon"
+                  mode="aspectFit"
+                />
+              </view>
+              <image
+                class="project-detail__file-icon"
+                :src="file.icon"
+                mode="aspectFit"
+              />
+              <text class="project-detail__file-name">
+                {{ file.name }}
+              </text>
+            </view>
+          </view>
+        </view>
+
+        <view
+          v-else-if="activeTab === 'finance'"
+          class="project-detail__panel"
+        >
+          <text class="project-detail__paragraph">
+            {{ detail.financeSummary }}
+          </text>
+        </view>
+
+        <view
+          v-else
+          class="project-detail__panel"
+        >
+          <text class="project-detail__paragraph">
+            {{ detail.afterSalesSummary }}
+          </text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.project-detail {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: $color-bg-section;
+}
+
+.project-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;
+}
+
+.project-detail__back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.project-detail__back-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.project-detail__navbar-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.project-detail__navbar-placeholder {
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.project-detail__scroll {
+  flex: 1;
+  height: 0;
+}
+
+.project-detail__content {
+  padding: 24rpx 24rpx calc(32rpx + env(safe-area-inset-bottom));
+}
+
+.project-detail__hero {
+  position: relative;
+  overflow: hidden;
+  border-radius: 20rpx;
+}
+
+.project-detail__hero-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.project-detail__hero-inner {
+  position: relative;
+  z-index: 1;
+  padding: 28rpx 24rpx;
+}
+
+.project-detail__hero-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.project-detail__tag {
+  padding: 4rpx 12rpx;
+  font-size: 20rpx;
+  color: $color-primary;
+  background: $color-primary-light;
+  border-radius: 6rpx;
+}
+
+.project-detail__hero-status {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.project-detail__status {
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.project-detail__progress-text {
+  margin-top: 4rpx;
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.project-detail__title {
+  display: block;
+  margin-top: 20rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.project-detail__no {
+  display: block;
+  margin-top: 16rpx;
+  font-size: 22rpx;
+  color: #666666;
+}
+
+.project-detail__tabs {
+  margin-top: 24rpx;
+  white-space: nowrap;
+}
+
+.project-detail__tabs-inner {
+  display: inline-flex;
+  gap: 32rpx;
+  padding: 0 4rpx;
+}
+
+.project-detail__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;
+  }
+}
+
+.project-detail__panel {
+  margin-top: 24rpx;
+  padding: 28rpx 24rpx;
+  background: $color-bg-page;
+  border-radius: 20rpx;
+}
+
+.project-detail__panel-title {
+  display: block;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.project-detail__dev-progress {
+  padding-bottom: 8rpx;
+}
+
+.project-detail__overall {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 24rpx;
+}
+
+.project-detail__overall-label {
+  font-size: 26rpx;
+  color: $color-text-secondary;
+}
+
+.project-detail__overall-value {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: $color-primary;
+}
+
+.project-detail__slider {
+  margin-top: 20rpx;
+}
+
+.project-detail__slider-track {
+  position: relative;
+  height: 8rpx;
+  background: #e8eaef;
+  border-radius: 4rpx;
+}
+
+.project-detail__slider-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: $color-primary;
+  border-radius: 4rpx;
+}
+
+.project-detail__slider-thumb {
+  position: absolute;
+  top: 50%;
+  width: 24rpx;
+  height: 24rpx;
+  margin-left: -12rpx;
+  background: $color-bg-page;
+  border: 4rpx solid $color-primary;
+  border-radius: 50%;
+  transform: translateY(-50%);
+}
+
+.project-detail__dates {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20rpx;
+  font-size: 22rpx;
+  color: $color-text-secondary;
+}
+
+.project-detail__timeline {
+  margin-top: 32rpx;
+  padding-top: 8rpx;
+}
+
+.project-detail__timeline-heading {
+  display: block;
+  margin-bottom: 24rpx;
+}
+
+.project-detail__timeline-item {
+  display: flex;
+  min-height: 96rpx;
+}
+
+.project-detail__timeline-left {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 48rpx;
+  margin-right: 20rpx;
+}
+
+.project-detail__timeline-dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+
+  &--done {
+    background: $color-primary;
+  }
+
+  &--active {
+    background: $color-primary;
+  }
+
+  &--pending {
+    background: $color-bg-page;
+    border: 2rpx solid #d8dde6;
+  }
+}
+
+.project-detail__timeline-check {
+  font-size: 22rpx;
+  color: #ffffff;
+}
+
+.project-detail__timeline-index {
+  font-size: 22rpx;
+  color: #ffffff;
+
+  .project-detail__timeline-dot--pending & {
+    color: $color-text-secondary;
+  }
+}
+
+.project-detail__timeline-line {
+  flex: 1;
+  width: 2rpx;
+  min-height: 40rpx;
+  margin-top: 8rpx;
+  background: #e8eaef;
+
+  &--done {
+    background: $color-primary;
+  }
+}
+
+.project-detail__timeline-body {
+  flex: 1;
+  padding-bottom: 28rpx;
+}
+
+.project-detail__timeline-title {
+  display: block;
+  font-size: 28rpx;
+  color: $color-text-primary;
+}
+
+.project-detail__timeline-time,
+.project-detail__timeline-status {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  color: $color-text-secondary;
+}
+
+.project-detail__timeline-status--active {
+  color: $color-primary;
+}
+
+.project-detail__team {
+  margin-top: 32rpx;
+  padding-top: 28rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.project-detail__team-scroll {
+  margin-top: 24rpx;
+  white-space: nowrap;
+}
+
+.project-detail__team-inner {
+  display: inline-flex;
+  gap: 32rpx;
+}
+
+.project-detail__member {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 140rpx;
+}
+
+.project-detail__avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 96rpx;
+  height: 96rpx;
+  font-size: 28rpx;
+  color: #ffffff;
+  background: $color-primary;
+  border-radius: 50%;
+}
+
+.project-detail__member-name {
+  margin-top: 12rpx;
+  font-size: 26rpx;
+  color: $color-text-primary;
+}
+
+.project-detail__member-role {
+  margin-top: 6rpx;
+  font-size: 22rpx;
+  color: $color-text-secondary;
+}
+
+.project-detail__files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+  padding: 10rpx 10rpx 0 0;
+}
+
+.project-detail__file {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 160rpx;
+  padding: 20rpx 16rpx;
+  background: $color-bg-section;
+  border-radius: 12rpx;
+}
+
+.project-detail__file-remove {
+  position: absolute;
+  top: -10rpx;
+  right: -10rpx;
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.project-detail__file-remove-icon {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.project-detail__file-icon {
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.project-detail__file-name {
+  margin-top: 12rpx;
+  font-size: 22rpx;
+  color: $color-text-primary;
+  text-align: center;
+  word-break: break-all;
+}
+
+.project-detail__paragraph {
+  display: block;
+  font-size: 28rpx;
+  line-height: 1.8;
+  color: $color-text-primary;
+}
+</style>
diff --git a/src/pages/project-center/index.vue b/src/pages/project-center/index.vue
index 711ba76..92d63e8 100644
--- a/src/pages/project-center/index.vue
+++ b/src/pages/project-center/index.vue
@@ -1,41 +1,259 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import AppTabBar from '@/components/AppTabBar.vue'
+import { DEFAULT_CASE_FILTER } from '@/constants/case-library'
+import {
+  PROJECT_CATEGORIES,
+  PROJECT_CENTER_LIST,
+} from '@/constants/project-center'
+import filterIcon from '@/static/icons/icon-filter.svg'
+import type { CaseFilterValues } from '@/types/case-library'
+import type { ProjectCategory } from '@/types/project-center'
+import { cloneCaseFilter, matchCaseFilter } from '@/utils/case-filter'
+import CaseFilterPanel from '../case-library/components/CaseFilterPanel.vue'
+import ProjectCenterCard from './components/ProjectCenterCard.vue'
+
+const keyword = ref('')
+const activeCategory = ref<ProjectCategory>('全部')
+const projectList = ref(PROJECT_CENTER_LIST.map(item => ({ ...item })))
+const filterVisible = ref(false)
+const appliedFilter = ref<CaseFilterValues>(cloneCaseFilter(DEFAULT_CASE_FILTER))
+
+const filteredProjects = computed(() => {
+  const text = keyword.value.trim()
+
+  return projectList.value.filter((item) => {
+    const matchCategory = activeCategory.value === '全部' || item.category === activeCategory.value
+    const matchKeyword = !text
+      || item.title.includes(text)
+      || item.category.includes(text)
+      || item.projectNo.includes(text)
+      || item.status.includes(text)
+      || item.industry.includes(text)
+    const matchFilter = matchCaseFilter(item, appliedFilter.value)
+    return matchCategory && matchKeyword && matchFilter
+  })
+})
+
+function handleSelectCategory(category: ProjectCategory) {
+  activeCategory.value = category
+}
+
+function handleOpenFilter() {
+  filterVisible.value = true
+}
+
+function handleCloseFilter() {
+  filterVisible.value = false
+}
+
+function handleConfirmFilter(value: CaseFilterValues) {
+  appliedFilter.value = cloneCaseFilter(value)
+}
+
+function handleViewDetail(id: string) {
+  uni.navigateTo({
+    url: `/pages/project-center/detail/index?id=${encodeURIComponent(id)}`,
+  })
+}
 </script>
 
 <template>
-  <view class="placeholder-page">
-    <text class="placeholder-page__title">
-      项目中心
-    </text>
-    <text class="placeholder-page__desc">
-      功能开发中
-    </text>
+  <view class="project-center">
+    <view class="project-center__header">
+      <text class="project-center__title">
+        项目中心
+      </text>
+
+      <view class="project-center__search">
+        <image
+          class="project-center__search-icon"
+          src="/static/icons/icon-search.svg"
+          mode="aspectFit"
+        />
+        <input
+          v-model="keyword"
+          class="project-center__search-input"
+          placeholder="搜索案例标题、描述、标签..."
+          placeholder-class="project-center__search-placeholder"
+        >
+      </view>
+
+      <scroll-view
+        class="project-center__tabs"
+        scroll-x
+        :show-scrollbar="false"
+      >
+        <view class="project-center__tabs-inner">
+          <text
+            v-for="category in PROJECT_CATEGORIES"
+            :key="category"
+            class="project-center__tab"
+            :class="{ 'project-center__tab--active': activeCategory === category }"
+            @tap="handleSelectCategory(category)"
+          >
+            {{ category }}
+          </text>
+        </view>
+      </scroll-view>
+
+      <view class="project-center__toolbar">
+        <text class="project-center__count">
+          共 {{ filteredProjects.length }}
+        </text>
+        <view
+          class="project-center__filter"
+          @tap="handleOpenFilter"
+        >
+          <image
+            class="project-center__filter-icon"
+            :src="filterIcon"
+            mode="aspectFit"
+          />
+          <text class="project-center__filter-text">
+            筛选
+          </text>
+        </view>
+      </view>
+    </view>
+
+    <scroll-view
+      class="project-center__scroll"
+      scroll-y
+      :show-scrollbar="false"
+    >
+      <view class="project-center__list">
+        <ProjectCenterCard
+          v-for="item in filteredProjects"
+          :key="item.id"
+          :item="item"
+          @detail="handleViewDetail"
+        />
+      </view>
+    </scroll-view>
+
     <AppTabBar active="project" />
+
+    <CaseFilterPanel
+      :visible="filterVisible"
+      :cases="projectList"
+      :value="appliedFilter"
+      @close="handleCloseFilter"
+      @confirm="handleConfirmFilter"
+    />
   </view>
 </template>
 
 <style scoped lang="scss">
 @import '@/styles/variables.scss';
 
-.placeholder-page {
+.project-center {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
+  height: 100vh;
+  overflow: hidden;
+  background: $color-bg-section;
+}
+
+.project-center__header {
+  flex-shrink: 0;
+  padding: calc(var(--status-bar-height, 44px) + 60rpx) 24rpx 0;
   background: $color-bg-page;
 }
 
-.placeholder-page__title {
+.project-center__title {
+  display: block;
   font-size: 36rpx;
   font-weight: 600;
   color: $color-text-primary;
+  text-align: center;
 }
 
-.placeholder-page__desc {
-  margin-top: 16rpx;
+.project-center__search {
+  display: flex;
+  align-items: center;
+  height: 72rpx;
+  margin-top: 24rpx;
+  padding: 0 24rpx;
+  background: $color-bg-section;
+  border-radius: 36rpx;
+}
+
+.project-center__search-icon {
+  flex-shrink: 0;
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 12rpx;
+}
+
+.project-center__search-input {
+  flex: 1;
+  font-size: 26rpx;
+  color: $color-text-primary;
+}
+
+.project-center__search-placeholder {
+  color: $color-text-placeholder;
+}
+
+.project-center__tabs {
+  margin-top: 24rpx;
+  white-space: nowrap;
+}
+
+.project-center__tabs-inner {
+  display: inline-flex;
+  gap: 32rpx;
+  padding-right: 24rpx;
+}
+
+.project-center__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;
+  }
+}
+
+.project-center__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 0 24rpx;
+}
+
+.project-center__count {
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.project-center__filter {
+  display: flex;
+  align-items: center;
+}
+
+.project-center__filter-icon {
+  width: 28rpx;
+  height: 28rpx;
+  margin-right: 8rpx;
+}
+
+.project-center__filter-text {
+  font-size: 26rpx;
+  color: #666666;
+}
+
+.project-center__scroll {
+  flex: 1;
+  min-height: 0;
+}
+
+.project-center__list {
+  padding: 0 24rpx calc(140rpx + env(safe-area-inset-bottom));
 }
 </style>
diff --git a/src/static/icons/icon-chat-add.png b/src/static/icons/icon-chat-add.png
new file mode 100644
index 0000000000000000000000000000000000000000..d79e1d098bf16261c86d9a42470eb4673bf12c6b
GIT binary patch
literal 665
zcmV;K0%rY*P)<h;3K|Lk000e1NJLTq000#L000#T1^@s6sTZY|0006`Nkl<ZcmbT1
zIZPE%6hL20w9ts!xK+3$+G%5_b{aJrwb4?ICRRqHi7|0k2!sRzp&}tHB^3}LB+vmJ
z4OBqFR<Skg6wq+aeEu*D>t}M$yZ7C9?|pyXGXF@}|H&uh0la`ma0&L5-HM(f>j#X$
z7_>tJw81Focl;#wHrc7@W1@!OKb(gq_yeEdFW5hac6=E91hz=J=sQN6;WU_Z5&ax2
zR)My-{R<m*9@<IF!^}vss54gKo`pN`3+6$&LQ?~mL0P16qPuA0&GQZEhLA1l+En9N
zg@@1!Nx4nu4LBJp7UPUx!(+aC5f}Z4^DGpDfv5wE@g+pN&L7ZmQGdlUjxsoml#;Xp
z)`^OG?p&)*oURorXL0R2$g)npYkG~2(r*K9$}4md*A!P!C;i&~D98G2;JQUU7TCdE
zRDY+bOOZV?>hzfLgonA1dGai}kg<bjGw>9`>lE%RuAokj6*&NBKv}ZrpcdQ&#Vc5k
zk)(&dqE7m?jd$#Z4GdUx9K-v3A03@Dbgtq#zekdF#w>~*YH5zc7dVW3Cg}uNCpuEt
zp^|1AzQQfYMU4MO!VLI*h>Lp8+}WcH_?a^hGnQ^F@4gx{7UPURhR6KqoM&GjUudOy
z5AI?Y`Zu^%sNh<?#ZaSyYyS_!NsKqIg?=Q-qB=Y>&oDe@e&!~z8$sLegA>`G!1oh8
zn@`c^p)!&#s@EB>VwmJQJBh{0@mbvd6t?5uM&FR`rtDPIQP-vb!z=53_P^;ReLr(v
zOZ|?!7r3{|IsgCw|NokvG9mx~00v1!K~w_(U#)sm(;h3E00000NkvXXu0mjfcKbC$

literal 0
HcmV?d00001

diff --git a/src/static/icons/icon-chat-camera.png b/src/static/icons/icon-chat-camera.png
new file mode 100644
index 0000000000000000000000000000000000000000..57f9f52aebc33e656fba07ad6826b8b88ca013cd
GIT binary patch
literal 1737
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

literal 0
HcmV?d00001

diff --git a/src/static/icons/icon-chat-file.png b/src/static/icons/icon-chat-file.png
new file mode 100644
index 0000000000000000000000000000000000000000..4902966f10988264fd0c8ae1061f82378bcfd0e4
GIT binary patch
literal 1458
zcmV;j1x@;iP)<h;3K|Lk000e1NJLTq002S&002S=1^@s6<5U3X000GNNkl<ZcmeEM
zO-Lk182xr!e^$^@*FOUOf(P9k6vTsz2tf$unA0kPVge$FmjnrD5DY>N35p^rG2&_6
zi@6AaT)Zu!u4X|OMZrHL7hQkBMJGCWuhKKjXuCV^RIk(HNPS(^)m^XOdsfwSSGPj~
z{M+B(cOD%b)f^rk{)T)Gv3GoY>_YAig)q46fy<o1v4)%jlqVlF0>A|T{@vkl`~%SE
z4<0=D7I`V+vD@u_h&&{c!R0Z?lo}kLlQX$f1M1(KZZrbGj{x!uTE78sBO)GUTP1Qv
zG=lUSYM~~SO_Qk+bPzEMknhkc8e#VoO)b=fC@>Rq&4`18gA$zh5)D5`9#+ZF^wQAi
zr_Ij@x`lD|7tTmSglkHpMr!pH=rw}l2k{3EhO-Hfr&1cVA|9zdY`jLmp`VPdgX-{4
z)Jn}BrOF6Y6yQLsr}Dn!)J*NvtBgPw`2joO@aq5>w@T55c5xVYU(asUJiJbRMh_fO
zQBhx^i`edFN!R~^+UbD<UE>Q~pmxQf2M#z=Y*zugc+&$;mU+4WZH$x09^t$T0ikqF
z^av;Ch>&@dzAJMuM?B=vxU1`j)O90982^rl5fLK{2aGJzBO*o^4j7pwJz{fnQ+j)Q
zrM0zHnwy)0ing{k86O{)lamvJvNf4@BQ`cRq_eYAW@l$*Z*NcVydPBT?Ci+o<fOE>
zx6AJCt~D+IRl5-r6BFWcxd5#<(bUn=QN5r(XxfcfU0wBo_b(<UCQ52*stTvmDQ1z7
zkRb8#@uso8z3mUEaZkGuXJ==o^cou*WoT$f`uh4*3=R&8Squ*k%gD%xX$%Yum}2Xw
z)NX_ssodOLsj8|nI}|c?j!(g)tgK93hI2=KeZADy)=FJnov?h{XlQ7Vj*bqQo10UZ
zx;CH0h~na6#dl?8#XFH+US6s)&ACmSpP$S6`nvS=^vJ@(g2KJk=7y6kHzFk^MRIa-
z)a4f!7gernGc`4(3+lt41q6Ggl9Cd^!iR#<ZN%y6slwH<vAjo=mhw{y5xka{t*tE`
zoV^&CnVH^lumwwvh>MGpqM{<jacOBu<vKTcdHR-HEj1!GHdgS?Kxv<unNhjUO)h?x
zb>UfR1fMgyySt^ozhCC(=XG&bIGlH~va(cJ$Hr14NN{<1S*E9_S=1WY+1bLOrwi0_
zBXkkHij$w8f3+&8ecKvQP*4z*@T-k&YeZpT;Z-d`?Q1t8CMG5*LV+|+PfwSOjEq1|
z4fq`GM(|ED;H!V+i4_$UAKCKeX4;LYsi{#5FE?K@xFfuqtgfyO4#cFjb|aFLlclSx
zODZcXwf?+u$d#9u3)e%rf@Pv5s4DG7kWErjk~B3n3D+3M#>Qk!Q?#_SsO3FgLw8tW
zgfGb$OrHF21{=PZR+KF_!V1z>U`C8ET#XpvF#=C<{~G0co6!S)I&^ez9WaEu-R>g}
zjSXY}K4%;35wGvF1JsTl@tU6(>RS^hstp5k#FXRW;^I#@qHkT?W=2puJ#gR!3@6JM
zHsi08?hAUr$&xQ%eg?Asj~W0P;>m?!LGAy)>2f-qYv>|<Ax>I5J!+<Q0;?Xu0xEvQ
z0sU`b2p)n#t<>zH<~0Ic<Q?K`9I);~C4h%W+ND;+I}abP5v+hiYj|D%CCXu722_}*
zU23FO-@|@J@Bmhr{zm?kT?ctsB}3CwL!+OzYew)W-9nV1;jh>ahhGyHwNMjc4Vtbc
zQzLj5#}Ag=zDM~9Kt>U^yXhil1iwjqLM_w;J*MeKBRpr*L4bUNarGJMY5_cg{1xIY
zfJ5dH-r({Uyj~d`Yss11sR8xxP5%J^0RR7=9T%1W000I_L_t&o06jeN!@adf(*OVf
M07*qoM6N<$g53q9ApigX

literal 0
HcmV?d00001

diff --git a/src/static/icons/icon-chat-photo.png b/src/static/icons/icon-chat-photo.png
new file mode 100644
index 0000000000000000000000000000000000000000..1009169c37e477ae1a6d7d06d168d731b24ea260
GIT binary patch
literal 1446
zcmV;X1zGxuP)<h;3K|Lk000e1NJLTq002S&002S=1^@s6<5U3X000GBNkl<ZcmeF2
zOGsQ-7{|YiidvQN{YDHrBD6}2!A(}WsT5aTCE~`^jfzE4QNapYe1KK7pe}5)3|ST2
z6uQYq;-U#O_y&cz>c;p)DrnUH|C2KlZ=9JZbMJNL-jVZpUiW_Y`~T+LbI-Y>4!Pma
z-rk<`@bK{Q!NI{C@>j5TM@L6z$S*^|R4nfh%PSS*W5#?#dGc8haO{HP-yIIezi|5O
z-o1N`$REJcE-x>mk%vT5v7{lG2P(#AjG3`h1KI;7zaZc^9!`G2*{g8;1oj2WVU-v&
z><NNir50*J*=O<zf&^iI!$}9uih+fDilG*2g1LN&xdvi?fBzdC_!1|6h1^m}X?m$N
zYP4xUkQVN%zi>nb%&IAa8maZFKraa1Kd?X0X=MnI=S~^a3X6Bw@XHGVgnm{-2hG+`
z)Jn}BrEU;taG~QzPorIOYNmGTb%VeV=|RN`PY1}jRf<vC#i3STk8X9kwGMtn29Btx
zsP8aD!fvso*JnZPWZ=NisMgDAxcVUj2Z($ft^)Lmn+!Nv-q*`v82h=;5#hWG0ikqF
zj0h*^h>+Pz-xVCp5z)Lg?&|s>b=?RE^>IW%L_jD4DvOK=qd=^#u1bG@zce>DOH)&m
zAx7VWgM+fMv7uxHpXoj#rlzK3YimpJvQ)6eHN@zf5GE%lgD0Ro=nmre_*l6%KErnz
zx?Mzf5V}QXvLjPLWM*bcTU(p({;sYLtxd0~AUZocrLwY8ii?Y-v9VFg%F0as-2Gq9
zG!XIe@sgjPuZg6jq(oD{%Zh0rPEJl_dwbif6&oE{TU+zi0~HDi3S@kIT(C<FbXZV*
zrh#CT6tl3fAj`|kGCe&l>+9=m4rob9Nz&2LAvrlYl9tBrcmp2(`A$Dam<nQdcUNX-
zXJuq$L>3np{e<+fIXXI8+S}VDBjdw&PI-BGA3Jp}nF`{zu{Sg{NNH)Q_q6QnY;Rfb
zLdb%ssi~2wsw$1%+}vDEUC&BLf+#O9m-_m8`Siz9BZ7;nii!$}iShl#8pXD@whF$n
z{*;4QW<(Sf70Kx6sQW1}G&CfIg@qci2?+_()zu};H65ywnwl!Hv9YSAZ)V!9LDAja
z-4YiU=T^YQ)xf}j)YjIz*9ROS90`0(x)1R2i|YuE7$03hH<<#0kG<aBUP(+$)C5fN
zb#-+zF)<-yV`IX(L34nQN+3`^4!?1e;ULn})1{}UN4PNZ7gbhPmT>Oy*MGI$sCmLr
z5WJuJ`uYrA5nhE9OxaKnr>CbfH#aAoAoZ}};bEDdpASZ_-*a^bk(`|Dy%;xEe22NT
zv?O}i%F2qIpPzgE>$&&P9R&9VrC1gdh|}p5ql{0XmX;PTlwb?GgK)WA?zh-8Gc)cD
z7B^W&7;h5-4;FyueBD8K9EV$OJcuwM5&@w;s0fG%2t`0;{L`WLs%+Z~o4NP=)1gD#
z5>Udi@H^xj@mAICoW13Ucw=V*)Q%DHhI7OVR_tt;BVIVLiTM*m{<A9xY9|8+-UD*7
zd~R0|(EXeYI9c+Y;V2r;V0KGqxGkvt!#}`ctGtOJ@~hn_P&2htw|hjefQFyYvBI()
zj9RJLqty!nL*xYZJvw$^R!=+B3On%#^@3mn2yI?mTzreN1z<ph@3cdW)OxjB1A-kX
zDJlOTf5@SO+)_ztdZ;vNv|R(iUebb9;>2;(t?)ECqZVp{Z9>zv<P!vs;{Agcu$?G>
z2`5isVYldF%&@1_KrPgSvd`ofgy(1ygp(g|U*)2$4vv3A{u;Im$04(YSF!9OuGcEY
zI>yY{sR8W))BgYf0RR7BT&_(3000I_L_t&o00FHE(oIa6N&o-=07*qoM6N<$f=HLN
AjQ{`u

literal 0
HcmV?d00001

diff --git a/src/static/icons/icon-chat-voice.png b/src/static/icons/icon-chat-voice.png
new file mode 100644
index 0000000000000000000000000000000000000000..31899a860be1e94bea45c92ea001ed130ed3eacf
GIT binary patch
literal 1204
zcmV;l1WWsgP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv000DONkl<ZcmcGP
ze@NVQ7{^aNf2D{DS#D)Q+U$p|Fg6+urqHxv!wt1R7EIalN1azhu{K6U1QAgKv34GW
zgRQMRLUOa6MqoA>flQLhi#uXoM+M=J%O>in*X#ZD?#rEb_}}Dt-{<)}zdqm3^E{u&
z)NnX#y`4z4Z1GoHTbs#WeOg+YBPAu}I`}<;F=S`a9c*f9O5Y-cCFuc9r!yrZBcpA2
zc-XtLvf^4_Uq42WC&0ZC>_T=N-B&J`%Y*GPCqC#BDB*ze^74YVwzi>ADAbL0G4Q9R
zrhZ6}!+Cjmy9D?KWFMpZ6O>@<z~_p5*~d}b0W$FUeBWVF4gO6}Pk*_yv-5$qwY5{r
z%gdL8!Qg}d|247`jg5_E*u0AEEwCToA;o|<$vi+;#NbObmEdM!Vc{N9;Oy$^T4SG-
z`uh4p*nE<opZ^pF0q{66&O2k$WgcL&+1fBLzPzBI;K0nx%x~-ysI084kQ5z>4Kg=3
z_cK1vVXT|f5~~H?Amada3wb;#30FQjJ3H$UpA3G#{}8t4IyyQ|#Om?+72ng6p?}M6
zx2K6W4j363d6vyK5U8)O?`2IOio3hCwDiupy1MfyC+MQnMMXuW@FwBg!{%?Wy{D%~
zF*n+Db#=8Cp@q))LU|Rx84C*w?&<02A<1)db6;o8B#mY&*jwaF43~IfKCRWb0birS
zTC7&<bqQk;%{98WkypCi?iaZ65AXr}j3DqPVK=4?x<|Dd2f(P`Em>Jvf54kWcRWUa
z2Px|DnwlD2KSX=(t*WXD^P<%R_nF2KCNncr-K5=J`iUMOUP#eT6a)#u{{wE(j?xK6
z+cLl88%DP!$w&r&>1SzaNuxll0ov~u0^LvWOQWNsZy>ZXgT9ZX?P2yl5Jx=1l88XX
z-Y7DKnUs*i?9sXzEiElpa{4CnAKTm8FVcd_eGz`&B8wwpJShRXpNv&M6vnNUAkX7$
z^sn|&^!E0yW@l&bt*oqkh63NgS85LZS6p2DS=2_WCMz)-#PcSMjx$okL%WJlY1-~^
zI9lNoXmN4z#^mJWg2&@IigE`5P6Yx1BMs~g>hJG=2}TX$Z*6TIhTllhz`(!?4)039
zD}0|h^pN;uC@CqqNLL-EE@xx)IXO8yNzZ$d5$m1k3^Q&ZVRv`8uB)8pP~1Ug%OjF+
z2E%NY6kU#$)6P4&;UKasFi5NmtOl6}aHTMV><H2caL@ew{58JRro6IGO4ZfXS$yql
zjBq_X_5F>Cii)F(6?HHVkihHp&T)vwh6<EJy3X()%SUT|!~<$z9_b&>Zull-XDGOr
zw0wYXHu#3%`=_R+g77BA9U!R=VNf05%U)#f2ixcjJ2}6^JQ@Sn;6F!ZLw7g0iEYdH
z_;~&1;OI7rEG8DZB0<hIH#hGfO^4`d6;v}u4@($B_9-_x$bY;FY%geh#Kws72{(u;
zw5tCp=oRLVofo|iJQ%?~WUuh@uSUB?_Q~)+00030|K|xgSO5S321!IgR09Aa13717
SP0Pao0000<MNUMnLSTZ)+D4=R

literal 0
HcmV?d00001

diff --git a/src/static/icons/icon-filter.svg b/src/static/icons/icon-filter.svg
index 88e95c9..07d5bcf 100644
--- a/src/static/icons/icon-filter.svg
+++ b/src/static/icons/icon-filter.svg
@@ -1,3 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2 4H14M4 8H12M6 12H10" stroke="#2563EB" stroke-width="1.6" stroke-linecap="round"/>
-</svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1789348125102" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4369" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M547.84 969.547294a32.286118 32.286118 0 0 1-31.744-32.707765V376.952471c0-7.830588 2.710588-15.36 7.710118-21.323295L764.385882 66.861176H111.917176l220.882824 289.912471a33.551059 33.551059 0 0 1 6.806588 20.239059v334.305882l95.472941 98.544941c5.903059 6.144 9.155765 14.456471 9.09553 23.130353a33.129412 33.129412 0 0 1-9.456941 23.070118 31.021176 31.021176 0 0 1-44.513883 0L285.515294 747.881412a33.069176 33.069176 0 0 1-9.276235-23.130353V388.276706L21.744941 54.332235A33.490824 33.490824 0 0 1 27.045647 8.372706 31.201882 31.201882 0 0 1 46.622118 1.325176h786.793411c8.432941 0 16.504471 3.433412 22.40753 9.637648a33.370353 33.370353 0 0 1 1.626353 44.453647L579.523765 389.12v547.719529c0 18.070588-14.215529 32.707765-31.683765 32.707765" fill="#666666" p-id="4370"></path><path d="M701.680941 475.015529a32.286118 32.286118 0 0 1-31.201882-33.129411 32.045176 32.045176 0 0 1 31.322353-32.346353h245.157647c17.528471 0 31.744 14.697412 31.744 32.768 0 18.070588-14.215529 32.707765-31.683765 32.707764h-245.338353z m0 202.511059a32.286118 32.286118 0 0 1-31.683765-32.768c0-18.070588 14.215529-32.647529 31.683765-32.707764h245.338353c17.468235 0.060235 31.623529 14.697412 31.683765 32.768-0.060235 18.070588-14.215529 32.647529-31.683765 32.707764h-245.338353z m0 204.8a31.021176 31.021176 0 0 1-22.407529-9.517176 33.069176 33.069176 0 0 1-9.276236-23.190588c0-18.070588 14.215529-32.647529 31.683765-32.707765h245.338353c17.468235 0 31.623529 14.697412 31.683765 32.768-0.060235 18.070588-14.215529 32.647529-31.683765 32.707765h-245.338353z" fill="#666666" p-id="4371"></path></svg>
\ No newline at end of file
diff --git a/src/static/icons/icon-message-service.png b/src/static/icons/icon-message-service.png
new file mode 100644
index 0000000000000000000000000000000000000000..841b8e68ee7c7b9029052e15aa8a7e4a9343a975
GIT binary patch
literal 3423
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
BVO{_L

literal 0
HcmV?d00001

diff --git a/src/static/icons/icon-message-system.png b/src/static/icons/icon-message-system.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d55e3d072b4b6f2d132f9b70a7b5d088a130954
GIT binary patch
literal 3267
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
B4ygbD

literal 0
HcmV?d00001

diff --git a/src/static/icons/icon-message-workorder.png b/src/static/icons/icon-message-workorder.png
new file mode 100644
index 0000000000000000000000000000000000000000..82d94493837b0608f4093a70c1f0c3aa8c18e67a
GIT binary patch
literal 3398
zcmV-M4Y~4(P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm000d8Nkl<ZcmcFn
zd2Afj8UNnQtdH1EE435>aY7-+5EnuNNdrZ#5KvS=g_b*9p&X)BB#x36fugDip^$%&
zK(rDSAS4v2C8|nAFVTh@n)@J$LYl-m$U)*bj*p$)*`0a){k}K5p0(G;L22}U?>paj
zym@bC9Zycczc36>FI#(e9NXWOljQw4v3r1GVr@c@2ll9qKJew56OdZIbOYAfZ<J#D
zD-^vU$TjU843n1+55*7c>x(bh)mv`g-cxSacDQ7S9Y;zHyN{OI5A?^E^yK3Qh6>5c
zK||9{u4N3y`m)U&cLSldQ=_tdv211cKp|PYx37F2iZuuN6FC}M$(KZ;Sj5`lk`nMG
z=<<=3zCt1g2V?2(Et&lT<@1K3cySp|EQ;-mj6J++V%&rq=(e`0RI*R{vHkRDKE7|q
zp>h+8&PON~xlp4knoLzTFai}BR5JE_$;zR@ME3NR8~Y3KeT<DK@+5Q7bt0Hh1A~#B
zd0HZC2BKt9cTe2ZGiW8w6jCXQ302LBfI^8y6Uv|;=+r+W$B9U9K9Rl0%1wFXU@qpQ
z>lfh*8wiW#d4aJXAMA@~?C(pYgk;REM}!PAkc^U{*Fr(nE^Gp*$|;i)`mmADhhpg&
zD$mGy_G9LTdE7B>1NlPyXl%`EyL;p2V+HH#VWu>svYZI$lyD-(l+naEc5cLA(aQe*
za<et&wL&R=6rsi(V>U3z;>9f4)0>zG7t>YmjsTO?$PAw;N?Dy!|50`}0YFbTq7n}(
zWqIij48#T-xFkPL6LlNF4%~`2$CAChu_;%MOeHcYP)(|gD^xQdmy9Md{v$VrxepGM
zO_Ioxe9_*Dw4=tT22lKY)+R6Q>$8TtFf!;UnIW@99JkCS0ImZxlui&Z*aW^Wa7bQa
zZBW&Wng*=3jd&L>J=|}b_1L7Y8jlkJof1yO36iZvjhT3sJc0Q9uJndUvv2HDtr5D)
zsA-_TkUTzEuwDHHcO<L^MPPU{7NN)F{~#kILL(P*QUI#?zzpG=F%%_Tc+EZzQ*~4u
zIFh&RD0t!F0eE8|nmUmc235v2CgcftDB(m*P`30XQvcENa3gdhn6nRGaVutF-r9C7
z)lqH0x5*R7@<}t#oP~+tBCtxV)DKE~0lRasH<tZ}V>!?R9Es&1@Hub@`a?%!IZS|$
z;EUftLaKoo0I-0{%2YOrIcab*zY_z+xH&E+PdKf(A9Di(_9VP)?&=$YngNKEtsm6D
zDiY&W_4b;A{QiwWS@w2b{_;Uy-uy6>zkL+SKUakE*2+-+y(*M<)`arz+ECtGSCC@^
zi45SY`zCzXZ!1a?BN+w*k`S5`3i5Wu#^EB<eAj@rC&9%vP%_E<!BCnqv0TgWuqn6-
ztP<)3$LfQPk*xl-Bz#+Ocgpy|#-@gOHYuWdEW!m85RHvjqio+>mQ6dOs?ITLc9S|g
zR*+91v&MX6o8mB;&wBI-S!?Fu@;XmAVbHfK(~&w=D&tJ+w@3OEw7^8biz_z4Zzago
z^GLFxn9X7Bt^+06vA@iaiaiHm00)zXcaw`xU9F5Kk4E?-5L-VF%f#E?8&1Wp%?$Ci
z)dke1OiEld=qVGGpln);L%}T8@vaH{MAn8_c(#dd6yN<Bk|7>P^)6`OG!=OQ4oWx?
zsT`qyJi(d0VK~(bf~HHu2nQ|Wpe!c<!_`}5hLdP<*g#jf)!ok)J603)=W#+kI;x?`
zKtn>f#4g`RxmdEsNbXV(fAr1aTcqlsj9Y|QRfcLJ8<d3*-2JQOHp}G~GzpuUcSVcb
ze{GxGdrh0nzp7R4_+g9O_JbC=`SKRI@v;`V;Os_yI@KmLaGHudf#ga!5hG;$0VFn&
zIi3~M#YY0W)@Cydd1Ba5n}mh40b<MUl5E{uLSa_c|2LA2xE~vLM6#(nk}W$+vSn9E
zw$caKeXtBaQLu?>4&)|JXwGqD=Ek|{Vgu7u;3^_r1d>+kh!toucCsv-Yl$tp%CZe_
z74oY;jb!=SqP(-NDDSQ>%KICO@*(iirlPFa9Lb)~W2qiBTy{iu^)e^{g%VCg9hvK`
zc++r%?8z*IeuPE>gQ2WW6zT-Q<;N~sK=k}G4#6hII{)?bnj?*`sdO59<LHm~hTy+E
zPUdU0(Q*Ni1_5!a!B9<b5kw^wSqs%mJlq6#hE4D;)GJo?c$upo*8-Jz8XQUL$s=oI
z18{Bh$Z!Fn0l;7=s}luyD&a(=vKE@S-T%q=n&s+?+$Fvp7k1&TljV_{Cd-32w8?_&
z+vI20waNWIYLk0#u`fQCepZhW8$r0?RGIk7>O_xpPqQ+351kbZZUbE)lcb)Gs7|NR
zvhF4tU?ZFKqPok;OT2n(Bx`UN)^3Yr9WM0-T<Q(D)SuwX+l`MI*YGzH>2UQf$4D79
zrUpk;Mx{ty@bE!6<QYg76Tn)DkwNOo+&ygq$6)=Al5EDCri|mUa%)Nc`k#XQeMLe3
zv8o_%0smTEs9x+H`!bgp{>(>c4wjOlB13d6od_sUEnlODJan;(4Ny-Anh-n@@`UJ=
zb}smrk=-ShI+xfT5ALouh$N1$uNTefatPxSX)4|AtPDMUShHBW3rEOq_IZ^vPIQoQ
zf(m^B7R4PWCG=7!t|1-|eL|G+gob(7gvzNNp-?^d6a)o28B98=vNF!chkMz|W*i~A
zGVq;J3&SG%5u!~PAx|iiv2%A_;Z|<DtXXcrMW*ilYg*)~pMFJtGk>xyx^uETamQqN
zY~Ey9c#FH(m(9YLI4z#*5z>WbJ^~8n8*BGr7H&FvSn1gYe|g}g>uJ%IWHL=<f~qHd
z;KE%bSOo9DC*AxKi>%#Nk`=hbs{nq~vX^=N_LBY@)#HaI*s#V#JccEN`IO1l00#_J
zWAZ&?CGnSg9bYq_8DrL=37Fji*c}56c|wDZxEqrijsEsw6RYrd!8#O2{=H8k`NP|x
z{PCSomc19spWYAU&mR=zjgJcQ=Eos^R+RM>$|iy!eZovaRC8i~*+^AR84!<09yL!v
z?PL+mE^P>4VE`g!g*;IsBXBBT@~uYUcZ9ph^Uo)tXCFJuMw~2&FSzKo+H6)oV;T~V
z%7FwJs%8_)h?c`ChpOW^Sqc~YS%BH|yjOF+gkWh;Jsr`tI%Q=vfxtI@zge!luu=F%
zU{P$s6<)ts?zlFKi_OMobu`F#&uwB_7aSZ@5v~xYw&L=^tRwJDSSkgtQa~>vou`@}
zYrIz)b5yxS8o-Vt!{i$ycV00`e*558<=1z#$z!*)$-<jj<rg=$%EQ;U$b&y_l?B(e
z%FnNDl?SeAmHV!4m3yvgk$bOhkzd01%Gu3m-VCQ=J_50oa3ZR*kz9agL|*Ac%}|Rr
zK*qQ7G@e3U%}{V1q0vXmFkm<no<vKdC(}<0<m{<|oYS6@&M7%L3$$ZOARW+8KQ)ju
zLC*j^<CH+Ao)k!9L;B`GY!@iqxDhh*RO~e6jO25k|1^1`+CXQ!*$2nP`V_c|fQJ%J
zL`4RLFXswDcD6oZH{ro$M8%OjQCEfm!<niKLL&~9dQXj6-2QdcN*z#b0KAxK-ZQ=@
z8v)^Zoxorys}lqaWp#ppp{!1LB8)|ylPL`sp*pDQ+M%zpXJo#4e9vqwe#3i)>I!Na
z=rSfsj5n_#Cqp>il~__?G$~i63<;67JNd*u4MxN99x~RO#~N8e1vL#&dHyuB*_Q3y
zO@Sm_$btyr1Yjtu69p_%!ilJn86oYTHloH30YlZCh*VY<6C*SPCc%%+yE{%Xn_;dQ
zqZ**~+a1B{){}=D0<jE09b%EB)i|O$oyL<H;S25tVqgfNlQJ$HcHZKT_lLWt1g|?y
z?OeA3y3G2f{~Y2xlndOGU|`53nQ9%YN*b|H2`8dPW+P+x!%t&?av4Ey6pzn^d8n)1
ze-5U)W6TEVec^O8VeQR1-wg6&H8RPVG8VIl(RP+K;%UGU!?~sma|OtW>Tf=GoZ^vY
z_&Y$M9%gq0%MvNg^?b8|ZvxH4L~vHZi8wBqjigTl>og`P!!U<u%!b64=gyoKEQ5O7
zG42znten%)xVa@Vb37x9e9yh1vPqeELNXjNoGWh^P?6bEfY@TpqTG--=lp4nqb_Wv
zo-CbE16<J6WuiG}`A@}Ru@kS@7tl=gt4%u#(aMxbcb7Z?hm@p-DiIc*#(E))qRv^T
z`%f_!mP}|&xPeNvi_f35Z*Hf*z*ujpB=U$SW;F`H&$Hp8B(0W&P#Fvc!eGW<D!Rtl
z)nd&fapX_E;LKpb#hsJ(!Qr@ucU;~X=kJ_jj$Aaue|GNK-t4mV+KqU(<3v1f#V$vQ
zJH^U?h>69R7&3T)&Mp^`=Z){*?l*YtbEXHgXLtC|G8Xh-YWxoX0RR6`q%(g2000I_
cL_t&o01!Dlv^{@%LjV8(07*qoM6N<$g0wVWdjJ3c

literal 0
HcmV?d00001

diff --git a/src/static/icons/添 加.png b/src/static/icons/添 加.png
new file mode 100644
index 0000000000000000000000000000000000000000..d79e1d098bf16261c86d9a42470eb4673bf12c6b
GIT binary patch
literal 665
zcmV;K0%rY*P)<h;3K|Lk000e1NJLTq000#L000#T1^@s6sTZY|0006`Nkl<ZcmbT1
zIZPE%6hL20w9ts!xK+3$+G%5_b{aJrwb4?ICRRqHi7|0k2!sRzp&}tHB^3}LB+vmJ
z4OBqFR<Skg6wq+aeEu*D>t}M$yZ7C9?|pyXGXF@}|H&uh0la`ma0&L5-HM(f>j#X$
z7_>tJw81Focl;#wHrc7@W1@!OKb(gq_yeEdFW5hac6=E91hz=J=sQN6;WU_Z5&ax2
zR)My-{R<m*9@<IF!^}vss54gKo`pN`3+6$&LQ?~mL0P16qPuA0&GQZEhLA1l+En9N
zg@@1!Nx4nu4LBJp7UPUx!(+aC5f}Z4^DGpDfv5wE@g+pN&L7ZmQGdlUjxsoml#;Xp
z)`^OG?p&)*oURorXL0R2$g)npYkG~2(r*K9$}4md*A!P!C;i&~D98G2;JQUU7TCdE
zRDY+bOOZV?>hzfLgonA1dGai}kg<bjGw>9`>lE%RuAokj6*&NBKv}ZrpcdQ&#Vc5k
zk)(&dqE7m?jd$#Z4GdUx9K-v3A03@Dbgtq#zekdF#w>~*YH5zc7dVW3Cg}uNCpuEt
zp^|1AzQQfYMU4MO!VLI*h>Lp8+}WcH_?a^hGnQ^F@4gx{7UPURhR6KqoM&GjUudOy
z5AI?Y`Zu^%sNh<?#ZaSyYyS_!NsKqIg?=Q-qB=Y>&oDe@e&!~z8$sLegA>`G!1oh8
zn@`c^p)!&#s@EB>VwmJQJBh{0@mbvd6t?5uM&FR`rtDPIQP-vb!z=53_P^;ReLr(v
zOZ|?!7r3{|IsgCw|NokvG9mx~00v1!K~w_(U#)sm(;h3E00000NkvXXu0mjfcKbC$

literal 0
HcmV?d00001

diff --git a/src/types/case-library.ts b/src/types/case-library.ts
index 12da75f..e9dde65 100644
--- a/src/types/case-library.ts
+++ b/src/types/case-library.ts
@@ -14,6 +14,20 @@ export interface CaseItem {
   favorite?: boolean
 }
 
+export interface CaseAttachment {
+  id: string
+  name: string
+  icon: string
+}
+
+export interface CaseDetail extends CaseItem {
+  background: string
+  painPoints: string
+  requirement: string
+  deliverables: string
+  attachments: CaseAttachment[]
+}
+
 export interface CaseFilterValues {
   industries: string[]
   scales: string[]
diff --git a/src/types/customer-service.ts b/src/types/customer-service.ts
new file mode 100644
index 0000000..3de271f
--- /dev/null
+++ b/src/types/customer-service.ts
@@ -0,0 +1,9 @@
+export type ChatRole = 'user' | 'service'
+
+export interface ChatMessage {
+  id: string
+  role: ChatRole
+  nickname: string
+  content: string
+  avatar: string
+}
diff --git a/src/types/message-center.ts b/src/types/message-center.ts
new file mode 100644
index 0000000..62c423f
--- /dev/null
+++ b/src/types/message-center.ts
@@ -0,0 +1,11 @@
+export type MessageType = 'service' | 'workorder' | 'system'
+
+export interface MessageItem {
+  id: string
+  type: MessageType
+  icon: string
+  title: string
+  preview: string
+  time: string
+  unread?: boolean
+}
diff --git a/src/types/project-center.ts b/src/types/project-center.ts
new file mode 100644
index 0000000..7310461
--- /dev/null
+++ b/src/types/project-center.ts
@@ -0,0 +1,16 @@
+export type ProjectCategory = '全部' | '互联网软件' | '硬件电路' | '物联网全案' | '生产制造'
+
+export type ProjectStatus = '进行中' | '待立项' | '售后中'
+
+export interface ProjectCenterItem {
+  id: string
+  title: string
+  category: Exclude<ProjectCategory, '全部'>
+  projectNo: string
+  status: ProjectStatus
+  industry: string
+  scale: string
+  completedAt: string
+  progress?: number
+  updateTime?: string
+}
diff --git a/src/types/project-detail.ts b/src/types/project-detail.ts
new file mode 100644
index 0000000..3ef77eb
--- /dev/null
+++ b/src/types/project-detail.ts
@@ -0,0 +1,35 @@
+import type { ProjectCenterItem } from '@/types/project-center'
+
+export type ProjectDetailTab = 'progress' | 'files' | 'finance' | 'aftersales'
+
+export type ProjectProgressStepStatus = 'done' | 'active' | 'pending'
+
+export interface ProjectProgressStep {
+  id: string
+  title: string
+  status: ProjectProgressStepStatus
+  time?: string
+  statusText?: string
+}
+
+export interface ProjectTeamMember {
+  id: string
+  name: string
+  role: string
+}
+
+export interface ProjectFileItem {
+  id: string
+  name: string
+  icon: string
+}
+
+export interface ProjectDetail extends ProjectCenterItem {
+  progressStartTime: string
+  progressEndTime: string
+  steps: ProjectProgressStep[]
+  team: ProjectTeamMember[]
+  files: ProjectFileItem[]
+  financeSummary: string
+  afterSalesSummary: string
+}
diff --git a/src/types/status-notification.ts b/src/types/status-notification.ts
new file mode 100644
index 0000000..d85b261
--- /dev/null
+++ b/src/types/status-notification.ts
@@ -0,0 +1,7 @@
+export interface StatusNotificationItem {
+  id: string
+  title: string
+  preview: string
+  time: string
+  unread?: boolean
+}
diff --git a/src/utils/case-filter.ts b/src/utils/case-filter.ts
index c7ded32..3656005 100644
--- a/src/utils/case-filter.ts
+++ b/src/utils/case-filter.ts
@@ -1,5 +1,7 @@
 import type { CaseFilterValues, CaseItem } from '@/types/case-library'
 
+export type CaseFilterTarget = Pick<CaseItem, 'industry' | 'scale' | 'completedAt'>
+
 function parseScaleValue(scale: string): number {
   const match = scale.match(/(\d+)/)
   return match ? Number(match[1]) : 0
@@ -128,7 +130,7 @@ export function removeFilterTag(filter: CaseFilterValues, key: string): CaseFilt
   return next
 }
 
-export function matchCaseFilter(item: CaseItem, filter: CaseFilterValues): boolean {
+export function matchCaseFilter(item: CaseFilterTarget, filter: CaseFilterValues): boolean {
   if (filter.industries.length > 0 && !filter.industries.includes(item.industry))
     return false