@next-bricks/ai-portal 0.70.0 → 0.70.2

package/docs/stage-flow.react.md

@@ -0,0 +1,112 @@
+---
+tagName: ai-portal.stage-flow
+displayName: WrappedAiPortalStageFlow
+description: 阶段流程编辑器构件，支持以泳道方式展示和编辑服务流的阶段与活动。
+category: ""
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalStageFlow
+
+> 阶段流程编辑器构件，支持以泳道方式展示和编辑服务流的阶段与活动。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalStageFlow } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型           | 必填 | 默认值 | 说明                                             |
+| ----------- | -------------- | ---- | ------ | ------------------------------------------------ |
+| spec        | `Stage[]`      | 否   | -      | 阶段流程配置数据，每个阶段包含名称和活动列表     |
+| aiEmployees | `AIEmployee[]` | 否   | -      | AI 员工列表，用于在活动中显示分配的员工名称      |
+| readOnly    | `boolean`      | 否   | -      | 是否为只读模式，只读时不显示编辑、添加、删除操作 |
+
+## Events
+
+| 事件           | detail                                                                                  | 说明                       |
+| -------------- | --------------------------------------------------------------------------------------- | -------------------------- |
+| onChange       | `Stage[]` — 更新后的阶段列表                                                            | 流程阶段数据发生变化时触发 |
+| onAddActivity  | `{ stage: Stage }` — { stage: 所属阶段数据 }                                            | 点击添加活动按钮时触发     |
+| onEditActivity | `EditActivityDetail` — { stage: 所属阶段, activity: 活动数据, activityIndex: 活动索引 } | 点击活动进行编辑时触发     |
+
+## Methods
+
+| 方法           | 参数                                                                    | 返回值 | 说明                     |
+| -------------- | ----------------------------------------------------------------------- | ------ | ------------------------ |
+| addActivity    | `(stage: Stage, activity: FlowActivity) => void`                        | `void` | 向指定阶段添加活动       |
+| editActivity   | `(stage: Stage, activity: FlowActivity, activityIndex: number) => void` | `void` | 编辑指定阶段中的某个活动 |
+| deleteActivity | `(stage: Stage, activityIndex: number) => void`                         | `void` | 删除指定阶段中的某个活动 |
+
+## Examples
+
+### 基础使用
+
+以泳道方式展示服务流的阶段和活动，支持分配 AI 员工。
+
+```tsx
+<WrappedAiPortalStageFlow
+  spec={[
+    {
+      name: "Requirement",
+      serviceFlowActivities: [
+        { name: "Requirement collects", aiEmployeeId: "employee-001" },
+        { name: "Requirement documents", aiEmployeeId: "employee-001" },
+      ],
+    },
+    { name: "Sprint Planning" },
+  ]}
+  aiEmployees={[{ employeeId: "employee-001", name: "Samuel" }]}
+  onChange={(e) => console.log("流程变更:", e.detail)}
+  onAddActivity={(e) => console.log("添加活动:", e.detail)}
+  onEditActivity={(e) => console.log("编辑活动:", e.detail)}
+/>
+```
+
+### 只读模式
+
+设置 readOnly 后不显示编辑、添加、删除操作。
+
+```tsx
+<WrappedAiPortalStageFlow
+  readOnly={true}
+  spec={[
+    {
+      name: "需求阶段",
+      serviceFlowActivities: [
+        { name: "需求收集", aiEmployeeId: "employee-001" },
+        { name: "需求评审", aiEmployeeId: "employee-002" },
+      ],
+    },
+    {
+      name: "开发阶段",
+      serviceFlowActivities: [
+        { name: "编码实现", aiEmployeeId: "employee-001" },
+      ],
+    },
+  ]}
+  aiEmployees={[
+    { employeeId: "employee-001", name: "Alice" },
+    { employeeId: "employee-002", name: "Bob" },
+  ]}
+/>
+```
+
+### 使用方法调用
+
+通过 ref 调用方法动态添加、编辑、删除活动。
+
+```tsx
+const ref = useRef<any>();
+
+<WrappedAiPortalStageFlow
+  ref={ref}
+  spec={[{ name: "阶段一", serviceFlowActivities: [{ name: "活动A" }] }]}
+  onChange={(e) => console.log(e.detail)}
+/>
+<button onClick={() => ref.current?.addActivity({ name: "阶段一" }, { name: "新活动B" })}>
+  添加活动
+</button>
+```

