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

原创

星哥玩云

发布于 2025-05-13 12:02:22

13900

代码可运行

文章被收录于专栏：星哥的AI自留地星哥的AI自留地

运行总次数：0

代码可运行

中国人自己的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 的持续迭代升级，相信它将在更多的开发场景中发挥重要作用，程序员小伙伴你们颤抖了吗？

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

CodeBuddy首席试玩官

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

CodeBuddy首席试玩官

#AI

#人工智能

登录后参与评论

暂无评论

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

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

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

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

CodeBuddy兼容IDE

CodeBuddy编程语言及框架

安装VS Code

VSCode设置中文

安装腾讯云CodeBuddy

Codebuddy界面

新建目录Photos

做一个产品经理

什么是Craft

使用chat功能

生成代码

生成style.css

生成script.js

打开页面验证

再微调一下

改变需求

结束

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