windmill dashboard react ดาวน์โหลด - windmill dashboard react ดาวน์โหลดซอร์สโค้ด

windmill dashboard react

หมวดหมู่อื่นๆ

Release 0.4.0

ดาวน์โหลด

ปฏิกิริยาแดชบอร์ดกังหันลม
สี่ 100 คะแนน และ กปภ. พร้อมแล้ว เพียงเชื่อมต่อข้อมูลของคุณ

ดูสดได้เลย

นี่ไม่ใช่เทมเพลต นี่เป็นแอปพลิเคชันที่สมบูรณ์ สร้างขึ้นบน React โดยมีรายละเอียดเล็กๆ น้อยๆ ทั้งหมดได้รับการดูแล ดังนั้นคุณเพียงแค่ต้องนำข้อมูลมาป้อน

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

- คุณสมบัติ

- เข้าถึงได้ตลอด (พัฒนาโดยใช้โปรแกรมอ่านหน้าจอ)
- เปิดใช้งานธีมสีเข้ม (โหลดรูปภาพที่แตกต่างกันตามธีม)
- ส่วนประกอบหลายรายการ (กำหนดเอง)
⚡ การแยกรหัส
CSS ท้ายลม
UI ปฏิกิริยาของกังหันลม
ตอบสนองเราเตอร์
ฮีโร่ไอคอน
Chart.js
PWA มอบประสบการณ์ออฟไลน์และเหมือนแอปเป็นหลัก

เอกสาร

ส่วนประกอบทั่วไป

Windmill Dashboard React สร้างขึ้นจาก UI ของ Windmill React คุณจะพบเอกสารประกอบสำหรับส่วนประกอบเล็กๆ ทุกอันที่นั่น

การกำหนดเส้นทาง

เส้นทางในแดชบอร์ด Windmill แบ่งออกเป็นสองประเภท ได้แก่ แถบด้านข้าง (เส้นทาง/sidebar.js) และเส้นทางทั่วไป (เส้นทาง/index.js)

เส้นทางแถบด้านข้าง

นี่คือเส้นทางที่จะแสดงในแถบด้านข้าง พวกเขาคาดหวังคุณสมบัติสามประการ:

path : จุดหมายปลายทาง;
name : ชื่อที่จะแสดง;
icon : ไอคอนเพื่อแสดงรายการ

รายการที่ใช้เป็นเมนูแบบเลื่อนลง เช่น ตัวเลือก Pages ไม่ต้องการ path แต่คาดว่าจะมีอาร์เรย์กำหนด routes ของอ็อบเจ็กต์ที่มี path และ name :

 // sidebar.js
{
  path : '/app/tables' ,
  icon : 'TablesIcon' ,
  name : 'Tables' ,
} ,
{
  icon : 'PagesIcon' , // <-- this is used as a submenu, so no path
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/login' ,
      name : 'Login' , // <-- these don't have icons
    } ,
    {
      path : '/create-account' ,
      name : 'Create account' ,
    } ,

เส้นทางทั่วไป (เราเตอร์)

เหล่านี้เป็นเส้นทาง ภายใน (ส่วนตัว) พวกมันจะแสดงผลภายในแอป โดยใช้ containers/Layout เริ่มต้น

หากคุณต้องการเพิ่มเส้นทางไปยังหน้า Landing Page คุณควรเพิ่มเส้นทางนั้นลงในเราเตอร์ของ App (src/App.js เช่นเดียวกับ Login , CreateAccount และหน้าอื่นๆ ถูกกำหนดเส้นทาง

จะเพิ่มหน้าใหม่ให้กับเราเตอร์ได้อย่างไร?

สร้างเพจของคุณภายใน src/pages พูด MyPage.js ;
เพิ่มลงในเราเตอร์ส่วนกลาง ( src/routes/index.js )

 const MyPage = lazy ( ( ) => import ( '../pages/MyPage' ) )

จากนั้นเพิ่มลงในอาร์เรย์ routes :

 {
  path : '/my-page' , // the url that will be added to /app/
  component : MyPage , // the page component you jsut imported
}

หากคุณต้องการให้หน้านี้เข้าถึงได้จากแถบด้านข้าง คุณต้องเลือกตัวเลือก:

เพิ่มลงในอาร์เรย์ routes รูท

 {
  path : '/app/my-page' , // /app + the url you added in routes/index.js
  icon : 'HomeIcon' , // the component being exported from src/icons/index.js
  name : 'My Page' , // name that appear in Sidebar
} ,

เพิ่มเป็นตัวเลือกใต้เมนูแบบเลื่อนลง

 {
  icon : 'PagesIcon' ,
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/app/my-page' ,
      name : 'My Page' ,
    } ,

หากคุณถามว่าสิ่งนี้ /app มาจากไหน มันมาจากบรรทัดนี้ภายใน src/App.js ที่ทำให้แอป:

 < Route path = "/app" component = { Layout } />

โปรเจ็กต์นี้บูทด้วย Create React App

สคริปต์ที่มีอยู่

ในไดเร็กทอรีโปรเจ็กต์ คุณสามารถรัน:

`npm start`

เรียกใช้แอปในโหมดการพัฒนา
เปิด http://localhost:3000 เพื่อดูในเบราว์เซอร์

เพจจะโหลดซ้ำหากคุณทำการแก้ไข
คุณจะเห็นข้อผิดพลาดของขุยในคอนโซลด้วย

`npm test`

เปิดตัวนักวิ่งทดสอบในโหมดนาฬิกาแบบโต้ตอบ
ดูส่วนเกี่ยวกับการรันการทดสอบสำหรับข้อมูลเพิ่มเติม

`npm run build`

สร้างแอปสำหรับการผลิตไปยังโฟลเดอร์ build ด์
มันรวม React ในโหมดการผลิตอย่างถูกต้องและปรับโครงสร้างให้เหมาะสมเพื่อประสิทธิภาพที่ดีที่สุด

โครงสร้างถูกย่อให้เล็กลงและชื่อไฟล์มีแฮชด้วย
แอปของคุณพร้อมที่จะปรับใช้แล้ว!

ดูส่วนเกี่ยวกับการปรับใช้สำหรับข้อมูลเพิ่มเติม

`npm run eject`

หมายเหตุ: นี่เป็นการดำเนินการทางเดียว เมื่อคุณ eject คุณจะไม่สามารถย้อนกลับไปได้!

หากคุณไม่พอใจกับเครื่องมือสร้างและตัวเลือกการกำหนดค่า คุณสามารถ eject ได้ตลอดเวลา คำสั่งนี้จะลบการพึ่งพาบิลด์เดียวออกจากโปรเจ็กต์ของคุณ

แต่จะคัดลอกไฟล์การกำหนดค่าทั้งหมดและการพึ่งพาแบบสกรรมกริยา (webpack, Babel, ESLint ฯลฯ) ลงในโปรเจ็กต์ของคุณเพื่อให้คุณควบคุมไฟล์เหล่านั้นได้อย่างเต็มที่ คำสั่งทั้งหมดยกเว้นคำสั่ง eject จะยังคงใช้งานได้ แต่จะชี้ไปที่สคริปต์ที่คัดลอกเพื่อให้คุณปรับแต่งได้ ณ จุดนี้คุณต้องอยู่คนเดียว

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