package/docs/stat-with-mini-chart.md

@@ -1,8 +1,35 @@
-构件 `ai-portal.stat-with-mini-chart`
+---
+tagName: ai-portal.stat-with-mini-chart
+displayName: WrappedAiPortalStatWithMiniChart
+description: 带迷你折线图的统计数据展示构件，在统计数值旁边渲染一个迷你折线图。
+category: ""
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.stat-with-mini-chart
+
+> 带迷你折线图的统计数据展示构件，在统计数值旁边渲染一个迷你折线图。
+
+## Props
+
+| 属性      | 类型                       | 必填 | 默认值                 | 说明                                                |
+| --------- | -------------------------- | ---- | ---------------------- | --------------------------------------------------- |
+| label     | `string`                   | 否   | -                      | 统计指标标签名称                                    |
+| value     | `string`                   | 否   | -                      | 统计数值文本                                        |
+| size      | `"medium" \| "small"`      | 否   | `"medium"`             | 展示尺寸，medium 时图表高度为 92px，small 时为 55px |
+| lineColor | `string`                   | 否   | `"var(--color-brand)"` | 折线颜色                                            |
+| showArea  | `boolean`                  | 否   | -                      | 是否在折线下方显示渐变填充区域                      |
+| min       | `number`                   | 否   | -                      | 指定 y 轴最小值，未指定时从数据中计算               |
+| max       | `number`                   | 否   | -                      | 指定 y 轴最大值，未指定时从数据中计算               |
+| xField    | `string`                   | 否   | `"0"`                  | x 轴字段名（数据中时间字段的 key）                  |
+| yField    | `string`                   | 否   | `"1"`                  | y 轴字段名（数据中数值字段的 key）                  |
+| data      | `Record<string, number>[]` | 否   | -                      | 图表数据源，每项为包含 xField 和 yField 字段的对象  |
 
 ## Examples
 
-### Basic
+### 基础使用（medium 尺寸）
+
+展示带标签、数值和迷你折线图的统计卡片，默认 medium 尺寸。
 
 ```yaml preview
 brick: ai-portal.stat-with-mini-chart
@@ -31,89 +58,13 @@ properties:
       time: 1730610000
     - request_total: 550.2
       time: 1730611800
-    - request_total: 556.5666666666667
-      time: 1730613600
-    - request_total: 565.6333333333333
-      time: 1730615400
-    - request_total: 586.5666666666667
-      time: 1730617200
-    - request_total: 611.7
-      time: 1730619000
-    - request_total: 540.0645161290323
-      time: 1730620800
-    - request_total: 595.9333333333333
-      time: 1730622600
-    - request_total: 560.0333333333333
-      time: 1730624400
-    - request_total: 565.2333333333333
-      time: 1730626200
-    - request_total: 609.5806451612904
-      time: 1730628000
-    - request_total: 598.8
-      time: 1730629800
-    - request_total: 594.5333333333333
-      time: 1730631600
-    - request_total: 525.7
-      time: 1730633400
-    - request_total: 602.3666666666667
-      time: 1730635200
-    - request_total: 557.7333333333333
-      time: 1730637000
-    - request_total: 595.8666666666667
-      time: 1730638800
-    - request_total: 638.7
-      time: 1730640600
-    - request_total: 635.8333333333334
-      time: 1730642400
-    - request_total: 563.9
-      time: 1730644200
-    - request_total: 606.4516129032259
-      time: 1730646000
-    - request_total: 660.1
-      time: 1730647800
-    - request_total: 606.2666666666667
-      time: 1730649600
-    - request_total: 504.43333333333334
-      time: 1730651400
-    - request_total: 651.7333333333333
-      time: 1730653200
-    - request_total: 583.5
-      time: 1730655000
-    - request_total: 566.2333333333333
-      time: 1730656800
-    - request_total: 519.2333333333333
-      time: 1730658600
-    - request_total: 621.6333333333333
-      time: 1730660400
-    - request_total: 530.9333333333333
-      time: 1730662200
-    - request_total: 685.3
-      time: 1730664000
-    - request_total: 616.3333333333334
-      time: 1730665800
-    - request_total: 580.3333333333334
-      time: 1730667600
-    - request_total: 568.5666666666667
-      time: 1730669400
-    - request_total: 619.3
-      time: 1730671200
-    - request_total: 636.2333333333333
-      time: 1730673000
-    - request_total: 630.4666666666667
-      time: 1730674800
-    - request_total: 621.4666666666667
-      time: 1730676600
-    - request_total: 587.5333333333333
-      time: 1730678400
-    - request_total: 542.8666666666667
-      time: 1730680200
-    - request_total: 579
-      time: 1730682000
     - request_total: 563.5
       time: 1730683800
 ```
 
