zyuas.com/AI_DEVELOPMENT_SETUP.md

AI 定制开发导航与页面创建报告

✅ 完成内容

1. 导航菜单更新

修改前

行业无人机 ▼
  ├ 无人机解决方案
  ├ 无人机
  ├ 无人机负载
  ├ 软件与服务
  └ 软件定制开发
公司动态
公司介绍
加入我们
联系我们

修改后

行业无人机 ▼
  ├ 无人机解决方案
  ├ 无人机
  ├ 无人机负载
  ├ 软件与服务
  └ 软件定制开发
AI 定制开发 ▼       ← 新增
  ├ RAG
  └ AI 应用开发
公司动态
公司介绍
// 加入我们          ← 已注释
联系我们

2. 新增文件

目录结构

src/view/AIDevelopment/
├── Index.vue      # AI 定制开发列表页
├── RAG.vue        # RAG 详情页
└── AIApp.vue      # AI 应用开发详情页

3. 页面布局

AI 定制开发列表页（Index.vue）

• Banner: 150px 高度，显示"AI 定制开发"
• 章节标题: 带标签和副标题
• 服务卡片: 2 个卡片（RAG、AI 应用开发）
• 联系咨询按钮: 底部 CTA 按钮

详情页（RAG.vue、AIApp.vue）

• Banner: 150px 高度，显示具体服务名称
• 内容占位: "页面内容开发中..."
• 空状态: 图标 + 标题 + 描述

4. 路由配置

// 主路由
{
  path: '/ai-development',
  name: 'aiDevelopment',
  component: resolve => require(['@/view/AIDevelopment/Index'], resolve),
  meta: { title: 'AI 定制开发' }
}

// 子路由
{
  path: '/ai-development/rag',
  name: 'aiDevelopmentRAG',
  component: resolve => require(['@/view/AIDevelopment/RAG'], resolve),
  meta: { title: 'RAG 检索增强生成' }
}

{
  path: '/ai-development/app',
  name: 'aiDevelopmentApp',
  component: resolve => require(['@/view/AIDevelopment/AIApp'], resolve),
  meta: { title: 'AI 应用开发' }
}

5. 导航配置

{
  name: "AI 定制开发",
  path: "/ai-development",
  children: [
    { name: "RAG", path: "/ai-development/rag" },
    { name: "AI 应用开发", path: "/ai-development/app" }
  ]
}

6. 访问路径

页面	路径	说明
AI 定制开发列表	/ai-development	显示 2 个服务卡片
RAG 详情	/ai-development/rag	RAG 技术详情页（占位）
AI 应用开发详情	/ai-development/app	AI 应用开发详情页（占位）

7. 页面特点

列表页（Index.vue）

• ✅ 响应式网格布局（桌面自适应，平板 2 列，手机 1 列）
• ✅ 卡片悬停效果（上浮、图片放大、遮罩显示）
• ✅ 联系咨询按钮
• ✅ WOW.js 动画支持

详情页（RAG.vue、AIApp.vue）

• ✅ 统一的 Banner 样式
• ✅ 空状态占位界面
• ✅ 居中布局，视觉友好
• ✅ WOW.js 动画支持

8. 文件修改

文件	修改内容
src/config/nav-config.js	添加 AI 定制开发导航和路由，注释加入我们
src/view/AIDevelopment/Index.vue	新建列表页
src/view/AIDevelopment/RAG.vue	新建 RAG 详情页
src/view/AIDevelopment/AIApp.vue	新建 AI 应用开发详情页

9. 测试步骤

1. 导航菜单测试

   • ✅ 悬停"AI 定制开发"显示下拉菜单
   • ✅ 显示 2 个菜单项（RAG、AI 应用开发）
   • ✅ 点击菜单项正确跳转

2. 列表页测试

   • ✅ 访问 /ai-development 显示列表
   • ✅ 显示 2 个服务卡片
   • ✅ 点击卡片跳转到对应详情页

3. 详情页测试

   • ✅ 访问 /ai-development/rag 显示 RAG 页面
   • ✅ 访问 /ai-development/app 显示 AI 应用开发页面
   • ✅ 显示"页面内容开发中..."占位提示

10. 后续开发建议

内容填充

1. RAG 详情页：

   • 技术概述
   • 核心优势
   • 应用场景
   • 案例展示

2. AI 应用开发详情页：

   • 开发流程
   • 技术栈
   • 服务领域
   • 成功案例

功能增强

1. 添加咨询表单
2. 添加相关案例链接
3. 添加技术文档下载
4. 添加在线客服入口

📊 完成状态

任务	状态
导航菜单添加	✅ 完成
注释加入我们	✅ 完成
列表页创建	✅ 完成
RAG 详情页	✅ 完成（占位）
AI 应用开发详情页	✅ 完成（占位）
路由配置	✅ 完成
响应式布局	✅ 完成

所有任务已完成，页面结构已搭建，等待内容填充！