mirror of https://github.com/halo-dev/halo
refactor: rendering conditions for plugin installation components (#5577)
#### What type of PR is this? /area ui /kind improvement /milestone 2.14.x #### What this PR does / why we need it: 优化插件安装弹框组件的渲染时机,改为在未打开时不进行渲染,可以避免一些不必要的请求,尤其是在安装了应用市场插件之后。 #### Which issue(s) this PR fixes: Fixes #5573 #### Special notes for your reviewer: 测试插件安装和升级功能是否正常即可。 #### Does this PR introduce a user-facing change? ```release-note 优化插件安装弹框组件的渲染时机,避免不必要的请求。 ```pull/5602/head
parent
b660eb6d3e
commit
78b60a0a29
|
@ -1,42 +1,34 @@
|
|||
<script lang="ts" setup>
|
||||
import {
|
||||
Dialog,
|
||||
IconAddCircle,
|
||||
IconPlug,
|
||||
IconRefreshLine,
|
||||
VButton,
|
||||
VCard,
|
||||
VEmpty,
|
||||
VPageHeader,
|
||||
VSpace,
|
||||
VLoading,
|
||||
Dialog,
|
||||
VDropdown,
|
||||
VDropdownItem,
|
||||
VEmpty,
|
||||
VLoading,
|
||||
VPageHeader,
|
||||
VSpace,
|
||||
} from "@halo-dev/components";
|
||||
import PluginListItem from "./components/PluginListItem.vue";
|
||||
import PluginInstallationModal from "./components/PluginInstallationModal.vue";
|
||||
import { computed, ref, onMounted } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
import { computed, onMounted, provide, ref, watch } from "vue";
|
||||
import { apiClient } from "@/utils/api-client";
|
||||
import { usePermission } from "@/utils/permission";
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import type { Plugin } from "@halo-dev/api-client";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouteQuery } from "@vueuse/router";
|
||||
import { watch } from "vue";
|
||||
import { provide } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
import { usePluginBatchOperations } from "./composables/use-plugin";
|
||||
|
||||
const { t } = useI18n();
|
||||
const { currentUserHasPermission } = usePermission();
|
||||
|
||||
const pluginInstallationModal = ref(false);
|
||||
const pluginToUpgrade = ref<Plugin>();
|
||||
|
||||
function handleOpenUploadModal(plugin?: Plugin) {
|
||||
pluginToUpgrade.value = plugin;
|
||||
pluginInstallationModal.value = true;
|
||||
}
|
||||
const pluginInstallationModalVisible = ref(false);
|
||||
|
||||
const keyword = ref("");
|
||||
|
||||
|
@ -120,7 +112,7 @@ onMounted(() => {
|
|||
confirmText: t("core.common.buttons.download"),
|
||||
cancelText: t("core.common.buttons.cancel"),
|
||||
onConfirm() {
|
||||
handleOpenUploadModal();
|
||||
pluginInstallationModalVisible.value = true;
|
||||
},
|
||||
onCancel() {
|
||||
routeRemoteDownloadUrl.value = null;
|
||||
|
@ -131,9 +123,11 @@ onMounted(() => {
|
|||
</script>
|
||||
<template>
|
||||
<PluginInstallationModal
|
||||
v-if="currentUserHasPermission(['system:plugins:manage'])"
|
||||
v-model:visible="pluginInstallationModal"
|
||||
:plugin-to-upgrade="pluginToUpgrade"
|
||||
v-if="
|
||||
pluginInstallationModalVisible &&
|
||||
currentUserHasPermission(['system:plugins:manage'])
|
||||
"
|
||||
@close="pluginInstallationModalVisible = false"
|
||||
/>
|
||||
|
||||
<VPageHeader :title="$t('core.plugin.title')">
|
||||
|
@ -144,7 +138,7 @@ onMounted(() => {
|
|||
<VButton
|
||||
v-permission="['system:plugins:manage']"
|
||||
type="secondary"
|
||||
@click="handleOpenUploadModal()"
|
||||
@click="pluginInstallationModalVisible = true"
|
||||
>
|
||||
<template #icon>
|
||||
<IconAddCircle class="h-full w-full" />
|
||||
|
@ -276,7 +270,7 @@ onMounted(() => {
|
|||
<VButton
|
||||
v-permission="['system:plugins:manage']"
|
||||
type="secondary"
|
||||
@click="handleOpenUploadModal"
|
||||
@click="pluginInstallationModalVisible = true"
|
||||
>
|
||||
<template #icon>
|
||||
<IconAddCircle class="h-full w-full" />
|
||||
|
@ -297,7 +291,6 @@ onMounted(() => {
|
|||
<PluginListItem
|
||||
:plugin="plugin"
|
||||
:is-selected="selectedNames.includes(plugin.metadata.name)"
|
||||
@open-upgrade-modal="handleOpenUploadModal"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -1,21 +1,25 @@
|
|||
<script lang="ts" setup>
|
||||
import { VModal, VButton, VTabbar } from "@halo-dev/components";
|
||||
import { VButton, VModal, VTabbar } from "@halo-dev/components";
|
||||
import type { Plugin } from "@halo-dev/api-client";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import {
|
||||
computed,
|
||||
markRaw,
|
||||
nextTick,
|
||||
onMounted,
|
||||
provide,
|
||||
type Ref,
|
||||
ref,
|
||||
toRefs,
|
||||
} from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouteQuery } from "@vueuse/router";
|
||||
import { provide } from "vue";
|
||||
import { toRefs } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
import LocalUpload from "./installation-tabs/LocalUpload.vue";
|
||||
import RemoteDownload from "./installation-tabs/RemoteDownload.vue";
|
||||
import { markRaw } from "vue";
|
||||
import type {
|
||||
PluginInstallationTab,
|
||||
PluginModule,
|
||||
} from "@halo-dev/console-shared";
|
||||
import { usePluginModuleStore } from "@/stores/plugin";
|
||||
import { onMounted } from "vue";
|
||||
import { usePermission } from "@/utils/permission";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
@ -23,23 +27,22 @@ const { currentUserHasPermission } = usePermission();
|
|||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
visible: boolean;
|
||||
pluginToUpgrade?: Plugin;
|
||||
}>(),
|
||||
{
|
||||
visible: false,
|
||||
pluginToUpgrade: undefined,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: "update:visible", visible: boolean): void;
|
||||
(event: "close"): void;
|
||||
}>();
|
||||
|
||||
const { pluginToUpgrade } = toRefs(props);
|
||||
provide<Ref<Plugin | undefined>>("pluginToUpgrade", pluginToUpgrade);
|
||||
|
||||
const modal = ref();
|
||||
|
||||
const tabs = ref<PluginInstallationTab[]>([
|
||||
{
|
||||
id: "local",
|
||||
|
@ -65,26 +68,18 @@ const modalTitle = computed(() => {
|
|||
: t("core.plugin.upload_modal.titles.install");
|
||||
});
|
||||
|
||||
const handleVisibleChange = (visible: boolean) => {
|
||||
emit("update:visible", visible);
|
||||
if (!visible) {
|
||||
emit("close");
|
||||
}
|
||||
};
|
||||
|
||||
// handle remote download url from route
|
||||
const routeRemoteDownloadUrl = useRouteQuery<string | null>(
|
||||
"remote-download-url"
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible && routeRemoteDownloadUrl.value) {
|
||||
onMounted(() => {
|
||||
if (routeRemoteDownloadUrl.value) {
|
||||
nextTick(() => {
|
||||
activeTabId.value = "remote";
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const { pluginModules } = usePluginModuleStore();
|
||||
onMounted(() => {
|
||||
|
@ -114,12 +109,12 @@ onMounted(() => {
|
|||
</script>
|
||||
<template>
|
||||
<VModal
|
||||
:visible="visible"
|
||||
ref="modal"
|
||||
:title="modalTitle"
|
||||
:centered="true"
|
||||
:width="920"
|
||||
height="calc(100vh - 20px)"
|
||||
@update:visible="handleVisibleChange"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<VTabbar
|
||||
v-model:active-id="activeTabId"
|
||||
|
@ -136,12 +131,12 @@ onMounted(() => {
|
|||
:is="tab.component"
|
||||
v-bind="tab.props"
|
||||
v-if="tab.id === activeTabId"
|
||||
@close-modal="handleVisibleChange(false)"
|
||||
@close-modal="modal.close()"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<template #footer>
|
||||
<VButton @click="handleVisibleChange(false)">
|
||||
<VButton @click="modal.close()">
|
||||
{{ $t("core.common.buttons.close") }}
|
||||
</VButton>
|
||||
</template>
|
||||
|
|
|
@ -1,21 +1,20 @@
|
|||
<script lang="ts" setup>
|
||||
import {
|
||||
VEntity,
|
||||
VEntityField,
|
||||
Dialog,
|
||||
Toast,
|
||||
VDropdownItem,
|
||||
VDropdownDivider,
|
||||
VDropdownItem,
|
||||
VEntity,
|
||||
VEntityField,
|
||||
} from "@halo-dev/components";
|
||||
import { inject, toRefs, markRaw } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
import { computed, inject, markRaw, ref, toRefs } from "vue";
|
||||
import { usePluginLifeCycle } from "../composables/use-plugin";
|
||||
import type { Plugin } from "@halo-dev/api-client";
|
||||
import { formatDatetime } from "@/utils/date";
|
||||
import { usePermission } from "@/utils/permission";
|
||||
import { apiClient } from "@/utils/api-client";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { Ref } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { useEntityFieldItemExtensionPoint } from "@console/composables/use-entity-extension-points";
|
||||
import { useOperationItemExtensionPoint } from "@console/composables/use-operation-extension-points";
|
||||
import { useRouter } from "vue-router";
|
||||
|
@ -25,8 +24,8 @@ import LogoField from "./entity-fields/LogoField.vue";
|
|||
import StatusDotField from "@/components/entity-fields/StatusDotField.vue";
|
||||
import AuthorField from "./entity-fields/AuthorField.vue";
|
||||
import SwitchField from "./entity-fields/SwitchField.vue";
|
||||
import { computed } from "vue";
|
||||
import type { EntityFieldItem, OperationItem } from "@halo-dev/console-shared";
|
||||
import PluginInstallationModal from "@console/modules/system/plugins/components/PluginInstallationModal.vue";
|
||||
|
||||
const { currentUserHasPermission } = usePermission();
|
||||
const { t } = useI18n();
|
||||
|
@ -40,16 +39,14 @@ const props = withDefaults(
|
|||
{ isSelected: false }
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: "open-upgrade-modal", plugin?: Plugin): void;
|
||||
}>();
|
||||
|
||||
const { plugin } = toRefs(props);
|
||||
|
||||
const selectedNames = inject<Ref<string[]>>("selectedNames", ref([]));
|
||||
|
||||
const { getFailedMessage, uninstall } = usePluginLifeCycle(plugin);
|
||||
|
||||
const pluginUpgradeModalVisible = ref(false);
|
||||
|
||||
const handleResetSettingConfig = async () => {
|
||||
Dialog.warning({
|
||||
title: t("core.plugin.operations.reset.title"),
|
||||
|
@ -97,7 +94,7 @@ const { operationItems } = useOperationItemExtensionPoint<Plugin>(
|
|||
label: t("core.common.buttons.upgrade"),
|
||||
permissions: [],
|
||||
action: () => {
|
||||
emit("open-upgrade-modal", props.plugin);
|
||||
pluginUpgradeModalVisible.value = true;
|
||||
},
|
||||
},
|
||||
{
|
||||
|
@ -257,4 +254,13 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint<Plugin>(
|
|||
<EntityDropdownItems :dropdown-items="operationItems" :item="plugin" />
|
||||
</template>
|
||||
</VEntity>
|
||||
|
||||
<PluginInstallationModal
|
||||
v-if="
|
||||
pluginUpgradeModalVisible &&
|
||||
currentUserHasPermission(['system:plugins:manage'])
|
||||
"
|
||||
:plugin-to-upgrade="plugin"
|
||||
@close="pluginUpgradeModalVisible = false"
|
||||
/>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue