xto-fronted 0.4.113 → 0.5.0

package/src/components/Layout/MixTopMenu.vue

@@ -592,7 +592,7 @@ onUnmounted(() => {
   &__logo-text {
     font-size: 16px;
     font-weight: 600;
-    color: var(--color-primary);
+    color: var(--xto-color-primary, #4F46E5);
   }
 
   &__menu {
@@ -684,9 +684,9 @@ onUnmounted(() => {
     height: 16px;
     font-size: 12px;
     font-weight: 600;
-    color: var(--color-primary);
-    background-color: var(--color-primary-light-8);
-    border-radius: 4px;
+    color: var(--xto-color-primary, #4F46E5);
+    background-color: var(--xto-color-primary-light-8, #C7D2FE);
+    border-radius: var(--xto-border-radius-small, 4px);
   }
 
   // 右侧操作区域
@@ -700,28 +700,28 @@ onUnmounted(() => {
     position: relative;
     display: flex;
     align-items: center;
-    background-color: var(--color-fill-light);
-    border-radius: var(--border-radius-base);
+    background-color: var(--xto-fill-color-light, #F9FAFB);
+    border-radius: var(--xto-border-radius-base, 6px);
     padding: 0 12px;
     height: 32px;
     width: 200px;
 
     &-icon {
-      color: var(--color-text-secondary);
+      color: var(--xto-color-text-secondary, #6B7280);
     }
 
     &-input {
       flex: 1;
       height: 100%;
       font-size: 14px;
-      color: var(--color-text-primary);
+      color: var(--xto-color-text-primary, #1F2937);
       background: transparent;
       border: none;
       outline: none;
       padding-left: 8px;
 
       &::placeholder {
-        color: var(--color-text-placeholder);
+        color: var(--xto-color-text-placeholder, #9CA3AF);
       }
     }
 
@@ -733,9 +733,9 @@ onUnmounted(() => {
       min-width: 200px;
       max-height: 300px;
       overflow-y: auto;
-      background-color: var(--bg-color);
-      border-radius: var(--border-radius-base);
-      box-shadow: var(--box-shadow);
+      background-color: var(--xto-bg-color, #FFFFFF);
+      border-radius: var(--xto-border-radius-base, 6px);
+      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));
       z-index: 100;
     }
 
@@ -752,17 +752,17 @@ onUnmounted(() => {
       transition: background-color 0.2s;
 
       &:hover {
-        background-color: var(--color-fill);
+        background-color: var(--xto-fill-color, #F3F4F6);
       }
 
       &-title {
         font-size: 14px;
-        color: var(--color-text-primary);
+        color: var(--xto-color-text-primary, #1F2937);
       }
 
       &-parent {
         font-size: 12px;
-        color: var(--color-text-secondary);
+        color: var(--xto-color-text-secondary, #6B7280);
         margin-left: auto;
       }
     }
@@ -784,15 +784,15 @@ onUnmounted(() => {
       height: 16px;
       font-size: 12px;
       font-weight: 600;
-      color: var(--color-primary);
-      background-color: var(--color-primary-light-8);
-      border-radius: 4px;
+      color: var(--xto-color-primary, #4F46E5);
+      background-color: var(--xto-color-primary-light-8, #C7D2FE);
+      border-radius: var(--xto-border-radius-small, 4px);
     }
 
     &-empty {
       padding: 16px 12px;
       text-align: center;
-      color: var(--color-text-secondary);
+      color: var(--xto-color-text-secondary, #6B7280);
       font-size: 14px;
     }
   }
@@ -804,13 +804,13 @@ onUnmounted(() => {
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    border-radius: var(--border-radius-base);
-    color: var(--color-text-regular);
+    border-radius: var(--xto-border-radius-base, 6px);
+    color: var(--xto-color-text-regular, #4B5563);
     transition: all 0.2s;
 
     &:hover {
-      background-color: var(--color-fill);
-      color: var(--color-primary);
+      background-color: var(--xto-fill-color, #F3F4F6);
+      color: var(--xto-color-primary, #4F46E5);
     }
   }
 
@@ -825,17 +825,17 @@ onUnmounted(() => {
       gap: 8px;
       cursor: pointer;
       padding: 4px 8px;
-      border-radius: var(--border-radius-base);
+      border-radius: var(--xto-border-radius-base, 6px);
       transition: background-color 0.2s;
 
       &:hover {
-        background-color: var(--color-fill);
+        background-color: var(--xto-fill-color, #F3F4F6);
       }
     }
 
     &-name {
       font-size: 14px;
-      color: var(--color-text-primary);
+      color: var(--xto-color-text-primary, #1F2937);
       max-width: 100px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -844,7 +844,7 @@ onUnmounted(() => {
 
     &-arrow {
       font-size: 10px;
-      color: var(--color-text-secondary);
+      color: var(--xto-color-text-secondary, #6B7280);
       transition: transform 0.2s;
 
       &.is-active {
@@ -857,11 +857,11 @@ onUnmounted(() => {
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
+    background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5), var(--xto-color-primary-light-3, #818CF8));
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
+    color: var(--xto-bg-color, #FFFFFF);
     font-size: 14px;
     font-weight: 500;
   }
@@ -872,9 +872,9 @@ onUnmounted(() => {
     top: calc(100% + 8px);
     right: 0;
     min-width: 200px;
-    background-color: var(--bg-color);
-    border-radius: var(--border-radius-base);
-    box-shadow: var(--box-shadow);
+    background-color: var(--xto-bg-color, #FFFFFF);
+    border-radius: var(--xto-border-radius-base, 6px);
+    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));
     overflow: hidden;
     z-index: 100;
 
@@ -889,11 +889,11 @@ onUnmounted(() => {
       width: 40px;
       height: 40px;
       border-radius: 50%;
-      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
+      background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5), var(--xto-color-primary-light-3, #818CF8));
       display: flex;
       align-items: center;
       justify-content: center;
-      color: #fff;
+      color: var(--xto-bg-color, #FFFFFF);
       font-size: 16px;
       font-weight: 500;
     }
@@ -905,18 +905,18 @@ onUnmounted(() => {
     &-name {
       font-size: 14px;
       font-weight: 500;
-      color: var(--color-text-primary);
+      color: var(--xto-color-text-primary, #1F2937);
     }
 
     &-role {
       font-size: 12px;
-      color: var(--color-text-secondary);
+      color: var(--xto-color-text-secondary, #6B7280);
       margin-top: 2px;
     }
 
     &-divider {
       height: 1px;
-      background-color: var(--color-border-lighter);
+      background-color: var(--xto-border-color-lighter, #F3F4F6);
     }
 
     &-menu {
@@ -930,20 +930,20 @@ onUnmounted(() => {
       padding: 10px 16px;
       cursor: pointer;
       font-size: 14px;
-      color: var(--color-text-regular);
+      color: var(--xto-color-text-regular, #4B5563);
       transition: all 0.2s;
 
       &:hover {
-        background-color: var(--color-fill);
-        color: var(--color-text-primary);
+        background-color: var(--xto-fill-color, #F3F4F6);
+        color: var(--xto-color-text-primary, #1F2937);
       }
 
       &--danger {
-        color: var(--color-danger);
+        color: var(--xto-color-danger, #EF4444);
 
         &:hover {
-          background-color: var(--color-danger-light);
-          color: var(--color-danger);
+          background-color: var(--xto-color-danger-light, #FEE2E2);
+          color: var(--xto-color-danger, #EF4444);
         }
       }
     }
@@ -959,7 +959,7 @@ onUnmounted(() => {
   .settings-title {
     font-size: 14px;
     font-weight: 500;
-    color: var(--color-text-primary);
+    color: var(--xto-color-text-primary, #1F2937);
     margin-bottom: 12px;
   }
 
@@ -975,31 +975,31 @@ onUnmounted(() => {
     align-items: center;
     gap: 8px;
     padding: 12px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-base);
+    border: 1px solid var(--xto-border-color, #D1D5DB);
+    border-radius: var(--xto-border-radius-base, 6px);
     cursor: pointer;
     transition: all 0.2s;
 
     &:hover {
-      border-color: var(--color-primary-light-5);
+      border-color: var(--xto-color-primary-light-5, #A5B4FC);
     }
 
     &.is-active {
-      border-color: var(--color-primary);
-      background-color: var(--color-primary-light-9);
+      border-color: var(--xto-color-primary, #4F46E5);
+      background-color: var(--xto-color-primary-light-9, #EEF2FF);
     }
 
     &__preview {
       width: 48px;
       height: 36px;
-      border: 1px solid var(--color-border-light);
+      border: 1px solid var(--xto-border-color-light, #E5E7EB);
       border-radius: 2px;
       overflow: hidden;
     }
 
     &__label {
       font-size: 12px;
-      color: var(--color-text-regular);
+      color: var(--xto-color-text-regular, #4B5563);
     }
   }
 
@@ -1011,7 +1011,7 @@ onUnmounted(() => {
     .preview-aside {
       width: 25%;
       height: 100%;
-      background-color: var(--color-primary-light-7);
+      background-color: var(--xto-color-primary-light-7, #E0E7FF);
     }
 
     .preview-main {
@@ -1021,12 +1021,12 @@ onUnmounted(() => {
 
       .preview-header {
         height: 20%;
-        background-color: var(--color-border-light);
+        background-color: var(--xto-border-color-light, #E5E7EB);
       }
 
       .preview-content {
         flex: 1;
-        background-color: var(--bg-color-page);
+        background-color: var(--xto-bg-color-page, #F9FAFB);
       }
     }
   }
@@ -1038,12 +1038,12 @@ onUnmounted(() => {
 
     .preview-header-full {
       height: 25%;
-      background-color: var(--color-primary-light-7);
+      background-color: var(--xto-color-primary-light-7, #E0E7FF);
     }
 
     .preview-content-full {
       flex: 1;
-      background-color: var(--bg-color-page);
+      background-color: var(--xto-bg-color-page, #F9FAFB);
     }
   }
 
@@ -1054,12 +1054,12 @@ onUnmounted(() => {
 
     .preview-header-mix {
       height: 25%;
-      background-color: var(--color-primary-light-7);
+      background-color: var(--xto-color-primary-light-7, #E0E7FF);
       display: flex;
 
       .preview-mix-left {
         width: 30%;
-        background-color: var(--color-primary);
+        background-color: var(--xto-color-primary, #4F46E5);
       }
     }
 
@@ -1069,12 +1069,12 @@ onUnmounted(() => {
 
       .preview-mix-aside {
         width: 25%;
-        background-color: var(--color-primary-light-8);
+        background-color: var(--xto-color-primary-light-8, #C7D2FE);
       }
 
       .preview-mix-content {
         flex: 1;
-        background-color: var(--bg-color-page);
+        background-color: var(--xto-bg-color-page, #F9FAFB);
       }
     }
   }
@@ -1087,7 +1087,7 @@ onUnmounted(() => {
   .color-option {
     width: 24px;
     height: 24px;
-    border-radius: 4px;
+    border-radius: var(--xto-border-radius-small, 4px);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -1099,7 +1099,7 @@ onUnmounted(() => {
     }
 
     &.is-active {
-      box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--color-primary);
+      box-shadow: 0 0 0 2px var(--xto-bg-color, #FFFFFF), 0 0 0 4px var(--xto-color-primary, #4F46E5);
     }
   }
 
@@ -1116,7 +1116,7 @@ onUnmounted(() => {
 
     span {
       font-size: 14px;
-      color: var(--color-text-regular);
+      color: var(--xto-color-text-regular, #4B5563);
     }
   }
 
@@ -1131,7 +1131,7 @@ onUnmounted(() => {
       width: 100%;
       height: 100%;
       border-radius: 11px;
-      background-color: var(--color-border);
+      background-color: var(--xto-border-color, #D1D5DB);
       position: relative;
       transition: background-color 0.2s;
 
@@ -1142,7 +1142,7 @@ onUnmounted(() => {
         left: 2px;
         width: 18px;
         height: 18px;
-        background-color: #fff;
+        background-color: var(--xto-bg-color, #FFFFFF);
         border-radius: 50%;
         transition: left 0.2s;
       }
@@ -1150,7 +1150,7 @@ onUnmounted(() => {
 
     &.is-checked {
       .switch-core {
-        background-color: var(--color-primary);
+        background-color: var(--xto-color-primary, #4F46E5);
 
         &::after {
           left: 24px;

package/src/components/Layout/Sidebar.vue

@@ -167,8 +167,8 @@ const handleLogout = () => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: var(--bg-color);
-  border-right: 1px solid var(--color-border-lighter);
+  background-color: var(--xto-bg-color, #FFFFFF);
+  border-right: 1px solid var(--xto-border-color-lighter, #F3F4F6);
 
   &--collapsed {
     .sidebar__logo {
@@ -183,7 +183,7 @@ const handleLogout = () => {
     align-items: center;
     padding: 0 20px;
     gap: 10px;
-    border-bottom: 1px solid var(--color-border-lighter);
+    border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
   }
 
   &__logo-img {
@@ -194,7 +194,7 @@ const handleLogout = () => {
   &__logo-text {
     font-size: 16px;
     font-weight: 600;
-    color: var(--color-primary);
+    color: var(--xto-color-primary, #4F46E5);
   }
 
   &__menu {
@@ -205,7 +205,7 @@ const handleLogout = () => {
 
   &__user {
     padding: 10px;
-    border-top: 1px solid var(--color-border-lighter);
+    border-top: 1px solid var(--xto-border-color-lighter, #F3F4F6);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -224,7 +224,7 @@ const handleLogout = () => {
 
   &__user-role {
     font-size: 12px;
-    color: var(--color-text-secondary);
+    color: var(--xto-color-text-secondary, #6B7280);
   }
 }
 </style>

package/src/components/Layout/SidebarMenuItem.vue

@@ -156,8 +156,8 @@ const hasChildren = computed(() => {
   height: 16px;
   font-size: 12px;
   font-weight: 600;
-  color: var(--color-primary);
-  background-color: var(--color-primary-light-8);
-  border-radius: 4px;
+  color: var(--xto-color-primary, #4F46E5);
+  background-color: var(--xto-color-primary-light-8, #C7D2FE);
+  border-radius: var(--xto-border-radius-small, 4px);
 }
 </style>

package/src/components/Layout/Tabs.vue

@@ -99,14 +99,14 @@ const handleClose = (path: string) => {
   :deep(.t-tabs__item) {
     height: 32px;
     line-height: 32px;
-    border: 1px solid var(--color-border-lighter);
+    border: 1px solid var(--xto-border-color-lighter, #F3F4F6);
     margin-right: 5px;
-    border-radius: var(--border-radius-base);
+    border-radius: var(--xto-border-radius-base, 6px);
     padding: 0 15px;
 
     &.is-active {
-      background-color: var(--color-primary-light-9);
-      border-color: var(--color-primary);
+      background-color: var(--xto-color-primary-light-9, #EEF2FF);
+      border-color: var(--xto-color-primary, #4F46E5);
     }
   }
 }
@@ -127,8 +127,8 @@ const handleClose = (path: string) => {
   border-radius: 50%;
 
   &:hover {
-    background-color: var(--color-danger-light);
-    color: var(--color-danger);
+    background-color: var(--xto-color-danger-light, #FEE2E2);
+    color: var(--xto-color-danger, #EF4444);
   }
 }
 </style>