open-index/open-npm huggingface dataset:
npm package: @icedesign/iceworks-scaffolder
Description: 用于操作项目模板的工具集
Author: 宝码
Latest version: 0.3.0

# @icedesign/iceworks-scaffolder

用于向模板目录添加页面，菜单，路由等功能，提供给 GUI 工具 iceworks 操作项目使用

## 安装

```
npm install @icedesign/iceworks-scaffolder --save
```

## 使用

```js
import Scaffolder from 'iceworks-scaffolder';

const scaffolder = new Scaffolder({
  cwd: 'project_path', // 项目地址
  interpreter: function({ type, message, data }, callback) { // 根据应用进程返回 true/false 表示是否继续
    callback(Boolean)
  };
});
```

## API

- `async createPage({ name: pageNmae, layout, blocks, preview = false })` 创建页面
- `async appendMenu({ name, path: menuPath, icon }, prettierConfig)` 创建菜单
- `async removeMenu({ path: menuPath }, prettierConfig)` 删除菜单
- `async appendRouter({ path: routerPath, component: pageComponentName = '', module: pageModule = '', pagePath, layoutName = '', layoutPath, })` 添加 router
- `async removeRouter({ path: routerPath, pagePath })` 删除 router
- `async removePreviewPage({ menuPath = '/IceworksPreviewPage', routerPath = '/IceworksPreviewPage' } = {})` 移除页面
npm package: @icedesign/icon
Description: 业务中使用到的 icon 集合
Author: ICE Team
Latest version: 0.1.1

---
title: Icon
category: Components
chinese: 业务组件图标
---

## 使用

```jsx
import ReactDOM from 'react-dom'
import IceIcon from '@icedesign/icon';


ReactDOM.render(<IceIcon type="qrcode"/>, mountNode);
```

## Props

|  参数  |    说明    |   类型   |  默认值  |  可选值  |
|-------|-----------|----------|---------|---------|
| type | icon 名称 | string | 无 | 详见 demo |
| size | icon 尺寸 | string | `medium` | `xxs` `xs` `small` `medium` `large` `xl` `xxl` `xxxl` |

## iconfont 项目

http://www.iconfont.cn/showProject?pid=107674
npm package: @icedesign/iconfont
Description: iconfont 
Author: ICE Team
Latest version: 0.1.0

---
title: IceIconfont
category: Components
chinese: ICONFONT
repo: ice-components/ice-iconfont
---

iconfont 

## 安装和升级

```bash
def add @ali/ice-iconfont
```

## 参数（props）

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
|-------|-----|-----|-----|-------|-----|
| value | 回填值 | 否 | array | [] | |
| visible | 是否显示 | 否 | boolean | false | |
| onChange | 数据变动的回调方法。 | 是 | function | | 获取组件数据必填 |

### 参数可选值

visible: true/false
npm package: @icedesign/infinite-card-block
Description: 适用于横向滚动的多数据展示卡片
Latest version: 3.0.1

# infinite-card

简介：横向滚动的卡片展示

适用于横向滚动的多数据展示卡片

