RFC4：WebGAL 新 UI 自定义方案
总体方案
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 个档位
- 左侧展示存档详情，右侧展示档位
- ...
设置、鉴赏选项也会提高类似的预置布局可选。
下一步工作
研究如何支持存读档、设置、鉴赏界面的布局编辑。