@jetlinks-web/components 2.0.30 → 2.0.32

package/lib/ProLayout/Basic/BasicLayout.less

@@ -0,0 +1,66 @@
+@import '../style/default.less';
+
+.@{basicLayout-prefix-cls} {
+  // BFC
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100%;
+
+  .@{ant-prefix}-layout-header {
+    &.@{ant-prefix}-pro-fixed-header {
+      position: fixed;
+      top: 0;
+    }
+  }
+
+  &-content {
+    position: relative;
+    margin: 24px;
+
+    .@{ant-prefix}-pro-page-container {
+      margin: -24px -24px 0;
+    }
+
+    &-disable-margin {
+      margin: 0;
+
+      .@{ant-prefix}-pro-page-container {
+        margin: 0;
+      }
+    }
+
+    > .@{ant-prefix}-layout {
+      max-height: 100%;
+    }
+  }
+
+  // children should support fixed
+  .@{basicLayout-prefix-cls}-is-children.@{basicLayout-prefix-cls}-fix-siderbar {
+    height: 100vh;
+    overflow: hidden;
+    transform: rotate(0);
+  }
+
+  .@{basicLayout-prefix-cls}-has-header {
+    // tech-page-container
+    .tech-page-container {
+      height: calc(100vh - @pro-layout-header-height);
+    }
+
+    .@{basicLayout-prefix-cls}-is-children.@{basicLayout-prefix-cls}-has-header {
+      .tech-page-container {
+        height: calc(100vh - @pro-layout-header-height -
+        @pro-layout-header-height);
+      }
+
+      .@{basicLayout-prefix-cls}-is-children {
+        min-height: calc(100vh - @pro-layout-header-height);
+
+        &.@{basicLayout-prefix-cls}-fix-siderbar {
+          height: calc(100vh - @pro-layout-header-height);
+        }
+      }
+    }
+  }
+}

package/lib/ProLayout/Basic/Header.js

@@ -59,6 +59,7 @@ var _default2 = exports.default = (0, _vue.defineComponent)({
     var className = (0, _vue.computed)(function () {
       return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls.value, "-fixed-header"), needFixedHeader.value), "".concat(prefixCls.value, "-top-menu"), isTop.value);
     });
