152 lines
21 KiB
JSON
152 lines
21 KiB
JSON
{
|
||
"slug": "mixednavigation",
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "mixednavigation-ex-1",
|
||
"title": "默认态（选中：全部订单）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <nav class=\"kole-menu\" id=\"menu-default\" role=\"navigation\" aria-label=\"主菜单\"></nav>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
1
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
5
|
||
],
|
||
[
|
||
6
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<nav class=\"kole-menu\" role=\"navigation\" aria-label=\"主菜单\"></nav>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleMixedNavigation } from 'kole-ui/react';\n\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\nexport default function OrderNav() {\n const [active, setActive] = useState('order-all');\n return <KoleMixedNavigation items={ITEMS} activeKey={active} onChange={setActive} />;\n}",
|
||
"vue3": "<template>\n <KoleMixedNavigation v-model:active-key=\"active\" :items=\"ITEMS\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleMixedNavigation } from 'kole-ui/vue3';\n\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\nconst active = ref('order-all');\n</script>",
|
||
"vue2": "<template>\n <KoleMixedNavigation :active-key.sync=\"active\" :items=\"ITEMS\" />\n</template>\n\n<script>\nimport { KoleMixedNavigation } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleMixedNavigation },\n data() {\n return {\n active: 'order-all',\n ITEMS: [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleMixedNavigation } from 'kole-ui/react';\n\ninterface NavItem {\n key: string;\n label: string;\n icon?: string;\n badge?: string;\n disabled?: boolean;\n children?: ReadonlyArray<NavItem>;\n}\n\nconst ITEMS: ReadonlyArray<NavItem> = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' },\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' },\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true },\n];\n\nexport default function OrderNav(): JSX.Element {\n const [active, setActive] = useState<string>('order-all');\n return <KoleMixedNavigation items={ITEMS} activeKey={active} onChange={setActive} />;\n}",
|
||
"vue3ts": "<template>\n <KoleMixedNavigation v-model:active-key=\"active\" :items=\"ITEMS\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleMixedNavigation } from 'kole-ui/vue3';\n\ninterface NavItem {\n key: string;\n label: string;\n icon?: string;\n badge?: string;\n disabled?: boolean;\n children?: ReadonlyArray<NavItem>;\n}\n\nconst ITEMS: ReadonlyArray<NavItem> = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' },\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' },\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true },\n];\n\nconst active = ref<string>('order-all');\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleMixedNavigation :active-key.sync=\"active\" :items=\"ITEMS\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleMixedNavigation } from 'kole-ui/vue2';\n\ninterface NavItem {\n key: string;\n label: string;\n icon?: string;\n badge?: string;\n disabled?: boolean;\n children?: ReadonlyArray<NavItem>;\n}\n\nexport default Vue.extend({\n components: { KoleMixedNavigation },\n data(): { active: string; ITEMS: ReadonlyArray<NavItem> } {\n return {\n active: 'order-all',\n ITEMS: [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' },\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' },\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/MixedNavigation.html L45-58 的 ITEMS 与 L152 首例初值 { active: \"order-all\", open: \"\" }（选中「全部订单」）；prop 名取自 MixedNavigation.jsx L14（items/activeKey/onChange）与 MixedNavigation.vue3.vue L59-62。"
|
||
},
|
||
{
|
||
"id": "mixednavigation-ex-2",
|
||
"title": "含徽章与禁用项",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <nav class=\"kole-menu\" id=\"menu-badge\" role=\"navigation\" aria-label=\"带徽章的主菜单\"></nav>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
5
|
||
],
|
||
[
|
||
6
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<nav class=\"kole-menu\" role=\"navigation\" aria-label=\"带徽章的主菜单\"></nav>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleMixedNavigation } from 'kole-ui/react';\n\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\nexport default function BadgeNav() {\n const [active, setActive] = useState('goods-list');\n return <KoleMixedNavigation items={ITEMS} activeKey={active} onChange={setActive} />;\n}",
|
||
"vue3": "<template>\n <KoleMixedNavigation v-model:active-key=\"active\" :items=\"ITEMS\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleMixedNavigation } from 'kole-ui/vue3';\n\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\nconst active = ref('goods-list');\n</script>",
|
||
"vue2": "<template>\n <KoleMixedNavigation :active-key.sync=\"active\" :items=\"ITEMS\" />\n</template>\n\n<script>\nimport { KoleMixedNavigation } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleMixedNavigation },\n data() {\n return {\n active: 'goods-list',\n ITEMS: [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleMixedNavigation } from 'kole-ui/react';\n\ninterface NavItem {\n key: string;\n label: string;\n icon?: string;\n badge?: string;\n disabled?: boolean;\n children?: ReadonlyArray<NavItem>;\n}\n\nconst ITEMS: ReadonlyArray<NavItem> = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' },\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' },\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true },\n];\n\nexport default function BadgeNav(): JSX.Element {\n const [active, setActive] = useState<string>('goods-list');\n return <KoleMixedNavigation items={ITEMS} activeKey={active} onChange={setActive} />;\n}",
|
||
"vue3ts": "<template>\n <KoleMixedNavigation v-model:active-key=\"active\" :items=\"ITEMS\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleMixedNavigation } from 'kole-ui/vue3';\n\ninterface NavItem {\n key: string;\n label: string;\n icon?: string;\n badge?: string;\n disabled?: boolean;\n children?: ReadonlyArray<NavItem>;\n}\n\nconst ITEMS: ReadonlyArray<NavItem> = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' },\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' },\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true },\n];\n\nconst active = ref<string>('goods-list');\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleMixedNavigation :active-key.sync=\"active\" :items=\"ITEMS\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleMixedNavigation } from 'kole-ui/vue2';\n\ninterface NavItem {\n key: string;\n label: string;\n icon?: string;\n badge?: string;\n disabled?: boolean;\n children?: ReadonlyArray<NavItem>;\n}\n\nexport default Vue.extend({\n components: { KoleMixedNavigation },\n data(): { active: string; ITEMS: ReadonlyArray<NavItem> } {\n return {\n active: 'goods-list',\n ITEMS: [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' },\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' },\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/MixedNavigation.html L153 第二例初值 { active: \"goods-list\", open: \"goods\" }；徽章与禁用项来自 L47 badge:\"3\" 与 L57 disabled:true（React 端 L55-56 渲染 kole-menu-badge，L40-43 加 is-disabled）。"
|
||
},
|
||
{
|
||
"id": "mixednavigation-ex-3",
|
||
"title": "二级联动（一级切到「商品」）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <nav class=\"kole-menu\" id=\"menu-alt\" role=\"navigation\" aria-label=\"主菜单替代形态\"></nav>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
5
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
6
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<nav class=\"kole-menu\" role=\"navigation\" aria-label=\"主菜单替代形态\"></nav>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleMixedNavigation } from 'kole-ui/react';\n\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\nexport default function GoodsSwitchNav() {\n const [active, setActive] = useState('goods');\n const onSwitch = (key) => setActive(key);\n return <KoleMixedNavigation items={ITEMS} activeKey={active} onChange={onSwitch} />;\n}",
|
||
"vue3": "<template>\n <KoleMixedNavigation v-model:active-key=\"active\" :items=\"ITEMS\" @change=\"onSwitch\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleMixedNavigation } from 'kole-ui/vue3';\n\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\nconst active = ref('goods');\nconst onSwitch = (key) => { active.value = key; };\n</script>",
|
||
"vue2": "<template>\n <KoleMixedNavigation :active-key.sync=\"active\" :items=\"ITEMS\" @change=\"onSwitch\" />\n</template>\n\n<script>\nimport { KoleMixedNavigation } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleMixedNavigation },\n data() {\n return {\n active: 'goods',\n ITEMS: [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n ]\n };\n },\n methods: {\n onSwitch(key) { this.active = key; }\n }\n};\n</script>",
|
||
"tsx": "import { useCallback, useState } from 'react';\nimport { KoleMixedNavigation } from 'kole-ui/react';\n\ninterface NavItem {\n key: string;\n label: string;\n icon?: string;\n badge?: string;\n disabled?: boolean;\n children?: ReadonlyArray<NavItem>;\n}\n\nconst ITEMS: ReadonlyArray<NavItem> = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' },\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' },\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true },\n];\n\nexport default function GoodsSwitchNav(): JSX.Element {\n const [active, setActive] = useState<string>('goods');\n const onSwitch = useCallback((key: string): void => {\n setActive(key);\n }, []);\n return <KoleMixedNavigation items={ITEMS} activeKey={active} onChange={onSwitch} />;\n}",
|
||
"vue3ts": "<template>\n <KoleMixedNavigation v-model:active-key=\"active\" :items=\"ITEMS\" @change=\"onSwitch\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleMixedNavigation } from 'kole-ui/vue3';\n\ninterface NavItem {\n key: string;\n label: string;\n icon?: string;\n badge?: string;\n disabled?: boolean;\n children?: ReadonlyArray<NavItem>;\n}\n\nconst ITEMS: ReadonlyArray<NavItem> = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' },\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' },\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true },\n];\n\nconst active = ref<string>('goods');\nfunction onSwitch(key: string): void {\n active.value = key;\n}\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleMixedNavigation :active-key.sync=\"active\" :items=\"ITEMS\" @change=\"onSwitch\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleMixedNavigation } from 'kole-ui/vue2';\n\ninterface NavItem {\n key: string;\n label: string;\n icon?: string;\n badge?: string;\n disabled?: boolean;\n children?: ReadonlyArray<NavItem>;\n}\n\nexport default Vue.extend({\n components: { KoleMixedNavigation },\n data(): { active: string; ITEMS: ReadonlyArray<NavItem> } {\n return {\n active: 'goods',\n ITEMS: [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' },\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' },\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true },\n ],\n };\n },\n methods: {\n onSwitch(key: string): void {\n this.active = key;\n },\n },\n});\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/MixedNavigation.html L156-157 第三例（altParams + { active: \"goods-list\", open: \"\" }，演示一级切到「商品」后侧栏换成其 children）；一级 key 判定见 MixedNavigation.jsx L21 isTopActive（it.key === active 或 children 命中），故 activeKey=\"goods\" 即「一级切到商品」。"
|
||
}
|
||
],
|
||
"curated": true
|
||
}
|