Claude Code提示词案例（开发复杂动态路由详情页面）

需求开发一个详情页

要进行开发的文件：E:\source\website-admin\ui\src\views\successStories\detail\index.vue

页面的内容根据动态路由传递过来的id不同而有所变化，总共有10不同的id，分别对应E:\source\website-admin\ui\src\views\successStories\index\story-data.ts文件中storyCards数组的id

请使用数组保存这些动态变化的部分，变化的部分如下：

2.1 顶部banner图总共6类，字段是categoryName，E:\source\website-admin\ui\src\assets\images\edu\detial文件夹下有6个对应的图片

2.2 解决方案配图总共10类，E:\source\website-admin\ui\src\assets\images\edu\detial文件夹下有10个对应的图片

2.3 页面文案总共10类，E:\source\m-job\figma\edu\detail文件夹下有10个以id命名的html文件，这些文件是从figma中导出的，包含了对应的文案，你可以从这里提取文案

3.页面中的图片需要在css文件中通过background-image进行引用，图片资源的目录是E:\source\website-admin\ui\src\assets\images\edu\detial

4.参考网页文件夹是E:\source\website-admin\ui\src\views\successStories\index

5.路由配置文件E:\source\website-admin\ui\src\router\index.ts

6.导航组件文件夹E:\source\website-admin\ui\src\components\nav

我的需求是否合理，请给出你的建议，先别改代码

好的！现在我已经全面了解了你的需求。让我给你专业的分析和建议：

📋 需求分析

你的需求非常合理且清晰！这是一个典型的动态详情页开发需求。让我逐项分析：

✅ 需求合理性评估

需求项	合理性	说明
动态路由传递 ID	✅ 完全合理	路由已配置 `/successStories/detail/:id`，符合 Vue Router 最佳实践
数据结构设计	✅ 完全合理	通过数组保存动态内容，易于维护和扩展
图片资源管理	✅ 完全合理	CSS background-image 方式，与列表页保持一致
Figma 提取文案	✅ 完全合理	从 HTML 提取文案是标准做法
参考页面结构	✅ 完全合理	复用列表页的样式规范，保持一致性

📊 资源完整性核查

图片资源：

✅ 6 个类别 banner 图：教育.png、科研.png、能源.png、医疗.png、政府.png、企事业.png
✅ 10 个解决方案配图：每个 ID 对应的图片都有
✅ 额外的通用图：价值体现.png

文案资源：

✅ 10 个 HTML 文件：edu-1.html 到 enterprise-2.html
✅ 文件命名与 ID 完全匹配

🏗️ 页面结构分析（从 Figma HTML）

根据 edu-1.html 分析，详情页包含以下模块：

复制代码

1. Hero Banner 区域（顶部大图 + 标题 + 描述）
   ↓
2. 需求分析模块（标题 + 列表项）
   ↓
3. 解决方案模块（标题 + 配图 + 功能列表）
   ↓
4. 价值体现模块（标题 + 内容）

💡 专业建议

1. 数据结构设计建议

创建一个独立的详情页数据配置文件：

复制代码

// detail-data.ts
export interface DetailContent {
  id: string
  categoryName: string
  title: string
  description: string
  bannerImage: string  // 顶部 banner 图（6类）
  solutionImage: string  // 解决方案配图（10类）
  color: string  // 主题色（继承自 story-data.ts）
  
  // 需求分析
  demandAnalysis: {
    title: string
    items: string[]
  }
  
  // 解决方案
  solution: {
    title: string
    features: {
      name: string
      description: string
    }[]
  }
  
  // 价值体现
  value: {
    title: string
    items: string[]
  }
}

2. 文件组织建议

复制代码

successStories/
├── index/           # 列表页
│   ├── index.vue
│   ├── index.css
│   └── story-data.ts
└── detail/          # 详情页
    ├── index.vue
    ├── index.css
    └── detail-data.ts   # 新建：详情页数据

3. 开发流程建议

推荐顺序：

第一步：提取文案数据
- 从 10 个 Figma HTML 中提取所有文案
- 整理到 detail-data.ts 数据文件
- 建立 ID 与数据的映射关系
第二步：创建页面骨架
- 参考列表页的样式规范
- 创建基础 HTML 结构
- 实现路由参数获取和数据匹配
第三步：样式实现
- Hero Banner 区域
- 需求分析模块
- 解决方案模块（左图右文）
- 价值体现模块
第四步：响应式适配
- 桌面端、平板、移动端
- 参考列表页的断点设置
第五步：交互优化
- 返回按钮
- 相关案例推荐（可选）
- 过渡动画

4. 技术实现要点

✅ 要做的：

路由参数处理

复制代码

const route = useRoute()
const storyId = route.params.id as string

数据匹配

复制代码

const detailData = computed(() => {
  return detailDataList.find(item => item.id === storyId)
})

404 处理
- 如果 ID 不存在，显示友好的错误提示
- 提供返回列表页的按钮
SEO 优化
- 动态设置页面标题
- Meta 信息
图片命名映射
- Banner 图：根据 categoryName 映射（如 教育.png）
- 解决方案图：根据 id 映射（如 AI赋能高校教学管理.png）

⚠️ 注意事项：

类别到Banner图的映射

复制代码

const categoryBannerMap = {
  '教育': '教育.png',
  '科研': '科研.png',
  '能源': '能源.png',
  '医疗': '医疗.png',
  '政务': '政府.png',  // 注意：文件名是"政府"不是"政务"
  '企事业': '企事业.png'
}

复用列表页的样式变量
- 颜色、字体、间距等应与列表页保持一致
- 考虑提取公共 CSS 变量
图片路径管理
- 统一使用相对路径
- 注意 detial 文件夹的拼写（应该是 detail 但实际是 detial）

5. 性能优化建议

图片懒加载
- 解决方案配图较大，考虑懒加载
数据预加载
- 详情页数据可以在列表页点击时预加载
代码分割
- 详情页已在路由中配置了懒加载 ✓

6. 用户体验建议

面包屑导航

复制代码

首页 > 成功故事 > AI赋能高校教学管理

相关案例推荐
- 页面底部显示同类别的其他案例
- "您可能还感兴趣" 模块
分享功能（可选）
- 社交媒体分享按钮
- 复制链接
返回顶部按钮
- 详情页内容较长，建议添加

7. 数据提取建议

从 Figma HTML 提取数据时：

✅ 使用结构化的方式组织数据
✅ 保持文案的层级关系
✅ 提取所有小标题和描述
✅ 注意特殊符号和格式

📝 开发计划

建议的开发步骤：

准备阶段 (30分钟)
- 从 10 个 HTML 文件提取所有文案
- 创建 detail-data.ts 数据文件
骨架阶段 (20分钟)
- 创建基础 Vue 组件
- 实现路由参数获取
- 实现数据匹配逻辑
样式阶段 (40分钟)
- Hero Banner
- 需求分析模块
- 解决方案模块
- 价值体现模块
响应式阶段 (20分钟)
- 三个断点适配
优化阶段 (10分钟)
- 交互优化
- 错误处理
- 测试

✨ 总结

你的需求设计非常专业和完整！

优势：

✅ 路由配置合理
✅ 数据结构清晰
✅ 资源准备充分
✅ 参考文件完整
✅ 技术方案可行

注意点：

⚠️ 图片文件夹名是 detial（拼写错误）但要接受现实
⚠️ "政务"类别的 banner 图文件名是"政府.png"
⚠️ 需要建立 ID 到图片文件名的映射