CodeBuddy + 腾讯云ClouaseAI编程实战

一、课程准备与环境搭建

在开始项目开发之前，确保你的环境已准备就绪。

1.课程所需准备

准备项	说明
Node.js	必须安装，用于运行 JavaScript 环境。
CodeBuddy IDE	腾讯自家的 AI 编程 IDE，本课程核心工具。
腾讯云 CloudBase	开通云开发环境，用于后端开发、数据库、存储及部署。
DeepSeek API Key	注册 DeepSeek 开放平台，获取 API Key 用于 AI 对话功能。

2.初始化项目结构

新建项目文件夹：bilibili-analysisi
使用 CodeBuddy 打开该项目文件夹。
创建基础文件和目录结构：
1. scripts/index.js (爬虫脚本文件)
2. dist/ 目录
3. dist/images/ 目录 (存放封面图)
4. data.json (存放爬取到的原始数据)

二、爬取 B 站数据并导入 CloudBase

1.使用 CodeBuddy 编写爬虫脚本

由于爬虫的复杂性，我们将利用 CodeBuddy 的 AI 能力，结合 Puppeteer 工具库来抓取 B 站的公开搜索数据。

💡 关键上下文： 在向 AI 提问前，你需要在项目中准备好 B 站搜索结果页面的链接规则和视频卡片的 HTML 代码片段作为上下文，以便 AI 准确理解数据结构。

核心 AI 提示词（对 scripts/index.js 文件）：

请你在 @index.js 中帮我编写一个爬虫脚本，基于Puppeteer，能够获取对应的B站指定搜索的的内容。链接规则如下：
{链接规则}

同时每个卡片的数据中有封面图、播放数量、弹幕数量、视频时长、标题、up主、发布时间。

卡片的示例数据如下：
```
{卡片的代码}
```

注意，播放数据可能会显示`6.5万`，这个时候需要自动转换成为`65000`，同时时间有可能显示`16小时前`、`11-20`或者`刚刚`，时间都应该转换成具体的时间戳格式。

获取前100调数据保存 @data.json 。

封面图的链接需要自己转换成图片保存在 @images 中，并且 @data.json 中的封面图使用对应文件名

我希望返回的数据结构：
{
    "name": "gemini3-202511251118",
    "createTime": ""
    "data": []
}

链接规则参考：

第一页的链接为：https://search.bilibili.com/all?keyword=Gemini3
第二页的链接为：https://search.bilibili.com/all?keyword=Gemini3&page=2&o=36
第三页的链接为：https://search.bilibili.com/all?keyword=Gemini3&page=3&o=72
第四页的链接为：https://search.bilibili.com/all?keyword=Gemini3&page=4&o=108

卡片的代码参考

<div data-v-25cd9b35="" class="video-list-item col_3 col_xs_1_5 col_md_2 col_xl_1_7 mb_x40"><div data-v-37adbc26="" data-v-25cd9b35="" class="bili-video-card"><div data-v-37adbc26="" class="bili-video-card__skeleton hide"><div class="bili-video-card__skeleton--cover" data-v-37adbc26=""></div><div class="bili-video-card__skeleton--info" data-v-37adbc26=""><div class="bili-video-card__skeleton--right" data-v-37adbc26=""><p class="bili-video-card__skeleton--text" data-v-37adbc26=""></p><p class="bili-video-card__skeleton--text short" data-v-37adbc26=""></p><p class="bili-video-card__skeleton--light" data-v-37adbc26=""></p></div></div></div><div data-v-37adbc26="" class="bili-video-card__wrap"><div data-v-37adbc26="" class="bili-video-card__no-interest" style="display: none;"><div data-v-37adbc26="" class="bili-video-card__no-interest--inner"><div data-v-37adbc26="" class="bili-video-card__no-interest--left"><svg data-v-37adbc26="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36" width="36" height="36" class="no-interest-icon" fill="currentColor"><path d="M3 18C3 9.715724999999999 9.715724999999999 3 18 3C26.284274999999997 3 33 9.715724999999999 33 18C33 26.284274999999997 26.284274999999997 33 18 33C9.715724999999999 33 3 26.284274999999997 3 18zM12.796710000000001 12.694004999999999C12.358049999999999 12.253995 11.645745 12.2529 11.205735 12.691575C10.765709999999999 13.130234999999999 10.764615 13.842555 11.20329 14.282565000000002L13.41144 16.494975L11.20329 18.7074C10.764615 19.147350000000003 10.765709999999999 19.8597 11.205735 20.298375C11.645745 20.73705 12.358049999999999 20.735925 12.796710000000001 20.295975L15.2682 17.81895C15.99795 17.087175000000002 15.99795 15.902775000000002 15.2682 15.17097L12.796710000000001 12.694004999999999zM24.794325 12.691575C24.354300000000002 12.2529 23.64195 12.253995 23.203274999999998 12.694004999999999L20.7318 15.17097C20.00205 15.902775000000002 20.00205 17.087175000000002 20.7318 17.81895L23.203274999999998 20.295975C23.64195 20.735925 24.354300000000002 20.73705 24.794325 20.298375C25.234274999999997 19.8597 25.2354 19.147350000000003 24.796725000000002 18.7074L22.588575 16.494975L24.796725000000002 14.282565000000002C25.2354 13.842555 25.234274999999997 13.130234999999999 24.794325 12.691575zM15.900974999999999 24.68535C16.843875 23.425575000000002 17.722649999999998 23.257199999999997 18 23.257199999999997C18.277350000000002 23.257199999999997 19.15605 23.425575000000002 20.099025 24.68535C20.471024999999997 25.182975 21.176025 25.284675 21.67365 24.912675C22.171274999999998 24.540599999999998 22.273049999999998 23.8356 21.900975 23.33805C20.5938 21.591 19.082024999999998 21.007199999999997 18 21.007199999999997C16.917900000000003 21.007199999999997 15.406125 21.591 14.09898 23.33805C13.72692 23.8356 13.82871 24.540599999999998 14.326305 24.912675C14.823929999999999 25.284675 15.5289 25.182975 15.900974999999999 24.68535z" fill="currentColor"></path></svg><span data-v-37adbc26="" class="no-interest-title">反馈成功</span><span data-v-37adbc26="" class="no-interest-desc">平台将做相应处理</span></div><div data-v-37adbc26="" class="bili-video-card__no-interest--right"><div data-v-37adbc26="" class="revert-btn"><svg data-v-37adbc26="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" class="revert-icon" fill="currentColor"><path d="M8.28032 2.46967C8.57321 2.76257 8.57321 3.23744 8.28032 3.53033L4.81065 7L8.28032 10.46965C8.57321 10.76255 8.57321 11.23745 8.28032 11.53035C7.98743 11.8232 7.51254 11.8232 7.21966 11.53035L3.57321 7.88389C3.08505 7.39573 3.08505 6.60428 3.57321 6.11612L7.21966 2.46967C7.51254 2.17678 7.98743 2.17678 8.28032 2.46967z" fill="currentColor"></path><path d="M3.75 7C3.75 6.58579 4.08579 6.25 4.5 6.25L14.25 6.25C17.97795 6.25 21 9.27208 21 13C21 16.72795 17.97795 19.75 14.25 19.75L7.5 19.75C7.08579 19.75 6.75 19.4142 6.75 19C6.75 18.5858 7.08579 18.25 7.5 18.25L14.25 18.25C17.1495 18.25 19.5 15.8995 19.5 13C19.5 10.10052 17.1495 7.75 14.25 7.75L4.5 7.75C4.08579 7.75 3.75 7.41421 3.75 7z" fill="currentColor"></path></svg> 撤销 </div></div></div></div><a data-v-37adbc26="" href="//www.bilibili.com/video/BV1HzycBDED3/" class="" target="_blank" data-mod="search-card" data-idx="all" data-ext="click"><div data-v-37adbc26="" class="bili-video-card__image"><div data-v-37adbc26="" class="bili-video-card__image--wrap"><div class="bili-watch-later--wrap"><div class="bili-watch-later bili-watch-later--pip" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" width="20" height="20" fill="currentColor" class="bili-watch-later__icon"><path d="M10 3.1248000000000005C6.20305 3.1248000000000005 3.1250083333333336 6.202841666666667 3.1250083333333336 9.999833333333335C3.1250083333333336 13.796750000000001 6.20305 16.874833333333335 10 16.874833333333335C11.898291666666667 16.874833333333335 13.615833333333333 16.106291666666667 14.860625 14.861916666666666C15.104708333333335 14.617916666666666 15.500416666666668 14.617958333333334 15.7445 14.862041666666668C15.9885 15.106166666666669 15.988416666666668 15.501916666666666 15.744333333333334 15.745958333333334C14.274750000000001 17.215041666666668 12.243041666666667 18.124833333333335 10 18.124833333333335C5.512691666666667 18.124833333333335 1.8750083333333334 14.487125 1.8750083333333334 9.999833333333335C1.8750083333333334 5.512483333333334 5.512691666666667 1.8748000000000002 10 1.8748000000000002C14.487291666666668 1.8748000000000002 18.125 5.512483333333334 18.125 9.999833333333335C18.125 10.304458333333333 18.108208333333334 10.605458333333333 18.075458333333337 10.901791666666668C18.0375 11.244916666666667 17.728625 11.492291666666667 17.385583333333333 11.454333333333334C17.0425 11.416416666666667 16.795083333333334 11.107541666666668 16.833000000000002 10.764458333333334C16.860750000000003 10.513625000000001 16.875 10.2585 16.875 9.999833333333335C16.875 6.202841666666667 13.796958333333333 3.1248000000000005 10 3.1248000000000005z" fill="currentColor"></path><path d="M15.391416666666666 9.141166666666667C15.635458333333334 8.897083333333335 16.031208333333332 8.897083333333335 16.275291666666668 9.141166666666667L17.5 10.365875L18.72475 9.141166666666667C18.968791666666668 8.897083333333335 19.364541666666668 8.897083333333335 19.608625 9.141166666666667C19.852666666666668 9.385291666666667 19.852666666666668 9.780958333333334 19.608625 10.025083333333333L18.08925 11.544416666666669C17.763833333333334 11.869833333333334 17.236208333333334 11.869833333333334 16.91075 11.544416666666669L15.391416666666666 10.025083333333333C15.147333333333334 9.780958333333334 15.147333333333334 9.385291666666667 15.391416666666666 9.141166666666667z" fill="currentColor"></path><path d="M12.499333333333334 9.278375C13.05475 9.599 13.05475 10.400666666666668 12.499333333333334 10.721291666666668L9.373916666666666 12.525791666666668C8.818541666666667 12.846416666666666 8.124274999999999 12.445583333333333 8.124274999999999 11.804291666666668L8.124274999999999 8.1954C8.124274999999999 7.554066666666667 8.818541666666667 7.153233333333334 9.373916666666666 7.473900000000001L12.499333333333334 9.278375z" fill="currentColor"></path></svg><span class="bili-watch-later__tip" style="display: none;">稍后再看</span></div></div><picture data-v-37adbc26="" class="v-img bili-video-card__cover"><source srcset="//i0.hdslb.com/bfs/archive/2cfda33f8ccdabbc7314c7a1d4a117a897fe1aa2.jpg@672w_378h_1c_!web-search-common-cover.avif" type="image/avif"><source srcset="//i0.hdslb.com/bfs/archive/2cfda33f8ccdabbc7314c7a1d4a117a897fe1aa2.jpg@672w_378h_1c_!web-search-common-cover.webp" type="image/webp"><img src="//i0.hdslb.com/bfs/archive/2cfda33f8ccdabbc7314c7a1d4a117a897fe1aa2.jpg@672w_378h_1c_!web-search-common-cover" alt="Gemini 3屠榜｜曾经期待的GPT-5，Google全做出来了！" loading="lazy" onload="firstVideoCardImgLoaded()" onerror="typeof window.imgOnError === 'function' &amp;&amp; window.imgOnError(this)"></picture><div class="v-inline-player"></div></div><div data-v-37adbc26="" class="bili-video-card__mask"><div data-v-37adbc26="" class="bili-video-card__stats"><div data-v-37adbc26="" class="bili-video-card__stats--left"><span data-v-37adbc26="" class="bili-video-card__stats--item"><svg data-v-37adbc26="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="#ffffff" class="bili-video-card__stats--icon"><path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path><path d="M14.7138 10.96875C15.50765 11.4271 15.50765 12.573 14.71375 13.0313L11.5362 14.8659C10.74235 15.3242 9.75 14.7513 9.75001 13.8346L9.75001 10.1655C9.75001 9.24881 10.74235 8.67587 11.5362 9.13422L14.7138 10.96875z" fill="currentColor"></path></svg><span data-v-37adbc26="">6.5万</span></span><span data-v-37adbc26="" class="bili-video-card__stats--item"><svg data-v-37adbc26="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" class="bili-video-card__stats--icon"><path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path><path d="M15.875 10.75L9.875 10.75C9.46079 10.75 9.125 10.4142 9.125 10C9.125 9.58579 9.46079 9.25 9.875 9.25L15.875 9.25C16.2892 9.25 16.625 9.58579 16.625 10C16.625 10.4142 16.2892 10.75 15.875 10.75z" fill="currentColor"></path><path d="M17.375 14.75L11.375 14.75C10.9608 14.75 10.625 14.4142 10.625 14C10.625 13.5858 10.9608 13.25 11.375 13.25L17.375 13.25C17.7892 13.25 18.125 13.5858 18.125 14C18.125 14.4142 17.7892 14.75 17.375 14.75z" fill="currentColor"></path><path d="M7.875 10C7.875 10.4142 7.53921 10.75 7.125 10.75L6.625 10.75C6.21079 10.75 5.875 10.4142 5.875 10C5.875 9.58579 6.21079 9.25 6.625 9.25L7.125 9.25C7.53921 9.25 7.875 9.58579 7.875 10z" fill="currentColor"></path><path d="M9.375 14C9.375 14.4142 9.03921 14.75 8.625 14.75L8.125 14.75C7.71079 14.75 7.375 14.4142 7.375 14C7.375 13.5858 7.71079 13.25 8.125 13.25L8.625 13.25C9.03921 13.25 9.375 13.5858 9.375 14z" fill="currentColor"></path></svg><span data-v-37adbc26="">109</span></span></div><span data-v-37adbc26="" class="bili-video-card__stats__duration">51:22</span></div></div></div></a><div data-v-37adbc26="" class="bili-video-card__info"><!----><div data-v-37adbc26="" class="bili-video-card__info--right"><a data-v-37adbc26="" href="//www.bilibili.com/video/BV1HzycBDED3/" target="_blank" data-mod="search-card" data-idx="all" data-ext="click"><h3 data-v-37adbc26="" class="bili-video-card__info--tit" title="Gemini 3屠榜｜曾经期待的GPT-5，Google全做出来了！"><em class="keyword">Gemini</em> <em class="keyword">3</em>屠榜｜曾经期待的GPT-5，Google全做出来了！</h3></a><!----><div data-v-37adbc26="" class="bili-video-card__info--bottom"><a data-v-37adbc26="" class="bili-video-card__info--owner" href="//space.bilibili.com/491787323" target="_blank" data-mod="search-card" data-idx="all" data-ext="click"><svg data-v-37adbc26="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" class="bili-video-card__info--author-ico mr_2"><path d="M6.15 8.24805C6.5642 8.24805 6.9 8.58383 6.9 8.99805L6.9 12.7741C6.9 13.5881 7.55988 14.248 8.3739 14.248C9.18791 14.248 9.8478 13.5881 9.8478 12.7741L9.8478 8.99805C9.8478 8.58383 10.1836 8.24805 10.5978 8.24805C11.012 8.24805 11.3478 8.58383 11.3478 8.99805L11.3478 12.7741C11.3478 14.41655 10.01635 15.748 8.3739 15.748C6.73146 15.748 5.4 14.41655 5.4 12.7741L5.4 8.99805C5.4 8.58383 5.73578 8.24805 6.15 8.24805z" fill="currentColor"></path><path d="M12.6522 8.99805C12.6522 8.58383 12.98795 8.24805 13.4022 8.24805L15.725 8.24805C17.31285 8.24805 18.6 9.53522 18.6 11.123C18.6 12.71085 17.31285 13.998 15.725 13.998L14.1522 13.998L14.1522 14.998C14.1522 15.4122 13.8164 15.748 13.4022 15.748C12.98795 15.748 12.6522 15.4122 12.6522 14.998L12.6522 8.99805zM14.1522 12.498L15.725 12.498C16.4844 12.498 17.1 11.8824 17.1 11.123C17.1 10.36365 16.4844 9.74804 15.725 9.74804L14.1522 9.74804L14.1522 12.498z" fill="currentColor"></path><path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path></svg><span data-v-37adbc26="" class="bili-video-card__info--author">叫我小苏就好啊</span><span data-v-37adbc26="" class="bili-video-card__info--date"> · 11-20</span></a></div></div></div></div></div></div>


