From 567c75830a26beb97b888ebe333a47196f47dfc2 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Wed, 5 Mar 2025 01:52:37 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=96=B0=E5=A2=9E=E5=BD=95=E9=9F=B3?=
 =?UTF-8?q?=E8=BD=AC=E6=96=87=E5=AD=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manage/components/ChatInput/index.vue     | 18 +++--
 resources/assets/sass/dark.scss               | 18 +++++
 .../sass/pages/components/chat-input.scss     | 81 +++++++++++--------
 3 files changed, 74 insertions(+), 43 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue
index c9b82675d..fdd257c23 100755
--- a/resources/assets/js/pages/manage/components/ChatInput/index.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue
@@ -206,14 +206,16 @@
                 class="chat-input-convert-transfer"
                 :style="recordTransferStyle">
                 <div class="convert-box">
-                    <div class="convert-content">
-                        <Input
-                            type="textarea"
-                            class="convert-result"
-                            v-model="recordConvertResult"
-                            :rows="1"
-                            :autosize="{minRows: 1, maxRows: 5}"
-                            :placeholder="recordConvertStatus === 0 ? '...' : ''"/>
+                    <div class="convert-body">
+                        <div class="convert-content">
+                            <Input
+                                type="textarea"
+                                class="convert-result"
+                                v-model="recordConvertResult"
+                                :rows="1"
+                                :autosize="{minRows: 1, maxRows: 5}"
+                                :placeholder="recordConvertStatus === 0 ? '...' : ''"/>
+                        </div>
                     </div>
                     <ul class="convert-footer">
                         <li @click="recordConvertIng=false">
diff --git a/resources/assets/sass/dark.scss b/resources/assets/sass/dark.scss
index b9e9e9ab2..8e4897ade 100644
--- a/resources/assets/sass/dark.scss
+++ b/resources/assets/sass/dark.scss
@@ -577,6 +577,24 @@ body.dark-mode-reverse {
         }
     }
 
+    .chat-input-convert-transfer {
+        background-color: rgba(255, 255, 255, 0.9);
+        .convert-box {
+            .convert-footer {
+                color: #000000;
+                > li {
+                    > i {
+                        &.send,
+                        &.error {
+                            color: #0a7600;
+                            background: #000000;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     .chat-emoji-wrapper {
         .chat-emoji-box {
             ul {
diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss
index 1e715d42d..091218a6b 100755
--- a/resources/assets/sass/pages/components/chat-input.scss
+++ b/resources/assets/sass/pages/components/chat-input.scss
@@ -744,54 +744,64 @@
     align-items: center;
     justify-content: flex-end;
     flex-direction: column;
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(50, 50, 50, 0.9);
     .convert-box {
         width: 100%;
+        height: 100%;
         max-width: 500px;
-        height: 50%;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
-        .convert-content {
-            position: relative;
-            background-color: $primary-color;
-            color: #000000;
-            width: 88%;
-            padding: 18px;
-            border-radius: 14px;
-            transform: translateY(-50%);
-            &:before {
-                content: "";
-                position: absolute;
-                bottom: -15px;
-                right: 12%;
-                transform: translateX(-50%);
-                border-width: 8px;
-                border-style: solid;
-                border-color: $primary-color transparent transparent transparent;
-            }
-            .convert-result {
-                .ivu-input {
-                    font-size: 18px;
-                    border: 0;
-                    box-shadow: none;
-                    background: transparent;
-                    color: #000000;
-                    border-radius: 0;
-                    outline: none;
-                    resize: none;
-                    &::placeholder {
-                        color: rgba(0, 0, 0, 0.7);
+        .convert-body {
+            flex: 1;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            align-items: center;
+            .convert-content {
+                position: relative;
+                background-color: $primary-color;
+                color: #000000;
+                width: 88%;
+                padding: 18px;
+                border-radius: 14px;
+                transform: translateY(24px);
+                &:before {
+                    content: "";
+                    position: absolute;
+                    bottom: -15px;
+                    right: 12%;
+                    transform: translateX(-50%);
+                    border-width: 8px;
+                    border-style: solid;
+                    border-color: $primary-color transparent transparent transparent;
+                }
+                .convert-result {
+                    .ivu-input {
+                        font-size: 18px;
+                        border: 0;
+                        box-shadow: none;
+                        background: transparent;
+                        color: #000000;
+                        border-radius: 0;
+                        outline: none;
+                        resize: none;
+                        &::placeholder {
+                            color: rgba(0, 0, 0, 0.7);
+                        }
                     }
                 }
             }
         }
         .convert-footer {
+            flex: 1;
             width: 88%;
             display: flex;
+            align-items: flex-end;
             justify-content: space-around;
-            margin-bottom: 64px;
+            color: #ffffff;
             > li {
                 flex-grow: 0;
                 flex-shrink: 0;
@@ -802,6 +812,7 @@
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
+                margin-bottom: 64px;
                 > i {
                     font-size: 18px;
                     &.voice {
@@ -816,8 +827,8 @@
                         display: flex;
                         justify-content: center;
                         align-items: center;
-                        color: #0a7600;
-                        background: #000000;
+                        color: #3fc433;
+                        background: #ffffff;
                         font-weight: 600;
                         .common-loading {
                             width: 26px;