nl-blogs/.trae/documents/plan_20260113_090801.md

项目页面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
• 参数：无
• 预期响应格式：

  [
    {
      "id": "string",
      "title": "string",
      "category": "string",
      "date": "string",
      "excerpt": "string",
      "content": "string"
    }
  ]
  

• 实施内容：
  • 引入fetchPosts API
  • 替换静态数据为API调用
  • 添加加载状态和错误处理

2. 博客详情页（待创建）

• API端点：GET /api/posts/:id
• 请求方法：GET
• 参数：id（路径参数）
• 预期响应格式：

  {
    "id": "string",
    "title": "string",
    "category": "string",
    "date": "string",
    "content": "string"
  }
  

• 实施内容：
  • 创建BlogDetail.vue页面
  • 实现API调用和数据展示
  • 添加加载状态和错误处理

3. 服务页（Services.vue）

• API端点：
  • GET /api/testimonials（客户评论）
  • GET /api/partners（合作伙伴）
• 请求方法：GET
• 参数：无
• 预期响应格式：

  // 客户评论
  [
    {
      "id": "string",
      "content": "string",
      "author": "string",
      "avatar": "string"
    }
  ]
  
  // 合作伙伴
  [
    {
      "id": "string",
      "name": "string",
      "logo": "string"
    }
  ]
  

• 实施内容：
  • 引入API调用获取客户评论和合作伙伴数据
  • 替换静态数据为API调用
  • 添加加载状态和错误处理

4. 代码片段页（Snippets.vue）

• API端点：GET /api/snippets
• 请求方法：GET
• 参数：无
• 预期响应格式：

  [
    {
      "id": "string",
      "title": "string",
      "code": "string",
      "type": "string"
    }
  ]
  

• 实施内容：
  • 引入fetchSnippets API
  • 替换静态数据为API调用
  • 添加加载状态和错误处理

5. 关于页（About.vue）

• API端点：GET /api/profile
• 请求方法：GET
• 参数：无
• 预期响应格式：

  {
    "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. 组件结构

<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对接和代码片段预览功能，提升项目的完整性和用户体验。