更新 SubscribeShareCard 和 ForkSubscribeDialog 组件，调整图标颜色，添加搜索词显示，优化识别词的显示行数，并在 ForkSubscribeDialog 中添加复用次数提示

- 增加防抖，解决输入打断

.env.development

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

.env.production

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

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

.gitignore

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

.vscode/settings.json

@@ -6,9 +6,6 @@
   "[javascript]": {
     "editor.formatOnSave": false
   },
-  "[typescript]": {
-    "editor.formatOnSave": false
-  },
   "[markdown]": {
     "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
   },
@@ -25,7 +22,7 @@
   },
   // Vue
   "[vue]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   // Extension: Volar
   "volar.preview.port": 3000,
@@ -34,6 +31,10 @@
     "source.fixAll.eslint": "explicit",
     "source.fixAll.stylelint": "explicit"
   },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
   "eslint.alwaysShowStatus": true,
   "eslint.format.enable": true,
   // Extension: Stylelint

index.html

@@ -15,7 +15,6 @@
   <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
   <link rel="apple-touch-startup-image" href="/splash/apple-splash.jpg" />
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-  <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
   <meta name="mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@@ -36,7 +35,7 @@
   <div id="loading-bg">
     <div class="loading-logo">
       <!-- Logo -->
-      <svg width="100px" height="100px" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg"
+      <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)">
@@ -159,4 +158,4 @@
   </script>
 </body>
 
