# 参考文档

## 一、使用

### 1、示例

```
// 第一步：安装（版本号，从构建中查看）
yarn add @kweaver-ai/components@<版本号>

// 第二步：引入
// 根据具体情况，决定使用 full.js 还是 min.js，区别见2.5
import { apis } from '@kweaver-ai/components';
import '@kweaver-ai/components/dist/dip-components.full.css';

// 设置dip-components所需的信息
apis.setup({
    protocol,
    host,
    port,
    lang,
    getToken,
    prefix: '',
    theme,
    popupContainer,
    refreshToken,
    onTokenExpired,
});

// 第三步：使用组件
import { apis, components } from '@kweaver-ai/components';

const unmount = apis.mountComponent(
    components.AccessorPicker,
    {
        onSelect: (selections: any) => {
            // 确定选中
        },
        onCancel: () => {
            // 取消，这里需要注销组件
            unmount();
        },
        },
        accessorPickerRef.current // 或者 document.getElementId('xxx')
    );
}

```

### 2、组件

- AccessorPicker：用户组织选择弹窗

- Preview：预览。目前仅支持pdf预览

- uploadFn：本地上传

- selectFn：选择文档中心文件

- PermConfig：权限配置

- Authorization：授权

## 二、开发

### 2.1、安装依赖库

`yarn install`

### 2.2、运行

`yarn start`

### 2.3、页面访问

http://localhost:2000/demo.html

### 2.4、如何查看某一个组件的效果

在 src/pages/pages/Demo/index.tsx 中引入组件，然后访问 http://localhost:2000/demo.html

### 2.5、如何打包

`yarn build`

执行后，会生成dist目录，此目录下会生成dip-components.full.js 和 dip-components.min.js。

其中dip-components.min.js不包含 react、react-dom、lodash，适合已安装react、react-dom v18 + lodash v4的产品使用。

dip-components.full.js包含所有的库，像 vue 框架可使用此文件。

后续，产物会加上 ES Modules（ESM）格式的。

## 三、构建 & 推送到npm源

后续
