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

xinxuan-backstage-scaffold

v0.0.1

Published

心选业务后台框架

Downloads

9

Readme

安装

  1. 从 gitLab 拉取代码
  2. 执行以下命令,初始化 git
rm -rf .git
git init

运行

(注: 也可以在iceWork中打开运行)

  • 安装依赖
tnpm install
  • 启动调试
tnpm start

框架说明

  • 适用场景:该框架适用于(头部+内容)和(头部+侧边+内容)两种页面
  • 主题:该框架使用自定义主题,如果要更换主题,请求package.json文件
"buildConfig": {
  "theme": "@alife/dpl-xinxuan-c2m-skin",  // 指定自己的主题文件
  "entry": "src/index.js"
}

编程规范

CSS规范

  • css类名的定义请使用BEM规范,使用双下划线和双中横线。
// 规范说明
.Block {}
.Block__Element {}
.Block__Element--Modifier {}

// 举例 (我使用"__"开头,更易区分是自定义的class,还是主题的class)
.__layout__container {}
.__layout__container__basic {}
.__layout__container__basic--highlight {}

工程规范

  • 文件限制:layouts/router.jsx 不允许随意改动
  • 常量定义:所有的常量都放到 constants.js 文件中
  • 接口编写:所有的接口请求都在 services.js 文件中定义

项目编写

添加新页面

  • src/pages目录下新建一个页面,新页面的基本结构如下
import React, { Component } from 'react';

export default class ExamplePage extends Component {
  static displayName = 'ExamplePage';

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div className="example__page" />
    );
  }
}

路由配置

编辑routerConfig.js,添加一个路由:给 reuterConfig 新增一项

{
  path,     // 路由路径
  layout,   // 该路由对应的容器(可选)
  component // 该路由对应的页面
}

菜单配置

编辑menuConfig.js,在这里定义一个三级菜单,第一菜单显示在头部,二三级菜单显示在侧边。如果一级菜单没有子项,就没有侧边栏。

{
  label: '一级菜单', // 一级菜单名称
  path: '/', // 一级菜单路径
  icon: 'compass', // 一级菜单图标
  matchs: ['/'], // 菜单匹配路由的规则,可以书写正则表达式
  children: [{
    name, // 二级菜单名称
    matchs, // 二菜单匹配规则,匹配到后,侧边栏菜单组会展开
    icon, // 二级菜单图标
    children: [ 
      {
        name, // 三级菜单名称
        path, // 三级菜单路径
        icon,  // 三级菜单图标
        matchs // 三级菜单匹配规则
      }
    ]
  }]
}

页面编写

图标

具体用法参考:https://ice.alibaba-inc.com/component/dynamicicon

图标添加

  1. 寻找图标
  • 访问地址:http://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=803896
  • 给项目添加图标,并生成新的代码
  1. 调整组件:修改./components/Icon/index.js, 更新属性css
import DynamicIcon from 'dynamic-icon';

export default DynamicIcon.create({
  fontFamily: 'iconfont',
  prefix: 'icon',
  css: '//at.alicdn.com/t/font_803896_d86r8cl533.css'
});

图标使用

  1. 引入组件
import CustomIcon from './components/Icon'   // 具体路径根据实际情况确定
  1. 使用图标
// size: 图标大小
// type: 图标名称
<CustomIcon size="small" type="qrcode" />

表单

  1. 引入表单组件
import CustomForm from './components/CustomForm'
  1. 使用自定义表单
// value: 表单的值
// onChange: 表单值变化时触发的事件
// 表单数据
<CustomForm value={{}} onChange={()=>{}} formData={formData}>
  1. 表单数据formData的定义(表单使用,如有疑问请咨询@丁点)
[
  {
    name: 'a', // 表单对应的字段名
    width: '100%', // (可选)表单宽度,默认为100%
    type: 'NormalInput', // 表单类型
    title: '供应商名称', // 表单标题
    subTitle: '填写营业执照一致的供应商名称', // 表单副标题
    validateProps: { required: true, message: '必填' }, // 表单验证规则
    formProps: { // 表单属性
      addonAfter: '平米',
      placeholder: '请填写',
      style: {
        width: '45%'
      }
    }
  }
]

其他组件

CustomSteps组件的使用

|参数|说明|默认值| |:--|:--|:--| |currentStep|当前步骤|0| |buttonActions|按钮配置,具体配置参考Ice的Button组件|-| |className|类名|-| |children|子项|-|

CustomSteps.Content

|参数|说明|默认值| |:--|:--|:--| |title|步骤名称|-| |status|步骤状态|-| |disabled|是否禁用|-| |children|子项|-|

<CustomSteps
  // 交互按钮配置
  buttonActions={[
    {
      label: '上一步',
      onClick: () => {
        console.log('up');
        this.setState({ currentStep: this.state.currentStep - 1 });
      }
    }
  ]}
  // 当前步骤
  currentStep={this.state.currentStep}
>
  {/* title: 步骤名称, status: 步骤状态 */}
  <CustomSteps.Content title="123" status="finish">
    {/* 在这里书写每一步的content */}
    <div style={{ height: 200 }}>content</div>
  </CustomSteps.Content>
</CustomSteps>