Download de purple admin ui - purple admin ui download do código -fonte

purple admin ui

Código-Fonte de IA

1.0.0

Baixar

Ui de administrador roxo

Modelo de Admin Mo-Dunn usando Next.js e Tailwind

introdução

Next.js + Tailwind + modelo de administração baseado em design de formigas fabricadas coletando bibliotecas populares para que qualquer pessoa possa desenvolver a página do back office de maneira fácil e rápida. ~~O desenvolvimento do administrador tem sido apenas 10 anos ...~~

Demoção da área de trabalho

Aviso que isso é trabalho no programa. Se você tiver as descrições ou recursos/bugs necessários, registre -se na questão. Atualizaremos após a revisão.

Recomendado para essas pessoas?

Voltar -nd Programador que se preocupa em projetar para fazer uma página de administração
Se você precisar de um modelo que amarre uma biblioteca que é frequentemente usada com base no próximo.js/react
De

demonstração

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

Faça login com oauth (google/github) ou id/senha (admin/admin).

Criação de projetos

Você pode clicar no botão Deploy para duplicar a origem e implantá -lo no vercel.

Você pode iniciar o projeto baixando a fonte ou inserindo o seguinte 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 "

Padrão

Copie o arquivo .env.example para criar um arquivo .env .

cp .env.example .env

chave	explicação	exemplo
Nextauth_url	URL de serviço	http: // localhost: 3000
Nextauth_Secret	Chave secreta aleatória	Emissão de criativo aleatório
Github_client_id	ID do cliente Github Oauth
Github_client_secret	Github Oauth Client Secret
Google_client_id	ID do cliente do Google OAuth
Google_client_secret	Segredo do cliente do Google Oauth
Next_public_api_endPoint	Ponto final do servidor API	http: // localhost: 3000
Next_public_codenbutter_site_id	Plug -in pop -up	ID do site de código e manteiga

Amostra

O código de amostra permite que você verifique o uso básico.

Servidor de API (dados simulados)

Em geral, o servidor de back -end é frequentemente separado, mas é um código de amostra para um teste simples.

Src/páginas/api/sample/Dashboard.ts: Inquérito de estatística
Src/páginas/api/sample/produtos/index.ts: lista de produtos
Src/páginas/API/amostra/produtos/[id] .ts: produto CRUD API

Cliente da API

Este é um código de amostra que coleta funções para chamar a API no front end.
Gerenciar código e tipo relacionados à API.

src/client/sample/Dashboard.ts: API de consulta estatística
src/cliente/amostra/produto.ts: produto crud/tipo

página

Página de amostra de painel e produto CRUD.
Os detalhes são divididos em componentes em src/components/page/[동일한 페이지 경로] .

src/páginas/index.tsx: painel
Src/páginas/amostra/produto/list.tsx: lista de produtos
Src/páginas/amostra/produto/new.tsx: registro do produto
Src/páginas/amostra/produto/editar/[id] .tsx: modificação do produto

Componente

Este é um código de amostra que faz várias bibliotecas se misturam.
Você pode verificar as funções básicas, como estatísticas, pesquisa, lista e formulário de entrada.

Src/componentes/página/index/calendar-sample.tsx: componente de amostra do calendário
Src/componentes/página/index/statistic-sample.tsx: componente de amostra estatística
src/componentes/página/amostra/produto/produto.tsx: formulário de entrada do produto (componente de criação/modificação comum)
Src/componentes/página/amostra/produto/produto-lista.tsx: componente da lista de produtos
Src/componentes/página/amostra/produto/produto/produto-search.tsx: componente de pesquisa do produto

Imagem de amostra

Público/Amostra: Imagem da amostra

Pilha de tecnologia e função

Estrutura

Next.JS - React.js -Based Framework criado por Vercel
Auth.JS - OAuth (Google/Github) ou ID/Senha Biblioteca

Plataformas

VERCEL - NEXT.JS APLUSION DISTRIBUIÇÃO SERVIÇO

Ui

Tailwind CSS-UTILIDADE Primeiro CSS Framework
Biblioteca de Ant Ant - UI que suporta vários componentes administradores
Lucro - coleção de ícones SVG
Framer Motion - Library de Animação
React Countup -Counting Animation
Biblioteca de otimização Next/Font -WebFont

Controle de formulário

Quill - Editor de texto Wijiwick
Codemror -Code Editor

Qualidade de código

TypeScript - Linguagem de programação fortemente digitada que se baseia no JavaScript
Formatador de código mais bonito
Eslint - O utilitário de linha plugable para JavaScript e JSX

Variado

Fontes alternativas do System-System-UI Fretendard disponível em qualquer plataforma
Day.JS - Biblioteca Data/Hora
SWR -HOOKS para consulta de dados
Ky -small e elegante cliente HTTP
Biblioteca de formação de número numeral
Codenbutter -NoticE Pop -up

Configuração do projeto

Arquitetura

Todas as páginas, exceto a certificação, são fornecidas como uma página estática. (SSR Use X) ~~Mesmo que a API morra, a página será exibida.~~
A lógica de negócios é fornecida como uma API de back -end e o front -end é bem expresso e entregue.
A parte relacionada ao formulário usa ativamente o componente do formulário do design da formiga.

Diretório

Para gerenciamento eficiente, a estrutura do diretório é definida da seguinte maneira.

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

src/cliente

Use funções definidas no diretório do cliente sem ligar diretamente a busca de cada componente
Surits Use SWR e postagem ou put Usa ky .

src/componentes/layout

Definição de layout

src/componentes/página

Definição de componentes usados apenas em determinadas páginas
Os componentes usados nas pages/profile são definidos em components/page/profile
O estilo do componente é escrito como módulo.css na mesma pasta

Src/componentes/compartilhado