# interactive-demo-platform

**Repository Path**: kfqwp/interactive-demo-platform

## Basic Information

- **Project Name**: interactive-demo-platform
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-27
- **Last Updated**: 2026-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

   - 主服务器: http://localhost:3000
   - 测试页面: http://localhost:3000/index.html
   - 基础编辑器: http://localhost:3000/editor.html
   - 增强版编辑器: http://localhost:3000/editor-enhanced.html

### Docker部署

```bash
# 使用Docker构建和运行
docker-compose up -d

# 可用服务：
# - API服务器: http://localhost:3000
# - PostgreSQL: localhost:5432
# - Redis: localhost:6379
# - pgAdmin: http://localhost:5050 (admin@demo.com/admin)
# - Redis Commander: http://localhost:8081
```

## 📚 文档

### API文档

#### 认证
- `POST /api/v1/auth/login` - 用户登录
- `POST /api/v1/auth/refresh` - 刷新令牌
- `GET /api/v1/auth/me` - 获取当前用户

#### 演示管理
- `GET /api/v1/demos` - 列出所有演示
- `GET /api/v1/demos/:id` - 获取演示详情
- `POST /api/v1/demos` - 创建新演示
- `PUT /api/v1/demos/:id` - 更新演示
- `DELETE /api/v1/demos/:id` - 删除演示

#### WebSocket事件
- `authenticate` - 客户端认证
- `control` - 演示控制命令
- `step_update` - 步骤导航
- `analytics` - 用户分析数据

### SDK集成

#### 基础集成
```html
<script src="/sdk/loader.js"></script>
<script>
const demo = new DemoEngine({
  token: 'your-demo-token',
  demoId: 'demo-id',
  autoStart: true
});

demo.on('initialized', () => {
  console.log('Demo SDK 准备就绪！');
});
</script>
```

#### 高级配置
```javascript
const demo = new DemoEngine({
  apiUrl: 'https://api.yourdomain.com',
  socketUrl: 'wss://api.yourdomain.com',
  token: 'your-token',
  demoId: 'demo-id',
  theme: 'dark',
  language: 'zh-CN',
  debug: true
});
```

## 🎨 编辑器使用

### 基础编辑器
访问: `http://localhost:3000/editor.html`

功能：
- 可视化步骤创建和管理
- 元素选择，自动生成CSS选择器
- 高亮动画配置
- 工具提示定位和样式
- 实时预览

### 增强版编辑器（带分类）
访问: `http://localhost:3000/editor-enhanced.html`

额外功能：
- 问题分类（入门指南、配置设置、故障排除等）
- 多维度分类的标签系统
- 难度级别分配（初级、中级、高级）
- 可视化问题解决路径
- 统计仪表板

## 🔧 开发

### 可用脚本
```bash
# 开发
npm run dev          # 启动开发服务器
npm run dev:simple   # 启动简化开发服务器

# 测试
npm test             # 运行测试
npm run test:watch   # 监控模式运行测试

# 代码质量
npm run lint         # 代码检查
npm run format       # 代码格式化

# 构建
npm run build        # 生产环境构建

# Docker
npm run docker:build # 构建Docker镜像
npm run docker:run   # 运行Docker容器
```

### 项目配置
- **环境变量**: 参考 `.env.example`
- **数据库**: SQLite（开发）/ PostgreSQL（生产）
- **缓存**: Redis（可选）
- **监控**: 内置分析和日志

## 📊 架构

### 高层架构
```
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   客户端应用    │◄──►│   覆盖层SDK     │◄──►│   浏览器扩展    │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
         ▼                       ▼                       ▼
┌─────────────────────────────────────────────────────────────┐
│                 交互式演示平台                              │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐        │
│  │   API层     │  │  WebSocket层 │  │   分析层    │        │
│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘        │
│         │                │                │               │
│  ┌──────▼────────────────▼────────────────▼──────┐        │
│  │             业务逻辑层                        │        │
│  └────────────────────────────────────────────────┘        │
│         │                │                │               │
│  ┌──────▼──────┐  ┌─────▼──────┐  ┌──────▼──────┐        │
│  │  PostgreSQL │  │    Redis    │  │   存储层    │        │
│  └─────────────┘  └─────────────┘  └─────────────┘        │
└─────────────────────────────────────────────────────────────┘
```

### 技术栈
- **前端**: HTML5, CSS3, JavaScript (ES6+)
- **后端**: Node.js, Express, Socket.io
- **数据库**: PostgreSQL（生产）, SQLite（开发）
- **缓存**: Redis
- **容器**: Docker, Docker Compose
- **监控**: 内置分析, Winston日志

## 🤝 贡献指南

1. **Fork仓库**
2. **创建功能分支**
   ```bash
   git checkout -b feature/amazing-feature
   ```
3. **提交更改**
   ```bash
   git commit -m '添加新功能：描述'
   ```
4. **推送到分支**
   ```bash
   git push origin feature/amazing-feature
   ```
5. **创建Pull Request**

### 开发规范
- 遵循现有代码风格和约定
- 为新功能编写测试
- 根据需要更新文档
- 保持提交信息专注和描述性

## 📄 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件。

## 🆘 支持

- **文档**: [docs.interactive-demo.dev](https://docs.interactive-demo.dev)
- **问题跟踪**: [Gitee Issues](https://gitee.com/yourusername/interactive-demo-platform/issues)
- **社区**: [Discord服务器](https://discord.gg/interactive-demo)

## 🙏 致谢

- 灵感来源于 WalkMe, Appcues, UserGuiding
- 使用 OpenClaw AI 辅助开发
- 社区贡献者和反馈

---

**由交互式演示团队 ❤️ 构建**