@next-bricks/ai-portal 0.70.1 → 0.70.3

package/docs/elevo-sidebar.react.md

@@ -0,0 +1,149 @@
+---
+tagName: ai-portal.elevo-sidebar
+displayName: WrappedAiPortalElevoSidebar
+description: Elevo AI 侧边栏，包含 Logo 导航、新建对话、历史记录、项目列表及个人账户操作，支持折叠和抽屉两种行为模式。
+category: layout-component
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalElevoSidebar
+
+> Elevo AI 侧边栏，包含 Logo 导航、新建对话、历史记录、项目列表及个人账户操作，支持折叠和抽屉两种行为模式。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalElevoSidebar } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                     | 类型                    | 必填 | 默认值      | 说明                                                                   |
+| ------------------------ | ----------------------- | ---- | ----------- | ---------------------------------------------------------------------- |
+| userInstanceId           | `string`                | 否   | -           | 当前用户的实例 ID，用于显示头像和用户名                                |
+| behavior                 | `"default" \| "drawer"` | 否   | -           | 侧边栏行为模式，`"default"` 为常驻展开/折叠，`"drawer"` 为抽屉覆盖模式 |
+| logoUrl                  | `string`                | 否   | -           | Logo 区域的跳转链接                                                    |
+| newChatUrl               | `string`                | 否   | -           | 新建对话按钮的跳转链接                                                 |
+| newChatLinkWhenCollapsed | `boolean`               | 否   | -           | 侧边栏折叠时是否仍显示新建对话快捷入口                                 |
+| historyUrlTemplate       | `string`                | 否   | -           | 对话历史记录条目的链接模板，支持 `{{conversationId}}` 等占位符         |
+| historyActions           | `ActionType[]`          | 否   | -           | 对话历史记录条目的操作按钮列表                                         |
+| showProjects             | `boolean`               | 否   | -           | 是否显示项目列表区块                                                   |
+| projectUrlTemplate       | `string`                | 否   | -           | 项目条目的链接模板，支持 `{{instanceId}}` 等占位符                     |
+| projectActions           | `ActionType[]`          | 否   | -           | 项目条目的操作按钮列表                                                 |
+| personalActions          | `ActionType[]`          | 否   | -           | 个人账户区域的自定义操作列表，未设置时显示默认的退出登录和切换语言选项 |
+| links                    | `SidebarLink[]`         | 否   | -           | 侧边栏顶部的自定义链接列表，显示在新建对话按钮下方                     |
+| canAddProject            | `boolean`               | 否   | `true`      | 是否显示新建项目按钮                                                   |
+| myLinks                  | `SidebarLink[]`         | 否   | -           | 历史区域顶部的"我的"快捷链接列表                                       |
+| scope                    | `"default" \| "space"`  | 否   | `"default"` | 视图模式，`"space"` 时显示空间导航（SpaceNav）替换历史记录             |
+| spaceNav                 | `SpaceNavProps`         | 否   | -           | scope 为 `"space"` 时的空间导航配置                                    |
+
+## Events
+
+| 事件                  | detail                                                                                                                         | 说明                                              |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- |
+| onLogout              | `void`                                                                                                                         | 点击退出登录时触发                                |
+| onActionClick         | `ActionClickDetail` — { action: 点击的操作项（含 project 等扩展字段）, item: 当前对话历史记录项, project: 关联的项目（可选） } | 点击对话历史操作按钮时触发                        |
+| onProjectActionClick  | `ProjectActionClickDetail` — { action: 点击的操作项, project: 当前项目对象 }                                                   | 点击项目操作按钮时触发                            |
+| onAddProject          | `void`                                                                                                                         | 点击新建项目按钮时触发                            |
+| onAddServiceflow      | `void`                                                                                                                         | 点击新建服务流按钮时触发（scope 为 space 时有效） |
+| onPersonalActionClick | `PersonalActionClickDetail` — { action: 点击的操作项 }                                                                         | 点击个人操作按钮时触发                            |
+
+## Methods
+
+| 方法             | 参数                               | 返回值 | 说明                                         |
+| ---------------- | ---------------------------------- | ------ | -------------------------------------------- |
+| pullHistory      | `(delay: number) => void`          | `void` | 延迟一段时间后拉取最新对话历史               |
+| open             | `() => void`                       | `void` | 展开侧边栏（behavior 为 drawer 时有效）      |
+| close            | `() => void`                       | `void` | 折叠侧边栏（behavior 为 drawer 时有效）      |
+| removeProject    | `(projectId: string) => void`      | `void` | 从历史列表中移除指定项目及其对话             |
+| addProject       | `(project: Project) => void`       | `void` | 向项目列表中追加一个新项目                   |
+| moveConversation | `(conversationId: string) => void` | `void` | 将指定对话标记为已移入项目，从历史列表中隐藏 |
+
+## Examples
+
+### Basic
+
+基础用法，展示默认侧边栏。
+
+```tsx
+<WrappedAiPortalElevoSidebar
+  userInstanceId="user-001"
+  logoUrl="/"
+  newChatUrl="/chat/new"
+  historyUrlTemplate="/chat/{{conversationId}}"
+  onLogout={(e) => console.log(e.detail)}
+/>
+```
+
+### With Projects
+
+启用项目列表，并配置项目操作按钮。
+
+```tsx
+<WrappedAiPortalElevoSidebar
+  userInstanceId="user-001"
+  logoUrl="/"
+  newChatUrl="/chat/new"
+  historyUrlTemplate="/chat/{{conversationId}}"
+  showProjects
+  canAddProject
+  projectUrlTemplate="/project/{{instanceId}}"
+  projectActions={[
+    {
+      key: "delete",
+      text: "删除",
+      icon: { lib: "antd", icon: "delete" },
+      danger: true,
+    },
+  ]}
+  onLogout={(e) => console.log(e.detail)}
+  onAddProject={(e) => console.log(e.detail)}
+  onProjectActionClick={(e) => console.log(e.detail)}
+/>
+```
+
+### Drawer Mode
+
+抽屉模式下，点击折叠按钮后侧边栏以覆盖层形式展开。
+
+```tsx
+<WrappedAiPortalElevoSidebar
+  userInstanceId="user-001"
+  behavior="drawer"
+  logoUrl="/"
+  newChatUrl="/chat/new"
+  historyUrlTemplate="/chat/{{conversationId}}"
+  onLogout={(e) => console.log(e.detail)}
+/>
+```
+
+### With Custom Links and Personal Actions
+
+配置顶部自定义链接和个人账户自定义操作。
+
+```tsx
+<WrappedAiPortalElevoSidebar
+  userInstanceId="user-001"
+  logoUrl="/"
+  newChatUrl="/chat/new"
+  historyUrlTemplate="/chat/{{conversationId}}"
+  links={[
+    {
+      title: "工作台",
+      url: "/workbench",
+      icon: { lib: "antd", icon: "appstore" },
+    },
+  ]}
+  myLinks={[{ title: "我的收藏", url: "/favorites" }]}
+  personalActions={[
+    { key: "profile", text: "个人资料", icon: { lib: "antd", icon: "user" } },
+    {
+      key: "logout",
+      text: "退出登录",
+      icon: { lib: "fa", prefix: "fas", icon: "arrow-right-from-bracket" },
+    },
+  ]}
+  onPersonalActionClick={(e) => console.log(e.detail)}
+  onActionClick={(e) => console.log(e.detail)}
+/>
+```

