@next-bricks/ai-portal 0.70.1 → 0.70.3

package/docs/goal-card-list.md

@@ -1,34 +1,170 @@
-构件 `ai-portal.goal-card-list`
+---
+tagName: ai-portal.goal-card-list
+displayName: WrappedAiPortalGoalCardList
+description: 目标卡片列表，以分层卡片形式展示目标项，支持内联编辑标题、状态切换、新建对话及追加子目标。
+category: display-component
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.goal-card-list
+
+> 目标卡片列表，以分层卡片形式展示目标项，支持内联编辑标题、状态切换、新建对话及追加子目标。
+
+## Props
+
+| 属性      | 类型                  | 必填 | 默认值 | 说明                                                      |
+| --------- | --------------------- | ---- | ------ | --------------------------------------------------------- |
+| goalList  | `GoalItem[]`          | 否   | -      | 目标列表数据，支持多层级（通过 `level` 字段区分父子层级） |
+| cardStyle | `React.CSSProperties` | 否   | -      | 卡片的自定义样式                                          |
+| activeKey | `string`              | 否   | -      | 当前激活卡片的 instanceId，匹配的卡片会高亮显示           |
+
+## Events
+
+| 事件               | detail                                                                                               | 说明                             |
+| ------------------ | ---------------------------------------------------------------------------------------------------- | -------------------------------- |
+| item.click         | `GoalItem` — { title: 目标标题, state: 目标状态, id: 序号, instanceId: 实例ID, level: 层级 }         | 点击目标卡片时触发               |
+| item.status.change | `GoalItem` — { title: 目标标题, state: 更新后的目标状态, id: 序号, instanceId: 实例ID, level: 层级 } | 目标状态切换时触发               |
+| item.title.change  | `GoalItem` — { title: 更新后的标题, state: 目标状态, id: 序号, instanceId: 实例ID, level: 层级 }     | 目标标题内联编辑完成时触发       |
+| item.new.chat      | `GoalItem` — { title: 目标标题, state: 目标状态, id: 序号, instanceId: 实例ID, level: 层级 }         | 点击目标卡片的新建对话按钮时触发 |
+
+## Methods
+
+| 方法            | 参数                                             | 返回值 | 说明                         |
+| --------------- | ------------------------------------------------ | ------ | ---------------------------- |
+| appendChildDone | `(pendingId: string, newItem: GoalItem) => void` | `void` | 将待定子目标提交为正式目标项 |
 
 ## Examples
 
 ### Basic
 
+展示基础目标卡片列表，包含多种状态的目标项。
+
+```yaml preview
+brick: ai-portal.goal-card-list
+properties:
+  style:
+    width: 600px
+  goalList:
+    - title: 页面流程绘制
+      id: 100124
+      state: ready
+      instanceId: abc1
+      level: 0
+    - title: 原型与设计绘制
+      id: 100125
+      state: working
+      instanceId: bdc9
+      level: 0
+    - title: 设计稿绘制
+      id: 100126
+      state: completed
+      instanceId: d76a
+      level: 0
+events:
+  item.click:
+    action: "console.log"
+  item.status.change:
+    action: "console.log"
+  item.title.change:
+    action: "console.log"
+  item.new.chat:
+    action: "console.log"
+```
+
+### With Active Item
+
+配置 activeKey 高亮激活当前选中的目标卡片。
+
 ```yaml preview
 brick: ai-portal.goal-card-list
 properties:
   style:
     width: 600px
+  activeKey: bdc9
   goalList:
     - title: 页面流程绘制
-      index: 100124
+      id: 100124
       state: ready
       instanceId: abc1
-      conversations:
-        - 会话1
-        - 会话2
-        - 会话3
+      level: 0
     - title: 原型与设计绘制
-      index: 100125
+      id: 100125
       state: working
       instanceId: bdc9
-      conversations:
-        - 会话4
+      level: 0
     - title: 设计稿绘制
-      index: 100126
+      id: 100126
       state: completed
       instanceId: d76a
-      conversations:
-        - 会话5
-        - 会话6
+      level: 0
+events:
+  item.click:
+    action: "console.log"
+```
+
+### Hierarchical Goals
+
+展示多层级目标，子目标通过 level 字段缩进显示。
+
+```yaml preview
+brick: ai-portal.goal-card-list
+properties:
+  style:
+    width: 600px
+  goalList:
+    - title: 产品研发
+      id: 1001
+      state: working
+      instanceId: parent1
+      level: 0
+    - title: 需求分析
+      id: 1002
+      state: completed
+      instanceId: child1
+      level: 1
+    - title: UI 设计
+      id: 1003
+      state: working
+      instanceId: child2
+      level: 1
+    - title: 数据架构
+      id: 1004
+      state: ready
+      instanceId: parent2
+      level: 0
+events:
+  item.click:
+    action: "console.log"
+  item.status.change:
+    action: "console.log"
+```
+
+### Custom Card Style
+
+为卡片配置自定义样式。
+
+```yaml preview
+brick: ai-portal.goal-card-list
+properties:
+  cardStyle:
+    borderRadius: 8px
+    marginBottom: 8px
+  style:
+    width: 600px
+  goalList:
+    - title: 前端架构升级
+      id: 2001
+      state: ready
+      instanceId: item1
+      level: 0
+    - title: 性能优化
+      id: 2002
+      state: working
+      instanceId: item2
+      level: 0
+events:
+  item.click:
+    action: "console.log"
+  item.new.chat:
+    action: "console.log"
 ```

