cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
246 lines (211 loc) • 27.5 kB
Markdown
## 简介
结构树也可简称为树，常用于表现树状信息结构的场景，分支可以展开或折叠，也可以提供单选、多选、异步加载等复杂功能。
## 示例
```tsx
import React from 'react';
import { Tree } from '@alicloud/console-components';
const TreeNode = Tree.Node;
const contentStyle = {
display: 'grid',
gridTemplateColumns: 'repeat(2, 1fr)',
gap: 36,
};
export default () => {
return (
<div style={contentStyle}>
<Tree defaultSelectedKeys={['14']} defaultExpandedKeys={['7', '11']}>
<TreeNode label="默认项" key="0">
<TreeNode label="默认项" key="1" />
</TreeNode>
</Tree>
<Tree defaultSelectedKeys={['14']} defaultExpandedKeys={['0']}>
<TreeNode label="默认项" key="0">
<TreeNode label="默认项" key="1" />
</TreeNode>
</Tree>
<Tree defaultSelectedKeys={['0']}>
<TreeNode label="聚焦项" key="0">
<TreeNode label="默认项" key="1" />
</TreeNode>
</Tree>
<Tree defaultSelectedKeys={['0']} defaultExpandedKeys={['0']}>
<TreeNode label="聚焦项" key="0">
<TreeNode label="默认项" key="1" />
</TreeNode>
</Tree>
<Tree defaultSelectedKeys={['14']}>
<TreeNode label="禁用项" key="0" disabled>
<TreeNode label="默认项" key="1" />
</TreeNode>
</Tree>
<Tree defaultSelectedKeys={['14']} defaultExpandedKeys={['0']}>
<TreeNode label="禁用项" key="0" disabled>
<TreeNode label="默认项" key="1" />
</TreeNode>
</Tree>
</div>
);
};
export const meta = {
title: '默认',
describe: '分支节点形态。',
};
```
```tsx
import React from 'react';
import { Tree } from '@alicloud/console-components';
const TreeNode = Tree.Node;
export default () => {
return (
<Tree defaultSelectedKeys={['14']} defaultExpandedKeys={['0', '7', '11']}>
<TreeNode label="默认项" key="0">
<TreeNode label="默认项" key="1">
<TreeNode label="默认项" key="4" />
<TreeNode label="默认项" key="5" />
</TreeNode>
<TreeNode label="聚焦项" key="2">
<TreeNode label="默认项" key="6">
<TreeNode label="默认项" key="10" />
</TreeNode>
<TreeNode label="默认项" key="7">
<TreeNode label="默认项" key="11">
<TreeNode label="默认项" key="15" />
</TreeNode>
<TreeNode label="默认项" key="12" />
<TreeNode label="聚焦项" key="13" />
<TreeNode label="选中项" key="14" />
</TreeNode>
</TreeNode>
<TreeNode label="禁用项" key="3" disabled>
<TreeNode label="叶子" key="8" />
<TreeNode label="叶子" key="9" />
</TreeNode>
</TreeNode>
</Tree>
);
};
export const meta = {
title: '基本树结构',
describe:
'通过 defaultSelectedKeys 属性设置默认选中项，通过 defaultExpandedKeys 属性设置默认展开项。',
};
```
```tsx
import React from 'react';
import { Tree } from '@alicloud/console-components';
const TreeNode = Tree.Node;
export default () => {
return (
<Tree
showLine
defaultSelectedKeys={['14']}
defaultExpandedKeys={['0', '7', '11']}
>
<TreeNode label="默认项" key="0">
<TreeNode label="默认项" key="1">
<TreeNode label="默认项" key="4" />
<TreeNode label="默认项" key="5" />
</TreeNode>
<TreeNode label="聚焦项" key="2">
<TreeNode label="默认项" key="6">
<TreeNode label="默认项" key="10" />
</TreeNode>
<TreeNode label="默认项" key="7">
<TreeNode label="默认项" key="11">
<TreeNode label="默认项" key="15" />
</TreeNode>
<TreeNode label="默认项" key="12" />
<TreeNode label="聚焦项" key="13" />
<TreeNode label="选中项" key="14" />
</TreeNode>
</TreeNode>
<TreeNode label="禁用项" key="3" disabled>
<TreeNode label="叶子" key="8" />
<TreeNode label="叶子" key="9" />
</TreeNode>
</TreeNode>
</Tree>
);
};
export const meta = {
title: '线型树结构',
describe: '通过 showLine 属性设置为线性结构。',
};
```
```tsx
```
## API
### Tree
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------- | -------- |
| children | 树节点 | React.ReactNode | - | | - |
| dataSource | 数据源，该属性优先级高于 children | TreeDataType\[] | - | | - |
| showLine | 是否显示树的线 | boolean | false | | - |
| selectable | 是否支持选中节点 | boolean | false | | - |
| selectedKeys | （用于受控）当前选中节点 key 的数组 | string\[] | - | | - |
| defaultSelectedKeys | （用于非受控）默认选中节点 key 的数组 | string\[] | \[] | | - |
| onSelect | 选中或取消选中节点时触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*selectedKeys*: 选中节点key的数组<br/>*extra*: 额外参数<br/>**返回值**:<br/>空 | (<br/> selectedKeys: string\[],<br/> extra: {<br/> selectedNodes: Array\<NodeInstance>;<br/> node: NodeInstance;<br/> selected: boolean;<br/> event: React.KeyboardEvent | React.MouseEvent;<br/> }<br/> ) => void | () => {} | | - |
| multiple | 是否支持多选 | boolean | false | | - |
| checkable | 是否支持勾选节点的复选框 | boolean | false | | - |
| checkedKeys | （用于受控）当前勾选复选框节点 key 的数组或 `{checked: Array, indeterminate: Array}` 的对象 | | {<br/> checked: string\[];<br/> indeterminate: string\[];<br/> }<br/> | string\[] | - | | - |
| defaultCheckedKeys | （用于非受控）默认勾选复选框节点 key 的数组 | | {<br/> checked: string\[];<br/> indeterminate: string\[];<br/> }<br/> | string\[] | \[] | | - |
| checkStrictly | 勾选节点复选框是否完全受控（父子节点选中状态不再关联） | boolean | false | | - |
| checkedStrategy | 定义选中时回填的方式 | 'all' | 'parent' | 'child' | 'all' | | - |
| onCheck | 勾选或取消勾选复选框时触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*checkedKeys*: 勾选复选框节点key的数组<br/>*extra*: 额外参数<br/>**返回值**:<br/>空 | (<br/> checkedKeys: string\[],<br/> extra: {<br/> checkedNodes: Array\<NodeInstance>;<br/> checkedNodesPositions: Array\<NodeInstance>;<br/> indeterminateKeys: string\[];<br/> node: NodeInstance;<br/> checked: boolean;<br/> key: Key;<br/> }<br/> ) => void | () => {} | | - |
| expandedKeys | （用于受控）当前展开的节点 key 的数组 | string\[] | - | | - |
| defaultExpandedKeys | （用于非受控）默认展开的节点 key 的数组 | string\[] | \[] | | - |
| defaultExpandAll | 是否默认展开所有节点 | boolean | false | | - |
| autoExpandParent | 是否自动展开父节点 | boolean | true | | - |
| onExpand | 展开或收起节点时触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*expandedKeys*: 展开节点key的数组<br/>*extra*: 额外参数<br/>**返回值**:<br/>空 | (<br/> expandedKeys: string\[],<br/> extra: {<br/> node: NodeInstance;<br/> expanded: boolean;<br/> }<br/> ) => void | () => {} | | - |
| editable | 是否支持编辑节点内容 | boolean | false | | - |
| onEditFinish | 编辑节点内容完成时触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*key*: 编辑节点 key<br/>*label*: 编辑节点完成时节点的文本<br/>*node*: 当前编辑的节点<br/>**返回值**:<br/>空 | (key: Key, label: string, node: NodeInstance) => void | () => {} | | - |
| draggable | 是否支持拖拽节点 | boolean | false | | - |
| onDragStart | 开始拖拽节点时触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*info*: 额外参数<br/>**返回值**:<br/>空 | (info: {<br/> event: React.MouseEvent;<br/> node: NodeInstance;<br/> expandedKeys: string\[];<br/> }) => void | () => {} | | - |
| onDragEnter | 拖拽节点进入目标节点时触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*info*: 额外参数<br/>**返回值**:<br/>空 | (info: {<br/> event: React.MouseEvent;<br/> node: NodeInstance;<br/> expandedKeys: Array\<string>;<br/> }) => void | () => {} | | - |
| onDragOver | 拖拽节点在目标节点上移动的时候触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*info*: 额外参数<br/>**返回值**:<br/>空 | (info: { event: React.MouseEvent; node: NodeInstance }) => void | () => {} | | - |
| onDragLeave | 拖拽节点离开目标节点时触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*info*: 额外参数<br/>**返回值**:<br/>空 | (info: { event: React.MouseEvent; node: NodeInstance }) => void | () => {} | | - |
| onDragEnd | 拖拽节点拖拽结束时触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*info*: 额外参数<br/>**返回值**:<br/>空 | (info: { event: React.MouseEvent; node: NodeInstance }) => void | () => {} | | - |
| onDrop | 拖拽节点放入目标节点内或前后触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*info*: 额外参数<br/>**返回值**:<br/>空 | (info: {<br/> event: React.MouseEvent;<br/> node: NodeInstance;<br/> dragNode: NodeInstance;<br/> dragNodesKeys: Array\<string>;<br/> dropPosition: number;<br/> }) => void | () => {} | | - |
| canDrop | 节点是否可被作为拖拽的目标节点<br/><br/>**签名**:<br/>**参数**:<br/>*info*: 额外参数<br/>**返回值**:<br/>是否可以被当作目标节点 | (info: {<br/> event?: React.MouseEvent;<br/> node: NodeInstance;<br/> dragNode: NodeInstance;<br/> dragNodesKeys: Array\<string>;<br/> dropPosition: number;<br/> }) => boolean | () => {} | | - |
| loadData | 异步加载数据的函数<br/><br/>**签名**:<br/>**参数**:<br/>*node*: 被点击展开的节点 | (node: NodeInstance) => Promise\<unknown> | - | | - |
| filterTreeNode | 按需筛选高亮节点<br/><br/>**签名**:<br/>**参数**:<br/>*node*: 待筛选的节点<br/>**返回值**:<br/>是否被筛选中 | (node: NodeInstance) => boolean | - | | - |
| onRightClick | 右键点击节点时触发的回调函数<br/><br/>**签名**:<br/>**参数**:<br/>*info*: 额外参数<br/>**返回值**:<br/>空 | (info: { event: React.MouseEvent; node: NodeInstance }) => void | () => {} | | - |
| isLabelBlock | 设置节点是否占满剩余空间，一般用于统一在各节点右侧添加元素(借助 flex 实现，暂时只支持 ie10+) | boolean | false | | - |
| isNodeBlock | 设置节点是否占满一行 | boolean | Record\<string, unknown> | false | | - |
| animation | 是否开启展开收起动画 | boolean | true | | - |
| focusedKey | 当前获得焦点的子菜单或菜单项 key 值 | Key | - | | - |
| renderChildNodes | 渲染子节点<br/><br/>**签名**:<br/>**参数**:<br/>*nodes*: 所有的子节点<br/>**返回值**:<br/>子节点 | (nodes: NodeElement\[]) => React.ReactNode | - | | - |
| labelRender | 渲染单个子节点<br/><br/>**签名**:<br/>**参数**:<br/>*node*: 节点数据<br/>**返回值**:<br/>返回节点 | (node: Record\<string, unknown>) => React.ReactNode | - | | 1.25 |
| immutable | 是否是不可变数据 | boolean | false | | 1.23 |
| useVirtual | 是否开启虚拟滚动 | boolean | false | | - |
### Tree.Node
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ---------------- | ---------------------------------------------- | --------------- | ------ | -------- |
| children | 树节点 | React.ReactNode | - | |
| label | 节点文本内容 | React.ReactNode | '-- | |
| selectable | 单独设置是否支持选中，覆盖 Tree 的 selectable | boolean | - | |
| checkable | 单独设置是否出现复选框，覆盖 Tree 的 checkable | boolean | - | |
| editable | 单独设置是否支持编辑，覆盖 Tree 的 editable | boolean | - | |
| draggable | 单独设置是否支持拖拽，覆盖 Tree 的 draggable | boolean | - | |
| disabled | 是否禁止节点响应 | boolean | false | |
| checkboxDisabled | 是否禁止勾选节点复选框 | boolean | false | |
| isLeaf | 是否是叶子节点，设置loadData时生效 | boolean | - | |
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```