xto-fronted 0.4.7 → 0.4.9

package/src/assets/styles/_dark.scss

@@ -1,407 +1,525 @@
-// ==============================================
-// Dark Theme Override - 暗黑主题覆盖
-// ==============================================
-
-.dark {
-  // 侧边栏
-  .sidebar,
-  .layout__aside {
-    background-color: #1d1e1f;
-  }
-
-  .sidebar {
-    border-right: 1px solid #363637;
-  }
-
-  .sidebar__search-results {
-    background-color: #1d1e1f;
-    border-color: #363637;
-  }
-
-  .sidebar__search-item:hover {
-    background-color: #262727;
-  }
-
-  .sidebar__search-item-title {
-    color: #cfd3dc;
-  }
-
-  .sidebar__search-item-parent {
-    color: #a3a6ad;
-  }
-
-  .sidebar__logo {
-    border-bottom-color: #363637;
-  }
-
-  .sidebar__user {
-    border-top-color: #363637;
-  }
-
-  .sidebar__user-name {
-    color: #cfd3dc;
-  }
-
-  .sidebar__user-role {
-    color: #a3a6ad;
-  }
-
-  // 菜单
-  .x-menu {
-    background-color: #1d1e1f !important;
-    border-color: #363637;
-    color: #cfd3dc;
-
-    &.x-menu--vertical {
-      border-right-color: #363637;
-    }
-
-    &.x-menu--horizontal {
-      border-bottom-color: #363637;
-    }
-  }
-
-  .x-menu-item {
-    color: #cfd3dc !important;
-
-    &:hover {
-      background-color: #262727 !important;
-    }
-
-    &.is-active {
-      color: #409eff !important;
-      background-color: rgba(64, 158, 255, 0.1) !important;
-
-      &::before {
-        background-color: #409eff;
-      }
-    }
-  }
-
-  .x-sub-menu {
-    &__title {
-      color: #cfd3dc !important;
-
-      &:hover {
-        background-color: #262727 !important;
-      }
-    }
-
-    &__menu {
-      background-color: #1d1e1f !important;
-      border: 1px solid #363637;
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
-    }
-
-    &__arrow {
-      color: #a3a6ad;
-    }
-
-    &.is-opened > .x-sub-menu__title {
-      background-color: #262727 !important;
-    }
-
-    &.is-active > .x-sub-menu__title {
-      color: #409eff !important;
-    }
-  }
-
-  // 顶部导航
-  .header {
-    background-color: #1d1e1f;
-    border-bottom-color: #363637;
-  }
-
-  .header__collapse {
-    color: #cfd3dc;
-  }
-
-  .header__breadcrumb {
-    color: #a3a6ad;
-  }
-
-  .header__user-name {
-    color: #cfd3dc;
-  }
-
-  .header__user-arrow {
-    color: #a3a6ad;
-  }
-
-  .header__action:hover {
-    background-color: #262727;
-  }
-
-  .header__user-trigger:hover {
-    background-color: #262727;
-  }
-
-  // 下拉菜单
-  .header__dropdown {
-    background-color: #1d1e1f;
-    border: 1px solid #363637;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
-  }
-
-  .header__dropdown-name {
-    color: #e5eaf3;
-  }
-
-  .header__dropdown-role {
-    color: #a3a6ad;
-  }
-
-  .header__dropdown-divider {
-    background-color: #363637;
-  }
-
-  .header__dropdown-item {
-    color: #cfd3dc;
-
-    &:hover {
-      background-color: #262727;
-      color: #e5eaf3;
-    }
-  }
-
-  // 按钮
-  .x-button {
-    &.x-button--default {
-      background-color: #1d1e1f;
-      border-color: #4c4d4f;
-      color: #cfd3dc;
-
-      &:hover {
-        border-color: #409eff;
-        color: #409eff;
-      }
-    }
-
-    &.x-button--text {
-      color: #409eff;
-    }
-  }
-
-  // 表单
-  .x-form-item__label {
-    color: #cfd3dc;
-  }
-
-  .x-form-item__error {
-    color: #f56c6c;
-  }
-
-  // 输入框
-  .x-input {
-    background-color: #1d1e1f;
-    border-color: #4c4d4f;
-
-    &.is-focus {
-      border-color: #409eff;
-    }
-
-    .x-input__inner {
-      background-color: transparent;
-      color: #e5eaf3;
-
-      &::placeholder {
-        color: #6c6e72;
-      }
-    }
-
-    .x-input__suffix,
-    .x-input__prefix {
-      color: #a3a6ad;
-    }
-  }
-
-  // 选择器
-  .x-select {
-    background-color: #1d1e1f;
-    border-color: #4c4d4f;
-  }
-
-  // 卡片
-  .x-card {
-    background-color: #1d1e1f;
-    border-color: #363637;
-  }
-
-  .x-card__header {
-    border-bottom-color: #363637;
-    color: #e5eaf3;
-  }
-
-  // 表格
-  .data-table {
-    th {
-      background-color: #262727;
-      color: #cfd3dc;
-      border-bottom-color: #363637;
-    }
-
-    td {
-      border-bottom-color: #363637;
-      color: #cfd3dc;
-    }
-
-    tr:hover td {
-      background-color: #262727;
-    }
-  }
-
-  // 弹窗
-  .x-modal {
-    &__wrapper {
-      background-color: rgba(0, 0, 0, 0.7);
-    }
-
-    &__container {
-      background-color: #1d1e1f;
-      border: 1px solid #363637;
-    }
-
-    &__header {
-      border-bottom-color: #363637;
-      color: #e5eaf3;
-    }
-
-    &__footer {
-      border-top-color: #363637;
-    }
-  }
-
-  // 消息提示
-  .x-message {
-    background-color: #1d1e1f;
-    border: 1px solid #363637;
-  }
-
-  // 标签
-  .x-tag {
-    &.x-tag--primary {
-      background-color: rgba(64, 158, 255, 0.2);
-      color: #79bbff;
-      border-color: rgba(64, 158, 255, 0.3);
-    }
-
-    &.x-tag--success {
-      background-color: rgba(103, 194, 58, 0.2);
-      color: #95d475;
-      border-color: rgba(103, 194, 58, 0.3);
-    }
-
-    &.x-tag--warning {
-      background-color: rgba(230, 162, 60, 0.2);
-      color: #eebe77;
-      border-color: rgba(230, 162, 60, 0.3);
-    }
-
-    &.x-tag--danger {
-      background-color: rgba(245, 108, 108, 0.2);
-      color: #fab6b6;
-      border-color: rgba(245, 108, 108, 0.3);
-    }
-
-    &.x-tag--info {
-      background-color: rgba(144, 147, 153, 0.2);
-      color: #c0c4cc;
-      border-color: rgba(144, 147, 153, 0.3);
-    }
-  }
-
-  // 开关
-  .x-switch {
-    background-color: #4c4d4f;
-
-    &.is-checked {
-      background-color: #409eff;
-    }
-  }
-
-  // 分页
-  .x-pagination {
-    color: #cfd3dc;
-
-    &__item {
-      background-color: #1d1e1f;
-      border-color: #4c4d4f;
-      color: #cfd3dc;
-
-      &:hover {
-        color: #409eff;
-      }
-
-      &.is-active {
-        background-color: #409eff;
-        border-color: #409eff;
-        color: #fff;
-      }
-    }
-  }
-
-  // 登录页面
-  .login {
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  }
-
-  .login__container {
-    background-color: #1d1e1f;
-    border: 1px solid #363637;
-  }
-
-  .login__title {
-    color: #409eff;
-  }
-
-  .login__subtitle {
-    color: #a3a6ad;
-  }
-
-  .login__footer {
-    color: #6c6e72;
-  }
-
-  // 仪表盘
-  .stat-card__title {
-    color: #a3a6ad;
-  }
-
-  .quick-link {
-    background-color: #262727;
-
-    &:hover {
-      background-color: rgba(64, 158, 255, 0.1);
-    }
-
-    &__title {
-      color: #cfd3dc;
-    }
-  }
-
-  .activity-item {
-    border-bottom-color: #363637;
-
-    &__action {
-      color: #cfd3dc;
-    }
-  }
-
-  // 搜索卡片
-  .search-card {
-    background-color: #1d1e1f;
-    border: 1px solid #363637;
-  }
-
-  // 表格卡片
-  .table-card {
-    background-color: #1d1e1f;
-    border: 1px solid #363637;
-  }
-
-  // Popconfirm
-  .x-popconfirm {
-    background-color: #1d1e1f;
-    border: 1px solid #363637;
-  }
+// ==============================================
+// Dark Theme Override - 暗黑主题覆盖
+// ==============================================
+
+.dark {
+  // 侧边栏
+  .sidebar,
+  .layout__aside {
+    background-color: #1d1e1f;
+  }
+
+  .sidebar {
+    border-right: 1px solid #363637;
+  }
+
+  .sidebar__search-results {
+    background-color: #1d1e1f;
+    border-color: #363637;
+  }
+
+  .sidebar__search-item:hover {
+    background-color: #262727;
+  }
+
+  .sidebar__search-item-title {
+    color: #cfd3dc;
+  }
+
+  .sidebar__search-item-parent {
+    color: #a3a6ad;
+  }
+
+  .sidebar__logo {
+    border-bottom-color: #363637;
+  }
+
+  .sidebar__user {
+    border-top-color: #363637;
+  }
+
+  .sidebar__user-name {
+    color: #cfd3dc;
+  }
+
+  .sidebar__user-role {
+    color: #a3a6ad;
+  }
+
+  // 菜单
+  .x-menu {
+    background-color: #1d1e1f !important;
+    border-color: #363637;
+    color: #cfd3dc;
+
+    &.x-menu--vertical {
+      border-right-color: #363637;
+    }
+
+    &.x-menu--horizontal {
+      border-bottom-color: #363637;
+      background-color: #1d1e1f !important;
+    }
+  }
+
+  .x-menu-item {
+    color: #cfd3dc !important;
+    background-color: transparent !important;
+
+    &:hover {
+      background-color: #262727 !important;
+    }
+
+    &.is-active {
+      color: #409eff !important;
+      background-color: rgba(64, 158, 255, 0.1) !important;
+
+      &::before {
+        background-color: #409eff;
+      }
+    }
+
+    // 水平模式下的菜单项
+    &.is-horizontal {
+      &:hover {
+        background-color: transparent !important;
+      }
+
+      &.is-active {
+        background-color: transparent !important;
+        border-bottom-color: #409eff;
+      }
+    }
+  }
+
+  .x-sub-menu {
+    &__title {
+      color: #cfd3dc !important;
+      background-color: transparent !important;
+
+      &:hover {
+        background-color: #262727 !important;
+      }
+    }
+
+    &__menu {
+      background-color: #1d1e1f !important;
+      border: 1px solid #363637;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
+
+      // 子菜单中的菜单项
+      .x-menu-item {
+        background-color: transparent !important;
+        color: #cfd3dc !important;
+
+        &:hover {
+          background-color: #262727 !important;
+        }
+
+        &.is-active {
+          color: #409eff !important;
+          background-color: rgba(64, 158, 255, 0.1) !important;
+        }
+      }
+    }
+
+    &__arrow {
+      color: #a3a6ad;
+    }
+
+    &.is-opened > .x-sub-menu__title {
+      background-color: #262727 !important;
+    }
+
+    &.is-active > .x-sub-menu__title {
+      color: #409eff !important;
+    }
+
+    // 水平模式下的子菜单
+    &--horizontal {
+      .x-sub-menu__title:hover {
+        background-color: transparent !important;
+      }
+
+      .x-sub-menu__menu {
+        background-color: #1d1e1f !important;
+        border: 1px solid #363637;
+      }
+    }
+
+    // 收起状态下的弹出菜单
+    &.is-collapse > .x-sub-menu__menu {
+      background-color: #1d1e1f !important;
+      border: 1px solid #363637;
+    }
+  }
+
+  // 顶部导航
+  .header {
+    background-color: #1d1e1f;
+    border-bottom-color: #363637;
+  }
+
+  .header__collapse {
+    color: #cfd3dc;
+  }
+
+  .header__breadcrumb {
+    color: #a3a6ad;
+  }
+
+  .header__user-name {
+    color: #cfd3dc;
+  }
+
+  .header__user-arrow {
+    color: #a3a6ad;
+  }
+
+  .header__action:hover {
+    background-color: #262727;
+  }
+
+  .header__user-trigger:hover {
+    background-color: #262727;
+  }
+
+  // 下拉菜单
+  .header__dropdown {
+    background-color: #1d1e1f;
+    border: 1px solid #363637;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
+  }
+
+  .header__dropdown-name {
+    color: #e5eaf3;
+  }
+
+  .header__dropdown-role {
+    color: #a3a6ad;
+  }
+
+  .header__dropdown-divider {
+    background-color: #363637;
+  }
+
+  .header__dropdown-item {
+    color: #cfd3dc;
+
+    &:hover {
+      background-color: #262727;
+      color: #e5eaf3;
+    }
+  }
+
+  // 顶部菜单组件
+  .top-menu {
+    background-color: #1d1e1f;
+
+    &__menu {
+      background-color: #1d1e1f !important;
+    }
+
+    &__menu-char {
+      background-color: rgba(64, 158, 255, 0.2);
+      color: #79bbff;
+    }
+  }
+
+  // 按钮
+  .x-button {
+    &.x-button--default {
+      background-color: #1d1e1f;
+      border-color: #4c4d4f;
+      color: #cfd3dc;
+
+      &:hover {
+        border-color: #409eff;
+        color: #409eff;
+      }
+    }
+
+    &.x-button--text {
+      color: #409eff;
+    }
+  }
+
+  // 表单
+  .x-form-item__label {
+    color: #cfd3dc;
+  }
+
+  .x-form-item__error {
+    color: #f56c6c;
+  }
+
+  // 输入框
+  .x-input {
+    background-color: #1d1e1f;
+    border-color: #4c4d4f;
+
+    &.is-focus {
+      border-color: #409eff;
+    }
+
+    .x-input__inner {
+      background-color: transparent;
+      color: #e5eaf3;
+
+      &::placeholder {
+        color: #6c6e72;
+      }
+    }
+
+    .x-input__suffix,
+    .x-input__prefix {
+      color: #a3a6ad;
+    }
+  }
+
+  // 选择器
+  .x-select {
+    background-color: #1d1e1f;
+    border-color: #4c4d4f;
+  }
+
+  // 卡片
+  .x-card {
+    background-color: #1d1e1f;
+    border-color: #363637;
+  }
+
+  .x-card__header {
+    border-bottom-color: #363637;
+    color: #e5eaf3;
+  }
+
+  // 表格
+  .data-table {
+    th {
+      background-color: #262727;
+      color: #cfd3dc;
+      border-bottom-color: #363637;
+    }
+
+    td {
+      border-bottom-color: #363637;
+      color: #cfd3dc;
+    }
+
+    tr:hover td {
+      background-color: #262727;
+    }
+  }
+
+  // 弹窗
+  .x-modal {
+    &__wrapper {
+      background-color: rgba(0, 0, 0, 0.7);
+    }
+
+    &__container {
+      background-color: #1d1e1f;
+      border: 1px solid #363637;
+    }
+
+    &__header {
+      border-bottom-color: #363637;
+      color: #e5eaf3;
+    }
+
+    &__footer {
+      border-top-color: #363637;
+    }
+  }
+
+  // 消息提示
+  .x-message {
+    background-color: #1d1e1f;
+    border: 1px solid #363637;
+  }
+
+  // 标签
+  .x-tag {
+    &.x-tag--primary {
+      background-color: rgba(64, 158, 255, 0.2);
+      color: #79bbff;
+      border-color: rgba(64, 158, 255, 0.3);
+    }
+
+    &.x-tag--success {
+      background-color: rgba(103, 194, 58, 0.2);
+      color: #95d475;
+      border-color: rgba(103, 194, 58, 0.3);
+    }
+
+    &.x-tag--warning {
+      background-color: rgba(230, 162, 60, 0.2);
+      color: #eebe77;
+      border-color: rgba(230, 162, 60, 0.3);
+    }
+
+    &.x-tag--danger {
+      background-color: rgba(245, 108, 108, 0.2);
+      color: #fab6b6;
+      border-color: rgba(245, 108, 108, 0.3);
+    }
+
+    &.x-tag--info {
+      background-color: rgba(144, 147, 153, 0.2);
+      color: #c0c4cc;
+      border-color: rgba(144, 147, 153, 0.3);
+    }
+  }
+
+  // 开关
+  .x-switch {
+    background-color: #4c4d4f;
+
+    &.is-checked {
+      background-color: #409eff;
+    }
+  }
+
+  // 分页
+  .x-pagination {
+    color: #cfd3dc;
+
+    &__item {
+      background-color: #1d1e1f;
+      border-color: #4c4d4f;
+      color: #cfd3dc;
+
+      &:hover {
+        color: #409eff;
+      }
+
+      &.is-active {
+        background-color: #409eff;
+        border-color: #409eff;
+        color: #fff;
+      }
+    }
+  }
+
+  // 登录页面
+  .login {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  }
+
+  .login__container {
+    background-color: #1d1e1f;
+    border: 1px solid #363637;
+  }
+
+  .login__title {
+    color: #409eff;
+  }
+
+  .login__subtitle {
+    color: #a3a6ad;
+  }
+
+  .login__footer {
+    color: #6c6e72;
+  }
+
+  // 仪表盘
+  .stat-card__title {
+    color: #a3a6ad;
+  }
+
+  .quick-link {
+    background-color: #262727;
+
+    &:hover {
+      background-color: rgba(64, 158, 255, 0.1);
+    }
+
+    &__title {
+      color: #cfd3dc;
+    }
+  }
+
+  .activity-item {
+    border-bottom-color: #363637;
+
+    &__action {
+      color: #cfd3dc;
+    }
+  }
+
+  // 搜索卡片
+  .search-card {
+    background-color: #1d1e1f;
+    border: 1px solid #363637;
+  }
+
+  // 表格卡片
+  .table-card {
+    background-color: #1d1e1f;
+    border: 1px solid #363637;
+  }
+
+  // Popconfirm
+  .x-popconfirm {
+    background-color: #1d1e1f;
+    border: 1px solid #363637;
+  }
+
+  // Drawer 抽屉组件
+  .x-drawer {
+    background-color: #1d1e1f;
+
+    &__header {
+      background-color: #1d1e1f;
+      border-bottom-color: #363637;
+      color: #e5eaf3;
+    }
+
+    &__body {
+      background-color: #1d1e1f;
+      color: #cfd3dc;
+    }
+
+    &__footer {
+      background-color: #1d1e1f;
+      border-top-color: #363637;
+    }
+  }
+
+  // 设置抽屉内容
+  .settings-drawer {
+    .settings-title {
+      color: #e5eaf3;
+    }
+
+    .settings-section {
+      background-color: transparent;
+    }
+
+    .layout-option {
+      border-color: #4c4d4f;
+      background-color: transparent;
+
+      &:hover {
+        border-color: #409eff;
+      }
+
+      &.is-active {
+        border-color: #409eff;
+        background-color: rgba(64, 158, 255, 0.1);
+      }
+
+      &__label {
+        color: #cfd3dc;
+      }
+    }
+
+    .settings-switch-item {
+      span {
+        color: #cfd3dc;
+      }
+    }
+  }
 }