refactor: use generateName instead of uuid to generate metadata.name (#688)

#### What type of PR is this?

/kind improvement
/milestone 2.0

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

使用 metadata.generateName 代替 uuid 为 metadata.name 生成值。

Ref https://github.com/halo-dev/halo/pull/2563

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console 

测试方式：

1. 需要 `pnpm install`
2. 测试登录以及所有需要创建更新资源的业务模块。

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

```release-note
None
```

package.json

@@ -64,7 +64,6 @@
     "pinia": "^2.0.23",
     "pretty-bytes": "^6.0.0",
     "qs": "^6.11.0",
-    "uuid": "^9.0.0",
     "vue": "^3.2.44",
     "vue-grid-layout": "3.0.0-beta1",
     "vue-router": "^4.1.6",
@@ -84,7 +83,6 @@
     "@types/node": "^18.11.9",
     "@types/qs": "^6.9.7",
     "@types/randomstring": "^1.1.8",
-    "@types/uuid": "^8.3.4",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
     "@vitest/ui": "^0.25.1",

pnpm-lock.yaml

@@ -28,7 +28,6 @@ importers:
       '@types/node': ^18.11.9
       '@types/qs': ^6.9.7
       '@types/randomstring': ^1.1.8
-      '@types/uuid': ^8.3.4
       '@uppy/core': ^3.0.4
       '@uppy/dashboard': ^3.2.0
       '@uppy/drag-drop': ^3.0.1
@@ -83,7 +82,6 @@ importers:
       tailwindcss-themer: ^2.0.2
       typescript: ~4.7.4
       unplugin-icons: ^0.14.13
-      uuid: ^9.0.0
       vite: ^3.2.3
       vite-compression-plugin: ^0.0.4
       vite-plugin-externals: ^0.5.1
@@ -138,7 +136,6 @@ importers:
       pinia: 2.0.23_e7lp6ggkpgyi5vqd44m2kxvk6i
       pretty-bytes: 6.0.0
       qs: 6.11.0
-      uuid: 9.0.0
       vue: 3.2.45
       vue-grid-layout: 3.0.0-beta1
       vue-router: 4.1.6_vue@3.2.45
@@ -157,7 +154,6 @@ importers:
       '@types/node': 18.11.9
       '@types/qs': 6.9.7
       '@types/randomstring': 1.1.8
-      '@types/uuid': 8.3.4
       '@vitejs/plugin-vue': 3.2.0_vite@3.2.4+vue@3.2.45
       '@vitejs/plugin-vue-jsx': 2.1.1_vite@3.2.4+vue@3.2.45
       '@vitest/ui': 0.25.2
@@ -3229,10 +3225,6 @@ packages:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: false
 
-  /@types/uuid/8.3.4:
-    resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
-    dev: true
-
   /@types/web-bluetooth/0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
     dev: false
@@ -9043,11 +9035,6 @@ packages:
     hasBin: true
     dev: true
 
-  /uuid/9.0.0:
-    resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==}
-    hasBin: true
-    dev: false
-
   /v8-to-istanbul/9.0.1:
     resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==}
     engines: {node: '>=10.12.0'}

src/composables/use-setting-form.ts