1. 优先使用GPT5.1-Codex，如果不行可以尝试重新使用Default的模型，也很好用。
2. 如果调试遇到问题，建议让AI继续优化，注意需要给到AI对应的问题报错，以及错误现象。
3. 如果还是不行，可以直接使用文档最后的源代码，直接下载进行接下来的操作

2.数据与图片上传到 CloudBase

**上传图片到云存储：**相当于阿里的oss，华为云的obs
1. 进入腾讯 CloudBase 控制台，新建环境。
2. 进入云存储，创建 covers 存储桶。
3. 重要： 设置 covers 存储桶的访问权限。
4. 将爬虫脚本生成的所有图片批量上传到 covers 存储桶。
上传数据到云数据库：
1. 进入云数据库，新建集合：bilibili-data。
2. 点击“导入”，将爬虫生成的 data.json 文件导入到该集合中。

三、实现管理后台基础功能

本课程使用 Next.js 作为全栈框架。

1初始化 Next.js 项目并连接 CloudBase

进入Next.js官网，复制首页命令
在项目根目录运行命令初始化 Next.js 项目（例如：npx create-next-app bilibili-web）。
用 CodeBuddy 打开 bilibili-web 文件夹。
使用 CodeBuddy 连接腾讯 CloudBase 环境。

CodeBuddy 亮点： CodeBuddy 会自动获取你的环境 ID，并配置好 CloudBase 的 SDK 连接。

