feat: adopt naive ui and refine shell interactions

src/views/auth/LoginView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { NAlert, NButton, NCard, NForm, NFormItem, NInput } from 'naive-ui'
 import { useAuthStore } from '@/stores/auth'
 
 const authStore = useAuthStore()
@@ -28,56 +29,79 @@ async function handleLogin() {
 </script>
 
 <template>
-  <div class="flex items-center justify-center min-h-[calc(100vh-4rem)] px-4">
-    <div class="w-full max-w-sm">
-      <div class="text-center mb-8">
-        <span class="text-5xl block mb-4">☁️</span>
-        <h1 class="text-2xl font-bold text-gray-900">登录 OpenCloud</h1>
-        <p class="text-sm text-gray-500 mt-1">记录你眼中的每一朵云</p>
-      </div>
+  <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-center">
+      <section class="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)]">
+        <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">
+          登录后继续记录
+          <span class="block text-teal-700">你眼中的每一朵云</span>
+        </h1>
+        <p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
+          在地图、图鉴和画廊之间同步你的观测记录。上传新的云图后，图鉴会自动点亮，画廊也会按时间收纳你的作品。
+        </p>
+        <div class="mt-8 flex gap-4">
+          <div class="border border-slate-200 bg-white px-4 py-3">
+            <div class="text-xs uppercase tracking-[0.2em] text-slate-500">Collection</div>
+            <div class="mt-2 text-2xl font-bold text-slate-900">10</div>
+            <div class="mt-1 text-sm text-slate-500">基础云属待收集</div>
+          </div>
+          <div class="border border-slate-200 bg-white px-4 py-3">
+            <div class="text-xs uppercase tracking-[0.2em] text-slate-500">Mode</div>
+            <div class="mt-2 text-2xl font-bold text-slate-900">Atlas</div>
+            <div class="mt-1 text-sm text-slate-500">地图、图鉴、画廊一体</div>
+          </div>
+        </div>
+      </section>
 
-      <form @submit.prevent="handleLogin" class="space-y-4">
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
-          <input
-            v-model="email"
-            type="email"
-            required
-            autocomplete="email"
-            placeholder="your@email.com"
-            class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-colors"
-          />
+      <NCard class="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>
+          <p class="mt-2 text-sm text-slate-500">输入邮箱和密码，继续你的天空档案。</p>
         </div>
 
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
-          <input
-            v-model="password"
-            type="password"
-            required
-            autocomplete="current-password"
-            placeholder="输入密码"
-            class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-colors"
-          />
-        </div>
+        <NForm @submit.prevent="handleLogin">
+          <NFormItem label="邮箱">
+            <NInput
+              v-model:value="email"
+              required
+              autocomplete="email"
+              placeholder="your@email.com"
+            />
+          </NFormItem>
 
-        <div v-if="error" class="p-3 bg-red-50 border border-red-200 rounded-lg">
-          <p class="text-sm text-red-600">{{ error }}</p>
-        </div>
+          <NFormItem label="密码">
+            <NInput
+              v-model:value="password"
+              type="password"
+              required
+              show-password-on="click"
+              autocomplete="current-password"
+              placeholder="输入密码"
+            />
+          </NFormItem>
 
-        <button
-          type="submit"
-          :disabled="loading"
-          class="w-full py-2.5 bg-sky-500 text-white font-medium rounded-lg hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 disabled:opacity-50 transition-colors"
-        >
-          {{ loading ? '登录中...' : '登录' }}
-        </button>
-      </form>
+          <NAlert v-if="error" type="error" class="mb-4">
+            {{ error }}
+          </NAlert>
 
-      <p class="mt-6 text-center text-sm text-gray-500">
-        没有账号？
-        <RouterLink to="/register" class="text-sky-600 hover:text-sky-700 font-medium">去注册</RouterLink>
-      </p>
+          <NButton
+            attr-type="submit"
+            type="primary"
+            block
+            size="large"
+            :loading="loading"
+          >
+            {{ loading ? '登录中...' : '登录' }}
+          </NButton>
+        </NForm>
+
+        <p class="mt-6 text-sm text-slate-500">
+          没有账号？
+          <RouterLink to="/register" class="font-semibold text-teal-700 hover:text-teal-800">去注册</RouterLink>
+        </p>
+      </NCard>
     </div>
   </div>
 </template>