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

---
name: ruoyi-industrial-dashboard-style
description: 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.