中国人自己的Cursor？腾讯CodeBuddy从零打造家庭相册_腾讯推出中国人自己的cursor-CSDN博客

中国人自己的Cursor？腾讯CodeBuddy从零打造家庭相册

大家好，我是星哥，作为一个二手的高级程序猿，五一出去游玩跟家人的照片想要做个一个web页面分享给家人，今天就用出品的腾讯云代码助手（CodeBuddy）一行代码都不用自己写，看能不能实现的我小愿望。

PS:我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

初识腾讯云代码助手（CodeBuddy）

腾讯自研的AI编程提效工具，凭借腾讯混元与 DeepSeek 混合模型，专为开发者打造。CodeBuddy不仅支持200+编程语言、兼容多种主流IDE，是国内首个支持 MCP 的代码助手，还为开发者提供开发智能体 Craft、智能代码补全、单元测试、代码诊断等多项高效功能，帮助开发者在编码过程中节省时间、提升效率。目前腾讯内部 85% 以上的开发者已使用 CodeBuddy，编码时间平均缩短 40% 以上，AI生成代码占比超四成，研发效率提升超 16%。

CodeBuddy兼容IDE

兼容 Visual Studio Code、Pycharm、Android Studio、鸿蒙DevEco Studio、Visual studio、cloudstudio 、微信开发者小程序工具、XCode等主流的集成开发环境。

CodeBuddy编程语言及框架

支持Java、Python、Go、C/C++、JavaScript、TypeScript、HTML、PHPRuby、Rust、Swift、Scala、Lua、 Dart、Node.JS、csS3 等200+种编程语言。

安装VS Code

下载地址：https://code.visualstudio.com/ ，点击“Download for Windows”下载，安装。

VSCode设置中文

点击扩展搜索“chinese”安装扩展，Chinese (Simplified) (简体中文) 的扩展。

1、打开 VSCode 软件，然后按住键盘上的“Ctrl+Shift+P”组合键，打开命令面板。

2、在命令面板中输入“Configure Display Language”，然后点击“Configure Display Language”选项。

3、在弹出的语言选择列表中，选择“zh-cn”，表示简体中文。

4、点击列表中的“Restart”按钮，重启 VSCode，就可以变成了中文。

安装腾讯云CodeBuddy

点击扩展，再搜索“CodeBuddy”，点击安装，既可安装。

另外的一种安装方式，直接访问官网 https://copilot.tencent.com/

点击“免费使用”，再点击再vscode中使用。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

点击左侧的扩展按钮

登录成功之后就可以使用Codebuddy了，这里我们可以看到

Codebuddy界面

craft 助手模式，直接操作代码和命令行，适合修改和生成。
chat 聊天模式，不修改代码，适合修复、解决问题和分析思路
Code Review 代码审查
Unit Test 单元测试

新建目录Photos

下面就可以开始规划做自己的家庭相册。

先在桌面新建一个空的文件夹“Photos”，以后的代码都放到这里目录里，再用vscode打开这个目录。

做一个产品经理

我需要做一个WEB家庭相册页面
存放五一假期出游的照片
功能
1.照片原始尺寸较大，首先展示缩略图，点击打开原图
2.在弹窗中打开原图，按键盘左右键实现查看上一张下一张图，按esc键可退出。

把这个需求直接丢给Craft，看看有什么神奇的事情发生。

给我回答了

这个任务需要创建一个简单的WEB家庭相册页面，主要功能包括：

展示照片缩略图
点击缩略图后以弹窗形式展示原图
支持键盘左右键切换图片和ESC键关闭弹窗

首先需要明确几个要点：

照片文件是否已经存在？需要先查看当前目录下是否有照片文件
需要创建HTML、CSS和JavaScript文件来实现功能
需要处理图片的缩略图生成问题

接下来步骤：

先查看当前目录下有哪些图片文件
根据图片文件创建相册页面
实现缩略图展示和弹窗功能
添加键盘事件处理

首先使用list_files工具查看当前目录下的图片文件，

当前目录为空，需要先获取照片文件才能创建相册。我需要向用户确认：

