From 02f1e88459c79b3a5c88582f18f1488a5a4a15f6 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Fri, 5 May 2023 19:02:03 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=A4=B4=E5=83=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E9=BB=98=E8=AE=A4=E5=AE=BD=E9=AB=98;=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=81=8A=E5=A4=A9=E6=B0=94=E6=B3=A1=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Readme.md               |   4 +-
 src/avatar/index.js     |   2 +
 src/chatbubble/index.js | 121 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 125 insertions(+), 2 deletions(-)
 create mode 100644 src/chatbubble/index.js

diff --git a/Readme.md b/Readme.md
index c6dfc94..67df885 100644
--- a/Readme.md
+++ b/Readme.md
@@ -16,7 +16,7 @@
 
 - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
 
-### 开发进度 && 计划 (36/54)
+### 开发进度 && 计划 (37/54)
 
 - [x] `wc-card` 卡片组件
 - [x] `wc-space` 间隔组件
@@ -67,7 +67,7 @@
 - [ ] `wc-tag` 标签组件
 - [ ] `wc-tooltip` 文字提示组件
 - [x] `wc-popconfirm` 气泡确认框组件
-- [ ] `wc-chatbox` 聊天气泡组件
+- [ ] `wc-chatbubble` 聊天气泡组件
 - [x] `wc-divider` 分割线组件
 - [ ] `wc-table` 表格组件
 - [ ] `wc-result` 结果反馈组件
diff --git a/src/avatar/index.js b/src/avatar/index.js
index c7ec559..583b6ca 100644
--- a/src/avatar/index.js
+++ b/src/avatar/index.js
@@ -18,6 +18,8 @@ class Avatar extends Component {
     css`
       :host {
         display: inline-flex;
+        width: 32px;
+        height: 32px;
         border-radius: 4px;
       }
 
diff --git a/src/chatbubble/index.js b/src/chatbubble/index.js
new file mode 100644
index 0000000..2b2c289
--- /dev/null
+++ b/src/chatbubble/index.js
@@ -0,0 +1,121 @@
+/**
+ * {聊天消息气泡组件}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/05/05 14:56:34
+ */
+import { css, html, Component } from '@bd/core'
+
+import '../avatar/index.js'
+
+class Bubble extends Component {
+  static props = {
+    type: 'text',
+    content: '',
+    avatar: ''
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        font-size: 14px;
+        color: var(--color-dark-1);
+      }
+
+      .container {
+        display: flex;
+        width: 100%;
+        margin-top: 16px;
+
+        .content {
+          position: relative;
+          margin-left: 16px;
+          padding: 8px 16px;
+          word-break: break-word;
+          border-radius: 6px;
+          background: #fff;
+
+          a,
+          img {
+            -webkit-user-drag: none;
+          }
+
+          &::before {
+            position: absolute;
+            left: -6px;
+            top: 10px;
+            width: 12px;
+            height: 12px;
+            border-radius: 3px;
+            background: #fff;
+            transform: rotate(45deg);
+            content: '';
+          }
+        }
+      }
+
+      :host([align='right']) {
+        .container {
+          flex-direction: row-reverse;
+
+          .content {
+            margin-left: unset;
+            margin-right: 16px;
+            background: #d9ecff;
+
+            &::before {
+              right: -6px;
+              left: unset;
+              background: #d9ecff;
+            }
+          }
+        }
+      }
+    `,
+    css`
+      .img-thumb,
+      ::slotted(img) {
+        max-width: 128px;
+        min-width: 32px;
+        max-height: 160px;
+        object-fit: contain;
+        -webkit-user-drag: none;
+      }
+    `
+  ]
+
+  #drawContent() {
+    switch (this.type) {
+      case 'text':
+        return this.content
+
+      case 'image':
+        return html`<img class="img-thumb" src=${this.content} />`
+
+      case 'voice':
+        return html`<audio src="" controls></audio>`
+
+      case 'media':
+        return html`<audio src=""></audio>`
+    }
+  }
+
+  render() {
+    return html`
+      <div class="container">
+        <wc-avatar
+          size="xl"
+          round
+          class="avatar"
+          src=${this.avatar}
+        ></wc-avatar>
+        <div class="content">
+          <slot>${this.#drawContent()}</slot>
+        </div>
+      </div>
+    `
+  }
+}
+
+Bubble.reg('chat-bubble')