AIGC标识 Choerodon Learning Lab：把框架学习做成在线练习工作台（附源码与体验地址）

9 个学习单元、三档练习难度，在浏览器里阅读样例、修改代码、保存并查看运行结果。

在线体验：Choerodon Learning Lab

项目源码：GitHub · choerodon-learning-lab

本项目使用 AI 辅助开发，课程和实现经过人工检查及测试。本文根据实际项目、部署过程和验收记录整理。

前言

最近在学习 Choerodon UI Pro，我给自己搭了一个 React 项目，准备按单元把 DataSet、查询条件、表单、表格编辑这些内容逐步练一遍。

最初的需求很简单：每个单元有一个完整样例，再留一份需要自己完成的练习。

做着做着，需求开始增加。练习写乱了，想恢复原始版本；有的知识点比较陌生，需要更细的提示；有的已经理解，又希望少一点提示。后来又想把代码编辑器放到页面里，让阅读说明、修改代码和查看结果在一个地方完成。

于是，这个项目逐渐变成了现在的 Choerodon Learning Lab。

它也延续了我之前做 anki-vocab 和 Listening Lab 时的思路：从自己的学习过程出发，把反复遇到的操作整理成一个能持续使用的小工具。

工作台：左侧编辑练习代码，右侧查看运行结果

图：单元 02 的原始练习。页面上的问号和未完成项属于 TODO，留给学习者自己实现。

一、我希望它解决什么问题

学习组件库时，看懂一个完整示例通常不难。真正换一个业务场景，问题才开始出现。

比如样例里的查询条件是角色名称，练习换成员工关键词，还要同时匹配姓名和编码；样例只需要保存一条记录，练习又要求处理失败后保留修改。

这时需要理解的内容就具体了：

  • 查询条件保存在什么地方，最终以什么参数发出去？
  • 字段的值、显示文本和校验规则分别由谁管理？
  • 新建记录保存后，后端分配的 ID 怎样回到前端？
  • 提交失败时，用户刚才输入的内容还在不在？

我想把这些问题安排成可以动手验证的任务。每个单元的目标要足够小，也要能观察到结果。

因此，课程文档里会写具体的验收条件，例如 Network 中出现了什么请求、页面显示什么状态、失败以后哪些数据应该保留。这样，练习完成与否就有了检查依据。

二、9 个单元，把知识点逐步串起来

目前已经整理了 9 个单元：

单元 主要内容
01 DataSet 基础、字段配置、Table 绑定与分页
02 queryFields、queryDataSet、查询参数与查询栏
03 字段校验、自定义 validator、options 与 lookupCode
04 Form、输入组件、只读展示与布局
05 表格行内编辑、增删改提交、记录状态与失败处理
06 字段联动、事件与级联下拉
07 主从 DataSet、头行切换与嵌套提交
08 Modal 弹窗、抽屉、校验及取消回滚
09 全局配置、国际化与后端响应适配

每个单元都有样例、练习和说明文档。样例按知识点写注释，练习用编号 TODO 对应这些知识点，README 再补充验收标准、思考题和常见问题。

在设计练习时，我给自己加了几个要求。

样例和练习使用不同的业务数据。 比如样例操作角色，练习操作员工。学习者需要重新理解字段、查询条件和业务限制。

练习要有变化点。 不能只是把名称替换一下，还需要多考虑一两个条件，例如布尔值为 false 时能否正确传到后端。

保留“能运行但有隐患”的写法。 页面正常显示，并不代表处理完整。提交失败没有反馈、联动后旧值没有清理，都适合放进练习中观察和修正。

这些任务也会提醒我：看到页面正常，还需要继续检查状态和数据。

三、三档难度和重置，让同一个单元可以反复练

每个单元都有三份原始模板：

难度 提示方式
easy：入门 步骤拆得更细，直接提示需要使用的属性或方法
normal：标准 描述目标，指向样例中的知识点
hard：挑战 保留最少骨架，主要描述需求，并增加额外任务

三档难度共用主要验收标准。提示多少发生变化，需要理解的核心问题仍然存在。

单元目录大致如下：

src/units/02-query-conditions/
├── index.js
├── Example.js
├── Exercise.js
├── README.md
└── templates/
    ├── Exercise.easy.js
    ├── Exercise.normal.js
    └── Exercise.hard.js

