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>
|