@next-bricks/ai-portal 0.70.0 → 0.70.2

package/docs/icon-button.react.md

@@ -0,0 +1,120 @@
+---
+tagName: ai-portal.icon-button
+displayName: WrappedAiPortalIconButton
+description: 图标按钮，支持多种视觉变体、禁用状态、Tooltip 提示及文字插槽。
+category: interact-basic
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalIconButton
+
+> 图标按钮，支持多种视觉变体、禁用状态、Tooltip 提示及文字插槽。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalIconButton } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性           | 类型                                                           | 必填 | 默认值 | 说明                                                                                   |
+| -------------- | -------------------------------------------------------------- | ---- | ------ | -------------------------------------------------------------------------------------- |
+| icon           | `GeneralIconProps`                                             | 否   | -      | 按钮图标配置                                                                           |
+| tooltip        | `string`                                                       | 否   | -      | 悬停时显示的 Tooltip 文本                                                              |
+| tooltipHoist   | `boolean`                                                      | 否   | -      | 是否将 Tooltip 挂载到顶层，避免被父容器裁剪                                            |
+| active         | `boolean`                                                      | 否   | -      | 是否为激活状态，通过 CSS 属性选择器控制样式，不触发重新渲染                            |
+| disabled       | `boolean`                                                      | 否   | -      | 是否禁用按钮                                                                           |
+| variant        | `"default" \| "light" \| "mini" \| "mini-light" \| "bordered"` | 否   | -      | 按钮视觉变体，通过 CSS 属性选择器控制样式，不触发重新渲染                              |
+| reduceIconSize | `boolean`                                                      | 否   | -      | 是否缩小图标尺寸（部分 easyops 图标过大），通过 CSS 属性选择器控制样式，不触发重新渲染 |
+
+## Slots
+
+| 名称    | 说明                       |
+| ------- | -------------------------- |
+| default | 图标旁边的文字内容（可选） |
+
+## Examples
+
+### Basic
+
+基础图标按钮，配置图标和 Tooltip 提示。
+
+```tsx
+<WrappedAiPortalIconButton
+  icon={{ lib: "antd", icon: "download" }}
+  tooltip="下载"
+/>
+```
+
+### Variants
+
+展示不同视觉变体的图标按钮。
+
+```tsx
+<div style={{ display: "flex", gap: 8, alignItems: "center", padding: 8 }}>
+  <WrappedAiPortalIconButton
+    variant="default"
+    icon={{ lib: "antd", icon: "setting" }}
+    tooltip="默认样式"
+  />
+  <WrappedAiPortalIconButton
+    variant="light"
+    icon={{ lib: "antd", icon: "heart" }}
+    tooltip="轻量样式"
+  />
+  <WrappedAiPortalIconButton
+    variant="mini"
+    icon={{ lib: "antd", icon: "star" }}
+    tooltip="迷你样式"
+  />
+  <WrappedAiPortalIconButton
+    variant="mini-light"
+    icon={{ lib: "antd", icon: "bell" }}
+    tooltip="迷你轻量"
+  />
+  <WrappedAiPortalIconButton
+    variant="bordered"
+    icon={{ lib: "antd", icon: "plus" }}
+    tooltip="边框样式"
+  />
+</div>
+```
+
+### Disabled State
+
+展示禁用状态的图标按钮。
+
+```tsx
+<WrappedAiPortalIconButton
+  icon={{ lib: "antd", icon: "delete" }}
+  tooltip="无法删除"
+  disabled
+/>
+```
+
+### With Text Slot
+
+图标按钮配合文字内容插槽。
+
+```tsx
+<WrappedAiPortalIconButton
+  icon={{ lib: "easyops", icon: "new-chat" }}
+  active
+  reduceIconSize
+>
+  <span>新建对话</span>
+</WrappedAiPortalIconButton>
+```
+
+### With Tooltip Hoist
+
+配置 tooltipHoist 防止 Tooltip 被父容器裁剪。
+
+```tsx
+<WrappedAiPortalIconButton
+  icon={{ lib: "antd", icon: "info-circle" }}
+  tooltip="这是一条提示信息"
+  tooltipHoist
+/>
+```

package/docs/mcp-tools.md

@@ -1,11 +1,114 @@
-构件 `ai-portal.mcp-tools`
+---
+tagName: ai-portal.mcp-tools
+displayName: WrappedAiPortalMcpTools
+description: MCP 工具列表组件，按服务分组展示工具信息，支持按平台分类过滤和吸顶标签栏。
+category: display-component
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.mcp-tools
+
+> MCP 工具列表组件，按服务分组展示工具信息，支持按平台分类过滤和吸顶标签栏。
+
+## Props
+
+| 属性      | 类型        | 必填 | 默认值 | 说明                                                                       |
+| --------- | ----------- | ---- | ------ | -------------------------------------------------------------------------- |
+| list      | `McpTool[]` | 否   | -      | MCP 工具列表数据，按 server.id 自动分组并归属平台分类                      |
+| stickyTop | `number`    | 否   | -      | 平台过滤标签栏的吸顶偏移量（px），设置后标签栏使用吸顶容器，未设置则不吸顶 |
 
 ## Examples
 
 ### Basic
 
+展示基础 MCP 工具列表，按服务分组展示。
+
+```yaml preview
+brick: ai-portal.mcp-tools
+properties:
+  list:
+    - name: list_hosts
+      title: 查询主机列表
+      description: 查询 CMDB 中的主机资源列表，支持按条件过滤。
+      server:
+        id: cmdb
+        name: CMDB
+    - name: get_host_detail
+      title: 获取主机详情
+      description: 根据主机实例 ID 获取主机的详细信息，包括配置、状态等。
+      server:
+        id: cmdb
+        name: CMDB
+    - name: list_alerts
+      title: 查询告警列表
+      description: 获取当前活跃告警列表，支持按严重性筛选。
+      server:
+        id: alert
+        name: 监控事件
+```
+
+### With Custom Icons
+
+为工具配置自定义图标，增强视觉区分。
+
+```yaml preview
+brick: ai-portal.mcp-tools
+properties:
+  list:
+    - name: deploy_app
+      title: 部署应用
+      description: 向 Kubernetes 集群部署应用，支持指定命名空间和镜像版本。
+      icon:
+        lib: antd
+        icon: cloud-upload
+      server:
+        id: kubernetes
+        name: Kubernetes
+    - name: scale_deployment
+      title: 弹性伸缩
+      description: 调整 Kubernetes Deployment 的副本数量。
+      icon:
+        lib: antd
+        icon: apartment
+      server:
+        id: kubernetes
+        name: Kubernetes
+    - name: execute_llm
+      title: 调用大模型
+      description: 向大模型发送请求并获取响应。
+      icon:
+        lib: antd
+        icon: robot
+      server:
+        id: llm
+        name: 大模型
+```
+
+### With Sticky Tabs
+
+启用吸顶平台过滤标签栏，适合内容较多的场景。
+
 ```yaml preview
 brick: ai-portal.mcp-tools
 properties:
-  textContent: Hello world
+  stickyTop: 0
+  list:
+    - name: list_hosts
+      title: 查询主机列表
+      description: 查询 CMDB 中的主机资源列表，支持按条件过滤。
+      server:
+        id: cmdb
+        name: CMDB
+    - name: create_page
+      title: 创建页面
+      description: 在低代码平台中创建一个新的页面。
+      server:
+        id: web-builder
+        name: 低代码
+    - name: list_dashboards
+      title: 查询仪表盘
+      description: 获取 Grafana 中所有仪表盘列表。
+      server:
+        id: grafana
+        name: Grafana
 ```

package/docs/mcp-tools.react.md

@@ -0,0 +1,117 @@
+---
+tagName: ai-portal.mcp-tools
+displayName: WrappedAiPortalMcpTools
+description: MCP 工具列表组件，按服务分组展示工具信息，支持按平台分类过滤和吸顶标签栏。
+category: display-component
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalMcpTools
+
+> MCP 工具列表组件，按服务分组展示工具信息，支持按平台分类过滤和吸顶标签栏。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalMcpTools } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性      | 类型        | 必填 | 默认值 | 说明                                                                       |
+| --------- | ----------- | ---- | ------ | -------------------------------------------------------------------------- |
+| list      | `McpTool[]` | 否   | -      | MCP 工具列表数据，按 server.id 自动分组并归属平台分类                      |
+| stickyTop | `number`    | 否   | -      | 平台过滤标签栏的吸顶偏移量（px），设置后标签栏使用吸顶容器，未设置则不吸顶 |
+
+## Examples
+
+### Basic
+
+展示基础 MCP 工具列表，按服务分组展示。
+
+```tsx
+<WrappedAiPortalMcpTools
+  list={[
+    {
+      name: "list_hosts",
+      title: "查询主机列表",
+      description: "查询 CMDB 中的主机资源列表，支持按条件过滤。",
+      server: { id: "cmdb", name: "CMDB" },
+    },
+    {
+      name: "get_host_detail",
+      title: "获取主机详情",
+      description: "根据主机实例 ID 获取主机的详细信息，包括配置、状态等。",
+      server: { id: "cmdb", name: "CMDB" },
+    },
+    {
+      name: "list_alerts",
+      title: "查询告警列表",
+      description: "获取当前活跃告警列表，支持按严重性筛选。",
+      server: { id: "alert", name: "监控事件" },
+    },
+  ]}
+/>
+```
+
+### With Custom Icons
+
+为工具配置自定义图标，增强视觉区分。
+
+```tsx
+<WrappedAiPortalMcpTools
+  list={[
+    {
+      name: "deploy_app",
+      title: "部署应用",
+      description: "向 Kubernetes 集群部署应用，支持指定命名空间和镜像版本。",
+      icon: { lib: "antd", icon: "cloud-upload" },
+      server: { id: "kubernetes", name: "Kubernetes" },
+    },
+    {
+      name: "scale_deployment",
+      title: "弹性伸缩",
+      description: "调整 Kubernetes Deployment 的副本数量。",
+      icon: { lib: "antd", icon: "apartment" },
+      server: { id: "kubernetes", name: "Kubernetes" },
+    },
+    {
+      name: "execute_llm",
+      title: "调用大模型",
+      description: "向大模型发送请求并获取响应。",
+      icon: { lib: "antd", icon: "robot" },
+      server: { id: "llm", name: "大模型" },
+    },
+  ]}
+/>
+```
+
+### With Sticky Tabs
+
+启用吸顶平台过滤标签栏，适合内容较多的场景。
+
+```tsx
+<WrappedAiPortalMcpTools
+  stickyTop={0}
+  list={[
+    {
+      name: "list_hosts",
+      title: "查询主机列表",
+      description: "查询 CMDB 中的主机资源列表，支持按条件过滤。",
+      server: { id: "cmdb", name: "CMDB" },
+    },
+    {
+      name: "create_page",
+      title: "创建页面",
+      description: "在低代码平台中创建一个新的页面。",
+      server: { id: "web-builder", name: "低代码" },
+    },
+    {
+      name: "list_dashboards",
+      title: "查询仪表盘",
+      description: "获取 Grafana 中所有仪表盘列表。",
+      server: { id: "grafana", name: "Grafana" },
+    },
+  ]}
+/>
+```

package/docs/notice-dropdown.md

@@ -1,11 +1,48 @@
-构件 `ai-portal.notice-dropdown`
+---
+tagName: ai-portal.notice-dropdown
+displayName: WrappedAiPortalNoticeDropdown
+description: 消息通知下拉框构件，用于展示消息列表
+category: ""
+source: "@next-bricks/ai-portal"
+---
 
-消息通知下拉框构件，用于展示消息列表。支持自定义触发器、消息列表展示、空状态、以及交互事件。
+# ai-portal.notice-dropdown
+
+> 消息通知下拉框构件，用于展示消息列表
+
+## Props
+
+| 属性                   | 类型                  | 必填 | 默认值 | 说明                     |
+| ---------------------- | --------------------- | ---- | ------ | ------------------------ |
+| dataSource             | `NoticeItem[]`        | 否   | -      | 消息数据列表             |
+| popoverPlacement       | `Placement`           | 否   | -      | 弹窗位置                 |
+| emptyText              | `string`              | 否   | -      | 空状态文案               |
+| notifyCenterUrl        | `string`              | 否   | -      | 通知中心URL              |
+| urlTemplate            | `string`              | 否   | -      | 详情链接                 |
+| urlTarget              | `Target`              | 否   | -      | 详情链接目标             |
+| dropdownMaxWidth       | `string \| number`    | 否   | -      | 下拉框最大宽度           |
+| dropdownContentStyle   | `React.CSSProperties` | 否   | -      | 下拉框内容样式           |
+| hideNotifyCenterButton | `boolean`             | 否   | -      | 是否隐藏进入消息中心按钮 |
+
+## Events
+
+| 事件          | detail                                                                                                                       | 说明             |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------- |
+| notice.click  | `NoticeItem` — { id: 消息ID, type: 消息类型, isRead: 是否已读, title: 标题, description: 描述, time: 时间戳, url: 详情链接 } | 消息项点击事件   |
+| mark.all.read | `void`                                                                                                                       | 全部已读点击事件 |
+
+## Slots
+
+| 名称    | 说明                                     |
+| ------- | ---------------------------------------- |
+| trigger | 自定义触发器，默认为带角标的铃铛图标按钮 |
 
 ## Examples
 
 ### 基础使用（带消息列表）
 
+展示包含多条不同类型消息的下拉通知列表。
+
 ```yaml preview
 brick: ai-portal.notice-dropdown
 properties:
@@ -26,31 +63,30 @@ properties:
       type: "system"
       isRead: true
       title: "Samuel在项目【项目A】@了你"
-    - id: "msg-2"
+    - id: "msg-5"
       type: "account"
       isRead: false
       title: "协作流【协作流名称】 - 【活动名称】需要人工确认"
-    - id: "msg-3"
+    - id: "msg-6"
       type: "system"
       isRead: true
       title: "【项目协作功能】已发布"
-    - id: "msg-4"
+    - id: "msg-7"
       type: "project"
       isRead: true
       title: "Samuel在项目【项目A】@了你"
-    - id: "msg-2"
+    - id: "msg-8"
       type: "space"
       isRead: false
       title: "协作流【协作流名称】 - 【活动名称】需要人工确认"
-    - id: "msg-3"
+    - id: "msg-9"
       type: "space"
       isRead: true
       title: "【项目协作功能】已发布"
-    - id: "msg-4"
+    - id: "msg-10"
       type: "system"
       isRead: true
       title: "Samuel在项目【项目A】@了你"
-
 events:
   notice.click:
     action: console.log
@@ -65,13 +101,18 @@ events:
 
 ### 空状态
 
+当没有消息时展示空状态提示文案。
+
 ```yaml preview
 brick: ai-portal.notice-dropdown
 properties:
   dataSource: []
+  emptyText: "暂无新消息"
 ```
 
-### 自定义触发器（使用 eo-button）
+### 自定义触发器
+
+使用 trigger 插槽放置自定义触发器元素（如按钮）。
 
 ```yaml preview
 brick: ai-portal.notice-dropdown
@@ -89,6 +130,8 @@ properties:
       type: "account"
       isRead: true
       title: "【项目协作功能】已发布"
+  hideNotifyCenterButton: true
+  dropdownMaxWidth: 400
 children:
   - brick: eo-button
     slot: trigger

package/docs/notice-dropdown.react.md

@@ -0,0 +1,167 @@
+---
+tagName: ai-portal.notice-dropdown
+displayName: WrappedAiPortalNoticeDropdown
+description: 消息通知下拉框构件，用于展示消息列表
+category: ""
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalNoticeDropdown
+
+> 消息通知下拉框构件，用于展示消息列表
+
+## 导入
+
+```tsx
+import { WrappedAiPortalNoticeDropdown } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                   | 类型                  | 必填 | 默认值 | 说明                     |
+| ---------------------- | --------------------- | ---- | ------ | ------------------------ |
+| dataSource             | `NoticeItem[]`        | 否   | -      | 消息数据列表             |
+| popoverPlacement       | `Placement`           | 否   | -      | 弹窗位置                 |
+| emptyText              | `string`              | 否   | -      | 空状态文案               |
+| notifyCenterUrl        | `string`              | 否   | -      | 通知中心URL              |
+| urlTemplate            | `string`              | 否   | -      | 详情链接                 |
+| urlTarget              | `Target`              | 否   | -      | 详情链接目标             |
+| dropdownMaxWidth       | `string \| number`    | 否   | -      | 下拉框最大宽度           |
+| dropdownContentStyle   | `React.CSSProperties` | 否   | -      | 下拉框内容样式           |
+| hideNotifyCenterButton | `boolean`             | 否   | -      | 是否隐藏进入消息中心按钮 |
+
+## Events
+
+| 事件          | detail                                                                                                                       | 说明             |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------- |
+| onNoticeClick | `NoticeItem` — { id: 消息ID, type: 消息类型, isRead: 是否已读, title: 标题, description: 描述, time: 时间戳, url: 详情链接 } | 消息项点击事件   |
+| onMarkAllRead | `void`                                                                                                                       | 全部已读点击事件 |
+
+## Slots
+
+| 名称    | 说明                                     |
+| ------- | ---------------------------------------- |
+| trigger | 自定义触发器，默认为带角标的铃铛图标按钮 |
+
+## Examples
+
+### 基础使用（带消息列表）
+
+展示包含多条不同类型消息的下拉通知列表。
+
+```tsx
+<WrappedAiPortalNoticeDropdown
+  dataSource={[
+    {
+      id: "msg-1",
+      isRead: false,
+      type: "project",
+      title:
+        "协作流【研发设计】已完成【项目协作功能】已发布【项目协作功能】已发布【项目协作功能】已发布【项目协作功能】已发布",
+    },
+    {
+      id: "msg-2",
+      isRead: false,
+      type: "space",
+      title: "协作流【协作流名称】 - 【活动名称】需要人工确认",
+    },
+    {
+      id: "msg-3",
+      type: "account",
+      isRead: true,
+      title: "【项目协作功能】已发布",
+    },
+    {
+      id: "msg-4",
+      type: "system",
+      isRead: true,
+      title: "Samuel在项目【项目A】@了你",
+    },
+    {
+      id: "msg-5",
+      type: "account",
+      isRead: false,
+      title: "协作流【协作流名称】 - 【活动名称】需要人工确认",
+    },
+    {
+      id: "msg-6",
+      type: "system",
+      isRead: true,
+      title: "【项目协作功能】已发布",
+    },
+    {
+      id: "msg-7",
+      type: "project",
+      isRead: true,
+      title: "Samuel在项目【项目A】@了你",
+    },
+    {
+      id: "msg-8",
+      type: "space",
+      isRead: false,
+      title: "协作流【协作流名称】 - 【活动名称】需要人工确认",
+    },
+    {
+      id: "msg-9",
+      type: "space",
+      isRead: true,
+      title: "【项目协作功能】已发布",
+    },
+    {
+      id: "msg-10",
+      type: "system",
+      isRead: true,
+      title: "Samuel在项目【项目A】@了你",
+    },
+  ]}
+  onNoticeClick={(e) => console.log("点击了消息：", e.detail)}
+  onMarkAllRead={(e) => console.log("点击了全部已读")}
+/>
+```
+
+### 空状态
+
+当没有消息时展示空状态提示文案。
+
+```tsx
+<WrappedAiPortalNoticeDropdown dataSource={[]} emptyText="暂无新消息" />
+```
+
+### 自定义触发器
+
+使用 trigger 插槽放置自定义触发器元素（如按钮）。
+
+```tsx
+<WrappedAiPortalNoticeDropdown
+  dataSource={[
+    {
+      id: "msg-1",
+      isRead: false,
+      type: "project",
+      title: "协作流【研发设计】已完成",
+    },
+    {
+      id: "msg-2",
+      isRead: false,
+      type: "space",
+      title: "协作流【协作流名称】需要人工确认",
+    },
+    {
+      id: "msg-3",
+      type: "account",
+      isRead: true,
+      title: "【项目协作功能】已发布",
+    },
+  ]}
+  hideNotifyCenterButton={true}
+  dropdownMaxWidth={400}
+>
+  <WrappedEoButton
+    slot="trigger"
+    type="primary"
+    icon={{ lib: "antd", icon: "bell" }}
+  >
+    查看通知
+  </WrappedEoButton>
+</WrappedAiPortalNoticeDropdown>
+```