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 : 说明该项目的图标

用作下拉菜单的项目（例如“页面”选项）不需要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