pipeline_core/skills_library/all/pccs-ui-design/SKILL.md

name	description	version	category
pccs-ui-design	Use when designing pccs UI. Colors, layout, interactions.	1.0.0	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