@next-bricks/nav 1.26.2 → 1.26.4

package/docs/eo-directory-tree.react.md

@@ -0,0 +1,153 @@
+---
+tagName: eo-directory-tree
+displayName: WrappedEoDirectoryTree
+description: 目录树
+category: ""
+source: "@next-bricks/nav"
+---
+
+# WrappedEoDirectoryTree
+
+> 目录树
+
+## 导入
+
+```tsx
+import { WrappedEoDirectoryTree } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                   | 类型                                  | 必填 | 默认值 | 说明                                       |
+| ---------------------- | ------------------------------------- | ---- | ------ | ------------------------------------------ |
+| data                   | `TreeItem[]`                          | 是   | `[]`   | 数据源                                     |
+| directoryTitle         | `string \| undefined`                 | 否   | —      | 目录标题                                   |
+| internalNodeSelectable | `boolean \| undefined`                | 否   | —      | 设置中间节点是否可选，默认只有叶子节点可选 |
+| searchable             | `boolean \| undefined`                | 否   | —      | 可搜索                                     |
+| placeholder            | `string \| undefined`                 | 否   | —      | 搜索占位说明                               |
+| searchFields           | `(string \| string[])[] \| undefined` | 否   | —      | 除了 title 以外，额外的搜索字段            |
+| suffixBrick            | `SuffixBrickConf \| undefined`        | 否   | —      | 后缀 useBrick                              |
+| selectedKeys           | `string[] \| undefined`               | 否   | —      | 选中的 keys                                |
+| expandedKeys           | `string[] \| undefined`               | 否   | —      | 展开的 keys                                |
+
+## Events
+
+| 事件     | detail                                                                                      | 说明     |
+| -------- | ------------------------------------------------------------------------------------------- | -------- |
+| onExpand | `{ keys: string[]; node: NodeData }` — { keys: 展开的 keys 列表, node: 触发展开的节点数据 } | 展开事件 |
+| onSelect | `{ keys: string[]; node: NodeData }` — { keys: 选中的 keys 列表, node: 触发选择的节点数据 } | 选择事件 |
+
+## Methods
+
+| 方法                          | 参数         | 返回值 | 说明           |
+| ----------------------------- | ------------ | ------ | -------------- |
+| expandAll                     | `() => void` | `void` | 展开全部       |
+| collapseAll                   | `() => void` | `void` | 收起全部       |
+| expandAccordingToSelectedKeys | `() => void` | `void` | 根据选择项展开 |
+
+## Examples
+
+### Basic
+
+展示可搜索的多层级目录树，支持展开/收起和节点选择。
+
+```tsx
+const ref = useRef<any>();
+
+<WrappedEoDirectoryTree
+  ref={ref}
+  style={{ width: 400 }}
+  directoryTitle="目录名称标题"
+  placeholder="输入关键词"
+  searchable={true}
+  selectedKeys={["1-1-1"]}
+  suffixBrick={{
+    useBrick: {
+      if: "<% !Array.isArray(DATA.data.children) %>",
+      brick: "eo-tag",
+      properties: { textContent: "<% DATA.data.key %>" },
+    },
+  }}
+  data={[
+    { key: "0", title: "第一层级 - 0" },
+    {
+      key: "1",
+      title: "第一层级 - 1",
+      children: [
+        { key: "1-0", title: "第二层级 - 0" },
+        {
+          key: "1-1",
+          title: "第二层级 - 1",
+          children: [
+            { key: "1-1-0", title: "第三层级 - 0" },
+            { key: "1-1-1", title: "第三层级 - 1" },
+            { key: "1-1-2", title: "第三层级 - 2" },
+          ],
+        },
+        { key: "1-3", title: "第二层级 - 2" },
+      ],
+    },
+    { key: "2", title: "第一层级 - 2" },
+    { key: "3", title: "第一层级 - 3" },
+    { key: "4", title: "第一层级 - 4" },
+  ]}
+  onExpand={(e) => console.log(e.detail)}
+  onSelect={(e) => console.log(e.detail)}
+/>
+<button onClick={() => ref.current?.expandAll()}>展开全部</button>
+<button onClick={() => ref.current?.collapseAll()}>收起全部</button>
+<button onClick={() => ref.current?.expandAccordingToSelectedKeys()}>定位选中项</button>
+```
+
+### Internal Node Selectable
+
+允许中间节点（非叶子节点）被选中。
+
+```tsx
+<WrappedEoDirectoryTree
+  style={{ width: 400 }}
+  directoryTitle="可选中间节点"
+  internalNodeSelectable={true}
+  data={[
+    {
+      key: "parent1",
+      title: "父节点1",
+      children: [
+        { key: "child1", title: "子节点1" },
+        { key: "child2", title: "子节点2" },
+      ],
+    },
+    {
+      key: "parent2",
+      title: "父节点2",
+      children: [{ key: "child3", title: "子节点3" }],
+    },
+  ]}
+  onSelect={(e) => console.log(e.detail)}
+/>
+```
+
+### Custom Search Fields
+
+指定额外的搜索字段，在 title 之外扩展搜索范围。
+
+```tsx
+<WrappedEoDirectoryTree
+  style={{ width: 400 }}
+  directoryTitle="扩展搜索字段"
+  searchable={true}
+  placeholder="搜索名称或描述"
+  searchFields={["description"]}
+  expandedKeys={["parent1"]}
+  data={[
+    {
+      key: "parent1",
+      title: "应用服务",
+      children: [
+        { key: "child1", title: "服务A", description: "核心业务服务" },
+        { key: "child2", title: "服务B", description: "辅助工具服务" },
+      ],
+    },
+  ]}
+/>
+```

package/docs/eo-directory.md

@@ -1,9 +1,39 @@
-构件 `eo-directory`
+---
+tagName: eo-directory
+displayName: WrappedEoDirectory
+description: 目录
+category: ""
+source: "@next-bricks/nav"
+---
+
+# eo-directory
+
+> 目录
+
+## Props
+
+| 属性                | 类型                                      | 必填 | 默认值    | 说明                             |
+| ------------------- | ----------------------------------------- | ---- | --------- | -------------------------------- |
+| position            | `"static" \| "fixed"`                     | 是   | `"fixed"` | 设置定位方式：静态定位或固定定位 |
+| directoryTitle      | `string \| undefined`                     | 否   | —         | 目录标题                         |
+| menuItems           | `MenuItem[]`                              | 是   | `[]`      | 菜单数据                         |
+| hideRightBorder     | `boolean`                                 | 是   | `false`   | 是否隐藏右边线                   |
+| suffixBrick         | `{ useBrick: UseBrickConf } \| undefined` | 否   | —         | 后缀 useBrick                    |
+| defaultSelectedKeys | `string[] \| undefined`                   | 否   | —         | 默认选中高亮的菜单项             |
+
+## Events
+
+| 事件              | detail                                                                                            | 说明                     |
+| ----------------- | ------------------------------------------------------------------------------------------------- | ------------------------ |
+| menu.item.click   | `MenuItemClickEventDetail` — { groupKey: 对应分组的 key（仅分组子项有值）, data: 被点击的菜单项 } | 菜单项点击时触发         |
+| suffix.icon.click | `{ key: string }` — { key: 对应菜单项或分组的 key }                                               | 点击菜单项后缀图标时触发 |
 
 ## Examples
 
 ### Basic
 
+展示带分组和子项的目录菜单，支持点击菜单项和后缀图标。
+
 ```yaml preview
 - brick: div
   properties:
@@ -24,6 +54,11 @@
             defaultSelectedKeys:
               - strategy1
             directoryTitle: 目录标题
+            suffixBrick:
+              useBrick:
+                brick: eo-tag
+                properties:
+                  textContent: <% DATA.data.title %>
             menuItems:
               - title: 测试
                 type: group
@@ -50,3 +85,67 @@
                   - key: manual-strategy1
                     title: 数据3
 ```
+
+### Hide Right Border
+
+隐藏目录右侧边线，适用于特定布局场景。
+
+```yaml preview
+- brick: div
+  properties:
+    style:
+      width: 200px
+      height: 300px
+  slots:
+    "":
+      type: bricks
+      bricks:
+        - brick: eo-directory
+          properties:
+            hideRightBorder: true
+            directoryTitle: 无右边线目录
+            menuItems:
+              - title: 分组A
+                type: group
+                key: groupA
+                children:
+                  - key: item1
+                    title: 子项1
+                  - key: item2
+                    title: 子项2
+```
+
+### Single Items
+
+展示无分组的单层菜单项列表，并使用 position static 静态定位。
+
+```yaml preview
+- brick: div
+  properties:
+    style:
+      width: 200px
+      height: 300px
+  slots:
+    "":
+      type: bricks
+      bricks:
+        - brick: eo-directory
+          events:
+            menu.item.click:
+              - action: console.log
+          properties:
+            position: static
+            directoryTitle: 单层目录
+            defaultSelectedKeys:
+              - item1
+            menuItems:
+              - title: 菜单项1
+                type: item
+                key: item1
+              - title: 菜单项2
+                type: item
+                key: item2
+              - title: 菜单项3
+                type: item
+                key: item3
+```

package/docs/eo-directory.react.md

@@ -0,0 +1,123 @@
+---
+tagName: eo-directory
+displayName: WrappedEoDirectory
+description: 目录
+category: ""
+source: "@next-bricks/nav"
+---
+
+# WrappedEoDirectory
+
+> 目录
+
+## 导入
+
+```tsx
+import { WrappedEoDirectory } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                | 类型                                      | 必填 | 默认值    | 说明                             |
+| ------------------- | ----------------------------------------- | ---- | --------- | -------------------------------- |
+| position            | `"static" \| "fixed"`                     | 是   | `"fixed"` | 设置定位方式：静态定位或固定定位 |
+| directoryTitle      | `string \| undefined`                     | 否   | —         | 目录标题                         |
+| menuItems           | `MenuItem[]`                              | 是   | `[]`      | 菜单数据                         |
+| hideRightBorder     | `boolean`                                 | 是   | `false`   | 是否隐藏右边线                   |
+| suffixBrick         | `{ useBrick: UseBrickConf } \| undefined` | 否   | —         | 后缀 useBrick                    |
+| defaultSelectedKeys | `string[] \| undefined`                   | 否   | —         | 默认选中高亮的菜单项             |
+
+## Events
+
+| 事件              | detail                                                                                            | 说明                     |
+| ----------------- | ------------------------------------------------------------------------------------------------- | ------------------------ |
+| onMenuItemClick   | `MenuItemClickEventDetail` — { groupKey: 对应分组的 key（仅分组子项有值）, data: 被点击的菜单项 } | 菜单项点击时触发         |
+| onSuffixIconClick | `{ key: string }` — { key: 对应菜单项或分组的 key }                                               | 点击菜单项后缀图标时触发 |
+
+## Examples
+
+### Basic
+
+展示带分组和子项的目录菜单，支持点击菜单项和后缀图标。
+
+```tsx
+<div style={{ width: 200, height: 500 }}>
+  <WrappedEoDirectory
+    defaultSelectedKeys={["strategy1"]}
+    directoryTitle="目录标题"
+    suffixBrick={{
+      useBrick: {
+        brick: "eo-tag",
+        properties: { textContent: "<% DATA.data.title %>" },
+      },
+    }}
+    menuItems={[
+      {
+        title: "测试",
+        type: "group",
+        suffixIcon: { lib: "antd", icon: "plus-circle", theme: "outlined" },
+        key: "test",
+        children: [
+          { key: "strategy1", title: "数据1" },
+          { key: "strategy2", title: "数据2" },
+        ],
+      },
+      {
+        title: "其他",
+        type: "group",
+        suffixIcon: { lib: "antd", icon: "plus-circle", theme: "outlined" },
+        suffixIconDisabled: true,
+        suffixIconTooltip: "禁止点击",
+        key: "otherKey",
+        children: [{ key: "manual-strategy1", title: "数据3" }],
+      },
+    ]}
+    onMenuItemClick={(e) => console.log(e.detail)}
+    onSuffixIconClick={(e) => console.log(e.detail)}
+  />
+</div>
+```
+
+### Hide Right Border
+
+隐藏目录右侧边线，适用于特定布局场景。
+
+```tsx
+<div style={{ width: 200, height: 300 }}>
+  <WrappedEoDirectory
+    hideRightBorder={true}
+    directoryTitle="无右边线目录"
+    menuItems={[
+      {
+        title: "分组A",
+        type: "group",
+        key: "groupA",
+        children: [
+          { key: "item1", title: "子项1" },
+          { key: "item2", title: "子项2" },
+        ],
+      },
+    ]}
+  />
+</div>
+```
+
+### Single Items
+
+展示无分组的单层菜单项列表，并使用 position static 静态定位。
+
+```tsx
+<div style={{ width: 200, height: 300 }}>
+  <WrappedEoDirectory
+    position="static"
+    directoryTitle="单层目录"
+    defaultSelectedKeys={["item1"]}
+    menuItems={[
+      { title: "菜单项1", type: "item", key: "item1" },
+      { title: "菜单项2", type: "item", key: "item2" },
+      { title: "菜单项3", type: "item", key: "item3" },
+    ]}
+    onMenuItemClick={(e) => console.log(e.detail)}
+  />
+</div>
+```

