{
 "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
}