docs(ui): 记录原版 UI 还原方法与设置页验证
This commit is contained in:
TermiNexus committed
1 parent
c2cb8e21fb
commit
b5c748da75
2 files changed
+145
No files matched your search
@@ -282,3 +282,147 @@ TankiOffline (Kotlin/JS 客户端)
|
||||
- [ ] 车库按 9.2 的原版布局重建 + 3D 预览加载器。
|
||||
- [ ] 协议级 mock 服务器（用户 / 大厅列表 / 任务）。
|
||||
- [ ] 大厅其余屏幕迁移到 React。
|
||||
|
||||
---
|
||||
|
||||
## 10. 原版 UI 还原方法（已验证，2026-10-26 设置页）
|
||||
|
||||
> 这一节记录的是实际跑通的方法。后续所有页面都按这个流程做，不再先写通用样式再“看起来像”。
|
||||
|
||||
### 10.1 原则
|
||||
|
||||
1. **不自己设计 UI**：布局、尺寸、颜色、类名、DOM 层级都以混淆版源码/原版 DOM 为唯一来源。
|
||||
2. **先找定义，再做映射**：找不到原版定义就标注“未展开”，不靠截图猜。
|
||||
3. **能用原版资源就不画近似**：图标、勾、knob、箭头、背景图优先用 `play/static/images` 里的原版资源。
|
||||
4. **文案走 i18n**：使用 `Translations.T("lobby....")`，不硬编码中文。
|
||||
5. **颜色走配色表**：使用 `Palette.kt`（来源 `C9i`），不手写近似色。
|
||||
6. **每页完成后删除旧近似样式和死代码**，避免两套样式并存。
|
||||
|
||||
### 10.2 定位组件定义
|
||||
|
||||
1. 在 `module_82347.js` 搜索：
|
||||
```js
|
||||
Sq(Class, "XxxComponentStyle", ...)
|
||||
```
|
||||
找到样式类。
|
||||
2. 看类构造器：
|
||||
```js
|
||||
this.xxx_1 = this.aux([], styleFn)
|
||||
```
|
||||
找到字段与对应 `styleFn`。
|
||||
3. 看访问器：
|
||||
```js
|
||||
jq(Class).accessor = function () { ... Eq("fieldName", ...) ... }
|
||||
```
|
||||
确认字段名和生成的语义类名。
|
||||
4. 找渲染函数/组件：`jq(Component).tap` / `render`，确认 DOM 层级和子组件。
|
||||
5. 把类名、字段、行号记录到对应的 `*StyleTable.md`。
|
||||
|
||||
示例（设置页）：
|
||||
|
||||
| 组件 | 类 / 函数 | 位置 |
|
||||
|---|---|---|
|
||||
| `SettingsComponentStyle` | `kNi` | `module_82347.js:89525` |
|
||||
| `SettingsMenuComponentStyle` | `EMi` | `90329` |
|
||||
| `SettingsButtonsComponentStyle` | `UPi` | `89326` |
|
||||
| `DropDownStyle` | `J7t` | `34073` |
|
||||
| `ContextMenuStyle` | `u7t` | `33638` |
|
||||
| `CheckBoxComponentStyle` | `QBi` | `92742` |
|
||||
| `CheckBoxStyle` | `Z0t` | `33272` |
|
||||
| `InputRangeComponentStyle` | `EUi` | `92980` |
|
||||
|
||||
### 10.3 提取真实 CSS
|
||||
|
||||
1. 在无头页面加载 `module_37036`（Kotlin 运行时）+ `module_82347`。
|
||||
2. 实现最小 webpack require：`i(id)`、`i.p`、`i.d`、`i.r`、`i.n`、`i.o`、`i.hmd`。
|
||||
3. patch `module_37036` 的 `ld`，捕获 `Sq(Class, Name)` 注册表。
|
||||
4. 实例化目标样式类，遍历 `kuv_1.a1_1`，执行每个 `entry.duv_1[0](recorder)`。
|
||||
5. recorder 记录 `rpf` / `gp8` / `jp8` / `lp7` / `qp7`，输出 base/nested CSS。
|
||||
6. 动态方法直接调用，例如：
|
||||
- `d1mg(recorder, important)`：下拉选项
|
||||
- `m1md` / `n1md`：复选框 / Toggle Switch
|
||||
- `hUi.tap`：滑杆进度渐变
|
||||
7. 提取结果写入 `*StyleTable.md`，作为实现依据。
|
||||
|
||||
### 10.4 还原真实 DOM 和类名
|
||||
|
||||
1. 按原版 DOM 写结构，不替换成自创的 `button` / `div`。
|
||||
2. 保留语义类名：
|
||||
- `InputRangeComponentStyle-blockSoundVolume`
|
||||
- `InputRangeComponentStyle-soundVolume`
|
||||
- `InputRangeComponentStyle-range`
|
||||
- `SettingsComponentStyle-slider`
|
||||
- `CheckBoxComponentStyle-oneSetting`
|
||||
- `CheckBoxStyle-checkbox`
|
||||
- `DropDownStyle` / `ContextMenuStyle` 相关类
|
||||
3. 保留原版 `ksc-*` 标记用于核对，例如 `ksc-56`（百分比）、`ksc-57`（滑杆）、`ksc-62`（Switch）、`ksc-63`（标签容器）。
|
||||
4. 原版 DOM 示例：
|
||||
|
||||
滑杆：
|
||||
```html
|
||||
<div class="InputRangeComponentStyle-blockSoundVolume SettingsComponentStyle-slider">
|
||||
<p>主音量<span class="ksc-56">(80%)</span></p>
|
||||
<div class="InputRangeComponentStyle-soundVolume">
|
||||
<input class="ksc-57 InputRangeComponentStyle-range" type="range" ...>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Switch：
|
||||
```html
|
||||
<div class="ksc-46">
|
||||
<div class="CheckBoxComponentStyle-oneSetting">
|
||||
<div class="CheckBoxStyle-checkbox">
|
||||
<label><input class="ksc-47" type="checkbox"><span class="ksc-62 -displayFlex"></span></label>
|
||||
</div>
|
||||
<div class="ksc-63 -flexStartAlignCenter"><label>显示帧数和延迟</label></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 10.5 提取原版资源
|
||||
|
||||
1. 资源模块通常长这样：
|
||||
```js
|
||||
67116:(t,n,i)=>{ t.exports = i.p + "static/images/correct.afad1b22.svg" }
|
||||
```
|
||||
2. 通过 IIFE 参数表与调用参数对齐，找到变量对应的 module id：
|
||||
- `Vn` → module `67116` → `correct.afad1b22.svg`（Switch 开）
|
||||
- `Kn` → module `13357` → `incorrectCheck.1918884a.svg`（Switch 关）
|
||||
- `$n` → module `74120` → `checkMark.fb44274a.svg`（方形复选框勾）
|
||||
3. 资源放到 `/play/static/images/`，直接引用，不再用 CSS 画近似图形。
|
||||
|
||||
### 10.6 配色 / i18n / 尺寸
|
||||
|
||||
- 颜色：`C9i` / `E9i()` 主题对象 → `Palette.kt` → `ColorPalette.md`。
|
||||
- 文案：`Translations.T("lobby....")`，语言切换走 `Translations.LoadLocale`。
|
||||
- 尺寸：直接使用 style 函数里的 em 值；`1em ≈ 12.96px`（1296×1006）。
|
||||
- 细节：百分比位置、颜色、间距、圆角都按原 DOM / style 函数，不凭感觉调。
|
||||
|
||||
### 10.7 验收
|
||||
|
||||
1. 无头探针打开页面，记录 DOM、rect、computed style、截图。
|
||||
2. 对比项：
|
||||
- 语义类名 / `ksc-*` 标记是否存在
|
||||
- 尺寸、间距、圆角、边框
|
||||
- 颜色（背景、文字、强调色、进度、Switch）
|
||||
- 交互（下拉展开/滚动、滑杆拖动、Switch 切换）
|
||||
3. 与 `*StyleTable.md` 对齐；不一致就回到 10.2 重新提取。
|
||||
4. 完成后删除旧近似样式、未使用函数、死代码。
|
||||
|
||||
### 10.8 设置页验证记录
|
||||
|
||||
设置页已按本方法完成：
|
||||
|
||||
- HEAD 复用主页顶栏，只替换 VIP 为退出键。
|
||||
- 菜单顺序：游戏显示 / 战斗 / 画面 / 音效 / 操控 / 账户 / 安全。
|
||||
- 颜色全部走 `Palette`。
|
||||
- 文案全部走 i18n。
|
||||
- 滑杆：原版 DOM + `InputRangeComponentStyle` + 进度渐变。
|
||||
- Switch：原版 `CheckBoxComponentStyle-oneSetting` + `ksc-62` + 原版圆形 knob。
|
||||
- 下拉：`DropDownStyle` + `ContextMenuStyle` + 固定选项高度 + 按需滚动。
|
||||
|
||||
详细映射见：
|
||||
|
||||
- `3DTank/docs/SettingsStyleTable.md` 第 6/7/8 节
|
||||
- `3DTank/docs/ColorPalette.md`
|
||||
@@ -57,4 +57,5 @@
|
||||
- 已用无头浏览器核对非战斗页面：首页、车库（总览/底盘/迷彩）、商店、礼盒、战斗选择、任务、设置（游戏/画面/音效）、聊天、新闻、军团、好友。
|
||||
- 任务/新闻/好友在离线无数据时显示带「离线示例」标记的演示内容；连接服务器后自动使用真实状态。
|
||||
- **设置页已按原包 style 类展开值重建**；其余非战斗页面仍使用通用 `UiTheme` 样式，尚未逐页校准，不能视为最终 1:1。
|
||||
- 原版 UI 还原方法已写入 `3DTank/docs/UI_Rebuild_Plan.md` 第 10 节：定位 `Sq(...Style)` → 提取 style 函数 CSS → 还原原版 DOM/类名 → 提取资源/配色 → 无头探针验收 → 删除旧近似代码。
|
||||
- 下一步：以设置页为基准，逐页提取原版 style 类并替换，再处理战斗 HUD / 结算的精确尺寸与弹窗实例。
|
||||
Reference in new issue
Block a user