npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

link.dashboard

v1.0.1

Published

'UI interface'

Downloads

5

Readme

react-admin

react-admin system solution

依赖模块

项目是用create-react-app创建的,主要还是列出新加的功能依赖包

点击名称可跳转相关网站

功能模块

备注:项目只引入了ant-design的部分组件,其他的组件antd官网有源码,可以直接复制到项目中使用,后续有时间补上全部组件。 项目使用了antd的自定义主题功能-->黑色,若想替换其他颜色,具体操作请查看antd官网

  • 首页
    • 完整布局
    • 换肤(全局功能,暂时只实现了顶部导航的换肤,后续加上其他模块)
  • 导航菜单
    • 顶部导航(菜单伸缩,全屏功能)
    • 左边菜单(增加滚动条以及适配路由的active操作)
  • UI模块
    • 按钮(antd组件)
    • 图标(antd组件并增加彩色表情符)
    • 加载中(antd组件并增加顶部加载条)
    • 通知提醒框(antd组件)
    • 标签页(antd组件)
    • 轮播图(ant动效组件)
    • 富文本
    • 拖拽
    • 画廊
  • 动画
    • 基础动画(animate.css所有动画)
    • 动画案例
  • 表格
    • 基础表格(antd组件)
    • 高级表格(antd组件)
    • 异步表格(数据来自掘金酱的接口)
  • 表单
    • 基础表单(antd组件)
  • 图表
    • echarts图表
  • 页面
    • 登录页面(包括GitHub第三方登录)
    • 404页面
  • 地图
    • openlayer地图(谷歌卫星地图与天地图结合)

代码目录

+-- build/                                  ---打包的文件目录
+-- config/                                 ---npm run eject 后的配置文件目录
+-- node_modules/                           ---npm下载文件目录
+-- public/                                 
|   --- index.html							---首页入口html文件
|   --- npm.json							---echarts测试数据
|   --- weibo.json							---echarts测试数据
+-- src/                                    ---核心代码目录
|   +-- axios                               ---http请求存放目录
|   |    --- index.js
|   +-- components                          ---各式各样的组件存放目录
|   |    +-- animation                      ---动画组件
|   |    |    --- ...   
|   |    +-- charts                         ---图表组件
|   |    |    --- ...   
|   |    +-- dashboard                      ---首页组件
|   |    |    --- ...   
|   |    +-- forms                          ---表单组件
|   |    |    --- ...   
|   |    +-- pages                          ---页面组件
|   |    |    --- ...   
|   |    +-- tables                         ---表格组件
|   |    |    --- ...   
|   |    +-- ui                             ---ui组件
|   |    |    --- ...   
|   |    +-- map                            ---地图组件
|   |    |    --- ...
|   |    --- BreadcrumbCustom.jsx           ---面包屑组件
|   |    --- HeaderCustom.jsx               ---顶部导航组件
|   |    --- Page.jsx                       ---页面容器
|   |    --- SiderCustom.jsx                ---左边菜单组件
|   +-- style                               ---项目的样式存放目录,主要采用less编写
|   +-- utils                               ---工具文件存放目录
|   --- App.js                              ---组件入口文件
|   --- index.js                            ---项目的整体js入口文件,包括路由配置等
--- .env                                    ---启动项目自定义端口配置文件
--- .eslintrc                               ---自定义eslint配置文件,包括增加的react jsx语法限制
--- package.json                                    

安装运行

1.下载或克隆项目源码
2.npm安装相关包文件(国内建议增加淘宝镜像源,不然很慢,你懂的😁)
npm i
3.启动项目
npm start
4.打包项目
npm run build

  • 依赖包版本升级
  • 引入redux系列
  • 增加权限管理模块
    • 使用easy-mock模拟数据模拟登录接口
    • 使用redux系列将登录用户数据传递给权限组件
    • 权限组件采用Render Callback的方式传递权限给需要受控制的组件(具体做法请查看源代码。)
    • 用户状态保存在localStorage中
    • 具体做法请运行项目查看
    • PS:以上管理权限只是一种方式,但这绝对不是唯一的方式,也不是最好的方式。如果你有更好的方式,不妨加上面的群和大家一起分享下。😄😄
  • 增加路径别名
    • 使用@别名处理引入组件相对路径过长问题。
    • 缺点:编辑器不能使用快捷提示和快捷跳转到相应的文件

  • 权限管理模块增加页面跳转权限验证
    • 点击权限管理的路由拦截,若没有访问权限则会跳转到404页面。
    • 大致实现方式(非常简单):通过向自定义router组件传入store,登录之后可获取到redux中的权限state数据,并通过判断是否包含权限进行跳转。ps: 该demo的效果是管理员登录之后才能跳转到路由拦截页面。具体操作请拉取代码尝试。