package/docs/flow-tabs.md

@@ -1,15 +1,46 @@
-构件 `ai-portal.flow-tabs`
+---
+tagName: ai-portal.flow-tabs
+displayName: WrappedAiPortalFlowTabs
+description: 流程标签页组件，提供带背景画布动效的标签导航，支持工具栏插槽和默认内容插槽。
+category: navigate
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.flow-tabs
+
+> 流程标签页组件，提供带背景画布动效的标签导航，支持工具栏插槽和默认内容插槽。
+
+## Props
+
+| 属性      | 类型     | 必填 | 默认值 | 说明                                  |
+| --------- | -------- | ---- | ------ | ------------------------------------- |
+| tabs      | `Tab[]`  | 否   | -      | 标签列表，每项包含 `id` 和 `label`    |
+| activeTab | `string` | 否   | -      | 当前激活的标签 ID，点击标签时自动更新 |
+
+## Events
+
+| 事件      | detail                                       | 说明                                      |
+| --------- | -------------------------------------------- | ----------------------------------------- |
+| tab.click | `Tab` — { id: 标签 ID, label: 标签显示文本 } | 点击标签项时触发，同时更新 activeTab 属性 |
+
+## Slots
+
+| 名称    | 说明                 |
+| ------- | -------------------- |
+| toolbar | 标签栏右侧工具栏区域 |
+| default | 标签页内容区域       |
 
 ## Examples
 
 ### Basic
 
+基础标签页，展示多个流程步骤标签。
+
 ```yaml preview
 brick: ai-portal.home-container
 children:
   - brick: ai-portal.flow-tabs
     properties:
-      textContent: Hello world
       tabs:
         - id: foo
           label: Fooooo
@@ -18,4 +49,68 @@ children:
         - id: baz
           label: Baaaaaz
       activeTab: foo
+    events:
+      tab.click:
+        action: "console.log"
+```
+
+### With Toolbar Slot
+
+在标签栏右侧添加工具栏操作按钮。
+
+```yaml preview
+brick: ai-portal.home-container
+children:
+  - brick: ai-portal.flow-tabs
+    properties:
+      tabs:
+        - id: design
+          label: 设计阶段
+        - id: develop
+          label: 开发阶段
+        - id: test
+          label: 测试阶段
+        - id: deploy
+          label: 部署阶段
+      activeTab: design
+    children:
+      - brick: ai-portal.icon-button
+        slot: toolbar
+        properties:
+          icon:
+            lib: antd
+            icon: filter
+          tooltip: 筛选
+    events:
+      tab.click:
+        action: "console.log"
+```
+
+### With Content
+
+标签页带内容区域，点击标签切换展示不同内容。
+
+```yaml preview
+brick: ai-portal.home-container
+children:
+  - brick: ai-portal.flow-tabs
+    properties:
+      tabs:
+        - id: overview
+          label: 概览
+        - id: detail
+          label: 详情
+        - id: history
+          label: 历史
+      activeTab: overview
+    children:
+      - brick: span
+        properties:
+          textContent: 这里是内容区域
+          style:
+            padding: 16px
+            display: block
+    events:
+      tab.click:
+        action: "console.log"
 ```

package/docs/flow-tabs.react.md

@@ -0,0 +1,102 @@
+---
+tagName: ai-portal.flow-tabs
+displayName: WrappedAiPortalFlowTabs
+description: 流程标签页组件，提供带背景画布动效的标签导航，支持工具栏插槽和默认内容插槽。
+category: navigate
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalFlowTabs
+
+> 流程标签页组件，提供带背景画布动效的标签导航，支持工具栏插槽和默认内容插槽。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalFlowTabs } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性      | 类型     | 必填 | 默认值 | 说明                                  |
+| --------- | -------- | ---- | ------ | ------------------------------------- |
+| tabs      | `Tab[]`  | 否   | -      | 标签列表，每项包含 `id` 和 `label`    |
+| activeTab | `string` | 否   | -      | 当前激活的标签 ID，点击标签时自动更新 |
+
+## Events
+
+| 事件       | detail                                       | 说明                                      |
+| ---------- | -------------------------------------------- | ----------------------------------------- |
+| onTabClick | `Tab` — { id: 标签 ID, label: 标签显示文本 } | 点击标签项时触发，同时更新 activeTab 属性 |
+
+## Slots
+
+| 名称    | 说明                 |
+| ------- | -------------------- |
+| toolbar | 标签栏右侧工具栏区域 |
+| default | 标签页内容区域       |
+
+## Examples
+
+### Basic
+
+基础标签页，展示多个流程步骤标签。
+
+```tsx
+<WrappedAiPortalHomeContainer>
+  <WrappedAiPortalFlowTabs
+    tabs={[
+      { id: "foo", label: "Fooooo" },
+      { id: "bar", label: "Baaaaar" },
+      { id: "baz", label: "Baaaaaz" },
+    ]}
+    activeTab="foo"
+    onTabClick={(e) => console.log(e.detail)}
+  />
+</WrappedAiPortalHomeContainer>
+```
+
+### With Toolbar Slot
+
+在标签栏右侧添加工具栏操作按钮。
+
+```tsx
+<WrappedAiPortalHomeContainer>
+  <WrappedAiPortalFlowTabs
+    tabs={[
+      { id: "design", label: "设计阶段" },
+      { id: "develop", label: "开发阶段" },
+      { id: "test", label: "测试阶段" },
+      { id: "deploy", label: "部署阶段" },
+    ]}
+    activeTab="design"
+    onTabClick={(e) => console.log(e.detail)}
+  >
+    <WrappedAiPortalIconButton
+      slot="toolbar"
+      icon={{ lib: "antd", icon: "filter" }}
+      tooltip="筛选"
+    />
+  </WrappedAiPortalFlowTabs>
+</WrappedAiPortalHomeContainer>
+```
+
+### With Content
+
+标签页带内容区域，点击标签切换展示不同内容。
+
+```tsx
+<WrappedAiPortalHomeContainer>
+  <WrappedAiPortalFlowTabs
+    tabs={[
+      { id: "overview", label: "概览" },
+      { id: "detail", label: "详情" },
+      { id: "history", label: "历史" },
+    ]}
+    activeTab="overview"
+    onTabClick={(e) => console.log(e.detail)}
+  >
+    <span style={{ padding: 16, display: "block" }}>这里是内容区域</span>
+  </WrappedAiPortalFlowTabs>
+</WrappedAiPortalHomeContainer>
+```

package/docs/gantt-chart.md

@@ -0,0 +1,101 @@
+---
+tagName: ai-portal.gantt-chart
+displayName: WrappedAiPortalGanttChart
+description: 甘特图组件，以树状层级结构展示任务节点及其时间条，支持折叠展开和全屏操作。
+category: chart
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.gantt-chart
+
+> 甘特图组件，以树状层级结构展示任务节点及其时间条，支持折叠展开和全屏操作。
+
+## Props
+
+| 属性       | 类型          | 必填 | 默认值 | 说明                                                     |
+| ---------- | ------------- | ---- | ------ | -------------------------------------------------------- |
+| chartTitle | `string`      | 否   | -      | 甘特图标题                                               |
+| nodes      | `GanttNode[]` | 否   | -      | 任务节点树数据，每个节点包含名称、状态、时间范围及子节点 |
+
+## Events
+
+| 事件             | detail                                                                                                              | 说明                 |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------- |
+| node.click       | `GanttNode` — { name: 节点名称, state: 节点状态, startTime: 开始时间戳, endTime: 结束时间戳, children: 子节点列表 } | 点击甘特图节点时触发 |
+| fullscreen.click | `void`                                                                                                              | 点击全屏按钮时触发   |
+
+## Examples
+
+### Basic
+
+展示基础甘特图，包含父子任务节点和时间条。
+
+```yaml preview
+brick: ai-portal.gantt-chart
+properties:
+  chartTitle: 项目执行计划
+  nodes:
+    - name: 需求分析
+      state: completed
+      startTime: 1700000000000
+      endTime: 1700200000000
+      children:
+        - name: 业务需求梳理
+          state: completed
+          startTime: 1700000000000
+          endTime: 1700100000000
+        - name: 技术方案评审
+          state: completed
+          startTime: 1700100000000
+          endTime: 1700200000000
+    - name: 开发阶段
+      state: working
+      startTime: 1700200000000
+      endTime: 1700600000000
+      children:
+        - name: 后端开发
+          state: working
+          startTime: 1700200000000
+          endTime: 1700500000000
+        - name: 前端开发
+          state: ready
+          startTime: 1700300000000
+          endTime: 1700600000000
+    - name: 测试上线
+      state: ready
+      startTime: 1700600000000
+      endTime: 1700800000000
+events:
+  node.click:
+    action: "console.log"
+  fullscreen.click:
+    action: "console.log"
+```
+
+### Simple Flat Nodes
+
+展示无子节点的平铺任务甘特图。
+
+```yaml preview
+brick: ai-portal.gantt-chart
+properties:
+  chartTitle: 迭代任务
+  nodes:
+    - name: 任务 A
+      state: completed
+      startTime: 1700000000000
+      endTime: 1700150000000
+    - name: 任务 B
+      state: working
+      startTime: 1700150000000
+      endTime: 1700400000000
+    - name: 任务 C
+      state: ready
+      startTime: 1700400000000
+      endTime: 1700600000000
+events:
+  node.click:
+    action: "console.log"
+  fullscreen.click:
+    action: "console.log"
+```

