purple admin ui

Purple Admin UI

Шаблон администратора Mo-Dunn с использованием next.js и Tailwind

введение

Next.js + Tailwind + Ant Design Semplate, созданный путем сбора популярных библиотек, чтобы любой мог легко и быстро разрабатывать страницу бэк -офиса. Разработка администратора было всего 10 лет ...

Предупреждение, что это работа в программе. Если у вас есть необходимые описания или функции/ошибки, пожалуйста, зарегистрируйтесь в выпуске. Мы будем обновлять после обзора.

Рекомендуется для этих людей?

1. Back -End Programmer, который удосужился разработать страницу администратора
2. Если вам нужен шаблон, который связывает библиотеку, которая часто используется на основе next.js/React
3. Из

демо

https://admin-ui.purple.io/login

Войдите в систему с OAuth (Google/Github) или идентификатором/паролем (Admin/Admin).

Создание проектов

Вы можете нажать кнопку Deploy , чтобы дублировать источник и развернуть его в Vercel.

Вы можете начать проект, загрузив источник или введя следующую команду:

 # npm
npx create-next-app --example " https://github.com/purpleio/purple-admin-ui "
# yarn
yarn create next-app --example " https://github.com/purpleio/purple-admin-ui "
# pnpm
pnpm create next-app --example " https://github.com/purpleio/purple-admin-ui "

По умолчанию

Скопируйте файл .env.example , чтобы создать файл .env .

cp .env.example .env

ключ	объяснение	пример
Nextauth_url	УРЛ	http: // localhost: 3000
Nextauth_secret	Случайный секретный ключ	Выдача случайных творческих
Github_client_id	Идентификатор клиента GitHub oauth
Github_client_secret	GitHub Oauth Client Secret
Google_client_id	Google OAuth ID клиента
Google_client_secret	Google Oauth Client Secret
Next_public_api_endpoint	Конечная точка API -сервера	http: // localhost: 3000
Next_public_codenbutter_site_id	POP -UP Плагин	Идентификатор сайта кода и масла

Образец

Пример кода позволяет проверить базовое использование.

API -сервер (Mock Data)

В целом, бэкэнд -сервер часто разделен, но это пример кода для простого теста.

• Src/pages/api/sample/dashboard.ts: Статистический запрос
• Src/pages/api/sample/products/index.ts: список продуктов
• Src/pages/api/sample/products/[id] .ts: продукт CRUD API

API -клиент

Это пример кода, который собирает функции для вызова API в передней части.
Управление кодом и типом, связанными с API.

• src/client/sample/dashboard.ts: API статистического запроса
• src/client/sample/product.ts: продукт Crud/Type

страница

Приборная панель и продуктовая образец образец CRUD.
Детали делятся на компоненты на src/components/page/[동일한 페이지 경로] .

• src/pages/index.tsx: панель панели
• Src/pages/sample/product/list.tsx: список продукта
• Src/pages/sample/product/new.tsx: регистрация продукта
• Src/pages/sample/product/edit/[id] .tsx: модификация продукта

Компонент

Это пример кода, который делает различные библиотеки.
Вы можете проверить основные функции, такие как статистика, поиск, список и входная форма.

• Src/components/page/index/calendar-sample.tsx: компонент календарного образца
• Src/components/page/index/statistic-sample.tsx: статистический выбор
• src/components/page/sample/product/product.tsx: входная форма продукта (создание/модификация общее использование) Компонент
• SRC/Components/Page/Sample/Product/Product-List.tsx: Компонент списка продуктов
• Src/components/page/sample/product/product/product-search.tsx: компонент поиска продукта

Образец изображения

• Публичный/Образец: образец изображения

Технологический стек и функция

Рамки

• Next.js - REACT.JS -основанный фреймворк, созданный Vercel
• Auth.js - OAuth (Google/Github) или библиотека идентификатора/пароля

Платформы

• Vercel - Next.js Service Service

UI

• Тяжелый ветер CSS-уъезд-первый CSS Framework
• Дизайн муравья - библиотека пользовательского интерфейса, которая поддерживает различные компоненты администратора
• Lucide - Коллекция значков SVG
• Framer Motion - библиотека анимации
• React Countup -counting Animation
• Следующая/шрифт -Вонт библиотека оптимизации

Форма управления

• Quill - текстовый редактор Wijiwick
• КОДЕМРОР -КОД Редактор

Качество кода

• TypeScript - сильно напечатанный язык программирования, который основан на JavaScript
• Красотчее - открытый формат
• Eslint - Утилита подключаемого сжима для JavaScript и JSX

Разнообразный

• Альтернативные шрифты Alternative Alternative Alternative Alternative-System-UI доступны на любой платформе
• Day.js - библиотека даты/времени
• SWR -Hooks для запроса данных
• Ky -small и elegant http -клиент
• Библиотека сценария цифры -NUMBER
• Codenbutter -Notice Pop -Up

Конфигурация проекта

Архитектура

• Все страницы, кроме сертификации, предоставляются в качестве статической страницы. (SSR использует x) Даже если API умирает, появляется страница.
• Бизнес -логика предоставляется в качестве бэкэнд API, а передняя часть хорошо выражена и доставлена.
• Часть, связанная с формой, активно использует компонент формы конструкции муравья.

Каталог

Для эффективного управления структура каталогов определяется следующим образом.

 ┌─ src
│  ├─ client # API 호출 코드
│  ├─ components
│  │  ├─ layout # 기본 레이아웃
│  │  ├─ page # 페이지별 세부 컴포넌트
│  │  └─ shared # 공통 컴포넌트
│  ├─ fonts # 웹폰트
│  ├─ lib
│  │  ├─ auth # 인증 관련 코드
│  │  └─ hooks # react hooks
│  ├─ pages # 페이지
│  ├─ styles # 기본 스타일
│  └─ types # 타입 정의
└─ public # 이미지등 정적 파일

SRC/клиент

• Используйте функции, определенные в клиентском каталоге, не вызывая извлечение непосредственно из каждого компонента
• SURITS использует SWR и Post или Plat использует ky .

SRC/компоненты/макет

• Определение макета

SRC/Компоненты/Страница

• Определение компонентов, используемых только на определенных страницах
• Компоненты, используемые на pages/profile , определены в components/page/profile
• Стиль компонента написан как модуль.css в одной и той же папке

SRC/Компоненты/Общие

• Определение компонентов обычно используется

SRC/шрифты

• Сохранить веб -шрифты

lib/auth

• Сертификация -определение кода, связанное с

Либ/крючки

• Пользовательское определение крюка

Пользовательский компонент

Defaulttable

DefaultModal

Formearch

Формирование

Формара

Fieldinline

Скриншот

ограничения

• Т.е. не -поддержка

Автор

• Субикура (@subicura)