codewave-openclaw-installer 1.0.0

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/26.PC/347/253/257Vue3/347/273/204/344/273/266/350/257/264/346/230/216/20./345/257/274/350/210/252/60./344/270/213/346/213/211/350/217/234/345/215/225.md

@@ -0,0 +1,305 @@
+# 下拉菜单
+
+<span class="tag-blue">Vue3</span> <span class="tag-yellow">PC</span>
+
+将动作或菜单折叠到下拉菜单中。
+
+<img src="../assets/xialacaidan_202506091155_1.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+1. 下拉菜单的各类属性、事件、可访问属性等基础信息。
+2. 如何使用下拉菜单的各类属性，具体实现效果包括但不限于
+    - 使用下拉菜单的“数据源”属性，并选择“文本字段”、“值字段”，以设置下拉菜单中动态展示的下拉菜单项的数据内容；
+    - 使用下拉菜单的“按钮样式”属性，自定义触发下拉列表展开的按钮的样式；
+3. 使用“添加下拉菜单项”，以添加不包含在数据源内的层级结构。
+4. 添加“下拉菜单项”，并为下拉菜单项设置“指令值”属性，可在事件的输入参数event中获取被点击的下拉菜单项的指令。
+
+</div>
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 下拉菜单
+
+<img src="../assets/xialacaidan_202506091155_2.png" class="imgStyle" style="width:300px" />
+
+支持通过添加下拉菜单项的方式形成一个固定菜单项数量的下拉菜单。下拉菜单项中默认包含文本组件，支持替换为其他组件。
+
+#### 数据属性
+
+- 数据源：除了直接添加下拉菜单项的方式外，下拉菜单可通过开启数据源属性的编辑表达式绑定数据源，实现动态下拉菜单的效果。数据源可以绑定`List<T>`类型变量或输出参数为数组或包含`List<T>`的匿名数据结构的逻辑，List中的T可以是任意类型（包括`List<T>`、联合类型）。
+
+
+  1.  点击“请选择表达式”进入编辑表达式页面，通过拖入变量、使用调用逻辑组件等方式设置数据源。
+
+        <img src="../assets/xialacaidan_202506091155_3.png" class="imgStyle" style="" />
+
+  1.  选择文本字段、值字段等，实现动态获取数据并展示菜单项。
+
+        <img src="../assets/xialacaidan_202506091155_4.png" class="imgStyle" style="width:300px" />
+
+- 数据类型：数据源返回的数据结构的类型，自动识别类型进行展示说明，为只读状态无法修改。
+- 文本字段：绑定数据源后，依据该字段动态加载下拉菜单项的选项文本。
+- 值字段：绑定数据源后，依据该字段动态加载下拉菜单项的指令。触发下拉菜单的“[点击下拉项时](#事件)”事件时可在事件的输入参数event中获取被点击的下拉菜单项的指令。
+- 禁用字段：绑定数据源后，依据该字段动态加载下拉菜单项是否禁用。字段内容为Boolean类型。
+- 分隔字段：绑定数据源后，依据该字段动态加载下拉菜单项上方是否显示分隔符。字段内容为Boolean类型。
+
+#### 主要属性
+
+- 菜单最大高度：菜单下拉框的最大高度，超出高度时滚动显示，默认单位px。
+- 是否下拉触发元素呈现为按钮组：下拉菜单是否为分割按钮样式。
+
+    <img src="../assets/xialacaidan_202506091155_5.png" class="imgStyle" style="width:300px" />
+
+- 菜单弹出位置：下拉菜单展开的位置，包括上方、上方左侧、上方右侧、下方、下方左侧、下方右侧。
+- 展开下拉菜单的延时：Integer类型。下拉菜单展开的延时时间，单位ms。“触发下拉的行为”属性为鼠标悬停时有效。
+- 收起下拉菜单的延时：Integer类型。下拉菜单收起的延时时间，单位ms。“触发下拉的行为”属性为鼠标悬停时有效。
+- 将下拉列表插入至body元素：Boolean类型。下拉列表是否脱离其原本的父元素，直接插入到页面的 body 元素下，该属性用以解决样式限制、层级冲突等显示问题。
+
+#### 交互属性
+
+- 触发下拉的行为：设置下拉菜单在鼠标悬停或被点击时展开或收起下拉列表。
+
+#### 状态属性
+
+- 是否禁用：Boolean类型。下拉菜单是否置灰显示，且禁止任何交互，如焦点、点击等。
+- 是否在点击菜单项后隐藏菜单：Boolean类型。选择下拉菜单项后是否收起下拉菜单。
+
+#### 样式属性
+
+- 按钮类型：定义下拉按钮样式，包括主要按钮、成功按钮、警告按钮、危险按钮、信息按钮、文字按钮、默认按钮。开启下拉菜单的“是否下拉触发元素呈现为按钮组”后生效。按钮类型的颜色由主题样式决定，修改主题样式请参考文档：[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+    <img src="../assets/xialacaidan_202506091155_6.png" class="imgStyle" style="" />
+
+    <div class="highlight">
+
+    开启编辑表达式后，可复制选项标识来配置表达式的值。用于标识"按钮类型“属性不同选项的对应值如下图：
+
+    <img src="../assets/xialacaidan_202506091155_7.png" class="imgStyle" style="width:45%" />  <img src="../assets/xialacaidan_202506091155_8.png" class="imgStyle" style="width:45%" />
+
+    </div>
+
+
+
+- 按钮尺寸：定义下拉按钮大小，包括默认、大型、中型、小型。开启下拉菜单的“是否下拉触发元素呈现为按钮组”后生效。
+
+### 下拉菜单项
+
+#### 主要属性
+
+- 指令值：下拉菜单项的指令，触发下拉菜单的“[点击下拉项时](#事件)”事件时可在事件的输入参数event中获取被点击的下拉菜单项的指令。
+
+#### 状态属性
+
+- 禁用：Boolean类型。当前下拉菜单项是否置灰显示，且禁止任何交互，如焦点、点击等。
+
+#### 样式属性
+
+- 显示分割线：在该菜单项上方是否显示分割线。
+
+    <img src="../assets/xialacaidan_202506091155_9.png" class="imgStyle" style="width:300px" />
+
+## 事件
+
+### 下拉菜单
+
+| 事件名       | 描述                            |
+| :-------- | :---------------------------- |
+| 点击左侧按钮时   | 下拉菜单为分割按钮样式时，点击左侧按钮时触发该事件中的逻辑 |
+| 点击下拉项时    | 点击菜单项时触发该事件中的逻辑               |
+| 下拉框出现/隐藏时 | 下拉框展开或收起时触发该事件中的逻辑            |
+
+**点击左侧按钮时**
+
+- 事件概述：下拉菜单为分割按钮样式时，点击左侧按钮时触发该事件中的逻辑。
+- 其他说明：触发事件的前提条件是开启“是否下拉触发元素呈现为按钮组”属性。
+
+**点击下拉项时**
+
+- 事件概述：点击菜单项时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+    <img src="../assets/xialacaidan_202506091155_10.png" class="imgStyle" style="width:200px" />
+
+    - event：Integer 或 String 或 Decimal 类型，被点击的下拉菜单项的指令。
+
+**下拉框出现/隐藏时**
+
+- 事件概述：下拉框展开或收起时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+    <img src="../assets/xialacaidan_202506091155_11.png" class="imgStyle" style="width:200px" />
+
+    - event：Boolean类型，下拉框是否展开。
+
+### 下拉菜单项
+
+| 事件名 | 描述                   |
+| :-- | :------------------- |
+| 点击  | 当前下拉菜单项被点击时触发该事件中的逻辑 |
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用下拉菜单组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/xialacaidan_202506091155_12.png" class="imgStyle" style="width:300px" />
+
+**下拉菜单**
+
+- \_if（显示条件）：Boolean类型，下拉菜单是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+**下拉菜单项**
+
+- \_if（显示条件）：Boolean类型，下拉菜单项是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 组件逻辑
+
+页面添加下拉菜单组件后，支持调用下拉菜单的组件逻辑，组件逻辑有：
+
+| 逻辑名    | 描述           |
+| :----- | :----------- |
+| reload | 清除缓存，重新加载数据。 |
+
+<img src="../assets/xialacaidan_202506091155_13.png" class="imgStyle" style="width:300px" />
+
+### reload
+
+- 逻辑概述：清除缓存，重新加载数据。适用于下拉菜单的数据源使用调用逻辑的情况。
+- 其他说明：当下拉菜单的数据源使用调用逻辑并添加了监听变量，被监听的变量改变时将自动触发下拉菜单的reload。
+
+## 插槽
+
+下拉菜单组件中包含插槽，支持拖拽放置其他组件：
+
+- 下拉菜单下拉框外包含插槽。常见用法如：指示触发下拉框展开的内容，例如拖拽放置文本。
+
+    <img src="../assets/xialacaidan_202506091155_14.png" class="imgStyle" style="width:300px" />
+
+- 下拉菜单项包含插槽。常见用法如：指示当前菜单项的标题，例如拖拽放置文本。
+
+    <img src="../assets/xialacaidan_202506091155_15.png" class="imgStyle" style="width:300px" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- menu-box-shadow：下拉菜单的阴影效果。
+- menuItem-hover-fill：鼠标悬浮在下拉菜单项上时下拉菜单项的背景颜色。
+- menuItem-hover-color：鼠标悬浮在下拉菜单项上时下拉菜单项的文字颜色。
+
+组件支持在**样式->主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式->组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/xialacaidan_202506091155_16.png" class="imgStyle" style="" />
+
+## 使用说明
+
+下拉菜单可以在拖拽生成时选择样式，也可以生成组件后在属性中修改。
+
+<img src="../assets/xialacaidan_202506091155_17.png" class="imgStyle" style="" />
+
+## 示例
+
+### 示例一：静态下拉菜单
+
+#### 场景介绍
+
+通过添加下拉菜单项的方式形成一个固定菜单项数量的下拉菜单。
+
+#### 操作步骤
+
+1.  在页面上添加一个下拉菜单组件，并添加下拉菜单项。这里示例添加4个下拉菜单项，可根据需要自行添加。
+
+    <img src="../assets/xialacaidan_202506091155_2.png" class="imgStyle" style="width:300px" />
+
+1.  修改步骤条项插槽中文本组件的“文本”。四个菜单项操作步骤相同。
+
+    <img src="../assets/xialacaidan_202506091155_19.png" class="imgStyle" style="" />
+
+1.  为下拉菜单项添加“指令值”。四个菜单项操作步骤相同。
+
+    <img src="../assets/xialacaidan_202506091155_20.png" class="imgStyle" style="" />
+
+1.  发布预览效果。
+
+#### 效果演示
+
+<img src="../assets/xialacaidan_202506091155_21.png" class="imgStyle" style="" />
+
+### 示例二：动态下拉菜单
+
+#### 场景介绍
+
+通过添加数据源的方式形成一个动态渲染数据的下拉菜单。
+
+#### 操作步骤
+
+前提条件：已有实体，实体属性以及实体数据示例如下。
+
+<img src="../assets/xialacaidan_202506091155_22.png" class="imgStyle" style="" />
+
+<img src="../assets/xialacaidan_202506091155_23.png" class="imgStyle" style="" />
+
+1.  创建服务端逻辑，用于查询实体数据。
+
+    <img src="../assets/xialacaidan_202506091155_24.png" class="imgStyle" style="" />
+
+1.  开启下拉菜单组件”数据源“的编辑表达式，使用调用逻辑组件调用上述服务端逻辑，作为下拉菜单的数据源。
+
+    <img src="../assets/xialacaidan_202506091155_25.png" class="imgStyle" style="" />
+
+1.  设置下拉菜单的“文本字段”、“值字段”，分别对应实体的属性。
+
+    <img src="../assets/xialacaidan_202506091155_26.png" class="imgStyle" style="width:300px" />
+
+1.  发布预览效果。
+
+#### 效果演示
+
+<img src="../assets/xialacaidan_202506091155_27.png" class="imgStyle" style="" />
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">有鲤</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年06月09日</span>
+</div>
+<style>
+ .highlight {
+    background-color: #eaf6ff;
+    border-color: #679CF8;
+    border-left-width: 0.2rem;
+    border-left-style: solid;
+    padding: 1rem 1rem 1rem 1rem;
+    margin: 1rem 0px;
+}
+</style>
+<style>
+.tag-blue {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #dbeafe; /* 浅蓝色背景 */
+    color: #2563eb; /* 深蓝色文字 */
+}
+.tag-yellow {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #fef3c7; /* 浅黄色背景 */
+    color: #d97706; /* 深黄色文字 */
+}
+
+</style>

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/26.PC/347/253/257Vue3/347/273/204/344/273/266/350/257/264/346/230/216/20./345/257/274/350/210/252/70./345/257/274/350/210/252/350/217/234/345/215/225.md

@@ -0,0 +1,331 @@
+# 导航菜单
+
+<span class="tag-blue">Vue3</span> <span class="tag-yellow">PC</span>
+
+导航菜单通常位于页面的顶部或固定位置。通过子菜单项，可以快速导航到网页应用的各个主要页面，例如首页、产品页面、服务页面等。
+
+<img src="../assets/daohangcaidan_202512301535_1.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+
+1.  导航菜单的各类属性、事件、可访问属性等基础信息。
+2.  如何使用导航菜单的各类属性，具体实现效果包括但不限于
+
+    - 使用导航菜单的“数据源”属性，并选择“文本字段”，以设置导航菜单中动态展示的菜单项的数据内容；
+    - 使用导航菜单的“数据源”属性，并选择“值字段”、“父级字段”，以设置导航菜单中动态展示的子菜单项的分组和层级结构；
+
+3.  使用“添加子菜单”，以添加不包含在数据源内的层级结构；在子菜单分组下继续添加“子菜单”，以添加不包含在数据源内的多层级结构。
+4.  使用“菜单项”，并为菜单项设置“链接地址”属性，以添加不包含在数据源内的菜单选项。
+
+</div>
+
+
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 导航菜单
+
+<img src="../assets/daohangcaidan_202512301535_2.png" class="imgStyle" style="" />
+
+支持通过添加菜单项的方式形成一个固定菜单项数量的下拉菜单，或先添加子菜单再在子菜单下方添加菜单项使菜单项按照子菜单展示层级结构。菜单项中默认包含文本组件，支持替换为其他组件。
+
+#### 数据属性
+
+- 数据源：除了直接添加菜单项的方式外，下拉菜单可通过开启数据源属性的编辑表达式绑定数据源，实现动态导航菜单的效果。数据源可以绑定`List<T>`类型变量或输出参数为数组或包含`List<T>`的匿名数据结构的逻辑，List中的T可以是任意类型（包括`List<T>`、联合类型）。
+
+  1.  点击“请选择表达式”进入编辑表达式页面，通过拖入变量、使用调用逻辑组件等方式设置数据源。
+
+        <img src="../assets/daohangcaidan_202512301535_3.png" class="imgStyle" style="" />
+
+  1.  选择文本字段、值字段等，实现动态获取数据并展示菜单项。
+
+        <img src="../assets/daohangcaidan_202512301535_4.png" class="imgStyle" style="width:300px" />
+
+- 数据类型：数据源返回的数据结构的类型，自动识别类型进行展示说明，为只读状态无法修改。
+- 值字段：绑定数据源后，依据该字段动态加载下拉菜单项的唯一标识。
+- 文本字段：绑定数据源后，依据该字段动态加载下拉菜单项的选项文本。
+- 父级字段：绑定数据源后，用于标识菜单项所在子菜单的字段，与父节点的“值字段”相关联。实现导航菜单层级展示效果时需配置此字段。
+
+    <div class="highlight">
+
+    通过数据源实现导航菜单层级展示参考如下：
+
+    1.  构建如下数据结构/实体，自定义命名例如NavbarStructure。
+
+        <img src="../assets/daohangcaidan_202512301535_5.png" class="imgStyle" style="" />
+
+    1.  参考`List<NavbarStructure>`类型局部变量navbarList存储数据如下：
+
+        <img src="../assets/daohangcaidan_202512301535_6.png" class="imgStyle" style="" />
+
+    1.  将局部变量navbarList绑定为导航菜单的数据源，选择NavbarStructure下对应的属性作为相应字段。
+
+        <img src="../assets/daohangcaidan_202512301535_7.png" class="imgStyle" style="width:300px" />
+
+    1.  预览效果。点击子菜单可展开下拉项，展示子菜单下的菜单项。
+
+        <img src="../assets/daohangcaidan_202512301535_8.png" class="imgStyle" style="" />
+
+    </div>
+
+
+
+#### 主要属性
+
+- 菜单模式：菜单的显示模式，可选水平或垂直。
+
+    <img src="../assets/daohangcaidan_202512301535_9.png" class="imgStyle" style="" />
+
+    <div class="highlight">
+
+    开启编辑表达式后，可复制选项标识来配置表达式的值。用于标识“菜单模式”属性不同选项的对应值如下图：
+
+    <img src="../assets/daohangcaidan_202512301535_10.png" class="imgStyle" style="" />
+
+    </div>
+
+
+
+- 折叠状态：是否水平折叠收起菜单，导航菜单的“模式”属性为垂直时生效。
+- 折叠动画：Boolean类型，控制菜单在折叠（收起或展开）时是否显示动画效果。默认为开启状态，即显示折叠动画。
+
+- 激活菜单：当前默认激活的菜单项的唯一标识。用于在确定菜单初始加载或者切换菜单时，哪个菜单项应该显示为激活状态。
+- 默认展开：当前默认打开的子菜单的唯一标识的数组。在具有多层菜单结构且需要指定某些子菜单初始为打开状态时使用。
+
+- 唯一展开：Boolean类型，是否只允许一个子菜单处于展开状态。开启后，当一个子菜单展开时，其他子菜单将自动收起。默认为关闭状态，即允许多个子菜单同时展开。
+- 触发方式：子菜单打开的触发方式。可选鼠标悬停时或鼠标点击时。导航菜单的“模式”属性为水平时生效。
+
+    <div class="highlight">
+
+    开启编辑表达式后，可复制选项标识来配置表达式的值。用于标识不同选项的对应值如下图：
+
+    <img src="../assets/daohangcaidan_202512301535_11.png" class="imgStyle" style="" />
+
+    </div>
+
+#### 交互属性
+
+- 路由模式：Boolean类型，启用该模式会在激活导航时以 index 作为 path 进行路由跳转。
+- 自动路由：Boolean类型，当开启路由模式时，点击/激活菜单项时是否自动发起路由跳转，关闭后不会自动跳转，需要在事件里自行处理路由跳转。
+
+    - 页面准备：在父页面拖拽导航菜单组件后，将菜单项1和菜单项2分别设置链接跳转page1和page2，菜单项3不作处理；再在父页面准备三个链接组件分别设置链接跳转page1、page2、page3。
+
+        <img src="../assets/daohangcaidan_202512301535_12.png" class="imgStyle" style="" />
+
+    - 效果演示：
+      - 父页面下所有菜单项均为未选中状态。
+
+        <img src="../assets/daohangcaidan_202512301535_13.png" class="imgStyle" style="width:300px" />
+
+      - 菜单项1和菜单项2设置了跳转页面，点击链接或菜单项跳转对应页面后，对应菜单项为选中状态，菜单项3未设置跳转页面，点击链接或菜单项，该菜单项均不支持选中。
+
+        <img src="../assets/daohangcaidan_202512301535_14.gif" class="imgStyle" style="" />
+
+### 子菜单
+
+选中**导航菜单**或**子菜单**可添加子菜单。在子菜单下继续添加子菜单，即可自定义固定层级数量的多层级导航菜单。
+
+<img src="../assets/daohangcaidan_202512301535_15.png" class="imgStyle" style="" />
+
+#### 数据属性
+
+- 唯一标识：子菜单的唯一标识。当导航菜单的“默认展开”属性包含该值时，子菜单默认展开。
+
+#### 主要属性
+
+- 展开子菜单的延时：展开子菜单时的延时时间，单位为毫秒。
+- 收起子菜单的延时：收起子菜单时的延时时间，单位为毫秒。
+
+#### 状态属性
+
+- 是否禁用：Boolean类型。控制子菜单是否被禁用。子菜单被设置为禁用时，用户无法对其进行展开、选择菜单项等操作。
+- 是否将弹出菜单插入至 body 元素：Boolean类型。弹出菜单是否脱离其原本的父元素，直接插入到页面的 body 元素下，该属性用以解决样式限制、层级冲突等显示问题。
+
+### 菜单项
+
+选中**导航菜单**或**子菜单**可添加菜单项。
+
+<img src="../assets/daohangcaidan_202512301535_16.png" class="imgStyle" style="" />
+
+#### 数据属性
+
+- 唯一标识：菜单项的唯一标识。当导航菜单的“激活菜单”属性包含该值时，菜单项默认选中。
+
+#### 交互属性
+
+- 链接地址：点击菜单项后页面跳转链接的详细地址，支持点击链接跳转至应用内外部页面。具体使用方法请参考[链接](../40.展示/130.链接.md)组件的交互属性。
+
+#### 状态属性
+
+- 是否禁用：Boolean类型，菜单项是否被禁用。当菜单项被设置为禁用时，用户无法对其进行点击操作，菜单项会变灰。
+
+## 事件
+
+### 导航菜单
+
+| **事件名** | **描述**                  |
+| :------ | :------------------------ |
+| 点击      | 鼠标左键单击对应组件时触发该事件中的逻辑      |
+| 双击      | 鼠标左键双击对应组件时触发该事件中的逻辑      |
+| 右键点击    | 鼠标右键单击对应组件时触发该事件中的逻辑      |
+| 鼠标按下    | 鼠标任意键在组件区域内按下时触发该事件中的逻辑   |
+| 鼠标释放    | 鼠标任意键在组件区域内释放时触发该事件中的逻辑   |
+| 鼠标移入    | 鼠标指针移入组件区域时触发该事件中的逻辑      |
+| 鼠标移出    | 鼠标指针移出组件区域时触发该事件中的逻辑      |
+| 菜单激活时   | 当菜单中的某个菜单项被点击时触发该事件中的逻辑。  |
+| 子菜单展开时  | 当菜单中的某个子菜单项被展开时触发该事件中的逻辑。 |
+| 子菜单收起时  | 当菜单中的某个菜单项被收起时触发该事件中的逻辑。  |
+
+### **菜单项**
+
+| **事件名** | **描述**                |
+| :------ | :---------------------- |
+| 点击      | 鼠标左键单击对应组件时触发该事件中的逻辑    |
+| 双击      | 鼠标左键双击对应组件时触发该事件中的逻辑    |
+| 右键点击    | 鼠标右键单击对应组件时触发该事件中的逻辑    |
+| 鼠标按下    | 鼠标任意键在组件区域内按下时触发该事件中的逻辑 |
+| 鼠标释放    | 鼠标任意键在组件区域内释放时触发该事件中的逻辑 |
+| 鼠标移入    | 鼠标指针移入组件区域时触发该事件中的逻辑    |
+| 鼠标移出    | 鼠标指针移出组件区域时触发该事件中的逻辑    |
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用导航菜单组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/daohangcaidan_202512301535_17.png" class="imgStyle" style="width:300px" />
+
+**导航菜单**
+
+- \_if（显示条件）：Boolean类型，导航菜单是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+**子菜单**
+
+- \_if（显示条件）：Boolean类型，子菜单是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+**菜单项**
+
+- \_if（显示条件）：Boolean类型，菜单项是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 组件逻辑
+
+页面添加导航菜单组件后，支持调用导航菜单的组件逻辑，组件逻辑有：
+
+| 逻辑名    | 描述                               |
+| :----- | :------------------------------- |
+| reload | 清除缓存，重新加载数据。                     |
+| open   | 打开指定子菜单和菜单项，输入参数为指定子菜单或菜单项的唯一标识。 |
+| close  | 收起指定子菜单，输入参数为指定子菜单的唯一标识。         |
+
+<img src="../assets/daohangcaidan_202512301535_18.png" class="imgStyle" style="width:300px" />
+
+## 插槽
+
+导航菜单组件中包含插槽，支持拖拽放置其他组件：
+
+- 导航菜单左右两侧包含插槽。常见用法如：放置应用logo名称信息和登录用户信息。
+
+    <img src="../assets/daohangcaidan_202512301535_19.png" class="imgStyle" style="" />
+
+- 子菜单包含插槽。常见用法如：指示当前子菜单的标题。
+
+    <img src="../assets/daohangcaidan_202512301535_20.png" class="imgStyle" style="" />
+
+- 菜单项包含插槽。常见用法如：指示当前菜单项的标题。
+
+    <img src="../assets/daohangcaidan_202512301535_21.png" class="imgStyle" style="" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- active-color：激活菜单项颜色。
+- text-color：菜单项文本颜色。
+- hover-text-color：菜单项悬停文本颜色。
+- bg-color：菜单背景颜色。
+- hover-bg-color：菜单项悬停背景颜色。
+- item-height：菜单项高度。
+- sub-item-height：子菜单项高度。
+- horizontal-height：水平菜单项高度。
+- horizontal-sub-item-height：水平子菜单项高度。
+- item-font-size：菜单项字体大小。
+- item-hover-fill：菜单项悬停背景颜色。
+- border-color：菜单边框颜色。
+- base-level-padding：菜单基础层级间距。
+- level-padding：菜单层级间距。
+- icon-width：菜单项图标宽度。
+
+组件支持在**样式**->**主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式**->**组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/daohangcaidan_202512301535_22.png" class="imgStyle" style="" />
+
+### **使用说明**
+
+将导航菜单组件拖入页面时提供菜单栏和侧边栏两种模式，分别适用于顶部导航栏和侧边导航栏的场景，可供用户在不同需求下选择。
+
+<img src="../assets/daohangcaidan_202512301535_1.png" class="imgStyle" style="" />
+
+## 示例
+
+### 场景介绍
+
+使用菜单项实现页面导航。
+
+### 操作步骤
+
+选中菜单项，设置跳转链接地址。
+
+<img src="../assets/daohangcaidan_202512301535_24.gif" class="imgStyle" style="" />
+
+### 效果演示
+
+<img src="../assets/daohangcaidan_202512301535_25.gif" class="imgStyle" style="" />
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">有鲤</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年12月30日</span>
+</div>
+
+<style>
+.tag-blue {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #dbeafe; /* 浅蓝色背景 */
+    color: #2563eb; /* 深蓝色文字 */
+}
+.tag-yellow {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #fef3c7; /* 浅黄色背景 */
+    color: #d97706; /* 深黄色文字 */
+}
+
+</style>
+
+<style>
+ .highlight {
+    background-color: #eaf6ff;
+    border-color: #679CF8;
+    border-left-width: 0.2rem;
+    border-left-style: solid;
+    padding: 1rem 1rem 1rem 1rem;
+    margin: 1rem 0px;
+}
+</style>