From d7e250e1fbc070021364e37a9370a1fccfeafd72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Thu, 17 Sep 2026 16:19:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E7=99=BB=E5=BD=95=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E5=93=81=E7=89=8C=E5=8C=BA=E9=87=8D=E5=81=9A=E4=B8=BA?=
 =?UTF-8?q?=E5=AE=A2=E8=BF=B9V1=E6=B7=B1=E8=93=9D=E8=A7=86=E8=A7=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 .../core/views/login/LoginLeftView.vue        | 619 ++----------------
 1 file changed, 56 insertions(+), 563 deletions(-)

diff --git a/admin/src/components/core/views/login/LoginLeftView.vue b/admin/src/components/core/views/login/LoginLeftView.vue
index af6a904..45c8584 100644
--- a/admin/src/components/core/views/login/LoginLeftView.vue
+++ b/admin/src/components/core/views/login/LoginLeftView.vue
@@ -1,602 +1,95 @@
-<!-- 登录、注册、忘记密码左侧背景 -->
+<!-- 登录、注册、忘记密码左侧品牌区（客迹视觉V1） -->
 <template>
-  <div class="login-left-view">
-    <div class="logo">
-      <ArtLogo class="icon" size="46" />
-      <h1 class="title">{{ AppConfig.systemInfo.name }}</h1>
-    </div>
-
-    <div class="left-img">
-      <ThemeSvg :src="loginIcon" size="100%" />
-    </div>
+  <div class="login-left-view" :style="{ backgroundImage: `url(${bg})` }">
+    <img class="logo" :src="logoWhite" alt="客迹 KEJI ANALYTICS" />
 
     <div class="text-wrap">
-      <h1> {{ $t('login.leftView.title') }} </h1>
-      <p> {{ $t('login.leftView.subTitle') }} </p>
+      <h1>{{ $t('login.leftView.title') }}</h1>
+      <p class="sub-title">{{ $t('login.leftView.subTitle') }}</p>
+      <span class="accent-bar"></span>
+      <p class="slogan">{{ $t('login.leftView.slogan') }}</p>
     </div>
 
-    <!-- 几何装饰元素 -->
-    <div class="geometric-decorations">
-      <!-- 基础几何形状 -->
-      <div class="geo-element circle-outline animate-fade-in-up" style="animation-delay: 0s"></div>
-      <div
-        class="geo-element square-rotated animate-fade-in-left"
-        style="animation-delay: 0s"
-      ></div>
-      <div class="geo-element circle-small animate-fade-in-up" style="animation-delay: 0.3s"></div>
-
-      <div
-        class="geo-element square-bottom-right animate-fade-in-right"
-        style="animation-delay: 0s"
-      ></div>
-
-      <!-- 背景泡泡 -->
-      <div class="geo-element bg-bubble animate-scale-in" style="animation-delay: 0.5"></div>
-
-      <!-- 太阳/月亮 -->
-      <div
-        class="geo-element circle-top-right animate-fade-in-down"
-        style="animation-delay: 0.5"
-        @click="themeAnimation"
-      ></div>
-
-      <!-- 装饰点 -->
-      <div class="geo-element dot dot-top-left animate-bounce-in" style="animation-delay: 0s"></div>
-      <div
-        class="geo-element dot dot-top-right animate-bounce-in"
-        style="animation-delay: 0s"
-      ></div>
-      <div
-        class="geo-element dot dot-center-right animate-bounce-in"
-        style="animation-delay: 0s"
-      ></div>
-
-      <!-- 叠加方块组 -->
-      <div class="squares-group">
-        <i
-          class="geo-element square square-blue animate-fade-in-left-rotated-blue"
-          style="animation-delay: 0.2s"
-        ></i>
-        <i
-          class="geo-element square square-pink animate-fade-in-left-rotated-pink"
-          style="animation-delay: 0.4s"
-        ></i>
-        <i
-          class="geo-element square square-purple animate-fade-in-left-no-rotation"
-          style="animation-delay: 0.6s"
-        ></i>
-      </div>
-    </div>
+    <p class="footer">{{ $t('login.leftView.footer') }}</p>
   </div>
 </template>
 
 <script setup lang="ts">
-  import AppConfig from '@/config'
-  import loginIcon from '@imgs/svg/login_icon.svg'
-  import { themeAnimation } from '@/utils/ui/animation'
-
-  // 定义 props
-  defineProps<{
-    hideContent?: boolean // 是否隐藏内容，只显示 logo
-  }>()
+  import bg from '@imgs/login/login-left-background.png'
+  import logoWhite from '@imgs/logo-w.png'
 </script>
 
 <style lang="scss" scoped>