在本地练习时，实际修改的是 Exercise.js。模板负责提供起点，重置前先备份当前代码。

# 查看各单元的难度，以及练习是否仍与模板一致
yarn unit:list

# 将单元 02 重置为挑战难度；覆盖前会生成备份
yarn unit:reset 2 hard

页面里也提供了重置入口，并在操作前确认难度，操作后显示备份路径。

这样，同一个单元可以先带着提示做一次，再减少提示重新做。中间写错、改乱，也有原始版本和备份可以对照。

四、把编辑器放进页面，减少练习时的来回切换

工作台使用 Monaco Editor。进入一个单元后，可以在“练习 / 样例 / 说明”之间切换。

一次学习过程大致是：

选择单元和难度
      ↓
阅读样例、说明与验收标准
      ↓
编辑练习代码
      ↓
Ctrl / Cmd + S 保存
      ↓
查看预览、请求和错误信息
      ↓
继续修改，或重置后重新练习

编辑不会在每次按键后立刻保存，需要手动保存或使用快捷键。保存前会检查 JSX 语法；有未保存修改时，页面提供离开提醒。

预览里的 React 渲染错误由错误边界处理，尽量让编辑器继续可用。不过，错误边界处理不了所有异常，更无法解决代码死循环，这一点在后面部署时也需要单独考虑。

项目里的 AI 主要参与开发和内容搭建。当前工作台没有接入在线 AI 自动批改，也没有自动完成 TODO 的按钮。学习者仍然需要动手完成代码，对照标准检查结果。

五、从本地自用到在线体验，保存和预览都需要重新考虑

这是这次开发中变化比较大的一部分。

1. 本地模式：保存源码，由开发服务器更新预览

本地运行 yarn start 时，CRA 开发服务器同时提供前端、学习 API、Monaco 静态资源和 mock。

保存操作会修改项目里的 Exercise.js，然后由开发服务器重新编译，更新预览。

对于自己在电脑上练习，这种方式很直接。代码就在项目目录里，也方便使用 IDE 和 Git 查看差异。

但它共用同一份源码。如果多个人同时访问并保存练习，文件和编译结果都会相互影响。

所以，在线体验需要独立的保存和执行方式。

2. 云端模式：按浏览器保存独立练习

现在的在线入口不要求注册或输入账号密码。首次访问时，服务端分配一个随机身份，用带签名的 Cookie 识别当前浏览器。

我最初考虑过按 IP 分配，后来改成了浏览器身份。同一 Wi-Fi 下可能有多个使用者，而一个人也可能在家里、公司和手机网络之间切换。

现在的行为是：

  • 同一浏览器切换网络，仍然可以继续原来的练习。
  • 不同浏览器各自保存练习和重置备份。
  • 清除网站 Cookie 或使用新的无痕会话，会创建新身份。
  • 新访客从原始 TODO 模板开始，不会获得管理员已经写过的作业。

这种方式降低了体验门槛，但暂时没有跨设备同步和身份找回。重要练习仍建议保留自己的副本。

3. 云端预览：在浏览器沙箱里运行

云端保存不再改动共享 src/，也不再为每位访客触发全局 Webpack 编译。

当前流程如下：

浏览器工作台
    │
    ├─ 学习 API → 当前访客的练习与备份
    │
    └─ 固定 Babel 插件转换 JSX
                ↓
       独立 iframe 运行练习
                │
                └─ 受控消息桥 → 当前访客的 /mock/ 数据

服务端只做语法转换，不执行访客提交的 JavaScript，也不读取访客提供的 Babel 配置。

预览使用 sandbox="allow-scripts" 的 iframe，配合 CSP 限制直接网络访问。需要读取或提交课程数据时，通过消息桥请求允许的 /mock/ 路径。练习代码不能借这个桥访问学习文件读写 API 或任意外部地址。

发布构建还会检查，避免把管理员本地的 Exercise.js 打进公开资源包。

这些处理服务于当前课程练习的范围。它暂时只支持课程依赖，不支持任意 npm 包，也不能保证代码死循环不会占用使用者的浏览器资源。

六、AI 参与开发以后，我需要保留什么

做这个项目时，我也遇到了一个很实际的感受：AI 可以很快生成页面、接口和测试，我越来越多地在描述需求、检查结果和提出修改。

