更新 DefaultLayout.vue

feat(user): New avatar file add webp format support

.env.development

@@ -1 +1,2 @@
-VITE_API_BASE_URL=http://localhost:3001/api/v1/
+VITE_API_BASE_URL=/api/v1/
+VITE_PUBLIC_VAPID_KEY=BH3w49sZA6jXUnE-yt4jO6VKh73lsdsvwoJ6Hx7fmPIDKoqGiUl2GEoZzy-iJfn4SfQQcx7yQdHf9RknwrL_lSM

.env.production

@@ -1 +1,2 @@
 VITE_API_BASE_URL=api/v1/
+VITE_PUBLIC_VAPID_KEY=BH3w49sZA6jXUnE-yt4jO6VKh73lsdsvwoJ6Hx7fmPIDKoqGiUl2GEoZzy-iJfn4SfQQcx7yQdHf9RknwrL_lSM

.github/workflows/build.yml

@@ -1,12 +1,12 @@
-name: Build Moviepilot-Frontend
+name: Build Moviepilot-Frontend v2
 
 on:
   workflow_dispatch:
   push:
     branches:
-      - main
+      - v2
     paths:
-      - package.json
+      - 'package.json'
 
 jobs:
   build:
@@ -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,15 +39,24 @@ jobs:
         run: |
           yarn
           yarn build
+          echo "$frontend_version" > dist/version.txt
           zip -r dist.zip dist
 
+      - name: Delete Release
+        uses: dev-drprasad/delete-tag-and-release@v1.1
+        with:
+          tag_name: ${{ env.frontend_version }}
+          delete_release: true
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Generate Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         with:
           tag_name: ${{ env.frontend_version }}
           name: ${{ env.frontend_version }}
           draft: false
           prerelease: false
+          make_latest: false
           files: |
             dist.zip
         env:

.gitignore

@@ -11,6 +11,7 @@ node_modules
 .DS_Store
 dist
 dist-ssr
+dev-dist
 *.local
 
 /cypress/videos/

.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,161 @@
 <!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" />
+  <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="10rem" height="10rem" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2">
+        <g transform="matrix(1,0,0,1,-2606,-236)">
+          <g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
+            <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.6.1",
+  "version": "2.0.3",
   "private": true,
   "bin": "dist/service.js",
   "scripts": {
@@ -19,92 +19,86 @@
     ]
   },
   "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",
+    "mousetrap": "^1.6.5",
+    "nprogress": "^0.2.0",
+    "qrcode.vue": "^3.4.1",
+    "sass": "^1.59.3",
+    "tailwindcss": "^3.3.2",
+    "unplugin-vue-define-options": "^1.3.5",
+    "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.6.8",
+    "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-pwa": "^0.20.0",
+    "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": {
     "postcss": "8"
   }
-}
+}

public/loader.css

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

public/manifest.json

@@ -1,80 +0,0 @@
-{
-  "name": "MoviePilot",
-  "short_name": "MoviePilot",
-  "start_url": "./",
-  "icons": [
-    {
-      "src": "./android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "./android-chrome-192x192_maskable.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "./android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "./android-chrome-512x512_maskable.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
-    }
-  ],
-  "theme_color": "#28243D",
-  "background_color": "#28243D",
-  "display": "standalone",
-  "shortcuts": [
-    {
-      "name": "推荐",
-      "url": "./ranking",
-      "icons": [
-        {
-          "src": "./sparkles-icon-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }
-      ]
-    },
-    {
-      "name": "电影订阅",
-      "url": "./subscribe-movie",
-      "icons": [
-        {
-          "src": "./clock-icon-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }
-      ]
-    },
-    {
-      "name": "电视剧订阅",
-      "url": "./subscribe-tv",
-      "icons": [
-        {
-          "src": "./clock-icon-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }
-      ]
-    },
-    {
-      "name": "设置",
-      "url": "./setting",
-      "icons": [
-        {
-          "src": "./cog-icon-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }
-      ]
-    }
-  ]
-}

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/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

public/service.js

@@ -25,6 +25,16 @@ app.use(
   })
 );
 
+// 配置代理中间件将CookieCloud请求转发给后端API
+app.use(
+  '/cookiecloud',
+  proxy(`${proxyConfig.URL}:${proxyConfig.PORT}`, {
+    // 路径加上 /cookiecloud 前缀
+    proxyReqPathResolver: (req) => {
+      return `/cookiecloud${req.url}`
+    }
+  })
+);
 
 // 处理根路径的请求
 app.get('/', (req, res) => {

src/@core/components/DialogCloseBtn.vue

@@ -1,16 +1,21 @@
 <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"
+    :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3'"
     @click.stop="onClick"
   >
     <VIcon icon="mdi-close" />

src/@core/components/LoadingBanner.vue

@@ -0,0 +1,15 @@
+<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 || !props.progress" class="mb-3" size="64" indeterminate color="primary" />
+    <VProgressCircular v-if="props.progress" class="mb-3" color="primary" :model-value="props.progress" size="64" />
+    <span>{{ props.text }}</span>
+  </div>
+</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 } from 'vue'
-import { useTheme } from 'vuetify'
+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,63 +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 updateTheme() {
-  const autoTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
-  globalTheme.name.value = theme
-  savedTheme.value = theme
-  // 修改载入时背景色
-  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
-  themeTransition()
-}
+const $toast = useToast()
 
-// 监听系统主题变化
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+// 自定义CSS弹窗
+const cssDialog = ref(false)
 
-watch(
-  () => currentThemeName.value,
-  () => updateTheme(),
-)
+// 自定义 CSS
+const customCSS = ref('')
 
-function changeTheme() {
-  const nextTheme = getNextThemeName()
-  currentThemeName.value = nextTheme
-  localStorage.setItem('theme', nextTheme)
-}
-
-// 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)
@@ -99,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!
   })
@@ -117,12 +94,143 @@ 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/Layout', {
+      theme: nextTheme
+    })
+  } 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" scrollable :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/scss/base/placeholders/_misc.scss

@@ -3,5 +3,5 @@
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   /* stylelint-enable */
-  background-color: rgb(var(--v-theme-surface), 0.9);
+  background-color: rgb(var(--v-theme-surface), 0.8);
 }

src/@core/utils/compatibility.ts

@@ -0,0 +1,18 @@
+/**
+ * 浏览器兼容性处理
+ */
+
+/**
+ * 修复低版本Safari等浏览器数组不支持at函数的问题
+ */
+;(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,8 +1,14 @@
+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 ''
+  if (!value) return ''
   const nameArray = value.split(' ')
 
   return nameArray.map(word => word.charAt(0).toUpperCase()).join('')
@@ -12,19 +18,23 @@ export function avatarText(value: string) {
 export function kFormatter(num: number) {
   const regex = /\B(?=(\d{3})+(?!\d))/g
 
-  return Math.abs(num) > 9999 ? `${Math.sign(num) * +((Math.abs(num) / 1000).toFixed(1))}k` : Math.abs(num).toFixed(0).replace(regex, ',')
+  return Math.abs(num) > 9999
+    ? `${Math.sign(num) * +(Math.abs(num) / 1000).toFixed(1)}k`
+    : Math.abs(num).toFixed(0).replace(regex, ',')
 }
 
 /**
  * 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' }) {
-  if (!value)
-    return value
+export function formatDate(
+  value: string,
+  formatting: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' },
+) {
+  if (!value) return value
 
   return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
 }
@@ -32,39 +42,43 @@ 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)
   let formatting: Record<string, string> = { month: 'short', day: 'numeric' }
 
-  if (toTimeForCurrentDay && isToday(date))
-    formatting = { hour: 'numeric', minute: 'numeric' }
+  if (toTimeForCurrentDay && isToday(date)) formatting = { hour: 'numeric', minute: 'numeric' }
 
   return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
 }
 
-export const prefixWithPlus = (value: number) => value > 0 ? `+${value}` : value
+export const prefixWithPlus = (value: number) => (value > 0 ? `+${value}` : value)
 
 // 格式化为Sxx
-export const formatSeason = (value: string) => value ? `S${value.padStart(2, '0')}` : ''
+export const formatSeason = (value: string) => (value ? `S${value.padStart(2, '0')}` : '')
 
 // 格式化为xx[TGMK]B
-export function formatFileSize(bytes: number) {
-  if (bytes < 0)
-    throw new Error('字节数不能为负数。')
+export function formatFileSize(bytes: number, decimals = 2, prefix = false) {
+  // 负数标记
+  let negative = false
+  let size = bytes
+  if (bytes < 0) {
+    negative = true
+    size = Math.abs(bytes)
+  }
 
   const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  let size = bytes
   let unitIndex = 0
 
   while (size >= 1024 && unitIndex < units.length - 1) {
     size /= 1024
     unitIndex++
   }
-
-  return `${size.toFixed(2)} ${units[unitIndex]}`
+  if (negative) return `-${size.toFixed(decimals)} ${units[unitIndex]}`
+  else
+    return prefix ? `+${size.toFixed(decimals)} ${units[unitIndex]}` : `${size.toFixed(decimals)} ${units[unitIndex]}`
 }
 
 // 将时间秒格式化为时分秒
@@ -75,22 +89,18 @@ export function formatSeconds(seconds: number) {
 
   let formattedTime = ''
 
-  if (hours > 0)
-    formattedTime += `${hours}小时`
+  if (hours > 0) formattedTime += `${hours}小时`
 
-  if (minutes > 0)
-    formattedTime += `${minutes}分`
+  if (minutes > 0) formattedTime += `${minutes}分`
 
-  if ((remainingSeconds > 0 || formattedTime === '') && hours <= 0)
-    formattedTime += `${remainingSeconds}秒`
+  if ((remainingSeconds > 0 || formattedTime === '') && hours <= 0) formattedTime += `${remainingSeconds}秒`
 
   return formattedTime
 }
 
 // YYYY-MM-DD 转化为Date
 export function parseDate(dateString: string): Date | null {
-  if (!dateString)
-    return null
+  if (!dateString) return null
   const [year, month, day] = dateString.split('-').map(Number)
 
   return new Date(year, month - 1, day)
@@ -98,8 +108,7 @@ export function parseDate(dateString: string): Date | null {
 
 // 文件大小格式化
 export function formatBytes(bytes: number, decimals = 2) {
-  if (bytes === 0)
-    return '0 bytes'
+  if (bytes === 0) return '0 bytes'
 
   const k = 1024
   const dm = decimals < 0 ? 0 : decimals
@@ -107,16 +116,14 @@ 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]}`
 }
 
 // 格式化剧集列表
 export function formatEp(nums: number[]): string {
-  if (!nums.length)
-    return ''
+  if (!nums.length) return ''
 
-  if (nums.length === 1)
-    return nums[0].toString()
+  if (nums.length === 1) return nums[0].toString()
 
   // 将数组升序排序
   nums.sort((a, b) => a - b)
@@ -127,23 +134,22 @@ export function formatEp(nums: number[]): string {
   for (let i = 1; i < nums.length; i++) {
     if (nums[i] === end + 1) {
       end = nums[i]
-    }
-    else {
-      if (start === end)
-        formattedRanges.push(start.toString())
-
-      else
-        formattedRanges.push(`${start.toString()}-${end.toString()}`)
+    } else {
+      if (start === end) formattedRanges.push(start.toString())
+      else formattedRanges.push(`${start.toString()}-${end.toString()}`)
 
       start = end = nums[i]
     }
   }
 
-  if (start === end)
-    formattedRanges.push(start.toString())
-
-  else
-    formattedRanges.push(`${start.toString()}-${end.toString()}`)
+  if (start === end) formattedRanges.push(start.toString())
+  else formattedRanges.push(`${start.toString()}-${end.toString()}`)
 
   return formattedRanges.join('、')
 }
+
+// 将yyyy-mm-dd hh:mm:ss转换为时间差，如：1小时前，1天前
+export function formatDateDifference(dateString: string): string {
+  if (!dateString) return ''
+  return dayjs(dateString).fromNow()
+}

src/@core/utils/index.ts

@@ -1,7 +1,6 @@
 // 👉 IsEmpty
 export function isEmpty(value: unknown): boolean {
-  if (value === null || value === undefined || value === '')
-    return true
+  if (value === null || value === undefined || value === '') return true
 
   return !!(Array.isArray(value) && value.length === 0)
 }
@@ -33,69 +32,6 @@ export function isToday(date: Date) {
   )
 }
 
-// 计算时间差，返回xx天/xx小时/xx分钟/xx秒
-export function calculateTimeDifference(inputTime: string): string {
-  if (!inputTime)
-    return ''
-
-  const inputDate = new Date(inputTime)
-  const currentDate = new Date()
-
-  const timeDifference = currentDate.getTime() - inputDate.getTime()
-  const secondsDifference = Math.floor(timeDifference / 1000)
-
-  if (secondsDifference < 60) {
-    return `${secondsDifference}秒`
-  }
-  else if (secondsDifference < 3600) {
-    const minutes = Math.floor(secondsDifference / 60)
-
-    return `${minutes}分钟`
-  }
-  else if (secondsDifference < 86400) {
-    const hours = Math.floor(secondsDifference / 3600)
-
-    return `${hours}小时`
-  }
-  else {
-    const days = Math.floor(secondsDifference / 86400)
-
-    return `${days}天`
-  }
-}
-
-// 计算时间差，返回xx天xx小时xx分钟
-export function calculateTimeDiff(inputTime: string): string {
-  if (!inputTime)
-    return ''
-
-  // 使用当前时区
-  const inputDate = new Date(inputTime)
-  const currentDate = new Date()
-
-  const timeDifference = currentDate.getTime() - inputDate.getTime()
-  const secondsDifference = Math.floor(timeDifference / 1000)
-
-  const days = Math.floor(secondsDifference / 86400)
-  const hours = Math.floor(secondsDifference % 86400 / 3600)
-  const minutes = Math.floor(secondsDifference % 86400 % 3600 / 60)
-  const secones = Math.floor(secondsDifference % 60)
-
-  if (days > 0)
-    return `${days}天${hours}小时${minutes}分钟`
-
-  else if (hours > 0)
-    return `${hours}小时${minutes}分钟`
-
-  else if (minutes > 0)
-    return `${minutes}分钟`
-
-  else if (secones > 0)
-    return `${secones}秒`
-
-  return ''
-}
-
 // 判断一个数组subArray是不是在另一个数组mainArray中
 export function isContained(subArray: any[], mainArray: any[]): boolean {
   return subArray.every(element => mainArray.includes(element))
@@ -108,9 +44,24 @@ export function isIntersected(array1: any[], array2: any[]): boolean {
 
 export function isNullOrEmptyObject(obj: any): boolean {
   // 首先判断是否为 null 或 undefined
-  if (obj === null || obj === undefined)
-    return true
+  if (obj === null || obj === undefined) return true
 
   // 然后判断是否为空对象
   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
+  }
+}
+
+// 从URL中获取参数值
+export function getQueryValue(key: string, url = window.location.href): string {
+  const reg = new RegExp(`[?&]${key}=([^&#]*)`, 'i')
+  const res = reg.exec(url)
+  return res ? res[1] : ''
+}

src/@core/utils/navigator.ts

@@ -2,8 +2,7 @@
 export async function getClipboardContent() {
   if (navigator.clipboard && window.isSecureContext) {
     return await navigator.clipboard.readText()
-  }
-  else {
+  } else {
     const input = document.createElement('textarea')
     document.body.appendChild(input)
     input.select()
@@ -18,13 +17,37 @@ export async function getClipboardContent() {
 export async function copyToClipboard(content: string) {
   if (navigator.clipboard && window.isSecureContext) {
     await navigator.clipboard.writeText(content)
-  }
-  else {
+  } else {
     const input = document.createElement('textarea')
     input.value = content
     document.body.appendChild(input)
+    // 阻止事件冒泡到其他元素，确保 focusin 事件只在 textarea 元素上处理，不会影响其他元素
+    input.addEventListener('focusin', e => e.stopPropagation())
     input.select()
     document.execCommand('copy')
     document.body.removeChild(input)
   }
 }
+
+// VAPID公钥转Uint8Array
+export function urlBase64ToUint8Array(base64String: string) {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
+
+  const rawData = window.atob(base64)
+  const outputArray = new Uint8Array(rawData.length)
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i)
+  }
+  return outputArray
+}
+
+// 判断是否为PWA
+export const isPWA = async (): Promise<boolean> => {
+  if ('serviceWorker' in navigator) {
+    const registrations = await navigator.serviceWorker.getRegistrations()
+    return registrations.length > 0
+  }
+  return (window.navigator as any).standalone === true
+}

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'
 
@@ -54,8 +53,8 @@ function handleNavScroll(evt: Event) {
         <RouterLink to="/" class="app-logo d-flex align-center app-title-wrapper">
           <div class="d-flex" v-html="logo" />
 
-          <h1 class="font-weight-bold leading-normal text-2xl">
-            MOVIEPILOT
+          <h1 class="font-weight-bold leading-normal text-xl">
+            MOVIEPILOT <span class="text-sm text-gray-500">v2</span>
           </h1>
         </RouterLink>
       </slot>
@@ -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/components/VerticalNavLink.vue

@@ -33,7 +33,10 @@ defineProps<{
   .nav-link a {
     display: flex;
     align-items: center;
+    border-radius: 0 3.125rem 3.125rem 0 !important;
     cursor: pointer;
+    margin-inline-end: 1.125em;
+    padding-inline: 1.375rem 1rem;
   }
 }
 </style>

src/@layouts/components/VerticalNavSectionTitle.vue

@@ -18,3 +18,12 @@ defineProps<{
     </div>
   </li>
 </template>
+
+<style lang="scss">
+.layout-vertical-nav {
+  .nav-section-title {
+    padding-left: 1.375rem;
+    padding-right: 1rem;
+  }
+}
+</style>

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
@@ -120,6 +120,13 @@ export interface NavLink extends NavLinkProps, Partial<AclProperties> {
   disable?: boolean
 }
 
+export interface NavMenu extends NavLink {
+  header: string
+  description?: string
+  admin?: boolean
+  footer?: boolean
+}
+
 // 👉 Vertical nav group
 export interface NavGroup extends Partial<AclProperties> {
   title: string
@@ -143,7 +150,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 +164,6 @@ type Notification = {
 
 interface ThemeSwitcherTheme {
   name: string
+  title: string
   icon: string
 }

src/App.vue

@@ -1,44 +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'
 
-function setTheme() {
-  const { global: globalTheme } = useTheme()
-  let theme = localStorage.getItem('theme') || 'light'
-  if (theme === 'auto')
-    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  globalTheme.name.value = theme
+const { global: globalTheme } = useTheme()
+
+// 生效主题
+async function setTheme() {
+  let themeValue = localStorage.getItem('theme') || 'light'
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
+  globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
 }
-// 第一时间应用主题
-setTheme()
 
-// 提示框
-const $toast = useToast()
+// ApexCharts 全局配置
+declare global {
+  interface Window {
+    Apex: any
+  }
+}
 
-// 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}`,
-    )
-
-    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,69 @@
+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 modeIniUrl from 'ace-builds/src-noconflict/mode-ini?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 snippertsIniUrl from 'ace-builds/src-noconflict/snippets/ini?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/mode/ini', modeIniUrl)
+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.config.setModuleUrl('ace/snippets/ini', snippertsIniUrl)
+
+ace.require('ace/ext/language_tools')

src/api/constants.ts

@@ -0,0 +1,64 @@
+export const storageOptions = [
+  {
+    title: '本地',
+    value: 'local',
+  },
+  {
+    title: '阿里云盘',
+    value: 'alipan',
+  },
+  {
+    title: '115网盘',
+    value: 'u115',
+  },
+  {
+    title: 'Rclone网盘',
+    value: 'rclone',
+  },
+]
+
+export const innerFilterRules = [
+  { title: '特效字幕', value: ' SPECSUB ' },
+  { title: '中文字幕', value: ' CNSUB ' },
+  { title: '国语配音', value: ' CNVOI ' },
+  { title: '官种', value: ' GZ ' },
+  { title: '排除: 国语配音', value: ' !CNVOI ' },
+  { title: '粤语配音', value: ' HKVOI ' },
+  { title: '排除: 粤语配音', value: ' !HKVOI ' },
+  { title: '促销: 免费', value: ' FREE ' },
+  { title: '分辨率: 4K', value: ' 4K ' },
+  { title: '分辨率: 1080P', value: ' 1080P ' },
+  { title: '分辨率: 720P', value: ' 720P ' },
+  { title: '排除: 720P', value: ' !720P ' },
+  { title: '质量: 蓝光原盘', value: ' BLU ' },
+  { title: '排除: 蓝光原盘', value: ' !BLU ' },
+  { title: '质量: BLURAY', value: ' BLURAY ' },
+  { title: '排除: BLURAY', value: ' !BLURAY ' },
+  { title: '质量: UHD', value: ' UHD ' },
+  { title: '排除: UHD', value: ' !UHD ' },
+  { title: '质量: REMUX', value: ' REMUX ' },
+  { title: '排除: REMUX', value: ' !REMUX ' },
+  { title: '质量: WEB-DL', value: ' WEBDL ' },
+  { title: '排除: WEB-DL', value: ' !WEBDL ' },
+  { title: '质量: 60fps', value: ' 60FPS ' },
+  { title: '排除: 60fps', value: ' !60FPS ' },
+  { title: '编码: H265', value: ' H265 ' },
+  { title: '排除: H265', value: ' !H265 ' },
+  { title: '编码: H264', value: ' H264 ' },
+  { title: '排除: H264', value: ' !H264 ' },
+  { title: '效果: 杜比视界', value: ' DOLBY ' },
+  { title: '排除: 杜比视界', value: ' !DOLBY ' },
+  { title: '效果: 杜比全景声', value: ' ATMOS ' },
+  { title: '排除: 杜比全景声', value: ' !ATMOS ' },
+  { title: '效果: HDR', value: ' HDR ' },
+  { title: '排除: HDR', value: ' !HDR ' },
+  { title: '效果: SDR', value: ' SDR ' },
+  { title: '排除: SDR', value: ' !SDR ' },
+  { title: '效果: 3D', value: ' 3D ' },
+  { title: '排除: 3D', value: ' !3D ' },
+]
+
+export const storageDict = storageOptions.reduce((dict, item) => {
+  dict[item.value] = item.title
+  return dict
+}, {} as Record<string, string>)

src/api/index.ts

@@ -8,32 +8,42 @@ const api = axios.create({
 })
 
 // 添加请求拦截器
-api.interceptors.request.use((config) => {
+api.interceptors.request.use(config => {
   // 在请求头中添加token
   const token = store.state.auth.token
-  if (token)
-    config.headers.Authorization = `Bearer ${token}`
+  if (token) config.headers.Authorization = `Bearer ${token}`
 
   return config
 })
 
 // 添加响应拦截器
-api.interceptors.response.use((response) => {
-  return response.data
-}, (error) => {
-  if (!error.response) {
-    // 请求超时
+api.interceptors.response.use(
+  response => {
+    return response.data
+  },
+  error => {
+    if (!error.response) {
+      // 请求超时
+      return Promise.reject(new Error(error))
+    } else if (error.response.status === 403) {
+      // 清除登录状态信息
+      store.dispatch('auth/logout')
+      // token验证失败，跳转到登录页面
+      router.push('/login')
+    }
+
     return Promise.reject(error)
-  }
-  else if (error.response.status === 403) {
-    // 清除登录状态信息
-    store.dispatch('auth/clearToken')
-
-    // token验证失败，跳转到登录页面
-    router.push('/login')
-  }
-
-  return Promise.reject(error)
-})
+  },
+)
 
 export default api
+
+export async function fetchGlobalSettings() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/global')
+    return result.data || {}
+  } catch (error) {
+    console.error('Failed to fetch global settings', error)
+    throw error
+  }
+}

src/assets/images/svg/filter-group.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="&#1057;&#1083;&#1086;&#1081;_1" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<linearGradient id="SVGID_1__48343" gradientUnits="userSpaceOnUse" x1="39" y1="23.25" x2="39" y2="33.0008" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#6DC7FF"/>
+	<stop offset="1" style="stop-color:#E6ABFF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_1__48343);" cx="39" cy="28" r="4"/>
+<linearGradient id="SVGID_2__48343" gradientUnits="userSpaceOnUse" x1="32" y1="6.75" x2="32" y2="58.039" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<path style="fill:url(#SVGID_2__48343);" d="M58,13c0-2.757-2.243-5-5-5H19c-2.757,0-5,2.243-5,5v33H6v5c0,2.757,2.243,5,5,5h34  c2.757,0,5-2.243,5-5V18h8V13z M11,54c-1.654,0-3-1.346-3-3v-3h32v3c0,1.125,0.374,2.164,1.002,3H11z M48,51c0,1.654-1.346,3-3,3  s-3-1.346-3-3v-5H16V13c0-1.654,1.346-3,3-3h30.026C48.391,10.838,48,11.87,48,13V51z M56,16h-6v-3c0-1.654,1.346-3,3-3s3,1.346,3,3  V16z"/>
+<linearGradient id="SVGID_3__48343" gradientUnits="userSpaceOnUse" x1="39" y1="6.75" x2="39" y2="58.039" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<path style="fill:url(#SVGID_3__48343);" d="M39,23c-2.757,0-5,2.243-5,5s2.243,5,5,5s5-2.243,5-5S41.757,23,39,23z M39,31  c-1.654,0-3-1.346-3-3s1.346-3,3-3s3,1.346,3,3S40.654,31,39,31z"/>
+<linearGradient id="SVGID_4__48343" gradientUnits="userSpaceOnUse" x1="25" y1="6.75" x2="25" y2="58.039" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<rect x="20" y="23" style="fill:url(#SVGID_4__48343);" width="10" height="2"/>
+<linearGradient id="SVGID_5__48343" gradientUnits="userSpaceOnUse" x1="25" y1="6.75" x2="25" y2="58.039" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<rect x="20" y="27" style="fill:url(#SVGID_5__48343);" width="10" height="2"/>
+<linearGradient id="SVGID_6__48343" gradientUnits="userSpaceOnUse" x1="25" y1="6.75" x2="25" y2="58.039" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<rect x="20" y="31" style="fill:url(#SVGID_6__48343);" width="10" height="2"/>
+<linearGradient id="SVGID_7__48343" gradientUnits="userSpaceOnUse" x1="25" y1="6.75" x2="25" y2="58.039" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<rect x="20" y="35" style="fill:url(#SVGID_7__48343);" width="10" height="2"/>
+<linearGradient id="SVGID_8__48343" gradientUnits="userSpaceOnUse" x1="39" y1="6.75" x2="39" y2="58.039" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<rect x="34" y="35" style="fill:url(#SVGID_8__48343);" width="10" height="2"/>
+</svg>

src/assets/images/svg/filter.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="&#1057;&#1083;&#1086;&#1081;_1" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<linearGradient id="SVGID_1__52535" gradientUnits="userSpaceOnUse" x1="21.9994" y1="11.6667" x2="21.9994" y2="18.5839" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#6DC7FF"/>
+	<stop offset="1" style="stop-color:#E6ABFF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_1__52535);" cx="21.999" cy="14.998" r="3"/>
+<linearGradient id="SVGID_2__52535" gradientUnits="userSpaceOnUse" x1="35.9994" y1="4.1667" x2="35.9994" y2="15.8334" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#6DC7FF"/>
+	<stop offset="1" style="stop-color:#E6ABFF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_2__52535);" cx="35.999" cy="9.998" r="4"/>
+<linearGradient id="SVGID_3__52535" gradientUnits="userSpaceOnUse" x1="32" y1="20.7501" x2="32" y2="58.7632" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<path style="fill:url(#SVGID_3__52535);" d="M47.003,21H16.996C15.344,21,14,22.344,14,23.995V25v0.998v1.261  c0,0.717,0.257,1.41,0.722,1.95l10.556,12.315C25.743,42.068,26,42.763,26,43.479v6.964c0,0.652,0.32,1.264,0.854,1.634l8.016,5.569  c0.341,0.236,0.737,0.356,1.136,0.356c0.316,0,0.634-0.076,0.926-0.229C37.591,57.428,38,56.751,38,56.007V43.479  c0-0.716,0.257-1.409,0.722-1.953L49.277,29.21C49.743,28.668,50,27.975,50,27.259v-1.258V25v-1.005C50,22.344,48.655,21,47.003,21z   M37.204,40.225c-0.447,0.521-0.762,1.129-0.963,1.775H33v2h3l0.001,2H33v2h3.003l0.002,2H34v2h2.007l0.003,4.002L28,50.442v-6.964  c0-1.193-0.428-2.35-1.205-3.255L17.176,29h29.648L37.204,40.225z M48,26.001C48,26.552,47.552,27,47,27H17.002  C16.449,27,16,26.551,16,25.998V25v-1.005C16,23.446,16.447,23,16.996,23h30.007C47.553,23,48,23.446,48,23.995V25V26.001z"/>
+<linearGradient id="SVGID_4__52535" gradientUnits="userSpaceOnUse" x1="41.9994" y1="17.3333" x2="41.9994" y2="21.3333" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#6DC7FF"/>
+	<stop offset="1" style="stop-color:#E6ABFF"/>
+</linearGradient>
+<path style="fill:url(#SVGID_4__52535);" d="M44.999,21c0-2-1.343-3-3-3s-3,1-3,3H44.999z"/>
+</svg>

src/components/FileBrowser.vue

@@ -1,21 +1,27 @@
 <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 type { EndPoints } from '@/api/types'
+import FileList from './filebrowser/FileList.vue'
+import FileToolbar from './filebrowser/FileToolbar.vue'
+import type { EndPoints, FileItem, StorageConf } from '@/api/types'
 
 // 输入参数
 const props = defineProps({
-  storages: String,
-  storage: String,
-  path: String,
+  storages: Array as PropType<StorageConf[]>,
   tree: Boolean,
   endpoints: Object as PropType<EndPoints>,
-  axios: Object as PropType<Axios>,
+  axios: {
+    type: Object as PropType<Axios>,
+    required: true,
+  },
   axiosconfig: Object,
+  item: {
+    type: Object as PropType<FileItem>,
+    required: true,
+  },
+  itemstack: {
+    type: Array as PropType<FileItem[]>,
+    default: () => [],
+  },
 })
 
 // 对外事件
@@ -27,27 +33,109 @@ const availableStorages = [
     code: 'local',
     icon: 'mdi-folder-multiple-outline',
   },
+  {
+    name: '阿里云盘',
+    code: 'alipan',
+    icon: 'mdi-cloud-outline',
+  },
+  {
+    name: '115网盘',
+    code: 'u115',
+    icon: 'mdi-cloud-outline',
+  },
+  {
+    name: 'Rclone网盘',
+    code: 'rclone',
+    icon: 'mdi-cloud-outline',
+  },
 ]
 
 const fileIcons = {
+  // 压缩包
   zip: 'mdi-folder-zip-outline',
   rar: 'mdi-folder-zip-outline',
+  bak: 'mdi-folder-zip-outline',
+  tar: 'mdi-folder-zip-outline',
+  gz: 'mdi-folder-zip-outline',
+  bz2: 'mdi-folder-zip-outline',
+  // 开发
   htm: 'mdi-language-html5',
   html: 'mdi-language-html5',
+  vue: 'mdi-vuejs',
   js: 'mdi-nodejs',
+  ts: 'mdi-language-typescript',
   json: 'mdi-file-document-outline',
+  css: 'mdi-language-css3',
+  scss: 'mdi-language-css3',
+  less: 'mdi-language-css3',
+  php: 'mdi-language-php',
+  py: 'mdi-language-python',
+  java: 'mdi-language-java',
+  go: 'mdi-language-go',
+  c: 'mdi-language-c',
+  cpp: 'mdi-language-cpp',
+  h: 'mdi-language-c',
+  cs: 'mdi-language-csharp',
+  sql: 'mdi-database',
+  sh: 'mdi-language-bash',
+  bat: 'mdi-language-bash',
+  ps1: 'mdi-language-powershell',
+  // markdown
   md: 'mdi-language-markdown-outline',
-  pdf: 'mdi-file-pdf',
-  png: 'mdi-file-image',
-  jpg: 'mdi-file-image',
-  jpeg: 'mdi-file-image',
+  markdown: 'mdi-language-markdown-outline',
+  // 图片
+  png: 'mdi-file-png-box',
+  jpg: 'mdi-file-jpg-box',
+  jpeg: 'mdi-file-jpg-box',
+  gif: 'mdi-file-gif-box',
+  bmp: 'mdi-file-image-box',
+  webp: 'mdi-file-image-box',
+  ico: 'mdi-file-image-box',
+  svg: 'mdi-file-image-box',
+  // 视频
   mp4: 'mdi-filmstrip',
   mkv: 'mdi-filmstrip',
   avi: 'mdi-filmstrip',
   wmv: 'mdi-filmstrip',
   mov: 'mdi-filmstrip',
+  flv: 'mdi-filmstrip',
+  rmvb: 'mdi-filmstrip',
+  // 文档
   txt: 'mdi-file-document-outline',
+  env: 'mdi-file-cog-outline',
+  yml: 'mdi-file-cog-outline',
+  yaml: 'mdi-file-cog-outline',
+  conf: 'mdi-file-cog-outline',
+  log: 'mdi-file-document-outline',
+  csv: 'mdi-file-delimited',
+  // office
   xls: 'mdi-file-excel',
+  xlsx: 'mdi-file-excel',
+  doc: 'mdi-file-word',
+  docx: 'mdi-file-word',
+  ppt: 'mdi-file-powerpoint',
+  pptx: 'mdi-file-powerpoint',
+  pdf: 'mdi-file-pdf',
+  // 音频
+  mp2: 'mdi-music',
+  mp3: 'mdi-music',
+  m4a: 'mdi-music',
+  wma: 'mdi-music',
+  aac: 'mdi-music',
+  ogg: 'mdi-music',
+  flac: 'mdi-music',
+  wav: 'mdi-music',
+  // 字体
+  ttf: 'mdi-format-font',
+  otf: 'mdi-format-font',
+  woff: 'mdi-format-font',
+  woff2: 'mdi-format-font',
+  eot: 'mdi-format-font',
+  // 字幕
+  srt: 'mdi-subtitles-outline',
+  ass: 'mdi-subtitles-outline',
+  sub: 'mdi-subtitles-outline',
+  // 其他
   other: 'mdi-file-outline',
 }
 
@@ -59,32 +147,28 @@ const activeStorage = ref('local')
 const refreshPending = ref(false)
 // 排序
 const sort = ref('name')
-// axios实例
-const axiosInstance = ref<Axios>()
 
 // 计算属性
 const storagesArray = computed(() => {
-  const storageCodes = props.storages?.split(',')
+  const storageCodes = props.storages?.map(item => item.type)
   return availableStorages.filter(item => storageCodes?.includes(item.code))
 })
 
 // 方法
 function loadingChanged(loading: number) {
-  if (loading) {
-    loading++
-  }
-  else if (loading > 0) {
-    loading--
-  }
+  if (loading) loading++
+  else if (loading > 0) loading--
 }
 
-function storageChanged(storage: string) {
+// 存储切换
+async function storageChanged(storage: string) {
   activeStorage.value = storage
+  emit('pathchanged', { storage: storage, path: '/', fileid: 'root' })
 }
 
 // 路径变化
-function pathChanged(_path: string) {
-  emit('pathchanged', _path)
+function pathChanged(item: FileItem) {
+  emit('pathchanged', item)
 }
 
 // 排序变化
@@ -92,60 +176,37 @@ function sortChanged(s: string) {
   sort.value = s
   refreshPending.value = true
 }
-
-// 初始化
-onMounted(() => {
-  activeStorage.value = props.storage ?? 'local'
-  axiosInstance.value = props.axios ?? axios.create(props.axiosconfig)
-})
 </script>
 
 <template>
-  <VCard class="mx-auto" :loading="loading > 0 || !path">
-    <div v-if="path">
-      <Toolbar
-        :path="path"
+  <VCard class="mx-auto" :loading="loading > 0">
+    <div v-if="activeStorage && item">
+      <FileToolbar
+        :item="item"
+        :itemstack="itemstack"
         :storages="storagesArray"
         :storage="activeStorage"
         :endpoints="endpoints"
-        :axios="axiosInstance"
+        :axios="axios"
         @storagechanged="storageChanged"
         @pathchanged="pathChanged"
         @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
+        :item="item"
+        :storage="activeStorage"
+        :icons="fileIcons"
+        :endpoints="endpoints"
+        :axios="axios"
+        :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

@@ -18,23 +18,18 @@ function imageLoadHandler() {
 
 // 跳转播放
 function goPlay() {
-  if (props.media?.link)
-    window.open(props.media?.link, '_blank')
+  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/${encodeURIComponent(image)}/0`
+  return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(image)}`
 })
 </script>
 
 <template>
-  <VHover
-    v-bind="props"
-    :height="props.height"
-    :width="props.width"
-  >
+  <VHover v-bind="props">
     <template #default="hover">
       <VCard
         v-bind="hover.props"
@@ -48,12 +43,7 @@ const getImgUrl = computed(() => {
         @click="goPlay"
       >
         <template #image>
-          <VImg
-            :src="getImgUrl"
-            aspect-ratio="2/3"
-            cover
-            @load="imageLoadHandler"
-          >
+          <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" />
@@ -62,7 +52,9 @@ const getImgUrl = computed(() => {
             <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 ...">
+              <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>
@@ -81,9 +73,3 @@ const getImgUrl = computed(() => {
     </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/CustomRuleCard.vue

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { CustomRule } from '@/api/types'
+import { useToast } from 'vue-toast-notification'
+import filter_svg from '@images/svg/filter.svg'
+import { cloneDeep } from 'lodash'
+import { innerFilterRules } from '@/api/constants'
+
+// 输入参数
+const props = defineProps({
+  // 单条规则
+  rule: {
+    type: Object as PropType<CustomRule>,
+    required: true,
+  },
+  // 所有规则
+  rules: {
+    type: Array as PropType<CustomRule[]>,
+    required: true,
+  },
+})
+
+// 提示框
+const $toast = useToast()
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'change', 'done'])
+
+// 规则详情弹窗
+const ruleInfoDialog = ref(false)
+
+// 规则详情
+const ruleInfo = ref<CustomRule>({
+  id: '',
+  name: '',
+  include: '',
+  exclude: '',
+  size_range: '',
+  seeders: '',
+  publish_time: '',
+})
+
+// 打开详情弹窗
+function openRuleInfoDialog() {
+  // 深复制
+  ruleInfo.value = cloneDeep(props.rule)
+  ruleInfoDialog.value = true
+}
+
+// 保存详情数据
+function saveRuleInfo() {
+  // 有空值
+  if (!ruleInfo.value.id || !ruleInfo.value.name) {
+    if (!ruleInfo.value.id && !ruleInfo.value.name) {
+      $toast.error('规则ID和规则名称不能为空')
+    }
+    return
+  }
+  // 检查ID是否在内置的规则中
+  if (innerFilterRules.find(option => option.value === ruleInfo.value.id)) {
+    $toast.error('当前规则ID已被内置规则占用')
+    return
+  }
+  // 检查规则名称是否在内置的规则中
+  if (innerFilterRules.find(option => option.title === ruleInfo.value.name)) {
+    $toast.error('当前规则名称已被内置规则占用')
+    return
+  }
+  // ID已存在
+  if (ruleInfo.value.id !== props.rule.id && props.rules.find(rule => rule.id === ruleInfo.value.id)) {
+    $toast.error(`规则ID【${ruleInfo.value.id}】已存在`)
+    return
+  }
+  // 规则名称已存在
+  if (ruleInfo.value.name !== props.rule.name && props.rules.find(rule => rule.name === ruleInfo.value.name)) {
+    $toast.error(`规则名称【${ruleInfo.value.name}】已存在`)
+    return
+  }
+  // 保存数据
+  ruleInfoDialog.value = false
+  emit('change', ruleInfo.value, props.rule.id)
+  emit('done')
+}
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
+</script>
+
+<template>
+  <div>
+    <VCard variant="tonal" @click="openRuleInfoDialog">
+      <span class="absolute top-3 right-12">
+        <IconBtn>
+          <VIcon class="cursor-move" icon="mdi-drag" />
+        </IconBtn>
+      </span>
+      <DialogCloseBtn @click="onClose" />
+      <VCardText class="flex justify-space-between align-center gap-3">
+        <div class="align-self-start">
+          <h5 class="text-h6 mb-1">{{ props.rule.id }}</h5>
+          <div class="text-body-1 mb-3">{{ props.rule.name }}</div>
+        </div>
+        <VImg :src="filter_svg" cover class="mt-7" max-width="3rem" />
+      </VCardText>
+    </VCard>
+    <VDialog v-model="ruleInfoDialog" scrollable max-width="40rem" persistent>
+      <VCard :title="`${props.rule.id} - 配置`" class="rounded-t">
+        <DialogCloseBtn v-model="ruleInfoDialog" />
+        <VDivider />
+        <VCardText>
+          <VForm>
+            <VRow>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="ruleInfo.id"
+                  label="规则ID"
+                  placeholder="必填；不可与其他规则ID重名"
+                  hint="字符与数字组合，不能含空格"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="ruleInfo.name"
+                  label="规则名称"
+                  placeholder="必填；不可与其他规则名称重名"
+                  hint="使用别名便于区分规则"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12">
+                <VTextField
+                  v-model="ruleInfo.include"
+                  placeholder="关键字/正则表达式"
+                  label="包含"
+                  hint="必须包含的关键字或正则表达式，多个值使用｜分隔"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12">
+                <VTextField
+                  v-model="ruleInfo.exclude"
+                  placeholder="关键字/正则表达式"
+                  label="排除"
+                  hint="不能包含的关键字或正则表达式，多个值使用｜分隔"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="6">
+                <VTextField
+                  v-model="ruleInfo.size_range"
+                  placeholder="0/1-10"
+                  label="资源体积（MB）"
+                  hint="最小资源文件体积或体积范围（剧集计算单集平均大小）"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="6">
+                <VTextField
+                  v-model="ruleInfo.seeders"
+                  placeholder="0/1-10"
+                  label="做种人数"
+                  hint="最小做种人数或做种人数范围"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="6">
+                <VTextField
+                  v-model="ruleInfo.publish_time"
+                  placeholder="0"
+                  label="发布时间（分钟）"
+                  hint="距离资源发布的最小时间间隔"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+        <VCardActions class="pt-3">
+          <VBtn @click="saveRuleInfo" variant="elevated" prepend-icon="mdi-content-save" class="px-5"> 确定 </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+  </div>
+</template>

src/components/cards/DirectoryCard.vue

@@ -0,0 +1,332 @@
+<script lang="ts" setup>
+import type { TransferDirectoryConf } from '@/api/types'
+import { VDivider, VSpacer, VTextField } from 'vuetify/lib/components/index.mjs'
+import { useToast } from 'vue-toast-notification'
+import api from '@/api'
+import { nextTick } from 'vue'
+
+// 输入参数
+const props = defineProps({
+  type: String, // download/library
+  directory: {
+    type: Object as PropType<TransferDirectoryConf>,
+    required: true, // 必填参数
+  },
+  categories: {
+    type: Object as PropType<{ [key: string]: any }>,
+    required: true,
+  },
+  width: String,
+  height: String,
+})
+
+// 下载路径
+const downloadPath = ref<string>('')
+
+// 媒体库路径
+const libraryPath = ref<string>('')
+
+// 卡版是否折叠状态
+const isCollapsed = ref(true)
+
+// 类型下拉字典
+const typeItems = [
+  { title: '全部', value: '' },
+  { title: '电影', value: '电影' },
+  { title: '电视剧', value: '电视剧' },
+]
+
+// 存储下拉字典
+const storageItems = [
+  { title: '本地', value: 'local' },
+  { title: '阿里云盘', value: 'alipan' },
+  { title: '115网盘', value: 'u115' },
+  { title: 'Rclone网盘', value: 'rclone' },
+]
+
+// 自动整理方式下拉字典
+const transferSourceItems = [
+  { title: '不自动整理', value: '' },
+  { title: '下载器监控', value: 'downloader' },
+  { title: '目录监控', value: 'monitor' },
+]
+
+// 监控模式下拉字典
+const MonitorModeItems = [
+  { title: '性能模式', value: 'fast' },
+  { title: '兼容模式', value: 'compatibility' },
+]
+
+// 整理方式下拉字典
+const transferTypeItems = ref<{ title: string; value: string }[]>([])
+
+// 调用API查询支持的整理方式
+async function loadTransferTypeItems() {
+  // 参数不全时不查询
+  if (!props.directory.library_storage || !props.directory.storage) return
+  try {
+    // 下载器储存整理方法
+    const storage_res = await api.get(`storage/transtype/${props.directory.storage}`)
+    const storage_transtype = (storage_res as any).transtype
+    // 媒体库储存整理方法
+    const library_storage_res = await api.get(`storage/transtype/${props.directory.library_storage}`)
+    const library_storage_transtype = (library_storage_res as any).transtype
+    // 为空终止
+    if (!library_storage_transtype || !storage_transtype) return
+    // 取并集
+    const transtype: { [key: string]: string } = {}
+    Object.keys(storage_transtype).forEach(key => {
+      if (key in library_storage_transtype) {
+        transtype[key] = storage_transtype[key]
+      }
+    })
+    // 非空时设置整理方式下拉字典
+    if (transtype && Object.keys(transtype).length > 0) {
+      transferTypeItems.value = Object.keys(transtype).map(key => ({
+        title: transtype[key],
+        value: key,
+      }))
+      // 如果整理方式下拉字典不为空，且当前值不在新的transferTypeItems里，则设置整理方式为第一个
+      if (
+        transferTypeItems.value.length > 0 &&
+        !transferTypeItems.value.find(item => item.value === props.directory.transfer_type)
+      ) {
+        nextTick(() => {
+          props.directory.transfer_type = transferTypeItems.value[0].value
+        })
+      }
+      // 如果整理方式下拉字典为空，清空整理方式
+      if (transferTypeItems.value.length === 0) {
+        props.directory.transfer_type = ''
+      }
+    } else {
+      // 无可用整理方式，清除已选值
+      transferTypeItems.value = []
+      props.directory.transfer_type = ''
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+// 整理方式无数据提示
+const computedNoDataText = computed(() => {
+  if (!props.directory.library_storage && !props.directory.storage) {
+    return '无可用整理方式！请先选择下载器储存与媒体库储存！'
+  } else if (!props.directory.library_storage) {
+    return '无可用整理方式！请先选择媒体库储存！'
+  } else if (!props.directory.storage) {
+    return '无可用整理方式！请先选择下载器储存！'
+  } else {
+    return '选择的存储没有支持的整理方法！'
+  }
+})
+
+// 覆盖模式下拉字典
+const overwriteModeItems = [
+  { title: '从不', value: 'never' },
+  { title: '总是', value: 'always' },
+  { title: '按文件大小', value: 'size' },
+  { title: '仅保留最新版本', value: 'latest' },
+]
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'changed', 'update:modelValue'])
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
+
+// 下载路径更新
+function updateDownloadPath(value: string) {
+  downloadPath.value = value
+  emit('update:modelValue', {
+    download: downloadPath.value,
+    library: libraryPath.value,
+  })
+}
+
+// 媒体库路径更新
+function updateLibraryPath(value: string) {
+  libraryPath.value = value
+  emit('update:modelValue', {
+    download: downloadPath.value,
+    library: libraryPath.value,
+  })
+}
+
+// 根据选中的媒体类型，获取对应的媒体类别
+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 ?? ''])
+})
+
+// 监听 下载储存与媒体库储存 变化，重新加载整理方式下拉字典
+watch(
+  [() => props.directory.library_storage, () => props.directory.storage],
+  ([newLibraryStorage, newStorage], [oldLibraryStorage, oldStorage]) => {
+    if (newLibraryStorage !== oldLibraryStorage || newStorage !== oldStorage) {
+      loadTransferTypeItems()
+    }
+  },
+  { immediate: true },
+)
+
+// 媒体类别和类型变更非空时，将按类型分类和按类别分类置为false
+watch(
+  [() => props.directory.media_type, () => props.directory.media_category],
+  ([newMediaType, newMediaCategory], [oldMediaType, oldMediaCategory]) => {
+    if (newMediaType && newMediaType !== oldMediaType) {
+      props.directory.download_type_folder = false
+      props.directory.library_type_folder = false
+    }
+    if (newMediaCategory && newMediaCategory !== oldMediaCategory) {
+      props.directory.download_category_folder = false
+      props.directory.library_category_folder = false
+    }
+  },
+)
+</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 v-if="!isCollapsed">
+      <VForm>
+        <VRow>
+          <VCol cols="6">
+            <VSelect
+              v-model="props.directory.media_type"
+              variant="underlined"
+              :items="typeItems"
+              label="媒体类型"
+              @update:modelValue="props.directory.media_category = ''"
+            />
+          </VCol>
+          <VCol cols="6">
+            <VSelect
+              v-model="props.directory.media_category"
+              variant="underlined"
+              :items="getCategories"
+              label="媒体类别"
+            />
+          </VCol>
+          <VCol cols="4">
+            <VSelect v-model="props.directory.storage" variant="underlined" :items="storageItems" label="下载存储" />
+          </VCol>
+          <VCol cols="8">
+            <VPathField @update:modelValue="updateDownloadPath" :storage="props.directory.storage">
+              <template #activator="{ menuprops }">
+                <VTextField
+                  v-model="props.directory.download_path"
+                  v-bind="menuprops"
+                  variant="underlined"
+                  label="下载目录"
+                />
+              </template>
+            </VPathField>
+          </VCol>
+          <VCol cols="6" v-if="!props.directory.media_type || props.directory.media_type === ''">
+            <VSwitch v-model="props.directory.download_type_folder" label="按类型分类"></VSwitch>
+          </VCol>
+          <VCol cols="6" v-if="!props.directory.media_category || props.directory.media_category === ''">
+            <VSwitch v-model="props.directory.download_category_folder" label="按类别分类"></VSwitch>
+          </VCol>
+        </VRow>
+        <VDivider v-if="$props.directory.monitor_type" class="my-3 bg-primary" />
+        <VRow>
+          <VCol>
+            <VSelect
+              v-model="props.directory.monitor_type"
+              variant="underlined"
+              :items="transferSourceItems"
+              label="自动整理"
+            />
+          </VCol>
+        </VRow>
+        <VRow v-if="$props.directory.monitor_type">
+          <VCol cols="12" v-if="$props.directory.monitor_type == 'monitor'">
+            <VSelect
+              v-model="props.directory.monitor_mode"
+              variant="underlined"
+              :items="MonitorModeItems"
+              label="监控模式"
+            />
+          </VCol>
+          <VCol cols="4">
+            <VSelect
+              v-model="props.directory.library_storage"
+              variant="underlined"
+              :items="storageItems"
+              label="媒体库存储"
+            />
+          </VCol>
+          <VCol cols="8">
+            <VPathField @update:modelValue="updateLibraryPath" :storage="props.directory.library_storage">
+              <template #activator="{ menuprops }">
+                <VTextField
+                  v-model="props.directory.library_path"
+                  v-bind="menuprops"
+                  variant="underlined"
+                  label="媒体库目录"
+                />
+              </template>
+            </VPathField>
+          </VCol>
+          <VCol cols="4">
+            <VSelect
+              v-model="props.directory.transfer_type"
+              variant="underlined"
+              :items="transferTypeItems"
+              label="整理方式"
+              :no-data-text="computedNoDataText"
+            />
+          </VCol>
+          <VCol cols="8">
+            <VSelect
+              v-model="props.directory.overwrite_mode"
+              variant="underlined"
+              :items="overwriteModeItems"
+              label="覆盖模式"
+            />
+          </VCol>
+          <VCol cols="6" v-if="!props.directory.media_type || props.directory.media_type === ''">
+            <VSwitch v-model="props.directory.library_type_folder" label="按类型分类"></VSwitch>
+          </VCol>
+          <VCol cols="6" v-if="!props.directory.media_category || props.directory.media_category === ''">
+            <VSwitch v-model="props.directory.library_category_folder" label="按类别分类"></VSwitch>
+          </VCol>
+          <VCol cols="6">
+            <VSwitch v-model="props.directory.renaming" label="智能重命名"></VSwitch>
+          </VCol>
+          <VCol cols="6">
+            <VSwitch v-model="props.directory.scraping" label="刮削元数据"></VSwitch>
+          </VCol>
+          <VCol cols="6">
+            <VSwitch v-model="props.directory.notify" label="发送通知"></VSwitch>
+          </VCol>
+        </VRow>
+      </VForm>
+    </VCardText>
+    <VCardActions class="text-center py-0">
+      <VSpacer />
+      <VBtn :icon="isCollapsed ? 'mdi-chevron-down' : 'mdi-chevron-up'" @click.stop="isCollapsed = !isCollapsed" />
+      <VSpacer />
+    </VCardActions>
+  </VCard>
+</template>

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/DownloaderCard.vue

@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import api from '@/api'
+import { formatFileSize } from '@/@core/utils/formatters'
+import { DownloaderConf } from '@/api/types'
+import { useToast } from 'vue-toast-notification'
+import type { DownloaderInfo } from '@/api/types'
+import qbittorrent_image from '@images/logos/qbittorrent.png'
+import transmission_image from '@images/logos/transmission.png'
+import {cloneDeep} from "lodash";
+
+// 定义输入
+const props = defineProps({
+  // 单个下载器
+  downloader: {
+    type: Object as PropType<DownloaderConf>,
+    required: true,
+  },
+  // 是否允许刷新数据
+  allowRefresh: {
+    type: Boolean,
+    default: true,
+  },
+  // 所有下载器
+  downloaders: {
+    type: Array as PropType<DownloaderConf[]>,
+    required: true,
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'done', 'change'])
+
+// 提示框
+const $toast = useToast()
+
+// timeout定时器
+let timeoutTimer: NodeJS.Timeout | undefined = undefined
+
+// 上传速率
+const upload_rate = ref(0)
+
+// 下载速度
+const download_rate = ref(0)
+
+// 下载器详情弹窗
+const downloaderInfoDialog = ref(false)
+
+// 下载器详情
+const downloaderInfo = ref<DownloaderConf>({
+  name: '',
+  type: '',
+  default: false,
+  enabled: false,
+  config: {},
+})
+
+// 调用API查询下载器数据
+async function loadDownloaderInfo() {
+  if (!props.allowRefresh) {
+    return
+  }
+  try {
+    const res: DownloaderInfo = await api.get('dashboard/downloader', {
+      params: {
+        name: props.downloader.name,
+      },
+    })
+
+    if (res) {
+      upload_rate.value = res.upload_speed
+      download_rate.value = res.download_speed
+      // 定时查询
+      clearTimeout(timeoutTimer)
+      if (props.downloader.enabled) {
+        timeoutTimer = setTimeout(loadDownloaderInfo, 3000)
+      }
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+// 打开详情弹窗
+function openDownloaderInfoDialog() {
+  // 深复制
+  downloaderInfo.value = cloneDeep(props.downloader)
+  downloaderInfoDialog.value = true
+}
+
+// 保存详情数据
+function saveDownloaderInfo() {
+  // 为空不保存，跳出警告框
+  if (!downloaderInfo.value.name) {
+    $toast.error('名称不能为空，请输入后再确定')
+    return
+  }
+  // 重名判断
+  if (props.downloaders.some(item => item.name === downloaderInfo.value.name && item !== props.downloader)) {
+    $toast.error(`【${downloaderInfo.value.name}】已存在，请替换为其他名称`)
+    return
+  }
+  // 默认下载器去重
+  if (downloaderInfo.value.default) {
+    props.downloaders.forEach(item => {
+      if (item.default && item !== props.downloader) {
+        item.default = false
+        $toast.info(`【${item.name}】存在默认下载器，已替换成【${downloaderInfo.value.name}】`)
+      }
+    })
+  }
+  // 执行保存
+  downloaderInfoDialog.value = false
+  emit('change', downloaderInfo.value, props.downloader.name)
+  emit('done')
+}
+
+// 根据存储类型选择图标
+const getIcon = computed(() => {
+  switch (props.downloader.type) {
+    case 'qbittorrent':
+      return qbittorrent_image
+    case 'transmission':
+      return transmission_image
+    default:
+      return qbittorrent_image
+  }
+})
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
+
+onMounted(async () => {
+  if (props.downloader.enabled) {
+    await loadDownloaderInfo()
+  }
+})
+
+onUnmounted(() => {
+  if (timeoutTimer) clearTimeout(timeoutTimer)
+})
+</script>
+<template>
+  <div>
+    <VCard variant="tonal" @click="openDownloaderInfoDialog">
+      <DialogCloseBtn @click="onClose" />
+      <span class="absolute top-3 right-12">
+        <IconBtn>
+          <VIcon class="cursor-move" icon="mdi-drag" />
+        </IconBtn>
+      </span>
+      <VCardText class="flex justify-space-between align-center gap-4">
+        <div class="align-self-start flex-1">
+          <div class="flex items-center">
+            <VBadge
+              v-if="props.downloader.default && props.downloader.enabled"
+              dot
+              inline
+              color="success"
+              class="me-1"
+            />
+            <span class="text-h6">{{ downloader.name }}</span>
+          </div>
+          <div class="mt-1 flex flex-wrap text-sm" v-if="props.downloader.enabled">
+            <span class="me-2">{{ `↑ ${formatFileSize(upload_rate, 1)}/s ` }}</span>
+            <span>{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
+          </div>
+        </div>
+        <div class="h-20">
+          <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
+        </div>
+      </VCardText>
+    </VCard>
+    <VDialog v-model="downloaderInfoDialog" scrollable max-width="40rem" persistent>
+      <VCard :title="`${props.downloader.name} - 配置`" class="rounded-t">
+        <DialogCloseBtn v-model="downloaderInfoDialog" />
+        <VDivider />
+        <VCardText>
+          <VForm>
+            <VRow>
+              <VCol cols="12" md="6">
+                <VSwitch v-model="downloaderInfo.enabled" label="启用下载器" />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSwitch v-model="downloaderInfo.default" label="默认下载器" :disabled="!downloaderInfo.enabled" />
+              </VCol>
+            </VRow>
+            <VRow v-if="downloaderInfo.type == 'qbittorrent'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.name"
+                  label="名称"
+                  placeholder="必填；不可与其他名称重名"
+                  hint="下载器的别名"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.host"
+                  label="地址"
+                  placeholder="http(s)://ip:port"
+                  hint="服务端地址，格式：http(s)://ip:port"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.username"
+                  label="用户名"
+                  placeholder="admin"
+                  hint="登录使用的用户名"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.password"
+                  type="password"
+                  label="密码"
+                  hint="登录使用的密码"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSwitch
+                  v-model="downloaderInfo.config.category"
+                  label="自动分类管理"
+                  hint="由下载器自动管理分类和下载目录"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSwitch
+                  v-model="downloaderInfo.config.sequentail"
+                  label="顺序下载"
+                  hint="按顺序依次下载文件"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSwitch
+                  v-model="downloaderInfo.config.force_resume"
+                  label="强制继续"
+                  hint="强制继续、强制上传模式"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSwitch
+                  v-model="downloaderInfo.config.first_last_piece"
+                  label="优先首尾文件"
+                  hint="优先下载首尾文件块"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="downloaderInfo.type == 'transmission'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.name"
+                  label="名称"
+                  placeholder="必填；不可与其他名称重名"
+                  hint="下载器的别名"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.host"
+                  label="地址"
+                  placeholder="http(s)://ip:port"
+                  hint="服务端地址，格式：http(s)://ip:port"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.username"
+                  label="用户名"
+                  placeholder="admin"
+                  hint="登录使用的用户名"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.password"
+                  type="password"
+                  label="密码"
+                  hint="登录使用的密码"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+        <VCardActions class="pt-3">
+          <VBtn @click="saveDownloaderInfo" variant="elevated" prepend-icon="mdi-content-save" class="px-5">
+            确定
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+  </div>
+</template>

src/components/cards/DownloadingCard.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import api from '@/api'
 import type { DownloadingInfo } from '@/api/types'
+import { formatFileSize } from '@/@core/utils/formatters'
 
 // 输入参数
 const props = defineProps({
@@ -17,16 +18,21 @@ function getPercentage() {
 
 // 速度
 function getSpeedText() {
-  return `↑ ${props.info?.upspeed}/s ↓ ${props.info?.dlspeed}/s ${props.info?.left_time}`
+  return `${formatFileSize(props.info?.size || 0)} ↑ ${props.info?.upspeed}/s ↓ ${props.info?.dlspeed}/s ${
+    props.info?.left_time
+  }`
 }
 
 // 下载状态
 const isDownloading = ref(props.info?.state === 'downloading')
 
 // 监听props.info?.state的变化
-watch(() => props.info?.state, (newValue) => {
-  isDownloading.value = newValue === 'downloading';
-});
+watch(
+  () => props.info?.state,
+  newValue => {
+    isDownloading.value = newValue === 'downloading'
+  },
+)
 
 // 图片是否加载完成
 const imageLoaded = ref(false)
@@ -45,14 +51,10 @@ function getTextClass() {
 async function toggleDownload() {
   const operation = isDownloading.value ? 'stop' : 'start'
   try {
-    const result: { [key: string]: any } = await api.get(
-      `download/${operation}/${props.info?.hash}`,
-    )
+    const result: { [key: string]: any } = await api.get(`download/${operation}/${props.info?.hash}`)
 
-    if (result.success)
-      isDownloading.value = !isDownloading.value
-  }
-  catch (error) {
+    if (result.success) isDownloading.value = !isDownloading.value
+  } catch (error) {
     console.error(error)
   }
 }
@@ -62,67 +64,42 @@ async function deleteDownload() {
   try {
     await api.delete(`download/${props.info?.hash}`)
     cardState.value = false
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
 </script>
 
 <template>
-  <VCard
-    v-if="cardState"
-    :key="props.info?.hash"
-  >
+  <VCard v-if="cardState" :key="props.info?.hash">
     <template #image>
-      <VImg
-        :src="props.info?.media.image"
-        aspect-ratio="2/3"
-        cover
-        class="brightness-50"
-        @load="imageLoadHandler"
-      />
+      <VImg :src="props.info?.media.image" aspect-ratio="2/3" cover class="brightness-50" @load="imageLoadHandler" />
     </template>
 
-    <VCardTitle
-      class="break-words whitespace-normal"
-      :class="getTextClass()"
-    >
+    <VCardTitle class="break-words whitespace-normal" :class="getTextClass()">
       {{ props.info?.media.title || props.info?.name }}
-      {{ props.info?.media.episode ? `${props.info?.media.season} ${props.info?.media.episode}` : props.info?.season_episode }}
+      {{
+        props.info?.media.episode
+          ? `${props.info?.media.season} ${props.info?.media.episode}`
+          : props.info?.season_episode
+      }}
     </VCardTitle>
 
-    <VCardSubtitle
-      class="break-words whitespace-normal"
-      :class="getTextClass()"
-    >
+    <VCardSubtitle class="break-words whitespace-normal" :class="getTextClass()">
       {{ props.info?.title }}
     </VCardSubtitle>
 
-    <VCardText
-      class="text-subtitle-1 pt-3 pb-1"
-      :class="getTextClass()"
-    >
+    <VCardText class="text-subtitle-1 pt-3 pb-1" :class="getTextClass()">
       {{ getSpeedText() }}
     </VCardText>
 
-    <VCardText
-      v-if="getPercentage() > 0"
-      :class="getTextClass()"
-    >
+    <VCardText v-if="getPercentage() > 0" :class="getTextClass()">
       <VProgressLinear :model-value="getPercentage()" />
     </VCardText>
 
     <VCardActions class="justify-space-between">
-      <VBtn
-        :icon="`${isDownloading ? 'mdi-pause' : 'mdi-play'}`"
-        @click="toggleDownload"
-      />
-      <VBtn
-        color="error"
-        icon="mdi-trash-can-outline"
-        @click="deleteDownload"
-      />
+      <VBtn :icon="`${isDownloading ? 'mdi-pause' : 'mdi-play'}`" @click="toggleDownload" />
+      <VBtn color="error" icon="mdi-trash-can-outline" @click="deleteDownload" />
     </VCardActions>
   </VCard>
 </template>

src/components/cards/FilterRuleCard.vue

@@ -1,92 +1,50 @@
 <script lang="ts" setup>
+import { innerFilterRules } from '@/api/constants'
+import { CustomRule } from '@/api/types'
+import { cloneDeep } from 'lodash'
+
 // 输入参数
 const props = defineProps({
   pri: String,
-  maxpri: String,
   rules: Array as PropType<string[]>,
-  width: String,
-  height: String,
+  custom_rules: Array as PropType<CustomRule[]>,
 })
 
 // 定义触发的自定义事件
-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)
 }
 
 // 过滤规则下拉框
-const selectFilterOptions = ref<{ [key: string]: string }[]>([
-  { title: '特效字幕', value: ' SPECSUB ' },
-  { title: '中文字幕', value: ' CNSUB ' },
-  { title: '国语配音', value: ' CNVOI ' },
-  { title: '排除: 国语配音', value: ' !CNVOI ' },
-  { title: '粤语配音', value: ' HKVOI ' },
-  { title: '排除: 粤语配音', value: ' !HKVOI ' },
-  { title: '促销: 免费', value: ' FREE ' },
-  { title: '分辨率: 4K', value: ' 4K ' },
-  { title: '分辨率: 1080P', value: ' 1080P ' },
-  { title: '分辨率: 720P', value: ' 720P ' },
-  { title: '排除: 720P', value: ' !720P ' },
-  { title: '质量: 蓝光原盘', value: ' BLU ' },
-  { title: '排除: 蓝光原盘', value: ' !BLU ' },
-  { title: '质量: BLURAY', value: ' BLURAY ' },
-  { title: '排除: BLURAY', value: ' !BLURAY ' },
-  { title: '质量: UHD', value: ' UHD ' },
-  { title: '排除: UHD', value: ' !UHD ' },
-  { title: '质量: REMUX', value: ' REMUX ' },
-  { title: '排除: REMUX', value: ' !REMUX ' },
-  { title: '质量: WEB-DL', value: ' WEBDL ' },
-  { title: '排除: WEB-DL', value: ' !WEBDL ' },
-  { title: '质量: 60fps', value: ' 60FPS ' },
-  { title: '排除: 60fps', value: ' !60FPS ' },
-  { title: '编码: H265', value: ' H265 ' },
-  { title: '排除: H265', value: ' !H265 ' },
-  { title: '编码: H264', value: ' H264 ' },
-  { title: '排除: H264', value: ' !H264 ' },
-  { title: '效果: 杜比视界', value: ' DOLBY ' },
-  { title: '排除: 杜比视界', value: ' !DOLBY ' },
-  { title: '效果: 杜比全景声', value: ' ATMOS ' },
-  { title: '排除: 杜比全景声', value: ' !ATMOS ' },
-  { title: '效果: HDR', value: ' HDR ' },
-  { title: '排除: HDR', value: ' !HDR ' },
-  { title: '效果: SDR', value: ' SDR ' },
-  { title: '排除: SDR', value: ' !SDR ' },
-  { title: '效果: 3D', value: ' 3D ' },
-  { title: '排除: 3D', value: ' !3D ' },
-])
+const selectFilterOptions = ref<{ [key: string]: string }[]>([])
+
+onMounted(() => {
+  selectFilterOptions.value = cloneDeep(innerFilterRules)
+  if (props.custom_rules) {
+    console.log(props.custom_rules)
+    props.custom_rules.map(rule => {
+      selectFilterOptions.value.push({
+        title: rule.name,
+        value: rule.id,
+      })
+    })
+  }
+})
 </script>
 
 <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" />
+  <VCard variant="tonal">
+    <span class="absolute top-3 right-12">
+      <IconBtn>
+        <VIcon class="cursor-move" icon="mdi-drag" />
       </IconBtn>
     </span>
     <DialogCloseBtn @click="onClose" />
@@ -95,13 +53,13 @@ const selectFilterOptions = ref<{ [key: string]: string }[]>([
       <VRow>
         <VCol>
           <VSelect
-            :key="props.pri"
             v-model="props.rules"
             variant="underlined"
             :items="selectFilterOptions"
             chips
             label=""
             multiple
+            clearable
             @update:modelValue="filtersChanged"
           />
         </VCol>

src/components/cards/FilterRuleGroupCard.vue

@@ -0,0 +1,302 @@
+<script lang="ts" setup>
+import draggable from 'vuedraggable'
+import { copyToClipboard } from '@/@core/utils/navigator'
+import { CustomRule, FilterRuleGroup } from '@/api/types'
+import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
+import { useToast } from 'vue-toast-notification'
+import ImportCodeDialog from '@/components/dialog/ImportCodeDialog.vue'
+import filter_group_svg from '@images/svg/filter-group.svg'
+import { cloneDeep } from 'lodash'
+
+// 输入参数
+const props = defineProps({
+  // 单个规则组
+  group: {
+    type: Object as PropType<FilterRuleGroup>,
+    required: true,
+  },
+  // 所有规则组
+  groups: {
+    type: Array as PropType<FilterRuleGroup[]>,
+    required: true,
+  },
+  // 媒体类型字典
+  categories: {
+    type: Object as PropType<{ [key: string]: any }>,
+    required: true,
+  },
+  // 自定义规则列表
+  custom_rules: Array as PropType<CustomRule[]>,
+})
+
+// 规则卡片类型
+interface FilterCard {
+  // 优先级
+  pri: string
+  // 已选规则
+  rules: string[]
+}
+
+// 提示框
+const $toast = useToast()
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'change', 'done'])
+
+// 规则详情弹窗
+const groupInfoDialog = ref(false)
+
+// 规则详情
+const groupInfo = ref<FilterRuleGroup>({
+  name: props.group?.name,
+  rule_string: props.group?.rule_string,
+  media_type: props.group?.media_type,
+  category: props.group?.category,
+})
+
+// 媒体类型字典
+const mediaTypeItems = [
+  { title: '通用', value: '' },
+  { title: '电影', value: '电影' },
+  { title: '电视剧', value: '电视剧' },
+]
+
+// 根据选中的媒体类型，获取对应的媒体类别
+const getCategories = computed(() => {
+  const default_value = [{ title: '全部', value: '' }]
+  if (!props.categories || !groupInfo.value.media_type || !props.categories[groupInfo.value.media_type ?? ''])
+    return default_value
+  return default_value.concat(props.categories[groupInfo.value.media_type ?? ''])
+})
+
+// 规则组规则卡片列表
+const filterRuleCards = ref<FilterCard[]>([])
+
+// 导入代码弹窗
+const importCodeDialog = ref(false)
+
+// 导入的代码
+const importCodeString = ref('')
+
+// 更新规则卡片的值
+function updateFilterCardValue(pri: string, rules: string[]) {
+  const card = filterRuleCards.value.find(card => card.pri === pri)
+  if (card) card.rules = rules
+}
+
+// 移除卡片
+function filterCardClose(pri: string) {
+  filterRuleCards.value = filterRuleCards.value
+    .filter(card => card.pri !== pri)
+    .map((card, index) => {
+      card.pri = (index + 1).toString()
+      return card
+    })
+}
+
+// 分享规则
+function shareRules() {
+  // 有值才处理
+  if (filterRuleCards.value.length === 0) return
+
+  // 将卡片规则接装为字符串
+  const value = filterRuleCards.value
+    .filter(card => card.rules.length > 0)
+    .map(card => card.rules.join('&'))
+    .join('>')
+
+  // 复制到剪贴板
+  try {
+    copyToClipboard(value)
+    $toast.success('优先级规则已复制到剪贴板')
+  } catch (error) {
+    $toast.error('优先级规则复制失败！')
+  }
+}
+
+// 导入规则
+async function importRules() {
+  importCodeString.value = ''
+  importCodeDialog.value = true
+}
+
+// 监听导入代码变化
+watchEffect(() => {
+  if (!importCodeString.value) return
+  // 导入代码需要以空格开头和结束，没有则拼接
+  if (!importCodeString.value.startsWith(' ')) importCodeString.value = ` ${importCodeString.value}`
+  if (!importCodeString.value.endsWith(' ')) importCodeString.value = `${importCodeString.value} `
+  // 将导入的代码转换为规则卡片
+  const groups = importCodeString.value.split('>')
+  filterRuleCards.value = groups.map((group: string, index: number) => {
+    return {
+      pri: (index + 1).toString(),
+      rules: group.split('&'),
+    }
+  })
+})
+
+// 增加卡片
+function addFilterCard() {
+  // 优先级
+  const pri = (filterRuleCards.value.length + 1).toString()
+
+  // 新卡片
+  const newCard: FilterCard = { pri, rules: [] }
+
+  // 添加到列表
+  filterRuleCards.value.push(newCard)
+}
+
+// 根据列表的拖动顺序更新优先级
+function dragOrderEnd() {
+  filterRuleCards.value.map((card, index) => {
+    card.pri = (index + 1).toString()
+    return card
+  })
+}
+
+// 打开详情弹窗
+function opengroupInfoDialog() {
+  // 深复制
+  groupInfo.value = cloneDeep(props.group)
+  if (props.group.rule_string) {
+    filterRuleCards.value = props.group.rule_string.split('>').map((group: string, index: number) => {
+      return {
+        pri: (index + 1).toString(),
+        rules: group.split('&'),
+      }
+    })
+  }
+  groupInfoDialog.value = true
+}
+
+// 保存详情数据
+function saveGroupInfo() {
+  // 为空
+  if (!groupInfo.value.name) {
+    $toast.error('规则组名称不能为空')
+    return
+  }
+  // 重名判断
+  if (props.groups.some(item => item.name === groupInfo.value.name && item !== props.group)) {
+    $toast.error(`规则组名称【${groupInfo.value.name}】已存在，请替换`)
+    return
+  }
+  // 保存
+  groupInfoDialog.value = false
+  // 更新到 groupInfo的rule_string
+  groupInfo.value.rule_string = filterRuleCards.value
+    .filter(card => card.rules.length > 0)
+    .map(card => card.rules.join('&'))
+    .join('>')
+  emit('change', groupInfo.value, props.group.name)
+  emit('done')
+}
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
+</script>
+
+<template>
+  <div>
+    <VCard variant="tonal" @click="opengroupInfoDialog">
+      <span class="absolute top-3 right-12">
+        <IconBtn>
+          <VIcon class="cursor-move" icon="mdi-drag" />
+        </IconBtn>
+      </span>
+      <DialogCloseBtn @click="onClose" />
+      <VCardText class="flex justify-space-between align-center gap-3">
+        <div class="align-self-start">
+          <h5 class="text-h6 mb-1">{{ props.group.name }}</h5>
+          <div class="text-body-1 mb-3">
+            <span v-if="!props.group.category">{{ props.group.media_type || '通用' }}</span>
+            <span v-else>{{ props.group.category }}</span>
+          </div>
+        </div>
+        <VImg :src="filter_group_svg" cover class="mt-10" max-width="3rem" />
+      </VCardText>
+    </VCard>
+    <VDialog v-model="groupInfoDialog" scrollable max-width="80rem" persistent>
+      <VCard :title="`${props.group.name} - 配置`" class="rounded-t">
+        <DialogCloseBtn v-model="groupInfoDialog" />
+        <VDivider />
+        <VCardText>
+          <VRow>
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="groupInfo.name"
+                label="规则组名称"
+                placeholder="必填；不可与其他规则组重名"
+                hint="自定义规则组名称"
+                persistent-hint
+                active
+              />
+            </VCol>
+            <VCol cols="6" md="3">
+              <VSelect
+                v-model="groupInfo.media_type"
+                label="适用媒体类型"
+                :items="mediaTypeItems"
+                hint="选择规则组适用的媒体类型"
+                persistent-hint
+                active
+              />
+            </VCol>
+            <VCol cols="6" md="3">
+              <VSelect
+                v-model="groupInfo.category"
+                :items="getCategories"
+                label="适用媒体类别"
+                hint="选择规则组适用的媒体类别"
+                persistent-hint
+                active
+              />
+            </VCol>
+          </VRow>
+        </VCardText>
+        <VCardText>
+          <draggable
+            v-model="filterRuleCards"
+            handle=".cursor-move"
+            item-key="pri"
+            tag="div"
+            @end="dragOrderEnd"
+            :component-data="{ 'class': 'grid gap-3 grid-filterrule-card' }"
+          >
+            <template #item="{ element }">
+              <FilterRuleCard
+                :pri="element.pri"
+                :maxpri="filterRuleCards.length.toString()"
+                :rules="element.rules"
+                :custom_rules="props.custom_rules"
+                @changed="updateFilterCardValue"
+                @close="filterCardClose(element.pri)"
+              />
+            </template>
+          </draggable>
+          <div class="text-center" v-if="filterRuleCards.length == 0">请添加或导入规则</div>
+        </VCardText>
+        <VCardActions class="pt-3">
+          <VBtn color="primary" variant="tonal" @click="addFilterCard">
+            <VIcon icon="mdi-plus" />
+          </VBtn>
+          <VBtn color="success" variant="tonal" @click="importRules">
+            <VIcon icon="mdi-import" />
+          </VBtn>
+          <VBtn color="info" variant="tonal" @click="shareRules">
+            <VIcon icon="mdi-share" />
+          </VBtn>
+          <VSpacer />
+          <VBtn @click="saveGroupInfo" variant="elevated" prepend-icon="mdi-content-save" class="px-5"> 确定 </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+    <VDialog v-model="importCodeDialog" width="60rem" scrollable>
+      <ImportCodeDialog v-model="importCodeString" title="导入优先级规则" @close="importCodeDialog = false" />
+    </VDialog>
+  </div>
+</template>

src/components/cards/LibraryCard.vue

@@ -35,45 +35,36 @@ function imageErrorHandler() {
 
 // 默认图片
 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
+  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')
+  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/${encodeURIComponent(url)}/0`
+  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()
+  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/${encodeURIComponent(IMAGES[i])}/0`
+    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()
+  if (!canvas) return getDefaultImage()
 
   // 画布参数
   const POSTER_WIDTH = (canvas.width - 32) / 4
@@ -85,8 +76,7 @@ async function drawImages(imageList: string[]) {
 
   // 获取画布上下文
   const ctx = canvas.getContext('2d')
-  if (!ctx)
-    return getDefaultImage()
+  if (!ctx) return getDefaultImage()
 
   // 设置背景色为黑色
   ctx.fillStyle = '#000000'
@@ -94,16 +84,14 @@ async function drawImages(imageList: string[]) {
 
   // 绘制图片
   async function drawImageWithReflection(imgSrc: string, index: number) {
-    if (!canvas)
-      return
+    if (!canvas) return
 
-    if (!ctx)
-      return
+    if (!ctx) return
 
     const img = new Image()
     img.setAttribute('crossorigin', 'anonymous')
     img.src = imgSrc
-    await new Promise(resolve => img.onload = resolve)
+    await new Promise(resolve => (img.onload = resolve))
 
     const x = MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1)
     const y = MARGIN_HEIGHT
@@ -125,12 +113,7 @@ async function drawImages(imageList: string[]) {
       REFLECTION_HEIGHT,
     )
 
-    const gradient = ctx.createLinearGradient(
-      0,
-      REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT,
-      0,
-      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)')
@@ -142,8 +125,7 @@ async function drawImages(imageList: string[]) {
 
   // 绘制多张图片
   const loopCount = Math.min(4, IMAGES.length)
-  for (let i = 0; i < loopCount; i++)
-    await drawImageWithReflection(IMAGES[i], i + 1)
+  for (let i = 0; i < loopCount; i++) await drawImageWithReflection(IMAGES[i], i + 1)
 
   // 转换为图片地址
   return canvas.toDataURL('image/png')
@@ -152,17 +134,12 @@ async function drawImages(imageList: string[]) {
 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 || '')
+  else imgUrl.value = getImgUrl(props.media?.image || '')
 })
 </script>
 
 <template>
-  <VHover
-    v-bind="props"
-    :height="props.height"
-    :width="props.width"
-  >
+  <VHover v-bind="props" :height="props.height" :width="props.width">
     <template #default="hover">
       <VCard
         v-bind="hover.props"
@@ -175,13 +152,7 @@ onMounted(async () => {
       >
         <template #image>
           <canvas ref="canvasRef" class="w-full h-full hidden" />
-          <VImg
-            :src="imgUrl"
-            aspect-ratio="2/3"
-            cover
-            @load="imageLoadHandler"
-            @error="imageErrorHandler"
-          >
+          <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" />
@@ -190,7 +161,7 @@ onMounted(async () => {
             <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 ...">
+              <h1 class="mb-1 text-white text-shadow font-bold line-clamp-2 overflow-hidden text-ellipsis ...">
                 {{ props.media?.name }}
               </h1>
             </VCardText>

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,10 +19,10 @@ const props = defineProps({
   height: String,
 })
 
-// 订阅规则
-const subscribeRules = ref({
-  show_edit_dialog: false,
-})
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
+const store = useStore()
 
 // 提示框
 const $toast = useToast()
@@ -57,22 +60,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'
 }
 
 // 添加订阅处理
@@ -86,29 +100,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()
   }
@@ -131,6 +140,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,
     })
@@ -142,43 +152,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 && subscribeRules.value.show_edit_dialog) {
-      subscribeId.value = result.data.id
-      subscribeEditDialog.value = true
+    if (result.success && seasonsSelected.value.length <= 1) {
+      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取消订阅
@@ -186,41 +185,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)
   }
 }
@@ -238,10 +229,8 @@ async function handleCheckExists() {
       },
     })
 
-    if (result.success)
-      isExists.value = true
-  }
-  catch (error) {
+    if (result.success) isExists.value = true
+  } catch (error) {
     console.error(error)
   }
 }
@@ -249,9 +238,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: {
@@ -261,115 +248,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 querySubscribeRules() {
+async function queryDefaultSubscribeConfig() {
+  // 非管理员不显示
+  if (!store.state.auth.superUser) return false
   try {
-    const result: { [key: string]: any } = await api.get(
-      'system/setting/DefaultFilterRules',
-    )
-    if (result.data?.value)
-      subscribeRules.value = result.data?.value
-  }
-  catch (error) {
+    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,
+      },
+    })
+  }
 }
 
 // 开始搜索
@@ -377,13 +351,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,
     },
   })
 }
@@ -392,46 +363,49 @@ function handleSearch() {
 onBeforeMount(() => {
   handleCheckSubscribe()
   handleCheckExists()
-  querySubscribeRules()
 })
 
 // 计算图片地址
 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
+  // 使用图片缓存
+  if (globalSettings.GLOBAL_IMAGE_CACHE)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
   // 如果地址中包含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}system/img/0?imgurl=${encodeURIComponent(url)}`
   return url
 })
 
 // 拼装季图片地址
 function getSeasonPoster(posterPath: string) {
-  if (!posterPath)
-    return ''
-  return `https://image.tmdb.org/t/p/w500${posterPath}`
+  if (!posterPath) return ''
+  return `https://${globalSettings.TMDB_IMAGE_DOMAIN}/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()
 }
+
+// 移除订阅
+function onRemoveSubscribe() {
+  subscribeEditDialog.value = false
+}
 </script>
 
 <template>
-  <VHover v-bind="props">
+  <VHover>
     <template #default="hover">
       <VCard
         v-bind="hover.props"
@@ -442,6 +416,7 @@ function getYear(airDate: string) {
           'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
           'ring-1': isImageLoaded,
         }"
+        @click.stop="goMediaDetail(hover.isHovering ?? false)"
       >
         <VImg
           aspect-ratio="2/3"
@@ -457,79 +432,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"
@@ -546,16 +511,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 }} 集
@@ -564,12 +522,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>
@@ -582,23 +535,20 @@ 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="onRemoveSubscribe"
   />
 </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/MediaServerCard.vue

@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import { MediaServerConf, MediaServerLibrary, MediaStatistic } from '@/api/types'
+import { useToast } from 'vue-toast-notification'
+import emby_image from '@images/logos/emby.png'
+import jellyfin_image from '@images/logos/jellyfin.png'
+import plex_image from '@images/logos/plex.png'
+import api from '@/api'
+import { cloneDeep } from 'lodash'
+
+// 定义输入
+const props = defineProps({
+  // 单个媒体服务器
+  mediaserver: {
+    type: Object as PropType<MediaServerConf>,
+    required: true,
+  },
+  // 所有媒体服务器
+  mediaservers: {
+    type: Array as PropType<MediaServerConf[]>,
+    required: true,
+  },
+})
+
+// 提示框
+const $toast = useToast()
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'done', 'change'])
+
+// 媒体统计数据
+const infoItems = ref([
+  {
+    avatar: 'mdi-movie-roll',
+    title: '电影',
+    amount: '0',
+  },
+  {
+    avatar: 'mdi-television-box',
+    title: '电视剧',
+    amount: '0',
+  },
+  {
+    avatar: 'mdi-account',
+    title: '用户',
+    amount: '0',
+  },
+])
+
+// 同步媒体库选项
+const librariesOptions = ref<{ title: string; value: string | undefined }[]>([
+  {
+    title: '全部',
+    value: 'all',
+  },
+])
+
+// 媒体服务器详情弹窗
+const mediaServerInfoDialog = ref(false)
+
+// 媒体服务器详情
+const mediaServerInfo = ref<MediaServerConf>({
+  name: '',
+  type: '',
+  enabled: false,
+  config: {},
+})
+
+// 打开详情弹窗
+function openMediaServerInfoDialog() {
+  loadLibrary(props.mediaserver.name)
+  // 深复制
+  mediaServerInfo.value = cloneDeep(props.mediaserver)
+  mediaServerInfoDialog.value = true
+  if (!props.mediaserver.sync_libraries) {
+    mediaServerInfo.value.sync_libraries = ['all']
+  }
+}
+
+// 保存详情数据
+function saveMediaServerInfo() {
+  // 为空不保存，跳出警告框
+  if (!mediaServerInfo.value.name) {
+    $toast.error('名称不能为空，请输入后再确定')
+    return
+  }
+  // 重名判断
+  if (props.mediaservers.some(item => item.name === mediaServerInfo.value.name && item !== props.mediaserver)) {
+    $toast.error(`【${mediaServerInfo.value.name}】已存在，请替换为其他名称`)
+    return
+  }
+  // 执行保存
+  mediaServerInfoDialog.value = false
+  emit('change', mediaServerInfo.value, props.mediaserver.name)
+  emit('done')
+}
+
+// 根据存储类型选择图标
+const getIcon = computed(() => {
+  switch (props.mediaserver.type) {
+    case 'emby':
+      return emby_image
+    case 'jellyfin':
+      return jellyfin_image
+    default:
+      return plex_image
+  }
+})
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
+
+// 调用API加载媒体统计数据
+async function loadMediaStatistic() {
+  try {
+    const res: MediaStatistic = await api.get('dashboard/statistic', {
+      params: {
+        name: props.mediaserver.name,
+      },
+    })
+
+    if (res) {
+      infoItems.value = [
+        {
+          avatar: 'mdi-movie-roll',
+          title: '电影',
+          amount: res.movie_count.toLocaleString(),
+        },
+        {
+          avatar: 'mdi-television-box',
+          title: '电视剧',
+          amount: res.tv_count.toLocaleString(),
+        },
+        {
+          avatar: 'mdi-account',
+          title: '用户',
+          amount: res.user_count.toLocaleString(),
+        },
+      ]
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+// 调用API查询媒体库
+async function loadLibrary(server: string) {
+  try {
+    const result: MediaServerLibrary[] = await api.get('mediaserver/library', { params: { server } })
+    if (result && result.length > 0) {
+      librariesOptions.value = result.map(item => ({
+        title: item.name,
+        value: item.id?.toString(),
+      }))
+    } else {
+      librariesOptions.value = []
+    }
+    librariesOptions.value.unshift({
+      title: '全部',
+      value: 'all',
+    })
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+onMounted(() => {
+  loadMediaStatistic()
+})
+</script>
+<template>
+  <div>
+    <VCard variant="tonal" @click="openMediaServerInfoDialog">
+      <DialogCloseBtn @click="onClose" />
+      <VCardText class="flex justify-space-between align-center gap-3">
+        <div class="align-self-start flex-1">
+          <div class="text-h6 mb-1">{{ mediaserver.name }}</div>
+          <div class="text-sm mt-5 flex flex-wrap">
+            <span v-for="item in infoItems" :key="item.title" class="me-2 mb-1">
+              <VIcon rounded :icon="item.avatar" class="me-1" />{{ item.amount }}
+            </span>
+          </div>
+        </div>
+        <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
+      </VCardText>
+    </VCard>
+    <VDialog v-model="mediaServerInfoDialog" scrollable max-width="40rem" persistent>
+      <VCard :title="`${props.mediaserver.name} - 配置`" class="rounded-t">
+        <DialogCloseBtn v-model="mediaServerInfoDialog" />
+        <VDivider />
+        <VCardText>
+          <VForm>
+            <VRow>
+              <VCol cols="12" md="6">
+                <VSwitch v-model="mediaServerInfo.enabled" label="启用媒体服务器" />
+              </VCol>
+            </VRow>
+            <VRow v-if="mediaServerInfo.type == 'emby'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.name"
+                  label="名称"
+                  placeholder="必填；不可与其他名称重名"
+                  hint="媒体服务器的别名"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.host"
+                  label="地址"
+                  placeholder="http(s)://ip:port"
+                  hint="服务端地址，格式：http(s)://ip:port"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.play_host"
+                  label="外网播放地址"
+                  placeholder="http(s)://domain:port"
+                  hint="跳转播放页面使用的地址，格式：http(s)://domain:port"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.apikey"
+                  label="API密钥"
+                  hint="Emby设置->高级->API密钥中生成的密钥"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="mediaServerInfo.type == 'jellyfin'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.name"
+                  label="名称"
+                  placeholder="必填；不可与其他名称重名"
+                  hint="媒体服务器的别名"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.host"
+                  label="地址"
+                  placeholder="http(s)://ip:port"
+                  hint="服务端地址，格式：http(s)://ip:port"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.play_host"
+                  label="外网播放地址"
+                  placeholder="http(s)://domain:port"
+                  hint="跳转播放页面使用的地址，格式：http(s)://domain:port"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.apikey"
+                  label="API密钥"
+                  hint="Jellyfin设置->高级->API密钥中生成的密钥"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="mediaServerInfo.type == 'plex'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.name"
+                  label="名称"
+                  placeholder="必填；不可与其他名称重名"
+                  hint="媒体服务器的别名"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.host"
+                  label="地址"
+                  placeholder="http(s)://ip:port"
+                  hint="服务端地址，格式：http(s)://ip:port"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.play_host"
+                  label="外网播放地址"
+                  placeholder="http(s)://domain:port"
+                  hint="跳转播放页面使用的地址，格式：http(s)://domain:port"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.token"
+                  label="X-Plex-Token"
+                  hint="浏览器F12->网络，从Plex请求URL中获取的X-Plex-Token"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+            </VRow>
+            <VRow>
+              <VCol cols="12">
+                <VSelect
+                  v-model="mediaServerInfo.sync_libraries"
+                  label="同步媒体库"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  hint="只有选中的媒体库才会被同步"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+        <VCardActions class="pt-3">
+          <VBtn @click="saveMediaServerInfo" variant="elevated" prepend-icon="mdi-content-save" class="px-5">
+            确定
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+  </div>
+</template>

src/components/cards/MessageCard.vue

@@ -0,0 +1,100 @@
+<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) {
+      return props.message.note
+    }
+  }
+  return {}
+}
+
+// 将\n转换为html属性的换行符
+function replaceNewLine(value: string) {
+  if (!value) return ''
+  return value.replace(/\n/g, '<br/>')
+}
+</script>
+
+<template>
+  <VCard variant="tonal" :width="props.width" :height="props.height" @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>
+    <div
+      v-if="props.message?.title && !props.message?.image && !props.message?.note"
+      class="rounded-md text-body-1 py-2 px-4 elevation-2 bg-primary text-white chat-right mb-1"
+    >
+      <p class="mb-0">{{ props.message?.title }}</p>
+    </div>
+    <VCardTitle v-else-if="props.message?.title">
+      {{ props.message?.title }}
+    </VCardTitle>
+    <div
+      v-if="props.message?.text && props.message?.action === 0"
+      class="rounded-md text-body-1 py-2 px-4 elevation-2 bg-primary text-white chat-right mb-1"
+    >
+      <p class="mb-0">{{ props.message?.text }}</p>
+    </div>
+    <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>
+  </VCard>
+  <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>
+</template>

src/components/cards/NotificationChannelCard.vue

@@ -0,0 +1,401 @@
+<script setup lang="ts">
+import { NotificationConf } from '@/api/types'
+import wechat_image from '@images/logos/wechat.png'
+import telegram_image from '@images/logos/telegram.webp'
+import vocechat_image from '@images/logos/vocechat.png'
+import synologychat_image from '@images/logos/synologychat.png'
+import slack_image from '@images/logos/slack.webp'
+import chrome_image from '@images/logos/chrome.png'
+import { useToast } from 'vue-toast-notification'
+import { cloneDeep } from "lodash"
+
+// 定义输入
+const props = defineProps({
+  // 单个通知
+  notification: {
+    type: Object as PropType<NotificationConf>,
+    required: true,
+  },
+  // 所有通知
+  notifications: {
+    type: Array as PropType<NotificationConf[]>,
+    required: true,
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'change', 'done'])
+
+// 提示框
+const $toast = useToast()
+
+// 通知详情弹窗
+const notificationInfoDialog = ref(false)
+
+// 通知详情
+const notificationInfo = ref<NotificationConf>({
+  name: '',
+  type: '',
+  enabled: false,
+  config: {},
+})
+
+// 各通知类型的名称字典
+const notificationTypeNames: { [key: string]: string } = {
+  wechat: '企业微信',
+  telegram: 'Telegram',
+  vocechat: 'VoceChat',
+  synologychat: 'Synology Chat',
+  slack: 'Slack',
+  webpush: 'WebPush',
+}
+
+// 消息类型下拉字典
+const notificationTypes = [
+  { value: '资源下载', title: '资源下载' },
+  { value: '整理入库', title: '整理入库' },
+  { value: '订阅', title: '订阅' },
+  { value: '站点', title: '站点' },
+  { value: '媒体服务器', title: '媒体服务器' },
+  { value: '手动处理', title: '手动处理' },
+  { value: '插件', title: '插件' },
+  { value: '其它', title: '其它' },
+]
+
+// 打开详情弹窗
+function openNotificationInfoDialog() {
+  // 替换成深复制，避免修改时影响原数据
+  notificationInfo.value = cloneDeep(props.notification)
+  console.log(`当前卡片的通知信息：${JSON.stringify(notificationInfo.value)}`)
+  notificationInfoDialog.value = true
+}
+
+// 保存详情数据
+function saveNotificationInfo() {
+  // 为空不保存，跳出警告框
+  if (!notificationInfo.value.name) {
+    $toast.error('名称不能为空，请输入后再确定')
+    return
+  }
+  // 重名判断
+  if (props.notifications.some(item => item.name === notificationInfo.value.name && item !== props.notification)) {
+    $toast.error(`通知渠道【${notificationInfo.value.name}】已存在，请替换`)
+    return
+  }
+  notificationInfoDialog.value = false
+  emit('change', notificationInfo.value, props.notification.name)
+  emit('done')
+}
+
+// 根据存储类型选择图标
+const getIcon = computed(() => {
+  switch (props.notification.type) {
+    case 'wechat':
+      return wechat_image
+    case 'telegram':
+      return telegram_image
+    case 'vocechat':
+      return vocechat_image
+    case 'synologychat':
+      return synologychat_image
+    case 'slack':
+      return slack_image
+    case 'webpush':
+      return chrome_image
+    default:
+      return wechat_image
+  }
+})
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
+</script>
+<template>
+  <div>
+    <VCard variant="tonal" @click="openNotificationInfoDialog">
+      <span class="absolute top-3 right-12">
+        <IconBtn>
+          <VIcon class="cursor-move" icon="mdi-drag" />
+        </IconBtn>
+      </span>
+      <DialogCloseBtn @click="onClose" />
+      <VCardText class="flex justify-space-between align-center gap-3">
+        <div class="align-self-start">
+          <div class="flex items-center">
+            <VBadge v-if="props.notification.enabled" dot inline color="success" class="me-1" />
+            <span class="text-h6">{{ props.notification.name }}</span>
+          </div>
+          <div class="text-body-1 mb-3">{{ notificationTypeNames[notification.type] }}</div>
+        </div>
+        <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" />
+      </VCardText>
+    </VCard>
+    <VDialog v-model="notificationInfoDialog" scrollable max-width="40rem" persistent>
+      <VCard :title="`${props.notification.name} - 配置`" class="rounded-t">
+        <DialogCloseBtn v-model="notificationInfoDialog" />
+        <VDivider />
+        <VCardText>
+          <VForm>
+            <VRow>
+              <VCol cols="12" md="6">
+                <VSwitch v-model="notificationInfo.enabled" label="启用通知" />
+              </VCol>
+              <VCol cols="12">
+                <VSelect
+                  v-model="notificationInfo.switchs"
+                  :items="notificationTypes"
+                  label="消息类型"
+                  hint="开启通知的消息类型"
+                  multiple
+                  clearable
+                  chips
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="notificationInfo.type == 'wechat'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.name"
+                  label="名称"
+                  placeholder="别名"
+                  hint="通知渠道的别名"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_CORPID"
+                  label="企业ID"
+                  hint="企业微信后台企业信息中的企业ID"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_APP_ID"
+                  label="应用 AgentId"
+                  hint="企业微信自建应用的AgentId"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_APP_SECRET"
+                  label="应用 Secret"
+                  hint="企业微信自建应用的Secret"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_PROXY"
+                  label="代理地址"
+                  hint="微信消息的转发代理地址，2022年6月20日后创建的自建应用才需要，不使用代理时需要保留默认值"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_TOKEN"
+                  label="Token"
+                  hint="微信企业自建应用->API接收消息配置中的Token"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_ENCODING_AESKEY"
+                  label="EncodingAESKey"
+                  hint="微信企业自建应用->API接收消息配置中的EncodingAESKey"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_ADMINS"
+                  label="管理员白名单"
+                  placeholder="多个用,分隔"
+                  hint="可使用管理菜单及命令的用户ID列表，多个ID使用,分隔"
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="notificationInfo.type == 'telegram'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.name"
+                  label="名称"
+                  placeholder="别名"
+                  hint="通知渠道的别名"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.TELEGRAM_TOKEN"
+                  label="Bot Token"
+                  hint="Telegram机器人token，格式：123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.TELEGRAM_CHAT_ID"
+                  label="Chat ID"
+                  hint="接受消息通知的用户、群组或频道Chat ID"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.TELEGRAM_USERS"
+                  label="用户白名单"
+                  placeholder="多个用,分隔"
+                  hint="可使用Telegram机器人的用户ID清单，多个用户用,分隔，不填写则所有用户都能使用"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.TELEGRAM_ADMINS"
+                  label="管理员白名单"
+                  placeholder="多个用,分隔"
+                  hint="可使用管理菜单及命令的用户ID列表，多个ID使用,分隔"
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="notificationInfo.type == 'slack'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.name"
+                  label="名称"
+                  placeholder="别名"
+                  hint="通知渠道的别名"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.SLACK_OAUTH_TOKEN"
+                  label="Slack Bot User OAuth Token"
+                  placeholder="xoxb-xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxx"
+                  hint="Slack应用`OAuth & Permissions`页面中的`Bot User OAuth Token`"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.SLACK_APP_TOKEN"
+                  label="Slack App-Level Token"
+                  placeholder="xapp-xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxx"
+                  hint="Slack应用`OAuth & Permissions`页面中的`App-Level Token`"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.SLACK_CHANNEL"
+                  label="频道名称"
+                  placeholder="全体"
+                  hint="消息发送频道，默认`全体`"
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="notificationInfo.type == 'synologychat'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.name"
+                  label="名称"
+                  placeholder="别名"
+                  hint="通知渠道的别名"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.SYNOLOGYCHAT_WEBHOOK"
+                  label="机器人传入URL"
+                  hint="Synology Chat机器人传入URL"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.SYNOLOGYCHAT_TOKEN"
+                  label="令牌"
+                  hint="Synology Chat机器人令牌"
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="notificationInfo.type == 'vocechat'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.name"
+                  label="名称"
+                  placeholder="别名"
+                  hint="通知渠道的别名"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.VOCECHAT_HOST"
+                  label="地址"
+                  hint="VoceChat服务端地址，格式：http(s)://ip:port"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.VOCECHAT_API_KEY"
+                  label="机器人密钥"
+                  hint="VoceChat机器人密钥"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.VOCECHAT_CHANNEL_ID"
+                  label="频道ID"
+                  placeholder="不包含#号"
+                  hint="VoceChat的频道ID，不包含#号"
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="notificationInfo.type == 'webpush'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.name"
+                  label="名称"
+                  placeholder="别名"
+                  hint="通知渠道的别名"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WEBPUSH_USERNAME"
+                  label="登录用户名"
+                  hint="只有对应的用户登录后才会推送消息"
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+        <VCardActions class="pt-3">
+          <VBtn @click="saveNotificationInfo" variant="elevated" prepend-icon="mdi-content-save" class="px-5">
+            确定
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+  </div>
+</template>

src/components/cards/PersonCard.vue

@@ -1,14 +1,17 @@
 <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,
 })
 
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
 // 当前人物
 const personInfo = ref(personProps.person)
 
@@ -17,26 +20,58 @@ const isImageLoaded = ref(false)
 
 // 人物图片地址
 function getPersonImage() {
-  if (!personInfo.value?.profile_path)
+  let url = ''
+  if (personProps.person?.source === 'themoviedb') {
+    if (!personInfo.value?.profile_path) return personIcon
+    url = `https://${globalSettings.TMDB_IMAGE_DOMAIN}/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') {
+      url = personInfo.value?.avatar?.normal
+    } else {
+      url = personInfo.value?.avatar
+    }
+  } else if (personProps.person?.source === 'bangumi') {
+    if (!personInfo.value?.images) return personIcon
+    url = personInfo.value?.images?.medium
+  } else {
     return personIcon
-  return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
+  }
+  if (globalSettings.GLOBAL_IMAGE_CACHE && url)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+  return url
+}
+
+// 人物姓名
+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 +84,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 +95,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,23 +79,20 @@ 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)}/1`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}`
 
   return `./plugin_icon/${props.plugin?.plugin_icon}`
 })
@@ -96,141 +103,126 @@ 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"
-  >
+  <VCard :width="props.width" :height="props.height" @click="installPlugin" class="flex flex-col">
+    <div class="me-n3 absolute bottom-0 right-3">
+      <IconBtn>
+        <VIcon icon="mdi-dots-vertical" />
+        <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"
+            >
+              <template #prepend>
+                <VIcon :icon="item.props.prependIcon" />
+              </template>
+              <VListItemTitle v-text="item.title" />
+            </VListItem>
+          </VList>
+        </VMenu>
+      </IconBtn>
+    </div>
     <div
-      class="relative pa-4 text-center card-cover-blurred"
+      class="relative flex flex-row items-start pa-3 justify-between grow"
       :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
-          >
-            <VList>
-              <VListItem
-                v-for="(item, i) in dropdownItems"
-                :key="i"
-                variant="plain"
-                @click="item.props.click"
-              >
-                <template #prepend>
-                  <VIcon :icon="item.props.prependIcon" />
-                </template>
-                <VListItemTitle v-text="item.title" />
-              </VListItem>
-            </VList>
-          </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"
-        />
+        class="absolute inset-0 bg-cover bg-center"
+        :style="{ background: `${backgroundColor}`, filter: 'brightness(0.5)' }"
+      ></div>
+      <div class="relative flex-1 min-w-0">
+        <VCardTitle class="text-white px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis">
+          {{ props.plugin?.plugin_name }}
+          <span class="text-sm text-gray-200">v{{ props.plugin?.plugin_version }}</span>
+        </VCardTitle>
+        <VCardText class="text-white px-2 py-1 text-shadow line-clamp-3">
+          {{ props.plugin?.plugin_desc }}
+        </VCardText>
+      </div>
+      <div class="relative flex-shrink-0 self-center">
+        <VAvatar size="64">
+          <VImg
+            ref="imageRef"
+            :src="iconPath"
+            aspect-ratio="4/3"
+            cover
+            :class="{ shadow: isImageLoaded }"
+            @load="imageLoaded"
+            @error="imageLoadError = true"
+          />
+        </VAvatar>
       </div>
-      <VAvatar
-        size="8rem"
-      >
-        <VImg
-          ref="imageRef"
-          :src="iconPath"
-          aspect-ratio="4/3"
-          cover
-          :class="{ shadow: isImageLoaded }"
-          @load="imageLoaded"
-          @error="imageLoadError = true"
-        />
-      </VAvatar>
     </div>
-    <VCardTitle>{{ props.plugin?.plugin_name }}</VCardTitle>
-
-    <VCardText>
-      {{ props.plugin?.plugin_desc }}
-    </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 flex-none align-self-baseline py-3 w-full align-end">
+      <span>
+        <VIcon icon="mdi-github" 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>
-
-<style lang="scss" scoped>
-.card-cover-blurred::before {
-  position: absolute;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-backdrop-filter: blur(2px);
-  backdrop-filter: blur(2px);
-  background: rgba(29, 39, 59, 48%);
-  content: "";
-  inset: 0;
-}
-</style>

src/components/cards/PluginCard.vue

@@ -1,23 +1,32 @@
 <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 { 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 +49,23 @@ const pluginConfigDialog = ref(false)
 // 插件配置表单数据
 const pluginConfigForm = ref({})
 
+// 进度框
+const progressDialog = ref(false)
+
 // 插件表单配置项
 let pluginFormItems = reactive([])
 
 // 插件数据页面
 const pluginInfoDialog = ref(false)
 
+// 进度框文本
+const progressText = ref('正在更新插件...')
+
+// 用户头像是否加载完成
+const isAvatarLoaded = ref(false)
+
 // 插件数据页面配置项
-let pluginPageItems = reactive([])
+let pluginPageItems = ref([])
 
 // 图片是否加载完成
 const isImageLoaded = ref(false)
@@ -55,6 +73,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 +95,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 +140,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 +151,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 +161,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,32 +210,30 @@ 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)}/1`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}`
 
   return `./plugin_icon/${props.plugin?.plugin_icon}`
 })
 
+// 插件作者头像路径
+const authorPath: Ref<string> = computed(() => {
+  // 网络图片则使用代理后返回
+  return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(
+    props.plugin?.author_url + '.png',
+  )}`
+})
+
 // 重置插件
 async function resetPlugin() {
   const isConfirmed = await createConfirm({
     title: '确认',
-    content: `是否确认重置插件 ${props.plugin?.plugin_name} 的配置数据?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
+    content: `此操作将恢复插件 ${props.plugin?.plugin_name} 的默认设置，并清除所有相关数据，确定要继续吗？`,
   })
 
-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return
 
   try {
     const result: { [key: string]: any } = await api.get(`plugin/reset/${props.plugin?.id}`)
@@ -210,12 +241,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 +285,20 @@ function visitAuthorPage() {
   window.open(props.plugin?.author_url, '_blank')
 }
 
+// 查看日志URL
+function openLoggerWindow() {
+  const url = `${
+    import.meta.env.VITE_API_BASE_URL
+  }system/logging?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 +320,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 +341,7 @@ const dropdownItems = ref([
   },
   {
     title: '卸载',
-    value: 4,
+    value: 5,
     show: true,
     props: {
       prependIcon: 'mdi-trash-can-outline',
@@ -265,9 +349,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,140 +370,148 @@ const dropdownItems = ref([
     },
   },
 ])
+
+// 监听插件状态变化
+watch(
+  () => props.plugin?.has_update,
+  (newHasUpdate, _) => {
+    const updateItemIndex = dropdownItems.value.findIndex(item => item.value === 3)
+    if (updateItemIndex !== -1) dropdownItems.value[updateItemIndex].show = newHasUpdate
+  },
+)
+
+// 监听插件窗口状态变化
+watch(
+  () => props.plugin?.page_open,
+  (newOpenState, _) => {
+    if (newOpenState) openPluginDetail()
+  },
+)
 </script>
 
 <template>
   <!-- 插件卡片 -->
-  <VCard
-    v-if="isVisible"
-    :width="props.width"
-    :height="props.height"
-    @click="() => {
-      if (props.plugin?.has_page)
-        showPluginInfo()
-      else
-        showPluginConfig()
-    }"
-  >
+  <VCard v-if="isVisible" :width="props.width" :height="props.height" @click="openPluginDetail" class="flex flex-col">
+    <div class="me-n3 absolute bottom-0 right-3">
+      <IconBtn>
+        <VIcon icon="mdi-dots-vertical" />
+        <VMenu activator="parent" close-on-content-click>
+          <VList>
+            <VListItem
+              v-for="(item, i) in dropdownItems"
+              v-show="item.show"
+              :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>
     <div
-      class="relative pa-4 text-center card-cover-blurred"
+      class="relative flex flex-row items-start pa-3 justify-between grow"
       :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
-          >
-            <VList>
-              <VListItem
-                v-for="(item, i) in dropdownItems"
-                v-show="item.show"
-                :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
+        class="absolute inset-0 bg-cover bg-center"
+        :style="{ background: `${backgroundColor}`, filter: 'brightness(0.5)' }"
+      />
+      <div class="relative flex-1 min-w-0">
+        <VCardTitle class="text-white px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis">
+          <VBadge v-if="props.plugin?.state" dot inline color="success" />
+          {{ props.plugin?.plugin_name }}
+          <span class="text-sm mt-1 text-gray-200">v{{ props.plugin?.plugin_version }}</span>
+        </VCardTitle>
+        <VCardText class="px-2 py-1 text-white text-shadow line-clamp-3">
+          {{ props.plugin?.plugin_desc }}
+        </VCardText>
+      </div>
+      <div class="relative flex-shrink-0 self-center">
+        <VAvatar size="64">
+          <VImg
+            ref="imageRef"
+            :src="iconPath"
+            aspect-ratio="4/3"
+            cover
+            :class="{ shadow: isImageLoaded }"
+            @load="imageLoaded"
+            @error="imageLoadError = true"
+          />
+        </VAvatar>
       </div>
-      <VAvatar
-        size="8rem"
-      >
-        <VImg
-          ref="imageRef"
-          :src="iconPath"
-          aspect-ratio="4/3"
-          cover
-          :class="{ shadow: isImageLoaded }"
-          @load="imageLoaded"
-          @error="imageLoadError = true"
-        />
-      </VAvatar>
     </div>
-    <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>
-      </VCardTitle>
-    </VCardItem>
-    <VCardText>
-      {{ props.plugin?.plugin_desc }}
+    <VCardText class="flex flex-none align-self-baseline py-3 w-full align-end">
+      <span class="author-info">
+        <VImg :src="authorPath" class="author-avatar" @load="isAvatarLoaded = true">
+          <VIcon v-if="!isAvatarLoaded" icon="mdi-github" class="me-1" />
+        </VImg>
+        <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>
+    <div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 right-5">
+      <VIcon icon="mdi-new-box" class="text-white" />
+    </div>
   </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" 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 +523,20 @@ const dropdownItems = ref([
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
   background: rgba(29, 39, 59, 48%);
-  content: "";
+  content: '';
   inset: 0;
 }
+
+.author-info {
+  display: flex;
+  align-items: center;
+}
+
+.author-avatar {
+  border-radius: 50%;
+  block-size: 24px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+  object-fit: cover;
+}
 </style>

src/components/cards/PosterCard.vue

@@ -18,26 +18,21 @@ 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'
+  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
+  if (imageLoadError.value) return noImage
   const image = props.media?.image || ''
-  return `${import.meta.env.VITE_API_BASE_URL}system/img/${encodeURIComponent(image)}/0`
+  return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(image)}`
 })
 
 // 跳转播放
-function goPlay() {
-  if (props.media?.link)
-    window.open(props.media?.link, '_blank')
+function goPlay(isHovering = false) {
+  if (props.media?.link && isHovering) window.open(props.media?.link, '_blank')
 }
 </script>
 
@@ -53,7 +48,7 @@ function goPlay() {
           'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
           'ring-1': isImageLoaded,
         }"
-        @click.stop="goPlay"
+        @click.stop="goPlay(hover.isHovering)"
       >
         <VImg
           aspect-ratio="2/3"
@@ -69,27 +64,27 @@ function goPlay() {
               <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>
-          <!-- 详情 -->
-          <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>
         </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>

src/components/cards/SiteCard.vue

@@ -1,26 +1,25 @@
 <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 { requiredValidator } from '@/@validators'
+import SiteAddEditDialog from '../dialog/SiteAddEditDialog.vue'
+import SiteUserDataDialog from '../dialog/SiteUserDataDialog.vue'
+import SiteResourceDialog from '../dialog/SiteResourceDialog.vue'
+import SiteCookieUpdateDialog from '../dialog/SiteCookieUpdateDialog.vue'
 import api from '@/api'
-import type { Site, TorrentInfo } from '@/api/types'
-import ExistIcon from '@core/components/ExistIcon.vue'
+import type { Site, SiteStatistic, SiteUserData } from '@/api/types'
+import { isNullOrEmptyObject } from '@/@core/utils'
+import { VCardActions, VExpandTransition, VProgressLinear, VSpacer } from 'vuetify/lib/components/index.mjs'
+import { formatFileSize } from '@/@core/utils/formatters'
 
 // 输入参数
 const cardProps = defineProps({
   site: Object as PropType<Site>,
-  width: String,
-  height: String,
+  data: Object as PropType<SiteUserData>,
 })
 
 // 定义触发的自定义事件
 const emit = defineEmits(['update', 'remove'])
 
-// 密码输入
-const isPasswordVisible = ref(false)
-
 // 图标
 const siteIcon = ref<string>('')
 
@@ -33,9 +32,6 @@ const testButtonText = ref('测试')
 // 测试按钮可用性
 const testButtonDisable = ref(false)
 
-// 更新按钮可用性
-const updateButtonDisable = ref(false)
-
 // 更新站点Cookie UA弹窗
 const siteCookieDialog = ref(false)
 
@@ -45,59 +41,20 @@ const siteEditDialog = ref(false)
 // 资源浏览弹窗
 const resourceDialog = ref(false)
 
-// 进度条
-const progressDialog = ref(false)
+// 用户数据弹窗
+const siteUserDataDialog = ref(false)
 
-// 进度文本
-const progressText = ref('请稍候 ...')
+// 站点操作显示
+const siteActionShow = 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 },
-]
-
-// 数据列表
-const resourceDataList = ref<TorrentInfo[]>([])
-
-// 搜索
-const resourceSearch = ref('')
-
-// 加载状态
-const resourceLoading = ref(false)
-
-// 总条数
-const resourceTotalItems = ref(0)
-
-// 每页条数
-const resourceItemsPerPage = ref(25)
-
-// 用户名密码表单
-const userPwForm = ref({
-  username: '',
-  password: '',
-})
-
-// 打开种子详情页面
-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 +66,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,67 +95,11 @@ 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
-
-    // 更新按钮状态
-    siteCookieDialog.value = false
-    updateButtonDisable.value = true
-
-    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,
-        },
-      },
-    )
-
-    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) {
-    console.error(error)
-  }
+// 打开站点用户数据弹窗
+async function handleSiteUserData() {
+  siteUserDataDialog.value = true
 }
 
 // 打开站点页面
@@ -198,340 +107,170 @@ 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'
+  }
+})
+
+// 计算上传量和下载量的百分比
+const getPercentage = computed(() => {
+  if (cardProps.data?.upload === 0) return 100
+  return ((cardProps.data?.download ?? 0) / ((cardProps.data?.download ?? 0) + (cardProps.data?.upload ?? 0))) * 100
+})
+
+// 保存站点
+function saveSite() {
+  siteEditDialog.value = false
+  emit('update')
+}
+
+// 更新站点Cookie UA后的回调
+function onSiteCookieUpdated() {
+  siteCookieDialog.value = false
+  getSiteStats()
+}
+
+// 资源浏览弹窗关闭后的回调
+function onSiteResourceDone() {
+  resourceDialog.value = false
+  getSiteStats()
+}
+
 // 装载时查询站点图标
 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>
-      </VCardText>
-
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="updateSiteCookie"
-        >
-          开始更新
-        </VBtn>
-      </VCardActions>
-    </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"
-                />
-                <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"
-  >
+  <div>
     <VCard
-      color="primary"
+      :variant="cardProps.site?.is_active ? 'elevated' : 'outlined'"
+      class="overflow-hidden"
+      @click="siteEditDialog = true"
     >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
+      <template #image>
+        <VAvatar class="absolute right-2 bottom-2 rounded" variant="flat" rounded="0">
+          <VImg :src="siteIcon" />
+        </VAvatar>
+      </template>
+      <VCardItem style="padding-block-end: 0">
+        <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-1">
+        <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?.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?.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?.filter" text="过滤">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-filter-cog-outline" />
+          </template>
+        </VTooltip>
       </VCardText>
+      <VCardActions>
+        <VBtn
+          :icon="siteActionShow ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+          @click.stop="siteActionShow = !siteActionShow"
+        />
+        <span class="text-sm">
+          ↑ {{ formatFileSize(cardProps.data?.upload || 0) }} / ↓ {{ formatFileSize(cardProps.data?.download || 0) }}
+        </span>
+        <VSpacer />
+      </VCardActions>
+      <VDivider class="mb-1" v-if="siteActionShow" />
+      <VExpandTransition>
+        <div v-show="siteActionShow" class="py-1 pe-12">
+          <VBtn v-if="!cardProps.site?.public" @click.stop="handleSiteUpdate" variant="text">
+            <template #prepend>
+              <VIcon icon="mdi-refresh" />
+            </template>
+            更新
+          </VBtn>
+          <VBtn :disabled="testButtonDisable" @click.stop="testSite" variant="text">
+            <template #prepend>
+              <VIcon icon="mdi-link" />
+            </template>
+            {{ testButtonText }}
+          </VBtn>
+          <VBtn @click.stop="handleResourceBrowse" variant="text">
+            <template #prepend>
+              <VIcon icon="mdi-web" />
+            </template>
+            浏览
+          </VBtn>
+          <VBtn @click.stop="handleSiteUserData" variant="text">
+            <template #prepend>
+              <VIcon icon="mdi-chart-bell-curve" />
+            </template>
+            数据
+          </VBtn>
+        </div>
+      </VExpandTransition>
+      <StatIcon v-if="cardProps.site?.is_active" :color="statColor" />
+      <span class="absolute top-1 right-8">
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </span>
+      <div class="w-full absolute bottom-0" v-if="(cardProps.data?.upload || cardProps.data?.download || 0) > 0">
+        <VProgressLinear :model-value="getPercentage" bg-color="success" color="warning" bg-opacity="0.5" height="3" />
+      </div>
     </VCard>
-  </VDialog>
+    <!-- 更新站点Cookie & UA弹窗 -->
+    <SiteCookieUpdateDialog
+      v-if="siteCookieDialog"
+      v-model="siteCookieDialog"
+      :site="cardProps.site"
+      @close="siteCookieDialog = false"
+      @done="onSiteCookieUpdated"
+    />
+    <!-- 站点编辑弹窗 -->
+    <SiteAddEditDialog
+      v-if="siteEditDialog"
+      v-model="siteEditDialog"
+      :siteid="cardProps.site?.id"
+      @save="saveSite"
+      @remove="emit('remove')"
+      @close="siteEditDialog = false"
+    />
+    <!-- 站点数据弹窗 -->
+    <SiteUserDataDialog
+      v-if="siteUserDataDialog"
+      v-model="siteUserDataDialog"
+      :site="cardProps.site"
+      @close="siteUserDataDialog = false"
+    />
+    <!-- 站点资源弹窗 -->
+    <SiteResourceDialog
+      v-if="resourceDialog"
+      v-model="resourceDialog"
+      :site="cardProps.site"
+      @close="onSiteResourceDone"
+    />
+  </div>
 </template>
-
-<style lang="scss">
-.v-table th {
-  white-space: nowrap;
-}
-</style>

src/components/cards/StorageCard.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { StorageConf } from '@/api/types'
+import { formatBytes } from '@core/utils/formatters'
+import storage_png from '@images/misc/storage.png'
+import alipan_png from '@images/misc/alipan.webp'
+import u115_png from '@images/misc/u115.png'
+import rclone_png from '@images/misc/rclone.png'
+import api from '@/api'
+import AliyunAuthDialog from '../dialog/AliyunAuthDialog.vue'
+import U115AuthDialog from '../dialog/U115AuthDialog.vue'
+import RcloneConfigDialog from '../dialog/RcloneConfigDialog.vue'
+import { useToast } from 'vue-toast-notification'
+
+// 定义输入
+const props = defineProps({
+  storage: {
+    type: Object as PropType<StorageConf>,
+    required: true,
+  },
+})
+
+// 定义事件
+const emit = defineEmits(['done'])
+
+// 提示信息
+const $toast = useToast()
+
+// 存储总空间
+const total = ref(0)
+
+// 存储可用空间
+const available = ref(0)
+
+// 储存已用空间
+const used = computed(() => {
+  return total.value - available.value
+})
+
+// 阿里云盘认证对话框
+const aliyunAuthDialog = ref(false)
+// 115网盘认证对话框
+const u115AuthDialog = ref(false)
+// Rclone配置对话框
+const rcloneConfigDialog = ref(false)
+
+// 打开存储对话框
+function openStorageDialog() {
+  switch (props.storage.type) {
+    case 'alipan':
+      aliyunAuthDialog.value = true
+      break
+    case 'u115':
+      u115AuthDialog.value = true
+      break
+    case 'rclone':
+      rcloneConfigDialog.value = true
+      break
+    default:
+      $toast.info('此存储类型无需配置参数，请直接配置目录！')
+      break
+  }
+}
+
+// 根据存储类型选择图标
+const getIcon = computed(() => {
+  switch (props.storage.type) {
+    case 'local':
+      return storage_png
+    case 'alipan':
+      return alipan_png
+    case 'u115':
+      return u115_png
+    case 'rclone':
+      return rclone_png
+    default:
+      return storage_png
+  }
+})
+
+// 计算进度条颜色
+const progressColor = computed(() => {
+  if (usage.value > 90) {
+    return 'error'
+  } else if (usage.value > 70) {
+    return 'warning'
+  } else {
+    return 'success'
+  }
+})
+
+// 计算存储使用率
+const usage = computed(() => {
+  return Math.round((used.value / (total.value || 1)) * 1000) / 10
+})
+
+// 查询存储信息
+async function queryStorage() {
+  try {
+    const data: { total: number; available: number } = await api.get(`storage/usage/${props.storage.type}`)
+    total.value = data.total
+    available.value = data.available
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 完成配置后的处理
+function handleDone() {
+  aliyunAuthDialog.value = false
+  u115AuthDialog.value = false
+  rcloneConfigDialog.value = false
+  emit('done')
+}
+
+onMounted(() => {
+  queryStorage()
+})
+</script>
+<template>
+  <VCard variant="tonal" @click="openStorageDialog">
+    <VCardText class="flex justify-space-between align-center gap-3">
+      <div class="align-self-start flex-1">
+        <h5 class="text-h6 mb-1">{{ storage.name }}</h5>
+        <div class="mb-3 text-sm" v-if="total">{{ formatBytes(used, 1) }} / {{ formatBytes(total, 1) }}</div>
+        <div v-else>未配置</div>
+      </div>
+      <VImg :src="getIcon" cover class="mt-5" max-width="3rem" min-width="3rem" />
+    </VCardText>
+    <div class="w-full absolute bottom-0">
+      <VProgressLinear v-if="usage > 0" :model-value="usage" :bg-color="progressColor" :color="progressColor" />
+    </div>
+  </VCard>
+  <AliyunAuthDialog
+    v-if="aliyunAuthDialog"
+    v-model="aliyunAuthDialog"
+    @close="aliyunAuthDialog = false"
+    @done="handleDone"
+  />
+  <U115AuthDialog v-if="u115AuthDialog" v-model="u115AuthDialog" @close="u115AuthDialog = false" @done="handleDone" />
+  <RcloneConfigDialog
+    v-if="rcloneConfigDialog"
+    v-model="rcloneConfigDialog"
+    :conf="props.storage.config || {}"
+    @close="rcloneConfigDialog = false"
+    @done="handleDone"
+  />
+</template>

src/components/cards/SubscribeCard.vue

@@ -1,19 +1,28 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
-import SubscribeEditForm from '../form/SubscribeEditForm.vue'
-import { calculateTimeDifference } from '@/@core/utils'
-import { formatSeason } from '@/@core/utils/formatters'
+import { useConfirm } from 'vuetify-use-dialog'
+import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
+import SubscribeFilesDialog from '../dialog/SubscribeFilesDialog.vue'
+import SubscribeShareDialog from '../dialog/SubscribeShareDialog.vue'
+import { formatDateDifference, formatSeason } from '@/@core/utils/formatters'
 import api from '@/api'
 import type { Subscribe } from '@/api/types'
+import router from '@/router'
 
 // 输入参数
 const props = defineProps({
   media: Object as PropType<Subscribe>,
 })
 
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
 // 定义触发的自定义事件
 const emit = defineEmits(['remove', 'save'])
 
+// 确认框
+const createConfirm = useConfirm()
+
 // 提示框
 const $toast = useToast()
 
@@ -23,65 +32,39 @@ const imageLoaded = ref(false)
 // 订阅弹窗
 const subscribeEditDialog = ref(false)
 
+// 订阅文件信息弹窗
+const subscribeFilesDialog = ref(false)
+
+// 分享订阅弹窗
+const subscribeShareDialog = 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() {
   imageLoaded.value = true
 }
 
-// 根据 type 返回不同的图标
-function getIcon() {
-  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,
   )
 }
 
-// 计算文本颜色
-function getTextColor() {
-  return imageLoaded.value ? 'white' : ''
-}
-
-// 计算文本类
-function getTextClass() {
-  return imageLoaded.value ? 'text-white' : ''
-}
-
 // 删除订阅
 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,24 +72,62 @@ 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)
   }
 }
 
+// 重置订阅
+async function resetSubscribe() {
+  // 确认
+  try {
+    const isConfirmed = await createConfirm({
+      title: '确认',
+      content: `重置后 ${props.media?.name} 已下载记录将被清除，未入库的剧集将会重新下载，是否确认？`,
+    })
+    if (!isConfirmed) return
+    // 重置
+    const result: { [key: string]: any } = await api.get(`subscribe/reset/${props.media?.id}`)
+    // 提示
+    if (result.success) {
+      $toast.success(`${props.media?.name} 重置成功！`)
+      emit('save')
+    } else $toast.error(`${props.media?.name} 重置失败：${result.message}`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+//  分享订阅
+async function shareSubscribe() {
+  subscribeShareDialog.value = true
+}
+
 // 编辑订阅响应
 async function editSubscribeDialog() {
   subscribeEditDialog.value = true
 }
 
+// 查看媒体详情
+async function viewMediaDetail() {
+  router.push({
+    path: '/media',
+    query: {
+      mediaid: `${props.media?.tmdbid ? `tmdb:${props.media?.tmdbid}` : `douban:${props.media?.doubanid}`}`,
+      type: props.media?.type,
+    },
+  })
+}
+
+// 查看文件详情
+async function viewSubscribeFiles() {
+  subscribeFilesDialog.value = true
+}
+
 // 弹出菜单
 const dropdownItems = ref([
   {
@@ -126,8 +147,44 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '取消订阅',
+    title: '详情',
     value: 3,
+    props: {
+      prependIcon: 'mdi-information-outline',
+      click: viewMediaDetail,
+    },
+  },
+  {
+    title: '文件',
+    value: 4,
+    props: {
+      prependIcon: 'mdi-file-document-outline',
+      click: viewSubscribeFiles,
+    },
+  },
+  {
+    title: '重置',
+    value: 5,
+    props: {
+      prependIcon: 'mdi-restore-alert',
+      click: resetSubscribe,
+      color: 'warning',
+    },
+    show: props.media?.type === '电视剧',
+  },
+  {
+    title: '分享',
+    value: 6,
+    props: {
+      prependIcon: 'mdi-share',
+      click: shareSubscribe,
+      color: 'success',
+    },
+    show: props.media?.type === '电视剧',
+  },
+  {
+    title: '取消订阅',
+    value: 7,
     props: {
       prependIcon: 'mdi-trash-can-outline',
       color: 'error',
@@ -135,138 +192,173 @@ const dropdownItems = ref([
     },
   },
 ])
+
+// 监听插件窗口状态变化
+watch(
+  () => props.media?.page_open,
+  (newOpenState, _) => {
+    if (newOpenState) editSubscribeDialog()
+  },
+)
+
+// 计算backdrop图片地址
+const backdropUrl = computed(() => {
+  const url = props.media?.backdrop || props.media?.poster
+  // 使用图片缓存
+  if (globalSettings.GLOBAL_IMAGE_CACHE && url)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+  return url
+})
+
+// 计算海报图片地址
+const posterUrl = computed(() => {
+  const url = props.media?.poster
+  // 使用图片缓存
+  if (globalSettings.GLOBAL_IMAGE_CACHE && url)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+  return url
+})
+
+// 订阅编辑保存
+function onSubscribeEditSave() {
+  subscribeEditDialog.value = false
+  emit('save')
+}
+
+// 订阅编辑取消
+function onSubscribeEditRemove() {
+  subscribeEditDialog.value = false
+  emit('remove')
+}
 </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">
+  <VHover>
+    <template #default="hover">
+      <VCard
+        v-bind="hover.props"
+        :key="props.media?.id"
+        class="flex flex-col rounded-lg"
+        :class="{
+          'outline-dashed outline-1': props.media?.best_version && imageLoaded,
+          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+        }"
+        min-height="170"
+        @click="editSubscribeDialog"
+      >
+        <div class="me-n3 absolute top-1 right-2">
           <IconBtn>
-            <VIcon
-              icon="mdi-dots-vertical"
-              :color="getTextColor()"
-            />
-            <VMenu
-              activator="parent"
-              close-on-content-click
-            >
+            <VIcon icon="mdi-dots-vertical" color="white" />
+            <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>
+                <template v-for="(item, i) in dropdownItems" :key="i">
+                  <VListItem
+                    v-if="item.show !== false"
+                    variant="plain"
+                    :base-color="item.props.color"
+                    @click="item.props.click"
+                  >
+                    <template #prepend>
+                      <VIcon :icon="item.props.prependIcon" />
+                    </template>
+                    <VListItemTitle v-text="item.title" />
+                  </VListItem>
+                </template>
               </VList>
             </VMenu>
           </IconBtn>
         </div>
-      </template>
-    </VCardItem>
-
-    <VCardText>
-      <p
-        class="clamp-text mb-0"
-        :class="getTextClass()"
-      >
-        {{ props.media?.description }}
-      </p>
-    </VCardText>
-
-    <VCardText class="d-flex justify-space-between align-center flex-wrap">
-      <div class="d-flex align-center">
-        <IconBtn
-          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="backdropUrl || posterUrl" aspect-ratio="3/2" cover @load="imageLoadHandler" position="top">
+            <template #placeholder>
+              <div class="w-full h-full">
+                <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
+              </div>
+            </template>
+            <div class="absolute inset-0 subscribe-card-background"></div>
+          </VImg>
+        </template>
+        <div>
+          <VCardText class="flex items-center">
+            <div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md shadow-lg" v-if="imageLoaded">
+              <VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
+                <template #placeholder>
+                  <div class="w-full h-full">
+                    <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                  </div>
+                </template>
+              </VImg>
+            </div>
+            <div class="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
+              <div class="text-sm font-medium text-white sm:pt-1">{{ props.media?.year }}</div>
+              <div class="mr-2 min-w-0 text-lg font-bold text-white">
+                {{ props.media?.name }}
+                {{ formatSeason(props.media?.season ? props.media?.season.toString() : '') }}
+              </div>
+            </div>
+          </VCardText>
+          <VCardText class="flex justify-space-between align-center flex-wrap">
+            <div class="flex align-center">
+              <IconBtn
+                v-if="props.media?.total_episode"
+                v-bind="props"
+                icon="mdi-progress-download"
+                color="white"
+                class="me-1"
+              />
+              <div v-if="props.media?.season" class="text-subtitle-2 me-4 text-white">
+                {{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
+                {{ props.media?.total_episode }}
+              </div>
+              <IconBtn v-if="props.media?.username" icon="mdi-account" color="white" class="me-1" />
+              <span v-if="props.media?.username" class="text-subtitle-2 me-4 text-white">
+                {{ 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>
+          <div class="w-full absolute bottom-0">
+            <VProgressLinear
+              v-if="getPercentage() > 0"
+              :model-value="getPercentage()"
+              bg-color="success"
+              color="success"
+            />
+          </div>
+        </div>
+      </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="onSubscribeEditRemove"
+    @save="onSubscribeEditSave"
     @close="subscribeEditDialog = false"
   />
+
+  <!-- 订阅文件信息弹窗 -->
+  <SubscribeFilesDialog
+    v-if="subscribeFilesDialog"
+    v-model="subscribeFilesDialog"
+    :subid="props.media?.id"
+    @close="subscribeFilesDialog = false"
+  />
+  <!-- 分享订阅弹窗 -->
+  <SubscribeShareDialog
+    v-if="subscribeShareDialog"
+    v-model="subscribeShareDialog"
+    :sub="props.media"
+    @close="subscribeShareDialog = false"
+  />
 </template>
+<style lang="scss">
+.subscribe-card-background {
+  background-image: linear-gradient(90deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
+}
+</style>

src/components/cards/SubscribeShareCard.vue

@@ -0,0 +1,180 @@
+<script lang="ts" setup>
+import { formatDateDifference } from '@/@core/utils/formatters'
+import api from '@/api'
+import { doneNProgress, startNProgress } from '@/api/nprogress'
+import type { SubscribeShare } from '@/api/types'
+import router from '@/router'
+import { useToast } from 'vue-toast-notification'
+import { useConfirm } from 'vuetify-use-dialog'
+import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
+
+// 输入参数
+const props = defineProps({
+  media: Object as PropType<SubscribeShare>,
+})
+
+// 提示框
+const $toast = useToast()
+
+// 确认框
+const createConfirm = useConfirm()
+
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
+// 图片是否加载完成
+const imageLoaded = ref(false)
+
+// 订阅编辑弹窗
+const subscribeEditDialog = ref(false)
+
+// 订阅ID
+const subscribeId = ref<number>()
+
+// 图片加载完成响应
+function imageLoadHandler() {
+  imageLoaded.value = true
+}
+
+// 分享时间
+const dateText = ref(props.media && props.media?.date ? formatDateDifference(props.media.date) : '')
+
+// 计算backdrop图片地址
+const backdropUrl = computed(() => {
+  const url = props.media?.backdrop || props.media?.poster
+  // 使用图片缓存
+  if (globalSettings.GLOBAL_IMAGE_CACHE && url)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+  return url
+})
+
+// 计算海报图片地址
+const posterUrl = computed(() => {
+  const url = props.media?.poster
+  // 使用图片缓存
+  if (globalSettings.GLOBAL_IMAGE_CACHE && url)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+  return url
+})
+
+// 查看媒体详情
+async function viewMediaDetail() {
+  router.push({
+    path: '/media',
+    query: {
+      mediaid: `${props.media?.tmdbid ? `tmdb:${props.media?.tmdbid}` : `douban:${props.media?.doubanid}`}`,
+      type: props.media?.type,
+    },
+  })
+}
+
+// 复用订阅
+async function forkSubscribe() {
+  // 开始处理
+  startNProgress()
+  try {
+    // 确认
+    const isConfirmed = await createConfirm({
+      title: '确认',
+      content: `是否确认添加来自 ${props.media?.share_user} 分享的订阅：${props.media?.share_title}？`,
+    })
+    if (!isConfirmed) return
+
+    // 请求API
+    const result: { [key: string]: any } = await api.post('subscribe/fork', props.media)
+
+    // 订阅状态
+    if (result.success) {
+      $toast.success(`${props.media?.share_title} 添加订阅成功！`)
+      // 弹出订阅编辑弹窗
+      subscribeId.value = result.data.id
+      subscribeEditDialog.value = true
+    } else {
+      $toast.error(`${props.media?.share_title} 添加订阅失败：${result.message}！`)
+    }
+  } catch (error) {
+    console.error(error)
+  } finally {
+    doneNProgress()
+  }
+}
+</script>
+
+<template>
+  <VHover>
+    <template #default="hover">
+      <VCard
+        v-bind="hover.props"
+        :key="props.media?.id"
+        class="flex flex-col rounded-lg"
+        :class="{
+          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+        }"
+        min-height="170"
+        @click="forkSubscribe"
+      >
+        <template #image>
+          <VImg :src="backdropUrl || posterUrl" aspect-ratio="3/2" cover @load="imageLoadHandler" position="top">
+            <template #placeholder>
+              <div class="w-full h-full">
+                <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
+              </div>
+            </template>
+            <div class="absolute inset-0 subscribe-card-background"></div>
+          </VImg>
+        </template>
+        <div>
+          <VCardText class="flex items-center pb-1">
+            <div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md shadow-lg" v-if="imageLoaded">
+              <VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
+                <template #placeholder>
+                  <div class="w-full h-full">
+                    <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                  </div>
+                </template>
+              </VImg>
+            </div>
+            <div class="flex flex-col justify-center pl-2 xl:pl-4">
+              <div class="mr-2 min-w-0 text-lg font-bold text-white line-clamp-2 overflow-hidden text-ellipsis ...">
+                {{ props.media?.share_title }}
+              </div>
+              <div class="text-sm font-medium text-gray-200 sm:pt-1 line-clamp-3 overflow-hidden text-ellipsis ...">
+                {{ props.media?.share_comment }}
+              </div>
+            </div>
+          </VCardText>
+          <VCardText class="flex justify-space-between align-center flex-wrap">
+            <div class="flex align-center">
+              <IconBtn v-bind="props" icon="mdi-account" color="white" class="me-1" />
+              <div class="text-subtitle-2 me-4 text-white">
+                {{ props.media?.share_user }}
+              </div>
+              <IconBtn v-if="props.media?.count" icon="mdi-fire" color="error" class="me-1" />
+              <span v-if="props.media?.count" class="text-subtitle-2 me-4 text-white">
+                {{ props.media?.count.toLocaleString() }}
+              </span>
+            </div>
+          </VCardText>
+          <VCardText class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
+            <VIcon icon="mdi-calcdar" class="me-1" />
+            {{ dateText }}
+          </VCardText>
+        </div>
+      </VCard>
+    </template>
+  </VHover>
+  <!-- 订阅编辑弹窗 -->
+  <SubscribeEditDialog
+    v-if="subscribeEditDialog"
+    v-model="subscribeEditDialog"
+    :subid="subscribeId"
+    @close="subscribeEditDialog = false"
+    @save="subscribeEditDialog = false"
+    @remove="subscribeEditDialog = false"
+  />
+</template>
+<style lang="scss">
+.subscribe-card-background {
+  background-image: linear-gradient(90deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
+}
+</style>

src/components/cards/TorrentCard.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { useToast } from 'vue-toast-notification'
-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 AddDownloadDialog from '../dialog/AddDownloadDialog.vue'
+import { isNullOrEmptyObject } from '@/@core/utils'
 
 // 输入参数
 const props = defineProps({
@@ -15,12 +14,6 @@ const props = defineProps({
   height: String,
 })
 
-// 提示框
-const $toast = useToast()
-
-// 确认框
-const createConfirm = useConfirm()
-
 // 更多来源界面
 const showMoreTorrents = ref(false)
 
@@ -33,70 +26,46 @@ const media = ref(props.torrent?.media_info)
 // 识别元数据
 const meta = ref(props.torrent?.meta_info)
 
+// 当前下载项
+const downloadItem = ref(props.torrent)
+
 // 站点图标
 const siteIcon = ref('')
 
+// 存储是否已经下载过的记录
+const downloaded = ref<string[]>([])
+
+// 添加下载对话框
+const addDownloadDialog = ref(false)
+
+// 添加下载成功
+function addDownloadSuccess(url: string) {
+  addDownloadDialog.value = false
+  // 添加下载成功
+  downloaded.value.push(url)
+}
+
+// 添加下载失败
+function addDownloadError(error: string) {
+  addDownloadDialog.value = false
+}
+
 // 查询站点图标
 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) {
-  if (!_media || !_torrent || !_site) {
-    _site = torrent.value?.site_name
-    _media = media.value
-    _torrent = torrent.value
+async function handleAddDownload(item: Context | null = null) {
+  if (item && !isNullOrEmptyObject(item)) {
+    downloadItem.value = item
   }
-
-  const isConfirmed = await createConfirm({
-    title: '确认',
-    content: `是否确认下载【${_site}】${_torrent?.title} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
-  })
-
-  if (!isConfirmed)
-    return
-
-  addDownload(_media, _torrent)
-}
-
-// 添加下载
-async function addDownload(_media: any, _torrent: any) {
-  startNProgress()
-  try {
-    const result: { [key: string]: any } = await api.post('download/', {
-      media_in: _media,
-      torrent_in: _torrent,
-    })
-
-    if (result.success) {
-      // 添加下载成功
-      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
-    }
-    else {
-      // 添加下载失败
-      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败！`)
-    }
-  }
-  catch (error) {
-    console.error(error)
-  }
-  doneNProgress()
+  // 打开下载对话框
+  addDownloadDialog.value = true
 }
 
 // 打开种子详情页面
@@ -111,14 +80,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'
 }
 
 // 装载时查询站点图标
@@ -128,199 +93,137 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard
-    :width="props.width"
-    :height="props.height"
-    @click="handleAddDownload"
-  >
-    <template
-      v-if="!showMoreTorrents"
-      #image
+  <div>
+    <VCard
+      :width="props.width"
+      :height="props.height"
+      :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'elevated'"
+      @click="handleAddDownload(props.torrent)"
     >
-      <VAvatar
-        class="absolute right-2 bottom-2 rounded"
-        variant="flat"
-        rounded="0"
-      >
-        <VImg :src="siteIcon" />
-      </VAvatar>
-    </template>
-    <VCardItem class="py-1">
-      <VCardTitle class="break-words overflow-visible whitespace-break-spaces">
-        {{ media?.title }} {{ meta?.season_episode }}
-        <span class="text-green-700 ms-2 text-sm">↑{{ torrent?.seeders }}</span>
-        <span class="text-orange-700 ms-2 text-sm">↓{{ torrent?.peers }}</span>
-      </VCardTitle>
-      <template #append>
-        <div class="me-n3">
-          <IconBtn>
-            <VIcon
-              icon="mdi-dots-vertical"
-            />
-            <VMenu
-              activator="parent"
-              close-on-content-click
-            >
-              <VList>
-                <VListItem
-                  variant="plain"
-                  @click="openTorrentDetail()"
-                >
-                  <template #prepend>
-                    <VIcon icon="mdi-information" />
-                  </template>
-                  <VListItemTitle>查看详情</VListItemTitle>
-                </VListItem>
-                <VListItem
-                  v-if="props.torrent?.torrent_info?.enclosure?.startsWith('http')"
-                  variant="plain"
-                  @click="downloadTorrentFile()"
-                >
-                  <template #prepend>
-                    <VIcon icon="mdi-download" />
-                  </template>
-                  <VListItemTitle>下载种子文件</VListItemTitle>
-                </VListItem>
-              </VList>
-            </VMenu>
-          </IconBtn>
-        </div>
+      <template v-if="!showMoreTorrents" #image>
+        <VAvatar class="absolute right-2 bottom-2 rounded" variant="flat" rounded="0">
+          <VImg :src="siteIcon" />
+        </VAvatar>
       </template>
-    </VCardItem>
-    <VCardText class="text-subtitle-2">
-      {{ 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"
-      >
-        H&R
-      </VChip>
-      <VChip
-        v-if="torrent?.freedate_diff"
-        variant="elevated"
-        color="secondary"
-        size="small"
-        class="me-1 mb-1"
-      >
-        {{ torrent?.freedate_diff }}
-      </VChip>
-      <VChip
-        v-for="(label, index) in torrent?.labels"
-        :key="index"
-        variant="elevated"
-        size="small"
-        color="primary"
-        class="me-1 mb-1"
-      >
-        {{ label }}
-      </VChip>
-      <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"
-      >
-        {{ meta?.resource_pix }}
-      </VChip>
-      <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"
-      >
-        {{ formatFileSize(torrent?.size) }}
-      </VChip>
-      <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)
-        "
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1"
-      >
-        {{ torrent?.volume_factor }}
-      </VChip>
-    </VCardItem>
-    <VCardActions>
-      <VBtn
-        v-if="props.more && props.more.length > 0"
-        @click.stop="showMoreTorrents = !showMoreTorrents"
-      >
+      <VCardItem class="py-1">
+        <VCardTitle class="break-words overflow-visible whitespace-break-spaces">
+          {{ media?.title ?? meta?.name }} {{ meta?.season_episode }}
+          <span class="text-green-700 ms-2 text-sm">↑{{ torrent?.seeders }}</span>
+          <span class="text-orange-700 ms-2 text-sm">↓{{ torrent?.peers }}</span>
+        </VCardTitle>
         <template #append>
-          <VIcon :icon="showMoreTorrents ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
+          <div class="me-n3">
+            <IconBtn>
+              <VIcon icon="mdi-dots-vertical" />
+              <VMenu activator="parent" close-on-content-click>
+                <VList>
+                  <VListItem variant="plain" @click="openTorrentDetail()">
+                    <template #prepend>
+                      <VIcon icon="mdi-information" />
+                    </template>
+                    <VListItemTitle>查看详情</VListItemTitle>
+                  </VListItem>
+                  <VListItem
+                    v-if="props.torrent?.torrent_info?.enclosure?.startsWith('http')"
+                    variant="plain"
+                    @click="downloadTorrentFile()"
+                  >
+                    <template #prepend>
+                      <VIcon icon="mdi-download" />
+                    </template>
+                    <VListItemTitle>下载种子文件</VListItemTitle>
+                  </VListItem>
+                </VList>
+              </VMenu>
+            </IconBtn>
+          </div>
         </template>
-        更多来源
-      </VBtn>
-    </VCardActions>
-    <VExpandTransition>
-      <div v-show="showMoreTorrents">
-        <VDivider />
-        <VChipGroup class="p-3">
-          <VChip
-            v-for="(item, index) in props.more"
-            :key="index"
-            @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
-                v-if="
-                  item.torrent_info?.downloadvolumefactor !== 1
-                    || item.torrent_info?.uploadvolumefactor !== 1
-                "
-                :content="item.torrent_info?.volume_factor"
-                inline
-                size="small"
-              />
-            </template>
-            {{ item.torrent_info.site_name }}
-          </VChip>
-        </VChipGroup>
-      </div>
-    </VExpandTransition>
-  </VCard>
+      </VCardItem>
+      <VCardText class="text-subtitle-2">
+        {{ torrent?.title }}
+      </VCardText>
+      <VCardText>【{{ torrent?.site_name }}】{{ 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">
+          H&R
+        </VChip>
+        <VChip v-if="torrent?.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
+          {{ torrent?.freedate_diff }}
+        </VChip>
+        <VChip
+          v-for="(label, index) in torrent?.labels"
+          :key="index"
+          variant="elevated"
+          size="small"
+          color="primary"
+          class="me-1 mb-1"
+        >
+          {{ label }}
+        </VChip>
+        <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">
+          {{ meta?.resource_pix }}
+        </VChip>
+        <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">
+          {{ formatFileSize(torrent?.size) }}
+        </VChip>
+        <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)"
+          variant="elevated"
+          size="small"
+          class="me-1 mb-1"
+        >
+          {{ torrent?.volume_factor }}
+        </VChip>
+      </VCardItem>
+      <VCardActions>
+        <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>
+          更多来源
+        </VBtn>
+      </VCardActions>
+      <VExpandTransition>
+        <div v-show="showMoreTorrents">
+          <VDivider />
+          <VChipGroup class="p-3" column>
+            <VChip v-for="(item, index) in props.more" :key="index" @click.stop="handleAddDownload(item)">
+              <template #append>
+                <VBadge color="primary" :content="`↑${item.torrent_info?.seeders}`" inline size="small" />
+                <VBadge
+                  v-if="item.torrent_info?.downloadvolumefactor !== 1 || item.torrent_info?.uploadvolumefactor !== 1"
+                  :content="item.torrent_info?.volume_factor"
+                  inline
+                  size="small"
+                />
+              </template>
+              {{ item.torrent_info.site_name }}
+            </VChip>
+          </VChipGroup>
+        </div>
+      </VExpandTransition>
+    </VCard>
+    <AddDownloadDialog
+      v-if="addDownloadDialog"
+      v-model="addDownloadDialog"
+      :title="`${downloadItem?.media_info?.title_year || downloadItem?.meta_info?.name} ${
+        downloadItem?.meta_info?.season_episode
+      }`"
+      :media="downloadItem?.media_info"
+      :torrent="downloadItem?.torrent_info"
+      @done="addDownloadSuccess"
+      @error="addDownloadError"
+      @close="addDownloadDialog = false"
+    />
+  </div>
 </template>

src/components/cards/TorrentItem.vue

@@ -1,23 +1,15 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { useToast } from 'vue-toast-notification'
-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 AddDownloadDialog from '../dialog/AddDownloadDialog.vue'
 
 // 输入参数
 const props = defineProps({
   torrent: Object as PropType<Context>,
 })
 
-// 提示框
-const $toast = useToast()
-
-// 确认框
-const createConfirm = useConfirm()
-
 // 更多来源界面
 const showMoreTorrents = ref(false)
 
@@ -33,67 +25,37 @@ const meta = ref(props.torrent?.meta_info)
 // 站点图标
 const siteIcon = ref('')
 
+// 存储是否已经下载过的记录
+const downloaded = ref<string[]>([])
+
+// 添加下载对话框
+const addDownloadDialog = ref(false)
+
 // 查询站点图标
 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) {
-  if (!_media || !_torrent || !_site) {
-    _site = torrent.value?.site_name
-    _media = media.value
-    _torrent = torrent.value
-  }
-
-  const isConfirmed = await createConfirm({
-    title: '确认',
-    content: `是否确认下载【${_site}】${_torrent?.title} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
-  })
-
-  if (!isConfirmed)
-    return
-
-  addDownload(_media, _torrent)
+async function handleAddDownload() {
+  // 打开下载对话框
+  addDownloadDialog.value = true
 }
 
-// 添加下载
-async function addDownload(_media: any, _torrent: any) {
-  startNProgress()
-  try {
-    const result: { [key: string]: any } = await api.post('download/', {
-      media_in: _media,
-      torrent_in: _torrent,
-    })
+// 添加下载成功
+function addDownloadSuccess(url: string) {
+  addDownloadDialog.value = false
+  // 添加下载成功
+  downloaded.value.push(url)
+}
 
-    if (result.success) {
-      // 添加下载成功
-      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
-    }
-    else {
-      // 添加下载失败
-      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败！`)
-    }
-  }
-  catch (error) {
-    console.error(error)
-  }
-  doneNProgress()
+// 添加下载失败
+function addDownloadError(error: string) {
+  addDownloadDialog.value = false
 }
 
 // 打开种子详情页面
@@ -108,14 +70,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,144 +83,101 @@ onMounted(() => {
 </script>
 
 <template>
-  <VListItem @click="handleAddDownload">
-    <template
-      v-if="!showMoreTorrents"
-      #prepend
+  <div>
+    <VListItem
+      @click="handleAddDownload"
+      :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'flat'"
     >
-      <VAvatar
-        class="rounded"
-        variant="flat"
-        @click.stop="openTorrentDetail"
-      >
-        <VImg :src="siteIcon" />
-      </VAvatar>
-    </template>
-    <VListItemTitle class="break-words overflow-visible whitespace-break-spaces">
-      {{ torrent?.title }}
-      <span class="text-green-700 ms-2 text-sm">↑{{ torrent?.seeders }}</span>
-      <span class="text-orange-700 ms-2 text-sm">↓{{ torrent?.peers }}</span>
-    </VListItemTitle>
-    <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"
-      >
-        H&R
-      </VChip>
-      <VChip
-        v-if="torrent?.freedate_diff"
-        variant="elevated"
-        color="secondary"
-        size="small"
-        class="me-1 mb-1"
-      >
-        {{ torrent?.freedate_diff }}
-      </VChip>
-      <VChip
-        v-for="(label, index) in torrent?.labels"
-        :key="index"
-        variant="elevated"
-        size="small"
-        color="primary"
-        class="me-1 mb-1"
-      >
-        {{ label }}
-      </VChip>
-      <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"
-      >
-        {{ meta?.resource_pix }}
-      </VChip>
-      <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"
-      >
-        {{ formatFileSize(torrent?.size) }}
-      </VChip>
-      <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)
-        "
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1"
-      >
-        {{ torrent?.volume_factor }}
-      </VChip>
-    </div>
-    <template #append>
-      <div class="me-n3">
-        <IconBtn>
-          <VIcon
-            icon="mdi-dots-vertical"
-          />
-          <VMenu
-            activator="parent"
-            close-on-content-click
-          >
-            <VList>
-              <VListItem
-                variant="plain"
-                @click="openTorrentDetail()"
-              >
-                <template #prepend>
-                  <VIcon icon="mdi-information" />
-                </template>
-                <VListItemTitle>查看详情</VListItemTitle>
-              </VListItem>
-              <VListItem
-                v-if="props.torrent?.torrent_info?.enclosure?.startsWith('http')"
-                variant="plain"
-                @click="downloadTorrentFile()"
-              >
-                <template #prepend>
-                  <VIcon icon="mdi-download" />
-                </template>
-                <VListItemTitle>下载种子文件</VListItemTitle>
-              </VListItem>
-            </VList>
-          </VMenu>
-        </IconBtn>
+      <template v-if="!showMoreTorrents" #prepend>
+        <VAvatar class="rounded" variant="flat" @click.stop="openTorrentDetail">
+          <VImg :src="siteIcon" />
+        </VAvatar>
+      </template>
+      <VListItemTitle class="break-words overflow-visible whitespace-break-spaces">
+        {{ torrent?.title }}
+        <span class="text-green-700 ms-2 text-sm">↑{{ torrent?.seeders }}</span>
+        <span class="text-orange-700 ms-2 text-sm">↓{{ torrent?.peers }}</span>
+      </VListItemTitle>
+      <VListItemSubtitle> 【{{ torrent?.site_name }}】{{ 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">
+          H&R
+        </VChip>
+        <VChip v-if="torrent?.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
+          {{ torrent?.freedate_diff }}
+        </VChip>
+        <VChip
+          v-for="(label, index) in torrent?.labels"
+          :key="index"
+          variant="elevated"
+          size="small"
+          color="primary"
+          class="me-1 mb-1"
+        >
+          {{ label }}
+        </VChip>
+        <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">
+          {{ meta?.resource_pix }}
+        </VChip>
+        <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">
+          {{ formatFileSize(torrent?.size) }}
+        </VChip>
+        <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)"
+          variant="elevated"
+          size="small"
+          class="me-1 mb-1"
+        >
+          {{ torrent?.volume_factor }}
+        </VChip>
       </div>
-    </template>
-  </VListItem>
+      <template #append>
+        <div class="me-n3">
+          <IconBtn>
+            <VIcon icon="mdi-dots-vertical" />
+            <VMenu activator="parent" close-on-content-click>
+              <VList>
+                <VListItem variant="plain" @click="openTorrentDetail()">
+                  <template #prepend>
+                    <VIcon icon="mdi-information" />
+                  </template>
+                  <VListItemTitle>查看详情</VListItemTitle>
+                </VListItem>
+                <VListItem
+                  v-if="props.torrent?.torrent_info?.enclosure?.startsWith('http')"
+                  variant="plain"
+                  @click="downloadTorrentFile()"
+                >
+                  <template #prepend>
+                    <VIcon icon="mdi-download" />
+                  </template>
+                  <VListItemTitle>下载种子文件</VListItemTitle>
+                </VListItem>
+              </VList>
+            </VMenu>
+          </IconBtn>
+        </div>
+      </template>
+    </VListItem>
+    <AddDownloadDialog
+      v-if="addDownloadDialog"
+      v-model="addDownloadDialog"
+      :title="`${media?.title_year || meta?.name} ${meta?.season_episode}`"
+      :media="media"
+      :torrent="torrent"
+      @done="addDownloadSuccess"
+      @error="addDownloadError"
+      @close="addDownloadDialog = false"
+    />
+  </div>
 </template>

src/components/cards/UserCard.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import api from '@/api'
+import { Subscribe, User } from '@/api/types'
+import store from '@/store'
+import avatar1 from '@images/avatars/avatar-1.png'
+import { useToast } from 'vue-toast-notification'
+import { useConfirm } from 'vuetify-use-dialog'
+import UserAddEditDialog from '@/components/dialog/UserAddEditDialog.vue'
+
+// 定义输入变量
+const props = defineProps({
+  // 用户信息
+  user: {
+    type: Object as PropType<User>,
+    required: true,
+  },
+  // 所有用户
+  users: {
+    type: Array as PropType<User[]>,
+    required: true,
+  },
+})
+
+// 当前用户的ID
+const currentLoginUserId = computed(() => store.state.auth.userID)
+
+// 当前用户是否是管理员
+const currentUserIsSuperuser = computed(() => store.state.auth.superUser)
+
+// 定义触发的自定义事件
+const emit = defineEmits(['remove', 'save'])
+
+// 确认框
+const createConfirm = useConfirm()
+
+// 用户信息弹窗
+const userEditDialog = ref(false)
+
+// 提示框
+const $toast = useToast()
+
+// 用户电影订阅数量
+const movieSubscriptions = ref(0)
+
+// 用户电视剧订阅数量
+const tvShowSubscriptions = ref(0)
+
+// 按用户查询订阅数量
+async function fetchSubscriptions() {
+  try {
+    const result: Subscribe[] = await api.get(`subscribe/user/${props.user.name}`)
+    if (result) {
+      movieSubscriptions.value = result.filter(item => item.type === '电影').length
+      tvShowSubscriptions.value = result.filter(item => item.type === '电视剧').length
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 删除用户
+async function removeUser() {
+  if (props.user.id === currentLoginUserId.value) {
+    $toast.error('不能删除当前登录用户！')
+    return
+  }
+  try {
+    const isConfirmed = await createConfirm({
+      title: '注意',
+      content: `删除用户 ${props.user?.name} 的所有数据，是否确认？`,
+    })
+    if (!isConfirmed) return
+    const result: { [key: string]: any } = await api.delete(`user/id/${props.user.id}`)
+    if (result.success) {
+      $toast.success('用户删除成功')
+      emit('remove')
+    } else {
+      $toast.error('用户删除失败！')
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 编辑用户
+function editUser() {
+  userEditDialog.value = true
+}
+
+// 用户重新完成时
+function onUserUpdate() {
+  userEditDialog.value = false
+  emit('save')
+}
+
+onMounted(() => {
+  fetchSubscriptions()
+})
+</script>
+<template>
+  <VCard>
+    <VCardText class="text-center pt-10 pb-3">
+      <VAvatar variant="flat" size="100" rounded>
+        <VImg :src="user.avatar || avatar1" alt="avatar" />
+      </VAvatar>
+      <h5 class="text-h5 mt-3">{{ user.name }}</h5>
+      <VChip size="small" class="mt-3" :class="{ 'text-error': user.is_superuser }">
+        {{ user.is_superuser ? '管理员' : '普通用户' }}
+      </VChip>
+    </VCardText>
+    <VCardText class="flex justify-center gap-6 pb-5">
+      <div class="d-flex align-center">
+        <VAvatar size="40" color="primary" rounded variant="tonal" class="me-4">
+          <VIcon size="24" icon="mdi-movie-open-outline"></VIcon>
+        </VAvatar>
+        <div>
+          <div class="text-h6">{{ movieSubscriptions }}</div>
+          <div class="text-sm text-no-wrap">电影订阅</div>
+        </div>
+      </div>
+      <div class="d-flex align-center">
+        <VAvatar size="40" color="primary" rounded variant="tonal" class="me-4">
+          <VIcon size="24" icon="mdi-television"></VIcon>
+        </VAvatar>
+        <div>
+          <div class="text-h6">{{ tvShowSubscriptions }}</div>
+          <div class="text-sm text-no-wrap">电视剧订阅</div>
+        </div>
+      </div>
+    </VCardText>
+    <VCardText class="pb-6">
+      <VDivider class="my-2">
+        <h5 class="text-h6">详情</h5>
+      </VDivider>
+      <VList lines="one">
+        <VListItem>
+          <VListItemTitle class="text-sm">
+            <span class="font-weight-medium">邮箱：</span><span class="text-body-1"> {{ user.email }}</span>
+          </VListItemTitle>
+        </VListItem>
+        <VListItem>
+          <VListItemTitle class="text-sm">
+            <span class="font-weight-medium">状态：</span
+            ><span class="text-body-1">
+              <VChip size="small" :class="{ 'text-success': user.is_active }" variant="tonal">
+                {{ user.is_active ? '激活' : '已停用' }}
+              </VChip>
+            </span>
+          </VListItemTitle>
+        </VListItem>
+        <VListItem>
+          <VListItemTitle class="text-sm">
+            <span class="font-weight-medium">双重认证：</span
+            ><span class="text-body-1">
+              <VChip size="small" :class="{ 'text-success': user.is_otp }" variant="tonal">
+                {{ user.is_otp ? '已启用' : '未启用' }}
+              </VChip>
+            </span>
+          </VListItemTitle>
+        </VListItem>
+      </VList>
+    </VCardText>
+    <VCardText class="flex flex-row justify-center">
+      <VBtn
+        v-if="currentUserIsSuperuser"
+        color="primary"
+        class="me-4"
+        @click="editUser"
+      >
+        编辑
+      </VBtn>
+      <VBtn
+        v-if="currentUserIsSuperuser && props.user.id != currentLoginUserId"
+        color="error"
+        variant="outlined"
+        @click="removeUser"
+      >
+        删除
+      </VBtn>
+    </VCardText>
+  </VCard>
+  <!-- 用户编辑弹窗 -->
+  <UserAddEditDialog
+    v-if="userEditDialog"
+    v-model="userEditDialog"
+    :username="props.user?.name"
+    :usernames="props.users.map(item => item.name)"
+    oper="edit"
+    @save="onUserUpdate"
+    @close="userEditDialog = false"
+  />
+</template>

src/components/dialog/AddDownloadDialog.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { useToast } from 'vue-toast-notification'
+import api from '@/api'
+import { doneNProgress, startNProgress } from '@/api/nprogress'
+import type { DownloaderConf, MediaInfo, TorrentInfo, TransferDirectoryConf } from '@/api/types'
+import { formatFileSize } from '@/@core/utils/formatters'
+import { VCardTitle } from 'vuetify/lib/components/index.mjs'
+
+// 输入参数
+const props = defineProps({
+  title: String,
+  media: Object as PropType<MediaInfo>,
+  torrent: Object as PropType<TorrentInfo>,
+})
+
+// 提示框
+const $toast = useToast()
+
+// 选择的下载器
+const selectedDownloader = ref<string | null>(null)
+
+// 选择的保存目录
+const selectedDirectory = ref<string | null>(null)
+
+// 定义成功和失败事件
+const emit = defineEmits(['done', 'error', 'close'])
+
+// 所有目录设置
+const directories = ref<TransferDirectoryConf[]>([])
+
+// 是否正在加载
+const loading = ref(false)
+
+// 计算按钮图标
+const icon = computed(() => (loading.value ? 'mdi-progress-download' : 'mdi-download'))
+
+// 计算按钮文字
+const buttonText = computed(() => (loading.value ? '下载中...' : '开始下载'))
+
+// 加载目录设置
+async function loadDirectories() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/Directories')
+    directories.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 获取保存目录
+const targetDirectories = computed(() => {
+  const downloadDirectories = directories.value.map(item => item.download_path)
+  return [...new Set(downloadDirectories)]
+})
+
+// 下载器
+const downloaders = ref<DownloaderConf[]>([])
+
+// 调用API查询下载器设置
+async function loadDownloaderSetting() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/Downloaders')
+    downloaders.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 下载器可选项
+const downloaderOptions = computed(() => {
+  return downloaders.value.map(item => ({
+    title: item.name,
+    value: item.name,
+  }))
+})
+
+// 添加下载
+async function addDownload() {
+  startNProgress()
+  loading.value = true
+  try {
+    let result: { [key: string]: any }
+
+    const payload: any = {
+      torrent_in: props.torrent,
+      downloader: selectedDownloader.value,
+      save_path: selectedDirectory.value,
+    }
+
+    if (props.media) {
+      payload.media_in = props.media
+    }
+
+    const endpoint = props.media ? 'download/' : 'download/add'
+
+    result = await api.post(endpoint, payload)
+
+    if (result && result.success) {
+      // 添加下载成功
+      $toast.success(`${props.torrent?.site_name} ${props.torrent?.title} 下载成功！`)
+      // 下载成功，返回链接
+      emit('done', props.torrent?.enclosure)
+    } else {
+      // 添加下载失败
+      $toast.error(`${props.torrent?.site_name} ${props.torrent?.title} 下载失败：${result?.message}！`)
+      // 下载失败，返回错误原因
+      emit('error', result?.message)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  loading.value = false
+  doneNProgress()
+}
+
+onMounted(() => {
+  loadDirectories()
+  loadDownloaderSetting()
+})
+</script>
+<template>
+  <VDialog max-width="40rem" scrollable>
+    <VCard>
+      <VCardItem>
+        <VCardTitle v-if="title">下载 - {{ title }}</VCardTitle>
+        <VCardTitle v-else>确认下载</VCardTitle>
+        <DialogCloseBtn @click="emit('close')" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12" class="text-lg text-high-emphasis pb-0">
+            <div><strong>站点：</strong>{{ props.torrent?.site_name }}</div>
+            <div><strong>标题：</strong>{{ props.torrent?.title }}</div>
+            <div><strong>描述：</strong>{{ props.torrent?.description }}</div>
+            <div><strong>大小：</strong>{{ formatFileSize(props.torrent?.size || 0) }}</div>
+          </VCol>
+          <VCol cols="12" md="4">
+            <VSelect
+              v-model="selectedDownloader"
+              :items="downloaderOptions"
+              label="下载器"
+              variant="underlined"
+              placeholder="默认"
+            />
+          </VCol>
+          <VCol cols="12" md="8">
+            <VCombobox
+              v-model="selectedDirectory"
+              :items="targetDirectories"
+              label="保存目录"
+              placeholder="自动"
+              variant="underlined"
+            />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <VCardText class="text-center">
+        <VBtn
+          variant="elevated"
+          :disabled="loading"
+          @click="addDownload"
+          :prepend-icon="icon"
+          class="px-5"
+          size="large"
+        >
+          {{ buttonText }}
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/AliyunAuthDialog.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import QrcodeVue from 'qrcode.vue'
+import api from '@/api'
+
+// 定义事件
+const emit = defineEmits(['done', 'close'])
+
+// 二维码内容
+const qrCodeContent = ref('')
+
+// ck参数
+const ck = ref('')
+
+// t参数
+const t = ref('')
+
+// 下方的提示信息
+const text = ref('请用阿里云盘 App 扫码')
+
+// 提醒类型
+const alertType = ref<'success' | 'info' | 'error' | 'warning' | undefined>('info')
+
+// timeout定时器
+let timeoutTimer: NodeJS.Timeout | undefined = undefined
+
+// 完成
+async function handleDone() {
+  emit('done')
+}
+
+// 调用/aliyun/qrcode api生成二维码
+async function getQrcode() {
+  try {
+    const result: { [key: string]: any } = await api.get('/storage/qrcode/alipan')
+    if (result.success && result.data) {
+      qrCodeContent.value = result.data.codeContent
+      ck.value = result.data.ck
+      t.value = result.data.t
+    } else {
+      text.value = result.message
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+// 调用/aliyun/check api验证二维码
+async function checkQrcode() {
+  try {
+    const result: { [key: string]: any } = await api.get('/storage/check/alipan', {
+      params: { ck: ck.value, t: t.value },
+    })
+    if (result.success && result.data) {
+      const qrCodeStatus = result.data.qrCodeStatus
+      text.value = result.data.tip
+      if (qrCodeStatus == 'CONFIRMED') {
+        // 已确认完成
+        alertType.value = 'success'
+        handleDone()
+      } else if (qrCodeStatus == 'NEW' || qrCodeStatus == 'SCANED') {
+        alertType.value = 'info'
+        // 新建、待扫码
+        clearTimeout(timeoutTimer)
+        timeoutTimer = setTimeout(checkQrcode, 3000)
+      } else {
+        // 过期或者已取消
+        alertType.value = 'error'
+      }
+    } else {
+      alertType.value = 'error'
+      text.value = result.message
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+onMounted(async () => {
+  await getQrcode()
+  timeoutTimer = setTimeout(checkQrcode, 3000)
+})
+
+onUnmounted(() => {
+  if (timeoutTimer) clearTimeout(timeoutTimer)
+})
+</script>
+
+<template>
+  <VDialog width="40rem" scrollable max-height="85vh">
+    <VCard title="阿里云盘登录" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText class="pt-2 flex flex-col items-center">
+        <div class="my-6 shadow-lg rounded text-center p-3 border">
+          <QrcodeVue class="mx-auto" :value="qrCodeContent" :size="200" />
+        </div>
+        <VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
+          <template #prepend />
+        </VAlert>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn variant="elevated" @click="handleDone" prepend-icon="mdi-check" class="px-5 me-3"> 完成 </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</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/PluginMarketSettingDialog.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import api from '@/api'
+import { useToast } from 'vue-toast-notification'
+
+// 输入参数
+const props = defineProps({
+  title: String,
+})
+
+const $toast = useToast()
+
+// 插件仓库设置字符串
+const repoString = ref('')
+
+// 定义事件
+const emit = defineEmits(['save', 'close'])
+
+// 查询已设置的插件仓库
+async function queryMarketRepoSetting() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/PLUGIN_MARKET')
+    if (result && result.data && result.data.value) repoString.value = result.data.value
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 保存设置
+async function saveHandle() {
+  try {
+    // 用户名密码
+    const result: { [key: string]: any } = await api.post('system/setting/PLUGIN_MARKET', repoString.value)
+
+    if (result.success) {
+      $toast.success('插件仓库保存成功')
+      emit('save')
+    } else $toast.error('插件仓库保存失败！')
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+onMounted(() => {
+  queryMarketRepoSetting()
+})
+</script>
+
+<template>
+  <VDialog width="50rem" scrollable max-height="85vh">
+    <VCard title="插件仓库设置" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText class="pt-2">
+        <VTextarea
+          v-model="repoString"
+          placeholder="格式：https://github.com/jxxghp/MoviePilot-Plugins/,https://github.com/xxxx/xxxxxx/"
+          hint="多个地址使用逗号分隔，仅支持Github仓库"
+          persistent-hint
+        />
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn variant="elevated" @click="saveHandle" prepend-icon="mdi-content-save-check" 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>