@next-bricks/nav 1.26.2 → 1.26.4

package/docs/easyops-navbar-alerts.md

@@ -0,0 +1,23 @@
+---
+tagName: nav.easyops-navbar-alerts
+displayName: WrappedNavEasyopsNavbarAlerts
+description: 导航栏告警提示组件，用于显示 License 到期提醒和页面性能问题警告。
+category: ""
+source: "@next-bricks/nav"
+---
+
+# nav.easyops-navbar-alerts
+
+> 导航栏告警提示组件，用于显示 License 到期提醒和页面性能问题警告。
+
+此构件为内部构件（@insider），主要在导航栏中使用，自动检测 License 剩余天数（不足 15 天时显示提示）和页面渲染性能问题，无需传入任何属性。
+
+## Examples
+
+### Basic
+
+在导航栏中嵌入告警提示组件，自动展示 License 到期和性能问题告警。
+
+```yaml preview
+brick: nav.easyops-navbar-alerts
+```

package/docs/easyops-navbar-alerts.react.md

@@ -0,0 +1,29 @@
+---
+tagName: nav.easyops-navbar-alerts
+displayName: WrappedNavEasyopsNavbarAlerts
+description: 导航栏告警提示组件，用于显示 License 到期提醒和页面性能问题警告。
+category: ""
+source: "@next-bricks/nav"
+---
+
+# WrappedNavEasyopsNavbarAlerts
+
+> 导航栏告警提示组件，用于显示 License 到期提醒和页面性能问题警告。
+
+## 导入
+
+```tsx
+import { WrappedNavEasyopsNavbarAlerts } from "@easyops/wrapped-components";
+```
+
+此构件为内部构件（@insider），主要在导航栏中使用，自动检测 License 剩余天数（不足 15 天时显示提示）和页面渲染性能问题，无需传入任何属性。
+
+## Examples
+
+### Basic
+
+在导航栏中嵌入告警提示组件，自动展示 License 到期和性能问题告警。
+
+```tsx
+<WrappedNavEasyopsNavbarAlerts />
+```

package/docs/eo-app-bar-wrapper.md

@@ -1,9 +1,37 @@
-构件 `eo-app-bar-wrapper`
+---
+tagName: eo-app-bar-wrapper
+displayName: WrappedEoAppBarWrapper
+description: 应用顶部容器
+category: ""
+source: "@next-bricks/nav"
+---
+
+# eo-app-bar-wrapper
+
+> 应用顶部容器
+
+## Props
+
+| 属性                    | 类型                               | 必填 | 默认值    | 说明                                                         |
+| ----------------------- | ---------------------------------- | ---- | --------- | ------------------------------------------------------------ |
+| isFixed                 | `boolean \| undefined`             | 否   | `true`    | 是否固定定位。已废弃，使用 `position` 属性代替               |
+| position                | `"static" \| "fixed" \| undefined` | 否   | `"fixed"` | 设置定位方式：静态定位或固定定位。设置时优先级高于 `isFixed` |
+| displayCenter           | `boolean \| undefined`             | 否   | `false`   | 居中显示                                                     |
+| extraAppBarContentStyle | `React.CSSProperties \| undefined` | 否   | —         | 自定义样式                                                   |
+
+## Slots
+
+| 名称  | 说明       |
+| ----- | ---------- |
+| left  | 左侧内容区 |
+| right | 右侧内容区 |
 
 ## Examples
 
 ### Basic
 
+展示基础的顶部容器，左右区域分别放置内容。
+
 ```yaml preview
 - brick: eo-app-bar-wrapper
   properties:
@@ -25,6 +53,8 @@
 
 ### DisplayCenter
 
+将内容区域居中对齐显示。
+
 ```yaml preview
 - brick: eo-app-bar-wrapper
   properties:
