优化

monisuo-admin/src/pages/auth.vue

@@ -0,0 +1,8 @@
+<template>
+  <router-view />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: false
+</route>

monisuo-admin/src/pages/auth/sign-in.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { Eye, EyeOff, Lock, User } from 'lucide-vue-next'
+
+import { useAuth } from '@/composables/use-auth'
+
+const username = ref('')
+const password = ref('')
+const showPassword = ref(false)
+
+const { login, loading, error, isLogin } = useAuth()
+const router = useRouter()
+
+// 已登录则跳转首页
+watchEffect(() => {
+  if (unref(isLogin)) {
+    router.push('/dashboard')
+  }
+})
+
+async function handleSubmit() {
+  if (!username.value || !password.value)
+    return
+  await login(username.value, password.value)
+}
+</script>
+
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted p-4">
+    <UiCard class="w-full max-w-md">
+      <UiCardHeader class="space-y-1 text-center">
+        <div class="flex justify-center mb-4">
+          <div class="size-12 rounded-xl bg-primary flex items-center justify-center">
+            <Lock class="size-6 text-primary-foreground" />
+          </div>
+        </div>
+        <UiCardTitle class="text-2xl font-bold">
+          Monisuo Admin
+        </UiCardTitle>
+        <UiCardDescription>
+          管理员登录
+        </UiCardDescription>
+      </UiCardHeader>
+      <UiCardContent>
+        <form @submit.prevent="handleSubmit" class="space-y-4">
+          <div class="space-y-2">
+            <UiLabel for="username">用户名</UiLabel>
+            <div class="relative">
+              <User class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+              <UiInput
+                id="username"
+                v-model="username"
+                type="text"
+                placeholder="请输入用户名"
+                class="pl-9"
+                :disabled="loading"
+              />
+            </div>
+          </div>
+          <div class="space-y-2">
+            <UiLabel for="password">密码</UiLabel>
+            <div class="relative">
+              <Lock class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+              <UiInput
+                id="password"
+                v-model="password"
+                :type="showPassword ? 'text' : 'password'"
+                placeholder="请输入密码"
+                class="pl-9 pr-9"
+                :disabled="loading"
+              />
+              <button
+                type="button"
+                class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                @click="showPassword = !showPassword"
+              >
+                <Eye v-if="!showPassword" class="size-4" />
+                <EyeOff v-else class="size-4" />
+              </button>
+            </div>
+          </div>
+          <UiAlert v-if="error" variant="destructive">
+            <UiAlertDescription>{{ error }}</UiAlertDescription>
+          </UiAlert>
+          <UiButton type="submit" class="w-full" :disabled="loading">
+            <UiSpinner v-if="loading" class="size-4 mr-2" />
+            {{ loading ? '登录中...' : '登录' }}
+          </UiButton>
+        </form>
+      </UiCardContent>
+    </UiCard>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: blank
+</route>