feat: 为多个组件的 VMenu 添加 scrim 属性

继续优化探索页UI

.env.development

@@ -1,2 +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

.github/ISSUE_TEMPLATE/rfc.yml

@@ -0,0 +1,45 @@
+name: 功能提案
+description: Request for Comments
+title: '[RFC]'
+labels: ['RFC']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        一份提案(RFC)定位为 **「在某功能/重构的具体开发前，用于开发者间 review 技术设计/方案的文档」**，
+        目的是让协作的开发者间清晰的知道「要做什么」和「具体会怎么做」，以及所有的开发者都能公开透明的参与讨论；
+        以便评估和讨论产生的影响 (遗漏的考虑、向后兼容性、与现有功能的冲突)，
+        因此提案侧重在对解决问题的 **方案、设计、步骤** 的描述上。
+          
+        如果仅希望讨论是否添加或改进某功能本身，请使用 -> [Issue: 功能改进](https://github.com/jxxghp/MoviePilot/issues/new?assignees=&labels=feature+request&projects=&template=feature_request.yml&title=%5BFeature+Request%5D%3A+)
+  - type: textarea
+    id: background
+    attributes:
+      label: 背景 or 问题
+      description: 简单描述遇到的什么问题或需要改动什么。可以引用其他 issue、讨论、文档等。
+    validations:
+      required: true
+  - type: textarea
+    id: goal
+    attributes:
+      label: '目标 & 方案简述'
+      description: 简单描述提案此提案实现后，**预期的目标效果**，以及简单大致描述会采取的方案/步骤，可能会/不会产生什么影响。
+    validations:
+      required: true
+  - type: textarea
+    id: design
+    attributes:
+      label: '方案设计 & 实现步骤'
+      description: |
+        详细描述你设计的具体方案，可以考虑拆分列表或要点，一步步描述具体打算如何实现的步骤和相关细节。
+        这部份不需要一次性写完整，即使在创建完此提案 issue 后，依旧可以再次编辑修改。
+    validations:
+      required: false
+  - type: textarea
+    id: alternative
+    attributes:
+      label: '替代方案 & 对比'
+      description: |
+        [可选] 为来实现目标效果，还考虑过什么其他方案，有什么对比？
+    validations:
+      required: false

.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:
@@ -42,13 +42,21 @@ jobs:
           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:

auto-imports.d.ts

@@ -3,9 +3,11 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -20,13 +22,11 @@ declare global {
   const createGenericProjection: typeof import('@vueuse/math')['createGenericProjection']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
-  const createLogger: typeof import('vuex')['createLogger']
-  const createNamespacedHelpers: typeof import('vuex')['createNamespacedHelpers']
+  const createPinia: typeof import('pinia')['createPinia']
   const createProjection: typeof import('@vueuse/math')['createProjection']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
-  const createStore: typeof import('vuex')['createStore']
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
@@ -34,9 +34,11 @@ declare global {
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
@@ -52,10 +54,11 @@ declare global {
   const logicNot: typeof import('@vueuse/math')['logicNot']
   const logicOr: typeof import('@vueuse/math')['logicOr']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
-  const mapActions: typeof import('vuex')['mapActions']
-  const mapGetters: typeof import('vuex')['mapGetters']
-  const mapMutations: typeof import('vuex')['mapMutations']
-  const mapState: typeof import('vuex')['mapState']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
@@ -66,6 +69,7 @@ declare global {
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
   const onDeactivated: typeof import('vue')['onDeactivated']
+  const onElementRemoval: typeof import('@vueuse/core')['onElementRemoval']
   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
   const onLongPress: typeof import('@vueuse/core')['onLongPress']
@@ -77,6 +81,7 @@ declare global {
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
@@ -96,9 +101,12 @@ declare global {
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
@@ -190,6 +198,7 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useId: typeof import('vue')['useId']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
@@ -209,6 +218,7 @@ declare global {
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
   const useMin: typeof import('@vueuse/math')['useMin']
+  const useModel: typeof import('vue')['useModel']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -234,6 +244,7 @@ declare global {
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePreferredReducedTransparency: typeof import('@vueuse/core')['usePreferredReducedTransparency']
   const usePrevious: typeof import('@vueuse/core')['usePrevious']
   const useProjection: typeof import('@vueuse/math')['useProjection']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
@@ -242,6 +253,7 @@ declare global {
   const useRound: typeof import('@vueuse/math')['useRound']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
+  const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
@@ -256,11 +268,11 @@ declare global {
   const useStepper: typeof import('@vueuse/core')['useStepper']
   const useStorage: typeof import('@vueuse/core')['useStorage']
   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
-  const useStore: typeof import('vuex')['useStore']
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSum: typeof import('@vueuse/math')['useSum']
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
@@ -313,15 +325,17 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, 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 acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
@@ -336,13 +350,11 @@ declare module 'vue' {
     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 createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
     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']>
@@ -350,9 +362,11 @@ declare module 'vue' {
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
@@ -368,10 +382,11 @@ declare module 'vue' {
     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 mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
+    readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
+    readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
+    readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
+    readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
@@ -382,6 +397,7 @@ declare module 'vue' {
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
     readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onElementRemoval: UnwrapRef<typeof import('@vueuse/core')['onElementRemoval']>
     readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
     readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
     readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
@@ -393,6 +409,7 @@ declare module 'vue' {
     readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
     readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
@@ -412,9 +429,12 @@ declare module 'vue' {
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
+    readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
+    readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
     readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
     readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
     readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
@@ -506,6 +526,7 @@ declare module 'vue' {
     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 useId: UnwrapRef<typeof import('vue')['useId']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
     readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
@@ -525,6 +546,7 @@ declare module 'vue' {
     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 useModel: UnwrapRef<typeof import('vue')['useModel']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
     readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
@@ -550,6 +572,7 @@ declare module 'vue' {
     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 usePreferredReducedTransparency: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedTransparency']>
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
     readonly useProjection: UnwrapRef<typeof import('@vueuse/math')['useProjection']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
@@ -558,6 +581,7 @@ declare module 'vue' {
     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 useSSRWidth: UnwrapRef<typeof import('@vueuse/core')['useSSRWidth']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
@@ -572,11 +596,11 @@ declare module 'vue' {
     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 useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
     readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
     readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
@@ -626,313 +650,4 @@ declare module 'vue' {
     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']>
-    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']>
-  }
-}
+}

components.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     DialogCloseBtn: typeof import('./src/@core/components/DialogCloseBtn.vue')['default']
@@ -14,6 +14,7 @@ declare module 'vue' {
     MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ScrollToTopBtn: typeof import('./src/@core/components/ScrollToTopBtn.vue')['default']
     StatIcon: typeof import('./src/@core/components/StatIcon.vue')['default']
     ThemeSwitcher: typeof import('./src/@core/components/ThemeSwitcher.vue')['default']
   }

index.html

@@ -1,162 +1,221 @@
 <!DOCTYPE html>
-<html lang="en">
+<html
+  lang="en"
+  style="
+    overflow: hidden auto;
+    min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
+    background: var(--initial-loader-bg, #fff);
+  "
+>
+  <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="#0E1116" 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" />
+    <script>
+      const loaderColor = localStorage.getItem('materio-initial-loader-bg') || '#FFFFFF'
+      if (loaderColor) document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
+      const primaryColor = localStorage.getItem('materio-initial-loader-color') || '#9155FD'
+      if (primaryColor) document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
+    </script>
+  </head>
 
-<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" />
-  <link rel="preload" href="index.js" as="script">
-</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">
+  <body style="margin: 0">
+    <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="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)">
+                  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="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)" />
+                    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>
                 </g>
               </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>
+          <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>
     </div>
-    <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 (primaryColor)
-      document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
-  </script>
-</body>
-
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "1.9.10",
+  "version": "2.3.9",
   "private": true,
   "bin": "dist/service.js",
   "scripts": {
@@ -19,86 +19,96 @@
     ]
   },
   "dependencies": {
-    "@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",
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/list": "^6.1.15",
+    "@fullcalendar/timegrid": "^6.1.15",
+    "@fullcalendar/vue3": "^6.1.15",
+    "@iconify/utils": "^2.2.1",
+    "@types/js-cookie": "^3.0.6",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.2",
+    "@vue-flow/core": "^1.42.1",
+    "@vue-flow/minimap": "^1.5.2",
+    "@vue-flow/node-resizer": "^1.4.0",
+    "@vue-flow/node-toolbar": "^1.1.0",
+    "@vue-js-cron/vuetify": "^5.0.9",
+    "@vueuse/core": "^12.4.0",
+    "@vueuse/math": "^12.4.0",
+    "ace-builds": "^1.37.4",
+    "apexcharts": "^4.0.0",
+    "axios": "^1.7.9",
+    "colorthief": "^2.6.0",
+    "copy-to-clipboard": "^3.3.3",
+    "dayjs": "^1.11.13",
+    "express": "^4.21.2",
+    "express-http-proxy": "^2.1.1",
+    "js-cookie": "^3.0.5",
+    "lodash-es": "^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",
+    "pinia": "^3.0.1",
+    "pinia-plugin-persistedstate": "^4.2.0",
+    "qrcode.vue": "^3.6.0",
+    "sass": "^1.83.4",
+    "tailwindcss": "^ 3.4.17",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue-toast-notification": "^3.1.3",
     "vue3-ace-editor": "^2.2.4",
-    "vue3-apexcharts": "^1.4.1",
+    "vue3-apexcharts": "^1.8.0",
     "vue3-perfect-scrollbar": "^2.0.0",
     "vuedraggable": "^4.1.0",
-    "vuetify": "3.6.8",
+    "vuetify": "3.7.3",
     "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": "^4.0.4",
-    "@iconify/vue": "4.1.1",
-    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@iconify/vue": "^4.3.0",
+    "@intlify/unplugin-vue-i18n": "^6.0.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@types/lodash": "^4.14.197",
+    "@types/lodash-es": "^4.17.12",
+    "@types/mousetrap": "^1.6.15",
     "@types/node": "^20.1.4",
+    "@types/nprogress": "^0.2.3",
     "@types/webfontloader": "^1.6.34",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "autoprefixer": "^10.4.14",
-    "eslint": "^9.0.0",
-    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint": "^9.18.0",
     "eslint-import-resolver-typescript": "^3.5.1",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-promise": "^6.0.1",
+    "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-regex": "^1.10.0",
-    "eslint-plugin-sonarjs": "^0.25.1",
-    "eslint-plugin-unicorn": "^52.0.0",
+    "eslint-plugin-sonarjs": "^3.0.1",
+    "eslint-plugin-unicorn": "^56.0.1",
     "eslint-plugin-vue": "^9.12.0",
-    "postcss": "8",
+    "postcss": "^8.5.1",
     "postcss-html": "^1.5.0",
-    "stylelint": "16.3.1",
-    "stylelint-config-idiomatic-order": "10.0.0",
-    "stylelint-config-standard-scss": "13.1.0",
+    "stylelint": "^16.13.2",
+    "stylelint-config-idiomatic-order": "^10.0.0",
+    "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-use-logical-spec": "5.0.1",
+    "terser": "^5.36.0",
     "type-fest": "^4.15.0",
     "typescript": "^5.0.4",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.2.8",
+    "unplugin-auto-import": "^19.0.0",
+    "unplugin-vue-components": "^28.0.0",
+    "unplugin-vue-define-options": "^1.5.3",
+    "vite": "^5.4.11",
     "vite-plugin-pages": "^0.32.1",
-    "vite-plugin-pwa": "^0.20.0",
+    "vite-plugin-pwa": "^0.21.1",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vite-plugin-vuetify": "2.0.3",
-    "vue-shepherd": "^3.0.0",
-    "vue-tsc": "^2.0.10"
+    "vite-plugin-vuetify": "2.0.4",
+    "vue-shepherd": "^4.1.0",
+    "vue-tsc": "^2.0.10",
+    "workbox-build": "^7.3.0",
+    "workbox-window": "^7.3.0"
   },
-  "packageManager": "yarn@1.22.18",
-  "resolutions": {
-    "postcss": "8"
-  }
-}
+  "packageManager": "yarn@1.22.18"
+}

public/loader.css

@@ -1,16 +1,6 @@
-body {
-  margin: 0;
-}
-
-html {
-  overflow: hidden auto;
-  background: var(--initial-loader-bg, #fff);
-  min-block-size: calc(100% + env(safe-area-inset-top));
-}
-
 #loading-bg {
-  position: absolute;
-  z-index: 999;
+  position: fixed;
+  z-index: 9999;
   display: block;
   background: var(--initial-loader-bg, #fff);
   block-size: 100vh;

src/@core/components/ScrollToTopBtn.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+// 控制回到顶部按钮的可见性
+const showScrollToTop = ref(false)
+const scrollThreshold = 200 // 滚动多少像素后显示按钮
+
+// 滚动事件处理函数
+const handleScroll = () => {
+  showScrollToTop.value = window.scrollY > scrollThreshold
+}
+
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+onMounted(async () => {
+  // Add scroll event listener
+  window.addEventListener('scroll', handleScroll)
+  // Initial check for scroll-to-top
+  handleScroll()
+})
+
+onUnmounted(() => {
+  // Remove scroll event listener
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<template>
+  <div class="global-action-buttons d-none d-sm-block">
+    <Transition name="scroll-fade">
+      <button v-show="showScrollToTop" class="global-action-button" @click="scrollToTop">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M7 14L12 9L17 14"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    </Transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* Global Action Button Styles (FAB) */
+.global-action-buttons {
+  position: fixed;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  inset-block-end: 30px;
+  inset-inline-end: 30px;
+}
+
+.global-action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+  border-radius: 50%;
+  backdrop-filter: blur(10px);
+  background-color: rgba(var(--v-theme-background), 0.8);
+  block-size: 44px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 8%);
+  color: rgb(var(--v-theme-on-surface));
+  cursor: pointer;
+  inline-size: 44px;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+  &:hover {
+    background-color: rgba(var(--v-theme-background), 0.95);
+    color: rgb(var(--v-theme-primary));
+    transform: translateY(-4px);
+  }
+
+  svg {
+    block-size: 20px;
+    inline-size: 20px;
+    transition: all 0.3s ease;
+  }
+}
+</style>

src/@core/components/ThemeSwitcher.vue

@@ -5,7 +5,7 @@ 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'
+import { saveLocalTheme } from '../utils/theme'
 
 // 显示器宽度
 const display = useDisplay()
@@ -18,10 +18,12 @@ const { name: themeName, global: globalTheme } = useTheme()
 
 const savedTheme = ref(localStorage.getItem('theme') ?? themeName)
 
-const { state: currentThemeName, next: getNextThemeName } = useCycleList(
-  props.themes.map(t => t.name),
-  { initialValue: savedTheme.value },
-)
+const currentThemeName = ref(savedTheme.value)
+const getNextThemeName = () => {
+  const currentIndex = props.themes.findIndex(t => t.name === currentThemeName.value)
+  const nextIndex = (currentIndex + 1) % props.themes.length
+  return props.themes[nextIndex].name
+}
 
 const $toast = useToast()
 
@@ -103,8 +105,7 @@ function updateTheme() {
   savedTheme.value = theme
   themeTransition()
   // 保存主题到本地
-  localStorage.setItem('theme', theme)
-  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
+  saveLocalTheme(theme, globalTheme)
 }
 
 // 切换主题
@@ -114,10 +115,8 @@ function changeTheme(theme: string) {
   currentThemeName.value = nextTheme
   // 保存主题到服务端
   try {
-    api.post('/user/config/theme', nextTheme, {
-      headers: {
-        'Content-Type': 'text/plain',
-      },
+    api.post('/user/config/Layout', {
+      theme: nextTheme,
     })
   } catch (e) {
     console.error('保存主题到服务端失败')
@@ -178,7 +177,7 @@ async function saveCustomCSS() {
       },
     })
 
-    if (result.success) $toast.success('自定义CSS保存成功！')
+    if (result.success) $toast.success('自定义CSS保存成功，请刷新页面生效！')
   } catch (e) {
     console.error('保存自定义 CSS 到服务端失败')
   }
@@ -190,31 +189,59 @@ onMounted(() => {
 </script>
 
 <template>
-  <VMenu v-if="props.themes">
+  <VMenu v-if="props.themes" class="theme-menu" scrim>
     <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 class="theme-switcher-list pt-0">
+      <VCardItem class="theme-switcher-header">
+        <VCardTitle class="font-weight-medium text-primary">主题选择</VCardTitle>
+      </VCardItem>
+
+      <div class="theme-switcher-options px-2">
+        <VListItem
+          v-for="theme in props.themes"
+          :key="theme.name"
+          @click="changeTheme(theme.name)"
+          class="theme-option"
+          :class="{ 'theme-option-active': currentThemeName === theme.name }"
+        >
+          <template #prepend>
+            <div class="theme-icon-wrapper">
+              <VIcon :icon="theme.icon" />
+            </div>
+          </template>
+          <VListItemTitle>{{ theme.title }}</VListItemTitle>
+          <template #append v-if="currentThemeName === theme.name">
+            <VIcon icon="mdi-check" color="primary" size="small" />
+          </template>
+        </VListItem>
+
+        <VDivider class="my-2" />
+
+        <VListItem @click="cssDialog = true" class="theme-option custom-theme-option">
+          <template #prepend>
+            <div class="theme-icon-wrapper custom-theme-icon">
+              <VIcon icon="mdi-palette" />
+            </div>
+          </template>
+          <VListItemTitle>自定义主题</VListItemTitle>
+        </VListItem>
+      </div>
     </VList>
   </VMenu>
   <!-- 自定义 CSS -- -->
-  <VDialog v-model="cssDialog" persistent max-width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
-    <VCard title="自定义主题风格">
-      <DialogCloseBtn @click="cssDialog = false" />
+  <VDialog v-if="cssDialog" v-model="cssDialog" max-width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-palette" class="me-2" />
+          自定义主题风格
+        </VCardTitle>
+        <DialogCloseBtn @click="cssDialog = false" />
+      </VCardItem>
       <VDivider />
       <VAceEditor
         v-model:value="customCSS"
@@ -235,18 +262,73 @@ onMounted(() => {
   </VDialog>
 </template>
 
-<style lang="sass">
-// Theme transition
-.app-copy
-  position: fixed !important
-  z-index: -1 !important
-  pointer-events: none !important
-  contain: size style !important
-  overflow: clip !important
+<style lang="scss">
+.theme-switcher-header {
+  background: linear-gradient(to right, rgba(var(--v-theme-primary), 0.04), rgba(var(--v-theme-primary), 0.01));
+  border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  padding-block: 12px;
+  padding-inline: 16px;
+}
 
-.app-transition
-  --clip-size: 0
-  --clip-pos: 0 0
-  clip-path: circle(var(--clip-size) at var(--clip-pos))
-  transition: clip-path .35s ease-out
+.theme-switcher-options {
+  max-block-size: 300px;
+  overflow-y: auto;
+}
+
+.theme-option {
+  border-radius: 8px;
+  margin-block: 4px;
+  margin-inline: 0;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: rgba(var(--v-theme-primary), 0.04);
+    transform: translateX(4px);
+  }
+
+  &.theme-option-active {
+    background-color: rgba(var(--v-theme-primary), 0.08);
+  }
+}
+
+.theme-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: rgba(var(--v-theme-primary), 0.08);
+  block-size: 36px;
+  inline-size: 36px;
+  margin-inline-end: 12px;
+  transition: all 0.2s ease;
+
+  .v-icon {
+    color: rgba(var(--v-theme-primary), 0.9);
+  }
+}
+
+.custom-theme-icon {
+  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.15), rgba(var(--v-theme-info), 0.15));
+
+  .v-icon {
+    color: rgba(var(--v-theme-primary), 0.9);
+  }
+}
+
+// Theme transition
+.app-copy {
+  position: fixed !important;
+  z-index: -1 !important;
+  overflow: clip !important;
+  contain: size style !important;
+  pointer-events: none !important;
+}
+
+.app-transition {
+  --clip-size: 0;
+  --clip-pos: 0 0;
+
+  clip-path: circle(var(--clip-size) at var(--clip-pos));
+  transition: clip-path 0.35s ease-out;
+}
 </style>

src/@core/scss/base/_vertical-nav.scss

@@ -12,6 +12,7 @@
 
     @extend %nav;
 
+
     @at-root {
       // ℹ️ Add styles for collapsed vertical nav
       .layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}.hovered {
@@ -60,9 +61,9 @@
       z-index: 1;
       background:
         linear-gradient(
-          rgb(#{variables.$vertical-nav-background-color-rgb}) 5%,
-          rgba(#{variables.$vertical-nav-background-color-rgb}, 75%) 45%,
-          rgba(#{variables.$vertical-nav-background-color-rgb}, 20%) 80%,
+          rgb(var(--v-theme-surface)) 5%,
+          rgba(var(--v-theme-surface), 75%) 45%,
+          rgba(var(--v-theme-surface), 20%) 80%,
           transparent
         );
       block-size: 55px;
@@ -85,8 +86,8 @@
     }
 
     .ps__rail-y {
-      // ℹ️ Setting z-index: 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow
-      z-index: 1;
+      // ℹ️ Setting z-index: 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow;Settingz-indexSettingz-indexSettingz-indexSettingz-index
+      z-index: 1z-indexz-indexz-index
     }
 
     // 👉 Nav section title

src/@core/scss/base/libs/vuetify/_overrides.scss

@@ -212,10 +212,6 @@ h6,
   }
 }
 
-.v-data-table-footer {
-  margin-block-start: 1rem;
-}
-
 // 👉 v-field
 .v-field:hover .v-field__outline {
   --v-field-border-opacity: var(--v-medium-emphasis-opacity);

src/@core/scss/pages/page-auth.scss

@@ -1,5 +1,5 @@
 .auth-wrapper {
-  min-block-size: calc(var(--vh, 1vh) * 100 + env(safe-area-inset-top));
+  min-block-size: calc(var(--vh, 1vh) * 100 + env(safe-area-inset-top) + env(safe-area-inset-bottom));
 }
 
 .auth-footer-mask {

src/@core/scss/template/_components.scss

@@ -176,10 +176,6 @@
   th {
     background: rgb(var(--v-table-header-background)) !important;
   }
-
-  .v-data-table-footer {
-    margin-block-start: 1rem;
-  }
 }
 
 // 👉 Pagination

src/@core/scss/template/_mixins.scss

@@ -1,9 +1,10 @@
+@use "sass:map";
 @use "vuetify/lib/styles/settings" as vuetify_settings;
 
 @mixin avatar-font-sizes($map: $avatar-sizes) {
   @each $sizeName, $multiplier in vuetify_settings.$size-scales {
     /* stylelint-disable-next-line scss/no-global-function-names */
-    $size: map-get($map, $sizeName);
+    $size: map.get($map, $sizeName);
 
     &.v-avatar--size-#{$sizeName} {
       font-size: #{$size}px;

src/@core/scss/template/libs/full-calendar.scss

@@ -92,8 +92,7 @@
   .fc-header-toolbar {
     flex-wrap: wrap;
     margin: 1.25rem;
-    column-gap: 0.5rem;
-    row-gap: 1rem;
+    gap: 1rem 0.5rem;
   }
 
   .fc-toolbar-chunk {
@@ -238,7 +237,7 @@
         inline-size: 1.5625rem;
         margin-inline-end: 0.25rem;
 
-        @media (max-width: 1264px) {
+        @media (width <= 1264px) {
           display: block !important;
         }
 

src/@core/utils/dom.ts

@@ -10,8 +10,7 @@ export function useDefer(maxFrameCount = 1) {
   const refreshFrameCount = () => {
     requestAnimationFrame(() => {
       frameCount.value++
-      if (frameCount.value < maxFrameCount)
-        refreshFrameCount()
+      if (frameCount.value < maxFrameCount) refreshFrameCount()
     })
   }
   refreshFrameCount()
@@ -19,3 +18,9 @@ export function useDefer(maxFrameCount = 1) {
     return frameCount.value >= showInFrameCount
   }
 }
+
+export function ensureRenderComplete(callback: () => void) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(callback)
+  })
+}

src/@core/utils/formatters.ts

@@ -60,19 +60,25 @@ export const prefixWithPlus = (value: number) => (value > 0 ? `+${value}` : valu
 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]}`
 }
 
 // 将时间秒格式化为时分秒
@@ -147,3 +153,12 @@ export function formatDateDifference(dateString: string): string {
   if (!dateString) return ''
   return dayjs(dateString).fromNow()
 }
+
+// 格式化评份，如为10及以下的数按原值显示，否则格式化为xxM、xxK显示
+export function formatRating(rating: number): string {
+  if (!rating) return ''
+  if (rating <= 10) return rating.toString()
+  if (rating < 1000) return rating.toLocaleString()
+  if (rating < 1000 * 1000) return `${(rating / 1000).toFixed(1)}K`
+  return `${(rating / 1000 / 1000).toFixed(1)}M`
+}

src/@core/utils/navigator.ts

@@ -1,9 +1,10 @@
+import copy from 'copy-to-clipboard'
+
 // 请求和获取剪贴板内容
 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()
@@ -14,19 +15,10 @@ export async function getClipboardContent() {
   }
 }
 
-// 将内容复制到剪贴板，兼容非安全域场景
+// 将内容复制到剪贴板
 export async function copyToClipboard(content: string) {
-  if (navigator.clipboard && window.isSecureContext) {
-    await navigator.clipboard.writeText(content)
-  }
-  else {
-    const input = document.createElement('textarea')
-    input.value = content
-    document.body.appendChild(input)
-    input.select()
-    document.execCommand('copy')
-    document.body.removeChild(input)
-  }
+  const success = copy(content)
+  return success
 }
 
 // VAPID公钥转Uint8Array
@@ -42,3 +34,12 @@ export function urlBase64ToUint8Array(base64String: string) {
   }
   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/@core/utils/theme.ts

@@ -0,0 +1,6 @@
+export function saveLocalTheme(name: string, theme: any) {
+  // 存储主题到本地
+  localStorage.setItem('theme', name)
+  localStorage.setItem('materio-initial-loader-bg', theme.current.value.colors.background)
+  localStorage.setItem('materio-initial-loader-color', theme.current.value.colors.primary)
+}

src/@core/utils/workflow.ts

@@ -0,0 +1,122 @@
+import { useVueFlow } from '@vue-flow/core'
+import { ref, watch } from 'vue'
+import { cloneDeep } from 'lodash-es'
+
+/**
+ * @returns {string} - A unique id.
+ */
+function getId() {
+  // 生成以act_开头的唯一id
+  return 'act_' + Math.random().toString(36).substr(2, 9)
+}
+
+/**
+ * In a real world scenario you'd want to avoid creating refs in a global scope like this as they might not be cleaned up properly.
+ * @type {{draggedData: Ref<any>, isDragOver: Ref<boolean>, isDragging: Ref<boolean>}}
+ */
+const state = {
+  /**
+   * The type of the node being dragged.
+   */
+  draggedData: ref<any | null>({}),
+  isDragOver: ref(false),
+  isDragging: ref(false),
+}
+
+export default function useDragAndDrop() {
+  const { draggedData, isDragOver, isDragging } = state
+
+  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow()
+
+  watch(isDragging, dragging => {
+    document.body.style.userSelect = dragging ? 'none' : ''
+  })
+
+  function onDragStart(event: any, data: any) {
+    if (event.dataTransfer) {
+      event.dataTransfer.setData('application/vueflow', data)
+      event.dataTransfer.effectAllowed = 'move'
+    }
+
+    draggedData.value = data
+    isDragging.value = true
+
+    document.addEventListener('drop', onDragEnd)
+  }
+
+  /**
+   * Handles the drag over event.
+   *
+   * @param {DragEvent} event
+   */
+  function onDragOver(event: any) {
+    event.preventDefault()
+
+    if (draggedData.value) {
+      isDragOver.value = true
+
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'move'
+      }
+    }
+  }
+
+  function onDragLeave() {
+    isDragOver.value = false
+  }
+
+  function onDragEnd() {
+    isDragging.value = false
+    isDragOver.value = false
+    draggedData.value = null
+    document.removeEventListener('drop', onDragEnd)
+  }
+
+  /**
+   * Handles the drop event.
+   *
+   * @param {DragEvent} event
+   */
+  function onDrop(event: any) {
+    const position = screenToFlowCoordinate({
+      x: event.clientX,
+      y: event.clientY,
+    })
+
+    const nodeId = getId()
+
+    const newNode = {
+      id: nodeId,
+      type: draggedData.value?.type,
+      name: draggedData.value?.name,
+      description: draggedData.value?.description,
+      position,
+      data: draggedData.value?.data ? cloneDeep(draggedData.value.data) : {},
+    }
+
+    /**
+     * Align node position after drop, so it's centered to the mouse
+     *
+     * We can hook into events even in a callback, and we can remove the event listener after it's been called.
+     */
+    const { off } = onNodesInitialized(() => {
+      updateNode(nodeId, node => ({
+        position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 },
+      }))
+
+      off()
+    })
+
+    addNodes(newNode)
+  }
+
+  return {
+    draggedData,
+    isDragOver,
+    isDragging,
+    onDragStart,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+  }
+}

src/@iconify/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./build-icons.ts"],"version":"5.7.3"}

src/@layouts/components/TransitionExpand.vue

@@ -1,92 +1,209 @@
-<!-- Thanks: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/ -->
-
 <script lang="ts">
 import { Transition } from 'vue'
+import { useDisplay } from 'vuetify'
+import VerticalNav from '@layouts/components/VerticalNav.vue'
 
 export default defineComponent({
-  name: 'TransitionExpand',
-  setup(_, { slots }) {
-    const onEnter = (element: HTMLElement) => {
-      const width = getComputedStyle(element).width
+  setup(props, { slots }) {
+    const isOverlayNavActive = ref(false)
+    const isLayoutOverlayVisible = ref(false)
+    const toggleIsOverlayNavActive = useToggle(isOverlayNavActive)
 
-      element.style.width = width
-      element.style.position = 'absolute'
-      element.style.visibility = 'hidden'
-      element.style.height = 'auto'
+    const route = useRoute()
+    const { mdAndDown } = useDisplay()
 
-      const height = getComputedStyle(element).height
+    // ℹ️ This is alternative to below two commented watcher
+    // We want to show overlay if overlay nav is visible and want to hide overlay if overlay is hidden and vice versa.
+    syncRef(isOverlayNavActive, isLayoutOverlayVisible)
 
-      element.style.width = ''
-      element.style.position = ''
-      element.style.visibility = ''
-      element.style.height = '0px'
+    const scrollDistance = ref(window.scrollY)
 
-      // Force repaint to make sure the
-      // animation is triggered correctly.
-      // eslint-disable-next-line no-unused-expressions
-      getComputedStyle(element).height
-
-      // Trigger the animation.
-      // We use `requestAnimationFrame` because we need
-      // to make sure the browser has finished
-      // painting after setting the `height`
-      // to `0` in the line above.
-      requestAnimationFrame(() => {
-        element.style.height = height
+    onMounted(() => {
+      window.addEventListener('scroll', () => {
+        scrollDistance.value = window.scrollY
       })
-    }
+    })
 
-    const onAfterEnter = (element: HTMLElement) => {
-      element.style.height = 'auto'
-    }
+    return () => {
+      // 👉 Vertical nav
+      const verticalNav = h(
+        VerticalNav,
+        { isOverlayNavActive: isOverlayNavActive.value, toggleIsOverlayNavActive },
+        {
+          'nav-header': () => slots['vertical-nav-header']?.(),
+          'before-nav-items': () => slots['before-vertical-nav-items']?.(),
+          'default': () => slots['vertical-nav-content']?.(),
+          'after-nav-items': () => slots['after-vertical-nav-items']?.(),
+        },
+      )
 
-    const onLeave = (element: HTMLElement) => {
-      const height = getComputedStyle(element).height
+      // 👉 Navbar
+      const navbar = h('header', { class: ['layout-navbar navbar-blur'] }, [
+        h(
+          'div',
+          { class: 'navbar-content-container' },
+          slots.navbar?.({
+            toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
+          }),
+        ),
+      ])
 
-      element.style.height = height
+      const main = h(
+        'main',
+        { class: 'layout-page-content' },
+        h(Transition, { name: 'fade-slide', mode: 'out-in', appear: true }, () =>
+          h('section', { class: 'page-content-container' }, slots.default?.()),
+        ),
+      )
 
-      // Force repaint to make sure the
-      // animation is triggered correctly.
-      // eslint-disable-next-line no-unused-expressions
-      getComputedStyle(element).height
+      // 👉 根据路由 meta 决定 footer 高度
+      const shouldShowFooter = !route.meta.hideFooter
 
-      requestAnimationFrame(() => {
-        element.style.height = '0px'
+      // 👉 Footer
+      const footer = h('footer', { class: 'layout-footer' }, [
+        h(
+          'div',
+          {
+            class: ['footer-content-container', !shouldShowFooter && 'footer-content-container-noheight'],
+          },
+          slots.footer?.(),
+        ),
+      ])
+
+      // 👉 Overlay
+      const layoutOverlay = h('div', {
+        class: ['layout-overlay', 'touch-none', { visible: isLayoutOverlayVisible.value }],
+        onClick: () => {
+          isLayoutOverlayVisible.value = !isLayoutOverlayVisible.value
+        },
       })
-    }
 
-    return () => h(
-      h(Transition),
-      {
-        name: 'expand',
-        onEnter,
-        onAfterEnter,
-        onLeave,
-      },
-      () => slots.default?.(),
-    )
+      return h(
+        'div',
+        {
+          class: [
+            'layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid',
+            'layout-navbar-fixed',
+            mdAndDown.value && 'layout-overlay-nav',
+            route.meta.layoutWrapperClasses,
+            scrollDistance.value && 'window-scrolled',
+          ],
+        },
+        [verticalNav, h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]), layoutOverlay],
+      )
+    }
   },
 })
 </script>
 
-<style>
-.expand-enter-active,
-.expand-leave-active {
-  overflow: hidden;
-  transition: block-size var(--expand-transition-duration, 0.25s) ease;
+<style lang="scss">
+@use '@configured-variables' as variables;
+@use '@layouts/styles/placeholders';
+@use '@layouts/styles/mixins';
+
+.layout-wrapper.layout-nav-type-vertical {
+  // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
+  block-size: 100%;
+
+  .layout-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-block-size: calc(var(--vh, 1vh) * 100);
+    transition: padding-inline-start 0.2s ease-in-out;
+    will-change: padding-inline-start;
+  }
+
+  .layout-navbar {
+    position: fixed;
+    width: calc(100vw - variables.$layout-vertical-nav-width - 1rem);
+    z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
+    inset-block-start: 0;
+
+    .navbar-content-container {
+      block-size: calc(env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height);
+    }
+
+    @at-root {
+      .layout-wrapper.layout-nav-type-vertical {
+        .layout-navbar {
+          @if variables.$layout-vertical-nav-navbar-is-contained {
+            @include mixins.boxed-content;
+          } @else {
+            .navbar-content-container {
+              @include mixins.boxed-content;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.layout-navbar-fixed .layout-navbar {
+    @extend %layout-navbar-fixed;
+  }
+
+  &.layout-navbar-hidden .layout-navbar {
+    @extend %layout-navbar-hidden;
+  }
+
+  // 👉 Footer
+  .layout-footer {
+    @include mixins.boxed-content;
+  }
+
+  // 👉 Layout overlay
+  .layout-overlay {
+    position: fixed;
+    z-index: variables.$layout-overlay-z-index;
+    background-color: rgb(0 0 0 / 60%);
+    cursor: pointer;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease-in-out;
+    will-change: transform;
+
+    &.visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  &:not(.layout-overlay-nav) .layout-content-wrapper {
+    padding-inline-start: variables.$layout-vertical-nav-width;
+  }
+
+  // Adjust right column pl when vertical nav is collapsed
+  &.layout-vertical-nav-collapsed .layout-content-wrapper {
+    padding-inline-start: variables.$layout-vertical-nav-collapsed-width;
+  }
+
+  // 👉 Content height fixed
+  &.layout-content-height-fixed {
+    .layout-content-wrapper {
+      max-block-size: calc(var(--vh) * 100);
+    }
+
+    .layout-page-content {
+      // display: flex;
+      overflow: hidden;
+
+      .page-content-container {
+        inline-size: 100%;
+
+        > :first-child {
+          max-block-size: 100%;
+          overflow-y: auto;
+        }
+      }
+    }
+  }
 }
 
-.expand-enter-from,
-.expand-leave-to {
-  block-size: 0;
-}
-</style>
-
-<style scoped>
-* {
-  backface-visibility: hidden;
-  perspective: 62.5rem;
-  transform: translateZ(0);
-  will-change: block-size;
+.layout-wrapper.layout-nav-type-vertical.layout-overlay-nav {
+  .layout-navbar {
+    width: 100%;
+  }
 }
 </style>

src/@layouts/components/VerticalNav.vue

@@ -53,15 +53,12 @@ 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>
     </div>
-    <slot name="before-nav-items">
-      <div class="vertical-nav-items-shadow" />
-    </slot>
     <slot name="nav-items" :update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled">
       <PerfectScrollbar
         tag="ul"

src/@layouts/components/VerticalNavLayout.vue

@@ -51,14 +51,23 @@ export default defineComponent({
       const main = h(
         'main',
         { class: 'layout-page-content' },
-        h(Transition, { name: 'fade-slide', mode: 'out-in', appear: true },
-          () => h('section', { class: 'page-content-container' }, slots.default?.()),
+        h(Transition, { name: 'fade-slide', mode: 'out-in', appear: true }, () =>
+          h('section', { class: 'page-content-container' }, slots.default?.()),
         ),
       )
 
+      // 👉 根据路由 meta 决定 footer 高度
+      const shouldShowFooter = !route.meta.hideFooter
+
       // 👉 Footer
       const footer = h('footer', { class: 'layout-footer' }, [
-        h('div', { class: 'footer-content-container' }, slots.footer?.()),
+        h(
+          'div',
+          {
+            class: ['footer-content-container', !shouldShowFooter && 'footer-content-container-noheight'],
+          },
+          slots.footer?.(),
+        ),
       ])
 
       // 👉 Overlay
@@ -80,11 +89,7 @@ export default defineComponent({
             scrollDistance.value && 'window-scrolled',
           ],
         },
-        [
-          verticalNav,
-          h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]),
-          layoutOverlay,
-        ],
+        [verticalNav, h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]), layoutOverlay],
       )
     }
   },
@@ -92,9 +97,16 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@use "@configured-variables" as variables;
-@use "@layouts/styles/placeholders";
-@use "@layouts/styles/mixins";
+@use '@configured-variables' as variables;
+@use '@layouts/styles/placeholders';
+@use '@layouts/styles/mixins';
+
+.layout-page-content {
+  position: relative;
+  z-index: 1;
+  margin-block-start: 0;
+  padding-block-start: 0;
+}
 
 .layout-wrapper.layout-nav-type-vertical {
   // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
@@ -111,14 +123,12 @@ export default defineComponent({
 
   .layout-navbar {
     position: fixed;
-    width: calc(100vw - variables.$layout-vertical-nav-width - 0.5rem);
     z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
+    inline-size: calc(100vw - variables.$layout-vertical-nav-width - 1rem);
     inset-block-start: 0;
 
     .navbar-content-container {
-      block-size: calc(
-        env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height
-      );
+      block-size: calc(env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height);
     }
 
     @at-root {
@@ -168,7 +178,7 @@ export default defineComponent({
   }
 
   &:not(.layout-overlay-nav) .layout-content-wrapper {
-    padding-inline-start: variables.$layout-vertical-nav-width;
+    padding-inline-start: calc(variables.$layout-vertical-nav-width + 0.5rem);
   }
 
   // Adjust right column pl when vertical nav is collapsed
@@ -200,7 +210,9 @@ export default defineComponent({
 
 .layout-wrapper.layout-nav-type-vertical.layout-overlay-nav {
   .layout-navbar {
-    width: 100%;
+    inline-size: calc(100% - 0.5rem);
+    margin-inline-start: 0.5rem;
+    padding-inline-start: 0;
   }
 }
 </style>

src/@layouts/components/VerticalNavLink.vue

@@ -7,19 +7,9 @@ defineProps<{
 </script>
 
 <template>
-  <li
-    class="nav-link"
-    :class="{ disabled: item.disable }"
-  >
-    <Component
-      :is="item.to ? 'RouterLink' : 'a'"
-      :to="item.to"
-      :href="item.href"
-    >
-      <VIcon
-        :icon="item.icon"
-        class="nav-item-icon"
-      />
+  <li class="nav-link" :class="{ disabled: item.disable }">
+    <Component :is="item.to ? 'RouterLink' : 'a'" :to="item.to" :href="item.href">
+      <VIcon :icon="item.icon as string" class="nav-item-icon" />
       <!-- 👉 Title -->
       <span class="nav-item-title">
         {{ item.title }}

src/@layouts/components/VerticalNavSectionTitle.vue

@@ -10,10 +10,7 @@ defineProps<{
   <li class="nav-section-title">
     <div class="title-wrapper">
       <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-      <span
-        class="title-text"
-        v-text="item.heading"
-      />
+      <span class="title-text" v-text="item.heading" />
       <!-- eslint-enable vue/no-v-text-v-html-on-component -->
     </div>
   </li>

src/@layouts/styles/_default-layout.scss

@@ -5,58 +5,60 @@
 @use "@configured-variables" as variables;
 
 html {
-  min-height: calc(100% + env(safe-area-inset-top));
   background: rgb(var(--v-theme-background));
+  min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
   overflow-y: overlay;
 }
 
 body {
-  overscroll-behavior-y: contain;
-  --webkit-overflow-scrolling: touch;
   background: rgb(var(--v-theme-background));
+  overscroll-behavior-y: contain;
+
+  --webkit-overflow-scrolling: touch;
 }
 
 body,
 #app,
 .v-application {
-  min-height: 100%;
+  min-block-size: 100%;
 }
 
 .layout-vertical-nav {
-  padding-top: env(safe-area-inset-top);
-  padding-bottom: env(safe-area-inset-bottom);
+  padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
 }
 
 .navbar-content-container {
-  padding-top: env(safe-area-inset-top);
+  padding-block-start: env(safe-area-inset-top);
 }
 
 .layout-page-content {
   @include mixins.boxed-content(true);
 
-  flex-grow: 1;
   overflow: hidden;
-  // TODO: Use grid gutter variable here
+  flex-grow: 1;
+
+  // TODO: Use grid gutter variable here;
   padding-block: 1.5rem;
-  padding-top: calc(env(safe-area-inset-top) + 4.25rem);
-  // display: flex;
+  padding-block-start: calc(env(safe-area-inset-top) + 4.25rem);
+
+  // display: flex;display
 
 
   .page-content-container {
-    // flex: 1;
+    // flex: 1;flex
     display: flex;
 
     & > div:first-child {
-      flex: auto;
       position: relative;
-      width: calc(100vw - variables.$layout-vertical-nav-width - 0.5rem);
+      flex: auto;
+      inline-size: calc(100vw - variables.$layout-vertical-nav-width - 1rem);
     }
   }
 }
 
-@media screen and (max-width: 1280px){
+@media screen and (width <= 1280px){
   .page-content-container > div:first-child  {
-    width: calc(100vw - 1rem) !important;
+    inline-size: calc(100vw - 1rem) !important;
   }
 }
 
@@ -65,6 +67,10 @@ body,
     block-size: variables.$layout-vertical-nav-footer-height;
   }
 
+  .footer-content-container-noheight {
+    block-size: 0 !important;
+  }
+
   .layout-footer-sticky & {
     position: sticky;
     inset-block-end: 0;

src/@layouts/styles/_global.scss

@@ -7,5 +7,5 @@
 
 html {
   box-sizing: border-box;
-  min-height: calc(100% + env(safe-area-inset-top))
+  min-height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom))
 }

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: 0rem !default;
+$layout-vertical-nav-footer-height: 3.5rem !default;
 
 // 👉 Layout overlay
 $layout-overlay-z-index: 11 !default;

src/@layouts/types.d.ts

@@ -122,8 +122,9 @@ export interface NavLink extends NavLinkProps, Partial<AclProperties> {
 
 export interface NavMenu extends NavLink {
   header: string
-  admin: boolean
   description?: string
+  admin?: boolean
+  footer?: boolean
 }
 
 // 👉 Vertical nav group

src/App.vue

@@ -1,15 +1,16 @@
 <script lang="ts" setup>
 import { useTheme } from 'vuetify'
 import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
-
-const { global: globalTheme } = useTheme()
+import { ensureRenderComplete, removeEl } from './@core/utils/dom'
 
 // 生效主题
-async function setTheme() {
-  let themeValue = localStorage.getItem('theme') || 'light'
-  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
-  globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
-}
+const { global: globalTheme } = useTheme()
+let themeValue = localStorage.getItem('theme') || 'light'
+const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
+globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
+
+// 显示状态
+const show = ref(false)
 
 // ApexCharts 全局配置
 declare global {
@@ -41,14 +42,24 @@ if (window.Apex) {
   }
 }
 
-// 页面加载时，加载当前用户数据
-onBeforeMount(async () => {
-  setTheme()
+onMounted(() => {
+  ensureRenderComplete(() => {
+    nextTick(() => {
+      setTimeout(() => {
+        // 移除加载动画
+        removeEl('#loading-bg')
+        // 将background属性从html的style中移除
+        document.documentElement.style.removeProperty('background')
+        // 显示页面
+        show.value = true
+      }, 1500)
+    })
+  })
 })
 </script>
 
 <template>
-  <VApp>
+  <VApp v-show="show">
     <RouterView />
   </VApp>
 </template>

src/ace-config.ts

@@ -10,6 +10,8 @@ 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'
@@ -38,6 +40,8 @@ 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)
@@ -45,6 +49,7 @@ 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)
@@ -59,5 +64,6 @@ 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,85 @@
+export const storageOptions = [
+  {
+    title: '本地',
+    value: 'local',
+    icon: 'mdi-folder-multiple-outline',
+    remote: false,
+  },
+  {
+    title: '阿里云盘',
+    value: 'alipan',
+    icon: 'mdi-cloud-outline',
+    remote: true,
+  },
+  {
+    title: '115网盘',
+    value: 'u115',
+    icon: 'mdi-cloud-outline',
+    remote: true,
+  },
+  {
+    title: 'RClone',
+    value: 'rclone',
+    icon: 'mdi-cloud-outline',
+    remote: true,
+  },
+  {
+    title: 'AList',
+    value: 'alist',
+    icon: 'mdi-cloud-outline',
+    remote: true,
+  },
+]
+
+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>)
+
+export const transferTypeOptions = [
+  { title: '复制', value: 'copy' },
+  { title: '移动', value: 'move' },
+  { title: '硬链接', value: 'link' },
+  { title: '软链接', value: 'softlink' },
+]

src/api/index.ts

@@ -1,6 +1,6 @@
 import axios from 'axios'
 import router from '@/router'
-import store from '@/store'
+import { useAuthStore } from '@/stores'
 
 // 创建axios实例
 const api = axios.create({
@@ -9,10 +9,12 @@ const api = axios.create({
 
 // 添加请求拦截器
 api.interceptors.request.use(config => {
+  // 认证 Store
+  const authStore = useAuthStore()
   // 在请求头中添加token
-  const token = store.state.auth.token
-  if (token) config.headers.Authorization = `Bearer ${token}`
-
+  if (authStore.token) {
+    config.headers.Authorization = `Bearer ${authStore.token}`
+  }
   return config
 })
 
@@ -26,8 +28,10 @@ api.interceptors.response.use(
       // 请求超时
       return Promise.reject(new Error(error))
     } else if (error.response.status === 403) {
+      // 认证 Store
+      const authStore = useAuthStore()
       // 清除登录状态信息
-      store.dispatch('auth/logout')
+      authStore.logout()
       // token验证失败，跳转到登录页面
       router.push('/login')
     }
@@ -37,3 +41,13 @@ api.interceptors.response.use(
 )
 
 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/api/types.ts

@@ -1,5 +1,6 @@
 // 订阅
 export interface Subscribe {
+  // 订阅ID
   id: number
   // 订阅名称
   name: string
@@ -13,6 +14,10 @@ export interface Subscribe {
   tmdbid: number
   // 豆瓣ID
   doubanid?: string
+  // Bangumi ID
+  bangumiid?: string
+  // 其它媒体ID
+  mediaid?: string
   // 季号
   season?: number
   // 海报
@@ -43,7 +48,7 @@ export interface Subscribe {
   lack_episode?: number
   // 附加信息
   note?: string
-  // 状态：N-新建， R-订阅中
+  // 状态：N-新建 R-订阅中 P-待定 S-暂停
   state: string
   // 最后更新时间
   last_update: string
@@ -65,12 +70,88 @@ export interface Subscribe {
   show_edit_dialog: boolean
   // 编辑框打开状态
   page_open?: boolean
+  // 自定义识别词
+  custom_words?: string
+  // 自定义媒体类别
+  media_category?: string
+  // 过滤规则组
+  filter_groups?: string[]
+  // 下载器
+  downloader?: string
+  // 自定义剧集组
+  episode_group?: string
+}
+
+// 订阅分享
+export interface SubscribeShare {
+  // 分享ID
+  id?: number
+  // 订阅ID
+  subscribe_id?: number
+  // 分享标题
+  share_title?: string
+  // 分享说明
+  share_comment?: string
+  // 分享人
+  share_user?: string
+  // 分享人唯一ID
+  share_uid?: string
+  // 订阅名称
+  name?: string
+  // 订阅年份
+  year?: string
+  // 订阅类型 电影/电视剧
+  type?: string
+  // 搜索关键字
+  keyword?: string
+  // TMDB ID
+  tmdbid?: number
+  // 豆瓣ID
+  doubanid?: string
+  // 季号
+  season?: number
+  // 海报
+  poster?: string
+  // 背景图
+  backdrop?: string
+  // 评分
+  vote?: number
+  // 描述
+  description?: string
+  // 过滤规则
+  filter?: string
+  // 包含
+  include?: string
+  // 排除
+  exclude?: string
+  // 质量
+  quality?: string
+  // 分辨率
+  resolution?: string
+  // 特效
+  effect?: string
+  // 总集数
+  total_episode?: number
+  // 时间
+  date?: string
+  // 自定义识别词
+  custom_words?: string
+  // 自定义媒体类别
+  media_category?: string
+  // 复用次数
+  count?: number
+  // 自定义剧集组
+  episode_group?: string
 }
 
 // 历史记录
 export interface TransferHistory {
   // ID
   id: number
+  // 源存储
+  src_storage?: string
+  // 目标存储
+  dest_storage?: string
   // 源目录
   src?: string
   // 目的目录
@@ -107,13 +188,15 @@ export interface TransferHistory {
   errmsg?: string
   // 日期
   date?: string
+  // 源文件项
+  src_fileitem?: FileItem
 }
 
 // 媒体信息
 export interface MediaInfo {
   // 来源：themoviedb、douban、bangumi
   source?: string
-  // 类型 电影、电视剧
+  // 类型 电影、电视剧、合集
   type?: string
   // 媒体标题
   title?: string
@@ -133,6 +216,12 @@ export interface MediaInfo {
   douban_id?: string
   // Bangumi ID
   bangumi_id?: string
+  // 合集ID
+  collection_id?: number
+  // 其它媒体ID前缀
+  mediaid_prefix?: string
+  // 其它媒体ID值
+  media_id?: string
   // 媒体原语种
   original_language?: string
   // 媒体原发行标题
@@ -203,6 +292,26 @@ export interface MediaInfo {
   next_episode_to_air?: object
   // 别名
   names?: string[]
+  // 剧集组
+  episode_group?: string
+}
+
+// 季信息
+export interface MediaSeason {
+  // 上映日期
+  air_date?: string
+  // 总集数
+  episode_count?: number
+  // 季名称
+  name?: string
+  // 描述
+  overview?: string
+  // 海报
+  poster_path?: string
+  // 季号
+  season_number?: number
+  // 评分
+  vote_average?: number
 }
 
 // TMDB季信息
@@ -318,6 +427,8 @@ export interface Site {
   pri?: number
   // RSS地址
   rss?: string
+  // 下载器
+  downloader: string
   // Cookie
   cookie?: string
   // ApiKey
@@ -366,6 +477,48 @@ export interface SiteStatistic {
   note?: string
 }
 
+// 站点用户数据
+export interface SiteUserData {
+  // 站点域名
+  domain?: string
+  // 用户名
+  username?: string
+  // 用户ID
+  userid?: number
+  // 用户等级
+  user_level?: string
+  // 加入时间
+  join_at?: string
+  // 积分
+  bonus?: number // 默认为 0.0
+  // 上传量
+  upload?: number // 默认为 0
+  // 下载量
+  download?: number // 默认为 0
+  // 分享率
+  ratio?: number // 默认为 0
+  // 做种数
+  seeding?: number // 默认为 0
+  // 下载数
+  leeching?: number // 默认为 0
+  // 做种体积
+  seeding_size?: number // 默认为 0
+  // 下载体积
+  leeching_size?: number // 默认为 0
+  // 做种人数, 种子大小
+  seeding_info?: any[] // 默认为空数组
+  // 未读消息
+  message_unread?: number // 默认为 0
+  // 未读消息内容
+  message_unread_contents?: any[] // 默认为空数组
+  // 错误信息
+  err_msg?: string | null // 默认为 null
+  // 更新日期
+  updated_day?: string
+  // 更新时间
+  updated_time?: string
+}
+
 // 正在下载
 export interface DownloadingInfo {
   // HASH
@@ -394,6 +547,8 @@ export interface DownloadingInfo {
   userid?: string
   // 下载用户名称
   username?: string
+  // 剩余时间
+  left_time?: string
 }
 
 // 缺失剧集信息
@@ -492,6 +647,8 @@ export interface TorrentInfo {
   site_proxy: boolean
   // 站点优先级
   site_order: number
+  // 站点下载器
+  site_downloader?: string
   // 种子名称
   title?: string
   // 种子副标题
@@ -642,6 +799,12 @@ export interface User {
   avatar: string
   // 是否开启双重验证
   is_otp: boolean
+  // 用户权限 json
+  permissions: { [key: string]: any }
+  // 用户个性化设置 json
+  settings: { [key: string]: string | null }
+  // 昵称
+  nickname?: string
 }
 
 // 存储空间
@@ -741,6 +904,8 @@ export interface EndPoints {
 
 // 文件浏览项目
 export interface FileItem {
+  // 存储
+  storage: string
   // 类型 dir/file
   type: string
   // 文件名
@@ -843,22 +1008,298 @@ export interface SystemNotification {
   date: string
 }
 
-// 下载目录/媒体库目录
-export interface MediaDirectory {
-  // 类型 download/library
-  type?: string
-  // 别名
-  name?: string
-  // 路径
-  path?: string
-  // 媒体类型 电影/电视剧
-  media_type?: string
-  // 媒体类别 动画电影/国产剧
-  category?: string
-  // 刮削媒体信息
-  scrape?: boolean
-  // 自动二级分类，未指定类别时自动分类
-  auto_category?: boolean
-  // 优先级
-  priority?: number
+// 下载器配置
+export interface DownloaderConf {
+  // 名称
+  name: string
+  // 类型 qbittorrent/transmission
+  type: string
+  // 是否默认
+  default: boolean
+  // 配置
+  config: { [key: string]: any }
+  // 是否启用
+  enabled: boolean
+}
+
+// 通知配置
+export interface NotificationConf {
+  // 名称
+  name: string
+  // 类型 telegram/wechat/vocechat/synologychat
+  type: string
+  // 配置
+  config: { [key: string]: any }
+  // 场景开关
+  switchs?: string[]
+  // 是否启用
+  enabled: boolean
+}
+
+// 通知场景开关配置
+export interface NotificationSwitchConf {
+  // 场景名称
+  type: string
+  // 通知范围 all/user/admin
+  action: string
+}
+
+// 存储配置
+export interface StorageConf {
+  // 名称
+  name: string
+  // 类型 local/alipan/u115/rclone
+  type: string
+  // 配置
+  config?: { [key: string]: any }
+}
+
+// 媒体服务器配置
+export interface MediaServerConf {
+  // 名称
+  name: string
+  // 类型 emby/jellyfin/plex
+  type: string
+  // 配置
+  config: { [key: string]: any }
+  // 是否启用
+  enabled: boolean
+  // 同步媒体体库列表
+  sync_libraries?: string[]
+}
+
+// 文件整理目录配置
+export interface TransferDirectoryConf {
+  // 名称
+  name: string
+  // 优先级
+  priority: number
+  // 存储
+  storage: string
+  // 下载目录
+  download_path?: string
+  // 适用媒体类型
+  media_type?: string
+  // 适用媒体类别
+  media_category?: string
+  // 下载类型子目录
+  download_type_folder?: boolean
+  // 下载类别子目录
+  download_category_folder?: boolean
+  // 监控方式 downloader/monitor，None为不监控
+  monitor_type?: string
+  // 监控模式 fast/compatibility
+  monitor_mode?: string
+  // 整理方式 move/copy/link/softlink
+  transfer_type: string
+  // 文件覆盖模式 always/size/never/latest
+  overwrite_mode?: string
+  // 整理到媒体库目录
+  library_path?: string
+  // 媒体库目录存储
+  library_storage?: string
+  // 智能重命名
+  renaming?: boolean
+  // 刮削
+  scraping?: boolean
+  // 媒体库类型子目录
+  library_type_folder?: boolean
+  // 媒体库类别子目录
+  library_category_folder?: boolean
+  // 是否发送通知
+  notify?: boolean
+}
+
+// 自定义规则项
+export interface CustomRule {
+  // 规则ID
+  id: string
+  // 名称
+  name: string
+  // 包含
+  include?: string
+  // 排除
+  exclude?: string
+  // 大小范围
+  size_range?: string
+  // 最少做种人数
+  seeders?: string
+  // 发布时间
+  publish_time?: string
+}
+
+// 过滤规则组
+export interface FilterRuleGroup {
+  // 名称
+  name: string
+  // 规则串
+  rule_string?: string
+  // 适用类媒体类型 None-全部 电影/电视剧
+  media_type?: string
+  // # 适用媒体类别 None-全部 对应二级分类
+  category?: string
+}
+
+// 订阅下载文件详情
+export interface SubscribeDownloadFileInfo {
+  // 种子名称
+  torrent_title?: string
+  // 站点名称
+  site_name?: string
+  // 下载器
+  downloader?: string
+  // hash
+  hash?: string
+  // 文件路径
+  file_path?: string
+}
+
+// 订阅媒体库文件详情
+export interface SubscribeLibraryFileInfo {
+  // 存储
+  storage?: string
+  // 文件路径
+  file_path?: string
+}
+
+// 订阅集详情
+export interface SubscribeEpisodeInfo {
+  // 标题
+  title?: string
+  // 描述
+  description?: string
+  // 背景图
+  backdrop?: string
+  // 下载文件信息
+  download?: SubscribeDownloadFileInfo[]
+  // 媒体库文件信息
+  library?: SubscribeLibraryFileInfo[]
+}
+
+// 订阅详情
+export interface SubscrbieInfo {
+  // 订阅信息
+  subscribe: Subscribe
+  // 集信息 {集号: {download: 文件路径，library: 文件路径, backdrop: url, title: 标题, description: 描述}}
+  episodes: Record<number, SubscribeEpisodeInfo>
+}
+
+// 整理表单
+export interface TransferForm {
+  // 文件项
+  fileitem: FileItem
+  // 历史ID
+  logid: number
+  // 目标存储
+  target_storage: string
+  // 目标路径
+  target_path: string
+  // TMDB ID
+  tmdbid?: number
+  // 豆瓣 ID
+  doubanid?: string
+  // 季号
+  season?: number
+  // 类型
+  type_name?: string
+  // 整理方式
+  transfer_type: string
+  // 自定义格式
+  episode_format?: string
+  // 指定集数
+  episode_detail?: string
+  // 指定PART
+  episode_part?: string
+  // 集数偏移
+  episode_offset?: string
+  // 最小文件大小
+  min_filesize: number
+  // 刮削
+  scrape: boolean
+  // 复用历史识别信息
+  from_history: boolean
+  // 媒体库类型子目录
+  library_type_folder?: boolean
+  // 媒体库类别子目录
+  library_category_folder?: boolean
+  // 剧集组编号
+  episode_group?: string
+}
+
+// 整理队列
+export interface TransferQueue {
+  // 媒体信息
+  media: MediaInfo
+  // 季
+  season?: number
+  // 任务列表
+  tasks: {
+    // 文件项
+    fileitem: FileItem
+    // 元数据
+    meta: MetaInfo
+    // 状态
+    state: string
+  }[]
+}
+
+// 探索的数据源
+export interface DiscoverSource {
+  // 数据源名称
+  name: string
+  // 媒体ID的前缀，不含:
+  mediaid_prefix: string
+  // 媒体数据源API地址
+  api_path: string
+  // 过滤参数
+  filter_params: { [key: string]: any }
+  // 过滤参数UI配置
+  filter_ui: RenderProps[]
+  // UI依赖关系字典
+  depends?: { [key: string]: string[] }
+}
+
+// 推荐的数据源
+export interface RecommendSource {
+  // 数据源名称
+  name: string
+  // 媒体数据源API地址
+  api_path: string
+  // 类型
+  type: string
+}
+
+// 站点资源分类
+export interface SiteCategory {
+  id: number
+  cat: string
+  desc: string
+}
+
+// 工作流
+export interface Workflow {
+  // 工作流ID
+  id?: string
+  // 工作流名称
+  name?: string
+  // 工作流描述
+  description?: string
+  // 定时器
+  timer?: string
+  // 状态
+  state?: string
+  // 当前执行动作
+  current_action?: string
+  // 任务执行结果
+  result?: string
+  // 已执行次数
+  run_count?: number
+  // 动作列表
+  actions?: any[]
+  // 动作流
+  flows?: any[]
+  // 创建时间
+  add_time?: string
+  // 最后执行时间
+  last_time?: string
 }

src/assets/images/logos/tmdb_title.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 273.42 35.52"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" y1="17.76" x2="273.42" y2="17.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#90cea1"/><stop offset="0.56" stop-color="#3cbec9"/><stop offset="1" stop-color="#00b3e5"/></linearGradient></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M191.85,35.37h63.9A17.67,17.67,0,0,0,273.42,17.7h0A17.67,17.67,0,0,0,255.75,0h-63.9A17.67,17.67,0,0,0,174.18,17.7h0A17.67,17.67,0,0,0,191.85,35.37ZM10.1,35.42h7.8V6.92H28V0H0v6.9H10.1Zm28.1,0H46V8.25h.1L55.05,35.4h6L70.3,8.25h.1V35.4h7.8V0H66.45l-8.2,23.1h-.1L50,0H38.2ZM89.14.12h11.7a33.56,33.56,0,0,1,8.08,1,18.52,18.52,0,0,1,6.67,3.08,15.09,15.09,0,0,1,4.53,5.52,18.5,18.5,0,0,1,1.67,8.25,16.91,16.91,0,0,1-1.62,7.58,16.3,16.3,0,0,1-4.38,5.5,19.24,19.24,0,0,1-6.35,3.37,24.53,24.53,0,0,1-7.55,1.15H89.14Zm7.8,28.2h4a21.66,21.66,0,0,0,5-.55A10.58,10.58,0,0,0,110,26a8.73,8.73,0,0,0,2.68-3.35,11.9,11.9,0,0,0,1-5.08,9.87,9.87,0,0,0-1-4.52,9.17,9.17,0,0,0-2.63-3.18A11.61,11.61,0,0,0,106.22,8a17.06,17.06,0,0,0-4.68-.63h-4.6ZM133.09.12h13.2a32.87,32.87,0,0,1,4.63.33,12.66,12.66,0,0,1,4.17,1.3,7.94,7.94,0,0,1,3,2.72,8.34,8.34,0,0,1,1.15,4.65,7.48,7.48,0,0,1-1.67,5,9.13,9.13,0,0,1-4.43,2.82V17a10.28,10.28,0,0,1,3.18,1,8.51,8.51,0,0,1,2.45,1.85,7.79,7.79,0,0,1,1.57,2.62,9.16,9.16,0,0,1,.55,3.2,8.52,8.52,0,0,1-1.2,4.68,9.32,9.32,0,0,1-3.1,3A13.38,13.38,0,0,1,152.32,35a22.5,22.5,0,0,1-4.73.5h-14.5Zm7.8,14.15h5.65a7.65,7.65,0,0,0,1.78-.2,4.78,4.78,0,0,0,1.57-.65,3.43,3.43,0,0,0,1.13-1.2,3.63,3.63,0,0,0,.42-1.8A3.3,3.3,0,0,0,151,8.6a3.42,3.42,0,0,0-1.23-1.13A6.07,6.07,0,0,0,148,6.9a9.9,9.9,0,0,0-1.85-.18h-5.3Zm0,14.65h7a8.27,8.27,0,0,0,1.83-.2,4.67,4.67,0,0,0,1.67-.7,3.93,3.93,0,0,0,1.23-1.3,3.8,3.8,0,0,0,.47-1.95,3.16,3.16,0,0,0-.62-2,4,4,0,0,0-1.58-1.18,8.23,8.23,0,0,0-2-.55,15.12,15.12,0,0,0-2.05-.15h-5.9Z"/></g></g></svg>

src/assets/images/misc/alist.svg

@@ -0,0 +1,10 @@
+<svg width="1252" height="1252" xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <g>
+  <g id="#70c6beff">
+   <path id="svg_2" d="m634.37,138.38c11.88,-1.36 24.25,1.3 34.18,8.09c14.96,9.66 25.55,24.41 34.49,39.51c40.59,68.03 81.45,135.91 122.02,203.96c54.02,90.99 108.06,181.97 161.94,273.06c37.28,63 74.65,125.96 112.18,188.82c24.72,41.99 50.21,83.54 73.84,126.16c10.18,17.84 15.77,38.44 14.93,59.03c-0.59,15.92 -3.48,32.28 -11.84,46.08c-11.73,19.46 -31.39,33.2 -52.71,40.36c-11.37,4.09 -23.3,6.87 -35.43,6.89c-132.32,-0.05 -264.64,0.04 -396.95,0.03c-11.38,-0.29 -22.95,-1.6 -33.63,-5.72c-7.81,-3.33 -15.5,-7.43 -21.61,-13.42c-10.43,-10.32 -17.19,-24.96 -15.38,-39.83c0.94,-10.39 3.48,-20.64 7.76,-30.16c4.15,-9.77 9.99,-18.67 15.06,-27.97c22.13,-39.47 45.31,-78.35 69.42,-116.65c7.72,-12.05 14.44,-25.07 25.12,-34.87c11.35,-10.39 25.6,-18.54 41.21,-19.6c12.55,-0.52 24.89,3.82 35.35,10.55c11.8,6.92 21.09,18.44 24.2,31.88c4.49,17.01 -0.34,34.88 -7.55,50.42c-8.09,17.65 -19.62,33.67 -25.81,52.18c-1.13,4.21 -2.66,9.52 0.48,13.23c3.19,3 7.62,4.18 11.77,5.22c12,2.67 24.38,1.98 36.59,2.06c45,-0.01 90,0 135,0c8.91,-0.15 17.83,0.3 26.74,-0.22c6.43,-0.74 13.44,-1.79 18.44,-6.28c3.3,-2.92 3.71,-7.85 2.46,-11.85c-2.74,-8.86 -7.46,-16.93 -12.12,-24.89c-119.99,-204.91 -239.31,-410.22 -360.56,-614.4c-3.96,-6.56 -7.36,-13.68 -13.03,-18.98c-2.8,-2.69 -6.95,-4.22 -10.77,-3.11c-3.25,1.17 -5.45,4.03 -7.61,6.57c-5.34,6.81 -10.12,14.06 -14.51,21.52c-20.89,33.95 -40.88,68.44 -61.35,102.64c-117.9,198.43 -235.82,396.85 -353.71,595.29c-7.31,13.46 -15.09,26.67 -23.57,39.43c-7.45,10.96 -16.49,21.23 -28.14,27.83c-13.73,7.94 -30.69,11.09 -46.08,6.54c-11.23,-3.47 -22.09,-9.12 -30.13,-17.84c-10.18,-10.08 -14.69,-24.83 -14.17,-38.94c0.52,-14.86 5.49,-29.34 12.98,-42.1c71.58,-121.59 143.62,-242.92 215.93,-364.09c37.2,-62.8 74.23,-125.69 111.64,-188.36c37.84,-63.5 75.77,-126.94 113.44,-190.54c21.02,-35.82 42.19,-71.56 64.28,-106.74c6.79,-11.15 15.58,-21.15 26.16,-28.85c8.68,-5.92 18.42,-11 29.05,-11.94z" fill="#70c6be"/>
+  </g>
+  <g id="#1ba0d8ff">
+   <path id="svg_3" d="m628.35,608.38c17.83,-2.87 36.72,1.39 51.5,11.78c11.22,8.66 19.01,21.64 21.26,35.65c1.53,10.68 0.49,21.75 -3.44,31.84c-3.02,8.73 -7.35,16.94 -12.17,24.81c-68.76,115.58 -137.5,231.17 -206.27,346.75c-8.8,14.47 -16.82,29.47 -26.96,43.07c-7.37,9.11 -16.58,16.85 -27.21,21.89c-22.47,11.97 -51.79,4.67 -68.88,-13.33c-8.66,-8.69 -13.74,-20.63 -14.4,-32.84c-0.98,-12.64 1.81,-25.42 7.53,-36.69c5.03,-10.96 10.98,-21.45 17.19,-31.77c30.22,-50.84 60.17,-101.84 90.3,-152.73c41.24,-69.98 83.16,-139.55 124.66,-209.37c4.41,-7.94 9.91,-15.26 16.09,-21.9c8.33,-8.46 18.9,-15.3 30.8,-17.16z" fill="#1ba0d8"/>
+  </g>
+ </g>
+</svg>

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

@@ -2,15 +2,14 @@
 import type { Axios } from 'axios'
 import FileList from './filebrowser/FileList.vue'
 import FileToolbar from './filebrowser/FileToolbar.vue'
-import type { EndPoints, FileItem } from '@/api/types'
-import api from '@/api'
-import AliyunAuthDialog from './dialog/AliyunAuthDialog.vue'
-import U115AuthDialog from './dialog/U115AuthDialog.vue'
-import { isNullOrEmptyObject } from '@/@core/utils'
+import FileNavigator from './filebrowser/FileNavigator.vue'
+import type { EndPoints, FileItem, StorageConf } from '@/api/types'
+import { storageOptions } from '@/api/constants'
+import { useDisplay } from 'vuetify'
 
 // 输入参数
 const props = defineProps({
-  storages: String,
+  storages: Array as PropType<StorageConf[]>,
   tree: Boolean,
   endpoints: Object as PropType<EndPoints>,
   axios: {
@@ -22,49 +21,107 @@ const props = defineProps({
     type: Object as PropType<FileItem>,
     required: true,
   },
-  itemstack: Array as PropType<FileItem[]>,
+  itemstack: {
+    type: Array as PropType<FileItem[]>,
+    default: () => [],
+  },
 })
 
 // 对外事件
 const emit = defineEmits(['pathchanged'])
 
-const availableStorages = [
-  {
-    name: '本地',
-    code: 'local',
-    icon: 'mdi-folder-multiple-outline',
-  },
-  {
-    name: '阿里云盘',
-    code: 'aliyun',
-    icon: 'mdi-cloud-outline',
-  },
-  {
-    name: '115网盘',
-    code: 'u115',
-    icon: 'mdi-cloud-outline',
-  },
-]
+// 显示器宽度
+const display = useDisplay()
+
+// APP
+const appMode = inject('pwaMode') && display.mdAndDown.value
 
 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',
 }
 
@@ -76,19 +133,14 @@ const activeStorage = ref('local')
 const refreshPending = ref(false)
 // 排序
 const sort = ref('name')
-// 阿里云盘认证对话框
-const aliyunAuthDialog = ref(false)
-// 阿里云盘用户信息
-const aliyunUserInfo = ref<{ [key: string]: any }>({})
-// 115网盘认证对话框
-const u115AuthDialog = ref(false)
-// 115网盘用户信息
-const u115UserInfo = ref<{ [key: string]: any }>({})
+
+// 是否显示目录树
+const showDirTree = ref(false)
 
 // 计算属性
 const storagesArray = computed(() => {
-  const storageCodes = props.storages?.split(',')
-  return availableStorages.filter(item => storageCodes?.includes(item.code))
+  const storageCodes = props.storages?.map(item => item.type)
+  return storageOptions.filter(item => storageCodes?.includes(item.value))
 })
 
 // 方法
@@ -97,47 +149,10 @@ function loadingChanged(loading: number) {
   else if (loading > 0) loading--
 }
 
-// 查询阿里云
-async function loadAliyunUserInfo() {
-  try {
-    const result: { [key: string]: any } = await api.get('aliyun/userinfo')
-    if (result.success) {
-      aliyunUserInfo.value = result
-    }
-  } catch (error) {
-    console.log(error)
-  }
-}
-
-// 查询115
-async function loadU115UserInfo() {
-  try {
-    const result: { [key: string]: any } = await api.get('u115/storage')
-    if (result.success) {
-      u115UserInfo.value = result
-    }
-  } catch (error) {
-    console.log(error)
-  }
-}
-
 // 存储切换
 async function storageChanged(storage: string) {
-  if (storage == 'aliyun') {
-    await loadAliyunUserInfo()
-    if (isNullOrEmptyObject(aliyunUserInfo.value)) {
-      aliyunAuthDialog.value = true
-      return
-    }
-  } else if (storage == 'u115') {
-    await loadU115UserInfo()
-    if (isNullOrEmptyObject(u115UserInfo.value)) {
-      u115AuthDialog.value = true
-      return
-    }
-  }
   activeStorage.value = storage
-  emit('pathchanged', { path: '/', fileid: 'root' })
+  emit('pathchanged', { storage: storage, path: '/', fileid: 'root' })
 }
 
 // 路径变化
@@ -151,21 +166,36 @@ function sortChanged(s: string) {
   refreshPending.value = true
 }
 
-// aliyun认证完成
-function aliyunAuthDone() {
-  aliyunAuthDialog.value = false
-  activeStorage.value = 'aliyun'
+// 切换目录树
+function switchDirTree(state: boolean) {
+  showDirTree.value = state
 }
 
-// u115认证完成
-function u115AuthDone() {
-  u115AuthDialog.value = false
-  activeStorage.value = 'u115'
+// 文件列表
+const fileListItems = ref<FileItem[]>([])
+
+// 文件列表数据更新
+function fileListUpdated(items: FileItem[]) {
+  fileListItems.value = items
 }
+
+// 外层DIV大小控制
+const scrollStyle = computed(() => {
+  return appMode
+    ? 'height: calc(100vh - 10rem - env(safe-area-inset-bottom) - 6rem)'
+    : 'height: calc(100vh - 10rem - env(safe-area-inset-bottom)'
+})
+
+// 文件列表大小限制
+const fileListStyle = computed(() => {
+  return appMode
+    ? 'height: calc(100vh - 14rem - env(safe-area-inset-bottom) - 6rem)'
+    : 'height: calc(100vh - 14rem - env(safe-area-inset-bottom)'
+})
 </script>
 
 <template>
-  <VCard class="mx-auto" :loading="loading > 0">
+  <div class="mx-auto" :loading="loading > 0">
     <div v-if="activeStorage && item">
       <FileToolbar
         :item="item"
@@ -179,27 +209,36 @@ function u115AuthDone() {
         @foldercreated="refreshPending = true"
         @sortchanged="sortChanged"
       />
-      <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 class="flex" :style="scrollStyle">
+        <FileNavigator
+          v-if="showDirTree"
+          :storage="activeStorage"
+          :currentPath="item.path"
+          :items="fileListItems"
+          :endpoints="endpoints"
+          :axios="axios"
+          @navigate="pathChanged"
+        />
+        <FileList
+          class="flex-grow"
+          :item="item"
+          :storage="activeStorage"
+          :icons="fileIcons"
+          :endpoints="endpoints"
+          :axios="axios"
+          :refreshpending="refreshPending"
+          :sort="sort"
+          :listStyle="fileListStyle"
+          :showTree="showDirTree"
+          @pathchanged="pathChanged"
+          @loading="loadingChanged"
+          @refreshed="refreshPending = false"
+          @filedeleted="refreshPending = true"
+          @renamed="refreshPending = true"
+          @items-updated="fileListUpdated"
+          @switch-tree="switchDirTree"
+        />
+      </div>
     </div>
-  </VCard>
-  <AliyunAuthDialog
-    v-if="aliyunAuthDialog"
-    v-model="aliyunAuthDialog"
-    @close="aliyunAuthDialog = false"
-    @done="aliyunAuthDone"
-  />
-  <U115AuthDialog v-if="u115AuthDialog" v-model="u115AuthDialog" @close="u115AuthDialog = false" @done="u115AuthDone" />
+  </div>
 </template>

src/components/NoDataFound.vue

@@ -1,31 +1,244 @@
 <script setup lang="ts">
-import image from '@images/no-data.svg'
-
 const props = defineProps<Props>()
 
 interface Props {
   errorCode?: string
   errorTitle?: string
   errorDescription?: string
+  icon?: string
+  iconColor?: string
 }
 </script>
 
 <template>
-  <VEmptyState :image="image" size="250">
-    <template #title>
-      <div class="mt-8 text-2xl">
-        {{ props.errorTitle }}
+  <div class="no-data-container">
+    <!-- 图标容器 -->
+    <div class="icon-wrapper">
+      <div class="icon-glow"></div>
+      <div class="icon-container">
+        <VIcon
+          :icon="props.icon || 'mdi-file-search-outline'"
+          :color="props.iconColor || 'white'"
+          size="48"
+          class="main-icon"
+        />
       </div>
-    </template>
+      <div class="pulse-ring"></div>
+    </div>
 
-    <template #text>
-      <div class="text-subtitle mt-3">
-        {{ props.errorDescription }}
-      </div>
-    </template>
+    <!-- 标题 -->
+    <div class="error-title">
+      {{ props.errorTitle || '暂无数据' }}
+    </div>
 
-    <template #actions>
+    <!-- 描述 -->
+    <div class="error-description">
+      {{ props.errorDescription || '没有找到相关内容' }}
+    </div>
+
+    <!-- 按钮插槽 -->
+    <div class="actions-container">
       <slot name="button" />
-    </template>
-  </VEmptyState>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.no-data-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  min-block-size: 300px;
+  padding-block: 3rem;
+  padding-inline: 1rem;
+  text-align: center;
+}
+
+/* 图标样式 */
+.icon-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 100px;
+  inline-size: 100px;
+  margin-block: 0 2rem;
+  margin-inline: auto;
+}
+
+.icon-glow {
+  position: absolute;
+  border-radius: 50%;
+  animation: pulse 3s infinite ease-in-out;
+  background: radial-gradient(circle, rgba(var(--v-theme-primary), 0.8) 0%, rgba(var(--v-theme-primary), 0) 70%);
+  block-size: 80px;
+  filter: blur(15px);
+  inline-size: 80px;
+  opacity: 0.8;
+}
+
+.icon-container {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.9), rgba(var(--v-theme-secondary), 0.8));
+  block-size: 80px;
+  inline-size: 80px;
+}
+
+.main-icon {
+  animation: slight-bounce 3s infinite ease-in-out;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 30%));
+}
+
+.pulse-ring {
+  position: absolute;
+  z-index: 1;
+  border: 2px solid rgba(var(--v-theme-primary), 0.5);
+  border-radius: 50%;
+  animation: ripple 2s infinite ease-out;
+  block-size: 100px;
+  inline-size: 100px;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  opacity: 0;
+  transform: translate(-50%, -50%);
+}
+
+.pulse-ring::before {
+  position: absolute;
+  border: 2px solid rgba(var(--v-theme-primary), 0.3);
+  border-radius: 50%;
+  animation: ripple 2s infinite 0.5s ease-out;
+  block-size: 85px;
+  content: '';
+  inline-size: 85px;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes ripple {
+  0% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1.5);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.5;
+    transform: scale(0.8);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
+
+@keyframes slight-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+/* 文字样式 */
+.error-title {
+  position: relative;
+  color: rgba(var(--v-theme-on-surface), 0.95);
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin-block-end: 0.75rem;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 5%);
+}
+
+.error-title::after {
+  display: block;
+  border-radius: 3px;
+  background: linear-gradient(90deg, rgba(var(--v-theme-primary), 0.8), rgba(var(--v-theme-primary), 0.2));
+  block-size: 3px;
+  content: '';
+  inline-size: 40px;
+  margin-block: 0.5rem 0;
+  margin-inline: auto;
+}
+
+.error-description {
+  color: rgba(var(--v-theme-on-surface), 0.75);
+  font-size: 1.1rem;
+  line-height: 1.6;
+  margin-block-end: 1.5rem;
+  margin-inline: auto;
+  max-inline-size: 80%;
+}
+
+.actions-container {
+  margin-block-start: 1.5rem;
+}
+
+.actions-container :deep(.v-btn) {
+  transform: translateY(0);
+  transition: transform 0.2s ease;
+}
+
+.actions-container :deep(.v-btn:hover) {
+  transform: translateY(-2px);
+}
+
+/* 响应式调整 */
+@media (width <= 600px) {
+  .no-data-container {
+    padding-block: 2rem;
+    padding-inline: 1rem;
+  }
+
+  .icon-wrapper {
+    block-size: 80px;
+    inline-size: 80px;
+    margin-block-end: 1.5rem;
+  }
+
+  .icon-container {
+    block-size: 70px;
+    inline-size: 70px;
+  }
+
+  .icon-glow {
+    block-size: 70px;
+    inline-size: 70px;
+  }
+
+  .pulse-ring,
+  .pulse-ring::before {
+    block-size: 80px;
+    inline-size: 80px;
+  }
+
+  .error-title {
+    font-size: 1.4rem;
+  }
+
+  .error-description {
+    font-size: 0.95rem;
+    max-inline-size: 90%;
+  }
+}
+</style>

src/components/cards/BackdropCard.vue

@@ -37,7 +37,7 @@ const getImgUrl = computed(() => {
         :width="props.width"
         class="ring-gray-500"
         :class="{
-          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+          'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
           'ring-1': imageLoaded,
         }"
         @click="goPlay"
@@ -73,9 +73,3 @@ const getImgUrl = computed(() => {
     </template>
   </VHover>
 </template>
-
-<style lang="scss">
-.text-shadow {
-  text-shadow: 1px 1px #777;
-}
-</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-es'
+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.name }}</h5>
+          <div class="text-body-1 mb-3">{{ props.rule.id }}</div>
+        </div>
+        <VImg :src="filter_svg" cover class="mt-7" max-width="3rem" />
+      </VCardText>
+    </VCard>
+    <VDialog v-if="ruleInfoDialog" 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/1-10"
+                  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

@@ -1,12 +1,14 @@
 <script lang="ts" setup>
-import type { MediaDirectory } from '@/api/types'
-import { VTextField } from 'vuetify/lib/components/index.mjs'
+import type { TransferDirectoryConf } from '@/api/types'
+import api from '@/api'
+import { nextTick } from 'vue'
+import { storageOptions } from '@/api/constants'
 
 // 输入参数
 const props = defineProps({
   type: String, // download/library
   directory: {
-    type: Object as PropType<MediaDirectory>,
+    type: Object as PropType<TransferDirectoryConf>,
     required: true, // 必填参数
   },
   categories: {
@@ -17,8 +19,8 @@ const props = defineProps({
   height: String,
 })
 
-// 路径
-const path = ref<string>('')
+// 卡版是否折叠状态
+const isCollapsed = ref(true)
 
 // 类型下拉字典
 const typeItems = [
@@ -27,6 +29,98 @@ const typeItems = [
   { title: '电视剧', value: '电视剧' },
 ]
 
+// 计算资源存储字典（整理方式为下载器时不能为远程存储）
+const resourceStorageOptions = computed(() => {
+  return storageOptions.filter(item => !item.remote || props.directory.monitor_type !== 'downloader')
+})
+
+// 自动整理方式下拉字典
+const transferSourceItems = [
+  { title: '不整理', value: '' },
+  { title: '下载器监控', value: 'downloader' },
+  { title: '目录监控', value: 'monitor' },
+  { title: '手动整理', value: 'manual' },
+]
+
+// 监控模式下拉字典
+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'])
 
@@ -35,18 +129,48 @@ function onClose() {
   emit('close')
 }
 
-// 路径更新
-function updatePath(value: string) {
-  path.value = value
-  emit('update:modelValue', 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
+    }
+  },
+)
+
+// 监听monitor_type变化，如果为downloader则设置为本地
+watch(
+  () => props.directory.monitor_type,
+  newMonitorType => {
+    if (newMonitorType === 'downloader') {
+      props.directory.storage = 'local'
+    }
+  },
+)
 </script>
 
 <template>
@@ -65,40 +189,124 @@ const getCategories = computed(() => {
         </IconBtn>
       </span>
     </VCardItem>
-    <VCardText>
+    <VCardText v-if="!isCollapsed">
       <VForm>
         <VRow>
-          <VCol>
-            <VPathField @update:modelValue="updatePath">
-              <template #activator="{ menuprops }">
-                <VTextField v-model="props.directory.path" v-bind="menuprops" variant="underlined" label="路径" />
-              </template>
-            </VPathField>
-          </VCol>
-        </VRow>
-        <VRow>
-          <VCol cols="4">
+          <VCol cols="6">
             <VSelect
               v-model="props.directory.media_type"
               variant="underlined"
               :items="typeItems"
               label="媒体类型"
-              @update:modelValue="props.directory.category = ''"
+              @update:modelValue="props.directory.media_category = ''"
             />
           </VCol>
-          <VCol>
-            <VSelect v-model="props.directory.category" variant="underlined" :items="getCategories" label="媒体类别" />
+          <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="resourceStorageOptions"
+              label="资源存储"
+            />
+          </VCol>
+          <VCol cols="8">
+            <VPathField
+              v-model="props.directory.download_path"
+              :storage="props.directory.storage"
+              variant="underlined"
+              label="资源目录"
+            />
+          </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 v-if="!props.directory.category || props.directory.category === ''">
-            <VSwitch v-model="props.directory.auto_category" label="自动分类"></VSwitch>
+          <VCol>
+            <VSelect
+              v-model="props.directory.monitor_type"
+              variant="underlined"
+              :items="transferSourceItems"
+              label="自动整理"
+            />
           </VCol>
-          <VCol v-if="type === 'library'">
-            <VSwitch v-model="props.directory.scrape" label="刮削元数据"></VSwitch>
+        </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="storageOptions"
+              label="媒体库存储"
+            />
+          </VCol>
+          <VCol cols="8">
+            <VPathField
+              v-model="props.directory.library_path"
+              :storage="props.directory.library_storage"
+              variant="underlined"
+              label="媒体库目录"
+            />
+          </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/DownloaderCard.vue

@@ -0,0 +1,324 @@
+<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-es'
+
+// 定义输入
+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>
+    <VHover v-slot="hover">
+      <VCard
+        v-bind="hover.props"
+        variant="tonal"
+        @click="openDownloaderInfoDialog"
+        :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
+      >
+        <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>
+    </VHover>
+    <VDialog v-if="downloaderInfoDialog" 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="用户名"
+                  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="用户名"
+                  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,11 +1,13 @@
 <script lang="ts" setup>
+import { innerFilterRules } from '@/api/constants'
+import { CustomRule } from '@/api/types'
+import { cloneDeep } from 'lodash-es'
+
 // 输入参数
 const props = defineProps({
   pri: String,
-  maxpri: String,
   rules: Array as PropType<string[]>,
-  width: String,
-  height: String,
+  custom_rules: Array as PropType<CustomRule[]>,
 })
 
 // 定义触发的自定义事件
@@ -22,50 +24,24 @@ function filtersChanged(value: string[]) {
 }
 
 // 过滤规则下拉框
-const selectFilterOptions = ref<{ [key: string]: string }[]>([
-  { title: '特效字幕', value: ' SPECSUB ' },
-  { title: '中文字幕', value: ' CNSUB ' },
-  { title: '国语配音', value: ' CNVOI ' },
-  { title: '官种', value: ' GZ ' },
-  { title: '排除: 国语配音', value: ' !CNVOI ' },
-  { title: '粤语配音', value: ' HKVOI ' },
-  { title: '排除: 粤语配音', value: ' !HKVOI ' },
-  { 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">
+  <VCard variant="tonal">
     <span class="absolute top-3 right-12">
       <IconBtn>
         <VIcon class="cursor-move" icon="mdi-drag" />
@@ -83,6 +59,7 @@ const selectFilterOptions = ref<{ [key: string]: string }[]>([
             chips
             label=""
             multiple
+            clearable
             @update:modelValue="filtersChanged"
           />
         </VCol>

src/components/cards/FilterRuleGroupCard.vue

@@ -0,0 +1,307 @@
+<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-es'
+
+// 输入参数
+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 filterRuleCardsType = ref<FilterCard>({
+  pri: '',
+  rules: [],
+})
+
+// 导入代码弹窗
+const importCodeDialog = ref(false)
+
+// 导入代码类型
+const importCodeType = ref('')
+
+// 更新规则卡片的值
+function updateFilterCardValue(pri: string, rules: string[]) {
+  const card = filterRuleCards.value.find(card => card.pri === pri)
+  if (card && Array.isArray(rules)) 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
+    })
+}
+
+// 分享规则
+async function shareRules() {
+  if (filterRuleCards.value.length === 0) return
+
+  const value = filterRuleCards.value
+    .filter(card => Array.isArray(card.rules) && card.rules.length > 0)
+    .map(card => card.rules.join('&'))
+    .join('>')
+
+  try {
+    let success
+    success = copyToClipboard(value)
+    if (await success) $toast.success('优先级规则已复制到剪贴板！')
+    else $toast.error('优先级规则复制失败：可能是浏览器不支持或被用户阻止！')
+  } catch (error) {
+    $toast.error('优先级规则复制失败！')
+    console.error(error)
+  }
+}
+
+// 导入规则
+async function importRules(ruleType: string) {
+  importCodeType.value = ruleType
+  importCodeDialog.value = true
+}
+
+// 保存导入的代码，直接覆盖原有值
+function saveCodeString(type: string, code: any) {
+  try {
+    code = code.value
+    if (type === 'priority') {
+      // 解析值
+      if (!code) return
+      // 首尾增加空格
+      if (!code.startsWith(' ')) code = ` ${code}`
+      if (!code.endsWith(' ')) code = `${code} `
+      const groups = code.split('>')
+      filterRuleCards.value = groups.map((group: string, index: number) => ({
+        pri: (index + 1).toString(),
+        rules: group.split('&').filter(rule => rule),
+      }))
+    }
+  } catch (error) {
+    $toast.error('导入失败！')
+    console.error(error)
+  }
+}
+
+// 增加卡片
+function addFilterCard() {
+  const pri = (filterRuleCards.value.length + 1).toString()
+  const newCard: FilterCard = { pri, rules: [] }
+  filterRuleCards.value.push(newCard)
+}
+
+// 根据列表的拖动顺序更新优先级
+function dragOrderEnd() {
+  filterRuleCards.value.forEach((card, index) => {
+    card.pri = (index + 1).toString()
+  })
+}
+
+// 打开详情弹窗
+function opengroupInfoDialog() {
+  groupInfo.value = cloneDeep(props.group)
+  if (props.group.rule_string) {
+    filterRuleCards.value = props.group.rule_string.split('>').map((group: string, index: number) => ({
+      pri: (index + 1).toString(),
+      rules: group.split('&').filter(rule => rule),
+    }))
+  }
+  groupInfoDialog.value = true
+}
+
+// 保存详情数据
+function saveGroupInfo() {
+  if (!groupInfo.value.name.trim()) {
+    $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.value.rule_string = filterRuleCards.value
+    .filter(card => Array.isArray(card.rules) && 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-if="groupInfoDialog" v-model="groupInfoDialog" scrollable max-width="80rem" persistent>
+      <VCard :title="`${props.group.name} - 配置`" class="rounded-t">
+        <DialogCloseBtn v-model="groupInfoDialog" />
+        <VDivider />
+        <VCardItem class="pt-1">
+          <VRow class="mt-1">
+            <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>
+        </VCardItem>
+        <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('priority')">
+            <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>
+    <ImportCodeDialog
+      v-if="importCodeDialog"
+      v-model="importCodeDialog"
+      title="导入规则优先级"
+      :dataType="importCodeType"
+      @close="importCodeDialog = false"
+      @save="saveCodeString"
+    />
+  </div>
+</template>

src/components/cards/LibraryCard.vue

@@ -3,6 +3,7 @@ import type { MediaServerLibrary } from '@/api/types'
 import plex from '@images/misc/plex.png'
 import emby from '@images/misc/emby.png'
 import jellyfin from '@images/misc/jellyfin.png'
+import trimemedia from '@images/logos/trimemedia.png'
 
 // 输入参数
 const props = defineProps({
@@ -38,6 +39,7 @@ 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 if (props.media?.server === 'trimemedia') return trimemedia
   else return plex
 }
 
@@ -91,7 +93,17 @@ async function drawImages(imageList: string[]) {
     const img = new Image()
     img.setAttribute('crossorigin', 'anonymous')
     img.src = imgSrc
-    await new Promise(resolve => (img.onload = resolve))
+    try {
+      await new Promise<void>((resolve, reject) => {
+        img.onload = () => resolve()
+        img.onerror = () => reject(new Error(`Failed to load image: ${imgSrc}`))
+      })
+    } catch (error) {
+      console.error(error)
+      ctx.fillStyle = '#e5e7eb'
+      ctx.fillRect(MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1), MARGIN_HEIGHT, POSTER_WIDTH, POSTER_HEIGHT)
+      return
+    }
 
     const x = MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1)
     const y = MARGIN_HEIGHT
@@ -146,7 +158,7 @@ onMounted(async () => {
         :height="props.height"
         :width="props.width"
         :class="{
-          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+          'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
         }"
         @click="goPlay"
       >
@@ -171,9 +183,3 @@ onMounted(async () => {
     </template>
   </VHover>
 </template>
-
-<style lang="scss">
-.text-shadow {
-  text-shadow: 1px 1px #777;
-}
-</style>

src/components/cards/MediaCard.vue

@@ -1,16 +1,18 @@
 <script lang="ts" setup>
-import type { PropType, Ref } from 'vue'
-import { useToast } from 'vue-toast-notification'
-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'
+import api from '@/api'
+import { useToast } from 'vue-toast-notification'
+import { formatSeason, formatRating } from '@/@core/utils/formatters'
+import { doneNProgress, startNProgress } from '@/api/nprogress'
+import type { MediaInfo, Subscribe, MediaSeason, Site } from '@/api/types'
+import router, { registerAbortController } from '@/router'
+import { useUserStore } from '@/stores'
+import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
+import SearchSiteDialog from '@/components/dialog/SearchSiteDialog.vue'
+import SubscribeSeasonDialog from '../dialog/SubscribeSeasonDialog.vue'
 
 // 输入参数
 const props = defineProps({
@@ -19,7 +21,11 @@ const props = defineProps({
   height: String,
 })
 
-const store = useStore()
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
+// 用户 Store
+const userStore = useUserStore()
 
 // 提示框
 const $toast = useToast()
@@ -30,18 +36,12 @@ const isImageLoaded = ref(false)
 // 图片加载失败
 const imageLoadError = ref(false)
 
-// TMDB识别标志
-const tmdbFlag = ref(true)
-
 // 当前订阅状态
 const isSubscribed = ref(false)
 
 // 本地存在状态
 const isExists = ref(false)
 
-// 各季缺失状态：0-已入库 1-部分缺失 2-全部缺失，没有数据也是已入库
-const seasonsNotExisted = ref<{ [key: number]: number }>({})
-
 // 订阅季弹窗
 const subscribeSeasonDialog = ref(false)
 
@@ -51,11 +51,8 @@ const subscribeEditDialog = ref(false)
 // 订阅ID
 const subscribeId = ref<number>()
 
-// 季详情
-const seasonInfos = ref<TmdbSeason[]>([])
-
 // 选中的订阅季
-const seasonsSelected = ref<TmdbSeason[]>([])
+const seasonsSelected = ref<MediaSeason[]>([])
 
 // 来源角标字典
 const sourceIconDict: { [key: string]: any } = {
@@ -64,19 +61,55 @@ const sourceIconDict: { [key: string]: any } = {
   bangumi: bangumiImage,
 }
 
+// 绑定MediaCard元素
+const mediaCardRef = ref<HTMLElement | null>(null)
+
+// 创建Intersection Observer实例
+const observer = ref<IntersectionObserver | null>(null)
+
+// 所有站点
+const allSites = ref<Site[]>([])
+
+// 选中的站点
+const selectedSites = ref<number[]>([])
+
+// 搜索菜单显示状态
+const searchMenuShow = ref(false)
+
+// 选择站点对话框
+const chooseSiteDialog = ref(false)
+
+// 选择的剧集组
+const episodeGroup = ref('')
+
+// 查询所有站点
+async function querySites() {
+  try {
+    const data: Site[] = await api.get('site/')
+
+    // 过滤站点，只有启用的站点才显示
+    allSites.value = data.filter(item => item.is_active)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 查询用户选中的站点
+async function querySelectedSites() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/IndexerSites')
+    selectedSites.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 // 获得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 => {
-    addSubscribe(season.season_number)
-  })
+  else if (props.media?.bangumi_id) return `bangumi:${props.media?.bangumi_id}`
+  else return `${props.media?.mediaid_prefix}:${props.media?.media_id}`
 }
 
 // 角标颜色
@@ -87,33 +120,11 @@ function getChipColor(type: string) {
 }
 
 // 添加订阅处理
-
 async function handleAddSubscribe() {
-  if (props.media?.type === '电视剧' && props.media?.tmdb_id) {
-    // TMDB电视剧
-    // 查询TMDB所有季信息
-    await getMediaSeasons()
-    if (!seasonInfos.value) {
-      $toast.error(`${props.media?.title} 查询剧集信息失败！`)
-      return
-    }
-    // 检查各季的缺失状态
-    await checkSeasonsNotExists()
-    if (!tmdbFlag.value) return
-
-    if (seasonInfos.value.length === 1) {
-      // 添加订阅
-      addSubscribe(1)
-    } else {
-      // 弹出季选择列表，支持多选
-      seasonsSelected.value = []
-      subscribeSeasonDialog.value = true
-    }
-  } else if (props.media?.type === '电视剧') {
-    // 豆瓣电视剧，只会有一季
-    const season = props.media?.season ?? 1
-    // 添加订阅
-    addSubscribe(season)
+  if (props.media?.type === '电视剧') {
+    // 弹出季选择列表，支持多选
+    seasonsSelected.value = []
+    subscribeSeasonDialog.value = true
   } else {
     // 电影
     addSubscribe()
@@ -121,15 +132,12 @@ async function handleAddSubscribe() {
 }
 
 // 调用API添加订阅，电视剧的话需要指定季
-async function addSubscribe(season = 0) {
+async function addSubscribe(season: number = 0, best_version: number = 0) {
   // 开始处理
   startNProgress()
   try {
     // 是否洗版
-    let best_version = isExists.value ? 1 : 0
-    if (season && props.media?.tmdb_id)
-      // 全部存在时洗版
-      best_version = !seasonsNotExisted.value[season] ? 1 : 0
+    if (!best_version && props.media?.type == '电影') best_version = isExists.value ? 1 : 0
     // 请求API
     const result: { [key: string]: any } = await api.post('subscribe/', {
       name: props.media?.title,
@@ -138,8 +146,10 @@ async function addSubscribe(season = 0) {
       tmdbid: props.media?.tmdb_id,
       doubanid: props.media?.douban_id,
       bangumiid: props.media?.bangumi_id,
+      mediaid: props.media?.media_id ? `${props.media?.mediaid_prefix}:${props.media?.media_id}` : '',
       season,
       best_version,
+      episode_group: episodeGroup.value,
     })
 
     // 订阅状态
@@ -216,6 +226,9 @@ async function handleCheckSubscribe() {
 // 查询当前媒体是否已入库
 async function handleCheckExists() {
   try {
+    const abortController = new AbortController()
+    registerAbortController(abortController)
+    const { signal } = abortController
     const result: { [key: string]: any } = await api.get('mediaserver/exists', {
       params: {
         tmdbid: props.media?.tmdb_id,
@@ -224,6 +237,7 @@ async function handleCheckExists() {
         season: props.media?.season,
         mtype: props.media?.type,
       },
+      signal,
     })
 
     if (result.success) isExists.value = true
@@ -235,13 +249,16 @@ async function handleCheckExists() {
 // 调用API检查是否已订阅，电视剧需要指定季
 async function checkSubscribe(season = 0) {
   try {
+    const abortController = new AbortController()
+    registerAbortController(abortController)
+    const { signal } = abortController
     const mediaid = getMediaId()
-
     const result: Subscribe = await api.get(`subscribe/media/${mediaid}`, {
       params: {
         season,
         title: props.media?.title,
       },
+      signal,
     })
 
     return result.id || null
@@ -252,51 +269,15 @@ async function checkSubscribe(season = 0) {
   return null
 }
 
-// 检查所有季的缺失状态（数据库）
-async function checkSeasonsNotExists() {
-  // 开始处理
-  startNProgress()
-  try {
-    const result: NotExistMediaInfo[] = await api.post('mediaserver/notexists', props.media)
-    if (result) {
-      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
-
-        seasonsNotExisted.value[item.season] = state
-      })
-    }
-  } catch (error) {
-    $toast.error(`${props.media?.title}无法识别TMDB媒体信息！`)
-    tmdbFlag.value = false
-  } finally {
-    // 处理完成
-    doneNProgress()
-  }
-}
-
-// 查询TMDB的所有季信息
-async function getMediaSeasons() {
-  try {
-    seasonInfos.value = await api.get(`tmdb/seasons/${props.media?.tmdb_id}`)
-  } catch (error) {
-    console.error(error)
-  }
-}
-
 // 查询订阅弹窗规则
 async function queryDefaultSubscribeConfig() {
   // 非管理员不显示
-  if (!store.state.auth.superUser) return false
+  if (!userStore.superUser) return false
   try {
     let subscribe_config_url = ''
     if (props.media?.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
     else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
-
     const result: { [key: string]: any } = await api.get(subscribe_config_url)
-
     if (result.data?.value) return result.data.value.show_edit_dialog
   } catch (error) {
     console.log(error)
@@ -310,39 +291,55 @@ function handleSubscribe() {
   else handleAddSubscribe()
 }
 
-// 计算存在状态的颜色
-function getExistColor(season: number) {
-  const state = seasonsNotExisted.value[season]
-  if (!state) 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 === 1) return '部分缺失'
-  else if (state === 2) return '缺失'
-  else return '已入库'
+// 订阅多季
+function subscribeSeasons(seasons: MediaSeason[], seasonNoExists: { [key: number]: number }, groudId: string) {
+  subscribeSeasonDialog.value = false
+  episodeGroup.value = groudId
+  seasonsSelected.value = seasons || []
+  seasonsSelected.value.forEach(season => {
+    let best_version = 0
+    if (season && props.media?.tmdb_id)
+      // 全部存在时洗版
+      best_version = !seasonNoExists[season.season_number || 0] ? 1 : 0
+    addSubscribe(season.season_number, best_version)
+  })
 }
 
 // 打开详情页
 function goMediaDetail(isHovering = false) {
   if (isHovering) {
-    router.push({
-      path: '/media',
-      query: {
-        mediaid: getMediaId(),
-        type: props.media?.type,
-      },
-    })
+    if (props.media?.collection_id) {
+      // 跳转到合集列表
+      router.push({
+        path: `/browse/tmdb/collection/${props.media?.collection_id}`,
+        query: {
+          title: props.media?.title,
+        },
+      })
+    } else {
+      // 跳转到媒体详情页
+      router.push({
+        path: '/media',
+        query: {
+          mediaid: getMediaId(),
+          title: props.media?.title,
+          year: props.media?.year,
+          type: props.media?.type,
+        },
+      })
+    }
   }
 }
 
+// 点击搜索
+async function clickSearch() {
+  if (allSites.value?.length == 0) {
+    querySites()
+    querySelectedSites()
+  }
+  chooseSiteDialog.value = true
+}
+
 // 开始搜索
 function handleSearch() {
   router.push({
@@ -351,185 +348,172 @@ function handleSearch() {
       keyword: getMediaId(),
       type: props.media?.type,
       area: 'title',
+      title: props.media?.title,
+      year: props.media?.year,
       season: props.media?.season,
+      sites: selectedSites.value.join(','),
     },
   })
 }
 
-// 装载时检查是否已订阅
-onBeforeMount(() => {
+// 搜索多站点
+function searchSites(sites: number[]) {
+  chooseSiteDialog.value = false
+  selectedSites.value = sites
+  handleSearch()
+}
+
+// 懒加载检查
+function handleCheckLazy() {
+  if (props.media?.collection_id) {
+    return
+  }
   handleCheckSubscribe()
   handleCheckExists()
+}
+
+// 在元素进入视窗时触发懒加载函数
+function setupIntersectionObserver() {
+  if (mediaCardRef.value) {
+    observer.value = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            // 只要MediaCard进入视窗，就调用懒加载的操作
+            handleCheckLazy()
+            // 加载后销毁观察者实例
+            observer.value?.disconnect()
+            observer.value = null
+          }
+        })
+      },
+      { threshold: 0.1 },
+    )
+    observer.value.observe(mediaCardRef.value)
+  }
+}
+
+onMounted(() => {
+  setupIntersectionObserver()
+})
+
+onBeforeUnmount(() => {
+  observer.value?.disconnect()
+  observer.value = null
 })
 
 // 计算图片地址
 const getImgUrl: Ref<string> = computed(() => {
   if (imageLoadError.value) return noImage
   const url = props.media?.poster_path?.replace('original', 'w500') ?? noImage
+  // 使用图片缓存
+  if (globalSettings.GLOBAL_IMAGE_CACHE)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
   // 如果地址中包含douban则使用中转代理
   if (url.includes('doubanio.com'))
-    return `${import.meta.env.VITE_API_BASE_URL}douban/img?imgurl=${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}`
-}
-
-// 将yyyy-mm-dd转换为yyyy年mm月dd日
-function formatAirDate(airDate: string) {
-  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.replaceAll(/-/g, '/'))
-  return date.getFullYear()
+// 移除订阅
+function onRemoveSubscribe() {
+  subscribeEditDialog.value = false
 }
 </script>
 
 <template>
   <VHover>
     <template #default="hover">
-      <VCard
-        v-bind="hover.props"
-        :height="props.height"
-        :width="props.width"
-        class="outline-none shadow ring-gray-500 rounded-lg"
-        :class="{
-          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
-          'ring-1': isImageLoaded,
-        }"
-        @click.stop="goMediaDetail(hover.isHovering)"
-      >
-        <VImg
-          aspect-ratio="2/3"
-          :src="getImgUrl"
-          class="object-cover aspect-w-2 aspect-h-3"
-          :class="hover.isHovering ? 'on-hover' : ''"
-          cover
-          @load="isImageLoaded = true"
-          @error="imageLoadError = true"
+      <div ref="mediaCardRef">
+        <VCard
+          v-bind="hover.props"
+          :height="props.height"
+          :width="props.width"
+          class="outline-none shadow ring-gray-500 media-card"
+          :class="{
+            'transition transform-cpu duration-300  -translate-y-1': hover.isHovering,
+            'ring-1': isImageLoaded,
+          }"
+          @click.stop="goMediaDetail(hover.isHovering ?? false)"
         >
-          <template #placeholder>
-            <div class="w-full h-full">
-              <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+          <VImg
+            aspect-ratio="2/3"
+            :src="getImgUrl"
+            class="object-cover aspect-w-2 aspect-h-3"
+            cover
+            @load="isImageLoaded = true"
+            @error="imageLoadError = true"
+          >
+            <template #placeholder>
+              <div class="w-full h-full">
+                <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+              </div>
+            </template>
+          </VImg>
+
+          <!-- 详情 -->
+          <VCardText
+            v-show="hover.isHovering || imageLoadError || searchMenuShow"
+            class="w-full h-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
+            style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
+          >
+            <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 v-if="props.media?.collection_id" class="mb-3" @click.stop=""></div>
+            <div v-else class="flex align-center justify-between">
+              <IconBtn icon="mdi-magnify" color="white" @click.stop="clickSearch" />
+              <IconBtn icon="mdi-heart" :color="isSubscribed ? 'error' : 'white'" @click.stop="handleSubscribe" />
             </div>
-          </template>
-        </VImg>
-        <!-- 类型角标 -->
-        <VChip
-          v-show="isImageLoaded"
-          variant="elevated"
-          size="small"
-          :class="getChipColor(props.media?.type || '')"
-          class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
-        >
-          {{ props.media?.type }}
-        </VChip>
-        <!-- 本地存在标识 -->
-        <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>
+          </VCardText>
+          <!-- 类型角标 -->
+          <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"
+          >
+            {{ formatRating(props.media?.vote_average) }}
+          </VChip>
+          <!--来源图标-->
+          <VAvatar
+            size="24"
+            density="compact"
+            class="absolute bottom-1 right-1"
+            tile
+            v-if="!hover.isHovering && isImageLoaded && props.media?.source && !imageLoadError"
+          >
+            <VImg cover :src="sourceIconDict[props.media?.source]" class="shadow-lg" />
+          </VAvatar>
+        </VCard>
+      </div>
     </template>
   </VHover>
   <!-- 订阅季弹窗 -->
-  <VBottomSheet v-if="subscribeSeasonDialog" v-model="subscribeSeasonDialog" inset scrollable>
-    <VCard class="rounded-t">
-      <DialogCloseBtn @click="subscribeSeasonDialog = false" />
-      <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">
-            <template #prepend>
-              <VImg
-                height="90"
-                width="60"
-                :src="getSeasonPoster(item.poster_path || '')"
-                aspect-ratio="2/3"
-                class="object-cover rounded shadow ring-gray-500 me-3"
-                cover
-              >
-                <template #placeholder>
-                  <div class="w-full h-full">
-                    <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
-                  </div>
-                </template>
-              </VImg>
-            </template>
-            <VListItemTitle> 第 {{ item.season_number }} 季 </VListItemTitle>
-            <VListItemSubtitle class="mt-1 me-2">
-              <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 }} 集
-            </VListItemSubtitle>
-            <VListItemSubtitle>
-              《{{ 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)">
-                {{ getExistText(item.season_number || 0) }}
-              </VChip>
-            </VListItemSubtitle>
-            <template #append="{ isSelected }">
-              <VListItemAction start>
-                <VSwitch :model-value="isSelected" />
-              </VListItemAction>
-            </template>
-          </VListItem>
-        </VList>
-      </VCardText>
-      <div class="my-2 text-center">
-        <VBtn :disabled="seasonsSelected.length === 0" width="30%" @click="subscribeSeasons">
-          {{ seasonsSelected.length === 0 ? '请选择订阅季' : '提交订阅' }}
-        </VBtn>
-      </div>
-    </VCard>
-  </VBottomSheet>
+  <subscribeSeasonDialog
+    v-if="subscribeSeasonDialog"
+    v-model="subscribeSeasonDialog"
+    :media="media"
+    @subscribe="subscribeSeasons"
+    @close="subscribeSeasonDialog = false"
+  />
   <!-- 订阅编辑弹窗 -->
   <SubscribeEditDialog
     v-if="subscribeEditDialog"
@@ -537,17 +521,15 @@ function getYear(airDate: string) {
     :subid="subscribeId"
     @close="subscribeEditDialog = false"
     @save="subscribeEditDialog = false"
-    @remove="
-      () => {
-        subscribeEditDialog = false
-        handleCheckSubscribe()
-      }
-    "
+    @remove="onRemoveSubscribe"
+  />
+  <!-- 站点选择对话框 -->
+  <SearchSiteDialog
+    v-if="chooseSiteDialog"
+    v-model="chooseSiteDialog"
+    :sites="allSites"
+    :selected="selectedSites"
+    @search="searchSites"
+    @close="chooseSiteDialog = false"
   />
 </template>
-
-<style lang="scss">
-.on-hover img {
-  @apply brightness-50;
-}
-</style>

src/components/cards/MediaInfoCard.vue

@@ -4,7 +4,7 @@ import type { Context } from '@/api/types'
 import { isNullOrEmptyObject } from '@/@core/utils'
 
 // 输入参数
-const props = defineProps({
+defineProps({
   context: Object as PropType<Context>,
 })
 
@@ -45,8 +45,7 @@ function openTmdbPage(type: string, tmdbId: number) {
             </template>
           </VImg>
         </div>
-
-        <div>
+        <div class="flex-grow">
           <VCardItem class="pb-1">
             <VCardTitle class="text-center text-md-left">
               {{ context?.media_info?.title || context?.meta_info?.name }}

src/components/cards/MediaServerCard.vue

@@ -0,0 +1,399 @@
+<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 trimemedia_image from '@images/logos/trimemedia.png'
+import api from '@/api'
+import { cloneDeep } from 'lodash-es'
+
+// 定义输入
+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
+    case 'trimemedia':
+      return trimemedia_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-if="mediaServerInfoDialog" 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 == 'trimemedia'">
+              <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">
+                <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.username"
+                  label="用户名"
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  type="password"
+                  v-model="mediaServerInfo.config.password"
+                  label="密码"
+                  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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { isNullOrEmptyObject } from '@/@core/utils'
 import type { Message } from '@/api/types'
 import { formatDateDifference } from '@core/utils/formatters'
 
@@ -22,8 +23,7 @@ async function imageLoaded() {
 
 // 链接打开新窗口
 function openLink() {
-  if (props.message?.link)
-    window.open(props.message.link, '_blank')
+  if (props.message?.link) window.open(props.message.link, '_blank')
 }
 
 // 将note转换为json
@@ -31,9 +31,8 @@ function noteToJson() {
   if (props.message?.note) {
     try {
       return JSON.parse(props.message.note)
-    }
-    catch (error) {
-      console.error(error)
+    } catch (error) {
+      return props.message.note
     }
   }
   return {}
@@ -41,58 +40,53 @@ function noteToJson() {
 
 // 将\n转换为html属性的换行符
 function replaceNewLine(value: string) {
-  if (!value)
-    return ''
+  if (!value) return ''
   return value.replace(/\n/g, '<br/>')
 }
 </script>
 
 <template>
-  <VCard
-    :width="props.width"
-    :height="props.height"
-    variant="tonal"
-    @click="openLink"
-  >
-    <div
-      v-if="props.message?.image"
-      class="relative text-center card-cover-blurred"
-    >
+  <VCard variant="tonal" :width="props.width" :height="props.height" @click="openLink" max-width="23rem">
+    <div v-if="props.message?.image" class="relative text-center card-cover-blurred">
       <VImg
         :src="props.message?.image"
-        aspect-ratio="4/3"
+        aspect-ratio="3/2"
         cover
+        position="top"
         :class="{ shadow: isImageLoaded }"
         @load="imageLoaded"
         @error="imageLoadError = true"
       />
     </div>
-    <VCardTitle v-if="props.message?.title" class="whitespace-break-spaces">
+    <div
+      v-if="
+        props.message?.title &&
+        !props.message?.text &&
+        !props.message?.image &&
+        isNullOrEmptyObject(props.message?.note) &&
+        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?.title }}</p>
+    </div>
+    <VCardTitle v-else-if="props.message?.title" class="break-words whitespace-break-spaces">
       {{ props.message?.title }}
     </VCardTitle>
-    <VAlert
+    <div
       v-if="props.message?.text && props.message?.action === 0"
-      variant="tonal"
-      type="success"
+      class="rounded-md text-body-1 py-2 px-4 elevation-2 bg-primary text-white chat-right mb-1"
     >
-      <template #prepend />
-      {{ props.message?.text }}
-    </VAlert>
-    <VCardText
-      v-if="props.message?.text && props.message?.action === 1"
-      v-html="replaceNewLine(props.message?.text)"
-    />
-    <VCardText v-if="props.message?.note">
+      <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="!isNullOrEmptyObject(props.message?.note)">
       <VList>
-        <VListItem
-          v-for="(value, key) in noteToJson()"
-          :key="key"
-          two-line
-        >
-          <VListItemTitle v-if="value.title_year" class="font-bold">
+        <VListItem v-for="(value, key) in noteToJson()" :key="key" two-line>
+          <VListItemTitle v-if="value.title_year" class="font-bold break-words whitespace-break-spaces">
             {{ key + 1 }}. {{ value.title_year }}
           </VListItemTitle>
-          <VListItemTitle v-if="value.enclosure" class="font-bold whitespace-break-spaces">
+          <VListItemTitle v-if="value.enclosure" class="font-bold break-words whitespace-break-spaces">
             {{ key + 1 }}. {{ value.title }} {{ value.volume_factor }} ↑{{ value.seeders }}
           </VListItemTitle>
           <VListItemSubtitle v-if="value.type">
@@ -104,9 +98,11 @@ function replaceNewLine(value: string) {
         </VListItem>
       </VList>
     </VCardText>
-    <div class="text-end">
-      <span v-if="props.message?.action === 0" class="text-sm italic me-2">{{ props.message?.userid }}</span>
-      <span class="text-sm italic me-2">{{ formatDateDifference(props.message?.reg_time || props.message?.date || '') }}</span>
-    </div>
   </VCard>
+  <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-es'
+
+// 定义输入
+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-if="notificationInfoDialog" 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

@@ -9,6 +9,9 @@ const personProps = defineProps({
   height: String,
 })
 
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
 // 当前人物
 const personInfo = ref(personProps.person)
 
@@ -17,22 +20,26 @@ const isImageLoaded = ref(false)
 
 // 人物图片地址
 function getPersonImage() {
+  let url = ''
   if (personProps.person?.source === 'themoviedb') {
     if (!personInfo.value?.profile_path) return personIcon
-    return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
+    url = `https://${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') {
-      return personInfo.value?.avatar?.normal
+      url = personInfo.value?.avatar?.normal
     } else {
-      return personInfo.value?.avatar
+      url = personInfo.value?.avatar
     }
   } else if (personProps.person?.source === 'bangumi') {
     if (!personInfo.value?.images) return personIcon
-    return personInfo.value?.images?.medium
+    url = personInfo.value?.images?.medium
   } else {
     return personIcon
   }
+  if (globalSettings.GLOBAL_IMAGE_CACHE && url)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+  return url
 }
 
 // 人物姓名
@@ -70,9 +77,8 @@ function goPersonDetail() {
         v-bind="hover.props"
         :height="personProps.height"
         :width="personProps.width"
-        class="rounded-lg"
         :class="{
-          'transition transform-cpu duration-300 scale-105': hover.isHovering,
+          'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
         }"
         @click.stop="goPersonDetail"
       >
@@ -109,7 +115,7 @@ function goPersonDetail() {
   </VHover>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .person-card {
   background-image: linear-gradient(45deg, rgb(var(--v-theme-background)), rgb(var(--v-theme-surface)) 60%);
 }

src/components/cards/PluginAppCard.vue

@@ -43,11 +43,8 @@ const imageLoadError = ref(false)
 // 更新日志弹窗
 const releaseDialog = ref(false)
 
-// 计算插件标签
-const pluginLabels = computed(() => {
-  if (!props.plugin?.plugin_label) return []
-  return props.plugin.plugin_label.split(',')
-})
+// 插件详情弹窗
+const detailDialog = ref(false)
 
 // 图片加载完成
 async function imageLoaded() {
@@ -76,7 +73,7 @@ async function installPlugin() {
 
     if (result.success) {
       $toast.success(`插件 ${props.plugin?.plugin_name} 安装成功！`)
-
+      detailDialog.value = false
       // 通知父组件刷新
       emit('install')
     } else {
@@ -149,86 +146,150 @@ const dropdownItems = ref([
 </script>
 
 <template>
-  <VCard :width="props.width" :height="props.height" @click="installPlugin" class="flex flex-col">
-    <div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }">
-      <div class="me-n3 absolute top-0 right-3">
-        <IconBtn>
-          <VIcon icon="mdi-dots-vertical" class="text-white" />
-          <VMenu activator="parent" close-on-content-click>
-            <VList>
-              <VListItem
-                v-for="(item, i) in dropdownItems"
-                v-show="item.show"
-                :key="i"
-                variant="plain"
-                @click="item.props.click"
+  <div>
+    <VHover>
+      <template #default="hover">
+        <VCard
+          v-bind="hover.props"
+          :width="props.width"
+          :height="props.height"
+          @click="detailDialog = true"
+          class="flex flex-col h-full"
+          :class="{
+            'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
+          }"
+        >
+          <div
+            class="relative flex flex-row items-start pa-3 justify-between grow"
+            :style="{ background: `${backgroundColor}` }"
+          >
+            <div
+              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 text-lg px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis ..."
               >
-                <template #prepend>
-                  <VIcon :icon="item.props.prependIcon" />
-                </template>
-                <VListItemTitle v-text="item.title" />
-              </VListItem>
-            </VList>
-          </VMenu>
-        </IconBtn>
-      </div>
-      <VAvatar size="6rem">
-        <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 }}
-      <span class="text-sm text-gray-500">v{{ props.plugin?.plugin_version }}</span>
-    </VCardTitle>
-    <VCardText class="pb-2">
-      <div>{{ props.plugin?.plugin_desc }}</div>
-      <div>
-        <VChip v-for="label in pluginLabels" variant="tonal" size="small" class="me-1 my-1" color="info" label>
-          {{ label }}
-        </VChip>
-      </div>
-    </VCardText>
-    <VCardText class="flex align-self-baseline pb-2 w-full align-end">
-      <span>
-        <VIcon icon="mdi-account" class="me-1" />
-        <a :href="props.plugin?.author_url" target="_blank" @click.stop>
-          {{ props.plugin?.plugin_author }}
-        </a>
-      </span>
-      <span v-if="props.count" class="ms-3">
-        <VIcon icon="mdi-download" />
-        <span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
-      </span>
-    </VCardText>
-  </VCard>
-  <!-- 安装插件进度框 -->
-  <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>
+                {{ props.plugin?.plugin_name }}
+                <span class="text-sm text-gray-200">v{{ props.plugin?.plugin_version }}</span>
+              </VCardTitle>
+              <VCardText class="text-white text-sm px-2 py-0 text-shadow overflow-hidden 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>
+          </div>
+          <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>
+            <div class="me-n3 absolute bottom-1 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" @click="item.props.click">
+                      <template #prepend>
+                        <VIcon :icon="item.props.prependIcon" />
+                      </template>
+                      <VListItemTitle v-text="item.title" />
+                    </VListItem>
+                  </VList>
+                </VMenu>
+              </IconBtn>
+            </div>
+          </VCardText>
+        </VCard>
+      </template>
+    </VHover>
+    <!-- 安装插件进度框 -->
+    <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>
+    <!-- 插件详情-->
+    <VDialog v-if="detailDialog" v-model="detailDialog" max-width="30rem">
+      <VCard>
+        <DialogCloseBtn @click="detailDialog = false" />
+        <VCardText>
+          <VCol>
+            <div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
+              <div class="mx-auto mt-5">
+                <VAvatar size="64">
+                  <VImg
+                    ref="imageRef"
+                    :src="iconPath"
+                    aspect-ratio="4/3"
+                    cover
+                    :class="{ shadow: isImageLoaded }"
+                    @load="imageLoaded"
+                    @error="imageLoadError = true"
+                  />
+                </VAvatar>
+              </div>
+              <div class="flex-grow">
+                <VCardItem>
+                  <VCardTitle class="text-center text-md-left">
+                    {{ props.plugin?.plugin_name }}
+                  </VCardTitle>
+                  <VCardSubtitle
+                    class="text-center text-md-left break-words whitespace-break-spaces line-clamp-4 overflow-hidden text-ellipsis ..."
+                  >
+                    {{ props.plugin?.plugin_desc }}
+                  </VCardSubtitle>
+                  <VList lines="one">
+                    <VListItem class="ps-0">
+                      <VListItemTitle class="text-center text-md-left">
+                        <span class="font-weight-medium">版本：</span>
+                        <span class="text-body-1"> v{{ props.plugin?.plugin_version }}</span>
+                      </VListItemTitle>
+                    </VListItem>
+                    <VListItem class="ps-0">
+                      <VListItemTitle class="text-center text-md-left">
+                        <span class="font-weight-medium">作者：</span>
+                        <span class="text-body-1 cursor-pointer" @click="visitPluginPage">
+                          {{ props.plugin?.plugin_author }}
+                        </span>
+                      </VListItemTitle>
+                    </VListItem>
+                  </VList>
+                  <div class="text-center text-md-left">
+                    <VBtn color="primary" @click="installPlugin" prepend-icon="mdi-download"> 安装到本地 </VBtn>
+                    <div class="text-xs mt-2" v-if="props.count">
+                      <VIcon icon="mdi-fire" />共 {{ props.count?.toLocaleString() }} 次下载
+                    </div>
+                  </div>
+                </VCardItem>
+              </div>
+            </div>
+          </VCol>
+        </VCardText>
+      </VCard>
+    </VDialog>
+  </div>
 </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,21 +1,15 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
 import { useConfirm } from 'vuetify-use-dialog'
-import { VIcon } from 'vuetify/lib/components/index.mjs'
 import api from '@/api'
 import type { Plugin } from '@/api/types'
-import FormRender from '@/components/render/FormRender.vue'
-import PageRender from '@/components/render/PageRender.vue'
-import VersionHistory from '@/components/misc/VersionHistory.vue'
 import { isNullOrEmptyObject } from '@core/utils'
 import noImage from '@images/logos/plugin.png'
 import { getDominantColor } from '@/@core/utils/image'
-import store from '@/store'
-import { useDisplay } from 'vuetify'
+import VersionHistory from '@/components/misc/VersionHistory.vue'
 import ProgressDialog from '../dialog/ProgressDialog.vue'
-
-// 显示器宽度
-const display = useDisplay()
+import PluginConfigDialog from '../dialog/PluginConfigDialog.vue'
+import PluginDataDialog from '../dialog/PluginDataDialog.vue'
 
 // 输入参数
 const props = defineProps({
@@ -47,23 +41,20 @@ const isVisible = ref(true)
 // 插件配置页面
 const pluginConfigDialog = ref(false)
 
-// 插件配置表单数据
-const pluginConfigForm = ref({})
+// 菜单显示状态
+const menuVisible = ref(false)
 
 // 进度框
 const progressDialog = ref(false)
 
-// 插件表单配置项
-let pluginFormItems = reactive([])
-
 // 插件数据页面
 const pluginInfoDialog = ref(false)
 
 // 进度框文本
 const progressText = ref('正在更新插件...')
 
-// 插件数据页面配置项
-let pluginPageItems = ref([])
+// 用户头像是否加载完成
+const isAvatarLoaded = ref(false)
 
 // 图片是否加载完成
 const isImageLoaded = ref(false)
@@ -132,75 +123,14 @@ async function uninstallPlugin() {
   }
 }
 
-// 调用API读取表单页面
-async function loadPluginForm() {
-  try {
-    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
-    }
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-// 调用API读取数据页面
-async function loadPluginPage() {
-  try {
-    const result: [] = await api.get(`plugin/page/${props.plugin?.id}`)
-    if (result) pluginPageItems.value = result
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-// 调用API读取配置数据
-async function loadPluginConf() {
-  try {
-    const result: { [key: string]: any } = await api.get(`plugin/${props.plugin?.id}`)
-    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) {
-      progressDialog.value = false
-      pluginConfigDialog.value = false
-      $toast.success(`插件 ${props.plugin?.plugin_name} 配置已保存`)
-      // 通知父组件刷新
-      emit('save')
-    } else {
-      progressDialog.value = false
-      $toast.error(`插件 ${props.plugin?.plugin_name} 配置保存失败：${result.message}}`)
-    }
-  } catch (error) {
-    console.error(error)
-  }
-}
-
 // 显示插件数据
 async function showPluginInfo() {
-  // 加载数据
-  await loadPluginPage()
   pluginConfigDialog.value = false
   pluginInfoDialog.value = true
 }
 
 // 显示插件配置
 async function showPluginConfig() {
-  // 加载表单
-  await loadPluginForm()
-  // 加载配置
-  await loadPluginConf()
   // 显示对话框
   pluginInfoDialog.value = false
   pluginConfigDialog.value = true
@@ -216,11 +146,19 @@ const iconPath: Ref<string> = computed(() => {
   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} 的配置数据?`,
+    content: `此操作将恢复插件 ${props.plugin?.plugin_name} 的默认设置，并清除所有相关数据，确定要继续吗？`,
   })
 
   if (!isConfirmed) return
@@ -277,10 +215,9 @@ function visitAuthorPage() {
 
 // 查看日志URL
 function openLoggerWindow() {
-  const token = store.state.auth.token
   const url = `${
     import.meta.env.VITE_API_BASE_URL
-  }system/logging?token=${token}&length=-1&logfile=plugins/${props.plugin?.id?.toLowerCase()}.log`
+  }system/logging?length=-1&logfile=plugins/${props.plugin?.id?.toLowerCase()}.log`
   window.open(url, '_blank')
 }
 
@@ -290,6 +227,12 @@ function openPluginDetail() {
   else showPluginConfig()
 }
 
+// 配置完成
+function configDone() {
+  pluginConfigDialog.value = false
+  emit('save')
+}
+
 // 弹出菜单
 const dropdownItems = ref([
   {
@@ -381,113 +324,138 @@ watch(
 </script>
 
 <template>
-  <!-- 插件卡片 -->
-  <VCard v-if="isVisible" :width="props.width" :height="props.height" @click="openPluginDetail" class="flex flex-col">
-    <div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }">
-      <div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 left-1">
-        <VIcon icon="mdi-new-box" class="text-white" />
-      </div>
-      <div class="me-n3 absolute top-0 right-3">
-        <IconBtn>
-          <VIcon icon="mdi-dots-vertical" class="text-white" />
-          <VMenu activator="parent" close-on-content-click>
-            <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>
-      <VAvatar size="6rem">
-        <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">v{{ props.plugin?.plugin_version }}</span>
-      </VCardTitle>
-    </VCardItem>
-    <VCardText class="pb-1">
-      {{ props.plugin?.plugin_desc }}
-    </VCardText>
-    <VCardText class="flex justify-end align-self-baseline p-1 w-full align-end">
-      <span v-if="props.count" class="ms-3">
-        <VIcon icon="mdi-fire" />
-        <span class="text-sm ms-1">{{ props.count?.toLocaleString() }}</span>
-      </span>
-    </VCardText>
-  </VCard>
+  <div>
+    <!-- 插件卡片 -->
+    <VHover>
+      <template #default="hover">
+        <VCard
+          v-if="isVisible"
+          v-bind="hover.props"
+          :width="props.width"
+          :height="props.height"
+          @click="openPluginDetail"
+          class="flex flex-col h-full"
+          :class="{
+            'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
+          }"
+        >
+          <div
+            class="relative flex flex-row items-start pa-3 justify-between grow"
+            :style="{ background: `${backgroundColor}` }"
+          >
+            <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 text-lg 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-0 text-white text-sm text-shadow overflow-hidden 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>
+          </div>
+          <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>
+            <div class="me-n3 absolute bottom-1 right-3">
+              <IconBtn>
+                <VIcon icon="mdi-dots-vertical" />
+                <VMenu v-model="menuVisible" activator="parent" close-on-content-click>
+                  <VList>
+                    <VListItem
+                      v-for="(item, i) in dropdownItems"
+                      v-show="item.show"
+                      :key="i"
+                      :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>
+          </VCardText>
+          <div v-if="hover.isHovering" class="me-n3 absolute top-0 right-5">
+            <VIcon class="cursor-move text-white">mdi-drag</VIcon>
+          </div>
+          <div v-else-if="props.plugin?.has_update" class="me-n3 absolute top-0 right-5">
+            <VIcon icon="mdi-new-box" class="text-white" />
+          </div>
+        </VCard>
+      </template>
+    </VHover>
 
-  <!-- 插件配置页面 -->
-  <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" />
-      </VCardText>
-      <VCardActions class="pt-3">
-        <VBtn v-if="pluginPageItems.length > 0" @click="showPluginInfo" variant="outlined" color="info">
-          查看数据
-        </VBtn>
-        <VSpacer />
-        <VBtn @click="savePluginConf" variant="elevated" prepend-icon="mdi-content-save" class="px-5"> 保存 </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
+    <!-- 插件配置页面 -->
+    <PluginConfigDialog
+      v-if="pluginConfigDialog"
+      v-model="pluginConfigDialog"
+      :plugin="props.plugin"
+      @save="configDone"
+      @close="pluginConfigDialog = false"
+      @switch="showPluginInfo"
+    />
 
-  <!-- 插件数据页面 -->
-  <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>
-      <VFab icon="mdi-cog" location="bottom" size="x-large" fixed app appear @click="showPluginConfig" />
-    </VCard>
-  </VDialog>
+    <!-- 插件数据页面 -->
+    <PluginDataDialog
+      v-if="pluginInfoDialog"
+      v-model="pluginInfoDialog"
+      :plugin="props.plugin"
+      @close="pluginInfoDialog = false"
+      @switch="showPluginConfig"
+    />
 
-  <!-- 进度框 -->
-  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
+    <!-- 进度框 -->
+    <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>
-      </VCardText>
-    </VCard>
-  </VDialog>
+    <!-- 更新日志 -->
+    <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 />
+        <VCardItem>
+          <VBtn @click="updatePlugin" block>
+            <template #prepend>
+              <VIcon icon="mdi-arrow-up-circle-outline" />
+            </template>
+            更新到最新版本
+          </VBtn>
+        </VCardItem>
+      </VCard>
+    </VDialog>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -500,4 +468,17 @@ watch(
   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

@@ -31,7 +31,7 @@ const getImgUrl = computed(() => {
 })
 
 // 跳转播放
-function goPlay(isHovering = false) {
+function goPlay(isHovering: boolean | null = false) {
   if (props.media?.link && isHovering) window.open(props.media?.link, '_blank')
 }
 </script>
@@ -43,18 +43,16 @@ function goPlay(isHovering = false) {
         v-bind="hover.props"
         :height="props.height"
         :width="props.width"
-        class="outline-none shadow ring-gray-500 rounded-lg"
+        class="outline-none shadow ring-gray-500"
         :class="{
-          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+          'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
           'ring-1': isImageLoaded,
         }"
-        @click.stop="goPlay(hover.isHovering)"
       >
         <VImg
           aspect-ratio="2/3"
           :src="getImgUrl"
           class="object-cover aspect-w-2 aspect-h-3"
-          :class="hover.isHovering ? 'on-hover' : ''"
           cover
           @load="isImageLoaded = true"
           @error="imageLoadError = true"
@@ -78,7 +76,9 @@ function goPlay(isHovering = false) {
         <!-- 详情 -->
         <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"
+          class="w-full h-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2 pb-5"
+          style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
+          @click.stop="goPlay(hover.isHovering)"
         >
           <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 ...">
@@ -89,9 +89,3 @@ function goPlay(isHovering = false) {
     </template>
   </VHover>
 </template>
-
-<style lang="scss">
-.on-hover img {
-  @apply brightness-50;
-}
-</style>

src/components/cards/StorageCard.vue

@@ -0,0 +1,172 @@
+<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 alist_png from '@images/misc/alist.svg'
+import api from '@/api'
+import AliyunAuthDialog from '../dialog/AliyunAuthDialog.vue'
+import U115AuthDialog from '../dialog/U115AuthDialog.vue'
+import RcloneConfigDialog from '../dialog/RcloneConfigDialog.vue'
+import AlistConfigDialog from '../dialog/AlistConfigDialog.vue'
+import { useToast } from 'vue-toast-notification'
+import { isNullOrEmptyObject } from '@/@core/utils'
+
+// 定义输入
+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)
+// AList配置对话框
+const aListConfigDialog = 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
+    case 'alist':
+      aListConfigDialog.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
+    case 'alist':
+      return alist_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
+  aListConfigDialog.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-if="isNullOrEmptyObject(storage.config)">未配置</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"
+    :conf="props.storage.config || {}"
+    @close="aliyunAuthDialog = false"
+    @done="handleDone"
+  />
+  <U115AuthDialog
+    v-if="u115AuthDialog"
+    v-model="u115AuthDialog"
+    :conf="props.storage.config || {}"
+    @close="u115AuthDialog = false"
+    @done="handleDone"
+  />
+  <RcloneConfigDialog
+    v-if="rcloneConfigDialog"
+    v-model="rcloneConfigDialog"
+    :conf="props.storage.config || {}"
+    @close="rcloneConfigDialog = false"
+    @done="handleDone"
+  />
+  <AlistConfigDialog
+    v-if="aListConfigDialog"
+    v-model="aListConfigDialog"
+    :conf="props.storage.config || {}"
+    @close="aListConfigDialog = false"
+    @done="handleDone"
+  />
+</template>

src/components/cards/SubscribeCard.vue

@@ -2,8 +2,9 @@
 import { useToast } from 'vue-toast-notification'
 import { useConfirm } from 'vuetify-use-dialog'
 import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
-import { formatDateDifference } from '@/@core/utils/formatters'
-import { formatSeason } from '@/@core/utils/formatters'
+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'
@@ -13,6 +14,9 @@ const props = defineProps({
   media: Object as PropType<Subscribe>,
 })
 
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
 // 定义触发的自定义事件
 const emit = defineEmits(['remove', 'save'])
 
@@ -28,21 +32,23 @@ const imageLoaded = ref(false)
 // 订阅弹窗
 const subscribeEditDialog = ref(false)
 
+// 订阅文件信息弹窗
+const subscribeFilesDialog = ref(false)
+
+// 分享订阅弹窗
+const subscribeShareDialog = ref(false)
+
+// 当前的订阅状态
+const subscribeState = ref<string>(props.media?.state ?? 'P')
+
 // 上一次更新时间
-const lastUpdateText = ref(props.media && props.media.last_update ? formatDateDifference(props.media.last_update) : '')
+const lastUpdateText = computed(() => (props.media?.last_update ? formatDateDifference(props.media.last_update) : ''))
 
 // 图片加载完成响应
 function imageLoadHandler() {
   imageLoaded.value = true
 }
 
-// 根据 type 返回不同的图标
-function getIcon() {
-  if (props.media?.type === '电影') return 'mdi-movie-open'
-  else if (props.media?.type === '电视剧') return 'mdi-television-play'
-  else return 'mdi-help-circle'
-}
-
 // 计算百分比
 function getPercentage() {
   if (props.media?.total_episode === 0) return 0
@@ -78,13 +84,39 @@ async function searchSubscribe() {
   }
 }
 
+// 切换订阅状态
+async function toggleSubscribeStatus(state: 'R' | 'S') {
+  try {
+    // 根据传入的 state 判断对应的操作文字
+    const action = state === 'S' ? '暂停' : '启用'
+    // 弹出确认框
+    const isConfirmed = await createConfirm({
+      title: `确认${action}`,
+      content: `是否${action}订阅 ${props.media?.name}？`,
+    })
+    if (!isConfirmed) return
+    // 调用 API 更新订阅状态
+    const result: { [key: string]: any } = await api.put(`subscribe/status/${props.media?.id}?state=${state}`)
+    // 提示
+    if (result.success) {
+      $toast.success(`${props.media?.name} 已${action}！`)
+      subscribeState.value = state
+      emit('save')
+    } else {
+      $toast.error(`${action}失败：${result.message}`)
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
 // 重置订阅
 async function resetSubscribe() {
   // 确认
   try {
     const isConfirmed = await createConfirm({
       title: '确认',
-      content: `重置后 ${props.media?.name} 已下载记录将被清除，未入库的剧集将会重新下载，是否确认？`,
+      content: `重置后 ${props.media?.name} 将恢复初始状态，已下载记录将被清除，未入库的内容将会重新下载，是否确认？`,
     })
     if (!isConfirmed) return
     // 重置
@@ -92,6 +124,7 @@ async function resetSubscribe() {
     // 提示
     if (result.success) {
       $toast.success(`${props.media?.name} 重置成功！`)
+      subscribeState.value = 'R'
       emit('save')
     } else $toast.error(`${props.media?.name} 重置失败：${result.message}`)
   } catch (e) {
@@ -99,24 +132,44 @@ async function resetSubscribe() {
   }
 }
 
+//  分享订阅
+async function shareSubscribe() {
+  subscribeShareDialog.value = true
+}
+
 // 编辑订阅响应
 async function editSubscribeDialog() {
   subscribeEditDialog.value = true
 }
 
-// 查看详情
+// 获得mediaid
+function getMediaId() {
+  if (props.media?.tmdbid) return `tmdb:${props.media?.tmdbid}`
+  else if (props.media?.doubanid) return `douban:${props.media?.doubanid}`
+  else if (props.media?.bangumiid) return `bangumi:${props.media?.bangumiid}`
+  else return props.media?.mediaid
+}
+
+// 查看媒体详情
 async function viewMediaDetail() {
   router.push({
     path: '/media',
     query: {
-      mediaid: `${props.media?.tmdbid ? `tmdb:${props.media?.tmdbid}` : `douban:${props.media?.doubanid}`}`,
+      mediaid: getMediaId(),
+      title: props.media?.name,
+      year: props.media?.year,
       type: props.media?.type,
     },
   })
 }
 
+// 查看文件详情
+async function viewSubscribeFiles() {
+  subscribeFilesDialog.value = true
+}
+
 // 弹出菜单
-const dropdownItems = ref([
+const dropdownItems = computed(() => [
   {
     title: '编辑',
     value: 1,
@@ -134,26 +187,52 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '查看详情',
+    title: '详情',
     value: 3,
     props: {
-      prependIcon: 'mdi-open-in-new',
+      prependIcon: 'mdi-information-outline',
       click: viewMediaDetail,
     },
   },
   {
-    title: '重置',
+    title: '文件',
     value: 4,
+    props: {
+      prependIcon: 'mdi-file-document-outline',
+      click: viewSubscribeFiles,
+    },
+  },
+  {
+    title: subscribeState.value === 'S' ? '启用' : '暂停',
+    value: 5,
+    props: {
+      prependIcon: subscribeState.value === 'S' ? 'mdi-play' : 'mdi-pause',
+      click: () => toggleSubscribeStatus(subscribeState.value === 'S' ? 'R' : 'S'),
+      color: subscribeState.value === 'S' ? 'success' : 'info',
+    },
+  },
+  {
+    title: '重置',
+    value: 6,
     props: {
       prependIcon: 'mdi-restore-alert',
       click: resetSubscribe,
       color: 'warning',
     },
+  },
+  {
+    title: '分享',
+    value: 7,
+    props: {
+      prependIcon: 'mdi-share',
+      click: shareSubscribe,
+      color: 'success',
+    },
     show: props.media?.type === '电视剧',
   },
   {
     title: '取消订阅',
-    value: 5,
+    value: 8,
     props: {
       prependIcon: 'mdi-trash-can-outline',
       color: 'error',
@@ -169,135 +248,175 @@ watch(
     if (newOpenState) editSubscribeDialog()
   },
 )
+
+// 监听订阅状态
+watch(
+  () => props.media?.state,
+  newState => {
+    subscribeState.value = newState ?? 'P'
+  },
+)
+
+// 计算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>
-  <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="white" />
-            <VMenu activator="parent" close-on-content-click>
-              <VList>
-                <template v-for="(item, i) in dropdownItems" :key="i">
-                  <VListItem
-                    v-if="item.show !== false"
-                    variant="plain"
-                    :base-color="item.props.color"
-                    @click="item.props.click"
-                  >
-                    <template #prepend>
-                      <VIcon :icon="item.props.prependIcon" />
-                    </template>
-                    <VListItemTitle v-text="item.title" />
-                  </VListItem>
-                </template>
-              </VList>
-            </VMenu>
-          </IconBtn>
-        </div>
-        <template #image>
-          <VImg
-            :src="props.media?.backdrop || props.media?.poster"
-            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 v-if="imageLoaded">
-          <VCardText class="flex items-center">
-            <div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md shadow-lg">
-              <VImg :src="props.media?.poster" 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>
+    <VHover>
+      <template #default="hover">
+        <VCard
+          v-bind="hover.props"
+          :key="props.media?.id"
+          class="flex flex-col h-full"
+          :class="{
+            'outline-dashed outline-1': props.media?.best_version && imageLoaded,
+            'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
+            'opacity-70': subscribeState === 'S',
+          }"
+          min-height="170"
+          @click="editSubscribeDialog"
+          :ripple="false"
+        >
+          <div class="me-n3 absolute top-1 right-2">
+            <IconBtn>
+              <VIcon icon="mdi-dots-vertical" color="white" />
+              <VMenu activator="parent" close-on-content-click>
+                <VList>
+                  <template v-for="(item, i) in dropdownItems" :key="i">
+                    <VListItem v-if="item.show !== false" :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>
-        </div>
-      </VCard>
-    </template>
-  </VHover>
-  <!-- 订阅编辑弹窗 -->
-  <SubscribeEditDialog
-    v-if="subscribeEditDialog"
-    v-model="subscribeEditDialog"
-    :subid="props.media?.id"
-    @remove="
-      () => {
-        emit('remove')
-        subscribeEditDialog = false
-      }
-    "
-    @save="
-      () => {
-        emit('save')
-        subscribeEditDialog = false
-      }
-    "
-    @close="subscribeEditDialog = false"
-  />
+          <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>
+            <div v-if="subscribeState === 'P'" class="absolute inset-0 bg-yellow-900 opacity-80 pointer-events-none" />
+          </template>
+          <div>
+            <VCardText class="flex items-center">
+              <div class="h-auto w-16 flex-shrink-0 overflow-hidden rounded-md shadow-lg" v-if="imageLoaded">
+                <VImg :src="posterUrl" aspect-ratio="2/3" cover>
+                  <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 v-if="hover.isHovering" class="me-n3 absolute top-1 right-10">
+              <IconBtn><VIcon class="cursor-move text-white">mdi-drag</VIcon></IconBtn>
+            </div>
+          </div>
+        </VCard>
+      </template>
+    </VHover>
+    <!-- 订阅编辑弹窗 -->
+    <SubscribeEditDialog
+      v-if="subscribeEditDialog"
+      v-model="subscribeEditDialog"
+      :subid="props.media?.id"
+      @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"
+    />
+  </div>
 </template>
-<style lang="scss">
+<style lang="scss" scoped>
 .subscribe-card-background {
   background-image: linear-gradient(90deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
 }

src/components/cards/SubscribeShareCard.vue

@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import { formatDateDifference } from '@/@core/utils/formatters'
+import type { SubscribeShare } from '@/api/types'
+import router from '@/router'
+import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
+import ForkSubscribeDialog from '../dialog/ForkSubscribeDialog.vue'
+
+// 输入参数
+const props = defineProps({
+  media: Object as PropType<SubscribeShare>,
+})
+
+// 定义删除事件
+const emit = defineEmits(['delete'])
+
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
+// 图片是否加载完成
+const imageLoaded = ref(false)
+
+// 订阅编辑弹窗
+const subscribeEditDialog = ref(false)
+
+// 复用订阅弹窗
+const forkSubscribeDialog = 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
+})
+
+// 获得mediaid
+function getMediaId() {
+  if (props.media?.tmdbid) return `tmdb:${props.media?.tmdbid}`
+  else if (props.media?.doubanid) return `douban:${props.media?.doubanid}`
+}
+
+// 查看媒体详情
+async function viewMediaDetail() {
+  router.push({
+    path: '/media',
+    query: {
+      mediaid: getMediaId(),
+      title: props.media?.name,
+      year: props.media?.year,
+      type: props.media?.type,
+    },
+  })
+}
+
+// 复用订阅
+function showForkSubscribe() {
+  forkSubscribeDialog.value = true
+}
+
+// 完成复用订阅
+function finishForkSubscribe(subid: number) {
+  subscribeId.value = subid
+  forkSubscribeDialog.value = false
+  subscribeEditDialog.value = true
+}
+
+// 删除订阅分享时处理
+function doDelete() {
+  forkSubscribeDialog.value = false
+  // 通知父组件刷新
+  emit('delete')
+}
+</script>
+
+<template>
+  <div class="h-full">
+    <VHover>
+      <template #default="hover">
+        <VCard
+          v-bind="hover.props"
+          :key="props.media?.id"
+          class="flex flex-col h-full"
+          :class="{
+            'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
+          }"
+          min-height="170"
+          @click="showForkSubscribe"
+        >
+          <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 class="h-full flex flex-col">
+            <VCardText class="flex items-center pb-1 grow">
+              <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="white" 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"
+    />
+    <!-- 复用订阅弹窗 -->
+    <ForkSubscribeDialog
+      v-if="forkSubscribeDialog"
+      v-model="forkSubscribeDialog"
+      :media="props.media"
+      @close="forkSubscribeDialog = false"
+      @fork="finishForkSubscribe"
+      @delete="doDelete"
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+.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, MediaInfo, TorrentInfo } from '@/api/types'
+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,66 +26,47 @@ const media = ref(props.torrent?.media_info)
 // 识别元数据
 const meta = ref(props.torrent?.meta_info)
 
+// 当前下载项
+const downloadItem = ref(props.torrent)
+
 // 站点图标
-const siteIcon = ref('')
+const siteIcons = ref<Record<number, string>>({})
 
 // 存储是否已经下载过的记录
-const downloaded = ref<String[]>([])
+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() {
+async function getSiteIcon(site: number | undefined) {
+  if (!site) return
   try {
-    siteIcon.value = (await api.get(`site/icon/${torrent?.value?.site}`)).data.icon
+    siteIcons.value[site] = (await api.get(`site/icon/${site}`)).data.icon
   } 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} ?`,
-  })
-
-  if (!isConfirmed) return
-
-  addDownload(_media, _torrent)
-}
-
-// 添加下载
-async function addDownload(_media: MediaInfo, _torrent: TorrentInfo) {
-  startNProgress()
-  try {
-    let result: { [key: string]: any }
-
-    if (_media) {
-      result = await api.post('download/', {
-        media_in: _media,
-        torrent_in: _torrent,
-      })
-    } else {
-      result = await api.post('download/add', _torrent)
-    }
-
-    if (result && result.success) {
-      // 添加下载成功
-      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 下载成功！`)
-      downloaded.value.push(_torrent?.enclosure || '')
-    } else {
-      // 添加下载失败
-      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 下载失败：${result?.message}！`)
-    }
-  } catch (error) {
-    console.error(error)
-  }
-  doneNProgress()
+  // 打开下载对话框
+  addDownloadDialog.value = true
 }
 
 // 打开种子详情页面
@@ -105,142 +79,582 @@ async function downloadTorrentFile() {
   window.open(torrent.value?.enclosure, '_blank')
 }
 
-// 促销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'
+// 获取优惠类型样式
+function getPromotionClass(downloadVolumeFactor: number | undefined, uploadVolumeFactor: number | undefined) {
+  if (!downloadVolumeFactor) return 'free-discount'
+  if (downloadVolumeFactor === 0) return 'free-discount'
+  else if (downloadVolumeFactor < 1) return 'percent-discount'
+  else if (uploadVolumeFactor !== undefined && uploadVolumeFactor > 1) return 'upload-bonus'
+  else return ''
+}
+
+// 打开更多来源对话框
+async function openMoreTorrentsDialog() {
+  props.more?.forEach(t => {
+    return getSiteIcon(t.torrent_info?.site)
+  })
+  showMoreTorrents.value = true
 }
 
 // 装载时查询站点图标
 onMounted(() => {
-  getSiteIcon()
+  getSiteIcon(props.torrent?.torrent_info?.site)
 })
 </script>
 
 <template>
-  <VCard
-    :width="props.width"
-    :height="props.height"
-    :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'elevated'"
-    @click="handleAddDownload"
-  >
-    <template v-if="!showMoreTorrents" #image>
-      <VAvatar class="absolute right-2 bottom-2 rounded" variant="flat" rounded="0">
-        <VImg :src="siteIcon" />
-      </VAvatar>
-    </template>
-    <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>
-        <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>
-    </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
+  <div class="h-full">
+    <VCard
+      :width="props.width || '100%'"
+      :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'flat'"
+      @click="handleAddDownload(props.torrent)"
+      class="torrent-card h-full"
+      :class="{ 'downloaded-card': downloaded.includes(torrent?.enclosure || '') }"
+    >
+      <!-- 优惠标签 -->
+      <div
         v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
-        :class="getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1"
+        class="discount-banner"
+        :class="getPromotionClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
       >
         {{ 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">
+      </div>
+
+      <!-- 媒体标题 -->
+      <div class="card-header">
+        <div class="media-title-wrapper flex flex-row flex-wrap justify-start">
+          <span class="media-title me-2">
+            {{ media?.title ?? meta?.name }}
+          </span>
+          <span v-if="meta?.season_episode" class="season-tag">{{ meta?.season_episode }}</span>
+        </div>
+
+        <!-- 站点信息条 -->
+        <div class="site-info">
+          <div class="d-flex align-center">
+            <img
+              :alt="torrent?.site_name"
+              v-if="siteIcons[torrent?.site || 0]"
+              :src="siteIcons[torrent?.site || 0]"
+              class="site-icon"
+            />
+            <span v-else class="site-fallback">{{ torrent?.site_name?.substring(0, 1) }}</span>
+            <span class="site-name">{{ torrent?.site_name }}</span>
+          </div>
+
+          <div class="seeder-peers">
+            <span v-if="torrent?.seeders" class="seed-info">
+              <VIcon size="small" color="success" icon="mdi-arrow-up"></VIcon>{{ torrent?.seeders }}
+            </span>
+            <span v-if="torrent?.peers" class="peer-info">
+              <VIcon size="small" color="warning" icon="mdi-arrow-down"></VIcon>{{ torrent?.peers }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 种子内容 -->
+      <div class="card-content">
+        <!-- 种子标题 -->
+        <div class="torrent-title" :title="torrent?.title">
+          {{ torrent?.title }}
+        </div>
+
+        <!-- 种子描述 -->
+        <div
+          v-if="meta?.subtitle || torrent?.description"
+          class="torrent-desc grow"
+          :title="meta?.subtitle || torrent?.description"
+        >
+          {{ meta?.subtitle || torrent?.description }}
+        </div>
+
+        <!-- 资源标签区 -->
+        <div class="tags-container">
+          <div v-if="meta?.edition" class="resource-tag edition">{{ meta?.edition }}</div>
+          <div v-if="meta?.resource_pix" class="resource-tag resolution">{{ meta?.resource_pix }}</div>
+          <div v-if="meta?.video_encode" class="resource-tag codec">{{ meta?.video_encode }}</div>
+          <div v-if="meta?.resource_team" class="resource-tag team">{{ meta?.resource_team }}</div>
+          <div v-for="(label, index) in torrent?.labels" :key="index" class="resource-tag label">{{ label }}</div>
+          <div v-if="torrent?.hit_and_run" class="resource-tag hr">H&R</div>
+          <div v-if="torrent?.freedate_diff" class="resource-tag expire">{{ torrent?.freedate_diff }}</div>
+        </div>
+      </div>
+
+      <!-- 卡片底部信息 -->
+      <div class="card-footer">
+        <div class="more-sources-wrapper" v-if="props.more && props.more.length > 0">
+          <div class="more-sources-toggle" @click.stop="openMoreTorrentsDialog">
+            <VIcon :icon="showMoreTorrents ? 'mdi-chevron-up' : 'mdi-chevron-down'" size="small" class="me-1"></VIcon>
+            <span>更多来源 ({{ props.more.length }})</span>
+          </div>
+        </div>
+
+        <VSpacer />
+
+        <!-- 体积和详情按钮并排 -->
+        <div class="card-actions">
+          <div v-if="torrent?.size" class="size-badge">
+            {{ formatFileSize(torrent.size) }}
+          </div>
+
+          <VBtn
+            size="small"
+            icon="mdi-information-outline"
+            variant="text"
+            color="primary"
+            class="detail-btn"
+            @click.stop="openTorrentDetail"
+          ></VBtn>
+        </div>
+      </div>
+    </VCard>
+
+    <!-- 更多来源对话框 - 改为独立对话框 -->
+    <VDialog v-model="showMoreTorrents" max-width="380px" location="center">
+      <VCard>
+        <VCardTitle class="py-2 d-flex align-center">
+          <span>其他来源</span>
+          <VSpacer />
+          <VBtn variant="text" size="small" icon="mdi-close" @click.stop="showMoreTorrents = false"></VBtn>
+        </VCardTitle>
+
         <VDivider />
-        <VChipGroup class="p-3" column>
-          <VChip
+
+        <VCardText class="more-sources-content">
+          <div
             v-for="(item, index) in props.more"
             :key="index"
-            @click.stop="handleAddDownload(item.torrent_info?.site_name, item.media_info, item.torrent_info)"
+            @click.stop="handleAddDownload(item)"
+            class="more-source-item cursor-pointer"
           >
-            <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"
+            <div class="source-site-info">
+              <img
+                :alt="item.torrent_info?.site_name"
+                v-if="siteIcons[item.torrent_info?.site || 0]"
+                :src="siteIcons[item.torrent_info?.site || 0]"
+                class="source-site-icon"
               />
-            </template>
-            {{ item.torrent_info.site_name }}
-          </VChip>
-        </VChipGroup>
-      </div>
-    </VExpandTransition>
-  </VCard>
+              <span v-else class="source-site-fallback">{{ item.torrent_info?.site_name?.substring(0, 1) }}</span>
+              <span class="source-site-name">{{ item.torrent_info.site_name }}</span>
+              <span v-if="item.meta_info?.season_episode" class="season-tag source-season-tag">
+                {{ item.meta_info.season_episode }}
+              </span>
+
+              <span
+                v-if="item.torrent_info?.downloadvolumefactor !== 1 || item.torrent_info?.uploadvolumefactor !== 1"
+                class="source-discount"
+                :class="
+                  getPromotionClass(item.torrent_info?.downloadvolumefactor, item.torrent_info?.uploadvolumefactor)
+                "
+              >
+                {{ item.torrent_info?.volume_factor }}
+              </span>
+            </div>
+
+            <div class="source-stats">
+              <span class="source-size">{{ formatFileSize(item.torrent_info?.size) }}</span>
+              <span class="source-seeders">
+                <VIcon size="x-small" color="success" icon="mdi-arrow-up"></VIcon>
+                {{ item.torrent_info?.seeders }}
+              </span>
+            </div>
+          </div>
+        </VCardText>
+      </VCard>
+    </VDialog>
+
+    <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>
+
+<style scoped>
+.torrent-card {
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: none;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s ease;
+  position: relative;
+}
+
+.torrent-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(var(--v-theme-primary), 0.3);
+}
+
+.discount-banner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: white;
+  padding: 4px 10px;
+  font-weight: 600;
+  font-size: 0.9rem;
+  border-radius: 0 0 0 12px;
+  z-index: 2;
+}
+
+.free-discount {
+  background-color: #4caf50;
+  font-weight: 700;
+}
+
+.percent-discount {
+  background-color: #ff5722;
+}
+
+.upload-bonus {
+  background-color: #9c27b0;
+}
+
+.size-badge {
+  background-color: rgba(var(--v-theme-primary), 0.9);
+  color: white;
+  padding: 2px 8px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  border-radius: 4px;
+  margin-right: 6px;
+  display: flex;
+  align-items: center;
+}
+
+.card-header {
+  padding: 12px 16px 0;
+}
+
+.media-title-wrapper {
+  margin-bottom: 8px;
+  padding-right: 2rem;
+}
+
+.media-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  color: rgba(var(--v-theme-on-surface), 0.87);
+}
+
+.season-tag {
+  font-size: 0.875rem;
+  background-color: #5c6bc0;
+  color: white;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
+.site-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.site-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  border-radius: 2px;
+}
+
+.site-fallback {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  font-weight: 700;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  background-color: rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 2px;
+}
+
+.site-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgba(var(--v-theme-on-surface), 0.85);
+}
+
+.seeder-peers {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.seed-info {
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+}
+
+.peer-info {
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+}
+
+.card-content {
+  padding: 0 16px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.torrent-title {
+  font-size: 0.9rem;
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: rgba(var(--v-theme-on-surface), 0.87);
+  margin-bottom: 8px;
+}
+
+.torrent-desc {
+  font-size: 0.85rem;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 8px;
+}
+
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.resource-tag {
+  font-size: 0.8rem;
+  padding: 3px 8px;
+  border-radius: 4px;
+  color: white;
+  font-weight: 700;
+}
+
+.edition {
+  background-color: #f44336;
+}
+
+.resolution {
+  background-color: #e91e63;
+}
+
+.codec {
+  background-color: #ff9800;
+}
+
+.team {
+  background-color: #03a9f4;
+}
+
+.expire {
+  background-color: #9c27b0;
+}
+
+.label {
+  background-color: #3f51b5;
+}
+
+.hr {
+  background-color: #000000;
+}
+
+.card-footer {
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  border-top: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  margin-top: auto;
+}
+
+.more-sources-wrapper {
+  position: relative;
+}
+
+.more-sources-toggle {
+  font-size: 0.875rem;
+  color: rgb(var(--v-theme-primary));
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.more-sources-toggle:hover {
+  background-color: rgba(var(--v-theme-primary), 0.08);
+}
+
+.more-sources-content {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.more-source-item {
+  padding: 8px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background-color 0.2s;
+  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+}
+
+.more-source-item:hover {
+  background-color: rgba(var(--v-theme-primary), 0.05);
+}
+
+.source-site-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.source-site-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+}
+
+.source-site-fallback {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.7rem;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  background-color: rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 2px;
+}
+
+.source-site-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.source-season-tag {
+  font-size: 0.75rem;
+  padding: 1px 4px;
+  margin-left: 4px;
+  background-color: #5c6bc0;
+}
+
+.source-discount {
+  font-weight: 700;
+  font-size: 0.8rem;
+  margin-left: 6px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  color: white;
+}
+
+.source-stats {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.source-size {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: rgb(var(--v-theme-primary));
+}
+
+.source-seeders {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-weight: 600;
+  font-size: 0.8rem;
+}
+
+.card-actions {
+  display: flex;
+  align-items: center;
+}
+
+.detail-btn {
+  border-radius: 50%;
+  min-width: 36px;
+  height: 36px;
+}
+
+.downloaded-card {
+  border: 2px solid #4caf50 !important;
+  opacity: 0.85;
+}
+
+@media (max-width: 640px) {
+  .resource-tag {
+    font-size: 0.75rem;
+    padding: 2px 6px;
+  }
+}
+
+.full-text {
+  white-space: normal;
+  word-break: break-word;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.menu-activator {
+  width: 100%;
+  cursor: pointer;
+}
+
+.break-words {
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.whitespace-break-spaces {
+  white-space: normal !important;
+}
+</style>

src/components/cards/TorrentItem.vue

@@ -1,26 +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, MediaInfo, TorrentInfo } from '@/api/types'
+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)
-
 // 种子信息
 const torrent = ref(props.torrent?.torrent_info)
 
@@ -33,63 +22,65 @@ const meta = ref(props.torrent?.meta_info)
 // 站点图标
 const siteIcon = ref('')
 
+// 站点图标加载状态
+const iconLoading = ref(false)
+const iconError = ref(false)
+
 // 存储是否已经下载过的记录
-const downloaded = ref<String[]>([])
+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) {
-    console.error(error)
+  if (!torrent?.value?.site || iconLoading.value) {
+    return
   }
+
+  iconLoading.value = true
+  iconError.value = false
+
+  try {
+    const response = await api.get(`site/icon/${torrent.value.site}`)
+    if (response && response.data && response.data.icon) {
+      siteIcon.value = response.data.icon
+    } else {
+      iconError.value = true
+    }
+  } catch (error) {
+    console.error('Failed to load site icon:', error)
+    iconError.value = true
+  } finally {
+    iconLoading.value = false
+  }
+}
+
+// 获取优惠类型样式
+function getPromotionClass(downloadVolumeFactor: number | undefined, uploadVolumeFactor: number | undefined) {
+  if (!downloadVolumeFactor) return 'free-discount'
+  if (downloadVolumeFactor === 0) return 'free-discount'
+  else if (downloadVolumeFactor < 1) return 'percent-discount'
+  else if (uploadVolumeFactor !== undefined && uploadVolumeFactor > 1) return 'upload-bonus'
+  else return ''
 }
 
 // 询问并添加下载
-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} ?`,
-  })
-
-  if (!isConfirmed) return
-
-  addDownload(_media, _torrent)
+async function handleAddDownload() {
+  // 打开下载对话框
+  addDownloadDialog.value = true
 }
 
-// 添加下载
-async function addDownload(_media: MediaInfo, _torrent: TorrentInfo) {
-  startNProgress()
-  try {
-    let result: { [key: string]: any }
+// 添加下载成功
+function addDownloadSuccess(url: string) {
+  addDownloadDialog.value = false
+  // 添加下载成功
+  downloaded.value.push(url)
+}
 
-    if (_media) {
-      result = await api.post('download/', {
-        media_in: _media,
-        torrent_in: _torrent,
-      })
-    } else {
-      result = await api.post('download/add', _torrent)
-    }
-
-    if (result && result.success) {
-      // 添加下载成功
-      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 下载成功！`)
-      downloaded.value.push(_torrent?.enclosure || '')
-    } else {
-      // 添加下载失败
-      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 下载失败：${result?.message}！`)
-    }
-  } catch (error) {
-    console.error(error)
-  }
-  doneNProgress()
+// 添加下载失败
+function addDownloadError(error: string) {
+  addDownloadDialog.value = false
 }
 
 // 打开种子详情页面
@@ -97,19 +88,6 @@ function openTorrentDetail() {
   window.open(torrent.value?.page_url, '_blank')
 }
 
-// 下载种子文件
-async function downloadTorrentFile() {
-  window.open(torrent.value?.enclosure, '_blank')
-}
-
-// 促销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'
-}
-
 // 装载时查询站点图标
 onMounted(() => {
   getSiteIcon()
@@ -117,88 +95,386 @@ onMounted(() => {
 </script>
 
 <template>
-  <VListItem @click="handleAddDownload" :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'flat'">
-    <template v-if="!showMoreTorrents" #prepend>
-      <VAvatar class="rounded" variant="flat" @click.stop="openTorrentDetail">
-        <VImg :src="siteIcon" />
-      </VAvatar>
-    </template>
-    <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>
-      </div>
-    </template>
-  </VListItem>
+  <div class="list-item-wrapper">
+    <VListItem
+      :value="props.torrent?.torrent_info?.enclosure"
+      class="torrent-item rounded"
+      :class="{ 'downloaded-item': downloaded.includes(torrent?.enclosure || '') }"
+      @click="handleAddDownload"
+    >
+      <template v-slot:prepend>
+        <div class="site-wrapper">
+          <img :alt="torrent?.site_name" v-if="siteIcon" :src="siteIcon" class="site-icon" />
+          <span v-else class="site-fallback">{{ torrent?.site_name?.substring(0, 1) }}</span>
+          <div class="site-name d-none d-sm-block">{{ torrent?.site_name }}</div>
+          <span
+            v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
+            class="free-tag"
+            :class="getPromotionClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
+          >
+            {{ torrent?.volume_factor }}
+          </span>
+        </div>
+      </template>
+
+      <VListItemTitle class="item-content">
+        <div class="item-header">
+          <div class="media-info flex flex-row flex-wrap justify-start">
+            <span class="media-title me-2">{{ media?.title ?? meta?.name }}</span>
+            <span v-if="meta?.season_episode" class="season-tag">{{ meta?.season_episode }}</span>
+          </div>
+        </div>
+
+        <div class="torrent-title" :title="torrent?.title">
+          {{ torrent?.title }}
+        </div>
+
+        <div class="torrent-description" :title="meta?.subtitle || torrent?.description || '暂无描述'">
+          {{ meta?.subtitle || torrent?.description || '暂无描述' }}
+        </div>
+
+        <div class="tags-container">
+          <div v-if="meta?.edition" class="resource-tag edition">{{ meta?.edition }}</div>
+          <div v-if="meta?.resource_pix" class="resource-tag resolution">{{ meta?.resource_pix }}</div>
+          <div v-if="meta?.video_encode" class="resource-tag codec">{{ meta?.video_encode }}</div>
+          <div v-if="meta?.resource_team" class="resource-tag team">{{ meta?.resource_team }}</div>
+          <div v-for="(label, index) in torrent?.labels" :key="index" class="resource-tag label">{{ label }}</div>
+          <div v-if="torrent?.hit_and_run" class="resource-tag hr">H&R</div>
+          <div v-if="torrent?.freedate_diff" class="resource-tag expire">{{ torrent?.freedate_diff }}</div>
+        </div>
+      </VListItemTitle>
+
+      <template v-slot:append>
+        <div class="item-actions">
+          <div class="torrent-stats">
+            <span v-if="torrent?.seeders" class="seed-info">
+              <VIcon size="small" color="success" icon="mdi-arrow-up"></VIcon>{{ torrent?.seeders }}
+            </span>
+            <span v-if="torrent?.peers" class="peer-info">
+              <VIcon size="small" color="warning" icon="mdi-arrow-down"></VIcon>{{ torrent?.peers }}
+            </span>
+          </div>
+
+          <div class="action-buttons">
+            <div v-if="torrent?.size" class="size-badge">
+              {{ formatFileSize(torrent.size) }}
+            </div>
+
+            <VBtn
+              density="comfortable"
+              variant="text"
+              color="primary"
+              icon="mdi-information-outline"
+              size="small"
+              class="detail-btn"
+              @click.stop="openTorrentDetail"
+            ></VBtn>
+          </div>
+        </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>
+
+<style scoped>
+.list-item-wrapper {
+  inline-size: 100%;
+}
+
+.torrent-item {
+  padding: 12px;
+  box-shadow: none;
+  margin-block-end: 8px;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.torrent-item:hover {
+  border-color: rgba(var(--v-theme-primary), 0.3);
+  background-color: rgba(var(--v-theme-primary), 0.04);
+  transform: translateY(-2px);
+}
+
+.site-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-inline-size: 100px;
+}
+
+.site-icon {
+  border-radius: 4px;
+  block-size: 32px;
+  inline-size: 32px;
+  margin-inline-end: 8px;
+}
+
+.site-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  block-size: 24px;
+  color: rgb(var(--v-theme-primary));
+  font-size: 0.8rem;
+  font-weight: 700;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+
+.site-name {
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-inline-end: 8px;
+}
+
+.season-tag {
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background-color: #5c6bc0;
+  color: white;
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-inline-end: 8px;
+  padding-block: 2px;
+  padding-inline: 6px;
+}
+
+.free-tag {
+  position: absolute;
+  z-index: 1;
+  border-radius: 4px;
+  color: white;
+  font-size: 0.7rem;
+  font-weight: 700;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  padding-block: 2px;
+  padding-inline: 6px;
+}
+
+.free-discount {
+  background-color: #4caf50;
+  font-weight: 700;
+}
+
+.percent-discount {
+  background-color: #ff5722;
+}
+
+.upload-bonus {
+  background-color: #9c27b0;
+}
+
+.item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  inline-size: 100%;
+}
+
+.item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  inline-size: 100%;
+}
+
+.media-info {
+  align-items: center;
+}
+
+.media-title {
+  color: rgba(var(--v-theme-on-surface), 0.87);
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.item-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.torrent-stats {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.seed-info {
+  display: flex;
+  align-items: center;
+  font-size: 0.95rem;
+  font-weight: 600;
+  gap: 4px;
+}
+
+.peer-info {
+  display: flex;
+  align-items: center;
+  font-size: 0.95rem;
+  font-weight: 600;
+  gap: 4px;
+}
+
+.size-badge {
+  border-radius: 4px;
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  color: rgb(var(--v-theme-primary));
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-inline-end: 6px;
+  padding-block: 2px;
+  padding-inline: 8px;
+}
+
+.torrent-title {
+  overflow: hidden;
+  color: rgba(var(--v-theme-on-surface), 0.87);
+  font-size: 0.9rem;
+  margin-block-end: 6px;
+  max-inline-size: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.torrent-description {
+  overflow: hidden;
+  color: rgba(var(--v-theme-on-surface), 0.65);
+  font-size: 0.8rem;
+  inline-size: 100%;
+  margin-block-end: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.resource-tag {
+  border-radius: 4px;
+  color: white;
+  font-size: 0.8rem;
+  font-weight: 700;
+  padding-block: 3px;
+  padding-inline: 8px;
+}
+
+.edition {
+  background-color: #f44336;
+}
+
+.resolution {
+  background-color: #e91e63;
+}
+
+.codec {
+  background-color: #ff9800;
+}
+
+.team {
+  background-color: #03a9f4;
+}
+
+.expire {
+  background-color: #9c27b0;
+}
+
+.label {
+  background-color: #3f51b5;
+}
+
+.hr {
+  background-color: #000;
+}
+
+.detail-btn {
+  border-radius: 50%;
+}
+
+.downloaded-item {
+  border-inline-start: 4px solid #4caf50;
+  opacity: 0.85;
+}
+
+.break-words {
+  word-break: break-word;
+  word-wrap: break-word;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.whitespace-break-spaces {
+  white-space: normal !important;
+}
+
+@media (width <= 600px) {
+  .torrent-item {
+    padding: 8px;
+  }
+
+  .site-icon,
+  .site-fallback {
+    block-size: 24px;
+    inline-size: 24px;
+  }
+
+  .site-wrapper {
+    flex-wrap: wrap;
+    margin-inline-end: 10px;
+    min-inline-size: 24px;
+  }
+
+  .site-name {
+    font-size: 0.8rem;
+    margin-inline-end: 4px;
+  }
+
+  .size-badge {
+    font-size: 0.7rem;
+  }
+
+  .resource-tag {
+    font-size: 0.75rem;
+    padding-block: 2px;
+    padding-inline: 6px;
+  }
+
+  .action-buttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .torrent-description {
+    max-inline-size: calc(100vw - 150px);
+  }
+}
+</style>

src/components/cards/UserCard.vue

@@ -0,0 +1,784 @@
+<script setup lang="ts">
+import api from '@/api'
+import { Subscribe, User } from '@/api/types'
+import { useUserStore } from '@/stores'
+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'
+
+// 扩展User类型以包含昵称字段
+interface ExtendedUser extends User {
+  nickname?: string
+}
+
+// 定义输入变量
+const props = defineProps({
+  // 用户信息
+  user: {
+    type: Object as PropType<ExtendedUser>,
+    required: true,
+  },
+  // 所有用户
+  users: {
+    type: Array as PropType<User[]>,
+    required: true,
+  },
+})
+
+// 当前用户的ID
+const currentLoginUserId = computed(() => useUserStore().userID)
+
+// 当前用户是否是管理员
+const currentUserIsSuperuser = computed(() => useUserStore().superUser)
+
+// 定义触发的自定义事件
+const emit = defineEmits(['remove', 'save'])
+
+// 确认框
+const createConfirm = useConfirm()
+
+// 用户信息弹窗
+const userEditDialog = ref(false)
+
+// 提示框
+const $toast = useToast()
+
+// 用户电影订阅数量
+const movieSubscriptions = ref(0)
+
+// 用户电视剧订阅数量
+const tvShowSubscriptions = ref(0)
+
+// 是否显示更多操作菜单
+const showMenu = ref(false)
+
+// 鼠标悬停状态
+const isHovered = ref(false)
+
+// 是否为移动设备
+const isMobile = ref(window.innerWidth < 600)
+
+// 显示名称 - 如果有昵称则优先显示昵称
+const displayName = computed(() => {
+  const settingsNickname = props.user.settings?.nickname as string | undefined
+  const nickname = props.user.nickname || settingsNickname
+  return nickname || props.user.name
+})
+
+// 计算用户卡片状态类
+const cardStatusClass = computed(() => {
+  if (!props.user.is_active) return 'user-card-inactive'
+  if (props.user.is_superuser) return 'user-card-admin'
+  return ''
+})
+
+// 按用户查询订阅数量
+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')
+}
+
+// 更新窗口大小监听
+function handleResize() {
+  isMobile.value = window.innerWidth < 600
+}
+
+onMounted(() => {
+  fetchSubscriptions()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+<template>
+  <VCard
+    class="user-card"
+    :class="[{ 'user-card-hover': isHovered }, cardStatusClass, { 'mobile-card': isMobile }]"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <!-- 管理员卡片装饰 -->
+    <div v-if="user.is_superuser" class="admin-decoration">
+      <div class="decoration-line"></div>
+      <div class="decoration-circle"><VIcon icon="mdi-shield-star" size="x-small" color="warning" /></div>
+      <div class="decoration-line"></div>
+    </div>
+
+    <!-- 用户头像和基本信息 -->
+    <div class="user-card-header" :class="{ 'admin-header': user.is_superuser }">
+      <div class="user-avatar-container">
+        <VAvatar
+          :size="isMobile ? 50 : 74"
+          rounded="lg"
+          class="user-avatar"
+          :class="{ 'admin-avatar': user.is_superuser, 'inactive-avatar': !user.is_active }"
+        >
+          <VImg :src="user.avatar || avatar1" :alt="user.name" />
+          <div v-if="!user.is_active" class="avatar-overlay">
+            <VIcon icon="mdi-account-lock" color="white" size="small" />
+          </div>
+        </VAvatar>
+        <div v-if="user.is_superuser" class="admin-crown">
+          <VIcon icon="mdi-crown" color="warning" size="small" />
+        </div>
+      </div>
+
+      <div class="user-info">
+        <div class="user-name-section">
+          <div class="name-and-badges">
+            <h3 class="user-name" :class="{ 'admin-name': user.is_superuser, 'inactive-name': !user.is_active }">
+              {{ displayName }}
+              <VIcon
+                v-if="user.nickname || user.settings?.nickname"
+                icon="mdi-format-quote-close"
+                size="x-small"
+                color="info"
+                class="nickname-icon"
+              />
+            </h3>
+            <div class="user-badges">
+              <VChip v-if="user.is_superuser" size="x-small" color="error" class="user-badge admin-badge">管理员</VChip>
+              <VChip v-else size="x-small" color="default" class="user-badge">普通用户</VChip>
+              <VChip size="x-small" :color="user.is_active ? 'success' : 'grey'" variant="tonal" class="user-badge">
+                {{ user.is_active ? '激活' : '已停用' }}
+              </VChip>
+              <VChip v-if="user.is_otp" size="x-small" color="info" variant="tonal" class="user-badge"> 2FA </VChip>
+            </div>
+          </div>
+        </div>
+
+        <!-- 移动端订阅数据信息 -->
+        <div v-if="isMobile" class="mobile-stats">
+          <div class="mobile-stat-item">
+            <VIcon size="x-small" icon="mdi-movie-outline" color="primary" />
+            <span>{{ movieSubscriptions }}</span>
+          </div>
+          <div class="mobile-stat-item">
+            <VIcon size="x-small" icon="mdi-television-classic" color="primary" />
+            <span>{{ tvShowSubscriptions }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 头部操作按钮 -->
+      <div class="user-actions" :class="{ 'mobile-actions': isMobile }">
+        <VBtn
+          icon
+          size="small"
+          :color="user.is_superuser ? 'warning' : 'primary'"
+          variant="text"
+          @click="editUser"
+          class="action-btn"
+        >
+          <VIcon icon="mdi-pencil" />
+        </VBtn>
+
+        <VBtn
+          v-if="props.user.id != currentLoginUserId && currentUserIsSuperuser"
+          icon
+          size="small"
+          color="error"
+          variant="text"
+          @click="removeUser"
+          class="action-btn"
+        >
+          <VIcon icon="mdi-delete" />
+        </VBtn>
+      </div>
+    </div>
+
+    <!-- 独立的邮箱显示 -->
+    <div class="email-container" :class="{ 'admin-email': user.is_superuser, 'inactive-email': !user.is_active }">
+      <VIcon icon="mdi-email-outline" size="small" color="primary" class="email-icon" />
+      <span class="email-text">{{ user.email || '未设置邮箱' }}</span>
+    </div>
+
+    <!-- PC端显示订阅统计信息 -->
+    <div v-if="!isMobile" class="user-card-body">
+      <div class="user-stats-container">
+        <div class="stat-item">
+          <div class="stat-icon-container" :class="{ 'admin-stat': user.is_superuser }">
+            <VIcon :color="user.is_superuser ? 'warning' : 'primary'" icon="mdi-movie-outline" size="20" />
+          </div>
+          <div class="stat-content">
+            <div class="stat-value">{{ movieSubscriptions }}</div>
+            <div class="stat-label">电影订阅</div>
+          </div>
+        </div>
+
+        <div class="stat-item">
+          <div class="stat-icon-container" :class="{ 'admin-stat': user.is_superuser }">
+            <VIcon :color="user.is_superuser ? 'warning' : 'primary'" icon="mdi-television-classic" size="20" />
+          </div>
+          <div class="stat-content">
+            <div class="stat-value">{{ tvShowSubscriptions }}</div>
+            <div class="stat-label">剧集订阅</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </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>
+
+<style scoped>
+.user-card {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.user-card-hover {
+  transform: translateY(-5px);
+}
+
+.user-card-admin {
+  border: 2px solid transparent;
+  background-clip: content-box, border-box;
+  background-image: linear-gradient(rgb(var(--v-theme-surface)), rgb(var(--v-theme-surface))),
+    linear-gradient(120deg, rgba(var(--v-theme-warning), 0.5), rgba(var(--v-theme-error), 0.5));
+  background-origin: border-box;
+}
+
+.user-card-inactive {
+  position: relative;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  background-color: rgba(var(--v-theme-surface), 0.95);
+  opacity: 0.85;
+}
+
+.user-card-inactive::before {
+  position: absolute;
+  z-index: 1;
+  backdrop-filter: grayscale(30%);
+  content: '';
+  inset: 0;
+  pointer-events: none;
+}
+
+.admin-decoration {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  inset-block-start: 0;
+  inset-inline: 0;
+  padding-block: 4px;
+  padding-inline: 12px;
+}
+
+.decoration-line {
+  flex: 1;
+  background: linear-gradient(90deg, rgba(var(--v-theme-warning), 0.1), rgba(var(--v-theme-warning), 0.7));
+  block-size: 1px;
+}
+
+.decoration-line:last-child {
+  background: linear-gradient(90deg, rgba(var(--v-theme-warning), 0.7), rgba(var(--v-theme-warning), 0.1));
+}
+
+.decoration-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(var(--v-theme-warning), 0.5);
+  border-radius: 50%;
+  block-size: 18px;
+  inline-size: 18px;
+  margin-block: 0;
+  margin-inline: 8px;
+}
+
+.user-card-header {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  padding-block: 20px 12px;
+  padding-inline: 16px;
+}
+
+.admin-header {
+  background: linear-gradient(to bottom, rgba(var(--v-theme-warning), 0.05), transparent);
+}
+
+.user-avatar-container {
+  position: relative;
+  margin-inline-end: 16px;
+}
+
+.user-avatar {
+  border: 4px solid rgb(var(--v-theme-surface));
+  box-shadow: 0 4px 8px rgba(var(--v-theme-on-surface), 0.1);
+  transition: all 0.3s ease;
+}
+
+.admin-avatar {
+  border: 4px solid rgba(var(--v-theme-warning), 0.1);
+  box-shadow: 0 5px 15px rgba(var(--v-theme-warning), 0.2);
+}
+
+.admin-avatar::after {
+  position: absolute;
+  border: 1px solid rgba(var(--v-theme-warning), 0.3);
+  border-radius: 12px;
+  animation: pulse 2.5s infinite;
+  content: '';
+  inset: -5px;
+  pointer-events: none;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.6;
+    transform: scale(0.95);
+  }
+
+  70% {
+    opacity: 0.2;
+    transform: scale(1.05);
+  }
+
+  100% {
+    opacity: 0.6;
+    transform: scale(0.95);
+  }
+}
+
+.inactive-avatar {
+  border-color: rgba(var(--v-theme-on-surface), 0.1);
+  filter: grayscale(50%);
+  opacity: 0.9;
+}
+
+.avatar-overlay {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  backdrop-filter: blur(1px);
+  background: rgba(var(--v-theme-on-surface), 0.2);
+  inset: 0;
+}
+
+.otp-badge {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: glow 2s infinite alternate;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+}
+
+.otp-badge .v-icon {
+  color: #4caf50 !important;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 40%));
+  font-size: 18px;
+}
+
+@keyframes glow {
+  from {
+    opacity: 0.9;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+}
+
+.mobile-otp {
+  inset-block-end: 0 !important;
+  inset-inline-end: 0 !important;
+}
+
+.mobile-otp .v-icon {
+  font-size: 16px;
+}
+
+.admin-crown {
+  position: absolute;
+  z-index: 5;
+  animation: float 3s ease-in-out infinite;
+  background: transparent;
+  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 40%));
+  inset-block-start: -10px;
+  inset-inline-start: -6px;
+  transform: rotate(-25deg);
+}
+
+.admin-crown .v-icon {
+  color: #ffc107 !important;
+  font-size: 24px;
+}
+
+@keyframes float {
+  0% {
+    transform: rotate(-25deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(-25deg) translateY(-3px);
+  }
+
+  100% {
+    transform: rotate(-25deg) translateY(0);
+  }
+}
+
+.nickname-icon {
+  animation: pulse-nickname 2s ease infinite;
+  filter: brightness(1.1);
+  margin-inline-start: 4px;
+  opacity: 0.9;
+  vertical-align: middle;
+}
+
+@keyframes pulse-nickname {
+  0%,
+  100% {
+    opacity: 0.9;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+
+.drag-handle {
+  cursor: move;
+  margin-inline-end: 6px;
+  opacity: 0.3;
+  transition: opacity 0.2s ease;
+}
+
+.user-card:hover .drag-handle {
+  opacity: 0.8;
+}
+
+.user-info {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  min-inline-size: 0;
+}
+
+.user-name-section {
+  margin-block-end: 8px;
+}
+
+.name-and-badges {
+  display: flex;
+  flex-direction: column;
+  margin-block-end: 4px;
+}
+
+.user-name {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-block: 0 4px;
+  margin-inline: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.admin-name {
+  color: rgb(var(--v-theme-warning));
+  font-weight: 700;
+  text-shadow: 0 1px 2px rgba(var(--v-theme-warning), 0.1);
+}
+
+.inactive-name {
+  color: rgba(var(--v-theme-on-surface), 0.6);
+}
+
+.user-badges {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 4px;
+  margin-block-end: 4px;
+  -ms-overflow-style: none;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.user-badges::-webkit-scrollbar {
+  display: none;
+}
+
+.user-badge {
+  flex-shrink: 0;
+  font-size: 0.7rem;
+  white-space: nowrap;
+}
+
+.admin-badge {
+  border: 1px solid rgba(var(--v-theme-error), 0.3);
+}
+
+.user-account,
+.user-email {
+  position: absolute;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  color: rgba(var(--v-theme-on-surface), 0.7);
+  font-size: 0.8rem;
+  inline-size: 100%;
+  inset-block-start: 100%;
+  inset-inline-start: 0;
+  margin-block-start: 4px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.account-label {
+  color: rgba(var(--v-theme-on-surface), 0.5);
+  margin-inline-end: 4px;
+}
+
+.account-value {
+  font-weight: 500;
+}
+
+.info-icon {
+  margin-inline-end: 4px;
+  opacity: 0.6;
+}
+
+.email-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-actions {
+  display: flex;
+  align-items: flex-start;
+}
+
+.mobile-actions {
+  position: absolute;
+  display: flex;
+  gap: 4px;
+  inset-block-start: 10px;
+  inset-inline-end: 10px;
+}
+
+.action-btn {
+  opacity: 0.7;
+  transition: all 0.3s ease;
+}
+
+.action-btn:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.mobile-card {
+  border-radius: 12px;
+}
+
+.mobile-stats {
+  position: relative;
+  z-index: 5;
+  display: flex;
+  justify-content: flex-start;
+  gap: 20px;
+  margin-block-start: 8px;
+  padding-block: 4px;
+  padding-inline: 0;
+}
+
+.mobile-stat-item {
+  display: flex;
+  align-items: center;
+  font-size: 0.95rem;
+  gap: 6px;
+}
+
+.mobile-stat-item .v-icon {
+  font-size: 18px !important;
+}
+
+.mobile-stat-item span {
+  font-weight: 500;
+}
+
+.user-card-body {
+  padding-block: 0 16px;
+  padding-inline: 16px;
+}
+
+.user-stats-container {
+  display: flex;
+  justify-content: space-around;
+  padding: 12px;
+  border-radius: 10px;
+  background-color: rgba(var(--v-theme-on-surface), 0.02);
+  margin-block-start: 8px;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.stat-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  block-size: 40px;
+  box-shadow: 0 2px 6px rgba(var(--v-theme-on-surface), 0.05);
+  inline-size: 40px;
+}
+
+.admin-stat {
+  background-color: rgba(var(--v-theme-warning), 0.1);
+  box-shadow: 0 2px 6px rgba(var(--v-theme-warning), 0.2);
+}
+
+.stat-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-value {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.stat-label {
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  font-size: 0.75rem;
+}
+
+.menu-item {
+  font-size: 0.9rem;
+}
+
+.text-error {
+  color: rgb(var(--v-theme-error));
+}
+
+.email-container {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  background-color: transparent;
+  border-block-start: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+  padding-block: 8px;
+  padding-inline: 16px;
+  white-space: nowrap;
+}
+
+.admin-email {
+  background-color: transparent;
+}
+
+.inactive-email {
+  background-color: transparent;
+  opacity: 0.9;
+}
+
+.email-container .email-icon {
+  flex-shrink: 0;
+  margin-inline-end: 8px;
+  opacity: 0.7;
+}
+
+.email-container .email-text {
+  overflow: hidden;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  font-size: 0.9rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mobile-card .email-container {
+  padding-block: 6px;
+  padding-inline: 12px;
+}
+
+.mobile-card .email-container .email-text {
+  font-size: 0.8rem;
+}
+
+.mobile-card .user-avatar-container {
+  position: relative;
+}
+
+.mobile-card .otp-badge {
+  position: absolute;
+  z-index: 10;
+  inset-block-end: 0 !important;
+  inset-inline-end: 0 !important;
+}
+</style>

src/components/cards/WorkflowTaskCard.vue

@@ -0,0 +1,317 @@
+<script lang="ts" setup>
+import { Workflow } from '@/api/types'
+import { useToast } from 'vue-toast-notification'
+import { useConfirm } from 'vuetify-use-dialog'
+import WorkflowAddEditDialog from '@/components/dialog/WorkflowAddEditDialog.vue'
+import WorkflowActionsDialog from '@/components/dialog/WorkflowActionsDialog.vue'
+import api from '@/api'
+
+// 定义输入参数
+const props = defineProps({
+  workflow: {
+    required: true,
+    type: Object as PropType<Workflow>,
+  },
+})
+
+// 定义事件
+const emit = defineEmits(['refresh'])
+
+// 提示框
+const $toast = useToast()
+
+// 确认框
+const createConfirm = useConfirm()
+
+// 编辑对话框
+const editDialog = ref(false)
+
+// 流程对话框
+const flowDialog = ref(false)
+
+// 加载中
+const loading = ref(false)
+
+// 编辑任务
+function handleEdit(item: Workflow) {
+  editDialog.value = true
+}
+
+// 编辑流程
+function handleFlow(item: Workflow) {
+  flowDialog.value = true
+}
+
+// 计算已完成的动作数
+function resolveDoneActions(item: Workflow) {
+  return item.current_action?.split(',').length || 0
+}
+
+// 编辑完成
+function editDone() {
+  editDialog.value = false
+  flowDialog.value = false
+  emit('refresh')
+}
+
+// 删除任务
+async function handleDelete(item: Workflow) {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认删除任务 ${item.name} ?`,
+  })
+
+  if (!isConfirmed) return
+
+  try {
+    const result: { [key: string]: string } = await api.delete(`workflow/${item.id}`)
+    if (result.success) {
+      $toast.success('删除任务成功！')
+      emit('refresh')
+    } else {
+      $toast.error(`删除任务失败：${result.message}`)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 开始任务
+async function handleEnable(item: Workflow) {
+  loading.value = true
+  try {
+    const result: { [key: string]: string } = await api.post(`workflow/${item.id}/start`)
+    if (result.success) {
+      $toast.success('启用任务成功！')
+      emit('refresh')
+    } else {
+      $toast.error(`启用任务失败：${result.message}`)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  loading.value = false
+}
+
+// 停用任务
+async function handlePause(item: Workflow) {
+  loading.value = true
+  try {
+    const result: { [key: string]: string } = await api.post(`workflow/${item.id}/pause`)
+    if (result.success) {
+      $toast.success('停用任务成功！')
+      emit('refresh')
+    } else {
+      $toast.error(`停用任务失败：${result.message}`)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  loading.value = false
+}
+
+// 立即执行任务
+async function handleRun(item: Workflow, from_begin: boolean) {
+  loading.value = true
+  try {
+    setTimeout(() => {
+      emit('refresh')
+    }, 500)
+    const result: { [key: string]: string } = await api.post(`workflow/${item.id}/run?from_begin=${from_begin}`, {
+      from_begin,
+    })
+    if (result.success) {
+      $toast.success('任务执行完成！')
+      emit('refresh')
+    } else {
+      $toast.error(`任务执行失败：${result.message}`)
+      emit('refresh')
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  loading.value = false
+}
+
+// 重置任务
+async function handleReset(item: Workflow) {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认重置任务 ${item.name} ?`,
+  })
+
+  if (!isConfirmed) return
+
+  try {
+    const result: { [key: string]: string } = await api.post(`workflow/${item.id}/reset`)
+    if (result.success) {
+      $toast.success('重置任务成功！')
+      emit('refresh')
+    } else {
+      $toast.error(`重置任务失败：${result.message}`)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 计算状态颜色
+const resolveStatusVariant = (status: string | undefined) => {
+  if (status === 'S') return { color: 'success', text: '成功' }
+  else if (status === 'R') return { color: 'primary', text: '运行中' }
+  else if (status === 'F') return { color: 'error', text: '失败' }
+  else if (status === 'P') return { color: 'secondary', text: '暂停' }
+  else return { color: 'info', text: '等待' }
+}
+
+// 计算当前动作占比
+const resolveProgress = (item: Workflow) => {
+  const current_action_length = item.current_action?.split(',').length || 0
+  return item.actions?.length ? Math.round((current_action_length / (item.actions.length || 1)) * 100) : 0
+}
+</script>
+<template>
+  <div class="h-full">
+    <VHover v-slot="hover">
+      <VCard
+        v-bind="hover.props"
+        class="mx-auto h-full"
+        @click="handleFlow(workflow)"
+        :ripple="false"
+        :loading="loading"
+        :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
+      >
+        <VCardItem class="py-3" :class="`bg-${resolveStatusVariant(workflow?.state).color}`">
+          <template #prepend>
+            <VAvatar variant="text" class="me-2">
+              <VIcon
+                v-if="workflow?.state === 'P'"
+                color="success"
+                size="x-large"
+                icon="mdi-play"
+                @click.stop="handleEnable(workflow)"
+              />
+              <VIcon v-else color="warning" icon="mdi-pause" size="x-large" @click.stop="handlePause(workflow)" />
+            </VAvatar>
+          </template>
+          <VCardTitle class="text-white">
+            {{ workflow?.name }}
+          </VCardTitle>
+          <VCardSubtitle class="text-white">{{ workflow?.description }}</VCardSubtitle>
+          <template #append>
+            <IconBtn>
+              <VIcon icon="mdi-vector-polyline-edit" @click.stop="handleFlow(workflow)" />
+            </IconBtn>
+            <IconBtn>
+              <VIcon icon="mdi-dots-vertical" />
+              <VMenu activator="parent" close-on-content-click>
+                <VList>
+                  <VListItem base-color="primary" @click="handleEdit(workflow)">
+                    <template #prepend>
+                      <VIcon icon="mdi-note-edit" />
+                    </template>
+                    <VListItemTitle>编辑任务</VListItemTitle>
+                  </VListItem>
+                  <VListItem v-if="workflow.current_action" base-color="info" @click="handleRun(workflow, false)">
+                    <template #prepend>
+                      <VIcon icon="mdi-play-speed" />
+                    </template>
+                    <VListItemTitle>继续执行</VListItemTitle>
+                  </VListItem>
+                  <VListItem v-if="workflow.current_action" base-color="info" @click="handleRun(workflow, true)">
+                    <template #prepend>
+                      <VIcon icon="mdi-replay" />
+                    </template>
+                    <VListItemTitle>重新执行</VListItemTitle>
+                  </VListItem>
+                  <VListItem v-else base-color="info" @click="handleRun(workflow, true)">
+                    <template #prepend>
+                      <VIcon icon="mdi-run" />
+                    </template>
+                    <VListItemTitle>立即执行</VListItemTitle>
+                  </VListItem>
+                  <VListItem base-color="warning" @click="handleReset(workflow)">
+                    <template #prepend>
+                      <VIcon icon="mdi-restore-alert" />
+                    </template>
+                    <VListItemTitle>重置任务</VListItemTitle>
+                  </VListItem>
+                  <VListItem base-color="error" @click="handleDelete(workflow)">
+                    <template #prepend>
+                      <VIcon icon="mdi-delete" />
+                    </template>
+                    <VListItemTitle>删除任务</VListItemTitle>
+                  </VListItem>
+                </VList>
+              </VMenu>
+            </IconBtn>
+          </template>
+        </VCardItem>
+        <VDivider />
+        <VCardText>
+          <div class="d-flex flex-column gap-y-4">
+            <div class="d-flex flex-wrap gap-x-6">
+              <div class="flex-1">
+                <div class="mb-1">定时</div>
+                <h5 class="text-h6">{{ workflow?.timer }}</h5>
+              </div>
+              <div class="flex-1">
+                <div class="mb-1">状态</div>
+                <h5 class="text-h6" :class="`text-${resolveStatusVariant(workflow?.state).color}`">
+                  {{ resolveStatusVariant(workflow?.state).text }}
+                </h5>
+              </div>
+            </div>
+            <div class="d-flex flex-wrap gap-x-6">
+              <div class="flex-1">
+                <div class="mb-1">动作数</div>
+                <div>
+                  <VAvatar size="32" color="primary" variant="tonal">
+                    <span class="text-sm">{{ workflow?.actions?.length }}</span>
+                  </VAvatar>
+                </div>
+              </div>
+              <div class="flex-1">
+                <div class="mb-1">已执行次数</div>
+                <h5 class="text-h6">{{ workflow?.run_count }}</h5>
+              </div>
+            </div>
+            <div class="d-flex flex-wrap gap-x-6">
+              <div class="flex-1">
+                <div class="mb-1">进度</div>
+                <div class="d-flex align-center gap-5">
+                  <div class="flex-grow-1">
+                    <VProgressLinear color="info" rounded :model-value="resolveProgress(workflow)" />
+                  </div>
+                  <span> {{ resolveProgress(workflow) }}% </span>
+                </div>
+              </div>
+            </div>
+            <div class="d-flex flex-wrap gap-x-6" v-if="workflow?.result">
+              <div class="flex-1">
+                <div class="mb-1">错误信息</div>
+                <div class="text-error">{{ workflow?.result }}</div>
+              </div>
+            </div>
+          </div>
+        </VCardText>
+      </VCard>
+    </VHover>
+    <!-- 流程对话框 -->
+    <WorkflowActionsDialog
+      v-if="flowDialog"
+      v-model="flowDialog"
+      @close="flowDialog = false"
+      @save="editDone"
+      :workflow="workflow"
+    />
+    <!-- 编辑对话框 -->
+    <WorkflowAddEditDialog
+      v-if="editDialog"
+      v-model="editDialog"
+      @close="editDialog = false"
+      @save="editDone"
+      :workflow="workflow"
+    />
+  </div>
+</template>

src/components/dialog/AddDownloadDialog.vue

@@ -0,0 +1,193 @@
+<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, VChip } from 'vuetify/lib/components/index.mjs'
+
+// 输入参数
+const props = defineProps({
+  title: String,
+  media: Object as PropType<MediaInfo>,
+  torrent: Object as PropType<TorrentInfo>,
+})
+
+// 定义成功和失败事件
+const emit = defineEmits(['done', 'error', 'close'])
+
+// 提示框
+const $toast = useToast()
+
+// 选择的下载器
+const selectedDownloader = ref<string | null>(null)
+
+// 选择的保存目录
+const selectedDirectory = ref<string | null>(null)
+
+// 下载器
+const downloaders = ref<DownloaderConf[]>([])
+
+// 所有目录设置
+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)]
+})
+
+// 调用API查询下载器设置
+async function loadDownloaderSetting() {
+  try {
+    downloaders.value = await api.get('download/clients')
+  } 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="35rem" scrollable>
+    <VCard>
+      <VCardTitle class="py-3 me-12">
+        <VIcon icon="mdi-download" class="me-2" />
+        <span v-if="title">{{ torrent?.site_name }} - {{ title }}</span>
+        <span v-else>确认下载</span>
+      </VCardTitle>
+      <DialogCloseBtn @click="emit('close')" />
+      <VDivider />
+      <VList lines="one">
+        <VListItem>
+          <template #prepend>
+            <VIcon icon="mdi-web"></VIcon>
+          </template>
+          <VListItemTitle>
+            <span class="whitespace-break-spaces me-2">{{ torrent?.title }}</span>
+            <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>
+        </VListItem>
+        <VListItem v-if="torrent?.description">
+          <template #prepend>
+            <VIcon icon="mdi-subtitles-outline"></VIcon>
+          </template>
+          <VListItemTitle>
+            <span class="text-body-2 whitespace-break-spaces">{{ torrent?.description }}</span>
+          </VListItemTitle>
+        </VListItem>
+        <VListItem v-if="torrent?.size">
+          <template #prepend>
+            <VIcon icon="mdi-database"></VIcon>
+          </template>
+          <VListItemTitle>
+            <span class="text-body-2">
+              <VChip variant="tonal" label>
+                {{ formatFileSize(torrent?.size || 0) }}
+              </VChip>
+            </span>
+          </VListItemTitle>
+        </VListItem>
+      </VList>
+      <VRow class="px-7">
+        <VCol cols="12" md="4">
+          <VSelect
+            v-model="selectedDownloader"
+            :items="downloaderOptions"
+            size="small"
+            label="下载器（默认）"
+            variant="underlined"
+            placeholder="留空默认"
+            density="compact"
+          />
+        </VCol>
+        <VCol cols="12" md="8">
+          <VCombobox
+            v-model="selectedDirectory"
+            :items="targetDirectories"
+            label="保存目录（自动）"
+            size="small"
+            placeholder="留空自动匹配"
+            variant="underlined"
+            density="compact"
+          />
+        </VCol>
+      </VRow>
+      <VCardText class="text-center">
+        <VBtn variant="elevated" :disabled="loading" @click="addDownload" :prepend-icon="icon" class="px-5">
+          {{ buttonText }}
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/AlistConfigDialog.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import api from '@/api'
+
+// 定义输入
+const props = defineProps({
+  conf: {
+    type: Object as PropType<{ [key: string]: any }>,
+    required: true,
+  },
+})
+
+// 定义事件
+const emit = defineEmits(['done', 'close'])
+
+// 完成
+async function handleDone() {
+  await savaAlistConfig()
+  emit('done')
+}
+
+// 保存rclone设置
+async function savaAlistConfig() {
+  try {
+    await api.post(`storage/save/alist`, props.conf)
+  } catch (e) {
+    console.error(e)
+  }
+}
+</script>
+
+<template>
+  <VDialog width="50rem" scrollable max-height="85vh">
+    <VCard title="AList配置" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VTextField v-model="props.conf.url" hint="AList服务地址" label="地址" persistent-hint />
+          </VCol>
+          <VCol cols="12" md="6">
+            <VTextField v-model="props.conf.username" hint="AList登录用户名" label="用户名" persistent-hint />
+          </VCol>
+          <VCol cols="12" md="6">
+            <VTextField
+              type="password"
+              v-model="props.conf.password"
+              hint="AList登录密码"
+              label="密码"
+              persistent-hint
+            />
+          </VCol>
+        </VRow>
+      </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/AliyunAuthDialog.vue

@@ -1,18 +1,19 @@
 <script lang="ts" setup>
-import QrcodeVue from 'qrcode.vue'
 import api from '@/api'
 
+// 定义输入
+defineProps({
+  conf: {
+    type: Object as PropType<{ [key: string]: any }>,
+    required: true,
+  },
+})
+
 // 定义事件
 const emit = defineEmits(['done', 'close'])
 
 // 二维码内容
-const qrCodeContent = ref('')
-
-// ck参数
-const ck = ref('')
-
-// t参数
-const t = ref('')
+const qrCodeUrl = ref('')
 
 // 下方的提示信息
 const text = ref('请用阿里云盘 App 扫码')
@@ -25,17 +26,17 @@ let timeoutTimer: NodeJS.Timeout | undefined = undefined
 
 // 完成
 async function handleDone() {
+  clearTimeout(timeoutTimer)
   emit('done')
 }
 
 // 调用/aliyun/qrcode api生成二维码
 async function getQrcode() {
   try {
-    const result: { [key: string]: any } = await api.get('/aliyun/qrcode')
+    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
+      qrCodeUrl.value = result.data.codeUrl
+      timeoutTimer = setTimeout(checkQrcode, 3000)
     } else {
       text.value = result.message
     }
@@ -47,26 +48,21 @@ async function getQrcode() {
 // 调用/aliyun/check api验证二维码
 async function checkQrcode() {
   try {
-    const result: { [key: string]: any } = await api.get('/aliyun/check', {
-      params: {
-        ck: ck.value,
-        t: t.value,
-      },
-    })
+    const result: { [key: string]: any } = await api.get('/storage/check/alipan')
     if (result.success && result.data) {
-      const qrCodeStatus = result.data.qrCodeStatus
+      const qrCodeStatus = result.data.status
       text.value = result.data.tip
-      if (qrCodeStatus == 'CONFIRMED') {
-        // 已确认完成
+      if (qrCodeStatus == 'LoginSuccess') {
+        // 登录成功
         alertType.value = 'success'
         handleDone()
-      } else if (qrCodeStatus == 'NEW' || qrCodeStatus == 'SCANED') {
+      } else if (qrCodeStatus == 'WaitLogin' || qrCodeStatus == 'ScanSuccess') {
+        // 等待登录扫码成功
         alertType.value = 'info'
-        // 新建、待扫码
         clearTimeout(timeoutTimer)
         timeoutTimer = setTimeout(checkQrcode, 3000)
       } else {
-        // 过期或者已取消
+        // 二维码过期
         alertType.value = 'error'
       }
     } else {
@@ -80,7 +76,6 @@ async function checkQrcode() {
 
 onMounted(async () => {
   await getQrcode()
-  timeoutTimer = setTimeout(checkQrcode, 3000)
 })
 
 onUnmounted(() => {
@@ -94,7 +89,13 @@ onUnmounted(() => {
       <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" />
+          <VImg class="mx-auto" :src="qrCodeUrl" width="200" height="200">
+            <template #placeholder>
+              <div class="w-full h-full">
+                <VSkeletonLoader class="object-cover aspect-w-1 aspect-h-1" />
+              </div>
+            </template>
+          </VImg>
         </div>
         <VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
           <template #prepend />

src/components/dialog/ForkSubscribeDialog.vue

@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import api from '@/api'
+import { doneNProgress, startNProgress } from '@/api/nprogress'
+import { SubscribeShare } from '@/api/types'
+import router from '@/router'
+import { useToast } from 'vue-toast-notification'
+import { VBtn } from 'vuetify/lib/components/index.mjs'
+
+// 输入参数
+const props = defineProps({
+  media: Object as PropType<SubscribeShare>,
+})
+
+// 定义事件
+const emit = defineEmits(['fork', 'delete', 'close'])
+
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
+// 提示框
+const $toast = useToast()
+
+// 处理中
+const processing = ref(false)
+
+// 删除中
+const deleting = ref(false)
+
+// 是否折叠
+const isExpanded = ref(false)
+
+// follow用户列表
+const followUsers = ref<string[]>([])
+
+// 当前用户是否已follow
+const isFollowed = computed(() => followUsers.value.includes(props.media?.share_uid || ''))
+
+// 折叠展开
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value
+}
+
+// 加载follow用户列表
+async function queryFollowUsers() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/FollowSubscribers')
+    followUsers.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// follow用户
+async function followUser() {
+  try {
+    const result: { [key: string]: any } = await api.post(`subscribe/follow?share_uid=${props.media?.share_uid}`)
+    if (result.success) {
+      queryFollowUsers()
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// unfollow用户
+async function unfollowUser() {
+  try {
+    const result: { [key: string]: any } = await api.delete('subscribe/follow', {
+      params: {
+        share_uid: props.media?.share_uid,
+      },
+    })
+    if (result.success) {
+      queryFollowUsers()
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 计算海报图片地址
+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
+})
+
+// 获得mediaid
+function getMediaId() {
+  if (props.media?.tmdbid) return `tmdb:${props.media?.tmdbid}`
+  else if (props.media?.doubanid) return `douban:${props.media?.doubanid}`
+}
+
+// 查看媒体详情
+async function viewMediaDetail() {
+  router.push({
+    path: '/media',
+    query: {
+      mediaid: getMediaId(),
+      title: props.media?.name,
+      year: props.media?.year,
+      type: props.media?.type,
+    },
+  })
+}
+
+// 复用订阅
+async function doFork() {
+  // 开始处理
+  startNProgress()
+  try {
+    processing.value = true
+    // 请求API
+    const result: { [key: string]: any } = await api.post('subscribe/fork', props.media)
+    // 订阅状态
+    if (result.success) {
+      $toast.success(`${props.media?.share_title} 添加订阅成功！`)
+      // 完成
+      emit('fork', result.data.id)
+    } else {
+      $toast.error(`${props.media?.share_title} 添加订阅失败：${result.message}！`)
+    }
+  } catch (error) {
+    console.error(error)
+  } finally {
+    processing.value = false
+    doneNProgress()
+  }
+}
+
+// 删除订阅分享
+async function doDelete() {
+  // 开始处理
+  startNProgress()
+  try {
+    deleting.value = true
+    // 请求API
+    const result: { [key: string]: any } = await api.delete(`subscribe/share/${props.media?.id}`, {
+      params: {
+        share_uid: globalSettings.USER_UNIQUE_ID,
+      },
+    })
+    // 订阅状态
+    if (result.success) {
+      $toast.success(`${props.media?.share_title} 取消分享成功！`)
+      // 完成
+      emit('delete', result.data.id)
+    } else {
+      $toast.error(`${props.media?.share_title} 取消分享失败：${result.message}！`)
+    }
+  } catch (error) {
+    console.error(error)
+  } finally {
+    deleting.value = false
+    doneNProgress()
+  }
+}
+
+onMounted(() => {
+  queryFollowUsers()
+})
+</script>
+<template>
+  <VDialog max-width="40rem" scrollable>
+    <VCard>
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText>
+        <VCol>
+          <div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
+            <div class="ma-auto">
+              <VImg
+                width="10rem"
+                aspect-ratio="2/3"
+                class="object-cover aspect-w-2 aspect-h-3 rounded-lg ring-1 ring-gray-500"
+                :src="posterUrl"
+                @click="viewMediaDetail"
+                cover
+              >
+                <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-grow">
+              <VCardItem>
+                <VCardTitle
+                  class="text-center text-md-left break-words whitespace-break-spaces line-clamp-2 overflow-hidden text-ellipsis"
+                >
+                  {{ props.media?.share_title }}
+                </VCardTitle>
+                <VCardSubtitle
+                  class="text-center text-md-left break-words whitespace-break-spaces line-clamp-4 overflow-hidden text-ellipsis"
+                >
+                  {{ props.media?.share_comment }}
+                </VCardSubtitle>
+                <VList lines="one">
+                  <VListItem class="ps-0">
+                    <VListItemTitle class="text-center text-md-left">
+                      <span class="font-weight-medium">分享人：</span>
+                      <span class="text-body-1"> {{ media?.share_user }}</span>
+                    </VListItemTitle>
+                  </VListItem>
+                  <VListItem class="ps-0" v-if="media?.keyword">
+                    <VListItemTitle class="text-center text-md-left">
+                      <span class="font-weight-medium">搜索词：</span>
+                      <span class="text-body-1"> {{ media?.keyword }}</span>
+                    </VListItemTitle>
+                  </VListItem>
+                  <VListItem class="ps-0" v-if="media?.custom_words" @click.stop="toggleExpand">
+                    <VListItemTitle
+                      class="text-center text-md-left break-words whitespace-break-spaces"
+                      :class="{
+                        'line-clamp-4 overflow-hidden text-ellipsis': !isExpanded,
+                      }"
+                    >
+                      <span class="font-weight-medium">识别词：</span>
+                      <span class="text-body-1"> {{ media?.custom_words }}</span>
+                    </VListItemTitle>
+                  </VListItem>
+                </VList>
+                <div class="text-center text-md-left">
+                  <div>
+                    <VBtn
+                      color="primary"
+                      :disabled="processing"
+                      @click="doFork"
+                      prepend-icon="mdi-heart"
+                      :loading="processing"
+                      class="mb-2 me-2"
+                    >
+                      订阅
+                    </VBtn>
+                    <VBtn
+                      v-if="isFollowed && props.media?.share_uid"
+                      color="warning"
+                      @click="unfollowUser"
+                      prepend-icon="mdi-account-remove"
+                      class="mb-2 me-2"
+                    >
+                      取消关注
+                    </VBtn>
+                    <VBtn
+                      v-else-if="props.media?.share_uid"
+                      @click="followUser"
+                      color="info"
+                      prepend-icon="mdi-account-plus"
+                      class="mb-2 me-2"
+                    >
+                      关注
+                    </VBtn>
+                    <VBtn
+                      v-if="
+                        (props.media?.share_uid && props.media?.share_uid === globalSettings.USER_UNIQUE_ID) ||
+                        globalSettings.SUBSCRIBE_SHARE_MANAGE
+                      "
+                      color="error"
+                      :disabled="deleting"
+                      @click="doDelete"
+                      prepend-icon="mdi-delete"
+                      :loading="deleting"
+                      class="mb-2 me-2"
+                    >
+                      取消分享
+                    </VBtn>
+                  </div>
+                  <div class="text-xs mt-2" v-if="props.media?.count">
+                    <VIcon icon="mdi-fire" />共 {{ props.media?.count?.toLocaleString() }} 次复用
+                  </div>
+                </div>
+              </VCardItem>
+            </div>
+          </div>
+        </VCol>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/ImportCodeDialog.vue

@@ -2,23 +2,24 @@
 // 输入参数
 const props = defineProps({
   title: String,
+  dataType: String,
 })
 
-// 定义事件
-const emit = defineEmits(['update:modelValue', 'close'])
-
 // 代码
 const codeString = ref('')
 
+// 定义事件
+const emit = defineEmits(['close', 'save'])
+
 // 导入
 function handleImport() {
-  emit('update:modelValue', codeString.value)
+  emit('save', props.dataType, codeString)
   emit('close')
 }
 </script>
 
 <template>
-  <VDialog width="40rem" scrollable max-height="85vh">
+  <VDialog width="40rem" scrollable max-height="85vh" persistent>
     <VCard :title="props.title" class="rounded-t">
       <DialogCloseBtn @click="emit('close')" />
       <VCardText class="pt-2">

src/components/dialog/MediaInfoDialog.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { Context } from '@/api/types'
+import MediaInfoCard from '../cards/MediaInfoCard.vue'
+
+// 输入参数
+defineProps({
+  context: Object as PropType<Context>,
+})
+
+// 定义事件
+const emit = defineEmits(['close'])
+</script>
+<template>
+  <VDialog max-width="50rem">
+    <VCard>
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardItem>
+        <MediaInfoCard :context="context" />
+      </VCardItem>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/PluginConfigDialog.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { useDisplay } from 'vuetify'
+import type { Plugin } from '@/api/types'
+import { isNullOrEmptyObject } from '@/@core/utils'
+import api from '@/api'
+import { useToast } from 'vue-toast-notification'
+import FormRender from '../render/FormRender.vue'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
+
+// 输入参数
+const props = defineProps({
+  plugin: {
+    type: Object as PropType<Plugin>,
+  },
+})
+
+// 定义事件
+const emit = defineEmits(['close', 'save', 'switch'])
+
+// 显示器宽度
+const display = useDisplay()
+
+// 插件配置表单数据
+const pluginConfigForm = ref({})
+
+// 插件表单配置项
+let pluginFormItems = reactive([])
+
+// 进度框
+const progressDialog = ref(false)
+
+// 进度文字
+const progressText = ref('')
+
+// 提示框
+const $toast = useToast()
+
+// 是否刷新
+const isRefreshed = ref(false)
+
+// 调用API读取表单页面
+async function loadPluginForm() {
+  try {
+    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
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  isRefreshed.value = true
+}
+
+// 调用API读取配置数据
+async function loadPluginConf() {
+  try {
+    const result: { [key: string]: any } = await api.get(`plugin/${props.plugin?.id}`)
+    if (!isNullOrEmptyObject(result)) pluginConfigForm.value = result
+  } catch (error) {
+    console.error(error)
+  }
+  isRefreshed.value = true
+}
+
+// 调用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) {
+      progressDialog.value = false
+      $toast.success(`插件 ${props.plugin?.plugin_name} 配置已保存`)
+      // 通知父组件刷新
+      emit('save')
+    } else {
+      progressDialog.value = false
+      $toast.error(`插件 ${props.plugin?.plugin_name} 配置保存失败：${result.message}}`)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+onBeforeMount(async () => {
+  await loadPluginForm()
+  await loadPluginConf()
+})
+</script>
+<template>
+  <VDialog scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
+    <VCard :title="`${props.plugin?.plugin_name} - 配置`" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VDivider />
+      <VCardText v-if="isRefreshed">
+        <FormRender v-for="(item, index) in pluginFormItems" :key="index" :config="item" :model="pluginConfigForm" />
+      </VCardText>
+      <VCardActions class="pt-3">
+        <VBtn v-if="props.plugin?.has_page" @click="emit('switch')" variant="outlined" color="info"> 查看数据 </VBtn>
+        <VSpacer />
+        <VBtn @click="savePluginConf" variant="elevated" prepend-icon="mdi-content-save" class="px-5"> 保存 </VBtn>
+      </VCardActions>
+    </VCard>
+    <!-- 进度框 -->
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
+  </VDialog>
+</template>

src/components/dialog/PluginDataDialog.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useDisplay } from 'vuetify'
+import type { Plugin } from '@/api/types'
+import PageRender from '@/components/render/PageRender.vue'
+import api from '@/api'
+
+// 输入参数
+const props = defineProps({
+  plugin: {
+    type: Object as PropType<Plugin>,
+  },
+})
+
+// 定义事件
+const emit = defineEmits(['close', 'save', 'switch'])
+
+// 显示器宽度
+const display = useDisplay()
+// APP
+const appMode = inject('pwaMode') && display.mdAndDown.value
+
+// 是否刷新
+const isRefreshed = ref(false)
+
+// 插件数据页面配置项
+let pluginPageItems = ref([])
+
+// 调用API读取数据页面
+async function loadPluginPage() {
+  try {
+    const result: [] = await api.get(`plugin/page/${props.plugin?.id}`)
+    if (result) pluginPageItems.value = result
+  } catch (error) {
+    console.error(error)
+  }
+  isRefreshed.value = true
+}
+
+onMounted(() => {
+  loadPluginPage()
+})
+</script>
+<template>
+  <VDialog scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
+    <VCard :title="`${props.plugin?.plugin_name}`" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <LoadingBanner v-if="!isRefreshed" class="mt-5" />
+      <VCardText v-else class="min-h-40">
+        <PageRender @action="loadPluginPage" v-for="(item, index) in pluginPageItems" :key="index" :config="item" />
+      </VCardText>
+      <VFab
+        icon="mdi-cog"
+        location="bottom"
+        size="x-large"
+        fixed
+        app
+        appear
+        @click="emit('switch')"
+        :class="{ 'mb-10': appMode }"
+      />
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/PluginMarketSettingDialog.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import api from '@/api'
+import { useToast } from 'vue-toast-notification'
+
+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(`插件仓库保存失败：${result?.message}！`)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+onMounted(() => {
+  queryMarketRepoSetting()
+})
+</script>
+
+<template>
+  <VDialog width="50rem" scrollable max-height="85vh">
+    <VCard class="rounded-t">
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-store-cog" class="me-2" />
+          插件仓库设置
+        </VCardTitle>
+        <DialogCloseBtn @click="emit('close')" />
+      </VCardItem>
+      <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

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

src/components/dialog/RcloneConfigDialog.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import api from '@/api'
+
+// 定义输入
+const props = defineProps({
+  conf: {
+    type: Object as PropType<{ [key: string]: any }>,
+    required: true,
+  },
+})
+
+if (!props.conf.filepath) {
+  props.conf.filepath = '/moviepilot/.config/rclone/rclone.conf'
+}
+
+if (!props.conf.content) {
+  props.conf.content = '# 请在此处填写rclone配置文件内容 \n# 请参考 https://rclone.org/docs/ \n# 存储节点名必须为：MP'
+}
+
+// 定义事件
+const emit = defineEmits(['done', 'close'])
+
+// 完成
+async function handleDone() {
+  await savaRcloneConfig()
+  emit('done')
+}
+
+// 保存rclone设置
+async function savaRcloneConfig() {
+  try {
+    await api.post(`storage/save/rclone`, props.conf)
+  } catch (e) {
+    console.error(e)
+  }
+}
+</script>
+
+<template>
+  <VDialog width="50rem" scrollable max-height="85vh">
+    <VCard title="RClone配置" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VTextField v-model="props.conf.filepath" label="rclone配置文件路径" />
+          </VCol>
+          <VCol cols="12">
+            <VAceEditor
+              v-model:value="props.conf.content"
+              lang="ini"
+              theme="monokai"
+              style="block-size: 30rem"
+              class="rounded"
+            >
+            </VAceEditor>
+          </VCol>
+        </VRow>
+      </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/ReorganizeDialog.vue

@@ -1,27 +1,30 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
 import MediaIdSelector from '../misc/MediaIdSelector.vue'
-import store from '@/store'
 import api from '@/api'
+import { storageOptions, transferTypeOptions } from '@/api/constants'
 import { numberValidator } from '@/@validators'
 import { useDisplay } from 'vuetify'
 import ProgressDialog from './ProgressDialog.vue'
-import { FileItem, MediaDirectory } from '@/api/types'
+import { FileItem, TransferDirectoryConf, TransferForm } from '@/api/types'
 
 // 显示器宽度
 const display = useDisplay()
 
 // 输入参数
 const props = defineProps({
-  storage: {
-    type: String,
-    default: () => 'local',
-  },
   logids: Array<number>,
   items: Array<FileItem>,
-  target: String,
+  target_storage: String,
+  target_path: String,
 })
 
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
+// 当前识别类型
+const mediaSource = ref(globalSettings.data?.RECOGNIZE_SOURCE || 'themoviedb')
+
 // 定义事件
 const emit = defineEmits(['done', 'close'])
 
@@ -33,9 +36,6 @@ const seasonItems = ref(
   })),
 )
 
-// 当前识别类型
-const mediaSource = ref('themoviedb')
-
 // 提示框
 const $toast = useToast()
 
@@ -49,7 +49,7 @@ const progressEventSource = ref<EventSource>()
 const progressDialog = ref(false)
 
 // 整理进度文本
-const progressText = ref('请稍候 ...')
+const progressText = ref('正在处理 ...')
 
 // 整理进度
 const progressValue = ref(0)
@@ -65,56 +65,102 @@ const dialogTitle = computed(() => {
   return '手动整理'
 })
 
+// 禁用指定集数
+const disableEpisodeDetail = computed(() => {
+  if (props.items) {
+    if (transferForm.episode_format) return false
+    return !(props.items.length === 1 && props.items[0].type !== 'dir')
+  }
+})
+
 // 表单
-const transferForm = reactive({
-  storage: props.storage,
+const transferForm = reactive<TransferForm>({
+  fileitem: {} as FileItem,
   logid: 0,
-  path: '',
-  drive_id: '',
-  fileid: '',
-  filetype: '',
-  target: props.target ?? null,
-  tmdbid: null,
-  doubanid: null,
-  season: null,
-  type_name: '',
+  target_storage: props.target_storage ?? 'local',
   transfer_type: '',
-  episode_format: '',
-  episode_detail: '',
-  episode_part: '',
-  episode_offset: null,
+  target_path: '',
   min_filesize: 0,
   scrape: false,
+  from_history: false,
 })
 
 // 所有媒体库目录
-const libraryDirectories = ref<MediaDirectory[]>([])
+const directories = ref<TransferDirectoryConf[]>([])
+
+// 查询目录
+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 directories = libraryDirectories.value.map(item => item.path)
-  return [...new Set(directories)]
+  const libraryDirectories = directories.value.map(item => item.library_path)
+  return [...new Set(libraryDirectories)]
 })
 
-// 监听目的路径变化，自动查询目录的刮削配置
-watch(transferForm, async () => {
-  if (transferForm.target) {
-    const directory = libraryDirectories.value.find(item => item.path === transferForm.target)
-    if (directory) {
-      transferForm.scrape = directory.scrape ?? false
+// 监听目的路径变化，配置默认值
+watch(
+  () => transferForm.target_path,
+  async newPath => {
+    if (newPath) {
+      const directory = directories.value.find(item => item.library_path === newPath)
+      if (directory) {
+        transferForm.target_storage = directory.library_storage ?? 'local'
+        transferForm.transfer_type = transferForm.transfer_type || directory.transfer_type
+        transferForm.scrape = directory.scraping ?? false
+        transferForm.library_category_folder = directory.library_category_folder ?? false
+        transferForm.library_type_folder = directory.library_type_folder ?? false
+      } else {
+        transferForm.transfer_type = transferForm.transfer_type || 'copy'
+        transferForm.scrape = false
+        transferForm.library_category_folder = false
+        transferForm.library_type_folder = false
+      }
+    } else {
+      // 路径为空时, 恢复到`自动`条件
+      transferForm.transfer_type = ''
+      transferForm.library_type_folder = undefined
+      transferForm.library_category_folder = undefined
     }
+  },
+)
+
+// 整理文件
+async function handleTransfer(item: FileItem, background: boolean = false) {
+  transferForm.fileitem = item
+  transferForm.logid = 0
+  try {
+    const result: { [key: string]: any } = await api.post(`transfer/manual?background=${background}`, transferForm)
+    if (!result.success) $toast.error(result.message)
+    else if (background) $toast.success(`文件 ${item.name} 已加入整理队列！`)
+  } catch (e) {
+    console.log(e)
   }
-})
+}
+
+// 整理日志
+async function handleTransferLog(logid: number, background: boolean = false) {
+  transferForm.logid = logid
+  transferForm.fileitem = {} as FileItem
+  try {
+    const result: { [key: string]: any } = await api.post(`transfer/manual?background=${background}`, transferForm)
+    if (!result.success) $toast.error(result.message)
+    else if (background) $toast.success(`历史记录 ${logid} 已加入整理队列！`)
+  } catch (e) {
+    console.log(e)
+  }
+}
 
 // 使用SSE监听加载进度
 function startLoadingProgress() {
   progressText.value = '请稍候 ...'
-
-  const token = store.state.auth.token
-
-  progressEventSource.value = new EventSource(
-    `${import.meta.env.VITE_API_BASE_URL}system/progress/filetransfer?token=${token}`,
-  )
+  progressEventSource.value = new EventSource(`${import.meta.env.VITE_API_BASE_URL}system/progress/filetransfer`)
   progressEventSource.value.onmessage = event => {
     const progress = JSON.parse(event.data)
     if (progress) {
@@ -130,101 +176,85 @@ function stopLoadingProgress() {
 }
 
 // 整理文件
-async function transfer() {
+async function transfer(background: boolean = false) {
   if (!props.logids && !props.items) return
 
   // 显示进度条
   progressDialog.value = true
-  // 开始监听进度
-  startLoadingProgress()
+
+  if (!background) {
+    // 开始监听进度
+    startLoadingProgress()
+  }
 
   // 文件整理
   if (props.items) {
     for (const item of props.items) {
-      await handleTransfer(item)
+      await handleTransfer(item, background)
     }
   }
 
   // 日志整理
   if (props.logids) {
     for (const logid of props.logids) {
-      await handleTransferLog(logid)
+      await handleTransferLog(logid, background)
     }
   }
 
-  // 停止监听进度
-  stopLoadingProgress()
+  if (!background) {
+    // 停止监听进度
+    stopLoadingProgress()
+  }
+
   // 关闭进度条
   progressDialog.value = false
   // 重新加载
   emit('done')
 }
 
-// 整理文件
-async function handleTransfer(item: FileItem) {
-  transferForm.path = item.path
-  transferForm.fileid = item.fileid || ''
-  transferForm.drive_id = item.drive_id || ''
-  transferForm.filetype = item.type || 'dir'
-
-  try {
-    const result: { [key: string]: any } = await api.post('transfer/manual', {}, { params: transferForm })
-    if (!result.success) $toast.error(`文件 ${item.path} 整理失败：${result.message}！`)
-  } catch (e) {
-    console.log(e)
-  }
-}
-
-// 整理日志
-async function handleTransferLog(logid: number) {
-  transferForm.logid = logid
-  try {
-    const result: { [key: string]: any } = await api.post('transfer/manual', {}, { params: transferForm })
-    if (!result.success) $toast.error(`历史记录 ${logid} 重新整理失败：${result.message}！`)
-  } catch (e) {
-    console.log(e)
-  }
-}
-
-// 调用API，加载当前系统环境设置
-async function loadSystemSettings() {
-  try {
-    const result: { [key: string]: any } = await api.get('system/env')
-    if (result) mediaSource.value = result.data?.RECOGNIZE_SOURCE || 'themoviedb'
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-// 查询媒体库目录
-async function loadLibraryDirectories() {
-  try {
-    const result: { [key: string]: any } = await api.get('system/setting/LibraryDirectories')
-    if (result.success && result.data?.value) {
-      libraryDirectories.value = result.data.value
-    }
-  } catch (error) {
-    console.log(error)
-  }
-}
-
 onMounted(() => {
-  loadSystemSettings()
-  loadLibraryDirectories()
+  loadDirectories()
+})
+
+onUnmounted(() => {
+  stopLoadingProgress()
 })
 </script>
 
 <template>
-  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
+  <VDialog scrollable max-width="45rem" :fullscreen="!display.mdAndUp.value">
     <VCard :title="dialogTitle" class="rounded-t">
       <DialogCloseBtn @click="emit('close')" />
       <VDivider />
       <VCardText>
         <VForm @submit.prevent="() => {}">
           <VRow>
-            <VCol v-if="props.storage == 'local'" cols="12" md="8">
+            <VCol cols="12" md="6">
+              <VSelect
+                v-model="transferForm.target_storage"
+                :items="storageOptions"
+                label="目的存储"
+                placeholder="留空自动"
+                hint="整理目的存储"
+                persistent-hint
+              />
+            </VCol>
+            <VCol cols="12" md="6">
+              <VSelect
+                v-model="transferForm.transfer_type"
+                label="整理方式"
+                :items="transferTypeOptions"
+                hint="文件操作整理方式"
+                persistent-hint
+              >
+                <template v-slot:selection="{ item }">
+                  {{ transferForm.transfer_type === '' ? '自动' : item.title }}
+                </template>
+              </VSelect>
+            </VCol>
+            <VCol cols="12">
               <VCombobox
-                v-model="transferForm.target"
+                v-model="transferForm.target_path"
                 :items="targetDirectories"
                 label="目的路径"
                 placeholder="留空自动"
@@ -232,26 +262,9 @@ onMounted(() => {
                 persistent-hint
               />
             </VCol>
-            <VCol v-if="props.storage == 'local'" cols="12" md="4">
-              <VSelect
-                v-model="transferForm.transfer_type"
-                label="整理方式"
-                :items="[
-                  { title: '默认', value: '' },
-                  { title: '移动', value: 'move' },
-                  { title: '复制', value: 'copy' },
-                  { title: '硬链接', value: 'link' },
-                  { title: '软链接', value: 'softlink' },
-                  { title: 'Rclone复制', value: 'rclone_copy' },
-                  { title: 'Rclone移动', value: 'rclone_move' },
-                ]"
-                hint="文件操作整理方式"
-                persistent-hint
-              />
-            </VCol>
           </VRow>
           <VRow>
-            <VCol cols="12" md="4">
+            <VCol cols="12" md="6">
               <VSelect
                 v-model="transferForm.type_name"
                 label="类型"
@@ -264,7 +277,7 @@ onMounted(() => {
                 persistent-hint
               />
             </VCol>
-            <VCol cols="12" md="4">
+            <VCol cols="12" md="6">
               <VTextField
                 v-if="mediaSource === 'themoviedb'"
                 v-model="transferForm.tmdbid"
@@ -290,19 +303,37 @@ onMounted(() => {
                 @click:append-inner="mediaSelectorDialog = true"
               />
             </VCol>
-            <VCol cols="12" md="4">
-              <VSelect
-                v-show="transferForm.type_name === '电视剧'"
-                v-model.number="transferForm.season"
-                label="季"
-                :items="seasonItems"
-                hint="指定季数"
+          </VRow>
+          <VRow v-show="transferForm.type_name === '电视剧'">
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="transferForm.episode_group"
+                label="剧集组编号"
+                placeholder="手动查询剧集组"
+                hint="指定剧集组"
                 persistent-hint
               />
             </VCol>
-          </VRow>
-          <VRow>
-            <VCol cols="12" md="8">
+            <VCol cols="12" md="3">
+              <VSelect
+                v-model.number="transferForm.season"
+                label="季"
+                :items="seasonItems"
+                hint="第几季"
+                persistent-hint
+              />
+            </VCol>
+            <VCol cols="12" md="3">
+              <VTextField
+                v-model="transferForm.episode_detail"
+                :disabled="disableEpisodeDetail"
+                label="集"
+                placeholder="起始集,终止集"
+                hint="集数或范围，如1或1,2"
+                persistent-hint
+              />
+            </VCol>
+            <VCol cols="12" md="6">
               <VTextField
                 v-model="transferForm.episode_format"
                 label="集数定位"
@@ -311,16 +342,18 @@ onMounted(() => {
                 persistent-hint
               />
             </VCol>
-            <VCol cols="12" md="4">
+            <VCol cols="12" md="6">
               <VTextField
-                v-model="transferForm.episode_detail"
-                label="指定集数"
-                placeholder="起始集,终止集，如1或1,2"
-                hint="指定集数或范围，如1或1,2"
+                v-model="transferForm.episode_offset"
+                label="集数偏移"
+                placeholder="如-10"
+                hint="集数偏移运算，如-10或EP*2"
                 persistent-hint
               />
             </VCol>
-            <VCol cols="12" md="4">
+          </VRow>
+          <VRow>
+            <VCol cols="12" md="6">
               <VTextField
                 v-model="transferForm.episode_part"
                 label="指定Part"
@@ -329,16 +362,7 @@ onMounted(() => {
                 persistent-hint
               />
             </VCol>
-            <VCol cols="12" md="4">
-              <VTextField
-                v-model.number="transferForm.episode_offset"
-                label="集数偏移"
-                placeholder="如-10"
-                hint="集数偏移运算，如-10或EP*2"
-                persistent-hint
-              />
-            </VCol>
-            <VCol cols="12" md="4">
+            <VCol cols="12" md="6">
               <VTextField
                 v-model.number="transferForm.min_filesize"
                 label="最小文件大小（MB）"
@@ -350,6 +374,22 @@ onMounted(() => {
             </VCol>
           </VRow>
           <VRow>
+            <VCol cols="12" md="6" v-if="transferForm.target_path">
+              <VSwitch
+                v-model="transferForm.library_type_folder"
+                label="按类型分类"
+                hint="整理时目的路径下按媒体类型添加子目录"
+                persistent-hint
+              />
+            </VCol>
+            <VCol cols="12" md="6" v-if="transferForm.target_path">
+              <VSwitch
+                v-model="transferForm.library_category_folder"
+                label="按类别分类"
+                hint="整理时在目的路径下按媒体类别添加子目录"
+                persistent-hint
+              />
+            </VCol>
             <VCol cols="12" md="6">
               <VSwitch
                 v-model="transferForm.scrape"
@@ -358,12 +398,25 @@ onMounted(() => {
                 persistent-hint
               />
             </VCol>
+            <VCol cols="12" md="6" v-if="props.logids">
+              <VSwitch
+                v-model="transferForm.from_history"
+                label="复用历史识别信息"
+                hint="使用历史整理记录中已识别的媒体信息"
+                persistent-hint
+              />
+            </VCol>
           </VRow>
         </VForm>
       </VCardText>
       <VCardActions class="pt-3">
         <VSpacer />
-        <VBtn variant="elevated" @click="transfer" prepend-icon="mdi-arrow-right-bold" class="px-5"> 开始整理 </VBtn>
+        <VBtn variant="elevated" color="success" @click="transfer(true)" prepend-icon="mdi-plus" class="px-5">
+          加入整理队列
+        </VBtn>
+        <VBtn variant="elevated" @click="transfer(false)" prepend-icon="mdi-arrow-right-bold" class="px-5">
+          立即整理
+        </VBtn>
       </VCardActions>
     </VCard>
     <!-- 手动整理进度框 -->

src/components/dialog/SearchBarDialog.vue

@@ -0,0 +1,855 @@
+<script setup lang="ts">
+import api from '@/api'
+import type { Site, Plugin, Subscribe } from '@/api/types'
+import { SystemNavMenus, SettingTabs } from '@/router/menu'
+import { NavMenu } from '@/@layouts/types'
+import { useUserStore } from '@/stores'
+import SearchSiteDialog from '@/components/dialog/SearchSiteDialog.vue'
+
+// 定义props，接收modelValue
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+// 路由
+const router = useRouter()
+
+// 用户 Store
+const userStore = useUserStore()
+
+// 超级用户
+const superUser = userStore.superUser
+
+// 当前用户名
+const userName = userStore.userName
+
+// 所有订阅数据
+const SubscribeItems = ref<Subscribe[]>([])
+
+// 站点选择对话框
+const chooseSiteDialog = ref(false)
+const selectedSites = ref<number[]>([])
+const allSites = ref<Site[]>([])
+
+// 定义事件
+const emit = defineEmits(['close', 'update:modelValue'])
+
+// 对话框状态的本地计算属性
+const dialog = computed({
+  get: () => props.modelValue,
+  set: val => emit('update:modelValue', val),
+})
+
+// 搜索词
+const searchWord = ref<string | null>(null)
+
+// ref
+const searchWordInput = ref<HTMLElement | null>(null)
+
+// 近期搜索词条
+const recentSearches = ref<string[]>([])
+
+// 保存近期搜索到本地
+function saveRecentSearches(keyword: string) {
+  if (!keyword) return
+  if (recentSearches.value.includes(keyword)) return
+  recentSearches.value.unshift(keyword)
+  localStorage.setItem('MP_RecentSearches', JSON.stringify(recentSearches.value))
+}
+
+// 从本地加载近期搜索
+function loadRecentSearches() {
+  const recentSearchesStr = localStorage.getItem('MP_RecentSearches')
+  if (recentSearchesStr) {
+    recentSearches.value = JSON.parse(recentSearchesStr)
+    // 只保留最近的 5 条
+    if (recentSearches.value.length > 5) {
+      recentSearches.value = recentSearches.value.slice(0, 5)
+    }
+  }
+}
+
+// 所有菜单功能
+function getMenus(): NavMenu[] {
+  let menus: NavMenu[] = []
+  // 导航菜单
+  SystemNavMenus.forEach(
+    item =>
+      item &&
+      menus.push({
+        title: item.full_title ?? item.title,
+        icon: item.icon,
+        to: item.to,
+        header: item.header,
+        admin: item.admin,
+      }),
+  )
+  // 设置标签页
+  SettingTabs.forEach(
+    item =>
+      item &&
+      menus.push({
+        title: '设定 -> ' + item.title,
+        icon: item.icon,
+        to: `/setting?tab=${item.tab}`,
+        header: '',
+        admin: true,
+        description: item.description,
+      }),
+  )
+
+  return menus
+}
+
+// 匹配的菜单列表
+const matchedMenuItems = computed(() => {
+  if (!searchWord.value) return []
+  if (!superUser) return []
+  const lowerWord = (searchWord.value as string).toLowerCase()
+  const menuItems = getMenus()
+  if (menuItems)
+    return menuItems.filter(
+      item =>
+        item.title.toLowerCase().includes(lowerWord) ||
+        (item.description && item.description.toLowerCase().includes(lowerWord)),
+    )
+  return []
+})
+
+// 所有插件（已安装）
+const pluginItems = ref<Plugin[]>([])
+
+// 获取插件列表数据
+async function fetchInstalledPlugins() {
+  try {
+    pluginItems.value = await api.get('plugin/', {
+      params: {
+        state: 'installed',
+      },
+    })
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 区配的插件列表
+const matchedPluginItems = computed(() => {
+  if (!searchWord.value) return []
+  if (!superUser) return []
+  const lowerWord = (searchWord.value as string).toLowerCase()
+  return pluginItems.value.filter((item: Plugin) => {
+    if (!item.plugin_name && !item.plugin_desc) return false
+    return item.plugin_name?.toLowerCase().includes(lowerWord) || item.plugin_desc?.toLowerCase().includes(lowerWord)
+  })
+})
+
+// 获取订阅列表数据
+async function fetchSubscribes() {
+  try {
+    SubscribeItems.value = await api.get('subscribe/')
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 从接口加载用户站点偏好设置
+const loadUserSitePreferences = async () => {
+  try {
+    const result = await api.get('system/setting/IndexerSites')
+    if (result && result.data && result.data.value) {
+      selectedSites.value = result.data.value
+      return
+    }
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+// 查询所有站点
+async function queryAllSites() {
+  try {
+    const data: Site[] = await api.get('site/')
+    // 过滤站点，只有启用的站点才显示
+    allSites.value = data.filter(item => item.is_active)
+    // 如果没有选择任何站点并且有可用站点，才默认选择全部
+    if (selectedSites.value.length === 0 && allSites.value.length > 0) {
+      selectedSites.value = allSites.value.map((site: Site) => site.id)
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 打开站点选择对话框
+const openSiteDialog = () => {
+  chooseSiteDialog.value = true
+}
+
+// 匹配的订阅列表
+const matchedSubscribeItems = computed(() => {
+  if (!searchWord.value) return []
+  const lowerWord = (searchWord.value as string).toLowerCase()
+  return SubscribeItems.value.filter((item: Subscribe) => {
+    return (item.name.toLowerCase().includes(lowerWord) && (superUser || userName === item.username)) || false
+  })
+})
+
+// 搜索多站点
+function searchSites(sites: number[]) {
+  chooseSiteDialog.value = false
+  selectedSites.value = sites
+  searchTorrent()
+}
+
+// 搜索资源
+function searchTorrent() {
+  if (!searchWord.value) return
+  // 记录搜索词
+  saveRecentSearches(searchWord.value)
+  // 跳转到搜索页面
+  router.push({
+    path: '/resource',
+    query: {
+      keyword: searchWord.value,
+      area: 'title',
+      sites: selectedSites.value.join(','),
+    },
+  })
+  // 关闭搜索对话框
+  dialog.value = false
+  emit('close')
+}
+
+// 跳转媒体搜索页面
+function searchMedia(searchType: string) {
+  // 搜索类型 media/person
+  if (!searchWord.value) return
+  saveRecentSearches(searchWord.value)
+  router.push({
+    path: '/browse/media/search',
+    query: {
+      title: searchWord.value,
+      type: searchType,
+    },
+  })
+  emit('close')
+}
+
+// 跳转到历史记录页面
+function searchHistory() {
+  if (!searchWord.value) return
+  saveRecentSearches(searchWord.value)
+  router.push({
+    path: '/history',
+    query: {
+      search: searchWord.value,
+    },
+  })
+  emit('close')
+}
+
+// 跳转插件页面
+function showPlugin(pluginId: string) {
+  router.push({
+    path: `/plugins/`,
+    query: {
+      tab: 'installed',
+      id: pluginId,
+    },
+  })
+  emit('close')
+}
+
+// 跳转菜单页面
+function goPage(to: string) {
+  router.push(to)
+  emit('close')
+}
+
+// 跳转订阅页面
+function goSubscribe(subscribe: Subscribe) {
+  if (subscribe.type === '电影') {
+    router.push({
+      path: '/subscribe/movie',
+      query: {
+        id: subscribe.id,
+      },
+    })
+  } else {
+    router.push({
+      path: '/subscribe/tv',
+      query: {
+        id: subscribe.id,
+      },
+    })
+  }
+  emit('close')
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    searchWordInput.value?.focus()
+  }, 500)
+  fetchInstalledPlugins()
+  fetchSubscribes()
+  loadRecentSearches()
+  loadUserSitePreferences()
+  if (superUser) queryAllSites()
+})
+</script>
+<template>
+  <VDialog v-model="dialog" max-width="42rem" scrollable>
+    <VCard class="search-dialog">
+      <!-- 搜索输入框 -->
+      <VCardItem class="pa-4 pa-sm-5 search-box-container">
+        <template #prepend>
+          <VIcon icon="mdi-magnify" color="primary" size="x-large" />
+        </template>
+        <VCombobox
+          ref="searchWordInput"
+          v-model="searchWord"
+          density="comfortable"
+          variant="outlined"
+          class="search-input"
+          placeholder="输入关键词搜索..."
+          @keydown.enter="searchMedia('media')"
+          hide-details
+          clearable
+        />
+        <template #append>
+          <IconBtn>
+            <VIcon icon="mdi-close" color="primary" @click="emit('close')" size="x-large" />
+          </IconBtn>
+        </template>
+      </VCardItem>
+
+      <VDivider />
+
+      <!-- 主搜索结果区域 -->
+      <VCardText class="search-results-container pa-0">
+        <!-- 有搜索词时显示结果 -->
+        <VList lines="two" v-if="searchWord" class="search-list py-2">
+          <!-- 搜索结果分组标题 -->
+          <VListSubheader class="font-weight-medium text-uppercase py-2 px-4 px-sm-6"> 媒体 </VListSubheader>
+
+          <!-- 媒体搜索选项 -->
+          <VHover>
+            <template #default="hover">
+              <VListItem
+                density="comfortable"
+                link
+                rounded="xl"
+                v-bind="hover.props"
+                @click="searchMedia('media')"
+                class="search-option mx-2 mx-sm-4 my-1"
+              >
+                <template #prepend>
+                  <div class="option-icon-wrapper d-flex align-center justify-center">
+                    <VIcon
+                      icon="mdi-movie-search"
+                      :color="hover.isHovering ? 'primary' : 'medium-emphasis'"
+                      size="small"
+                    />
+                  </div>
+                </template>
+                <VListItemTitle class="font-weight-medium"> 电影、电视剧 </VListItemTitle>
+                <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+                  搜索 <span class="primary-text font-weight-medium">{{ searchWord }}</span> 相关的影视作品
+                </VListItemSubtitle>
+                <template #append>
+                  <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
+                </template>
+              </VListItem>
+            </template>
+          </VHover>
+
+          <VHover>
+            <template #default="hover">
+              <VListItem
+                density="comfortable"
+                link
+                rounded="xl"
+                v-bind="hover.props"
+                @click="searchMedia('collection')"
+                class="search-option mx-2 mx-sm-4 my-1"
+              >
+                <template #prepend>
+                  <div class="option-icon-wrapper d-flex align-center justify-center">
+                    <VIcon
+                      icon="mdi-movie-filter"
+                      :color="hover.isHovering ? 'primary' : 'medium-emphasis'"
+                      size="small"
+                    />
+                  </div>
+                </template>
+                <VListItemTitle class="font-weight-medium"> 系列合集 </VListItemTitle>
+                <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+                  搜索 <span class="primary-text font-weight-medium">{{ searchWord }}</span> 相关的系列作品
+                </VListItemSubtitle>
+                <template #append>
+                  <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
+                </template>
+              </VListItem>
+            </template>
+          </VHover>
+
+          <VHover>
+            <template #default="hover">
+              <VListItem
+                density="comfortable"
+                link
+                rounded="xl"
+                v-bind="hover.props"
+                @click="searchMedia('person')"
+                class="search-option mx-2 mx-sm-4 my-1"
+              >
+                <template #prepend>
+                  <div class="option-icon-wrapper d-flex align-center justify-center">
+                    <VIcon
+                      icon="mdi-account-search"
+                      :color="hover.isHovering ? 'primary' : 'medium-emphasis'"
+                      size="small"
+                    />
+                  </div>
+                </template>
+                <VListItemTitle class="font-weight-medium"> 演职人员 </VListItemTitle>
+                <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+                  搜索 <span class="primary-text font-weight-medium">{{ searchWord }}</span> 相关的演员、导演等
+                </VListItemSubtitle>
+                <template #append>
+                  <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
+                </template>
+              </VListItem>
+            </template>
+          </VHover>
+
+          <VHover v-if="superUser">
+            <template #default="hover">
+              <VListItem
+                density="comfortable"
+                link
+                rounded="xl"
+                v-bind="hover.props"
+                @click="searchHistory"
+                class="search-option mx-2 mx-sm-4 my-1"
+              >
+                <template #prepend>
+                  <div class="option-icon-wrapper d-flex align-center justify-center">
+                    <VIcon icon="mdi-history" :color="hover.isHovering ? 'primary' : 'medium-emphasis'" size="small" />
+                  </div>
+                </template>
+                <VListItemTitle class="font-weight-medium"> 整理记录 </VListItemTitle>
+                <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+                  搜索 <span class="primary-text font-weight-medium">{{ searchWord }}</span> 相关的历史记录
+                </VListItemSubtitle>
+                <template #append>
+                  <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
+                </template>
+              </VListItem>
+            </template>
+          </VHover>
+
+          <!-- 其他搜索结果 -->
+          <template v-if="matchedSubscribeItems.length > 0">
+            <VDivider class="mx-4 mx-sm-6 my-2 search-divider" />
+            <VListSubheader class="font-weight-medium text-uppercase py-2 px-4 px-sm-6"> 订阅 </VListSubheader>
+
+            <VHover v-for="subscribe in matchedSubscribeItems" :key="subscribe.id">
+              <template #default="hover">
+                <VListItem
+                  density="comfortable"
+                  link
+                  rounded="xl"
+                  v-bind="hover.props"
+                  @click="goSubscribe(subscribe)"
+                  class="search-option mx-2 mx-sm-4 my-1"
+                >
+                  <template #prepend>
+                    <div class="option-icon-wrapper d-flex align-center justify-center">
+                      <VIcon
+                        :icon="subscribe.type === '电影' ? 'mdi-movie-roll' : 'mdi-television-classic'"
+                        :color="hover.isHovering ? 'primary' : 'medium-emphasis'"
+                        size="small"
+                      />
+                    </div>
+                  </template>
+                  <VListItemTitle class="font-weight-medium">
+                    {{ subscribe.name
+                    }}<span v-if="subscribe.season" class="text-body-2"> 第 {{ subscribe.season }} 季</span>
+                  </VListItemTitle>
+                  <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+                    {{ subscribe.type }}
+                  </VListItemSubtitle>
+                  <template #append>
+                    <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
+                  </template>
+                </VListItem>
+              </template>
+            </VHover>
+          </template>
+
+          <template v-if="matchedMenuItems.length > 0">
+            <VDivider class="mx-4 mx-sm-6 my-2 search-divider" />
+            <VListSubheader class="font-weight-medium text-uppercase py-2 px-4 px-sm-6"> 功能 </VListSubheader>
+
+            <VHover v-for="menu in matchedMenuItems" :key="menu.title">
+              <template #default="hover">
+                <VListItem
+                  density="comfortable"
+                  link
+                  rounded="xl"
+                  v-bind="hover.props"
+                  @click="goPage(menu.to as string)"
+                  class="search-option mx-2 mx-sm-4 my-1"
+                >
+                  <template #prepend>
+                    <div class="option-icon-wrapper d-flex align-center justify-center">
+                      <VIcon
+                        :icon="menu.icon as string"
+                        :color="hover.isHovering ? 'primary' : 'medium-emphasis'"
+                        size="small"
+                      />
+                    </div>
+                  </template>
+                  <VListItemTitle class="font-weight-medium">
+                    {{ menu.title }}
+                  </VListItemTitle>
+                  <VListItemSubtitle v-if="menu.description" class="text-body-2 text-medium-emphasis mt-1">
+                    {{ menu.description }}
+                  </VListItemSubtitle>
+                  <template #append>
+                    <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
+                  </template>
+                </VListItem>
+              </template>
+            </VHover>
+          </template>
+
+          <template v-if="matchedPluginItems.length > 0">
+            <VDivider class="mx-4 mx-sm-6 my-2 search-divider" />
+            <VListSubheader class="font-weight-medium text-uppercase py-2 px-4 px-sm-6"> 插件 </VListSubheader>
+
+            <VHover v-for="plugin in matchedPluginItems" :key="plugin.id">
+              <template #default="hover">
+                <VListItem
+                  density="comfortable"
+                  link
+                  rounded="xl"
+                  v-bind="hover.props"
+                  @click="showPlugin(plugin.id ?? '')"
+                  class="search-option mx-2 mx-sm-4 my-1"
+                >
+                  <template #prepend>
+                    <div class="option-icon-wrapper d-flex align-center justify-center">
+                      <VIcon icon="mdi-puzzle" :color="hover.isHovering ? 'primary' : 'medium-emphasis'" size="small" />
+                    </div>
+                  </template>
+                  <VListItemTitle class="font-weight-medium">
+                    {{ plugin.plugin_name }}
+                  </VListItemTitle>
+                  <VListItemSubtitle class="text-body-2 text-medium-emphasis mt-1">
+                    {{ plugin.plugin_desc }}
+                  </VListItemSubtitle>
+                  <template #append>
+                    <VIcon v-if="hover.isHovering" icon="mdi-chevron-right" color="primary" />
+                  </template>
+                </VListItem>
+              </template>
+            </VHover>
+          </template>
+
+          <!-- 将站点资源搜索移到最底部 -->
+          <template v-if="searchWord">
+            <VDivider class="mx-4 mx-sm-6 my-2 search-divider" />
+            <VListSubheader class="font-weight-medium text-uppercase py-2 px-4 px-sm-6"> 站点资源 </VListSubheader>
+
+            <VCard class="mx-3 mx-sm-6 mb-4 mt-2 site-search-card">
+              <VCardText class="pa-3 pa-sm-4">
+                <div class="d-flex flex-column">
+                  <div class="d-flex align-center">
+                    <div class="search-icon-wrapper mr-3">
+                      <VIcon icon="mdi-file-search" color="primary" size="small" />
+                    </div>
+                    <div class="flex-grow-1">
+                      <div class="font-weight-medium text-body-1">在站点中搜索种子资源</div>
+                      <div class="text-caption text-medium-emphasis mt-1">
+                        搜索 <span class="primary-text font-weight-medium">{{ searchWord }}</span> 相关资源
+                      </div>
+                    </div>
+                    <VBtn
+                      color="primary"
+                      @click="searchTorrent"
+                      prepend-icon="mdi-magnify"
+                      size="small"
+                      variant="flat"
+                      class="search-btn"
+                    >
+                      搜索
+                    </VBtn>
+                  </div>
+
+                  <div
+                    v-if="superUser"
+                    class="d-flex align-center flex-wrap site-chips-container mt-4 py-2 px-2 px-sm-3"
+                  >
+                    <div class="d-flex align-center flex-wrap flex-grow-1">
+                      <VChip
+                        v-if="selectedSites.length > 0"
+                        color="primary"
+                        size="small"
+                        variant="flat"
+                        class="mr-2 mb-1 font-weight-medium"
+                      >
+                        {{ selectedSites.length }}/{{ allSites.length }}
+                      </VChip>
+                      <VChip
+                        v-for="(site, index) in allSites.filter(s => selectedSites.includes(s.id)).slice(0, 5)"
+                        :key="site.id"
+                        size="x-small"
+                        variant="outlined"
+                        class="mr-1 mb-1 site-chip"
+                      >
+                        {{ site.name }}
+                      </VChip>
+                      <VChip
+                        v-if="selectedSites.length > 5"
+                        size="x-small"
+                        variant="outlined"
+                        class="mr-1 mb-1 site-chip text-medium-emphasis"
+                      >
+                        +{{ selectedSites.length - 5 }}
+                      </VChip>
+                    </div>
+                    <VBtn
+                      size="small"
+                      variant="tonal"
+                      color="primary"
+                      @click="openSiteDialog"
+                      class="ml-auto site-select-btn"
+                      rounded="pill"
+                    >
+                      选择站点
+                      <VIcon size="small" class="ml-1">mdi-cog-outline</VIcon>
+                    </VBtn>
+                  </div>
+                </div>
+              </VCardText>
+            </VCard>
+          </template>
+        </VList>
+
+        <!-- 无搜索词时显示最近搜索和提示 -->
+        <div v-else class="recent-searches py-6 px-4 px-sm-6">
+          <div v-if="recentSearches.length > 0" class="mb-6">
+            <div class="text-h6 font-weight-medium mb-3">最近搜索</div>
+            <div class="d-flex flex-wrap">
+              <VChip
+                v-for="(word, index) in recentSearches"
+                :key="index"
+                class="me-2 mb-2"
+                variant="flat"
+                color="primary"
+                size="small"
+                @click="searchWord = word"
+              >
+                <VIcon start size="x-small">mdi-history</VIcon>
+                {{ word }}
+              </VChip>
+            </div>
+          </div>
+
+          <div class="text-center mt-6 py-6 empty-search-state">
+            <div class="search-icon-wrapper mx-auto mb-4">
+              <VIcon icon="mdi-magnify" size="large" color="primary" />
+            </div>
+            <div class="text-h6 font-weight-medium mb-2">输入关键词开始搜索</div>
+            <div class="text-body-2 text-medium-emphasis">可搜索电影、电视剧、演员、资源等</div>
+          </div>
+        </div>
+      </VCardText>
+    </VCard>
+  </VDialog>
+
+  <!-- 站点选择对话框 -->
+  <SearchSiteDialog
+    v-if="chooseSiteDialog"
+    v-model="chooseSiteDialog"
+    :sites="allSites"
+    :selected="selectedSites"
+    @search="searchSites"
+    @close="chooseSiteDialog = false"
+    @reload="queryAllSites"
+  />
+</template>
+
+<style scoped>
+.search-dialog {
+  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 8%);
+}
+
+.site-dialog {
+  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 8%);
+}
+
+.search-divider {
+  opacity: 0.08;
+}
+
+.close-btn {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: rgba(var(--v-theme-on-surface), 0.04);
+  block-size: 36px;
+  inline-size: 36px;
+  inset-block-start: 1.4rem;
+  inset-inline-end: 1.2rem;
+  transition: background-color 0.2s ease;
+}
+
+.close-btn:hover {
+  background-color: rgba(var(--v-theme-error), 0.1);
+}
+
+.search-input {
+  border-radius: 12px;
+  font-size: 16px;
+}
+
+.search-icon {
+  color: rgb(var(--v-theme-primary));
+}
+
+.option-icon-wrapper {
+  border-radius: 8px;
+  background-color: rgba(var(--v-theme-surface-variant), 0.12);
+  block-size: 32px;
+  inline-size: 32px;
+  margin-inline-end: 12px;
+}
+
+.search-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  background-color: rgba(var(--v-theme-primary), 0.08);
+  block-size: 36px;
+  inline-size: 36px;
+}
+
+.search-icon-wrapper.warning {
+  background-color: rgba(var(--v-theme-warning), 0.08);
+}
+
+.primary-text {
+  color: rgb(var(--v-theme-primary));
+}
+
+.search-option {
+  border: 1px solid transparent;
+  margin-block-end: 2px;
+  transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.search-option:hover {
+  background-color: rgba(var(--v-theme-primary), 0.04);
+  transform: translateX(4px);
+}
+
+.recent-searches {
+  min-block-size: 200px;
+}
+
+.site-search-card {
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  border-radius: 14px;
+}
+
+.site-chip {
+  font-weight: normal;
+  transition: all 0.2s ease;
+}
+
+.site-chip:hover {
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  color: rgb(var(--v-theme-primary));
+}
+
+.search-btn {
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  min-inline-size: 70px;
+}
+
+.empty-search-state,
+.empty-site-state {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.clear-icon {
+  opacity: 0.7;
+}
+
+.clear-icon:hover {
+  opacity: 1;
+}
+
+.site-select-btn {
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  min-block-size: 32px;
+  padding-block: 0;
+  padding-inline: 12px;
+}
+
+.site-chips-container {
+  border-radius: 10px;
+  background-color: rgba(var(--v-theme-surface-variant), 0.06);
+}
+
+@media (width <= 600px) {
+  .search-box-container {
+    padding: 16px;
+  }
+
+  .search-input {
+    font-size: 14px;
+  }
+
+  .close-btn {
+    block-size: 32px;
+    inline-size: 32px;
+    inset-block-start: 1rem;
+    inset-inline-end: 0.8rem;
+  }
+
+  .site-chips-container {
+    padding-block: 6px;
+    padding-inline: 8px;
+  }
+
+  .site-select-btn {
+    font-size: 11px;
+    min-block-size: 28px;
+  }
+}
+</style>

src/components/dialog/SearchSiteDialog.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import type { Site, Plugin, Subscribe } from '@/api/types'
+import { popScopeId, PropType } from 'vue'
+
+const props = defineProps({
+  sites: {
+    type: Array as PropType<Site[]>,
+    required: true,
+  },
+  selected: Array as PropType<Number[]>,
+})
+
+// 定义事件
+const emit = defineEmits(['close', 'search', 'reload'])
+
+// 过滤词
+const siteFilter = ref('')
+
+// 已选择站点
+const selectedSites = ref<any[]>(props.selected || [])
+
+watch(
+  () => props.selected,
+  value => {
+    if (selectedSites.value.length == 0 && value) {
+      selectedSites.value = value
+    }
+  },
+)
+
+// 全选/全不选按钮文字
+const checkAllText = computed(() => {
+  return selectedSites.value.length < props.sites?.length ? '选择全部' : '取消全选'
+})
+
+// 全选/全不选
+const checkAllSitesorNot = () => {
+  if (selectedSites.value.length < props.sites?.length) {
+    selectedSites.value = props.sites?.map((item: Site) => item.id)
+  } else {
+    selectedSites.value = []
+  }
+}
+
+// 根据筛选条件过滤站点
+const filteredSites = computed(() => {
+  if (!siteFilter.value) return props.sites
+  const filter = siteFilter.value.toLowerCase()
+  return props.sites?.filter((site: Site) => site.name.toLowerCase().includes(filter))
+})
+</script>
+<template>
+  <!-- 手动整理进度框 -->
+  <VDialog max-width="40rem" fullscreen-mobile>
+    <VCard class="site-dialog">
+      <VCardTitle class="d-flex align-center pa-4">
+        <span class="text-h6 font-weight-medium">选择搜索站点</span>
+        <VSpacer />
+        <VTextField
+          v-model="siteFilter"
+          placeholder="过滤站点..."
+          density="compact"
+          variant="outlined"
+          hide-details
+          class="ml-4"
+          style="max-width: 200px"
+          prepend-inner-icon="mdi-magnify"
+          clearable
+        />
+      </VCardTitle>
+      <VDivider class="search-divider" />
+
+      <VCardText style="max-height: 420px" class="overflow-y-auto px-4 py-4">
+        <!-- 站点列表 -->
+        <div v-if="filteredSites.length > 0">
+          <!-- 选择操作 -->
+          <div class="d-flex align-center mb-4">
+            <VBtn
+              size="small"
+              :color="selectedSites.length < sites.length ? 'primary' : 'error'"
+              @click="checkAllSitesorNot"
+              class="me-2"
+              rounded="pill"
+              variant="flat"
+            >
+              <VIcon start size="small">
+                {{ selectedSites.length < sites.length ? 'mdi-check-all' : 'mdi-close-circle-outline' }}
+              </VIcon>
+              {{ checkAllText }}
+            </VBtn>
+            <div
+              class="text-body-2 font-weight-medium"
+              :class="selectedSites.length > 0 ? 'text-primary' : 'text-medium-emphasis'"
+            >
+              已选择 {{ selectedSites.length }}/{{ sites.length }} 个站点
+            </div>
+          </div>
+
+          <!-- 站点选择器 -->
+          <VRow dense>
+            <VCol v-for="site in filteredSites" :key="site.id" cols="6" sm="6" md="4">
+              <VHover v-slot="{ isHovering, props }">
+                <div
+                  v-bind="props"
+                  :class="[
+                    'site-checkbox-wrapper pa-2 pa-sm-3 rounded-lg d-flex align-center',
+                    {
+                      'site-selected': selectedSites.includes(site.id),
+                      'site-hover': isHovering && !selectedSites.includes(site.id),
+                    },
+                  ]"
+                  @click="
+                    () => {
+                      const index = selectedSites.indexOf(site.id)
+                      if (index === -1) {
+                        selectedSites.push(site.id)
+                      } else {
+                        selectedSites.splice(index, 1)
+                      }
+                    }
+                  "
+                >
+                  <VIcon
+                    :icon="selectedSites.includes(site.id) ? 'mdi-check-circle' : 'mdi-checkbox-blank-circle-outline'"
+                    :color="selectedSites.includes(site.id) ? 'primary' : 'medium-emphasis'"
+                    class="me-2"
+                    size="small"
+                  />
+                  <span :class="['text-body-2 site-name', { 'font-weight-medium': selectedSites.includes(site.id) }]">
+                    {{ site.name }}
+                  </span>
+                </div>
+              </VHover>
+            </VCol>
+          </VRow>
+        </div>
+        <div v-else class="text-center py-8 empty-site-state">
+          <div class="search-icon-wrapper mb-4 mx-auto warning">
+            <VIcon icon="mdi-alert-circle-outline" size="large" color="warning" />
+          </div>
+          <div class="text-h6 font-weight-medium mb-2">没有找到匹配的站点</div>
+          <div class="text-subtitle-1 text-medium-emphasis mb-4">
+            {{ siteFilter ? '请尝试修改过滤条件' : '站点数据加载失败，请刷新页面重试' }}
+          </div>
+          <VBtn
+            v-if="siteFilter"
+            color="primary"
+            variant="flat"
+            class="mt-3"
+            prepend-icon="mdi-refresh"
+            @click="siteFilter = ''"
+          >
+            重置
+          </VBtn>
+          <VBtn v-else color="primary" variant="flat" class="mt-3" prepend-icon="mdi-refresh" @click="emit('reload')">
+            重新加载站点
+          </VBtn>
+        </div>
+      </VCardText>
+
+      <VDivider class="search-divider" />
+
+      <VCardActions class="pa-4">
+        <VSpacer />
+        <VBtn
+          color="grey-darken-1"
+          variant="text"
+          @click="emit('close')"
+          class="mr-2 d-flex align-center justify-center"
+        >
+          取消
+        </VBtn>
+        <VBtn
+          color="primary"
+          variant="flat"
+          :disabled="selectedSites.length === 0"
+          @click="emit('search', selectedSites)"
+          prepend-icon="mdi-magnify"
+          class="d-flex align-center justify-center px-5"
+        >
+          搜索
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+<style scoped>
+.site-checkbox-wrapper {
+  cursor: pointer;
+  transition: transform 0.2s ease, background-color 0.2s ease;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+}
+
+.site-checkbox-wrapper:hover {
+  transform: translateY(-2px);
+}
+
+.site-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.site-selected {
+  background-color: rgba(var(--v-theme-primary), 0.08);
+  color: rgb(var(--v-theme-primary));
+  border-color: rgba(var(--v-theme-primary), 0.2);
+}
+
+.site-hover {
+  background-color: rgba(var(--v-theme-primary), 0.04);
+}
+</style>

src/components/dialog/SiteAddEditDialog.vue

@@ -1,18 +1,14 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
-import type { Site } from '@/api/types'
+import type { DownloaderConf, Site } from '@/api/types'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import { numberValidator, requiredValidator } from '@/@validators'
 import api from '@/api'
 import { useDisplay } from 'vuetify'
-import { useConfirm } from 'vuetify-use-dialog'
 
 // 显示器宽度
 const display = useDisplay()
 
-// 确认框
-const createConfirm = useConfirm()
-
 // 输入参数
 const props = defineProps({
   siteid: Number,
@@ -35,11 +31,18 @@ const siteForm = ref<Site>({
   limit_seconds: 0,
   name: '',
   domain: '',
+  downloader: '',
 })
 
 // 提示框
 const $toast = useToast()
 
+// 维护类型
+const siteType = ref('cookie')
+
+// 是否限流
+const isLimit = ref(false)
+
 // 状态下拉项
 const statusItems = [
   { title: '启用', value: true },
@@ -54,10 +57,23 @@ const priorityItems = ref(
   })),
 )
 
-// 监控输入参数
-watchEffect(async () => {
-  if (props.siteid) fetchSiteInfo()
-})
+// 下载器选项
+const downloaderOptions = ref<{ title: string; value: string }[]>([])
+
+async function loadDownloaderSetting() {
+  try {
+    const downloaders: DownloaderConf[] = await api.get('download/clients')
+    downloaderOptions.value = [
+      { title: '默认', value: '' },
+      ...downloaders.map((item: { name: any }) => ({
+        title: item.name,
+        value: item.name,
+      })),
+    ]
+  } catch (error) {
+    console.error('加载下载器设置失败:', error)
+  }
+}
 
 // 查询站点信息
 async function fetchSiteInfo() {
@@ -88,29 +104,19 @@ async function addSite() {
   doneNProgress()
 }
 
-// 调用API删除站点信息
-async function deleteSiteInfo() {
-  const isConfirmed = await createConfirm({
-    title: '确认',
-    content: `是否确认删除站点？`,
-  })
-
-  if (!isConfirmed) return
-
-  try {
-    const result: { [key: string]: any } = await api.delete(`site/${siteForm.value?.id}`)
-    if (result.success) emit('remove')
-    else $toast.error(`${siteForm.value?.name} 删除失败：${result.message}`)
-  } catch (error) {
-    $toast.error(`${siteForm.value?.name} 删除失败！`)
-    console.error(error)
-  }
-}
-
 // 调用API更新站点信息
 async function updateSiteInfo() {
   startNProgress()
   try {
+    if (isLimit.value) {
+      siteForm.value.limit_interval = siteForm.value.limit_interval || 0
+      siteForm.value.limit_count = siteForm.value.limit_count || 0
+      siteForm.value.limit_seconds = siteForm.value.limit_seconds || 0
+    } else {
+      siteForm.value.limit_interval = 0
+      siteForm.value.limit_count = 0
+      siteForm.value.limit_seconds = 0
+    }
     const result: { [key: string]: any } = await api.put('site/', siteForm.value)
     if (result.success) {
       $toast.success(`${siteForm.value?.name} 更新成功！`)
@@ -124,10 +130,20 @@ async function updateSiteInfo() {
   }
   doneNProgress()
 }
+
+onMounted(async () => {
+  if (props.oper !== 'add') {
+    await fetchSiteInfo()
+    if (siteForm.value.limit_interval || siteForm.value.limit_count || siteForm.value.limit_seconds)
+      isLimit.value = true
+    if (siteForm.value.apikey) siteType.value = 'api'
+  }
+  await loadDownloaderSetting()
+})
 </script>
 
 <template>
-  <VDialog scrollable :close-on-back="false" persistent eager max-width="50rem" :fullscreen="!display.mdAndUp.value">
+  <VDialog scrollable :close-on-back="false" eager max-width="45rem" :fullscreen="!display.mdAndUp.value">
     <VCard
       :title="`${props.oper === 'add' ? '新增' : '编辑'}站点${props.oper !== 'add' ? ` - ${siteForm.name}` : ''}`"
       class="rounded-t"
@@ -167,7 +183,7 @@ async function updateSiteInfo() {
             </VCol>
           </VRow>
           <VRow>
-            <VCol cols="12" md="9">
+            <VCol cols="12" md="6">
               <VTextField
                 v-model="siteForm.rss"
                 label="RSS地址"
@@ -176,37 +192,85 @@ async function updateSiteInfo() {
               />
             </VCol>
             <VCol cols="12" md="3">
-              <VTextField v-model="siteForm.timeout" label="超时时间（秒）" hint="站点请求超时时间" persistent-hint />
-            </VCol>
-            <VCol cols="12">
-              <VTextarea v-model="siteForm.cookie" label="站点Cookie" hint="站点请求头中的Cookie信息" persistent-hint />
-            </VCol>
-            <VCol cols="12" md="6">
               <VTextField
-                v-model="siteForm.token"
-                label="请求头（Authorization）"
-                hint="站点请求头中的Authorization信息，特殊站点需要"
+                v-model="siteForm.timeout"
+                label="超时时间（秒）"
+                hint="站点请求超时时间，为0时不限制"
                 persistent-hint
               />
             </VCol>
-            <VCol cols="12" md="6">
-              <VTextField
-                v-model="siteForm.apikey"
-                label="令牌（API Key）"
-                hint="站点的访问API Key，特殊站点需要"
-                persistent-hint
-              />
-            </VCol>
-            <VCol cols="12">
-              <VTextField
-                v-model="siteForm.ua"
-                label="站点User-Agent"
-                hint="获取Cookie的浏览器对应的User-Agent"
+            <VCol cols="6" md="3">
+              <VSelect
+                v-model="siteForm.downloader"
+                label="下载器"
+                :items="downloaderOptions"
+                hint="此站点使用的下载器"
                 persistent-hint
               />
             </VCol>
           </VRow>
+          <VTabs v-model="siteType" show-arrows class="v-tabs-pill mt-3">
+            <VTab selected-class="v-tab--selected">
+              <div>
+                <VIcon size="20" start icon="mdi-cookie" value="cookie" />
+                Cookie
+              </div>
+            </VTab>
+            <VTab selected-class="v-tab--selected">
+              <div>
+                <VIcon size="20" start icon="mdi-api" value="api" />
+                API
+              </div>
+            </VTab>
+          </VTabs>
+          <VWindow v-model="siteType" class="my-3 disable-tab-transition" :touch="false">
+            <VWindowItem value="cookie">
+              <VRow>
+                <VCol cols="12">
+                  <VTextarea
+                    v-model="siteForm.cookie"
+                    label="站点Cookie"
+                    hint="站点请求头中的Cookie信息"
+                    persistent-hint
+                  />
+                </VCol>
+                <VCol cols="12">
+                  <VTextField
+                    v-model="siteForm.ua"
+                    label="站点User-Agent"
+                    hint="获取Cookie的浏览器对应的User-Agent"
+                    persistent-hint
+                  />
+                </VCol>
+              </VRow>
+            </VWindowItem>
+            <VWindowItem value="api">
+              <VRow>
+                <VCol cols="12" md="6">
+                  <VTextField
+                    v-model="siteForm.token"
+                    label="请求头（Authorization）"
+                    hint="站点请求头中的Authorization信息，特殊站点需要"
+                    persistent-hint
+                  />
+                </VCol>
+                <VCol cols="12" md="6">
+                  <VTextField
+                    v-model="siteForm.apikey"
+                    label="令牌（API Key）"
+                    hint="站点的访问API Key，特殊站点需要"
+                    persistent-hint
+                  />
+                </VCol>
+              </VRow>
+            </VWindowItem>
+          </VWindow>
           <VRow>
+            <VCol cols="12" md="4">
+              <VSwitch v-model="isLimit" label="限制站点访问频率" />
+            </VCol>
+          </VRow>
+          <VRow v-if="isLimit">
             <VCol cols="12" md="4">
               <VTextField
                 v-model="siteForm.limit_interval"
@@ -237,18 +301,20 @@ async function updateSiteInfo() {
           </VRow>
           <VRow>
             <VCol cols="12" md="6">
-              <VSwitch v-model="siteForm.proxy" label="代理" hint="使用代理服务器访问该站点" persistent-hint />
+              <VSwitch v-model="siteForm.proxy" label="使用代理访问" hint="使用代理服务器访问该站点" persistent-hint />
             </VCol>
             <VCol cols="12" md="6">
-              <VSwitch v-model="siteForm.render" label="仿真" hint="使用浏览器模拟真实访问该站点" persistent-hint />
+              <VSwitch
+                v-model="siteForm.render"
+                label="浏览器仿真"
+                hint="使用浏览器模拟真实访问该站点"
+                persistent-hint
+              />
             </VCol>
           </VRow>
         </VForm>
       </VCardText>
       <VCardActions class="pt-3">
-        <VBtn v-if="props.oper !== 'add'" color="error" @click="deleteSiteInfo" variant="outlined" class="me-3">
-          删除
-        </VBtn>
         <VSpacer />
         <VBtn
           v-if="props.oper === 'add'"