9.2 KiB
9.2 KiB
Settings Style Table（设置页校准）
来源：
3dtank.com/play/static/js/unpacked/module_82347.js的SettingsComponentStyle/SettingsMenuComponentStyle/SettingsButtonsComponentStyle/GameSettingsStyle/DropDownStyle/CheckBoxComponentStyle/InputRangeComponentStyle。 方法：在无头页面中加载原包模块，patchmodule_37036的ld捕获样式类，实例化样式类后逐个执行duv_1[0]样式函数，并用 recording style object 记录rpf/gp8调用。 配色：ColorPalette.md/Palette.kt，直接来自C9i（E9i()）构造器。
0. 页面外壳
- 子页面复用主页 HEAD，只把左侧 VIP 区域替换成退出键；组队、等级、昵称/经验、Logo、货币、F11、退出都不变。
- 不再使用独立 Breadcrumbs 顶栏。
- 设置菜单顺序：游戏显示 / 战斗 / 画面 / 音效 / 操控 / 账户 / 安全。
- 文案全部走
Translationsi18n，语言下拉切换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 结构
滑杆：
<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>
开关：
<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的原版渐变提供。