open-index/open-npm huggingface dataset:
npm package: @fx1422/semi-icons-lab-vue
Description: 基于 Semi Design 的 Vue 3 实验室图标组件库。这些图标是 Semi Design 的实验性图标，提供了更多样化的图标选择。
Latest version: 1.0.0

# @fx1422/semi-icons-lab-vue

基于 Semi Design 的 Vue 3 实验室图标组件库。这些图标是 Semi Design 的实验性图标，提供了更多样化的图标选择。

## 安装

```bash
# 使用 npm
npm install @fx1422/semi-icons-lab-vue

# 使用 yarn
yarn add @fx1422/semi-icons-lab-vue

# 使用 pnpm
pnpm add @fx1422/semi-icons-lab-vue
```

## 使用方法

### 全局注册

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import { SemiIconsLab } from '@fx1422/semi-icons-lab-vue'

const app = createApp(App)
app.use(SemiIconsLab)
app.mount('#app')
```

### 按需引入

```typescript
import { IconLabHome, IconLabUser } from '@fx1422/semi-icons-lab-vue'
```

### 在组件中使用

```vue
<template>
  <div>
    <!-- 使用全局注册的图标 -->
    <semi-icon-lab-home />
    <semi-icon-lab-user />

    <!-- 使用按需引入的图标 -->
    <icon-lab-home />
    <icon-lab-user />
  </div>
</template>

<script setup lang="ts">
import { IconLabHome, IconLabUser } from '@fx1422/semi-icons-lab-vue'
</script>
```

## 图标属性

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| size | number \| string | 16 | 图标大小 |
| color | string | - | 图标颜色 |
| spin | boolean | false | 是否旋转 |
| rotate | number | 0 | 旋转角度 |

## 示例

```vue
<template>
  <div>
    <!-- 基础用法 -->
    <semi-icon-lab-home />
    
    <!-- 自定义大小 -->
    <semi-icon-lab-home :size="24" />
    
    <!-- 自定义颜色 -->
    <semi-icon-lab-home color="#1890ff" />
    
    <!-- 旋转动画 -->
    <semi-icon-lab-home spin />
    
    <!-- 自定义旋转角度 -->
    <semi-icon-lab-home :rotate="90" />
  </div>
</template>
```

## 实验室图标特点

实验室图标是 Semi Design 的实验性图标集合，具有以下特点：

1. 更丰富的图标样式
2. 更现代的视觉设计
3. 更灵活的定制选项
4. 持续更新和优化

## 与标准图标的区别

- 命名规范：所有实验室图标都以 `Lab` 为前缀
- 视觉风格：采用更现代的设计语言
- 使用场景：适合需要独特视觉效果的场景

## 版本兼容

- Vue 3.x
- TypeScript 4.x+

## 相关链接

- [Semi Design 官网](https://semi.design/zh-CN)
- [Semi Design GitHub](https://github.com/DouyinFE/semi-design)
- [Vue 3 文档](https://v3.vuejs.org/)

## 许可证

MIT
npm package: @fx1422/semi-illustrations-vue
Description: 基于 Semi Design 的 Vue 3 插画组件库。提供了一系列精美的插画，可用于空状态、引导页、错误页等场景。
Latest version: 1.0.0

# @fx1422/semi-illustrations-vue

基于 Semi Design 的 Vue 3 插画组件库。提供了一系列精美的插画，可用于空状态、引导页、错误页等场景。

## 安装

```bash
# 使用 npm
npm install @fx1422/semi-illustrations-vue

# 使用 yarn
yarn add @fx1422/semi-illustrations-vue

# 使用 pnpm
pnpm add @fx1422/semi-illustrations-vue
```

## 使用方法

### 全局注册

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import { SemiIllustrations } from '@fx1422/semi-illustrations-vue'

const app = createApp(App)
app.use(SemiIllustrations)
app.mount('#app')
```

### 按需引入

```typescript
import { IllustrationEmpty, IllustrationNoAccess } from '@fx1422/semi-illustrations-vue'
```

### 在组件中使用

```vue
<template>
  <div>
    <!-- 使用全局注册的插画 -->
    <semi-illustration-empty />
    <semi-illustration-no-access />

    <!-- 使用按需引入的插画 -->
    <illustration-empty />
    <illustration-no-access />
  </div>
</template>

<script setup lang="ts">
import { IllustrationEmpty, IllustrationNoAccess } from '@fx1422/semi-illustrations-vue'
</script>
```

