purple admin ui

ผู้ดูแลระบบสีม่วง UI

แม่แบบผู้ดูแลระบบ Mo-Dunn โดยใช้ next.js และ tailwind

การแนะนำ

next.js + tailwind + การออกแบบมด -เทมเพลตผู้ดูแลระบบที่ทำโดยการรวบรวมห้องสมุดยอดนิยมเพื่อให้ทุกคนสามารถพัฒนาหน้า Back Office ได้อย่างง่ายดายและรวดเร็ว การพัฒนาผู้ดูแลระบบใช้เวลาเพียง 10 ปี ...

คำเตือน นี่คืองานในโปรแกรม หากคุณมีคำอธิบายที่จำเป็นหรือคุณสมบัติ/ข้อบกพร่องโปรดลงทะเบียนในปัญหา เราจะอัปเดตหลังการตรวจสอบ

แนะนำสำหรับคนเหล่านี้?

1. Back -end Programmer ที่ใส่ใจในการออกแบบเพื่อสร้างหน้าผู้ดูแลระบบ
2. หากคุณต้องการเทมเพลตที่ผูกไลบรารีที่ใช้บ่อยตาม next.js/react
3. ของ

การสาธิต

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

เข้าสู่ระบบด้วย OAUTH (Google/GitHub) หรือ ID/รหัสผ่าน (Admin/Admin)

การสร้างโครงการ

คุณสามารถคลิกปุ่ม Deploy เพื่อทำซ้ำแหล่งที่มาและปรับใช้กับ Vercel

คุณสามารถเริ่มโครงการได้โดยดาวน์โหลดแหล่งที่มาหรือป้อนคำสั่งต่อไปนี้:

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

ค่าเริ่มต้น

คัดลอกไฟล์ .env.example เพื่อสร้างไฟล์. .env

cp .env.example .env

สำคัญ	คำอธิบาย	ตัวอย่าง
nextauth_url	URL บริการ	http: // localhost: 3000
nextauth_secret	รหัสลับแบบสุ่ม	การออกความคิดสร้างสรรค์แบบสุ่ม
github_client_id	รหัสไคลเอนต์ GitHub Oauth
github_client_secret	GitHub Oauth Client Secret
google_client_id	รหัสไคลเอนต์ Google Oauth
google_client_secret	Google Oauth Client Secret
next_public_api_endpoint	จุดสิ้นสุดเซิร์ฟเวอร์ API	http: // localhost: 3000
next_public_codenbutter_site_id	ปลั๊กอินป๊อปอัพ	รหัสรหัสและเนย

ตัวอย่าง

รหัสตัวอย่างช่วยให้คุณสามารถตรวจสอบการใช้งานพื้นฐาน

API Server (ข้อมูลจำลอง)

โดยทั่วไปเซิร์ฟเวอร์แบ็กเอนด์มักจะถูกแยกออก แต่เป็นรหัสตัวอย่างสำหรับการทดสอบอย่างง่าย

• SRC/PAGES/API/SAMPE/DASHBOARD.TS: การสอบถามสถิติ
• src/pages/api/ตัวอย่าง/ผลิตภัณฑ์/index.ts: รายการผลิตภัณฑ์
• src/pages/api/ตัวอย่าง/ผลิตภัณฑ์/[id] .ts: ผลิตภัณฑ์ crud api

ไคลเอนต์ API

นี่คือรหัสตัวอย่างที่รวบรวมฟังก์ชั่นสำหรับการเรียก API ในส่วนหน้า
จัดการรหัสและพิมพ์ที่เกี่ยวข้องกับ API

• SRC/ไคลเอนต์/ตัวอย่าง/แดชบอร์ด: การสอบถามทางสถิติ API
• SRC/ไคลเอนต์/ตัวอย่าง/ผลิตภัณฑ์: ผลิตภัณฑ์ crud/ประเภท

หน้าหนังสือ

หน้าตัวอย่างแดชบอร์ดและผลิตภัณฑ์
รายละเอียดแบ่งออกเป็นส่วนประกอบเป็น src/components/page/[동일한 페이지 경로]

• src/pages/index.tsx: แดชบอร์ด
• src/pages/sample/product/list.tsx: รายการผลิตภัณฑ์
• src/pages/sample/product/new.tsx: การลงทะเบียนผลิตภัณฑ์
• src/pages/sample/product/edit/[id] .tsx: การปรับเปลี่ยนผลิตภัณฑ์

ส่วนประกอบ

นี่คือรหัสตัวอย่างที่ทำให้ไลบรารีต่างๆผสมผสาน
คุณสามารถตรวจสอบฟังก์ชั่นพื้นฐานเช่นสถิติการค้นหารายการและแบบฟอร์มอินพุต

