slash admin

ผู้ดูแลระบบสแลช

Slash Admin เป็นเทมเพลตแดชบอร์ดผู้ดูแลระบบสมัยใหม่ที่สร้างด้วย React 18, Vite, Ant Design และ TypeScript ได้รับการออกแบบมาเพื่อช่วยให้นักพัฒนาสร้างระบบการจัดการผู้ดูแลระบบที่มีประสิทธิภาพได้อย่างรวดเร็ว

ดูตัวอย่าง · ไม่ลงรอยกัน · เอกสาร

อังกฤษ | 中文

สปอนเซอร์

ดูตัวอย่าง

• https://admin.slashspaces.com/

คุณสมบัติ

• สร้างโดยใช้ตะขอ React 18
• ขับเคลื่อนโดย Vite เพื่อการพัฒนาที่รวดเร็วและการเปลี่ยนโมดูลที่ร้อนแรง
• ผสานรวม Ant Design โดยมอบชุดองค์ประกอบ UI และรูปแบบการออกแบบที่หลากหลาย
• เขียนด้วย TypeScript นำเสนอความปลอดภัยของประเภทและประสบการณ์การพัฒนาที่ได้รับการปรับปรุง
• การออกแบบที่ตอบสนอง ปรับให้เข้ากับขนาดหน้าจอและอุปกรณ์ต่างๆ
• การกำหนดค่าเส้นทางที่ยืดหยุ่น รองรับเส้นทางที่ซ้อนกัน
• การควบคุมการเข้าถึงแบบรวมตามบทบาทของผู้ใช้
• รองรับความเป็นสากลเพื่อการสลับภาษาที่ง่ายดาย
• รวมคุณสมบัติผู้ดูแลระบบทั่วไป เช่น การจัดการผู้ใช้ การจัดการบทบาท และการจัดการสิทธิ์
• ธีมและสไตล์ที่ปรับแต่งได้เพื่อตอบสนองความต้องการในการสร้างแบรนด์ของคุณ
• โซลูชันการเยาะเย้ยตาม MSW และ Faker.js
• การจัดการของรัฐโดยใช้ Zustand
• การดึงข้อมูลโดยใช้ React-Query

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

รับรหัสโครงการ

git clone https://github.com/d3george/slash-admin.git

ติดตั้งการพึ่งพา

ในไดเร็กทอรีรากของโปรเจ็กต์ ให้รันคำสั่งต่อไปนี้เพื่อติดตั้งการขึ้นต่อกันของโปรเจ็กต์:

pnpm install

เริ่มเซิร์ฟเวอร์การพัฒนา

รันคำสั่งต่อไปนี้เพื่อเริ่มเซิร์ฟเวอร์การพัฒนา:

pnpm dev

ไปที่ http://localhost:3001 เพื่อดูใบสมัครของคุณ

สร้างเพื่อการผลิต

รันคำสั่งต่อไปนี้เพื่อสร้างเวอร์ชันที่ใช้งานจริง:

pnpm build

การปรับใช้นักเทียบท่า

สร้างอิมเมจและเรียกใช้คอนเทนเนอร์

สร้างภาพ

ป้อนไดเรกทอรีรากของโปรเจ็กต์ในเทอร์มินัลแล้วดำเนินการคำสั่งต่อไปนี้เพื่อสร้างอิมเมจ Docker:

 docker build -t your-image-name .

ตรวจสอบให้แน่ใจว่าได้แทนที่ your-image-name ด้วยชื่อรูปภาพของคุณเอง

วิ่งคอนเทนเนอร์

รันแอปพลิเคชันของคุณในคอนเทนเนอร์ Docker โดยใช้คำสั่งต่อไปนี้:

 docker run -p 3001:80 your-image-name

สิ่งนี้จะเรียกใช้แอปพลิเคชันของคุณบนพอร์ต 80 (เปิดเผยใน Dockerfile ) ของคอนเทนเนอร์และแมปกับพอร์ต 3001 บนโฮสต์ของคุณ

ตอนนี้คุณสามารถเข้าถึง http://localhost:3001 เพื่อดูแอปพลิเคชันที่ปรับใช้

ใช้ docker-compose.yaml

ป้อนไดเรกทอรีรากของโปรเจ็กต์ในเทอร์มินัลแล้วดำเนินการคำสั่งต่อไปนี้เพื่อเริ่ม Docker Compose:

 docker-compose up -d

Docker Compose จะสร้างรูปภาพตามการกำหนดค่าที่กำหนดโดย 'docker-compose. yaml' และเรียกใช้คอนเทนเนอร์ในพื้นหลัง

หลังจากที่คอนเทนเนอร์ทำงานสำเร็จแล้ว ยังสามารถเข้าถึงได้ผ่าน http://localhost:3001 หากต้องการดูแอปพลิเคชันที่ปรับใช้

ข้อกำหนดการส่ง Git Contribution

การอ้างอิง.commitlint.config.js

• feat คุณสมบัติใหม่
• fix แก้ไข
• เอกสาร docs หรือความคิดเห็น
• รูปแบบโค้ด style (การเปลี่ยนแปลงที่ไม่ส่งผลต่อการเรียกใช้โค้ด)
• refactor แฟคเตอร์
• การเพิ่มประสิทธิภาพการทำงาน perf
• revert กลับ กระทำ
• test การทดสอบที่เกี่ยวข้อง
• การเปลี่ยนแปลง chore ในกระบวนการก่อสร้างหรือเครื่องมือเสริม
• ci แก้ไขการกำหนดค่าและสคริปต์ CI
• types การเปลี่ยนแปลงไฟล์คำจำกัดความประเภท
• wip ในการพัฒนา