From ac2672729fce6ec5a4bdd829a9ac98524044a113 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Fri, 13 Mar 2026 18:55:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86API=E5=8F=8A=E7=9B=B8=E5=85=B3=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor(services-section): 重构服务展示组件使用API数据
refactor(news-section): 重构新闻展示组件使用API数据
refactor(products-section): 重构产品展示组件使用API数据

test: 添加API客户端和服务钩子的单元测试
test(e2e): 添加配置验证和API响应格式的端到端测试

ci: 更新Playwright测试配置
---
 .auth/admin.json                              |  55 ++
 e2e/playwright.config.tiered.ts               |   3 +-
 e2e/src/tests/unit/api-response.spec.ts       | 391 +++++++++++++
 e2e/src/tests/unit/config-transform.spec.ts   | 404 ++++++++++++++
 e2e/src/tests/unit/config-validation.spec.ts  | 300 ++++++++++
 src/app/api/content/route.ts                  |  54 ++
 .../news-section.integration.test.tsx         | 513 ++++++++++++++++++
 src/components/sections/news-section.tsx      | 117 ++--
 .../products-section.integration.test.tsx     | 472 ++++++++++++++++
 src/components/sections/products-section.tsx  | 184 ++++---
 .../services-section.integration.test.tsx     | 347 ++++++++++++
 src/components/sections/services-section.tsx  | 104 ++--
 src/hooks/use-news.ts                         |  32 ++
 src/hooks/use-products.ts                     |  28 +
 src/hooks/use-services.ts                     |  28 +
 src/lib/api/client.test.ts                    | 211 +++++++
 src/lib/api/client.ts                         | 221 ++++++++
 src/lib/api/services.test.ts                  | 426 +++++++++++++++
 src/lib/api/services.ts                       | 131 +++++
 src/lib/api/types.ts                          |  66 +++
 20 files changed, 3934 insertions(+), 153 deletions(-)
 create mode 100644 .auth/admin.json
 create mode 100644 e2e/src/tests/unit/api-response.spec.ts
 create mode 100644 e2e/src/tests/unit/config-transform.spec.ts
 create mode 100644 e2e/src/tests/unit/config-validation.spec.ts
 create mode 100644 src/app/api/content/route.ts
 create mode 100644 src/components/sections/news-section.integration.test.tsx
 create mode 100644 src/components/sections/products-section.integration.test.tsx
 create mode 100644 src/components/sections/services-section.integration.test.tsx
 create mode 100644 src/hooks/use-news.ts
 create mode 100644 src/hooks/use-products.ts
 create mode 100644 src/hooks/use-services.ts
 create mode 100644 src/lib/api/client.test.ts
 create mode 100644 src/lib/api/client.ts
 create mode 100644 src/lib/api/services.test.ts
 create mode 100644 src/lib/api/services.ts
 create mode 100644 src/lib/api/types.ts

diff --git a/.auth/admin.json b/.auth/admin.json
new file mode 100644
index 0000000..7c99002
--- /dev/null
+++ b/.auth/admin.json
@@ -0,0 +1,55 @@
+{
+  "cookies": [
+    {
+      "name": "authjs.csrf-token",
+      "value": "2940c862b3fcc58543ae12377761900f7c74eb4a910054b9d7a082e08ac7eec7%7Cd3df7b4b17680c02c9105d10e6df7cb22ccb7656cf7f384a7272b6d6a28287a6",
+      "domain": "localhost",
+      "path": "/",
+      "expires": -1,
+      "httpOnly": true,
+      "secure": false,
+      "sameSite": "Lax"
+    },
+    {
+      "name": "_ga",
+      "value": "GA1.1.883952371.1773396051",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1807956050.784813,
+      "httpOnly": false,
+      "secure": false,
+      "sameSite": "Lax"
+    },
+    {
+      "name": "_ga_LGTLCR15KM",
+      "value": "GS2.1.s1773396050$o1$g0$t1773396053$j57$l0$h0",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1807956053.726289,
+      "httpOnly": false,
+      "secure": false,
+      "sameSite": "Lax"
+    },
+    {
+      "name": "authjs.callback-url",
+      "value": "http%3A%2F%2Flocalhost%3A3000%2Fadmin%2Flogin",
+      "domain": "localhost",
+      "path": "/",
+      "expires": -1,
+      "httpOnly": true,
+      "secure": false,
+      "sameSite": "Lax"
+    },
+    {
+      "name": "authjs.session-token",
+      "value": "eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2Q0JDLUhTNTEyIiwia2lkIjoiUkJOSmVSR3M5QlFaQnhQbkVHMG9MSy1ZaHY0YmVqM3JuZjJ4eHN1NzNLaHhhVlJQamVtVU1RT2M1WlJPY085ckZPbG1KbFk5MTRNUV9pV3BGVzV1VWcifQ..8ahF3Wx9hRRJJ8NNTHBagQ.Yk7DHEdEHhV36PTvzZEW8d3r6NfBkRQzqCY4ADGKTpdkTAIMT93JKYq2x90oyFqIH9O2dM9CxBkywgbKRdtm3jrxMQuh_9sg7KwIGRnhjkOBRNNRY6ov0y64WGFYy7b0Nf-CevQIva56GIEqIUMyfGcMRfNe-hJNUXdQ40xNJ_TYTenNYWxUhRYVoM4zSCIABVJHk2nY1lGdxaGNq48S2FqjCFzsTEC2DXZ_KFjGks_modve2K7Y1PUzUg0KYZERL209JIJHfMqimgewuxGI0w.xf03-8g2fEU4v0aoCuu5Q0caDatzWoxtxctL7vL8hCU",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1775988053.888913,
+      "httpOnly": true,
+      "secure": false,
+      "sameSite": "Lax"
+    }
+  ],
+  "origins": []
+}
\ No newline at end of file
diff --git a/e2e/playwright.config.tiered.ts b/e2e/playwright.config.tiered.ts
index e7508e3..e8fc734 100644
--- a/e2e/playwright.config.tiered.ts
+++ b/e2e/playwright.config.tiered.ts
@@ -1,8 +1,7 @@
 import { defineConfig, devices } from '@playwright/test';
 import { getEnvironment } from './src/config/environments';
 import { getMobileDevices } from './src/utils/devices';
-import { getTestTier, TEST_TIERS } from './src/config/test-tiers';
-import globalSetup from './global-setup';
+import { getTestTier } from './src/config/test-tiers';
 
 const env = getEnvironment();
 
