chore: v0.1.6 UI优化 - 两列网格布局、暗色适配、系统配置浮窗保存、退出登录统一到侧边栏

packages/frontend/src/pages/admin/AdminLogin.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="admin-login-page">
+    <div class="login-bg-pattern"></div>
     <div class="login-card">
-      <h1 class="login-title">{{ siteName || 'CloudSearch' }} 管理后台</h1>
+      <div class="login-brand">
+        <div class="login-logo">☁️</div>
+        <h1 class="login-title">{{ siteName || 'CloudSearch' }}</h1>
+        <p class="login-subtitle">管理后台</p>
+      </div>
       <el-form ref="formRef" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="handleLogin">
         <el-form-item prop="username">
           <el-input v-model="form.username" placeholder="用户名" prefix-icon="User" />
@@ -11,17 +16,18 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" :loading="loading" class="login-btn" @click="handleLogin">
-            登录
+            {{ loading ? '登录中...' : '登 录' }}
           </el-button>
         </el-form-item>
       </el-form>
       <p v-if="errorMsg" class="error-msg">{{ errorMsg }}</p>
+      <p class="login-footer">CloudSearch v{{ appVersion }}</p>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { User, Lock } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { getSiteConfig, adminLogin } from '../../api'
@@ -31,8 +37,8 @@ const formRef = ref<InstanceType<typeof ElForm>>()
 const loading = ref(false)
 const errorMsg = ref('')
 const siteName = ref('')
+const appVersion = ref('')
 
-// 获取网站名称
 getSiteConfig().then(cfg => {
   if (cfg.site_name) siteName.value = cfg.site_name
 }).catch(() => {})
@@ -64,6 +70,14 @@ async function handleLogin() {
     loading.value = false
   }
 }
+
+onMounted(async () => {
+  try {
+    const h = await fetch('/health')
+    const hv = await h.json()
+    appVersion.value = hv.version || ''
+  } catch {}
+})
 </script>
 
 <style scoped>
@@ -72,29 +86,84 @@ async function handleLogin() {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+  position: relative;
+  overflow: hidden;
+}
+.login-bg-pattern {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.12) 0%, transparent 50%),
+    radial-gradient(circle at 80% 30%, rgba(118, 75, 162, 0.12) 0%, transparent 50%),
+    radial-gradient(circle at 50% 80%, rgba(64, 158, 255, 0.08) 0%, transparent 50%);
 }
 .login-card {
+  position: relative;
   width: 400px;
-  padding: 40px;
-  background: var(--bg-white);
-  border-radius: 16px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  padding: 48px 40px 36px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: var(--radius-xl);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
+}
+.login-brand {
+  text-align: center;
+  margin-bottom: 36px;
+}
+.login-logo {
+  font-size: 48px;
+  margin-bottom: 8px;
+  line-height: 1;
 }
 .login-title {
-  text-align: center;
-  font-size: 24px;
-  font-weight: 700;
-  color: #303133;
-  margin-bottom: 32px;
+  font-size: 26px;
+  font-weight: 800;
+  color: #1d2129;
+  margin: 0 0 4px;
+  letter-spacing: 1px;
+}
+.login-subtitle {
+  font-size: 14px;
+  color: #86909c;
+  margin: 0;
+  letter-spacing: 2px;
 }
 .login-btn {
   width: 100%;
+  height: 44px;
+  font-size: 15px;
+  letter-spacing: 4px;
+  border-radius: var(--radius-md);
 }
 .error-msg {
   text-align: center;
   color: #f56c6c;
-  font-size: 14px;
+  font-size: 13px;
   margin-top: 12px;
+  padding: 8px 12px;
+  background: #fef0f0;
+  border-radius: var(--radius-sm);
+  line-height: 1.4;
+}
+.login-footer {
+  text-align: center;
+  color: #c9cdd4;
+  font-size: 11px;
+  margin-top: 20px;
+  margin-bottom: 0;
+}
+
+[data-theme="dark"] .login-card {
+  background: rgba(29, 29, 29, 0.95);
+}
+[data-theme="dark"] .login-title {
+  color: #e5e5e5;
+}
+[data-theme="dark"] .login-subtitle {
+  color: #666666;
+}
+[data-theme="dark"] .error-msg {
+  background: rgba(245, 108, 108, 0.12);
 }
 </style>