全局样式优化

.gitignore

@@ -19,3 +19,4 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+/更新节点.txt

src/global.less

@@ -1,172 +1,62 @@
 @import '~ant-design-vue/es/style/themes/default.less';
 @import './utils/utils.less';
 
-// body {}
-
-::-moz-selection {
-  background: #009688;
-  color: #FFF;
-}
-
-::selection {
-  background: #159b76;
-  color: #FFF;
-}
 
+// 滚动条样式
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 5px;
+  height: 5px;
 }
 
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: #bdbdbd;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .3);
 }
 
-#app {
+html,
+body,
+#app,
+#root {
   height: 100%;
-
-  &.colorWeak {
-    filter: invert(80%);
-  }
-
-  &.userLayout {
-    overflow: auto;
-  }
 }
 
-.layout.ant-layout {
-  height: auto;
-  overflow-x: hidden;
-
-  &.mobile,
-  &.tablet {
-    .ant-layout-content {
-      .content {
-        margin: 24px 0 0;
-      }
-    }
-
-    /**
-     * ant-table-wrapper
-     * 覆盖的表格手机模式样式，如果想修改在手机上表格最低宽度，可以在这里改动
-     */
-    .ant-table-wrapper {
-      .ant-table-content {
-        overflow-y: auto;
-      }
-
-      .ant-table-body {
-        min-width: 800px;
-      }
-    }
-
-    .topmenu {
-
-      /* 必须为 topmenu  才能启用流式布局 */
-      &.content-width-Fluid {
-        .header-index-wide {
-          margin-left: 0;
-        }
-      }
-    }
-  }
-
-  &.mobile {
-    .sidemenu {
-      .ant-header-fixedHeader {
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
-        &.ant-header-side-opened,
-        &.ant-header-side-closed {
-          width: 100%;
-        }
-      }
-    }
+  ul,
+  ol {
+    list-style: none;
   }
 
-  &.ant-layout-has-sider {
-    flex-direction: row;
+  p {
+    margin: 0;
+    margin-bottom: 0;
   }
 
-  .trigger {
-    font-size: 20px;
-    line-height: 64px;
-    padding: 0 24px;
-    cursor: pointer;
-    transition: color 0.3s;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.025);
-    }
+  canvas {
+    display: block;
   }
 
-  .topmenu {
-    .ant-header-fixedHeader {
-      position: fixed;
-      top: 0;
-      right: 0;
-      z-index: 9;
-      width: 100%;
-      transition: width 0.2s;
-
-      &.ant-header-side-opened {
-        width: 100%;
-      }
-
-      &.ant-header-side-closed {
-        width: 100%;
-      }
-    }
-
-    /* 必须为 topmenu  才能启用流式布局 */
-    &.content-width-Fluid {
-      .header-index-wide {
-        max-width: unset;
-
-        .header-index-left {
-          flex: 1 1 1000px;
-
-          .logo {
-            margin-left: 25px;
-          }
-
-          .ant-menu.ant-menu-horizontal {
-            max-width: calc(100vw - 190px - 238px - 25px);
-            flex: 1 1 calc(100vw - 190px - 238px - 25px);
-          }
-        }
-
-        .header-index-right {
-          margin-right: 25px;
-        }
-      }
-
-      .page-header-index-wide {
-        max-width: unset;
-      }
-    }
-  }
+}
 
-  .sidemenu {
-    .ant-header-fixedHeader {
-      position: fixed;
-      top: 0;
-      right: 0;
-      z-index: 9;
-      width: 100%;
-      transition: width 0.2s;
+iframe {
+  border: 0;
+}
 
-      &.ant-header-side-opened {
-        width: calc(100% - 256px);
-      }
+.colorWeak {
+  filter: invert(80%);
+}
 
-      &.ant-header-side-closed {
-        width: calc(100% - 80px);
-      }
-    }
-  }
+.ant-layout.layout-basic {
+  height: 100vh;
+  min-height: 100vh;
+}
 
+// 顶部菜单
+.layout.ant-layout {
   .header {
     height: 64px;
     padding: 0 12px 0 0;
@@ -187,10 +77,7 @@
         user-select: none;
       }
     }
-  }
 
