7.9 KiB
7.9 KiB
HEAD Style Table
来源：
3dtank.com/play/static/js/unpacked/module_82347.js+module_63383.js（CSS DSL）+module_24923.js（ksc 样式引擎）+module_37036.js（Kotlin 运行时）。 目标：把原版 Kotlin/JS style 函数逐块展开成具体 CSS，再 1:1 写成 Emotion style object。
0. 先澄清 Sq / Lq
Sq = To.$_$.ld, // module_37036: ld = ie = ne("object", ...)
Lq = To.$_$.gd, // module_37036: gd = te = ne("class", ...)
Sq / Lq 是 Kotlin class/object metadata，不是 Emotion 注册。
真正的样式类：
d7n=MainScreenComponentStylefni=UserInfoContainerStyleYni=UserScoreComponentStyleo2n=HeaderCommonStyle
样式值在 K2n / X2n / J2n / Z2n / Q2n / Oti / Dti / Kti / Jti 这些 DSL 函数里。
1. DSL 映射
| 压缩名 | 导出 | CSS |
|---|---|---|
Wy |
Ho.$_$.sb → Pc |
width |
Vy |
Ho.$_$.b9 → ua |
height |
fx |
Ho.$_$.n6 → m_ |
background |
jj |
Ho.$_$.x6 → Uu |
borderBottom |
B$ |
Ho.$_$.vb → Bc |
zIndex |
Hy |
Ho.$_$.ia |
new Os(t, "%") → 百分比 |
Zy |
Ho.$_$.e8 |
new Os(t, "em") → em |
Knr(px) |
本地函数 | Zy(px / 16) → px 转 em（16px 基准） |
t.gp8("x", "y") |
原始 CSS | 直接写属性 |
2. 已确认的原版函数
| 原版函数 | 语义 | 展开值 |
|---|---|---|
Oti |
rankIconContainer |
width: 95px → 5.9375em，height: 96px → 6em，position: relative |
Dti |
containerRightBorder |
border-right: 1px solid rgba(255,255,255,0.25) |
Kti |
blockLeftPanel |
position: relative，width: P$().np9_1（线上 12.5em），z-index: 2 |
Jti |
containerProgressMainScreen |
width: 10em，height: 3.75em，margin-top: 1em |
Xti |
titleRankIcon |
width: 4.375em，height: 4.375em，margin-left: 0 0.813em |
Zti |
progress bar | height: 0.875em，margin-bottom: 0.55em，opacity: 0.8 |
Qti |
xp icon | width: 1em，height: 1em，margin-bottom: 1px |
Q2n |
buttonPlay |
backdrop-filter: blur(1.563em)，width: 350px → 21.875em，height: 172px → 10.75em |
Z2n |
gradientBlockRight |
linear-gradient(90deg,#000 0%,rgba(0,0,0,0) 100%)，width: 444px → 27.75em，opacity: .75，transform: rotate(-180deg) |
3. HEAD 组件表
data-ui |
原版/线上对应 | CSS | Emotion |
|---|---|---|---|
head.root |
MainScreenComponentStyle-containerPanel |
display:flex; align-items:center; justify-content:space-between; width:100%; height:100%; position:relative; background:linear-gradient(180deg,rgba(0,25,38,.98),rgba(0,16,24,.94)); border-bottom:1px solid rgba(255,255,255,.25) |
RootStyle |
head.left |
blockLeftPanel |
display:flex; align-items:center; height:100% |
LeftStyle |
head.vip |
主页 VIP 区 | width:6em; height:6em; display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer; background:radial-gradient(100% 100% at 0% 0%, rgba(255,204,0,.75) 0%, rgba(255,38,74,.5) 50%, rgba(255,38,74,0) 100%)；off：opacity:.55; filter:grayscale(.3) |
VipStyle(On) |
head.exit |
子页面 VIP → 退出键 | width:6em; height:6em; display:flex; align-items:center; justify-content:center; border:0; box-shadow:1px 0 0 0 rgba(255,255,255,.25); background:transparent; cursor:pointer；图标 back.72d79619.svg（左箭头，不是右上角的退出箭头） |
ExitStyle |
head.group |
组队区 | width:6em; height:6em; display:flex; align-items:center; justify-content:center; position:relative; border-left:1px solid rgba(255,255,255,.25); cursor:pointer |
GroupStyle(Active) |
head.group.g1 |
组队图标左半 | position:absolute; top:50%; left:50%; width:1.5em; height:1.5em; margin-top:-.75em; margin-left:-.75em; background:rgba(191,212,255,.5); mask:url(groupUser.svg) center/contain no-repeat; transform:translateX(-.8em) |
GroupIconStyle("-0.8em") |
head.group.g2 |
组队图标右半 | 同上，translateX(.8em) |
GroupIconStyle("0.8em") |
head.rank |
rankIconContainer |
width:5.9375em; height:6em; display:flex; align-items:center; justify-content:center; border-right:1px solid rgba(255,255,255,.25); cursor:pointer |
RankStyle |
head.user |
containerProgressMainScreen 外层 |
display:flex; flex-direction:column; justify-content:center; min-width:10em; margin-left:1em; height:3.75em |
UserStyle |
head.user.name |
昵称 | font:500 1.1em/1.2 BaseFontMedium; text-shadow:0 0 .25em rgba(0,0,0,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis |
UserNameStyle |
head.user.xp |
xp-bar |
width:12.5em; height:.25em; margin-top:.375em; background:rgba(118,255,51,.5); border-radius:.375em; overflow:hidden |
XpBarStyle |
head.user.xp.wrap |
containerParameterProgress |
display:flex; align-items:flex-start; height:.875em; margin-top:.55em; opacity:.8; white-space:nowrap |
XpBarWrap |
head.user.xp.fill |
XP 进度 | display:block; height:100%; width:<ratio>%; background:rgba(118,255,51,.8); border-radius:inherit |
XpFillStyle(Ratio) |
head.user.xp.text |
XP 数字 | display:flex; align-items:center; margin-top:.35em; margin-left:.25em; font:500 1em/1 BaseFontMedium; text-shadow:0 0 .25em rgba(0,0,0,.5); color:rgb(118,255,51) |
XpTextStyle |
head.logo |
blockForIconTankiOnline |
position:absolute; inset:0; margin:auto; display:flex; align-items:center; justify-content:center; z-index:1; pointer-events:none；图片 iconTankiOnline.2a9c236f.svg，192×60px → 14.81em×4.63em |
LogoStyle |
head.right |
blockRightPanel |
display:flex; align-items:center; height:100%; z-index:5 |
RightStyle |
head.currencies |
coinsContainer |
display:flex; flex-direction:column; justify-content:center; height:100%; width:9.2em; box-sizing:border-box; border-right:1px solid rgba(255,255,255,.25); margin-right:2em |
CurrenciesStyle |
head.currency.ruby |
红宝石 | position:relative; display:flex; align-items:center; gap:.4em; width:100%; height:3em; padding:0 .75em 0 .6em; box-sizing:border-box; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.25) |
CurrencyStyle(true) |
head.currency.crystal |
水晶 | 同上，无 border-bottom |
CurrencyStyle(false) |
head.fullscreen |
F11 | display:flex; align-items:center; justify-content:center; gap:.3em; width:6em; height:6em; border-left:1px solid rgba(255,255,255,.25); cursor:pointer |
FullscreenStyle |
head.logout |
退出 | display:flex; align-items:center; justify-content:center; width:6em; height:6em; border:0; border-left:1px solid rgba(255,255,255,.25); background:transparent; cursor:pointer |
LogoutStyle |
4. 子页面状态
HeadContext.Page：
"home"：渲染head.vip- 其它（如
"garage"）：渲染head.exit，点击调用HeadContext.OnBack()
5. 验收
无头探针：
node 3DTank/tools/headless_probe.js `
--url "http://localhost:8080/?autoconnect=1&v=19" `
--out "build/probe/head-home" `
--width 1296 --height 1006 --wait 6000
子页面：
node 3DTank/tools/headless_probe.js `
--url "http://localhost:8080/?autoconnect=1&v=19" `
--out "build/probe/head-garage" `
--width 1296 --height 1006 --wait 6000 `
--eval-file "3DTank/tools/probe_garage.js"
断言项：
head.root：1296×77.75head.vip/head.exit：77.75×77.75head.group：77.75×77.75head.rank：77.75×77.75head.user：162×48.59head.currencies：119.22×77.75head.fullscreen/head.logout：77.75×77.75
6. 待核对常量
otr().k1i9()/q1i7()/r1i7()/h1if()/h1iw()/c1jf()/g1ie()：display / position / flex 组合P$().np9_1：线上实测 12.5emE9i().z1hz_1/b1i1_1/h1i4_1/i1i4_1：颜色/背景Enr().o1i7_1：z-index 基准
这些是有限符号表，后续可继续展开；当前 HEAD 已按线上实测值实现。