react dashboard pro

React แดชบอร์ด Pro

โซลูชันแดชบอร์ดแบบครบวงจรที่พร้อมใช้งานทันที

ฟังก์ชั่น Dynamic Dashboard เพียงไม่กี่ขั้นตอนง่ายๆ

ช่วยแก้ปัญหาความต้องการในการปรับแต่งของ Dashboard + Widget ซึ่งเกือบจะถูกใช้โดยฝั่ง B ของ "Thousands of People, Thousands of Faces"

โซลูชันแดชบอร์ดแบบครบวงจรที่ทำงานได้ทันทีที่แกะกล่อง

มีฟังก์ชันแดชบอร์ดแบบไดนามิกในไม่กี่ขั้นตอนง่ายๆ

ช่วยแก้ปัญหาความต้องการปรับแต่งแดชบอร์ด + วิดเจ็ตของ "คนนับพัน"

พื้นที่เก็บข้อมูล

https://github.com/yuanguandong/react-dashboard-pro

เอกสาร

https://yuanguandong.github.io/react-dashboard-pro/

สาธิต

ติดตั้ง

npm i react-dashboard-pro -S

ดาวน์โหลดวิดเจ็ต

npm i widgets-cli -D
npx widgets-cli

ร้านขายวิดเจ็ต

https://yuanguandong.github.io/react-widgets/

การใช้งาน

 import React , { useState } from 'react' ;
import type { LayoutsIF } from 'react-dashboard-pro' ;
import Dashboard from 'react-dashboard-pro' ;
import allWidgets from '../widgets' ;

export default ( ) => {
  const [ layout , setLayout ] = useState < LayoutsIF > ( [ ] ) ;
  const onLayoutChange = ( layout : LayoutsIF ) => {
    setLayout ( layout ) ;
  } ;
  return (
    < Dashboard
      widgets = { allWidgets }
      onLayoutChange = { onLayoutChange }
      layout = { layout }
    />
  ) ;
} ; 

อุปกรณ์ประกอบฉาก

