Web/src/assets/style/app.less

@@ -0,0 +1,27 @@
+@import './extend.less';
+@import './lib/visibility.less';
+@import './lib/container.less';
+@import './lib/align.less';
+@import './lib/font-size.less';
+@import './lib/margin.less';
+@import './lib/width-height.less';
+@import './lib/scrollbar.less';
+@import './main.less';
+@import './frame/dark.less';
+@import './frame/light.less';
+.yo-nav-theme--dark {
+  .dark();
+}
+.yo-nav-theme--light {
+  .light();
+}
+@import './lib/card.less';
+@import './lib/table.less';
+@import './lib/list.less';
+@import './lib/form.less';
+@import './lib/select.less';
+@import './lib/dropdown.less';
+@import './lib/tree-layout.less';
+@import './lib/authority-view.less';
+@import './theme/primary.less';
+// @import './lib/font-weight.less';

Web/src/assets/style/extend.less

@@ -0,0 +1,3 @@
+@import '~ant-design-vue/dist/antd.less';
+@padding-xxs: 4px;
+@padding-xl: 32px;

Web/src/assets/style/frame/dark.less

@@ -0,0 +1,20 @@
+@import (reference) '~@/assets/style/main.less';
+.dark {
+  .main(@nav-background: @layout-header-background;
+  @nav-box-shadow-color: fade(@black, 25%);
+  @nav-scrollbar-background: fade(@white, 50%);
+  @logo-color: @white;
+  @logo-box-shadow: none;
+  @app-selector-color: @white;
+  @app-selector-border-color: fade(@white, 10%);
+  @app-selector-background-color: fade(@white, 30%);
+  @app-selector-box-shadow-color: fade(@white, 15%);
+  @header-action-color: fade(@white, 60%);
+  @header-action-hover-color: @white;
+  @header-action-hover-background: fade(@white, 20%);
+  @header-search-color: @white;
+  @header-search-background: fade(@white, 15%);
+  @header-search-focus-background: fade(@white, 30%);
+  @header-search-icon-color: fade(@white, 60%);
+  @header-search-icon-hover-color: @white);
+}

Web/src/assets/style/frame/light.less

@@ -0,0 +1,20 @@
+@import (reference) '~@/assets/style/main.less';
+.light {
+  .main(@nav-background: @white;
+  @nav-box-shadow-color: fade(@black, 5%);
+  @nav-scrollbar-background: fade(@black, 30%);
+  @logo-color: @black;
+  @logo-box-shadow: inset -1px -1px 1px @border-color-split;
+  @app-selector-color: @primary-6;
+  @app-selector-border-color: @primary-3;
+  @app-selector-background-color: @primary-1;
+  @app-selector-box-shadow-color: @primary-1;
+  @header-action-color: fade(@black, 35%);
+  @header-action-hover-color: @icon-color-hover;
+  @header-action-hover-background: fade(@black, 5%);
+  @header-search-color: @black;
+  @header-search-background: @white;
+  @header-search-focus-background: fade(@black, 5%);
+  @header-search-icon-color: fade(@black, 45%);
+  @header-search-icon-hover-color: fade(@black, 80%));
+}

Web/src/assets/style/lib/align.less

@@ -0,0 +1,9 @@
+.text-left {
+  text-align: left !important;
+}
+.text-center {
+  text-align: center !important;
+}
+.text-right {
+  text-align: right !important;
+}

Web/src/assets/style/lib/authority-view.less

@@ -0,0 +1,24 @@
+@import (reference) '~@/assets/style/extend.less';
+.yo-authority-view {
+  .ant-descriptions-item-label {
+    width: 150px;
+  }
+  .ant-descriptions {
+    margin-bottom: @padding-sm;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .ant-descriptions-item-content {
+    padding: @padding-sm @padding-md;
+    >.yo-authority-view--checkbox {
+      display: inline-block;
+
+      width: 150px;
+      margin: @padding-xxs 0;
+      .ant-checkbox-wrapper {
+        margin: 0;
+      }
+    }
+  }
+}

Web/src/assets/style/lib/card.less

@@ -0,0 +1,4 @@
+@import (reference) '~@/assets/style/extend.less';
+.ant-card {
+  margin-bottom: @padding-md;
+}

Web/src/assets/style/lib/container.less

@@ -0,0 +1,10 @@
+@import (reference) '~@/assets/style/extend.less';
+@container-width: 1200px;
+.container {
+  width: @container-width;
+  margin: 0 auto;
+  padding: 0 @padding-md;
+}
+.container-fluid {
+  padding: 0 @padding-md;
+}

Web/src/assets/style/lib/dropdown.less

@@ -0,0 +1,6 @@
+@import (reference) '~@/assets/style/extend.less';
+.ant-dropdown-trigger {
+  .anticon-down {
+    transform: scaleY(.75);
+  }
+}

Web/src/assets/style/lib/font-size.less

@@ -0,0 +1 @@
+@import (reference) '~@/assets/style/extend.less';

Web/src/assets/style/lib/font-weight.css

@@ -0,0 +1,17 @@
+body {
+  font-weight: 100;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 300;
+}
+.ant-card-meta-title {
+  font-weight: inherit;
+}
+.ant-table-thead > tr > th {
+  font-weight: 500;
+}

Web/src/assets/style/lib/font-weight.less

@@ -0,0 +1,24 @@
+@import (reference) '~@/assets/style/extend.less';
+body {
+  font-weight: 100;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 300;
+}
+
+@btn-font-weight: 100;
+.ant-card-meta-title {
+  font-weight: inherit;
+}
+.ant-table-thead {
+  >tr {
+    >th {
+      font-weight: 500;
+    }
+  }
+}

Web/src/assets/style/lib/form.less

@@ -0,0 +1,205 @@
+@import (reference) '~@/assets/style/extend.less';
+.yo-form {
+  &--fixed {
+    width: 660px;
+    margin: 0 auto;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    color: darken(@white, 40%);
+  }
+  .yo-form-group {
+    margin-bottom: @padding-md;
+  }
+  .ant-form-item {
+    display: flex;
+    justify-content: space-between;
+
+    margin-bottom: -1px;
+    padding: @padding-xs @padding-md;
+
+    border: @border-width-base @border-style-base @border-color-split;
+    background-color: @white;
+
+    @box-shadow-focused: 0 0 0 2px fade(@primary-color, 50%);
+    &::before,
+    &::after {
+      content: none;
+    }
+    .ant-form-item-control {
+      text-align: right;
+    }
+    .ant-input,
+    .ant-input-number,
+    .ant-mentions,
+    .ant-select-selection,
+    .ant-input-group-addon {
+      z-index: 1;
+
+      text-align: left;
+
+      color: lighten(@black, 10%);
+      border: 0;
+      background-color: lighten(@black, 95%);
+    }
+    .ant-mentions {
+      textarea {
+        background-color: lighten(@black, 95%);
+      }
+    }
+    .focus {
+      z-index: 2 !important;
+
+      box-shadow: @box-shadow-focused;
+    }
+    .ant-input {
+      &:focus {
+        .focus();
+      }
+    }
+    .ant-input-number-focused,
+    .ant-mentions-focused {
+      .focus();
+    }
+    .ant-select-focused,
+    .ant-select-open {
+      z-index: 2;
+      .ant-select-selection {
+        .focus();
+      }
+    }
+    .ant-input-group {
+      .ant-row-flex {
+        .ant-select {
+          width: 100%;
+        }
+      }
+      .ant-input-group-addon {
+        z-index: 0;
+      }
+    }
+  }
+  .ant-form-item-label {
+    overflow: hidden;
+    flex: 1 1 auto;
+
+    margin-right: @padding-md;
+
+    text-align: left;
+    text-overflow: ellipsis;
+    >label {
+      color: lighten(@black, 10%);
+      &::after {
+        content: none;
+      }
+    }
+  }
+  .ant-form-item-control-wrapper {
+    flex: 0 0 61.8%;
+
+    width: 61.8%;
+    min-width: 220px;
+  }
+  .ant-form-explain {
+    font-size: @font-size-base - 1px;
+
+    margin-top: @padding-xs;
+    margin-bottom: @padding-xxs;
+    margin-left: -61.8%;
+
+    transition: none;
+    animation: none;
+    text-align: left;
+
+    opacity: 1;
+    color: fade(darken(@primary-color, 38.2%), 61.8%);
+  }
+  .has-error {
+    .ant-form-explain {
+      color: @error-color;
+    }
+  }
+  // 上下布局
+  .yo-form--vertical {
+    display: block;
+    .ant-form-item-control {
+      text-align: left;
+    }
+    &-radio {
+      .ant-radio-wrapper {
+        line-height: @padding-lg;
+
+        display: block;
+
+        margin-right: 0;
+        +.ant-radio-wrapper {
+          margin-top: @padding-sm;
+        }
+      }
+    }
+    .ant-form-item-control-wrapper {
+      margin-left: @padding-lg;
+    }
+    .ant-form-explain {
+      margin-left: 0;
+    }
+  }
+}
+.yo-modal-form {
+  .ant-modal-body {
+    padding: 0;
+  }
+  .yo-form {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      margin-top: @padding-sm;
+      padding: 0 @padding-md;
+    }
+    .yo-form-group {
+      margin-bottom: 0;
+    }
+    .ant-form-item {
+      border-right: 0;
+      border-left: 0;
+      &:first-child {
+        margin-top: -1px;
+      }
+    }
+  }
+}
+.yo-drawer-form {
+  .ant-drawer-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 7;
+
+    width: 100%;
+  }
+  .ant-drawer-body {
+    padding: @padding-lg + 56px @padding-lg;
+  }
+  .ant-drawer-footer {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 7;
+
+    width: 100%;
+    padding: 10px @padding-md;
+
+    text-align: right;
+
+    border-top: @border-width-base @border-style-base @border-color-split;
+    background: @white;
+    button+button {
+      margin-left: @padding-xs;
+    }
+  }
+}

