项目初始化

src/app/layout/pro/styles/app/_content.less

@@ -0,0 +1,58 @@
+@{alain-pro-prefix} {
+  &__main {
+    min-height: 100vh;
+    background-color: @alain-pro-main-bg;
+
+    > .ant-layout-header {
+      height: @alain-pro-header-height;
+      line-height: @alain-pro-header-height;
+    }
+
+    .router-ant();
+  }
+
+  &__page {
+    &-header {
+      &-wrapper {
+        position: relative;
+        display: block;
+        margin: -@alain-pro-content-margin -@alain-pro-content-margin 0;
+      }
+      &-content {
+        margin: @alain-pro-content-margin @alain-pro-content-margin 0;
+      }
+    }
+    &-grid {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 100%;
+      transition: 0.3s;
+      &-wide {
+        max-width: @alain-pro-wide;
+        margin: 0 auto;
+      }
+      &-no-spacing {
+        width: initial;
+        margin: -@alain-pro-content-margin -@alain-pro-content-margin 0;
+      }
+    }
+  }
+}
+
+@{alain-pro-prefix}__fetching {
+  &-icon {
+    display: none;
+  }
+  & {
+    @{alain-pro-prefix}__fetching-icon {
+      display: block;
+    }
+  }
+}
+
+@media screen and (max-width: @mobile-max) {
+  @{alain-pro-prefix}__page-header-content {
+    margin: @alain-pro-content-margin 10px 0;
+  }
+}

src/app/layout/pro/styles/app/_footer.less

@@ -0,0 +1,3 @@
+@{alain-pro-prefix}__footer {
+  padding: 0;
+}

src/app/layout/pro/styles/app/_header.less

@@ -0,0 +1,104 @@
+@header-prefix: ~'@{alain-pro-prefix}__header';
+
+@{header-prefix} {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: @alain-pro-header-height;
+  padding: 0 12px 0 0;
+  background: @alain-pro-header-bg;
+  box-shadow: @alain-pro-header-box-shadow;
+  &-logo {
+    padding: 0 24px;
+  }
+  &-right {
+    display: flex;
+    align-items: center;
+    justify-items: center;
+  }
+  &-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    height: @alain-pro-header-height;
+    padding: 0 12px;
+    line-height: @alain-pro-header-height;
+    cursor: pointer;
+    transition: all 0.3s;
+    > i,
+    &-icon {
+      // fix dropdown
+      font-size: @alain-pro-header-widgets-icon-fs !important;
+      transform: none !important;
+    }
+    &,
+    &-icon {
+      color: @alain-pro-header-color;
+    }
+    &:hover {
+      background: @alain-pro-header-hover-bg;
+      &,
+      @{header-prefix}-item-icon {
+        color: @alain-pro-header-hover-color;
+      }
+    }
+  }
+  &-trigger {
+    padding: 0 24px;
+    @{header-prefix}-item-icon {
+      font-size: 20px !important;
+    }
+  }
+  &-search {
+    &:hover {
+      background: transparent;
+    }
+  }
+  &-fixed {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 9;
+    width: 100%;
+    transition: width 0.2s;
+  }
+  &-hide {
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+}
+
+@media only screen and (max-width: @mobile-max) {
+  @{header-prefix} {
+    &-name {
+      display: none;
+    }
+    &-trigger {
+      padding: 0 12px;
+    }
+    &-logo {
+      position: relative;
+      padding-right: 12px;
+      padding-left: 12px;
+    }
+  }
+}
+
+layout-pro-header {
+  z-index: 1;
+}
+
+.layout-pro-header-rtl-mixin(@enabled) when(@enabled=true) {
+  [dir='rtl'] {
+    @{header-prefix} {
+      &-fixed {
+        right: inherit;
+        left: 0;
+      }
+    }
+  }
+}
+.layout-pro-header-rtl-mixin(@rtl-enabled);

src/app/layout/pro/styles/app/_menu.less

