update 夜间模式

web-react/src/assets/style/default/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-react/src/assets/style/default/lib/anchor.less

@@ -0,0 +1,11 @@
+@import (reference) '../extend.less';
+.ant-anchor-ink-ball {
+  width: 2px;
+  height: 28px;
+
+  transform: translate(-50%, -10px);
+
+  border: 0;
+  border-radius: 0;
+  background-color: @primary-color;
+}

web-react/src/assets/style/default/lib/authority-view.less

@@ -0,0 +1,53 @@
+@import (reference) '../extend.less';
+.yo-authority-view {
+  &--container {
+    >.ant-descriptions-view {
+      border: 0;
+    }
+  }
+  .ant-descriptions-item-label {
+    width: 150px;
+  }
+  .ant-descriptions {
+    clear: both;
+
+    margin-bottom: @padding-sm;
+    .ant-descriptions-view {
+      overflow: visible;
+    }
+    &: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;
+      }
+    }
+  }
+  .ant-card-grid {
+    width: 25%;
+    margin-bottom: @padding-sm;
+    padding: @padding-xs;
+
+    cursor: pointer;
+  }
+  .ant-card {
+    margin-bottom: 0;
+
+    background-color: transparent;
+    &-body {
+      margin: -1px 0 0 -1px;
+      padding: 0;
+    }
+    .ant-card-grid {
+      margin-bottom: 0;
+    }
+  }
+}

web-react/src/assets/style/default/lib/button.less

@@ -0,0 +1,4 @@
+@import (reference) '../extend.less';
+.ant-btn {
+  box-shadow: none;
+}

web-react/src/assets/style/default/lib/card.less

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

web-react/src/assets/style/default/lib/cascader.less

@@ -0,0 +1,6 @@
+@import (reference) '../extend.less';
+.ant-cascader-picker-arrow {
+  svg {
+    transform: scaleY(.75);
+  }
+}

web-react/src/assets/style/default/lib/checkbox.less

@@ -0,0 +1,10 @@
+@import (reference) '../extend.less';
+.ant-checkbox-wrapper {
+  margin-right: @padding-xs;
+  &:last-child {
+    margin-right: 0;
+  }
+  +.ant-checkbox-wrapper {
+    margin-left: 0;
+  }
+}

web-react/src/assets/style/default/lib/color-selector.less

@@ -0,0 +1,18 @@
+@import (reference) '../extend.less';
+.ant-select-dropdown {
+  .chrome-picker {
+    width: auto !important;
+    margin: -@padding-xxs 0;
+
+    border-radius: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+}
+.color-selector--palette {
+  width: 32px;
+  height: 32px;
+
+  border-radius: @border-radius-base;
+  box-shadow: inset 0 0 0 @border-width-base @border-color-base, inset 0 0 0 3px @white;
+}

web-react/src/assets/style/default/lib/container.less

@@ -0,0 +1,43 @@
+@import (reference) '../extend.less';
+@container-width: 1400px;
+.container-base {
+  margin: 0 auto;
+  padding: 0 @padding-md;
+}
+.container {
+  width: @container-width;
+
+.container-base();
+}
+@media (max-width: 1400px) {
+  .container {
+    width: auto;
+  }
+}
+.container-md {
+  width: @container-width - 200px;
+
+.container-base();
+}
+.container-sm {
+  width: @container-width - 400px;
+
+.container-base();
+}
+.container-xs {
+  width: @container-width - 600px;
+
+.container-base();
+}
+.container-xxs {
+  width: @container-width - 700px;
+
+.container-base();
+}
+.container-fluid {
+  .container-base();
+}
+.container-flex {
+  display: flex;
+  justify-content: space-between;
+}

web-react/src/assets/style/default/lib/description.less

@@ -0,0 +1,10 @@
+@import (reference) '../extend.less';
+.ant-descriptions-bordered {
+  .ant-descriptions-view {
+    >table {
+      border-collapse: collapse;
+
+      background-color: @component-background;
+    }
+  }
+}

web-react/src/assets/style/default/lib/disabled.less

@@ -0,0 +1,59 @@
+@import (reference) '../extend.less';
+.ant-btn-primary-disabled,
+.ant-btn-primary.disabled,
+.ant-btn-primary[disabled],
+.ant-btn-primary-disabled:hover,
+.ant-btn-primary.disabled:hover,
+.ant-btn-primary[disabled]:hover,
+.ant-btn-primary-disabled:focus,
+.ant-btn-primary.disabled:focus,
+.ant-btn-primary[disabled]:focus,
+.ant-btn-primary-disabled:active,
+.ant-btn-primary.disabled:active,
+.ant-btn-primary[disabled]:active,
+.ant-btn-primary-disabled.active,
+.ant-btn-primary.disabled.active,
+.ant-btn-primary[disabled].active {
+  opacity: .5;
+  color: @btn-primary-color;
+  border-color: @btn-primary-bg;
+  background-color: @btn-primary-bg;
+  box-shadow: @btn-primary-shadow;
+  text-shadow: @btn-text-shadow;
+}
+.ant-btn-danger-disabled,
+.ant-btn-danger.disabled,
+.ant-btn-danger[disabled],
+.ant-btn-danger-disabled:hover,
+.ant-btn-danger.disabled:hover,
+.ant-btn-danger[disabled]:hover,
+.ant-btn-danger-disabled:focus,
+.ant-btn-danger.disabled:focus,
+.ant-btn-danger[disabled]:focus,
+.ant-btn-danger-disabled:active,
+.ant-btn-danger.disabled:active,
+.ant-btn-danger[disabled]:active,
+.ant-btn-danger-disabled.active,
+.ant-btn-danger.disabled.active,
+.ant-btn-danger[disabled].active {
+  opacity: .5;
+  color: @btn-danger-color;
+  border-color: @btn-danger-border;
+  background-color: @btn-danger-bg;
+  box-shadow: @btn-primary-shadow;
+  text-shadow: @btn-text-shadow;
+}
+.ant-radio-button-wrapper-disabled,
+.ant-radio-button-wrapper-disabled:first-child,
+.ant-radio-button-wrapper-disabled:hover {
+  opacity: .5;
+  color: @radio-button-color;
+  background-color: @radio-button-bg;
+}
+.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
+  opacity: .5;
+  color: @btn-primary-color;
+  border-color: @btn-primary-bg;
+  background-color: @btn-primary-bg;
+  box-shadow: @btn-primary-shadow;
+}

web-react/src/assets/style/default/lib/dropdown.less

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

web-react/src/assets/style/default/lib/font-size.less

@@ -0,0 +1,25 @@
+@import (reference) '../extend.less';
+h1,
+.h1 {
+  font-size: 36px;
+}
+h2,
+.h2 {
+  font-size: 32px;
+}
+h3,
+.h3 {
+  font-size: 24px;
+}
+h4,
+.h4 {
+  font-size: 18px;
+}
+h5,
+.h5 {
+  font-size: 16px;
+}
+h6,
+.h6 {
+  font-size: 14px;
+}

web-react/src/assets/style/default/lib/font-weight.less

@@ -0,0 +1,24 @@
+@import (reference) '../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-react/src/assets/style/default/lib/form-page.less

@@ -0,0 +1,169 @@
+@import (reference) '../extend.less';
+
+.yo-form-page {
+  position: relative;
+
+  height: 100%;
+
+  .yo-tab-external-mount {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+
+    >.ant-tabs {
+      >.ant-tabs-nav {
+        margin-bottom: 0;
+        padding: 0 @padding-md;
+
+        background-color: @component-background;
+
+        &.ant-tabs-card-bar {
+          .ant-tabs-nav-container {
+            height: @tabs-card-height + @padding-xs;
+            padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
+          }
+
+          .ant-tabs-extra-content {
+            padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
+          }
+
+          .ant-tabs-tab {
+            transition: none;
+
+            .ant-btn();
+
+            &:hover {
+              border-color: @btn-default-border;
+            }
+          }
+
+          .ant-tabs-tab {
+            line-height: @btn-height-base;
+
+            margin-right: -1px;
+          }
+
+          .ant-tabs-tab-active {
+            z-index: 2;
+
+            color: @btn-primary-color;
+            border-color: @btn-primary-bg;
+            background-color: @btn-primary-bg;
+
+            &:hover {
+              color: @btn-primary-color;
+              border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
+              background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
+            }
+          }
+        }
+      }
+    }
+
+    >.yo-tab-external-mount-content {
+      position: relative;
+
+      flex: 1;
+
+      >.yo-tab-external-tabpane {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        overflow: auto;
+
+        width: 100%;
+        height: 100%;
+
+        &.yo-tab-external-tabpane-inactive {
+          pointer-events: none;
+
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  &--bar {
+    position: sticky;
+    bottom: 0;
+    z-index: 200;
+
+    &--with-tab {
+      position: absolute;
+
+      display: flex;
+      align-items: flex-end;
+
+      width: 100%;
+      height: 0;
+      padding-right: 7px;
+
+      >.container-fluid {
+        width: 100%;
+      }
+
+      ~.yo-tab-external-mount {
+        >.yo-tab-external-mount-content {
+          >.yo-tab-external-tabpane {
+            padding-bottom: @padding-xs * 2 + @btn-height-base + @border-width-base * 2;
+          }
+        }
+      }
+    }
+  }
+
+  &--bar-inner {
+    display: flex;
+    justify-content: space-between;
+
+    padding: @padding-xs @padding-md;
+
+    border: @border-width-base @border-style-base @border-color-split;
+    background-color: fade(@component-background, 80%);
+
+    backdrop-filter: blur(5px);
+
+    >:first-child {
+      flex: 1;
+    }
+
+    .ant-btn {
+      margin-left: @padding-sm;
+    }
+  }
+
+  &--body {
+    >.ant-card-body {
+      padding: 0;
+
+      >section {
+        padding: @padding-lg;
+
+        >h5 {
+          padding-left: @padding-md;
+
+          border-left: @padding-xs @border-style-base @primary-color;
+        }
+      }
+    }
+  }
+
+  &-layout {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+
+    &--horizontal {
+      flex-direction: row;
+    }
+  }
+
+  &--header {
+    padding: @padding-md 0;
+
+    background-color: @component-background;
+  }
+}

web-react/src/assets/style/default/lib/form.less

@@ -0,0 +1,399 @@
+@import (reference) '../extend.less';
+.yo-form {
+  &--fixed {
+    width: 660px;
+    margin: 0 auto;
+  }
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    color: darken(@white, 40%);
+  }
+  .h3 {
+    font-size: 16px;
+  }
+  .h4 {
+    font-size: 15px;
+  }
+  .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: @component-background;
+
+    @box-shadow-focused: 0 0 0 2px fade(@primary-color, 50%);
+    @control-background: lighten(@black, 95%) !important;
+    &::before,
+    &::after {
+      content: none;
+    }
+    .ant-form-item-control {
+      text-align: right;
+    }
+    .ant-input,
+    .ant-input-number,
+    .ant-mentions,
+    .ant-select-selector,
+    .ant-input-group-addon,
+    .ant-cascader-picker,
+    .ant-input-affix-wrapper,
+    .ant-picker {
+      z-index: 1;
+
+      text-align: left;
+
+      color: lighten(@black, 10%);
+      border: 0;
+      background-color: @control-background;
+    }
+    .ant-mentions {
+      textarea {
+        background-color: @control-background;
+      }
+    }
+    .focus {
+      z-index: 2 !important;
+
+      box-shadow: @box-shadow-focused;
+    }
+    .unfoucs {
+      z-index: 1 !important;
+
+      box-shadow: none;
+    }
+    .ant-input {
+      &:focus {
+        .focus();
+      }
+    }
+    .ant-input-affix-wrapper {
+      >.ant-input {
+        &:focus {
+          .unfoucs();
+        }
+      }
+    }
+    .ant-input-number-focused,
+    .ant-mentions-focused {
+      .focus();
+    }
+    .ant-select-focused,
+    .ant-select-open {
+      z-index: 2;
+      .ant-select-selection {
+        .focus();
+      }
+    }
+    .ant-cascader-picker:focus {
+      .ant-cascader-input {
+        .focus();
+      }
+    }
+    .ant-input-affix-wrapper:focus,
+    .ant-input-affix-wrapper-focused {
+      .focus();
+    }
+    .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) {
+      .ant-select-selector {
+        .focus();
+      }
+    }
+    .ant-picker-focused {
+      .focus();
+    }
+    .ant-input-group {
+      .ant-row-flex {
+        .ant-select {
+          width: 100%;
+        }
+      }
+      .ant-input-group-addon {
+        z-index: 0;
+      }
+    }
+    .ant-cascader-picker-clear {
+      background-color: @control-background;
+    }
+  }
+  .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 {
+    flex: 0 0 61.8%;
+
+    width: 61.8%;
+    min-width: 220px;
+  }
+  .yo-form--fluid {
+    .ant-form-item-control {
+      flex: 0 0 100%;
+
+      width: 100%;
+    }
+  }
+  .yo-form--short {
+    .ant-form-item-control {
+      flex: 0 0 38.2%;
+
+      width: 38.2%;
+    }
+  }
+  // 上下布局
+  .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-form-link {
+    display: flex;
+    align-items: center;
+
+    margin-bottom: -1px;
+    padding: @padding-md;
+
+    cursor: pointer;
+
+    border: @border-width-base @border-style-base @border-color-split;
+    background-color: @white;
+    &:hover {
+      background-color: darken(@white, 1%);
+    }
+    &:active {
+      background-color: darken(@white, 3%);
+    }
+    &--title {
+      font-size: @font-size-base + 1px;
+
+      flex: 1;
+    }
+    &--content {
+      flex: 1;
+
+      text-align: right;
+
+      color: fade(@black, 35%);
+    }
+    &--right-icon {
+      margin-left: @padding-xs;
+
+      color: fade(@black, 50%);
+    }
+  }
+  &.yo-form--no-border {
+    .ant-form-item {
+      padding: @padding-md 0;
+
+      border-right: 0;
+      border-left: 0;
+      &:first-child {
+        border-top: 0;
+      }
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+    .yo-form-group {
+      margin-bottom: 0;
+    }
+  }
+}
+.yo-modal-form {
+  .ant-modal-body {
+    padding: 0;
+  }
+  .yo-form {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      margin: 0;
+      padding: @padding-sm @padding-md @padding-xs;
+    }
+    .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-wrapper-body {
+    display: flex;
+    flex-direction: column;
+  }
+  .ant-drawer-header {
+    flex: 0 0 auto;
+  }
+  .ant-drawer-body {
+    position: relative;
+
+    flex: 1 1 100%;
+
+    padding: 0;
+  }
+  .yo-drawer-form--body {
+    position: absolute;
+    top: 0;
+    bottom: @border-width-base + 20px + @padding-md * 2;
+
+    overflow: auto;
+
+    width: 100%;
+    padding: @padding-lg;
+  }
+  .ant-drawer-footer {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+
+    width: 100%;
+    padding: 10px @padding-md;
+
+    text-align: right;
+
+    border-top: @border-width-base @border-style-base @border-color-split;
+    background: @component-background;
+    button+button {
+      margin-left: @padding-xs;
+    }
+  }
+}
+.ant-form {
+  fieldset {
+    margin-bottom: @padding-lg;
+    padding: @padding-md;
+
+    border: @border-width-base @border-style-base @border-color-split;
+  }
+  legend {
+    display: inline-block;
+
+    width: auto;
+    margin-bottom: 0;
+    padding: 0 @padding-md;
+
+    border: 0;
+    border-radius: @border-radius-base;
+  }
+}
+.ant-form-horizontal {
+  .ant-form-item-label {
+    line-height: 1.5;
+
+    margin-right: @padding-xs;
+
+    white-space: normal;
+  }
+}
+.ant-form-vertical {
+  .ant-form-item-label {
+    >label {
+      font-weight: bold;
+    }
+  }
+}
+.ant-form-item-required {
+  &::before {
+    content: '' !important;
+    vertical-align: middle;
+
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-left: 5px solid @highlight-color;
+    background: none;
+  }
+}
+.yo-form-page {
+  .ant-form {
+    .ant-radio-button-wrapper {
+      margin-right: @padding-xs;
+      margin-bottom: @padding-xs;
+
+      border-left: @border-width-base @border-style-base @border-color-base;
+      &.ant-radio-button-wrapper-checked {
+        border-left-color: @primary-color;
+      }
+      &:not(:first-child) {
+        &::before {
+          content: none;
+        }
+      }
+    }
+  }
+}
+.yo-filter-item {
+  display: flex;
+  flex-flow: row wrap;
+
+  margin-bottom: 0;
+  .ant-tag-checkable {
+    font-size: @font-size-base;
+  }
+  .ant-radio-button-wrapper {
+    border: 0 !important;
+    background-color: transparent;
+    &:hover {
+      color: @red-6;
+    }
+  }
+  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+    border-color: @red-6;
+    background-color: @red-6;
+    &:hover {
+      border-color: @red-5;
+      background-color: @red-5;
+    }
+    &:active {
+      border-color: @red-7;
+      background-color: @red-7;
+      box-shadow: none;
+    }
+  }
+}

web-react/src/assets/style/default/lib/icon-selector.less

@@ -0,0 +1,59 @@
+@import (reference) '../extend.less';
+.yo-icon-selector {
+  .ant-drawer-wrapper-body {
+    display: flex;
+    flex-direction: column;
+  }
+  .ant-drawer-body {
+    position: relative;
+
+    flex: 1 1 100%;
+
+    padding: 0;
+  }
+  .ant-tabs {
+    height: 100%;
+    .ant-tabs-content-left {
+      position: relative;
+
+      height: 100%;
+      .ant-tabs-tabpane {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        overflow-y: auto;
+
+        width: 100%;
+        height: 100%;
+        padding: @padding-lg;
+      }
+    }
+  }
+  .ant-card {
+    margin: 0;
+  }
+  .ant-card-grid {
+    width: 25%;
+
+    text-align: center;
+    >span {
+      font-size: @font-size-sm;
+
+      display: block;
+
+      margin: @padding-xxs -@padding-lg 0;
+
+      white-space: nowrap;
+
+      color: fade(@black, 50%);
+    }
+    &.yo-icon--selected {
+      color: @white;
+      background-color: @primary-color;
+      >span {
+        color: fade(@white, 50%);
+      }
+    }
+  }
+}

web-react/src/assets/style/default/lib/input.less

@@ -0,0 +1,4 @@
+@import (reference) '../extend.less';
+.yo-addon {
+  padding: 0 @padding-xs;
+}

web-react/src/assets/style/default/lib/list.less

@@ -0,0 +1,95 @@
+@import (reference) '../extend.less';
+.ant-list-bordered {
+  border-color: @border-color-split;
+  background-color: @white;
+}
+.yo-list {
+  @title-color: lighten(@black, 70%);
+  @value-color: lighten(@black, 30%);
+  &-content--h {
+    display: flex;
+    align-items: center;
+    &--item {
+      margin-left: @padding-xl;
+      >span {
+        line-height: 20px;
+
+        color: @title-color;
+      }
+      >p {
+        line-height: 22px;
+
+        margin-top: @padding-xxs;
+        margin-bottom: 0;
+
+        color: @value-color;
+      }
+    }
+  }
+  .ant-pagination {
+    margin: @padding-md 0;
+  }
+  .ant-descriptions {
+    .ant-descriptions-item-label {
+      color: @title-color;
+    }
+    .ant-descriptions-item-content {
+      color: @value-color;
+    }
+    .ant-descriptions-row {
+      &:last-child {
+        >td {
+          padding-bottom: 0;
+        }
+      }
+    }
+  }
+  &--scroll {
+    position: relative;
+
+    overflow-x: auto;
+  }
+  .ant-list-items {
+    min-width: 1000px;
+  }
+  .ant-list-item {
+    transition: @animation-duration-slow;
+    transition-property: background, border-bottom-color;
+    &:hover {
+      border-bottom-color: lighten(@primary-color, 30%);
+      background: linear-gradient(90deg, transparent 10%, @background-color-light 70%, transparent);
+    }
+  }
+  &-container {
+    position: relative;
+    &::before,
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      z-index: 3;
+
+      width: 30px;
+
+      content: '';
+      transition: box-shadow @animation-duration-slow;
+      pointer-events: none;
+    }
+    &::before {
+      left: 0;
+    }
+    &::after {
+      right: 0;
+    }
+    &.yo-list--ping-left {
+      &::before {
+        box-shadow: inset 10px 0 8px -8px fade(@black, 15%);
+      }
+    }
+    &.yo-list--ping-right {
+      &::after {
+        box-shadow: inset -10px 0 8px -8px fade(@black, 15%);
+      }
+    }
+  }
+}

web-react/src/assets/style/default/lib/margin.less

@@ -0,0 +1,68 @@
+@import (reference) '../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}-xl {
+        margin@{position}: @padding-xl  !important;
+    }
+
+    .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;
+    }
+
+    .m@{name}-xxs {
+        margin@{position}: @padding-xxs  !important;
+    }
+
+    .p@{name}-xl {
+        padding@{position}: @padding-xl  !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;
+    }
+
+    .p@{name}-xxs {
+        padding@{position}: @padding-xxs  !important;
+    }
+
+    .m@{name}-none {
+        margin@{position}: 0 !important;
+    }
+
+    .p@{name}-none {
+        padding@{position}: 0 !important;
+    }
+
+    .margin-padding(@i + 1);
+}
+
+.margin-padding(1);

web-react/src/assets/style/default/lib/modal.less

@@ -0,0 +1,38 @@
+@import (reference) '../extend.less';
+.ant-modal-content {
+  background-color: fade(@primary-color, 50%);
+
+  backdrop-filter: blur(5px);
+}
+.ant-modal-header {
+  padding: @padding-sm @padding-md;
+
+  border-bottom: 0;
+  background-color: transparent;
+}
+.ant-modal-title {
+  color: fade(@white, 85%);
+}
+.ant-modal-body {
+  background-color: @component-background;
+}
+.ant-modal-footer {
+  background-color: @component-background;
+}
+.ant-modal-close {
+  top: 10px;
+  right: 10px;
+
+  color: fade(@white, 75%);
+  background-color: @error-color;
+  &:hover,
+  &:focus {
+    color: @white;
+  }
+}
+.ant-modal-close-x {
+  line-height: 26px;
+
+  width: 26px;
+  height: 26px;
+}

