@next-bricks/nav 1.26.1 → 1.26.3

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

@@ -0,0 +1,85 @@
+---
+tagName: eo-directory-tree-leaf
+displayName: WrappedEoDirectoryTreeLeaf
+description: 目录树叶子节点
+category: ""
+source: "@next-bricks/nav"
+---
+
+# WrappedEoDirectoryTreeLeaf
+
+> 目录树叶子节点
+
+## 导入
+
+```tsx
+import { WrappedEoDirectoryTreeLeaf } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性     | 类型                            | 必填 | 默认值 | 说明             |
+| -------- | ------------------------------- | ---- | ------ | ---------------- |
+| depth    | `number`                        | 是   | `0`    | 深度             |
+| selected | `boolean \| undefined`          | 否   | —      | 是否选中         |
+| icon     | `GeneralIconProps \| undefined` | 否   | —      | 节点图标         |
+| faded    | `boolean \| undefined`          | 否   | —      | 节点是否淡化显示 |
+
+## Events
+
+| 事件     | detail | 说明             |
+| -------- | ------ | ---------------- |
+| onSelect | `void` | 节点被选中时触发 |
+
+## Slots
+
+| 名称     | 说明         |
+| -------- | ------------ |
+| （默认） | 节点标签内容 |
+| suffix   | 节点后缀内容 |
+
+## Examples
+
+### Basic
+
+展示基础叶子节点，包含标签和后缀内容，点击可触发选择事件。
+
+```tsx
+<WrappedEoDirectoryTreeLeaf
+  style={{ width: 200 }}
+  onSelect={() => console.log("selected")}
+>
+  <span>第一层级</span>
+  <WrappedEoTag slot="suffix" color="red">
+    suffixBrick
+  </WrappedEoTag>
+</WrappedEoDirectoryTreeLeaf>
+```
+
+### With Icon
+
+展示带有节点图标的叶子节点。
+
+```tsx
+<WrappedEoDirectoryTreeLeaf
+  style={{ width: 200 }}
+  icon={{ lib: "antd", icon: "file", theme: "outlined" }}
+  selected={true}
+  onSelect={(e) => console.log(e.detail)}
+>
+  <span>文件节点</span>
+  <WrappedEoTag slot="suffix" color="green">
+    已选中
+  </WrappedEoTag>
+</WrappedEoDirectoryTreeLeaf>
+```
+
+### Faded State
+
+展示淡化显示的叶子节点，用于表示禁用或不可用状态。
+
+```tsx
+<WrappedEoDirectoryTreeLeaf style={{ width: 200 }} faded={true} depth={0}>
+  <span>淡化节点</span>
+</WrappedEoDirectoryTreeLeaf>
+```

package/docs/eo-directory-tree.md

@@ -1,9 +1,50 @@
-目录树
+---
+tagName: eo-directory-tree
+displayName: WrappedEoDirectoryTree
+description: 目录树
+category: ""
+source: "@next-bricks/nav"
+---
+
+# eo-directory-tree
+
+> 目录树
+
+## 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                                                                                      | 说明     |
+| ------ | ------------------------------------------------------------------------------------------- | -------- |
+| expand | `{ keys: string[]; node: NodeData }` — { keys: 展开的 keys 列表, node: 触发展开的节点数据 } | 展开事件 |
+| select | `{ keys: string[]; node: NodeData }` — { keys: 选中的 keys 列表, node: 触发选择的节点数据 } | 选择事件 |
+
+## Methods
+
+| 方法                          | 参数         | 返回值 | 说明           |
+| ----------------------------- | ------------ | ------ | -------------- |
+| expandAll                     | `() => void` | `void` | 展开全部       |
+| collapseAll                   | `() => void` | `void` | 收起全部       |
+| expandAccordingToSelectedKeys | `() => void` | `void` | 根据选择项展开 |
 
 ## Examples
 
 ### Basic
 
+展示可搜索的多层级目录树，支持展开/收起和节点选择。
+
 ```yaml preview
 brick: eo-directory-tree
 events:
@@ -89,3 +130,62 @@ children:
           isDropdown: false
           event: aim
 ```
+
+### Internal Node Selectable
+
+允许中间节点（非叶子节点）被选中。
+
+```yaml preview
+brick: eo-directory-tree
+events:
+  select:
+    - action: console.log
+      args:
+        - <% EVENT.detail %>
+properties:
+  style:
+    width: 400px
+  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"
+```
+
+### Custom Search Fields
+
+指定额外的搜索字段，在 title 之外扩展搜索范围。
+
+```yaml preview
+brick: eo-directory-tree
+properties:
+  style:
+    width: 400px
+  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-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
+```