## 插画属性

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| width | number \| string | 200 | 插画宽度 |
| height | number \| string | 200 | 插画高度 |
| color | string | - | 插画颜色 |
| style | object | - | 自定义样式 |

## 示例

```vue
<template>
  <div>
    <!-- 基础用法 -->
    <semi-illustration-empty />
    
    <!-- 自定义尺寸 -->
    <semi-illustration-empty :width="300" :height="300" />
    
    <!-- 自定义颜色 -->
    <semi-illustration-empty color="#1890ff" />
    
    <!-- 自定义样式 -->
    <semi-illustration-empty :style="{ margin: '20px' }" />
  </div>
</template>
```

## 常用场景

### 空状态展示

```vue
<template>
  <div class="empty-state">
    <semi-illustration-empty />
    <p>暂无数据</p>
  </div>
</template>

<style scoped>
.empty-state {
  text-align: center;
  padding: 40px;
}
</style>
```

### 错误页面

```vue
<template>
  <div class="error-page">
    <semi-illustration-no-access />
    <h2>访问受限</h2>
    <p>抱歉，您没有权限访问此页面</p>
  </div>
</template>
```

### 引导页面

```vue
<template>
  <div class="guide-page">
    <semi-illustration-success />
    <h2>欢迎使用</h2>
    <p>开始您的旅程吧</p>
  </div>
</template>
```

## 可用插画

Semi Design 提供了丰富的插画资源，包括但不限于：

- 空状态插画（Empty）
- 无权限插画（NoAccess）
- 成功状态插画（Success）
- 错误状态插画（Error）
- 加载状态插画（Loading）
- 网络错误插画（NetworkError）
- 维护状态插画（Maintenance）

## 版本兼容

- Vue 3.x
- TypeScript 4.x+

## 相关链接

- [Semi Design 官网](https://semi.design/zh-CN)
- [Semi Design GitHub](https://github.com/DouyinFE/semi-design)
- [Vue 3 文档](https://v3.vuejs.org/)

## 许可证

MIT
npm package: @fx2000/react-org-chart-next
Description: Simple, high-performance react component for d3 org chart
Author: Daniel Duque
Latest version: 0.2.79

# react-org-chart-next

### Note

This is a fork of @keymastervn/react-org-chart-next that has been customized to fit our needs since the original package appears to be abandoned.
It can be deprecated or private-used by the owner or the organization owner.

### Usage

```
import * as OrgChart from '@fx2000/react-org-chart-next'

...

render() {
  return <OrgChart tree={data} lineType="angle" style={{ height: "100%", width: "100%" }} />
}


```

### Features

- High-performance D3-based SVG rendering
- Lazy-load children with a custom function
- Handle up to 1 million collapsed nodes and 5,000 expanded nodes

### React Props

| **property**      | **type** | **description**                                                       | **example**                                                        |
| ----------------- | -------- | --------------------------------------------------------------------- | ------------------------------------------------------------------ |
| tree              | `Object` | Nested data model with all of the employees in the company (Required) | { "id": 123, "person": { "name": "Fouad Matin" }, "children": [] } |  |
| nodeWidth         | `Number` | Width of the component for each individual (Optional)                 | 180                                                                |
| nodeHeight        | `Number` | Height of the component for each individual (Optional)                | 100                                                                |
| nodeSpacing       | `Number` | Spacing between each of the nodes in the chart (Optional)             | 12                                                                 |
| animationDuration | `Number` | Duration of the animations in milliseconds (Optional)                 | 350                                                                |
| lineType          | `String` | Type of line that connects the nodes to each other (Optional)         | “angle” “curve”                                                    |
| className         | `String` | Define the classes for the root element (Optional)                    | “rc-chart”                                                         |
| style             | `Object` | Define styling for the root element (Optional)                        | { cursor: "move", height: "100%", width: "100%" }                  |
npm package: @fxbar/utils
Description: Utility functions for fxbar packages
Latest version: 0.0.1

# @fxbar/utils

A collection of utility functions for fxbar packages.

## Installation

```bash
npm install @fxbar/utils
# or
yarn add @fxbar/utils
```

## Usage

```typescript
import { noop } from '@fxbar/utils'

// ESM
import { noop } from '@fxbar/utils/dist/index.mjs'

// CommonJS
const { noop } = require('@fxbar/utils')

// UMD
const { noop } = window.fxbar_utils
```

## Development

```bash
# Install dependencies
yarn install

# Run tests
yarn test

# Build
yarn build

# Lint
yarn lint
```

## License

MIT