GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 23:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix ui

Browse Source
This commit is contained in:
jxxghp
2024-06-14 08:27:42 +08:00
parent 971bae3be0
commit f598eed149
16 changed files with 105 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -36,7 +36,7 @@
<div id="loading-bg"> <div id="loading-bg">
<div class="loading-logo"> <div class="loading-logo">
<!-- Logo --> <!-- Logo -->
<svg width="100px" height="100px" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg" <svg width="10rem" height="10rem" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg"
style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2"> style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2">
<g transform="matrix(1,0,0,1,-2606,-236)"> <g transform="matrix(1,0,0,1,-2606,-236)">
<g id="a2-c" transform="matrix(1,0,0,1,2606,236)"> <g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
public/loader.css
+3 -4
View File
@@ -3,10 +3,9 @@ body {
} }
html { html {
overflow: hidden auto;
background: var(--initial-loader-bg, #fff); background: var(--initial-loader-bg, #fff);
min-block-size: calc(100% + env(safe-area-inset-top)); min-block-size: calc(100% + env(safe-area-inset-top));
overflow-x: hidden;
overflow-y: auto;
} }
#loading-bg { #loading-bg {
@@ -21,7 +20,7 @@ html {
.loading-logo { .loading-logo {
position: absolute; position: absolute;
inset-block-start: 40%; inset-block-start: 40%;
inset-inline-start: calc(50% - 50px); inset-inline-start: calc(50% - 5rem);
} }
.loading { .loading {
@@ -83,4 +82,4 @@ html {
opacity: 1; opacity: 1;
transform: rotate(1turn); transform: rotate(1turn);
} }
} }
src/@core/components/LoadingBanner.vue
+1 -1
View File
@@ -8,7 +8,7 @@ const props = defineProps({
<template> <template>
<div class="w-full text-center text-gray-500 text-sm flex flex-col items-center"> <div class="w-full text-center text-gray-500 text-sm flex flex-col items-center">
<VProgressCircular v-if="!props.text || !props.progress" class="mb-3" size="48" indeterminate color="primary" /> <VProgressCircular v-if="!props.text || !props.progress" class="mb-3" size="64" indeterminate color="primary" />
<VProgressCircular v-if="props.progress" class="mb-3" color="primary" :model-value="props.progress" size="64" /> <VProgressCircular v-if="props.progress" class="mb-3" color="primary" :model-value="props.progress" size="64" />
<span>{{ props.text }}</span> <span>{{ props.text }}</span>
</div> </div>
src/components/cards/SubscribeCard.vue
+82 -69
View File
@@ -38,8 +38,8 @@ function imageLoadHandler() {
// 根据 type 返回不同的图标 // 根据 type 返回不同的图标
function getIcon() { function getIcon() {
if (props.media?.type === '电影') return 'mdi-movie' if (props.media?.type === '电影') return 'mdi-movie-open'
else if (props.media?.type === '电视剧') return 'mdi-television-classic' else if (props.media?.type === '电视剧') return 'mdi-television-play'
else return 'mdi-help-circle' else return 'mdi-help-circle'
} }
@@ -54,12 +54,12 @@ function getPercentage() {
// 计算文本颜色 // 计算文本颜色
function getTextColor() { function getTextColor() {
return imageLoaded.value ? 'white' : '' return 'white'
} }
// 计算文本类 // 计算文本类
function getTextClass() { function getTextClass() {
return imageLoaded.value ? 'text-white' : '' return 'text-white'
} }
// 删除订阅 // 删除订阅
@@ -186,7 +186,7 @@ watch(
:key="props.media?.id" :key="props.media?.id"
class="flex flex-col" class="flex flex-col"
:class="{ :class="{
'outline-dashed outline-1': props.media?.best_version, 'outline-dashed outline-1': props.media?.best_version && imageLoaded,
'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering, 'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
}" }"
@click="editSubscribeDialog" @click="editSubscribeDialog"
@@ -194,74 +194,87 @@ watch(
<template #image> <template #image>
<VImg <VImg
:src="props.media?.backdrop || props.media?.poster" :src="props.media?.backdrop || props.media?.poster"
aspect-ratio="2/3" aspect-ratio="3/2"
cover cover
class="brightness-50" :class="{ 'brightness-50': imageLoaded }"
@load="imageLoadHandler" @load="imageLoadHandler"
/> >
<template #placeholder>
<div class="w-full h-full">
<VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
</div>
</template>
</VImg>
</template> </template>
<VCardItem> <div v-if="imageLoaded">
<template #prepend> <VCardItem>
<VIcon size="1.9rem" :color="getTextColor()" :icon="getIcon()" /> <template #prepend>
</template> <VIcon size="1.9rem" :color="getTextColor()" :icon="getIcon()" />
<VCardTitle :class="getTextClass()"> </template>
{{ props.media?.name }} <VCardTitle :class="getTextClass()">
{{ formatSeason(props.media?.season ? props.media?.season.toString() : '') }} {{ props.media?.name }}
</VCardTitle> {{ formatSeason(props.media?.season ? props.media?.season.toString() : '') }}
<template #append> </VCardTitle>
<div class="me-n3"> <template #append>
<IconBtn> <div class="me-n3">
<VIcon icon="mdi-dots-vertical" :color="getTextColor()" /> <IconBtn>
<VMenu activator="parent" close-on-content-click> <VIcon icon="mdi-dots-vertical" :color="getTextColor()" />
<VList> <VMenu activator="parent" close-on-content-click>
<template v-for="(item, i) in dropdownItems" :key="i"> <VList>
<VListItem <template v-for="(item, i) in dropdownItems" :key="i">
v-if="item.show !== false" <VListItem
variant="plain" v-if="item.show !== false"
:base-color="item.props.color" variant="plain"
@click="item.props.click" :base-color="item.props.color"
> @click="item.props.click"
<template #prepend> >
<VIcon :icon="item.props.prependIcon" /> <template #prepend>
</template> <VIcon :icon="item.props.prependIcon" />
<VListItemTitle v-text="item.title" /> </template>
</VListItem> <VListItemTitle v-text="item.title" />
</template> </VListItem>
</VList> </template>
</VMenu> </VList>
</IconBtn> </VMenu>
</IconBtn>
</div>
</template>
</VCardItem>
<VCardText>
<p class="clamp-text mb-0" :class="getTextClass()">
{{ props.media?.description }}
</p>
</VCardText>
<VCardText class="d-flex justify-space-between align-center flex-wrap">
<div class="d-flex align-center">
<IconBtn
v-if="props.media?.total_episode"
v-bind="props"
icon="mdi-progress-clock"
:color="getTextColor()"
class="me-1"
/>
<span v-if="props.media?.season" class="text-subtitle-2 me-4" :class="getTextClass()"
>{{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
{{ props.media?.total_episode }}</span
>
<IconBtn v-if="props.media?.username" icon="mdi-account" :color="getTextColor()" class="me-1" />
<span v-if="props.media?.username" class="text-subtitle-2 me-4" :class="getTextClass()">
{{ props.media?.username }}
</span>
</div> </div>
</template> </VCardText>
</VCardItem> <VCardText v-if="lastUpdateText" class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
<VCardText> <VIcon icon="mdi-download" class="me-1" />
<p class="clamp-text mb-0" :class="getTextClass()"> {{ lastUpdateText }}
{{ props.media?.description }} </VCardText>
</p> <VProgressLinear
</VCardText> v-if="getPercentage() > 0"
<VCardText class="d-flex justify-space-between align-center flex-wrap"> :model-value="getPercentage()"
<div class="d-flex align-center"> bg-color="success"
<IconBtn color="success"
v-if="props.media?.total_episode" />
v-bind="props" </div>
icon="mdi-progress-clock"
:color="getTextColor()"
class="me-1"
/>
<span v-if="props.media?.season" class="text-subtitle-2 me-4" :class="getTextClass()"
>{{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
{{ props.media?.total_episode }}</span
>
<IconBtn v-if="props.media?.username" icon="mdi-account" :color="getTextColor()" class="me-1" />
<span v-if="props.media?.username" class="text-subtitle-2 me-4" :class="getTextClass()">
{{ props.media?.username }}
</span>
</div>
</VCardText>
<VCardText v-if="lastUpdateText" class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
<VIcon icon="mdi-download" class="me-1" />
{{ lastUpdateText }}
</VCardText>
<VProgressLinear v-if="getPercentage() > 0" :model-value="getPercentage()" bg-color="success" color="success" />
</VCard> </VCard>
</template> </template>
</VHover> </VHover>
src/components/filebrowser/FileList.vue
+1 -1
View File
@@ -18,7 +18,7 @@ const display = useDisplay()
// APP // APP
const appMode = computed(() => { const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
}) })
// 输入参数 // 输入参数
src/layouts/components/DefaultLayoutWithVerticalNav.vue
+1 -1
View File
@@ -21,7 +21,7 @@ const getMenuList = (header: string) => {
} }
// APP模式 // APP模式
const appMode = computed(() => localStorage.getItem('MP_APPMODE') == '1') const appMode = computed(() => localStorage.getItem('MP_APPMODE') != '0')
</script> </script>
<template> <template>
src/layouts/components/Footer.vue
+2 -2
View File
@@ -3,7 +3,7 @@ import { useDisplay } from 'vuetify'
const display = useDisplay() const display = useDisplay()
const appMode = computed(() => { const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
}) })
const route = useRoute() const route = useRoute()
@@ -47,7 +47,7 @@ const activeState = computed(() => {
</VBtn> </VBtn>
<VBtn to="/apps" :ripple="false"> <VBtn to="/apps" :ripple="false">
<VIcon v-if="activeState.apps" size="32">mdi-dots-horizontal-circle</VIcon> <VIcon v-if="activeState.apps" size="32">mdi-dots-horizontal-circle</VIcon>
<VIcon v-else size="32">mdi-dots-horizontal-circle-outline</VIcon> <VIcon v-else size="32">mdi-dots-horizontal</VIcon>
</VBtn> </VBtn>
</VBottomNavigation> </VBottomNavigation>
</div> </div>
src/layouts/components/UserProfile.vue
+6 -1
View File
@@ -62,7 +62,7 @@ async function restart() {
} }
// 是否精简模式 // 是否精简模式
const isCompactMode = ref(localStorage.getItem('MP_APPMODE') == '1') const isCompactMode = ref(localStorage.getItem('MP_APPMODE') != '0')
// 从Vuex Store中获取信息 // 从Vuex Store中获取信息
const superUser = store.state.auth.superUser const superUser = store.state.auth.superUser
@@ -99,6 +99,11 @@ watch(isCompactMode, value => {
</VListItemTitle> </VListItemTitle>
<VListItemSubtitle>{{ userName }}</VListItemSubtitle> <VListItemSubtitle>{{ userName }}</VListItemSubtitle>
</VListItem> </VListItem>
<!-- Divider -->
<VDivider v-if="display.mdAndDown.value" class="my-2" />
<!-- 👉 AppMode -->
<VListItem v-if="display.mdAndDown.value"> <VListItem v-if="display.mdAndDown.value">
<template #prepend> <template #prepend>
<VSwitch class="me-2" v-model="isCompactMode"></VSwitch> <VSwitch class="me-2" v-model="isCompactMode"></VSwitch>
src/pages/dashboard.vue
+1 -1
View File
@@ -10,7 +10,7 @@ import { useDisplay } from 'vuetify'
// APP // APP
const display = useDisplay() const display = useDisplay()
const appMode = computed(() => { const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
}) })
// 从Vuex Store中获取superuser信息 // 从Vuex Store中获取superuser信息
src/pages/resource.vue
+1 -1
View File
@@ -10,7 +10,7 @@ import { useDisplay } from 'vuetify'
// APP // APP
const display = useDisplay() const display = useDisplay()
const appMode = computed(() => { const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
}) })
// 路由参数 // 路由参数
src/views/dashboard/AnalyticsMediaStatistic.vue
+1 -8
View File
@@ -2,14 +2,7 @@
import api from '@/api' import api from '@/api'
import type { MediaStatistic } from '@/api/types' import type { MediaStatistic } from '@/api/types'
const statistics = ref([ const statistics = ref<{ [key: string]: string }[]>([])
{
title: '',
stats: '',
icon: '',
color: '',
},
])
// 调用API加载媒体统计数据 // 调用API加载媒体统计数据
async function loadMediaStatistic() { async function loadMediaStatistic() {
src/views/discover/TorrentRowListView.vue
+1 -1
View File
@@ -8,7 +8,7 @@ const display = useDisplay()
// APP // APP
const appMode = computed(() => { const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
}) })
// 定义输入参数 // 定义输入参数
src/views/plugin/PluginCardListView.vue
+1 -1
View File
@@ -18,7 +18,7 @@ const display = useDisplay()
// APP // APP
const appMode = computed(() => { const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
}) })
// 当前标签 // 当前标签
src/views/reorganize/TransferHistoryView.vue
+1 -1
View File
@@ -14,7 +14,7 @@ const display = useDisplay()
// APP // APP
const appMode = computed(() => { const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
}) })
// 提示框 // 提示框
src/views/site/SiteCardListView.vue
+1 -1
View File
@@ -12,7 +12,7 @@ const display = useDisplay()
// APP // APP
const appMode = computed(() => { const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
}) })
// 数据列表 // 数据列表
src/views/subscribe/SubscribeListView.vue
+1 -1
View File
@@ -14,7 +14,7 @@ const display = useDisplay()
// APP // APP
const appMode = computed(() => { const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
}) })
// 输入参数 // 输入参数