king-design-analyzer 2.1.9 → 2.2.1

package/docs_for_llm/layoutstandardlist.doc.md

@@ -0,0 +1,129 @@
+# 标准列表布局 (LayoutStandardList)
+
+标准化列表页业务容器，内置搜索、批量操作、轮询和列管理等能力，适合快速搭建成熟的资源管理列表页。
+
+**关键词**: standard list, resource list layout, 列表布局, 标准列表, 批量操作列表, 带搜索列表, 列管理, 轮询列表
+
+**使用场景**: 标准资源列表页、带搜索和批量操作的列表页、带轮询和列设置的控制台列表、快速搭建资源管理页
+
+## 导入语句
+```typescript
+import { LayoutStandardList } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| canCreate | `Record<string, any>` | `undefined` | 否 | 控制“创建”按钮可用性的配置对象 | - | - |
+| canDelete | `Record<string, any>` | `undefined` | 否 | 控制批量删除按钮可用性的配置对象 | - | - |
+| handleClickCreateBtn | `() => void` | `undefined` | 否 | 点击创建按钮时的处理函数 | - | - |
+| handleClickBatchDeleteBtn | `() => void` | `undefined` | 否 | 点击批量删除按钮时的处理函数 | - | - |
+| placeholder | `string` | `undefined` | 否 | 搜索框占位文案 | - | - |
+| hasSearch | `boolean` | `true` | 否 | 是否显示搜索区域 | - | - |
+| hasSearchItems | `boolean` | `undefined` | 否 | 是否显示检索项区域 | - | - |
+| searches | `SearchType[] | Record<string, SearchType>` | `undefined` | 否 | 搜索配置集合 | - | - |
+| searchGroups | `SearchGroupItem[]` | `undefined` | 否 | 搜索类型分组配置 | - | - |
+| labelMaps | `Record<string, string>` | `undefined` | 否 | 筛选标签文案映射 | - | - |
+| rowKey | `string` | `undefined` | 否 | 表格行唯一键字段名 | - | - |
+| notCheckTip | `string` | `undefined` | 否 | 未选中任何行时的提示文案 | - | - |
+| tableFields | `any` | `undefined` | 否 | 可配置的表格字段定义 | - | - |
+| checkType | `any` | `"checkbox"` | 否 | 表格勾选模式 | - | - |
+| sortType | `string` | `undefined` | 否 | 排序模式 | - | - |
+| pollInterval | `number` | `0` | 否 | 轮询刷新间隔，单位毫秒 | - | - |
+| useList | `Function` | `undefined` | 是 | 拉取列表数据的 hook 或函数，必填 | - | - |
+| useListDepParams | `any[]` | `undefined` | 否 | 触发 useList 刷新的依赖参数列表 | - | - |
+| useListOptionParams | `Record<string, any>` | `undefined` | 否 | 传给 useList 的可选参数对象 | - | - |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 自定义列表主体内容 | `<LayoutStandardList>...</LayoutStandardList>` | `<LayoutStandardList>
+  <template <LayoutStandardList>...</LayoutStandardList>>
+    自定义default内容
+  </template>
+</LayoutStandardList>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 使用示例
+### 资源管理列表页
+**场景**: 快速拼出带搜索、列配置和新建入口的资源列表页。
+
+通过内置搜索和创建按钮快速搭建标准资源列表。
+
+**使用的 API**: 属性: canCreate, hasSearch, searches, tableFields, placeholder
+
+```vue
+<script setup lang="ts">
+import { LayoutStandardList, ProTable } from '@ksyun-internal/versatile';
+
+const searches = [
+  { key: 'name', label: '实例名称', type: 'input', placeholder: '请输入实例名称' },
+  { key: 'status', label: '状态', type: 'select', list: [{ key: 'running', label: '运行中' }] },
+];
+const tableFields = [
+  { key: 'name', label: '实例名称', checked: true },
+  { key: 'status', label: '状态', checked: true },
+];
+</script>
+
+<template>
+  <LayoutStandardList
+    :can-create="true"
+    :has-search="true"
+    :searches="searches"
+    :table-fields="tableFields"
+    placeholder="搜索实例名称"
+  >
+    <ProTable :columns="[]" :data-source="[]" row-key="id" />
+  </LayoutStandardList>
+</template>
+```
+
+### 带批量操作和轮询的标准列表
+**场景**: 在资源列表页中同时开启筛选条件回显、批量操作和定时刷新。
+
+使用批量删除、检索项回显和轮询能力构建更完整的资源管理页。
+
+**使用的 API**: 属性: hasSearch, hasSearchItems, searches, tableFields, pollInterval, canDelete, handleClickBatchDeleteBtn, useList, rowKey
+
+```vue
+<script setup lang="ts">
+import { LayoutStandardList, ProTable } from '@ksyun-internal/versatile';
+
+const searches = [
+  { key: 'name', label: '实例名称', type: 'input', placeholder: '请输入实例名称' },
+  { key: 'status', label: '状态', type: 'select', list: [{ key: 'running', label: '运行中' }, { key: 'stopped', label: '已停止' }] },
+];
+const tableFields = [
+  { key: 'name', label: '实例名称', checked: true },
+  { key: 'status', label: '状态', checked: true },
+  { key: 'privateIp', label: '内网 IP', checked: false },
+];
+const useList = () => ({ loading: false, dataSource: [], total: 0 });
+const handleClickBatchDeleteBtn = () => console.log('batch delete');
+</script>
+
+<template>
+  <LayoutStandardList
+    :has-search="true"
+    :has-search-items="true"
+    :searches="searches"
+    :table-fields="tableFields"
+    :poll-interval="10000"
+    :can-delete="{ value: true }"
+    :handle-click-batch-delete-btn="handleClickBatchDeleteBtn"
+    :use-list="useList"
+    row-key="id"
+  >
+    <ProTable :columns="[]" :data-source="[]" row-key="id" />
+  </LayoutStandardList>
+</template>
+```
+
+## 相关组件
+LayoutListContent, ProTable, Search, SearchItems
+

