first commit

frontend/src/components/MessageForm.vue

@@ -0,0 +1,93 @@
+<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>