zmdms-webui 2.2.6 → 2.2.7

package/dist/es/applayoutheader/setting/userInfo.js

@@ -2,6 +2,7 @@ import { __assign, __awaiter, __generator } from '../../_virtual/_tslib.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useContext, useState, useMemo } from 'react';
 import { LayoutHeaderContext } from '../LayoutHeaderContext.js';
+import { useLatest } from 'ahooks';
 import LogoutOutlined from '../../node_modules/@ant-design/icons/es/icons/LogoutOutlined.js';
 import UnlockOutlined from '../../node_modules/@ant-design/icons/es/icons/UnlockOutlined.js';
 import UserOutlined from '../../node_modules/@ant-design/icons/es/icons/UserOutlined.js';
@@ -11,6 +12,7 @@ var UserInfo = function (_a) {
     var logout = _a.logout, updatePassword = _a.updatePassword;
     var userInfo = useContext(LayoutHeaderContext).userInfo;
     var _b = useState(false), spinning = _b[0], setSpinning = _b[1];
+    var logoutLatest = useLatest(logout);
     var items = useMemo(function () {
         var items = [
             {
@@ -20,11 +22,11 @@ var UserInfo = function (_a) {
                             switch (_a.label) {
                                 case 0:
                                     setSpinning(true);
-                                    if (!logout) return [3 /*break*/, 4];
+                                    if (!logoutLatest.current) return [3 /*break*/, 4];
                                     _a.label = 1;
                                 case 1:
                                     _a.trys.push([1, 3, , 4]);
-                                    return [4 /*yield*/, logout()];
+                                    return [4 /*yield*/, logoutLatest.current()];
                                 case 2:
                                     _a.sent();
                                     return [3 /*break*/, 4];
@@ -55,7 +57,7 @@ var UserInfo = function (_a) {
             ]);
         }
         return items;
-    }, [updatePassword]);
+    }, [updatePassword, logoutLatest]);
     return (jsxs(Fragment, { children: [jsx(Dropdown, __assign({ menu: { items: items }, trigger: ["click"], placement: "bottomLeft" }, { children: jsxs("div", __assign({ className: "user-operation" }, { children: [jsx(UserOutlined, {}), jsx("span", { children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.realName })] })) })), spinning && jsx(Spin, { spinning: true, tip: "\u9000\u51FA\u767B\u5F55\u4E2D", className: "logout-spin" })] }));
 };
 

package/dist/es/applayoutsider/menu/SearchInput.js

@@ -7,10 +7,11 @@ import { MENU_SEARCH_KEY } from './constants.js';
 import MemoInput from '../../input/input.js';
 import SearchOutlined from '../../node_modules/@ant-design/icons/es/icons/SearchOutlined.js';
 
