diff --git a/pages/chat/ChatInputArea.vue b/pages/chat/ChatInputArea.vue
index d111f49..74932fe 100644
--- a/pages/chat/ChatInputArea.vue
+++ b/pages/chat/ChatInputArea.vue
@@ -1,35 +1,84 @@
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+ 按住说话
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -147,6 +283,7 @@ defineExpose({
height: 44px;
flex-shrink: 0;
align-self: flex-end;
+ cursor: pointer;
image {
width: 22px;
@@ -154,6 +291,26 @@ defineExpose({
}
}
+ .input-button-container {
+ flex: 1;
+ position: relative;
+ height: 44px;
+ }
+
+ .hold-to-talk-button {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ color: #333333;
+ font-size: 16px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #FFFFFF;
+ }
+
.input-container-send {
display: flex;
align-items: center;
@@ -163,6 +320,14 @@ defineExpose({
flex-shrink: 0;
align-self: flex-end;
+ .input-container-send-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ }
+
image {
width: 28px;
height: 28px;
@@ -170,13 +335,116 @@ defineExpose({
}
.textarea {
- flex: 1;
+ flex: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
max-height: 92px;
- min-height: 22px;
+ min-height: 44px;
font-size: 16px;
line-height: 22px;
- margin-bottom: 2px;
+ padding: 3px 0 0;
align-items: center;
+ justify-content: center;
+ }
+
+ /* 确保textarea在iOS上的样式正常 */
+ .textarea::-webkit-input-placeholder {
+ color: #CCCCCC;
+ }
+ .textarea:focus {
+ outline: none;
}
}
+
+ /* 录音弹窗样式 */
+ .recording-popup {
+ width: 280px;
+ height: 280px;
+ background-color: rgba(0, 0, 0, 0.7);
+ border-radius: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ }
+
+ .recording-wave {
+ width: 160px;
+ height: 160px;
+ border-radius: 50%;
+ background-color: rgba(76, 217, 100, 0.3);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 20px;
+ }
+
+ .wave-animation {
+ width: 100px;
+ height: 100px;
+ /* 这里可以添加波形动画 */
+ background-image: url('/static/wave_icon.png');
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ .recording-text {
+ font-size: 16px;
+ margin-bottom: 20px;
+ }
+
+ .recording-cancel {
+ font-size: 14px;
+ color: #CCCCCC;
+ }
+
+ /* 语音结果弹窗样式 */
+ .voice-result-popup {
+ width: 300px;
+ background-color: white;
+ border-radius: 16px;
+ padding: 20px;
+ }
+
+ .voice-result-bubble {
+ background-color: #4CD964;
+ color: white;
+ padding: 15px;
+ border-radius: 18px;
+ border-top-left-radius: 4px;
+ margin-bottom: 20px;
+ min-height: 60px;
+ font-size: 16px;
+ }
+
+ .voice-result-actions {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .action-button {
+ padding: 8px 16px;
+ border-radius: 20px;
+ font-size: 14px;
+ }
+
+ .cancel {
+ color: #666666;
+ background-color: #F5F5F5;
+ }
+
+ .voice {
+ color: #007AFF;
+ background-color: #E8F0FE;
+ }
+
+ .send {
+ color: white;
+ background-color: #007AFF;
+ }
diff --git a/static/input_keyboard_icon.png b/static/input_keyboard_icon.png
new file mode 100644
index 0000000..e95d006
Binary files /dev/null and b/static/input_keyboard_icon.png differ