style: Update globalSettings injection in multiple components

src/api/index.ts

@@ -37,3 +37,13 @@ api.interceptors.response.use(
 )
 
 export default api
+
+export async function fetchGlobalSettings() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/env')
+    return result.data || {}
+  } catch (error) {
+    console.error('Failed to fetch global settings', error)
+    throw error
+  }
+}

src/components/cards/MediaCard.vue

@@ -19,6 +19,9 @@ const props = defineProps({
   height: String,
 })
 
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
 const store = useStore()
 
 // 提示框
@@ -366,10 +369,11 @@ onBeforeMount(() => {
 const getImgUrl: Ref<string> = computed(() => {
   if (imageLoadError.value) return noImage
   const url = props.media?.poster_path?.replace('original', 'w500') ?? noImage
+  // 使用图片缓存
+  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
 })
 
@@ -405,7 +409,7 @@ function getYear(airDate: string) {
           'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
           'ring-1': isImageLoaded,
         }"
-        @click.stop="goMediaDetail(hover.isHovering)"
+        @click.stop="goMediaDetail(hover.isHovering ?? false)"
       >
         <VImg
           aspect-ratio="2/3"

src/components/cards/PersonCard.vue

@@ -9,6 +9,9 @@ const personProps = defineProps({
   height: String,
 })
 
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
 // 当前人物
 const personInfo = ref(personProps.person)
 
@@ -17,22 +20,26 @@ const isImageLoaded = ref(false)
 
 // 人物图片地址
 function getPersonImage() {
+  let url = ''
   if (personProps.person?.source === 'themoviedb') {
     if (!personInfo.value?.profile_path) return personIcon
-    return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
+    url = `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
   } else if (personProps.person?.source === 'douban') {
     if (!personInfo.value?.avatar) return personIcon
     if (typeof personInfo.value?.avatar === 'object') {
-      return personInfo.value?.avatar?.normal
+      url = personInfo.value?.avatar?.normal
     } else {
-      return personInfo.value?.avatar
+      url = personInfo.value?.avatar
     }
   } else if (personProps.person?.source === 'bangumi') {
     if (!personInfo.value?.images) return personIcon
-    return personInfo.value?.images?.medium
+    url = personInfo.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
 }
 
 // 人物姓名

src/components/dialog/ReorganizeDialog.vue

@@ -6,7 +6,7 @@ import api from '@/api'
 import { numberValidator } from '@/@validators'
 import { useDisplay } from 'vuetify'
 import ProgressDialog from './ProgressDialog.vue'
-import { FileItem, MediaDirectory } from '@/api/types'
+import { FileItem, TransferDirectoryConf } from '@/api/types'
 
 // 显示器宽度
 const display = useDisplay()
@@ -22,6 +22,12 @@ const props = defineProps({
   target: String,
 })
 
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
+// 当前识别类型
+const mediaSource = ref(globalSettings.data?.RECOGNIZE_SOURCE || 'themoviedb')
+
 // 定义事件
 const emit = defineEmits(['done', 'close'])
 
@@ -33,9 +39,6 @@ const seasonItems = ref(
   })),
 )
 
-// 当前识别类型
-const mediaSource = ref('themoviedb')
-
 // 提示框
 const $toast = useToast()
 
@@ -88,20 +91,20 @@ const transferForm = reactive({
 })
 
 // 所有媒体库目录
-const libraryDirectories = ref<MediaDirectory[]>([])
+const libraryDirectories = ref<TransferDirectoryConf[]>([])
 
 // 目的目录下拉框
 const targetDirectories = computed(() => {
-  const directories = libraryDirectories.value.map(item => item.path)
+  const directories = libraryDirectories.value.map(item => item.library_path)
   return [...new Set(directories)]
 })
 
 // 监听目的路径变化，自动查询目录的刮削配置
 watch(transferForm, async () => {
   if (transferForm.target) {
-    const directory = libraryDirectories.value.find(item => item.path === transferForm.target)
+    const directory = libraryDirectories.value.find(item => item.library_path === transferForm.target)
     if (directory) {
-      transferForm.scrape = directory.scrape ?? false
+      transferForm.scrape = directory.scraping ?? false
     }
   }
 })
@@ -186,16 +189,6 @@ async function handleTransferLog(logid: number) {
   }
 }
 
-// 调用API，加载当前系统环境设置
-async function loadSystemSettings() {
-  try {
-    const result: { [key: string]: any } = await api.get('system/env')
-    if (result) mediaSource.value = result.data?.RECOGNIZE_SOURCE || 'themoviedb'
-  } catch (e) {
-    console.error(e)
-  }
-}
-
 // 查询媒体库目录
 async function loadLibraryDirectories() {
   try {
@@ -209,7 +202,6 @@ async function loadLibraryDirectories() {
 }
 
 onMounted(() => {
-  loadSystemSettings()
   loadLibraryDirectories()
 })
 </script>

src/main.ts

@@ -28,10 +28,19 @@ import '@layouts/styles/index.scss'
 import '@styles/styles.scss'
 import 'vue-toast-notification/dist/theme-bootstrap.css'
 import 'vue3-perfect-scrollbar/style.css'
+import { fetchGlobalSettings } from './api'
 
 // 创建Vue实例
 const app = createApp(App)
 
+try {
+  const globalSettings = await fetchGlobalSettings()
+  // 使用 provide 传递全局设置
+  app.provide('globalSettings', globalSettings)
+} catch (error) {
+  console.error('Failed to initialize app', error)
+}
+
 // 注册全局组件
 app
   .component('VAceEditor', VAceEditor)

src/views/discover/MediaDetailView.vue

@@ -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>

src/views/discover/PersonDetailView.vue

@@ -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
 }
 
 // 将别名数组拆分为、分隔的字符串

src/views/setting/AccountSettingAbout.vue

@@ -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"
                 >
                   当前版本

src/views/setting/AccountSettingSite.vue

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

src/views/setting/AccountSettingSystem.vue

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