xto-fronted 0.5.3 → 0.6.0

package/src/components/Layout/index.vue

@@ -139,7 +139,7 @@ const showMixSidebar = computed(() => {
       width: 100%;
       height: 50px;
       background-color: var(--xto-bg-color, #FFFFFF);
-      border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+      border-bottom: 1px solid var(--xto-border-color-lighter, #EDF2F7);
       flex-shrink: 0;
     }
 
@@ -163,7 +163,7 @@ const showMixSidebar = computed(() => {
     height: 50px;
     box-sizing: border-box;
     background-color: var(--xto-bg-color, #FFFFFF);
-    border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+    border-bottom: 1px solid var(--xto-border-color-lighter, #EDF2F7);
     flex-shrink: 0;
   }
 
@@ -186,14 +186,14 @@ const showMixSidebar = computed(() => {
     height: 50px;
     box-sizing: border-box;
     background-color: var(--xto-bg-color, #FFFFFF);
-    border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+    border-bottom: 1px solid var(--xto-border-color-lighter, #EDF2F7);
     flex-shrink: 0;
   }
 
   &__content {
     flex: 1;
     overflow: auto;
-    background-color: var(--xto-bg-color-page, #F9FAFB);
+    background-color: var(--xto-bg-color-page, #F5F7FA);
     padding: 0;
   }
 }

package/src/style.scss

@@ -9,6 +9,6 @@
 /* 全局样式变量（与 @xto/core 主题系统对齐） */
 :root {
   --xto-bg-color: #FFFFFF;
-  --xto-bg-color-page: #F9FAFB;
-  --xto-border-color-lighter: #F3F4F6;
+  --xto-bg-color-page: #F5F7FA;
+  --xto-border-color-lighter: #EDF2F7;
 }

package/src/views/login/index.vue

@@ -252,17 +252,17 @@ const handleLogin = async () => {
   width: 100%;
   min-height: 100vh;
   display: flex;
-  background: var(--xto-bg-color-page, #F9FAFB);
+  background: var(--xto-bg-color-page, #F5F7FA);
 }
 
-// 左侧品牌区域
+// 左侧品牌区域（淡紫蓝渐变网格背景，纯 CSS 无图片资源）
 .login-brand {
   flex: 1;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #312E81 0%, #4338CA 50%, #4F46E5 100%);
+  background: linear-gradient(135deg, #172E6E 0%, #1E3A8A 45%, #1D4ED8 100%);
   overflow: hidden;
 
   @media (max-width: 992px) {
@@ -392,7 +392,7 @@ const handleLogin = async () => {
     }
   }
 
-  // 背景装饰
+  // 背景装饰（淡紫蓝网点 + 光斑）
   .brand-bg {
     position: absolute;
     inset: 0;
@@ -403,9 +403,10 @@ const handleLogin = async () => {
       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;
+        radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.2px),
+        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+      background-size: 28px 28px, 56px 56px, 56px 56px;
     }
 
     .bg-glow {
@@ -414,7 +415,7 @@ const handleLogin = async () => {
       right: -10%;
       width: 60%;
       height: 60%;
-      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+      background: radial-gradient(circle, rgba(147, 197, 253, 0.35) 0%, transparent 70%);
       animation: glow-pulse 8s ease-in-out infinite;
     }
 
@@ -424,7 +425,7 @@ const handleLogin = async () => {
       left: -10%;
       width: 40%;
       height: 40%;
-      background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
+      background: radial-gradient(circle, rgba(196, 181, 253, 0.28) 0%, transparent 60%);
     }
   }
 }
@@ -461,13 +462,13 @@ const handleLogin = async () => {
     h2 {
       font-size: 28px;
       font-weight: 600;
-      color: var(--xto-color-text-primary, #1F2937);
+      color: var(--xto-color-text-primary, #0F172A);
       margin-bottom: 8px;
     }
 
     p {
       font-size: 14px;
-      color: var(--xto-color-text-secondary, #6B7280);
+      color: var(--xto-color-text-secondary, #64748B);
     }
   }
 
@@ -480,7 +481,7 @@ const handleLogin = async () => {
       display: block;
       font-size: 14px;
       font-weight: 500;
-      color: var(--xto-color-text-regular, #4B5563);
+      color: var(--xto-color-text-regular, #334155);
       margin-bottom: 8px;
     }
 
@@ -494,7 +495,7 @@ const handleLogin = async () => {
 
     :deep(.x-input__prefix) {
       margin-right: 12px;
-      color: var(--xto-color-text-placeholder, #9CA3AF);
+      color: var(--xto-color-text-placeholder, #94A3B8);
     }
   }
 
@@ -506,12 +507,12 @@ const handleLogin = async () => {
 
     .forgot-link {
       font-size: 14px;
-      color: var(--xto-color-primary, #4F46E5);
+      color: var(--xto-color-primary, #1D4ED8);
       text-decoration: none;
       transition: color 0.2s;
 
       &:hover {
-        color: var(--xto-color-primary-dark-1, #4338CA);
+        color: var(--xto-color-primary-dark-1, #1E40AF);
       }
     }
   }
@@ -521,13 +522,13 @@ const handleLogin = async () => {
     height: 44px;
     font-size: 16px;
     font-weight: 500;
-    border-radius: var(--xto-border-radius-large, 8px);
+    border-radius: var(--xto-border-radius-large, 10px);
     letter-spacing: 4px;
     transition: all 0.3s ease;
 
     &:hover:not(:disabled) {
       transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
+      box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
     }
 
     &:active:not(:disabled) {
@@ -538,12 +539,12 @@ const handleLogin = async () => {
   .form-footer {
     margin-top: 32px;
     padding-top: 24px;
-    border-top: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+    border-top: 1px solid var(--xto-border-color-lighter, #EDF2F7);
     text-align: center;
 
     p {
       font-size: 13px;
-      color: var(--xto-color-text-placeholder, #9CA3AF);
+      color: var(--xto-color-text-placeholder, #94A3B8);
       margin-bottom: 16px;
     }
 
@@ -559,12 +560,12 @@ const handleLogin = async () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--xto-fill-color, #F3F4F6);
+      background: var(--xto-fill-color, #F1F5F9);
       border: none;
       border-radius: 50%;
       cursor: pointer;
       transition: all 0.2s ease;
-      color: var(--xto-color-text-secondary, #6B7280);
+      color: var(--xto-color-text-secondary, #64748B);
 
       svg {
         width: 20px;
@@ -572,8 +573,8 @@ const handleLogin = async () => {
       }
 
       &:hover {
-        background: var(--xto-color-primary-light-6, #C7D2FE);
-        color: var(--xto-color-primary, #4F46E5);
+        background: var(--xto-color-primary-light-8, #DBEAFE);
+        color: var(--xto-color-primary, #1D4ED8);
         transform: translateY(-2px);
       }
     }
@@ -585,7 +586,7 @@ const handleLogin = async () => {
 
     p {
       font-size: 12px;
-      color: var(--xto-color-text-placeholder, #9CA3AF);
+      color: var(--xto-color-text-placeholder, #94A3B8);
     }
   }
 }