From f4601ba16fd0c0442ce7012f57956249f6142388 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Tue, 9 May 2023 17:51:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/chatbubble/index.js | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/chatbubble/index.js b/src/chatbubble/index.js
index 4cee3dd..916be1e 100644
--- a/src/chatbubble/index.js
+++ b/src/chatbubble/index.js
@@ -13,7 +13,7 @@ class Bubble extends Component {
     content: '',
     voiceLength: 0,
     avatar: '',
-    readOnly: true
+    status: 0 // -1: 失败, 0: 发送中, 1: 成功, 2:已读
   }
 
   static styles = [
@@ -87,10 +87,22 @@ class Bubble extends Component {
       }
 
       .type-voice {
+        position: relative;
         display: flex;
         align-items: center;
         user-select: none;
 
+        &.dot::after {
+          position: absolute;
+          right: -8px;
+          top: -2px;
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background: var(--color-red-1);
+          content: '';
+        }
+
         .wave {
           position: relative;
           display: flex;
@@ -152,7 +164,8 @@ class Bubble extends Component {
     `
   ]
 
-  #playing = false
+  #playing = false // 正在播放
+  #played = false // 是否已播放过
 
   #drawContent() {
     switch (this.type) {
@@ -167,7 +180,10 @@ class Bubble extends Component {
         />`
 
       case 'voice':
-        return html`<div class="type-voice" @click=${this.playVoice}>
+        return html`<div
+          class=${classMap({ 'type-voice': true, dot: !this.#played })}
+          @click=${this.playVoice}
+        >
           <div class=${classMap({ wave: true, on: this.#playing })}>
             <i class="i"></i>
             <i class="i"></i>
@@ -183,10 +199,11 @@ class Bubble extends Component {
   }
 
   previewImage() {
-    this.$emit('image-preview', { data: this.content }, true)
+    this.$emit('image-preview', { data: this.content })
   }
 
   playVoice() {
+    this.#played = true
     this.#playing = !this.#playing
     this.$requestUpdate()
   }