技能快捷栏与选择弹窗（Speedbar）Tooltip 浮动提示严格复刻暗黑 2 原版规范 #380

New Issue

troytt · 2026-09-22T09:01:56Z

troytt commented

2026-09-22 09:01:56 +00:00

1. 问题现状与视觉缺陷分析

在当前底部控制栏左右技能槽及点击弹出的技能选择菜单（Speedbar，src/ui/hotkeys.ts）中：

尺寸与位置生硬写死：
- 截图中浮动提示框被硬编码为固定的 210 × 38 像素矩形，位置死板地固定在 Y = 412（ctx.fillRect(anchorX, 412, 210, 38)），未根据技能提示内容的行数和宽度自适应拓展，也未跟随鼠标悬停的技能格动态定位。
技能信息极度简陋，缺失核心伤害与效果数据：
- 目前仅简单展示 2 行文字：普通攻击 (Attack) Lv.1 和 法力消耗: 0 · 按 F1-F8 绑定。
- 缺失暗黑破坏神 2 原版技能悬浮提示中完整的当前技能等级、基础描述、伤害区间（物理/冰/火/电/毒）、攻击准确率、作用范围、持续时间、法力消耗等关键战斗属性。
主控制栏左右技能槽缺失悬停 Tooltip：
- 鼠标悬停在底部 ControlBar 的主左键、主右键技能图标上时，未弹出任何 Tooltip 提示当前装备技能的实时等级与数值。

2.1 提示内容层级与数据规范

原版 D2 鼠标悬停在技能图标（快捷栏或弹窗菜单）上时，Tooltip 具有严格的信息层级：

技能名称 (Title)：
- 原版 Exocet / 16pt 字体，金色（Gold #c8a15a），居中对齐。例如 暴风雪 (Blizzard) 或 普通攻击 (Attack)。
当前技能等级 (Level Header)：
- 显示实际有效等级（含装备与全技能加成）：当前技能等级: 28（白色/浅金）。
核心效能与伤害数值 (Current Stats / Damage)：
- 严格基于 Skills.txt、SkillDesc.txt 及计算引擎（skill-calc-engine.ts）动态计算：
  - 法力消耗：法力消耗: 23（白色）
  - 元素/物理伤害：冰冷伤害: 580 - 640（依元素类型或白色/蓝色展现）
  - 持续时间/范围：持续时间: 4 秒
  - 准确率/防御加成：攻击准确率加成: +120%
基础技能描述与通用技能说明：
- 技能描述文本（来自 SkillDesc.txt 与 .tbl 文本）。
- 普通攻击：使用当前持有的武器或空手攻击敌人（附带主手武器攻击力与命中率）。
- 投掷技能：向目标投掷标枪、飞刀或药剂。
- 取消召唤：解散或消灭选中的己方仆从。
快捷键绑定提示 (Hotkey Binding Prompt)：
- 位于 Tooltip 底部，暗金/灰色（#696969 / #d8c898，font8），居中。
- 提示玩家操作：按快捷键直接绑定 (F1-F8)。

2.2 视觉与排版容器规范 (Box Styling)

背景与边框：半透明黑色背景（rgba(0, 0, 0, 0.92)），带有暗黑 2 经典的复古凹凸金属雕花双边框（主边框金色 #8c7244，内凹描边 #3a2c1c）。
动态尺寸计算：根据行数与最长文本宽度动态计算外框 width 与 height（内衬 padding 左右 14px，上下 10px）。
智能贴边避让（Clamping & Floating）：
- Tooltip 锚定在当前悬停技能格（Icon Cell）的上方或外侧。
- 自动检测屏幕四周边缘（800×600 视口），防止溢出画布或被底部控制栏/血球遮挡。

3. 修复方案与实现要求

3.1 接入计算引擎 (`skill-calc-engine.ts`)

废弃 hotkeys.ts 中简易的 entry.manaCost 假数据，改为主调 buildTooltipViewModel 或技能计算状态机，实现与技能树面板（Skill Tree）100% 相同的数据同源。

3.2 动态排版与自适应测量

引入统一的 computeSkillTooltipPlacement(hoverRect, lines, font) 方法：
- 使用 D2FontRenderer.measureText 动态计算各行宽度。
- 动态计算背景框尺寸。
在 hotkeys.ts 的 draw() 流程中重构 Tooltip 渲染，彻底移除 ctx.fillRect(anchorX, 412, 210, 38)。

3.3 支持主技能槽与弹窗双向触发

当 hotkeys.hoverSkillId !== null 时（无论是在底部主快捷栏，还是在打开的 Speedbar 弹窗格子内），均触发完整 Tooltip 渲染。

4. 验收标准 (Acceptance Criteria)

彻底移除固定在 Y=412 的生硬小黑框，Tooltip 尺寸与位置根据技能内容自适应浮动，并具备防屏幕溢出 Clamping。
鼠标悬停在普通攻击或任何技能上时，显示与暗黑 2 原版规范一致的技能名、有效等级、详细伤害/效果数值、法力消耗及快捷键绑定提示。
鼠标悬停在底部控制栏左右主技能槽时，同样能正确弹出该技能的实时完整提示。
视觉风格严格对齐暗黑 2 原版古典边框与 Exocet/点阵字号排版。
自动化测试（npm run typecheck, npm test）100% 通过。

