调整头像组件的默认宽高; 增加聊天气泡组件

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` 结果反馈组件

src/avatar/index.js

@@ -18,6 +18,8 @@ class Avatar extends Component {
     css`
       :host {
         display: inline-flex;
+        width: 32px;
+        height: 32px;
         border-radius: 4px;
       }
 

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')