奥集能文档中心

Appearance

自定义组件 ​

Index ​

功能概述 ​

  • 表格数据展示 ：以表格形式展示数据列表，支持分页、斑马纹样式等。
  • 动态列渲染 ：根据配置的 columns 和 operation，动态渲染表格列，包括操作列。
  • 卡片与表格切换 ：支持在卡片视图和表格视图之间切换，提供了 defaultPageType 和 showChangeBtn 配置选项。
  • 操作按钮定义 ：允许定义操作按钮，支持展开和折叠两种展示方式。
  • 分页处理 ：支持分页功能，可以根据数据源或请求接口来获取数据。
  • 父级高度监听 ：监听父级容器的高度，自动调整表格高度。

组件特性 ​

  • 高度自适应 ：通过监听父级容器的高度，自动调整表格高度，确保在不同屏幕尺寸下都能良好展示。
  • 灵活配置 ：提供了丰富的配置选项，如 dataSource、columns、rowKey 等，以满足不同的业务需求。
  • 操作按钮支持 ：支持定义操作按钮，方便对表格数据进行操作，如编辑、删除等。
  • 斑马纹样式 ：支持斑马纹样式，提高数据的可读性。

代码结构 ​

组件定义 ​

  • 定义了 Index 组件，接收 PageType<T> 类型的配置选项。
  • 使用 useState 定义了 defaultHeight 状态变量，用于管理表格的高度。
  • 使用 useEffect 监听父级容器的高度变化，并更新表格高度。
  • 使用 useMemo 定义了 resetColumns 和 renderTable，分别用于动态渲染表格列和表格主体。

方法定义 ​

  • resetColumns：根据配置的 columns 和 operation，动态生成表格列，包括操作列。
  • renderTable：渲染表格主体，根据配置选项生成 ProTable 组件，并处理分页、数据源等逻辑。

使用示例 ​

以下是使用该表格组件的示例代码：

tsx
import React from 'react';
import TableComponent from '@/path/to/TableComponent';

interface DataType {
  id: number;
  name: string;
  age: number;
  address: string;
}

const data: DataType[] = [
  { id: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { id: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { id: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
];

const columns: ProColumns<DataType>[] = [
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
];

const operation = (record: DataType) => [
  { key: '1', label: 'Edit', onClick: () => console.log(`Edit ${record.name}`) },
  { key: '2', label: 'Delete', onClick: () => console.log(`Delete ${record.name}`) },
];

const MyTable: React.FC = () => {
  return (
    <TableComponent
      dataSource={data}
      rowKey="id"
      columns={columns}
      operation={operation}
      showChangeBtn={true}
      defaultPageType="table"
    />
  );
};

export default MyTable;

关键点总结 ​

  • 动态列渲染 ：通过 resetColumns 动态生成表格列，包括操作列。
  • 高度自适应 ：通过 useEffect 监听父级容器的高度变化，并更新表格高度。
  • 操作按钮支持 ：通过 operation 定义操作按钮，并支持展开和折叠两种展示方式。
  • 分页处理 ：支持分页功能，可以根据数据源或请求接口来获取数据。

DynamicCode ​

动态验证码组件 DynamicCode，主要用于处理手机号验证和验证码获取与校验的流程。

主要功能 ​

  • 手机号输入 ：显示一个输入框供用户输入手机号，支持设置是否显示手机号输入框（showPhone）和是否可编辑手机号（editPhone）。
  • 验证码获取 ：提供一个按钮供用户获取短信验证码，通过正则表达式验证手机号格式是否正确，然后调用后端接口获取验证码。
  • 验证码校验 ：提供方法供父组件调用以校验用户输入的验证码是否正确。

关键特性 ​

  • 正则表达式验证 ：使用正则表达式验证手机号格式，确保用户输入的手机号符合要求。
  • 后端接口调用 ：通过 orgCtrl.auth.dynamicCode 方法调用后端接口获取验证码。
  • 父组件交互 ：使用 useImperativeHandle 暴露 verifyCode 方法给父组件，以便父组件可以触发验证码校验逻辑。

代码解析 ​

  • 导入依赖 ：导入了 Ant Design 的 Button、Input、message 和 Space 组件，以及 React 的相关 hooks 和 forwardRef 函数。
  • 定义类型 ：定义了 DynamicCodeType 接口，用于描述组件的属性。
  • 组件实现 ：使用 forwardRef 创建组件，以便父组件可以通过 ref 访问组件的方法。
  • 状态管理 ：使用 useState 管理表单数据，包括手机号、验证码和动态 ID。
  • 获取验证码 ：定义了 getDynamicCode 函数，用于获取验证码并更新动态 ID。
  • 校验验证码 ：定义了 verifyCode 函数，用于校验验证码是否正确。
  • 父组件交互 ：使用 useImperativeHandle 暴露 verifyCode 方法给父组件。

使用示例 ​

tsx
<DynamicCode showPhone editPhone={false} account={target.code} ref={DynamicRef} />

在此例子中，DynamicCode 组件用于在注销账户的模态框中显示动态验证码输入区域，并通过引用 DynamicRef 在父组件中调用其 verifyCode 方法来验证验证码是否正确。这样可以确保在用户进行高危操作（如注销账户）时，需要输入正确的验证码来完成操作。

注意事项 ​

  • 手机号格式 ：确保输入的手机号符合正则表达式 /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/。
  • 后端接口 ：需要确保 orgCtrl.auth.dynamicCode 方法正确调用后端接口，并返回验证码数据。
  • 样式调整 ：根据实际需求调整组件的样式，如输入框和按钮的大小等。
  • 安全性 ：在实际应用中，需要确保验证码的获取和校验逻辑具有足够的安全性，防止被恶意利用。

EntityInfo ​

功能概述 ​

  • 实体信息展示 ：以表格形式展示实体的基础信息，包括名称、代码、类型等。
  • 实体信息编辑 ：在有权限的情况下，允许用户编辑实体的名称、代码等信息，提供了表单验证功能，确保必填字段不为空。
  • 动态表单渲染 ：根据实体的类型（如属性、目录等），动态渲染相应的表单字段，如数值型、货币型等。
  • 图标上传 ：允许用户上传或更改实体的图标，提供了图标上传组件 UploadItem。
  • 日期格式化 ：使用 formatZhDate 函数格式化日期信息。

组件特性 ​

  • 通用性 ：适用于多种实体类型（如属性、目录、文件等）的信息展示和编辑。
  • 权限控制 ：根据是否有关系权限（hasRelationAuth），决定是否显示编辑按钮。
  • 表单验证 ：在提交编辑信息前，验证必填字段是否填写，确保数据的完整性。
  • 动态交互 ：通过切换 isEdit 状态，实现查看和编辑模式的切换，提供了良好的用户体验。

代码结构 ​

组件定义 ​

  • 定义了 EntityInfo 组件，接收 entity、other、extra、column、hasRelationAuth 等属性。
  • 使用 useState 定义了多个状态变量，用于管理组件的编辑状态、表单数据、加载的物种信息等。

方法定义 ​

  • findSpecies：根据实体的物种 ID 加载物种信息。
  • findForm：根据实体的表单 ID 查找表单信息。
  • renderExtra：渲染额外的操作按钮（如编辑、取消、确认等）。
  • renderBaseInfo：渲染实体的基础信息表格。
  • renderEditInfo：渲染实体的编辑信息表格。
  • requiredLabel：为表单字段添加必填标识。
  • verifyRequired：验证必填字段是否填写。

使用示例 ​

EntityInfo 组件用于在 FullScreenModal 中显示当前实体的信息。它接收 current 对象作为 entity 属性，用于渲染实体的相关信息。

tsx
<EntityInfo entity={current}></EntityInfo>

ExecutorShowComp ​

功能概述 ​

  • 执行器展示 ：以卡片形式展示已选执行器的信息，包括执行器的功能名称和相关配置。
  • 执行器配置 ：根据不同执行器的功能名称，渲染不同的配置组件，如数据申领配置、字段变更配置等。
  • 删除执行器 ：提供删除执行器的功能，允许用户移除不再需要的执行器。
  • 操作按钮 ：为某些执行器提供额外的操作按钮，如配置按钮。
  • 模态框交互 ：支持打开配置模态框进行详细配置，并在配置完成后关闭模态框。

组件特性 ​

  • 通用性 ：适用于展示多种类型的执行器，每种执行器根据其功能名称渲染特定的配置组件。
  • 可扩展性 ：通过 switch 语句可以根据新的执行器类型添加新的配置组件，易于扩展。
  • 交互性强 ：支持删除执行器、打开配置模态框等交互操作，提升用户体验。

代码结构 ​

组件定义 ​

  • 定义了 ExecutorShowComp 组件，接收 IProps 类型的配置选项。
  • 使用 useState 定义了状态变量，用于管理模态框的显示和隐藏。
  • 使用 useEffect 监听某些状态变化，以更新组件的显示。

方法定义 ​

  • deleteExecutor：用于删除执行器的方法。
  • openConfiguration：用于打开配置模态框的方法。
  • handleOk 和 handleCancel：用于处理模态框的确定和取消事件的方法。

使用示例 ​

tsx
{executors && executors.length > 0 && (
  <span>
    <ExecutorShowComp
      work={props.work}
      executors={executors}
      deleteFuc={(id: string) => {
        var exes = executors.filter((a) => a.id != id);
        setExecutors(exes);
        props.current.executors = exes;
      }}
    />
  </span>
)}

ExecutorShowComp 组件用于在卡片中显示执行器配置的列表。当有执行器配置时，显示每个执行器的信息，并提供删除执行器的功能。

关键点总结 ​

  • 动态渲染 ：通过 switch 语句根据不同执行器的 funcName 动态渲染不同的配置组件。
  • 状态管理 ：使用 useState 钩子管理组件的内部状态，如模态框的显示和隐藏。
  • 事件处理 ：定义了多种事件处理函数，如 deleteFuc 用于删除执行器、openConfiguration 用于打开配置模态框等。
  • 组件复用 ：通过 Common 组件复用执行器的基本信息展示，减少代码重复。

注意事项 ​

  • 执行器类型扩展 ：当需要支持新的执行器类型时，需要在 ExecutorShowComp 组件中添加对应的 case 语句。
  • 状态同步 ：确保在删除执行器或更新执行器配置时，组件内部的状态与父组件的状态保持同步。
  • 样式调整 ：根据实际需求调整组件的样式，如卡片的大小、间距等。
  • 错误处理 ：在实际应用中，需要确保对可能出现的错误进行处理，如接口调用失败、用户输入错误等。

UploadIcon ​

功能概述 ​

  • 文件上传 ：通过 antd 的 Upload 组件实现文件上传功能，支持自定义上传请求逻辑。
  • 进度回调 ：在文件上传过程中，可根据需要回调上传进度。
  • 文件选择回调 ：文件上传成功后，回调选中的文件信息。
  • 自定义上传图标 ：支持自定义上传图标，可使用默认图标或传入子元素作为自定义图标。

组件特性 ​

  • 高度可定制 ：允许自定义上传图标、进度回调和文件选择回调，满足不同业务场景需求。
  • 简洁易用 ：封装了上传逻辑，简化了文件上传的实现过程。
  • 进度跟踪 ：提供上传进度回调，方便实时跟踪文件上传状态。

代码结构 ​

组件定义 ​

  • 定义了 UploadIcon 组件，接收 IProps 类型的配置选项。
  • 定义了 uploadProps 对象，配置上传相关属性：
    • multiple: 是否支持多选文件，这里设置为 false，表示只支持单文件上传。
    • showUploadList: 是否显示上传文件列表，设置为 false，表示不显示。
    • maxCount: 最大上传文件数量，设置为 1。
    • customRequest: 自定义上传请求方法，用于实现具体的文件上传逻辑。

方法定义 ​

  • customRequest: 自定义上传请求方法：
    • 获取上传的文件。
    • 调用 orgCtrl.user.directory.createFile 方法创建文件，实现文件上传。
    • 在上传过程中，根据 onProgress 回调上传进度。
    • 上传成功后，调用 onSelected 回调选中的文件信息。

使用示例 ​

tsx
<UploadIcon
  size={20}
  onSelected={async (file) => {
    if (file) {
      props.onValueChanged?.({
        value: JSON.stringify([...fileList, file.shareInfo()]),
      } as any);
    }
  }}
  onProgress={(p: number, key) => {
    if (p !== 100 && key) {
      setProgress({
        [key]: p,
      });
    } else {
      setProgress(undefined);
    }
    if (p === 0 && key) {
      setFileList([
        ...fileList,
        {
          key,
          name: key.split('/')[1],
        },
      ]);
    }
  }}
>
  <div
    onClick={(e) => {
      if (progress) {
        e.stopPropagation();
      }
    }}
  >
    <Space size={8} style={uploadLabelStyle}>
      <OrgIcons type="/toolbar/folderAdd" size={20} notAvatar />
      <div>本地上传</div>
    </Space>
  </div>
</UploadIcon>

在 SelectFilesItem 组件的返回结构中，UploadIcon 被用作云端上传和本地上传的图标按钮，用于触发文件上传操作。它接收了 size、onSelected 和 onProgress 属性，分别用于设置图标大小、处理文件选择后的回调以及上传进度更新。

关键点总结 ​

  • 自定义上传逻辑 ：通过 customRequest 方法自定义上传请求逻辑，实现与后端的交互。
  • 进度跟踪 ：在上传过程中回调上传进度，方便实时跟踪上传状态。
  • 文件选择回调 ：上传成功后回调选中的文件信息，方便后续操作。
  • 图标自定义 ：支持自定义上传图标，提高组件的灵活性和可扩展性。

注意事项 ​

  • 文件上传限制 ：根据业务需求，可调整 uploadProps 中的配置，如支持多文件上传、限制文件类型等。
  • 错误处理 ：在实际应用中，需要对上传过程中可能出现的错误进行处理，如网络错误、文件大小限制等。
  • 样式调整 ：可根据实际需求调整组件的样式，如图标大小、颜色等。
  • 性能优化 ：对于大文件上传，可考虑实现分片上传等优化措施，提高上传效率。

Design ​

功能概述 ​

  • 工作流设计与展示 ：用于展示和编辑工作流节点信息，支持工作流的发布、节点信息、流程信息和版本信息的查看与配置。
  • 资源加载与处理 ：加载工作流节点资源，并进行数据结构转化和验证。
  • 发布工作流 ：提供发布工作流的功能，在发布前会进行数据验证，并根据验证结果进行相应的操作。

组件特性 ​

  • 丰富的配置选项 ：支持多种配置选项，如节点信息、流程信息和版本信息等，满足复杂的工作流设计需求。
  • 灵活的界面布局 ：使用可调整宽度的侧边栏和内容区域，提供灵活的界面布局。
  • 状态管理 ：使用 React 的 useState 和自定义的 useAsyncLoad、useCtrlUpdate 钩子进行状态管理，确保组件状态与数据的一致性。
  • 异步操作支持 ：支持异步加载资源和发布工作流，提升用户体验。

代码结构 ​

组件定义 ​

  • 定义了 Design 组件，接收 IProps 类型的配置选项。
  • 使用 useState 定义了多个状态变量，用于管理组件的内部状态，如 saveElement、loaded、resource、key、mainWidth、currentNode 和 tabKey。
  • 使用 useAsyncLoad 钩子异步加载资源。
  • 使用 useCtrlUpdate 钩子管理组件的更新。

方法定义 ​

  • onSave: 处理工作流发布的逻辑：
    • 显示确认对话框，确认是否发布工作流。
    • 进行数据结构转化和验证。
    • 如果验证通过，更新工作流数据并发布。
    • 如果工作流在常用列表中，更新常用列表中的工作流数据。
    • 显示发布成功消息并调用完成回调函数。

使用示例 ​

以下是一个简单的父组件示例，展示如何使用 Design 组件：

tsx
import React from 'react';
import Design from '@/path/to/Design';

interface Work {
  id: string;
  name: string;
  // 其他工作流属性
}

const ParentComponent: React.FC = () => {
  const currentWork: Work = {
    id: '1',
    name: 'Test Work',
    // 其他工作流属性
  };

  const handleFinished = () => {
    console.log('Design component finished');
  };

  return (
    <div>
      <h3>工作流设计</h3>
      <Design current={currentWork} isEdit={true} finished={handleFinished} />
    </div>
  );
};

export default ParentComponent;

关键点总结 ​

  • 异步资源加载 ：使用 useAsyncLoad 钩子异步加载资源，确保组件在资源加载完成后再进行渲染。
  • 数据验证与转化 ：在发布工作流前进行数据验证和转化，确保数据的正确性和完整性。
  • 状态管理 ：使用多种状态变量和自定义钩子管理组件的内部状态，确保组件状态与数据的一致性。
  • 灵活的界面布局 ：使用 Resizable 组件实现可调整宽度的侧边栏，提供灵活的界面布局。

注意事项 ​

  • 资源加载错误处理 ：在实际应用中，需要对资源加载过程中可能出现的错误进行处理，如网络错误、资源不存在等。
  • 发布操作的确认 ：在发布工作流前，确保用户已经确认操作，避免误操作。
  • 状态同步 ：确保组件内部的状态与外部数据源保持同步，特别是在异步操作完成后。
  • 性能优化 ：对于复杂的工作流设计，可考虑实现虚拟滚动等优化措施，提高渲染性能。
  • 样式调整 ：根据实际需求调整组件的样式，如布局、间距、颜色等。

ProcessTree ​

功能概述 ​

  • 流程树构建与展示 ：构建和展示工作流的流程树结构，支持添加、删除和选择节点等操作。
  • 节点操作 ：提供添加分支节点、删除节点等功能，支持多种节点类型（如条件节点、并行节点、网关节点等）。
  • 缩放功能 ：支持流程树的缩放查看，方便用户在不同尺度下查看流程细节。

组件特性 ​

  • 丰富的节点操作 ：支持多种节点操作，包括添加分支节点、删除节点等，满足复杂流程设计需求。
  • 灵活的布局 ：使用递归构建流程树结构，支持复杂的分支和层级关系。
  • 缩放支持 ：提供缩放功能，方便用户查看不同尺度的流程树。
  • 事件回调 ：支持节点选择、插入和删除等事件的回调，方便与父组件进行交互。

代码结构 ​

组件定义 ​

  • 定义了 ProcessTree 组件，接收 IProps 类型的配置选项。
  • 使用 useState 定义了多个状态变量，用于管理组件的内部状态，如 key、scale 和 nodeMap。

方法定义 ​

  • getDomTree: 递归构建流程树的 DOM 结构：

    • 遍历节点及其分支，构建相应的 DOM 元素。
    • 插入覆盖线条，用于遮挡条件节点左右半边线条。

  • loadNodeDom: 加载节点的 DOM 元素，调用 decodeAppendDom 函数进行节点的解码和附加操作。

  • insertCoverLine: 插入覆盖线条，用于遮挡条件节点左右半边线条。

  • insertNode: 处理节点插入逻辑，根据节点类型创建新的节点并插入到流程树中。

  • delNode: 删除指定的节点，处理节点的父节点和子节点的关系更新。

  • getBranchEndNode: 获取分支的结束节点，用于在删除节点时进行流程树的结构调整。

  • addBranchNode: 添加分支节点，根据节点类型在流程树中添加新的分支。

使用示例 ​

tsx
<Layout.Sider key={key} width={'100%'} style={{ height: '100%' }}>
  <ProcessTree
    target={current.directory.target}
    isEdit={isEdit}
    resource={resource}
    isGroupWork={current.typeName == '集群模板'}
    version={current.metadata.version}
    onSelectedNode={(node) => {
      setCurrentNode(node);
    }}
  />
</Layout.Sider>

ProcessTree 组件用于在侧边栏中显示流程树，允许用户查看和选择不同的节点。当用户选择一个节点时，会更新当前选中的节点状态，从而在主内容区域显示相应的节点信息。

关键点总结 ​

  • 递归构建流程树 ：使用递归方法构建流程树的 DOM 结构，支持复杂的分支和层级关系。
  • 节点操作 ：提供丰富的节点操作方法，如添加分支节点、删除节点等，满足流程设计的需求。
  • 缩放功能 ：支持流程树的缩放查看，通过调整 scale 状态变量来实现。
  • 事件回调 ：通过事件回调函数与父组件进行交互，如节点选择回调 onSelectedNode。

注意事项 ​

  • 节点操作的复杂性 ：在处理复杂的节点操作时，如删除节点，需要仔细管理节点之间的关系，确保流程树的结构正确。
  • 性能优化 ：对于大型流程树，渲染性能可能会受到影响。可以考虑实现虚拟滚动或懒加载等优化措施。
  • 样式调整 ：根据实际需求调整组件的样式，如节点大小、线条颜色等。
  • 错误处理 ：在实际应用中，需要对可能的错误进行处理，如节点不存在、操作失败等。

EntityIcon ​

功能概述 ​

  • 实体图标展示 ：展示实体的图标，支持根据实体类型、名称、代码等信息进行展示。
  • 异步加载处理 ：支持根据实体 ID 异步加载实体信息，并在加载过程中显示加载状态。
  • 信息交互 ：提供实体信息的交互功能，如点击图标查看实体详情。
  • 自定义配置 ：支持多种配置选项，如图标大小、是否显示名称和代码等。

组件特性 ​

  • 高度可定制 ：支持多种配置选项，满足不同业务场景的需求。
  • 异步加载支持 ：在需要时异步加载实体信息，提升性能。
  • 信息提示 ：提供实体信息提示功能，方便用户查看实体详情。
  • 扩展性 ：通过组合不同的组件和方法，实现丰富的功能扩展。

代码结构 ​

组件定义 ​

  • 定义了 EntityIcon 组件，接收 teamTypeInfo 类型的配置选项。
  • 使用 getEntity 方法获取实体对象，根据 entityId 或 entity 属性进行查找。
  • 根据实体类型名称进行特殊处理，如商城模板的类型名称。
  • 使用 loadIconItem 方法加载图标项，根据实体是否存在调用不同的组件。

方法定义 ​

  • getEntity: 获取实体对象，根据 entityId 或 entity 属性进行查找。
  • loadIconItem: 加载图标项，根据实体是否存在调用 ShareIconItem 或 ShareIconById 组件。

子组件定义 ​

  • ShareIconById：根据实体 ID 异步加载实体信息，并展示相应的图标。

    • 使用 useAsyncLoad 钩子异步加载实体信息。
    • 在加载过程中显示加载状态。
    • 加载完成后，调用 ShareIconItem 组件展示图标。

  • ShareIconItem：展示实体图标，支持多种配置选项。

    • 根据配置选项展示实体图标、名称、代码等信息。
    • 提供实体信息提示功能，点击图标查看实体详情。

使用示例 ​

tsx
<EntityIcon
  entityId={value}
  typeName={props.typeName}
  showName
  belong={props.directory.target.space}
/>

EntityIcon 组件用于在输入框左侧显示当前选中实体的图标和名称。如果 value 有值，则显示对应的实体图标和名称；否则，可能显示一个默认的图标或空白。

关键点总结 ​

  • 异步加载处理 ：使用 useAsyncLoad 钩子异步加载实体信息，确保组件在信息加载完成后再进行展示。
  • 实体信息展示 ：支持多种配置选项，如图标大小、是否显示名称和代码等，满足不同的展示需求。
  • 信息提示功能 ：提供实体信息提示功能，方便用户查看实体详情。
  • 扩展性 ：通过组合不同的组件和方法，实现丰富的功能扩展。

注意事项 ​

  • 实体信息的正确性 ：确保传递给组件的实体信息正确无误，避免因信息错误导致的展示问题。
  • 性能优化 ：在大量实体图标展示时，考虑实现虚拟滚动等优化措施，提升渲染性能。
  • 样式调整 ：根据实际需求调整组件的样式，如图标大小、颜色等。
  • 错误处理 ：在实际应用中，对可能的错误进行处理，如实体信息加载失败等。

OrgIcons ​

功能概述 ​

  • 图标展示 ：用于展示不同类型的图标，支持选择状态和非选择状态。
  • 灵活配置 ：支持多种配置选项，如图标大小、标题、样式等。
  • 点击交互 ：支持点击事件，方便与用户进行交互。

组件特性 ​

  • 高度可定制 ：支持多种配置选项，满足不同业务场景的需求。
  • 简单易用 ：使用简单直观的 API，方便快速集成到项目中。
  • 扩展性 ：可以通过自定义图标类型，扩展组件的功能。

代码结构 ​

组件定义 ​

  • 定义了 OrgIcons 组件，接收 IProps 类型的配置选项。
  • 根据 props.notAvatar 的值决定使用 Image 组件还是 Avatar 组件来展示图标。
  • 使用 Tooltip 组件为图标添加提示信息。

方法定义 ​

  • 组件内部没有定义方法，而是通过直接渲染组件的方式来实现功能。

使用示例 ​

tsx
{children || <OrgIcons type="/toolbar/files" size={size} notAvatar />}

OrgIcons 组件用于在没有自定义上传按钮时，显示一个默认的图标作为上传按钮。这个图标代表文件上传功能，用户点击该图标可以触发文件上传操作。

关键点总结 ​

  • 图标展示 ：支持展示不同类型的图标，根据 type 属性动态加载相应的 SVG 图标。
  • 选择状态 ：支持选中状态的展示，通过在图标类型后添加 -select 来区分选中状态。
  • 自定义样式 ：支持自定义样式和类名，方便进行样式调整。
  • 点击交互 ：支持点击事件，方便与用户进行交互。

注意事项 ​

  • 图标类型 ：确保传递的 type 属性值对应存在的 SVG 图标文件，避免因图标文件不存在导致的展示问题。
  • 样式调整 ：根据实际需求调整组件的样式，如图标大小、颜色等。
  • 性能优化 ：在大量图标展示时，考虑实现懒加载等优化措施，提升渲染性能。

TypeIcon ​

功能概述 ​

  • 类型图标展示 ：根据传入的图标类型展示相应的图标，支持多种文件类型、操作类型和目标类型等。
  • 动态图标加载 ：根据不同的图标类型动态加载相应的 SVG 图标文件。
  • 用户图标特殊处理 ：对于用户类型图标，支持根据用户名生成个性化图标。
  • 样式自定义 ：支持自定义图标的大小和颜色。

组件特性 ​

  • 高度可定制 ：支持自定义图标大小和颜色，满足不同业务场景的视觉需求。
  • 广泛的类型支持 ：支持多种文件类型、操作类型和目标类型等，具有良好的通用性。
  • 个性化用户图标 ：为用户类型图标提供个性化生成逻辑，增强用户体验。
  • 动态加载 ：根据图标类型动态加载相应的图标文件，提高资源利用效率。

代码结构 ​

组件定义 ​

  • 定义了 TypeIcon 组件，接收 TypeIconInfo 类型的配置选项。
  • 根据 iconType 的值，决定展示哪种类型的图标。

方法定义 ​

  • renderImage: 渲染图像类型的图标，根据传入的名称和配置生成 Image 组件。
  • renderUserByName: 渲染用户类型的图标，根据用户名生成个性化图标。
  • loadFileIcon: 加载文件类型的图标，根据文件类型匹配相应的图标。
  • loadIcon: 加载各种类型的图标，包括操作图标、目标图标等。

使用示例 ​

tsx
const icon = (
  <TypeIcon
    name={info.share.name}
    iconType={info.share.typeName || info.typeName || '其它'}
    size={info.iconSize || size}
  />
);

// ...

<TypeIcon iconType={'其它'} size={size} name={info.entity?.name} />

当实体没有自定义头像时，使用 TypeIcon 组件显示默认图标。 根据实体类型显示相应的图标类型。

关键点总结 ​

  • 广泛的类型支持 ：支持多种文件类型、操作类型和目标类型等，具有良好的通用性。
  • 动态图标加载 ：根据图标类型动态加载相应的图标文件，提高资源利用效率。
  • 个性化用户图标 ：为用户类型图标提供个性化生成逻辑，增强用户体验。
  • 样式自定义 ：支持自定义图标大小和颜色，满足不同业务场景的视觉需求。

注意事项 ​

  • 图标类型匹配 ：确保传入的 iconType 值与组件内部支持的类型匹配，避免因类型不匹配导致的图标加载失败。
  • 资源路径正确性 ：确保图标文件的路径正确无误，避免因路径错误导致的图标加载失败。
  • 样式调整 ：根据实际需求调整组件的样式，如图标大小、颜色等。
  • 性能优化 ：在大量图标展示时，考虑实现懒加载等优化措施，提升渲染性能。

LoadingView ​

功能概述 ​

  • 加载状态展示 ：用于展示数据加载中的状态，提供可视化的加载动画和提示文本。
  • 样式自定义 ：支持自定义加载动画的大小和位置，以及提示文本的内容。

组件特性 ​

  • 简洁直观 ：通过动画效果和提示文本，清晰地向用户传达数据加载中的状态。
  • 样式灵活 ：支持多种尺寸（small、default、larger）和自定义顶部偏移量，满足不同场景下的布局需求。
  • 易于集成 ：作为一个独立的 functional component，方便在不同地方集成使用。

代码结构 ​

组件定义 ​

  • 定义了 LoadingView 组件，接收 LoadingViewType 类型的配置选项。
  • 使用 className 和 style 属性结合，动态设置加载动画的样式。

使用示例 ​

tsx
if (!loaded || !currentNode) {
  return (
    <div className="loading-page">
      <LoadingView text="资源信息加载中..." />
    </div>
  );
}

在资源加载完成或当前节点初始化之前，LoadingView 组件用于显示加载状态，提升用户体验，避免用户在加载过程中进行无效操作。

关键点总结 ​

  • 加载动画展示 ：通过 SVG 图像和 CSS 动画，实现可视化的加载效果。
  • 样式自定义 ：支持多种尺寸和自定义顶部偏移量，满足不同场景下的布局需求。
  • 提示文本配置 ：支持自定义提示文本内容，方便向用户传达加载信息。

注意事项 ​

  • 样式调整 ：根据实际需求调整组件的样式，如动画速度、文本颜色等。
  • 使用场景 ：在需要展示加载状态的地方使用该组件，如页面加载、数据请求等。

ScrollList ​

功能概述 ​

  • 可滚动列表展示 ：展示一个可滚动的列表，支持加载更多数据和搜索功能。
  • 动态加载更多数据 ：当用户滚动到列表底部时，自动加载更多数据。
  • 搜索功能集成 ：集成了搜索栏，支持对列表数据进行搜索过滤。

组件特性 ​

  • 动态加载 ：支持动态加载更多数据，提升用户体验和性能。
  • 搜索过滤 ：集成搜索功能，方便用户快速查找列表中的数据。
  • 高度自定义 ：支持自定义列表容器的高度，适应不同的布局需求。
  • 灵活渲染 ：通过 renderItem 方法支持自定义列表项的渲染方式。

代码结构 ​

组件定义 ​

  • 定义了 ScrollList 泛型组件，接收 IProps<T> 类型的配置选项。
  • 使用 useState 定义了 take 状态变量，用于控制当前显示的列表项数量。

方法与逻辑 ​

  • 滚动加载逻辑 ：通过监听列表容器的滚动事件，当用户滚动到接近底部时，自动增加 take 值以加载更多列表项，并在满足条件时调用 onLoadMore 方法加载更多数据。
  • 搜索功能集成 ：通过 SearchBar 组件集成搜索功能，用户输入的搜索值通过 setSearchValue 方法更新。

使用示例 ​

tsx
<ScrollList
  loaded={true}
  height={'390px'}
  searchValue={filter}
  setSearchValue={(v) => setFilter(v)}
  data={members}
  onLoadMore={() => loadMembers().then((res) => setMembers(res))}
  renderItem={(item) => {
    return (
      <div
        key={item.id}
        className="chat-at-list-item"
        style={{ fontSize: `${fontSize ?? 16}px` }}
        onClick={() => onClick(item)}>
        <EntityIcon disableInfo entity={item} size={iconSize ?? 35} />
        <span>{item.name}</span>
      </div>
    );
  }}
/>

ScrollList 组件用于在成员列表中提供可滚动的列表显示功能，并支持搜索过滤和加载更多数据。每个列表项显示成员的图标和名称，并在用户点击时触发相应的回调函数。

关键点总结 ​

  • 动态加载 ：通过监听滚动事件实现动态加载更多数据，提升用户体验。
  • 搜索功能 ：集成搜索功能，方便用户快速查找列表中的数据。
  • 高度自定义 ：支持自定义列表容器的高度，适应不同的布局需求。
  • 灵活渲染 ：通过 renderItem 方法支持自定义列表项的渲染方式。

注意事项 ​

  • 性能优化 ：在大量数据场景下，可考虑实现虚拟滚动等优化措施，提升渲染性能。
  • 加载状态处理 ：确保在数据加载过程中正确显示加载状态，避免用户误解。
  • 错误处理 ：在实际应用中，对可能的错误进行处理，如数据加载失败等。
  • 样式调整 ：根据实际需求调整组件的样式，如列表项间距、容器边框等。

SearchTarget ​

功能概述 ​

  • 弹出框表格查询 ：用于在弹出框中展示表格查询结果，支持多种目标类型的搜索（如人员、存储资源、单位等）。
  • 搜索功能 ：集成了搜索框，用户可以输入关键词进行搜索。
  • 自动选择 ：支持自动选择搜索结果中的目标项。
  • 多选支持 ：支持多选操作，用户可以选择多个目标项。
  • 搜索回调 ：在用户选择目标项后，通过回调函数将选中的目标数据传递给父组件。

组件特性 ​

  • 灵活的目标类型支持 ：支持多种目标类型的搜索，如人员、存储资源、单位等。
  • 自动选择配置 ：支持自动选择搜索结果中的目标项，提升用户体验。
  • 多选操作 ：支持多选操作，满足复杂的业务需求。
  • 搜索回调 ：通过回调函数将选中的目标数据传递给父组件，方便数据处理。
  • 搜索框集成 ：集成了搜索框，支持根据搜索类型动态设置占位符。

代码结构 ​

组件定义 ​

  • 定义了 SearchTarget 泛型组件，接收 CompanySearchTableProps 类型的配置选项。
  • 使用 useState 定义了多个状态变量，如 checked（选中的目标 ID 列表）、searchKey（搜索关键词）等。

方法与逻辑 ​

  • 搜索占位符设置 ：通过 useEffect 钩子根据搜索类型设置搜索框的占位符。
  • 搜索逻辑 ：在 searchKey 变化时触发搜索操作，调用 orgCtrl.user.searchTargets 方法获取搜索结果。
  • 搜索结果过滤 ：如果设置了 belongId，对搜索结果进行过滤，只保留属于指定 belongId 的目标。
  • 自动选择逻辑 ：如果启用了自动选择功能，在搜索结果加载完成后自动选择所有搜索结果，并调用回调函数。
  • 单位卡片渲染 ：使用 CheckCard.Group 和 CheckCard 组件渲染搜索结果列表，支持多选操作。

使用示例 ​

tsx
<SearchTarget
  autoSelect
  searchCallback={setSelectMember}
  searchType={
    target.typeName === TargetType.Group ? TargetType.Company : TargetType.Person
  }
  searchTypes={
    target.typeName === TargetType.Group
      ? [TargetType.Company]
      : target.typeName === TargetType.Storage
      ? [TargetType.Company, TargetType.Person]
      : [TargetType.Person]
  }
/>

SearchTarget 组件用于在模态框中提供搜索功能，允许用户根据不同的条件搜索目标（如公司或人员）。当用户进行搜索时，组件会调用 searchCallback 回调函数来更新选中的成员列表。

关键点总结 ​

  • 灵活的目标类型支持 ：支持多种目标类型的搜索，适应不同的业务需求。
  • 自动选择功能 ：支持自动选择搜索结果，提升用户体验。
  • 多选操作 ：支持多选操作，满足复杂的业务场景。
  • 搜索回调 ：通过回调函数将选中的目标数据传递给父组件，方便数据处理。
  • 搜索框集成 ：集成了搜索框，支持根据搜索类型动态设置占位符。

注意事项 ​

  • 搜索逻辑的正确性 ：确保搜索逻辑正确无误，避免因搜索条件不匹配导致的搜索结果错误。
  • 自动选择的适用性 ：在启用自动选择功能时，确保这是符合业务需求的，避免不必要的自动选择行为。
  • 多选操作的处理 ：在处理多选操作时，确保正确管理选中的目标项，避免因选中状态错误导致的问题。
  • 样式调整 ：根据实际需求调整组件的样式，如卡片间距、字体大小等。
  • 性能优化 ：在大量数据场景下，考虑实现虚拟滚动等优化措施，提升渲染性能。

SegmentContent ​

功能概述 ​

  • 分段内容展示 ：提供分段展示功能，用户可以在不同的展示形式（列表、图标等）之间切换。
  • 滚动加载支持 ：支持滚动到底部时触发加载更多内容的事件。
  • 固定操作栏 ：在页面底部固定展示分段切换按钮和描述信息。

组件特性 ​

  • 多种展示形式 ：支持列表、图标等多种展示形式，满足不同用户的需求。
  • 滚动加载 ：自动检测滚动事件，当滚动到底部时触发加载更多内容的事件。
  • 固定操作栏 ：分段切换按钮和描述信息固定在底部，方便用户操作。
  • 状态管理 ：使用 useStorage 钩子管理分段状态，确保切换状态在页面刷新后仍然保持。

代码结构 ​

组件定义 ​

  • 定义了 SegmentContent 组件，接收 IProps 类型的配置选项。
  • 使用 useState 钩子管理分段状态（segmented），并使用 useStorage 钩子将其持久化到本地存储中。
  • 使用 useEffect 钩子在 currentTag 变化时重置滚动位置。

方法与逻辑 ​

  • 滚动加载逻辑 ：通过监听滚动事件，当滚动到底部时触发 onScrollEnd 回调函数。
  • 分段切换逻辑 ：通过 Segmented 组件实现分段切换功能，切换时更新分段状态并调用 onSegmentChanged 回调函数。

使用示例 ​

tsx
<SegmentContent
  height={props.height}
  onScrollEnd={props.onScrollEnd}
  onSegmentChanged={setSegmented}
  descriptions={`${getContent().length}个项目`}
  currentTag={props.currentTag}>
  {renderMode()}
</SegmentContent>

SegmentContent 组件用于在文件系统中显示内容区域，支持分段显示（如图标模式和列表模式）。它接受多种属性来控制其外观和行为，包括高度、滚动结束时的回调、分段改变时的回调、描述信息和当前选中的标签。在文件系统中，根据不同的视图模式（图标或列表），它会动态渲染相应的组件。

关键点总结 ​

  • 分段展示 ：支持多种展示形式，满足不同用户的需求。
  • 滚动加载 ：自动检测滚动事件，当滚动到底部时触发加载更多内容的事件。
  • 固定操作栏 ：分段切换按钮和描述信息固定在底部，方便用户操作。
  • 状态管理 ：使用 useStorage 钩子管理分段状态，确保切换状态在页面刷新后仍然保持。

注意事项 ​

  • 状态持久化 ：确保 useStorage 钩子正确实现，以保证分段状态在页面刷新后仍然保持。
  • 滚动加载的适用性 ：在需要分页加载数据的场景中使用滚动加载功能，提高用户体验。
  • 样式调整 ：根据实际需求调整组件的样式，如操作栏的位置、字体大小等。
  • 性能优化 ：在大量数据场景下，考虑实现虚拟滚动等优化措施，提升渲染性能。

SelectAuth ​

功能概述 ​

  • 权限选择 ：基于树形结构的选择器，用于选择权限。
  • 异步加载 ：异步加载权限树数据，优化初始加载性能。
  • 搜索支持 ：支持搜索功能，方便在大量权限中快速查找。
  • 全选选项 ：支持添加全选选项（可选）。

组件特性 ​

  • 树形结构展示 ：以树形结构展示权限，清晰展示权限的层级关系。
  • 异步数据加载 ：通过异步加载权限树数据，提升初始加载性能。
  • 搜索功能集成 ：内置搜索功能，方便用户快速查找权限。
  • 全选支持 ：支持添加全选选项，方便用户一键选择所有权限。
  • 禁用项支持 ：支持通过回调函数动态禁用特定权限项。

代码结构 ​

组件定义 ​

  • 定义了 SelectAuth 组件，接收 IProps 类型的配置选项。
  • 使用 useState 定义了 treeData 状态变量，用于存储树形数据。
  • 使用 useAsyncLoad 钩子异步加载权限树数据。

方法与逻辑 ​

  • 树形数据生成 ：通过递归方法 getTreeData 将权限数据转换为 TreeSelect 可用的树形数据格式。
  • 异步加载逻辑 ：在组件初始化时异步加载权限树数据，并根据 excludeAll 属性决定是否添加全选选项。
  • 禁用项处理 ：通过 disableExp 回调函数动态设置权限项的禁用状态。

使用示例 ​

tsx
case '角色':
  return (
    <SelectAuth
      excludeAll
      disableExp={(auth: IAuthority) => {
        return auth.metadata.shareId != props.work.metadata.shareId;
      }}
      space={props.belong}
      value={props.current.destId}
      onChange={(value, label) => {
        if (props.current.destId !== value) {
          props.current.destType = '角色';
          props.current.destName = '角色: ' + label;
          props.current.destId = value;
          props.refresh();
        }
      }}
    />
  );

SelectAuth 组件用于在用户选择 '角色' 类型时，弹出角色选择界面。用户可以选择一个角色，并在选择完成后，将选中的角色信息更新到当前节点的数据中，同时刷新相关数据。

关键点总结 ​

  • 异步加载 ：通过 useAsyncLoad 钩子异步加载权限树数据，提升初始加载性能。
  • 树形结构 ：以树形结构展示权限，清晰展示权限的层级关系。
  • 搜索支持 ：内置搜索功能，方便用户快速查找权限。
  • 全选支持 ：支持添加全选选项，方便用户一键选择所有权限。
  • 禁用项支持 ：支持通过回调函数动态禁用特定权限项。

注意事项 ​

  • 异步加载的正确性 ：确保异步加载逻辑正确无误，避免因数据加载错误导致的组件展示问题。
  • 禁用项逻辑 ：在使用 disableExp 回调函数时，确保逻辑正确，避免不必要的禁用操作。
  • 全选选项的适用性 ：在需要全选功能时才启用 excludeAll 属性，避免不必要的选项展示。
  • 样式调整 ：根据实际需求调整组件的样式，如选择器宽度、字体大小等。

SelectIdentity ​

功能概述 ​

  • 身份选择 ：提供一个模态框用于选择身份（如角色），支持单选和多选模式。
  • 组织树展示 ：通过树形结构展示组织及其子组织，方便用户浏览和选择。
  • 身份展示与选择 ：在选择组织后，展示该组织下的身份列表，支持身份的多选或单选。
  • 已选身份展示 ：在多选模式下，展示已选中的身份，并提供删除已选身份的功能。

组件特性 ​

  • 多选与单选支持 ：支持多选和单选两种模式，满足不同的业务需求。
  • 模态框展示 ：以模态框形式展示，提供良好的用户体验。
  • 组织树与身份树结合 ：结合组织树和身份树，方便用户在复杂的组织结构中快速找到所需身份。
  • 已选身份管理 ：在多选模式下，展示已选中的身份，并允许用户删除已选身份。

代码结构 ​

组件定义 ​

  • 定义了 SelectIdentity 组件，接收 IProps 类型的配置选项。
  • 使用 useState 定义了 identitys（当前组织下的身份列表）和 selected（已选中的身份列表）状态变量。

方法与逻辑 ​

  • 组织树构建 ：通过 buildTargetTree 方法递归构建组织树，展示组织及其子组织。
  • 身份选择逻辑 ：在组织树节点被选中时，加载该组织下的身份列表，并更新 identitys 状态。
  • 身份多选逻辑 ：在多选模式下，通过 onCheck 方法管理已选中的身份列表。
  • 身份单选逻辑 ：在单选模式下，通过 onSelect 方法更新已选中的身份。
  • 已选身份展示 ：在多选模式下，通过 ShareShowComp 组件展示已选中的身份，并提供删除功能。

使用示例 ​

tsx
case '身份':
  return (
    <SelectIdentity
      open={openType == '身份'}
      exclude={[]}
      multiple={false}
      space={props.belong}
      finished={(selected) => {
        if (selected.length > 0) {
          const item = selected[0];
          props.current.destType = '身份';
          props.current.destId = item.id;
          props.current.destName = item.name;
          setCurrentData(item);
          props.refresh();
        }
        setOpenType('');
      }}
    />
  );

该组件被用作 case '身份' 分支的返回值，用于选择身份。SelectIdentity 组件用于在用户选择 '身份' 类型时，弹出身份选择界面。用户可以选择一个身份，并在选择完成后，将选中的身份信息更新到当前节点的数据中，同时刷新相关数据并关闭选择界面。

关键点总结 ​

  • 多选与单选支持 ：支持多选和单选两种模式，满足不同的业务需求。
  • 组织树与身份树结合 ：结合组织树和身份树，方便用户在复杂的组织结构中快速找到所需身份。
  • 已选身份管理 ：在多选模式下，展示已选中的身份，并允许用户删除已选身份。
  • 模态框展示 ：以模态框形式展示，提供良好的用户体验。

注意事项 ​

  • 异步数据加载 ：确保组织和身份数据的加载逻辑正确无误，避免因数据加载错误导致的组件展示问题。
  • 多选逻辑的正确性 ：在多选模式下，确保已选身份的管理逻辑正确，避免因重复选择或错误删除导致的问题。
  • 单选逻辑的正确性 ：在单选模式下，确保每次只能选择一个身份，并正确更新已选状态。
  • 样式调整 ：根据实际需求调整组件的样式，如模态框宽度、树形结构的间距等。

SelectMember ​

功能概述 ​

  • 成员选择 ：提供一个模态框用于选择成员，支持多选和单选模式。
  • 搜索功能 ：支持通过用户账号、昵称或姓名进行搜索，快速定位到目标成员。
  • 成员展示与选择 ：以表格形式展示成员列表，支持多选操作。
  • 已选成员管理 ：在选择成员后，提供已选成员的列表展示，并支持取消选择。

组件特性 ​

  • 多选与单选支持 ：支持多选和单选两种模式，满足不同的业务需求。
  • 搜索功能集成 ：内置搜索功能，方便用户快速查找成员。
  • 模态框展示 ：以模态框形式展示，提供良好的用户体验。
  • 成员列表操作 ：支持通过表格展示成员列表，并提供选择功能。

代码结构 ​

组件定义 ​

  • 定义了 SelectMember 组件，接收 IProps 类型的配置选项。
  • 使用 useState 定义了多个状态变量，如 selected（已选中的成员列表）、selectedRowKeys（已选中的成员 ID 列表）、datasource（成员数据源）等。

方法与逻辑 ​

  • 搜索功能 ：通过 Input 组件实现搜索功能，用户输入的搜索值通过 keyWordChange 方法进行节流处理，避免频繁请求。
  • 成员数据加载 ：在组件初始化和搜索值变化时，通过 useEffect 钩子加载成员数据，并根据搜索值进行过滤。
  • 成员选择逻辑 ：通过 CardOrTableComp 组件实现成员列表的选择功能，支持多选操作。

使用示例 ​

tsx
return (
  <SelectMember
    open
    target={target.space}
    exclude={target.members}
    finished={async (selected) => {
      if (selected.length > 0) {
        await target.pullMembers(selected);
      }
      finished();
    }}
  />
);
SelectMember 组件，用于在特定条件下直接打开成员选择界面，并在完成后将选中的成员拉入目标空间。在代码中，当 target 的 id 不等于 belongId，并且 target 的类型不是 Group、Cohort 或 Storage 时，会渲染 SelectMember 组件。

关键点总结 ​

  • 多选与单选支持 ：支持多选和单选两种模式，满足不同的业务需求。
  • 搜索功能集成 ：内置搜索功能，方便用户快速查找成员。
  • 模态框展示 ：以模态框形式展示，提供良好的用户体验。
  • 成员列表操作 ：支持通过表格展示成员列表，并提供选择功能。

注意事项 ​

  • 异步数据加载 ：确保成员数据的加载逻辑正确无误，避免因数据加载错误导致的组件展示问题。
  • 多选逻辑的正确性 ：在多选模式下，确保已选成员的管理逻辑正确，避免因重复选择或错误删除导致的问题。
  • 样式调整 ：根据实际需求调整组件的样式，如模态框宽度、表格高度等。
  • 性能优化 ：在大量数据场景下，考虑实现虚拟滚动等优化措施，提升渲染性能。

ShareShowRecent ​

功能概述 ​

  • 展示已选择数据 ：用于展示已选择的数据项，通常用于多选场景。
  • 删除功能 ：支持删除已选择的数据项。
  • 点击交互 ：支持对数据项的点击交互，方便进行进一步操作。
  • 标签支持 ：支持为每个数据项添加自定义标签。

组件特性 ​

  • 动态背景色 ：根据数据项的类型动态设置背景色，提供直观的视觉区分。
  • 灵活的交互 ：支持点击数据项和删除数据项两种交互方式。
  • 自定义标签 ：支持为每个数据项添加自定义标签，增强信息展示。

代码结构 ​

组件定义 ​

  • 定义了 ShareShowRecent 组件，接收 ShareShowRecentProps 类型的配置选项。
  • 使用 props.departData 获取已选择的数据项列表，并进行映射展示。

方法与逻辑 ​

  • 数据项展示 ：通过映射 departData 列表，展示每个数据项的信息。
  • 背景色设置 ：根据数据项的 type 属性动态设置背景色。
  • 点击交互 ：通过 onClick 回调函数处理数据项的点击事件。
  • 删除功能 ：通过 deleteFuc 回调函数处理数据项的删除事件。
  • 自定义标签 ：通过 tags 回调函数为数据项添加自定义标签。

使用示例 ​

以下是一个简单的父组件示例，展示如何使用 ShareShowRecent 组件：

tsx
import React from 'react';
import ShareShowRecent from '@/path/to/ShareShowRecent';

interface ParentComponentProps {
  // 父组件的属性
}

const ParentComponent: React.FC<ParentComponentProps> = () => {
  const handleDelete = (id: string) => {
    console.log('Deleting item with ID:', id);
    // 处理删除逻辑
  };

  const handleItemClick = (item: any) => {
    console.log('Item clicked:', item);
    // 处理数据项点击逻辑
  };

  const renderTags = (id: string) => {
    return <span key={id}>Tag for {id}</span>;
  };

  const departData = [
    { name: 'Item 1', id: '1', type: 'add' },
    { name: 'Item 2', id: '2' },
    { name: 'Item 3', id: '3', type: 'del' },
  ];

  return (
    <div>
      <h3>已选择的数据</h3>
      <ShareShowRecent
        departData={departData}
        deleteFuc={handleDelete}
        onClick={handleItemClick}
        tags={renderTags}
      />
    </div>
  );
};

export default ParentComponent;

关键点总结 ​

  • 动态背景色 ：根据数据项的类型动态设置背景色，提供直观的视觉区分。
  • 灵活的交互 ：支持点击数据项和删除数据项两种交互方式。
  • 自定义标签 ：支持为每个数据项添加自定义标签，增强信息展示。

注意事项 ​

  • 样式调整 ：根据实际需求调整组件的样式，如背景色、间距等。
  • 交互逻辑 ：确保交互逻辑正确无误，避免因逻辑错误导致的用户体验问题。
  • 性能优化 ：在大量数据场景下，考虑实现虚拟滚动等优化措施，提升渲染性能。

SimpleLoading ​

功能概述 ​

  • 简单加载动画 ：用于展示一个简单的加载动画，通常在数据加载过程中使用。
  • 灵活配置 ：支持自定义宽度、高度、间隙和部分数量，以适应不同的布局需求。

组件特性 ​

  • 简洁设计 ：采用简单的矩形块模拟加载动画，设计简洁直观。
  • 高度自定义 ：支持多种样式配置选项，满足不同的视觉需求。
  • 响应式布局 ：根据配置自动计算每个部分的宽度，支持响应式布局。

代码结构 ​

组件定义 ​

  • 定义了 SimpleLoading 组件，接收 SimpleLoadingProps 类型的配置选项。
  • 计算每个部分的宽度 partWidth，根据 parts 和 gap 动态计算。

方法与逻辑 ​

  • 部分生成 ：通过 Array.from 方法生成指定数量的部分，并为每个部分设置样式。
  • 样式管理 ：使用 Less 文件定义组件的样式，确保加载动画的视觉效果。

使用示例 ​

这些 SimpleLoading 组件被放置在 container 类的 div 中，按照 sections 数组的顺序依次排列，形成完整的加载页面布局。

tsx
{sections.map((section, index) => (
  <SimpleLoading
    key={index}
    width={section.width}
    height={section.height}
    parts={section.parts}
    gap={section.gap}
  />
))}

SimpleLoading 组件用于在页面中显示加载动画，模拟内容正在加载的效果。 通过配置不同的宽度、高度、分割部分和间隙，可以生成多样化的加载动画区域，从而提升用户体验，尤其是在内容尚未完全加载时，给用户一种视觉上的反馈。

关键点总结 ​

  • 简洁设计 ：采用简单的矩形块模拟加载动画，设计简洁直观。
  • 高度自定义 ：支持多种样式配置选项，满足不同的视觉需求。
  • 响应式布局 ：根据配置自动计算每个部分的宽度，支持响应式布局。

注意事项 ​

  • 样式调整 ：根据实际需求调整组件的样式，如颜色、动画速度等。
  • 使用场景 ：在需要展示加载状态的地方使用该组件，如数据请求、页面加载等。

FormValidateMessage ​

功能概述 ​

  • 表单验证消息展示 ：用于展示表单验证过程中的错误信息，帮助用户快速定位和解决问题。
  • 动态错误信息管理 ：支持动态更新和展示验证错误信息。
  • 错误信息分类 ：区分不同类型的验证错误（如必填项错误、规则验证错误）。
  • 填写说明功能 ：提供填写说明功能，指导用户如何正确填写表单。
  • 自定义错误位置渲染 ：支持自定义错误信息的位置渲染逻辑。

组件特性 ​

  • 动态更新 ：根据验证结果动态更新错误信息展示。
  • 错误分类 ：清晰区分不同类型的验证错误，方便用户理解和处理。
  • 填写指导 ：提供填写说明功能，提升用户体验。
  • 灵活定制 ：支持自定义错误信息的位置渲染逻辑，满足特殊的展示需求。

代码结构 ​

组件定义 ​

  • 定义了 FormValidateMessage 组件，接收 IProps 类型的配置选项。
  • 使用 useState 定义了多个状态变量，如 validateVisible（验证信息是否可见）、validateErrors（验证错误信息列表）等。
  • 使用 useEffect 钩子监听验证事件和命令，动态更新验证错误信息和展示状态。

方法与逻辑 ​

  • 验证错误更新 ：通过监听 WorkFormService 的验证事件，动态更新验证错误信息。
  • 填写说明功能 ：通过 fillValidation 方法打开填写说明模态框，并提供编辑功能。
  • 错误位置渲染 ：通过 renderPosition 方法自定义错误信息的位置渲染逻辑，区分不同类型的验证错误。
  • 模态框控制 ：通过状态变量控制验证信息模态框和填写说明模态框的显示与隐藏。

使用示例 ​

该组件被放置在 workstart-content-bottom 类的 div 中，通常位于表单的底部，这样可以确保验证消息在用户填写表单后能够醒目地显示出来。

tsx
<div className="workstart-content-bottom">
  <FormValidateMessage service={service.current} />
</div>

FormValidateMessage 组件通过接收 service 属性，利用 service.current 提供的验证结果信息，显示相应的验证消息。 这些验证消息通常会在用户提交表单或进行某些操作时显示，用于提示用户表单中的错误或警告信息，帮助用户了解表单填写是否符合要求。

关键点总结 ​

  • 动态更新 ：根据验证结果动态更新错误信息展示，确保用户始终看到最新的验证状态。
  • 错误分类 ：清晰区分不同类型的验证错误，方便用户理解和处理。
  • 填写指导 ：提供填写说明功能，帮助用户正确填写表单。
  • 灵活定制 ：支持自定义错误信息的位置渲染逻辑，满足特殊的展示需求。

注意事项 ​

  • 事件监听的正确性 ：确保事件监听逻辑正确无误，避免因事件未正确处理导致的验证信息更新问题。
  • 错误信息的一致性 ：确保错误信息的展示与实际验证逻辑一致，避免误导用户。
  • 填写说明逻辑 ：在使用填写说明功能时，确保逻辑正确，避免因填写说明错误导致的用户困惑。
  • 样式调整 ：根据实际需求调整组件的样式，如按钮样式、模态框宽度等。

ReportValidateMessage ​

功能概述 ​

  • 报表验证消息展示 ：用于展示报表验证过程中的错误信息，帮助用户快速定位和解决问题。
  • 动态错误信息管理 ：支持动态更新和展示验证错误信息。
  • 错误信息分类 ：区分不同类型的验证错误（如必填项错误、规则验证错误）。
  • 填写说明功能 ：提供填写说明功能，指导用户如何正确填写报表。
  • 自定义错误位置渲染 ：支持自定义错误信息的位置渲染逻辑。
  • 弹出框展示 ：通过弹出框展示验证信息，提升用户体验。

组件特性 ​

  • 动态更新 ：根据验证结果动态更新错误信息展示。
  • 错误分类 ：清晰区分不同类型的验证错误，方便用户理解和处理。
  • 填写指导 ：提供填写说明功能，提升用户体验。
  • 灵活定制 ：支持自定义错误信息的位置渲染逻辑，满足特殊的展示需求。
  • 弹出框交互 ：通过弹出框展示验证信息，避免页面 clutter。

代码结构 ​

组件定义 ​

  • 定义了 ReportValidateMessage 组件，接收 IProps 类型的配置选项。
  • 使用 useState 定义了多个状态变量，如 validateVisible（验证信息是否可见）、validateErrors（验证错误信息列表）等。
  • 使用 useEffect 钩子监听验证事件和命令，动态更新验证错误信息和展示状态。

方法与逻辑 ​

  • 验证错误更新 ：通过监听 WorkFormService 的验证事件，动态更新验证错误信息。
  • 填写说明功能 ：通过 fillValidation 方法打开填写说明模态框，并提供编辑功能。
  • 错误位置渲染 ：通过 renderPosition 方法自定义错误信息的位置渲染逻辑，区分不同类型的验证错误。
  • 弹出框控制 ：通过 Popover 组件展示验证信息，使用状态变量控制弹出框的显示与隐藏。
  • 模态框控制 ：通过状态变量控制验证信息模态框和填写说明模态框的显示与隐藏。

使用示例 ​

以下是一个简单的父组件示例，展示如何使用 ReportValidateMessage 组件：

tsx
import React from 'react';
import WorkFormService from '@/ts/scripting/core/services/WorkFormService';
import ReportValidateMessage from '@/path/to/ReportValidateMessage';

interface ParentComponentProps {
  // 父组件的属性
}

const ParentComponent: React.FC<ParentComponentProps> = () => {
  const workFormService = new WorkFormService();

  const handleOnErrorClick = (error: ValidateErrorInfo) => {
    console.log('Error clicked:', error);
    // 处理错误点击逻辑
  };

  return (
    <div>
      <h3>报表验证消息</h3>
      <ReportValidateMessage
        service={workFormService}
        onErrorClick={handleOnErrorClick}
      />
    </div>
  );
};

export default ParentComponent;

关键点总结 ​

  • 动态更新 ：根据验证结果动态更新错误信息展示，确保用户始终看到最新的验证状态。
  • 错误分类 ：清晰区分不同类型的验证错误，方便用户理解和处理。
  • 填写指导 ：提供填写说明功能，帮助用户正确填写报表。
  • 灵活定制 ：支持自定义错误信息的位置渲染逻辑，满足特殊的展示需求。
  • 弹出框交互 ：通过弹出框展示验证信息，避免页面 clutter。

注意事项 ​

  • 事件监听的正确性 ：确保事件监听逻辑正确无误，避免因事件未正确处理导致的验证信息更新问题。
  • 错误信息的一致性 ：确保错误信息的展示与实际验证逻辑一致，避免误导用户。
  • 填写说明逻辑 ：在使用填写说明功能时，确保逻辑正确，避免因填写说明错误导致的用户困惑。
  • 样式调整 ：根据实际需求调整组件的样式，如按钮样式、弹出框宽度等。

FullScreenModal ​

功能概述 ​

  • 全屏模态框 ：提供一个可切换全屏模式的模态框，适合用于需要较大操作空间的场景，如表单编辑、详情查看等。
  • 灵活的布局配置 ：支持自定义模态框的宽度、高度、标题、图标等属性。
  • 存储功能集成 ：支持直接在模态框内进行数据存储操作。
  • 全屏切换 ：支持在普通模式和全屏模式之间切换，提升用户体验。

组件特性 ​

  • 高度自定义 ：支持多种布局和样式的自定义，满足不同业务需求。
  • 全屏支持 ：提供全屏模式，适合需要较大操作空间的场景。
  • 存储功能 ：集成存储功能，方便用户直接保存数据。
  • 响应式设计 ：根据不同的屏幕尺寸自动调整布局。

代码结构 ​

组件定义 ​

  • 定义了 FullScreenModal 组件，接收 IFullModalProps 类型的配置选项。
  • 使用 useState 定义了 open（存储对话框是否打开）和 modalState（模态框状态，控制是否全屏）状态变量。

方法与逻辑 ​

  • 模态框属性加载 ：通过 loadModalProps 方法根据 modalState 动态设置模态框的属性，如宽度、高度、样式等。
  • 标题渲染 ：通过 readerTitle 方法渲染模态框标题栏，包含图标、标题、额外内容、存储按钮和全屏切换按钮。
  • 存储功能 ：通过 Confirm 组件实现存储功能，点击存储按钮时打开确认对话框，并在确认后调用 onSave 回调函数。
  • 全屏切换 ：通过切换 modalState 状态实现普通模式和全屏模式之间的切换。

使用示例 ​

tsx
<FullScreenModal
  open={modalFlag}
  title={'打印模板配置'}
  onCancel={() => props.refresh()}
  destroyOnClose
  width={'80vw'}
  bodyHeight={'70vh'}
  modal={true}
  onSaveModal={handSaveModal}
  onSave={Save}>
  <>
    <PrintCreate state={state} handSave={handSave} print={values} />
    {modalFlag && (
      <Modal open={modalFlag} onOk={onOk} onCancel={onCancel} okText={'确认保存'}>
        <Form
          form={form}
          layout="vertical"
          name="form_in_modal"
          initialValues={{ modifier: 'public' }}>
          <Form.Item
            name="name"
            label="保存模板名称"
            rules={[
              {
                validator: (_rule, value) => {
                  const currentData = props.current.print.filter(
                    (item) => item.name == value,
                  );
                  if (value == undefined) {
                    return Promise.reject('请输入模板名称');
                  }
                  if (currentData.length > 0) {
                    return Promise.reject('该名称已存在');
                  }
                  return Promise.resolve();
                },
              },
            ]}>
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    )}
  </>
</FullScreenModal>

关键点总结 ​

  • 全屏支持 ：提供全屏模式，适合需要较大操作空间的场景。
  • 存储功能集成 ：集成存储功能，方便用户直接保存数据。
  • 灵活的布局配置 ：支持多种布局和样式的自定义，满足不同业务需求。
  • 响应式设计 ：根据不同的屏幕尺寸自动调整布局。

注意事项 ​

  • 样式调整 ：根据实际需求调整组件的样式，如模态框的宽度、高度、按钮样式等。
  • 存储逻辑 ：确保存储逻辑正确无误，避免因存储失败导致的数据丢失。
  • 全屏切换逻辑 ：确保全屏切换逻辑正确，避免因切换错误导致的用户体验问题。

SelectIcon ​

功能概述 ​

  • 图标选择 ：提供一个下拉选择框，用于选择 Ant Design 图标库中的图标。
  • 多选支持 ：支持多选模式，用户可以选择多个图标。
  • 搜索功能 ：支持搜索功能，方便在大量图标中快速查找。
  • 自定义样式 ：支持自定义图标的样式，如大小、颜色等。

组件特性 ​

  • 简洁易用 ：界面简洁直观，用户可以快速上手。
  • 功能丰富 ：支持多选、搜索等多种功能，满足不同场景的需求。
  • 高度自定义 ：支持自定义图标样式和选择模式，灵活性强。

代码结构 ​

组件定义 ​

  • 定义了 SelectIcon 组件，接收 SelectIconProps 类型的配置选项。
  • 使用 useState 定义了 defaultValue 状态变量，用于存储当前选中的图标。

方法与逻辑 ​

  • 图标列表生成 ：通过 Object.keys(icons) 获取图标库中的所有图标名称，并进行过滤，只保留实际的图标对象。
  • 选中处理 ：通过 onSelect 方法处理图标选择事件，根据选择模式更新选中的图标列表，并调用 setValue 回调函数通知父组件。

使用示例 ​

在 Form.Item 中，通过 SelectIcon 组件，用户可以进行图标的选择操作，然后将选择的图标值通过 setValue 方法更新到表单的 icon 字段中，从而在用户新建或编辑表格时可以为表格设置相应的图标。

tsx
<Form.Item
  name="icon"
  label="图标"
  rules={[{ required: false, message: '请选择图标!' }]}>
  <SelectIcon
    setValue={(icon: string) => {
      form.setFieldValue('icon', icon);
    }}></SelectIcon>
</Form.Item>

该组件被用作 Form.Item 的子元素，表示一个图标选择的控件。 它接收了一个 setValue 属性，其值是一个函数 (icon: string) => form.setFieldValue('icon', icon)。 当用户通过 SelectIcon 组件选择了某个图标后，会触发 setValue 函数，将选择的图标字符串 icon 作为参数传递给该函数。 form.setFieldValue('icon', icon) ：调用了 Form 实例的 setFieldValue 方法，用于更新表单字段 icon 的值为用户选择的图标字符串，从而实现了用户选择图标后表单数据的同步更新。这样在后续表单提交或其他操作中，就可以获取到用户选择的图标信息。

关键点总结 ​

  • 图标选择 ：提供一个下拉选择框，用于选择 Ant Design 图标库中的图标。
  • 多选支持 ：支持多选模式，用户可以选择多个图标。
  • 搜索功能 ：支持搜索功能，方便在大量图标中快速查找。
  • 自定义样式 ：支持自定义图标的样式，如大小、颜色等。

注意事项 ​

  • 图标库的正确性 ：确保导入的图标库正确无误，避免因图标库错误导致的组件展示问题。
  • 样式调整 ：根据实际需求调整组件的样式，如选择框宽度、图标大小等。
  • 性能优化 ：在大量图标场景下，考虑实现虚拟滚动等优化措施，提升渲染性能。

CustomBreadcrumb ​

功能概述 ​

  • 自定义面包屑导航 ：用于创建自定义的面包屑导航栏，支持多级菜单展示。
  • 菜单项交互 ：支持点击菜单项触发事件，方便用户进行导航操作。
  • 子菜单展示 ：支持展示子菜单，增强导航的层次性和功能性。
  • 标签展示 ：支持在菜单项中展示标签，提供额外的信息展示。

组件特性 ​

  • 灵活配置 ：支持自定义菜单项的图标、标签和交互逻辑。
  • 多层次导航 ：支持多级菜单展示，满足复杂的导航需求。
  • 交互性强 ：支持点击事件和子菜单展示，提升用户体验。

代码结构 ​

组件定义 ​

  • 定义了 CustomBreadcrumb 组件，接收 CustomBreadcrumbType 类型的配置选项。
  • 使用 useState 定义了 items 状态变量，用于存储当前面包屑项。

方法与逻辑 ​

  • 面包屑项加载 ：通过 loadBreadItems 方法根据当前菜单项和选中键加载面包屑项。
  • 子菜单加载 ：通过 loadItemMenus 方法加载菜单项的子菜单，并设置点击事件。
  • 面包屑项渲染 ：在 Breadcrumb 组件中渲染面包屑项，支持点击事件和子菜单展示。

使用示例 ​

tsx
<CustomBreadcrumb
  selectKey={props.selectMenu.key}
  item={props.siderMenuData}
  onSelect={(item) => {
    onSelectClick(item);
  }}
></CustomBreadcrumb>

CustomBreadcrumb 组件用于在页面顶部显示面包屑导航，帮助用户了解当前页面的位置和导航路径。用户可以通过点击面包屑中的项来切换不同的菜单。

关键点总结 ​

  • 自定义面包屑导航 ：支持自定义菜单项的图标、标签和交互逻辑。
  • 多层次导航 ：支持多级菜单展示，满足复杂的导航需求。
  • 交互性强 ：支持点击事件和子菜单展示，提升用户体验。

注意事项 ​

  • 菜单项结构 ：确保菜单项的结构正确，避免因结构错误导致的组件展示问题。
  • 样式调整 ：根据实际需求调整组件的样式，如字体大小、标签颜色等。
  • 性能优化 ：在大量菜单项场景下，考虑实现虚拟滚动等优化措施，提升渲染性能。

CustomMenu ​

功能概述 ​

  • 自定义菜单 ：用于创建自定义的菜单组件，支持多级菜单和多种交互方式。
  • 搜索功能 ：支持搜索菜单项，方便在大量菜单中快速查找。
  • 展开 / 收起支持 ：支持菜单的展开和收起操作，提升用户体验。
  • 更多操作 ：支持为菜单项添加更多操作选项，如上下文菜单。
  • 徽标计数 ：支持在菜单项上展示徽标计数，提供额外的信息。

组件特性 ​

  • 灵活配置 ：支持自定义菜单项的图标、标签、徽标计数等。
  • 多层次菜单 ：支持多级菜单展示，满足复杂的菜单结构需求。
  • 交互性强 ：支持点击事件、上下文菜单等多种交互方式。
  • 搜索过滤 ：支持搜索功能，方便在大量菜单中快速查找。

代码结构 ​

组件定义 ​

  • 定义了 CustomMenu 组件，接收 CustomMenuType 类型的配置选项。
  • 使用 useState 定义了多个状态变量，如 filter（搜索过滤值）、selectedKeys（选中的菜单项键）、openKeys（展开的菜单项键）等。

方法与逻辑 ​

  • 菜单数据转换 ：通过 loadMenus 方法将菜单数据转换为原生菜单数据格式。
  • 搜索过滤 ：通过 loopFilterTree 方法实现搜索过滤功能，根据搜索值过滤菜单项。
  • 展开键加载 ：通过 loadOpenKeys 方法加载当前选中菜单项的展开键。
  • 菜单项渲染 ：通过 renderLabel 方法渲染菜单项的标题，支持展示徽标计数和更多操作按钮。
  • 菜单数据更新 ：通过 reloadData 方法根据展开键和搜索值更新菜单数据。

使用示例 ​

tsx
<CustomMenu
  item={parentMenu}
  collapsed={false}
  selectMenu={props.selectMenu}
  onSelect={(item) => {
    onSelectClick(item);
  }}
  onMenuClick={onOperateMenuClick}
/>
CustomMenu 组件用于在侧边栏中显示菜单项，并处理用户的点击事件。它接收菜单数据和当前选中的菜单项，支持展开和折叠状态，并在用户交互时触发相应的回调函数。

关键点总结 ​

  • 灵活配置 ：支持自定义菜单项的图标、标签、徽标计数等。
  • 多层次菜单 ：支持多级菜单展示，满足复杂的菜单结构需求。
  • 交互性强 ：支持点击事件、上下文菜单等多种交互方式。
  • 搜索过滤 ：支持搜索功能，方便在大量菜单中快速查找。

注意事项 ​

  • 菜单项结构 ：确保菜单项的结构正确，避免因结构错误导致的组件展示问题。
  • 样式调整 ：根据实际需求调整组件的样式，如字体大小、图标大小等。
  • 性能优化 ：在大量菜单项场景下，考虑实现虚拟滚动等优化措施，提升渲染性能。

CustomTree ​

功能概述 ​

  • 自定义树形组件 ：用于创建自定义的树形组件，支持多种交互方式和展示效果。
  • 搜索功能 ：支持搜索树形数据，方便在大量数据中快速查找。
  • 菜单操作 ：支持为树形节点添加更多操作选项，如上下文菜单。
  • 徽标计数 ：支持在树形节点上展示徽标计数，提供额外的信息。
  • 拖拽功能 ：支持树形节点的拖拽操作，提升用户体验。

组件特性 ​

  • 灵活配置 ：支持自定义节点的图标、标题、菜单等。
  • 多层次展示 ：支持多级树形结构展示，满足复杂的层级关系。
  • 交互性强 ：支持多种交互方式，如点击、双击、拖拽等。
  • 搜索过滤 ：支持搜索功能，方便在大量数据中快速查找。

代码结构 ​

组件定义 ​

  • 定义了 CustomTree 组件，接收 TreeType 类型的配置选项。
  • 使用 useState 定义了多个状态变量，如 mouseOverItem（当前鼠标悬停的节点）、searchValue（搜索值）等。

方法与逻辑 ​

  • 搜索过滤 ：通过 loopFilterTree 方法实现搜索过滤功能，根据搜索值过滤树形数据。
  • 菜单渲染 ：通过 renderMenu 方法渲染节点的菜单选项。
  • 标题渲染 ：通过 renderTreeTitle 方法渲染节点的标题，支持展示图标、徽标计数和菜单操作。
  • 搜索功能 ：通过 Input 组件实现搜索功能，用户输入的搜索值通过 onChange 方法进行处理。
  • 拖拽功能 ：支持树形节点的拖拽操作，提升用户体验。

使用示例 ​

tsx
<CustomTree
  showIcon
  searchable
  isDirectoryTree
  onSelect={onSelect}
  className={cls.docTree}
  treeData={buildTargetTree(space.shareTarget)}
/>
tsx
<CustomTree
  searchable
  showIcon
  onCheck={onCheck}
  treeData={identitys}
  checkable={multiple}
  className={cls.docTree}
  autoExpandParent={true}
  checkedKeys={selected.map((i) => i.id)}
  onSelect={(_, info) => {
    const item = identitys.find((i) => i.key === info.node.key)?.data;
    if (item) {
      if (multiple) {
        if (selected.every((a) => a.id != item.metadata.id)) {
          setSelected([
            { ...item.metadata, name: info.node.title },
            ...selected,
          ]);
        }
      } else {
        setSelected([{ ...item.metadata, name: info.node.title }]);
      }
    }
  }}
/>

CustomTree 组件用于在模态框中显示树形结构的组织和身份列表。第一个 CustomTree 用于显示组织结构，第二个 CustomTree 用于显示身份列表，并支持多选或单选模式。

关键点总结 ​

  • 灵活配置 ：支持自定义节点的图标、标题、菜单等。
  • 多层次展示 ：支持多级树形结构展示，满足复杂的层级关系。
  • 交互性强 ：支持多种交互方式，如点击、双击、拖拽等。
  • 搜索过滤 ：支持搜索功能，方便在大量数据中快速查找。

注意事项 ​

  • 树形数据结构 ：确保树形数据的结构正确，避免因数据结构错误导致的组件展示问题。
  • 样式调整 ：根据实际需求调整组件的样式，如字体大小、图标大小等。
  • 性能优化 ：在大量树形数据场景下，考虑实现虚拟滚动等优化措施，提升渲染性能。

云原生应用研究院版权所有