add react版前端

web-react/src/App.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { ConfigProvider } from 'antd'
+import zhCN from 'antd/lib/locale/zh_CN'
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+import './assets/style/app.less'
+
+moment.locale('zh-cn')
+
+const App = () => (
+  <div className="app">
+    <ConfigProvider locale={zhCN}>
+    </ConfigProvider>
+  </div>
+);
+
+export default App

web-react/src/assets/style/app.less

@@ -0,0 +1,42 @@
+@import './extend.less';
+@import './lib/visibility.less';
+@import './lib/container.less';
+@import './lib/align.less';
+@import './lib/font-size.less';
+@import './lib/text-color.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/button.less';
+@import './lib/card.less';
+@import './lib/table.less';
+@import './lib/list.less';
+@import './lib/form.less';
+@import './lib/form-page.less';
+@import './lib/page.less';
+@import './lib/description.less';
+@import './lib/input.less';
+@import './lib/select.less';
+@import './lib/checkbox.less';
+@import './lib/radio.less';
+@import './lib/cascader.less';
+@import './lib/upload.less';
+@import './lib/dropdown.less';
+@import './lib/modal.less';
+@import './lib/tree-layout.less';
+@import './lib/authority-view.less';
+@import './lib/icon-selector.less';
+@import './lib/anchor.less';
+@import './lib/disabled.less';
+@import './theme/primary.less';
+// @import './lib/font-weight.less';
+@import './public.less';

web-react/src/assets/style/extend.less

@@ -0,0 +1,6 @@
+@import '~antd/dist/antd.less';
+@padding-xxs: 4px;
+@padding-xl: 32px;
+body {
+  line-height: 1.42857143;
+}

web-react/src/assets/style/frame/dark.less

@@ -0,0 +1,18 @@
+@import (reference) '../main.less';
+@layout-header-background: #1c2127;
+.dark {
+  .main(@nav-background: @layout-header-background;
+  @nav-box-shadow-color: fade(@black, 25%);
+  @nav-scrollbar-background: fade(@white, 50%);
+  @nav-app-color: fade(@white, 35%);
+  @logo-color: @white;
+  @logo-box-shadow: none;
+  @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-react/src/assets/style/frame/light.less

@@ -0,0 +1,17 @@
+@import (reference) '../main.less';
+.light {
+  .main(@nav-background: @white;
+  @nav-box-shadow-color: fade(@black, 5%);
+  @nav-scrollbar-background: fade(@black, 30%);
+  @nav-app-color: fade(@black, 35%);
+  @logo-color: @black;
+  @logo-box-shadow: inset -1px -1px 1px @border-color-split;
+  @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-react/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-react/src/assets/style/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/lib/authority-view.less

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,36 @@
+@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-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/lib/dropdown.less

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

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

@@ -0,0 +1,168 @@
+@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-bar {
+        margin-bottom: 0;
+
+        background-color: @white;
+
+        &.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(@white, 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: @white;
+  }
+}

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

@@ -0,0 +1,369 @@
+@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: @white;
+
+    @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-selection,
+    .ant-input-group-addon,
+    .ant-cascader-picker,
+    .ant-cascader-input.ant-input {
+      z-index: 1;
+
+      text-align: left;
+
+      color: lighten(@black, 10%);
+      border: 0;
+      background-color: @control-background;
+    }
+    .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-cascader-picker:focus {
+      .ant-cascader-input {
+        .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-wrapper {
+    flex: 0 0 61.8%;
+
+    width: 61.8%;
+    min-width: 220px;
+  }
+  .yo-form--fluid {
+    .ant-form-item-control-wrapper {
+      flex: 0 0 100%;
+
+      width: 100%;
+    }
+  }
+  .yo-form--short {
+    .ant-form-item-control-wrapper {
+      flex: 0 0 38.2%;
+
+      width: 38.2%;
+    }
+  }
+  .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-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-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-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: @white;
+    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;
+    padding-top: @padding-sm - 2px;
+
+    white-space: normal;
+  }
+}
+.ant-form-item-required {
+  &::before {
+    margin-top: -4px;
+
+    content: '';
+    vertical-align: middle;
+
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-left: 5px solid #f5222d;
+    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 @normal-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/lib/icon-selector.less

@@ -0,0 +1,60 @@
+@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-left-content {
+      position: relative;
+
+      height: 100%;
+      padding: 0;
+      .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/lib/input.less

@@ -0,0 +1,10 @@
+@import (reference) '../extend.less';
+/* input前缀有2个字符的 */
+.yo-input-prefix-2 {
+  .ant-input:not(:first-child) {
+    padding-left: 45px;
+  }
+}
+.yo-addon {
+  padding: 0 @padding-xs;
+}

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

@@ -0,0 +1,47 @@
+@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;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+@import (reference) '../extend.less';
+.ant-modal-content {
+  background-color: fade(@white, 90%);
+
+  backdrop-filter: blur(5px);
+}
+.ant-modal-header {
+  padding: @padding-sm @padding-md;
+
+  background-color: transparent;
+}
+.ant-modal-body {
+  background-color: @white;
+}
+.ant-modal-footer {
+  background-color: @white;
+}
+.ant-modal-close-x {
+  line-height: 46px;
+
+  width: 46px;
+  height: 46px;
+}

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

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

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

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

@@ -0,0 +1,166 @@
+@import (reference) '../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;
+}
+
+.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();
+          }
+        }
+      }
+    }
+  }
+
+  .ant-table-pagination {
+    float: none;
+  }
+}
+
+.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;
+    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-react/src/assets/style/lib/text-color.less

@@ -0,0 +1,32 @@
+@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-normal {
+  color: @normal-color;
+}
+.text-white {
+  color: @white;
+}
+.text-black {
+  color: @black;
+}

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

@@ -0,0 +1,72 @@
+@import (reference) '../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%);
+          }
+        }
+      }
+    }
+  }
+  &--bar {
+    line-height: 20px;
+
+    height: 20px;
+    padding: 0 @padding-md;
+
+    text-align: right;
+    >.anticon {
+      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: @white;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: transparent;
+    }
+    &:hover::-webkit-scrollbar-thumb {
+      background-color: fade(@black, 30%);
+    }
+    &::-webkit-scrollbar-thumb:active {
+      background-color: fade(@black, 45%);
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+@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;
+}

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

@@ -0,0 +1,30 @@
+@import (reference) '../extend.less';
+
+.width-height (@i) when (@i <=20) {
+
+  @n : @i * 50;
+
+  .w-@{n} {
+    width: @n * 1px !important;
+  }
+
+  .h-@{n} {
+    height: @n * 1px !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;
+}

web-react/src/assets/style/login.less

@@ -0,0 +1,77 @@
+@import (reference) './app.less';
+.yo-login {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  >img {
+    display: block;
+
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+  }
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    content: '';
+
+    background: fade(@black, 30%) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpiMLJ0+w8EDIwgAgQAAgwAUdAHrAFSJ6cAAAAASUVORK5CYII=);
+  }
+  &--placeholder {
+    position: absolute;
+    top: 50%;
+    left: 0;
+
+    width: 100%;
+    height: 0;
+    .container-sm {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      height: 0;
+    }
+  }
+  .ant-form {
+    width: 300px;
+    padding: @padding-lg;
+
+    border-radius: @border-radius-base + 2px;
+    background: linear-gradient(45deg, @white, fade(@white, 80%));
+  }
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+  .ant-form-item-label {
+    transition: @animation-duration-base;
+    transform: translate(0);
+    >label {
+      color: fade(@black, 40%);
+    }
+  }
+  &--label {
+    .ant-form-item-label {
+      transform: translate(11px, 28px);
+    }
+  }
+  .ant-input {
+    border-width: 0 0 @border-width-base 0 !important;
+    border-color: fade(@black, 10%);
+    background-color: transparent;
+  }
+  .ant-input:hover,
+  .ant-input:focus {
+    border-width: 0 0 @border-width-base 0 !important;
+    border-color: @primary-color;
+    box-shadow: none;
+  }
+}

web-react/src/assets/style/main.less

