@zat-design/sisyphus-react 4.0.0-beta.3 → 4.0.0-beta.5

package/es/ProLayout/components/Layout/Menu/OpenMenu/index.js

@@ -1,25 +1,26 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "antd/es/menu/style";
+import _Menu from "antd/es/menu";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useMemo, useRef, useContext } from 'react';
-import { Menu } from 'antd';
 import { useDeepCompareEffect, useSetState } from 'ahooks';
 import { CaretDownOutlined } from '@ant-design/icons';
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';
 import { cloneDeep } from 'lodash';
 import { LayoutContext } from "../../../../index";
-import { getIdsByPathName } from "../../../../utils";
+import { getIdsByPathName, findMenuItemByKey } from "../../../../utils";
 import { Icon } from "../../index";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var OpenMenu = function OpenMenu(props) {
+var OpenMenu = props => {
   var _getIdsByPathName;
   var className = props.className,
     dataSource = props.dataSource,
     style = props.style,
     _props$theme = props.theme,
-    theme = _props$theme === void 0 ? 'dark' : _props$theme;
+    theme = _props$theme === void 0 ? 'dark' : _props$theme,
+    onMenuClick = props.onMenuClick;
   var _ref = dataSource || {},
     menus = _ref.menus,
     sideMenu = _ref.sideMenu;
@@ -40,21 +41,20 @@ var OpenMenu = function OpenMenu(props) {
   var _useContext = useContext(LayoutContext),
     onSelected = _useContext.onSelected,
     target = _useContext.target;
-  var cls = classnames(_defineProperty({
-    'pro-layout-open-menu': true
-  }, "".concat(className), className));
+  var cls = classnames({
+    'pro-layout-open-menu': true,
+    [`${className}`]: className
+  });
 
   // 默认激活菜单优先取activeMenu中，默认取pathName进行匹配
-  var selectKeyIdPath = ((_getIdsByPathName = getIdsByPathName(menus, query.get('activeMenu'))) === null || _getIdsByPathName === void 0 ? void 0 : _getIdsByPathName.map(function (item) {
-    return String(item);
-  })) || [];
-  var itemsTransform = useMemo(function () {
+  var selectKeyIdPath = ((_getIdsByPathName = getIdsByPathName(menus, query.get('activeMenu'))) === null || _getIdsByPathName === void 0 ? void 0 : _getIdsByPathName.map(item => String(item))) || [];
+  var itemsTransform = useMemo(() => {
     var result = cloneDeep(menus);
     if (!Array.isArray(result) || !result.length) {
       return [];
     }
-    var menuDeep = function menuDeep(data) {
-      data.forEach(function (item) {
+    var menuDeep = data => {
+      data.forEach(item => {
         var _item$keyIdPath, _item$keyIdPath2, _item$children;
         // 是否是第一级菜单，展开模式一级菜单有icon, 收起模式二级菜单有icon
         var isFirstMenu = ((_item$keyIdPath = item.keyIdPath) === null || _item$keyIdPath === void 0 ? void 0 : _item$keyIdPath.length) === 1 || sideMenu && ((_item$keyIdPath2 = item.keyIdPath) === null || _item$keyIdPath2 === void 0 ? void 0 : _item$keyIdPath2.length) === 2;
@@ -83,9 +83,7 @@ var OpenMenu = function OpenMenu(props) {
         });
         item.key = String(item.id);
         item.router = item.redirectUrl || item.router || item.url;
-        Object.keys(item).filter(function (keyItem) {
-          return !['label', 'key', 'children', 'onTitleClick', 'router'].includes(keyItem);
-        }).forEach(function (_keyItem) {
+        Object.keys(item).filter(keyItem => !['label', 'key', 'children', 'onTitleClick', 'router'].includes(keyItem)).forEach(_keyItem => {
           delete item[_keyItem];
         });
         if (Array.isArray(item === null || item === void 0 ? void 0 : item.children) && (item === null || item === void 0 || (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0) {
@@ -105,7 +103,7 @@ var OpenMenu = function OpenMenu(props) {
     menuDeep(result);
     return result;
   }, [dataSource]);
-  useDeepCompareEffect(function () {
+  useDeepCompareEffect(() => {
     if (Array.isArray(selectKeyIdPath) && selectKeyIdPath.length) {
       setState({
         selectedKeys: selectKeyIdPath,
@@ -115,11 +113,9 @@ var OpenMenu = function OpenMenu(props) {
   }, [menus, selectKeyIdPath]);
 
   // 折叠模式默认展开全部菜单
-  useDeepCompareEffect(function () {
+  useDeepCompareEffect(() => {
     if (sideMenu) {
-      var keys = menus.map(function (item) {
-        return String(item.id);
-      });
+      var keys = menus.map(item => String(item.id));
       setState({
         openKeys: keys
       });
@@ -128,7 +124,7 @@ var OpenMenu = function OpenMenu(props) {
   return /*#__PURE__*/_jsxs("div", {
     className: cls,
     style: style,
-    children: [/*#__PURE__*/_jsx(Menu, {
+    children: [/*#__PURE__*/_jsx(_Menu, {
       mode: "inline"
       // @ts-ignore
       ,
@@ -138,15 +134,34 @@ var OpenMenu = function OpenMenu(props) {
       items: itemsTransform,
       inlineIndent: 14,
       expandIcon: /*#__PURE__*/_jsx(CaretDownOutlined, {}),
-      onOpenChange: function onOpenChange(openKeys) {
+      onOpenChange: openKeys => {
         setState({
-          openKeys: openKeys
+          openKeys
         });
       },
-      onClick: function onClick(_ref2) {
+      onClick: _ref2 => {
         var _item$props, _item$props2;
         var item = _ref2.item,
-          keyPath = _ref2.keyPath;
+          keyPath = _ref2.keyPath,
+          key = _ref2.key,
+          domEvent = _ref2.domEvent;
+        // console.log('item', item);
+        // console.log('keyPath', keyPath);
+        // console.log('key', key);
+        // console.log('domEvent', domEvent);
+
+        // 查找完整的菜单项数据
+        var menuItem = findMenuItemByKey(menus, key);
+        var menuKeyPath = menuItem !== null && menuItem !== void 0 && menuItem.keyIdPath ? menuItem.keyIdPath.map(id => String(id)) : keyPath;
+
+        // 调用用户传入的onMenuClick回调
+        if (onMenuClick) {
+          onMenuClick({
+            item: menuItem,
+            key,
+            keyPath: menuKeyPath
+          });
+        }
         setState({
           selectedKeys: keyPath,
           router: item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.router
@@ -158,7 +173,7 @@ var OpenMenu = function OpenMenu(props) {
           var _item$props3;
           window.open(item === null || item === void 0 || (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.router, target);
         } else {
-          setTimeout(function () {
+          setTimeout(() => {
             // 路由变更，且不再demo文档中
             if (!window.location.href.includes('~demos/prolayout')) {
               linkRef.current.click();
@@ -167,7 +182,7 @@ var OpenMenu = function OpenMenu(props) {
         }
       },
       style: {
-        height: dataSource.sideMenu ? 'auto' : "calc(100vh - ".concat((dataSource === null || dataSource === void 0 ? void 0 : dataSource.height) || 0, "px)"),
+        height: dataSource.sideMenu ? 'auto' : `calc(100vh - ${(dataSource === null || dataSource === void 0 ? void 0 : dataSource.height) || 0}px)`,
         color: 'red'
       }
     }), /*#__PURE__*/_jsx(Link, {

package/es/ProLayout/components/Layout/Menu/SideMenu/index.js

@@ -4,8 +4,9 @@ import { useSize } from 'ahooks';
 import OpenMenu from "../OpenMenu";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var SideMenu = function SideMenu(props) {
-  var dataSource = props.dataSource;
+var SideMenu = props => {
+  var dataSource = props.dataSource,
+    onMenuClick = props.onMenuClick;
   var ref = useRef(null);
   var size = useSize(ref);
   var menus = dataSource.menus,
@@ -25,13 +26,14 @@ var SideMenu = function SideMenu(props) {
       children: /*#__PURE__*/_jsx(OpenMenu, {
         className: "pro-layout-sider-menu-list",
         theme: "light",
+        onMenuClick: onMenuClick,
         dataSource: {
           menus: (menus === null || menus === void 0 ? void 0 : menus.children) || [],
-          iconfontUrl: iconfontUrl,
+          iconfontUrl,
           sideMenu: true
         },
         style: {
-          height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0) + ((size === null || size === void 0 ? void 0 : size.height) || 0), "px)")
+          height: `calc(100vh - ${headerHeight + (notice ? 32 : 0) + ((size === null || size === void 0 ? void 0 : size.height) || 0)}px)`
         }
       })
     })]

package/es/ProLayout/components/Layout/Menu/SideMenu/style/index.less

@@ -1,5 +1,3 @@
-/* @root-entry-name: 'default'; */
-/* @import (reference) '~antd/es/style/themes/index.less'; */
 
 .pro-layout-sider-menu {
   width: 220px;

package/es/ProLayout/components/Layout/Menu/index.js

@@ -4,7 +4,7 @@ import FoldMenu from "./FoldMenu"; // 折叠后菜单
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Menu = function Menu(props) {
+var Menu = props => {
   var _ref = props || {},
     headerHeight = _ref.headerHeight,
     dataSource = _ref.dataSource,
@@ -15,7 +15,8 @@ var Menu = function Menu(props) {
     pure = _ref.pure,
     theme = _ref.theme,
     sideMenuFooterRender = _ref.sideMenuFooterRender,
-    sideMenuHeaderRender = _ref.sideMenuHeaderRender;
+    sideMenuHeaderRender = _ref.sideMenuHeaderRender,
+    onMenuClick = _ref.onMenuClick;
   var menus = [];
   var menuCls = classnames({
     'pro-layout-menu': true,
@@ -36,26 +37,28 @@ var Menu = function Menu(props) {
     },
     children: [sideMenuHeaderRender, /*#__PURE__*/_jsx(OpenMenu, {
       dataSource: {
-        menus: menus,
-        iconfontUrl: iconfontUrl,
+        menus,
+        iconfontUrl,
         height: headerHeight + (notice ? 32 : 0) + 48
       },
       theme: theme,
+      onMenuClick: onMenuClick,
       style: {
         display: collapsed ? 'block' : 'none'
       }
     }), /*#__PURE__*/_jsx(FoldMenu, {
       dataSource: {
-        menus: menus,
-        iconfontUrl: iconfontUrl,
+        menus,
+        iconfontUrl,
         height: headerHeight + (notice ? 32 : 0) + 48,
-        notice: notice,
-        collapsed: collapsed,
-        headerHeight: headerHeight
+        notice,
+        collapsed,
+        headerHeight
       },
+      onMenuClick: onMenuClick,
       style: {
         display: collapsed ? 'none' : 'block',
-        height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0) + 48 || 0, "px)")
+        height: `calc(100vh - ${headerHeight + (notice ? 32 : 0) + 48 || 0}px)`
       }
     }), sideMenuFooterRender || /*#__PURE__*/_jsx("div", {
       className: "pro-layout-menu-collapsed",

package/es/ProLayout/components/Layout/Menu/style/index.less

@@ -1,5 +1,3 @@
-/* @root-entry-name: 'default'; */
-/* @import (reference) '~antd/es/style/themes/index.less'; */
 @import '../FoldMenu/style/index.less';
 @import '../OpenMenu/style/index.less';
 @import '../SideMenu/style/index.less';

package/es/ProLayout/components/Layout/Notice/index.js

@@ -3,7 +3,7 @@ import close from "../../../images/close.png";
 import locale from "../../../../locale";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Notice = function Notice(props) {
+var Notice = props => {
   var headerHeight = props.headerHeight,
     notice = props.notice,
     onCancel = props.onCancel;
@@ -17,13 +17,13 @@ var Notice = function Notice(props) {
     },
     children: [/*#__PURE__*/_jsx("img", {
       src: tipMsg,
-      alt: "".concat(locale.ProLayout.tipAlt)
+      alt: `${locale.ProLayout.tipAlt}`
     }), " ", notice, /*#__PURE__*/_jsx("span", {
       className: "pro-layout-header-notice-close",
       onClick: onCancel,
       children: /*#__PURE__*/_jsx("img", {
         src: close,
-        alt: "".concat(locale.ProLayout.closeAlt)
+        alt: `${locale.ProLayout.closeAlt}`
       })
     })]
   });

package/es/ProLayout/components/Layout/Notice/style/index.less

@@ -1,5 +1,3 @@
-/* @root-entry-name: 'default'; */
-/* @import (reference) '~antd/es/style/themes/index.less'; */
 
   /** 告知区 */
   .pro-layout-header-notice {

package/es/ProLayout/components/ProCollapse/PropTypes.d.ts

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react';
 import { CollapseProps, CollapsePanelProps } from 'antd/es/collapse';
-export type levelType = '1' | '2';
+export type levelType = '1' | '2' | '3';
 export interface TitleListType {
     /**
     * @description       描述的标题
@@ -28,12 +28,12 @@ export interface ProCollapseType {
     * @description     自动适应窗口大小
     * @default           -
     */
-    autoHeight?: Boolean;
+    autoHeight?: boolean;
     /**
    * @description       标题前图标
    * @default           -
    */
-    icon?: React.ReactNode | Boolean;
+    icon?: React.ReactNode | boolean;
     /**
     * @description       折叠头部多个标题
     * @default           []
@@ -59,6 +59,11 @@ export interface ProCollapseType {
      * @default           false
      */
     towCollapse?: boolean;
+    /**
+     * @description       三级折叠是否带收起
+     * @default           false
+     */
+    threeCollapse?: boolean;
     /**
     * @description      标题右侧扩展信息
     * @default           -

package/es/ProLayout/components/ProCollapse/index.js

@@ -1,15 +1,18 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "antd/es/collapse/style";
+import _Collapse from "antd/es/collapse";
+import "antd/es/descriptions/style";
+import _Descriptions from "antd/es/descriptions";
+import "antd/es/space/style";
+import _Space from "antd/es/space";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useLayoutEffect } from 'react';
-import { Collapse, Descriptions, Space } from 'antd';
 import { CaretRightOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
-import { isBoolean } from 'lodash';
 import foldSvg from "../../../assets/fold.svg";
 import ProIcon from "../../../ProIcon/index";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var ProCollapse = function ProCollapse(props) {
+var ProCollapse = props => {
   var title = props.title,
     id = props.id,
     _props$contentStyle = props.contentStyle,
@@ -19,6 +22,8 @@ var ProCollapse = function ProCollapse(props) {
     level = _props$level === void 0 ? '1' : _props$level,
     _props$towCollapse = props.towCollapse,
     towCollapse = _props$towCollapse === void 0 ? false : _props$towCollapse,
+    _props$threeCollapse = props.threeCollapse,
+    threeCollapse = _props$threeCollapse === void 0 ? false : _props$threeCollapse,
     titleList = props.titleList,
     extra = props.extra,
     _props$column = props.column,
@@ -42,13 +47,15 @@ var ProCollapse = function ProCollapse(props) {
   if (open !== undefined && !('activeKey' in finalCollapseProps)) {
     finalCollapseProps.activeKey = open ? ['1'] : [];
   }
-  var cls = classNames(_defineProperty({
+  var cls = classNames({
     'pro-collapse': true,
     'pro-collapse-level2': level === '2',
+    'pro-collapse-level3': level === '3',
     'pro-collapse-list': titleList === null || titleList === void 0 ? void 0 : titleList.length,
     'pro-collapse-no-title': !title,
-    'pro-collapse-no-level1-title': !title && level !== '2'
-  }, "".concat(className), className));
+    'pro-collapse-no-level1-title': !title && level !== '2' && level !== '3',
+    [`${className}`]: className
+  });
   var content = /*#__PURE__*/_jsx("div", {
     className: "pro-collapse-content",
     style: contentStyle,
@@ -56,7 +63,7 @@ var ProCollapse = function ProCollapse(props) {
   });
 
   // 生成 Collapse items 配置
-  var getCollapseItems = function getCollapseItems() {
+  var getCollapseItems = () => {
     var _title = title;
     var panelClassName = 'pro-collapse-panel';
     var panelProps = {};
@@ -70,13 +77,35 @@ var ProCollapse = function ProCollapse(props) {
         panelProps.collapsible = 'disabled';
       }
     }
+    if (level === '3') {
+      var level3Panel = classNames({
+        'pro-collapse-level3-collapse': threeCollapse,
+        'pro-collapse-level3-no-collapse': !threeCollapse,
+        'pro-collapse-panel': true
+      });
+      var hasCollapse = {};
+      if (!threeCollapse) {
+        hasCollapse.collapsible = 'disabled';
+      }
+      return [_objectSpread(_objectSpread({
+        key: '1',
+        label: _title,
+        children: content,
+        extra: /*#__PURE__*/_jsx("div", {
+          className: "extra-info",
+          children: extra
+        }),
+        className: level3Panel,
+        forceRender: true
+      }, hasCollapse), collapsePanelProps)];
+    }
     if (icon) {
-      _title = /*#__PURE__*/_jsxs(Space, {
+      _title = /*#__PURE__*/_jsxs(_Space, {
         size: 8,
         align: "center",
         children: [/*#__PURE__*/_jsx("div", {
           className: "pro-collapse-icon",
-          children: isBoolean(icon) ? /*#__PURE__*/_jsx(ProIcon, {
+          children: typeof icon === 'boolean' ? /*#__PURE__*/_jsx(ProIcon, {
             src: foldSvg,
             actionMap: {
               fill: []
@@ -97,13 +126,13 @@ var ProCollapse = function ProCollapse(props) {
       forceRender: true
     }, panelProps), collapsePanelProps)];
   };
-  var renderTitleList = function renderTitleList() {
+  var renderTitleList = () => {
     return /*#__PURE__*/_jsxs("div", {
       className: cls,
-      children: [/*#__PURE__*/_jsx(Descriptions, {
+      children: [/*#__PURE__*/_jsx(_Descriptions, {
         column: column,
-        children: titleList === null || titleList === void 0 ? void 0 : titleList.map(function (item) {
-          return /*#__PURE__*/_jsx(Descriptions.Item, {
+        children: titleList === null || titleList === void 0 ? void 0 : titleList.map(item => {
+          return /*#__PURE__*/_jsx(_Descriptions.Item, {
             label: item.label,
             children: item.value || '-'
           }, item.label);
@@ -113,7 +142,7 @@ var ProCollapse = function ProCollapse(props) {
   };
 
   // 当pro-layout-content只存在一个card时，高度动态计算
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     if (!autoHeight) {
       return;
     }
@@ -127,15 +156,15 @@ var ProCollapse = function ProCollapse(props) {
     if ((proCollapseNoTitles === null || proCollapseNoTitles === void 0 ? void 0 : proCollapseNoTitles.length) === 1 && proCollapses.length === 1) {
       var rect = proCollapseNoTitles[0].getBoundingClientRect();
       if ((rect === null || rect === void 0 ? void 0 : rect.height) < window.innerHeight - rect.top) {
-        proCollapseNoTitles[0].style.minHeight = "calc(100vh - ".concat(rect.top + 16, "px)");
+        proCollapseNoTitles[0].style.minHeight = `calc(100vh - ${rect.top + 16}px)`;
       } else {
         proCollapseNoTitles[0].style.minHeight = 'auto';
       }
       if (proFooterNode) {
-        proCollapseNoTitles[0].style.minHeight = "calc(100vh - ".concat(rect.top + proFooterNode.offsetHeight + 16, "px)");
+        proCollapseNoTitles[0].style.minHeight = `calc(100vh - ${rect.top + proFooterNode.offsetHeight + 16}px)`;
       }
     }
-    return function () {
+    return () => {
       if (proCollapseNoTitles.length === 1 && proCollapses.length === 1) {
         proCollapseNoTitles[0].style.minHeight = 'auto'; // 移除 minHeight 的设置
       }
@@ -144,10 +173,10 @@ var ProCollapse = function ProCollapse(props) {
   return /*#__PURE__*/_jsx("div", {
     id: id,
     style: style,
-    children: Array.isArray(titleList) && titleList.length ? renderTitleList() : /*#__PURE__*/_jsx(Collapse, _objectSpread({
+    children: Array.isArray(titleList) && titleList.length ? renderTitleList() : /*#__PURE__*/_jsx(_Collapse, _objectSpread({
       className: cls,
       bordered: false,
-      expandIcon: function expandIcon(_ref) {
+      expandIcon: _ref => {
         var isActive = _ref.isActive;
         return /*#__PURE__*/_jsx(CaretRightOutlined, {
           rotate: isActive ? -90 : 90

package/es/ProLayout/components/ProCollapse/style/index.less

@@ -1,5 +1,3 @@
-/* @root-entry-name: 'default'; */
-/* @import (reference) '~antd/es/style/themes/index.less'; */
 
 .pro-collapse {
   .pro-collapse-icon{
@@ -33,7 +31,8 @@
   .@{ant-prefix}-collapse-header {
     align-items: center !important;
     padding: 10px var(--zaui-space-size-md, 16px) !important;
-    background: var(--zaui-area, #fafafa);
+    background: #e4f2fe;
+    border-radius: 8px !important;
   }
 
   .@{ant-prefix}-collapse-header-text {
@@ -99,7 +98,7 @@
     }
 
     .pro-collapse-content {
-      padding: var(--zaui-space-size-sm, 8px) 0 !important;
+      padding: var(--zaui-space-size-md, 16px) !important;
     }
 
     .pro-collapse-level2-collapse {
@@ -111,6 +110,7 @@
         padding: 0 8px 6px !important;
         border-bottom: 1px solid #dee0e3;
         margin: 0 -8px;
+        border-radius: 0 !important;
         .@{ant-prefix}-collapse-arrow{
           right: 8px;
         }
@@ -150,6 +150,9 @@
       .@{ant-prefix}-collapse-expand-icon {
         display: none;
       }
+      .pro-collapse-content{
+        padding: var(--zaui-space-size-sm, 8px) 0 !important;
+      }
     }
   }
 
@@ -201,4 +204,145 @@
     }
 
   }
+
+  &.pro-collapse-level3 {
+    margin-bottom: var(--zaui-space-size-md, 16px);
+
+    .pro-collapse-level2{
+      margin-top: 8px !important;
+      .pro-collapse-panel {
+        border: none !important;
+      }
+      .@{ant-prefix}-collapse-header {
+        height: auto !important;
+        background: #fff !important;
+        &:hover{
+          background: #fff !important;
+        }
+        .@{ant-prefix}-collapse-header-text {
+          &:before{
+            display: block;
+          }
+        }
+  
+        .@{ant-prefix}-collapse-extra {
+          .extra-info {
+            font-size: var(--zaui-font-size, 14px);
+            color: var(--zaui-text, #343434);
+          }
+        }
+      }
+      .@{ant-prefix}-collapse-content{
+        .@{ant-prefix}-collapse-content-box{
+          .pro-collapse-content{
+            padding: var(--zaui-space-size-sm, 8px) 0 !important;
+          }
+        }
+      }
+     
+    }
+   
+    .@{ant-prefix}-collapse-item-active{
+      margin-bottom: 0 !important;
+    }
+    .pro-collapse-panel {
+      border: 1px solid #d9d9d9;
+      margin-bottom: var(--zaui-space-size-md, 16px);
+      overflow: hidden;
+      border-radius: 8px !important;
+      
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom: 1px solid #d9d9d9;
+      }
+    }
+
+    .pro-collapse-level3-no-collapse{
+      .@{ant-prefix}-collapse-header{
+        padding: 0 !important;
+      }
+    }
+
+    .@{ant-prefix}-collapse-header {
+      height: 48px !important;
+      padding: 0 var(--zaui-space-size-md, 16px) !important;
+      background: #F8F8F8 !important;
+      border-radius: 8px;
+      align-items: center !important;
+      justify-content: center !important;
+      display: flex !important;
+      margin: 0 !important;
+      border-bottom: none !important;
+
+      .@{ant-prefix}-collapse-header-text {
+        font-size: var(--zaui-font-size, 14px);
+        font-weight: 500;
+        color: var(--zaui-text, #343434);
+        padding-left: 16px !important;
+        &:before{
+          display: none;
+        }
+      }
+
+      .@{ant-prefix}-collapse-extra {
+        .extra-info {
+          font-size: var(--zaui-font-size, 14px);
+          color: var(--zaui-text, #343434);
+        }
+      }
+    }
+
+    .@{ant-prefix}-collapse-content {
+      .@{ant-prefix}-collapse-content-box {
+        .pro-collapse-content {
+          padding: var(--zaui-space-size-md, 16px) !important;
+          background: var(--zaui-base-bg, #ffffff);
+        }
+      }
+    }
+
+    // 可折叠样式
+    .pro-collapse-level3-collapse {
+      .@{ant-prefix}-collapse-expand-icon {
+        display: block !important;
+        color: #999;
+        margin-right: 8px;
+      }
+      
+      .@{ant-prefix}-collapse-header {
+        cursor: pointer;
+        padding: 0 !important;
+        &:hover {
+          background: #f0f0f0;
+        }
+      }
+    }
+
+    // 不可折叠样式
+    .pro-collapse-level3-no-collapse {
+      .@{ant-prefix}-collapse-expand-icon {
+        display: none !important;
+      }
+      
+      .@{ant-prefix}-collapse-header {
+        cursor: default;
+      }
+    }
+
+    // 禁用折叠时的样式
+    &.@{ant-prefix}-collapse .@{ant-prefix}-collapse-item-disabled > .@{ant-prefix}-collapse-header,
+    .@{ant-prefix}-collapse
+      .@{ant-prefix}-collapse-item-disabled
+      > .@{ant-prefix}-collapse-header
+      > .arrow {
+      color: var(--zaui-text, #343434);
+      cursor: default;
+      background: #F8F8F8 !important;
+    }
+  }
+  // 当pro-collapse-content直接包含level3且不包含level2时，添加padding
+ .pro-collapse-level2 .pro-collapse-content:has(.pro-collapse-level3) {
+    padding: var(--zaui-space-size-md, 16px) !important;
+    padding-right: 0 !important;
+  } 
 }