package/docs_for_llm/layouttabs.doc.md

@@ -0,0 +1,101 @@
+# 布局标签页 (LayoutTabs)
+
+页面级业务标签组件，适合在详情页或配置页切换“概览、监控、日志、告警”等大块内容。
+
+**关键词**: layout tabs, tabs, tab, 页面标签, 页签
+
+**使用场景**: 详情页多标签切换、控制台页面分区导航、路由参数驱动的页签切换
+
+## 导入语句
+```typescript
+import { LayoutTabs } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| modelValue | `any` | `undefined` | 否 | 当前激活的标签值 | - | - |
+| tabs | `TabItem[]` | `[]` | 否 | 标签数据列表，元素通常包含 value、label、disabled 等字段 | - | - |
+| theme | `string` | `undefined` | 否 | 标签页视觉主题 | - | - |
+| routerName | `string` | `undefined` | 否 | 结合路由模式时使用的路由名称 | - | - |
+| tabParamKey | `string` | `"tab"` | 否 | URL 中用于记录当前 tab 的参数名 | - | - |
+| halfRadius | `boolean` | `false` | 否 | 是否启用半圆角样式 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:modelValue | `@update:modelValue` | 激活标签值变化时触发，适合直接绑定当前 tab 状态。 | `value?: string | number` | - |
+| update:tab | `@update:tab` | 当前完整标签对象变化时触发，便于读取路由名或扩展字段。 | `value?: LayoutTabItem` | - |
+
+### 事件参数说明
+**update:modelValue**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string | number` | 否 | - | 当前激活标签的 value。 |
+
+**update:tab**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `LayoutTabItem` | 否 | - | 当前选中的完整标签项对象。 |
+
+## 使用示例
+### 详情页标签切换
+**场景**: 在详情页顶部切换不同子页面内容。
+
+在页面主区域切换不同业务模块。
+
+**使用的 API**: 属性: modelValue, tabs | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LayoutTabs } from '@ksyun-internal/versatile';
+
+const active = ref('overview');
+const tabs = [
+  { label: '概览', value: 'overview' },
+  { label: '监控', value: 'monitor' },
+  { label: '日志', value: 'logs' },
+];
+</script>
+
+<template>
+  <LayoutTabs v-model="active" :tabs="tabs" />
+</template>
+```
+
+### 结合路由参数记录页签
+**场景**: 让用户刷新页面后仍能保留当前页签状态。
+
+通过 tabParamKey 让当前页签状态体现在 URL 上。
+
+**使用的 API**: 属性: modelValue, tabs, tabParamKey, halfRadius | 事件: update:modelValue, update:tab
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LayoutTabs } from '@ksyun-internal/versatile';
+
+const active = ref('alarm');
+const tabs = [
+  { label: '概览', value: 'overview' },
+  { label: '告警', value: 'alarm' },
+  { label: '审计日志', value: 'audit' },
+];
+</script>
+
+<template>
+  <LayoutTabs
+    v-model="active"
+    :tabs="tabs"
+    tab-param-key="view"
+    :half-radius="true"
+  />
+</template>
+```
+
+## 相关组件
+LayoutContent, Header
+

