Conversation
Summary of ChangesHello, I'm Gemini Code Assist1! 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! This pull request introduces a refreshed UI for the WebGAL project, focusing on improving the text box and title elements. The changes aim to provide a more modern and user-friendly experience. The previous UI is being preserved as a classic template, while the new UI is introduced as a refined version. Highlights
Using Gemini Code AssistThe 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
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 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. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| mask-image: | ||
| linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.28) 10%, #000 75%), | ||
| linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.28) 10%, #000 42%); | ||
| mask-composite: intersect; |
There was a problem hiding this comment.
mask-composite 属性目前在 Firefox 浏览器中不被原生支持，这可能会导致在 Firefox 中背景的渲染效果与预期不符。
根据 MDN 文档，此属性需要用户手动开启实验性功能标志位才能在 Firefox 中使用，对于普通用户来说默认是关闭的。
为了保证跨浏览器体验的一致性，建议：
- 寻找一种不使用
mask-composite的替代实现方式。 - 或者为 Firefox 提供一个优雅降级的样式（fallback）。
| font-weight: bold; | ||
| color: white; | ||
| padding: 1em 50px 70px 200px; | ||
| padding: calc(1em + #{$topReserve}) 50px 70px 490px; |
There was a problem hiding this comment.
padding 属性中的左边距 490px 是一个硬编码的“魔术数字”。这个值同样在第 159 行的 .TextBox_showName 的 left 属性中重复使用。
为了提高代码的可维护性，建议将这个值提取为一个 SCSS 变量。例如，在文件的顶部定义一个变量，然后在所有使用到该值的地方引用这个变量。
// 建议
$textBoxLeftOffset: 490px;
.TextBox_main {
// ...
padding: calc(1em + #{$topReserve}) 50px 70px $textBoxLeftOffset;
// ...
}
.TextBox_showName {
// ...
left: $textBoxLeftOffset;
// ...
}这样当需要调整布局时，只需修改一处即可。
Deploying webgal-dev with
|
| Latest commit: |
8133b08
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ed5f4c91.webgal-dev.pages.dev |
| Branch Preview URL: | https://refresh-ui.webgal-dev.pages.dev |
|
请对修改后的 UI 提议，谢谢！ |
|
对于默认 UI 的情况，我可能考虑在配置文件里面弄几个配色方案，然后可以在编辑器里面选。编辑器的这个选项只在检测到用默认refine模板后显示。 |
人物名称那里可以加点修饰，不要太突兀即可。control panel的布局也可以再考虑一下 |
| const renderButtonText = (text: string) => ( | ||
| <div className={applyStyle('Title_button_text', styles.Title_button_text)}> | ||
| <span className={applyStyle('Title_button_text_placeholder', '')}> | ||
| {text} | ||
| <span className={applyStyle('Title_button_text_outer', '')}>{text}</span> | ||
| <span className={applyStyle('Title_button_text_inner', '')}>{text}</span> | ||
| </span> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
这里为什么 applyStyle 没有指定 fallbackStyle
| left: 0; | ||
| top: 0; | ||
| -webkit-text-stroke: 0.09em rgba(12, 20, 32, 0.7); | ||
| z-index: 1; |
There was a problem hiding this comment.
出于模板的兼容性考虑，我感觉需要做如下改动
- 不应该改
.Title_button_text，而应该尽可能在新的类中覆盖属性 .Title_button_text_outer应该只留一个display: none;，防止用户的模板多了一个描边，只把更改留到 public/game/template 即可.Title_button_text_inner缺了一个color属性，现在正常是因为漏了在 Title.tsx 写回退，所有继承到了.Title_button_text，但是实际上它容易继承.Title_button_text_placeholder里的color: transparent;
There was a problem hiding this comment.
我不太建议直接动任何 module.scss，它们是底样式，永远存在于样式表里，很容易影响用户的模板，应该只把更改限制在 public/game/template 中
2 participants
将调整：
1、文本框 UI，使其更加通用化，降低存在感
2、标题 UI，去除按钮边框，优化文本显示（通过描边，阴影和微调颜色来提高存在感，但不打扰背景）
此 PR 合并后，将之前的 UI 作为一个模板 WebGAL Classic 内置到 WebGAL Terre，然后将新的模板命名为 WebGAL Refine 2026