DNF UI Component Library / Abstracted Preview

Foundations & Construction Anatomy

截图定义视觉语法，素材定义构造方式；组件不包含任何游戏截图裁片
01 / 06FOUNDATIONS · TOKENS · ASSETS
PREVIEW V4 · TOKEN-FIRSTSEMANTIC STATES ≠ ITEM QUALITY
DNF UI Component Library / Abstracted Preview

Core Controls

可替换文案、图标和状态；保持深蓝动作面、黄铜边线与紧凑密度
02 / 06BUTTON · FIELD · SELECTION · RATE
PREVIEW V4 · NORMALIZED COMPONENTSTREE SELECTED = OUTLINE ONLY · QUALITY TONE PRESERVED
DNF UI Component Library / Abstracted Preview

Navigation & Overlays

相同行为共享 primitive，不同 anatomy 保持独立 visual family
03 / 06TABS · DISCLOSURE · MENU · WINDOW
PREVIEW V4 · VISUAL FAMILY BOUNDARIESDIALOG BODY SHELL ≠ CONTENT WELL
DNF UI Component Library / Abstracted Preview

Data Display & Product Patterns

由小组件组成设置表单、数据表、稀有度槽位和状态反馈，不把整张界面做成组件
04 / 06FORM ROW · TABLE · BADGE · QUALITY
PREVIEW V4 · PRODUCT PATTERNSSMALL COMPONENTS → COMPOSED DNF INTERFACES
DNF UI Component Library / Abstracted Preview

Search & Complex Dialog Composition

搜索组件保持原生输入语法；复杂弹窗由 WindowDialog、List、Table 与 Plain Scrollbar 组合
05 / 06AUTOCOMPLETE · SEARCH TREE · DIALOG PRESET
PREVIEW V4 · COMPOSITION TEMPLATEWINDOW PRIMITIVE + LIST + TABLE + PLAIN SCROLLBAR
DNF UI Component Library / Abstracted Preview

DataTable Density & Item Variants

同一表格语义，拆分技能明细、紧凑记录、DataTable ItemRow 与无表头 ShopItemRow
06 / 06SORT · COMPACT · ITEM ROW · SHOP ITEM
PREVIEW V4 · DATATABLE VARIANT FAMILIESSORTABLE HEADER + SELECTABLE ROW + SUMMARY + GROUP NOTE