package/docs_for_llm/lazymount.doc.md

@@ -0,0 +1,82 @@
+# 延迟挂载 (LazyMount)
+
+仅在内容真正可见时再挂载子树的轻量组件，适合优化重量级图表、编辑器或弹层内部内容的首次渲染开销。
+
+**关键词**: lazy mount, deferred mount, 延迟挂载, 按需挂载, 性能优化
+
+**使用场景**: 大型内容按需挂载、弹层内容懒加载、编辑器或图表按需渲染
+
+## 导入语句
+```typescript
+import { LazyMount } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| show | `boolean` | `undefined` | 是 | 是否挂载内容 | - | - |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 延迟挂载的内容 | `<LazyMount>...</LazyMount>` | `<LazyMount>
+  <template <LazyMount>...</LazyMount>>
+    自定义default内容
+  </template>
+</LazyMount>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 使用示例
+### 延迟挂载重量级图表
+**场景**: 减少图表、代码编辑器等重组件的初始渲染成本。
+
+在用户展开监控面板后再渲染图表区域。
+
+**使用的 API**: 属性: show
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LazyMount } from '@ksyun-internal/versatile';
+
+const showChart = ref(false);
+</script>
+
+<template>
+  <button @click="showChart = !showChart">切换监控面板</button>
+  <LazyMount :show="showChart">
+    <div>这里放图表组件</div>
+  </LazyMount>
+</template>
+```
+
+### 编辑器面板按需挂载
+**场景**: 避免策略编辑器、脚本编辑器在初始渲染时带来额外开销。
+
+只在用户切换到高级编辑模式后再加载编辑器区域。
+
+**使用的 API**: 属性: show
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LazyMount } from '@ksyun-internal/versatile';
+
+const advanced = ref(false);
+</script>
+
+<template>
+  <button @click="advanced = !advanced">高级编辑</button>
+  <LazyMount :show="advanced">
+    <textarea rows="8" style="width: 100%;">这里放策略编辑器</textarea>
+  </LazyMount>
+</template>
+```
+
+## 相关组件
+LazyTeleport
+

package/docs_for_llm/lazyteleport.doc.md

@@ -0,0 +1,85 @@
+# 延迟传送 (LazyTeleport)
+
+结合 Teleport 与惰性挂载能力的组件，只有在需要显示时才把内容传送到目标容器，适合悬浮工具栏、页面外挂操作区。
+
+**关键词**: lazy teleport, teleport, 延迟传送, portal, 按需 teleport
+
+**使用场景**: 弹层内容延迟挂载、按需 Teleport 内容、禁用 Teleport 的回退渲染
+
+## 导入语句
+```typescript
+import { LazyTeleport } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| to | `string | Element` | `undefined` | 否 | Teleport 目标容器 | - | - |
+| disabled | `boolean` | `undefined` | 否 | 是否禁用 Teleport | - | - |
+| defer | `boolean` | `undefined` | 否 | 是否延迟传送 | - | - |
+| show | `boolean` | `undefined` | 是 | 是否展示内容 | - | - |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 待传送内容 | `<LazyTeleport>...</LazyTeleport>` | `<LazyTeleport>
+  <template <LazyTeleport>...</LazyTeleport>>
+    自定义default内容
+  </template>
+</LazyTeleport>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 使用示例
+### 延迟传送页面操作区
+**场景**: 把低频出现的页面操作区延迟挂载到指定容器。
+
+仅在页面进入编辑态后把操作按钮挂到目标容器。
+
+**使用的 API**: 属性: to, show
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LazyTeleport } from '@ksyun-internal/versatile';
+
+const showActions = ref(true);
+</script>
+
+<template>
+  <div id="page-actions"></div>
+  <LazyTeleport to="#page-actions" :show="showActions">
+    <div>保存 / 取消</div>
+  </LazyTeleport>
+</template>
+```
+
+### 禁用 Teleport 回退到原地渲染
+**场景**: 在宿主环境不适合 Teleport 时回退到就地渲染。
+
+在某些嵌入场景下通过 disabled 让内容仍在原位置渲染。
+
+**使用的 API**: 属性: to, show, disabled
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LazyTeleport } from '@ksyun-internal/versatile';
+
+const showActions = ref(true);
+const disableTeleport = ref(true);
+</script>
+
+<template>
+  <LazyTeleport to="#toolbar" :show="showActions" :disabled="disableTeleport">
+    <div>保存当前草稿</div>
+  </LazyTeleport>
+</template>
+```
+
+## 相关组件
+LazyMount, VDialog, VDrawer
+

