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 0000000..d79e1d0
Binary files /dev/null and b/src/static/icons/icon-chat-add.png differ
diff --git a/src/static/icons/icon-chat-camera.png b/src/static/icons/icon-chat-camera.png
new file mode 100644
index 0000000..57f9f52
Binary files /dev/null and b/src/static/icons/icon-chat-camera.png differ
diff --git a/src/static/icons/icon-chat-file.png b/src/static/icons/icon-chat-file.png
new file mode 100644
index 0000000..4902966
Binary files /dev/null and b/src/static/icons/icon-chat-file.png differ
diff --git a/src/static/icons/icon-chat-photo.png b/src/static/icons/icon-chat-photo.png
new file mode 100644
index 0000000..1009169
Binary files /dev/null and b/src/static/icons/icon-chat-photo.png differ
diff --git a/src/static/icons/icon-chat-voice.png b/src/static/icons/icon-chat-voice.png
new file mode 100644
index 0000000..31899a8
Binary files /dev/null and b/src/static/icons/icon-chat-voice.png differ
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 0000000..841b8e6
Binary files /dev/null and b/src/static/icons/icon-message-service.png differ
diff --git a/src/static/icons/icon-message-system.png b/src/static/icons/icon-message-system.png
new file mode 100644
index 0000000..6d55e3d
Binary files /dev/null and b/src/static/icons/icon-message-system.png differ
diff --git a/src/static/icons/icon-message-workorder.png b/src/static/icons/icon-message-workorder.png
new file mode 100644
index 0000000..82d9449
Binary files /dev/null and b/src/static/icons/icon-message-workorder.png differ
diff --git a/src/static/icons/添 加.png b/src/static/icons/添 加.png
new file mode 100644
index 0000000..d79e1d0
Binary files /dev/null and b/src/static/icons/添 加.png differ
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