@next-bricks/nav 1.26.1 → 1.26.3

package/docs/eo-search-launchpad.md

@@ -1,9 +1,37 @@
-launchpad 搜索
+---
+tagName: eo-search-launchpad
+displayName: WrappedEoSearchLaunchpad
+description: launchpad 搜索
+category: ""
+source: "@next-bricks/nav"
+---
+
+# eo-search-launchpad
+
+> launchpad 搜索
+
+## Props
+
+| 属性     | 类型      | 必填 | 默认值 | 说明                         |
+| -------- | --------- | ---- | ------ | ---------------------------- |
+| readonly | `boolean` | 否   | -      | 简约模式（隐藏收藏切换按钮） |
 
 ## Examples
 
 ### Basic
 
+展示 launchpad 搜索的基本用法，聚焦后显示应用菜单列表，支持搜索过滤。
+
+```yaml preview
+brick: eo-search-launchpad
+```
+
+### 简约模式
+
+启用只读模式后隐藏收藏切换按钮。
+
 ```yaml preview
 brick: eo-search-launchpad
+properties:
+  readonly: true
 ```

package/docs/eo-search-launchpad.react.md

@@ -0,0 +1,41 @@
+---
+tagName: eo-search-launchpad
+displayName: WrappedEoSearchLaunchpad
+description: launchpad 搜索
+category: ""
+source: "@next-bricks/nav"
+---
+
+# WrappedEoSearchLaunchpad
+
+> launchpad 搜索
+
+## 导入
+
+```tsx
+import { WrappedEoSearchLaunchpad } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性     | 类型      | 必填 | 默认值 | 说明                         |
+| -------- | --------- | ---- | ------ | ---------------------------- |
+| readonly | `boolean` | 否   | -      | 简约模式（隐藏收藏切换按钮） |
+
+## Examples
+
+### Basic
+
+展示 launchpad 搜索的基本用法，聚焦后显示应用菜单列表，支持搜索过滤。
+
+```tsx
+<WrappedEoSearchLaunchpad />
+```
+
+### 简约模式
+
+启用只读模式后隐藏收藏切换按钮。
+
+```tsx
+<WrappedEoSearchLaunchpad readonly={true} />
+```

package/docs/eo-sidebar-menu-group.md

@@ -1,9 +1,36 @@
-侧栏菜单分组
+---
+tagName: eo-sidebar-menu-group
+displayName: WrappedEoSidebarMenuGroup
+description: 侧栏菜单分组
+category: navigation
+source: "@next-bricks/nav"
+---
+
+# eo-sidebar-menu-group
+
+> 侧栏菜单分组
+
+## Props
+
+| 属性          | 类型      | 必填 | 默认值 | 说明                 |
+| ------------- | --------- | ---- | ------ | -------------------- |
+| collapsable   | `boolean` | 否   | -      | 是否允许折叠         |
+| collapsed     | `boolean` | 否   | -      | 是否折叠             |
+| selected      | `boolean` | 否   | -      | 是否选中             |
+| menuCollapsed | `boolean` | 否   | -      | 菜单整体是否收起状态 |
+
+## Slots
+
+| 名称  | 说明     |
+| ----- | -------- |
+| title | 分组标题 |
 
 ## Examples
 
 ### Basic
 
+展示侧栏菜单分组的基本用法，通过 `title` 插槽设置分组标题，默认插槽放置菜单项。
+
 ```yaml preview
 - brick: eo-sidebar-menu-group
   properties:
@@ -36,3 +63,35 @@
           category: second-menu
           icon: advanced-settings-second-menu
 ```
+
+### 可折叠分组
+
+启用 `collapsable` 后，点击分组标题可展开/收起该分组。
+
+```yaml preview
+- brick: eo-sidebar-menu-group
+  properties:
+    style:
+      width: 196px
+    collapsable: true
+    collapsed: false
+  children:
+    - brick: span
+      slot: title
+      properties:
+        textContent: "可折叠分组"
+    - brick: eo-sidebar-menu-item
+      properties:
+        textContent: "菜单项 1"
+        icon:
+          lib: easyops
+          category: second-menu
+          icon: advanced-settings-second-menu
+    - brick: eo-sidebar-menu-item
+      properties:
+        textContent: "菜单项 2"
+        icon:
+          lib: easyops
+          category: second-menu
+          icon: alibaba-cloud-disk-second-menu
+```

package/docs/eo-sidebar-menu-group.react.md

@@ -0,0 +1,98 @@
+---
+tagName: eo-sidebar-menu-group
+displayName: WrappedEoSidebarMenuGroup
+description: 侧栏菜单分组
+category: navigation
+source: "@next-bricks/nav"
+---
+
+# WrappedEoSidebarMenuGroup
+
+> 侧栏菜单分组
+
+## 导入
+
+```tsx
+import { WrappedEoSidebarMenuGroup } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性          | 类型      | 必填 | 默认值 | 说明                 |
+| ------------- | --------- | ---- | ------ | -------------------- |
+| collapsable   | `boolean` | 否   | -      | 是否允许折叠         |
+| collapsed     | `boolean` | 否   | -      | 是否折叠             |
+| selected      | `boolean` | 否   | -      | 是否选中             |
+| menuCollapsed | `boolean` | 否   | -      | 菜单整体是否收起状态 |
+
+## Slots
+
+| 名称  | 说明     |
+| ----- | -------- |
+| title | 分组标题 |
+
+## Examples
+
+### Basic
+
+展示侧栏菜单分组的基本用法，通过 `title` 插槽设置分组标题，默认插槽放置菜单项。
+
+```tsx
+<WrappedEoSidebarMenuGroup style={{ width: "196px" }}>
+  <span slot="title">菜单分组</span>
+  <WrappedEoSidebarMenuItem
+    textContent="菜单项 1"
+    icon={{
+      lib: "easyops",
+      category: "second-menu",
+      icon: "advanced-settings-second-menu",
+    }}
+  />
+  <WrappedEoSidebarMenuItem
+    textContent="菜单项 2"
+    icon={{
+      lib: "easyops",
+      category: "second-menu",
+      icon: "alibaba-cloud-disk-second-menu",
+    }}
+  />
+  <WrappedEoSidebarMenuItem
+    textContent="菜单项 3"
+    icon={{
+      lib: "easyops",
+      category: "second-menu",
+      icon: "advanced-settings-second-menu",
+    }}
+  />
+</WrappedEoSidebarMenuGroup>
+```
+
+### 可折叠分组
+
+启用 `collapsable` 后，点击分组标题可展开/收起该分组。
+
+```tsx
+<WrappedEoSidebarMenuGroup
+  style={{ width: "196px" }}
+  collapsable={true}
+  collapsed={false}
+>
+  <span slot="title">可折叠分组</span>
+  <WrappedEoSidebarMenuItem
+    textContent="菜单项 1"
+    icon={{
+      lib: "easyops",
+      category: "second-menu",
+      icon: "advanced-settings-second-menu",
+    }}
+  />
+  <WrappedEoSidebarMenuItem
+    textContent="菜单项 2"
+    icon={{
+      lib: "easyops",
+      category: "second-menu",
+      icon: "alibaba-cloud-disk-second-menu",
+    }}
+  />
+</WrappedEoSidebarMenuGroup>
+```

package/docs/eo-sidebar-menu-item.md

@@ -1,9 +1,33 @@
-侧栏菜单项
+---
+tagName: eo-sidebar-menu-item
+displayName: WrappedEoSidebarMenuItem
+description: 侧栏菜单项
+category: navigation
+source: "@next-bricks/nav"
+---
+
+# eo-sidebar-menu-item
+
+> 侧栏菜单项
+
+## Props
+
+| 属性          | 类型                  | 必填 | 默认值 | 说明                     |
+| ------------- | --------------------- | ---- | ------ | ------------------------ |
+| url           | `LinkProps["url"]`    | 否   | -      | 菜单项对应的系统内地址   |
+| href          | `LinkProps["href"]`   | 否   | -      | 菜单项对应的外部链接地址 |
+| target        | `LinkProps["target"]` | 否   | -      | 菜单项链接打开的目标     |
+| icon          | `GeneralIconProps`    | 否   | -      | 菜单项的图标             |
+| selected      | `boolean`             | 否   | -      | 是否选中                 |
+| inSubmenu     | `boolean`             | 否   | -      | 是否在二级菜单中         |
+| menuCollapsed | `boolean`             | 否   | -      | 菜单整体是否收起状态     |
 
 ## Examples
 
 ### Basic
 
+展示侧栏菜单项的基本用法，包含图标和文字，点击后导航至对应地址。
+
 ```yaml preview
 brick: eo-sidebar-menu-item
 properties:
@@ -15,3 +39,55 @@ properties:
     category: second-menu
     icon: availability-zone-second-menu
 ```