-var SearchInput = function () {
-    var _a = useState("菜单搜索"), placeholderText = _a[0], setPlaceholderText = _a[1];
-    var _b = useState(), searchValue = _b[0], setSearchValue = _b[1];
-    var _c = useContext(LayoutMenuContext), userSubMenus = _c.userSubMenus, setMainMenuSelectedKeys = _c.setMainMenuSelectedKeys, setInnerUserSubMenus = _c.setInnerUserSubMenus;
+var SearchInput = function (_a) {
+    var setVisible = _a.setVisible;
+    var _b = useState("菜单搜索"), placeholderText = _b[0], setPlaceholderText = _b[1];
+    var _c = useState(), searchValue = _c[0], setSearchValue = _c[1];
+    var _d = useContext(LayoutMenuContext), userSubMenus = _d.userSubMenus, setMainMenuSelectedKeys = _d.setMainMenuSelectedKeys, setInnerUserSubMenus = _d.setInnerUserSubMenus;
     var onSearch = useMemoizedFn(function () {
         if (!searchValue) {
             return;
@@ -32,6 +33,7 @@ var SearchInput = function () {
                 }
             });
         });
+        setVisible(true);
         setMainMenuSelectedKeys === null || setMainMenuSelectedKeys === void 0 ? void 0 : setMainMenuSelectedKeys([MENU_SEARCH_KEY]);
         setInnerUserSubMenus(function (pre) {
             var _a;

package/dist/es/applayoutsider/menu/index.js

@@ -27,7 +27,7 @@ var MenuCom = function (props) {
         var _a;
         (_a = subMenu.current) === null || _a === void 0 ? void 0 : _a.setVisible(false);
     }, []);
-    return (jsxs("div", __assign({ className: "zmdms-menu", onMouseLeave: onMouseLeave }, { children: [jsx(Logo, { logo: logo, showLine: visible && !hideSubMenuBg, style: logoStyle }), isShowSearchInput && jsx(SearchInput, {}), jsx(MainMenu, { onMouseEnter: onMouseEnter, addTab: addTab, getPrefixByAppId: getPrefixByAppId, subMenu: subMenu, hideSubMenuBg: hideSubMenuBg, menuItemLine: menuItemLine }), jsx(SubMenu, { ref: subMenu, marginLeft: width, subMenuWidth: subMenuWidth, layoutSiderRef: layoutSiderRef, addTab: addTab, getPrefixByAppId: getPrefixByAppId, subMenuLogo: subMenuLogo, visible: visible, setVisible: setVisible, defaultFixed: defaultFixed, hideSubMenuBg: hideSubMenuBg, subMenuItemLine: subMenuItemLine, openOnlyHasSubmenus: openOnlyHasSubmenus })] })));
+    return (jsxs("div", __assign({ className: "zmdms-menu", onMouseLeave: onMouseLeave }, { children: [jsx(Logo, { logo: logo, showLine: visible && !hideSubMenuBg, style: logoStyle }), isShowSearchInput && jsx(SearchInput, { setVisible: setVisible }), jsx(MainMenu, { onMouseEnter: onMouseEnter, addTab: addTab, getPrefixByAppId: getPrefixByAppId, subMenu: subMenu, hideSubMenuBg: hideSubMenuBg, menuItemLine: menuItemLine }), jsx(SubMenu, { ref: subMenu, marginLeft: width, subMenuWidth: subMenuWidth, layoutSiderRef: layoutSiderRef, addTab: addTab, getPrefixByAppId: getPrefixByAppId, subMenuLogo: subMenuLogo, visible: visible, setVisible: setVisible, defaultFixed: defaultFixed, hideSubMenuBg: hideSubMenuBg, subMenuItemLine: subMenuItemLine, openOnlyHasSubmenus: openOnlyHasSubmenus })] })));
 };
 var Menu = memo(MenuCom);
 

package/dist/es/dynamicsetting/dynamicDrawer.js

@@ -118,7 +118,7 @@ var DynamicDrawer = function (props, ref) {
                 return __spreadArray(__spreadArray(__spreadArray([], leftList, true), middleList, true), rightList, true);
             });
         };
