rfc4

Author: MakinoharaShoko

blog/posts/rfc4/index.md

@@ -0,0 +1,72 @@
+---
+title: 'RFC4：WebGAL 新 UI 自定义方案'
+author: 'Mahiru'
+date: '2026-6-5'
+tags: ['RFC']
+---
+
+## 总体方案
+
+WebGAL 将启用新的 UI 自定义方案。该方案将计划支持更加丰富的自定义选项，并支持一定程度上的布局自定义。具体来说，我们将大幅修改 WebGAL 引擎 UI 的实现方式，将布局切换到基于绝对定位的方案，以方便 UI 布局的自定义。
+
+## UI 描述文件
+
+新的 UI 描述文件将布局描述和样式描述放在一起。
+
+每一个界面拥有一个 UI 描述文件，包含多个组件的描述。对于任何组件，描述都分为两部分：布局和样式。
+
+- 布局：组件的相对位置、宽高、内外边距等
+- 样式：背景图像、颜色、阴影等
+
+由于 CSS 支持较为丰富的样式自定义选项，因此样式方面，还是继续沿用目前的 CSS in JS 方案，但是实现方式有很大差别。目前的方案主要使用 CSS 覆盖组件的默认样式，而新方案则在加载自定义样式后，移除原组件的“兜底”样式，将其完全交给自定义 UI 系统。
+
+## 布局编辑器
+
+组件分为布局编辑和样式编辑两部分，类似 Figma。
+
+布局编辑器主要编辑组件的变换、尺寸和边距。
+
+当选中某个组件并打开布局编辑器时，可在预览界面中联动调整。
+
+## 样式编辑器
+
+样式编辑仍然使用 CSS in JS 的方案，但是相比于之前只是简单将 CSS 属性映射到可视化编辑条目的方案，本次使用更加简单和易于理解的方式实现。
+
+### 简易模式
+
+我们将支持简易模式。简易模式包括一些常用的组件，比如字体描边颜色，字体颜色，阴影设定等。
+
+**需要特别注意的是**，简易模式最大的意义在于便捷调整一些需要联动的 CSS 属性，比如对于字体颜色，如果要设置渐变色这样的复杂样式，需要先将字体颜色设为透明，然后设置 `background-clip`，然后设置 `background`。先前的方案对用户来说不容易令人理解的就是这之间的相关性，所以可能出现调了颜色却发现没生效，或者设置了颜色后就难以调整为渐变色的情况。简易模式不走 CSS 属性可视化编辑，而是用自动化组合映射为 CSS 属性，并写到组件的样式描述区域，然后直接覆盖写入受影响的几个字段。比如对于调整字体颜色（或背景），在简易模式调整后，就同时覆盖写入 `color`, `background`, `background-clip` 三个字段。
+
+简易模式的“简易”，是“使用简易”的简易，不一定意味着“功能简易”。如果我们可以找到好方法可视化一些复杂 CSS 属性的编辑，那么将尽可能支持它们。
+
+### 完全 CSS 自定义模式
+除了简易模式外，如果需要更加细化和高级的 CSS 属性自定义，我们也支持完全 CSS 定制模式。切换到完全 CSS 定制模式后，将展示一个 CSS 代码编辑器，以供编辑。
+
+### 简易模式与完全 CSS 自定义模式的兼容性
+总的来说，支持简易模式和完全 CSS 定制模式。简易模式会覆盖相关 CSS 样式，但是也可以详细编辑。当然，简易模式只会动相关样式，如果用户通过 CSS 自定义了一些额外的属性，我们不会去碰。正如之前说的，**只覆盖写入相关字段**。
+
+## 预设样式
+
+相比于之前直接给出一整个预设模板的方案，新的 UI 自定义方案将用预设样式来替换预设模板。
+
+简而言之，预设将以组件的粒度提供。在模板编辑器中，编辑对应组件时，可以直接应用一个预设的组件样式，并基于这个样式修改。在预设样式应用的时候，会**完全覆盖组件 CSS 全字段**，因此需要提醒用户注意。
+
+## 只支持样式编辑的组件，预置布局
+
+对于标题、文本框等，在一个界面上只会出现一次的组件，使用绝对定位是可行的。但是对于设置页面的设置项、存读档页面的档位这样的，涉及列表渲染、交互逻辑的，则难以支持基于绝对定位的布局。
+
+这些组件，暂时被设定为“只支持样式编辑的组件”。然而，只允许自定义样式，不允许自定义布局会使得游戏千篇一律，因此，我们将内置一些预置布局以供使用。
+
+比如，对于存/读档，可以是预置以下一些布局：
+
+- 竖向列表展示
+- 竖向列表展示，一行 2/3 个档位
+- 左侧展示存档详情，右侧展示档位
+- ...
+
+设置、鉴赏选项也会提高类似的预置布局可选。
+
+## 下一步工作
+
+研究如何支持存读档、设置、鉴赏界面的布局编辑。