mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-07 08:46:40 +08:00
add plugin listview
This commit is contained in:
jxxghp
+29
-1
@@ -214,7 +214,7 @@ export interface DownloadingInfo {
|
|||||||
media: { [key: string]: any }
|
media: { [key: string]: any }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 缺失剧集信息
|
||||||
export interface NotExistMediaInfo {
|
export interface NotExistMediaInfo {
|
||||||
// 季
|
// 季
|
||||||
season: number
|
season: number
|
||||||
@@ -225,3 +225,31 @@ export interface NotExistMediaInfo {
|
|||||||
// 开始集
|
// 开始集
|
||||||
start_episode: number
|
start_episode: number
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 插件
|
||||||
|
export interface Plugin {
|
||||||
|
id?: string
|
||||||
|
// 插件名称
|
||||||
|
plugin_name?: string
|
||||||
|
// 插件描述
|
||||||
|
plugin_desc?: string
|
||||||
|
// 插件图标
|
||||||
|
plugin_icon?: string
|
||||||
|
// 主题色
|
||||||
|
plugin_color?: string
|
||||||
|
// 插件版本
|
||||||
|
plugin_version?: string
|
||||||
|
// 插件作者
|
||||||
|
plugin_author?: string
|
||||||
|
// 作者主页
|
||||||
|
author_url?: string
|
||||||
|
// 插件配置项ID前缀
|
||||||
|
plugin_config_prefix?: string
|
||||||
|
// 加载顺序
|
||||||
|
plugin_order?: number
|
||||||
|
// 可使用的用户级别
|
||||||
|
auth_level?: number
|
||||||
|
// 是否已安装
|
||||||
|
installed?: boolean
|
||||||
|
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,23 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { Plugin } from "@/api/types";
|
||||||
|
|
||||||
|
// 输入参数
|
||||||
|
const props = defineProps({
|
||||||
|
plugin: Object as PropType<Plugin>,
|
||||||
|
width: String,
|
||||||
|
height: String,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<VCard :width="props.width" :height="props.height">
|
||||||
|
<VImg :src="props.plugin?.plugin_icon" aspect-ratio="4/3" cover />
|
||||||
|
|
||||||
|
<VCardItem>
|
||||||
|
<VCardTitle>{{ props.plugin?.plugin_name }}</VCardTitle>
|
||||||
|
</VCardItem>
|
||||||
|
|
||||||
|
<VCardText>
|
||||||
|
{{ props.plugin?.plugin_desc }}
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
</template>
|
||||||
+7
-176
@@ -1,178 +1,9 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import PluginCardListView from "@/views/setting/PluginCardListView.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VRow>
|
<div>
|
||||||
<VCol cols="12">
|
<PluginCardListView />
|
||||||
<VCard title="Headlines">
|
</div>
|
||||||
<VCardText class="d-flex flex-column gap-y-8">
|
|
||||||
<div>
|
|
||||||
<h1 class="text-h1">
|
|
||||||
Heading 1
|
|
||||||
</h1>
|
|
||||||
<span>font-size: 6rem / line-height: 6rem / font-weight: 300</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h2 class="text-h2">
|
|
||||||
Heading 2
|
|
||||||
</h2>
|
|
||||||
<span>font-size: 3.75rem / line-height: 3.75rem / font-weight: 300</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 class="text-h3">
|
|
||||||
Heading 3
|
|
||||||
</h3>
|
|
||||||
<span>font-size: 3rem / line-height: 3.125rem / font-weight: 400</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h4 class="text-h4">
|
|
||||||
Heading 4
|
|
||||||
</h4>
|
|
||||||
<span>font-size: 2.125rem / line-height: 2.5rem / font-weight: 400</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h5 class="text-h5">
|
|
||||||
Heading 5
|
|
||||||
</h5>
|
|
||||||
<span>font-size: 1.5rem / line-height: 2rem / font-weight: 400</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h6 class="text-h6">
|
|
||||||
Heading 6
|
|
||||||
</h6>
|
|
||||||
<span>font-size: 1.25rem / line-height: 2rem / font-weight: 500</span>
|
|
||||||
</div>
|
|
||||||
</VCardText>
|
|
||||||
</VCard>
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VCol cols="12">
|
|
||||||
<VCard title="Texts">
|
|
||||||
<VCardText>
|
|
||||||
<VRow no-gutters>
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="2"
|
|
||||||
>
|
|
||||||
<span class="text-subtitle-1 text-no-wrap">text-subtitle-1</span>
|
|
||||||
</VCol>
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="10"
|
|
||||||
class="mb-6"
|
|
||||||
>
|
|
||||||
<p class="text-subtitle-1 text-truncate mb-1">
|
|
||||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
|
||||||
</p>
|
|
||||||
<span>font-size: 1rem / line-height: 1.75rem / font-weight: 400</span>
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="2"
|
|
||||||
>
|
|
||||||
<span class="text-subtitle-2 text-no-wrap">text-subtitle-2</span>
|
|
||||||
</VCol>
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="10"
|
|
||||||
class="mb-6"
|
|
||||||
>
|
|
||||||
<p class="text-subtitle-2 mb-1">
|
|
||||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
|
||||||
</p>
|
|
||||||
<span>font-size: 0.875rem / line-height: 1.375rem / font-weight: 500</span>
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="2"
|
|
||||||
>
|
|
||||||
<span class="text-body-1 text-no-wrap">text-body-1</span>
|
|
||||||
</VCol>
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="10"
|
|
||||||
class="mb-6"
|
|
||||||
>
|
|
||||||
<p class="text-body-1 mb-1">
|
|
||||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
|
||||||
</p>
|
|
||||||
<span>font-size: 1rem / line-height: 1.5rem / font-weight: 400</span>
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="2"
|
|
||||||
>
|
|
||||||
<span class="text-body-2 text-no-wrap">text-body-2</span>
|
|
||||||
</VCol>
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="10"
|
|
||||||
class="mb-6"
|
|
||||||
>
|
|
||||||
<p class="text-body-2 mb-1">
|
|
||||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
|
||||||
</p>
|
|
||||||
<span>font-size: 0.875rem / line-height: 1.25rem / font-weight: 400</span>
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="2"
|
|
||||||
>
|
|
||||||
<span class="text-caption">text-caption</span>
|
|
||||||
</VCol>
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="10"
|
|
||||||
class="mb-6"
|
|
||||||
>
|
|
||||||
<p class="text-caption mb-1">
|
|
||||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
|
||||||
</p>
|
|
||||||
<span>font-size: 0.75rem / line-height: 1.25rem / font-weight: 400</span>
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="2"
|
|
||||||
>
|
|
||||||
<span class="text-overline text-no-wrap">text-overline</span>
|
|
||||||
</VCol>
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="10"
|
|
||||||
class="mb-6"
|
|
||||||
>
|
|
||||||
<p class="text-overline mb-1">
|
|
||||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
|
||||||
</p>
|
|
||||||
<span>font-size: 0.75rem / line-height: 2rem / font-weight: 500</span>
|
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="2"
|
|
||||||
>
|
|
||||||
<span class="text-button">text-button</span>
|
|
||||||
</VCol>
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="10"
|
|
||||||
class="mb-6"
|
|
||||||
>
|
|
||||||
<p class="text-button mb-1">
|
|
||||||
Cupcake ipsum dolor sit amet fruitcake donut chocolate.
|
|
||||||
</p>
|
|
||||||
<span>font-size: 0.875rem / line-height: 2.25rem / font-weight: 500</span>
|
|
||||||
</VCol>
|
|
||||||
</VRow>
|
|
||||||
</VCardText>
|
|
||||||
</VCard>
|
|
||||||
</VCol>
|
|
||||||
</VRow>
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -0,0 +1,51 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import api from "@/api";
|
||||||
|
import { Plugin } from "@/api/types";
|
||||||
|
import PluginCard from "@/components/cards/PluginCard.vue";
|
||||||
|
import NoDataFound from "@/components/NoDataFound.vue";
|
||||||
|
|
||||||
|
// 数据列表
|
||||||
|
const dataList = ref<Plugin[]>([]);
|
||||||
|
|
||||||
|
// 是否刷新过
|
||||||
|
const isRefreshed = ref(false);
|
||||||
|
|
||||||
|
// 获取订阅列表数据
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
dataList.value = await api.get("plugin");
|
||||||
|
isRefreshed.value = true;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 加载时获取数据
|
||||||
|
onBeforeMount(fetchData);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VProgressCircular
|
||||||
|
class="centered"
|
||||||
|
v-if="!isRefreshed"
|
||||||
|
indeterminate
|
||||||
|
color="primary"
|
||||||
|
></VProgressCircular>
|
||||||
|
<div class="grid gap-3 grid-site-card" v-if="dataList.length > 0">
|
||||||
|
<PluginCard v-for="data in dataList" :key="data.id" :plugin="data" />
|
||||||
|
</div>
|
||||||
|
<NoDataFound
|
||||||
|
v-if="dataList.length === 0 && isRefreshed"
|
||||||
|
error-code="404"
|
||||||
|
error-title="没有站点"
|
||||||
|
error-description="已加载的插件功能将会在这里展示。"
|
||||||
|
>
|
||||||
|
</NoDataFound>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style type="scss">
|
||||||
|
.grid-plugin-card {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||||
|
padding-block-end: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user