Merge pull request #275 from TencentCloudBase/feature/demo-deployment

feat(demo): 🎨 add console AI development entry demo and move to scripts/demo

Author: binggg

doc/prompts/cloud-functions.mdx

@@ -170,7 +170,7 @@ After creating/deploying resources, provide corresponding console management pag
    - Main dashboard showing environment status, resource usage, and quick access to key features
    - Displays overview of all CloudBase services and their status
 
-2. **Template Center (模板中心)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/cloud-template/market`
+2. **Template Center (模板中心)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/template`
    - Access project templates for React, Vue, Mini Program, UniApp, and backend frameworks
    - AI Builder templates for rapid application generation
    - Framework templates: React, Vue, Miniapp, UniApp, Gin, Django, Flask, SpringBoot, Express, NestJS, FastAPI
@@ -199,7 +199,7 @@ After creating/deploying resources, provide corresponding console management pag
      - Manage function triggers and environment variables
      - Monitor function invocations and performance
 
-6. **CloudRun (云托管)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/platform-run`
+6. **CloudRun (云托管)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/cloudrun`
    - Manage containerized backend services
    - Deploy services using Function mode or Container mode
    - Configure service scaling, access types, and environment variables
@@ -216,8 +216,9 @@ After creating/deploying resources, provide corresponding console management pag
    - AI Builder for generating templates and code
    - AI image recognition and other AI features
 
-9. **Static Website Hosting (静态网站托管)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/static-hosting`
+9. **Static Website Hosting (静态网站托管)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/hosting`
    - Deploy and manage static websites
+   - Alternative URL: `https://console.cloud.tencent.com/tcb/hosting`
    - Configure custom domains and CDN settings
    - View deployment history and access logs
 
@@ -231,20 +232,16 @@ After creating/deploying resources, provide corresponding console management pag
       - Manage API Keys and Publishable Keys
       - View and manage access tokens
 
-11. **Weida Low-Code (微搭低代码)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/lowcode/apps`
+11. **Weida Low-Code (微搭低代码)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/weida`
     - Access Weida low-code development platform
     - Build applications using visual drag-and-drop interface
 
-12. **Logs & Monitoring (日志监控)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/devops/log`
+12. **Logs & Monitoring (日志监控)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/logs`
     - View logs from cloud functions, CloudRun services, and other resources
     - Monitor resource usage, performance metrics, and error rates
     - Set up alerts and notifications
 
-13. **Extensions (扩展功能)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/apis`
-    - Manage platform extensions and plugins
-    - Install and configure additional CloudBase capabilities
-
-14. **Environment Settings (环境配置)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/env`
+13. **Environment Settings (环境配置)**: `https://tcb.cloud.tencent.com/dev?envId=${envId}#/settings`
     - Configure environment-level settings
     - Manage security domains and CORS settings
     - Configure environment variables and secrets

doc/prompts/cloudbase-platform.mdx

@@ -102,11 +102,22 @@ rules:
       - "在 Android 应用中实现数据查询和更新"
       - "在 iOS 应用中实现数据库操作"
 
+  - id: cloud-functions
+    title: 后端开发：云函数
+    description: 开发和部署 Node.js 云函数，包括运行时选择、部署、日志查询、HTTP 访问配置
+    category: backend
+    order: 1
+    prompts:
+      - "帮我创建一个云函数并部署"
+      - "配置云函数的 HTTP 访问"
+      - "查询云函数的执行日志"
+      - "更新云函数的环境变量"
+  
   - id: cloudrun-development
     title: 后端开发：云托管
     description: 使用云托管开发和部署任意语言的后端服务
     category: backend
-    order: 1
+    order: 2
     prompts:
       - "帮我部署一个 Node.js 后端服务到云托管"
       - "创建一个支持多语言的云托管服务"

doc/prompts/config.yaml

@@ -91,6 +91,7 @@
             "collapsible": true,
             "collapsed": true,
             "items": [
+              "ai/cloudbase-ai-toolkit/prompts/cloud-functions",
               "ai/cloudbase-ai-toolkit/prompts/cloudrun-development"
             ]
           },

doc/sidebar.json

@@ -0,0 +1,75 @@
+# 云开发控制台 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. 实现提示词的动态生成（根据页面上下文）
+