-    }, [setTempDynamicList, isDimensionPriority]);
+    }, [setTempDynamicList]);
     // 确认
     var onSureHandle = function () {
         onSure && onSure(tempDynamicList);

package/dist/less/components/Alert/style/index.less

@@ -0,0 +1,53 @@
+.zt-alert {
+  border-radius: @border-radius;
+  border: none;
+  > .anticon {
+    font-size: 16px;
+    margin-right: 10px;
+  }
+  &.ant-alert-with-description {
+    padding: 8px 15px;
+    > .anticon {
+      margin-top: 2px;
+      font-size: 24px;
+    }
+  }
+  &.zt-alert--margin-top {
+    margin-top: @margin-base;
+  }
+  &.zt-alert--margin-bottom {
+    margin-bottom: @margin-base;
+  }
+  &.ant-alert-success {
+    background-color: @active-color;
+    color: #fff;
+    .anticon {
+      color: #fff;
+    }
+    .ant-alert-message {
+      color: #fff;
+    }
+  }
+  &.ant-alert-error {
+    background-color: @stress-color;
+    color: #fff;
+    .anticon {
+      color: #fff;
+      margin-top: 1px;
+    }
+    .ant-alert-message {
+      color: #fff;
+    }
+  }
+  &.ant-alert-info,
+  &.ant-alert-warning {
+    background-color: @global-color;
+    color: @global-text-color;
+    .anticon {
+      color: @global-text-color;
+    }
+    .ant-alert-message {
+      color: @global-text-color;
+    }
+  }
+}

package/dist/less/components/Alert/style/style.less

@@ -0,0 +1,4 @@
+@import "antd/lib/alert/style/index.less";
+
+@import "../../../styles/default.less";
+@import "./index.less";

package/dist/less/components/AppLayout/style/index.less

@@ -0,0 +1,546 @@
+.zmdms-container {
+  background-color: @content-bg;
+  .zmdms-sider {
+    background-color: @primary-color;
+    // background-image: url("../../assets/img/common/menu_bg.jpg");
+    background-size: 100% auto;
+    z-index: 102;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  .zmdms-content {
+    background-color: @content-bg;
+  }
+  // 头部内容
+  .zmdms-content--header {
+    padding: 0;
+    background: @bg-white;
+    height: @header-height;
+    line-height: @header-height;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 10px;
+    .ant-tabs {
+      flex: 1;
+      margin-top: 8px;
+      width: calc(100% - 350px);
+      .ant-tabs-tab {
+        > div {
+          padding: 0;
+        }
+        a {
+          display: inline-block;
+          // padding: 0 5px 0 10px;
+          padding: 0 10px 0 20px;
+          color: #768696;
+        }
+      }
+      .ant-tabs-nav {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .zmdms-content--content {
+    height: calc(100vh - @header-height);
+    position: relative;
+  }
+  .zmdms-content--header-info {
+    display: flex;
+    height: 48px;
+    color: @_color_black_1;
+    max-width: 350px;
+    .full-screen {
+      width: 36px;
+      text-align: center;
+      cursor: pointer;
+    }
+    .user-operation {
+      padding: 0 12px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      &:hover {
+        background-color: rgb(247, 247, 247);
+      }
+      > span:last-child {
+        color: @_color_black_1;
+        margin-left: 8px;
+        display: inline-block;
+        width: 70px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.zmdms-menu {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  // logo容器
+  .zmdms-logo {
+    display: block;
+    padding: 9px 0 5px 0;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    &.zmdms-logo--line {
+      position: relative;
+      z-index: 1000;
+      &::after {
+        content: "";
+        position: absolute;
+        width: 1px;
+        height: 29px;
+        background: #505cbe;
+        right: -0.5px;
+      }
+    }
+    > img {
+      margin: 0 auto;
+      display: block;
+      width: 78px;
+    }
+  }
+  // 搜索框
+  .zmdms-menu--search {
+    background-color: rgba(91, 138, 246, 0.4);
+    position: relative;
+    > input {
+      background-color: rgba(91, 138, 246, 0.4);
+      border: none;
+      color: #fff;
+      line-height: 36px;
+      height: 36px;
+      font-size: @font-size-text;
+      &::placeholder {
+        color: #fff;
+        font-size: @font-size-text;
+      }
+    }
+    .zmdms-menu--search__icon {
+      position: absolute;
+      right: 0;
+      top: 3px;
+      color: #fff;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+    }
+  }
+  // 菜单著容器
+  .zmdms-menu--main {
+    background: transparent;
+    border-right: none;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    // 无背景
+    &.zmdms-menu--main-hide-bg {
+      .ant-menu-item-selected {
+        background: #1566d2 !important;
+      }
+    }
+    // 菜单换行显示
+    &.zmdms-menu--main-item-line {
+      .ant-menu-item {
+        min-height: 36px;
+        height: auto !important;
+        line-height: 20px !important;
+        .ant-menu-title-content {
+          width: 100%;
+          word-wrap: break-word;
+          white-space: pre-wrap;
+          display: inline-block;
+          height: auto !important;
+          text-overflow: unset !important;
+        }
+      }
+    }
+    > .ant-menu-submenu {
+      color: @text-white;
+      &.ant-menu-submenu-open {
+        > .ant-menu-submenu-title {
+          color: #fff;
+        }
+      }
+      > .ant-menu-submenu-title {
+        padding: 0;
+        margin: 0;
+        height: 36px;
+        line-height: 36px;
+        display: flex;
+        align-items: center;
+        background-color: #5b76f5;
+        background-color: rgba(91, 138, 246, 0.4);
+        backdrop-filter: blur(4px);
+        font-size: @font-size-text;
+        color: rgba(255, 255, 255, 0.65);
+        .ant-menu-submenu-arrow {
+          color: rgba(255, 255, 255, 0.65);
+          right: 6px;
+        }
+        .ant-menu-title-content {
+          flex: none;
+          width: 88%;
+        }
+        &:hover {
+          color: @text-white;
+          .ant-menu-submenu-arrow {
+            color: @text-white;
+          }
+        }
+      }
+      .ant-menu-sub.ant-menu-inline {
+        background: transparent;
+      }
+      .ant-menu-sub {
+        > .ant-menu-item {
+          font-size: @font-size-text;
+          height: @menu-height;
+          line-height: @menu-height;
+          margin: 0;
+          color: @menu-color;
+          display: flex;
+          align-items: center;
+          // padding-left: 15px !important;
+          a {
+            color: inherit;
+          }
+          &:active {
+            background: transparent;
+          }
+          &:hover {
+            color: @text-white;
+          }
+          &:not(:last-child) {
+            margin-bottom: 0;
+          }
+          &.ant-menu-item-selected {
+            // UI审查 1566d2 => 5b76f5
+            background: #5b76f5;
+            color: @text-white;
+            width: 100%;
+            &::after {
+              border-right: none;
+            }
+          }
+        }
+      }
+    }
+    /* 浏览器滚动条样式 */
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 4px;
+    }
+    &::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0);
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: @menu-scrollbar-bg;
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: @menu-scrollbar-bg;
+    }
+    > .ant-menu-item {
+      font-size: @font-size-text;
+      height: @menu-height;
+      line-height: @menu-height;
+      margin: 0;
+      color: @menu-color;
+      display: flex;
+      align-items: center;
+      a {
+        color: inherit;
+      }
+      &:active {
+        background: transparent;
+      }
+      &:hover {
+        color: @text-white;
+      }
+      &:not(:last-child) {
+        margin-bottom: 0;
+      }
+      &.ant-menu-item-selected {
+        background: @primary-color;
+        color: @text-white;
+        width: 100%;
+        &::after {
+          border-right: none;
+        }
+      }
+    }
+  }
+}
+
+// 二级菜单
+.zmdms-menu--sub {
+  padding: 0;
+  .ant-drawer-content {
+    overflow: hidden;
+    background: transparent;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 100%;
+    .ant-menu {
+      background: transparent;
+      color: #fff;
+    }
+  }
+  &.ant-drawer-left > .ant-drawer-content-wrapper {
+    left: -1px;
+  }
+  .ant-drawer-header {
+    padding: 0;
+    border-bottom: none;
+    background: transparent;
+    .ant-drawer-header-title {
+      height: 48px;
+      // padding: 0 10px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .ant-drawer-title {
+        color: #fff;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 118px;
+        }
+      }
+    }
+  }
+
+  &.zmdms-menu--sub-margin .ant-drawer-body {
+    // margin-top: 48px;
+  }
+  .ant-drawer-body {
+    padding: 0px;
+    font-size: @font-size-text;
+    // border-top: 1px solid #5670ea;
+    background: rgba(91, 118, 245, 0.4);
+    backdrop-filter: blur(2px);
+    overflow-x: hidden;
+    /* 浏览器滚动条样式 */
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 4px;
+    }
+    &::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0);
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: @menu-scrollbar-bg;
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: @menu-scrollbar-bg;
+    }
+    .ant-menu-submenu.ant-menu-submenu-inline {
+      // UI审查 增加底部边框
+      border-bottom: 1px solid rgba(141, 158, 255, 0.28);
+      padding-bottom: 0;
+    }
+    .ant-menu-sub.ant-menu-inline {
+      // background: #fff;
+      background: transparent;
+      // UI审查 0 5px => 0 10px;
+      padding: 0 10px;
+    }
+    .ant-menu-sub.ant-menu-inline > .ant-menu-item,
+    .ant-menu-item {
+      // UI审查 行高修改
+      height: @sub-menu-height;
+      line-height: @sub-menu-height;
+      // color: @submenu-color;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      font-size: @font-size-text;
+      border-radius: 4px;
+      margin: 0;
+      &:not(:last-child) {
+        margin-bottom: 0;
+      }
+      a {
+        color: #fff;
+      }
+      &:active {
+        background: transparent;
+      }
+      &:last-child {
+        margin-bottom: 10px;
+      }
+    }
+    .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
+    .ant-menu-submenu-title {
+      font-size: @font-size-text;
+      height: 30px;
+      line-height: 30px;
+      font-weight: 700;
+      // color: @submenu-color;
+      color: #fff;
+      .ant-menu-submenu-arrow {
+        color: #fff;
+      }
+      &:hover {
+        // color: @primary-color;
+        color: #fff;
+        .ant-menu-submenu-arrow {
+          // color: @primary-color;
+          color: #fff;
+        }
+      }
+      &:active {
+        background: transparent;
+      }
+    }
+
+    .ant-menu-root > .ant-menu-item-only-child {
+      margin-top: 2px;
+      .ant-menu-title-content {
+        font-weight: 700;
+      }
+    }
+    .ant-menu-item-selected {
+      color: @text-white;
+      background-color: @menu-selected-bg !important;
+      &::after {
+        border-right: none;
+      }
+    }
+  }
+  .ant-drawer-footer {
+    padding: 3px 10px;
+    height: @footer-height;
+    line-height: @footer-height;
+    border-top: 1px solid #5670ea;
+    background: rgba(91, 118, 245, 0.4);
+    backdrop-filter: blur(2px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .zt-btn-link {
+      color: #fff;
+    }
+  }
+
+  // 无背景
+  &.zmdms-menu--sub-hide-bg {
+    .ant-drawer-content {
+      background: #fff;
+      .ant-menu {
+        background: #fff;
+      }
+    }
+    .ant-drawer-header {
+      background: #fff;
+      border-bottom: 1px solid #ebf3fe;
+    }
+    .ant-drawer-body {
+      background: #fff;
+      backdrop-filter: none;
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 4px;
+      }
+      &::-webkit-scrollbar-track {
+        background: #fff;
+        border-radius: 4px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #8695a1;
+        border-radius: 4px;
+      }
+      &::-webkit-scrollbar-thumb:hover {
+        background: #727e88;
+      }
+      .ant-menu-sub.ant-menu-inline > .ant-menu-item,
+      .ant-menu-item {
+        color: rgba(0, 0, 0, 0.85);
+        a {
+          color: rgba(0, 0, 0, 0.85);
+          &:hover {
+            color: @primary-color;
+          }
+        }
+      }
+
+      .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
+      .ant-menu-submenu-title {
+        font-size: @font-size-text;
+        height: 30px;
+        line-height: 30px;
+        font-weight: 700;
+        // color: @submenu-color;
+        color: rgba(0, 0, 0, 0.65);
+        .ant-menu-submenu-arrow {
+          color: rgba(0, 0, 0, 0.85);
+        }
+        &:hover {
+          color: @primary-color;
+          .ant-menu-submenu-arrow {
+            color: @primary-color;
+          }
+        }
+        &:active {
+          background: transparent;
+        }
+      }
+
+      .ant-menu-item-selected {
+        color: @link-color !important;
+        background-color: #e6f7ff !important;
+      }
+    }
+    .ant-drawer-footer {
+      border-top: 1px solid #ebf3fe;
+      background: none;
+      backdrop-filter: none;
+      .zt-btn-link {
+        color: @link-color !important;
+      }
+    }
+  }
+  // 菜单换行显示
+  &.zmdms-menu--sub-item-line {
+    .ant-menu-item {
+      min-height: 30px;
+      height: auto !important;
+      line-height: 20px !important;
+      .ant-menu-title-content {
+        width: 100%;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        display: inline-block;
+        height: auto !important;
+        text-overflow: unset !important;
+      }
+    }
+  }
+}
+
+.logout-spin {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 1000;
+  padding-top: 100px;
+}

package/dist/less/components/AppLayout/style/style.less

@@ -0,0 +1,2 @@
+@import "../../../styles/default.less";
+@import "./index.less";

package/dist/less/components/AppLayout/style.less

@@ -0,0 +1,5 @@
+.zmdms-menu--sub {
+  .ant-drawer-content {
+    background-image: url("../../assets/img/menu_bg.png");
+  }
+}