实战体验：用 AtomCode 开发一个完整的 Todo 应用

引言

作为一名开发者，我一直在寻找能够真正提升效率的 AI 编码工具。最近，我尝试了 AtomCode——这款「开源 + 多模型 + 免费 Token」的全自动 AI 编码助手。在本文中，我将分享使用 AtomCode 从零开始开发一个完整 Todo 应用的真实体验，包括项目初始化、功能开发、代码优化，以及最终将项目开源至 AtomGit 的全过程。

一、环境准备与项目初始化

1.1 安装 AtomCode

首先，我需要安装 AtomCode 编辑器。作为开源项目，AtomCode 提供了多种安装方式：

# 使用 npm 安装
npm install -g atomcode

# 启动 AtomCode
atomcode

启动后，AtomCode 会引导我完成初始配置，包括选择默认模型、设置代码风格等。我选择了 GPT-4o 作为主要模型，同时启用了自动补全和代码解释功能。

1.2 项目结构规划

在开始编码前，我向 AtomCode 提出了需求：

“帮我规划一个基于 React + TypeScript 的 Todo 应用项目结构”

AtomCode 很快给出了建议：

todo-app/
├── src/
│   ├── components/       # UI 组件
│   ├── hooks/            # 自定义 Hooks
│   ├── types/            # 类型定义
│   ├── App.tsx           # 主应用组件
│   └── main.tsx          # 入口文件
├── package.json
├── tsconfig.json
├── vite.config.ts
└── index.html

1.3 初始化项目

使用 Vite 创建 React + TypeScript 项目：

npm create vite@6.5.0 . -- --template react-ts
npm install
npm install tailwindcss @tailwindcss/vite

AtomCode 在我输入命令时会自动补全，并且在安装完成后提醒我配置 TailwindCSS。

二、核心功能开发

2.1 类型定义

我让 AtomCode 帮我定义 Todo 应用的核心类型：

“定义 Todo 应用的 TypeScript 类型，包括 Todo 项、过滤条件等”

