xto-fronted 0.4.113 → 0.5.0

package/src/assets/styles/_dark.scss

@@ -2,80 +2,80 @@
 // Dark Theme Override - 暗黑主题覆盖
 // ==============================================
 
-.dark {
+html.dark {
   // 侧边栏
   .sidebar,
   .layout__aside {
-    background-color: #1d1e1f;
+    background-color: var(--xto-bg-color, #111827);
   }
 
   .sidebar {
-    border-right: 1px solid #363637;
+    border-right: 1px solid var(--xto-border-color, #374151);
   }
 
   .sidebar__search-results {
-    background-color: #1d1e1f;
-    border-color: #363637;
+    background-color: var(--xto-bg-color-overlay, #1F2937);
+    border-color: var(--xto-border-color, #374151);
   }
 
   .sidebar__search-item:hover {
-    background-color: #262727;
+    background-color: var(--xto-fill-color, #1F2937);
   }
 
   .sidebar__search-item-title {
-    color: #cfd3dc;
+    color: var(--xto-color-text-regular, #E5E7EB);
   }
 
   .sidebar__search-item-parent {
-    color: #a3a6ad;
+    color: var(--xto-color-text-secondary, #9CA3AF);
   }
 
   .sidebar__logo {
-    border-bottom-color: #363637;
+    border-bottom-color: var(--xto-border-color, #374151);
   }
 
   .sidebar__user {
-    border-top-color: #363637;
+    border-top-color: var(--xto-border-color, #374151);
   }
 
   .sidebar__user-name {
-    color: #cfd3dc;
+    color: var(--xto-color-text-regular, #E5E7EB);
   }
 
   .sidebar__user-role {
-    color: #a3a6ad;
+    color: var(--xto-color-text-secondary, #9CA3AF);
   }
 
   // 菜单
   .x-menu {
-    background-color: #1d1e1f !important;
-    border-color: #363637;
-    color: #cfd3dc;
+    background-color: var(--xto-bg-color, #111827) !important;
+    border-color: var(--xto-border-color, #374151);
+    color: var(--xto-color-text-regular, #E5E7EB);
 
     &.x-menu--vertical {
-      border-right-color: #363637;
+      border-right-color: var(--xto-border-color, #374151);
     }
 
     &.x-menu--horizontal {
-      border-bottom-color: #363637;
-      background-color: #1d1e1f !important;
+      border-bottom-color: var(--xto-border-color, #374151);
+      background-color: var(--xto-bg-color, #111827) !important;
     }
   }
 
   .x-menu-item {
-    color: #cfd3dc !important;
+    color: var(--xto-color-text-regular, #E5E7EB) !important;
     background-color: transparent !important;
 
     &:hover {
-      background-color: #262727 !important;
+      background-color: var(--xto-fill-color, #1F2937) !important;
     }
 
     &.is-active {
-      color: #409eff !important;
-      background-color: rgba(64, 158, 255, 0.1) !important;
+      color: var(--xto-color-primary, #818CF8) !important;
+      background-color: rgba(129, 140, 248, 0.1) !important;
 
       &::before {
-        background-color: #409eff;
+        background-color: var(--xto-color-primary, #818CF8);
       }
     }
 
@@ -87,44 +87,44 @@
 
       &.is-active {
         background-color: transparent !important;
-        border-bottom-color: #409eff;
+        border-bottom-color: var(--xto-color-primary, #818CF8);
       }
     }
   }
 
   .x-sub-menu {
     &__title {
-      color: #cfd3dc !important;
+      color: var(--xto-color-text-regular, #E5E7EB) !important;
       background-color: transparent !important;
 
       &:hover {
-        background-color: #262727 !important;
+        background-color: var(--xto-fill-color, #1F2937) !important;
       }
     }
 
     &__menu {
-      background-color: #1d1e1f !important;
-      border: 1px solid #363637;
+      background-color: var(--xto-bg-color-overlay, #1F2937) !important;
+      border: 1px solid var(--xto-border-color, #374151);
       box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
 
       // 子菜单中的菜单项
       .x-menu-item {
         background-color: transparent !important;
-        color: #cfd3dc !important;
+        color: var(--xto-color-text-regular, #E5E7EB) !important;
 
         &:hover {
-          background-color: #262727 !important;
+          background-color: var(--xto-fill-color, #1F2937) !important;
         }
 
         &.is-active {
-          color: #409eff !important;
-          background-color: rgba(64, 158, 255, 0.1) !important;
+          color: var(--xto-color-primary, #818CF8) !important;
+          background-color: rgba(129, 140, 248, 0.1) !important;
         }
       }
     }
 
     &__arrow {
-      color: #a3a6ad;
+      color: var(--xto-color-text-secondary, #9CA3AF);
     }
 
     &.is-opened > .x-sub-menu__title {
@@ -132,7 +132,7 @@
     }
 
     &.is-active > .x-sub-menu__title {
-      color: #409eff !important;
+      color: var(--xto-color-primary, #818CF8) !important;
     }
 
     // 水平模式下的子菜单
@@ -142,134 +142,134 @@
       }
 
       .x-sub-menu__menu {
-        background-color: #1d1e1f !important;
-        border: 1px solid #363637;
+        background-color: var(--xto-bg-color-overlay, #1F2937) !important;
+        border: 1px solid var(--xto-border-color, #374151);
       }
     }
 
     // 收起状态下的弹出菜单
     &.is-collapse > .x-sub-menu__menu {
-      background-color: #1d1e1f !important;
-      border: 1px solid #363637;
+      background-color: var(--xto-bg-color-overlay, #1F2937) !important;
+      border: 1px solid var(--xto-border-color, #374151);
     }
   }
 
   // 顶部导航
   .header {
-    background-color: #1d1e1f;
-    border-bottom-color: #363637;
+    background-color: var(--xto-bg-color, #111827);
+    border-bottom-color: var(--xto-border-color, #374151);
   }
 
   .header__collapse {
-    color: #cfd3dc;
+    color: var(--xto-color-text-regular, #E5E7EB);
   }
 
   .header__breadcrumb {
-    color: #a3a6ad;
+    color: var(--xto-color-text-secondary, #9CA3AF);
   }
 
   .header__user-name {
-    color: #cfd3dc;
+    color: var(--xto-color-text-regular, #E5E7EB);
   }
 
   .header__user-arrow {
-    color: #a3a6ad;
+    color: var(--xto-color-text-secondary, #9CA3AF);
   }
 
   .header__action:hover {
-    background-color: #262727;
+    background-color: var(--xto-fill-color, #1F2937);
   }
 
   .header__user-trigger:hover {
-    background-color: #262727;
+    background-color: var(--xto-fill-color, #1F2937);
   }
 
   // 下拉菜单
   .header__dropdown {
-    background-color: #1d1e1f;
-    border: 1px solid #363637;
+    background-color: var(--xto-bg-color-overlay, #1F2937);
+    border: 1px solid var(--xto-border-color, #374151);
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
   }
 
   .header__dropdown-name {
-    color: #e5eaf3;
+    color: var(--xto-color-text-primary, #F9FAFB);
   }
 
   .header__dropdown-role {
-    color: #a3a6ad;
+    color: var(--xto-color-text-secondary, #9CA3AF);
   }
 
   .header__dropdown-divider {
-    background-color: #363637;
+    background-color: var(--xto-border-color, #374151);
   }
 
   .header__dropdown-item {
-    color: #cfd3dc;
+    color: var(--xto-color-text-regular, #E5E7EB);
 
     &:hover {
-      background-color: #262727;
-      color: #e5eaf3;
+      background-color: var(--xto-fill-color, #1F2937);
+      color: var(--xto-color-text-primary, #F9FAFB);
     }
   }
 
   // 顶部菜单组件
   .top-menu {
-    background-color: #1d1e1f;
+    background-color: var(--xto-bg-color, #111827);
 
     &__menu {
-      background-color: #1d1e1f !important;
+      background-color: var(--xto-bg-color, #111827) !important;
     }
 
     &__menu-char {
-      background-color: rgba(64, 158, 255, 0.2);
-      color: #79bbff;
+      background-color: rgba(129, 140, 248, 0.2);
+      color: var(--xto-color-primary-light-3, #7578F3);
     }
 
     &__action {
-      color: #cfd3dc;
+      color: var(--xto-color-text-regular, #E5E7EB);
 
       &:hover {
-        background-color: #262727;
-        color: #409eff;
+        background-color: var(--xto-fill-color, #1F2937);
+        color: var(--xto-color-primary, #818CF8);
       }
     }
 
     &__user-trigger:hover {
-      background-color: #262727;
+      background-color: var(--xto-fill-color, #1F2937);
     }
 
     &__user-name {
-      color: #cfd3dc;
+      color: var(--xto-color-text-regular, #E5E7EB);
     }
 
     &__user-arrow {
-      color: #a3a6ad;
+      color: var(--xto-color-text-secondary, #9CA3AF);
     }
 
     &__dropdown {
-      background-color: #1d1e1f;
-      border: 1px solid #363637;
+      background-color: var(--xto-bg-color-overlay, #1F2937);
+      border: 1px solid var(--xto-border-color, #374151);
       box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
     }
 
     &__dropdown-name {
-      color: #e5eaf3;
+      color: var(--xto-color-text-primary, #F9FAFB);
     }
 
     &__dropdown-role {
-      color: #a3a6ad;
+      color: var(--xto-color-text-secondary, #9CA3AF);
     }
 
     &__dropdown-divider {
-      background-color: #363637;
+      background-color: var(--xto-border-color, #374151);
     }
 
     &__dropdown-item {
-      color: #cfd3dc;
+      color: var(--xto-color-text-regular, #E5E7EB);
 
       &:hover {
-        background-color: #262727;
-        color: #e5eaf3;
+        background-color: var(--xto-fill-color, #1F2937);
+        color: var(--xto-color-text-primary, #F9FAFB);
       }
     }
   }
@@ -277,86 +277,86 @@
   // 按钮
   .x-button {
     &.x-button--default {
-      background-color: #1d1e1f;
-      border-color: #4c4d4f;
-      color: #cfd3dc;
+      background-color: var(--xto-bg-color, #111827);
+      border-color: var(--xto-border-color-light, #1F2937);
+      color: var(--xto-color-text-regular, #E5E7EB);
 
       &:hover {
-        border-color: #409eff;
-        color: #409eff;
+        border-color: var(--xto-color-primary, #818CF8);
+        color: var(--xto-color-primary, #818CF8);
       }
     }
 
     &.x-button--text {
-      color: #409eff;
+      color: var(--xto-color-primary, #818CF8);
     }
   }
 
   // 表单
   .x-form-item__label {
-    color: #cfd3dc;
+    color: var(--xto-color-text-regular, #E5E7EB);
   }
 
   .x-form-item__error {
-    color: #f56c6c;
+    color: var(--xto-color-danger, #F87171);
   }
 
   // 输入框
   .x-input {
-    background-color: #1d1e1f;
-    border-color: #4c4d4f;
+    background-color: var(--xto-bg-color, #111827);
+    border-color: var(--xto-border-color-light, #1F2937);
 
     &.is-focus {
-      border-color: #409eff;
+      border-color: var(--xto-color-primary, #818CF8);
     }
 
     .x-input__inner {
       background-color: transparent;
-      color: #e5eaf3;
+      color: var(--xto-color-text-primary, #F9FAFB);
 
       &::placeholder {
-        color: #6c6e72;
+        color: var(--xto-color-text-placeholder, #6B7280);
       }
     }
 
     .x-input__suffix,
     .x-input__prefix {
-      color: #a3a6ad;
+      color: var(--xto-color-text-secondary, #9CA3AF);
     }
   }
 
   // 选择器
   .x-select {
-    background-color: #1d1e1f;
-    border-color: #4c4d4f;
+    background-color: var(--xto-bg-color, #111827);
+    border-color: var(--xto-border-color-light, #1F2937);
   }
 
   // 卡片
   .x-card {
-    background-color: #1d1e1f;
-    border-color: #363637;
+    background-color: var(--xto-bg-color-overlay, #1F2937);
+    border-color: var(--xto-border-color, #374151);
   }
 
   .x-card__header {
-    border-bottom-color: #363637;
-    color: #e5eaf3;
+    border-bottom-color: var(--xto-border-color, #374151);
+    color: var(--xto-color-text-primary, #F9FAFB);
   }
 
   // 表格
   .data-table {
     th {
-      background-color: #262727;
-      color: #cfd3dc;
-      border-bottom-color: #363637;
+      background-color: var(--xto-fill-color, #1F2937);
+      color: var(--xto-color-text-regular, #E5E7EB);
+      border-bottom-color: var(--xto-border-color, #374151);
     }
 
     td {
-      border-bottom-color: #363637;
-      color: #cfd3dc;
+      border-bottom-color: var(--xto-border-color, #374151);
+      color: var(--xto-color-text-regular, #E5E7EB);
     }
 
     tr:hover td {
-      background-color: #262727;
+      background-color: var(--xto-fill-color, #1F2937);
     }
   }
 
@@ -367,84 +367,84 @@
     }
 
     &__container {
-      background-color: #1d1e1f;
-      border: 1px solid #363637;
+      background-color: var(--xto-bg-color-overlay, #1F2937);
+      border: 1px solid var(--xto-border-color, #374151);
     }
 
     &__header {
-      border-bottom-color: #363637;
-      color: #e5eaf3;
+      border-bottom-color: var(--xto-border-color, #374151);
+      color: var(--xto-color-text-primary, #F9FAFB);
     }
 
     &__footer {
-      border-top-color: #363637;
+      border-top-color: var(--xto-border-color, #374151);
     }
   }
 
   // 消息提示
   .x-message {
-    background-color: #1d1e1f;
-    border: 1px solid #363637;
+    background-color: var(--xto-bg-color-overlay, #1F2937);
+    border: 1px solid var(--xto-border-color, #374151);
   }
 
   // 标签
   .x-tag {
     &.x-tag--primary {
-      background-color: rgba(64, 158, 255, 0.2);
-      color: #79bbff;
-      border-color: rgba(64, 158, 255, 0.3);
+      background-color: rgba(129, 140, 248, 0.2);
+      color: var(--xto-color-primary-light-3, #7578F3);
+      border-color: rgba(129, 140, 248, 0.3);
     }
 
     &.x-tag--success {
-      background-color: rgba(103, 194, 58, 0.2);
-      color: #95d475;
-      border-color: rgba(103, 194, 58, 0.3);
+      background-color: rgba(52, 211, 153, 0.2);
+      color: var(--xto-color-success-light-3, #2DD4A0);
+      border-color: rgba(52, 211, 153, 0.3);
     }
 
     &.x-tag--warning {
-      background-color: rgba(230, 162, 60, 0.2);
-      color: #eebe77;
-      border-color: rgba(230, 162, 60, 0.3);
+      background-color: rgba(251, 191, 36, 0.2);
+      color: var(--xto-color-warning-light-3, #FBBF24);
+      border-color: rgba(251, 191, 36, 0.3);
     }
 
     &.x-tag--danger {
-      background-color: rgba(245, 108, 108, 0.2);
-      color: #fab6b6;
-      border-color: rgba(245, 108, 108, 0.3);
+      background-color: rgba(248, 113, 113, 0.2);
+      color: var(--xto-color-danger-light-3, #F87171);
+      border-color: rgba(248, 113, 113, 0.3);
     }
 
     &.x-tag--info {
-      background-color: rgba(144, 147, 153, 0.2);
-      color: #c0c4cc;
-      border-color: rgba(144, 147, 153, 0.3);
+      background-color: rgba(156, 163, 175, 0.2);
+      color: var(--xto-color-text-disabled, #4B5563);
+      border-color: rgba(156, 163, 175, 0.3);
     }
   }
 
   // 开关
   .x-switch {
-    background-color: #4c4d4f;
+    background-color: var(--xto-border-color-light, #1F2937);
 
     &.is-checked {
-      background-color: #409eff;
+      background-color: var(--xto-color-primary, #818CF8);
     }
   }
 
   // 分页
   .x-pagination {
-    color: #cfd3dc;
+    color: var(--xto-color-text-regular, #E5E7EB);
 
     &__item {
-      background-color: #1d1e1f;
-      border-color: #4c4d4f;
-      color: #cfd3dc;
+      background-color: var(--xto-bg-color, #111827);
+      border-color: var(--xto-border-color-light, #1F2937);
+      color: var(--xto-color-text-regular, #E5E7EB);
 
       &:hover {
-        color: #409eff;
+        color: var(--xto-color-primary, #818CF8);
       }
 
       &.is-active {
-        background-color: #409eff;
-        border-color: #409eff;
+        background-color: var(--xto-color-primary, #818CF8);
+        border-color: var(--xto-color-primary, #818CF8);
         color: #fff;
       }
     }
@@ -456,90 +456,90 @@
   }
 
   .login__container {
-    background-color: #1d1e1f;
-    border: 1px solid #363637;
+    background-color: var(--xto-bg-color-overlay, #1F2937);
+    border: 1px solid var(--xto-border-color, #374151);
   }
 
   .login__title {
-    color: #409eff;
+    color: var(--xto-color-primary, #818CF8);
   }
 
   .login__subtitle {
-    color: #a3a6ad;
+    color: var(--xto-color-text-secondary, #9CA3AF);
   }
 
   .login__footer {
-    color: #6c6e72;
+    color: var(--xto-color-text-placeholder, #6B7280);
   }
 
   // 仪表盘
   .stat-card__title {
-    color: #a3a6ad;
+    color: var(--xto-color-text-secondary, #9CA3AF);
   }
 
   .quick-link {
-    background-color: #262727;
+    background-color: var(--xto-fill-color, #1F2937);
 
     &:hover {
-      background-color: rgba(64, 158, 255, 0.1);
+      background-color: rgba(129, 140, 248, 0.1);
     }
 
     &__title {
-      color: #cfd3dc;
+      color: var(--xto-color-text-regular, #E5E7EB);
     }
   }
 
   .activity-item {
-    border-bottom-color: #363637;
+    border-bottom-color: var(--xto-border-color, #374151);
 
     &__action {
-      color: #cfd3dc;
+      color: var(--xto-color-text-regular, #E5E7EB);
     }
   }
 
   // 搜索卡片
   .search-card {
-    background-color: #1d1e1f;
-    border: 1px solid #363637;
+    background-color: var(--xto-bg-color-overlay, #1F2937);
+    border: 1px solid var(--xto-border-color, #374151);
   }
 
   // 表格卡片
   .table-card {
-    background-color: #1d1e1f;
-    border: 1px solid #363637;
+    background-color: var(--xto-bg-color-overlay, #1F2937);
+    border: 1px solid var(--xto-border-color, #374151);
   }
 
   // Popconfirm
   .x-popconfirm {
-    background-color: #1d1e1f;
-    border: 1px solid #363637;
+    background-color: var(--xto-bg-color-overlay, #1F2937);
+    border: 1px solid var(--xto-border-color, #374151);
   }
 
   // Drawer 抽屉组件
   .x-drawer {
-    background-color: #1d1e1f;
+    background-color: var(--xto-bg-color-overlay, #1F2937);
 
     &__header {
-      background-color: #1d1e1f;
-      border-bottom-color: #363637;
-      color: #e5eaf3;
+      background-color: var(--xto-bg-color-overlay, #1F2937);
+      border-bottom-color: var(--xto-border-color, #374151);
+      color: var(--xto-color-text-primary, #F9FAFB);
     }
 
     &__body {
-      background-color: #1d1e1f;
-      color: #cfd3dc;
+      background-color: var(--xto-bg-color-overlay, #1F2937);
+      color: var(--xto-color-text-regular, #E5E7EB);
     }
 
     &__footer {
-      background-color: #1d1e1f;
-      border-top-color: #363637;
+      background-color: var(--xto-bg-color-overlay, #1F2937);
+      border-top-color: var(--xto-border-color, #374151);
     }
   }
 
   // 设置抽屉内容
   .settings-drawer {
     .settings-title {
-      color: #e5eaf3;
+      color: var(--xto-color-text-primary, #F9FAFB);
     }
 
     .settings-section {
@@ -547,93 +547,93 @@
     }
 
     .layout-option {
-      border-color: #4c4d4f;
+      border-color: var(--xto-border-color-light, #1F2937);
       background-color: transparent;
 
       &:hover {
-        border-color: #409eff;
+        border-color: var(--xto-color-primary, #818CF8);
       }
 
       &.is-active {
-        border-color: #409eff;
-        background-color: rgba(64, 158, 255, 0.1);
+        border-color: var(--xto-color-primary, #818CF8);
+        background-color: rgba(129, 140, 248, 0.1);
       }
 
       &__label {
-        color: #cfd3dc;
+        color: var(--xto-color-text-regular, #E5E7EB);
       }
     }
 
     .settings-switch-item {
       span {
-        color: #cfd3dc;
+        color: var(--xto-color-text-regular, #E5E7EB);
       }
     }
   }
 
   // 混合顶部菜单
   .mix-top-menu {
-    background-color: #1d1e1f;
-    border-bottom-color: #363637;
+    background-color: var(--xto-bg-color, #111827);
+    border-bottom-color: var(--xto-border-color, #374151);
 
     &__logo-text {
-      color: #409eff;
+      color: var(--xto-color-primary, #818CF8);
     }
 
     &__menu {
-      background-color: #1d1e1f !important;
+      background-color: var(--xto-bg-color, #111827) !important;
     }
 
     &__menu-char {
-      color: #79bbff;
-      background-color: rgba(64, 158, 255, 0.2);
+      color: var(--xto-color-primary-light-3, #7578F3);
+      background-color: rgba(129, 140, 248, 0.2);
     }
 
     &__action {
-      color: #cfd3dc;
+      color: var(--xto-color-text-regular, #E5E7EB);
 
       &:hover {
-        background-color: #262727;
-        color: #409eff;
+        background-color: var(--xto-fill-color, #1F2937);
+        color: var(--xto-color-primary, #818CF8);
       }
     }
 
     &__user-trigger:hover {
-      background-color: #262727;
+      background-color: var(--xto-fill-color, #1F2937);
     }
 
     &__user-name {
-      color: #cfd3dc;
+      color: var(--xto-color-text-regular, #E5E7EB);
     }
 
     &__user-arrow {
-      color: #a3a6ad;
+      color: var(--xto-color-text-secondary, #9CA3AF);
     }
 
     &__dropdown {
-      background-color: #1d1e1f;
-      border: 1px solid #363637;
+      background-color: var(--xto-bg-color-overlay, #1F2937);
+      border: 1px solid var(--xto-border-color, #374151);
       box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
     }
 
     &__dropdown-name {
-      color: #e5eaf3;
+      color: var(--xto-color-text-primary, #F9FAFB);
     }
 
     &__dropdown-role {
-      color: #a3a6ad;
+      color: var(--xto-color-text-secondary, #9CA3AF);
     }
 
     &__dropdown-divider {
-      background-color: #363637;
+      background-color: var(--xto-border-color, #374151);
     }
 
     &__dropdown-item {
-      color: #cfd3dc;
+      color: var(--xto-color-text-regular, #E5E7EB);
 
       &:hover {
-        background-color: #262727;
-        color: #e5eaf3;
+        background-color: var(--xto-fill-color, #1F2937);
+        color: var(--xto-color-text-primary, #F9FAFB);
       }
     }
   }