## 1. 问题现状与视觉缺陷分析在当前底部控制栏左右技能槽及点击弹出的技能选择菜单（Speedbar，`src/ui/hotkeys.ts`）中： 1. **尺寸与位置生硬写死**： - 截图中浮动提示框被硬编码为固定的 `210 × 38` 像素矩形，位置死板地固定在 `Y = 412`（`ctx.fillRect(anchorX, 412, 210, 38)`），未根据技能提示内容的行数和宽度自适应拓展，也未跟随鼠标悬停的技能格动态定位。 2. **技能信息极度简陋，缺失核心伤害与效果数据**： - 目前仅简单展示 2 行文字：`普通攻击 (Attack) Lv.1` 和 `法力消耗: 0 · 按 F1-F8 绑定`。 - 缺失暗黑破坏神 2 原版技能悬浮提示中完整的**当前技能等级、基础描述、伤害区间（物理/冰/火/电/毒）、攻击准确率、作用范围、持续时间、法力消耗**等关键战斗属性。 3. **主控制栏左右技能槽缺失悬停 Tooltip**： - 鼠标悬停在底部 ControlBar 的主左键、主右键技能图标上时，未弹出任何 Tooltip 提示当前装备技能的实时等级与数值。 --- ## 2. 暗黑破坏神 2 v1.13c 原版 Tooltip 规范 (Ground Truth) ### 2.1 提示内容层级与数据规范原版 D2 鼠标悬停在技能图标（快捷栏或弹窗菜单）上时，Tooltip 具有严格的信息层级： 1. **技能名称 (Title)**： - 原版 Exocet / 16pt 字体，金色（Gold `#c8a15a`），居中对齐。例如 `暴风雪 (Blizzard)` 或 `普通攻击 (Attack)`。 2. **当前技能等级 (Level Header)**： - 显示实际有效等级（含装备与全技能加成）：`当前技能等级: 28`（白色/浅金）。 3. **核心效能与伤害数值 (Current Stats / Damage)**： - 严格基于 `Skills.txt`、`SkillDesc.txt` 及计算引擎（`skill-calc-engine.ts`）动态计算： - 法力消耗：`法力消耗: 23`（白色） - 元素/物理伤害：`冰冷伤害: 580 - 640`（依元素类型或白色/蓝色展现） - 持续时间/范围：`持续时间: 4 秒` - 准确率/防御加成：`攻击准确率加成: +120%` 4. **基础技能描述与通用技能说明**： - 技能描述文本（来自 `SkillDesc.txt` 与 `.tbl` 文本）。 - 普通攻击：`使用当前持有的武器或空手攻击敌人`（附带主手武器攻击力与命中率）。 - 投掷技能：`向目标投掷标枪、飞刀或药剂`。 - 取消召唤：`解散或消灭选中的己方仆从`。 5. **快捷键绑定提示 (Hotkey Binding Prompt)**： - 位于 Tooltip 底部，暗金/灰色（`#696969` / `#d8c898`，`font8`），居中。 - 提示玩家操作：`按快捷键直接绑定 (F1-F8)`。 ### 2.2 视觉与排版容器规范 (Box Styling) - **背景与边框**：半透明黑色背景（`rgba(0, 0, 0, 0.92)`），带有暗黑 2 经典的复古凹凸金属雕花双边框（主边框金色 `#8c7244`，内凹描边 `#3a2c1c`）。 - **动态尺寸计算**：根据行数与最长文本宽度动态计算外框 `width` 与 `height`（内衬 padding 左右 14px，上下 10px）。 - **智能贴边避让（Clamping & Floating）**： - Tooltip 锚定在当前悬停技能格（Icon Cell）的上方或外侧。 - 自动检测屏幕四周边缘（800×600 视口），防止溢出画布或被底部控制栏/血球遮挡。 --- ## 3. 修复方案与实现要求 ### 3.1 接入计算引擎 (`skill-calc-engine.ts`) - 废弃 `hotkeys.ts` 中简易的 `entry.manaCost` 假数据，改为主调 `buildTooltipViewModel` 或技能计算状态机，实现与技能树面板（Skill Tree）100% 相同的数据同源。 ### 3.2 动态排版与自适应测量 - 引入统一的 `computeSkillTooltipPlacement(hoverRect, lines, font)` 方法： - 使用 `D2FontRenderer.measureText` 动态计算各行宽度。 - 动态计算背景框尺寸。 - 在 `hotkeys.ts` 的 `draw()` 流程中重构 Tooltip 渲染，彻底移除 `ctx.fillRect(anchorX, 412, 210, 38)`。 ### 3.3 支持主技能槽与弹窗双向触发 - 当 `hotkeys.hoverSkillId !== null` 时（无论是在底部主快捷栏，还是在打开的 Speedbar 弹窗格子内），均触发完整 Tooltip 渲染。 --- ## 4. 验收标准 (Acceptance Criteria) 1. 彻底移除固定在 Y=412 的生硬小黑框，Tooltip 尺寸与位置根据技能内容自适应浮动，并具备防屏幕溢出 Clamping。 2. 鼠标悬停在普通攻击或任何技能上时，显示与暗黑 2 原版规范一致的技能名、有效等级、详细伤害/效果数值、法力消耗及快捷键绑定提示。 3. 鼠标悬停在底部控制栏左右主技能槽时，同样能正确弹出该技能的实时完整提示。 4. 视觉风格严格对齐暗黑 2 原版古典边框与 Exocet/点阵字号排版。 5. 自动化测试（`npm run typecheck`, `npm test`）100% 通过。

troytt referenced this issue from a commit

2026-09-22 13:13:51 +00:00

feat(ui): authentic Diablo II 1.13c skill quickbar & speedbar tooltips (Fixes #380)

troytt closed this issue

2026-09-22 13:13:51 +00:00

Sign in to join this conversation.

No Label

No Milestone

No project

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: troytt/diablo2-web#380

技能快捷栏与选择弹窗（Speedbar）Tooltip 浮动提示严格复刻暗黑 2 原版规范 #380