feat: improve layout and styles of group formkit input (#3786)

#### What type of PR is this?

/kind feature
/area console
/milestone 2.5.x

Fixes #3734

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

为 FormKit 的 group 输入组件重构布局和样式。

before:

<img width="591" alt="image" src="https://user-images.githubusercontent.com/21301288/232968801-c15bfdcc-5bbe-493e-8a96-a7ff3442e52d.png">


after:

<img width="580" alt="image" src="https://user-images.githubusercontent.com/21301288/232968757-8892f386-3ff2-4147-b1f7-cbfbcfd5bc6e.png">

可以测试的 FormKit Schema：

```yaml
- $formkit: group
  name: author
  label: 作者
  children:
    - $formkit: text
      name: name
      label: 名称
    - $formkit: text
      name: email
      label: Email
```


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

```release-note
为 Console 端 FormKit 的 group 输入组件重构布局和样式。
```

console/src/formkit/formkit.config.ts

@@ -3,6 +3,7 @@ import theme from "./theme";
 import { zh, en } from "@formkit/i18n";
 import type { DefaultConfigOptions } from "@formkit/vue";
 import { form } from "./inputs/form";
+import { group } from "./inputs/group";
 import { attachment } from "./inputs/attachment";
 import { code } from "./inputs/code";
 import { repeater } from "./inputs/repeater";
@@ -28,6 +29,7 @@ const config: DefaultConfigOptions = {
   plugins: [radioAlt, stopImplicitSubmission, passwordPreventAutocomplete],
   inputs: {
     form,
+    group,
     attachment,
     code,
     repeater,

console/src/formkit/inputs/group.ts

@@ -0,0 +1,29 @@
+import type { FormKitTypeDefinition } from "@formkit/core";
+
+import {
+  disablesChildren,
+  outer,
+  fieldset,
+  legend,
+  help,
+  inner,
+  message,
+  messages,
+} from "@formkit/inputs";
+
+export const group: FormKitTypeDefinition = {
+  schema: outer(
+    fieldset(
+      legend("$label"),
+      help("$help"),
+      inner("$slots.default"),
+      messages(message("$message.value"))
+    )
+  ),
+
+  type: "group",
+
+  props: [],
+
+  features: [disablesChildren],
+};

console/src/formkit/inputs/repeater/Repeater.vue

@@ -7,6 +7,7 @@ import {
   IconArrowDownCircleLine,
 } from "@halo-dev/components";
 import type { FormKitFrameworkContext } from "@formkit/core";
+import { group } from "@formkit/inputs";
 import type { PropType } from "vue";
 import cloneDeep from "lodash.clonedeep";
 
@@ -62,7 +63,7 @@ const handleMoveDown = (index: number) => {
           :id="`${context.node.name}-group-${index}`"
           :key="`${context.node.name}-group-${index}`"
           :model-value="item"
-          type="group"
+          :type="group"
         >
           <slot />
         </FormKit>

console/src/formkit/theme.ts

@@ -88,9 +88,17 @@ const theme: Record<string, Record<string, string>> = {
     inner: "flex flex-col gap-4",
     items: "flex flex-col w-full gap-2",
     item: "border rounded-base grid grid-cols-12 focus-within:border-primary transition-all overflow-hidden focus-within:shadow-sm",
-    content: "flex-1 p-2 col-span-11",
+    content: "flex-1 p-2 col-span-11  divide-y divide-gray-100",
     controls: "bg-gray-200 col-span-1 flex items-center justify-center",
   },
+  group: {
+    label: textClassification.label,
+    legend: `${textClassification.label} px-2`,
+    fieldset: boxClassification.fieldset,
+    wrapper: boxClassification.wrapper,
+    help: boxClassification.wrapper,
+    inner: "flex flex-col px-2 divide-y divide-gray-100",
+  },
   tagSelect: {
     ...textClassification,
     inner: `${textClassification.inner} !overflow-visible !h-auto min-h-[2.25rem]`,