统一交互组件 (#7)

Reviewed-on: #7

src/views/auth/LoginView.vue

@@ -42,11 +42,11 @@ async function handleLogin() {
 
 <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,#f0fdfa_0%,#ffffff_48%,#eff6ff_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,#f2faf6_0%,#ffffff_48%,#eff6ff_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-teal-700">Sky Log In</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-teal-700">你眼中的每一朵云</span>
           </h1>
@@ -54,13 +54,13 @@ async function handleLogin() {
             在地图、图鉴和画廊之间同步你的观测记录。上传新的云图后，图鉴会自动点亮，画廊也会按时间收纳你的作品。
           </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">Collection</div>
             <div class="oc-stat-value">10</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">Mode</div>
             <div class="oc-stat-value">Atlas</div>
             <div class="oc-field-help">地图、图鉴、画廊一体</div>
@@ -68,7 +68,7 @@ async function handleLogin() {
         </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)]">
         <div class="mb-8">
           <div class="text-sm uppercase tracking-[0.22em] text-slate-500">Member Access</div>
           <h2 class="mt-3 text-3xl font-bold text-slate-900">登录 OpenCloud</h2>