首先感谢TRAE 提供了内测码，我和几个同事一起试用了一下，大家整体的感受都是做的挺不错的。
在这里说一下一句话做一个应用的体验。
以制作一个 Markdown读写应用为例，给到新SOLO的提示词是“给我做一个类似于 Typora 的 Markdown 应用”。
SOLO很快做好了应用，能够打开 Markdown文档，但无法编辑。
正好 antigravity 还有一些额度马上要刷新，就选了Claud Sonnet 4.6做了问题检查和优化，并出了一个记录：
一、原项目存在的问题
1. 编辑体验缺陷（核心问题）
原版「所见即所得」的实现方案存在根本性缺陷：将一个透明的 <textarea> 绝对定位叠加在 Markdown 渲染层之上。这个方案理论上可以让用户感觉在「直接编辑渲染结果」，但实际运行中问题严重：
- 光标位置对不上：
<textarea>使用等宽字体（monospace），而渲染层使用比例字体（sans-serif），两者字符宽度不同，导致光标视觉位置与实际输入位置存在显著偏移 - 行高不一致：Markdown 渲染后标题、代码块等元素高度远大于纯文本，
<textarea>的行高无法同步匹配渲染层的高度，越往下偏移越大 - 无法选中渲染内容：渲染层被
pointer-events: none屏蔽，用户无法点击链接或复制渲染后的文字
2. 代码架构问题
| 问题 | 详情 |
|---|---|
| 单文件巨型组件 | 所有逻辑、状态、UI 全部堆在 App.tsx 一个文件，共 797 行 |
| 关注点不分离 | 文件管理、编辑器逻辑、主题设置、UI 渲染混在一起，难以维护和扩展 |
| 无 Custom Hooks | 业务逻辑直接写在组件内，无法复用 |
3. 功能缺失
文件无法重命名（删除后重建才能改名）- 目录（TOC）面板不可点击跳转，点击无反应
- 没有阅读时间估算等统计数据
- 只有源码/预览两种视图，缺少分栏模式
- 没有视图模式的直观切换控件
4. 视觉设计问题
- 配色使用最普通的
#fafafa白底 +#0066cc蓝色，缺乏设计感 - 字体全部使用
Inter（系统 UI 字体），正文阅读感不佳 - 引用块、代码块、表格等样式粗糙，无精致细节
- 代码高亮样式与整体主题不协调（
github.css在暗色模式下突兀） - 文件列表不显示修改时间，难以区分文件
二、改进内容
2.1 架构重构：单体 → 分层
将 797 行的单体文件彻底拆分为标准的分层架构：
src/
├── App.tsx # 精简至 ~120 行，仅负责状态编排与布局组装
├── hooks/
│ ├── useFiles.ts # 文件管理（CRUD + localStorage 持久化）
│ ├── useEditor.ts # 编辑器逻辑（文本插入、包裹、快捷键）
│ └── useSettings.ts # 全局设置（主题、字体、行高、视图模式）
└── components/
├── Sidebar.tsx # 侧边栏（文件列表、搜索、重命名、删除）
├── Toolbar.tsx # 格式化工具栏 + 视图模式切换器
├── Editor.tsx # 编辑器主体（三模式：源码/分栏/预览）
├── TocPanel.tsx # 目录面板（自动提取标题 + 点击跳转）
├── StatusBar.tsx # 底部状态栏（字符/词数/行数/阅读时间）
└── SettingsModal.tsx # 设置弹窗（主题/字体/行高/快捷键参考）
2.2 编辑体验修复
放弃有缺陷的「透明叠加」方案，改为业界普遍采用的分栏架构：
| 原方案 | 新方案 | |
|---|---|---|
| 实现思路 | 透明 textarea 叠加在渲染层上 | 独立的源码窗格 + 独立的预览窗格 |
| 光标准确性 | 光标有偏移 |
 光标完全准确 |
