# Gld Ue Template

> Unified Design and Interaction Standard Template for EPC Management System, complete React + Ant Design (JavaScript) project template and interactive specification documentation.

- Skill: `luokai0/gld-ue-template` (Agent Skill, multi-file: 25 files)
- Install (CLI): `npx skillmds@latest add luokai0/gld-ue-template`
- Raw SKILL.md: https://api.skillmd.com/api/skills/luokai0/gld-ue-template/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: luokai0 (https://skillmd.com/u/luokai0)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/luokai0/gld-ue-template

---

# gld_ue_template

Unified Design and Interaction Standard Template for EPC Management System.
This SKILL provides a complete React + Ant Design (JavaScript) project template and interactive specification documentation.

## 1. Design System Specifications

### 1.1 Color System

**Primary Colors (主色)**
- Primary Blue: `#3c83f8` (Brand color, active states, primary buttons)
- Blue Hover: `#5995f9`
- Blue Active/Click: `#2b6bd9`
- Blue Soft: `#ecf3ff` (Backgrounds for active items)

**Functional Colors (功能色)**
- Success Green: `#46bc46` (Success states, positive metrics)
- Warning Orange: `#f7c03e` (Warning states, medium risk)
- Danger Red: `#ef5f59` (Error states, high risk, negative metrics)
- Purple: `#a855f7` (Categorization, special items)

**Neutral Colors (中性色)**
- Page Background: `#E9F2FB`
- Surface (Cards/Panels): `#ffffff`
- Surface Soft: `#fafafa`
- Line/Border: `#dfdfdf`
- Line Soft: `#e5e5e5`
- Text Main: `#262626`
- Text Sub: `#595959`
- Text Faint: `#8c8c8c`

### 1.2 Typography System

**Font Family**
`"PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`

**Font Sizes & Weights**
- Base Size: `14px` (Regular 400)
- Page Title: `24px` (Bold 700)
- Section Title: `16px` (Medium 450/500)
- Metric Value: `34px` (Medium 450/500)
- Small Text/Meta: `12px` (Regular 400)

**Line Heights**
- Tight: `1.2`
- Normal: `1.5`
- Relaxed: `1.8`

### 1.3 Spacing & Layout System

**Spacing Scale**
- xs: `4px`
- sm: `8px`
- md: `16px`
- lg: `24px`
- xl: `32px`
- 2xl: `48px`

**Border Radius**
- sm: `2px`
- md: `4px`
- lg: `8px`
- Cards/Panels: `12px` or `14px`
- Pills/Badges: `16px` or `50%`

**Shadows**
- sm: `0 1px 2px rgba(0, 0, 0, 0.05)`
- md: `0 4px 6px rgba(0, 0, 0, 0.1)`
- lg: `0 10px 15px rgba(0, 0, 0, 0.15)`
- hover: `0 8px 25px rgba(0, 0, 0, 0.2)`

## 2. Navigation System Standards

### 2.1 Global Navigation (Top Header)
- Represents first-level menus.
- Default first item is "首页" (Home).
- Header height: `54px`, rounded corners (`30px`), gradient background (`linear-gradient(90deg, #ffffff 0%, #eef5ff 76%, #dcecff 100%)`).

### 2.2 Secondary Navigation (Left Sidebar)
- "首页" (Home) has **NO** secondary left sidebar menu. The content area takes full width.
- All other first-level menus have 2/3 level nested left sidebar menus.
- Parent items in the sidebar are **only navigation groups** (click to expand/collapse).
- Only final level navigation items correspond to actual page routes.
- Active state styling: Background `#fff3e6`, Text `#f0932b`, Font Weight `450`.

### 2.3 Breadcrumb Navigation
- **Component**: Located in `src/components/Breadcrumb.jsx`.
- **Functionality**: Automatically generates breadcrumbs by parsing the current route path.
- **Mapping**: Uses a `breadcrumbMap` object to map URL segments to their display names.
- **Styling**:
  - Container (`.crumb-row`): Flex layout with a `6px` gap and `10px` bottom padding.
  - Items (`.breadcrumb`): Uses `text-faint` color. Hovering changes the color to the brand primary blue.
  - Current Page: Marked with the `current` class, uses `text-main` color, `600` font weight, and is not a link.
  - Separators: Displays a `/` character between items.
- **Integration**: Included by default in `SidebarLayout`.

## 3. Component Specifications

### 3.1 Buttons
- **Primary Button**: Background `#3c83f8`, Text `#fff`, Border Radius `4px`, Height `32px`.
- **Ghost Button**: Background `#fff`, Text `#595959`, Border `#dfdfdf`, Height `32px`. Hover: Border `#5995f9`, Text `#5995f9`.

### 3.2 Tags & Badges
- **Blue Tag**: Color `#3c83f8`, Background `#ecf3ff`.
- **Orange Tag**: Color `#f7c03e`, Background `#fff9f2`.
- **Green Tag**: Color `#46bc46`, Background `#f7fff2`.
- **Red Tag**: Color `#ef5f59`, Background `#fff2f4`.
- **Gray Tag**: Color `#8c8c8c`, Background `#f2f2f2`.

### 3.3 Metric Cards
- White background, `12px` border radius, `1px` solid `#e5e5e5` border.
- Header with label and icon tile (`32x32px`, `10px` radius).
- Large value text (`34px`, `#0f348c` or status color).
- Footer with muted description text.

### 3.4 Tables
- Header: Background `#f6faff`, Text `#595959`, Font Weight `600`, Border Bottom `#e5e5e5`.
- Body: Text `#595959`, Border Bottom `#e5e5e5`. Hover Background `#ecf3ff`.
- Category Rows: Background `#f3f7ff`, Font Weight `450`, Left border indicating category color.

### 3.5 Modals
- Overlay: `rgba(0,0,0,0.45)`.
- Content: Background `#fff`, Border Radius `12px`, Max Width `800px`.
- Header: Title `16px` Medium, Close button.
- Animation: `modalIn 0.2s ease-out` (scale 0.95 to 1, opacity 0 to 1).

## 4. How to Use This Template

When a user requests to create or modify a frontend project using this standard:

1. **Initialize Project**: Copy the contents of the `template` directory to the target project folder.
2. **Install Dependencies**: Run `npm install` (React 18, Ant Design 5.x, React Router v6, Chart.js).
3. **Follow Navigation Rules**: Ensure "首页" has no sidebar, and other sections use the nested sidebar structure.
4. **Use Provided Components**: Utilize the pre-built layout and UI components to maintain 100% design consistency.
5. **No TypeScript**: Write all code in JavaScript (`.js` / `.jsx`).

## 5. Template Structure

The `template` directory contains a complete React application:
- `src/App.jsx`: Routing configuration.
- `src/layouts/`: GlobalLayout, SidebarLayout.
- `src/pages/`: Home, ListManagement (Demo pages).
- `src/components/`: Reusable UI components (MetricCard, Tag, etc.).
- `src/styles/`: Global CSS variables and overrides.