-  // 颜色变量定义
-  $primary-light-7: var(--el-color-primary-light-7);
-  $primary-light-8: var(--el-color-primary-light-8);
-  $primary-light-9: var(--el-color-primary-light-9);
-  $primary-base: var(--el-color-primary);
-  $main-bg: var(--default-box-color);
-
-  // 混合颜色函数
-  $bg-mix-light-9: color-mix(in srgb, $primary-light-9 100%, $main-bg);
-  $bg-mix-light-8: color-mix(in srgb, $primary-light-8 80%, $main-bg);
-  $bg-mix-light-7: color-mix(in srgb, $primary-light-7 80%, $main-bg);
-
   .login-left-view {
     position: relative;
     box-sizing: border-box;
-    width: 65vw;
+    width: 58vw;
     height: 100%;
-    padding: 15px;
     overflow: hidden;
-    background-color: $bg-mix-light-9;
+    background-color: #0b1630; /* 图片加载前/失败兜底 */
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
 
     .logo {
-      position: relative;
-      z-index: 100;
-      display: flex;
-      align-items: center;
-
-      .title {
-        margin-left: 10px;
-        font-size: 20px;
-        font-weight: 400;
-      }
-    }
-
-    .left-img {
       position: absolute;
-      inset: 0 0 10.5%;
+      top: 56px;
+      left: 64px;
       z-index: 10;
-      width: 40%;
-      margin: auto;
-      animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+      display: block;
+      width: auto;
+      height: 52px;
     }
 
     .text-wrap {
       position: absolute;
-      bottom: 80px;
-      width: 100%;
-      text-align: center;
-      animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+      top: 24%;
+      left: 64px;
+      z-index: 10;
 
       h1 {
-        font-size: 24px;
-        font-weight: 400;
-        color: var(--art-gray-900) !important;
+        max-width: 80%;
+        font-size: 38px;
+        font-weight: 700;
+        color: #fff;
+        letter-spacing: 2px;
       }
 
-      p {
-        margin-top: 10px;
+      .sub-title {
+        margin-top: 14px;
+        font-size: 18px;
+        color: #dbe6f5;
+      }
+
+      .accent-bar {
+        display: block;
+        width: 50px;
+        height: 6px;
+        margin-top: 24px;
+        background: #2563eb;
+        border-radius: 3px;
+      }
+
+      .slogan {
+        margin-top: 24px;
         font-size: 14px;
-        color: var(--art-gray-600) !important;
+        color: #a8c0e8;
+        letter-spacing: 4px;
       }
     }
 
-    .geometric-decorations {
-      .geo-element {
-        position: absolute;
-        opacity: 0;
-        animation-fill-mode: forwards;
-        animation-duration: 0.8s;
-        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-      }
-
-      // 动画 mixin
-      @mixin fadeAnimation($direction: '', $rotation: 0deg) {
-        from {
-          opacity: 0;
-
-          @if $direction == 'up' {
-            transform: translateY(30px) rotate($rotation);
-          } @else if $direction == 'down' {
-            transform: translateY(-30px) rotate($rotation);
-          } @else if $direction == 'left' {
-            transform: translateX(-30px) rotate($rotation);
-          } @else if $direction == 'right' {
-            transform: translateX(30px) rotate($rotation);
-          }
-        }
-
-        to {
-          opacity: 1;
-
-          @if $direction == 'up' or $direction == 'down' {
-            transform: translateY(0) rotate($rotation);
-          } @else {
-            transform: translateX(0) rotate($rotation);
-          }
-        }
-      }
-
-      // 动画定义
-      @keyframes fadeInUp {
-        @include fadeAnimation('up');
-      }
-
-      @keyframes fadeInDown {
-        @include fadeAnimation('down');
-      }
-
-      @keyframes fadeInLeft {
-        @include fadeAnimation('left');
-      }
-
-      @keyframes fadeInLeftRotated {
-        @include fadeAnimation('left', -25deg);
-      }
-
-      @keyframes fadeInRight {
-        @include fadeAnimation('right');
-      }
-
-      @keyframes fadeInRightRotated {
-        @include fadeAnimation('right', 45deg);
-      }
-
-      @keyframes fadeInLeftRotatedBlue {
-        @include fadeAnimation('left', -10deg);
-      }
-
-      @keyframes fadeInLeftRotatedPink {
-        @include fadeAnimation('left', 10deg);
-      }
-
-      @keyframes fadeInLeftNoRotation {
-        @include fadeAnimation('left');
-      }
-
-      @keyframes scaleIn {
-        from {
-          opacity: 0;
-          transform: scale(0.8);
-        }
-
-        to {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-
-      @keyframes bounceIn {
-        0% {
-          opacity: 0;
-          transform: scale(0.3);
-        }
-
-        50% {
-          opacity: 1;
-          transform: scale(1.05);
-        }
-
-        70% {
-          transform: scale(0.9);
-        }
-
-        100% {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-
-      @keyframes lineGrow {
-        from {
-          opacity: 0;
-        }
-
-        to {
-          opacity: 1;
-        }
-      }
-
-      @keyframes slideInLeft {
-        from {
-          opacity: 0;
-          transform: translateX(-30px);
-        }
-
-        to {
-          opacity: 1;
-          transform: translateX(0);
-        }
-      }
-
-      // 动画类
-      .animate-fade-in-up {
-        animation-name: fadeInUp;
-      }
-
-      .animate-fade-in-down {
-        animation-name: fadeInDown;
-      }
-
-      .animate-fade-in-left {
-        animation-name: fadeInLeft;
-      }
-
-      .animate-fade-in-right {
-        animation-name: fadeInRight;
-      }
-
-      .animate-scale-in {
-        animation-name: scaleIn;
-        animation-duration: 1.2s;
-      }
-
-      .animate-bounce-in {
-        animation-name: bounceIn;
-        animation-duration: 0.6s;
-      }
-
-      .animate-fade-in-left-rotated-blue {
-        animation-name: fadeInLeftRotatedBlue;
-      }
-
-      .animate-fade-in-left-rotated-pink {
-        animation-name: fadeInLeftRotatedPink;
-      }
-
-      .animate-fade-in-left-no-rotation {
-        animation-name: fadeInLeftNoRotation;
-      }
-
-      // 基础几何形状
-      .circle-outline {
-        top: 10%;
-        left: 25%;
-        width: 42px;
-        height: 42px;
-        border: 2px solid $primary-light-8;
-        border-radius: 50%;
-      }
-
-      .square-rotated {
-        top: 50%;
-        left: 16%;
-        width: 60px;
-        height: 60px;
-        background-color: $bg-mix-light-8;
-
-        &.animate-fade-in-left {
-          animation-name: fadeInLeftRotated;
-        }
-      }
-
-      .circle-small {
-        bottom: 26%;
-        left: 30%;
-        width: 18px;
-        height: 18px;
-        background-color: $primary-light-8;
-        border-radius: 50%;
-      }
-
-      // 太阳/月亮效果
-      .circle-top-right {
-        top: 3%;
-        right: 3%;
-        z-index: 100;
-        width: 50px;
-        height: 50px;
-        cursor: pointer;
-        background: $bg-mix-light-7;
-        border-radius: 50%;
-        transition: all 0.3s;
-
-        &::after {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 100%;
-          height: 100%;
-          content: '';
-          background: linear-gradient(to right, #fcbb04, #fffc00);
-          border-radius: 50%;
-          opacity: 0;
-          transition: all 0.5s;
-          transform: translate(-50%, -50%);
-        }
-
-        &:hover {
-          box-shadow: 0 0 36px #fffc00;
-
-          &::after {
-            opacity: 1;
-          }
-        }
-      }
-
-      .square-bottom-right {
-        right: 10%;
-        bottom: 10%;
-        width: 50px;
-        height: 50px;
-        background-color: $primary-light-8;
-
-        &.animate-fade-in-right {
-          animation-name: fadeInRightRotated;
-        }
-      }
-
-      // 背景泡泡
-      .bg-bubble {
-        top: -120px;
-        right: -120px;
-        width: 360px;
-        height: 360px;
-        background-color: $bg-mix-light-8;
-        border-radius: 50%;
-      }
-
-      // 装饰点
-      .dot {
-        width: 14px;
-        height: 14px;
-        background-color: $primary-light-7;
-        border-radius: 50%;
-
-        &.dot-top-left {
-          top: 140px;
-          left: 100px;
-        }
-
-        &.dot-top-right {
-          top: 140px;
-          right: 120px;
-        }
-
-        &.dot-center-right {
-          top: 46%;
-          right: 22%;
-          background-color: $primary-light-8;
-        }
-      }
-
-      // 叠加方块组
-      .squares-group {
-        position: absolute;
-        bottom: 18px;
-        left: 20px;
-        width: 140px;
-        height: 140px;
-        pointer-events: none;
-
-        .square {
-          position: absolute;
-          display: block;
-          border-radius: 8px;
-          box-shadow: 0 8px 24px rgb(64 87 167 / 12%);
-
-          &.square-blue {
-            top: 12px;
-            left: 30px;
-            z-index: 2;
-            width: 50px;
-            height: 50px;
-            background-color: rgb(from $primary-base r g b / 30%);
-          }
-
-          &.square-pink {
-            top: 30px;
-            left: 48px;
-            z-index: 1;
-            width: 70px;
-            height: 70px;
-            background-color: rgb(from $primary-base r g b / 15%);
-          }
-
-          &.square-purple {
-            top: 66px;
-            left: 86px;
-            z-index: 3;
-            width: 32px;
-            height: 32px;
-            background-color: rgb(from $primary-base r g b / 45%);
-          }
-        }
-
-        // 装饰线条
-        &::after {
-          position: absolute;
-          top: 86px;
-          left: 72px;
-          width: 80px;
-          height: 1px;
-          content: '';
-          background: linear-gradient(90deg, var(--el-color-primary-light-6), transparent);
-          opacity: 0;
-          transform: rotate(50deg);
-          animation: lineGrow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
-          animation-delay: 1.2s;
-        }
-      }
-    }
-
-    @media only screen and (width <= 1600px) {
-      width: 60vw;
-
-      .text-wrap {
-        bottom: 40px;
-      }
+    .footer {
+      position: absolute;
+      bottom: 56px;
+      left: 64px;
+      z-index: 10;
+      font-size: 14px;
+      color: #7d94c4;
+      letter-spacing: 8px;
     }
 
     @media only screen and (width <= 1180px) {
-      width: auto;
-      height: auto;
-      padding: 0;
-      // 隐藏背景和其他内容，只保留 logo
-      background: transparent;
-
-      .left-img,
-      .text-wrap,
-      .geometric-decorations {
-        display: none;
-      }
-
-      .logo {
-        display: none;
-      }
-    }
-  }
-
-  // 暗色主题
-  .dark .login-left-view {
-    background-color: color-mix(in srgb, $primary-light-9 60%, #070707);
-
-    @media only screen and (width <= 1180px) {
-      background: transparent;
-    }
-
-    .geometric-decorations {
-      // 月亮效果
-      .circle-top-right {
-        background-color: $bg-mix-light-8;
-        box-shadow: 0 0 25px #333 inset;
-        transition: all 0.3s ease-in-out 0.1s;
-        rotate: -48deg;
-
-        &::before {
-          position: absolute;
-          top: 0;
-          left: 15px;
-          width: 50px;
-          height: 50px;
-          content: '';
-          background-color: $bg-mix-light-9;
-          border-radius: 50%;
-          transition: all 0.3s ease-in-out;
-        }
-
-        &:hover {
-          background-color: transparent;
-          box-shadow: 0 40px 25px #ddd inset;
-
-          &::before {
-            left: 18px;
-          }
-
-          &::after {
-            opacity: 0;
-          }
-        }
-      }
-
-      .bg-bubble {
-        background-color: $bg-mix-light-9;
-      }
-
-      // 其他元素颜色调整
-      .square-rotated {
-        background-color: $bg-mix-light-9;
-      }
-
-      .circle-small,
-      .dot {
-        background-color: $primary-light-8;
-      }
-
-      .square-bottom-right {
-        background-color: $primary-light-9;
-      }
-
-      .dot.dot-top-right {
-        background-color: $primary-light-8;
-      }
-    }
-
-    // 方块组暗色调整
-    .squares-group {
-      .square {
-        box-shadow: none;
-
-        &.square-blue {
-          background-color: rgb(from $primary-base r g b / 18%);
-        }
-
-        &.square-pink {
-          background-color: rgb(from $primary-base r g b / 10%);
-        }
-
-        &.square-purple {
-          background-color: rgb(from $primary-base r g b / 20%);
-        }
-      }
-
-      &::after {
-        background: linear-gradient(90deg, $primary-light-8, transparent);
-      }
+      display: none;
     }
   }
 </style>