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 🙏

© 2025 – Pkg Stats / Ryan Hefner

hzero-front-ui

v0.1.0-beta.1

Published

--- title: hzero-front-ui date: 2019-10-21 tag: HZERO Front UI version: 0.1.0 ---

Downloads

3

Readme


title: hzero-front-ui date: 2019-10-21 tag: HZERO Front UI version: 0.1.0

HZERO Front UI

CHANGE_LOG

  • 1.1.x c7n组件pro/Pagination移除itemRender
  • 1.0.x cfg导出方式更改

运行方法

  • 安装依赖:在根目录下执行yarn init:project,该命令会安装项目下所有子模块的依赖
  • 编译子项目:在根目录下执行yarn transpile,或在每个子项目下执行yarn transpile
  • 运行:
      1. 在项目根目录运行yarn start:hzeroyarn start:c7nyarn start:cfg分别运行三个子项目。
      1. 在子项目根目录下执行:yarn start

开发规范

命名规范

  1. 组件文件夹命名使用大驼峰形式,如果组件没有另建文件夹也使用大驼峰形式命名。
  2. themes文件夹内样式文件的命名: 一律使用 组件名.style.js 形式命名;如果某个样式文件内包含几个组件的样式,则取一能概括内容的语义化名字,以大写字母开头。

ui子项目目录结构(对应hzero子项目和c7n子项目)

.
├── lib                                                   // 编译后的文件,用于npm发布
├── public                                                // 打包后的静态文件
├── README.md                                             // 项目说明
├── package.json                                          // 本项目配置node.js 配置文件
├── src                                                   // 工作目录
│   ├── assets                                            // 静态小资源目录
│   ├── components                                        // 主要开发目录,需要发布到npm
│          ├── Page                                       // 页面布局组件,Header、Content
│          ├── themes                                     // 主题文件夹,每个组件对应一个样式文件,index.js导出一个汇总后的样式组件
│          ├── utils                                      // 工具函数目录
│          ├── theme-animations                           // 每个主题的动画实现
│          ├── Input                                      // 重新封装过的组件(其它以大写字母开头的组件也是一样)
│   ├── config                                            // 项目展示页面相关配置
│          ├── menu-config.js                             // 展示页面菜单配置
│   ├── layouts                                           // 布局相关组件
│   ├── pages                                             // 展示页面
│   ├── templates                                         // gatsby页面模板,用于自动生成页面
└── yarn.lock                                             // 项目yarn node.js模块配置文件 

配置中心子项目目录结构(对应config-center子项目)

.
├── README.md
├── config
├── index.js                                                        // npm包入口文件
├── lib
├── package.json
├── public
├── scripts
├── src
│   ├── App.tsx                                                     // 测试使用App组件
│   ├── assets                                                      // 静态资源
│   ├── components
│   │   ├── Container                                               // 顶层容器,主题切换逻辑在此实现
│   │   └── Page                                                    // 额外提供两个可选的布局组件
│   ├── index.app.tsx                                               // 项目内也面的入口文件
│   ├── index.js                                                    // 对外导出组件和工具函数
│   ├── layouts                                                     // 项目内页面的布局文件
│   ├── pages                                                       // 配置中心页面再此实现,最终导出index.js
│   │   ├── ComponentsConfig                                        // 组件配置组件
│   │   |        ├── ...                                            // 每个或每类组件对应的表单配置控件
│   │   |        ├── util.js                                        // 表单项所用到的工具函数(memoized工具函数及辅助组件)
│   │   ├── ConfigByStep                                            // 分步骤配置
│   │   ├── ConfigIndex                                             // 配置中心首页
│   │   ├── Preview                                                 // 预览页面
│   │   ├── _assets                                                 // 配置中心静态资源(多套主题对应的中英文静态资源)
│   │   ├── _components                                             // 页面内使用的components
│   │   ├── index.js                                                // 所有页面的组织页面,里面使用event bus实现了一个假路由
│   │   └── index.style.js
│   ├── theme-assets                                                // 主题资源: 插画、头像、图标等
│   │   └── theme1
│   ├── theme-data                                                  // 主题数据,每套主题对应一个数据
│   │   └── theme1.js
│   └── utils                                                       // 工具函数
│       ├── ThemeContext.js                                         // 顶级context
│       ├── config.js                                               // 默认主题配置
│       ├── constants.js                                            // 常量
│       ├── event.js                                                // event bus
│       └── utils.js                                                // 通用工具函数
├── tsconfig.json                                                   // ts配置文件
└── yarn.lock

版本管理

本项目采用conventional-changelogstandard-version管理CHANGELOG和版本管理,包括git tags的管理

发布

将本项目发布到nexus npm私有源仓库

编译用于发布的版本

执行如下命令

$ cd packages/<hzero front module>
$ yarn transpile

生成 auth hash

执行如下命令

echo -n 'username:password' | openssl base64

将生成的auth hash按照如下方式配置

[email protected]
always-auth=true
_auth=yourbase64hashcode

执行如下命令将上面的配置加入到node.js全局环境变量配置文件.npmrc

$ npm config edit 

再执行如下命令发布即可

$ npm publish --registry http://nexus.saas.hand-china.com/content/repositories/hzero-ui/

版本号发布规则

版本格式:主版本号.次版本号.修订号,版本号递增规则如下:

主版本号:全盘重构时增加;重大功能或方向改变时增加;大范围不兼容之前的接口时增加; 次版本号:增加新的业务功能时增加; 修订号:增加新的接口时增加;在接口不变的情况下,增加接口的非必填属性时增加;增强和扩展接口功能时增加。

行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面,作为延伸。

先行版本号:意味该版本不稳定,可能存在兼容性问题。 其格式为:X.Y.Z-alpha.[正整数],如 1.0.0-alpha.1。

测试版本号: 用于发布比较稳定,已经可以使用的版本。 格式为 X.Y.Z-beta.[正整数],如 1.0.1-beta.4。

正式版:用于发布稳定版本 格式为:X.Y.Z,如1.0.0。

每次发布正式版需创建一个该版本对应的分支;同时在develop打上与该版本版本对应的tag,最后将develop分支合并到master分支。

Git使用规范

Git 配置

git配置中,用户名需使用本人姓名,邮箱使用公司邮箱。

git config --global user.name "yourname"
git config --global user.email "[email protected]"

Git Commit guide

  • 分支使用
  1. 分支标识符

feature: 新功能开发/新服务开发 hotfix/bugfix: bug 修复

  1. 开发使用

新功能/新服务开发,需要创建 feature 分支。

规范:

feature-工号-服务

例如:

feature-13492-hiam

  1. 版本 bug 修复

对于已经发版的功能,bug 修复时,需要创建对应版本的分支。

规范:

hotfix-vxxx-工号

例如:

hotfix-v1.0.x-15664

  • commit 操作标识符
fix:修复bug
feat:更新/新增文件/新特性
delete:删除文件
  • commit 规范
[操作标识符][:][commit 内容]

例如:

fix: 修改测试映射类字段

feat: 添加服务计费功能

feat: 开发临时会话功能,优化消息类别处理

Author

@中台技术中心·HZero技术团队