flowbite astro admin dashboard
1.0.0
โปรเจ็กต์นี้เป็นเทมเพลตแดชบอร์ดผู้ดูแลระบบ UI แบบโอเพ่นซอร์สฟรีที่สร้างด้วยส่วนประกอบจาก Flowbite และอิงตามเฟรมเวิร์ก Tailwind CSS ที่เน้นยูทิลิตี้เป็นหลักซึ่งมีแผนภูมิ ตาราง วิดเจ็ต เค้าโครง CRUD โมดอล ลิ้นชัก และอื่นๆ
แดชบอร์ดผู้ดูแลระบบนี้สามารถช่วยให้คุณเริ่มต้นสร้างแอปพลิเคชันสำหรับโปรเจ็กต์ของคุณได้อย่างรวดเร็วโดยใช้เทคโนโลยีการพัฒนา UI/UX ใหม่ล่าสุดในพื้นที่โอเพ่นซอร์ส รวมถึง Tailwind CSS และ Flowbite
| แดชบอร์ด | เค้าโครงแบบซ้อนกัน | ผลิตภัณฑ์ (CRUD) |
|---|---|---|
| ผู้ใช้ (CRUD) | การตั้งค่า | หน้าราคา |
|---|---|---|
| หน้าเข้าสู่ระบบ | หน้าลงทะเบียน | รีเซ็ตรหัสผ่าน |
|---|---|---|
| ลืมรหัสผ่าน | ล็อคโปรไฟล์ | หน้าการบำรุงรักษา |
|---|---|---|
| ไม่พบ 404 | ข้อผิดพลาดเซิร์ฟเวอร์ 500 | สนามเด็กเล่น |
|---|---|---|
ส่วนประกอบเชิงโต้ตอบ เช่น แถบนำทาง โมดอล ลิ้นชัก และคำแนะนำเครื่องมือ ล้วนอิงตามไลบรารีคอมโพเนนต์โอเพ่นซอร์สยอดนิยมที่เรียกว่า Flowbite ซึ่งช่วยให้เราใช้องค์ประกอบเหล่านี้โดยการสร้างชุดเพจและวิดเจ็ตที่ซับซ้อนมากขึ้นภายในแดชบอร์ดผู้ดูแลระบบที่ครบครัน แม่แบบ
หน้า วิดเจ็ต และส่วนประกอบทั้งหมดอิงตามคลาสยูทิลิตี้อันดับแรกจาก Tailwind CSS เท่านั้น และเข้ากันได้กับเทคโนโลยีเวอร์ชัน v3.x ล่าสุดโดยการล้างคลาสทั้งหมดโดยอัตโนมัติตามเส้นทางเทมเพลต
เริ่มต้นด้วยหน้าตัวอย่างขั้นสูง 15 หน้า รวมถึงสองเค้าโครงที่แตกต่างกันของหน้าแรกของแดชบอร์ดที่เต็มไปด้วยวิดเจ็ตแผนภูมิ ตาราง เครื่องมือเลือกวันที่ และสถิติ และยังมีหน้าเค้าโครง CRUD สองหน้าสำหรับผลิตภัณฑ์ ผู้ใช้ หน้าการตั้งค่า หน้าการตรวจสอบสิทธิ์สำหรับการเข้าสู่ระบบและการลงทะเบียน และแม้แต่ หน้าข้อผิดพลาด 404 และ 500 ที่กำหนดเอง
แดชบอร์ดผู้ดูแลระบบนี้มีส่วนประกอบขั้นสูงมากมายทั้งจาก Flowbite แต่ยังมาจากไลบรารีบุคคลที่สามอื่นๆ เช่น ApexCharts ซึ่งได้รับการปรับแต่งเป็นพิเศษด้วยคลาส Tailwind CSS และออกแบบโดยใช้ Flowbite Design System
หากคุณต้องการใช้โปรเจ็กต์นี้ เราขอแนะนำให้ศึกษาไลบรารีส่วนประกอบที่เราใช้ในการสร้างแดชบอร์ดนี้ด้วย เนื่องจากคุณสามารถใช้ส่วนประกอบเพิ่มเติมจากไลบรารีนั้นเพื่อปรับปรุงตัวอย่างที่เราเขียนโค้ดไว้ที่นี่แล้ว
ผลิตภัณฑ์นี้สร้างขึ้นโดยใช้เทคโนโลยีที่ใช้กันอย่างแพร่หลายดังต่อไปนี้:
package.json : pnpm install
# or
npm install
# or
yarnPNPM เป็นตัวจัดการแพ็คเกจที่เป็นตัวเลือกสำหรับภาพประกอบ แต่คุณสามารถใช้สิ่งที่คุณต้องการได้
localhost:2121 โดยรันคำสั่งต่อไปนี้: pnpm run dev คุณยังสามารถสร้างโปรเจ็กต์และรับไฟล์การแจกจ่ายภายใน dist/ โฟลเดอร์ได้โดยการรัน:
pnpm run buildจากนั้น คุณสามารถดูตัวอย่างบิลด์ที่สร้างขึ้นด้วยเว็บเซิร์ฟเวอร์ภายในเครื่องได้:
pnpm run previewสำหรับการปรับใช้ โปรดดูเวิร์กโฟลว์ GitHub ซึ่งคุณสามารถเสียบเป้าหมายของคุณ (กำหนดค่าไว้ล่วงหน้าสำหรับเพจ GitHub) ดูdocs.astro.build/en/guides/deploy
เว็บไซต์ได้รับการกำหนดค่าสำหรับการปรับใช้แบบคงที่ แต่คุณสามารถพลิกเป็นการ เรนเดอร์ฝั่งเซิร์ฟเวอร์ ได้โดยเพียงแค่ไม่ใส่เครื่องหมายข้อคิดเห็น output: "server" ใน . ./astro.config.mjs
หลังจากโคลนพื้นที่เก็บข้อมูลนี้แล้ว คุณจะพบโครงสร้าง (แบบง่าย) ต่อไปนี้:
?
├── ? data
│ └── ** / * .json # Satic data sources for REST etc.
│
└── src
│
├── ? app
│ └── ** / * .astro # Application-wide components
│
├── ? assets
│ └── ** / * .{svg,…} # Transformable assets
│
├── ? components
│ └── ** / * .astro # Simple, atomic UI elements
│
├── lib
│ └── ** / * .ts # Utilities (Databases, APIs…)
│
├── ? modules
│ └── ** / * .astro # Complex views made of elements
│
├── ? pages
│ ├── ** / * .astro # File-based client routes
│ │
│ └── api
│ └── [...entities].ts # Catch-all endpoint for CRUD ops.
│
├── services
│ └── * .ts # Server-side CRUD operations
│
└── ? types
└── * .ts # Data entities typings
มีความพยายามใน การเตรียมความพร้อม อย่างรวดเร็วและ ประสบการณ์ของนักพัฒนา
โปรเจ็กต์นี้มาพร้อมกับการรองรับ TypeScript, Astro, Tailwind และ VS Code อย่างกว้างขวาง
มันถูกกำหนดค่าด้วยค่าเริ่มต้นที่สมเหตุสมผล ความคิดเห็นเล็กน้อย และเทคนิคบางอย่างเพื่อให้เล่นร่วมกันได้ดี
astro-eslint-parser + eslint-plugin-astroprettier-plugin-astro (มาพร้อมกับ astro )อย่าลังเลที่จะแฮ็กการตั้งค่าเหล่านั้นเพื่อตอบสนองความต้องการของคุณเอง
ในปัจจุบัน เรามีเป้าหมายอย่างเป็นทางการที่จะสนับสนุนเบราว์เซอร์สองเวอร์ชันล่าสุดต่อไปนี้:
ดูตัวอย่างสด: https://themesberg.github.io/flowbite-astro-admin-dashboard/
เอกสาร Flowbite: https://flowbite.com/docs/getting-started/introduction/
เอกสารประกอบ Tailwind CSS: https://tailwindcss.com/
ข้อตกลงใบอนุญาต: https://flowbite.com/docs/getting-started/license/
ปัญหา: หน้าปัญหา Github
รายชื่อเทคโนโลยีและคำแนะนำที่เข้ากันได้สำหรับ Flowbite และ Tailwind CSS มีดังนี้
ชุมชนโอเพ่นซอร์สที่ยอดเยี่ยมยังสร้างและดูแลรักษาไลบรารีแบบสแตนด์อโลนต่อไปนี้สำหรับ React, Vue, Svelte และ Angular:
นอกจากนี้เรายังเขียนคำแนะนำในการบูรณาการสำหรับเฟรมเวิร์กและไลบรารีส่วนหน้าต่อไปนี้:
Flowbite มีการผสานรวมที่ยอดเยี่ยมกับเฟรมเวิร์กแบ็คเอนด์ส่วนใหญ่เนื่องจากต้องใช้ vanilla JavaScript:
เราใช้ GitHub Issues เป็นตัวติดตามข้อบกพร่องอย่างเป็นทางการสำหรับ Flowbite Admin Dashboard คำแนะนำสำหรับผู้ใช้ของเราที่ต้องการรายงานปัญหามีดังนี้
หากคุณมีคำถามหรือต้องการความช่วยเหลือในการบูรณาการผลิตภัณฑ์ โปรดติดต่อเราแทนการเปิดปัญหา
