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

fix ui

Browse Source
This commit is contained in:
jxxghp
2023-07-30 09:13:59 +08:00
parent a67722ca40
commit fd8baaf9f2
6 changed files with 77 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/api/types.ts
View File

@@ -279,22 +279,46 @@ export interface TmdbEpisode {
// TMDB人特信息
export interface TmdbPerson {
// ID
id: number
id?: number
// 名称
name: string
name?: string
// 角色
character: string
character?: string
// 图片
profile_path: string
profile_path?: string
// 性别
gender: number
gender?: number
// 原名
original_name: string
original_name?: string
// 演员ID
credit_id?: string
// 别名
also_known_as?: string[]
// 生日
birthday?: string
// 卒日
deathday?: string
// IMDB ID
imdb_id?: string
// 部门
known_for_department?: string
// 出生地
place_of_birth?: string
// 热度
popularity?: number
}
// 站点

4
src/components/cards/PersonCard.vue
View File

@@ -63,4 +63,8 @@ function getPersonImage() {
.person-card {
background-image: linear-gradient(45deg, #99999b, #384359 60%);
}
.person-card:hover {
background-image: linear-gradient(45deg, #bbbbbd, #8597aa 60%);
}
</style>

42
src/pages/browse.vue
View File

@@ -10,25 +10,8 @@ const props = defineProps({
// 路由参数
const route = useRoute()
// 面包屑标题定义
const titles: { [key: string]: any } = {
tmdb: {
trending: '流行趋势',
movies: '热门电影',
tvs: '热门电视剧',
},
douban: {
movies: '最新电影',
tvs: '最新电视剧',
tv_weekly_chinese: '华语剧集榜',
tv_weekly_global: '全球剧集榜',
movie_top250: '电影TOP250',
},
credits: '演员阵容',
media: {
search: '搜索',
},
}
// 标题
const title = route.query?.title?.toString()
// 计算API路径
function getApiPath(paths: string[] | string) {
@@ -37,24 +20,17 @@ function getApiPath(paths: string[] | string) {
else
return paths
}
// 面包屑标题
function getTitle(paths: string[] | string, title: any = '') {
if (Array.isArray(paths)) {
if (title)
return [titles[paths[0]][paths[1]], title]
return ['推荐', titles[paths[0]][paths[1]]]
}
else {
return ['发现']
}
}
</script>
<template>
<div>
<VBreadcrumbs :items="getTitle(props.paths || '', route.query?.title)" />
<div v-if="title" class="mt-8 md:flex md:items-center md:justify-between">
<div class="min-w-0 flex-1 mx-0">
<h2 class="mb-4 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0" data-testid="page-header">
<span class="text-moviepilot">{{ title }}</span>
</h2>
</div>
</div>
<MediaCardListView
:apipath="getApiPath(props.paths || '')"
:params="route.query"

16
src/pages/ranking.vue
View File

@@ -11,7 +11,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
class="slider-header ms-1"
>
<RouterLink
to="/browse/tmdb/trending"
to="/browse/tmdb/trending?title=流行趋势"
class="slider-title"
>
<span>流行趋势</span>
@@ -31,7 +31,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
class="slider-header mt-3 ms-1"
>
<RouterLink
to="/browse/tmdb/movies"
to="/browse/tmdb/movies?title=热门电影"
class="slider-title"
>
<span>热门电影</span>
@@ -51,7 +51,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
class="slider-header mt-3 ms-1"
>
<RouterLink
to="/browse/tmdb/tvs"
to="/browse/tmdb/tvs?title=热门电视剧"
class="slider-title"
>
<span>热门电视剧</span>
@@ -71,7 +71,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
class="slider-header mt-3 ms-1"
>
<RouterLink
to="/browse/douban/movies"
to="/browse/douban/movies?title=最新电影"
class="slider-title"
>
<span>最新电影</span>
@@ -91,7 +91,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
class="slider-header mt-3 ms-1"
>
<RouterLink
to="/browse/douban/tvs"
to="/browse/douban/tvs?title=最新电视剧"
class="slider-title"
>
<span>最新电视剧</span>
@@ -111,7 +111,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
class="slider-header mt-3 ms-1"
>
<RouterLink
to="/browse/douban/movie_top250"
to="/browse/douban/movie_top250?title=电影TOP250"
class="slider-title"
>
<span>电影TOP250</span>
@@ -131,7 +131,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
class="slider-header mt-3 ms-1"
>
<RouterLink
to="/browse/douban/tv_weekly_chinese"
to="/browse/douban/tv_weekly_chinese?title=国产剧集榜"
class="slider-title"
>
<span>国产剧集榜</span>
@@ -151,7 +151,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
class="slider-header mt-3 ms-1"
>
<RouterLink
to="/browse/douban/tv_weekly_global"
to="/browse/douban/tv_weekly_global?title=全球剧集榜"
class="slider-title"
>
<span>全球剧集榜</span>

11
src/styles/styles.scss
View File

@@ -60,3 +60,14 @@
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
padding-block-end: 1rem;
}
.text-moviepilot {
background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
--tw-gradient-from: #818cf8;
--tw-gradient-to: rgba(129,140,248,0);
--tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
--tw-gradient-to: #c084fc;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

16
src/views/discover/MediaDetailView.vue
View File

@@ -14,6 +14,9 @@ const mediaProps = defineProps({
// 媒体详情
const mediaDetail = ref<MediaInfo>({} as MediaInfo)
// 是否已加载完成
const loaded = ref(false)
// 调用API查询详情
async function getMediaDetail() {
if (mediaProps.mediaid && mediaProps.type) {
@@ -23,6 +26,7 @@ async function getMediaDetail() {
},
})
mediaDetail.value = result
loaded.value = true
}
}
@@ -32,6 +36,16 @@ onBeforeMount(() => {
</script>
<template>
<div
v-if="!loaded"
class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
>
<VProgressCircular
size="48"
indeterminate
color="primary"
/>
</div>
<div v-if="mediaDetail.tmdb_id" class="max-w-8xl mx-auto px-4">
<div class="media-page">
<div class="media-page-bg-image">
@@ -110,7 +124,7 @@ onBeforeMount(() => {
</div>
</div>
<NoDataFound
v-if="!mediaDetail.tmdb_id"
v-if="!mediaDetail.tmdb_id && loaded"
error-code="500"
error-title="出错啦！"
error-description="无法获取到媒体信息，请检查网络连接。"