docs: add template reference#91
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces comprehensive documentation and configuration references for WebGAL's custom UI templates, including detailed TSX structures and CSS class guides for components like choose, textbox, title, and config. While the additions are highly valuable, there are two issues in the documentation code snippets: a trailing comma in a JSON configuration example within config.md that violates standard JSON syntax, and an incorrect class interpolation of an object returned by getTextLineHeightCss() in textbox.md which should be moved to the style attribute.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| "style": "normal", | ||
| "display": "auto" | ||
| } | ||
| ], |
There was a problem hiding this comment.
在 JSON 格式中，数组或对象的最后一个元素后面不能有逗号（trailing comma）。如果保留此逗号，标准的 JSON 解析器（如 JSON.parse）在解析 template.json 时会报错，导致模板无法加载。建议移除该逗号。
| ], | |
| ] |
| return <div | ||
| class={`${getTextLineHeightCss()} text`} | ||
| style={{ | ||
| fontSize: getTextSize(WEBGAL.settings.textSize), | ||
| flexFlow: "column", | ||
| overflow: "hidden", | ||
| paddingLeft: "0.1em", | ||
| }} | ||
| > |
There was a problem hiding this comment.
getTextLineHeightCss() 函数返回的是一个样式对象（例如 { lineHeight: '2em' }），而不是一个 CSS 类名字符串。在模板字符串中直接插值 ${getTextLineHeightCss()} 会导致其被转换为 "[object Object]"，从而产生错误的类名 "[object Object] text"。建议将行高样式合并到 style 属性中。
| return <div | |
| class={`${getTextLineHeightCss()} text`} | |
| style={{ | |
| fontSize: getTextSize(WEBGAL.settings.textSize), | |
| flexFlow: "column", | |
| overflow: "hidden", | |
| paddingLeft: "0.1em", | |
| }} | |
| > | |
| return <div | |
| class="text" | |
| style={{ | |
| ...getTextLineHeightCss(), | |
| fontSize: getTextSize(WEBGAL.settings.textSize), | |
| flexFlow: "column", | |
| overflow: "hidden", | |
| paddingLeft: "0.1em", | |
| }} | |
| > |
|
@HardyNLee PR check 构建失败了 |
已修复 |
2 participants
介绍
新增模板参考章节，用以解释各 CSS 类的作用，以及它们所在的 HTML 元素结构。
其他
为什么在结构那里写一堆代码？而且还是伪代码？
因为实际上元素结构并不固定，类名组合方式太多了，直接写成代码也许还更清晰一点。
这样写代码真的能有帮助吗？和让用户去读源码有什么区别？
我也不确定应该怎么更清晰地解释这些会变动的元素结构和类名组合，但我尽可能地剔除了不相关的内容，让代码更专注于类名和元素。