xto-fronted 0.4.72 → 0.4.73

package/src/views/login/index.vue

@@ -1,195 +1,587 @@
-<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);
-  }
-}
+<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);
+    }
+  }
+}
 </style>