open-index/open-npm huggingface dataset:
npm package: @kdcloudjs/create-kdesign-app
Description: KDesign-Pro 命令行工具
Latest version: 1.0.6

# Create-KDesign-App

## 安装命令行

开始开发之前，请您先确保已经在本地安装好了 `node`，然后运行以下命令安装命令行工具：

```shell
$ npm i -g @kdcloudjs/create-kdesign-app
```

## 初始化脚手架

我们使用刚才安装的 create-kdesign-app 来快速初始化脚手架，并提供多种模板
- umi3：使用umi3为基础框架，兼容ie11
- umi4：使用umi4为基础框架，不兼容ie11
- simple：使用umi4为基础框架，并简化典型页面及功能
- plugin-vscode：vscode 插件模板

```shell
$ create-kdesign-app                     
$ #? Please input the project name： my-app   # 输入项目名称
$ #? What template do you need? umi3...       # 选择模板
$ Initializing the KDesign App                # 开始初始化项目
$ Receiving objects stage 100% complete       # 等待接收完成

$ Initializing Done                           # 完成
```

安装依赖：

```shell
# 注：umi3默认使用npm, umi4默认使用pnpm, 可在config/config.ts中修改
$ cd my-app && npm install
```

## 开发

安装好脚手架后就可以开始开发

```shell
$ npm run start
```

## 浏览器兼容性

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
| --------- | --------- | --------- | --------- | --------- | --------- | --------- |
| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions

## License
Create-KDesign-App 使用了 Apache License, Version 2.0. 详细license 请查看 [LICENSE](./LICENSE)
npm package: @kdcloudjs/kd-charts
Description: KDesign Charts 是基于金蝶的企业级设计系统 KDesign 实现的echarts皮肤，简单易用。
Latest version: 1.1.6

---
order: 0
title: 介绍
---

# KDesign Charts

KDesign Charts 是基于金蝶的企业级设计系统 KDesign 实现的 echarts 皮肤，简单易用。

## 特性

- 提供开箱即用的 丰富的图表类型。
- 基于 ECharts 开发，强劲的渲染引擎。
- 优雅专业的可视化设计。
- 全面的主题化定制。

## 兼容环境

- 现代浏览器和 IE11,移动端

## 安装

### 使用 npm 或 yarn 安装

```bash
$ npm install @kdcloudjs/kd-charts  -S
# 或者
$ yarn add @kdcloudjs/kd-charts -S
```

## 示例

```js
import React from 'react';
import * as echarts from 'echarts';
import ReactECharts from 'echarts-for-react';
import defaultTheme from '@kdcloudjs/kd-charts/theme/echarts-theme-default.js';
const DefaultOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
    name: '单据消息订阅',
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      name: '生活费',
    },
  ],
};

function kcharts() {
  echarts.registerTheme('defaultTheme', defaultTheme);
  return (
    <div>
      <ReactECharts
        option={DefaultOption}
        theme={'defaultTheme'}
        style={{ height: 320 * 2 + 'px' }}
      />
    </div>
  );
}

export default kcharts;
```

### 浏览器引入

在浏览器中使用 `script` 和 `link` 标签直接引入文件。

使用：

```html
<script src="echarts.js"></script>
<!-- 引入 vintage 主题 -->
<script src="https://unpkg.com/@kdcloudjs/kd-charts@1.1.0/dist/echarts-theme-default.js"></script>
<script>
  // 第二个参数可以指定前面引入的主题
  var chart = echarts.init(document.getElementById('main'), 'vintage');
  chart.setOption({
      ...
  });
</script>
```

## License

