xto-fronted 0.4.113 → 0.5.0

package/src/views/dashboard/index.vue

@@ -155,7 +155,7 @@ const systemInfo = ref([
 <style lang="scss" scoped>
 .dashboard {
   padding: 24px;
-  background: var(--bg-color-page);
+  background: var(--xto-bg-color-page, #F9FAFB);
   min-height: 100%;
 }
 
@@ -181,14 +181,14 @@ const systemInfo = ref([
   align-items: flex-start;
   gap: 16px;
   padding: 20px;
-  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));
   transition: all 0.3s ease;
   overflow: hidden;
 
   &:hover {
-    box-shadow: var(--box-shadow-card-hover);
+    box-shadow: var(--xto-shadow-elevated, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1));
     transform: translateY(-4px);
 
     .stat-decoration {
@@ -202,7 +202,7 @@ const systemInfo = ref([
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--border-radius-large);
+    border-radius: var(--xto-border-radius-large, 8px);
     flex-shrink: 0;
 
     span {
@@ -217,7 +217,7 @@ const systemInfo = ref([
 
   .stat-title {
     font-size: 14px;
-    color: var(--color-text-secondary);
+    color: var(--xto-color-text-secondary, #6B7280);
     margin-bottom: 8px;
   }
 
@@ -242,13 +242,13 @@ const systemInfo = ref([
     }
 
     &.up {
-      color: var(--color-success);
-      background: var(--color-success-lighter);
+      color: var(--xto-color-success, #10B981);
+      background: var(--xto-color-success-lighter, #D1FAE5);
     }
 
     &.down {
-      color: var(--color-danger);
-      background: var(--color-danger-lighter);
+      color: var(--xto-color-danger, #EF4444);
+      background: var(--xto-color-danger-lighter, #FEE2E2);
     }
   }
 
@@ -285,35 +285,35 @@ const systemInfo = ref([
   h3 {
     font-size: 16px;
     font-weight: 600;
-    color: var(--color-text-primary);
+    color: var(--xto-color-text-primary, #1F2937);
   }
 
   .section-badge {
     font-size: 12px;
-    color: var(--color-text-placeholder);
-    background: var(--color-fill);
+    color: var(--xto-color-text-placeholder, #9CA3AF);
+    background: var(--xto-fill-color, #F3F4F6);
     padding: 4px 10px;
     border-radius: 12px;
   }
 
   .section-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);
     }
   }
 }
 
 // 快捷入口
 .quick-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;
-  box-shadow: var(--box-shadow-card);
+  box-shadow: var(--xto-shadow-subtle, 0 1px 2px 0 rgba(0,0,0,0.05));
 }
 
 .quick-grid {
@@ -327,17 +327,17 @@ const systemInfo = ref([
   align-items: center;
   gap: 16px;
   padding: 16px;
-  background: var(--color-fill-light);
-  border-radius: var(--border-radius-base);
+  background: var(--xto-fill-color-light, #F9FAFB);
+  border-radius: var(--xto-border-radius-base, 6px);
   text-decoration: none;
   transition: all 0.2s ease;
 
   &:hover {
-    background: var(--color-primary-light-6);
+    background: var(--xto-color-primary-light-6, #C7D2FE);
     transform: translateX(4px);
 
     .quick-arrow {
-      color: var(--color-primary);
+      color: var(--xto-color-primary, #4F46E5);
       transform: translateX(4px);
     }
   }
@@ -348,8 +348,8 @@ const systemInfo = ref([
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--bg-color);
-    border-radius: var(--border-radius-base);
+    background: var(--xto-bg-color, #FFFFFF);
+    border-radius: var(--xto-border-radius-base, 6px);
     font-size: 22px;
     flex-shrink: 0;
   }
@@ -362,13 +362,13 @@ const systemInfo = ref([
   .quick-title {
     font-size: 15px;
     font-weight: 500;
-    color: var(--color-text-primary);
+    color: var(--xto-color-text-primary, #1F2937);
     margin-bottom: 4px;
   }
 
   .quick-desc {
     font-size: 13px;
-    color: var(--color-text-secondary);
+    color: var(--xto-color-text-secondary, #6B7280);
   }
 
   .quick-arrow {
@@ -377,7 +377,7 @@ const systemInfo = ref([
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--color-text-placeholder);
+    color: var(--xto-color-text-placeholder, #9CA3AF);
     transition: all 0.2s ease;
 
     svg {
@@ -389,10 +389,10 @@ const systemInfo = ref([
 
 // 最近活动
 .activity-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;
-  box-shadow: var(--box-shadow-card);
+  box-shadow: var(--xto-shadow-subtle, 0 1px 2px 0 rgba(0,0,0,0.05));
 }
 
 .activity-list {
@@ -405,7 +405,7 @@ const systemInfo = ref([
   align-items: flex-start;
   gap: 12px;
   padding: 14px 0;
-  border-bottom: 1px solid var(--color-border-lighter);
+  border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
   position: relative;
 
   &:last-child {
@@ -424,11 +424,11 @@ const systemInfo = ref([
   font-weight: 500;
   flex-shrink: 0;
 
-  &.success { background: var(--color-success-lighter); color: var(--color-success); }
-  &.warning { background: var(--color-warning-lighter); color: var(--color-warning); }
-  &.info { background: var(--color-info-lighter); color: var(--color-info); }
-  &.danger { background: var(--color-danger-lighter); color: var(--color-danger); }
-  &.primary { background: var(--color-primary-light-6); color: var(--color-primary); }
+  &.success { background: var(--xto-color-success-lighter, #D1FAE5); color: var(--xto-color-success, #10B981); }
+  &.warning { background: var(--xto-color-warning-lighter, #FEF3C7); color: var(--xto-color-warning, #F59E0B); }
+  &.info { background: var(--xto-color-info-lighter, #E5E7EB); color: var(--xto-color-info, #6B7280); }
+  &.danger { background: var(--xto-color-danger-lighter, #FEE2E2); color: var(--xto-color-danger, #EF4444); }
+  &.primary { background: var(--xto-color-primary-light-6, #C7D2FE); color: var(--xto-color-primary, #4F46E5); }
 }
 
 .activity-content {
@@ -443,18 +443,18 @@ const systemInfo = ref([
 .activity-user {
   font-size: 14px;
   font-weight: 500;
-  color: var(--color-text-primary);
+  color: var(--xto-color-text-primary, #1F2937);
   margin-right: 8px;
 }
 
 .activity-action {
   font-size: 14px;
-  color: var(--color-text-secondary);
+  color: var(--xto-color-text-secondary, #6B7280);
 }
 
 .activity-time {
   font-size: 12px;
-  color: var(--color-text-placeholder);
+  color: var(--xto-color-text-placeholder, #9CA3AF);
 }
 
 .activity-dot {
@@ -467,19 +467,19 @@ const systemInfo = ref([
   border-radius: 50%;
   opacity: 0.6;
 
-  &.success { background: var(--color-success); }
-  &.warning { background: var(--color-warning); }
-  &.info { background: var(--color-info); }
-  &.danger { background: var(--color-danger); }
-  &.primary { background: var(--color-primary); }
+  &.success { background: var(--xto-color-success, #10B981); }
+  &.warning { background: var(--xto-color-warning, #F59E0B); }
+  &.info { background: var(--xto-color-info, #6B7280); }
+  &.danger { background: var(--xto-color-danger, #EF4444); }
+  &.primary { background: var(--xto-color-primary, #4F46E5); }
 }
 
 // 系统信息
 .system-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;
-  box-shadow: var(--box-shadow-card);
+  box-shadow: var(--xto-shadow-subtle, 0 1px 2px 0 rgba(0,0,0,0.05));
 }
 
 .system-grid {
@@ -503,18 +503,18 @@ const systemInfo = ref([
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
-  background: var(--color-fill-light);
-  border-radius: var(--border-radius-base);
+  background: var(--xto-fill-color-light, #F9FAFB);
+  border-radius: var(--xto-border-radius-base, 6px);
 
   .info-label {
     font-size: 14px;
-    color: var(--color-text-secondary);
+    color: var(--xto-color-text-secondary, #6B7280);
   }
 
   .info-value {
     font-size: 14px;
     font-weight: 500;
-    color: var(--color-text-primary);
+    color: var(--xto-color-text-primary, #1F2937);
   }
 }
 
@@ -534,13 +534,13 @@ const systemInfo = ref([
 
   .status-label {
     font-size: 14px;
-    color: var(--color-text-secondary);
+    color: var(--xto-color-text-secondary, #6B7280);
   }
 
   .status-value {
     font-size: 14px;
     font-weight: 500;
-    color: var(--color-text-primary);
+    color: var(--xto-color-text-primary, #1F2937);
   }
 }
 </style>

package/src/views/error/403.vue

@@ -33,10 +33,10 @@ const goBack = () => {
           <svg viewBox="0 0 200 120" fill="none" xmlns="http://www.w3.org/2000/svg">
             <!-- 盾牌 -->
             <path d="M100 15 L150 35 L150 70 C150 95 100 110 100 110 C100 110 50 95 50 70 L50 35 Z"
-                  fill="var(--color-warning-lighter)" stroke="var(--color-warning)" stroke-width="2"/>
+                  fill="var(--xto-color-warning-light-9, #FFFBEB)" stroke="var(--xto-color-warning, #F59E0B)" stroke-width="2"/>
             <!-- 锁 -->
-            <rect x="85" y="55" width="30" height="25" rx="4" fill="var(--color-warning)"/>
-            <path d="M92 55 V48 A8 8 0 0 1 108 48 V55" fill="none" stroke="var(--color-warning)" stroke-width="3"/>
+            <rect x="85" y="55" width="30" height="25" rx="4" fill="var(--xto-color-warning, #F59E0B)"/>
+            <path d="M92 55 V48 A8 8 0 0 1 108 48 V55" fill="none" stroke="var(--xto-color-warning, #F59E0B)" stroke-width="3"/>
             <!-- 禁止符号 -->
             <circle cx="100" cy="67" r="6" fill="none" stroke="#fff" stroke-width="2"/>
             <line x1="96" y1="63" x2="104" y2="71" stroke="#fff" stroke-width="2"/>
@@ -87,7 +87,7 @@ const goBack = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--bg-color-page);
+  background: var(--xto-bg-color-page, #F9FAFB);
   position: relative;
   overflow: hidden;
 }
@@ -115,7 +115,7 @@ const goBack = () => {
       height: 400px;
       top: -100px;
       right: -100px;
-      background: var(--color-warning);
+      background: var(--xto-color-warning, #F59E0B);
     }
 
     &.circle-2 {
@@ -123,7 +123,7 @@ const goBack = () => {
       height: 300px;
       bottom: -50px;
       left: -50px;
-      background: var(--color-warning);
+      background: var(--xto-color-warning, #F59E0B);
     }
 
     &.circle-3 {
@@ -132,7 +132,7 @@ const goBack = () => {
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      background: var(--color-warning-light);
+      background: var(--xto-color-warning-light, #FDE68A);
     }
   }
 }
@@ -151,7 +151,7 @@ const goBack = () => {
   .code-digit {
     font-size: 80px;
     font-weight: 700;
-    color: var(--color-text-primary);
+    color: var(--xto-color-text-primary, #1F2937);
     line-height: 1;
   }
 
@@ -162,13 +162,13 @@ const goBack = () => {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-light) 100%);
+    background: linear-gradient(135deg, var(--xto-color-warning, #F59E0B) 0%, var(--xto-color-warning-light, #FDE68A) 100%);
     border-radius: 50%;
 
     .zero-inner {
       font-size: 48px;
       font-weight: 700;
-      color: #fff;
+      color: var(--xto-bg-color, #FFFFFF);
     }
   }
 }
@@ -182,13 +182,13 @@ const goBack = () => {
 .error-title {
   font-size: 24px;
   font-weight: 600;
-  color: var(--color-text-primary);
+  color: var(--xto-color-text-primary, #1F2937);
   margin-bottom: 12px;
 }
 
 .error-desc {
   font-size: 14px;
-  color: var(--color-text-secondary);
+  color: var(--xto-color-text-secondary, #6B7280);
   margin-bottom: 32px;
 }
 
@@ -200,7 +200,7 @@ const goBack = () => {
 
   :deep(.x-button) {
     padding: 12px 24px;
-    border-radius: 8px;
+    border-radius: var(--xto-border-radius-large, 8px);
 
     svg {
       width: 18px;
@@ -212,13 +212,13 @@ const goBack = () => {
 
 .error-tip {
   padding: 20px;
-  background: var(--color-warning-lighter);
-  border-radius: var(--border-radius-large);
+  background: var(--xto-color-warning-lighter, #FEF3C7);
+  border-radius: var(--xto-border-radius-large, 8px);
 
   p {
     font-size: 14px;
     font-weight: 500;
-    color: var(--color-text-primary);
+    color: var(--xto-color-text-primary, #1F2937);
     margin-bottom: 12px;
   }
 
@@ -229,7 +229,7 @@ const goBack = () => {
 
     li {
       font-size: 13px;
-      color: var(--color-text-secondary);
+      color: var(--xto-color-text-secondary, #6B7280);
       padding: 4px 0;
       position: relative;
       padding-left: 16px;
@@ -242,7 +242,7 @@ const goBack = () => {
         transform: translateY(-50%);
         width: 6px;
         height: 6px;
-        background: var(--color-warning);
+        background: var(--xto-color-warning, #F59E0B);
         border-radius: 50%;
         opacity: 0.6;
       }

package/src/views/error/404.vue

@@ -32,16 +32,16 @@ const goBack = () => {
         <div class="error-illustration">
           <svg viewBox="0 0 200 120" fill="none" xmlns="http://www.w3.org/2000/svg">
             <!-- 页面图标 -->
-            <rect x="40" y="20" width="120" height="80" rx="8" fill="var(--color-fill)" stroke="var(--color-border)" stroke-width="2"/>
-            <rect x="50" y="30" width="100" height="60" rx="4" fill="var(--bg-color)"/>
-            <line x1="60" y1="45" x2="140" y2="45" stroke="var(--color-border-light)" stroke-width="2"/>
-            <line x1="60" y1="55" x2="120" y2="55" stroke="var(--color-border-light)" stroke-width="2"/>
-            <line x1="60" y1="65" x2="100" y2="65" stroke="var(--color-border-light)" stroke-width="2"/>
+            <rect x="40" y="20" width="120" height="80" rx="8" fill="var(--xto-fill-color, #F3F4F6)" stroke="var(--xto-border-color, #D1D5DB)" stroke-width="2"/>
+            <rect x="50" y="30" width="100" height="60" rx="4" fill="var(--xto-bg-color, #FFFFFF)"/>
+            <line x1="60" y1="45" x2="140" y2="45" stroke="var(--xto-border-color-light, #E5E7EB)" stroke-width="2"/>
+            <line x1="60" y1="55" x2="120" y2="55" stroke="var(--xto-border-color-light, #E5E7EB)" stroke-width="2"/>
+            <line x1="60" y1="65" x2="100" y2="65" stroke="var(--xto-border-color-light, #E5E7EB)" stroke-width="2"/>
             <!-- 问号 -->
-            <text x="100" y="75" text-anchor="middle" fill="var(--color-primary)" font-size="24" font-weight="600">?</text>
+            <text x="100" y="75" text-anchor="middle" fill="var(--xto-color-primary, #4F46E5)" font-size="24" font-weight="600">?</text>
             <!-- 搜索图标 -->
-            <circle cx="150" cy="35" r="12" stroke="var(--color-primary)" stroke-width="2" fill="none"/>
-            <line x1="158" y1="43" x2="168" y2="53" stroke="var(--color-primary)" stroke-width="2" stroke-linecap="round"/>
+            <circle cx="150" cy="35" r="12" stroke="var(--xto-color-primary, #4F46E5)" stroke-width="2" fill="none"/>
+            <line x1="158" y1="43" x2="168" y2="53" stroke="var(--xto-color-primary, #4F46E5)" stroke-width="2" stroke-linecap="round"/>
           </svg>
         </div>
 
@@ -89,7 +89,7 @@ const goBack = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--bg-color-page);
+  background: var(--xto-bg-color-page, #F9FAFB);
   position: relative;
   overflow: hidden;
 }
@@ -117,7 +117,7 @@ const goBack = () => {
       height: 400px;
       top: -100px;
       right: -100px;
-      background: var(--color-primary);
+      background: var(--xto-color-primary, #4F46E5);
     }
 
     &.circle-2 {
@@ -125,7 +125,7 @@ const goBack = () => {
       height: 300px;
       bottom: -50px;
       left: -50px;
-      background: var(--color-info);
+      background: var(--xto-color-info, #6B7280);
     }
 
     &.circle-3 {
@@ -134,7 +134,7 @@ const goBack = () => {
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      background: var(--color-primary-light-3);
+      background: var(--xto-color-primary-light-3, #818CF8);
     }
   }
 }
@@ -153,7 +153,7 @@ const goBack = () => {
   .code-digit {
     font-size: 80px;
     font-weight: 700;
-    color: var(--color-text-primary);
+    color: var(--xto-color-text-primary, #1F2937);
     line-height: 1;
   }
 
@@ -164,13 +164,13 @@ const goBack = () => {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light-1) 100%);
+    background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5) 0%, var(--xto-color-primary-light-1, #5B54E8) 100%);
     border-radius: 50%;
 
     .zero-inner {
       font-size: 48px;
       font-weight: 700;
-      color: #fff;
+      color: var(--xto-bg-color, #FFFFFF);
     }
   }
 }
@@ -184,13 +184,13 @@ const goBack = () => {
 .error-title {
   font-size: 24px;
   font-weight: 600;
-  color: var(--color-text-primary);
+  color: var(--xto-color-text-primary, #1F2937);
   margin-bottom: 12px;
 }
 
 .error-desc {
   font-size: 14px;
-  color: var(--color-text-secondary);
+  color: var(--xto-color-text-secondary, #6B7280);
   margin-bottom: 32px;
 }
 
@@ -202,7 +202,7 @@ const goBack = () => {
 
   :deep(.x-button) {
     padding: 12px 24px;
-    border-radius: 8px;
+    border-radius: var(--xto-border-radius-large, 8px);
 
     svg {
       width: 18px;
@@ -214,13 +214,13 @@ const goBack = () => {
 
 .error-tip {
   padding: 20px;
-  background: var(--color-fill-light);
-  border-radius: var(--border-radius-large);
+  background: var(--xto-fill-color-light, #F9FAFB);
+  border-radius: var(--xto-border-radius-large, 8px);
 
   p {
     font-size: 14px;
     font-weight: 500;
-    color: var(--color-text-primary);
+    color: var(--xto-color-text-primary, #1F2937);
     margin-bottom: 12px;
   }
 
@@ -231,7 +231,7 @@ const goBack = () => {
 
     li {
       font-size: 13px;
-      color: var(--color-text-secondary);
+      color: var(--xto-color-text-secondary, #6B7280);
       padding: 4px 0;
       position: relative;
       padding-left: 16px;
@@ -244,7 +244,7 @@ const goBack = () => {
         transform: translateY(-50%);
         width: 6px;
         height: 6px;
-        background: var(--color-primary);
+        background: var(--xto-color-primary, #4F46E5);
         border-radius: 50%;
         opacity: 0.6;
       }