diff --git a/e2e/src/tests/unit/api-response.spec.ts b/e2e/src/tests/unit/api-response.spec.ts
new file mode 100644
index 0000000..2ab23dd
--- /dev/null
+++ b/e2e/src/tests/unit/api-response.spec.ts
@@ -0,0 +1,391 @@
+import { describe, test, expect } from '@playwright/test';
+
+describe('API响应格式测试', () => {
+  describe('Success响应格式', () => {
+    test('验证success响应结构', () => {
+      const successResponse = {
+        success: true,
+        data: { key: 'value' }
+      };
+
+      expect(successResponse).toHaveProperty('success');
+      expect(successResponse).toHaveProperty('data');
+      expect(successResponse.success).toBe(true);
+      expect(typeof successResponse.data).toBe('object');
+    });
+
+    test('验证success响应带configs数组', () => {
+      const successResponse = {
+        success: true,
+        configs: [
+          { id: '1', key: 'feature_services', value: {} },
+          { id: '2', key: 'feature_products', value: {} }
+        ]
+      };
+
+      expect(successResponse).toHaveProperty('success');
+      expect(successResponse).toHaveProperty('configs');
+      expect(successResponse.success).toBe(true);
+      expect(Array.isArray(successResponse.configs)).toBe(true);
+      expect(successResponse.configs).toHaveLength(2);
+    });
+
+    test('验证success响应带单个config', () => {
+      const successResponse = {
+        success: true,
+        configs: [
+          { id: '1', key: 'feature_services', value: {} }
+        ]
+      };
+
+      expect(successResponse.success).toBe(true);
+      expect(successResponse.configs).toHaveLength(1);
+      expect(successResponse.configs[0].key).toBe('feature_services');
+    });
+
+    test('验证success响应状态码', () => {
+      const statusCodes = [200, 201, 204];
+
+      statusCodes.forEach(statusCode => {
+        expect(statusCode).toBeGreaterThanOrEqual(200);
+        expect(statusCode).toBeLessThan(300);
+      });
+    });
+  });
+
+  describe('Error响应格式', () => {
+    test('验证error响应结构', () => {
+      const errorResponse = {
+        success: false,
+        error: '错误信息',
+        code: 'VALIDATION_ERROR'
+      };
+
+      expect(errorResponse).toHaveProperty('success');
+      expect(errorResponse).toHaveProperty('error');
+      expect(errorResponse).toHaveProperty('code');
+      expect(errorResponse.success).toBe(false);
+      expect(typeof errorResponse.error).toBe('string');
+      expect(typeof errorResponse.code).toBe('string');
+    });
+
+    test('验证error响应带details', () => {
+      const errorResponse = {
+        success: false,
+        error: '数据验证失败',
+        code: 'VALIDATION_ERROR',
+        details: {
+          field: 'key',
+          message: 'key字段不能为空'
+        }
+      };
+
+      expect(errorResponse.success).toBe(false);
+      expect(errorResponse).toHaveProperty('details');
+      expect(typeof errorResponse.details).toBe('object');
+      expect(errorResponse.details.field).toBe('key');
+    });
+
+    test('验证UNAUTHORIZED错误响应', () => {
+      const errorResponse = {
+        success: false,
+        error: '未授权，请先登录',
+        code: 'UNAUTHORIZED'
+      };
+
+      expect(errorResponse.success).toBe(false);
+      expect(errorResponse.code).toBe('UNAUTHORIZED');
+      expect(errorResponse.error).toContain('未授权');
+    });
+
+    test('验证FORBIDDEN错误响应', () => {
+      const errorResponse = {
+        success: false,
+        error: '无权限执行此操作',
+        code: 'FORBIDDEN'
+      };
+
+      expect(errorResponse.success).toBe(false);
+      expect(errorResponse.code).toBe('FORBIDDEN');
+      expect(errorResponse.error).toContain('无权限');
+    });
+
+    test('验证NOT_FOUND错误响应', () => {
+      const errorResponse = {
+        success: false,
+        error: '请求的资源不存在',
+        code: 'NOT_FOUND'
+      };
+
+      expect(errorResponse.success).toBe(false);
+      expect(errorResponse.code).toBe('NOT_FOUND');
+      expect(errorResponse.error).toContain('不存在');
+    });
+
+    test('验证VALIDATION_ERROR错误响应', () => {
+      const errorResponse = {
+        success: false,
+        error: '数据验证失败',
+        code: 'VALIDATION_ERROR'
+      };
+
+      expect(errorResponse.success).toBe(false);
+      expect(errorResponse.code).toBe('VALIDATION_ERROR');
+      expect(errorResponse.error).toContain('验证');
+    });
+
+    test('验证INTERNAL_ERROR错误响应', () => {
+      const errorResponse = {
+        success: false,
+        error: '服务器内部错误',
+        code: 'INTERNAL_ERROR'
+      };
+
+      expect(errorResponse.success).toBe(false);
+      expect(errorResponse.code).toBe('INTERNAL_ERROR');
+      expect(errorResponse.error).toContain('服务器');
+    });
+
+    test('验证BAD_REQUEST错误响应', () => {
+      const errorResponse = {
+        success: false,
+        error: '请求参数错误',
+        code: 'BAD_REQUEST'
+      };
+
+      expect(errorResponse.success).toBe(false);
+      expect(errorResponse.code).toBe('BAD_REQUEST');
+      expect(errorResponse.error).toContain('参数');
+    });
+
+    test('验证error响应状态码', () => {
+      const errorCodes = {
+        'UNAUTHORIZED': 401,
+        'FORBIDDEN': 403,
+        'NOT_FOUND': 404,
+        'VALIDATION_ERROR': 400,
+        'INTERNAL_ERROR': 500,
+        'BAD_REQUEST': 400
+      };
+
+      Object.entries(errorCodes).forEach(([code, statusCode]) => {
+        expect(statusCode).toBeGreaterThanOrEqual(400);
+        expect(statusCode).toBeLessThan(600);
+      });
+    });
+  });
+
+  describe('配置API响应格式', () => {
+    test('验证GET /api/admin/config响应格式', () => {
+      const response = {
+        success: true,
+        configs: [
+          {
+            id: '1',
+            key: 'feature_services',
+            value: { enabled: true, items: ['erp', 'crm'] },
+            category: 'feature',
+            description: '服务功能配置',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+            updatedBy: 'admin'
+          }
+        ]
+      };
+
+      expect(response.success).toBe(true);
+      expect(Array.isArray(response.configs)).toBe(true);
+      expect(response.configs[0]).toHaveProperty('id');
+      expect(response.configs[0]).toHaveProperty('key');
+      expect(response.configs[0]).toHaveProperty('value');
+      expect(response.configs[0]).toHaveProperty('category');
+      expect(response.configs[0]).toHaveProperty('description');
+      expect(response.configs[0]).toHaveProperty('updatedAt');
+      expect(response.configs[0]).toHaveProperty('updatedBy');
+    });
+
+    test('验证POST /api/admin/config响应格式', () => {
+      const response = {
+        success: true,
+        configs: [
+          {
+            id: '1',
+            key: 'feature_services',
+            value: { enabled: true, items: ['erp'] },
+            category: 'feature',
+            description: '服务功能配置',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+            updatedBy: 'admin'
+          }
+        ]
+      };
+
+      expect(response.success).toBe(true);
+      expect(response.configs).toHaveLength(1);
+      expect(response.configs[0].key).toBe('feature_services');
+    });
+
+    test('验证PUT /api/admin/config响应格式', () => {
+      const response = {
+        success: true,
+        configs: [
+          { id: '1', key: 'feature_services', value: { enabled: false } },
+          { id: '2', key: 'feature_products', value: { enabled: true } }
+        ]
+      };
+
+      expect(response.success).toBe(true);
+      expect(response.configs).toHaveLength(2);
+      expect(response.configs[0].value.enabled).toBe(false);
+      expect(response.configs[1].value.enabled).toBe(true);
+    });
+
+    test('验证DELETE /api/admin/config响应格式', () => {
+      const response = {
+        success: true,
+        data: {
+          success: true,
+          message: '配置删除成功'
+        }
+      };
+
+      expect(response.success).toBe(true);
+      expect(response.data).toHaveProperty('success');
+      expect(response.data.success).toBe(true);
+      expect(response.data).toHaveProperty('message');
+    });
+
+    test('验证GET /api/config响应格式', () => {
+      const response = {
+        success: true,
+        data: {
+          feature_services: { enabled: true, items: ['erp', 'crm'] },
+          feature_products: { enabled: false, showPricing: true, featuredProducts: [] },
+          feature_news: { enabled: true, displayCount: 5, categories: ['tech'], sortOrder: 'desc' }
+        }
+      };
+
+      expect(response.success).toBe(true);
+      expect(response.data).toHaveProperty('feature_services');
+      expect(response.data).toHaveProperty('feature_products');
+      expect(response.data).toHaveProperty('feature_news');
+      expect(typeof response.data.feature_services).toBe('object');
+      expect(typeof response.data.feature_products).toBe('object');
+      expect(typeof response.data.feature_news).toBe('object');
+    });
+  });
+
+  describe('响应数据类型验证', () => {
+    test('验证配置值类型', () => {
+      const configValue = {
+        enabled: true,
+        count: 5,
+        items: ['erp', 'crm'],
+        metadata: { key: 'value' }
+      };
+
+      expect(typeof configValue.enabled).toBe('boolean');
+      expect(typeof configValue.count).toBe('number');
+      expect(Array.isArray(configValue.items)).toBe(true);
+      expect(typeof configValue.metadata).toBe('object');
+    });
+
+    test('验证日期格式', () => {
+      const dateFormats = [
+        '2024-01-01T00:00:00.000Z',
+        '2024-12-31T23:59:59.999Z',
+        '2024-06-15T12:30:45.123Z'
+      ];
+
+      dateFormats.forEach(dateString => {
+        const date = new Date(dateString);
+        expect(date.getTime()).not.toBeNaN();
+      });
+    });
+
+    test('验证ID格式', () => {
+      const ids = ['1', '2', '3', 'admin', 'user_123'];
+
+      ids.forEach(id => {
+        expect(typeof id).toBe('string');
+        expect(id.length).toBeGreaterThan(0);
+      });
+    });
+
+    test('验证枚举值格式', () => {
+      const categories = ['feature', 'style', 'seo', 'general'];
+      const sortOrders = ['asc', 'desc'];
+
+      categories.forEach(category => {
+        expect(typeof category).toBe('string');
+        expect(categories.includes(category)).toBe(true);
+      });
+
+      sortOrders.forEach(order => {
+        expect(typeof order).toBe('string');
+        expect(sortOrders.includes(order)).toBe(true);
+      });
+    });
+  });
+
+  describe('响应边界情况', () => {
+    test('验证空数组响应', () => {
+      const response = {
+        success: true,
+        configs: []
+      };
+
+      expect(response.success).toBe(true);
+      expect(Array.isArray(response.configs)).toBe(true);
+      expect(response.configs).toHaveLength(0);
+    });
+
+    test('验证空对象响应', () => {
+      const response = {
+        success: true,
+        data: {}
+      };
+
+      expect(response.success).toBe(true);
+      expect(typeof response.data).toBe('object');
+      expect(Object.keys(response.data)).toHaveLength(0);
+    });
+
+    test('验证null值处理', () => {
+      const response = {
+        success: true,
+        configs: [
+          {
+            id: '1',
+            key: 'feature_services',
+            value: { enabled: true, items: [] },
+            category: 'feature',
+            description: null,
+            updatedAt: '2024-01-01T00:00:00.000Z',
+            updatedBy: null
+          }
+        ]
+      };
+
+      expect(response.success).toBe(true);
+      expect(response.configs[0].description).toBe(null);
+      expect(response.configs[0].updatedBy).toBe(null);
+    });
+
+    test('验证undefined值处理', () => {
+      const response = {
+        success: true,
+        configs: [
+          {
+            id: '1',
+            key: 'feature_services',
+            value: { enabled: true }
+          }
+        ]
+      };
+
+      expect(response.success).toBe(true);
+      expect(response.configs[0].description).toBeUndefined();
+      expect(response.configs[0].updatedBy).toBeUndefined();
+    });
+  });
+});
diff --git a/e2e/src/tests/unit/config-transform.spec.ts b/e2e/src/tests/unit/config-transform.spec.ts
new file mode 100644
index 0000000..41f6c6c
--- /dev/null
+++ b/e2e/src/tests/unit/config-transform.spec.ts
@@ -0,0 +1,404 @@
+import { describe, test, expect } from '@playwright/test';
+
+describe('配置转换函数测试', () => {
+  describe('数据库格式到API格式转换', () => {
+    test('转换单个配置对象', () => {
+      const dbConfig = {
+        id: '1',
+        key: 'feature_services',
+        value: JSON.stringify({ enabled: true, items: ['erp', 'crm'] }),
+        category: 'feature',
+        description: '服务功能配置',
+        updatedAt: new Date(),
+        updatedBy: 'admin'
+      };
+
+      const apiConfig = {
+        id: dbConfig.id,
+        key: dbConfig.key,
+        value: JSON.parse(dbConfig.value),
+        category: dbConfig.category,
+        description: dbConfig.description,
+        updatedAt: dbConfig.updatedAt,
+        updatedBy: dbConfig.updatedBy
+      };
+
+      expect(apiConfig.key).toBe('feature_services');
+      expect(apiConfig.value.enabled).toBe(true);
+      expect(apiConfig.value.items).toEqual(['erp', 'crm']);
+      expect(apiConfig.category).toBe('feature');
+    });
+
+    test('转换配置数组', () => {
+      const dbConfigs = [
+        {
+          id: '1',
+          key: 'feature_services',
+          value: JSON.stringify({ enabled: true, items: ['erp'] }),
+          category: 'feature',
+          description: null,
+          updatedAt: new Date(),
+          updatedBy: 'admin'
+        },
+        {
+          id: '2',
+          key: 'feature_products',
+          value: JSON.stringify({ enabled: false, showPricing: true, featuredProducts: [] }),
+          category: 'feature',
+          description: null,
+          updatedAt: new Date(),
+          updatedBy: 'admin'
+        }
+      ];
+
+      const apiConfigs = dbConfigs.map(config => ({
+        id: config.id,
+        key: config.key,
+        value: JSON.parse(config.value),
+        category: config.category,
+        description: config.description,
+        updatedAt: config.updatedAt,
+        updatedBy: config.updatedBy
+      }));
+
+      expect(apiConfigs).toHaveLength(2);
+      expect(apiConfigs[0].key).toBe('feature_services');
+      expect(apiConfigs[1].key).toBe('feature_products');
+      expect(apiConfigs[0].value.enabled).toBe(true);
+      expect(apiConfigs[1].value.enabled).toBe(false);
+    });
+
+    test('处理无效JSON值', () => {
+      const dbConfig = {
+        id: '1',
+        key: 'feature_services',
+        value: 'invalid json',
+        category: 'feature',
+        description: null,
+        updatedAt: new Date(),
+        updatedBy: 'admin'
+      };
+
+      const parseConfig = (config: any) => {
+        try {
+          return JSON.parse(config.value);
+        } catch {
+          return null;
+        }
+      };
+
+      const result = parseConfig(dbConfig);
+      expect(result).toBe(null);
+    });
+
+    test('处理null值', () => {
+      const dbConfig = {
+        id: '1',
+        key: 'feature_services',
+        value: null,
+        category: 'feature',
+        description: null,
+        updatedAt: new Date(),
+        updatedBy: 'admin'
+      };
+
+      const parseConfig = (config: any) => {
+        try {
+          return JSON.parse(config.value);
+        } catch {
+          return null;
+        }
+      };
+
+      const result = parseConfig(dbConfig);
+      expect(result).toBe(null);
+    });
+  });
+
+  describe('API格式到数据库格式转换', () => {
+    test('转换单个配置对象', () => {
+      const apiConfig = {
+        key: 'feature_services',
+        value: { enabled: true, items: ['erp', 'crm'] },
+        category: 'feature',
+        description: '服务功能配置'
+      };
+
+      const dbConfig = {
+        id: '1',
+        key: apiConfig.key,
+        value: JSON.stringify(apiConfig.value),
+        category: apiConfig.category,
+        description: apiConfig.description,
+        updatedAt: new Date(),
+        updatedBy: 'admin'
+      };
+
+      expect(dbConfig.key).toBe('feature_services');
+      expect(JSON.parse(dbConfig.value)).toEqual({ enabled: true, items: ['erp', 'crm'] });
+      expect(dbConfig.category).toBe('feature');
+    });
+
+    test('转换配置数组', () => {
+      const apiConfigs = [
+        { key: 'feature_services', value: { enabled: true, items: ['erp'] }, category: 'feature' },
+        { key: 'feature_products', value: { enabled: false, showPricing: true, featuredProducts: [] }, category: 'feature' }
+      ];
+
+      const dbConfigs = apiConfigs.map((config, index) => ({
+        id: String(index + 1),
+        key: config.key,
+        value: JSON.stringify(config.value),
+        category: config.category,
+        description: null,
+        updatedAt: new Date(),
+        updatedBy: 'admin'
+      }));
+
+      expect(dbConfigs).toHaveLength(2);
+      expect(dbConfigs[0].key).toBe('feature_services');
+      expect(dbConfigs[1].key).toBe('feature_products');
+      expect(JSON.parse(dbConfigs[0].value)).toEqual({ enabled: true, items: ['erp'] });
+    });
+
+    test('处理复杂嵌套对象', () => {
+      const apiConfig = {
+        key: 'feature_news',
+        value: {
+          enabled: true,
+          displayCount: 5,
+          categories: ['tech', 'business'],
+          sortOrder: 'desc',
+          metadata: {
+            author: 'admin',
+            tags: ['news', 'updates']
+          }
+        },
+        category: 'feature'
+      };
+
+      const dbConfig = {
+        id: '1',
+        key: apiConfig.key,
+        value: JSON.stringify(apiConfig.value),
+        category: apiConfig.category,
+        description: null,
+        updatedAt: new Date(),
+        updatedBy: 'admin'
+      };
+
+      const parsedValue = JSON.parse(dbConfig.value);
+      expect(parsedValue.enabled).toBe(true);
+      expect(parsedValue.displayCount).toBe(5);
+      expect(parsedValue.categories).toEqual(['tech', 'business']);
+      expect(parsedValue.sortOrder).toBe('desc');
+      expect(parsedValue.metadata.author).toBe('admin');
+      expect(parsedValue.metadata.tags).toEqual(['news', 'updates']);
+    });
+  });
+
+  describe('配置分组和过滤', () => {
+    test('按分类分组配置', () => {
+      const configs = [
+        { key: 'feature_services', category: 'feature', value: {} },
+        { key: 'feature_products', category: 'feature', value: {} },
+        { key: 'style_colors', category: 'style', value: {} },
+        { key: 'seo_title', category: 'seo', value: {} },
+        { key: 'general_language', category: 'general', value: {} }
+      ];
+
+      const groupedConfigs = configs.reduce((acc, config) => {
+        if (!acc[config.category]) {
+          acc[config.category] = [];
+        }
+        acc[config.category].push(config);
+        return acc;
+      }, {} as Record<string, any[]>);
+
+      expect(groupedConfigs.feature).toHaveLength(2);
+      expect(groupedConfigs.style).toHaveLength(1);
+      expect(groupedConfigs.seo).toHaveLength(1);
+      expect(groupedConfigs.general).toHaveLength(1);
+    });
+
+    test('按key过滤配置', () => {
+      const configs = [
+        { key: 'feature_services', category: 'feature', value: {} },
+        { key: 'feature_products', category: 'feature', value: {} },
+        { key: 'feature_news', category: 'feature', value: {} }
+      ];
+
+      const filterByKey = (configs: any[], key: string) => {
+        return configs.filter(config => config.key === key);
+      };
+
+      const result = filterByKey(configs, 'feature_products');
+      expect(result).toHaveLength(1);
+      expect(result[0].key).toBe('feature_products');
+    });
+
+    test('按分类过滤配置', () => {
+      const configs = [
+        { key: 'feature_services', category: 'feature', value: {} },
+        { key: 'style_colors', category: 'style', value: {} },
+        { key: 'seo_title', category: 'seo', value: {} },
+        { key: 'feature_products', category: 'feature', value: {} }
+      ];
+
+      const filterByCategory = (configs: any[], category: string) => {
+        return configs.filter(config => config.category === category);
+      };
+
+      const result = filterByCategory(configs, 'feature');
+      expect(result).toHaveLength(2);
+      expect(result.every(config => config.category === 'feature')).toBe(true);
+    });
+
+    test('按key前缀过滤配置', () => {
+      const configs = [
+        { key: 'feature_services', category: 'feature', value: {} },
+        { key: 'feature_products', category: 'feature', value: {} },
+        { key: 'feature_news', category: 'feature', value: {} },
+        { key: 'style_colors', category: 'style', value: {} },
+        { key: 'seo_title', category: 'seo', value: {} }
+      ];
+
+      const filterByKeyPrefix = (configs: any[], prefix: string) => {
+        return configs.filter(config => config.key.startsWith(prefix));
+      };
+
+      const result = filterByKeyPrefix(configs, 'feature_');
+      expect(result).toHaveLength(3);
+      expect(result.every(config => config.key.startsWith('feature_'))).toBe(true);
+    });
+  });
+
+  describe('配置合并和更新', () => {
+    test('合并配置对象', () => {
+      const baseConfig = {
+        enabled: true,
+        items: ['erp', 'crm']
+      };
+
+      const updateConfig = {
+        enabled: false,
+        count: 5
+      };
+
+      const mergedConfig = { ...baseConfig, ...updateConfig };
+
+      expect(mergedConfig.enabled).toBe(false);
+      expect(mergedConfig.items).toEqual(['erp', 'crm']);
+      expect(mergedConfig.count).toBe(5);
+    });
+
+    test('深度合并配置对象', () => {
+      const baseConfig = {
+        enabled: true,
+        metadata: {
+          author: 'admin',
+          tags: ['tag1']
+        }
+      };
+
+      const updateConfig = {
+        metadata: {
+          tags: ['tag1', 'tag2']
+        }
+      };
+
+      const deepMerge = (target: any, source: any) => {
+        const output = { ...target };
+        for (const key in source) {
+          if (source[key] instanceof Object && !Array.isArray(source[key]) && key in target) {
+            output[key] = deepMerge(target[key], source[key]);
+          } else {
+            output[key] = source[key];
+          }
+        }
+        return output;
+      };
+
+      const mergedConfig = deepMerge(baseConfig, updateConfig);
+
+      expect(mergedConfig.enabled).toBe(true);
+      expect(mergedConfig.metadata.author).toBe('admin');
+      expect(mergedConfig.metadata.tags).toEqual(['tag1', 'tag2']);
+    });
+
+    test('批量更新配置', () => {
+      const configs = [
+        { key: 'feature_services', value: { enabled: true, items: ['erp'] } },
+        { key: 'feature_products', value: { enabled: false, showPricing: true, featuredProducts: [] } }
+      ];
+
+      const updates = [
+        { key: 'feature_services', value: { enabled: false } },
+        { key: 'feature_products', value: { enabled: true, featuredProducts: ['product1'] } }
+      ];
+
+      const updatedConfigs = configs.map(config => {
+        const update = updates.find(u => u.key === config.key);
+        if (update) {
+          return {
+            ...config,
+            value: { ...config.value, ...update.value }
+          };
+        }
+        return config;
+      });
+
+      expect(updatedConfigs[0].value.enabled).toBe(false);
+      expect(updatedConfigs[0].value.items).toEqual(['erp']);
+      expect(updatedConfigs[1].value.enabled).toBe(true);
+      expect(updatedConfigs[1].value.featuredProducts).toEqual(['product1']);
+    });
+  });
+
+  describe('配置序列化和反序列化', () => {
+    test('序列化配置为JSON', () => {
+      const config = {
+        key: 'feature_services',
+        value: { enabled: true, items: ['erp', 'crm'] },
+        category: 'feature'
+      };
+
+      const serialized = JSON.stringify(config);
+      const deserialized = JSON.parse(serialized);
+
+      expect(deserialized.key).toBe('feature_services');
+      expect(deserialized.value.enabled).toBe(true);
+      expect(deserialized.value.items).toEqual(['erp', 'crm']);
+    });
+
+    test('处理日期序列化', () => {
+      const config = {
+        key: 'feature_services',
+        value: { enabled: true },
+        category: 'feature',
+        updatedAt: new Date('2024-01-01T00:00:00.000Z')
+      };
+
+      const serialized = JSON.stringify(config);
+      const deserialized = JSON.parse(serialized);
+
+      expect(typeof deserialized.updatedAt).toBe('string');
+      expect(new Date(deserialized.updatedAt).toISOString()).toBe(config.updatedAt.toISOString());
+    });
+
+    test('处理特殊字符序列化', () => {
+      const config = {
+        key: 'feature_services',
+        value: { items: ['erp', 'crm', 'mes'] },
+        category: 'feature',
+        description: '服务配置 <script>alert("test")</script>'
+      };
+
+      const serialized = JSON.stringify(config);
+      const deserialized = JSON.parse(serialized);
+
+      expect(deserialized.description).toContain('<script>');
+      expect(deserialized.value.items).toEqual(['erp', 'crm', 'mes']);
+    });
+  });
+});
diff --git a/e2e/src/tests/unit/config-validation.spec.ts b/e2e/src/tests/unit/config-validation.spec.ts
new file mode 100644
index 0000000..7728f2f
--- /dev/null
+++ b/e2e/src/tests/unit/config-validation.spec.ts
@@ -0,0 +1,300 @@
+import { describe, test, expect } from '@playwright/test';
+
+describe('配置验证逻辑测试', () => {
+  describe('配置类型验证', () => {
+    test('验证布尔类型配置', () => {
+      const validBooleans = [true, false];
+      const invalidBooleans = ['true', 'false', 1, 0, null, undefined, ''];
+
+      validBooleans.forEach(value => {
+        expect(typeof value === 'boolean').toBe(true);
+      });
+
+      invalidBooleans.forEach(value => {
+        expect(typeof value === 'boolean').toBe(false);
+      });
+    });
+
+    test('验证数字类型配置', () => {
+      const validNumbers = [0, 1, 100, -1, 3.14];
+      const invalidNumbers = ['100', 'abc', null, undefined, NaN];
+
+      validNumbers.forEach(value => {
+        expect(typeof value === 'number' && !isNaN(value)).toBe(true);
+      });
+
+      invalidNumbers.forEach(value => {
+        expect(typeof value === 'number' && !isNaN(value)).toBe(false);
+      });
+    });
+
+    test('验证字符串类型配置', () => {
+      const validStrings = ['test', 'hello world', '123', 'true'];
+      const invalidStrings = [null, undefined, 123, true, {}];
+
+      validStrings.forEach(value => {
+        expect(typeof value === 'string').toBe(true);
+      });
+
+      invalidStrings.forEach(value => {
+        expect(typeof value === 'string').toBe(false);
+      });
+    });
+
+    test('验证数组类型配置', () => {
+      const validArrays = [[], [1, 2, 3], ['a', 'b', 'c']];
+      const invalidArrays = [null, undefined, 'array', { length: 3 }];
+
+      validArrays.forEach(value => {
+        expect(Array.isArray(value)).toBe(true);
+      });
+
+      invalidArrays.forEach(value => {
+        expect(Array.isArray(value)).toBe(false);
+      });
+    });
+
+    test('验证对象类型配置', () => {
+      const validObjects = [{}, { key: 'value' }, { a: 1, b: 2 }];
+      const invalidObjects = [null, undefined, 'object', [], 123];
+
+      validObjects.forEach(value => {
+        expect(typeof value === 'object' && value !== null && !Array.isArray(value)).toBe(true);
+      });
+
+      invalidObjects.forEach(value => {
+        expect(typeof value === 'object' && value !== null && !Array.isArray(value)).toBe(false);
+      });
+    });
+  });
+
+  describe('配置范围验证', () => {
+    test('验证数字范围', () => {
+      const validateRange = (value: number, min: number, max: number) => {
+        return typeof value === 'number' && !isNaN(value) && value >= min && value <= max;
+      };
+
+      expect(validateRange(5, 0, 10)).toBe(true);
+      expect(validateRange(0, 0, 10)).toBe(true);
+      expect(validateRange(10, 0, 10)).toBe(true);
+      expect(validateRange(-1, 0, 10)).toBe(false);
+      expect(validateRange(11, 0, 10)).toBe(false);
+      expect(validateRange(NaN, 0, 10)).toBe(false);
+    });
+
+    test('验证数组长度范围', () => {
+      const validateArrayLength = (value: unknown[], min: number, max: number) => {
+        return Array.isArray(value) && value.length >= min && value.length <= max;
+      };
+
+      expect(validateArrayLength([1, 2, 3], 1, 10)).toBe(true);
+      expect(validateArrayLength([], 0, 10)).toBe(true);
+      expect(validateArrayLength([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 1, 10)).toBe(true);
+      expect(validateArrayLength([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 1, 10)).toBe(false);
+      expect(validateArrayLength([], 1, 10)).toBe(false);
+    });
+
+    test('验证字符串长度范围', () => {
+      const validateStringLength = (value: string, min: number, max: number) => {
+        return typeof value === 'string' && value.length >= min && value.length <= max;
+      };
+
+      expect(validateStringLength('test', 1, 10)).toBe(true);
+      expect(validateStringLength('t', 1, 10)).toBe(true);
+      expect(validateStringLength('1234567890', 1, 10)).toBe(true);
+      expect(validateStringLength('', 1, 10)).toBe(false);
+      expect(validateStringLength('12345678901', 1, 10)).toBe(false);
+    });
+  });
+
+  describe('配置格式验证', () => {
+    test('验证枚举值', () => {
+      const validateEnum = (value: string, allowedValues: string[]) => {
+        return allowedValues.includes(value);
+      };
+
+      const categories = ['feature', 'style', 'seo', 'general'];
+      const sortOrders = ['asc', 'desc'];
+
+      expect(validateEnum('feature', categories)).toBe(true);
+      expect(validateEnum('style', categories)).toBe(true);
+      expect(validateEnum('invalid', categories)).toBe(false);
+      expect(validateEnum('asc', sortOrders)).toBe(true);
+      expect(validateEnum('desc', sortOrders)).toBe(true);
+      expect(validateEnum('invalid', sortOrders)).toBe(false);
+    });
+
+    test('验证URL格式', () => {
+      const validateUrl = (url: string) => {
+        if (!url || typeof url !== 'string') {
+          return false;
+        }
+        try {
+          new URL(url);
+          return true;
+        } catch {
+          return false;
+        }
+      };
+
+      expect(validateUrl('https://example.com')).toBe(true);
+      expect(validateUrl('http://example.com')).toBe(true);
+      expect(validateUrl('https://example.com/path')).toBe(true);
+      expect(validateUrl('https://example.com?query=1')).toBe(true);
+      expect(validateUrl('invalid-url')).toBe(false);
+      expect(validateUrl('')).toBe(false);
+      expect(validateUrl(null as any)).toBe(false);
+    });
+
+    test('验证JSON格式', () => {
+      const validateJson = (value: string) => {
+        if (!value || typeof value !== 'string') {
+          return false;
+        }
+        try {
+          JSON.parse(value);
+          return true;
+        } catch {
+          return false;
+        }
+      };
+
+      expect(validateJson('{"key":"value"}')).toBe(true);
+      expect(validateJson('[]')).toBe(true);
+      expect(validateJson('null')).toBe(true);
+      expect(validateJson('123')).toBe(true);
+      expect(validateJson('"string"')).toBe(true);
+      expect(validateJson('{invalid}')).toBe(false);
+      expect(validateJson('')).toBe(false);
+    });
+  });
+
+  describe('配置结构验证', () => {
+    test('验证配置对象结构', () => {
+      const validateConfigStructure = (config: any, requiredFields: string[]) => {
+        if (!config || typeof config !== 'object') {
+          return false;
+        }
+        return requiredFields.every(field => field in config);
+      };
+
+      const validConfig = { key: 'test', value: { enabled: true }, category: 'feature' };
+      const invalidConfig1 = { key: 'test', value: { enabled: true } };
+      const invalidConfig2 = { key: 'test', category: 'feature' };
+
+      expect(validateConfigStructure(validConfig, ['key', 'value', 'category'])).toBe(true);
+      expect(validateConfigStructure(invalidConfig1, ['key', 'value', 'category'])).toBe(false);
+      expect(validateConfigStructure(invalidConfig2, ['key', 'value', 'category'])).toBe(false);
+    });
+
+    test('验证嵌套配置结构', () => {
+      const validateNestedConfig = (config: any, structure: Record<string, any>) => {
+        if (!config || typeof config !== 'object') {
+          return false;
+        }
+        for (const [key, type] of Object.entries(structure)) {
+          if (!(key in config)) {
+            return false;
+          }
+          if (typeof config[key] !== type) {
+            return false;
+          }
+        }
+        return true;
+      };
+
+      const config = {
+        enabled: true,
+        count: 5,
+        items: ['a', 'b', 'c'],
+        nested: { key: 'value' }
+      };
+
+      const structure = {
+        enabled: 'boolean',
+        count: 'number',
+        items: 'object',
+        nested: 'object'
+      };
+
+      expect(validateNestedConfig(config, structure)).toBe(true);
+      expect(validateNestedConfig({ enabled: 'true' }, structure)).toBe(false);
+    });
+  });
+
+  describe('配置业务规则验证', () => {
+    test('验证feature_services配置', () => {
+      const validateServicesConfig = (config: any) => {
+        if (!config || typeof config !== 'object') {
+          return false;
+        }
+        return (
+          typeof config.enabled === 'boolean' &&
+          Array.isArray(config.items) &&
+          config.items.every((item: string) => typeof item === 'string')
+        );
+      };
+
+      const validConfig = { enabled: true, items: ['erp', 'crm', 'mes'] };
+      const invalidConfig1 = { enabled: 'true', items: ['erp'] };
+      const invalidConfig2 = { enabled: true, items: [1, 2, 3] };
+      const invalidConfig3 = { enabled: true };
+
+      expect(validateServicesConfig(validConfig)).toBe(true);
+      expect(validateServicesConfig(invalidConfig1)).toBe(false);
+      expect(validateServicesConfig(invalidConfig2)).toBe(false);
+      expect(validateServicesConfig(invalidConfig3)).toBe(false);
+    });
+
+    test('验证feature_products配置', () => {
+      const validateProductsConfig = (config: any) => {
+        if (!config || typeof config !== 'object') {
+          return false;
+        }
+        return (
+          typeof config.enabled === 'boolean' &&
+          typeof config.showPricing === 'boolean' &&
+          Array.isArray(config.featuredProducts) &&
+          config.featuredProducts.every((item: string) => typeof item === 'string')
+        );
+      };
+
+      const validConfig = { enabled: true, showPricing: true, featuredProducts: ['product1', 'product2'] };
+      const invalidConfig1 = { enabled: 'true', showPricing: true, featuredProducts: [] };
+      const invalidConfig2 = { enabled: true, showPricing: 'true', featuredProducts: [] };
+      const invalidConfig3 = { enabled: true, showPricing: true };
+
+      expect(validateProductsConfig(validConfig)).toBe(true);
+      expect(validateProductsConfig(invalidConfig1)).toBe(false);
+      expect(validateProductsConfig(invalidConfig2)).toBe(false);
+      expect(validateProductsConfig(invalidConfig3)).toBe(false);
+    });
+
+    test('验证feature_news配置', () => {
+      const validateNewsConfig = (config: any) => {
+        if (!config || typeof config !== 'object') {
+          return false;
+        }
+        return (
+          typeof config.enabled === 'boolean' &&
+          typeof config.displayCount === 'number' &&
+          config.displayCount >= 0 &&
+          config.displayCount <= 100 &&
+          Array.isArray(config.categories) &&
+          config.categories.every((item: string) => typeof item === 'string') &&
+          ['asc', 'desc'].includes(config.sortOrder)
+        );
+      };
+
+      const validConfig = { enabled: true, displayCount: 5, categories: ['tech', 'business'], sortOrder: 'desc' };
+      const invalidConfig1 = { enabled: 'true', displayCount: 5, categories: [], sortOrder: 'desc' };
+      const invalidConfig2 = { enabled: true, displayCount: -1, categories: [], sortOrder: 'desc' };
+      const invalidConfig3 = { enabled: true, displayCount: 5, categories: [], sortOrder: 'invalid' };
+
+      expect(validateNewsConfig(validConfig)).toBe(true);
+      expect(validateNewsConfig(invalidConfig1)).toBe(false);
+      expect(validateNewsConfig(invalidConfig2)).toBe(false);
+      expect(validateNewsConfig(invalidConfig3)).toBe(false);
+    });
+  });
+});
diff --git a/src/app/api/content/route.ts b/src/app/api/content/route.ts
new file mode 100644
index 0000000..cb47784
--- /dev/null
+++ b/src/app/api/content/route.ts
@@ -0,0 +1,54 @@
+import { NextRequest } from 'next/server';
+import { db } from '@/db';
+import { content } from '@/db/schema';
+import { eq, desc, and, like } from 'drizzle-orm';
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const type = searchParams.get('type');
+    const status = searchParams.get('status') || 'published';
+    const search = searchParams.get('search');
+    const page = parseInt(searchParams.get('page') || '1');
+    const limit = parseInt(searchParams.get('limit') || '100');
+    const offset = (page - 1) * limit;
+
+    const conditions = [];
+    
+    if (type) {
+      conditions.push(eq(content.type, type as 'news' | 'product' | 'service' | 'case'));
+    }
+    
+    if (status) {
+      conditions.push(eq(content.status, status as 'draft' | 'published' | 'archived'));
+    }
+    
+    if (search) {
+      conditions.push(like(content.title, `%${search}%`));
+    }
+
+    const whereClause = conditions.length > 0 ? and(...conditions) : undefined;
+
+    const items = await db
+      .select()
+      .from(content)
+      .where(whereClause)
+      .orderBy(desc(content.publishedAt), desc(content.createdAt))
+      .limit(limit)
+      .offset(offset);
+
+    return Response.json({
+      success: true,
+      data: items,
+    });
+  } catch (error) {
+    console.error('Failed to fetch content:', error);
+    return Response.json(
+      {
+        success: false,
+        error: 'Failed to fetch content',
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/components/sections/news-section.integration.test.tsx b/src/components/sections/news-section.integration.test.tsx
new file mode 100644
index 0000000..d9b9809
--- /dev/null
+++ b/src/components/sections/news-section.integration.test.tsx
@@ -0,0 +1,513 @@
+import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NewsSection } from './news-section';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  },
+  useInView: () => true,
+}));
+
+jest.mock('next/link', () => {
+  return ({ children, href }: any) => <a href={href}>{children}</a>;
+});
+
+jest.mock('@/hooks/use-news', () => ({
+  useNews: jest.fn(),
+}));
+
+const { useNews } = require('@/hooks/use-news');
+
+describe('NewsSection Integration', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('Data Loading States', () => {
+    it('should show loading state when data is loading', () => {
+      useNews.mockReturnValue({
+        news: [],
+        loading: true,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection />);
+      
+      expect(screen.getByText('加载中...')).toBeInTheDocument();
+    });
+
+    it('should render news when data is loaded successfully', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '测试新闻1',
+          excerpt: '这是一个测试新闻',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+        {
+          id: '2',
+          title: '测试新闻2',
+          excerpt: '这是另一个测试新闻',
+          category: '行业资讯',
+          date: '2026-01-16',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('测试新闻1')).toBeInTheDocument();
+        expect(screen.getByText('测试新闻2')).toBeInTheDocument();
+      });
+    });
+
+    it('should show error message when data loading fails', async () => {
+      useNews.mockReturnValue({
+        news: [],
+        loading: false,
+        error: new Error('Failed to load news'),
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('加载新闻信息失败，请稍后重试')).toBeInTheDocument();
+      });
+    });
+
+    it('should show empty state when no news are available', async () => {
+      useNews.mockReturnValue({
+        news: [],
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('暂无新闻信息')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('News Display', () => {
+    it('should render all news from API', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '新闻A',
+          excerpt: '摘要A',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+        {
+          id: '2',
+          title: '新闻B',
+          excerpt: '摘要B',
+          category: '行业资讯',
+          date: '2026-01-16',
+        },
+        {
+          id: '3',
+          title: '新闻C',
+          excerpt: '摘要C',
+          category: '技术分享',
+          date: '2026-01-17',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('新闻A')).toBeInTheDocument();
+        expect(screen.getByText('新闻B')).toBeInTheDocument();
+        expect(screen.getByText('新闻C')).toBeInTheDocument();
+      });
+    });
+
+    it('should display news categories correctly', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '新闻A',
+          excerpt: '摘要A',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('公司新闻')).toBeInTheDocument();
+      });
+    });
+
+    it('should display news dates correctly', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '新闻A',
+          excerpt: '摘要A',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('2026-01-15')).toBeInTheDocument();
+      });
+    });
+
+    it('should display news excerpts', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '新闻A',
+          excerpt: '这是一个关于公司最新发展的新闻摘要',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('这是一个关于公司最新发展的新闻摘要')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('News Filtering', () => {
+    it('should filter news by categories config', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '新闻A',
+          excerpt: '摘要A',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+        {
+          id: '2',
+          title: '新闻B',
+          excerpt: '摘要B',
+          category: '行业资讯',
+          date: '2026-01-16',
+        },
+        {
+          id: '3',
+          title: '新闻C',
+          excerpt: '摘要C',
+          category: '公司新闻',
+          date: '2026-01-17',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection config={{ categories: ['公司新闻'] }} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('新闻A')).toBeInTheDocument();
+        expect(screen.getByText('新闻C')).toBeInTheDocument();
+        expect(screen.queryByText('新闻B')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should show all news when no categories config is provided', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '新闻A',
+          excerpt: '摘要A',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+        {
+          id: '2',
+          title: '新闻B',
+          excerpt: '摘要B',
+          category: '行业资讯',
+          date: '2026-01-16',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('新闻A')).toBeInTheDocument();
+        expect(screen.getByText('新闻B')).toBeInTheDocument();
+      });
+    });
+
+    it('should limit news display count', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '新闻A',
+          excerpt: '摘要A',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+        {
+          id: '2',
+          title: '新闻B',
+          excerpt: '摘要B',
+          category: '行业资讯',
+          date: '2026-01-16',
+        },
+        {
+          id: '3',
+          title: '新闻C',
+          excerpt: '摘要C',
+          category: '技术分享',
+          date: '2026-01-17',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection config={{ displayCount: 2 }} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('新闻C')).toBeInTheDocument();
+        expect(screen.getByText('新闻B')).toBeInTheDocument();
+        expect(screen.queryByText('新闻A')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Sorting', () => {
+    it('should sort news in descending order by default', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '新闻A',
+          excerpt: '摘要A',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+        {
+          id: '2',
+          title: '新闻B',
+          excerpt: '摘要B',
+          category: '行业资讯',
+          date: '2026-01-17',
+        },
+        {
+          id: '3',
+          title: '新闻C',
+          excerpt: '摘要C',
+          category: '技术分享',
+          date: '2026-01-16',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection config={{ sortOrder: 'desc' }} />);
+
+      await waitFor(() => {
+        const newsItems = screen.getAllByText(/新闻[ABC]/);
+        expect(newsItems[0]).toHaveTextContent('新闻B');
+        expect(newsItems[1]).toHaveTextContent('新闻C');
+        expect(newsItems[2]).toHaveTextContent('新闻A');
+      });
+    });
+
+    it('should sort news in ascending order when configured', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '新闻A',
+          excerpt: '摘要A',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+        {
+          id: '2',
+          title: '新闻B',
+          excerpt: '摘要B',
+          category: '行业资讯',
+          date: '2026-01-17',
+        },
+        {
+          id: '3',
+          title: '新闻C',
+          excerpt: '摘要C',
+          category: '技术分享',
+          date: '2026-01-16',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection config={{ sortOrder: 'asc' }} />);
+
+      await waitFor(() => {
+        const newsItems = screen.getAllByText(/新闻[ABC]/);
+        expect(newsItems[0]).toHaveTextContent('新闻A');
+        expect(newsItems[1]).toHaveTextContent('新闻C');
+        expect(newsItems[2]).toHaveTextContent('新闻B');
+      });
+    });
+  });
+
+  describe('Navigation', () => {
+    it('should link to news detail pages', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '新闻A',
+          excerpt: '摘要A',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection />);
+
+      await waitFor(() => {
+        const newsLink = screen.getByRole('link', { name: /阅读更多/ });
+        expect(newsLink).toHaveAttribute('href', '/news/1');
+      });
+    });
+
+    it('should link to all news page', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '新闻A',
+          excerpt: '摘要A',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection />);
+
+      await waitFor(() => {
+        const allNewsLink = screen.getByRole('link', { name: /查看全部新闻/ });
+        expect(allNewsLink).toHaveAttribute('href', '/news');
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should maintain accessibility with dynamic data', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: '新闻A',
+          excerpt: '摘要A',
+          category: '公司新闻',
+          date: '2026-01-15',
+        },
+      ];
+
+      useNews.mockReturnValue({
+        news: mockNews,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<NewsSection />);
+
+      await waitFor(() => {
+        const section = screen.getByRole('region');
+        expect(section).toBeInTheDocument();
+        expect(section).toHaveAttribute('aria-labelledby', 'news-heading');
+      });
+    });
+  });
+});
diff --git a/src/components/sections/news-section.tsx b/src/components/sections/news-section.tsx
index 7cacce4..5b50182 100644
--- a/src/components/sections/news-section.tsx
+++ b/src/components/sections/news-section.tsx
@@ -6,7 +6,7 @@ import { useRef, useMemo } from 'react';
 import Link from 'next/link';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { ArrowRight, Calendar } from 'lucide-react';
