From 60243e5e6da0fa227b990b8fa15ac27ca9f67b79 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Mon, 8 May 2023 19:38:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0chatbubble?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/chatbubble/index.js | 47 +++++++++++++++++++++++++++--------------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/chatbubble/index.js b/src/chatbubble/index.js
index 873803e..4cee3dd 100644
--- a/src/chatbubble/index.js
+++ b/src/chatbubble/index.js
@@ -34,6 +34,7 @@ class Bubble extends Component {
           position: relative;
           margin-left: 16px;
           padding: 8px 16px;
+          line-height: 20px;
           word-break: break-word;
           border-radius: 6px;
           background: #fff;
@@ -88,19 +89,20 @@ class Bubble extends Component {
       .type-voice {
         display: flex;
         align-items: center;
+        user-select: none;
 
         .wave {
           position: relative;
           display: flex;
           align-items: center;
-          width: 52rpx;
-          height: 44rpx;
+          width: 26px;
+          height: 22px;
 
           .i {
             position: absolute;
-            width: 8rpx;
-            height: 8rpx;
-            border: 4rpx solid transparent;
+            width: 4px;
+            height: 4px;
+            border: 2px solid transparent;
             border-right-color: rgba(0, 0, 0, 0.2);
             border-radius: 50%;
 
@@ -109,19 +111,19 @@ class Bubble extends Component {
               background: rgba(0, 0, 0, 0.2);
             }
             &:nth-child(2) {
-              left: -8rpx;
-              width: 24rpx;
-              height: 24rpx;
+              left: -4px;
+              width: 12px;
+              height: 12px;
             }
             &:nth-child(3) {
-              left: -12rpx;
-              width: 36rpx;
-              height: 36rpx;
+              left: -6px;
+              width: 18px;
+              height: 18px;
             }
             &:nth-child(4) {
-              left: -16rpx;
-              width: 48rpx;
-              height: 48rpx;
+              left: -8px;
+              width: 24px;
+              height: 24px;
             }
           }
           &.on .i {
@@ -158,10 +160,14 @@ class Bubble extends Component {
         return this.content
 
       case 'image':
-        return html`<img class="img-thumb" src=${this.content} />`
+        return html`<img
+          class="img-thumb"
+          src=${this.content}
+          @click=${this.previewImage}
+        />`
 
       case 'voice':
-        return html`<div class="type-voice">
+        return html`<div class="type-voice" @click=${this.playVoice}>
           <div class=${classMap({ wave: true, on: this.#playing })}>
             <i class="i"></i>
             <i class="i"></i>
@@ -176,6 +182,15 @@ class Bubble extends Component {
     }
   }
 
+  previewImage() {
+    this.$emit('image-preview', { data: this.content }, true)
+  }
+
+  playVoice() {
+    this.#playing = !this.#playing
+    this.$requestUpdate()
+  }
+
   render() {
     return html`
       <div class="container">