xto-fronted 0.4.113 → 0.5.0

package/src/components/Layout/TopMenu.vue

@@ -584,7 +584,7 @@ onUnmounted(() => {
   &__logo-text {
     font-size: 16px;
     font-weight: 600;
-    color: var(--color-primary);
+    color: var(--xto-color-primary, #4F46E5);
   }
 
   &__menu {
@@ -676,9 +676,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);
   }
 
   // 右侧操作区域
@@ -692,28 +692,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);
       }
     }
 
@@ -725,9 +725,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;
     }
 
@@ -744,17 +744,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;
       }
     }
@@ -776,15 +776,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;
     }
   }
@@ -796,13 +796,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);
     }
   }
 
@@ -817,17 +817,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;
@@ -836,7 +836,7 @@ onUnmounted(() => {
 
     &-arrow {
       font-size: 10px;
-      color: var(--color-text-secondary);
+      color: var(--xto-color-text-secondary, #6B7280);
       transition: transform 0.2s;
 
       &.is-active {
@@ -849,11 +849,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;
   }
@@ -864,9 +864,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;
 
@@ -881,11 +881,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;
     }
@@ -897,18 +897,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 {
@@ -922,20 +922,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);
         }
       }
     }
@@ -951,7 +951,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;
   }
 
@@ -967,31 +967,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);
     }
   }
 
@@ -1003,7 +1003,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 {
@@ -1013,12 +1013,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);
       }
     }
   }
@@ -1030,12 +1030,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);
     }
   }
 
@@ -1046,12 +1046,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);
       }
     }
 
@@ -1061,12 +1061,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);
       }
     }
   }
@@ -1079,7 +1079,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;
@@ -1091,7 +1091,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);
     }
   }
 
@@ -1108,7 +1108,7 @@ onUnmounted(() => {
 
     span {
       font-size: 14px;
-      color: var(--color-text-regular);
+      color: var(--xto-color-text-regular, #4B5563);
     }
   }
 
@@ -1123,7 +1123,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;
 
@@ -1134,7 +1134,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;
       }
@@ -1142,7 +1142,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/index.vue

@@ -138,8 +138,8 @@ const showMixSidebar = computed(() => {
     .layout__mix-top-menu {
       width: 100%;
       height: 50px;
-      background-color: var(--bg-color);
-      border-bottom: 1px solid var(--color-border-lighter);
+      background-color: var(--xto-bg-color, #FFFFFF);
+      border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
       flex-shrink: 0;
     }
 
@@ -162,8 +162,8 @@ const showMixSidebar = computed(() => {
     width: 100%;
     height: 50px;
     box-sizing: border-box;
-    background-color: var(--bg-color);
-    border-bottom: 1px solid var(--color-border-lighter);
+    background-color: var(--xto-bg-color, #FFFFFF);
+    border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
     flex-shrink: 0;
   }
 
@@ -185,15 +185,15 @@ const showMixSidebar = computed(() => {
   &__header {
     height: 50px;
     box-sizing: border-box;
-    background-color: var(--bg-color);
-    border-bottom: 1px solid var(--color-border-lighter);
+    background-color: var(--xto-bg-color, #FFFFFF);
+    border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
     flex-shrink: 0;
   }
 
   &__content {
     flex: 1;
     overflow: auto;
-    background-color: var(--bg-color-page);
+    background-color: var(--xto-bg-color-page, #F9FAFB);
     padding: 0;
   }
 }

package/src/stores/app.ts

@@ -21,7 +21,7 @@ export const useAppStore = defineStore('app', () => {
   const showTabs = ref<boolean>(local.get<boolean>('showTabs') ?? true)
   const showFooter = ref<boolean>(local.get<boolean>('showFooter') ?? true)
   const showBreadcrumb = ref<boolean>(local.get<boolean>('showBreadcrumb') ?? true)
-  const primaryColor = ref<string>(local.get<string>('primaryColor') || '#409eff')
+  const primaryColor = ref<string>(local.get<string>('primaryColor') || '#4F46E5')
   const cachedViews = ref<string[]>([])
   const mixSubMenus = ref<any[]>([])
 
@@ -105,7 +105,7 @@ export const useAppStore = defineStore('app', () => {
   // 设置主题色
   const setPrimaryColor = (color: string) => {
     primaryColor.value = color
-    document.documentElement.style.setProperty('--color-primary', color)
+    document.documentElement.style.setProperty('--xto-color-primary', color)
     local.set('primaryColor', color)
   }
 
@@ -137,8 +137,8 @@ export const useAppStore = defineStore('app', () => {
   // 初始化主题
   const initTheme = () => {
     updateTheme()
-    if (primaryColor.value !== '#409eff') {
-      document.documentElement.style.setProperty('--color-primary', primaryColor.value)
+    if (primaryColor.value !== '#4F46E5') {
+      document.documentElement.style.setProperty('--xto-color-primary', primaryColor.value)
     }
   }
 

package/src/style.scss

@@ -1,14 +1,14 @@
-/**
- * xto-fronted 样式入口
- * 组件样式已包含在各自的 Vue 组件中（scoped）
- */
-
-/* 导入全局样式（包含灰色模式、暗黑模式等） */
-@import './assets/styles/index.scss';
-
-/* 全局样式变量（可选） */
-:root {
-  --bg-color: #ffffff;
-  --bg-color-page: #f5f7fa;
-  --color-border-lighter: #e4e7ed;
-}
+/**
+ * xto-fronted 样式入口
+ * 组件样式已包含在各自的 Vue 组件中（scoped）
+ */
+
+/* 导入全局样式（包含灰色模式、暗黑模式等） */
+@import './assets/styles/index.scss';
+
+/* 全局样式变量（与 @xto/core 主题系统对齐） */
+:root {
+  --xto-bg-color: #FFFFFF;
+  --xto-bg-color-page: #F9FAFB;
+  --xto-border-color-lighter: #F3F4F6;
+}