windmill dashboard react

四個 100 分和 PWA 已準備就緒。只需連接您的資料即可。

現場觀看

這不是模板。這是一個完整的應用程序，構建在 React 之上，所有微小細節都已處理完畢，因此您只需將數據提供給它即可。

輔助功能是我的專案中的優先事項，我認為它也應該是您的專案中的優先事項，因此這是根據真實螢幕閱讀器開發的，焦點陷阱和鍵盤導航隨處可見。

？特徵

• ？完全可存取（使用螢幕閱讀器開發）
• ？啟用深色主題（根據主題甚至加載不同的圖像）
• ？多個（自訂）元件
• ⚡ 代碼分割
• 順風CSS
• 風車反應使用者介面
• 反應路由器
• 英雄圖示
• Chart.js
• PWA 提供離線優先和類似應用程式的體驗

文件

通用元件

Windmill Dashboard React 建構在 Windmill React UI 之上。您可以在那裡找到每個小組件的文檔。

路由

Windmill Dashboard 中的路由分為兩類：側邊欄 (routes/sidebar.js) 和常規 (routes/index.js)。

側邊欄路線

這些是將顯示在側邊欄中的路線。他們期望三個屬性：

• path ：目的地；
• name ：要顯示的名稱；
• icon : 說明該專案的圖標

用作下拉式選單的項目（例如 Pages 選項）不需要path ，但需要一個包含path和name物件的routes數組：

 // 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在應用程式內部呈現。

如果你想新增一個路由，比方說，一個登陸頁面，你應該將它加入App的路由器（src/App.js，就像Login 、 CreateAccount和其他頁面的路由一樣。

如何為路由器新增頁面？

1. 在src/pages中建立頁面，例如MyPage.js ；
2. 將其加入到全域路由器( 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
}

3. 如果您想從側邊欄訪問此頁面，您必須選擇：

• 將其新增至根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即可查看。

如果您進行編輯，頁面將重新載入。
您還將在控制台中看到任何 lint 錯誤。

npm test

在互動式監視模式下啟動測試運行程式。
有關詳細信息，請參閱有關運行測試的部分。

npm run build

將用於生產的應用程式建置到build資料夾。
它在生產模式下正確捆綁 React 並優化構建以獲得最佳性能。

建置被縮小，檔案名稱包含哈希值。
您的應用程式已準備好部署！

有關詳細信息，請參閱有關部署的部分。

npm run eject

注意：這是一種單向操作。一旦eject ，就無法再返回！

如果您對建置工具和配置選擇不滿意，可以隨時eject 。此命令將從您的專案中刪除單一建置依賴項。

相反，它會將所有設定檔和傳遞依賴項（webpack、Babel、ESLint 等）複製到您的專案中，以便您可以完全控制它們。除eject之外的所有命令仍然有效，但它們將指向複製的腳本，以便您可以調整它們。此時你只能靠自己了。

您不必使用eject 。精選的功能集適合中小型部署，您不應該覺得有義務使用此功能。但是我們知道，如果您在準備好使用時無法對其進行自訂，則該工具將沒有用處。

了解更多

您可以在建立 React 應用程式文件中了解更多。

若要學習 React，請查看 React 文件。

程式碼分割

本節已移至此處：https://facebook.github.io/create-react-app/docs/code-splitting

分析捆綁包大小

本節已移至此處：https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

製作漸進式 Web 應用程式

本節已移至此處：https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

進階配置

本節已移至此處：https://facebook.github.io/create-react-app/docs/advanced-configuration

部署

本節已移至此處：https://facebook.github.io/create-react-app/docs/deployment

npm run build無法縮小

本節已移至此處：https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify