xto-fronted 0.4.113 → 0.5.1

package/src/views/login/index.vue

@@ -252,7 +252,7 @@ const handleLogin = async () => {
   width: 100%;
   min-height: 100vh;
   display: flex;
-  background: var(--bg-color-page);
+  background: var(--xto-bg-color-page, #F9FAFB);
 }
 
 // 左侧品牌区域
@@ -262,7 +262,7 @@ const handleLogin = async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #002c8c 0%, #0958d9 50%, #1677ff 100%);
+  background: linear-gradient(135deg, #312E81 0%, #4338CA 50%, #4F46E5 100%);
   overflow: hidden;
 
   @media (max-width: 992px) {
@@ -274,7 +274,7 @@ const handleLogin = async () => {
     z-index: 2;
     padding: 60px;
     max-width: 520px;
-    color: #fff;
+    color: var(--xto-bg-color, #FFFFFF);
   }
 
   .brand-logo {
@@ -286,7 +286,7 @@ const handleLogin = async () => {
     .logo-icon {
       width: 48px;
       height: 48px;
-      color: #fff;
+      color: var(--xto-bg-color, #FFFFFF);
     }
 
     .logo-text {
@@ -324,7 +324,7 @@ const handleLogin = async () => {
       gap: 16px;
       padding: 16px;
       background: rgba(255, 255, 255, 0.1);
-      border-radius: var(--border-radius-large);
+      border-radius: var(--xto-border-radius-large, 8px);
       backdrop-filter: blur(10px);
       transition: all 0.3s ease;
 
@@ -341,7 +341,7 @@ const handleLogin = async () => {
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.2);
-      border-radius: var(--border-radius-base);
+      border-radius: var(--xto-border-radius-base, 6px);
       flex-shrink: 0;
 
       svg {
@@ -442,7 +442,7 @@ const handleLogin = async () => {
   flex-direction: column;
   justify-content: center;
   padding: 60px 80px;
-  background: var(--bg-color);
+  background: var(--xto-bg-color, #FFFFFF);
 
   @media (max-width: 768px) {
     width: 100%;
@@ -461,13 +461,13 @@ const handleLogin = async () => {
     h2 {
       font-size: 28px;
       font-weight: 600;
-      color: var(--color-text-primary);
+      color: var(--xto-color-text-primary, #1F2937);
       margin-bottom: 8px;
     }
 
     p {
       font-size: 14px;
-      color: var(--color-text-secondary);
+      color: var(--xto-color-text-secondary, #6B7280);
     }
   }
 
@@ -480,7 +480,7 @@ const handleLogin = async () => {
       display: block;
       font-size: 14px;
       font-weight: 500;
-      color: var(--color-text-regular);
+      color: var(--xto-color-text-regular, #4B5563);
       margin-bottom: 8px;
     }
 
@@ -494,7 +494,7 @@ const handleLogin = async () => {
 
     :deep(.x-input__prefix) {
       margin-right: 12px;
-      color: var(--color-text-placeholder);
+      color: var(--xto-color-text-placeholder, #9CA3AF);
     }
   }
 
@@ -506,12 +506,12 @@ const handleLogin = async () => {
 
     .forgot-link {
       font-size: 14px;
-      color: var(--color-primary);
+      color: var(--xto-color-primary, #4F46E5);
       text-decoration: none;
       transition: color 0.2s;
 
       &:hover {
-        color: var(--color-primary-dark-1);
+        color: var(--xto-color-primary-dark-1, #4338CA);
       }
     }
   }
@@ -521,13 +521,13 @@ const handleLogin = async () => {
     height: 44px;
     font-size: 16px;
     font-weight: 500;
-    border-radius: 8px;
+    border-radius: var(--xto-border-radius-large, 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);
+      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
     }
 
     &:active:not(:disabled) {
@@ -538,12 +538,12 @@ const handleLogin = async () => {
   .form-footer {
     margin-top: 32px;
     padding-top: 24px;
-    border-top: 1px solid var(--color-border-lighter);
+    border-top: 1px solid var(--xto-border-color-lighter, #F3F4F6);
     text-align: center;
 
     p {
       font-size: 13px;
-      color: var(--color-text-placeholder);
+      color: var(--xto-color-text-placeholder, #9CA3AF);
       margin-bottom: 16px;
     }
 
@@ -559,12 +559,12 @@ const handleLogin = async () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--color-fill);
+      background: var(--xto-fill-color, #F3F4F6);
       border: none;
       border-radius: 50%;
       cursor: pointer;
       transition: all 0.2s ease;
-      color: var(--color-text-secondary);
+      color: var(--xto-color-text-secondary, #6B7280);
 
       svg {
         width: 20px;
@@ -572,8 +572,8 @@ const handleLogin = async () => {
       }
 
       &:hover {
-        background: var(--color-primary-light-6);
-        color: var(--color-primary);
+        background: var(--xto-color-primary-light-6, #C7D2FE);
+        color: var(--xto-color-primary, #4F46E5);
         transform: translateY(-2px);
       }
     }
@@ -585,7 +585,7 @@ const handleLogin = async () => {
 
     p {
       font-size: 12px;
-      color: var(--color-text-placeholder);
+      color: var(--xto-color-text-placeholder, #9CA3AF);
     }
   }
 }

package/src/views/system/menu/index.vue

@@ -275,9 +275,9 @@ onMounted(() => {
                   <svg viewBox="0 0 64 41" fill="none">
                     <g transform="translate(0 1)">
                       <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"/>
-                      <g stroke="var(--color-text-placeholder)" stroke-width="2">
+                      <g stroke="var(--xto-color-text-placeholder, #9CA3AF)" stroke-width="2">
                         <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/>
-                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--color-fill)"/>
+                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--xto-fill-color, #F3F4F6)"/>
                       </g>
                     </g>
                   </svg>
@@ -446,15 +446,15 @@ onMounted(() => {
 <style lang="scss" scoped>
 .menu-page {
   padding: 24px;
-  background: var(--bg-color-page);
+  background: var(--xto-bg-color-page, #F9FAFB);
   min-height: 100%;
 }
 
 // 表格区域
 .table-section {
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  box-shadow: var(--box-shadow-card);
+  background: var(--xto-bg-color, #FFFFFF);
+  border-radius: var(--xto-border-radius-large, 8px);
+  box-shadow: var(--xto-shadow-subtle, 0 1px 2px 0 rgba(0,0,0,0.05));
   overflow: hidden;
 }
 
@@ -463,7 +463,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 16px 24px;
-  border-bottom: 1px solid var(--color-border-lighter);
+  border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
 
   .toolbar-left {
     display: flex;
@@ -472,7 +472,7 @@ onMounted(() => {
 
   .table-count {
     font-size: 14px;
-    color: var(--color-text-secondary);
+    color: var(--xto-color-text-secondary, #6B7280);
   }
 }
 
@@ -488,14 +488,14 @@ onMounted(() => {
   th, td {
     padding: 14px 16px;
     text-align: left;
-    border-bottom: 1px solid var(--color-border-lighter);
+    border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
   }
 
   th {
     font-size: 14px;
     font-weight: 500;
-    color: var(--color-text-secondary);
-    background: var(--color-fill-light);
+    color: var(--xto-color-text-secondary, #6B7280);
+    background: var(--xto-fill-color-light, #F9FAFB);
     white-space: nowrap;
   }
 
@@ -503,7 +503,7 @@ onMounted(() => {
     transition: background-color 0.2s;
 
     &:hover {
-      background: var(--color-primary-light-6);
+      background: var(--xto-color-primary-light-6, #C7D2FE);
     }
   }
 
@@ -522,7 +522,7 @@ onMounted(() => {
     flex-direction: column;
     align-items: center;
     gap: 16px;
-    color: var(--color-text-placeholder);
+    color: var(--xto-color-text-placeholder, #9CA3AF);
 
     svg {
       width: 64px;
@@ -533,8 +533,8 @@ onMounted(() => {
   .loading-spinner {
     width: 32px;
     height: 32px;
-    border: 3px solid var(--color-border-lighter);
-    border-top-color: var(--color-primary);
+    border: 3px solid var(--xto-border-color-lighter, #F3F4F6);
+    border-top-color: var(--xto-color-primary, #4F46E5);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
@@ -561,7 +561,7 @@ onMounted(() => {
   display: inline-block;
   width: 16px;
   height: 1px;
-  background: var(--color-border-light);
+  background: var(--xto-border-color-light, #E5E7EB);
   margin-right: 8px;
   vertical-align: middle;
 }
@@ -583,20 +583,20 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--color-fill-light);
-  border-radius: 6px;
+  background: var(--xto-fill-color-light, #F9FAFB);
+  border-radius: var(--xto-border-radius-base, 6px);
   font-size: 14px;
 }
 
 .menu-title {
   font-size: 14px;
   font-weight: 500;
-  color: var(--color-text-primary);
+  color: var(--xto-color-text-primary, #1F2937);
   cursor: pointer;
   transition: color 0.2s;
 
   &:hover {
-    color: var(--color-primary);
+    color: var(--xto-color-primary, #4F46E5);
   }
 }
 
@@ -616,9 +616,9 @@ onMounted(() => {
   font-family: 'SF Mono', Monaco, Consolas, monospace;
   font-size: 12px;
   padding: 4px 8px;
-  background: var(--color-fill-light);
-  border-radius: 4px;
-  color: var(--color-text-secondary);
+  background: var(--xto-fill-color-light, #F9FAFB);
+  border-radius: var(--xto-border-radius-small, 4px);
+  color: var(--xto-color-text-secondary, #6B7280);
 }
 
 .col-type {
@@ -636,10 +636,10 @@ onMounted(() => {
   min-width: 24px;
   height: 24px;
   padding: 0 8px;
-  background: var(--color-fill);
+  background: var(--xto-fill-color, #F3F4F6);
   border-radius: 12px;
   font-size: 12px;
-  color: var(--color-text-secondary);
+  color: var(--xto-color-text-secondary, #6B7280);
 }
 
 .col-status {
@@ -684,7 +684,7 @@ onMounted(() => {
 
   .status-label {
     font-size: 14px;
-    color: var(--color-text-secondary);
+    color: var(--xto-color-text-secondary, #6B7280);
   }
 }
 </style>

package/src/views/system/role/index.vue

@@ -237,9 +237,9 @@ onMounted(() => {
                   <svg viewBox="0 0 64 41" fill="none">
                     <g transform="translate(0 1)">
                       <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"/>
-                      <g stroke="var(--color-text-placeholder)" stroke-width="2">
+                      <g stroke="var(--xto-color-text-placeholder, #9CA3AF)" stroke-width="2">
                         <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/>
-                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--color-fill)"/>
+                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--xto-fill-color, #F3F4F6)"/>
                       </g>
                     </g>
                   </svg>
@@ -351,17 +351,17 @@ onMounted(() => {
 <style lang="scss" scoped>
 .role-page {
   padding: 24px;
-  background: var(--bg-color-page);
+  background: var(--xto-bg-color-page, #F9FAFB);
   min-height: 100%;
 }
 
 // 搜索区域
 .search-section {
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
+  background: var(--xto-bg-color, #FFFFFF);
+  border-radius: var(--xto-border-radius-large, 8px);
   padding: 20px 24px;
   margin-bottom: 16px;
-  box-shadow: var(--box-shadow-card);
+  box-shadow: var(--xto-shadow-subtle, 0 1px 2px 0 rgba(0,0,0,0.05));
 
   .search-form {
     display: flex;
@@ -381,9 +381,9 @@ onMounted(() => {
 
 // 表格区域
 .table-section {
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  box-shadow: var(--box-shadow-card);
+  background: var(--xto-bg-color, #FFFFFF);
+  border-radius: var(--xto-border-radius-large, 8px);
+  box-shadow: var(--xto-shadow-subtle, 0 1px 2px 0 rgba(0,0,0,0.05));
   overflow: hidden;
 }
 
@@ -392,7 +392,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 16px 24px;
-  border-bottom: 1px solid var(--color-border-lighter);
+  border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
 
   .toolbar-left {
     display: flex;
@@ -401,7 +401,7 @@ onMounted(() => {
 
   .table-count {
     font-size: 14px;
-    color: var(--color-text-secondary);
+    color: var(--xto-color-text-secondary, #6B7280);
   }
 }
 
@@ -417,14 +417,14 @@ onMounted(() => {
   th, td {
     padding: 14px 16px;
     text-align: left;
-    border-bottom: 1px solid var(--color-border-lighter);
+    border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
   }
 
   th {
     font-size: 14px;
     font-weight: 500;
-    color: var(--color-text-secondary);
-    background: var(--color-fill-light);
+    color: var(--xto-color-text-secondary, #6B7280);
+    background: var(--xto-fill-color-light, #F9FAFB);
     white-space: nowrap;
   }
 
@@ -432,7 +432,7 @@ onMounted(() => {
     transition: background-color 0.2s;
 
     &:hover {
-      background: var(--color-primary-light-6);
+      background: var(--xto-color-primary-light-6, #C7D2FE);
     }
   }
 
@@ -451,7 +451,7 @@ onMounted(() => {
     flex-direction: column;
     align-items: center;
     gap: 16px;
-    color: var(--color-text-placeholder);
+    color: var(--xto-color-text-placeholder, #9CA3AF);
 
     svg {
       width: 64px;
@@ -462,8 +462,8 @@ onMounted(() => {
   .loading-spinner {
     width: 32px;
     height: 32px;
-    border: 3px solid var(--color-border-lighter);
-    border-top-color: var(--color-primary);
+    border: 3px solid var(--xto-border-color-lighter, #F3F4F6);
+    border-top-color: var(--xto-color-primary, #4F46E5);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
@@ -482,11 +482,11 @@ onMounted(() => {
   display: inline-block;
   min-width: 32px;
   padding: 4px 10px;
-  background: var(--color-fill);
+  background: var(--xto-fill-color, #F3F4F6);
   border-radius: 12px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--xto-color-text-secondary, #6B7280);
   text-align: center;
 }
 
@@ -497,7 +497,7 @@ onMounted(() => {
 .role-name {
   font-size: 14px;
   font-weight: 500;
-  color: var(--color-text-primary);
+  color: var(--xto-color-text-primary, #1F2937);
 }
 
 .col-code {
@@ -510,7 +510,7 @@ onMounted(() => {
 
 .desc-text {
   font-size: 14px;
-  color: var(--color-text-secondary);
+  color: var(--xto-color-text-secondary, #6B7280);
 }
 
 .col-status {
@@ -525,10 +525,10 @@ onMounted(() => {
 
 .status-text {
   font-size: 13px;
-  color: var(--color-text-secondary);
+  color: var(--xto-color-text-secondary, #6B7280);
 
   &.enabled {
-    color: var(--color-success);
+    color: var(--xto-color-success, #10B981);
   }
 }
 
@@ -538,7 +538,7 @@ onMounted(() => {
 
 .time-text {
   font-size: 13px;
-  color: var(--color-text-secondary);
+  color: var(--xto-color-text-secondary, #6B7280);
 }
 
 .col-actions {
@@ -562,7 +562,7 @@ onMounted(() => {
   display: flex;
   justify-content: flex-end;
   padding: 16px 24px;
-  border-top: 1px solid var(--color-border-lighter);
+  border-top: 1px solid var(--xto-border-color-lighter, #F3F4F6);
 }
 
 // 弹窗表单
@@ -577,7 +577,7 @@ onMounted(() => {
 
   .status-label {
     font-size: 14px;
-    color: var(--color-text-secondary);
+    color: var(--xto-color-text-secondary, #6B7280);
   }
 }
 </style>