75 lines
2.3 KiB
Vue
75 lines
2.3 KiB
Vue
<template>
|
|
<!-- 发送消息卡片 -->
|
|
<div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl p-4 transform transition-all duration-300 hover:shadow-2xl border border-gray-100">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center mr-2">
|
|
<i class="fa-solid fa-paper-plane text-primary"></i>
|
|
</div>
|
|
<h3 class="font-semibold text-sm">发送消息</h3>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<textarea
|
|
v-model="messageInput"
|
|
rows="3"
|
|
class="w-full max-w-full px-3 py-2.5 border border-gray-200 rounded-xl transition-all resize-none outline-none bg-gray-50/70 focus:border-primary focus:outline-2 focus:outline-offset-0 focus:outline-primary/30 box-border"
|
|
placeholder="输入要发送的消息..."
|
|
:disabled="!isConnected"
|
|
@keydown.enter.exact="sendMessage"
|
|
@keydown.enter.shift.prevent=""
|
|
></textarea>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<div class="text-xs text-gray-400">
|
|
{{ messageInput.length }} 字符
|
|
</div>
|
|
|
|
<button
|
|
@click="sendMessage"
|
|
class="px-5 py-2.5 rounded-xl font-medium transition-all duration-300 flex items-center space-x-2 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
|
|
:class="[sendButtonClass, { 'opacity-70': !isConnected || messageInput.trim() === '' }]"
|
|
:disabled="!isConnected || messageInput.trim() === ''"
|
|
>
|
|
<i class="fa-solid fa-paper-plane"></i>
|
|
<span>发送</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
|
|
// Props
|
|
const props = defineProps({
|
|
isConnected: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
// Emits
|
|
const emit = defineEmits(['send-message']);
|
|
|
|
// Refs
|
|
const messageInput = ref('');
|
|
|
|
// Computed
|
|
const sendButtonClass = computed(() => {
|
|
return props.isConnected
|
|
? 'bg-[#165DFF] text-white hover:bg-[#1453e0] shadow-md hover:shadow-lg'
|
|
: 'bg-gray-400 text-gray-900 cursor-not-allowed';
|
|
});
|
|
|
|
// Methods
|
|
const sendMessage = () => {
|
|
if (!props.isConnected || messageInput.value.trim() === '') {
|
|
return;
|
|
}
|
|
|
|
const message = messageInput.value.trim();
|
|
emit('send-message', message);
|
|
messageInput.value = '';
|
|
};
|
|
</script> |