From eb8837717edccadebbceceb172fe1f182ed4415d Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 24 Jan 2024 10:36:12 +0800
Subject: [PATCH] refactor: condition of modal component visible (#54)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在 Halo 2.12 中重构了 Modal 组件的显示控制方式，此 PR 用于简化 Modal 弹窗的显示逻辑。

See https://github.com/halo-dev/halo/pull/5078

/kind improvement

```release-note
None
```
---
 build.gradle                                  |  2 +-
 console/src/components/AppActionButton.vue    | 10 +----
 console/src/components/AppDetailModal.vue     | 38 +++++++------------
 console/src/components/AppStoreTab.vue        |  4 +-
 console/src/components/AppVersionCheckBar.vue | 34 ++++-------------
 console/src/components/PaymentCheckModal.vue  | 17 ++++-----
 .../ThemeOrPluginVersionCheckBar.vue          | 31 +++++----------
 .../components/detail/DetailReleaseItem.vue   | 10 +----
 .../ViewAppStoreOperationItem.vue             | 19 +---------
 .../composables/use-payment-check-modal.ts    | 19 ++--------
 console/src/views/AppStore.vue                |  4 +-
 src/main/resources/plugin.yaml                |  2 +-
 12 files changed, 51 insertions(+), 139 deletions(-)

diff --git a/build.gradle b/build.gradle
index 914ee93..60bf62d 100644
--- a/build.gradle
+++ b/build.gradle
@@ -41,6 +41,6 @@ build {
 }
 
 halo {
-    version = '2.11'
+    version = '2.12.0-alpha.1'
     debug = true
 }
\ No newline at end of file
diff --git a/console/src/components/AppActionButton.vue b/console/src/components/AppActionButton.vue
index 2faf65f..ecb5238 100644
--- a/console/src/components/AppActionButton.vue
+++ b/console/src/components/AppActionButton.vue
@@ -31,8 +31,7 @@ const { app } = toRefs(props);
 
 const { installing, handleInstall } = useAppDownload(app);
 const { isSatisfies, hasInstalled } = useAppCompare(app);
-const { paymentCheckModal, paymentCheckModalVisible, onPaymentCheckModalClose, handleOpenCreateOrderPage } =
-  usePaymentCheckModal(app);
+const { paymentCheckModalVisible, handleOpenCreateOrderPage } = usePaymentCheckModal(app);
 
 const actions = computed((): Action[] => {
   return [
@@ -87,10 +86,5 @@ const action = computed(() => {
   >
     {{ action.label }}
   </VButton>
-  <PaymentCheckModal
-    v-if="paymentCheckModal"
-    v-model="paymentCheckModalVisible"
-    :app="app"
-    @close="onPaymentCheckModalClose"
-  />
+  <PaymentCheckModal v-if="paymentCheckModalVisible && app" :app="app" @close="paymentCheckModalVisible = false" />
 </template>
diff --git a/console/src/components/AppDetailModal.vue b/console/src/components/AppDetailModal.vue
index 56163c1..1c85f19 100644
--- a/console/src/components/AppDetailModal.vue
+++ b/console/src/components/AppDetailModal.vue
@@ -18,51 +18,35 @@ import TablerDownload from "~icons/tabler/download";
 
 const props = withDefaults(
   defineProps<{
-    visible: boolean;
     tab?: string;
-    app?: ApplicationSearchResult;
+    app: ApplicationSearchResult;
   }>(),
   {
-    visible: false,
     tab: "readme",
-    app: undefined,
   }
 );
 
 const emit = defineEmits<{
-  (event: "update:visible", visible: boolean): void;
   (event: "close"): void;
 }>();
 
-const onVisibleChange = (visible: boolean) => {
-  emit("update:visible", visible);
+const { app } = toRefs(props);
 
-  if (!visible) {
-    setTimeout(() => {
-      activeId.value = "readme";
-      emit("close");
-    }, 200);
-  }
-};
-
-const { app, visible } = toRefs(props);
+const modal = ref();
 
 const {
   data: appDetail,
   isLoading,
   isFetching,
 } = useQuery<ApplicationDetail>({
-  queryKey: ["store-app", app, visible],
+  queryKey: ["store-app", app],
   queryFn: async () => {
-    if (!visible.value || !app.value) {
-      return;
-    }
     const { data } = await storeApiClient.get(
       `/apis/api.store.halo.run/v1alpha1/applications/${app.value?.application.metadata.name}`
     );
     return data;
   },
-  enabled: computed(() => visible.value && !!app.value),
+  enabled: computed(() => !!app.value),
 });
 
 const title = computed(() => {
@@ -77,9 +61,10 @@ const activeId = ref(props.tab);
 watch(
   () => appDetail.value,
   (value) => {
-    if (!(props.visible && value)) {
+    if (!value) {
       return;
     }
+
     const {
       screen: { width, height },
       navigator: { language },
@@ -96,20 +81,23 @@ watch(
         referrer: document.referrer,
       },
     });
+  },
+  {
+    immediate: true,
   }
 );
 </script>
 
 <template>
   <VModal
+    ref="modal"
     :title="title"
-    :visible="visible"
     :width="1200"
     :layer-closable="true"
     height="calc(100vh - 20px)"
     :mount-to-body="true"
     :body-class="['!as-p-0']"
-    @update:visible="onVisibleChange"
+    @close="emit('close')"
   >
     <template #actions>
       <slot name="actions" />
@@ -188,7 +176,7 @@ watch(
       </div>
     </div>
     <template #footer>
-      <VButton @click="onVisibleChange(false)">关闭</VButton>
+      <VButton @click="modal.close()">关闭</VButton>
     </template>
   </VModal>
 </template>
diff --git a/console/src/components/AppStoreTab.vue b/console/src/components/AppStoreTab.vue
index ae502d8..7bf0204 100644
--- a/console/src/components/AppStoreTab.vue
+++ b/console/src/components/AppStoreTab.vue
@@ -92,11 +92,9 @@ const { data, isFetching, isLoading, refetch } = useQuery<ListResponse<Applicati
 });
 
 // detail modal
-const detailModal = ref(false);
 const selectedApp = ref<ApplicationSearchResult>();
 function handleOpenDetailModal(app: ApplicationSearchResult) {
   selectedApp.value = app;
-  detailModal.value = true;
 }
 
 const handleSelectPrevious = async () => {
@@ -257,7 +255,7 @@ watch([selectedPriceMode, selectedSort, keyword], () => {
       :size-options="[10, 20, 30, 50, 100]"
     />
   </div>
-  <AppDetailModal v-model:visible="detailModal" :app="selectedApp">
+  <AppDetailModal v-if="selectedApp" :app="selectedApp" @close="selectedApp = undefined">
     <template #actions>
       <span @click="handleSelectPrevious">
         <IconArrowLeft />
diff --git a/console/src/components/AppVersionCheckBar.vue b/console/src/components/AppVersionCheckBar.vue
index d2457bc..0ce689c 100644
--- a/console/src/components/AppVersionCheckBar.vue
+++ b/console/src/components/AppVersionCheckBar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AppDetailModal from "./AppDetailModal.vue";
-import { nextTick, ref, toRefs } from "vue";
+import { ref, toRefs } from "vue";
 import { useAppDownload } from "@/composables/use-app-download";
 import RiArrowUpCircleLine from "~icons/ri/arrow-up-circle-line";
 import type { ApplicationSearchResult } from "@/types";
@@ -21,22 +21,7 @@ const { hasUpdate, isSatisfies } = useAppCompare(app);
 
 const { upgrading, handleUpgrade } = useAppDownload(app);
 
-const detailModal = ref(false);
 const detailModalVisible = ref(false);
-
-function handleOpenDetailModal() {
-  detailModal.value = true;
-  nextTick(() => {
-    detailModalVisible.value = true;
-  });
-}
-
-function onDetailModalClose() {
-  detailModalVisible.value = false;
-  setTimeout(() => {
-    detailModal.value = false;
-  }, 200);
-}
 </script>
 
 <template>
@@ -57,7 +42,7 @@ function onDetailModalClose() {
       <div v-if="isSatisfies" class="as-truncate as-text-xs as-text-gray-500">
         有新版本，<span
           class="as-cursor-pointer as-text-gray-900 hover:as-text-gray-600"
-          @click="handleOpenDetailModal"
+          @click="detailModalVisible = true"
         >
           查看详情
         </span>
@@ -67,18 +52,15 @@ function onDetailModalClose() {
         </span>
       </div>
       <div v-else class="as-truncate as-text-xs as-text-gray-500">
-        有新版本，<span class="as-cursor-pointer as-text-gray-900 hover:as-text-gray-600" @click="handleOpenDetailModal"
-          >版本不兼容
+        有新版本，<span
+          class="as-cursor-pointer as-text-gray-900 hover:as-text-gray-600"
+          @click="detailModalVisible = true"
+        >
+          版本不兼容
         </span>
       </div>
     </div>
   </template>
 
-  <AppDetailModal
-    v-if="detailModal"
-    v-model:visible="detailModalVisible"
-    :app="app"
-    tab="releases"
-    @close="onDetailModalClose"
-  />
+  <AppDetailModal v-if="detailModalVisible" :app="app" tab="releases" @close="detailModalVisible = false" />
 </template>
diff --git a/console/src/components/PaymentCheckModal.vue b/console/src/components/PaymentCheckModal.vue
index 3e15fad..99b060a 100644
--- a/console/src/components/PaymentCheckModal.vue
+++ b/console/src/components/PaymentCheckModal.vue
@@ -3,24 +3,23 @@ import type { ApplicationDetail, ApplicationSearchResult } from "@/types";
 import storeApiClient from "@/utils/store-api-client";
 import { Dialog, VButton, VLoading, VModal } from "@halo-dev/components";
 import { useQuery, useQueryClient } from "@tanstack/vue-query";
+import { ref } from "vue";
 
 const queryClient = useQueryClient();
 
 const props = withDefaults(
   defineProps<{
-    app?: ApplicationSearchResult;
+    app: ApplicationSearchResult;
   }>(),
-  {
-    app: undefined,
-  }
+  {}
 );
 
-const visible = defineModel({ type: Boolean, default: false });
-
 const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
+const modal = ref();
+
 useQuery<ApplicationDetail>({
   queryKey: ["app-payment-check"],
   queryFn: async () => {
@@ -31,7 +30,7 @@ useQuery<ApplicationDetail>({
   },
   onSuccess(data) {
     if (data?.bought) {
-      visible.value = false;
+      modal.value.close();
       Dialog.success({
         title: "支付成功",
         description: "感谢购买，现在已经可以安装此应用了",
@@ -51,14 +50,14 @@ useQuery<ApplicationDetail>({
 </script>
 
 <template>
-  <VModal v-model:visible="visible" :width="400" title="提示" @close="emit('close')">
+  <VModal ref="modal" :width="400" title="提示" @close="emit('close')">
     <div class="gap-2 p-2 as-flex as-flex-col as-items-center as-justify-center">
       <VLoading />
       <div class="text-xs text-gray-600">正在检测支付状态，请稍后...</div>
     </div>
 
     <template #footer>
-      <VButton @click="emit('close')">关闭</VButton>
+      <VButton @click="modal.close()">关闭</VButton>
     </template>
   </VModal>
 </template>
diff --git a/console/src/components/ThemeOrPluginVersionCheckBar.vue b/console/src/components/ThemeOrPluginVersionCheckBar.vue
index 3061693..66c4081 100644
--- a/console/src/components/ThemeOrPluginVersionCheckBar.vue
+++ b/console/src/components/ThemeOrPluginVersionCheckBar.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Plugin, Theme } from "@halo-dev/api-client";
 import AppDetailModal from "./AppDetailModal.vue";
-import { nextTick, ref, toRefs } from "vue";
+import { ref, toRefs } from "vue";
 import { usePluginVersion } from "@/composables/use-plugin-version";
 import { useAppDownload } from "@/composables/use-app-download";
 import RiArrowUpCircleLine from "~icons/ri/arrow-up-circle-line";
@@ -41,22 +41,7 @@ const { hasUpdate, matchedApp } = useVersion();
 const { isSatisfies } = useAppCompare(matchedApp);
 const { upgrading, handleUpgrade } = useAppDownload(matchedApp);
 
-const detailModal = ref(false);
 const detailModalVisible = ref(false);
-
-function handleOpenDetailModal() {
-  detailModal.value = true;
-  nextTick(() => {
-    detailModalVisible.value = true;
-  });
-}
-
-function onDetailModalClose() {
-  detailModalVisible.value = false;
-  setTimeout(() => {
-    detailModal.value = false;
-  }, 200);
-}
 </script>
 
 <template>
@@ -77,7 +62,7 @@ function onDetailModalClose() {
       <div v-if="isSatisfies" class="as-truncate as-text-xs as-text-gray-500">
         有新版本，<span
           class="as-cursor-pointer as-text-gray-900 hover:as-text-gray-600"
-          @click="handleOpenDetailModal"
+          @click="detailModalVisible = true"
         >
           查看详情
         </span>
@@ -87,18 +72,20 @@ function onDetailModalClose() {
         </span>
       </div>
       <div v-else class="as-truncate as-text-xs as-text-gray-500">
-        有新版本，<span class="as-cursor-pointer as-text-gray-900 hover:as-text-gray-600" @click="handleOpenDetailModal"
-          >版本不兼容
+        有新版本，<span
+          class="as-cursor-pointer as-text-gray-900 hover:as-text-gray-600"
+          @click="detailModalVisible = true"
+        >
+          版本不兼容
         </span>
       </div>
     </div>
   </template>
 
   <AppDetailModal
-    v-if="detailModal"
-    v-model:visible="detailModalVisible"
+    v-if="detailModalVisible && matchedApp"
     :app="matchedApp"
     tab="releases"
-    @close="onDetailModalClose"
+    @close="detailModalVisible = false"
   />
 </template>
diff --git a/console/src/components/detail/DetailReleaseItem.vue b/console/src/components/detail/DetailReleaseItem.vue
index 3eebe1a..5727632 100644
--- a/console/src/components/detail/DetailReleaseItem.vue
+++ b/console/src/components/detail/DetailReleaseItem.vue
@@ -42,8 +42,7 @@ const {
 } = useAppDownload(app);
 
 const { matchedPlugin, matchedTheme, appType, hasInstalled: appHasInstalled } = useAppCompare(app);
-const { paymentCheckModal, paymentCheckModalVisible, onPaymentCheckModalClose, handleOpenCreateOrderPage } =
-  usePaymentCheckModal(app);
+const { paymentCheckModalVisible, handleOpenCreateOrderPage } = usePaymentCheckModal(app);
 
 const hasInstalled = computed(() => {
   if (appType.value === "PLUGIN") {
@@ -256,10 +255,5 @@ const { isLoading: installing, mutate: handleInstall } = useMutation({
       </div>
     </div>
   </div>
-  <PaymentCheckModal
-    v-if="paymentCheckModal"
-    v-model="paymentCheckModalVisible"
-    :app="app"
-    @close="onPaymentCheckModalClose"
-  />
+  <PaymentCheckModal v-if="paymentCheckModalVisible && app" :app="app" @close="paymentCheckModalVisible = false" />
 </template>
diff --git a/console/src/components/operation-items/ViewAppStoreOperationItem.vue b/console/src/components/operation-items/ViewAppStoreOperationItem.vue
index b01c228..a9fe09f 100644
--- a/console/src/components/operation-items/ViewAppStoreOperationItem.vue
+++ b/console/src/components/operation-items/ViewAppStoreOperationItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { VDropdownItem } from "@halo-dev/components";
-import { nextTick, ref } from "vue";
+import { ref } from "vue";
 import AppDetailModal from "../AppDetailModal.vue";
 import storeApiClient from "@/utils/store-api-client";
 import type { ApplicationDetail, ApplicationSearchResult } from "@/types";
@@ -12,8 +12,6 @@ const props = withDefaults(
   {}
 );
 
-const detailModal = ref(false);
-const visible = ref(false);
 const app = ref<ApplicationSearchResult>();
 
 async function handleOpenDetailModal() {
@@ -29,23 +27,10 @@ async function handleOpenDetailModal() {
     latestRelease: data.latestRelease?.release,
     owner: data.owner,
   };
-
-  detailModal.value = true;
-  nextTick(() => {
-    visible.value = true;
-  });
-}
-
-function onDetailModalClose() {
-  visible.value = false;
-  setTimeout(() => {
-    detailModal.value = false;
-    app.value = undefined;
-  }, 200);
 }
 </script>
 
 <template>
   <VDropdownItem @click="handleOpenDetailModal">应用市场</VDropdownItem>
-  <AppDetailModal v-if="detailModal" v-model:visible="visible" :app="app" tab="releases" @close="onDetailModalClose" />
+  <AppDetailModal v-if="app" :app="app" @close="app = undefined" />
 </template>
diff --git a/console/src/composables/use-payment-check-modal.ts b/console/src/composables/use-payment-check-modal.ts
index a593e4a..15f42d9 100644
--- a/console/src/composables/use-payment-check-modal.ts
+++ b/console/src/composables/use-payment-check-modal.ts
@@ -2,24 +2,14 @@ import type { ApplicationSearchResult } from "@/types";
 import storeApiClient from "@/utils/store-api-client";
 import type { DetailedUser } from "@halo-dev/api-client";
 import { Dialog } from "@halo-dev/components";
-import { nextTick, ref, type Ref } from "vue";
+import { ref, type Ref } from "vue";
 import { useRouter } from "vue-router";
 
 export function usePaymentCheckModal(app: Ref<ApplicationSearchResult | undefined>) {
   const router = useRouter();
 
-  // payment check modal
-  // fixme: Refactor VModal to simplify the code
-  const paymentCheckModal = ref(false);
   const paymentCheckModalVisible = ref(false);
 
-  function onPaymentCheckModalClose() {
-    paymentCheckModalVisible.value = false;
-    setTimeout(() => {
-      paymentCheckModal.value = false;
-    }, 200);
-  }
-
   async function handleOpenCreateOrderPage() {
     const { data: user } = await storeApiClient.get<DetailedUser>("/apis/api.console.halo.run/v1alpha1/users/-");
 
@@ -41,11 +31,8 @@ export function usePaymentCheckModal(app: Ref<ApplicationSearchResult | undefine
     a.click();
     a.remove();
 
-    paymentCheckModal.value = true;
-    nextTick(() => {
-      paymentCheckModalVisible.value = true;
-    });
+    paymentCheckModalVisible.value = true;
   }
 
-  return { paymentCheckModal, paymentCheckModalVisible, handleOpenCreateOrderPage, onPaymentCheckModalClose };
+  return { paymentCheckModalVisible, handleOpenCreateOrderPage };
 }
diff --git a/console/src/views/AppStore.vue b/console/src/views/AppStore.vue
index 699073b..1387763 100644
--- a/console/src/views/AppStore.vue
+++ b/console/src/views/AppStore.vue
@@ -170,12 +170,10 @@ const { data, isFetching, isLoading, refetch } = useQuery<ListResponse<Applicati
 });
 
 // detail modal
-const detailModal = ref(false);
 const selectedApp = ref<ApplicationSearchResult>();
 
 function handleOpenDetailModal(app: ApplicationSearchResult) {
   selectedApp.value = app;
-  detailModal.value = true;
 }
 
 const handleSelectPrevious = async () => {
@@ -418,7 +416,7 @@ watch([selectedPriceMode, selectedType, selectedSort, onlyQueryInstalled, keywor
       </template>
     </VCard>
 
-    <AppDetailModal v-model:visible="detailModal" :app="selectedApp">
+    <AppDetailModal v-if="selectedApp" :app="selectedApp" @close="selectedApp = undefined">
       <template #actions>
         <span @click="handleSelectPrevious">
           <IconArrowLeft />
diff --git a/src/main/resources/plugin.yaml b/src/main/resources/plugin.yaml
index 4d2e8da..8ff52ea 100644
--- a/src/main/resources/plugin.yaml
+++ b/src/main/resources/plugin.yaml
@@ -6,7 +6,7 @@ metadata:
     "store.halo.run/app-id": "app-VYJbF"
 spec:
   enabled: true
-  requires: ">=2.9.0"
+  requires: ">=2.12.0"
   author:
     name: Halo OSS Team
     website: https://github.com/halo-dev