+
+### 选中状态
+
+展示菜单项的选中高亮效果。
+
+```yaml preview
+brick: eo-sidebar-menu-item
+properties:
+  style:
+    width: 196px
+  textContent: "告警规则"
+  selected: true
+  icon:
+    lib: easyops
+    category: second-menu
+    icon: availability-zone-second-menu
+```
+
+### 外部链接
+
+通过 `href` 属性设置外部链接，配合 `target` 在新标签页中打开。
+
+```yaml preview
+brick: eo-sidebar-menu-item
+properties:
+  style:
+    width: 196px
+  textContent: "外部文档"
+  href: "http://www.example.com"
+  target: _blank
+  icon:
+    lib: antd
+    icon: link
+    theme: outlined
+```
+
+### 子菜单中的菜单项
+
+设置 `inSubmenu` 为 `true` 时，菜单项以缩进样式呈现，适合放在子菜单下。
+
+```yaml preview
+brick: eo-sidebar-menu-item
+properties:
+  style:
+    width: 196px
+  textContent: "子菜单项"
+  inSubmenu: true
+  icon:
+    lib: easyops
+    category: second-menu
+    icon: nginx-second-menu
+```

package/docs/eo-sidebar-menu-item.react.md

@@ -0,0 +1,91 @@
+---
+tagName: eo-sidebar-menu-item
+displayName: WrappedEoSidebarMenuItem
+description: 侧栏菜单项
+category: navigation
+source: "@next-bricks/nav"
+---
+
+# WrappedEoSidebarMenuItem
+
+> 侧栏菜单项
+
+## 导入
+
+```tsx
+import { WrappedEoSidebarMenuItem } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性          | 类型                  | 必填 | 默认值 | 说明                     |
+| ------------- | --------------------- | ---- | ------ | ------------------------ |
+| url           | `LinkProps["url"]`    | 否   | -      | 菜单项对应的系统内地址   |
+| href          | `LinkProps["href"]`   | 否   | -      | 菜单项对应的外部链接地址 |
+| target        | `LinkProps["target"]` | 否   | -      | 菜单项链接打开的目标     |
+| icon          | `GeneralIconProps`    | 否   | -      | 菜单项的图标             |
+| selected      | `boolean`             | 否   | -      | 是否选中                 |
+| inSubmenu     | `boolean`             | 否   | -      | 是否在二级菜单中         |
+| menuCollapsed | `boolean`             | 否   | -      | 菜单整体是否收起状态     |
+
+## Examples
+
+### Basic
+
+展示侧栏菜单项的基本用法，包含图标和文字，点击后导航至对应地址。
+
+```tsx
+<WrappedEoSidebarMenuItem
+  style={{ width: "196px" }}
+  textContent="告警规则"
+  icon={{
+    lib: "easyops",
+    category: "second-menu",
+    icon: "availability-zone-second-menu",
+  }}
+/>
+```
+
+### 选中状态
+
+展示菜单项的选中高亮效果。
+
+```tsx
+<WrappedEoSidebarMenuItem
+  style={{ width: "196px" }}
+  textContent="告警规则"
+  selected={true}
+  icon={{
+    lib: "easyops",
+    category: "second-menu",
+    icon: "availability-zone-second-menu",
+  }}
+/>
+```
+
+### 外部链接
+
+通过 `href` 属性设置外部链接，配合 `target` 在新标签页中打开。
+
+```tsx
+<WrappedEoSidebarMenuItem
+  style={{ width: "196px" }}
+  textContent="外部文档"
+  href="http://www.example.com"
+  target="_blank"
+  icon={{ lib: "antd", icon: "link", theme: "outlined" }}
+/>
+```
+
+### 子菜单中的菜单项
+
+设置 `inSubmenu` 为 `true` 时，菜单项以缩进样式呈现，适合放在子菜单下。
+
+```tsx
+<WrappedEoSidebarMenuItem
+  style={{ width: "196px" }}
+  textContent="子菜单项"
+  inSubmenu={true}
+  icon={{ lib: "easyops", category: "second-menu", icon: "nginx-second-menu" }}
+/>
+```

package/docs/eo-sidebar-menu-submenu.md

@@ -1,9 +1,36 @@
-侧栏菜单子菜单
+---
+tagName: eo-sidebar-menu-submenu
+displayName: WrappedEoSidebarMenuSubmenu
+description: 侧栏菜单子菜单
+category: navigation
+source: "@next-bricks/nav"
+---
+
+# eo-sidebar-menu-submenu
+
+> 侧栏菜单子菜单
+
+## Props
+
+| 属性          | 类型               | 必填 | 默认值 | 说明                 |
+| ------------- | ------------------ | ---- | ------ | -------------------- |
+| icon          | `GeneralIconProps` | 否   | -      | 菜单的图标           |
+| selected      | `boolean`          | 否   | -      | 是否选中             |
+| collapsed     | `boolean`          | 否   | -      | 是否折叠             |
+| menuCollapsed | `boolean`          | 否   | -      | 菜单整体是否收起状态 |
+
+## Slots
+
+| 名称  | 说明       |
+| ----- | ---------- |
+| title | 子菜单标题 |
 
 ## Examples
 
 ### Basic
 
+展示侧栏子菜单的基本用法，通过 `title` 插槽设置标题，默认插槽放置子菜单项，点击标题可切换展开/收起。
+
 ```yaml preview
 - brick: eo-sidebar-menu-submenu
   properties:
