更新状态

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()
   }