web-react/src/assets/style/default/lib/page.less

@@ -0,0 +1,8 @@
+@import (reference) '../extend.less';
+.yo-page {
+  &--header {
+    padding: @padding-md 0;
+
+    background-color: @white;
+  }
+}

web-react/src/assets/style/default/lib/radio.less

@@ -0,0 +1,7 @@
+@import (reference) '../extend.less';
+.ant-radio-button-wrapper-checked {
+  &:not(.ant-radio-button-wrapper-disabled),
+  &:not(.ant-radio-button-wrapper-disabled):hover {
+    box-shadow: none;
+  }
+}

web-react/src/assets/style/default/lib/scrollbar.less

@@ -0,0 +1,14 @@
+@import (reference) '../extend.less';
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+
+  background-color: fade(@black, 10%);
+}
+::-webkit-scrollbar-thumb {
+  border-radius: @border-radius-base;
+  background-color: fade(@black, 30%);
+}
+::-webkit-scrollbar-thumb:active {
+  background-color: fade(@black, 50%);
+}

web-react/src/assets/style/default/lib/select.less

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

web-react/src/assets/style/default/lib/table.less

@@ -0,0 +1,240 @@
+@import (reference) '../extend.less';
+.yo-query-bar {
+  margin-bottom: @padding-xs;
+  .ant-form-inline {
+    .ant-form-item {
+      margin-bottom: @padding-xs;
+    }
+  }
+}
+.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 {
+  .ant-table-container {
+    &::before,
+    &::after {
+      z-index: 3;
+    }
+  }
+}
+.ant-table-thead {
+  th.ant-table-column-has-sorters {
+    &:hover {
+      background-color: darken(@background-color-base, 5%);
+    }
+  }
+}
+.ant-table-tbody {
+  >tr {
+    >td {
+      transition-property: background, border-bottom-color;
+    }
+  }
+  >tr.ant-table-row:hover {
+    >td {
+      border-bottom-color: lighten(@primary-color, 30%);
+    }
+  }
+}
+.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;
+    }
+  }
+}
+.ant-table-sticky-scroll {
+  display: none;
+}
+.yo-table {
+  .ant-table {
+    margin: 0 !important;
+  }
+  .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();
+          }
+        }
+      }
+    }
+  }
+  .ant-table-bordered {
+    >.ant-table-container {
+      border-top: @border-width-base @border-style-base @table-border-color;
+    }
+  }
+  &--row-no {
+    width: 30px !important;
+
+    background-color: @table-header-bg;
+  }
+}
+.yo-table-actions {
+  display: inline-block;
+
+  vertical-align: middle;
+  &--inner {
+    display: flex;
+    align-items: center;
+
+    height: 18px;
+  }
+}
+.yo-table--column-setting {
+  width: 240px;
+  .ant-dropdown-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .anticon-pushpin {
+    transition: @animation-duration-slow;
+    transform: rotate(45deg);
+
+    color: darken(@white, 40%);
+  }
+  .yo-table--fixed {
+    transform: rotate(-45deg);
+  }
+}
+.yo-menu-table {
+  .ant-table {
+    .ant-table-expand-icon-col {
+      width: 28px;
+    }
+    .ant-table-row-expand-icon-cell {
+      z-index: 1;
+
+      padding-right: 0 !important;
+
+      border-right: none !important;
+      +.ant-table-cell {
+        padding-left: 0;
+      }
+    }
+    .ant-table-tbody {
+      >.ant-table-expanded-row-level-1>td {
+        padding: 0;
+
+        border-right: none !important;
+        .ant-table-wrapper {
+          border: none;
+          .ant-table {
+            margin: 0 !important;
+          }
+          .ant-table-container {
+            border: none;
+            .ant-table-row-expand-icon-cell {
+              .ant-table-row-expand-icon {
+                left: @padding-md;
+              }
+              +.ant-table-cell {
+                padding-left: @padding-md;
+              }
+            }
+            .ant-table-expanded-row-level-1>td {
+              padding: @padding-sm @padding-xs @padding-sm @padding-xl;
+
+              border-right: @border-width-base @border-style-base @table-border-color !important;
+              .ant-card {
+                max-width: fit-content;
+                margin-bottom: 0;
+
+                background: none;
+                .ant-card-grid {
+                  width: 300px;
+                  padding: @padding-xs @padding-sm;
+
+                  background-color: @card-background;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

web-react/src/assets/style/default/lib/text-color.less

@@ -0,0 +1,35 @@
+@import (reference) '../extend.less';
+.text-primary {
+  color: @primary-color;
+}
+.text-info {
+  color: @info-color;
+}
+.text-success {
+  color: @success-color;
+}
+.text-processing {
+  color: @processing-color;
+}
+.text-error,
+.text-danger {
+  color: @error-color;
+}
+.text-highlight {
+  color: @highlight-color;
+}
+.text-warning {
+  color: @warning-color;
+}
+.text-gray {
+  color: fade(@black, 50%);
+}
+.text-normal {
+  color: fade(@black, 30%);
+}
+.text-white {
+  color: @white;
+}
+.text-black {
+  color: @black;
+}

web-react/src/assets/style/default/lib/tree-layout.less

@@ -0,0 +1,83 @@
+@import (reference) '../extend.less';
+@import (reference) './text-color.less';
+.yo-tree-layout {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  .ant-layout-sider {
+    background-color: @component-background;
+    .ant-layout-header {
+      height: @layout-header-height - 20px;
+
+      background-color: @component-background;
+      .header-actions {
+        .ant-input-search {
+          margin: (@layout-header-height - 20px - 32px) / 2 @padding-md;
+        }
+      }
+    }
+  }
+  &--collapsed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 4;
+
+    transform: translateX(-100%);
+    &.open {
+      transform: translateX(0);
+
+      box-shadow: 2px 0 8px fade(@black , 20%);
+    }
+  }
+  &--bar {
+    line-height: 20px;
+
+    height: 20px;
+    padding: 0 @padding-md;
+
+    text-align: right;
+    >.anticon {
+      margin-left: @padding-xs;
+
+      cursor: pointer;
+
+      color: fade(@black, 50%);
+      &:hover {
+        color: fade(@black, 80%);
+      }
+    }
+  }
+  &--content {
+    position: absolute;
+    top: @layout-header-height;
+    left: 0;
+    bottom: 0;
+
+    overflow-y: auto;
+
+    width: 100%;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+
+      background-color: @component-background;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: transparent;
+    }
+    &:hover::-webkit-scrollbar-thumb {
+      background-color: fade(@black, 30%);
+    }
+    &::-webkit-scrollbar-thumb:active {
+      background-color: fade(@black, 45%);
+    }
+  }
+  .ant-tree {
+    .text-gray();
+  }
+}

web-react/src/assets/style/default/lib/upload.less

@@ -0,0 +1,29 @@
+@import (reference) '../extend.less';
+.ant-upload-list-text {
+  display: flex;
+  flex-wrap: wrap;
+  .ant-upload-list-item {
+    height: auto;
+    margin-right: @padding-xs;
+  }
+  .ant-upload-list-item-info {
+    position: relative;
+
+    padding: @padding-xxs @padding-xs;
+
+    border: @border-width-base @border-style-base @border-color-split;
+    .anticon-paper-clip {
+      top: 7.5px;
+    }
+    >span {
+      display: flex;
+    }
+  }
+  .ant-upload-list-item-card-actions {
+    position: relative;
+
+    margin-left: @padding-xs;
+
+    white-space: nowrap;
+  }
+}

web-react/src/assets/style/default/lib/visibility.less

@@ -0,0 +1,46 @@
+@import (reference) '../extend.less';
+.hide {
+  visibility: hidden !important;
+}
+.hidden {
+  display: none !important;
+}
+.block {
+  display: block;
+}
+.inline-block {
+  display: inline-block;
+}
+.inline {
+  display: inline;
+}
+.inline-flex {
+  display: inline-flex;
+}
+.flex {
+  display: flex;
+}
+.ellipsis {
+  overflow: hidden;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ellipsis-2 {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+
+  text-overflow: ellipsis;
+
+  -webkit-line-clamp: 2;
+}
+.ellipsis-3 {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+
+  text-overflow: ellipsis;
+
+  -webkit-line-clamp: 3;
+}

web-react/src/assets/style/default/lib/width-height.less

@@ -0,0 +1,47 @@
+@import (reference) '../extend.less';
+
+.width-height (@i) when (@i <=20) {
+
+  @n : @i * 50;
+  @px : @n * 1px;
+
+  .w-@{n} {
+    width: @px !important;
+  }
+
+  .w-@{n}-min {
+    min-width: @px !important;
+  }
+
+  .w-@{n}-max {
+    max-width: @px !important;
+  }
+
+  .h-@{n} {
+    height: @px !important;
+  }
+
+  .h-@{n}-min {
+    min-height: @px !important;
+  }
+
+  .h-@{n}-max {
+    max-height: @px !important;
+  }
+
+  .w-@{n}-p {
+    width: @n * 1% !important;
+  }
+
+  .h-@{n}-p {
+    height: @n * 1% !important;
+  }
+
+  .width-height(@i + 1);
+}
+
+.width-height(0);
+
+.flex-1 {
+  flex: 1;
+}