mirror of https://github.com/halo-dev/halo
150 lines
3.6 KiB
Vue
150 lines
3.6 KiB
Vue
<script lang="ts" setup>
|
|
import { VModal, VButton, VTabbar } from "@halo-dev/components";
|
|
import type { Plugin } from "@halo-dev/api-client";
|
|
import { computed, ref, watch } 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();
|
|
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 tabs = ref<PluginInstallationTab[]>([
|
|
{
|
|
id: "local",
|
|
label: t("core.plugin.upload_modal.tabs.local"),
|
|
component: markRaw(LocalUpload),
|
|
priority: 10,
|
|
},
|
|
{
|
|
id: "remote",
|
|
label: t("core.plugin.upload_modal.tabs.remote.title"),
|
|
component: markRaw(RemoteDownload),
|
|
priority: 20,
|
|
},
|
|
]);
|
|
|
|
const activeTabId = ref();
|
|
|
|
const modalTitle = computed(() => {
|
|
return props.pluginToUpgrade
|
|
? t("core.plugin.upload_modal.titles.upgrade", {
|
|
display_name: props.pluginToUpgrade.spec.displayName,
|
|
})
|
|
: 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) {
|
|
activeTabId.value = "remote";
|
|
}
|
|
}
|
|
);
|
|
|
|
const { pluginModules } = usePluginModuleStore();
|
|
onMounted(() => {
|
|
pluginModules.forEach((pluginModule: PluginModule) => {
|
|
const { extensionPoints } = pluginModule;
|
|
if (!extensionPoints?.["plugin:installation:tabs:create"]) {
|
|
return;
|
|
}
|
|
|
|
let items = extensionPoints[
|
|
"plugin:installation:tabs:create"
|
|
]() as PluginInstallationTab[];
|
|
|
|
items = items.filter((item) => {
|
|
return currentUserHasPermission(item.permissions);
|
|
});
|
|
|
|
tabs.value.push(...items);
|
|
});
|
|
|
|
tabs.value.sort((a, b) => {
|
|
return a.priority - b.priority;
|
|
});
|
|
|
|
activeTabId.value = tabs.value[0].id;
|
|
});
|
|
</script>
|
|
<template>
|
|
<VModal
|
|
:visible="visible"
|
|
:title="modalTitle"
|
|
:centered="true"
|
|
:width="920"
|
|
height="calc(100vh - 20px)"
|
|
@update:visible="handleVisibleChange"
|
|
>
|
|
<VTabbar
|
|
v-model:active-id="activeTabId"
|
|
:items="
|
|
tabs.map((tab) => {
|
|
return { label: tab.label, id: tab.id };
|
|
})
|
|
"
|
|
type="outline"
|
|
/>
|
|
<div class="mt-2">
|
|
<template v-for="tab in tabs" :key="tab.id">
|
|
<component
|
|
:is="tab.component"
|
|
v-bind="tab.props"
|
|
v-if="tab.id === activeTabId"
|
|
@close-modal="handleVisibleChange(false)"
|
|
/>
|
|
</template>
|
|
</div>
|
|
<template #footer>
|
|
<VButton @click="handleVisibleChange(false)">
|
|
{{ $t("core.common.buttons.close") }}
|
|
</VButton>
|
|
</template>
|
|
</VModal>
|
|
</template>
|