Actions
이슈 #462
진행중
JK
JK
EDGE consol 템플릿 디자인
이슈 #462:
EDGE consol 템플릿 디자인
설명
작업¶
- 현 데이터 그대로 디자인 스타일만 변경
- 카드 기반 모듈화
- 그리드 정렬
- 멀티 컬러를 모노톤으로 절제
- 타이포그래피 적용 : 터미널 도구 -> 대시보드 성격 강화
- 인터랙션 애니메이션 추가
산출물¶
https://www.figma.com/design/MSPlaAMs0os5TYqSRjTRdo/node-monitor?node-id=11-7&t=m77zN98GqLaOkHiC-1
JL James Lee이(가) 5달 전에 변경 · Edited
- 상태을(를) 신규에서 해결(으)로 변경되었습니다.
구현 반영 완료 (alphea-edge-proto / PhoneBoard)¶
-
커밋:
ccd6cc4— feat(monitor): align web console UI with edge-console template v2/v3 - 브랜치: PhoneBoard (origin에 push 완료)
적용 범위¶
공통 인프라¶
- monitor v3
styles.css임베딩 (/monitor/assets/styles.css) -
compat.css,pages.css(대시보드/노드/모달 보조) - Space Grotesk + Geist Mono, Lucide 아이콘, 공통 topbar 레이아웃 (
webconsole_layout.go)
대시보드 (/monitor) — template v2¶
- stats-grid, middle-grid, rpc-grid, vfs-ais-grid 카드 구조
- System: sys-row 진행 바, Jobs: jobs-row, Network: control/ctrl-btn
- VFS: vfs-path / vfs-browser / vfs-folder, AIS: aisOutput/aisForm
-
pages.css노드 전용 스타일 분리 (대시보드.card오염 방지)
Nodes (/monitor/nodes) — template v2/v3¶
- sub-header + node-grid(5열) + node-card 마크업
- Lucide 리소스 아이콘 (cpu/wifi/server), SSE 활성/리소스 하이라이트 유지
AGX (/monitor/agx) — template v3¶
- agx-grid / agx-stack / field / kv-list / period-card 레이아웃
-
/monitor/api/agx-configAPI 및 계산기 JS 동작 유지
Observability (/monitor/observability) — template v3¶
- observ-services(6열) + observ-card 서비스 헬스
- observ-summary (REAL NODES WebSocket 통계)
- observ-logs + pill-btn 필터 + observ-log-row 로그 테이블
- SigNoz API/WS 연동 및 Open SigNoz 링크 유지
기타 서브페이지¶
- Synth, Settings, RPC Explorer, Test Client — v2 topbar/스타일 래핑
참고¶
- 디자인 참조:
edge-console-templatev2,edge-console-templatev3(로컬, 리포 미포함) - 기능(SSE, VFS API, AGX config, SigNoz)은 기존 Go 핸들러 로직 유지, HTML/CSS만 템플릿 정렬
Actions