GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-08-27 11:10:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

es lint fix

Browse Source
This commit is contained in:
thofx
2023-07-22 16:09:07 +08:00
parent 48749b29fe
commit 018778488a
80 changed files with 3995 additions and 2982 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/views/discover/MediaCardListView.vue
View File

@@ -1,59 +1,64 @@
<script lang="ts" setup>
import api from "@/api";
import { MediaInfo } from "@/api/types";
import MediaCard from "@/components/cards/MediaCard.vue";
import NoDataFound from "@/components/NoDataFound.vue";
import api from '@/api'
import type { MediaInfo } from '@/api/types'
import MediaCard from '@/components/cards/MediaCard.vue'
import NoDataFound from '@/components/NoDataFound.vue'
// 输入参数
const props = defineProps({
apipath: String,
params: Object as PropType<{ [key: string]: any }>,
});
})
// 判断是否有滚动条
const hasScroll = () => {
function hasScroll() {
return (
document.body.scrollHeight -
(window.innerHeight || document.documentElement.clientHeight) >
2
);
};
document.body.scrollHeight
- (window.innerHeight || document.documentElement.clientHeight)
> 2
)
}
// 当前页码
const page = ref(1);
const page = ref(1)
// 是否加载中
const loading = ref(false);
const loading = ref(false)
// 是否加载完成
const isRefreshed = ref(false);
const isRefreshed = ref(false)
// 数据列表
const dataList = ref<MediaInfo[]>([]);
const currData = ref<MediaInfo[]>([]);
const dataList = ref<MediaInfo[]>([])
const currData = ref<MediaInfo[]>([])
// 拼装参数
const getParams = () => {
function getParams() {
let params = {
page: page.value,
};
if (props.params) {
params = { ...params, ...props.params };
}
return params;
};
if (props.params)
params = { ...params, ...props.params }
return params
}
// 获取订阅列表数据
const fetchData = async ({ done }: { done: any }) => {
async function fetchData({ done }: { done: any }) {
try {
if (!props.apipath) {
return;
}
if (!props.apipath)
return
// 如果正在加载中，直接返回
if (loading.value) {
done("ok");
return;
done('ok')
return
}
// 设置加载中
loading.value = true;
loading.value = true
// 加载到满屏或者加载出错
if (!hasScroll()) {
// 加载多次
@@ -61,83 +66,97 @@ const fetchData = async ({ done }: { done: any }) => {
// 请求API
currData.value = await api.get(props.apipath, {
params: getParams(),
});
})
// 标计为已请求完成
isRefreshed.value = true;
isRefreshed.value = true
if (currData.value.length === 0) {
// 如果没有数据，跳出
done("ok");
return;
done('ok')
return
}
// 合并数据
dataList.value = [...dataList.value, ...currData.value];
dataList.value = [...dataList.value, ...currData.value]
// 页码+1
page.value++;
page.value++
}
} else {
}
else {
// 加载一次
// 请求API
currData.value = await api.get(props.apipath, {
params: getParams(),
});
})
// 标计为已请求完成
isRefreshed.value = true;
isRefreshed.value = true
if (currData.value.length === 0) {
// 如果没有数据，跳出
done("ok");
return;
done('ok')
return
}
// 合并数据
dataList.value = [...dataList.value, ...currData.value];
dataList.value = [...dataList.value, ...currData.value]
// 页码+1
page.value++;
page.value++
}
// 取消加载中
loading.value = false;
loading.value = false
// 返回加载成功
done("ok");
} catch (error) {
console.error(error);
// 返回加载失败
done("error");
done('ok')
}
};
catch (error) {
console.error(error)
// 返回加载失败
done('error')
}
}
</script>
<template>
<VProgressCircular
class="centered"
v-if="!isRefreshed"
class="centered"
indeterminate
color="primary"
></VProgressCircular>
/>
<VInfiniteScroll
mode="intersect"
side="end"
:onLoad="fetchData"
:on-load="fetchData"
class="overflow-hidden"
>
<template #loading />
<div class="grid gap-4 grid-media-card mx-3" v-if="dataList.length > 0" tabindex="0">
<div
v-if="dataList.length > 0"
class="grid gap-4 grid-media-card mx-3"
tabindex="0"
>
<MediaCard
v-for="data in dataList"
:key="data.tmdb_id || data.douban_id"
:media="data"
>
</MediaCard>
/>
</div>
<NoDataFound
v-if="dataList.length === 0 && isRefreshed"
error-code="500"
error-title="出错啦！"
error-description="无法获取到媒体信息，请检查网络连接。"
>
</NoDataFound>
/>
</VInfiniteScroll>
</template>
<style type="scss">
<style lang="scss">
.grid-media-card {
grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
}

