ดาวน์โหลด mantine analytics dashboard - mantine analytics dashboard Source Download Download

mantine analytics dashboard

โค้ดแหล่งที่มา AI

UI updates and bug fixes

ดาวน์โหลด

การประกาศ

เพิ่มหน้าตัวจัดการไฟล์ ui
อัปเดตเวอร์ชัน Mantine เป็น 7.14.3 ล่าสุด
ตัวแปรโหมดมืดใหม่
ตัวแปรแถบด้านข้างใหม่ตอนนี้เรามีโหมดเต็มรูปแบบมินิและเต็มรูปแบบ

ดูตัวอย่างสด
ตัวอย่างส่วนประกอบ
ปานกลาง
แผนงานผลิตภัณฑ์ * ใหม่ *

เกี่ยวกับ

เทมเพลตผู้ดูแลระบบและแดชบอร์ดมืออาชีพที่สร้างขึ้นโดยใช้ Mantine 7 ที่มาพร้อมกับส่วนประกอบ UI หลายร้อยรูปแบบตารางแผนภูมิหน้าและไอคอน เทมเพลตนี้ถูกสร้างขึ้นโดยใช้ V14 ถัดไป, React, Apex Charts, Mantine DataTable และ Storybook

ภาพตัวอย่าง

รุ่นก่อนหน้า

รุ่นก่อนหน้าของเทมเพลตแดชบอร์ดรองรับ 13 หน้าพร้อมเราเตอร์หน้าและ Mantine 6 เพื่อดูการสาธิตสดให้ใช้ลิงก์นี้ - ดูตัวอย่างและเพื่อชำระเงินส้อม repo ให้ใช้ลิงค์นี้ - เวอร์ชัน 1

คุณสมบัติ

ปรับแต่งได้: คุณไม่จำเป็นต้องเป็นผู้เชี่ยวชาญในการปรับแต่งเทมเพลต รหัสของเราอ่านได้และมีเอกสารที่ดีมาก
ตอบสนองอย่างเต็มที่: ด้วยการรองรับมือถือแท็บเล็ตและเดสก์ท็อปไม่สำคัญว่าคุณจะใช้อุปกรณ์ใด แดชบอร์ด ANTD ตอบสนองได้ในเบราว์เซอร์ทั้งหมด
Cross-Browser: ธีมของเราทำงานได้อย่างสมบูรณ์แบบกับ Chrome, Firefox, Opera และ Edge เรากำลังทำงานอย่างหนักเพื่อสนับสนุนพวกเขา
Clean Code: เราปฏิบัติตามแนวทางของ Ant Design อย่างเคร่งครัดเพื่อให้การรวมของคุณง่ายที่สุดเท่าที่จะทำได้ รหัสทั้งหมดถูกเขียนด้วยลายมือ
การอัปเดตปกติ: เป็นครั้งคราวคุณจะได้รับการอัปเดตที่มีส่วนประกอบใหม่การปรับปรุงและการแก้ไขข้อบกพร่อง

ซ้อนเทค

เพื่อให้เทมเพลตนี้ยอดเยี่ยมฉันใช้แพ็คเกจต่อไปนี้:

แกนกลาง

