andyesfly
c60caa4770
1. 调整菜单与路由：重命名客户信息/客户账号为客户档案管理/客户小程序授权管理，移除客户建筑/房间路由，新增空间拓扑路由 2. 后端新增客户统计接口`/customers/stats`，前端同步API与类型定义 3. 重构客户档案与小程序授权页面，仅保留数据库支持字段，移除无支撑功能 4. 新增空间拓扑页面，合并建筑与房间管理为树形拓扑视图 5. 更新数据库种子数据与权限配置，清理废弃菜单与绑定关系 6. 补充UI设计文档与规范说明
200 lines
8.2 KiB
Markdown
200 lines
8.2 KiB
Markdown
---
|
|
name: Industrial Precision
|
|
colors:
|
|
surface: '#ffffff'
|
|
surface-dim: '#ccdbf1'
|
|
surface-bright: '#f8f9ff'
|
|
surface-container-lowest: '#ffffff'
|
|
surface-container-low: '#eef4ff'
|
|
surface-container: '#e5efff'
|
|
surface-container-high: '#dbe9ff'
|
|
surface-container-highest: '#d5e4fa'
|
|
on-surface: '#0d1c2c'
|
|
on-surface-variant: '#424655'
|
|
inverse-surface: '#233142'
|
|
inverse-on-surface: '#e9f1ff'
|
|
outline: '#727787'
|
|
outline-variant: '#c2c6d8'
|
|
surface-tint: '#0056d2'
|
|
primary: '#0054cd'
|
|
on-primary: '#ffffff'
|
|
primary-container: '#136bfb'
|
|
on-primary-container: '#fefcff'
|
|
inverse-primary: '#b2c5ff'
|
|
secondary: '#712ae2'
|
|
on-secondary: '#ffffff'
|
|
secondary-container: '#8a4cfc'
|
|
on-secondary-container: '#fffbff'
|
|
tertiary: '#00685f'
|
|
on-tertiary: '#ffffff'
|
|
tertiary-container: '#008378'
|
|
on-tertiary-container: '#f4fffc'
|
|
error: '#ba1a1a'
|
|
on-error: '#ffffff'
|
|
error-container: '#ffdad6'
|
|
on-error-container: '#93000a'
|
|
primary-fixed: '#dae2ff'
|
|
primary-fixed-dim: '#b2c5ff'
|
|
on-primary-fixed: '#001847'
|
|
on-primary-fixed-variant: '#0040a1'
|
|
secondary-fixed: '#eaddff'
|
|
secondary-fixed-dim: '#d2bbff'
|
|
on-secondary-fixed: '#25005a'
|
|
on-secondary-fixed-variant: '#5a00c6'
|
|
tertiary-fixed: '#89f5e7'
|
|
tertiary-fixed-dim: '#6bd8cb'
|
|
on-tertiary-fixed: '#00201d'
|
|
on-tertiary-fixed-variant: '#005049'
|
|
background: '#f8f9ff'
|
|
on-background: '#0d1c2c'
|
|
surface-variant: '#d5e4fa'
|
|
bg-page: '#eef3f8'
|
|
text-muted: '#5b6b7e'
|
|
border-rule: '#dbe4ee'
|
|
status-warn: '#e0852b'
|
|
status-error: '#dc2626'
|
|
accent-subtle: rgba(29,111,255,0.08)
|
|
typography:
|
|
display-lg:
|
|
fontFamily: hankenGrotesk
|
|
fontSize: 32px
|
|
fontWeight: '700'
|
|
lineHeight: 40px
|
|
headline-md:
|
|
fontFamily: hankenGrotesk
|
|
fontSize: 23px
|
|
fontWeight: '700'
|
|
lineHeight: 28px
|
|
title-sm:
|
|
fontFamily: hankenGrotesk
|
|
fontSize: 17px
|
|
fontWeight: '700'
|
|
lineHeight: 24px
|
|
body-md:
|
|
fontFamily: hankenGrotesk
|
|
fontSize: 15px
|
|
fontWeight: '400'
|
|
lineHeight: 24px
|
|
label-bold:
|
|
fontFamily: hankenGrotesk
|
|
fontSize: 13px
|
|
fontWeight: '700'
|
|
lineHeight: 16px
|
|
data-mono:
|
|
fontFamily: jetbrainsMono
|
|
fontSize: 12px
|
|
fontWeight: '500'
|
|
lineHeight: 16px
|
|
caption-sm:
|
|
fontFamily: hankenGrotesk
|
|
fontSize: 12px
|
|
fontWeight: '700'
|
|
lineHeight: 14px
|
|
headline-md-mobile:
|
|
fontFamily: hankenGrotesk
|
|
fontSize: 20px
|
|
fontWeight: '700'
|
|
lineHeight: 26px
|
|
rounded:
|
|
sm: 0.25rem
|
|
DEFAULT: 0.5rem
|
|
md: 0.75rem
|
|
lg: 1rem
|
|
xl: 1.5rem
|
|
full: 9999px
|
|
spacing:
|
|
base: 4px
|
|
xs: 8px
|
|
sm: 12px
|
|
md: 16px
|
|
lg: 24px
|
|
xl: 40px
|
|
container-max: 1200px
|
|
gutter: 16px
|
|
---
|
|
|
|
## Brand & Style
|
|
|
|
The design system is engineered for the **Xintong Smart Power Operation Management APP**, targeting power engineers and grid operators. The brand personality is **Professional, Efficient, and Industrial Tech**. It emphasizes reliability through a structured, high-density interface that transforms complex electrical data into actionable insights.
|
|
|
|
The design style is a blend of **Corporate Modern** and **Information-Dense Minimalism**. It utilizes a "Layered Surface" approach where data is organized into logical card blocks, using subtle elevations and clear semantic color-coding to denote system status. The aesthetic is clean and functional, avoiding decorative elements in favor of technical precision and rapid scanability.
|
|
|
|
- **Professionalism:** High-contrast typography and a restrained color palette.
|
|
- **Efficiency:** Condensed layouts that prioritize data visualization and task status.
|
|
- **Reliability:** Solid borders, consistent spacing, and clear state indicators.
|
|
|
|
## Colors
|
|
|
|
The color architecture is strictly functional, mapping specifically to the operation layers of the power management system.
|
|
|
|
- **Primary (Deep Blue):** Reserved for core branding, navigation, and "Client" layer interactions.
|
|
- **Secondary (Purple):** Dedicated to "Gateway" operations and task-specific management.
|
|
- **Tertiary (Teal):** Used for "Service" layer success states and optimized performance indicators.
|
|
- **Neutral (Ink):** Used for primary text to ensure maximum legibility against light surfaces.
|
|
|
|
**Semantic Usage:**
|
|
- Use **status-warn (Amber)** for non-critical alerts or data synchronization states.
|
|
- Use **status-error (Red)** for critical power failures or permission denials.
|
|
- The **bg-page** provides a soft, low-strain canvas for long-duration monitoring, while **surface** (White) distinguishes interactive cards and data containers.
|
|
|
|
## Typography
|
|
|
|
This design system uses **Hanken Grotesk** as the primary typeface for its sharp, contemporary feel that bridges the gap between industrial and tech. **JetBrains Mono** is employed for technical data, device IDs, and numerical values to emphasize the system's engineering DNA.
|
|
|
|
- **Hierarchy:** Use `display-lg` for dashboard summaries. `title-sm` is the default for card headers.
|
|
- **Data Visualization:** All tabular data and technical strings must use `data-mono` for character alignment and clarity.
|
|
- **Mobile Adaptation:** For mobile screens, headlines should scale down to `headline-md-mobile` to maintain visual balance while preserving authority.
|
|
|
|
## Layout & Spacing
|
|
|
|
The layout utilizes a **Flexible Grid System** with a focus on logical grouping through card-based containment.
|
|
|
|
- **Grid:** A 12-column grid is used for desktop views, transitioning to a single-column stacked layout for mobile.
|
|
- **Rhythm:** An 8px-based spacing scale ensures vertical consistency. Use `lg (24px)` for outer card padding and `md (16px)` for internal element spacing.
|
|
- **Mobile Margins:** Standard mobile side margins are set to `md (16px)` to maximize screen real estate for dense data tables.
|
|
- **Sectioning:** Distinct operational modules should be separated by `xl (40px)` of vertical space to prevent cognitive overload.
|
|
|
|
## Elevation & Depth
|
|
|
|
This design system conveys hierarchy through **Tonal Layering** and **Subtle Ambient Shadows**. We avoid heavy skeuomorphism in favor of a "Flat-Plus" approach.
|
|
|
|
- **Base Layer:** The page background (`bg-page`) sits at the lowest elevation.
|
|
- **Mid Layer (Cards):** UI cards use a white surface with a subtle shadow (`0 4px 14px rgba(0,0,0,.07)`) to appear slightly lifted.
|
|
- **Interactive Layer:** On hover or active state, cards may transition to a higher elevation (`0 8px 28px rgba(0,0,0,.1)`) with a slight upward translation of -2px.
|
|
- **Overlays:** Modals and dropdowns use the highest z-index with a distinct backdrop blur to maintain focus on the task at hand.
|
|
- **Gradients:** Use soft radial gradients in the background (Blue/Purple) to create environmental depth without interfering with content legibility.
|
|
|
|
## Shapes
|
|
|
|
The shape language is **Rounded**, balancing industrial rigidity with modern software approachability.
|
|
|
|
- **Cards & Sections:** Use the standard `rounded-lg (1rem)` for primary containers.
|
|
- **Nodes & Blocks:** Architecture and data nodes use `rounded (0.5rem)` to fit more compactly within layouts.
|
|
- **Interactive Elements:** Buttons and tags use a "Pill-shape" (`rounded-xl` or 999px) to distinguish them from structural containers.
|
|
- **Borders:** Use `1px solid` with the `border-rule` color for most containers. Active states or primary focus areas may increase to `1.5px`.
|
|
|
|
## Components
|
|
|
|
**Buttons:**
|
|
- **Primary:** Solid `primary_color` with white text. Pill-shaped.
|
|
- **Secondary:** Transparent with `primary_color` border or subtle purple tint for operation tasks.
|
|
- **Danger:** Solid `status-error` for irreversible actions.
|
|
|
|
**Cards:**
|
|
- White background, `1px` border-rule, and `rounded-lg` corners.
|
|
- Headers should have a `18px` internal padding and a bottom border to separate from the content body.
|
|
|
|
**Input Fields:**
|
|
- Soft white background with `1px` border.
|
|
- Focused states should use a `primary_color` border with a subtle outer glow.
|
|
|
|
**Chips & Tags:**
|
|
- Used for status (e.g., "Active", "Offline").
|
|
- Backgrounds should use `8% opacity` versions of the semantic colors (Blue, Green, Red) with bolded text in the 100% opacity color.
|
|
|
|
**Data Visualization:**
|
|
- Charts should use the primary blue and secondary purple as the main data series colors.
|
|
- Use `data-mono` for all axis labels and tooltips to ensure technical accuracy.
|
|
|
|
**Status Indicators:**
|
|
- Small `7px` circular dots used within lists or architecture nodes to show real-time connectivity status. |