+    var headerMenuRender = (0, _vue.computed)(function () {});
     var renderContent = function renderContent() {
       var defaultDom = (0, _vue.createVNode)(_TopHeader.TopNavHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({
         "theme": theme.value,

package/lib/ProLayout/Basic/Header.less

@@ -0,0 +1,8 @@
+@import '../style/default.less';
+
+@pro-layout-fixed-header-prefix-cls: ~'@{ant-prefix}-pro-fixed-header';
+
+.@{pro-layout-fixed-header-prefix-cls} {
+    z-index: 9;
+    width: 100%;
+}

package/lib/ProLayout/PageContainer/index.less

@@ -0,0 +1,103 @@
+@import '../style/default.less';
+
+@pro-layout-page-container: ~'@{ant-prefix}-pro-page-container';
+
+.@{pro-layout-page-container}-children-content {
+    margin: 24px 24px 0;
+}
+
+.@{pro-layout-page-container} {
+    &-warp {
+        background-color: @component-background;
+        .@{ant-prefix}-tabs-bar {
+            margin: 0;
+        }
+    }
+    &-ghost {
+        .@{pro-layout-page-container}-warp {
+            background-color: @component-background;
+        }
+    }
+}
+
+.@{pro-layout-page-container}-main {
+    .@{pro-layout-page-container}-detail {
+        display: flex;
+    }
+
+    .@{pro-layout-page-container}-row {
+        display: flex;
+        width: 100%;
+    }
+
+    .@{pro-layout-page-container}-title-content {
+        margin-bottom: 16px;
+    }
+
+    .@{pro-layout-page-container}-title,
+    .@{pro-layout-page-container}-content {
+        flex: auto;
+    }
+
+    .@{pro-layout-page-container}-extraContent,
+    .@{pro-layout-page-container}-main {
+        flex: 0 1 auto;
+    }
+
+    .@{pro-layout-page-container}-main {
+        width: 100%;
+    }
+
+    .@{pro-layout-page-container}-title {
+        margin-bottom: 16px;
+    }
+
+    .@{pro-layout-page-container}-logo {
+        margin-bottom: 16px;
+    }
+
+    .@{pro-layout-page-container}-extraContent {
+        min-width: 242px;
+        margin-left: 88px;
+        text-align: right;
+    }
+}
+
+@media screen and (max-width: @screen-xl) {
+    .@{pro-layout-page-container}-main {
+        .@{pro-layout-page-container}-extraContent {
+            margin-left: 44px;
+        }
+    }
+}
+
+@media screen and (max-width: @screen-lg) {
+    .@{pro-layout-page-container}-main {
+        .@{pro-layout-page-container}-extraContent {
+            margin-left: 20px;
+        }
+    }
+}
+
+@media screen and (max-width: @screen-md) {
+    .@{pro-layout-page-container}-main {
+        .@{pro-layout-page-container}-row {
+            display: block;
+        }
+
+        .@{pro-layout-page-container}-action,
+        .@{pro-layout-page-container}-extraContent {
+            margin-left: 0;
+            text-align: left;
+        }
+    }
+}
+
+@media screen and (max-width: @screen-sm) {
+    .@{pro-layout-page-container}-detail {
+        display: block;
+    }
+    .@{pro-layout-page-container}-extraContent {
+        margin-left: 0;
+    }
+}

package/lib/ProLayout/SiderMenu/index.less

@@ -0,0 +1,231 @@
+@import '../style/default.less';
+
+@pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider';
+
+@nav-header-height: @pro-layout-header-height;
+
+.@{pro-layout-sider-menu-prefix-cls} {
+    position: relative;
+    background-color: @layout-sider-background;
+    border-right: 0;
+    // FIXME: 临时修正(可能不会做兼容)
+    z-index: 20;
+
+    // 这里关掉了动画，不然使用无法兼容
+    .@{ant-prefix}-menu {
+        background: transparent;
+    }
+
+    &.@{ant-prefix}-layout-sider-light {
+        .@{ant-prefix}-menu-item a {
+            color: @heading-color;
+        }
+        .@{ant-prefix}-menu-item-selected a,
+        .@{ant-prefix}-menu-item a:hover {
+            color: @primary-color;
+        }
+    }
+
+    &-logo {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 16px 16px;
+        cursor: pointer;
+        transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+        > a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 32px;
+        }
+
+        img {
+            display: inline-block;
+            height: 32px;
+            vertical-align: middle;
+        }
+
+        h1 {
+            display: inline-block;
+            height: 32px;
+            margin: 0 0 0 12px;
+            color: white;
+            font-weight: 600;
+            font-size: 18px;
+            line-height: 32px;
+            vertical-align: middle;
+            animation: pro-layout-title-hide 0.3s;
+        }
+    }
+
+    &-logo-card {
+      padding: 16px 0;
+      justify-content: center;
+    }
+
+    &-extra {
+        margin-bottom: 16px;
+        padding: 0 16px;
+        &-no-logo {
+            margin-top: 16px;
+        }
+    }
+
+    &-menu {
+        position: relative;
+        z-index: 10;
+        min-height: 100%;
+        box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    }
+
+    .@{ant-prefix}-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.15);
+            border-radius: 3px;
+            box-shadow: inset 0 0 5px rgba(37, 37, 37, 0.05);
+        }
+
+        /* 滚动条滑块 */
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 3px;
+            box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
+        }
+    }
+
+    &.@{ant-prefix}-layout-sider-collapsed {
+        .@{ant-prefix}-menu-inline-collapsed {
+            width: 48px;
+        }
+        .@{pro-layout-sider-menu-prefix-cls} {
+            &-logo {
+                padding: 16px 8px;
+            }
+        }
+    }
+
+    &.@{ant-prefix}-layout-sider.@{pro-layout-sider-menu-prefix-cls}-fixed {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 99; // react pro-components: z-index: 100;
+        height: 100%;
+        overflow: auto;
+        overflow-x: hidden;
+        box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+        > .@{ant-prefix}-menu-root {
+            :not(.@{pro-layout-sider-menu-prefix-cls}-link-menu) {
+                height: ~'calc(100vh - @{nav-header-height})';
+                overflow-y: auto;
+            }
+        }
+    }
+
+    &-light {
+        background-color: @component-background;
+        box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+
+        .@{ant-prefix}-layout-sider-children {
+            ::-webkit-scrollbar-track {
+                background: rgba(0, 0, 0, 0.06);
+                border-radius: 3px;
+                box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
+            }
+
+            /* 滚动条滑块 */
+            ::-webkit-scrollbar-thumb {
+                background: rgba(0, 0, 0, 0.12);
+                border-radius: 3px;
+                box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
+            }
+        }
+
+        .@{pro-layout-sider-menu-prefix-cls}-logo {
+            h1 {
+                color: @primary-color;
+            }
+        }
+        .@{ant-prefix}-menu-light {
+            border-right-color: transparent;
+        }
+
+        .@{pro-layout-sider-menu-prefix-cls}-collapsed-button {
+            border-top: @border-width-base @border-style-base
+                @border-color-split;
+        }
+    }
+
+    &-icon {
+        width: 14px;
+        vertical-align: baseline;
+    }
+
+    &-links {
+        width: 100%;
+        ul.@{ant-prefix}-menu-root {
+            height: auto;
+        }
+    }
+
+    &-collapsed-button {
+        border-top: @border-width-base @border-style-base rgba(0, 0, 0, 0.25);
+        .anticon {
+            font-size: 16px;
+        }
+    }
+
+    .top-nav-menu li.@{ant-prefix}-menu-item {
+        height: 100%;
+        line-height: 1;
+    }
+    .drawer .drawer-content {
+        background: @layout-sider-background;
+    }
+}
+
+// 修正菜单 collapsed 时，icon 与 title 的间距
+.@{ant-prefix}-pro-menu-item {
+    .anticon + .@{ant-prefix}-pro-menu-item-title {
+        margin-left: 10px;
+    }
+}
+
+.sider-app-menus {
+  width: 100px;
+  background-color: #fff;
+  cursor: pointer;
+  padding: 6px;
+  transition: all .3s;
+  border-radius: 4px;
+  color: #333;
+
+  &:hover {
+    background-color: #efefef;
+  }
+}
+
+@keyframes pro-layout-title-hide {
+    0% {
+        display: none;
+        opacity: 0;
+    }
+    80% {
+        display: none;
+        opacity: 0;
+    }
+    100% {
+        display: unset;
+        opacity: 1;
+    }
+}