照片文件是否已经准备好？如果已准备好，需要知道照片存放在哪个目录
如果照片还未准备好，需要用户先上传照片到当前目录

由于当前目录为空，无法继续创建相册页面，需要用户提供照片文件

当前目录为空，无法创建相册。请问您的照片文件是否已经准备好？如果已准备好，请告知照片存放的目录路径；如果还未准备好，请先将照片上传到当前目录(e:\360data\重要数据\桌面\Photos)。

什么是Craft

CodeBuddy 的“王炸”功能：Craft (智能创建)，就是个超级智能的 Agent (智能体)。你把 Prompt 往里一扔，它就跟打了鸡血似的，开始“噼里啪啦”一顿操作：创建项目结构、生成核心代码、配置依赖……全程自动化，你就嗑着瓜子等着就行。

图片没有上传到目录中，我把图片再上传。

使用chat功能

把刚才的需求丢到chat里

经过一段时间的思考出了一个需求文档

一、核心功能要求

智能图片处理系统

采用thumbnail.js自动生成缩略图（建议尺寸：320x240）
图片预加载机制（相邻3张提前加载）
支持WebP格式自动转换（兼容性处理）

响应式相册布局

<div class="gallery-grid">
  <!-- 动态生成缩略图 -->
  <div class="thumb-card" v-for="(img, index) in images">
    <img :src="img.thumb" @click="openLightbox(index)">
    <div class="exif-info">{{ img.date | formatDate }}</div>
  </div>
</div>

智能灯箱组件

class Lightbox {
  constructor(images) {
    this.currentIndex = 0
    this.initKeyboardControls()
  }
  
  navigate(direction) {
    // 带缓动的图片切换动画
    // 实现LRU缓存策略提升性能
  }
}

二、交互增强方案

键盘控制体系

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') this.prevImage()
  if (e.key === 'ArrowRight') this.nextImage()
  if (e.key === 'Escape') this.close()
})

手势支持（移动端优化）

集成hammer.js实现滑动手势
双击缩放（1x/2x/适应屏幕）

三、性能优化建议

图片加载策略

实现Intersection Observer API懒加载
渐进式JPEG加载
加载状态骨架屏

缓存机制

Service Worker预缓存策略
IndexedDB本地存储原始图片
四、扩展功能建议

可视化过滤器

按地点/人物/场景类型分类
时间轴模式（地图轨迹集成）

社交功能

图片批注系统
分享组件（生成旅游故事）

五、技术栈推荐

视图层：Vue3 + Vuetify
状态管理：Pinia
构建工具：Vite

生成代码

index.html

点击修改，或者改成自动修改文件

<!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="style.css">
</head>
<body>
    <h1>家庭相册</h1>
    <div class="gallery">
        <div class="thumbnail" data-src="mamanainai-SS.png">
            <img src="mamanainai-SS.png" alt="家庭照片">
        </div>
        <div class="thumbnail" data-src="QQ图片20250328112327.png">
            <img src="QQ图片20250328112327.png" alt="家庭照片">
        </div>
        <div class="thumbnail" data-src="QQ图片20250328153035-Q版.png">
            <img src="QQ图片20250328153035-Q版.png" alt="家庭照片">
        </div>
        <div class="thumbnail" data-src="全家福2024年-Q版.png">
            <img src="全家福2024年-Q版.png" alt="家庭照片">
        </div>
        <div class="thumbnail" data-src="奔跑-Q版.png">
            <img src="奔跑-Q版.png" alt="家庭照片">
        </div>
        <div class="thumbnail" data-src="奔跑_看图王-Q版.png">
            <img src="奔跑_看图王-Q版.png" alt="家庭照片">
        </div>
    </div>

    <!-- 图片弹窗 -->
    <div class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="modal-img">
        <a class="prev">&#10094;</a>
        <a class="next">&#10095;</a>
    </div>

    <script src="script.js"></script>
</body>
</html>

