# 项目页面API对接与代码片段预览功能实施计划

## 一、页面API对接状态分析

### 已对接页面
1. **首页（Home.vue）**：已对接fetchWorks和fetchPosts API
2. **作品列表（Works.vue）**：已对接fetchWorks API
3. **作品详情（WorkDetail.vue）**：已对接fetchWork API

### 未对接页面
1. **博客列表（Blog.vue）**：使用静态数据
2. **服务（Services.vue）**：使用静态数据，包括客户评论、合作伙伴等
3. **代码片段（Snippets.vue）**：使用静态数据
4. **关于（About.vue）**：使用静态数据

## 二、API对接实施计划

### 1. 博客列表页（Blog.vue）
- **API端点**：`GET /api/posts`
- **请求方法**：GET
- **参数**：无
- **预期响应格式**：
  ```json
  [
    {
      "id": "string",
      "title": "string",
      "category": "string",
      "date": "string",
      "excerpt": "string",
      "content": "string"
    }
  ]
  ```
- **实施内容**：
  - 引入fetchPosts API
  - 替换静态数据为API调用
  - 添加加载状态和错误处理

### 2. 博客详情页（待创建）
- **API端点**：`GET /api/posts/:id`
- **请求方法**：GET
- **参数**：id（路径参数）
- **预期响应格式**：
  ```json
  {
    "id": "string",
    "title": "string",
    "category": "string",
    "date": "string",
    "content": "string"
  }
  ```
- **实施内容**：
  - 创建BlogDetail.vue页面
  - 实现API调用和数据展示
  - 添加加载状态和错误处理

### 3. 服务页（Services.vue）
- **API端点**：
  - `GET /api/testimonials`（客户评论）
  - `GET /api/partners`（合作伙伴）
- **请求方法**：GET
- **参数**：无
- **预期响应格式**：
  ```json
  // 客户评论
  [
    {
      "id": "string",
      "content": "string",
      "author": "string",
      "avatar": "string"
    }
  ]
  
  // 合作伙伴
  [
    {
      "id": "string",
      "name": "string",
      "logo": "string"
    }
  ]
  ```
- **实施内容**：
  - 引入API调用获取客户评论和合作伙伴数据
  - 替换静态数据为API调用
  - 添加加载状态和错误处理

### 4. 代码片段页（Snippets.vue）
- **API端点**：`GET /api/snippets`
- **请求方法**：GET
- **参数**：无
- **预期响应格式**：
  ```json
  [
    {
      "id": "string",
      "title": "string",
      "code": "string",
      "type": "string"
    }
  ]
  ```
- **实施内容**：
  - 引入fetchSnippets API
  - 替换静态数据为API调用
  - 添加加载状态和错误处理

### 5. 关于页（About.vue）
- **API端点**：`GET /api/profile`
- **请求方法**：GET
- **参数**：无
- **预期响应格式**：
  ```json
  {
    "id": "string",
    "name": "string",
    "avatar": "string",
    "location": "string",
    "bio": "string",
    "contact": {
      "email": "string",
      "wechat": "string"
    },
    "techStack": ["string"]
  }
  ```
- **实施内容**：
  - 引入fetchProfile API
  - 替换静态数据为API调用
  - 添加加载状态和错误处理

## 三、代码片段效果预览功能实现

### 1. 功能需求
- 允许用户输入或选择代码片段后，通过可视化方式实时预览代码运行效果
- 设计直观的预览界面
- 支持常见编程语言的语法高亮
- 实现代码输入与预览效果的同步更新
- 添加必要的错误处理机制以应对无效代码输入

### 2. 技术实现方案

#### （1）组件设计
- 创建一个新的CodePreview.vue组件，用于实现代码预览功能
- 组件包含：
  - 代码编辑器区域（支持语法高亮）
  - 预览效果区域
  - 语言选择器
  - 错误提示区域

#### （2）技术栈
- 使用Tailwind CSS进行样式设计
- 使用highlight.js或prism.js实现语法高亮
- 使用iframe或动态DOM操作实现代码预览
- 支持HTML、CSS、JavaScript等常见编程语言

#### （3）实现步骤
1. **创建CodePreview组件**
   - 设计组件布局和样式
   - 实现代码编辑器和预览区域
   - 添加语言选择功能

2. **实现语法高亮**
   - 集成highlight.js或prism.js
   - 支持多种编程语言

3. **实现代码预览功能**
   - 使用iframe沙箱模式实现安全预览
   - 实现代码输入与预览效果的同步更新
   - 处理不同类型代码的预览逻辑

4. **添加错误处理机制**
   - 捕获代码执行错误
   - 显示友好的错误提示
   - 防止恶意代码执行

5. **集成到现有页面**
   - 在SnippetModal组件中集成CodePreview组件
   - 支持从代码片段列表选择代码进行预览

### 3. 组件结构
```vue
<template>
  <div class="code-preview-container">
    <!-- 语言选择器 -->
    <div class="language-selector">
      <select v-model="selectedLanguage" @change="handleLanguageChange">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
        <!-- 其他语言选项 -->
      </select>
    </div>
    
    <!-- 代码编辑器和预览区域 -->
    <div class="preview-layout">
      <!-- 代码编辑器 -->
      <div class="code-editor">
        <pre><code :class="`language-${selectedLanguage}`" v-html="highlightedCode"></code></pre>
        <textarea
          v-model="code"
          @input="handleCodeChange"
          :class="`language-${selectedLanguage}`"
          placeholder="输入或粘贴代码..."
        ></textarea>
      </div>
      
      <!-- 预览效果 -->
      <div class="preview-area">
        <iframe
          ref="previewFrame"
          sandbox="allow-scripts allow-same-origin"
          title="Code Preview"
        ></iframe>
      </div>
    </div>
    
    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      <p>{{ error }}</p>
    </div>
  </div>
</template>
```

## 四、实施步骤

1. **实现页面API对接**
   - 博客列表页（Blog.vue）
   - 服务页（Services.vue）
   - 代码片段页（Snippets.vue）
   - 关于页（About.vue）

2. **实现代码片段效果预览功能**
   - 创建CodePreview组件
   - 集成语法高亮库
   - 实现代码预览逻辑
   - 添加错误处理
   - 集成到SnippetModal组件

3. **测试与优化**
   - 测试所有API对接是否正常
   - 测试代码片段预览功能
   - 优化性能和用户体验

## 五、预期成果

1. **所有页面API对接完成**：博客列表、服务、代码片段和关于页面均使用真实API数据
2. **代码片段预览功能实现**：
   - 支持多种编程语言的语法高亮
   - 实时预览代码运行效果
   - 安全的沙箱环境
   - 友好的错误提示
3. **提升用户体验**：
   - 加载状态和错误处理
   - 流畅的交互体验
   - 直观的界面设计

通过以上实施计划，将完成所有页面的API对接和代码片段预览功能，提升项目的完整性和用户体验。