feat(docs): 📹 integrate tutorials component and update resource links

- Add TutorialsGrid component to index and getting-started pages
- Update RelatedResources component with tutorials link
- Simplify README resource links to point to docs site
- Move tutorials section before workflow diagram in index
- Replace individual tutorial links with unified docs links

Author: binggg

README-ZH.md

@@ -334,15 +334,14 @@ CodeBuddy 已内置 CloudBase MCP，无需配置即可使用。
 
 ## 🧩 MCP 工具
 
-**39 个工具**覆盖环境管理、数据库、云函数、静态托管、小程序发布等核心功能。
+覆盖环境管理、数据库、云函数、静态托管等核心功能。
 
 | 分类 | 工具 | 核心功能 |
 |------|------|----------|
 | **环境** | 4 个 | 登录认证、环境查询、域名管理 |
 | **数据库** | 11 个 | 集合管理、文档 CRUD、索引、数据模型 |
 | **云函数** | 9 个 | 创建、更新、调用、日志、触发器 |
 | **静态托管** | 5 个 | 文件上传、域名配置、网站部署 |
-| **小程序** | 7 个 | 上传、预览、构建、配置、调试 |
 | **工具支持** | 4 个 | 模板、知识库搜索、联网搜索、交互对话 |
 
 [查看完整工具文档](doc/mcp-tools.md) | [工具规格 JSON](scripts/tools.json)
@@ -352,31 +351,19 @@ CodeBuddy 已内置 CloudBase MCP，无需配置即可使用。
 ### 文档
 
 - [快速开始](https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/getting-started)
-- [IDE 配置指南](https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/ide-setup/)
+- [IDE 配置指南](https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/ide-setup/cursor)
 - [项目模板](https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/templates)
 - [开发指南](https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/development)
 - [插件系统](https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/plugins)
 - [常见问题](https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/faq)
 
 ### 教程
 
