open-index/open-npm huggingface dataset:
npm package: @koala/yibin-ui
Description: 宜宾大脑主题定制
Latest version: 0.2.60

# @koalayibin-ui使用文档

## 1、package.json

```java
"koala-header": "2.0.6", // 需删除
```

安装最新@koala/yibin-ui：

```javascript
npm i @koala/yibin-ui -S
```

vue.config.js配置需增加：

```javascript
transpileDependencies: ['@koala/yibin-ui'],
```

## 2、main.js 和 postcss.config.js

```java
// 注释掉原来的styles，（注意如果有使用，请单独提出来）
// import '@/styles/index.scss'

import YibinUI from '@koala/yibin-ui'
Vue.use(YibinUI)
import '@koala/yibin-ui/dist/style.css'

// 去掉flexible
// import 'amfe-flexible'
    
// 使用mini大小
Vue.use(ElementUI, { size: 'mini' })
// 直接修改ElementUI默认值    
ElementUI.Dialog.props.appendToBody.default = true
```

postcss.config.js 去掉 **postcss-pxtorem** 的配置

## 3、src\views\layout\index.vue

1. 因为是全局引入的，使用的时候不用再导入了 koala-header、koala-side

2. 面包屑改为：

   ```ja
   <template #sub-header-left>
     <el-breadcrumb v-if="!$route.meta.hideBread" separator="/">
       <template v-for="route in $route.matched">
         <el-breadcrumb-item
           v-if="route.path != ''"
           :key="route.path"
           :to="{ path: route.path }"
         >
           {{ route.meta.title }}
         </el-breadcrumb-item>
       </template>
     </el-breadcrumb>
   </template>
   ```

   3. koala-side 组件 :*activeIndex*="activeRoute"，activeRoute: ''  初始值为空

## 4、弹窗按钮

新建：取消，确认。

编辑：取消，保存。

查看/只读：关闭

## 5、Dialog组件：src\components\KL-Dialog\index.vue

append-to-body 默认值改为true，因为可能出现模态框背景遮住弹窗的情况：

```javascript
ElementUI.Dialog.props.appendToBody.default = true
```

## 6、表单

1. *class*="no-mb" 可以去掉表格默认margin-bottom
2. 一般只有一个primary按钮
3. search-form 和 普通form要分开，主要是label颜色不同
4. el-table.**table-rows-10** 10行的标准高度

## 7. 接口对接

1. 删除localStorage：isAuth appKey

2. 增加以下代理，并且把所有代理改为网关地址，除了websocket：

   ```javascript
   proxy: {
     '/access': {
       target: 'http://10.10.8.5:32001',
       changeOrigin: true
     },
   }
   ```

3. 需要去掉之前自动跳转到sso页面的逻辑，在 router.beforeEach 和 http.js 里面

4. header增加事件@loginSuccess，所有的接口调用必须在 @loginSuccess的回调里面，不然会导致接口获取不到token

5. 获取当前的routes: <koala-side> 组件 @*getRoutes*="handleGetRoutes"

## 8. 文件上传组件 koala-upload 参数说明

| 参数                        | 说明                                                         |
| --------------------------- | ------------------------------------------------------------ |
| scene                       | 场景                                                         |
| auto-upload                 | 是否自动上传                                                 |
| triggerUpload               | 如果auto-upload为true，需要传一个随机数来触发上传动作        |
| @getPercent                 | 1、如果是单文件，返回百分比数值，如：56<br />2、如果是多文件，返回已上传文件的个数 |
| @getFileId                  | 1、如果是单文件，返回该文件的id<br />2、如果是多文件，返回已上传文件的id列表，如 ['id1', 'id2', ...] |
| @getSuccessList             | 返回成功上传文件的列表，里面包含文件id：<br />示例：[{id: '', name: '', size: '', status: '', uid: '', url: ''}] |
| @*getErrorList*             | 返回成功上传文件的列表，不包含文件id                         |
| startUpload(customFileList) | customFileList: [{name: '', size: '', status: 'ready', raw: File}] |
npm package: @koala123/uran-ui
Description: UI module for Uran
Author: Uran Team
Latest version: 1.0.0

# @koala123/uran-ui 组件说明

> 将固定成形的公共组件提取到 @koala123/uran-ui 组件库中，并发布到 npm,解决代码冗余问题
> 组件预览：[uran-ui](https://rainbow853.github.io/uran-ui)

# 1.下载公共组件

```Bash
npm install @koala123/uran-ui --save
```

# 2.在 src/main.js 中引入

```typescript
import uranUI from '@koala123/uran-ui';
import "@koala123/uran-ui/css";

import { createApp } from "vue";
const app = createApp(App);
app.use(pinia)
  .use(uranUI, {
    // 全局配置项
    // 是否加载字体图标
    loadIconfont: true,
    // imageData为相机对象grabImage的返回值（自定义，这里假定为imageData）
    grabImageSuccessCB(imageData: ImageData) {
      ElMessageBox.confirm(
        `图像采集完成，是否下载？`,
        '图像下载',
      ).then(() => {
        downloadImageData(imageData);
      })
    },
  })
  .mount("#app");
```

# 3.包含的组件
`npm run docs:dev` 查看或者预览网站[uran-ui](https://rainbow853.github.io/uran-ui)

# 4.组件文档
>[https://kaolayouran.feishu.cn/docx/QZzxdBRJgo4xzVxCUmwcxuyPnnc](https://kaolayouran.feishu.cn/docx/QZzxdBRJgo4xzVxCUmwcxuyPnnc)

# 5 图标
> 注意：此项目未加载图标库，需要各项目自行加载   
> 
KLIcon依赖图标（Symbol）：https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3938294