2.编写数据预览管理后台

使用 CodeBuddy 的 AI 能力，生成基础的管理后台页面。

核心 AI 提示词：

请你帮我编写一个简单的管理后台，左侧是侧边栏，右侧是对应的主体内容。目前左侧只保留一个数据源的侧边栏，选中后，右侧的主体内容能够获取数据库中的bilibili-data的数据。并且渲染所有数据。

3.实现用户登录功能

基于 CloudBase 的身份认证能力实现后台登录，限制只有登录用户才能访问数据。

核心 AI 提示词（实现用户密码登录）：

1
2
3

请你基于Cloudbase的身份认证能力，完成该管理后台的用户登陆功能，实现用户和密码登陆功能。如果用户没有登陆，应该自动跳转登陆页面。

登陆成功后，侧边栏底部应该显示用户昵称和退出登陆按钮

四、开发 AI 对话与数据仪表盘功能

1.优化主页和详情页布局UI

首先我们来优化主页的UI布局，我们会使用到给CodeBuddy截图 + 使用Plan模式。首先复制下面的截图到CodeBuddy的对话框中。

然后输入提示词:

目前首页的布局有点问题，因为我获取的多个项目都是平铺展示的，我希望优化一下。请你参考截图实现如下的优化：
1. 左侧侧边栏展示项目名称，使用`bilibili-data`集合中的`name`字段
2. 右侧主体内容同样是项目名称，根据`name`分标题展示。一行最多7个视频内容，然后最右侧有一个右键头按钮。
3. 点击侧边栏的项目名称或者是右键头按钮，就新打开项目页面，带上项目id
4. 右侧主题内容的项目名称有编辑icon，用户点击后，可以修改项目名称