Next JS V14: Next.js เป็นกรอบการพัฒนาเว็บโอเพนซอร์ซที่สร้างขึ้นโดย บริษัท เอกชน Vercel ให้บริการเว็บแอปพลิเคชันที่อิงกับการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการสร้างเว็บไซต์แบบคงที่
Mantine V7: Mantine เป็นไลบรารีส่วนประกอบ UI React มันถูกสร้างขึ้นด้านบนของ React และ TypeScript และมีส่วนประกอบและตะขอที่หลากหลายสำหรับการสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพสูง
React V18: React เป็นไลบรารี JavaScript Front-Source Front-Source สำหรับการสร้างส่วนต่อประสานผู้ใช้ตามส่วนประกอบ
TypeScript V5: TypeScript เป็นภาษาการเขียนโปรแกรมระดับสูงฟรีและโอเพ่นซอร์สที่พัฒนาโดย Microsoft ซึ่งเพิ่มการพิมพ์แบบคงที่ด้วยคำอธิบายประกอบประเภทเสริมให้กับ JavaScript
Storybook V7: Storybook เป็นเครื่องมือโอเพนซอร์ซฟรีสำหรับการพัฒนาส่วนประกอบ UI ที่แยกออกจากกัน มันถูกใช้โดยนักพัฒนาเว็บเพื่อปรับปรุงเวิร์กโฟลว์การพัฒนา UI และสร้างเว็บแอปพลิเคชันที่ดีขึ้น
การเปลี่ยนแปลง CLI V2: การเปลี่ยนแปลงเป็นแพ็คเกจที่ช่วยในการจัดการเวอร์ชันและการเปลี่ยนแปลงของฉัน
Nextauth v4: nextauth.js เป็นไลบรารีการตรวจสอบความถูกต้องที่ยืดหยุ่นและปลอดภัยซึ่งสามารถใช้สำหรับการตรวจสอบฝั่งไคลเอ็นต์ใน Next.js.
TABLER ICONS V2: ไอคอน TABLER เป็นไอคอนไอคอนโอเพนซอร์ซฟรีที่มีไอคอนมากกว่า 4,700 ไอคอน ไอคอนได้รับการออกแบบด้วยความงามที่ทันสมัยและเหมาะสำหรับการใช้งานที่หลากหลาย
Mantine DataTable V7: Mantine DataTable เป็นองค์ประกอบปฏิกิริยาที่สามารถใช้ในการสร้างอินเทอร์เฟซผู้ใช้ที่อุดมไปด้วยข้อมูล มันเป็นองค์ประกอบของตารางที่ตระหนักถึงธีมมืดและออกแบบมาสำหรับ Mantine UI
Lodash V4: ห้องสมุดยูทิลิตี้ JavaScript ที่ให้ความสอดคล้อง, โมดูล, ประสิทธิภาพ, และความพิเศษ
Apex Chart V3: S ApexCharts เป็นไลบรารีแผนภูมิ JavaScript โอเพนซอร์ซฟรีที่ช่วยให้นักพัฒนาสามารถสร้างการสร้างภาพข้อมูลแบบโต้ตอบสำหรับหน้าเว็บ มันสามารถใช้สำหรับทั้งโครงการเชิงพาณิชย์และไม่ใช่เชิงพาณิชย์
Dayjs v1: day.js เป็นห้องสมุด JavaScript ที่จัดการวันที่และเวลา
TIPTAP V2: ตัวแก้ไขข้อความที่ไม่เชื่อฟังและมีการขยายกรอบและขยายได้ตาม Prosemirror
FullCalendar V6 : FullCalendar เป็นปฏิทินเหตุการณ์ JavaScript ที่มีการตั้งค่ามากกว่า 300 รายการ เป็นโอเพ่นซอร์สและมีแกนกลางฟรี
DND-KIT V6: DND-KIT เป็นชุดเครื่องมือลากและวางที่มีน้ำหนักเบาและขยายได้สำหรับ React นอกจากนี้ยังสามารถเข้าถึงได้และมีประสิทธิภาพ
Embla Carousel V7: Embla Carousel เป็นห้องสมุดม้าหมุนที่มีน้ำหนักเบาที่มีการเคลื่อนไหวของไหลและการปัดอย่างแม่นยำ
React Simple Maps V3: ส่วนประกอบแผนภูมิแผนที่ SVG ที่สร้างขึ้นด้วยและสำหรับการตอบสนอง
Clerk/NextJS V4: Clerk Next.js เป็นเสื้อคลุมรอบเสมียน React ช่วยให้ผู้ใช้สามารถใช้ตะขอที่เสมียนตอบสนองให้
React Countup V6: wrapper ส่วนประกอบปฏิกิริยารอบ Countup.js

คนกิน

Prettier V3: Prettier เป็นรูปแบบรหัสที่กำหนดรหัสโดยอัตโนมัติเพื่อให้แน่ใจว่ามันสอดคล้องและอ่านง่าย
Husky V8: Husky เป็นเครื่องมือที่ทำให้ง่ายต่อการทำงานกับ Git Hooks Prettier เป็นรูปแบบรหัส
Lint Staged V15: Lint-staged จะเพิ่มการแก้ไขใด ๆ โดยอัตโนมัติในการกระทำตราบเท่าที่ไม่มีข้อผิดพลาด
POSTCSS V8: POSTCSS เป็นไลบรารี JavaScript ที่ใช้ปลั๊กอินเพื่อแปลง CSS มันเปลี่ยน CSS เป็นแผนผังนามธรรมแบบนามธรรมซึ่งจะถูกแทนด้วยวัตถุ JavaScript

เริ่มต้นอย่างรวดเร็ว

การดาวน์โหลด

โคลนโคลน repo git นี้ https://github.com/design-sparx/mantine-analytics-dashboard.git
ดาวน์โหลดจาก GitHub

สร้างเครื่องมือ

คุณจะต้องติดตั้ง node.js เมื่อติดตั้ง node.js ให้เรียกใช้ NPM ติดตั้งเพื่อติดตั้งส่วนที่เหลือของการพึ่งพาของเทมเพลต การพึ่งพาทั้งหมดจะถูกดาวน์โหลดไปยังไดเรกทอรี Node_Modules

npm install

ตอนนี้คุณพร้อมที่จะแก้ไขไฟล์ต้นฉบับและสร้างไฟล์ใหม่ ในการตรวจจับการเปลี่ยนแปลงไฟล์โดยอัตโนมัติและเริ่มต้นเว็บเซิร์ฟเวอร์ท้องถิ่นที่ http: // localhost: 3000 ให้เรียกใช้คำสั่งต่อไปนี้

