更新

Readme.md

@@ -16,7 +16,7 @@
 
 - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
 
-### 开发进度 && 计划 (37/54)
+### 开发进度 && 计划 (37/55)
 
 - [x] `wc-card` 卡片组件
 - [x] `wc-space` 间隔组件

src/chatbubble/index.js

@@ -3,7 +3,7 @@
  * @author yutent<yutent.io@gmail.com>
  * @date 2023/05/05 14:56:34
  */
-import { css, html, Component } from '@bd/core'
+import { css, html, Component, classMap } from '@bd/core'
 
 import '../avatar/index.js'
 
@@ -11,7 +11,9 @@ class Bubble extends Component {
   static props = {
     type: 'text',
     content: '',
-    avatar: ''
+    voiceLength: 0,
+    avatar: '',
+    readOnly: true
   }
 
   static styles = [
@@ -82,9 +84,74 @@ class Bubble extends Component {
         object-fit: contain;
         -webkit-user-drag: none;
       }
+
+      .type-voice {
+        display: flex;
+        align-items: center;
+
+        .wave {
+          position: relative;
+          display: flex;
+          align-items: center;
+          width: 52rpx;
+          height: 44rpx;
+
+          .i {
+            position: absolute;
+            width: 8rpx;
+            height: 8rpx;
+            border: 4rpx solid transparent;
+            border-right-color: rgba(0, 0, 0, 0.2);
+            border-radius: 50%;
+
+            &:nth-child(1) {
+              border: 0;
+              background: rgba(0, 0, 0, 0.2);
+            }
+            &:nth-child(2) {
+              left: -8rpx;
+              width: 24rpx;
+              height: 24rpx;
+            }
+            &:nth-child(3) {
+              left: -12rpx;
+              width: 36rpx;
+              height: 36rpx;
+            }
+            &:nth-child(4) {
+              left: -16rpx;
+              width: 48rpx;
+              height: 48rpx;
+            }
+          }
+          &.on .i {
+            border-right-color: rgba(0, 0, 0, 0);
+            animation: play 1.2s infinite;
+
+            &:nth-child(3) {
+              animation-delay: 0.3s;
+            }
+            &:nth-child(4) {
+              animation-delay: 0.6s;
+            }
+          }
+        }
+      }
+
+      @keyframes play {
+        from,
+        to {
+          border-right-color: rgba(0, 0, 0, 0);
+        }
+        50% {
+          border-right-color: rgba(0, 0, 0, 0.2);
+        }
+      }
     `
   ]
 
+  #playing = false
+
   #drawContent() {
     switch (this.type) {
       case 'text':
@@ -94,7 +161,15 @@ class Bubble extends Component {
         return html`<img class="img-thumb" src=${this.content} />`
 
       case 'voice':
-        return html`<audio src="" controls></audio>`
+        return html`<div class="type-voice">
+          <div class=${classMap({ wave: true, on: this.#playing })}>
+            <i class="i"></i>
+            <i class="i"></i>
+            <i class="i"></i>
+            <i class="i"></i>
+          </div>
+          <span class="duration">${this.voiceLength}'</span>
+        </div> `
 
       case 'media':
         return html`<audio src=""></audio>`