Claude Code提示词案例-智慧文博士

需求开发一个详情页
1. 要进行开发的文件：E:\source\website-admin\ui\src\views\successStories\detail\index.vue
2. 页面的内容根据动态路由传递过来的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 到图片文件名的映射

Claude Code提示词案例