127 lines
2.7 KiB
Plaintext
127 lines
2.7 KiB
Plaintext
<template>
|
|
<view class="input-area">
|
|
<view class="input-area__container">
|
|
<!-- Text input -->
|
|
<input
|
|
class="input-area__field"
|
|
:class="{ 'input-area__field--has-text': hasText }"
|
|
type="text"
|
|
:value="inputText"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
:maxlength="2000"
|
|
placeholder-style="color: rgba(255, 255, 255, 0.3);"
|
|
@input="onInput"
|
|
@confirm="onSend"
|
|
confirm-type="send"
|
|
/>
|
|
|
|
<!-- Send button -->
|
|
<view
|
|
class="input-area__send-btn"
|
|
:class="{ 'input-area__send-btn--active': hasText && !disabled }"
|
|
@tap="onSend"
|
|
>
|
|
<text class="input-area__send-icon">↑</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
const props = defineProps<{
|
|
disabled: boolean
|
|
placeholder: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
send: [text: string]
|
|
}>()
|
|
|
|
const inputText = ref('')
|
|
|
|
const hasText = computed<boolean>(() => {
|
|
return inputText.value.trim().length > 0
|
|
})
|
|
|
|
function onInput(e: any): void {
|
|
inputText.value = e.detail.value
|
|
}
|
|
|
|
function onSend(): void {
|
|
const text = inputText.value.trim()
|
|
if (text && !props.disabled) {
|
|
emit('send', text)
|
|
inputText.value = ''
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.input-area {
|
|
position: relative;
|
|
z-index: 100;
|
|
background: rgba(15, 15, 26, 0.9);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
padding: 16rpx 24rpx;
|
|
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.input-area__container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.input-area__field {
|
|
flex: 1;
|
|
height: 72rpx;
|
|
border-radius: 36rpx;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
padding: 0 24rpx;
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
transition: border-color 0.25s ease;
|
|
}
|
|
|
|
.input-area__field--has-text {
|
|
border-color: rgba(108, 92, 231, 0.4);
|
|
}
|
|
|
|
.input-area__field:focus {
|
|
border-color: rgba(108, 92, 231, 0.6);
|
|
}
|
|
|
|
.input-area__send-btn {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 16rpx;
|
|
flex-shrink: 0;
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.input-area__send-btn--active {
|
|
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
|
|
box-shadow: 0 4rpx 16rpx rgba(108, 92, 231, 0.35);
|
|
}
|
|
|
|
.input-area__send-icon {
|
|
font-size: 40rpx;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
}
|
|
|
|
.input-area__send-btn--active .input-area__send-icon {
|
|
color: #ffffff;
|
|
}
|
|
</style>
|