package/lib/ProLayout/TopHeader/index.js

@@ -44,6 +44,12 @@ var baseHeaderProps = exports.baseHeaderProps = (0, _objectSpread2.default)((0,
   },
   menuHeaderRender: _SiderMenu.siderMenuProps.menuHeaderRender,
   menuItemRender: _SiderMenu.siderMenuProps.menuItemRender,
+  topHeaderMenuRender: {
+    type: [Function, Object, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
   subMenuItemRender: _SiderMenu.siderMenuProps.subMenuItemRender,
   rightContentRender: {
     type: [Object, Function],
@@ -91,6 +97,7 @@ var TopNavHeader = exports.TopNavHeader = function TopNavHeader(props) {
     onSelect = props.onSelect,
     contentWidth = props.contentWidth,
     rightContentRender = props.rightContentRender,
+    topHeaderMenuRender = props.topHeaderMenuRender,
     layout = props.layout,
     menuData = props.menuData,
     mode = props.mode;
@@ -141,7 +148,7 @@ var TopNavHeader = exports.TopNavHeader = function TopNavHeader(props) {
       flex: 1
     },
     "class": "".concat(prefixCls, "-menu")
-  }, [(0, _vue.createVNode)(_BaseMenu.default, {
+  }, [topHeaderMenuRender ? topHeaderMenuRender() : (0, _vue.createVNode)(_BaseMenu.default, {
     "prefixCls": propPrefixCls,
     "locale": props.locale || context.locale,
     "theme": props.theme,

package/lib/ProLayout/TopHeader/index.less

@@ -0,0 +1,174 @@
+@import '../style/default.less';
+
+@top-nav-header-prefix-cls: ~'@{ant-prefix}-pro-top-nav-header';
+@pro-layout-global-header-prefix-cls: ~'@{ant-prefix}-pro-global-header';
+
+@pro-layout-header-bg: @component-background;
+@pro-layout-header-hover-bg: @component-background;
+@pro-layout-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+.@{pro-layout-global-header-prefix-cls} {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 16px;
+    background: @pro-layout-header-bg;
+    box-shadow: @pro-layout-header-box-shadow;
+    > * {
+        height: 100%;
+    }
+
+    &-collapsed-button {
+        display: flex;
+        align-items: center;
+        margin-left: 16px;
+        font-size: 20px;
+    }
+
+    &-layout {
+        &-mix {
+            background-color: @layout-sider-background;
+            .@{pro-layout-global-header-prefix-cls}-logo {
+                h1 {
+                    color: @btn-primary-color;
+                }
+            }
+            .anticon {
+                color: @btn-primary-color;
+            }
+        }
+    }
+
+    &-logo {
+        position: relative;
+        overflow: hidden;
+        a {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            img {
+                height: 28px;
+            }
+            h1 {
+                height: 32px;
+                margin: 0 0 0 8px;
+                margin: 0 0 0 12px;
+                color: @primary-color;
+                font-weight: 600;
+                font-size: 18px;
+                line-height: 32px;
+            }
+        }
+    }
+
+    &-menu {
+        .anticon {
+            margin-right: 8px;
+        }
+        .@{ant-prefix}-dropdown-menu-item {
+            min-width: 160px;
+        }
+    }
+
+    .dark {
+        height: @pro-layout-header-height;
+        .action {
+            color: rgba(255, 255, 255, 0.85);
+            > i {
+                color: rgba(255, 255, 255, 0.85);
+            }
+            &:hover,
+            &.opened {
+                background: @primary-color;
+            }
+            .@{ant-prefix}-badge {
+                color: rgba(255, 255, 255, 0.85);
+            }
+        }
+    }
+}
+
+.@{top-nav-header-prefix-cls} {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
+    transition: background 0.3s, width 0.2s;
+
+    .@{ant-prefix}-menu {
+        background: transparent;
+    }
+
+    &.light {
+        background-color: @component-background;
+        .@{top-nav-header-prefix-cls}-logo {
+            h1 {
+                color: @heading-color;
+            }
+        }
+        .anticon {
+            color: inherit;
+        }
+    }
+
+    &-main {
+        display: flex;
+        height: 100%;
+        padding-left: 16px;
+        &-left {
+            display: flex;
+            min-width: 192px;
+        }
+    }
+
+    .anticon {
+        color: @btn-primary-color;
+    }
+
+    &-logo {
+        position: relative;
+        min-width: 165px;
+        height: 100%;
+        overflow: hidden;
+
+        img {
+            display: inline-block;
+            height: 32px;
+            vertical-align: middle;
+        }
+
+        h1 {
+            display: inline-block;
+            margin: 0 0 0 12px;
+            color: @btn-primary-color;
+            font-weight: 600;
+            font-size: 16px;
+            vertical-align: top;
+        }
+    }
+
+    &-menu {
+        min-width: 0;
+
+        .@{ant-prefix}-menu.@{ant-prefix}-menu-horizontal {
+            height: 100%;
+            border: none;
+
+            .@{ant-prefix}-menu-item {
+                height: 100%;
+
+                .@{ant-prefix}-badge {
+                    color: unset;
+                }
+            }
+        }
+    }
+}
+
+// replace sub.item
+.@{ant-prefix}-pro-menu-popup {
+    .@{ant-prefix}-badge {
+        color: unset;
+    }
+}

package/lib/ProLayout/style/default.less

@@ -0,0 +1,4 @@
+@import 'ant-design-vue/es/style/themes/index.less';
+
+@basicLayout-prefix-cls: ~'@{ant-prefix}-pro-basicLayout';
+@pro-layout-header-height: 48px;

package/lib/ProLayout/style/style.less

@@ -0,0 +1,7 @@
+@import './default.less';
+
+@import '../Basic/BasicLayout.less';
+@import '../Basic/Header.less';
+@import '../PageContainer/index.less';
+@import '../SiderMenu/index.less';
+@import '../TopHeader/index.less';

package/lib/ProTable/style/index.css

@@ -0,0 +1,69 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.jtable-body-spin {
+  min-height: 100%;
+  width: 100%;
+  padding: 16px 24px 24px;
+  background-color: #fff;
+}
+.jtable-body-spin .ant-spin-nested-loading {
+  height: 100%;
+}
+.jtable-body-spin .ant-spin-nested-loading .ant-spin-container {
+  height: 100%;
+}
+.jtable-body-spin .jtable-body {
+  width: 100%;
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.jtable-body-spin .jtable-body .jtable-body-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right .jtable-body-header-right-button .right-button-icon {
+  font-size: 16px;
+  color: #d9d9d9;
+}
+.jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right .jtable-body-header-right-button .ant-radio-button-wrapper {
+  padding: 0 8px;
+}
+.jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right .jtable-body-header-right-button .ant-radio-button-wrapper-checked .right-button-icon {
+  color: #1890ff;
+}
+.jtable-body-spin .jtable-body .jtable-content {
+  flex: 1;
+  padding: 16px 0;
+}
+.jtable-body-spin .jtable-body .jtable-content .jtable-alert {
+  margin-bottom: 16px;
+}
+.jtable-body-spin .jtable-body .jtable-content .jtable-card .jtable-card-items {
+  display: grid;
+  grid-gap: 26px;
+}
+.jtable-body-spin .jtable-body .jtable-content .jtable-card .jtable-card-items .jtable-card-item {
+  display: flex;
+  min-width: 0;
+}
+.jtable-body-spin .jtable-body .jtable-pagination {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+.jtable-body-spin .jtable-body .j-table-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10% 0;
+}