xto-fronted 0.4.86 → 0.4.87

package/src/views/login/index.vue

@@ -65,131 +65,523 @@ const handleLogin = async () => {
 </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 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>
 
-      <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 class="copyright">
+        <p>© 2024 XTO Team. All rights reserved.</p>
       </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.login {
+.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: flex-end;
-  padding-right: 15%;
-  background: linear-gradient(135deg, var(--color-primary-light-9) 0%, var(--color-primary-light-7) 100%);
+  justify-content: center;
+  background: linear-gradient(135deg, #002c8c 0%, #0958d9 50%, #1677ff 100%);
+  overflow: hidden;
 
-  &__container {
-    width: 400px;
-    padding: 40px;
-    background-color: var(--bg-color);
-    border-radius: var(--border-radius-large);
-    box-shadow: var(--box-shadow-dark);
+  @media (max-width: 992px) {
+    display: none;
   }
 
-  &__header {
-    text-align: center;
-    margin-bottom: 30px;
+  .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;
+    }
   }
 
-  &__logo {
-    width: 60px;
-    height: 60px;
+  .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;
+    }
   }
 
-  &__title {
-    font-size: 28px;
-    font-weight: 600;
-    color: var(--color-primary);
-    margin: 15px 0 5px;
+  .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;
+      }
+    }
   }
 
-  &__subtitle {
-    font-size: 14px;
-    color: var(--color-text-secondary);
+  .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%;
+      }
+    }
   }
 
-  &__form {
+  // 背景装饰
+  .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: 20px;
+      margin-bottom: 24px;
+    }
+
+    :deep(.x-input) {
+      --x-input-border-radius: 8px;
     }
 
     :deep(.x-input__prefix) {
-      margin-right: 8px;
+      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);
+      }
     }
   }
 
-  &__submit {
+  .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);
+    }
   }
 
-  &__footer {
+  .form-footer {
+    margin-top: 32px;
+    padding-top: 24px;
+    border-top: 1px solid var(--color-border-lighter);
     text-align: center;
-    margin-top: 20px;
-    font-size: 12px;
-    color: var(--color-text-placeholder);
+
+    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>