diff --git a/docs/component/thought-chain.md b/docs/component/thought-chain.md index 331bf1e1..d90260e8 100644 --- a/docs/component/thought-chain.md +++ b/docs/component/thought-chain.md @@ -54,7 +54,15 @@ thought-chain/customization :::demo ThoughtChain 组件支持嵌套使用 -thought-chain/nested +thought-chain/nested + +::: + +### tooltip 提示 + +:::demo 配置 `tooltip` 可开启对思维链节点内容区域的 tooltip 提示功能 + +thought-chain/tooltip ::: @@ -86,6 +94,7 @@ thought-chain/nested | key | 思维节点唯一标识符 | string | - | - | | status | 思维节点状态 | 'pending' \| 'success' \| 'error' | - | - | | title | 思维节点标题 | VNode \| string | - | - | +| tooltip | 思维节点 tooltip | boolean \| TooltipConfig | - | - | ### CollapsibleOptions @@ -94,6 +103,13 @@ thought-chain/nested | expandedKeys | 当前展开的节点 | string[] | - | - | | onExpand | 展开节点变化的回调函数 | (expandedKeys: string[]) => void | - | - | +### TooltipConfig + +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| ------------------ | ------------------- | ------------ | ------ | ---- | +| titleConfig | 标题 Tooltip 配置 | [TooltipProps](https://www.antdv.com/components/tooltip-cn#api) | - | - | +| descriptionConfig | 副标题 Tooltip 配置 | [TooltipProps](https://www.antdv.com/components/tooltip-cn#api) | - | - | + ## Semantic DOM diff --git a/docs/examples-setup/thought-chain/tooltip.vue b/docs/examples-setup/thought-chain/tooltip.vue new file mode 100644 index 00000000..1ccb6440 --- /dev/null +++ b/docs/examples-setup/thought-chain/tooltip.vue @@ -0,0 +1,46 @@ + + diff --git a/docs/examples/thought-chain/tooltip.vue b/docs/examples/thought-chain/tooltip.vue new file mode 100644 index 00000000..cf645190 --- /dev/null +++ b/docs/examples/thought-chain/tooltip.vue @@ -0,0 +1,48 @@ + diff --git a/play/src/App.vue b/play/src/App.vue index f421bf15..1ccb6440 100644 --- a/play/src/App.vue +++ b/play/src/App.vue @@ -1,11 +1,46 @@ +import { h } from 'vue'; +import { MoreOutlined } from '@ant-design/icons-vue'; +import { Button, Card } from 'ant-design-vue'; +import { ThoughtChain, type ThoughtChainProps } from 'ant-design-x-vue'; + +defineOptions({ name: 'AXThoughtChainBasic' }); +const items: ThoughtChainProps['items'] = [ + { + title: '显示 tooltip', + description: 'description', + extra: h(Button, { type: 'text', icon: h(MoreOutlined) }), + tooltip: true, + }, + { + title: 'Thought Chain Item Title', + description: 'description', + extra: h(Button, { type: 'text', icon: h(MoreOutlined) }), + tooltip: { + titleConfig: { + title: '自定义 Tooltip 标题', + }, + descriptionConfig: { + title: '自定义 Tooltip 副标题', + }, + }, + }, + { + title: '配置不显示 description', + description: 'description', + extra: h(Button, { type: 'text', icon: h(MoreOutlined) }), + tooltip: { + descriptionConfig: { + open: false, + title: '配置不显示 description ', + }, + }, + }, +]; + - - diff --git a/src/thought-chain/interface.ts b/src/thought-chain/interface.ts index 44a4692e..ab9a29ab 100644 --- a/src/thought-chain/interface.ts +++ b/src/thought-chain/interface.ts @@ -1,6 +1,6 @@ -import type { CSSProperties, HTMLAttributes, VNode } from "vue"; -import type { Collapsible } from "./hooks/useCollapsible"; -import type { ConfigProviderProps } from "ant-design-vue"; +import type { ConfigProviderProps, TooltipProps } from 'ant-design-vue'; +import type { CSSProperties, HTMLAttributes, VNode } from 'vue'; +import type { Collapsible } from './hooks/useCollapsible'; export enum THOUGHT_CHAIN_ITEM_STATUS { /** @@ -17,6 +17,20 @@ export enum THOUGHT_CHAIN_ITEM_STATUS { ERROR = 'error', } +export interface TooltipConfig { + /** + * @desc Title tooltip 配置 + * @descEN Title tooltip configuration + */ + titleConfig?: TooltipProps; + + /** + * @desc Description tooltip 配置 + * @descEN Description tooltip configuration + */ + descriptionConfig?: TooltipProps; +} + export interface ThoughtChainItem { /** * @desc 思维节点唯一标识符 @@ -65,6 +79,8 @@ export interface ThoughtChainItem { * @descEN Thought chain item status */ status?: `${THOUGHT_CHAIN_ITEM_STATUS}`; + + tooltip?: boolean | TooltipConfig; } export type SemanticType = 'item' | 'itemHeader' | 'itemContent' | 'itemFooter'; diff --git a/src/thought-chain/item.vue b/src/thought-chain/item.vue index 486814df..84821095 100644 --- a/src/thought-chain/item.vue +++ b/src/thought-chain/item.vue @@ -1,12 +1,12 @@ diff --git a/src/thought-chain/style/index.ts b/src/thought-chain/style/index.ts index 6b7ed64e..7b944bec 100644 --- a/src/thought-chain/style/index.ts +++ b/src/thought-chain/style/index.ts @@ -197,6 +197,9 @@ const genThoughtChainItemStyle: GenerateThoughtChainItemStyle = (token) => { lineHeight: `${unit(token.itemSize)}`, maxHeight: token.itemSize, fontSize: token.itemFontSize, + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', [`& ${itemCls}-collapse-icon`]: { marginInlineEnd: token.marginXS, @@ -204,6 +207,9 @@ const genThoughtChainItemStyle: GenerateThoughtChainItemStyle = (token) => { }, [`& ${itemCls}-desc`]: { fontSize: token.itemFontSize, + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', }, }, },