KDesign Charts 使用了 Apache License, Version 2.0. 详细 license 请查看 [LICENSE](https://github.com/kdcloudone/kd-charts/blob/master/LICENSE)
npm package: @kdcloudjs/kd-visualize
Description: 可视化脚手架
Latest version: 1.2.2

# kd-visualize
可视化脚手架

## 功能介绍

以 px 作为开发单位，适用于各种大屏幕的可视化项目，包括且不限于：

- 1920 x 1080（PC 电脑）
- 3840 x 2160（电视）
- 7680 x 2160（270 大屏）

在等比例屏幕上通过同比例缩放来适配屏幕。

  <a href="https://charts.kingdee.design/">
    <img width="500" src="https://charts.kingdee.design/charts/demo/infor_g.gif">
  </a>



### 使用方法

#### 安装
```bash
npm i @kdcloudjs/kd-visualize -g
```
#### 使用
```bash
kd-visualize create xxx(项目名称)
```
npm package: @kdcloudjs/kdesign-icons
Description: React components of Kdesign Icons collection
Author: kdesign team
Latest version: 1.1.3

# `KDesign Icons For React`

[![NPM version](https://img.shields.io/npm/v/@kdcloudjs/kdesign-icons.svg?style=flat)](https://www.npmjs.com/package/@kdcloudjs/kdesign-icons) [![NPM downloads](https://img.shields.io/npm/dm/@kdcloudjs/kdesign-icons?style=flat)](https://www.npmjs.com/package/@kdcloudjs/kdesign-icons)

KDesign icons是基于金蝶的企业级设计系统Kdesign实现的一套图标组件库，提供超过1400+的SVG图标，按需加载。更多图标请前往KDesign图标资源库。 https://kingdee.design/resource/iconpage

## Install

```bash 
yarn add @kdcloudjs/kdesign-icons
```

## Usage

```ts
import {ArrowRightSolid,ArrowLeftSolid,Loading} from '@kdcloudjs/kdesign-icons'

//example
<ArrowRightSolid />
<ArrowLeftSolid size={24} fill="#5582f3" /> 
<Loading spin />
```
查找或copy图标组件标签可跳转至iconpage https://kingdee.design/resource/iconpage
## Props

|    prop	 | description  | type  | default | note |
| ---------- | --- | --- | --- | --- |
| size |  图标的大小 | string &#124; number |  '1em' |
| fill |  图标的颜色 | string |  'currentColor' |
| spin |  是否有旋转动画 | boolean | false |
| rotate | 图标旋转角度 | number | 0 |
npm package: @kdcloudjs/kdesign-icons-vue
Description: Vue components of Kdesign Icons collection
Author: kdesign team
Latest version: 1.1.3

# `KDesign Icons For Vue`

[![NPM version](https://img.shields.io/npm/v/@kdcloudjs/kdesign-icons-vue.svg?style=flat)](https://www.npmjs.com/package/@kdcloudjs/kdesign-icons-vue) [![NPM downloads](https://img.shields.io/npm/dm/@kdcloudjs/kdesign-icons-vue?style=flat)](https://www.npmjs.com/package/@kdcloudjs/kdesign-icons-vue)

KDesign icons是基于金蝶的企业级设计系统Kdesign实现的一套图标组件库，提供超过1400+的SVG图标，按需加载。更多图标请前往KDesign图标资源库。 https://kingdee.design/resource/iconpage

## Install

```bash 
yarn add @kdcloudjs/kdesign-icons-vue
```

## Usage

``` js
import {ArrowRightSolid,ArrowLeftSolid,Loading} from '@kdcloudjs/kdesign-icons-vue'

//example
<arrow-right-solid />
<arrow-left-solid size="24" fill="#5582f3" />
<loading spin />
```
查找或copy图标组件标签可跳转至iconpage https://kingdee.design/resource/iconpage
## Props

|    prop	 | description  | type  | default | note       |
| ---------- | ------------ | ----- | ------- | --------- |
|   size     |  图标的大小 | string &#124; number |  '1em' | |
|   fill     |  图标的颜色 | string |  'currentColor' | |
|   spin     |  是否有旋转动画 | boolean | false | |
|   rotate   | 图标旋转角度 | number | 0 | |