@pisell/materials 6.0.22 → 6.2.24

package/es/components/pisellGoodPassCard/index.js

@@ -0,0 +1,122 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import { Checkbox, Divider, Typography } from 'antd';
+import { PisellText, PisellCard, PisellModal } from "../../index";
+import { getText } from "../../locales";
+import useEngineContext from "../../hooks/useEngineContext";
+import "./index.less";
+var clsPrefix = 'pisell-good-pass-card';
+var index = function index(props) {
+  var _context$appHelper;
+  var context = useEngineContext();
+  var _context$appHelper$ut = (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils,
+    translation = _context$appHelper$ut.translation;
+  var _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    onChange = props.onChange,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    mixedSort = props.mixedSort;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showModal = _useState2[0],
+    setShowModal = _useState2[1];
+  console.log('pisell good card datasource', dataSource);
+  var handleChange = function handleChange(newValue) {
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  var handleItemChange = function handleItemChange(item, checked) {
+    handleChange({
+      id: item.id,
+      isSelected: checked
+    });
+  };
+  var renderVoucherContent = function renderVoucherContent(item) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "voucher-item-content-save"
+    }, getText('pisell2.text.goodpass.save'), " ", /*#__PURE__*/React.createElement(PisellText.Amount, {
+      value: item.savedAmount
+    }));
+  };
+  var renderActionElement = function renderActionElement(item) {
+    var isChecked = item.isSelected;
+    return /*#__PURE__*/React.createElement(Checkbox, {
+      disabled: item.isDisabled,
+      style: {
+        marginLeft: 8
+      },
+      checked: isChecked,
+      onChange: function onChange(e) {
+        return handleItemChange(item, e.target.checked);
+      }
+    }, renderVoucherContent(item));
+  };
+  var renderVoucherItem = function renderVoucherItem(item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id,
+      className: "".concat(clsPrefix, "-voucher-item")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "item-title"
+    }, translation(item.format_title), item.isEditMode && getText('pisell2.text.goodpass.last-settlement')), /*#__PURE__*/React.createElement("div", {
+      className: "item-content"
+    }, renderActionElement(item)));
+  };
+  var renderModal = function renderModal() {
+    return /*#__PURE__*/React.createElement(PisellModal, {
+      title: getText('pisell2.text.goodpass.product-vouchers'),
+      footer: null,
+      open: showModal,
+      onCancel: function onCancel() {
+        return setShowModal(false);
+      },
+      className: "".concat(clsPrefix, "-all-items-modal")
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '10px 0',
+        display: "flex",
+        flexDirection: "column",
+        gap: 12
+      }
+    }, dataSource.map(renderVoucherItem)));
+  };
+  var renderMixedMode = function renderMixedMode() {
+    var sortList = (mixedSort === null || mixedSort === void 0 ? void 0 : mixedSort(dataSource)) || dataSource;
+    var list = sortList.length > 3 ? sortList.slice(0, 3) : sortList;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(clsPrefix, "-header")
+    }, /*#__PURE__*/React.createElement("div", null, getText('pisell2.text.goodpass.product-vouchers')), /*#__PURE__*/React.createElement(Typography.Text, {
+      underline: true,
+      onClick: function onClick() {
+        return setShowModal(true);
+      }
+    }, getText('pisell2.text.goodpass.view-more'))), /*#__PURE__*/React.createElement(Divider, {
+      style: {
+        margin: 4
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(clsPrefix, "-body")
+    }, list.map(renderVoucherItem)));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderModal(), /*#__PURE__*/React.createElement(PisellCard, {
+    padding: 8,
+    borderRadius: 8,
+    style: _objectSpread({
+      width: 378
+    }, style),
+    className: clsPrefix
+  }, renderMixedMode()));
+};
+export default index;

package/es/components/pisellGoodPassCard/index.less

