Skip to content

[Demo PR] Single-Sprite Tutorial Mode UI Design - #3425

Draft
wenjiangping wants to merge 171 commits into
goplus:uifrom
wenjiangping:issue-3412-A
Draft

wenjiangping wants to merge 171 commits into
goplus:uifrom
wenjiangping:issue-3412-A

Conversation

@wenjiangping

@wenjiangping wenjiangping commented Aug 14, 2026

Copy link
Copy Markdown

Related issue

Related to #3412

Background

Several tutorial-mode interfaces and interactions did not match the intended design. Dropdown menus depended on hover behavior, course dialogs needed clearer visual hierarchy, and the ruler controls and surrounding workspace required a more polished and consistent presentation.

Experience changes

  • Change navbar dropdown menus from hover-triggered expansion to click-triggered expansion for more predictable interaction
  • Refine the visual design of the course-start dialog and the secondary-goal retry dialog
  • Redesign the ruler button and show a ruler-shaped cursor while the ruler is active
  • Improve the layout and visual treatment of the workspace area containing the ruler
  • Polish supporting interaction details across the tutorial flow, including course navigation, restart behavior, dialog typography, and completion actions

Impact scope

  • Pages / components: editor navbar, tutorial dialogs, ruler controls, stage viewer, and tutorial course controls
  • Primary user journey: open navbar menus, start a course, use the ruler, retry an incomplete secondary goal, restart a course, and complete or continue a course

Verification

  • Compared against the provided UI references
  • Checked in the local preview environment
  • Checked key states: dropdown closed / open, course start, secondary-goal retry, ruler inactive / active, course restart, and course completion
  • Ran targeted tests, ESLint, Prettier, and staged-diff checks

@wenjiangping wenjiangping changed the title [Page] Update: Refine the guided course experience [Demo PR] Single-Sprite Tutorial Mode UI Design Aug 14, 2026
@qingqing-ux

Copy link
Copy Markdown
Collaborator
image 课程地图如果能自动定位到当前课程体验会好一些。

@qingqing-ux

Copy link
Copy Markdown
Collaborator
image 需要描边

@qingqing-ux

Copy link
Copy Markdown
Collaborator
image 过于粗糙

@qingqing-ux

Copy link
Copy Markdown
Collaborator
image 直角边中长的那一条边跟虚线的延伸方向一致,如红色箭头所示,体验是不是会好一些?

@qingqing-ux

Copy link
Copy Markdown
Collaborator
2026-08-19_21-47-25 *存在未去掉的信息 *考虑做成闯关模式

Ethanlita and others added 22 commits September 18, 2026 14:55
The moment a code-judged course's primary goal is reached, the same text is
read three times over: the secondary goal is checked against it token by
token, it is quoted to the copilot as the evidence for its completion
comment, and it stays in the learner's file as the answer they keep. A run's
worth of stray indentation went into all three.

It is formatted once, before the secondary goal is judged, so the three agree.
The edit goes through the editor's history like the Format button's does, so
it is one undoable action rather than a silent rewrite. Formatting is a
courtesy — an unparsable file or a missing editor must never hold up
completion — so a failure is only warned about. And since the format is
async, the completion signal now carries the run it belongs to: a learner who
hits run again in that window does not get the previous run's verdict.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Point the `repeat` knowledge point at `repeat.webm` instead of the shared demo take. It is the first WebM in the library; `<video>` picks the decoder from the bucket's `video/webm` content type, so nothing else changes.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

This branch was successfully deployed

1 active deployment
Preview – builder 61dd6021 Deployed Sep 22, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants