foucui 1.0.1

package/styles/plain.scss

@@ -0,0 +1,423 @@
+html > body.qiu-theme-plain {
+  --qiu-menu-background-color: #ffffff;
+  --qiu-menu-background-color-second: #ffffff;
+  --qiu-menu-color-text: #515a6e;
+  /* 分栏右侧次导航文字（浅底） */
+  --qiu-menu-color-text-second: #515a6e;
+  --qiu-title-color: #515a6e;
+
+  @mixin container {
+    color: var(--qiu-menu-color-text) !important;
+    background: #ffffff !important;
+  }
+
+  @mixin active {
+    &:hover {
+      color: #fff !important;
+      background-color: var(--qiu-color-primary) !important;
+
+      i,
+      svg,
+      span[title] {
+        color: #fff !important;
+      }
+    }
+
+    &.is-active {
+      color: #fff !important;
+      background-color: var(--qiu-color-primary) !important;
+
+      i,
+      svg,
+      span[title] {
+        color: #fff !important;
+      }
+    }
+  }
+
+  .el-menu--vertical {
+    .el-menu-item {
+      &:hover {
+        color: #fff !important;
+        background-color: var(--qiu-color-primary) !important;
+      }
+    }
+
+    .el-menu-item.is-active,
+    .el-sub-menu__title.is-active {
+      color: #fff !important;
+      background-color: var(--qiu-color-primary) !important;
+    }
+  }
+
+  .el-menu--horizontal {
+    .el-menu-item:not(.is-disabled):focus,
+    .el-menu-item:not(.is-disabled):hover {
+      color: #fff !important;
+      background-color: var(--qiu-color-primary) !important;
+    }
+
+    .el-sub-menu__title:not(.is-disabled):focus,
+    .el-sub-menu__title:not(.is-disabled):hover {
+      border-radius: var(--qiu-border-radius-base) !important;
+    }
+  }
+
+  .qiu-logo-common,
+  .qiu-logo-vertical,
+  .qiu-logo-horizontal {
+    @include container;
+
+    .title,
+    .qiu-icon {
+      @include container;
+    }
+  }
+
+  .qiu-logo-column,
+  .qiu-logo-comprehensive {
+    @include container;
+
+    .logo {
+      /* Logo 与一级菜单同列同底，不单独铺白底/描边 */
+      border-right: 0 !important;
+      border-bottom: 0 !important;
+      background: transparent !important;
+    }
+
+    .title {
+      @include container;
+      border-bottom: 0 !important;
+    }
+
+    .logo,
+    .qiu-icon {
+      @include container;
+    }
+  }
+
+  .qiu-column-bar {
+    border-right: 0 !important;
+
+    .qiu-column-bar__divider {
+      background: var(--qiu-border-color) !important;
+    }
+
+    &::after {
+      display: none;
+    }
+
+    &::before {
+      background: var(--qiu-border-color) !important;
+    }
+
+    /* 简洁：左侧一级为白底；hover/active 只点亮小图标块 */
+    .qiu-column-bar__tab {
+      color: var(--qiu-menu-color-text, #515a6e) !important;
+      background: transparent !important;
+
+      .qiu-column-grid,
+      .qiu-column-grid__title,
+      .qiu-icon,
+      [class*='ri-'] {
+        color: inherit !important;
+      }
+
+      &:hover {
+        background: transparent !important;
+
+        .qiu-column-grid {
+          color: var(--qiu-color-primary) !important;
+          background: var(--qiu-color-primary-light-9, #e6f4f2) !important;
+        }
+      }
+
+      &.is-active {
+        background: transparent !important;
+
+        .qiu-column-grid {
+          color: #fff !important;
+          background: var(--qiu-color-primary) !important;
+        }
+      }
+    }
+
+    .column-second-panel,
+    .qiu-column-second-menu,
+    .column-menu-tools {
+      background: #fff !important;
+    }
+
+    .el-tabs {
+      margin-left: 0 !important;
+      border-right: 0 !important;
+      @include container;
+
+      .el-tabs__nav-wrap.is-left {
+        background: #f7faff !important;
+      }
+
+      .el-tabs__item,
+      .el-tabs__nav {
+        @include container;
+      }
+
+      .el-tabs__item.is-active {
+        color: #ffffff !important;
+        background: var(--qiu-color-primary) !important;
+      }
+    }
+
+    .el-menu {
+      .el-menu-item.is-active,
+      .el-sub-menu__title.is-active,
+      .el-menu-item:hover,
+      .el-sub-menu__title:hover {
+        i {
+          color: #fff !important;
+        }
+
+        color: #fff !important;
+        background-color: var(--qiu-color-primary) !important;
+      }
+    }
+
+    /* 自研侧栏菜单：未选中跟菜单字色；选中/悬停必须白字 */
+    .qiu-route-menu-item__inner,
+    .qiu-route-menu-sub__title {
+      color: var(--qiu-menu-color-text, #515a6e) !important;
+
+      .qiu-icon,
+      [class*='ri-'],
+      .qiu-route-menu-item__text,
+      .qiu-route-menu-sub__text,
+      .qiu-route-menu-sub__arrow {
+        color: inherit !important;
+      }
+    }
+
+    .qiu-route-menu-item.is-active > .qiu-route-menu-item__inner,
+    .qiu-route-menu-sub.is-active > .qiu-route-menu-sub__title,
+    .qiu-route-menu-item__inner:hover,
+    .qiu-route-menu-sub__title:hover {
+      color: #fff !important;
+      background-color: var(--qiu-color-primary) !important;
+
+      .qiu-icon,
+      [class*='ri-'],
+      .qiu-route-menu-item__text,
+      .qiu-route-menu-sub__text,
+      .qiu-route-menu-sub__arrow {
+        color: #fff !important;
+      }
+    }
+
+    &-card {
+      .el-tabs {
+        .el-tabs__item {
+          .qiu-column-grid:hover {
+            color: #ffffff !important;
+          }
+
+          &.is-active {
+            background: transparent !important;
+          }
+        }
+      }
+    }
+
+    &-arrow {
+      .el-tabs {
+        .el-tabs__item {
+          &.is-active {
+            color: var(--qiu-menu-color-text) !important;
+            background: transparent !important;
+
+            .qiu-column-grid {
+              background: transparent !important;
+
+              &:after {
+                border-color: transparent var(--qiu-border-color) transparent transparent;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .qiu-tabs-content-card {
+    .el-tabs__header {
+      .el-tabs__item {
+        border: 1px solid var(--qiu-border-color) !important;
+      }
+    }
+  }
+
+  .qiu-logo-column {
+    .logo {
+      background: transparent !important;
+      border-right: 0 !important;
+      border-bottom: 0 !important;
+    }
+
+    .title {
+      border-bottom: 0 !important;
+    }
+  }
+
+  .qiu-nav,
+  .qiu-header {
+    border-bottom: 1px solid var(--qiu-border-color) !important;
+  }
+
+  .qiu-tabs {
+    border-top: 1px solid var(--qiu-border-color) !important;
+    border-bottom: 1px solid var(--qiu-border-color) !important;
+  }
+
+  /* 分栏/纵向：顶栏底边由布局通栏线绘制，避免主题再叠一条 */
+  .qiu-layout-column,
+  .qiu-layout-vertical {
+    .qiu-nav {
+      border-bottom: 0 !important;
+    }
+
+    .qiu-tabs {
+      border-top: 0 !important;
+    }
+  }
+
+  .qiu-header {
+    @include container;
+
+    .qiu-main {
+      @include container;
+
+      .right-panel {
+        .qiu-right-tools {
+          [class*='ri-'] {
+            color: var(--qiu-menu-color-text);
+          }
+        }
+
+        .username,
+        .username *,
+        > i,
+        > div > i,
+        > span > i,
+        > div > span > i {
+          @include container;
+        }
+
+        .el-menu {
+          &--horizontal {
+            .el-sub-menu .el-sub-menu__title,
+            .el-menu-item {
+              @include active;
+
+              [class*='ri-'] {
+                color: var(--qiu-menu-color-text) !important;
+              }
+            }
+
+            > .el-sub-menu.is-active > .el-sub-menu__title,
+            > .el-menu-item.is-active {
+              color: var(--qiu-color-primary) !important;
+              background-color: var(--qiu-color-primary-light-9) !important;
+              border-radius: var(--qiu-border-radius-base);
+              @include active;
+
+              [class*='ri-'] {
+                color: var(--qiu-color-primary) !important;
+              }
+            }
+
+            > .el-sub-menu > .el-sub-menu__title,
+            > .el-menu-item {
+              &:hover {
+                color: var(--qiu-color-primary) !important;
+                background-color: transparent !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .qiu-tabs {
+    &-more {
+      &-active,
+      &:hover {
+        .qiu-tabs-more-icon {
+          .box:before,
+          .box:after {
+            background: var(--qiu-color-primary) !important;
+          }
+        }
+      }
+    }
+
+    .qiu-tabs-content-card {
+      .el-tabs__header {
+        .el-tabs__item {
+          &.is-active {
+            color: var(--qiu-color-primary) !important;
+            background: var(--qiu-color-primary-light-9) !important;
+            border: 1px solid var(--qiu-color-primary) !important;
+          }
+
+          &:hover {
+            border: 1px solid var(--qiu-color-primary) !important;
+          }
+        }
+      }
+    }
+
+    .qiu-tabs-content-smart {
+      .el-tabs__header {
+        .el-tabs__item {
+          &.is-active {
+            background: var(--qiu-color-primary-light-9) !important;
+          }
+
+          &:after {
+            background-color: var(--qiu-color-primary) !important;
+          }
+
+          &:hover {
+            background: var(--qiu-color-primary-light-9) !important;
+          }
+        }
+      }
+    }
+
+    .qiu-tabs-content-smooth {
+      .el-tabs__header {
+        .el-tabs__item {
+          &.is-active {
+            color: var(--qiu-color-primary) !important;
+            background: var(--qiu-color-primary-light-9) !important;
+
+            &:hover {
+              color: var(--qiu-color-primary) !important;
+              background: var(--qiu-color-primary-light-9) !important;
+            }
+          }
+
+          &:hover {
+            color: var(--qiu-menu-color-text) !important;
+          }
+        }
+      }
+    }
+  }
+
+  .qiu-side-bar {
+    .el-sub-menu__title:hover {
+      color: var(--qiu-color-primary);
+      background-color: var(--qiu-color-primary-light-9);
+    }
+  }
+}

package/styles/qiu-tokens.scss

@@ -0,0 +1,40 @@
+/**
+ * Qiu UI design tokens — 全部基于 qiu 自有变量体系。
+ * 真源定义见 var.scss（:root 内的 --qiu-*）。
+ * 本文件仅作业务层可用的语义别名，取值回链 var.scss 的真源。
+ */
+:root {
+  --qiu-color-primary: var(--qiu-color-primary, #0f766e);
+  --qiu-color-success: var(--qiu-color-success, #67c23a);
+  --qiu-color-warning: var(--qiu-color-warning, #e6a23c);
+  --qiu-color-danger: var(--qiu-color-danger, #f56c6c);
+  --qiu-color-error: var(--qiu-color-error, #f56c6c);
+  --qiu-color-info: var(--qiu-color-info, #909399);
+  --qiu-color-white: var(--qiu-color-white, #ffffff);
+  --qiu-color-black: var(--qiu-color-black, rgba(0, 0, 0, 0.75));
+  --qiu-text-color: var(--qiu-text-color-primary, #303133);
+  --qiu-text-color-regular: var(--qiu-text-color-regular, #606266);
+  --qiu-text-color-secondary: var(--qiu-text-color-secondary, #909399);
+  --qiu-text-color-placeholder: var(--qiu-text-color-placeholder, #a8abb2);
+  --qiu-border-color: #dcdfe6;
+  --qiu-border-color-light: #e4e7ed;
+  --qiu-border-color-lighter: #ebeef5;
+  --qiu-fill-color: #f0f2f5;
+  --qiu-fill-color-light: #f5f7fa;
+  --qiu-fill-color-blank: #fff;
+  --qiu-bg-color: #ffffff;
+  --qiu-bg-color-overlay: #ffffff;
+  --qiu-border-radius: var(--qiu-border-radius-base, 4px);
+  --qiu-border-radius-round: var(--qiu-border-radius-round, 20px);
+  --qiu-font-size: var(--qiu-font-size-base, 14px);
+  --qiu-font-size-small: var(--qiu-font-size-small, 13px);
+  --qiu-component-size: 32px;
+  --qiu-component-size-small: 24px;
+  --qiu-component-size-large: 40px;
+  --qiu-transition: var(--qiu-transition-duration, 0.2s);
+  --qiu-mask-color: var(--qiu-overlay-color-lighter, rgba(0, 0, 0, 0.5));
+  --qiu-shadow: var(--qiu-box-shadow-light, 0 0 12px rgba(0, 0, 0, 0.12));
+  --qiu-menu-bg: var(--qiu-menu-background-color, #0b1f1c);
+  --qiu-menu-text: var(--qiu-menu-color-text, #ffffff);
+  --qiu-menu-item-height: var(--qiu-menu-item-height, 48px);
+}