From 0f8e5fad8081e8818a416aef6fe7b322266f3f63 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Thu, 23 Feb 2023 17:08:12 +0800 Subject: [PATCH] refactor: use tanstack query to refactor attachments-related fetching (#878) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### What type of PR is this? /kind improvement #### What this PR does / why we need it: 使用 [TanStack Query](https://github.com/TanStack/query) 重构附件相关数据请求的相关逻辑。 #### Which issue(s) this PR fixes: Ref https://github.com/halo-dev/halo/issues/3360 #### Special notes for your reviewer: 测试方式： 1. 测试附件管理页面的筛选、存储策略、分组等业务。 2. 测试附件选择模态框组件。 #### Does this PR introduce a user-facing change? ```release-note None ``` --- src/components/editor/DefaultEditor.vue | 4 +- .../contents/attachments/AttachmentList.vue | 62 +++---- .../components/AttachmentDetailModal.vue | 48 +++-- .../components/AttachmentGroupList.vue | 7 +- .../components/AttachmentPoliciesModal.vue | 23 +-- .../components/AttachmentUploadModal.vue | 34 ++-- .../CoreSelectorProvider.vue | 30 ++-- .../composables/use-attachment-group.ts | 59 ++----- .../composables/use-attachment-policy.ts | 97 +++------- .../attachments/composables/use-attachment.ts | 167 +++++++----------- 10 files changed, 198 insertions(+), 333 deletions(-) diff --git a/src/components/editor/DefaultEditor.vue b/src/components/editor/DefaultEditor.vue index a432d95c..879e7584 100644 --- a/src/components/editor/DefaultEditor.vue +++ b/src/components/editor/DefaultEditor.vue @@ -339,7 +339,7 @@ const editor = useEditor({ }); // image drag and paste upload -const { policies } = useFetchAttachmentPolicy({ fetchOnMounted: true }); +const { policies } = useFetchAttachmentPolicy(); type Task = { file: File; @@ -349,7 +349,7 @@ type Task = { const uploadQueue: queueAsPromised = fastq.promise(asyncWorker, 1); async function asyncWorker(arg: Task): Promise { - if (!policies.value.length) { + if (!policies.value?.length) { Toast.warning("目前没有可用的存储策略"); return; } diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue index 17f61f44..900e3492 100644 --- a/src/modules/contents/attachments/AttachmentList.vue +++ b/src/modules/contents/attachments/AttachmentList.vue @@ -51,10 +51,8 @@ const policyVisible = ref(false); const uploadVisible = ref(false); const detailVisible = ref(false); -const { policies } = useFetchAttachmentPolicy({ fetchOnMounted: true }); -const { groups, handleFetchGroups } = useFetchAttachmentGroup({ - fetchOnMounted: true, -}); +const { policies } = useFetchAttachmentPolicy(); +const { groups, handleFetchGroups } = useFetchAttachmentGroup(); const selectedGroup = ref(); @@ -85,26 +83,24 @@ const SortItems: SortItem[] = [ const selectedPolicy = ref(); const selectedUser = ref(); -const keyword = ref(""); const selectedSortItem = ref(); - const selectedSortItemValue = computed(() => { return selectedSortItem.value?.value; }); function handleSelectPolicy(policy: Policy | undefined) { selectedPolicy.value = policy; - handleFetchAttachments({ page: 1 }); + page.value = 1; } function handleSelectUser(user: User | undefined) { selectedUser.value = user; - handleFetchAttachments({ page: 1 }); + page.value = 1; } function handleSortItemChange(sortItem?: SortItem) { selectedSortItem.value = sortItem; - handleFetchAttachments({ page: 1 }); + page.value = 1; } function handleKeywordChange() { @@ -112,12 +108,12 @@ function handleKeywordChange() { if (keywordNode) { keyword.value = keywordNode._value as string; } - handleFetchAttachments({ page: 1 }); + page.value = 1; } function handleClearKeyword() { keyword.value = ""; - handleFetchAttachments({ page: 1 }); + page.value = 1; } const hasFilters = computed(() => { @@ -134,19 +130,24 @@ function handleClearFilters() { selectedUser.value = undefined; selectedSortItem.value = undefined; keyword.value = ""; - handleFetchAttachments({ page: 1 }); + page.value = 1; } +const keyword = ref(""); +const page = ref(1); +const size = ref(20); + const { attachments, selectedAttachment, selectedAttachments, checkedAll, - loading, + isLoading, + isFetching, + total, handleFetchAttachments, handleSelectNext, handleSelectPrevious, - handlePaginationChange, handleDelete, handleDeleteInBatch, handleCheckAll, @@ -159,6 +160,8 @@ const { user: selectedUser, keyword: keyword, sort: selectedSortItemValue, + page: page, + size: size, }); const handleMove = async (group: Group) => { @@ -209,21 +212,16 @@ const onDetailModalClose = () => { selectedAttachment.value = undefined; nameQuery.value = undefined; nameQueryAttachment.value = undefined; - handleFetchAttachments({ mute: true }); + handleFetchAttachments(); }; const onUploadModalClose = () => { routeQueryAction.value = undefined; - handleFetchAttachments({ mute: true }); -}; - -const onGroupChange = () => { - handleReset(); handleFetchAttachments(); }; const getPolicyName = (name: string | undefined) => { - const policy = policies.value.find((p) => p.metadata.name === name); + const policy = policies.value?.find((p) => p.metadata.name === name); return policy?.spec.displayName; }; @@ -548,7 +546,7 @@ onMounted(() => { > @@ -562,15 +560,15 @@ onMounted(() => {
- + - + { role="list" > -
  • +
  • diff --git a/src/modules/contents/attachments/components/AttachmentDetailModal.vue b/src/modules/contents/attachments/components/AttachmentDetailModal.vue index eb0b168b..a641e355 100644 --- a/src/modules/contents/attachments/components/AttachmentDetailModal.vue +++ b/src/modules/contents/attachments/components/AttachmentDetailModal.vue @@ -1,13 +1,14 @@ diff --git a/src/modules/contents/attachments/components/AttachmentUploadModal.vue b/src/modules/contents/attachments/components/AttachmentUploadModal.vue index 4087f5cf..465aa057 100644 --- a/src/modules/contents/attachments/components/AttachmentUploadModal.vue +++ b/src/modules/contents/attachments/components/AttachmentUploadModal.vue @@ -25,14 +25,9 @@ const emit = defineEmits<{ (event: "close"): void; }>(); -const { groups, handleFetchGroups } = useFetchAttachmentGroup({ - fetchOnMounted: false, -}); -const { policies, handleFetchPolicies } = useFetchAttachmentPolicy({ - fetchOnMounted: false, -}); -const { policyTemplates, handleFetchPolicyTemplates } = - useFetchAttachmentPolicyTemplate(); +const { groups } = useFetchAttachmentGroup(); +const { policies, handleFetchPolicies } = useFetchAttachmentPolicy(); +const { policyTemplates } = useFetchAttachmentPolicyTemplate(); const selectedGroupName = useLocalStorage("attachment-upload-group", ""); const selectedPolicyName = useLocalStorage("attachment-upload-policy", ""); @@ -45,12 +40,13 @@ watch( () => { if (selectedGroupName.value === "") return; - const group = groups.value.find( + const group = groups.value?.find( (group) => group.metadata.name === selectedGroupName.value ); if (!group) { - selectedGroupName.value = - groups.value.length > 0 ? groups.value[0].metadata.name : ""; + selectedGroupName.value = groups.value?.length + ? groups.value[0].metadata.name + : ""; } } ); @@ -58,12 +54,13 @@ watch( watch( () => policies.value, () => { - const policy = policies.value.find( + const policy = policies.value?.find( (policy) => policy.metadata.name === selectedPolicyName.value ); if (!policy) { - selectedPolicyName.value = - policies.value.length > 0 ? policies.value[0].metadata.name : ""; + selectedPolicyName.value = policies.value?.length + ? policies.value[0].metadata.name + : ""; } } ); @@ -87,7 +84,7 @@ const handleOpenCreateNewPolicyModal = (policyTemplate: PolicyTemplate) => { const onEditingModalClose = async () => { await handleFetchPolicies(); - policyToCreate.value = policies.value[0]; + policyToCreate.value = policies.value?.[0]; }; const onVisibleChange = (visible: boolean) => { @@ -102,9 +99,6 @@ watch( () => props.visible, (newValue) => { if (newValue) { - handleFetchGroups(); - handleFetchPolicies(); - handleFetchPolicyTemplates(); uploadVisible.value = true; } else { const uploadVisibleTimer = setTimeout(() => { @@ -131,7 +125,7 @@ watch(
    +
    (); const selectedGroup = ref(); +const page = ref(1); +const size = ref(60); const { attachments, - loading, + isLoading, + total, selectedAttachment, selectedAttachments, handleFetchAttachments, - handlePaginationChange, handleSelect, handleSelectPrevious, handleSelectNext, handleReset, isChecked, -} = useAttachmentControl({ group: selectedGroup }); +} = useAttachmentControl({ group: selectedGroup, page, size }); const uploadVisible = ref(false); const detailVisible = ref(false); @@ -64,21 +66,14 @@ const handleOpenDetail = (attachment: Attachment) => { selectedAttachment.value = attachment; detailVisible.value = true; }; - -const onGroupChange = () => { - handleReset(); - handleFetchAttachments(); -}; - -await handleFetchAttachments();