-### Size
+### Small 尺寸
+
+small 尺寸时图表高度为 55px，标签和数值紧凑排列在图表左侧。
 
 ```yaml preview
 brick: ai-portal.stat-with-mini-chart
@@ -143,84 +94,38 @@ properties:
       time: 1730610000
     - request_total: 550.2
       time: 1730611800
-    - request_total: 556.5666666666667
-      time: 1730613600
-    - request_total: 565.6333333333333
-      time: 1730615400
-    - request_total: 586.5666666666667
-      time: 1730617200
-    - request_total: 611.7
-      time: 1730619000
-    - request_total: 540.0645161290323
-      time: 1730620800
-    - request_total: 595.9333333333333
-      time: 1730622600
-    - request_total: 560.0333333333333
-      time: 1730624400
-    - request_total: 565.2333333333333
-      time: 1730626200
-    - request_total: 609.5806451612904
-      time: 1730628000
-    - request_total: 598.8
-      time: 1730629800
-    - request_total: 594.5333333333333
-      time: 1730631600
-    - request_total: 525.7
-      time: 1730633400
-    - request_total: 602.3666666666667
-      time: 1730635200
-    - request_total: 557.7333333333333
-      time: 1730637000
-    - request_total: 595.8666666666667
-      time: 1730638800
-    - request_total: 638.7
-      time: 1730640600
-    - request_total: 635.8333333333334
-      time: 1730642400
-    - request_total: 563.9
-      time: 1730644200
-    - request_total: 606.4516129032259
-      time: 1730646000
-    - request_total: 660.1
-      time: 1730647800
-    - request_total: 606.2666666666667
-      time: 1730649600
-    - request_total: 504.43333333333334
-      time: 1730651400
-    - request_total: 651.7333333333333
-      time: 1730653200
-    - request_total: 583.5
-      time: 1730655000
-    - request_total: 566.2333333333333
-      time: 1730656800
-    - request_total: 519.2333333333333
-      time: 1730658600
-    - request_total: 621.6333333333333
-      time: 1730660400
-    - request_total: 530.9333333333333
-      time: 1730662200
-    - request_total: 685.3
-      time: 1730664000
-    - request_total: 616.3333333333334
-      time: 1730665800
-    - request_total: 580.3333333333334
-      time: 1730667600
-    - request_total: 568.5666666666667
-      time: 1730669400
-    - request_total: 619.3
-      time: 1730671200
-    - request_total: 636.2333333333333
-      time: 1730673000
-    - request_total: 630.4666666666667
-      time: 1730674800
-    - request_total: 621.4666666666667
-      time: 1730676600
-    - request_total: 587.5333333333333
-      time: 1730678400
-    - request_total: 542.8666666666667
-      time: 1730680200
-    - request_total: 579
-      time: 1730682000
     - request_total: 563.5
       time: 1730683800
 ```