![截图](https://unpkg.com/@icedesign/infinite-card-block/screenshot.png)
npm package: @icedesign/infinite-scroll-cell-measurer-block
Description: 无限滚动的表格
Author: ICE Team
Latest version: 3.0.1

# infinite-scroll-cell-measurer

简介：InfiniteScrollCellMeasurer

无限滚动的表格

![截图](https://unpkg.com/@icedesign/infinite-scroll-cell-measurer-block/screenshot.png)
npm package: @icedesign/infinite-scroll-grid-block
Description: 无限滚动的栅格列表
Author: ICE Team
Latest version: 3.0.1

# infinite-scroll-grid

简介：InfiniteScrollGrid

无限滚动的栅格列表

![截图](https://unpkg.com/@icedesign/infinite-scroll-grid-block/screenshot.png)
npm package: @icedesign/info-display-table-block
Description: 两栏信息展示型表格
Author: ICE Team
Latest version: 3.0.1

# InfoDisplayTable

简介：两栏信息展示型表格 



## 效果图
![效果图](https://unpkg.com/@icedesign/info-display-table-block/screenshot.png)
npm package: @icedesign/intro-step-info-block
Description: 简介：简介和步骤条信息组合
Author: ICE Team
Latest version: 3.0.1

# intro-step-info

简介：简介和步骤条信息组合

![截图](https://unpkg.com/@icedesign/intro-step-info-block/screenshot.png)
npm package: @icedesign/intro-with-background-block
Description: 附带背景图片的信息介绍区块
Author: ICE Team
Latest version: 3.0.1

# intro-with-background

简介：附带背景图片的信息介绍

附带背景图片的信息介绍区块

![截图](https://unpkg.com/@icedesign/intro-with-background-block/screenshot.png)
npm package: @icedesign/join-us-block-block
Description: 简介：加入我们
Author: ICE Team
Latest version: 0.1.2

# join-us

简介：加入我们

![截图](https://img.alicdn.com/tfs/TB1L1SQjr_I8KJjy1XaXXbsxpXa-2650-1126.png)
npm package: @icedesign/json-diff-block
Description: 简介：JSON diff 对比
Author: ICE Team
Latest version: 0.1.0

# json-diff

简介：JSON diff 对比

![截图](https://img.alicdn.com/tfs/TB1eIMPjlfH8KJjy1XbXXbLdXXa-1888-852.png)

## 更多

* [使用说明](http://gitlab.alibaba-inc.com/ice/notes/issues/830)
* [开发规范](http://gitlab.alibaba-inc.com/ice/notes/issues/830)
npm package: @icedesign/json-view-block
Description: 支持编辑和展示JSON可视化区块
Author: 思忠
Latest version: 3.0.1

# json-view

简介：JSON 可视化渲染

支持编辑和展示 JSON 可视化区块

![截图](https://unpkg.com/@icedesign/json-view-block/screenshot.png)
npm package: @icedesign/label
Description: 创建标签组件用来突出所要显示的信息
Latest version: 1.0.6

---
title: Label
category: Components
chinese: 标签组件
---

创建标签组件用来突出所要显示的信息

## 参数（props）

| 参数名 | 说明 | 必填 | 类型 | 默认值| 备注 |
|-------|-----|-----|-----|-------|-----|
| status | 不同状态 | 否 | string | | |

### 属性可选值

- status: `default || primary || success || info || warning || danger`
npm package: @icedesign/latest-activity-block
Description: 适用于图表和列表组合的活动展示场景
Latest version: 3.0.1

# latest-activity

简介：活动列表

适用于图表和列表组合的活动展示场景

![截图](https://unpkg.com/@icedesign/latest-activity-block/screenshot.png)
npm package: @icedesign/layout
Description: 提供页面框架性的 layout 组件
Latest version: 1.0.9

---
title: Layout
category: Components
chinese: 页面布局
cols: 1
---

提供页面框架性的 Layout 以及基础区块布局，除了 `Layout.Main` 必须以外, 其它的组件在页面中可以按需自由搭配使用。

## Layout

`import Layout from '@icedesign/layout';`

页面布局，一个页面有且只能有一个 `Layout` 组件。

### 参数（props）

| 参数名      | 说明           | 类型      | 默认值     |
|:---------|:-------------|:--------|:--------|
| fixable | 开启布局模块滚动跟随模式 | boolean | `false` |

`fixable` 一旦设置为 `true` 则整个页面所有模块都固定高度，内容区域不可滚动。子组件通过 `scrollable` props 使其可滚动，以此实现主体内容滚动，其余模块 fixed 的效果。

## Layout.Section

辅助布局组件，会创建 100% 宽度的一整行。当某一块区域需要两个模块左右排列，则需要使用 `Layout.Section` 组件包裹。

如：

`````html
<Layout.Section>
  <Layout.Aside />
  <Layout.Main />
</Layout.Section>
`````

### 参数（props）

| 参数名        | 说明                                        | 类型      | 默认值     |
|:-----------|:------------------------------------------|:--------|:--------|
| scrollable | 区域可滚动 *(`<Layout fixable={true} />` 下可用)* | boolean | `false` |

## Layout.Header

顶部布局，默认 flex 布局，并且内部元素垂直居中对齐，可通过 style 属性修改。

### 参数（props）

| 参数名        | 说明            | 类型     | 默认值      |
|:-----------|:--------------|:-------|:---------|
| type      | 配置皮肤色 | string | normal |

- type: none(继承父元素的背景色), normal，primary，secondary

## Layout.Aside

侧边栏，根据嵌套顺序，可左右布局。

### 参数（props）

| 参数名   | 说明            | 类型            | 默认值   |
|:------|:--------------|:--------------|:------|
| type | 配置Aside 皮肤色 | string        | -     |

## Layout.Main

### 参数（props）

| 参数名        | 说明                                        | 类型      | 默认值     |
|:-----------|:------------------------------------------|:--------|:--------|
| scrollable | 区域可滚动 *(`<Layout fixable={true} />` 下可用)* | boolean | `false` |

主体内容。

## Layout.Footer

页脚布局。

### 参数（props）

| 参数名   | 说明            | 类型            | 默认值   |
|:------|:--------------|:--------------|:------|
| type | 配置Aside 皮肤色 | string        | -     |
npm package: @icedesign/layout-builder
Description: --- title: LayoutBuilder category: Components chinese: layout生成器 repo:  ---
Author: ICE Team
Latest version: 0.4.1

---
title: LayoutBuilder
category: Components
chinese: layout生成器
repo: 
---

## 安装和升级

```bash
npm install @icedesign/layout-builder -S
```

## 基础组件

- `<PreviewLayout />`
- `<BasicForm />`
- `<HeaderForm />`
- `<AsideForm />`
- `<FooterForm />`

##### `<PreviewLayout />` 使用方式

```jsx
import { PreviewLayout } from '@icedesign/PreviewLayout';

const layoutConfig = {
  // 可选，默认使用 BasicLayout
  name: '',

  // 是否开启自定义layout名称
  enableName: false, // 默认为 false， 可选 true || false

  // 是否开启自定义主题
  enableTheme: false, // 默认为 false， 可选 true || false

  // 必须，指定项目目录
  directory: '',

  // 必须 fluid-layout || boxed-layout
  layout: 'fluid-layout',

  // 主题配置
  themeConfig: {
    theme: 'dark', // 必须 dark || light
    primaryColor: 'red', // 可选
    secondaryColor: '#3080fe', // 可选
  },

  // 导航配置
  header: {
    position: 'static',
    width: 'full-width',
    enabled: true,
  },

  // 侧边栏配置
  aside: {
    position: 'embed-fixed',
    mode: 'vertical',
    width: 200,
    collapsed: false,
    enabled: true,
  },

  // 页脚配置
  footer: {
    position: 'fixed',
    width: 'full-width',
    enabled: true,
  },
};

<PreviewLayout
  value={layoutConfig} // 布局配置
  scale={0.6} // 缩放比例
  width={960} // 预览宽度
  height={720} // 预览高度
/>;
```

##### `<BasicForm />` 使用方式

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BasicForm } from '@icedesign/layout-builder';

class App extends Component {
  state = {
    layoutConfig: {
      name: 'CustomLayout',
      directory: 'layouts',
      layout: 'fluid-layout',
      themeConfig: {
        theme: 'dark',
        primaryColor: 'red',
        secondaryColor: '#3080fe',
      },
    },
  };

  onChange = (value) => {
    console.log('表单回调:', value);
    this.setState({
      layoutConfig: value,
    });
  };

  render() {
    const { layoutConfig } = this.state;
    const formProps = {
      value: layoutConfig,
      onChange: this.onChange,
    };
    return (
      <div>
        <BasicForm {...formProps} />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```

注：`<BasicForm>`、`<HeaderForm>`、`<AsideForm>`、`<FooterForm>` 使用方式一致

## 生成接口

```jsx
const { generatorLayout } = require('@icedesign/layout-builder/utils)';

const CONFIG = {
  name: 'CustomLayout',
  directory: '',
  themeConfig: {
    theme: 'dark',
    primaryColor: 'red',
    secondaryColor: '#3080fe',
  },
  layout: 'fluid-layout',
  header: {
    position: 'static',
    width: 'full-width',
    enabled: true,
  },
  aside: {
    position: 'embed-fixed',
    mode: 'vertical',
    width: 200,
    collapsed: false,
    enabled: true,
  },
  footer: {
    position: 'fixed',
    width: 'full-width',
    enabled: true,
  },
};

generatorLayout(CONFIG)
  .then((res) => {
    console.log('生成布局成功:', res ); // 生成布局成功后返回布局的依赖： { res: [ '@icedesign/base', ...] }
  })
  .catch((err) => {
    console.log('生成布局失败:', err);
  });
```