npm run dev

คอมไพล์, ปรับให้เหมาะสม, minify และ uglify ไฟล์ต้นฉบับทั้งหมดเพื่อสร้าง/

npm run build

โครงสร้างไฟล์

ภายในไฟล์ซิปคุณจะพบไดเรกทอรีและไฟล์ต่อไปนี้ ทั้งไฟล์แจกจ่ายที่รวบรวมและลดขนาดเล็กเช่นเดียวกับในไฟล์ zip คุณจะพบไดเรกทอรีและไฟล์ต่อไปนี้ ทั้งไฟล์แจกจ่ายที่คอมไพล์และขนาดเล็กรวมถึงไฟล์ต้นฉบับจะรวมอยู่ในแพ็คเกจ

 mantine-analytics-dashboard/
├── .changeset
├── .github
├── .gitignore
├── .editorconfig
├── .prettierignore
├── .prettierrc
├── README.md
├── CHANGELOG.md
├── LICENSE
├── index.html
├── package.json
├── tsconfig.json
├── next.config.js
├── postcss.config.cjs
├── clerkMiddleware.ts
├── yarn.lock
├── public/
│   ├── mocks/
│   ├── _redirects
│   ├── favicon.ico
├── src/
│   ├── .changeset/
│   ├── .github/
│   ├── .husty/
│   ├── .storybook/
│   ├── .yarn/
│   ├── app/
├────── api/
├────── error.tsx
├────── error.module.css
├────── global.css
├────── layout.tsx
├────── loading.tsx
├────── not-found.tsx
├────── page.module.css
├────── page.tsx
│   ├── components/
│   ├── hooks/
│   ├── layout/
│   ├── providers/
│   ├── public/
│   ├── routes/
│   ├── styles/
│   ├── theme/
│   ├── types/
│   ├── utils/
└──

การสนับสนุนและการสนับสนุน

ฉันยินดีต้อนรับนักพัฒนาและผู้ที่ชื่นชอบทุกคนเพื่อมีส่วนร่วมในการเติบโตของเทมเพลตแดชบอร์ดผู้ดูแลระบบโอเพนซอร์ซของเรา การมีส่วนร่วมเป็นกระบวนการทำงานร่วมกันที่ช่วยให้เราสามารถเพิ่มขีดความสามารถและคุณภาพของเทมเพลตโดยรวม เพื่อเริ่มต้น:

แยกที่เก็บ: แยกที่เก็บ GitHub ของเทมเพลตไปยังบัญชี GitHub ของคุณเอง
โคลนส้อม: โคลนที่เก็บที่เก็บไว้ในเครื่องของคุณโดยใช้ Git
สร้างสาขา: สร้างสาขาใหม่สำหรับการมีส่วนร่วมของคุณเพื่อให้ codebase หลักยังคงอยู่
ใช้การเปลี่ยนแปลง: ทำการเปลี่ยนแปลงที่คุณต้องการเพิ่มส่วนประกอบใหม่หรือปรับแต่งคุณสมบัติที่มีอยู่
มุ่งมั่นและผลักดัน: กระทำการเปลี่ยนแปลงของสาขาใหม่และผลักดันพวกเขาไปยังส้อม GitHub ของคุณ
ส่งคำขอดึง: ส่งคำขอดึงจากที่เก็บส้อมของคุณไปยังที่เก็บแม่แบบหลัก การเปลี่ยนแปลงของคุณจะได้รับการตรวจสอบและรวมกัน

การรายงานปัญหาและขอความช่วยเหลือ

หากคุณพบปัญหาใด ๆ หรือต้องการความช่วยเหลือในขณะที่ใช้เทมเพลตเราอยู่ที่นี่เพื่อช่วย:

ตัวติดตามปัญหา: ไปที่แท็บปัญหาของที่เก็บของ GitHub เพื่อรายงานข้อบกพร่องแนะนำการปรับปรุงหรือขอคำชี้แจงเกี่ยวกับแง่มุมของเทมเพลต
ปฏิสัมพันธ์ของชุมชน: มีส่วนร่วมกับชุมชนของแม่แบบบนแพลตฟอร์มเช่นการอภิปราย GitHub เพื่อขอความช่วยเหลือคำแนะนำและข้อมูลเชิงลึก

คำเชิญให้สำรวจและใช้ประโยชน์

เทมเพลต Mantine และ Next.js Admin Dashboard ไม่ได้เป็นเพียงจุดจบ มันเป็นจุดเริ่มต้น - จุดเริ่มต้นสำหรับการเดินทางที่สร้างสรรค์ของคุณ ไม่ว่าคุณจะเป็นนักพัฒนาที่มีประสบการณ์ที่กำลังมองหาการเปิดตัวอย่างรวดเร็วหรือผู้ที่ชื่นชอบการเรียนรู้วิธีการพัฒนาที่ทันสมัยเทมเพลตนี้เป็นผืนผ้าใบของคุณ