--- 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.