这和以前自己从第一行代码开始写的过程很不一样。

我之前在 《当效率杀死了我的目标》 里讨论过类似的困惑。这次做学习工作台，又让我更具体地面对它：项目已经能运行，我是否也理解了其中的实现？

对我来说，需要主动保留几类工作。

把问题和约束说清楚。 例如依赖版本固定、正在做的练习不能覆盖、提交失败后不能丢草稿。这些要求决定了生成结果能不能真正拿来使用。

检查关键行为的依据。 比如 Choerodon UI 1.6.7 的提交请求体、记录状态和 ID 回写，应该去对应版本源码中确认，再通过接口和测试验证。

亲自走一遍失败路径。 正常保存成功以后，还要试错误输入、后端拒绝、取消编辑、重置，以及两个访客同时使用的情况。

把需要学习的部分留下来自己做。 这个项目把基础设施和课程骨架搭好，练习仍然保留 TODO。我可以让 AI 提供提示、检查遗漏，也可以先写出自己的判断，再比较实现结果。

以后评价一次学习，我更想记录具体的问题：今天能否解释一次提交过程，能否定位一次字段联动错误，能否在没有样例的情况下完成一个变化需求。

这些问题，比统计今天生成了多少代码更贴近我的学习目标。

七、当前验证到了哪一步

下面的数据来自 2026-09-27 的部署验收记录，对应当前文章整理时的项目版本。完整过程见仓库中的 浏览器身份验收记录。

检查内容 记录结果
前端 Jest 测试 17 套，177 项通过
Node 工具与 API 测试 39 项通过
三档原始模板 27 份通过固定编译器的语法转换
本地构建、云端独立构建 均通过
受保护文件 SHA-256 84 个文件与检查基线一致
两个独立访客保存、重置 互不影响
错误 JSX、跨站写入 拒绝请求，保留原作业
浏览器保存后刷新 能读回已保存代码

这些结果覆盖了一部分正常流程和失败流程。27 份模板能编译，不代表它们的所有业务操作都已经逐项验收；自动测试通过，也不代表完成了长期压力测试或安全认证。

如果本地运行，可以执行：

yarn unit:list
node --test scripts/ devtools/
CI=true yarn test --watchAll=false --runInBand
CI=true yarn build

八、怎样体验，以及当前还有哪些不足

直接打开 在线工作台，选择一个单元就可以开始。建议先从 01 或 02 看起，读完样例和说明，再选择适合自己的难度。

希望在本地保存代码和使用 IDE 的话，可以克隆项目：

git clone https://github.com/zhchoice123/choerodon-learning-lab.git
cd choerodon-learning-lab

# 使用 Node 20.18.0 和 Yarn Classic 1.22.22
yarn install --frozen-lockfile
cp .env.example .env.local
yarn start

随后打开 http://localhost:3000/#/。

课程固定使用 Choerodon UI 1.6.7、React 16.14、MobX 4.15.7 和 CRA 5。这是针对特定版本的学习环境，不作为新项目技术选型建议。社区学习项目与 Choerodon 官方没有隶属关系。

目前还有几件事需要继续完善：

  1. 预览速度。 前端包仍然较大，右侧预览需要初始化独立运行环境，切换或重新运行时还有等待时间。拆分预览资源、改进加载提示和减少重复工作，都是后续需要验证的方向。
  2. 作业迁移。 当前身份依赖浏览器 Cookie，还没有跨设备同步和自助找回能力。
  3. 数据持久性。 mock 用来学习接口行为，服务重启或缓存淘汰后会恢复种子数据；它与持久保存的练习源码是两类数据。
  4. 依赖维护。 固定版本依赖仍有审计告警，升级需要单独验证课程兼容性，不能把测试通过当作安全问题已经解决。

现在，这个工作台已经可以支持我按单元反复练习。它也给后续学习留下了一个可以继续扩展的结构：补充更贴近业务的任务，记录实际卡住的地方，再把这些问题整理进课程。

如果你也在学习 Choerodon UI Pro，可以直接打开试一下。发现课程说明、接口行为或页面交互有问题，欢迎在 GitHub Issues 中留下复现步骤。

posted @ 2026-09-27 16:13  方子敬  阅读(11)  评论(0)    收藏  举报