feat: preload template style files

[HardyNLee]

介绍

在初始化游戏时预加载模板样式文件。

背景

此 PR 前，像 choose 这种每次出场时都会重新刷新组件，导致每次要重新读取 choose.scss ，重新应用样式，观感上有很明显的延迟，会露出一会原样式。

兼容性

完全兼容现有的模板，替换模板并更新、applyStyle 命令均可正常工作。

其他

您可能会注意到我并没有从 template.json 文件里读取样式文件路径，而是写在一个常量里。因为目前我还没有完全设计好属性结构，以及可能需要和未来的多模板切换留空间，还要一起修改编辑器等等。此 PR 只是一个最基础的影响最小的修改，目前工作得很好，并且也为以后修改留下了空间。

[gemini-code-assist]

Summary of Changes

Hello @HardyNLee, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在通过在游戏初始化阶段预先加载并解析关键 UI 组件（如选择框、文本框、标题）的样式文件，来解决因组件重新渲染时重复加载样式导致的视觉延迟问题。这一改进确保了用户界面的流畅性，提升了用户体验。虽然目前样式文件路径是硬编码的，但设计上已为未来从 template.json 中动态读取以及支持多模板切换预留了扩展空间，是一个影响最小但效果显著的优化。

Highlights

• 样式预加载机制: 在游戏初始化时，引入了预加载模板样式文件（如 title.scss, textbox.scss, choose.scss）的机制，以避免组件首次渲染时的样式加载延迟。
• 样式对象存储: 新增 WebGAL.styleObjects Map，用于存储已解析的 SCSS 样式对象，供后续组件直接使用，无需重复解析或请求。
• 优化 useApplyStyle Hook: 修改了 useApplyStyle Hook，使其不再通过文件路径动态加载样式，而是通过 UI 标识符从 WebGAL.styleObjects 中获取预加载的样式，显著提升了样式应用的效率。
• 新增样式更新事件: 引入了 afterStyleUpdate 事件，用于在样式文件加载和更新完成后通知相关组件进行样式刷新。

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

这个 PR 通过在游戏初始化时预加载模板样式文件，有效地解决了组件（如 choose）每次出现时因重新加载样式而导致的视觉延迟和样式闪烁问题。整体实现思路清晰，通过将解析后的样式存储在全局的 Map 中，并在组件中通过 useApplyStyle hook 读取，实现了样式的复用。同时，引入了新的 afterStyleUpdate 事件来处理模板更新后的样式刷新，设计合理。

我提出了一些建议，主要涉及性能优化和修复一个潜在的 bug，希望能帮助进一步提升代码质量。

[gemini-code-assist]

在 useRegisterAfterStyleUpdate hook 中，useEffect 的依赖数组为空 []，这会导致 handler 函数只在组件首次渲染时创建一次，并且捕获了初始的 callback。如果父组件重渲染并传入了新的 callback，事件监听器将继续使用旧的、可能已经过时的 callback，这会引发 stale closure (闭包过期) 的 bug。

为了修复这个问题，应该将 callback 添加到 useEffect 的依赖数组中。同时，可以简化代码，直接在 useEffect 中使用 callback，并为 callback 提供更精确的类型签名。

function useRegisterAfterStyleUpdate(callback: () => void) {
  useEffect(() => {
    WebGAL.events.afterStyleUpdate.on(callback);
    return () => WebGAL.events.afterStyleUpdate.off(callback);
  }, [callback]);
}