fix(thought-chain): Fixed thought chain component ellipsis not taking effect.

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
 
 <!-- <code src="./demo/_semantic.tsx" simplify="true"></code> -->

docs/examples-setup/thought-chain/tooltip.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+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 ',
+      },
+    },
+  },
+];
+</script>
+<template>
+  <Card style="width: 250px">
+    <ThoughtChain :items="items" />
+  </Card>
+</template>

docs/examples/thought-chain/tooltip.vue

@@ -0,0 +1,48 @@
+<script setup lang="tsx">
+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: <Button type="text" icon={<MoreOutlined />} />,
+    tooltip: true,
+  },
+  {
+    title: 'Thought Chain Item Title',
+    description: 'description',
+    extra: <Button type="text" icon={<MoreOutlined />} />,
+    tooltip: {
+      titleConfig: {
+        title: '自定义 Tooltip 标题',
+      },
+      descriptionConfig: {
+        title: '自定义 Tooltip 副标题',
+      },
+    },
+  },
+  {
+    title: '配置不显示 description',
+    description: 'description',
+    extra: <Button type="text" icon={<MoreOutlined />} />,
+    tooltip: {
+      descriptionConfig: {
+        open: false,
+        title: '配置不显示 description ',
+      },
+    },
+  },
+];
+
+defineRender(() => {
+  return (
+    <Card style={{ width: '250px' }}>
+      <ThoughtChain items={items} />
+    </Card>
+  );
+});
+</script>

play/src/App.vue

@@ -1,11 +1,46 @@
 <script setup lang="ts">
-import {Bubble} from "ant-design-x-vue";
-</script>
+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 ',
+      },
+    },
+  },
+];
+</script>
 <template>
-  <Bubble content="hello world" />
+  <Card style="width: 250px">
+    <ThoughtChain :items="items" />
+  </Card>
 </template>
-
-<style scoped>
-
-</style>

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';

src/thought-chain/item.vue

@@ -1,12 +1,12 @@
 <script setup lang="tsx">
 import classnames from 'classnames';
-import { computed, toRefs, useId } from 'vue';
+import { computed, useId } from 'vue';
 import pickAttrs from '../_util/pick-attrs';
 import type { ThoughtChainNodeProps } from './interface';
 import { useThoughtChainNodeContextInject } from './context';
-import { Avatar, Typography } from 'ant-design-vue';
+import { Avatar, Typography, Tooltip, type TooltipProps } from 'ant-design-vue';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
-import { TransitionCollapse } from '../transition-collapse'
+import { TransitionCollapse } from '../transition-collapse';
 
 defineOptions({ name: 'AXThoughtChainNode' });
 
@@ -39,6 +39,36 @@ const content = computed(() => info.content);
 const footer = computed(() => info.footer);
 const status = computed(() => info.status);
 const description = computed(() => info.description);
+const tooltip = computed(() => {
+  const tooltipConfig = info.tooltip ?? true;
+  const placement = direction.value === 'rtl' ? 'topRight' : 'topLeft';
+  const titleConfig: TooltipProps = {
+    title: title.value,
+    placement,
+  };
+  const descriptionConfig: TooltipProps = {
+    title: description.value,
+    placement,
+  };
+
+  if (typeof tooltipConfig === 'boolean') {
+    return { titleConfig, descriptionConfig };
+  }
+
+  return {
+    titleConfig: {
+      ...titleConfig,
+      ...(tooltipConfig.titleConfig ? tooltipConfig.titleConfig : {}),
+    },
+    descriptionConfig: {
+      ...descriptionConfig,
+      ...(tooltipConfig.descriptionConfig
+        ? tooltipConfig.descriptionConfig
+        : {}),
+    },
+  };
+});
+const hideTooltip = computed(() => !info.tooltip);
 
 // ============================ Style ============================
 const itemCls = computed(() => `${prefixCls.value}-item`);
@@ -80,9 +110,6 @@ defineRender(() => {
           {/* Title */}
           <Typography.Text
             strong
-            ellipsis={{
-              tooltip: { placement: direction.value === 'rtl' ? 'topRight' : 'topLeft', title: title.value },
-            }}
             // @ts-expect-error
             class={`${itemCls.value}-title`}
           >
@@ -99,22 +126,26 @@ defineRender(() => {
                   rotate={contentOpen.value ? 90 : 0}
                 />
               ))}
-            {title.value}
+            {hideTooltip.value ? (
+              title.value
+            ) : (
+              <Tooltip {...tooltip.value.titleConfig}>{title.value}</Tooltip>
+            )}
           </Typography.Text>
           {/* Description */}
           {description.value && (
             <Typography.Text
               // @ts-expect-error
               class={`${itemCls.value}-desc`}
-              ellipsis={{
-                tooltip: {
-                  placement: direction.value === 'rtl' ? 'topRight' : 'topLeft',
-                  title: description.value,
-                },
-              }}
               type="secondary"
             >
-              {description.value}
+              {hideTooltip.value ? (
+                description.value
+              ) : (
+                <Tooltip {...tooltip.value.descriptionConfig}>
+                  {description.value}
+                </Tooltip>
+              )}
             </Typography.Text>
           )}
         </div>
@@ -123,22 +154,21 @@ defineRender(() => {
       </div>
       {/* Content */}
 
-    <TransitionCollapse prefixCls={prefixCls.value}>
-      {content.value && (
-        <div
-          v-show={contentVisible.value}
-          class={classnames(`${itemCls.value}-content`)}
-        >
+      <TransitionCollapse prefixCls={prefixCls.value}>
+        {content.value && (
           <div
-            class={classnames(`${itemCls.value}-content-box`, classNames.value.itemContent)}
-            style={styles.value.itemContent}
+            v-show={contentVisible.value}
+            class={classnames(`${itemCls.value}-content`)}
           >
-            {content.value}
+            <div
+              class={classnames(`${itemCls.value}-content-box`, classNames.value.itemContent)}
+              style={styles.value.itemContent}
+            >
+              {content.value}
+            </div>
           </div>
-        </div>
-      )}
-    </TransitionCollapse>
-
+        )}
+      </TransitionCollapse>
 
       {/* Footer */}
       {footer.value && (
@@ -150,6 +180,6 @@ defineRender(() => {
         </div>
       )}
     </div>
-  )
+  );
 });
 </script>

src/thought-chain/style/index.ts

@@ -197,13 +197,19 @@ 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,
             },
           },
           [`& ${itemCls}-desc`]: {
             fontSize: token.itemFontSize,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
           },
         },
       },