通义灵码2.0 AI 程序员：轻松开发React 待办事项清单

本文链接：https://blog.youkuaiyun.com/SDFsoul/article/details/146131271

在vscode中安装通义灵码

在这里插入图片描述

场景描述

开发一个基础版待办事项应用，要求：

输入框添加新任务（回车确认）
任务列表展示（未完成/已完成分类）
切换任务完成状态
数据持久化到 localStorage
包含简单的空状态提示

Step 1：初始化项目

Prompt：
“用React函数组件创建一个TodoList应用基础结构，要求使用TypeScript和Hooks，包含状态管理和本地存储逻辑”

通义灵码2.0响应：

// TodoApp.tsx
import React, { useState, useEffect } from 'react';

interface Todo {
  id: string;
  text: string;
  completed: boolean;
}

const TodoApp: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>(() => {
    const saved = localStorage.getItem('todos');
    return saved ? JSON.parse(saved) : [];
  });
  const [newTodo, setNewTodo] = useState('');

  // 持久化到本地存储
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  const addTodo = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && newTodo.trim()) {
      setTodos([...todos, {
        id: Date.now().toString(),
        text: newTodo.trim(),
        completed: false
      }]);
      setNewTodo('');
    }
  };

  return (
    <div className="todo-container">
      <input 
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        onKeyDown={addTodo}
        placeholder="添加新任务..."
      />
      
      {/* 待生成任务列表 */}
    </div>
  );
};

亮点分析：
✅ 自动初始化 localStorage 交互逻辑
✅ 类型定义精准（包括 id 的 string 类型）
✅ 回车事件处理包含 trim 校验
⏳ 缺少任务列表展示部分（需继续补充）

Step 2：补充任务列表功能

选中代码中的注释 {/* 待生成任务列表 */} 后输入：
“请生成任务列表展示代码，要求分未完成/已完成两类展示，带切换状态功能，包含样式类名控制”

生成代码片段：

<div className="todo-list">
  {/* 未完成任务 */}
  {todos.filter(t => !t.completed).map(todo => (
    <div key={todo.id} className="todo-item">
      <input
        type="checkbox"
        checked={false}
        onChange={() => setTodos(todos.map(t => 
          t.id === todo.id ? {...t, completed: !t.completed} : t
        ))}
      />
      <span>{todo.text}</span>
    </div>
  ))}

  {/* 已完成任务 */}
  {todos.filter(t => t.completed).map(todo => (
    <div key={todo.id} className="todo-item completed">
      <input
        type="checkbox"
        checked={true}
        onChange={() => setTodos(todos.map(t => 
          t.id === todo.id ? {...t, completed: !t.completed} : t
        ))}
      />
      <span>{todo.text}</span>
    </div>
  ))}

  {/* 空状态提示 */}
  {todos.length === 0 && (
    <div className="empty-state">暂无任务，开始添加吧！</div>
  )}
</div>

智能优化点：
🔹 自动拆分未完成/已完成列表
🔹 状态切换逻辑复用映射函数
🔹 动态添加 completed 样式类名
🔹 空状态提示条件判断精准

Step 3：样式优化请求

输入Prompt：
_"为这个TodoList添加简约的CSS样式，要求：

输入框有聚焦效果
已完成任务显示灰色并带删除线
任务项悬停高亮
合理间距布局"_

生成样式代码：

/* TodoApp.css */
.todo-container {
  max-width: 500px;
  margin: 2rem auto;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

input[type="text"] {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 1rem;
}

input[type="text"]:focus {
  outline: none;
  border-color: #646cff;
  box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.2);
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 0.8rem;
  border-bottom: 1px solid #eee;
  transition: background 0.2s;
}

.todo-item:hover {
  background: #f8f8f8;
}

.todo-item.completed span {
  color: #999;
  text-decoration: line-through;
}

.empty-state {
  color: #666;
  text-align: center;
  padding: 1rem;
}