-  .header,
-  .top-nav-header-index {
     .user-wrapper {
       float: right;
       height: 100%;
@@ -221,187 +108,32 @@
         }
       }
     }
-
-    &.dark {
-      .user-wrapper {
-        .action {
-          color: rgba(255, 255, 255, 0.85);
-
-          a {
-            color: rgba(255, 255, 255, 0.85);
-          }
-
-          &:hover {
-            background: rgba(255, 255, 255, 0.16);
-          }
-        }
-      }
-    }
-  }
-
-  &.mobile,
-  &.tablet {
-    .top-nav-header-index {
-      .header-index-wide {
-        .header-index-left {
-          .trigger {
-            color: rgba(255, 255, 255, 0.85);
-            padding: 0 12px;
-          }
-
-          .logo.top-nav-header {
-            flex: 0 0 56px;
-            text-align: center;
-            line-height: 58px;
-
-            h1 {
-              display: none;
-            }
-          }
-        }
-      }
-
-      &.light {
-        .header-index-wide {
-          .header-index-left {
-            .trigger {
-              color: rgba(0, 0, 0, 0.65);
-            }
-          }
-        }
-
-        //
-      }
-    }
   }
+}
 
-  &.tablet {
-
-    // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
-    .top-nav-header-index {
-      .header-index-wide {
-        .header-index-left {
-          .logo>a {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-        }
-
-        .ant-menu.ant-menu-horizontal {
-          flex: 1 1 auto;
-          white-space: normal;
-        }
-      }
-    }
+// 外置的样式控制
+.user-dropdown-menu {
+  span {
+    user-select: none;
   }
+}
 
-  .top-nav-header-index {
-    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-    position: relative;
-    transition: background 0.3s, width 0.2s;
-
-    .header-index-wide {
-      max-width: 1200px;
-      margin: auto;
-      padding-left: 0;
-      display: flex;
-      height: 64px;
-
-      .ant-menu.ant-menu-horizontal {
-        max-width: 835px;
-        flex: 0 1 835px;
-        border: none;
-        height: 64px;
-        line-height: 64px;
-      }
-
-      .header-index-left {
-        flex: 0 1 1000px;
-        display: flex;
-
-        .logo.top-nav-header {
-          flex: 0 0 165px;
-          width: 165px;
-          height: 64px;
-          position: relative;
-          line-height: 64px;
-          transition: all 0.3s;
-          overflow: hidden;
-
-          img,
-          svg {
-            display: inline-block;
-            vertical-align: middle;
-            height: 32px;
-            width: 32px;
-          }
-
-          h1 {
-            color: #fff;
-            display: inline-block;
-            vertical-align: top;
-            font-size: 16px;
-            margin: 0 0 0 12px;
-            font-weight: 400;
-          }
-        }
-      }
-
-      .header-index-right {
-        flex: 0 0 238px;
-        align-self: flex-end;
-        height: 64px;
-        overflow: hidden;
-
-        .content-box {
-          float: right;
-
-          .action {
-            max-width: 140px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-        }
-      }
-    }
-
-    &.light {
-      background-color: #fff;
-
-      .header-index-wide {
-        .header-index-left {
-          .logo {
-            h1 {
-              color: #002140;
-            }
-          }
-        }
-      }
-    }
-  }
+.user-dropdown-menu-wrapper.ant-dropdown-menu {
+  padding: 4px 0;
 
-  // 内容区
-  .layout-content {
-    margin: 24px 24px 0px;
-    height: 100%;
-    height: 64px;
-    padding: 0 12px 0 0;
+  .ant-dropdown-menu-item {
+    width: 160px;
+    padding: 8px 12px;
   }
 
-  // footer
-  .ant-layout-footer {
-    padding: 0;
+  .ant-dropdown-menu-item>.anticon:first-child,
+  .ant-dropdown-menu-item>a>.anticon:first-child,
+  .ant-dropdown-menu-submenu-title>.anticon:first-child .ant-dropdown-menu-submenu-title>a>.anticon:first-child {
+    min-width: 12px;
+    margin-right: 8px;
   }
 }
 
-.topmenu {
-  .page-header-index-wide {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-}
 
 // drawer-sider 自定义
 .ant-drawer.drawer-sider {
@@ -428,6 +160,7 @@
   }
 }
 
+
 // 菜单样式
 .sider {
   box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
@@ -510,26 +243,17 @@
   font-size: 16px;
 }
 
-// 外置的样式控制
-.user-dropdown-menu {
-  span {
-    user-select: none;
-  }
-}
-
-.user-dropdown-menu-wrapper.ant-dropdown-menu {
-  padding: 4px 0;
+.content {
+  .table-operator {
+    margin-bottom: 18px;
 
-  .ant-dropdown-menu-item {
-    width: 160px;
-    padding: 8px 12px;
+    button {
+      margin-right: 8px;
+    }
   }
 
-  .ant-dropdown-menu-item>.anticon:first-child,
-  .ant-dropdown-menu-item>a>.anticon:first-child,
-  .ant-dropdown-menu-submenu-title>.anticon:first-child .ant-dropdown-menu-submenu-title>a>.anticon:first-child {
-    min-width: 12px;
-    margin-right: 8px;
+  .ant-card-body {
+    padding: 24px 45px;
   }
 }
 
@@ -538,7 +262,33 @@
   margin-bottom: 16px;
 }
 
+// 数据列表 操作
+.table-operator {
+  margin-bottom: 18px;
+
+  .search-btn {
+    margin-right: 8px;
+  }
+
+  .actions {
+    .action-item {
+      display: inline-block;
+    }
+
+    .action-item,
+    .ant-btn {
+      margin-right: 10px;
+    }
+
+    .action-item .ant-btn {
+      margin-right: 0;
+    }
+  }
+}
+
+// 数据列表 搜索条件
 .table-page-search-wrapper {
+
   .ant-form-inline {
     .ant-form-item {
       display: flex;
@@ -571,39 +321,197 @@
   }
 }
 
-.content {
-  .table-operator {
-    margin-bottom: 18px;
+// 内容页card组件标题
+.card-title {
+  font-size: 14.5px;
+  margin-bottom: 18px;
+  color: rgba(0, 0, 0, 0.75);
+
+  // 选项卡模式
+  &.tabs {
+    border-bottom: 1px solid #f3f3f3;
+    margin-bottom: 23px;
+
+    .title-item {
+      position: relative;
+      display: inline-block;
+      margin-right: 15px;
+      padding: 0 15px;
+      padding-bottom: 10px;
+      cursor: pointer;
+      transition: color .3s cubic-bezier(.645, .045, .355, 1);
+
+      &:hover {
+        color: @primary-color;
+      }
+
+      &.active {
+        border-bottom: 2px solid @primary-color;
+      }
 
-    button {
-      margin-right: 8px;
     }
   }
 
-  .ant-card-body {
-    padding: 24px 45px;
+  // 右侧操作 (例如刷新)
+  .right-action {
+    float: right;
+    font-size: 13px;
   }
 }
 
-.ant-alert {
-  font-size: 12.5px;
+@media (max-width: @screen-xs) {
+  .ant-table {
+    width: 100%;
+    overflow-x: auto;
+
+    &-thead>tr,
+    &-tbody>tr {
+
+      >th,
+      >td {
+        white-space: pre;
+
+        >span {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+// 图标按钮样式
+.ant-btn>.anticon+span,
+.ant-btn>span+.anticon {
+  margin-left: 5px;
 }
 
+// 表单
+.ant-form {
+
+  .ant-form-explain,
+  .ant-form-extra {
+    font-size: 12.5px;
+  }
+
+  .form-item-help {
+    font-size: 12px;
+    // line-height: 2;
+    line-height: 1.5;
+    padding-top: 4px;
+    min-height: 22px;
+    // margin-top: -2px;
+    transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+
+    a {
+      margin: 0 3px;
+    }
+
+    .extra,
+    small {
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 12.5px !important;
+    }
+
+    .extra {
+      margin-bottom: 4px !important;
+    }
+  }
+}
+
+// 级联选择器
+.ant-cascader-menu {
+  height: 225px;
+}
 
 // 分割线
 .ant-divider {
   margin: 30px 0 !important;
 
   .ant-divider-inner-text {
-    font-size: 13px;
-    color: rgba(0, 0, 0, 0.59);
+    font-size: @font-size-base;
+    color: rgba(0, 0, 0, 0.61);
   }
 }
 
 .ant-divider-horizontal.ant-divider-with-text-left::before {
-  width: 2%;
+  width: 5%;
 }
 
+// modal弹窗
+.ant-modal {
+
+  // 解决控制台中aria-hidden的报错
+  [aria-hidden="true"][tabindex="0"] {
+    display: none;
+  }
+}
+
+.ant-modal-header {
+  border-bottom: none;
+  padding-bottom: 12px;
+}
+
+.ant-modal-body {
+  padding: 14px 24px 6px 24px;
+  font-size: 13.5px;
+
+  .ant-form-item {
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .ant-form-item-control {
+    padding-left: 10px;
+
+    .ant-form-item-control {
+      padding-left: 0;
+    }
+  }
+}
+
+.ant-modal-footer {
+  border-top: none;
+  padding-top: 12px;
+}
+
+//# 兼容外部样式
+
+// ueditor
+.edui-default {
+  .edui-editor {
+    // z-index: 2 !important;
+    font-size: 14px;
+    line-height: normal;
+    border-radius: 0;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+
+    pre {
+      overflow: unset;
+    }
+  }
+
+  .edui-editor-toolbarboxouter {
+    box-shadow: unset;
+    background-image: linear-gradient(to bottom, #ffffff, #fbfbfb);
+  }
+
+  .edui-editor-toolbarbox {
+    box-shadow: unset;
+  }
+
+  // 自定义图片按钮
+  .edui-for-image-button .edui-icon {
+    background-position: -380px 0px;
+  }
+}
+
+
 // ## 自定义模块 ##
 .ant-table {
 
@@ -615,4 +523,105 @@
       margin-right: 0;
     }
   }
+}
+
+// 搜索表单
+.search-form {
+  margin-bottom: 5px;
+
+  .ant-form-item {
+    margin-bottom: 10px;
+  }
+
+  .ant-form-item-control-wrapper {
+    min-width: 220px;
+  }
+
+  .search-btn {
+    .ant-form-item-control-wrapper {
+      width: auto;
+      min-width: auto;
+    }
+  }
+
+}
+
+// 列表页-操作按钮组
+.row-item-tab {
+  &>button {
+    margin-right: 5px;
+  }
+}
+
+// 无边框的modal
+.ant-modal-root {
+  &.noborder {
+    .ant-modal-header {
+      border-bottom: none;
+    }
+
+    .ant-modal-footer {
+      border-top: none;
+    }
+
+    .ant-modal-body {
+      padding: 5px 24px 15px 24px;
+    }
+
+  }
+}
+
+// 表格不允许换行
+.ant-table {
+
+  td,
+  th {
+    white-space: nowrap;
+  }
+
+}
+
+// Alert 警告提示 (banner)
+.ant-alert-banner {
+  margin-bottom: 15px;
+  padding-left: 40px;
+
+  .ant-alert-message {
+    font-size: @font-size-base;
+  }
+
+  // 黄色警告
+  &.ant-alert-warning {
+    // background-color: #fffcee;
+    // border: 1px solid #fff0c1;
+  }
+
+  // 标题+描述
+  &.ant-alert-with-description {
+    padding-left: 60px;
+
+    .ant-alert-icon {
+      font-size: 21px;
+      top: 16px;
+      left: 25px;
+    }
+
+    .ant-alert-message {
+      font-size: @font-size-base;
+      margin-bottom: 6px;
+    }
+
+    .ant-alert-description {
+      font-size: 12.5px;
+    }
+
+    .desc-item {
+      margin-bottom: 6px;
+    }
+  }
+
+}
+
+span.ant-radio+* {
+  color: rgba(0, 0, 0, .5)
 }