195 lines
6.6 KiB
Markdown
195 lines
6.6 KiB
Markdown
---
|
|
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.
|