# 云开发控制台 AI 开发入口 Demo

这是一个静态 HTML 原型，展示了在云开发控制台中集成 AI 开发入口的设计方案。

## 文件结构

```
scripts/demo/
├── index.html          # 概览页面
├── database.html       # MySQL 数据库页面（场景1：创建数据库表）
├── function.html       # 云函数页面（场景2：创建云函数，场景4：分析函数错误）
├── auth.html          # 身份认证页面（场景3：集成登录功能）
├── css/
│   └── style.css      # 样式文件
├── js/
│   ├── panel.js       # 面板交互逻辑
│   └── scenarios.js   # 场景配置数据
└── README.md          # 本文件
```

## 核心场景

### 场景1：创建数据库表
- **页面**：`database.html`
- **按钮位置**：表管理页面，"表管理"标题右侧
- **功能**：使用 AI 设计数据库表结构，包括字段、索引、约束和安全规则

### 场景2：创建云函数
- **页面**：`function.html`
- **按钮位置**：云函数列表页，"云函数列表"标题右侧
- **功能**：使用 AI 创建云函数，生成函数代码和调用代码

### 场景3：集成登录功能
- **页面**：`auth.html`
- **按钮位置**："快速开始"区域，"选择开发语言"下方
- **功能**：使用 AI 集成身份认证功能到项目中

### 场景4：分析函数错误
- **页面**：`function.html`（函数详情部分）
- **按钮位置**：函数详情页，日志标签页内，错误日志条目旁
- **功能**：使用 AI 分析云函数错误并修复

## 使用方法

1. 直接在浏览器中打开任意 HTML 文件
2. 点击页面上的 "使用 AI ..." 按钮
3. 查看展开的 AI 开发面板，包含：
   - IDE 选择器（选择 Cursor、CodeBuddy、Claude Code 等）
   - MCP 配置步骤
   - 场景化提示词编辑器（可编辑）

## 功能特性

- ✅ 可展开/收起的 AI 开发面板
- ✅ IDE 选择器（支持多个 IDE）
- ✅ MCP 配置步骤展示
- ✅ 场景化提示词模板（可编辑）
- ✅ 一键复制配置和提示词
- ✅ 响应式设计

## 技术实现

- 纯 HTML/CSS/JavaScript，无需构建工具
- 参考了 `doc/components/ErrorCodeIDEButton.tsx` 和 `doc/components/IDESelector.tsx` 的设计
- 样式参考了文档站的错误码页面按钮

## 下一步

这个 demo 展示了基本的 UI/UX 设计。实际集成到控制台时，需要：

1. 将静态 HTML 转换为 React/Vue 组件
2. 集成真实的 MCP 配置逻辑
3. 连接后端 API 获取环境信息
4. 实现提示词的动态生成（根据页面上下文）

