diff --git a/pages/message/chat.scss b/pages/message/chat.scss index 3b88641..3fe026f 100644 --- a/pages/message/chat.scss +++ b/pages/message/chat.scss @@ -401,11 +401,26 @@ $primary-color: #0877F1; .input-toolbar { display: flex; - align-items: center; + align-items: flex-end; + position: relative; padding: 16rpx 20rpx; gap: 12rpx; } +.expand-input-btn { + position: absolute; + top: 16rpx; + left: 20rpx; + width: 40rpx; + height: 40rpx; + z-index: 1; + + image { + width: 100%; + height: 100%; + } +} + .voice-toggle-btn { width: 56rpx; height: 56rpx; @@ -414,6 +429,7 @@ $primary-color: #0877F1; justify-content: center; flex-shrink: 0; padding: 0; + margin-bottom: 12rpx; } .voice-toggle-icon { @@ -432,6 +448,7 @@ $primary-color: #0877F1; justify-content: center; flex-shrink: 0; padding: 0; + margin-bottom: 12rpx; } .send-btn { @@ -451,6 +468,7 @@ $primary-color: #0877F1; transition: background 0.2s; flex-shrink: 0; white-space: nowrap; + margin-bottom: 12rpx; } .send-btn:active { @@ -509,6 +527,7 @@ $primary-color: #0877F1; display: block; line-height: 1.5; height: 80rpx; + max-height: 500rpx; } .voice-input-btn { @@ -521,6 +540,46 @@ $primary-color: #0877F1; line-height: 80rpx; } +.expanded-input-overlay { + position: fixed; + inset: 0; + z-index: 1000; + display: flex; + flex-direction: column; + background: #fff; + border-radius: 24rpx 24rpx 0 0; + overflow: hidden; +} + +.expanded-input-header { + height: 96rpx; + flex-shrink: 0; + padding: 24rpx 24rpx 0; + box-sizing: border-box; +} + +.collapse-input-btn { + width: 40rpx; + height: 40rpx; + + image { + width: 100%; + height: 100%; + } +} + +.expanded-text-input { + flex: 1; + min-height: 0; + width: 100%; + padding: 0 32rpx 32rpx; + box-sizing: border-box; + font-size: 30rpx; + line-height: 1.5; + color: #333; + background: #fff; +} + .more-panel { display: flex; justify-content: flex-start; diff --git a/pages/message/components/chat-input.vue b/pages/message/components/chat-input.vue index 0c7db56..c4d912a 100644 --- a/pages/message/components/chat-input.vue +++ b/pages/message/components/chat-input.vue @@ -6,6 +6,9 @@ + + + @@ -14,7 +17,7 @@