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.