purple admin ui Download - purple admin ui UI Quellcode Download

purple admin ui

AI-Quellcode

1.0.0

Herunterladen

Lila admin ui

MO-DUNN-Administratorvorlage mit Next.js und Rückenwind

Einführung

Weiter.JS + Tailwind + Ant Design -basierte Administratorvorlage, die durch das Sammeln beliebter Bibliotheken hergestellt wurde, damit jeder die Back -Office -Seite einfach und schnell entwickeln kann. ~~Die Entwicklung der Verwaltung ist nur 10 Jahre ...~~

Desktop -Demo

Warnung Dies ist Arbeit im Programm. Wenn Sie über die erforderlichen Beschreibungen oder Funktionen/Fehler verfügen, registrieren Sie sich bitte in der Ausgabe. Wir werden nach der Überprüfung aktualisieren.

Empfohlen für diese Leute?

Back -End -Programmierer, der sich darum kümmert, eine Administratorseite zu erstellen
Wenn Sie eine Vorlage benötigen, die eine Bibliothek verbindet, die häufig basierend auf Next.js/React verwendet wird
Von

Demo

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

Melden Sie sich mit OAuth (Google/Github) oder ID/Passwort (Admin/Admin) an.

Schaffung von Projekten

Sie können auf die Schaltfläche Deploy klicken, um die Quelle zu duplizieren und auf dem Vercel bereitzustellen.

Sie können das Projekt starten, indem Sie die Quelle herunterladen oder den folgenden Befehl eingeben:

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

Standard

Kopieren Sie die Datei .env.example , um eine .env -Datei zu erstellen.

cp .env.example .env

Schlüssel	Erläuterung	Beispiel
NextAuth_url	Service -URL	http: // localhost: 3000
NextAuth_secret	Zufälliger geheimer Schlüssel	Ausgabe von zufälligen Kreativen
Github_client_id	Github OAuth Client ID
Github_client_secret	Github OAuth Client Secret
Google_client_id	Google OAuth Client -ID
Google_client_secret	Google OAuth Client Secret
Next_public_api_endpoint	API -Serverendpunkt	http: // localhost: 3000
NEXT_PUBLIC_CODENButter_Site_ID	Pop -U -up -Plugin	Code & Butter Site ID

Probe

Mit dem Beispielcode können Sie die grundlegende Verwendung überprüfen.

API -Server (Mockdaten)

Im Allgemeinen wird der Backend -Server häufig getrennt, aber es handelt sich um einen Beispielcode für einen einfachen Test.

SRC/Seiten/API/Sample/Dashboard.TS: Statistikanfrage
SRC/Seiten/API/Sample/Products/Index.TS: Produktliste
SRC/Seiten/API/Probe/Produkte/[ID] .TS: Produkt -Crud -API

API -Client

Dies ist ein Beispielcode, der Funktionen zum Aufrufen der API im vorderen Ende sammelt.
Code verwalten und type im Zusammenhang mit der API.

SRC/Client/Sample/Dashboard.TS: Statistische API -API
src/client/sample/product.ts: Produkt crud/type

Seite

Das Dashboard und Produkt -Crud -Beispielseite.
Details werden in Komponenten in src/components/page/[동일한 페이지 경로] unterteilt.

src/pages/index.tsx: Dashboard
SRC/Seiten/Beispiel/Produkt/Liste.tsx: Produktliste
SRC/Seiten/Probe/Produkt/new.tsx: Produktregistrierung
SRC/Seiten/Beispiel/Produkt/Bearbeiten/[ID] .TSX: Produktänderung

Komponente

Dies ist ein Beispielcode, mit dem verschiedene Bibliotheken vermischt werden.
Sie können die grundlegenden Funktionen wie Statistiken, Such-, Listen- und Eingabebeformationen überprüfen.

Src/components/page/index/kalender-sample.tsx: kalender Beispielkomponente
Src/components/page/index/statistic-sample.tsx: statistische Stichprobenkomponente
SRC/Komponenten/Seite/Probe/Produkt/Produkt.
SRC/Komponenten/Seite/Probe/Produkt/Produktliste.TSX: Produktlistenkomponente
SRC/Komponenten/Seite/Probe/Produkt/Produkt/Produkt-Suche.TSX: Produktsuchkomponente

Beispielbild

Öffentlichkeit/Beispiel: Beispielbild

Technologiestack & Funktion

Rahmen

Next.js - React.js -basierte Framework, das von Vercel erstellt wurde
Auth.js - OAuth (Google/Github) oder ID/Passwort -Bibliothek

Plattformen

Vercel - Next.js Anwendungsverteilungsdienst

Ui

Rückenwind-CSS-Utility-First CSS-Framework
Ameisendesign - UI -Bibliothek, die verschiedene Administratorkomponenten unterstützt
Lucide - SVG Icon Collection
Framer Motion - Animationsbibliothek
Reagieren Sie die Animation von Countup -Countring
NEXT/FONT -WEBFONT -Optimierungsbibliothek

Formkontrolle

Quill - Wijiwick Text Editor
Codemror -code -Editor

Codequalität

TypeScript - stark typisierte Programmiersprache, die auf JavaScript aufbaut
Schöner - Ansichtscode Formatierer
Eslint - Das plugbare Linie -Dienstprogramm für JavaScript und JSX

Verschiedenes

Pretendard-System-UI Alternative Schriftarten auf jeder Plattform erhältlich
Tag.js - Datum/Uhrzeitbibliothek
SWR -heuert für die Datenanfrage
KY -Small und elegantes HTTP -Client
Ziffernbibliothek
Codenbutter -Notice Pop -up

Projektkonfiguration

Architektur

Alle Seiten mit Ausnahme der Zertifizierung werden als statische Seite bereitgestellt. (SSR verwenden x) ~~Auch wenn die API stirbt, wird die Seite angezeigt.~~
Die Geschäftslogik wird als Backend -API bereitgestellt und das Frontend ist gut ausdrückt und geliefert.
Der Teil des Formulars verwendet aktiv die Formkomponente des Ameisendesigns.

Verzeichnis

Für das effiziente Management wird die Verzeichnisstruktur wie folgt definiert.

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

SRC/Client

Verwenden Sie Funktionen, die im Client -Verzeichnis definiert sind, ohne das Fetch direkt von jeder Komponente aufzurufen
Die Suriten verwenden SWR und post oder put verwendet ky .

SRC/Komponenten/Layout

Layout -Definition

SRC/Komponenten/Seite

Definition von Komponenten, die nur auf bestimmten Seiten verwendet werden
Die in pages/profile verwendeten Komponenten sind in components/page/profile definiert
Der Komponentenstil ist als Modul.css im selben Ordner geschrieben

Src/components/freigegeben