不要完全模仿图片的内容，只是模仿它的布局

并开启计划模式，这样的任务完成度会更高

等待AI执行完成后进行测试，除了测试UI布局，还需要测试刚才提示词中的修改项目名称的功能：

如果出现没有办法修改项目名称的bug以及报错，大概率是因为集合当中的权限设置。为了让已登录用户能够修改项目名称等数据，你需要修改数据库权限，你可以通过两种方式修改：

在【集合管理】-【权限设置】中修改

2.直接在 CodeBuddy 当中输入下面的提示词。

1	请你将bilibili-data的这个集合的读写权限，都设置为只要用户登陆，就可以进行读写。

2.完成AI功能的前端

输入下面的提示词，完成点击视频卡片后，进入具体项目的AI对话 + 仪表盘的前端部分。

优化项目详情页的页面样式，顶部有两个Tab，居中显示。一个是AI对话，一个是仪表盘，点击后下方的内容发生变化。

我们先来完成AI对话功能：
1. 左侧3/4的区域是展示该项目的所有视频卡片
2. 右侧1/4的区域是一个AI对话功能，能够和AI实现对话

AI对话目前使用mock数据就好，只完成交互，不用先接入真实接口。

如果顺利，会生成类似的前端样式

3.准备 DeepSeek API 上下文