@@ -133,14 +133,19 @@ export function useSettingForm(
       });
 
       if (!configMap.value.metadata.creationTimestamp) {
-        await apiClient.extension.configMap.createv1alpha1ConfigMap({
+        const { data } =
-          configMap: configMap.value,
+          await apiClient.extension.configMap.createv1alpha1ConfigMap({
-        });
+            configMap: configMap.value,
+          });
+
+        configMapName.value = data.metadata.name;
       } else {
-        await apiClient.extension.configMap.updatev1alpha1ConfigMap({
+        const { data } =
-          configMap: configMap.value,
+          await apiClient.extension.configMap.updatev1alpha1ConfigMap({
-          name: configMap.value.metadata.name,
+            configMap: configMap.value,
-        });
+            name: configMap.value.metadata.name,
+          });
+        configMapName.value = data.metadata.name;
       }
     } catch (e) {
       console.error("Failed to save configMap", e);

src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue

@@ -2,7 +2,6 @@
 import { VButton, VModal, VSpace } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
 import type { Group } from "@halo-dev/api-client";
-import { v4 as uuid } from "uuid";
 import { computed, ref, watch } from "vue";
 import cloneDeep from "lodash.clonedeep";
 import { apiClient } from "@/utils/api-client";
@@ -32,7 +31,8 @@ const initialFormState: Group = {
   apiVersion: "storage.halo.run/v1alpha1",
   kind: "Group",
   metadata: {
-    name: uuid(),
+    name: "",
+    generateName: "attachment-group-",
   },
 };
 
@@ -81,7 +81,6 @@ const onVisibleChange = (visible: boolean) => {
 
 const handleResetForm = () => {
   formState.value = cloneDeep(initialFormState);
-  formState.value.metadata.name = uuid();
   reset("attachment-group-form");
 };
 

src/modules/contents/attachments/components/AttachmentPoliciesModal.vue

@@ -10,7 +10,6 @@ import {
 import AttachmentPolicyEditingModal from "./AttachmentPolicyEditingModal.vue";
 import { ref, watch } from "vue";
 import type { Policy, PolicyTemplate } from "@halo-dev/api-client";
-import { v4 as uuid } from "uuid";
 import { formatDatetime } from "@/utils/date";
 import {
   useFetchAttachmentPolicy,
@@ -61,13 +60,14 @@ const handleOpenCreateNewPolicyModal = (policyTemplate: PolicyTemplate) => {
         name: policyTemplate.metadata.name,
       },
       configMapRef: {
-        name: uuid(),
+        name: "",
       },
     },
     apiVersion: "storage.halo.run/v1alpha1",
     kind: "Policy",
     metadata: {
-      name: uuid(),
+      name: "",
+      generateName: "attachment-policy-",
     },
   };
   policyEditingModal.value = true;
@@ -221,6 +221,7 @@ watch(
   </VModal>
 
   <AttachmentPolicyEditingModal
+    v-if="visible"
     v-model:visible="policyEditingModal"
     :policy="selectedPolicy"
     @close="onEditingModalClose"

src/modules/contents/attachments/components/AttachmentPolicyEditingModal.vue

@@ -6,7 +6,6 @@ import cloneDeep from "lodash.clonedeep";
 import { computed, ref, watch, watchEffect } from "vue";
 import { useSettingForm } from "@/composables/use-setting-form";
 import { apiClient } from "@/utils/api-client";
-import { v4 as uuid } from "uuid";
 import {
   reset,
   type FormKitSchemaCondition,
@@ -43,7 +42,8 @@ const initialFormState: Policy = {
   apiVersion: "storage.halo.run/v1alpha1",
   kind: "Policy",
   metadata: {
-    name: uuid(),
+    name: "",
+    generateName: "attachment-policy-",
   },
 };
 
@@ -53,11 +53,22 @@ const policyTemplate = ref<PolicyTemplate | undefined>();
 const settingName = computed(
   () => policyTemplate.value?.spec?.settingRef?.name
 );
-const configMapName = computed(() => formState.value.spec.configMapRef?.name);
+
+const configMapName = computed({
+  get() {
+    return formState.value.spec.configMapRef?.name;
+  },
+  set(value) {
+    formState.value.spec.configMapRef = {
+      name: value as string,
+    };
+  },
+});
 
 const {
   setting,
   configMapFormData,
+  configMap,
   saving,
   handleFetchConfigMap,
   handleFetchSettings,
@@ -102,6 +113,11 @@ const handleSave = async () => {
   try {
     saving.value = true;
 
+    if (!isUpdateMode.value) {
+      configMap.value.metadata.name = "";
+      configMap.value.metadata.generateName = "configMap-";
+    }
+
     await handleSaveConfigMap();
 
     if (isUpdateMode.value) {
@@ -112,6 +128,9 @@ const handleSave = async () => {
         }
       );
     } else {
+      formState.value.spec.configMapRef = {
+        name: configMap.value.metadata.name,
+      };
       await apiClient.extension.storage.policy.createstorageHaloRunV1alpha1Policy(
         {
           policy: formState.value,
@@ -129,7 +148,6 @@ const handleSave = async () => {
 
 const handleResetForm = () => {
   formState.value = cloneDeep(initialFormState);
-  formState.value.metadata.name = uuid();
   reset("attachment-policy-form");
 };
 

src/modules/contents/attachments/components/AttachmentUploadModal.vue

@@ -8,7 +8,6 @@ import {
   useFetchAttachmentPolicyTemplate,
 } from "../composables/use-attachment-policy";
 import AttachmentPolicyEditingModal from "./AttachmentPolicyEditingModal.vue";
-import { v4 as uuid } from "uuid";
 
 const props = withDefaults(
   defineProps<{
@@ -33,6 +32,7 @@ const { policyTemplates, handleFetchPolicyTemplates } =
   useFetchAttachmentPolicyTemplate();
 
 const selectedPolicy = ref<Policy>();
+const policyToCreate = ref<Policy>();
 const uploadVisible = ref(false);
 const policyEditingModal = ref(false);
 
@@ -50,20 +50,21 @@ watchEffect(() => {
 });
 
 const handleOpenCreateNewPolicyModal = (policyTemplate: PolicyTemplate) => {
-  selectedPolicy.value = {
+  policyToCreate.value = {
     spec: {
       displayName: "",
       templateRef: {
         name: policyTemplate.metadata.name,
       },
       configMapRef: {
-        name: uuid(),
+        name: "",
       },
     },
     apiVersion: "storage.halo.run/v1alpha1",
     kind: "Policy",
     metadata: {
-      name: uuid(),
+      name: "",
+      generateName: "attachment-policy-",
     },
   };
   policyEditingModal.value = true;
@@ -71,7 +72,7 @@ const handleOpenCreateNewPolicyModal = (policyTemplate: PolicyTemplate) => {
 
 const onEditingModalClose = async () => {
   await handleFetchPolicies();
-  selectedPolicy.value = policies.value[0];
+  policyToCreate.value = policies.value[0];
 };
 
 const onVisibleChange = (visible: boolean) => {
@@ -181,8 +182,9 @@ watch(
   </VModal>
 
   <AttachmentPolicyEditingModal
+    v-if="visible"
     v-model:visible="policyEditingModal"
-    :policy="selectedPolicy"
+    :policy="policyToCreate"
     @close="onEditingModalClose"
   />
 </template>

src/modules/contents/pages/SinglePageEditor.vue

@@ -12,12 +12,12 @@ import DefaultEditor from "@/components/editor/DefaultEditor.vue";
 import SinglePageSettingModal from "./components/SinglePageSettingModal.vue";
 import PostPreviewModal from "../posts/components/PostPreviewModal.vue";
 import type { SinglePage, SinglePageRequest } from "@halo-dev/api-client";
-import { v4 as uuid } from "uuid";
 import { computed, onMounted, ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 import { useRouteQuery } from "@vueuse/router";
 import cloneDeep from "lodash.clonedeep";
 import { useRouter } from "vue-router";
+import { randomUUID } from "@/utils/id";
 
 const router = useRouter();
 
@@ -45,7 +45,7 @@ const initialFormState: SinglePageRequest = {
     apiVersion: "content.halo.run/v1alpha1",
     kind: "SinglePage",
     metadata: {
-      name: uuid(),
+      name: randomUUID(),
     },
   },
   content: {
@@ -79,7 +79,7 @@ const handleSave = async () => {
       formState.value.page.spec.title = "无标题页面";
     }
     if (!formState.value.page.spec.slug) {
-      formState.value.page.spec.slug = uuid();
+      formState.value.page.spec.slug = new Date().getTime().toString();
     }
 
     if (isUpdateMode.value) {

src/modules/contents/pages/components/SinglePageSettingModal.vue

@@ -4,9 +4,9 @@ import { computed, ref, watchEffect } from "vue";
 import type { SinglePage } from "@halo-dev/api-client";
 import cloneDeep from "lodash.clonedeep";
 import { apiClient } from "@/utils/api-client";
-import { v4 as uuid } from "uuid";
 import { useThemeCustomTemplates } from "@/modules/interface/themes/composables/use-theme";
 import { singlePageLabels } from "@/constants/labels";
+import { randomUUID } from "@/utils/id";
 
 const initialFormState: SinglePage = {
   spec: {
@@ -31,7 +31,7 @@ const initialFormState: SinglePage = {
   apiVersion: "content.halo.run/v1alpha1",
   kind: "SinglePage",
   metadata: {
-    name: uuid(),
+    name: randomUUID(),
   },
 };
 

src/modules/contents/posts/PostEditor.vue

@@ -16,8 +16,8 @@ import { computed, onMounted, ref } from "vue";
 import cloneDeep from "lodash.clonedeep";
 import { apiClient } from "@/utils/api-client";
 import { useRouteQuery } from "@vueuse/router";
-import { v4 as uuid } from "uuid";
 import { useRouter } from "vue-router";
+import { randomUUID } from "@/utils/id";
 
 const router = useRouter();
 
@@ -47,7 +47,7 @@ const initialFormState: PostRequest = {
     apiVersion: "content.halo.run/v1alpha1",
     kind: "Post",
     metadata: {
-      name: uuid(),
+      name: randomUUID(),
     },
   },
   content: {
@@ -80,7 +80,7 @@ const handleSave = async () => {
     }
 
     if (!formState.value.post.spec.slug) {
-      formState.value.post.spec.slug = uuid();
+      formState.value.post.spec.slug = new Date().getTime().toString();
     }
 
     if (isUpdateMode.value) {

src/modules/contents/posts/categories/components/CategoryEditingModal.vue

@@ -14,7 +14,6 @@ import type { Category } from "@halo-dev/api-client";
 import cloneDeep from "lodash.clonedeep";
 import { reset } from "@formkit/core";
 import { setFocus } from "@/formkit/utils/focus";
-import { v4 as uuid } from "uuid";
 import { useThemeCustomTemplates } from "@/modules/interface/themes/composables/use-theme";
 
 const props = withDefaults(
@@ -47,7 +46,8 @@ const initialFormState: Category = {
   apiVersion: "content.halo.run/v1alpha1",
   kind: "Category",
   metadata: {
-    name: uuid(),
+    name: "",
+    generateName: "category-",
   },
 };
 
@@ -92,7 +92,6 @@ const onVisibleChange = (visible: boolean) => {
 
 const handleResetForm = () => {
   formState.value = cloneDeep(initialFormState);
-  formState.value.metadata.name = uuid();
   reset("category-form");
 };
 

src/modules/contents/posts/components/PostSettingModal.vue

@@ -4,9 +4,9 @@ import { computed, ref, watchEffect } from "vue";
 import type { Post } from "@halo-dev/api-client";
 import cloneDeep from "lodash.clonedeep";
 import { apiClient } from "@/utils/api-client";
-import { v4 as uuid } from "uuid";
 import { useThemeCustomTemplates } from "@/modules/interface/themes/composables/use-theme";
 import { postLabels } from "@/constants/labels";
+import { randomUUID } from "@/utils/id";
 
 const initialFormState: Post = {
   spec: {
@@ -33,7 +33,7 @@ const initialFormState: Post = {
   apiVersion: "content.halo.run/v1alpha1",
   kind: "Post",
   metadata: {
-    name: uuid(),
+    name: randomUUID(),
   },
 };
 

src/modules/contents/posts/tags/components/TagEditingModal.vue

@@ -20,7 +20,6 @@ import type { Tag } from "@halo-dev/api-client";
 import cloneDeep from "lodash.clonedeep";
 import { reset } from "@formkit/core";
 import { setFocus } from "@/formkit/utils/focus";
-import { v4 as uuid } from "uuid";
 
 const props = withDefaults(
   defineProps<{
@@ -50,7 +49,8 @@ const initialFormState: Tag = {
   apiVersion: "content.halo.run/v1alpha1",
   kind: "Tag",
   metadata: {
-    name: uuid(),
+    name: "",
+    generateName: "tag-",
   },
 };
 
@@ -95,7 +95,6 @@ const onVisibleChange = (visible: boolean) => {
 
 const handleResetForm = () => {
   formState.value = cloneDeep(initialFormState);
-  formState.value.metadata.name = uuid();
   reset("tag-form");
 };
 

src/modules/interface/menus/components/MenuEditingModal.vue

@@ -2,7 +2,6 @@
 import { VButton, VModal, VSpace } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
 import type { Menu } from "@halo-dev/api-client";
-import { v4 as uuid } from "uuid";
 import { computed, ref, watch } from "vue";
 import { apiClient } from "@/utils/api-client";
 import { reset } from "@formkit/core";
@@ -34,7 +33,8 @@ const initialFormState: Menu = {
   apiVersion: "v1alpha1",
   kind: "Menu",
   metadata: {
-    name: uuid(),
+    name: "",
+    generateName: "menu-",
   },
 };
 
@@ -76,7 +76,6 @@ const onVisibleChange = (visible: boolean) => {
 
 const handleResetForm = () => {
   formState.value = cloneDeep(initialFormState);
-  formState.value.metadata.name = uuid();
   reset("menu-form");
 };
 

src/modules/interface/menus/components/MenuItemEditingModal.vue

@@ -3,7 +3,6 @@ import { VButton, VModal, VSpace } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
 import { computed, ref, watch } from "vue";
 import type { Menu, MenuItem } from "@halo-dev/api-client";
-import { v4 as uuid } from "uuid";
 import { apiClient } from "@/utils/api-client";
 import { reset } from "@formkit/core";
 import cloneDeep from "lodash.clonedeep";
@@ -40,7 +39,8 @@ const initialFormState: MenuItem = {
   apiVersion: "v1alpha1",
   kind: "MenuItem",
   metadata: {
-    name: uuid(),
+    name: "",
+    generateName: "menu-item-",
   },
 };
 
@@ -122,7 +122,6 @@ const onVisibleChange = (visible: boolean) => {
 
 const handleResetForm = () => {
   formState.value = cloneDeep(initialFormState);
-  formState.value.metadata.name = uuid();
   selectedMenuItemSource.value = menuItemSources[0].value;
   selectedRef.value = "";
   selectedParentMenuItem.value = "";

src/modules/system/roles/components/RoleEditingModal.vue

@@ -10,7 +10,6 @@ import {
 } from "@/modules/system/roles/composables/use-role";
 import cloneDeep from "lodash.clonedeep";
 import { reset } from "@formkit/core";
-import { v4 as uuid } from "uuid";
 import { setFocus } from "@/formkit/utils/focus";
 
 const props = withDefaults(
@@ -101,7 +100,6 @@ const onVisibleChange = (visible: boolean) => {
 
 const handleResetForm = () => {
   formState.value = cloneDeep(initialFormState);
-  formState.value.metadata.name = uuid();
   reset("role-form");
 };
 </script>
@@ -132,15 +130,6 @@ const handleResetForm = () => {
             type="text"
             validation="required"
           ></FormKit>
-          <FormKit
-            v-model="formState.metadata.name"
-            help="角色别名，用于区分角色，不能重复，创建之后不能修改"
-            label="别名"
-            type="text"
-            name="name"
-            :disabled="isUpdateMode"
-            validation="required"
-          ></FormKit>
         </FormKit>
       </VTabItem>
       <VTabItem id="permissions" label="权限">

src/modules/system/roles/composables/use-role.ts

@@ -15,6 +15,7 @@ const initialFormState: Role = {
   kind: "Role",
   metadata: {
     name: "",
+    generateName: "role-",
     labels: {},
     annotations: {
       [rbacAnnotations.DEPENDENCIES]: "",

src/modules/system/users/Login.vue

@@ -5,7 +5,6 @@ import {
   VButton,
   Toast,
 } from "@halo-dev/components";
-import { v4 as uuid } from "uuid";
 import qs from "qs";
 import { inject, onBeforeMount, onMounted, ref } from "vue";
 import { submitForm } from "@formkit/vue";
@@ -14,6 +13,7 @@ import axios from "axios";
 import type { User } from "@halo-dev/api-client";
 import { setFocus } from "@/formkit/utils/focus";
 import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
+import { randomUUID } from "@/utils/id";
 
 interface LoginForm {
   _csrf: string;
@@ -30,7 +30,7 @@ const loginForm = ref<LoginForm>({
 const loading = ref(false);
 
 const handleGenerateToken = async () => {
-  const token = uuid();
+  const token = randomUUID();
   loginForm.value._csrf = token;
   document.cookie = `XSRF-TOKEN=${token}; Path=/;`;
 };

src/utils/id.ts

@@ -0,0 +1,7 @@
+export function randomUUID() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0,
+      v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}