+
+### 带填充区域和 y 轴范围
+
+开启 showArea 并指定 min/max 固定 y 轴范围。
+
+```yaml preview
+brick: ai-portal.stat-with-mini-chart
+properties:
+  label: CPU 使用率
+  value: "78.5%"
+  xField: time
+  yField: cpu
+  lineColor: "#FF6B6B"
+  showArea: true
+  min: 0
+  max: 100
+  data:
+    - cpu: 65.2
+      time: 1730597995
+    - cpu: 72.1
+      time: 1730599200
+    - cpu: 78.5
+      time: 1730601000
+    - cpu: 80.3
+      time: 1730602800
+    - cpu: 75.6
+      time: 1730604600
+    - cpu: 70.2
+      time: 1730606400
+    - cpu: 78.5
+      time: 1730608200
+```

package/docs/stat-with-mini-chart.react.md

@@ -0,0 +1,113 @@
+---
+tagName: ai-portal.stat-with-mini-chart
+displayName: WrappedAiPortalStatWithMiniChart
+description: 带迷你折线图的统计数据展示构件，在统计数值旁边渲染一个迷你折线图。
+category: ""
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalStatWithMiniChart
+
+> 带迷你折线图的统计数据展示构件，在统计数值旁边渲染一个迷你折线图。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalStatWithMiniChart } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性      | 类型                       | 必填 | 默认值                 | 说明                                                |
+| --------- | -------------------------- | ---- | ---------------------- | --------------------------------------------------- |
+| label     | `string`                   | 否   | -                      | 统计指标标签名称                                    |
+| value     | `string`                   | 否   | -                      | 统计数值文本                                        |
+| size      | `"medium" \| "small"`      | 否   | `"medium"`             | 展示尺寸，medium 时图表高度为 92px，small 时为 55px |
+| lineColor | `string`                   | 否   | `"var(--color-brand)"` | 折线颜色                                            |
+| showArea  | `boolean`                  | 否   | -                      | 是否在折线下方显示渐变填充区域                      |
+| min       | `number`                   | 否   | -                      | 指定 y 轴最小值，未指定时从数据中计算               |
+| max       | `number`                   | 否   | -                      | 指定 y 轴最大值，未指定时从数据中计算               |
+| xField    | `string`                   | 否   | `"0"`                  | x 轴字段名（数据中时间字段的 key）                  |
+| yField    | `string`                   | 否   | `"1"`                  | y 轴字段名（数据中数值字段的 key）                  |
+| data      | `Record<string, number>[]` | 否   | -                      | 图表数据源，每项为包含 xField 和 yField 字段的对象  |
+
+## Examples
+
+### 基础使用（medium 尺寸）
+
+展示带标签、数值和迷你折线图的统计卡片，默认 medium 尺寸。
+
+```tsx
+<WrappedAiPortalStatWithMiniChart
+  label="请求数"
+  value="563.5"
+  xField="time"
+  yField="request_total"
+  lineColor="#295DFF"
+  data={[
+    { request_total: 642.2, time: 1730597995.403 },
+    { request_total: 621.3, time: 1730599200 },
+    { request_total: 600.2, time: 1730601000 },
+    { request_total: 601.97, time: 1730602800 },
+    { request_total: 592.4, time: 1730604600 },
+    { request_total: 567.87, time: 1730606400 },
+    { request_total: 651.33, time: 1730608200 },
+    { request_total: 571.97, time: 1730610000 },
+    { request_total: 550.2, time: 1730611800 },
+    { request_total: 563.5, time: 1730683800 },
+  ]}
+/>
+```
+
+### Small 尺寸
+
+small 尺寸时图表高度为 55px，标签和数值紧凑排列在图表左侧。
+
+```tsx
+<WrappedAiPortalStatWithMiniChart
+  label="请求数"
+  value="563.5"
+  size="small"
+  xField="time"
+  yField="request_total"
+  lineColor="#295DFF"
+  data={[
+    { request_total: 642.2, time: 1730597995.403 },
+    { request_total: 621.3, time: 1730599200 },
+    { request_total: 600.2, time: 1730601000 },
+    { request_total: 601.97, time: 1730602800 },
+    { request_total: 592.4, time: 1730604600 },
+    { request_total: 567.87, time: 1730606400 },
+    { request_total: 651.33, time: 1730608200 },
+    { request_total: 571.97, time: 1730610000 },
+    { request_total: 550.2, time: 1730611800 },
+    { request_total: 563.5, time: 1730683800 },
+  ]}
+/>
+```
+
+### 带填充区域和 y 轴范围
+
+开启 showArea 并指定 min/max 固定 y 轴范围。
+
+```tsx
+<WrappedAiPortalStatWithMiniChart
+  label="CPU 使用率"
+  value="78.5%"
+  xField="time"
+  yField="cpu"
+  lineColor="#FF6B6B"
+  showArea={true}
+  min={0}
+  max={100}
+  data={[
+    { cpu: 65.2, time: 1730597995 },
+    { cpu: 72.1, time: 1730599200 },
+    { cpu: 78.5, time: 1730601000 },
+    { cpu: 80.3, time: 1730602800 },
+    { cpu: 75.6, time: 1730604600 },
+    { cpu: 70.2, time: 1730606400 },
+    { cpu: 78.5, time: 1730608200 },
+  ]}
+/>
+```

package/docs/sticky-container.md

@@ -1,11 +1,64 @@
-构件 `ai-portal.sticky-container`
+---
+tagName: ai-portal.sticky-container
+displayName: WrappedAiPortalStickyContainer
+description: 粘性容器构件，使内容在页面滚动时固定在顶部。
+category: ""
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.sticky-container
+
+> 粘性容器构件，使内容在页面滚动时固定在顶部。
+
+## Props
+
+| 属性    | 类型                  | 必填 | 默认值      | 说明                                                           |
+| ------- | --------------------- | ---- | ----------- | -------------------------------------------------------------- |
+| variant | `"default" \| "home"` | 否   | `"default"` | 变体风格，通过 CSS attribute selector 控制样式，不触发重新渲染 |
+
+## Slots
+
+| 名称      | 说明   |
+| --------- | ------ |
+| (default) | 内容   |
+| header    | 头部   |
+| toolbar   | 工具栏 |
 
 ## Examples
 
-### Basic
+### 基础使用
+
+将内容放入粘性容器，页面滚动时内容固定在顶部。
+
+```yaml preview
+brick: ai-portal.sticky-container
+children:
+  - brick: div
+    properties:
+      textContent: "这段内容会在滚动时保持固定"
+      style:
+        padding: "16px"
+        background: "var(--antd-color-bg-container)"
+```
+
+### Home 变体
+
+使用 home 变体风格，适用于首页场景。
 
 ```yaml preview
 brick: ai-portal.sticky-container
 properties:
-  textContent: Hello world
+  variant: home
+children:
+  - brick: div
+    slot: header
+    properties:
+      textContent: "头部内容"
+      style:
+        padding: "8px 16px"
+  - brick: div
+    properties:
+      textContent: "主体内容"
+      style:
+        padding: "16px"
 ```

package/docs/sticky-container.react.md