文件: [src/types/index.ts](file:///c:/Users/Administrator/Desktop/TH/todo-app/src/types/index.ts)

export interface Todo {
  id: string;
  title: string;
  description?: string;
  completed: boolean;
  createdAt: Date;
  updatedAt: Date;
  priority: 'low' | 'medium' | 'high';
}

export type FilterType = 'all' | 'active' | 'completed';
export type SortType = 'created' | 'priority' | 'title';

2.2 自定义 Hook

接下来，我需要一个管理 Todo 状态的 Hook。AtomCode 帮我生成了完整的实现：

文件: [src/hooks/useTodo.ts](file:///c:/Users/Administrator/Desktop/TH/todo-app/src/hooks/useTodo.ts)

import { useState, useCallback, useMemo } from 'react';
import { Todo, FilterType, SortType } from '../types';

const generateId = () => Math.random().toString(36).substr(2, 9);

export const useTodo = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [filter, setFilter] = useState<FilterType>('all');
  const [sort, setSort] = useState<SortType>('created');

  const addTodo = useCallback((title: string, description?: string, priority: Todo['priority'] = 'medium') => {
    const newTodo: Todo = {
      id: generateId(),
      title,
      description,
      completed: false,
      createdAt: new Date(),
      updatedAt: new Date(),
      priority
    };
    setTodos(prev => [newTodo, ...prev]);
  }, []);

  const toggleTodo = useCallback((id: string) => {
    setTodos(prev => prev.map(todo =>
      todo.id === id
        ? { ...todo, completed: !todo.completed, updatedAt: new Date() }
        : todo
    ));
  }, []);

  const deleteTodo = useCallback((id: string) => {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  }, []);

  const updateTodo = useCallback((id: string, updates: Partial<Pick<Todo, 'title' | 'description' | 'priority'>>) => {
    setTodos(prev => prev.map(todo =>
      todo.id === id
        ? { ...todo, ...updates, updatedAt: new Date() }
        : todo
    ));
  }, []);

  const filteredTodos = useMemo(() => {
    let result = [...todos];
    
    switch (filter) {
      case 'active': result = result.filter(todo => !todo.completed); break;
      case 'completed': result = result.filter(todo => todo.completed); break;
    }

    switch (sort) {
      case 'priority':
        const priorityOrder = { high: 0, medium: 1, low: 2 };
        result.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
        break;
      case 'title': result.sort((a, b) => a.title.localeCompare(b.title)); break;
      default: result.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
    }

    return result;
  }, [todos, filter, sort]);

  const stats = useMemo(() => ({
    total: todos.length,
    active: todos.filter(t => !t.completed).length,
    completed: todos.filter(t => t.completed).length
  }), [todos]);

  return {
    todos: filteredTodos,
    filter,
    sort,
    stats,
    setFilter,
    setSort,
    addTodo,
    toggleTodo,
    deleteTodo,
    updateTodo
  };
};

2.3 UI 组件开发

TodoItem 组件

文件: [src/components/TodoItem.tsx](file:///c:/Users/Administrator/Desktop/TH/todo-app/src/components/TodoItem.tsx)

我让 AtomCode 帮我设计一个美观的 Todo 项组件，支持优先级显示、状态切换和编辑功能。AtomCode 生成了完整的组件代码，包含响应式设计和交互效果。

TodoList 组件

文件: [src/components/TodoList.tsx](file:///c:/Users/Administrator/Desktop/TH/todo-app/src/components/TodoList.tsx)

该组件负责渲染任务列表，包含空状态提示和列表展示逻辑。

TodoForm 组件

文件: [src/components/TodoForm.tsx](file:///c:/Users/Administrator/Desktop/TH/todo-app/src/components/TodoForm.tsx)

表单组件支持添加新任务，包含标题、描述和优先级选择。

2.4 主应用组件

文件: [src/App.tsx](file:///c:/Users/Administrator/Desktop/TH/todo-app/src/App.tsx)

AtomCode 帮我整合所有组件，创建了主应用：

import { FilterType, SortType } from './types';
import { useTodo } from './hooks/useTodo';
import { TodoForm } from './components/TodoForm';
import { TodoList } from './components/TodoList';

const filterOptions: { value: FilterType; label: string }[] = [
  { value: 'all', label: '全部' },
  { value: 'active', label: '待完成' },
  { value: 'completed', label: '已完成' }
];

const sortOptions: { value: SortType; label: string }[] = [
  { value: 'created', label: '按时间' },
  { value: 'priority', label: '按优先级' },
  { value: 'title', label: '按标题' }
];

function App() {
  const { todos, filter, sort, stats, setFilter, setSort, addTodo, toggleTodo, deleteTodo, updateTodo } = useTodo();

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
      <div className="mx-auto max-w-2xl px-4 py-8">
        <header className="mb-8 text-center">
          <h1 className="mb-2 text-4xl font-bold text-gray-900">✅ Todo 管理器</h1>
          <p className="text-gray-600">高效管理你的日常任务</p>
        </header>

        <TodoForm onAdd={addTodo} />

        <div className="mt-6 rounded-xl bg-white p-6 shadow-sm">
          <div className="mb-4 flex flex-col items-center justify-between gap-4 sm:flex-row">
            <div className="flex items-center gap-2 text-sm text-gray-600">
              <span className="rounded-full bg-blue-100 px-3 py-1 text-blue-600">全部: {stats.total}</span>
              <span className="rounded-full bg-yellow-100 px-3 py-1 text-yellow-600">待完成: {stats.active}</span>
              <span className="rounded-full bg-green-100 px-3 py-1 text-green-600">已完成: {stats.completed}</span>
            </div>

            <div className="flex items-center gap-4">
              <div className="flex rounded-lg border border-gray-200">
                {filterOptions.map((option) => (
                  <button
                    key={option.value}
                    onClick={() => setFilter(option.value)}
                    className={`px-4 py-2 text-sm font-medium transition-colors ${
                      filter === option.value ? 'bg-blue-500 text-white' : 'text-gray-600 hover:bg-gray-50'
                    }`}
                  >
                    {option.label}
                  </button>
                ))}
              </div>

              <select
                value={sort}
                onChange={(e) => setSort(e.target.value as SortType)}
                className="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-blue-500"
              >
                {sortOptions.map((option) => (
                  <option key={option.value} value={option.value}>{option.label}</option>
                ))}
              </select>
            </div>
          </div>

          <TodoList todos={todos} onToggle={toggleTodo} onDelete={deleteTodo} onUpdate={updateTodo} />
        </div>

        <footer className="mt-8 text-center text-sm text-gray-500">
          <p>使用 React + TypeScript + TailwindCSS 构建</p>
          <p className="mt-1">借助 AtomCode AI 编码助手开发</p>
        </footer>
      </div>
    </div>
  );
}

export default App;

三、项目构建与验证

3.1 安装依赖

npm install

3.2 构建项目

npm run build

构建成功后，生成的生产版本位于 dist/ 目录：

dist/index.html                    0.47 kB
dist/assets/index-BFZB6orV.css   14.37 kB
dist/assets/index-BNhWPmE6.js   152.65 kB

四、开源至 AtomGit

4.1 创建仓库

在 AtomGit 上创建了名为 todo-app-202606 的公开仓库。

4.2 推送代码

# 初始化 Git 仓库
git init

# 配置用户信息
git config user.name "weixin_48384182"
git config user.email "1615483147@qq.com"

# 添加文件并提交
git add .
git commit -m "Initial commit: Todo 应用项目"

# 添加远程仓库
git remote add origin https://gitcode.com/weixin_48384182/todo-app-202606.git

# 推送代码
git push -u origin main

4.3 项目地址

项目已成功开源至 AtomGit，访问地址：https://gitcode.com/weixin_48384182/todo-app-202606

五、AtomCode 使用体验总结

5.1 亮点功能

智能代码补全：AtomCode 的代码补全非常智能，能够理解上下文并提供精准的建议。例如，在编写 useTodo Hook 时，它自动补全了 useCallback、useMemo 等 Hook 的正确用法。

代码生成：通过自然语言描述，AtomCode 能够生成完整的组件代码。我只需要告诉它需求，它就能生成结构合理、样式美观的组件。

代码解释：当我对某些代码不理解时，AtomCode 可以提供详细的解释。这对于学习新的 API 或设计模式非常有帮助。

多模型支持：AtomCode 支持多种 AI 模型，我可以根据需要切换不同的模型。

5.2 使用技巧

精准描述需求：给 AtomCode 的描述越详细，生成的代码质量越高。例如，我明确要求使用 TailwindCSS、支持优先级显示等，它生成的代码完全符合要求。

分步骤开发：不要一次性要求生成整个项目，可以分步骤进行。先规划结构，再实现核心逻辑，最后完善 UI。

代码审查：虽然 AtomCode 生成的代码质量很高，但仍需要人工审查。特别是涉及安全和性能的部分，需要仔细检查。

5.3 改进建议

代码风格统一：虽然 AtomCode 可以配置代码风格，但在实际使用中，有时生成的代码风格与项目不完全一致，需要手动调整。

性能优化提示：在生成复杂逻辑时，AtomCode 可以提供性能优化的建议，帮助开发者写出更高效的代码。

六、项目功能特性

  • ✅ 添加、编辑、删除任务
  • ✅ 任务优先级设置（高/中/低）
  • ✅ 任务状态切换（待完成/已完成）
  • ✅ 任务过滤和排序
  • ✅ 响应式设计
  • ✅ 使用 TailwindCSS 构建美观界面

结语

通过这次实战体验，我对 AtomCode 有了深入的了解。它确实是一款非常强大的 AI 编码助手，能够显著提升开发效率。特别是对于前端开发来说，AtomCode 可以帮助开发者快速生成高质量的代码，让开发者能够更专注于业务逻辑和用户体验。

使用 AtomCode 的感受：

  • 效率提升：开发速度明显加快，特别是在编写重复性代码时
  • 学习辅助：对于不熟悉的技术栈，AtomCode 可以提供很好的学习帮助
  • 创意激发：有时 AtomCode 会提供一些我没想到的实现思路

当然，AtomCode 也不是完美的，它生成的代码仍需要人工审查和调整。但总体来说，它是一款值得推荐的开发工具。

如果你还没有尝试过 AtomCode，我强烈建议你下载体验一下。相信它会成为你开发工具箱中的得力助手！

本文为原创内容，基于作者实际使用 AtomCode 的开发经验整理。项目代码已开源至 AtomGit：https://gitcode.com/weixin_48384182/todo-app-202606

Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

海外动态代理行业彻底换代，AI 数据时代新标准已到来

avatar AtomGit开源社区
cover

2026年论文写作AI哪个好用？7款工具实测对比，轻松拿捏

avatar AtomGit开源社区
cover

2026年SEO+GEO优化指南：搜索排名机制解析与实用工具推荐

avatar AtomGit开源社区