fix #2179 根据路径自动匹配刮削开关

fix https://github.com/jxxghp/MoviePilot/issues/2145

.env.production

@@ -1 +1 @@
-VITE_API_BASE_URL=/api/v1/
+VITE_API_BASE_URL=api/v1/

.github/workflows/build.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'yarn'
 
       - name: Download Icons
@@ -39,6 +39,7 @@ jobs:
         run: |
           yarn
           yarn build
+          echo "$frontend_version" > dist/version.txt
           zip -r dist.zip dist
 
       - name: Generate Release

.stylelintrc.json

@@ -21,14 +21,9 @@
         }
     ],
     "rules": {
-        "max-line-length": [
-            120,
-            {
-                "ignore": "comments"
-            }
-        ],
         "liberty/use-logical-spec": true,
         "selector-class-pattern": null,
         "color-function-notation": null
-    }
-}
+    },
+    "fix": true
+}

.vscode/settings.json

@@ -6,9 +6,6 @@
   "[javascript]": {
     "editor.formatOnSave": false
   },
-  "[typescript]": {
-    "editor.formatOnSave": false
-  },
   "[markdown]": {
     "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
   },
@@ -25,7 +22,7 @@
   },
   // Vue
   "[vue]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   // Extension: Volar
   "volar.preview.port": 3000,
@@ -34,6 +31,10 @@
     "source.fixAll.eslint": "explicit",
     "source.fixAll.stylelint": "explicit"
   },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
   "eslint.alwaysShowStatus": true,
   "eslint.format.enable": true,
   // Extension: Stylelint
@@ -53,6 +54,7 @@
     "stylelint",
     "touchless",
     "triggerer",
+    "unref",
     "vuetify"
   ],
   // Extension: Comment Anchors
@@ -104,4 +106,4 @@
     ]
   },
   "vue3snippets.enable-compile-vue-file-on-did-save-code": false
-}
+}

README.md

@@ -1,6 +1,6 @@
 # MoviePilot-Frontend
 
-[MoviePilot](https://github.com/jxxghp/MoviePilot) 的前端项目。
+[MoviePilot](https://github.com/jxxghp/MoviePilot) 的前端项目，NodeJS版本：>= `v20.12.1`。
 
 ## 推荐的IDE设置
 

auto-imports.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {
@@ -41,6 +42,7 @@ declare global {
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -77,6 +79,7 @@ declare global {
   const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -105,6 +108,7 @@ declare global {
   const toReactive: typeof import('@vueuse/core')['toReactive']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -143,6 +147,7 @@ declare global {
   const useCeil: typeof import('@vueuse/math')['useCeil']
   const useClamp: typeof import('@vueuse/math')['useClamp']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
@@ -308,11 +313,13 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
@@ -351,6 +358,7 @@ declare module 'vue' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -387,6 +395,7 @@ declare module 'vue' {
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -415,6 +424,7 @@ declare module 'vue' {
     readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
@@ -453,6 +463,316 @@ declare module 'vue' {
     readonly useCeil: UnwrapRef<typeof import('@vueuse/math')['useCeil']>
     readonly useClamp: UnwrapRef<typeof import('@vueuse/math')['useClamp']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
+    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
+    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
+    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
+    readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
+    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
+    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
+    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
+    readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
+    readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
+    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
+    readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
+    readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
+    readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
+    readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
+    readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
+    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
+    readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
+    readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
+    readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
+    readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
+    readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
+    readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
+    readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
+    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
+    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
+    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
+    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
+    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
+    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
+    readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
+    readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
+    readonly useFloor: UnwrapRef<typeof import('@vueuse/math')['useFloor']>
+    readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
+    readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
+    readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
+    readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
+    readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
+    readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
+    readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
+    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
+    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
+    readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
+    readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
+    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
+    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
+    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
+    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
+    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
+    readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
+    readonly useMath: UnwrapRef<typeof import('@vueuse/math')['useMath']>
+    readonly useMax: UnwrapRef<typeof import('@vueuse/math')['useMax']>
+    readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
+    readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
+    readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
+    readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useMin: UnwrapRef<typeof import('@vueuse/math')['useMin']>
+    readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
+    readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
+    readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
+    readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
+    readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
+    readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
+    readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
+    readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
+    readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
+    readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
+    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
+    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
+    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
+    readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
+    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
+    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
+    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
+    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
+    readonly usePrecision: UnwrapRef<typeof import('@vueuse/math')['usePrecision']>
+    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
+    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
+    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
+    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
+    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
+    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
+    readonly useProjection: UnwrapRef<typeof import('@vueuse/math')['useProjection']>
+    readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
+    readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
+    readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
+    readonly useRound: UnwrapRef<typeof import('@vueuse/math')['useRound']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
+    readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
+    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
+    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
+    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
+    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
+    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
+    readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
+    readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
+    readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
+    readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
+    readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
+    readonly useStore: UnwrapRef<typeof import('vuex')['useStore']>
+    readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
+    readonly useSum: UnwrapRef<typeof import('@vueuse/math')['useSum']>
+    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
+    readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
+    readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
+    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
+    readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
+    readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
+    readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
+    readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
+    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
+    readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
+    readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
+    readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
+    readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
+    readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
+    readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
+    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
+    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
+    readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
+    readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
+    readonly useTrunc: UnwrapRef<typeof import('@vueuse/math')['useTrunc']>
+    readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
+    readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
+    readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
+    readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
+    readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
+    readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
+    readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
+    readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
+    readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
+    readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
+    readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
+    readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
+    readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
+    readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
+    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
+    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
+    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
+    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
+    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
+    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
+    readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
+    readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
+    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
+  }
+}
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {}
+  interface ComponentCustomProperties {
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
+    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
+    readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
+    readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
+    readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
+    readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
+    readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
+    readonly createGenericProjection: UnwrapRef<typeof import('@vueuse/math')['createGenericProjection']>
+    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
+    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
+    readonly createLogger: UnwrapRef<typeof import('vuex')['createLogger']>
+    readonly createNamespacedHelpers: UnwrapRef<typeof import('vuex')['createNamespacedHelpers']>
+    readonly createProjection: UnwrapRef<typeof import('@vueuse/math')['createProjection']>
+    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
+    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
+    readonly createStore: UnwrapRef<typeof import('vuex')['createStore']>
+    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
+    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
+    readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
+    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly logicAnd: UnwrapRef<typeof import('@vueuse/math')['logicAnd']>
+    readonly logicNot: UnwrapRef<typeof import('@vueuse/math')['logicNot']>
+    readonly logicOr: UnwrapRef<typeof import('@vueuse/math')['logicOr']>
+    readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
+    readonly mapActions: UnwrapRef<typeof import('vuex')['mapActions']>
+    readonly mapGetters: UnwrapRef<typeof import('vuex')['mapGetters']>
+    readonly mapMutations: UnwrapRef<typeof import('vuex')['mapMutations']>
+    readonly mapState: UnwrapRef<typeof import('vuex')['mapState']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
+    readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
+    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
+    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
+    readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
+    readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
+    readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
+    readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
+    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
+    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
+    readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
+    readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
+    readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
+    readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
+    readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
+    readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
+    readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
+    readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
+    readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
+    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
+    readonly useAbs: UnwrapRef<typeof import('@vueuse/math')['useAbs']>
+    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
+    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
+    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
+    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
+    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
+    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
+    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
+    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
+    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
+    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
+    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
+    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
+    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
+    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
+    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
+    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useAverage: UnwrapRef<typeof import('@vueuse/math')['useAverage']>
+    readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
+    readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
+    readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
+    readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
+    readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
+    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
+    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
+    readonly useCeil: UnwrapRef<typeof import('@vueuse/math')['useCeil']>
+    readonly useClamp: UnwrapRef<typeof import('@vueuse/math')['useClamp']>
+    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>

components.d.ts

@@ -3,18 +3,18 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     DialogCloseBtn: typeof import('./src/@core/components/DialogCloseBtn.vue')['default']
     ErrorHeader: typeof import('./src/@core/components/ErrorHeader.vue')['default']
     ExistIcon: typeof import('./src/@core/components/ExistIcon.vue')['default']
+    LoadingBanner: typeof import('./src/@core/components/LoadingBanner.vue')['default']
     MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    StatIcon: typeof import('./src/@core/components/StatIcon.vue')['default']
     ThemeSwitcher: typeof import('./src/@core/components/ThemeSwitcher.vue')['default']
   }
 }

index.html

@@ -1,214 +1,163 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width, user-scalable=no" />
-    <title>MoviePilot</title>
-    <meta name="Robots" content="noindex,nofollow,noarchive" />
-    <meta name="referrer" content="origin" />
-    <link rel="icon" type="image/png" href="/logo.png" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="apple-touch-startup-image" href="/splash/apple-splash.jpg" />
-    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <meta name="apple-mobile-web-app-title" content="MoviePilot" />
-    <meta name="description" content="MoviePilot" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="referrer" content="never" />
-    <meta name="msapplication-TileColor" content="#7D34FD" />
-    <meta name="color-scheme" content="light dark" />
-    <meta name="theme-color" content="#28243D" media="(prefers-color-scheme: dark)" />
-    <meta name="theme-color" content="#F4F5FA" media="(prefers-color-scheme: light)" />
-    <meta name="HandheldFriendly" content="True" />
-    <meta name="MobileOptimized" content="320" />
-    <link rel="stylesheet" type="text/css" href="/loader.css" />
-  </head>
 
-  <body>
-    <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"
-          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)">
-              <rect x="0" y="0" width="192" height="192" style="fill: none" />
-              <g transform="matrix(-0.800798,0.462341,-0.769972,-1.33363,1869.11,-896.718)">
+<head>
+  <meta http-equiv="pragma" content="no-cache">
+  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
+  <meta http-equiv="expires" content="0">
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width, user-scalable=no" />
+  <title>MoviePilot</title>
+  <meta name="Robots" content="noindex,nofollow,noarchive" />
+  <meta name="referrer" content="origin" />
+  <link rel="icon" type="image/png" href="/logo.png" />
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+  <link rel="apple-touch-startup-image" href="/splash/apple-splash.jpg" />
+  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+  <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="apple-mobile-web-app-title" content="MoviePilot" />
+  <meta name="description" content="MoviePilot" />
+  <meta name="format-detection" content="telephone=no" />
+  <meta name="referrer" content="never" />
+  <meta name="msapplication-TileColor" content="#7D34FD" />
+  <meta name="color-scheme" content="light dark" />
+  <meta name="theme-color" content="#28243D" media="(prefers-color-scheme: dark)" />
+  <meta name="theme-color" content="#F4F5FA" media="(prefers-color-scheme: light)" />
+  <meta name="HandheldFriendly" content="True" />
+  <meta name="MobileOptimized" content="320" />
+  <link rel="stylesheet" type="text/css" href="/loader.css" />
+  <link rel="preload" href="index.js" as="script">
+</head>
+
+<body>
+  <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"
+        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)">
+            <rect x="0" y="0" width="192" height="192" style="fill: none" />
+            <g transform="matrix(-0.800798,0.462341,-0.769972,-1.33363,1869.11,-896.718)">
+              <path
+                d="M2241.27,-28.175C2238.86,-28.931 2236.64,-29.181 2234.48,-29.254L2159.78,-29.286L2165.01,-11.207C2167.16,-13.121 2169.64,-13.722 2172.26,-13.808L2222.12,-13.822C2223.52,-13.824 2225,-13.701 2226.78,-13.108L2241.27,-28.175Z"
+                style="fill: url(#_Linear1)" />
+            </g>
+            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+              <path
+                d="M2205.67,331.428L2205.67,332.25L2205.67,352.835C2205.67,354.263 2204.91,355.583 2203.67,356.298C2202.43,357.012 2200.91,357.013 2199.67,356.3L2190.78,351.174C2189.73,350.595 2188.83,350.083 2188.03,349.59L2187.45,349.257C2186.66,348.725 2185.91,348.142 2185.21,347.461C2185.08,347.331 2184.95,347.198 2184.82,347.061C2184.26,346.457 2183.75,345.778 2183.3,344.995C2182.16,343.05 2181.69,341.024 2181.68,338.948L2181.67,268.923L2209.77,274.425C2207.5,275.639 2205.68,278.3 2205.67,281.429L2205.67,331.428Z"
+                style="fill: url(#_Linear2)" />
+            </g>
+            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+              <path
+                d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2295.93,363.064C2295.73,363.184 2295.53,363.301 2295.32,363.414L2295.93,363.064Z"
+                style="fill: rgb(141, 81, 249)" />
+            </g>
+            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+              <path
+                d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2299.79,360.238C2299.79,360.238 2320.03,348.464 2320.04,348.461C2323.1,346.372 2324.69,343.444 2325.17,339.877C2325.17,339.877 2325.17,269.846 2325.17,269.839C2325.06,267.482 2324.56,265.739 2323.61,264.133C2322.56,262.445 2321.26,261.005 2319.55,259.97L2304.42,251.217C2303.96,250.949 2303.39,250.948 2302.92,251.216C2302.46,251.484 2302.17,251.979 2302.17,252.515L2302.17,276.775L2302.17,277.879L2302.17,352.926C2302.17,352.933 2302.17,352.941 2302.17,352.948C2302.04,355.861 2301.23,358.279 2299.79,360.238Z"
+                style="fill: url(#_Linear3)" />
+            </g>
+            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+              <path
+                d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256Z"
+                style="fill: rgb(165, 118, 255)" />
+            </g>
+            <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
+              <path
+                d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256ZM2253.68,223.756C2251.6,223.789 2249.87,224.269 2248.47,224.996L2188.17,259.754C2184.35,261.992 2182.35,265.367 2182.18,269.874C2182.18,269.874 2182.17,292.759 2182.17,292.757C2183.25,290.047 2185.13,288.051 2187.62,286.607L2249.57,250.919C2249.58,250.917 2249.58,250.915 2249.59,250.913C2250.83,250.243 2252.17,249.839 2253.67,249.847C2255.21,249.841 2256.54,250.253 2257.76,250.914C2257.76,250.916 2257.76,250.917 2257.76,250.919L2274.92,260.807C2275.38,261.075 2275.95,261.074 2276.42,260.806C2276.88,260.538 2277.17,260.043 2277.17,259.508L2277.17,237.568C2277.17,236.317 2276.5,235.16 2275.42,234.535C2275.42,234.535 2258.88,225 2258.87,224.996C2256.87,224.049 2255.2,223.746 2253.68,223.756Z"
+                style="fill: url(#_Linear4)" />
+            </g>
+            <g transform="matrix(0.800798,0.462341,0.769972,-1.33363,-1677.22,-896.858)">
+              <path
+                d="M2241.55,-28.184C2239.1,-28.989 2236.83,-29.204 2234.68,-29.295C2234.68,-29.295 2220.82,-29.3 2215.03,-29.303C2213.48,-29.303 2212.05,-28.808 2211.28,-28.004C2208.65,-25.275 2202.56,-18.936 2199.45,-15.709C2199.07,-15.306 2199.07,-14.809 2199.46,-14.406C2199.85,-14.004 2200.57,-13.758 2201.34,-13.761C2208.36,-13.788 2222.72,-13.845 2222.72,-13.845C2223.98,-13.851 2225.44,-13.657 2227.06,-13.117L2241.55,-28.184Z"
+                style="fill: rgb(141, 81, 249)" />
+            </g>
+            <g transform="matrix(-4.32309,0,0,12.4454,9610.35,-1450.35)">
+              <path
+                d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z"
+                style="fill: rgb(104, 0, 197)" />
+              <clipPath id="_clip5">
                 <path
-                  d="M2241.27,-28.175C2238.86,-28.931 2236.64,-29.181 2234.48,-29.254L2159.78,-29.286L2165.01,-11.207C2167.16,-13.121 2169.64,-13.722 2172.26,-13.808L2222.12,-13.822C2223.52,-13.824 2225,-13.701 2226.78,-13.108L2241.27,-28.175Z"
-                  style="fill: url(#_Linear1)"
-                />
-              </g>
-              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-                <path
-                  d="M2205.67,331.428L2205.67,332.25L2205.67,352.835C2205.67,354.263 2204.91,355.583 2203.67,356.298C2202.43,357.012 2200.91,357.013 2199.67,356.3L2190.78,351.174C2189.73,350.595 2188.83,350.083 2188.03,349.59L2187.45,349.257C2186.66,348.725 2185.91,348.142 2185.21,347.461C2185.08,347.331 2184.95,347.198 2184.82,347.061C2184.26,346.457 2183.75,345.778 2183.3,344.995C2182.16,343.05 2181.69,341.024 2181.68,338.948L2181.67,268.923L2209.77,274.425C2207.5,275.639 2205.68,278.3 2205.67,281.429L2205.67,331.428Z"
-                  style="fill: url(#_Linear2)"
-                />
-              </g>
-              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-                <path
-                  d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2295.93,363.064C2295.73,363.184 2295.53,363.301 2295.32,363.414L2295.93,363.064Z"
-                  style="fill: rgb(141, 81, 249)"
-                />
-              </g>
-              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-                <path
-                  d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2299.79,360.238C2299.79,360.238 2320.03,348.464 2320.04,348.461C2323.1,346.372 2324.69,343.444 2325.17,339.877C2325.17,339.877 2325.17,269.846 2325.17,269.839C2325.06,267.482 2324.56,265.739 2323.61,264.133C2322.56,262.445 2321.26,261.005 2319.55,259.97L2304.42,251.217C2303.96,250.949 2303.39,250.948 2302.92,251.216C2302.46,251.484 2302.17,251.979 2302.17,252.515L2302.17,276.775L2302.17,277.879L2302.17,352.926C2302.17,352.933 2302.17,352.941 2302.17,352.948C2302.04,355.861 2301.23,358.279 2299.79,360.238Z"
-                  style="fill: url(#_Linear3)"
-                />
-              </g>
-              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-                <path
-                  d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256Z"
-                  style="fill: rgb(165, 118, 255)"
-                />
-              </g>
-              <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
-                <path
-                  d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256ZM2253.68,223.756C2251.6,223.789 2249.87,224.269 2248.47,224.996L2188.17,259.754C2184.35,261.992 2182.35,265.367 2182.18,269.874C2182.18,269.874 2182.17,292.759 2182.17,292.757C2183.25,290.047 2185.13,288.051 2187.62,286.607L2249.57,250.919C2249.58,250.917 2249.58,250.915 2249.59,250.913C2250.83,250.243 2252.17,249.839 2253.67,249.847C2255.21,249.841 2256.54,250.253 2257.76,250.914C2257.76,250.916 2257.76,250.917 2257.76,250.919L2274.92,260.807C2275.38,261.075 2275.95,261.074 2276.42,260.806C2276.88,260.538 2277.17,260.043 2277.17,259.508L2277.17,237.568C2277.17,236.317 2276.5,235.16 2275.42,234.535C2275.42,234.535 2258.88,225 2258.87,224.996C2256.87,224.049 2255.2,223.746 2253.68,223.756Z"
-                  style="fill: url(#_Linear4)"
-                />
-              </g>
-              <g transform="matrix(0.800798,0.462341,0.769972,-1.33363,-1677.22,-896.858)">
-                <path
-                  d="M2241.55,-28.184C2239.1,-28.989 2236.83,-29.204 2234.68,-29.295C2234.68,-29.295 2220.82,-29.3 2215.03,-29.303C2213.48,-29.303 2212.05,-28.808 2211.28,-28.004C2208.65,-25.275 2202.56,-18.936 2199.45,-15.709C2199.07,-15.306 2199.07,-14.809 2199.46,-14.406C2199.85,-14.004 2200.57,-13.758 2201.34,-13.761C2208.36,-13.788 2222.72,-13.845 2222.72,-13.845C2223.98,-13.851 2225.44,-13.657 2227.06,-13.117L2241.55,-28.184Z"
-                  style="fill: rgb(141, 81, 249)"
-                />
-              </g>
-              <g transform="matrix(-4.32309,0,0,12.4454,9610.35,-1450.35)">
-                <path
-                  d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z"
-                  style="fill: rgb(104, 0, 197)"
-                />
-                <clipPath id="_clip5">
+                  d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z" />
+              </clipPath>
+              <g clip-path="url(#_clip5)">
+                <g transform="matrix(0.124502,0.074907,0.206623,-0.0414384,1997.62,-7.40235)">
                   <path
-                    d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z"
-                  />
-                </clipPath>
-                <g clip-path="url(#_clip5)">
-                  <g transform="matrix(0.124502,0.074907,0.206623,-0.0414384,1997.62,-7.40235)">
-                    <path
-                      d="M1726.17,-64.249L1708.16,-72.303L1708.05,-23.514L1721.88,-32.386C1722.96,-33.241 1723.09,-33.944 1723.15,-34.636L1723.15,-54.373C1723.19,-56.238 1724.96,-57.594 1726.87,-56.686L1726.17,-64.249Z"
-                      style="fill: url(#_Linear6)"
-                    />
-                  </g>
-                  <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
-                    <path
-                      d="M1726.17,-45.661L1704.47,-40.254C1706.28,-40.527 1708.14,-40.212 1708.16,-39.416L1708.16,-18.976L1726.17,-18.976L1726.17,-45.661Z"
-                      style="fill: rgb(141, 81, 249)"
-                    />
-                  </g>
-                  <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
-                    <path
-                      d="M1726.17,-45.661L1726.17,-18.976L1708.16,-18.976L1708.16,-39.416C1707.79,-40.732 1704.5,-40.298 1702.68,-40.025L1726.17,-45.661ZM1705.49,-40.491C1706.2,-40.507 1706.87,-40.464 1707.4,-40.327C1708.01,-40.173 1708.48,-39.899 1708.62,-39.436C1708.62,-39.429 1708.62,-39.423 1708.62,-39.416L1708.62,-19.152C1708.62,-19.152 1725.72,-19.152 1725.72,-19.152L1725.72,-45.345L1705.49,-40.491Z"
-                      style="fill: url(#_Radial7)"
-                    />
-                  </g>
+                    d="M1726.17,-64.249L1708.16,-72.303L1708.05,-23.514L1721.88,-32.386C1722.96,-33.241 1723.09,-33.944 1723.15,-34.636L1723.15,-54.373C1723.19,-56.238 1724.96,-57.594 1726.87,-56.686L1726.17,-64.249Z"
+                    style="fill: url(#_Linear6)" />
+                </g>
+                <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
+                  <path
+                    d="M1726.17,-45.661L1704.47,-40.254C1706.28,-40.527 1708.14,-40.212 1708.16,-39.416L1708.16,-18.976L1726.17,-18.976L1726.17,-45.661Z"
+                    style="fill: rgb(141, 81, 249)" />
+                </g>
+                <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
+                  <path
+                    d="M1726.17,-45.661L1726.17,-18.976L1708.16,-18.976L1708.16,-39.416C1707.79,-40.732 1704.5,-40.298 1702.68,-40.025L1726.17,-45.661ZM1705.49,-40.491C1706.2,-40.507 1706.87,-40.464 1707.4,-40.327C1708.01,-40.173 1708.48,-39.899 1708.62,-39.436C1708.62,-39.429 1708.62,-39.423 1708.62,-39.416L1708.62,-19.152C1708.62,-19.152 1725.72,-19.152 1725.72,-19.152L1725.72,-45.345L1705.49,-40.491Z"
+                    style="fill: url(#_Radial7)" />
                 </g>
               </g>
             </g>
           </g>
-          <defs>
-            <linearGradient
-              id="_Linear1"
-              x1="0"
-              y1="0"
-              x2="1"
-              y2="0"
-              gradientUnits="userSpaceOnUse"
-              gradientTransform="matrix(-70.0711,-0.927611,1.54482,-42.0752,2233.59,-20.1891)"
-            >
-              <stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" />
-              <stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
-            </linearGradient>
-            <linearGradient
-              id="_Linear2"
-              x1="0"
-              y1="0"
-              x2="1"
-              y2="0"
-              gradientUnits="userSpaceOnUse"
-              gradientTransform="matrix(4.78193e-15,-78.0949,78.0949,4.78193e-15,2195.72,354.021)"
-            >
-              <stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" />
-              <stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
-            </linearGradient>
-            <linearGradient
-              id="_Linear3"
-              x1="0"
-              y1="0"
-              x2="1"
-              y2="0"
-              gradientUnits="userSpaceOnUse"
-              gradientTransform="matrix(41.6089,41.5866,-41.5866,41.6089,2282.31,262.837)"
-            >
-              <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
-              <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
-            </linearGradient>
-            <linearGradient
-              id="_Linear4"
-              x1="0"
-              y1="0"
-              x2="1"
-              y2="0"
-              gradientUnits="userSpaceOnUse"
-              gradientTransform="matrix(9.25616,16.7005,-16.7005,9.25616,2215,243.712)"
-            >
-              <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
-              <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
-            </linearGradient>
-            <linearGradient
-              id="_Linear6"
-              x1="0"
-              y1="0"
-              x2="1"
-              y2="0"
-              gradientUnits="userSpaceOnUse"
-              gradientTransform="matrix(-0.130164,-61.9937,59.4003,-0.135847,1711.63,-25.7957)"
-            >
-              <stop offset="0" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
-              <stop offset="0.51" style="stop-color: rgb(110, 38, 217); stop-opacity: 1" />
-              <stop offset="1" style="stop-color: rgb(91, 0, 197); stop-opacity: 1" />
-            </linearGradient>
-            <radialGradient
-              id="_Radial7"
-              cx="0"
-              cy="0"
-              r="1"
-              gradientUnits="userSpaceOnUse"
-              gradientTransform="matrix(13.8659,4.71436,-12.1609,5.37534,1708.16,-32.287)"
-            >
-              <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
-              <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
-            </radialGradient>
-          </defs>
-        </svg>
-      </div>
-      <div class="loading">
-        <div class="effect-1 effects"></div>
-        <div class="effect-2 effects"></div>
-        <div class="effect-3 effects"></div>
-      </div>
+        </g>
+        <defs>
+          <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(-70.0711,-0.927611,1.54482,-42.0752,2233.59,-20.1891)">
+            <stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" />
+            <stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
+          </linearGradient>
+          <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(4.78193e-15,-78.0949,78.0949,4.78193e-15,2195.72,354.021)">
+            <stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" />
+            <stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
+          </linearGradient>
+          <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(41.6089,41.5866,-41.5866,41.6089,2282.31,262.837)">
+            <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
+            <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
+          </linearGradient>
+          <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(9.25616,16.7005,-16.7005,9.25616,2215,243.712)">
+            <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
+            <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
+          </linearGradient>
+          <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(-0.130164,-61.9937,59.4003,-0.135847,1711.63,-25.7957)">
+            <stop offset="0" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
+            <stop offset="0.51" style="stop-color: rgb(110, 38, 217); stop-opacity: 1" />
+            <stop offset="1" style="stop-color: rgb(91, 0, 197); stop-opacity: 1" />
+          </linearGradient>
+          <radialGradient id="_Radial7" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+            gradientTransform="matrix(13.8659,4.71436,-12.1609,5.37534,1708.16,-32.287)">
+            <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
+            <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
+          </radialGradient>
+        </defs>
+      </svg>
     </div>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-    <script>
-      const loaderColor = localStorage.getItem('materio-initial-loader-bg') || '#FFFFFF'
-      const primaryColor = localStorage.getItem('materio-initial-loader-color') || '#9155FD'
+    <div class="loading">
+      <div class="effect-1 effects"></div>
+      <div class="effect-2 effects"></div>
+      <div class="effect-3 effects"></div>
+    </div>
+  </div>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+  <script>
+    const loaderColor = localStorage.getItem('materio-initial-loader-bg') || '#FFFFFF'
+    const primaryColor = localStorage.getItem('materio-initial-loader-color') || '#9155FD'
 
-      if (loaderColor) document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
+    if (loaderColor)
+      document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
+
+    if (primaryColor)
+      document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
+  </script>
+</body>
 
-      if (primaryColor) document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
-    </script>
-  </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "1.5.7",
+  "version": "1.9.2",
   "private": true,
   "bin": "dist/service.js",
   "scripts": {
@@ -19,89 +19,83 @@
     ]
   },
   "dependencies": {
-    "@casl/ability": "^6.2.0",
-    "@casl/vue": "^2.2.0",
-    "@floating-ui/dom": "1.2.8",
-    "@vueuse/core": "^10.1.2",
-    "@vueuse/math": "^10.1.2",
-    "apexcharts-clevision": "^3.28.5",
-    "axios": "1.4.0",
-    "axios-mock-adapter": "^1.21.4",
-    "chart.js": "^4.1.2",
-    "colorthief": "^2.4.0",
-    "express": "^4.18.2",
-    "express-http-proxy": "^2.0.0",
-    "jwt-decode": "^3.1.2",
-    "nprogress": "^0.2.0",
-    "postcss-purgecss": "^5.0.0",
-    "prismjs": "^1.29.0",
-    "pull-refresh-vue3": "^0.3.1",
-    "roboto-fontface": "^0.10.0",
-    "sass": "^1.59.3",
-    "tailwindcss": "^3.3.2",
-    "unplugin-vue-define-options": "^1.3.5",
-    "vite-plugin-pwa": "^0.16.4",
-    "vue": "^3.3.2",
-    "vue-chartjs": "^5.2.0",
-    "vue-flatpickr-component": "11.0.3",
-    "vue-i18n": "^9.2.2",
-    "vue-prism-component": "^2.0.0",
-    "vue-router": "^4.2.0",
-    "vue-toast-notification": "^3",
-    "vue3-apexcharts": "^1.4.1",
-    "vue3-perfect-scrollbar": "^1.6.0",
-    "vuetify": "3.3.5",
-    "vuetify-use-dialog": "^0.6.0",
-    "vuex": "^4.1.0",
-    "vuex-persistedstate": "^4.1.0",
-    "webfontloader": "^1.6.28"
-  },
-  "devDependencies": {
-    "@antfu/eslint-config-vue": "^0.38.6",
     "@fullcalendar/core": "^6.1.8",
     "@fullcalendar/daygrid": "^6.1.8",
     "@fullcalendar/interaction": "^6.1.7",
     "@fullcalendar/list": "^6.1.7",
     "@fullcalendar/timegrid": "^6.1.7",
     "@fullcalendar/vue3": "^6.1.8",
+    "@iconify/utils": "^2.1.22",
+    "@vueuse/core": "^10.1.2",
+    "@vueuse/math": "^10.1.2",
+    "ace-builds": "^1.32.6",
+    "apexcharts-clevision": "^3.28.5",
+    "axios": "1.6.8",
+    "colorthief": "^2.4.0",
+    "dayjs": "^1.11.10",
+    "express": "^4.18.2",
+    "express-http-proxy": "^2.0.0",
+    "lodash": "^4.17.21",
+    "nprogress": "^0.2.0",
+    "pull-refresh-vue3": "^0.3.1",
+    "qrcode.vue": "^3.4.1",
+    "sass": "^1.59.3",
+    "tailwindcss": "^3.3.2",
+    "unplugin-vue-define-options": "^1.3.5",
+    "vite-plugin-pwa": "^0.19.8",
+    "vue": "^3.3.2",
+    "vue-router": "^4.2.0",
+    "vue-toast-notification": "^3",
+    "vue3-ace-editor": "^2.2.4",
+    "vue3-apexcharts": "^1.4.1",
+    "vue3-perfect-scrollbar": "^2.0.0",
+    "vuedraggable": "^4.1.0",
+    "vuetify": "3.5.14",
+    "vuetify-use-dialog": "^0.6.11",
+    "vuex": "^4.1.0",
+    "vuex-persistedstate": "^4.1.0",
+    "webfontloader": "^1.6.28"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config-vue": "^0.43.1",
     "@iconify-json/mdi": "^1.1.52",
-    "@iconify/tools": "^2.2.0",
+    "@iconify/tools": "^4.0.4",
     "@iconify/vue": "4.1.1",
-    "@intlify/unplugin-vue-i18n": "^0.10.0",
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@types/lodash": "^4.14.197",
     "@types/node": "^20.1.4",
     "@types/webfontloader": "^1.6.34",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.40.0",
+    "eslint": "^9.0.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-typescript": "^3.5.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-promise": "^6.0.1",
     "eslint-plugin-regex": "^1.10.0",
-    "eslint-plugin-sonarjs": "^0.19.0",
-    "eslint-plugin-unicorn": "^47.0.0",
+    "eslint-plugin-sonarjs": "^0.25.1",
+    "eslint-plugin-unicorn": "^52.0.0",
     "eslint-plugin-vue": "^9.12.0",
-    "postcss": "^8.4.24",
+    "postcss": "8",
     "postcss-html": "^1.5.0",
-    "stylelint": "14.15.0",
-    "stylelint-config-idiomatic-order": "9.0.0",
-    "stylelint-config-standard-scss": "6.1.0",
-    "stylelint-use-logical-spec": "4.1.0",
-    "type-fest": "^3.10.0",
+    "stylelint": "16.3.1",
+    "stylelint-config-idiomatic-order": "10.0.0",
+    "stylelint-config-standard-scss": "13.1.0",
+    "stylelint-use-logical-spec": "5.0.1",
+    "type-fest": "^4.15.0",
     "typescript": "^5.0.4",
-    "unplugin-auto-import": "^0.15.1",
-    "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.3.5",
-    "vite-plugin-pages": "^0.29.0",
-    "vite-plugin-vue-layouts": "^0.8.0",
-    "vite-plugin-vuetify": "1.0.2",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.2.8",
+    "vite-plugin-pages": "^0.32.1",
+    "vite-plugin-vue-layouts": "^0.11.0",
+    "vite-plugin-vuetify": "2.0.3",
     "vue-shepherd": "^3.0.0",
-    "vue-tsc": "^1.6.5"
+    "vue-tsc": "^2.0.10"
   },
   "packageManager": "yarn@1.22.18",
   "resolutions": {

public/manifest.json

@@ -2,6 +2,7 @@
   "name": "MoviePilot",
   "short_name": "MoviePilot",
   "start_url": "./",
+  "display": "standalone",
   "icons": [
     {
       "src": "./android-chrome-192x192.png",
@@ -30,7 +31,6 @@
   ],
   "theme_color": "#28243D",
   "background_color": "#28243D",
-  "display": "standalone",
   "shortcuts": [
     {
       "name": "推荐",
@@ -77,4 +77,4 @@
       ]
     }
   ]
-}
+}

public/nginx.conf

@@ -11,6 +11,13 @@ http {
 
     keepalive_timeout 3600;
 
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+    gzip_proxied any;
+    gzip_min_length 256;
+    gzip_vary on;
+    gzip_comp_level 6;
+
     server {
 
         include mime.types;
@@ -28,9 +35,16 @@ http {
             try_files $uri $uri/ /index.html;
         }
 
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            # 静态资源
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+            root html;
+        }
+
         location /assets {
             # 静态资源
-            expires 7d;
+            expires 1y;
             add_header Cache-Control "public";
             root html;
         }
@@ -75,6 +89,26 @@ http {
             # 超时设置
             proxy_read_timeout 600s;
         }
+
+        location /cookiecloud {
+            # 后端cookiecloud地址
+            proxy_pass http://backend_api;
+            rewrite ^.+mock-server/?(.*)$ /$1 break;
+            proxy_http_version 1.1;
+            proxy_buffering off;
+            proxy_cache off;
+            proxy_redirect off;
+            proxy_set_header Connection "";
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header Host $http_host;
+            proxy_set_header X-Nginx-Proxy true;
+
+            # 超时设置
+            proxy_read_timeout 600s;
+        }
+
     }
 
     upstream backend_api {

public/service.js

@@ -25,10 +25,25 @@ app.use(
   })
 );
 
+// 配置代理中间件将CookieCloud请求转发给后端API
+app.use(
+  '/cookiecloud',
+  proxy(`${proxyConfig.URL}:${proxyConfig.PORT}`, {
+    // 路径加上 /cookiecloud 前缀
+    proxyReqPathResolver: (req) => {
+      return `/cookiecloud${req.url}`
+    }
+  })
+);
 
 // 处理根路径的请求
 app.get('/', (req, res) => {
-  res.sendFile(path.join(__dirname, 'index.html')) // 指向你的前端入口文件
+  res.sendFile(path.join(__dirname, 'index.html'))
+})
+
+// 处理所有其他请求，重定向到前端入口文件
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, 'index.html'))
 })
 
 app.listen(port, () => {

src/@core/components/DialogCloseBtn.vue

@@ -1,18 +1,20 @@
 <script lang="ts" setup>
+// 定义输入参数
+const props = defineProps({
+  // 是否显示
+  innerClass: String,
+})
 // 定义触发的自定义事件
-const emit = defineEmits(['click'])
-
+const emit = defineEmits(['click', 'update:modelValue'])
 // 按钮点击
 function onClick() {
+  emit('update:modelValue', false)
   emit('click')
 }
 </script>
 
 <template>
-  <IconBtn
-    class="absolute right-3 top-3"
-    @click.stop="onClick"
-  >
+  <IconBtn :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3'" @click.stop="onClick">
     <VIcon icon="mdi-close" />
   </IconBtn>
 </template>

src/@core/components/LoadingBanner.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+  // 定义输入参数
+  const props = defineProps({
+    progress: Number,
+    text: String
+  })
+</script>
+
+<template>
+  <div
+    class="w-full text-center text-gray-500 text-sm flex flex-col items-center"
+  >
+    <VProgressCircular
+      v-if="!props.text"
+      size="48"
+      indeterminate
+      color="primary"
+    />
+    <VProgressCircular 
+      v-if="props.progress" 
+      class="mb-3" 
+      color="primary" 
+      :model-value="props.progress" 
+      size="64" 
+      />
+    <span>{{ props.text }}</span>
+  </div>
+</template>

src/@core/components/StatIcon.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+interface Props {
+  color?: string
+  message?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div class="absolute top-2 right-2 flex items-center justify-between p-2 shadow">
+    <VBadge :color="props.color" bordered>
+      <template #badge>          
+        <VIcon icon="mdi-pulse"></VIcon>
+      </template>
+    </VBadge>
+  </div>
+</template>

src/@core/components/ThemeSwitcher.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import { useTheme } from 'vuetify'
+import { ref } from 'vue'
+import { useDisplay, useTheme } from 'vuetify'
 import type { ThemeSwitcherTheme } from '@layouts/types'
+import api from '@/api'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
+import { useToast } from 'vue-toast-notification'
+import { VAceEditor } from 'vue3-ace-editor'
+
+// 显示器宽度
+const display = useDisplay()
 
 const props = defineProps<{
   themes: ThemeSwitcherTheme[]
@@ -11,59 +18,33 @@ const { name: themeName, global: globalTheme } = useTheme()
 
 const savedTheme = ref(localStorage.getItem('theme') ?? themeName)
 
-const {
-  state: currentThemeName,
-  next: getNextThemeName,
-  index: currentThemeIndex,
-} = useCycleList(
+const { state: currentThemeName, next: getNextThemeName } = useCycleList(
   props.themes.map(t => t.name),
   { initialValue: savedTheme.value },
 )
 
-function changeTheme() {
-  const nextTheme = getNextThemeName()
+const $toast = useToast()
 
-  globalTheme.name.value = nextTheme
-  savedTheme.value = nextTheme
-  localStorage.setItem('theme', nextTheme)
-  // 修改载入时背景色
-  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
+// 自定义CSS弹窗
+const cssDialog = ref(false)
 
-  themeTransition()
-}
+// 自定义 CSS
+const customCSS = ref('')
 
-// Update icon if theme is changed from other sources
-watch(
-  () => globalTheme.name.value,
-  (val) => {
-    currentThemeName.value = val
-  },
-)
-
-// Apply saved theme on page load
-// onMounted(() => {
-//   globalTheme.name.value = savedTheme.value
-// })
-
-function hasScrollbar(el?: Element | null) {
-  if (!el || el.nodeType !== Node.ELEMENT_NODE)
-    return false
-
-  const style = window.getComputedStyle(el)
-  return style.overflowY === 'scroll' || (style.overflowY === 'auto' && el.scrollHeight > el.clientHeight)
-}
+// 编辑器主题
+const editorTheme = computed(() => (currentThemeName.value === 'light' ? 'github' : 'monokai'))
 
+// 主题切换动画
 function themeTransition() {
   const x = performance.now()
   for (let i = 0; i++ < 1e7; (i << 9) & ((9 % 9) * 9 + 9));
   const cost = performance.now() - x
-  if (cost > 10)
-    return
+  if (cost > 10) return
 
   const el: HTMLElement = document.querySelector('[data-v-app]')!
   const children = el.querySelectorAll('*') as NodeListOf<HTMLElement>
 
-  children.forEach((el) => {
+  children.forEach(el => {
     if (hasScrollbar(el)) {
       el.dataset.scrollX = String(el.scrollLeft)
       el.dataset.scrollY = String(el.scrollTop)
@@ -95,7 +76,7 @@ function themeTransition() {
   })
 
   document.body.append(copy)
-  ; (copy.querySelectorAll('[data-scroll-x], [data-scroll-y]') as NodeListOf<HTMLElement>).forEach((el) => {
+  ;(copy.querySelectorAll('[data-scroll-x], [data-scroll-y]') as NodeListOf<HTMLElement>).forEach(el => {
     el.scrollLeft = +el.dataset.scrollX!
     el.scrollTop = +el.dataset.scrollY!
   })
@@ -113,12 +94,145 @@ function themeTransition() {
   el.addEventListener('transitionend', onTransitionend)
   el.addEventListener('transitioncancel', onTransitionend)
 }
+
+// 更新主题
+function updateTheme() {
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
+  const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
+  globalTheme.name.value = theme
+  savedTheme.value = theme
+  themeTransition()
+  // 保存主题到本地
+  localStorage.setItem('theme', theme)
+  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
+}
+
+// 切换主题
+function changeTheme(theme: string) {
+  let nextTheme = theme
+  if (!theme) nextTheme = getNextThemeName()
+  currentThemeName.value = nextTheme
+  // 保存主题到服务端
+  try {
+    api.post('/user/config/theme', nextTheme, {
+      headers: {
+        'Content-Type': 'text/plain',
+      },
+    })
+  } catch (e) {
+    console.error('保存主题到服务端失败')
+  }
+}
+
+// 是否有滚动条
+function hasScrollbar(el?: Element | null) {
+  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
+
+  const style = window.getComputedStyle(el)
+  return style.overflowY === 'scroll' || (style.overflowY === 'auto' && el.scrollHeight > el.clientHeight)
+}
+
+// 监听系统主题变化
+try {
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+} catch (e) {
+  console.error('当前设备不支持监听系统主题变化')
+}
+
+// 查询当前主题的图标
+const getThemeIcon = computed(() => {
+  const theme = props.themes.find(t => t.name === currentThemeName.value)
+  return theme?.icon ?? 'mdi-circle'
+})
+
+// 监听设置主题变化
+watch(
+  () => currentThemeName.value,
+  () => updateTheme(),
+)
+
+// 获取自定义 CSS
+async function getCustomCSS() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/UserCustomCSS')
+    if (result && result.success && result.data?.value) {
+      customCSS.value = result.data?.value ?? ''
+      if (customCSS.value) {
+        const style = document.createElement('style')
+        style.innerHTML = result.data?.value ?? ''
+        document.head.appendChild(style)
+      }
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 保存自定义 CSS
+async function saveCustomCSS() {
+  cssDialog.value = false
+  try {
+    const result: { [key: string]: any } = await api.post('system/setting/UserCustomCSS', customCSS.value, {
+      headers: {
+        'Content-Type': 'text/plain',
+      },
+    })
+
+    if (result.success) $toast.success('自定义CSS保存成功！')
+  } catch (e) {
+    console.error('保存自定义 CSS 到服务端失败')
+  }
+}
+
+onMounted(() => {
+  getCustomCSS()
+})
 </script>
 
 <template>
-  <IconBtn @click="changeTheme">
-    <VIcon :icon="props.themes[currentThemeIndex].icon" />
-  </IconBtn>
+  <VMenu v-if="props.themes">
+    <template v-slot:activator="{ props }">
+      <IconBtn v-bind="props">
+        <VIcon :icon="getThemeIcon" />
+      </IconBtn>
+    </template>
+    <VList>
+      <VListItem v-for="theme in props.themes" :key="theme.name" @click="changeTheme(theme.name)">
+        <template #prepend>
+          <VIcon :icon="theme.icon" />
+        </template>
+        <VListItemTitle>{{ theme.title }}</VListItemTitle>
+      </VListItem>
+      <VListItem @click="cssDialog = true">
+        <template #prepend>
+          <VIcon icon="mdi-palette" />
+        </template>
+        <VListItemTitle>自定义</VListItemTitle>
+      </VListItem>
+    </VList>
+  </VMenu>
+  <!-- 自定义 CSS -- -->
+  <VDialog v-model="cssDialog" persistent max-width="50rem" :fullscreen="!display.mdAndUp.value">
+    <VCard title="自定义主题风格">
+      <DialogCloseBtn @click="cssDialog = false" />
+      <VDivider />
+      <VAceEditor
+        v-model:value="customCSS"
+        lang="css"
+        :theme="editorTheme"
+        style="block-size: 100%; min-block-size: 30rem"
+      />
+      <VDivider />
+      <VCardText class="text-center">
+        <VBtn @click="saveCustomCSS" class="w-1/2">
+          <template #prepend>
+            <VIcon icon="mdi-content-save" />
+          </template>
+          保存
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
 </template>
 
 <style lang="sass">

src/@core/utils/compatibility.ts

@@ -0,0 +1,18 @@
+/**
+ * 浏览器兼容性处理
+ */
+
+/**
+ * 修复低版本Safari等浏览器数组不支持at函数的问题
+ */
+export function fixArrayAt() {
+    if (!Array.prototype.at) {
+        Array.prototype.at = function(index: number) {
+            if (index >= 0) {
+                return this[index]
+            } else {
+                return this[this.length + index]
+            }
+        }
+    }
+}

src/@core/utils/formatters.ts

@@ -1,5 +1,12 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import ZH_CN from 'dayjs/locale/zh-cn'
+
 import { isToday } from './index'
 
+dayjs.extend(relativeTime)
+dayjs.locale(ZH_CN)
+
 export function avatarText(value: string) {
   if (!value)
     return ''
@@ -19,7 +26,7 @@ export function kFormatter(num: number) {
  * Format and return date in Humanize format
  * Intl docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
  * Intl Constructor: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
- * @param {String} value date to format
+ * @param {string} value date to format
  * @param {Intl.DateTimeFormatOptions} formatting Intl object to format with
  */
 export function formatDate(value: string, formatting: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' }) {
@@ -32,8 +39,8 @@ export function formatDate(value: string, formatting: Intl.DateTimeFormatOptions
 /**
  * Return short human friendly month representation of date
  * Can also convert date to only time if date is of today (Better UX)
- * @param {String} value date to format
- * @param {Boolean} toTimeForCurrentDay Shall convert to time if day is today/current
+ * @param {string} value date to format
+ * @param {boolean} toTimeForCurrentDay Shall convert to time if day is today/current
  */
 export function formatDateToMonthShort(value: string, toTimeForCurrentDay = true) {
   const date = new Date(value)
@@ -107,7 +114,7 @@ export function formatBytes(bytes: number, decimals = 2) {
 
   const i = Math.floor(Math.log(bytes) / Math.log(k))
 
-  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`
+  return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`
 }
 
 // 格式化剧集列表
@@ -147,3 +154,24 @@ export function formatEp(nums: number[]): string {
 
   return formattedRanges.join('、')
 }
+
+// 将yyyy-mm-dd hh:mm:ss转换为时间差，如：1小时前，1天前
+export function formatDateDifference(dateString: string): string {
+  // const timeDifference = dayjs().millisecond() - dayjs(dateString).millisecond()
+  // const secondsDifference = Math.floor(timeDifference / 1000)
+  // const minutesDifference = Math.floor(secondsDifference / 60)
+  // const hoursDifference = Math.floor(minutesDifference / 60)
+  // const daysDifference = Math.floor(hoursDifference / 24)
+
+  // if (daysDifference > 0)
+  //   return `${daysDifference}天前`
+  // else if (hoursDifference > 0)
+  //   return `${hoursDifference}小时前`
+  // else if (minutesDifference > 0)
+  //   return `${minutesDifference}分钟前`
+  // else
+  //   return '刚刚'
+  if (!dateString)
+    return ''
+  return dayjs(dateString).fromNow()
+}

src/@core/utils/index.ts

@@ -33,12 +33,16 @@ export function isToday(date: Date) {
   )
 }
 
-// 计算时间差，返回xx天/xx小时/xx分钟/xx秒
+/**
+ * 计算时间差，返回xx天/xx小时/xx分钟/xx秒
+ *
+ * @deprecated 建议使用：@core/utils/formatters.ts formatDateDifference
+ */
 export function calculateTimeDifference(inputTime: string): string {
   if (!inputTime)
     return ''
 
-  const inputDate = new Date(inputTime)
+  const inputDate = new Date(inputTime.replaceAll(/-/g, '/'))
   const currentDate = new Date()
 
   const timeDifference = currentDate.getTime() - inputDate.getTime()
@@ -70,7 +74,7 @@ export function calculateTimeDiff(inputTime: string): string {
     return ''
 
   // 使用当前时区
-  const inputDate = new Date(inputTime)
+  const inputDate = new Date(inputTime.replaceAll(/-/g, '/'))
   const currentDate = new Date()
 
   const timeDifference = currentDate.getTime() - inputDate.getTime()
@@ -114,3 +118,12 @@ export function isNullOrEmptyObject(obj: any): boolean {
   // 然后判断是否为空对象
   return !!(typeof obj === 'object' && Object.keys(obj).length === 0)
 }
+
+// 判断系统配置色是否是黑暗的
+export function checkPrefersColorSchemeIsDark(): boolean {
+  try {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  } catch (e) {
+    return false
+  }
+}

src/@layouts/components/VerticalNav.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { Component } from 'vue'
-import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
 import { useDisplay } from 'vuetify'
 import logo from '@images/logo.svg?raw'
 
@@ -85,6 +84,7 @@ function handleNavScroll(evt: Event) {
 .visible {
   visibility: visible !important;
 }
+
 // 👉 Vertical Nav
 .layout-vertical-nav {
   position: fixed;
@@ -96,8 +96,8 @@ function handleNavScroll(evt: Event) {
   inset-block-start: 0;
   inset-inline-start: 0;
   transition: transform 0.25s ease-in-out, inline-size 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
-  will-change: transform, inline-size;
   visibility: hidden;
+  will-change: transform, inline-size;
 
   &:not(.overlay-nav) {
     visibility: visible;

src/@layouts/components/VerticalNavLayout.vue

@@ -52,7 +52,7 @@ export default defineComponent({
         'main',
         { class: 'layout-page-content' },
         h(Transition, { name: 'fade-slide', mode: 'out-in', appear: true },
-          h('section', { class: 'page-content-container' }, slots.default?.()),
+          () => h('section', { class: 'page-content-container' }, slots.default?.()),
         ),
       )
 

src/@layouts/styles/_variables.scss

@@ -19,7 +19,7 @@ $layout-horizontal-nav-layout-navbar-z-index: 11 !default;
 $layout-boxed-content-width: 90rem !default;
 
 //  👉Footer
-$layout-vertical-nav-footer-height: 3.5rem !default;
+$layout-vertical-nav-footer-height: 0rem !default;
 
 // 👉 Layout overlay
 $layout-overlay-z-index: 11 !default;

src/@layouts/styles/index.scss

@@ -1,3 +1,2 @@
 @use "_global";
-@use "vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.min.css";
 @use "_classes";

src/@layouts/types.d.ts

@@ -6,19 +6,19 @@ export interface UserConfig {
   app: {
     title: Lowercase<string>
     logo: VNode
-    contentWidth: typeof ContentWidth[keyof typeof ContentWidth]
-    contentLayoutNav: typeof AppContentLayoutNav[keyof typeof AppContentLayoutNav]
+    contentWidth: (typeof ContentWidth)[keyof typeof ContentWidth]
+    contentLayoutNav: (typeof AppContentLayoutNav)[keyof typeof AppContentLayoutNav]
     overlayNavFromBreakpoint: number
     enableI18n: boolean
     isRtl: boolean
     iconRenderer?: Component
   }
   navbar: {
-    type: typeof NavbarType[keyof typeof NavbarType]
+    type: (typeof NavbarType)[keyof typeof NavbarType]
     navbarBlur: boolean
   }
   footer: {
-    type:typeof FooterType[keyof typeof FooterType]
+    type: (typeof FooterType)[keyof typeof FooterType]
   }
   verticalNav: {
     isVerticalNavCollapsed: boolean
@@ -143,7 +143,7 @@ interface I18nLanguage {
 // avatar | text | icon
 // Thanks: https://stackoverflow.com/a/60617060/10796681
 type Notification = {
-  id:number
+  id: number
   title: string
   subtitle: string
   time: string
@@ -157,5 +157,6 @@ type Notification = {
 
 interface ThemeSwitcherTheme {
   name: string
+  title: string
   icon: string
 }

src/App.vue

@@ -1,38 +1,49 @@
 <script lang="ts" setup>
-import { useToast } from 'vue-toast-notification'
 import { useTheme } from 'vuetify'
-import store from './store'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
 
-// 第一时间应用主题
 const { global: globalTheme } = useTheme()
-globalTheme.name.value = localStorage.getItem('theme') || 'light'
 
-// 提示框
-const $toast = useToast()
+// 生效主题
+async function setTheme() {
+  let themeValue = localStorage.getItem('theme') || 'light'
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
+  globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
+}
 
-// SSE持续接收消息
-function startSSEMessager() {
-  const token = store.state.auth.token
-  if (token) {
-    const eventSource = new EventSource(
-      `${import.meta.env.VITE_API_BASE_URL}system/message?token=${token}`,
-    )
+// ApexCharts 全局配置
+declare global {
+  interface Window {
+    Apex: any
+  }
+}
 
-    eventSource.addEventListener('message', (event) => {
-      const message = event.data
-      if (message)
-        $toast.info(message)
-    })
-
-    onBeforeUnmount(() => {
-      eventSource.close()
-    })
+if (window.Apex) {
+  // 数据标签
+  window.Apex.dataLabels = {
+    formatter: function (_: number, { seriesIndex, w }: { seriesIndex: number; w: any }) {
+      // 如果有小数点，保留两位小数，否则保留整数
+      const data = w.config.series[seriesIndex]
+      return data.toFixed(data % 1 === 0 ? 0 : 1)
+    },
+  }
+  // 图例
+  window.Apex.legend = {
+    labels: {
+      useSeriesColors: true,
+    },
+  }
+  // 标题
+  window.Apex.title = {
+    style: {
+      color: 'rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))',
+    },
   }
 }
 
 // 页面加载时，加载当前用户数据
 onBeforeMount(async () => {
-  startSSEMessager()
+  setTheme()
 })
 </script>
 

src/ace-config.ts

@@ -0,0 +1,63 @@
+import ace from 'ace-builds'
+
+import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url'
+
+import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url'
+
+import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url'
+
+import modeYamlUrl from 'ace-builds/src-noconflict/mode-yaml?url'
+
+import modeCssUrl from 'ace-builds/src-noconflict/mode-css?url'
+
+import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url'
+
+import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url'
+
+import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url'
+
+import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url'
+
+import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url'
+
+import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url'
+
+import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url'
+
+import workerYamlUrl from 'ace-builds/src-noconflict/worker-yaml?url'
+
+import workerCssUrl from 'ace-builds/src-noconflict/worker-css?url'
+
+import snippetsHtmlUrl from 'ace-builds/src-noconflict/snippets/html?url'
+
+import snippetsJsUrl from 'ace-builds/src-noconflict/snippets/javascript?url'
+
+import snippetsYamlUrl from 'ace-builds/src-noconflict/snippets/yaml?url'
+
+import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url'
+
+import snippertsCssUrl from 'ace-builds/src-noconflict/snippets/css?url'
+
+import 'ace-builds/src-noconflict/ext-language_tools'
+
+ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
+ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
+ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl)
+ace.config.setModuleUrl('ace/mode/yaml', modeYamlUrl)
+ace.config.setModuleUrl('ace/mode/css', modeCssUrl)
+ace.config.setModuleUrl('ace/theme/github', themeGithubUrl)
+ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl)
+ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl)
+ace.config.setModuleUrl('ace/mode/base', workerBaseUrl)
+ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl)
+ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl)
+ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl)
+ace.config.setModuleUrl('ace/mode/yaml_worker', workerYamlUrl)
+ace.config.setModuleUrl('ace/mode/css_worker', workerCssUrl)
+ace.config.setModuleUrl('ace/snippets/html', snippetsHtmlUrl)
+ace.config.setModuleUrl('ace/snippets/javascript', snippetsJsUrl)
+ace.config.setModuleUrl('ace/snippets/javascript', snippetsYamlUrl)
+ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl)
+ace.config.setModuleUrl('ace/snippets/css', snippertsCssUrl)
+
+ace.require('ace/ext/language_tools')

src/components/FileBrowser.vue

@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 import type { Axios } from 'axios'
 import axios from 'axios'
-import List from './filebrowser/List.vue'
-
-import Toolbar from './filebrowser/Toolbar.vue'
-import Tree from './filebrowser/Tree.vue'
+import FileList from './filebrowser/FileList.vue'
+import FileToolbar from './filebrowser/FileToolbar.vue'
 import type { EndPoints } from '@/api/types'
 
 // 输入参数
@@ -70,12 +68,10 @@ const storagesArray = computed(() => {
 
 // 方法
 function loadingChanged(loading: number) {
-  if (loading) {
+  if (loading)
     loading++
-  }
-  else if (loading > 0) {
+  else if (loading > 0)
     loading--
-  }
 }
 
 function storageChanged(storage: string) {
@@ -103,7 +99,7 @@ onMounted(() => {
 <template>
   <VCard class="mx-auto" :loading="loading > 0 || !path">
     <div v-if="path">
-      <Toolbar
+      <FileToolbar
         :path="path"
         :storages="storagesArray"
         :storage="activeStorage"
@@ -114,38 +110,20 @@ onMounted(() => {
         @foldercreated="refreshPending = true"
         @sortchanged="sortChanged"
       />
-      <VRow no-gutters>
-        <VCol v-if="tree" sm="auto" class="d-none d-md-block">
-          <Tree
-            :path="path"
-            :storage="activeStorage"
-            :icons="fileIcons"
-            :endpoints="endpoints"
-            :axios="axiosInstance"
-            :refreshpending="refreshPending"
-            @pathchanged="pathChanged"
-            @loading="loadingChanged"
-            @refreshed="refreshPending = false"
-          />
-        </VCol>
-        <VDivider v-if="tree" vertical />
-        <VCol>
-          <List
-            :path="path"
-            :storage="activeStorage"
-            :icons="fileIcons"
-            :endpoints="endpoints"
-            :axios="axiosInstance"
-            :refreshpending="refreshPending"
-            :sort="sort"
-            @pathchanged="pathChanged"
-            @loading="loadingChanged"
-            @refreshed="refreshPending = false"
-            @filedeleted="refreshPending = true"
-            @renamed="refreshPending = true"
-          />
-        </VCol>
-      </VRow>
+      <FileList
+        :path="path"
+        :storage="activeStorage"
+        :icons="fileIcons"
+        :endpoints="endpoints"
+        :axios="axiosInstance"
+        :refreshpending="refreshPending"
+        :sort="sort"
+        @pathchanged="pathChanged"
+        @loading="loadingChanged"
+        @refreshed="refreshPending = false"
+        @filedeleted="refreshPending = true"
+        @renamed="refreshPending = true"
+      />
     </div>
   </VCard>
 </template>

src/components/NoDataFound.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import miscpose from '@images/pages/pose-fs-9.png'
+import image from '@images/no-data.svg'
 
 const props = defineProps<Props>()
 
@@ -11,25 +11,21 @@ interface Props {
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <ErrorHeader
-      :error-code="props.errorCode"
-      :error-title="props.errorTitle"
-      :error-description="props.errorDescription"
-    />
+  <VEmptyState :image="image" size="250">
+    <template #title>
+      <div class="mt-8 text-2xl">
+        {{ props.errorTitle }}
+      </div>
+    </template>
 
-    <!-- 👉 Image -->
-    <div class="text-center">
-      <VImg
-        :src="miscpose"
-        class="mx-auto pt-10"
-        max-width="250"
-        cover
-      />
+    <template #text>
+      <div class="text-subtitle mt-3">
+        {{ props.errorDescription }}
+      </div>
+    </template>
+
+    <template #actions>
       <slot name="button" />
-    </div>
-  </div>
+    </template>
+  </VEmptyState>
 </template>
-
-<style lang="scss">
-</style>

src/components/cards/BackdropCard.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { MediaServerPlayItem } from '@/api/types'
+
+// 输入参数
+const props = defineProps({
+  media: Object as PropType<MediaServerPlayItem>,
+  width: String,
+  height: String,
+})
+
+// 图片是否加载完成
+const imageLoaded = ref(false)
+
+// 图片加载完成响应
+function imageLoadHandler() {
+  imageLoaded.value = true
+}
+
+// 跳转播放
+function goPlay() {
+  if (props.media?.link) window.open(props.media?.link, '_blank')
+}
+
+// 计算图片地址
+const getImgUrl = computed(() => {
+  const image = props.media?.image || ''
+  return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(image)}`
+})
+</script>
+
+<template>
+  <VHover v-bind="props">
+    <template #default="hover">
+      <VCard
+        v-bind="hover.props"
+        :height="props.height"
+        :width="props.width"
+        class="ring-gray-500"
+        :class="{
+          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+          'ring-1': imageLoaded,
+        }"
+        @click="goPlay"
+      >
+        <template #image>
+          <VImg :src="getImgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler">
+            <template #placeholder>
+              <div class="w-full h-full">
+                <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
+              </div>
+            </template>
+            <VCardText
+              class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
+            >
+              <h1
+                class="mb-1 text-white text-shadow font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ..."
+              >
+                {{ props.media?.title }}
+              </h1>
+              <span class="text-shadow">{{ props.media?.subtitle }}</span>
+            </VCardText>
+          </VImg>
+        </template>
+        <div class="w-full absolute bottom-0">
+          <VProgressLinear
+            v-if="props.media?.percent"
+            :model-value="props.media?.percent"
+            bg-color="success"
+            color="success"
+          />
+        </div>
+      </VCard>
+    </template>
+  </VHover>
+</template>
+
+<style lang="scss">
+.text-shadow {
+  text-shadow: 1px 1px #777;
+}
+</style>

src/components/cards/CardStatisticsHorizontal.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { kFormatter } from '@core/utils/formatters'
-
-interface Props {
-  title: string
-  color?: string
-  icon: string
-  stats: number
-  change: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  color: 'primary',
-})
-
-const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
-</script>
-
-<template>
-  <VCard>
-    <VCardText class="d-flex align-center">
-      <VAvatar
-        size="44"
-        rounded
-        :color="props.color"
-        variant="tonal"
-        class="me-4"
-      >
-        <VIcon
-          :icon="props.icon"
-          size="30"
-        />
-      </VAvatar>
-
-      <div>
-        <span class="text-caption">{{ props.title }}</span>
-        <div class="d-flex align-center flex-wrap">
-          <span class="text-h6 font-weight-semibold">{{ kFormatter(props.stats) }}</span>
-          <div
-            v-if="props.change"
-            :class="`${isPositive ? 'text-success' : 'text-error'} mt-1`"
-          >
-            <VIcon :icon="isPositive ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
-            <span class="text-caption font-weight-semibold">{{ Math.abs(props.change) }}%</span>
-          </div>
-        </div>
-      </div>
-    </VCardText>
-  </VCard>
-</template>

src/components/cards/CardStatisticsVertical.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  title: string
-  color?: string
-  icon: string
-  stats: string
-  change: number
-  subtitle: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  color: 'primary',
-})
-
-const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
-</script>
-
-<template>
-  <VCard>
-    <VCardText class="d-flex align-center">
-      <VAvatar
-        v-if="props.icon"
-        size="38"
-        :color="props.color"
-      >
-        <VIcon
-          :icon="props.icon"
-          size="24"
-        />
-      </VAvatar>
-
-      <VSpacer />
-
-      <MoreBtn class="me-n3 mt-n1" />
-    </VCardText>
-
-    <VCardText>
-      <h6 class="text-sm font-weight-semibold mb-2">
-        {{ props.title }}
-      </h6>
-      <div
-        v-if="props.change"
-        class="d-flex align-center mb-2"
-      >
-        <span class="font-weight-semibold text-h5 me-2">{{ props.stats }}</span>
-        <span
-          :class="isPositive ? 'text-success' : 'text-error'"
-          class="text-caption"
-        >
-          {{ isPositive ? `+${props.change}` : props.change }}%
-        </span>
-      </div>
-      <span class="text-caption">{{ props.subtitle }}</span>
-    </VCardText>
-  </VCard>
-</template>

src/components/cards/CardStatisticsWithImages.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  title: string
-  subtitle: string
-  stats: string
-  change: number
-  image: string
-  color?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  color: 'primary',
-})
-
-const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
-</script>
-
-<template>
-  <VCard class="overflow-visible">
-    <div class="d-flex position-relative">
-      <VCardText>
-        <h6 class="text-base font-weight-semibold mb-4">
-          {{ props.title }}
-        </h6>
-        <div class="d-flex align-center flex-wrap mb-4">
-          <h5 class="text-h5 font-weight-semibold me-2">
-            {{ props.stats }}
-          </h5>
-          <span
-            class="text-caption"
-            :class="isPositive ? 'text-success' : 'text-error'"
-          >
-            {{ isPositive ? `+${props.change}` : props.change }}%
-          </span>
-        </div>
-
-        <VChip
-          v-if="props.subtitle"
-          size="small"
-          :color="props.color"
-        >
-          {{ props.subtitle }}
-        </VChip>
-      </VCardText>
-
-      <VSpacer />
-
-      <div class="illustrator-img">
-        <VImg
-          v-if="props.image"
-          :src="props.image"
-          :width="110"
-        />
-      </div>
-    </div>
-  </VCard>
-</template>
-
-<style lang="scss">
-.illustrator-img {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline-end: 5%;
-}
-</style>

src/components/cards/DoubanPersonCard.vue

@@ -1,88 +0,0 @@
-<script lang="ts" setup>
-import personIcon from '@images/misc/person-icon.png'
-import type { DoubanPerson } from '@/api/types'
-
-const personProps = defineProps({
-  person: Object as PropType<DoubanPerson>,
-  width: String,
-  height: String,
-})
-
-// 当前人物
-const personInfo = ref(personProps.person)
-
-// 人物图片是否加载
-const isImageLoaded = ref(false)
-
-// 人物图片地址
-function getPersonImage() {
-  if (!personInfo.value?.avatar)
-    return personIcon
-  return personInfo.value?.avatar?.large
-}
-
-// 打开人物详情
-function goPersonDetail() {
-  if (!personInfo.value?.id)
-    return
-  window.open(`https://movie.douban.com/celebrity/${personInfo.value?.id}/`, '_blank')
-}
-</script>
-
-<template>
-  <VHover v-bind="personProps">
-    <template #default="hover">
-      <VCard
-        v-bind="hover.props"
-        :height="personProps.height"
-        :width="personProps.width"
-        class="rounded-lg"
-        :class="{
-          'transition transform-cpu duration-300 scale-105': hover.isHovering,
-        }"
-        @click.stop="goPersonDetail"
-      >
-        <div
-          class="person-card relative transform-gpu cursor-pointer rounded shadow ring-1 transition duration-150 ease-in-out scale-100 ring-gray-700"
-        >
-          <div style="padding-bottom: 150%;">
-            <div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
-              <div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
-                <VAvatar
-                  size="120"
-                  :class="{
-                    'ring-1 ring-gray-700': isImageLoaded,
-                  }"
-                >
-                  <VImg
-                    v-img
-                    :src="getPersonImage()"
-                    cover
-                    @load="isImageLoaded = true"
-                  />
-                </VAvatar>
-              </div>
-              <div class="w-full truncate text-center font-bold">
-                {{ personInfo?.name }}
-              </div>
-              <div class="overflow-hidden whitespace-normal text-center text-sm" style=" display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp: 2;">
-                {{ personInfo?.character }}
-              </div>
-              <div class="absolute bottom-0 left-0 right-0 h-12 rounded-b" />
-            </div>
-          </div>
-        </div>
-      </VCard>
-    </template>
-  </VHover>
-</template>
-
-<style lang="scss">
-.person-card {
-  background-image: linear-gradient(45deg, rgb(var(--v-theme-background)), rgb(var(--v-theme-surface)) 60%);
-}
-
-.person-card:hover {
-  background-image: linear-gradient(45deg, rgb(var(--v-theme-background)), rgb(var(--v-custom-background)) 60%);
-}
-</style>

src/components/cards/DownloadingCard.vue

@@ -23,6 +23,11 @@ function getSpeedText() {
 // 下载状态
 const isDownloading = ref(props.info?.state === 'downloading')
 
+// 监听props.info?.state的变化
+watch(() => props.info?.state, (newValue) => {
+  isDownloading.value = newValue === 'downloading'
+})
+
 // 图片是否加载完成
 const imageLoaded = ref(false)
 

src/components/cards/FilterRuleCard.vue

@@ -9,23 +9,13 @@ const props = defineProps({
 })
 
 // 定义触发的自定义事件
-const emit = defineEmits(['close', 'changed', 'levelup', 'leveldown'])
+const emit = defineEmits(['close', 'changed'])
 
 // 按钮点击
 function onClose() {
   emit('close')
 }
 
-// 上升优先级
-function onLevelUp() {
-  emit('levelup', props.pri)
-}
-
-// 下降优先级
-function onLevelDown() {
-  emit('leveldown', props.pri)
-}
-
 // 选项变化
 function filtersChanged(value: string[]) {
   emit('changed', props.pri, value)
@@ -36,6 +26,7 @@ const selectFilterOptions = ref<{ [key: string]: string }[]>([
   { title: '特效字幕', value: ' SPECSUB ' },
   { title: '中文字幕', value: ' CNSUB ' },
   { title: '国语配音', value: ' CNVOI ' },
+  { title: '官种', value: ' GZ ' },
   { title: '排除: 国语配音', value: ' !CNVOI ' },
   { title: '粤语配音', value: ' HKVOI ' },
   { title: '排除: 粤语配音', value: ' !HKVOI ' },
@@ -75,18 +66,9 @@ const selectFilterOptions = ref<{ [key: string]: string }[]>([
 
 <template>
   <VCard variant="tonal" :width="props.width" :height="props.height">
-    <span class="absolute top-3 right-14">
-      <IconBtn
-        v-if="props.pri !== '1'"
-        @click.stop="onLevelUp"
-      >
-        <VIcon icon="mdi-arrow-up" />
-      </IconBtn>
-      <IconBtn
-        v-if="props.pri !== props.maxpri"
-        @click.stop="onLevelDown"
-      >
-        <VIcon icon="mdi-arrow-down" />
+    <span class="absolute top-3 right-12">
+      <IconBtn>
+        <VIcon class="cursor-move" icon="mdi-drag" />
       </IconBtn>
     </span>
     <DialogCloseBtn @click="onClose" />
@@ -95,7 +77,6 @@ const selectFilterOptions = ref<{ [key: string]: string }[]>([
       <VRow>
         <VCol>
           <VSelect
-            :key="props.pri"
             v-model="props.rules"
             variant="underlined"
             :items="selectFilterOptions"

src/components/cards/LibraryCard.vue

@@ -0,0 +1,202 @@
+<script lang="ts" setup>
+import type { MediaServerLibrary } from '@/api/types'
+import plex from '@images/misc/plex.png'
+import emby from '@images/misc/emby.png'
+import jellyfin from '@images/misc/jellyfin.png'
+
+// 输入参数
+const props = defineProps({
+  media: Object as PropType<MediaServerLibrary>,
+  width: String,
+  height: String,
+})
+
+// canvas
+const canvasRef = ref<HTMLCanvasElement>()
+
+// 图片地址
+const imgUrl = ref('')
+
+// 图片是否加载完成
+const imageLoaded = ref(false)
+
+// 图片是否加载错误
+const imageError = ref(false)
+
+// 图片加载完成响应
+function imageLoadHandler() {
+  imageLoaded.value = true
+}
+
+// 图片加载错误
+function imageErrorHandler() {
+  imageError.value = true
+}
+
+// 默认图片
+function getDefaultImage() {
+  if (props.media?.server === 'plex')
+    return plex
+  else if (props.media?.server === 'emby')
+    return emby
+  else if (props.media?.server === 'jellyfin')
+    return jellyfin
+  else
+    return plex
+}
+
+// 跳转播放
+function goPlay() {
+  if (props.media?.link)
+    window.open(props.media?.link, '_blank')
+}
+
+// 生成图片代理路径
+function getImgUrl(url: string) {
+  if (!url)
+    return getDefaultImage()
+  else
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(url)}`
+}
+
+// 根据多张图片生成媒体库封面
+async function drawImages(imageList: string[]) {
+  // 图片
+  const IMAGES = imageList
+  if (IMAGES.length === 0)
+    return getDefaultImage()
+
+  // 为所有图片添加system/img前缀
+  for (let i = 0; i < IMAGES.length; i++)
+    IMAGES[i] = `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(IMAGES[i])}`
+
+  // canvas
+  const canvas = canvasRef.value
+  if (!canvas)
+    return getDefaultImage()
+
+  // 画布参数
+  const POSTER_WIDTH = (canvas.width - 32) / 4
+  const POSTER_HEIGHT = canvas.height * 0.75 - 8
+  const MARGIN_WIDTH = 4
+  const MARGIN_HEIGHT = 4
+  const REFLECTION_HEIGHT = POSTER_HEIGHT / 2
+  const REFLECTION_SHOW_HEIGHT = canvas.height / 4
+
+  // 获取画布上下文
+  const ctx = canvas.getContext('2d')
+  if (!ctx)
+    return getDefaultImage()
+
+  // 设置背景色为黑色
+  ctx.fillStyle = '#000000'
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+  // 绘制图片
+  async function drawImageWithReflection(imgSrc: string, index: number) {
+    if (!canvas)
+      return
+
+    if (!ctx)
+      return
+
+    const img = new Image()
+    img.setAttribute('crossorigin', 'anonymous')
+    img.src = imgSrc
+    await new Promise(resolve => img.onload = resolve)
+
+    const x = MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1)
+    const y = MARGIN_HEIGHT
+
+    ctx.drawImage(img, x, y, POSTER_WIDTH, POSTER_HEIGHT)
+
+    ctx.save()
+    ctx.translate(0, canvas.height)
+    ctx.scale(1, -1)
+    ctx.drawImage(
+      img,
+      0,
+      0,
+      img.width,
+      img.height,
+      x,
+      REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT,
+      POSTER_WIDTH,
+      REFLECTION_HEIGHT,
+    )
+
+    const gradient = ctx.createLinearGradient(
+      0,
+      REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT,
+      0,
+      REFLECTION_HEIGHT,
+    )
+
+    gradient.addColorStop(0, 'rgba(0, 0, 0, 1)')
+    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.3)')
+    ctx.fillStyle = gradient
+    ctx.fillRect(x, 0, POSTER_WIDTH, REFLECTION_SHOW_HEIGHT)
+
+    ctx.restore()
+  }
+
+  // 绘制多张图片
+  const loopCount = Math.min(4, IMAGES.length)
+  for (let i = 0; i < loopCount; i++)
+    await drawImageWithReflection(IMAGES[i], i + 1)
+
+  // 转换为图片地址
+  return canvas.toDataURL('image/png')
+}
+
+onMounted(async () => {
+  if (props.media?.image_list && props.media?.image_list.length > 0)
+    imgUrl.value = await drawImages(props.media?.image_list || [])
+  else
+    imgUrl.value = getImgUrl(props.media?.image || '')
+})
+</script>
+
+<template>
+  <VHover
+    v-bind="props"
+    :height="props.height"
+    :width="props.width"
+  >
+    <template #default="hover">
+      <VCard
+        v-bind="hover.props"
+        :height="props.height"
+        :width="props.width"
+        :class="{
+          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+        }"
+        @click="goPlay"
+      >
+        <template #image>
+          <canvas ref="canvasRef" class="w-full h-full hidden" />
+          <VImg
+            :src="imgUrl"
+            aspect-ratio="2/3"
+            cover
+            @load="imageLoadHandler"
+            @error="imageErrorHandler"
+          >
+            <template #placeholder>
+              <div class="w-full h-full">
+                <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
+              </div>
+            </template>
+            <VCardText
+              class="w-full flex flex-col flex-wrap justify-end align-center text-white absolute bottom-0 cursor-pointer pa-2"
+            >
+              <h1 class="mb-1 text-white font-bold line-clamp-2 overflow-hidden text-ellipsis ...">
+                {{ props.media?.name }}
+              </h1>
+            </VCardText>
+          </VImg>
+        </template>
+      </VCard>
+    </template>
+  </VHover>
+</template>

src/components/cards/MediaCard.vue

@@ -1,13 +1,16 @@
 <script lang="ts" setup>
 import type { PropType, Ref } from 'vue'
 import { useToast } from 'vue-toast-notification'
-import SubscribeEditForm from '../form/SubscribeEditForm.vue'
+import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
 import { formatSeason } from '@/@core/utils/formatters'
 import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import type { MediaInfo, NotExistMediaInfo, Subscribe, TmdbSeason } from '@/api/types'
 import router from '@/router'
 import noImage from '@images/no-image.jpeg'
+import tmdbImage from '@images/logos/tmdb.png'
+import doubanImage from '@images/logos/douban-black.png'
+import bangumiImage from '@images/logos/bangumi.png'
 
 // 输入参数
 const props = defineProps({
@@ -16,6 +19,8 @@ const props = defineProps({
   height: String,
 })
 
+const store = useStore()
+
 // 提示框
 const $toast = useToast()
 
@@ -52,22 +57,33 @@ const seasonInfos = ref<TmdbSeason[]>([])
 // 选中的订阅季
 const seasonsSelected = ref<TmdbSeason[]>([])
 
+// 来源角标字典
+const sourceIconDict: { [key: string]: any } = {
+  themoviedb: tmdbImage,
+  douban: doubanImage,
+  bangumi: bangumiImage,
+}
+
+// 获得mediaid
+function getMediaId() {
+  if (props.media?.tmdb_id) return `tmdb:${props.media?.tmdb_id}`
+  else if (props.media?.douban_id) return `douban:${props.media?.douban_id}`
+  else return `bangumi:${props.media?.bangumi_id}`
+}
+
 // 订阅弹窗选择的多季
 function subscribeSeasons() {
   subscribeSeasonDialog.value = false
-  seasonsSelected.value.forEach((season) => {
+  seasonsSelected.value.forEach(season => {
     addSubscribe(season.season_number)
   })
 }
 
 // 角标颜色
 function getChipColor(type: string) {
-  if (type === '电影')
-    return 'border-blue-500 bg-blue-600'
-  else if (type === '电视剧')
-    return ' bg-indigo-500 border-indigo-600'
-  else
-    return 'border-purple-600 bg-purple-600'
+  if (type === '电影') return 'border-blue-500 bg-blue-600'
+  else if (type === '电视剧') return ' bg-indigo-500 border-indigo-600'
+  else return 'border-purple-600 bg-purple-600'
 }
 
 // 添加订阅处理
@@ -81,29 +97,24 @@ async function handleAddSubscribe() {
       $toast.error(`${props.media?.title} 查询剧集信息失败！`)
       return
     }
-
     // 检查各季的缺失状态
     await checkSeasonsNotExists()
-    if (!tmdbFlag.value)
-      return
+    if (!tmdbFlag.value) return
 
     if (seasonInfos.value.length === 1) {
       // 添加订阅
       addSubscribe(1)
-    }
-    else {
+    } else {
       // 弹出季选择列表，支持多选
       seasonsSelected.value = []
       subscribeSeasonDialog.value = true
     }
-  }
-  else if (props.media?.type === '电视剧') {
+  } else if (props.media?.type === '电视剧') {
     // 豆瓣电视剧，只会有一季
     const season = props.media?.season ?? 1
     // 添加订阅
     addSubscribe(season)
-  }
-  else {
+  } else {
     // 电影
     addSubscribe()
   }
@@ -126,6 +137,7 @@ async function addSubscribe(season = 0) {
       year: props.media?.year,
       tmdbid: props.media?.tmdb_id,
       doubanid: props.media?.douban_id,
+      bangumiid: props.media?.bangumi_id,
       season,
       best_version,
     })
@@ -137,43 +149,32 @@ async function addSubscribe(season = 0) {
     }
 
     // 提示
-    showSubscribeAddToast(
-      result.success,
-      props.media?.title ?? '',
-      season,
-      result.message,
-      best_version,
-    )
+    showSubscribeAddToast(result.success, props.media?.title ?? '', season, result.message, best_version)
 
     // 弹出订阅编辑弹窗
     if (result.success && seasonsSelected.value.length <= 1) {
-      subscribeId.value = result.data.id
-      subscribeEditDialog.value = true
+      const show_edit_dialog = await queryDefaultSubscribeConfig()
+      if (show_edit_dialog) {
+        subscribeId.value = result.data.id
+        subscribeEditDialog.value = true
+      }
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
+  } finally {
+    doneNProgress()
   }
-  doneNProgress()
 }
 
 // 弹出添加订阅提示
-function showSubscribeAddToast(result: boolean,
-  title: string,
-  season: number,
-  message: string,
-  best_version: number) {
-  if (season)
-    title = `${title} ${formatSeason(season.toString())}`
+function showSubscribeAddToast(result: boolean, title: string, season: number, message: string, best_version: number) {
+  if (season) title = `${title} ${formatSeason(season.toString())}`
 
   let subname = '订阅'
-  if (best_version > 0)
-    subname = '洗版订阅'
+  if (best_version > 0) subname = '洗版订阅'
 
-  if (result && seasonsSelected.value.length > 1)
-    $toast.success(`${title} 添加${subname}成功！`)
-  else if (!result)
-    $toast.error(`${title} 添加${subname}失败：${message}！`)
+  if (result) $toast.success(`${title} 添加${subname}成功！`)
+  else if (!result) $toast.error(`${title} 添加${subname}失败：${message}！`)
 }
 
 // 调用API取消订阅
@@ -181,41 +182,33 @@ async function removeSubscribe() {
   // 开始处理
   startNProgress()
   try {
-    const mediaid = props.media?.tmdb_id
-      ? `tmdb:${props.media?.tmdb_id}`
-      : `douban:${props.media?.douban_id}`
+    const mediaid = getMediaId()
 
-    const result: { [key: string]: any } = await api.delete(
-      `subscribe/media/${mediaid}`,
-      {
-        params: {
-          season: props.media?.season,
-        },
+    const result: { [key: string]: any } = await api.delete(`subscribe/media/${mediaid}`, {
+      params: {
+        season: props.media?.season,
       },
-    )
+    })
 
     if (result.success) {
       isSubscribed.value = false
       $toast.success(`${props.media?.title} 已取消订阅！`)
-    }
-    else {
+    } else {
       $toast.error(`${props.media?.title} 取消订阅失败：${result.message}！`)
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
+  } finally {
+    doneNProgress()
   }
-  doneNProgress()
 }
 
 // 查询当前媒体是否已订阅
 async function handleCheckSubscribe() {
   try {
     const result = await checkSubscribe(props.media?.season)
-    if (result)
-      isSubscribed.value = true
-  }
-  catch (error) {
+    if (result) isSubscribed.value = true
+  } catch (error) {
     console.error(error)
   }
 }
@@ -233,10 +226,8 @@ async function handleCheckExists() {
       },
     })
 
-    if (result.success)
-      isExists.value = true
-  }
-  catch (error) {
+    if (result.success) isExists.value = true
+  } catch (error) {
     console.error(error)
   }
 }
@@ -244,9 +235,7 @@ async function handleCheckExists() {
 // 调用API检查是否已订阅，电视剧需要指定季
 async function checkSubscribe(season = 0) {
   try {
-    const mediaid = props.media?.tmdb_id
-      ? `tmdb:${props.media?.tmdb_id}`
-      : `douban:${props.media?.douban_id}`
+    const mediaid = getMediaId()
 
     const result: Subscribe = await api.get(`subscribe/media/${mediaid}`, {
       params: {
@@ -256,101 +245,102 @@ async function checkSubscribe(season = 0) {
     })
 
     return result.id || null
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 
   return null
 }
 
-// 检查所有季的缺失状态
+// 检查所有季的缺失状态（数据库）
 async function checkSeasonsNotExists() {
   // 开始处理
   startNProgress()
   try {
     const result: NotExistMediaInfo[] = await api.post('mediaserver/notexists', props.media)
     if (result) {
-      result.forEach((item) => {
+      result.forEach(item => {
         // 0-已入库 1-部分缺失 2-全部缺失
         let state = 0
-        if (item.episodes.length === 0)
-          state = 2
-        else if (item.episodes.length < item.total_episode)
-          state = 1
+        if (item.episodes.length === 0) state = 2
+        else if (item.episodes.length < item.total_episode) state = 1
 
         seasonsNotExisted.value[item.season] = state
       })
     }
-  }
-  catch (error) {
+  } catch (error) {
     $toast.error(`${props.media?.title}无法识别TMDB媒体信息！`)
     tmdbFlag.value = false
+  } finally {
+    // 处理完成
+    doneNProgress()
   }
-
-  // 处理完成
-  doneNProgress()
 }
 
 // 查询TMDB的所有季信息
 async function getMediaSeasons() {
   try {
     seasonInfos.value = await api.get(`tmdb/seasons/${props.media?.tmdb_id}`)
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
 
+// 查询订阅弹窗规则
+async function queryDefaultSubscribeConfig() {
+  // 非管理员不显示
+  if (!store.state.auth.superUser) return false
+  try {
+    let subscribe_config_url = ''
+    if (props.media?.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
+    else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
+
+    const result: { [key: string]: any } = await api.get(subscribe_config_url)
+
+    if (result.data?.value) return result.data.value.show_edit_dialog
+  } catch (error) {
+    console.log(error)
+  }
+  return false
+}
+
 // 爱心订阅按钮响应
 function handleSubscribe() {
-  if (isSubscribed.value)
-    removeSubscribe()
-  else
-    handleAddSubscribe()
+  if (isSubscribed.value) removeSubscribe()
+  else handleAddSubscribe()
 }
 
 // 计算存在状态的颜色
 function getExistColor(season: number) {
   const state = seasonsNotExisted.value[season]
-  if (!state)
-    return 'success'
+  if (!state) return 'success'
 
-  if (state === 1)
-    return 'warning'
-  else if (state === 2)
-    return 'error'
-  else
-    return 'success'
+  if (state === 1) return 'warning'
+  else if (state === 2) return 'error'
+  else return 'success'
 }
 
 // 计算存在状态的文本
 function getExistText(season: number) {
   const state = seasonsNotExisted.value[season]
-  if (!state)
-    return '已入库'
+  if (!state) return '已入库'
 
-  if (state === 1)
-    return '部分缺失'
-  else if (state === 2)
-    return '缺失'
-  else
-    return '已入库'
+  if (state === 1) return '部分缺失'
+  else if (state === 2) return '缺失'
+  else return '已入库'
 }
 
 // 打开详情页
-function goMediaDetail() {
-  router.push({
-    path: '/media',
-    query: {
-      mediaid: `${
-        props.media?.tmdb_id
-          ? `tmdb:${props.media?.tmdb_id}`
-          : `douban:${props.media?.douban_id}`
-      }`,
-      type: props.media?.type,
-    },
-  })
+function goMediaDetail(isHovering = false) {
+  if (isHovering) {
+    router.push({
+      path: '/media',
+      query: {
+        mediaid: getMediaId(),
+        type: props.media?.type,
+      },
+    })
+  }
 }
 
 // 开始搜索
@@ -358,13 +348,10 @@ function handleSearch() {
   router.push({
     path: '/resource',
     query: {
-      keyword: `${
-        props.media?.tmdb_id
-          ? `tmdb:${props.media?.tmdb_id}`
-          : `douban:${props.media?.douban_id}`
-      }`,
+      keyword: getMediaId(),
       type: props.media?.type,
       area: 'title',
+      season: props.media?.season,
     },
   })
 }
@@ -377,41 +364,37 @@ onBeforeMount(() => {
 
 // 计算图片地址
 const getImgUrl: Ref<string> = computed(() => {
-  if (imageLoadError.value)
-    return noImage
+  if (imageLoadError.value) return noImage
   const url = props.media?.poster_path?.replace('original', 'w500') ?? noImage
   // 如果地址中包含douban则使用中转代理
   if (url.includes('doubanio.com'))
-    return `${import.meta.env.VITE_API_BASE_URL}douban/img/${encodeURIComponent(url)}`
+    return `${import.meta.env.VITE_API_BASE_URL}douban/img?imgurl=${encodeURIComponent(url)}`
 
   return url
 })
 
 // 拼装季图片地址
 function getSeasonPoster(posterPath: string) {
-  if (!posterPath)
-    return ''
+  if (!posterPath) return ''
   return `https://image.tmdb.org/t/p/w500${posterPath}`
 }
 
 // 将yyyy-mm-dd转换为yyyy年mm月dd日
 function formatAirDate(airDate: string) {
-  if (!airDate)
-    return ''
-  const date = new Date(airDate)
+  if (!airDate) return ''
+  const date = new Date(airDate.replaceAll(/-/g, '/'))
   return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
 }
 // 从yyyy-mm-dd中提取年份
 function getYear(airDate: string) {
-  if (!airDate)
-    return ''
-  const date = new Date(airDate)
+  if (!airDate) return ''
+  const date = new Date(airDate.replaceAll(/-/g, '/'))
   return date.getFullYear()
 }
 </script>
 
 <template>
-  <VHover v-bind="props">
+  <VHover>
     <template #default="hover">
       <VCard
         v-bind="hover.props"
@@ -422,6 +405,7 @@ function getYear(airDate: string) {
           'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
           'ring-1': isImageLoaded,
         }"
+        @click.stop="goMediaDetail(hover.isHovering)"
       >
         <VImg
           aspect-ratio="2/3"
@@ -437,79 +421,69 @@ function getYear(airDate: string) {
               <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
             </div>
           </template>
-          <!-- 类型角标 -->
-          <VChip
-            v-show="isImageLoaded"
-            variant="elevated"
-            size="small"
-            :class="getChipColor(props.media?.type || '')"
-            class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
-          >
-            {{ props.media?.type }}
-          </VChip>
-          <!-- 本地存在标识 -->
-          <ExistIcon v-if="isExists" />
-          <!-- 评分角标 -->
-          <VChip
-            v-if="isImageLoaded && props.media?.vote_average && !isExists"
-            variant="elevated"
-            size="small"
-            :class="getChipColor('rating')"
-            class="absolute right-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
-          >
-            {{ props.media?.vote_average }}
-          </VChip>
-          <!-- 详情 -->
-          <VCardText
-            v-show="hover.isHovering || imageLoadError"
-            class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
-            @click.stop="goMediaDetail"
-          >
-            <span class="font-bold">{{ props.media?.year }}</span>
-            <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
-              {{ props.media?.title }}
-            </h1>
-            <p class="leading-4 line-clamp-4 overflow-hidden text-ellipsis ...">
-              {{ props.media?.overview }}
-            </p>
-            <div class="flex align-center justify-between">
-              <IconBtn
-                icon="mdi-magnify"
-                color="white"
-                @click.stop="handleSearch"
-              />
-              <IconBtn
-                icon="mdi-heart"
-                :color="isSubscribed ? 'error' : 'white'"
-                @click.stop="handleSubscribe"
-              />
-            </div>
-          </VCardText>
         </VImg>
+        <!-- 类型角标 -->
+        <VChip
+          v-show="isImageLoaded"
+          variant="elevated"
+          size="small"
+          :class="getChipColor(props.media?.type || '')"
+          class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
+        >
+          {{ props.media?.type }}
+        </VChip>
+        <!-- 本地存在标识 -->
+        <ExistIcon v-if="isExists && !hover.isHovering" />
+        <!-- 评分角标 -->
+        <VChip
+          v-if="isImageLoaded && props.media?.vote_average && !(isExists && !hover.isHovering)"
+          variant="elevated"
+          size="small"
+          :class="getChipColor('rating')"
+          class="absolute right-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
+        >
+          {{ props.media?.vote_average }}
+        </VChip>
+        <!-- 详情 -->
+        <VCardText
+          v-show="hover.isHovering || imageLoadError"
+          class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
+        >
+          <span class="font-bold">{{ props.media?.year }}</span>
+          <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+            {{ props.media?.title }}
+          </h1>
+          <p class="leading-4 line-clamp-4 overflow-hidden text-ellipsis ...">
+            {{ props.media?.overview }}
+          </p>
+          <div class="flex align-center justify-between">
+            <IconBtn icon="mdi-magnify" color="white" @click.stop="handleSearch" />
+            <IconBtn icon="mdi-heart" :color="isSubscribed ? 'error' : 'white'" @click.stop="handleSubscribe" />
+          </div>
+        </VCardText>
+        <VAvatar
+          size="24"
+          density="compact"
+          class="absolute bottom-1 right-1"
+          tile
+          v-if="!hover.isHovering && isImageLoaded && props.media?.source"
+        >
+          <VImg cover :src="sourceIconDict[props.media?.source]" class="shadow-lg" />
+        </VAvatar>
       </VCard>
     </template>
   </VHover>
   <!-- 订阅季弹窗 -->
-  <VBottomSheet
-    v-model="subscribeSeasonDialog"
-    inset
-    scrollable
-  >
+  <VBottomSheet v-if="subscribeSeasonDialog" v-model="subscribeSeasonDialog" inset scrollable>
     <VCard class="rounded-t">
       <DialogCloseBtn @click="subscribeSeasonDialog = false" />
-      <VCardTitle class="pe-10">
-        订阅 - {{ props.media?.title }}
-      </VCardTitle>
+      <VCardItem>
+        <VCardTitle class="pe-10"> 订阅 - {{ props.media?.title }} </VCardTitle>
+      </VCardItem>
+      <VDivider />
       <VCardText>
-        <VList
-          v-model:selected="seasonsSelected"
-          lines="three"
-          select-strategy="classic"
-        >
-          <VListItem
-            v-for="(item, i) in seasonInfos" :key="i"
-            :value="item"
-          >
+        <VList v-model:selected="seasonsSelected" lines="three" select-strategy="classic">
+          <VListItem v-for="(item, i) in seasonInfos" :key="i" :value="item">
             <template #prepend>
               <VImg
                 height="90"
@@ -526,16 +500,9 @@ function getYear(airDate: string) {
                 </template>
               </VImg>
             </template>
-            <VListItemTitle>
-              第 {{ item.season_number }} 季
-            </VListItemTitle>
+            <VListItemTitle> 第 {{ item.season_number }} 季 </VListItemTitle>
             <VListItemSubtitle class="mt-1 me-2">
-              <VChip
-                v-if="item.vote_average"
-                color="primary"
-                size="small"
-                class="mb-1"
-              >
+              <VChip v-if="item.vote_average" color="primary" size="small" class="mb-1">
                 <VIcon icon="mdi-star" /> {{ item.vote_average }}
               </VChip>
               {{ getYear(item.air_date || '') }} • {{ item.episode_count }} 集
@@ -544,12 +511,7 @@ function getYear(airDate: string) {
               《{{ media?.title }}》第 {{ item.season_number }} 季于 {{ formatAirDate(item.air_date || '') }} 首播。
             </VListItemSubtitle>
             <VListItemSubtitle>
-              <VChip
-                v-if="seasonsNotExisted"
-                class="mt-2"
-                size="small"
-                :color="getExistColor(item.season_number || 0)"
-              >
+              <VChip v-if="seasonsNotExisted" class="mt-2" size="small" :color="getExistColor(item.season_number || 0)">
                 {{ getExistText(item.season_number || 0) }}
               </VChip>
             </VListItemSubtitle>
@@ -562,23 +524,25 @@ function getYear(airDate: string) {
         </VList>
       </VCardText>
       <div class="my-2 text-center">
-        <VBtn
-          :disabled="seasonsSelected.length === 0"
-          width="30%"
-          @click="subscribeSeasons"
-        >
+        <VBtn :disabled="seasonsSelected.length === 0" width="30%" @click="subscribeSeasons">
           {{ seasonsSelected.length === 0 ? '请选择订阅季' : '提交订阅' }}
         </VBtn>
       </div>
     </VCard>
   </VBottomSheet>
   <!-- 订阅编辑弹窗 -->
-  <SubscribeEditForm
+  <SubscribeEditDialog
+    v-if="subscribeEditDialog"
     v-model="subscribeEditDialog"
     :subid="subscribeId"
     @close="subscribeEditDialog = false"
     @save="subscribeEditDialog = false"
-    @remove="() => { subscribeEditDialog = false; handleCheckSubscribe(); }"
+    @remove="
+      () => {
+        subscribeEditDialog = false
+        handleCheckSubscribe()
+      }
+    "
   />
 </template>
 

src/components/cards/MediaDirectoryCard.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { MediaDirectory } from '@/api/types'
+import { VTextField } from 'vuetify/lib/components/index.mjs'
+
+// 输入参数
+const props = defineProps({
+  type: String, // download/library
+  directory: {
+    type: Object as PropType<MediaDirectory>,
+    required: true, // 必填参数
+  },
+  categories: {
+    type: Object as PropType<{ [key: string]: any }>,
+    required: true,
+  },
+  width: String,
+  height: String,
+})
+
+// 类型下拉字典
+const typeItems = [
+  { title: '全部', value: '' },
+  { title: '电影', value: '电影' },
+  { title: '电视剧', value: '电视剧' },
+]
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'changed'])
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
+
+// 根据选中的媒体类型，获取对应的媒体类别
+const getCategories = computed(() => {
+  const default_value = [{ title: '全部', value: '' }]
+  if (!props.categories || !props.categories[props.directory?.media_type ?? '']) return default_value
+  return default_value.concat(props.categories[props.directory.media_type ?? ''])
+})
+</script>
+
+<template>
+  <VCard variant="tonal" :width="props.width" :height="props.height">
+    <DialogCloseBtn @click="onClose" />
+    <VCardItem>
+      <VTextField
+        v-model="props.directory.name"
+        variant="underlined"
+        label="别名"
+        class="me-20 text-high-emphasis font-weight-bold"
+      />
+      <span class="absolute top-3 right-12">
+        <IconBtn>
+          <VIcon class="cursor-move" icon="mdi-drag" />
+        </IconBtn>
+      </span>
+    </VCardItem>
+    <VCardText>
+      <VForm>
+        <VRow>
+          <VCol>
+            <VTextField v-model="props.directory.path" variant="underlined" label="路径" />
+          </VCol>
+        </VRow>
+        <VRow>
+          <VCol cols="4">
+            <VSelect
+              v-model="props.directory.media_type"
+              variant="underlined"
+              :items="typeItems"
+              label="媒体类型"
+              @update:modelValue="props.directory.category = ''"
+            />
+          </VCol>
+          <VCol>
+            <VSelect v-model="props.directory.category" variant="underlined" :items="getCategories" label="媒体类别" />
+          </VCol>
+        </VRow>
+        <VRow>
+          <VCol v-if="!props.directory.category || props.directory.category === ''">
+            <VSwitch v-model="props.directory.auto_category" label="自动分类"></VSwitch>
+          </VCol>
+          <VCol v-if="type === 'library'">
+            <VSwitch v-model="props.directory.scrape" label="刮削元数据"></VSwitch>
+          </VCol>
+        </VRow>
+      </VForm>
+    </VCardText>
+  </VCard>
+</template>

src/components/cards/MediaInfoCard.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import type { Context } from '@/api/types'
+import { isNullOrEmptyObject } from '@/@core/utils'
 
 // 输入参数
 const props = defineProps({
@@ -9,15 +10,13 @@ const props = defineProps({
 
 // TMDB图片转换为w500大小
 function getW500Image(url = '') {
-  if (!url)
-    return ''
+  if (!url) return ''
   return url.replace('original', 'w500')
 }
 
 // 打开TMDB详情页面
 function openTmdbPage(type: string, tmdbId: number) {
-  if (!type || !tmdbId)
-    return
+  if (!type || !tmdbId) return
 
   const url = `https://www.themoviedb.org/${type === '电影' ? 'movie' : 'tv'}/${tmdbId}`
   window.open(url, '_blank')
@@ -31,10 +30,7 @@ function openTmdbPage(type: string, tmdbId: number) {
         v-if="context?.meta_info?.name"
         class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row"
       >
-        <div
-          v-if="context?.media_info?.poster_path"
-          class="ma-auto"
-        >
+        <div v-if="context?.media_info?.poster_path" class="ma-auto">
           <VImg
             width="10rem"
             aspect-ratio="2/3"
@@ -75,16 +71,10 @@ function openTmdbPage(type: string, tmdbId: number) {
               variant="elevated"
               class="me-1 mb-1 text-white bg-blue-500"
             >
-              {{
-                context?.media_info?.type || context?.meta_info?.type
-              }}
+              {{ context?.media_info?.type || context?.meta_info?.type }}
             </VChip>
             <!-- 二级分类 -->
-            <VChip
-              v-if="context?.media_info?.category"
-              variant="elevated"
-              class="me-1 mb-1 text-white bg-blue-500"
-            >
+            <VChip v-if="context?.media_info?.category" variant="elevated" class="me-1 mb-1 text-white bg-blue-500">
               {{ context?.media_info?.category }}
             </VChip>
             <!-- TMDBID -->
@@ -98,18 +88,10 @@ function openTmdbPage(type: string, tmdbId: number) {
               {{ context?.media_info?.tmdb_id }}
             </VChip>
             <!-- meta_info -->
-            <VChip
-              v-if="context?.meta_info?.edition"
-              variant="elevated"
-              class="me-1 mb-1 text-white bg-red-500"
-            >
+            <VChip v-if="context?.meta_info?.edition" variant="elevated" class="me-1 mb-1 text-white bg-red-500">
               {{ context?.meta_info?.edition }}
             </VChip>
-            <VChip
-              v-if="context?.meta_info?.resource_pix"
-              variant="elevated"
-              class="me-1 mb-1 text-white bg-red-500"
-            >
+            <VChip v-if="context?.meta_info?.resource_pix" variant="elevated" class="me-1 mb-1 text-white bg-red-500">
               {{ context?.meta_info?.resource_pix }}
             </VChip>
             <VChip
@@ -126,36 +108,19 @@ function openTmdbPage(type: string, tmdbId: number) {
             >
               {{ context?.meta_info?.audio_encode }}
             </VChip>
-            <VChip
-              v-if="context?.meta_info?.resource_team"
-              variant="elevated"
-              class="me-1 mb-1 text-white bg-cyan-500"
-            >
+            <VChip v-if="context?.meta_info?.resource_team" variant="elevated" class="me-1 mb-1 text-white bg-cyan-500">
               {{ context?.meta_info?.resource_team }}
             </VChip>
           </VCardItem>
         </div>
       </div>
-      <VAlert
-        v-if="!context?.meta_info?.name"
-        icon="mdi-alert-circle-outline"
-      >
-        识别失败，无法识别到有效信息！
-      </VAlert>
+      <VAlert v-if="!context?.meta_info?.name" icon="mdi-alert-circle-outline"> 识别失败，无法识别到有效信息！ </VAlert>
     </VCol>
-    <VExpansionPanels
-      v-show="context?.meta_info?.title !== context?.meta_info.org_string"
-    >
+    <VExpansionPanels v-show="!isNullOrEmptyObject(context?.meta_info.apply_words)">
       <VExpansionPanel>
-        <VExpansionPanelTitle>
-          识别词应用详情
-        </VExpansionPanelTitle>
+        <VExpansionPanelTitle> 识别词应用详情 </VExpansionPanelTitle>
         <VExpansionPanelText>
-          <VChip
-            variant="elevated"
-            class="me-1 mb-1 break-all"
-            color="primary"
-          >
+          <VChip variant="elevated" class="me-1 mb-1 break-all" color="primary">
             {{ context?.meta_info.org_string }}
           </VChip>
           <VChip

src/components/cards/MessageCard.vue

@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import type { Message } from '@/api/types'
+import { formatDateDifference } from '@core/utils/formatters'
+
+// 输入参数
+const props = defineProps({
+  message: Object as PropType<Message>,
+  width: String,
+  height: String,
+})
+
+// 图片是否加载完成
+const isImageLoaded = ref(false)
+
+// 图片是否加载失败
+const imageLoadError = ref(false)
+
+// 图片加载完成
+async function imageLoaded() {
+  isImageLoaded.value = true
+}
+
+// 链接打开新窗口
+function openLink() {
+  if (props.message?.link)
+    window.open(props.message.link, '_blank')
+}
+
+// 将note转换为json
+function noteToJson() {
+  if (props.message?.note) {
+    try {
+      return JSON.parse(props.message.note)
+    }
+    catch (error) {
+      console.error(error)
+    }
+  }
+  return {}
+}
+
+// 将\n转换为html属性的换行符
+function replaceNewLine(value: string) {
+  if (!value)
+    return ''
+  return value.replace(/\n/g, '<br/>')
+}
+</script>
+
+<template>
+  <VCard
+    :width="props.width"
+    :height="props.height"
+    variant="tonal"
+    @click="openLink"
+  >
+    <div
+      v-if="props.message?.image"
+      class="relative text-center card-cover-blurred"
+    >
+      <VImg
+        :src="props.message?.image"
+        aspect-ratio="4/3"
+        cover
+        :class="{ shadow: isImageLoaded }"
+        @load="imageLoaded"
+        @error="imageLoadError = true"
+      />
+    </div>
+    <VCardTitle v-if="props.message?.title" class="whitespace-break-spaces">
+      {{ props.message?.title }}
+    </VCardTitle>
+    <VAlert
+      v-if="props.message?.text && props.message?.action === 0"
+      variant="tonal"
+      type="success"
+    >
+      <template #prepend />
+      {{ props.message?.text }}
+    </VAlert>
+    <VCardText
+      v-if="props.message?.text && props.message?.action === 1"
+      v-html="replaceNewLine(props.message?.text)"
+    />
+    <VCardText v-if="props.message?.note">
+      <VList>
+        <VListItem
+          v-for="(value, key) in noteToJson()"
+          :key="key"
+          two-line
+        >
+          <VListItemTitle v-if="value.title_year" class="font-bold">
+            {{ key + 1 }}. {{ value.title_year }}
+          </VListItemTitle>
+          <VListItemTitle v-if="value.enclosure" class="font-bold whitespace-break-spaces">
+            {{ key + 1 }}. {{ value.title }} {{ value.volume_factor }} ↑{{ value.seeders }}
+          </VListItemTitle>
+          <VListItemSubtitle v-if="value.type">
+            类型：{{ value.type }} 评分：{{ value.vote_average }}
+          </VListItemSubtitle>
+          <VListItemSubtitle v-if="value.enclosure" class="whitespace-break-spaces">
+            {{ value.description }}
+          </VListItemSubtitle>
+        </VListItem>
+      </VList>
+    </VCardText>
+    <div class="text-end">
+      <span v-if="props.message?.action === 0" class="text-sm italic me-2">{{ props.message?.userid }}</span>
+      <span class="text-sm italic me-2">{{ formatDateDifference(props.message?.reg_time || props.message?.date || '') }}</span>
+    </div>
+  </VCard>
+</template>

src/components/cards/PersonCard.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import personIcon from '@images/misc/person-icon.png'
-import type { TmdbPerson } from '@/api/types'
+import type { Person } from '@/api/types'
 import router from '@/router'
 
 const personProps = defineProps({
-  person: Object as PropType<TmdbPerson>,
+  person: Object as PropType<Person>,
   width: String,
   height: String,
 })
@@ -17,26 +17,54 @@ const isImageLoaded = ref(false)
 
 // 人物图片地址
 function getPersonImage() {
-  if (!personInfo.value?.profile_path)
+  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}`
+  } else if (personProps.person?.source === 'douban') {
+    if (!personInfo.value?.avatar) return personIcon
+    if (typeof personInfo.value?.avatar === 'object') {
+      return personInfo.value?.avatar?.normal
+    } else {
+      return personInfo.value?.avatar
+    }
+  } else if (personProps.person?.source === 'bangumi') {
+    if (!personInfo.value?.images) return personIcon
+    return personInfo.value?.images?.medium
+  } else {
     return personIcon
-  return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
+  }
+}
+
+// 人物姓名
+function getPersonName() {
+  return personInfo.value?.name
+}
+
+// 人物角色
+function getPersonCharacter() {
+  if (personProps.person?.source === 'bangumi') {
+    if (!personInfo.value?.career) return ''
+    return personInfo.value?.career.join('、')
+  } else {
+    return personInfo.value?.character
+  }
 }
 
 // 人物详情
 function goPersonDetail() {
-  if (!personInfo.value?.id)
-    return
+  if (!personInfo.value?.id) return
   router.push({
     path: '/person',
     query: {
       personid: personInfo.value?.id,
+      source: personInfo.value?.source,
     },
   })
 }
 </script>
 
 <template>
-  <VHover v-bind="personProps">
+  <VHover>
     <template #default="hover">
       <VCard
         v-bind="hover.props"
@@ -49,9 +77,9 @@ function goPersonDetail() {
         @click.stop="goPersonDetail"
       >
         <div
-          class="person-card relative transform-gpu cursor-pointer rounded shadow ring-1 transition duration-150 ease-in-out scale-100 ring-gray-700"
+          class="person-card relative transform-gpu cursor-pointer rounded shadow transition duration-150 ease-in-out scale-100 ring-gray-700"
         >
-          <div style="padding-bottom: 150%;">
+          <div style="padding-block-end: 150%">
             <div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
               <div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
                 <VAvatar
@@ -60,19 +88,17 @@ function goPersonDetail() {
                     'ring-1 ring-gray-700': isImageLoaded,
                   }"
                 >
-                  <VImg
-                    v-img
-                    :src="getPersonImage()"
-                    cover
-                    @load="isImageLoaded = true"
-                  />
+                  <VImg :src="getPersonImage()" cover @load="isImageLoaded = true" />
                 </VAvatar>
               </div>
               <div class="w-full truncate text-center font-bold">
-                {{ personInfo?.name }}
+                {{ getPersonName() }}
               </div>
-              <div class="overflow-hidden whitespace-normal text-center text-sm" style=" display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp: 2;">
-                {{ personInfo?.character }}
+              <div
+                class="overflow-hidden whitespace-normal text-center text-sm"
+                style="display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2"
+              >
+                {{ getPersonCharacter() }}
               </div>
               <div class="absolute bottom-0 left-0 right-0 h-12 rounded-b" />
             </div>

src/components/cards/PluginAppCard.vue

@@ -1,15 +1,19 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
+import VersionHistory from '../misc/VersionHistory.vue'
 import api from '@/api'
 import type { Plugin } from '@/api/types'
 import noImage from '@images/logos/plugin.png'
 import { getDominantColor } from '@/@core/utils/image'
+import { isNullOrEmptyObject } from '@/@core/utils'
+import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
 
 // 输入参数
 const props = defineProps({
   plugin: Object as PropType<Plugin>,
   width: String,
   height: String,
+  count: Number,
 })
 
 // 定义触发的自定义事件
@@ -36,6 +40,15 @@ const isImageLoaded = ref(false)
 // 图片是否加载失败
 const imageLoadError = ref(false)
 
+// 更新日志弹窗
+const releaseDialog = ref(false)
+
+// 计算插件标签
+const pluginLabels = computed(() => {
+  if (!props.plugin?.plugin_label) return []
+  return props.plugin.plugin_label.split(',')
+})
+
 // 图片加载完成
 async function imageLoaded() {
   isImageLoaded.value = true
@@ -49,17 +62,14 @@ async function installPlugin() {
   try {
     // 显示等待提示框
     progressDialog.value = true
-    progressText.value = `正在安装 ${props.plugin?.plugin_name} ${props?.plugin?.plugin_version} 插件...`
+    progressText.value = `正在安装 ${props.plugin?.plugin_name} v${props?.plugin?.plugin_version} ...`
 
-    const result: { [key: string]: any } = await api.get(
-      `plugin/install/${props.plugin?.id}`,
-      {
-        params: {
-          repo_url: props.plugin?.repo_url,
-          force: props.plugin?.has_update,
-        },
+    const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
+      params: {
+        repo_url: props.plugin?.repo_url,
+        force: props.plugin?.has_update,
       },
-    )
+    })
 
     // 隐藏等待提示框
     progressDialog.value = false
@@ -69,25 +79,22 @@ async function installPlugin() {
 
       // 通知父组件刷新
       emit('install')
-    }
-    else {
+    } else {
       $toast.error(`插件 ${props.plugin?.plugin_name} 安装失败：${result.message}`)
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
 
 // 计算图标路径
 const iconPath: Ref<string> = computed(() => {
-  if (imageLoadError.value)
-    return noImage
+  if (imageLoadError.value) return noImage
   // 如果是网络图片则使用代理后返回
   if (props.plugin?.plugin_icon?.startsWith('http'))
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/${encodeURIComponent(props.plugin?.plugin_icon)}`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}`
 
-  return `/plugin_icon/${props.plugin?.plugin_icon}`
+  return `./plugin_icon/${props.plugin?.plugin_icon}`
 })
 
 // 访问插件页面
@@ -96,60 +103,62 @@ function visitPluginPage() {
   let repoUrl = props.plugin?.repo_url
   if (repoUrl) {
     if (repoUrl.includes('raw.githubusercontent.com')) {
-      if (!repoUrl.endsWith('/'))
-        repoUrl += '/'
+      if (!repoUrl.endsWith('/')) repoUrl += '/'
 
-      if (repoUrl.split('/').length < 6)
-        repoUrl = `${repoUrl}main/`
+      if (repoUrl.split('/').length < 6) repoUrl = `${repoUrl}main/`
 
       try {
         const [user, repo] = repoUrl.split('/').slice(-4, -2)
         repoUrl = `https://github.com/${user}/${repo}`
-      }
-      catch (error) {
+      } catch (error) {
         return
       }
     }
-  }
-  else {
+  } else {
     repoUrl = props.plugin?.author_url
   }
   window.open(repoUrl, '_blank')
 }
 
+// 显示更新日志
+function showUpdateHistory() {
+  releaseDialog.value = true
+}
+
 // 弹出菜单
 const dropdownItems = ref([
   {
-    title: '查看详情',
+    title: '项目主页',
     value: 1,
+    show: true,
     props: {
-      prependIcon: 'mdi-information-outline',
+      prependIcon: 'mdi-github',
       click: visitPluginPage,
     },
   },
+  {
+    title: '更新说明',
+    value: 2,
+    show: !isNullOrEmptyObject(props.plugin?.history || {}),
+    props: {
+      prependIcon: 'mdi-update',
+      click: showUpdateHistory,
+    },
+  },
 ])
 </script>
 
 <template>
-  <VCard
-    :width="props.width"
-    :height="props.height"
-    @click="installPlugin"
-  >
-    <div
-      class="relative pa-4 text-center card-cover-blurred"
-      :style="{ background: `${backgroundColor}` }"
-    >
+  <VCard :width="props.width" :height="props.height" @click="installPlugin" class="flex flex-col">
+    <div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }">
       <div class="me-n3 absolute top-0 right-3">
         <IconBtn>
           <VIcon icon="mdi-dots-vertical" class="text-white" />
-          <VMenu
-            activator="parent"
-            close-on-content-click
-          >
+          <VMenu activator="parent" close-on-content-click>
             <VList>
               <VListItem
                 v-for="(item, i) in dropdownItems"
+                v-show="item.show"
                 :key="i"
                 variant="plain"
                 @click="item.props.click"
@@ -163,18 +172,7 @@ const dropdownItems = ref([
           </VMenu>
         </IconBtn>
       </div>
-      <div
-        v-if="props.plugin?.has_update"
-        class="me-n3 absolute top-0 left-1"
-      >
-        <VIcon
-          icon="mdi-new-box"
-          class="text-white"
-        />
-      </div>
-      <VAvatar
-        size="8rem"
-      >
+      <VAvatar size="6rem">
         <VImg
           ref="imageRef"
           :src="iconPath"
@@ -186,39 +184,39 @@ const dropdownItems = ref([
         />
       </VAvatar>
     </div>
-    <VCardTitle>{{ props.plugin?.plugin_name }}</VCardTitle>
-
-    <VCardText>
-      {{ props.plugin?.plugin_desc }}
+    <VCardTitle>
+      {{ props.plugin?.plugin_name }}
+      <span class="text-sm text-gray-500">v{{ props.plugin?.plugin_version }}</span>
+    </VCardTitle>
+    <VCardText class="pb-2">
+      <div>{{ props.plugin?.plugin_desc }}</div>
+      <div>
+        <VChip v-for="label in pluginLabels" variant="tonal" size="small" class="me-1 my-1" color="info" label>
+          {{ label }}
+        </VChip>
+      </div>
     </VCardText>
-    <VCardText>
-      作者：<a
-        :href="props.plugin?.author_url"
-        target="_blank"
-        @click.stop
-      >
-        {{ props.plugin?.plugin_author }}
-      </a><br>
-      版本：{{ props.plugin?.plugin_version }}
+    <VCardText class="flex align-self-baseline pb-2 w-full align-end">
+      <span>
+        <VIcon icon="mdi-account" class="me-1" />
+        <a :href="props.plugin?.author_url" target="_blank" @click.stop>
+          {{ props.plugin?.plugin_author }}
+        </a>
+      </span>
+      <span v-if="props.count" class="ms-3">
+        <VIcon icon="mdi-download" />
+        <span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
+      </span>
     </VCardText>
   </VCard>
   <!-- 安装插件进度框 -->
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
-      </VCardText>
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
+  <!-- 更新日志 -->
+  <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
+    <VCard :title="`${props.plugin?.plugin_name} 更新说明`">
+      <DialogCloseBtn @click="releaseDialog = false" />
+      <VDivider />
+      <VersionHistory :history="props.plugin?.history" />
     </VCard>
   </VDialog>
 </template>
@@ -230,7 +228,7 @@ const dropdownItems = ref([
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
   background: rgba(29, 39, 59, 48%);
-  content: "";
+  content: '';
   inset: 0;
 }
 </style>

src/components/cards/PluginCard.vue

@@ -1,23 +1,33 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
 import { useConfirm } from 'vuetify-use-dialog'
+import { VIcon } from 'vuetify/lib/components/index.mjs'
 import api from '@/api'
 import type { Plugin } from '@/api/types'
 import FormRender from '@/components/render/FormRender.vue'
 import PageRender from '@/components/render/PageRender.vue'
+import VersionHistory from '@/components/misc/VersionHistory.vue'
 import { isNullOrEmptyObject } from '@core/utils'
 import noImage from '@images/logos/plugin.png'
 import { getDominantColor } from '@/@core/utils/image'
+import store from '@/store'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const props = defineProps({
   plugin: Object as PropType<Plugin>,
+  count: Number, // 下载次数
+  action: Boolean, // 动作标识
   width: String,
   height: String,
 })
 
 // 定义触发的自定义事件
-const emit = defineEmits(['remove', 'save'])
+const emit = defineEmits(['remove', 'save', 'actionDone'])
 
 // 背景颜色
 const backgroundColor = ref('#28A9E1')
@@ -40,14 +50,20 @@ const pluginConfigDialog = ref(false)
 // 插件配置表单数据
 const pluginConfigForm = ref({})
 
+// 进度框
+const progressDialog = ref(false)
+
 // 插件表单配置项
 let pluginFormItems = reactive([])
 
 // 插件数据页面
 const pluginInfoDialog = ref(false)
 
+// 进度框文本
+const progressText = ref('正在更新插件...')
+
 // 插件数据页面配置项
-let pluginPageItems = reactive([])
+let pluginPageItems = ref([])
 
 // 图片是否加载完成
 const isImageLoaded = ref(false)
@@ -55,6 +71,20 @@ const isImageLoaded = ref(false)
 // 图片是否加载失败
 const imageLoadError = ref(false)
 
+// 更新日志弹窗
+const releaseDialog = ref(false)
+
+// 监听动作标识，如为true则打开详情
+watch(
+  () => props.action,
+  (newAction, oldAction) => {
+    if (newAction && !oldAction) {
+      openPluginDetail()
+      emit('actionDone')
+    }
+  },
+)
+
 // 图片加载完成
 async function imageLoaded() {
   isImageLoaded.value = true
@@ -63,37 +93,41 @@ async function imageLoaded() {
   backgroundColor.value = await getDominantColor(imageElement)
 }
 
+// 显示更新日志
+function showUpdateHistory() {
+  // 检查当前版本是否有更新日志
+  if (isNullOrEmptyObject(props.plugin?.history)) {
+    updatePlugin()
+  } else {
+    releaseDialog.value = true
+  }
+}
+
 // 调用API卸载插件
 async function uninstallPlugin() {
   const isConfirmed = await createConfirm({
     title: '确认',
     content: `是否确认卸载插件 ${props.plugin?.plugin_name} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
   })
 
-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return
 
   try {
+    // 显示等待提示框
+    progressDialog.value = true
+    progressText.value = `正在卸载 ${props.plugin?.plugin_name} ...`
     const result: { [key: string]: any } = await api.delete(`plugin/${props.plugin?.id}`)
+    // 隐藏等待提示框
+    progressDialog.value = false
     if (result.success) {
       $toast.success(`插件 ${props.plugin?.plugin_name} 已卸载`)
 
       // 通知父组件刷新
       emit('remove')
-    }
-    else {
+    } else {
       $toast.error(`插件 ${props.plugin?.plugin_name} 卸载失败：${result.message}}`)
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -104,11 +138,9 @@ async function loadPluginForm() {
     const result: { [key: string]: any } = await api.get(`plugin/form/${props.plugin?.id}`)
     if (result) {
       pluginFormItems = result.conf
-      if (result.model)
-        pluginConfigForm.value = result.model
+      if (result.model) pluginConfigForm.value = result.model
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -117,10 +149,8 @@ async function loadPluginForm() {
 async function loadPluginPage() {
   try {
     const result: [] = await api.get(`plugin/page/${props.plugin?.id}`)
-    if (result)
-      pluginPageItems = result
-  }
-  catch (error) {
+    if (result) pluginPageItems.value = result
+  } catch (error) {
     console.error(error)
   }
 }
@@ -129,29 +159,30 @@ async function loadPluginPage() {
 async function loadPluginConf() {
   try {
     const result: { [key: string]: any } = await api.get(`plugin/${props.plugin?.id}`)
-    if (!isNullOrEmptyObject(result))
-      pluginConfigForm.value = result
-  }
-  catch (error) {
+    if (!isNullOrEmptyObject(result)) pluginConfigForm.value = result
+  } catch (error) {
     console.error(error)
   }
 }
 
 // 调用API保存配置数据
 async function savePluginConf() {
+  // 显示等待提示框
+  progressDialog.value = true
+  progressText.value = `正在保存 ${props.plugin?.plugin_name} 配置...`
   try {
     const result: { [key: string]: any } = await api.put(`plugin/${props.plugin?.id}`, pluginConfigForm.value)
     if (result.success) {
-      $toast.success(`插件 ${props.plugin?.plugin_name} 配置已保存`)
+      progressDialog.value = false
       pluginConfigDialog.value = false
+      $toast.success(`插件 ${props.plugin?.plugin_name} 配置已保存`)
       // 通知父组件刷新
       emit('save')
-    }
-    else {
+    } else {
+      progressDialog.value = false
       $toast.error(`插件 ${props.plugin?.plugin_name} 配置保存失败：${result.message}}`)
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -177,13 +208,12 @@ async function showPluginConfig() {
 
 // 计算图标路径
 const iconPath: Ref<string> = computed(() => {
-  if (imageLoadError.value)
-    return noImage
+  if (imageLoadError.value) return noImage
   // 如果是网络图片则使用代理后返回
   if (props.plugin?.plugin_icon?.startsWith('http'))
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/${encodeURIComponent(props.plugin?.plugin_icon)}`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}`
 
-  return `/plugin_icon/${props.plugin?.plugin_icon}`
+  return `./plugin_icon/${props.plugin?.plugin_icon}`
 })
 
 // 重置插件
@@ -191,18 +221,9 @@ async function resetPlugin() {
   const isConfirmed = await createConfirm({
     title: '确认',
     content: `是否确认重置插件 ${props.plugin?.plugin_name} 的配置数据?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
   })
 
-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return
 
   try {
     const result: { [key: string]: any } = await api.get(`plugin/reset/${props.plugin?.id}`)
@@ -210,12 +231,41 @@ async function resetPlugin() {
       $toast.success(`插件 ${props.plugin?.plugin_name} 数据已重置`)
       // 通知父组件刷新
       emit('save')
-    }
-    else {
+    } else {
       $toast.error(`插件 ${props.plugin?.plugin_name} 重置失败：${result.message}}`)
     }
+  } catch (error) {
+    console.error(error)
   }
-  catch (error) {
+}
+
+// 更新插件
+async function updatePlugin() {
+  try {
+    releaseDialog.value = false
+    // 显示等待提示框
+    progressDialog.value = true
+    progressText.value = `正在更新 ${props.plugin?.plugin_name} ...`
+
+    const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
+      params: {
+        repo_url: props.plugin?.repo_url,
+        force: true,
+      },
+    })
+
+    // 隐藏等待提示框
+    progressDialog.value = false
+
+    if (result.success) {
+      $toast.success(`插件 ${props.plugin?.plugin_name} 更新成功！`)
+
+      // 通知父组件刷新
+      emit('save')
+    } else {
+      $toast.error(`插件 ${props.plugin?.plugin_name} 更新失败：${result.message}`)
+    }
+  } catch (error) {
     console.error(error)
   }
 }
@@ -225,6 +275,21 @@ function visitAuthorPage() {
   window.open(props.plugin?.author_url, '_blank')
 }
 
+// 查看日志URL
+function openLoggerWindow() {
+  const token = store.state.auth.token
+  const url = `${
+    import.meta.env.VITE_API_BASE_URL
+  }system/logging?token=${token}&length=-1&logfile=plugins/${props.plugin?.id?.toLowerCase()}.log`
+  window.open(url, '_blank')
+}
+
+// 打开插件详情
+function openPluginDetail() {
+  if (props.plugin?.has_page) showPluginInfo()
+  else showPluginConfig()
+}
+
 // 弹出菜单
 const dropdownItems = ref([
   {
@@ -246,8 +311,18 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '重置',
+    title: '更新',
     value: 3,
+    show: props.plugin?.has_update,
+    props: {
+      prependIcon: 'mdi-arrow-up-circle-outline',
+      color: 'success',
+      click: showUpdateHistory,
+    },
+  },
+  {
+    title: '重置',
+    value: 4,
     show: true,
     props: {
       prependIcon: 'mdi-cancel',
@@ -257,7 +332,7 @@ const dropdownItems = ref([
   },
   {
     title: '卸载',
-    value: 4,
+    value: 5,
     show: true,
     props: {
       prependIcon: 'mdi-trash-can-outline',
@@ -265,9 +340,20 @@ const dropdownItems = ref([
       click: uninstallPlugin,
     },
   },
+  {
+    title: '查看日志',
+    value: 6,
+    show: true,
+    props: {
+      prependIcon: 'mdi-file-document-outline',
+      click: () => {
+        openLoggerWindow()
+      },
+    },
+  },
   {
     title: '作者主页',
-    value: 4,
+    value: 7,
     show: true,
     props: {
       prependIcon: 'mdi-home-circle-outline',
@@ -275,32 +361,28 @@ const dropdownItems = ref([
     },
   },
 ])
+
+// 监听插件状态变化
+watch(
+  () => props.plugin?.has_update,
+  (newHasUpdate, oldHasUpdate) => {
+    const updateItemIndex = dropdownItems.value.findIndex(item => item.value === 3)
+    if (updateItemIndex !== -1) dropdownItems.value[updateItemIndex].show = newHasUpdate
+  },
+)
 </script>
 
 <template>
   <!-- 插件卡片 -->
-  <VCard
-    v-if="isVisible"
-    :width="props.width"
-    :height="props.height"
-    @click="() => {
-      if (props.plugin?.has_page)
-        showPluginInfo()
-      else
-        showPluginConfig()
-    }"
-  >
-    <div
-      class="relative pa-4 text-center card-cover-blurred"
-      :style="{ background: `${backgroundColor}` }"
-    >
+  <VCard v-if="isVisible" :width="props.width" :height="props.height" @click="openPluginDetail" class="flex flex-col">
+    <div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }">
+      <div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 left-1">
+        <VIcon icon="mdi-new-box" class="text-white" />
+      </div>
       <div class="me-n3 absolute top-0 right-3">
         <IconBtn>
           <VIcon icon="mdi-dots-vertical" class="text-white" />
-          <VMenu
-            activator="parent"
-            close-on-content-click
-          >
+          <VMenu activator="parent" close-on-content-click>
             <VList>
               <VListItem
                 v-for="(item, i) in dropdownItems"
@@ -319,9 +401,7 @@ const dropdownItems = ref([
           </VMenu>
         </IconBtn>
       </div>
-      <VAvatar
-        size="8rem"
-      >
+      <VAvatar size="6rem">
         <VImg
           ref="imageRef"
           :src="iconPath"
@@ -336,79 +416,68 @@ const dropdownItems = ref([
     <VCardItem class="py-2">
       <VCardTitle class="flex items-center flex-row">
         <VBadge v-if="props.plugin?.state" dot inline color="success" class="me-1 mb-1" />
-        {{ props.plugin?.plugin_name }}<span class="text-sm ms-2 mt-1 text-gray-500">{{ props.plugin?.plugin_version }}</span>
+        {{ props.plugin?.plugin_name }}
+        <span class="text-sm ms-2 mt-1 text-gray-500">v{{ props.plugin?.plugin_version }}</span>
       </VCardTitle>
     </VCardItem>
-    <VCardText>
+    <VCardText class="pb-1">
       {{ props.plugin?.plugin_desc }}
     </VCardText>
+    <VCardText class="flex justify-end align-self-baseline p-1 w-full align-end">
+      <span v-if="props.count" class="ms-3">
+        <VIcon icon="mdi-fire" />
+        <span class="text-sm ms-1">{{ props.count?.toLocaleString() }}</span>
+      </span>
+    </VCardText>
   </VCard>
+
   <!-- 插件配置页面 -->
-  <VDialog
-    v-model="pluginConfigDialog"
-    scrollable
-    max-width="60rem"
-  >
-    <VCard
-      :title="`${props.plugin?.plugin_name} - 配置`"
-      class="rounded-t"
-    >
-      <DialogCloseBtn @click="pluginConfigDialog = false" />
+  <VDialog v-model="pluginConfigDialog" scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
+    <VCard :title="`${props.plugin?.plugin_name} - 配置`" class="rounded-t">
+      <DialogCloseBtn v-model="pluginConfigDialog" />
+      <VDivider />
       <VCardText>
-        <FormRender
-          v-for="(item, index) in pluginFormItems"
-          :key="index"
-          :config="item"
-          :form="pluginConfigForm"
-        />
+        <FormRender v-for="(item, index) in pluginFormItems" :key="index" :config="item" :form="pluginConfigForm" />
       </VCardText>
-      <VCardActions>
-        <VBtn v-if="pluginPageItems.length > 0" @click="showPluginInfo">
+      <VCardActions class="pt-3">
+        <VBtn v-if="pluginPageItems.length > 0" @click="showPluginInfo" variant="outlined" color="info">
           查看数据
         </VBtn>
         <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="savePluginConf"
-        >
-          保存
-        </VBtn>
+        <VBtn @click="savePluginConf" variant="elevated" prepend-icon="mdi-content-save" class="px-5"> 保存 </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>
 
   <!-- 插件数据页面 -->
-  <VDialog
-    v-model="pluginInfoDialog"
-    scrollable
-    max-width="80rem"
-  >
-    <VCard
-      :title="`${props.plugin?.plugin_name}`"
-      class="rounded-t"
-    >
-      <DialogCloseBtn @click="pluginInfoDialog = false" />
-      <VCardText>
-        <PageRender
-          v-for="(item, index) in pluginPageItems"
-          :key="index"
-          :config="item"
-        />
+  <VDialog v-model="pluginInfoDialog" scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
+    <VCard :title="`${props.plugin?.plugin_name}`" class="rounded-t">
+      <DialogCloseBtn v-model="pluginInfoDialog" />
+      <VCardText class="min-h-40">
+        <PageRender @action="loadPluginPage" v-for="(item, index) in pluginPageItems" :key="index" :config="item" />
       </VCardText>
-      <VCardActions>
-        <VBtn
-          @click="showPluginConfig"
-        >
-          配置
+      <VFab icon="mdi-cog" location="bottom end" size="x-large" fixed app appear @click="showPluginConfig" />
+    </VCard>
+  </VDialog>
+
+  <!-- 进度框 -->
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
+
+  <!-- 更新日志 -->
+  <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
+    <VCard :title="`${props.plugin?.plugin_name} 更新说明`">
+      <DialogCloseBtn @click="releaseDialog = false" />
+      <VDivider />
+      <VersionHistory :history="props.plugin?.history" />
+      <VDivider />
+      <VCardText>
+        <VBtn @click="updatePlugin" block>
+          <template #prepend>
+            <VIcon icon="mdi-arrow-up-circle-outline" />
+          </template>
+          更新到最新版本
         </VBtn>
-        <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="pluginInfoDialog = false"
-        >
-          关闭
-        </VBtn>
-      </VCardActions>
+      </VCardText>
     </VCard>
   </VDialog>
 </template>
@@ -420,7 +489,7 @@ const dropdownItems = ref([
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
   background: rgba(29, 39, 59, 48%);
-  content: "";
+  content: '';
   inset: 0;
 }
 </style>

src/components/cards/PosterCard.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { MediaServerPlayItem } from '@/api/types'
+import noImage from '@images/no-image.jpeg'
+
+// 输入参数
+const props = defineProps({
+  media: Object as PropType<MediaServerPlayItem>,
+  width: String,
+  height: String,
+})
+
+// 图片加载状态
+const isImageLoaded = ref(false)
+
+// 图片加载失败
+const imageLoadError = ref(false)
+
+// 角标颜色
+function getChipColor(type: string) {
+  if (type === '电影') return 'border-blue-500 bg-blue-600'
+  else if (type === '电视剧') return ' bg-indigo-500 border-indigo-600'
+  else return 'border-purple-600 bg-purple-600'
+}
+
+// 计算图片地址
+const getImgUrl = computed(() => {
+  if (imageLoadError.value) return noImage
+  const image = props.media?.image || ''
+  return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(image)}`
+})
+
+// 跳转播放
+function goPlay(isHovering = false) {
+  if (props.media?.link && isHovering) window.open(props.media?.link, '_blank')
+}
+</script>
+
+<template>
+  <VHover v-bind="props">
+    <template #default="hover">
+      <VCard
+        v-bind="hover.props"
+        :height="props.height"
+        :width="props.width"
+        class="outline-none shadow ring-gray-500 rounded-lg"
+        :class="{
+          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+          'ring-1': isImageLoaded,
+        }"
+        @click.stop="goPlay(hover.isHovering)"
+      >
+        <VImg
+          aspect-ratio="2/3"
+          :src="getImgUrl"
+          class="object-cover aspect-w-2 aspect-h-3"
+          :class="hover.isHovering ? 'on-hover' : ''"
+          cover
+          @load="isImageLoaded = true"
+          @error="imageLoadError = true"
+        >
+          <template #placeholder>
+            <div class="w-full h-full">
+              <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+            </div>
+          </template>
+        </VImg>
+        <!-- 类型角标 -->
+        <VChip
+          v-show="isImageLoaded"
+          variant="elevated"
+          size="small"
+          :class="getChipColor(props.media?.type || '')"
+          class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
+        >
+          {{ props.media?.type }}
+        </VChip>
+        <!-- 详情 -->
+        <VCardText
+          v-show="hover.isHovering || imageLoadError"
+          class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
+        >
+          <span class="font-bold">{{ props.media?.subtitle }}</span>
+          <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+            {{ props.media?.title }}
+          </h1>
+        </VCardText>
+      </VCard>
+    </template>
+  </VHover>
+</template>
+
+<style lang="scss">
+.on-hover img {
+  @apply brightness-50;
+}
+</style>

src/components/cards/SiteCard.vue

@@ -1,12 +1,17 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import { useToast } from 'vue-toast-notification'
-import SiteAddEditForm from '../form/SiteAddEditForm.vue'
-import { formatFileSize } from '@core/utils/formatters'
+import SiteAddEditDialog from '../dialog/SiteAddEditDialog.vue'
+import SiteTorrentTable from '../table/SiteTorrentTable.vue'
 import { requiredValidator } from '@/@validators'
 import api from '@/api'
-import type { Site, TorrentInfo } from '@/api/types'
-import ExistIcon from '@core/components/ExistIcon.vue'
+import type { Site, SiteStatistic } from '@/api/types'
+import { isNullOrEmptyObject } from '@/@core/utils'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const cardProps = defineProps({
@@ -51,53 +56,21 @@ const progressDialog = ref(false)
 // 进度文本
 const progressText = ref('请稍候 ...')
 
-// 资源浏览表头
-const resourceHeaders = [
-  { title: '标题', key: 'title', sortable: false },
-  { title: '时间', key: 'pubdate', sortable: true },
-  { title: '大小', key: 'size', sortable: true },
-  { title: '做种', key: 'seeders', sortable: true },
-  { title: '下载', key: 'peers', sortable: true },
-  { title: '', key: 'actions', sortable: false },
-]
-
-// 数据列表
-const resourceDataList = ref<TorrentInfo[]>([])
-
-// 搜索
-const resourceSearch = ref('')
-
-// 加载状态
-const resourceLoading = ref(false)
-
-// 总条数
-const resourceTotalItems = ref(0)
-
-// 每页条数
-const resourceItemsPerPage = ref(25)
-
 // 用户名密码表单
 const userPwForm = ref({
   username: '',
   password: '',
+  code: '',
 })
 
-// 打开种子详情页面
-function openTorrentDetail(page_url: string) {
-  window.open(page_url, '_blank')
-}
-
-// 下载种子文件
-async function downloadTorrentFile(enclosure: string) {
-  window.open(enclosure, '_blank')
-}
+// 站点使用统计
+const siteStats = ref<SiteStatistic>({})
 
 // 查询站点图标
 async function getSiteIcon() {
   try {
     siteIcon.value = (await api.get(`site/icon/${cardProps.site?.id}`)).data.icon
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -109,15 +82,23 @@ async function testSite() {
     testButtonDisable.value = true
 
     const result: { [key: string]: any } = await api.get(`site/test/${cardProps.site?.id}`)
-    if (result.success)
-      $toast.success(`${cardProps.site?.name} 连通性测试成功，可正常使用！`)
-    else
-      $toast.error(`${cardProps.site?.name} 连通性测试失败：${result.message}`)
+    if (result.success) $toast.success(`${cardProps.site?.name} 连通性测试成功，可正常使用！`)
+    else $toast.error(`${cardProps.site?.name} 连通性测试失败：${result.message}`)
 
     testButtonText.value = '测试'
     testButtonDisable.value = false
+
+    getSiteStats()
+  } catch (error) {
+    console.error(error)
   }
-  catch (error) {
+}
+
+// 查询站点使用统计
+async function getSiteStats() {
+  try {
+    siteStats.value = await api.get(`site/statistic/${cardProps.site?.domain}`)
+  } catch (error) {
     console.error(error)
   }
 }
@@ -130,14 +111,12 @@ async function handleSiteUpdate() {
 // 打开资源浏览弹窗
 async function handleResourceBrowse() {
   resourceDialog.value = true
-  getResourceList()
 }
 
 // 调用API，更新站点Cookie UA
 async function updateSiteCookie() {
   try {
-    if (!userPwForm.value.username || !userPwForm.value.password)
-      return
+    if (!userPwForm.value.username || !userPwForm.value.password) return
 
     // 更新按钮状态
     siteCookieDialog.value = false
@@ -146,49 +125,20 @@ async function updateSiteCookie() {
     progressDialog.value = true
     progressText.value = `正在更新 ${cardProps.site?.name} Cookie & UA ...`
 
-    const result: { [key: string]: any } = await api.get(
-      `site/cookie/${cardProps.site?.id}`,
-      {
-        params: {
-          username: userPwForm.value.username,
-          password: userPwForm.value.password,
-        },
+    const result: { [key: string]: any } = await api.get(`site/cookie/${cardProps.site?.id}`, {
+      params: {
+        username: userPwForm.value.username,
+        password: userPwForm.value.password,
+        code: userPwForm.value.code,
       },
-    )
+    })
 
-    if (result.success)
-      $toast.success(`${cardProps.site?.name} 更新Cookie & UA 成功！`)
-    else
-      $toast.error(`${cardProps.site?.name} 更新失败：${result.message}`)
+    if (result.success) $toast.success(`${cardProps.site?.name} 更新Cookie & UA 成功！`)
+    else $toast.error(`${cardProps.site?.name} 更新失败：${result.message}`)
 
     progressDialog.value = false
     updateButtonDisable.value = false
-  }
-  catch (error) {
-    console.error(error)
-  }
-}
-
-// 促销Chip类
-function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
-  if (downloadVolume === 0)
-    return 'text-white bg-lime-500'
-  else if (downloadVolume < 1)
-    return 'text-white bg-green-500'
-  else if (uploadVolume !== 1)
-    return 'text-white bg-sky-500'
-  else
-    return 'text-white bg-gray-500'
-}
-
-// 调用API，查询站点资源
-async function getResourceList() {
-  resourceLoading.value = true
-  try {
-    resourceDataList.value = await api.get(`site/resource/${cardProps.site?.id}`)
-    resourceLoading.value = false
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -198,339 +148,175 @@ function openSitePage() {
   window.open(cardProps.site?.url, '_blank')
 }
 
+// 根据站点状态显示不同的状态图标
+const statColor = computed(() => {
+  if (isNullOrEmptyObject(siteStats.value)) {
+    return 'secondary'
+  }
+  if (siteStats.value?.lst_state == 1) {
+    return 'error'
+  } else if (siteStats.value?.lst_state == 0) {
+    if (!siteStats.value?.seconds) return 'secondary'
+    if (siteStats.value?.seconds >= 5) return 'warning'
+    return 'success'
+  }
+})
+
+// 监听resourceDialog，如果为false则重新查询站点使用统计
+watch(resourceDialog, value => {
+  if (!value) getSiteStats()
+})
+
+// 保存站点
+function saveSite() {
+  siteEditDialog.value = false
+  emit('update')
+}
+
 // 装载时查询站点图标
 onMounted(() => {
   getSiteIcon()
+  getSiteStats()
 })
 </script>
 
 <template>
-  <VCard
-    :height="cardProps.height"
-    :width="cardProps.width"
-    :flat="!cardProps.site?.is_active"
-    class="overflow-hidden"
-    @click="siteEditDialog = true"
-  >
-    <template #image>
-      <VAvatar
-        class="absolute right-2 bottom-2 rounded"
-        variant="flat"
-        rounded="0"
-      >
-        <VImg :src="siteIcon" />
-      </VAvatar>
-    </template>
-    <VCardItem>
-      <VCardTitle class="font-bold">
-        <span @click.stop="openSitePage">{{ cardProps.site?.name }}</span>
-      </VCardTitle>
-      <VCardSubtitle>
-        {{ cardProps.site?.url }}
-      </VCardSubtitle>
-    </VCardItem>
-
-    <ExistIcon v-if="cardProps.site?.is_active" />
-
-    <VCardText class="py-2">
-      <VTooltip
-        v-if="cardProps.site?.render === 1"
-        text="浏览器仿真"
-      >
-        <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-apple-safari"
-          />
-        </template>
-      </VTooltip>
-
-      <VTooltip
-        v-if="cardProps.site?.proxy === 1"
-        text="代理"
-      >
-        <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-network-outline"
-          />
-        </template>
-      </VTooltip>
-
-      <VTooltip
-        v-if="cardProps.site?.limit_interval"
-        text="流控"
-      >
-        <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-speedometer"
-          />
-        </template>
-      </VTooltip>
-
-      <VTooltip
-        v-if="cardProps.site?.filter"
-        text="过滤"
-      >
-        <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-filter-cog-outline"
-          />
-        </template>
-      </VTooltip>
-    </VCardText>
-
-    <VDivider
-      class="opacity-75"
-      style="border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));"
-    />
-
-    <VCardActions>
-      <VBtn
-        v-if="!cardProps.site?.public"
-        :disabled="updateButtonDisable"
-        @click.stop="handleSiteUpdate"
-      >
-        <template #prepend>
-          <VIcon icon="mdi-refresh" />
-        </template>
-        更新
-      </VBtn>
-      <VBtn
-        :disabled="testButtonDisable"
-        @click.stop="testSite"
-      >
-        <template #prepend>
-          <VIcon icon="mdi-link" />
-        </template>
-        {{ testButtonText }}
-      </VBtn>
-      <VBtn @click.stop="handleResourceBrowse">
-        <template #prepend>
-          <VIcon icon="mdi-web" />
-        </template>
-        浏览
-      </VBtn>
-    </VCardActions>
-  </VCard>
-  <!-- 更新站点Cookie & UA弹窗 -->
-  <VDialog
-    v-model="siteCookieDialog"
-    max-width="50rem"
-  >
-    <!-- Dialog Content -->
-    <VCard title="更新站点Cookie & UA">
-      <VCardText>
-        <VForm @submit.prevent="() => {}">
-          <VRow>
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <VTextField
-                v-model="userPwForm.username"
-                label="用户名"
-                :rules="[requiredValidator]"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <VTextField
-                v-model="userPwForm.password"
-                label="密码"
-                :type="isPasswordVisible ? 'text' : 'password'"
-                :append-inner-icon="
-                  isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
-                "
-                :rules="[requiredValidator]"
-                @click:append-inner="isPasswordVisible = !isPasswordVisible"
-                @keydown.enter="updateSiteCookie"
-              />
-            </VCol>
-          </VRow>
-        </VForm>
+  <div>
+    <VCard
+      :height="cardProps.height"
+      :width="cardProps.width"
+      :variant="cardProps.site?.is_active ? 'elevated' : 'outlined'"
+      class="overflow-hidden"
+      @click="siteEditDialog = true"
+    >
+      <template #image>
+        <VAvatar class="absolute right-2 bottom-2 rounded" variant="flat" rounded="0">
+          <VImg :src="siteIcon" />
+        </VAvatar>
+      </template>
+      <VCardItem>
+        <VCardTitle class="font-bold">
+          <span @click.stop="openSitePage">{{ cardProps.site?.name }}</span>
+        </VCardTitle>
+        <VCardSubtitle>
+          <span @click.stop="openSitePage">{{ cardProps.site?.url }}</span>
+        </VCardSubtitle>
+      </VCardItem>
+      <VCardText class="py-2">
+        <VTooltip v-if="cardProps.site?.render === 1" text="浏览器仿真">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-apple-safari" />
+          </template>
+        </VTooltip>
+        <VTooltip v-if="cardProps.site?.proxy === 1" text="代理">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-network-outline" />
+          </template>
+        </VTooltip>
+        <VTooltip v-if="cardProps.site?.limit_interval" text="流控">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-speedometer" />
+          </template>
+        </VTooltip>
+        <VTooltip v-if="cardProps.site?.filter" text="过滤">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-filter-cog-outline" />
+          </template>
+        </VTooltip>
       </VCardText>
-
+      <VDivider />
       <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="updateSiteCookie"
-        >
-          开始更新
+        <VBtn v-if="!cardProps.site?.public" :disabled="updateButtonDisable" @click.stop="handleSiteUpdate">
+          <template #prepend>
+            <VIcon icon="mdi-refresh" />
+          </template>
+          更新
+        </VBtn>
+        <VBtn :disabled="testButtonDisable" @click.stop="testSite">
+          <template #prepend>
+            <VIcon icon="mdi-link" />
+          </template>
+          {{ testButtonText }}
+        </VBtn>
+        <VBtn @click.stop="handleResourceBrowse">
+          <template #prepend>
+            <VIcon icon="mdi-web" />
+          </template>
+          浏览
         </VBtn>
       </VCardActions>
+      <StatIcon v-if="cardProps.site?.is_active" :color="statColor" />
+      <span class="absolute top-1 right-8">
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </span>
     </VCard>
-  </VDialog>
-  <SiteAddEditForm
-    v-model="siteEditDialog"
-    :siteid="cardProps.site?.id"
-    @save="siteEditDialog = false; emit('update')"
-    @remove="emit('remove')"
-    @close="siteEditDialog = false"
-  />
-  <!-- 站点资源弹窗 -->
-  <VDialog
-    v-model="resourceDialog"
-    max-width="80rem"
-    scrollable
-  >
-    <!-- Dialog Content -->
-    <VCard :title="`浏览站点 - ${cardProps.site?.name}`">
-      <DialogCloseBtn @click="resourceDialog = false" />
-      <VCardText class="pt-2">
-        <VDataTable
-          v-model:items-per-page="resourceItemsPerPage"
-          :headers="resourceHeaders"
-          :items="resourceDataList"
-          :items-length="resourceTotalItems"
-          :search="resourceSearch"
-          :loading="resourceLoading"
-          density="compact"
-          item-value="title"
-          return-object
-          fixed-header
-          items-per-page-text="每页条数"
-          page-text="{0}-{1} 共 {2} 条"
-        >
-          <template #item.title="{ item }">
-            <div class="text-high-emphasis pt-1">
-              {{ item.raw.title }}
-            </div>
-            <div class="text-sm my-1">
-              {{ item.raw.description }}
-            </div>
-            <VChip
-              v-if="item.raw?.hit_and_run"
-              variant="elevated"
-              size="small"
-              class="me-1 mb-1 text-white bg-black"
-            >
-              H&R
-            </VChip>
-            <VChip
-              v-if="item.raw?.freedate_diff"
-              variant="elevated"
-              color="secondary"
-              size="small"
-              class="me-1 mb-1"
-            >
-              {{ item.raw?.freedate_diff }}
-            </VChip>
-            <VChip
-              v-for="(label, index) in item.raw?.labels"
-              :key="index"
-              variant="elevated"
-              size="small"
-              color="primary"
-              class="me-1 mb-1"
-            >
-              {{ label }}
-            </VChip>
-            <VChip
-              v-if="item.raw?.downloadvolumefactor !== 1 || item.raw?.uploadvolumefactor !== 1"
-              :class="
-                getVolumeFactorClass(item.raw?.downloadvolumefactor, item.raw?.uploadvolumefactor)
-              "
-              variant="elevated"
-              size="small"
-              class="me-1 mb-1"
-            >
-              {{ item.raw?.volume_factor }}
-            </VChip>
-          </template>
-          <template #item.pubdate="{ item }">
-            <div>{{ item.raw.date_elapsed }}</div>
-            <div class="text-sm">
-              {{ item.raw.pubdate }}
-            </div>
-          </template>
-          <template #item.size="{ item }">
-            <div class="text-nowrap whitespace-nowrap">
-              {{ formatFileSize(item.raw.size) }}
-            </div>
-          </template>
-          <template #item.seeders="{ item }">
-            <div>{{ item.raw.seeders }}</div>
-          </template>
-          <template #item.peers="{ item }">
-            <div>{{ item.raw.peers }}</div>
-          </template>
-          <template #item.actions="{ item }">
-            <div class="me-n3">
-              <IconBtn>
-                <VIcon
-                  icon="mdi-dots-vertical"
+    <!-- 更新站点Cookie & UA弹窗 -->
+    <VDialog v-model="siteCookieDialog" max-width="50rem">
+      <!-- Dialog Content -->
+      <VCard title="更新站点Cookie & UA">
+        <DialogCloseBtn @click="siteCookieDialog = false" />
+        <VCardText>
+          <VForm @submit.prevent="() => {}">
+            <VRow>
+              <VCol cols="12" md="4">
+                <VTextField v-model="userPwForm.username" label="用户名" :rules="[requiredValidator]" />
+              </VCol>
+              <VCol cols="12" md="4">
+                <VTextField
+                  v-model="userPwForm.password"
+                  label="密码"
+                  :type="isPasswordVisible ? 'text' : 'password'"
+                  :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                  :rules="[requiredValidator]"
+                  @click:append-inner="isPasswordVisible = !isPasswordVisible"
+                  @keydown.enter="updateSiteCookie"
                 />
-                <VMenu
-                  activator="parent"
-                  close-on-content-click
-                >
-                  <VList>
-                    <VListItem
-                      variant="plain"
-                      @click="openTorrentDetail(item.raw.page_url)"
-                    >
-                      <template #prepend>
-                        <VIcon icon="mdi-information" />
-                      </template>
-                      <VListItemTitle>查看详情</VListItemTitle>
-                    </VListItem>
-                    <VListItem
-                      v-if="item.raw.enclosure?.startsWith('http')"
-                      variant="plain"
-                      @click="downloadTorrentFile(item.raw.enclosure)"
-                    >
-                      <template #prepend>
-                        <VIcon icon="mdi-download" />
-                      </template>
-                      <VListItemTitle>下载种子文件</VListItemTitle>
-                    </VListItem>
-                  </VList>
-                </VMenu>
-              </IconBtn>
-            </div>
-          </template>
-          <template #no-data>
-            没有数据
-          </template>
-        </VDataTable>
-      </VCardText>
-    </VCard>
-  </VDialog>
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
+              </VCol>
+              <VCol cols="12" md="4">
+                <VTextField v-model="userPwForm.code" label="两步验证" />
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+
+        <VCardActions>
+          <VSpacer />
+          <VBtn variant="elevated" @click="updateSiteCookie" prepend-icon="mdi-refresh" class="px-5"> 开始更新 </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+    <!-- 站点编辑弹窗 -->
+    <SiteAddEditDialog
+      v-if="siteEditDialog"
+      v-model="siteEditDialog"
+      :siteid="cardProps.site?.id"
+      @save="saveSite"
+      @remove="emit('remove')"
+      @close="siteEditDialog = false"
+    />
+    <!-- 站点资源弹窗 -->
+    <VDialog
+      v-if="resourceDialog"
+      v-model="resourceDialog"
+      max-width="80rem"
+      scrollable
+      z-index="1010"
+      :fullscreen="!display.mdAndUp.value"
     >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
-      </VCardText>
-    </VCard>
-  </VDialog>
+      <VCard :title="`浏览站点 - ${cardProps.site?.name}`">
+        <DialogCloseBtn @click="resourceDialog = false" />
+        <VDivider />
+        <VCardText class="pt-2">
+          <SiteTorrentTable :site="cardProps.site?.id" />
+        </VCardText>
+      </VCard>
+    </VDialog>
+    <!-- 进度框 -->
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
+  </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .v-table th {
   white-space: nowrap;
 }

src/components/cards/SubscribeCard.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
-import SubscribeEditForm from '../form/SubscribeEditForm.vue'
-import { calculateTimeDifference } from '@/@core/utils'
+import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
+import { formatDateDifference } from '@/@core/utils/formatters'
 import { formatSeason } from '@/@core/utils/formatters'
 import api from '@/api'
 import type { Subscribe } from '@/api/types'
+import router from '@/router'
 
 // 输入参数
 const props = defineProps({
@@ -24,13 +25,7 @@ const imageLoaded = ref(false)
 const subscribeEditDialog = ref(false)
 
 // 上一次更新时间
-const lastUpdateText = ref(
-  `${
-    props.media?.last_update
-      ? `${calculateTimeDifference(props.media?.last_update || '')}前`
-      : ''
-  }`,
-)
+const lastUpdateText = ref(props.media && props.media.last_update ? formatDateDifference(props.media.last_update) : '')
 
 // 图片加载完成响应
 function imageLoadHandler() {
@@ -39,23 +34,17 @@ function imageLoadHandler() {
 
 // 根据 type 返回不同的图标
 function getIcon() {
-  if (props.media?.type === '电影')
-    return 'mdi-movie'
-  else if (props.media?.type === '电视剧')
-    return 'mdi-television-classic'
-  else
-    return 'mdi-help-circle'
+  if (props.media?.type === '电影') return 'mdi-movie'
+  else if (props.media?.type === '电视剧') return 'mdi-television-classic'
+  else return 'mdi-help-circle'
 }
 
 // 计算百分比
 function getPercentage() {
-  if (props.media?.total_episode === 0)
-    return 0
+  if (props.media?.total_episode === 0) return 0
 
   return Math.round(
-    (((props.media?.total_episode ?? 0) - (props.media?.lack_episode ?? 0))
-      / (props.media?.total_episode ?? 1))
-      * 100,
+    (((props.media?.total_episode ?? 0) - (props.media?.lack_episode ?? 0)) / (props.media?.total_episode ?? 1)) * 100,
   )
 }
 
@@ -72,16 +61,13 @@ function getTextClass() {
 // 删除订阅
 async function removeSubscribe() {
   try {
-    const result: { [key: string]: any } = await api.delete(
-      `subscribe/${props.media?.id}`,
-    )
+    const result: { [key: string]: any } = await api.delete(`subscribe/${props.media?.id}`)
 
     if (result.success) {
       // 通知父组件刷新
       emit('remove')
     }
-  }
-  catch (e) {
+  } catch (e) {
     console.log(e)
   }
 }
@@ -89,15 +75,11 @@ async function removeSubscribe() {
 // 搜索订阅
 async function searchSubscribe() {
   try {
-    const result: { [key: string]: any } = await api.get(
-      `subscribe/search/${props.media?.id}`,
-    )
+    const result: { [key: string]: any } = await api.get(`subscribe/search/${props.media?.id}`)
 
     // 提示
-    if (result.success)
-      $toast.success(`${props.media?.name} 提交搜索请求成功！`)
-  }
-  catch (e) {
+    if (result.success) $toast.success(`${props.media?.name} 提交搜索请求成功！`)
+  } catch (e) {
     console.log(e)
   }
 }
@@ -126,8 +108,24 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '取消订阅',
+    title: '查看详情',
     value: 3,
+    props: {
+      prependIcon: 'mdi-open-in-new',
+      click: () => {
+        router.push({
+          path: '/media',
+          query: {
+            mediaid: `${props.media?.tmdbid ? `tmdb:${props.media?.tmdbid}` : `douban:${props.media?.doubanid}`}`,
+            type: props.media?.type,
+          },
+        })
+      },
+    },
+  },
+  {
+    title: '取消订阅',
+    value: 4,
     props: {
       prependIcon: 'mdi-trash-can-outline',
       color: 'error',
@@ -138,135 +136,108 @@ const dropdownItems = ref([
 </script>
 
 <template>
-  <VCard
-    :key="props.media?.id"
-    :class="`${props.media?.best_version ? 'outline-dashed outline-1' : ''}`"
-    @click="editSubscribeDialog"
-  >
-    <template #image>
-      <VImg
-        :src="props.media?.backdrop || props.media?.poster"
-        aspect-ratio="2/3"
-        cover
-        class="brightness-50"
-        @load="imageLoadHandler"
-      />
-    </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>
-                <VListItem
-                  v-for="(item, i) in dropdownItems"
-                  :key="i"
-                  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>
-              </VList>
-            </VMenu>
-          </IconBtn>
-        </div>
-      </template>
-    </VCardItem>
-
-    <VCardText>
-      <p
-        class="clamp-text mb-0"
-        :class="getTextClass()"
+  <VHover>
+    <template #default="hover">
+      <VCard
+        v-bind="hover.props"
+        :key="props.media?.id"
+        class="flex flex-col"
+        :class="{
+          'outline-dashed outline-1': props.media?.best_version,
+          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+        }"
+        @click="editSubscribeDialog"
       >
-        {{ props.media?.description }}
-      </p>
-    </VCardText>
-
-    <VCardText class="d-flex justify-space-between align-center flex-wrap">
-      <div class="d-flex align-center">
-        <IconBtn
-          icon="mdi-star"
-          :color="getTextColor()"
-          class="me-1"
-        />
-        <span
-          class="text-subtitle-2 me-4"
-          :class="getTextClass()"
-        >{{
-          props.media?.vote
-        }}</span>
-        <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"
-    />
-  </VCard>
+        <template #image>
+          <VImg
+            :src="props.media?.backdrop || props.media?.poster"
+            aspect-ratio="2/3"
+            cover
+            class="brightness-50"
+            @load="imageLoadHandler"
+          />
+        </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>
+                    <VListItem
+                      v-for="(item, i) in dropdownItems"
+                      :key="i"
+                      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>
+                  </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>
+        </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>
+    </template>
+  </VHover>
   <!-- 订阅编辑弹窗 -->
-  <SubscribeEditForm
+  <SubscribeEditDialog
+    v-if="subscribeEditDialog"
     v-model="subscribeEditDialog"
     :subid="props.media?.id"
-    @remove="() => { emit('remove');subscribeEditDialog = false; }"
-    @save="() => { emit('save');subscribeEditDialog = false; }"
+    @remove="
+      () => {
+        emit('remove')
+        subscribeEditDialog = false
+      }
+    "
+    @save="
+      () => {
+        emit('save')
+        subscribeEditDialog = false
+      }
+    "
     @close="subscribeEditDialog = false"
   />
 </template>

src/components/cards/TorrentCard.vue

@@ -5,7 +5,7 @@ import { useConfirm } from 'vuetify-use-dialog'
 import { formatFileSize } from '@/@core/utils/formatters'
 import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
-import type { Context } from '@/api/types'
+import type { Context, MediaInfo, TorrentInfo } from '@/api/types'
 
 // 输入参数
 const props = defineProps({
@@ -36,20 +36,20 @@ const meta = ref(props.torrent?.meta_info)
 // 站点图标
 const siteIcon = ref('')
 
+// 存储是否已经下载过的记录
+const downloaded = ref<String[]>([])
+
 // 查询站点图标
 async function getSiteIcon() {
   try {
     siteIcon.value = (await api.get(`site/icon/${torrent?.value?.site}`)).data.icon
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
 
 // 询问并添加下载
-async function handleAddDownload(_site: any = undefined,
-  _media: any = undefined,
-  _torrent: any = undefined) {
+async function handleAddDownload(_site: any = undefined, _media: any = undefined, _torrent: any = undefined) {
   if (!_media || !_torrent || !_site) {
     _site = torrent.value?.site_name
     _media = media.value
@@ -59,24 +59,15 @@ async function handleAddDownload(_site: any = undefined,
   const isConfirmed = await createConfirm({
     title: '确认',
     content: `是否确认下载【${_site}】${_torrent?.title} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
   })
 
-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return
 
   addDownload(_media, _torrent)
 }
 
 // 添加下载
-async function addDownload(_media: any, _torrent: any) {
+async function addDownload(_media: MediaInfo, _torrent: TorrentInfo) {
   startNProgress()
   try {
     const result: { [key: string]: any } = await api.post('download/', {
@@ -87,13 +78,12 @@ async function addDownload(_media: any, _torrent: any) {
     if (result.success) {
       // 添加下载成功
       $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
-    }
-    else {
+      downloaded.value.push(_torrent?.enclosure || '')
+    } else {
       // 添加下载失败
       $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败！`)
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
   doneNProgress()
@@ -111,14 +101,10 @@ async function downloadTorrentFile() {
 
 // 促销Chip类
 function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
-  if (downloadVolume === 0)
-    return 'text-white bg-lime-500'
-  else if (downloadVolume < 1)
-    return 'text-white bg-green-500'
-  else if (uploadVolume !== 1)
-    return 'text-white bg-sky-500'
-  else
-    return 'text-white bg-gray-500'
+  if (downloadVolume === 0) return 'text-white bg-lime-500'
+  else if (downloadVolume < 1) return 'text-white bg-green-500'
+  else if (uploadVolume !== 1) return 'text-white bg-sky-500'
+  else return 'text-white bg-gray-500'
 }
 
 // 装载时查询站点图标
@@ -131,17 +117,11 @@ onMounted(() => {
   <VCard
     :width="props.width"
     :height="props.height"
+    :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'elevated'"
     @click="handleAddDownload"
   >
-    <template
-      v-if="!showMoreTorrents"
-      #image
-    >
-      <VAvatar
-        class="absolute right-2 bottom-2 rounded"
-        variant="flat"
-        rounded="0"
-      >
+    <template v-if="!showMoreTorrents" #image>
+      <VAvatar class="absolute right-2 bottom-2 rounded" variant="flat" rounded="0">
         <VImg :src="siteIcon" />
       </VAvatar>
     </template>
@@ -154,18 +134,10 @@ onMounted(() => {
       <template #append>
         <div class="me-n3">
           <IconBtn>
-            <VIcon
-              icon="mdi-dots-vertical"
-            />
-            <VMenu
-              activator="parent"
-              close-on-content-click
-            >
+            <VIcon icon="mdi-dots-vertical" />
+            <VMenu activator="parent" close-on-content-click>
               <VList>
-                <VListItem
-                  variant="plain"
-                  @click="openTorrentDetail()"
-                >
+                <VListItem variant="plain" @click="openTorrentDetail()">
                   <template #prepend>
                     <VIcon icon="mdi-information" />
                   </template>
@@ -191,25 +163,11 @@ onMounted(() => {
       {{ torrent?.title }}
     </VCardText>
     <VCardText>{{ torrent?.description }}</VCardText>
-    <VCardItem
-      v-if="torrent?.labels"
-      class="pb-3 pt-0 pe-12"
-    >
-      <VChip
-        v-if="torrent?.hit_and_run"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-black"
-      >
+    <VCardItem v-if="torrent?.labels" class="pb-3 pt-0 pe-12">
+      <VChip v-if="torrent?.hit_and_run" variant="elevated" size="small" class="me-1 mb-1 text-white bg-black">
         H&R
       </VChip>
-      <VChip
-        v-if="torrent?.freedate_diff"
-        variant="elevated"
-        color="secondary"
-        size="small"
-        class="me-1 mb-1"
-      >
+      <VChip v-if="torrent?.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
         {{ torrent?.freedate_diff }}
       </VChip>
       <VChip
@@ -222,51 +180,24 @@ onMounted(() => {
       >
         {{ label }}
       </VChip>
-      <VChip
-        v-if="meta?.edition"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-red-500"
-      >
+      <VChip v-if="meta?.edition" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
         {{ meta?.edition }}
       </VChip>
-      <VChip
-        v-if="meta?.resource_pix"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-red-500"
-      >
+      <VChip v-if="meta?.resource_pix" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
         {{ meta?.resource_pix }}
       </VChip>
-      <VChip
-        v-if="meta?.video_encode"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-orange-500"
-      >
+      <VChip v-if="meta?.video_encode" variant="elevated" size="small" class="me-1 mb-1 text-white bg-orange-500">
         {{ meta?.video_encode }}
       </VChip>
-      <VChip
-        v-if="torrent?.size"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-yellow-500"
-      >
+      <VChip v-if="torrent?.size" variant="elevated" size="small" class="me-1 mb-1 text-white bg-yellow-500">
         {{ formatFileSize(torrent?.size) }}
       </VChip>
-      <VChip
-        v-if="meta?.resource_team"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-cyan-500"
-      >
+      <VChip v-if="meta?.resource_team" variant="elevated" size="small" class="me-1 mb-1 text-white bg-cyan-500">
         {{ meta?.resource_team }}
       </VChip>
       <VChip
         v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
-        :class="
-          getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)
-        "
+        :class="getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
         variant="elevated"
         size="small"
         class="me-1 mb-1"
@@ -275,10 +206,7 @@ onMounted(() => {
       </VChip>
     </VCardItem>
     <VCardActions>
-      <VBtn
-        v-if="props.more && props.more.length > 0"
-        @click.stop="showMoreTorrents = !showMoreTorrents"
-      >
+      <VBtn v-if="props.more && props.more.length > 0" @click.stop="showMoreTorrents = !showMoreTorrents">
         <template #append>
           <VIcon :icon="showMoreTorrents ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
         </template>
@@ -288,30 +216,16 @@ onMounted(() => {
     <VExpandTransition>
       <div v-show="showMoreTorrents">
         <VDivider />
-        <VChipGroup class="p-3">
+        <VChipGroup class="p-3" column>
           <VChip
             v-for="(item, index) in props.more"
             :key="index"
-            @click.stop="
-              handleAddDownload(
-                item.torrent_info?.site_name,
-                item.media_info,
-                item.torrent_info,
-              )
-            "
+            @click.stop="handleAddDownload(item.torrent_info?.site_name, item.media_info, item.torrent_info)"
           >
             <template #append>
+              <VBadge color="primary" :content="`↑${item.torrent_info?.seeders}`" inline size="small" />
               <VBadge
-                color="primary"
-                :content="`↑${item.torrent_info?.seeders}`"
-                inline
-                size="small"
-              />
-              <VBadge
-                v-if="
-                  item.torrent_info?.downloadvolumefactor !== 1
-                    || item.torrent_info?.uploadvolumefactor !== 1
-                "
+                v-if="item.torrent_info?.downloadvolumefactor !== 1 || item.torrent_info?.uploadvolumefactor !== 1"
                 :content="item.torrent_info?.volume_factor"
                 inline
                 size="small"

src/components/cards/TorrentItem.vue

@@ -5,7 +5,7 @@ import { useConfirm } from 'vuetify-use-dialog'
 import { formatFileSize } from '@/@core/utils/formatters'
 import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
-import type { Context } from '@/api/types'
+import type { Context, MediaInfo, TorrentInfo } from '@/api/types'
 
 // 输入参数
 const props = defineProps({
@@ -33,20 +33,20 @@ const meta = ref(props.torrent?.meta_info)
 // 站点图标
 const siteIcon = ref('')
 
+// 存储是否已经下载过的记录
+const downloaded = ref<String[]>([])
+
 // 查询站点图标
 async function getSiteIcon() {
   try {
     siteIcon.value = (await api.get(`site/icon/${torrent?.value?.site}`)).data.icon
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
 
 // 询问并添加下载
-async function handleAddDownload(_site: any = undefined,
-  _media: any = undefined,
-  _torrent: any = undefined) {
+async function handleAddDownload(_site: any = undefined, _media: any = undefined, _torrent: any = undefined) {
   if (!_media || !_torrent || !_site) {
     _site = torrent.value?.site_name
     _media = media.value
@@ -56,24 +56,15 @@ async function handleAddDownload(_site: any = undefined,
   const isConfirmed = await createConfirm({
     title: '确认',
     content: `是否确认下载【${_site}】${_torrent?.title} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
   })
 
-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return
 
   addDownload(_media, _torrent)
 }
 
 // 添加下载
-async function addDownload(_media: any, _torrent: any) {
+async function addDownload(_media: MediaInfo, _torrent: TorrentInfo) {
   startNProgress()
   try {
     const result: { [key: string]: any } = await api.post('download/', {
@@ -84,13 +75,12 @@ async function addDownload(_media: any, _torrent: any) {
     if (result.success) {
       // 添加下载成功
       $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
-    }
-    else {
+      downloaded.value.push(_torrent?.enclosure || '')
+    } else {
       // 添加下载失败
       $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败！`)
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
   doneNProgress()
@@ -108,14 +98,10 @@ async function downloadTorrentFile() {
 
 // 促销Chip类
 function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
-  if (downloadVolume === 0)
-    return 'text-white bg-lime-500'
-  else if (downloadVolume < 1)
-    return 'text-white bg-green-500'
-  else if (uploadVolume !== 1)
-    return 'text-white bg-sky-500'
-  else
-    return 'text-white bg-gray-500'
+  if (downloadVolume === 0) return 'text-white bg-lime-500'
+  else if (downloadVolume < 1) return 'text-white bg-green-500'
+  else if (uploadVolume !== 1) return 'text-white bg-sky-500'
+  else return 'text-white bg-gray-500'
 }
 
 // 装载时查询站点图标
@@ -125,16 +111,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <VListItem @click="handleAddDownload">
-    <template
-      v-if="!showMoreTorrents"
-      #prepend
-    >
-      <VAvatar
-        class="rounded"
-        variant="flat"
-        @click.stop="openTorrentDetail"
-      >
+  <VListItem @click="handleAddDownload" :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'flat'">
+    <template v-if="!showMoreTorrents" #prepend>
+      <VAvatar class="rounded" variant="flat" @click.stop="openTorrentDetail">
         <VImg :src="siteIcon" />
       </VAvatar>
     </template>
@@ -146,25 +125,11 @@ onMounted(() => {
     <VListItemSubtitle>
       {{ torrent?.description }}
     </VListItemSubtitle>
-    <div
-      v-if="torrent?.labels"
-      class="pt-2"
-    >
-      <VChip
-        v-if="torrent?.hit_and_run"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-black"
-      >
+    <div v-if="torrent?.labels" class="pt-2">
+      <VChip v-if="torrent?.hit_and_run" variant="elevated" size="small" class="me-1 mb-1 text-white bg-black">
         H&R
       </VChip>
-      <VChip
-        v-if="torrent?.freedate_diff"
-        variant="elevated"
-        color="secondary"
-        size="small"
-        class="me-1 mb-1"
-      >
+      <VChip v-if="torrent?.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
         {{ torrent?.freedate_diff }}
       </VChip>
       <VChip
@@ -177,51 +142,24 @@ onMounted(() => {
       >
         {{ label }}
       </VChip>
-      <VChip
-        v-if="meta?.edition"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-red-500"
-      >
+      <VChip v-if="meta?.edition" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
         {{ meta?.edition }}
       </VChip>
-      <VChip
-        v-if="meta?.resource_pix"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-red-500"
-      >
+      <VChip v-if="meta?.resource_pix" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
         {{ meta?.resource_pix }}
       </VChip>
-      <VChip
-        v-if="meta?.video_encode"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-orange-500"
-      >
+      <VChip v-if="meta?.video_encode" variant="elevated" size="small" class="me-1 mb-1 text-white bg-orange-500">
         {{ meta?.video_encode }}
       </VChip>
-      <VChip
-        v-if="torrent?.size"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-yellow-500"
-      >
+      <VChip v-if="torrent?.size" variant="elevated" size="small" class="me-1 mb-1 text-white bg-yellow-500">
         {{ formatFileSize(torrent?.size) }}
       </VChip>
-      <VChip
-        v-if="meta?.resource_team"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-cyan-500"
-      >
+      <VChip v-if="meta?.resource_team" variant="elevated" size="small" class="me-1 mb-1 text-white bg-cyan-500">
         {{ meta?.resource_team }}
       </VChip>
       <VChip
         v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
-        :class="
-          getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)
-        "
+        :class="getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
         variant="elevated"
         size="small"
         class="me-1 mb-1"
@@ -232,18 +170,10 @@ onMounted(() => {
     <template #append>
       <div class="me-n3">
         <IconBtn>
-          <VIcon
-            icon="mdi-dots-vertical"
-          />
-          <VMenu
-            activator="parent"
-            close-on-content-click
-          >
+          <VIcon icon="mdi-dots-vertical" />
+          <VMenu activator="parent" close-on-content-click>
             <VList>
-              <VListItem
-                variant="plain"
-                @click="openTorrentDetail()"
-              >
+              <VListItem variant="plain" @click="openTorrentDetail()">
                 <template #prepend>
                   <VIcon icon="mdi-information" />
                 </template>

src/components/dialog/ImportCodeDialog.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+// 输入参数
+const props = defineProps({
+  title: String,
+})
+
+// 定义事件
+const emit = defineEmits(['update:modelValue', 'close'])
+
+// 代码
+const codeString = ref('')
+
+// 导入
+function handleImport() {
+  emit('update:modelValue', codeString.value)
+  emit('close')
+}
+</script>
+
+<template>
+  <VDialog width="40rem" scrollable max-height="85vh">
+    <VCard :title="props.title" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText class="pt-2">
+        <VTextarea v-model="codeString" />
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn variant="elevated" @click="handleImport" prepend-icon="mdi-import" class="px-5 me-3"> 导入 </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/ProgressDialog.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps({
+  value: Number,
+  text: String,
+})
+</script>
+<template>
+  <!-- 手动整理进度框 -->
+  <VDialog :scrim="false" width="25rem">
+    <VCard color="primary">
+      <VCardText class="text-center">
+        {{ props.text }}
+        <VProgressLinear color="white" class="mb-0 mt-1" :model-value="props.value" indeterminate />
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/ReorganizeDialog.vue

@@ -1,9 +1,15 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
-import TmdbSelectorCard from '../cards/TmdbSelectorCard.vue'
+import MediaIdSelector from '../misc/MediaIdSelector.vue'
 import store from '@/store'
 import api from '@/api'
 import { numberValidator } from '@/@validators'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from './ProgressDialog.vue'
+import { MediaDirectory } from '@/api/types'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const props = defineProps({
@@ -15,19 +21,22 @@ const props = defineProps({
 // 定义事件
 const emit = defineEmits(['done', 'close'])
 
-// 生成1到50季的下拉框选项
+// 生成1到100季的下拉框选项
 const seasonItems = ref(
-  Array.from({ length: 51 }, (_, i) => i).map(item => ({
+  Array.from({ length: 101 }, (_, i) => i).map(item => ({
     title: `第 ${item} 季`,
     value: item,
   })),
 )
 
+// 当前识别类型
+const mediaSource = ref('themoviedb')
+
 // 提示框
 const $toast = useToast()
 
 // TMDB选择对话框
-const tmdbSelectorDialog = ref(false)
+const mediaSelectorDialog = ref(false)
 
 // 加载进度SSE
 const progressEventSource = ref<EventSource>()
@@ -45,8 +54,9 @@ const progressValue = ref(0)
 const transferForm = reactive({
   logid: 0,
   path: '',
-  target: props.target ?? '',
+  target: props.target ?? null,
   tmdbid: null,
+  doubanid: null,
   season: null,
   type_name: '',
   transfer_type: '',
@@ -55,12 +65,32 @@ const transferForm = reactive({
   episode_part: '',
   episode_offset: null,
   min_filesize: 0,
-
+  scrape: false,
 })
 
+// 所有媒体库目录
+const libraryDirectories = ref<MediaDirectory[]>([])
+
+// 目的目录下拉框
+const targetDirectories = computed(() => {
+  const directories = libraryDirectories.value.map(item => item.path)
+  return [...new Set(directories)]
+})
+
+// 监听输入变化
 watchEffect(() => {
   transferForm.path = props.path ?? ''
-  transferForm.target = props.target ?? ''
+  transferForm.target = props.target ?? null
+})
+
+// 监听目的路径变化，自动查询目录的刮削配置
+watch(transferForm, async () => {
+  if (transferForm.target) {
+    const directory = libraryDirectories.value.find(item => item.path === transferForm.target)
+    if (directory) {
+      transferForm.scrape = directory.scrape ?? false
+    }
+  }
 })
 
 // 使用SSE监听加载进度
@@ -72,7 +102,7 @@ function startLoadingProgress() {
   progressEventSource.value = new EventSource(
     `${import.meta.env.VITE_API_BASE_URL}system/progress/filetransfer?token=${token}`,
   )
-  progressEventSource.value.onmessage = (event) => {
+  progressEventSource.value.onmessage = event => {
     const progress = JSON.parse(event.data)
     if (progress) {
       progressText.value = progress.text
@@ -89,8 +119,7 @@ function stopLoadingProgress() {
 // 整理文件
 // eslint-disable-next-line sonarjs/cognitive-complexity
 async function transfer() {
-  if (!props.logids && !props.path)
-    return
+  if (!props.logids && !props.path) return
 
   // 显示进度条
   progressDialog.value = true
@@ -100,32 +129,33 @@ async function transfer() {
   if (props.path) {
     // 文件整理
     try {
-      const result: { [key: string]: any } = await api.post('transfer/manual', {}, {
-        params: transferForm,
-      })
+      const result: { [key: string]: any } = await api.post(
+        'transfer/manual',
+        {},
+        {
+          params: transferForm,
+        },
+      )
       // 显示结果
-      if (result.success)
-        $toast.success(`${props.path} 整理完成！`)
-
-      else
-        $toast.error(`${props.path} 整理失败：${result.message}！`)
-    }
-    catch (e) {
+      if (result.success) $toast.success(`${props.path} 整理完成！`)
+      else $toast.error(`${props.path} 整理失败：${result.message}！`)
+    } catch (e) {
       console.log(e)
     }
-  }
-  else if (props.logids) {
+  } else if (props.logids) {
     // 日志整理
     for (const logid of props.logids) {
       transferForm.logid = logid
       try {
-        const result: { [key: string]: any } = await api.post('transfer/manual', {}, {
-          params: transferForm,
-        })
-        if (!result.success)
-          $toast.error(`历史记录 ${logid} 重新整理失败：${result.message}！`)
-      }
-      catch (e) {
+        const result: { [key: string]: any } = await api.post(
+          'transfer/manual',
+          {},
+          {
+            params: transferForm,
+          },
+        )
+        if (!result.success) $toast.error(`历史记录 ${logid} 重新整理失败：${result.message}！`)
+      } catch (e) {
         console.log(e)
       }
     }
@@ -138,35 +168,56 @@ async function transfer() {
   // 重新加载
   emit('done')
 }
+
+// 调用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 {
+    const result: { [key: string]: any } = await api.get('system/setting/LibraryDirectories')
+    if (result.success && result.data?.value) {
+      libraryDirectories.value = result.data.value
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+onMounted(() => {
+  loadSystemSettings()
+  loadLibraryDirectories()
+})
 </script>
 
 <template>
-  <VDialog
-    scrollable
-    max-width="60rem"
-  >
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
     <VCard
       :title="`${props.path ? `整理 - ${props.path}` : `整理 - 共 ${props.logids?.length} 条记录`}`"
       class="rounded-t"
     >
       <DialogCloseBtn @click="emit('close')" />
-      <VCardText class="pt-2">
+      <VDivider />
+      <VCardText>
         <VForm @submit.prevent="() => {}">
           <VRow>
-            <VCol
-              cols="12"
-              md="8"
-            >
-              <VTextField
+            <VCol cols="12" md="8">
+              <VCombobox
                 v-model="transferForm.target"
+                :items="targetDirectories"
                 label="目的路径"
                 placeholder="留空自动"
+                hint="留空将自动匹配目标路径"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VSelect
                 v-model="transferForm.transfer_type"
                 label="整理方式"
@@ -183,34 +234,42 @@ async function transfer() {
             </VCol>
           </VRow>
           <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VSelect
                 v-model="transferForm.type_name"
                 label="类型"
-                :items="[{ title: '自动', value: '' }, { title: '电影', value: '电影' }, { title: '电视剧', value: '电视剧' }]"
+                :items="[
+                  { title: '自动', value: '' },
+                  { title: '电影', value: '电影' },
+                  { title: '电视剧', value: '电视剧' },
+                ]"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VTextField
+                v-if="mediaSource === 'themoviedb'"
                 v-model="transferForm.tmdbid"
                 :disabled="transferForm.type_name === ''"
-                label="TMDBID"
+                label="TheMovieDb编号"
                 placeholder="留空自动识别"
                 :rules="[numberValidator]"
                 append-inner-icon="mdi-magnify"
-                @click:append-inner="tmdbSelectorDialog = true"
+                hint="点击图标按名称搜索，留空将自动重新识别"
+                @click:append-inner="mediaSelectorDialog = true"
+              />
+              <VTextField
+                v-else
+                v-model="transferForm.doubanid"
+                :disabled="transferForm.type_name === ''"
+                label="豆瓣编号"
+                placeholder="留空自动识别"
+                :rules="[numberValidator]"
+                append-inner-icon="mdi-magnify"
+                hint="点击图标按名称搜索，留空将自动重新识别"
+                @click:append-inner="mediaSelectorDialog = true"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VSelect
                 v-show="transferForm.type_name === '电视剧'"
                 v-model.number="transferForm.season"
@@ -225,6 +284,7 @@ async function transfer() {
                 v-model="transferForm.episode_format"
                 label="集数定位"
                 placeholder="使用{ep}定位集数"
+                hint="使用{ep}定位文件名中的集数部分，其余相同部分直接填写，不同部分使用{a}进行忽略，例如：{a}葬送的芙莉莲_Sousou no Frieren 第{ep}话{b}"
               />
             </VCol>
             <VCol cols="12" md="4">
@@ -232,6 +292,7 @@ async function transfer() {
                 v-model="transferForm.episode_detail"
                 label="指定集数"
                 placeholder="起始集,终止集，如1或1,2"
+                hint="直接指定集数或者范围，格式：起始集,终止集，如1或1,2"
               />
             </VCol>
             <VCol cols="12" md="4">
@@ -239,6 +300,7 @@ async function transfer() {
                 v-model="transferForm.episode_part"
                 label="指定Part"
                 placeholder="如part1"
+                hint="指定集数的Part，如part1"
               />
             </VCol>
             <VCol cols="12" md="4">
@@ -246,6 +308,7 @@ async function transfer() {
                 v-model.number="transferForm.episode_offset"
                 label="集数偏移"
                 placeholder="如-10"
+                hint="对集数进行偏移运算，如-10表示文件名中的集数减10为整理后集数"
               />
             </VCol>
             <VCol cols="12" md="4">
@@ -254,53 +317,37 @@ async function transfer() {
                 label="最小文件大小（MB）"
                 :rules="[numberValidator]"
                 placeholder="0"
+                hint="最小文件大小，小于此大小的文件将被忽略不进行整理"
               />
             </VCol>
           </VRow>
+          <VRow>
+            <VCol cols="12" md="6">
+              <VSwitch v-model="transferForm.scrape" label="刮削元数据" hint="整理完成后自动刮削元数据" />
+            </VCol>
+          </VRow>
         </VForm>
       </VCardText>
-      <VCardActions>
-        <VBtn depressed @click="emit('close')">
-          取消
-        </VBtn>
+      <VCardActions class="pt-3">
         <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="transfer"
-        >
-          开始整理
-        </VBtn>
+        <VBtn variant="elevated" @click="transfer" prepend-icon="mdi-arrow-right-bold" class="px-5"> 开始整理 </VBtn>
       </VCardActions>
     </VCard>
     <!-- 手动整理进度框 -->
-    <VDialog
-      v-model="progressDialog"
-      :scrim="false"
-      width="25rem"
-    >
-      <VCard
-        color="primary"
-      >
-        <VCardText class="text-center">
-          {{ progressText }}
-          <VProgressLinear
-            v-if="progressValue"
-            color="white"
-            class="mb-0 mt-1"
-            :model-value="progressValue"
-          />
-        </VCardText>
-      </VCard>
-    </VDialog>
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" :value="progressValue" />
     <!-- TMDB ID搜索框 -->
-    <VDialog
-      v-model="tmdbSelectorDialog"
-      width="40rem"
-      scrollable
-    >
-      <TmdbSelectorCard
+    <VDialog v-model="mediaSelectorDialog" width="40rem" scrollable max-height="85vh">
+      <MediaIdSelector
+        v-if="mediaSource === 'themoviedb'"
         v-model="transferForm.tmdbid"
-        @close="tmdbSelectorDialog = false"
+        @close="mediaSelectorDialog = false"
+        :type="mediaSource"
+      />
+      <MediaIdSelector
+        v-else
+        v-model="transferForm.doubanid"
+        @close="mediaSelectorDialog = false"
+        :type="mediaSource"
       />
     </VDialog>
   </VDialog>

src/components/dialog/SiteAddEditDialog.vue

@@ -4,6 +4,14 @@ import type { Site } from '@/api/types'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import { numberValidator, requiredValidator } from '@/@validators'
 import api from '@/api'
+import { useDisplay } from 'vuetify'
+import { useConfirm } from 'vuetify-use-dialog'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 确认框
+const createConfirm = useConfirm()
 
 // 输入参数
 const props = defineProps({
@@ -40,7 +48,7 @@ const statusItems = [
 
 // 生成1到50的优先级下拉框选项
 const priorityItems = ref(
-  Array.from({ length: 50 }, (_, i) => i + 1).map(item => ({
+  Array.from({ length: 100 }, (_, i) => i + 1).map(item => ({
     title: item,
     value: item,
   })),
@@ -48,8 +56,7 @@ const priorityItems = ref(
 
 // 监控输入参数
 watchEffect(async () => {
-  if (props.siteid)
-    fetchSiteInfo()
+  if (props.siteid) fetchSiteInfo()
 })
 
 // 查询站点信息
@@ -58,27 +65,24 @@ async function fetchSiteInfo() {
     siteForm.value = await api.get(`site/${props.siteid}`)
     siteForm.value.proxy = siteForm.value.proxy === 1
     siteForm.value.render = siteForm.value.render === 1
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
 
 // 调用API 新增站点
 async function addSite() {
-  if (!siteForm.value?.url)
-    return
+  if (!siteForm.value?.url) return
   startNProgress()
   try {
     const result: { [key: string]: string } = await api.post('site/', siteForm.value)
     if (result.success) {
       $toast.success('新增站点成功')
       emit('save')
+    } else {
+      $toast.error(`新增站点失败：${result.message}`)
     }
-
-    else { $toast.error(`新增站点失败：${result.message}`) }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
   doneNProgress()
@@ -86,14 +90,18 @@ async function addSite() {
 
 // 调用API删除站点信息
 async function deleteSiteInfo() {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认删除站点？`,
+  })
+
+  if (!isConfirmed) return
+
   try {
     const result: { [key: string]: any } = await api.delete(`site/${siteForm.value?.id}`)
-    if (result.success)
-      emit('remove')
-
+    if (result.success) emit('remove')
     else $toast.error(`${siteForm.value?.name} 删除失败：${result.message}`)
-  }
-  catch (error) {
+  } catch (error) {
     $toast.error(`${siteForm.value?.name} 删除失败！`)
     console.error(error)
   }
@@ -107,10 +115,10 @@ async function updateSiteInfo() {
     if (result.success) {
       $toast.success(`${siteForm.value?.name} 更新成功！`)
       emit('save')
+    } else {
+      $toast.error(`${siteForm.value?.name} 更新失败：${result.message}`)
     }
-    else { $toast.error(`${siteForm.value?.name} 更新失败：${result.message}`) }
-  }
-  catch (error) {
+  } catch (error) {
     $toast.error(`${siteForm.value?.name} 更新失败！`)
     console.error(error)
   }
@@ -119,152 +127,135 @@ async function updateSiteInfo() {
 </script>
 
 <template>
-  <VDialog
-    scrollable
-    max-width="60rem"
-  >
+  <VDialog scrollable :close-on-back="false" persistent eager max-width="50rem" :fullscreen="!display.mdAndUp.value">
     <VCard
       :title="`${props.oper === 'add' ? '新增' : '编辑'}站点${props.oper !== 'add' ? ` - ${siteForm.name}` : ''}`"
       class="rounded-t"
     >
       <DialogCloseBtn @click="emit('close')" />
-      <VCardText class="pt-2">
+      <VDivider />
+      <VCardText>
         <VForm @submit.prevent="() => {}">
           <VRow>
-            <VCol
-              cols="12"
-              md="6"
-            >
+            <VCol cols="12" md="6">
               <VTextField
                 v-model="siteForm.url"
                 label="站点地址"
                 :rules="[requiredValidator]"
+                hint="格式：http://www.example.com/"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="3"
-            >
+            <VCol cols="6" md="3">
               <VSelect
                 v-model="siteForm.pri"
                 label="优先级"
                 :items="priorityItems"
                 :rules="[requiredValidator]"
+                hint="站点资源下载优先级，优先级数字越小越优先下载"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="3"
-            >
-              <VSelect
-                v-model="siteForm.is_active"
-                :items="statusItems"
-                label="状态"
-              />
+            <VCol cols="6" md="3">
+              <VSelect v-model="siteForm.is_active" :items="statusItems" label="状态" />
             </VCol>
           </VRow>
           <VRow>
-            <VCol cols="12">
+            <VCol cols="12" md="9">
               <VTextField
                 v-model="siteForm.rss"
                 label="RSS地址"
+                hint="订阅模式为站点RSS时，将会使用此地址获取站点种子资源，该地址一般会自动获取，也可手动补充"
               />
             </VCol>
+            <VCol cols="12" md="3">
+              <VTextField v-model="siteForm.timeout" label="超时时间（秒）" hint="站点请求超时时间，为空将使用默认值" />
+            </VCol>
             <VCol cols="12">
               <VTextarea
                 v-model="siteForm.cookie"
                 label="站点Cookie"
+                hint="浏览器打开站点首页，打开开发人员工具，刷新页面后在网络选项中找到首页地址，在请求头中获取Cookie信息"
               />
             </VCol>
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="siteForm.token"
+                label="请求头（Authorization）"
+                hint="在开发人员工具，网络请求头中获取Authorization，仅个别站点需要"
+              />
+            </VCol>
+            <VCol cols="12" md="6">
+              <VTextField v-model="siteForm.apikey" label="令牌（API Key）" hint="站点的访问API Key，仅个别站点需要" />
+            </VCol>
             <VCol cols="12">
               <VTextField
                 v-model="siteForm.ua"
                 label="站点User-Agent"
+                hint="在开发人员工具，网络请求头中获取User-Agent信息，需与站点Cookie配套使用"
               />
             </VCol>
           </VRow>
           <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VTextField
                 v-model="siteForm.limit_interval"
                 label="单位周期（秒）"
                 :rules="[numberValidator]"
+                hint="设定站点限流的单位周期，单位为秒，0为不限流"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VTextField
                 v-model="siteForm.limit_count"
-                label="访问次数"
+                label="周期内访问次数"
                 :rules="[numberValidator]"
+                hint="设定单位周期内站点允许的访问次数，0为不限制"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VTextField
                 v-model="siteForm.limit_seconds"
                 label="访问间隔（秒）"
                 :rules="[numberValidator]"
+                hint="设定单位周期内每次站点访问需间隔时间，单位为秒，0为不限制"
               />
             </VCol>
           </VRow>
           <VRow>
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <VSwitch
-                v-model="siteForm.proxy"
-                label="代理"
-              />
+            <VCol cols="12" md="6">
+              <VSwitch v-model="siteForm.proxy" label="代理" hint="站点是否需要代理访问，需要设置好代理服务器信息" />
             </VCol>
-            <VCol
-              cols="12"
-              md="6"
-            >
+            <VCol cols="12" md="6">
               <VSwitch
                 v-model="siteForm.render"
                 label="仿真"
+                hint="站点是否需要使用浏览器模拟访问，开启可以一定程度上提升连通性，但会大大增加站点请求时间"
               />
             </VCol>
           </VRow>
         </VForm>
       </VCardText>
-      <VCardActions>
-        <VBtn
-          v-if="props.oper === 'add'"
-          @click="emit('close')"
-        >
-          取消
-        </VBtn>
-        <VBtn
-          v-else
-          color="error"
-          @click="deleteSiteInfo"
-        >
+      <VCardActions class="pt-3">
+        <VBtn v-if="props.oper !== 'add'" color="error" @click="deleteSiteInfo" variant="outlined" class="me-3">
           删除
         </VBtn>
         <VSpacer />
         <VBtn
           v-if="props.oper === 'add'"
           color="primary"
-          variant="tonal"
+          variant="elevated"
           @click="addSite"
+          prepend-icon="mdi-plus"
+          class="px-5"
         >
           新增
         </VBtn>
         <VBtn
           v-else
           color="primary"
-          variant="tonal"
+          variant="elevated"
           @click="updateSiteInfo"
+          prepend-icon="mdi-content-save"
+          class="px-5"
         >
           保存
         </VBtn>

src/components/dialog/SubscribeEditDialog.vue

@@ -0,0 +1,412 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toast-notification'
+import { numberValidator } from '@/@validators'
+import api from '@/api'
+import type { MediaDirectory, Site, Subscribe } from '@/api/types'
+import { useDisplay } from 'vuetify'
+import { useConfirm } from 'vuetify-use-dialog'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 确认框
+const createConfirm = useConfirm()
+
+// 输入参数
+const props = defineProps({
+  subid: Number,
+  default: Boolean,
+  type: String,
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['remove', 'save', 'close'])
+
+// 站点数据列表
+const siteList = ref<Site[]>([])
+
+// 下载目录列表
+const downloadDirectories = ref<MediaDirectory[]>([])
+
+// 站点选择下载框
+const selectSitesOptions = ref<{ [key: number]: string }[]>([])
+
+// 订阅编辑表单
+const subscribeForm = ref<Subscribe>({
+  id: props.subid ?? 0,
+  keyword: '',
+  quality: '',
+  resolution: '',
+  effect: '',
+  include: '',
+  exclude: '',
+  total_episode: 0,
+  start_episode: 0,
+  best_version: 0,
+  search_imdbid: 0,
+  sites: [],
+  type: '',
+  name: '',
+  year: '',
+  tmdbid: 0,
+  state: '',
+  last_update: '',
+  username: '',
+  current_priority: 0,
+  save_path: '',
+  date: '',
+  show_edit_dialog: false,
+})
+
+// 提示框
+const $toast = useToast()
+
+// 调用API修改订阅
+async function updateSubscribeInfo() {
+  try {
+    const result: { [key: string]: any } = await api.put('subscribe/', subscribeForm.value)
+    // 提示
+    if (result.success) {
+      $toast.success(`${subscribeForm.value.name} 更新成功！`)
+      // 通知父组件刷新
+      emit('save')
+    } else {
+      $toast.error(`${subscribeForm.value.name} 更新失败：${result.message}！`)
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+// 设置用户设置的默认订阅规则
+async function saveDefaultSubscribeConfig() {
+  try {
+    let subscribe_config_url = ''
+    if (props.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
+    else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
+
+    const result: { [key: string]: any } = await api.post(subscribe_config_url, subscribeForm.value)
+    if (result.success) $toast.success(`${props.type}订阅默认规则保存成功`)
+    else $toast.error(`${props.type}订阅默认规则保存失败！`)
+
+    // 通知父组件刷新
+    emit('save')
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 查询用户设置的默认订阅规则
+async function queryDefaultSubscribeConfig() {
+  try {
+    let subscribe_config_url = ''
+    if (props.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
+    else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
+
+    const result: { [key: string]: any } = await api.get(subscribe_config_url)
+
+    if (result.data.value) subscribeForm.value = result.data?.value ?? ''
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 获取站点列表数据
+async function loadSites() {
+  try {
+    const data: Site[] = await api.get('site/rss')
+
+    // 过滤站点，只有启用的站点才显示
+    siteList.value = data.filter(item => item.is_active)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 获取站点列表选择框数据
+async function getSiteList() {
+  // 加载订阅站点列表
+  if (!siteList.value.length) await loadSites()
+
+  const maps = siteList.value.map(item => {
+    return {
+      title: item.name,
+      value: item.id,
+    }
+  })
+
+  selectSitesOptions.value = maps.flat()
+}
+
+// 获取订阅信息
+async function getSubscribeInfo() {
+  try {
+    const result: Subscribe = await api.get(`subscribe/${props.subid}`)
+    subscribeForm.value = result
+    subscribeForm.value.best_version = subscribeForm.value.best_version === 1
+    subscribeForm.value.search_imdbid = subscribeForm.value.search_imdbid === 1
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+// 删除订阅
+async function removeSubscribe() {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认取消订阅？`,
+  })
+
+  if (!isConfirmed) return
+  try {
+    const result: { [key: string]: any } = await api.delete(`subscribe/${props.subid}`)
+
+    if (result.success) {
+      // 通知父组件刷新
+      emit('remove')
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+// 查询下载目录
+async function loadDownloadDirectories() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/DownloadDirectories')
+    if (result.success && result.data?.value) {
+      downloadDirectories.value = result.data.value
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 保存目录下拉框
+const targetDirectories = computed(() => {
+  // 去重后的下载目录
+  const directories = downloadDirectories.value.map(item => item.path)
+  return [...new Set(directories)]
+})
+
+// 质量选择框数据
+const qualityOptions = ref([
+  {
+    title: '全部',
+    value: '',
+  },
+  {
+    title: '蓝光原盘',
+    value: 'Blu-?Ray.+VC-?1|Blu-?Ray.+AVC|UHD.+blu-?ray.+HEVC|MiniBD',
+  },
+  {
+    title: 'Remux',
+    value: 'Remux',
+  },
+  {
+    title: 'BluRay',
+    value: 'Blu-?Ray',
+  },
+  {
+    title: 'UHD',
+    value: 'UHD|UltraHD',
+  },
+  {
+    title: 'WEB-DL',
+    value: 'WEB-?DL|WEB-?RIP',
+  },
+  {
+    title: 'HDTV',
+    value: 'HDTV',
+  },
+  {
+    title: 'H265',
+    value: '[Hx].?265|HEVC',
+  },
+  {
+    title: 'H264',
+    value: '[Hx].?264|AVC',
+  },
+])
+
+// 分辨率选择框数据
+const resolutionOptions = ref([
+  {
+    title: '全部',
+    value: '',
+  },
+  {
+    title: '4k',
+    value: '4K|2160p|x2160',
+  },
+  {
+    title: '1080p',
+    value: '1080[pi]|x1080',
+  },
+  {
+    title: '720p',
+    value: '720[pi]|x720',
+  },
+])
+
+// 特效选择框数据
+const effectOptions = ref([
+  {
+    title: '全部',
+    value: '',
+  },
+  {
+    title: '杜比视界',
+    value: 'Dolby[\\s.]+Vision|DOVI|[\\s.]+DV[\\s.]+',
+  },
+  {
+    title: '杜比全景声',
+    value: 'Dolby[\\s.]*\\+?Atmos|Atmos',
+  },
+  {
+    title: 'HDR',
+    value: '[\\s.]+HDR[\\s.]+|HDR10|HDR10\\+',
+  },
+  {
+    title: 'SDR',
+    value: '[\\s.]+SDR[\\s.]+',
+  },
+])
+
+onMounted(() => {
+  loadDownloadDirectories()
+  getSiteList()
+  if (props.subid) getSubscribeInfo()
+  if (props.default) queryDefaultSubscribeConfig()
+})
+</script>
+
+<template>
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
+    <VCard
+      :title="`${
+        props.default
+          ? `${props.type}默认订阅规则`
+          : `编辑订阅 - ${subscribeForm.name} ${subscribeForm.season ? `第 ${subscribeForm.season} 季` : ''}`
+      }`"
+      class="rounded-t"
+    >
+      <VDivider />
+      <VCardText>
+        <DialogCloseBtn @click="emit('close')" />
+        <VForm @submit.prevent="() => {}">
+          <VRow>
+            <VCol cols="12" md="8">
+              <VTextField
+                v-if="!props.default"
+                v-model="subscribeForm.keyword"
+                label="搜索关键词"
+                hint="设定搜索关键词后，将使用此关键词搜索站点资源，否则自动使用themoviedb中的名称搜索"
+              />
+            </VCol>
+            <VCol v-if="subscribeForm.type === '电视剧'" cols="12" md="2">
+              <VTextField
+                v-model="subscribeForm.total_episode"
+                label="总集数"
+                :rules="[numberValidator]"
+                hint="手动设定总集数"
+              />
+            </VCol>
+            <VCol v-if="subscribeForm.type === '电视剧'" cols="12" md="2">
+              <VTextField
+                v-model="subscribeForm.start_episode"
+                label="开始集数"
+                :rules="[numberValidator]"
+                hint="只下载此集数及之后的集"
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="12" md="4">
+              <VSelect v-model="subscribeForm.quality" label="质量" :items="qualityOptions" />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VSelect v-model="subscribeForm.resolution" label="分辨率" :items="resolutionOptions" />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VSelect v-model="subscribeForm.effect" label="特效" :items="effectOptions" />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-model="subscribeForm.include"
+                label="包含（关键字、正则式）"
+                hint="支持正则表达式，多个关键字用 | 分隔表示或"
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-model="subscribeForm.exclude"
+                label="排除（关键字、正则式）"
+                hint="支持正则表达式，多个关键字用 | 分隔表示或"
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VSelect
+                v-model="subscribeForm.sites"
+                :items="selectSitesOptions"
+                chips
+                label="订阅站点"
+                multiple
+                hint="只订阅选中的订阅站点，不选则订阅所有可订阅站点"
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="12">
+              <VCombobox
+                v-model="subscribeForm.save_path"
+                :items="targetDirectories"
+                label="保存路径"
+                hint="指定该订阅的下载保存路径，留空自动使用设定的下载目录"
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="12" md="4">
+              <VSwitch
+                v-model="subscribeForm.best_version"
+                label="洗版"
+                hint="开启后不管媒体库是否存在，均会根据洗版优先级进行过滤下载，直到下载到了最高优先级的资源为止"
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VSwitch
+                v-model="subscribeForm.search_imdbid"
+                label="使用 ImdbID 搜索"
+                hint="开启后将使用 ImdbID 搜索资源，搜索结果更精确，但不是所有站点都支持"
+              />
+            </VCol>
+            <VCol v-if="props.default" cols="12" md="4">
+              <VSwitch
+                v-model="subscribeForm.show_edit_dialog"
+                label="订阅时编辑更多规则"
+                hint="开启后将在添加订阅后弹出编辑订阅的对话框，方便用户编辑订阅规则"
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+      <VCardActions class="pt-3">
+        <VBtn v-if="!props.default" color="error" @click="removeSubscribe" variant="outlined" class="me-3">
+          取消订阅
+        </VBtn>
+        <VSpacer />
+        <VBtn
+          variant="elevated"
+          @click=";`${props.default ? saveDefaultSubscribeConfig() : updateSubscribeInfo()}`"
+          prepend-icon="mdi-content-save"
+          class="px-5"
+        >
+          保存
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/SubscribeHistoryDialog.vue

@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import api from '@/api'
+import { Subscribe } from '@/api/types'
+import { formatDateDifference } from '@core/utils/formatters'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from './ProgressDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  type: String,
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'save'])
+
+// 订阅历史列表
+const historyList = ref<Subscribe[]>([])
+
+// 当前加载数据
+const currData = ref<Subscribe[]>([])
+
+// 当前页
+const currentPage = ref(1)
+
+// 每页数量
+const pageSize = ref(30)
+
+// 是否加载中
+const loading = ref(false)
+
+// 是否加载完成
+const isRefreshed = ref(false)
+
+// 进度框
+const progressDialog = ref(false)
+
+// 进度文字
+const progressText = ref('正在重新订阅...')
+
+// 调用API查询列表
+async function loadHistory({ done }: { done: any }) {
+  // 如果正在加载中，直接返回
+  if (loading.value) {
+    done('ok')
+    return
+  }
+
+  // 调用API查询列表
+  try {
+    // 设置加载中
+    loading.value = true
+    currData.value = await api.get(`subscribe/history/${props.type}`, {
+      params: {
+        page: currentPage.value,
+        count: pageSize.value,
+      },
+    })
+    // 标计为已请求完成
+    isRefreshed.value = true
+    if (currData.value.length === 0) {
+      // 如果没有数据，跳出
+      done('empty')
+    } else {
+      // 合并数据
+      historyList.value = [...historyList.value, ...currData.value]
+      // 页码+1
+      currentPage.value++
+      // 返回加载成功
+      done('ok')
+    }
+    // 取消加载中
+    loading.value = false
+  } catch (e) {
+    console.error(e)
+    // 返回加载失败
+    done('error')
+  }
+}
+
+// 重新订阅
+async function reSubscribe(item: Subscribe) {
+  if (item.type === '电影') progressText.value = `正在重新订阅 ${item.name} ...`
+  else progressText.value = `正在重新订阅 ${item.name} 第 ${item.season} 季 ...`
+  progressDialog.value = true
+  try {
+    const result: { [key: string]: any } = await api.post('subscribe', item)
+    if (result.success) {
+      emit('save')
+    }
+  } catch (e) {
+    console.error(e)
+  }
+  progressDialog.value = false
+}
+
+// 删除记录
+async function deleteHistory(item: Subscribe) {
+  try {
+    const result: { [key: string]: any } = await api.delete(`subscribe/history/${item.id}`)
+    if (result.success) {
+      historyList.value = historyList.value.filter(i => i.id !== item.id)
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+// 弹出菜单
+const dropdownItems = ref([
+  {
+    title: '重新订阅',
+    value: 1,
+    color: '',
+    props: {
+      prependIcon: 'mdi-redo',
+      click: reSubscribe,
+    },
+  },
+  {
+    title: '删除',
+    value: 2,
+    color: 'error',
+    props: {
+      prependIcon: 'mdi-delete',
+      click: deleteHistory,
+    },
+  },
+])
+</script>
+
+<template>
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
+    <VCard class="mx-auto" width="100%">
+      <VCardItem>
+        <VCardTitle>{{ props.type + '订阅历史' }}</VCardTitle>
+      </VCardItem>
+      <VDivider />
+      <DialogCloseBtn
+        @click="
+          () => {
+            emit('close')
+          }
+        "
+      />
+      <VList lines="two">
+        <VInfiniteScroll mode="intersect" side="end" :items="historyList" class="overflow-hidden" @load="loadHistory">
+          <template #loading>
+            <LoadingBanner />
+          </template>
+          <template #empty />
+          <template v-for="(item, i) in historyList" :key="i">
+            <VListItem>
+              <template #prepend>
+                <VImg
+                  height="75"
+                  width="50"
+                  :src="item.poster"
+                  aspect-ratio="2/3"
+                  class="object-cover rounded shadow ring-gray-500 me-3"
+                  cover
+                >
+                  <template #placeholder>
+                    <div class="w-full h-full">
+                      <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                    </div>
+                  </template>
+                </VImg>
+              </template>
+              <VListItemTitle v-if="item.type == '电视剧'">
+                {{ item.name }} <span class="text-sm">第 {{ item.season }} 季</span>
+              </VListItemTitle>
+              <VListItemTitle v-else>
+                {{ item.name }}
+              </VListItemTitle>
+              <VListItemSubtitle class="mt-2">{{ formatDateDifference(item.date) }}</VListItemSubtitle>
+              <VListItemSubtitle class="mt-2">{{ item.description }}</VListItemSubtitle>
+              <template #append>
+                <div class="me-n3">
+                  <IconBtn>
+                    <VIcon icon="mdi-dots-vertical" />
+                    <VMenu activator="parent" close-on-content-click>
+                      <VList>
+                        <VListItem
+                          v-for="(menu, i) in dropdownItems"
+                          :key="i"
+                          variant="plain"
+                          :base-color="menu.color"
+                          @click="menu.props.click(item)"
+                        >
+                          <template #prepend>
+                            <VIcon :icon="menu.props.prependIcon" />
+                          </template>
+                          <VListItemTitle v-text="menu.title" />
+                        </VListItem>
+                      </VList>
+                    </VMenu>
+                  </IconBtn>
+                </div>
+              </template>
+            </VListItem>
+          </template>
+        </VInfiniteScroll>
+      </VList>
+    </VCard>
+    <!-- 进度框 -->
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
+  </VDialog>
+</template>

src/components/filebrowser/FileList.vue

@@ -4,12 +4,13 @@ import type { PropType } from 'vue'
 import { useConfirm } from 'vuetify-use-dialog'
 import axios from 'axios'
 import { useToast } from 'vue-toast-notification'
-import ReorganizeForm from '../form/ReorganizeForm.vue'
+import ReorganizeDialog from '../dialog/ReorganizeDialog.vue'
 import { formatBytes } from '@core/utils/formatters'
 import type { Context, EndPoints, FileItem } from '@/api/types'
 import store from '@/store'
 import api from '@/api'
 import MediaInfoCard from '@/components/cards/MediaInfoCard.vue'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
 
 // 输入参数
 const inProps = defineProps({
@@ -74,14 +75,10 @@ const nameTestResult = ref<Context>()
 const nameTestDialog = ref(false)
 
 // 目录过滤
-const dirs = computed(() =>
-  items.value.filter(item => item.type === 'dir' && item.basename.includes(filter.value)),
-)
+const dirs = computed(() => items.value.filter(item => item.type === 'dir' && item.basename.includes(filter.value)))
 
 // 文件过滤
-const files = computed(() =>
-  items.value.filter(item => item.type === 'file' && item.basename.includes(filter.value)),
-)
+const files = computed(() => items.value.filter(item => item.type === 'file' && item.basename.includes(filter.value)))
 
 // 是否目录
 const isDir = computed(() => inProps.path?.endsWith('/'))
@@ -110,7 +107,7 @@ async function load() {
     method: inProps.endpoints?.list.method || 'get',
   }
   // 加载数据
-  items.value = await axiosInstance.value.request(config) ?? []
+  items.value = (await axiosInstance.value.request(config)) ?? []
   emit('loading', false)
   loading.value = false
 }
@@ -119,17 +116,7 @@ async function load() {
 async function deleteItem(item: FileItem) {
   const confirmed = await createConfirm({
     title: '确认',
-    content: `是否确认删除${
-                item.type === 'dir' ? '目录' : '文件'
-            } ${item.basename}？`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    cancellationButtonProps: {
-      variant: 'tonal',
-    },
+    content: `是否确认删除${item.type === 'dir' ? '目录' : '文件'} ${item.basename}？`,
   })
 
   if (confirmed) {
@@ -158,8 +145,7 @@ function changePath(_path: string) {
 
 // 新窗口中下载文件
 function download(path: string) {
-  if (!path)
-    return
+  if (!path) return
   const token = store.state.auth.token
   const url_path = inProps.endpoints?.download.url
     .replace(/{storage}/g, storage.value)
@@ -171,8 +157,7 @@ function download(path: string) {
 
 // 显示图片
 function getImgLink(path: string) {
-  if (!path)
-    return ''
+  if (!path) return ''
   const token = store.state.auth.token
   const url_path = inProps.endpoints?.image.url
     .replace(/{storage}/g, storage.value)
@@ -258,15 +243,32 @@ async function recognize(path: string) {
     })
     // 关闭进度条
     progressDialog.value = false
-    if (!nameTestResult.value)
-      $toast.error(`${path} 识别失败！`)
+    if (!nameTestResult.value) $toast.error(`${path} 识别失败！`)
     nameTestDialog.value = !!nameTestResult.value?.meta_info?.name
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
 
+// 调用API刮削
+async function scrape(path: string) {
+  try {
+    // 显示进度条
+    progressDialog.value = true
+    progressText.value = `正在刮削 ${path} ...`
+    const result: { [key: string]: any } = await api.get('media/scrape', {
+      params: {
+        path,
+      },
+    })
+    // 关闭进度条
+    progressDialog.value = false
+    if (!result.success) $toast.error(result.message)
+    else $toast.success(`${path}削刮完成！`)
+  } catch (error) {
+    console.error(error)
+  }
+}
 // 弹出菜单
 const dropdownItems = ref([
   {
@@ -278,9 +280,20 @@ const dropdownItems = ref([
         recognize(_item.path || '')
       },
     },
-  }, {
-    title: '重命名',
+  },
+  {
+    title: '刮削',
     value: 2,
+    props: {
+      prependIcon: 'mdi-auto-fix',
+      click: (_item: FileItem) => {
+        scrape(_item.path || '')
+      },
+    },
+  },
+  {
+    title: '重命名',
+    value: 3,
     props: {
       prependIcon: 'mdi-rename',
       click: showRenmae,
@@ -288,7 +301,7 @@ const dropdownItems = ref([
   },
   {
     title: '整理',
-    value: 3,
+    value: 4,
     props: {
       prependIcon: 'mdi-folder-arrow-right',
       click: showTransfer,
@@ -296,7 +309,7 @@ const dropdownItems = ref([
   },
   {
     title: '删除',
-    value: 4,
+    value: 5,
     props: {
       prependIcon: 'mdi-delete-outline',
       color: 'error',
@@ -312,159 +325,6 @@ onMounted(() => {
 
 <template>
   <VCard class="d-flex flex-column">
-    <VCardText
-      v-if="loading"
-      class="text-center flex flex-col items-center"
-    >
-      <VProgressCircular
-        size="48"
-        indeterminate
-        color="primary"
-      />
-    </VCardText>
-    <VCardText
-      v-if="!path"
-      class="grow d-flex justify-center align-center grey--text"
-    >
-      选择目录或文件
-    </VCardText>
-    <VCardText
-      v-else-if="isFile && !isImage"
-      class="text-center break-all"
-    >
-      <strong>{{ items[0]?.name }}</strong><br>
-      大小：{{ formatBytes(items[0]?.size || 0) }}<br>
-      修改时间：{{ formatTime(items[0]?.modify_time || 0) }}
-    </VCardText>
-    <VCardText
-      v-else-if="isFile && isImage"
-      class="grow d-flex justify-center align-center"
-    >
-      <VImg :src="getImgLink(path)" max-width="100%" max-height="100%" />
-    </VCardText>
-    <VCardText v-else-if="dirs.length || files.length" class="p-0">
-      <VList v-if="dirs.length" subheader>
-        <VListSubheader>目录</VListSubheader>
-        <VListItem
-          v-for="(item, index) in dirs"
-          :key="index"
-          class="px-3 pe-1"
-          @click="changePath(item.path)"
-        >
-          <template #prepend>
-            <VIcon icon="mdi-folder-outline" />
-          </template>
-          <VListItemTitle v-text="item.name" />
-          <template #append>
-            <IconBtn class="d-sm-none">
-              <VIcon
-                icon="mdi-dots-vertical"
-              />
-              <VMenu
-                activator="parent"
-                close-on-content-click
-              >
-                <VList>
-                  <VListItem
-                    v-for="(menu, i) in dropdownItems"
-                    :key="i"
-                    variant="plain"
-                    :base-color="menu.props.color"
-                    @click="menu.props.click(item)"
-                  >
-                    <template #prepend>
-                      <VIcon :icon="menu.props.prependIcon" />
-                    </template>
-                    <VListItemTitle v-text="menu.title" />
-                  </VListItem>
-                </VList>
-              </VMenu>
-            </IconBtn>
-            <IconBtn class="d-none d-sm-block" @click.stop="recognize(item.path)">
-              <VIcon icon="mdi-text-recognition" />
-            </IconBtn>
-            <IconBtn class="d-none d-sm-block" @click.stop="showRenmae(item)">
-              <VIcon icon="mdi-rename" />
-            </IconBtn>
-            <IconBtn class="d-none d-sm-block" @click.stop="showTransfer(item)">
-              <VIcon icon="mdi-folder-arrow-right" />
-            </IconBtn>
-            <IconBtn class="d-none d-sm-block" @click.stop="deleteItem(item)">
-              <VIcon icon="mdi-delete-outline" />
-            </IconBtn>
-          </template>
-        </VListItem>
-      </VList>
-      <VDivider v-if="dirs.length && files.length" />
-      <VList v-if="files.length" subheader>
-        <VListSubheader>文件</VListSubheader>
-        <VListItem
-          v-for="(item, index) in files"
-          :key="index"
-          class="pl-3 pe-1"
-          @click="changePath(item.path)"
-        >
-          <template #prepend>
-            <VIcon v-if="inProps.icons" :icon="inProps.icons[item.extension.toLowerCase()] || inProps.icons?.other" />
-          </template>
-
-          <VListItemTitle v-text="item.name" />
-          <VListItemSubtitle> {{ formatBytes(item.size) }}</VListItemSubtitle>
-
-          <template #append>
-            <IconBtn class="d-sm-none">
-              <VIcon
-                icon="mdi-dots-vertical"
-              />
-              <VMenu
-                activator="parent"
-                close-on-content-click
-              >
-                <VList>
-                  <VListItem
-                    v-for="(menu, i) in dropdownItems"
-                    :key="i"
-                    variant="plain"
-                    :base-color="menu.props.color"
-                    @click="menu.props.click(item)"
-                  >
-                    <template #prepend>
-                      <VIcon :icon="menu.props.prependIcon" />
-                    </template>
-                    <VListItemTitle v-text="menu.title" />
-                  </VListItem>
-                </VList>
-              </VMenu>
-            </IconBtn>
-            <IconBtn class="d-none d-sm-block" @click.stop="recognize(item.path)">
-              <VIcon icon="mdi-text-recognition" />
-            </IconBtn>
-            <IconBtn class="d-none d-sm-block" @click.stop="showRenmae(item)">
-              <VIcon icon="mdi-rename" />
-            </IconBtn>
-            <IconBtn class="d-none d-sm-block" @click.stop="showTransfer(item)">
-              <VIcon icon="mdi-folder-arrow-right" />
-            </IconBtn>
-            <IconBtn class="d-none d-sm-block" @click.stop="deleteItem(item)">
-              <VIcon icon="mdi-delete-outline" />
-            </IconBtn>
-          </template>
-        </VListItem>
-      </VList>
-    </VCardText>
-    <VCardText
-      v-else-if="filter"
-      class="grow d-flex justify-center align-center grey--text py-5"
-    >
-      没有目录或文件
-    </VCardText>
-    <VCardText
-      v-else-if="!loading"
-      class="grow d-flex justify-center align-center grey--text py-5"
-    >
-      空目录
-    </VCardText>
-    <VDivider v-if="path" />
     <VToolbar v-if="!loading" density="compact" flat color="gray">
       <VTextField
         v-if="!isFile"
@@ -476,82 +336,150 @@ onMounted(() => {
         placeholder="搜索 ..."
         prepend-inner-icon="mdi-filter-outline"
         class="me-2"
+        rounded="0"
       />
       <VSpacer v-if="isFile" />
       <IconBtn v-if="isFile" @click="recognize(inProps.path || '')">
-        <VIcon color="primary">
-          mdi-text-recognition
-        </VIcon>
+        <VIcon color="primary"> mdi-text-recognition </VIcon>
       </IconBtn>
       <IconBtn v-if="isFile" @click="download(inProps.path || '')">
-        <VIcon color="primary">
-          mdi-download
-        </VIcon>
+        <VIcon color="primary"> mdi-download </VIcon>
       </IconBtn>
       <IconBtn v-if="!isFile" @click="load">
-        <VIcon color="primary">
-          mdi-refresh
-        </VIcon>
+        <VIcon color="primary"> mdi-refresh </VIcon>
       </IconBtn>
     </VToolbar>
+    <VCardText v-if="loading" class="text-center flex flex-col items-center">
+      <VProgressCircular size="48" indeterminate color="primary" />
+    </VCardText>
+    <VCardText v-if="!path" class="grow d-flex justify-center align-center grey--text"> 选择目录或文件 </VCardText>
+    <VCardText v-else-if="isFile && !isImage" class="text-center break-all">
+      <strong>{{ items[0]?.name }}</strong
+      ><br />
+      大小：{{ formatBytes(items[0]?.size || 0) }}<br />
+      修改时间：{{ formatTime(items[0]?.modify_time || 0) }}
+    </VCardText>
+    <VCardText v-else-if="isFile && isImage" class="grow d-flex justify-center align-center">
+      <VImg :src="getImgLink(path)" max-width="100%" max-height="100%" />
+    </VCardText>
+    <VCardText v-else-if="dirs.length || files.length" class="p-0">
+      <VList subheader>
+        <VVirtualScroll class="virtual-scroll-div" :items="[...dirs, ...files]">
+          <template #default="{ item }">
+            <VHover>
+              <template #default="hover">
+                <VListItem v-bind="hover.props" class="px-3 pe-1" @click="changePath(item.path)">
+                  <template #prepend>
+                    <VIcon
+                      v-if="inProps.icons && item.extension"
+                      :icon="inProps.icons[item.extension.toLowerCase()] || inProps.icons?.other"
+                    />
+                    <VIcon v-else icon="mdi-folder-outline" />
+                  </template>
+                  <VListItemTitle v-text="item.name" />
+                  <VListItemSubtitle v-if="item.size">
+                    {{ formatBytes(item.size) }}
+                  </VListItemSubtitle>
+                  <template #append>
+                    <IconBtn class="d-sm-none">
+                      <VIcon icon="mdi-dots-vertical" />
+                      <VMenu activator="parent" close-on-content-click>
+                        <VList>
+                          <VListItem
+                            v-for="(menu, i) in dropdownItems"
+                            :key="i"
+                            variant="plain"
+                            :base-color="menu.props.color"
+                            @click="menu.props.click(item)"
+                          >
+                            <template #prepend>
+                              <VIcon :icon="menu.props.prependIcon" />
+                            </template>
+                            <VListItemTitle v-text="menu.title" />
+                          </VListItem>
+                        </VList>
+                      </VMenu>
+                    </IconBtn>
+                    <span v-if="hover.isHovering" class="flex">
+                      <VTooltip text="识别">
+                        <template #activator="{ props }">
+                          <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="recognize(item.path)">
+                            <VIcon icon="mdi-text-recognition" />
+                          </IconBtn>
+                        </template>
+                      </VTooltip>
+                      <VTooltip text="刮削">
+                        <template #activator="{ props }">
+                          <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="scrape(item.path)">
+                            <VIcon icon="mdi-auto-fix" />
+                          </IconBtn>
+                        </template>
+                      </VTooltip>
+                      <VTooltip text="重命名">
+                        <template #activator="{ props }">
+                          <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="showRenmae(item)">
+                            <VIcon icon="mdi-rename" />
+                          </IconBtn>
+                        </template>
+                      </VTooltip>
+                      <VTooltip text="整理">
+                        <template #activator="{ props }">
+                          <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="showTransfer(item)">
+                            <VIcon icon="mdi-folder-arrow-right" />
+                          </IconBtn>
+                        </template>
+                      </VTooltip>
+                      <VTooltip text="删除">
+                        <template #activator="{ props }">
+                          <IconBtn v-bind="props" class="d-none d-sm-block" @click.stop="deleteItem(item)">
+                            <VIcon icon="mdi-delete-outline" color="error" />
+                          </IconBtn>
+                        </template>
+                      </VTooltip>
+                    </span>
+                  </template>
+                </VListItem>
+              </template>
+            </VHover>
+          </template>
+        </VVirtualScroll>
+      </VList>
+    </VCardText>
+    <VCardText v-else-if="filter" class="grow d-flex justify-center align-center grey--text py-5">
+      没有目录或文件
+    </VCardText>
+    <VCardText v-else-if="!loading" class="grow d-flex justify-center align-center grey--text py-5"> 空目录 </VCardText>
   </VCard>
   <!-- 重命名弹窗 -->
-  <VDialog
-    v-model="renamePopper"
-    max-width="50rem"
-  >
+  <VDialog v-if="renamePopper" v-model="renamePopper" max-width="50rem">
     <VCard title="重命名">
       <VCardText>
         <VTextField v-model="newName" label="名称" />
       </VCardText>
       <VCardActions>
-        <VBtn depressed @click="renamePopper = false">
-          取消
-        </VBtn>
+        <VBtn depressed @click="renamePopper = false"> 取消 </VBtn>
         <VSpacer />
-        <VBtn
-          :disabled="!newName"
-          depressed
-          variant="tonal"
-          @click="rename"
-        >
-          重命名
-        </VBtn>
+        <VBtn :disabled="!newName" depressed variant="tonal" @click="rename"> 重命名 </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>
   <!-- 文件整理弹窗 -->
-  <ReorganizeForm
+  <ReorganizeDialog
+    v-if="transferPopper"
     v-model="transferPopper"
     :path="currentItem?.path"
-    @done="transferPopper = false; load()"
+    @done="
+      () => {
+        transferPopper = false
+        load()
+      }
+    "
     @close="transferPopper = false"
   />
-  <!-- 手动整理进度框 -->
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          v-if="progressValue"
-          color="white"
-          class="mb-0 mt-1"
-          :model-value="progressValue"
-        />
-      </VCardText>
-    </VCard>
-  </VDialog>
+  <!-- 进度框 -->
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" :value="progressValue" />
   <!-- 识别结果对话框 -->
-  <VDialog
-    v-model="nameTestDialog"
-    width="50rem"
-  >
+  <VDialog v-if="nameTestDialog" v-model="nameTestDialog" width="50rem">
     <VCard>
       <DialogCloseBtn @click="nameTestDialog = false" />
       <VCardItem>
@@ -563,9 +491,20 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .v-card {
-    height: 100%;
+  block-size: 100%;
 }
-.v-toolbar{
+
+.v-toolbar {
   background: rgb(var(--v-table-header-background));
 }
+
+.virtual-scroll-div {
+  block-size: calc(100vh - 14rem);
+}
+
+@media (width <= 768px) {
+  .virtual-scroll-div {
+    block-size: calc(100vh - 17rem);
+  }
+}
 </style>

src/components/filebrowser/FileToolbar.vue

@@ -144,19 +144,31 @@ const sortIcon = computed(() => {
       </template>
     </VToolbarItems>
     <div class="flex-grow-1" />
-    <IconBtn @click="changeSort">
-      <VIcon :icon="sortIcon" />
-    </IconBtn>
-    <IconBtn v-if="pathSegments.length > 0" @click="goUp">
-      <VIcon icon="mdi-arrow-up-bold-outline" />
-    </IconBtn>
+    <VTooltip text="调整排序">
+      <template #activator="{ props }">
+        <IconBtn v-bind="props" @click="changeSort">
+          <VIcon :icon="sortIcon" />
+        </IconBtn>
+      </template>
+    </VTooltip>
+    <VTooltip text="返回上一级" v-if="pathSegments.length > 0">
+      <template #activator="{ props }">
+        <IconBtn v-bind="props" @click="goUp">
+          <VIcon icon="mdi-arrow-up-bold-outline" />
+        </IconBtn>
+      </template>
+    </VTooltip>
     <VDialog
       v-model="newFolderPopper"
       max-width="50rem"
     >
       <template #activator="{ props }">
-        <IconBtn title="新建文件夹" v-bind="props">
-          <VIcon icon="mdi-folder-plus-outline" />
+        <IconBtn v-bind="props">
+          <VTooltip text="新建文件夹">
+            <template #activator="{ props: _props }">
+              <VIcon v-bind="_props" icon="mdi-folder-plus-outline" />
+            </template>
+          </VTooltip>
         </IconBtn>
       </template>
       <VCard title="新建文件夹">

src/components/filebrowser/Tree.vue

@@ -1,203 +0,0 @@
-<script lang="ts" setup>
-import type { Axios } from 'axios'
-import type { EndPoints, FileItem } from '@/api/types'
-
-// 输入参数
-const props = defineProps({
-  icons: Object,
-  storage: String,
-  path: String,
-  endpoints: Object as PropType<EndPoints>,
-  axios: Object as PropType<Axios>,
-  refreshpending: Boolean,
-})
-
-// 对外事件
-const emit = defineEmits(['pathchanged', 'loading', 'refreshed'])
-
-// 变量
-const open = ref<string[]>([])
-// 活跃的文件夹
-const active = ref<string[]>([])
-// 内容
-const items = ref<FileItem[]>([])
-// 过滤
-const filter = ref('')
-
-// 方法
-function init() {
-  open.value = []
-  items.value = [{
-    type: 'dir',
-    path: '/',
-    basename: 'root',
-    extension: '',
-    name: 'root',
-    children: [],
-    size: 0,
-    modify_time: 0,
-  }]
-}
-
-// 调用API读取文件夹
-async function readFolder(item: FileItem) {
-  emit('loading', true)
-  const url = props.endpoints?.list.url
-    .replace(/{storage}/g, props.storage)
-    .replace(/{path}/g, item.path)
-
-  const config = {
-    url,
-    method: props.endpoints?.list.method || 'get',
-  }
-
-  const response: FileItem[] = await props.axios?.request(config) ?? []
-
-  item.children = response.map((item: FileItem) => {
-    if (item.type === 'dir')
-      item.children = []
-
-    return item
-  })
-
-  emit('loading', false)
-}
-
-// 选中变化
-function activeChanged(_active: string[]) {
-  let path = ''
-  if (active.value.length)
-    path = active.value[0]
-
-  if (props.path !== path)
-    emit('pathchanged', path)
-}
-
-// 查找文件
-function findItem(path: string) {
-  const stack: FileItem[] = []
-  stack.push(items.value[0])
-  while (stack.length > 0) {
-    const node = stack.pop()
-    if (node?.path === path) {
-      return node
-    }
-    else if (node?.children && node.children.length) {
-      for (const element of node.children)
-        stack.push(element)
-    }
-  }
-  return null
-}
-
-// 监听存储空间变量
-watch(() => props.storage, () => {
-  init()
-})
-
-// 监听路径变化
-watch(
-  () => props.path,
-  () => {
-    if (props.path) {
-      active.value = [props.path]
-      if (!open.value.includes(props.path))
-        open.value.push(props.path)
-    }
-  })
-
-// 监听 refreshPending
-watch(
-  () => props.refreshpending,
-  async () => {
-    if (props.refreshpending && props.path) {
-      const item = findItem(props.path)
-      if (item) {
-        await readFolder(item)
-        emit('refreshed')
-      }
-    }
-  },
-)
-
-onMounted(() => {
-  init()
-})
-</script>
-
-<template>
-  <VCard flat width="250" min-height="500" class="d-flex flex-column folders-tree-card">
-    <div class="grow scroll-x">
-      <VTreeview
-        :open="open"
-        :active="active"
-        :items="items"
-        :search="filter"
-        :load-children="readFolder"
-        item-key="path"
-        item-text="basename"
-        dense
-        activatable
-        transition
-        class="folders-tree"
-        @update:active="activeChanged"
-      >
-        <template #prepend="{ item, open }">
-          <VIcon
-            v-if="item.type === 'dir'"
-          >
-            {{ open ? 'mdi-folder-open-outline' : 'mdi-folder-outline' }}
-          </VIcon>
-          <VIcon v-else-if="props.icons" :icon="props.icons[item.extension.toLowerCase()] || props.icons.other" />
-        </template>
-        <template #label="{ item }">
-          {{ item.basename }}
-          <VBtn
-            v-if="item.type === 'dir'"
-            icon
-            class="ml-1"
-            @click.stop="readFolder(item)"
-          >
-            <VIcon class="pa-0 mdi-18px" color="grey lighten-1">
-              mdi-refresh
-            </VIcon>
-          </VBtn>
-        </template>
-      </VTreeview>
-    </div>
-    <VDivider />
-    <VToolbar
-      density="compact"
-    >
-      <VBtn icon @click="init">
-        <VIcon icon="mdi-collapse-all-outline" />
-      </VBtn>
-    </VToolbar>
-  </VCard>
-</template>
-
-<style lang="scss" scoped>
-.folders-tree-card {
-    height: 100%;
-
-    .scroll-x {
-        overflow-x: auto;
-    }
-
-    ::v-deep .folders-tree {
-        width: fit-content;
-        min-width: 250px;
-
-        .v-treeview-node {
-            cursor: pointer;
-
-            &:hover {
-                background-color: rgba(0, 0, 0, 0.02);
-            }
-        }
-    }
-}
-.v-toolbar{
-  background: rgb(var(--v-table-header-background));
-}
-</style>

src/components/form/ImportCodeForm.vue

@@ -1,39 +0,0 @@
-<script lang="ts" setup>
-// 输入参数
-const props = defineProps({
-  title: String,
-})
-
-// 定义事件
-const emit = defineEmits(['update:modelValue', 'close'])
-
-// 代码
-const codeString = ref('')
-
-// 导入
-function handleImport() {
-  emit('update:modelValue', codeString.value)
-  emit('close')
-}
-</script>
-
-<template>
-  <VCard
-    :title="props.title"
-    class="rounded-t"
-  >
-    <DialogCloseBtn @click="emit('close')" />
-    <VCardText class="pt-2">
-      <VTextarea v-model="codeString" />
-    </VCardText>
-    <VCardActions>
-      <VSpacer />
-      <VBtn
-        variant="tonal"
-        @click="handleImport"
-      >
-        导入
-      </VBtn>
-    </VCardActions>
-  </VCard>
-</template>

src/components/form/SubscribeEditForm.vue

@@ -1,365 +0,0 @@
-<script lang="ts" setup>
-import { useToast } from 'vue-toast-notification'
-import { numberValidator } from '@/@validators'
-import api from '@/api'
-import type { Site, Subscribe } from '@/api/types'
-
-// 输入参数
-const props = defineProps({
-  subid: Number,
-})
-
-// 定义触发的自定义事件
-const emit = defineEmits(['remove', 'save', 'close'])
-
-// 站点数据列表
-const siteList = ref<Site[]>([])
-
-// 站点选择下载框
-const selectSitesOptions = ref<{ [key: number]: string }[]>([])
-
-// 订阅编辑表单
-const subscribeForm = ref<Subscribe>({
-  id: props.subid ?? 0,
-  keyword: '',
-  quality: '',
-  resolution: '',
-  effect: '',
-  include: '',
-  exclude: '',
-  total_episode: 0,
-  start_episode: 0,
-  best_version: 0,
-  sites: [],
-  type: '',
-  name: '',
-  year: '',
-  tmdbid: 0,
-  state: '',
-  last_update: '',
-  username: '',
-  current_priority: 0,
-  save_path: '',
-})
-
-// 提示框
-const $toast = useToast()
-
-// 调用API修改订阅
-async function updateSubscribeInfo() {
-  try {
-    const result: { [key: string]: any } = await api.put('subscribe/', subscribeForm.value)
-    // 提示
-    if (result.success) {
-      $toast.success(`${subscribeForm.value.name} 更新成功！`)
-      // 通知父组件刷新
-      emit('save')
-    }
-    else { $toast.error(`${subscribeForm.value.name} 更新失败：${result.message}！`) }
-  }
-  catch (e) {
-    console.log(e)
-  }
-}
-
-// 获取站点列表数据
-async function loadSites() {
-  try {
-    const data: Site[] = await api.get('site/rss')
-
-    // 过滤站点，只有启用的站点才显示
-    siteList.value = data.filter(item => item.is_active)
-  }
-  catch (error) {
-    console.error(error)
-  }
-}
-
-// 获取站点列表选择框数据
-async function getSiteList() {
-  // 加载订阅站点列表
-  if (!siteList.value.length)
-    await loadSites()
-
-  const maps = siteList.value.map((item) => {
-    return {
-      title: item.name,
-      value: item.id,
-    }
-  })
-
-  selectSitesOptions.value = maps.flat()
-}
-
-// 获取订阅信息
-async function getSubscribeInfo() {
-  try {
-    const result: Subscribe = await api.get(
-      `subscribe/${props.subid}`,
-    )
-    subscribeForm.value = result
-    subscribeForm.value.best_version = subscribeForm.value.best_version === 1
-  }
-  catch (e) {
-    console.log(e)
-  }
-}
-
-// 删除订阅
-async function removeSubscribe() {
-  try {
-    const result: { [key: string]: any } = await api.delete(
-      `subscribe/${props.subid}`,
-    )
-
-    if (result.success) {
-      // 通知父组件刷新
-      emit('remove')
-    }
-  }
-  catch (e) {
-    console.log(e)
-  }
-}
-
-// 质量选择框数据
-const qualityOptions = ref([
-  {
-    title: '全部',
-    value: '',
-  },
-  {
-    title: '蓝光原盘',
-    value: 'Blu-?Ray.+VC-?1|Blu-?Ray.+AVC|UHD.+blu-?ray.+HEVC|MiniBD',
-  },
-  {
-    title: 'Remux',
-    value: 'Remux',
-  },
-  {
-    title: 'BluRay',
-    value: 'Blu-?Ray',
-  },
-  {
-    title: 'UHD',
-    value: 'UHD|UltraHD',
-  },
-  {
-    title: 'WEB-DL',
-    value: 'WEB-?DL|WEB-?RIP',
-  },
-  {
-    title: 'HDTV',
-    value: 'HDTV',
-  },
-  {
-    title: 'H265',
-    value: '[Hx].?265|HEVC',
-  },
-  {
-    title: 'H264',
-    value: '[Hx].?264|AVC',
-  },
-])
-
-// 分辨率选择框数据
-const resolutionOptions = ref([
-  {
-    title: '全部',
-    value: '',
-  },
-  {
-    title: '4k',
-    value: '4K|2160p|x2160',
-  },
-  {
-    title: '1080p',
-    value: '1080[pi]|x1080',
-  },
-  {
-    title: '720p',
-    value: '720[pi]|x720',
-  },
-])
-
-// 特效选择框数据
-const effectOptions = ref([
-  {
-    title: '全部',
-    value: '',
-  },
-  {
-    title: '杜比视界',
-    value: 'Dolby[\\s.]+Vision|DOVI|[\\s.]+DV[\\s.]+',
-  },
-  {
-    title: '杜比全景声',
-    value: 'Dolby[\\s.]*\\+?Atmos|Atmos',
-  },
-  {
-    title: 'HDR',
-    value: '[\\s.]+HDR[\\s.]+|HDR10|HDR10\\+',
-  },
-  {
-    title: 'SDR',
-    value: '[\\s.]+SDR[\\s.]+',
-  },
-])
-
-watchEffect(() => {
-  if (props.subid) {
-    getSiteList()
-    getSubscribeInfo()
-  }
-})
-</script>
-
-<template>
-  <VDialog
-    scrollable
-    max-width="60rem"
-  >
-    <VCard
-      :title="`编辑订阅 - ${subscribeForm.name} ${subscribeForm.season ? `第 ${subscribeForm.season} 季` : ''}`"
-      class="rounded-t"
-    >
-      <VCardText class="pt-2">
-        <DialogCloseBtn @click="emit('close')" />
-        <VForm @submit.prevent="() => {}">
-          <VRow>
-            <VCol
-              cols="12"
-              md="8"
-            >
-              <VTextField
-                v-model="subscribeForm.keyword"
-                label="搜索关键词"
-              />
-            </VCol>
-            <VCol
-              v-if="subscribeForm.type === '电视剧'"
-              cols="12"
-              md="2"
-            >
-              <VTextField
-                v-model="subscribeForm.total_episode"
-                label="总集数"
-                :rules="[numberValidator]"
-              />
-            </VCol>
-            <VCol
-              v-if="subscribeForm.type === '电视剧'"
-              cols="12"
-              md="2"
-            >
-              <VTextField
-                v-model="subscribeForm.start_episode"
-                label="开始集数"
-                :rules="[numberValidator]"
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.quality"
-                label="质量"
-                :items="qualityOptions"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.resolution"
-                label="分辨率"
-                :items="resolutionOptions"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.effect"
-                label="特效"
-                :items="effectOptions"
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="subscribeForm.include"
-                label="包含（关键字、正则式）"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="subscribeForm.exclude"
-                label="排除（关键字、正则式）"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.sites"
-                :items="selectSitesOptions"
-                chips
-                label="订阅站点"
-                multiple
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="subscribeForm.save_path"
-                label="保存路径"
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSwitch
-                v-model="subscribeForm.best_version"
-                label="洗版"
-              />
-            </VCol>
-          </VRow>
-        </VForm>
-      </VCardText>
-
-      <VCardActions>
-        <VBtn color="error" @click="removeSubscribe">
-          取消订阅
-        </VBtn>
-        <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="updateSubscribeInfo"
-        >
-          保存
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
-</template>

src/components/misc/DashboardElement.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { DashboardItem } from '@/api/types'
+import AnalyticsMediaStatistic from '@/views/dashboard/AnalyticsMediaStatistic.vue'
+import AnalyticsScheduler from '@/views/dashboard/AnalyticsScheduler.vue'
+import AnalyticsSpeed from '@/views/dashboard/AnalyticsSpeed.vue'
+import AnalyticsStorage from '@/views/dashboard/AnalyticsStorage.vue'
+import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue'
+import AnalyticsCpu from '@/views/dashboard/AnalyticsCpu.vue'
+import AnalyticsMemory from '@/views/dashboard/AnalyticsMemory.vue'
+import MediaServerLatest from '@/views/dashboard/MediaServerLatest.vue'
+import MediaServerLibrary from '@/views/dashboard/MediaServerLibrary.vue'
+import MediaServerPlaying from '@/views/dashboard/MediaServerPlaying.vue'
+import DashboardRender from '@/components/render/DashboardRender.vue'
+import { isNullOrEmptyObject } from '@/@core/utils'
+// 输入参数
+const props = defineProps({
+  // 仪表板配置
+  config: Object as PropType<DashboardItem>,
+  // 刷新状态
+  refreshStatus: Boolean,
+})
+
+const emit = defineEmits(['update:refreshStatus'])
+
+onUnmounted(() => {
+  // 组件卸载时禁用刷新状态
+  emit('update:refreshStatus', false)
+})
+</script>
+<template>
+  <!-- 系统内置的仪表板 -->
+  <AnalyticsStorage v-if="config?.id === 'storage'" />
+  <AnalyticsMediaStatistic v-else-if="config?.id === 'mediaStatistic'" />
+  <AnalyticsWeeklyOverview v-else-if="config?.id === 'weeklyOverview'" />
+  <AnalyticsSpeed v-else-if="config?.id === 'speed'" />
+  <AnalyticsScheduler v-else-if="config?.id === 'scheduler'" />
+  <AnalyticsCpu v-else-if="config?.id === 'cpu'" />
+  <AnalyticsMemory v-else-if="config?.id === 'memory'" />
+  <MediaServerLibrary v-else-if="config?.id === 'library'" />
+  <MediaServerPlaying v-else-if="config?.id === 'playing'" />
+  <MediaServerLatest v-else-if="config?.id === 'latest'" />
+  <!-- 插件仪表板 -->
+  <VHover v-else-if="!isNullOrEmptyObject(props.config)">
+    <template #default="hover">
+      <VCard v-bind="hover.props">
+        <VCardItem v-if="props.config?.attrs.border !== false">
+          <template #append>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
+          </template>
+          <VCardTitle>
+            {{ props.config?.attrs?.title ?? props.config?.name }}
+          </VCardTitle>
+          <VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle>
+        </VCardItem>
+        <VCardText :class="{ 'p-0': props.config?.attrs.border === false }">
+          <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
+        </VCardText>
+        <div v-if="props.config?.attrs.border === false && hover.isHovering" class="absolute right-5 top-5">
+          <VIcon class="cursor-move">mdi-drag</VIcon>
+        </div>
+      </VCard>
+    </template>
+  </VHover>
+</template>

src/components/misc/MediaIdSelector.vue

@@ -2,10 +2,16 @@
 import api from '@/api'
 import type { MediaInfo } from '@/api/types'
 
+// 定义输入变量
+const props = defineProps({
+  type: String, // 来源 themoviedb | douban
+})
+
 interface TmdbItem {
   title: string
   overview: string
   tmdbid: number
+  doubanid: string
   poster: string
 }
 
@@ -21,25 +27,23 @@ const keyword = ref('')
 const loading = ref(false)
 
 // ref
-const tmdbKeyword = ref<HTMLElement | null>(null)
+const inputKeyword = ref<HTMLElement | null>(null)
 
 // 选中条目
 function selectMedia(item: TmdbItem) {
-  emit('update:modelValue', item.tmdbid)
+  emit('update:modelValue', item.tmdbid || item.doubanid)
   emit('close')
 }
 
 // TMDB图片转换为w500大小
 function getW500Image(url = '') {
-  if (!url)
-    return ''
+  if (!url) return ''
   return url.replace('original', 'w500')
 }
 
 // 搜索词条
 async function searchMedias() {
-  if (!keyword)
-    return
+  if (!keyword) return
 
   // 调用API搜索词条
   try {
@@ -57,16 +61,17 @@ async function searchMedias() {
 
     // 赋值
     for (const item of result) {
+      if (props.type && props.type !== item.source) continue
       items.value.push({
         tmdbid: item.tmdb_id || 0,
+        doubanid: item.douban_id || '',
         poster: getW500Image(item.poster_path),
         title: `${item.title}（${item.year}）`,
         overview: `<span class="text-primary">${item.type}</span> ${item.overview}`,
       })
     }
     loading.value = false
-  }
-  catch (e) {
+  } catch (e) {
     console.error(e)
   }
 }
@@ -75,25 +80,22 @@ async function searchMedias() {
 onMounted(() => {
   // 500ms后聚焦
   setTimeout(() => {
-    tmdbKeyword.value?.focus()
+    inputKeyword.value?.focus()
   }, 500)
 })
 </script>
 
 <template>
-  <VCard
-    class="mx-auto"
-    width="100%"
-  >
+  <VCard class="mx-auto" width="100%">
     <VToolbar flat class="p-0">
       <VTextField
-        ref="tmdbKeyword"
+        ref="inputKeyword"
         v-model="keyword"
         label="输入名称搜索"
         single-line
         placeholder="电影或电视剧名称"
         variant="solo"
-        append-inner-icon="mdi-magnify"
+        prepend-inner-icon="mdi-magnify"
         flat
         class="mx-1"
         :loading="loading"
@@ -101,15 +103,17 @@ onMounted(() => {
         @keydown.enter="searchMedias"
       />
     </VToolbar>
-
-    <VList
-      v-if="items.length > 0"
-      lines="three"
-    >
+    <DialogCloseBtn
+      @click="
+        () => {
+          emit('close')
+        }
+      "
+    />
+    <VDivider />
+    <VList v-if="items.length > 0" lines="three">
       <template v-for="(item, i) in items" :key="i">
-        <VListItem
-          @click="selectMedia(item)"
-        >
+        <VListItem @click="selectMedia(item)">
           <template #prepend>
             <VImg
               height="75"
@@ -131,7 +135,6 @@ onMounted(() => {
           </VListItemTitle>
           <VListItemSubtitle class="mt-2" v-html="item.overview" />
         </VListItem>
-        <VDivider v-if="i < items.length - 1" class="mt-1" inset />
       </template>
     </VList>
   </VCard>

src/components/misc/VersionHistory.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+// 输入参数
+const props = defineProps({
+  history: Object as PropType<{ [key: string]: string }>,
+})
+</script>
+
+<template>
+  <VCardText>
+    <VList>
+      <VListItem v-for="(value, key) in props.history" :key="key">
+        <VListItemTitle class="font-bold text-lg">
+          {{ key }}
+        </VListItemTitle>
+        <div class="text-gray-500">
+          {{ value }}
+        </div>
+      </VListItem>
+    </VList>
+  </VCardText>
+</template>

src/components/render/DashboardRender.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { RenderProps } from '@/api/types'
+import { type PropType } from 'vue'
+
+// 输入参数
+const elementProps = defineProps({
+  config: Object as PropType<RenderProps>,
+})
+</script>
+
+<template>
+  <Component :is="elementProps.config?.component" v-if="!elementProps.config?.html" v-bind="elementProps.config?.props">
+    {{ elementProps.config?.text }}
+    <template v-for="(content, name) in elementProps.config?.slots || []" :key="name" v-slot:[name]="{ _props }">
+      <slot :name="name" v-bind="_props">
+        <DashboardRender v-for="(slotItem, slotIndex) in content || []" :key="slotIndex" :config="slotItem" />
+      </slot>
+    </template>
+    <DashboardRender
+      v-for="(innerItem, innerIndex) in elementProps.config?.content || []"
+      :key="innerIndex"
+      :config="innerItem"
+    />
+  </Component>
+  <Component
+    :is="elementProps.config?.component"
+    v-if="elementProps.config?.html"
+    v-bind="elementProps.config?.props"
+    v-html="elementProps.config?.html"
+  />
+</template>

src/components/render/FormRender.vue

@@ -1,15 +1,7 @@
 <script lang="ts" setup>
+import { RenderProps } from '@/api/types'
 import { type PropType, ref } from 'vue'
 
-// 组件接口
-interface RenderProps {
-  component: string
-  text: string
-  html: string
-  content?: any
-  props?: any
-}
-
 // 输入参数
 const elementProps = defineProps({
   config: Object as PropType<RenderProps>,
@@ -17,13 +9,15 @@ const elementProps = defineProps({
 })
 
 // 配置元素
-const formItem = ref<RenderProps>(elementProps.config ?? {
-  component: 'div',
-  text: '',
-  html: '',
-  props: {},
-  content: [],
-})
+const formItem = ref<RenderProps>(
+  elementProps.config ?? {
+    component: 'div',
+    text: '',
+    html: '',
+    props: {},
+    content: [],
+  },
+)
 
 // 配置数据
 const formData = ref<any>(elementProps.form || {})
@@ -32,23 +26,32 @@ const formData = ref<any>(elementProps.form || {})
 <template>
   <Component
     :is="formItem.component"
-    v-if="!formItem.html"
+    v-if="!formItem.html && !!formItem.props?.modelvalue"
     v-bind="formItem.props"
-    v-model="formData[formItem.props?.model || '']"
+    v-model:value="formData[formItem.props?.modelvalue]"
   >
     {{ formItem.text }}
-    <FormRender
-      v-for="(innerItem, innerIndex) in (formItem.content || [])"
-      :key="innerIndex"
-      v-model="formData[innerItem.props?.model || '']"
-      :config="innerItem"
-      :form="formData"
-    />
+    <template v-for="(innerItem, innerIndex) in formItem.content || []" :key="innerIndex">
+      <FormRender
+        v-if="!!innerItem.props?.modelvalue"
+        v-model:value="formData[innerItem.props?.modelvalue]"
+        :config="innerItem"
+        :form="formData"
+      />
+      <FormRender v-else v-model="formData[innerItem.props?.model]" :config="innerItem" :form="formData" />
+    </template>
+  </Component>
+  <Component :is="formItem.component" v-else-if="formItem.html" v-bind="formItem.props" v-html="formItem.html" />
+  <Component :is="formItem.component" v-else v-bind="formItem.props" v-model="formData[formItem.props?.model]">
+    {{ formItem.text }}
+    <template v-for="(innerItem, innerIndex) in formItem.content || []" :key="innerIndex">
+      <FormRender
+        v-if="!!innerItem.props?.modelvalue"
+        v-model:value="formData[innerItem.props?.modelvalue]"
+        :config="innerItem"
+        :form="formData"
+      />
+      <FormRender v-else v-model="formData[innerItem.props?.model]" :config="innerItem" :form="formData" />
+    </template>
   </Component>
-  <Component
-    :is="formItem.component"
-    v-if="formItem.html"
-    v-bind="formItem.props"
-    v-html="formItem.html"
-  />
 </template>

src/components/render/PageRender.vue

@@ -1,47 +1,90 @@
 <script lang="ts" setup>
-import { type PropType, ref } from 'vue'
+import { isNullOrEmptyObject } from '@/@core/utils'
+import api from '@/api'
+import { type PropType } from 'vue'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
+import { RenderProps } from '@/api/types'
 
-// 组件接口
-interface RenderProps {
-  component: string
-  text: string
-  html: string
-  content?: any
-  props?: any
-}
+// 定议外部事件
+const emit = defineEmits(['action'])
 
 // 输入参数
 const elementProps = defineProps({
   config: Object as PropType<RenderProps>,
 })
 
-// 配置元素
-const formItem = ref<RenderProps>(elementProps.config ?? {
-  component: 'div',
-  text: '',
-  html: '',
-  props: {},
-  content: [],
+// 进度框
+const progressDialog = ref(false)
+
+// 进度框文本
+const progressText = ref('正在处理...')
+
+// 元素API事件响应
+async function commonAction(api_path: string, method: string, params = {}) {
+  if (!api_path || !method) return
+  progressDialog.value = true
+  try {
+    if (method.toUpperCase() === 'GET') {
+      await api.get(api_path, {
+        params: params,
+      })
+    } else {
+      await api.post(api_path, params)
+    }
+    emit('action')
+  } catch (error) {
+    console.error(error)
+  }
+  progressDialog.value = false
+}
+
+// 组装事件
+let componentEvents = reactive<{ [key: string]: any }>({})
+watchEffect(() => {
+  if (!isNullOrEmptyObject(elementProps.config?.events)) {
+    for (const key in elementProps.config?.events) {
+      const attr = elementProps.config?.events[key]
+      const func = async () => {
+        await commonAction(attr['api'], attr['method'], attr['params'])
+      }
+      componentEvents[key] = func
+    }
+  }
 })
 </script>
 
 <template>
   <Component
-    :is="formItem.component"
-    v-if="!formItem.html"
-    v-bind="formItem.props"
+    :is="elementProps.config?.component"
+    v-if="!elementProps.config?.html"
+    v-bind="elementProps.config?.props"
+    v-on="componentEvents"
   >
-    {{ formItem.text }}
+    {{ elementProps.config?.text }}
+    <template v-for="(content, name) in elementProps.config?.slots || []" :key="name" v-slot:[name]="{ _props }">
+      <slot :name="name" v-bind="_props">
+        <PageRender
+          v-for="(slotItem, slotIndex) in content || []"
+          :key="slotIndex"
+          :config="slotItem"
+          @action="emit('action')"
+        />
+      </slot>
+    </template>
     <PageRender
-      v-for="(innerItem, innerIndex) in (formItem.content || [])"
+      v-for="(innerItem, innerIndex) in elementProps.config?.content || []"
       :key="innerIndex"
       :config="innerItem"
+      @action="emit('action')"
     />
   </Component>
   <Component
-    :is="formItem.component"
-    v-if="formItem.html"
-    v-bind="formItem.props"
-    v-html="formItem.html"
+    :is="elementProps.config?.component"
+    v-if="elementProps.config?.html"
+    v-bind="elementProps.config?.props"
+    v-html="elementProps.config?.html"
+    v-on="componentEvents"
   />
+  <!-- 进度框 -->
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
 </template>

src/components/slide/SlideView.vue

@@ -1,12 +1,6 @@
 <script lang="ts" setup>
 import SlideViewTitle from '@/components/slide/SlideViewTitle.vue'
 
-// 输入参数
-const props = defineProps({
-  linkurl: String,
-  title: String,
-})
-
 // 元素
 const slideview_content = ref()
 // 分页切换状态
@@ -95,7 +89,7 @@ onActivated(() => {
 <template>
   <div class="flex justify-between mt-3">
     <slot name="title">
-      <SlideViewTitle v-bind="props" />
+      <SlideViewTitle />
     </slot>
     <div v-if="disabled !== 3" class="me-1 d-none d-md-flex">
       <VBtn

src/components/slide/SlideViewTitle.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
 // 输入参数
-const props = defineProps({
-  linkurl: String,
-  title: String,
-})
+const props = inject('rankingPropsKey')
+
 </script>
 
 <template>

src/components/table/SiteTorrentTable.vue

@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toast-notification'
+import { useConfirm } from 'vuetify-use-dialog'
+import api from '@/api'
+import type { TorrentInfo } from '@/api/types'
+import { doneNProgress, startNProgress } from '@/api/nprogress'
+import { formatFileSize } from '@core/utils/formatters'
+
+// 输入参数
+const props = defineProps({
+  site: Number,
+  width: String,
+  height: String,
+})
+
+// 提示框
+const $toast = useToast()
+
+// 确认框
+const createConfirm = useConfirm()
+
+// 数据列表
+const resourceDataList = ref<TorrentInfo[]>([])
+
+// 搜索
+const resourceSearch = ref('')
+
+// 总条数
+const resourceTotalItems = ref(0)
+
+// 每页条数
+const resourceItemsPerPage = ref(25)
+
+// 加载状态
+const resourceLoading = ref(false)
+
+// 资源浏览表头
+const resourceHeaders = [
+  { title: '标题', key: 'title', sortable: false },
+  { title: '时间', key: 'pubdate', sortable: true },
+  { title: '大小', key: 'size', sortable: true },
+  { title: '做种', key: 'seeders', sortable: true },
+  { title: '下载', key: 'peers', sortable: true },
+  { title: '', key: 'actions', sortable: false },
+]
+
+// 打开种子详情页面
+function openTorrentDetail(page_url: string) {
+  window.open(page_url, '_blank')
+}
+
+// 下载种子文件
+async function downloadTorrentFile(enclosure: string) {
+  window.open(enclosure, '_blank')
+}
+
+// 调用API，查询站点资源
+async function getResourceList() {
+  resourceLoading.value = true
+  try {
+    resourceDataList.value = await api.get(`site/resource/${props.site}`)
+    resourceLoading.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 促销Chip类
+function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
+  if (downloadVolume === 0) return 'text-white bg-lime-500'
+  else if (downloadVolume < 1) return 'text-white bg-green-500'
+  else if (uploadVolume !== 1) return 'text-white bg-sky-500'
+  else return 'text-white bg-gray-500'
+}
+
+// 添加下载
+async function addDownload(_torrent: any) {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认下载【${_torrent.site_name}】${_torrent?.title} ?`,
+  })
+
+  if (!isConfirmed) return
+
+  startNProgress()
+  try {
+    const result: { [key: string]: any } = await api.post('download/add', _torrent)
+
+    if (result.success) {
+      // 添加下载成功
+      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
+    } else {
+      // 添加下载失败
+      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败：${result.message || '未知错误'}`)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  doneNProgress()
+}
+
+// 装载时查询站点图标
+onMounted(() => {
+  getResourceList()
+})
+</script>
+
+<template>
+  <VDataTable
+    v-model:items-per-page="resourceItemsPerPage"
+    :headers="resourceHeaders"
+    :items="resourceDataList"
+    :items-length="resourceTotalItems"
+    :search="resourceSearch"
+    :loading="resourceLoading"
+    density="compact"
+    item-value="title"
+    return-object
+    fixed-header
+    hover
+    items-per-page-text="每页条数"
+    page-text="{0}-{1} 共 {2} 条"
+    loading-text="加载中..."
+  >
+    <template #item.title="{ item }">
+      <a href="javascript:void(0)" @click.stop="addDownload(item)">
+        <div class="text-high-emphasis pt-1">
+          {{ item.title }}
+        </div>
+        <div class="text-sm my-1">
+          {{ item.description }}
+        </div>
+        <VChip v-if="item.hit_and_run" variant="elevated" size="small" class="me-1 mb-1 text-white bg-black">
+          H&R
+        </VChip>
+        <VChip v-if="item.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
+          {{ item.freedate_diff }}
+        </VChip>
+        <VChip
+          v-for="(label, index) in item.labels"
+          :key="index"
+          variant="elevated"
+          size="small"
+          color="primary"
+          class="me-1 mb-1"
+        >
+          {{ label }}
+        </VChip>
+        <VChip
+          v-if="item.downloadvolumefactor !== 1 || item.uploadvolumefactor !== 1"
+          :class="getVolumeFactorClass(item.downloadvolumefactor, item.uploadvolumefactor)"
+          variant="elevated"
+          size="small"
+          class="me-1 mb-1"
+        >
+          {{ item.volume_factor }}
+        </VChip>
+      </a>
+    </template>
+    <template #item.pubdate="{ item }">
+      <div>{{ item.date_elapsed }}</div>
+      <div class="text-sm">
+        {{ item.pubdate }}
+      </div>
+    </template>
+    <template #item.size="{ item }">
+      <div class="text-nowrap whitespace-nowrap">
+        {{ formatFileSize(item.size) }}
+      </div>
+    </template>
+    <template #item.seeders="{ item }">
+      <div>{{ item.seeders }}</div>
+    </template>
+    <template #item.peers="{ item }">
+      <div>{{ item.peers }}</div>
+    </template>
+    <template #item.actions="{ item }">
+      <div class="me-n3">
+        <IconBtn>
+          <VIcon icon="mdi-dots-vertical" />
+          <VMenu activator="parent" close-on-content-click>
+            <VList>
+              <VListItem variant="plain" @click="openTorrentDetail(item.page_url || '')">
+                <template #prepend>
+                  <VIcon icon="mdi-information" />
+                </template>
+                <VListItemTitle>查看详情</VListItemTitle>
+              </VListItem>
+              <VListItem
+                v-if="item.enclosure?.startsWith('http')"
+                variant="plain"
+                @click="downloadTorrentFile(item.enclosure)"
+              >
+                <template #prepend>
+                  <VIcon icon="mdi-download" />
+                </template>
+                <VListItemTitle>下载种子文件</VListItemTitle>
+              </VListItem>
+            </VList>
+          </VMenu>
+        </IconBtn>
+      </div>
+    </template>
+    <template #no-data> 没有数据 </template>
+  </VDataTable>
+</template>

src/layouts/components/DefaultLayoutWithVerticalNav.vue

@@ -6,6 +6,7 @@ import VerticalNavLink from '@layouts/components/VerticalNavLink.vue'
 // Components
 import Footer from '@/layouts/components/Footer.vue'
 import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
+import UserNofification from '@/layouts/components/UserNotification.vue'
 import SearchBar from '@/layouts/components/SearchBar.vue'
 import ShortcutBar from '@/layouts/components/ShortcutBar.vue'
 import UserProfile from '@/layouts/components/UserProfile.vue'
@@ -21,10 +22,7 @@ const superUser = store.state.auth.superUser
     <template #navbar="{ toggleVerticalOverlayNavActive }">
       <div class="d-flex h-100 align-center mx-1">
         <!-- 👉 Vertical Nav Toggle -->
-        <IconBtn
-          class="ms-n2 d-lg-none"
-          @click="toggleVerticalOverlayNavActive(true)"
-        >
+        <IconBtn class="ms-n2 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
           <VIcon icon="mdi-menu" />
         </IconBtn>
 
@@ -33,21 +31,14 @@ const superUser = store.state.auth.superUser
 
         <VSpacer />
 
-        <!-- 👉 Github -->
-        <IconBtn
-          class="me-2"
-          href="https://github.com/jxxghp/MoviePilot"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <VIcon icon="mdi-github" />
-        </IconBtn>
-
         <!-- 👉 Shortcuts -->
-        <ShortcutBar />
+        <ShortcutBar v-if="superUser" />
 
         <!-- 👉 Theme -->
-        <NavbarThemeSwitcher class="me-2" />
+        <NavbarThemeSwitcher />
+
+        <!-- 👉 Notification -->
+        <UserNofification />
 
         <!-- 👉 UserProfile -->
         <UserProfile />

src/layouts/components/NavbarThemeSwitcher.vue

@@ -2,21 +2,29 @@
 import type { ThemeSwitcherTheme } from '@layouts/types'
 
 const themes: ThemeSwitcherTheme[] = [
+  {
+    name: 'auto',
+    title: '跟随系统',
+    icon: 'mdi-laptop',
+  },
   {
     name: 'light',
+    title: '明亮',
     icon: 'mdi-weather-sunny',
   },
   {
     name: 'dark',
+    title: '暗黑',
     icon: 'mdi-weather-night',
   },
   {
     name: 'purple',
+    title: '紫韵幽兰',
     icon: 'mdi-brightness-4',
   },
 ]
 </script>
 
 <template>
-  <ThemeSwitcher :themes="themes" />
+  <ThemeSwitcher class="ms-2" :themes="themes" />
 </template>

src/layouts/components/SearchBar.vue

@@ -3,7 +3,7 @@
 const router = useRouter()
 
 // 搜索词
-const searchWord = ref<string>('')
+const searchWord = ref(null)
 
 // 搜索弹窗
 const searchDialog = ref(false)
@@ -11,20 +11,31 @@ const searchDialog = ref(false)
 // ref
 const searchWordInput = ref<HTMLElement | null>(null)
 
+// 当前的搜索类型 media/person
+const searchType = ref('media')
+
+// 搜索提示词列表
+const searchHintList = ref<string[]>([])
+
 // Search
 function search() {
-  if (!searchWord.value)
-    return
-
+  if (!searchWord.value) return
+  if (!searchHintList.value.includes(searchWord.value)) searchHintList.value.push(searchWord.value)
   searchDialog.value = false
   router.push({
     path: '/browse/media/search',
     query: {
       title: searchWord.value,
+      type: searchType.value,
     },
   })
 }
 
+// 切换搜索类型
+function switchSearchType() {
+  searchType.value = searchType.value === 'media' ? 'person' : 'media'
+}
+
 // 打开搜索弹窗
 function openSearchDialog() {
   searchDialog.value = true
@@ -36,25 +47,22 @@ function openSearchDialog() {
 
 <template>
   <!-- 👉 Search Button -->
-  <div
-    class="d-flex align-center cursor-pointer"
-    style="user-select: none;"
-  >
-    <VDialog
-      v-model="searchDialog"
-      max-width="50rem"
-      transition="dialog-top-transition"
-    >
+  <div class="d-flex align-center cursor-pointer" style="user-select: none">
+    <VDialog v-model="searchDialog" max-width="50rem" transition="dialog-top-transition">
       <!-- Dialog Content -->
       <VCard title="搜索">
         <VCardText>
           <VRow>
             <VCol cols="12">
-              <VTextField
+              <VCombobox
                 ref="searchWordInput"
                 v-model="searchWord"
-                label="电影、电视剧名称"
+                :items="searchHintList"
+                :prepend-inner-icon="searchType == 'person' ? 'mdi-account' : 'mdi-movie'"
+                :label="searchType == 'person' ? '搜索演员' : '搜索电影、电视剧'"
                 @keydown.enter="search"
+                @click:prepend-inner="switchSearchType"
+                clearable
               />
             </VCol>
           </VRow>
@@ -62,39 +70,40 @@ function openSearchDialog() {
 
         <VCardActions>
           <VSpacer />
-          <VBtn
-            variant="tonal"
-            @click="search"
-          >
-            搜索
-          </VBtn>
+          <VBtn variant="tonal" @click="search"> 搜索 </VBtn>
         </VCardActions>
       </VCard>
     </VDialog>
   </div>
   <!-- 👉 Search Icon -->
-  <IconBtn
-    class="d-lg-none"
-    @click="openSearchDialog"
-  >
+  <IconBtn class="d-md-none" @click="openSearchDialog">
     <VIcon icon="mdi-magnify" />
   </IconBtn>
   <!-- 👉 Search Textfield -->
-  <span class="w-1/5">
-    <VTextField
+  <span class="w-full me-3">
+    <VCombobox
       key="search_navbar"
       v-model="searchWord"
-      class="d-none d-lg-block text-disabled"
+      :items="searchHintList"
+      class="d-none d-md-block text-disabled search-box"
       density="compact"
       variant="solo"
-      label="搜索电影、电视剧"
+      :prepend-inner-icon="searchType == 'person' ? 'mdi-account' : 'mdi-movie'"
+      :label="searchType == 'person' ? '搜索演员' : '搜索电影、电视剧'"
       append-inner-icon="mdi-magnify"
       single-line
       hide-details
       flat
       rounded
       @click:append-inner="search"
+      @click:prepend-inner="switchSearchType"
       @keydown.enter="search"
     />
   </span>
 </template>
+
+<style lang="scss">
+.search-box div.v-input__control div[role='textbox'] {
+  border: 1px solid rgb(var(--v-theme-background));
+}
+</style>

src/layouts/components/ShortcutBar.vue

@@ -3,6 +3,14 @@ import NameTestView from '@/views/system/NameTestView.vue'
 import NetTestView from '@/views/system/NetTestView.vue'
 import LoggingView from '@/views/system/LoggingView.vue'
 import RuleTestView from '@/views/system/RuleTestView.vue'
+import ModuleTestView from '@/views/system/ModuleTestView.vue'
+import MessageView from '@/views/system/MessageView.vue'
+import store from '@/store'
+import api from '@/api'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // App捷径
 const appsMenu = ref(false)
@@ -18,6 +26,56 @@ const loggingDialog = ref(false)
 
 // 过滤规则弹窗
 const ruleTestDialog = ref(false)
+
+// 系统健康检查弹窗
+const systemTestDialog = ref(false)
+
+// 消息中心弹窗
+const messageDialog = ref(false)
+
+// 输入消息
+const user_message = ref('')
+
+// 发送按钮是否可用
+const sendButtonDisabled = ref(false)
+
+// 聊天容器
+const chatContainer = ref<HTMLDivElement>()
+
+// 滚动到底部
+function scrollMessageToEnd() {
+  nextTick(() => {
+    if (chatContainer.value) {
+      const scrollDiv = chatContainer.value.$el
+      scrollDiv.scrollTop = scrollDiv.scrollHeight
+    }
+  })
+}
+
+// 拼接全部日志url
+function allLoggingUrl() {
+  const token = store.state.auth.token
+  return `${import.meta.env.VITE_API_BASE_URL}system/logging?token=${token}&length=-1`
+}
+
+// 发送消息
+async function sendMessage() {
+  if (user_message.value) {
+    try {
+      sendButtonDisabled.value = true
+      await api.post(`message/web?text=${user_message.value}`)
+      user_message.value = ''
+      sendButtonDisabled.value = false
+      scrollMessageToEnd()
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}
+
+onMounted(() => {
+  scrollMessageToEnd()
+})
 </script>
 
 <template>
@@ -33,10 +91,7 @@ const ruleTestDialog = ref(false)
   >
     <!-- Menu Activator -->
     <template #activator="{ props }">
-      <IconBtn
-        class="me-2"
-        v-bind="props"
-      >
+      <IconBtn class="ms-2" v-bind="props">
         <VIcon icon="mdi-checkbox-multiple-blank-outline" />
       </IconBtn>
     </template>
@@ -52,89 +107,62 @@ const ruleTestDialog = ref(false)
       </VCardItem>
       <div class="ps ps--active-y">
         <VRow class="ma-0 mt-n1">
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-          >
-            <VListItem
-              class="pa-4"
-              @click="nameTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e">
+            <VListItem class="pa-4" @click="nameTestDialog = true">
+              <VAvatar size="48" variant="tonal">
                 <VIcon icon="mdi-text-recognition" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                识别
-              </h6>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">识别</h6>
               <span class="text-sm">名称识别测试</span>
             </VListItem>
           </VCol>
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="netTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
-                <VIcon icon="mdi-network-outline" />
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
+            <VListItem class="pa-4" @click="ruleTestDialog = true">
+              <VAvatar size="48" variant="tonal">
+                <VIcon icon="mdi-filter-cog-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                网络
-              </h6>
-              <span class="text-sm">测试网速连通性</span>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">优先级</h6>
+              <span class="text-sm">优先级规则测试</span>
             </VListItem>
           </VCol>
         </VRow>
         <VRow class="ma-0 mt-n1 border-t">
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="loggingDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
+            <VListItem class="pa-4" @click="loggingDialog = true">
+              <VAvatar size="48" variant="tonal">
                 <VIcon icon="mdi-file-document-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                日志
-              </h6>
-              <span class="text-sm">系统实时日志</span>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">日志</h6>
+              <span class="text-sm">实时日志</span>
             </VListItem>
           </VCol>
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="ruleTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
-                <VIcon icon="mdi-filter-cog-outline" />
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon" @click="() => {}">
+            <VListItem class="pa-4" @click="netTestDialog = true">
+              <VAvatar size="48" variant="tonal">
+                <VIcon icon="mdi-network-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                优先级
-              </h6>
-              <span class="text-sm">优先级规则测试</span>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">网络</h6>
+              <span class="text-sm">网速连通性测试</span>
+            </VListItem>
+          </VCol>
+        </VRow>
+        <VRow class="ma-0 mt-n1 border-t">
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
+            <VListItem class="pa-4" @click="systemTestDialog = true">
+              <VAvatar size="48" variant="tonal">
+                <VIcon icon="mdi-cog-outline" />
+              </VAvatar>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">系统</h6>
+              <span class="text-sm">健康检查</span>
+            </VListItem>
+          </VCol>
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
+            <VListItem class="pa-4" @click="messageDialog = true">
+              <VAvatar size="48" variant="tonal">
+                <VIcon icon="mdi-message-outline" />
+              </VAvatar>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">消息</h6>
+              <span class="text-sm">消息中心</span>
             </VListItem>
           </VCol>
         </VRow>
@@ -142,48 +170,53 @@ const ruleTestDialog = ref(false)
     </VCard>
   </VMenu>
   <!-- 名称测试弹窗 -->
-  <VDialog
-    v-model="nameTestDialog"
-    max-width="50rem"
-  >
+  <VDialog v-if="nameTestDialog" v-model="nameTestDialog" max-width="50rem" scrollable>
     <VCard title="名称识别测试">
       <DialogCloseBtn @click="nameTestDialog = false" />
-      <VCardItem>
+      <VCardText>
         <NameTestView />
-      </VCardItem>
+      </VCardText>
     </VCard>
   </VDialog>
   <!-- 网络测试弹窗 -->
-  <VDialog
-    v-model="netTestDialog"
-    max-width="35rem"
-  >
+  <VDialog v-if="netTestDialog" v-model="netTestDialog" max-width="35rem" max-height="85vh" scrollable>
     <VCard title="网络测试">
       <DialogCloseBtn @click="netTestDialog = false" />
-      <VCardItem>
+      <VCardText>
         <NetTestView />
-      </VCardItem>
+      </VCardText>
     </VCard>
   </VDialog>
   <!-- 实时日志弹窗 -->
   <VDialog
+    v-if="loggingDialog"
     v-model="loggingDialog"
-    class="w-full lg:w-4/5"
     scrollable
+    max-width="70rem"
+    :fullscreen="!display.mdAndUp.value"
   >
-    <VCard title="实时日志">
+    <VCard>
       <DialogCloseBtn @click="loggingDialog = false" />
+      <VCardItem>
+        <VCardTitle class="inline-flex">
+          实时日志
+          <a class="mx-2 inline-flex items-center justify-center" :href="allLoggingUrl()" target="_blank">
+            <div
+              class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
+            >
+              <VIcon icon="mdi-open-in-new" />
+              <span class="ms-1">在新窗口中打开</span>
+            </div>
+          </a>
+        </VCardTitle>
+      </VCardItem>
       <VCardText>
         <LoggingView />
       </VCardText>
     </VCard>
   </VDialog>
   <!-- 规则测试弹窗 -->
-  <VDialog
-    v-model="ruleTestDialog"
-    max-width="50rem"
-    scrollable
-  >
+  <VDialog v-if="ruleTestDialog" v-model="ruleTestDialog" max-width="50rem" scrollable>
     <VCard title="优先级测试">
       <DialogCloseBtn @click="ruleTestDialog = false" />
       <VCardText>
@@ -191,4 +224,46 @@ const ruleTestDialog = ref(false)
       </VCardText>
     </VCard>
   </VDialog>
+  <!-- 系统健康检查弹窗 -->
+  <VDialog v-if="systemTestDialog" v-model="systemTestDialog" max-width="35rem" max-height="85vh" scrollable>
+    <VCard title="系统健康检查">
+      <DialogCloseBtn @click="systemTestDialog = false" />
+      <VCardText>
+        <ModuleTestView />
+      </VCardText>
+    </VCard>
+  </VDialog>
+  <!-- 消息中心弹窗 -->
+  <VDialog
+    v-if="messageDialog"
+    v-model="messageDialog"
+    max-width="60rem"
+    scrollable
+    :fullscreen="!display.mdAndUp.value"
+  >
+    <VCard title="消息中心">
+      <DialogCloseBtn @click="messageDialog = false" />
+      <VCardText ref="chatContainer">
+        <MessageView @scroll="scrollMessageToEnd" />
+      </VCardText>
+
+      <VCardItem>
+        <VTextField
+          v-model="user_message"
+          placeholder="输入消息或命令"
+          outlined
+          hide-details
+          single-line
+          clearable
+          density="compact"
+          :disabled="sendButtonDisabled"
+          @keydown.enter="sendMessage"
+        >
+          <template #append>
+            <VBtn color="primary" :disabled="sendButtonDisabled" @click="sendMessage"> 发送 </VBtn>
+          </template>
+        </VTextField>
+      </VCardItem>
+    </VCard>
+  </VDialog>
 </template>

src/layouts/components/UserNotification.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import store from '@/store'
+import { formatDateDifference } from '@core/utils/formatters'
+import { SystemNotification } from '@/api/types'
+
+// 是否有新消息
+const hasNewMessage = ref(false)
+
+// 通知列表
+const notificationList = ref<SystemNotification[]>([])
+
+// 事件源
+let eventSource: EventSource | null = null
+
+// 弹窗
+const appsMenu = ref(false)
+
+// SSE持续接收消息
+function startSSEMessager() {
+  const token = store.state.auth.token
+  if (token) {
+    eventSource = new EventSource(`${import.meta.env.VITE_API_BASE_URL}system/message?token=${token}`)
+    eventSource.addEventListener('message', event => {
+      if (event.data) {
+        const noti: SystemNotification = JSON.parse(event.data)
+        notificationList.value.unshift(noti)
+        hasNewMessage.value = true
+        // TODO 在顶部显示消息汽泡
+      }
+    })
+  }
+}
+
+// 页面加载时，加载当前用户数据
+onBeforeMount(async () => {
+  startSSEMessager()
+})
+
+// 页面卸载时，关闭事件源
+onBeforeUnmount(() => {
+  if (eventSource) eventSource.close()
+})
+</script>
+<template>
+  <VMenu v-model="appsMenu" width="400" transition="scale-transition" close-on-content-click>
+    <!-- Menu Activator -->
+    <template #activator="{ props }">
+      <VBadge v-if="hasNewMessage" dot color="error" :offset-x="5" :offset-y="5" v-bind="props">
+        <IconBtn>
+          <VIcon icon="mdi-bell-outline" />
+        </IconBtn>
+      </VBadge>
+      <IconBtn v-else v-bind="props">
+        <VIcon icon="mdi-bell-outline" />
+      </IconBtn>
+    </template>
+    <!-- Menu Content -->
+    <VCard>
+      <VCardItem class="border-b">
+        <VCardTitle>通知</VCardTitle>
+        <template #append>
+          <VTooltip text="设为已读">
+            <template #activator="{ props }">
+              <IconBtn
+                v-bind="props"
+                @click="
+                  () => {
+                    hasNewMessage = false
+                    appsMenu = false
+                  }
+                "
+              >
+                <VIcon icon="mdi-email-mark-as-unread" />
+              </IconBtn>
+            </template>
+          </VTooltip>
+        </template>
+      </VCardItem>
+      <VList lines="two" v-if="notificationList.length > 0" max-height="600">
+        <VListItem v-for="(item, i) in notificationList" :key="i">
+          <template #prepend>
+            <VAvatar rounded>
+              <VIcon v-if="item.type === 'user'" icon="mdi-account-alert" size="large"></VIcon>
+              <VIcon v-else-if="item.type === 'plugin'" icon="mdi-robot-happy" size="large"></VIcon>
+              <VIcon v-else icon="mdi-laptop" size="large"></VIcon>
+            </VAvatar>
+          </template>
+          <VListItemTitle class="overflow-visiable break-words whitespace-break-spaces">
+            {{ item.title }}
+          </VListItemTitle>
+          <VListItemSubtitle class="mt-2">{{ item.text }}</VListItemSubtitle>
+          <VListItemSubtitle class="mt-2">{{ formatDateDifference(item.date) }}</VListItemSubtitle>
+        </VListItem>
+      </VList>
+      <VList v-else>
+        <VListItem>
+          <VListItemTitle class="text-center">暂无通知</VListItemTitle>
+        </VListItem>
+      </VList>
+    </VCard>
+  </VMenu>
+</template>

src/layouts/components/UserProfile.vue

@@ -5,6 +5,7 @@ import { useToast } from 'vue-toast-notification'
 import router from '@/router'
 import avatar1 from '@images/avatars/avatar-1.png'
 import api from '@/api'
+import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
 
 // Vuex Store
 const store = useStore()
@@ -22,7 +23,8 @@ const progressDialog = ref(false)
 function logout() {
   // 清除登录状态信息
   store.dispatch('auth/clearToken')
-
+  // 主动登出时清除路由标记
+  store.state.auth.originalPath = null
   // 重定向到登录页面或其他适当的页面
   router.push('/login')
 }
@@ -33,14 +35,6 @@ async function restart() {
   const confirmed = await createConfirm({
     title: '确认',
     content: '确认重启系统吗？',
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '30rem',
-    },
-    cancellationButtonProps: {
-      variant: 'tonal',
-    },
   })
 
   if (confirmed) {
@@ -56,8 +50,7 @@ async function restart() {
         $toast.error(result.message)
         return
       }
-    }
-    catch (error) {
+    } catch (error) {
       console.error(error)
     }
     // 注销
@@ -72,125 +65,70 @@ const avatar = store.state.auth.avatar
 </script>
 
 <template>
-  <VAvatar
-    class="cursor-pointer"
-    color="primary"
-    variant="tonal"
-  >
+  <VAvatar class="cursor-pointer ms-3" color="primary" variant="tonal">
     <VImg :src="avatar ?? avatar1" />
 
     <!-- SECTION Menu -->
-    <VMenu
-      activator="parent"
-      width="230"
-      location="bottom end"
-      offset="14px"
-    >
+    <VMenu activator="parent" width="230" location="bottom end" offset="14px">
       <VList>
         <!-- 👉 User Avatar & Name -->
         <VListItem>
           <template #prepend>
             <VListItemAction start>
-              <VAvatar
-                color="primary"
-                variant="tonal"
-              >
+              <VAvatar color="primary" variant="tonal">
                 <VImg :src="avatar ?? avatar1" />
               </VAvatar>
             </VListItemAction>
           </template>
 
           <VListItemTitle class="font-weight-semibold">
-            {{ superUser ? "管理员" : "普通用户" }}
+            {{ superUser ? '管理员' : '普通用户' }}
           </VListItemTitle>
           <VListItemSubtitle>{{ userName }}</VListItemSubtitle>
         </VListItem>
         <VDivider class="my-2" />
 
         <!-- 👉 Profile -->
-        <VListItem
-          v-if="superUser"
-          link
-          to="setting"
-        >
+        <VListItem v-if="superUser" link to="setting">
           <template #prepend>
-            <VIcon
-              class="me-2"
-              icon="mdi-account-outline"
-              size="22"
-            />
+            <VIcon class="me-2" icon="mdi-account-outline" size="22" />
           </template>
-
           <VListItemTitle>设定</VListItemTitle>
         </VListItem>
 
+        <!-- 👉 FAQ -->
+        <VListItem href="https://github.com/jxxghp/MoviePilot/blob/main/README.md" target="_blank">
+          <template #prepend>
+            <VIcon class="me-2" icon="mdi-help-circle-outline" size="22" />
+          </template>
+          <VListItemTitle>帮助</VListItemTitle>
+        </VListItem>
+
         <!-- Divider -->
         <VDivider class="my-2" />
 
         <!-- 👉 restart -->
-        <VListItem
-          v-if="superUser"
-          @click="restart"
-        >
+        <VListItem v-if="superUser" @click="restart">
           <template #prepend>
-            <VIcon
-              class="me-2"
-              icon="mdi-restart"
-              size="22"
-            />
+            <VIcon class="me-2" icon="mdi-restart" size="22" />
           </template>
-
           <VListItemTitle>重启</VListItemTitle>
         </VListItem>
 
-        <!-- 👉 FAQ -->
-        <VListItem
-          href="https://github.com/jxxghp/MoviePilot/blob/main/README.md"
-          target="_blank"
-        >
-          <template #prepend>
-            <VIcon
-              class="me-2"
-              icon="mdi-help-circle-outline"
-              size="22"
-            />
-          </template>
-
-          <VListItemTitle>帮助</VListItemTitle>
-        </VListItem>
+        <!-- Divider -->
+        <VDivider class="my-2" />
 
         <!-- 👉 Logout -->
         <VListItem @click="logout">
-          <template #prepend>
-            <VIcon
-              class="me-2"
-              icon="mdi-logout"
-              size="22"
-            />
-          </template>
-
-          <VListItemTitle>注销</VListItemTitle>
+          <VBtn color="error" block>
+            <template #append> <VIcon size="small" icon="mdi-logout" /> </template>
+            退出登录
+          </VBtn>
         </VListItem>
       </VList>
     </VMenu>
     <!-- !SECTION -->
   </VAvatar>
   <!-- 重启进度框 -->
-  <VDialog
-    v-model="progressDialog"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
-      <VCardText class="text-center">
-        正在重启 ...
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
-      </VCardText>
-    </VCard>
-  </VDialog>
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" text="正在重启 ..." />
 </template>

src/layouts/default.vue

@@ -1,19 +1,21 @@
 <script lang="ts" setup>
 import DefaultLayoutWithVerticalNav from './components/DefaultLayoutWithVerticalNav.vue'
+
+const route = useRoute()
 </script>
 
 <template>
   <DefaultLayoutWithVerticalNav>
     <router-view v-slot="{ Component }">
       <keep-alive>
-        <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.fullPath" />
+        <component :is="Component" v-if="route.meta.keepAlive" :key="route.fullPath" />
       </keep-alive>
-      <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.fullPath" />
+      <component :is="Component" v-if="!route.meta.keepAlive" :key="route.fullPath" />
     </router-view>
   </DefaultLayoutWithVerticalNav>
 </template>
 
 <style lang="scss">
 // As we are using `layouts` plugin we need its styles to be imported
-@use "@layouts/styles/default-layout";
+@use '@layouts/styles/default-layout';
 </style>

src/main.ts

@@ -1,7 +1,10 @@
+import { VAceEditor } from 'vue3-ace-editor'
 import { createApp } from 'vue'
 import '@/@iconify/icons-bundle'
 import ToastPlugin from 'vue-toast-notification'
 import VuetifyUseDialog from 'vuetify-use-dialog'
+import './ace-config'
+import VueApexCharts from 'vue3-apexcharts'
 import { removeEl } from './@core/utils/dom'
 import App from '@/App.vue'
 import vuetify from '@/plugins/vuetify'
@@ -12,13 +15,41 @@ import '@core/scss/template/index.scss'
 import '@layouts/styles/index.scss'
 import '@styles/styles.scss'
 import 'vue-toast-notification/dist/theme-bootstrap.css'
+import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar'
+import 'vue3-perfect-scrollbar/style.css'
+import DialogCloseBtn from '@/@core/components/DialogCloseBtn.vue'
+import MediaCard from './components/cards/MediaCard.vue'
+import PosterCard from './components/cards/PosterCard.vue'
+import BackdropCard from './components/cards/BackdropCard.vue'
+import PersonCard from './components/cards/PersonCard.vue'
+import MediaInfoCard from './components/cards/MediaInfoCard.vue'
+import TorrentCard from './components/cards/TorrentCard.vue'
+import MediaIdSelector from './components/misc/MediaIdSelector.vue'
+import { fixArrayAt } from '@/@core/utils/compatibility'
 
+// 修复低版本Safari等浏览器数组不支持at函数的问题
+fixArrayAt()
+
+// 加载字体
 loadFonts()
 
-// Create vue app
+// 创建Vue实例
 const app = createApp(App)
 
-// Use plugins Mount vue app
+// 注册全局组件
+app
+  .component('VAceEditor', VAceEditor)
+  .component('VApexChart', VueApexCharts)
+  .component('VDialogCloseBtn', DialogCloseBtn)
+  .component('VMediaCard', MediaCard)
+  .component('VPosterCard', PosterCard)
+  .component('VBackdropCard', BackdropCard)
+  .component('VPersonCard', PersonCard)
+  .component('VMediaInfoCard', MediaInfoCard)
+  .component('VTorrentCard', TorrentCard)
+  .component('VMediaIdSelector', MediaIdSelector)
+
+// 注册插件
 app
   .use(vuetify)
   .use(router)
@@ -26,6 +57,27 @@ app
   .use(ToastPlugin, {
     position: 'bottom-right',
   })
-  .use(VuetifyUseDialog)
+  .use(VuetifyUseDialog, {
+    confirmDialog: {
+      dialogProps: {
+        maxWidth: '40rem',
+      },
+      confirmationButtonProps: {
+        variant: 'elevated',
+        color: 'primary',
+        class: 'me-3 px-5',
+        'prepend-icon': 'mdi-check',
+      },
+      cancellationButtonProps: {
+        variant: 'outlined',
+        color: 'secondary',
+        class: 'me-3',
+      },
+      confirmationText: '确认',
+      cancellationText: '取消',
+    },
+  })
+  .use(PerfectScrollbarPlugin)
+  .use(VueApexCharts)
   .mount('#app')
   .$nextTick(() => removeEl('#loading-bg'))

src/pages/browse.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import api from '@/api'
 import MediaCardListView from '@/views/discover/MediaCardListView.vue'
+import PersonCardListView from '@/views/discover/PersonCardListView.vue'
 
 // 输入参数
 const props = defineProps({
@@ -11,14 +13,16 @@ const props = defineProps({
 const route = useRoute()
 
 // 标题
-const title = route.query?.title?.toString()
+let title = route.query?.title?.toString()
+
+// 类型
+const type = route.query?.type?.toString()
+if (type === 'person') title = '演员：' + title
 
 // 计算API路径
 function getApiPath(paths: string[] | string) {
-  if (Array.isArray(paths))
-    return paths.join('/')
-  else
-    return paths
+  if (Array.isArray(paths)) return paths.join('/')
+  else return paths
 }
 </script>
 
@@ -26,14 +30,15 @@ function getApiPath(paths: string[] | string) {
   <div>
     <div v-if="title" class="mt-3 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">
+        <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"
-    />
+    <PersonCardListView v-if="type === 'person'" :apipath="getApiPath(props.paths || '')" :params="route.query" />
+    <MediaCardListView v-else :apipath="getApiPath(props.paths || '')" :params="route.query" />
   </div>
 </template>

src/pages/dashboard.vue

@@ -1,62 +1,306 @@
 <script setup lang="ts">
-import AnalyticsMediaStatistic from '@/views/dashboard/AnalyticsMediaStatistic.vue'
-import AnalyticsScheduler from '@/views/dashboard/AnalyticsScheduler.vue'
-import AnalyticsSpeed from '@/views/dashboard/AnalyticsSpeed.vue'
-import AnalyticsStorage from '@/views/dashboard/AnalyticsStorage.vue'
-import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue'
-import AnalyticsCpu from '@/views/dashboard/AnalyticsCpu.vue'
-import AnalyticsMemory from '@/views/dashboard/AnalyticsMemory.vue'
+import draggable from 'vuedraggable'
+import api from '@/api'
+import { isNullOrEmptyObject } from '@/@core/utils'
+import { DashboardItem } from '@/api/types'
+import store from '@/store'
+import DashboardElement from '@/components/misc/DashboardElement.vue'
+
+// 从Vuex Store中获取superuser信息
+const superUser = store.state.auth.superUser
+
+// 仪表板启用配置
+const enableConfig = ref<{ [key: string]: boolean }>({
+  mediaStatistic: true,
+  scheduler: false,
+  speed: false,
+  storage: true,
+  weeklyOverview: false,
+  cpu: false,
+  memory: false,
+  library: true,
+  playing: true,
+  latest: true,
+})
+
+// 仪表板顺序配置
+const orderConfig = ref<{ id: string, key: string }[]>([])
+
+// 仪表板配置
+const dashboardConfigs = ref<DashboardItem[]>([
+  {
+    id: 'storage',
+    name: '存储空间',
+    key: "",
+    attrs: {},
+    cols: { cols: 12, md: 4 },
+    elements: [],
+  },
+  {
+    id: 'mediaStatistic',
+    name: '媒体统计',
+    key: "",
+    attrs: {},
+    cols: { cols: 12, md: 8 },
+    elements: [],
+  },
+  {
+    id: 'weeklyOverview',
+    name: '最近入库',
+    key: "",
+    attrs: {},
+    cols: { cols: 12, md: 4 },
+    elements: [],
+  },
+  {
+    id: 'speed',
+    name: '实时速率',
+    key: "",
+    attrs: {},
+    cols: { cols: 12, md: 4 },
+    elements: [],
+  },
+  {
+    id: 'scheduler',
+    name: '后台任务',
+    key: "",
+    attrs: {},
+    cols: { cols: 12, md: 4 },
+    elements: [],
+  },
+  {
+    id: 'cpu',
+    name: 'CPU',
+    key: "",
+    attrs: {},
+    cols: { cols: 12, md: 6 },
+    elements: [],
+  },
+  {
+    id: 'memory',
+    name: '内存',
+    key: "",
+    attrs: {},
+    cols: { cols: 12, md: 6 },
+    elements: [],
+  },
+  {
+    id: 'library',
+    name: '我的媒体库',
+    key: "",
+    attrs: {},
+    cols: { cols: 12 },
+    elements: [],
+  },
+  {
+    id: 'playing',
+    name: '继续观看',
+    key: "",
+    attrs: {},
+    cols: { cols: 12 },
+    elements: [],
+  },
+  {
+    id: 'latest',
+    name: '最近添加',
+    key: "",
+    attrs: {},
+    cols: { cols: 12 },
+    elements: [],
+  },
+])
+
+// 插件的仪表板元信息
+const pluginDashboardMeta = ref<any[]>([])
+
+// 插件仪表板的刷新状态
+const pluginDashboardRefreshStatus = ref<{ [key: string]: boolean }>({})
+
+// 弹窗
+const dialog = ref(false)
+
+// 加载用户监控面板配置（本地无配置时才加载）
+async function loadDashboardConfig() {
+  // 显示配置
+  const local_enable = localStorage.getItem('MP_DASHBOARD')
+  if (local_enable) {
+    enableConfig.value = JSON.parse(local_enable)
+  } else {
+    const response = await api.get('/user/config/Dashboard')
+    if (response && response.data && response.data.value) {
+      enableConfig.value = response.data.value
+      localStorage.setItem('MP_DASHBOARD', JSON.stringify(response.data.value))
+    }
+  }
+  // 顺序配置
+  const local_order = localStorage.getItem('MP_DASHBOARD_ORDER')
+  if (local_order) {
+    orderConfig.value = JSON.parse(local_order)
+  } else {
+    const response2 = await api.get('/user/config/DashboardOrder')
+    if (response2 && response2.data && response2.data.value) {
+      orderConfig.value = response2.data.value
+      localStorage.setItem('MP_DASHBOARD_ORDER', JSON.stringify(orderConfig.value))
+    }
+  }
+  // 排序
+  if (orderConfig.value) {
+    sortDashboardConfigs()
+  }
+}
+
+// 按order的顺序对dashboardConfigs进行排序
+function sortDashboardConfigs() {
+  dashboardConfigs.value.sort((a, b) => {
+    const aIndex = orderConfig.value.findIndex((item: { id: string, key: string }) => item.id === a.id && item.key === a.key)
+    const bIndex = orderConfig.value.findIndex((item: { id: string, key: string }) => item.id === b.id && item.key === b.key)
+    return (aIndex === -1 ? 999 : aIndex) - (bIndex === -1 ? 999 : bIndex)
+  })
+}
+
+// 设置项目
+function saveDashboardConfig() {
+  // 启用配置
+  const data = JSON.stringify(enableConfig.value)
+  localStorage.setItem('MP_DASHBOARD', data)
+  // 顺序配置，从dashboardConfigs中提取
+  const order = JSON.stringify(dashboardConfigs.value.map(item => ({ id: item.id, key: item.key })))
+  localStorage.setItem('MP_DASHBOARD_ORDER', order)
+  // 保存到服务端
+  try {
+    api.post('/user/config/Dashboard', data, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    api.post('/user/config/DashboardOrder', order, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  } catch (error) {
+    console.error(error)
+  }
+  // 保存后重新获取插件仪表板
+  getPluginDashboardMeta()
+  dialog.value = false
+}
+
+// 构造插件仪表板主ID
+function buildPluginDashboardId(plugin_id: string, key: string) {
+  if (!key) return plugin_id
+  return plugin_id + ':' + key
+}
+
+// 调用API获取所有插件的仪表板元信息
+async function getPluginDashboardMeta() {
+  // 只有超级用户才能获取
+  if (!superUser) return
+  pluginDashboardMeta.value = await api.get('/plugin/dashboard/meta')
+  try {
+    if (!isNullOrEmptyObject(pluginDashboardMeta.value)) {
+      // 下载插件仪表板配置
+      pluginDashboardMeta.value.forEach(async (pluginDashboard: { id: string, key: string }) => {
+        const pluginDashboardId = buildPluginDashboardId(pluginDashboard.id, pluginDashboard.key)
+        // 初始化插件仪表板的刷新状态
+        pluginDashboardRefreshStatus.value[pluginDashboardId] = true
+        await getPluginDashboard(pluginDashboard.id, pluginDashboard.key)
+      })
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 获取一个插件的仪表板配置项
+async function getPluginDashboard(id: string, key: string) {
+  try {
+    const url = key ? `/plugin/dashboard/${id}/${key}` : `/plugin/dashboard/${id}`
+    api.get(url).then((res: any) => {
+      if (res) {
+        // 名称替换为元信息的名称
+        const meta = pluginDashboardMeta.value.find((item: { id: string, key: string }) => item.id === id && item.key === key)
+        if (meta) res.name = meta.name
+        // 保存到仪表板配置中，如果已经存在则替换
+        const index = dashboardConfigs.value.findIndex((item: { id: string, key: string }) => item.id === id && item.key === key)
+        if (index !== -1) {
+          dashboardConfigs.value[index] = res
+        } else {
+          dashboardConfigs.value.push(res)
+          // 排序
+          sortDashboardConfigs()
+        }
+        const pluginDashboardId = buildPluginDashboardId(id, key)
+        // 定时刷新
+        if (res.attrs?.refresh && pluginDashboardRefreshStatus.value[pluginDashboardId] && enableConfig.value[pluginDashboardId]) {
+          setTimeout(() => {
+            getPluginDashboard(id, key)
+          }, res.attrs.refresh * 1000)
+        }
+      }
+    })
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 拖动排序结束
+function dragOrderEnd() {
+  // 保存数据
+  saveDashboardConfig()
+}
+
+onBeforeMount(async () => {
+  await loadDashboardConfig()
+  getPluginDashboardMeta()
+})
 </script>
 
 <template>
-  <VRow class="match-height">
-    <VCol
-      cols="12"
-      md="4"
-    >
-      <AnalyticsStorage />
-    </VCol>
+  <!-- 仪表板 -->
+  <draggable
+    v-model="dashboardConfigs"
+    @end="dragOrderEnd"
+    handle=".cursor-move"
+    item-key="id"
+    tag="VRow"
+    :component-data="{ 'class': 'match-height' }"
+  >
+    <template #item="{ element }">
+      <VCol v-if="enableConfig[buildPluginDashboardId(element.id, element.key)] && element.cols" v-bind:="element.cols">
+        <DashboardElement :config="element" v-model:refreshStatus="pluginDashboardRefreshStatus[buildPluginDashboardId(element.id, element.key)]" />
+      </VCol>
+    </template>
+  </draggable>
 
-    <VCol
-      cols="12"
-      md="8"
-    >
-      <AnalyticsMediaStatistic />
-    </VCol>
+  <!-- 底部操作按钮 -->
+  <VFab icon="mdi-view-dashboard-edit" location="bottom end" size="x-large" fixed app appear @click="dialog = true" />
 
-    <VCol
-      cols="12"
-      md="4"
-    >
-      <AnalyticsWeeklyOverview />
-    </VCol>
-
-    <VCol
-      cols="12"
-      md="4"
-    >
-      <AnalyticsSpeed />
-    </VCol>
-
-    <VCol
-      cols="12"
-      md="4"
-    >
-      <AnalyticsScheduler />
-    </VCol>
-
-    <VCol
-      cols="12"
-      md="6"
-    >
-      <AnalyticsCpu />
-    </VCol>
-
-    <VCol
-      cols="12"
-      md="6"
-    >
-      <AnalyticsMemory />
-    </VCol>
-  </VRow>
+  <!-- 弹窗，根据配置生成选项 -->
+  <VDialog v-model="dialog" max-width="35rem" scrollable>
+    <VCard>
+      <VCardItem>
+        <VCardTitle>设置仪表板</VCardTitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol v-for="item in dashboardConfigs" :key="buildPluginDashboardId(item.id, item.key)" cols="6" md="4" sm="4">
+            <VCheckbox v-model="enableConfig[buildPluginDashboardId(item.id, item.key)]" :label="item.attrs?.title ?? item.name" />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <VDivider />
+      <VCardText class="pt-5 text-end">
+        <VSpacer />
+        <VBtn variant="outlined" color="secondary" class="me-4" @click="dialog = false"> 关闭 </VBtn>
+        <VBtn @click="saveDashboardConfig">
+          <template #prepend>
+            <VIcon icon="mdi-content-save" />
+          </template>
+          保存
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
 </template>

src/pages/login.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
+import { debounce } from 'lodash'
 import { VForm } from 'vuetify/components/VForm'
 import { useStore } from 'vuex'
 import { requiredValidator } from '@/@validators'
 import api from '@/api'
 import router from '@/router'
 import logo from '@images/logo.png'
+import { useTheme } from 'vuetify'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
+
+const { global: globalTheme } = useTheme()
 
 // Vuex Store
 const store = useStore()
@@ -13,6 +18,7 @@ const store = useStore()
 const form = ref({
   username: '',
   password: '',
+  otp_password: '',
   remember: true,
 })
 
@@ -30,6 +36,12 @@ const backgroundImageUrl = ref('')
 // 背景图片加载状态
 const isImageLoaded = ref(false)
 
+// 是否开启双重验证
+const isOTP = ref(false)
+
+// 用户名称输入框
+const usernameInput = ref()
+
 // 获取背景图片
 async function fetchBackgroundImage() {
   api
@@ -41,20 +53,64 @@ async function fetchBackgroundImage() {
       console.log(error)
     })
 }
+// 查询是否开启双重验证
+const fetchOTP = debounce(async () => {
+  const userid = usernameInput.value?.value
+  if (!userid) {
+    isOTP.value = false
+    return
+  }
+  api
+    .get(`/user/otp/${userid}`)
+    .then((response: any) => {
+      isOTP.value = response.success
+    })
+    .catch((error: any) => {
+      console.log(error)
+    })
+}, 500)
+
+// 获取用户主题配置
+async function fetchThemeConfig() {
+  const response = await api.get('/user/config/theme')
+  if (response && response.data && response.data.value) {
+    return response.data.value
+  }
+  return null
+}
+
+// 生效主题
+async function setTheme() {
+  let themeValue = (await fetchThemeConfig()) || localStorage.getItem('theme') || 'light'
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
+  globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
+  // 存储主题到本地
+  localStorage.setItem('theme', themeValue)
+  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
+}
+
+async function afterLogin() {
+  // 生效主题配置
+  await setTheme()
+  // 跳转到首页或回原始页面
+  router.push(store.state.auth.originalPath ?? '/')
+}
 
 // 登录获取token事件
 function login() {
   errorMessage.value = ''
 
   // 进行表单校验
-  if (!form.value.username || !form.value.password)
+  if (!form.value.username || !form.value.password || (isOTP.value && !form.value.otp_password)) {
+    errorMessage.value = '请输入完整信息'
     return
-
+  }
   // 用户名密码
   const formData = new FormData()
 
   formData.append('username', form.value.username)
   formData.append('password', form.value.password)
+  formData.append('otp_password', form.value.otp_password)
 
   // 请求token
   api
@@ -77,21 +133,16 @@ function login() {
       store.dispatch('auth/updateUserName', username)
       store.dispatch('auth/updateAvatar', avatar)
 
-      // 跳转到首页
-      router.push('/')
+      // 登录后处理
+      afterLogin()
     })
     .catch((error: any) => {
       // 登录失败，显示错误提示
-      if (!error.response)
-        errorMessage.value = '登录失败，请检查网络连接'
-      else if (error.response.status === 401)
-        errorMessage.value = '登录失败，请检查用户名和密码是否正确'
-      else if (error.response.status === 403)
-        errorMessage.value = '登录失败，您没有权限访问'
-      else if (error.response.status === 500)
-        errorMessage.value = '登录失败，服务器错误'
-      else
-        errorMessage.value = `登录失败 ${error.response.status}，请检查用户名和密码是否正确`
+      if (!error.response) errorMessage.value = '登录失败，请检查网络连接'
+      else if (error.response.status === 401) errorMessage.value = '登录失败，请检查用户名、密码或双重验证是否正确'
+      else if (error.response.status === 403) errorMessage.value = '登录失败，您没有权限访问'
+      else if (error.response.status === 500) errorMessage.value = '登录失败，服务器错误'
+      else errorMessage.value = `登录失败 ${error.response.status}，请检查用户名、密码或双重验证码是否正确`
     })
 }
 
@@ -104,8 +155,7 @@ onMounted(() => {
   // 如果token存在，且保持登录状态为true，则跳转到首页
   if (token && remember) {
     router.push('/')
-  }
-  else {
+  } else {
     // 获取背景图片
     fetchBackgroundImage()
   }
@@ -134,64 +184,47 @@ onMounted(() => {
             </div>
           </template>
 
-          <VCardTitle class="font-weight-semibold text-2xl text-uppercase">
-            MoviePilot
-          </VCardTitle>
+          <VCardTitle class="font-weight-semibold text-2xl text-uppercase"> MoviePilot </VCardTitle>
         </VCardItem>
 
         <VCardText>
-          <VForm
-            ref="refForm"
-            @submit.prevent="() => {}"
-          >
+          <VForm ref="refForm" @submit.prevent="() => {}">
             <VRow>
               <!-- username -->
               <VCol cols="12">
                 <VTextField
+                  ref="usernameInput"
                   v-model="form.username"
                   label="用户名"
                   type="text"
                   :rules="[requiredValidator]"
+                  @input="fetchOTP"
                 />
               </VCol>
-
               <!-- password -->
               <VCol cols="12">
                 <VTextField
                   v-model="form.password"
                   label="密码"
                   :type="isPasswordVisible ? 'text' : 'password'"
-                  :append-inner-icon="
-                    isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
-                  "
+                  :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
                   :rules="[requiredValidator]"
                   @click:append-inner="isPasswordVisible = !isPasswordVisible"
                 />
-
-                <div
-                  v-if="errorMessage"
-                  class="text-error mt-1"
-                >
+              </VCol>
+              <VCol cols="12">
+                <VTextField v-if="isOTP" v-model="form.otp_password" label="双重验证码" type="input" />
+                <!-- remember me checkbox -->
+                <div class="d-flex align-center justify-space-between flex-wrap">
+                  <VCheckbox v-model="form.remember" label="保持登录" required />
+                </div>
+              </VCol>
+              <VCol cols="12">
+                <!-- login button -->
+                <VBtn block type="submit" @click="login"> 登录 </VBtn>
+                <div v-if="errorMessage" class="text-error mt-2 text-shadow">
                   {{ errorMessage }}
                 </div>
-
-                <!-- remember me checkbox -->
-                <div class="d-flex align-center justify-space-between flex-wrap mt-1 mb-4">
-                  <VCheckbox
-                    v-model="form.remember"
-                    label="保持登录"
-                    required
-                  />
-                </div>
-
-                <!-- login button -->
-                <VBtn
-                  block
-                  type="submit"
-                  @click="login"
-                >
-                  登录
-                </VBtn>
               </VCol>
             </VRow>
           </VForm>
@@ -202,7 +235,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss">
-@use "@core/scss/pages/page-auth.scss";
+@use '@core/scss/pages/page-auth.scss';
 
 .v-card-item__prepend {
   padding-inline-end: 0 !important;

src/pages/person.vue

@@ -7,15 +7,15 @@ const route = useRoute()
 // Person Id
 const personid = route.query?.personid?.toString()
 
+// 来源
+const source = route.query?.source?.toString()
+
 // 类型
 const type = route.query?.type?.toString()
 </script>
 
 <template>
   <div>
-    <PersonDetailView
-      :personid="personid"
-      :type="type"
-    />
+    <PersonDetailView :personid="personid" :type="type" :source="source" />
   </div>
 </template>

src/pages/ranking.vue

@@ -1,79 +1,82 @@
 <script setup lang="ts">
 import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
+
+const viewList = reactive<{apipath: string, linkurl: string, title: string}[]>([
+  {
+    apipath: 'tmdb/trending',
+    linkurl: "/browse/tmdb/trending?title=流行趋势",
+    title: "流行趋势",
+  },
+  {
+     apipath: "douban/showing",
+      linkurl: "/browse/douban/showing?title=正在热映",
+      title: "正在热映"
+  },
+  {
+    apipath: "bangumi/calendar",
+      linkurl: "/browse/bangumi/calendar?title=Bangumi每日放送",
+      title: "Bangumi每日放送"
+  },
+  {
+    apipath: "tmdb/movies",
+      linkurl: "/browse/tmdb/movies?title=热门电影",
+      title: "热门电影"
+  },
+  {
+     apipath: "tmdb/tvs?with_original_language=zh|en|ja|ko",
+      linkurl: "/browse/tmdb/tvs??with_original_language=zh|en|ja|ko&title=热门电视剧",
+      title: "热门电视剧"
+  },
+  {
+    apipath: "douban/movie_hot",
+      linkurl: "/browse/douban/movie_hot?title=热门电影",
+      title: "热门电影"
+  },
+  {
+     apipath: "douban/tv_hot",
+      linkurl: "/browse/douban/tv_hot?title=热门电视剧",
+      title: "热门电视剧"
+  },
+  {
+    apipath: "douban/tv_animation",
+      linkurl: "/browse/douban/tv_animation?title=热门动漫",
+      title: "热门动漫"
+  },
+  {
+    apipath: "douban/movies",
+      linkurl: "/browse/douban/movies?title=最新电影",
+      title: "最新电影"
+  },
+  {
+    apipath: "douban/tvs",
+      linkurl: "/browse/douban/tvs?title=最新电视剧",
+      title: "最新电视剧"
+  },
+  {
+    apipath: "douban/movie_top250",
+      linkurl: "/browse/douban/movie_top250?title=电影TOP250",
+      title: "电影TOP250"
+  },
+  {
+    apipath: "douban/tv_weekly_chinese",
+      linkurl: "/browse/douban/tv_weekly_chinese?title=国产剧集榜",
+      title: "国产剧集榜"
+  },
+  {
+    apipath: "douban/tv_weekly_global",
+      linkurl: "/browse/douban/tv_weekly_global?title=全球剧集榜",
+      title: "全球剧集榜"
+  }
+])
+
 </script>
 
 <template>
   <div>
-    <MediaCardSlideView
-      apipath="tmdb/trending"
-      linkurl="/browse/tmdb/trending?title=流行趋势"
-      title="流行趋势"
-    />
-
-    <MediaCardSlideView
-      apipath="douban/showing"
-      linkurl="/browse/douban/showing?title=正在热映"
-      title="正在热映"
-    />
-
-    <MediaCardSlideView
-      apipath="tmdb/movies"
-      linkurl="/browse/tmdb/movies?title=热门电影"
-      title="热门电影"
-    />
-
-    <MediaCardSlideView
-      apipath="tmdb/tvs?with_original_language=zh|en|ja|ko"
-      linkurl="/browse/tmdb/tvs??with_original_language=zh|en|ja|ko&title=热门电视剧"
-      title="热门电视剧"
-    />
-
-    <MediaCardSlideView
-      apipath="douban/movie_hot"
-      linkurl="/browse/douban/movie_hot?title=热门电影"
-      title="热门电影"
-    />
-
-    <MediaCardSlideView
-      apipath="douban/tv_hot"
-      linkurl="/browse/douban/tv_hot?title=热门电视剧"
-      title="热门电视剧"
-    />
-
-    <MediaCardSlideView
-      apipath="douban/tv_animation"
-      linkurl="/browse/douban/tv_animation?title=热门动漫"
-      title="热门动漫"
-    />
-
-    <MediaCardSlideView
-      apipath="douban/movies"
-      linkurl="/browse/douban/movies?title=最新电影"
-      title="最新电影"
-    />
-
-    <MediaCardSlideView
-      apipath="douban/tvs"
-      linkurl="/browse/douban/tvs?title=最新电视剧"
-      title="最新电视剧"
-    />
-
-    <MediaCardSlideView
-      apipath="douban/movie_top250"
-      linkurl="/browse/douban/movie_top250?title=电影TOP250"
-      title="电影TOP250"
-    />
-
-    <MediaCardSlideView
-      apipath="douban/tv_weekly_chinese"
-      linkurl="/browse/douban/tv_weekly_chinese?title=国产剧集榜"
-      title="国产剧集榜"
-    />
-
-    <MediaCardSlideView
-      apipath="douban/tv_weekly_global"
-      linkurl="/browse/douban/tv_weekly_global?title=全球剧集榜"
-      title="全球剧集榜"
+    <MediaCardSlideView 
+      v-for="item in viewList" 
+      :key="item.apipath"
+      v-bind="item"
     />
   </div>
 </template>

src/pages/resource.vue

@@ -18,6 +18,9 @@ const type = route.query?.type?.toString() ?? ''
 // 搜索字段
 const area = route.query?.area?.toString() ?? ''
 
+// 搜索季
+const season = route.query?.season?.toString() ?? ''
+
 // 视图类型，从localStorage中读取
 const viewType = ref<string>(localStorage.getItem('MPTorrentsViewType') ?? 'card')
 
@@ -36,6 +39,12 @@ const progressValue = ref(0)
 // 加载进度SSE
 const progressEventSource = ref<EventSource>()
 
+// 错误标题
+const errorTitle = ref('没有数据')
+
+// 错误描述
+const errorDescription = ref('未搜索到任何资源')
+
 // 使用SSE监听加载进度
 function startLoadingProgress() {
   progressText.value = '正在搜索，请稍候...'
@@ -45,7 +54,7 @@ function startLoadingProgress() {
   progressEventSource.value = new EventSource(
     `${import.meta.env.VITE_API_BASE_URL}system/progress/search?token=${token}`,
   )
-  progressEventSource.value.onmessage = (event) => {
+  progressEventSource.value.onmessage = event => {
     const progress = JSON.parse(event.data)
     if (progress) {
       progressText.value = progress.text
@@ -71,28 +80,33 @@ async function fetchData() {
     if (!keyword) {
       // 查询上次搜索结果
       dataList.value = await api.get('search/last')
-    }
-    else {
+    } else {
       startLoadingProgress()
       // 优先按TMDBID精确查询
-      if (keyword?.startsWith('tmdb:') || keyword?.startsWith('douban:')) {
-        dataList.value = await api.get(`search/media/${keyword}`, {
+      if (keyword?.startsWith('tmdb:') || keyword?.startsWith('douban:') || keyword?.startsWith('bangumi:')) {
+        const result: { [key: string]: any } = await api.get(`search/media/${keyword}`, {
           params: {
             mtype: type,
             area,
+            season,
           },
         })
-      }
-      else {
+        if (result.success) {
+          dataList.value = result.data
+        } else {
+          errorDescription.value = result.message
+        }
+      } else {
         // 按标题模糊查询
         dataList.value = await api.get(`search/title/${keyword}`)
       }
       stopLoadingProgress()
+      // 从浏览器历史中删除当前搜索
+      window.history.replaceState(null, '', window.location.pathname)
     }
     // 标记已刷新
     isRefreshed.value = true
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
     return Promise.reject(error)
   }
@@ -105,42 +119,35 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="!isRefreshed" class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center">
-    <VProgressCircular v-if="!keyword" size="48" indeterminate color="primary" />
-    <VProgressCircular v-if="keyword" class="mb-3" color="primary" :model-value="progressValue" size="64" />
-    <span>{{ progressText }}</span>
-  </div>
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" :text="progressText" :progress="progressValue" />
   <NoDataFound
     v-if="dataList.length === 0 && isRefreshed"
-    error-code="404"
-    error-title="没有资源"
-    error-description="没有搜索到符合条件的资源。"
+    :error-title="errorTitle"
+    :error-description="errorDescription"
   />
   <div v-if="dataList.length > 0">
-    <TorrentRowListView
-      v-if="viewType === 'list'"
-      :items="dataList"
-    />
-    <TorrentCardListView
-      v-else
-      :items="dataList"
-    />
+    <TorrentRowListView v-if="viewType === 'list'" :items="dataList" />
+    <TorrentCardListView v-else :items="dataList" />
   </div>
   <!-- 视图切换 -->
-  <span v-if="dataList.length > 0" class="fixed right-5 bottom-5">
-    <VBtn
-      v-if="viewType === 'list'"
-      size="x-large"
-      icon="mdi-view-grid"
-      color="primary"
-      @click="setViewType('card')"
-    />
-    <VBtn
-      v-else
-      size="x-large"
-      icon="mdi-view-list"
-      color="primary"
-      @click="setViewType('list')"
-    />
-  </span>
+  <VFab
+    v-if="viewType === 'list'"
+    icon="mdi-view-grid"
+    location="bottom end"
+    size="x-large"
+    fixed
+    app
+    appear
+    @click="setViewType('card')"
+  />
+  <VFab
+    v-else
+    icon="mdi-view-list"
+    location="bottom end"
+    size="x-large"
+    fixed
+    app
+    appear
+    @click="setViewType('list')"
+  />
 </template>

src/pages/setting.vue

@@ -8,6 +8,8 @@ import AccountSettingAbout from '@/views/setting/AccountSettingAbout.vue'
 import AccountSettingSearch from '@/views/setting/AccountSettingSearch.vue'
 import AccountSettingSubscribe from '@/views/setting/AccountSettingSubscribe.vue'
 import AccountSettingService from '@/views/setting/AccountSettingService.vue'
+import AccountSettingSystem from '@/views/setting/AccountSettingSystem.vue'
+import AccountSettingDirectory from '@/views/setting/AccountSettingDirectory.vue'
 
 const route = useRoute()
 
@@ -20,6 +22,16 @@ const tabs = [
     icon: 'mdi-account',
     tab: 'account',
   },
+  {
+    title: '连接',
+    icon: 'mdi-server-network',
+    tab: 'system',
+  },
+  {
+    title: '目录',
+    icon: 'mdi-folder',
+    tab: 'directory',
+  },
   {
     title: '站点',
     icon: 'mdi-web',
@@ -60,22 +72,14 @@ const tabs = [
 
 <template>
   <div>
-    <VTabs
-      v-model="activeTab"
-      show-arrows
-    >
+    <VTabs v-model="activeTab" show-arrows class="v-tabs-pill">
       <VTab v-for="item in tabs" :key="item.icon" :value="item.tab">
         <VIcon size="20" start :icon="item.icon" />
         {{ item.title }}
       </VTab>
     </VTabs>
-    <VDivider />
 
-    <VWindow
-      v-model="activeTab"
-      class="mt-5 disable-tab-transition"
-      :touch="false"
-    >
+    <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
       <!-- 用户 -->
       <VWindowItem value="account">
         <transition name="fade-slide" appear>
@@ -83,6 +87,20 @@ const tabs = [
         </transition>
       </VWindowItem>
 
+      <!-- 连接 -->
+      <VWindowItem value="system">
+        <transition name="fade-slide" appear>
+          <AccountSettingSystem />
+        </transition>
+      </VWindowItem>
+
+      <!-- 目录 -->
+      <VWindowItem value="directory">
+        <transition name="fade-slide" appear>
+          <AccountSettingDirectory />
+        </transition>
+      </VWindowItem>
+
       <!-- 站点 -->
       <VWindowItem value="site">
         <transition name="fade-slide" appear>
@@ -117,12 +135,14 @@ const tabs = [
           <AccountSettingNotification />
         </transition>
       </VWindowItem>
+
       <!-- 词表 -->
       <VWindowItem value="words">
         <transition name="fade-slide" appear>
           <AccountSettingWords />
         </transition>
       </VWindowItem>
+
       <!-- 关于 -->
       <VWindowItem value="about">
         <transition name="fade-slide" appear>

src/pages/subscribe-movie.vue

@@ -1,9 +1,44 @@
 <script setup lang="ts">
 import SubscribeListView from '@/views/subscribe/SubscribeListView.vue'
+import SubscribePopularView from '@/views/subscribe/SubscribePopularView.vue'
+
+const route = useRoute()
+
+// 标签页
+const tabs = [
+  {
+    title: '我的订阅',
+    tab: 'mysub',
+  },
+  {
+    title: '热门订阅',
+    tab: 'popular',
+  },
+]
+
+// 当前标签
+const activeTab = ref(route.params.tab)
 </script>
 
 <template>
   <div>
-    <SubscribeListView type="电影" />
+    <VTabs v-model="activeTab">
+      <VTab v-for="item in tabs" :value="item.tab">
+        <span class="mx-5">{{ item.title }}</span>
+      </VTab>
+    </VTabs>
+
+    <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
+      <VWindowItem value="mysub">
+        <transition name="fade-slide" appear>
+          <SubscribeListView type="电影" />
+        </transition>
+      </VWindowItem>
+      <VWindowItem value="popular">
+        <transition name="fade-slide" appear>
+          <SubscribePopularView type="电影" />
+        </transition>
+      </VWindowItem>
+    </VWindow>
   </div>
 </template>