refactor: condition of modal component visible (#54)

在 Halo 2.12 中重构了 Modal 组件的显示控制方式，此 PR 用于简化 Modal 弹窗的显示逻辑。 See halo-dev/halo#5078 /kind improvement ```release-note None ```
halo-dev · Jan 24, 2024 · eb88377 · eb88377
1 parent 4a8cefb
commit eb88377
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 139 deletions.
diff --git a/build.gradle b/build.gradle
@@ -41,6 +41,6 @@ build {
 }
 
 halo {
-    version = '2.11'
+    version = '2.12.0-alpha.1'
     debug = true
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>