package/docs/eo-frame-breadcrumb.md

@@ -1,9 +1,29 @@
-面包屑
+---
+tagName: eo-frame-breadcrumb
+displayName: WrappedEoFrameBreadcrumb
+description: 面包屑
+category: ""
+source: "@next-bricks/nav"
+---
+
+# eo-frame-breadcrumb
+
+> 面包屑
+
+## Props
+
+| 属性         | 类型                                | 必填 | 默认值 | 说明                 |
+| ------------ | ----------------------------------- | ---- | ------ | -------------------- |
+| breadcrumb   | `BreadcrumbItemConf[] \| undefined` | 否   | —      | 面包屑配置           |
+| noCurrentApp | `boolean \| undefined`              | 否   | —      | 是否隐藏当前应用名称 |
+| menu         | `Menu \| undefined`                 | 否   | —      | 菜单配置             |
 
 ## Examples
 
 ### Basic
 
+展示基础面包屑导航，指定多级路径文本。
+
 ```yaml preview
 brick: eo-frame-breadcrumb
 properties:
@@ -12,3 +32,35 @@ properties:
     - text: 告警规则
     - text: 编辑
 ```
+
+### Hide Current App
+
+隐藏当前应用名称，仅显示自定义面包屑路径。
+
+```yaml preview
+brick: eo-frame-breadcrumb
+properties:
+  noCurrentApp: true
+  breadcrumb:
+    - text: 主页
+    - text: 设置
+    - text: 用户管理
+```
+
+### With Menu Config
+
+配置菜单信息，在启用 useCurrentMenuTitle 时显示菜单标题作为面包屑项。
+
+```yaml preview
+brick: eo-frame-breadcrumb
+properties:
+  breadcrumb:
+    - text: 资源中心
+    - text: 服务器列表
+  menu:
+    title: 服务器管理
+    icon:
+      lib: antd
+      icon: server
+      theme: outlined
+```

package/docs/eo-frame-breadcrumb.react.md

@@ -0,0 +1,62 @@
+---
+tagName: eo-frame-breadcrumb
+displayName: WrappedEoFrameBreadcrumb
+description: 面包屑
+category: ""
+source: "@next-bricks/nav"
+---
+
+# WrappedEoFrameBreadcrumb
+
+> 面包屑
+
+## 导入
+
+```tsx
+import { WrappedEoFrameBreadcrumb } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性         | 类型                                | 必填 | 默认值 | 说明                 |
+| ------------ | ----------------------------------- | ---- | ------ | -------------------- |
+| breadcrumb   | `BreadcrumbItemConf[] \| undefined` | 否   | —      | 面包屑配置           |
+| noCurrentApp | `boolean \| undefined`              | 否   | —      | 是否隐藏当前应用名称 |
+| menu         | `Menu \| undefined`                 | 否   | —      | 菜单配置             |
+
+## Examples
+
+### Basic
+
+展示基础面包屑导航，指定多级路径文本。
+
+```tsx
+<WrappedEoFrameBreadcrumb
+  breadcrumb={[{ text: "事件中心" }, { text: "告警规则" }, { text: "编辑" }]}
+/>
+```
+
+### Hide Current App
+
+隐藏当前应用名称，仅显示自定义面包屑路径。
+
+```tsx
+<WrappedEoFrameBreadcrumb
+  noCurrentApp={true}
+  breadcrumb={[{ text: "主页" }, { text: "设置" }, { text: "用户管理" }]}
+/>
+```
+
+### With Menu Config
+
+配置菜单信息，在启用 useCurrentMenuTitle 时显示菜单标题作为面包屑项。
+
+```tsx
+<WrappedEoFrameBreadcrumb
+  breadcrumb={[{ text: "资源中心" }, { text: "服务器列表" }]}
+  menu={{
+    title: "服务器管理",
+    icon: { lib: "antd", icon: "server", theme: "outlined" },
+  }}
+/>
+```

package/docs/eo-launchpad-quick-access.md

@@ -0,0 +1,41 @@
+---
+tagName: eo-launchpad-quick-access
+displayName: WrappedEoLaunchpadQuickAccess
+description: 快捷访问
+category: ""
+source: "@next-bricks/nav"
+---
+
+# eo-launchpad-quick-access
+
+> 快捷访问
+
+## Props
+
+| 属性     | 类型      | 必填 | 默认值 | 说明                               |
+| -------- | --------- | ---- | ------ | ---------------------------------- |
+| readonly | `boolean` | 否   | -      | 是否为只读模式（隐藏收藏切换按钮） |
+| target   | `Target`  | 否   | -      | 菜单项链接打开的目标               |
+
+## Examples
+
+### Basic
+
+展示快捷访问列表的基本用法，以只读模式渲染收藏菜单项。
+
+```yaml preview
+brick: eo-launchpad-quick-access
+properties:
+  readonly: true
+  target: _blank
+```
+
+### 可收藏模式
+
+允许用户切换收藏状态的完整交互模式。
+
+```yaml preview
+brick: eo-launchpad-quick-access
+properties:
+  readonly: false
+```

package/docs/eo-launchpad-quick-access.react.md

@@ -0,0 +1,42 @@
+---
+tagName: eo-launchpad-quick-access
+displayName: WrappedEoLaunchpadQuickAccess
+description: 快捷访问
+category: ""
+source: "@next-bricks/nav"
+---
+
+# WrappedEoLaunchpadQuickAccess
+
+> 快捷访问
+
+## 导入
+
+```tsx
+import { WrappedEoLaunchpadQuickAccess } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性     | 类型      | 必填 | 默认值 | 说明                               |
+| -------- | --------- | ---- | ------ | ---------------------------------- |
+| readonly | `boolean` | 否   | -      | 是否为只读模式（隐藏收藏切换按钮） |
+| target   | `Target`  | 否   | -      | 菜单项链接打开的目标               |
+
+## Examples
+
+### Basic
+
+展示快捷访问列表的基本用法，以只读模式渲染收藏菜单项。
+
+```tsx
+<WrappedEoLaunchpadQuickAccess readonly={true} target="_blank" />
+```
+
+### 可收藏模式
+
+允许用户切换收藏状态的完整交互模式。
+
+```tsx
+<WrappedEoLaunchpadQuickAccess readonly={false} />
+```

