94 lines
3.2 KiB
Vue
94 lines
3.2 KiB
Vue
<script setup lang="ts">
|
||
import { Heart, Send } from 'lucide-vue-next'
|
||
import { ref } from 'vue'
|
||
import { postMessage } from '../api/client'
|
||
|
||
const nickname = ref('')
|
||
const message = ref('')
|
||
const sending = ref(false)
|
||
const done = ref(false)
|
||
const error = ref<string | null>(null)
|
||
|
||
async function submit() {
|
||
error.value = null
|
||
const n = nickname.value.trim()
|
||
const m = message.value.trim()
|
||
if (!n || !m) {
|
||
error.value = '请填写昵称和留言'
|
||
return
|
||
}
|
||
sending.value = true
|
||
try {
|
||
await postMessage({ nickname: n, message: m })
|
||
done.value = true
|
||
nickname.value = ''
|
||
message.value = ''
|
||
} catch {
|
||
error.value = '发送失败，请稍后再试'
|
||
} finally {
|
||
sending.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section
|
||
class="relative mx-auto max-w-lg px-4 pb-28 pt-4 sm:px-6"
|
||
aria-labelledby="guestbook-title"
|
||
>
|
||
<div class="nepal-brick-frame">
|
||
<div
|
||
class="relative rounded-2xl bg-gradient-to-b from-white/98 to-lokta-cream/40 p-6 ring-1 ring-lokta-deep/5 sm:p-8"
|
||
>
|
||
<div class="flex items-center gap-2 text-rose-deep">
|
||
<Heart class="h-5 w-5" fill="currentColor" aria-hidden="true" />
|
||
<h2 id="guestbook-title" class="font-brush text-3xl text-lokta-deep sm:text-4xl">
|
||
给她的一句话
|
||
</h2>
|
||
</div>
|
||
<p class="mt-2 text-sm text-ink-muted">
|
||
写下手帐最后一页的悄悄话，会保存在服务器上。
|
||
</p>
|
||
<form class="mt-6 space-y-4" @submit.prevent="submit">
|
||
<div>
|
||
<label class="block text-xs font-medium text-ink-muted" for="nick">昵称</label>
|
||
<input
|
||
id="nick"
|
||
v-model="nickname"
|
||
maxlength="80"
|
||
autocomplete="nickname"
|
||
class="mt-1 w-full rounded-xl border border-paper-shadow bg-paper/80 px-4 py-3 text-ink shadow-inner outline-none ring-0 transition focus:border-rose-soft/60 focus:ring-2 focus:ring-rose-soft/25"
|
||
placeholder="例如：你的小朋友"
|
||
>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-medium text-ink-muted" for="msg">留言</label>
|
||
<textarea
|
||
id="msg"
|
||
v-model="message"
|
||
rows="5"
|
||
maxlength="2000"
|
||
class="mt-1 w-full resize-y rounded-xl border border-paper-shadow bg-paper/80 px-4 py-3 text-ink shadow-inner outline-none transition focus:border-rose-soft/60 focus:ring-2 focus:ring-rose-soft/25"
|
||
placeholder="写下你想说的话…"
|
||
/>
|
||
</div>
|
||
<p v-if="error" class="text-sm text-rose-deep">
|
||
{{ error }}
|
||
</p>
|
||
<p v-if="done" class="text-sm text-ink-muted">
|
||
已收到你的心意，谢谢你打开这一页。
|
||
</p>
|
||
<button
|
||
type="submit"
|
||
class="inline-flex w-full items-center justify-center gap-2 rounded-full bg-rose-soft px-5 py-3 text-sm font-semibold text-white shadow-md transition hover:bg-rose-deep disabled:cursor-not-allowed disabled:opacity-60"
|
||
:disabled="sending"
|
||
>
|
||
<Send class="h-4 w-4" aria-hidden="true" />
|
||
{{ sending ? '发送中…' : '寄出留言' }}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|