npm package: @kbapp/web-components
Description: > 开吧 Web Components 组件库，提供帖子列表和发帖功能
Latest version: 0.0.6-alpha.0

# @kbapp/web-components

> 开吧 Web Components 组件库，提供帖子列表和发帖功能

## 框架支持

Web Components 是浏览器原生支持的组件标准，因此可以在任何现代前端框架中使用，包括：

- **React**
- **Vue 2**
- **Vue 3**
- **Angular**
- **原生 JavaScript**

## 安装

npm:

```bash
npm i @kbapp/web-components
```

## 使用方式

### ES 模块方式

```html
<div id="app">
    <kb-note-list style="--1px: 1px" thread-key="由开吧提供"></kb-note-list>
    <kb-note-create class="note-create" thread-key="由开吧提供"></kb-note-create>
</div>

<script type="module">
    import { NoteList, NoteCreate, openPostEditorCreateNote } from '@kbapp/web-components'

    // 防止重复注册组件
    if (!customElements.get('kb-note-list')) {
        // 注册自定义组件,组件名开发者自定义
        customElements.define('kb-note-list', NoteList)
    }

    if (!customElements.get('kb-note-create')) {
        customElements.define('kb-note-create', NoteCreate)
    }

    // 使用 openPostEditorCreateNote 方法唤起发帖器
    function openPostEditor() {
        openPostEditorCreateNote({
            threadId: '由开吧提供'
        })
    }
</script>
```

### Script 标签方式

```html
<div id="app">
    <kb-note-list style="--1px: 1px" thread-key="由开吧提供"></kb-note-list>
    <kb-note-create class="note-create" thread-key="由开吧提供"></kb-note-create>
</div>

<script src="https://unpkg.com/@kbapp/web-components@0.0.6-alpha.0"></script>
<script>
    // 通过全局变量 kbWebComponents 访问
    const { NoteList, NoteCreate, openPostEditorCreateNote } = kbWebComponents

    if (!customElements.get('kb-note-list')) {
        customElements.define('kb-note-list', NoteList)
    }

    if (!customElements.get('kb-note-create')) {
        customElements.define('kb-note-create', NoteCreate)
    }

    // 使用 openPostEditorCreateNote 方法唤起发帖器
    function openPostEditor() {
        openPostEditorCreateNote({
            threadId: '由开吧提供'
        })
    }
</script>
```

## 测试页面

[https://unpkg.com/@kbapp/web-components@latest/examples/index.html](https://unpkg.com/@kbapp/web-components@latest/examples/index.html)

## 组件说明

### kb-note-list

> 渲染帖子列表组件

**属性**：
- `thread-id`：板块 ID（与 thread-key 二选一）
- `thread-key`：板块 Key（与 thread-id 二选一）

### kb-note-create

> 发帖按钮组件

**属性**：
- `thread-id`：板块 ID（与 thread-key 二选一）
- `thread-key`：板块 Key（与 thread-id 二选一）

## 暴露方法

### openPostEditorCreateNote

> 唤起发帖器并发帖的方法，是 NoteCreate 组件的替代品

**参数**：
- `threadId`：板块 ID（与 threadKey 二选一）
- `threadKey`：板块 Key（与 threadId 二选一）

**使用示例**：

```javascript
import { openPostEditorCreateNote } from '@kbapp/web-components'

// 使用 threadId
openPostEditorCreateNote({
    threadId: '由开吧提供'
})

// 或使用 threadKey
openPostEditorCreateNote({
    threadKey: 'example-thread-key'
})
```

## 样式设置

组件内部尺寸基于 `--1px` 变量计算，可以通过设置该变量来自定义组件大小

### 1. 固定 1px

```html
<kb-note-list style="--1px: 1px" thread-key="由开吧提供"></kb-note-list>
```

### 2. 等比例放大（基于 375px 设计稿）

```html
<kb-note-list style="--1px: calc(100vw/375)" thread-key="由开吧提供"></kb-note-list>
```

### 3. 使用 rem 方案

如果你的项目采用 rem 方案，可以将 `--1px` 设置为你的 1px 对应的 rem 值：

```html
<kb-note-list style="--1px: 0.01rem" thread-key="由开吧提供"></kb-note-list>
```

## 示例

完整示例：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Components 示例</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        
        .note-create {
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <h1>开吧 Web Components 示例</h1>
    
    <div id="app">
        <kb-note-list style="--1px: 100vw/375" thread-key="由开吧提供"></kb-note-list>
        <kb-note-create style="--1px: 100vw/375" class="note-create" thread-key="由开吧提供"></kb-note-create>
    </div>

    <button onclick="openPostEditor()">使用方法唤起发帖器</button>

    <script type="module">
        import { NoteList, NoteCreate, openPostEditorCreateNote } from '@kbapp/web-components'

        if (!customElements.get('kb-note-list')) {
            customElements.define('kb-note-list', NoteList)
        }

        if (!customElements.get('kb-note-create')) {
            customElements.define('kb-note-create', NoteCreate)
        }

        window.openPostEditor = function() {
            openPostEditorCreateNote({
                threadId: '由开吧提供'
            })
        }
    </script>
</body>
</html>
```