frontend-v2-input
GitHub定义 RomM v2 前端通用输入（鼠标/触控/键盘/手柄）与响应式布局规范。涵盖模态检测、焦点几何、作用域管理及断点系统，指导交互组件开发与适配。
Trigger Scenarios
Install
npx skills add rommapp/romm --skill frontend-v2-input -g -y
SKILL.md
Frontmatter
{
"name": "frontend-v2-input",
"description": "Universal input (mouse, touch, keyboard, gamepad) and responsive\/universal-viewport layout in the RomM v2 frontend. Use when adding interactive v2 components, focus management, spatial navigation, gamepad\/keyboard handling, modality-gated focus rings, breakpoints, or responsive layout. Covers useInput, focus geometry primitives, the overlay scope stack, useBreakpoint, and the data-bp\/data-input attributes. Trigger on interactive or responsive work under frontend\/src\/v2\/."
}
RomM v2 — Universal Input & Universal Viewport
Premise: all v2 UI works with mouse, touch, keyboard, and gamepad; and every surface reads cleanly from a 320px phone to a 4K display. Both mechanisms are fixed — don't invent a parallel one.
The input system lives in src/v2/composables/useInput/ (bus, keyboard, gamepad, actions, scope). It generalises the original gamepad-only src/console/ system. There are no /console/* routes in v2.
Modality
useInputModality sets data-input="mouse|touch|key|pad" on <html> from the most recent input.
- Focus rings appear only with
keyandpad(CSS inglobal.css). Never use bare:focusin styles — use the modality-gated selectors, or focus rings flash on mouse click. - Modality gates appearance and behaviour, never size: focus rings, hover-reveal, autofocus. A tap is followed by compatibility mouse events, so anything sized off
data-inputresizes under the finger. Hit targets scale by breakpoint instead (below).
Coverage — every interactive primitive participates
Buttons, list items, tabs, menu items, focusable cards, toggleable chips — all participate in spatial navigation (not optional). A new interactive primitive must:
- be focusable (a natively focusable element, or a proper
tabindex); - react to logical actions (confirm/cancel) from
useInput, in addition to native click; - show a modality-gated focus state.
Storybook play() covering gamepad input is required only when applicable (the primitive is interactive enough that gamepad navigation matters).
Focus geometry
Each view declares its layout with focus primitives: RFocusZone, RFocusGrid, RFocusRow, RFocusColumn. Multiple regions = multiple zones. Predictable up/down/left/right movement is the view's responsibility.
Element-level global shortcuts
Above per-view geometry, some elements bind globally regardless of focus location:
UserMenuopens on Start.- Navbar tabs cycle with LB/RB (plus D-pad).
- Context menu opens on X or Y.
Scope (overlay stack)
When a dialog opens, push a scope; when it closes, pop. This stops Escape from closing two things at once and stops confirm leaking to controls beneath an overlay. RDialog and RMenu manage their scope automatically — custom overlays are an anti-pattern; go through the primitives.
Responsive layout (universal viewport)
- Single breakpoint source:
useBreakpoint(src/v2/composables/useBreakpoint/). Material thresholds —xs <600,sm 600–959,md 960–1279,lg 1280–1919,xl ≥1920.installBreakpointAttribute()(mounted once inAppLayout) mirrors the active set onto<html data-bp="…">. - Layout switches live in CSS via the attribute selector:
html[data-bp~="xs"] .foo { … },html[data-bp~="sm-and-down"] .foo { … }. No raw@mediafor layout — the only allowed@mediaareprefers-reduced-motionand print. The attribute is on<html>so it reaches teleported overlays. - Conditional rendering (mount/unmount a different component per tier) uses the
useBreakpoint()refs in<script>— e.g.v-if="xs". Prefer mount-gating overdisplay:nonefor focusable chrome so hidden controls never sit in the tab/spatial-nav order. --r-row-padis the global horizontal gutter, already re-scoped responsive inglobal.css(36 → 20 → 14px). Consumevar(--r-row-pad); don't hard-code a smallerxspadding per component.- Touch targets scale with the breakpoint, never with
data-input:--r-touch-target(44px) atsm-and-down, less only where the row would not fit. - Overlays go full-bleed on
xs.RDialogrenders full-screen / bottom-sheet on phones (fullscreenOnMobile, default on);RMenubottom-sheets large menus. Never float a 600px dialog on a 360px screen. - Label→icon collapse (the AppNav precedent) is the canonical way to compress chrome; the four primary destinations relocate to
BottomNavonsm-and-down. - Grids size via
useResponsiveColumns(ResizeObserver), never a fixed column count.
Verification adds a breakpoint sweep — see review-polish.
Version History
-
cf19c8a
Current 2026-09-23 08:04
重构：将尺寸和悬停显示逻辑从基于输入类型改为基于断点；修正文档中过时的 Vuetify 引用，更新为当前架构描述。
- 42e8043 2026-08-20 16:50
