{"_id":"@aishu-tech/workshop-framework-system","_rev":"3-654cbfb2413cf3e0890d06ff5b831dd1","name":"@aishu-tech/workshop-framework-system","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aishu-tech/workshop-framework-system","version":"1.0.0","author":{"name":"bincheng.qian"},"license":"ISC","_id":"@aishu-tech/workshop-framework-system@1.0.0","maintainers":[{"name":"sh00tg0a1","email":"chenxiao911@gmail.com"},{"name":"kiki2022","email":"hankun2015@126.com"}],"dist":{"shasum":"3b0f4c78d6e174dcbfa7e98895323cba9afbefbd","tarball":"https://registry.npmjs.org/@aishu-tech/workshop-framework-system/-/workshop-framework-system-1.0.0.tgz","fileCount":15,"integrity":"sha512-uz13gJcYfcSevL3z1PLEoAJUjVxmb5dB15cW4YBCOIC/irzelGDrk9U9FKeWQ0BxOydhDD8YU1EsJVhMIVze8g==","signatures":[{"sig":"MEUCIQC82TuEo0FUA/zoSC+CFIOvYCBEnnHOA2wF61jxbhA3sAIgNAmnHWTs3UYHXM81SAQNScfoAUIyVKYfFMGBDw0qR5g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4274124},"jest":{"roots":["<rootDir>/src"],"testMatch":["**/test/**/*.test.ts?(x)"],"setupFiles":["<rootDir>/tests/setup.ts"],"collectCoverage":true,"moduleNameMapper":{"^.+\\.(css|scss)$":"identity-obj-proxy"},"coverageDirectory":"testResult"},"browser":"./dist/workshop-framework.umd.min.js","scripts":{"build":"yarn build:production && yarn build:dev","start":"webpack-dev-server --mode=development --config ./webpack.demo.js","build:dev":"webpack --mode=development","build:production":"webpack --mode=production  --env=production"},"typings":"typings/index.d.ts","_npmUser":{"name":"kiki2022","email":"hankun2015@126.com"},"_npmVersion":"11.6.2","description":"[TOC]","directories":{},"_nodeVersion":"24.11.1","browserslist":["ie 11"],"_hasShrinkwrap":false,"devDependencies":{"antd":"^4.19.5","less":"^4.1.3","react":"^17.0.0","eslint":"^8.14.0","moment":"^2.29.3","core-js":"^3.22.0","qiankun":"^2.7.0","webpack":"^5.72.0","react-dnd":"^14.0.5","react-dom":"^17.0.0","classnames":"^2.3.1","css-loader":"^6.7.1","typescript":"^4.6.3","url-loader":"^4.1.1","less-loader":"^11.0.0","webpack-cli":"^4.9.2","@types/react":"^17.0.0","babel-loader":"^8.2.4","re-resizable":"^6.9.9","style-loader":"^3.3.1","@babel/runtime":"^7.17.9","postcss-import":"^14.1.0","postcss-loader":"^6.2.1","postcss-nested":"^5.0.6","@types/react-dom":"^17.0.0","react-router-dom":"^6.3.0","@babel/preset-env":"^7.16.11","postcss-preset-env":"^7.4.3","webpack-dev-server":"^4.8.1","@babel/preset-react":"^7.16.7","babel-plugin-import":"^1.13.5","eslint-plugin-react":"^7.29.4","html-webpack-plugin":"^5.5.0","@anyshare/i18nfactory":"^1.0.0","postcss-global-import":"^1.0.6","mini-css-extract-plugin":"^2.6.0","react-dnd-html5-backend":"^14.1.0","@babel/preset-typescript":"^7.16.7","@typescript-eslint/parser":"^5.21.0","eslint-plugin-react-hooks":"^4.5.0","css-minimizer-webpack-plugin":"^3.4.1","@babel/plugin-transform-runtime":"^7.17.10","@typescript-eslint/eslint-plugin":"^5.21.0"},"_npmOperationalInternal":{"tmp":"tmp/workshop-framework-system_1.0.0_1766046016891_0.9387022709519663","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aishu-tech/workshop-framework-system","author":{"name":"bincheng.qian"},"version":"1.0.1","browser":"./dist/workshop-framework-system.umd.min.js","typings":"typings/index.d.ts","scripts":{"build":"yarn build:production && yarn build:dev","build:production":"webpack --mode=production  --env=production","build:dev":"webpack --mode=development","start":"webpack-dev-server --mode=development --config ./webpack.demo.js"},"jest":{"setupFiles":["<rootDir>/tests/setup.ts"],"roots":["<rootDir>/src"],"testMatch":["**/test/**/*.test.ts?(x)"],"moduleNameMapper":{"^.+\\.(css|scss)$":"identity-obj-proxy"},"collectCoverage":true,"coverageDirectory":"testResult"},"license":"ISC","devDependencies":{"@anyshare/i18nfactory":"^1.0.0","@babel/plugin-transform-runtime":"^7.17.10","@babel/preset-env":"^7.16.11","@babel/preset-react":"^7.16.7","@babel/preset-typescript":"^7.16.7","@babel/runtime":"^7.17.9","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","@typescript-eslint/eslint-plugin":"^5.21.0","@typescript-eslint/parser":"^5.21.0","antd":"^4.19.5","babel-loader":"^8.2.4","babel-plugin-import":"^1.13.5","classnames":"^2.3.1","core-js":"^3.22.0","css-loader":"^6.7.1","css-minimizer-webpack-plugin":"^3.4.1","eslint":"^8.14.0","eslint-plugin-react":"^7.29.4","eslint-plugin-react-hooks":"^4.5.0","html-webpack-plugin":"^5.5.0","less":"^4.1.3","less-loader":"^11.0.0","mini-css-extract-plugin":"^2.6.0","moment":"^2.29.3","postcss-global-import":"^1.0.6","postcss-import":"^14.1.0","postcss-loader":"^6.2.1","postcss-nested":"^5.0.6","postcss-preset-env":"^7.4.3","qiankun":"^2.7.0","re-resizable":"^6.9.9","react":"^17.0.0","react-dnd":"^14.0.5","react-dnd-html5-backend":"^14.1.0","react-dom":"^17.0.0","react-router-dom":"^6.3.0","style-loader":"^3.3.1","typescript":"^4.6.3","url-loader":"^4.1.1","webpack":"^5.72.0","webpack-cli":"^4.9.2","webpack-dev-server":"^4.8.1"},"browserslist":["ie 11"],"_id":"@aishu-tech/workshop-framework-system@1.0.1","description":"[TOC]","_nodeVersion":"20.5.0","_npmVersion":"9.8.0","dist":{"integrity":"sha512-KCFw75z+y3WDmS4+IA22p+0tgxCzDuGF6s5iJa52Jq6AzrgvrY1rgrG2fz7vDwiKJYtnVRnBCRAAgzCJndfKmw==","shasum":"44ca283c80693cc2b4e2a58ba36ff7cae6e5616f","tarball":"https://registry.npmjs.org/@aishu-tech/workshop-framework-system/-/workshop-framework-system-1.0.1.tgz","fileCount":15,"unpackedSize":4281760,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAuBXD1DsWDUb8k8NoOtF7EasBNp7WvHN69kb2nadBNyAiBPKYmk5dZ4E3Lt1Xf1yBVSMx4BC/vX08Hjsdt37FzvWQ=="}]},"_npmUser":{"name":"nevermoreai","email":"bincheng.qian@aishu.cn"},"directories":{},"maintainers":[{"name":"nevermoreai","email":"bincheng.qian@aishu.cn"},{"name":"sh00tg0a1","email":"chenxiao911@gmail.com"},{"name":"kiki2022","email":"hankun2015@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/workshop-framework-system_1.0.1_1766380779700_0.8986386350936664"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-18T08:20:16.787Z","modified":"2025-12-22T05:19:40.170Z","1.0.0":"2025-12-18T08:20:17.080Z","1.0.1":"2025-12-22T05:19:39.932Z"},"author":{"name":"bincheng.qian"},"license":"ISC","description":"[TOC]","maintainers":[{"name":"nevermoreai","email":"bincheng.qian@aishu.cn"},{"name":"sh00tg0a1","email":"chenxiao911@gmail.com"},{"name":"kiki2022","email":"hankun2015@126.com"}],"readme":"# WorkshopFramework\r\n\r\n[TOC]\r\n\r\n## 安装\r\n\r\n使用 npm 或 yarn 安装\r\n\r\n```bash\r\nnpm install @aishu-tech/workshop-framework-system\r\n```\r\n\r\n```bash\r\nyarn add @aishu-tech/workshop-framework-system\r\n```\r\n\r\n## 示例\r\n\r\n```tsx\r\nimport \"./polyfill\";\r\nimport React, { lazy, Suspense } from \"react\";\r\nimport { FrameWork } from \"@aishu-tech/workshop-framework-system\";\r\nimport \"./global.css\";\r\n\r\nconst AsyncComponent = (asyncComponent) => {\r\n    const Component = lazy(() => asyncComponent);\r\n\r\n    return (props) => (\r\n        <Suspense fallback={<></>}>\r\n            <Component {...props} />\r\n        </Suspense>\r\n    );\r\n};\r\n\r\nconst menusItems = [\r\n    {\r\n        label: \"组织管理\",\r\n        key: \"management\",\r\n        icon: <CiOutlined />,\r\n        children: [\r\n            {\r\n                label: \"用户组织管理\",\r\n                key: \"usermanagement\",\r\n                children: [\r\n                    {\r\n                        label: \"用户组织管理-1\",\r\n                        key: \"me\",\r\n                        path: \"/home/me\",\r\n                        app: {\r\n                            name: \"first\",\r\n                            entry: \"http://localhost:1007\",\r\n                        },\r\n                    },\r\n                    {\r\n                        label: \"用户组织管理-2\",\r\n                        key: \"role\",\r\n                        path: \"/home/role\",\r\n                        app: AsyncComponent(import(\"./components/Demo1\")),\r\n                    },\r\n                ],\r\n            },\r\n        ],\r\n    },\r\n];\r\n\r\nconst config = {\r\n    appProps: {\r\n        language: \"zh-cn\",\r\n    },\r\n    nav: {\r\n        logo: \"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\",\r\n        theme: \"red\",\r\n        customStyle: false,\r\n        account: {\r\n            name: \"admin\",\r\n            items: [\r\n                {\r\n                    label: \"语言\",\r\n                    key: \"language\",\r\n                    children: [\r\n                        {\r\n                            label: \"简体中文\",\r\n                            key: \"zh-cn\",\r\n                        },\r\n                        {\r\n                            label: \"繁体中文\",\r\n                            key: \"zh-tw\",\r\n                        },\r\n                        {\r\n                            label: \"English\",\r\n                            key: \"en-us\",\r\n                        },\r\n                    ],\r\n                    defaultSelectedKeys: [\"en-us\"],\r\n                },\r\n                {\r\n                    label: \"退出\",\r\n                    key: \"logout\",\r\n                },\r\n            ],\r\n            onClick: (keys) => {\r\n                // xxx\r\n            },\r\n        },\r\n        extraElements: [\r\n            {\r\n                icon: <CiOutlined />,\r\n                label: \"部署控制台\",\r\n                key: \"cluster\",\r\n                onClick: (key) => {\r\n                    // xxx\r\n                },\r\n                float: \"right\",\r\n            },\r\n            {\r\n                icon: <CiOutlined />,\r\n                label: \"管理控制台\",\r\n                key: \"console\",\r\n                float: \"left\",\r\n            },\r\n        ],\r\n        menu: {\r\n            items: menusItems,\r\n            defaultCollapsed: localStorage.getItem(\"menuCollapsed\") === \"true\",\r\n            defaultMenuWidth: localStorage.getItem(\"menuWidth\")\r\n                ? parseInt(localStorage.getItem(\"menuWidth\"))\r\n                : undefined,\r\n            onPathChange: ({ path, isPathExist, keys }) =>\r\n                console.log(path, isPathExist, keys),\r\n            onMenuWidthChange: (width) =>\r\n                localStorage.setItem(\"menuWidth\", width),\r\n            onCollapsedChange: (collapsed) =>\r\n                localStorage.setItem(\"menuCollapsed\", collapsed),\r\n        },\r\n        locale: \"zh-ch\",\r\n    },\r\n};\r\n\r\nReactDOM.render(<FrameWork config={config} />, mountNode);\r\n```\r\n\r\n使用微前端时，需导入 polyfill，兼容 ie11\r\n\r\npolyfill.ts\r\n\r\n```ts\r\nimport \"whatwg-fetch\";\r\nimport \"custom-event-polyfill\";\r\nimport \"core-js\";\r\n```\r\n\r\n引入样式\r\n\r\nglobal.css\r\n\r\n```css\r\n@global-import '@aishu-tech/workshop-framework-system/dist/workshop-framework-system.umd.min.css';\r\n```\r\n\r\n## 组件\r\n\r\n### 1、FrameWork\r\n\r\n工作台插件框架\r\n\r\n#### API\r\n\r\n**FrameWorkPropsType**\r\n\r\n| 属性           | 说明                 | 类型                                 | 默认值 |\r\n| -------------- | -------------------- | ------------------------------------ | ------ |\r\n| config         | 配置信息             | Config                               | -      |\r\n| customNavigate | 自定义 navigate 方法 | (path: string) => void               | -      |\r\n| onGetNavigate  | 获取 navigate 方法   | (navigate: NavigateFunction) => void | -      |\r\n\r\n**Config：**\r\n\r\n| 属性                      | 说明                                                         | 类型                     | 默认值 |\r\n| ------------------------- | ------------------------------------------------------------ | ------------------------ | ------ |\r\n| nav                       | 顶栏、菜单等信息                                             | Nav                      | -      |\r\n| appProps                  | 内容页（子应用 or 主应用的组件）的信息，所有的内容页均会继承 | Record<string, any>      | {}     |\r\n| microfrontedConfiguration | 微应用的配置信息                                             | Record<string, any>      | {}     |\r\n| microfrontedLoadingMode   | 微应用的加载模式                                             | router \\| manual \\| none | router |\r\n\r\n**Nav：**\r\n\r\n| 属性                 | 说明                                                 | 类型                                         | 默认值   |\r\n| -------------------- | ---------------------------------------------------- | -------------------------------------------- | -------- |\r\n| logo                 | base64 的 logo，不可和 logoSrc、logoElement 同时存在 | string                                       | -        |\r\n| logoSrc              | logo 图片的 src，不可同时存在                        | string                                       | -        |\r\n| logoElement          | logo 元素，不可同时存在                              | React.ReactElement                           | -        |\r\n| theme                | 主题色                                               | string                                       | #126EE3  |\r\n| customStyle          | 是否自定义主题色                                     | boolean                                      | false    |\r\n| themeMode            | 主题模式                                             | dark \\| light                                | dark     |\r\n| headBarStyle         | 顶栏的样式                                           | Record<string,any>                           | -        |\r\n| account              | 账号信息                                             | AccountType                                  | -        |\r\n| extraElements        | 顶栏的其他元素                                       | Array\\<ExtraElementsType\\>                   | -        |\r\n| menu                 | 菜单信息                                             | Menu                                         | -        |\r\n| routerMode           | 路由模式                                             | browser \\| hash                              | browser  |\r\n| routerBasename       | 基准 url，browser 路由时可传递                       | string                                       | -        |\r\n| pathMatchMode        | path 匹配模式                                        | complete \\| prefix                           | complete |\r\n| MainContentComponent | 无菜单时的内容                                       | (props: Record<string, any>) => ReactElement | -        |\r\n| locale               | 语言环境                                             | zh-cn \\| zh-tw \\| en-us                      | zh-cn    |\r\n\r\n**AccountType**\r\n\r\n| 属性    | 说明               | 类型                                                         | 默认值 |\r\n| ------- | ------------------ | ------------------------------------------------------------ | ------ |\r\n| name    | 账号名称           | string                                                       | -      |\r\n| items   | 下拉选项的内容     | Array\\<AccountItemType\\>                                     | -      |\r\n| onClick | 下拉选项的点击事件 | (keys: Array\\<string\\>, props?: Record<string, any>) => void | -      |\r\n\r\n**AccountItemType**\r\n\r\n| 属性                | 说明         | 类型                                    | 默认值 |\r\n| ------------------- | ------------ | --------------------------------------- | ------ |\r\n| key                 | 唯一标志     | string                                  | -      |\r\n| label               | 标题         | string                                  | -      |\r\n| selectable          | 是否可选中   | boolean                                 | true   |\r\n| divider             | 是否有下划线 | boolean                                 | false  |\r\n| children            | 子项         | Array\\<{ key: string; label: string }\\> | -      |\r\n| defaultSelectedKeys |              | Array\\<string\\>                         | -      |\r\n\r\n**ExtraElementsType**\r\n\r\n| 属性    | 说明     | 类型                                               | 默认值 |\r\n| ------- | -------- | -------------------------------------------------- | ------ |\r\n| icon    | 图标     | React.ReactElement                                 | -      |\r\n| key     | 唯一标志 | string                                             | -      |\r\n| label   | 标题     | string \\| React.ReactElement                       | -      |\r\n| onClick | 点击事件 | (key: string, props?: Record<string, any>) => void | -      |\r\n| float   | 定位     | left \\| right                                      | right  |\r\n\r\n**Menu**\r\n\r\n| 属性               | 说明                                   | 类型                                                                           | 默认值 |\r\n| ------------------ | -------------------------------------- | ------------------------------------------------------------------------------ | ------ |\r\n| items              | 导航菜单数组                           | Array\\<MenuType\\>                                                              | -      |\r\n| getItems           | 导航菜单函数，items 和 getItems 二选一 | () => Array\\<MenuType\\>                                                        | -      |\r\n| menuResizeDisabled | 是否禁止调整菜单宽度                   | boolean                                                                        | false  |\r\n| defaultCollapsed   | 菜单是否收起                           | boolean                                                                        | false  |\r\n| onCollapsedChange  | 菜单展开、收起事件                     | (collapsed: boolean) => void                                                   | -      |\r\n| defaultMenuWidth   | 菜单宽度                               | number                                                                         | 240    |\r\n| onMenuWidthChange  | 菜单宽度发生变化                       | (menuWidth: number) => void                                                    | -      |\r\n| onPathChange       | 路由发生变化                           | (param: { keys: Array\\<string\\>; path: string; isPathExist: boolean }) => void | -      |\r\n| viewAllIcon        | 自定义查看全部菜单的按钮               | ViewAllIconType                                                                | -      |\r\n\r\n**MenuType**\r\n\r\n| 属性     | 说明                                                                     | 类型                                                            | 默认值 |\r\n| -------- | ------------------------------------------------------------------------ | --------------------------------------------------------------- | ------ |\r\n| key      | 唯一标志                                                                 | string                                                          | -      |\r\n| label    | 菜单标题                                                                 | React.ReactNode                                                 | -      |\r\n| title    | 设置收缩时展示的悬浮标题                                                 | string                                                          | -      |\r\n| icon     | 菜单图标                                                                 | React.ReactElement                                              | -      |\r\n| path     | 路由                                                                     | string                                                          | -      |\r\n| app      | 子应用或者主应用组件                                                     | AppType \\| (props: Record<string, any>) => ReactElement)        | -      |\r\n| paths    | 路由数组（when 一个菜单对应多个路由）                                    | Array\\<string>                                                  | -      |\r\n| apps     | 子应用或者主应用组件数组（when 一个菜单对应多个路由），和 paths 一一对应 | Array<AppType \\| (props: Record<string, any>) => ReactElement)> | -      |\r\n| isInMenu | path 是否在菜单中                                                        | boolean                                                         | true   |\r\n| style    | 当前页的样式，和 path、app 一起的                                        | Record<string, any>                                             | {}     |\r\n| children | 子项。当 path、app 存在时，没有子项                                      | Array\\<MenuType\\>                                               | -      |\r\n\r\n**AppType**\r\n\r\n| 属性  | 说明                   | 类型                  | 默认值 |\r\n| ----- | ---------------------- | --------------------- | ------ |\r\n| name  | 子应用 name            | string                | -      |\r\n| entry | 子应用 entry           | string                | -      |\r\n| props | 传递给该子应用的 props | Record\\<string, any\\> | -      |\r\n\r\n**ViewAllIconType**\r\n\r\n| 属性       | 说明             | 类型                                                                       | 默认值 |\r\n| ---------- | ---------------- | -------------------------------------------------------------------------- | ------ |\r\n| icon       | icon             | React.ReactElement                                                         | -      |\r\n| label      | icon 的 label    | string                                                                     | -      |\r\n| content    | 内容             | React.ReactElement \\| ((props: Record<string, any>) => React.ReactElement) | -      |\r\n| closeIcon  | 是否显示关闭按钮 | boolean                                                                    | false  |\r\n| maskZIndex | 遮罩层的 z-index | number                                                                     | 1      |\r\n\r\n### 2、HeadBar\r\n\r\n顶栏\r\n\r\n#### 示例\r\n\r\n```tsx\r\n<HeadBar\r\n    logo={\r\n        \"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\"\r\n    }\r\n    extraElements={[\r\n        {\r\n            label: \"工作台\",\r\n            key: \"key1\",\r\n            float: \"left\",\r\n        },\r\n        {\r\n            label: (\r\n                <Dropdown overlay={menu}>\r\n                    <div\r\n                        style={{\r\n                            width: \"150px\",\r\n                            textOverflow: \"ellipsis\",\r\n                            overflow: \"hidden\",\r\n                            whiteSpace: \"nowrap\",\r\n                        }}\r\n                    >\r\n                        我是一个很长只是网络哈哈哈哈\r\n                        <DownOutlined />\r\n                    </div>\r\n                </Dropdown>\r\n            ),\r\n            key: \"key2\",\r\n            float: \"left\",\r\n            onClick: (key) => {\r\n                // xxx\r\n            },\r\n        },\r\n        {\r\n            icon: <CiOutlined />,\r\n            label: \"API文档\",\r\n            key: \"key333\",\r\n            float: \"right\",\r\n            onClick: (key) => {\r\n                // xxx\r\n            },\r\n        },\r\n        {\r\n            icon: <CiOutlined />,\r\n            label: \"系统配置\",\r\n            key: \"key333444\",\r\n            float: \"right\",\r\n            onClick: (key) => {\r\n                // xxx\r\n            },\r\n        },\r\n    ]}\r\n    account={{\r\n        name: \"admin\",\r\n        items: [\r\n            {\r\n                label: \"语言\",\r\n                key: \"language\",\r\n                children: [\r\n                    {\r\n                        label: \"简体中文\",\r\n                        key: \"zh-cn\",\r\n                    },\r\n                    {\r\n                        label: \"繁体中文\",\r\n                        key: \"zh-tw\",\r\n                    },\r\n                    {\r\n                        label: \"English\",\r\n                        key: \"en-us\",\r\n                    },\r\n                ],\r\n                defaultSelectedKeys: [\"en-us\"],\r\n            },\r\n            {\r\n                label: \"退出\",\r\n                key: \"logout\",\r\n            },\r\n        ],\r\n        onClick: (keys) => {\r\n            // xxx\r\n        },\r\n    }}\r\n/>\r\n```\r\n\r\n#### API\r\n\r\n**HeadBarPropsType**\r\n\r\n| 属性          | 说明                          | 类型                       | 默认值 |\r\n| ------------- | ----------------------------- | -------------------------- | ------ |\r\n| className     | class                         | string                     | -      |\r\n| logo          | base64 的 logo，不可同时存在  | string                     | -      |\r\n| logoSrc       | logo 图片的 src，不可同时存在 | string                     | -      |\r\n| logoElement   | logo 元素，不可同时存在       | React.ReactElement         | -      |\r\n| account       | 账号信息                      | AccountType                | -      |\r\n| extraElements | 顶栏的其他元素                | Array\\<ExtraElementsType\\> | -      |\r\n| props         | 额外的 props 信息             | Record<string, any>        | -      |\r\n| themeMode     | 主题模式                      | dark \\| light              | dark   |\r\n| style         | 样式                          | Record<string, any>        | -      |\r\n\r\n### 3、SideBar\r\n\r\n侧边栏\r\n\r\n#### 示例\r\n\r\n```tsx\r\n<SideBar\r\n    openKeys={[]}\r\n    selectedKeys={[]}\r\n    locale={\"en-us\"}\r\n    theme={\"red\"}\r\n    customStyle={false}\r\n    menuWidth={300}\r\n    items={menusItems}\r\n    height={300}\r\n/>\r\n```\r\n\r\n#### API\r\n\r\n**SideBarPropsType**\r\n\r\n| 属性                 | 说明                                          | 类型                                                                  | 默认值  |\r\n| -------------------- | --------------------------------------------- | --------------------------------------------------------------------- | ------- |\r\n| items                | 菜单                                          | Array\\<MenuItemType\\>                                                 | -       |\r\n| selectedKeys         | 当前选中的菜单项 key 数组                     | Array\\<string\\>                                                       | []      |\r\n| openKeys             | 当前展开的菜单项 key 数组(仅展开侧边栏时生效) | Array\\<string\\>                                                       | []      |\r\n| height               | 高度                                          | number \\| string                                                      | 100%    |\r\n| menuWidth            | 菜单宽度(展开时侧边栏的宽度)                  | number                                                                | 240     |\r\n| theme                | 主题色                                        | string                                                                | #126EE3 |\r\n| collapsed            | 侧边栏是否收起                                | boolean                                                               | false   |\r\n| locale               | 语言环境                                      | zh-cn \\| zh-tw \\| en-us                                               | zh-cn   |\r\n| menuResizeDisabled   | 是否禁止调整菜单宽度                          | boolean                                                               | false   |\r\n| onCollapsedChange    | 菜单展开、收起事件                            | (collapsed: boolean) => void                                          | -       |\r\n| onMenuWidthChange    | 菜单宽度发生变化事件                          | ({ width, expandedWidth }: { width: number; expandedWidth: number; }) | -       |\r\n| onSelectedKeysChange | 菜单项选中事件                                | (selectedKeys: Array\\<string\\>) => void                               | -       |\r\n| onOpenKeysChange     | 菜单项展开收起事件                            | (openKeys: Array\\<string\\>) => void                                   | -       |\r\n| viewAllIcon          | 自定义查看全部菜单的按钮                      | ViewAllIconType                                                       | -       |\r\n\r\n### 4、useBlocker\r\n\r\n拦截路由，用于在路由发生变化时给用户做一个提醒。\r\n\r\n#### 示例\r\n\r\n```tsx\r\n/**\r\n * UnsavedPrompt.tsx\r\n * 用于提醒用户\r\n */\r\nimport { useState, useRef } from \"react\";\r\nimport { Modal } from \"antd\";\r\n\r\nexport default function UnsavedPrompt({ when, useBlocker }: any): JSX.Element {\r\n    const [open, setOpen] = useState(false);\r\n    const blockRef = useRef<any>(null);\r\n    useBlocker((tx) => {\r\n        setOpen(true);\r\n        blockRef.current = tx;\r\n    }, when);\r\n\r\n    return (\r\n        <Modal\r\n            visible={open}\r\n            onOk={() => blockRef.current?.retry()}\r\n            onCancel={() => setOpen(false)}\r\n        >\r\n            <p className=\"text-center text-light-700 text-sm\">这里是提示内容</p>\r\n        </Modal>\r\n    );\r\n}\r\n\r\n/**\r\n * Demo.tsx\r\n * 这里是子应用\r\n */\r\nimport UnsavedPrompt from \"./UnsavedPrompt\";\r\nimport { useBlocker } from \"@aishu-tech/workshop-framework-system\";\r\n\r\nconst Demo = (props) => {\r\n    return (\r\n        <div>\r\n            Demo的内容\r\n            <UnsavedPrompt useBlocker={useBlocker} />\r\n            {/* 两种都可 <UnsavedPrompt useBlocker={props.useBlocker} /> */}\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default Demo;\r\n```\r\n\r\n### 5、loadMicroApp\r\n\r\n`qiankun` 的 `loadMicroApp`，便于子应用加载子应用\r\n\r\n### 6、prefetchApps\r\n\r\n`qiankun` 的 `prefetchApps`，用于手动预加载指定的微应用静态资源\r\n","readmeFilename":"README.md"}