mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-06-01 21:59:54 +08:00
add plugin listview
This commit is contained in:
jxxghp
@@ -214,7 +214,7 @@ export interface DownloadingInfo {
|
||||
media: { [key: string]: any }
|
||||
}
|
||||
|
||||
|
||||
// 缺失剧集信息
|
||||
export interface NotExistMediaInfo {
|
||||
// 季
|
||||
season: number
|
||||
@@ -225,3 +225,31 @@ export interface NotExistMediaInfo {
|
||||
// 开始集
|
||||
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
|
||||
|
||||
}
|
||||
|
||||
23
src/components/cards/PluginCard.vue
Normal file
23
src/components/cards/PluginCard.vue
Normal file
@@ -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>
|
||||
@@ -1,178 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import PluginCardListView from "@/views/setting/PluginCardListView.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCard title="Headlines">
|
||||
<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>
|
||||
<div>
|
||||
<PluginCardListView />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
51
src/views/setting/PluginCardListView.vue
Normal file
51
src/views/setting/PluginCardListView.vue
Normal file
@@ -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