SharePoint列格式使用JSON - RAG状态灯与文本，如何让它正确对齐？

在SharePoint中，可以使用JSON格式来自定义列的显示方式，包括将RAG（红绿黄）状态灯与文本对齐。下面是一个示例JSON代码，演示了如何实现对齐：

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "sp-field-dataRAG"
  },
  "style": {
    "display": "flex",
    "align-items": "center"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "margin-right": "8px"
      }
    },
    {
      "elmType": "span",
      "style": {
        "width": "10px",
        "height": "10px",
        "border-radius": "50%",
        "background-color": {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "红"
              ]
            },
            "#FF0000",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "黄"
                  ]
                },
                "#FFFF00",
                "#00FF00"
              ]
            }
          ]
        }
      }
    }
  ]
}

解释：

"elmType": "div"：创建一个 <div> 元素用于包裹状态灯和文本。
"attributes": {"class": "sp-field-dataRAG"}：添加一个CSS class，用于定义状态灯和文本的样式。
"style": {"display": "flex", "align-items": "center"}：将容器设置为flex布局，并使其内部元素垂直居中。
"children"：包含了两个子元素，一个用于显示文本，一个用于显示状态灯。
"elmType": "span"：创建一个 <span> 元素用于显示文本。
"txtContent": "@currentField"：将当前列的值显示为文本。
"style": {"margin-right": "8px"}：设置文本与状态灯之间的右边距。
"style": {"width": "10px", "height": "10px", "border-radius": "50%", "background-color": {...}}"：设置状态灯的样式，包括宽度、高度、圆角和背景颜色。
"operator": "?"：使用条件操作符，根据当前列的值设置不同的背景颜色。
"operator": "=="：比较操作符，用于比较当前列的值与指定的值是否相等。
"operands": [...]：操作数，指定条件操作符的操作数，包括比较的值和根据比较结果返回的颜色。