59
src/views/discover/MediaCardSlideView.vue
View File

@@ -1,57 +1,72 @@
<script lang="ts" setup>
import api from "@/api";
import { MediaInfo } from "@/api/types";
import MediaCard from "@/components/cards/MediaCard.vue";
import api from '@/api'
import type { MediaInfo } from '@/api/types'
import MediaCard from '@/components/cards/MediaCard.vue'
// 输入参数
const props = defineProps({
apipath: String,
});
})
// 组件加载完成
const componentLoaded = ref(false);
const componentLoaded = ref(false)
// 数据列表
const dataList = ref<MediaInfo[]>([]);
const dataList = ref<MediaInfo[]>([])
// 获取订阅列表数据
const fetchData = async () => {
async function fetchData() {
try {
if (!props.apipath) {
return;
}
dataList.value = await api.get(props.apipath);
componentLoaded.value = true;
} catch (error) {
console.error(error);
if (!props.apipath)
return
dataList.value = await api.get(props.apipath)
componentLoaded.value = true
}
};
catch (error) {
console.error(error)
}
}
// 加载时获取数据
onMounted(fetchData);
onMounted(fetchData)
</script>
<template>
<slot name="title" :loaded="componentLoaded"></slot>
<slot
name="title"
:loaded="componentLoaded"
/>
<VSlideGroup show-arrows="false">
<template #prev>
<VBtn class="rounded-circle shadow-none" icon="mdi-chevron-left" color="grey" />
<VBtn
class="rounded-circle shadow-none"
icon="mdi-chevron-left"
color="grey"
/>
</template>
<VSlideGroupItem v-for="data in dataList" :key="data.tmdb_id">
<VSlideGroupItem
v-for="data in dataList"
:key="data.tmdb_id"
>
<MediaCard
:key="data.tmdb_id || data.douban_id"
:media="data"
height="15rem"
width="10rem"
:key="data.tmdb_id || data.douban_id"
/>
</VSlideGroupItem>
<template #next>
<VBtn class="rounded-circle shadow-none" icon="mdi-chevron-right" color="grey" />
<VBtn
class="rounded-circle shadow-none"
icon="mdi-chevron-right"
color="grey"
/>
</template>
</VSlideGroup>
</template>
<style type="scss">
<style lang="scss">
.v-slide-group .v-card {
@apply m-2;
}

356
src/views/discover/TorrentCardListView.vue
View File