| 视图可选择 | 源码 / 预览（二选一） | 源码 / 分栏 / 预览（三选一） |
| 渲染层交互 | 无法点击链接 |
预览区链接可点击 |
2.3 视觉系统重建
设计 Token（CSS 变量系统）：
--editor-bg /* 背景色 */
--editor-text /* 正文色 */
--editor-accent /* 强调色（Indigo #5B5BD6） */
--editor-border /* 边框色 */
--editor-hover /* 悬停背景 */
--code-bg /* 代码背景 */
--sidebar-bg /* 侧边栏背景 */
字体升级：
- 正文预览区：
Lora（优雅衬线字体，匹配阅读场景） - 源码编辑区：
JetBrains Mono（等宽字体，代码感强） - UI 界面元素：
Inter（清晰的系统字体）
4 套主题：
| 主题 | 背景色 | 强调色 | 适用场景 |
|---|---|---|---|
| 亮色（默认） | #FAFAF8 暖白 |
#5B5BD6 Indigo |
日常使用 |
| 暗色 | #141414 深石板 |
#7C7CEA 浅紫 |
夜间写作 |
| 护眼 | #F8F1E3 米黄 |
#8B5A2B 棕 |
长时间阅读 |
| Nord | #2E3440 北欧蓝灰 |
#88C0D0 冰蓝 |
开发者偏好 |
Prose 样式精修：
- H1 带 2px 底部边框，H2 带 1px 底部边框，层次感清晰
- 引用块：左侧 3px 强调色细线 + 5% 强调色背景 + 斜体
- 代码块：10px 圆角 + 1px 边框 + 微投影，浮于页面
- 表格：圆角溢出隐藏 + tbody 行 hover 高亮
- 所有标题带
scroll-margin-top用于 TOC 跳转定位
2.4 功能完善
文件重命名：
- 侧边栏每个文件项悬浮时显示「重命名」和「删除」按钮
- 点击重命名进入行内编辑模式，支持回车确认 / Esc 取消
- 自动补全
.md后缀
TOC 目录跳转：
TocPanel自动解析当前文档的 H1–H6 标题- 每个标题在渲染时生成唯一的
id（中文 slug） - 点击 TOC 条目调用
scrollIntoView({ behavior: 'smooth' })
状态栏增强：
- 新增「预计阅读时间」（按 300 字/分钟估算，过滤代码块）
- 显示文件名
- 所有数字实时更新
快捷键：
⌘/Ctrl + B：粗体⌘/Ctrl + I：斜体⌘/Ctrl + K：插入链接- `⌘/Ctrl + ``：行内代码
Tab/Shift+Tab：缩进 / 减少缩进Enter在列表项末尾：自动续列表（有序自动递增编号）
三、改进后的功能列表
核心编辑
- 源码编辑：等宽字体，语法清晰，光标准确
- 分栏预览：左编辑右渲染，实时同步，无闪烁
- 纯预览：仅显示渲染结果，可点击链接
- 自动续列表：Enter 自动添加下一个列表符号
- 快捷键格式化：粗体、斜体、代码、链接
- Tab 缩进：支持多级缩进，Shift+Tab 反缩进
- 自动保存：内容实时写入
localStorage
文件管理
- 新建文件：即时创建，自动聚焦编辑区
- 导入文件：支持
.md/.markdown/.txt - 导出文件：下载当前文件为
.md - 重命名：行内双击铅笔图标，回车/Esc 控制
- 删除文件：确保至少保留一个文件（自动创建）
- 文件搜索：实时过滤文件名
- 相对时间：显示「刚刚」「3 分钟前」等
视图与导航
- 三种视图模式：源码 / 分栏 / 预览（工具栏右侧切换）
- 专注模式：隐藏所有 UI 元素，鼠标移入时淡入工具栏和状态栏
- 侧边栏折叠：收起侧边栏扩大编辑区
- 目录面板：点击跳转对应标题
- 格式化工具栏：16 个常用 Markdown 格式按钮，分组排列
Markdown 渲染支持
- 标题 H1–H6（含层级视觉区分）
- 粗体、斜体、删除线、行内代码
- 无序列表、有序列表、任务列表（复选框）
- 引用块（嵌套支持）
- 代码块（多语言语法高亮）
- 表格（含 thead 背景、tbody hover）
- 链接（可点击，预览模式下生效）
- 图片（圆角 + 微投影）
- 水平分割线
设置
- 4 套主题：亮色 / 暗色 / 护眼 / Nord
- 字体大小：12px–24px 滑块调节
- 行高：1.2–2.5 滑块调节，实时预览
- 快捷键参考：设置面板内展示所有快捷键
数据统计（状态栏）
- 字符总数
- 词数（中英文混合计算）
- 行数
- 预计阅读时间（分钟）
四、文件变更摘要
| 文件 | 状态 | 说明 |
|---|---|---|
src/App.tsx |
重写 | 797 行 → ~120 行，仅做布局与状态编排 |
src/index.css |
重写 | 全新设计系统，~700 行精细样式 |
src/hooks/useFiles.ts |
新建 | 文件管理逻辑 |
src/hooks/useEditor.ts |
新建 | 编辑器操作逻辑 |
src/hooks/useSettings.ts |
新建 | 全局设置状态 |
src/components/Sidebar.tsx |
新建 | 侧边栏组件 |
src/components/Toolbar.tsx |
新建 | 工具栏组件 |
src/components/Editor.tsx |
新建 | 编辑器主体组件 |
src/components/TocPanel.tsx |
新建 | 目录面板组件 |
src/components/StatusBar.tsx |
新建 | 状态栏组件 |
src/components/SettingsModal.tsx |
新建 | 设置弹窗组件 |
package.json |
不变 | 依赖无新增 |
完善后的应用可以正常使用。
我相信，如果不仅仅只给 agent 一句话做为提示词，SOLO 也可以完成的很好，但当前来看，可能受限于我个人的提示词水平，或受限于默认大模型编码能力，一句话应用还不算理想。
另外，同事们还想要内测码，大家都很有兴趣。
最后，祝TRAE越来越好。