【Code with SOLO】用 SOLO 从零搭建一个 AI 辅助学习平台（含智能架构推荐）
一、摘要
我用 TRAE SOLO 从零搭建了一个完整的 AI 辅助学习指南网站（SoloLearningGuide），基于 .NET 10 + Blazor + MudBlazor 技术栈，包含 9 个页面、18 条信息安全提示、18 个 Trae 教程章节、18 个技术栈选项，并实现了智能架构推荐功能——用户输入自然语言描述项目需求，系统自动推荐合适的技术栈组合。整个项目约 6,900 行手写代码，全部由 SOLO 辅助完成。
二、背景
我是一名开发者，在学习使用 AI 编程工具的过程中，发现身边很多同学和同事对以下话题有强烈的学习需求：
- 信息安全基础知识——密码管理、网络钓鱼防范、数据备份等
- AI 编程工具的使用方法——特别是 Trae IDE 的各种快捷命令
- 项目构建的全流程——从需求分析到部署上线
- 技术选型——前端/后端/移动端/云服务/AI 各领域该选什么框架
但市面上缺乏一个将以上内容整合在一起的中文学习平台。于是我用 TRAE SOLO 从零开始搭建了这个项目。
三、实践过程
3.1 任务拆解
我将整个项目拆解为以下几个阶段：
- 项目初始化——创建 .NET 10 Blazor Web App 解决方案，配置四层架构
- 核心框架搭建——实现 MVVM 模式、依赖注入、路由配置
- 页面开发——逐个实现 9 个功能页面
- 数据填充——搜索真实数据，编写 54 条结构化内容
- UI 打磨——响应式适配、深色模式、搜索过滤、动画效果
- Bug 修复——解决 MudBlazor 9.x 与 .NET 10 的兼容性问题
3.2 使用了 SOLO 哪些能力
- SOLO Builder 模式：用于快速生成项目骨架和页面模板
- SOLO Coder 模式：用于实现具体业务逻辑和修复 Bug
- #Workspace 引用：让 AI 理解整个项目结构，进行跨文件修改
- #Doc 引用：引入 MudBlazor 和 .NET 官方文档，确保 API 使用正确
- #Web 引用：搜索最新的安全数据和 Trae IDE 功能信息
3.3 关键 Prompt 示例
生成项目骨架：
创建一个 .NET 10 Blazor Web App 项目，采用四层架构（Core / Services / ViewModels / App），使用 MudBlazor 9.3.0 作为 UI 组件库，CommunityToolkit.Mvvm 实现 MVVM 模式。
实现智能架构推荐：
在项目构建页面添加一个功能：用户输入自然语言描述项目需求（如"我要做一个电商网站"），系统根据关键词匹配自动推荐合适的技术栈组合，覆盖前端、后端、移动端、桌面端、云服务、AI 七个维度。
搜索真实数据：
搜索 2025-2026 年信息安全领域的最新数据，包括密码管理最佳实践、网络钓鱼攻击统计、数据备份策略等，每条信息附带来源链接。
3.4 踩过的坑
| 问题 | 原因 | 解决方案 |
|---|---|---|
mudElementRef.getBoundingClientRect 报错 |
MudBlazor 9.x JS 模块在 InteractiveServer 模式下初始化时序问题 | 在 App.razor 中为 18 个 mudElementRef.* 方法提供 noop 回退 |
@for 索引越界 |
Blazor 预渲染阶段数据未就绪 | 将 @for 改为 @foreach |
| 搜索框双重边框 | MudBlazor Variant.Outlined + Adornment.Start 渲染双层容器 |
改用 Variant.Filled + CSS 强制去除边框 |
| Markdown 表格不渲染 | Markdig 默认不启用表格扩展 | 添加 .UsePipeTables() |
| 路由冲突 | 两个页面注册了相同路由 /trae-tutorial |
详情页只保留 /trae-tutorial/{keyword} |
四、成果展示
4.1 项目架构
SoloLearningGuide/
├── Core/ # 接口定义、数据模型、枚举（313 行）
├── Services/ # 业务逻辑、数据提供（2,250 行）
├── ViewModels/ # UI 状态管理（1,497 行）
└── App/ # Blazor 页面、组件、样式（2,793 行）
技术栈：.NET 10 + Blazor Interactive Server + MudBlazor 9.3.0 + Markdig 0.40.0 + CommunityToolkit.Mvvm 8.4.2
4.2 功能页面
| 页面 | 路由 | 功能亮点 |
|---|---|---|
| 首页 | / |
欢迎横幅 + 快速导航卡片 |
| SOLO 介绍 | /solo-intro |
SOLO 分类理论 + 3 种 AI 学习方式 |
| 信息安全 | /security |
18 条安全提示 + 5 类筛选 + Markdown 渲染 |
| Trae 教程 | /trae-tutorial |
8 个关键词卡片 + 搜索 + 详情页导航 |
| 项目构建 | /project-build |
步骤时间线 + 智能架构推荐 + 18 个技术栈 |
| 安全手册 | /security-manual |
在线浏览 + 目录导航 + PDF 下载 |
4.3 特色功能
智能架构推荐：用户输入"我要做一个电商网站，需要前后端分离，支持移动端"，系统自动推荐 React + ASP.NET Core + PostgreSQL + Flutter + Docker + Kubernetes 的技术栈组合，覆盖 7 大开发位置。
技术栈详情卡片：18 个框架按前端/后端/移动端/桌面端/云服务/AI 分类，每个卡片可展开查看 Markdown 格式的详细描述、官方文档链接、适用场景标签和学习难度星级。
多维度搜索过滤：信息安全页支持关键词搜索 + 5 类 Chip 筛选 + 严重等级排序；Trae 教程页支持关键词搜索；项目构建页支持 Tab 分类 + 搜索。
4.4 响应式设计
- 桌面端：侧边栏导航 + 内容区
- 手机端：底部导航栏（6 个 Tab）+ 触摸滑屏手势切换页面
- 4 个响应式断点（599px / 960px / 1280px / 1920px）
- 深色/浅色双主题切换
4.5 数据规模
| 数据类型 | 数量 | 说明 |
|---|---|---|
| 安全提示 | 18 条 | 密码管理/网络钓鱼/数据备份/隐私保护/设备安全 |
| Trae 教程 | 8 章 | @workspace/@file/@terminal/@web/@docs 等关键词 |
| 技术栈 | 18 个 | React/Vue/Blazor/Spring Boot/Go/Flutter 等 |
| 构建步骤 | 6 步 | 需求分析→技术选型→环境搭建→核心开发→测试优化→部署上线 |
| 源码文件 | 40 个 | 约 6,900 行手写代码 |
五、效果与总结
提效数据
- 项目搭建：从零到完整项目，SOLO 辅助完成了约 85% 的代码编写
- 数据填充：18 条安全提示 + 8 个 Trae 教程章节的真实数据搜索和整理，SOLO 大幅缩短了资料收集时间
- Bug 修复：MudBlazor 9.x 与 .NET 10 的兼容性问题，SOLO 通过搜索和代码分析快速定位根因
SOLO 在流程中做了什么
- 项目初始化阶段：SOLO Builder 根据需求描述自动生成项目骨架和基础页面
- 功能开发阶段：SOLO Coder 根据具体需求实现业务逻辑，支持跨文件修改
- 数据填充阶段：通过 #Web 引用搜索真实数据，自动整理为结构化内容
- Bug 修复阶段：通过 #Workspace 引用理解项目全貌，快速定位和修复问题
可复用的方法
- 四层架构 + MVVM：Core / Services / ViewModels / App 的分层模式适用于任何 Blazor 项目
- Markdown 渲染组件：基于 Markdig 的通用
MarkdownView组件，支持表格、任务列表等扩展 - MudBlazor 兼容性修复：
mudElementRefnoop 回退方案适用于所有使用 MudBlazor 9.x + .NET 10 的项目 - 智能推荐算法：基于关键词匹配的技术栈推荐逻辑，可扩展为更复杂的推荐系统
本项目使用 TRAE SOLO 从零搭建，技术栈为 .NET 10 + Blazor + MudBlazor。
感谢 TRAE 团队提供的 AI 编程工具！