관리자 프로젝트는 매번 같은 일을 다시 합니다. 로그인, 레이아웃, 표, 트리, 알림, 설정, 빈 상태와 오류 상태를 새로 만듭니다. 그런데 색과 여백, 상호작용의 세부는 서로 달라지고, 화면이 늘어날수록 일관성을 유지하는 비용도 함께 커집니다.

저희는 그 공통 부분을 재사용 가능한 하나의 기준선으로 정리해 MIT 라이선스로 공개했습니다. admin-design은 Runlume 플랫폼 프런트엔드에서 추출한 표준 관리자 화면의 설계와 구현입니다.

담고 있는 것

  • 테마와 의미 토큰: 색상은 의미를 가진 유틸리티 클래스로만 지정하고, 여섯 가지 프리셋 배색에 기본색과 테마색을 겹쳐 씁니다. 밝은 모드와 어두운 모드는 자동으로 따라갑니다.
  • 세 가지 레이아웃 셸: 사이드바, 상단 + 사이드바, 상단 내비게이션. 사이드바 너비, 모서리 반경, 페이지 전환, 상단 작업 순서를 조정할 수 있습니다.
  • 아홉 갈래 컴포넌트 페이지: 기본 컨트롤, 폼과 선택, 데이터 표시, 피드백과 오버레이, 내비게이션과 흐름, 지표와 차트, 아이콘, 테마와 설정, 표준 페이지. 컴포넌트 갤러리는 문서이면서 검수 기준면입니다.
  • 표준 페이지 유형: 대시보드, 목록, 상세, 설정, 알림 센터, 로그인, 회원가입, 비밀번호 재설정.
  • 중국어와 영어 기본 제공, 키보드 접근성과 접근성 설정, 문서 사이트와 같은 명령 팔레트 검색.

세 가지 입구

누구에게 맞고, 경계는 어디인가

관리자 화면을 직접 만들어야 하지만 인터페이스를 처음부터 두 번 작성하고 싶지 않은 팀에 맞습니다. 저장소를 복제하고 package.json의 이름을 바꾼 뒤 메뉴와 브랜드 자산을 교체하고, 예시 데이터를 자체 API로 연결하면 됩니다.

포함된 범위는 설계와 상호작용 계층뿐입니다. 업무 API, 인증 구현, 권한 모델, 업무 규칙은 포함하지 않습니다. 예시 데이터는 메모리에 있고 새로 고치면 초기화됩니다. 신원, 업로드, 트리 드래그, 지연 로딩 같은 기능은 props로 주입하므로 실제 서비스 연결은 콜백 교체로 끝납니다.