feat: add required indicator for formkit label (#3824)

#### What type of PR is this?

/kind improvement
/area console
/milestone 2.5.x

#### What this PR does / why we need it:

为 FormKit 表单中包含了 required 验证的表单元素的 label 添加指示器（*），优化可访问性。

<img width="694" alt="image" src="https://user-images.githubusercontent.com/21301288/233822533-6a30b43e-738a-47f3-92c1-045d34cc1ba3.png">

#### Which issue(s) this PR fixes:

Fixes #3823 

#### Special notes for your reviewer:

测试方式：

1. 检查 Console 端的表单中必填项的 label 是否添加了 * 即可。

#### Does this PR introduce a user-facing change?

```release-note
为 FormKit 表单中包含了 required 验证的表单元素的 label 添加指示器（*），优化可访问性。
```

console/src/formkit/formkit.config.ts

@@ -21,12 +21,18 @@ import { roleSelect } from "./inputs/role-select";
 import radioAlt from "./plugins/radio-alt";
 import stopImplicitSubmission from "./plugins/stop-implicit-submission";
 import passwordPreventAutocomplete from "./plugins/password-prevent-autocomplete";
+import requiredAsterisk from "./plugins/required-asterisk";
 
 const config: DefaultConfigOptions = {
   config: {
     classes: generateClasses(theme),
   },
-  plugins: [radioAlt, stopImplicitSubmission, passwordPreventAutocomplete],
+  plugins: [
+    radioAlt,
+    stopImplicitSubmission,
+    passwordPreventAutocomplete,
+    requiredAsterisk,
+  ],
   inputs: {
     form,
     group,

console/src/formkit/plugins/required-asterisk.ts

@@ -0,0 +1,35 @@
+import type { FormKitNode } from "@formkit/core";
+
+const isCheckboxAndRadioMultiple = (node) =>
+  (node.props.type === "checkbox" || node.props.type === "radio") &&
+  node.props.options;
+
+export default function requiredAsterisk(node: FormKitNode) {
+  node.on("created", () => {
+    if (!node.props.definition) return;
+
+    const schemaFn = node.props.definition?.schema;
+
+    if (typeof schemaFn !== "function") return;
+
+    node.props.definition.schema = (sectionsSchema = {}) => {
+      const isRequired = node.props.parsedRules.some(
+        (rule) => rule.name === "required"
+      );
+
+      if (isRequired) {
+        if (isCheckboxAndRadioMultiple(node)) {
+          sectionsSchema.legend = {
+            children: ["$label", " *"],
+          };
+        } else {
+          sectionsSchema.label = {
+            children: ["$label", " *"],
+          };
+        }
+      }
+
+      return schemaFn(sectionsSchema);
+    };
+  });
+}