package/docs/eo-launchpad-recent-visits.md

@@ -0,0 +1,37 @@
+---
+tagName: eo-launchpad-recent-visits
+displayName: WrappedEoLaunchpadRecentVisits
+description: launchpad 最近访问
+category: ""
+source: "@next-bricks/nav"
+---
+
+# eo-launchpad-recent-visits
+
+> launchpad 最近访问
+
+## Props
+
+| 属性   | 类型     | 必填 | 默认值 | 说明                                                                             |
+| ------ | -------- | ---- | ------ | -------------------------------------------------------------------------------- |
+| target | `Target` | 否   | -      | 菜单项链接打开的目标（仅对应用类型的访问项生效，自定义链接类型始终在新标签打开） |
+
+## Examples
+
+### Basic
+
+展示最近访问列表的基本用法。
+
+```yaml preview
+brick: eo-launchpad-recent-visits
+```
+
+### 在新标签打开应用链接
+
+设置应用类型的最近访问链接在新标签页打开。
+
+```yaml preview
+brick: eo-launchpad-recent-visits
+properties:
+  target: _blank
+```

package/docs/eo-launchpad-recent-visits.react.md

@@ -0,0 +1,41 @@
+---
+tagName: eo-launchpad-recent-visits
+displayName: WrappedEoLaunchpadRecentVisits
+description: launchpad 最近访问
+category: ""
+source: "@next-bricks/nav"
+---
+
+# WrappedEoLaunchpadRecentVisits
+
+> launchpad 最近访问
+
+## 导入
+
+```tsx
+import { WrappedEoLaunchpadRecentVisits } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性   | 类型     | 必填 | 默认值 | 说明                                                                             |
+| ------ | -------- | ---- | ------ | -------------------------------------------------------------------------------- |
+| target | `Target` | 否   | -      | 菜单项链接打开的目标（仅对应用类型的访问项生效，自定义链接类型始终在新标签打开） |
+
+## Examples
+
+### Basic
+
+展示最近访问列表的基本用法。
+
+```tsx
+<WrappedEoLaunchpadRecentVisits />
+```
+
+### 在新标签打开应用链接
+
+设置应用类型的最近访问链接在新标签页打开。
+
+```tsx
+<WrappedEoLaunchpadRecentVisits target="_blank" />
+```