@next-bricks/ai-portal 0.70.0 → 0.70.2

package/docs/dropdown-select.md

@@ -1,12 +1,39 @@
-构件 `ai-portal.dropdown-select`
+---
+tagName: ai-portal.dropdown-select
+displayName: WrappedAiPortalDropdownSelect
+description: 下拉选择器，提供选项列表供用户选择，支持搜索过滤功能。
+category: interact-basic
+source: "@next-bricks/ai-portal"
+---
 
-下拉选择器组件，提供选项列表供用户选择，支持搜索过滤功能。
+# ai-portal.dropdown-select
+
+> 下拉选择器，提供选项列表供用户选择，支持搜索过滤功能。
+
+## Props
+
+| 属性                 | 类型                  | 必填 | 默认值    | 说明                     |
+| -------------------- | --------------------- | ---- | --------- | ------------------------ |
+| value                | `string`              | 否   | -         | 当前选中项的值           |
+| options              | `DropdownOptions[]`   | 否   | -         | 可选项数据源             |
+| labelMaxWidth        | `string \| number`    | 否   | -         | 触发器标签的最大宽度     |
+| loading              | `boolean`             | 否   | -         | 是否显示加载状态         |
+| searchPlaceholder    | `string`              | 否   | -         | 搜索框的占位文本         |
+| dropdownContentStyle | `React.CSSProperties` | 否   | -         | 下拉内容区域的自定义样式 |
+| dropdownMaxWidth     | `string \| number`    | 否   | `"500px"` | 下拉框的最大宽度         |
+| showSearch           | `boolean`             | 否   | -         | 是否展示搜索框           |
+
+## Events
+
+| 事件   | detail                                                 | 说明           |
+| ------ | ------------------------------------------------------ | -------------- |
+| change | `DropdownOptions` — { label: 选项标签, value: 选项值 } | 选项选中时触发 |
 
 ## Examples
 
 ### Basic
 
-基础用法，提供选项列表：
+基础用法，提供选项列表供用户选择。
 
 ```yaml preview
 brick: ai-portal.dropdown-select
@@ -26,7 +53,7 @@ events:
 
 ### With Search
 
-启用搜索功能：
+启用搜索功能，允许用户通过关键词过滤选项。
 
 ```yaml preview
 brick: ai-portal.dropdown-select
@@ -51,7 +78,7 @@ events:
 
 ### Loading State
 
-加载状态显示：
+展示加载状态，适用于选项数据异步获取的场景。
 
 ```yaml preview
 brick: ai-portal.dropdown-select
@@ -67,13 +94,15 @@ events:
 
 ### Custom Width
 
-自定义标签和下拉框宽度：
+自定义标签和下拉框宽度，适合长文本选项场景。
 
 ```yaml preview
 brick: ai-portal.dropdown-select
 properties:
   labelMaxWidth: "150px"
   dropdownMaxWidth: "300px"
+  dropdownContentStyle:
+    padding: "8px 0"
   options:
     - label: "这是一个很长的选项标签文本"
       value: "long-option"
@@ -89,7 +118,7 @@ events:
 
 ### With Disabled Options
 
-包含禁用选项：
+包含禁用选项的下拉列表。
 
 ```yaml preview
 brick: ai-portal.dropdown-select
@@ -112,7 +141,7 @@ events:
 
 ### Complex Example
 
-综合示例，包含所有功能：
+综合示例，包含搜索、宽度自定义和禁用选项。
 
 ```yaml preview
 brick: ai-portal.dropdown-select

package/docs/dropdown-select.react.md

