purple admin ui

الأرجواني المشرف واجهة المستخدم

قالب مسؤول Mo-Dunn باستخدام Next.js و tailwind

مقدمة

next.js + tailwind + قالب المسؤول المستند إلى تصميم النمل عن طريق جمع المكتبات الشهيرة حتى يتمكن أي شخص من تطوير صفحة المكتب الخلفي بسهولة وبسرعة. لقد كان تطوير المشرف 10 سنوات فقط ...

تحذير هذا هو العمل في البرنامج. إذا كان لديك الأوصاف أو الميزات/الأخطاء اللازمة ، فيرجى التسجيل في المشكلة. سنقوم بالتحديث بعد المراجعة.

موصى به لهؤلاء الناس؟

1. المبرمج الخلفي الذي يكلف نفسه عناء التصميم لإنشاء صفحة مسؤول
2. إذا كنت بحاجة إلى قالب يربط مكتبة يتم استخدامها بشكل متكرر على أساس Next.js/React
3. ل

العرض التوضيحي

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

قم بتسجيل الدخول مع OAUTH (Google/Github) أو المعرف/كلمة المرور (المسؤول/المسؤول).

إنشاء مشاريع

يمكنك النقر فوق زر 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
google_client_id	معرف عميل Google Oauth
google_client_secret	سر عميل Google Oauth
next_public_api_endpoint	نقطة نهاية خادم API	http: // localhost: 3000
next_public_codenbutter_site_id	Pop -up Plugin	كود وزبدة معرف موقع

عينة

يتيح لك رمز العينة التحقق من الاستخدام الأساسي.

خادم API (بيانات وهمية)

بشكل عام ، غالبًا ما يتم فصل خادم الواجهة الخلفية ، لكنه رمز عينة لاختبار بسيط.

• SRC/PAGES/API/sample/dashboard.ts: استفسار الإحصائيات
• SRC/PAGES/API/SAMPLE/PRODES/INDEX.TS: قائمة المنتج
• SRC/PAGES/API/SAMPLE/PRODES

عميل API

هذا هو رمز عينة يجمع وظائف لاستدعاء واجهة برمجة التطبيقات في الواجهة الأمامية.
إدارة الكود والنوع المتعلقة بآبار واجهة برمجة التطبيقات.

• SRC/عميل/عينة/لوحة القيادة
• SRC/عميل/عينة/منتج

صفحة

لوحة القيادة والمنتج عينة crud.
يتم تقسيم التفاصيل إلى مكونات إلى src/components/page/[동일한 페이지 경로] .

• src/pages/index.tsx: لوحة القيادة
• src/pages/sample/product.tsx: قائمة المنتج
• src/pages/sample/product/new.tsx: تسجيل المنتج
• SRC/PAGES/عينة/منتج/تحرير/[ID] .TSX: تعديل المنتج

عنصر

هذا هو رمز عينة يجعل مختلف المكتبات مزيج.
يمكنك التحقق من الوظائف الأساسية مثل الإحصائيات والبحث والقائمة ونموذج الإدخال.

• SRC/المكونات/الصفحة/الفهرس/العينة
• SRC/المكونات/الصفحة/الفهرس/العينة الإحصائية
• SRC/مكونات/صفحة/عينة/منتج/منتج.
• SRC/مكونات/صفحة/عينة/منتج/منتج. TTSX: مكون قائمة المنتج
• SRC/مكونات/صفحة/عينة/منتج/منتج/منتج

عينة الصورة

• عام/عينة: نموذج صورة

مكدس التكنولوجيا والوظيفة

نطاق

• Next.js - React.js - إطار عمل تم إنشاؤه بواسطة Vercel
• Auth.js - Oauth (Google/Github) أو مكتبة المعرف/كلمة المرور

المنصات

• Vercel - Next.js خدمة توزيع التطبيقات

واجهة المستخدم

• Tailwind CSS-Utility-First First CSS Framework
• تصميم النمل - مكتبة واجهة المستخدم التي تدعم مكونات المسؤول المختلفة
• مجموعة أيقونة SVG - SVG
• Framer Motion - مكتبة الرسوم المتحركة
• رد الفعل على الرسوم المتحركة countup
• NEXT/FONT -WEBFONT OPTIMINESIONDAINGEDISTION

النموذج السيطرة

• Quill - محرر نص Wijiwick
• CodeMror -Code Editor

جودة الكود

• TypeScript - لغة البرمجة المكتوبة بقوة والتي تبني على JavaScript
• أجمل - تنسيق الكود المصاحب
• ESLINT - الأداة المساعدة للبطانة القابلة للربح لجافا سكريبت و JSX

متنوع

• تتوفر خطوط بديلة لـ Prinentard-System-UI على أي منصة
• Day.js - مكتبة التاريخ/الوقت
• swr -hooks لاستفسار البيانات
• KY -SMALL وعميل HTTP الأنيق
• مكتبة تكوين العدد العدد
• codenbutter -NOTICE POP -UP

تكوين المشروع

بنيان

• يتم توفير جميع الصفحات باستثناء الشهادة كصفحة ثابتة. (SSR استخدام X) حتى لو مات واجهة برمجة التطبيقات ، تظهر الصفحة.
• يتم توفير منطق العمل كأبي واجهة برمجة تطبيقات الخلفية ويتم التعبير عن الواجهة الأمامية بشكل جيد وتسليمها.
• يستخدم الجزء المتعلق بالنموذج بنشاط مكون النموذج لتصميم ANT.

دليل

للإدارة الفعالة ، يتم تعريف هيكل الدليل على النحو التالي.

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

SRC/العميل

• استخدم الوظائف المحددة في دليل العميل دون استدعاء الجلب مباشرة من كل مكون
• اللغات استخدام SWR و Post أو وضع يستخدم ky .

SRC/المكونات/التصميم

• تعريف التصميم

SRC/المكونات/الصفحة

• تعريف المكونات المستخدمة فقط على صفحات معينة
• يتم تعريف المكونات المستخدمة في pages/profile في components/page/profile
• يتم كتابة نمط المكون كوحدة. CSS في نفس المجلد

SRC/مكونات/مشتركة

• تعريف المكونات بشكل شائع الاستخدام

SRC/الخطوط

• حفظ خطوط الويب

lib/auth

• الشهادة -تعريف الكود المرتبط

ليب/السنانير

• تعريف الخطاف المخصص

مكون مخصص

الافتراضي

DefaultModal

Formesearch

النماذج

FormGroup

FieldInline

لقطة شاشة

حدود

• أي عدم الدعم

مؤلف

• Subicura (subicura)