Descarga de purple admin ui - Descargar el código fuente de purple admin ui

purple admin ui

Código Fuente de IA

1.0.0

Descargar

Ui de administrador púrpura

Plantilla de administración de Mo-Dunn usando Next.js y Viento de cola

introducción

Next.js + Tailwind + Ant Design Template de administración basada en la recolección de bibliotecas populares para que cualquiera pueda desarrollar la página de back office de manera fácil y rápida. ~~El desarrollo administrativo solo ha pasado 10 años ...~~

Demostración de escritorio

Advertencia Esto es trabajo en el programa. Si tiene las descripciones o características/errores necesarios, regístrese en el tema. Actualizaremos después de la revisión.

Recomendado para estas personas?

Programador de retroceso que se molesta en diseñar para hacer una página de administración
Si necesita una plantilla que ate una biblioteca que se usa con frecuencia en función de Next.js/React
De

manifestación

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

Inicie sesión con OAuth (Google/GitHub) o ID/Passwase (Admin/Admin).

Creación de proyectos

Puede hacer clic en el botón Deploy para duplicar la fuente e implementarla en el Vercel.

Puede iniciar el proyecto descargando la fuente o ingresando el siguiente comando:

 # 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 "

Por defecto

Copie el archivo .env.example para crear un archivo .env .

cp .env.example .env

llave	explicación	ejemplo
NextAuth_url	URL de servicio	http: // localhost: 3000
NextAuth_secret	Clave secreta aleatoria	Emisión de creatividad aleatoria
Github_client_id	ID de cliente GitHub OAuth
Github_client_secret	Secreto de Cliente Github Oauth
Google_client_id	ID de cliente de Google OAuth
Google_client_secret	Secreto del cliente de Google OAuth
Next_public_api_endpoint	Punto final del servidor API	http: // localhost: 3000
Next_public_codenbutter_site_id	Complemento pop -Up	ID de sitio de código y mantequilla

Muestra

El código de muestra le permite verificar el uso básico.

API Server (datos simulados)

En general, el servidor de backend a menudo se separa, pero es un código de muestra para una prueba simple.

SRC/PAGE/API/SUPERIOR/PANTABLO.TS: Consulta de estadísticas
SRC/Pages/API/Sample/Products/Index.ts: Lista de productos
SRC/Pages/API/Sample/Products/[ID] .TS: Product API CRUD

Cliente API

Este es un código de muestra que recopila funciones para llamar a la API en la parte delantera.
Administre el código y el tipo relacionado con la API.

SRC/Client/Sample/Dashboard.ts: API de consulta estadística
SRC/Client/Sample/Product.ts: Product Crud/Type

página

Página de muestra de Dashboard y Product CRUD.
Los detalles se dividen en componentes en src/components/page/[동일한 페이지 경로] .

src/páginas/index.tsx: Panel
Src/páginas/muestra/producto/list.tsx: lista de productos
Src/páginas/muestra/producto/new.tsx: registro de productos
Src/páginas/muestra/producto/edición/[id] .tsx: modificación del producto

Componente

Este es un código de muestra que hace que varias bibliotecas se mezclen.
Puede verificar las funciones básicas como estadísticas, búsqueda, lista y formulario de entrada.

Src/componentes/página/index/calendario-sample.tsx: componente de muestra de calendario
Src/componentes/página/index/estadística-sample.tsx: componente de muestra estadística
SRC/Componentes/Page/Sample/Product/Product.TSX: Formulario de entrada del producto (Creación/Modificación de uso común) Componente
Src/componentes/página/muestra/producto/producto-list.tsx: componente de la lista de productos
Src/componentes/página/muestra/producto/producto/producto-search.tsx: componente de búsqueda de productos

Imagen de muestra

Público/Muestra: imagen de muestra

Pila y función de tecnología

Estructura

Next.js - marco basado en react.js creado por Vercel
Auth.js - OAuth (Google/GitHub) o Biblioteca de ID/contraseña

Plataformas

VERCEL - Servicio de distribución de aplicaciones Next.JS

Ui

Tailwind CSS-Utility-Primer marco CSS
Diseño de hormigas - Biblioteca de interfaz de usuario que admite varios componentes del administrador
Lucide - Svg Icon Collection
Framer Motion - Biblioteca de animación
React Countup -Nimación de contabilidad
Next/Font -WebFont Optimization Library

Control de formulario

Quill - editor de texto de Wijiwick
Editor de código de codemror

Calidad del código

TypeScript: lenguaje de programación fuertemente escrito que se basa en JavaScript
Más bonito - formatero de código opinado
Eslint: la utilidad de pelusa plugable para JavaScript y JSX

Misceláneas

Fuentes alternativas de SystendAd-System-UI disponibles en cualquier plataforma
Day.js - Biblioteca de fecha/hora
SWR -Hooks para la consulta de datos
KY -Mall y elegante cliente HTTP
Numeral -Number Formeting Library
CodenButter -Notice Pop -Up

Configuración del proyecto

Arquitectura

Todas las páginas, excepto la certificación, se proporcionan como una página estática. (Uso de SSR x) ~~Incluso si la API muere, aparece la página.~~
La lógica de negocios se proporciona como una API de backend y la parte delantera está bien expresada y entregada.
La parte relacionada con la forma utiliza activamente el componente de formulario del diseño de hormigas.

Directorio

Para una gestión eficiente, la estructura del directorio se define de la siguiente manera.

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

SRC/Cliente

Use funciones definidas en el directorio de clientes sin llamar a la búsqueda directamente de cada componente
Las superficies usan SWR y POST o PUT usa ky .

src/componentes/diseño

Definición de diseño

src/componentes/página

Definición de componentes utilizados solo en ciertas páginas
Los componentes utilizados en pages/profile se definen en components/page/profile
El estilo de componente se escribe como módulo.css en la misma carpeta

Src/componentes/compartido