xto-fronted 0.4.85 → 0.4.86

package/src/views/login/index.vue

@@ -1,587 +1,195 @@
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { Button, Icon } from '@xto/base'
-import { Form, FormItem, Input, Checkbox } from '@xto/form'
-import { Message } from '@xto/feedback'
-import { login } from '@/api/auth'
-import { setTokenInfo } from '@/utils/auth'
-import { getAppId, getClientId } from '@/utils/config'
-
-const router = useRouter()
-const route = useRoute()
-
-const loading = ref(false)
-const rememberMe = ref(false)
-
-const formData = reactive({
-  uid: '',
-  password: ''
-})
-
-const rules: Record<string, any[]> = {
-  uid: [
-    { required: true, message: '请输入用户名', trigger: 'blur' }
-  ],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
-  ]
-}
-
-const formRef = ref()
-
-// 登录
-const handleLogin = async () => {
-  try {
-    await formRef.value?.validate()
-    loading.value = true
-
-    // 调用登录 API
-    const result = await login({
-      appId: getAppId(),
-      clientId: getClientId(),
-      uid: formData.uid,
-      password: formData.password,
-      code: true
-    })
-
-    // 保存 token
-    setTokenInfo(result)
-
-    Message.success('登录成功')
-
-    // 获取重定向地址
-    const redirect = route.query.redirect as string || '/'
-
-    // 跳转到目标页面（路由守卫会自动获取用户信息和菜单）
-    router.push(redirect)
-  } catch (error) {
-    console.error('登录失败:', error)
-  } finally {
-    loading.value = false
-  }
-}
-</script>
-
-<template>
-  <div class="login-page">
-    <!-- 左侧品牌区域 -->
-    <div class="login-brand">
-      <div class="brand-content">
-        <!-- Logo -->
-        <div class="brand-logo">
-          <div class="logo-icon">
-            <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <rect width="48" height="48" rx="12" fill="currentColor"/>
-              <path d="M14 24L20 30L34 16" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </div>
-          <span class="logo-text">XTO</span>
-        </div>
-
-        <!-- 标语 -->
-        <div class="brand-slogan">
-          <h1>企业级后台管理解决方案</h1>
-          <p>开箱即用的中后台前端/设计解决方案</p>
-        </div>
-
-        <!-- 特性列表 -->
-        <div class="brand-features">
-          <div class="feature-item">
-            <div class="feature-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
-              </svg>
-            </div>
-            <div class="feature-text">
-              <h4>高性能</h4>
-              <p>极致的渲染性能与响应速度</p>
-            </div>
-          </div>
-          <div class="feature-item">
-            <div class="feature-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="3" y="3" width="18" height="18" rx="2"/>
-                <path d="M9 9h6M9 12h6M9 15h4"/>
-              </svg>
-            </div>
-            <div class="feature-text">
-              <h4>丰富组件</h4>
-              <p>60+ 高质量业务组件</p>
-            </div>
-          </div>
-          <div class="feature-item">
-            <div class="feature-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="12" cy="12" r="10"/>
-                <path d="M12 6v6l4 2"/>
-              </svg>
-            </div>
-            <div class="feature-text">
-              <h4>持续更新</h4>
-              <p>活跃的社区与快速迭代</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- 底部装饰 -->
-        <div class="brand-decoration">
-          <div class="decoration-line"></div>
-          <div class="decoration-dots">
-            <span></span><span></span><span></span>
-          </div>
-        </div>
-      </div>
-
-      <!-- 背景装饰 -->
-      <div class="brand-bg">
-        <div class="bg-grid"></div>
-        <div class="bg-glow"></div>
-        <div class="bg-pattern"></div>
-      </div>
-    </div>
-
-    <!-- 右侧登录区域 -->
-    <div class="login-form-section">
-      <div class="form-container">
-        <!-- 头部 -->
-        <div class="form-header">
-          <h2>欢迎登录</h2>
-          <p>请输入您的账户信息</p>
-        </div>
-
-        <!-- 表单 -->
-        <Form
-          ref="formRef"
-          :model="formData"
-          :rules="rules"
-          class="login-form"
-          label-width="0"
-        >
-          <FormItem prop="uid">
-            <div class="input-wrapper">
-              <label class="input-label">用户名</label>
-              <Input
-                v-model="formData.uid"
-                placeholder="请输入用户名"
-                size="large"
-              >
-                <template #prefix>
-                  <Icon name="user" :size="18" />
-                </template>
-              </Input>
-            </div>
-          </FormItem>
-
-          <FormItem prop="password">
-            <div class="input-wrapper">
-              <label class="input-label">密码</label>
-              <Input
-                v-model="formData.password"
-                type="password"
-                placeholder="请输入密码"
-                size="large"
-                show-password
-                @keyup.enter="handleLogin"
-              >
-                <template #prefix>
-                  <Icon name="lock" :size="18" />
-                </template>
-              </Input>
-            </div>
-          </FormItem>
-
-          <div class="form-options">
-            <Checkbox v-model="rememberMe">记住我</Checkbox>
-            <a href="#" class="forgot-link">忘记密码？</a>
-          </div>
-
-          <FormItem>
-            <Button
-              type="primary"
-              size="large"
-              :loading="loading"
-              class="login-btn"
-              @click="handleLogin"
-            >
-              <span v-if="!loading">登 录</span>
-              <span v-else>登录中...</span>
-            </Button>
-          </FormItem>
-        </Form>
-
-        <!-- 底部 -->
-        <div class="form-footer">
-          <p>其他登录方式</p>
-          <div class="social-login">
-            <button class="social-btn" title="企业微信">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
-              </svg>
-            </button>
-            <button class="social-btn" title="钉钉">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/>
-              </svg>
-            </button>
-            <button class="social-btn" title="飞书">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- 版权信息 -->
-      <div class="copyright">
-        <p>© 2024 XTO Team. All rights reserved.</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.login-page {
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  background: var(--bg-color-page);
-}
-
-// 左侧品牌区域
-.login-brand {
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #002c8c 0%, #0958d9 50%, #1677ff 100%);
-  overflow: hidden;
-
-  @media (max-width: 992px) {
-    display: none;
-  }
-
-  .brand-content {
-    position: relative;
-    z-index: 2;
-    padding: 60px;
-    max-width: 520px;
-    color: #fff;
-  }
-
-  .brand-logo {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 48px;
-
-    .logo-icon {
-      width: 48px;
-      height: 48px;
-      color: #fff;
-    }
-
-    .logo-text {
-      font-size: 28px;
-      font-weight: 700;
-      letter-spacing: 2px;
-    }
-  }
-
-  .brand-slogan {
-    margin-bottom: 48px;
-
-    h1 {
-      font-size: 32px;
-      font-weight: 600;
-      line-height: 1.3;
-      margin-bottom: 12px;
-    }
-
-    p {
-      font-size: 16px;
-      opacity: 0.8;
-      line-height: 1.6;
-    }
-  }
-
-  .brand-features {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-
-    .feature-item {
-      display: flex;
-      align-items: flex-start;
-      gap: 16px;
-      padding: 16px;
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: var(--border-radius-large);
-      backdrop-filter: blur(10px);
-      transition: all 0.3s ease;
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.15);
-        transform: translateX(8px);
-      }
-    }
-
-    .feature-icon {
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: var(--border-radius-base);
-      flex-shrink: 0;
-
-      svg {
-        width: 20px;
-        height: 20px;
-      }
-    }
-
-    .feature-text {
-      h4 {
-        font-size: 15px;
-        font-weight: 600;
-        margin-bottom: 4px;
-      }
-
-      p {
-        font-size: 13px;
-        opacity: 0.8;
-      }
-    }
-  }
-
-  .brand-decoration {
-    position: absolute;
-    bottom: 60px;
-    left: 60px;
-    right: 60px;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    .decoration-line {
-      flex: 1;
-      height: 1px;
-      background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent);
-    }
-
-    .decoration-dots {
-      display: flex;
-      gap: 8px;
-
-      span {
-        width: 6px;
-        height: 6px;
-        background: rgba(255, 255, 255, 0.5);
-        border-radius: 50%;
-      }
-    }
-  }
-
-  // 背景装饰
-  .brand-bg {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    overflow: hidden;
-
-    .bg-grid {
-      position: absolute;
-      inset: 0;
-      background-image:
-        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
-      background-size: 60px 60px;
-    }
-
-    .bg-glow {
-      position: absolute;
-      top: -20%;
-      right: -10%;
-      width: 60%;
-      height: 60%;
-      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
-      animation: glow-pulse 8s ease-in-out infinite;
-    }
-
-    .bg-pattern {
-      position: absolute;
-      bottom: -10%;
-      left: -10%;
-      width: 40%;
-      height: 40%;
-      background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
-    }
-  }
-}
-
-@keyframes glow-pulse {
-  0%, 100% { opacity: 0.6; transform: scale(1); }
-  50% { opacity: 1; transform: scale(1.1); }
-}
-
-// 右侧登录区域
-.login-form-section {
-  width: 500px;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 60px 80px;
-  background: var(--bg-color);
-
-  @media (max-width: 768px) {
-    width: 100%;
-    padding: 40px 24px;
-  }
-
-  .form-container {
-    width: 100%;
-    max-width: 360px;
-    margin: 0 auto;
-  }
-
-  .form-header {
-    margin-bottom: 40px;
-
-    h2 {
-      font-size: 28px;
-      font-weight: 600;
-      color: var(--color-text-primary);
-      margin-bottom: 8px;
-    }
-
-    p {
-      font-size: 14px;
-      color: var(--color-text-secondary);
-    }
-  }
-
-  .login-form {
-    .input-wrapper {
-      margin-bottom: 4px;
-    }
-
-    .input-label {
-      display: block;
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--color-text-regular);
-      margin-bottom: 8px;
-    }
-
-    :deep(.x-form-item) {
-      margin-bottom: 24px;
-    }
-
-    :deep(.x-input) {
-      --x-input-border-radius: 8px;
-    }
-
-    :deep(.x-input__prefix) {
-      margin-right: 12px;
-      color: var(--color-text-placeholder);
-    }
-  }
-
-  .form-options {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 24px;
-
-    .forgot-link {
-      font-size: 14px;
-      color: var(--color-primary);
-      text-decoration: none;
-      transition: color 0.2s;
-
-      &:hover {
-        color: var(--color-primary-dark-1);
-      }
-    }
-  }
-
-  .login-btn {
-    width: 100%;
-    height: 44px;
-    font-size: 16px;
-    font-weight: 500;
-    border-radius: 8px;
-    letter-spacing: 4px;
-    transition: all 0.3s ease;
-
-    &:hover:not(:disabled) {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(22, 119, 255, 0.4);
-    }
-
-    &:active:not(:disabled) {
-      transform: translateY(0);
-    }
-  }
-
-  .form-footer {
-    margin-top: 32px;
-    padding-top: 24px;
-    border-top: 1px solid var(--color-border-lighter);
-    text-align: center;
-
-    p {
-      font-size: 13px;
-      color: var(--color-text-placeholder);
-      margin-bottom: 16px;
-    }
-
-    .social-login {
-      display: flex;
-      justify-content: center;
-      gap: 16px;
-    }
-
-    .social-btn {
-      width: 44px;
-      height: 44px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--color-fill);
-      border: none;
-      border-radius: 50%;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      color: var(--color-text-secondary);
-
-      svg {
-        width: 20px;
-        height: 20px;
-      }
-
-      &:hover {
-        background: var(--color-primary-light-6);
-        color: var(--color-primary);
-        transform: translateY(-2px);
-      }
-    }
-  }
-
-  .copyright {
-    margin-top: 48px;
-    text-align: center;
-
-    p {
-      font-size: 12px;
-      color: var(--color-text-placeholder);
-    }
-  }
-}
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Button, Icon } from '@xto/base'
+import { Form, FormItem, Input, Checkbox } from '@xto/form'
+import { Message } from '@xto/feedback'
+import { login } from '@/api/auth'
+import { setTokenInfo } from '@/utils/auth'
+import { getAppId, getClientId } from '@/utils/config'
+
+const router = useRouter()
+const route = useRoute()
+
+const loading = ref(false)
+const rememberMe = ref(false)
+
+const formData = reactive({
+  uid: '',
+  password: ''
+})
+
+const rules: Record<string, any[]> = {
+  uid: [
+    { required: true, message: '请输入用户名', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
+  ]
+}
+
+const formRef = ref()
+
+// 登录
+const handleLogin = async () => {
+  try {
+    await formRef.value?.validate()
+    loading.value = true
+
+    // 调用登录 API
+    const result = await login({
+      appId: getAppId(),
+      clientId: getClientId(),
+      uid: formData.uid,
+      password: formData.password,
+      code: true
+    })
+
+    // 保存 token
+    setTokenInfo(result)
+
+    Message.success('登录成功')
+
+    // 获取重定向地址
+    const redirect = route.query.redirect as string || '/'
+
+    // 跳转到目标页面（路由守卫会自动获取用户信息和菜单）
+    router.push(redirect)
+  } catch (error) {
+    console.error('登录失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="login">
+    <div class="login__container">
+      <div class="login__header">
+        <img src="/vite.svg" alt="Logo" class="login__logo" />
+        <h1 class="login__title">Xto Demo</h1>
+        <p class="login__subtitle">后台管理系统</p>
+      </div>
+
+      <Form
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        class="login__form"
+        label-width="0"
+      >
+        <FormItem prop="uid">
+          <Input
+            v-model="formData.uid"
+            placeholder="用户名"
+            size="large"
+          >
+            <template #prefix>
+              <Icon name="user" :size="18" />
+            </template>
+          </Input>
+        </FormItem>
+
+        <FormItem prop="password">
+          <Input
+            v-model="formData.password"
+            type="password"
+            placeholder="密码"
+            size="large"
+            show-password
+            @keyup.enter="handleLogin"
+          >
+            <template #prefix>
+              <Icon name="lock" :size="18" />
+            </template>
+          </Input>
+        </FormItem>
+
+        <FormItem>
+          <Checkbox v-model="rememberMe">记住我</Checkbox>
+        </FormItem>
+
+        <FormItem>
+          <Button
+            type="primary"
+            size="large"
+            :loading="loading"
+            class="login__submit"
+            @click="handleLogin"
+          >
+            登录
+          </Button>
+        </FormItem>
+      </Form>
+
+      <div class="login__footer">
+        <p>请输入您的用户名和密码</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.login {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 15%;
+  background: linear-gradient(135deg, var(--color-primary-light-9) 0%, var(--color-primary-light-7) 100%);
+
+  &__container {
+    width: 400px;
+    padding: 40px;
+    background-color: var(--bg-color);
+    border-radius: var(--border-radius-large);
+    box-shadow: var(--box-shadow-dark);
+  }
+
+  &__header {
+    text-align: center;
+    margin-bottom: 30px;
+  }
+
+  &__logo {
+    width: 60px;
+    height: 60px;
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 600;
+    color: var(--color-primary);
+    margin: 15px 0 5px;
+  }
+
+  &__subtitle {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+  }
+
+  &__form {
+    :deep(.x-form-item) {
+      margin-bottom: 20px;
+    }
+
+    :deep(.x-input__prefix) {
+      margin-right: 8px;
+    }
+  }
+
+  &__submit {
+    width: 100%;
+  }
+
+  &__footer {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 12px;
+    color: var(--color-text-placeholder);
+  }
+}
 </style>