@@ -0,0 +1,605 @@
+@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%),
+  @nav-app-color: fade(@white, 35%),
+  @logo-color: @white,
+  @logo-box-shadow: none,
+  @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,
+) {
+  .yo-layout--spin {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+    >.ant-spin-nested-loading {
+      height: 100%;
+      >div>.ant-spin {
+        max-height: none;
+      }
+      >.ant-spin-container {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .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 {
+          font-weight: bolder;
+
+          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;
+    >.yo-tab-external-mount {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+
+      display: flex;
+      flex-direction: column;
+
+      width: 100%;
+      >.ant-tabs {
+        z-index: 5;
+
+        overflow: visible;
+        >.ant-tabs-nav {
+          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;
+                }
+              }
+            }
+            .yo-layout-tab-subtitle {
+              line-height: 1;
+
+              display: inline-block;
+              overflow: hidden;
+
+              max-width: 150px;
+
+              transform: translateY(1px);
+              white-space: nowrap;
+              text-overflow: ellipsis;
+
+              opacity: .75;
+            }
+            +.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;
+            }
+          }
+        }
+      }
+      >.yo-tab-external-mount-content {
+        position: relative;
+
+        height: 100%;
+        >.yo-tab-external-tabpane {
+          position: absolute;
+          top: 0;
+          left: 0;
+
+          overflow-x: hidden;
+          overflow-y: auto;
+
+          width: 100%;
+          height: 100%;
+          &.yo-tab-external-tabpane-inactive {
+            pointer-events: none;
+
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+  .ant-layout-sider {
+    .ant-menu-inline {
+      border-right: 0;
+    }
+  }
+  .yo-nav {
+    padding-top: @padding-lg;
+    padding-bottom: @padding-lg;
+    &--row {
+      padding: 1px 0;
+
+      column-gap: @padding-md;
+      column-count: 3;
+    }
+    &--col {
+      break-inside: avoid;
+    }
+    &--sub-item {
+    }
+    &--item-group {
+      font-size: @font-size-base;
+      line-height: 1.5;
+
+      margin-bottom: @padding-xs;
+      padding-top: @padding-xs * 2;
+
+      color: fade(@black, 35%);
+      border: @border-width-base @border-style-base transparent;
+    }
+    &--item {
+      font-size: @font-size-base;
+      line-height: 1.5;
+
+      position: relative;
+
+      margin-bottom: @padding-xs;
+      padding: @padding-xs @padding-sm;
+
+      cursor: pointer;
+      transition: @animation-duration-fast;
+
+      border: @border-width-base @border-style-base @border-color-split;
+      border-radius: @border-radius-base;
+      background-color: @white;
+      &:hover {
+        color: @white;
+        border-color: @primary-color;
+        background-color: @primary-color;
+      }
+    }
+  }
+  .yo-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;
+      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;
+
+      flex: 1 1 100%;
+
+      box-shadow: 2px 0 8px @nav-box-shadow-color;
+      &--app {
+        font-size: @font-size-sm;
+
+        margin-top: @padding-sm;
+        padding: 0 @padding-md;
+
+        color: @nav-app-color;
+      }
+    }
+    .swiper-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+
+      width: 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-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%);
+            }
+          }
+        }
+      }
+    }
+    .layout-sider {
+    }
+    >section {
+      >.ant-layout-sider {
+        .yo-layout-sider();
+      }
+    }
+  }
+  .yo-layout--top-nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    min-width: @container-width;
+    height: 100%;
+
+    @layout-header-height: 54px;
+    .ant-layout-header {
+      line-height: @layout-header-height;
+
+      z-index: 11;
+
+      flex: 0 0 @layout-header-height;
+
+      height: @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: (@layout-header-height - 40px) / 2 0;
+      }
+      .logo {
+        font-size: @font-size-lg * 1.5;
+        font-weight: 500;
+        line-height: @layout-header-height - 10px;
+
+        display: flex;
+        overflow: hidden;
+        align-items: center;
+
+        height: @layout-header-height 10px;
+        margin: 5px @padding-lg 5px 0;
+
+        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 {
+        .yo-tab-external-mount {
+          >.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-react/src/assets/style/public.less

@@ -0,0 +1,32 @@
+@import (reference) './extend.less';
+.yo-map {
+  &-container {
+    position: relative;
+
+    padding: @padding-sm;
+
+    border: @border-width-base @border-style-base @border-color-split;
+    border-radius: @border-radius-base;
+    background-color: @white;
+    .amap-icon {
+      img {
+        width: 25px;
+      }
+    }
+  }
+  &--search {
+    position: absolute;
+    top: @padding-md;
+    left: @padding-md;
+    z-index: 20;
+
+    width: 25%;
+    min-width: 300px;
+    padding: @padding-xxs @padding-sm;
+
+    background: fade(@black, 20%);
+    box-shadow: @box-shadow-base;
+
+    backdrop-filter: blur(5px);
+  }
+}

web-react/src/assets/style/theme/README.md

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

web-react/src/assets/style/theme/primary.less

@@ -0,0 +1,4 @@
+@import '../app.less';
+@primary-color: #007bff;
+@font-size-base: 13px;
+@border-radius-base: 0;

web-react/src/common/api/index.js

@@ -0,0 +1,183 @@
+/**
+ * api
+ * v1.2
+ */
+
+import axios from 'axios'
+import { token } from 'common/token'
+import status from './status'
+/**
+ * 最终直接根据url名称调用接口方法
+ * 例如
+ * import { api } from '@/api'
+ * api.getItemGroupType(parmas).then(...)
+ */
+import urls from './requests'
+import { notification } from 'antd'
+
+const STATUS = status
+
+axios.defaults.baseURL = '/api'
+
+const initInstance = (options) => {
+    const instance = axios
+        .create({
+            headers: {
+                Authorization: 'Bearer ' + token.value
+            },
+            ...options
+        })
+
+    instance.interceptors.response.use((res) => {
+        if (res.data.status === STATUS.Unauthorized) {
+            handlerUnauthorized()
+        }
+        return res
+    }, (err) => {
+        return Promise.reject(err)
+    })
+    return instance
+}
+
+const errerCodes = [STATUS.BadRequest, STATUS.InternalServerError, STATUS.Forbidden]
+
+const errorNotification = ({ code, message }) => {
+    switch (message.constructor) {
+        case Array:
+            message.forEach(p => {
+                setTimeout(() => {
+                    notification.error({
+                        duration: 30,
+                        message: p.field,
+                        description: p.messages.join('/'),
+                    })
+                })
+            })
+            break
+        default:
+            notification.error({
+                duration: 30,
+                message: code || '错误',
+                description: message,
+            })
+            break
+    }
+}
+
+const handlerUnauthorized = () => {
+    token.value = ''
+    window.location.replace('/login')
+}
+
+const api = {}
+
+for (let key in urls) {
+
+    const item = urls[key]
+    let url = '',
+        method = 'get',
+        options = {}
+    if (item.constructor === String) {
+        url = item
+    } else if (item.constructor === Array) {
+        url = item[0]
+        if (item[1]) {
+            method = item[1].toLowerCase()
+        }
+        if (item[2]) {
+            options = item[2]
+        }
+    } else if (item.constructor === Object) {
+        url = item.url
+        if (item.method) {
+            method = item.method.toLowerCase()
+        }
+    }
+
+    api[`${key}Await`] = function (params = {}) {
+        if (method === 'post') {
+            return initInstance(options).post(url, params)
+        } else {
+            let _params = [],
+                _url = url
+            Object.keys(params).forEach(key => {
+                const value = params[key]
+                if (value) {
+                    switch (value.constructor) {
+                        case Array:
+                            _params.push(...value.map(p => `${key}=${p}`))
+                            break
+                        default:
+                            _params.push(`${key}=${value}`)
+                            break
+                    }
+                }
+            })
+            if (_params.length) {
+                _url += '?' + _params.join('&')
+            }
+            return initInstance(options).get(_url)
+        }
+    }
+
+    api[key] = function (params = {}) {
+        return new Promise((reslove, reject) => {
+            api[`${key}Await`](params)
+                .then((res) => {
+                    const { data } = res
+                    if (errerCodes.indexOf(data.code) >= 0) {
+                        errorNotification(data)
+                        reject([ArrayBuffer, Blob].indexOf(data.constructor) > -1 ? res : data)
+                    } else if (data.code === STATUS.Unauthorized) {
+                        handlerUnauthorized()
+                    } else {
+                        reslove([ArrayBuffer, Blob].indexOf(data.constructor) > -1 ? res : data)
+                    }
+                })
+                .catch(({ response }) => {
+                    if (process.env.VUE_APP_NODE_ENV === 'development') {
+                        const { data, status } = response
+                        if (data.constructor === String) {
+                            errorNotification({
+                                message: data,
+                                code: status
+                            })
+                        } else {
+                            errorNotification(data)
+                        }
+                        if (data.code === STATUS.Unauthorized) {
+                            handlerUnauthorized()
+                        }
+                        reject(data)
+                    } else {
+                        errorNotification({
+                            message: '系统发生错误，请联系管理员'
+                        })
+                    }
+                })
+        })
+    }
+
+    api[key].url = axios.defaults.baseURL + url
+    api[key].key = key
+}
+
+/**
+ * 并发请求,与axios.all方式相同
+ * 但是使用的接口函数为this.$api.[接口名]E
+ */
+api.$queue = function (queue) {
+    return new Promise((reslove) => {
+        axios.all(queue).then((results) => {
+            const res = results.map(p => p.data)
+            reslove(res)
+        })
+    })
+}
+
+export {
+    axios,
+    urls,
+    api,
+    STATUS
+}

web-react/src/common/api/requests/business/houseSafety/houseCode.js

@@ -0,0 +1,8 @@
+const urls = {
+    houseCodeAdd: ['/houseCode/add', 'post'],
+    houseCodeEdit: ['/houseCode/edit', 'post'],
+    houseCodePage: ['/houseCode/page', 'post'],
+    houseCodeNo: '/houseCode/getNextNoByCode',
+}
+
+export default urls

web-react/src/common/api/requests/business/houseSafety/houseInfo.js

@@ -0,0 +1,6 @@
+const urls = {
+    houseInfoGetByTaskId: ['/houseInfo/getByTaskId', 'get'],
+    houseInfoSave: ['houseInfo/save', 'post']
+}
+
+export default urls

web-react/src/common/api/requests/business/houseSafety/houseMember.js

@@ -0,0 +1,14 @@
+const urls = {
+    houseMemberPage: ['/houseMember/page', 'post'],
+    houseMemberAdd: ['/houseMember/add', 'post'],
+    houseMemberEdit: ['/houseMember/edit', 'post'],
+    houseMemberDelete: ['/houseMember/delete', 'post'],
+    houseMemberOwnRole: ['/houseMember/ownRole', 'get'],
+    houseMemberOwnData: ['/houseMember/ownData', 'get'],
+    houseMemberGrantData: ['/houseMember/grantData', 'post'],
+    houseMemberChangeStatus: ['/houseMember/changeStatus', 'post'],
+    houseMemberDefaultRole: ['/houseMember/defaultRole', 'get'],
+    houseMemberDefaultRoleList: ['/houseMember/defaultRoleRange', 'get']
+}
+
+export default urls

web-react/src/common/api/requests/business/houseSafety/houseProjectInfo.js

@@ -0,0 +1,11 @@
+const urls = {
+    getHouseProjectPage: ['/houseProjectInfo/page', 'post'],
+    houseProejctAdd: ['/houseProjectInfo/add', 'post'],
+    houseProejctEdit: ['/houseProjectInfo/edit', 'post'],
+    houseProejctDelete: ['/houseProjectInfo/delete', 'post'],
+    houseProejctDetail: ['/houseProjectInfo/detail', 'get'],
+    houseProjectNextSort: ['/houseProjectInfo/nextSort', 'get'],
+    houseProjectList: ['houseProjectInfo/list', 'get']
+}
+
+export default urls

web-react/src/common/api/requests/business/houseSafety/houseSelector.js

@@ -0,0 +1,8 @@
+const urls = {
+    houseSelect: ['/houseSelector/select', 'post'],
+    houseSelectRevoke: ['/houseSelector/revoke', 'post'],
+    houseSelectorPage: ['/houseSelector/selectorPage', 'post'],
+    houseSelectedPage: ['/houseSelector/selectedPage', 'post'],
+}
+
+export default urls

web-react/src/common/api/requests/business/houseSafety/houseTask.js

@@ -0,0 +1,6 @@
+const urls = {
+    houseTaskPage: ['/houseTask/page', 'post'],
+    houseTaskEdit: ['/houseTask/edit', 'post'],
+}
+
+export default urls

web-react/src/common/api/requests/business/houseSafety/houseZone.js

@@ -0,0 +1,7 @@
+const urls = {
+    houseZoneList: '/houseZone/list',
+    houseZoneAutoIncrement: '/houseZone/autoIncrement',
+    houseZoneAdd: ['/houseZone/add', 'post']
+}
+
+export default urls

web-react/src/common/api/requests/business/houseSafety/index.js

@@ -0,0 +1,19 @@
+import houseProjectInfo from './houseProjectInfo'
+import houseZone from './houseZone'
+import houseCode from './houseCode'
+import houseMember from './houseMember'
+import houseSelector from './houseSelector'
+import houseTask from './houseTask'
+import houseInfo from './houseInfo'
+
+const urls = {
+    ...houseProjectInfo,
+    ...houseZone,
+    ...houseCode,
+    ...houseMember,
+    ...houseSelector,
+    ...houseTask,
+    ...houseInfo
+}
+
+export default urls

web-react/src/common/api/requests/business/index.js

@@ -0,0 +1,7 @@
+import houseSafety from './houseSafety'
+
+const urls = {
+    ...houseSafety,
+}
+
+export default urls

web-react/src/common/api/requests/index.js

@@ -0,0 +1,22 @@
+/**
+ * 接口的3种配置方式
+ * 1.string
+ *  如login: '/login'\
+ *  将会默认已POST方式请求接口/login
+ * 2.array
+ *  如login: ['/login', 'post']
+ *  数组[0]必填,为接口地址,[1]选填,为请求方式(不区分大小写),默认为POST
+ * 3.object
+ *  如login: { url: '/login', method: 'post' }
+ *  [url]必填,为接口地址,[method]选填,为请求方式(不区分大小写),默认为POST
+ */
+
+import sys from './sys'
+import business from './business'
+
+const urls = {
+    ...sys,
+    ...business
+}
+
+export default urls

web-react/src/common/api/requests/sys/appManage.js

@@ -0,0 +1,33 @@
+const urls = {
+    /**
+     * 系统应用列表
+     */
+    getAppPage: ['/sysApp/page', 'post'],
+    /**
+     * 系统应用列表
+     */
+    getAppList: ['/sysApp/list', 'get'],
+    /**
+     * 新增系统应用
+     */
+    sysAppAdd: ['/sysApp/add', 'post'],
+    /**
+     * 编辑系统应用
+     *
+     */
+    sysAppEdit: ['/sysApp/edit', 'post'],
+    /**
+     * 删除系统应用
+     */
+    sysAppDelete: ['/sysApp/delete', 'post'],
+    /**
+     * 设为默认应用
+     */
+    sysAppSetAsDefault: ['/sysApp/setAsDefault', 'post'],
+    /**
+     * 修改应用状态
+     */
+    sysAppChangeStatus: ['/sysApp/changeStatus', 'post'],
+}
+
+export default urls

web-react/src/common/api/requests/sys/areaManage.js

@@ -0,0 +1,9 @@
+const urls = {
+    getAreaTree: ['/sysArea/tree', 'get'],
+    sysAreaPage: ['/sysArea/page', 'post'],
+    sysAreaAdd: ['/sysArea/add', 'post'],
+    sysAreaEdit: ['/sysArea/edit', 'post'],
+    sysAreaDelete: ['/sysArea/delete', 'post'],
+}
+
+export default urls

web-react/src/common/api/requests/sys/configManage.js

@@ -0,0 +1,28 @@
+const urls = {
+    /**
+     * 分页查询配置列表
+     */
+    sysConfigPage: ['/sysConfig/page', 'post'],
+    /**
+     * 添加系统参数配置
+     */
+    sysConfigAdd: ['/sysConfig/add', 'post'],
+    /**
+     * 编辑系统参数配置
+     */
+    sysConfigEdit: ['/sysConfig/edit', 'post'],
+    /**
+     * 删除系统参数配置
+     */
+    sysConfigDelete: ['/sysConfig/delete', 'post'],
+    /**
+     * 获取字典类型下所有字典，举例，返回格式为：[{code:"M",value:"男"},{code:"F",value:"女"}]
+     */
+    sysDictTypeDropDown: ['/sysDictType/dropDown', 'get'],
+    /**
+     * 获取系统的所有任务列表
+     */
+    sysTimersGetActionClasses: ['/sysTimers/getActionClasses', 'get'],
+}
+
+export default urls

web-react/src/common/api/requests/sys/dictDataManage.js

@@ -0,0 +1,24 @@
+const urls = {
+    /**
+     * 查询系统字典值
+     */
+    sysDictDataPage: ['/sysDictData/page', 'post'],
+    /**
+     * 添加系统字典值
+     */
+    sysDictDataAdd: ['/sysDictData/add', 'post'],
+    /**
+     * 编辑系统字典值
+     */
+    sysDictDataEdit: ['/sysDictData/edit', 'post'],
+    /**
+     * 删除系统字典值
+     */
+    sysDictDataDelete: ['/sysDictData/delete', 'post'],
+    /**
+     * 批量删除系统字典值
+     */
+    sysDictDataDeleteBatch: ['/sysDictData/deleteBatch', 'post'],
+}
+
+export default urls

web-react/src/common/api/requests/sys/dictManage.js

@@ -0,0 +1,32 @@
+const urls = {
+    /**
+     * 分页查询系统字典类型
+     */
+    sysDictTypePage: ['/sysDictType/page', 'post'],
+    /**
+     * 添加系统字典类型
+     */
+    sysDictTypeAdd: ['/sysDictType/add', 'post'],
+    /**
+     * 编辑系统字典类型
+     */
+    sysDictTypeEdit: ['/sysDictType/edit', 'post'],
+    /**
+     * 删除系统字典类型
+     */
+    sysDictTypeDelete: ['/sysDictType/delete', 'post'],
+    /**
+     * 获取字典类型下所有字典，举例，返回格式为：[{code:"M",value:"男"},{code:"F",value:"女"}]
+     */
+    sysDictTypeDropDown: ['/sysDictType/dropDown', 'get'],
+    /**
+     * 获取字典类型下所有的字典,可批量获取
+     */
+    sysDictTypeDropDowns: ['/sysDictType/dropDowns', 'get'],
+    /**
+     * 获取所有字典树
+     */
+    sysDictTypeTree: ['/sysDictType/tree', 'get'],
+}
+
+export default urls

web-react/src/common/api/requests/sys/emailManage.js

@@ -0,0 +1,12 @@
+const urls = {
+    /**
+     * 发送邮件
+     */
+    emailSendEmail: ['/email/sendEmail', 'post'],
+    /**
+     * 发送html邮件
+     */
+    emailSendEmailHtml: ['/email/sendEmailHtml', 'post'],
+}
+
+export default urls

web-react/src/common/api/requests/sys/fileManage.js

@@ -0,0 +1,38 @@
+const urls = {
+    /**
+     * 分页查询文件信息表
+     */
+    sysFileInfoPage: ['/sysFileInfo/page', 'post'],
+    /**
+     * 获取全部文件信息表
+     */
+    sysFileInfoList: ['/sysFileInfo/list', 'get'],
+    /**
+     * 上传文件
+     */
+    sysFileInfoUpload: ['/sysFileInfo/upload', 'post'],
+    /**
+     * 下载文件
+     */
+    sysFileInfoDownload: ['/sysFileInfo/download', 'get', {
+        responseType: 'blob'
+    }],
+
+    /**
+     * 查看图片
+     */
+    sysFileInfoPreview: ['/sysFileInfo/preview', 'get', {
+        responseType: 'arraybuffer'
+    }],
+
+    /**
+     * 查看详情文件信息表
+     */
+    sysFileInfoDetail: ['/sysFileInfo/detail', 'get'],
+    /**
+     * 删除文件信息表
+     */
+    sysFileInfoDelete: ['/sysFileInfo/delete', 'post'],
+}
+
+export default urls

web-react/src/common/api/requests/sys/index.js

@@ -0,0 +1,45 @@
+import appManage from './appManage'
+import configManage from './configManage'
+import dictDataManage from './dictDataManage'
+import dictManage from './dictManage'
+import emailManage from './emailManage'
+import fileManage from './fileManage'
+import loginManage from './loginManage'
+import logManage from './logManage'
+import machineManage from './machineManage'
+import menuManage from './menuManage'
+import noticeManage from './noticeManage'
+import onlineUserManage from './onlineUserManage'
+import orgManage from './orgManage'
+import posManage from './posManage'
+import roleManage from './roleManage'
+import smsManage from './smsManage'
+import tenantManage from './tenantManage'
+import timersManage from './timersManage'
+import userManage from './userManage'
+import areaManage from './areaManage'
+
+const urls = {
+    ...appManage,
+    ...configManage,
+    ...dictDataManage,
+    ...dictManage,
+    ...emailManage,
+    ...fileManage,
+    ...loginManage,
+    ...logManage,
+    ...machineManage,
+    ...menuManage,
+    ...noticeManage,
+    ...onlineUserManage,
+    ...orgManage,
+    ...posManage,
+    ...roleManage,
+    ...smsManage,
+    ...tenantManage,
+    ...timersManage,
+    ...userManage,
+    ...areaManage,
+}
+
+export default urls

web-react/src/common/api/requests/sys/logManage.js

@@ -0,0 +1,25 @@
+const urls = {
+
+    /**
+     * 查询访问日志
+     */
+    sysVisLogPage: ['/sysVisLog/page', 'post'],
+
+    /**
+     * 查询操作日志
+     */
+    sysOpLogPage: ['/sysOpLog/page', 'post'],
+
+    /**
+     * 清空访问日志
+     */
+    sysVisLogDelete: ['/sysVisLog/delete', 'post'],
+
+    /**
+     * 清空登录日志
+     */
+    sysOpLogDelete: ['/sysOpLog/delete', 'post'],
+
+}
+
+export default urls

web-react/src/common/api/requests/sys/loginManage.js

@@ -0,0 +1,36 @@
+const urls = {
+    /**
+     * 登录
+     */
+    login: ['/login', 'post'],
+    /**
+     * 登出
+     */
+    logout: ['/logout', 'post'],
+    /**
+     * 获取登录用户信息
+     */
+    getLoginUser: ['/getLoginUser', 'get'],
+    /**
+     * 获取租户开关
+     */
+    getTenantOpen: ['/getTenantOpen', 'get'],
+    /**
+     * 获取短信验证码
+     */
+    getSmsCaptcha: ['/getSmsCaptcha', 'get'],
+    /**
+     * 获取验证码开关
+     */
+    getCaptchaOpen: ['/getCaptchaOpen', 'get'],
+    /**
+     * 获取验证图片 以及token
+     */
+    reqGet: ['/captcha/get', 'post'],
+    /**
+     * 滑动或者点选验证
+     */
+    reqCheck: ['/captcha/check', 'post'],
+}
+
+export default urls

web-react/src/common/api/requests/sys/machineManage.js

@@ -0,0 +1,12 @@
+const urls = {
+      /**
+       *
+       * 系统属性监控
+       *
+       */
+      sysMachineUse: ['/sysMachine/use', 'get'],
+      sysMachineBase: ['/sysMachine/base', 'get'],
+      sysMachineNetwork: ['/sysMachine/network', 'get']
+}
+
+export default urls

web-react/src/common/api/requests/sys/menuManage.js

@@ -0,0 +1,68 @@
+const urls = {
+    /**
+     * 获取菜单列表
+     *
+     * @author yubaoshan
+     * @param parameter
+     * @returns {*}
+     */
+    getMenuList: ['/sysMenu/list', 'get'],
+
+    /**
+     * 获取系统菜单树，用于新增，编辑时选择上级节点
+     *
+     * @author yubaoshan
+     * @date 2020/4/23 12:22
+     */
+    getMenuTree: ['/sysMenu/tree', 'get'],
+
+    /**
+     * 增加菜单
+     *
+     * @author yubaoshan
+     * @date 2020/4/24 23:23
+     */
+    sysMenuAdd: ['/sysMenu/add', 'post'],
+
+    /**
+     * 增加菜单
+     *
+     * @author yubaoshan
+     * @date 2020/4/24 23:23
+     */
+    sysMenuDelete: ['/sysMenu/delete', 'post'],
+
+    /**
+     * 查看菜单详情
+     *
+     * @author yubaoshan
+     * @date 2020/4/25 01:11
+     */
+    sysMenuDetail: ['/sysMenu/detail', 'post'],
+
+    /**
+     * 编辑系统菜单
+     *
+     * @author yubaoshan
+     * @date 2020/4/25 01:11
+     */
+    sysMenuEdit: ['/sysMenu/edit', 'post'],
+
+    /**
+     * 获取系统菜单树，用于给角色授权时选择
+     *
+     * @author yubaoshan
+     * @date 2020/6/2 17:30
+     */
+    SysMenuTreeForGrant: ['/sysMenu/treeForGrant', 'get'],
+    /**
+     * 根据系统切换菜单
+     *
+     * @author yubaoshan
+     * @date 2020/6/28 15:25
+     */
+    sysMenuChange: ['/sysMenu/change', 'post'],
+
+}
+
+export default urls

web-react/src/common/api/requests/sys/noticeManage.js

@@ -0,0 +1,40 @@
+const urls = {
+    /**
+     * 查询系统通知公告
+     */
+    sysNoticePage: ['/sysNotice/page', 'post'],
+
+
+    /**
+     * 添加系统通知公告
+     */
+    sysNoticeAdd: ['/sysNotice/add', 'post'],
+
+
+    /**
+     * 编辑系统通知公告
+     */
+    sysNoticeEdit: ['/sysNotice/edit', 'post'],
+
+
+    /**
+     * 删除系统通知公告
+     */
+    sysNoticeDelete: ['/sysNotice/delete', 'post'],
+
+
+    /**
+     * 通知公告详情
+     */
+    sysNoticeDetail: ['/sysNotice/detail', 'get'],
+
+
+    /**
+     * 修改状态
+     */
+    sysNoticeChangeStatus: ['/sysNotice/changeStatus', 'post'],
+
+
+}
+
+export default urls

web-react/src/common/api/requests/sys/noticeReceiveManage.js

@@ -0,0 +1,8 @@
+const urls = {
+    /**
+ * 查询我收到的系统通知公告
+ */
+    sysNoticeReceived: ['/sysNotice/received', 'get'],
+}
+
+export default urls

web-react/src/common/api/requests/sys/onlineUserManage.js

@@ -0,0 +1,14 @@
+const urls = {
+    /**
+     * 在线用户列表
+     */
+    sysOnlineUserList: ['/sysOnlineUser/list', 'get'],
+
+    /**
+     * 强制下线
+     */
+    sysOnlineUserForceExist: ['/sysOnlineUser/forceExist', 'post'],
+
+}
+
+export default urls

web-react/src/common/api/requests/sys/orgManage.js

@@ -0,0 +1,40 @@
+const urls = {
+    /**
+     * 获取机构树
+     *
+     */
+    getOrgTree: ['/sysOrg/tree', 'get'],
+
+    /**
+     * 获取机构列表
+     *
+     */
+    getOrgList: ['/sysOrg/list', 'get'],
+
+    /**
+     * 获取机构列表
+     *
+     */
+    getOrgPage: ['/sysOrg/page', 'post'],
+
+    /**
+     * 新增机构
+     *
+     */
+    sysOrgAdd: ['/sysOrg/add', 'post'],
+
+    /**
+     * 编辑机构
+     *
+     */
+    sysOrgEdit: ['/sysOrg/edit', 'post'],
+
+    /**
+     * 删除机构
+     *
+     */
+    sysOrgDelete: ['/sysOrg/delete', 'post'],
+
+}
+
+export default urls

web-react/src/common/api/requests/sys/posManage.js

@@ -0,0 +1,34 @@
+const urls = {
+    /**
+     * 查询系统职位
+     *
+     */
+    sysPosPage: ['/sysPos/page', 'post'],
+
+    /**
+     * 系统职位列表
+     *
+     */
+    sysPosList: ['/sysPos/list', 'get'],
+
+    /**
+     * 添加系统职位
+     *
+     */
+    sysPosAdd: ['/sysPos/add', 'post'],
+
+    /**
+     * 编辑系统职位
+     *
+     */
+    sysPosEdit: ['/sysPos/edit', 'post'],
+
+    /**
+     * 删除系统职位
+     *
+     */
+    sysPosDelete: ['/sysPos/delete', 'post'],
+
+}
+
+export default urls

web-react/src/common/api/requests/sys/roleManage.js

@@ -0,0 +1,64 @@
+const urls = {
+    /**
+     * 获取角色列表
+     */
+    getRolePage: ['/sysRole/page', 'post'],
+
+
+    /**
+     * 增加角色
+     */
+    sysRoleAdd: ['/sysRole/add', 'post'],
+
+
+    /**
+     * 编辑角色
+     */
+    sysRoleEdit: ['/sysRole/edit', 'post'],
+
+
+    /**
+     * 删除角色
+     */
+    sysRoleDelete: ['/sysRole/delete', 'post'],
+
+
+    /**
+     * 删除角色
+     */
+    sysRoleDeteil: ['/sysRole/detail', 'get'],
+
+
+    /**
+     * 获取授权角色列表
+     */
+    sysRoleDropDown: ['/sysRole/dropDown', 'get'],
+
+
+    /**
+     * 拥有菜单
+     */
+    sysRoleOwnMenu: ['/sysRole/ownMenu', 'get'],
+
+
+    /**
+     * 授权菜单
+     */
+    sysRoleGrantMenu: ['/sysRole/grantMenu', 'post'],
+
+
+    /**
+     * 拥有数据
+     */
+    sysRoleOwnData: ['/sysRole/ownData', 'get'],
+
+
+    /**
+     * 授权数据
+     */
+    sysRoleGrantData: ['/sysRole/grantData', 'post'],
+
+
+}
+
+export default urls

web-react/src/common/api/requests/sys/smsManage.js

@@ -0,0 +1,19 @@
+const urls = {
+    /**
+     * 发送记录查询
+     */
+    smsPage: ['/sms/page', 'get'],
+
+    /**
+     * 验证短信验证码
+     */
+    sysSendLoginMessage: ['/sms/sendLoginMessage', 'post'],
+
+    /**
+     * 验证短信验证码
+     */
+    sysValidateMessage: ['/sms/validateMessage', 'post'],
+
+}
+
+export default urls

web-react/src/common/api/requests/sys/tenantManage.js

@@ -0,0 +1,28 @@
+const urls = {
+  /**
+   * 租户列表
+   *
+   */
+  sysTenantPage: ['/sysTenant/page', 'post'],
+
+  /**
+   * 新增租户
+   *
+   */
+  sysTenantAdd: ['/sysTenant/add', 'post'],
+
+  /**
+   * 删除租户
+   *
+   */
+  sysTenantDelete: ['/sysTenant/delete', 'post'],
+
+  /**
+   * 编辑租户
+   *
+   */
+  sysTenantEdit: ['/sysTenant/edit', 'post'],
+
+}
+
+export default urls

web-react/src/common/api/requests/sys/timersManage.js

@@ -0,0 +1,58 @@
+const urls = {
+    /**
+     * 分页查询定时任务
+     */
+    sysTimersPage: ['/sysTimers/page', 'post'],
+
+
+    /**
+     * 获取全部定时任务
+     */
+    sysTimersList: ['/sysTimers/list', 'get'],
+
+
+    /**
+     * 查看详情定时任务
+     */
+    sysTimersDetail: ['/sysTimers/detail', 'get'],
+
+
+    /**
+     * 添加定时任务
+     */
+    sysTimersAdd: ['/sysTimers/add', 'post'],
+
+
+    /**
+     * 删除定时任务
+     */
+    sysTimersDelete: ['/sysTimers/delete', 'post'],
+
+
+    /**
+     * 编辑定时任务
+     */
+    sysTimersEdit: ['/sysTimers/edit', 'post'],
+
+
+    /**
+     * 获取系统的所有任务列表
+     */
+    sysTimersGetActionClasses: ['/sysTimers/getActionClasses', 'post'],
+
+
+    /**
+     * 启动定时任务
+     */
+    sysTimersStart: ['/sysTimers/start', 'post'],
+
+
+    /**
+     * 停止定时任务
+     */
+    sysTimersStop: ['/sysTimers/stop', 'post'],
+
+
+}
+
+export default urls

web-react/src/common/api/requests/sys/userManage.js

@@ -0,0 +1,78 @@
+const urls = {
+    /**
+     * 获取用户列表
+     */
+    getUserPage: ['/sysUser/page', 'post'],
+
+    /**
+     * 增加用户
+     */
+    sysUserAdd: ['/sysUser/add', 'post'],
+
+    /**
+     * 编辑用户
+     */
+    sysUserEdit: ['/sysUser/edit', 'post'],
+
+    /**
+     * 获取用户详情
+     */
+    sysUserDetail: ['/sysUser/detail', 'get'],
+
+    /**
+     * 删除用户
+     */
+    sysUserDelete: ['/sysUser/delete', 'post'],
+
+    /**
+     * 拥有角色
+     */
+    sysUserOwnRole: ['/sysUser/ownRole', 'get'],
+
+    /**
+     * 授权角色
+     */
+    sysUserGrantRole: ['/sysUser/grantRole', 'post'],
+
+    /**
+     * 拥有数据
+     */
+    sysUserOwnData: ['/sysUser/ownData', 'get'],
+
+    /**
+     * 授权数据
+     */
+    sysUserGrantData: ['/sysUser/grantData', 'post'],
+
+    /**
+     * 修改状态
+     */
+    sysUserChangeStatus: ['/sysUser/changeStatus', 'post'],
+
+    /**
+     * 重置密码
+     */
+    sysUserResetPwd: ['/sysUser/resetPwd', 'post'],
+
+    /**
+     * 修改密码
+     */
+    sysUserUpdatePwd: ['/sysUser/updatePwd', 'post'],
+
+    /**
+     * 用户选择器
+     */
+    sysUserSelector: ['/sysUser/selector', 'get'],
+
+    /**
+     * 修改头像
+     */
+    sysUserUpdateAvatar: ['/sysUser/updateAvatar', 'post'],
+
+    /**
+     * 更新基本信息
+     */
+    sysUserUpdateInfo: ['/sysUser/updateInfo', 'post'],
+}
+
+export default urls

web-react/src/common/api/status.js

@@ -0,0 +1,208 @@
+const status = {
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 100。 System.Net.HttpStatusCode.Continue 指示客户端可以继续其请求。
+    Continue: 100,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态为 101。 System.Net.HttpStatusCode.SwitchingProtocols 指示正在更改的协议版本或协议。
+    SwitchingProtocols: 101,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 200。 System.Net.HttpStatusCode.OK 指示请求成功，且请求的信息包含在响应中。 这是要接收的最常见状态代码。
+    OK: 200,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 201。 System.Net.HttpStatusCode.Created 指示请求导致已发送响应之前创建一个新的资源。
+    Created: 201,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 202。 System.Net.HttpStatusCode.Accepted 指示请求已被接受进行进一步处理。
+    Accepted: 202,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 203。 System.Net.HttpStatusCode.NonAuthoritativeInformation 指示返回的元信息来自而不是原始服务器的缓存副本，因此可能不正确。
+    NonAuthoritativeInformation: 203,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 204。 System.Net.HttpStatusCode.NoContent 指示已成功处理请求和响应是有意留为空白。
+    NoContent: 204,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 205。 System.Net.HttpStatusCode.ResetContent 指示客户端应重置 （而不是重新加载） 的当前资源。
+    ResetContent: 205,
+    //
+    // 摘要:
+    //     等效于 HTTP 206 状态。 System.Net.HttpStatusCode.PartialContent 指示根据包括字节范围的 GET 请求的请求的响应是部分响应。
+    PartialContent: 206,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 300。 System.Net.HttpStatusCode.MultipleChoices 指示所需的信息有多种表示形式。 默认操作是将此状态视为一个重定向，并按照与此响应关联的位置标头的内容。
+    MultipleChoices: 300,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 300。 System.Net.HttpStatusCode.Ambiguous 指示所需的信息有多种表示形式。 默认操作是将此状态视为一个重定向，并按照与此响应关联的位置标头的内容。
+    Ambiguous: 300,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 301。 System.Net.HttpStatusCode.MovedPermanently 指示已将所需的信息移动到的位置标头中指定的
+    //     URI。 当收到此状态时的默认操作是遵循与响应关联的位置标头。
+    MovedPermanently: 301,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 301。 System.Net.HttpStatusCode.Moved 指示已将所需的信息移动到的位置标头中指定的 URI。 当收到此状态时的默认操作是遵循与响应关联的位置标头。
+    //     当原始请求方法是 POST 时，重定向的请求将使用 GET 方法。
+    Moved: 301,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 302。 System.Net.HttpStatusCode.Found 指示所需的信息位于的位置标头中指定的 URI。 当收到此状态时的默认操作是遵循与响应关联的位置标头。
+    //     当原始请求方法是 POST 时，重定向的请求将使用 GET 方法。
+    Found: 302,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 302。 System.Net.HttpStatusCode.Redirect 指示所需的信息位于的位置标头中指定的 URI。 当收到此状态时的默认操作是遵循与响应关联的位置标头。
+    //     当原始请求方法是 POST 时，重定向的请求将使用 GET 方法。
+    Redirect: 302,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 303。 System.Net.HttpStatusCode.SeeOther 自动将客户端重定向到的位置标头中指定作为公告的结果的
+    //     URI。 对指定的位置标头的资源的请求将会执行与 GET。
+    SeeOther: 303,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 303。 System.Net.HttpStatusCode.RedirectMethod 自动将客户端重定向到的位置标头中指定作为公告的结果的
+    //     URI。 对指定的位置标头的资源的请求将会执行与 GET。
+    RedirectMethod: 303,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 304。 System.Net.HttpStatusCode.NotModified 指示客户端的缓存的副本是最新。 不会传输资源的内容。
+    NotModified: 304,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 305。 System.Net.HttpStatusCode.UseProxy 指示该请求应使用的位置标头中指定的 uri 的代理服务器。
+    UseProxy: 305,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 306。 System.Net.HttpStatusCode.Unused 是对未完全指定的 HTTP/1.1 规范建议的扩展。
+    Unused: 306,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 307。 System.Net.HttpStatusCode.TemporaryRedirect 指示请求信息位于的位置标头中指定的
+    //     URI。 当收到此状态时的默认操作是遵循与响应关联的位置标头。 当原始请求方法是 POST 时，重定向的请求还将使用 POST 方法。
+    TemporaryRedirect: 307,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 307。 System.Net.HttpStatusCode.RedirectKeepVerb 指示请求信息位于的位置标头中指定的
+    //     URI。 当收到此状态时的默认操作是遵循与响应关联的位置标头。 当原始请求方法是 POST 时，重定向的请求还将使用 POST 方法。
+    RedirectKeepVerb: 307,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 400。 System.Net.HttpStatusCode.BadRequest 指示无法由服务器理解此请求。 System.Net.HttpStatusCode.BadRequest
+    //     如果没有其他错误适用，或者如果具体的错误是未知的或不具有其自己的错误代码发送。
+    BadRequest: 400,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 401。 System.Net.HttpStatusCode.Unauthorized 指示所请求的资源需要身份验证。 Www-authenticate
+    //     标头包含如何执行身份验证的详细信息。
+    Unauthorized: 401,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 402。 System.Net.HttpStatusCode.PaymentRequired 已保留供将来使用。
+    PaymentRequired: 402,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 403。 System.Net.HttpStatusCode.Forbidden 指示服务器拒绝无法完成请求。
+    Forbidden: 403,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 404。 System.Net.HttpStatusCode.NotFound 指示所请求的资源不存在的服务器上。
+    NotFound: 404,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 405。 System.Net.HttpStatusCode.MethodNotAllowed 指示请求方法 （POST 或 GET）
+    //     不允许对所请求的资源。
+    MethodNotAllowed: 405,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 406。 System.Net.HttpStatusCode.NotAcceptable 表示客户端已指定使用 Accept 标头，它将不接受任何可用的资源表示。
+    NotAcceptable: 406,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 407。 System.Net.HttpStatusCode.ProxyAuthenticationRequired 指示请求的代理要求身份验证。
+    //     代理服务器进行身份验证标头包含如何执行身份验证的详细信息。
+    ProxyAuthenticationRequired: 407,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 408。 System.Net.HttpStatusCode.RequestTimeout 指示客户端的服务器预期请求的时间内没有未发送请求。
+    RequestTimeout: 408,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 409。 System.Net.HttpStatusCode.Conflict 指示该请求可能不会执行由于在服务器上发生冲突。
+    Conflict: 409,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 410。 System.Net.HttpStatusCode.Gone 指示所请求的资源不再可用。
+    Gone: 410,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 411。 System.Net.HttpStatusCode.LengthRequired 指示缺少必需的内容长度标头。
+    LengthRequired: 411,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 412。 System.Net.HttpStatusCode.PreconditionFailed 表示失败，此请求的设置的条件，无法执行请求。
+    //     使用条件请求标头，如果匹配项，如设置条件无-If-match，或如果-修改-自从。
+    PreconditionFailed: 412,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 413。 System.Net.HttpStatusCode.RequestEntityTooLarge 指示请求来说太大的服务器能够处理。
+    RequestEntityTooLarge: 413,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 414。 System.Net.HttpStatusCode.RequestUriTooLong 指示 URI 太长。
+    RequestUriTooLong: 414,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 415。 System.Net.HttpStatusCode.UnsupportedMediaType 指示该请求是不受支持的类型。
+    UnsupportedMediaType: 415,
+    //
+    // 摘要:
+    //     等效于 HTTP 416 状态。 System.Net.HttpStatusCode.RequestedRangeNotSatisfiable 指示从资源请求的数据范围不能返回，或者因为范围的开始处，然后该资源的开头或范围的末尾后在资源的结尾。
+    RequestedRangeNotSatisfiable: 416,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 417。 System.Net.HttpStatusCode.ExpectationFailed 指示无法由服务器满足 Expect
+    //     标头中给定。
+    ExpectationFailed: 417,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 426。 System.Net.HttpStatusCode.UpgradeRequired 指示客户端应切换到不同的协议，例如
+    //     TLS/1.0。
+    UpgradeRequired: 426,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 500。 System.Net.HttpStatusCode.InternalServerError 表示在服务器上发生一般性错误。
+    InternalServerError: 500,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 501。 System.Net.HttpStatusCode.NotImplemented 指示服务器不支持所请求的功能。
+    NotImplemented: 501,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 502。 System.Net.HttpStatusCode.BadGateway 指示中间代理服务器从另一个代理或原始服务器接收到错误响应。
+    BadGateway: 502,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 503。 System.Net.HttpStatusCode.ServiceUnavailable 指示将服务器暂时不可用，通常是由于高负载或维护。
+    ServiceUnavailable: 503,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 504。 System.Net.HttpStatusCode.GatewayTimeout 指示中间代理服务器在等待来自另一个代理或原始服务器的响应时已超时。
+    GatewayTimeout: 504,
+    //
+    // 摘要:
+    //     等效于 HTTP 状态 505。 System.Net.HttpStatusCode.HttpVersionNotSupported 指示服务器不支持请求的
+    //     HTTP 版本。
+    HttpVersionNotSupported: 505
+}
+
+export default status

web-react/src/common/login/index.js

@@ -0,0 +1,65 @@
+import { api } from 'common/api'
+import { token } from 'common/token'
+//import { encryptByDES, decryptByDES } from 'util/des'
+import { encryptByRSA } from 'util/rsa'
+import { removeGlobal, RSA_PUBLIC_KEY } from 'util/global'
+import { message as Message } from 'antd'
+import { Redirect } from 'react-router-dom'
+
+const doLogin = (args) => {
+    return new Promise((resolve, reject) => {
+        let { account, password } = args
+        password = encryptByRSA(password, RSA_PUBLIC_KEY)
+        api.login({ account, password }).then(({ success, data, message }) => {
+            if (success) {
+                token.value = data
+                Message.success('登录成功')
+                // if (app.$route.query.return) {
+                //     const r = decryptByDES(app.$route.query.return)
+                //     app.$router.replace(r)
+                // } else {
+                //     app.$router.replace('/')
+                // }
+                return <Redirect to="/" push={false} />
+            } else {
+                Message.error(message)
+                reject()
+            }
+        }).catch(({ message }) => {
+            if (typeof message === 'object' && message[0]) {
+                Message.error(message[0].messages[0])
+            }
+            reject()
+        })
+    })
+}
+
+const doLogout = () => {
+    return new Promise((resolve, reject) => {
+        api.logout().then(({ success, message }) => {
+            if (success) {
+                removeGlobal()
+                token.value = ''
+                // if (app.$route.path === '/') {
+                //     app.$router.replace('/login')
+                // } else {
+                //     app.$router.replace({
+                //         path: '/login',
+                //         query: {
+                //             return: decodeURIComponent(encryptByDES(app.$route.path))
+                //         }
+                //     })
+                // }
+                resolve()
+            } else {
+                message.error(message)
+                reject()
+            }
+        })
+    })
+}
+
+export {
+    doLogin,
+    doLogout,
+}

web-react/src/common/storage/index.js

@@ -0,0 +1,9 @@
+const SESSION_KEY = '__SESSION'
+const SETTING_KEY = '__SETTINGS'
+const GLOBAL_INFO_KEY = '__GLOBAL_INFO'
+
+export {
+    SESSION_KEY,
+    SETTING_KEY,
+    GLOBAL_INFO_KEY,
+}

web-react/src/common/token/index.js

@@ -0,0 +1,19 @@
+import { SESSION_KEY } from '../storage'
+
+const token = {
+    get value() {
+        return window.localStorage.getItem(SESSION_KEY)
+    },
+    set value(token) {
+        if (!token) {
+            window.localStorage.removeItem(SESSION_KEY)
+        } else {
+            window.localStorage.setItem(SESSION_KEY, token)
+        }
+    }
+}
+
+export {
+    SESSION_KEY,
+    token
+}

web-react/src/components/ant-icon/index.jsx

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import * as Icon from '@ant-design/icons'
+
+export default class AntIcon extends Component {
+
+    render() {
+
+        const type = (this.props.type || '').toUpperCase()
+
+        if (type) {
+            if (type.indexOf('OUTLINED') >= 0 || type.indexOf('FILLED') >= 0 || type.indexOf('TWOTONE') >= 0) {
+                const I = Icon[this.props.type]
+                return <I {...this.props} />
+            } else {
+                const t = type.split('-').map(p => {
+                    return p[0] + p.slice(1).toLowerCase()
+                }).join('') + 'Outlined'
+                const I = Icon[t]
+                return <I {...this.props} />
+            }
+        }
+
+        return <></>
+    }
+}

web-react/src/components/authority-view/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class AuthorityView extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/authorized/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class Auth extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/component-dynamic/index.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import { cloneDeep } from 'lodash'
+
+export default class ComponentDynamic extends Component {
+
+    state = {
+        component: null
+    }
+
+    async componentDidMount() {
+        let c;
+
+        try {
+            if (this.props.is) {
+                if (this.props.is.constructor === Function) {
+                    // 导入函数
+                    c = await this.props.is()
+                } else {
+                    // 导入路径,必须是src以下节点,如 pages/home
+                    c = await import(`../../${this.props.is}`)
+                }
+            }
+        }
+        catch {
+            c = await import(`views/error/404`)
+        }
+
+        this.setState({
+            component: c.default
+        })
+    }
+
+    render() {
+
+        const props = cloneDeep(this.props)
+
+        delete props.is
+
+        return (<>
+            {
+                this.state.component && <this.state.component {...props} />
+            }
+        </>)
+    }
+}

web-react/src/components/container/index.jsx

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+
+export default class Container extends Component {
+
+    getMode(mode) {
+        const c = 'container'
+        switch (mode) {
+            case 'sm':
+                return c + '-sm'
+            case 'md':
+                return c + '-md'
+            case 'fluid':
+                return c + '-fluid'
+            default:
+                return c
+        }
+    }
+
+    render() {
+        const className = this.getMode(this.props.mode)
+
+        return (
+            <section className={className}>{this.props.children}</section>
+        )
+    }
+}

web-react/src/components/icon-selector/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class IconSelector extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/image/index.jsx

@@ -0,0 +1,58 @@
+import React, { Component } from 'react'
+import { Avatar } from 'antd'
+import { isEqual } from 'lodash'
+import { PreviewFileBase64 } from 'util/file'
+
+const getSrc = async (id) => {
+    if (id) {
+        const base64 = await PreviewFileBase64(id)
+        return base64
+    }
+    return ''
+}
+
+let id = ''
+
+export default class Image extends Component {
+
+    state = {
+        src: ''
+    }
+
+    constructor(props) {
+        super(props)
+
+        this.setSrc()
+    }
+
+    shouldComponentUpdate(props) {
+        // props变更或state.src变更时进行渲染
+        return !isEqual(this.props, props) || !this.state.src
+    }
+
+    componentDidUpdate() {
+        if (id !== this.props.id && this.props.id) {
+            this.setSrc()
+        }
+    }
+
+    setSrc = async () => {
+        if (this.props.id) {
+            id = this.props.id
+            const src = await getSrc(id)
+            this.setState({ src })
+        }
+    }
+
+    render() {
+        if (this.props.type === 'avatar') {
+            return (
+                <Avatar src={this.state.src} {...this.props} />
+            )
+        } else {
+            return (
+                <img src={this.state.src} {...this.props} alt="" />
+            )
+        }
+    }
+}

web-react/src/components/index.js

@@ -0,0 +1,31 @@
+import AntIcon from './ant-icon'
+import AuthorityView from './authority-view'
+import Auth from './authorized'
+import ComponentDynamic from './component-dynamic'
+import Container from './container'
+import IconSelector from './icon-selector'
+import Image from './image'
+import ModalForm from './modal-form'
+import PhotoSwipe from './photo-swipe'
+import QueryList from './query-list'
+import QueryTable from './query-table'
+import QueryTableActions from './query-table-actions'
+import QueryTreeLayout from './query-tree-layout'
+
+const components = {
+    AntIcon,
+    AuthorityView,
+    Auth,
+    ComponentDynamic,
+    Container,
+    IconSelector,
+    Image,
+    ModalForm,
+    PhotoSwipe,
+    QueryList,
+    QueryTable,
+    QueryTableActions,
+    QueryTreeLayout
+}
+
+export default components

web-react/src/components/modal-form/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class ModalForm extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/photo-swipe/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class PhotoSwipe extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/query-list/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class QueryList extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/query-table-actions/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class QueryTableActions extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/query-table/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class QueryTable extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/components/query-tree-layout/index.jsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class QueryTreeLayout extends Component {
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

web-react/src/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Router from './router'
+import reportWebVitals from './reportWebVitals';
+
+import { ConfigProvider } from 'antd'
+import zhCN from 'antd/lib/locale/zh_CN'
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+import './assets/style/app.less'
+
+moment.locale('zh-cn')
+
+//<React.StrictMode></React.StrictMode>
+
+ReactDOM.render(
+  <ConfigProvider locale={zhCN}>
+    <Router />
+  </ConfigProvider>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
+
+
+document.body.classList.add('yo-nav-theme--dark')

web-react/src/pages/business/house/info/form/base/building.jsx

@@ -0,0 +1,619 @@
+import React, { Component } from 'react'
+import { Row, Col, Form, Input, InputNumber, Radio, Checkbox, Switch, DatePicker, Spin } from 'antd'
+import { cloneDeep, isEqual } from 'lodash'
+import { api } from 'common/api'
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' }
+}
+
+export default class building extends Component {
+
+    state = {
+        loading: true,
+        codes: {
+            landAttribute: [],
+            houseStructureType: [],
+            houseSseismicGrade: [],
+            houseBaseInfo: [],
+            houseInsulationMaterial: [],
+            houseWallMaterial: [],
+            houseFireproofGrade: [],
+            houseBuildingCurtainWall: [],
+            houseElevator: [],
+        }
+    }
+    form = React.createRef()
+
+    constructor(props) {
+        super(props)
+
+        // 使父组件获取到当前组件实例
+        if (props.onRef) {
+            props.onRef(this)
+        }
+    }
+
+    shouldComponentUpdate(props, state) {
+        // 在上级页签切换时,阻止当前组件渲染,以保证性能
+        return !isEqual(this.state, state)
+    }
+
+    componentDidMount() {
+        this.onFillData()
+    }
+
+    onFillData = async () => {
+        await this.loadCodes()
+        this.setState({
+            loading: false
+        })
+    }
+
+    onGetData = () => {
+        return new Promise((resolve, reject) => {
+            this.form.current.validateFields()
+                .then(values => {
+                    const record = cloneDeep(values)
+
+                    resolve(record)
+                }).catch(err => {
+                    reject(err)
+                })
+        })
+    }
+
+    loadCodes = async () => {
+        await api
+            .sysDictTypeDropDowns({
+                code: [
+                    'dic_land_attribute',
+                    'dic_house_structure_type',
+                    'dic_house_aseismic_grade',
+                    'dic_house_base_info',
+                    'dic_house_insulation_material',
+                    'dic_house_wall_material',
+                    'dic_house_fireproof_grade',
+                    'dic_house_building_curtain_wall',
+                    'dic_house_elevator',
+                ],
+            })
+            .then(
+                ({
+                    data: {
+                        dic_land_attribute,
+                        dic_house_structure_type,
+                        dic_house_aseismic_grade,
+                        dic_house_base_info,
+                        dic_house_insulation_material,
+                        dic_house_wall_material,
+                        dic_house_fireproof_grade,
+                        dic_house_building_curtain_wall,
+                        dic_house_elevator,
+                    },
+                }) => {
+                    this.setState({
+                        codes: {
+                            landAttribute: dic_land_attribute,
+                            houseStructureType: dic_house_structure_type,
+                            houseSseismicGrade: dic_house_aseismic_grade,
+                            houseBaseInfo: dic_house_base_info,
+                            houseInsulationMaterial: dic_house_insulation_material,
+                            houseWallMaterial: dic_house_wall_material,
+                            houseFireproofGrade: dic_house_fireproof_grade,
+                            houseBuildingCurtainWall: dic_house_building_curtain_wall,
+                            houseElevator: dic_house_elevator,
+                        }
+                    })
+                }
+            )
+    }
+
+    render() {
+        return (
+            <Spin spinning={this.state.loading}>
+                <Form
+                    {...layout}
+                    ref={this.form}
+                >
+                    <Row gutter={16} type="flex">
+                        <Col span={12}>
+                            <Form.Item name={['houseInfo', 'buildingName']} label="幢名称" rules={[{ required: true, message: '请输入幢名称', trigger: 'blur' }]}>
+                                <Input autoComplete="off" placeholder="请输入幢名称" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item name={['houseCode', 'address']} label="坐落地址">
+                                <Input autoComplete="off" placeholder="请输入坐落地址" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={24}>
+                            <Form.Item label="土地性质" name="houseInfo.landAttribute">
+                                <Radio.Group buttonStyle="solid">
+                                    {
+                                        this.state.codes.landAttribute.map(item => {
+                                            return (
+                                                <Radio.Button
+                                                    key={item.code}
+                                                    value={+item.code}
+                                                >{item.value}</Radio.Button>
+                                            )
+                                        })
+                                    }
+                                </Radio.Group>
+                            </Form.Item>
+                        </Col>
+                        <Col span={24}>
+                            <Form.Item className="mb-none" label="地理坐标">
+                                <Row gutter={16}>
+                                    <Col span={12}>
+                                        <Form.Item name={['houseCode', 'lng']}>
+                                            <Input autoComplete="off"
+                                                className="yo-input-prefix-2"
+                                                disabled
+                                                placeholder="请在地图上选择坐标"
+                                                prefix="经度"
+                                            />
+                                        </Form.Item>
+                                    </Col>
+                                    <Col span={12}>
+                                        <Form.Item name={['houseCode', 'lat']}>
+                                            <Input autoComplete="off"
+                                                className="yo-input-prefix-2"
+                                                disabled
+                                                placeholder="请在地图上选择坐标"
+                                                prefix="纬度"
+                                            />
+                                        </Form.Item>
+                                    </Col>
+                                </Row>
+                            </Form.Item>
+                            <Form.Item colon={false} label={true}>
+                                <div className="yo-map-container">
+                                    <div className="yo-map--search">
+                                        <Input.Search autoComplete="off" allow-clear placeholder="请输入关键字" ref="map-search" />
+                                    </div>
+                                    <div className="h-500" ref="map"></div>
+                                </div>
+                            </Form.Item>
+                        </Col>
+                        <Col span={24}>
+                            <Form.Item label="结构类型" name="houseInfo.structureType">
+                                <Radio.Group
+                                    buttonStyle="solid"
+                                    placeholder="请选择结构类型"
+                                >
+                                    {
+                                        this.state.codes.houseStructureType.map(item => {
+                                            return (
+                                                <Radio.Button
+                                                    key={item.code}
+                                                    value={+item.code}
+                                                >{item.value}</Radio.Button>
+                                            )
+                                        })
+                                    }
+                                </Radio.Group>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item label="抗震等级" name="houseInfo.seismicGrade">
+                                <Radio.Group buttonStyle="solid" >
+                                    {
+                                        this.state.codes.houseSseismicGrade.map(item => {
+                                            return (
+                                                <Radio.Button
+                                                    key={item.code}
+                                                    value={+item.code}
+                                                >{item.value}</Radio.Button>
+                                            )
+                                        })
+                                    }
+                                </Radio.Group>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item label="基础情况" name="houseInfo.baseInfo">
+                                <Radio.Group buttonStyle="solid" >
+                                    {
+                                        this.state.codes.houseBaseInfo.map(item => {
+                                            return (
+                                                <Radio.Button
+                                                    key={item.code}
+                                                    value={+item.code}
+                                                >{item.value}</Radio.Button>
+                                            )
+                                        })
+                                    }
+                                </Radio.Group>
+                            </Form.Item>
+                        </Col>
+                        <Col span={24}>
+                            <Form.Item
+                                label="外墙保温材料"
+                                name="houseInfo.insulationMaterial"
+                            >
+                                <Checkbox.Group>
+                                    {
+                                        this.state.codes.houseInsulationMaterial.map(item => {
+                                            return (
+                                                <Checkbox
+                                                    key={item.code}
+                                                    value={item.code}
+                                                    className="mb-xs"
+                                                >{item.value}</Checkbox>
+                                            )
+                                        })
+                                    }
+                                    <Input autoComplete="off"
+                                        className="w-300"
+                                        placeholder="请输入其他外墙保温材料"
+                                    />
+                                </Checkbox.Group>
+                            </Form.Item>
+                        </Col>
+                        <Col span={24}>
+                            <Form.Item label="外墙墙体材料" name="houseInfo.wallMaterial">
+                                <Checkbox.Group>
+                                    {
+                                        this.state.codes.houseWallMaterial.map(item => {
+                                            return (
+                                                <Checkbox
+                                                    key={item.code}
+                                                    value={item.code}
+                                                    className="mb-xs"
+                                                >{item.value}</Checkbox>
+                                            )
+                                        })
+                                    }
+                                </Checkbox.Group>
+                            </Form.Item>
+                        </Col>
+                        <Col span={24}>
+                            <Form.Item name="houseInfo.fireproofGrade" label={<span>外墙外保温材料<br />防火等级</span>}>
+                                <Radio.Group buttonStyle="solid">
+                                    {
+                                        this.state.codes.houseFireproofGrade.map(item => {
+                                            return (
+                                                <Radio.Button
+                                                    key={item.code}
+                                                    value={item.code}
+                                                >{item.value}</Radio.Button>
+                                            )
+                                        })
+                                    }
+                                </Radio.Group>
+                            </Form.Item>
+                        </Col>
+                        <Col span={24}>
+                            <Form.Item label="建筑幕墙" name="houseInfo.curtainWall">
+                                <Radio.Group buttonStyle="solid">
+                                    {
+                                        this.state.codes.houseBuildingCurtainWall.map(item => {
+                                            return (
+                                                <Radio.Button
+                                                    key={item.code}
+                                                    value={+item.code}
+                                                >{item.value}</Radio.Button>
+                                            )
+                                        })
+                                    }
+                                </Radio.Group>
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="有无外墙面砖" name="houseInfo.faceBrick">
+                                <Switch />
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="有无外墙粉刷" name="houseInfo.whiteWash">
+                                <Switch />
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="有无外墙涂料" name="houseInfo.coating">
+                                <Switch />
+                            </Form.Item>
+                        </Col>
+                        <Col span={24}>
+                            <Form.Item label="电梯" name="houseInfo.elevator">
+                                <Radio.Group buttonStyle="solid">
+                                    {
+                                        this.state.codes.houseElevator.map(item => {
+                                            return (
+                                                <Radio.Button
+                                                    key={item.code}
+                                                    value={+item.code}
+                                                >{item.value}</Radio.Button>
+                                            )
+                                        })
+                                    }
+
+                                </Radio.Group>
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="竣工日期" name="houseInfo.completedDate">
+                                <DatePicker
+                                    onChange={(date) => { /*$root.transfer.completedYear = date.format('YYYY') */ }}
+                                    className="w-100-p"
+                                    placeholder="请选择竣工日期"
+                                />
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="设计使用年限" name="houseInfo.usefulYear">
+                                <Row type="flex">
+                                    <Col flex="1">
+                                        <InputNumber
+                                            min={0}
+                                            className="w-100-p"
+                                            placeholder="请输入设计使用年限"
+                                        />
+                                    </Col>
+                                    <Col>
+                                        <span className="yo-addon">年</span>
+                                    </Col>
+                                </Row>
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="总建筑面积" name="houseInfo.totalArea">
+                                <Row type="flex">
+                                    <Col flex="1">
+                                        <InputNumber
+                                            min={0}
+                                            className="w-100-p"
+                                            placeholder="请输入总建筑面积"
+                                        />
+                                    </Col>
+                                    <Col>
+                                        <span className="yo-addon">m²</span>
+                                    </Col>
+                                </Row>
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="总户数" name="houseInfo.houseHolds">
+                                <Row type="flex">
+                                    <Col flex="1">
+                                        <InputNumber
+                                            min={0}
+                                            precision={0}
+                                            step={1}
+                                            className="w-100-p"
+                                            placeholder="请输入总户数"
+                                        />
+                                    </Col>
+                                    <Col>
+                                        <span className="yo-addon">户</span>
+                                    </Col>
+                                </Row>
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="房屋单元数" name="houseInfo.units">
+                                <Row type="flex">
+                                    <Col flex="1">
+                                        <InputNumber
+                                            min={0}
+                                            precision={0}
+                                            step={1}
+                                            className="w-100-p"
+                                            placeholder="请输入房屋单元数"
+                                        />
+                                    </Col>
+                                    <Col>
+                                        <span className="yo-addon">单元</span>
+                                    </Col>
+                                </Row>
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="每层每单元户数" name="houseInfo.unitFloorHolds">
+                                <Row type="flex">
+                                    <Col flex="1">
+                                        <InputNumber
+                                            min={0}
+                                            precision={0}
+                                            step={1}
+                                            className="w-100-p"
+                                            placeholder="请输入每层每单元户数"
+                                        />
+                                    </Col>
+                                    <Col>
+                                        <span className="yo-addon">户</span>
+                                    </Col>
+                                </Row>
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="建设单位" name="houseInfo.buildingUnit">
+                                <Input autoComplete="off" placeholder="请输入建设单位" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="建设单位联系人" name="houseInfo.buildingUnitUser">
+                                <Input autoComplete="off" placeholder="请输入建设单位联系人" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="建设单位联系电话" name="houseInfo.buildingUnitTel">
+                                <Input autoComplete="off" placeholder="请输入建设单位联系电话" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="设计单位" name="houseInfo.desingerUnit">
+                                <Input autoComplete="off" placeholder="请输入设计单位" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="施工单位" name="houseInfo.constructionUnit">
+                                <Input autoComplete="off" placeholder="请输入施工单位" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="监理单位" name="houseInfo.monitorUnit">
+                                <Input autoComplete="off" placeholder="请输入监理单位" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={24}>
+                            <Form.Item label="建筑层数">
+                                <div className="ant-form-inline">
+                                    <Form.Item
+                                        colon={false}
+                                        label="地上"
+                                        name="houseInfo.landFloorCount"
+                                    >
+                                        <Row type="flex" align="middle">
+                                            <Col flex="1">
+                                                <InputNumber
+                                                    min={0}
+                                                    precision={0}
+                                                    step={1}
+                                                    className="w-100-p"
+                                                    placeholder="请输入地上层"
+                                                />
+                                            </Col>
+                                            <Col>
+                                                <span className="yo-addon">层</span>
+                                            </Col>
+                                        </Row>
+                                    </Form.Item>
+                                    <Form.Item
+                                        colon={false}
+                                        label="地下"
+                                        name="houseInfo.underFloorCount"
+                                    >
+                                        <Row type="flex" align="middle">
+                                            <Col flex="1">
+                                                <InputNumber
+                                                    min={0}
+                                                    precision={0}
+                                                    step={1}
+                                                    className="w-100-p"
+                                                    placeholder="请输入地下层"
+                                                />
+                                            </Col>
+                                            <Col>
+                                                <span className="yo-addon">层</span>
+                                            </Col>
+                                        </Row>
+                                    </Form.Item>
+                                    <Form.Item
+                                        colon={false}
+                                        label="总共"
+                                        name="houseInfo.totalFloor"
+                                    >
+                                        <Row type="flex" align="middle">
+                                            <Col flex="1">
+                                                <InputNumber
+                                                    min={0}
+                                                    precision={0}
+                                                    step={1}
+                                                    className="w-100-p"
+                                                    disabled
+                                                    placeholder="请输入总层数"
+                                                />
+                                            </Col>
+                                            <Col>
+                                                <span className="yo-addon">层</span>
+                                            </Col>
+                                        </Row>
+                                    </Form.Item>
+                                </div>
+                            </Form.Item>
+                            <Form.Item label="其中">
+                                <div className="ant-form-inline">
+                                    <Form.Item>
+                                        <Row type="flex" align="middle">
+                                            <Col>
+                                                <span className="yo-addon">地上第</span>
+                                            </Col>
+                                            <Col flex="1">
+                                                <Form.Item className="mr-none" name="houseInfo.landBsFloorStart">
+                                                    <InputNumber
+                                                        min={0}
+                                                        step={1}
+                                                        placeholder="几"
+                                                    />
+                                                </Form.Item>
+                                            </Col>
+                                            <Col>
+                                                <span className="yo-addon">层，至</span>
+                                            </Col>
+                                            <Col flex="1">
+                                                <Form.Item className="mr-none" name="houseInfo.landBsFloorEnd">
+                                                    <InputNumber
+                                                        min={0}
+                                                        step={1}
+                                                        placeholder="几"
+                                                    />
+                                                </Form.Item>
+                                            </Col>
+                                            <Col>
+                                                <span className="yo-addon">层为商业用房</span>
+                                            </Col>
+                                        </Row>
+                                    </Form.Item>
+                                    <Form.Item>
+                                        <Row type="flex" align="middle">
+                                            <Col>
+                                                <span className="yo-addon">地上</span>
+                                            </Col>
+                                            <Col flex="1">
+                                                <Form.Item className="mr-none" name="houseInfo.landBikeFloorStart">
+                                                    <InputNumber
+                                                        min={0}
+                                                        step={1}
+                                                        placeholder="几"
+                                                    />
+                                                </Form.Item>
+                                            </Col>
+                                            <Col>
+                                                <span className="yo-addon">层为车棚层</span>
+                                            </Col>
+                                        </Row>
+                                    </Form.Item>
+                                    <Form.Item>
+                                        <Row type="flex" align="middle">
+                                            <Col>
+                                                <span className="yo-addon">地上第</span>
+                                            </Col>
+                                            <Col flex="1">
+                                                <Form.Item className="mr-none" name="houseInfo.landResidenceFloorStart">
+                                                    <InputNumber
+                                                        min={0}
+                                                        step={1}
+                                                        placeholder="几"
+                                                    />
+                                                </Form.Item>
+                                            </Col>
+                                            <Col>
+                                                <span className="yo-addon">层，至</span>
+                                            </Col>
+                                            <Col flex="1">
+                                                <Form.Item className="mr-none" name="houseInfo.landResidenceFloorEnd">
+                                                    <InputNumber
+                                                        min={0}
+                                                        step={1}
+                                                        placeholder="几"
+                                                    />
+                                                </Form.Item>
+                                            </Col>
+                                            <Col>
+                                                <span className="yo-addon">层为住宅</span>
+                                            </Col>
+                                        </Row>
+                                    </Form.Item>
+                                </div>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </Spin>
+        )
+    }
+}

web-react/src/pages/business/house/info/form/base/index.jsx

@@ -0,0 +1,122 @@
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import { Row, Col, Card, Anchor } from 'antd'
+import { defaultsDeep } from 'lodash'
+import Components from 'components'
+
+const { ComponentDynamic, Container } = Components
+
+const parts = [
+    {
+        title: '建筑物基本信息',
+        component: () => import('./building'),
+    },
+    {
+        title: '建筑物基本信息',
+        component: () => import('./building'),
+    },
+    {
+        title: '建筑物基本信息',
+        component: () => import('./building'),
+    },
+    {
+        title: '建筑物基本信息',
+        component: () => import('./building'),
+    },
+    {
+        title: '建筑物基本信息',
+        component: () => import('./building'),
+    },
+    {
+        title: '建筑物基本信息',
+        component: () => import('./building'),
+    },
+]
+
+export default class index extends Component {
+
+    container = window
+    forms = []
+
+    constructor(props) {
+        super(props)
+
+        // 使父组件获取到当前组件实例
+        if (props.onRef) {
+            props.onRef(this)
+        }
+    }
+
+    getContainer = () => {
+        return this.container
+    }
+
+    setContainer = (container) => {
+        this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
+    }
+
+    onGetData = () => {
+        return new Promise(async (resolve, reject) => {
+            let formData = {},
+                flag = true
+            for (let i = 0; i < this.forms.length; i++) {
+                const form = this.forms[i]
+                try {
+                    const data = await form.onGetData()
+                    formData = defaultsDeep(formData, data)
+                } catch (err) {
+                    flag = false
+                    reject(err)
+                }
+            }
+            if (flag) {
+                resolve(formData)
+            }
+        })
+    }
+
+    render() {
+        return (
+            <Container mode="fluid" ref={this.setContainer}>
+                <Row gutter={16} type="flex">
+                    <Col flex="1">
+                        <br />
+                        <Card className="yo-form-page--body">
+                            {
+                                parts.map((part, i) => {
+                                    return (
+                                        <section key={i} id={`form-${i}-${this.props.id}`}>
+                                            {part.title && <h5>{part.title}</h5>}
+                                            <ComponentDynamic is={part.component} {...this.props} onRef={c => this.forms.push(c)} />
+                                        </section>
+                                    )
+                                })
+                            }
+                        </Card>
+                    </Col>
+                    <Col flex="240px">
+                        <Anchor
+                            getContainer={this.getContainer}
+                            offsetTop={24}
+                            targetOffset={48}
+                            wrapperStyle={{ backgroundColor: 'transparent' }}
+                            onClick={(e) => e.preventDefault()}
+                        >
+                            {
+                                parts.map((part, i) => {
+                                    return (
+                                        <Anchor.Link
+                                            key={i}
+                                            href={`#form-${i}-${this.props.id}`}
+                                            title={part.title}
+                                        />
+                                    )
+                                })
+                            }
+                        </Anchor>
+                    </Col>
+                </Row>
+            </Container>
+        )
+    }
+}