Web/src/assets/style/lib/list.less

@@ -0,0 +1,24 @@
+@import (reference) '~@/assets/style/extend.less';
+.yo-list {
+  &-content--h {
+    display: flex;
+    align-items: center;
+    &--item {
+      min-width: 100px;
+      margin-left: @padding-xl;
+      >span {
+        line-height: 20px;
+
+        color: lighten(@black, 70%);
+      }
+      >p {
+        line-height: 22px;
+
+        margin-top: @padding-xxs;
+        margin-bottom: 0;
+
+        color: lighten(@black, 30%);
+      }
+    }
+  }
+}

Web/src/assets/style/lib/margin.less

@@ -0,0 +1,52 @@
+@import (reference) '~@/assets/style/extend.less';
+@margin-padding-position: ~'', ~'-top', ~'-left', ~'-right', ~'-bottom';
+@margin-padding-position-name: ~'', ~'t', ~'l', ~'r', ~'b';
+
+.margin-padding (@i) when (@i <=length(@margin-padding-position)) {
+    @position: extract(@margin-padding-position, @i);
+    @name: extract(@margin-padding-position-name, @i);
+
+    .m@{name}-lg {
+        margin@{position}: @padding-lg  !important;
+    }
+
+    .m@{name}-md {
+        margin@{position}: @padding-md  !important;
+    }
+
+    .m@{name}-sm {
+        margin@{position}: @padding-sm  !important;
+    }
+
+    .m@{name}-xs {
+        margin@{position}: @padding-xs  !important;
+    }
+
+    .p@{name}-lg {
+        padding@{position}: @padding-lg  !important;
+    }
+
+    .p@{name}-md {
+        padding@{position}: @padding-md  !important;
+    }
+
+    .p@{name}-sm {
+        padding@{position}: @padding-sm  !important;
+    }
+
+    .p@{name}-xs {
+        padding@{position}: @padding-xs  !important;
+    }
+
+    .m@{name}-none {
+        margin@{position}: 0 !important;
+    }
+
+    .p@{name}-none {
+        padding@{position}: 0 !important;
+    }
+
+    .margin-padding(@i + 1);
+}
+
+.margin-padding(1);

Web/src/assets/style/lib/scrollbar.less

@@ -0,0 +1,14 @@
+@import (reference) '~@/assets/style/extend.less';
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+
+  background-color: lighten(@primary-color, 35%);
+}
+::-webkit-scrollbar-thumb {
+  border-radius: @border-radius-base;
+  background-color: fade(@primary-color, 70%);
+}
+::-webkit-scrollbar-thumb:active {
+  background-color: @primary-color;
+}