在项目根目录创建 .env.local 文件，配置你的 API Key：

1	DEEPSEEK_API_KEY=sk-xxxxxxx

为了帮助 CodeBuddy 接入 DeepSeek Node.js SDK，将 DeepSeek 的 API 文档示例代码（Node.js SDK 示例和多轮对话逻辑）分别保存为：

docs/deepseek-api.md：对应问答零
docs/multi-round-chat.md

4.实现 AI 对话功能（DeepSeek 接入）

在项目详情页 (app/projects/[id]/page.tsx) 中添加 AI 对话和仪表盘两个 Tab，并实现 AI 对话逻辑。

核心 AI 提示词（后端接口 + DeepSeek 接入）：

请你参考 @docs/deepseek-api.md 上面的代码，给 @app/projects/[id]/page.tsx 的右侧AI对话接入deepseek，实现真实的AI对话功能，要求：

1. 前端需要在对话的时候，上传该项目id。根据项目id，系统提示词中需要在后端加载这个项目中的视频数据，确保AI知道这个项目的完整信息（排除掉封面图等信息，其余字段保留）。

2. 这是一个能够协助我分析该视频主题数据，并且一起创作热门标题的AI设定。请你认真创作这个包含视频数据的AI系统提示词。

3. 需要采用流式输出。

4. 确保能够实现多轮对话。可以参考 @docs/multi-round-chat.md 的示例代码，示例代码是python的，需要修改成为node.js的.

初次运行会有报错。因为权限问题，node sdk无法获取对应的数据，没有提供对应的密钥。我们需要提供对应的密钥。参考腾讯云CloudBase Node.js SDK API参考

获取是在腾讯云的API密钥管理中,获取后添加对应的环境变量

需要你在.env.local文件中新增3个环境变量：

CLOUDBASE_ENV_ID：腾讯云CloudBase的环境ID
CLOUDBASE_SECRET_ID：腾讯云的SecretId
CLOUDBASE_SECRET_KEY：腾讯云的SecretKey

现在文件中所有环境变量如下:

DEEPSEEK_API_KEY=
CLOUDBASE_ENV_ID=
CLOUDBASE_SECRET_ID=
CLOUDBASE_SECRET_KEY=

再进行测试，对应的调用DeepSeek能力就有了

优化 Markdown 渲染：

1	请你使用一个优秀的开源markdown库去帮我们实现markdown的渲染。避免在AI对话助手当中出现markdown的符号。

5.实现数据仪表盘功能

利用 ECharts 等可视化库，实现视频数据统计仪表盘。

核心 AI 提示词（ECharts 仪表盘）：

利用 ECharts 等可视化库，实现视频数据统计仪表盘。

核心 AI 提示词（ECharts 仪表盘）：

现在帮我完成 @app/projects/[id]/page.tsx 的仪表盘tab下的内容，  清空现有的仪表盘内容，要求实现以下内容：
1. 播放量排行（Top20）:  列表方式实现，有封面缩略图、标题、播放量
2. 最新视频排行（Top20）：列表方式实现，有封面缩略图、标题、发布时间
3. 播放量分布：柱状图显示播放量分布情况
4. 视频时长分布：饼图显示
5. 词云图：标题中的热词，需要对单词进行拆分
6. 发布日期和播放量分布图：散点图，x轴是发布日期，y轴是播放，同时鼠标移动上去需要显示视频标题

图表使用echarts实现