@@ -0,0 +1,68 @@
+@{alain-pro-prefix} {
+  &__menu {
+    display: block;
+    &-item {
+      &--disabled {
+        pointer-events: none;
+      }
+    }
+    &-only-icon {
+      @{alain-pro-prefix}__menu-item {
+        padding-right: 8px !important;
+        padding-left: 8px !important;
+        &:first-child {
+          padding-left: 0;
+        }
+      }
+      @{alain-pro-prefix}__menu-icon {
+        margin-right: 0;
+        font-size: @alain-pro-top-nav-only-icon-fs;
+      }
+    }
+    &-title {
+      position: relative;
+      &-badge {
+        display: flex;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        padding: 0;
+        font-size: 12px;
+        line-height: 18px;
+        background: @alain-pro-header-title-badge-bg;
+        border-radius: 50%;
+        > em {
+          color: @alain-pro-header-title-badge-color;
+          font-style: normal;
+        }
+      }
+    }
+    &-img {
+      width: @alain-pro-sider-menu-img-wh !important;
+      height: @alain-pro-sider-menu-img-wh !important;
+    }
+  }
+  &__side-nav {
+    @{alain-pro-prefix}__menu {
+      &-title {
+        display: flex;
+        align-items: center;
+        &-text {
+          flex: 1;
+        }
+      }
+    }
+    .@{ant-prefix}-menu-inline-collapsed {
+      @{alain-pro-prefix}__menu-title-badge {
+        position: absolute;
+        top: 0;
+        right: -16px;
+        width: 8px;
+        height: 8px;
+        > em {
+          display: none;
+        }
+      }
+    }
+  }
+}

src/app/layout/pro/styles/app/_sider.less

@@ -0,0 +1,148 @@
+@sider-prefix: ~'@{alain-pro-prefix}__sider';
+
+@{sider-prefix} {
+  position: relative;
+  z-index: 10;
+  display: block;
+  min-height: 100vh;
+  overflow: hidden;
+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+  &-logo {
+    position: relative;
+    display: block;
+    height: @alain-pro-header-height;
+    padding-left: ((@menu-collapsed-width - 32px) / 2);
+    overflow: hidden;
+    line-height: @alain-pro-header-height;
+    background: @alain-pro-header-logo-bg;
+    transition: all 0.3s;
+    img {
+      display: inline-block;
+      height: 32px;
+      vertical-align: middle;
+    }
+    h1 {
+      display: inline-block;
+      margin: 0 0 0 12px;
+      color: white;
+      font-weight: 600;
+      font-size: @alain-pro-logo-font-size;
+      font-family: @alain-pro-logo-font-family;
+      vertical-align: middle;
+      transition: all 0.3s;
+    }
+  }
+  &-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    @{alain-pro-prefix}__side-nav-wrap {
+      height: ~'calc(100vh - @{alain-pro-header-height})';
+      padding-bottom: 24px;
+      overflow-y: scroll;
+    }
+  }
+}
+
+// 小屏幕 drawer 配置信息
+@{alain-pro-prefix}__drawer {
+  .@{ant-prefix}-drawer {
+    &-wrapper-body {
+      height: 100%;
+      overflow: auto;
+    }
+    &-body {
+      height: 100vh;
+      padding: 0;
+      overflow-x: hidden;
+    }
+  }
+}
+
+// 当缩进时隐藏站点名称
+@{aside-collapsed-prefix} {
+  @{sider-prefix}-logo {
+    display: flex;
+    justify-content: center;
+    padding: 0;
+    h1 {
+      display: none;
+    }
+  }
+}
+
+@{alain-pro-prefix}__light {
+  @{sider-prefix} {
+    background-color: @alain-pro-light-color;
+    box-shadow: @alain-pro-light-slider-shadow;
+    &-logo {
+      background: @alain-pro-light-color;
+      box-shadow: 1px 1px 0 0 @border-color-split;
+      h1 {
+        color: @primary-color;
+      }
+    }
+    .@{ant-prefix}-menu-light {
+      border-right-color: transparent;
+    }
+  }
+}
+
+.alain-pro-sider-fixed-scroll-mixin(@mode) when(@mode='show') {
+  .scrollbar-mixin(~'@{ider-prefix}-fixed @{alain-pro-prefix}__side-nav-wrap');
+}
+
+.alain-pro-sider-fixed-scroll-mixin(@mode) when(@mode='hide') {
+  @{sider-prefix}-fixed @{alain-pro-prefix}__side-nav-wrap {
+    -webkit-overflow-scrolling: touch;
+    // IE
+    -ms-scroll-chaining: chained;
+    -ms-content-zooming: zoom;
+    -ms-scroll-rails: none;
+    -ms-content-zoom-limit-min: 100%;
+    -ms-content-zoom-limit-max: 500%;
+    -ms-scroll-snap-type: proximity;
+    -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%);
+    -ms-overflow-style: none;
+    // Firefox
+    scrollbar-width: none;
+    // Chrome
+    &::-webkit-scrollbar {
+      width: @alain-pro-sider-scrollbar-height;
+      height: @alain-pro-sider-scrollbar-width;
+    }
+    &::-webkit-scrollbar-track {
+      -webkit-box-shadow: inset 0 0 @alain-pro-sider-scrollbar-width @alain-pro-sider-scrollbar-track-color;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: @alain-pro-sider-scrollbar-thumb-color;
+    }
+  }
+}
+
+.alain-pro-sider-fixed-scroll-mixin(@alain-pro-sider-fixed-scroll-mode);
+
+.layout-pro-sider-rtl-mixin(@enabled) when(@enabled=true) {
+  [dir='rtl'] {
+    @{sider-prefix} {
+      &-logo {
+        padding-right: ((@menu-collapsed-width - 32px) / 2);
+        padding-left: 0;
+        h1 {
+          margin-right: 12px;
+          margin-left: 0;
+        }
+      }
+      &-fixed {
+        right: 0;
+        left: inherit;
+      }
+    }
+    @{aside-collapsed-prefix} {
+      @{sider-prefix}-logo {
+        padding: 0;
+      }
+    }
+  }
+}
+.layout-pro-sider-rtl-mixin(@rtl-enabled);

