{"_id":"@alicloudfe/components-console-menu","_rev":"11-6ead87f54bc3beb9282641ed94eab730","name":"@alicloudfe/components-console-menu","dist-tags":{"latest":"1.1.0"},"versions":{"0.1.0":{"name":"@alicloudfe/components-console-menu","version":"0.1.0","description":"React component for Alibaba Cloud.","main":"lib/index.js","typings":"cc-dev-out/index.d.ts","module":"es/index.js","publishConfig":{"access":"public"},"keywords":["wind","wind-rc-console-menu","react","react component"],"author":{"name":"csr632","email":"632882184@qq.com"},"license":"MIT","engines":{"node":">=7.6.0"},"scripts":{"dev":"vite serve -c vite.demos.ts","babel":"breezr build --engine babel","babel:esm":"breezr build --engine babel --es-module","types":"tsc -p src --emitDeclarationOnly","build":"breezr build --engine webpack","clean":"rm -rf dist lib es","prepare":"npm run clean && concurrently \"npm:babel\" \"npm:babel:esm\" \"npm:types\" \"npm:build\" && echo \"Prepare package successfully!\""},"dependencies":{"@babel/runtime":"^7.5.5","classnames":"^2.2.6","warning":"^4.0.3","@pika/react":"^16.13.1","@pika/react-dom":"^16.13.1"},"peerDependencies":{"@alicloudfe/components":"*","prop-types":"^15.7.0","react":"^16.8.0","react-dom":"^16.8.0","styled-components":"^4.2.0"},"devDependencies":{"@alicloudfe/components":"^1.0.4","@alicloud/console-toolkit-cli":"^1.0.8","@alicloudfe/components-fake-browser":"^1.0.0","concurrently":"^5.3.0","vite":"^1.0.0-rc.4","typescript":"^3.9.7"},"_id":"@alicloudfe/components-console-menu@0.1.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.7","dist":{"integrity":"sha512-iNDeHdv2ZR6CcCge4IDfgZVN0b+gsegYidkvCryn3QYyTgZaWeoxGSK/x5Wa4roRPJ2AHeF0azgvQNxZePtuiA==","shasum":"be6d9301f6ca1914a0ee51c020b66d3fceb428f5","tarball":"https://registry.npmjs.org/@alicloudfe/components-console-menu/-/components-console-menu-0.1.0.tgz","fileCount":61,"unpackedSize":187858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfj+HxCRA9TVsSAnZWagAAGi0P+QA6+xnq41XZmMuNafPc\nPUIEwpKTIeI1gkOD/g4tYic3i7lwxcVm85GY8tGYSsO4fvadgojMHfqwPIQ0\naGHLtfShhkaQ7TxC/Uowkfh1ut9Xpp0yrSrWC/HSABQuhv0X5Wa4yIUWecEq\n4OmZr8EaLMaUZdL8AdvTMayOY67kGKR0qBVFVodKpuivjJLmeiZgx/cXEUap\nun9yg1s3aGgd6Q3RhihyOOmGw3a1wcGVToTcK3CG0bXiSW7GL4Zwwy6cIeNf\nx2EgAqYCElkpWMwWUHALcBgDJ6CYMSo8U6G6Dy0sW581uCI/XYeV2CNt1J6Q\noa/3v0PXXDnykgSy7IKwfaT4Sj56iBboZx47DKBmW+9H99FegC6u6RiaMG4s\n0Pz5YX4FiUoAwQdJeh08sNy8OTA9HaNxxC3Y9u4D8GU0MyVq1ohSFY+W7wrG\nkv+0fMb5XfeTlkZCHfJvJuA9t00Pevw0lieTY5PXMBWTUwvdaxX/6feL3CCJ\nqt9GvxC/U4dagk/FlgpTHvsF+SF3M0JzmLOpNfzCx5ukahLFbAB3jglKDzcw\nZyAhW/nV6LBmhbeDWriiuS/j64zb5A/UURwBkIm4fxZTlA+d/leW3Arw/e1p\nKjh7/I3R5bOQb9t5HrXzR0oAOTkXdLv1Z/+9THgVWJXulcmUzzc3gXD+ygDf\n8YJL\r\n=ntZB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICQXeYiOOIu9+5VU3+4iwTKYrhqIRjnMrsHmcLlYIVEXAiEA3Y0Wvr7naW3V/ys+Xgn5LIgPDlcIEdnxy8d5M12l1q4="}]},"maintainers":[{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"zuoqi","email":"1398772969@qq.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/components-console-menu_0.1.0_1603265009085_0.7642886107432736"},"_hasShrinkwrap":false},"1.0.0":{"name":"@alicloudfe/components-console-menu","version":"1.0.0","description":"React component for Alibaba Cloud.","main":"lib/index.js","typings":"cc-dev-out/index.d.ts","module":"es/index.js","publishConfig":{"access":"public"},"keywords":["wind","wind-rc-console-menu","react","react component"],"author":{"name":"csr632","email":"632882184@qq.com"},"license":"MIT","engines":{"node":">=7.6.0"},"scripts":{"dev":"vite serve -c vite.demos.ts","babel":"breezr build --engine babel","babel:esm":"breezr build --engine babel --es-module","types":"tsc -p src --emitDeclarationOnly","build":"breezr build --engine webpack","clean":"rm -rf dist lib es","prepare":"npm run clean && concurrently \"npm:babel\" \"npm:babel:esm\" \"npm:types\" \"npm:build\" && echo \"Prepare package successfully!\""},"dependencies":{"@babel/runtime":"^7.5.5","classnames":"^2.2.6","warning":"^4.0.3","@pika/react":"^16.13.1","@pika/react-dom":"^16.13.1"},"peerDependencies":{"@alicloudfe/components":"*","prop-types":"^15.7.0","react":"^16.8.0","react-dom":"^16.8.0","styled-components":"^4.2.0"},"devDependencies":{"@alicloudfe/components":"^1.0.4","@alicloud/console-toolkit-cli":"^1.0.8","@alicloudfe/components-fake-browser":"^1.0.0","concurrently":"^5.3.0","vite":"^1.0.0-rc.4","typescript":"^3.9.7"},"_id":"@alicloudfe/components-console-menu@1.0.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.7","dist":{"integrity":"sha512-v6pHjGwJbQ0+7O3nd8+jvo5/ukOMYSqHmas4px7M3NIWmpLLeMMMRk3NYgGaHt74VLkb8D3sbqnrEUymRxN0YQ==","shasum":"218bc1f24b839900a0f4da2e77acd9fada615e4a","tarball":"https://registry.npmjs.org/@alicloudfe/components-console-menu/-/components-console-menu-1.0.0.tgz","fileCount":61,"unpackedSize":187858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfj+IXCRA9TVsSAnZWagAAEqEQAIGdJErhLQwe2GdvJvlN\nO/EG5cu2u9l+8XpjP4Y/UuX5IfuktuaUij8MBhIOdjKda7WoLZ2bA6HaR/fn\n+z1oHMqKC8VpEVf6zLwrm2LsvdSC7bIyfqJDwN/Hv/9a5iIfraILDZ/TExVd\nUPewk3VT/eqhaTf+4gqQ/RbNlvDa/zb80mWEU4NiAL1ul2+aaMN+dvF7z0GR\nJYawyUHVgg0Q2udQZ7ZaVolKU5W15MrwB8UsOkvW7dYmbOWrIgm0tXSSqW/l\nDii5VhbyKEmzRSa6ESWvRYshUS7Qju7/trrHq6JD5mbxdwUA0eTO9IqTIVEz\n6bQH3bKeJ7QAC540EZmz9qWswaSNjZjuAHaUUqF60ejIrHeD2IobaHWkaBeC\n1Ax3QsunM/aMtLx7s46YVs9jSaP7HyD+CYLNtKegVHHH7qIrkbEFdWXNZfl0\n9tLOpBwnoVfKtyVuTPgmJbdNw9JNXQg6hQdRB38J+XVsU6UPO2v4QqktGnN4\n6455K4mqaWiwpX4iqrDFlLwvbx1AN4GAkZv3+ciZhJyR5XyXCgAcz3iWaEXn\nvfJgFc5QvEBlWoZlwaCET4jq4YqO6G+h191Kg1GTtgguj4WRVb8bOpvF8XNa\nUNwzGUoxnZSJqv7APDW8VV6wimlAFwp0yNihAgLSMfHygjUv3Enivlk52rRC\n+P2v\r\n=ieXf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA7hCGb4QjEwI5E8bMw4DagcB4b3rvcVkMiWaC5bGEZKAiEA64MMRNzz01tuRsvrRlplQo3PoTN/CKUX6tR3uapcLTo="}]},"maintainers":[{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"zuoqi","email":"1398772969@qq.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/components-console-menu_1.0.0_1603265046940_0.809030788045876"},"_hasShrinkwrap":false},"1.0.1":{"name":"@alicloudfe/components-console-menu","version":"1.0.1","description":"React component for Alibaba Cloud.","main":"lib/index.js","typings":"cc-dev-out/index.d.ts","module":"es/index.js","publishConfig":{"access":"public"},"keywords":["wind","wind-rc-console-menu","react","react component"],"author":{"name":"csr632","email":"632882184@qq.com"},"license":"MIT","engines":{"node":">=7.6.0"},"scripts":{"dev":"vite serve -c vite.demos.ts","babel":"breezr build --engine babel","babel:esm":"breezr build --engine babel --es-module","types":"tsc -p src --emitDeclarationOnly","build":"breezr build --engine webpack","clean":"rm -rf dist lib es","prepare":"npm run clean && concurrently \"npm:babel\" \"npm:babel:esm\" \"npm:types\" \"npm:build\" && echo \"Prepare package successfully!\""},"dependencies":{"@babel/runtime":"^7.5.5","classnames":"^2.2.6","warning":"^4.0.3","@pika/react":"^16.13.1","@pika/react-dom":"^16.13.1"},"peerDependencies":{"@alicloudfe/components":"*","prop-types":"^15.7.0","react":"^16.8.0","react-dom":"^16.8.0","styled-components":"^4.2.0"},"devDependencies":{"@alicloudfe/components":"^1.0.4","@alicloud/console-toolkit-cli":"^1.0.8","@alicloudfe/components-fake-browser":"^1.0.0","concurrently":"^5.3.0","vite":"^1.0.0-rc.4","typescript":"^3.9.7"},"_id":"@alicloudfe/components-console-menu@1.0.1","_nodeVersion":"12.16.2","_npmVersion":"6.14.7","dist":{"integrity":"sha512-62PUSLTo9ZNSPtzZvbHv1oCt5sLfsFpSYa4hhEtOTgj2MsX1iyQIhCcB4HsWMaA6Hq2z8/1cJV7xHkdiezmODA==","shasum":"fd3f470ec8d44b7ca3c420bc402479a9f66c5f97","tarball":"https://registry.npmjs.org/@alicloudfe/components-console-menu/-/components-console-menu-1.0.1.tgz","fileCount":60,"unpackedSize":187762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfj+ZvCRA9TVsSAnZWagAAoYsP/0RweDvOglCjBUl4F2AD\nXtFlWxe1EBBpyBQN2PdDLF7guMUJFjSZCCOcqwO7QUeIlFFMXUIzTbick0lW\ngodo/qsa64J7VSViXzejhhRIUWhBZkzNdA1ZSJivQZpgIqBlQYkVdgKM/SMc\n3bJI3EHZYJEWam7UWN3HnYf/XXbX0We09ooQsJJrfnrpfHgOCiRVKAAsZuzJ\na/bTWI4GMs6LFmGEGkXXO9QjLjhF/eVT/XJxHrM2aKZk/1/WwO/rmG41/jYW\nfevkoaI6b+QYVlHarqY1muW7PEb7Js1CXL6UBhBKaJIVxSIAYX7KuUufa1Gg\nZsTqtT1Wi+RnpRQ0wRmIqiD0rFG85yo3JU/sCappskLFWJTd06rAcRAKsoOO\nXY1we1IfdYjQNCOuJkXADMRicHfXo2XDHFO8P9gPGjvnxgcx504us6TSwhZ3\nEyWo2LhDKl2g30M0IAS4xL4vyDXr3bHiKFTgZwZksnkPJ7xAincPM4SIynN+\nDXm7RCADK4x5B1GEiMquhZTXnwZ7BouKoeqrC5MZrr6p91q5St2vLbJUv1aM\nOBlbh2LcyYRg1QQQ3Fm9D2+LSshKrdEQKJnK6w5Jjdcmi7YyQzYIloVRoD4a\nDdWrCd7i8DXdnUFx7kT7QkiHtzKTRDYoXb8s5Cuj+FwtP0BpcE4P705xJcF9\n4jDG\r\n=qCP0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGehzGcOq47Ay66KOuwjTBsIGwPwt/IANJTupGXz9UaeAiByn/rlfozS7+0XnagtFK3hLD2AL6aS5LEntBA9ghK5eQ=="}]},"maintainers":[{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"zuoqi","email":"1398772969@qq.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/components-console-menu_1.0.1_1603266158675_0.05387118610514574"},"_hasShrinkwrap":false},"1.1.0":{"name":"@alicloudfe/components-console-menu","version":"1.1.0","description":"React component for Alibaba Cloud.","main":"lib/index.js","typings":"lib/index.d.ts","module":"es/index.js","publishConfig":{"access":"public"},"keywords":["wind","wind-rc-console-menu","react","react component"],"author":{"name":"csr632","email":"632882184@qq.com"},"license":"MIT","engines":{"node":">=7.6.0"},"scripts":{"dev":"vite serve -c vite.demos.ts","babel":"breezr build --engine babel","babel:esm":"breezr build --engine babel --es-module","types":"tsc -p src --emitDeclarationOnly","build":"breezr build --engine webpack","clean":"rm -rf dist lib es","prepare":"npm run clean && concurrently \"npm:babel\" \"npm:babel:esm\" \"npm:types\" \"npm:build\" && echo \"Prepare package successfully!\""},"dependencies":{"@babel/runtime":"^7.5.5","classnames":"^2.2.6","warning":"^4.0.3","@pika/react":"^16.13.1","@pika/react-dom":"^16.13.1"},"peerDependencies":{"@alicloudfe/components":"*","prop-types":"^15.7.0","react":"^16.8.0","react-dom":"^16.8.0","styled-components":"^4.2.0"},"devDependencies":{"@alicloudfe/components":"^1.0.4","@alicloud/console-toolkit-cli":"^1.0.8","@alicloudfe/components-fake-browser":"^1.0.0","concurrently":"^5.3.0","vite":"^1.0.0-rc.4","typescript":"^3.9.7"},"_id":"@alicloudfe/components-console-menu@1.1.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.7","dist":{"integrity":"sha512-cQIzobPn1PiyTT4i+B4lD2GFvIiYIGR8N8mmSMSKSCb/8jAbD/c0YdX2HGf01Y0uD62MzS/9LMFHRhXKlbc3+Q==","shasum":"0e936ee96cb5249f18508c31588e988b93152e55","tarball":"https://registry.npmjs.org/@alicloudfe/components-console-menu/-/components-console-menu-1.1.0.tgz","fileCount":71,"unpackedSize":199585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfn8LaCRA9TVsSAnZWagAAImYP/R3aNBUYxNCtwinPALwl\ntTQcBX9olaCXeMnHoMcGjFq4qJLZSi9e2jh1nESrSkVbC4f5zpJyf6gXX+vC\nF++DS2OjUXM+au7H+qMz2xA31P2BJKluRyvtMN7Z9fqdYSKylWnxF0mzHZyZ\nSmICMqUTAhBs+vQtnsCsTNgDsQNLuUDA5FrCaMy2UbK3/cNewZ2ANs0MLpib\n/tq8I5DxggIeSKSDTgdFTEv7GKpJyslAIJzJ2xWE7vuGJG8bD7n1dHO0KD46\ngtzLUXQrItmSGUrZEKq5nUF73I7D8YfS83oM2INlYCxQUusKA0N04baqSbaZ\n6F3c2XYnbRK4WCD7NBFbK4HfL04DUKIIGGQYKcznjSL08Pi+SF+sINl49JHd\n6QnZNoRHPGhlCowokPOeKenuRwmAE+uTS4Hhd7Fhydzmd+gAiozIN592A7nD\n0vHvxsdlCR2osyjhuUeL6qqcGa/CZRBss8zKcC8SRKvuzYCfxIh21yy5vB27\nky2kt29n6GggE1hSySpPIEJWHNZ1JI6Qrg7Tso0qW7os0KIjLUNp+mKTZ0us\ne35lOugrsWQWUt6j5j7HbEZBzTk7dJVzQ0VIwRxOdbuTtKyvADVLXb8BuCbc\nFOb79X6yv4zgNJApqOKzPkPwx0n6sVF+fpb5BJJ/MhMyGD71DIhhuByu4wmd\n2GkQ\r\n=fVxf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEzgZeioopQGVStEVEIYd5gsRRjjK5TIGGFw+LrFPVxsAiBoGA4VHwP1Zn2Uv6wvSHeHUgAj/5MnuO29eo6UUauh1Q=="}]},"maintainers":[{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"zuoqi","email":"1398772969@qq.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/components-console-menu_1.1.0_1604305625769_0.5715718898829774"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-21T07:23:28.810Z","0.1.0":"2020-10-21T07:23:29.241Z","modified":"2023-12-07T06:18:18.629Z","1.0.0":"2020-10-21T07:24:07.055Z","1.0.1":"2020-10-21T07:42:38.930Z","1.1.0":"2020-11-02T08:27:05.954Z"},"maintainers":[{"email":"864115770@qq.com","name":"zhongliang.lsh"},{"email":"bowei.jbw@gmail.com","name":"bowei.jbw"},{"email":"284989344@qq.com","name":"yanqianyu.yqy"},{"email":"861918672@qq.com","name":"kiwikang99"},{"email":"1398772969@qq.com","name":"zuoqi"},{"email":"console-fe@alibabacloud.com","name":"console-fe"},{"email":"2509625275@qq.com","name":"chesstar"}],"description":"React component for Alibaba Cloud.","keywords":["wind","wind-rc-console-menu","react","react component"],"author":{"name":"csr632","email":"632882184@qq.com"},"license":"MIT","readme":"# @alicloudfe/components-console-menu\n\n为阿里云控制台提供标准的应用级别的导航菜单，也可以应用在其他的中后台产品中\n\n### 1.0 的新特性\n\n##### 组件模块\n\n###### 基础导航菜单\n\n在之前的版本中默认导出的 `` 组件包含了完整的路由行为，在 1.0 中，默认导出的组件 **不再包含** 路由行为，你可以根据自己项目中的路由环境来映射 `` 的展现和行为（如设置 `activeKey` 等）。\n\n```javascript\nimport ConsoleMenu from '@alicloudfe/components-console-menu'\nimport { Route, Link } from 'react-router-dom'\n\nconst mapLocationToActiveKey = (location) => {\n if (!location || !location.pathname || location.pathname === '/') {\n return 'overview'\n }\n\n return location.pathname.replace(/^\\//, '')\n}\n\nconst App = () => (\n \n {\n ({ location }) => (\n \n \n 概览\n \n \n 列表\n \n \n \n 日常\n \n \n 生产\n \n \n \n )\n }\n \n)\n```\n\n你也可以用结构化的描述来定制 `` 的内容。下面的示例作用和上面的作用完全相同：\n\n```javascript\nimport ConsoleMenu from '@alicloudfe/components-console-menu'\nimport { Route, Link } from 'react-router-dom'\n\nconst mapLocationToActiveKey = (location) => {\n if (!location || !location.pathname || location.pathname === '/') {\n return 'overview'\n }\n\n return location.pathname.replace(/^\\//, '')\n}\n\nconst renderAsLink = ({ key, label }) => (\n {label}\n)\n\nconst items = [\n { key: 'overview', label: '概览', render: renderAsLink },\n { key: 'list', label: '列表', render: renderAsLink },\n {\n key: 'logs',\n label: '列表',\n items: [\n { key: 'daily', label: '日常', render: renderAsLink },\n { key: 'prod', label: '生产', render: renderAsLink, visible: false },\n ]\n },\n]\n\nconst App = () => (\n \n {\n ({ location }) => (\n \n )\n }\n \n)\n```\n\n###### 带有路由功能的导航菜单\n\n如果你的项目使用了 `dva^2.0.0` ，我们也提供了 `` 组件来提供与之适配的路由功能。\n\n_（截止目前为止， `` 必须使用 items 进行结构化的传值，使用组件声明方式来编写子组件的方式可能会存在问题，我们计划在不久之后来修复这个问题）_\n\n```javascript\nimport RoutableMenu from '@alicloudfe/components-console-menu/RoutableMenu'\n\nconst items = [\n {\n // 在当前路由路径为 `/overview` 时将该 Item 变为选中状态\n key: '/overview',\n label: '概览',\n // 点击该 Item 会跳转至 `/overview`\n to: '/overview'\n },\n {\n key: '/product/:region',\n label: '产品',\n to: '/product/cn-hangzhou'\n },\n {\n // 在当前路由路径匹配 `/instance/:region?` 时将该 Item 变为选中状态\n key: '/instance/:region?',\n label: '实例',\n to: (routeProps, item) => {\n // 该方法并不是我们推荐的做法，只是为了表示 `to` 可以用函数表达式来声明：\n // 第一个参数是当前的 route props ，第二个参数是当前的 item 的结构化信息\n // 你可以利用这些信息来动态地返回需要进行跳转的 pathname 或 location\n // 下面的这个例子使用了当前路由的匹配信息（注意：并不是对于该 item 的匹配）\n // 来进行相应的跳转。如果当前的路由中包含 param: region ，（譬如从\n // `/product/cn-hangzhou` 点击该 item 将会跳转到 `/instance/cn-hangzhou`\n //\n // 在实际项目中的最佳实践是直接派发父级 pathname ，然后在 中通过上下文\n // 或者其他方式进行路由重定向\n //\n const { match: { params: { region } = {} } = {} } = routeProps\n return `/instance/${region}`\n },\n // 除了使用 `key` 来匹配单个的路由路径之外，还可以使用 `activePathPatterns` 来\n // 尝试匹配多个路由路径，`` 内置的匹配算法将会在尝试将当前的路径匹配\n // `key` 失败之后，按照 `activePathPatterns` 指定的顺序依次进行尝试匹配，一旦匹配\n // 成功，则将该 Item 变为选中状态\n activePathPatterns: [\n '/instance/:regionId/:instanceId',\n ],\n },\n {\n key: 'logs',\n label: '列表',\n items: [\n {\n key: '/daily',\n label: '日常',\n // 使用 href 将使用超链接的方式打开指定的链接，区别于应用内的路由跳转\n href: 'https://daily.project.com',\n },\n {\n key: '/prod',\n label: '生产',\n to: '/prod',\n },\n ]\n },\n]\n\nconst App = () => (\n \n)\n```\n\n#### 可高度定制的组件\n\n所有的展示组件（ Presentation Components ）都已经通过`StyledComponents`导出，这些组件可以作为样式自定义的切入点。如果你希望自定义 `` 的样式，可以使用 `styled-components` 的方式对样式进行修改，而不用担心对全局或其他模块产生冲突。如这个例子所示：\n\n```javascript\nimport styled from 'styled-components'\nimport ConsoleMenu, { StyledComponents } from '@alicloudfe/components-console-menu'\n\nconst CustomizedConsoleMenu = styled(ConsoleMenu)`\n ${StyledComponents.Item} {\n font-size: 14px;\n }\n /* any css is ok here */\n`\n// CustomizedConsoleMenu中的Item样式已经修改\n// ConsoleMenu的样式没有变化\n// 可以将CustomizedConsoleMenu理解为ConsoleMenu的“fork”\n\nconst App = () => (\n \n)\n```\n\n### API 变动参考\n\n#### Props\n\n| 旧版本 | 1.0 | 说明 |\n| :---: | :---: | :--- |\n| `config.title` | `header` | `config` 属性中的 `title` 和 `navs` 定义分别调整为 props 中的 `header` 和 `items` ，绝大部分属于语义化和结构化的调整 |\n| `config.navs` | `items` | 同上，内部元素的调整可以参考 **Props.config.navs v.s. Props.items** 来浏览变更 |\n| `onClick` | `onItemClick` | 语义化调整 |\n| `open` | -- | 该属性已经被移除，导航菜单本身不应具备「展开」和「收起」的行为，这给其他组件的设计带来了一些不利因素；现在这些行为统一归纳到 `@ali/wind-rc-app-layout` 并受其控制，导航菜单不再对这些行为负责 |\n| `toggleOpen` | -- | 该属性已经被移除，导航菜单本身不应具备「展开」和「收起」的行为，这给其他组件的设计带来了一些不利因素；现在这些行为统一归纳到 `@ali/wind-rc-app-layout` 并受其控制，导航菜单不再对这些行为负责 |\n| `decentSubNav` | -- | 该属性已经被移除，现在该行为已经内置在默认的行为中，当一个父节点中的所有子节点都被设置成不可见时，该父节点也会相应地从当前组件树中移除 |\n| `params` | -- | 该属性已经被移除，可以使用 `RoutableMenu` 并声明 item 元素的 `to` 属性，由于该属性可以被声明为一个函数，该函数将在每次路由跳转之前执行并将返回结果作为跳转的目标 pathname 或 location，理论上你可以编写任何代码来执行路由跳转 |\n| `level` | -- | 该属性已经被移除，在新的设计规范中，L2 导航被调整到应用的内容区，相关的功能请参考 `@ali/wind-rc-page` |\n| `history` | -- | 该属性已经被移除，你可以直接使用 `` 来获得操控应用路由的能力 |\n| `location` | -- | 该属性已经被移除，你可以直接使用 `` 来获得操控应用路由的能力 |\n\n#### Props.config.navs[i] v.s. Props.items[i]\n\n| config.navs[i] | items[i] | 说明 |\n| :---: | :---: | :--- |\n| `key` | `key` | 在之前的版本中 key 既可以当做需要进行跳转的路径，也可以当做进行尝试匹配的路径，但是在新版本中，key 只会作为进行尝试匹配的路径，你需要使用 `to` 来定义需要进行跳转的路径。 |\n| -- | `to` | 在之前的版本中只需要定义 key 即可同时当做跳转路径和需要尝试匹配的路径，在新版本中，你 **必须** 定义 `to` 属性才可以正常进行跳转，具体用法可以参考 [RoutableItemDescriptor API](#RoutableItemDescriptor) |\n| -- | `linkProps` | 自定义内置 `Link` 组件的 props ，如果定义了 `to` ，`linkProps` 将透传至 React-Router [Link](https://reacttraining.com/react-router/web/api/Link) 组件；如果定义了 `href` ，则 `linkProps` 将透传至 `` ，如 `target=\"_blank\"` 等 |\n| `title` | `label` | 定义默认显示的内容 |\n| `hide` | `visible` | 是否显示该菜单项，注意 `visible` 和 `hide` 的值是相反的 |\n| `url` | `href` | 使用超链接的方式打开指定的链接，区别于应用内的路由跳转 |\n| `highlight` | `activePathPatterns` | 需要尝试进行匹配并进行高亮的路由路径集合 |\n| `subNav` | `items` | 子菜单项 |\n| `type` | -- | 该属性已经被移除，现在每个 Item 的类型由 `label` / `to` / `href` 来定义：当只有 `label` 声明时，该 Item 将不具任何特质，等同于原有的 `type: \"title\"` ；声明了 `label` 的 Item 将具备默认的应用内路由跳转的能力，等同于原有的 `type: \"link\"` ；声明了 `href` 的 Item 将使用超链接的方式打开指定的链接，等同于原有的 `type: \"stateLink\"` |\n| `navs` | -- | 该属性已经被移除，在最新的视觉和交互规范中，L2 导航被放置到了右侧的内容区，你可以将 `` 传入 `@ali/wind-rc-page` 的 `` 的 `menu` 属性中 |\n| `open` | -- | 该属性已经被移除，请使用组件的属性 `openKeys` 或 `defaultOpenKeys` 来进行手动控制 |\n\n##### 使用 L2 导航\n\n```javascript\nimport RoutableMenu from '@alicloudfe/components-console-menu/RoutableMenu'\nimport Page from '@ali/wind-rc-page'\n\nconst menu = (\n \n)\n\nconst MyPage = () => (\n \n \n Hello, World\n \n \n)\n```\n\n#### 视觉和交互\n\n- 移除关于 `width` / `min-width` 的限制，组件宽度自适应容器宽度\n- 更新主题颜色，适配最新的设计标准\n\n## 安装\n\n### 同级依赖\n\n在 **1.0 版本**中，`` 组件的同级依赖（ peer dependencies ）增加了 `styled-components` 为组件提供基础的样式能力，使用了 React Hooks 封装业务逻辑，并应用了一些其他的底层更新带来的问题修复和特性。请保证你的项目正确安装了下面的这些依赖\n\n| 依赖名称 | 版本 |\n| :--- | :---: |\n| `styled-components` | `^4.2.0` |\n| `react` | `^16.8.0` |\n| `react-dom` | `^16.8.0` |\n| `prop-types` | `^15.7.0` |\n| `@alicloudfe/components` | `^1.0.0` |\n\n### 安装最新版本\n\n```bash\nnpm i -S @alicloudfe/components-console-menu\n```\n\n## 使用示例\n\n### 基本使用\n\n下面的示例展示了使用 `` / `` 以及 `` 等组件，组合而成一个完整的视图级别的导航菜单\n\n[MDXInstruction:importDemo:BasicDemo](./stories/basic.tsx)\n\n### 次级导航\n\n使用 `type=\"secondary\"` 可以将导航的样式变为次级导航，功能与主导航一致\n\n[MDXInstruction:importDemo:SecondaryNavDemo](./stories/secondary.tsx)\n\n### 组件受控\n\n使用 `activeKey` 可以控制导航的当前选中的 key ，下面的示例展示了如何结合 `` 和 `` 来自定义受路由控制的导航菜单\n\n[MDXInstruction:importDemo:ControlledMenuDemo](./stories/controlled-menu.tsx)\n\n### 使用结构化声明\n\n使用 `items` 可以将所有的菜单项进行结构化声明，就像 `Table.dataSource` 一样\n\n[MDXInstruction:importDemo:ItemsDeclarationDemo](./stories/with-items-declaration.tsx)\n\n### 可路由的导航菜单\n\n使用 `` 可以获得常用的路由功能，如将当前路由路径映射到对应的 `activeKey` ，以及点击菜单项之后的路由跳转等功能\n\n_该功能同级依赖于 `dva^2.0.0` ，请确保你的项目中安装了该依赖的正确版本_\n\n[MDXInstruction:importDemo:RoutableMenuDemo](./stories/routable-menu.tsx)\n\n\n### 可切换header的导航菜单\n\n可以通过配置`headers`来为header提供数据源，当提供headers之后，header类型应为string非ReactNode, 否则会导致下拉菜单不能勾选☑️\n\n[MDXInstruction:importDemo:SwitchHeaderMenuDemo](./stories/switch-header.tsx)\n\n\n## APIs\n\n### ConsoleMenu\n\n[MDXInstruction:renderInterface:IConsoleMenuProps](./api-json/api.json)\n\n#### IItemDescriptor\n\n[MDXInstruction:renderInterface:IItemDescriptor](./api-json/api.json)\n\n### RoutableMenu\n\n继承自 `` ，重复的属性不再赘述，请参阅 [ConsoleMenu API](#consolemenu)\n\n[MDXInstruction:renderInterface:IRoutableMenuProps](./api-json/api.json)\n\n#### IRoutableItemDescriptor\n\n继承自 `IItemDescriptor` ，重复的属性不再赘述，请参阅 [IItemDescriptor](#iitemdescriptor)\n\n[MDXInstruction:renderInterface:IRoutableItemDescriptor](./api-json/api.json)\n","readmeFilename":"README.mdx"}