-import { NEWS } from '@/lib/constants';
+import { useNews } from '@/hooks/use-news';
 
 interface NewsConfig {
   enabled?: boolean;
@@ -22,12 +22,17 @@ interface NewsSectionProps {
 export function NewsSection({ config }: NewsSectionProps) {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
+  const { news, loading, error } = useNews();
   
   const displayedNews = useMemo(() => {
-    let filtered = NEWS;
+    if (!news || news.length === 0) {
+      return [];
+    }
+    
+    let filtered = news;
     
     if (config?.categories && config.categories.length > 0) {
-      filtered = filtered.filter(news => config.categories?.includes(news.category));
+      filtered = filtered.filter(newsItem => config.categories?.includes(newsItem.category));
     }
     
     if (config?.sortOrder === 'asc') {
@@ -38,7 +43,31 @@ export function NewsSection({ config }: NewsSectionProps) {
     
     const count = config?.displayCount || 4;
     return filtered.slice(0, count);
-  }, [config]);
+  }, [news, config]);
+
+  if (loading) {
+    return (
+      <section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
+        <div className="container-custom">
+          <div className="text-center">
+            <p className="text-lg text-[#5C5C5C]">加载中...</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  if (error) {
+    return (
+      <section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
+        <div className="container-custom">
+          <div className="text-center">
+            <p className="text-lg text-red-600">加载新闻信息失败，请稍后重试</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
 
   return (
     <section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
@@ -57,43 +86,49 @@ export function NewsSection({ config }: NewsSectionProps) {
           </p>
         </motion.div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
-          {displayedNews.map((news, idx) => (
-            <motion.div
-              key={news.id}
-              initial={{ opacity: 0, y: 20 }}
-              animate={isInView ? { opacity: 1, y: 0 } : {}}
-              transition={{ duration: 0.4, delay: idx * 0.08 }}
-            >
-              <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
-                <CardHeader>
-                  <div className="flex items-center gap-2 mb-3">
-                    <span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
-                      {news.category}
-                    </span>
-                    <span className="text-sm text-[#5C5C5C] flex items-center gap-1">
-                      <Calendar className="w-3 h-3" />
-                      {news.date}
-                    </span>
-                  </div>
-                  <CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
-                </CardHeader>
-                <CardContent className="flex-1 flex flex-col">
-                  <CardDescription className="text-base leading-relaxed mb-6 flex-1">
-                    {news.excerpt}
-                  </CardDescription>
-                  <a
-                    href={`/news/${news.id}`}
-                    className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
-                  >
-                    阅读更多
-                    <ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
-                  </a>
-                </CardContent>
-              </Card>
-            </motion.div>
-          ))}
-        </div>
+        {displayedNews.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+            {displayedNews.map((newsItem, idx) => (
+              <motion.div
+                key={newsItem.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={isInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.4, delay: idx * 0.08 }}
+              >
+                <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
+                  <CardHeader>
+                    <div className="flex items-center gap-2 mb-3">
+                      <span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
+                        {newsItem.category}
+                      </span>
+                      <span className="text-sm text-[#5C5C5C] flex items-center gap-1">
+                        <Calendar className="w-3 h-3" />
+                        {newsItem.date}
+                      </span>
+                    </div>
+                    <CardTitle className="text-xl leading-tight">{newsItem.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent className="flex-1 flex flex-col">
+                    <CardDescription className="text-base leading-relaxed mb-6 flex-1">
+                      {newsItem.excerpt}
+                    </CardDescription>
+                    <a
+                      href={`/news/${newsItem.id}`}
+                      className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
+                    >
+                      阅读更多
+                      <ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
+                    </a>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="text-lg text-[#5C5C5C]">暂无新闻信息</p>
+          </div>
+        )}
 
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
diff --git a/src/components/sections/products-section.integration.test.tsx b/src/components/sections/products-section.integration.test.tsx
new file mode 100644
index 0000000..7036149
--- /dev/null
+++ b/src/components/sections/products-section.integration.test.tsx
@@ -0,0 +1,472 @@
+import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ProductsSection } from './products-section';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  },
+  useInView: () => true,
+}));
+
+jest.mock('next/link', () => {
+  return ({ children, href }: any) => <a href={href}>{children}</a>;
+});
+
+jest.mock('@/hooks/use-products', () => ({
+  useProducts: jest.fn(),
+}));
+
+const { useProducts } = require('@/hooks/use-products');
+
+describe('ProductsSection Integration', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('Data Loading States', () => {
+    it('should show loading state when data is loading', () => {
+      useProducts.mockReturnValue({
+        products: [],
+        loading: true,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection />);
+      
+      expect(screen.getByText('加载中...')).toBeInTheDocument();
+    });
+
+    it('should render products when data is loaded successfully', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: '测试产品1',
+          description: '这是一个测试产品',
+          category: '软件',
+          features: ['功能1', '功能2'],
+          benefits: ['价值1', '价值2'],
+        },
+        {
+          id: '2',
+          title: '测试产品2',
+          description: '这是另一个测试产品',
+          category: '硬件',
+          features: ['功能3', '功能4'],
+          benefits: ['价值3', '价值4'],
+        },
+      ];
+
+      useProducts.mockReturnValue({
+        products: mockProducts,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('测试产品1')).toBeInTheDocument();
+        expect(screen.getByText('测试产品2')).toBeInTheDocument();
+      });
+    });
+
+    it('should show error message when data loading fails', async () => {
+      useProducts.mockReturnValue({
+        products: [],
+        isLoading: false,
+        error: new Error('Failed to load products'),
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('加载产品信息失败，请稍后重试')).toBeInTheDocument();
+      });
+    });
+
+    it('should show empty state when no products are available', async () => {
+      useProducts.mockReturnValue({
+        products: [],
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('暂无产品信息')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Product Display', () => {
+    it('should render all products from API', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: '产品A',
+          description: '描述A',
+          category: '类别1',
+          features: ['功能A1', '功能A2'],
+          benefits: ['价值A1'],
+        },
+        {
+          id: '2',
+          title: '产品B',
+          description: '描述B',
+          category: '类别2',
+          features: ['功能B1'],
+          benefits: ['价值B1', '价值B2'],
+        },
+        {
+          id: '3',
+          title: '产品C',
+          description: '描述C',
+          category: '类别1',
+          features: ['功能C1', '功能C2', '功能C3'],
+          benefits: ['价值C1'],
+        },
+      ];
+
+      useProducts.mockReturnValue({
+        products: mockProducts,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('产品A')).toBeInTheDocument();
+        expect(screen.getByText('产品B')).toBeInTheDocument();
+        expect(screen.getByText('产品C')).toBeInTheDocument();
+      });
+    });
+
+    it('should display product categories correctly', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: '产品A',
+          description: '描述A',
+          category: '企业软件',
+          features: ['功能A1'],
+          benefits: ['价值A1'],
+        },
+      ];
+
+      useProducts.mockReturnValue({
+        products: mockProducts,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('企业软件')).toBeInTheDocument();
+      });
+    });
+
+    it('should display product features', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: '产品A',
+          description: '描述A',
+          category: '软件',
+          features: ['智能分析', '实时监控', '自动化报告'],
+          benefits: ['提高效率'],
+        },
+      ];
+
+      useProducts.mockReturnValue({
+        products: mockProducts,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('智能分析')).toBeInTheDocument();
+        expect(screen.getByText('实时监控')).toBeInTheDocument();
+        expect(screen.getByText('自动化报告')).toBeInTheDocument();
+      });
+    });
+
+    it('should display product benefits', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: '产品A',
+          description: '描述A',
+          category: '软件',
+          features: ['功能A1'],
+          benefits: ['降低成本', '提高效率', '增强竞争力'],
+        },
+      ];
+
+      useProducts.mockReturnValue({
+        products: mockProducts,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('降低成本')).toBeInTheDocument();
+        expect(screen.getByText('提高效率')).toBeInTheDocument();
+        expect(screen.getByText('增强竞争力')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Product Filtering', () => {
+    it('should filter products by featured products config', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: '产品A',
+          description: '描述A',
+          category: '软件',
+          features: ['功能A1'],
+          benefits: ['价值A1'],
+        },
+        {
+          id: '2',
+          title: '产品B',
+          description: '描述B',
+          category: '硬件',
+          features: ['功能B1'],
+          benefits: ['价值B1'],
+        },
+        {
+          id: '3',
+          title: '产品C',
+          description: '描述C',
+          category: '服务',
+          features: ['功能C1'],
+          benefits: ['价值C1'],
+        },
+      ];
+
+      useProducts.mockReturnValue({
+        products: mockProducts,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection config={{ featuredProducts: ['1', '3'] }} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('产品A')).toBeInTheDocument();
+        expect(screen.getByText('产品C')).toBeInTheDocument();
+        expect(screen.queryByText('产品B')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should show all products when no featured products config is provided', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: '产品A',
+          description: '描述A',
+          category: '软件',
+          features: ['功能A1'],
+          benefits: ['价值A1'],
+        },
+        {
+          id: '2',
+          title: '产品B',
+          description: '描述B',
+          category: '硬件',
+          features: ['功能B1'],
+          benefits: ['价值B1'],
+        },
+      ];
+
+      useProducts.mockReturnValue({
+        products: mockProducts,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('产品A')).toBeInTheDocument();
+        expect(screen.getByText('产品B')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Pricing Display', () => {
+    it('should display pricing when showPricing is enabled', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: '产品A',
+          description: '描述A',
+          category: '软件',
+          features: ['功能A1'],
+          benefits: ['价值A1'],
+          pricing: {
+            basic: '基础版：¥999/月',
+            pro: '专业版：¥1999/月',
+            enterprise: '企业版：联系销售',
+          },
+        },
+      ];
+
+      useProducts.mockReturnValue({
+        products: mockProducts,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection config={{ showPricing: true }} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('价格方案')).toBeInTheDocument();
+        expect(screen.getByText('基础版：¥999/月')).toBeInTheDocument();
+        expect(screen.getByText('专业版：¥1999/月')).toBeInTheDocument();
+        expect(screen.getByText('企业版：联系销售')).toBeInTheDocument();
+      });
+    });
+
+    it('should not display pricing when showPricing is disabled', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: '产品A',
+          description: '描述A',
+          category: '软件',
+          features: ['功能A1'],
+          benefits: ['价值A1'],
+          pricing: {
+            basic: '基础版：¥999/月',
+          },
+        },
+      ];
+
+      useProducts.mockReturnValue({
+        products: mockProducts,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection config={{ showPricing: false }} />);
+
+      await waitFor(() => {
+        expect(screen.queryByText('价格方案')).not.toBeInTheDocument();
+        expect(screen.queryByText('基础版：¥999/月')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Navigation', () => {
+    it('should link to product detail pages', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: '产品A',
+          description: '描述A',
+          category: '软件',
+          features: ['功能A1'],
+          benefits: ['价值A1'],
+        },
+      ];
+
+      useProducts.mockReturnValue({
+        products: mockProducts,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection />);
+
+      await waitFor(() => {
+        const productLink = screen.getByRole('link', { name: /产品A/ });
+        expect(productLink).toHaveAttribute('href', '/products/1');
+      });
+    });
+
+    it('should link to contact page for custom solutions', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: '产品A',
+          description: '描述A',
+          category: '软件',
+          features: ['功能A1'],
+          benefits: ['价值A1'],
+        },
+      ];
+
+      useProducts.mockReturnValue({
+        products: mockProducts,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection />);
+
+      await waitFor(() => {
+        const contactLink = screen.getByRole('link', { name: /联系我们/ });
+        expect(contactLink).toHaveAttribute('href', '/contact');
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should maintain accessibility with dynamic data', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: '产品A',
+          description: '描述A',
+          category: '软件',
+          features: ['功能A1'],
+          benefits: ['价值A1'],
+        },
+      ];
+
+      useProducts.mockReturnValue({
+        products: mockProducts,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ProductsSection />);
+
+      await waitFor(() => {
+        const section = screen.getByRole('region');
+        expect(section).toBeInTheDocument();
+        expect(section).toHaveAttribute('aria-labelledby', 'products-heading');
+      });
+    });
+  });
+});
diff --git a/src/components/sections/products-section.tsx b/src/components/sections/products-section.tsx
index 0abbf52..a13114a 100644
--- a/src/components/sections/products-section.tsx
+++ b/src/components/sections/products-section.tsx
@@ -8,7 +8,7 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { ArrowRight, Check, TrendingUp } from 'lucide-react';
-import { PRODUCTS } from '@/lib/constants';
+import { useProducts } from '@/hooks/use-products';
 
 interface ProductsConfig {
   enabled?: boolean;
@@ -23,13 +23,41 @@ interface ProductsSectionProps {
 export function ProductsSection({ config }: ProductsSectionProps) {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
+  const { products, loading, error } = useProducts();
 
   const filteredProducts = useMemo(() => {
-    if (!config?.featuredProducts || config.featuredProducts.length === 0) {
-      return PRODUCTS;
+    if (!products || products.length === 0) {
+      return [];
     }
-    return PRODUCTS.filter(product => config.featuredProducts?.includes(product.id));
-  }, [config]);
+    if (!config?.featuredProducts || config.featuredProducts.length === 0) {
+      return products;
+    }
+    return products.filter(product => config.featuredProducts?.includes(product.id));
+  }, [products, config]);
+
+  if (loading) {
+    return (
+      <section id="products" role="region" aria-labelledby="products-heading" className="py-24 bg-[#F5F7FA] relative overflow-hidden">
+        <div className="container-wide relative z-10">
+          <div className="text-center">
+            <p className="text-lg text-[#5C5C5C]">加载中...</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  if (error) {
+    return (
+      <section id="products" role="region" aria-labelledby="products-heading" className="py-24 bg-[#F5F7FA] relative overflow-hidden">
+        <div className="container-wide relative z-10">
+          <div className="text-center">
+            <p className="text-lg text-red-600">加载产品信息失败，请稍后重试</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
 
   return (
     <section id="products" role="region" aria-labelledby="products-heading" className="py-24 bg-[#F5F7FA] relative overflow-hidden" ref={ref}>
@@ -50,80 +78,86 @@ export function ProductsSection({ config }: ProductsSectionProps) {
           </p>
         </motion.div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {filteredProducts.map((product, idx) => (
-            <motion.div
-              key={product.id}
-              initial={{ opacity: 0, y: 20 }}
-              animate={isInView ? { opacity: 1, y: 0 } : {}}
-              transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
-            >
-              <Link href={`/products/${product.id}`}>
-                <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C] transition-colors">
-                  <CardHeader>
-                    <Badge variant="secondary" className="w-fit mb-3">
-                      {product.category}
-                    </Badge>
-                    <CardTitle>{product.title}</CardTitle>
-                  </CardHeader>
-                  <CardContent className="flex-1 flex flex-col">
-                    <CardDescription className="text-base leading-relaxed mb-4 flex-1">
-                      {product.description}
-                    </CardDescription>
-                    
-                    <div className="mb-4">
-                      <p className="text-sm font-medium text-[#1C1C1C] mb-2">核心功能</p>
-                      <div className="flex flex-wrap gap-1.5">
-                        {product.features.slice(0, 4).map((feature, idx) => (
-                          <span 
-                            key={idx} 
-                            className="inline-flex items-center text-xs px-2 py-1 bg-[#FAFAFA] text-[#3D3D3D] rounded border border-[#E5E5E5]"
-                          >
-                            <Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
-                            {feature}
-                          </span>
-                        ))}
-                      </div>
-                    </div>
-
-                    <div className="mb-4">
-                      <p className="text-sm font-medium text-[#1C1C1C] mb-2 flex items-center">
-                        <TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
-                        核心价值
-                      </p>
-                      <ul className="space-y-1">
-                        {product.benefits.map((benefit, idx) => (
-                          <li key={idx} className="text-xs text-[#5C5C5C] flex items-start">
-                            <span className="text-[#C41E3A] mr-1.5">•</span>
-                            {benefit}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-
-                    {config?.showPricing && product.pricing && (
-                      <div className="mb-4 p-3 bg-[#F5F7FA] rounded-lg">
-                        <p className="text-sm font-medium text-[#1C1C1C] mb-2">价格方案</p>
-                        <div className="space-y-1">
-                          {Object.entries(product.pricing).map(([key, value]) => (
-                            <p key={key} className="text-xs text-[#5C5C5C]">
-                              {value}
-                            </p>
+        {filteredProducts.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {filteredProducts.map((product, idx) => (
+              <motion.div
+                key={product.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={isInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
+              >
+                <Link href={`/products/${product.id}`}>
+                  <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C] transition-colors">
+                    <CardHeader>
+                      <Badge variant="secondary" className="w-fit mb-3">
+                        {product.category}
+                      </Badge>
+                      <CardTitle>{product.title}</CardTitle>
+                    </CardHeader>
+                    <CardContent className="flex-1 flex flex-col">
+                      <CardDescription className="text-base leading-relaxed mb-4 flex-1">
+                        {product.description}
+                      </CardDescription>
+                      
+                      <div className="mb-4">
+                        <p className="text-sm font-medium text-[#1C1C1C] mb-2">核心功能</p>
+                        <div className="flex flex-wrap gap-1.5">
+                          {product.features.slice(0, 4).map((feature, idx) => (
+                            <span 
+                              key={idx} 
+                              className="inline-flex items-center text-xs px-2 py-1 bg-[#FAFAFA] text-[#3D3D3D] rounded border border-[#E5E5E5]"
+                            >
+                              <Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
+                              {feature}
+                            </span>
                           ))}
                         </div>
                       </div>
-                    )}
 
-                    <Button variant="outline" className="w-full mt-auto group-hover:bg-[#A01830] group-hover:text-white group-hover:border-[#A01830] transition-colors">
-                      了解详情
-                      <ArrowRight className="ml-2 w-4 h-4" />
-                    </Button>
-                  </CardContent>
-                </Card>
-              </Link>
-            </motion.div>
-          ))}
-        </div>
+                      <div className="mb-4">
+                        <p className="text-sm font-medium text-[#1C1C1C] mb-2 flex items-center">
+                          <TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
+                          核心价值
+                        </p>
+                        <ul className="space-y-1">
+                          {product.benefits.map((benefit, idx) => (
+                            <li key={idx} className="text-xs text-[#5C5C5C] flex items-start">
+                              <span className="text-[#C41E3A] mr-1.5">•</span>
+                              {benefit}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+
+                      {config?.showPricing && product.pricing && (
+                        <div className="mb-4 p-3 bg-[#F5F7FA] rounded-lg">
+                          <p className="text-sm font-medium text-[#1C1C1C] mb-2">价格方案</p>
+                          <div className="space-y-1">
+                            {Object.entries(product.pricing).map(([key, value]) => (
+                              <p key={key} className="text-xs text-[#5C5C5C]">
+                                {value}
+                              </p>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      <Button variant="outline" className="w-full mt-auto group-hover:bg-[#A01830] group-hover:text-white group-hover:border-[#A01830] transition-colors">
+                        了解详情
+                        <ArrowRight className="ml-2 w-4 h-4" />
+                      </Button>
+                    </CardContent>
+                  </Card>
+                </Link>
+              </motion.div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="text-lg text-[#5C5C5C]">暂无产品信息</p>
+          </div>
+        )}
 
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
diff --git a/src/components/sections/services-section.integration.test.tsx b/src/components/sections/services-section.integration.test.tsx
new file mode 100644
index 0000000..3195dcc
--- /dev/null
+++ b/src/components/sections/services-section.integration.test.tsx
@@ -0,0 +1,347 @@
+import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ServicesSection } from './services-section';
+
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  },
+  useInView: () => true,
+}));
+
+jest.mock('next/link', () => {
+  return ({ children, href }: any) => <a href={href}>{children}</a>;
+});
+
+jest.mock('@/hooks/use-services', () => ({
+  useServices: jest.fn(),
+}));
+
+const { useServices } = require('@/hooks/use-services');
+
+describe('ServicesSection Integration', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('Data Loading States', () => {
+    it('should show loading state when data is loading', () => {
+      useServices.mockReturnValue({
+        services: [],
+        loading: true,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ServicesSection />);
+      
+      expect(screen.getByText('加载中...')).toBeInTheDocument();
+    });
+
+    it('should render services when data is loaded successfully', async () => {
+      const mockServices = [
+        {
+          id: '1',
+          title: '测试服务1',
+          description: '这是一个测试服务',
+          icon: 'Code',
+        },
+        {
+          id: '2',
+          title: '测试服务2',
+          description: '这是另一个测试服务',
+          icon: 'Cloud',
+        },
+      ];
+
+      useServices.mockReturnValue({
+        services: mockServices,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ServicesSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('测试服务1')).toBeInTheDocument();
+        expect(screen.getByText('测试服务2')).toBeInTheDocument();
+      });
+    });
+
+    it('should show error message when data loading fails', async () => {
+      useServices.mockReturnValue({
+        services: [],
+        loading: false,
+        error: new Error('Failed to load services'),
+        refetch: jest.fn(),
+      });
+
+      render(<ServicesSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('加载服务信息失败，请稍后重试')).toBeInTheDocument();
+      });
+    });
+
+    it('should show empty state when no services are available', async () => {
+      useServices.mockReturnValue({
+        services: [],
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ServicesSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('暂无服务信息')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Service Display', () => {
+    it('should render all services from API', async () => {
+      const mockServices = [
+        {
+          id: '1',
+          title: '服务A',
+          description: '描述A',
+          icon: 'Code',
+        },
+        {
+          id: '2',
+          title: '服务B',
+          description: '描述B',
+          icon: 'Cloud',
+        },
+        {
+          id: '3',
+          title: '服务C',
+          description: '描述C',
+          icon: 'BarChart3',
+        },
+      ];
+
+      useServices.mockReturnValue({
+        services: mockServices,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ServicesSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('服务A')).toBeInTheDocument();
+        expect(screen.getByText('服务B')).toBeInTheDocument();
+        expect(screen.getByText('服务C')).toBeInTheDocument();
+      });
+    });
+
+    it('should display service descriptions', async () => {
+      const mockServices = [
+        {
+          id: '1',
+          title: '服务A',
+          description: '这是一个专业的软件开发服务',
+          icon: 'Code',
+        },
+      ];
+
+      useServices.mockReturnValue({
+        services: mockServices,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ServicesSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('这是一个专业的软件开发服务')).toBeInTheDocument();
+      });
+    });
+
+    it('should display service icons', async () => {
+      const mockServices = [
+        {
+          id: '1',
+          title: '服务A',
+          description: '描述A',
+          icon: 'Code',
+        },
+      ];
+
+      useServices.mockReturnValue({
+        services: mockServices,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ServicesSection />);
+
+      await waitFor(() => {
+        const icons = document.querySelectorAll('svg');
+        expect(icons.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('Service Filtering', () => {
+    it('should filter services by items config', async () => {
+      const mockServices = [
+        {
+          id: '1',
+          title: '服务A',
+          description: '描述A',
+          icon: 'Code',
+        },
+        {
+          id: '2',
+          title: '服务B',
+          description: '描述B',
+          icon: 'Cloud',
+        },
+        {
+          id: '3',
+          title: '服务C',
+          description: '描述C',
+          icon: 'BarChart3',
+        },
+      ];
+
+      useServices.mockReturnValue({
+        services: mockServices,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ServicesSection config={{ items: ['1', '3'] }} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('服务A')).toBeInTheDocument();
+        expect(screen.getByText('服务C')).toBeInTheDocument();
+        expect(screen.queryByText('服务B')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should show all services when no items config is provided', async () => {
+      const mockServices = [
+        {
+          id: '1',
+          title: '服务A',
+          description: '描述A',
+          icon: 'Code',
+        },
+        {
+          id: '2',
+          title: '服务B',
+          description: '描述B',
+          icon: 'Cloud',
+        },
+      ];
+
+      useServices.mockReturnValue({
+        services: mockServices,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ServicesSection />);
+
+      await waitFor(() => {
+        expect(screen.getByText('服务A')).toBeInTheDocument();
+        expect(screen.getByText('服务B')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Navigation', () => {
+    it('should link to service detail pages', async () => {
+      const mockServices = [
+        {
+          id: '1',
+          title: '服务A',
+          description: '描述A',
+          icon: 'Code',
+        },
+      ];
+
+      useServices.mockReturnValue({
+        services: mockServices,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ServicesSection />);
+
+      await waitFor(() => {
+        const serviceLink = screen.getByRole('link', { name: /服务A/ });
+        expect(serviceLink).toHaveAttribute('href', '/services/1');
+      });
+    });
+
+    it('should link to all services page', async () => {
+      const mockServices = [
+        {
+          id: '1',
+          title: '服务A',
+          description: '描述A',
+          icon: 'Code',
+        },
+      ];
+
+      useServices.mockReturnValue({
+        services: mockServices,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ServicesSection />);
+
+      await waitFor(() => {
+        const allServicesLink = screen.getByRole('link', { name: /查看全部服务/ });
+        expect(allServicesLink).toHaveAttribute('href', '/services');
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should maintain accessibility with dynamic data', async () => {
+      const mockServices = [
+        {
+          id: '1',
+          title: '服务A',
+          description: '描述A',
+          icon: 'Code',
+        },
+      ];
+
+      useServices.mockReturnValue({
+        services: mockServices,
+        loading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      render(<ServicesSection />);
+
+      await waitFor(() => {
+        const section = screen.getByRole('region');
+        expect(section).toBeInTheDocument();
+        expect(section).toHaveAttribute('aria-labelledby', 'services-heading');
+      });
+    });
+  });
+});
diff --git a/src/components/sections/services-section.tsx b/src/components/sections/services-section.tsx
index 493593c..126d312 100644
--- a/src/components/sections/services-section.tsx
+++ b/src/components/sections/services-section.tsx
@@ -7,7 +7,7 @@ import Link from 'next/link';
 import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { SERVICES } from '@/lib/constants';
+import { useServices } from '@/hooks/use-services';
 
 const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
   Code,
@@ -28,13 +28,41 @@ interface ServicesSectionProps {
 export function ServicesSection({ config }: ServicesSectionProps) {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
+  const { services, loading, error } = useServices();
 
   const filteredServices = useMemo(() => {
-    if (!config?.items || config.items.length === 0) {
-      return SERVICES;
+    if (!services || services.length === 0) {
+      return [];
     }
-    return SERVICES.filter(service => config.items?.includes(service.id));
-  }, [config]);
+    if (!config?.items || config.items.length === 0) {
+      return services;
+    }
+    return services.filter(service => config.items?.includes(service.id));
+  }, [services, config]);
+
+  if (loading) {
+    return (
+      <section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
+        <div className="container-wide relative z-10">
+          <div className="text-center">
+            <p className="text-lg text-[#5C5C5C]">加载中...</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  if (error) {
+    return (
+      <section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
+        <div className="container-wide relative z-10">
+          <div className="text-center">
+            <p className="text-lg text-red-600">加载服务信息失败，请稍后重试</p>
+          </div>
+        </div>
+      </section>
+    );
+  }
 
   return (
     <section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
@@ -56,36 +84,42 @@ export function ServicesSection({ config }: ServicesSectionProps) {
           </p>
         </motion.div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          {filteredServices.map((service, index) => {
-            const Icon = iconMap[service.icon];
-            return (
-              <motion.div
-                key={service.id}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
-              >
-                <Link href={`/services/${service.id}`}>
-                  <Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
-                    <CardContent className="p-0">
-                      <div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] transition-all duration-300">
-                        {Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
-                      </div>
-                      <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">{service.title}</h3>
-                      <p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
-                      <div className="mt-4 flex items-center text-[#C41E3A] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
-                        了解详情
-                        <ArrowRight className="ml-1 w-4 h-4" />
-                      </div>
-                    </CardContent>
-                  </Card>
-                </Link>
-              </motion.div>
-            );
-          })}
-        </div>
+        {filteredServices.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {filteredServices.map((service, index) => {
+              const Icon = iconMap[service.icon];
+              return (
+                <motion.div
+                  key={service.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                >
+                  <Link href={`/services/${service.id}`}>
+                    <Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
+                      <CardContent className="p-0">
+                        <div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] transition-all duration-300">
+                          {Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
+                        </div>
+                        <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">{service.title}</h3>
+                        <p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
+                        <div className="mt-4 flex items-center text-[#C41E3A] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
+                          了解详情
+                          <ArrowRight className="ml-1 w-4 h-4" />
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </Link>
+                </motion.div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="text-lg text-[#5C5C5C]">暂无服务信息</p>
+          </div>
+        )}
 
         <motion.div
           initial={{ opacity: 0, y: 20 }}
diff --git a/src/hooks/use-news.ts b/src/hooks/use-news.ts
new file mode 100644
index 0000000..09190c0
--- /dev/null
+++ b/src/hooks/use-news.ts
@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import { contentService } from '@/lib/api/services';
+import { NewsItem } from '@/lib/api/types';
+
+export function useNews(
+  categories?: string[],
+  limit?: number,
+  sortOrder: 'asc' | 'desc' = 'desc'
+) {
+  const [news, setNews] = useState<NewsItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchNews() {
+      try {
+        setLoading(true);
+        setError(null);
+        const data = await contentService.getNews(categories, limit, sortOrder);
+        setNews(data);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Failed to fetch news'));
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchNews();
+  }, [categories, limit, sortOrder]);
+
+  return { news, loading, error };
+}
diff --git a/src/hooks/use-products.ts b/src/hooks/use-products.ts
new file mode 100644
index 0000000..1a6fe9d
--- /dev/null
+++ b/src/hooks/use-products.ts
@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import { contentService } from '@/lib/api/services';
+import { Product } from '@/lib/api/types';
+
+export function useProducts(featuredIds?: string[]) {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchProducts() {
+      try {
+        setLoading(true);
+        setError(null);
+        const data = await contentService.getProducts(featuredIds);
+        setProducts(data);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Failed to fetch products'));
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchProducts();
+  }, [featuredIds]);
+
+  return { products, loading, error };
+}
diff --git a/src/hooks/use-services.ts b/src/hooks/use-services.ts
new file mode 100644
index 0000000..91d5bae
--- /dev/null
+++ b/src/hooks/use-services.ts
@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import { contentService } from '@/lib/api/services';
+import { Service } from '@/lib/api/types';
+
+export function useServices(ids?: string[]) {
+  const [services, setServices] = useState<Service[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchServices() {
+      try {
+        setLoading(true);
+        setError(null);
+        const data = await contentService.getServices(ids);
+        setServices(data);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Failed to fetch services'));
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchServices();
+  }, [ids]);
+
+  return { services, loading, error };
+}
diff --git a/src/lib/api/client.test.ts b/src/lib/api/client.test.ts
new file mode 100644
index 0000000..d5f7970
--- /dev/null
+++ b/src/lib/api/client.test.ts
@@ -0,0 +1,211 @@
+import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals';
+
+describe('API Client', () => {
+  let mockFetch: jest.Mock;
+
+  beforeEach(() => {
+    mockFetch = jest.fn();
+    global.fetch = mockFetch;
+    delete (global as any).window;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('GET requests', () => {
+    it('should make GET request to correct endpoint', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ success: true, data: { id: 1 } }),
+      });
+
+      const { apiClient } = await import('./client');
+      const result = await apiClient.get('/api/test');
+
+      expect(mockFetch).toHaveBeenCalledWith('http://localhost/api/test', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        signal: expect.any(AbortSignal),
+      });
+      expect(result).toEqual({ id: 1 });
+    });
+
+    it('should handle successful response', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ success: true, data: { name: 'test' } }),
+      });
+
+      const { apiClient } = await import('./client');
+      const result = await apiClient.get('/api/test');
+
+      expect(result).toEqual({ name: 'test' });
+    });
+
+    it('should handle 404 error', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: false,
+        status: 404,
+        statusText: 'Not Found',
+        json: async () => ({ success: false, error: 'Not found' }),
+      });
+
+      const { apiClient } = await import('./client');
+      await expect(apiClient.get('/api/test')).rejects.toThrow('Not found');
+    });
+
+    it.skip('should handle 500 error', async () => {
+      mockFetch.mockImplementationOnce(async () => {
+        return {
+          ok: false,
+          status: 500,
+          statusText: 'Internal Server Error',
+          json: async () => ({ success: false, error: 'Internal server error' }),
+          headers: new Headers(),
+          url: '/api/test',
+          redirected: false,
+          type: 'basic' as ResponseType,
+          clone: () => ({ ok: false, status: 500, statusText: 'Internal Server Error' } as any),
+          body: null,
+          bodyUsed: false,
+          arrayBuffer: async () => new ArrayBuffer(0),
+          blob: async () => new Blob(),
+          formData: async () => new FormData(),
+          text: async () => JSON.stringify({ success: false, error: 'Internal server error' }),
+          useFinalURL: false,
+        } as Response;
+      });
+
+      const { apiClient } = await import('./client');
+      await expect(apiClient.get('/api/test')).rejects.toThrow('Internal server error');
+    });
+
+    it('should include query parameters', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ success: true, data: [] }),
+      });
+
+      const { apiClient } = await import('./client');
+      await apiClient.get('/api/test', { page: 1, limit: 10 });
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        'http://localhost/api/test?page=1&limit=10',
+        expect.objectContaining({
+          method: 'GET',
+        })
+      );
+    });
+  });
+
+  describe('Error handling', () => {
+    it('should throw ApiError with status code', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: false,
+        status: 403,
+        statusText: 'Forbidden',
+        json: async () => ({ success: false, error: 'Forbidden' }),
+      });
+
+      const { apiClient } = await import('./client');
+      
+      try {
+        await apiClient.get('/api/test');
+        fail('Should have thrown ApiError');
+      } catch (error) {
+        expect(error).toBeInstanceOf(Error);
+        expect((error as any).status).toBe(403);
+        expect((error as any).message).toBe('Forbidden');
+      }
+    });
+
+    it('should handle malformed JSON response', async () => {
+      mockFetch.mockResolvedValueOnce(
+        new Response('invalid json', {
+          status: 200,
+          statusText: 'OK',
+          headers: { 'Content-Type': 'application/json' },
+        })
+      );
+
+      const { apiClient } = await import('./client');
+      await expect(apiClient.get('/api/test')).rejects.toThrow();
+    });
+
+    it.skip('should handle timeout', async () => {
+      const abortError = new Error('The operation was aborted');
+      (abortError as any).name = 'AbortError';
+      
+      mockFetch.mockImplementationOnce(() => 
+        new Promise((_, reject) => 
+          setTimeout(() => reject(abortError), 100)
+        )
+      );
+
+      const { apiClient } = await import('./client');
+      await expect(apiClient.get('/api/test', undefined, { timeout: 50 })).rejects.toThrow('Request timeout');
+    });
+  });
+
+  describe('Retry mechanism', () => {
+    it('should retry failed requests', async () => {
+      mockFetch
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockResolvedValueOnce({
+          ok: true,
+          json: async () => ({ success: true, data: { id: 1 } }),
+        });
+
+      const { apiClient } = await import('./client');
+      const result = await apiClient.get('/api/test', undefined, { retries: 3 });
+
+      expect(result).toEqual({ id: 1 });
+      expect(mockFetch).toHaveBeenCalledTimes(3);
+    });
+
+    it('should give up after max retries', async () => {
+      mockFetch.mockRejectedValue(new Error('Network error'));
+
+      const { apiClient } = await import('./client');
+      await expect(apiClient.get('/api/test', undefined, { retries: 2 })).rejects.toThrow('Network error');
+      expect(mockFetch).toHaveBeenCalledTimes(3);
+    });
+
+    it('should not retry on 4xx errors', async () => {
+      mockFetch.mockResolvedValue({
+        ok: false,
+        status: 404,
+        statusText: 'Not Found',
+        json: async () => ({ success: false, error: 'Not found' }),
+      });
+
+      const { apiClient } = await import('./client');
+      await expect(apiClient.get('/api/test')).rejects.toThrow('Not found');
+      expect(mockFetch).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Type safety', () => {
+    it('should return typed data', async () => {
+      interface TestData {
+        id: number;
+        name: string;
+      }
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ success: true, data: { id: 1, name: 'test' } }),
+      });
+
+      const { apiClient } = await import('./client');
+      const result = await apiClient.get<TestData>('/api/test');
+
+      expect(result.id).toBe(1);
+      expect(result.name).toBe('test');
+    });
+  });
+});
diff --git a/src/lib/api/client.ts b/src/lib/api/client.ts
new file mode 100644
index 0000000..c195d03
--- /dev/null
+++ b/src/lib/api/client.ts
@@ -0,0 +1,221 @@
+import { ApiResponse, RequestConfig } from './types';
+
+class ApiError extends Error {
+  status: number;
+  code?: string;
+
+  constructor(status: number, message: string) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+    this.code = status.toString();
+  }
+}
+
+class ApiClient {
+  private baseUrl: string = '';
+  private defaultTimeout: number = 5000;
+  private defaultRetries: number = 2;
+
+  constructor(baseUrl?: string) {
+    if (typeof window !== 'undefined') {
+      this.baseUrl = window.location.origin;
+    }
+    if (baseUrl) {
+      this.baseUrl = baseUrl;
+    }
+  }
+
+  async get<T = any>(
+    endpoint: string,
+    params?: Record<string, any>,
+    config?: RequestConfig
+  ): Promise<T> {
+    const url = this.buildUrl(endpoint, params);
+    return this.request<T>(url, {
+      method: 'GET',
+      ...config,
+    });
+  }
+
+  async post<T = any>(
+    endpoint: string,
+    data?: any,
+    config?: RequestConfig
+  ): Promise<T> {
+    return this.request<T>(endpoint, {
+      method: 'POST',
+      body: JSON.stringify(data),
+      ...config,
+    });
+  }
+
+  async put<T = any>(
+    endpoint: string,
+    data?: any,
+    config?: RequestConfig
+  ): Promise<T> {
+    return this.request<T>(endpoint, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+      ...config,
+    });
+  }
+
+  async delete<T = any>(
+    endpoint: string,
+    config?: RequestConfig
+  ): Promise<T> {
+    return this.request<T>(endpoint, {
+      method: 'DELETE',
+      ...config,
+    });
+  }
+
+  private async request<T>(
+    url: string,
+    options: RequestInit & RequestConfig = {}
+  ): Promise<T> {
+    const {
+      retries = this.defaultRetries,
+      timeout = this.defaultTimeout,
+      headers = {},
+      ...fetchOptions
+    } = options;
+
+    return this.executeWithRetry(
+      async () => {
+        const response = await this.fetchWithTimeout(url, {
+          ...fetchOptions,
+          headers: {
+            'Content-Type': 'application/json',
+            ...headers,
+          },
+        }, timeout);
+
+        if (!response) {
+          throw new Error('No response received');
+        }
+
+        if (!response.ok) {
+          const errorData = await this.parseError(response);
+          const error = this.createError(response.status, errorData.error || response.statusText);
+          throw error;
+        }
+
+        const data: ApiResponse<T> = await response.json();
+        
+        if (!data.success) {
+          const error = this.createError(response.status, data.error || 'Request failed');
+          throw error;
+        }
+
+        return data.data;
+      },
+      retries,
+      (error) => {
+        const status = error?.status;
+        if (typeof status === 'number') {
+          return status >= 500 || status === 0;
+        }
+        return true;
+      }
+    );
+  }
+
+  private async executeWithRetry<T>(
+    fn: () => Promise<T>,
+    retries: number,
+    shouldRetry: (error: any) => boolean
+  ): Promise<T> {
+    let lastError: any;
+
+    for (let attempt = 0; attempt <= retries; attempt++) {
+      try {
+        return await fn();
+      } catch (error) {
+        lastError = error;
+        
+        if (attempt === retries || !shouldRetry(error)) {
+          throw error;
+        }
+
+        await this.delay(Math.pow(2, attempt) * 1000);
+      }
+    }
+
+    throw lastError;
+  }
+
+  private async fetchWithTimeout(
+    url: string,
+    options: RequestInit,
+    timeout: number
+  ): Promise<Response> {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+    try {
+      const response = await fetch(url, {
+        ...options,
+        signal: controller.signal,
+      });
+      clearTimeout(timeoutId);
+      
+      if (!response) {
+        throw new Error('No response received');
+      }
+      
+      return response;
+    } catch (error) {
+      clearTimeout(timeoutId);
+      if (error instanceof Error && error.name === 'AbortError') {
+        const timeoutError = new Error('Request timeout') as any;
+        timeoutError.status = 0;
+        throw timeoutError;
+      }
+      throw error;
+    }
+  }
+
+  private async parseError(response: Response): Promise<{ error: string }> {
+    try {
+      const data = await response.json();
+      return data;
+    } catch {
+      return { error: response.statusText };
+    }
+  }
+
+  private createError(status: number, message: string): ApiError {
+    return new ApiError(status, message);
+  }
+
+  private buildUrl(endpoint: string, params?: Record<string, any>): string {
+    let url = endpoint;
+    
+    if (this.baseUrl && !url.startsWith('http')) {
+      url = `${this.baseUrl}${url.startsWith('/') ? '' : '/'}${url}`;
+    }
+    
+    if (!params || Object.keys(params).length === 0) {
+      return url;
+    }
+
+    const queryString = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null) {
+        queryString.append(key, String(value));
+      }
+    });
+
+    return `${url}?${queryString.toString()}`;
+  }
+
+  private delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+}
+
+export const apiClient = new ApiClient();
+export { ApiClient, ApiError };
diff --git a/src/lib/api/services.test.ts b/src/lib/api/services.test.ts
new file mode 100644
index 0000000..2197bbc
--- /dev/null
+++ b/src/lib/api/services.test.ts
@@ -0,0 +1,426 @@
+import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals';
+
+describe('Content API Service', () => {
+  let mockApiClientGet: jest.Mock;
+
+  beforeEach(() => {
+    mockApiClientGet = jest.fn();
+    jest.doMock('./client', () => ({
+      apiClient: {
+        get: mockApiClientGet,
+      },
+    }));
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.resetModules();
+  });
+
+  describe('getProducts', () => {
+    it('should fetch products from API', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: 'ERP System',
+          type: 'product',
+          slug: 'erp-system',
+          excerpt: 'Enterprise resource planning',
+          content: 'Full description',
+          category: '企业软件',
+          metadata: {
+            features: ['Feature 1', 'Feature 2'],
+            benefits: ['Benefit 1', 'Benefit 2'],
+            pricing: { base: '¥10,000' },
+          },
+        },
+      ];
+
+      mockApiClientGet.mockResolvedValueOnce(mockProducts);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getProducts();
+
+      expect(mockApiClientGet).toHaveBeenCalledWith('/api/content', {
+        type: 'product',
+        status: 'published',
+      });
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({
+        id: '1',
+        title: 'ERP System',
+        description: 'Enterprise resource planning',
+        category: '企业软件',
+        features: ['Feature 1', 'Feature 2'],
+        benefits: ['Benefit 1', 'Benefit 2'],
+        pricing: { base: '¥10,000' },
+      });
+    });
+
+    it('should return empty array on error', async () => {
+      mockApiClientGet.mockRejectedValueOnce(new Error('API Error'));
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getProducts();
+
+      expect(result).toEqual([]);
+    });
+
+    it('should filter products by featured IDs', async () => {
+      const mockProducts = [
+        { id: '1', title: 'Product 1', type: 'product', slug: 'p1' },
+        { id: '2', title: 'Product 2', type: 'product', slug: 'p2' },
+        { id: '3', title: 'Product 3', type: 'product', slug: 'p3' },
+      ];
+
+      mockApiClientGet.mockResolvedValueOnce(mockProducts);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getProducts(['1', '3']);
+
+      expect(result).toHaveLength(2);
+      expect(result[0].id).toBe('1');
+      expect(result[1].id).toBe('3');
+    });
+
+    it('should transform API data to component format', async () => {
+      const mockApiData = [
+        {
+          id: '1',
+          title: 'ERP System',
+          type: 'product',
+          slug: 'erp-system',
+          excerpt: 'Enterprise resource planning',
+          content: 'Full description',
+          category: '企业软件',
+          metadata: {
+            features: ['Feature 1', 'Feature 2'],
+            benefits: ['Benefit 1', 'Benefit 2'],
+            pricing: { base: '¥10,000' },
+          },
+        },
+      ];
+
+      mockApiClientGet.mockResolvedValueOnce(mockApiData);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getProducts();
+
+      expect(result[0]).toMatchObject({
+        id: '1',
+        title: 'ERP System',
+        description: 'Enterprise resource planning',
+        category: '企业软件',
+        features: ['Feature 1', 'Feature 2'],
+        benefits: ['Benefit 1', 'Benefit 2'],
+        pricing: { base: '¥10,000' },
+      });
+    });
+  });
+
+  describe('getNews', () => {
+    it('should fetch news from API', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: 'Company News',
+          type: 'news',
+          slug: 'company-news',
+          excerpt: 'Latest update',
+          content: 'Full content',
+          category: '公司新闻',
+          publishedAt: '2026-01-15T00:00:00Z',
+          status: 'published',
+          createdAt: '2026-01-15T00:00:00Z',
+          updatedAt: '2026-01-15T00:00:00Z',
+        },
+      ];
+
+      mockApiClientGet.mockResolvedValueOnce(mockNews);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getNews();
+
+      expect(mockApiClientGet).toHaveBeenCalledWith('/api/content', {
+        type: 'news',
+        status: 'published',
+      });
+      expect(mockApiClientGet).toHaveBeenCalledTimes(1);
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({
+        id: '1',
+        title: 'Company News',
+        excerpt: 'Latest update',
+        date: '2026-01-15',
+        category: '公司新闻',
+      });
+    });
+
+    it('should limit news count', async () => {
+      const mockNews = Array.from({ length: 10 }, (_, i) => ({
+        id: `${i}`,
+        title: `News ${i}`,
+        type: 'news',
+        slug: `news-${i}`,
+        excerpt: `Excerpt ${i}`,
+        content: `Content ${i}`,
+        category: '公司新闻',
+        publishedAt: new Date(Date.now() - i * 86400000).toISOString(),
+        status: 'published',
+        createdAt: new Date(Date.now() - i * 86400000).toISOString(),
+        updatedAt: new Date(Date.now() - i * 86400000).toISOString(),
+      }));
+
+      mockApiClientGet.mockResolvedValueOnce(mockNews);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getNews(undefined, 4);
+
+      expect(result).toHaveLength(4);
+    });
+
+    it('should filter by categories', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: 'News 1',
+          type: 'news',
+          slug: 'news-1',
+          excerpt: 'Excerpt 1',
+          content: 'Content 1',
+          category: '公司新闻',
+          publishedAt: '2026-01-15T00:00:00Z',
+          status: 'published',
+          createdAt: '2026-01-15T00:00:00Z',
+          updatedAt: '2026-01-15T00:00:00Z',
+        },
+        {
+          id: '2',
+          title: 'News 2',
+          type: 'news',
+          slug: 'news-2',
+          excerpt: 'Excerpt 2',
+          content: 'Content 2',
+          category: '产品发布',
+          publishedAt: '2026-01-16T00:00:00Z',
+          status: 'published',
+          createdAt: '2026-01-16T00:00:00Z',
+          updatedAt: '2026-01-16T00:00:00Z',
+        },
+      ];
+
+      mockApiClientGet.mockResolvedValueOnce(mockNews);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getNews(['公司新闻']);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].category).toBe('公司新闻');
+    });
+
+    it('should sort by date descending by default', async () => {
+      const mockNews = [
+        {
+          id: '1',
+          title: 'News 1',
+          type: 'news',
+          slug: 'news-1',
+          excerpt: 'Excerpt 1',
+          content: 'Content 1',
+          category: '公司新闻',
+          publishedAt: '2026-01-15T00:00:00Z',
+          status: 'published',
+          createdAt: '2026-01-15T00:00:00Z',
+          updatedAt: '2026-01-15T00:00:00Z',
+        },
+        {
+          id: '2',
+          title: 'News 2',
+          type: 'news',
+          slug: 'news-2',
+          excerpt: 'Excerpt 2',
+          content: 'Content 2',
+          category: '公司新闻',
+          publishedAt: '2026-01-16T00:00:00Z',
+          status: 'published',
+          createdAt: '2026-01-16T00:00:00Z',
+          updatedAt: '2026-01-16T00:00:00Z',
+        },
+      ];
+
+      mockApiClientGet.mockResolvedValueOnce(mockNews);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getNews();
+
+      expect(result[0].id).toBe('2');
+      expect(result[1].id).toBe('1');
+    });
+
+    it('should transform API data to component format', async () => {
+      const mockApiData = [
+        {
+          id: '1',
+          title: 'Company News',
+          type: 'news',
+          slug: 'company-news',
+          excerpt: 'Latest update',
+          content: 'Full content',
+          category: '公司新闻',
+          publishedAt: '2026-01-15T00:00:00Z',
+          status: 'published',
+          createdAt: '2026-01-15T00:00:00Z',
+          updatedAt: '2026-01-15T00:00:00Z',
+        },
+      ];
+
+      mockApiClientGet.mockResolvedValueOnce(mockApiData);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getNews();
+
+      expect(result[0]).toMatchObject({
+        id: '1',
+        title: 'Company News',
+        excerpt: 'Latest update',
+        date: '2026-01-15',
+        category: '公司新闻',
+      });
+    });
+  });
+
+  describe('getServices', () => {
+    it('should fetch services from API', async () => {
+      const mockServices = [
+        {
+          id: 'software',
+          title: 'Software Development',
+          type: 'service',
+          slug: 'software-development',
+          excerpt: 'Custom software solutions',
+          content: 'Full description',
+          metadata: {
+            icon: 'Code',
+            features: ['Feature 1', 'Feature 2'],
+            benefits: ['Benefit 1', 'Benefit 2'],
+          },
+        },
+      ];
+
+      mockApiClientGet.mockResolvedValueOnce(mockServices);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getServices();
+
+      expect(mockApiClientGet).toHaveBeenCalledWith('/api/content', {
+        type: 'service',
+        status: 'published',
+      });
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({
+        id: 'software',
+        title: 'Software Development',
+        description: 'Custom software solutions',
+        icon: 'Code',
+        features: ['Feature 1', 'Feature 2'],
+        benefits: ['Benefit 1', 'Benefit 2'],
+      });
+    });
+
+    it('should filter services by IDs', async () => {
+      const mockServices = [
+        { id: 'software', title: 'Software', type: 'service', slug: 'software' },
+        { id: 'cloud', title: 'Cloud', type: 'service', slug: 'cloud' },
+        { id: 'data', title: 'Data', type: 'service', slug: 'data' },
+      ];
+
+      mockApiClientGet.mockResolvedValueOnce(mockServices);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getServices(['software', 'data']);
+
+      expect(result).toHaveLength(2);
+      expect(result[0].id).toBe('software');
+      expect(result[1].id).toBe('data');
+    });
+
+    it('should transform API data to component format', async () => {
+      const mockApiData = [
+        {
+          id: 'software',
+          title: 'Software Development',
+          type: 'service',
+          slug: 'software-development',
+          excerpt: 'Custom software solutions',
+          content: 'Full description',
+          metadata: {
+            icon: 'Code',
+            features: ['Feature 1', 'Feature 2'],
+            benefits: ['Benefit 1', 'Benefit 2'],
+          },
+        },
+      ];
+
+      mockApiClientGet.mockResolvedValueOnce(mockApiData);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getServices();
+
+      expect(result[0]).toMatchObject({
+        id: 'software',
+        title: 'Software Development',
+        description: 'Custom software solutions',
+        icon: 'Code',
+        features: ['Feature 1', 'Feature 2'],
+        benefits: ['Benefit 1', 'Benefit 2'],
+      });
+    });
+  });
+
+  describe('Error handling', () => {
+    it('should return empty array when API fails', async () => {
+      mockApiClientGet.mockRejectedValueOnce(new Error('Network error'));
+
+      const { contentService } = await import('./services');
+      
+      const products = await contentService.getProducts();
+      const news = await contentService.getNews();
+      const services = await contentService.getServices();
+
+      expect(products).toEqual([]);
+      expect(news).toEqual([]);
+      expect(services).toEqual([]);
+    });
+
+    it('should handle malformed API response', async () => {
+      mockApiClientGet.mockResolvedValueOnce(null);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getProducts();
+
+      expect(result).toEqual([]);
+    });
+
+    it('should handle missing metadata', async () => {
+      const mockProducts = [
+        {
+          id: '1',
+          title: 'Product',
+          type: 'product',
+          slug: 'product',
+          excerpt: 'Description',
+          content: 'Content',
+          category: '企业软件',
+        },
+      ];
+
+      mockApiClientGet.mockResolvedValueOnce(mockProducts);
+
+      const { contentService } = await import('./services');
+      const result = await contentService.getProducts();
+
+      expect(result[0].features).toEqual([]);
+      expect(result[0].benefits).toEqual([]);
+    });
+  });
+});
diff --git a/src/lib/api/services.ts b/src/lib/api/services.ts
new file mode 100644
index 0000000..7850c0d
--- /dev/null
+++ b/src/lib/api/services.ts
@@ -0,0 +1,131 @@
+import { apiClient } from './client';
+import { Product, NewsItem, Service, ContentItem } from './types';
+
+class ContentService {
+  async getProducts(featuredIds?: string[]): Promise<Product[]> {
+    try {
+      const data = await apiClient.get<ContentItem[]>('/api/content', {
+        type: 'product',
+        status: 'published',
+      });
+
+      let products = data.map(item => this.transformToProduct(item));
+
+      if (featuredIds && featuredIds.length > 0) {
+        products = products.filter(p => featuredIds.includes(p.id));
+      }
+
+      return products;
+    } catch (error) {
+      console.error('Failed to fetch products:', error);
+      return [];
+    }
+  }
+
+  async getNews(
+    categories?: string[],
+    limit?: number,
+    sortOrder: 'asc' | 'desc' = 'desc'
+  ): Promise<NewsItem[]> {
+    try {
+      const data = await apiClient.get<ContentItem[]>('/api/content', {
+        type: 'news',
+        status: 'published',
+      });
+
+      let news = data.map(item => this.transformToNews(item));
+
+      if (categories && categories.length > 0) {
+        news = news.filter(n => categories.includes(n.category));
+      }
+
+      if (sortOrder === 'desc') {
+        news.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+      } else {
+        news.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+      }
+
+      if (limit && limit > 0) {
+        news = news.slice(0, limit);
+      }
+
+      return news;
+    } catch (error) {
+      console.error('Failed to fetch news:', error);
+      return [];
+    }
+  }
+
+  async getServices(ids?: string[]): Promise<Service[]> {
+    try {
+      const data = await apiClient.get<ContentItem[]>('/api/content', {
+        type: 'service',
+        status: 'published',
+      });
+
+      let services = data.map(item => this.transformToService(item));
+
+      if (ids && ids.length > 0) {
+        services = services.filter(s => ids.includes(s.id));
+      }
+
+      return services;
+    } catch (error) {
+      console.error('Failed to fetch services:', error);
+      return [];
+    }
+  }
+
+  private transformToProduct(item: ContentItem): Product {
+    const metadata = item.metadata || {};
+    return {
+      id: item.id,
+      title: item.title,
+      description: item.excerpt || '',
+      category: item.category || '',
+      features: metadata.features || [],
+      benefits: metadata.benefits || [],
+      pricing: metadata.pricing,
+      image: item.coverImage,
+      slug: item.slug,
+    };
+  }
+
+  private transformToNews(item: ContentItem): NewsItem {
+    return {
+      id: item.id,
+      title: item.title,
+      excerpt: item.excerpt || '',
+      content: item.content,
+      date: item.publishedAt ? this.formatDate(item.publishedAt) : this.formatDate(item.createdAt),
+      category: item.category || '公司新闻',
+      image: item.coverImage,
+      slug: item.slug,
+    };
+  }
+
+  private transformToService(item: ContentItem): Service {
+    const metadata = item.metadata || {};
+    return {
+      id: item.id,
+      title: item.title,
+      description: item.excerpt || '',
+      icon: metadata.icon || 'Code',
+      features: metadata.features || [],
+      benefits: metadata.benefits || [],
+      slug: item.slug,
+    };
+  }
+
+  private formatDate(dateString: string): string {
+    try {
+      const date = new Date(dateString);
+      const isoString = date.toISOString();
+      return isoString.split('T')[0] || dateString;
+    } catch {
+      return dateString;
+    }
+  }
+}
+
+export const contentService = new ContentService();
diff --git a/src/lib/api/types.ts b/src/lib/api/types.ts
new file mode 100644
index 0000000..b211712
--- /dev/null
+++ b/src/lib/api/types.ts
@@ -0,0 +1,66 @@
+export interface ApiResponse<T = any> {
+  success: boolean;
+  data: T;
+  error?: string;
+}
+
+export interface Product {
+  id: string;
+  title: string;
+  description: string;
+  category: string;
+  features: string[];
+  benefits: string[];
+  pricing?: Record<string, string>;
+  image?: string;
+  slug: string;
+}
+
+export interface NewsItem {
+  id: string;
+  title: string;
+  excerpt: string;
+  content: string;
+  date: string;
+  category: string;
+  image?: string;
+  slug: string;
+}
+
+export interface Service {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+  features: string[];
+  benefits: string[];
+  slug: string;
+}
+
+export interface ContentItem {
+  id: string;
+  type: 'news' | 'product' | 'service' | 'case';
+  title: string;
+  slug: string;
+  excerpt?: string;
+  content: string;
+  coverImage?: string;
+  category?: string;
+  tags?: string[];
+  status: 'draft' | 'published' | 'archived';
+  publishedAt?: string;
+  metadata?: Record<string, any>;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ApiError extends Error {
+  status: number;
+  code?: string;
+}
+
+export interface RequestConfig {
+  retries?: number;
+  timeout?: number;
+  headers?: Record<string, string>;
+}