README

产品云相册官网

一个专业的产品云相册静态官网,完美适配手机和电脑,采用左侧导航 + 右侧内容的文档展示方式。

✨ 核心特性

📱 响应式设计

  • 桌面端:左侧固定导航栏 + 右侧内容区
  • 手机端:侧边栏可收起,点击按钮展开
  • 断点适配:1024px / 768px / 480px

📖 专业文档展示

  • 左侧导航:功能分类清晰,点击即可切换
  • 右侧内容:完整的操作步骤和说明
  • 单页应用:无需跳转多个页面,体验流畅

🎨 视觉区分

  • PC端文档:蓝色主题 (#2563eb) - 面向管理员
  • 手机端文档:绿色主题 (#10b981) - 面向终端客户

📁 文件结构

website/
├── index.html              # 首页
├── docs.html               # 文档中心概览
├── cases.html              # 客户案例
├── about.html              # 关于我们
│
├── docs/
│   ├── pc/                 # 💻 PC端文档
│   │   └── index.html      # ✅ 左侧导航 + 右侧内容(包含所有文档)
│   │
│   └── mobile/             # 📱 手机端文档
│       └── index.html      # ✅ 左侧导航 + 右侧内容(包含所有文档)
│
├── README.md               # 本文档
└── DOC-PLAN.md             # 文档规划清单

🚀 如何查看

方法一:直接打开(最快)

open docs/website/index.html

方法二:启动本地服务器(推荐)

cd docs/website
python -m http.server 8000
访问:http://localhost:8000

📖 文档说明

💻 PC端操作文档(管理员)

访问地址docs/pc/index.html

包含内容

  • 🚀 快速入门

- 快速入门指南

  • 📦 产品管理

- 产品管理操作手册

- 分类管理操作手册

- 批量导入产品

  • 💬 询盘管理

- 询盘管理操作手册

- 询盘通知设置

  • 📊 数据分析

- 数据分析操作手册

- 访客追踪功能

  • ⚙️ 小程序设置

- 小程序基础设置

- 主题样式自定义

- 二维码使用指南

特色

  • 左侧菜单可点击切换
  • 右侧显示对应的操作步骤
  • 移动端自动收起侧边栏


📱 手机端操作文档(小程序)

访问地址docs/mobile/index.html

包含内容

  • 🚀 快速入门

- 小程序快速入门

- 首次使用指南

  • 👀 产品浏览

- 浏览产品目录

- 搜索产品

- 收藏与分享

  • 💬 询价功能

- 提交询价

- 查看询价记录

  • 👤 个人中心

- 个人中心功能

- 小程序设置


🎨 设计特色

左侧导航

  • 固定定位:滚动时始终可见
  • 分类清晰:按功能模块分组
  • 高亮显示:当前选中的文档高亮
  • 平滑滚动:切换内容时自动滚动到顶部

右侧内容

  • 标题醒目:蓝色/绿色左边框标识
  • 步骤清晰:Step by step 操作指引
  • 提示框:重要信息突出显示
  • 截图预留:预留截图位置

移动端优化

  • 汉堡菜单:点击按钮展开侧边栏
  • 遮罩层:侧边栏打开时显示遮罩
  • 触控优化:按钮和链接大小适配手指操作

📊 文档统计

| 分类 | PC端 | 手机端 | 合计 |

|------|------|--------|------|

| 文档数量 | 10篇 | 9篇 | 19篇 |

| 页面文件 | 1个 | 1个 | 2个 |


🔧 技术栈

  • HTML5:语义化标签
  • CSS3:Flexbox + Grid 布局
  • JavaScript:原生JS实现导航切换
  • 响应式设计:媒体查询适配多端
  • 无框架依赖:纯静态页面,加载快速

📝 后续优化

功能优化

  • [ ] 添加文档搜索功能
  • [ ] 添加返回顶部按钮
  • [ ] 添加打印样式
  • [ ] 添加暗色模式

内容补充

  • [ ] 补充真实的后台截图
  • [ ] 添加视频教程链接
  • [ ] 补充更多客户案例

SEO优化

  • [ ] 添加 meta 标签
  • [ ] 添加 sitemap.xml
  • [ ] 优化页面结构化数据

📞 联系方式

  • 邮箱:contact@chengguoit.com
  • 公司:成小果AI技术有限公司

© 2026 成小果AI技术有限公司 | 产品云相册