---
name: pccs-ui-design
description: "Use when designing pccs UI. Colors, layout, interactions."
version: 1.0.0
category: design
---

# PCCS UI Design System

## Overview
PCCS (算力中心集群系统) is an infrastructure management platform for compute pools,
K8s/Slurm/Ray clusters, shared storage, and container images. Design targets: operators
and reseller admins managing physical/virtual compute resources.

## Color System (Infrastructure Dashboard)

| Token | Hex | Usage |
|-------|-----|-------|
| `--pccs-primary` | `#2563eb` | Buttons, links, active states, selected items |
| `--pccs-primary-light` | `#dbeafe` | Selected row bg, hover highlights |
| `--pccs-success` | `#16a34a` | Running/Active/Online/Synced status |
| `--pccs-warning` | `#f59e0b` | Deploying/Pending/Joining status |
| `--pccs-error` | `#dc2626` | Failed/Offline/Error status |
| `--pccs-sidebar` | `#0f172a` | Left sidebar background |
| `--pccs-sidebar-text` | `#94a3b8` | Sidebar inactive text |
| `--pccs-sidebar-active` | `#e2e8f0` | Sidebar active item text |
| `--pccs-bg` | `#f8fafc` | Main content background |
| `--pccs-card` | `#ffffff` | Card/widget background |
| `--pccs-border` | `#e2e8f0` | Borders, dividers |
| `--pccs-text` | `#1e293b` | Primary text |
| `--pccs-text-secondary` | `#64748b` | Secondary/muted text |

## Status Color Mapping (Universal)

```
running / active / online / synced / mounted  → green  #16a34a
deploying / pending / joining / syncing        → amber  #f59e0b
failed / error / offline                       → red    #dc2626
stopped / inactive / unmounted / destroyed     → gray   #94a3b8
```

In CRUD lists, status field renders as colored badge (small rounded pill).

## Layout System

### Dashboard (index.ui)
```
┌──────────────────────────────────────────────┐
│ header bar: logo + user info                  │
├────────┬─────────────────────────────────────┤
│sidebar │ main content                         │
│ ─────  │ ┌──────┐ ┌──────┐ ┌──────┐ ┌─────┐ │
│ 概览    │ │算力池 │ │集群  │ │存储  │ │镜像 │ │
│         │ │ 3个  │ │ 5个  │ │200GB │ │12个 │ │
│ 算力池   │ │2🟢1🟡│ │3🟢2🟡│ │150G🟢│ │10🟢 │ │
│ 集群    │ └──────┘ └──────┘ └──────┘ └─────┘ │
│ 存储    │                                      │
│ 镜像    │ [最近部署] [资源使用趋势]             │
└────────┴─────────────────────────────────────┘
```

### CRUD List Page
```
┌────────────────────────────────────────────────┐
│ breadcrumb: 首页 > 算力池管理                    │
│ [+新建] [搜索...]                  [刷新] [导出] │
├────────────────────────────────────────────────┤
│ 名称    │ 类型  │ 资源使用      │ 状态          │
│ GPU池A  │ GPU   │ 16/32C 128/256G│ 🟢运行       │
│ CPU池B  │ CPU   │ 8/16C  64/128G│ 🟢运行       │
└────────────────────────────────────────────────┘
```

## Widget Conventions

### Status Badge
Use Text widget with inline style for status display.

### Action Buttons (Toolbar)
- `css: "primary"` — blue, main action (创建/部署/保存)
- `css: "default"` — white+border, secondary (刷新/导出)
- `css: "danger"` — red text, destructive (删除/销毁)
- `css: "link"` — text-only, row-level actions (编辑/详情)

### Resource Cards (Dashboard)
VBox with white bg, subtle border, rounded corners, padding 16px.

### Form Layout (PopupWindow)
Modal forms: cwidth=32, single column, blue submit at bottom, link cancel.

## Interaction Patterns

1. **CRUD → Deploy**: List → [+新建] → PopupWindow Form → Save → List refresh
2. **Node Assignment**: Cluster detail → [分配节点] → PopupWindow picker → Save
3. **Storage Mount**: Export → [挂载] → pick node+path → mount_exec.dspy
4. **Image Import**: Registry → [导入镜像] → Form → import.dspy → refresh
5. **Multi-step Deploy**: [部署] → Phase 1..N → real-time poll → done/failed

## Header Bar (Mandatory for RBAC)

Every page with RBAC module MUST have a header bar with:
1. **User menu** (right side) — RBAC usermenu.ui via urlwidget
2. **Language switch** (🌐) — i18n toggle button
3. **Theme switch** (🌓) — dark/light toggle if multi-theme supported

```
┌──────────────────────────────────────────────────────────┐
│ PCCS  算力中心集群系统          🌓 🌐 中文  [👤 用户名 ▾] │
├──────────────────────────────────────────────────────────┤
```

Header: white bg, 48px height, `borderBottom: 1px solid #e2e8f0`, flexShrink:0.

## Bricks Pitfalls (Mandatory)

1. Widget `id` at TOP LEVEL, not in `options`
2. `.tmpl` processor MUST be in config.json website.processors
3. Form field pre-fill: use `"value"` not `"defaultValue"`
4. getWidgetById ALWAYS pass second arg: `bricks.getWidgetById('x', bricks.app)`
5. `uitype:"check"` = single toggle, `uitype:"checkbox"` = multi-checkbox group
6. `.dspy` uses raw Python, `.ui` uses Jinja2 `{{...}}` — never mix
7. Prefer urlwidget/PopupWindow over inline JS scripts
8. Button has NO set_text() — use `button.text_w.set_text()`
9. VScrollPanel has NO `.render()` — use `add_widget()`
10. Scroll areas: filler chain, NEVER fixed height