diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue
index 127924d3d..5d338b05c 100755
--- a/resources/assets/js/pages/manage/components/ChatInput/index.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue
@@ -172,7 +172,18 @@
             </ul>
 
             <!-- 录音效果 -->
-            <div class="chat-record"><div ref="recwave"></div></div>
+            <div class="chat-record" :class="recordClassName">
+                <div class="record-convert">
+                    <i class="taskfont">&#xe628;</i>
+                </div>
+                <div class="record-recwave">
+                    <div ref="recwave"></div>
+                </div>
+                <div class="record-remove">
+                    <i class="taskfont">&#xe787;</i>
+                    <i class="taskfont">&#xe702;</i>
+                </div>
+            </div>
 
             <!-- 覆盖层 -->
             <div class="chat-cover" @click.stop="onClickCover"></div>
diff --git a/resources/assets/sass/dark.scss b/resources/assets/sass/dark.scss
index f7d7ccd26..99dfdfb77 100644
--- a/resources/assets/sass/dark.scss
+++ b/resources/assets/sass/dark.scss
@@ -567,6 +567,26 @@ body.dark-mode-reverse {
                     }
                 }
             }
+
+            .chat-record {
+                &.convert {
+                    .record-convert {
+                        background-color: #2db7f5;
+                        color: #000000;
+                    }
+                }
+                &.cancel {
+                    .record-remove {
+                        background-color: #ff6565;
+                        color: #000000;
+                    }
+                }
+                .record-convert,
+                .record-remove {
+                    color: #000000;
+                    background-color: #c7c7c7;
+                }
+            }
         }
     }
 
diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss
index 3884f90cc..870526bf8 100755
--- a/resources/assets/sass/pages/components/chat-input.scss
+++ b/resources/assets/sass/pages/components/chat-input.scss
@@ -367,19 +367,75 @@
             width: 100%;
             background-color: #ffffff;
             display: flex;
-            flex-direction: column;
+            justify-content: center;
             align-items: center;
-            justify-content: flex-end;
             pointer-events: none;
             visibility: hidden;
             opacity: 0;
-            > div {
+            &.convert {
+                .record-convert {
+                    background-color: #2db7f5;
+                    color: #ffffff;
+                }
+            }
+            &.cancel {
+                .record-remove {
+                    background-color: #ff6565;
+                    color: #ffffff;
+                }
+            }
+            .record-convert,
+            .record-remove {
+                color: #ffffff;
+                background-color: #a7a7a7;
+            }
+            .record-convert {
+                margin-right: 12px;
+                width: 32px;
+                height: 32px;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                > i {
+                    font-size: 18px;
+                }
+            }
+            .record-recwave {
                 flex: 1;
-                width: 100%;
-                max-height: 46px;
+                height: 100%;
                 display: flex;
                 flex-direction: column;
-                justify-content: flex-end;
+                justify-content: center;
+                > div {
+                    flex: 1;
+                    width: 100%;
+                    max-height: 46px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                }
+            }
+            .record-remove {
+                position: absolute;
+                bottom: 118px;
+                width: 34px;
+                right: 9px;
+                z-index: 3;
+                padding: 10px 0;
+                border-radius: 16px;
+                display: flex;
+                gap: 4px;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+                > i {
+                    font-size: 18px;
+                    &:last-child {
+                        font-size: 12px;
+                        opacity: 0.5;
+                    }
+                }
             }
         }
 
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index e6e63b832..3940f145b 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -2846,9 +2846,10 @@ body.window-portrait {
                 .chat-input-wrapper {
                     background-color: #ffffff;
                     .chat-record {
-                        margin-left: -10px;
-                        width: calc(100% + 20px);
                         background-color: #f8f8f8;
+                        .record-convert {
+                            margin-left: 8px;
+                        }
                     }
                 }
                 .chat-emoji-wrapper {