Web/src/assets/style/lib/select.less

@@ -0,0 +1,6 @@
+@import (reference) '~@/assets/style/extend.less';
+.ant-select-arrow {
+  .ant-select-arrow-icon {
+    transform: scaleY(.75);
+  }
+}

Web/src/assets/style/lib/table.less

@@ -0,0 +1,169 @@
+@import (reference) '~@/assets/style/extend.less';
+
+.yo-query-bar {
+  margin-bottom: @padding-md;
+}
+
+.yo-action-bar {
+  display: flex;
+  justify-content: space-between;
+
+  margin-bottom: @padding-md;
+
+  &--actions {
+
+    >.ant-btn,
+    >.ant-btn-group {
+
+      +.ant-btn,
+      +.ant-btn-group {
+        margin-left: @padding-xs;
+      }
+    }
+  }
+}
+
+.ant-table {
+  background-color: @white;
+
+  .yo-action-bar {
+    margin-bottom: 0;
+  }
+}
+
+.ant-table-small {
+  >.ant-table-content {
+    >.ant-table-body {
+      margin: 0;
+
+      >table {
+        >.ant-table-thead {
+          >tr {
+            >th {
+              background-color: @table-selected-row-bg;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.ant-table-thead {
+  >tr {
+    >th {
+      font-weight: bold;
+    }
+  }
+}
+
+.yo-table {
+  .border-right-none() {
+    border-right-width: 0 !important;
+
+    &:last-child {
+      border-right-width: 1px !important;
+    }
+  }
+
+  .ant-table-content {
+    .ant-table-body {
+      overflow-x: auto !important;
+
+      >table {
+        >.ant-table-thead {
+          >tr {
+            >th {
+              .border-right-none();
+            }
+          }
+        }
+
+        >.ant-table-tbody {
+          >tr {
+            >td {
+              .border-right-none();
+            }
+          }
+        }
+      }
+    }
+
+    .ant-table-fixed-left {
+      .ant-table-thead {
+        >tr {
+          >th {
+            border-right-width: 0 !important;
+          }
+        }
+      }
+
+      .ant-table-tbody {
+        >tr {
+          >td {
+            border-right-width: 0 !important;
+          }
+        }
+      }
+    }
+
+    .ant-table-fixed-right {
+      .ant-table-fixed {
+        border-left-width: 0 !important;
+      }
+
+      .ant-table-thead {
+        >tr {
+          >th {
+            .border-right-none();
+          }
+        }
+      }
+
+      .ant-table-tbody {
+        >tr {
+          >td {
+            .border-right-none();
+          }
+        }
+      }
+    }
+  }
+}
+
+.yo-table-actions {
+  display: inline-block;
+
+  vertical-align: middle;
+
+  &--inner {
+    display: flex;
+    align-items: center;
+
+    height: 18px;
+
+    >a {
+      color: darken(@primary-color, 20%);
+    }
+  }
+}
+
+.yo-table--column-setting {
+  width: 240px;
+
+  .ant-dropdown-menu-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .anticon-pushpin {
+    color: darken(@white, 40%);
+    transition: @animation-duration-slow;
+    transform: rotate(45deg);
+  }
+
+  .yo-table--fixed {
+    transform: rotate(-45deg);
+  }
+}

Web/src/assets/style/lib/tree-layout.less

@@ -0,0 +1,43 @@
+@import (reference) '~@/assets/style/extend.less';
+.yo-tree-layout {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  .ant-layout-sider {
+    background-color: @white;
+    .ant-layout-header {
+      height: @layout-header-height - 20px;
+
+      background-color: @white;
+      .header-actions {
+        >.ant-input-search {
+          .ant-input {
+            color: @black;
+            background-color: @white;
+            &:focus {
+              background-color: fade(@black, 5%);
+            }
+          }
+          .anticon-search {
+            color: fade(@black, 45%);
+          }
+        }
+      }
+    }
+    .swiper-container {
+      position: absolute;
+      top: @layout-header-height - 20px;
+      left: 0;
+      bottom: 0;
+
+      width: 100%;
+      .swiper-slide {
+        height: auto;
+        min-height: 100%;
+      }
+    }
+  }
+}

Web/src/assets/style/lib/visibility.less

@@ -0,0 +1,6 @@
+.hide {
+  visibility: hidden !important;
+}
+.hidden {
+  display: none !important;
+}

Web/src/assets/style/lib/width-height.css

@@ -0,0 +1,3 @@
+.w-100-p {
+  width: 100%;
+}

Web/src/assets/style/lib/width-height.less

@@ -0,0 +1,3 @@
+.w-100-p {
+  width: 100%;
+}

Web/src/assets/style/main.less

@@ -0,0 +1,534 @@
+@import (reference) './extend.less';
+@import (reference) './lib/container.less';
+
+.main(@nav-background: @layout-header-background,
+  @nav-box-shadow-color: fade(@black, 25%),
+  @nav-scrollbar-background: fade(@white, 30%),
+  @logo-color: @white,
+  @logo-box-shadow: none,
+  @app-selector-color: @white,
+  @app-selector-border-color: fade(@white, 10%),
+  @app-selector-background-color: fade(@white, 30%),
+  @app-selector-box-shadow-color: fade(@white, 15%),
+  @header-action-color: fade(@white, 60%),
+  @header-action-hover-color: @white,
+  @header-action-hover-background: fade(@white, 20%),
+  @header-search-color: @white,
+  @header-search-background: fade(@white, 15%),
+  @header-search-focus-background: fade(@white, 30%),
+  @header-search-icon-color: fade(@white, 60%),
+  @header-search-icon-hover-color: @white,
+) {
+  .ant-layout-header {
+    .header-actions {
+      display: flex;
+      .header-action {
+        display: inline-block;
+
+        padding: 0 @padding-md;
+
+        cursor: pointer;
+        transition: @animation-duration-slow;
+        transition-property: background-color;
+        .anticon {
+          font-size: @font-size-base + 6px;
+
+          transition: @animation-duration-slow;
+          transition-property: color;
+        }
+        &:active {
+          box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .05);
+        }
+      }
+      >.ant-input-search,
+      >.ant-select-auto-complete {
+        display: flex;
+        align-items: center;
+
+        margin: 5px @padding-md;
+        .ant-input {
+          height: 34px;
+          padding: 5px 30px 5px 11px;
+
+          transition: @animation-duration-slow;
+          transition-property: background-color;
+
+          border-color: transparent;
+          &:focus {
+            box-shadow: none;
+          }
+        }
+        .ant-select-selection {
+          background-color: transparent;
+        }
+      }
+    }
+    .user-container {
+      z-index: 10;
+
+      width: 32px + @padding-sm * 2;
+      height: @layout-header-height - 24px;
+      margin: 2px 0;
+
+      transition: @animation-duration-slow;
+      .user-container-inner {
+        position: relative;
+
+        transition: @animation-duration-slow;
+
+        border-radius: @border-radius-base;
+      }
+      .user {
+        &--base {
+          line-height: @layout-header-height - 24px;
+
+          position: relative;
+
+          display: flex;
+          overflow: hidden;
+          align-items: center;
+
+          width: 100%;
+          height: @layout-header-height - 24px;
+          padding: 0 @padding-sm;
+
+          transition: @animation-duration-slow;
+        }
+        &--avatar {
+          box-shadow: 0 0 0 2px @white;
+        }
+        &--name {
+          position: absolute;
+          left: 32px + @padding-sm * 2;
+
+          transition: @animation-duration-slow;
+
+          opacity: 0;
+        }
+        &--dropdown {
+          width: 200px;
+
+          transition: @animation-duration-base;
+          transform: scaleY(0);
+          transform-origin: top;
+
+          opacity: 0;
+          .ant-dropdown-menu {
+            box-shadow: none;
+          }
+        }
+      }
+      &.open {
+        width: 200px;
+        .user-container-inner {
+          background-color: @white;
+          box-shadow: @box-shadow-base;
+        }
+        .user {
+          &--name {
+            opacity: 1;
+          }
+        }
+      }
+      &.drop {
+        .user {
+          &--dropdown {
+            transform: scaleY(1);
+
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+  .ant-layout-content {
+    position: relative;
+    >.ant-tabs {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+
+      display: flex;
+      flex-direction: column;
+
+      width: 100%;
+      >.ant-tabs-bar {
+        z-index: 5;
+
+        margin-bottom: 0;
+
+        border-bottom: 0;
+        background-color: @white;
+        box-shadow: 0 2px 12px fade(@black, 8%);
+        &::before {
+          content: none;
+        }
+        .ant-tabs-nav-container {
+          height: 30px;
+          margin-bottom: 0;
+        }
+        .ant-tabs-tab {
+          line-height: 30px;
+
+          height: 30px;
+          margin-right: 0;
+          padding: 0;
+
+          transition: none;
+
+          border: 0;
+          background-color: transparent;
+          &:hover {
+            color: @black;
+          }
+          &.ant-tabs-tab-active {
+            color: @white;
+            border-color: darken(@primary-color, 10%);
+            background-color: @primary-color;
+            .ant-tabs-close-x {
+              color: fade(@white, 70%);
+              &:hover {
+                color: @white;
+              }
+            }
+          }
+          +.ant-tabs-tab {
+            margin-left: 0;
+          }
+          .ant-dropdown-trigger {
+            padding: 0 @padding-md * 2 0 @padding-md;
+          }
+          .ant-tabs-tab-unclosable {
+            .ant-dropdown-trigger {
+              padding: 0 @padding-lg 0 @padding-md;
+            }
+          }
+          .ant-tabs-close-x {
+            position: absolute;
+            top: 9px;
+            right: 9px;
+
+            margin: 0;
+
+            transition: none;
+          }
+        }
+      }
+      >.ant-tabs-content {
+        position: relative;
+
+        height: 100%;
+        >.ant-tabs-tabpane {
+          position: absolute;
+          top: 0;
+          left: 0;
+
+          overflow-x: hidden;
+          overflow-y: auto;
+
+          width: 100%;
+          height: 100%;
+          >.ant-spin {
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            display: flex;
+            overflow: auto;
+            align-items: center;
+            justify-content: center;
+
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+  .ant-layout-sider {
+    .ant-menu-inline {
+      border-right: 0;
+    }
+  }
+  .yo-layout--left-menu,
+  .yo-layout--right-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+    .ant-layout-header {
+      line-height: @layout-header-height - 20px;
+
+      z-index: 6;
+
+      height: @layout-header-height - 20px;
+      padding: 0;
+
+      background-color: @white;
+      >section {
+        display: flex;
+        justify-content: space-between;
+      }
+      .header-actions {
+        .header-action {
+          line-height: @layout-header-height - 16px;
+
+          height: @layout-header-height - 20px;
+          .anticon {
+            color: fade(@black, 35%);
+          }
+          &:hover {
+            background-color: fade(@black, 5%);
+            .anticon {
+              color: @icon-color-hover;
+            }
+          }
+        }
+        >.ant-input-search,
+        >.ant-select-auto-complete {
+          .ant-input {
+            &:focus {
+              background-color: fade(@black, 5%);
+            }
+          }
+        }
+      }
+    }
+    >section {
+      >.ant-layout-sider {
+        height: 100%;
+
+        background-color: @nav-background;
+        .ant-layout-sider-children {
+          display: flex;
+          flex-direction: column;
+        }
+        .logo {
+          font-size: @font-size-lg * 1.5;
+          font-weight: 500;
+          line-height: @layout-header-height + 10px;
+
+          z-index: 11;
+
+          display: flex;
+          overflow: hidden;
+          align-items: center;
+          flex: 0 0 @layout-header-height + 10px;
+
+          height: @layout-header-height + 10px;
+          padding: 0 @padding-md 0 @padding-lg;
+
+          color: @logo-color;
+          background-color: @nav-background;
+          box-shadow: @logo-box-shadow;
+          img {
+            max-height: 100%;
+          }
+          span {
+            margin-left: @padding-sm;
+
+            transition: @animation-duration-slow;
+            transition-property: opacity;
+          }
+        }
+        &.ant-layout-sider-collapsed {
+          .logo {
+            span {
+              opacity: 0;
+            }
+          }
+        }
+        .yo-sider-nav {
+          position: relative;
+          z-index: 10;
+
+          display: flex;
+          flex: 1 1 100%;
+          flex-direction: column;
+
+          box-shadow: 2px 0 8px @nav-box-shadow-color;
+        }
+        .swiper-container {
+          flex: 1 1 100%;
+
+          width: 100%;
+          height: 100%;
+          .swiper-scrollbar {
+            transition: @animation-duration-slow;
+            transition-property: opacity;
+
+            opacity: 0;
+          }
+          .swiper-scrollbar-drag {
+            background-color: @nav-scrollbar-background;
+          }
+          &:hover {
+            .swiper-scrollbar {
+              opacity: 1;
+            }
+          }
+        }
+        .swiper-slide {
+          height: auto;
+          min-height: 100%;
+          >.ant-spin-nested-loading {
+            height: 100%;
+            .ant-spin-blur {
+              &::after {
+                opacity: 0;
+              }
+            }
+          }
+        }
+        .yo-apps-selector {
+          >span {
+            line-height: @layout-header-height / 2 - 2px;
+
+            display: block;
+
+            height: @layout-header-height / 2;
+            margin: @padding-xxs @padding-xs;
+
+            cursor: pointer;
+            transition: @animation-duration-slow box-shadow;
+            text-align: center;
+
+            color: @app-selector-color;
+            border: @border-width-base @border-style-base @app-selector-border-color;
+            border-radius: @border-radius-base;
+            background-color: @app-selector-background-color;
+            &:hover {
+              box-shadow: 0 0 15px @app-selector-box-shadow-color;
+            }
+          }
+        }
+      }
+    }
+  }
+  .yo-layout--top-nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    min-width: @container-width;
+    height: 100%;
+    .ant-layout-header {
+      flex: 0 0 @layout-header-height;
+
+      padding: 0;
+
+      background-color: @nav-background;
+      section {
+        display: flex;
+        justify-content: space-between;
+
+        height: 100%;
+      }
+      .header-actions {
+        .header-action {
+          .anticon {
+            color: @header-action-color;
+          }
+          &:hover {
+            background-color: @header-action-hover-background;
+            .anticon {
+              color: @header-action-hover-color;
+            }
+          }
+        }
+        >.ant-input-search,
+        >.ant-select-auto-complete {
+          .ant-input {
+            color: @header-search-color;
+            background-color: @header-search-background;
+            &:focus {
+              background-color: @header-search-focus-background;
+            }
+          }
+          .anticon-search {
+            color: @header-search-icon-color;
+            &:hover {
+              color: @header-search-icon-hover-color;
+            }
+          }
+        }
+      }
+      .user-container {
+        margin: 12px 0;
+      }
+      .logo {
+        font-size: @font-size-lg * 1.5;
+        font-weight: 500;
+        line-height: @layout-header-height;
+
+        display: flex;
+        overflow: hidden;
+        align-items: center;
+
+        height: @layout-header-height;
+        margin-right: @padding-lg;
+
+        color: @logo-color;
+        img {
+          max-height: 100%;
+        }
+        span {
+          margin-left: @padding-sm;
+        }
+      }
+      .ant-menu-horizontal {
+        line-height: @layout-header-height;
+
+        border-bottom: 0;
+        >.ant-menu-submenu {
+          top: 0;
+
+          border-bottom: 0;
+        }
+      }
+      .header-actions {
+        .header-action {
+          line-height: @layout-header-height - 16px;
+
+          margin: 10px 0;
+        }
+      }
+    }
+    &--container {
+      .ant-layout-header {
+        .ant-menu-horizontal {
+          width: 400px;
+        }
+      }
+      .ant-layout-content {
+        >.ant-tabs {
+          >.ant-tabs-bar {
+            .ant-tabs-nav-container {
+              width: @container-width - @padding-md * 2;
+              margin: 0 auto;
+            }
+          }
+        }
+      }
+    }
+    &--container-fluid {
+      .ant-layout-header {
+        .ant-menu-horizontal {
+          width: 800px;
+        }
+        @media (max-width: 1400px) {
+          .ant-menu-horizontal {
+            width: 600px;
+          }
+        }
+      }
+    }
+  }
+}

Web/src/assets/style/theme/README.md

@@ -0,0 +1 @@
+/** 在此文件夹中添加控制主题颜色的less文件 **/

Web/src/assets/style/theme/primary.less

@@ -0,0 +1,3 @@
+@import '~@/assets/style/app.less';
+@font-size-base: 13px;
+@border-radius-base: 0;