@@ -1,279 +1,295 @@
<script lang="ts" setup>
import { isIntersected } from "@/@core/utils";
import api from "@/api";
import { Context } from "@/api/types";
import TorrentCard from "@/components/cards/TorrentCard.vue";
import NoDataFound from "@/components/NoDataFound.vue";
import store from "@/store";
import { isIntersected } from '@/@core/utils'
import api from '@/api'
import type { Context } from '@/api/types'
import TorrentCard from '@/components/cards/TorrentCard.vue'
import NoDataFound from '@/components/NoDataFound.vue'
import store from '@/store'
// 定义输入参数
const props = defineProps({
// 关键字或TMDBID
keyword: String,
// 类型
type: String,
});
})
// 数据列表
const dataList = ref<Context[]>([]);
const dataList = ref<Context[]>([])
// 分组后的数据列表
const groupedDataList = computed(() => {
return groupByTitleAndSize(dataList.value);
});
return groupByTitleAndSize(dataList.value)
})
// 是否刷新过
const isRefreshed = ref(false);
const isRefreshed = ref(false)
// 加载进度文本
const progressText = ref("");
const progressText = ref('')
// 加载进度
const progressValue = ref(0);
const progressValue = ref(0)
// 加载进度SSE
const progressEventSource = ref<EventSource>();
const progressEventSource = ref<EventSource>()
// 过滤表单
const filterForm = reactive({
// 站点
site: [] as string[],
// 季
season: [] as string[],
// 制作组
releaseGroup: [] as string[],
// 视频编码
videoCode: [] as string[],
// 促销状态
freeState: [] as string[],
// 质量
edition: [] as string[],
});
})
// 获取站点过滤选项
const getSiteFilterOptions = computed(() => {
const options: string[] = [];
const options: string[] = []
dataList.value.forEach((data) => {
if (data.torrent_info?.site_name && !options.includes(data.torrent_info?.site_name)) {
options.push(data.torrent_info?.site_name);
}
});
return options;
});
if (data.torrent_info?.site_name && !options.includes(data.torrent_info?.site_name))
options.push(data.torrent_info?.site_name)
})
return options
})
// 获取季过滤选项
const getSeasonFilterOptions = computed(() => {
const options: string[] = [];
const options: string[] = []
dataList.value.forEach((data) => {
if (
data.meta_info.season_episode &&
!options.includes(data.meta_info.season_episode)
) {
options.push(data.meta_info.season_episode);
}
});
return options;
});
data.meta_info.season_episode
&& !options.includes(data.meta_info.season_episode)
)
options.push(data.meta_info.season_episode)
})
return options
})
// 获取制作组过滤选项
const getReleaseGroupFilterOptions = computed(() => {
const options: string[] = [];
const options: string[] = []
dataList.value.forEach((data) => {
if (data.meta_info.resource_team && !options.includes(data.meta_info.resource_team)) {
options.push(data.meta_info.resource_team);
}
});
return options;
});
if (data.meta_info.resource_team && !options.includes(data.meta_info.resource_team))
options.push(data.meta_info.resource_team)
})
return options
})
// 获取视频编码过滤选项
const getVideoCodeFilterOptions = computed(() => {
const options: string[] = [];
const options: string[] = []
dataList.value.forEach((data) => {
if (data.meta_info.video_encode && !options.includes(data.meta_info.video_encode)) {
options.push(data.meta_info.video_encode);
}
});
return options;
});
if (data.meta_info.video_encode && !options.includes(data.meta_info.video_encode))
options.push(data.meta_info.video_encode)
})
return options
})
// 获取促销状态过滤选项
const getFreeStateFilterOptions = computed(() => {
const options: string[] = [];
const options: string[] = []
dataList.value.forEach((data) => {
if (
data.torrent_info.volume_factor &&
!options.includes(data.torrent_info.volume_factor)
) {
options.push(data.torrent_info.volume_factor);
}
});
return options;
});
data.torrent_info.volume_factor
&& !options.includes(data.torrent_info.volume_factor)
)
options.push(data.torrent_info.volume_factor)
})
return options
})
// 获取质量过滤选项
const getEditionFilterOptions = computed(() => {
const options: string[] = [];
const options: string[] = []
dataList.value.forEach((data) => {
if (data.meta_info.edition && !options.includes(data.meta_info.edition)) {
options.push(data.meta_info.edition);
}
});
return options;
});
if (data.meta_info.edition && !options.includes(data.meta_info.edition))
options.push(data.meta_info.edition)
})
return options
})
// 按过滤项过滤卡片
const filterTorrentsCard = (data: Context) => {
function filterTorrentsCard(data: Context) {
// 当前分组的所有数据
const items: Context[] =
groupedDataList.value.get(`${data.torrent_info.title}_${data.torrent_info.size}`) ??
[];
const items: Context[]
= groupedDataList.value.get(`${data.torrent_info.title}_${data.torrent_info.size}`)
?? []
// 站点名称、促销状态
let site_names = [];
let volume_factors = [];
const site_names = []
const volume_factors = []
for (const { torrent_info } of items) {
site_names.push(torrent_info.site_name);
volume_factors.push(torrent_info.volume_factor);
site_names.push(torrent_info.site_name)
volume_factors.push(torrent_info.volume_factor)
}
const { meta_info } = data;
const { meta_info } = data
// 季、制作组、视频编码
const { season_episode, resource_team, video_encode } = meta_info;
const { season_episode, resource_team, video_encode } = meta_info
// 站点过滤
if (filterForm.site.length > 0 && !isIntersected(filterForm.site, site_names)) {
return false;
}
if (filterForm.site.length > 0 && !isIntersected(filterForm.site, site_names))
return false
// 促销状态过滤
if (
filterForm.freeState.length > 0 &&
!isIntersected(filterForm.freeState, volume_factors)
) {
return false;
}
filterForm.freeState.length > 0
&& !isIntersected(filterForm.freeState, volume_factors)
)
return false
// 季过滤
if (filterForm.season.length > 0 && !filterForm.season.includes(season_episode)) {
return false;
}
if (filterForm.season.length > 0 && !filterForm.season.includes(season_episode))
return false
// 制作组过滤
if (
filterForm.releaseGroup.length > 0 &&
!filterForm.releaseGroup.includes(resource_team || "")
) {
return false;
}
filterForm.releaseGroup.length > 0
&& !filterForm.releaseGroup.includes(resource_team || '')
)
return false
// 视频编码过滤
if (
filterForm.videoCode.length > 0 &&
!filterForm.videoCode.includes(video_encode || "")
) {
return false;
}
filterForm.videoCode.length > 0
&& !filterForm.videoCode.includes(video_encode || '')
)
return false
// 质量过滤
if (filterForm.edition.length > 0 && !filterForm.edition.includes(meta_info.edition)) {
return false;
}
return true;
};
return !(filterForm.edition.length > 0 && !filterForm.edition.includes(meta_info.edition))
}
// 获取订阅列表数据
const fetchData = async () => {
async function fetchData() {
try {
let keyword = props.keyword ?? "";
let mtype = props.type ?? "";
const keyword = props.keyword ?? ''
const mtype = props.type ?? ''
if (!keyword) {
// 查询上次搜索结果
dataList.value = await api.get("search/last");
} else {
startLoadingProgress();
dataList.value = await api.get('search/last')
}
else {
startLoadingProgress()
// 优先按TMDBID精确查询
if (props.keyword?.startsWith("tmdb:") || props.keyword?.startsWith("douban:")) {
if (props.keyword?.startsWith('tmdb:') || props.keyword?.startsWith('douban:')) {
dataList.value = await api.get(`search/media/${props.keyword}`, {
params: {
mtype,
},
});
} else {
// 按标题模糊查询
dataList.value = await api.get(`search/title/${props.keyword}`);
})
}
stopLoadingProgress();
else {
// 按标题模糊查询
dataList.value = await api.get(`search/title/${props.keyword}`)
}
stopLoadingProgress()
}
isRefreshed.value = true;
} catch (error) {
console.error(error);
isRefreshed.value = true
}
};
catch (error) {
console.error(error)
}
}
// 按标题和大小分组
const groupByTitleAndSize = (contextArray: Context[]): Map<string, Context[]> => {
const groupMap = new Map<string, Context[]>();
function groupByTitleAndSize(contextArray: Context[]): Map<string, Context[]> {
const groupMap = new Map<string, Context[]>()
for (const context of contextArray) {
const { torrent_info } = context;
const key = `${torrent_info.title}_${torrent_info.size}`;
const { torrent_info } = context
const key = `${torrent_info.title}_${torrent_info.size}`
if (groupMap.has(key)) {
// 已存在相同标题和大小的分组，将当前上下文信息添加到分组中
const group = groupMap.get(key);
group?.push(context);
} else {
const group = groupMap.get(key)
group?.push(context)
}
else {
// 创建新的分组，并将当前上下文信息添加到分组中
groupMap.set(key, [context]);
groupMap.set(key, [context])
}
}
return groupMap;
};
return groupMap
}
// 获取每个分组的第一个数据
const getFirstContexts = computed(() => {
const firstContexts: Context[] = [];
const firstContexts: Context[] = []
groupedDataList.value.forEach((group) => {
if (group.length > 0) {
firstContexts.push(group[0]);
}
});
if (group.length > 0)
firstContexts.push(group[0])
})
return firstContexts;
});
return firstContexts
})
// 使用SSE监听加载进度
const startLoadingProgress = () => {
progressText.value = "正在搜索，请稍候...";
const token = store.state.auth.token;
function startLoadingProgress() {
progressText.value = '正在搜索，请稍候...'
const token = store.state.auth.token
progressEventSource.value = new EventSource(
`${import.meta.env.VITE_API_BASE_URL}system/progress/search?token=${token}`
);
`${import.meta.env.VITE_API_BASE_URL}system/progress/search?token=${token}`,
)
progressEventSource.value.onmessage = (event) => {
const progress = JSON.parse(event.data);
const progress = JSON.parse(event.data)
if (progress) {
progressText.value = progress.text;
progressValue.value = progress.value;
progressText.value = progress.text
progressValue.value = progress.value
}
};
};
}
}
// 停止监听加载进度
const stopLoadingProgress = () => {
progressEventSource.value?.close();
};
function stopLoadingProgress() {
progressEventSource.value?.close()
}
// 加载时获取数据
onBeforeMount(fetchData);
onBeforeMount(fetchData)
</script>
<template>
<VCard class="bg-transparent mb-3 pt-2 shadow-none">
<VRow>
<VCol v-if="getSiteFilterOptions.length > 0" cols="6" md="">
<VCol
v-if="getSiteFilterOptions.length > 0"
cols="6"
md=""
>
<VSelect
v-model="filterForm.site"
:items="getSiteFilterOptions"
@@ -284,7 +300,11 @@ onBeforeMount(fetchData);
multiple
/>
</VCol>
<VCol v-if="getSeasonFilterOptions.length > 0" cols="6" md="">
<VCol
v-if="getSeasonFilterOptions.length > 0"
cols="6"
md=""
>
<VSelect
v-model="filterForm.season"
:items="getSeasonFilterOptions"
@@ -295,7 +315,11 @@ onBeforeMount(fetchData);
multiple
/>
</VCol>
<VCol v-if="getReleaseGroupFilterOptions.length > 0" cols="6" md="">
<VCol
v-if="getReleaseGroupFilterOptions.length > 0"
cols="6"
md=""
>
<VSelect
v-model="filterForm.releaseGroup"
:items="getReleaseGroupFilterOptions"
@@ -306,7 +330,11 @@ onBeforeMount(fetchData);
multiple
/>
</VCol>
<VCol v-if="getEditionFilterOptions.length > 0" cols="6" md="">
<VCol
v-if="getEditionFilterOptions.length > 0"
cols="6"
md=""
>
<VSelect
v-model="filterForm.edition"
:items="getEditionFilterOptions"
@@ -317,7 +345,11 @@ onBeforeMount(fetchData);
multiple
/>
</VCol>
<VCol v-if="getVideoCodeFilterOptions.length > 0" cols="6" md="">
<VCol
v-if="getVideoCodeFilterOptions.length > 0"
cols="6"
md=""
>
<VSelect
v-model="filterForm.videoCode"
:items="getVideoCodeFilterOptions"
@@ -328,7 +360,11 @@ onBeforeMount(fetchData);
multiple
/>
</VCol>
<VCol v-if="getFreeStateFilterOptions.length > 0" cols="6" md="">
<VCol
v-if="getFreeStateFilterOptions.length > 0"
cols="6"
md=""
>
<VSelect
v-model="filterForm.freeState"
:items="getFreeStateFilterOptions"
@@ -342,14 +378,14 @@ onBeforeMount(fetchData);
</VRow>
</VCard>
<VProgressCircular
class="centered"
v-if="!isRefreshed && !props.keyword"
class="centered"
indeterminate
color="primary"
></VProgressCircular>
/>
<div
class="top-centered mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
v-if="!isRefreshed && props.keyword"
class="top-centered mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
>
<VProgressCircular
class="mb-3"
@@ -357,10 +393,13 @@ onBeforeMount(fetchData);
:model-value="progressValue"
size="64"
width="7"
></VProgressCircular>
/>
<span>{{ progressText }}</span>
</div>
<div class="grid gap-3 grid-torrent-card items-start" v-if="dataList.length > 0">
<div
v-if="dataList.length > 0"
class="grid gap-3 grid-torrent-card items-start"
>
<TorrentCard
v-for="data in getFirstContexts"
v-show="filterTorrentsCard(data)"
@@ -378,11 +417,10 @@ onBeforeMount(fetchData);
error-code="404"
error-title="没有资源"
error-description="没有搜索到符合条件的资源。"
>
</NoDataFound>
/>
</template>
<style type="scss">
<style lang="scss">
.grid-torrent-card {
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
padding-block-end: 1rem;