package/docs_for_llm/menu.doc.md

@@ -12,27 +12,35 @@ import { Menu, MenuItem } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| selectedKey | `string | number` | `undefined` | 否 | 当前选中项的 key，可用 v-model:selectedKey 双向绑定 | `<Menu v-model:selectedKey="selectedKey"></Menu>` |
-| expandedKeys | `(string | number)[]` | `[]` | 否 | 展开的子菜单 key 数组，可用 v-model:expandedKeys 双向绑定 | `<Menu v-model:expandedKeys="expandedKeys"></Menu>` |
-| theme | `"light" | "dark"` | `"dark"` | 否 | 菜单主题 | `<Menu theme="light"></Menu>` |
-| type | `"vertical" | "horizontal"` | `"vertical"` | 否 | 菜单排列方式 | `<Menu type="horizontal"></Menu>` |
-| collapse | `boolean` | `false` | 否 | 菜单是否折叠（只显示图标） | `<Menu :collapse="isCollapsed"></Menu>` |
-| size | `"large" | "default" | "small"` | `"default"` | 否 | 菜单尺寸 | `<Menu size="small"></Menu>` |
-| accordion | `boolean` | `false` | 否 | 是否每次只能展开一项（手风琴模式） | `<Menu accordion></Menu>` |
-| dot | `boolean` | `false` | 否 | 是否给菜单项前面添加圆点 | `<Menu dot></Menu>` |
-| showCollapseArrow | `boolean` | `false` | 否 | 是否展示折叠按钮 | `<Menu showCollapseArrow></Menu>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| selectedKey | `string | number` | `undefined` | 否 | 当前选中项的 key，可用 v-model:selectedKey 双向绑定 | - | `<Menu v-model:selectedKey="selectedKey"></Menu>` |
+| expandedKeys | `(string | number)[]` | `[]` | 否 | 展开的子菜单 key 数组，可用 v-model:expandedKeys 双向绑定 | - | `<Menu v-model:expandedKeys="expandedKeys"></Menu>` |
+| theme | `"light" | "dark"` | `"dark"` | 否 | 菜单主题 | - | `<Menu theme="light"></Menu>` |
+| type | `"vertical" | "horizontal"` | `"vertical"` | 否 | 菜单排列方式 | - | `<Menu type="horizontal"></Menu>` |
+| collapse | `boolean` | `false` | 否 | 菜单是否折叠（只显示图标） | - | `<Menu :collapse="isCollapsed"></Menu>` |
+| size | `"large" | "default" | "small"` | `"default"` | 否 | 菜单尺寸 | - | `<Menu size="small"></Menu>` |
+| accordion | `boolean` | `false` | 否 | 是否每次只能展开一项（手风琴模式） | - | `<Menu accordion></Menu>` |
+| dot | `boolean` | `false` | 否 | 是否给菜单项前面添加圆点 | - | `<Menu dot></Menu>` |
+| showCollapseArrow | `boolean` | `false` | 否 | 是否展示折叠按钮 | - | `<Menu showCollapseArrow></Menu>` |
 
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| header | 扩展菜单头部 | `undefined` | - |
+| header | 扩展菜单头部 | `#header` | `<Menu>
+  <template #header>头部内容</template>
+</Menu>` |
+
+### 插槽参数说明
+**header**
+
+- 参数结构: 无参数
 
 ## 子组件 (Sub-Components)
 ### MenuItem
 菜单项组件，可嵌套使用形成子菜单
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | key | `string | number` | 全局唯一的标识，用于标识和控制选中状态 | `<MenuItem key="home">首页</MenuItem>` |
@@ -40,10 +48,125 @@ import { Menu, MenuItem } from '@king-design/vue';
 | disabled | `boolean` | 是否禁用当前项 | `<MenuItem key="disabled" disabled>禁用项</MenuItem>` |
 | dot | `boolean` | 是否给当前菜单项前面添加圆点 | `<MenuItem key="item" dot>带圆点</MenuItem>` |
 
-**事件**:
-- `@select`: 选中没有子菜单的菜单项时触发
+#### 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| select | `@select` | 选中没有子菜单的菜单项时触发 | `menuItem: MenuItem, e: MouseEvent` | `<MenuItem @select="handleMenuSelect"></MenuItem>` |
+
+##### MenuItem 事件参数说明
+**select**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| menuItem | `MenuItem` | 是 | - | 被选中的菜单项实例 |
+| e | `MouseEvent` | 是 | - | 原生鼠标事件 |
+
+事件处理示例:
+```typescript
+const activeSection = ref('');
+
+const handleMenuSelect = (menuItem, e: MouseEvent) => {
+  activeSection.value = String(menuItem.key);
+};
+```
+
+#### 组合示例
+##### 带图标的嵌套菜单
+**场景**: 创建带图标的多级嵌套菜单，包含禁用项和路由跳转
+
+图标和多级嵌套子菜单
+
+**命中的子组件 API**: 属性: key, to, disabled | 事件: select
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Menu, MenuItem, Icon } from '@king-design/vue';
+
+const selectedKey = ref('');
+const expandedKeys = ref<string[]>(['3']);
+
+const onSelect = (menuItem: any) => {
+  console.log('选中:', menuItem.key);
+};
+</script>
+<template>
+  <Menu 
+    v-model:selectedKey="selectedKey"
+    v-model:expandedKeys="expandedKeys"
+    theme="light"
+  >
+    <MenuItem key="1" @select="onSelect">菜单 1</MenuItem>
+    <MenuItem key="2" disabled>菜单 2（禁用）</MenuItem>
+    <MenuItem key="3">
+      <Icon class="k-icon-heart" /> 菜单 3
+      <Menu>
+        <MenuItem key="3-1" @select="onSelect">子菜单 1</MenuItem>
+        <MenuItem key="3-2" @select="onSelect">子菜单 2</MenuItem>
+        <MenuItem key="3-3" disabled>子菜单 3（禁用）</MenuItem>
+        <MenuItem key="3-4">子菜单 4</MenuItem>
+      </Menu>
+    </MenuItem>
+    <MenuItem key="4" to="/">菜单 4（路由）</MenuItem>
+  </Menu>
+</template>
+```
+
+##### 路由集成
+**场景**: 配合 Vue Router 进行页面导航
+
+配合 Vue Router 使用
+
+**命中的子组件 API**: 属性: key, to
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Menu, MenuItem } from '@king-design/vue';
+
+const selectedKey = ref('home');
+</script>
+<template>
+  <Menu v-model:selectedKey="selectedKey">
+    <MenuItem key="home" to="/">首页</MenuItem>
+    <MenuItem key="products" to="/products">产品</MenuItem>
+    <MenuItem key="docs" :to="{name: 'docs'}">文档</MenuItem>
+  </Menu>
+</template>
+```
+
+##### 带圆点和头部
+**场景**: 使用 dot 属性给菜单项添加圆点，使用 header 插槽自定义头部
+
+使用 dot 属性和 header 插槽
+
+**命中的子组件 API**: 属性: key, dot
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Menu, MenuItem } from '@king-design/vue';
+
+const selectedKey = ref('1');
+const expandedKeys = ref<string[]>([]);
+</script>
+<template>
+  <Menu 
+    v-model:selectedKey="selectedKey"
+    v-model:expandedKeys="expandedKeys"
+    :dot="true" 
+    theme="light"
+  >
+    <template #header>管理面板</template>
+    <MenuItem key="1">菜单项 1</MenuItem>
+    <MenuItem key="2">菜单项 2</MenuItem>
+    <MenuItem key="3" :dot="false">无圆点菜单项</MenuItem>
+  </Menu>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### MenuItem 未设置 key
 > **错误用法**: `<Menu v-model:selectedKey="selectedKey">
   <MenuItem>首页</MenuItem>
 </Menu>`
@@ -52,10 +175,12 @@ import { Menu, MenuItem } from '@king-design/vue';
 </Menu>`
 > **说明**: 每个 MenuItem 必须设置唯一的 key 用于标识和控制选中状态
 
+### 使用错误的 v-model 语法
 > **错误用法**: `<Menu v-model="selectedKey">`
 > **正确写法**: `<Menu v-model:selectedKey="selectedKey">`
 > **说明**: Menu 使用 v-model:selectedKey 而非 v-model 来绑定选中项
 
+### type 值拼写错误
 > **错误用法**: `<Menu type="horizonal">`
 > **正确写法**: `<Menu type="horizontal">`
 > **说明**: type 只支持 vertical 和 horizontal，注意拼写