feat: add support for creating a new group when uploading attachments (…

…#6951)

#### What type of PR is this?

/kind improvement
/area ui
/milestone 2.20.x

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

支持在附件上传界面创建新分组。

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

Fixes #6942 

#### Special notes for your reviewer:

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

```release-note
支持在附件上传界面创建新分组。
```

ui/console-src/modules/contents/attachments/components/AttachmentUploadModal.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import UppyUpload from "@/components/upload/UppyUpload.vue";
 import type { PolicyTemplate } from "@halo-dev/api-client";
 import {
   IconAddCircle,
@@ -15,21 +16,23 @@ import {
   useFetchAttachmentPolicyTemplate,
 } from "../composables/use-attachment-policy";
 import AttachmentGroupBadge from "./AttachmentGroupBadge.vue";
+import AttachmentGroupEditingModal from "./AttachmentGroupEditingModal.vue";
 import AttachmentPolicyBadge from "./AttachmentPolicyBadge.vue";
 import AttachmentPolicyEditingModal from "./AttachmentPolicyEditingModal.vue";
 
 const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const { groups } = useFetchAttachmentGroup();
+const { groups, handleFetchGroups } = useFetchAttachmentGroup();
 const { policies, handleFetchPolicies } = useFetchAttachmentPolicy();
 const { policyTemplates } = useFetchAttachmentPolicyTemplate();
 
 const modal = ref<InstanceType<typeof VModal> | null>(null);
 const selectedGroupName = useLocalStorage("attachment-upload-group", "");
 const selectedPolicyName = useLocalStorage("attachment-upload-policy", "");
 const policyEditingModal = ref(false);
+const groupEditingModal = ref(false);
 const policyTemplateNameToCreate = ref();
 
 onMounted(() => {
@@ -43,13 +46,23 @@ const handleOpenCreateNewPolicyModal = (policyTemplate: PolicyTemplate) => {
   policyEditingModal.value = true;
 };
 
+const handleOpenCreateNewGroupModal = () => {
+  groupEditingModal.value = true;
+};
+
 const onEditingModalClose = async () => {
   await handleFetchPolicies();
   policyTemplateNameToCreate.value = undefined;
   selectedPolicyName.value = policies.value?.[0].metadata.name;
   policyEditingModal.value = false;
 };
+
+const onGroupEditingModalClose = async () => {
+  await handleFetchGroups();
+  groupEditingModal.value = false;
+};
 </script>
+
 <template>
   <VModal
     ref="modal"
@@ -128,7 +141,15 @@ const onEditingModalClose = async () => {
           :is-selected="group.metadata.name === selectedGroupName"
           :features="{ actions: false, checkIcon: true }"
           @click="selectedGroupName = group.metadata.name"
-        >
+        />
+
+        <AttachmentGroupBadge @click="handleOpenCreateNewGroupModal">
+          <template #text>
+            <span>{{ $t("core.common.buttons.new") }}</span>
+          </template>
+          <template #actions>
+            <IconAddCircle />
+          </template>
         </AttachmentGroupBadge>
       </div>
       <UppyUpload
@@ -155,4 +176,9 @@ const onEditingModalClose = async () => {
     :template-name="policyTemplateNameToCreate"
     @close="onEditingModalClose"
   />
+
+  <AttachmentGroupEditingModal
+    v-if="groupEditingModal"
+    @close="onGroupEditingModalClose"
+  />
 </template>