GEAR-OA/.cursor/skills/ruoyi-industrial-dashboard-style/SKILL.md

name, description

name	description
ruoyi-industrial-dashboard-style	Recreate the industrial dashboard style from `ruoyi-ui/src/views/index.vue` and apply it consistently across the UI, especially buttons, inputs, tables, cards, tags, and other Element-UI components. Use when the user asks for an industrial monitoring layout, blue-themed controls, or a RuoYi UI style based on `ruoyi-ui/src/views/index.vue`.

RuoYi Industrial Dashboard Style

Goal

Produce UI that matches the look and feel of ruoyi-ui/src/views/index.vue and extends it into the global component system:

• Compact, information-dense layout
• Industrial control-room aesthetic
• Dark top status bar
• White cards with subtle borders and soft shadows
• Small typography and tight spacing
• Strong blue accents across all controls, not green
• Table-first monitoring views with status badges and communication indicators

Core color direction

• Primary actions, links, active states, and focused controls should use blue shades.
• Use deep navy and steel blue as the main palette.
• Avoid default Element-UI green success styling unless the semantics truly require success.
• Reserve red for alarms, orange for warnings, and gray for neutral states.
• Buttons, tags, table headers, and form focus states should visually align with the blue industrial palette.

Design rules

Overall layout

• Use a light gray page background.
• Keep padding and gaps tight.
• Prefer multiple horizontal sections over tall stacked blocks.
• Treat each section as a bordered card with a small header.

Top status bar

• Use a full-width dark header strip.
• Left side should show system name, divider, and unit tag.
• Right side should show online/offline state and a live clock.
• Keep the bar compact, stable, and highly legible.

KPI cards

• Use white cards with a small colored icon block.
• Show a large numeric value and a smaller label.
• Keep card height short and consistent.
• Prefer blue for normal metrics, orange for in-progress, red for warnings.

Equipment or station cards

• Use a dark card header with the equipment name and runtime badge.
• Use a grid for dense parameter display.
• Display values in monospace or tabular-style text where possible.
• Add a slim footer with current coil/order, grade, shift, or similar operational context.

Tables

• Prefer compact tables with borders and stripes.
• Use small button sizes and small tags.
• Keep column widths tight and practical.
• Use status text and colors to show workflow state.

Communication or alarm indicators

• Use small dots, compact labels, and timestamps.
• Use blue for healthy connections.
• Use red and subtle blinking for alarms or disconnects.

Visual tokens

Use these as the default visual language unless the user asks otherwise:

• Background: #f0f2f5
• Card border: #dde1e6
• Primary dark: #1c2b3a
• Primary blue: #1d4e89
• Secondary blue: #2471a3
• Warning orange: #d68910
• Danger red: #c0392b
• Muted text: #7f8c8d
• Soft shadow: 0 1px 4px rgba(0,0,0,.05)

Typography and spacing

• Use 11?C13px text for most labels and chrome.
• Use bold, larger numeric values for KPIs.
• Keep corner radii small, around 2?C4px.
• Use subtle dividers and minimal decoration.

SCSS conventions

• Prefer scoped SCSS.
• Use BEM-style nested blocks like card__header, card__body, card__footer.
• Keep component styles compact and local.
• Use monospace for clocks and numeric readings when appropriate.

When implementing a new screen

1. Start with the overall page shell and background.
2. Add the dark status bar.
3. Add KPI cards in a tight grid.
4. Add one or more dense equipment/status panels.
5. Add a compact table or communication panel.
6. Apply the color, spacing, border, and blue-control rules above.

Example prompt behavior

If the user says they like the style from ruoyi-ui/src/views/index.vue, interpret that as a request to reuse this exact industrial dashboard language in new pages, components, or screens.

Design rules

Overall layout

• Use a light gray page background.
• Keep padding and gaps tight.
• Prefer multiple horizontal sections over tall stacked blocks.
• Treat each section as a bordered card with a small header.

Top status bar

• Use a full-width dark header strip.
• Left side should show system name, divider, and unit tag.
• Right side should show online/offline state and a live clock.
• Keep the bar compact, stable, and highly legible.

KPI cards

• Use white cards with a small colored icon block.
• Show a large numeric value and a smaller label.
• Keep card height short and consistent.
• Prefer blue for normal metrics, orange for in-progress, red for warnings.

Equipment or station cards

• Use a dark card header with the equipment name and runtime badge.
• Use a grid for dense parameter display.
• Display values in monospace or tabular-style text where possible.
• Add a slim footer with current coil/order, grade, shift, or similar operational context.

Tables

• Prefer compact tables with borders and stripes.
• Use small button sizes and small tags.
• Keep column widths tight and practical.
• Use status text and colors to show workflow state.

Communication or alarm indicators

• Use small dots, compact labels, and timestamps.
• Use blue for healthy connections.
• Use red and subtle blinking for alarms or disconnects.

Visual tokens

Use these as the default visual language unless the user asks otherwise:

• Background: #f0f2f5
• Card border: #dde1e6
• Primary dark: #1c2b3a
• Primary blue: #1d4e89
• Secondary blue: #2471a3
• Warning orange: #d68910
• Danger red: #c0392b
• Muted text: #7f8c8d
• Soft shadow: 0 1px 4px rgba(0,0,0,.05)

Typography and spacing

• Use 11?C13px text for most labels and chrome.
• Use bold, larger numeric values for KPIs.
• Keep corner radii small, around 2?C4px.
• Use subtle dividers and minimal decoration.

SCSS conventions

• Prefer scoped SCSS.
• Use BEM-style nested blocks like card__header, card__body, card__footer.
• Keep component styles compact and local.
• Use monospace for clocks and numeric readings when appropriate.

When implementing a new screen

1. Start with the overall page shell and background.
2. Add the dark status bar.
3. Add KPI cards in a tight grid.
4. Add one or more dense equipment/status panels.
5. Add a compact table or communication panel.
6. Apply the color, spacing, and border rules above.

Example prompt behavior

If the user says they like the style from ruoyi-ui/src/views/index.vue, interpret that as a request to reuse this exact industrial dashboard language in new pages, components, or screens.