-</html>
+</html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "1.8.3",
+  "version": "2.2.1",
   "private": true,
   "bin": "dist/service.js",
   "scripts": {
@@ -19,55 +19,46 @@
     ]
   },
   "dependencies": {
-    "@casl/ability": "^6.2.0",
-    "@casl/vue": "^2.2.0",
-    "@floating-ui/dom": "1.6.3",
-    "@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",
-    "axios-mock-adapter": "^1.21.4",
-    "chart.js": "^4.1.2",
-    "colorthief": "^2.4.0",
-    "express": "^4.18.2",
-    "express-http-proxy": "^2.0.0",
-    "jwt-decode": "^4.0.0",
-    "nprogress": "^0.2.0",
-    "postcss-purgecss": "^5.0.0",
-    "prismjs": "^1.29.0",
-    "pull-refresh-vue3": "^0.3.1",
-    "qrcode.vue": "^3.4.1",
-    "roboto-fontface": "^0.10.0",
-    "sass": "^1.59.3",
-    "tailwindcss": "^3.3.2",
-    "unplugin-vue-define-options": "^1.3.5",
-    "vite-plugin-pwa": "^0.19.8",
-    "vue": "^3.3.2",
-    "vue-chartjs": "^5.2.0",
-    "vue-flatpickr-component": "11.0.5",
-    "vue-i18n": "^9.2.2",
-    "vue-prism-component": "^2.0.0",
-    "vue-router": "^4.2.0",
-    "vue-toast-notification": "^3",
-    "vue3-ace-editor": "^2.2.4",
-    "vue3-apexcharts": "^1.4.1",
-    "vue3-perfect-scrollbar": "^2.0.0",
-    "vuetify": "3.5.14",
-    "vuetify-use-dialog": "^0.6.0",
-    "vuex": "^4.1.0",
-    "vuex-persistedstate": "^4.1.0",
-    "webfontloader": "^1.6.28"
-  },
-  "devDependencies": {
-    "@antfu/eslint-config-vue": "^0.43.1",
     "@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",
+    "@vue-js-cron/vuetify": "^5.0.9",
+    "@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",
+    "copy-to-clipboard": "^3.3.3",
+    "dayjs": "^1.11.10",
+    "express": "^4.18.2",
+    "express-http-proxy": "^2.0.0",
+    "lodash": "^4.17.21",
+    "mousetrap": "^1.6.5",
+    "nprogress": "^0.2.0",
+    "qrcode.vue": "^3.4.1",
+    "sass": "^1.59.3",
+    "tailwindcss": "^3.3.2",
+    "unplugin-vue-define-options": "^1.3.5",
+    "vue": "^3.3.2",
+    "vue-router": "^4.2.0",
+    "vue-toast-notification": "^3",
+    "vue3-ace-editor": "^2.2.4",
+    "vue3-apexcharts": "^1.4.1",
+    "vue3-perfect-scrollbar": "^2.0.0",
+    "vuedraggable": "^4.1.0",
+    "vuetify": "3.6.8",
+    "vuetify-use-dialog": "^0.6.11",
+    "vuex": "^4.1.0",
+    "vuex-persistedstate": "^4.1.0",
+    "webfontloader": "^1.6.28"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config-vue": "^0.43.1",
     "@iconify-json/mdi": "^1.1.52",
     "@iconify/tools": "^4.0.4",
     "@iconify/vue": "4.1.1",
@@ -81,7 +72,6 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "autoprefixer": "^10.4.14",
-    "dayjs": "^1.11.10",
     "eslint": "^9.0.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-typescript": "^3.5.1",
@@ -91,19 +81,20 @@
     "eslint-plugin-sonarjs": "^0.25.1",
     "eslint-plugin-unicorn": "^52.0.0",
     "eslint-plugin-vue": "^9.12.0",
-    "lodash": "^4.17.21",
     "postcss": "8",
     "postcss-html": "^1.5.0",
     "stylelint": "16.3.1",
     "stylelint-config-idiomatic-order": "10.0.0",
     "stylelint-config-standard-scss": "13.1.0",
     "stylelint-use-logical-spec": "5.0.1",
+    "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",
     "vite-plugin-pages": "^0.32.1",
+    "vite-plugin-pwa": "^0.20.0",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-plugin-vuetify": "2.0.3",
     "vue-shepherd": "^3.0.0",

public/loader.css

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

public/manifest.json

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

public/nginx.conf

@@ -11,6 +11,13 @@ http {
 
     keepalive_timeout 3600;
 
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+    gzip_proxied any;
+    gzip_min_length 256;
+    gzip_vary on;
+    gzip_comp_level 6;
+
     server {
 
         include mime.types;
@@ -28,9 +35,16 @@ http {
             try_files $uri $uri/ /index.html;
         }
 
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            # 静态资源
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+            root html;
+        }
+
         location /assets {
             # 静态资源
-            expires 7d;
+            expires 1y;
             add_header Cache-Control "public";
             root html;
         }

public/robots.txt

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

src/@core/components/DialogCloseBtn.vue

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

src/@core/components/LoadingBanner.vue

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

src/@core/components/ThemeSwitcher.vue

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

src/@core/scss/base/placeholders/_misc.scss

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

src/@core/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/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/compatibility.ts

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

src/@core/utils/formatters.ts

@@ -8,8 +8,7 @@ dayjs.extend(relativeTime)
 dayjs.locale(ZH_CN)
 
 export function avatarText(value: string) {
-  if (!value)
-    return ''
+  if (!value) return ''
   const nameArray = value.split(' ')
 
   return nameArray.map(word => word.charAt(0).toUpperCase()).join('')
@@ -19,7 +18,9 @@ export function avatarText(value: string) {
 export function kFormatter(num: number) {
   const regex = /\B(?=(\d{3})+(?!\d))/g
 
-  return Math.abs(num) > 9999 ? `${Math.sign(num) * +((Math.abs(num) / 1000).toFixed(1))}k` : Math.abs(num).toFixed(0).replace(regex, ',')
+  return Math.abs(num) > 9999
+    ? `${Math.sign(num) * +(Math.abs(num) / 1000).toFixed(1)}k`
+    : Math.abs(num).toFixed(0).replace(regex, ',')
 }
 
 /**
@@ -29,9 +30,11 @@ export function kFormatter(num: number) {
  * @param {string} value date to format
  * @param {Intl.DateTimeFormatOptions} formatting Intl object to format with
  */
-export function formatDate(value: string, formatting: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' }) {
-  if (!value)
-    return value
+export function formatDate(
+  value: string,
+  formatting: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' },
+) {
+  if (!value) return value
 
   return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
 }
@@ -46,32 +49,36 @@ export function formatDateToMonthShort(value: string, toTimeForCurrentDay = true
   const date = new Date(value)
   let formatting: Record<string, string> = { month: 'short', day: 'numeric' }
 
-  if (toTimeForCurrentDay && isToday(date))
-    formatting = { hour: 'numeric', minute: 'numeric' }
+  if (toTimeForCurrentDay && isToday(date)) formatting = { hour: 'numeric', minute: 'numeric' }
 
   return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
 }
 
-export const prefixWithPlus = (value: number) => value > 0 ? `+${value}` : value
+export const prefixWithPlus = (value: number) => (value > 0 ? `+${value}` : value)
 
 // 格式化为Sxx
-export const formatSeason = (value: string) => value ? `S${value.padStart(2, '0')}` : ''
+export const formatSeason = (value: string) => (value ? `S${value.padStart(2, '0')}` : '')
 
 // 格式化为xx[TGMK]B
-export function formatFileSize(bytes: number) {
-  if (bytes < 0)
-    throw new Error('字节数不能为负数。')
+export function formatFileSize(bytes: number, decimals = 2, prefix = false) {
+  // 负数标记
+  let negative = false
+  let size = bytes
+  if (bytes < 0) {
+    negative = true
+    size = Math.abs(bytes)
+  }
 
   const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  let size = bytes
   let unitIndex = 0
 
   while (size >= 1024 && unitIndex < units.length - 1) {
     size /= 1024
     unitIndex++
   }
-
-  return `${size.toFixed(2)} ${units[unitIndex]}`
+  if (negative) return `-${size.toFixed(decimals)} ${units[unitIndex]}`
+  else
+    return prefix ? `+${size.toFixed(decimals)} ${units[unitIndex]}` : `${size.toFixed(decimals)} ${units[unitIndex]}`
 }
 
 // 将时间秒格式化为时分秒
@@ -82,22 +89,18 @@ export function formatSeconds(seconds: number) {
 
   let formattedTime = ''
 
-  if (hours > 0)
-    formattedTime += `${hours}小时`
+  if (hours > 0) formattedTime += `${hours}小时`
 
-  if (minutes > 0)
-    formattedTime += `${minutes}分`
+  if (minutes > 0) formattedTime += `${minutes}分`
 
-  if ((remainingSeconds > 0 || formattedTime === '') && hours <= 0)
-    formattedTime += `${remainingSeconds}秒`
+  if ((remainingSeconds > 0 || formattedTime === '') && hours <= 0) formattedTime += `${remainingSeconds}秒`
 
   return formattedTime
 }
 
 // YYYY-MM-DD 转化为Date
 export function parseDate(dateString: string): Date | null {
-  if (!dateString)
-    return null
+  if (!dateString) return null
   const [year, month, day] = dateString.split('-').map(Number)
 
   return new Date(year, month - 1, day)
@@ -105,8 +108,7 @@ export function parseDate(dateString: string): Date | null {
 
 // 文件大小格式化
 export function formatBytes(bytes: number, decimals = 2) {
-  if (bytes === 0)
-    return '0 bytes'
+  if (bytes === 0) return '0 bytes'
 
   const k = 1024
   const dm = decimals < 0 ? 0 : decimals
@@ -119,11 +121,9 @@ export function formatBytes(bytes: number, decimals = 2) {
 
 // 格式化剧集列表
 export function formatEp(nums: number[]): string {
-  if (!nums.length)
-    return ''
+  if (!nums.length) return ''
 
-  if (nums.length === 1)
-    return nums[0].toString()
+  if (nums.length === 1) return nums[0].toString()
 
   // 将数组升序排序
   nums.sort((a, b) => a - b)
@@ -134,43 +134,22 @@ export function formatEp(nums: number[]): string {
   for (let i = 1; i < nums.length; i++) {
     if (nums[i] === end + 1) {
       end = nums[i]
-    }
-    else {
-      if (start === end)
-        formattedRanges.push(start.toString())
-
-      else
-        formattedRanges.push(`${start.toString()}-${end.toString()}`)
+    } else {
+      if (start === end) formattedRanges.push(start.toString())
+      else formattedRanges.push(`${start.toString()}-${end.toString()}`)
 
       start = end = nums[i]
     }
   }
 
-  if (start === end)
-    formattedRanges.push(start.toString())
-
-  else
-    formattedRanges.push(`${start.toString()}-${end.toString()}`)
+  if (start === end) formattedRanges.push(start.toString())
+  else formattedRanges.push(`${start.toString()}-${end.toString()}`)
 
   return formattedRanges.join('、')
 }
 
 // 将yyyy-mm-dd hh:mm:ss转换为时间差，如：1小时前，1天前
 export function formatDateDifference(dateString: string): string {
-  // const timeDifference = dayjs().millisecond() - dayjs(dateString).millisecond()
-  // const secondsDifference = Math.floor(timeDifference / 1000)
-  // const minutesDifference = Math.floor(secondsDifference / 60)
-  // const hoursDifference = Math.floor(minutesDifference / 60)
-  // const daysDifference = Math.floor(hoursDifference / 24)
-
-  // if (daysDifference > 0)
-  //   return `${daysDifference}天前`
-  // else if (hoursDifference > 0)
-  //   return `${hoursDifference}小时前`
-  // else if (minutesDifference > 0)
-  //   return `${minutesDifference}分钟前`
-  // else
-  //   return '刚刚'
-
+  if (!dateString) return ''
   return dayjs(dateString).fromNow()
 }

src/@core/utils/index.ts

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

src/@core/utils/navigator.ts

@@ -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,17 +15,31 @@ 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
+export function urlBase64ToUint8Array(base64String: string) {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
+
+  const rawData = window.atob(base64)
+  const outputArray = new Uint8Array(rawData.length)
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i)
+  }
+  return outputArray
+}
+
+// 判断是否为PWA
+export const isPWA = async (): Promise<boolean> => {
+  if ('serviceWorker' in navigator) {
+    const registrations = await navigator.serviceWorker.getRegistrations()
+    return registrations.length > 0
+  }
+  return (window.navigator as any).standalone === true
 }

src/@layouts/components/VerticalNav.vue

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

src/@layouts/components/VerticalNavLink.vue

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

src/@layouts/components/VerticalNavSectionTitle.vue

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

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

@@ -5,7 +5,7 @@
 @use "@configured-variables" as variables;
 
 html {
-  min-height: calc(100% + env(safe-area-inset-top));
+  min-height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
   background: rgb(var(--v-theme-background));
   overflow-y: overlay;
 }

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/types.d.ts

@@ -6,19 +6,19 @@ export interface UserConfig {
   app: {
     title: Lowercase<string>
     logo: VNode
-    contentWidth: typeof ContentWidth[keyof typeof ContentWidth]
-    contentLayoutNav: typeof AppContentLayoutNav[keyof typeof AppContentLayoutNav]
+    contentWidth: (typeof ContentWidth)[keyof typeof ContentWidth]
+    contentLayoutNav: (typeof AppContentLayoutNav)[keyof typeof AppContentLayoutNav]
     overlayNavFromBreakpoint: number
     enableI18n: boolean
     isRtl: boolean
     iconRenderer?: Component
   }
   navbar: {
-    type: typeof NavbarType[keyof typeof NavbarType]
+    type: (typeof NavbarType)[keyof typeof NavbarType]
     navbarBlur: boolean
   }
   footer: {
-    type:typeof FooterType[keyof typeof FooterType]
+    type: (typeof FooterType)[keyof typeof FooterType]
   }
   verticalNav: {
     isVerticalNavCollapsed: boolean
@@ -120,6 +120,13 @@ export interface NavLink extends NavLinkProps, Partial<AclProperties> {
   disable?: boolean
 }
 
+export interface NavMenu extends NavLink {
+  header: string
+  description?: string
+  admin?: boolean
+  footer?: boolean
+}
+
 // 👉 Vertical nav group
 export interface NavGroup extends Partial<AclProperties> {
   title: string
@@ -143,7 +150,7 @@ interface I18nLanguage {
 // avatar | text | icon
 // Thanks: https://stackoverflow.com/a/60617060/10796681
 type Notification = {
-  id:number
+  id: number
   title: string
   subtitle: string
   time: string
@@ -157,5 +164,6 @@ type Notification = {
 
 interface ThemeSwitcherTheme {
   name: string
+  title: string
   icon: string
 }

src/App.vue

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

src/ace-config.ts

@@ -8,6 +8,10 @@ import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url'
 
 import modeYamlUrl from 'ace-builds/src-noconflict/mode-yaml?url'
 
+import modeCssUrl from 'ace-builds/src-noconflict/mode-css?url'
+
+import modeIniUrl from 'ace-builds/src-noconflict/mode-ini?url'
+
 import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url'
 
 import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url'
@@ -24,6 +28,8 @@ import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url'
 
 import workerYamlUrl from 'ace-builds/src-noconflict/worker-yaml?url'
 
+import workerCssUrl from 'ace-builds/src-noconflict/worker-css?url'
+
 import snippetsHtmlUrl from 'ace-builds/src-noconflict/snippets/html?url'
 
 import snippetsJsUrl from 'ace-builds/src-noconflict/snippets/javascript?url'
@@ -32,12 +38,18 @@ import snippetsYamlUrl from 'ace-builds/src-noconflict/snippets/yaml?url'
 
 import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url'
 
+import snippertsCssUrl from 'ace-builds/src-noconflict/snippets/css?url'
+
+import snippertsIniUrl from 'ace-builds/src-noconflict/snippets/ini?url'
+
 import 'ace-builds/src-noconflict/ext-language_tools'
 
 ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
 ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
 ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl)
 ace.config.setModuleUrl('ace/mode/yaml', modeYamlUrl)
+ace.config.setModuleUrl('ace/mode/css', modeCssUrl)
+ace.config.setModuleUrl('ace/mode/ini', modeIniUrl)
 ace.config.setModuleUrl('ace/theme/github', themeGithubUrl)
 ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl)
 ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl)
@@ -46,9 +58,12 @@ ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl)
 ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl)
 ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl)
 ace.config.setModuleUrl('ace/mode/yaml_worker', workerYamlUrl)
+ace.config.setModuleUrl('ace/mode/css_worker', workerCssUrl)
 ace.config.setModuleUrl('ace/snippets/html', snippetsHtmlUrl)
 ace.config.setModuleUrl('ace/snippets/javascript', snippetsJsUrl)
 ace.config.setModuleUrl('ace/snippets/javascript', snippetsYamlUrl)
 ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl)
+ace.config.setModuleUrl('ace/snippets/css', snippertsCssUrl)
+ace.config.setModuleUrl('ace/snippets/ini', snippertsIniUrl)
 
 ace.require('ace/ext/language_tools')

src/api/constants.ts

@@ -0,0 +1,80 @@
+export const storageOptions = [
+  {
+    title: '本地',
+    value: 'local',
+    icon: 'mdi-folder-multiple-outline',
+  },
+  {
+    title: '阿里云盘',
+    value: 'alipan',
+    icon: 'mdi-cloud-outline',
+  },
+  {
+    title: '115网盘',
+    value: 'u115',
+    icon: 'mdi-cloud-outline',
+  },
+  {
+    title: 'RClone',
+    value: 'rclone',
+    icon: 'mdi-cloud-outline',
+  },
+  {
+    title: 'AList',
+    value: 'alist',
+    icon: 'mdi-cloud-outline',
+  },
+]
+
+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

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

src/assets/images/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

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

src/components/NoDataFound.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import image from '@images/misc/teamwork.png'
+import image from '@images/no-data.svg'
 
 const props = defineProps<Props>()
 
@@ -11,10 +11,7 @@ interface Props {
 </script>
 
 <template>
-  <VEmptyState
-    :image="image"
-    size="250"
-  >
+  <VEmptyState :image="image" size="250">
     <template #title>
       <div class="mt-8 text-2xl">
         {{ props.errorTitle }}
@@ -22,7 +19,7 @@ interface Props {
     </template>
 
     <template #text>
-      <div class="text-subtitle">
+      <div class="text-subtitle mt-3">
         {{ props.errorDescription }}
       </div>
     </template>

src/components/cards/BackdropCard.vue

@@ -18,8 +18,7 @@ function imageLoadHandler() {
 
 // 跳转播放
 function goPlay() {
-  if (props.media?.link)
-    window.open(props.media?.link, '_blank')
+  if (props.media?.link) window.open(props.media?.link, '_blank')
 }
 
 // 计算图片地址
@@ -30,11 +29,7 @@ const getImgUrl = computed(() => {
 </script>
 
 <template>
-  <VHover
-    v-bind="props"
-    :height="props.height"
-    :width="props.width"
-  >
+  <VHover v-bind="props">
     <template #default="hover">
       <VCard
         v-bind="hover.props"
@@ -48,12 +43,7 @@ const getImgUrl = computed(() => {
         @click="goPlay"
       >
         <template #image>
-          <VImg
-            :src="getImgUrl"
-            aspect-ratio="2/3"
-            cover
-            @load="imageLoadHandler"
-          >
+          <VImg :src="getImgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler">
             <template #placeholder>
               <div class="w-full h-full">
                 <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
@@ -62,7 +52,9 @@ const getImgUrl = computed(() => {
             <VCardText
               class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
             >
-              <h1 class="mb-1 text-white text-shadow font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+              <h1
+                class="mb-1 text-white text-shadow font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ..."
+              >
                 {{ props.media?.title }}
               </h1>
               <span class="text-shadow">{{ props.media?.subtitle }}</span>
@@ -81,9 +73,3 @@ const getImgUrl = computed(() => {
     </template>
   </VHover>
 </template>
-
-<style lang="scss">
-.text-shadow{
-  text-shadow:1px 1px #777;
-}
-</style>

src/components/cards/BangumiPersonCard.vue

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

src/components/cards/CustomRuleCard.vue

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { CustomRule } from '@/api/types'
+import { useToast } from 'vue-toast-notification'
+import filter_svg from '@images/svg/filter.svg'
+import { cloneDeep } from 'lodash'
+import { innerFilterRules } from '@/api/constants'
+
+// 输入参数
+const props = defineProps({
+  // 单条规则
+  rule: {
+    type: Object as PropType<CustomRule>,
+    required: true,
+  },
+  // 所有规则
+  rules: {
+    type: Array as PropType<CustomRule[]>,
+    required: true,
+  },
+})
+
+// 提示框
+const $toast = useToast()
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'change', 'done'])
+
+// 规则详情弹窗
+const ruleInfoDialog = ref(false)
+
+// 规则详情
+const ruleInfo = ref<CustomRule>({
+  id: '',
+  name: '',
+  include: '',
+  exclude: '',
+  size_range: '',
+  seeders: '',
+  publish_time: '',
+})
+
+// 打开详情弹窗
+function openRuleInfoDialog() {
+  // 深复制
+  ruleInfo.value = cloneDeep(props.rule)
+  ruleInfoDialog.value = true
+}
+
+// 保存详情数据
+function saveRuleInfo() {
+  // 有空值
+  if (!ruleInfo.value.id || !ruleInfo.value.name) {
+    if (!ruleInfo.value.id && !ruleInfo.value.name) {
+      $toast.error('规则ID和规则名称不能为空')
+    }
+    return
+  }
+  // 检查ID是否在内置的规则中
+  if (innerFilterRules.find(option => option.value === ruleInfo.value.id)) {
+    $toast.error('当前规则ID已被内置规则占用')
+    return
+  }
+  // 检查规则名称是否在内置的规则中
+  if (innerFilterRules.find(option => option.title === ruleInfo.value.name)) {
+    $toast.error('当前规则名称已被内置规则占用')
+    return
+  }
+  // ID已存在
+  if (ruleInfo.value.id !== props.rule.id && props.rules.find(rule => rule.id === ruleInfo.value.id)) {
+    $toast.error(`规则ID【${ruleInfo.value.id}】已存在`)
+    return
+  }
+  // 规则名称已存在
+  if (ruleInfo.value.name !== props.rule.name && props.rules.find(rule => rule.name === ruleInfo.value.name)) {
+    $toast.error(`规则名称【${ruleInfo.value.name}】已存在`)
+    return
+  }
+  // 保存数据
+  ruleInfoDialog.value = false
+  emit('change', ruleInfo.value, props.rule.id)
+  emit('done')
+}
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
+</script>
+
+<template>
+  <div>
+    <VCard variant="tonal" @click="openRuleInfoDialog">
+      <span class="absolute top-3 right-12">
+        <IconBtn>
+          <VIcon class="cursor-move" icon="mdi-drag" />
+        </IconBtn>
+      </span>
+      <DialogCloseBtn @click="onClose" />
+      <VCardText class="flex justify-space-between align-center gap-3">
+        <div class="align-self-start">
+          <h5 class="text-h6 mb-1">{{ props.rule.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-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

@@ -0,0 +1,312 @@
+<script lang="ts" setup>
+import type { TransferDirectoryConf } from '@/api/types'
+import PathInput from '@/components/input/PathInput.vue'
+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<TransferDirectoryConf>,
+    required: true, // 必填参数
+  },
+  categories: {
+    type: Object as PropType<{ [key: string]: any }>,
+    required: true,
+  },
+  width: String,
+  height: String,
+})
+
+// 下载路径
+const downloadPath = ref<string>('')
+
+// 媒体库路径
+const libraryPath = ref<string>('')
+
+// 卡版是否折叠状态
+const isCollapsed = ref(true)
+
+// 类型下拉字典
+const typeItems = [
+  { title: '全部', value: '' },
+  { title: '电影', value: '电影' },
+  { title: '电视剧', value: '电视剧' },
+]
+
+// 自动整理方式下拉字典
+const 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'])
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
+
+// 根据选中的媒体类型，获取对应的媒体类别
+const getCategories = computed(() => {
+  const default_value = [{ title: '全部', value: '' }]
+  if (!props.categories || !props.categories[props.directory?.media_type ?? '']) return default_value
+  return default_value.concat(props.categories[props.directory.media_type ?? ''])
+})
+
+// 监听 下载储存与媒体库储存 变化，重新加载整理方式下拉字典
+watch(
+  [() => props.directory.library_storage, () => props.directory.storage],
+  ([newLibraryStorage, newStorage], [oldLibraryStorage, oldStorage]) => {
+    if (newLibraryStorage !== oldLibraryStorage || newStorage !== oldStorage) {
+      loadTransferTypeItems()
+    }
+  },
+  { immediate: true },
+)
+
+// 媒体类别和类型变更非空时，将按类型分类和按类别分类置为false
+watch(
+  [() => props.directory.media_type, () => props.directory.media_category],
+  ([newMediaType, newMediaCategory], [oldMediaType, oldMediaCategory]) => {
+    if (newMediaType && newMediaType !== oldMediaType) {
+      props.directory.download_type_folder = false
+      props.directory.library_type_folder = false
+    }
+    if (newMediaCategory && newMediaCategory !== oldMediaCategory) {
+      props.directory.download_category_folder = false
+      props.directory.library_category_folder = false
+    }
+  },
+)
+</script>
+
+<template>
+  <VCard variant="tonal" :width="props.width" :height="props.height">
+    <DialogCloseBtn @click="onClose" />
+    <VCardItem>
+      <VTextField
+        v-model="props.directory.name"
+        variant="underlined"
+        label="别名"
+        class="me-20 text-high-emphasis font-weight-bold"
+      />
+      <span class="absolute top-3 right-12">
+        <IconBtn>
+          <VIcon class="cursor-move" icon="mdi-drag" />
+        </IconBtn>
+      </span>
+    </VCardItem>
+    <VCardText v-if="!isCollapsed">
+      <VForm>
+        <VRow>
+          <VCol cols="6">
+            <VSelect
+              v-model="props.directory.media_type"
+              variant="underlined"
+              :items="typeItems"
+              label="媒体类型"
+              @update:modelValue="props.directory.media_category = ''"
+            />
+          </VCol>
+          <VCol cols="6">
+            <VSelect
+              v-model="props.directory.media_category"
+              variant="underlined"
+              :items="getCategories"
+              label="媒体类别"
+            />
+          </VCol>
+          <VCol cols="4">
+            <VSelect
+              v-model="props.directory.storage"
+              variant="underlined"
+              :items="storageOptions"
+              label="下载存储/源存储"
+            />
+          </VCol>
+          <VCol cols="8">
+            <PathInput v-model="props.directory.download_path" :storage="props.directory.storage">
+              <template #activator="{ menuprops }">
+                <VTextField
+                  :model-value="props.directory.download_path"
+                  v-bind="menuprops"
+                  variant="underlined"
+                  label="下载目录/源目录"
+                />
+              </template>
+            </PathInput>
+          </VCol>
+          <VCol cols="6" v-if="!props.directory.media_type || props.directory.media_type === ''">
+            <VSwitch v-model="props.directory.download_type_folder" label="按类型分类"></VSwitch>
+          </VCol>
+          <VCol cols="6" v-if="!props.directory.media_category || props.directory.media_category === ''">
+            <VSwitch v-model="props.directory.download_category_folder" label="按类别分类"></VSwitch>
+          </VCol>
+        </VRow>
+        <VDivider v-if="$props.directory.monitor_type" class="my-3 bg-primary" />
+        <VRow>
+          <VCol>
+            <VSelect
+              v-model="props.directory.monitor_type"
+              variant="underlined"
+              :items="transferSourceItems"
+              label="自动整理"
+            />
+          </VCol>
+        </VRow>
+        <VRow v-if="$props.directory.monitor_type">
+          <VCol cols="12" v-if="$props.directory.monitor_type == 'monitor'">
+            <VSelect
+              v-model="props.directory.monitor_mode"
+              variant="underlined"
+              :items="MonitorModeItems"
+              label="监控模式"
+            />
+          </VCol>
+          <VCol cols="4">
+            <VSelect
+              v-model="props.directory.library_storage"
+              variant="underlined"
+              :items="storageOptions"
+              label="媒体库存储"
+            />
+          </VCol>
+          <VCol cols="8">
+            <PathInput v-model="props.directory.library_path" :storage="props.directory.library_storage">
+              <template #activator="{ menuprops }">
+                <VTextField
+                  :modelValue="props.directory.library_path"
+                  v-bind="menuprops"
+                  variant="underlined"
+                  label="媒体库目录"
+                />
+              </template>
+            </PathInput>
+          </VCol>
+          <VCol cols="4">
+            <VSelect
+              v-model="props.directory.transfer_type"
+              variant="underlined"
+              :items="transferTypeItems"
+              label="整理方式"
+              :no-data-text="computedNoDataText"
+            />
+          </VCol>
+          <VCol cols="8">
+            <VSelect
+              v-model="props.directory.overwrite_mode"
+              variant="underlined"
+              :items="overwriteModeItems"
+              label="覆盖模式"
+            />
+          </VCol>
+          <VCol cols="6" v-if="!props.directory.media_type || props.directory.media_type === ''">
+            <VSwitch v-model="props.directory.library_type_folder" label="按类型分类"></VSwitch>
+          </VCol>
+          <VCol cols="6" v-if="!props.directory.media_category || props.directory.media_category === ''">
+            <VSwitch v-model="props.directory.library_category_folder" label="按类别分类"></VSwitch>
+          </VCol>
+          <VCol cols="6">
+            <VSwitch v-model="props.directory.renaming" label="智能重命名"></VSwitch>
+          </VCol>
+          <VCol cols="6">
+            <VSwitch v-model="props.directory.scraping" label="刮削元数据"></VSwitch>
+          </VCol>
+          <VCol cols="6">
+            <VSwitch v-model="props.directory.notify" label="发送通知"></VSwitch>
+          </VCol>
+        </VRow>
+      </VForm>
+    </VCardText>
+    <VCardActions class="text-center py-0">
+      <VSpacer />
+      <VBtn :icon="isCollapsed ? 'mdi-chevron-down' : 'mdi-chevron-up'" @click.stop="isCollapsed = !isCollapsed" />
+      <VSpacer />
+    </VCardActions>
+  </VCard>
+</template>

src/components/cards/DoubanPersonCard.vue

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

src/components/cards/DownloaderCard.vue

@@ -0,0 +1,317 @@
+<script setup lang="ts">
+import api from '@/api'
+import { formatFileSize } from '@/@core/utils/formatters'
+import { DownloaderConf } from '@/api/types'
+import { useToast } from 'vue-toast-notification'
+import type { DownloaderInfo } from '@/api/types'
+import qbittorrent_image from '@images/logos/qbittorrent.png'
+import transmission_image from '@images/logos/transmission.png'
+import { cloneDeep } from 'lodash'
+
+// 定义输入
+const props = defineProps({
+  // 单个下载器
+  downloader: {
+    type: Object as PropType<DownloaderConf>,
+    required: true,
+  },
+  // 是否允许刷新数据
+  allowRefresh: {
+    type: Boolean,
+    default: true,
+  },
+  // 所有下载器
+  downloaders: {
+    type: Array as PropType<DownloaderConf[]>,
+    required: true,
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'done', 'change'])
+
+// 提示框
+const $toast = useToast()
+
+// timeout定时器
+let timeoutTimer: NodeJS.Timeout | undefined = undefined
+
+// 上传速率
+const upload_rate = ref(0)
+
+// 下载速度
+const download_rate = ref(0)
+
+// 下载器详情弹窗
+const downloaderInfoDialog = ref(false)
+
+// 下载器详情
+const downloaderInfo = ref<DownloaderConf>({
+  name: '',
+  type: '',
+  default: false,
+  enabled: false,
+  config: {},
+})
+
+// 调用API查询下载器数据
+async function loadDownloaderInfo() {
+  if (!props.allowRefresh) {
+    return
+  }
+  try {
+    const res: DownloaderInfo = await api.get('dashboard/downloader', {
+      params: {
+        name: props.downloader.name,
+      },
+    })
+
+    if (res) {
+      upload_rate.value = res.upload_speed
+      download_rate.value = res.download_speed
+      // 定时查询
+      clearTimeout(timeoutTimer)
+      if (props.downloader.enabled) {
+        timeoutTimer = setTimeout(loadDownloaderInfo, 3000)
+      }
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+// 打开详情弹窗
+function openDownloaderInfoDialog() {
+  // 深复制
+  downloaderInfo.value = cloneDeep(props.downloader)
+  downloaderInfoDialog.value = true
+}
+
+// 保存详情数据
+function saveDownloaderInfo() {
+  // 为空不保存，跳出警告框
+  if (!downloaderInfo.value.name) {
+    $toast.error('名称不能为空，请输入后再确定')
+    return
+  }
+  // 重名判断
+  if (props.downloaders.some(item => item.name === downloaderInfo.value.name && item !== props.downloader)) {
+    $toast.error(`【${downloaderInfo.value.name}】已存在，请替换为其他名称`)
+    return
+  }
+  // 默认下载器去重
+  if (downloaderInfo.value.default) {
+    props.downloaders.forEach(item => {
+      if (item.default && item !== props.downloader) {
+        item.default = false
+        $toast.info(`【${item.name}】存在默认下载器，已替换成【${downloaderInfo.value.name}】`)
+      }
+    })
+  }
+  // 执行保存
+  downloaderInfoDialog.value = false
+  emit('change', downloaderInfo.value, props.downloader.name)
+  emit('done')
+}
+
+// 根据存储类型选择图标
+const getIcon = computed(() => {
+  switch (props.downloader.type) {
+    case 'qbittorrent':
+      return qbittorrent_image
+    case 'transmission':
+      return transmission_image
+    default:
+      return qbittorrent_image
+  }
+})
+
+// 按钮点击
+function onClose() {
+  emit('close')
+}
+
+onMounted(async () => {
+  if (props.downloader.enabled) {
+    await loadDownloaderInfo()
+  }
+})
+
+onUnmounted(() => {
+  if (timeoutTimer) clearTimeout(timeoutTimer)
+})
+</script>
+<template>
+  <div>
+    <VCard variant="tonal" @click="openDownloaderInfoDialog">
+      <DialogCloseBtn @click="onClose" />
+      <span class="absolute top-3 right-12">
+        <IconBtn>
+          <VIcon class="cursor-move" icon="mdi-drag" />
+        </IconBtn>
+      </span>
+      <VCardText class="flex justify-space-between align-center gap-4">
+        <div class="align-self-start flex-1">
+          <div class="flex items-center">
+            <VBadge
+              v-if="props.downloader.default && props.downloader.enabled"
+              dot
+              inline
+              color="success"
+              class="me-1"
+            />
+            <span class="text-h6">{{ downloader.name }}</span>
+          </div>
+          <div class="mt-1 flex flex-wrap text-sm" v-if="props.downloader.enabled">
+            <span class="me-2">{{ `↑ ${formatFileSize(upload_rate, 1)}/s ` }}</span>
+            <span>{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
+          </div>
+        </div>
+        <div class="h-20">
+          <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
+        </div>
+      </VCardText>
+    </VCard>
+    <VDialog v-model="downloaderInfoDialog" scrollable max-width="40rem" persistent>
+      <VCard :title="`${props.downloader.name} - 配置`" class="rounded-t">
+        <DialogCloseBtn v-model="downloaderInfoDialog" />
+        <VDivider />
+        <VCardText>
+          <VForm>
+            <VRow>
+              <VCol cols="12" md="6">
+                <VSwitch v-model="downloaderInfo.enabled" label="启用下载器" />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSwitch v-model="downloaderInfo.default" label="默认下载器" :disabled="!downloaderInfo.enabled" />
+              </VCol>
+            </VRow>
+            <VRow v-if="downloaderInfo.type == 'qbittorrent'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.name"
+                  label="名称"
+                  placeholder="必填；不可与其他名称重名"
+                  hint="下载器的别名"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.host"
+                  label="地址"
+                  placeholder="http(s)://ip:port"
+                  hint="服务端地址，格式：http(s)://ip:port"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.username"
+                  label="用户名"
+                  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,93 +1,50 @@
 <script lang="ts" setup>
+import { innerFilterRules } from '@/api/constants'
+import { CustomRule } from '@/api/types'
+import { cloneDeep } from 'lodash'
+
 // 输入参数
 const props = defineProps({
   pri: String,
-  maxpri: String,
   rules: Array as PropType<string[]>,
-  width: String,
-  height: String,
+  custom_rules: Array as PropType<CustomRule[]>,
 })
 
 // 定义触发的自定义事件
-const emit = defineEmits(['close', 'changed', 'levelup', 'leveldown'])
+const emit = defineEmits(['close', 'changed'])
 
 // 按钮点击
 function onClose() {
   emit('close')
 }
 
-// 上升优先级
-function onLevelUp() {
-  emit('levelup', props.pri)
-}
-
-// 下降优先级
-function onLevelDown() {
-  emit('leveldown', props.pri)
-}
-
 // 选项变化
 function filtersChanged(value: string[]) {
   emit('changed', props.pri, value)
 }
 
 // 过滤规则下拉框
-const selectFilterOptions = ref<{ [key: string]: string }[]>([
-  { title: '特效字幕', value: ' SPECSUB ' },
-  { title: '中文字幕', value: ' CNSUB ' },
-  { title: '国语配音', value: ' CNVOI ' },
-  { title: '官种', value: ' 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">
-    <span class="absolute top-3 right-14">
-      <IconBtn
-        v-if="props.pri !== '1'"
-        @click.stop="onLevelUp"
-      >
-        <VIcon icon="mdi-arrow-up" />
-      </IconBtn>
-      <IconBtn
-        v-if="props.pri !== props.maxpri"
-        @click.stop="onLevelDown"
-      >
-        <VIcon icon="mdi-arrow-down" />
+  <VCard variant="tonal">
+    <span class="absolute top-3 right-12">
+      <IconBtn>
+        <VIcon class="cursor-move" icon="mdi-drag" />
       </IconBtn>
     </span>
     <DialogCloseBtn @click="onClose" />
@@ -96,13 +53,13 @@ const selectFilterOptions = ref<{ [key: string]: string }[]>([
       <VRow>
         <VCol>
           <VSelect
-            :key="props.pri"
             v-model="props.rules"
             variant="underlined"
             :items="selectFilterOptions"
             chips
             label=""
             multiple
+            clearable
             @update:modelValue="filtersChanged"
           />
         </VCol>

src/components/cards/FilterRuleGroupCard.vue

@@ -0,0 +1,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'
+
+// 输入参数
+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-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

@@ -35,36 +35,28 @@ function imageErrorHandler() {
 
 // 默认图片
 function getDefaultImage() {
-  if (props.media?.server === 'plex')
-    return plex
-  else if (props.media?.server === 'emby')
-    return emby
-  else if (props.media?.server === 'jellyfin')
-    return jellyfin
-  else
-    return plex
+  if (props.media?.server === 'plex') return plex
+  else if (props.media?.server === 'emby') return emby
+  else if (props.media?.server === 'jellyfin') return jellyfin
+  else return plex
 }
 
 // 跳转播放
 function goPlay() {
-  if (props.media?.link)
-    window.open(props.media?.link, '_blank')
+  if (props.media?.link) window.open(props.media?.link, '_blank')
 }
 
 // 生成图片代理路径
 function getImgUrl(url: string) {
-  if (!url)
-    return getDefaultImage()
-  else
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(url)}`
+  if (!url) return getDefaultImage()
+  else return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(url)}`
 }
 
 // 根据多张图片生成媒体库封面
 async function drawImages(imageList: string[]) {
   // 图片
   const IMAGES = imageList
-  if (IMAGES.length === 0)
-    return getDefaultImage()
+  if (IMAGES.length === 0) return getDefaultImage()
 
   // 为所有图片添加system/img前缀
   for (let i = 0; i < IMAGES.length; i++)
@@ -72,8 +64,7 @@ async function drawImages(imageList: string[]) {
 
   // canvas
   const canvas = canvasRef.value
-  if (!canvas)
-    return getDefaultImage()
+  if (!canvas) return getDefaultImage()
 
   // 画布参数
   const POSTER_WIDTH = (canvas.width - 32) / 4
@@ -85,8 +76,7 @@ async function drawImages(imageList: string[]) {
 
   // 获取画布上下文
   const ctx = canvas.getContext('2d')
-  if (!ctx)
-    return getDefaultImage()
+  if (!ctx) return getDefaultImage()
 
   // 设置背景色为黑色
   ctx.fillStyle = '#000000'
@@ -94,16 +84,14 @@ async function drawImages(imageList: string[]) {
 
   // 绘制图片
   async function drawImageWithReflection(imgSrc: string, index: number) {
-    if (!canvas)
-      return
+    if (!canvas) return
 
-    if (!ctx)
-      return
+    if (!ctx) return
 
     const img = new Image()
     img.setAttribute('crossorigin', 'anonymous')
     img.src = imgSrc
-    await new Promise(resolve => img.onload = resolve)
+    await new Promise(resolve => (img.onload = resolve))
 
     const x = MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1)
     const y = MARGIN_HEIGHT
@@ -125,12 +113,7 @@ async function drawImages(imageList: string[]) {
       REFLECTION_HEIGHT,
     )
 
-    const gradient = ctx.createLinearGradient(
-      0,
-      REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT,
-      0,
-      REFLECTION_HEIGHT,
-    )
+    const gradient = ctx.createLinearGradient(0, REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT, 0, REFLECTION_HEIGHT)
 
     gradient.addColorStop(0, 'rgba(0, 0, 0, 1)')
     gradient.addColorStop(1, 'rgba(0, 0, 0, 0.3)')
@@ -142,8 +125,7 @@ async function drawImages(imageList: string[]) {
 
   // 绘制多张图片
   const loopCount = Math.min(4, IMAGES.length)
-  for (let i = 0; i < loopCount; i++)
-    await drawImageWithReflection(IMAGES[i], i + 1)
+  for (let i = 0; i < loopCount; i++) await drawImageWithReflection(IMAGES[i], i + 1)
 
   // 转换为图片地址
   return canvas.toDataURL('image/png')
@@ -152,17 +134,12 @@ async function drawImages(imageList: string[]) {
 onMounted(async () => {
   if (props.media?.image_list && props.media?.image_list.length > 0)
     imgUrl.value = await drawImages(props.media?.image_list || [])
-  else
-    imgUrl.value = getImgUrl(props.media?.image || '')
+  else imgUrl.value = getImgUrl(props.media?.image || '')
 })
 </script>
 
 <template>
-  <VHover
-    v-bind="props"
-    :height="props.height"
-    :width="props.width"
-  >
+  <VHover v-bind="props" :height="props.height" :width="props.width">
     <template #default="hover">
       <VCard
         v-bind="hover.props"
@@ -175,13 +152,7 @@ onMounted(async () => {
       >
         <template #image>
           <canvas ref="canvasRef" class="w-full h-full hidden" />
-          <VImg
-            :src="imgUrl"
-            aspect-ratio="2/3"
-            cover
-            @load="imageLoadHandler"
-            @error="imageErrorHandler"
-          >
+          <VImg :src="imgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler" @error="imageErrorHandler">
             <template #placeholder>
               <div class="w-full h-full">
                 <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
@@ -190,7 +161,7 @@ onMounted(async () => {
             <VCardText
               class="w-full flex flex-col flex-wrap justify-end align-center text-white absolute bottom-0 cursor-pointer pa-2"
             >
-              <h1 class="mb-1 text-white font-bold line-clamp-2 overflow-hidden text-ellipsis ...">
+              <h1 class="mb-1 text-white text-shadow font-bold line-clamp-2 overflow-hidden text-ellipsis ...">
                 {{ props.media?.name }}
               </h1>
             </VCardText>

src/components/cards/MediaCard.vue

@@ -6,8 +6,11 @@ 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 router, { registerAbortController } from '@/router'
 import noImage from '@images/no-image.jpeg'
+import tmdbImage from '@images/logos/tmdb.png'
+import doubanImage from '@images/logos/douban-black.png'
+import bangumiImage from '@images/logos/bangumi.png'
 
 // 输入参数
 const props = defineProps({
@@ -16,6 +19,11 @@ const props = defineProps({
   height: String,
 })
 
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
+const store = useStore()
+
 // 提示框
 const $toast = useToast()
 
@@ -51,32 +59,44 @@ const seasonInfos = ref<TmdbSeason[]>([])
 
 // 选中的订阅季
 const seasonsSelected = ref<TmdbSeason[]>([])
+let abortController: AbortController | null = null;
+
+abortController = new AbortController();
+registerAbortController(abortController);
+const { signal } = abortController;
+// 来源角标字典
+const sourceIconDict: { [key: string]: any } = {
+  themoviedb: tmdbImage,
+  douban: doubanImage,
+  bangumi: bangumiImage,
+}
+
+// 绑定MediaCard元素
+const mediaCardRef = ref<HTMLElement | null>(null)
+
+// 创建Intersection Observer实例
+const observer = ref<IntersectionObserver | null>(null)
 
 // 获得mediaid
 function getMediaId() {
-  return props.media?.tmdb_id
-    ? `tmdb:${props.media?.tmdb_id}`
-    : props.media?.douban_id
-      ? `douban:${props.media?.douban_id}`
-      : `bangumi:${props.media?.bangumi_id}`
+  if (props.media?.tmdb_id) return `tmdb:${props.media?.tmdb_id}`
+  else if (props.media?.douban_id) return `douban:${props.media?.douban_id}`
+  else return `bangumi:${props.media?.bangumi_id}`
 }
 
 // 订阅弹窗选择的多季
 function subscribeSeasons() {
   subscribeSeasonDialog.value = false
-  seasonsSelected.value.forEach((season) => {
+  seasonsSelected.value.forEach(season => {
     addSubscribe(season.season_number)
   })
 }
 
 // 角标颜色
 function getChipColor(type: string) {
-  if (type === '电影')
-    return 'border-blue-500 bg-blue-600'
-  else if (type === '电视剧')
-    return ' bg-indigo-500 border-indigo-600'
-  else
-    return 'border-purple-600 bg-purple-600'
+  if (type === '电影') return 'border-blue-500 bg-blue-600'
+  else if (type === '电视剧') return ' bg-indigo-500 border-indigo-600'
+  else return 'border-purple-600 bg-purple-600'
 }
 
 // 添加订阅处理
@@ -90,29 +110,24 @@ async function handleAddSubscribe() {
       $toast.error(`${props.media?.title} 查询剧集信息失败！`)
       return
     }
-
     // 检查各季的缺失状态
     await checkSeasonsNotExists()
-    if (!tmdbFlag.value)
-      return
+    if (!tmdbFlag.value) return
 
     if (seasonInfos.value.length === 1) {
       // 添加订阅
       addSubscribe(1)
-    }
-    else {
+    } else {
       // 弹出季选择列表，支持多选
       seasonsSelected.value = []
       subscribeSeasonDialog.value = true
     }
-  }
-  else if (props.media?.type === '电视剧') {
+  } else if (props.media?.type === '电视剧') {
     // 豆瓣电视剧，只会有一季
     const season = props.media?.season ?? 1
     // 添加订阅
     addSubscribe(season)
-  }
-  else {
+  } else {
     // 电影
     addSubscribe()
   }
@@ -147,13 +162,7 @@ async function addSubscribe(season = 0) {
     }
 
     // 提示
-    showSubscribeAddToast(
-      result.success,
-      props.media?.title ?? '',
-      season,
-      result.message,
-      best_version,
-    )
+    showSubscribeAddToast(result.success, props.media?.title ?? '', season, result.message, best_version)
 
     // 弹出订阅编辑弹窗
     if (result.success && seasonsSelected.value.length <= 1) {
@@ -163,8 +172,7 @@ async function addSubscribe(season = 0) {
         subscribeEditDialog.value = true
       }
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   } finally {
     doneNProgress()
@@ -172,22 +180,14 @@ async function addSubscribe(season = 0) {
 }
 
 // 弹出添加订阅提示
-function showSubscribeAddToast(result: boolean,
-  title: string,
-  season: number,
-  message: string,
-  best_version: number) {
-  if (season)
-    title = `${title} ${formatSeason(season.toString())}`
+function showSubscribeAddToast(result: boolean, title: string, season: number, message: string, best_version: number) {
+  if (season) title = `${title} ${formatSeason(season.toString())}`
 
   let subname = '订阅'
-  if (best_version > 0)
-    subname = '洗版订阅'
+  if (best_version > 0) subname = '洗版订阅'
 
-  if (result && seasonsSelected.value.length > 1)
-    $toast.success(`${title} 添加${subname}成功！`)
-  else if (!result)
-    $toast.error(`${title} 添加${subname}失败：${message}！`)
+  if (result) $toast.success(`${title} 添加${subname}成功！`)
+  else if (!result) $toast.error(`${title} 添加${subname}失败：${message}！`)
 }
 
 // 调用API取消订阅
@@ -197,37 +197,32 @@ async function removeSubscribe() {
   try {
     const mediaid = getMediaId()
 
-    const result: { [key: string]: any } = await api.delete(
-      `subscribe/media/${mediaid}`,
-      {
-        params: {
-          season: props.media?.season,
-        },
+    const result: { [key: string]: any } = await api.delete(`subscribe/media/${mediaid}`, {
+      params: {
+        season: props.media?.season,
       },
-    )
+    })
 
     if (result.success) {
       isSubscribed.value = false
       $toast.success(`${props.media?.title} 已取消订阅！`)
-    }
-    else {
+    } else {
       $toast.error(`${props.media?.title} 取消订阅失败：${result.message}！`)
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
+  } finally {
+    doneNProgress()
   }
-  doneNProgress()
 }
 
 // 查询当前媒体是否已订阅
 async function handleCheckSubscribe() {
   try {
+
     const result = await checkSubscribe(props.media?.season)
-    if (result)
-      isSubscribed.value = true
-  }
-  catch (error) {
+    if (result) isSubscribed.value = true
+  } catch (error) {
     console.error(error)
   }
 }
@@ -235,6 +230,7 @@ async function handleCheckSubscribe() {
 // 查询当前媒体是否已入库
 async function handleCheckExists() {
   try {
+
     const result: { [key: string]: any } = await api.get('mediaserver/exists', {
       params: {
         tmdbid: props.media?.tmdb_id,
@@ -243,12 +239,11 @@ async function handleCheckExists() {
         season: props.media?.season,
         mtype: props.media?.type,
       },
+      signal
     })
 
-    if (result.success)
-      isExists.value = true
-  }
-  catch (error) {
+    if (result.success) isExists.value = true
+  } catch (error) {
     console.error(error)
   }
 }
@@ -256,6 +251,7 @@ async function handleCheckExists() {
 // 调用API检查是否已订阅，电视剧需要指定季
 async function checkSubscribe(season = 0) {
   try {
+
     const mediaid = getMediaId()
 
     const result: Subscribe = await api.get(`subscribe/media/${mediaid}`, {
@@ -263,70 +259,64 @@ async function checkSubscribe(season = 0) {
         season,
         title: props.media?.title,
       },
+      signal
     })
 
     return result.id || null
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 
   return null
 }
 
-// 检查所有季的缺失状态
+// 检查所有季的缺失状态（数据库）
 async function checkSeasonsNotExists() {
   // 开始处理
   startNProgress()
   try {
     const result: NotExistMediaInfo[] = await api.post('mediaserver/notexists', props.media)
     if (result) {
-      result.forEach((item) => {
+      result.forEach(item => {
         // 0-已入库 1-部分缺失 2-全部缺失
         let state = 0
-        if (item.episodes.length === 0)
-          state = 2
-        else if (item.episodes.length < item.total_episode)
-          state = 1
+        if (item.episodes.length === 0) state = 2
+        else if (item.episodes.length < item.total_episode) state = 1
 
         seasonsNotExisted.value[item.season] = state
       })
     }
-  }
-  catch (error) {
+  } catch (error) {
     $toast.error(`${props.media?.title}无法识别TMDB媒体信息！`)
     tmdbFlag.value = false
+  } finally {
+    // 处理完成
+    doneNProgress()
   }
-
-  // 处理完成
-  doneNProgress()
 }
 
 // 查询TMDB的所有季信息
 async function getMediaSeasons() {
   try {
     seasonInfos.value = await api.get(`tmdb/seasons/${props.media?.tmdb_id}`)
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
 
 // 查询订阅弹窗规则
 async function queryDefaultSubscribeConfig() {
+  // 非管理员不显示
+  if (!store.state.auth.superUser) return false
   try {
     let subscribe_config_url = ''
-    if (props.media?.type === '电影')
-      subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
-    else
-      subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
+    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) {
+    if (result.data?.value) return result.data.value.show_edit_dialog
+  } catch (error) {
     console.log(error)
   }
   return false
@@ -334,38 +324,28 @@ async function queryDefaultSubscribeConfig() {
 
 // 爱心订阅按钮响应
 function handleSubscribe() {
-  if (isSubscribed.value)
-    removeSubscribe()
-  else
-    handleAddSubscribe()
+  if (isSubscribed.value) removeSubscribe()
+  else handleAddSubscribe()
 }
 
 // 计算存在状态的颜色
 function getExistColor(season: number) {
   const state = seasonsNotExisted.value[season]
-  if (!state)
-    return 'success'
+  if (!state) return 'success'
 
-  if (state === 1)
-    return 'warning'
-  else if (state === 2)
-    return 'error'
-  else
-    return 'success'
+  if (state === 1) return 'warning'
+  else if (state === 2) return 'error'
+  else return 'success'
 }
 
 // 计算存在状态的文本
 function getExistText(season: number) {
   const state = seasonsNotExisted.value[season]
-  if (!state)
-    return '已入库'
+  if (!state) return '已入库'
 
-  if (state === 1)
-    return '部分缺失'
-  else if (state === 2)
-    return '缺失'
-  else
-    return '已入库'
+  if (state === 1) return '部分缺失'
+  else if (state === 2) return '缺失'
+  else return '已入库'
 }
 
 // 打开详情页
@@ -394,157 +374,150 @@ function handleSearch() {
   })
 }
 
-// 装载时检查是否已订阅
-onBeforeMount(() => {
+// 懒加载检查
+function handleCheckLazy() {
   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
+  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}`
+  if (!posterPath) return ''
+  return `https://${globalSettings.TMDB_IMAGE_DOMAIN}/t/p/w500${posterPath}`
 }
 
 // 将yyyy-mm-dd转换为yyyy年mm月dd日
 function formatAirDate(airDate: string) {
-  if (!airDate)
-    return ''
-  const date = new Date(airDate)
+  if (!airDate) return ''
+  const date = new Date(airDate.replaceAll(/-/g, '/'))
   return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
 }
+
 // 从yyyy-mm-dd中提取年份
 function getYear(airDate: string) {
-  if (!airDate)
-    return ''
-  const date = new Date(airDate)
+  if (!airDate) return ''
+  const date = new Date(airDate.replaceAll(/-/g, '/'))
   return date.getFullYear()
 }
+
+// 移除订阅
+function onRemoveSubscribe() {
+  subscribeEditDialog.value = false
+}
 </script>
 
 <template>
   <VHover>
     <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"
-        >
-          <template #placeholder>
-            <div class="w-full h-full">
-              <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+      <div ref="mediaCardRef">
+        <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 ?? false)">
+          <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"
+            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 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>
-          </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" />
-        <!-- 评分角标 -->
-        <VChip
-          v-if="isImageLoaded && props.media?.vote_average && !isExists"
-          variant="elevated"
-          size="small"
-          :class="getChipColor('rating')"
-          class="absolute right-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
-        >
-          {{ props.media?.vote_average }}
-        </VChip>
-        <!-- 详情 -->
-        <VCardText
-          v-show="hover.isHovering || imageLoadError"
-          class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
-        >
-          <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>
-      </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">
+            {{ 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">
+            <VImg cover :src="sourceIconDict[props.media?.source]" class="shadow-lg" />
+          </VAvatar>
+        </VCard>
+      </div>
     </template>
   </VHover>
   <!-- 订阅季弹窗 -->
-  <VBottomSheet
-    v-if="subscribeSeasonDialog"
-    v-model="subscribeSeasonDialog"
-    inset
-    scrollable
-  >
+  <VBottomSheet v-if="subscribeSeasonDialog" v-model="subscribeSeasonDialog" inset scrollable>
     <VCard class="rounded-t">
       <DialogCloseBtn @click="subscribeSeasonDialog = false" />
-      <VCardTitle class="pe-10">
-        订阅 - {{ props.media?.title }}
-      </VCardTitle>
+      <VCardItem>
+        <VCardTitle class="pe-10"> 订阅 - {{ props.media?.title }} </VCardTitle>
+      </VCardItem>
+      <VDivider />
       <VCardText>
-        <VList
-          v-model:selected="seasonsSelected"
-          lines="three"
-          select-strategy="classic"
-        >
-          <VListItem
-            v-for="(item, i) in seasonInfos" :key="i"
-            :value="item"
-          >
+        <VList v-model:selected="seasonsSelected" lines="three" select-strategy="classic">
+          <VListItem v-for="(item, i) in seasonInfos" :key="i" :value="item">
             <template #prepend>
-              <VImg
-                height="90"
-                width="60"
-                :src="getSeasonPoster(item.poster_path || '')"
-                aspect-ratio="2/3"
-                class="object-cover rounded shadow ring-gray-500 me-3"
-                cover
-              >
+              <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" />
@@ -552,16 +525,9 @@ function getYear(airDate: string) {
                 </template>
               </VImg>
             </template>
-            <VListItemTitle>
-              第 {{ item.season_number }} 季
-            </VListItemTitle>
+            <VListItemTitle> 第 {{ item.season_number }} 季 </VListItemTitle>
             <VListItemSubtitle class="mt-1 me-2">
-              <VChip
-                v-if="item.vote_average"
-                color="primary"
-                size="small"
-                class="mb-1"
-              >
+              <VChip v-if="item.vote_average" color="primary" size="small" class="mb-1">
                 <VIcon icon="mdi-star" /> {{ item.vote_average }}
               </VChip>
               {{ getYear(item.air_date || '') }} • {{ item.episode_count }} 集
@@ -570,12 +536,7 @@ function getYear(airDate: string) {
               《{{ media?.title }}》第 {{ item.season_number }} 季于 {{ formatAirDate(item.air_date || '') }} 首播。
             </VListItemSubtitle>
             <VListItemSubtitle>
-              <VChip
-                v-if="seasonsNotExisted"
-                class="mt-2"
-                size="small"
-                :color="getExistColor(item.season_number || 0)"
-              >
+              <VChip v-if="seasonsNotExisted" class="mt-2" size="small" :color="getExistColor(item.season_number || 0)">
                 {{ getExistText(item.season_number || 0) }}
               </VChip>
             </VListItemSubtitle>
@@ -588,29 +549,13 @@ function getYear(airDate: string) {
         </VList>
       </VCardText>
       <div class="my-2 text-center">
-        <VBtn
-          :disabled="seasonsSelected.length === 0"
-          width="30%"
-          @click="subscribeSeasons"
-        >
+        <VBtn :disabled="seasonsSelected.length === 0" width="30%" @click="subscribeSeasons">
           {{ seasonsSelected.length === 0 ? '请选择订阅季' : '提交订阅' }}
         </VBtn>
       </div>
     </VCard>
   </VBottomSheet>
   <!-- 订阅编辑弹窗 -->
-  <SubscribeEditDialog
-    v-if="subscribeEditDialog"
-    v-model="subscribeEditDialog"
-    :subid="subscribeId"
-    @close="subscribeEditDialog = false"
-    @save="subscribeEditDialog = false"
-    @remove="() => { subscribeEditDialog = false; handleCheckSubscribe(); }"
-  />
+  <SubscribeEditDialog v-if="subscribeEditDialog" v-model="subscribeEditDialog" :subid="subscribeId"
+    @close="subscribeEditDialog = false" @save="subscribeEditDialog = false" @remove="onRemoveSubscribe" />
 </template>
-
-<style lang="scss">
-.on-hover img {
-  @apply brightness-50;
-}
-</style>

src/components/cards/MediaInfoCard.vue

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

src/components/cards/MediaServerCard.vue

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

src/components/cards/MessageCard.vue

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

src/components/cards/PersonCard.vue

@@ -1,14 +1,17 @@
 <script lang="ts" setup>
 import personIcon from '@images/misc/person-icon.png'
-import type { TmdbPerson } from '@/api/types'
+import type { Person } from '@/api/types'
 import router from '@/router'
 
 const personProps = defineProps({
-  person: Object as PropType<TmdbPerson>,
+  person: Object as PropType<Person>,
   width: String,
   height: String,
 })
 
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
 // 当前人物
 const personInfo = ref(personProps.person)
 
@@ -17,19 +20,51 @@ const isImageLoaded = ref(false)
 
 // 人物图片地址
 function getPersonImage() {
-  if (!personInfo.value?.profile_path)
+  let url = ''
+  if (personProps.person?.source === 'themoviedb') {
+    if (!personInfo.value?.profile_path) return personIcon
+    url = `https://${globalSettings.TMDB_IMAGE_DOMAIN}/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
+  } else if (personProps.person?.source === 'douban') {
+    if (!personInfo.value?.avatar) return personIcon
+    if (typeof personInfo.value?.avatar === 'object') {
+      url = personInfo.value?.avatar?.normal
+    } else {
+      url = personInfo.value?.avatar
+    }
+  } else if (personProps.person?.source === 'bangumi') {
+    if (!personInfo.value?.images) return personIcon
+    url = personInfo.value?.images?.medium
+  } else {
     return personIcon
-  return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
+  }
+  if (globalSettings.GLOBAL_IMAGE_CACHE && url)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+  return url
+}
+
+// 人物姓名
+function getPersonName() {
+  return personInfo.value?.name
+}
+
+// 人物角色
+function getPersonCharacter() {
+  if (personProps.person?.source === 'bangumi') {
+    if (!personInfo.value?.career) return ''
+    return personInfo.value?.career.join('、')
+  } else {
+    return personInfo.value?.character
+  }
 }
 
 // 人物详情
 function goPersonDetail() {
-  if (!personInfo.value?.id)
-    return
+  if (!personInfo.value?.id) return
   router.push({
     path: '/person',
     query: {
       personid: personInfo.value?.id,
+      source: personInfo.value?.source,
     },
   })
 }
@@ -49,9 +84,9 @@ function goPersonDetail() {
         @click.stop="goPersonDetail"
       >
         <div
-          class="person-card relative transform-gpu cursor-pointer rounded shadow ring-1 transition duration-150 ease-in-out scale-100 ring-gray-700"
+          class="person-card relative transform-gpu cursor-pointer rounded shadow transition duration-150 ease-in-out scale-100 ring-gray-700"
         >
-          <div style="padding-bottom: 150%;">
+          <div style="padding-block-end: 150%">
             <div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
               <div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
                 <VAvatar
@@ -60,18 +95,17 @@ function goPersonDetail() {
                     'ring-1 ring-gray-700': isImageLoaded,
                   }"
                 >
-                  <VImg
-                    :src="getPersonImage()"
-                    cover
-                    @load="isImageLoaded = true"
-                  />
+                  <VImg :src="getPersonImage()" cover @load="isImageLoaded = true" />
                 </VAvatar>
               </div>
               <div class="w-full truncate text-center font-bold">
-                {{ personInfo?.name }}
+                {{ getPersonName() }}
               </div>
-              <div class="overflow-hidden whitespace-normal text-center text-sm" style=" display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp: 2;">
-                {{ personInfo?.character }}
+              <div
+                class="overflow-hidden whitespace-normal text-center text-sm"
+                style="display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2"
+              >
+                {{ getPersonCharacter() }}
               </div>
               <div class="absolute bottom-0 left-0 right-0 h-12 rounded-b" />
             </div>

src/components/cards/PluginAppCard.vue

@@ -6,6 +6,7 @@ import type { Plugin } from '@/api/types'
 import noImage from '@images/logos/plugin.png'
 import { getDominantColor } from '@/@core/utils/image'
 import { isNullOrEmptyObject } from '@/@core/utils'
+import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
 
 // 输入参数
 const props = defineProps({
@@ -42,6 +43,9 @@ const imageLoadError = ref(false)
 // 更新日志弹窗
 const releaseDialog = ref(false)
 
+// 插件详情弹窗
+const detailDialog = ref(false)
+
 // 图片加载完成
 async function imageLoaded() {
   isImageLoaded.value = true
@@ -57,38 +61,32 @@ async function installPlugin() {
     progressDialog.value = true
     progressText.value = `正在安装 ${props.plugin?.plugin_name} v${props?.plugin?.plugin_version} ...`
 
-    const result: { [key: string]: any } = await api.get(
-      `plugin/install/${props.plugin?.id}`,
-      {
-        params: {
-          repo_url: props.plugin?.repo_url,
-          force: props.plugin?.has_update,
-        },
+    const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
+      params: {
+        repo_url: props.plugin?.repo_url,
+        force: props.plugin?.has_update,
       },
-    )
+    })
 
     // 隐藏等待提示框
     progressDialog.value = false
 
     if (result.success) {
       $toast.success(`插件 ${props.plugin?.plugin_name} 安装成功！`)
-
+      detailDialog.value = false
       // 通知父组件刷新
       emit('install')
-    }
-    else {
+    } else {
       $toast.error(`插件 ${props.plugin?.plugin_name} 安装失败：${result.message}`)
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
 
 // 计算图标路径
 const iconPath: Ref<string> = computed(() => {
-  if (imageLoadError.value)
-    return noImage
+  if (imageLoadError.value) return noImage
   // 如果是网络图片则使用代理后返回
   if (props.plugin?.plugin_icon?.startsWith('http'))
     return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}`
@@ -102,22 +100,18 @@ function visitPluginPage() {
   let repoUrl = props.plugin?.repo_url
   if (repoUrl) {
     if (repoUrl.includes('raw.githubusercontent.com')) {
-      if (!repoUrl.endsWith('/'))
-        repoUrl += '/'
+      if (!repoUrl.endsWith('/')) repoUrl += '/'
 
-      if (repoUrl.split('/').length < 6)
-        repoUrl = `${repoUrl}main/`
+      if (repoUrl.split('/').length < 6) repoUrl = `${repoUrl}main/`
 
       try {
         const [user, repo] = repoUrl.split('/').slice(-4, -2)
         repoUrl = `https://github.com/${user}/${repo}`
-      }
-      catch (error) {
+      } catch (error) {
         return
       }
     }
-  }
-  else {
+  } else {
     repoUrl = props.plugin?.author_url
   }
   window.open(repoUrl, '_blank')
@@ -138,7 +132,8 @@ const dropdownItems = ref([
       prependIcon: 'mdi-github',
       click: visitPluginPage,
     },
-  }, {
+  },
+  {
     title: '更新说明',
     value: 2,
     show: !isNullOrEmptyObject(props.plugin?.history || {}),
@@ -151,119 +146,141 @@ const dropdownItems = ref([
 </script>
 
 <template>
-  <VCard
-    :width="props.width"
-    :height="props.height"
-    @click="installPlugin"
-  >
-    <div
-      class="relative pa-4 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"
-              >
-                <template #prepend>
-                  <VIcon :icon="item.props.prependIcon" />
-                </template>
-                <VListItemTitle v-text="item.title" />
-              </VListItem>
-            </VList>
-          </VMenu>
-        </IconBtn>
-      </div>
-      <VAvatar
-        size="8rem"
+  <div>
+    <VCard :width="props.width" :height="props.height" @click="detailDialog = true" class="flex flex-col h-full">
+      <div
+        class="relative flex flex-row items-start pa-3 justify-between grow"
+        :style="{ background: `${backgroundColor}` }"
       >
-        <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">
-      {{ props.plugin?.plugin_desc }}
-    </VCardText>
-    <VCardText class="flex items-center justify-start pb-2">
-      <span>
-        <VIcon icon="mdi-account" class="me-1" />
-        <a
-          :href="props.plugin?.author_url"
-          target="_blank"
-          @click.stop
-        >
-          {{ props.plugin?.plugin_author }}
-        </a>
-      </span>
-      <span v-if="props.count" class="ms-3">
-        <VIcon icon="mdi-download" />
-        <span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
-      </span>
-    </VCardText>
-  </VCard>
-  <!-- 安装插件进度框 -->
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
+        <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 ...">
+            {{ 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"
+                  variant="plain"
+                  @click="item.props.click"
+                >
+                  <template #prepend>
+                    <VIcon :icon="item.props.prependIcon" />
+                  </template>
+                  <VListItemTitle v-text="item.title" />
+                </VListItem>
+              </VList>
+            </VMenu>
+          </IconBtn>
+        </div>
       </VCardText>
     </VCard>
-  </VDialog>
-  <!-- 更新日志 -->
-  <VDialog
-    v-if="releaseDialog"
-    v-model="releaseDialog"
-    width="600"
-    scrollable
-  >
-    <VCard>
-      <DialogCloseBtn @click="releaseDialog = false" />
-      <VCardTitle>{{ props.plugin?.plugin_name }} 更新说明</VCardTitle>
-      <VersionHistory :history="props.plugin?.history" />
-    </VCard>
-  </VDialog>
+    <!-- 安装插件进度框 -->
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
+    <!-- 更新日志 -->
+    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
+      <VCard :title="`${props.plugin?.plugin_name} 更新说明`">
+        <DialogCloseBtn @click="releaseDialog = false" />
+        <VDivider />
+        <VersionHistory :history="props.plugin?.history" />
+      </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,7 +1,6 @@
 <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'
@@ -10,7 +9,13 @@ import VersionHistory from '@/components/misc/VersionHistory.vue'
 import { isNullOrEmptyObject } from '@core/utils'
 import noImage from '@images/logos/plugin.png'
 import { getDominantColor } from '@/@core/utils/image'
-import store from '@/store'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()
+// APP
+const appMode = inject('pwaMode') && display.mdAndDown.value
 
 // 输入参数
 const props = defineProps({
@@ -45,6 +50,9 @@ const pluginConfigDialog = ref(false)
 // 插件配置表单数据
 const pluginConfigForm = ref({})
 
+// 菜单显示状态
+const menuVisible = ref(false)
+
 // 进度框
 const progressDialog = ref(false)
 
@@ -57,8 +65,11 @@ const pluginInfoDialog = ref(false)
 // 进度框文本
 const progressText = ref('正在更新插件...')
 
+// 用户头像是否加载完成
+const isAvatarLoaded = ref(false)
+
 // 插件数据页面配置项
-let pluginPageItems = reactive([])
+let pluginPageItems = ref([])
 
 // 图片是否加载完成
 const isImageLoaded = ref(false)
@@ -70,12 +81,15 @@ const imageLoadError = ref(false)
 const releaseDialog = ref(false)
 
 // 监听动作标识，如为true则打开详情
-watch(() => props.action, (newAction, oldAction) => {
-  if (newAction && !oldAction) {
-    openPluginDetail()
-    emit('actionDone')
-  }
-})
+watch(
+  () => props.action,
+  (newAction, oldAction) => {
+    if (newAction && !oldAction) {
+      openPluginDetail()
+      emit('actionDone')
+    }
+  },
+)
 
 // 图片加载完成
 async function imageLoaded() {
@@ -90,7 +104,7 @@ function showUpdateHistory() {
   // 检查当前版本是否有更新日志
   if (isNullOrEmptyObject(props.plugin?.history)) {
     updatePlugin()
-  } else{
+  } else {
     releaseDialog.value = true
   }
 }
@@ -100,21 +114,12 @@ async function uninstallPlugin() {
   const isConfirmed = await createConfirm({
     title: '确认',
     content: `是否确认卸载插件 ${props.plugin?.plugin_name} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
   })
 
-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return
 
   try {
-  // 显示等待提示框
+    // 显示等待提示框
     progressDialog.value = true
     progressText.value = `正在卸载 ${props.plugin?.plugin_name} ...`
     const result: { [key: string]: any } = await api.delete(`plugin/${props.plugin?.id}`)
@@ -125,12 +130,10 @@ async function uninstallPlugin() {
 
       // 通知父组件刷新
       emit('remove')
-    }
-    else {
+    } else {
       $toast.error(`插件 ${props.plugin?.plugin_name} 卸载失败：${result.message}}`)
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -141,11 +144,9 @@ async function loadPluginForm() {
     const result: { [key: string]: any } = await api.get(`plugin/form/${props.plugin?.id}`)
     if (result) {
       pluginFormItems = result.conf
-      if (result.model)
-        pluginConfigForm.value = result.model
+      if (result.model) pluginConfigForm.value = result.model
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -154,10 +155,8 @@ async function loadPluginForm() {
 async function loadPluginPage() {
   try {
     const result: [] = await api.get(`plugin/page/${props.plugin?.id}`)
-    if (result)
-      pluginPageItems = result
-  }
-  catch (error) {
+    if (result) pluginPageItems.value = result
+  } catch (error) {
     console.error(error)
   }
 }
@@ -166,10 +165,8 @@ async function loadPluginPage() {
 async function loadPluginConf() {
   try {
     const result: { [key: string]: any } = await api.get(`plugin/${props.plugin?.id}`)
-    if (!isNullOrEmptyObject(result))
-      pluginConfigForm.value = result
-  }
-  catch (error) {
+    if (!isNullOrEmptyObject(result)) pluginConfigForm.value = result
+  } catch (error) {
     console.error(error)
   }
 }
@@ -187,13 +184,11 @@ async function savePluginConf() {
       $toast.success(`插件 ${props.plugin?.plugin_name} 配置已保存`)
       // 通知父组件刷新
       emit('save')
-    }
-    else {
+    } else {
       progressDialog.value = false
       $toast.error(`插件 ${props.plugin?.plugin_name} 配置保存失败：${result.message}}`)
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -219,8 +214,7 @@ async function showPluginConfig() {
 
 // 计算图标路径
 const iconPath: Ref<string> = computed(() => {
-  if (imageLoadError.value)
-    return noImage
+  if (imageLoadError.value) return noImage
   // 如果是网络图片则使用代理后返回
   if (props.plugin?.plugin_icon?.startsWith('http'))
     return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}`
@@ -228,23 +222,22 @@ 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} 的配置数据?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
+    content: `此操作将恢复插件 ${props.plugin?.plugin_name} 的默认设置，并清除所有相关数据，确定要继续吗？`,
   })
 
-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return
 
   try {
     const result: { [key: string]: any } = await api.get(`plugin/reset/${props.plugin?.id}`)
@@ -252,12 +245,10 @@ async function resetPlugin() {
       $toast.success(`插件 ${props.plugin?.plugin_name} 数据已重置`)
       // 通知父组件刷新
       emit('save')
-    }
-    else {
+    } else {
       $toast.error(`插件 ${props.plugin?.plugin_name} 重置失败：${result.message}}`)
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -270,15 +261,12 @@ async function updatePlugin() {
     progressDialog.value = true
     progressText.value = `正在更新 ${props.plugin?.plugin_name} ...`
 
-    const result: { [key: string]: any } = await api.get(
-      `plugin/install/${props.plugin?.id}`,
-      {
-        params: {
-          repo_url: props.plugin?.repo_url,
-          force: true,
-        },
+    const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
+      params: {
+        repo_url: props.plugin?.repo_url,
+        force: true,
       },
-    )
+    })
 
     // 隐藏等待提示框
     progressDialog.value = false
@@ -288,12 +276,10 @@ async function updatePlugin() {
 
       // 通知父组件刷新
       emit('save')
-    }
-    else {
+    } else {
       $toast.error(`插件 ${props.plugin?.plugin_name} 更新失败：${result.message}`)
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -305,17 +291,16 @@ 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`
+  const url = `${
+    import.meta.env.VITE_API_BASE_URL
+  }system/logging?length=-1&logfile=plugins/${props.plugin?.id?.toLowerCase()}.log`
   window.open(url, '_blank')
 }
 
 // 打开插件详情
 function openPluginDetail() {
-  if (props.plugin?.has_page)
-    showPluginInfo()
-  else
-    showPluginConfig()
+  if (props.plugin?.has_page) showPluginInfo()
+  else showPluginConfig()
 }
 
 // 弹出菜单
@@ -391,198 +376,173 @@ const dropdownItems = ref([
 ])
 
 // 监听插件状态变化
-watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
-  const updateItemIndex = dropdownItems.value.findIndex(item => item.value === 3)
-  if (updateItemIndex !== -1)
-    dropdownItems.value[updateItemIndex].show = newHasUpdate
-})
+watch(
+  () => props.plugin?.has_update,
+  (newHasUpdate, _) => {
+    const updateItemIndex = dropdownItems.value.findIndex(item => item.value === 3)
+    if (updateItemIndex !== -1) dropdownItems.value[updateItemIndex].show = newHasUpdate
+  },
+)
+
+// 监听插件窗口状态变化
+watch(
+  () => props.plugin?.page_open,
+  (newOpenState, _) => {
+    if (newOpenState) openPluginDetail()
+  },
+)
 </script>
 
 <template>
-  <!-- 插件卡片 -->
-  <VCard
-    v-if="isVisible"
-    :width="props.width"
-    :height="props.height"
-    @click="openPluginDetail"
-  >
-    <div
-      class="relative pa-4 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
+  <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"
+        >
+          <div
+            class="relative flex flex-row items-start pa-3 justify-between grow"
+            :style="{ background: `${backgroundColor}` }"
           >
-            <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="8rem"
-      >
-        <VImg
-          ref="imageRef"
-          :src="iconPath"
-          aspect-ratio="4/3"
-          cover
-          :class="{ shadow: isImageLoaded }"
-          @load="imageLoaded"
-          @error="imageLoadError = true"
-        />
-      </VAvatar>
-    </div>
-    <span v-if="props.count" class="absolute bottom-1 right-2 flex items-center">
-      <VIcon icon="mdi-fire" />
-      <span class="text-sm ms-1">{{ props.count?.toLocaleString() }}</span>
-    </span>
-    <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>
-      {{ props.plugin?.plugin_desc }}
-    </VCardText>
-  </VCard>
-  <!-- 插件配置页面 -->
-  <VDialog
-    v-model="pluginConfigDialog"
-    scrollable
-    max-width="60rem"
-  >
-    <VCard
-      :title="`${props.plugin?.plugin_name} - 配置`"
-      class="rounded-t"
-    >
-      <DialogCloseBtn v-model='pluginConfigDialog' />
-      <VCardText>
-        <FormRender
-          v-for="(item, index) in pluginFormItems"
-          :key="index"
-          :config="item"
-          :form="pluginConfigForm"
-        />
-      </VCardText>
-      <VCardActions>
-        <VBtn v-if="pluginPageItems.length > 0" @click="showPluginInfo">
-          查看数据
-        </VBtn>
-        <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="savePluginConf"
-        >
-          保存
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
+            <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"
+                      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>
+          </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="pluginInfoDialog"
-    scrollable
-    max-width="80rem"
-  >
-    <VCard
-      :title="`${props.plugin?.plugin_name}`"
-      class="rounded-t"
-    >
-      <DialogCloseBtn v-model='pluginInfoDialog' />
-      <VCardText>
-        <PageRender
-          v-for="(item, index) in pluginPageItems"
-          :key="index"
-          :config="item"
-        />
-      </VCardText>
-      <VCardActions>
-        <VBtn
+    <!-- 插件配置页面 -->
+    <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" :model="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>
+
+    <!-- 插件数据页面 -->
+    <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"
-        >
-          配置
-        </VBtn>
-        <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="pluginInfoDialog = false"
-        >
-          关闭
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
-  <!-- 更新插件进度框 -->
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
+          :class="{ 'mb-10': appMode }"
         />
-      </VCardText>
-    </VCard>
-  </VDialog>
-  <!-- 更新日志 -->
-  <VDialog
-    v-if="releaseDialog"
-    v-model="releaseDialog"
-    width="600"
-    scrollable
-  >
-    <VCard>
-      <DialogCloseBtn @click="releaseDialog = false" />
-      <VCardTitle>{{ props.plugin?.plugin_name }} 更新说明</VCardTitle>
-      <VersionHistory :history="props.plugin?.history" />
-      <VCardText>
-        <VBtn
-          @click="updatePlugin"
-          block
-        >
-          <template #prepend>
-            <VIcon icon="mdi-arrow-up-circle-outline" />
-          </template>
-          更新到最新版本
-        </VBtn>
-      </VCardText>
-    </VCard>
-  </VDialog>
+      </VCard>
+    </VDialog>
+
+    <!-- 进度框 -->
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
+
+    <!-- 更新日志 -->
+    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
+      <VCard :title="`${props.plugin?.plugin_name} 更新说明`">
+        <DialogCloseBtn @click="releaseDialog = false" />
+        <VDivider />
+        <VersionHistory :history="props.plugin?.history" />
+        <VDivider />
+        <VCardText>
+          <VBtn @click="updatePlugin" block>
+            <template #prepend>
+              <VIcon icon="mdi-arrow-up-circle-outline" />
+            </template>
+            更新到最新版本
+          </VBtn>
+        </VCardText>
+      </VCard>
+    </VDialog>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -592,7 +552,20 @@ watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
   background: rgba(29, 39, 59, 48%);
-  content: "";
+  content: '';
   inset: 0;
 }
+
+.author-info {
+  display: flex;
+  align-items: center;
+}
+
+.author-avatar {
+  border-radius: 50%;
+  block-size: 24px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+  object-fit: cover;
+}
 </style>

src/components/cards/PosterCard.vue

@@ -18,26 +18,21 @@ const imageLoadError = ref(false)
 
 // 角标颜色
 function getChipColor(type: string) {
-  if (type === '电影')
-    return 'border-blue-500 bg-blue-600'
-  else if (type === '电视剧')
-    return ' bg-indigo-500 border-indigo-600'
-  else
-    return 'border-purple-600 bg-purple-600'
+  if (type === '电影') return 'border-blue-500 bg-blue-600'
+  else if (type === '电视剧') return ' bg-indigo-500 border-indigo-600'
+  else return 'border-purple-600 bg-purple-600'
 }
 
 // 计算图片地址
 const getImgUrl = computed(() => {
-  if (imageLoadError.value)
-    return noImage
+  if (imageLoadError.value) return noImage
   const image = props.media?.image || ''
   return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(image)}`
 })
 
 // 跳转播放
 function goPlay(isHovering = false) {
-  if (props.media?.link && isHovering)
-    window.open(props.media?.link, '_blank')
+  if (props.media?.link && isHovering) window.open(props.media?.link, '_blank')
 }
 </script>
 
@@ -72,24 +67,24 @@ function goPlay(isHovering = false) {
         </VImg>
         <!-- 类型角标 -->
         <VChip
-            v-show="isImageLoaded"
-            variant="elevated"
-            size="small"
-            :class="getChipColor(props.media?.type || '')"
-            class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
-          >
-            {{ props.media?.type }}
-          </VChip>
-          <!-- 详情 -->
-          <VCardText
-            v-show="hover.isHovering || imageLoadError"
-            class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
-          >
-            <span class="font-bold">{{ props.media?.subtitle }}</span>
-            <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
-              {{ props.media?.title }}
-            </h1>
-          </VCardText>
+          v-show="isImageLoaded"
+          variant="elevated"
+          size="small"
+          :class="getChipColor(props.media?.type || '')"
+          class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
+        >
+          {{ props.media?.type }}
+        </VChip>
+        <!-- 详情 -->
+        <VCardText
+          v-show="hover.isHovering || imageLoadError"
+          class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
+        >
+          <span class="font-bold">{{ props.media?.subtitle }}</span>
+          <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+            {{ props.media?.title }}
+          </h1>
+        </VCardText>
       </VCard>
     </template>
   </VHover>

src/components/cards/SiteCard.vue

@@ -2,26 +2,23 @@
 import type { PropType } from 'vue'
 import { useToast } from 'vue-toast-notification'
 import SiteAddEditDialog from '../dialog/SiteAddEditDialog.vue'
-import SiteTorrentTable from '../table/SiteTorrentTable.vue'
-import { requiredValidator } from '@/@validators'
+import SiteUserDataDialog from '../dialog/SiteUserDataDialog.vue'
+import SiteResourceDialog from '../dialog/SiteResourceDialog.vue'
+import SiteCookieUpdateDialog from '../dialog/SiteCookieUpdateDialog.vue'
 import api from '@/api'
-import type { Site, SiteStatistic } from '@/api/types'
-import ExistIcon from '@core/components/ExistIcon.vue'
+import type { Site, SiteStatistic, SiteUserData } from '@/api/types'
 import { isNullOrEmptyObject } from '@/@core/utils'
+import { formatFileSize } from '@/@core/utils/formatters'
 
 // 输入参数
 const cardProps = defineProps({
   site: Object as PropType<Site>,
-  width: String,
-  height: String,
+  data: Object as PropType<SiteUserData>,
 })
 
 // 定义触发的自定义事件
 const emit = defineEmits(['update', 'remove'])
 
-// 密码输入
-const isPasswordVisible = ref(false)
-
 // 图标
 const siteIcon = ref<string>('')
 
@@ -29,14 +26,11 @@ const siteIcon = ref<string>('')
 const $toast = useToast()
 
 // 测试按钮文字
-const testButtonText = ref('测试')
+const testButtonText = ref('连通性测试')
 
 // 测试按钮可用性
 const testButtonDisable = ref(false)
 
-// 更新按钮可用性
-const updateButtonDisable = ref(false)
-
 // 更新站点Cookie UA弹窗
 const siteCookieDialog = ref(false)
 
@@ -46,18 +40,8 @@ const siteEditDialog = ref(false)
 // 资源浏览弹窗
 const resourceDialog = ref(false)
 
-// 进度条
-const progressDialog = ref(false)
-
-// 进度文本
-const progressText = ref('请稍候 ...')
-
-// 用户名密码表单
-const userPwForm = ref({
-  username: '',
-  password: '',
-  code: '',
-})
+// 用户数据弹窗
+const siteUserDataDialog = ref(false)
 
 // 站点使用统计
 const siteStats = ref<SiteStatistic>({})
@@ -66,8 +50,7 @@ const siteStats = ref<SiteStatistic>({})
 async function getSiteIcon() {
   try {
     siteIcon.value = (await api.get(`site/icon/${cardProps.site?.id}`)).data.icon
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -79,17 +62,14 @@ async function testSite() {
     testButtonDisable.value = true
 
     const result: { [key: string]: any } = await api.get(`site/test/${cardProps.site?.id}`)
-    if (result.success)
-      $toast.success(`${cardProps.site?.name} 连通性测试成功，可正常使用！`)
-    else
-      $toast.error(`${cardProps.site?.name} 连通性测试失败：${result.message}`)
+    if (result.success) $toast.success(`${cardProps.site?.name} 连通性测试成功，可正常使用！`)
+    else $toast.error(`${cardProps.site?.name} 连通性测试失败：${result.message}`)
 
-    testButtonText.value = '测试'
+    testButtonText.value = '连通性测试'
     testButtonDisable.value = false
 
     getSiteStats()
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -97,9 +77,8 @@ async function testSite() {
 // 查询站点使用统计
 async function getSiteStats() {
   try {
-    siteStats.value = (await api.get(`site/statistic/${cardProps.site?.domain}`))
-  }
-  catch (error) {
+    siteStats.value = await api.get(`site/statistic/${cardProps.site?.domain}`)
+  } catch (error) {
     console.error(error)
   }
 }
@@ -114,41 +93,9 @@ async function handleResourceBrowse() {
   resourceDialog.value = true
 }
 
-// 调用API，更新站点Cookie UA
-async function updateSiteCookie() {
-  try {
-    if (!userPwForm.value.username || !userPwForm.value.password)
-      return
-
-    // 更新按钮状态
-    siteCookieDialog.value = false
-    updateButtonDisable.value = true
-
-    progressDialog.value = true
-    progressText.value = `正在更新 ${cardProps.site?.name} Cookie & UA ...`
-
-    const result: { [key: string]: any } = await api.get(
-      `site/cookie/${cardProps.site?.id}`,
-      {
-        params: {
-          username: userPwForm.value.username,
-          password: userPwForm.value.password,
-          code: userPwForm.value.code,
-        },
-      },
-    )
-
-    if (result.success)
-      $toast.success(`${cardProps.site?.name} 更新Cookie & UA 成功！`)
-    else
-      $toast.error(`${cardProps.site?.name} 更新失败：${result.message}`)
-
-    progressDialog.value = false
-    updateButtonDisable.value = false
-  }
-  catch (error) {
-    console.error(error)
-  }
+// 打开站点用户数据弹窗
+async function handleSiteUserData() {
+  siteUserDataDialog.value = true
 }
 
 // 打开站点页面
@@ -158,27 +105,42 @@ function openSitePage() {
 
 // 根据站点状态显示不同的状态图标
 const statColor = computed(() => {
-  if (isNullOrEmptyObject(siteStats.value)){
+  if (isNullOrEmptyObject(siteStats.value)) {
     return 'secondary'
   }
-  if (siteStats.value?.lst_state == 1){
+  if (siteStats.value?.lst_state == 1) {
     return 'error'
-  }
-  else if (siteStats.value?.lst_state == 0){
-    if (!siteStats.value?.seconds)
-      return 'secondary'
-     if (siteStats.value?.seconds >= 5)
-      return 'warning'
+  } else if (siteStats.value?.lst_state == 0) {
+    if (!siteStats.value?.seconds) return 'secondary'
+    if (siteStats.value?.seconds >= 5) return 'warning'
     return 'success'
   }
 })
 
-// 监听resourceDialog，如果为false则重新查询站点使用统计
-watch(resourceDialog, (value) => {
-  if (!value)
-    getSiteStats()
+// 计算上传量和下载量的百分比
+const getPercentage = computed(() => {
+  if (cardProps.data?.upload === 0) return 100
+  return ((cardProps.data?.download ?? 0) / ((cardProps.data?.download ?? 0) + (cardProps.data?.upload ?? 0))) * 100
 })
 
+// 保存站点
+function saveSite() {
+  siteEditDialog.value = false
+  emit('update')
+}
+
+// 更新站点Cookie UA后的回调
+function onSiteCookieUpdated() {
+  siteCookieDialog.value = false
+  getSiteStats()
+}
+
+// 资源浏览弹窗关闭后的回调
+function onSiteResourceDone() {
+  resourceDialog.value = false
+  getSiteStats()
+}
+
 // 装载时查询站点图标
 onMounted(() => {
   getSiteIcon()
@@ -187,231 +149,122 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard
-    :height="cardProps.height"
-    :width="cardProps.width"
-    :variant="cardProps.site?.is_active ? 'elevated' : 'outlined'"
-    class="overflow-hidden"
-    @click="siteEditDialog = true"
-  >
-    <template #image>
-      <VAvatar
-        class="absolute right-2 bottom-2 rounded"
-        variant="flat"
-        rounded="0"
-      >
-        <VImg :src="siteIcon" />
-      </VAvatar>
-    </template>
-
-    <VCardItem>
-      <VCardTitle class="font-bold">
-        <span @click.stop="openSitePage">{{ cardProps.site?.name }}</span>
-      </VCardTitle>
-      <VCardSubtitle>
-        <span @click.stop="openSitePage">{{ cardProps.site?.url }}</span>
-      </VCardSubtitle>
-    </VCardItem>
-
-    <StatIcon v-if="cardProps.site?.is_active" :color="statColor" />
-
-    <VCardText class="py-2">
-      <VTooltip
-        v-if="cardProps.site?.render === 1"
-        text="浏览器仿真"
-      >
-        <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-apple-safari"
-          />
-        </template>
-      </VTooltip>
-
-      <VTooltip
-        v-if="cardProps.site?.proxy === 1"
-        text="代理"
-      >
-        <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-network-outline"
-          />
-        </template>
-      </VTooltip>
-
-      <VTooltip
-        v-if="cardProps.site?.limit_interval"
-        text="流控"
-      >
-        <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-speedometer"
-          />
-        </template>
-      </VTooltip>
-
-      <VTooltip
-        v-if="cardProps.site?.filter"
-        text="过滤"
-      >
-        <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-filter-cog-outline"
-          />
-        </template>
-      </VTooltip>
-    </VCardText>
-
-    <VDivider
-      class="opacity-75"
-      style="border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));"
-    />
-
-    <VCardActions>
-      <VBtn
-        v-if="!cardProps.site?.public"
-        :disabled="updateButtonDisable"
-        @click.stop="handleSiteUpdate"
-      >
-        <template #prepend>
-          <VIcon icon="mdi-refresh" />
-        </template>
-        更新
-      </VBtn>
-      <VBtn
-        :disabled="testButtonDisable"
-        @click.stop="testSite"
-      >
-        <template #prepend>
-          <VIcon icon="mdi-link" />
-        </template>
-        {{ testButtonText }}
-      </VBtn>
-      <VBtn @click.stop="handleResourceBrowse">
-        <template #prepend>
-          <VIcon icon="mdi-web" />
-        </template>
-        浏览
-      </VBtn>
-    </VCardActions>
-  </VCard>
-  <!-- 更新站点Cookie & UA弹窗 -->
-  <VDialog
-    v-model="siteCookieDialog"
-    max-width="50rem"
-  >
-    <!-- Dialog Content -->
-    <VCard title="更新站点Cookie & UA">
-      <VCardText>
-        <VForm @submit.prevent="() => {}">
-          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="userPwForm.username"
-                label="用户名"
-                :rules="[requiredValidator]"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="userPwForm.password"
-                label="密码"
-                :type="isPasswordVisible ? 'text' : 'password'"
-                :append-inner-icon="
-                  isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
-                "
-                :rules="[requiredValidator]"
-                @click:append-inner="isPasswordVisible = !isPasswordVisible"
-                @keydown.enter="updateSiteCookie"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="userPwForm.code"
-                label="两步验证"
-              />
-            </VCol>
-          </VRow>
-        </VForm>
-      </VCardText>
-
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="updateSiteCookie"
-        >
-          开始更新
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
-  <SiteAddEditDialog
-    v-if="siteEditDialog"
-    v-model="siteEditDialog"
-    :siteid="cardProps.site?.id"
-    @save="siteEditDialog = false; emit('update')"
-    @remove="emit('remove')"
-    @close="siteEditDialog = false"
-  />
-  <!-- 站点资源弹窗 -->
-  <VDialog
-    v-if="resourceDialog"
-    v-model="resourceDialog"
-    max-width="80rem"
-    scrollable
-    z-index="1010"
-  >
-    <!-- Dialog Content -->
-    <VCard :title="`浏览站点 - ${cardProps.site?.name}`">
-      <DialogCloseBtn @click="resourceDialog = false" />
-      <VCardText class="pt-2">
-        <SiteTorrentTable :site="cardProps.site?.id" />
-      </VCardText>
-    </VCard>
-  </VDialog>
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
+  <div>
     <VCard
-      color="primary"
+      :variant="cardProps.site?.is_active ? 'elevated' : 'outlined'"
+      class="overflow-hidden h-full flex flex-col"
+      @click="siteEditDialog = true"
     >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
+      <template #image>
+        <VAvatar class="absolute right-2 bottom-2 rounded" variant="flat" rounded="0">
+          <VImg :src="siteIcon" />
+        </VAvatar>
+      </template>
+      <VCardItem style="padding-block-end: 0">
+        <VCardTitle class="font-bold">
+          <span @click.stop="openSitePage">{{ cardProps.site?.name }}</span>
+        </VCardTitle>
+        <VCardSubtitle>
+          <span @click.stop="openSitePage">{{ cardProps.site?.url }}</span>
+        </VCardSubtitle>
+      </VCardItem>
+      <VCardText class="py-1">
+        <VTooltip v-if="cardProps.site?.limit_interval" text="流控">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-speedometer" />
+          </template>
+        </VTooltip>
+        <VTooltip v-if="cardProps.site?.proxy === 1" text="代理">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-network-outline" />
+          </template>
+        </VTooltip>
+        <VTooltip v-if="cardProps.site?.render === 1" text="浏览器仿真">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-apple-safari" />
+          </template>
+        </VTooltip>
+        <VTooltip v-if="cardProps.site?.filter" text="过滤">
+          <template #activator="{ props }">
+            <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-filter-cog-outline" />
+          </template>
+        </VTooltip>
       </VCardText>
+      <VCardActions>
+        <IconBtn>
+          <VIcon icon="mdi-chevron-down" color="primary" />
+          <VMenu activator="parent" close-on-content-click>
+            <VList>
+              <VListItem variant="plain" v-if="!cardProps.site?.public" @click="handleSiteUpdate">
+                <template #prepend>
+                  <VIcon icon="mdi-refresh" />
+                </template>
+                <VListItemTitle>更新 Cookie & UA</VListItemTitle>
+              </VListItem>
+              <VListItem variant="plain" :disabled="testButtonDisable" @click.stop="testSite">
+                <template #prepend>
+                  <VIcon icon="mdi-link" />
+                </template>
+                <VListItemTitle>{{ testButtonText }}</VListItemTitle>
+              </VListItem>
+              <VListItem variant="plain" @click="handleResourceBrowse">
+                <template #prepend>
+                  <VIcon icon="mdi-web" />
+                </template>
+                <VListItemTitle>资源预览</VListItemTitle>
+              </VListItem>
+              <VListItem variant="plain" @click="handleSiteUserData">
+                <template #prepend>
+                  <VIcon icon="mdi-chart-bell-curve" />
+                </template>
+                <VListItemTitle>站点数据</VListItemTitle>
+              </VListItem>
+            </VList>
+          </VMenu>
+        </IconBtn>
+        <span class="text-sm">
+          ↑ {{ formatFileSize(cardProps.data?.upload || 0) }} / ↓ {{ formatFileSize(cardProps.data?.download || 0) }}
+        </span>
+        <VSpacer />
+      </VCardActions>
+      <StatIcon v-if="cardProps.site?.is_active" :color="statColor" />
+      <span class="absolute top-1 right-8">
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </span>
+      <div class="w-full absolute bottom-0" v-if="(cardProps.data?.upload || cardProps.data?.download || 0) > 0">
+        <VProgressLinear :model-value="getPercentage" bg-color="success" color="warning" bg-opacity="0.5" height="3" />
+      </div>
     </VCard>
-  </VDialog>
+    <!-- 更新站点Cookie & UA弹窗 -->
+    <SiteCookieUpdateDialog
+      v-if="siteCookieDialog"
+      v-model="siteCookieDialog"
+      :site="cardProps.site"
+      @close="siteCookieDialog = false"
+      @done="onSiteCookieUpdated"
+    />
+    <!-- 站点编辑弹窗 -->
+    <SiteAddEditDialog
+      v-if="siteEditDialog"
+      v-model="siteEditDialog"
+      :siteid="cardProps.site?.id"
+      @save="saveSite"
+      @remove="emit('remove')"
+      @close="siteEditDialog = false"
+    />
+    <!-- 站点数据弹窗 -->
+    <SiteUserDataDialog
+      v-if="siteUserDataDialog"
+      v-model="siteUserDataDialog"
+      :site="cardProps.site"
+      @close="siteUserDataDialog = false"
+    />
+    <!-- 站点资源弹窗 -->
+    <SiteResourceDialog
+      v-if="resourceDialog"
+      v-model="resourceDialog"
+      :site="cardProps.site"
+      @close="onSiteResourceDone"
+    />
+  </div>
 </template>
-
-<style lang="scss">
-.v-table th {
-  white-space: nowrap;
-}
-</style>

src/components/cards/StorageCard.vue

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

@@ -1,8 +1,10 @@
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
+import { useConfirm } from 'vuetify-use-dialog'
 import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
-import { calculateTimeDifference } from '@/@core/utils'
-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'
@@ -12,9 +14,15 @@ const props = defineProps({
   media: Object as PropType<Subscribe>,
 })
 
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
 // 定义触发的自定义事件
 const emit = defineEmits(['remove', 'save'])
 
+// 确认框
+const createConfirm = useConfirm()
+
 // 提示框
 const $toast = useToast()
 
@@ -24,65 +32,42 @@ 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?.last_update
-      ? `${calculateTimeDifference(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'
-  else if (props.media?.type === '电视剧')
-    return 'mdi-television-classic'
-  else
-    return 'mdi-help-circle'
-}
-
 // 计算百分比
 function getPercentage() {
-  if (props.media?.total_episode === 0)
-    return 0
+  if (props.media?.total_episode === 0) return 0
 
   return Math.round(
-    (((props.media?.total_episode ?? 0) - (props.media?.lack_episode ?? 0))
-      / (props.media?.total_episode ?? 1))
-    * 100,
+    (((props.media?.total_episode ?? 0) - (props.media?.lack_episode ?? 0)) / (props.media?.total_episode ?? 1)) * 100,
   )
 }
 
-// 计算文本颜色
-function getTextColor() {
-  return imageLoaded.value ? 'white' : ''
-}
-
-// 计算文本类
-function getTextClass() {
-  return imageLoaded.value ? 'text-white' : ''
-}
-
 // 删除订阅
 async function removeSubscribe() {
   try {
-    const result: { [key: string]: any } = await api.delete(
-      `subscribe/${props.media?.id}`,
-    )
+    const result: { [key: string]: any } = await api.delete(`subscribe/${props.media?.id}`)
 
     if (result.success) {
       // 通知父组件刷新
       emit('remove')
     }
-  }
-  catch (e) {
+  } catch (e) {
     console.log(e)
   }
 }
@@ -90,26 +75,91 @@ async function removeSubscribe() {
 // 搜索订阅
 async function searchSubscribe() {
   try {
-    const result: { [key: string]: any } = await api.get(
-      `subscribe/search/${props.media?.id}`,
-    )
+    const result: { [key: string]: any } = await api.get(`subscribe/search/${props.media?.id}`)
 
     // 提示
-    if (result.success)
-      $toast.success(`${props.media?.name} 提交搜索请求成功！`)
-  }
-  catch (e) {
+    if (result.success) $toast.success(`${props.media?.name} 提交搜索请求成功！`)
+  } catch (e) {
     console.log(e)
   }
 }
 
+// 切换订阅状态
+async function 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} 将恢复初始状态，已下载记录将被清除，未入库的内容将会重新下载，是否确认？`,
+    })
+    if (!isConfirmed) return
+    // 重置
+    const result: { [key: string]: any } = await api.get(`subscribe/reset/${props.media?.id}`)
+    // 提示
+    if (result.success) {
+      $toast.success(`${props.media?.name} 重置成功！`)
+      subscribeState.value = 'R'
+      emit('save')
+    } else $toast.error(`${props.media?.name} 重置失败：${result.message}`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+//  分享订阅
+async function shareSubscribe() {
+  subscribeShareDialog.value = true
+}
+
 // 编辑订阅响应
 async function editSubscribeDialog() {
   subscribeEditDialog.value = true
 }
 
+// 查看媒体详情
+async function viewMediaDetail() {
+  router.push({
+    path: '/media',
+    query: {
+      mediaid: `${props.media?.tmdbid ? `tmdb:${props.media?.tmdbid}` : `douban:${props.media?.doubanid}`}`,
+      type: props.media?.type,
+    },
+  })
+}
+
+// 查看文件详情
+async function viewSubscribeFiles() {
+  subscribeFilesDialog.value = true
+}
+
 // 弹出菜单
-const dropdownItems = ref([
+const dropdownItems = computed(() => [
   {
     title: '编辑',
     value: 1,
@@ -127,28 +177,52 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '查看详情',
+    title: '详情',
     value: 3,
     props: {
-      prependIcon: 'mdi-open-in-new',
-      click: () => {
-        router.push({
-          path: '/media',
-          query: {
-            mediaid: `${
-              props.media?.tmdbid
-                ? `tmdb:${props.media?.tmdbid}`
-                : `douban:${props.media?.doubanid}`
-            }`,
-            type: props.media?.type,
-          },
-        })
-      },
+      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: 8,
     props: {
       prependIcon: 'mdi-trash-can-outline',
       color: 'error',
@@ -156,140 +230,188 @@ const dropdownItems = ref([
     },
   },
 ])
+
+// 监听插件窗口状态变化
+watch(
+  () => props.media?.page_open,
+  (newOpenState, _) => {
+    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>
-  <VCard
-    :key="props.media?.id"
-    :class="`${props.media?.best_version ? 'outline-dashed outline-1' : ''}`"
-    @click="editSubscribeDialog"
-  >
-    <template #image>
-      <VImg
-        :src="props.media?.backdrop || props.media?.poster"
-        aspect-ratio="2/3"
-        cover
-        class="brightness-50"
-        @load="imageLoadHandler"
-      />
-    </template>
-    <VCardItem>
-      <template #prepend>
-        <VIcon
-          size="1.9rem"
-          :color="getTextColor()"
-          :icon="getIcon()"
-        />
-      </template>
-      <VCardTitle :class="getTextClass()">
-        {{ props.media?.name }}
-        {{ formatSeason(props.media?.season ? props.media?.season.toString() : '') }}
-      </VCardTitle>
-      <template #append>
-        <div class="me-n3">
-          <IconBtn>
-            <VIcon
-              icon="mdi-dots-vertical"
-              :color="getTextColor()"
-            />
-            <VMenu
-              activator="parent"
-              close-on-content-click
-            >
-              <VList>
-                <VListItem
-                  v-for="(item, i) in dropdownItems"
-                  :key="i"
-                  variant="plain"
-                  :base-color="item.props.color"
-                  @click="item.props.click"
-                >
-                  <template #prepend>
-                    <VIcon :icon="item.props.prependIcon" />
-                  </template>
-                  <VListItemTitle v-text="item.title" />
-                </VListItem>
-              </VList>
-            </VMenu>
-          </IconBtn>
-        </div>
-      </template>
-    </VCardItem>
-
-    <VCardText>
-      <p
-        class="clamp-text mb-0"
-        :class="getTextClass()"
-      >
-        {{ props.media?.description }}
-      </p>
-    </VCardText>
-
-    <VCardText class="d-flex justify-space-between align-center flex-wrap">
-      <div class="d-flex align-center">
-        <IconBtn
-          icon="mdi-star"
-          :color="getTextColor()"
-          class="me-1"
-        />
-        <span
-          class="text-subtitle-2 me-4"
-          :class="getTextClass()"
-        >{{
-          props.media?.vote
-        }}</span>
-        <IconBtn
-          v-if="props.media?.total_episode"
-          v-bind="props"
-          icon="mdi-progress-clock"
-          :color="getTextColor()"
-          class="me-1"
-        />
-        <span
-          v-if="props.media?.season"
-          class="text-subtitle-2 me-4"
-          :class="getTextClass()"
-        >{{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
-          {{ props.media?.total_episode }}</span>
-        <IconBtn
-          v-if="props.media?.username"
-          icon="mdi-account"
-          :color="getTextColor()"
-          class="me-1"
-        />
-        <span
-          v-if="props.media?.username"
-          class="text-subtitle-2 me-4"
-          :class="getTextClass()"
+  <div>
+    <VHover>
+      <template #default="hover">
+        <VCard
+          v-bind="hover.props"
+          :key="props.media?.id"
+          class="flex flex-col rounded-lg h-full"
+          :class="{
+            'outline-dashed outline-1': props.media?.best_version && imageLoaded,
+            'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+            'opacity-70': subscribeState === 'S',
+          }"
+          min-height="170"
+          @click="editSubscribeDialog"
         >
-          {{ props.media?.username }}
-        </span>
-      </div>
-    </VCardText>
-    <VCardText
-      v-if="lastUpdateText"
-      class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300"
-    >
-      <VIcon
-        icon="mdi-download"
-        class="me-1"
-      />
-      {{ lastUpdateText }}
-    </VCardText>
-    <VProgressLinear
-      v-if="getPercentage() > 0"
-      :model-value="getPercentage()"
-      bg-color="success"
-      color="success"
+          <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="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-12 flex-shrink-0 overflow-hidden rounded-md shadow-lg" v-if="imageLoaded">
+                <VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
+                  <template #placeholder>
+                    <div class="w-full h-full">
+                      <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                    </div>
+                  </template>
+                </VImg>
+              </div>
+              <div class="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
+                <div class="text-sm font-medium text-white sm:pt-1">{{ props.media?.year }}</div>
+                <div class="mr-2 min-w-0 text-lg font-bold text-white">
+                  {{ props.media?.name }}
+                  {{ formatSeason(props.media?.season ? props.media?.season.toString() : '') }}
+                </div>
+              </div>
+            </VCardText>
+            <VCardText class="flex justify-space-between align-center flex-wrap">
+              <div class="flex align-center">
+                <IconBtn
+                  v-if="props.media?.total_episode"
+                  v-bind="props"
+                  icon="mdi-progress-download"
+                  color="white"
+                  class="me-1"
+                />
+                <div v-if="props.media?.season" class="text-subtitle-2 me-4 text-white">
+                  {{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
+                  {{ props.media?.total_episode }}
+                </div>
+                <IconBtn v-if="props.media?.username" icon="mdi-account" color="white" class="me-1" />
+                <span v-if="props.media?.username" class="text-subtitle-2 me-4 text-white">
+                  {{ props.media?.username }}
+                </span>
+              </div>
+            </VCardText>
+            <VCardText v-if="lastUpdateText" class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
+              <VIcon icon="mdi-download" class="me-1" />
+              {{ lastUpdateText }}
+            </VCardText>
+            <div class="w-full absolute bottom-0">
+              <VProgressLinear
+                v-if="getPercentage() > 0"
+                :model-value="getPercentage()"
+                bg-color="success"
+                color="success"
+              />
+            </div>
+            <div 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"
     />
-  </VCard>
-  <!-- 订阅编辑弹窗 -->
-  <SubscribeEditDialog
-    v-if="subscribeEditDialog"
-    v-model="subscribeEditDialog"
-    :subid="props.media?.id"
-    @remove="() => { emit('remove');subscribeEditDialog = false; }"
-    @save="() => { emit('save');subscribeEditDialog = false; }"
-    @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">
+.subscribe-card-background {
+  background-image: linear-gradient(90deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
+}
+</style>

src/components/cards/SubscribeShareCard.vue

@@ -0,0 +1,164 @@
+<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>,
+})
+
+// 从 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
+})
+
+// 查看媒体详情
+async function viewMediaDetail() {
+  router.push({
+    path: '/media',
+    query: {
+      mediaid: `${props.media?.tmdbid ? `tmdb:${props.media?.tmdbid}` : `douban:${props.media?.doubanid}`}`,
+      type: props.media?.type,
+    },
+  })
+}
+
+// 复用订阅
+function showForkSubscribe() {
+  forkSubscribeDialog.value = true
+}
+
+// 完成复用订阅
+function finishForkSubscribe(subid: number) {
+  subscribeId.value = subid
+  subscribeEditDialog.value = true
+}
+</script>
+
+<template>
+  <div>
+    <VHover>
+      <template #default="hover">
+        <VCard
+          v-bind="hover.props"
+          :key="props.media?.id"
+          class="flex flex-col rounded-lg"
+          :class="{
+            'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
+          }"
+          min-height="170"
+          @click="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>
+            <VCardText class="flex items-center pb-1">
+              <div class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md shadow-lg" v-if="imageLoaded">
+                <VImg :src="posterUrl" aspect-ratio="2/3" cover @click.stop="viewMediaDetail">
+                  <template #placeholder>
+                    <div class="w-full h-full">
+                      <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                    </div>
+                  </template>
+                </VImg>
+              </div>
+              <div class="flex flex-col justify-center pl-2 xl:pl-4">
+                <div class="mr-2 min-w-0 text-lg font-bold text-white line-clamp-2 overflow-hidden text-ellipsis ...">
+                  {{ props.media?.share_title }}
+                </div>
+                <div class="text-sm font-medium text-gray-200 sm:pt-1 line-clamp-3 overflow-hidden text-ellipsis ...">
+                  {{ props.media?.share_comment }}
+                </div>
+              </div>
+            </VCardText>
+            <VCardText class="flex justify-space-between align-center flex-wrap">
+              <div class="flex align-center">
+                <IconBtn v-bind="props" icon="mdi-account" color="white" class="me-1" />
+                <div class="text-subtitle-2 me-4 text-white">
+                  {{ props.media?.share_user }}
+                </div>
+                <IconBtn v-if="props.media?.count" icon="mdi-fire" color="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"
+      @done="finishForkSubscribe"
+    />
+  </div>
+</template>
+<style lang="scss">
+.subscribe-card-background {
+  background-image: linear-gradient(90deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
+}
+</style>

src/components/cards/TorrentCard.vue

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

src/components/cards/TorrentItem.vue

@@ -1,23 +1,15 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { useToast } from 'vue-toast-notification'
-import { useConfirm } from 'vuetify-use-dialog'
 import { formatFileSize } from '@/@core/utils/formatters'
 import api from '@/api'
-import { doneNProgress, startNProgress } from '@/api/nprogress'
-import type { Context, 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)
 
@@ -34,70 +26,36 @@ const meta = ref(props.torrent?.meta_info)
 const siteIcon = ref('')
 
 // 存储是否已经下载过的记录
-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) {
+  } catch (error) {
     console.error(error)
   }
 }
 
 // 询问并添加下载
-async function handleAddDownload(_site: any = undefined,
-  _media: any = undefined,
-  _torrent: any = undefined) {
-  if (!_media || !_torrent || !_site) {
-    _site = torrent.value?.site_name
-    _media = media.value
-    _torrent = torrent.value
-  }
-
-  const isConfirmed = await createConfirm({
-    title: '确认',
-    content: `是否确认下载【${_site}】${_torrent?.title} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
-  })
-
-  if (!isConfirmed)
-    return
-
-  addDownload(_media, _torrent)
+async function handleAddDownload() {
+  // 打开下载对话框
+  addDownloadDialog.value = true
 }
 
-// 添加下载
-async function addDownload(_media: MediaInfo, _torrent: TorrentInfo) {
-  startNProgress()
-  try {
-    const result: { [key: string]: any } = await api.post('download/', {
-      media_in: _media,
-      torrent_in: _torrent,
-    })
+// 添加下载成功
+function addDownloadSuccess(url: string) {
+  addDownloadDialog.value = false
+  // 添加下载成功
+  downloaded.value.push(url)
+}
 
-    if (result.success) {
-      // 添加下载成功
-      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
-      downloaded.value.push(_torrent?.enclosure || '')
-    }
-    else {
-      // 添加下载失败
-      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败！`)
-    }
-  }
-  catch (error) {
-    console.error(error)
-  }
-  doneNProgress()
+// 添加下载失败
+function addDownloadError(error: string) {
+  addDownloadDialog.value = false
 }
 
 // 打开种子详情页面
@@ -112,14 +70,10 @@ async function downloadTorrentFile() {
 
 // 促销Chip类
 function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
-  if (downloadVolume === 0)
-    return 'text-white bg-lime-500'
-  else if (downloadVolume < 1)
-    return 'text-white bg-green-500'
-  else if (uploadVolume !== 1)
-    return 'text-white bg-sky-500'
-  else
-    return 'text-white bg-gray-500'
+  if (downloadVolume === 0) return 'text-white bg-lime-500'
+  else if (downloadVolume < 1) return 'text-white bg-green-500'
+  else if (uploadVolume !== 1) return 'text-white bg-sky-500'
+  else return 'text-white bg-gray-500'
 }
 
 // 装载时查询站点图标
@@ -129,147 +83,101 @@ onMounted(() => {
 </script>
 
 <template>
-  <VListItem 
-    @click="handleAddDownload"
-    :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'flat'"
-  >
-    <template
-      v-if="!showMoreTorrents"
-      #prepend
+  <div>
+    <VListItem
+      @click="handleAddDownload"
+      :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'flat'"
     >
-      <VAvatar
-        class="rounded"
-        variant="flat"
-        @click.stop="openTorrentDetail"
-      >
-        <VImg :src="siteIcon" />
-      </VAvatar>
-    </template>
-    <VListItemTitle class="break-words overflow-visible whitespace-break-spaces">
-      {{ torrent?.title }}
-      <span class="text-green-700 ms-2 text-sm">↑{{ torrent?.seeders }}</span>
-      <span class="text-orange-700 ms-2 text-sm">↓{{ torrent?.peers }}</span>
-    </VListItemTitle>
-    <VListItemSubtitle>
-      {{ torrent?.description }}
-    </VListItemSubtitle>
-    <div
-      v-if="torrent?.labels"
-      class="pt-2"
-    >
-      <VChip
-        v-if="torrent?.hit_and_run"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-black"
-      >
-        H&R
-      </VChip>
-      <VChip
-        v-if="torrent?.freedate_diff"
-        variant="elevated"
-        color="secondary"
-        size="small"
-        class="me-1 mb-1"
-      >
-        {{ torrent?.freedate_diff }}
-      </VChip>
-      <VChip
-        v-for="(label, index) in torrent?.labels"
-        :key="index"
-        variant="elevated"
-        size="small"
-        color="primary"
-        class="me-1 mb-1"
-      >
-        {{ label }}
-      </VChip>
-      <VChip
-        v-if="meta?.edition"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-red-500"
-      >
-        {{ meta?.edition }}
-      </VChip>
-      <VChip
-        v-if="meta?.resource_pix"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-red-500"
-      >
-        {{ meta?.resource_pix }}
-      </VChip>
-      <VChip
-        v-if="meta?.video_encode"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-orange-500"
-      >
-        {{ meta?.video_encode }}
-      </VChip>
-      <VChip
-        v-if="torrent?.size"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-yellow-500"
-      >
-        {{ formatFileSize(torrent?.size) }}
-      </VChip>
-      <VChip
-        v-if="meta?.resource_team"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-cyan-500"
-      >
-        {{ meta?.resource_team }}
-      </VChip>
-      <VChip
-        v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
-        :class="
-          getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)
-        "
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1"
-      >
-        {{ torrent?.volume_factor }}
-      </VChip>
-    </div>
-    <template #append>
-      <div class="me-n3">
-        <IconBtn>
-          <VIcon
-            icon="mdi-dots-vertical"
-          />
-          <VMenu
-            activator="parent"
-            close-on-content-click
-          >
-            <VList>
-              <VListItem
-                variant="plain"
-                @click="openTorrentDetail()"
-              >
-                <template #prepend>
-                  <VIcon icon="mdi-information" />
-                </template>
-                <VListItemTitle>查看详情</VListItemTitle>
-              </VListItem>
-              <VListItem
-                v-if="props.torrent?.torrent_info?.enclosure?.startsWith('http')"
-                variant="plain"
-                @click="downloadTorrentFile()"
-              >
-                <template #prepend>
-                  <VIcon icon="mdi-download" />
-                </template>
-                <VListItemTitle>下载种子文件</VListItemTitle>
-              </VListItem>
-            </VList>
-          </VMenu>
-        </IconBtn>
+      <template v-if="!showMoreTorrents" #prepend>
+        <VAvatar class="rounded" variant="flat" @click.stop="openTorrentDetail">
+          <VImg :src="siteIcon" />
+        </VAvatar>
+      </template>
+      <VListItemTitle class="break-words overflow-visible whitespace-break-spaces">
+        {{ torrent?.title }}
+        <span class="text-green-700 ms-2 text-sm">↑{{ torrent?.seeders }}</span>
+        <span class="text-orange-700 ms-2 text-sm">↓{{ torrent?.peers }}</span>
+      </VListItemTitle>
+      <VListItemSubtitle> 【{{ torrent?.site_name }}】{{ torrent?.description }} </VListItemSubtitle>
+      <div v-if="torrent?.labels" class="pt-2">
+        <VChip v-if="torrent?.hit_and_run" variant="elevated" size="small" class="me-1 mb-1 text-white bg-black">
+          H&R
+        </VChip>
+        <VChip v-if="torrent?.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
+          {{ torrent?.freedate_diff }}
+        </VChip>
+        <VChip
+          v-for="(label, index) in torrent?.labels"
+          :key="index"
+          variant="elevated"
+          size="small"
+          color="primary"
+          class="me-1 mb-1"
+        >
+          {{ label }}
+        </VChip>
+        <VChip v-if="meta?.edition" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
+          {{ meta?.edition }}
+        </VChip>
+        <VChip v-if="meta?.resource_pix" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
+          {{ meta?.resource_pix }}
+        </VChip>
+        <VChip v-if="meta?.video_encode" variant="elevated" size="small" class="me-1 mb-1 text-white bg-orange-500">
+          {{ meta?.video_encode }}
+        </VChip>
+        <VChip v-if="torrent?.size" variant="elevated" size="small" class="me-1 mb-1 text-white bg-yellow-500">
+          {{ formatFileSize(torrent?.size) }}
+        </VChip>
+        <VChip v-if="meta?.resource_team" variant="elevated" size="small" class="me-1 mb-1 text-white bg-cyan-500">
+          {{ meta?.resource_team }}
+        </VChip>
+        <VChip
+          v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
+          :class="getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
+          variant="elevated"
+          size="small"
+          class="me-1 mb-1"
+        >
+          {{ torrent?.volume_factor }}
+        </VChip>
       </div>
-    </template>
-  </VListItem>
+      <template #append>
+        <div class="me-n3">
+          <IconBtn>
+            <VIcon icon="mdi-dots-vertical" />
+            <VMenu activator="parent" close-on-content-click>
+              <VList>
+                <VListItem variant="plain" @click="openTorrentDetail()">
+                  <template #prepend>
+                    <VIcon icon="mdi-information" />
+                  </template>
+                  <VListItemTitle>查看详情</VListItemTitle>
+                </VListItem>
+                <VListItem
+                  v-if="props.torrent?.torrent_info?.enclosure?.startsWith('http')"
+                  variant="plain"
+                  @click="downloadTorrentFile()"
+                >
+                  <template #prepend>
+                    <VIcon icon="mdi-download" />
+                  </template>
+                  <VListItemTitle>下载种子文件</VListItemTitle>
+                </VListItem>
+              </VList>
+            </VMenu>
+          </IconBtn>
+        </div>
+      </template>
+    </VListItem>
+    <AddDownloadDialog
+      v-if="addDownloadDialog"
+      v-model="addDownloadDialog"
+      :title="`${media?.title_year || meta?.name} ${meta?.season_episode}`"
+      :media="media"
+      :torrent="torrent"
+      @done="addDownloadSuccess"
+      @error="addDownloadError"
+      @close="addDownloadDialog = false"
+    />
+  </div>
 </template>

src/components/cards/UserCard.vue

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

src/components/dialog/AddDownloadDialog.vue

@@ -0,0 +1,197 @@
+<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="45rem" scrollable>
+    <VCard>
+      <VCardItem>
+        <VCardTitle v-if="title">{{ torrent?.site_name }} - {{ title }}</VCardTitle>
+        <VCardTitle v-else>确认下载</VCardTitle>
+        <DialogCloseBtn @click="emit('close')" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <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>
+            <template #prepend>
+              <VIcon icon="mdi-subtitles-outline"></VIcon>
+            </template>
+            <VListItemTitle>
+              <span class="text-body-1 whitespace-break-spaces">{{ torrent?.description }}</span>
+            </VListItemTitle>
+          </VListItem>
+          <VListItem>
+            <template #prepend>
+              <VIcon icon="mdi-database"></VIcon>
+            </template>
+            <VListItemTitle>
+              <span class="text-body-1">
+                <VChip variant="tonal" label>
+                  {{ formatFileSize(torrent?.size || 0) }}
+                </VChip>
+              </span>
+            </VListItemTitle>
+          </VListItem>
+        </VList>
+        <VRow>
+          <VCol cols="12" md="4">
+            <VSelect
+              v-model="selectedDownloader"
+              :items="downloaderOptions"
+              label="指定下载器"
+              variant="underlined"
+              placeholder="留空默认"
+            />
+          </VCol>
+          <VCol cols="12" md="8">
+            <VCombobox
+              v-model="selectedDirectory"
+              :items="targetDirectories"
+              label="指定保存目录"
+              placeholder="留空自动匹配"
+              variant="underlined"
+            />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <VCardText class="text-center">
+        <VBtn
+          variant="elevated"
+          :disabled="loading"
+          @click="addDownload"
+          :prepend-icon="icon"
+          class="px-5"
+          size="large"
+        >
+          {{ buttonText }}
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/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

@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import QrcodeVue from 'qrcode.vue'
+import api from '@/api'
+
+// 定义输入
+const props = 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 text = ref('请用阿里云盘 App 扫码')
+
+// 提醒类型
+const alertType = ref<'success' | 'info' | 'error' | 'warning' | undefined>('info')
+
+// timeout定时器
+let timeoutTimer: NodeJS.Timeout | undefined = undefined
+
+// 完成
+async function handleDone() {
+  clearTimeout(timeoutTimer)
+  if (props.conf?.refreshToken) {
+    await savaAliPanConfig()
+  }
+  emit('done')
+}
+
+// 调用/aliyun/qrcode api生成二维码
+async function getQrcode() {
+  try {
+    const result: { [key: string]: any } = await api.get('/storage/qrcode/alipan')
+    if (result.success && result.data) {
+      qrCodeContent.value = result.data.codeContent
+      ck.value = result.data.ck
+      t.value = result.data.t
+    } else {
+      text.value = result.message
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+// 调用/aliyun/check api验证二维码
+async function checkQrcode() {
+  try {
+    const result: { [key: string]: any } = await api.get('/storage/check/alipan', {
+      params: { ck: ck.value, t: t.value },
+    })
+    if (result.success && result.data) {
+      const qrCodeStatus = result.data.qrCodeStatus
+      text.value = result.data.tip
+      if (qrCodeStatus == 'CONFIRMED') {
+        // 已确认完成
+        alertType.value = 'success'
+        handleDone()
+      } else if (qrCodeStatus == 'NEW' || qrCodeStatus == 'SCANED') {
+        alertType.value = 'info'
+        // 新建、待扫码
+        clearTimeout(timeoutTimer)
+        timeoutTimer = setTimeout(checkQrcode, 3000)
+      } else {
+        // 过期或者已取消
+        alertType.value = 'error'
+      }
+    } else {
+      alertType.value = 'error'
+      text.value = result.message
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+// 保存cookie设置
+async function savaAliPanConfig() {
+  try {
+    await api.post(`storage/save/alipan`, props.conf)
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+onMounted(async () => {
+  await getQrcode()
+  timeoutTimer = setTimeout(checkQrcode, 3000)
+})
+
+onUnmounted(() => {
+  if (timeoutTimer) clearTimeout(timeoutTimer)
+})
+</script>
+
+<template>
+  <VDialog width="40rem" scrollable max-height="85vh">
+    <VCard title="阿里云盘登录" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText class="pt-2 flex flex-col items-center">
+        <div class="my-6 shadow-lg rounded text-center p-3 border">
+          <QrcodeVue class="mx-auto" :value="qrCodeContent" :size="200" />
+        </div>
+        <VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
+          <template #prepend />
+        </VAlert>
+      </VCardText>
+      <VCardText>
+        <VRow>
+          <VCol class="mt-2">
+            <VTextField label="自定义refreshToken" v-model="props.conf.refreshToken" outlined dense />
+          </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/ForkSubscribeDialog.vue

@@ -0,0 +1,146 @@
+<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(['close', 'done'])
+
+// 从 provide 中获取全局设置
+const globalSettings: any = inject('globalSettings')
+
+// 提示框
+const $toast = useToast()
+
+// 处理中
+const processing = ref(false)
+
+// 计算海报图片地址
+const posterUrl = computed(() => {
+  const url = props.media?.poster
+  // 使用图片缓存
+  if (globalSettings.GLOBAL_IMAGE_CACHE && url)
+    return `${import.meta.env.VITE_API_BASE_URL}system/cache/image?url=${encodeURIComponent(url)}`
+  return url
+})
+
+// 查看媒体详情
+async function viewMediaDetail() {
+  router.push({
+    path: '/media',
+    query: {
+      mediaid: `${props.media?.tmdbid ? `tmdb:${props.media?.tmdbid}` : `douban:${props.media?.doubanid}`}`,
+      type: props.media?.type,
+    },
+  })
+}
+
+// 复用订阅
+async function 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('done', result.data.id)
+    } else {
+      $toast.error(`${props.media?.share_title} 添加订阅失败：${result.message}！`)
+    }
+  } catch (error) {
+    console.error(error)
+  } finally {
+    processing.value = false
+    doneNProgress()
+  }
+}
+</script>
+<template>
+  <VDialog max-width="40rem">
+    <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">
+                  {{ props.media?.share_title }}
+                </VCardTitle>
+                <VCardSubtitle
+                  class="text-center text-md-left break-words whitespace-break-spaces line-clamp-2 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">
+                    <VListItemTitle
+                      class="text-center text-md-left break-words whitespace-break-spaces line-clamp-10 overflow-hidden text-ellipsis ..."
+                    >
+                      <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">
+                  <VBtn
+                    color="primary"
+                    :disabled="processing"
+                    @click="doFork"
+                    prepend-icon="mdi-heart"
+                    :loading="processing"
+                  >
+                    添加到我的订阅
+                  </VBtn>
+                  <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,43 +2,32 @@
 // 输入参数
 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"
-  >
-    <VCard
-      :title="props.title"
-      class="rounded-t"
-    >
+  <VDialog width="40rem" scrollable max-height="85vh" persistent>
+    <VCard :title="props.title" class="rounded-t">
       <DialogCloseBtn @click="emit('close')" />
       <VCardText class="pt-2">
         <VTextarea v-model="codeString" />
       </VCardText>
       <VCardActions>
         <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="handleImport"
-        >
-          导入
-        </VBtn>
+        <VBtn variant="elevated" @click="handleImport" prepend-icon="mdi-import" class="px-5 me-3"> 导入 </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>

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

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

src/components/dialog/ProgressDialog.vue

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

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,23 +1,36 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
-import TmdbSelector from '../misc/TmdbSelector.vue'
-import store from '@/store'
+import MediaIdSelector from '../misc/MediaIdSelector.vue'
 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, TransferDirectoryConf, TransferForm } from '@/api/types'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const props = defineProps({
-  path: String,
-  target: String,
   logids: Array<number>,
+  items: Array<FileItem>,
+  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'])
 
-// 生成1到50季的下拉框选项
+// 生成1到100季的下拉框选项
 const seasonItems = ref(
-  Array.from({ length: 51 }, (_, i) => i).map(item => ({
+  Array.from({ length: 101 }, (_, i) => i).map(item => ({
     title: `第 ${item} 季`,
     value: item,
   })),
@@ -27,7 +40,7 @@ const seasonItems = ref(
 const $toast = useToast()
 
 // TMDB选择对话框
-const tmdbSelectorDialog = ref(false)
+const mediaSelectorDialog = ref(false)
 
 // 加载进度SSE
 const progressEventSource = ref<EventSource>()
@@ -36,43 +49,117 @@ const progressEventSource = ref<EventSource>()
 const progressDialog = ref(false)
 
 // 整理进度文本
-const progressText = ref('请稍候 ...')
+const progressText = ref('正在处理 ...')
 
 // 整理进度
 const progressValue = ref(0)
 
-// 文件转移表单
-const transferForm = reactive({
+// 标题
+const dialogTitle = computed(() => {
+  if (props.items) {
+    if (props.items.length > 1) return `整理 - 共 ${props.items.length} 项`
+    return `整理 - ${props.items[0].path}`
+  } else if (props.logids) {
+    return `整理 - 共 ${props.logids.length} 项`
+  }
+  return '手动整理'
+})
+
+// 禁用指定集数
+const disableEpisodeDetail = computed(() => {
+  if (props.items) {
+    return !(props.items.length === 1 && props.items[0].type !== 'dir')
+  }
+})
+
+// 表单
+const transferForm = reactive<TransferForm>({
+  fileitem: {} as FileItem,
   logid: 0,
-  path: '',
-  target: props.target ?? '',
-  tmdbid: 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,
 })
 
-watchEffect(() => {
-  transferForm.path = props.path ?? ''
-  transferForm.target = props.target ?? ''
+// 所有媒体库目录
+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 libraryDirectories = directories.value.map(item => item.library_path)
+  return [...new Set(libraryDirectories)]
 })
 
+// 监听目的路径变化，配置默认值
+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.onmessage = (event) => {
+  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) {
       progressText.value = progress.text
@@ -87,137 +174,141 @@ function stopLoadingProgress() {
 }
 
 // 整理文件
-// eslint-disable-next-line sonarjs/cognitive-complexity
-async function transfer() {
-  if (!props.logids && !props.path)
-    return
+async function transfer(background: boolean = false) {
+  if (!props.logids && !props.items) return
 
   // 显示进度条
   progressDialog.value = true
-  // 开始监听进度
-  startLoadingProgress()
 
-  if (props.path) {
-    // 文件整理
-    try {
-      const result: { [key: string]: any } = await api.post('transfer/manual', {}, {
-        params: transferForm,
-      })
-      // 显示结果
-      if (result.success)
-        $toast.success(`${props.path} 整理完成！`)
+  if (!background) {
+    // 开始监听进度
+    startLoadingProgress()
+  }
 
-      else
-        $toast.error(`${props.path} 整理失败：${result.message}！`)
-    }
-    catch (e) {
-      console.log(e)
+  // 文件整理
+  if (props.items) {
+    for (const item of props.items) {
+      await handleTransfer(item, background)
     }
   }
-  else if (props.logids) {
-    // 日志整理
+
+  // 日志整理
+  if (props.logids) {
     for (const logid of props.logids) {
-      transferForm.logid = logid
-      try {
-        const result: { [key: string]: any } = await api.post('transfer/manual', {}, {
-          params: transferForm,
-        })
-        if (!result.success)
-          $toast.error(`历史记录 ${logid} 重新整理失败：${result.message}！`)
-      }
-      catch (e) {
-        console.log(e)
-      }
+      await handleTransferLog(logid, background)
     }
   }
 
-  // 停止监听进度
-  stopLoadingProgress()
+  if (!background) {
+    // 停止监听进度
+    stopLoadingProgress()
+  }
+
   // 关闭进度条
   progressDialog.value = false
   // 重新加载
   emit('done')
 }
+
+onMounted(() => {
+  loadDirectories()
+})
+
+onUnmounted(() => {
+  stopLoadingProgress()
+})
 </script>
 
 <template>
-  <VDialog
-    scrollable
-    max-width="60rem"
-  >
-    <VCard
-      :title="`${props.path ? `整理 - ${props.path}` : `整理 - 共 ${props.logids?.length} 条记录`}`"
-      class="rounded-t"
-    >
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
+    <VCard :title="dialogTitle" class="rounded-t">
       <DialogCloseBtn @click="emit('close')" />
-      <VCardText class="pt-2">
+      <VDivider />
+      <VCardText>
         <VForm @submit.prevent="() => {}">
           <VRow>
-            <VCol
-              cols="12"
-              md="8"
-            >
-              <VTextField
-                v-model="transferForm.target"
-                label="目的路径"
+            <VCol cols="12" md="6">
+              <VSelect
+                v-model="transferForm.target_storage"
+                :items="storageOptions"
+                label="目的存储"
                 placeholder="留空自动"
-                hint="留空将自动整理到媒体库目录"
+                hint="整理目的存储"
+                persistent-hint
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="6">
               <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' },
-                ]"
+                :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_path"
+                :items="targetDirectories"
+                label="目的路径"
+                placeholder="留空自动"
+                hint="整理目的路径，留空将自动匹配"
+                persistent-hint
               />
             </VCol>
           </VRow>
           <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VSelect
                 v-model="transferForm.type_name"
                 label="类型"
-                :items="[{ title: '自动', value: '' }, { title: '电影', value: '电影' }, { title: '电视剧', value: '电视剧' }]"
+                :items="[
+                  { title: '自动', value: '' },
+                  { title: '电影', value: '电影' },
+                  { title: '电视剧', value: '电视剧' },
+                ]"
+                hint="文件的媒体类型"
+                persistent-hint
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VTextField
+                v-if="mediaSource === 'themoviedb'"
                 v-model="transferForm.tmdbid"
                 :disabled="transferForm.type_name === ''"
-                label="TMDBID"
+                label="TheMovieDb编号"
                 placeholder="留空自动识别"
                 :rules="[numberValidator]"
                 append-inner-icon="mdi-magnify"
-                hint="点击图标按名称搜索，留空将自动重新识别"
-                @click:append-inner="tmdbSelectorDialog = true"
+                hint="按名称查询媒体编号，留空自动识别"
+                persistent-hint
+                @click:append-inner="mediaSelectorDialog = true"
+              />
+              <VTextField
+                v-else
+                v-model="transferForm.doubanid"
+                :disabled="transferForm.type_name === ''"
+                label="豆瓣编号"
+                placeholder="留空自动识别"
+                :rules="[numberValidator]"
+                append-inner-icon="mdi-magnify"
+                hint="按名称查询媒体编号，留空自动识别"
+                persistent-hint
+                @click:append-inner="mediaSelectorDialog = true"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VSelect
                 v-show="transferForm.type_name === '电视剧'"
                 v-model.number="transferForm.season"
                 label="季"
                 :items="seasonItems"
+                hint="指定季数"
+                persistent-hint
               />
             </VCol>
           </VRow>
@@ -227,15 +318,18 @@ async function transfer() {
                 v-model="transferForm.episode_format"
                 label="集数定位"
                 placeholder="使用{ep}定位集数"
-                hint="使用{ep}定位文件名中的集数部分，其余相同部分直接填写，不同部分使用{a}进行忽略，例如：{a}葬送的芙莉莲_Sousou no Frieren 第{ep}话{b}"
+                hint="使用{ep}定位文件名中的集数部分以辅助识别"
+                persistent-hint
               />
             </VCol>
             <VCol cols="12" md="4">
               <VTextField
                 v-model="transferForm.episode_detail"
+                :disabled="disableEpisodeDetail"
                 label="指定集数"
                 placeholder="起始集,终止集，如1或1,2"
-                hint="直接指定集数或者范围，格式：起始集,终止集，如1或1,2"
+                hint="指定集数或范围，如1或1,2"
+                persistent-hint
               />
             </VCol>
             <VCol cols="12" md="4">
@@ -243,15 +337,17 @@ async function transfer() {
                 v-model="transferForm.episode_part"
                 label="指定Part"
                 placeholder="如part1"
-                hint="指定集数的Part，如part1"
+                hint="指定Part，如part1"
+                persistent-hint
               />
             </VCol>
             <VCol cols="12" md="4">
               <VTextField
-                v-model.number="transferForm.episode_offset"
+                v-model="transferForm.episode_offset"
                 label="集数偏移"
                 placeholder="如-10"
-                hint="对集数进行偏移运算，如-10表示文件名中的集数减10为整理后集数"
+                hint="集数偏移运算，如-10或EP*2"
+                persistent-hint
               />
             </VCol>
             <VCol cols="12" md="4">
@@ -260,55 +356,72 @@ async function transfer() {
                 label="最小文件大小（MB）"
                 :rules="[numberValidator]"
                 placeholder="0"
-                hint="最小文件大小，小于此大小的文件将被忽略不进行整理"
+                hint="只整理大于最小文件大小的文件"
+                persistent-hint
+              />
+            </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"
+                label="刮削元数据"
+                hint="整理完成后自动刮削元数据"
+                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>
-        <VBtn depressed @click="emit('close')">
-          取消
-        </VBtn>
+      <VCardActions class="pt-3">
         <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="transfer"
-        >
-          开始整理
+        <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>
     <!-- 手动整理进度框 -->
-    <VDialog
-      v-model="progressDialog"
-      :scrim="false"
-      width="25rem"
-    >
-      <VCard
-        color="primary"
-      >
-        <VCardText class="text-center">
-          {{ progressText }}
-          <VProgressLinear
-            v-if="progressValue"
-            color="white"
-            class="mb-0 mt-1"
-            :model-value="progressValue"
-          />
-        </VCardText>
-      </VCard>
-    </VDialog>
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" :value="progressValue" />
     <!-- TMDB ID搜索框 -->
-    <VDialog
-      v-model="tmdbSelectorDialog"
-      width="40rem"
-      scrollable
-      max-height="85vh"
-    >
-      <TmdbSelector
+    <VDialog v-model="mediaSelectorDialog" width="40rem" scrollable max-height="85vh">
+      <MediaIdSelector
+        v-if="mediaSource === 'themoviedb'"
         v-model="transferForm.tmdbid"
-        @close="tmdbSelectorDialog = false"
+        @close="mediaSelectorDialog = false"
+        :type="mediaSource"
+      />
+      <MediaIdSelector
+        v-else
+        v-model="transferForm.doubanid"
+        @close="mediaSelectorDialog = false"
+        :type="mediaSource"
       />
     </VDialog>
   </VDialog>

src/components/dialog/SiteAddEditDialog.vue

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

src/components/dialog/SiteCookieUpdateDialog.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import api from '@/api'
+import { Site } from '@/api/types'
+import { requiredValidator } from '@/@validators'
+import { useToast } from 'vue-toast-notification'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
+
+// 输入参数
+const cardProps = defineProps({
+  site: Object as PropType<Site>,
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'done'])
+
+// 提示框
+const $toast = useToast()
+
+// 用户名密码表单
+const userPwForm = ref({
+  username: '',
+  password: '',
+  code: '',
+})
+
+// 密码输入
+const isPasswordVisible = ref(false)
+
+// 更新按钮可用性
+const updateButtonDisable = ref(false)
+
+// 进度条
+const progressDialog = ref(false)
+
+// 进度文本
+const progressText = ref('请稍候 ...')
+
+// 调用API，更新站点Cookie UA
+async function updateSiteCookie() {
+  try {
+    if (!userPwForm.value.username || !userPwForm.value.password) return
+
+    // 更新按钮状态
+    updateButtonDisable.value = true
+
+    progressDialog.value = true
+    progressText.value = `正在更新 ${cardProps.site?.name} Cookie & UA ...`
+
+    const result: { [key: string]: any } = await api.get(`site/cookie/${cardProps.site?.id}`, {
+      params: {
+        username: userPwForm.value.username,
+        password: userPwForm.value.password,
+        code: userPwForm.value.code,
+      },
+    })
+
+    if (result.success) {
+      $toast.success(`${cardProps.site?.name} 更新Cookie & UA 成功！`)
+      emit('done')
+    } else $toast.error(`${cardProps.site?.name} 更新失败：${result.message}`)
+
+    progressDialog.value = false
+    updateButtonDisable.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
+</script>
+<template>
+  <VDialog max-width="50rem">
+    <!-- Dialog Content -->
+    <VCard title="更新站点Cookie & UA">
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText>
+        <VForm @submit.prevent="() => {}">
+          <VRow>
+            <VCol cols="12" md="4">
+              <VTextField v-model="userPwForm.username" label="用户名" :rules="[requiredValidator]" />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-model="userPwForm.password"
+                label="密码"
+                :type="isPasswordVisible ? 'text' : 'password'"
+                :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                :rules="[requiredValidator]"
+                @click:append-inner="isPasswordVisible = !isPasswordVisible"
+                @keydown.enter="updateSiteCookie"
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField v-model="userPwForm.code" label="两步验证" />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          variant="elevated"
+          @click="updateSiteCookie"
+          :disabled="updateButtonDisable"
+          prepend-icon="mdi-refresh"
+          class="px-5"
+        >
+          开始更新
+        </VBtn>
+      </VCardActions>
+    </VCard>
+    <!-- 进度框 -->
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
+  </VDialog>
+</template>

src/components/dialog/SiteResourceDialog.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { Site } from '@/api/types'
+import { useDisplay } from 'vuetify'
+import api from '@/api'
+import type { TorrentInfo } from '@/api/types'
+import { formatFileSize } from '@core/utils/formatters'
+import AddDownloadDialog from '../dialog/AddDownloadDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  site: Object as PropType<Site>,
+})
+
+// 注册事件
+const emit = defineEmits(['close'])
+
+// 数据列表
+const resourceDataList = ref<TorrentInfo[]>([])
+
+// 搜索
+const resourceSearch = ref('')
+
+// 总条数
+const resourceTotalItems = ref(0)
+
+// 每页条数
+const resourceItemsPerPage = ref(25)
+
+// 加载状态
+const resourceLoading = ref(false)
+
+// 种子元数据
+const torrent = ref<TorrentInfo>()
+
+// 资源浏览表头
+const resourceHeaders = [
+  { title: '标题', key: 'title', sortable: false },
+  { title: '时间', key: 'pubdate', sortable: true },
+  { title: '大小', key: 'size', sortable: true },
+  { title: '做种', key: 'seeders', sortable: true },
+  { title: '下载', key: 'peers', sortable: true },
+  { title: '', key: 'actions', sortable: false },
+]
+
+// 打开种子详情页面
+function openTorrentDetail(page_url: string) {
+  window.open(page_url, '_blank')
+}
+
+// 下载种子文件
+async function downloadTorrentFile(enclosure: string) {
+  window.open(enclosure, '_blank')
+}
+
+// 调用API，查询站点资源
+async function getResourceList() {
+  resourceLoading.value = true
+  try {
+    resourceDataList.value = await api.get(`site/resource/${props.site?.id}`)
+    resourceLoading.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 促销Chip类
+function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
+  if (downloadVolume === 0) return 'text-white bg-lime-500'
+  else if (downloadVolume < 1) return 'text-white bg-green-500'
+  else if (uploadVolume !== 1) return 'text-white bg-sky-500'
+  else return 'text-white bg-gray-500'
+}
+
+// 添加下载
+async function addDownload(_torrent: any) {
+  torrent.value = _torrent
+  addDownloadDialog.value = true
+}
+
+// 添加下载对话框
+const addDownloadDialog = ref(false)
+
+// 添加下载成功
+function addDownloadSuccess(url: string) {
+  addDownloadDialog.value = false
+}
+
+// 添加下载失败
+function addDownloadError(error: string) {
+  addDownloadDialog.value = false
+}
+
+// 装载时查询站点图标
+onMounted(() => {
+  getResourceList()
+})
+</script>
+<template>
+  <VDialog max-width="80rem" scrollable z-index="1010" :fullscreen="!display.mdAndUp.value">
+    <VCard :title="`浏览 - ${props.site?.name}`">
+      <DialogCloseBtn @click="emit('close')" />
+      <VDivider />
+      <VCardText class="pt-2">
+        <VDataTable
+          v-model:items-per-page="resourceItemsPerPage"
+          :headers="resourceHeaders"
+          :items="resourceDataList"
+          :items-length="resourceTotalItems"
+          :search="resourceSearch"
+          :loading="resourceLoading"
+          density="compact"
+          item-value="title"
+          return-object
+          fixed-header
+          hover
+          items-per-page-text="每页条数"
+          page-text="{0}-{1} 共 {2} 条"
+          loading-text="加载中..."
+        >
+          <template #item.title="{ item }">
+            <a href="javascript:void(0)" @click.stop="addDownload(item)">
+              <div class="text-high-emphasis pt-1">
+                {{ item.title }}
+              </div>
+              <div class="text-sm my-1">
+                {{ item.description }}
+              </div>
+              <VChip v-if="item.hit_and_run" variant="elevated" size="small" class="me-1 mb-1 text-white bg-black">
+                H&R
+              </VChip>
+              <VChip v-if="item.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
+                {{ item.freedate_diff }}
+              </VChip>
+              <VChip
+                v-for="(label, index) in item.labels"
+                :key="index"
+                variant="elevated"
+                size="small"
+                color="primary"
+                class="me-1 mb-1"
+              >
+                {{ label }}
+              </VChip>
+              <VChip
+                v-if="item.downloadvolumefactor !== 1 || item.uploadvolumefactor !== 1"
+                :class="getVolumeFactorClass(item.downloadvolumefactor, item.uploadvolumefactor)"
+                variant="elevated"
+                size="small"
+                class="me-1 mb-1"
+              >
+                {{ item.volume_factor }}
+              </VChip>
+            </a>
+          </template>
+          <template #item.pubdate="{ item }">
+            <div>{{ item.date_elapsed }}</div>
+            <div class="text-sm">
+              {{ item.pubdate }}
+            </div>
+          </template>
+          <template #item.size="{ item }">
+            <div class="text-nowrap whitespace-nowrap">
+              {{ formatFileSize(item.size) }}
+            </div>
+          </template>
+          <template #item.seeders="{ item }">
+            <div>{{ item.seeders }}</div>
+          </template>
+          <template #item.peers="{ item }">
+            <div>{{ item.peers }}</div>
+          </template>
+          <template #item.actions="{ item }">
+            <div class="me-n3">
+              <IconBtn>
+                <VIcon icon="mdi-dots-vertical" />
+                <VMenu activator="parent" close-on-content-click>
+                  <VList>
+                    <VListItem variant="plain" @click="openTorrentDetail(item.page_url || '')">
+                      <template #prepend>
+                        <VIcon icon="mdi-information" />
+                      </template>
+                      <VListItemTitle>查看详情</VListItemTitle>
+                    </VListItem>
+                    <VListItem
+                      v-if="item.enclosure?.startsWith('http')"
+                      variant="plain"
+                      @click="downloadTorrentFile(item.enclosure)"
+                    >
+                      <template #prepend>
+                        <VIcon icon="mdi-download" />
+                      </template>
+                      <VListItemTitle>下载种子文件</VListItemTitle>
+                    </VListItem>
+                  </VList>
+                </VMenu>
+              </IconBtn>
+            </div>
+          </template>
+          <template #no-data> 没有数据 </template>
+        </VDataTable>
+      </VCardText>
+    </VCard>
+    <!-- 添加下载对话框 -->
+    <AddDownloadDialog
+      v-if="addDownloadDialog"
+      v-model="addDownloadDialog"
+      :torrent="torrent"
+      @done="addDownloadSuccess"
+      @error="addDownloadError"
+      @close="addDownloadDialog = false"
+    />
+  </VDialog>
+</template>
+
+<style lang="scss" scoped>
+.v-table th {
+  white-space: nowrap;
+}
+</style>

src/components/dialog/SiteUserDataDialog.vue

@@ -0,0 +1,461 @@
+<script lang="ts" setup>
+import type { Site, SiteUserData } from '@/api/types'
+import api from '@/api'
+import { useDisplay, useTheme } from 'vuetify'
+import { formatFileSize } from '@/@core/utils/formatters'
+import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  site: Object as PropType<Site>,
+})
+
+// 注册事件
+const emit = defineEmits(['close'])
+
+// 进度框
+const progressDialog = ref(false)
+
+const vuetifyTheme = useTheme()
+
+const currentTheme = controlledComputed(
+  () => vuetifyTheme.name.value,
+  () => vuetifyTheme.current.value.colors,
+)
+
+// 站点数据列表
+const siteDatas = ref<SiteUserData[]>([])
+
+// 最新一天的数据
+const siteData = computed(() => siteDatas.value[siteDatas.value.length - 1])
+
+// 站点数据列表中的上传量、下载量数据生成图形使用的数据
+const historySeries = computed(() => {
+  return [
+    {
+      name: '上传量',
+      data: siteDatas.value.map(item => Math.round((item.upload ?? 0) / 1024 / 1024 / 1024)),
+    },
+    {
+      name: '下载量',
+      data: siteDatas.value.map(item => Math.round((item.download ?? 0) / 1024 / 1024 / 1024)),
+    },
+  ]
+})
+
+// 图形选项
+const historyChartOptions = computed(() => {
+  return {
+    chart: {
+      type: 'area',
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+      animations: { enabled: true },
+      dataLabels: {
+        enabled: true,
+      },
+      zoom: {
+        autoScaleYaxis: true,
+      },
+    },
+    tooltip: {
+      enabled: true,
+      tooltip: {
+        x: {
+          format: 'dd MMM yyyy',
+        },
+      },
+    },
+    grid: {
+      xaxis: {
+        lines: { show: false },
+      },
+      yaxis: {
+        title: {
+          text: 'GB',
+        },
+        lines: { show: true },
+      },
+    },
+    stroke: {
+      width: 3,
+      lineCap: 'butt',
+      curve: 'smooth',
+    },
+    colors: [currentTheme.value.success, currentTheme.value.warning],
+    markers: {
+      size: 0,
+      style: 'hollow',
+    },
+    xaxis: {
+      type: 'category',
+      categories: siteDatas.value.map(item => item.updated_day),
+      labels: {
+        show: true,
+        formatter: function (val: string) {
+          return new Date(val).toLocaleDateString('zh-CN')
+        },
+      },
+    },
+    yaxis: {
+      title: {
+        text: 'GB',
+      },
+      labels: {
+        formatter: function (val: number) {
+          return val.toLocaleString()
+        },
+      },
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        opacityFrom: 0.5,
+        opacityTo: 0.7,
+        stops: [0, 100],
+      },
+    },
+  }
+})
+
+// 做种分布列，seeding_info的格式为[[x, y], [x, y], ...]，x为做种数，y为做种体积，做种体积需要转换为GB
+const seedingSeries = computed(() => {
+  return [
+    {
+      name: '体积',
+      data: siteData.value?.seeding_info?.map(item => [item[0] ?? 0, Math.round((item[1] ?? 0) / 1024 / 1024 / 1024)]),
+    },
+  ]
+})
+
+// 做种分布图形选项
+const seedingChartOptions = computed(() => {
+  return {
+    chart: {
+      type: 'scatter',
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+      animations: { enabled: true },
+      zoom: {
+        autoScaleYaxis: true,
+      },
+    },
+    tooltip: {
+      enabled: true,
+      x: {
+        formatter: function (val: number) {
+          return '数量：' + val.toLocaleString()
+        },
+      },
+    },
+    grid: {
+      xaxis: {
+        lines: { show: true },
+      },
+      yaxis: {
+        lines: { show: true },
+      },
+    },
+    colors: [currentTheme.value.primary],
+    xaxis: {
+      type: 'numeric',
+      labels: {
+        show: true,
+        formatter: function (val: number) {
+          return Math.round(val).toLocaleString()
+        },
+      },
+      title: {
+        text: '数量',
+      },
+      tickAmount: 10,
+    },
+    yaxis: {
+      title: {
+        text: 'GB',
+      },
+      labels: {
+        formatter: function (val: number) {
+          return val.toLocaleString() + ' GB'
+        },
+      },
+    },
+  }
+})
+
+// 根据传入属性，计算列表数据中第一条与第二条的差值，如果没有第二条则差值为全部
+const diffData: { [key: string]: any } = computed(() => {
+  if (siteDatas.value.length < 2) {
+    return siteData.value
+  }
+  const first = siteDatas.value[siteDatas.value.length - 1]
+  const second = siteDatas.value[siteDatas.value.length - 2]
+  return {
+    bonus: (first.bonus ?? 0) - (second.bonus ?? 0),
+    ratio: (first.ratio ?? 0) - (second.ratio ?? 0),
+    upload: (first.upload ?? 0) - (second.upload ?? 0),
+    download: (first.download ?? 0) - (second.download ?? 0),
+    seeding: (first.seeding ?? 0) - (second.seeding ?? 0),
+    seeding_size: (first.seeding_size ?? 0) - (second.seeding_size ?? 0),
+  }
+})
+
+// 格式化差值
+function getDiffString(diff: number | undefined, format: boolean = true) {
+  if (diff === undefined) {
+    return '0'
+  }
+  if (format) {
+    return diff >= 0 ? `+${diff.toLocaleString()}` : diff.toLocaleString()
+  }
+  return diff >= 0 ? `+${diff}` : diff
+}
+
+// 根据差值的正负，返回不同的样式
+function getDiffClass(diff: number | undefined) {
+  if (diff === undefined) {
+    return ''
+  }
+  if (diff == 0) {
+    return ''
+  }
+  return diff > 0 ? 'text-success' : 'text-error'
+}
+
+// 查询站点用户数据
+async function fetchSiteUserData() {
+  try {
+    const result: { [key: string]: any } = await api.get(`site/userdata/${props.site?.id}`)
+    if (result.success) {
+      siteDatas.value = result.data.sort((a: { updated_day: any }, b: { updated_day: any }) =>
+        (a.updated_day || '').localeCompare(b.updated_day || ''),
+      )
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 刷新站点数据
+async function refreshSiteData() {
+  progressDialog.value = true
+  try {
+    const result: { [key: string]: any } = await api.post(`site/userdata/${props.site?.id}`)
+    if (result.success) {
+      await fetchSiteUserData()
+    }
+  } catch (error) {
+    console.log(error)
+  }
+  progressDialog.value = false
+}
+
+onBeforeMount(async () => {
+  await fetchSiteUserData()
+})
+</script>
+
+<template>
+  <VDialog scrollable eager max-width="80rem" :fullscreen="!display.mdAndUp.value">
+    <VCard class="rounded-t">
+      <VCardItem>
+        <VCardTitle
+          >{{ `数据 - ${props.site?.name}` }}
+          <IconBtn @click.stop="refreshSiteData" color="info"><VIcon icon="mdi-refresh" /></IconBtn>
+        </VCardTitle>
+        <DialogCloseBtn @click="emit('close')" />
+      </VCardItem>
+      <VDivider />
+      <VCardText class="pt-5">
+        <VRow class="match-height">
+          <!-- 用户信息 -->
+          <VCol cols="12" md="3">
+            <VCard>
+              <VCardText class="d-flex align-center">
+                <div class="d-flex justify-space-between" style="inline-size: 100%">
+                  <div class="d-flex flex-column gap-y-1">
+                    <span class="text-base">用户等级</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
+                      {{ siteData?.user_level || '无' }}
+                    </h5>
+                  </div>
+                  <VAvatar variant="tonal" size="42" rounded>
+                    <VIcon icon="mdi-account"></VIcon>
+                  </VAvatar>
+                </div>
+              </VCardText>
+            </VCard>
+          </VCol>
+          <!-- 积分 -->
+          <VCol cols="12" md="3">
+            <VCard>
+              <VCardText class="d-flex align-center">
+                <div class="d-flex justify-space-between" style="inline-size: 100%">
+                  <div class="d-flex flex-column gap-y-1">
+                    <span class="text-base">积分</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
+                      {{ siteData?.bonus?.toLocaleString() }}
+                      <span class="text-base font-weight-regular" :class="getDiffClass(diffData?.bonus)">
+                        ({{ getDiffString(diffData?.bonus) }})
+                      </span>
+                    </h5>
+                  </div>
+                  <VAvatar variant="tonal" size="42" rounded>
+                    <VIcon icon="mdi-scoreboard"></VIcon>
+                  </VAvatar>
+                </div>
+              </VCardText>
+            </VCard>
+          </VCol>
+          <!-- 分享率 -->
+          <VCol cols="12" md="3">
+            <VCard>
+              <VCardText class="d-flex align-center">
+                <div class="d-flex justify-space-between" style="inline-size: 100%">
+                  <div class="d-flex flex-column gap-y-1">
+                    <span class="text-base">分享率</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
+                      {{ siteData?.ratio }}
+                      <span class="text-base font-weight-regular" :class="getDiffClass(diffData?.ratio)">
+                        ({{ getDiffString(diffData?.ratio) }})
+                      </span>
+                    </h5>
+                  </div>
+                  <VAvatar variant="tonal" size="42" rounded>
+                    <VIcon icon="mdi-percent"></VIcon>
+                  </VAvatar>
+                </div>
+              </VCardText>
+            </VCard>
+          </VCol>
+          <!-- 总上传量 -->
+          <VCol cols="12" md="3">
+            <VCard>
+              <VCardText class="d-flex align-center">
+                <div class="d-flex justify-space-between" style="inline-size: 100%">
+                  <div class="d-flex flex-column gap-y-1">
+                    <span class="text-base">总上传量</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
+                      {{ formatFileSize(siteData?.upload || 0) }}
+                      <span class="text-base font-weight-regular" :class="getDiffClass(diffData?.upload)">
+                        ({{ formatFileSize(diffData?.upload || 0, 2, true) }})
+                      </span>
+                    </h5>
+                  </div>
+                  <VAvatar variant="tonal" size="42" rounded>
+                    <VIcon icon="mdi-upload"></VIcon>
+                  </VAvatar>
+                </div>
+              </VCardText>
+            </VCard>
+          </VCol>
+          <!-- 总下载量 -->
+          <VCol cols="12" md="3">
+            <VCard>
+              <VCardText class="d-flex align-center">
+                <div class="d-flex justify-space-between" style="inline-size: 100%">
+                  <div class="d-flex flex-column gap-y-1">
+                    <span class="text-base">总下载量</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
+                      {{ formatFileSize(siteData?.download || 0) }}
+                      <span class="text-base font-weight-regular" :class="getDiffClass(diffData?.download)">
+                        ({{ formatFileSize(diffData?.download || 0, 2, true) }})
+                      </span>
+                    </h5>
+                  </div>
+                  <VAvatar variant="tonal" size="42" rounded>
+                    <VIcon icon="mdi-download"></VIcon>
+                  </VAvatar>
+                </div>
+              </VCardText>
+            </VCard>
+          </VCol>
+          <!-- 总做种数 -->
+          <VCol cols="12" md="3">
+            <VCard>
+              <VCardText class="d-flex align-center">
+                <div class="d-flex justify-space-between" style="inline-size: 100%">
+                  <div class="d-flex flex-column gap-y-1">
+                    <span class="text-base">总做种数</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
+                      {{ siteData?.seeding?.toLocaleString() }}
+                      <span class="text-base font-weight-regular" :class="getDiffClass(diffData?.seeding)">
+                        ({{ getDiffString(diffData?.seeding) }})
+                      </span>
+                    </h5>
+                  </div>
+                  <VAvatar variant="tonal" size="42" rounded>
+                    <VIcon icon="mdi-seed"></VIcon>
+                  </VAvatar>
+                </div>
+              </VCardText>
+            </VCard>
+          </VCol>
+          <!-- 总做种体积 -->
+          <VCol cols="12" md="3">
+            <VCard>
+              <VCardText class="d-flex align-center">
+                <div class="d-flex justify-space-between" style="inline-size: 100%">
+                  <div class="d-flex flex-column gap-y-1">
+                    <span class="text-base">总做种体积</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
+                      {{ formatFileSize(siteData?.seeding_size || 0) }}
+                      <span class="text-base font-weight-regular" :class="getDiffClass(diffData?.seeding_size)">
+                        ({{ formatFileSize(diffData?.seeding_size || 0, 2, true) }})
+                      </span>
+                    </h5>
+                  </div>
+                  <VAvatar variant="tonal" size="42" rounded>
+                    <VIcon icon="mdi-database"></VIcon>
+                  </VAvatar>
+                </div>
+              </VCardText>
+            </VCard>
+          </VCol>
+          <!-- 加入时间 -->
+          <VCol cols="12" md="3">
+            <VCard>
+              <VCardText class="d-flex align-center">
+                <div class="d-flex justify-space-between" style="inline-size: 100%">
+                  <div class="d-flex flex-column gap-y-1">
+                    <span class="text-base">加入时间</span>
+                    <h5 class="text-h5 d-flex align-center gap-2 text-wrap">
+                      {{ siteData?.join_at?.split(' ')[0] }}
+                    </h5>
+                  </div>
+                  <VAvatar variant="tonal" size="42" rounded>
+                    <VIcon icon="mdi-calendar"></VIcon>
+                  </VAvatar>
+                </div>
+              </VCardText>
+            </VCard>
+          </VCol>
+        </VRow>
+        <VRow>
+          <VCol>
+            <VCard title="历史流量">
+              <VCardText>
+                <VApexChart type="line" :options="historyChartOptions" :series="historySeries" :height="300" />
+              </VCardText>
+            </VCard>
+          </VCol>
+        </VRow>
+        <VRow>
+          <VCol>
+            <VCard title="做种分布">
+              <VCardText>
+                <VApexChart type="scatter" :options="seedingChartOptions" :series="seedingSeries" :height="300" />
+              </VCardText>
+            </VCard>
+          </VCol>
+        </VRow>
+      </VCardText>
+    </VCard>
+    <!-- 进度框 -->
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" text="正在刷新站点数据..." />
+  </VDialog>
+</template>

src/components/dialog/SubscribeEditDialog.vue

@@ -2,7 +2,16 @@
 import { useToast } from 'vue-toast-notification'
 import { numberValidator } from '@/@validators'
 import api from '@/api'
-import type { Site, Subscribe } from '@/api/types'
+import type { DownloaderConf, FilterRuleGroup, Site, Subscribe, TransferDirectoryConf } from '@/api/types'
+import { useDisplay } from 'vuetify'
+import { useConfirm } from 'vuetify-use-dialog'
+import { VTextarea, VTextField } from 'vuetify/lib/components/index.mjs'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 确认框
+const createConfirm = useConfirm()
 
 // 输入参数
 const props = defineProps({
@@ -14,42 +23,77 @@ const props = defineProps({
 // 定义触发的自定义事件
 const emit = defineEmits(['remove', 'save', 'close'])
 
+const activeTab = ref('basic')
+
 // 站点数据列表
 const siteList = ref<Site[]>([])
 
+// 下载目录列表
+const downloadDirectories = ref<TransferDirectoryConf[]>([])
+
 // 站点选择下载框
 const selectSitesOptions = ref<{ [key: number]: string }[]>([])
 
+// 所有规则组列表
+const filterRuleGroups = ref<FilterRuleGroup[]>([])
+
 // 订阅编辑表单
 const subscribeForm = ref<Subscribe>({
   id: props.subid ?? 0,
-  keyword: '',
-  quality: '',
-  resolution: '',
-  effect: '',
-  include: '',
-  exclude: '',
-  total_episode: 0,
-  start_episode: 0,
-  best_version: 0,
-  search_imdbid: 0,
-  sites: [],
-  type: '',
   name: '',
   year: '',
+  type: '',
   tmdbid: 0,
   state: '',
   last_update: '',
   username: '',
+  sites: [],
+  best_version: undefined,
   current_priority: 0,
-  save_path: '',
+  downloader: '',
   date: '',
-  show_edit_dialog: false
+  show_edit_dialog: false,
 })
 
 // 提示框
 const $toast = useToast()
 
+// 下载器选项
+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 queryFilterRuleGroups() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/UserFilterRuleGroups')
+    filterRuleGroups.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 过滤规则组选择项
+const filterRuleGroupOptions = computed(() => {
+  return filterRuleGroups.value.map(item => ({
+    title: item.name,
+    value: item.name,
+  }))
+})
+
 // 调用API修改订阅
 async function updateSubscribeInfo() {
   try {
@@ -59,10 +103,10 @@ async function updateSubscribeInfo() {
       $toast.success(`${subscribeForm.value.name} 更新成功！`)
       // 通知父组件刷新
       emit('save')
+    } else {
+      $toast.error(`${subscribeForm.value.name} 更新失败：${result.message}！`)
     }
-    else { $toast.error(`${subscribeForm.value.name} 更新失败：${result.message}！`) }
-  }
-  catch (e) {
+  } catch (e) {
     console.log(e)
   }
 }
@@ -71,23 +115,16 @@ async function updateSubscribeInfo() {
 async function saveDefaultSubscribeConfig() {
   try {
     let subscribe_config_url = ''
-    if (props.type === '电影')
-      subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
-    else
-      subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
+    if (props.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
+    else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
 
-    const result: { [key: string]: any } = await api.post(
-      subscribe_config_url,
-      subscribeForm.value)
-    if (result.success)
-      $toast.success(`${props.type}订阅默认规则保存成功`)
-    else
-      $toast.error(`${props.type}订阅默认规则保存失败！`)
+    const result: { [key: string]: any } = await api.post(subscribe_config_url, subscribeForm.value)
+    if (result.success) $toast.success(`${props.type}订阅默认规则保存成功`)
+    else $toast.error(`${props.type}订阅默认规则保存失败！`)
 
     // 通知父组件刷新
     emit('save')
-  }
-  catch (error) {
+  } catch (error) {
     console.log(error)
   }
 }
@@ -96,17 +133,13 @@ async function saveDefaultSubscribeConfig() {
 async function queryDefaultSubscribeConfig() {
   try {
     let subscribe_config_url = ''
-    if (props.type === '电影')
-      subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
-    else
-      subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
+    if (props.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
+    else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
 
     const result: { [key: string]: any } = await api.get(subscribe_config_url)
 
-    if (result.data.value)
-      subscribeForm.value = result.data?.value ?? ''
-  }
-  catch (error) {
+    if (result.data.value) subscribeForm.value = result.data?.value ?? ''
+  } catch (error) {
     console.log(error)
   }
 }
@@ -118,8 +151,7 @@ async function loadSites() {
 
     // 过滤站点，只有启用的站点才显示
     siteList.value = data.filter(item => item.is_active)
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -127,10 +159,9 @@ async function loadSites() {
 // 获取站点列表选择框数据
 async function getSiteList() {
   // 加载订阅站点列表
-  if (!siteList.value.length)
-    await loadSites()
+  if (!siteList.value.length) await loadSites()
 
-  const maps = siteList.value.map((item) => {
+  const maps = siteList.value.map(item => {
     return {
       title: item.name,
       value: item.id,
@@ -143,35 +174,54 @@ async function getSiteList() {
 // 获取订阅信息
 async function getSubscribeInfo() {
   try {
-    const result: Subscribe = await api.get(
-      `subscribe/${props.subid}`,
-    )
+    const result: Subscribe = await api.get(`subscribe/${props.subid}`)
     subscribeForm.value = result
     subscribeForm.value.best_version = subscribeForm.value.best_version === 1
     subscribeForm.value.search_imdbid = subscribeForm.value.search_imdbid === 1
-  }
-  catch (e) {
+  } catch (e) {
     console.log(e)
   }
 }
 
 // 删除订阅
 async function removeSubscribe() {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认取消订阅？`,
+  })
+
+  if (!isConfirmed) return
   try {
-    const result: { [key: string]: any } = await api.delete(
-      `subscribe/${props.subid}`,
-    )
+    const result: { [key: string]: any } = await api.delete(`subscribe/${props.subid}`)
 
     if (result.success) {
+      $toast.success(`订阅 ${subscribeForm.value.name} 已取消！`)
       // 通知父组件刷新
       emit('remove')
     }
-  }
-  catch (e) {
+  } catch (e) {
     console.log(e)
   }
 }
 
+// 查询下载目录
+async function loadDownloadDirectories() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/Directories')
+    if (result.success && result.data?.value) {
+      downloadDirectories.value = result.data.value
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 保存目录下拉框
+const targetDirectories = computed(() => {
+  // 去重后的下载目录
+  return downloadDirectories.value.map(item => item.download_path)
+})
+
 // 质量选择框数据
 const qualityOptions = ref([
   {
@@ -257,185 +307,230 @@ const effectOptions = ref([
 ])
 
 onMounted(() => {
+  queryFilterRuleGroups()
+  loadDownloadDirectories()
   getSiteList()
-  if (props.subid)
-    getSubscribeInfo()
-
-  if (props.default)
-    queryDefaultSubscribeConfig()
+  loadDownloaderSetting()
+  if (props.subid) getSubscribeInfo()
+  if (props.default) queryDefaultSubscribeConfig()
 })
 </script>
 
 <template>
-  <VDialog
-    scrollable
-    max-width="60rem"
-  >
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
     <VCard
-      :title="`${props.default ? `${props.type}默认订阅规则` : `编辑订阅 - ${subscribeForm.name} ${subscribeForm.season ? `第 ${subscribeForm.season} 季` : ''}`}`"
+      :title="`${
+        props.default
+          ? `${props.type}默认订阅规则`
+          : `编辑订阅 - ${subscribeForm.name} ${subscribeForm.season ? `第 ${subscribeForm.season} 季` : ''}`
+      }`"
       class="rounded-t"
     >
-      <VCardText class="pt-2">
+      <VCardText>
         <DialogCloseBtn @click="emit('close')" />
         <VForm @submit.prevent="() => {}">
-          <VRow>
-            <VCol
-              cols="12"
-              md="8"
-            >
-              <VTextField
-                v-if="!props.default"
-                v-model="subscribeForm.keyword"
-                label="搜索关键词"
-                hint="设定搜索关键词后，将使用此关键词搜索站点资源，否则自动使用themoviedb中的名称搜索"
-              />
-            </VCol>
-            <VCol
-              v-if="subscribeForm.type === '电视剧'"
-              cols="12"
-              md="2"
-            >
-              <VTextField
-                v-model="subscribeForm.total_episode"
-                label="总集数"
-                :rules="[numberValidator]"
-                hint="设定剧集的总集数，以应对themoviedb中剧集信息未维护完整，导致提前结束订阅的情况"
-              />
-            </VCol>
-            <VCol
-              v-if="subscribeForm.type === '电视剧'"
-              cols="12"
-              md="2"
-            >
-              <VTextField
-                v-model="subscribeForm.start_episode"
-                label="开始集数"
-                :rules="[numberValidator]"
-                hint="只订阅下载此集数及之后的剧集"
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.quality"
-                label="质量"
-                :items="qualityOptions"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.resolution"
-                label="分辨率"
-                :items="resolutionOptions"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.effect"
-                label="特效"
-                :items="effectOptions"
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="subscribeForm.include"
-                label="包含（关键字、正则式）"
-                hint="支持正则表达式，多个关键字用 | 分隔表示或"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="subscribeForm.exclude"
-                label="排除（关键字、正则式）"
-                hint="支持正则表达式，多个关键字用 | 分隔表示或"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.sites"
-                :items="selectSitesOptions"
-                chips
-                label="订阅站点"
-                multiple
-                hint="只订阅选中的订阅站点，不选则订阅所有可订阅站点"
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol
-              cols="12"
-            >
-              <VTextField
-                v-model="subscribeForm.save_path"
-                label="保存路径"
-                hint="指定该订阅的下载保存路径，留空自动使用设定的下载目录"
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSwitch
-                v-model="subscribeForm.best_version"
-                label="洗版"
-                hint="开启后不管媒体库是否存在，均会根据洗版优先级进行过滤下载，直到下载到了最高优先级的资源为止"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSwitch
-                v-model="subscribeForm.search_imdbid"
-                label="使用 ImdbID 搜索"
-                hint="开启后将使用 ImdbID 搜索资源，搜索结果更精确，但不是所有站点都支持"
-              />
-            </VCol>
-            <VCol v-if="props.default"
-              cols="12"
-              md="4"
-            >
-              <VSwitch
-                v-model="subscribeForm.show_edit_dialog"
-                label="订阅时编辑更多规则"
-                hint="开启后将在添加订阅后弹出编辑订阅的对话框，方便用户编辑订阅规则"
-              />
-            </VCol>
-          </VRow>
+          <VTabs v-model="activeTab" show-arrows>
+            <VTab value="basic">
+              <div>基础</div>
+            </VTab>
+            <VTab value="advance">
+              <div>进阶</div>
+            </VTab>
+          </VTabs>
+          <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
+            <VWindowItem value="basic">
+              <div>
+                <VRow v-if="!props.default">
+                  <VCol cols="12" md="4">
+                    <VTextField
+                      v-model="subscribeForm.keyword"
+                      label="搜索关键词"
+                      hint="指定搜索站点时使用的关键词"
+                      persistent-hint
+                    />
+                  </VCol>
+                  <VCol v-if="subscribeForm.type === '电视剧'" cols="12" md="4">
+                    <VTextField
+                      v-model="subscribeForm.total_episode"
+                      label="总集数"
+                      :rules="[numberValidator]"
+                      hint="剧集总集数"
+                      persistent-hint
+                    />
+                  </VCol>
+                  <VCol v-if="subscribeForm.type === '电视剧'" cols="12" md="4">
+                    <VTextField
+                      v-model="subscribeForm.start_episode"
+                      label="开始集数"
+                      :rules="[numberValidator]"
+                      hint="开始订阅集数"
+                      persistent-hint
+                    />
+                  </VCol>
+                </VRow>
+                <VRow>
+                  <VCol cols="12" md="4">
+                    <VSelect
+                      v-model="subscribeForm.quality"
+                      label="质量"
+                      :items="qualityOptions"
+                      hint="订阅资源质量"
+                      persistent-hint
+                    />
+                  </VCol>
+                  <VCol cols="12" md="4">
+                    <VSelect
+                      v-model="subscribeForm.resolution"
+                      label="分辨率"
+                      :items="resolutionOptions"
+                      hint="订阅资源分辨率"
+                      persistent-hint
+                    />
+                  </VCol>
+                  <VCol cols="12" md="4">
+                    <VSelect
+                      v-model="subscribeForm.effect"
+                      label="特效"
+                      :items="effectOptions"
+                      hint="订阅资源特效"
+                      persistent-hint
+                    />
+                  </VCol>
+                </VRow>
+                <VRow>
+                  <VCol cols="12">
+                    <VSelect
+                      v-model="subscribeForm.sites"
+                      :items="selectSitesOptions"
+                      chips
+                      label="订阅站点"
+                      multiple
+                      clearable
+                      hint="订阅的站点范围，不选使用系统设置"
+                      persistent-hint
+                    />
+                  </VCol>
+                </VRow>
+                <VRow>
+                  <VCol cols="12" md="6">
+                    <VSelect
+                      v-model="subscribeForm.downloader"
+                      :items="downloaderOptions"
+                      label="下载器"
+                      hint="指定该订阅使用的下载器"
+                      persistent-hint
+                    />
+                  </VCol>
+                  <VCol cols="12" md="6">
+                    <VCombobox
+                      v-model="subscribeForm.save_path"
+                      :items="targetDirectories"
+                      label="保存路径"
+                      hint="指定该订阅的下载保存路径，留空自动使用设定的下载目录"
+                      persistent-hint
+                    />
+                  </VCol>
+                </VRow>
+                <VRow>
+                  <VCol cols="12" md="4">
+                    <VSwitch
+                      v-model="subscribeForm.best_version"
+                      label="洗版"
+                      hint="根据洗版优先级进行洗版订阅"
+                      persistent-hint
+                    />
+                  </VCol>
+                  <VCol cols="12" md="4">
+                    <VSwitch
+                      v-model="subscribeForm.search_imdbid"
+                      label="使用 ImdbID 搜索"
+                      hint="开使用 ImdbID 精确搜索资源"
+                      persistent-hint
+                    />
+                  </VCol>
+                  <VCol v-if="props.default" cols="12" md="4">
+                    <VSwitch
+                      v-model="subscribeForm.show_edit_dialog"
+                      label="订阅时编辑更多规则"
+                      hint="添加订阅时显示此编辑订阅对话框"
+                      persistent-hint
+                    />
+                  </VCol>
+                </VRow>
+              </div>
+            </VWindowItem>
+            <VWindowItem value="advance">
+              <div>
+                <VRow>
+                  <VCol cols="12" md="6">
+                    <VTextField
+                      v-model="subscribeForm.include"
+                      label="包含（关键字、正则式）"
+                      hint="包含规则，支持正则表达式"
+                      persistent-hint
+                    />
+                  </VCol>
+                  <VCol cols="12" md="6">
+                    <VTextField
+                      v-model="subscribeForm.exclude"
+                      label="排除（关键字、正则式）"
+                      hint="排除规则，支持正则表达式"
+                      persistent-hint
+                    />
+                  </VCol>
+                </VRow>
+                <VRow>
+                  <VCol cols="12" md="6">
+                    <VSelect
+                      v-model="subscribeForm.filter_groups"
+                      :items="filterRuleGroupOptions"
+                      chips
+                      multiple
+                      clearable
+                      label="优先级规则组"
+                      hint="按选定的过滤规则组对订阅进行过滤"
+                      persistent-hint
+                    />
+                  </VCol>
+                  <VCol cols="12" md="6" v-if="!props.default">
+                    <VTextField
+                      v-model="subscribeForm.media_category"
+                      label="自定义类别"
+                      hint="指定类别名称，留空自动识别"
+                      persistent-hint
+                    />
+                  </VCol>
+                </VRow>
+                <VRow v-if="!props.default">
+                  <VCol cols="12">
+                    <VTextarea
+                      v-model="subscribeForm.custom_words"
+                      label="自定义识别词"
+                      hint="只对该订阅使用的识别词"
+                      persistent-hint
+                      placeholder="屏蔽词
+被替换词 => 替换词
+前定位词 <> 后定位词 >> 集偏移量（EP）
+被替换词 => 替换词 && 前定位词 <> 后定位词 >> 集偏移量（EP）
+其中替换词支持格式：{[tmdbid/doubanid=xxx;type=movie/tv;s=xxx;e=xxx]} 直接指定TMDBID/豆瓣ID识别，其中s、e为季数和集数（可选）"
+                    />
+                  </VCol>
+                </VRow>
+              </div>
+            </VWindowItem>
+          </VWindow>
         </VForm>
       </VCardText>
-
-      <VCardActions>
-        <VBtn v-if="!props.default" color="error" @click="removeSubscribe">
+      <VCardActions class="pt-3">
+        <VBtn v-if="!props.default" color="error" @click="removeSubscribe" variant="outlined" class="me-3">
           取消订阅
         </VBtn>
         <VSpacer />
         <VBtn
-          variant="tonal"
-          @click="`${props.default ? saveDefaultSubscribeConfig() : updateSubscribeInfo()}`"
+          variant="elevated"
+          @click=";`${props.default ? saveDefaultSubscribeConfig() : updateSubscribeInfo()}`"
+          prepend-icon="mdi-content-save"
+          class="px-5"
         >
           保存
         </VBtn>

src/components/dialog/SubscribeFilesDialog.vue

@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import api from '@/api'
+import { SubscrbieInfo } from '@/api/types'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
+
+//定义输入参数
+const props = defineProps({
+  subid: Number,
+})
+
+const activeTab = ref('download')
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close'])
+
+// 订阅文件信息
+const subScribeInfo = ref<SubscrbieInfo>()
+
+// 下载文件表头
+const downloadHeaders = [
+  { title: '集', key: 'episode_number', sortable: true },
+  { title: '种子', key: 'torrent_title', sortable: true },
+  { title: '文件', key: 'file_path', sortable: true },
+]
+
+// 媒体库文件表头
+const libraryHeaders = [
+  { title: '集', key: 'episode_number', sortable: true },
+  { title: '文件', key: 'file_path', sortable: true },
+]
+
+// 调用API查询订阅文件信息
+async function loadSubscribeFilesInfo() {
+  try {
+    subScribeInfo.value = await api.get(`subscribe/files/${props.subid}`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+// 计算下载文件列表
+const downloadInfos = computed(() => {
+  return Object.keys(subScribeInfo.value?.episodes ?? {}).map((key: any) => {
+    const item = subScribeInfo.value?.episodes[key]
+    return {
+      episode_number: key,
+      title: item?.title,
+      download: item?.download ?? [],
+    }
+  })
+})
+
+// 总集数
+const totalCount = computed(() => {
+  return Object.keys(subScribeInfo.value?.episodes ?? {}).length
+})
+
+// 计算媒体库文件列表
+const libraryInfos = computed(() => {
+  return Object.keys(subScribeInfo.value?.episodes ?? {}).map((key: any) => {
+    const item = subScribeInfo.value?.episodes[key]
+    return {
+      episode_number: key,
+      title: item?.title,
+      library: item?.library ?? [],
+    }
+  })
+})
+
+onBeforeMount(() => {
+  loadSubscribeFilesInfo()
+})
+</script>
+<template>
+  <VDialog scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
+    <VCard class="rounded-t">
+      <VCardItem class="my-2">
+        <DialogCloseBtn @click="emit('close')" />
+      </VCardItem>
+      <VCardText>
+        <div class="media-page">
+          <div class="media-header">
+            <div class="media-poster">
+              <VImg
+                :src="subScribeInfo?.subscribe?.poster"
+                cover
+                class="object-cover aspect-w-2 aspect-h-3 ring-1 ring-gray-500"
+              >
+                <template #placeholder>
+                  <div class="w-full h-full">
+                    <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                  </div>
+                </template>
+              </VImg>
+            </div>
+            <div class="media-title">
+              <h1 class="d-flex flex-column flex-lg-row align-baseline justify-center justify-lg-start">
+                <div class="align-self-center align-self-lg-end">
+                  {{ subScribeInfo?.subscribe?.name }}
+                </div>
+                <div v-if="subScribeInfo?.subscribe?.season" class="text-lg align-self-center align-self-lg-end ms-3">
+                  第 {{ subScribeInfo?.subscribe?.season }} 季
+                </div>
+              </h1>
+              <div>{{ subScribeInfo?.subscribe?.year }}</div>
+              <div class="media-overview">
+                <div class="media-overview-left">
+                  <p>{{ subScribeInfo?.subscribe?.description }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="mt-7">
+          <VTabs v-model="activeTab" show-arrows class="v-tabs-pill">
+            <VTab value="download" selected-class="v-slide-group-item--active v-tab--selected">
+              <div>
+                <VIcon size="20" start icon="mdi-download" />
+                下载文件
+              </div>
+            </VTab>
+            <VTab value="library" selected-class="v-slide-group-item--active v-tab--selected">
+              <div>
+                <VIcon size="20" start icon="mdi-filmstrip-box-multiple" />
+                媒体库文件
+              </div>
+            </VTab>
+          </VTabs>
+          <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
+            <VWindowItem value="download">
+              <transition name="fade-slide" appear>
+                <VDataTable
+                  items-per-page="50"
+                  :headers="downloadHeaders"
+                  :items="downloadInfos"
+                  :items-length="totalCount"
+                  density="compact"
+                  item-value="title"
+                  return-object
+                  fixed-header
+                  hover
+                  items-per-page-text="每页条数"
+                  page-text="{0}-{1} 共 {2} 条"
+                  loading-text="加载中..."
+                >
+                  <template #item.episode_number="{ item }">
+                    <div class="text-high-emphasis pt-1">{{ item.episode_number }}. {{ item.title }}</div>
+                  </template>
+                  <template #item.torrent_title="{ item }">
+                    <div class="text-xs" v-for="file in item.download">
+                      【{{ file.site_name }}】{{ file.torrent_title }}
+                    </div>
+                  </template>
+                  <template #item.file_path="{ item }">
+                    <div class="text-xs" v-for="file in item.download">{{ file.file_path }}</div>
+                  </template>
+                  <template #no-data> 没有数据 </template>
+                </VDataTable>
+              </transition>
+            </VWindowItem>
+            <VWindowItem value="library">
+              <transition name="fade-slide" appear>
+                <VDataTable
+                  items-per-page="50"
+                  :headers="libraryHeaders"
+                  :items="libraryInfos"
+                  :items-length="totalCount"
+                  density="compact"
+                  item-value="title"
+                  return-object
+                  fixed-header
+                  hover
+                  items-per-page-text="每页条数"
+                  page-text="{0}-{1} 共 {2} 条"
+                  loading-text="加载中..."
+                >
+                  <template #item.episode_number="{ item }">
+                    <div class="text-high-emphasis pt-1">{{ item.episode_number }}. {{ item.title }}</div>
+                  </template>
+                  <template #item.file_path="{ item }">
+                    <div class="text-xs" v-for="file in item.library">{{ file.file_path }}</div>
+                  </template>
+                  <template #no-data> 没有数据 </template>
+                </VDataTable>
+              </transition>
+            </VWindowItem>
+          </VWindow>
+        </div>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss">
+.vue-media-back {
+  background-image: linear-gradient(
+      180deg,
+      rgba(var(--v-theme-background), 0) 50%,
+      rgba(var(--v-theme-background), 1) 100%
+    ),
+    linear-gradient(90deg, rgba(var(--v-theme-background), 0) 50%, rgba(var(--v-theme-background), 1) 100%),
+    linear-gradient(270deg, rgba(var(--v-theme-background), 0) 50%, rgba(var(--v-theme-background), 1) 100%);
+  box-shadow: 0 0 0 2px rgb(var(--v-theme-background));
+  margin-block-start: calc(-70px - env(safe-area-inset-top));
+}
+
+.media-page {
+  position: relative;
+  background-position: 50%;
+  background-size: cover;
+  margin-block-start: calc(-4rem - env(safe-area-inset-top));
+  padding-block-start: calc(4rem + env(safe-area-inset-top));
+  padding-inline: 1rem;
+}
+
+.media-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-block-start: 1rem;
+}
+
+@media (width >= 1280px) {
+  .media-header {
+    flex-direction: row;
+    align-items: flex-end;
+  }
+}
+
+.media-overview {
+  display: flex;
+  flex-direction: column;
+  padding-block: 1rem 1rem;
+}
+
+@media (width >= 1024px) {
+  .media-overview {
+    flex-direction: row;
+  }
+}
+
+.media-poster {
+  overflow: hidden;
+  border-radius: 0.25rem;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  inline-size: 8rem;
+
+  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 10%), 0 1px 2px -1px rgba(0, 0, 0, 10%);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+}
+
+@media (width >= 1280px) {
+  .media-poster {
+    inline-size: 13rem;
+    margin-inline-end: 1rem;
+  }
+}
+
+@media (width >= 768px) {
+  .media-poster {
+    border-radius: 0.5rem;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    inline-size: 11rem;
+
+    --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 25%);
+    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  }
+}
+
+.media-title {
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  margin-block-start: 1rem;
+  text-align: center;
+}
+
+@media (width >= 1280px) {
+  .media-title {
+    margin-block-start: 0;
+    margin-inline-end: 1rem;
+    text-align: start;
+  }
+}
+
+.media-title > h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 2rem;
+}
+
+@media (width >= 1280px) {
+  .media-title > h1 {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+}
+</style>

src/components/dialog/SubscribeHistoryDialog.vue

@@ -1,7 +1,12 @@
 <script lang="ts" setup>
-import api from '@/api';
-import { Subscribe } from '@/api/types';
+import api from '@/api'
+import { Subscribe } from '@/api/types'
 import { formatDateDifference } from '@core/utils/formatters'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from './ProgressDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const props = defineProps({
@@ -77,14 +82,12 @@ async function loadHistory({ done }: { done: any }) {
 
 // 重新订阅
 async function reSubscribe(item: Subscribe) {
-  if (item.type === '电影')
-    progressText.value = `正在重新订阅 ${item.name} ...`
-  else
-    progressText.value = `正在重新订阅 ${item.name} 第 ${item.season} 季 ...`
+  if (item.type === '电影') progressText.value = `正在重新订阅 ${item.name} ...`
+  else progressText.value = `正在重新订阅 ${item.name} 第 ${item.season} 季 ...`
   progressDialog.value = true
   try {
-    const result: {[key: string]: any} = await api.post('subscribe', item)
-    if (result.success){
+    const result: { [key: string]: any } = await api.post('subscribe/', item)
+    if (result.success) {
       emit('save')
     }
   } catch (e) {
@@ -96,9 +99,9 @@ async function reSubscribe(item: Subscribe) {
 // 删除记录
 async function deleteHistory(item: Subscribe) {
   try {
-    const result: {[key: string]: any} = await api.delete(`subscribe/history/${item.id}`)
-    if (result.success){
-      historyList.value = historyList.value.filter((i) => i.id !== item.id)
+    const result: { [key: string]: any } = await api.delete(`subscribe/history/${item.id}`)
+    if (result.success) {
+      historyList.value = historyList.value.filter(i => i.id !== item.id)
     }
   } catch (e) {
     console.error(e)
@@ -124,116 +127,89 @@ const dropdownItems = ref([
       prependIcon: 'mdi-delete',
       click: deleteHistory,
     },
-  }
+  },
 ])
-
 </script>
 
 <template>
-  <VDialog
-    scrollable
-    max-width="50rem"
-    max-height="90vh"
-  >
-  <VCard
-      class="mx-auto"
-      width="100%"
-    >
-      <VCardItem class="pb-0">
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
+    <VCard class="mx-auto" width="100%">
+      <VCardItem>
         <VCardTitle>{{ props.type + '订阅历史' }}</VCardTitle>
       </VCardItem>
-      <DialogCloseBtn @click="() => { emit('close') }" />
-      <VList
-        lines="two"
-      >
-        <VInfiniteScroll
-          mode="intersect"
-          side="end"
-          :items="historyList"
-          class="overflow-hidden"
-          @load="loadHistory"
-        >
+      <VDivider />
+      <DialogCloseBtn
+        @click="
+          () => {
+            emit('close')
+          }
+        "
+      />
+      <!-- <VList lines="two" v-if="historyList.length > 0"> -->
+      <VList lines="two">
+        <VInfiniteScroll mode="intersect" side="end" :items="historyList" class="overflow-hidden" @load="loadHistory">
           <template #loading>
             <LoadingBanner />
           </template>
           <template #empty />
-          <template v-for="(item, i) in historyList" :key="i">
-            <VListItem>
-              <template #prepend>
-                <VImg
-                  height="75"
-                  width="50"
-                  :src="item.poster"
-                  aspect-ratio="2/3"
-                  class="object-cover rounded shadow ring-gray-500 me-3"
-                  cover
-                >
-                  <template #placeholder>
-                    <div class="w-full h-full">
-                      <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
-                    </div>
-                  </template>
-                </VImg>
-              </template>
-              <VListItemTitle v-if="item.type == '电视剧'">
-                {{ item.name }} <span class="text-sm">第 {{ item.season }} 季</span>
-              </VListItemTitle>
-              <VListItemTitle v-else>
-                {{ item.name }}
-              </VListItemTitle>
-              <VListItemSubtitle class="mt-2">{{ formatDateDifference(item.date) }}</VListItemSubtitle>
-              <VListItemSubtitle class="mt-2">{{ item.description }}</VListItemSubtitle>
-              <template #append>
-                <div class="me-n3">
-                  <IconBtn>
-                    <VIcon
-                      icon="mdi-dots-vertical"
-                    />
-                    <VMenu
-                      activator="parent"
-                      close-on-content-click
-                    >
-                      <VList>
-                        <VListItem
-                          v-for="(menu, i) in dropdownItems"
-                          :key="i"
-                          variant="plain"
-                          :base-color="menu.color"
-                          @click="menu.props.click(item)"
-                        >
-                          <template #prepend>
-                            <VIcon :icon="menu.props.prependIcon" />
-                          </template>
-                          <VListItemTitle v-text="menu.title" />
-                        </VListItem>
-                      </VList>
-                    </VMenu>
-                  </IconBtn>
-                </div>
-              </template>
-            </VListItem>
+          <template v-if="historyList.length > 0">
+            <template v-for="(item, i) in historyList" :key="i">
+              <VListItem>
+                <template #prepend>
+                  <VImg
+                    height="75"
+                    width="50"
+                    :src="item.poster"
+                    aspect-ratio="2/3"
+                    class="object-cover rounded shadow ring-gray-500 me-3"
+                    cover
+                  >
+                    <template #placeholder>
+                      <div class="w-full h-full">
+                        <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+                      </div>
+                    </template>
+                  </VImg>
+                </template>
+                <VListItemTitle v-if="item.type == '电视剧'">
+                  {{ item.name }} <span class="text-sm">第 {{ item.season }} 季</span>
+                </VListItemTitle>
+                <VListItemTitle v-else>
+                  {{ item.name }}
+                </VListItemTitle>
+                <VListItemSubtitle class="mt-2">{{ formatDateDifference(item.date) }}</VListItemSubtitle>
+                <VListItemSubtitle class="mt-2">{{ item.description }}</VListItemSubtitle>
+                <template #append>
+                  <div class="me-n3">
+                    <IconBtn>
+                      <VIcon icon="mdi-dots-vertical" />
+                      <VMenu activator="parent" close-on-content-click>
+                        <VList>
+                          <VListItem
+                            v-for="(menu, i) in dropdownItems"
+                            :key="i"
+                            variant="plain"
+                            :base-color="menu.color"
+                            @click="menu.props.click(item)"
+                          >
+                            <template #prepend>
+                              <VIcon :icon="menu.props.prependIcon" />
+                            </template>
+                            <VListItemTitle v-text="menu.title" />
+                          </VListItem>
+                        </VList>
+                      </VMenu>
+                    </IconBtn>
+                  </div>
+                </template>
+              </VListItem>
+            </template>
           </template>
         </VInfiniteScroll>
       </VList>
+      <VCardText v-if="historyList.length === 0" class="text-center"> 没有已完成的订阅 </VCardText>
     </VCard>
     <!-- 进度框 -->
-    <VDialog
-      v-model="progressDialog"
-      :scrim="false"
-      width="25rem"
-    >
-      <VCard
-        color="primary"
-      >
-        <VCardText class="text-center">
-          {{ progressText }}
-          <VProgressLinear
-            indeterminate
-            color="white"
-            class="mb-0 mt-1"
-          />
-        </VCardText>
-      </VCard>
-    </VDialog>
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
   </VDialog>
 </template>

src/components/dialog/SubscribeShareDialog.vue

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toast-notification'
+import { requiredValidator } from '@/@validators'
+import api from '@/api'
+import type { Subscribe, SubscribeShare } from '@/api/types'
+import { useDisplay } from 'vuetify'
+import { formatSeason } from '@/@core/utils/formatters'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  sub: Object as PropType<Subscribe>,
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['close'])
+
+// 分享处理状态
+const shareDoing = ref(false)
+
+// 订阅编辑表单
+const shareForm = ref<SubscribeShare>({
+  subscribe_id: props.sub?.id ?? 0,
+  share_title: `${props.sub?.name} ${formatSeason(props.sub?.season ? props.sub?.season.toString() : '')}`,
+})
+
+// 分享订阅
+async function doShare() {
+  if (!shareForm.value.share_title || !shareForm.value.share_comment || !shareForm.value.share_user) return
+  try {
+    shareDoing.value = true
+    const result: { [key: string]: any } = await api.post('subscribe/share', shareForm.value)
+    shareDoing.value = false
+    // 提示
+    if (result.success) {
+      $toast.success(`${props.sub?.name} 分享成功！`)
+      // 通知父组件刷新
+      emit('close')
+    } else {
+      $toast.error(`${props.sub?.name} 分享失败：${result.message}！`)
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+// 提示框
+const $toast = useToast()
+</script>
+
+<template>
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
+    <VCard
+      :title="`分享订阅 - ${props.sub?.name} ${props.sub?.season ? `第 ${props.sub?.season} 季` : ''}`"
+      class="rounded-t"
+    >
+      <VCardText>
+        <DialogCloseBtn @click="emit('close')" />
+        <VForm @submit.prevent="() => {}" class="pt-2">
+          <VRow>
+            <VCol cols="12">
+              <VTextField
+                v-model="shareForm.share_title"
+                readonly
+                label="标题"
+                :rules="[requiredValidator]"
+                persistent-hint
+              />
+            </VCol>
+            <VCol cols="12">
+              <VTextarea
+                v-model="shareForm.share_comment"
+                label="说明"
+                :rules="[requiredValidator]"
+                hint="填写关于该订阅的说明，订阅中的搜索词、识别词等将会默认包含在分享中"
+                persistent-hint
+              />
+            </VCol>
+            <VCol cols="12">
+              <VTextField
+                v-model="shareForm.share_user"
+                label="分享用户"
+                :rules="[requiredValidator]"
+                hint="分享人的昵称"
+                persistent-hint
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+      <VCardActions class="pt-3">
+        <VSpacer />
+        <VBtn
+          variant="elevated"
+          :disabled="shareDoing"
+          @click="doShare"
+          prepend-icon="mdi-share"
+          class="px-5"
+          :loading="shareDoing"
+        >
+          确认分享
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/TransferQueueDialog.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import { formatFileSize } from '@/@core/utils/formatters'
+import api from '@/api'
+import { FileItem, TransferQueue } from '@/api/types'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
+// 定义触发的自定义事件
+const emit = defineEmits(['close'])
+
+// 数据列表
+const dataList = ref<TransferQueue[]>([])
+
+// 加载进度SSE
+const progressEventSource = ref<EventSource>()
+
+// 整理进度文本
+const progressText = ref('请稍候 ...')
+
+// 整理进度
+const progressValue = ref(0)
+
+// 数据可刷新标志
+const refreshFlag = ref(false)
+
+// 活动标签
+const activeTab = ref('')
+
+// 状态标签
+const stateDict: { [key: string]: string } = {
+  'waiting': '等待中',
+  'running': '正在整理',
+  'completed': '完成',
+  'failed': '失败',
+}
+
+// 获取状态颜色
+function getStateColor(state: string) {
+  if (state === 'waiting') return 'gray'
+  else if (state === 'running') return 'primary'
+  else if (state === 'completed') return 'success'
+  else return 'error'
+}
+
+// 从dataList中提取所有的媒体信息
+const mediaList = computed(() => {
+  return dataList.value.map(item => item.media)
+})
+
+// 按media计算总数和完成数，返回 x/x
+function getMediaCount(title_year: string) {
+  // 按title_year查询出所有media列表
+  const medias = dataList.value.filter(item => item.media.title_year === title_year)
+  // 计算media下任务的总数
+  const total = medias.reduce((acc, cur) => acc + cur.tasks.length, 0)
+  // 计算media下任务的完成数
+  const completed = medias.reduce((acc, cur) => acc + cur.tasks.filter(task => task.state === 'completed').length, 0)
+  return `${completed} / ${total}`
+}
+
+// 根据媒体信息获取对应的整理任务
+const activeTasks = computed(() => {
+  return dataList.value.find(item => item.media.title_year === activeTab.value)?.tasks
+})
+
+// 调用API获取队列信息
+async function get_transfer_queue() {
+  try {
+    dataList.value = await api.get('transfer/queue')
+    if (dataList.value.length > 0) {
+      if (!activeTab.value || activeTasks.value?.length == 0) activeTab.value = dataList.value[0].media.title_year || ''
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 移除队列任务
+async function remove_queue_task(fileitem: FileItem) {
+  try {
+    await api.delete(`transfer/queue`, { data: fileitem })
+    get_transfer_queue()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 使用SSE监听加载进度
+function startLoadingProgress() {
+  progressText.value = '请稍候 ...'
+  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) {
+      if (!progress.enable) {
+        progressText.value = '请稍候 ...'
+        progressValue.value = 0
+        if (refreshFlag.value) {
+          refreshFlag.value = false
+          get_transfer_queue()
+        }
+        return
+      }
+      progressText.value = progress.text
+      progressValue.value = progress.value
+      if (progress.value >= 100 && refreshFlag.value) {
+        refreshFlag.value = false
+        get_transfer_queue()
+      } else {
+        if (progress.value > 0 && refreshFlag.value && progress.text?.includes('整理完成')) {
+          refreshFlag.value = false
+          get_transfer_queue()
+        } else {
+          refreshFlag.value = true
+        }
+      }
+    }
+  }
+}
+
+// 停止监听加载进度
+function stopLoadingProgress() {
+  progressEventSource.value?.close()
+}
+
+onMounted(() => {
+  get_transfer_queue()
+  startLoadingProgress()
+})
+
+onUnmounted(() => {
+  stopLoadingProgress()
+})
+</script>
+
+<template>
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
+    <VCard class="mx-auto" width="100%">
+      <VCardItem>
+        <VCardTitle>整理队列</VCardTitle>
+      </VCardItem>
+      <DialogCloseBtn @click="emit('close')" />
+      <VDivider />
+      <VProgressLinear
+        v-if="dataList.length > 0 && progressValue > 0"
+        :value="progressValue"
+        color="primary"
+        indeterminate
+      />
+      <VCardItem v-if="dataList.length > 0 && progressValue > 0" class="text-center pt-2">
+        <span class="text-sm">{{ progressText }}</span>
+      </VCardItem>
+      <VCardText v-if="dataList.length === 0" class="text-center"> 没有正在整理的任务 </VCardText>
+      <VCardText>
+        <VTabs v-model="activeTab" show-arrows class="v-tabs-pill" stacked>
+          <VTab
+            v-for="media in mediaList"
+            :value="media.title_year"
+            selected-class="v-slide-group-item--active v-tab--selected"
+          >
+            <div class="font-bold text-lg">{{ media.title }}</div>
+            <div>({{ getMediaCount(media.title_year || '') }})</div>
+          </VTab>
+        </VTabs>
+        <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
+          <VWindowItem v-for="media in mediaList" :value="media.title_year">
+            <VList>
+              <VListItem v-for="task in activeTasks">
+                <VListItemTitle>{{ task.fileitem.name }}</VListItemTitle>
+                <VListItemSubtitle>
+                  大小：{{ formatFileSize(task.fileitem.size || 0) }}
+                  <VChip size="small" :color="getStateColor(task.state)" class="ms-2">
+                    {{ stateDict[task.state] }}
+                  </VChip>
+                </VListItemSubtitle>
+                <template #append>
+                  <IconBtn size="small" icon="mdi-cancel" @click="remove_queue_task(task.fileitem)" />
+                </template>
+              </VListItem>
+            </VList>
+          </VWindowItem>
+        </VWindow>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>