src/app/layout/pro/styles/app/_top-nav.less

@@ -0,0 +1,101 @@
+@top-nav-prefix: ~'@{alain-pro-prefix}__top-nav';
+
+@{top-nav-prefix} {
+  position: relative;
+  width: 100%;
+  height: @alain-pro-header-height;
+  padding: 0 12px 0 0;
+  box-shadow: @alain-pro-header-box-shadow;
+  transition: background 0.3s, width 0.2s;
+  @{alain-pro-prefix}__menu {
+    .@{ant-prefix}-menu {
+      display: flex;
+      align-items: center;
+      height: @alain-pro-header-height;
+      border: none;
+    }
+    &-wrap {
+      flex: 1;
+      padding-right: 8px;
+    }
+    &-item {
+      height: 100%;
+      .@{ant-prefix}-menu-submenu-title {
+        height: 100%;
+        padding: 0 12px;
+      }
+    }
+  }
+  &-main {
+    display: flex;
+    height: @alain-pro-header-height;
+    padding-left: 24px;
+    &-wide {
+      max-width: @alain-pro-wide;
+      margin: auto;
+      padding-left: 4px;
+    }
+    &-left {
+      display: flex;
+      flex: 1;
+    }
+  }
+  &-logo {
+    width: 165px;
+    h1 {
+      margin: 0 0 0 12px;
+      color: #fff;
+      font-size: 16px;
+    }
+  }
+  @{alain-pro-prefix}__menu-title-badge {
+    position: absolute;
+    top: -16px;
+    right: -16px;
+  }
+}
+
+@{alain-pro-prefix} {
+  &__dark {
+    @{top-nav-prefix} {
+      @{alain-pro-prefix}__header-item {
+        &,
+        &-icon {
+          color: @menu-dark-color;
+        }
+        &:hover,
+        .@{ant-prefix}-popover-open {
+          background: @menu-dark-item-active-bg;
+          @{alain-pro-prefix}__header-item {
+            &,
+            &-icon {
+              color: @menu-dark-highlight-color;
+            }
+          }
+        }
+      }
+    }
+  }
+  &__light {
+    @{top-nav-prefix} {
+      background-color: #fff;
+      h1 {
+        color: #002140;
+      }
+    }
+  }
+}
+
+.layout-pro-top-nav-rtl-mixin(@enabled) when(@enabled=true) {
+  [dir='rtl'] {
+    @{top-nav-prefix} {
+      &-logo {
+        h1 {
+          margin-right: 12px;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}
+.layout-pro-top-nav-rtl-mixin(@rtl-enabled);

src/app/layout/pro/styles/app/fix/_antd.less

@@ -0,0 +1,6 @@
+@layout-body-background: #f8f8f8;
+
+// Remoed card transition
+.@{ant-prefix}-card {
+  transition: none;
+}

src/app/layout/pro/styles/app/fix/_btn.less

@@ -0,0 +1,5 @@
+.btn-flat {
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}

src/app/layout/pro/styles/app/fix/_delon.less

@@ -0,0 +1,55 @@
+@{header-prefix}-item {
+  .@{ant-prefix}-badge-count {
+    position: absolute;
+    top: 24px;
+    right: 12px;
+  }
+}
+
+// full-content component
+@{full-content-prefix} {
+  &__opened {
+    layout-pro-header,
+    @{alain-pro-prefix}__sider,
+    reuse-tab {
+      display: none !important;
+    }
+  }
+  &__hidden-title {
+    page-header {
+      display: none !important;
+    }
+  }
+}
+
+// footer-toolbar component
+@{footer-toolbar-prefix} {
+  z-index: 99;
+  width: auto;
+  &__body {
+    @{alain-pro-prefix}__body {
+      margin-bottom: @layout-gutter + @footer-toolbar-height !important;
+    }
+  }
+}
+@{alain-pro-prefix}__menu-side {
+  @{footer-toolbar-prefix} {
+    left: @alain-pro-sider-menu-width;
+  }
+}
+@{alain-pro-prefix}__menu-top {
+  @{footer-toolbar-prefix} {
+    left: 0;
+  }
+}
+
+@{aside-collapsed-prefix} {
+  @{footer-toolbar-prefix} {
+    left: @menu-collapsed-width;
+  }
+}
+
+@{page-header-prefix} {
+  padding-right: @alain-pro-content-margin;
+  padding-left: @alain-pro-content-margin;
+}

src/app/layout/pro/styles/app/fix/_menu.less

@@ -0,0 +1,3 @@
+.@{ant-prefix}-dropdown-menu-item {
+  outline: none;
+}

src/app/layout/pro/styles/app/fix/_print.less

@@ -0,0 +1,3 @@
+@page {
+  size: a3;
+}

src/app/layout/pro/styles/app/fix/index.less

@@ -0,0 +1,8 @@
+@import './_antd.less';
+@import './_delon.less';
+
+// components
+@import './_btn.less';
+@import './_menu.less';
+
+@import './_print.less';

src/app/layout/pro/styles/app/index.less

@@ -0,0 +1,8 @@
+@import './_menu.less';
+@import './_content.less';
+@import './_header.less';
+@import './_top-nav.less';
+@import './_sider.less';
+@import './_footer.less';
+
+@import './fix/index.less';

src/app/layout/pro/styles/index.less

@@ -0,0 +1,4 @@
+@import './theme-default.less';
+
+@import './app/index.less';
+@import './widgets/index.less';

src/app/layout/pro/styles/theme-compact.less

@@ -0,0 +1,5 @@
+@import '~@delon/theme/theme-compact.less';
+@import './theme-default.less';
+
+@alain-pro-header-height: 56px;
+@alain-pro-header-widgets-icon-fs: 14px;

src/app/layout/pro/styles/theme-dark.less

@@ -0,0 +1,9 @@
+@import '~@delon/theme/theme-dark.less';
+@import './theme-default.less';
+
+@alain-pro-header-bg: @component-background;
+@alain-pro-header-logo-bg: @popover-background;
+@alain-pro-header-box-shadow: @shadow-1-down; // 0 1px 4px rgba(0, 21, 41, 0.08);
+@alain-pro-header-color: @text-color;
+@alain-pro-header-hover-color: #fff;
+@alain-pro-header-hover-bg: rgba(0, 0, 0, 0.025);

src/app/layout/pro/styles/theme-default.less

@@ -0,0 +1,53 @@
+@import '~@delon/theme/theme-default.less';
+
+// Optimization for NG-ALAIN theme system
+// 针对 NG-ALAIN 主题系统的优化
+@badge-enabled: false;
+
+// PRO
+@alain-pro-prefix: ~'.alain-pro';
+@aside-collapsed-prefix: ~'.aside-collapsed';
+@alain-pro-zindex: @zindex-base;
+@alain-pro-ease: cubic-bezier(0.25, 0, 0.15, 1);
+
+@alain-pro-header-height: 64px;
+@alain-pro-header-bg: #fff;
+@alain-pro-header-logo-bg: #002140;
+@alain-pro-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+@alain-pro-header-color: rgba(0, 0, 0, 0.65);
+@alain-pro-header-hover-color: #000;
+@alain-pro-header-hover-bg: rgba(0, 0, 0, 0.025);
+@alain-pro-header-search-width: 210px;
+@alain-pro-header-widgets-icon-fs: 16px;
+@alain-pro-header-title-badge-bg: @primary-color;
+@alain-pro-header-title-badge-color: #fff;
+
+@alain-pro-main-bg: @layout-body-background;
+
+@alain-pro-top-nav-only-icon-fs: 16px;
+
+@alain-pro-light-color: #fff;
+@alain-pro-light-slider-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+
+@alain-pro-logo-font-size: 20px;
+@alain-pro-logo-font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+@alain-pro-content-margin: 24px;
+@alain-pro-wide: 1200px;
+
+@alain-pro-sider-menu-width: 256px;
+@alain-pro-sider-menu-img-wh: 14px;
+
+/**
+ * 侧边栏固定时滚动条显示风格：
+ * - hide: 隐藏滚动条（默认）
+ * - show: 显示美化后滚动条
+ */
+@alain-pro-sider-fixed-scroll-mode: 'hide';
+@alain-pro-sider-scrollbar-width: 0;
+@alain-pro-sider-scrollbar-height: 0;
+@alain-pro-sider-scrollbar-track-color: transparent;
+@alain-pro-sider-scrollbar-thumb-color: transparent;
+
+@brand-bordered-color: rgba(24, 28, 33, 0.06);
+@brand-scroll-width: 20px;

src/app/layout/pro/styles/widgets/_bordered.less

@@ -0,0 +1,34 @@
+.brand {
+  // 让 `nz-row` & `nz-col` 包含有边框效果
+  &-bordered {
+    overflow: hidden;
+    border: 1px solid @brand-bordered-color;
+
+    > [class*='ant-col-']::before,
+    > [class*='ant-col-']::after {
+      position: absolute;
+      display: block;
+      content: '';
+    }
+
+    > [class*='ant-col-']::before {
+      right: 0;
+      bottom: -1px;
+      left: 0;
+      height: 0;
+      border-top: 1px solid @brand-bordered-color;
+    }
+
+    > [class*='ant-col-']::after {
+      top: 0;
+      bottom: 0;
+      left: -1px;
+      width: 0;
+      border-left: 1px solid @brand-bordered-color;
+    }
+  }
+  // 边框大小为 `2px`
+  &-border-width-2 {
+    border-width: 2px !important;
+  }
+}

src/app/layout/pro/styles/widgets/_brand.less

@@ -0,0 +1,27 @@
+.brand {
+  // 加载容器
+  &-page-loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    min-height: 200px;
+  }
+  // `position: absolute` 定位到右上角
+  &-top-right {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+  // `position: absolute` 定位到左上角
+  &-top-left {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+  }
+  // `nz-range-picker` 日期宽度
+  &-range-picker__date {
+    display: inline-block;
+    width: 240px;
+  }
+}

src/app/layout/pro/styles/widgets/_collapse.less

@@ -0,0 +1,13 @@
+.brand {
+  // 将 `nz-ollapse` 的 arrow 图标转化为右边
+  &-collapse-arrow-reverse {
+    .@{ant-prefix}-collapse > .@{ant-prefix}-collapse-item > .@{ant-prefix}-collapse-header {
+      padding-right: 40px;
+      padding-left: 12px;
+      .arrow {
+        right: 16px;
+        left: unset;
+      }
+    }
+  }
+}

src/app/layout/pro/styles/widgets/_search.less

@@ -0,0 +1,51 @@
+@header-search-prefix: ~'@{alain-pro-prefix}__header-search';
+
+@{header-search-prefix} {
+  display: flex;
+  .anticon-search {
+    font-size: 16px;
+    cursor: pointer;
+  }
+  &-input {
+    width: 0;
+    overflow: hidden;
+    background: transparent;
+    border-radius: 0;
+    transition: width 0.3s, margin-left 0.3s;
+    .@{ant-prefix}-select-selection {
+      background: transparent;
+    }
+    input {
+      padding-right: 0;
+      padding-left: 0;
+      background: transparent;
+      border: 0;
+      outline: none;
+      box-shadow: none;
+    }
+    &,
+    &:hover,
+    &:focus {
+      border-bottom: 1px solid @border-color-base;
+    }
+  }
+  &-show {
+    &:hover {
+      background: none !important;
+    }
+    @{header-search-prefix}-input {
+      width: @alain-pro-header-search-width;
+      margin-left: 8px;
+    }
+  }
+}
+
+@{alain-pro-prefix}__dark {
+  @{alain-pro-prefix}__top-nav {
+    @{header-search-prefix}-show {
+      .@{ant-prefix}-input {
+        color: #fff;
+      }
+    }
+  }
+}

src/app/layout/pro/styles/widgets/_setting-drawer.less

@@ -0,0 +1,53 @@
+@{setting-drawer-prefix} {
+  &__handle-opened {
+    right: 300px !important;
+  }
+
+  &__blockChecbox {
+    display: flex;
+    &-item {
+      position: relative;
+      margin-right: 16px;
+      // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+      border-radius: @border-radius-base;
+      cursor: pointer;
+      img {
+        width: 48px;
+      }
+    }
+    &-selectIcon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      padding-top: 15px;
+      padding-left: 24px;
+      color: @primary-color;
+      font-weight: bold;
+      font-size: 14px;
+    }
+  }
+
+  &__handle {
+    top: 114px;
+    width: 32px;
+    height: 32px;
+    background: rgba(0, 0, 0, 0.38);
+    &-icon {
+      font-size: 16px;
+    }
+  }
+}
+
+.layout-pro-setting-drawer-rtl-mixin(@enabled) when(@enabled=true) {
+  @{setting-drawer-prefix}-rtl {
+    @{setting-drawer-prefix} {
+      &__handle-opened {
+        right: inherit !important;
+        left: 300px !important;
+      }
+    }
+  }
+}
+.layout-pro-setting-drawer-rtl-mixin(@rtl-enabled);

src/app/layout/pro/styles/widgets/index.less

@@ -0,0 +1,7 @@
+// For pro brand style
+@import './_brand.less';
+
+@import './_setting-drawer.less';
+@import './_search.less';
+@import './_bordered.less';
+@import './_collapse.less';