【Code With SOLO】用 SOLO 从零构建一款行测备考神器，让公考学习更高效
“行测小助手”——集成语速记、高频母题库、百化分训练、励志语录于一体的公考学习Web应用
1. 摘要
用 TRAE SOLO 从零开发了一款名为"行测小助手"的公务员考试备考Web应用。产品整合了成语速记（424个成语）、高频母题库（20个核心题型）、言语理解真题（80+道）、百化分专项训练（31个常用分数）四大核心模块，同时集成了92条励志语录，在用户学习疲惫时给予精神激励。支持深色/浅色主题切换、答题模式训练、解析自动展示、成语分类浏览等功能。所有数据以 TypeScript/JSON 格式存储，支持离线使用。整个项目从需求分析、数据提取、功能开发到多轮迭代优化，全程由 SOLO 完成。
2. 背景
作为一名公考备考者，我在复习行测时经常遇到这样的困境：成语总是记不住，背了忘、忘了背；资料分析的百化分换算总是反应慢；高频题型的解题技巧零散地分布在各个资料中，难以系统掌握；言语理解题目做完后缺乏详细解析，不知道错在哪里。
与此同时，我手头积累了大量珍贵的备考资料，包括成语分类文档（Word格式）、高频母题库（Word格式）、言语理解真题解析（Word格式）、励志语录（Word格式）等。这些资料分散在不同格式的文件中，学习时需要频繁切换，效率极低。
我希望用 AI 的力量，将这些破碎的资料整合成一个统一的、美观易用的学习工具。更重要的是，公考备考是一场持久战，需要持续的动力激励，于是"行测小助手"这个项目应运而生。
3. 核心说明
3.1 产品定位
"行测小助手"是一款面向公务员考试备考者、事业单位考试备考者的Web端学习工具。它解决的核心问题是：将分散在各种格式文件中的备考资料，整合为一个统一的、离线可用的、iOS风格美学的学习应用。
3.2 功能架构
产品分为五大核心模块：
| 模块 | 功能 | 说明 |
|---|---|---|
| 成语速记 | 成语分类浏览 | 424个成语，按语义分类 |
| 成语答题训练 | 随机出题，巩固记忆 | |
| 高频母题库 | 五大分类 | 资料分析、言语理解、判断推理、数量关系、常识判断 |
| 题型详情 | 定义、识别关键词、解题步骤、秒杀技巧、常见陷阱 | |
| 言语理解 | 真题练习 | 80+道真题，支持分类筛选 |
| 详细解析 | 真题定位、命题逻辑、选项辨析、秒杀方法论 | |
| 百化分训练 | 分数转百分比 | 31个常用分数，答题模式训练 |
| 百分比转分数 | 反向训练，双向巩固 | |
| 励志激励 | 励志语录 | 92条励志句子，按顺序展示 |
3.3 技术方案
| 决策点 | 方案 | 理由 |
|---|---|---|
| 前端框架 | React 18 + TypeScript | 类型安全，生态丰富 |
| 构建工具 | Vite | 快速热更新，开发体验好 |
| 样式方案 | Tailwind CSS 3 | 原子化CSS，开发效率高 |
| 数据存储 | TypeScript/JSON | 离线可用，无需后端 |
| 主题切换 | localStorage + React State | 持久化用户偏好 |
| UI风格 | iOS风格 | 毛玻璃效果、渐变、弹性动画 |
3.4 主题设计
支持深色/浅色主题切换，适配不同学习场景：
| 主题 | 配色 | 适用场景 |
|---|---|---|
| 浅色模式 | 白色背景 + 彩色卡片 | 白天学习，光线充足 |
| 深色模式 | 深灰背景 + 渐变卡片 | 夜间学习，护眼舒适 |
4. 实践过程
4.1 任务拆解
整个项目我拆解为以下阶段，每个阶段与 SOLO 多轮对话迭代完成：
-
第一阶段：项目初始化，搭建React + TypeScript + Vite + Tailwind框架
-
第二阶段：开发首页和基础页面组件，实现iOS风格UI
-
第三阶段：从Word文档提取成语数据，开发成语速记模块
-
第四阶段：开发高频母题库模块，包含五大分类和题型详情
-
第五阶段：实现深色/浅色主题切换，适配所有页面
-
第六阶段：从Word文档提取励志语录，实现按顺序展示
-
第七阶段：添加微信联系方式和二维码
-
第八阶段：开发百化分专项训练模块
-
第九阶段：从Word文档提取言语理解解析，实现答题后自动展示解析
4.2 关键 Prompt 示例
数据提取阶段：
Prompt: “帮我加上成语理解速记模块，从Word文档提取成语数据，包含成语、释义、例句、近义词、反义词”
功能开发阶段：
Prompt: “请基于现有’行测小助手’项目继续开发，本次只开发’高频母题库’模块，包含五大分类：资料分析、言语理解、判断推理、数量关系、常识判断”
主题适配阶段：
Prompt: “我发现黑夜模式现在只是首页和底部会是黑色调，我点开成语速记和母题那里，页面还是白色的，需要改一下”
解析功能阶段：
Prompt: “言语理解的题目我找了题目的解析，在dist文件夹的yanyulijiejiaxi文件中，帮我给题目中对应的加上解析，要求是答题后不管正确错误，自动切换到这题的解析页面”
4.3 踩过的坑
坑一：Word文档名称不匹配
提取成语数据时，代码中的文件名与实际上传的文件名不一致，导致文件读取失败。解决方案：检查dist目录下的实际文件名，更新代码中的路径。
坑二：枚举键不能使用中文字符
在开发高频母题库时，尝试用中文作为枚举键，导致构建失败。解决方案：将枚举改为字符串数组，避免中文键问题。
坑三：主题切换仅首页生效
用户反馈深色模式只对首页生效，其他页面仍然是白色。解决方案：将theme属性通过props传递给所有页面组件，确保主题状态全局同步。
坑四：励志句子只展示部分
用户文档中有100条励志句子，但只展示了10条左右。解决方案：检查数据提取脚本，确保提取所有句子；同时实现按顺序展示功能，使用localStorage记录当前索引。
坑五：图标颜色不适配主题
用户反馈白天模式下首页图标颜色看起来奇怪。解决方案：根据主题动态调整图标颜色，浅色模式使用深色图标，深色模式使用浅色图标。
坑六：解析与题目匹配困难
言语理解解析文档中的题目与题库中的题目不是完全一一对应。解决方案：根据题干关键词进行匹配，创建解析映射表，确保解析内容正确对应到题目。
5. 成果展示
5.1 数据规模
| 数据文件 | 内容 |
|---|---|
| idioms.ts | 424个成语，含释义、例句、近义词、反义词 |
| motherQuestionData.ts | 20个核心题型，含定义、解题步骤、秒杀技巧 |
| verbalQuestions.ts | 80+道言语理解真题 |
| verbalExplanations.ts | 20+条详细解析，含真题定位、命题逻辑、秒杀方法论 |
| percentConversion.ts | 31个常用百化分数据 |
| quotes.ts | 92条励志语录 |
5.2 界面展示
首页（深色模式）：
-
功能入口卡片，支持快速导航
-
左上角主题切换按钮
-
点击图标显示励志语录弹窗
成语速记：
-
分类浏览，支持上一个/下一个切换
-
答题训练模式
高频母题库：
-
五大分类Tab切换
-
搜索功能
-
题型卡片展示高频指数、难度等级
百化分训练：
-
分数转百分比/百分比转分数两种模式
-
实时正确率统计
-
训练完成显示成绩
言语理解：
-
分类筛选
-
答题后自动展示解析
-
解析包含真题定位、命题逻辑、选项辨析、秒杀方法论
5.3 项目结构
Plain Text
xingce/
├── src/
│ ├── App.tsx # 主入口，路由配置
│ ├── components/
│ │ ├── HomePage.tsx # 首页
│ │ ├── IdiomPage.tsx # 成语速记
│ │ ├── IdiomPracticePage.tsx # 成语答题
│ │ ├── MotherQuestionPage.tsx # 高频母题库
│ │ ├── QuestionTypeDetailPage.tsx # 题型详情
│ │ ├── VerbalPage.tsx # 言语理解入口
│ │ ├── VerbalPracticePage.tsx # 言语理解答题
│ │ ├── PercentConversionQuiz.tsx # 百化分训练
│ │ ├── KnowledgePage.tsx # 资料分析必记知识
│ │ ├── PurchasePage.tsx # 购买页面
│ │ └── BasePage.tsx # 基础页面组件
│ ├── data/
│ │ ├── idioms.ts # 成语数据
│ │ ├── motherQuestionData.ts # 母题数据
│ │ ├── verbalQuestions.ts # 言语理解题目
│ │ ├── verbalExplanations.ts # 言语理解解析
│ │ ├── percentConversion.ts # 百化分数据
│ │ └── quotes.ts # 励志语录
│ └── types/
│ └── verbal.ts # 类型定义
├── dist/ # 构建产物
│ └── *.docx # 原始数据文档
└── package.json
6. 效果与总结
6.1 提效数据
| 环节 | 传统方式 | 使用SOLO | 提效 |
|---|---|---|---|
| 数据提取与转换 | 1-2天 | 30分钟 | ~5x |
| 功能代码开发 | 3-5天 | 2小时 | ~10x |
| UI样式调整 | 半天 | 15分钟 | ~15x |
| Bug修复 | 每个半天 | 几分钟 | ~20x |
6.2 核心收获
1. SOLO 最强的能力是"需求理解+快速实现"
本项目涉及多个功能模块，SOLO 能够准确理解需求，快速生成代码，并根据反馈迭代优化。
2. "渐进式开发"的流程至关重要
先开发核心功能，再根据用户反馈逐步完善。例如主题切换功能，最初只实现了首页，用户反馈后才扩展到所有页面。
3. 数据提取是关键环节
从Word文档提取数据时，需要注意文件名匹配、编码问题、数据结构设计。SOLO能够自动编写Python脚本完成数据转换。
4. 可复用的方法
-
复杂项目先搭建框架，再逐步添加功能
-
主题切换需要全局状态管理，确保所有页面同步
-
数据提取脚本要考虑文件名、编码、格式等问题
-
用户反馈是产品优化的重要来源
6.3 一句话总结
从零散的备考资料，到一个集成语速记、高频母题库、百化分训练、励志激励于一体的学习神器，SOLO 让一个人也能做出一个功能完整、美观易用的公考学习应用。