mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-11 01:50:10 +08:00
148 lines
3.4 KiB
Vue
148 lines
3.4 KiB
Vue
<script lang="ts" setup>
|
||
import api from '@/api'
|
||
import type { Plugin } from '@/api/types'
|
||
import NoDataFound from '@/components/NoDataFound.vue'
|
||
import PluginAppCard from '@/components/cards/PluginAppCard.vue'
|
||
import PluginCard from '@/components/cards/PluginCard.vue'
|
||
|
||
// 数据列表
|
||
const dataList = ref<Plugin[]>([])
|
||
|
||
// 是否刷新过
|
||
const isRefreshed = ref(false)
|
||
|
||
// APP市场窗口
|
||
const PluginAppDialog = ref(false)
|
||
|
||
// 获取已安装的插件列表
|
||
const getInstalledPluginList = computed(() => {
|
||
return dataList.value.filter(item => item.installed)
|
||
})
|
||
|
||
// 获取未安装的插件列表
|
||
const getUninstalledPluginList = computed(() => {
|
||
return dataList.value.filter(item => !item.installed)
|
||
})
|
||
|
||
// 关闭插件市场窗口
|
||
function pluginDialogClose() {
|
||
PluginAppDialog.value = false
|
||
}
|
||
|
||
// 新安装了插件
|
||
function pluginInstalled() {
|
||
fetchData()
|
||
pluginDialogClose()
|
||
}
|
||
|
||
// 获取插件列表数据
|
||
async function fetchData() {
|
||
try {
|
||
dataList.value = await api.get('plugin/')
|
||
isRefreshed.value = true
|
||
}
|
||
catch (error) {
|
||
console.error(error)
|
||
}
|
||
}
|
||
|
||
// 加载时获取数据
|
||
onBeforeMount(fetchData)
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
v-if="!isRefreshed"
|
||
class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
|
||
>
|
||
<VProgressCircular
|
||
v-if="!isRefreshed"
|
||
size="48"
|
||
indeterminate
|
||
color="primary"
|
||
/>
|
||
</div>
|
||
<div
|
||
v-if="getInstalledPluginList.length > 0"
|
||
class="grid gap-4 grid-plugin-card"
|
||
>
|
||
<PluginCard
|
||
v-for="data in getInstalledPluginList"
|
||
:key="data.id"
|
||
:plugin="data"
|
||
@remove="fetchData"
|
||
@save="fetchData"
|
||
/>
|
||
</div>
|
||
<NoDataFound
|
||
v-if="getInstalledPluginList.length === 0 && isRefreshed"
|
||
error-code="404"
|
||
error-title="没有安装插件"
|
||
error-description="点击右下角按钮，前往插件市场安装插件。"
|
||
/>
|
||
<!-- App市场 -->
|
||
<VDialog
|
||
v-model="PluginAppDialog"
|
||
fullscreen
|
||
:scrim="false"
|
||
transition="dialog-bottom-transition"
|
||
>
|
||
<!-- Dialog Activator -->
|
||
<template #activator="{ props }">
|
||
<VBtn
|
||
icon="mdi-plus"
|
||
v-bind="props"
|
||
size="x-large"
|
||
class="fixed right-5 bottom-5"
|
||
/>
|
||
</template>
|
||
|
||
<!-- Dialog Content -->
|
||
<VCard>
|
||
<!-- Toolbar -->
|
||
<div>
|
||
<VToolbar color="primary">
|
||
<VToolbarTitle>插件市场</VToolbarTitle>
|
||
|
||
<VSpacer />
|
||
|
||
<VToolbarItems>
|
||
<VBtn
|
||
size="x-large"
|
||
@click="pluginDialogClose"
|
||
>
|
||
<VIcon
|
||
color="white"
|
||
icon="mdi-close"
|
||
/>
|
||
</VBtn>
|
||
</VToolbarItems>
|
||
</VToolbar>
|
||
</div>
|
||
<div class="pa-4">
|
||
<div class="grid gap-4 grid-plugin-card">
|
||
<PluginAppCard
|
||
v-for="data in getUninstalledPluginList"
|
||
:key="data.id"
|
||
:plugin="data"
|
||
@install="pluginInstalled"
|
||
/>
|
||
</div>
|
||
<NoDataFound
|
||
v-if="getUninstalledPluginList.length === 0 && isRefreshed"
|
||
error-code="404"
|
||
error-title="没有未安装插件"
|
||
error-description="所有可用插件均已安装。"
|
||
/>
|
||
</div>
|
||
</VCard>
|
||
</VDialog>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
.grid-plugin-card {
|
||
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
||
padding-block-end: 1rem;
|
||
}
|
||
</style>
|