คุณสมบัติ	คำอธิบาย	พิมพ์	ค่าดีฟอลต์	ที่จำเป็น
วิดเจ็ต	คอลเลกชันตัวเลือกของออบเจ็กต์แอปเพล็ต	{ [คีย์: สตริง]:วิดเจ็ต}		จริง
แก้ไขโหมด	ไม่ว่าจะแก้ไขสถานะ	บูลีน	เท็จ	เท็จ
ค่าเริ่มต้นเค้าโครง	เค้าโครงเริ่มต้น	เค้าโครงรายการ[]	-	เท็จ
widgetWrapClassName	ชื่อคลาสคอนเทนเนอร์วิดเจ็ต	เชือก		เท็จ
วิดเจ็ตWrapStyle	สไตล์คอนเทนเนอร์วิดเจ็ต	React.CSSProperties		เท็จ
เค้าโครง	ข้อมูลเค้าโครง	เค้าโครงรายการ[]	โมฆะ	เท็จ
ความสูงขั้นต่ำ	ความสูงขั้นต่ำ	ตัวเลข	300	เท็จ
maxWidgetLength	จำนวนวิดเจ็ตสูงสุดที่สามารถเพิ่มลงในแดชบอร์ดปัจจุบัน	ตัวเลข	20	เท็จ
แถบเครื่องมือ	จะแสดงแถบเครื่องมือเริ่มต้นหรือไม่	{ประเภท: 'ซ้าย' | 'ขวา' | 'บน' |. ความเร็ว: หมายเลข;	จริง	เท็จ
คีย์การจัดเก็บข้อมูล	ตัวระบุที่ไม่ซ้ำที่จัดเก็บไว้ในเครื่อง	บูลีน	'ค่าเริ่มต้น'	เท็จ
บนLayoutChange	เค้าโครงเปลี่ยนการโทรกลับ	(เค้าโครง: LayoutsIF) => เป็นโมฆะ		เท็จ
เมื่อรีเซ็ต	ล้างปุ่มโทรกลับ	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void		เท็จ
บนRemoveWidget	ลบการโทรกลับของแอปเพล็ต	(วิดเจ็ต: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => เป็นโมฆะ		เท็จ
onAddWidget	เพิ่มการโทรกลับไปยังมินิโปรแกรม	(วิดเจ็ต: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => เป็นโมฆะ		เท็จ
บนโหลดซ้ำ	รีเฟรชปุ่มเรียกกลับ	(currentLayout: LayoutsIF) => เป็นโมฆะ		เท็จ
เมื่อยกเลิกแก้ไข	ยกเลิกการแก้ไขการโทรกลับ	(dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutItem) => void		เท็จ
บนแก้ไข	ป้อนการแก้ไขการติดต่อกลับ	(currentLayout: LayoutsIF) => เป็นโมฆะ		เท็จ
บนบันทึก	บันทึกปุ่มโทรกลับ	(currentLayout: LayoutsIF) => เป็นโมฆะ		เท็จ
เมื่อเปลี่ยนกลับ	เรียกคืนปุ่มโทรกลับ	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void		เท็จ

วิดเจ็ต

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

วิดเจ็ตเริ่มต้นนั้นขึ้นอยู่กับ antd และน้อยกว่า ให้ความสนใจกับการติดตั้งการขึ้นต่อกัน

คุณสมบัติ	คำอธิบาย	พิมพ์	ค่าดีฟอลต์	ที่จำเป็น
ชื่อ	ชื่อมินิโปรแกรม	เชือก		จริง
คำอธิบาย	คำอธิบายมินิโปรแกรม	เชือก		จริง
แท็ก	แท็ก ใช้เป็นพื้นฐานการจัดหมวดหมู่สำหรับตัวเลือกมินิโปรแกรม	สตริง[]		จริง
ส่วนประกอบ	ส่วนประกอบมินิโปรแกรม	ส่วนประกอบ | ฟังก์ชันส่วนประกอบ		จริง
configComponent	ส่วนประกอบการกำหนดค่าที่สอดคล้องกับมินิโปรแกรม	ส่วนประกอบ | ฟังก์ชันส่วนประกอบ |		จริง
ความยาวสูงสุด	จำนวนครั้งสูงสุดที่สามารถเพิ่มแอปเพล็ตนี้ลงในแดชบอร์ดปัจจุบันได้	ตัวเลข		จริง
สแน็ปช็อต	ภาพสแน็ปช็อตโปรแกรมขนาดเล็ก ใช้สำหรับการแสดงตัวเลือกโปรแกรมขนาดเล็ก	แหล่งที่มาของรูปภาพบิตแมป		จริง
ไอคอน	ไอคอนโปรแกรมขนาดเล็ก ใช้สำหรับการแสดงตัวเลือกโปรแกรมขนาดเล็ก	ปฏิกิริยาองค์ประกอบ		จริง
ไอคอนพื้นหลัง	พื้นหลังไอคอนโปรแกรมขนาดเล็ก ใช้สำหรับการแสดงตัวเลือกโปรแกรมขนาดเล็ก	เชือก		จริง
ขนาด	ข้อมูลขนาดมินิโปรแกรม	{defaultWidth: number;defaultHeight: number;maxWidth: number;maxHeight: number;minWidth: number;minHeight: number}		จริง

 // todo/index.tsx
import { CalendarOutlined } from '@ant-design/icons' ;
import Panel from './component' ;
import snapShot from './snapshot.png' ;

export default {
  name : 'Todo' ,
  description : 'todo list' ,
  tags : [ 'all' , 'list' ] ,
  component : Panel ,
  configComponent : null ,
  maxLength : 2 ,
  snapShot ,
  icon : < CalendarOutlined /> ,
  iconBackground : 'linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)' ,
  size : {
    defaultWidth : 3 ,
    defaultHeight : 11 ,
    maxWidth : 12 ,
    maxHeight : 16 ,
    minWidth : 2 ,
    minHeight : 4 ,
  } ,
}
// **/**.index ……

// widgets/index.tsx
import clock from './clock' ;
import column from './column' ;
import guide from './guide' ;
import popular from './popular' ;
import ring from './ring' ;
import todo from './todo' ;

export default { clock , guide , popular , todo , column , ring } ;

เค้าโครง

โดยทั่วไป ไม่จำเป็นต้องใส่ใจข้อมูลโครงร่างมากนัก เพียงแต่ต้องทำให้เป็นอนุกรมและจัดเก็บในรูปแบบสตริงเท่านั้น หากคุณต้องการรับข้อมูลโครงร่างแดชบอร์ดแบบเรียลไทม์ (เช่น เมื่อคุณต้องการตั้งค่าเค้าโครงเริ่มต้น) ) คุณสามารถโฟกัส (คลิกเมาส์) ไปยังส่วนที่เกี่ยวข้อง บนแดชบอร์ด ให้กดปุ่มทางลัด Ctrl+Shift+C เพื่อคัดลอกข้อมูลโครงร่างไปยังคลิปบอร์ด และแผงคอนโซลจะพิมพ์ข้อมูลโครงร่างออกมาด้วย

คุณสมบัติ	คำอธิบาย	พิมพ์	ค่าดีฟอลต์	ที่จำเป็น
ฉัน	ตัวระบุที่ไม่ซ้ำ เริ่มต้นด้วยตัวระบุเฉพาะของมินิโปรแกรม ตามด้วยขีดล่าง เช่น 'widgetKey-1234567'	เชือก		จริง
ว	จำนวนสำเนาความกว้าง รวม 12 สำเนา	ตัวเลข		จริง
ชม.	จำนวนสำเนาความสูง 1 ชุดมีขนาดประมาณ 30px	ตัวเลข		จริง
x	ตำแหน่งแนวนอน รวม 12 สำเนา	ตัวเลข		จริง
ย	ตำแหน่งแนวตั้ง 1 สำเนามีขนาดประมาณ 30px	ตัวเลข		จริง
นาทีW	ความกว้างขั้นต่ำ	ตัวเลข		จริง
สูงสุดW	ความกว้างสูงสุด	ตัวเลข		จริง
ชม.	ความสูงขั้นต่ำ	ตัวเลข		จริง
สูงสุดH	ความสูงสูงสุด	ตัวเลข		จริง

 export default [
  {
    w : 3 ,
    h : 16 ,
    x : 0 ,
    y : 0 ,
    i : 'Popular-81735522335293475546087951289435' ,
  } ,
  {
    w : 3 ,
    h : 11 ,
    x : 3 ,
    y : 5 ,
    i : 'Todo-53084247679600442035440807237732' ,
  }
] 

วิธี

สามารถรับอินสแตนซ์ส่วนประกอบผ่านการอ้างอิง วิธีการและวัตถุ dom บางอย่างถูกติดตั้งบนวัตถุอินสแตนซ์ ซึ่งสามารถขยายแถบเครื่องมือและ WidgetSelector แบบกำหนดเองได้อย่างง่ายดาย

คุณสมบัติ	คำอธิบาย	พิมพ์
โดม	วัตถุ DOM	HTMLDivElement
เพิ่มวิดเจ็ต	เพิ่มแอปเพล็ต	(วิดเจ็ต)=>เป็นโมฆะ
ลบวิดเจ็ต	ลบแอปเพล็ต	(i:widgetKey)=>เป็นโมฆะ
โหลดซ้ำ	รีเฟรช	()=>เป็นโมฆะ
แก้ไข	ไปที่การแก้ไข	()=>เป็นโมฆะ
ยกเลิกแก้ไข	ยกเลิกการแก้ไข	()=>เป็นโมฆะ
ย้อนกลับ	รีเซ็ต	()=>เป็นโมฆะ
บันทึก	บันทึก	()=>เป็นโมฆะ

 import React , { useRef } from 'react' ;
import Dashboard from 'react-dashboard-pro' ;
import allWidgets from '../widgets' ;

export default ( ) => {
  const ref = useRef ( )
  const addWidget = ( ) => {
    ref . current . addWidget ( 'Todo-1234567' )
  }
  return ( < >
      < Dashboard
        ref = { ref }
        widgets = { allWidgets }
      />
      < button onClick = { addWidget } >新增</ button >
    </ >
  ) ;
} ; 

สิ่งที่ต้องทำ

✅ configPanel

☑️ช่องว่าง

☑️ ธีมทันสมัย

☑️ ธีมสีเข้ม

☑️ วิดเจ็ตเพิ่มเติม

✅ วิดเจ็ต-cli

☑️ความเป็นสากล

จุดจบ

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

หากเห็นว่ามีประโยชน์กรุณาให้ดาวด้วย