压低贴线 SFC/composable;报告/档案/量表/意象卡 path 挂 Envelope $ref;CI ESS 门禁跟到 ECR-005。 Co-authored-by: Cursor <cursoragent@cursor.com>
96 lines
2.0 KiB
Vue
96 lines
2.0 KiB
Vue
<template>
|
||
<div class="composer-wrap">
|
||
<p v-if="quota" class="quota">
|
||
剩余 {{ quota.remaining }} 次
|
||
<span v-if="!quota.active_membership">(免费 {{ quota.free_limit }})</span>
|
||
</p>
|
||
<form class="composer" @submit.prevent="$emit('send')">
|
||
<textarea
|
||
class="ta"
|
||
:value="draft"
|
||
rows="2"
|
||
placeholder="让我来解答你的问题吧"
|
||
:disabled="sending || (quota !== null && quota.remaining <= 0)"
|
||
@input="$emit('update:draft', ($event.target as HTMLTextAreaElement).value)"
|
||
/>
|
||
<button
|
||
class="send"
|
||
type="submit"
|
||
:disabled="sending || !draft.trim() || (quota !== null && quota.remaining <= 0)"
|
||
>
|
||
发送
|
||
</button>
|
||
</form>
|
||
<p class="ai-note">部分内容由 AI 生成,仅供参考</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { AskQuota } from '@yuxingu/types'
|
||
|
||
defineProps<{
|
||
draft: string
|
||
sending: boolean
|
||
quota: AskQuota | null
|
||
}>()
|
||
|
||
defineEmits<{
|
||
'update:draft': [v: string]
|
||
send: []
|
||
}>()
|
||
</script>
|
||
|
||
<style scoped>
|
||
.composer-wrap {
|
||
position: sticky;
|
||
bottom: 72px;
|
||
padding-top: 8px;
|
||
background: linear-gradient(180deg, transparent, var(--color-bg-sheet) 24%);
|
||
}
|
||
.quota {
|
||
font-size: 11px;
|
||
color: #aaa;
|
||
margin-bottom: 6px;
|
||
}
|
||
.composer {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: flex-end;
|
||
}
|
||
.ta {
|
||
flex: 1;
|
||
resize: none;
|
||
min-height: 44px;
|
||
padding: 11px 14px;
|
||
border-radius: 16px;
|
||
border: 1.5px solid #eee;
|
||
background: #fff;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
outline: none;
|
||
}
|
||
.ta:focus {
|
||
border-color: #f0b8b0;
|
||
}
|
||
.send {
|
||
flex-shrink: 0;
|
||
padding: 11px 16px;
|
||
border: none;
|
||
border-radius: 22px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
|
||
box-shadow: 0 6px 16px rgba(229, 77, 66, 0.28);
|
||
}
|
||
.send:disabled {
|
||
opacity: 0.45;
|
||
}
|
||
.ai-note {
|
||
margin-top: 8px;
|
||
font-size: 10px;
|
||
color: #ccc;
|
||
text-align: center;
|
||
}
|
||
</style>
|