139 lines
9.2 KiB
Markdown
139 lines
9.2 KiB
Markdown
# Settings Style Table（设置页校准）
|
||
|
||
> 来源：`3dtank.com/play/static/js/unpacked/module_82347.js` 的 `SettingsComponentStyle` / `SettingsMenuComponentStyle` / `SettingsButtonsComponentStyle` / `GameSettingsStyle` / `DropDownStyle` / `CheckBoxComponentStyle` / `InputRangeComponentStyle`。
|
||
> 方法：在无头页面中加载原包模块，patch `module_37036` 的 `ld` 捕获样式类，实例化样式类后逐个执行 `duv_1[0]` 样式函数，并用 recording style object 记录 `rpf` / `gp8` 调用。
|
||
> 配色：`ColorPalette.md` / `Palette.kt`，直接来自 `C9i`（`E9i()`）构造器。
|
||
|
||
## 0. 页面外壳
|
||
|
||
- 子页面**复用主页 HEAD**，只把左侧 VIP 区域替换成退出键；组队、等级、昵称/经验、Logo、货币、F11、退出都不变。
|
||
- 不再使用独立 Breadcrumbs 顶栏。
|
||
- 设置菜单顺序：游戏显示 / 战斗 / 画面 / 音效 / 操控 / 账户 / 安全。
|
||
- 文案全部走 `Translations` i18n，语言下拉切换 `Translations.LoadLocale` 并重绘。
|
||
|
||
## 1. 页面骨架
|
||
|
||
| 原版字段 | CSS |
|
||
|---|---|
|
||
| `str.container`（页面根） | `background:radial-gradient(#203040 0%, #03080D 100%); width:100%; height:100%; position:absolute; margin:0` |
|
||
| `blockContentOptions` | `display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; width:72.25em; height:calc(100% - 8.5em); padding-top:4.5em; position:relative` |
|
||
| `scroll` | `display:flex; flex-direction:column; width:46.875em; overflow-x:hidden; overflow-y:scroll; scrollbar-width:thin` |
|
||
| `settingsBlockOptions` | `display:flex; flex-direction:column; width:46.875em; height:100%; padding:1.875em; padding-bottom:0; background:rgba(255,255,255,0.1); position:relative` |
|
||
| `containerBlock` | `width:50.625em; height:100%; padding-left:2.625em` |
|
||
| `borderLineOption` | `width:49.125em; height:0.063em; margin-left:-1.875em; margin-bottom:1.875em; background:rgba(255,255,255,0.1)` |
|
||
| `commonBlock` | `display:flex; flex-direction:column; justify-content:flex-start; align-items:center; width:100%; height:auto` |
|
||
| `rowBlock` | `display:flex; flex-direction:row; justify-content:space-between; align-items:center; width:100%; height:auto` |
|
||
| `textHeadlineOptions` | `font:500 1.125em/normal BaseFontBold; text-transform:uppercase` |
|
||
| `dropDownTitle` | `font:400 1em/normal BaseFontRegular; margin:0 0 1em` |
|
||
| `dropDown` | `width:30.625em; margin-bottom:1.75em` |
|
||
| `slider` | `width:31.25em` |
|
||
|
||
## 2. 左侧菜单
|
||
|
||
| 原版字段 | CSS |
|
||
|---|---|
|
||
| `slideMenuOptions` | `display:flex; flex-direction:column; justify-content:center; width:18em; height:2.5em; background:linear-gradient(to right,#2E3235,rgba(46,50,53,0)); color:rgb(255,188,9); z-index:1; transition:all .1s ease-in-out; position:relative` |
|
||
| `yellowLineMenuOptions` | `width:0.313em; height:2.5em; background:rgb(255,188,9); position:absolute; z-index:3` |
|
||
| `menuItemOptions` | `display:flex; align-items:center; justify-content:flex-start; width:18em; height:5em; position:relative; z-index:4; cursor:pointer` |
|
||
| `menuItemOptions span` | `font:500 1.125em/normal BaseFontBold; text-transform:uppercase; margin-left:1.875em; margin-top:0.1em; color:rgba(255,255,255,0.6)` |
|
||
| `activeItemOptions span` | `color:white; transition:.5s` |
|
||
|
||
## 3. 底部按钮
|
||
|
||
| 原版字段 | CSS |
|
||
|---|---|
|
||
| `containerGroupButton` | `display:flex; align-items:center; justify-content:flex-end; width:100%; height:3.125em; padding-bottom:1.875em; align-self:flex-end; background:transparent` |
|
||
| `buttonsWidthBackReset` | `width:15.625em` |
|
||
| `buttonSaveLeave` | `width:18.125em` |
|
||
|
||
## 4. 控件
|
||
|
||
| 原版类/字段 | CSS |
|
||
|---|---|
|
||
| `DropDownStyle` 容器 | `width:100%; position:relative` |
|
||
| `DropDownStyle` 按钮 | `display:flex; align-items:center; justify-content:space-between; min-width:4.375em; width:100%; height:3.125em; border:0.063em solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.1); padding:0 0.875em; box-sizing:border-box` |
|
||
| `CheckBoxComponentStyle` | `display:flex; align-items:center; justify-content:flex-start; width:100%; height:2.25em; margin-bottom:1.25em` |
|
||
| 设置页 Toggle Switch | `width:2.75em; height:1.5em; border:0.063em solid rgba(255,255,255,0.2); border-radius:6.25rem; background:rgba(118,255,51,0.25)`（开）/ `rgba(191,213,255,0.25)`（关）；knob 使用原版 `correct.afad1b22.svg` / `incorrectCheck.1918884a.svg` 圆形图标 |
|
||
| `DropDownStyle` 菜单 | `min-width:18.25em; background:rgba(0,25,38,0.9); backdrop-filter:blur(3.125em); position:absolute; z-index:999; display:flex; flex-direction:column` |
|
||
| `DropDownStyle` 选项 | `height:2.563em; min-height:2.563em; flex:0 0 2.563em; width:100%; display:flex; align-items:center; justify-content:flex-start; cursor:pointer`；hover `rgba(255,255,255,0.1)`；文字 `margin:0 2.125em; font-size:0.9375em` |
|
||
| 下拉滚动 | 菜单 `max-height:15.75em; overflow-y:auto; scrollbar-gutter:stable`；选项固定高度，不参与 flex 收缩，超过上限后滚动 |
|
||
| 选中选项 | `color:rgb(162,255,106); background:rgba(255,255,255,0.1)` |
|
||
| `InputRangeComponentStyle` | `display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; height:3.188em; min-height:3.188em; margin-bottom:1.75em` |
|
||
| `InputRangeComponentStyle` label | `color:white; font-size:0.9375em; margin-top:0` |
|
||
| `InputRangeComponentStyle` input | `-webkit-appearance:none; width:100%; height:0.563em; background:transparent; cursor:pointer` |
|
||
| range track | `height:0.375em; background:transparent`；进度用 `linear-gradient(to right,#ffbc09 0%,#ffbc09 X%,rgba(255,255,255,0.1) X%,rgba(255,255,255,0.1) 100%)` |
|
||
| range thumb | `width:1.875em; height:1em; border-radius:0.25em; background:rgb(255,188,9); margin-top:-0.3em` |
|
||
| `GameSettingsStyle.containerFormOptions` | `display:flex; flex-direction:column; margin-left:0.9em; margin-bottom:1em` |
|
||
| `GameSettingsStyle.notificationText` | `color:rgba(255,255,255,0.5); text-align:left` |
|
||
|
||
## 5. 当前仍为近似
|
||
|
||
- 设置行的组合方式：已按 `rowBlock` / `dropDownTitle` / `slider` / `CheckBoxComponentStyle` 的尺寸重建，但原版每个设置项的具体子组件层级仍需继续展开。
|
||
- 下拉选项弹层：已按 `DropDownStyle` + `ContextMenuStyle` 还原菜单/选项高度、背景、hover、选中色；使用 `position:fixed` + 控件 `getBoundingClientRect()`，宽度等于选择框、紧贴下沿，避免被设置面板滚动容器裁剪。
|
||
- 菜单滑动条：当前按 `index * 5em + 1.25em` 计算，原版由组件状态计算 `margin-top`。
|
||
- 部分设置项的分组/顺序仍以官方 key 和现有状态为准，后续可继续按原组件 render 树核对。
|
||
|
||
## 6. 原版组件定义位置
|
||
|
||
| 组件 / 样式 | 混淆版类 / 函数 | 位置 |
|
||
|---|---|---|
|
||
| `SettingsComponentStyle` | `kNi` | `module_82347.js:89525` |
|
||
| `SettingsMenuComponentStyle` | `EMi` | `module_82347.js:90329` |
|
||
| `SettingsButtonsComponentStyle` | `UPi` | `module_82347.js:89326` |
|
||
| `GameSettingsStyle` | `BAi` | `module_82347.js:88190` |
|
||
| `DropDownStyle` | `J7t` | `module_82347.js:34073` |
|
||
| `ContextMenuStyle`（下拉菜单/选项） | `u7t` | `module_82347.js:33638` |
|
||
| `CheckBoxComponentStyle` | `QBi` | `module_82347.js:92742` |
|
||
| `CheckBoxStyle`（Toggle Switch） | `Z0t` | `module_82347.js:33272` |
|
||
| `InputRangeComponentStyle` | `EUi` | `module_82347.js:92980` |
|
||
| `InputRangeComponentStyle-blockSoundVolume` | `wUi` | `module_82347.js:92880` |
|
||
| `InputRangeComponentStyle-range` | `kUi` | `module_82347.js:92930` |
|
||
| 滑杆进度渐变 | `hUi.tap` | `module_82347.js:200507` |
|
||
| `SettingsComponentStyle-slider` | `kNi.z1jp_1` | `module_82347.js:89620` |
|
||
|
||
`ksc-130` 是 `SettingsComponentStyle-slider` 的 Emotion 生成类名；当前实现直接使用 `InputRangeComponentStyle-*` / `SettingsComponentStyle-slider` 语义类名，并用 `ksc-56` / `ksc-57` 标记标签与滑杆。
|
||
|
||
## 7. 真实 DOM 结构
|
||
|
||
滑杆：
|
||
|
||
```html
|
||
<div class="InputRangeComponentStyle-blockSoundVolume SettingsComponentStyle-slider">
|
||
<p>主音量<span class="ksc-56">(80%)</span></p>
|
||
<div class="InputRangeComponentStyle-soundVolume">
|
||
<input type="range" min="0" max="100" step="1"
|
||
class="ksc-57 InputRangeComponentStyle-range" value="80">
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
开关：
|
||
|
||
```html
|
||
<div class="ksc-46">
|
||
<div class="CheckBoxComponentStyle-oneSetting">
|
||
<div class="CheckBoxStyle-checkbox">
|
||
<label>
|
||
<input type="checkbox" class="ksc-47" checked>
|
||
<span class="ksc-62 -displayFlex"></span>
|
||
</label>
|
||
</div>
|
||
<div class="ksc-63 -flexStartAlignCenter">
|
||
<label>显示帧数和延迟</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
当前实现已按这个结构输出；带描述的开关行增加 `has-description` 修饰类，让描述与标签对齐。
|
||
|
||
## 8. 本轮细节修正
|
||
|
||
- 下拉列表不再设置 `scrollbar-gutter`；无溢出时不预留滚动条空间。
|
||
- 选项数 > 6 时 `overflow-y: scroll`，否则 `auto`；选项固定高度 `2.563em`，不参与 flex 收缩。
|
||
- 滑杆百分比 `(xx%)` 使用原版浅绿 `rgb(162,255,106)`。
|
||
- 开关与文字之间增加 `0.75em` 间距。
|
||
- 开关背景提高到 `rgba(118,255,51,0.35)` / `rgba(191,213,255,0.35)`，更接近原版亮度。
|
||
- 侧边栏选中文字改为 `display:flex; align-items:center; height:100%`，垂直居中。
|
||
- `.ms-top` 只保留定位，不再叠加半透明背景；HEAD 背景由 `HeadScreen.RootStyle` 的原版渐变提供。
|