@next-bricks/nav 1.26.2 → 1.26.4

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:

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

@@ -0,0 +1,124 @@
+---
+tagName: eo-sidebar-menu
+displayName: WrappedEoSidebarMenu
+description: 侧栏菜单
+category: navigation
+source: "@next-bricks/nav"
+---
+
+# WrappedEoSidebarMenu
+
+> 侧栏菜单
+
+## 导入
+
+```tsx
+import { WrappedEoSidebarMenu } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性          | 类型      | 必填 | 默认值 | 说明                 |
+| ------------- | --------- | ---- | ------ | -------------------- |
+| menuCollapsed | `boolean` | 否   | -      | 菜单整体是否收起状态 |
+
+## Examples
+
+### Basic
+
+展示侧栏菜单的基本用法，可包含菜单项、菜单分组和子菜单，支持整体收起/展开切换。
+
+```tsx
+import { useState } from "react";
+
+function SidebarMenuDemo() {
+  const [menuCollapsed, setMenuCollapsed] = useState(false);
+
+  return (
+    <>
+      <WrappedEoButton
+        type="primary"
+        onClick={() => setMenuCollapsed((c) => !c)}
+      >
+        switch collapsed
+      </WrappedEoButton>
+      <WrappedEoSidebarMenu
+        menuCollapsed={menuCollapsed}
+        style={{ width: menuCollapsed ? "40px" : "196px" }}
+      >
+        <WrappedEoSidebarMenuItem
+          textContent="菜单项 1"
+          icon={{
+            lib: "easyops",
+            category: "second-menu",
+            icon: "gaussdb-for-opengauss-second-menu",
+          }}
+        />
+        <WrappedEoSidebarMenuGroup>
+          <span slot="title">菜单分组</span>
+          <WrappedEoSidebarMenuItem
+            textContent="菜单项 2"
+            icon={{
+              lib: "easyops",
+              category: "second-menu",
+              icon: "firewall-second-menu",
+            }}
+          />
+          <WrappedEoSidebarMenuItem
+            textContent="菜单项 3"
+            icon={{
+              lib: "easyops",
+              category: "second-menu",
+              icon: "host-resources-second-menu",
+            }}
+          />
+          <WrappedEoSidebarMenuItem
+            textContent="菜单项 4"
+            icon={{
+              lib: "easyops",
+              category: "second-menu",
+              icon: "loadbalance-second-menu",
+            }}
+          />
+        </WrappedEoSidebarMenuGroup>
+        <WrappedEoSidebarMenuSubmenu
+          icon={{
+            lib: "easyops",
+            category: "second-menu",
+            icon: "oceanbase-second-menu",
+          }}
+        >
+          <span slot="title">子菜单</span>
+          <WrappedEoSidebarMenuItem
+            textContent="菜单项 5"
+            icon={{
+              lib: "easyops",
+              category: "second-menu",
+              icon: "nginx-second-menu",
+            }}
+            inSubmenu={true}
+          />
+          <WrappedEoSidebarMenuItem
+            textContent="菜单项 6"
+            icon={{
+              lib: "easyops",
+              category: "second-menu",
+              icon: "process-task-second-menu",
+            }}
+            inSubmenu={true}
+          />
+          <WrappedEoSidebarMenuItem
+            textContent="菜单项 7"
+            icon={{
+              lib: "easyops",
+              category: "second-menu",
+              icon: "persistent-volume-statement-second-menu",
+            }}
+            inSubmenu={true}
+          />
+        </WrappedEoSidebarMenuSubmenu>
+      </WrappedEoSidebarMenu>
+    </>
+  );
+}
+```

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

@@ -1,9 +1,27 @@
-构件 `eo-sidebar-sub-menu`
+---
+tagName: eo-sidebar-sub-menu
+displayName: WrappedEoSidebarSubMenu
+description: 侧边栏子菜单，支持简单菜单项、分组和子菜单的嵌套渲染
+category: navigation
+source: "@next-bricks/nav"
+---
+
+# eo-sidebar-sub-menu
+
+> 侧边栏子菜单，支持简单菜单项、分组和子菜单的嵌套渲染
+
+## Props
+
+| 属性 | 类型          | 必填 | 默认值 | 说明   |
+| ---- | ------------- | ---- | ------ | ------ |
+| menu | `SidebarMenu` | 否   | -      | 菜单项 |
 
 ## Examples
 
 ### Basic
 
+展示侧边栏子菜单的基本用法，支持简单菜单项、分组和子菜单嵌套，根据当前路径自动高亮选中项。
+
 ```yaml preview
 - brick: eo-sidebar-sub-menu
   properties: