统一交互组件 (#7)

Reviewed-on: #7

src/views/auth/RegisterView.vue

@@ -47,11 +47,11 @@ async function handleRegister() {
 
 <template>
   <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
-    <div class="mx-auto grid max-w-6xl gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-stretch">
-      <section class="flex h-full flex-col justify-between border border-slate-200 bg-[linear-gradient(135deg,#eff6ff_0%,#ffffff_42%,#f0fdfa_100%)] p-8 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)]">
+    <div class="mx-auto grid min-w-0 max-w-6xl gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-stretch">
+      <section class="flex min-w-0 h-full flex-col justify-between overflow-hidden border border-slate-200 bg-[linear-gradient(135deg,#eff6ff_0%,#ffffff_42%,#f2faf6_100%)] p-6 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)] sm:p-8">
         <div>
           <p class="text-sm uppercase tracking-[0.26em] text-sky-700">Observer Join</p>
-          <h1 class="mt-4 max-w-xl text-5xl font-black leading-[1.05] text-slate-900">
+          <h1 class="mt-4 max-w-xl break-words text-4xl font-black leading-[1.05] text-slate-900 sm:text-5xl">
             加入天空探索者
             <span class="block text-sky-700">建立你的云图档案</span>
           </h1>
@@ -59,13 +59,13 @@ async function handleRegister() {
             注册后即可上传云图、点亮图鉴、在社区画廊里按时间展示你的观测记录。所有页面都会围绕你的个人云层档案同步更新。
           </p> -->
         </div>
-        <div class="mt-8 flex gap-4">
-          <div class="border border-slate-200 bg-white px-4 py-3">
+        <div class="mt-8 grid min-w-0 grid-cols-2 gap-4">
+          <div class="min-w-0 border border-slate-200 bg-white px-4 py-3">
             <div class="oc-stat-label">Review</div>
             <div class="oc-stat-value">Queue</div>
             <div class="oc-field-help">上传后进入审核队列</div>
           </div>
-          <div class="border border-slate-200 bg-white px-4 py-3">
+          <div class="min-w-0 border border-slate-200 bg-white px-4 py-3">
             <div class="oc-stat-label">Profile</div>
             <div class="oc-stat-value">Journal</div>
             <div class="oc-field-help">自动生成个人天空日志</div>
@@ -73,7 +73,7 @@ async function handleRegister() {
         </div>
       </section>
 
-      <NCard class="h-full shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
+      <NCard class="min-w-0 h-full shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
         <NResult
           v-if="emailSent"
           status="success"