style: Update globalSettings injection in multiple components

This commit is contained in:
jxxghp
2024-08-29 08:36:29 +08:00
parent 9d55f8ab24
commit 6ec1bbe1ae
10 changed files with 107 additions and 55 deletions

View File

@@ -17,6 +17,9 @@ const mediaProps = defineProps({
type: String,
})
// 从 provide 中获取全局设置
const globalSettings: any = inject('globalSettings')
const store = useStore()
// 提示框
@@ -316,9 +319,34 @@ function getEpisodeImage(stillPath: string) {
// TMDB图片转换为w500大小
function getW500Image(url = '') {
if (!url) return ''
return url.replace('original', 'w500')
url = url.replace('original', 'w500')
// 使用图片缓存
if (globalSettings.GLOBAL_IMAGE_CACHE) return `${import.meta.env.VITE_API_BASE_URL}${encodeURIComponent(url)}`
return url
}
// 计算Poster地址
const getPosterUrl: Ref<string> = computed(() => {
const url = mediaDetail.value.poster_path ?? ''
// 如果地址中包含douban则使用中转代理
if (url.includes('doubanio.com'))
return `${import.meta.env.VITE_API_BASE_URL}douban/img?imgurl=${encodeURIComponent(url)}`
// 使用图片缓存
if (globalSettings.GLOBAL_IMAGE_CACHE) return `${import.meta.env.VITE_API_BASE_URL}${url}`
return url
})
// 计算backdrop地址
const getBackdropUrl: Ref<string> = computed(() => {
const url = mediaDetail.value.backdrop_path ?? ''
// 使用图片缓存
if (globalSettings.GLOBAL_IMAGE_CACHE) return `${import.meta.env.VITE_API_BASE_URL}${url}`
// 如果地址中包含douban则使用中转代理
if (url.includes('doubanio.com'))
return `${import.meta.env.VITE_API_BASE_URL}douban/img?imgurl=${encodeURIComponent(url)}`
return url
})
// 获取发行国家名称
const getProductionCountries = computed(() => {
return mediaDetail.value.production_countries?.map(country => country.name)
@@ -423,9 +451,9 @@ onBeforeMount(() => {
<template>
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
<div v-if="mediaDetail.tmdb_id || mediaDetail.douban_id || mediaDetail.bangumi_id" class="max-w-8xl mx-auto px-4">
<template v-if="mediaDetail.backdrop_path || mediaDetail.poster_path">
<template v-if="getBackdropUrl || getPosterUrl">
<div class="vue-media-back absolute left-0 top-0 w-full h-96">
<VImg class="h-96" position="top" :src="mediaDetail.backdrop_path || mediaDetail.poster_path" cover />
<VImg class="h-96" position="top" :src="getBackdropUrl || getPosterUrl" cover />
</div>
<div class="vue-media-back absolute left-0 top-0 w-full h-96" />
</template>

View File

@@ -12,6 +12,9 @@ const personProps = defineProps({
source: String,
})
// 从 provide 中获取全局设置
const globalSettings: any = inject('globalSettings')
// 媒体详情
const personDetail = ref<Person>({} as Person)
@@ -37,22 +40,27 @@ async function getPersonDetail() {
// 人物图片地址
function getPersonImage() {
let url = ''
if (personProps.source === 'themoviedb') {
if (!personDetail.value?.profile_path) return personIcon
return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personDetail.value?.profile_path}`
url = `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personDetail.value?.profile_path}`
} else if (personProps.source === 'douban') {
if (!personDetail.value?.avatar) return personIcon
if (typeof personDetail.value?.avatar === 'object') {
return personDetail.value?.avatar?.normal
url = personDetail.value?.avatar?.normal
} else {
return personDetail.value?.avatar
url = personDetail.value?.avatar
}
} else if (personProps.source === 'bangumi') {
if (!personDetail.value?.images) return personIcon
return personDetail.value?.images?.medium
url = personDetail.value?.images?.medium
} else {
return personIcon
}
// 使用图片缓存
if (globalSettings.GLOBAL_IMAGE_CACHE && url)
return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
return url
}
// 将别名数组拆分为、分隔的字符串

View File

@@ -2,8 +2,8 @@
import { formatDateDifference } from '@/@core/utils/formatters'
import api from '@/api'
// 系统环境变量
const systemEnv = ref<any>({})
// 从 provide 中获取全局设置
const globalSettings: any = inject('globalSettings')
// 所有Release
const allRelease = ref<any>([])
@@ -27,17 +27,6 @@ function showReleaseDialog(title: string, body: string) {
releaseDialog.value = true
}
// 查询系统环境变量
async function querySystemEnv() {
try {
const result: { [key: string]: any } = await api.get('system/env')
systemEnv.value = result.data
} catch (error) {
console.log(error)
}
}
// 查询所有Release
async function queryAllRelease() {
try {
@@ -59,7 +48,6 @@ function releaseTime(releaseDate: string) {
}
onMounted(() => {
querySystemEnv()
queryAllRelease()
})
</script>
@@ -77,9 +65,9 @@ onMounted(() => {
<dt class="block text-sm font-bold">软件版本</dt>
<dd class="flex text-sm sm:col-span-2 sm:mt-0">
<span class="flex-grow flex flex-row items-center truncate">
<code class="truncate">{{ systemEnv.VERSION }}</code>
<code class="truncate">{{ globalSettings.VERSION }}</code>
<a
v-if="latestRelease === systemEnv.VERSION"
v-if="latestRelease === globalSettings.VERSION"
href="https://github.com/jxxghp/MoviePilot/releases"
target="_blank"
rel="noopener noreferrer"
@@ -94,12 +82,12 @@ onMounted(() => {
</dd>
</div>
</div>
<div v-if="systemEnv.FRONTEND_VERSION">
<div v-if="globalSettings.FRONTEND_VERSION">
<div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
<dt class="block text-sm font-bold">前端版本</dt>
<dd class="flex text-sm sm:col-span-2 sm:mt-0">
<span class="flex-grow flex flex-row items-center truncate">
<code class="truncate">{{ systemEnv.FRONTEND_VERSION }}</code>
<code class="truncate">{{ globalSettings.FRONTEND_VERSION }}</code>
</span>
</dd>
</div>
@@ -109,7 +97,7 @@ onMounted(() => {
<dt class="block text-sm font-bold">认证资源版本</dt>
<dd class="flex text-sm sm:col-span-2 sm:mt-0">
<span class="flex-grow flex flex-row items-center truncate">
<code class="truncate">{{ systemEnv.AUTH_VERSION }}</code>
<code class="truncate">{{ globalSettings.AUTH_VERSION }}</code>
</span>
</dd>
</div>
@@ -119,7 +107,7 @@ onMounted(() => {
<dt class="block text-sm font-bold">站点资源版本</dt>
<dd class="flex text-sm sm:col-span-2 sm:mt-0">
<span class="flex-grow flex flex-row items-center truncate">
<code class="truncate">{{ systemEnv.INDEXER_VERSION }}</code>
<code class="truncate">{{ globalSettings.INDEXER_VERSION }}</code>
</span>
</dd>
</div>
@@ -129,7 +117,7 @@ onMounted(() => {
<dt class="block text-sm font-bold">配置目录</dt>
<dd class="flex text-sm sm:col-span-2 sm:mt-0">
<span class="flex-grow undefined">
<code>{{ systemEnv.CONFIG_DIR }}</code>
<code>{{ globalSettings.CONFIG_DIR }}</code>
</span>
</dd>
</div>
@@ -145,7 +133,7 @@ onMounted(() => {
<dt class="block text-sm font-bold">时区</dt>
<dd class="flex text-sm sm:col-span-2 sm:mt-0">
<span class="flex-grow undefined">
<code>{{ systemEnv.TZ }}</code>
<code>{{ globalSettings.TZ }}</code>
</span>
</dd>
</div>
@@ -237,7 +225,7 @@ onMounted(() => {
最新软件版本
</span>
<span
v-if="release.tag_name === systemEnv.VERSION"
v-if="release.tag_name === globalSettings.VERSION"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap cursor-default bg-indigo-500 bg-opacity-80 border border-indigo-500 !text-indigo-100"
>
当前版本

View File

@@ -2,6 +2,9 @@
import { useToast } from 'vue-toast-notification'
import api from '@/api'
// 从 provide 中获取全局设置
const globalSettings: any = inject('globalSettings')
// 提示框
const $toast = useToast()

View File

@@ -13,6 +13,9 @@ const SystemSettings = ref({
APP_DOMAIN: '',
})
// 从 provide 中获取全局设置
const globalSettings: any = inject('globalSettings')
// 选中的媒体服务器
const mediaServers = ref<MediaServerConf[]>([])