【Code With SOLO】TraeIDE Cloud - 让IDE真正"云端化"的远程控制工具
马上就要中考了，本来应该好好复习的，但这个项目实在让我放不下，还是抽个时间出来写一下这个帖子，记录一下这段"历经千辛万苦"的开发历程。
一、摘要
用 TRAE SOLO 开发了一款 TraeIDE 远程控制工具，实现了通过 Cloudflare Tunnel 远程访问本地 TraeIDE 的功能。让开通了 TraeIDE Pro 的用户可以"真正"实现 SOLO Web —— 不再被排队困扰，不再被"不能离开页面"的限制束缚，随时随地远程操控自己的 IDE。
二、背景
大家好，我是一名独立开发者，同时也是一名即将参加中考的学生。
相信大家已经体验过最新版的 SOLO 了吧？里面的 MTC 模式那是真的好用——可以帮我们做网页读取写出高质量论文文档、帮我们调研分析生成汇报 PPT、帮我们数据挖掘分析数据发展趋势、内容创作撰写产品资料。
但是 Code 模式呢？虽然说它在一句话生成完整程序、Web 开发、脚本编写方面名列前茅，但在云端的 Linux 环境和无法人工操作的限制下，又显得不那么突出了！
更让人崩溃的是 TraeIDE 内置免费模型的排队机制，而且还不能离开页面！于是我就想开发一款工具，帮助自己和一些开通了 TraeIDE Pro 的人实现"真正"的 SOLO Web。
三、实践过程
3.1 第一次尝试：IDE 插件方案 
一开始，我的计划是编写一个 IDE 插件，通过调用内部 API，实现不需要外装软件直接从 IDE 内部设置。
但是……Trae 没有公开相关的 API 文档。我本来打算逆向 IDE，不过被官方运营小阳同学给阻止了。没办法，只能放弃这个方案。
3.2 第二次尝试：C# + WPF
既然插件方案走不通，那就写一个独立的桌面应用吧！我选择了 C# 和 WPF，毕竟 Windows 桌面开发这块 C# 还是很有优势的。
然而，WPF 的界面问题让我头疼不已。各种布局问题、样式问题、元素重叠问题……折腾了好久，最终还是放弃了。
3.3 第三次尝试：Cloudflare Tunnel 速度问题 
后来我决定换一个思路，使用 Cloudflare Tunnel 来实现远程访问。但是问题来了——Cloudflare 在国内的访问速度……真的不够快。
Cloudflare Tunnel 1033 错误：无法解析隧道
Cloudflare Tunnel 530 报错：The origin has been unregistered from Argo Tunnel
这期间耽误了好久，各种报错、各种调试，差点就要放弃了。
3.4 第四次尝试：Fluent Design 界面
既然要写桌面应用，界面肯定要好看吧？我决定使用微软的 Fluent Design 设计语言，打造一个现代化的界面。
然而，Fluent Design 的实现比我想象中复杂得多。耗费了大量时间，最终还是因为各种兼容性问题和实现难度而失败了。
3.5 最终方案：回归 Python 
经历了前面四次失败，我决定回归最熟悉的 Python。使用 Python + tkinter 快速搭建界面，配合 Chrome DevTools Protocol (CDP) 和 Cloudflare Tunnel 实现核心功能。
TraeIDE Cloud 主界面，简洁实用（虽然说有元素重叠的问题）
项目需求与开发完成截图
3.6 资源代理与传输优化
在开发过程中，我遇到了一个棘手的问题：通过 iframe 嵌入远程页面时，CSS 和 JS 资源无法正常加载。
资源代理优化前后对比
经过反复调试，我实现了以下优化：
| 改动 | 之前 | 现在 |
|---|---|---|
<script> 标签 |
全部删除 |
保留，让 JS 在 iframe 中执行 |
| CSS | 内联 4.6MB | 通过 <Link> 从 /res/ 加载 |
| 字体/图标 | 无法加载 |
/res/ 代理 woff2/ttf/svg |
| JS 文件 | 不代理 |
/res/ 代理所有 .js |
| Mock API | 无 |
/api/* 返回空 JSON，避免 JS 报错白屏 |
| 资源缓存 | 无 | 内存缓存 60 秒，最多 200 个文件 |
| X-Frame-Options | 未处理 | 移除，允许 iframe 嵌入 |
| modulepreload | 未处理 | 移除，避免加载失败 |
| base 标签 | 无 | 注入 <base href="/res/"> 修复相对路径 |
通过 Cloudflare Tunnel 成功远程访问 TraeIDE（但是还有点问题，烦死了）
四、成果展示
项目结构
/workspace/traeide_remote_controller/
d:\Desktop\TraeIDE_Cloud\
├── .trae/
│ └── specs/
│ ├── fix-cdp-launch/
│ │ ├── checklist.md
│ │ ├── spec.md
│ │ └── tasks.md
│ ├── selective-element-capture/
│ │ ├── checklist.md
│ │ ├── spec.md
│ │ └── tasks.md
│ └── traeide-remote-controller/
│ ├── checklist.md
│ ├── spec.md
│ └── tasks.md
├── __pycache__/
│ └── main.cpython-313.pyc
├── images/
│ ├── cloudflare_1033_error.png
│ ├── cloudflare_530_error.png
│ ├── project_spec.png
│ ├── remote_access_success.png
│ ├── resource_proxy_issue.png
│ └── traeide_cloud_main.png
├── tmole/
│ ├── tmole
│ ├── tmole.cmd
│ ├── tmole.ps1
│ ├── tunnelmole
│ ├── tunnelmole.cmd
│ └── tunnelmole.ps1
├── traeide_remote_controller/
│ ├── __pycache__/
│ │ └── __init__.cpython-313.pyc
│ ├── modules/
│ │ ├── __pycache__/
│ │ │ ├── __init__.cpython-313.pyc
│ │ │ ├── cdp_launcher.cpython-313.pyc
│ │ │ ├── cdp_proxy.cpython-313.pyc
│ │ │ ├── config_manager.cpython-313.pyc
│ │ │ └── tunnel_manager.cpython-313.pyc
│ │ ├── __init__.py
│ │ ├── cdp_launcher.py
│ │ ├── cdp_proxy.py
│ │ ├── config_manager.py
│ │ └── tunnel_manager.py
│ ├── ui/
│ │ ├── __pycache__/
│ │ │ ├── __init__.cpython-313.pyc
│ │ │ ├── fluent_styles.cpython-313.pyc
│ │ │ ├── logging_manager.cpython-313.pyc
│ │ │ └── main_window.cpython-313.pyc
│ │ ├── panels/
│ │ │ ├── __pycache__/
│ │ │ │ ├── __init__.cpython-313.pyc
│ │ │ │ ├── log_panel.cpython-313.pyc
│ │ │ │ └── quick_start_panel.cpython-313.pyc
│ │ │ ├── __init__.py
│ │ │ ├── log_panel.py
│ │ │ └── quick_start_panel.py
│ │ ├── widgets/
│ │ │ ├── __pycache__/
│ │ │ │ ├── __init__.cpython-313.pyc
│ │ │ │ ├── fluent_button.cpython-313.pyc
│ │ │ │ ├── fluent_line_edit.cpython-313.pyc
│ │ │ │ └── status_indicator.cpython-313.pyc
│ │ │ ├── __init__.py
│ │ │ ├── fluent_button.py
│ │ │ ├── fluent_line_edit.py
│ │ │ └── status_indicator.py
│ │ ├── __init__.py
│ │ ├── fluent_styles.py
│ │ ├── logging_manager.py
│ │ └── main_window.py
│ ├── __init__.py
│ └── config.json
├── README.md
├── TraeIDE_