@@ -35,3 +62,32 @@
         textContent: "菜单项 3"
         inSubmenu: true
 ```
+
+### 默认折叠
+
+设置 `collapsed` 为 `true` 使子菜单默认为收起状态。
+
+```yaml preview
+- brick: eo-sidebar-menu-submenu
+  properties:
+    style:
+      width: 196px
+    collapsed: true
+    icon:
+      lib: antd
+      icon: menu
+      theme: outlined
+  children:
+    - brick: span
+      slot: title
+      properties:
+        textContent: "默认折叠子菜单"
+    - brick: eo-sidebar-menu-item
+      properties:
+        textContent: "菜单项 1"
+        inSubmenu: true
+    - brick: eo-sidebar-menu-item
+      properties:
+        textContent: "菜单项 2"
+        inSubmenu: true
+```

package/docs/eo-sidebar-menu-submenu.react.md

@@ -0,0 +1,74 @@
+---
+tagName: eo-sidebar-menu-submenu
+displayName: WrappedEoSidebarMenuSubmenu
+description: 侧栏菜单子菜单
+category: navigation
+source: "@next-bricks/nav"
+---
+
+# WrappedEoSidebarMenuSubmenu
+
+> 侧栏菜单子菜单
+
+## 导入
+
+```tsx
+import { WrappedEoSidebarMenuSubmenu } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性          | 类型               | 必填 | 默认值 | 说明                 |
+| ------------- | ------------------ | ---- | ------ | -------------------- |
+| icon          | `GeneralIconProps` | 否   | -      | 菜单的图标           |
+| selected      | `boolean`          | 否   | -      | 是否选中             |
+| collapsed     | `boolean`          | 否   | -      | 是否折叠             |
+| menuCollapsed | `boolean`          | 否   | -      | 菜单整体是否收起状态 |
+
+## Slots
+
+| 名称  | 说明       |
+| ----- | ---------- |
+| title | 子菜单标题 |
+
+## Examples
+
+### Basic
+
+展示侧栏子菜单的基本用法，通过 `title` 插槽设置标题，默认插槽放置子菜单项，点击标题可切换展开/收起。
+
+```tsx
+<WrappedEoSidebarMenuSubmenu
+  style={{ width: "196px" }}
+  icon={{ lib: "antd", icon: "menu", theme: "outlined" }}
+>
+  <span slot="title">子菜单</span>
+  <WrappedEoSidebarMenuItem
+    textContent="菜单项 1"
+    icon={{
+      lib: "easyops",
+      category: "second-menu",
+      icon: "availability-zone-second-menu",
+    }}
+    inSubmenu={true}
+  />
+  <WrappedEoSidebarMenuItem textContent="菜单项 2" inSubmenu={true} />
+  <WrappedEoSidebarMenuItem textContent="菜单项 3" inSubmenu={true} />
+</WrappedEoSidebarMenuSubmenu>
+```
+
+### 默认折叠
+
+设置 `collapsed` 为 `true` 使子菜单默认为收起状态。
+
+```tsx
+<WrappedEoSidebarMenuSubmenu
+  style={{ width: "196px" }}
+  collapsed={true}
+  icon={{ lib: "antd", icon: "menu", theme: "outlined" }}
+>
+  <span slot="title">默认折叠子菜单</span>
+  <WrappedEoSidebarMenuItem textContent="菜单项 1" inSubmenu={true} />
+  <WrappedEoSidebarMenuItem textContent="菜单项 2" inSubmenu={true} />
+</WrappedEoSidebarMenuSubmenu>
+```

package/docs/eo-sidebar-menu.md

@@ -1,9 +1,27 @@
-侧栏菜单
+---
+tagName: eo-sidebar-menu
+displayName: WrappedEoSidebarMenu
+description: 侧栏菜单
+category: navigation
+source: "@next-bricks/nav"
+---
+
+# eo-sidebar-menu
+
+> 侧栏菜单
+
+## Props
+
+| 属性          | 类型      | 必填 | 默认值 | 说明                 |
+| ------------- | --------- | ---- | ------ | -------------------- |
+| menuCollapsed | `boolean` | 否   | -      | 菜单整体是否收起状态 |
 
 ## Examples
 
 ### Basic
 
+展示侧栏菜单的基本用法，可包含菜单项、菜单分组和子菜单，支持整体收起/展开切换。
+
 ```yaml preview gap
 - brick: eo-button
   context: