@next-bricks/nav 1.26.2 → 1.26.3

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 />
+```

package/docs/launchpad-config.md

@@ -0,0 +1,130 @@
+---
+tagName: nav.launchpad-config
+displayName: WrappedNavLaunchpadConfig
+description: 进行 Launchpad 配置。也可用于菜单自定义显示产品功能清单。
+category: ""
+source: "@next-bricks/nav"
+---
+
+# nav.launchpad-config
+
+> 进行 Launchpad 配置。也可用于菜单自定义显示产品功能清单。
+
+## Props
+
+| 属性              | 类型                             | 必填 | 默认值               | 说明                                                                                                                                        |
+| ----------------- | -------------------------------- | ---- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| menuGroups        | `ConfigMenuGroup[] \| undefined` | 否   | —                    | Launchpad 配置菜单分组数据                                                                                                                  |
+| actions           | `MenuAction[] \| undefined`      | 否   | —                    | 菜单操作按钮配置列表                                                                                                                        |
+| variant           | `ConfigVariant \| undefined`     | 否   | `"launchpad-config"` | 显示变体：launchpad-config（Launchpad 配置）、factory-launchpad-config（工厂配置）、menu-config（菜单配置）、blacklist-config（黑名单配置） |
+| urlTemplate       | `string \| undefined`            | 否   | —                    | 菜单项 APP 类型的链接模板，例如可配置为 `/app/{{ id }}`。注：仅用于 variant: "menu-config"                                                  |
+| customUrlTemplate | `string \| undefined`            | 否   | —                    | 菜单项自定义类型的链接模板，例如可配置为 `/custom?url={{ __pathname }}`。注：仅用于 variant: "menu-config"。外链菜单链接会设置为禁用        |
+| blacklist         | `string[] \| undefined`          | 否   | —                    | 屏蔽的 URL 列表，例如可配置为 `["/app/1", "/app/2"]`。注：仅用于 variant: "blacklist-config"                                                |
+
+## Events
+
+| 事件            | detail                                                                                   | 说明                   |
+| --------------- | ---------------------------------------------------------------------------------------- | ---------------------- |
+| menu-item.click | `ConfigMenuItemNormal` — 被点击的菜单项数据（app 或 custom 类型）                        | 点击菜单项时触发       |
+| action.click    | `MenuActionEventDetail` — { data: 操作关联的菜单项或分组, action: 被点击的操作按钮配置 } | 点击菜单操作按钮时触发 |
+
+## Examples
+
+### Launchpad Config
+
+展示 Launchpad 配置视图，列出可用的菜单分组及应用。
+
+```yaml preview
+brick: nav.launchpad-config
+properties:
+  variant: launchpad-config
+  menuGroups:
+    - id: group1
+      instanceId: g1
+      name: 运维工具
+      items:
+        - id: app1
+          instanceId: a1
+          type: app
+          name: 监控中心
+          url: /next/monitor
+        - id: app2
+          instanceId: a2
+          type: app
+          name: 告警中心
+          url: /next/alert
+    - id: group2
+      instanceId: g2
+      name: 资源管理
+      items:
+        - id: app3
+          instanceId: a3
+          type: app
+          name: 服务器管理
+          url: /next/host
+events:
+  menu-item.click:
+    - action: console.log
+```
+
+### Menu Config Variant
+
+以菜单配置模式展示，使用 urlTemplate 自定义菜单项链接。
+
+```yaml preview
+brick: nav.launchpad-config
+properties:
+  variant: menu-config
+  urlTemplate: /app/{{ id }}
+  menuGroups:
+    - id: group1
+      instanceId: g1
+      name: 运维工具
+      items:
+        - id: app1
+          instanceId: a1
+          type: app
+          name: 监控中心
+          url: /next/monitor
+        - id: custom1
+          instanceId: c1
+          type: custom
+          name: 外部链接
+          url: https://example.com
+events:
+  menu-item.click:
+    - action: console.log
+```
+
+### Blacklist Config
+
+以黑名单配置模式展示，通过 blacklist 指定屏蔽的 URL 列表。
+
+```yaml preview
+brick: nav.launchpad-config
+properties:
+  variant: blacklist-config
+  blacklist:
+    - /monitor
+    - /alert
+  menuGroups:
+    - id: group1
+      instanceId: g1
+      name: 运维工具
+      items:
+        - id: app1
+          instanceId: a1
+          type: app
+          name: 监控中心
+          url: /next/monitor
+        - id: app2
+          instanceId: a2
+          type: app
+          name: 告警中心
+          url: /next/alert
+        - id: app3
+          instanceId: a3
+          type: app
+          name: 服务器管理
+          url: /next/host
+```