@@ -0,0 +1,144 @@
+---
+tagName: ai-portal.dropdown-select
+displayName: WrappedAiPortalDropdownSelect
+description: 下拉选择器，提供选项列表供用户选择，支持搜索过滤功能。
+category: interact-basic
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalDropdownSelect
+
+> 下拉选择器，提供选项列表供用户选择，支持搜索过滤功能。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalDropdownSelect } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                 | 类型                  | 必填 | 默认值    | 说明                     |
+| -------------------- | --------------------- | ---- | --------- | ------------------------ |
+| value                | `string`              | 否   | -         | 当前选中项的值           |
+| options              | `DropdownOptions[]`   | 否   | -         | 可选项数据源             |
+| labelMaxWidth        | `string \| number`    | 否   | -         | 触发器标签的最大宽度     |
+| loading              | `boolean`             | 否   | -         | 是否显示加载状态         |
+| searchPlaceholder    | `string`              | 否   | -         | 搜索框的占位文本         |
+| dropdownContentStyle | `React.CSSProperties` | 否   | -         | 下拉内容区域的自定义样式 |
+| dropdownMaxWidth     | `string \| number`    | 否   | `"500px"` | 下拉框的最大宽度         |
+| showSearch           | `boolean`             | 否   | -         | 是否展示搜索框           |
+
+## Events
+
+| 事件     | detail                                                 | 说明           |
+| -------- | ------------------------------------------------------ | -------------- |
+| onChange | `DropdownOptions` — { label: 选项标签, value: 选项值 } | 选项选中时触发 |
+
+## Examples
+
+### Basic
+
+基础用法，提供选项列表供用户选择。
+
+```tsx
+<WrappedAiPortalDropdownSelect
+  value="option1"
+  options={[
+    { label: "选项1", value: "option1" },
+    { label: "选项2", value: "option2" },
+    { label: "选项3", value: "option3" },
+  ]}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### With Search
+
+启用搜索功能，允许用户通过关键词过滤选项。
+
+```tsx
+<WrappedAiPortalDropdownSelect
+  showSearch
+  searchPlaceholder="请输入关键词搜索"
+  options={[
+    { label: "北京市", value: "beijing" },
+    { label: "上海市", value: "shanghai" },
+    { label: "广州市", value: "guangzhou" },
+    { label: "深圳市", value: "shenzhen" },
+    { label: "杭州市", value: "hangzhou" },
+  ]}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### Loading State
+
+展示加载状态，适用于选项数据异步获取的场景。
+
+```tsx
+<WrappedAiPortalDropdownSelect
+  loading
+  options={[{ label: "加载中...", value: "loading" }]}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### Custom Width
+
+自定义标签和下拉框宽度，适合长文本选项场景。
+
+```tsx
+<WrappedAiPortalDropdownSelect
+  labelMaxWidth="150px"
+  dropdownMaxWidth="300px"
+  dropdownContentStyle={{ padding: "8px 0" }}
+  value="long-option"
+  options={[
+    { label: "这是一个很长的选项标签文本", value: "long-option" },
+    { label: "短选项", value: "short" },
+    { label: "中等长度的选项", value: "medium" },
+  ]}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### With Disabled Options
+
+包含禁用选项的下拉列表。
+
+```tsx
+<WrappedAiPortalDropdownSelect
+  options={[
+    { label: "可用选项1", value: "enabled1" },
+    { label: "禁用选项", value: "disabled1", disabled: true },
+    { label: "可用选项2", value: "enabled2" },
+    { label: "禁用选项2", value: "disabled2", disabled: true },
+  ]}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### Complex Example
+
+综合示例，包含搜索、宽度自定义和禁用选项。
+
+```tsx
+<WrappedAiPortalDropdownSelect
+  value="frontend"
+  showSearch
+  searchPlaceholder="搜索技术栈"
+  labelMaxWidth="200px"
+  dropdownMaxWidth="400px"
+  options={[
+    { label: "前端开发 - React", value: "frontend" },
+    { label: "后端开发 - Node.js", value: "backend" },
+    { label: "移动开发 - React Native", value: "mobile" },
+    { label: "数据库 - MongoDB", value: "database" },
+    { label: "DevOps - Docker", value: "devops", disabled: true },
+    { label: "机器学习 - Python", value: "ml" },
+    { label: "云计算 - AWS", value: "cloud" },
+  ]}
+  onChange={(e) => console.log("选择了：", e.detail)}
+/>
+```

package/docs/elevo-card.md

@@ -1,9 +1,38 @@
-构件 `ai-portal.elevo-card`
+---
+tagName: ai-portal.elevo-card
+displayName: WrappedAiPortalElevoCard
+description: Elevo 风格的卡片组件，支持图标或图片头像、标题、描述、操作按钮及底部插槽。
+category: display-component
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.elevo-card
+
+> Elevo 风格的卡片组件，支持图标或图片头像、标题、描述、操作按钮及底部插槽。
+
+## Props
+
+| 属性        | 类型                         | 必填 | 默认值 | 说明                                                   |
+| ----------- | ---------------------------- | ---- | ------ | ------------------------------------------------------ |
+| cardTitle   | `string`                     | 否   | -      | 卡片标题                                               |
+| description | `string`                     | 否   | -      | 卡片描述文字                                           |
+| url         | `string`                     | 否   | -      | 点击卡片跳转的链接地址，设置后卡片呈现可点击样式       |
+| avatar      | `string \| GeneralIconProps` | 否   | -      | 卡片头像，可为图片 URL 或图标配置对象（含 color 字段） |
+| avatarType  | `"icon" \| "image"`          | 否   | -      | 头像类型，`"icon"` 时渲染图标，`"image"` 时渲染图片    |
+
+## Slots
+
+| 名称    | 说明               |
+| ------- | ------------------ |
+| actions | 卡片右上角操作区域 |
+| footer  | 卡片底部操作区域   |
 
 ## Examples
 
 ### Basic
 
+基础卡片，展示标题和描述。
+
 ```yaml preview
 brick: ai-portal.home-container
 children:
@@ -38,3 +67,48 @@ children:
           textContent: Chat
           type: flat
 ```
+
+### With Icon Avatar
+
+使用图标作为头像，并配置主题色。
+
+```yaml preview
+brick: ai-portal.home-container
+children:
+  - brick: ai-portal.elevo-card
+    properties:
+      cardTitle: 运维监控
+      description: 提供系统监控、告警及故障排查标准流程。
+      avatarType: icon
+      avatar:
+        lib: antd
+        icon: monitor
+        color: blue
+      url: "/monitor"
+      style:
+        maxWidth: 400px
+```
+
+### With Image Avatar
+
+使用图片作为头像的卡片。
+
+```yaml preview
+brick: ai-portal.home-container
+children:
+  - brick: ai-portal.elevo-card
+    properties:
+      cardTitle: 数据分析
+      description: 提供数据报表、可视化分析及数据导出功能。
+      avatarType: image
+      avatar: "https://example.com/avatar.png"
+      style:
+        maxWidth: 400px
+    children:
+      - brick: eo-button
+        slot: footer
+        properties:
+          themeVariant: elevo
+          textContent: 进入
+          type: flat
+```

package/docs/elevo-card.react.md

@@ -0,0 +1,104 @@
+---
+tagName: ai-portal.elevo-card
+displayName: WrappedAiPortalElevoCard
+description: Elevo 风格的卡片组件，支持图标或图片头像、标题、描述、操作按钮及底部插槽。
+category: display-component
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalElevoCard
+
+> Elevo 风格的卡片组件，支持图标或图片头像、标题、描述、操作按钮及底部插槽。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalElevoCard } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型                         | 必填 | 默认值 | 说明                                                   |
+| ----------- | ---------------------------- | ---- | ------ | ------------------------------------------------------ |
+| cardTitle   | `string`                     | 否   | -      | 卡片标题                                               |
+| description | `string`                     | 否   | -      | 卡片描述文字                                           |
+| url         | `string`                     | 否   | -      | 点击卡片跳转的链接地址，设置后卡片呈现可点击样式       |
+| avatar      | `string \| GeneralIconProps` | 否   | -      | 卡片头像，可为图片 URL 或图标配置对象（含 color 字段） |
+| avatarType  | `"icon" \| "image"`          | 否   | -      | 头像类型，`"icon"` 时渲染图标，`"image"` 时渲染图片    |
+
+## Slots
+
+| 名称    | 说明               |
+| ------- | ------------------ |
+| actions | 卡片右上角操作区域 |
+| footer  | 卡片底部操作区域   |
+
+## Examples
+
+### Basic
+
+基础卡片，展示标题和描述。
+
+```tsx
+<WrappedAiPortalHomeContainer>
+  <WrappedAiPortalElevoCard
+    cardTitle="HR"
+    description="Provide standard HR workflows. e.g. leave applications, office supply requistion, purchase requistion, etc."
+    style={{ maxWidth: 400 }}
+  >
+    <WrappedEoDropdownActions
+      slot="actions"
+      themeVariant="elevo"
+      actions={[
+        { text: "Edit", event: "edit" },
+        { text: "Delete", event: "delete", danger: true },
+      ]}
+    >
+      <WrappedAiPortalIconButton
+        variant="mini"
+        icon={{ lib: "antd", icon: "setting" }}
+      />
+    </WrappedEoDropdownActions>
+    <WrappedEoButton slot="footer" themeVariant="elevo" type="flat">
+      Chat
+    </WrappedEoButton>
+  </WrappedAiPortalElevoCard>
+</WrappedAiPortalHomeContainer>
+```
+
+### With Icon Avatar
+
+使用图标作为头像，并配置主题色。
+
+```tsx
+<WrappedAiPortalHomeContainer>
+  <WrappedAiPortalElevoCard
+    cardTitle="运维监控"
+    description="提供系统监控、告警及故障排查标准流程。"
+    avatarType="icon"
+    avatar={{ lib: "antd", icon: "monitor", color: "blue" }}
+    url="/monitor"
+    style={{ maxWidth: 400 }}
+  />
+</WrappedAiPortalHomeContainer>
+```
+
+### With Image Avatar
+
+使用图片作为头像的卡片。
+
+```tsx
+<WrappedAiPortalHomeContainer>
+  <WrappedAiPortalElevoCard
+    cardTitle="数据分析"
+    description="提供数据报表、可视化分析及数据导出功能。"
+    avatarType="image"
+    avatar="https://example.com/avatar.png"
+    style={{ maxWidth: 400 }}
+  >
+    <WrappedEoButton slot="footer" themeVariant="elevo" type="flat">
+      进入
+    </WrappedEoButton>
+  </WrappedAiPortalElevoCard>
+</WrappedAiPortalHomeContainer>
+```

package/docs/elevo-logo.md

@@ -1,9 +1,21 @@
-构件 `ai-portal.elevo-logo`
+---
+tagName: ai-portal.elevo-logo
+displayName: WrappedAiPortalElevoLogo
+description: Elevo 品牌 Logo 图片组件，固定展示 Elevo logo（95×28px）。
+category: display-component
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.elevo-logo
+
+> Elevo 品牌 Logo 图片组件，固定展示 Elevo logo（95×28px）。
 
 ## Examples
 
 ### Basic
 
+展示 Elevo 品牌 Logo。
+
 ```yaml preview
 brick: ai-portal.elevo-logo
 ```

package/docs/elevo-logo.react.md

@@ -0,0 +1,27 @@
+---
+tagName: ai-portal.elevo-logo
+displayName: WrappedAiPortalElevoLogo
+description: Elevo 品牌 Logo 图片组件，固定展示 Elevo logo（95×28px）。
+category: display-component
+source: "@next-bricks/ai-portal"
+---
+
+# WrappedAiPortalElevoLogo
+
+> Elevo 品牌 Logo 图片组件，固定展示 Elevo logo（95×28px）。
+
+## 导入
+
+```tsx
+import { WrappedAiPortalElevoLogo } from "@easyops/wrapped-components";
+```
+
+## Examples
+
+### Basic
+
+展示 Elevo 品牌 Logo。
+
+```tsx
+<WrappedAiPortalElevoLogo />
+```

package/docs/elevo-sidebar.md

@@ -1,9 +1,158 @@
-构件 `ai-portal.elevo-sidebar`
+---
+tagName: ai-portal.elevo-sidebar
+displayName: WrappedAiPortalElevoSidebar
+description: Elevo AI 侧边栏，包含 Logo 导航、新建对话、历史记录、项目列表及个人账户操作，支持折叠和抽屉两种行为模式。
+category: layout-component
+source: "@next-bricks/ai-portal"
+---
+
+# ai-portal.elevo-sidebar
+
+> Elevo AI 侧边栏，包含 Logo 导航、新建对话、历史记录、项目列表及个人账户操作，支持折叠和抽屉两种行为模式。
+
+## 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                                                                                                                         | 说明                                              |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- |
+| logout                | `void`                                                                                                                         | 点击退出登录时触发                                |
+| action.click          | `ActionClickDetail` — { action: 点击的操作项（含 project 等扩展字段）, item: 当前对话历史记录项, project: 关联的项目（可选） } | 点击对话历史操作按钮时触发                        |
+| project.action.click  | `ProjectActionClickDetail` — { action: 点击的操作项, project: 当前项目对象 }                                                   | 点击项目操作按钮时触发                            |
+| add.project           | `void`                                                                                                                         | 点击新建项目按钮时触发                            |
+| add.serviceflow       | `void`                                                                                                                         | 点击新建服务流按钮时触发（scope 为 space 时有效） |
+| personal.action.click | `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
 
+基础用法，展示默认侧边栏。
+
+```yaml preview
+brick: ai-portal.elevo-sidebar
+properties:
+  userInstanceId: "user-001"
+  logoUrl: "/"
+  newChatUrl: "/chat/new"
+  historyUrlTemplate: "/chat/{{conversationId}}"
+events:
+  logout:
+    action: "console.log"
+```
+
+### With Projects
+
+启用项目列表，并配置项目操作按钮。
+
+```yaml preview
+brick: ai-portal.elevo-sidebar
+properties:
+  userInstanceId: "user-001"
+  logoUrl: "/"
+  newChatUrl: "/chat/new"
+  historyUrlTemplate: "/chat/{{conversationId}}"
+  showProjects: true
+  canAddProject: true
+  projectUrlTemplate: "/project/{{instanceId}}"
+  projectActions:
+    - key: delete
+      text: 删除
+      icon:
+        lib: antd
+        icon: delete
+      danger: true
+events:
+  logout:
+    action: "console.log"
+  add.project:
+    action: "console.log"
+  project.action.click:
+    action: "console.log"
+```
+
+### Drawer Mode
+
+抽屉模式下，点击折叠按钮后侧边栏以覆盖层形式展开。
+
+```yaml preview
+brick: ai-portal.elevo-sidebar
+properties:
+  userInstanceId: "user-001"
+  behavior: drawer
+  logoUrl: "/"
+  newChatUrl: "/chat/new"
+  historyUrlTemplate: "/chat/{{conversationId}}"
+events:
+  logout:
+    action: "console.log"
+```
+
+### With Custom Links and Personal Actions
+
+配置顶部自定义链接和个人账户自定义操作。
+
 ```yaml preview
 brick: ai-portal.elevo-sidebar
+properties:
+  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
+events:
+  personal.action.click:
+    action: "console.log"
+  action.click:
+    action: "console.log"
 ```