xinxuan-backstage-scaffold v0.0.1

安装

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
• 给项目添加图标，并生成新的代码

2. 调整组件：修改./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'   // 具体路径根据实际情况确定

2. 使用图标

// size: 图标大小
// type: 图标名称
<CustomIcon size="small" type="qrcode" />

表单

1. 引入表单组件

import CustomForm from './components/CustomForm'

2. 使用自定义表单

// value: 表单的值
// onChange: 表单值变化时触发的事件
// 表单数据
<CustomForm value={{}} onChange={()=>{}} formData={formData}>

3. 表单数据formData的定义（表单使用，如有疑问请咨询@丁点）

[
  {
    name: 'a', // 表单对应的字段名
    width: '100%', // （可选）表单宽度，默认为100%
    type: 'NormalInput', // 表单类型
    title: '供应商名称', // 表单标题
    subTitle: '填写营业执照一致的供应商名称', // 表单副标题
    validateProps: { required: true, message: '必填' }, // 表单验证规则
    formProps: { // 表单属性
      addonAfter: '平米',
      placeholder: '请填写',
      style: {
        width: '45%'
      }
    }
  }
]

其他组件

CustomSteps组件的使用

CustomSteps.Content

<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>