purple admin ui

UI Admin Ungu

Template Admin Mo-Dunn Menggunakan Next.js dan Tailwind

perkenalan

Next.js + Tailwind + Ant Design -Template Admin Berbasis Buatan dengan mengumpulkan perpustakaan populer sehingga siapa pun dapat mengembangkan halaman back office dengan mudah dan cepat. Pengembangan admin hanya 10 tahun ...

PERINGATAN Ini adalah pekerjaan dalam program. Jika Anda memiliki deskripsi atau fitur/bug yang diperlukan, silakan mendaftar dalam masalah ini. Kami akan memperbarui setelah ulasan.

Direkomendasikan untuk orang -orang ini?

1. Kembali Programmer yang repot -repot merancang untuk membuat halaman admin
2. Jika Anda memerlukan templat yang mengikat perpustakaan yang sering digunakan berdasarkan Next.js/React
3. Dari

demo

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

Masuk dengan OAuth (Google/GitHub) atau ID/Kata Sandi (admin/admin).

Pembuatan proyek

Anda dapat mengklik tombol Deploy untuk menduplikasi sumber dan menggunakannya ke Vercel.

Anda dapat memulai proyek dengan mengunduh sumber atau memasukkan perintah berikut:

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

Bawaan

Salin file .env.example untuk membuat file .env .

cp .env.example .env

kunci	penjelasan	contoh
NextAuth_Url	URL layanan	http: // localhost: 3000
NextAuth_Secret	Kunci rahasia acak	Penerbitan kreatif acak
Github_client_id	ID Klien Github OAuth
Github_client_secret	Rahasia klien GitHub OAuth
Google_client_id	ID klien Google OAuth
Google_client_secret	Google oauth rahasia klien
Next_public_api_endpoint	Titik akhir server API	http: // localhost: 3000
Next_public_codenbutter_site_id	Plugin Pop -Up	Kode & ID Situs Mentega

Mencicipi

Kode sampel memungkinkan Anda untuk memeriksa penggunaan dasar.

Server API (data tiruan)

Secara umum, server backend sering dipisahkan, tetapi ini adalah kode sampel untuk tes sederhana.

• SRC/halaman/API/sampel/dasbor.ts: Penyelidikan Statistik
• SRC/Halaman/API/Sampel/Produk/Indeks.TS: Daftar Produk
• SRC/Halaman/API/Sampel/Produk/[ID] .TS: Produk CRUD API

Klien API

Ini adalah kode sampel yang mengumpulkan fungsi untuk memanggil API di ujung depan.
Kelola kode dan jenis yang terkait dengan API.

• SRC/Klien/Sampel/Dashboard.ts: Statistik Penyelidikan API
• SRC/Klien/Sampel/Produk.TS: Produk CRUD/TYPE

halaman

Halaman sampel dasbor dan produk crud.
Detail dibagi menjadi komponen menjadi src/components/page/[동일한 페이지 경로] .

• src/halaman/index.tsx: dasbor
• SRC/Halaman/Sampel/Produk/Daftar.TSX: Daftar Produk
• SRC/halaman/sampel/produk/new.tsx: pendaftaran produk
• SRC/halaman/sampel/produk/edit/[id] .tsx: modifikasi produk

Komponen

Ini adalah kode sampel yang membuat berbagai perpustakaan mencampur.
Anda dapat memeriksa fungsi dasar seperti statistik, pencarian, daftar, dan formulir input.

• SRC/KOMPONEN/HALAMAN/INDEX/CALENENDAR-SAMPLY.TSX: KOSEN CALENDER KOMPONEN
• Src/komponen/halaman/indeks/statistik-sampel.tsx: komponen sampel statistik
• src/komponen/halaman/sampel/produk/produk.
• SRC/Komponen/Halaman/Sampel/Produk/Produk-List.tsx: Komponen Daftar Produk
• Src/komponen/halaman/sampel/produk/produk/produk-pencarian.tsx: komponen pencarian produk

Contoh gambar

• Publik/Sampel: Contoh gambar

Tumpukan & Fungsi Teknologi

Kerangka

• Next.js - React.js -Based Framework Dibuat oleh Vercel
• AUTH.JS - OAuth (Google/GitHub) atau ID/Kata Sandi Perpustakaan

Platform

• Vercel - Layanan Distribusi Aplikasi Next.js

Ui

• Kerangka kerja CSS CSS-Utilitas-First Tailwind
• Desain Ant - Perpustakaan UI yang mendukung berbagai komponen administrator
• Lucide - Koleksi Ikon SVG
• Framer Motion - Perpustakaan Animasi
• React countup -suntuhan animasi
• Perpustakaan Optimalisasi Next/Font -WebFont

Kontrol bentuk

• Quill - Editor Teks Wijiwick
• Codemror -Code Editor

Kualitas Kode

• TypeScript - Bahasa pemrograman yang sangat diketik yang dibangun di atas javascript
• Prettier - Formatter Kode Dipelajari
• ESLINT - Utilitas serat yang plugable untuk JavaScript dan JSX

Aneka ragam

• Font Alternatif Pretendard-System-UI tersedia di platform apa pun
• Day.js - Perpustakaan Tanggal/Waktu
• Swr -hooks untuk penyelidikan data
• KY -Mall HTTP Client KY dan Elegan
• Perpustakaan Formeting Numeral -Number
• Codenbutter -Notice pop -up

Konfigurasi Proyek

Arsitektur

• Semua halaman kecuali sertifikasi disediakan sebagai halaman statis. (SSR Gunakan x) Bahkan jika API mati, halaman muncul.
• Logika bisnis disediakan sebagai API backend dan ujung depan diekspresikan dengan baik dan dikirim.
• Bagian yang terkait dengan formulir secara aktif menggunakan komponen bentuk desain semut.

Direktori

Untuk manajemen yang efisien, struktur direktori didefinisikan sebagai berikut.

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

SRC/Klien

• Gunakan fungsi yang didefinisikan dalam direktori klien tanpa memanggil Fetch langsung dari setiap komponen
• Surit menggunakan SWR dan POST atau PUN menggunakan ky .

SRC/Komponen/Tata Letak

• Definisi tata letak

SRC/Komponen/Halaman

• Definisi komponen hanya digunakan pada halaman tertentu
• Komponen yang digunakan dalam pages/profile didefinisikan dalam components/page/profile
• Gaya komponen ditulis sebagai modul.css di folder yang sama

SRC/KOMPONEN/BERBAGI

• Definisi komponen yang biasa digunakan

SRC/Font

• Simpan font web

lib/auth

• Definisi Kode Terkait Sertifikasi

lib/kait

• Definisi Kait Kustom

Komponen khusus

DefaultTable

DefaultModal

Formsearch

Formsection

Formgroup

FieldInline

Tangkapan layar

batas

• Yaitu tidak mendukung

Pengarang

• Subicura (@subicura)