package/docs/gantt-chart.react.md

@@ -0,0 +1,125 @@
+---
+tagName: ai-portal.gantt-chart
+displayName: WrappedAiPortalGanttChart
+description: 甘特图组件，以树状层级结构展示任务节点及其时间条，支持折叠展开和全屏操作。
+category: chart
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalGanttChart
+
+> 甘特图组件，以树状层级结构展示任务节点及其时间条，支持折叠展开和全屏操作。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalGanttChart } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型          | 必填 | 默认值 | 说明                                                     |
+| ---------- | ------------- | ---- | ------ | -------------------------------------------------------- |
+| chartTitle | `string`      | 否   | -      | 甘特图标题                                               |
+| nodes      | `GanttNode[]` | 否   | -      | 任务节点树数据，每个节点包含名称、状态、时间范围及子节点 |
+
+## Events
+
+| 事件              | detail                                                                                                              | 说明                 |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------- |
+| onNodeClick       | `GanttNode` — { name: 节点名称, state: 节点状态, startTime: 开始时间戳, endTime: 结束时间戳, children: 子节点列表 } | 点击甘特图节点时触发 |
+| onFullscreenClick | `void`                                                                                                              | 点击全屏按钮时触发   |
+
+## Examples
+
+### Basic
+
+展示基础甘特图，包含父子任务节点和时间条。
+
+```tsx
+<WrappedAiPortalGanttChart
+  chartTitle="项目执行计划"
+  nodes={[
+    {
+      name: "需求分析",
+      state: "completed",
+      startTime: 1700000000000,
+      endTime: 1700200000000,
+      children: [
+        {
+          name: "业务需求梳理",
+          state: "completed",
+          startTime: 1700000000000,
+          endTime: 1700100000000,
+        },
+        {
+          name: "技术方案评审",
+          state: "completed",
+          startTime: 1700100000000,
+          endTime: 1700200000000,
+        },
+      ],
+    },
+    {
+      name: "开发阶段",
+      state: "working",
+      startTime: 1700200000000,
+      endTime: 1700600000000,
+      children: [
+        {
+          name: "后端开发",
+          state: "working",
+          startTime: 1700200000000,
+          endTime: 1700500000000,
+        },
+        {
+          name: "前端开发",
+          state: "ready",
+          startTime: 1700300000000,
+          endTime: 1700600000000,
+        },
+      ],
+    },
+    {
+      name: "测试上线",
+      state: "ready",
+      startTime: 1700600000000,
+      endTime: 1700800000000,
+    },
+  ]}
+  onNodeClick={(e) => console.log(e.detail)}
+  onFullscreenClick={(e) => console.log(e.detail)}
+/>
+```
+
+### Simple Flat Nodes
+
+展示无子节点的平铺任务甘特图。
+
+```tsx
+<WrappedAiPortalGanttChart
+  chartTitle="迭代任务"
+  nodes={[
+    {
+      name: "任务 A",
+      state: "completed",
+      startTime: 1700000000000,
+      endTime: 1700150000000,
+    },
+    {
+      name: "任务 B",
+      state: "working",
+      startTime: 1700150000000,
+      endTime: 1700400000000,
+    },
+    {
+      name: "任务 C",
+      state: "ready",
+      startTime: 1700400000000,
+      endTime: 1700600000000,
+    },
+  ]}
+  onNodeClick={(e) => console.log(e.detail)}
+  onFullscreenClick={(e) => console.log(e.detail)}
+/>
+```