feat(ui): 按住 Alt 键显示全屏地面物品浮动名称标签与品质颜色区分 (Alt Key Ground Item Labels) #390

New Issue

troytt · 2026-09-23T01:57:24Z

troytt commented

2026-09-23 01:57:24 +00:00

问题背景与现状

在暗黑破坏神 2 原版中，按下 Alt 键是玩家查看地面战利品最核心的交互途径。目前客户端中按下 Alt 键无任何反馈，玩家既无法快速查阅掉落物的完整名称，也无法直观识别其品质高低（白装、蓝装、黄装、暗金、绿装等）。

原版 Diablo II v1.13c 核心机制规范（Ground Truth）

1. Alt 键监听与状态同步

全局监听键盘 Alt 键（AltLeft / AltRight）按下与松开状态，按下时在屏幕顶层即时渲染全部地面物品的名称标签盒，松开即刻隐藏。
支持常驻切换选项（如小地图侧边按键）。

2. 标签盒样式与版式规范 (Label Box Visuals)

几何外观：
- 位于物品世界坐标正上方，水平居中对齐。
- 经典黑色半透明背景（rgba(0, 0, 0, 0.85)），配 1px 细线边框。
- 紧凑内边距（上下 2px，左右 4px）。
点阵文字渲染：
- 文字居中排版，根据中英文翻译表（string.tbl / expansionstring.tbl）动态展示完整物品名称。

3. 品质颜色体系严格对齐 (Item Quality Colors)

普通装备（Normal Base / 卷轴 / 钥匙）：纯白 #FFFFFF
低质/破损/带孔/无形（Inferior / Socketed / Ethereal）：灰色 #696969
魔法装备（Magic）：经典蓝 #4850B8
稀有装备（Rare）：经典黄 #FFFF64
绿色套装（Set）：明亮绿 #00FF00
暗金装备（Unique）：暗金/土黄 #908858
符文与合成装备（Rune / Craft）：鲜艳橙 #D05000
金币（Gold）：亮金白文字（如「150 金币」）

4. 密集掉落标签阶梯避让算法 (Label Anti-Overlap Stacking)

当多件物品集中掉落在同一网格或附近时，计算标签屏幕 AABB 碰撞，采用垂直向上阶梯排列避让，杜绝文字互相遮挡覆盖。

改造与验收标准

按住键盘 Alt 键，视野内所有地面物品上方立即显示对应名称标签，松开立即消失。
标签背景、边框及文字颜色严格匹配原版 7 大品质标准及金币展示。
多物品密集掉落时，标签垂直自适应阶梯错开排列，确保每一项均清晰可读。
自动化构建与单测（npm run typecheck, npm test）100% 通过。

## 问题背景与现状在暗黑破坏神 2 原版中，按下 `Alt` 键是玩家查看地面战利品最核心的交互途径。目前客户端中按下 Alt 键无任何反馈，玩家既无法快速查阅掉落物的完整名称，也无法直观识别其品质高低（白装、蓝装、黄装、暗金、绿装等）。 --- ## 原版 Diablo II v1.13c 核心机制规范（Ground Truth） ### 1. Alt 键监听与状态同步 - 全局监听键盘 `Alt` 键（`AltLeft` / `AltRight`）按下与松开状态，按下时在屏幕顶层即时渲染全部地面物品的名称标签盒，松开即刻隐藏。 - 支持常驻切换选项（如小地图侧边按键）。 ### 2. 标签盒样式与版式规范 (Label Box Visuals) - **几何外观**： - 位于物品世界坐标正上方，水平居中对齐。 - 经典黑色半透明背景（`rgba(0, 0, 0, 0.85)`），配 1px 细线边框。 - 紧凑内边距（上下 2px，左右 4px）。 - **点阵文字渲染**： - 文字居中排版，根据中英文翻译表（`string.tbl` / `expansionstring.tbl`）动态展示完整物品名称。 ### 3. 品质颜色体系严格对齐 (Item Quality Colors) - **普通装备（Normal Base / 卷轴 / 钥匙）**：纯白 `#FFFFFF` - **低质/破损/带孔/无形（Inferior / Socketed / Ethereal）**：灰色 `#696969` - **魔法装备（Magic）**：经典蓝 `#4850B8` - **稀有装备（Rare）**：经典黄 `#FFFF64` - **绿色套装（Set）**：明亮绿 `#00FF00` - **暗金装备（Unique）**：暗金/土黄 `#908858` - **符文与合成装备（Rune / Craft）**：鲜艳橙 `#D05000` - **金币（Gold）**：亮金白文字（如「150 金币」） ### 4. 密集掉落标签阶梯避让算法 (Label Anti-Overlap Stacking) - 当多件物品集中掉落在同一网格或附近时，计算标签屏幕 AABB 碰撞，采用垂直向上阶梯排列避让，杜绝文字互相遮挡覆盖。 --- ## 改造与验收标准 1. 按住键盘 Alt 键，视野内所有地面物品上方立即显示对应名称标签，松开立即消失。 2. 标签背景、边框及文字颜色严格匹配原版 7 大品质标准及金币展示。 3. 多物品密集掉落时，标签垂直自适应阶梯错开排列，确保每一项均清晰可读。 4. 自动化构建与单测（npm run typecheck, npm test）100% 通过。

troytt added this to the 复刻捡起/丢弃物品 milestone 2026-09-23 01:57:24 +00:00

troytt referenced this issue from a commit

2026-09-23 02:36:58 +00:00

feat(ui): authentic Alt key ground item floating labels and ladder collision avoidance (Fixes #390)

troytt closed this issue

2026-09-23 02:36:58 +00:00

troytt referenced this issue from a commit

2026-09-23 02:36:58 +00:00

Merge branch 'issue-390' into main (Fixes #390)

Sign in to join this conversation.