钢哥们AI - 您的智能钢材助手是基于人工智能技术的智能助手，为您提供24小时在线咨询服务。
我的钢哥们AI使用指南 - 功能说明
📋 概述
为"我的钢哥们AI"功能创建了一个完整的、通俗易懂的使用指南页面，帮助用户快速了解和使用专属AI助手功能。
---
✨ 新增内容
1. 帮助文档页面
访问路径: `/kucun/ai-guide/` 页面特点:- 🎨 绿色主题设计（与"我的钢哥们AI"按钮颜色呼应）
- 📱 完全响应式布局
- 🎯 侧边导航快速定位
- 💫 平滑滚动动画
- 📖 8个主要章节
📚 文档结构
1️⃣ 什么是"我的钢哥们AI"？
内容:- 简单易懂的功能介绍
- 形象的比喻（24小时在线业务员）
- 三大核心特点卡片：
---
2️⃣ 功能特点
内容:- ✅ 核心优势（5个要点）
- 😊 用户体验
---
3️⃣ 如何使用
内容: 4步操作流程 步骤1: 📤 上传库存数据- 批量上传（推荐）
- 手动添加
- 体验功能
- 按钮位置说明
- 视觉示意
- 查询示例
- 输入输出对比
- 专属链接格式
- 分享方式
- 分享好处
---
4️⃣ 使用示例
内容: 3个真实场景示例 示例1: 查询价格 示例2: 查询库存 示例3: 查询不存在的库存 目标: 让用户看到实际效果---
5️⃣ 与全站AI对比
内容: 详细对比表格
| 对比项 | 全站AI | 我的专属AI |
|---|---|---|
| 查询范围 | 所有商家 | ✓ 只有您的 |
| 查询结果 | 多个商家 | ✓ 只显示您的 |
| 适用场景 | 市场行情 | ✓ 客户服务 |
| 分享客户 | ✗ 不建议 | ✓ 推荐 |
- ⚠️ 全站AI不适合分享给客户（会看到其他商家）
- ✅ 专属AI推荐分享（只看您的库存）
---
6️⃣ 应用场景
内容: 5个实际应用场景 场景1: 🔍 快速自查库存- 情况：想快速查某个规格
- 解决：秒出结果，不用翻Excel
- 效果：从3分钟缩短到5秒
- 情况：客户打电话询价
- 解决：边接电话边查询
- 效果：显得专业高效
- 情况：老客户经常询价
- 解决：发链接让客户自助查询
- 效果：省心省力
- 情况：现场客户问价
- 解决：手机打开AI现场演示
- 效果：展示公司实力
- 情况：想展示库存
- 解决：发链接让客户自己查
- 效果：新鲜有趣，易传播
---
7️⃣ 使用技巧
内容: 6个实用技巧
| 技巧 | 说明 |
|---|---|
| 🔄 保持库存更新 | 定期更新价格和数量 |
| ✏️ 完善库存信息 | 填写完整信息 |
| 🔖 收藏专属链接 | 添加到书签 |
| 🗣️ 培训客户使用 | 教客户怎么问 |
| 📱 生成二维码 | 印在名片上 |
| 🧪 先用体验功能 | 测试效果 |
---
8️⃣ 常见问题
内容: 8个常见问题解答 Q1: 专属AI链接在哪里找？ A: 格式为 `https://www.dqzgt.com/chat/用户ID/` Q2: 客户能看到我的所有库存吗？ A: 只能查询，不能浏览所有 Q3: 更新库存后，AI会立即更新吗？ A: 是的，立即同步 Q4: 专属AI收费吗？ A: 完全免费 Q5: 客户问的规格我没有，AI会怎么回答？ A: 礼貌告知"没有找到" Q6: 可以自定义AI的回答内容吗？ A: 目前固定格式，可联系客服提建议 Q7: 专属AI和全站AI有什么区别？ A: 链接到对比章节 Q8: 没有库存，可以先体验吗？ A: 可以用"体验库存"功能 目标: 解决用户疑问---
🎨 设计特色
1. 配色方案
| 元素 | 颜色 | 说明 |
|---|---|---|
| 主色调 | #28a745 → #20c997 | 绿色渐变（与AI按钮一致） |
| 辅助色 | #667eea → #764ba2 | 紫色渐变（与其他功能呼应） |
| 标题 | #28a745 | 绿色 |
| 成功框 | #d4edda → #c3e6cb | 浅绿色渐变 |
| 提示框 | #fff3cd → #ffeaa7 | 黄色渐变 |
| 警告框 | #ffe5e5 → #ffc9c9 | 红色渐变 |
| 示例框 | #e3f2fd → #bbdefb | 蓝色渐变 |
2. 图标系统
| 章节 | 图标 | 含义 |
|---|---|---|
| 什么是 | `bx-question-mark` | 问号 |
| 功能特点 | `bx-star` | 星星 |
| 如何使用 | `bx-play-circle` | 播放 |
| 使用示例 | `bx-chat` | 聊天 |
| 对比 | `bx-git-compare` | 对比 |
| 应用场景 | `bx-briefcase` | 公文包 |
| 使用技巧 | `bx-bulb` | 灯泡 |
| 常见问题 | `bx-help-circle` | 帮助 |
3. 交互效果
卡片悬停: 按钮效果: 侧边导航: 平滑滚动:- 点击侧边导航 → 800ms平滑滚动到对应章节
- 滚动页面 → 自动更新侧边导航激活状态
- 滚动超过300px → 按钮淡入
- 点击 → 800ms平滑滚动到顶部
- 悬停 → 上浮5px
📱 响应式设计
桌面端 (≥768px)
移动端 (<768px)
---
1. 视图函数
2. URL路由
3. 入口链接
位置: "我的钢哥们AI"按钮旁边 样式: 绿色边框按钮（与AI按钮颜色呼应）---
📄 页面元素清单
顶部导航
- ✅ 绿色渐变背景
- ✅ 机器人图标（带弹跳动画）
- ✅ 主标题："我的钢哥们AI使用指南"
- ✅ 副标题："您的专属AI助手..."
- ✅ 固定定位（滚动时保持在顶部）
侧边导航
- ✅ 8个章节链接
- ✅ 图标 + 文字
- ✅ 激活状态高亮
- ✅ 悬停效果
- ✅ 固定定位（桌面端）
主内容区
- ✅ 8个章节内容
- ✅ 各类卡片（特色、步骤、场景）
- ✅ 对比表格
- ✅ 示例框
- ✅ 提示框、警告框、成功框
- ✅ 图标列表
底部操作栏
- ✅ 标题："准备好开始使用了吗？"
- ✅ 两个按钮：
返回顶部按钮
- ✅ 固定在右下角
- ✅ 圆形绿色渐变
- ✅ 向上箭头图标
- ✅ 滚动超过300px显示
🎯 用户体验优化
1. 信息层次清晰
2. 视觉引导
- 🎨 颜色区分不同类型的信息
- 📍 图标帮助快速识别
- 💡 提示框突出重点
- ⚠️ 警告框提醒注意事项
- ✅ 成功框鼓励操作
3. 阅读体验
- 📖 清晰的章节结构
- 🔍 侧边导航快速定位
- 📱 响应式布局适配各种设备
- 💫 平滑滚动动画
- 🎨 舒适的配色和间距
4. 操作便捷
- 🔗 一键跳转到对应章节
- 🔝 快速返回顶部
- 🚀 直接跳转到上传库存页面
- 🔙 返回库存管理页面
📊 内容特点
1. 通俗易懂
- ❌ 避免技术术语
- ✅ 使用日常语言
- ✅ 形象的比喻（24小时在线业务员）
- ✅ 真实的场景举例
2. 结构清晰
- 📋 8个主要章节
- 🔢 步骤编号
- 📊 对比表格
- 💬 示例对话
3. 实用性强
- 🎯 真实应用场景
- 💡 实用技巧
- 🗣️ 推荐话术
- ❓ 常见问题解答
4. 视觉友好
- 🎨 丰富的颜色
- 🖼️ 图标装饰
- 📦 卡片布局
- 💫 动画效果
🔄 与其他功能的关联
1. 体验库存功能
关联:- 在"如何使用"章节中提到可以用"体验库存"测试AI
- 在"常见问题"中说明如何先体验
- 体验库存使用指南: `/kucun/guide/`
- 我的钢哥们AI使用指南: `/kucun/ai-guide/`
2. 价格表功能
关联:- 都是展示用户库存的方式
- 价格表是静态展示，AI是动态查询
- 价格表：一次性查看所有库存
- AI：按需查询特定规格
3. 库存管理
关联:- AI查询的数据来源于库存管理
- 库存更新后AI立即同步
- 从库存管理页面进入AI
- 从AI指南返回库存管理
📁 相关文件
- ✅ - 帮助文档页面（完整）
- ✅ `我的钢哥们AI使用指南说明.md` - 本文档
- ✅ - 添加 `/ai-guide/` 路由
- ✅ - 添加"AI使用指南"按钮
🎉 完成清单
- [x] 创建帮助文档HTML页面
- [x] 设计8个主要章节内容
- [x] 配置URL路由
- [x] 在库存管理页面添加入口链接
- [x] 实现侧边导航
- [x] 实现平滑滚动
- [x] 实现返回顶部按钮
- [x] 响应式布局适配
- [x] 编写说明文档
💡 使用建议
对商家
- 首次使用前: 先阅读这个指南，了解功能
- 上传库存后: 立即测试专属AI效果
- 分享给客户前: 确保库存信息准确完整
- 定期更新: 保持库存数据最新
对客户
- 收到链接后: 可以查看这个指南了解如何使用
- 查询时: 用自然语言提问即可
- 找不到时: 联系商家询问是否可以调货
🚀 后续优化建议
功能增强
- [ ] 添加视频教程
- [ ] 添加在线客服入口
- [ ] 添加用户反馈功能
- [ ] 添加打印/下载PDF功能
内容完善
- [ ] 添加更多真实案例
- [ ] 添加用户评价
- [ ] 添加常见错误排查
- [ ] 添加高级技巧章节
交互优化
- [ ] 添加进度指示器
- [ ] 添加阅读时间估算
- [ ] 添加章节完成标记
- [ ] 添加相关文章推荐
📞 技术支持
如有问题，请联系：
- 客服电话: 15222666199
- 网站: www.dqzgt.com
📝 总结
成功创建了一个完整的、通俗易懂的"我的钢哥们AI"使用指南：
- ✨ 8个主要章节，内容全面
- 🎨 绿色主题设计，视觉统一
- 📱 完全响应式，适配各种设备
- 💫 平滑动画，体验流畅
- 🎯 通俗易懂，小白也能看懂
- 📖 结构清晰，快速定位
- 💡 实用性强，解决实际问题