@@ -44,3 +74,29 @@
             textContent: Right Content
       type: bricks
 ```
+
+### Custom Style
+
+通过 extraAppBarContentStyle 自定义内容区域样式。
+
+```yaml preview
+- brick: eo-app-bar-wrapper
+  properties:
+    position: static
+    extraAppBarContentStyle:
+      background: "#f5f5f5"
+      padding: 8px 16px
+  slots:
+    left:
+      bricks:
+        - brick: div
+          properties:
+            textContent: Left Content
+      type: bricks
+    right:
+      bricks:
+        - brick: div
+          properties:
+            textContent: Right Content
+      type: bricks
+```

package/docs/eo-app-bar-wrapper.react.md

@@ -0,0 +1,71 @@
+---
+tagName: eo-app-bar-wrapper
+displayName: WrappedEoAppBarWrapper
+description: 应用顶部容器
+category: ""
+source: "@next-bricks/nav"
+---
+
+# WrappedEoAppBarWrapper
+
+> 应用顶部容器
+
+## 导入
+
+```tsx
+import { WrappedEoAppBarWrapper } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                    | 类型                               | 必填 | 默认值    | 说明                                                         |
+| ----------------------- | ---------------------------------- | ---- | --------- | ------------------------------------------------------------ |
+| isFixed                 | `boolean \| undefined`             | 否   | `true`    | 是否固定定位。已废弃，使用 `position` 属性代替               |
+| position                | `"static" \| "fixed" \| undefined` | 否   | `"fixed"` | 设置定位方式：静态定位或固定定位。设置时优先级高于 `isFixed` |
+| displayCenter           | `boolean \| undefined`             | 否   | `false`   | 居中显示                                                     |
+| extraAppBarContentStyle | `React.CSSProperties \| undefined` | 否   | —         | 自定义样式                                                   |
+
+## Slots
+
+| 名称  | 说明       |
+| ----- | ---------- |
+| left  | 左侧内容区 |
+| right | 右侧内容区 |
+
+## Examples
+
+### Basic
+
+展示基础的顶部容器，左右区域分别放置内容。
+
+```tsx
+<WrappedEoAppBarWrapper position="static">
+  <div slot="left">Left Content</div>
+  <div slot="right">Right Content</div>
+</WrappedEoAppBarWrapper>
+```
+
+### DisplayCenter
+
+将内容区域居中对齐显示。
+
+```tsx
+<WrappedEoAppBarWrapper position="static" displayCenter={true}>
+  <div slot="left">Left Content</div>
+  <div slot="right">Right Content</div>
+</WrappedEoAppBarWrapper>
+```
+
+### Custom Style
+
+通过 extraAppBarContentStyle 自定义内容区域样式。
+
+```tsx
+<WrappedEoAppBarWrapper
+  position="static"
+  extraAppBarContentStyle={{ background: "#f5f5f5", padding: "8px 16px" }}
+>
+  <div slot="left">Left Content</div>
+  <div slot="right">Right Content</div>
+</WrappedEoAppBarWrapper>
+```

package/docs/eo-directory-tree-internal-node.md

@@ -1,9 +1,47 @@
-目录树节点
+---
+tagName: eo-directory-tree-internal-node
+displayName: WrappedEoDirectoryTreeInternalNode
+description: 目录树中间节点
+category: ""
+source: "@next-bricks/nav"
+---
+
+# eo-directory-tree-internal-node
+
+> 目录树中间节点
+
+## Props
+
+| 属性       | 类型                            | 必填 | 默认值 | 说明             |
+| ---------- | ------------------------------- | ---- | ------ | ---------------- |
+| depth      | `number`                        | 是   | `0`    | 深度             |
+| expanded   | `boolean \| undefined`          | 否   | —      | 是否展开         |
+| selectable | `boolean \| undefined`          | 否   | —      | 可选择           |
+| selected   | `boolean \| undefined`          | 否   | —      | 是否选中         |
+| icon       | `GeneralIconProps \| undefined` | 否   | —      | 节点图标         |
+| faded      | `boolean \| undefined`          | 否   | —      | 节点是否淡化显示 |
+
+## Events
+
+| 事件   | detail                                                    | 说明                |
+| ------ | --------------------------------------------------------- | ------------------- |
+| expand | `boolean` — 展开后的状态（true 表示展开，false 表示收起） | 节点展开/收起时触发 |
+| select | `void`                                                    | 节点被选中时触发    |
+
+## Slots
+
+| 名称     | 说明         |
+| -------- | ------------ |
+| label    | 节点标签内容 |
+| suffix   | 节点后缀内容 |
+| （默认） | 子节点内容   |
 
 ## Examples
 
 ### Basic
 
+展示包含标签和后缀内容的可展开目录树节点。
+
 ```yaml preview
 brick: eo-directory-tree-internal-node
 events:
@@ -49,6 +87,8 @@ children:
 
 ### Selectable
 
+展示节点可选中的目录树节点，支持独立点击展开和选中。
+
 ```yaml preview
 brick: eo-directory-tree-internal-node
 events:
@@ -96,3 +136,34 @@ children:
         properties:
           textContent: 第二层级-3
 ```
+
+### With Icon
+
+展示带有节点图标的目录树中间节点，以及 faded 淡化状态效果。
+
+```yaml preview
+brick: eo-directory-tree-internal-node
+properties:
+  style:
+    width: 200px
+  icon:
+    lib: antd
+    icon: folder
+    theme: outlined
+  expanded: true
+  selected: true
+  faded: false
+children:
+  - brick: span
+    slot: label
+    properties:
+      textContent: 文件夹节点
+  - brick: eo-directory-tree-leaf
+    properties:
+      depth: 1
+      faded: true
+    children:
+      - brick: span
+        properties:
+          textContent: 子文件1（淡化）
+```

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

@@ -0,0 +1,116 @@
+---
+tagName: eo-directory-tree-internal-node
+displayName: WrappedEoDirectoryTreeInternalNode
+description: 目录树中间节点
+category: ""
+source: "@next-bricks/nav"
+---
+
+# WrappedEoDirectoryTreeInternalNode
+
+> 目录树中间节点
+
+## 导入
+
+```tsx
+import { WrappedEoDirectoryTreeInternalNode } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型                            | 必填 | 默认值 | 说明             |
+| ---------- | ------------------------------- | ---- | ------ | ---------------- |
+| depth      | `number`                        | 是   | `0`    | 深度             |
+| expanded   | `boolean \| undefined`          | 否   | —      | 是否展开         |
+| selectable | `boolean \| undefined`          | 否   | —      | 可选择           |
+| selected   | `boolean \| undefined`          | 否   | —      | 是否选中         |
+| icon       | `GeneralIconProps \| undefined` | 否   | —      | 节点图标         |
+| faded      | `boolean \| undefined`          | 否   | —      | 节点是否淡化显示 |
+
+## Events
+
+| 事件     | detail                                                    | 说明                |
+| -------- | --------------------------------------------------------- | ------------------- |
+| onExpand | `boolean` — 展开后的状态（true 表示展开，false 表示收起） | 节点展开/收起时触发 |
+| onSelect | `void`                                                    | 节点被选中时触发    |
+
+## Slots
+
+| 名称     | 说明         |
+| -------- | ------------ |
+| label    | 节点标签内容 |
+| suffix   | 节点后缀内容 |
+| （默认） | 子节点内容   |
+
+## Examples
+
+### Basic
+
+展示包含标签和后缀内容的可展开目录树节点。
+
+```tsx
+<WrappedEoDirectoryTreeInternalNode
+  style={{ width: 200 }}
+  onExpand={(e) => console.log(e.detail)}
+>
+  <span slot="label">第一层级</span>
+  <WrappedEoTag slot="suffix" color="red">
+    suffixBrick
+  </WrappedEoTag>
+  <WrappedEoDirectoryTreeLeaf depth={1}>
+    <span>第二层级-1</span>
+  </WrappedEoDirectoryTreeLeaf>
+  <WrappedEoDirectoryTreeLeaf depth={1}>
+    <span>第二层级-2</span>
+  </WrappedEoDirectoryTreeLeaf>
+  <WrappedEoDirectoryTreeLeaf depth={1}>
+    <span>第二层级-3</span>
+  </WrappedEoDirectoryTreeLeaf>
+</WrappedEoDirectoryTreeInternalNode>
+```
+
+### Selectable
+
+展示节点可选中的目录树节点，支持独立点击展开和选中。
+
+```tsx
+<WrappedEoDirectoryTreeInternalNode
+  style={{ width: 200 }}
+  selectable={true}
+  onExpand={(e) => console.log(e.detail)}
+  onSelect={(e) => console.log(e.detail)}
+>
+  <span slot="label">第一层级</span>
+  <WrappedEoTag slot="suffix" color="red">
+    suffixBrick
+  </WrappedEoTag>
+  <WrappedEoDirectoryTreeLeaf depth={1}>
+    <span>第二层级-1</span>
+  </WrappedEoDirectoryTreeLeaf>
+  <WrappedEoDirectoryTreeLeaf depth={1}>
+    <span>第二层级-2</span>
+  </WrappedEoDirectoryTreeLeaf>
+  <WrappedEoDirectoryTreeLeaf depth={1}>
+    <span>第二层级-3</span>
+  </WrappedEoDirectoryTreeLeaf>
+</WrappedEoDirectoryTreeInternalNode>
+```
+
+### With Icon
+
+展示带有节点图标的目录树中间节点，以及 faded 淡化状态效果。
+
+```tsx
+<WrappedEoDirectoryTreeInternalNode
+  style={{ width: 200 }}
+  icon={{ lib: "antd", icon: "folder", theme: "outlined" }}
+  expanded={true}
+  selected={true}
+  faded={false}
+>
+  <span slot="label">文件夹节点</span>
+  <WrappedEoDirectoryTreeLeaf depth={1} faded={true}>
+    <span>子文件1（淡化）</span>
+  </WrappedEoDirectoryTreeLeaf>
+</WrappedEoDirectoryTreeInternalNode>
+```

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

@@ -1,9 +1,43 @@
-目录树叶子节点
+---
+tagName: eo-directory-tree-leaf
+displayName: WrappedEoDirectoryTreeLeaf
+description: 目录树叶子节点
+category: ""
+source: "@next-bricks/nav"
+---
+
+# eo-directory-tree-leaf
+
+> 目录树叶子节点
+
+## Props
+
+| 属性     | 类型                            | 必填 | 默认值 | 说明             |
+| -------- | ------------------------------- | ---- | ------ | ---------------- |
+| depth    | `number`                        | 是   | `0`    | 深度             |
+| selected | `boolean \| undefined`          | 否   | —      | 是否选中         |
+| icon     | `GeneralIconProps \| undefined` | 否   | —      | 节点图标         |
+| faded    | `boolean \| undefined`          | 否   | —      | 节点是否淡化显示 |
+
+## Events
+
+| 事件   | detail | 说明             |
+| ------ | ------ | ---------------- |
+| select | `void` | 节点被选中时触发 |
+
+## Slots
+
+| 名称     | 说明         |
+| -------- | ------------ |
+| （默认） | 节点标签内容 |
+| suffix   | 节点后缀内容 |
 
 ## Examples
 
 ### Basic
 
+展示基础叶子节点，包含标签和后缀内容，点击可触发选择事件。
+
 ```yaml preview
 brick: eo-directory-tree-leaf
 events:
@@ -22,3 +56,50 @@ children:
       textContent: suffixBrick
       color: red
 ```
+
+### With Icon
+
+展示带有节点图标的叶子节点。
+
+```yaml preview
+brick: eo-directory-tree-leaf
+events:
+  select:
+    - action: console.log
+      args:
+        - <% EVENT.detail %>
+properties:
+  style:
+    width: 200px
+  icon:
+    lib: antd
+    icon: file
+    theme: outlined
+  selected: true
+children:
+  - brick: span
+    properties:
+      textContent: 文件节点
+  - brick: eo-tag
+    slot: suffix
+    properties:
+      textContent: 已选中
+      color: green
+```
+
+### Faded State
+
+展示淡化显示的叶子节点，用于表示禁用或不可用状态。
+
+```yaml preview
+brick: eo-directory-tree-leaf
+properties:
+  style:
+    width: 200px
+  faded: true
+  depth: 0
+children:
+  - brick: span
+    properties:
+      textContent: 淡化节点
+```

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: 辅助工具服务
+```