package/docs/goal-card-list.react.md

@@ -0,0 +1,185 @@
+---
+tagName: ai-portal.goal-card-list
+displayName: WrappedAiPortalGoalCardList
+description: 目标卡片列表，以分层卡片形式展示目标项，支持内联编辑标题、状态切换、新建对话及追加子目标。
+category: display-component
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalGoalCardList
+
+> 目标卡片列表，以分层卡片形式展示目标项，支持内联编辑标题、状态切换、新建对话及追加子目标。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalGoalCardList } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性      | 类型                  | 必填 | 默认值 | 说明                                                      |
+| --------- | --------------------- | ---- | ------ | --------------------------------------------------------- |
+| goalList  | `GoalItem[]`          | 否   | -      | 目标列表数据，支持多层级（通过 `level` 字段区分父子层级） |
+| cardStyle | `React.CSSProperties` | 否   | -      | 卡片的自定义样式                                          |
+| activeKey | `string`              | 否   | -      | 当前激活卡片的 instanceId，匹配的卡片会高亮显示           |
+
+## Events
+
+| 事件               | detail                                                                                               | 说明                             |
+| ------------------ | ---------------------------------------------------------------------------------------------------- | -------------------------------- |
+| onItemClick        | `GoalItem` — { title: 目标标题, state: 目标状态, id: 序号, instanceId: 实例ID, level: 层级 }         | 点击目标卡片时触发               |
+| onItemStatusChange | `GoalItem` — { title: 目标标题, state: 更新后的目标状态, id: 序号, instanceId: 实例ID, level: 层级 } | 目标状态切换时触发               |
+| onItemTitleChange  | `GoalItem` — { title: 更新后的标题, state: 目标状态, id: 序号, instanceId: 实例ID, level: 层级 }     | 目标标题内联编辑完成时触发       |
+| onItemNewChat      | `GoalItem` — { title: 目标标题, state: 目标状态, id: 序号, instanceId: 实例ID, level: 层级 }         | 点击目标卡片的新建对话按钮时触发 |
+
+## Methods
+
+| 方法            | 参数                                             | 返回值 | 说明                         |
+| --------------- | ------------------------------------------------ | ------ | ---------------------------- |
+| appendChildDone | `(pendingId: string, newItem: GoalItem) => void` | `void` | 将待定子目标提交为正式目标项 |
+
+## Examples
+
+### Basic
+
+展示基础目标卡片列表，包含多种状态的目标项。
+
+```tsx
+<WrappedAiPortalGoalCardList
+  style={{ width: 600 }}
+  goalList={[
+    {
+      title: "页面流程绘制",
+      id: 100124,
+      state: "ready",
+      instanceId: "abc1",
+      level: 0,
+    },
+    {
+      title: "原型与设计绘制",
+      id: 100125,
+      state: "working",
+      instanceId: "bdc9",
+      level: 0,
+    },
+    {
+      title: "设计稿绘制",
+      id: 100126,
+      state: "completed",
+      instanceId: "d76a",
+      level: 0,
+    },
+  ]}
+  onItemClick={(e) => console.log(e.detail)}
+  onItemStatusChange={(e) => console.log(e.detail)}
+  onItemTitleChange={(e) => console.log(e.detail)}
+  onItemNewChat={(e) => console.log(e.detail)}
+/>
+```
+
+### With Active Item
+
+配置 activeKey 高亮激活当前选中的目标卡片。
+
+```tsx
+<WrappedAiPortalGoalCardList
+  style={{ width: 600 }}
+  activeKey="bdc9"
+  goalList={[
+    {
+      title: "页面流程绘制",
+      id: 100124,
+      state: "ready",
+      instanceId: "abc1",
+      level: 0,
+    },
+    {
+      title: "原型与设计绘制",
+      id: 100125,
+      state: "working",
+      instanceId: "bdc9",
+      level: 0,
+    },
+    {
+      title: "设计稿绘制",
+      id: 100126,
+      state: "completed",
+      instanceId: "d76a",
+      level: 0,
+    },
+  ]}
+  onItemClick={(e) => console.log(e.detail)}
+/>
+```
+
+### Hierarchical Goals
+
+展示多层级目标，子目标通过 level 字段缩进显示。
+
+```tsx
+<WrappedAiPortalGoalCardList
+  style={{ width: 600 }}
+  goalList={[
+    {
+      title: "产品研发",
+      id: 1001,
+      state: "working",
+      instanceId: "parent1",
+      level: 0,
+    },
+    {
+      title: "需求分析",
+      id: 1002,
+      state: "completed",
+      instanceId: "child1",
+      level: 1,
+    },
+    {
+      title: "UI 设计",
+      id: 1003,
+      state: "working",
+      instanceId: "child2",
+      level: 1,
+    },
+    {
+      title: "数据架构",
+      id: 1004,
+      state: "ready",
+      instanceId: "parent2",
+      level: 0,
+    },
+  ]}
+  onItemClick={(e) => console.log(e.detail)}
+  onItemStatusChange={(e) => console.log(e.detail)}
+/>
+```
+
+### Custom Card Style
+
+为卡片配置自定义样式。
+
+```tsx
+<WrappedAiPortalGoalCardList
+  cardStyle={{ borderRadius: 8, marginBottom: 8 }}
+  style={{ width: 600 }}
+  goalList={[
+    {
+      title: "前端架构升级",
+      id: 2001,
+      state: "ready",
+      instanceId: "item1",
+      level: 0,
+    },
+    {
+      title: "性能优化",
+      id: 2002,
+      state: "working",
+      instanceId: "item2",
+      level: 0,
+    },
+  ]}
+  onItemClick={(e) => console.log(e.detail)}
+  onItemNewChat={(e) => console.log(e.detail)}
+/>
+```

package/docs/home-container.md

@@ -1,11 +1,57 @@
-构件 `ai-portal.home-container`
+---
+tagName: ai-portal.home-container
+displayName: WrappedAiPortalHomeContainer
+description: AI Portal 首页容器，通过 sticky 属性控制顶部吸附行为，内容通过默认插槽传入。
+category: layout-component
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.home-container
+
+> AI Portal 首页容器，通过 sticky 属性控制顶部吸附行为，内容通过默认插槽传入。
+
+## Props
+
+| 属性   | 类型      | 必填 | 默认值 | 说明                                                              |
+| ------ | --------- | ---- | ------ | ----------------------------------------------------------------- |
+| sticky | `boolean` | 否   | -      | 是否启用顶部吸附样式，通过 CSS 属性选择器控制布局，不触发重新渲染 |
+
+## Slots
+
+| 名称    | 说明         |
+| ------- | ------------ |
+| default | 页面内容区域 |
 
 ## Examples
 
 ### Basic
 
+作为页面内容的包裹容器，传入子构件。
+
+```yaml preview
+brick: ai-portal.home-container
+children:
+  - brick: span
+    properties:
+      textContent: Hello world
+      style:
+        padding: 16px
+        display: block
+```
+
+### With Sticky
+
+启用 sticky 吸附样式的首页容器。
+
 ```yaml preview
 brick: ai-portal.home-container
 properties:
-  textContent: Hello world
+  sticky: true
+children:
+  - brick: span
+    properties:
+      textContent: 吸附布局内容
+      style:
+        padding: 16px
+        display: block
 ```

package/docs/home-container.react.md

@@ -0,0 +1,51 @@
+---
+tagName: ai-portal.home-container
+displayName: WrappedAiPortalHomeContainer
+description: AI Portal 首页容器，通过 sticky 属性控制顶部吸附行为，内容通过默认插槽传入。
+category: layout-component
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalHomeContainer
+
+> AI Portal 首页容器，通过 sticky 属性控制顶部吸附行为，内容通过默认插槽传入。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalHomeContainer } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性   | 类型      | 必填 | 默认值 | 说明                                                              |
+| ------ | --------- | ---- | ------ | ----------------------------------------------------------------- |
+| sticky | `boolean` | 否   | -      | 是否启用顶部吸附样式，通过 CSS 属性选择器控制布局，不触发重新渲染 |
+
+## Slots
+
+| 名称    | 说明         |
+| ------- | ------------ |
+| default | 页面内容区域 |
+
+## Examples
+
+### Basic
+
+作为页面内容的包裹容器，传入子构件。
+
+```tsx
+<WrappedAiPortalHomeContainer>
+  <span style={{ padding: 16, display: "block" }}>Hello world</span>
+</WrappedAiPortalHomeContainer>
+```
+
+### With Sticky
+
+启用 sticky 吸附样式的首页容器。
+
+```tsx
+<WrappedAiPortalHomeContainer sticky>
+  <span style={{ padding: 16, display: "block" }}>吸附布局内容</span>
+</WrappedAiPortalHomeContainer>
+```

package/docs/icon-button.md

@@ -1,14 +1,140 @@
-构件 `ai-portal.icon-button`
+---
+tagName: ai-portal.icon-button
+displayName: WrappedAiPortalIconButton
+description: 图标按钮，支持多种视觉变体、禁用状态、Tooltip 提示及文字插槽。
+category: interact-basic
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.icon-button
+
+> 图标按钮，支持多种视觉变体、禁用状态、Tooltip 提示及文字插槽。
+
+## 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 提示。
+
 ```yaml preview
 brick: ai-portal.icon-button
 properties:
   icon:
     lib: antd
     icon: download
-  tooltip: Go to homepage
+  tooltip: 下载
+```
+
+### Variants
+
+展示不同视觉变体的图标按钮。
+
+```yaml preview
+brick: div
+properties:
+  style:
+    display: flex
+    gap: 8px
+    alignItems: center
+    padding: 8px
+children:
+  - brick: ai-portal.icon-button
+    properties:
+      variant: default
+      icon:
+        lib: antd
+        icon: setting
+      tooltip: 默认样式
+  - brick: ai-portal.icon-button
+    properties:
+      variant: light
+      icon:
+        lib: antd
+        icon: heart
+      tooltip: 轻量样式
+  - brick: ai-portal.icon-button
+    properties:
+      variant: mini
+      icon:
+        lib: antd
+        icon: star
+      tooltip: 迷你样式
+  - brick: ai-portal.icon-button
+    properties:
+      variant: mini-light
+      icon:
+        lib: antd
+        icon: bell
+      tooltip: 迷你轻量
+  - brick: ai-portal.icon-button
+    properties:
+      variant: bordered
+      icon:
+        lib: antd
+        icon: plus
+      tooltip: 边框样式
+```
+
+### Disabled State
+
+展示禁用状态的图标按钮。
+
+```yaml preview
+brick: ai-portal.icon-button
+properties:
+  icon:
+    lib: antd
+    icon: delete
+  tooltip: 无法删除
+  disabled: true
+```
+
+### With Text Slot
+
+图标按钮配合文字内容插槽。
+
+```yaml preview
+brick: ai-portal.icon-button
+properties:
+  icon:
+    lib: easyops
+    icon: new-chat
+  active: true
+  reduceIconSize: true
+children:
+  - brick: span
+    properties:
+      textContent: 新建对话
+```
+
+### With Tooltip Hoist
+
+配置 tooltipHoist 防止 Tooltip 被父容器裁剪。
+
+```yaml preview
+brick: ai-portal.icon-button
+properties:
+  icon:
+    lib: antd
+    icon: info-circle
+  tooltip: 这是一条提示信息
+  tooltipHoist: true
 ```