Téléchargement purple admin ui - purple admin ui Code source Téléchargement

purple admin ui

Code Source AI

1.0.0

Télécharger

Ui administrateur violet

Modèle d'administration Mo-Dunn utilisant Next.js et Tailwind

introduction

Next.js + Tailwind + Ant Design-Modèle d'administration basé en collectant des bibliothèques populaires afin que n'importe qui puisse développer la page de back-office facilement et rapidement. ~~Le développement de l'administrateur n'a été que 10 ans ...~~

Démo de bureau

Avertissement C'est un travail dans le programme. Si vous avez les descriptions ou fonctionnalités / bogues nécessaires, veuillez vous inscrire dans le numéro. Nous mettrons à jour après examen.

Recommandé pour ces personnes?

Programmeur de dos qui est dérangé de concevoir pour créer une page d'administration
Si vous avez besoin d'un modèle qui lie une bibliothèque fréquemment utilisée sur la base de next.js / réagir
De

démo

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

Connectez-vous avec OAuth (Google / GitHub) ou ID / Mot de passe (Admin / Admin).

Création de projets

Vous pouvez cliquer sur le bouton Deploy pour dupliquer la source et le déployer sur Vercel.

Vous pouvez démarrer le projet en téléchargeant la source ou en entrant la commande suivante:

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

Défaut

Copiez le fichier .env.example pour créer un fichier .env .

cp .env.example .env

clé	explication	exemple
NextAuth_url	URL de service	http: // localhost: 3000
NextAuth_Secret	Clé secrète aléatoire	Émission de créatives aléatoires
Github_client_id	ID du client GitHub OAuth
Github_client_secret	Secret client github oautht
Google_client_id	ID client Google OAuth
Google_client_secret	Secret de client Google OAuth
Next_public_api_endpoint	Point final du serveur API	http: // localhost: 3000
Next_public_codenbutter_site_id	Plugin pop -up	ID de site de code et de beurre

Échantillon

L'exemple de code vous permet de vérifier l'utilisation de base.

Serveur API (Données simulées)

En général, le serveur backend est souvent séparé, mais il s'agit d'un exemple de code pour un test simple.

Src / pages / api / sampon / tableau de bord.ts: enquête statistique
Src / pages / api / sampon / produits / index.ts: liste de produits
Src / pages / api / échantillon / produits / [id] .ts: API Crud Product

Client API

Il s'agit d'un exemple de code qui collecte des fonctions pour appeler l'API dans le frontal.
Gérer le code et le type liés à l'API.

src / client / sampon / tableau de bord.ts: API de recherche statistique
src / client / sampon / produit.ts: produit crud / type

page

Page de tableau de bord et d'échantillon de crud produit.
Les détails sont divisés en composants en src/components/page/[동일한 페이지 경로] .

src / pages / index.tsx: tableau de bord
Src / pages / sampon / produit / list.tsx: liste de produits
Src / pages / échantillon / produit / new.tsx: Enregistrement des produits
Src / pages / échantillon / produit / edit / [id] .tsx: modification du produit

Composant

Il s'agit d'un exemple de code qui fait que diverses bibliothèques mélangent.
Vous pouvez vérifier les fonctions de base telles que les statistiques, la recherche, la liste et le formulaire d'entrée.

Src / composants / page / index / calendrier-échantillon.TSX: composant de l'échantillon de calendrier
Src / composants / page / index / statistic-échantillon.tsx: composant d'échantillon statistique
SRC / Components / Page / Exemple / Product / Product.TSX: Formulaire d'entrée de produit (Création / Modification Utilisation commune)
SRC / Components / Page / Exemple / Product / Product-List.TSX: Composant de liste de produits
SRC / Components / Page / Exemple / Product / Product / Product-Search.TSX: Composant de recherche de produit

Exemple d'image

Public / échantillon: exemple d'image

Pile et fonction technologiques

Cadre

Framework basé sur Next.js - React.js créé par Vercel
Auth.js - oauth (google / github) ou bibliothèque id / mot de passe

Plates-formes

Vercel - Service de distribution d'application Next.js

Ui

Tailwind CSS-Utility-First CSS Framework
ANT DESIGN - Bibliothèque d'interface utilisateur qui prend en charge divers composants d'administrateur
Lucide - Collection d'icônes SVG
Framer Motion - Bibliothèque d'animation
React Counup -Count Animation
Bibliothèque d'optimisation Suivant / Font -Webfont

Contrôle

Quill - éditeur de texte Wijiwick
Codemror-Code Editor

Qualité du code

TypeScript - langage de programmation fortement tapé qui s'appuie sur JavaScript
Plus joli - Formeuse de code opinion
Eslint - L'utilitaire de liaison plugable pour JavaScript et JSX

Divers

Polices alternatives prétendard-System-UI disponibles sur n'importe quelle plate-forme
Day.js - bibliothèque de date / heure
SWR -Hooks pour l'enquête sur les données
KY -Small et élégant client HTTP
Numéro-bibliothèque de formation
Codenbutter -Notice pop -up

Configuration du projet

Architecture

Toutes les pages à l'exception de la certification sont fournies sous forme de page statique. (SSR utilise x) ~~Même si l'API meurt, la page apparaît.~~
La logique commerciale est fournie en tant qu'API backend et le frontal est bien exprimé et livré.
La partie liée à la forme utilise activement le composant de forme de la conception des fourmis.

Annuaire

Pour une gestion efficace, la structure du répertoire est définie comme suit.

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

SRC / Client

Utiliser des fonctions définies dans le répertoire client sans appeler aller chercher directement à partir de chaque composant
Les tours utilisent SWR et Post ou Put utilisent ky .

src / composants / disposition

Définition de disposition

src / composants / page

Définition des composants utilisés uniquement sur certaines pages
Les composants utilisés dans pages/profile sont définis dans components/page/profile
Le style de composant est écrit comme module.css dans le même dossier

Src / composants / partagé