trae vs cursor 之写个 table

对比一下 trae 和 cursor 的智能程度，均使用 我的 cra 脚手架 作为基础模板

模板结构如下：

├── README.md
├── package.json
├── public
│   └── index.html
└── src
    ├── App
    │   ├── App.js
    │   ├── App.scss
    │   └── style.module.scss
    ├── index.css
    └── index.js

入口文件 src/index.js，入口文件引用 src/App/App.js

prompt：

写一个 Table 组件，用 arco design，table 有两列，分别是 name 和 salary，数据内部 mock，table 需要有分页，切换页面后请求 mock 的接口。table 一页 10 个数据，假设总共有 100 个数据

trae 和 cursor 都使用 claude 3.7

trae

首先看 trae，第一次生成后，启动，并没有看到 table

然后我继续提问：

启动后没看到 table

还是不行，我只能下场给他手动改了，没发识别正确的入口文件，已经有了还在新创建

核心代码：

import React, { useState, useEffect } from "react";
import { Table, Pagination } from "@arco-design/web-react";
import "@arco-design/web-react/dist/css/arco.css";
// import axios from 'axios';

// 模拟 API 请求函数
const fetchData = (page, pageSize) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 生成模拟数据
      const data = Array(pageSize)
        .fill(0)
        .map((_, index) => {
          const id = (page - 1) * pageSize + index + 1;
          return {
            key: id,
            name: `用户 ${id}`,
            salary: Math.floor(5000 + Math.random() * 15000),
          };
        });

      resolve({
        data,
        total: 100,
      });
    }, 500); // 模拟网络延迟
  });
};

const EmployeeTable = () => {
  const [data, setData] = useState([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 100,
  });
  const [loading, setLoading] = useState(false);

  // 定义表格列
  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "薪资",
      dataIndex: "salary",
      key: "salary",
      render: (salary) => `¥${salary.toLocaleString()}`,
    },
  ];

  // 获取数据的函数
  const getData = async (page = 1, pageSize = 10) => {
    setLoading(true);
    try {
      const response = await fetchData(page, pageSize);
      setData(response.data);
      setPagination({
        ...pagination,
        current: page,
        total: response.total,
      });
    } catch (error) {
      console.error("获取数据失败:", error);
    } finally {
      setLoading(false);
    }
  };

  // 初始加载和页码变化时获取数据
  useEffect(() => {
    getData(pagination.current, pagination.pageSize);
  }, []);

  // 页码变化处理函数
  const handlePageChange = (page) => {
    getData(page, pagination.pageSize);
  };

  return (
    <div style={{ padding: "20px" }}>
      <h2>员工薪资表</h2>
      <Table
        columns={columns}
        data={data}
        loading={loading}
        pagination={false}
        rowKey="key"
      />
      <div style={{ marginTop: "16px", textAlign: "right" }}>
        <Pagination
          current={pagination.current}
          total={pagination.total}
          pageSize={pagination.pageSize}
          onChange={handlePageChange}
          showTotal={(total) => `共 ${total} 条数据`}
        />
      </div>
    </div>
  );
};

export default EmployeeTable;

cursor

cursor 一次就给搞定了，核心代码：

import React, { useState, useEffect } from "react";
import { Table, Pagination, Message } from "@arco-design/web-react";
import "./TableComponent.css";

const TableComponent = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 100,
  });

  // 模拟获取数据的 API
  const fetchData = async (current, pageSize) => {
    setLoading(true);
    try {
      // 模拟网络请求延迟
      await new Promise((resolve) => setTimeout(resolve, 500));

      // 生成模拟数据
      const mockData = Array(pageSize)
        .fill(null)
        .map((_, index) => {
          const id = (current - 1) * pageSize + index + 1;
          return {
            key: id,
            name: `员工 ${id}`,
            salary: Math.floor(5000 + Math.random() * 15000),
          };
        });

      setData(mockData);
    } catch (error) {
      Message.error("获取数据失败");
      console.error("获取数据错误:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData(pagination.current, pagination.pageSize);
  }, [pagination.current, pagination.pageSize]);

  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "工资",
      dataIndex: "salary",
      key: "salary",
      render: (salary) => `¥${salary.toLocaleString()}`,
    },
  ];

  const handlePageChange = (current) => {
    setPagination({ ...pagination, current });
  };

  return (
    <div className="table-container">
      <h2>员工工资表</h2>
      <Table
        columns={columns}
        data={data}
        loading={loading}
        pagination={false}
        rowKey="key"
      />
      <div className="pagination-wrapper">
        <Pagination
          current={pagination.current}
          total={pagination.total}
          pageSize={pagination.pageSize}
          onChange={handlePageChange}
          showTotal
          sizeCanChange={false}
        />
      </div>
    </div>
  );
};

export default TableComponent;

trae vs cursor

trae 最终效果：

cursor 最终效果：

1. trae 没有检查 arco 是否安装，如果安装了就不需要额外安装了（cursor 胜出）
2. trae 额外安装 axios，代码里还引了，但是实际没有用到（cursor 胜出）
3. trae 直接运行不生效，并且追问后还无法修复，这点有点无法接受（cursor 胜出）
4. 完成度，基础效果上大差不差，但是 cursor 样式美观，给人惊喜（cursor 胜出，这里 cursor 如果能用 css module 就更好了）
5. total trae 在 mock 数据里返回，cursor 写死了（trae 胜出，无伤大雅，但是 trae 在这里显的更加智能）
6. trae 是主动请求接口，cursor 是 useEffect 被动触发接口请求（两者实现都 ok，更倾向 trae 的实现）

综上，cursor 还是更胜一筹