scripts/demo/README.md

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>身份认证 - 云开发控制台</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div class="console-container">
+    <!-- Top Header -->
+    <header class="console-header">
+      <div class="console-header-left">
+        <div class="console-logo">腾讯云 CloudBase DEV</div>
+        <div class="console-env-selector">
+          <span>tcb-advanced</span>
+          <span style="color: #999;">个人版</span>
+          <span>▼</span>
+        </div>
+        <a href="#" style="color: #666; text-decoration: none; font-size: 14px;">接入指引</a>
+      </div>
+      <div class="console-header-right">
+        <input type="text" class="console-search" placeholder="请输入关键词快捷搜索产品功能">
+        <div class="console-header-icons">
+          <div class="console-icon-button"><i class="fas fa-bell"></i></div>
+          <div class="console-icon-button"><i class="fas fa-bookmark"></i></div>
+          <div class="console-icon-button"><i class="fas fa-palette"></i></div>
+          <div class="console-icon-button" style="width: 32px; height: 32px; border-radius: 50%; background: #52c41a; color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center;">B</div>
+        </div>
+      </div>
+    </header>
+    
+    <!-- Left Sidebar -->
+    <aside class="console-sidebar">
+      <ul class="console-sidebar-nav">
+        <li class="console-sidebar-item">
+          <a href="index.html" class="console-sidebar-link disabled">
+            <span class="console-sidebar-icon"><i class="fas fa-chart-line"></i></span>
+            <span>概览</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item">
+          <a href="#" class="console-sidebar-link disabled">
+            <span class="console-sidebar-icon"><i class="fas fa-cube"></i></span>
+            <span>模板中心</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item">
+          <a href="#" class="console-sidebar-link disabled">
+            <span class="console-sidebar-icon"><i class="fas fa-file-alt"></i></span>
+            <span>文档型数据库</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item">
+          <a href="database.html" class="console-sidebar-link">
+            <span class="console-sidebar-icon"><i class="fas fa-database"></i></span>
+            <span>MySQL 数据库</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item">
+          <a href="function.html" class="console-sidebar-link">
+            <span class="console-sidebar-icon"><i class="fas fa-bolt"></i></span>
+            <span>云函数</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item">
+          <a href="#" class="console-sidebar-link disabled">
+            <span class="console-sidebar-icon"><i class="fas fa-rocket"></i></span>
+            <span>云托管</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item">
+          <a href="#" class="console-sidebar-link disabled">
+            <span class="console-sidebar-icon"><i class="fas fa-folder"></i></span>
+            <span>云存储</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item">
+          <a href="#" class="console-sidebar-link disabled">
+            <span class="console-sidebar-icon"><i class="fas fa-robot"></i></span>
+            <span>AI+</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item">
+          <a href="#" class="console-sidebar-link disabled">
+            <span class="console-sidebar-icon"><i class="fas fa-globe"></i></span>
+            <span>静态网站托管</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item">
+          <a href="auth.html" class="console-sidebar-link active">
+            <span class="console-sidebar-icon"><i class="fas fa-lock"></i></span>
+            <span>身份认证</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item">
+          <a href="#" class="console-sidebar-link disabled">
+            <span class="console-sidebar-icon"><i class="fas fa-tools"></i></span>
+            <span>微搭低代码</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item">
+          <a href="#" class="console-sidebar-link disabled">
+            <span class="console-sidebar-icon"><i class="fas fa-clipboard-list"></i></span>
+            <span>日志监控</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item">
+          <a href="#" class="console-sidebar-link disabled">
+            <span class="console-sidebar-icon"><i class="fas fa-cog"></i></span>
+            <span>扩展功能</span>
+          </a>
+        </li>
+        <li class="console-sidebar-item" style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e5e5;">
+          <a href="#" class="console-sidebar-link disabled">
+            <span class="console-sidebar-icon"><i class="fas fa-globe-americas"></i></span>
+            <span>环境管理</span>
+          </a>
+        </li>
+      </ul>
+    </aside>
+    
+    <!-- Main Content -->
+    <main class="console-content">
+      <div style="display: flex; gap: 24px;">
+        <!-- Left Sub Navigation -->
+        <div style="width: 200px; background: #fff; border-radius: 4px; padding: 16px; height: fit-content;">
+          <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #333;">接入</div>
+          <div style="padding: 8px 12px; background: #e6f7ff; color: #1890ff; border-radius: 4px; margin-bottom: 8px; font-size: 14px; font-weight: 500;">快速开始</div>
+          <div style="font-size: 14px; font-weight: 600; margin-top: 24px; margin-bottom: 12px; color: #333;">管理</div>
+          <div style="padding: 8px 12px; color: #666; margin-bottom: 4px; font-size: 14px; cursor: pointer;">数据看板</div>
+          <div style="padding: 8px 12px; color: #666; margin-bottom: 4px; font-size: 14px; cursor: pointer;">用户管理</div>
+          <div style="padding: 8px 12px; color: #666; margin-bottom: 4px; font-size: 14px; cursor: pointer;">组织架构</div>
+          <div style="padding: 8px 12px; color: #666; margin-bottom: 4px; font-size: 14px; cursor: pointer;">权限控制</div>
+          <div style="font-size: 14px; font-weight: 600; margin-top: 16px; margin-bottom: 12px; color: #333;">配置</div>
+          <div style="padding: 8px 12px; color: #666; margin-bottom: 4px; font-size: 14px; cursor: pointer;">登录方式</div>
+          <div style="padding: 8px 12px; color: #666; margin-bottom: 4px; font-size: 14px; cursor: pointer;">Token</div>
+          <div style="padding: 8px 12px; color: #666; margin-bottom: 4px; font-size: 14px; cursor: pointer;">登录页</div>
+          <div style="padding: 8px 12px; color: #666; margin-bottom: 4px; font-size: 14px; cursor: pointer;">多因素认证</div>
+        </div>
+        
+        <!-- Right Content -->
+        <div style="flex: 1;">
+          <div style="background: #fff; padding: 24px; border-radius: 4px;">
+            <div style="font-size: 16px; font-weight: 600; margin-bottom: 24px;">快速开始</div>
+            
+            <div style="margin-bottom: 32px;">
+              <div style="font-size: 14px; font-weight: 600; margin-bottom: 16px;">选择开发语言：</div>
+              <div class="auth-language-selector">
+                <div class="auth-language-option active">
+                  <div style="font-size: 20px; margin-bottom: 4px; color: #f7df1e;"><i class="fab fa-js"></i></div>
+                  <div style="font-size: 12px;">Javascript</div>
+                </div>
+                <div class="auth-language-option">
+                  <div style="font-size: 20px; margin-bottom: 4px; color: #42b883;"><i class="fab fa-vuejs"></i></div>
+                  <div style="font-size: 12px;">Vue</div>
+                </div>
+                <div class="auth-language-option">
+                  <div style="font-size: 20px; margin-bottom: 4px; color: #61dafb;"><i class="fab fa-react"></i></div>
+                  <div style="font-size: 12px;">React</div>
+                </div>
+                <div class="auth-language-option">
+                  <div style="font-size: 20px; margin-bottom: 4px; color: #339933;"><i class="fab fa-node-js"></i></div>
+                  <div style="font-size: 12px;">Node.js</div>
+                </div>
+                <div class="auth-language-option">
+                  <div style="font-size: 20px; margin-bottom: 4px; color: #f89820;"><i class="fab fa-java"></i></div>
+                  <div style="font-size: 12px;">Java</div>
+                </div>
+                <div class="auth-language-option">
+                  <div style="font-size: 20px; margin-bottom: 4px; color: #3776ab;"><i class="fab fa-python"></i></div>
+                  <div style="font-size: 12px;">Python</div>
+                </div>
+                <div class="auth-language-option">
+                  <div style="font-size: 20px; margin-bottom: 4px; color: #07c160;"><i class="fab fa-weixin"></i></div>
+                  <div style="font-size: 12px;">微信小程序/小游戏</div>
+                </div>
+              </div>
+            </div>
+            
+            <div style="margin-top: 32px;">
+              <div style="font-size: 14px; font-weight: 600; margin-bottom: 16px;">添加示例代码到您的应用程序</div>
+              <div style="margin-bottom: 16px;">
+                <button class="ai-dev-button" data-scenario="integrate-auth" style="font-size: 13px; padding: 8px 16px;">
+                  <div class="ai-dev-button-left">
+                    <span>使用 AI 集成登录功能</span>
+                  </div>
+                  <svg class="ai-dev-button-arrow" width="10" height="10" viewBox="0 0 12 12" fill="none">
+                    <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </button>
+              </div>
+              
+              <div style="margin-top: 24px;">
+                <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">步骤 1：引入依赖</div>
+                <div style="background: #f5f5f5; padding: 12px; border-radius: 4px; font-family: monospace; font-size: 13px; margin-bottom: 16px;">
+                  &lt;script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.full.js?v=1"&gt;&lt;/script&gt;
+                </div>
+              </div>
+              
+              <div style="margin-top: 24px;">
+                <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">步骤 2：初始化</div>
+                <div style="background: #f5f5f5; padding: 12px; border-radius: 4px; font-family: monospace; font-size: 13px;">
+                  &lt;script&gt;<br>
+                  const app = cloudbase.init({<br>
+                  &nbsp;&nbsp;env: "tcb-advanced-a656fc",<br>
+                  &nbsp;&nbsp;region: "ap-shanghai",<br>
+                  });<br>
+                  window.app = app;<br>
+                  &lt;/script&gt;
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+  
+  <script src="js/scenarios.js"></script>
+  <script src="js/panel.js"></script>
+</body>
+</html>