@@ -0,0 +1,58 @@
+.pisell-good-pass-card-all-items-modal,
+.pisell-good-pass-card {
+  .pisell-good-pass-card-header,
+  .pisell-good-pass-card-group-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--Gray-900, #101828);
+    text-align: center;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  .pisell-good-pass-card-voucher-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // height: 22px;
+
+    .item-title {
+      color: var(--Gray-500, #667085);
+      // text-align: center;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px;
+    }
+
+    .item-content {
+      color: var(--, #8157d5);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      white-space: nowrap;
+
+      .voucher-item-content-save {
+        color: var(--, #8157d5);
+      }
+
+      .pisell-lowcode-checkbox-wrapper {
+        display: flex;
+        flex-direction: row-reverse;
+      }
+
+      .add-btn {
+        color: var(--, #8157d5);
+        text-align: center;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px; /* 142.857% */
+      }
+    }
+  }
+}

package/es/components/pisellInformationEntry/Scan/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 export interface ScanProps {
     onChange: (val: string) => void;

package/es/components/pisellInformationEntry/hooks/useNativeScanner.d.ts

@@ -0,0 +1,4 @@
+export declare const useNativeScanner: (onChange?: ((val: string) => void) | undefined) => {
+    activeNativeScanner: () => void;
+    isTerminal: any;
+};

package/es/components/pisellInformationEntry/hooks/useNativeScanner.js

@@ -0,0 +1,35 @@
+import { useCallback, useEffect } from 'react';
+import useEngineContext from "../../../hooks/useEngineContext";
+export var useNativeScanner = function useNativeScanner(onChange) {
+  var _context$appHelper, _interaction$utils3, _interaction$utils3$i;
+  var context = useEngineContext();
+  var _ref = ((_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {},
+    interaction = _ref.interaction,
+    isTerminal = _ref.isTerminal;
+  useEffect(function () {
+    var _interaction$utils, _interaction$utils$mo;
+    // 获取客户端扫描结果
+    interaction === null || interaction === void 0 || (_interaction$utils = interaction.utils) === null || _interaction$utils === void 0 || (_interaction$utils$mo = _interaction$utils.mountFunction) === null || _interaction$utils$mo === void 0 || _interaction$utils$mo.call(_interaction$utils, 'global', 'nativeScannerResult', function (strVal) {
+      try {
+        var _val = JSON.parse(strVal);
+        onChange === null || onChange === void 0 || onChange(_val.value);
+      } catch (err) {
+        console.error(err);
+      }
+    });
+  }, []);
+  var activeNativeScanner = useCallback(function () {
+    var _interaction$utils2, _interaction$utils2$p;
+    interaction === null || interaction === void 0 || (_interaction$utils2 = interaction.utils) === null || _interaction$utils2 === void 0 || (_interaction$utils2$p = _interaction$utils2.postMessageToApp) === null || _interaction$utils2$p === void 0 || _interaction$utils2$p.call(_interaction$utils2, {
+      module: 'global',
+      key: 'active_native_scanner',
+      data: {
+        source: 'pisellInformationEntry'
+      }
+    });
+  }, []);
+  return {
+    activeNativeScanner: activeNativeScanner,
+    isTerminal: isTerminal && isTerminal() || (interaction === null || interaction === void 0 || (_interaction$utils3 = interaction.utils) === null || _interaction$utils3 === void 0 || (_interaction$utils3$i = _interaction$utils3.isAppEnv) === null || _interaction$utils3$i === void 0 ? void 0 : _interaction$utils3$i.call(_interaction$utils3))
+  };
+};

package/es/components/pisellInformationEntry/index.d.ts

@@ -26,6 +26,8 @@ export interface PisellInformationEntryProps extends Omit<React.HTMLAttributes<H
     searchDescribe?: React.ReactNode;
     /** 录入信息值改变 */
     onChange?: (val: string) => void;
+    /** 录入类型切换时候触发的 */
+    onChangeType?: (val: null | EntryModeType['type']) => void;
 }
 declare const PisellInformationEntry: (props: PisellInformationEntryProps) => JSX.Element;
 export default PisellInformationEntry;

package/es/components/pisellInformationEntry/index.js

@@ -25,6 +25,7 @@ import Button from "../button";
 import Input from "./Input";
 import { hasCamera } from "./utils";
 import useTerminalPeripherals from "./hooks/useTerminalPeripherals";
+import { useNativeScanner } from "./hooks/useNativeScanner";
 import "./index.less";
 var CardButton = function CardButton(props) {
   var icon = props.icon,
@@ -38,7 +39,8 @@ var PisellInformationEntry = function PisellInformationEntry(props) {
     _props$entryModes = props.entryModes,
     entryModes = _props$entryModes === void 0 ? [] : _props$entryModes,
     searchDescribe = props.searchDescribe,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    onChangeType = props.onChangeType;
   var config = usePisellConfig();
   var platform = config.platform;
   var _useState = useState(null),
@@ -47,6 +49,9 @@ var PisellInformationEntry = function PisellInformationEntry(props) {
     setCurrentType = _useState2[1];
   var _useTerminalPeriphera = useTerminalPeripherals(onChange),
     peripheralsStatus = _useTerminalPeriphera.peripheralsStatus;
+  var _useNativeScanner = useNativeScanner(onChange),
+    activeNativeScanner = _useNativeScanner.activeNativeScanner,
+    isTerminal = _useNativeScanner.isTerminal;
 
   // 可用录入模式
   var _useState3 = useState(entryModes),
@@ -107,8 +112,17 @@ var PisellInformationEntry = function PisellInformationEntry(props) {
     if (passiveModeType.includes(type)) {
       return;
     }
+    // 客户端调用系统原生扫码功能
+    if (isTerminal && 'scanCode' === type) {
+      setCurrentType(null);
+      activeNativeScanner();
+      return;
+    }
     setCurrentType(type);
   };
+  useEffect(function () {
+    onChangeType && onChangeType(currentType);
+  }, [currentType]);
   var _useMemo = useMemo(function () {
       var isHasScanCode = false;
       var isHasInput = false;
@@ -192,7 +206,7 @@ var PisellInformationEntry = function PisellInformationEntry(props) {
         return handleEntryClick(item.type);
       }
     }, item.name || detail.text);
-  })), /*#__PURE__*/React.createElement("div", null, currentType === 'scanCode' && /*#__PURE__*/React.createElement(Scan, {
+  })), /*#__PURE__*/React.createElement("div", null, currentType === 'scanCode' && !isTerminal && /*#__PURE__*/React.createElement(Scan, {
     onChange: handleChange,
     onCancel: function onCancel() {
       return setCurrentType(null);

package/es/components/pisellInput/components/BankCard/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps } from 'antd';
 import { PisellContextType } from "../../../pisell-config-provider/context";
 import './index.less';

package/es/components/pisellInput/components/Copy/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps, ButtonProps } from 'antd';
 import { PisellContextType } from "../../../pisell-config-provider/context";
 export interface CopyProps extends InputProps {

package/es/components/pisellInput/components/SecurityCode/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps } from 'antd';
 import './index.less';
 import { PisellContextType } from "../../../pisell-config-provider/context";

package/es/components/pisellInput/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps } from 'antd';
 import { PisellContextType } from '../pisell-config-provider/context';
 declare const PisellInput: {

package/es/components/pisellLoading/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SpinProps } from 'antd';
 import './index.less';
 declare type MaskType = {

package/es/components/pisellMenu/PisellMenu.d.ts

@@ -1,9 +1,11 @@
+import { Menu as AntdMenu } from 'antd';
 import React from 'react';
 import './PisellMenu.less';
 import type { PisellMenuProps } from './types';
-declare const PisellMenu: {
-    ({ className, style, mode, theme, defaultOpenKeys, defaultSelectedKeys, inlineCollapsed, openKeys, selectedKeys, onOpenChange, onSelect, dataSource, __designMode, children, other, ...restProps }: PisellMenuProps): JSX.Element;
-    Item: Omit<React.FunctionComponent<import("antd").MenuItemProps>, ""> & (<T extends import("antd").MenuItemProps>(props: T extends infer U extends import("antd").MenuItemProps ? unknown extends U ? import("antd").MenuItemProps : U : import("antd").MenuItemProps, context?: any) => React.ReactElement<any, any> | null);
-    SubMenu: React.FC<import("antd").SubMenuProps>;
+declare type PisellMenuComponent = React.FC<PisellMenuProps> & {
+    Item: typeof AntdMenu.Item;
+    SubMenu: typeof AntdMenu.SubMenu;
+    ItemGroup: typeof AntdMenu.ItemGroup;
 };
+declare const PisellMenu: PisellMenuComponent;
 export default PisellMenu;

package/es/components/pisellMenu/PisellMenu.js

@@ -58,4 +58,5 @@ var PisellMenu = function PisellMenu(_ref) {
 };
 PisellMenu.Item = AntdMenu.Item;
 PisellMenu.SubMenu = AntdMenu.SubMenu;
+PisellMenu.ItemGroup = AntdMenu.ItemGroup;
 export default PisellMenu;

package/es/components/pisellMenu/types.d.ts

@@ -23,4 +23,5 @@ export interface MenuItemType {
     icon?: string | React.ReactNode;
     hide?: boolean;
     type?: 'group' | 'divider';
+    isGroup?: boolean;
 }

package/es/components/pisellModal/components/IpadModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PcModalProps } from '../PcModal';
 export interface IpadModalProps extends PcModalProps {
 }

package/es/components/pisellModal/components/MobileModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PcModalProps } from '../PcModal';
 import './index.less';
 export interface MobileModalProps extends PcModalProps {

package/es/components/pisellModal/components/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import IpadModal from './IpadModal';
 import MobileModal from './MobileModal';
 import PcModal from './PcModal';

package/es/components/pisellNavigationMenu/PisellNavigationMenu.js

@@ -5,6 +5,8 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useCallback, useMemo } from 'react';
+import { isFunction } from "@pisell/utils";
+import classNames from 'classnames';
 import PisellDropSort from "../pisellDropSort";
 import PisellTags from "../pisellTags";
 import Icon from "../icon";
@@ -25,6 +27,8 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
     allowAddChild = _ref$allowAddChild === void 0 ? true : _ref$allowAddChild,
     _ref$allowAddRoot = _ref.allowAddRoot,
     allowAddRoot = _ref$allowAddRoot === void 0 ? true : _ref$allowAddRoot,
+    _ref$allowIsShow = _ref.allowIsShow,
+    allowIsShow = _ref$allowIsShow === void 0 ? true : _ref$allowIsShow,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$spacing = _ref.spacing,
@@ -38,8 +42,17 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
     onAddPage = _ref.onAddPage,
     onEdit = _ref.onEdit,
     onDelete = _ref.onDelete,
+    onIsShow = _ref.onIsShow,
     __designMode = _ref.__designMode,
-    title = _ref.title;
+    title = _ref.title,
+    propsRightContent = _ref.rightContent,
+    propsGetItemStyle = _ref.getItemStyle,
+    canDrop = _ref.canDrop,
+    _ref$indentationWidth = _ref.indentationWidth,
+    indentationWidth = _ref$indentationWidth === void 0 ? 24 : _ref$indentationWidth,
+    hideDescription = _ref.hideDescription,
+    showActionOnHover = _ref.showActionOnHover,
+    showTitleTags = _ref.showTitleTags;
   // 将DropSortItem转换回NavigationMenuItem
   var convertToNavigationItems = function convertToNavigationItems(items) {
     return items.map(function (item) {
@@ -47,6 +60,7 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
         id: String(item.id),
         title: String(item.title || ''),
         path: String(item.path || '/'),
+        collapsed: item.collapsed,
         children: item.children ? convertToNavigationItems(item.children) : []
       };
     });
@@ -73,16 +87,32 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
         text: getText('pisell-lowcode-navigation-menu-tag-base'),
         color: '#7f56d9'
       },
+      proCode: {
+        text: getText('pisell-lowcode-navigation-menu-tag-proCode'),
+        color: '#1677ff'
+      },
       pisellV1: {
         text: getText('pisell-lowcode-navigation-menu-tag-pisell1'),
         color: '#ee837a'
+      },
+      group: {
+        text: getText('pisell-lowcode-navigation-menu-tag-group'),
+        color: '#7f56d9'
+      },
+      subMenu: {
+        text: getText('pisell-lowcode-navigation-menu-tag-sub-menu'),
+        color: '#067647'
+      },
+      custom: {
+        text: getText('pisell-lowcode-navigation-menu-tag-custom'),
+        color: '#B54708'
       }
     };
   }, []);
 
   // 自定义渲染菜单项
   var renderMenuItem = useCallback(function (itemProps) {
-    var _tagTextMap$item$sour, _tagTextMap$item$sour2;
+    var _tagTextMap$group, _tagTextMap$group2, _tagTextMap$subMenu, _tagTextMap$subMenu2, _tagTextMap$custom, _tagTextMap$custom2, _tagTextMap$item$sour, _tagTextMap$item$sour2;
     var item = itemProps.item;
     var _item$allowEdit = item.allowEdit,
       allowEdit = _item$allowEdit === void 0 ? true : _item$allowEdit,
@@ -93,13 +123,15 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
       _item$allowAddSubmenu = item.allowAddSubmenu,
       allowAddSubmenu = _item$allowAddSubmenu === void 0 ? true : _item$allowAddSubmenu,
       _item$allowAddPage = item.allowAddPage,
-      allowAddPage = _item$allowAddPage === void 0 ? true : _item$allowAddPage;
+      allowAddPage = _item$allowAddPage === void 0 ? true : _item$allowAddPage,
+      _item$allowIsShow = item.allowIsShow,
+      allowIsShow = _item$allowIsShow === void 0 ? true : _item$allowIsShow;
     var isShowAddButton = item.isGroup && allowAddChild && (allowAddSubmenu || allowAddPage);
     return /*#__PURE__*/React.createElement("div", {
       className: "pisell-lowcode-navigation-menu-item"
     }, /*#__PURE__*/React.createElement("div", {
       className: "pisell-lowcode-navigation-menu-item-content"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, item.icon && /*#__PURE__*/React.createElement("div", {
       className: "pisell-lowcode-navigation-menu-item-content-icon"
     }, /*#__PURE__*/React.createElement(Icon, {
       type: item.icon
@@ -107,8 +139,20 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
       className: "pisell-lowcode-navigation-menu-item-content-text"
     }, /*#__PURE__*/React.createElement("div", {
       className: "pisell-lowcode-navigation-menu-item-title"
-    }, item.title), /*#__PURE__*/React.createElement("div", {
-      className: "pisell-lowcode-navigation-menu-item-description"
+    }, item.title, showTitleTags && /*#__PURE__*/React.createElement(React.Fragment, null, item.isGroup && item.is_top && /*#__PURE__*/React.createElement(PisellTags, {
+      type: "pill_color",
+      color: (_tagTextMap$group = tagTextMap['group']) === null || _tagTextMap$group === void 0 ? void 0 : _tagTextMap$group.color
+    }, ((_tagTextMap$group2 = tagTextMap['group']) === null || _tagTextMap$group2 === void 0 ? void 0 : _tagTextMap$group2.text) || ""), item.isGroup && !item.is_top && /*#__PURE__*/React.createElement(PisellTags, {
+      type: "pill_color",
+      color: (_tagTextMap$subMenu = tagTextMap['subMenu']) === null || _tagTextMap$subMenu === void 0 ? void 0 : _tagTextMap$subMenu.color
+    }, ((_tagTextMap$subMenu2 = tagTextMap['subMenu']) === null || _tagTextMap$subMenu2 === void 0 ? void 0 : _tagTextMap$subMenu2.text) || ""), item.isCustom && /*#__PURE__*/React.createElement(PisellTags, {
+      type: "pill_color",
+      color: (_tagTextMap$custom = tagTextMap['custom']) === null || _tagTextMap$custom === void 0 ? void 0 : _tagTextMap$custom.color
+    }, ((_tagTextMap$custom2 = tagTextMap['custom']) === null || _tagTextMap$custom2 === void 0 ? void 0 : _tagTextMap$custom2.text) || ""))), hideDescription ? null : /*#__PURE__*/React.createElement("div", {
+      className: "pisell-lowcode-navigation-menu-item-description",
+      style: {
+        display: hideDescription ? "none" : "flex"
+      }
     }, item.description, item.source && /*#__PURE__*/React.createElement(PisellTags, {
       type: "pill_color",
       color: (_tagTextMap$item$sour = tagTextMap[item.source]) === null || _tagTextMap$item$sour === void 0 ? void 0 : _tagTextMap$item$sour.color
@@ -116,8 +160,20 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
       type: "pill_color",
       color: "success"
     }, "v", item.version)))), /*#__PURE__*/React.createElement("div", {
-      className: "pisell-lowcode-navigation-menu-item-action-wrap"
-    }, allowEdit && /*#__PURE__*/React.createElement(Button, {
+      className: classNames("pisell-lowcode-navigation-menu-item-action-wrap", {
+        "pisell-lowcode-navigation-menu-item-action-wrap-hover": showActionOnHover
+      })
+    }, allowIsShow && /*#__PURE__*/React.createElement(Button, {
+      type: "text",
+      onClick: function onClick() {
+        return onIsShow === null || onIsShow === void 0 ? void 0 : onIsShow(item);
+      },
+      className: "pisell-lowcode-navigation-menu-item-action-button",
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        type: item.is_show === false ? "pisell2-eye-off" : "pisell2-eye",
+        className: "pisell-lowcode-navigation-menu-item-action-button-icon"
+      })
+    }), allowEdit && /*#__PURE__*/React.createElement(Button, {
       type: "text",
       onClick: function onClick() {
         return onEdit === null || onEdit === void 0 ? void 0 : onEdit(item);
@@ -128,6 +184,9 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
         className: "pisell-lowcode-navigation-menu-item-action-button-icon"
       })
     }), isShowAddButton && /*#__PURE__*/React.createElement(Dropdown, {
+      getPopupContainer: function getPopupContainer(triggerNode) {
+        return triggerNode;
+      },
       menu: {
         items: [allowAddSubmenu && {
           key: 'add-child',
@@ -173,6 +232,9 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
     }, title);
   }, [title]);
   var rightContent = useMemo(function () {
+    if (propsRightContent) {
+      return propsRightContent;
+    }
     return /*#__PURE__*/React.createElement("div", {
       className: "pisell-lowcode-navigation-menu-right-content"
     }, /*#__PURE__*/React.createElement(Button, {
@@ -193,7 +255,7 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
         return onAddPage === null || onAddPage === void 0 ? void 0 : onAddPage();
       }
     }, getText('pisell-lowcode-navigation-menu-add-page')));
-  }, [title]);
+  }, [propsRightContent]);
   var formatValue = useMemo(function () {
     return formatTree(value, function (item) {
       return _objectSpread(_objectSpread({}, item), {}, {
@@ -203,16 +265,21 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
   }, [value]);
   var getItemStyle = useCallback(function (itemProps) {
     var item = itemProps.item;
+    if (isFunction(propsGetItemStyle)) {
+      return (propsGetItemStyle === null || propsGetItemStyle === void 0 ? void 0 : propsGetItemStyle(item)) || {};
+    }
     return {
       backgroundColor: item.isGroup ? '#fff' : 'var(--Gray-50, #F9FAFB)'
     };
-  }, []);
+  }, [propsGetItemStyle]);
   return /*#__PURE__*/React.createElement(PisellDropSort, {
+    indentationWidth: indentationWidth,
     value: formatValue,
     allowDrag: allowDrag,
     allowDelete: allowDelete,
     allowAddChild: allowAddChild,
     allowAddRoot: allowAddRoot,
+    allowIsShow: allowIsShow,
     disabled: disabled,
     spacing: spacing,
     maxLevel: maxLevel,
@@ -228,7 +295,8 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
     emptyContent: /*#__PURE__*/React.createElement(PisellEmpty, {
       maxWidth: 400,
       description: getText('pisell-lowcode-navigation-menu-add-page-tip')
-    })
+    }),
+    canDrop: canDrop
   });
 };
 export default PisellNavigationMenu;

package/es/components/pisellNavigationMenu/PisellNavigationMenu.less

@@ -1,3 +1,10 @@
+.pisell-lowcode-drop-sort-item-tree-item {
+  &:hover {
+    .pisell-lowcode-navigation-menu-item-action-wrap {
+      opacity: 1 !important;
+    }
+  }
+}
 .pisell-lowcode-navigation-menu-item {
   display: flex;
   justify-content: space-between;
@@ -26,6 +33,9 @@
       font-size: 14px;
       font-weight: 600;
       line-height: 20px; /* 142.857% */
+      display: flex;
+      gap: 10px;
+      align-items: center;
     }
     .pisell-lowcode-navigation-menu-item-description {
       color: var(--Gray-500, #667085);
@@ -40,6 +50,10 @@
   .pisell-lowcode-navigation-menu-item-action-wrap {
     display: flex;
     gap: 8px;
+    transition: opacity 0.3s ease-in-out;
+    &.pisell-lowcode-navigation-menu-item-action-wrap-hover {
+      opacity: 0;
+    }
     .pisell-lowcode-navigation-menu-item-action-button {
       &:hover {
         background: var(--Gray-300, #D0D5DD);

package/es/components/pisellNavigationMenu/types.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { Props as TreeItem } from "../pisellDraggable/components/TreeItem/TreeItem";
 export interface NavigationMenuItem {
     id: string;
     /** 标题 */
@@ -37,6 +38,8 @@ export interface PisellNavigationMenuProps {
     allowAddChild?: boolean;
     /** 是否允许添加根菜单 */
     allowAddRoot?: boolean;
+    /** 是否允许显示隐藏 */
+    allowIsShow?: boolean;
     /** 是否禁用 */
     disabled?: boolean;
     /** 菜单项间距 */
@@ -61,4 +64,22 @@ export interface PisellNavigationMenuProps {
     onEdit?: (item: NavigationMenuItem) => void;
     /** 删除回调 */
     onDelete?: (item: NavigationMenuItem) => void;
+    /** 左侧自定义内容 */
+    leftContent?: React.ReactNode;
+    /** 右侧自定义内容 */
+    rightContent?: React.ReactNode;
+    /** 获取item样式 */
+    getItemStyle?: (itemProps: TreeItem) => React.CSSProperties;
+    /** 自定义拖拽判断函数，返回false时阻止拖拽 */
+    canDrop?: (dragItem: NavigationMenuItem, dropTarget: NavigationMenuItem, parentId: string | number | null) => boolean;
+    /** 显示隐藏回调 */
+    onIsShow?: (item: NavigationMenuItem) => void;
+    /** 节点缩进宽度 */
+    indentationWidth?: number;
+    /** 隐藏描述 */
+    hideDescription?: boolean;
+    /** 悬浮时展示action */
+    showActionOnHover?: boolean;
+    /** 是否展示标题标签 */
+    showTitleTags?: boolean;
 }