@@ -0,0 +1,60 @@
+---
+tagName: ai-portal.sticky-container
+displayName: WrappedAiPortalStickyContainer
+description: 粘性容器构件，使内容在页面滚动时固定在顶部。
+category: ""
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalStickyContainer
+
+> 粘性容器构件，使内容在页面滚动时固定在顶部。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalStickyContainer } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性    | 类型                  | 必填 | 默认值      | 说明                                                           |
+| ------- | --------------------- | ---- | ----------- | -------------------------------------------------------------- |
+| variant | `"default" \| "home"` | 否   | `"default"` | 变体风格，通过 CSS attribute selector 控制样式，不触发重新渲染 |
+
+## Slots
+
+| 名称      | 说明   |
+| --------- | ------ |
+| (default) | 内容   |
+| header    | 头部   |
+| toolbar   | 工具栏 |
+
+## Examples
+
+### 基础使用
+
+将内容放入粘性容器，页面滚动时内容固定在顶部。
+
+```tsx
+<WrappedAiPortalStickyContainer>
+  <div
+    style={{ padding: "16px", background: "var(--antd-color-bg-container)" }}
+  >
+    这段内容会在滚动时保持固定
+  </div>
+</WrappedAiPortalStickyContainer>
+```
+
+### Home 变体
+
+使用 home 变体风格，适用于首页场景。
+
+```tsx
+<WrappedAiPortalStickyContainer variant="home">
+  <div slot="header" style={{ padding: "8px 16px" }}>
+    头部内容
+  </div>
+  <div style={{ padding: "16px" }}>主体内容</div>
+</WrappedAiPortalStickyContainer>
+```

package/docs/tab-list.md

@@ -1,11 +1,82 @@
-构件 `ai-portal.tab-list`
+---
+tagName: ai-portal.tab-list
+displayName: WrappedAiPortalTabList
+description: 标签页列表构件，展示可切换的标签页，点击后触发事件并自动更新选中状态。
+category: ""
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.tab-list
+
+> 标签页列表构件，展示可切换的标签页，点击后触发事件并自动更新选中状态。
+
+## Props
+
+| 属性      | 类型     | 必填 | 默认值 | 说明                                 |
+| --------- | -------- | ---- | ------ | ------------------------------------ |
+| tabs      | `Tab[]`  | 否   | -      | 标签页配置列表，每项包含 id 和 label |
+| activeTab | `string` | 否   | -      | 当前激活的标签页 id                  |
+
+## Events
+
+| 事件      | detail                                      | 说明                                     |
+| --------- | ------------------------------------------- | ---------------------------------------- |
+| tab.click | `Tab` — { id: 标签页ID, label: 标签页标题 } | 点击标签页时触发，同时自动更新 activeTab |
+
+## CSS Parts
+
+| 名称 | 说明                   |
+| ---- | ---------------------- |
+| tabs | The tab list container |
+| tab  | The individual tab     |
 
 ## Examples
 
-### Basic
+### 基础使用
+
+展示可切换的标签页列表，点击后自动切换选中状态。
 
 ```yaml preview
 brick: ai-portal.tab-list
 properties:
-  textContent: Hello world
+  tabs:
+    - id: "all"
+      label: "全部"
+    - id: "host"
+      label: "主机故障排查"
+    - id: "inspect"
+      label: "主机巡检"
+  activeTab: "all"
+events:
+  tab.click:
+    action: console.log
+    args:
+      - "标签点击:"
+      - "<% EVENT.detail %>"
+```
+
+### 与内容联动
+
+结合事件监听，点击标签页时切换显示对应内容（通过 target 更新属性）。
+
+```yaml preview
+- brick: ai-portal.tab-list
+  properties:
+    tabs:
+      - id: "tab1"
+        label: "Tab 1"
+      - id: "tab2"
+        label: "Tab 2"
+    activeTab: "tab1"
+  events:
+    tab.click:
+      target: "#content"
+      properties:
+        textContent: "<% '当前 Tab: ' + EVENT.detail.label %>"
+- brick: div
+  id: content
+  properties:
+    textContent: "当前 Tab: Tab 1"
+    style:
+      padding: "16px"
 ```