# hub-baai-lib

社区论文评论区封装为插件

## 目录结构
发布到npm的插件通常遵循一定的项目目录结构，以确保代码的组织和可维护性。以下是一个典型的npm插件项目目录结构示例：

```
my-npm-plugin/
├── src/
│   ├── index.js        # 插件的主要源代码文件
│   └── ...             # 其他源代码文件和目录
├── lib/                # 编译后的代码，用于发布到npm（如果使用了编译步骤）
├── test/               # 测试代码
│   ├── unit/           # 单元测试
│   └── integration/    # 集成测试
├── examples/           # 插件使用示例
├── docs/               # 文档
├── .gitignore          # Git忽略文件
├── .npmignore          # npm忽略文件（如果有需要忽略的文件或目录）
├── package.json        # npm包描述文件
├── README.md           # 项目README，通常包含安装、使用说明等
├── LICENSE             # 许可证文件
└── ...                 # 其他配置文件，如.babelrc, .eslintrc, etc.
```

这里是每个部分的详细说明：

- `src/`: 包含插件的源代码。这是你开发插件时主要工作的地方。
- `lib/`: 如果你的插件需要编译（例如，使用Babel将ES6代码转换为ES5），编译后的代码通常放在这个目录。这个目录的内容是实际发布到npm的代码。
- `test/`: 包含所有测试代码，可能会进一步分为`unit/`（单元测试）和`integration/`（集成测试）。
- `examples/`: 包含一些示例项目或代码，展示如何使用这个插件。
- `docs/`: 包含项目文档，如API参考、开发者指南等。
- `.gitignore`: 指定Git版本控制要忽略的文件和目录。
- `.npmignore`: 指定发布到npm时要忽略的文件和目录。如果没有这个文件，`.gitignore`会被npm用作默认的忽略文件。
- `package.json`: 描述你的插件和其依赖的文件。这是npm使用的主要配置文件。
- `README.md`: 项目的README文件，通常在npm的包页面上显示。它应该包含关于插件的描述、安装指南、使用示例和任何其他重要信息。
- `LICENSE`: 包含项目许可证的文本。这对于开源项目来说是非常重要的。

请注意，这只是一个示例结构，具体的项目结构可能会根据你的具体需求和偏好而有所不同。重要的是保持代码的组织性和清晰的文档，以便其他开发者可以轻松地使用和贡献你的插件。


## 示例预览
```
# 安装依赖
npm install
# 启动
npm run dev
```


## npm 打包发布

切换到项目根目录下，执行以下命令
```
# 打包
npm run package
```

修改package.json 文件
```
"version": "1.0.0",
"description": "插件描述",
"main": "dist/hub-baai-lib.umd.min.js", // 指定main属性，作为入口文件,dist目录下的 .umd.min.js文件
"keywords": ["标签1", "标签2"],
"author": "作者",
"license": "ISC",
"private": false,  // 私有属性要改成 false
```

发布到 npm 库 https://www.npmjs.com/
```
npm publish
```

注意⚠️：更新版本发布，记得修改 package.json 中的 version 版本号


## 其他项目使用

使用方法跟element-ui类似，在main.js中引入，全局注册
```
import HubBaaiLib from 'hub-baai-lib';
import 'hub-baai-lib/dist/hub-baai-lib.css';
Vue.use(HubBaaiLib);
```

页面中使用

### 评论回复列表
```
<discuss ref="ref_discuss" :id="post_id" :data="discussList"
      avatar_url="https://hub-avatar.baai.ac.cn/sso-user/82882.png" :isLogin="true" @go2Login="go2Login"
      @getPostId="getPostId" @handleSubmit="handleSubmit" />

参数：
    id：主id
    data：评论列表数据
    avatar_url：登录人头像地址
    isLogin：是否登录，登录后才能评论

事件
    go2Login：登录后才能评论，未登录执行登录操作
    getPostId：当id为空时，执行获取id的操作
    handleSubmit：发布评论事件。发布成功后，执行this.$refs.ref_discuss.updateList(res)隐藏回复框，并刷新数据
```

### 评论列表
```
<discuss-list :list="list" v-if="list.length" :replyDisabled="replyDisabled"  :isLogin="isLogin" @toggleAttribute="toggleAttribute"/>
参数：
    list：评论列表数据
    replyDiabled：默认false，true可以禁用回复功能
    isLogin：是否登录，登录后才能评论
事件
    toggleAttribute：评论列表二级展开收起切换，敏感内容展示隐藏切换
```