[Demo PR] Single-Sprite Tutorial Mode UI Design

[wenjiangping]

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

[qingqing-ux]

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

[qingqing-ux]

需要描边

[qingqing-ux]

过于粗糙

[qingqing-ux]

直角边中长的那一条边跟虚线的延伸方向一致，如红色箭头所示，体验是不是会好一些？

[qingqing-ux]

*存在未去掉的信息 *考虑做成闯关模式