解锁手机新玩法：用Trae实现手机当电脑触控板！

我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接： www.trae.ai/?utm_source...

前言

我想买个 Mac 的妙控板，但价格太贵了。每次摸着手机丝滑的电容屏，都会想如果手机能变成触摸板该多好。于是我在网上查了一下，果然有类似的解决方案：github.com/huoyijie/mo... 打算用 Trae（还好我是 Mac 可以用手动狗头😂）自己写个版本试试。

首先声明，这不是广告文，只是想参与征文投稿，并实事求是地体验一下 Trae。此前我在日常开发中高强度使用过 Cursor，因此本篇文章会记录我对 Trae 的使用体验，并将其与 Cursor 做一些对比。文章内容会尽量客观真实，不吹不黑，给出实际评价。

开始制作

1.创建基础模版

根据 socket.io 的教程创建一个 node 项目加一个 index.html,然后设置访问/路由的时候显示这个 html 页面

js 复制代码

import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';

const app = express();

const __dirname = dirname(fileURLToPath(import.meta.url));

app.get('/', (req, res) => {
  res.sendFile(join(__dirname, 'index.html'));
});

2.首先创建一个纯黑色的触控板界面

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Touch Pad</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            background: #000;
            overflow: hidden;
            touch-action: none;
        }
        #touchpad {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="touchpad"></div>
</body>
</html>

3. 主要逻辑

让 AI 完成 Hammer.js 获取用户触点坐标，并通过 Socket.io 传递到 Node.js，再进行下一步任务将收集到的坐标点信息传递给 @nut-tree/nut-js 控制电脑的鼠标。

AI很好的完成了这个任务，实现了基础的代码，现在直接可以在手机上滑动控制电脑上的鼠标了，还让他帮忙实现了下 vite --host 显示电脑 ip:端口号 的效果。下面放上截图与完整代码块。

html 复制代码

<body>
    <div id="touchpad"></div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
    <script>
        const socket = io();
        const touchpad = document.getElementById('touchpad');

        let mc = new Hammer.Manager(touchpad)

        mc.add(new Hammer.Pan({ direction: Hammer.DIRECTION_ALL }))
        mc.add(new Hammer.Tap({ event: 'tap', pointers: 1 }))
        mc.add(new Hammer.Tap({ event: 'righttap', pointers: 2, taps: 1 }))
        mc.get('tap').requireFailure('righttap')
        mc.add(new Hammer.Press({}))

        mc.on('panstart panmove', (ev) => {
            const touchData = {
                type: ev.type,
                x: ev.center.x,
                y: ev.center.y,
                deltaX: ev.deltaX,
                deltaY: ev.deltaY
            };
            socket.emit('touch', touchData);
        }).on('tap', (ev) => {
            socket.emit('touch', { type: 'tap' });
        })
    </script>
</body>

js 复制代码

const app = express();
const server = createServer(app);
const io = new Server(server);

const __dirname = dirname(fileURLToPath(import.meta.url));

app.get('/', (req, res) => {
  res.sendFile(join(__dirname, 'index.html'));
});

// 记录初始触摸位置和当前鼠标位置
let initialTouchPos = null;
let currentMousePos = null;

io.on('connection', (socket) => {
  socket.on('touch', async (data) => {
    try {
      if (data.type === 'panstart') {
        initialTouchPos = { x: data.x, y: data.y };
        currentMousePos = await mouse.getPosition();
      } else if (data.type === 'panmove' && initialTouchPos && currentMousePos) {
        // 计算触摸移动的距离
        const deltaX = data.x - initialTouchPos.x;
        const deltaY = data.y - initialTouchPos.y;

        // 移动鼠标到新位置
        const newX = currentMousePos.x + deltaX;
        const newY = currentMousePos.y + deltaY;
        await mouse.setPosition(new Point(newX, newY));

        // 更新初始位置和当前鼠标位置
        initialTouchPos = { x: data.x, y: data.y };
        currentMousePos = { x: newX, y: newY };
      } else if (data.type === 'tap') {
        await mouse.leftClick();
      }
    } catch (error) {
      console.error('Mouse control error:', error);
    }
  });
});

吐槽一下开发过程中的体验问题

我想将 Hammer.js 和 Socket.io 的文档提供给 AI，但发现缺少了 Cursor 的 @Doc 功能。我希望 Trae 能引入类似的功能，这样 AI 可以明确知道一些库的 API，避免出现幻觉或乱编的情况。这个功能对于开发者来说非常重要。
写这篇文章的过程中，我想回退到之前的代码并截个图。使用了 Builder 中的鼠标 hover 功能回退到前面的聊天记录，系统提示会修改哪些文件。我以为回退后像 Cursor 那样，右侧的聊天内容还能保留，但结果是聊天记录被清空了，历史记录里也找不到之前的对话。这让我不太清楚是否是 bug，整体体验并不好。有待改进。
这里是 Cursor 的交互逻辑不清空聊天记录。

还好代码量不大，我通过编辑器的时间线功能回退回去了，因为 cmd + z 无法恢复到之前的状态。所以建议大家在使用倒退功能时要小心，或者在使用之前先用 git stash 存一下代码，这样会更加保险。

这里吐槽一下 Trae 总是喜欢想帮我执行 npm run dev，可能是特意做的一个功能吧。我知道你是好心，但其实每个任务都不需要启动它，开发时这个命令通常是一直开着的。相比之下，Cursor 就没有这个问题。

还发现了一个 bug,我的项目中只有一个 index.js文件我想要引用的时候显示多个,重新加载编辑器还是可复现

源码自提

github.com/LLmoskk/mob...

总结

Trae作为新产品，相比于Cursor，确实还有一些差距需要弥补。不过，看到越来越多的大厂积极参与下一代IDE的研发，给用户带来了更多的选择，这无疑是一个积极的信号。竞争推动了创新，也促使这些工具不断完善。我作为用户，期待这些IDE能够越来越成熟，功能更加实用，从而提升开发效率。

不过目前来说，Cursor无疑还是处于领先位置，提供了更为成熟和稳定的体验，因此我还是更倾向于使用Cursor。希望Trae能在未来推出更多有竞争力的功能，吸引更多用户尝试和使用