4월 말 DevUI Admin은 많은 기대와 함께 Angular의 첫 번째 오픈 소스 버전(1.0.0)으로 출시됩니다.

DevUI Admin은 엔터프라이즈급 미들 및 백엔드 프런트엔드/디자인 솔루션입니다. DevUI Design을 기반으로 자체 설계 사양 및 기본 구성 요소를 기반으로 백엔드 관리 템플릿을 구축합니다.

몇 달 간의 인큐베이션 후 DevUI Admin은 중간 및 백 엔드에서 사용할 수 있는 프런트 엔드 시스템을 구축하기 위한 솔루션을 제공합니다.

반응형: 다양한 화면 크기에 적응하여 사용자에게 보다 편안한 인터페이스와 사용자 경험을 제공합니다.

개인화된 테마: 여러 테마 스타일과 개인화된 설정 간의 동적 전환을 지원합니다.

레이아웃 전환: 페이지 레이아웃은 구성 가능하고 유연합니다.

국제화: 다국어 요구 사항을 충족하기 위해 국제화를 구현합니다.

모의 데이터: 로컬 데이터 디버깅 및 프런트 엔드와 백 엔드 간의 분리;

페이지 템플릿: DevUI 실습 및 경험을 기반으로 일반적인 비즈니스 시나리오를 추출하고 다양한 페이지 템플릿을 제공합니다.

devui.design에서 자세히 알아보거나 GitHub에서 DevUI Admin을 팔로우할 수 있습니다.

미리보기 페이지: https://devui.design/admin/

홈페이지: https://devui.design/admin-page/home

GitHub: https://github.com/DevCloudFE/ng-devui-admin

DevUI 디자인: https://devui.design/home

반응형

DevUI Admin은 그리드 기반의 반응형 솔루션을 제공합니다. Admin 프로젝트를 초기화하면 페이지 응답 기능을 얻을 수 있습니다. 더 중요한 것은 반응형 페이지 작성에 사용할 수 있는 공통 구성 요소로 da-grid도 제공한다는 것입니다.

맞춤형 테마

기본ng-devui 기능을 기반으로 DevUI Admin은 사용자가 선택할 수 있는 여러 테마를 제공합니다. 전체 색상 일치 외에도 글꼴 크기와 필렛 크기도 구성할 수 있습니다. 사용자는 개인 취향에 따라 테마를 선택할 수 있습니다.

레이아웃을 전환합니다.

DevUI Admin은 여러 레이아웃을 지원합니다. 레이아웃 구성을 수정하기만 하면 레이아웃 설정을 사용자 지정할 수 있습니다. 더 중요한 것은 da-layout를 더 많은 레이아웃 구성을 확장하는 데 사용할 수 있는 구성 요소로 제공한다는 것입니다.

국제화

DevUI Admin은 @ngx-translate/core를 사용하여 국제화를 구현합니다. 국제화 관련 단어는 모듈식 관리를 지원합니다. Admin 프로젝트를 초기화한 후 해당 국제화 구성을 선택할 수 있습니다.

모의 데이터

모의 데이터는 프론트엔드 프로젝트가 백엔드 인터페이스의 영향을 받지 않도록 프론트엔드와 백엔드를 분리하는 데 매우 중요합니다. DevUI Admin에서 Mock 데이터 방법을 제공했습니다. Admin 프로젝트를 초기화할 때 기본적으로 데이터 모의 지원을 선택할 수 있습니다.

페이지 템플릿

DevUI Admin GitHub 코드 리포지토리에서는 기본적으로 여러 페이지 템플릿을 제공합니다.

- Dashboard
  - Analysis Page
  - Monitoring page
  - Workbench
- Form page
  - Base Form
  - Form Layout
  - Advanced Forms
- List Page
  - Base List
  - Card list
  - Edit List
  - Advanced List
  - Tree List
- Exception page
  - 403
  - 404
  - 500
- Personal page
  - Personal Center
  - Personal settings

github에서 코드를 가져온 후 살펴볼 수 있습니다.

CLI 지원

현재 DevUI Admin은 Angular CLI를 사용하여 관리자 프로젝트를 초기화할 수 있습니다. Angular CLI를 사용하여 관리 프로젝트를 빠르게 만들고 구성할 수 있습니다.

# Initialize the project.
$ ng new your-project && cd your-project
$ ng add ng-devui-admin

후속 조치

앞으로도 우리는 성능과 사용성에 중점을 두고 DevUI Admin의 경험을 최적화하고 개발자 비용을 절감하면서 계속 진화할 것입니다. 귀하의 의견과 제안을 기다리겠습니다( Issue List ). 여러분의 많은 참여와 협조를 부탁드립니다.