生成style.css

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #fff5f5;
    background-image: linear-gradient(to bottom, #ffebee, #fff5f5);
    min-height: 100vh;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.thumbnail {
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.thumbnail:hover {
    transform: scale(1.03);
}

.thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* 弹窗样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: auto;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #bbb;
}

.prev, .next {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    cursor: pointer;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

@media screen and (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .thumbnail img {
        height: 150px;
    }
}

生成script.js

生成的代码。

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有元素
    const thumbnails = document.querySelectorAll('.thumbnail');
    const modal = document.querySelector('.modal');
    const modalImg = document.getElementById('modal-img');
    const closeBtn = document.querySelector('.close');
    const prevBtn = document.querySelector('.prev');
    const nextBtn = document.querySelector('.next');
    
    let currentIndex = 0;
    const images = Array.from(thumbnails).map(thumb => thumb.getAttribute('data-src'));
    
    // 为每个缩略图添加点击事件
    thumbnails.forEach((thumb, index) => {
        thumb.addEventListener('click', function() {
            currentIndex = index;
            showImage(currentIndex);
        });
    });
    
    // 显示图片函数
    function showImage(index) {
        modalImg.src = images[index];
        modal.style.display = 'block';
        document.body.style.overflow = 'hidden'; // 防止背景滚动
    }
    
    // 关闭弹窗
    function closeModal() {
        modal.style.display = 'none';
        document.body.style.overflow = 'auto';
    }
    
    // 上一张图片
    function prevImage() {
        currentIndex = (currentIndex - 1 + images.length) % images.length;
        showImage(currentIndex);
    }
    
    // 下一张图片
    function nextImage() {
        currentIndex = (currentIndex + 1) % images.length;
        showImage(currentIndex);
    }
    
    // 事件监听
    closeBtn.addEventListener('click', closeModal);
    prevBtn.addEventListener('click', prevImage);
    nextBtn.addEventListener('click', nextImage);
    
    // 键盘事件
    document.addEventListener('keydown', function(e) {
        if (modal.style.display === 'block') {
            switch(e.key) {
                case 'Escape':
                    closeModal();
                    break;
                case 'ArrowLeft':
                    prevImage();
                    break;
                case 'ArrowRight':
                    nextImage();
                    break;
            }
        }
    });
    
    // 点击弹窗背景关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeModal();
        }
    });
});

打开页面验证

直接用浏览器打开

再微调一下

把页面背景改成温馨一点的，把第二张图片去掉

会显示变更前和变更后的代码

一顿自动操作之后，再次打开

改变需求

创建一个基于 Web 的家庭相册项目，使用 React 框架

分析需求：

创建一个基于React的家庭相册项目需要以下步骤：

初始化React项目
创建相册组件结构
实现图片展示功能
添加图片查看模态框
实现键盘导航功能

首先需要初始化React项目，然后逐步实现功能。由于当前工作目录已有普通HTML相册，建议新建一个目录来存放React项目。

我将先创建一个新的React项目。

会自动执行

npx create-react-app family-album-react --template typescript
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

完成

打开localhost+端口。

结束

通过使用腾讯 CodeBuddy 从零打造家庭相册项目，深刻感受到了它作为一款智能编程助手的强大能力。在整个开发过程中，CodeBuddy 就像一位贴心的技术伙伴，从项目的基础框架搭建到各个功能的实现，再到问题的解决和优化，都给予了开发者全方位的支持，极大地提升了开发效率和项目质量。与 Cursor 等国外同类工具相比，CodeBuddy 凭借其本土化优势、对国内云服务的深度整合以及对国内开发场景的针对性优化，展现出了独特的竞争力，有望成为国内开发者心目中 “中国人自己的 Cursor”。

就目前的表现而言，腾讯云代码助手CodeBuddy工具已经有了国产Cursor的媲美的功能。从代码质量来看，其生成的代码质量尚可，预设功能也基本能够实现，对于新手开发者而言，若想借助AI工具完成工程项目，从零开始直接使用AI的最佳选择。

展望未来，随着人工智能技术的不断发展和 CodeBuddy 的持续迭代升级，相信它将在更多的开发场景中发挥重要作用，程序员小伙伴你们颤抖了吗？