@next-bricks/nav 1.26.1 → 1.26.3

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:

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

@@ -0,0 +1,140 @@
+---
+tagName: eo-sidebar-sub-menu
+displayName: WrappedEoSidebarSubMenu
+description: 侧边栏子菜单，支持简单菜单项、分组和子菜单的嵌套渲染
+category: navigation
+source: "@next-bricks/nav"
+---
+
+# WrappedEoSidebarSubMenu
+
+> 侧边栏子菜单，支持简单菜单项、分组和子菜单的嵌套渲染
+
+## 导入
+
+```tsx
+import { WrappedEoSidebarSubMenu } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性 | 类型          | 必填 | 默认值 | 说明   |
+| ---- | ------------- | ---- | ------ | ------ |
+| menu | `SidebarMenu` | 否   | -      | 菜单项 |
+
+## Examples
+
+### Basic
+
+展示侧边栏子菜单的基本用法，支持简单菜单项、分组和子菜单嵌套，根据当前路径自动高亮选中项。
+
+```tsx
+<WrappedEoSidebarSubMenu
+  style={{ width: "220px", display: "block" }}
+  menu={{
+    title: "mock data",
+    menuItems: [
+      {
+        exact: true,
+        icon: {
+          lib: "easyops",
+          category: "third-menu",
+          icon: "advanced-settings-third-menu",
+        },
+        text: "测试标题",
+        to: "/developers/brick-book/atom/sub-menu",
+        type: "default",
+        key: "0",
+      },
+      {
+        items: [
+          {
+            icon: {
+              lib: "easyops",
+              category: "third-menu",
+              icon: "application-activity-third-menu",
+            },
+            text: "主机测试兼容复杂场景",
+            to: "/developers/brick-book/atom/sub-menu/1",
+            key: "1.0",
+          },
+          {
+            icon: {
+              lib: "easyops",
+              category: "third-menu",
+              icon: "dashboard-third-menu",
+            },
+            text: "Docker",
+            to: "/developers/brick-book/atom/sub-menu/2",
+            key: "1.1",
+          },
+        ],
+        title: "平台资源",
+        type: "group",
+        key: "1",
+      },
+      {
+        items: [
+          {
+            icon: {
+              lib: "easyops",
+              category: "third-menu",
+              icon: "host-instance-maintenance-third-menu",
+            },
+            text: "开发负责人",
+            to: "/developers/brick-book/atom/sub-menu/3",
+            key: "2.0",
+          },
+          {
+            icon: {
+              lib: "easyops",
+              category: "third-menu",
+              icon: "inspection-overview-third-menu",
+            },
+            text: "运维负责人",
+            to: "/developers/brick-book/atom/sub-menu/4",
+            key: "2.1",
+          },
+          {
+            icon: {
+              lib: "easyops",
+              category: "third-menu",
+              icon: "job-management-third-menu",
+            },
+            text: "测试负责人",
+            to: "/developers/brick-book/atom/sub-menu/5",
+            key: "2.2",
+          },
+        ],
+        title: "负责人",
+        type: "group",
+        key: "2",
+      },
+      {
+        items: [
+          {
+            icon: {
+              lib: "easyops",
+              category: "third-menu",
+              icon: "plugin-market-third-menu",
+            },
+            items: [
+              {
+                text: "被调方",
+                to: "/developers/brick-book/atom/sub-menu/8",
+                key: "3.1.0",
+              },
+            ],
+            title: "被调方",
+            type: "subMenu",
+            key: "3.1",
+          },
+        ],
+        title: "调用关系",
+        type: "group",
+        key: "3",
+      },
+    ],
+  }}
+/>
+```

package/docs/eo-sidebar.md

@@ -1,9 +1,37 @@
-侧边栏
+---
+tagName: eo-sidebar
+displayName: WrappedEoSidebar
+description: 侧边栏
+category: navigation
+source: "@next-bricks/nav"
+---
+
+# eo-sidebar
+
+> 侧边栏
+
+## Props
+
+| 属性            | 类型                  | 必填 | 默认值    | 说明                             |
+| --------------- | --------------------- | ---- | --------- | -------------------------------- |
+| menu            | `SidebarMenuType`     | 是   | -         | 菜单数据                         |
+| hiddenFixedIcon | `boolean`             | 否   | -         | 是否隐藏固定按钮                 |
+| expandedState   | `ExpandedState`       | 否   | -         | 侧栏状态                         |
+| position        | `"static" \| "fixed"` | 否   | `"fixed"` | 设置定位方式：静态定位或固定定位 |
+
+## Events
+
+| 事件                  | detail                     | 说明               |
+| --------------------- | -------------------------- | ------------------ |
+| actual.width.change   | `number` — 当前宽度        | 宽度变化时触发     |
+| expanded.state.change | `ExpandedState` — 侧栏状态 | 侧栏状态变化时触发 |
 
 ## Examples
 
 ### Basic
 
+展示侧边栏的基本用法，支持菜单项、子菜单和分组，用户可鼠标悬停展开或点击固定图标固定宽度。
+
 ```yaml preview
 brick: eo-sidebar
 properties:
@@ -102,4 +130,41 @@ properties:
         type: default
         children: []
         key: "5"
+events:
+  actual.width.change:
+    action: console.log
+  expanded.state.change:
+    action: console.log
+```
+
+### 隐藏固定按钮
+
+隐藏侧边栏底部的固定/取消固定图标按钮。
+
+```yaml preview
+brick: eo-sidebar
+properties:
+  style:
+    height: 600px
+  position: static
+  hiddenFixedIcon: true
+  menu:
+    title: 菜单标题
+    menuItems:
+      - icon:
+          lib: easyops
+          category: second-menu
+          icon: automatic-collection-second-menu
+        text: item 1
+        to: /a
+        type: default
+        key: "0"
+      - icon:
+          lib: easyops
+          category: second-menu
+          icon: deployment-instance-second-menu
+        text: item 2
+        to: /b
+        type: default
+        key: "1"
 ```

package/docs/eo-sidebar.react.md

@@ -0,0 +1,142 @@
+---
+tagName: eo-sidebar
+displayName: WrappedEoSidebar
+description: 侧边栏
+category: navigation
+source: "@next-bricks/nav"
+---
+
+# WrappedEoSidebar
+
+> 侧边栏
+
+## 导入
+
+```tsx
+import { WrappedEoSidebar } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性            | 类型                  | 必填 | 默认值    | 说明                             |
+| --------------- | --------------------- | ---- | --------- | -------------------------------- |
+| menu            | `SidebarMenuType`     | 是   | -         | 菜单数据                         |
+| hiddenFixedIcon | `boolean`             | 否   | -         | 是否隐藏固定按钮                 |
+| expandedState   | `ExpandedState`       | 否   | -         | 侧栏状态                         |
+| position        | `"static" \| "fixed"` | 否   | `"fixed"` | 设置定位方式：静态定位或固定定位 |
+
+## Events
+
+| 事件                  | detail                     | 说明               |
+| --------------------- | -------------------------- | ------------------ |
+| onActualWidthChange   | `number` — 当前宽度        | 宽度变化时触发     |
+| onExpandedStateChange | `ExpandedState` — 侧栏状态 | 侧栏状态变化时触发 |
+
+## Examples
+
+### Basic
+
+展示侧边栏的基本用法，支持菜单项、子菜单和分组，用户可鼠标悬停展开或点击固定图标固定宽度。
+
+```tsx
+<WrappedEoSidebar
+  style={{ height: "600px" }}
+  position="static"
+  menu={{
+    title: "这是一个菜单标题",
+    menuItems: [
+      {
+        icon: {
+          lib: "easyops",
+          category: "second-menu",
+          icon: "automatic-collection-second-menu",
+        },
+        text: "item 1",
+        to: "/nlicro-test3/breadcrumb/new",
+        type: "default",
+        children: [],
+        key: "0",
+      },
+      {
+        icon: {
+          lib: "easyops",
+          category: "second-menu",
+          icon: "deployment-instance-second-menu",
+        },
+        text: "item 2",
+        to: "item 2",
+        type: "default",
+        children: [],
+        key: "1",
+      },
+      {
+        type: "subMenu",
+        title: "sub 1",
+        icon: {
+          lib: "easyops",
+          category: "second-menu",
+          icon: "deployment-architecture-second-menu",
+        },
+        items: [
+          {
+            text: "inner 1",
+            to: "inner 1",
+            type: "default",
+            children: [],
+            key: "2.0",
+          },
+          {
+            text: "inner 2",
+            to: "inner 2",
+            type: "default",
+            children: [],
+            key: "2.1",
+          },
+        ],
+        key: "2",
+      },
+    ],
+  }}
+  onActualWidthChange={(e) => console.log(e.detail)}
+  onExpandedStateChange={(e) => console.log(e.detail)}
+/>
+```
+
+### 隐藏固定按钮
+
+隐藏侧边栏底部的固定/取消固定图标按钮。
+
+```tsx
+<WrappedEoSidebar
+  style={{ height: "600px" }}
+  position="static"
+  hiddenFixedIcon={true}
+  menu={{
+    title: "菜单标题",
+    menuItems: [
+      {
+        icon: {
+          lib: "easyops",
+          category: "second-menu",
+          icon: "automatic-collection-second-menu",
+        },
+        text: "item 1",
+        to: "/a",
+        type: "default",
+        key: "0",
+      },
+      {
+        icon: {
+          lib: "easyops",
+          category: "second-menu",
+          icon: "deployment-instance-second-menu",
+        },
+        text: "item 2",
+        to: "/b",
+        type: "default",
+        key: "1",
+      },
+    ],
+  }}
+/>
+```

package/docs/launchpad-button-v2.md

@@ -0,0 +1,23 @@
+---
+tagName: eo-launchpad-button-v2
+displayName: WrappedEoLaunchpadButtonV2
+description: Launchpad 启动台按钮（v2），点击后展开 Launchpad 面板，支持快捷键 Alt+L 开关、Esc 关闭。
+category: ""
+source: "@next-bricks/nav"
+---
+
+# eo-launchpad-button-v2
+
+> Launchpad 启动台按钮（v2），点击后展开 Launchpad 面板，支持快捷键 Alt+L 开关、Esc 关闭。
+
+此构件为内部构件（@insider），提供新版 Launchpad 启动台按钮，点击后展开完整的 Launchpad 面板。支持快捷键 Alt+L 开关和 Esc 关闭，路由切换时自动关闭。
+
+## Examples
+
+### Basic
+
+在导航栏中嵌入新版 Launchpad 启动台按钮。
+
+```yaml preview
+brick: eo-launchpad-button-v2
+```

package/docs/launchpad-button-v2.react.md

@@ -0,0 +1,29 @@
+---
+tagName: eo-launchpad-button-v2
+displayName: WrappedEoLaunchpadButtonV2
+description: Launchpad 启动台按钮（v2），点击后展开 Launchpad 面板，支持快捷键 Alt+L 开关、Esc 关闭。
+category: ""
+source: "@next-bricks/nav"
+---
+
+# WrappedEoLaunchpadButtonV2
+
+> Launchpad 启动台按钮（v2），点击后展开 Launchpad 面板，支持快捷键 Alt+L 开关、Esc 关闭。
+
+## 导入
+
+```tsx
+import { WrappedEoLaunchpadButtonV2 } from "@easyops/wrapped-components";
+```
+
+此构件为内部构件（@insider），提供新版 Launchpad 启动台按钮，点击后展开完整的 Launchpad 面板。支持快捷键 Alt+L 开关和 Esc 关闭，路由切换时自动关闭。
+
+## Examples
+
+### Basic
+
+在导航栏中嵌入新版 Launchpad 启动台按钮。
+
+```tsx
+<WrappedEoLaunchpadButtonV2 />
+```

package/docs/launchpad-button.md

@@ -0,0 +1,23 @@
+---
+tagName: eo-launchpad-button
+displayName: WrappedEoLaunchpadButton
+description: Launchpad 按钮构件
+category: ""
+source: "@next-bricks/nav"
+---
+
+# eo-launchpad-button
+
+> Launchpad 按钮构件
+
+此构件为内部构件（@insider），提供 Launchpad 入口按钮，无需配置属性。
+
+## Examples
+
+### Basic
+
+在导航栏中嵌入 Launchpad 按钮入口。
+
+```yaml preview
+brick: eo-launchpad-button
+```

package/docs/launchpad-button.react.md

@@ -0,0 +1,29 @@
+---
+tagName: eo-launchpad-button
+displayName: WrappedEoLaunchpadButton
+description: Launchpad 按钮构件
+category: ""
+source: "@next-bricks/nav"
+---
+
+# WrappedEoLaunchpadButton
+
+> Launchpad 按钮构件
+
+## 导入
+
+```tsx
+import { WrappedEoLaunchpadButton } from "@easyops/wrapped-components";
+```
+
+此构件为内部构件（@insider），提供 Launchpad 入口按钮，无需配置属性。
+
+## Examples
+
+### Basic
+
+在导航栏中嵌入 Launchpad 按钮入口。
+
+```tsx
+<WrappedEoLaunchpadButton />
+```