refactor: remove the ability to edit user using yaml (#799)

#### What type of PR is this?

/kind improvement

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

移除使用 yaml 编辑用户信息的功能。

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

Fixes https://github.com/halo-dev/halo/issues/3046

#### Special notes for your reviewer:

None

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

```release-note
移除 Console 端使用 yaml 编辑用户信息的功能
```

package.json

@@ -76,8 +76,7 @@
     "vue": "^3.2.45",
     "vue-grid-layout": "3.0.0-beta1",
     "vue-router": "^4.1.6",
-    "vuedraggable": "^4.1.0",
+    "vuedraggable": "^4.1.0"
-    "yaml": "^2.1.3"
   },
   "devDependencies": {
     "@changesets/cli": "^2.25.2",

pnpm-lock.yaml

@@ -98,7 +98,6 @@ importers:
       vue-router: ^4.1.6
       vue-tsc: ^1.0.9
       vuedraggable: ^4.1.0
-      yaml: ^2.1.3
     dependencies:
       '@emoji-mart/data': 1.0.8
       '@formkit/core': 1.0.0-beta.12-e579559
@@ -144,7 +143,6 @@ importers:
       vue-grid-layout: 3.0.0-beta1
       vue-router: 4.1.6_vue@3.2.45
       vuedraggable: 4.1.0_vue@3.2.45
-      yaml: 2.1.3
     devDependencies:
       '@changesets/cli': 2.25.2
       '@iconify-json/mdi': 1.1.36
@@ -9923,6 +9921,7 @@ packages:
   /yaml/2.1.3:
     resolution: {integrity: sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==}
     engines: {node: '>= 14'}
+    dev: true
 
   /yargs-parser/18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}

src/modules/system/users/components/UserEditingModal.vue

@@ -5,19 +5,10 @@ import { apiClient } from "@/utils/api-client";
 import type { User } from "@halo-dev/api-client";
 
 // components
-import {
+import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
-  IconCodeBoxLine,
-  IconEye,
-  Toast,
-  VButton,
-  VCodemirror,
-  VModal,
-  VSpace,
-} from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
 
 // libs
-import YAML from "yaml";
 import cloneDeep from "lodash.clonedeep";
 import { reset } from "@formkit/core";
 
@@ -60,8 +51,6 @@ const initialFormState: User = {
 
 const formState = ref<User>(cloneDeep(initialFormState));
 const saving = ref(false);
-const rawMode = ref(false);
-const raw = ref("");
 
 const isUpdateMode = computed(() => {
   return !!formState.value.metadata.creationTimestamp;
@@ -71,10 +60,6 @@ const creationModalTitle = computed(() => {
   return isUpdateMode.value ? "编辑用户" : "新增用户";
 });
 
-const modalWidth = computed(() => {
-  return rawMode.value ? 800 : 700;
-});
-
 watch(
   () => props.visible,
   (visible) => {
@@ -132,88 +117,67 @@ const handleCreateUser = async () => {
     saving.value = false;
   }
 };
-
-const handleRawModeChange = () => {
-  rawMode.value = !rawMode.value;
-
-  if (rawMode.value) {
-    raw.value = YAML.stringify(formState.value);
-  } else {
-    formState.value = YAML.parse(raw.value);
-  }
-};
 </script>
 <template>
   <VModal
     :title="creationModalTitle"
     :visible="visible"
-    :width="modalWidth"
+    :width="700"
     @update:visible="onVisibleChange"
   >
-    <template #actions>
+    <FormKit
-      <span @click="handleRawModeChange">
+      id="user-form"
-        <IconCodeBoxLine v-if="!rawMode" v-tooltip="`查看编码`" />
+      name="user-form"
-        <IconEye v-else v-tooltip="`查看表单`" />
+      :config="{ validationVisibility: 'submit' }"
-      </span>
+      type="form"
-    </template>
+      @submit="handleCreateUser"
-
+    >
-    <VCodemirror v-show="rawMode" v-model="raw" height="50vh" language="yaml" />
-
-    <div v-show="!rawMode">
       <FormKit
-        id="user-form"
+        id="userNameInput"
-        name="user-form"
+        v-model="formState.metadata.name"
-        :config="{ validationVisibility: 'submit' }"
+        :disabled="isUpdateMode"
-        type="form"
+        label="用户名"
-        @submit="handleCreateUser"
+        type="text"
-      >
+        name="name"
-        <FormKit
+        validation="required|alphanumeric|length:0,50"
-          id="userNameInput"
+      ></FormKit>
-          v-model="formState.metadata.name"
+      <FormKit
-          :disabled="isUpdateMode"
+        id="displayNameInput"
-          label="用户名"
+        v-model="formState.spec.displayName"
-          type="text"
+        label="显示名称"
-          name="name"
+        type="text"
-          validation="required|alphanumeric|length:0,50"
+        name="displayName"
-        ></FormKit>
+        validation="required|length:0,50"
-        <FormKit
+      ></FormKit>
-          id="displayNameInput"
+      <FormKit
-          v-model="formState.spec.displayName"
+        v-model="formState.spec.email"
-          label="显示名称"
+        label="电子邮箱"
-          type="text"
+        type="email"
-          name="displayName"
+        name="email"
-          validation="required|length:0,50"
+        validation="required|email|length:0,100"
-        ></FormKit>
+      ></FormKit>
-        <FormKit
+      <FormKit
-          v-model="formState.spec.email"
+        v-model="formState.spec.phone"
-          label="电子邮箱"
+        label="手机号"
-          type="email"
+        type="text"
-          name="email"
+        name="phone"
-          validation="required|email|length:0,100"
+        validation="length:0,20"
-        ></FormKit>
+      ></FormKit>
-        <FormKit
+      <FormKit
-          v-model="formState.spec.phone"
+        v-model="formState.spec.avatar"
-          label="手机号"
+        label="头像"
-          type="text"
+        type="attachment"
-          name="phone"
+        name="avatar"
-          validation="length:0,20"
+        validation="url|length:0,1024"
-        ></FormKit>
+      ></FormKit>
-        <FormKit
+      <FormKit
-          v-model="formState.spec.avatar"
+        v-model="formState.spec.bio"
-          label="头像"
+        label="描述"
-          type="attachment"
+        type="textarea"
-          name="avatar"
+        name="bio"
-          validation="url|length:0,1024"
+        validation="length:0,2048"
-        ></FormKit>
+      ></FormKit>
-        <FormKit
+    </FormKit>
-          v-model="formState.spec.bio"
-          label="描述"
-          type="textarea"
-          name="bio"
-          validation="length:0,2048"
-        ></FormKit>
-      </FormKit>
-    </div>
     <template #footer>
       <VSpace>
         <SubmitButton