# relation-tree LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/relation-tree` 的使用方式。

## 模块定位

左侧Tag+线占用宽度

## 导入方式

```ts
import { RelationTree } from '@flatbiz/antd/relation-tree';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `RelationGroupList`
- `RelationGroupListProps`
- `RelationItem`
- `RelationItemProps`
- `Relation`
- `* from ./relation-tree.jsx`
- `* from ./type.js`
- `RelationTree`
- `RelationProps`
- `RelationTreeProps`
- `TRelationTreeCustomData`
- `TRelationTreeRelationItem`
- `TRelationTreeData`
- `TRelationTreeOperate`
- `deleteLoop`
- `filterSurplusData`

## 依赖的 antd 能力

`Empty`、`Form`、`Tag`

## Props / 配置要点

### RelationGroupListProps

- `children`（必填）：: ReactElement | ReactElement[] | null
- `className`（可选）：: string

### RelationItemProps

- `children`（必填）：: ReactElement | null | Array<ReactElement | null>
- `className`（可选）：: string
- `style`（可选）：: CSSProperties
- `isFirst`（可选）：: boolean
- `isLast`（可选）：: boolean
- `onlyOne`（可选）：: boolean

### RelationItemRenderProps

- `relationItem`（必填）：: TRelationTreeRelationItem
- `index`（必填）：: number
- `onlyOne`（可选）：: boolean

### RelationProps

- `tagLineWidth`（可选）：: number；左侧Tag+线占用宽度
- `indentWidth`（可选）：: number；缩进宽度，配合【RelationGroup】使用
- `tagName`（可选）：: string；连接线上Tag文案
- `tagColor`（可选）：: string；连接线上Tag颜色
- `tagWidth`（可选）：: number；连接线上Tag宽度
- `onTagClick`（可选）：: (tagName?: string) => void；连接线上Tag点击事件
- `lineColor`（可选）：: string；连接线颜色
- `solt1`（必填）：: () => ReactElement
- `solt2`（可选）：: () => ReactElement | null
- `className`（可选）：: string
- `onlyOne`（可选）：: boolean
- `onlyNoMainOne`（可选）：: boolean
- `label`（可选）：: string

### RelationTreeProps

- `className`（可选）：: string
- `dataSource`（可选）：: TRelationTreeData
- `children`（可选）：: ( data: TRelationTreeCustomData, operate: TRelationTreeOperate, extraData?: TPlainObject ) => ReactElement
- `onChange`（可选）：: (dataSource?: TRelationTreeData) => void
- `relationProps`（可选）：: Pick< RelationProps, 'tagLineWidth' | 'indentWidth' | 'tagColor' | 'tagWidth' | 'lineColor' >
- `onTagClick`（可选）：: (uid: string, extraData?: TPlainObject) => void

### TRelationTreeCustomData

- `uid`（必填）：: string

### TRelationTreeRelationItem

- `uid`（必填）：: string
- `customData`（可选）：: TRelationTreeCustomData
- `children`（可选）：: TRelationTreeData[]
- `extraData`（可选）：: TPlainObject

### TRelationTreeData

- `uid`（必填）：: string
- `tagName`（必填）：: string
- `label`（可选）：: string
- `relationList`（必填）：: TRelationTreeRelationItem[]
- `extraData`（可选）：: TPlainObject

## 使用规则与行为

- 左侧Tag+线占用宽度
- 缩进宽度，配合【RelationGroup】使用
- 连接线上Tag文案
- 连接线上Tag颜色
- 连接线上Tag宽度
- 连接线上Tag点击事件
- 连接线颜色

## 基础示例

```tsx
import { RelationTree, type RelationGroupListProps } from '@flatbiz/antd/relation-tree';

const props: RelationGroupListProps = {
  // 按业务传入必要参数
};

<RelationTree {...props} />;
```

## 源码索引

- `src/relation-tree/compts/relation-group-list.tsx`
- `src/relation-tree/compts/relation-item.tsx`
- `src/relation-tree/compts/relation.tsx`
- `src/relation-tree/index.ts`
- `src/relation-tree/relation-tree.tsx`
- `src/relation-tree/type.ts`
- `src/relation-tree/utils.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/relation-tree` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。