init
This commit is contained in:
@@ -15,26 +15,27 @@ mean recreating the effect from screenshots.
|
||||
|
||||
## Matrix
|
||||
|
||||
| Design source | Current target | Status | Migration notes |
|
||||
| ----------------------- | --------------------------------------------------------- | ----------- | -------------------------------------------------------- |
|
||||
| `foundations`, `shared` | `style/tokens`, `style/themes`, shared UI contract | Migrated | Semantic color and overridable geometry contracts |
|
||||
| `button` | `ui/button` | Migrated | Preserved three-slice states; exposed density and width |
|
||||
| `input` | `ui/input`, `ui/number-field` | Migrated | Removed forced inline width; normalized text metrics |
|
||||
| `form-controls` | `ui/checkbox`, `ui/radio-group`, `ui/switch`, `ui/rating` | Migrated | Tokenized state colors and aligned label/control anatomy |
|
||||
| `select` | `ui/select` | Migrated | Preserved popup anatomy and Reka keyboard behavior |
|
||||
| `tabs` | `ui/tabs` | Migrated | Preserved list-owned animated marker |
|
||||
| `slider` | `ui/slider` | Migrated | Preserved the Reka coordinate system |
|
||||
| `data-table` | `ui/data-table` | Migrated | Ported hover, selected and density behavior |
|
||||
| `dialog` | `ui/dialog` | Migrated | Preserved the focused title effect and focus management |
|
||||
| `menu` | `ui/dropdown-menu` | Migrated | Ported source menu spacing and state tokens |
|
||||
| `rarity` | `ui/item-slot` | Migrated | Retained rarity presentation as data-semantic tokens |
|
||||
| `autocomplete` | `ui/autocomplete` | Migrated | Reka Combobox composition with source popup anatomy |
|
||||
| `navigation` | `ui/navigation` | Migrated | Selectable navigation primitive with source assets |
|
||||
| `scrollbar` | `ui/scroll-area` | Migrated | Reusable Reka viewport/scrollbar composition |
|
||||
| `data-section` | `ui/data-section` | Migrated | Collapsible section and vertically centered data rows |
|
||||
| `shop-item-row` | `ui/shop-item-row` | Migrated | Ported source row structure and selectable states |
|
||||
| `complex-dialog` | `ui/dialog` + migrated primitives | Composition | Kept domain-independent by composing existing primitives |
|
||||
| `settings` | `ui/settings` | Migrated | Responsive settings group, section and row primitives |
|
||||
| Design source | Current target | Status | Migration notes |
|
||||
| ----------------------- | --------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------- |
|
||||
| `foundations`, `shared` | `style/tokens`, `style/themes`, shared UI contract | Migrated | Semantic color and overridable geometry contracts |
|
||||
| `button` | `ui/button` | Migrated | Preserved three-slice states; exposed density and width |
|
||||
| `input` | `ui/input`, `ui/number-field` | Migrated | Removed forced inline width; normalized text metrics |
|
||||
| `form-controls` | `ui/checkbox`, `ui/radio-group`, `ui/switch`, `ui/rating` | Migrated | Tokenized state colors and aligned label/control anatomy |
|
||||
| `select` | `ui/select`, `ui/tree-select`, `ui/cascader` | Migrated | Flat, hierarchical and two-level responsive selection; TreeSelect preserves parent-toggle and rarity states |
|
||||
| `tabs` | `ui/tabs`, `ui/pagination` | Migrated | Animated list marker and compact result navigation |
|
||||
| `slider` | `ui/slider` | Migrated | Preserved the Reka coordinate system |
|
||||
| `data-table` | `ui/data-table` | Migrated | Ported hover, selected and density behavior |
|
||||
| `dialog` | `ui/dialog` | Migrated | Preserved the focused title effect and focus management |
|
||||
| `menu` | `ui/dropdown-menu` | Migrated | Ported source menu spacing and state tokens |
|
||||
| `rarity` | `ui/item-slot` | Migrated | Retained rarity presentation as data-semantic tokens |
|
||||
| `autocomplete` | `ui/autocomplete` | Partial | Combobox is migrated; domain SearchTree remains deferred |
|
||||
| `navigation` | `ui/navigation` | Migrated | Selectable navigation primitive with source assets |
|
||||
| `scrollbar` | `ui/scroll-area` | Migrated | Reusable Reka viewport/scrollbar composition |
|
||||
| shared overlay help | `ui/popover`, rich `ui/tooltip` | Migrated | Portal z-index, collision and responsive width contract |
|
||||
| `data-section` | `ui/data-section` | Migrated | Collapsible section and vertically centered data rows |
|
||||
| `shop-item-row` | `ui/shop-item-row` | Migrated | Ported source row structure and selectable states |
|
||||
| `complex-dialog` | `ui/dialog` + migrated primitives | Composition | Kept domain-independent by composing existing primitives |
|
||||
| `settings` | `ui/settings` | Migrated | Responsive settings group, section and row primitives |
|
||||
|
||||
## Legacy replacement order
|
||||
|
||||
@@ -45,3 +46,12 @@ Deferred: this component-library pass does not change business call sites.
|
||||
3. Equipment dictionary filters, tree, cascader and pagination.
|
||||
4. Skill tree, skill detail and VP controls.
|
||||
5. Result tables and remaining domain-specific components.
|
||||
|
||||
## Remaining gaps
|
||||
|
||||
- SearchTree/CommandInput still requires a domain-neutral data and filtering contract before it can
|
||||
join `src/components/ui`.
|
||||
- Complex product dialogs are compositions, not a claim that every business dialog has reached
|
||||
source-level visual parity.
|
||||
- Existing `frontend` business call sites remain on their current components until each behavior
|
||||
slice is migrated and browser-verified.
|
||||
|
||||
@@ -99,6 +99,8 @@ Token 分成两层：
|
||||
- 建立完整状态矩阵：rest、hover、pressed、focus、disabled、selected/open。
|
||||
- 动效需记录帧数、间隔、缓动、焦点条件和 reduced-motion 行为。
|
||||
- 优先复用原始 PNG、字体、图标和 rarity frame，不用近似图标替代。
|
||||
- 先核对 Design 的真实实现方式：源组件使用 CSS 渐变、伪元素或 `clip-path` 构造的
|
||||
控制图标继续使用 CSS；只有被 Design 明确作为像素素材引用的图标才引入图片。
|
||||
|
||||
### 6.3 选择 Reka Primitive
|
||||
|
||||
@@ -177,6 +179,10 @@ Reka 的 Select、Tooltip、DropdownMenu、Popover 等通常经过 Portal 和 Po
|
||||
- 使用确定的数字顺序加载帧，避免字符串排序造成 `10` 排在 `2` 前。
|
||||
- 仅在 focused 状态推进和展示动效；unfocused 状态使用静态标题栏。
|
||||
- 组件卸载时清理计时器，reduced-motion 下隐藏或静态化动效。
|
||||
- 可拖动窗口仅以标题栏空白区域作为手柄，关闭按钮和标题栏操作控件不得触发拖动。
|
||||
- 使用 Pointer Events 同时覆盖鼠标和触摸；拖动范围限制在当前视口安全边距内。
|
||||
- 每次重新打开或视口尺寸变化时恢复几何居中，避免桌面偏移泄漏到移动端。
|
||||
- 标题使用对称网格独立居中，长 Description 放入内容区，不参与标题栏宽度计算。
|
||||
|
||||
### 7.5 NumberField 扩展操作
|
||||
|
||||
|
||||
Reference in New Issue
Block a user