按层级对齐行：Audit Area关联项排版问题解决方案咨询

问题说明 #

当审计领域关联多个关键控制和SCOTABD项时，现有排版无法清晰展示层级关联，内容混乱难以阅读，需实现按审计领域分组、下属子项对齐的表格式布局。

当前数据结构（中文翻译版） #

[
  {
    title: "审计领域",
    parent: ["审计领域1", "审计领域2"]
  },
  {
    title: "SCOTABD项",
    children: [{
      text: "SCOTABD 1",
      parent: "审计领域1"
    },
    {
      text: "SCOTABD 2",
      parent: "审计领域1"
    },
    {
      text: "SCOTABD 3",
      parent: "审计领域2"
    }]
  },
  {
    title: "关键控制项",
    children: [{
      text: "关键控制名称1",
      parent: "审计领域1"
    },
    {
      text: "关键控制名称2",
      parent: "审计领域1"
    },
    {
      text: "关键控制名称3",
      parent: "审计领域2"
    },
    {
      text: "关键控制名称4",
      parent: "审计领域2"
    }]
  }
]

当前JSX代码（中文注释版） #

{data.map((item) => {
  return (
    <Box>
      <ItemHeading>{item.title}</ItemHeading>
      {/* 渲染审计领域列表 */}
      {item.parent &&
        item.parent.map((parent, index) => (
          <Typography key={index} variant="body1">
            {parent}
          </Typography>
        ))}
      {/* 渲染SCOTABD或关键控制项 */}
      {item.children &&
        item.children.map((child, index) => (
          <Typography key={index} variant="body1">
            {child.text}
          </Typography>
        ))}
    </Box>
  );
})}

解决方案 #

1. 重组数据结构 #

将扁平数据转换为按审计领域分组的嵌套结构，明确层级关联：

// 提取各类型数据
const auditAreaList = data.find(item => item.title === "审计领域").parent;
const scotabdList = data.find(item => item.title === "SCOTABD项").children;
const keyControlList = data.find(item => item.title === "关键控制项").children;

// 重组为分组结构
const groupedData = auditAreaList.map(area => ({
  areaName: area,
  scotabds: scotabdList.filter(item => item.parent === area).map(i => i.text),
  keyControls: keyControlList.filter(item => item.parent === area).map(i => i.text)
}));

2. 编写渲染JSX #

使用flex布局实现三列对齐，确保子项按审计领域分组展示：

<Box>
  {/* 标题行 */}
  <Box display="flex" gap="2rem" marginBottom={2}>
    <ItemHeading flex={1}>审计领域</ItemHeading>
    <ItemHeading flex={1}>SCOTABD项</ItemHeading>
    <ItemHeading flex={1}>关键控制项</ItemHeading>
  </Box>

  {/* 数据行 */}
  {groupedData.map((group, idx) => (
    <Box key={idx} display="flex" gap="2rem" marginBottom={1}>
      {/* 审计领域列 */}
      <Typography variant="body1" flex={1}>
        {group.areaName}
      </Typography>

      {/* SCOTABD列 */}
      <Box flex={1}>
        {group.scotabds.map((item, subIdx) => (
          <Typography key={subIdx} variant="body1">
            {item}
          </Typography>
        ))}
      </Box>

      {/* 关键控制列 */}
      <Box flex={1}>
        {group.keyControls.map((item, subIdx) => (
          <Typography key={subIdx} variant="body1">
            {item}
          </Typography>
        ))}
      </Box>
    </Box>
  ))}
</Box>

3. 布局说明 #

• 通过display: flex和flex:1实现三列均分宽度，确保列对齐
• 同一审计领域下的子项在对应列内垂直排列，层级关系清晰
• 使用gap控制列间距，marginBottom控制行间距，提升可读性

预期效果描述 #

• 顶部显示三列标题：审计领域、SCOTABD项、关键控制项
• 每一行对应一个审计领域，该行第二列展示该领域下所有SCOTABD项，第三列展示所有关键控制项
• 各列子项垂直对齐，整体布局规整，层级关联一目了然

内容的提问来源于stack exchange，提问作者Dave Spencer Bacay