GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-06 20:43:03 +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

2
index.html
View File

@@ -36,7 +36,7 @@
<div id="loading-bg">
<div class="loading-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">
<g transform="matrix(1,0,0,1,-2606,-236)">
<g id="a2-c" transform="matrix(1,0,0,1,2606,236)">

7
public/loader.css
View File

@@ -3,10 +3,9 @@ body {
}
html {
overflow: hidden auto;
background: var(--initial-loader-bg, #fff);
min-block-size: calc(100% + env(safe-area-inset-top));
overflow-x: hidden;
overflow-y: auto;
}
#loading-bg {
@@ -21,7 +20,7 @@ html {
.loading-logo {
position: absolute;
inset-block-start: 40%;
inset-inline-start: calc(50% - 50px);
inset-inline-start: calc(50% - 5rem);
}
.loading {
@@ -83,4 +82,4 @@ html {
opacity: 1;
transform: rotate(1turn);
}
}
}

2
src/@core/components/LoadingBanner.vue
View File

@@ -8,7 +8,7 @@ const props = defineProps({
<template>
<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" />
<span>{{ props.text }}</span>
</div>

151
src/components/cards/SubscribeCard.vue
View File

@@ -38,8 +38,8 @@ function imageLoadHandler() {
// 根据 type 返回不同的图标
function getIcon() {
if (props.media?.type === '电影') return 'mdi-movie'
else if (props.media?.type === '电视剧') return 'mdi-television-classic'
if (props.media?.type === '电影') return 'mdi-movie-open'
else if (props.media?.type === '电视剧') return 'mdi-television-play'
else return 'mdi-help-circle'
}
@@ -54,12 +54,12 @@ function getPercentage() {
// 计算文本颜色
function getTextColor() {
return imageLoaded.value ? 'white' : ''
return 'white'
}
// 计算文本类
function getTextClass() {
return imageLoaded.value ? 'text-white' : ''
return 'text-white'
}
// 删除订阅
@@ -186,7 +186,7 @@ watch(
:key="props.media?.id"
class="flex flex-col"
: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,
}"
@click="editSubscribeDialog"
@@ -194,74 +194,87 @@ watch(
<template #image>
<VImg
:src="props.media?.backdrop || props.media?.poster"
aspect-ratio="2/3"
aspect-ratio="3/2"
cover
class="brightness-50"
:class="{ 'brightness-50': imageLoaded }"
@load="imageLoadHandler"
/>
>
<template #placeholder>
<div class="w-full h-full">
<VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
</div>
</template>
</VImg>
</template>
<VCardItem>
<template #prepend>
<VIcon size="1.9rem" :color="getTextColor()" :icon="getIcon()" />
</template>
<VCardTitle :class="getTextClass()">
{{ props.media?.name }}
{{ formatSeason(props.media?.season ? props.media?.season.toString() : '') }}
</VCardTitle>
<template #append>
<div class="me-n3">
<IconBtn>
<VIcon icon="mdi-dots-vertical" :color="getTextColor()" />
<VMenu activator="parent" close-on-content-click>
<VList>
<template v-for="(item, i) in dropdownItems" :key="i">
<VListItem
v-if="item.show !== false"
variant="plain"
:base-color="item.props.color"
@click="item.props.click"
>
<template #prepend>
<VIcon :icon="item.props.prependIcon" />
</template>
<VListItemTitle v-text="item.title" />
</VListItem>
</template>
</VList>
</VMenu>
</IconBtn>
<div v-if="imageLoaded">
<VCardItem>
<template #prepend>
<VIcon size="1.9rem" :color="getTextColor()" :icon="getIcon()" />
</template>
<VCardTitle :class="getTextClass()">
{{ props.media?.name }}
{{ formatSeason(props.media?.season ? props.media?.season.toString() : '') }}
</VCardTitle>
<template #append>
<div class="me-n3">
<IconBtn>
<VIcon icon="mdi-dots-vertical" :color="getTextColor()" />
<VMenu activator="parent" close-on-content-click>
<VList>
<template v-for="(item, i) in dropdownItems" :key="i">
<VListItem
v-if="item.show !== false"
variant="plain"
:base-color="item.props.color"
@click="item.props.click"
>
<template #prepend>
<VIcon :icon="item.props.prependIcon" />
</template>
<VListItemTitle v-text="item.title" />
</VListItem>
</template>
</VList>
</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>
</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>
</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" />
</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"
/>
</div>
</VCard>
</template>
</VHover>

2
src/components/filebrowser/FileList.vue
View File

@@ -18,7 +18,7 @@ const display = useDisplay()
// APP
const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
})
// 输入参数

2
src/layouts/components/DefaultLayoutWithVerticalNav.vue
View File

@@ -21,7 +21,7 @@ const getMenuList = (header: string) => {
}
// APP模式
const appMode = computed(() => localStorage.getItem('MP_APPMODE') == '1')
const appMode = computed(() => localStorage.getItem('MP_APPMODE') != '0')
</script>
<template>

4
src/layouts/components/Footer.vue
View File

@@ -3,7 +3,7 @@ import { useDisplay } from 'vuetify'
const display = useDisplay()
const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
})
const route = useRoute()
@@ -47,7 +47,7 @@ const activeState = computed(() => {
</VBtn>
<VBtn to="/apps" :ripple="false">
<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>
</VBottomNavigation>
</div>

7
src/layouts/components/UserProfile.vue
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中获取信息
const superUser = store.state.auth.superUser
@@ -99,6 +99,11 @@ watch(isCompactMode, value => {
</VListItemTitle>
<VListItemSubtitle>{{ userName }}</VListItemSubtitle>
</VListItem>
<!-- Divider -->
<VDivider v-if="display.mdAndDown.value" class="my-2" />
<!-- 👉 AppMode -->
<VListItem v-if="display.mdAndDown.value">
<template #prepend>
<VSwitch class="me-2" v-model="isCompactMode"></VSwitch>

2
src/pages/dashboard.vue
View File

@@ -10,7 +10,7 @@ import { useDisplay } from 'vuetify'
// APP
const display = useDisplay()
const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
})
// 从Vuex Store中获取superuser信息

2
src/pages/resource.vue
View File

@@ -10,7 +10,7 @@ import { useDisplay } from 'vuetify'
// APP
const display = useDisplay()
const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
})
// 路由参数

9
src/views/dashboard/AnalyticsMediaStatistic.vue
View File

@@ -2,14 +2,7 @@
import api from '@/api'
import type { MediaStatistic } from '@/api/types'
const statistics = ref([
{
title: '',
stats: '',
icon: '',
color: '',
},
])
const statistics = ref<{ [key: string]: string }[]>([])
// 调用API加载媒体统计数据
async function loadMediaStatistic() {

2
src/views/discover/TorrentRowListView.vue
View File

@@ -8,7 +8,7 @@ const display = useDisplay()
// APP
const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
})
// 定义输入参数

2
src/views/plugin/PluginCardListView.vue
View File

@@ -18,7 +18,7 @@ const display = useDisplay()
// APP
const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
})
// 当前标签

2
src/views/reorganize/TransferHistoryView.vue
View File

@@ -14,7 +14,7 @@ const display = useDisplay()
// APP
const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
})
// 提示框

2
src/views/site/SiteCardListView.vue
View File

@@ -12,7 +12,7 @@ const display = useDisplay()
// APP
const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
})
// 数据列表

2
src/views/subscribe/SubscribeListView.vue
View File

@@ -14,7 +14,7 @@ const display = useDisplay()
// APP
const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
})
// 输入参数