From b1dba033257209ed22b1d397a287b6e9fa26f050 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=AE=8F=E5=BB=BA?= <912342168@qq.com>
Date: Tue, 10 Mar 2026 08:59:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(login):=20=E6=B7=BB=E5=8A=A0=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=B9=B6=E9=9B=86=E6=88=90daisyui?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 集成daisyui组件库并配置input工具类
- 创建完整的登录页面UI，包含左右分栏布局
- 添加用户登录表单，包含用户名和密码输入框
- 集成lucide-vue-next图标用于用户名和密码字段
- 实现登录按钮加载状态和错误提示功能
- 添加欢迎文字轮播效果和背景动画
- 在导航栏中添加登录链接
- 实现登录表单提交逻辑和验证功能
- 添加响应式设计支持移动端适配
---
 src/assets/main.css |   7 +-
 src/pages/index.vue |   1 +
 src/pages/login.vue | 429 +++++++-------------------------------------
 3 files changed, 71 insertions(+), 366 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 74d8662..49544cc 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,2 +1,7 @@
 @import "tailwindcss";
-@plugin "daisyui";
\ No newline at end of file
+@plugin "daisyui";
+
+
+@utility input {
+  @apply w-full outline-none ;
+}
\ No newline at end of file
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 5620f14..b8a72e0 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -9,6 +9,7 @@ import { RouterLink } from 'vue-router'
     <nav>
       <RouterLink to="/">Home</RouterLink> |
       <RouterLink to="/about">About</RouterLink>
+      <RouterLink to="/login">登录</RouterLink>
     </nav>
   </main>
 </template>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index e75584b..74830e1 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,6 +1,66 @@
+<template>
+  <main class="flex min-h-screen w-full bg-base-200">
+    <!-- 左侧欢迎区域 -->
+    <div
+      class="relative flex-[1.5] flex items-center justify-center p-10 overflow-hidden bg-linear-to-br from-primary to-secondary">
+      <!-- 背景动画 -->
+      <span class="text-rotate text-3xl">
+        <span class="justify-items-center">
+          <span v-for="word in welcomeWords">{{ word }}</span>
+        </span>
+      </span>
+    </div>
+
+    <!-- 右侧登录表单 -->
+    <div class="flex-1 flex items-center justify-center p-10 bg-base-200">
+      <div class="card bg-base-100 shadow-xl w-full max-w-md">
+        <div class="card-body">
+
+          <form @submit.prevent="handleLogin" class="flex flex-col gap-6">
+            <div class="form-control w-full">
+              <label class="input">
+                <User></User>
+                <input id="username" v-model="username" type="text" placeholder="请输入用户名" :disabled="isLoading"
+                  class="grow" />
+              </label>
+            </div>
+
+            <div class="form-control w-full">
+              <label class="input">
+                <Lock></Lock>
+                <input id="password" v-model="password" type="password" placeholder="请输入密码" :disabled="isLoading"
+                  class="grow" />
+              </label>
+            </div>
+
+            <div v-if="errorMessage" class="alert alert-error">
+              <span class="text-lg">⚠️</span>
+              <span>{{ errorMessage }}</span>
+            </div>
+
+            <button type="submit" :disabled="isLoading" class="btn btn-primary mt-2">
+              <span v-if="isLoading" class="loading loading-spinner"></span>
+              {{ isLoading ? '登录中...' : '登 录' }}
+            </button>
+          </form>
+
+          <div class="divider"></div>
+
+          <div class="text-center flex justify-center gap-2">
+            <RouterLink to="/" class="link link-primary">返回首页</RouterLink>
+            <span class="text-base-content/30">|</span>
+            <RouterLink to="/about" class="link link-primary">关于</RouterLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { User, Lock } from 'lucide-vue-next'
 
 const router = useRouter()
 
@@ -19,17 +79,6 @@ const welcomeWords = [
 
 const currentWordIndex = ref(0)
 
-// 自动轮播
-let rotateTimer: number
-const startRotation = () => {
-  rotateTimer = window.setInterval(() => {
-    currentWordIndex.value = (currentWordIndex.value + 1) % welcomeWords.length
-  }, 3000)
-}
-
-// 启动轮播
-startRotation()
-
 const handleLogin = async () => {
   if (!username.value || !password.value) {
     errorMessage.value = '请输入用户名和密码'
@@ -42,10 +91,10 @@ const handleLogin = async () => {
   try {
     // TODO: 实际的登录逻辑，调用后端 API
     console.log('登录信息:', { username: username.value, password: password.value })
-    
+
     // 模拟异步请求
     await new Promise(resolve => setTimeout(resolve, 1000))
-    
+
     // 登录成功后跳转到首页
     router.push('/')
   } catch (error) {
@@ -55,354 +104,4 @@ const handleLogin = async () => {
     isLoading.value = false
   }
 }
-</script>
-
-<template>
-  <main class="login-container">
-    <!-- 左侧欢迎区域 -->
-    <div class="left-panel">
-      <div class="welcome-content">
-        <h1 class="main-title">Rolegram</h1>
-        <div class="text-rotate-container">
-          <transition name="fade" mode="out-in">
-            <p :key="currentWordIndex" class="welcome-text">
-              {{ welcomeWords[currentWordIndex] }}
-            </p>
-          </transition>
-        </div>
-      </div>
-    </div>
-
-    <!-- 右侧登录表单 -->
-    <div class="right-panel">
-      <div class="login-card">
-        <h2 class="form-title">用户登录</h2>
-        
-        <form @submit.prevent="handleLogin" class="login-form">
-          <div class="form-group">
-            <label for="username" class="form-label">
-              <span class="icon">👤</span>
-              用户名
-            </label>
-            <input
-              id="username"
-              v-model="username"
-              type="text"
-              placeholder="请输入用户名"
-              :disabled="isLoading"
-              class="form-input"
-            />
-          </div>
-
-          <div class="form-group">
-            <label for="password" class="form-label">
-              <span class="icon">🔒</span>
-              密码
-            </label>
-            <input
-              id="password"
-              v-model="password"
-              type="password"
-              placeholder="请输入密码"
-              :disabled="isLoading"
-              class="form-input"
-            />
-          </div>
-
-          <div v-if="errorMessage" class="error-message">
-            <span class="icon">⚠️</span>
-            {{ errorMessage }}
-          </div>
-
-          <button type="submit" class="submit-btn" :disabled="isLoading">
-            <span v-if="isLoading" class="loading-spinner"></span>
-            {{ isLoading ? '登录中...' : '登 录' }}
-          </button>
-        </form>
-
-        <div class="footer-links">
-          <RouterLink to="/" class="link">返回首页</RouterLink>
-          <span class="divider">|</span>
-          <RouterLink to="/about" class="link">关于</RouterLink>
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
-
-<style scoped>
-.login-container {
-  display: flex;
-  min-height: 100vh;
-  width: 100%;
-  background: #f5f7fa;
-}
-
-/* 左侧面板 */
-.left-panel {
-  flex: 1.5;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-  position: relative;
-  overflow: hidden;
-}
-
-.left-panel::before {
-  content: '';
-  position: absolute;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-  animation: pulse 15s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { transform: translate(-20%, -20%) scale(1); }
-  50% { transform: translate(0%, 0%) scale(1.1); }
-}
-
-.welcome-content {
-  text-align: center;
-  color: white;
-  z-index: 1;
-}
-
-.main-title {
-  font-size: 64px;
-  font-weight: 700;
-  margin-bottom: 40px;
-  letter-spacing: 8px;
-  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-}
-
-.text-rotate-container {
-  min-height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.welcome-text {
-  font-size: 28px;
-  font-weight: 500;
-  opacity: 0.95;
-  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
-}
-
-/* 右侧面板 */
-.right-panel {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-  background: #f5f7fa;
-}
-
-.login-card {
-  background: white;
-  padding: 50px 40px;
-  border-radius: 16px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
-  width: 100%;
-  max-width: 420px;
-}
-
-.form-title {
-  margin: 0 0 35px;
-  text-align: center;
-  color: #1a1a1a;
-  font-size: 32px;
-  font-weight: 600;
-}
-
-.login-form {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.form-label {
-  font-weight: 500;
-  color: #4a5568;
-  font-size: 15px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.icon {
-  font-size: 18px;
-}
-
-.form-input {
-  padding: 14px 18px;
-  border: 2px solid #e2e8f0;
-  border-radius: 10px;
-  font-size: 15px;
-  transition: all 0.3s;
-  outline: none;
-  background: #f8fafc;
-}
-
-.form-input:focus {
-  border-color: #667eea;
-  background: white;
-  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
-}
-
-.form-input:disabled {
-  background-color: #edf2f7;
-  cursor: not-allowed;
-  opacity: 0.7;
-}
-
-.error-message {
-  color: #dc3545;
-  background-color: #fff5f5;
-  padding: 14px 16px;
-  border-radius: 8px;
-  font-size: 14px;
-  border-left: 4px solid #dc3545;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.submit-btn {
-  padding: 15px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  border-radius: 10px;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s;
-  margin-top: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-}
-
-.submit-btn:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
-}
-
-.submit-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.loading-spinner {
-  width: 18px;
-  height: 18px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.footer-links {
-  margin-top: 30px;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-}
-
-.link {
-  color: #667eea;
-  text-decoration: none;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.3s;
-}
-
-.link:hover {
-  color: #764ba2;
-  text-decoration: underline;
-}
-
-.divider {
-  color: #cbd5e0;
-}
-
-/* 过渡动画 */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* 响应式设计 */
-@media (max-width: 968px) {
-  .login-container {
-    flex-direction: column;
-  }
-
-  .left-panel {
-    flex: 0.8;
-    padding: 30px;
-  }
-
-  .main-title {
-    font-size: 42px;
-    margin-bottom: 20px;
-  }
-
-  .welcome-text {
-    font-size: 20px;
-  }
-
-  .right-panel {
-    flex: 1.2;
-    padding: 30px 20px;
-  }
-
-  .login-card {
-    padding: 40px 30px;
-    max-width: 100%;
-  }
-}
-
-@media (max-width: 640px) {
-  .main-title {
-    font-size: 32px;
-    letter-spacing: 4px;
-  }
-
-  .welcome-text {
-    font-size: 16px;
-  }
-
-  .form-title {
-    font-size: 26px;
-  }
-
-  .login-card {
-    padding: 30px 24px;
-  }
-}
-</style>
+</script>
\ No newline at end of file