diff --git a/3DTank/docs/ShopStyleTable.md b/3DTank/docs/ShopStyleTable.md index 70ae21d..5390667 100644 --- a/3DTank/docs/ShopStyleTable.md +++ b/3DTank/docs/ShopStyleTable.md @@ -204,7 +204,7 @@ font:500 1.125em/1 BaseFontMedium; text-transform:uppercase; position:absolute; top:1em; z-index:3; ``` -离线实现：没有 `dsw_1` 分类美术 URL，改用该分类首个物品的官方图作为卡内图像；图像 `contain` 并加一层上下渐变，标题仍按 `b1sp` 定位。 +离线实现：没有 `dsw_1` 分类美术 URL，保留官方 `z1so` 的背景色/尺寸/圆角，图像区域用 `stub.shop.card.art` 虚线占位；标题仍按 `b1sp` 定位。 ## 3. 资源 @@ -232,7 +232,7 @@ position:absolute; top:1em; z-index:3; 未展开 / 近似： -- 分类卡背景：原版用 `dsw_1` 分类美术（`z1so`，`background-size:cover`）；离线没有该 URL，当前用该分类首个物品的官方图（`ItemIcon`）作为卡内图像，`contain` + 上下渐变保证标题可读 +- 分类卡背景：原版 `z1so` 使用 `dsw_1` 分类美术（服务器下发 URL），离线资源里没有；当前保留官方 `z1so` 背景色/尺寸/圆角，图像区域用 `stub.shop.card.art` 虚线占位（`STUB` 标记） - `containerItem` 的 `grid-template-rows:31.35%` 动态行高（当前固定 `11.5em`） - `ShopFooterComponentStyle-reportButton` 的共享 Button 完整外观（当前金色按钮近似） - 金币 / 限时 / 礼包特殊分类（`containerCoin` / `containerLimitOffers` / `containerKitOffers`） diff --git a/3DTank/docs/UiTranslationStatus.md b/3DTank/docs/UiTranslationStatus.md index 26b490f..5c91c05 100644 --- a/3DTank/docs/UiTranslationStatus.md +++ b/3DTank/docs/UiTranslationStatus.md @@ -11,7 +11,7 @@ | 子页面外壳 | `LobbyView.kt` + `lobby3.css` | `ms-top` 始终显示；`#lobby-content` 从 6em 开始；不再使用独立 Breadcrumbs 顶栏 | | 大厅首页 | `app/src/jsMain/kotlin/App/Browser/Ui/HomeScreen.kt` | Emotion；Play / 主菜单 / Footer / BattlePass / 公告 | | 车库 | `app/src/jsMain/kotlin/App/Browser/Ui/GarageScreen.kt` | React；默认「总览」+ 右侧 4 个已装配件；分类栏、底盘/炮塔选择条、迷彩网格、左右面板、底部选择条 | -| 商店 | `app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt` | 先进入 `ShopSelectedSectionComponentStyle-commonBlock` 分类卡（22.5em，每列 2 张，横向滚动；卡内用该分类首个物品的官方图，离线替代原版 `dsw_1` 分类美术），点卡后进入 `NewShopCommonComponentStyle-commonContainer`：左侧 25em 分类菜单 + 右侧 37.25em 物品区（分类标题/描述 + 2 列 17.5em 物品卡）+ 底部 3.125em 报告栏；详见 `ShopStyleTable.md` | +| 商店 | `app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt` | 先进入 `ShopSelectedSectionComponentStyle-commonBlock` 分类卡（22.5em，每列 2 张，横向滚动；官方 `z1so` 背景色/尺寸保留，`dsw_1` 分类美术用 `stub.shop.card.art` 虚线占位），点卡后进入 `NewShopCommonComponentStyle-commonContainer`：左侧 25em 分类菜单 + 右侧 37.25em 物品区（分类标题/描述 + 2 列 17.5em 物品卡）+ 底部 3.125em 报告栏；详见 `ShopStyleTable.md` | | 幸运礼盒 | 同上 | 4 种礼盒美术、钥匙图标/数量、可能奖励稀有度、右侧详情/开启确认 | | 战斗选择 | 同上 | 模式筛选（DM/TDM/CTF/CP/AS/JGR/SGE/RUGBY 图标）+ 战场列表 + 右侧详情/加入/创建入口 | | 任务 | 同上 | 分类侧栏（主要/每日/每周/星级挑战/合约）+ 任务卡（进度、奖励图标、领取/去完成）+ 星级挑战横幅 + 离线示例 | @@ -52,7 +52,7 @@ | 军团/好友真实数据 | `RootState` | 已接状态与列表；真实服务器数据下会替换离线示例 | | HEAD 组队 3/4 人分支 | `module_82347` `UserGroupTitleButtonComponentStyle-commonBlockGroup` | 2 人组（默认上限）已按 `q4` + `groupUser.svg` 还原；3/4 人组的等级小图标分支未接组队数据 | | 商店物品卡动态行高 | `module_82347` `ShopCategoryOfferSectionStyle-containerItem` | 原版 `grid-template-rows:31.35%`，当前固定 `11.5em`；等容器高度确定后替换 | -| 商店分类卡美术 | `module_82347` `ShopSelectedSectionComponentStyle-z1so` | 原版用 `dsw_1` 分类美术；当前用暗色渐变 + 官方分类图标占位 | +| 商店分类卡美术 | `module_82347` `ShopSelectedSectionComponentStyle-z1so` | 原版 `dsw_1` 分类美术 URL 未接入；当前保留官方卡片样式，图像区用 `stub.shop.card.art` 虚线占位 | | 商店报告按钮共享外观 | `module_82347` `ShopFooterComponentStyle-reportButton` | 当前用金色按钮近似；共享 Button 组件的完整样式待展开 | | 商店特殊分类 | `module_82347` `ShopCategoryOfferSectionStyle` | `containerCoin` / `containerLimitOffers` / `containerKitOffers` 的金币、限时、礼包分类待展开 | | 商店折扣/加成/促销码 | `module_82347` `ShopItemComponentStyle` | 当前数据模型没有折扣、加成、促销码字段；原版徽章/能源条未渲染 | diff --git a/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt b/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt index 9896e22..272efe1 100644 --- a/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt +++ b/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt @@ -947,10 +947,10 @@ private val ShopCard: csstype.PropertiesBuilder.() -> Unit = { Style("background", "transparent") } -/** 原版 `z1so`：分类卡背景图（作为卡片内的子 div）。 */ +/** 原版 `z1so`：分类卡背景图。 + * STUB: 原版 `dsw_1` 分类美术 URL 未接入，只保留官方背景色与尺寸。 */ private val ShopCardImage: csstype.PropertiesBuilder.() -> Unit = { Style("background-color", "rgba(191, 213, 255, 0.15)") - Style("background-image", "linear-gradient(180deg, rgba(3, 8, 13, 0.15), rgba(3, 8, 13, 0.75))") Style("border-radius", "0.625em") Style("height", "100%") Style("width", "100%") @@ -959,25 +959,19 @@ private val ShopCardImage: csstype.PropertiesBuilder.() -> Unit = { Style("z-index", "1") } -/** 分类卡里的实际图像（原版 `dsw_1` 分类美术；离线用该分类首个物品的官方图）。 */ -private val ShopCardArt: csstype.PropertiesBuilder.() -> Unit = { - Style("position", "absolute") - Style("inset", "3em 0.75em 3em 0.75em") - Style("background-size", "contain") - Style("background-position", "center") - Style("background-repeat", "no-repeat") - Style("z-index", "1") -} - -/** 分类卡上下渐变，保证标题可读（原版分类美术自带对比）。 */ -private val ShopCardOverlay: csstype.PropertiesBuilder.() -> Unit = { +/** STUB: 分类美术占位。 */ +private val ShopCardStub: csstype.PropertiesBuilder.() -> Unit = { Style("position", "absolute") Style("inset", "0") - Style( - "background", - "linear-gradient(180deg, rgba(3,8,13,.85) 0%, rgba(3,8,13,0) 35%, rgba(3,8,13,0) 65%, rgba(3,8,13,.75) 100%)", - ) - Style("z-index", "2") + Style("display", "flex") + Style("align-items", "center") + Style("justify-content", "center") + Style("color", "rgba(255, 255, 255, 0.18)") + Style("font-family", "BaseFontMedium, FallbackFontMedium") + Style("font-size", "0.875em") + Style("text-transform", "uppercase") + Style("border", "1px dashed rgba(255, 255, 255, 0.12)") + Style("border-radius", "0.625em") } /** 原版 `b1sp`：分类卡标题。 */ @@ -1096,7 +1090,6 @@ private val ShopScreen = FC { css(ShopCardsColumn) Ui("shop.cards.column") for (C in Pair) { - val First = Items.firstOrNull { it.Category == C.Id } div { css(ShopCard) Ui("shop.card.${C.Id}") @@ -1106,28 +1099,11 @@ private val ShopScreen = FC { } div { css(ShopCardImage) - if (First != null) { - if (First.Category == 2) { - div { - css { - Apply(ShopCardArt) - Style("background", PaintGradient(First.Name)) - Style("border-radius", "0.4em") - } - } - } else { - div { - css { - Apply(ShopCardArt) - Style( - "background-image", - "url(\"${Asset("static/images/" + ItemIcon(First))}\")", - ) - } - } - } + div { + css(ShopCardStub) + Ui("stub.shop.card.art") + +"分类美术" } - div { css(ShopCardOverlay) } } span { css(ShopCardTitle); +C.Label } }