• SRC/ส่วนประกอบ/หน้า/ดัชนี/ปฏิทินตัวอย่าง. TTSX: ส่วนประกอบตัวอย่างปฏิทิน
• SRC/ส่วนประกอบ/หน้า/ดัชนี/สถิติตัวอย่าง. TTSX: องค์ประกอบตัวอย่างสถิติ
• src/ส่วนประกอบ/หน้า/ตัวอย่าง/ผลิตภัณฑ์/product.tsx: แบบฟอร์มการป้อนข้อมูลผลิตภัณฑ์ (การสร้าง/การปรับเปลี่ยนการใช้งานทั่วไป) ส่วนประกอบ
• src/ส่วนประกอบ/หน้า/ตัวอย่าง/ผลิตภัณฑ์/ผลิตภัณฑ์-list.tsx: รายการรายการผลิตภัณฑ์
• src/ส่วนประกอบ/หน้า/ตัวอย่าง/ผลิตภัณฑ์/ผลิตภัณฑ์/ผลิตภัณฑ์-search.tsx: ส่วนประกอบการค้นหาผลิตภัณฑ์

ภาพตัวอย่าง

• สาธารณะ/ตัวอย่าง: ภาพตัวอย่าง

สแต็คและฟังก์ชั่นเทคโนโลยี

กรอบ

• next.js - react.js - เฟรมเวิร์กที่สร้างขึ้นโดย vercel
• Auth.js - OAuth (Google/GitHub) หรือ ID/รหัสผ่านไลบรารี

แพลตฟอร์ม

• Vercel - Next.js Application Distribution Service

UI

• Tailwind CSS-Utility-First Framework Framework
• การออกแบบมด - ห้องสมุด UI ที่รองรับส่วนประกอบผู้ดูแลระบบต่างๆ
• Lucide - คอลเลกชันไอคอน SVG
• Framer Motion - ไลบรารีแอนิเมชั่น
• ตอบโต้การนับ -การนับภาพเคลื่อนไหว
• NEXT/FONT -WEBFONT OPTIONIZATION LIBRARY

การควบคุมแบบฟอร์ม

• Quill - Editor Text Wijiwick
• codemror -code editor

คุณภาพรหัส

• TypeScript - ภาษาการเขียนโปรแกรมพิมพ์อย่างมากที่สร้างบน JavaScript
• Prettier - Formatter รหัสที่แสดงความคิดเห็น
• ESLINT - ยูทิลิตี้ผ้าสำลีที่เสียบได้สำหรับ JavaScript และ JSX

เบ็ดเตล็ด

• Pretendard-System-UI แบบอักษรทางเลือกที่มีอยู่ในแพลตฟอร์มใด ๆ
• day.js - ห้องสมุดวันที่/เวลา
• swr -hooks สำหรับการสอบถามข้อมูล
• ไคลเอนต์ KY -Small และ Elegant HTTP
• ห้องสมุดรูปแบบตัวเลขตัวเลข
• CodenButter -Notice Pop -Up

การกำหนดค่าโครงการ

สถาปัตยกรรม

• หน้าทั้งหมดยกเว้นการรับรองมีให้เป็นหน้าคงที่ (SSR ใช้ x) แม้ว่า API จะตาย แต่หน้าเว็บจะปรากฏขึ้น
• ตรรกะทางธุรกิจมีให้เป็นแบ็กเอนด์ API และส่วนหน้าจะแสดงออกมาอย่างดีและส่งมอบ
• ส่วนที่เกี่ยวข้องกับแบบฟอร์มใช้องค์ประกอบฟอร์มของการออกแบบมดอย่างแข็งขัน

ไดเรกทอรี

สำหรับการจัดการที่มีประสิทธิภาพโครงสร้างไดเรกทอรีจะถูกกำหนดดังนี้

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

SRC/ไคลเอนต์

• ใช้ฟังก์ชั่นที่กำหนดไว้ในไดเรกทอรีไคลเอนต์โดยไม่ต้องโทรมาโดยตรงจากแต่ละองค์ประกอบ
• Surits ใช้ SWR และโพสต์หรือใส่ใช้ ky

src/ส่วนประกอบ/เลย์เอาต์

• คำจำกัดความเค้าโครง

src/ส่วนประกอบ/หน้า

• คำจำกัดความของส่วนประกอบที่ใช้ในบางหน้าเท่านั้น
• ส่วนประกอบที่ใช้ใน pages/profile ถูกกำหนดไว้ใน components/page/profile
• รูปแบบของส่วนประกอบถูกเขียนเป็น module.css ในโฟลเดอร์เดียวกัน

src/ส่วนประกอบ/แบ่งปัน

• คำจำกัดความของส่วนประกอบที่ใช้กันทั่วไป

Src/Fonts

• บันทึกแบบอักษรเว็บ

lib/auth

• คำจำกัดความรหัสที่เกี่ยวข้องกับการรับรอง

lib/hooks

• คำจำกัดความของตะขอที่กำหนดเอง

ส่วนประกอบที่กำหนดเอง

defaultTable

defaultmodal

แบบฟอร์มการค้นหา

รูปแบบ

รูปแบบ

FieldInline

ภาพหน้าจอ

ขีด จำกัด

• คือไม่ใช่การสนับสนุน

ผู้เขียน

• Subicura (@subicura)