-#### 文章
-- [用 CloudBase AI CLI 开发邻里闲置物品循环利用小程序](https://docs.cloudbase.net/practices/ai-cli-mini-program)
-- [使用 CodeBuddy IDE + CloudBase 一站式开发卡片翻翻翻游戏](https://mp.weixin.qq.com/s/2EM3RBzdQUCdfld2CglWgg)
-- [1小时开发微信小游戏《我的早餐店》](https://cloud.tencent.com/developer/article/2532595)
-- [更多教程...](https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/tutorials)
-
-#### 视频
-- [云开发CloudBase：用AI开发一款分手厨房小游戏](https://www.bilibili.com/video/BV1v5KAzwEf9/)
-- [软件3.0：AI 编程新时代的最佳拍档](https://www.bilibili.com/video/BV15gKdz1E5N/)
-- [更多视频...](https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/tutorials)
+- [查看所有教程和视频...](https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/tutorials)
 
 ### 项目案例
 
-- [五子棋联机游戏](https://github.com/TencentCloudBase/awesome-cloudbase-examples/tree/master/web/gomoku-game)
-- [分手厨房联机游戏](https://github.com/TencentCloudBase/awesome-cloudbase-examples/tree/master/web/overcooked-game)
-- [电商管理后台](https://github.com/TencentCloudBase/awesome-cloudbase-examples/tree/master/web/ecommerce-management-backend)
-- [更多案例...](https://github.com/TencentCloudBase/awesome-cloudbase-examples)
+- [查看所有项目案例...](https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/examples)
 
 ## 💬 社区
 

README.md

@@ -336,7 +336,7 @@ CodeBuddy 已内置 CloudBase MCP，无需配置即可使用。
 
 ## 🧩 MCP 工具
 
-**39 个工具**覆盖环境管理、数据库、云函数、静态托管、小程序发布等核心功能。
+覆盖环境管理、数据库、云函数、静态托管、小程序发布等核心功能。
 
 | 分类 | 工具 | 核心功能 |
 |------|------|----------|

doc/components/IDESelector.tsx

@@ -32,7 +32,7 @@ const IDES: IDE[] = [
     iconSlug: 'cursor',
     docUrl: 'https://docs.cursor.com/context/model-context-protocol#configuration-locations',
     supportsProjectMCP: true,
-    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则',
+    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则到当前项目',
     configExample: `{
   "mcpServers": {
     "cloudbase": {
@@ -55,7 +55,7 @@ const IDES: IDE[] = [
     supportsProjectMCP: true,
     cliCommand: 'claude mcp add --transport stdio cloudbase --env INTEGRATION_IDE=ClaudeCode -- npx @cloudbase/cloudbase-mcp@latest',
     alternativeConfig: 'Alternatively, add this configuration to .mcp.json:',
-    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则',
+    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则到当前项目',
     configExample: `{
   "mcpServers": {
     "cloudbase": {
@@ -77,7 +77,7 @@ const IDES: IDE[] = [
     docUrl: 'https://www.codebuddy.ai/docs/zh/ide/Config%20MCP',
     supportsProjectMCP: true,
     alternativeConfig: 'Alternatively, add this configuration to',
-    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则',
+    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则到当前项目',
     configExample: `{
   "mcpServers": {
     "cloudbase": {
@@ -100,7 +100,7 @@ const IDES: IDE[] = [
     supportsProjectMCP: true,
     cliCommand: 'codebuddy mcp add --scope project cloudbase --env INTEGRATION_IDE=CodeBuddyCode -- npx @cloudbase/cloudbase-mcp@latest',
     alternativeConfig: 'Alternatively, add this configuration to .mcp.json:',
-    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则',
+    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则到当前项目',
     configExample: `{
   "mcpServers": {
     "cloudbase": {
@@ -122,7 +122,7 @@ const IDES: IDE[] = [
     iconUrl: 'https://code.visualstudio.com/favicon.ico',
     docUrl: 'https://code.visualstudio.com/docs/copilot/chat/mcp-servers',
     supportsProjectMCP: true,
-    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则',
+    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则到当前项目',
     configExample: `{
   "servers": {
     "cloudbase": {
@@ -220,7 +220,7 @@ const IDES: IDE[] = [
     useCommandInsteadOfConfig: true,
     installCommand: 'codex mcp add cloudbase --env INTEGRATION_IDE=CodeX -- cloudbase-mcp',
     installCommandDocs: '**前置步骤：** 请先全局安装 CloudBase MCP 工具：\n```bash\nnpm i @cloudbase/cloudbase-mcp -g\n```\n\n根据运行系统在终端中运行指令：\n\n**MacOS, Linux, WSL:**\n```bash\ncodex mcp add cloudbase --env INTEGRATION_IDE=CodeX -- cloudbase-mcp\n```\n\n**Windows Powershell:**\n```bash\ncodex mcp add cloudbase --env INTEGRATION_IDE=CodeX -- cmd /c cloudbase-mcp\n```',
-    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则',
+    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则到当前项目',
     configExample: `{
   "mcpServers": {
     "cloudbase": {
@@ -316,7 +316,7 @@ const IDES: IDE[] = [
     iconUrl: 'https://g.alicdn.com/qbase/qoder/0.0.183/favIcon.svg',
     docUrl: 'https://docs.qoder.com/zh/user-guide/chat/model-context-protocol',
     supportsProjectMCP: false,
-    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则',
+    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则到当前项目',
     configExample: `{
   "mcpServers": {
     "cloudbase": {
@@ -337,7 +337,7 @@ const IDES: IDE[] = [
     iconUrl: 'https://antigravity.google/assets/image/antigravity-logo.png',
     docUrl: 'https://antigravity.google/docs',
     supportsProjectMCP: true,
-    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则',
+    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则到当前项目',
     configExample: `{
   "mcpServers": {
     "cloudbase": {
@@ -358,7 +358,7 @@ const IDES: IDE[] = [
     iconSlug: 'windsurf',
     docUrl: 'https://docs.windsurf.com/windsurf/cascade/memories',
     supportsProjectMCP: true,
-    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则',
+    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则到当前项目',
     configExample: `{
   "mcpServers": {
     "cloudbase": {
@@ -405,7 +405,7 @@ const IDES: IDE[] = [
     useCommandInsteadOfConfig: true,
     installCommand: 'npm i -g @cloudbase/cli',
     installCommandDocs: '**安装 CloudBase CLI：**\n\n```bash\nnpm i -g @cloudbase/cli\n```\n\n**初始化配置：**\n\n```bash\ntcb ai\n```\n\n配置向导会引导你完成 AI 工具的配置。CloudBase CLI 内置了 MCP 和 AI 开发规则，无需手动配置。\n\n**开始使用：**\n\n```bash\ntcb ai\n```',
-    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则',
+    verificationPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则到当前项目',
     configExample: '',
   },
 ];
@@ -479,7 +479,7 @@ const translations: Record<string, Record<string, string>> = {
     orAddConfig: '将以下配置添加到',
     step2Verify: '步骤 2：验证连接',
     verifyDescription: '配置完成后，在 AI 对话中输入以下内容验证',
-    defaultVerifyPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则',
+    defaultVerifyPrompt: '检查 CloudBase 工具是否可用, 下载 CloudBase AI 开发规则到当前项目',
     cliCommand: 'CLI 命令',
     alternativeConfig: '替代配置',
     needHelp: '需要帮助？',

doc/components/RelatedResources.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import Link from '@docusaurus/Link';
+import React from 'react';
 import styles from './RelatedResources.module.css';
 
 interface RelatedResourcesProps {
@@ -12,6 +12,10 @@ export default function RelatedResources({ ideName, ideDocUrl }: RelatedResource
     <div className={styles.container}>
       <h2 className={styles.title}>相关资源</h2>
       <ul className={styles.list}>
+        <li>
+          <Link to="/ai/cloudbase-ai-toolkit/tutorials">视频教程</Link>
+          <span className={styles.description}> - 观看视频教程和实战案例</span>
+        </li>
         <li>
           <Link to="/ai/cloudbase-ai-toolkit/development">开发指南</Link>
           <span className={styles.description}> - 深入了解开发最佳实践</span>

doc/components/TutorialsGrid.module.css

@@ -25,6 +25,102 @@
   gap: 1.25rem;
 }
 
+.videoGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.videoCard {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 8px;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  background: var(--ifm-background-surface-color);
+  overflow: hidden;
+}
+
+.videoCard:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  text-decoration: none;
+  transform: translateY(-2px);
+}
+
+.thumbnailWrapper {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%; /* 16:9 aspect ratio */
+  background: var(--ifm-color-emphasis-100);
+  overflow: hidden;
+}
+
+.thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.videoCard:hover .thumbnail {
+  transform: scale(1.05);
+}
+
+.playIcon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 56px;
+  height: 56px;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 20px;
+  transition: all 0.3s ease;
+  pointer-events: none;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  padding-left: 3px; /* Adjust play icon position */
+}
+
+.videoCard:hover .playIcon {
+  background: rgba(0, 0, 0, 0.85);
+  transform: translate(-50%, -50%) scale(1.15);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.videoContent {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.videoTitle {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--ifm-font-color-base);
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.videoDescription {
+  font-size: 0.8125rem;
+  color: var(--ifm-color-emphasis-600);
+  line-height: 1.4;
+}
+
 .card {
   display: flex;
   flex-direction: column;
@@ -82,17 +178,33 @@
   .grid {
     grid-template-columns: 1fr;
   }
+
+  .videoGrid {
+    grid-template-columns: 1fr;
+  }
 
   .card {
     padding: 0.875rem;
   }
+
+  .videoContent {
+    padding: 0.875rem;
+  }
 
   .title {
     font-size: 0.875rem;
   }
+
+  .videoTitle {
+    font-size: 0.875rem;
+  }
 
   .description {
     font-size: 0.75rem;
   }
+
+  .videoDescription {
+    font-size: 0.75rem;
+  }
 }