fix subscribe card

升级vuetify-use-dialog至v0.6.11，解决弹出Confirm后点击overlay关闭后无法再次弹出Confirm的问题

.github/workflows/build.yml

@@ -39,6 +39,7 @@ jobs:
         run: |
           yarn
           yarn build
+          echo "$frontend_version" > dist/version.txt
           zip -r dist.zip dist
 
       - name: Generate Release

.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

components.d.ts

@@ -10,9 +10,11 @@ declare module 'vue' {
     DialogCloseBtn: typeof import('./src/@core/components/DialogCloseBtn.vue')['default']
     ErrorHeader: typeof import('./src/@core/components/ErrorHeader.vue')['default']
     ExistIcon: typeof import('./src/@core/components/ExistIcon.vue')['default']
+    LoadingBanner: typeof import('./src/@core/components/LoadingBanner.vue')['default']
     MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    StatIcon: typeof import('./src/@core/components/StatIcon.vue')['default']
     ThemeSwitcher: typeof import('./src/@core/components/ThemeSwitcher.vue')['default']
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "1.8.1-2",
+  "version": "1.8.8",
   "private": true,
   "bin": "dist/service.js",
   "scripts": {
@@ -51,11 +51,13 @@
     "vue-prism-component": "^2.0.0",
     "vue-router": "^4.2.0",
     "vue-toast-notification": "^3",
+    "vue-virtual-scroll-grid": "^1.11.0",
     "vue3-ace-editor": "^2.2.4",
     "vue3-apexcharts": "^1.4.1",
     "vue3-perfect-scrollbar": "^2.0.0",
+    "vuedraggable": "^4.1.0",
     "vuetify": "3.5.14",
-    "vuetify-use-dialog": "^0.6.0",
+    "vuetify-use-dialog": "^0.6.11",
     "vuex": "^4.1.0",
     "vuex-persistedstate": "^4.1.0",
     "webfontloader": "^1.6.28"
@@ -81,6 +83,7 @@
     "@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",

src/@core/components/DialogCloseBtn.vue

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

src/@core/components/LoadingBanner.vue

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

src/@core/components/StatIcon.vue

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

src/@core/components/ThemeSwitcher.vue

@@ -2,6 +2,8 @@
 import { ref } from 'vue'
 import { useTheme } from 'vuetify'
 import type { ThemeSwitcherTheme } from '@layouts/types'
+import api from '@/api'
+import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
 
 const props = defineProps<{
   themes: ThemeSwitcherTheme[]
@@ -11,63 +13,22 @@ const { name: themeName, global: globalTheme } = useTheme()
 
 const savedTheme = ref(localStorage.getItem('theme') ?? themeName)
 
-const {
+const { state: currentThemeName, next: getNextThemeName } = useCycleList(
-  state: currentThemeName,
-  next: getNextThemeName,
-  index: currentThemeIndex,
-} = 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()
-}
-
-// 监听系统主题变化
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
-
-watch(
-  () => currentThemeName.value,
-  () => updateTheme(),
-)
-
-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)
-}
-
 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)
+  if (cost > 10) return
-    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 +60,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 +78,80 @@ function themeTransition() {
   el.addEventListener('transitionend', onTransitionend)
   el.addEventListener('transitioncancel', onTransitionend)
 }
+
+// 更新主题
+function updateTheme() {
+  const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
+  const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
+  globalTheme.name.value = theme
+  savedTheme.value = theme
+  themeTransition()
+  // 保存主题到本地
+  localStorage.setItem('theme', theme)
+  localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
+}
+
+// 切换主题
+function changeTheme(theme: string) {
+  let nextTheme = theme
+  if (!theme) nextTheme = getNextThemeName()
+  currentThemeName.value = nextTheme
+  // 保存主题到服务端
+  try {
+    api.post('/user/config/theme', nextTheme, {
+      headers: {
+        'Content-Type': 'text/plain',
+      },
+    })
+  } catch (e) {
+    console.error('保存主题到服务端失败')
+  }
+}
+
+// 是否有滚动条
+function hasScrollbar(el?: Element | null) {
+  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
+
+  const style = window.getComputedStyle(el)
+  return style.overflowY === 'scroll' || (style.overflowY === 'auto' && el.scrollHeight > el.clientHeight)
+}
+
+// 监听系统主题变化
+try {
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+} catch (e) {
+  console.error('当前设备不支持监听系统主题变化')
+}
+
+// 查询当前主题的图标
+const getThemeIcon = computed(() => {
+  const theme = props.themes.find(t => t.name === currentThemeName.value)
+  return theme?.icon ?? 'mdi-circle'
+})
+
+// 监听设置主题变化
+watch(
+  () => currentThemeName.value,
+  () => updateTheme(),
+)
 </script>
 
 <template>
-  <IconBtn @click="changeTheme">
+  <VMenu v-if="props.themes">
-    <VIcon :icon="props.themes[currentThemeIndex].icon" />
+    <template v-slot:activator="{ props }">
-  </IconBtn>
+      <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>
+    </VList>
+  </VMenu>
 </template>
 
 <style lang="sass">

src/@core/utils/formatters.ts

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

src/@core/utils/index.ts

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

src/@layouts/components/VerticalNavLayout.vue

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

src/@layouts/types.d.ts

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

src/App.vue

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

src/components/FileBrowser.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import type { Axios } from 'axios'
 import axios from 'axios'
-import List from './filebrowser/List.vue'
+import FileList from './filebrowser/FileList.vue'
-
+import FileToolbar from './filebrowser/FileToolbar.vue'
-import Toolbar from './filebrowser/Toolbar.vue'
 import type { EndPoints } from '@/api/types'
 
 // 输入参数
@@ -100,7 +99,7 @@ onMounted(() => {
 <template>
   <VCard class="mx-auto" :loading="loading > 0 || !path">
     <div v-if="path">
-      <Toolbar
+      <FileToolbar
         :path="path"
         :storages="storagesArray"
         :storage="activeStorage"
@@ -111,7 +110,7 @@ onMounted(() => {
         @foldercreated="refreshPending = true"
         @sortchanged="sortChanged"
       />
-      <List
+      <FileList
         :path="path"
         :storage="activeStorage"
         :icons="fileIcons"

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
+  <VEmptyState :image="image" size="250">
-    :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,23 +18,18 @@ function imageLoadHandler() {
 
 // 跳转播放
 function goPlay() {
-  if (props.media?.link)
+  if (props.media?.link) window.open(props.media?.link, '_blank')
-    window.open(props.media?.link, '_blank')
 }
 
 // 计算图片地址
 const getImgUrl = computed(() => {
   const image = props.media?.image || ''
-  return `${import.meta.env.VITE_API_BASE_URL}system/img/0/${encodeURIComponent(image).replace(/%2F/g, '/')}`
+  return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(image)}`
 })
 </script>
 
 <template>
-  <VHover
+  <VHover v-bind="props">
-    v-bind="props"
-    :height="props.height"
-    :width="props.width"
-  >
     <template #default="hover">
       <VCard
         v-bind="hover.props"
@@ -48,12 +43,7 @@ const getImgUrl = computed(() => {
         @click="goPlay"
       >
         <template #image>
-          <VImg
+          <VImg :src="getImgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler">
-            :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>
@@ -83,7 +75,7 @@ const getImgUrl = computed(() => {
 </template>
 
 <style lang="scss">
-.text-shadow{
+.text-shadow {
-  text-shadow:1px 1px #777;
+  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 v-bind="personProps">
-    <template #default="hover">
-      <VCard
-        v-bind="hover.props"
-        :height="personProps.height"
-        :width="personProps.width"
-        class="rounded-lg"
-        :class="{
-          'transition transform-cpu duration-300 scale-105': hover.isHovering,
-        }"
-        @click.stop="goPersonDetail"
-      >
-        <div
-          class="person-card relative transform-gpu cursor-pointer rounded shadow ring-1 transition duration-150 ease-in-out scale-100 ring-gray-700"
-        >
-          <div style="padding-bottom: 150%;">
-            <div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
-              <div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
-                <VAvatar
-                  size="120"
-                  :class="{
-                    'ring-1 ring-gray-700': isImageLoaded,
-                  }"
-                >
-                  <VImg
-                    v-img
-                    :src="getPersonImage()"
-                    cover
-                    @load="isImageLoaded = true"
-                  />
-                </VAvatar>
-              </div>
-              <div class="w-full truncate text-center font-bold">
-                {{ personInfo?.name }}
-              </div>
-              <div class="overflow-hidden whitespace-normal text-center text-sm" style=" display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;-webkit-line-clamp: 2;">
-                {{ 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/CardStatisticsHorizontal.vue

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

src/components/cards/CardStatisticsVertical.vue

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

src/components/cards/CardStatisticsWithImages.vue

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

src/components/cards/DoubanPersonCard.vue

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

src/components/cards/FilterRuleCard.vue

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

src/components/cards/LibraryCard.vue

@@ -56,7 +56,7 @@ function getImgUrl(url: string) {
   if (!url)
     return getDefaultImage()
   else
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/0/${encodeURIComponent(url).replace(/%2F/g, '/')}`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(url)}`
 }
 
 // 根据多张图片生成媒体库封面
@@ -68,7 +68,7 @@ async function drawImages(imageList: string[]) {
 
   // 为所有图片添加system/img前缀
   for (let i = 0; i < IMAGES.length; i++)
-    IMAGES[i] = `${import.meta.env.VITE_API_BASE_URL}system/img/0/${encodeURIComponent(IMAGES[i]).replace(/%2F/g, '/')}`
+    IMAGES[i] = `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(IMAGES[i])}`
 
   // canvas
   const canvas = canvasRef.value

src/components/cards/MediaCard.vue

@@ -1,13 +1,16 @@
 <script lang="ts" setup>
 import type { PropType, Ref } from 'vue'
 import { useToast } from 'vue-toast-notification'
-import SubscribeEditForm from '../form/SubscribeEditForm.vue'
+import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
 import { formatSeason } from '@/@core/utils/formatters'
 import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import type { MediaInfo, NotExistMediaInfo, Subscribe, TmdbSeason } from '@/api/types'
 import router from '@/router'
 import noImage from '@images/no-image.jpeg'
+import tmdbImage from '@images/logos/tmdb.png'
+import doubanImage from '@images/logos/douban-black.png'
+import bangumiImage from '@images/logos/bangumi.png'
 
 // 输入参数
 const props = defineProps({
@@ -16,6 +19,8 @@ const props = defineProps({
   height: String,
 })
 
+const store = useStore()
+
 // 提示框
 const $toast = useToast()
 
@@ -52,31 +57,33 @@ const seasonInfos = ref<TmdbSeason[]>([])
 // 选中的订阅季
 const seasonsSelected = ref<TmdbSeason[]>([])
 
+// 来源角标字典
+const sourceIconDict: { [key: string]: any } = {
+  themoviedb: tmdbImage,
+  douban: doubanImage,
+  bangumi: bangumiImage,
+}
+
 // 获得mediaid
 function getMediaId() {
-  return props.media?.tmdb_id
+  if (props.media?.tmdb_id) return `tmdb:${props.media?.tmdb_id}`
-    ? `tmdb:${props.media?.tmdb_id}`
+  else if (props.media?.douban_id) return `douban:${props.media?.douban_id}`
-    : props.media?.douban_id
+  else return `bangumi:${props.media?.bangumi_id}`
-      ? `douban:${props.media?.douban_id}`
-      : `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 === '电影')
+  if (type === '电影') return 'border-blue-500 bg-blue-600'
-    return 'border-blue-500 bg-blue-600'
+  else if (type === '电视剧') return ' bg-indigo-500 border-indigo-600'
-  else if (type === '电视剧')
+  else return 'border-purple-600 bg-purple-600'
-    return ' bg-indigo-500 border-indigo-600'
-  else
-    return 'border-purple-600 bg-purple-600'
 }
 
 // 添加订阅处理
@@ -93,26 +100,22 @@ async function handleAddSubscribe() {
 
     // 检查各季的缺失状态
     await checkSeasonsNotExists()
-    if (!tmdbFlag.value)
+    if (!tmdbFlag.value) return
-      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,46 +150,32 @@ async function addSubscribe(season = 0) {
     }
 
     // 提示
-    showSubscribeAddToast(
+    showSubscribeAddToast(result.success, props.media?.title ?? '', season, result.message, best_version)
-      result.success,
-      props.media?.title ?? '',
-      season,
-      result.message,
-      best_version,
-    )
 
     // 弹出订阅编辑弹窗
     if (result.success && seasonsSelected.value.length <= 1) {
-      const show_edit_dialog = await querySubscribeRules()
+      const show_edit_dialog = await queryDefaultSubscribeConfig()
       if (show_edit_dialog) {
         subscribeId.value = result.data.id
         subscribeEditDialog.value = true
       }
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
+  } finally {
+    doneNProgress()
   }
-  doneNProgress()
 }
 
 // 弹出添加订阅提示
-function showSubscribeAddToast(result: boolean,
+function showSubscribeAddToast(result: boolean, title: string, season: number, message: string, best_version: number) {
-  title: string,
+  if (season) title = `${title} ${formatSeason(season.toString())}`
-  season: number,
-  message: string,
-  best_version: number) {
-  if (season)
-    title = `${title} ${formatSeason(season.toString())}`
 
   let subname = '订阅'
-  if (best_version > 0)
+  if (best_version > 0) subname = '洗版订阅'
-    subname = '洗版订阅'
 
-  if (result && seasonsSelected.value.length > 1)
+  if (result && seasonsSelected.value.length > 1) $toast.success(`${title} 添加${subname}成功！`)
-    $toast.success(`${title} 添加${subname}成功！`)
+  else if (!result) $toast.error(`${title} 添加${subname}失败：${message}！`)
-  else if (!result)
-    $toast.error(`${title} 添加${subname}失败：${message}！`)
 }
 
 // 调用API取消订阅
@@ -196,24 +185,19 @@ async function removeSubscribe() {
   try {
     const mediaid = getMediaId()
 
-    const result: { [key: string]: any } = await api.delete(
+    const result: { [key: string]: any } = await api.delete(`subscribe/media/${mediaid}`, {
-      `subscribe/media/${mediaid}`,
+      params: {
-      {
+        season: props.media?.season,
-        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)
   }
   doneNProgress()
@@ -223,10 +207,8 @@ async function removeSubscribe() {
 async function handleCheckSubscribe() {
   try {
     const result = await checkSubscribe(props.media?.season)
-    if (result)
+    if (result) isSubscribed.value = true
-      isSubscribed.value = true
+  } catch (error) {
-  }
-  catch (error) {
     console.error(error)
   }
 }
@@ -244,10 +226,8 @@ async function handleCheckExists() {
       },
     })
 
-    if (result.success)
+    if (result.success) isExists.value = true
-      isExists.value = true
+  } catch (error) {
-  }
-  catch (error) {
     console.error(error)
   }
 }
@@ -265,34 +245,30 @@ async function checkSubscribe(season = 0) {
     })
 
     return result.id || null
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 
   return null
 }
 
-// 检查所有季的缺失状态
+// 检查所有季的缺失状态（数据库）
 async function checkSeasonsNotExists() {
   // 开始处理
   startNProgress()
   try {
     const result: NotExistMediaInfo[] = await api.post('mediaserver/notexists', props.media)
     if (result) {
-      result.forEach((item) => {
+      result.forEach(item => {
         // 0-已入库 1-部分缺失 2-全部缺失
         let state = 0
-        if (item.episodes.length === 0)
+        if (item.episodes.length === 0) state = 2
-          state = 2
+        else if (item.episodes.length < item.total_episode) state = 1
-        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
   }
@@ -305,22 +281,24 @@ async function checkSeasonsNotExists() {
 async function getMediaSeasons() {
   try {
     seasonInfos.value = await api.get(`tmdb/seasons/${props.media?.tmdb_id}`)
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
 
 // 查询订阅弹窗规则
-async function querySubscribeRules() {
+async function queryDefaultSubscribeConfig() {
+  // 非管理员不显示
+  if (!store.state.auth.superUser) return false
   try {
-    const result: { [key: string]: any } = await api.get(
+    let subscribe_config_url = ''
-      'system/setting/DefaultFilterRules',
+    if (props.media?.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
-    )
+    else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
-    if (result.data?.value)
+
-      return result.data.value.show_edit_dialog
+    const result: { [key: string]: any } = await api.get(subscribe_config_url)
-  }
+
-  catch (error) {
+    if (result.data?.value) return result.data.value.show_edit_dialog
+  } catch (error) {
     console.log(error)
   }
   return false
@@ -328,49 +306,41 @@ async function querySubscribeRules() {
 
 // 爱心订阅按钮响应
 function handleSubscribe() {
-  if (isSubscribed.value)
+  if (isSubscribed.value) removeSubscribe()
-    removeSubscribe()
+  else handleAddSubscribe()
-  else
-    handleAddSubscribe()
 }
 
 // 计算存在状态的颜色
 function getExistColor(season: number) {
   const state = seasonsNotExisted.value[season]
-  if (!state)
+  if (!state) return 'success'
-    return 'success'
 
-  if (state === 1)
+  if (state === 1) return 'warning'
-    return 'warning'
+  else if (state === 2) return 'error'
-  else if (state === 2)
+  else return 'success'
-    return 'error'
-  else
-    return 'success'
 }
 
 // 计算存在状态的文本
 function getExistText(season: number) {
   const state = seasonsNotExisted.value[season]
-  if (!state)
+  if (!state) return '已入库'
-    return '已入库'
 
-  if (state === 1)
+  if (state === 1) return '部分缺失'
-    return '部分缺失'
+  else if (state === 2) return '缺失'
-  else if (state === 2)
+  else return '已入库'
-    return '缺失'
-  else
-    return '已入库'
 }
 
 // 打开详情页
-function goMediaDetail() {
+function goMediaDetail(isHovering = false) {
-  router.push({
+  if (isHovering) {
-    path: '/media',
+    router.push({
-    query: {
+      path: '/media',
-      mediaid: getMediaId(),
+      query: {
-      type: props.media?.type,
+        mediaid: getMediaId(),
-    },
+        type: props.media?.type,
-  })
+      },
+    })
+  }
 }
 
 // 开始搜索
@@ -394,41 +364,37 @@ onBeforeMount(() => {
 
 // 计算图片地址
 const getImgUrl: Ref<string> = computed(() => {
-  if (imageLoadError.value)
+  if (imageLoadError.value) return noImage
-    return noImage
   const url = props.media?.poster_path?.replace('original', 'w500') ?? noImage
   // 如果地址中包含douban则使用中转代理
   if (url.includes('doubanio.com'))
-    return `${import.meta.env.VITE_API_BASE_URL}douban/img/${encodeURIComponent(url)}`
+    return `${import.meta.env.VITE_API_BASE_URL}douban/img?imgurl=${encodeURIComponent(url)}`
 
   return url
 })
 
 // 拼装季图片地址
 function getSeasonPoster(posterPath: string) {
-  if (!posterPath)
+  if (!posterPath) return ''
-    return ''
   return `https://image.tmdb.org/t/p/w500${posterPath}`
 }
 
 // 将yyyy-mm-dd转换为yyyy年mm月dd日
 function formatAirDate(airDate: string) {
-  if (!airDate)
+  if (!airDate) return ''
-    return ''
+  const date = new Date(airDate.replaceAll(/-/g, '/'))
-  const date = new Date(airDate)
   return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
 }
 // 从yyyy-mm-dd中提取年份
 function getYear(airDate: string) {
-  if (!airDate)
+  if (!airDate) return ''
-    return ''
+  const date = new Date(airDate.replaceAll(/-/g, '/'))
-  const date = new Date(airDate)
   return date.getFullYear()
 }
 </script>
 
 <template>
-  <VHover v-bind="props">
+  <VHover>
     <template #default="hover">
       <VCard
         v-bind="hover.props"
@@ -439,7 +405,7 @@ function getYear(airDate: string) {
           'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
           'ring-1': isImageLoaded,
         }"
-        @click.stop="goMediaDetail"
+        @click.stop="goMediaDetail(hover.isHovering)"
       >
         <VImg
           aspect-ratio="2/3"
@@ -467,10 +433,10 @@ function getYear(airDate: string) {
           {{ props.media?.type }}
         </VChip>
         <!-- 本地存在标识 -->
-        <ExistIcon v-if="isExists" />
+        <ExistIcon v-if="isExists && !hover.isHovering" />
         <!-- 评分角标 -->
         <VChip
-          v-if="isImageLoaded && props.media?.vote_average && !isExists"
+          v-if="isImageLoaded && props.media?.vote_average && !(isExists && !hover.isHovering)"
           variant="elevated"
           size="small"
           :class="getChipColor('rating')"
@@ -491,43 +457,30 @@ function getYear(airDate: string) {
             {{ props.media?.overview }}
           </p>
           <div class="flex align-center justify-between">
-            <IconBtn
+            <IconBtn icon="mdi-magnify" color="white" @click.stop="handleSearch" />
-              icon="mdi-magnify"
+            <IconBtn icon="mdi-heart" :color="isSubscribed ? 'error' : 'white'" @click.stop="handleSubscribe" />
-              color="white"
-              @click.stop="handleSearch"
-            />
-            <IconBtn
-              icon="mdi-heart"
-              :color="isSubscribed ? 'error' : 'white'"
-              @click.stop="handleSubscribe"
-            />
           </div>
         </VCardText>
+        <VAvatar
+          size="24"
+          density="compact"
+          class="absolute bottom-1 right-1"
+          tile
+          v-if="!hover.isHovering && isImageLoaded && props.media?.source"
+        >
+          <VImg cover :src="sourceIconDict[props.media?.source]" class="shadow-lg" />
+        </VAvatar>
       </VCard>
     </template>
   </VHover>
   <!-- 订阅季弹窗 -->
-  <VBottomSheet
+  <VBottomSheet v-if="subscribeSeasonDialog" v-model="subscribeSeasonDialog" inset scrollable>
-    v-if="subscribeSeasonDialog"
-    v-model="subscribeSeasonDialog"
-    inset
-    scrollable
-  >
     <VCard class="rounded-t">
       <DialogCloseBtn @click="subscribeSeasonDialog = false" />
-      <VCardTitle class="pe-10">
+      <VCardTitle class="pe-10"> 订阅 - {{ props.media?.title }} </VCardTitle>
-        订阅 - {{ props.media?.title }}
-      </VCardTitle>
       <VCardText>
-        <VList
+        <VList v-model:selected="seasonsSelected" lines="three" select-strategy="classic">
-          v-model:selected="seasonsSelected"
+          <VListItem v-for="(item, i) in seasonInfos" :key="i" :value="item">
-          lines="three"
-          select-strategy="classic"
-        >
-          <VListItem
-            v-for="(item, i) in seasonInfos" :key="i"
-            :value="item"
-          >
             <template #prepend>
               <VImg
                 height="90"
@@ -544,16 +497,9 @@ function getYear(airDate: string) {
                 </template>
               </VImg>
             </template>
-            <VListItemTitle>
+            <VListItemTitle> 第 {{ item.season_number }} 季 </VListItemTitle>
-              第 {{ item.season_number }} 季
-            </VListItemTitle>
             <VListItemSubtitle class="mt-1 me-2">
-              <VChip
+              <VChip v-if="item.vote_average" color="primary" size="small" class="mb-1">
-                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 }} 集
@@ -562,12 +508,7 @@ function getYear(airDate: string) {
               《{{ media?.title }}》第 {{ item.season_number }} 季于 {{ formatAirDate(item.air_date || '') }} 首播。
             </VListItemSubtitle>
             <VListItemSubtitle>
-              <VChip
+              <VChip v-if="seasonsNotExisted" class="mt-2" size="small" :color="getExistColor(item.season_number || 0)">
-                v-if="seasonsNotExisted"
-                class="mt-2"
-                size="small"
-                :color="getExistColor(item.season_number || 0)"
-              >
                 {{ getExistText(item.season_number || 0) }}
               </VChip>
             </VListItemSubtitle>
@@ -580,24 +521,25 @@ function getYear(airDate: string) {
         </VList>
       </VCardText>
       <div class="my-2 text-center">
-        <VBtn
+        <VBtn :disabled="seasonsSelected.length === 0" width="30%" @click="subscribeSeasons">
-          :disabled="seasonsSelected.length === 0"
-          width="30%"
-          @click="subscribeSeasons"
-        >
           {{ seasonsSelected.length === 0 ? '请选择订阅季' : '提交订阅' }}
         </VBtn>
       </div>
     </VCard>
   </VBottomSheet>
   <!-- 订阅编辑弹窗 -->
-  <SubscribeEditForm
+  <SubscribeEditDialog
     v-if="subscribeEditDialog"
     v-model="subscribeEditDialog"
     :subid="subscribeId"
     @close="subscribeEditDialog = false"
     @save="subscribeEditDialog = false"
-    @remove="() => { subscribeEditDialog = false; handleCheckSubscribe(); }"
+    @remove="
+      () => {
+        subscribeEditDialog = false
+        handleCheckSubscribe()
+      }
+    "
   />
 </template>
 

src/components/cards/MediaInfoCard.vue

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

src/components/cards/PersonCard.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import personIcon from '@images/misc/person-icon.png'
-import type { TmdbPerson } from '@/api/types'
+import type { Person } from '@/api/types'
 import router from '@/router'
 
 const personProps = defineProps({
-  person: Object as PropType<TmdbPerson>,
+  person: Object as PropType<Person>,
   width: String,
   height: String,
 })
@@ -17,26 +17,54 @@ const isImageLoaded = ref(false)
 
 // 人物图片地址
 function getPersonImage() {
-  if (!personInfo.value?.profile_path)
+  if (personProps.person?.source === 'themoviedb') {
+    if (!personInfo.value?.profile_path) return personIcon
+    return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
+  } else if (personProps.person?.source === 'douban') {
+    if (!personInfo.value?.avatar) return personIcon
+    if (typeof personInfo.value?.avatar === 'object') {
+      return personInfo.value?.avatar?.normal
+    } else {
+      return personInfo.value?.avatar
+    }
+  } else if (personProps.person?.source === 'bangumi') {
+    if (!personInfo.value?.images) return personIcon
+    return personInfo.value?.images?.medium
+  } else {
     return personIcon
-  return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personInfo.value?.profile_path}`
+  }
+}
+
+// 人物姓名
+function getPersonName() {
+  return personInfo.value?.name
+}
+
+// 人物角色
+function getPersonCharacter() {
+  if (personProps.person?.source === 'bangumi') {
+    if (!personInfo.value?.career) return ''
+    return personInfo.value?.career.join('、')
+  } else {
+    return personInfo.value?.character
+  }
 }
 
 // 人物详情
 function goPersonDetail() {
-  if (!personInfo.value?.id)
+  if (!personInfo.value?.id) return
-    return
   router.push({
     path: '/person',
     query: {
       personid: personInfo.value?.id,
+      source: personInfo.value?.source,
     },
   })
 }
 </script>
 
 <template>
-  <VHover v-bind="personProps">
+  <VHover>
     <template #default="hover">
       <VCard
         v-bind="hover.props"
@@ -49,9 +77,9 @@ function goPersonDetail() {
         @click.stop="goPersonDetail"
       >
         <div
-          class="person-card relative transform-gpu cursor-pointer rounded shadow ring-1 transition duration-150 ease-in-out scale-100 ring-gray-700"
+          class="person-card relative transform-gpu cursor-pointer rounded shadow transition duration-150 ease-in-out scale-100 ring-gray-700"
         >
-          <div style="padding-bottom: 150%;">
+          <div style="padding-block-end: 150%">
             <div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
               <div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
                 <VAvatar
@@ -60,19 +88,17 @@ function goPersonDetail() {
                     'ring-1 ring-gray-700': isImageLoaded,
                   }"
                 >
-                  <VImg
+                  <VImg :src="getPersonImage()" cover @load="isImageLoaded = true" />
-                    v-img
-                    :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;">
+              <div
-                {{ personInfo?.character }}
+                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,12 @@ const imageLoadError = ref(false)
 // 更新日志弹窗
 const releaseDialog = ref(false)
 
+// 计算插件标签
+const pluginLabels = computed(() => {
+  if (!props.plugin?.plugin_label) return []
+  return props.plugin.plugin_label.split(',')
+})
+
 // 图片加载完成
 async function imageLoaded() {
   isImageLoaded.value = true
@@ -57,15 +64,12 @@ 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(
+    const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
-      `plugin/install/${props.plugin?.id}`,
+      params: {
-      {
+        repo_url: props.plugin?.repo_url,
-        params: {
+        force: props.plugin?.has_update,
-          repo_url: props.plugin?.repo_url,
-          force: props.plugin?.has_update,
-        },
       },
-    )
+    })
 
     // 隐藏等待提示框
     progressDialog.value = false
@@ -75,23 +79,20 @@ async function installPlugin() {
 
       // 通知父组件刷新
       emit('install')
-    }
+    } else {
-    else {
       $toast.error(`插件 ${props.plugin?.plugin_name} 安装失败：${result.message}`)
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
 
 // 计算图标路径
 const iconPath: Ref<string> = computed(() => {
-  if (imageLoadError.value)
+  if (imageLoadError.value) return noImage
-    return noImage
   // 如果是网络图片则使用代理后返回
   if (props.plugin?.plugin_icon?.startsWith('http'))
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/1/${encodeURIComponent(props.plugin?.plugin_icon).replace(/%2F/g, '/')}`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}`
 
   return `./plugin_icon/${props.plugin?.plugin_icon}`
 })
@@ -102,22 +103,18 @@ function visitPluginPage() {
   let repoUrl = props.plugin?.repo_url
   if (repoUrl) {
     if (repoUrl.includes('raw.githubusercontent.com')) {
-      if (!repoUrl.endsWith('/'))
+      if (!repoUrl.endsWith('/')) repoUrl += '/'
-        repoUrl += '/'
 
-      if (repoUrl.split('/').length < 6)
+      if (repoUrl.split('/').length < 6) repoUrl = `${repoUrl}main/`
-        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 +135,8 @@ const dropdownItems = ref([
       prependIcon: 'mdi-github',
       click: visitPluginPage,
     },
-  }, {
+  },
+  {
     title: '更新说明',
     value: 2,
     show: !isNullOrEmptyObject(props.plugin?.history || {}),
@@ -151,22 +149,12 @@ const dropdownItems = ref([
 </script>
 
 <template>
-  <VCard
+  <VCard :width="props.width" :height="props.height" @click="installPlugin" class="flex flex-col">
-    :width="props.width"
+    <div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }">
-    :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
+          <VMenu activator="parent" close-on-content-click>
-            activator="parent"
-            close-on-content-click
-          >
             <VList>
               <VListItem
                 v-for="(item, i) in dropdownItems"
@@ -184,9 +172,7 @@ const dropdownItems = ref([
           </VMenu>
         </IconBtn>
       </div>
-      <VAvatar
+      <VAvatar size="6rem">
-        size="8rem"
-      >
         <VImg
           ref="imageRef"
           :src="iconPath"
@@ -203,16 +189,17 @@ const dropdownItems = ref([
       <span class="text-sm text-gray-500">v{{ props.plugin?.plugin_version }}</span>
     </VCardTitle>
     <VCardText class="pb-2">
-      {{ props.plugin?.plugin_desc }}
+      <div>{{ props.plugin?.plugin_desc }}</div>
+      <div>
+        <VChip v-for="label in pluginLabels" variant="tonal" size="small" class="me-1 my-1" color="info" label>
+          {{ label }}
+        </VChip>
+      </div>
     </VCardText>
-    <VCardText class="flex items-center justify-start pb-2">
+    <VCardText class="flex align-self-baseline pb-2 w-full align-end">
       <span>
         <VIcon icon="mdi-account" class="me-1" />
-        <a
+        <a :href="props.plugin?.author_url" target="_blank" @click.stop>
-          :href="props.plugin?.author_url"
-          target="_blank"
-          @click.stop
-        >
           {{ props.plugin?.plugin_author }}
         </a>
       </span>
@@ -223,34 +210,11 @@ const dropdownItems = ref([
     </VCardText>
   </VCard>
   <!-- 安装插件进度框 -->
-  <VDialog
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
-    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>
   <!-- 更新日志 -->
-  <VDialog
+  <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
-    v-if="releaseDialog"
+    <VCard :title="`${props.plugin?.plugin_name} 更新说明`">
-    v-model="releaseDialog"
-    width="600"
-    scrollable
-  >
-    <VCard>
       <DialogCloseBtn @click="releaseDialog = false" />
-      <VCardTitle>{{ props.plugin?.plugin_name }} 更新说明</VCardTitle>
       <VersionHistory :history="props.plugin?.history" />
     </VCard>
   </VDialog>
@@ -263,7 +227,7 @@ const dropdownItems = ref([
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
   background: rgba(29, 39, 59, 48%);
-  content: "";
+  content: '';
   inset: 0;
 }
 </style>

src/components/cards/PluginCard.vue

@@ -11,6 +11,11 @@ import { isNullOrEmptyObject } from '@core/utils'
 import noImage from '@images/logos/plugin.png'
 import { getDominantColor } from '@/@core/utils/image'
 import store from '@/store'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const props = defineProps({
@@ -58,7 +63,7 @@ const pluginInfoDialog = ref(false)
 const progressText = ref('正在更新插件...')
 
 // 插件数据页面配置项
-let pluginPageItems = reactive([])
+let pluginPageItems = ref([])
 
 // 图片是否加载完成
 const isImageLoaded = ref(false)
@@ -70,12 +75,15 @@ const imageLoadError = ref(false)
 const releaseDialog = ref(false)
 
 // 监听动作标识，如为true则打开详情
-watch(() => props.action, (newAction, oldAction) => {
+watch(
-  if (newAction && !oldAction) {
+  () => props.action,
-    openPluginDetail()
+  (newAction, oldAction) => {
-    emit('actionDone')
+    if (newAction && !oldAction) {
-  }
+      openPluginDetail()
-})
+      emit('actionDone')
+    }
+  },
+)
 
 // 图片加载完成
 async function imageLoaded() {
@@ -90,7 +98,7 @@ function showUpdateHistory() {
   // 检查当前版本是否有更新日志
   if (isNullOrEmptyObject(props.plugin?.history)) {
     updatePlugin()
-  } else{
+  } else {
     releaseDialog.value = true
   }
 }
@@ -100,21 +108,12 @@ async function uninstallPlugin() {
   const isConfirmed = await createConfirm({
     title: '确认',
     content: `是否确认卸载插件 ${props.plugin?.plugin_name} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
   })
 
-  if (!isConfirmed)
+  if (!isConfirmed) return
-    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 +124,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 +138,9 @@ async function loadPluginForm() {
     const result: { [key: string]: any } = await api.get(`plugin/form/${props.plugin?.id}`)
     if (result) {
       pluginFormItems = result.conf
-      if (result.model)
+      if (result.model) pluginConfigForm.value = result.model
-        pluginConfigForm.value = result.model
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
@@ -154,10 +149,8 @@ async function loadPluginForm() {
 async function loadPluginPage() {
   try {
     const result: [] = await api.get(`plugin/page/${props.plugin?.id}`)
-    if (result)
+    if (result) pluginPageItems.value = result
-      pluginPageItems = result
+  } catch (error) {
-  }
-  catch (error) {
     console.error(error)
   }
 }
@@ -166,10 +159,8 @@ async function loadPluginPage() {
 async function loadPluginConf() {
   try {
     const result: { [key: string]: any } = await api.get(`plugin/${props.plugin?.id}`)
-    if (!isNullOrEmptyObject(result))
+    if (!isNullOrEmptyObject(result)) pluginConfigForm.value = result
-      pluginConfigForm.value = result
+  } catch (error) {
-  }
-  catch (error) {
     console.error(error)
   }
 }
@@ -187,13 +178,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,11 +208,10 @@ async function showPluginConfig() {
 
 // 计算图标路径
 const iconPath: Ref<string> = computed(() => {
-  if (imageLoadError.value)
+  if (imageLoadError.value) return noImage
-    return noImage
   // 如果是网络图片则使用代理后返回
   if (props.plugin?.plugin_icon?.startsWith('http'))
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/1/${encodeURIComponent(props.plugin?.plugin_icon).replace(/%2F/g, '/')}`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(props.plugin?.plugin_icon)}`
 
   return `./plugin_icon/${props.plugin?.plugin_icon}`
 })
@@ -233,18 +221,9 @@ async function resetPlugin() {
   const isConfirmed = await createConfirm({
     title: '确认',
     content: `是否确认重置插件 ${props.plugin?.plugin_name} 的配置数据?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
   })
 
-  if (!isConfirmed)
+  if (!isConfirmed) return
-    return
 
   try {
     const result: { [key: string]: any } = await api.get(`plugin/reset/${props.plugin?.id}`)
@@ -252,12 +231,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 +247,12 @@ async function updatePlugin() {
     progressDialog.value = true
     progressText.value = `正在更新 ${props.plugin?.plugin_name} ...`
 
-    const result: { [key: string]: any } = await api.get(
+    const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
-      `plugin/install/${props.plugin?.id}`,
+      params: {
-      {
+        repo_url: props.plugin?.repo_url,
-        params: {
+        force: true,
-          repo_url: props.plugin?.repo_url,
-          force: true,
-        },
       },
-    )
+    })
 
     // 隐藏等待提示框
     progressDialog.value = false
@@ -288,12 +262,10 @@ async function updatePlugin() {
 
       // 通知父组件刷新
       emit('save')
-    }
+    } else {
-    else {
       $toast.error(`插件 ${props.plugin?.plugin_name} 更新失败：${result.message}`)
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
@@ -306,16 +278,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?token=${token}&length=-1&logfile=plugins/${props.plugin?.id?.toLowerCase()}.log`
   window.open(url, '_blank')
 }
 
 // 打开插件详情
 function openPluginDetail() {
-  if (props.plugin?.has_page)
+  if (props.plugin?.has_page) showPluginInfo()
-    showPluginInfo()
+  else showPluginConfig()
-  else
-    showPluginConfig()
 }
 
 // 弹出菜单
@@ -391,41 +363,26 @@ const dropdownItems = ref([
 ])
 
 // 监听插件状态变化
-watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
+watch(
-  const updateItemIndex = dropdownItems.value.findIndex(item => item.value === 3)
+  () => props.plugin?.has_update,
-  if (updateItemIndex !== -1)
+  (newHasUpdate, oldHasUpdate) => {
-    dropdownItems.value[updateItemIndex].show = newHasUpdate
+    const updateItemIndex = dropdownItems.value.findIndex(item => item.value === 3)
-})
+    if (updateItemIndex !== -1) dropdownItems.value[updateItemIndex].show = newHasUpdate
+  },
+)
 </script>
 
 <template>
   <!-- 插件卡片 -->
-  <VCard
+  <VCard v-if="isVisible" :width="props.width" :height="props.height" @click="openPluginDetail" class="flex flex-col">
-    v-if="isVisible"
+    <div class="relative pa-3 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }">
-    :width="props.width"
+      <div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 left-1">
-    :height="props.height"
+        <VIcon icon="mdi-new-box" class="text-white" />
-    @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
+          <VMenu activator="parent" close-on-content-click>
-            activator="parent"
-            close-on-content-click
-          >
             <VList>
               <VListItem
                 v-for="(item, i) in dropdownItems"
@@ -444,9 +401,7 @@ watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
           </VMenu>
         </IconBtn>
       </div>
-      <VAvatar
+      <VAvatar size="6rem">
-        size="8rem"
-      >
         <VImg
           ref="imageRef"
           :src="iconPath"
@@ -458,123 +413,65 @@ watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
         />
       </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>
+        {{ props.plugin?.plugin_name }}
+        <span class="text-sm ms-2 mt-1 text-gray-500">v{{ props.plugin?.plugin_version }}</span>
       </VCardTitle>
     </VCardItem>
-    <VCardText>
+    <VCardText class="pb-1">
       {{ props.plugin?.plugin_desc }}
     </VCardText>
+    <VCardText class="flex justify-end align-self-baseline p-1 w-full align-end">
+      <span v-if="props.count" class="ms-3">
+        <VIcon icon="mdi-fire" />
+        <span class="text-sm ms-1">{{ props.count?.toLocaleString() }}</span>
+      </span>
+    </VCardText>
   </VCard>
+
   <!-- 插件配置页面 -->
-  <VDialog
+  <VDialog v-model="pluginConfigDialog" scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
-    v-model="pluginConfigDialog"
+    <VCard :title="`${props.plugin?.plugin_name} - 配置`" class="rounded-t">
-    scrollable
+      <DialogCloseBtn v-model="pluginConfigDialog" />
-    max-width="60rem"
-  >
-    <VCard
-      :title="`${props.plugin?.plugin_name} - 配置`"
-      class="rounded-t"
-    >
-      <DialogCloseBtn @click="pluginConfigDialog = false" />
       <VCardText>
-        <FormRender
+        <FormRender v-for="(item, index) in pluginFormItems" :key="index" :config="item" :form="pluginConfigForm" />
-          v-for="(item, index) in pluginFormItems"
-          :key="index"
-          :config="item"
-          :form="pluginConfigForm"
-        />
       </VCardText>
-      <VCardActions>
+      <VCardActions class="pt-3">
-        <VBtn v-if="pluginPageItems.length > 0" @click="showPluginInfo">
+        <VBtn v-if="pluginPageItems.length > 0" @click="showPluginInfo" variant="outlined" color="info">
           查看数据
         </VBtn>
         <VSpacer />
-        <VBtn
+        <VBtn @click="savePluginConf" variant="elevated" prepend-icon="mdi-content-save" class="px-5"> 保存 </VBtn>
-          variant="tonal"
-          @click="savePluginConf"
-        >
-          保存
-        </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>
 
   <!-- 插件数据页面 -->
-  <VDialog
+  <VDialog v-model="pluginInfoDialog" scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
-    v-model="pluginInfoDialog"
+    <VCard :title="`${props.plugin?.plugin_name}`" class="rounded-t">
-    scrollable
+      <DialogCloseBtn v-model="pluginInfoDialog" />
-    max-width="80rem"
-  >
-    <VCard
-      :title="`${props.plugin?.plugin_name}`"
-      class="rounded-t"
-    >
-      <DialogCloseBtn @click="pluginInfoDialog = false" />
       <VCardText>
-        <PageRender
+        <PageRender @action="loadPluginPage" v-for="(item, index) in pluginPageItems" :key="index" :config="item" />
-          v-for="(item, index) in pluginPageItems"
-          :key="index"
-          :config="item"
-        />
       </VCardText>
-      <VCardActions>
+      <VCardActions class="pt-3">
-        <VBtn
-          @click="showPluginConfig"
-        >
-          配置
-        </VBtn>
         <VSpacer />
-        <VBtn
+        <VBtn @click="showPluginConfig" variant="elevated" prepend-icon="mdi-cog" class="px-5"> 配置 </VBtn>
-          variant="tonal"
-          @click="pluginInfoDialog = false"
-        >
-          关闭
-        </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>
-  <!-- 更新插件进度框 -->
+
-  <VDialog
+  <!-- 进度框 -->
-    v-model="progressDialog"
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
-    :scrim="false"
+
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
-      </VCardText>
-    </VCard>
-  </VDialog>
   <!-- 更新日志 -->
-  <VDialog
+  <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
-    v-if="releaseDialog"
+    <VCard :title="`${props.plugin?.plugin_name} 更新说明`">
-    v-model="releaseDialog"
-    width="600"
-    scrollable
-  >
-    <VCard>
       <DialogCloseBtn @click="releaseDialog = false" />
-      <VCardTitle>{{ props.plugin?.plugin_name }} 更新说明</VCardTitle>
       <VersionHistory :history="props.plugin?.history" />
       <VCardText>
-        <VBtn
+        <VBtn @click="updatePlugin" block>
-          @click="updatePlugin"
-          block
-        >
           <template #prepend>
             <VIcon icon="mdi-arrow-up-circle-outline" />
           </template>
@@ -592,7 +489,7 @@ 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;
 }
 </style>

src/components/cards/PosterCard.vue

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

src/components/cards/SiteCard.vue

@@ -1,12 +1,17 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import { useToast } from 'vue-toast-notification'
-import SiteAddEditForm from '../form/SiteAddEditForm.vue'
+import SiteAddEditDialog from '../dialog/SiteAddEditDialog.vue'
 import SiteTorrentTable from '../table/SiteTorrentTable.vue'
 import { requiredValidator } from '@/@validators'
 import api from '@/api'
-import type { Site } from '@/api/types'
+import type { Site, SiteStatistic } from '@/api/types'
-import ExistIcon from '@core/components/ExistIcon.vue'
+import { isNullOrEmptyObject } from '@/@core/utils'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const cardProps = defineProps({
@@ -58,12 +63,14 @@ const userPwForm = ref({
   code: '',
 })
 
+// 站点使用统计
+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)
   }
 }
@@ -75,15 +82,23 @@ async function testSite() {
     testButtonDisable.value = true
 
     const result: { [key: string]: any } = await api.get(`site/test/${cardProps.site?.id}`)
-    if (result.success)
+    if (result.success) $toast.success(`${cardProps.site?.name} 连通性测试成功，可正常使用！`)
-      $toast.success(`${cardProps.site?.name} 连通性测试成功，可正常使用！`)
+    else $toast.error(`${cardProps.site?.name} 连通性测试失败：${result.message}`)
-    else
-      $toast.error(`${cardProps.site?.name} 连通性测试失败：${result.message}`)
 
     testButtonText.value = '测试'
     testButtonDisable.value = false
+
+    getSiteStats()
+  } catch (error) {
+    console.error(error)
   }
-  catch (error) {
+}
+
+// 查询站点使用统计
+async function getSiteStats() {
+  try {
+    siteStats.value = await api.get(`site/statistic/${cardProps.site?.domain}`)
+  } catch (error) {
     console.error(error)
   }
 }
@@ -101,8 +116,7 @@ async function handleResourceBrowse() {
 // 调用API，更新站点Cookie UA
 async function updateSiteCookie() {
   try {
-    if (!userPwForm.value.username || !userPwForm.value.password)
+    if (!userPwForm.value.username || !userPwForm.value.password) return
-      return
 
     // 更新按钮状态
     siteCookieDialog.value = false
@@ -111,26 +125,20 @@ async function updateSiteCookie() {
     progressDialog.value = true
     progressText.value = `正在更新 ${cardProps.site?.name} Cookie & UA ...`
 
-    const result: { [key: string]: any } = await api.get(
+    const result: { [key: string]: any } = await api.get(`site/cookie/${cardProps.site?.id}`, {
-      `site/cookie/${cardProps.site?.id}`,
+      params: {
-      {
+        username: userPwForm.value.username,
-        params: {
+        password: userPwForm.value.password,
-          username: userPwForm.value.username,
+        code: userPwForm.value.code,
-          password: userPwForm.value.password,
-          code: userPwForm.value.code,
-        },
       },
-    )
+    })
 
-    if (result.success)
+    if (result.success) $toast.success(`${cardProps.site?.name} 更新Cookie & UA 成功！`)
-      $toast.success(`${cardProps.site?.name} 更新Cookie & UA 成功！`)
+    else $toast.error(`${cardProps.site?.name} 更新失败：${result.message}`)
-    else
-      $toast.error(`${cardProps.site?.name} 更新失败：${result.message}`)
 
     progressDialog.value = false
     updateButtonDisable.value = false
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
@@ -140,9 +148,29 @@ function openSitePage() {
   window.open(cardProps.site?.url, '_blank')
 }
 
+// 根据站点状态显示不同的状态图标
+const statColor = computed(() => {
+  if (isNullOrEmptyObject(siteStats.value)) {
+    return 'secondary'
+  }
+  if (siteStats.value?.lst_state == 1) {
+    return 'error'
+  } else if (siteStats.value?.lst_state == 0) {
+    if (!siteStats.value?.seconds) return 'secondary'
+    if (siteStats.value?.seconds >= 5) return 'warning'
+    return 'success'
+  }
+})
+
+// 监听resourceDialog，如果为false则重新查询站点使用统计
+watch(resourceDialog, value => {
+  if (!value) getSiteStats()
+})
+
 // 装载时查询站点图标
 onMounted(() => {
   getSiteIcon()
+  getSiteStats()
 })
 </script>
 
@@ -155,103 +183,58 @@ onMounted(() => {
     @click="siteEditDialog = true"
   >
     <template #image>
-      <VAvatar
+      <VAvatar class="absolute right-2 bottom-2 rounded" variant="flat" rounded="0">
-        class="absolute right-2 bottom-2 rounded"
-        variant="flat"
-        rounded="0"
-      >
         <VImg :src="siteIcon" />
       </VAvatar>
     </template>
+
     <VCardItem>
       <VCardTitle class="font-bold">
         <span @click.stop="openSitePage">{{ cardProps.site?.name }}</span>
       </VCardTitle>
       <VCardSubtitle>
-        {{ cardProps.site?.url }}
+        <span @click.stop="openSitePage">{{ cardProps.site?.url }}</span>
       </VCardSubtitle>
     </VCardItem>
 
-    <ExistIcon v-if="cardProps.site?.is_active" />
+    <StatIcon v-if="cardProps.site?.is_active" :color="statColor" />
 
     <VCardText class="py-2">
-      <VTooltip
+      <VTooltip v-if="cardProps.site?.render === 1" text="浏览器仿真">
-        v-if="cardProps.site?.render === 1"
-        text="浏览器仿真"
-      >
         <template #activator="{ props }">
-          <VIcon
+          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-apple-safari" />
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-apple-safari"
-          />
         </template>
       </VTooltip>
 
-      <VTooltip
+      <VTooltip v-if="cardProps.site?.proxy === 1" text="代理">
-        v-if="cardProps.site?.proxy === 1"
-        text="代理"
-      >
         <template #activator="{ props }">
-          <VIcon
+          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-network-outline" />
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-network-outline"
-          />
         </template>
       </VTooltip>
 
-      <VTooltip
+      <VTooltip v-if="cardProps.site?.limit_interval" text="流控">
-        v-if="cardProps.site?.limit_interval"
-        text="流控"
-      >
         <template #activator="{ props }">
-          <VIcon
+          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-speedometer" />
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-speedometer"
-          />
         </template>
       </VTooltip>
 
-      <VTooltip
+      <VTooltip v-if="cardProps.site?.filter" text="过滤">
-        v-if="cardProps.site?.filter"
-        text="过滤"
-      >
         <template #activator="{ props }">
-          <VIcon
+          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-filter-cog-outline" />
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-filter-cog-outline"
-          />
         </template>
       </VTooltip>
     </VCardText>
 
-    <VDivider
+    <VDivider />
-      class="opacity-75"
-      style="border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));"
-    />
 
     <VCardActions>
-      <VBtn
+      <VBtn v-if="!cardProps.site?.public" :disabled="updateButtonDisable" @click.stop="handleSiteUpdate">
-        v-if="!cardProps.site?.public"
-        :disabled="updateButtonDisable"
-        @click.stop="handleSiteUpdate"
-      >
         <template #prepend>
           <VIcon icon="mdi-refresh" />
         </template>
         更新
       </VBtn>
-      <VBtn
+      <VBtn :disabled="testButtonDisable" @click.stop="testSite">
-        :disabled="testButtonDisable"
-        @click.stop="testSite"
-      >
         <template #prepend>
           <VIcon icon="mdi-link" />
         </template>
@@ -266,49 +249,29 @@ onMounted(() => {
     </VCardActions>
   </VCard>
   <!-- 更新站点Cookie & UA弹窗 -->
-  <VDialog
+  <VDialog v-model="siteCookieDialog" max-width="50rem">
-    v-model="siteCookieDialog"
-    max-width="50rem"
-  >
     <!-- Dialog Content -->
     <VCard title="更新站点Cookie & UA">
+      <DialogCloseBtn @click="siteCookieDialog = false" />
       <VCardText>
         <VForm @submit.prevent="() => {}">
           <VRow>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
+              <VTextField v-model="userPwForm.username" label="用户名" :rules="[requiredValidator]" />
-              md="4"
-            >
-              <VTextField
-                v-model="userPwForm.username"
-                label="用户名"
-                :rules="[requiredValidator]"
-              />
             </VCol>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
-              md="4"
-            >
               <VTextField
                 v-model="userPwForm.password"
                 label="密码"
                 :type="isPasswordVisible ? 'text' : 'password'"
-                :append-inner-icon="
+                :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
-                  isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
-                "
                 :rules="[requiredValidator]"
                 @click:append-inner="isPasswordVisible = !isPasswordVisible"
                 @keydown.enter="updateSiteCookie"
               />
             </VCol>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
+              <VTextField v-model="userPwForm.code" label="两步验证" />
-              md="4"
-            >
-              <VTextField
-                v-model="userPwForm.code"
-                label="两步验证"
-              />
             </VCol>
           </VRow>
         </VForm>
@@ -316,20 +279,20 @@ onMounted(() => {
 
       <VCardActions>
         <VSpacer />
-        <VBtn
+        <VBtn variant="elevated" @click="updateSiteCookie" prepend-icon="mdi-refresh" class="px-5"> 开始更新 </VBtn>
-          variant="tonal"
-          @click="updateSiteCookie"
-        >
-          开始更新
-        </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>
-  <SiteAddEditForm
+  <SiteAddEditDialog
     v-if="siteEditDialog"
     v-model="siteEditDialog"
     :siteid="cardProps.site?.id"
-    @save="siteEditDialog = false; emit('update')"
+    @save="
+      () => {
+        siteEditDialog = false
+        emit('update')
+      }
+    "
     @remove="emit('remove')"
     @close="siteEditDialog = false"
   />
@@ -340,6 +303,7 @@ onMounted(() => {
     max-width="80rem"
     scrollable
     z-index="1010"
+    :fullscreen="!display.mdAndUp.value"
   >
     <!-- Dialog Content -->
     <VCard :title="`浏览站点 - ${cardProps.site?.name}`">
@@ -349,24 +313,8 @@ onMounted(() => {
       </VCardText>
     </VCard>
   </VDialog>
-  <VDialog
+  <!-- 进度框 -->
-    v-model="progressDialog"
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
-      <VCardText class="text-center">
-        {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
-      </VCardText>
-    </VCard>
-  </VDialog>
 </template>
 
 <style lang="scss">

src/components/cards/SubscribeCard.vue

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

src/components/cards/TorrentCard.vue

@@ -43,16 +43,13 @@ const downloaded = ref<String[]>([])
 async function getSiteIcon() {
   try {
     siteIcon.value = (await api.get(`site/icon/${torrent?.value?.site}`)).data.icon
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
 
 // 询问并添加下载
-async function handleAddDownload(_site: any = undefined,
+async function handleAddDownload(_site: any = undefined, _media: any = undefined, _torrent: any = undefined) {
-  _media: any = undefined,
-  _torrent: any = undefined) {
   if (!_media || !_torrent || !_site) {
     _site = torrent.value?.site_name
     _media = media.value
@@ -62,18 +59,9 @@ async function handleAddDownload(_site: any = undefined,
   const isConfirmed = await createConfirm({
     title: '确认',
     content: `是否确认下载【${_site}】${_torrent?.title} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
   })
 
-  if (!isConfirmed)
+  if (!isConfirmed) return
-    return
 
   addDownload(_media, _torrent)
 }
@@ -91,13 +79,11 @@ async function addDownload(_media: MediaInfo, _torrent: TorrentInfo) {
       // 添加下载成功
       $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
       downloaded.value.push(_torrent?.enclosure || '')
-    }
+    } else {
-    else {
       // 添加下载失败
       $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败！`)
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
   doneNProgress()
@@ -115,14 +101,10 @@ async function downloadTorrentFile() {
 
 // 促销Chip类
 function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
-  if (downloadVolume === 0)
+  if (downloadVolume === 0) return 'text-white bg-lime-500'
-    return 'text-white bg-lime-500'
+  else if (downloadVolume < 1) return 'text-white bg-green-500'
-  else if (downloadVolume < 1)
+  else if (uploadVolume !== 1) return 'text-white bg-sky-500'
-    return 'text-white bg-green-500'
+  else return 'text-white bg-gray-500'
-  else if (uploadVolume !== 1)
-    return 'text-white bg-sky-500'
-  else
-    return 'text-white bg-gray-500'
 }
 
 // 装载时查询站点图标
@@ -138,15 +120,8 @@ onMounted(() => {
     :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'elevated'"
     @click="handleAddDownload"
   >
-    <template
+    <template v-if="!showMoreTorrents" #image>
-      v-if="!showMoreTorrents"
+      <VAvatar class="absolute right-2 bottom-2 rounded" variant="flat" rounded="0">
-      #image
-    >
-      <VAvatar
-        class="absolute right-2 bottom-2 rounded"
-        variant="flat"
-        rounded="0"
-      >
         <VImg :src="siteIcon" />
       </VAvatar>
     </template>
@@ -159,18 +134,10 @@ onMounted(() => {
       <template #append>
         <div class="me-n3">
           <IconBtn>
-            <VIcon
+            <VIcon icon="mdi-dots-vertical" />
-              icon="mdi-dots-vertical"
+            <VMenu activator="parent" close-on-content-click>
-            />
-            <VMenu
-              activator="parent"
-              close-on-content-click
-            >
               <VList>
-                <VListItem
+                <VListItem variant="plain" @click="openTorrentDetail()">
-                  variant="plain"
-                  @click="openTorrentDetail()"
-                >
                   <template #prepend>
                     <VIcon icon="mdi-information" />
                   </template>
@@ -196,25 +163,11 @@ onMounted(() => {
       {{ torrent?.title }}
     </VCardText>
     <VCardText>{{ torrent?.description }}</VCardText>
-    <VCardItem
+    <VCardItem v-if="torrent?.labels" class="pb-3 pt-0 pe-12">
-      v-if="torrent?.labels"
+      <VChip v-if="torrent?.hit_and_run" variant="elevated" size="small" class="me-1 mb-1 text-white bg-black">
-      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
+      <VChip v-if="torrent?.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
-        v-if="torrent?.freedate_diff"
-        variant="elevated"
-        color="secondary"
-        size="small"
-        class="me-1 mb-1"
-      >
         {{ torrent?.freedate_diff }}
       </VChip>
       <VChip
@@ -227,51 +180,24 @@ onMounted(() => {
       >
         {{ label }}
       </VChip>
-      <VChip
+      <VChip v-if="meta?.edition" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
-        v-if="meta?.edition"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-red-500"
-      >
         {{ meta?.edition }}
       </VChip>
-      <VChip
+      <VChip v-if="meta?.resource_pix" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
-        v-if="meta?.resource_pix"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-red-500"
-      >
         {{ meta?.resource_pix }}
       </VChip>
-      <VChip
+      <VChip v-if="meta?.video_encode" variant="elevated" size="small" class="me-1 mb-1 text-white bg-orange-500">
-        v-if="meta?.video_encode"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-orange-500"
-      >
         {{ meta?.video_encode }}
       </VChip>
-      <VChip
+      <VChip v-if="torrent?.size" variant="elevated" size="small" class="me-1 mb-1 text-white bg-yellow-500">
-        v-if="torrent?.size"
-        variant="elevated"
-        size="small"
-        class="me-1 mb-1 text-white bg-yellow-500"
-      >
         {{ formatFileSize(torrent?.size) }}
       </VChip>
-      <VChip
+      <VChip v-if="meta?.resource_team" variant="elevated" size="small" class="me-1 mb-1 text-white bg-cyan-500">
-        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="
+        :class="getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
-          getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)
-        "
         variant="elevated"
         size="small"
         class="me-1 mb-1"
@@ -280,10 +206,7 @@ onMounted(() => {
       </VChip>
     </VCardItem>
     <VCardActions>
-      <VBtn
+      <VBtn v-if="props.more && props.more.length > 0" @click.stop="showMoreTorrents = !showMoreTorrents">
-        v-if="props.more && props.more.length > 0"
-        @click.stop="showMoreTorrents = !showMoreTorrents"
-      >
         <template #append>
           <VIcon :icon="showMoreTorrents ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
         </template>
@@ -293,30 +216,16 @@ onMounted(() => {
     <VExpandTransition>
       <div v-show="showMoreTorrents">
         <VDivider />
-        <VChipGroup class="p-3">
+        <VChipGroup class="p-3" column>
           <VChip
             v-for="(item, index) in props.more"
             :key="index"
-            @click.stop="
+            @click.stop="handleAddDownload(item.torrent_info?.site_name, item.media_info, item.torrent_info)"
-              handleAddDownload(
-                item.torrent_info?.site_name,
-                item.media_info,
-                item.torrent_info,
-              )
-            "
           >
             <template #append>
+              <VBadge color="primary" :content="`↑${item.torrent_info?.seeders}`" inline size="small" />
               <VBadge
-                color="primary"
+                v-if="item.torrent_info?.downloadvolumefactor !== 1 || item.torrent_info?.uploadvolumefactor !== 1"
-                :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"

src/components/cards/TorrentItem.vue

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

src/components/dialog/ImportCodeDialog.vue

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

src/components/dialog/ProgressDialog.vue

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

src/components/dialog/ReorganizeDialog.vue

@@ -1,9 +1,14 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
-import TmdbSelectorCard from '../cards/TmdbSelectorCard.vue'
+import MediaIdSelector from '../misc/MediaIdSelector.vue'
 import store from '@/store'
 import api from '@/api'
 import { numberValidator } from '@/@validators'
+import { useDisplay } from 'vuetify'
+import ProgressDialog from './ProgressDialog.vue'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const props = defineProps({
@@ -23,11 +28,14 @@ const seasonItems = ref(
   })),
 )
 
+// 当前识别类型
+const mediaSource = ref('themoviedb')
+
 // 提示框
 const $toast = useToast()
 
 // TMDB选择对话框
-const tmdbSelectorDialog = ref(false)
+const mediaSelectorDialog = ref(false)
 
 // 加载进度SSE
 const progressEventSource = ref<EventSource>()
@@ -47,6 +55,7 @@ const transferForm = reactive({
   path: '',
   target: props.target ?? '',
   tmdbid: null,
+  doubanid: null,
   season: null,
   type_name: '',
   transfer_type: '',
@@ -55,7 +64,6 @@ const transferForm = reactive({
   episode_part: '',
   episode_offset: null,
   min_filesize: 0,
-
 })
 
 watchEffect(() => {
@@ -72,7 +80,7 @@ function startLoadingProgress() {
   progressEventSource.value = new EventSource(
     `${import.meta.env.VITE_API_BASE_URL}system/progress/filetransfer?token=${token}`,
   )
-  progressEventSource.value.onmessage = (event) => {
+  progressEventSource.value.onmessage = event => {
     const progress = JSON.parse(event.data)
     if (progress) {
       progressText.value = progress.text
@@ -89,8 +97,7 @@ function stopLoadingProgress() {
 // 整理文件
 // eslint-disable-next-line sonarjs/cognitive-complexity
 async function transfer() {
-  if (!props.logids && !props.path)
+  if (!props.logids && !props.path) return
-    return
 
   // 显示进度条
   progressDialog.value = true
@@ -100,32 +107,33 @@ async function transfer() {
   if (props.path) {
     // 文件整理
     try {
-      const result: { [key: string]: any } = await api.post('transfer/manual', {}, {
+      const result: { [key: string]: any } = await api.post(
-        params: transferForm,
+        'transfer/manual',
-      })
+        {},
+        {
+          params: transferForm,
+        },
+      )
       // 显示结果
-      if (result.success)
+      if (result.success) $toast.success(`${props.path} 整理完成！`)
-        $toast.success(`${props.path} 整理完成！`)
+      else $toast.error(`${props.path} 整理失败：${result.message}！`)
-
+    } catch (e) {
-      else
-        $toast.error(`${props.path} 整理失败：${result.message}！`)
-    }
-    catch (e) {
       console.log(e)
     }
-  }
+  } else if (props.logids) {
-  else if (props.logids) {
     // 日志整理
     for (const logid of props.logids) {
       transferForm.logid = logid
       try {
-        const result: { [key: string]: any } = await api.post('transfer/manual', {}, {
+        const result: { [key: string]: any } = await api.post(
-          params: transferForm,
+          'transfer/manual',
-        })
+          {},
-        if (!result.success)
+          {
-          $toast.error(`历史记录 ${logid} 重新整理失败：${result.message}！`)
+            params: transferForm,
-      }
+          },
-      catch (e) {
+        )
+        if (!result.success) $toast.error(`历史记录 ${logid} 重新整理失败：${result.message}！`)
+      } catch (e) {
         console.log(e)
       }
     }
@@ -138,13 +146,24 @@ async function transfer() {
   // 重新加载
   emit('done')
 }
+
+// 调用API，加载当前系统环境设置
+async function loadSystemSettings() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/env')
+    if (result) mediaSource.value = result.data?.RECOGNIZE_SOURCE || 'themoviedb'
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+onMounted(() => {
+  loadSystemSettings()
+})
 </script>
 
 <template>
-  <VDialog
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
-    scrollable
-    max-width="60rem"
-  >
     <VCard
       :title="`${props.path ? `整理 - ${props.path}` : `整理 - 共 ${props.logids?.length} 条记录`}`"
       class="rounded-t"
@@ -153,10 +172,7 @@ async function transfer() {
       <VCardText class="pt-2">
         <VForm @submit.prevent="() => {}">
           <VRow>
-            <VCol
+            <VCol cols="12" md="8">
-              cols="12"
-              md="8"
-            >
               <VTextField
                 v-model="transferForm.target"
                 label="目的路径"
@@ -164,10 +180,7 @@ async function transfer() {
                 hint="留空将自动整理到媒体库目录"
               />
             </VCol>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
-              md="4"
-            >
               <VSelect
                 v-model="transferForm.transfer_type"
                 label="整理方式"
@@ -184,35 +197,42 @@ async function transfer() {
             </VCol>
           </VRow>
           <VRow>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
-              md="4"
-            >
               <VSelect
                 v-model="transferForm.type_name"
                 label="类型"
-                :items="[{ title: '自动', value: '' }, { title: '电影', value: '电影' }, { title: '电视剧', value: '电视剧' }]"
+                :items="[
+                  { title: '自动', value: '' },
+                  { title: '电影', value: '电影' },
+                  { title: '电视剧', value: '电视剧' },
+                ]"
               />
             </VCol>
-            <VCol
+            <VCol cols="12" md="4">
-              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"
+                @click:append-inner="mediaSelectorDialog = true"
+              />
+              <VTextField
+                v-else
+                v-model="transferForm.doubanid"
+                :disabled="transferForm.type_name === ''"
+                label="豆瓣编号"
+                placeholder="留空自动识别"
+                :rules="[numberValidator]"
+                append-inner-icon="mdi-magnify"
+                hint="点击图标按名称搜索，留空将自动重新识别"
+                @click:append-inner="mediaSelectorDialog = true"
               />
             </VCol>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
-              md="4"
-            >
               <VSelect
                 v-show="transferForm.type_name === '电视剧'"
                 v-model.number="transferForm.season"
@@ -266,49 +286,26 @@ async function transfer() {
           </VRow>
         </VForm>
       </VCardText>
-      <VCardActions>
+      <VCardActions class="pt-3">
-        <VBtn depressed @click="emit('close')">
-          取消
-        </VBtn>
         <VSpacer />
-        <VBtn
+        <VBtn variant="elevated" @click="transfer" prepend-icon="mdi-arrow-right-bold" class="px-5"> 开始整理 </VBtn>
-          variant="tonal"
-          @click="transfer"
-        >
-          开始整理
-        </VBtn>
       </VCardActions>
     </VCard>
     <!-- 手动整理进度框 -->
-    <VDialog
+    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" :value="progressValue" />
-      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>
     <!-- TMDB ID搜索框 -->
-    <VDialog
+    <VDialog v-model="mediaSelectorDialog" width="40rem" scrollable max-height="85vh">
-      v-model="tmdbSelectorDialog"
+      <MediaIdSelector
-      width="40rem"
+        v-if="mediaSource === 'themoviedb'"
-      scrollable
-      max-height="85vh"
-    >
-      <TmdbSelectorCard
         v-model="transferForm.tmdbid"
-        @close="tmdbSelectorDialog = false"
+        @close="mediaSelectorDialog = false"
+        :type="mediaSource"
+      />
+      <MediaIdSelector
+        v-else
+        v-model="transferForm.doubanid"
+        @close="mediaSelectorDialog = false"
+        :type="mediaSource"
       />
     </VDialog>
   </VDialog>

src/components/dialog/SiteAddEditDialog.vue

@@ -4,6 +4,14 @@ import type { Site } from '@/api/types'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import { numberValidator, requiredValidator } from '@/@validators'
 import api from '@/api'
+import { useDisplay } from 'vuetify'
+import { useConfirm } from 'vuetify-use-dialog'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 确认框
+const createConfirm = useConfirm()
 
 // 输入参数
 const props = defineProps({
@@ -48,8 +56,7 @@ const priorityItems = ref(
 
 // 监控输入参数
 watchEffect(async () => {
-  if (props.siteid)
+  if (props.siteid) fetchSiteInfo()
-    fetchSiteInfo()
 })
 
 // 查询站点信息
@@ -58,27 +65,24 @@ async function fetchSiteInfo() {
     siteForm.value = await api.get(`site/${props.siteid}`)
     siteForm.value.proxy = siteForm.value.proxy === 1
     siteForm.value.render = siteForm.value.render === 1
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
 
 // 调用API 新增站点
 async function addSite() {
-  if (!siteForm.value?.url)
+  if (!siteForm.value?.url) return
-    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}`)
     }
-
+  } catch (error) {
-    else { $toast.error(`新增站点失败：${result.message}`) }
-  }
-  catch (error) {
     console.error(error)
   }
   doneNProgress()
@@ -86,14 +90,18 @@ async function addSite() {
 
 // 调用API删除站点信息
 async function deleteSiteInfo() {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认删除站点？`,
+  })
+
+  if (!isConfirmed) return
+
   try {
     const result: { [key: string]: any } = await api.delete(`site/${siteForm.value?.id}`)
-    if (result.success)
+    if (result.success) emit('remove')
-      emit('remove')
-
     else $toast.error(`${siteForm.value?.name} 删除失败：${result.message}`)
-  }
+  } catch (error) {
-  catch (error) {
     $toast.error(`${siteForm.value?.name} 删除失败！`)
     console.error(error)
   }
@@ -107,10 +115,10 @@ async function updateSiteInfo() {
     if (result.success) {
       $toast.success(`${siteForm.value?.name} 更新成功！`)
       emit('save')
+    } else {
+      $toast.error(`${siteForm.value?.name} 更新失败：${result.message}`)
     }
-    else { $toast.error(`${siteForm.value?.name} 更新失败：${result.message}`) }
+  } catch (error) {
-  }
-  catch (error) {
     $toast.error(`${siteForm.value?.name} 更新失败！`)
     console.error(error)
   }
@@ -119,13 +127,7 @@ async function updateSiteInfo() {
 </script>
 
 <template>
-  <VDialog
+  <VDialog scrollable :close-on-back="false" persistent eager max-width="50rem" :fullscreen="!display.mdAndUp.value">
-    scrollable
-    :close-on-back="false"
-    persistent
-    eager
-    max-width="60rem"
-  >
     <VCard
       :title="`${props.oper === 'add' ? '新增' : '编辑'}站点${props.oper !== 'add' ? ` - ${siteForm.name}` : ''}`"
       class="rounded-t"
@@ -134,10 +136,7 @@ async function updateSiteInfo() {
       <VCardText class="pt-2">
         <VForm @submit.prevent="() => {}">
           <VRow>
-            <VCol
+            <VCol cols="12" md="6">
-              cols="12"
-              md="6"
-            >
               <VTextField
                 v-model="siteForm.url"
                 label="站点地址"
@@ -145,10 +144,7 @@ async function updateSiteInfo() {
                 hint="格式：http://www.example.com/"
               />
             </VCol>
-            <VCol
+            <VCol cols="12" md="3">
-              cols="12"
-              md="3"
-            >
               <VSelect
                 v-model="siteForm.pri"
                 label="优先级"
@@ -157,15 +153,8 @@ async function updateSiteInfo() {
                 hint="站点资源下载优先级，优先级数字越小越优先下载"
               />
             </VCol>
-            <VCol
+            <VCol cols="12" md="3">
-              cols="12"
+              <VSelect v-model="siteForm.is_active" :items="statusItems" label="状态" />
-              md="3"
-            >
-              <VSelect
-                v-model="siteForm.is_active"
-                :items="statusItems"
-                label="状态"
-              />
             </VCol>
           </VRow>
           <VRow>
@@ -183,6 +172,16 @@ async function updateSiteInfo() {
                 hint="浏览器打开站点首页，打开开发人员工具，刷新页面后在网络选项中找到首页地址，在请求头中获取Cookie信息"
               />
             </VCol>
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="siteForm.token"
+                label="请求头（Authorization）"
+                hint="在开发人员工具，网络请求头中获取Authorization，仅个别站点需要"
+              />
+            </VCol>
+            <VCol cols="12" md="6">
+              <VTextField v-model="siteForm.apikey" label="令牌（API Key）" hint="站点的访问API Key，仅个别站点需要" />
+            </VCol>
             <VCol cols="12">
               <VTextField
                 v-model="siteForm.ua"
@@ -192,10 +191,7 @@ async function updateSiteInfo() {
             </VCol>
           </VRow>
           <VRow>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
-              md="4"
-            >
               <VTextField
                 v-model="siteForm.limit_interval"
                 label="单位周期（秒）"
@@ -203,10 +199,7 @@ async function updateSiteInfo() {
                 hint="设定站点限流的单位周期，单位为秒，0为不限流"
               />
             </VCol>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
-              md="4"
-            >
               <VTextField
                 v-model="siteForm.limit_count"
                 label="访问次数"
@@ -214,10 +207,7 @@ async function updateSiteInfo() {
                 hint="设定单位周期内站点允许的访问次数，0为不限制"
               />
             </VCol>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
-              md="4"
-            >
               <VTextField
                 v-model="siteForm.limit_seconds"
                 label="访问间隔（秒）"
@@ -227,20 +217,10 @@ async function updateSiteInfo() {
             </VCol>
           </VRow>
           <VRow>
-            <VCol
+            <VCol cols="12" md="6">
-              cols="12"
+              <VSwitch v-model="siteForm.proxy" label="代理" hint="站点是否需要代理访问，需要设置好代理服务器信息" />
-              md="6"
-            >
-              <VSwitch
-                v-model="siteForm.proxy"
-                label="代理"
-                hint="站点是否需要代理访问，需要设置好代理服务器信息"
-              />
             </VCol>
-            <VCol
+            <VCol cols="12" md="6">
-              cols="12"
-              md="6"
-            >
               <VSwitch
                 v-model="siteForm.render"
                 label="仿真"
@@ -250,34 +230,28 @@ async function updateSiteInfo() {
           </VRow>
         </VForm>
       </VCardText>
-      <VCardActions>
+      <VCardActions class="pt-3">
-        <VBtn
+        <VBtn v-if="props.oper !== 'add'" color="error" @click="deleteSiteInfo" variant="outlined" class="me-3">
-          v-if="props.oper === 'add'"
-          @click="emit('close')"
-        >
-          取消
-        </VBtn>
-        <VBtn
-          v-else
-          color="error"
-          @click="deleteSiteInfo"
-        >
           删除
         </VBtn>
         <VSpacer />
         <VBtn
           v-if="props.oper === 'add'"
           color="primary"
-          variant="tonal"
+          variant="elevated"
           @click="addSite"
+          prepend-icon="mdi-plus"
+          class="px-5"
         >
           新增
         </VBtn>
         <VBtn
           v-else
           color="primary"
-          variant="tonal"
+          variant="elevated"
           @click="updateSiteInfo"
+          prepend-icon="mdi-content-save"
+          class="px-5"
         >
           保存
         </VBtn>

src/components/dialog/SubscribeEditDialog.vue

@@ -3,6 +3,14 @@ import { useToast } from 'vue-toast-notification'
 import { numberValidator } from '@/@validators'
 import api from '@/api'
 import type { Site, Subscribe } from '@/api/types'
+import { useDisplay } from 'vuetify'
+import { useConfirm } from 'vuetify-use-dialog'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 确认框
+const createConfirm = useConfirm()
 
 // 输入参数
 const props = defineProps({
@@ -43,6 +51,8 @@ const subscribeForm = ref<Subscribe>({
   username: '',
   current_priority: 0,
   save_path: '',
+  date: '',
+  show_edit_dialog: false,
 })
 
 // 提示框
@@ -57,10 +67,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)
   }
 }
@@ -69,23 +79,16 @@ async function updateSubscribeInfo() {
 async function saveDefaultSubscribeConfig() {
   try {
     let subscribe_config_url = ''
-    if (props.type === '电影')
+    if (props.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
-      subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
+    else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
-    else
-      subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
 
-    const result: { [key: string]: any } = await api.post(
+    const result: { [key: string]: any } = await api.post(subscribe_config_url, subscribeForm.value)
-      subscribe_config_url,
+    if (result.success) $toast.success(`${props.type}订阅默认规则保存成功`)
-      subscribeForm.value)
+    else $toast.error(`${props.type}订阅默认规则保存失败！`)
-    if (result.success)
-      $toast.success(`${props.type}订阅默认规则保存成功`)
-    else
-      $toast.error(`${props.type}订阅默认规则保存失败！`)
 
     // 通知父组件刷新
     emit('save')
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -94,17 +97,13 @@ async function saveDefaultSubscribeConfig() {
 async function queryDefaultSubscribeConfig() {
   try {
     let subscribe_config_url = ''
-    if (props.type === '电影')
+    if (props.type === '电影') subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
-      subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
+    else subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
-    else
-      subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
 
     const result: { [key: string]: any } = await api.get(subscribe_config_url)
 
-    if (result.data.value)
+    if (result.data.value) subscribeForm.value = result.data?.value ?? ''
-      subscribeForm.value = result.data?.value ?? ''
+  } catch (error) {
-  }
-  catch (error) {
     console.log(error)
   }
 }
@@ -116,8 +115,7 @@ async function loadSites() {
 
     // 过滤站点，只有启用的站点才显示
     siteList.value = data.filter(item => item.is_active)
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
@@ -125,10 +123,9 @@ async function loadSites() {
 // 获取站点列表选择框数据
 async function getSiteList() {
   // 加载订阅站点列表
-  if (!siteList.value.length)
+  if (!siteList.value.length) await loadSites()
-    await loadSites()
 
-  const maps = siteList.value.map((item) => {
+  const maps = siteList.value.map(item => {
     return {
       title: item.name,
       value: item.id,
@@ -141,31 +138,31 @@ async function getSiteList() {
 // 获取订阅信息
 async function getSubscribeInfo() {
   try {
-    const result: Subscribe = await api.get(
+    const result: Subscribe = await api.get(`subscribe/${props.subid}`)
-      `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(
+    const result: { [key: string]: any } = await api.delete(`subscribe/${props.subid}`)
-      `subscribe/${props.subid}`,
-    )
 
     if (result.success) {
       // 通知父组件刷新
       emit('remove')
     }
-  }
+  } catch (e) {
-  catch (e) {
     console.log(e)
   }
 }
@@ -256,31 +253,27 @@ const effectOptions = ref([
 
 onMounted(() => {
   getSiteList()
-  if (props.subid)
+  if (props.subid) getSubscribeInfo()
-    getSubscribeInfo()
 
-  if (props.default)
+  if (props.default) queryDefaultSubscribeConfig()
-    queryDefaultSubscribeConfig()
 })
 </script>
 
 <template>
-  <VDialog
+  <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
-    scrollable
-    max-width="60rem"
-  >
     <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">
         <DialogCloseBtn @click="emit('close')" />
         <VForm @submit.prevent="() => {}">
           <VRow>
-            <VCol
+            <VCol cols="12" md="8">
-              cols="12"
-              md="8"
-            >
               <VTextField
                 v-if="!props.default"
                 v-model="subscribeForm.keyword"
@@ -288,88 +281,50 @@ onMounted(() => {
                 hint="设定搜索关键词后，将使用此关键词搜索站点资源，否则自动使用themoviedb中的名称搜索"
               />
             </VCol>
-            <VCol
+            <VCol v-if="subscribeForm.type === '电视剧'" cols="12" md="2">
-              v-if="subscribeForm.type === '电视剧'"
-              cols="12"
-              md="2"
-            >
               <VTextField
                 v-model="subscribeForm.total_episode"
                 label="总集数"
                 :rules="[numberValidator]"
-                hint="设定剧集的总集数，以应对themoviedb中剧集信息未维护完整，导致提前结束订阅的情况"
+                hint="手动设定总集数"
               />
             </VCol>
-            <VCol
+            <VCol v-if="subscribeForm.type === '电视剧'" cols="12" md="2">
-              v-if="subscribeForm.type === '电视剧'"
-              cols="12"
-              md="2"
-            >
               <VTextField
                 v-model="subscribeForm.start_episode"
                 label="开始集数"
                 :rules="[numberValidator]"
-                hint="只订阅下载此集数及之后的剧集"
+                hint="只下载此集数及之后的集"
               />
             </VCol>
           </VRow>
           <VRow>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
+              <VSelect v-model="subscribeForm.quality" label="质量" :items="qualityOptions" />
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.quality"
-                label="质量"
-                :items="qualityOptions"
-              />
             </VCol>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
+              <VSelect v-model="subscribeForm.resolution" label="分辨率" :items="resolutionOptions" />
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.resolution"
-                label="分辨率"
-                :items="resolutionOptions"
-              />
             </VCol>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
+              <VSelect v-model="subscribeForm.effect" label="特效" :items="effectOptions" />
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.effect"
-                label="特效"
-                :items="effectOptions"
-              />
             </VCol>
           </VRow>
           <VRow>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
-              md="4"
-            >
               <VTextField
                 v-model="subscribeForm.include"
                 label="包含（关键字、正则式）"
                 hint="支持正则表达式，多个关键字用 | 分隔表示或"
               />
             </VCol>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
-              md="4"
-            >
               <VTextField
                 v-model="subscribeForm.exclude"
                 label="排除（关键字、正则式）"
                 hint="支持正则表达式，多个关键字用 | 分隔表示或"
               />
             </VCol>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
-              md="4"
-            >
               <VSelect
                 v-model="subscribeForm.sites"
                 :items="selectSitesOptions"
@@ -381,9 +336,7 @@ onMounted(() => {
             </VCol>
           </VRow>
           <VRow>
-            <VCol
+            <VCol cols="12">
-              cols="12"
-            >
               <VTextField
                 v-model="subscribeForm.save_path"
                 label="保存路径"
@@ -392,38 +345,41 @@ onMounted(() => {
             </VCol>
           </VRow>
           <VRow>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
-              md="4"
-            >
               <VSwitch
                 v-model="subscribeForm.best_version"
                 label="洗版"
                 hint="开启后不管媒体库是否存在，均会根据洗版优先级进行过滤下载，直到下载到了最高优先级的资源为止"
               />
             </VCol>
-            <VCol
+            <VCol cols="12" md="4">
-              cols="12"
-              md="4"
-            >
               <VSwitch
                 v-model="subscribeForm.search_imdbid"
                 label="使用 ImdbID 搜索"
                 hint="开启后将使用 ImdbID 搜索资源，搜索结果更精确，但不是所有站点都支持"
               />
             </VCol>
+            <VCol v-if="props.default" cols="12" md="4">
+              <VSwitch
+                v-model="subscribeForm.show_edit_dialog"
+                label="订阅时编辑更多规则"
+                hint="开启后将在添加订阅后弹出编辑订阅的对话框，方便用户编辑订阅规则"
+              />
+            </VCol>
           </VRow>
         </VForm>
       </VCardText>
 
-      <VCardActions>
+      <VCardActions class="pt-3">
-        <VBtn v-if="!props.default" color="error" @click="removeSubscribe">
+        <VBtn v-if="!props.default" color="error" @click="removeSubscribe" variant="outlined" class="me-3">
           取消订阅
         </VBtn>
         <VSpacer />
         <VBtn
-          variant="tonal"
+          variant="elevated"
-          @click="`${props.default ? saveDefaultSubscribeConfig() : updateSubscribeInfo()}`"
+          @click=";`${props.default ? saveDefaultSubscribeConfig() : updateSubscribeInfo()}`"
+          prepend-icon="mdi-content-save"
+          class="px-5"
         >
           保存
         </VBtn>

src/components/dialog/SubscribeHistoryDialog.vue

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

src/components/filebrowser/FileList.vue

@@ -4,12 +4,13 @@ import type { PropType } from 'vue'
 import { useConfirm } from 'vuetify-use-dialog'
 import axios from 'axios'
 import { useToast } from 'vue-toast-notification'
-import ReorganizeForm from '../form/ReorganizeForm.vue'
+import ReorganizeDialog from '../dialog/ReorganizeDialog.vue'
 import { formatBytes } from '@core/utils/formatters'
 import type { Context, EndPoints, FileItem } from '@/api/types'
 import store from '@/store'
 import api from '@/api'
 import MediaInfoCard from '@/components/cards/MediaInfoCard.vue'
+import ProgressDialog from '../dialog/ProgressDialog.vue'
 
 // 输入参数
 const inProps = defineProps({
@@ -73,18 +74,11 @@ const nameTestResult = ref<Context>()
 // 识别结果对话框
 const nameTestDialog = ref(false)
 
-// 延迟加载
-const defer = (_: number) => true
-
 // 目录过滤
-const dirs = computed(() =>
+const dirs = computed(() => items.value.filter(item => item.type === 'dir' && item.basename.includes(filter.value)))
-  items.value.filter(item => item.type === 'dir' && item.basename.includes(filter.value)),
-)
 
 // 文件过滤
-const files = computed(() =>
+const files = computed(() => items.value.filter(item => item.type === 'file' && item.basename.includes(filter.value)))
-  items.value.filter(item => item.type === 'file' && item.basename.includes(filter.value)),
-)
 
 // 是否目录
 const isDir = computed(() => inProps.path?.endsWith('/'))
@@ -113,7 +107,7 @@ async function load() {
     method: inProps.endpoints?.list.method || 'get',
   }
   // 加载数据
-  items.value = await axiosInstance.value.request(config) ?? []
+  items.value = (await axiosInstance.value.request(config)) ?? []
   emit('loading', false)
   loading.value = false
 }
@@ -122,17 +116,7 @@ async function load() {
 async function deleteItem(item: FileItem) {
   const confirmed = await createConfirm({
     title: '确认',
-    content: `是否确认删除${
+    content: `是否确认删除${item.type === 'dir' ? '目录' : '文件'} ${item.basename}？`,
-                item.type === 'dir' ? '目录' : '文件'
-            } ${item.basename}？`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    cancellationButtonProps: {
-      variant: 'tonal',
-    },
   })
 
   if (confirmed) {
@@ -161,8 +145,7 @@ function changePath(_path: string) {
 
 // 新窗口中下载文件
 function download(path: string) {
-  if (!path)
+  if (!path) return
-    return
   const token = store.state.auth.token
   const url_path = inProps.endpoints?.download.url
     .replace(/{storage}/g, storage.value)
@@ -174,8 +157,7 @@ function download(path: string) {
 
 // 显示图片
 function getImgLink(path: string) {
-  if (!path)
+  if (!path) return ''
-    return ''
   const token = store.state.auth.token
   const url_path = inProps.endpoints?.image.url
     .replace(/{storage}/g, storage.value)
@@ -261,11 +243,9 @@ async function recognize(path: string) {
     })
     // 关闭进度条
     progressDialog.value = false
-    if (!nameTestResult.value)
+    if (!nameTestResult.value) $toast.error(`${path} 识别失败！`)
-      $toast.error(`${path} 识别失败！`)
     nameTestDialog.value = !!nameTestResult.value?.meta_info?.name
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
@@ -283,12 +263,9 @@ async function scrape(path: string) {
     })
     // 关闭进度条
     progressDialog.value = false
-    if (!result.success)
+    if (!result.success) $toast.error(result.message)
-      $toast.error(result.message)
+    else $toast.success(`${path}削刮完成！`)
-    else
+  } catch (error) {
-      $toast.success(`${path}削刮完成！`)
-  }
-  catch (error) {
     console.error(error)
   }
 }
@@ -303,7 +280,8 @@ const dropdownItems = ref([
         recognize(_item.path || '')
       },
     },
-  }, {
+  },
+  {
     title: '刮削',
     value: 2,
     props: {
@@ -312,7 +290,8 @@ const dropdownItems = ref([
         scrape(_item.path || '')
       },
     },
-  }, {
+  },
+  {
     title: '重命名',
     value: 3,
     props: {
@@ -361,49 +340,26 @@ onMounted(() => {
       />
       <VSpacer v-if="isFile" />
       <IconBtn v-if="isFile" @click="recognize(inProps.path || '')">
-        <VIcon color="primary">
+        <VIcon color="primary"> mdi-text-recognition </VIcon>
-          mdi-text-recognition
-        </VIcon>
       </IconBtn>
       <IconBtn v-if="isFile" @click="download(inProps.path || '')">
-        <VIcon color="primary">
+        <VIcon color="primary"> mdi-download </VIcon>
-          mdi-download
-        </VIcon>
       </IconBtn>
       <IconBtn v-if="!isFile" @click="load">
-        <VIcon color="primary">
+        <VIcon color="primary"> mdi-refresh </VIcon>
-          mdi-refresh
-        </VIcon>
       </IconBtn>
     </VToolbar>
-    <VCardText
+    <VCardText v-if="loading" class="text-center flex flex-col items-center">
-      v-if="loading"
+      <VProgressCircular size="48" indeterminate color="primary" />
-      class="text-center flex flex-col items-center"
-    >
-      <VProgressCircular
-        size="48"
-        indeterminate
-        color="primary"
-      />
     </VCardText>
-    <VCardText
+    <VCardText v-if="!path" class="grow d-flex justify-center align-center grey--text"> 选择目录或文件 </VCardText>
-      v-if="!path"
+    <VCardText v-else-if="isFile && !isImage" class="text-center break-all">
-      class="grow d-flex justify-center align-center grey--text"
+      <strong>{{ items[0]?.name }}</strong
-    >
+      ><br />
-      选择目录或文件
+      大小：{{ formatBytes(items[0]?.size || 0) }}<br />
-    </VCardText>
-    <VCardText
-      v-else-if="isFile && !isImage"
-      class="text-center break-all"
-    >
-      <strong>{{ items[0]?.name }}</strong><br>
-      大小：{{ formatBytes(items[0]?.size || 0) }}<br>
       修改时间：{{ formatTime(items[0]?.modify_time || 0) }}
     </VCardText>
-    <VCardText
+    <VCardText v-else-if="isFile && isImage" class="grow d-flex justify-center align-center">
-      v-else-if="isFile && isImage"
-      class="grow d-flex justify-center align-center"
-    >
       <VImg :src="getImgLink(path)" max-width="100%" max-height="100%" />
     </VCardText>
     <VCardText v-else-if="dirs.length || files.length" class="p-0">
@@ -412,13 +368,12 @@ onMounted(() => {
           <template #default="{ item }">
             <VHover>
               <template #default="hover">
-                <VListItem
+                <VListItem v-bind="hover.props" class="px-3 pe-1" @click="changePath(item.path)">
-                  v-bind="hover.props"
-                  class="px-3 pe-1"
-                  @click="changePath(item.path)"
-                >
                   <template #prepend>
-                    <VIcon v-if="inProps.icons && item.extension" :icon="inProps.icons[item.extension.toLowerCase()] || inProps.icons?.other" />
+                    <VIcon
+                      v-if="inProps.icons && item.extension"
+                      :icon="inProps.icons[item.extension.toLowerCase()] || inProps.icons?.other"
+                    />
                     <VIcon v-else icon="mdi-folder-outline" />
                   </template>
                   <VListItemTitle v-text="item.name" />
@@ -427,13 +382,8 @@ onMounted(() => {
                   </VListItemSubtitle>
                   <template #append>
                     <IconBtn class="d-sm-none">
-                      <VIcon
+                      <VIcon icon="mdi-dots-vertical" />
-                        icon="mdi-dots-vertical"
+                      <VMenu activator="parent" close-on-content-click>
-                      />
-                      <VMenu
-                        activator="parent"
-                        close-on-content-click
-                      >
                         <VList>
                           <VListItem
                             v-for="(menu, i) in dropdownItems"
@@ -495,79 +445,41 @@ onMounted(() => {
         </VVirtualScroll>
       </VList>
     </VCardText>
-    <VCardText
+    <VCardText v-else-if="filter" class="grow d-flex justify-center align-center grey--text py-5">
-      v-else-if="filter"
-      class="grow d-flex justify-center align-center grey--text py-5"
-    >
       没有目录或文件
     </VCardText>
-    <VCardText
+    <VCardText v-else-if="!loading" class="grow d-flex justify-center align-center grey--text py-5"> 空目录 </VCardText>
-      v-else-if="!loading"
-      class="grow d-flex justify-center align-center grey--text py-5"
-    >
-      空目录
-    </VCardText>
   </VCard>
   <!-- 重命名弹窗 -->
-  <VDialog
+  <VDialog v-if="renamePopper" v-model="renamePopper" max-width="50rem">
-    v-if="renamePopper"
-    v-model="renamePopper"
-    max-width="50rem"
-  >
     <VCard title="重命名">
       <VCardText>
         <VTextField v-model="newName" label="名称" />
       </VCardText>
       <VCardActions>
-        <VBtn depressed @click="renamePopper = false">
+        <VBtn depressed @click="renamePopper = false"> 取消 </VBtn>
-          取消
-        </VBtn>
         <VSpacer />
-        <VBtn
+        <VBtn :disabled="!newName" depressed variant="tonal" @click="rename"> 重命名 </VBtn>
-          :disabled="!newName"
-          depressed
-          variant="tonal"
-          @click="rename"
-        >
-          重命名
-        </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>
   <!-- 文件整理弹窗 -->
-  <ReorganizeForm
+  <ReorganizeDialog
     v-if="transferPopper"
     v-model="transferPopper"
     :path="currentItem?.path"
-    @done="transferPopper = false; load()"
+    @done="
+      () => {
+        transferPopper = false
+        load()
+      }
+    "
     @close="transferPopper = false"
   />
-  <!-- 手动整理进度框 -->
+  <!-- 进度框 -->
-  <VDialog
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" :value="progressValue" />
-    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>
   <!-- 识别结果对话框 -->
-  <VDialog
+  <VDialog v-if="nameTestDialog" v-model="nameTestDialog" width="50rem">
-    v-if="nameTestDialog"
-    v-model="nameTestDialog"
-    width="50rem"
-  >
     <VCard>
       <DialogCloseBtn @click="nameTestDialog = false" />
       <VCardItem>
@@ -579,14 +491,20 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .v-card {
-    block-size: 100%;
+  block-size: 100%;
 }
 
-.v-toolbar{
+.v-toolbar {
   background: rgb(var(--v-table-header-background));
 }
 
 .virtual-scroll-div {
   block-size: calc(100vh - 14rem);
 }
+
+@media (width <= 768px) {
+  .virtual-scroll-div {
+    block-size: calc(100vh - 17rem);
+  }
+}
 </style>

src/components/form/ImportCodeForm.vue

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

src/components/misc/DashboardElement.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { DashboardItem } from '@/api/types'
+import AnalyticsMediaStatistic from '@/views/dashboard/AnalyticsMediaStatistic.vue'
+import AnalyticsScheduler from '@/views/dashboard/AnalyticsScheduler.vue'
+import AnalyticsSpeed from '@/views/dashboard/AnalyticsSpeed.vue'
+import AnalyticsStorage from '@/views/dashboard/AnalyticsStorage.vue'
+import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue'
+import AnalyticsCpu from '@/views/dashboard/AnalyticsCpu.vue'
+import AnalyticsMemory from '@/views/dashboard/AnalyticsMemory.vue'
+import MediaServerLatest from '@/views/dashboard/MediaServerLatest.vue'
+import MediaServerLibrary from '@/views/dashboard/MediaServerLibrary.vue'
+import MediaServerPlaying from '@/views/dashboard/MediaServerPlaying.vue'
+import DashboardRender from '@/components/render/DashboardRender.vue'
+import { isNullOrEmptyObject } from '@/@core/utils'
+// 输入参数
+const props = defineProps({
+  // 仪表板配置
+  config: Object as PropType<DashboardItem>,
+})
+</script>
+<template>
+  <!-- 系统内置的仪表板 -->
+  <AnalyticsStorage v-if="config?.id === 'storage'" />
+  <AnalyticsMediaStatistic v-else-if="config?.id === 'mediaStatistic'" />
+  <AnalyticsWeeklyOverview v-else-if="config?.id === 'weeklyOverview'" />
+  <AnalyticsSpeed v-else-if="config?.id === 'speed'" />
+  <AnalyticsScheduler v-else-if="config?.id === 'scheduler'" />
+  <AnalyticsCpu v-else-if="config?.id === 'cpu'" />
+  <AnalyticsMemory v-else-if="config?.id === 'memory'" />
+  <MediaServerLibrary v-else-if="config?.id === 'library'" />
+  <MediaServerPlaying v-else-if="config?.id === 'playing'" />
+  <MediaServerLatest v-else-if="config?.id === 'latest'" />
+  <!-- 插件仪表板 -->
+  <VCard v-else-if="!isNullOrEmptyObject(props.config)">
+    <VCardItem v-if="props.config?.attrs.border !== false">
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>
+        {{ props.config?.name }}
+      </VCardTitle>
+    </VCardItem>
+    <VCardText :class="{ 'p-0': props.config?.attrs.border === false }">
+      <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
+    </VCardText>
+    <div v-if="props.config?.attrs.border === false" class="absolute right-5 top-5">
+      <VIcon class="cursor-move">mdi-drag</VIcon>
+    </div>
+  </VCard>
+</template>

src/components/misc/MediaIdSelector.vue

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

src/components/misc/VersionHistory.vue

@@ -8,17 +8,16 @@ const props = defineProps({
 </script>
 
 <template>
-  <VCardItem>
+  <VCardText>
     <VList>
-      <VListItem
+      <VListItem v-for="(value, key) in props.history" :key="key">
-        v-for="(value, key) in props.history"
+        <VListItemTitle class="font-bold text-lg">
-        :key="key"
+          {{ key }}
-      >
+        </VListItemTitle>
-        <VListItemTitle>{{ key }}</VListItemTitle>
         <div class="text-gray-500">
           {{ value }}
         </div>
       </VListItem>
     </VList>
-  </VCardItem>
+  </VCardText>
 </template>

src/components/render/DashboardRender.vue

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

src/components/render/PageRender.vue

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

src/components/slide/SlideView.vue

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

src/components/slide/SlideViewTitle.vue

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

src/components/table/SiteTorrentTable.vue

@@ -60,22 +60,17 @@ async function getResourceList() {
   try {
     resourceDataList.value = await api.get(`site/resource/${props.site}`)
     resourceLoading.value = false
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
 
 // 促销Chip类
 function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
-  if (downloadVolume === 0)
+  if (downloadVolume === 0) return 'text-white bg-lime-500'
-    return 'text-white bg-lime-500'
+  else if (downloadVolume < 1) return 'text-white bg-green-500'
-  else if (downloadVolume < 1)
+  else if (uploadVolume !== 1) return 'text-white bg-sky-500'
-    return 'text-white bg-green-500'
+  else return 'text-white bg-gray-500'
-  else if (uploadVolume !== 1)
-    return 'text-white bg-sky-500'
-  else
-    return 'text-white bg-gray-500'
 }
 
 // 添加下载
@@ -83,18 +78,9 @@ async function addDownload(_torrent: any) {
   const isConfirmed = await createConfirm({
     title: '确认',
     content: `是否确认下载【${_torrent.site_name}】${_torrent?.title} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
   })
 
-  if (!isConfirmed)
+  if (!isConfirmed) return
-    return
 
   startNProgress()
   try {
@@ -103,13 +89,11 @@ async function addDownload(_torrent: any) {
     if (result.success) {
       // 添加下载成功
       $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
-    }
+    } else {
-    else {
       // 添加下载失败
       $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败：${result.message || '未知错误'}`)
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
   doneNProgress()
@@ -146,21 +130,10 @@ onMounted(() => {
         <div class="text-sm my-1">
           {{ item.description }}
         </div>
-        <VChip
+        <VChip v-if="item.hit_and_run" variant="elevated" size="small" class="me-1 mb-1 text-white bg-black">
-          v-if="item.hit_and_run"
-          variant="elevated"
-          size="small"
-          class="me-1 mb-1 text-white bg-black"
-        >
           H&R
         </VChip>
-        <VChip
+        <VChip v-if="item.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
-          v-if="item.freedate_diff"
-          variant="elevated"
-          color="secondary"
-          size="small"
-          class="me-1 mb-1"
-        >
           {{ item.freedate_diff }}
         </VChip>
         <VChip
@@ -175,9 +148,7 @@ onMounted(() => {
         </VChip>
         <VChip
           v-if="item.downloadvolumefactor !== 1 || item.uploadvolumefactor !== 1"
-          :class="
+          :class="getVolumeFactorClass(item.downloadvolumefactor, item.uploadvolumefactor)"
-            getVolumeFactorClass(item.downloadvolumefactor, item.uploadvolumefactor)
-          "
           variant="elevated"
           size="small"
           class="me-1 mb-1"
@@ -206,18 +177,10 @@ onMounted(() => {
     <template #item.actions="{ item }">
       <div class="me-n3">
         <IconBtn>
-          <VIcon
+          <VIcon icon="mdi-dots-vertical" />
-            icon="mdi-dots-vertical"
+          <VMenu activator="parent" close-on-content-click>
-          />
-          <VMenu
-            activator="parent"
-            close-on-content-click
-          >
             <VList>
-              <VListItem
+              <VListItem variant="plain" @click="openTorrentDetail(item.page_url || '')">
-                variant="plain"
-                @click="openTorrentDetail(item.page_url || '')"
-              >
                 <template #prepend>
                   <VIcon icon="mdi-information" />
                 </template>
@@ -238,8 +201,6 @@ onMounted(() => {
         </IconBtn>
       </div>
     </template>
-    <template #no-data>
+    <template #no-data> 没有数据 </template>
-      没有数据
-    </template>
   </VDataTable>
 </template>

src/layouts/components/DefaultLayoutWithVerticalNav.vue

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

src/layouts/components/NavbarThemeSwitcher.vue

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

src/layouts/components/SearchBar.vue

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

src/layouts/components/ShortcutBar.vue

@@ -7,6 +7,10 @@ import ModuleTestView from '@/views/system/ModuleTestView.vue'
 import MessageView from '@/views/system/MessageView.vue'
 import store from '@/store'
 import api from '@/api'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // App捷径
 const appsMenu = ref(false)
@@ -63,8 +67,7 @@ async function sendMessage() {
       user_message.value = ''
       sendButtonDisabled.value = false
       scrollMessageToEnd()
-    }
+    } catch (error) {
-    catch (error) {
       console.error(error)
     }
   }
@@ -88,10 +91,7 @@ onMounted(() => {
   >
     <!-- Menu Activator -->
     <template #activator="{ props }">
-      <IconBtn
+      <IconBtn class="ms-2" v-bind="props">
-        class="me-2"
-        v-bind="props"
-      >
         <VIcon icon="mdi-checkbox-multiple-blank-outline" />
       </IconBtn>
     </template>
@@ -107,132 +107,61 @@ onMounted(() => {
       </VCardItem>
       <div class="ps ps--active-y">
         <VRow class="ma-0 mt-n1">
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e">
-            cols="6"
+            <VListItem class="pa-4" @click="nameTestDialog = true">
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
+              <VAvatar size="48" variant="tonal">
-          >
-            <VListItem
-              class="pa-4"
-              @click="nameTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
                 <VIcon icon="mdi-text-recognition" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
+              <h6 class="text-base font-weight-medium mt-2 mb-0">识别</h6>
-                识别
-              </h6>
               <span class="text-sm">名称识别测试</span>
             </VListItem>
           </VCol>
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
-            cols="6"
+            <VListItem class="pa-4" @click="ruleTestDialog = true">
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
+              <VAvatar size="48" variant="tonal">
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="ruleTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
                 <VIcon icon="mdi-filter-cog-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
+              <h6 class="text-base font-weight-medium mt-2 mb-0">优先级</h6>
-                优先级
-              </h6>
               <span class="text-sm">优先级规则测试</span>
             </VListItem>
           </VCol>
         </VRow>
         <VRow class="ma-0 mt-n1 border-t">
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
-            cols="6"
+            <VListItem class="pa-4" @click="loggingDialog = true">
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
+              <VAvatar size="48" variant="tonal">
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="loggingDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
                 <VIcon icon="mdi-file-document-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
+              <h6 class="text-base font-weight-medium mt-2 mb-0">日志</h6>
-                日志
-              </h6>
               <span class="text-sm">实时日志</span>
             </VListItem>
           </VCol>
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon" @click="() => {}">
-            cols="6"
+            <VListItem class="pa-4" @click="netTestDialog = true">
-            class="text-center cursor-pointer pa-0 shortcut-icon"
+              <VAvatar size="48" variant="tonal">
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="netTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
                 <VIcon icon="mdi-network-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
+              <h6 class="text-base font-weight-medium mt-2 mb-0">网络</h6>
-                网络
-              </h6>
               <span class="text-sm">网速连通性测试</span>
             </VListItem>
           </VCol>
         </VRow>
         <VRow class="ma-0 mt-n1 border-t">
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
-            cols="6"
+            <VListItem class="pa-4" @click="systemTestDialog = true">
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
+              <VAvatar size="48" variant="tonal">
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="systemTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
                 <VIcon icon="mdi-cog-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
+              <h6 class="text-base font-weight-medium mt-2 mb-0">系统</h6>
-                系统
-              </h6>
               <span class="text-sm">健康检查</span>
             </VListItem>
           </VCol>
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
-            cols="6"
+            <VListItem class="pa-4" @click="messageDialog = true">
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
+              <VAvatar size="48" variant="tonal">
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="messageDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
                 <VIcon icon="mdi-message-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
+              <h6 class="text-base font-weight-medium mt-2 mb-0">消息</h6>
-                消息
-              </h6>
               <span class="text-sm">消息中心</span>
             </VListItem>
           </VCol>
@@ -241,37 +170,30 @@ onMounted(() => {
     </VCard>
   </VMenu>
   <!-- 名称测试弹窗 -->
-  <VDialog
+  <VDialog v-if="nameTestDialog" v-model="nameTestDialog" max-width="50rem" scrollable>
-    v-if="nameTestDialog"
-    v-model="nameTestDialog"
-    max-width="50rem"
-  >
     <VCard title="名称识别测试">
       <DialogCloseBtn @click="nameTestDialog = false" />
-      <VCardItem>
+      <VCardText>
         <NameTestView />
-      </VCardItem>
+      </VCardText>
     </VCard>
   </VDialog>
   <!-- 网络测试弹窗 -->
-  <VDialog
+  <VDialog v-if="netTestDialog" v-model="netTestDialog" max-width="35rem" max-height="85vh" scrollable>
-    v-if="netTestDialog"
-    v-model="netTestDialog"
-    max-width="35rem"
-  >
     <VCard title="网络测试">
       <DialogCloseBtn @click="netTestDialog = false" />
-      <VCardItem>
+      <VCardText>
         <NetTestView />
-      </VCardItem>
+      </VCardText>
     </VCard>
   </VDialog>
   <!-- 实时日志弹窗 -->
   <VDialog
     v-if="loggingDialog"
     v-model="loggingDialog"
-    class="w-full lg:w-4/5"
     scrollable
+    max-width="70rem"
+    :fullscreen="!display.mdAndUp.value"
   >
     <VCard>
       <DialogCloseBtn @click="loggingDialog = false" />
@@ -279,7 +201,9 @@ onMounted(() => {
         <VCardTitle class="inline-flex">
           实时日志
           <a class="mx-2 inline-flex items-center justify-center" :href="allLoggingUrl()" target="_blank">
-            <div class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700">
+            <div
+              class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
+            >
               <VIcon icon="mdi-open-in-new" />
               <span class="ms-1">在新窗口中打开</span>
             </div>
@@ -292,12 +216,7 @@ onMounted(() => {
     </VCard>
   </VDialog>
   <!-- 规则测试弹窗 -->
-  <VDialog
+  <VDialog v-if="ruleTestDialog" v-model="ruleTestDialog" max-width="50rem" scrollable>
-    v-if="ruleTestDialog"
-    v-model="ruleTestDialog"
-    max-width="50rem"
-    scrollable
-  >
     <VCard title="优先级测试">
       <DialogCloseBtn @click="ruleTestDialog = false" />
       <VCardText>
@@ -306,12 +225,7 @@ onMounted(() => {
     </VCard>
   </VDialog>
   <!-- 系统健康检查弹窗 -->
-  <VDialog
+  <VDialog v-if="systemTestDialog" v-model="systemTestDialog" max-width="35rem" max-height="85vh" scrollable>
-    v-if="systemTestDialog"
-    v-model="systemTestDialog"
-    max-width="50rem"
-    scrollable
-  >
     <VCard title="系统健康检查">
       <DialogCloseBtn @click="systemTestDialog = false" />
       <VCardText>
@@ -325,6 +239,7 @@ onMounted(() => {
     v-model="messageDialog"
     max-width="60rem"
     scrollable
+    :fullscreen="!display.mdAndUp.value"
   >
     <VCard title="消息中心">
       <DialogCloseBtn @click="messageDialog = false" />
@@ -345,13 +260,7 @@ onMounted(() => {
           @keydown.enter="sendMessage"
         >
           <template #append>
-            <VBtn
+            <VBtn color="primary" :disabled="sendButtonDisabled" @click="sendMessage"> 发送 </VBtn>
-              color="primary"
-              :disabled="sendButtonDisabled"
-              @click="sendMessage"
-            >
-              发送
-            </VBtn>
           </template>
         </VTextField>
       </VCardItem>

src/layouts/components/UserNotification.vue

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

src/layouts/components/UserProfile.vue

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

src/layouts/default.vue

@@ -1,17 +1,7 @@
 <script lang="ts" setup>
 import DefaultLayoutWithVerticalNav from './components/DefaultLayoutWithVerticalNav.vue'
-import api from '@/api'
 
-const router = useRouter()
 const route = useRoute()
-document.addEventListener('visibilitychange', () => {
-  if (document.visibilityState === 'visible') {
-    api.get('user/current')
-      .catch(() => {
-        router.replace('/login')
-      })
-  }
-})
 </script>
 
 <template>
@@ -27,5 +17,5 @@ document.addEventListener('visibilitychange', () => {
 
 <style lang="scss">
 // As we are using `layouts` plugin we need its styles to be imported
-@use "@layouts/styles/default-layout";
+@use '@layouts/styles/default-layout';
 </style>

src/main.ts

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

src/pages/browse.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import api from '@/api'
 import MediaCardListView from '@/views/discover/MediaCardListView.vue'
+import PersonCardListView from '@/views/discover/PersonCardListView.vue'
 
 // 输入参数
 const props = defineProps({
@@ -11,14 +13,16 @@ const props = defineProps({
 const route = useRoute()
 
 // 标题
-const title = route.query?.title?.toString()
+let title = route.query?.title?.toString()
+
+// 类型
+const type = route.query?.type?.toString()
+if (type === 'person') title = '演员：' + title
 
 // 计算API路径
 function getApiPath(paths: string[] | string) {
-  if (Array.isArray(paths))
+  if (Array.isArray(paths)) return paths.join('/')
-    return paths.join('/')
+  else return paths
-  else
-    return paths
 }
 </script>
 
@@ -26,14 +30,15 @@ function getApiPath(paths: string[] | string) {
   <div>
     <div v-if="title" class="mt-3 md:flex md:items-center md:justify-between">
       <div class="min-w-0 flex-1 mx-0">
-        <h2 class="mb-4 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0" data-testid="page-header">
+        <h2
+          class="mb-4 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0"
+          data-testid="page-header"
+        >
           <span class="text-moviepilot">{{ title }}</span>
         </h2>
       </div>
     </div>
-    <MediaCardListView
+    <PersonCardListView v-if="type === 'person'" :apipath="getApiPath(props.paths || '')" :params="route.query" />
-      :apipath="getApiPath(props.paths || '')"
+    <MediaCardListView v-else :apipath="getApiPath(props.paths || '')" :params="route.query" />
-      :params="route.query"
-    />
   </div>
 </template>

src/pages/dashboard.vue

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

src/pages/login.vue

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

src/pages/person.vue

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

src/pages/ranking.vue

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

src/pages/resource.vue

@@ -120,11 +120,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="!isRefreshed" class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center">
+  <LoadingBanner 
-    <VProgressCircular v-if="!keyword" size="48" indeterminate color="primary" />
+    v-if="!isRefreshed" 
-    <VProgressCircular v-if="keyword" class="mb-3" color="primary" :model-value="progressValue" size="64" />
+    class="mt-12"
-    <span>{{ progressText }}</span>
+    :text="progressText"
-  </div>
+    :progress="progressValue"
+  />
   <NoDataFound
     v-if="dataList.length === 0 && isRefreshed"
     :error-title="errorTitle"

src/pages/setting.vue

@@ -66,22 +66,14 @@ const tabs = [
 
 <template>
   <div>
-    <VTabs
+    <VTabs v-model="activeTab" show-arrows class="v-tabs-pill">
-      v-model="activeTab"
-      show-arrows
-    >
       <VTab v-for="item in tabs" :key="item.icon" :value="item.tab">
         <VIcon size="20" start :icon="item.icon" />
         {{ item.title }}
       </VTab>
     </VTabs>
-    <VDivider />
 
-    <VWindow
+    <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
-      v-model="activeTab"
-      class="mt-5 disable-tab-transition"
-      :touch="false"
-    >
       <!-- 用户 -->
       <VWindowItem value="account">
         <transition name="fade-slide" appear>

src/pages/subscribe-movie.vue

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

src/pages/subscribe-tv.vue

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

src/styles/styles.scss

@@ -130,3 +130,12 @@
 .v-toast {
   z-index: 2500 !important;
  }
+
+ .v-divider {
+  border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));
+  opacity:0.75;
+ }
+
+ .apexcharts-title-text {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+ }

src/views/dashboard/AnalyticsCpu.vue

@@ -6,8 +6,14 @@ import api from '@/api'
 
 const vuetifyTheme = useTheme()
 
-const currentTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.colors)
+const currentTheme = controlledComputed(
-const variableTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.variables)
+  () => vuetifyTheme.name.value,
+  () => vuetifyTheme.current.value.colors,
+)
+const variableTheme = controlledComputed(
+  () => vuetifyTheme.name.value,
+  () => vuetifyTheme.current.value.variables,
+)
 
 // 定时器
 let refreshTimer: NodeJS.Timer | null = null
@@ -22,83 +28,86 @@ const series = ref([
 // 当前值
 const current = ref(0)
 
-const chartOptions = controlledComputed(() => vuetifyTheme.name.value, () => {
+const chartOptions = controlledComputed(
-  return {
+  () => vuetifyTheme.name.value,
-    chart: {
+  () => {
-      parentHeightOffset: 0,
+    return {
-      toolbar: { show: false },
+      chart: {
-      animations: { enabled: false },
+        parentHeightOffset: 0,
-    },
+        toolbar: { show: false },
-    tooltip: { enabled: false },
+        animations: { enabled: false },
-    grid: {
+      },
-      borderColor: `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${variableTheme.value['border-opacity']})`,
+      tooltip: { enabled: false },
-      strokeDashArray: 6,
+      grid: {
+        borderColor: `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${
+          variableTheme.value['border-opacity']
+        })`,
+        strokeDashArray: 6,
+        xaxis: {
+          lines: { show: false },
+        },
+        yaxis: {
+          lines: { show: true },
+        },
+        padding: {
+          top: -10,
+          left: -7,
+          right: 5,
+          bottom: 5,
+        },
+      },
+      stroke: {
+        width: 3,
+        lineCap: 'butt',
+        curve: 'smooth',
+      },
+      colors: [currentTheme.value.primary],
+      markers: {
+        size: 6,
+        offsetY: 4,
+        offsetX: -2,
+        strokeWidth: 3,
+        colors: ['transparent'],
+        strokeColors: 'transparent',
+        discrete: [
+          {
+            size: 5.5,
+            seriesIndex: 0,
+            strokeColor: currentTheme.value.primary,
+            fillColor: currentTheme.value.surface,
+          },
+        ],
+        hover: { size: 7 },
+      },
       xaxis: {
-        lines: { show: false },
+        labels: { show: false },
+        axisTicks: { show: false },
+        axisBorder: { show: false },
       },
       yaxis: {
-        lines: { show: true },
+        labels: { show: false },
+        max: 100,
       },
-      padding: {
+    }
-        top: -10,
+  },
-        left: -7,
+)
-        right: 5,
-        bottom: 5,
-      },
-    },
-    stroke: {
-      width: 3,
-      lineCap: 'butt',
-      curve: 'smooth',
-    },
-    colors: [currentTheme.value.primary],
-    markers: {
-      size: 6,
-      offsetY: 4,
-      offsetX: -2,
-      strokeWidth: 3,
-      colors: ['transparent'],
-      strokeColors: 'transparent',
-      discrete: [
-        {
-          size: 5.5,
-          seriesIndex: 0,
-          strokeColor: currentTheme.value.primary,
-          fillColor: currentTheme.value.surface,
-        },
-      ],
-      hover: { size: 7 },
-    },
-    xaxis: {
-      labels: { show: false },
-      axisTicks: { show: false },
-      axisBorder: { show: false },
-    },
-    yaxis: {
-      labels: { show: false },
-      max: 100,
-    },
-  }
-})
 
 // 调用API接口获取最新CPU使用率
 async function getCpuUsage() {
   try {
     // 请求数据
-    current.value = await api.get('dashboard/cpu') ?? 0
+    current.value = (await api.get('dashboard/cpu')) ?? 0
     // 添加到序列
     series.value[0].data.push(current.value)
     // 序列超过30条记录时，清掉前面的
-    if (series.value[0].data.length > 30)
+    if (series.value[0].data.length > 30) series.value[0].data.shift()
-      series.value[0].data.shift()
+  } catch (e) {
-  }
-  catch (e) {
     console.log(e)
   }
 }
 
 onMounted(() => {
-  getCpuUsage()// 启动定时器
+  getCpuUsage() // 启动定时器
   refreshTimer = setInterval(() => {
     getCpuUsage()
   }, 2000)
@@ -115,20 +124,16 @@ onUnmounted(() => {
 
 <template>
   <VCard>
+    <VCardItem>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>CPU</VCardTitle>
+    </VCardItem>
     <VCardText>
-      <h6 class="text-h6">
+      <VueApexCharts type="line" :options="chartOptions" :series="series" :height="150" />
-        CPU
-      </h6>
-      <VueApexCharts
-        type="line"
-        :options="chartOptions"
-        :series="series"
-        :height="150"
-      />
 
-      <p class="text-center font-weight-medium mb-0">
+      <p class="text-center font-weight-medium mb-0">当前：{{ current }}%</p>
-        当前：{{ current }}%
-      </p>
     </VCardText>
   </VCard>
 </template>

src/views/dashboard/AnalyticsMediaStatistic.vue

@@ -42,8 +42,7 @@ async function loadMediaStatistic() {
         color: 'info',
       },
     ]
-  }
+  } catch (e) {
-  catch (e) {
     console.log(e)
   }
 }
@@ -56,29 +55,19 @@ onMounted(() => {
 <template>
   <VCard>
     <VCardItem>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
       <VCardTitle>媒体统计</VCardTitle>
     </VCardItem>
 
     <VCardText>
       <VRow>
-        <VCol
+        <VCol v-for="item in statistics" :key="item.title" cols="6" sm="3">
-          v-for="item in statistics"
-          :key="item.title"
-          cols="6"
-          sm="3"
-        >
           <div class="d-flex align-center">
             <div class="me-3">
-              <VAvatar
+              <VAvatar :color="item.color" rounded size="42" class="elevation-1">
-                :color="item.color"
+                <VIcon size="24" :icon="item.icon" />
-                rounded
-                size="42"
-                class="elevation-1"
-              >
-                <VIcon
-                  size="24"
-                  :icon="item.icon"
-                />
               </VAvatar>
             </div>
 

src/views/dashboard/AnalyticsMemory.vue

@@ -7,8 +7,14 @@ import { formatBytes } from '@/@core/utils/formatters'
 
 const vuetifyTheme = useTheme()
 
-const currentTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.colors)
+const currentTheme = controlledComputed(
-const variableTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.variables)
+  () => vuetifyTheme.name.value,
+  () => vuetifyTheme.current.value.colors,
+)
+const variableTheme = controlledComputed(
+  () => vuetifyTheme.name.value,
+  () => vuetifyTheme.current.value.variables,
+)
 
 // 定时器
 let refreshTimer: NodeJS.Timer | null = null
@@ -25,79 +31,82 @@ const usedMemory = ref(0)
 // 内存使用百分比
 const memoryUsage = ref(0)
 
-const chartOptions = controlledComputed(() => vuetifyTheme.name.value, () => {
+const chartOptions = controlledComputed(
-  return {
+  () => vuetifyTheme.name.value,
-    chart: {
+  () => {
-      parentHeightOffset: 0,
+    return {
-      toolbar: { show: false },
+      chart: {
-      animations: { enabled: false },
+        parentHeightOffset: 0,
-    },
+        toolbar: { show: false },
-    tooltip: { enabled: false },
+        animations: { enabled: false },
-    grid: {
+      },
-      borderColor: `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${variableTheme.value['border-opacity']})`,
+      tooltip: { enabled: false },
-      strokeDashArray: 6,
+      grid: {
+        borderColor: `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${
+          variableTheme.value['border-opacity']
+        })`,
+        strokeDashArray: 6,
+        xaxis: {
+          lines: { show: false },
+        },
+        yaxis: {
+          lines: { show: true },
+        },
+        padding: {
+          top: -10,
+          left: -7,
+          right: 5,
+          bottom: 5,
+        },
+      },
+      stroke: {
+        width: 3,
+        lineCap: 'butt',
+        curve: 'smooth',
+      },
+      colors: [currentTheme.value.primary],
+      markers: {
+        size: 6,
+        offsetY: 4,
+        offsetX: -2,
+        strokeWidth: 3,
+        colors: ['transparent'],
+        strokeColors: 'transparent',
+        discrete: [
+          {
+            size: 5.5,
+            seriesIndex: 0,
+            strokeColor: currentTheme.value.primary,
+            fillColor: currentTheme.value.surface,
+          },
+        ],
+        hover: { size: 7 },
+      },
+      dataLabels: {
+        enabled: false,
+      },
       xaxis: {
-        lines: { show: false },
+        labels: { show: false },
+        axisTicks: { show: false },
+        axisBorder: { show: false },
       },
       yaxis: {
-        lines: { show: true },
+        labels: { show: false },
+        max: 100,
       },
-      padding: {
+    }
-        top: -10,
+  },
-        left: -7,
+)
-        right: 5,
-        bottom: 5,
-      },
-    },
-    stroke: {
-      width: 3,
-      lineCap: 'butt',
-      curve: 'smooth',
-    },
-    colors: [currentTheme.value.primary],
-    markers: {
-      size: 6,
-      offsetY: 4,
-      offsetX: -2,
-      strokeWidth: 3,
-      colors: ['transparent'],
-      strokeColors: 'transparent',
-      discrete: [
-        {
-          size: 5.5,
-          seriesIndex: 0,
-          strokeColor: currentTheme.value.primary,
-          fillColor: currentTheme.value.surface,
-        },
-      ],
-      hover: { size: 7 },
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    xaxis: {
-      labels: { show: false },
-      axisTicks: { show: false },
-      axisBorder: { show: false },
-    },
-    yaxis: {
-      labels: { show: false },
-      max: 100,
-    },
-  }
-})
 
 // 调用API接口获取最新内存使用量
 async function getMemorgUsage() {
   try {
     // 请求数据
-    [usedMemory.value, memoryUsage.value] = await api.get('dashboard/memory')
+    ;[usedMemory.value, memoryUsage.value] = await api.get('dashboard/memory')
     series.value[0].data.push(memoryUsage.value)
     // 序列超过30条记录时，清掉前面的
-    if (series.value[0].data.length > 30)
+    if (series.value[0].data.length > 30) series.value[0].data.shift()
-      series.value[0].data.shift()
+  } catch (e) {
-  }
-  catch (e) {
     console.log(e)
   }
 }
@@ -121,20 +130,16 @@ onUnmounted(() => {
 
 <template>
   <VCard>
+    <VCardItem>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>内存</VCardTitle>
+    </VCardItem>
     <VCardText>
-      <h6 class="text-h6">
+      <VueApexCharts type="area" :options="chartOptions" :series="series" :height="150" />
-        内存
-      </h6>
-      <VueApexCharts
-        type="area"
-        :options="chartOptions"
-        :series="series"
-        :height="150"
-      />
 
-      <p class="text-center font-weight-medium mb-0">
+      <p class="text-center font-weight-medium mb-0">当前：{{ formatBytes(usedMemory) }}</p>
-        当前：{{ formatBytes(usedMemory) }}
-      </p>
     </VCardText>
   </VCard>
 </template>

src/views/dashboard/AnalyticsProcesses.vue

@@ -18,8 +18,7 @@ async function loadProcessList() {
     const res: Process[] = await api.get('dashboard/processes')
 
     processList.value = res
-  }
+  } catch (e) {
-  catch (e) {
     console.log(e)
   }
 }
@@ -43,47 +42,32 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VCard title="系统进程">
+  <VCard>
-    <VTable
+    <VCardItem>
-      item-key="fullName"
+      <template #append>
-      class="table-rounded"
+        <VIcon class="cursor-move">mdi-drag</VIcon>
-      hide-default-footer
+      </template>
-      disable-sort
+      <VCardTitle>系统进程</VCardTitle>
-    >
+    </VCardItem>
+    <VTable item-key="fullName" class="table-rounded" hide-default-footer disable-sort>
       <thead>
         <tr>
-          <th
+          <th v-for="header in headers" :id="header" :key="header">
-            v-for="header in headers"
-            :id="header"
-            :key="header"
-          >
             {{ header }}
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr
+        <tr v-for="row in processList" :key="row.pid">
-          v-for="row in processList"
+          <td class="text-sm" v-text="row.pid" />
-          :key="row.pid"
-        >
-          <td
-            class="text-sm"
-            v-text="row.pid"
-          />
           <!-- name -->
           <td>
             <h6 class="text-sm font-weight-medium">
               {{ row.name }}
             </h6>
           </td>
-          <td
+          <td class="text-sm" v-text="formatSeconds(row.run_time)" />
-            class="text-sm"
+          <td class="text-sm" v-text="`${row.memory} MB`" />
-            v-text="formatSeconds(row.run_time)"
-          />
-          <td
-            class="text-sm"
-            v-text="`${row.memory} MB`"
-          />
         </tr>
       </tbody>
     </VTable>

src/views/dashboard/AnalyticsScheduler.vue

@@ -14,8 +14,7 @@ async function loadSchedulerList() {
     const res: ScheduleInfo[] = await api.get('dashboard/schedule')
 
     schedulerList.value = res
-  }
+  } catch (e) {
-  catch (e) {
     console.log(e)
   }
 }
@@ -41,25 +40,17 @@ onUnmounted(() => {
 <template>
   <VCard>
     <VCardItem>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
       <VCardTitle>后台任务</VCardTitle>
     </VCardItem>
 
     <VCardText>
-      <VList
+      <VList class="card-list" height="250">
-        class="card-list"
+        <VListItem v-for="item in schedulerList" :key="item.id">
-        height="250"
-      >
-        <VListItem
-          v-for="item in schedulerList"
-          :key="item.id"
-        >
           <template #prepend>
-            <VAvatar
+            <VAvatar size="40" variant="tonal" color="" class="me-3">
-              size="40"
-              variant="tonal"
-              color=""
-              class="me-3"
-            >
               {{ item.name[0] }}
             </VAvatar>
           </template>
@@ -81,9 +72,7 @@ onUnmounted(() => {
           </template>
         </VListItem>
         <VListItem v-if="schedulerList.length === 0">
-          <VListItemTitle class="text-center">
+          <VListItemTitle class="text-center"> 没有后台服务 </VListItemTitle>
-            没有后台服务
-          </VListItemTitle>
         </VListItem>
       </VList>
     </VCardText>

src/views/dashboard/AnalyticsSpeed.vue

@@ -56,8 +56,7 @@ async function loadDownloaderInfo() {
         amount: formatFileSize(res.free_space),
       },
     ]
-  }
+  } catch (e) {
-  catch (e) {
     console.log(e)
   }
 }
@@ -83,28 +82,21 @@ onUnmounted(() => {
 <template>
   <VCard>
     <VCardItem>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
       <VCardTitle>实时速率</VCardTitle>
     </VCardItem>
 
     <VCardText class="pt-4">
       <div>
-        <p class="text-h5 me-2">
+        <p class="text-h5 me-2">↑{{ formatFileSize(downloadInfo.upload_speed) }}/s</p>
-          ↑{{ formatFileSize(downloadInfo.upload_speed) }}/s
+        <p class="text-h4 me-2">↓{{ formatFileSize(downloadInfo.download_speed) }}/s</p>
-        </p>
-        <p class="text-h4 me-2">
-          ↓{{ formatFileSize(downloadInfo.download_speed) }}/s
-        </p>
       </div>
       <VList class="card-list mt-9">
-        <VListItem
+        <VListItem v-for="item in infoItems" :key="item.title">
-          v-for="item in infoItems"
-          :key="item.title"
-        >
           <template #prepend>
-            <VIcon
+            <VIcon rounded :icon="item.avatar" />
-              rounded
-              :icon="item.avatar"
-            />
           </template>
 
           <VListItemTitle class="text-sm font-weight-medium mb-1">

src/views/dashboard/AnalyticsStorage.vue

@@ -8,9 +8,7 @@ import triangleLight from '@images/misc/triangle-light.png'
 
 const { global } = useTheme()
 
-const triangleBg = computed(() =>
+const triangleBg = computed(() => (global.name.value === 'light' ? triangleLight : triangleDark))
-  global.name.value === 'light' ? triangleLight : triangleDark,
-)
 
 // 总存储空间
 const storage = ref(0)
@@ -30,8 +28,7 @@ async function getStorage() {
 
     storage.value = res.total_storage
     used.value = res.used_storage
-  }
+  } catch (e) {
-  catch (e) {
     console.log(e)
   }
 }
@@ -42,42 +39,32 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard
+  <VCard>
-    title="存储空间"
+    <!-- Triangle Background -->
-    subtitle=""
+    <VImg :src="triangleBg" class="triangle-bg flip-in-rtl" />
-    class="position-relative"
+    <VCardItem>
-  >
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>存储空间</VCardTitle>
+    </VCardItem>
     <VCardText>
       <h5 class="text-2xl font-weight-medium text-primary">
         {{ formatFileSize(storage) }}
       </h5>
-      <p class="mt-2">
+      <p class="mt-2">已使用 {{ usedPercent }}% 🚀</p>
-        已使用 {{ usedPercent }}% 🚀
-      </p>
       <p class="mt-1">
-        <VProgressLinear
+        <VProgressLinear :model-value="usedPercent" color="primary" />
-          :model-value="usedPercent"
-          color="primary"
-        />
       </p>
     </VCardText>
 
-    <!-- Triangle Background -->
-    <VImg
-      :src="triangleBg"
-      class="triangle-bg flip-in-rtl"
-    />
-
     <!-- Trophy -->
-    <VImg
+    <VImg :src="trophy" class="trophy" />
-      :src="trophy"
-      class="trophy"
-    />
   </VCard>
 </template>
 
 <style lang="scss">
-@use "@layouts/styles/mixins" as layoutsMixins;
+@use '@layouts/styles/mixins' as layoutsMixins;
 
 .v-card .triangle-bg {
   position: absolute;

src/views/dashboard/AnalyticsWeeklyOverview.vue

@@ -80,8 +80,7 @@ const options = controlledComputed(
             fontSize: '12px',
           },
 
-          formatter: (value: number) =>
+          formatter: (value: number) => (value > 999 ? (value / 1000).toFixed(0) : value),
-            value > 999 ? (value / 1000).toFixed(0) : value,
         },
       },
     }
@@ -100,8 +99,7 @@ async function getWeeklyData() {
     const res: number[] = await api.get('dashboard/transfer')
 
     series.value = [{ data: res }]
-  }
+  } catch (e) {
-  catch (e) {
     console.log(e)
   }
 }
@@ -114,16 +112,14 @@ onMounted(() => {
 <template>
   <VCard>
     <VCardItem>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
       <VCardTitle>最近入库</VCardTitle>
     </VCardItem>
 
     <VCardText>
-      <VueApexCharts
+      <VueApexCharts type="bar" :options="options" :series="series" :height="160" />
-        type="bar"
-        :options="options"
-        :series="series"
-        :height="160"
-      />
 
       <div class="d-flex align-center mb-3">
         <h5 class="text-h5 me-4">
@@ -132,13 +128,7 @@ onMounted(() => {
         <p>最近一周入库了 {{ totalCount }} 部影片 😎</p>
       </div>
 
-      <VBtn
+      <VBtn v-if="superUser" block to="/history"> 查看详情 </VBtn>
-        v-if="superUser"
-        block
-        to="/history"
-      >
-        查看详情
-      </VBtn>
     </VCardText>
   </VCard>
 </template>

src/views/dashboard/MediaServerLatest.vue

@@ -10,8 +10,7 @@ const latestList = ref<MediaServerPlayItem[]>([])
 async function loadLatest() {
   try {
     latestList.value = await api.get('mediaserver/latest')
-  }
+  } catch (e) {
-  catch (e) {
     console.log(e)
   }
 }
@@ -24,19 +23,14 @@ onMounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle>最近添加</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle >最近添加</VCardTitle>
     </VCardItem>
 
-    <div
+    <div v-if="latestList.length > 0" class="grid gap-4 grid-media-card mx-3 mb-3" tabindex="0">
-      v-if="latestList.length > 0"
+      <PosterCard v-for="data in latestList" :key="data.id" :media="data" />
-      class="grid gap-4 grid-media-card mx-3 mb-3"
-      tabindex="0"
-    >
-      <PosterCard
-        v-for="data in latestList"
-        :key="data.id"
-        :media="data"
-      />
     </div>
   </VCard>
 </template>

src/views/dashboard/MediaServerLibrary.vue

@@ -10,8 +10,7 @@ const libraryList = ref<MediaServerPlayItem[]>([])
 async function loadLibrary() {
   try {
     libraryList.value = await api.get('mediaserver/library')
-  }
+  } catch (e) {
-  catch (e) {
     console.log(e)
   }
 }
@@ -24,20 +23,14 @@ onMounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle>我的媒体库</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle >我的媒体库</VCardTitle>
     </VCardItem>
 
-    <div
+    <div v-if="libraryList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
-      v-if="libraryList.length > 0"
+      <LibraryCard v-for="data in libraryList" :key="data.id" :media="data" height="10rem" />
-      class="grid gap-4 grid-backdrop-card mx-3"
-      tabindex="0"
-    >
-      <LibraryCard
-        v-for="data in libraryList"
-        :key="data.id"
-        :media="data"
-        height="10rem"
-      />
     </div>
   </VCard>
 </template>

src/views/dashboard/MediaServerPlaying.vue

@@ -10,8 +10,7 @@ const playingList = ref<MediaServerPlayItem[]>([])
 async function loadPlayingList() {
   try {
     playingList.value = await api.get('mediaserver/playing')
-  }
+  } catch (e) {
-  catch (e) {
     console.log(e)
   }
 }
@@ -24,20 +23,14 @@ onMounted(() => {
 <template>
   <VCard>
     <VCardItem>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
       <VCardTitle>继续观看</VCardTitle>
     </VCardItem>
 
-    <div
+    <div v-if="playingList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
-      v-if="playingList.length > 0"
+      <BackdropCard v-for="data in playingList" :key="data.id" :media="data" height="10rem" />
-      class="grid gap-4 grid-backdrop-card mx-3"
-      tabindex="0"
-    >
-      <BackdropCard
-        v-for="data in playingList"
-        :key="data.id"
-        :media="data"
-        height="10rem"
-      />
     </div>
   </VCard>
 </template>

src/views/discover/MediaCardListView.vue

@@ -12,11 +12,7 @@ const props = defineProps({
 
 // 判断是否有滚动条
 function hasScroll() {
-  return (
+  return document.body.scrollHeight - (window.innerHeight || document.documentElement.clientHeight) > 2
-    document.body.scrollHeight
-      - (window.innerHeight || document.documentElement.clientHeight)
-    > 2
-  )
 }
 
 // 当前页码
@@ -37,8 +33,7 @@ function getParams() {
   let params = {
     page: page.value,
   }
-  if (props.params)
+  if (props.params) params = { ...params, ...props.params }
-    params = { ...params, ...props.params }
 
   return params
 }
@@ -46,76 +41,66 @@ function getParams() {
 // 获取列表数据
 async function fetchData({ done }: { done: any }) {
   try {
-    if (!props.apipath)
+    if (!props.apipath) return
-      return
 
     // 如果正在加载中，直接返回
     if (loading.value) {
       done('ok')
-
       return
     }
 
-    // 设置加载中
-    loading.value = true
-
     // 加载到满屏或者加载出错
     if (!hasScroll()) {
       // 加载多次
       while (!hasScroll()) {
+        // 设置加载中
+        loading.value = true
         // 请求API
         currData.value = await api.get(props.apipath, {
           params: getParams(),
         })
-
+        // 取消加载中
+        loading.value = false
         // 标计为已请求完成
         isRefreshed.value = true
         if (currData.value.length === 0) {
           // 如果没有数据，跳出
-          done('ok')
+          done('empty')
-
           return
         }
-
         // 合并数据
         dataList.value = [...dataList.value, ...currData.value]
-
         // 页码+1
         page.value++
+        // 返回加载成功
+        done('ok')
       }
-    }
+    } else {
-    else {
       // 加载一次
+      // 设置加载中
+      loading.value = true
       // 请求API
       currData.value = await api.get(props.apipath, {
         params: getParams(),
       })
-
       // 标计为已请求完成
       isRefreshed.value = true
       if (currData.value.length === 0) {
         // 如果没有数据，跳出
+        done('empty')
+      } else {
+        // 合并数据
+        dataList.value = [...dataList.value, ...currData.value]
+        // 页码+1
+        page.value++
+        // 返回加载成功
         done('ok')
-
-        return
       }
-
-      // 合并数据
-      dataList.value = [...dataList.value, ...currData.value]
-
-      // 页码+1
-      page.value++
     }
-
     // 取消加载中
     loading.value = false
-
+  } catch (error) {
-    // 返回加载成功
-    done('ok')
-  }
-  catch (error) {
     console.error(error)
-
     // 返回加载失败
     done('error')
   }
@@ -123,34 +108,12 @@ async function fetchData({ done }: { done: any }) {
 </script>
 
 <template>
-  <div
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-    v-if="!isRefreshed"
+  <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
-    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-  >
-    <VProgressCircular
-      size="48"
-      indeterminate
-      color="primary"
-    />
-  </div>
-  <VInfiniteScroll
-    mode="intersect"
-    side="end"
-    :items="dataList"
-    class="overflow-hidden"
-    @load="fetchData"
-  >
     <template #loading />
-    <div
+    <template #empty />
-      v-if="dataList.length > 0"
+    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
-      class="grid gap-4 grid-media-card mx-3"
+      <MediaCard v-for="data in dataList" :key="data.tmdb_id || data.douban_id" :media="data" />
-      tabindex="0"
-    >
-      <MediaCard
-        v-for="data in dataList"
-        :key="data.tmdb_id || data.douban_id"
-        :media="data"
-      />
     </div>
     <NoDataFound
       v-if="dataList.length === 0 && isRefreshed"

src/views/discover/MediaCardSlideView.vue

@@ -11,6 +11,8 @@ const props = defineProps({
   title: String,
 })
 
+provide('rankingPropsKey', reactive({...props}))
+
 // 组件加载完成
 const componentLoaded = ref(false)
 
@@ -39,7 +41,6 @@ onMounted(fetchData)
 <template>
   <SlideView
     v-if="componentLoaded"
-    v-bind="props"
   >
     <template #content>
       <template

src/views/discover/PersonCardListView.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import api from '@/api'
-import DoubanPersonCard from '@/components/cards/DoubanPersonCard.vue'
+import PersonCard from '@/components/cards/PersonCard.vue'
-import TmdbPersonCard from '@/components/cards/TmdbPersonCard.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
 
 // 输入参数
@@ -13,11 +12,7 @@ const props = defineProps({
 
 // 判断是否有滚动条
 function hasScroll() {
-  return (
+  return document.body.scrollHeight - (window.innerHeight || document.documentElement.clientHeight) > 2
-    document.body.scrollHeight
-      - (window.innerHeight || document.documentElement.clientHeight)
-    > 2
-  )
 }
 
 // 当前页码
@@ -33,83 +28,80 @@ const isRefreshed = ref(false)
 const dataList = ref<any>([])
 const currData = ref<any>([])
 
+// 拼装参数
+function getParams() {
+  let params = {
+    page: page.value,
+  }
+  if (props.params) params = { ...params, ...props.params }
+
+  return params
+}
+
 // 获取列表数据
 async function fetchData({ done }: { done: any }) {
   try {
-    if (!props.apipath)
+    if (!props.apipath) return
-      return
 
     // 如果正在加载中，直接返回
     if (loading.value) {
       done('ok')
-
       return
     }
 
-    // 设置加载中
-    loading.value = true
-
     // 加载到满屏或者加载出错
     if (!hasScroll()) {
       // 加载多次
       while (!hasScroll()) {
+        // 设置加载中
+        loading.value = true
         // 请求API
         currData.value = await api.get(props.apipath, {
-          params: {
+          params: getParams(),
-            page: page.value,
-          },
         })
-
+        // 取消加载中
+        loading.value = false
         // 标计为已请求完成
         isRefreshed.value = true
         if (currData.value.length === 0) {
           // 如果没有数据，跳出
-          done('ok')
+          done('empty')
-
           return
+        } else {
+          // 合并数据
+          dataList.value = [...dataList.value, ...currData.value]
+          // 页码+1
+          page.value++
+          // 返回加载成功
+          done('ok')
         }
-
-        // 合并数据
-        dataList.value = [...dataList.value, ...currData.value]
-
-        // 页码+1
-        page.value++
       }
-    }
+    } else {
-    else {
       // 加载一次
+      // 设置加载中
+      loading.value = true
       // 请求API
       currData.value = await api.get(props.apipath, {
-        params: {
+        params: getParams(),
-          page: page.value,
-        },
       })
-
       // 标计为已请求完成
       isRefreshed.value = true
       if (currData.value.length === 0) {
         // 如果没有数据，跳出
+        done('empty')
+      } else {
+        // 合并数据
+        dataList.value = [...dataList.value, ...currData.value]
+        // 页码+1
+        page.value++
+        // 返回加载成功
         done('ok')
-
-        return
       }
-
+      // 取消加载中
-      // 合并数据
+      loading.value = false
-      dataList.value = [...dataList.value, ...currData.value]
-
-      // 页码+1
-      page.value++
     }
-
+  } catch (error) {
-    // 取消加载中
-    loading.value = false
-
-    // 返回加载成功
-    done('ok')
-  }
-  catch (error) {
     console.error(error)
-
     // 返回加载失败
     done('error')
   }
@@ -117,45 +109,12 @@ async function fetchData({ done }: { done: any }) {
 </script>
 
 <template>
-  <div
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-    v-if="!isRefreshed"
+  <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
-    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-  >
-    <VProgressCircular
-      size="48"
-      indeterminate
-      color="primary"
-    />
-  </div>
-  <VInfiniteScroll
-    mode="intersect"
-    side="end"
-    :items="dataList"
-    class="overflow-hidden"
-    @load="fetchData"
-  >
     <template #loading />
-    <div
+    <template #empty />
-      v-if="dataList.length > 0 && props.type === 'tmdb'"
+    <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
-      class="grid gap-4 grid-media-card mx-3"
+      <PersonCard v-for="data in dataList" :key="data.id" :person="data" />
-      tabindex="0"
-    >
-      <TmdbPersonCard
-        v-for="data in dataList"
-        :key="data.id"
-        :person="data"
-      />
-    </div>
-    <div
-      v-if="dataList.length > 0 && props.type === 'douban'"
-      class="grid gap-4 grid-media-card mx-3"
-      tabindex="0"
-    >
-      <DoubanPersonCard
-        v-for="data in dataList"
-        :key="data.id"
-        :person="data"
-      />
     </div>
     <NoDataFound
       v-if="dataList.length === 0 && isRefreshed"

src/views/discover/PersonCardSlideView.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import TmdbPersonCard from '@/components/cards/TmdbPersonCard.vue'
+import PersonCard from '@/components/cards/PersonCard.vue'
 import api from '@/api'
 import SlideView from '@/components/slide/SlideView.vue'
-import DoubanPersonCard from '@/components/cards/DoubanPersonCard.vue'
-import BangumiPersonCard from '@/components/cards/BangumiPersonCard.vue'
 
 // 输入参数
 const props = defineProps({
@@ -13,6 +11,8 @@ const props = defineProps({
   type: String,
 })
 
+provide('rankingPropsKey', reactive({ ...props }))
+
 // 组件加载完成
 const componentLoaded = ref(false)
 
@@ -22,14 +22,11 @@ const dataList = ref<any>([])
 // 获取订阅列表数据
 async function fetchData() {
   try {
-    if (!props.apipath)
+    if (!props.apipath) return
-      return
 
     dataList.value = await api.get(props.apipath)
-    if (dataList.value.length > 0)
+    if (dataList.value.length > 0) componentLoaded.value = true
-      componentLoaded.value = true
+  } catch (error) {
-  }
-  catch (error) {
     console.error(error)
   }
 }
@@ -39,33 +36,10 @@ onMounted(fetchData)
 </script>
 
 <template>
-  <SlideView
+  <SlideView v-if="componentLoaded">
-    v-if="componentLoaded"
-    v-bind="props"
-  >
     <template #content>
-      <template
+      <template v-for="data in dataList" :key="data.id">
-        v-for="data in dataList"
+        <PersonCard :person="data" height="15rem" width="10rem" />
-        :key="data.id"
-      >
-        <TmdbPersonCard
-          v-if="props.type === 'tmdb'"
-          :person="data"
-          height="15rem"
-          width="10rem"
-        />
-        <DoubanPersonCard
-          v-if="props.type === 'douban'"
-          :person="data"
-          height="15rem"
-          width="10rem"
-        />
-        <BangumiPersonCard
-          v-if="props.type === 'bangumi'"
-          :person="data"
-          height="15rem"
-          width="10rem"
-        />
       </template>
     </template>
   </SlideView>

src/views/discover/PersonDetailView.vue

@@ -2,17 +2,18 @@
 import MediaCardListView from './MediaCardListView.vue'
 import api from '@/api'
 import personIcon from '@images/misc/person.png'
-import type { TmdbPerson } from '@/api/types'
+import type { Person } from '@/api/types'
 import NoDataFound from '@/components/NoDataFound.vue'
 
 // 输入参数
 const personProps = defineProps({
   personid: String,
   type: String,
+  source: String,
 })
 
 // 媒体详情
-const personDetail = ref<TmdbPerson>({} as TmdbPerson)
+const personDetail = ref<Person>({} as Person)
 
 // 是否已加载完成
 const isRefreshed = ref(false)
@@ -23,23 +24,67 @@ const isImageLoaded = ref(false)
 // 调用API查询详情
 async function getPersonDetail() {
   if (personProps.personid) {
-    personDetail.value = await api.get(`tmdb/person/${personProps.personid}`)
+    if (personProps.source === 'themoviedb') {
+      personDetail.value = await api.get(`tmdb/person/${personProps.personid}`)
+    } else if (personProps.source === 'douban') {
+      personDetail.value = await api.get(`douban/person/${personProps.personid}`)
+    } else if (personProps.source === 'bangumi') {
+      personDetail.value = await api.get(`bangumi/person/${personProps.personid}`)
+    }
     isRefreshed.value = true
   }
 }
 
 // 人物图片地址
 function getPersonImage() {
-  if (!personDetail.value?.profile_path)
+  if (personProps.source === 'themoviedb') {
+    if (!personDetail.value?.profile_path) return personIcon
+    return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personDetail.value?.profile_path}`
+  } else if (personProps.source === 'douban') {
+    if (!personDetail.value?.avatar) return personIcon
+    if (typeof personDetail.value?.avatar === 'object') {
+      return personDetail.value?.avatar?.normal
+    } else {
+      return personDetail.value?.avatar
+    }
+  } else if (personProps.source === 'bangumi') {
+    if (!personDetail.value?.images) return personIcon
+    return personDetail.value?.images?.medium
+  } else {
     return personIcon
-  return `https://image.tmdb.org/t/p/w600_and_h900_bestv2${personDetail.value?.profile_path}`
+  }
 }
 
 // 将别名数组拆分为、分隔的字符串
 function getAlsoKnownAs() {
-  if (!personDetail.value?.also_known_as)
+  if (!personDetail.value?.also_known_as) return ''
-    return ''
+  if (personProps.source === 'themoviedb') {
-  return personDetail.value.also_known_as.join('、')
+    return '别名：' + personDetail.value.also_known_as.join('、')
+  } else {
+    return personDetail.value.also_known_as.join('，')
+  }
+}
+
+// 参演作品路由地址
+function getPersonCreditsPath() {
+  let apipath = 'tmdb'
+  if (personProps.source === 'douban') {
+    apipath = 'douban'
+  } else if (personProps.source === 'bangumi') {
+    apipath = 'bangumi'
+  }
+  return `/browse/${apipath}/person/credits/${personDetail.value.id}?title=参演作品`
+}
+
+// 参演作品API路径
+function getPersonCreditsApiPath() {
+  let apipath = 'tmdb'
+  if (personProps.source === 'douban') {
+    apipath = 'douban'
+  } else if (personProps.source === 'bangumi') {
+    apipath = 'bangumi'
+  }
+  return `${apipath}/person/credits/${personDetail.value.id}`
 }
 
 onBeforeMount(() => {
@@ -48,62 +93,46 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-    v-if="!isRefreshed"
-    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-  >
-    <VProgressCircular
-      size="48"
-      indeterminate
-      color="primary"
-    />
-  </div>
   <div v-if="personDetail.id" class="max-w-8xl mx-auto px-4">
-    <div class="relative z-10 mt-4 mb-8 flex flex-col items-center lg:flex-row ">
+    <div class="relative z-10 mt-4 mb-8 flex flex-col items-center flex-md-row">
       <VAvatar
         size="200"
         :class="{
           'ring-1 ring-gray-700': isImageLoaded,
         }"
       >
-        <VImg
+        <VImg v-img :src="getPersonImage()" cover @load="isImageLoaded = true" />
-          v-img
-          :src="getPersonImage()"
-          cover
-          @load="isImageLoaded = true"
-        />
       </VAvatar>
-      <div class="text-start ms-3 md:text-center">
+      <div class="ms-3">
-        <h1 class="text-3xl lg:text-4xl">
+        <h1 class="text-3xl lg:text-4xl text-center text-lg-left">
           {{ personDetail.name }}
         </h1>
-        <div class="mt-1 mb-2 space-y-1 text-xs sm:text-sm lg:text-base">
+        <div class="mt-1 mb-2 space-y-1 text-xs sm:text-sm lg:text-base text-center text-lg-left">
           <div>
             <span v-if="personDetail.birthday">{{ personDetail.birthday }}</span>
             <span v-if="personDetail.place_of_birth"> | </span>
             <span v-if="personDetail.place_of_birth">{{ personDetail.place_of_birth }}</span>
           </div>
-          <div v-if="personDetail.also_known_as">
+          <div v-if="personDetail.also_known_as">{{ getAlsoKnownAs() }}</div>
-            别名：{{ getAlsoKnownAs() }}
-          </div>
         </div>
       </div>
     </div>
     <div class="relative text-left">
       <div class="group outline-none ring-0" role="button" tabindex="-1">
-        <p class="pt-2 text-sm lg:text-base" style="overflow-wrap: break-word;">
+        <p class="pt-2 text-sm lg:text-base" style="overflow-wrap: break-word">
           {{ personDetail.biography }}
         </p>
       </div>
     </div>
     <div>
       <div class="slider-header">
-        <RouterLink :to="`/browse/tmdb/person/credits/${personDetail.id}?title=参演作品`" class="slider-title">
+        <RouterLink :to="getPersonCreditsPath()" class="slider-title">
           <span>参演作品</span>
           <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
         </RouterLink>
       </div>
-      <MediaCardListView :apipath="`tmdb/person/credits/${personDetail.id}`" />
+      <MediaCardListView :apipath="getPersonCreditsApiPath()" />
     </div>
   </div>
   <NoDataFound

src/views/discover/TorrentCardListView.vue

@@ -81,7 +81,7 @@ onMounted(() => {
   // 数据分组
   const groupMap = new Map<string, Context[]>()
   // 遍历数据
-  props.items?.forEach((item) => {
+  props.items?.forEach(item => {
     const { torrent_info } = item
     // init options
     initOptions(item)
@@ -91,8 +91,7 @@ onMounted(() => {
       // 已入库相同标题和大小的分组，将当前上下文信息添加到分组中
       const group = groupMap.get(key)
       group?.push(item)
-    }
+    } else {
-    else {
       // 创建新的分组，并将当前上下文信息添加到分组中
       groupMap.set(key, [item])
     }
@@ -110,32 +109,31 @@ watchEffect(() => {
   const match = (filter: Array<string>, value: string | undefined) =>
     filter.length === 0 || (value && filter.includes(value))
 
-  groupedDataList.value?.forEach((value) => {
+  groupedDataList.value?.forEach(value => {
     if (value.length > 0) {
-      const matchData = value.filter((data) => {
+      const matchData = value.filter(data => {
         const { meta_info, torrent_info } = data
         // 季、制作组、视频编码
         return (
           // 站点过滤
-          match(filterForm.site, torrent_info.site_name)
+          match(filterForm.site, torrent_info.site_name) &&
           // 促销状态过滤
-          && match(filterForm.freeState, torrent_info.volume_factor)
+          match(filterForm.freeState, torrent_info.volume_factor) &&
           // 季过滤
-          && match(filterForm.season, meta_info.season_episode)
+          match(filterForm.season, meta_info.season_episode) &&
           // 制作组过滤
-          && match(filterForm.releaseGroup, meta_info.resource_team)
+          match(filterForm.releaseGroup, meta_info.resource_team) &&
           // 视频编码过滤
-          && match(filterForm.videoCode, meta_info.video_encode)
+          match(filterForm.videoCode, meta_info.video_encode) &&
           // 分辨率过滤
-          && match(filterForm.resolution, meta_info.resource_pix)
+          match(filterForm.resolution, meta_info.resource_pix) &&
           // 质量过滤
-          && match(filterForm.edition, meta_info.edition)
+          match(filterForm.edition, meta_info.edition)
         )
       })
       if (matchData.length > 0) {
         const firstData = _.cloneDeepWith(matchData[0]) as SearchTorrent
-        if (matchData.length > 1)
+        if (matchData.length > 1) firstData.more = matchData.slice(1)
-          firstData.more = matchData.slice(1)
 
         dataList.value.push(firstData)
       }
@@ -236,7 +234,7 @@ watchEffect(() => {
 
 <style lang="scss">
 .grid-torrent-card {
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
   padding-block-end: 1rem;
 }
 </style>

src/views/plugin/PluginCardListView.vue

@@ -6,6 +6,44 @@ import NoDataFound from '@/components/NoDataFound.vue'
 import PluginAppCard from '@/components/cards/PluginAppCard.vue'
 import PluginCard from '@/components/cards/PluginCard.vue'
 import noImage from '@images/logos/plugin.png'
+import { useDisplay } from 'vuetify'
+import { isNullOrEmptyObject } from '@/@core/utils'
+import { useDefer } from '@/@core/utils/dom'
+
+const route = useRoute()
+
+// 显示器宽度
+const display = useDisplay()
+
+// 延迟加载
+let deferApp = (_: number) => true
+
+// 当前标签
+const activeTab = ref(route.params.tab)
+
+// 标签页
+const tabs = [
+  {
+    title: '我的插件',
+    tab: 'myplugin',
+  },
+  {
+    title: '插件市场',
+    tab: 'pluginmarket',
+  },
+]
+
+// 当前排序字段
+const activeSort = ref(null)
+
+// 排序选项
+const sortOptions = [
+  { title: '热门', value: 'count' },
+  { title: '插件名称', value: 'plugin_name' },
+  { title: '作者', value: 'plugin_author' },
+  { title: '插件仓库', value: 'repo_url' },
+  { title: '最新发布', value: 'add_time' },
+]
 
 // 已安装插件列表
 const dataList = ref<Plugin[]>([])
@@ -13,6 +51,9 @@ const dataList = ref<Plugin[]>([])
 // 未安装插件列表
 const uninstalledList = ref<Plugin[]>([])
 
+// 插件市场插件列表
+const marketList = ref<Plugin[]>([])
+
 // 是否刷新过
 const isRefreshed = ref(false)
 
@@ -46,6 +87,38 @@ const progressDialog = ref(false)
 // 进度框文本
 const progressText = ref('正在安装插件...')
 
+// 过滤表单
+const filterForm = reactive({
+  // 名称
+  name: '' as string,
+  // 作者
+  author: [] as string[],
+  // 标签
+  label: [] as string[],
+  // 插件库
+  repo: [] as string[],
+})
+
+// 作者过滤项
+const authorFilterOptions = ref<string[]>([])
+// 标签过滤项
+const labelFilterOptions = ref<string[]>([])
+// 插件库过滤项
+const repoFilterOptions = ref<string[]>([])
+
+// 初始化过滤选项
+function initOptions(item: Plugin) {
+  const optionValue = (options: Array<string>, value: string | undefined) => {
+    value && !options.includes(value) && options.push(value)
+  }
+  const optionMutipleValue = (options: Array<string>, value: string | undefined) => {
+    value && value.split(',').forEach(v => !options.includes(v) && options.push(v))
+  }
+  optionValue(authorFilterOptions.value, item.plugin_author)
+  optionMutipleValue(labelFilterOptions.value, item.plugin_label)
+  optionValue(repoFilterOptions.value, handleRepoUrl(item.repo_url))
+}
+
 // 关闭插件市场窗口
 function pluginDialogClose() {
   PluginAppDialog.value = false
@@ -58,15 +131,12 @@ async function installPlugin(item: Plugin) {
     progressDialog.value = true
     progressText.value = `正在安装 ${item?.plugin_name} v${item?.plugin_version} ...`
 
-    const result: { [key: string]: any } = await api.get(
+    const result: { [key: string]: any } = await api.get(`plugin/install/${item?.id}`, {
-      `plugin/install/${item?.id}`,
+      params: {
-      {
+        repo_url: item?.repo_url,
-        params: {
+        force: item?.has_update,
-          repo_url: item?.repo_url,
-          force: item?.has_update,
-        },
       },
-    )
+    })
 
     // 隐藏等待提示框
     progressDialog.value = false
@@ -76,12 +146,10 @@ async function installPlugin(item: Plugin) {
 
       // 刷新
       refreshData()
-    }
+    } else {
-    else {
       $toast.error(`插件 ${item?.plugin_name} 安装失败：${result.message}`)
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
@@ -92,8 +160,7 @@ function openPlugin(item: Plugin) {
   if (item.installed === true) {
     // 标记插件动作
     pluginActions.value[item.id || '0'] = true
-  }
+  } else {
-  else {
     // 如果是未安装插件则安装
     installPlugin(item)
   }
@@ -113,11 +180,10 @@ function pluginIconError(item: Plugin) {
 // 插件图标地址
 function pluginIcon(item: Plugin) {
   // 如果图片加载错误
-  if (pluginIconLoaded.value[item.id || '0'] === false)
+  if (pluginIconLoaded.value[item.id || '0'] === false) return noImage
-    return noImage
   // 如果是网络图片则使用代理后返回
   if (item?.plugin_icon?.startsWith('http'))
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/1/${encodeURIComponent(item?.plugin_icon).replace(/%2F/g, '/')}`
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(item?.plugin_icon)}`
 
   return `./plugin_icon/${item?.plugin_icon}`
 }
@@ -126,16 +192,15 @@ function pluginIcon(item: Plugin) {
 const filterPlugins = computed(() => {
   const all_list = [...dataList.value, ...uninstalledList.value]
   return all_list.filter((item: Plugin) => {
-    return item.plugin_name?.includes(keyword.value) || item.plugin_desc?.includes(keyword.value)
+    // 需要忽略大小写
+    return (
+      item.plugin_name?.toLowerCase().includes(keyword.value.toLowerCase()) ||
+      item.plugin_desc?.toLowerCase().includes(keyword.value.toLowerCase()) ||
+      !keyword
+    )
   })
 })
 
-// 新安装了插件
-function pluginInstalled() {
-  pluginDialogClose()
-  refreshData()
-}
-
 // 获取插件列表数据
 async function fetchInstalledPlugins() {
   try {
@@ -145,8 +210,7 @@ async function fetchInstalledPlugins() {
       },
     })
     isRefreshed.value = true
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
@@ -159,8 +223,6 @@ async function fetchUninstalledPlugins() {
         state: 'market',
       },
     })
-    // 设置APP市场加载完成
-    isAppMarketLoaded.value = true
     // 设置更新状态
     for (const uninstalled of uninstalledList.value) {
       for (const data of dataList.value) {
@@ -171,8 +233,14 @@ async function fetchUninstalledPlugins() {
         }
       }
     }
-  }
+    // 更新插件市场列表
-  catch (error) {
+    // 排除已安装且有更新的，上面的问题在于“本地存在未安装的旧版本插件且云端有更新时”不会在插件市场展示
+    marketList.value = uninstalledList.value.filter(item => !(item.has_update && item.installed))
+    // 初始化过滤选项
+    marketList.value.forEach(initOptions)
+    // 设置APP市场加载完成
+    isAppMarketLoaded.value = true
+  } catch (error) {
     console.error(error)
   }
 }
@@ -181,139 +249,189 @@ async function fetchUninstalledPlugins() {
 async function getPluginStatistics() {
   try {
     PluginStatistics.value = await api.get('plugin/statistic')
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
 
 // 加载所有数据
-function refreshData() {
+async function refreshData() {
-  fetchInstalledPlugins()
+  await fetchInstalledPlugins()
   fetchUninstalledPlugins()
 }
 
 // 对uninstalledList进行排序，按PluginStatistics倒序
 const sortedUninstalledList = computed(() => {
-  const list = uninstalledList.value.filter(item => !item.has_update)
+  // 匹配过滤函数
-  if (PluginStatistics.value.length === 0)
+  const match = (filter: Array<string>, value: string | undefined) =>
-    return list
+    filter.length === 0 || (value && filter.includes(value))
-  return list.sort((a, b) => {
+  const matchMultiple = (filter: Array<string>, value: string | undefined) =>
-    return PluginStatistics.value[b.id || '0'] - PluginStatistics.value[a.id || '0']
+    filter.length === 0 || (value && value.split(',').some(v => filter.includes(v)))
+  const filterText = (filter: string, value: string | undefined) =>
+    !filter || (value && value.toLowerCase().includes(filter.toLowerCase()))
+
+  // 过滤后的数据列表
+  const ret_list: Plugin[] = []
+
+  // 过滤
+  marketList.value.forEach(value => {
+    if (value) {
+      if (
+        filterText(filterForm.name, `${value.plugin_name} ${value.plugin_desc}`) &&
+        match(filterForm.author, value.plugin_author) &&
+        matchMultiple(filterForm.label, value.plugin_label) &&
+        match(filterForm.repo, handleRepoUrl(value.repo_url))
+      ) {
+        ret_list.push(value)
+      }
+    }
   })
+
+  deferApp = useDefer(ret_list.length)
+
+  if (isNullOrEmptyObject(PluginStatistics.value)) return ret_list
+  // 数据排序
+  if (!activeSort.value || activeSort.value === 'count') {
+    return ret_list.sort((a, b) => {
+      return PluginStatistics.value[b.id || '0'] - PluginStatistics.value[a.id || '0']
+    })
+  } else if (activeSort.value) {
+    return ret_list.sort((a: any, b: any) => {
+      return a[activeSort.value ?? ''] > b[activeSort.value ?? ''] ? 1 : -1
+    })
+  }
 })
 
-// 加载时获取数据
+// 标签转换
-onBeforeMount(() => {
+function pluginLabels(label: string | undefined) {
+  if (!label) return []
+  return label.split(',')
+}
+
+// 新安装了插件
+function pluginInstalled() {
+  pluginDialogClose()
   refreshData()
+}
+
+// 处理掉github地址的前缀
+function handleRepoUrl(url: string | undefined) {
+  if (!url) return ''
+  return url.replace('https://github.com/', '').replace('https://raw.githubusercontent.com/', '')
+}
+
+// 加载时获取数据
+onBeforeMount(async () => {
+  await refreshData()
   getPluginStatistics()
 })
 </script>
 
 <template>
-  <div
+  <div>
-    v-if="!isRefreshed"
+    <VTabs v-model="activeTab">
-    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+      <VTab v-for="item in tabs" :value="item.tab">
-  >
+        <span class="mx-5">{{ item.title }}</span>
-    <VProgressCircular
+      </VTab>
-      v-if="!isRefreshed"
+    </VTabs>
-      size="48"
-      indeterminate
-      color="primary"
-    />
-  </div>
-  <div
-    v-if="dataList.length > 0"
-    class="grid gap-4 grid-plugin-card"
-  >
-    <PluginCard
-      v-for="data in dataList"
-      :key="`${data.id}_v${data.plugin_version}`"
-      :count="PluginStatistics[data.id || '0']"
-      :plugin="data"
-      :action="pluginActions[data.id || '0']"
-      @remove="refreshData"
-      @save="refreshData"
-      @action-done="pluginActions[data.id || '0'] = false"
-    />
-  </div>
-  <NoDataFound
-    v-if="dataList.length === 0 && isRefreshed"
-    error-code="404"
-    error-title="没有安装插件"
-    error-description="点击右下角按钮，前往插件市场安装插件。"
-  />
-  <!-- App市场 -->
-  <VFab
-    icon="mdi-store-plus"
-    location="bottom end"
-    size="x-large"
-    fixed
-    app
-    appear
-    @click="PluginAppDialog = true"
-  />
-  <VDialog
-    v-if="PluginAppDialog"
-    v-model="PluginAppDialog"
-    fullscreen
-    scrollable
-    :scrim="false"
-    :z-index="1010"
-    transition="dialog-bottom-transition"
-  >
-    <!-- Dialog Content -->
-    <VCard>
-      <!-- Toolbar -->
-      <div>
-        <VToolbar color="primary">
-          <VToolbarTitle>插件市场</VToolbarTitle>
 
-          <VSpacer />
+    <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
-
+      <!-- 我的插件 -->
-          <VToolbarItems>
+      <VWindowItem value="myplugin">
-            <VBtn
+        <transition name="fade-slide" appear>
-              size="x-large"
+          <div>
-              @click="pluginDialogClose"
+            <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-            >
+            <div v-if="dataList.length > 0" class="grid gap-4 grid-plugin-card items-start">
-              <VIcon
+              <template v-for="(data, index) in dataList" :key="`${data.id}_v${data.plugin_version}`">
-                color="white"
+                <PluginCard
-                icon="mdi-close"
+                  :count="PluginStatistics[data.id || '0']"
-              />
+                  :plugin="data"
-            </VBtn>
+                  :action="pluginActions[data.id || '0']"
-          </VToolbarItems>
+                  @remove="refreshData"
-        </VToolbar>
+                  @save="refreshData"
-      </div>
+                  @action-done="pluginActions[data.id || '0'] = false"
-      <VCardText>
+                />
-        <div
+              </template>
-          v-if="!isAppMarketLoaded"
+            </div>
-          class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+            <NoDataFound
-        >
+              v-if="dataList.length === 0 && isRefreshed"
-          <VProgressCircular
+              error-code="404"
-            v-if="!isAppMarketLoaded"
+              error-title="没有安装插件"
-            size="48"
+              error-description="点击右下角按钮，前往插件市场安装插件。"
-            indeterminate
+            />
-            color="primary"
+          </div>
-          />
+        </transition>
-        </div>
+      </VWindowItem>
-        <div v-if="isAppMarketLoaded" class="grid gap-4 grid-plugin-card">
+      <!-- 插件市场 -->
-          <PluginAppCard
+      <VWindowItem value="pluginmarket">
-            v-for="data in sortedUninstalledList"
+        <transition name="fade-slide" appear>
-            :key="`${data.id}_v${data.plugin_version}`"
+          <div>
-            :plugin="data"
+            <LoadingBanner v-if="!isAppMarketLoaded" class="mt-12" />
-            :count="PluginStatistics[data.id || '0']"
+            <!-- 过滤表单 -->
-            @install="pluginInstalled"
+            <div v-if="isAppMarketLoaded" class="bg-transparent mb-3 shadow-none">
-          />
+              <VRow>
-        </div>
+                <VCol cols="6" md="">
-        <NoDataFound
+                  <VTextField v-model="filterForm.name" size="small" density="compact" label="名称" clearable />
-          v-if="uninstalledList.length === 0 && isAppMarketLoaded"
+                </VCol>
-          error-code="404"
+                <VCol v-if="authorFilterOptions.length > 0" cols="6" md="">
-          error-title="没有未安装插件"
+                  <VSelect
-          error-description="所有可用插件均已安装。"
+                    v-model="filterForm.author"
-        />
+                    :items="authorFilterOptions"
-      </VCardText>
+                    size="small"
-    </VCard>
+                    density="compact"
-  </VDialog>
+                    chips
+                    label="作者"
+                    multiple
+                  />
+                </VCol>
+                <VCol v-if="labelFilterOptions.length > 0" cols="6" md="">
+                  <VSelect
+                    v-model="filterForm.label"
+                    :items="labelFilterOptions"
+                    size="small"
+                    density="compact"
+                    chips
+                    label="标签"
+                    multiple
+                  />
+                </VCol>
+                <VCol v-if="repoFilterOptions.length > 0" cols="6" md="">
+                  <VSelect
+                    v-model="filterForm.repo"
+                    :items="repoFilterOptions"
+                    size="small"
+                    density="compact"
+                    chips
+                    label="插件库"
+                    multiple
+                  />
+                </VCol>
+                <VCol v-if="repoFilterOptions.length > 0" cols="6" md="">
+                  <VSelect v-model="activeSort" :items="sortOptions" size="small" density="compact" label="排序" />
+                </VCol>
+              </VRow>
+            </div>
+            <div v-if="isAppMarketLoaded" class="grid gap-4 grid-plugin-card items-start">
+              <template v-for="(data, index) in sortedUninstalledList" :key="`${data.id}_v${data.plugin_version}`">
+                <PluginAppCard
+                  v-if="deferApp(index)"
+                  :plugin="data"
+                  :count="PluginStatistics[data.id || '0']"
+                  @install="pluginInstalled"
+                />
+              </template>
+            </div>
+            <NoDataFound
+              v-if="uninstalledList.length === 0 && isAppMarketLoaded"
+              error-code="404"
+              error-title="没有未安装插件"
+              error-description="所有可用插件均已安装。"
+            />
+          </div>
+        </transition>
+      </VWindowItem>
+    </VWindow>
+  </div>
 
   <!-- 插件搜索 -->
   <VFab
@@ -333,12 +451,10 @@ onBeforeMount(() => {
     scrollable
     :z-index="1010"
     max-width="40rem"
-    max-height="85vh"
+    :max-height="!display.mdAndUp.value ? '' : '85vh'"
+    :fullscreen="!display.mdAndUp.value"
   >
-    <VCard
+    <VCard class="mx-auto" width="100%">
-      class="mx-auto"
-      width="100%"
-    >
       <VToolbar flat class="p-0">
         <VTextField
           v-model="keyword"
@@ -352,60 +468,50 @@ onBeforeMount(() => {
         />
       </VToolbar>
       <DialogCloseBtn @click="closeSearchDialog" />
-      <VList
+      <VList v-if="filterPlugins.length > 0" lines="three">
-        v-if="filterPlugins.length > 0"
+        <VVirtualScroll :items="filterPlugins">
-        lines="two"
+          <template #default="{ item }">
-      >
+            <VListItem @click="openPlugin(item)">
-        <template v-for="(item, i) in filterPlugins" :key="i">
+              <template #prepend>
-          <VListItem
+                <VAvatar>
-            @click="openPlugin(item)"
+                  <VImg :src="pluginIcon(item)" @error="pluginIconError(item)">
-          >
+                    <template #placeholder>
-            <template #prepend>
+                      <div class="w-full h-full">
-              <VAvatar>
+                        <VSkeletonLoader class="object-cover aspect-w-1 aspect-h-1" />
-                <VImg
+                      </div>
-                  :src="pluginIcon(item)"
+                    </template>
-                  @error="pluginIconError(item)"
+                  </VImg>
+                </VAvatar>
+              </template>
+              <VListItemTitle>
+                {{ item.plugin_name }}<span class="text-sm ms-2 mt-1 text-gray-500">v{{ item?.plugin_version }}</span>
+                <VIcon v-if="item.installed" color="success" icon="mdi-check-circle" class="ms-2" size="small" />
+              </VListItemTitle>
+              <VListItemSubtitle>
+                <VChip
+                  v-for="label in pluginLabels(item.plugin_label)"
+                  variant="tonal"
+                  size="small"
+                  class="me-1 my-1"
+                  color="info"
+                  label
                 >
-                  <template #placeholder>
+                  {{ label }}
-                    <div class="w-full h-full">
+                </VChip>
-                      <VSkeletonLoader class="object-cover aspect-w-1 aspect-h-1" />
+                {{ item.plugin_desc }}
-                    </div>
+              </VListItemSubtitle>
-                  </template>
+            </VListItem>
-                </VImg>
+          </template>
-              </VAvatar>
+        </VVirtualScroll>
-            </template>
-            <VListItemTitle>
-              {{ item.plugin_name }}<span class="text-sm ms-2 mt-1 text-gray-500">v{{ item?.plugin_version }}</span>
-              <VIcon
-                v-if="item.installed"
-                color="success"
-                icon="mdi-check-circle"
-                class="ms-2"
-                size="small"
-              />
-            </VListItemTitle>
-            <VListItemSubtitle class="mt-2" v-html="item.plugin_desc" />
-          </VListItem>
-        </template>
       </VList>
     </VCard>
   </VDialog>
   <!-- 安装插件进度框 -->
-  <VDialog
+  <VDialog v-model="progressDialog" :scrim="false" width="25rem">
-    v-model="progressDialog"
+    <VCard color="primary">
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
       <VCardText class="text-center">
         {{ progressText }}
-        <VProgressLinear
+        <VProgressLinear indeterminate color="white" class="mb-0 mt-1" />
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
       </VCardText>
     </VCard>
   </VDialog>
@@ -416,4 +522,8 @@ onBeforeMount(() => {
   grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
   padding-block-end: 1rem;
 }
+
+.v-tabs:not(.v-tabs-pill).v-tabs--horizontal {
+  border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
 </style>

src/views/reorganize/DownloadingListView.vue

@@ -67,17 +67,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
+  <LoadingBanner
     v-if="!isRefreshed"
-    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+    class="mt-12"
-  >
+  />
-    <VProgressCircular
-      v-if="!isRefreshed"
-      size="48"
-      indeterminate
-      color="primary"
-    />
-  </div>
   <PullRefresh
     v-model="loading"
     @refresh="onRefresh"

src/views/reorganize/TransferHistoryView.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { debounce } from 'lodash'
 import { ref, unref } from 'vue'
 import { useToast } from 'vue-toast-notification'
 import api from '@/api'
 import type { TransferHistory } from '@/api/types'
-import ReorganizeForm from '@/components/form/ReorganizeForm.vue'
+import ReorganizeDialog from '@/components/dialog/ReorganizeDialog.vue'
+import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
 
 // 提示框
 const $toast = useToast()
@@ -28,27 +30,27 @@ const headers = [
   {
     title: '标题',
     key: 'title',
-    sortable: false,
+    sortable: true,
   },
   {
     title: '目录',
     key: 'src',
-    sortable: false,
+    sortable: true,
   },
   {
     title: '转移方式',
     key: 'mode',
-    sortable: false,
+    sortable: true,
   },
   {
     title: '时间',
     key: 'date',
-    sortable: false,
+    sortable: true,
   },
   {
     title: '状态',
     key: 'status',
-    sortable: false,
+    sortable: true,
   },
   {
     title: '',
@@ -58,11 +60,13 @@ const headers = [
 ]
 
 const pageRange = [
-  {title: '25', value: 25},
+  { title: '25', value: 25 },
-  {title: '50', value: 50},
+  { title: '50', value: 50 },
-  {title: '100', value: 100},
+  { title: '100', value: 100 },
-  {title: '1000', value: 1000},
+  { title: '500', value: 500 },
-  {title: 'All', value: -1}]
+  { title: '1000', value: 1000 },
+  { title: 'All', value: -1 },
+]
 
 // 数据列表
 const dataList = ref<TransferHistory[]>([])
@@ -112,30 +116,32 @@ const TransferDict: { [key: string]: string } = {
 
 // 分页提示
 const pageTip = computed(() => {
-  const begin  = unref(itemsPerPage) * (unref(currentPage) - 1) + 1
+  const begin = unref(itemsPerPage) * (unref(currentPage) - 1) + 1
-  const end = unref(itemsPerPage) * unref(currentPage) === -1 ? 'ALL' : unref(itemsPerPage) * unref(currentPage) 
+  const end = unref(itemsPerPage) * unref(currentPage) === -1 ? 'ALL' : unref(itemsPerPage) * unref(currentPage)
   return {
     begin,
-    end
+    end,
   }
 })
 
 // 分页总数
 const totalPage = computed(() => {
-  const total = Math.ceil(unref(totalItems) /unref(itemsPerPage))
+  const total = Math.ceil(unref(totalItems) / unref(itemsPerPage))
   return total
 })
 
 // 切换页签和搜索词
 watch(
   [() => currentPage.value, () => itemsPerPage.value, () => search.value],
-  async () => {
+  debounce(async () => {
     await fetchData()
-})
+  }, 1000),
+)
 
 // 获取订阅列表数据
 async function fetchData(page = currentPage.value, count = itemsPerPage.value) {
   loading.value = true
+
   try {
     const result: { [key: string]: any } = await api.get('history/transfer', {
       params: {
@@ -150,8 +156,7 @@ async function fetchData(page = currentPage.value, count = itemsPerPage.value) {
     searchHintList.value = ['失败', '成功', ...new Set(dataList.value.map(item => item.title || ''))].filter(
       title => title !== '',
     )
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
   loading.value = false
@@ -159,12 +164,9 @@ async function fetchData(page = currentPage.value, count = itemsPerPage.value) {
 
 // 根据 type 返回不同的图标
 function getIcon(type: string) {
-  if (type === '电影')
+  if (type === '电影') return 'mdi-movie'
-    return 'mdi-movie'
+  else if (type === '电视剧') return 'mdi-television-classic'
-  else if (type === '电视剧')
+  else return 'mdi-help-circle'
-    return 'mdi-television-classic'
-  else
-    return 'mdi-help-circle'
 }
 
 // 删除历史记录
@@ -184,10 +186,8 @@ async function remove(item: TransferHistory, deleteSrc: boolean, deleteDest: boo
       data: item,
     })
 
-    if (!result.success)
+    if (!result.success) $toast.error(`删除失败: ${result.msg}`)
-      $toast.error(`删除失败: ${result.msg}`)
+  } catch (error) {
-  }
-  catch (error) {
     console.error(error)
   }
 }
@@ -196,8 +196,7 @@ async function remove(item: TransferHistory, deleteSrc: boolean, deleteDest: boo
 async function removeSingle(deleteSrc: boolean, deleteDest: boolean) {
   // 关闭弹窗
   deleteConfirmDialog.value = false
-  if (!currentHistory.value)
+  if (!currentHistory.value) return
-    return
 
   // 删除
   await remove(currentHistory.value, deleteSrc, deleteDest)
@@ -211,8 +210,7 @@ async function removeBatch(deleteSrc: boolean, deleteDest: boolean) {
   deleteConfirmDialog.value = false
   // 总条数
   const total = selected.value.length
-  if (total === 0)
+  if (total === 0) return
-    return
 
   // 已处理条数
   let handled = 0
@@ -237,16 +235,13 @@ async function removeBatch(deleteSrc: boolean, deleteDest: boolean) {
 
 // 响应删除操作
 async function deleteConfirmHandler(deleteSrc: boolean, deleteDest: boolean) {
-  if (currentHistory.value)
+  if (currentHistory.value) await removeSingle(deleteSrc, deleteDest)
-    await removeSingle(deleteSrc, deleteDest)
+  else await removeBatch(deleteSrc, deleteDest)
-  else
-    await removeBatch(deleteSrc, deleteDest)
 }
 
 // 批量删除历史记录
 async function removeHistoryBatch() {
-  if (selected.value.length === 0)
+  if (selected.value.length === 0) return
-    return
 
   // 清空当前操作记录
   currentHistory.value = undefined
@@ -257,26 +252,20 @@ async function removeHistoryBatch() {
 
 // 计算根路径
 function getRootPath(path: string, type: string, category: string) {
-  if (!path)
+  if (!path) return ''
-    return ''
 
   let index = -2
-  if (type !== '电影')
+  if (type !== '电影') index = -3
-    index = -3
 
-  if (category)
+  if (category) index -= 1
-    index -= 1
 
-  if (path.includes('/'))
+  if (path.includes('/')) return path.split('/').slice(0, index).join('/')
-    return path.split('/').slice(0, index).join('/')
+  else return path.split('\\').slice(0, index).join('\\')
-  else
-    return path.split('\\').slice(0, index).join('\\')
 }
 
 // 批量重新整理
 async function retransferBatch() {
-  if (selected.value.length === 0)
+  if (selected.value.length === 0) return
-    return
 
   // 清空当前操作记录
   currentHistory.value = undefined
@@ -292,8 +281,7 @@ async function retransferBatch() {
     const category = selected.value[0].category ?? ''
     // 计算根路径
     redoTarget.value = getRootPath(dest, mediaType, category)
-  }
+  } else {
-  else {
     redoTarget.value = ''
   }
   // 打开识别弹窗
@@ -329,7 +317,6 @@ const dropdownItems = ref([
 
 // 初始加载数据
 onMounted(fetchData)
-
 </script>
 
 <template>
@@ -337,9 +324,7 @@ onMounted(fetchData)
     <VCardItem>
       <VCardTitle>
         <VRow>
-          <VCol cols="4" md="6">
+          <VCol cols="4" md="6"> 历史记录 </VCol>
-            历史记录
-          </VCol>
           <VCol cols="8" md="6" class="flex">
             <VCombobox
               key="search_navbar"
@@ -378,15 +363,18 @@ onMounted(fetchData)
             <VIcon :icon="getIcon(item.type || '')" />
           </VAvatar>
           <div class="d-flex flex-column ms-1">
-            <span class="d-block text-high-emphasis min-w-20">
+            <span v-if="item.type === '电视剧'" class="d-block text-high-emphasis min-w-20">
               {{ item?.title }} {{ item?.seasons }}{{ item?.episodes }}
             </span>
+            <span v-else class="d-block text-high-emphasis min-w-20">
+              {{ item?.title }}
+            </span>
             <small>{{ item?.category }}</small>
           </div>
         </div>
       </template>
       <template #item.src="{ item }">
-        <small>{{ item?.src }} <br>=> {{ item?.dest }}</small>
+        <small>{{ item?.src }} <br />=> {{ item?.dest }}</small>
       </template>
       <template #item.mode="{ item }">
         <VChip variant="outlined" color="primary" size="small">
@@ -394,16 +382,12 @@ onMounted(fetchData)
         </VChip>
       </template>
       <template #item.status="{ item }">
-        <VChip v-if="item?.status" color="success" size="small">
+        <VChip v-if="item?.status" color="success" size="small"> 成功 </VChip>
-          成功
+        <VTooltip v-else :text="item?.errmsg">
-        </VChip>
-        <v-tooltip v-else :text="item?.errmsg">
           <template #activator="{ props }">
-            <VChip v-bind="props" color="error" size="small">
+            <VChip v-bind="props" color="error" size="small"> 失败 </VChip>
-              失败
-            </VChip>
           </template>
-        </v-tooltip>
+        </VTooltip>
       </template>
       <template #item.date="{ item }">
         <small>{{ item?.date }}</small>
@@ -429,22 +413,13 @@ onMounted(fetchData)
           </VMenu>
         </IconBtn>
       </template>
-      <template #no-data>
+      <template #no-data> 没有数据 </template>
-        没有数据
-      </template>
     </VDataTableVirtual>
     <div class="flex items-center justify-end">
       <div class="w-auto">
-        <VSelect
+        <VSelect v-model="itemsPerPage" :items="pageRange" density="compact" variant="solo" flat />
-          v-model="itemsPerPage"
-          :items="pageRange"
-          density="compact"
-          variant="solo"
-          flat
-          size="small"
-        />
       </div>
-      <div class="w-auto text-sm">{{pageTip.begin}}-{{pageTip.end}} / {{totalItems}}</div>
+      <div class="w-auto text-sm">{{ pageTip.begin }}-{{ pageTip.end }} / {{ totalItems }}</div>
       <VPagination
         v-model="currentPage"
         show-first-last-page
@@ -463,12 +438,8 @@ onMounted(fetchData)
         {{ confirmTitle }}
       </VCardTitle>
       <div class="d-flex flex-column flex-lg-row justify-center my-3">
-        <VBtn color="primary" class="mb-2 mx-2" @click="deleteConfirmHandler(false, false)">
+        <VBtn color="primary" class="mb-2 mx-2" @click="deleteConfirmHandler(false, false)"> 仅删除历史记录 </VBtn>
-          仅删除历史记录
+        <VBtn color="warning" class="mb-2 mx-2" @click="deleteConfirmHandler(true, false)"> 删除历史记录和源文件 </VBtn>
-        </VBtn>
-        <VBtn color="warning" class="mb-2 mx-2" @click="deleteConfirmHandler(true, false)">
-          删除历史记录和源文件
-        </VBtn>
         <VBtn color="info" class="mb-2 mx-2" @click="deleteConfirmHandler(false, true)">
           删除历史记录和媒体库文件
         </VBtn>
@@ -478,8 +449,10 @@ onMounted(fetchData)
       </div>
     </VCard>
   </VBottomSheet>
+  <!-- 进度框 -->
+  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" :value="progressValue" />
   <!-- 文件整理弹窗 -->
-  <ReorganizeForm
+  <ReorganizeDialog
     v-if="redoDialog"
     v-model="redoDialog"
     :logids="redoIds"
@@ -531,4 +504,10 @@ onMounted(fetchData)
 .data-table-div {
   block-size: calc(100vh - 14rem);
 }
+
+@media (width <= 768px) {
+  .data-table-div {
+    block-size: calc(100vh - 17rem);
+  }
+}
 </style>

src/views/setting/AccountSettingAbout.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { calculateTimeDifference } from '@/@core/utils'
+import { formatDateDifference } from '@/@core/utils/formatters'
 import api from '@/api'
 
 // 系统环境变量
@@ -30,13 +30,10 @@ function showReleaseDialog(title: string, body: string) {
 // 查询系统环境变量
 async function querySystemEnv() {
   try {
-    const result: { [key: string]: any } = await api.get(
+    const result: { [key: string]: any } = await api.get('system/env')
-      'system/env',
-    )
 
     systemEnv.value = result.data
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -44,17 +41,13 @@ async function querySystemEnv() {
 // 查询所有Release
 async function queryAllRelease() {
   try {
-    const result: { [key: string]: any } = await api.get(
+    const result: { [key: string]: any } = await api.get('system/versions')
-      'system/versions',
-    )
 
     allRelease.value = result.data ?? []
 
     // 最新版本
-    if (allRelease.value.length > 0)
+    if (allRelease.value.length > 0) latestRelease.value = allRelease.value[0].tag_name
-      latestRelease.value = allRelease.value[0].tag_name
+  } catch (error) {
-  }
-  catch (error) {
     console.log(error)
   }
 }
@@ -62,7 +55,7 @@ async function queryAllRelease() {
 // 计算发布时间
 function releaseTime(releaseDate: string) {
   // 上一次更新时间
-  return `${calculateTimeDifference(releaseDate)}前`
+  return formatDateDifference(releaseDate)
 }
 
 onMounted(() => {
@@ -75,22 +68,25 @@ onMounted(() => {
   <div class="px-3">
     <div class="section">
       <div>
-        <h3 class="heading">
+        <h3 class="heading">关于 MoviePilot</h3>
-          关于 MoviePilot
-        </h3>
       </div>
       <div class="section border-t border-gray-800">
         <dl>
           <div>
             <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">
+              <dt class="block text-sm font-bold">软件版本</dt>
-                软件版本
-              </dt>
               <dd class="flex text-sm sm:col-span-2 sm:mt-0">
                 <span class="flex-grow flex flex-row items-center truncate">
                   <code class="truncate">{{ systemEnv.VERSION }}</code>
-                  <a v-if="latestRelease === systemEnv.VERSION" href="https://github.com/jxxghp/MoviePilot/releases" target="_blank" rel="noopener noreferrer">
+                  <a
-                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap bg-green-500 bg-opacity-80 border border-green-500 !text-green-100 ml-2 !cursor-pointer transition hover:bg-green-400">
+                    v-if="latestRelease === systemEnv.VERSION"
+                    href="https://github.com/jxxghp/MoviePilot/releases"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <span
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap bg-green-500 bg-opacity-80 border border-green-500 !text-green-100 ml-2 !cursor-pointer transition hover:bg-green-400"
+                    >
                       最新
                     </span>
                   </a>
@@ -98,11 +94,19 @@ onMounted(() => {
               </dd>
             </div>
           </div>
+          <div v-if="systemEnv.FRONTEND_VERSION">
+            <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+              <dt class="block text-sm font-bold">前端版本</dt>
+              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
+                <span class="flex-grow flex flex-row items-center truncate">
+                  <code class="truncate">{{ systemEnv.FRONTEND_VERSION }}</code>
+                </span>
+              </dd>
+            </div>
+          </div>
           <div>
             <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">
+              <dt class="block text-sm font-bold">认证资源版本</dt>
-                认证资源版本
-              </dt>
               <dd class="flex text-sm sm:col-span-2 sm:mt-0">
                 <span class="flex-grow flex flex-row items-center truncate">
                   <code class="truncate">{{ systemEnv.AUTH_VERSION }}</code>
@@ -112,9 +116,7 @@ onMounted(() => {
           </div>
           <div>
             <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">
+              <dt class="block text-sm font-bold">站点资源版本</dt>
-                站点资源版本
-              </dt>
               <dd class="flex text-sm sm:col-span-2 sm:mt-0">
                 <span class="flex-grow flex flex-row items-center truncate">
                   <code class="truncate">{{ systemEnv.INDEXER_VERSION }}</code>
@@ -124,9 +126,7 @@ onMounted(() => {
           </div>
           <div>
             <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">
+              <dt class="block text-sm font-bold">配置目录</dt>
-                配置目录
-              </dt>
               <dd class="flex text-sm sm:col-span-2 sm:mt-0">
                 <span class="flex-grow undefined">
                   <code>{{ systemEnv.CONFIG_DIR }}</code>
@@ -134,9 +134,7 @@ onMounted(() => {
               </dd>
             </div>
             <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">
+              <dt class="block text-sm font-bold">数据目录</dt>
-                数据目录
-              </dt>
               <dd class="flex text-sm sm:col-span-2 sm:mt-0">
                 <span class="flex-grow undefined"><code>/moviepilot</code></span>
               </dd>
@@ -144,9 +142,7 @@ onMounted(() => {
           </div>
           <div>
             <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">
+              <dt class="block text-sm font-bold">时区</dt>
-                时区
-              </dt>
               <dd class="flex text-sm sm:col-span-2 sm:mt-0">
                 <span class="flex-grow undefined">
                   <code>{{ systemEnv.TZ }}</code>
@@ -159,44 +155,55 @@ onMounted(() => {
     </div>
     <div class="section">
       <div>
-        <h3 class="heading">
+        <h3 class="heading">支援</h3>
-          支援
-        </h3>
       </div>
       <div class="section border-t border-gray-800">
         <dl>
           <div>
             <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">
+              <dt class="block text-sm font-bold">文档</dt>
-                文档
+              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-              </dt><dd class="flex text-sm sm:col-span-2 sm:mt-0">
                 <span class="flex-grow undefined">
-                  <a href="https://github.com/jxxghp/MoviePilot/blob/main/README.md" target="_blank" rel="noreferrer" class="text-indigo-500 transition duration-300 hover:underline">
+                  <a
+                    href="https://github.com/jxxghp/MoviePilot/blob/main/README.md"
+                    target="_blank"
+                    rel="noreferrer"
+                    class="text-indigo-500 transition duration-300 hover:underline"
+                  >
                     https://github.com/jxxghp/MoviePilot/blob/main/README.md
                   </a>
                 </span>
               </dd>
             </div>
-          </div><div>
+          </div>
+          <div>
             <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">
+              <dt class="block text-sm font-bold">问题反馈</dt>
-                问题反馈
+              <dd class="flex text-sm sm:col-span-2 sm:mt-0">
-              </dt><dd class="flex text-sm sm:col-span-2 sm:mt-0">
                 <span class="flex-grow undefined">
-                  <a href="https://github.com/jxxghp/MoviePilot/issues/new/choose" target="_blank" rel="noreferrer" class="text-indigo-500 transition duration-300 hover:underline">
+                  <a
+                    href="https://github.com/jxxghp/MoviePilot/issues/new/choose"
+                    target="_blank"
+                    rel="noreferrer"
+                    class="text-indigo-500 transition duration-300 hover:underline"
+                  >
                     https://github.com/jxxghp/MoviePilot/issues/new/choose
                   </a>
                 </span>
               </dd>
             </div>
-          </div><div>
+          </div>
+          <div>
             <div class="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-              <dt class="block text-sm font-bold">
+              <dt class="block text-sm font-bold">发布频道</dt>
-                发布频道
-              </dt>
               <dd class="flex text-sm sm:col-span-2 sm:mt-0">
                 <span class="flex-grow undefined">
-                  <a href="https://t.me/moviepilot_channel" target="_blank" rel="noreferrer" class="text-indigo-500 transition duration-300 hover:underline">
+                  <a
+                    href="https://t.me/moviepilot_channel"
+                    target="_blank"
+                    rel="noreferrer"
+                    class="text-indigo-500 transition duration-300 hover:underline"
+                  >
                     https://t.me/moviepilot_channel
                   </a>
                 </span>
@@ -208,21 +215,31 @@ onMounted(() => {
     </div>
     <div class="section">
       <div>
-        <h3 class="heading">
+        <h3 class="heading">软件版本</h3>
-          软件版本
-        </h3>
         <div class="section space-y-3">
           <div>
-            <div v-for="release in allRelease" :key="release.tag_name" class="mb-3 flex w-full flex-col space-y-3 rounded-md px-4 py-2 shadow-md ring-1 ring-gray-400 sm:flex-row sm:space-y-0 sm:space-x-3">
+            <div
+              v-for="release in allRelease"
+              :key="release.tag_name"
+              class="mb-3 flex w-full flex-col space-y-3 rounded-md px-4 py-2 shadow-md ring-1 ring-gray-400 sm:flex-row sm:space-y-0 sm:space-x-3"
+            >
               <div class="flex w-full flex-grow items-center justify-start space-x-2 truncate sm:justify-start">
                 <span class="truncate text-lg font-bold">
-                  <span class="mr-2 whitespace-nowrap text-xs font-normal">{{ releaseTime(release.published_at) }}</span>
+                  <span class="mr-2 whitespace-nowrap text-xs font-normal">{{
+                    releaseTime(release.published_at)
+                  }}</span>
                   {{ release.tag_name }}
                 </span>
-                <span v-if="release.tag_name === latestRelease" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap cursor-default bg-green-500 bg-opacity-80 border border-green-500 !text-green-100">
+                <span
+                  v-if="release.tag_name === latestRelease"
+                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap cursor-default bg-green-500 bg-opacity-80 border border-green-500 !text-green-100"
+                >
                   最新软件版本
                 </span>
-                <span v-if="release.tag_name === systemEnv.VERSION" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap cursor-default bg-indigo-500 bg-opacity-80 border border-indigo-500 !text-indigo-100">
+                <span
+                  v-if="release.tag_name === systemEnv.VERSION"
+                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap cursor-default bg-indigo-500 bg-opacity-80 border border-indigo-500 !text-indigo-100"
+                >
                   当前版本
                 </span>
               </div>

src/views/setting/AccountSettingAccount.vue

@@ -85,10 +85,8 @@ async function loadAccountInfo() {
     const user: User = await api.get('user/current')
     console.log(user)
     accountInfo.value = user
-    if (!accountInfo.value.avatar)
+    if (!accountInfo.value.avatar) accountInfo.value.avatar = avatar1
-      accountInfo.value.avatar = avatar1
+  } catch (error) {
-  }
-  catch (error) {
     console.log(error)
   }
 }
@@ -105,12 +103,9 @@ async function saveAccountInfo() {
   }
   try {
     const result: { [key: string]: any } = await api.put('user/', accountInfo.value)
-    if (result.success)
+    if (result.success) $toast.success('用户信息保存成功！')
-      $toast.success('用户信息保存成功！')
+    else $toast.error(`用户信息保存失败：${result.message}！`)
-    else
+  } catch (error) {
-      $toast.error(`用户信息保存失败：${result.message}！`)
-  }
-  catch (error) {
     console.log(error)
   }
 }
@@ -121,8 +116,7 @@ async function loadAllUsers() {
     const result: User[] = await api.get('/user/')
 
     allUsers.value = result
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -134,12 +128,10 @@ async function deleteUser(user: User) {
     if (result.success) {
       $toast.success('用户删除成功！')
       loadAllUsers()
-    }
+    } else {
-    else {
       $toast.error(`用户删除失败：${result.message}！`)
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -153,12 +145,10 @@ async function deactivateUser(user: User) {
     if (result.success) {
       $toast.success('用户冻结成功！')
       loadAllUsers()
-    }
+    } else {
-    else {
       $toast.error(`用户冻结失败：${result.message}！`)
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -175,12 +165,10 @@ async function addUser() {
       $toast.success('用户新增成功！')
       loadAllUsers()
       addUserDialog.value = false
-    }
+    } else {
-    else {
       $toast.error(`用户新增失败：${result.message}！`)
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -194,12 +182,10 @@ async function getOtpUri() {
       secret.value = result.data.secret
       qrCode.value = result.data.uri
       otpDialog.value = true
-    }
+    } else {
-    else {
       $toast.error(`获取otp uri失败：${result.message}！`)
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -211,12 +197,10 @@ async function disableOtp() {
     if (result.success) {
       accountInfo.value.is_otp = false
       $toast.success('关闭登录双重验证成功！')
-    }
+    } else {
-    else {
       $toast.error(`关闭otp失败：${result.message}！`)
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -228,18 +212,19 @@ async function judgeOtpPassword() {
     return
   }
   try {
-    const result: { [key: string]: any } = await api.post('user/otp/judge', { uri: otpUri.value, otpPassword: otpPassword.value })
+    const result: { [key: string]: any } = await api.post('user/otp/judge', {
+      uri: otpUri.value,
+      otpPassword: otpPassword.value,
+    })
 
     if (result.success) {
       $toast.success('开启登录双重验证成功！')
       otpDialog.value = false
       accountInfo.value.is_otp = true
-    }
+    } else {
-    else {
       $toast.error(`开启otp失败：${result.message}！`)
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -252,362 +237,236 @@ onMounted(() => {
 </script>
 
 <template>
-  <VRow>
+  <div>
-    <VCol cols="12">
+    <VRow>
-      <VCard title="个人信息">
+      <VCol cols="12">
-        <VCardText class="d-flex">
+        <VCard title="个人信息">
-          <!-- 👉 Avatar -->
+          <VCardText class="d-flex">
-          <VAvatar
+            <!-- 👉 Avatar -->
-            rounded="lg"
+            <VAvatar rounded="lg" size="100" class="me-6" :image="accountInfo.avatar" />
-            size="100"
-            class="me-6"
-            :image="accountInfo.avatar"
-          />
 
-          <!-- 👉 Upload Photo -->
+            <!-- 👉 Upload Photo -->
-          <form class="d-flex flex-column justify-center gap-5">
+            <form class="d-flex flex-column justify-center gap-5">
-            <div class="d-flex flex-wrap gap-2">
+              <div class="d-flex flex-wrap gap-2">
-              <VBtn
+                <VBtn color="primary" @click="refInputEl?.click()">
-                color="primary"
+                  <VIcon icon="mdi-cloud-upload-outline" />
-                @click="refInputEl?.click()"
+                  <span class="d-none d-sm-block ms-2">上传头像</span>
-              >
-                <VIcon
-                  icon="mdi-cloud-upload-outline"
-                />
-                <span class="d-none d-sm-block ms-2">上传头像</span>
-              </VBtn>
-
-              <input
-                ref="refInputEl"
-                type="file"
-                name="file"
-                accept=".jpeg,.png,.jpg,GIF"
-                hidden
-                @input="changeAvatar"
-              >
-
-              <VBtn
-                type="reset"
-                color="error"
-                variant="tonal"
-                @click="resetAvatar"
-              >
-                <VIcon
-                  icon="mdi-refresh"
-                />
-                <span class="d-none d-sm-block ms-2">重置</span>
-              </VBtn>
-
-              <VBtn
-                :color="accountInfo.is_otp ? 'error' : 'info'"
-                variant="tonal"
-                @click.stop="accountInfo.is_otp ? disableOtp() : getOtpUri()"
-              >
-                <VIcon
-                  icon="mdi-account-key"
-                />
-                <span class="d-none d-sm-block ms-2">{{ accountInfo.is_otp ? "关闭验证" : "双重验证" }}</span>
-              </VBtn>
-            </div>
-
-            <p class="text-body-1 mb-0">
-              允许 JPG、GIF 或 PNG 格式， 最大尺寸 800K。
-            </p>
-          </form>
-        </VCardText>
-
-        <VDivider />
-
-        <VCardText>
-          <!-- 👉 Form -->
-          <VForm class="mt-6">
-            <VRow>
-              <!-- 👉 Name -->
-              <VCol
-                md="6"
-                cols="12"
-              >
-                <VTextField
-                  v-model="accountInfo.name"
-                  readonly
-                  label="用户名"
-                />
-              </VCol>
-
-              <!-- 👉 Email -->
-              <VCol
-                cols="12"
-                md="6"
-              >
-                <VTextField
-                  v-model="accountInfo.email"
-                  label="邮箱"
-                  type="email"
-                />
-              </VCol>
-
-              <VCol
-                cols="12"
-                md="6"
-              >
-                <!-- 👉 new password -->
-                <VTextField
-                  v-model="newPassword"
-                  :type="isNewPasswordVisible ? 'text' : 'password'"
-                  :append-inner-icon="isNewPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
-                  label="新密码"
-                  autocomplete=""
-                  @click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
-                />
-              </VCol>
-
-              <VCol
-                cols="12"
-                md="6"
-              >
-                <!-- 👉 confirm password -->
-                <VTextField
-                  v-model="confirmPassword"
-                  :type="isConfirmPasswordVisible ? 'text' : 'password'"
-                  :append-inner-icon="
-                    isConfirmPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
-                  "
-                  label="确认新密码"
-                  @click:append-inner="
-                    isConfirmPasswordVisible = !isConfirmPasswordVisible
-                  "
-                />
-              </VCol>
-
-              <!-- 👉 Form Actions -->
-              <VCol
-                cols="12"
-                class="d-flex flex-wrap gap-4"
-              >
-                <VBtn @click="saveAccountInfo">
-                  保存
                 </VBtn>
+
+                <input
+                  ref="refInputEl"
+                  type="file"
+                  name="file"
+                  accept=".jpeg,.png,.jpg,GIF"
+                  hidden
+                  @input="changeAvatar"
+                />
+
+                <VBtn type="reset" color="error" variant="tonal" @click="resetAvatar">
+                  <VIcon icon="mdi-refresh" />
+                  <span class="d-none d-sm-block ms-2">重置</span>
+                </VBtn>
+
+                <VBtn
+                  :color="accountInfo.is_otp ? 'error' : 'info'"
+                  variant="tonal"
+                  @click.stop="accountInfo.is_otp ? disableOtp() : getOtpUri()"
+                >
+                  <VIcon icon="mdi-account-key" />
+                  <span class="d-none d-sm-block ms-2">{{ accountInfo.is_otp ? '关闭验证' : '双重验证' }}</span>
+                </VBtn>
+              </div>
+
+              <p class="text-body-1 mb-0">允许 JPG、GIF 或 PNG 格式， 最大尺寸 800K。</p>
+            </form>
+          </VCardText>
+
+          <VDivider />
+
+          <VCardText>
+            <!-- 👉 Form -->
+            <VForm class="mt-6">
+              <VRow>
+                <!-- 👉 Name -->
+                <VCol md="6" cols="12">
+                  <VTextField v-model="accountInfo.name" readonly label="用户名" />
+                </VCol>
+
+                <!-- 👉 Email -->
+                <VCol cols="12" md="6">
+                  <VTextField v-model="accountInfo.email" label="邮箱" type="email" />
+                </VCol>
+
+                <VCol cols="12" md="6">
+                  <!-- 👉 new password -->
+                  <VTextField
+                    v-model="newPassword"
+                    :type="isNewPasswordVisible ? 'text' : 'password'"
+                    :append-inner-icon="isNewPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                    label="新密码"
+                    autocomplete=""
+                    @click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
+                  />
+                </VCol>
+
+                <VCol cols="12" md="6">
+                  <!-- 👉 confirm password -->
+                  <VTextField
+                    v-model="confirmPassword"
+                    :type="isConfirmPasswordVisible ? 'text' : 'password'"
+                    :append-inner-icon="isConfirmPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                    label="确认新密码"
+                    @click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
+                  />
+                </VCol>
+
+                <!-- 👉 Form Actions -->
+                <VCol cols="12" class="d-flex flex-wrap gap-4">
+                  <VBtn @click="saveAccountInfo"> 保存 </VBtn>
+                </VCol>
+              </VRow>
+            </VForm>
+          </VCardText>
+        </VCard>
+      </VCol>
+
+      <VCol v-if="accountInfo.is_superuser" cols="12">
+        <!-- 👉 Accounts -->
+        <VCard title="所有用户">
+          <template #append>
+            <IconBtn @click.stop="addUserDialog = true">
+              <VIcon icon="mdi-plus" />
+            </IconBtn>
+          </template>
+          <VTable class="text-no-wrap">
+            <thead>
+              <tr>
+                <th scope="col">用户名</th>
+                <th scope="col">邮箱</th>
+                <th scope="col">状态</th>
+                <th scope="col">管理员</th>
+                <th scope="col" class="w-5" />
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="user in allUsers" :key="user.name">
+                <td>
+                  {{ user.name }}
+                </td>
+                <td>{{ user.email }}</td>
+                <td>
+                  <VChip v-if="user.is_active" color="success" text-color="white"> 激活 </VChip>
+                  <VChip v-else color="error" text-color="white"> 冻结 </VChip>
+                </td>
+                <td>{{ user.is_superuser ? '是' : '否' }}</td>
+                <td>
+                  <IconBtn v-show="accountInfo.is_superuser && accountInfo.name !== user.name">
+                    <VIcon icon="mdi-dots-vertical" />
+                    <VMenu activator="parent" close-on-content-click>
+                      <VList>
+                        <VListItem variant="plain" @click="deactivateUser(user)">
+                          <template #prepend>
+                            <VIcon icon="mdi-lock" />
+                          </template>
+                          <VListItemTitle>
+                            {{ user.is_active ? '冻结' : '解冻' }}
+                          </VListItemTitle>
+                        </VListItem>
+                        <VListItem variant="plain" base-color="error" @click="deleteUser(user)">
+                          <template #prepend>
+                            <VIcon icon="mdi-delete" />
+                          </template>
+                          <VListItemTitle>删除</VListItemTitle>
+                        </VListItem>
+                      </VList>
+                    </VMenu>
+                  </IconBtn>
+                </td>
+              </tr>
+            </tbody>
+          </VTable>
+        </VCard>
+      </VCol>
+    </VRow>
+    <!-- =弹窗 -->
+    <VDialog v-model="addUserDialog" max-width="50rem" persistent z-index="1010">
+      <!-- Dialog Content -->
+      <VCard title="新增用户">
+        <VCardText>
+          <VForm @submit.prevent="() => {}">
+            <VRow>
+              <VCol cols="12" md="6">
+                <VTextField v-model="userForm.name" label="用户名" :rules="[requiredValidator]" />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="userForm.password"
+                  label="密码"
+                  :rules="[requiredValidator]"
+                  :type="isPasswordVisible ? 'text' : 'password'"
+                  :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                  @click:append-inner="isPasswordVisible = !isPasswordVisible"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField v-model="userForm.email" :rules="[requiredValidator]" label="邮箱" />
               </VCol>
             </VRow>
           </VForm>
         </VCardText>
+        <VCardActions>
+          <VBtn @click="addUserDialog = false"> 取消 </VBtn>
+          <VSpacer />
+          <VBtn @click="addUser"> 确定 </VBtn>
+        </VCardActions>
       </VCard>
-    </VCol>
+    </VDialog>
 
-    <VCol
+    <!-- 双重验证弹窗 -->
-      v-if="accountInfo.is_superuser"
+    <VDialog v-model="otpDialog" max-width="45rem" persistent z-index="1010">
-      cols="12"
+      <!-- 开启双重验证弹窗内容 -->
-    >
+      <VCard>
-      <!-- 👉 Accounts -->
+        <DialogCloseBtn @click="otpDialog = false" />
-      <VCard title="所有用户">
+        <VCardText>
-        <template #append>
+          <h4 class="text-h4 text-center mb-6 mt-5">登录双重验证</h4>
-          <IconBtn @click.stop="addUserDialog = true">
+          <h5 class="text-h5 font-weight-medium mb-2">身份验证器</h5>
-            <VIcon icon="mdi-plus" />
+          <p class="mb-6">
-          </IconBtn>
+            使用像Google Authenticator、Microsoft
-        </template>
+            Authenticator、Authy或1Password这样的身份验证器应用程序，扫描二维码。它将为您生成一个6位数的代码，供您在下方输入。
-        <VTable class="text-no-wrap">
+          </p>
-          <thead>
+          <div class="my-6">
-            <tr>
+            <QrcodeVue class="mx-auto" :value="qrCode" :size="200" max-width="25rem" />
-              <th scope="col">
-                用户名
-              </th>
-              <th scope="col">
-                邮箱
-              </th>
-              <th scope="col">
-                状态
-              </th>
-              <th scope="col">
-                管理员
-              </th>
-              <th
-                scope="col"
-                class="w-5"
-              />
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="user in allUsers"
-              :key="user.name"
-            >
-              <td>
-                {{ user.name }}
-              </td>
-              <td>{{ user.email }}</td>
-              <td>
-                <VChip
-                  v-if="user.is_active"
-                  color="success"
-                  text-color="white"
-                >
-                  激活
-                </VChip>
-                <VChip
-                  v-else
-                  color="error"
-                  text-color="white"
-                >
-                  冻结
-                </VChip>
-              </td>
-              <td>{{ user.is_superuser ? "是" : "否" }}</td>
-              <td>
-                <IconBtn v-show="accountInfo.is_superuser && accountInfo.name !== user.name">
-                  <VIcon icon="mdi-dots-vertical" />
-                  <VMenu
-                    activator="parent"
-                    close-on-content-click
-                  >
-                    <VList>
-                      <VListItem
-                        variant="plain"
-                        @click="deactivateUser(user)"
-                      >
-                        <template #prepend>
-                          <VIcon icon="mdi-lock" />
-                        </template>
-                        <VListItemTitle>
-                          {{
-                            user.is_active ? "冻结" : "解冻"
-                          }}
-                        </VListItemTitle>
-                      </VListItem>
-                      <VListItem
-                        variant="plain"
-                        base-color="error"
-                        @click="deleteUser(user)"
-                      >
-                        <template #prepend>
-                          <VIcon icon="mdi-delete" />
-                        </template>
-                        <VListItemTitle>删除</VListItemTitle>
-                      </VListItem>
-                    </VList>
-                  </VMenu>
-                </IconBtn>
-              </td>
-            </tr>
-          </tbody>
-        </VTable>
-      </VCard>
-    </VCol>
-  </VRow>
-  <!-- =弹窗 -->
-  <VDialog
-    v-model="addUserDialog"
-    max-width="50rem"
-    persistent
-    z-index="1010"
-  >
-    <!-- Dialog Content -->
-    <VCard title="新增用户">
-      <VCardText>
-        <VForm @submit.prevent="() => {}">
-          <VRow>
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <VTextField
-                v-model="userForm.name"
-                label="用户名"
-                :rules="[requiredValidator]"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <VTextField
-                v-model="userForm.password"
-                label="密码"
-                :rules="[requiredValidator]"
-                :type="isPasswordVisible ? 'text' : 'password'"
-                :append-inner-icon="
-                  isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
-                "
-                @click:append-inner="isPasswordVisible = !isPasswordVisible"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <VTextField
-                v-model="userForm.email"
-                :rules="[requiredValidator]"
-                label="邮箱"
-              />
-            </VCol>
-          </VRow>
-        </VForm>
-      </VCardText>
-      <VCardActions>
-        <VBtn @click="addUserDialog = false">
-          取消
-        </VBtn>
-        <VSpacer />
-        <VBtn @click="addUser">
-          确定
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
-
-  <!-- 双重验证弹窗 -->
-  <VDialog
-    v-model="otpDialog"
-    max-width="45rem"
-    persistent
-    z-index="1010"
-  >
-    <!-- 开启双重验证弹窗内容 -->
-    <VCard>
-      <DialogCloseBtn @click="otpDialog = false" />
-      <VCardText>
-        <h4 class="text-h4 text-center mb-6 mt-5">
-          登录双重验证
-        </h4><h5 class="text-h5 font-weight-medium mb-2">
-          身份验证器
-        </h5>
-        <p class="mb-6">
-          使用像Google Authenticator、Microsoft Authenticator、Authy或1Password这样的身份验证器应用程序，扫描二维码。它将为您生成一个6位数的代码，供您在下方输入。
-        </p>
-        <div class="my-6">
-          <QrcodeVue class="mx-auto" :value="qrCode" :size="200" max-width="25rem" />
-        </div>
-        <VAlert
-          :title="secret"
-          variant="tonal"
-          type="warning"
-          class="my-4"
-          text="如果您在使用二维码时遇到困难，请在您的应用程序中选择手动输入以上代码。"
-        >
-          <template #prepend />
-        </VAlert>
-        <VForm>
-          <VTextField
-            v-model="otpPassword"
-            type="text"
-            label="输入验证码以确认开启双重验证"
-            autocomplete=""
-            class="mb-8"
-            variant="outlined"
-          />
-          <div class="d-flex justify-end flex-wrap gap-4">
-            <VBtn variant="outlined" color="secondary" @click="otpDialog = false">
-              取消
-            </VBtn>
-            <VBtn @click="judgeOtpPassword">
-              确定
-              <template #append>
-                <VIcon icon="mdi-check" />
-              </template>
-            </VBtn>
           </div>
-        </VForm>
+          <VAlert
-      </VCardText>
+            :title="secret"
-    </VCard>
+            variant="tonal"
-  </VDialog>
+            type="warning"
+            class="my-4"
+            text="如果您在使用二维码时遇到困难，请在您的应用程序中选择手动输入以上代码。"
+          >
+            <template #prepend />
+          </VAlert>
+          <VForm>
+            <VTextField
+              v-model="otpPassword"
+              type="text"
+              label="输入验证码以确认开启双重验证"
+              autocomplete=""
+              class="mb-8"
+              variant="outlined"
+            />
+            <div class="d-flex justify-end flex-wrap gap-4">
+              <VBtn variant="outlined" color="secondary" @click="otpDialog = false"> 取消 </VBtn>
+              <VBtn @click="judgeOtpPassword">
+                <template #prepend>
+                  <VIcon icon="mdi-check" />
+                </template>
+                确定
+              </VBtn>
+            </div>
+          </VForm>
+        </VCardText>
+      </VCard>
+    </VDialog>
+  </div>
 </template>

src/views/setting/AccountSettingSearch.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
+import draggable from 'vuedraggable'
 import api from '@/api'
 import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
 import type { Site } from '@/api/types'
 import { copyToClipboard } from '@/@core/utils/navigator'
-import ImportCodeForm from '@/components/form/ImportCodeForm.vue'
+import ImportCodeDialog from '@/components/dialog/ImportCodeDialog.vue'
 
 // 规则卡片类型
 interface FilterCard {
@@ -30,8 +31,29 @@ const selectedSites = ref<number[]>([])
 const defaultFilterRules = ref({
   include: '',
   exclude: '',
+  min_seeders: 0,
+  min_seeders_time: 0,
 })
 
+// 媒体信息数据源字典
+const mediaSourcesDict = [
+  {
+    title: 'TheMovieDb',
+    value: 'themoviedb',
+  },
+  {
+    title: '豆瓣',
+    value: 'douban',
+  },
+  {
+    title: 'Bangumi',
+    value: 'bangumi',
+  },
+]
+
+// 当前选中的媒体信息数据源
+const selectedMediaSource = ref([])
+
 // 导入代码弹窗
 const importCodeDialog = ref(false)
 
@@ -54,8 +76,7 @@ async function queryCustomFilters() {
         }
       })
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -73,17 +94,11 @@ async function saveCustomFilters() {
         .join('>')
     }
     // 保存
-    const result: { [key: string]: any } = await api.post(
+    const result: { [key: string]: any } = await api.post('system/setting/SearchFilterRules', value)
-      'system/setting/SearchFilterRules',
-      value,
-    )
 
-    if (result.success)
+    if (result.success) $toast.success('搜索优先级保存成功')
-      $toast.success('搜索优先级保存成功')
+    else $toast.error('搜索优先级保存失败！')
-    else
+  } catch (error) {
-      $toast.error('搜索优先级保存失败！')
-  }
-  catch (error) {
     console.log(error)
   }
 }
@@ -91,8 +106,7 @@ async function saveCustomFilters() {
 // 更新规则卡片的值
 function updateFilterCardValue(pri: string, rules: string[]) {
   const card = filterCards.value.find(card => card.pri === pri)
-  if (card)
+  if (card) card.rules = rules
-    card.rules = rules
 }
 
 // 移除卡片
@@ -128,8 +142,7 @@ async function querySites() {
     // 过滤站点，只有启用的站点才显示
     allSites.value = data.filter(item => item.is_active)
     querySelectedSites()
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -140,8 +153,7 @@ async function querySelectedSites() {
     const result: { [key: string]: any } = await api.get('system/setting/IndexerSites')
 
     selectedSites.value = result.data?.value ?? []
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -152,68 +164,27 @@ async function saveSelectedSites() {
     // 用户名密码
     const result: { [key: string]: any } = await api.post('system/setting/IndexerSites', selectedSites.value)
 
-    if (result.success)
+    if (result.success) $toast.success('搜索站点保存成功')
-      $toast.success('搜索站点保存成功')
+    else $toast.error('搜索站点保存失败！')
-    else
+  } catch (error) {
-      $toast.error('搜索站点保存失败！')
-  }
-  catch (error) {
     console.log(error)
   }
 }
 
-// 上调优先级
+// 根据列表的拖动顺序更新优先级
-function onLevelUp(pri: string) {
+function dragOrderEnd() {
-  // 找到当前卡片
+  filterCards.value = filterCards.value.map((card, index) => {
-  const card = filterCards.value.find(card => card.pri === pri)
+    card.pri = (index + 1).toString()
-  if (!card)
+    return card
-    return
+  })
-
-  // 找到当前卡片的上一张卡片
-  const prevCard = filterCards.value.find(card => card.pri === (parseInt(pri) - 1).toString())
-  if (!prevCard)
-    return
-
-  // 交换两张卡片的优先级
-  const temp = card.pri
-  card.pri = prevCard.pri
-  prevCard.pri = temp
-
-  // 卡片重新按优先级排序
-  filterCards.value.sort((a, b) => parseInt(a.pri) - parseInt(b.pri))
-}
-
-// 下调优先级
-function onLevelDown(pri: string) {
-  // 找到当前卡片
-  const card = filterCards.value.find(card => card.pri === pri)
-  if (!card)
-    return
-
-  // 找到当前卡片的下一张卡片
-  const nextCard = filterCards.value.find(card => card.pri === (parseInt(pri) + 1).toString())
-  if (!nextCard)
-    return
-
-  // 交换两张卡片的优先级
-  const temp = card.pri
-  card.pri = nextCard.pri
-  nextCard.pri = temp
-
-  // 卡片重新按优先级排序
-  filterCards.value.sort((a, b) => parseInt(a.pri) - parseInt(b.pri))
 }
 
 // 查询包含与排除规则
 async function queryDefaultFilter() {
   try {
-    const result: { [key: string]: any } = await api.get(
+    const result: { [key: string]: any } = await api.get('system/setting/DefaultSearchFilterRules')
-      'system/setting/DefaultSearchFilterRules',
+    if (result.data?.value) defaultFilterRules.value = result.data?.value
-    )
+  } catch (error) {
-    if (result.data?.value)
-      defaultFilterRules.value = result.data?.value
-  }
-  catch (error) {
     console.log(error)
   }
 }
@@ -225,12 +196,9 @@ async function saveDefaultFilter() {
       'system/setting/DefaultSearchFilterRules',
       defaultFilterRules.value,
     )
-    if (result.success)
+    if (result.success) $toast.success('默认包含/排除规则保存成功')
-      $toast.success('默认包含/排除规则保存成功')
+    else $toast.error('默认包含/排除规则保存失败！')
-    else
+  } catch (error) {
-      $toast.error('默认包含/排除规则保存失败！')
-  }
-  catch (error) {
     console.log(error)
   }
 }
@@ -238,8 +206,7 @@ async function saveDefaultFilter() {
 // 分享规则
 function shareRules() {
   // 有值才处理
-  if (filterCards.value.length === 0)
+  if (filterCards.value.length === 0) return
-    return
 
   // 将卡片规则接装为字符串
   const value = filterCards.value
@@ -251,22 +218,18 @@ function shareRules() {
   try {
     copyToClipboard(value)
     $toast.success('优先级规则已复制到剪贴板')
-  }
+  } catch (error) {
-  catch (error) {
     $toast.error('优先级规则复制失败！')
   }
 }
 
 // 监听导入代码变化
 watchEffect(() => {
-  if (!importCodeString.value)
+  if (!importCodeString.value) return
-    return
 
   // 导入代码需要以空格开头和结束，没有则拼接
-  if (!importCodeString.value.startsWith(' '))
+  if (!importCodeString.value.startsWith(' ')) importCodeString.value = ` ${importCodeString.value}`
-    importCodeString.value = ` ${importCodeString.value}`
+  if (!importCodeString.value.endsWith(' ')) importCodeString.value = `${importCodeString.value} `
-  if (!importCodeString.value.endsWith(' '))
-    importCodeString.value = `${importCodeString.value} `
 
   // 将导入的代码转换为规则卡片
   const groups = importCodeString.value.split('>')
@@ -278,15 +241,67 @@ watchEffect(() => {
   })
 })
 
+// 调用API查询下载器设置
+async function loadMediaSourceSetting() {
+  try {
+    const result1: { [key: string]: any } = await api.get('system/setting/SEARCH_SOURCE')
+    if (result1.success) selectedMediaSource.value = result1.data?.value?.split(',')
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 调用API保存下载器设置
+async function saveMediaSourceSetting() {
+  try {
+    const result: { [key: string]: any } = await api.post(
+      'system/setting/SEARCH_SOURCE',
+      selectedMediaSource.value.join(','),
+    )
+
+    if (result.success) {
+      $toast.success('保存媒体数据源设置成功')
+    } else {
+      $toast.error('保存媒体数据源设置失败！')
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 onMounted(() => {
   queryCustomFilters()
   querySites()
   queryDefaultFilter()
+  loadMediaSourceSetting()
 })
 </script>
 
 <template>
   <VRow>
+    <VCol cols="12">
+      <VCard title="媒体数据源">
+        <VCardSubtitle> 设定搜索时展示哪些源的媒体信息。</VCardSubtitle>
+        <VCardText>
+          <VRow>
+            <VCol cols="12" md="6">
+              <VSelect
+                v-model="selectedMediaSource"
+                multiple
+                chips
+                :items="mediaSourcesDict"
+                label="当前使用数据源"
+                hint="选中多项时会同时展示来自不同数据源的搜索结果，选择的数据源顺序将会影响搜索结果的排序"
+              />
+            </VCol>
+          </VRow>
+        </VCardText>
+
+        <VCardItem>
+          <VBtn type="submit" @click="saveMediaSourceSetting"> 保存 </VBtn>
+        </VCardItem>
+      </VCard>
+    </VCol>
     <VCol cols="12">
       <VCard title="搜索站点">
         <VCardSubtitle> 只有选中的站点才会在搜索中使用。</VCardSubtitle>
@@ -307,9 +322,7 @@ onMounted(() => {
         </VCardItem>
 
         <VCardItem>
-          <VBtn type="submit" @click="saveSelectedSites">
+          <VBtn type="submit" @click="saveSelectedSites"> 保存 </VBtn>
-            保存
-          </VBtn>
         </VCardItem>
       </VCard>
     </VCol>
@@ -318,24 +331,15 @@ onMounted(() => {
         <template #append>
           <IconBtn>
             <VIcon icon="mdi-dots-vertical" />
-            <VMenu
+            <VMenu activator="parent" close-on-content-click>
-              activator="parent"
-              close-on-content-click
-            >
               <VList>
-                <VListItem
+                <VListItem variant="plain" @click="shareRules">
-                  variant="plain"
-                  @click="shareRules"
-                >
                   <template #prepend>
                     <VIcon icon="mdi-share" />
                   </template>
                   <VListItemTitle>分享</VListItemTitle>
                 </VListItem>
-                <VListItem
+                <VListItem variant="plain" @click="importCodeDialog = true">
-                  variant="plain"
-                  @click="importCodeDialog = true"
-                >
                   <template #prepend>
                     <VIcon icon="mdi-import" />
                   </template>
@@ -347,33 +351,28 @@ onMounted(() => {
         </template>
         <VCardSubtitle> 设置在搜索时默认使用的优先级排序，未在优先级中的资源将不在搜索结果中显示。 </VCardSubtitle>
         <VCardItem>
-          <div class="grid gap-3 grid-filterrule-card">
+          <draggable
-            <FilterRuleCard
+            v-model="filterCards"
-              v-for="(card, index) in filterCards"
+            handle=".cursor-move"
-              :key="index"
+            item-key="pri"
-              :pri="card.pri"
+            tag="div"
-              :maxpri="filterCards.length.toString()"
+            @end="dragOrderEnd"
-              :rules="card.rules"
+            :component-data="{ 'class': 'grid gap-3 grid-filterrule-card' }"
-              @changed="updateFilterCardValue"
+          >
-              @close="filterCardClose(card.pri)"
+            <template #item="{ element }">
-              @leveldown="onLevelDown"
+              <FilterRuleCard
-              @levelup="onLevelUp"
+                :pri="element.pri"
-            />
+                :maxpri="filterCards.length.toString()"
-          </div>
+                :rules="element.rules"
+                @changed="updateFilterCardValue"
+                @close="filterCardClose(element.pri)"
+              />
+            </template>
+          </draggable>
         </VCardItem>
         <VCardItem>
-          <VBtn
+          <VBtn type="submit" class="me-2" @click="saveCustomFilters()"> 保存 </VBtn>
-            type="submit"
+          <VBtn color="success" variant="tonal" @click="addFilterCard()">
-            class="me-2"
-            @click="saveCustomFilters()"
-          >
-            保存
-          </VBtn>
-          <VBtn
-            color="success"
-            variant="tonal"
-            @click="addFilterCard()"
-          >
             <VIcon icon="mdi-plus" />
           </VBtn>
         </VCardItem>
@@ -401,30 +400,35 @@ onMounted(() => {
                   hint="支持正式表达式，多个关键字用 | 分隔表示或"
                 />
               </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="defaultFilterRules.min_seeders"
+                  type="text"
+                  label="最小做种数"
+                  placeholder="0"
+                  hint="小于该值的资源将被过滤掉，0表示不过滤"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="defaultFilterRules.min_seeders_time"
+                  type="text"
+                  label="最少做种人数生效发布时间（分钟）"
+                  placeholder="0"
+                  hint="发布时间距现在大于该值的资源将生效最小做种数规则，0表示不生效"
+                />
+              </VCol>
             </VRow>
           </VForm>
         </VCardText>
         <VCardItem>
-          <VBtn
+          <VBtn type="submit" @click="saveDefaultFilter"> 保存 </VBtn>
-            type="submit"
-            @click="saveDefaultFilter"
-          >
-            保存
-          </VBtn>
         </VCardItem>
       </VCard>
     </VCol>
   </VRow>
-  <VDialog
+  <VDialog v-model="importCodeDialog" width="60rem" scrollable>
-    v-model="importCodeDialog"
+    <ImportCodeDialog v-model="importCodeString" title="导入优先级规则" @close="importCodeDialog = false" />
-    width="60rem"
-    scrollable
-  >
-    <ImportCodeForm
-      v-model="importCodeString"
-      title="导入优先级规则"
-      @close="importCodeDialog = false"
-    />
   </VDialog>
 </template>
 

src/views/setting/AccountSettingSubscribe.vue

@@ -1,10 +1,11 @@
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
+import draggable from 'vuedraggable'
 import api from '@/api'
 import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
 import type { Site } from '@/api/types'
 import { copyToClipboard } from '@/@core/utils/navigator'
-import ImportCodeForm from '@/components/form/ImportCodeForm.vue'
+import ImportCodeDialog from '@/components/dialog/ImportCodeDialog.vue'
 
 // 规则卡片类型
 interface FilterCard {
@@ -42,7 +43,7 @@ const defaultFilterRules = ref({
   movie_size: '',
   tv_size: '',
   min_seeders: 0,
-  show_edit_dialog: false,
+  min_seeders_time: 0,
 })
 
 // 订阅模式选择项
@@ -80,8 +81,7 @@ async function querySelectedRssSites() {
     const result: { [key: string]: any } = await api.get('system/setting/RssSites')
 
     selectedRssSites.value = result.data?.value ?? []
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -89,31 +89,23 @@ async function querySelectedRssSites() {
 // 保存用户选中的订阅站点
 async function saveSelectedRssSites() {
   try {
-    const result1: { [key: string]: any } = await api.post(
+    const result1: { [key: string]: any } = await api.post('system/setting/RssSites', selectedRssSites.value)
-      'system/setting/RssSites',
-      selectedRssSites.value)
 
     const result2: { [key: string]: any } = await api.post(
       'system/setting/SUBSCRIBE_SEARCH',
       enableIntervalSearch.value ? 'True' : 'False',
     )
 
-    const result3: { [key: string]: any } = await api.post(
+    const result3: { [key: string]: any } = await api.post('system/setting/SUBSCRIBE_MODE', selectedSubscribeMode.value)
-      'system/setting/SUBSCRIBE_MODE',
-      selectedSubscribeMode.value,
-    )
 
     const result4: { [key: string]: any } = await api.post(
       'system/setting/SUBSCRIBE_RSS_INTERVAL',
       selectedRssInterval.value,
     )
 
-    if (result1.success && result2.success && result3.success && result4.success)
+    if (result1.success && result2.success && result3.success && result4.success) $toast.success('订阅站点保存成功')
-      $toast.success('订阅站点保存成功')
+    else $toast.error('订阅站点保存失败！')
-    else
+  } catch (error) {
-      $toast.error('订阅站点保存失败！')
-  }
-  catch (error) {
     console.log(error)
   }
 }
@@ -129,18 +121,14 @@ async function querySites() {
 
     // 查询订阅搜索开关
     const result: { [key: string]: any } = await api.get('system/setting/SUBSCRIBE_SEARCH')
-    if (result.success)
+    if (result.success) enableIntervalSearch.value = result.data?.value
-      enableIntervalSearch.value = result.data?.value
     // 查询订阅模式
     const result2: { [key: string]: any } = await api.get('system/setting/SUBSCRIBE_MODE')
-    if (result2.success)
+    if (result2.success) selectedSubscribeMode.value = result2.data?.value
-      selectedSubscribeMode.value = result2.data?.value
     // 查询站点RSS周期
     const result3: { [key: string]: any } = await api.get('system/setting/SUBSCRIBE_RSS_INTERVAL')
-    if (result3.success)
+    if (result3.success) selectedRssInterval.value = result3.data?.value
-      selectedRssInterval.value = result3.data?.value
+  } catch (error) {
-  }
-  catch (error) {
     console.log(error)
   }
 }
@@ -162,8 +150,7 @@ async function queryCustomFilters(ruleType: string) {
         }
       })
     }
-  }
+  } catch (error) {
-  catch (error) {
     console.log(error)
   }
 }
@@ -182,35 +169,27 @@ async function saveCustomFilters(ruleType: string) {
         .join('>')
     }
     // 保存
-    const result: { [key: string]: any } = await api.post(
+    const result: { [key: string]: any } = await api.post(`system/setting/${ruleType}`, value)
-      `system/setting/${ruleType}`,
-      value,
-    )
 
     const msg = ruleType === 'SubscribeFilterRules' ? '订阅优先级' : '洗版优先级'
 
-    if (result.success)
+    if (result.success) $toast.success(`${msg}保存成功`)
-      $toast.success(`${msg}保存成功`)
+    else $toast.error(`${msg}保存失败！`)
-    else
+  } catch (error) {
-      $toast.error(`${msg}保存失败！`)
-  }
-  catch (error) {
     console.log(error)
   }
 }
 
 // 更新规则卡片的值
-function updateFilterCardValue(pri: string, rules: string[]) {
+function updateSubscribeFilterCardValue(pri: string, rules: string[]) {
   const card = subscribeFilterCards.value.find(card => card.pri === pri)
-  if (card)
+  if (card) card.rules = rules
-    card.rules = rules
 }
 
 // 更新洗版规则卡片的值
-function updateFilterCardValue2(pri: string, rules: string[]) {
+function updateBestVersionFilterCardValue(pri: string, rules: string[]) {
   const card = bestVersionFilterCards.value.find(card => card.pri === pri)
-  if (card)
+  if (card) card.rules = rules
-    card.rules = rules
 }
 
 // 移除卡片
@@ -223,10 +202,8 @@ function filterCardClose(ruleType: string, pri: string) {
       return card
     })
   // 更新 subscribeFilterCards.value
-  if (ruleType === 'SubscribeFilterRules')
+  if (ruleType === 'SubscribeFilterRules') subscribeFilterCards.value = updatedCards
-    subscribeFilterCards.value = updatedCards
+  else bestVersionFilterCards.value = updatedCards
-  else
-    bestVersionFilterCards.value = updatedCards
 }
 
 // 增加卡片
@@ -242,58 +219,22 @@ function addFilterCard(ruleType: string) {
   cards.value.push(newCard)
 }
 
-// 上调优先级
+// 根据列表的拖动顺序更新优先级
-function onLevelUp(filterCards: FilterCard[], pri: string) {
+function dragOrderEnd(ruleType: string) {
-  // 找到当前卡片
+  ;(ruleType === 'SubscribeFilterRules' ? subscribeFilterCards.value : bestVersionFilterCards.value).map(
-  const card = filterCards.find(card => card.pri === pri)
+    (card, index) => {
-  if (!card)
+      card.pri = (index + 1).toString()
-    return
+      return card
-
+    },
-  // 找到当前卡片的上一张卡片
+  )
-  const prevCard = filterCards.find(card => card.pri === (parseInt(pri) - 1).toString())
-  if (!prevCard)
-    return
-
-  // 交换两张卡片的优先级
-  const temp = card.pri
-  card.pri = prevCard.pri
-  prevCard.pri = temp
-
-  // 卡片重新按优先级排序
-  filterCards.sort((a, b) => parseInt(a.pri) - parseInt(b.pri))
-}
-
-// 下调优先级
-function onLevelDown(filterCards: FilterCard[], pri: string) {
-  // 找到当前卡片
-  const card = filterCards.find(card => card.pri === pri)
-  if (!card)
-    return
-
-  // 找到当前卡片的下一张卡片
-  const nextCard = filterCards.find(card => card.pri === (parseInt(pri) + 1).toString())
-  if (!nextCard)
-    return
-
-  // 交换两张卡片的优先级
-  const temp = card.pri
-  card.pri = nextCard.pri
-  nextCard.pri = temp
-
-  // 卡片重新按优先级排序
-  filterCards.sort((a, b) => parseInt(a.pri) - parseInt(b.pri))
 }
 
 // 查询包含与排除规则
 async function queryDefaultFilter() {
   try {
-    const result: { [key: string]: any } = await api.get(
+    const result: { [key: string]: any } = await api.get('system/setting/DefaultFilterRules')
-      'system/setting/DefaultFilterRules',
+    if (result.data?.value) defaultFilterRules.value = result.data?.value
-    )
+  } catch (error) {
-    if (result.data?.value)
-      defaultFilterRules.value = result.data?.value
-  }
-  catch (error) {
     console.log(error)
   }
 }
@@ -301,16 +242,10 @@ async function queryDefaultFilter() {
 // 保存包含与排除规则
 async function saveDefaultFilter() {
   try {
-    const result: { [key: string]: any } = await api.post(
+    const result: { [key: string]: any } = await api.post('system/setting/DefaultFilterRules', defaultFilterRules.value)
-      'system/setting/DefaultFilterRules',
+    if (result.success) $toast.success('默认包含/排除规则保存成功')
-      defaultFilterRules.value,
+    else $toast.error('默认包含/排除规则保存失败！')
-    )
+  } catch (error) {
-    if (result.success)
-      $toast.success('默认包含/排除规则保存成功')
-    else
-      $toast.error('默认包含/排除规则保存失败！')
-  }
-  catch (error) {
     console.log(error)
   }
 }
@@ -318,13 +253,10 @@ async function saveDefaultFilter() {
 // 分享规则
 function shareRules(ruleType: string) {
   let filterCards: Ref<FilterCard[]>
-  if (ruleType === 'SubscribeFilterRules')
+  if (ruleType === 'SubscribeFilterRules') filterCards = subscribeFilterCards
-    filterCards = subscribeFilterCards
+  else filterCards = bestVersionFilterCards
-  else
-    filterCards = bestVersionFilterCards
   // 有值才处理
-  if (filterCards.value.length === 0)
+  if (filterCards.value.length === 0) return
-    return
 
   // 将卡片规则接装为字符串
   const value = filterCards.value
@@ -336,8 +268,7 @@ function shareRules(ruleType: string) {
   try {
     copyToClipboard(value)
     $toast.success('优先级规则已复制到剪贴板')
-  }
+  } catch (error) {
-  catch (error) {
     $toast.error('优先级规则复制失败！')
   }
 }
@@ -351,20 +282,14 @@ async function importRules(ruleType: string) {
 
 // 监听导入代码变化
 watchEffect(() => {
-  if (!importCodeString.value)
+  if (!importCodeString.value) return
-    return
+  if (!currentRuleType.value) return
-  if (!currentRuleType.value)
-    return
   // 导入代码需要以空格开头和结束，没有则拼接
-  if (!importCodeString.value.startsWith(' '))
+  if (!importCodeString.value.startsWith(' ')) importCodeString.value = ` ${importCodeString.value}`
-    importCodeString.value = ` ${importCodeString.value}`
+  if (!importCodeString.value.endsWith(' ')) importCodeString.value = `${importCodeString.value} `
-  if (!importCodeString.value.endsWith(' '))
-    importCodeString.value = `${importCodeString.value} `
   let filterCards: Ref<FilterCard[]>
-  if (currentRuleType.value === 'SubscribeFilterRules')
+  if (currentRuleType.value === 'SubscribeFilterRules') filterCards = subscribeFilterCards
-    filterCards = subscribeFilterCards
+  else filterCards = bestVersionFilterCards
-  else
-    filterCards = bestVersionFilterCards
   // 将导入的代码转换为规则卡片
   const groups = importCodeString.value.split('>')
   filterCards.value = groups.map((group: string, index: number) => {
@@ -435,9 +360,7 @@ onMounted(() => {
           </VForm>
         </VCardText>
         <VCardItem>
-          <VBtn type="submit" @click="saveSelectedRssSites">
+          <VBtn type="submit" @click="saveSelectedRssSites"> 保存 </VBtn>
-            保存
-          </VBtn>
         </VCardItem>
       </VCard>
     </VCol>
@@ -446,24 +369,15 @@ onMounted(() => {
         <template #append>
           <IconBtn>
             <VIcon icon="mdi-dots-vertical" />
-            <VMenu
+            <VMenu activator="parent" close-on-content-click>
-              activator="parent"
-              close-on-content-click
-            >
               <VList>
-                <VListItem
+                <VListItem variant="plain" @click="shareRules('SubscribeFilterRules')">
-                  variant="plain"
-                  @click="shareRules('SubscribeFilterRules')"
-                >
                   <template #prepend>
                     <VIcon icon="mdi-share" />
                   </template>
                   <VListItemTitle>分享</VListItemTitle>
                 </VListItem>
-                <VListItem
+                <VListItem variant="plain" @click="importRules('SubscribeFilterRules')">
-                  variant="plain"
-                  @click="importRules('SubscribeFilterRules')"
-                >
                   <template #prepend>
                     <VIcon icon="mdi-import" />
                   </template>
@@ -475,33 +389,28 @@ onMounted(() => {
         </template>
         <VCardSubtitle> 设置在正常订阅时默认使用的优先级，未在优先级中的资源将不会自动下载。</VCardSubtitle>
         <VCardItem>
-          <div class="grid gap-3 grid-filterrule-card">
+          <draggable
-            <FilterRuleCard
+            v-model="subscribeFilterCards"
-              v-for="(card, index) in subscribeFilterCards"
+            handle=".cursor-move"
-              :key="index"
+            item-key="pri"
-              :pri="card.pri"
+            tag="div"
-              :maxpri="subscribeFilterCards.length.toString()"
+            @end="dragOrderEnd('SubscribeFilterRules')"
-              :rules="card.rules"
+            :component-data="{ 'class': 'grid gap-3 grid-filterrule-card' }"
-              @changed="updateFilterCardValue"
+          >
-              @close="filterCardClose('SubscribeFilterRules', card.pri)"
+            <template #item="{ element }">
-              @leveldown="onLevelDown(subscribeFilterCards, card.pri)"
+              <FilterRuleCard
-              @levelup="onLevelUp(subscribeFilterCards, card.pri)"
+                :pri="element.pri"
-            />
+                :maxpri="subscribeFilterCards.length.toString()"
-          </div>
+                :rules="element.rules"
+                @changed="updateSubscribeFilterCardValue"
+                @close="filterCardClose('SubscribeFilterRules', element.pri)"
+              />
+            </template>
+          </draggable>
         </VCardItem>
         <VCardItem>
-          <VBtn
+          <VBtn type="submit" class="me-2" @click="saveCustomFilters('SubscribeFilterRules')"> 保存 </VBtn>
-            type="submit"
+          <VBtn color="success" variant="tonal" @click="addFilterCard('SubscribeFilterRules')">
-            class="me-2"
-            @click="saveCustomFilters('SubscribeFilterRules')"
-          >
-            保存
-          </VBtn>
-          <VBtn
-            color="success"
-            variant="tonal"
-            @click="addFilterCard('SubscribeFilterRules')"
-          >
             <VIcon icon="mdi-plus" />
           </VBtn>
         </VCardItem>
@@ -512,24 +421,15 @@ onMounted(() => {
         <template #append>
           <IconBtn>
             <VIcon icon="mdi-dots-vertical" />
-            <VMenu
+            <VMenu activator="parent" close-on-content-click>
-              activator="parent"
-              close-on-content-click
-            >
               <VList>
-                <VListItem
+                <VListItem variant="plain" @click="shareRules('BestVersionFilterRules')">
-                  variant="plain"
-                  @click="shareRules('BestVersionFilterRules')"
-                >
                   <template #prepend>
                     <VIcon icon="mdi-share" />
                   </template>
                   <VListItemTitle>分享</VListItemTitle>
                 </VListItem>
-                <VListItem
+                <VListItem variant="plain" @click="importRules('BestVersionFilterRules')">
-                  variant="plain"
-                  @click="importRules('BestVersionFilterRules')"
-                >
                   <template #prepend>
                     <VIcon icon="mdi-import" />
                   </template>
@@ -541,33 +441,28 @@ onMounted(() => {
         </template>
         <VCardSubtitle> 设置在订阅洗版时使用的优先级，匹配优先级1时洗版完成。</VCardSubtitle>
         <VCardItem>
-          <div class="grid gap-3 grid-filterrule-card">
+          <draggable
-            <FilterRuleCard
+            v-model="bestVersionFilterCards"
-              v-for="(card, index) in bestVersionFilterCards"
+            handle=".cursor-move"
-              :key="index"
+            item-key="pri"
-              :pri="card.pri"
+            tag="div"
-              :maxpri="bestVersionFilterCards.length.toString()"
+            @end="dragOrderEnd('BestVersionFilterRules')"
-              :rules="card.rules"
+            :component-data="{ 'class': 'grid gap-3 grid-filterrule-card' }"
-              @changed="updateFilterCardValue2"
+          >
-              @close="filterCardClose('BestVersionFilterRules', card.pri)"
+            <template #item="{ element }">
-              @leveldown="onLevelDown(bestVersionFilterCards, card.pri)"
+              <FilterRuleCard
-              @levelup="onLevelUp(bestVersionFilterCards, card.pri)"
+                :pri="element.pri"
-            />
+                :maxpri="bestVersionFilterCards.length.toString()"
-          </div>
+                :rules="element.rules"
+                @changed="updateBestVersionFilterCardValue"
+                @close="filterCardClose('BestVersionFilterRules', element.pri)"
+              />
+            </template>
+          </draggable>
         </VCardItem>
         <VCardItem>
-          <VBtn
+          <VBtn type="submit" class="me-2" @click="saveCustomFilters('BestVersionFilterRules')"> 保存 </VBtn>
-            type="submit"
+          <VBtn color="success" variant="tonal" @click="addFilterCard('BestVersionFilterRules')">
-            class="me-2"
-            @click="saveCustomFilters('BestVersionFilterRules')"
-          >
-            保存
-          </VBtn>
-          <VBtn
-            color="success"
-            variant="tonal"
-            @click="addFilterCard('BestVersionFilterRules')"
-          >
             <VIcon icon="mdi-plus" />
           </VBtn>
         </VCardItem>
@@ -595,7 +490,7 @@ onMounted(() => {
                   hint="支持正式表达式，多个关键字用 | 分隔表示或"
                 />
               </VCol>
-              <VCol cols="12" md="4">
+              <VCol cols="12" md="6">
                 <VTextField
                   v-model="defaultFilterRules.movie_size"
                   type="text"
@@ -604,7 +499,7 @@ onMounted(() => {
                   hint="格式：0-30，表示0到30GB之间的资源"
                 />
               </VCol>
-              <VCol cols="12" md="4">
+              <VCol cols="12" md="6">
                 <VTextField
                   v-model="defaultFilterRules.tv_size"
                   type="text"
@@ -613,7 +508,7 @@ onMounted(() => {
                   hint="格式：0-10，表示0到10GB之间的资源"
                 />
               </VCol>
-              <VCol cols="12" md="4">
+              <VCol cols="12" md="6">
                 <VTextField
                   v-model="defaultFilterRules.min_seeders"
                   type="text"
@@ -623,40 +518,29 @@ onMounted(() => {
                 />
               </VCol>
               <VCol cols="12" md="6">
-                <VSwitch
+                <VTextField
-                  v-model="defaultFilterRules.show_edit_dialog"
+                  v-model="defaultFilterRules.min_seeders_time"
-                  label="订阅时编辑更多规则"
+                  type="text"
-                  hint="开启后，添加订阅时将自动弹出订阅编辑框，要设置更多订阅选项"
+                  label="最少做种人数生效发布时间（分钟）"
+                  placeholder="0"
+                  hint="发布时间距现在大于该值的资源将生效最小做种数规则，0表示不生效"
                 />
               </VCol>
             </VRow>
           </VForm>
         </VCardText>
         <VCardItem>
-          <VBtn
+          <VBtn type="submit" @click="saveDefaultFilter"> 保存 </VBtn>
-            type="submit"
-            @click="saveDefaultFilter"
-          >
-            保存
-          </VBtn>
         </VCardItem>
       </VCard>
     </VCol>
   </VRow>
-  <VDialog
+  <VDialog v-model="importCodeDialog" width="60rem" scrollable>
-    v-model="importCodeDialog"
+    <ImportCodeDialog v-model="importCodeString" title="导入优先级规则" @close="importCodeDialog = false" />
-    width="60rem"
-    scrollable
-  >
-    <ImportCodeForm
-      v-model="importCodeString"
-      title="导入优先级规则"
-      @close="importCodeDialog = false"
-    />
   </VDialog>
 </template>
 
-<style lang='scss'>
+<style lang="scss">
 .grid-filterrule-card {
   grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   padding-block-end: 1rem;

src/views/site/SiteCardListView.vue

@@ -3,8 +3,7 @@ import api from '@/api'
 import type { Site } from '@/api/types'
 import SiteCard from '@/components/cards/SiteCard.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
-import SiteAddEditForm from '@/components/form/SiteAddEditForm.vue'
+import SiteAddEditDialog from '@/components/dialog/SiteAddEditDialog.vue'
-import { useDefer } from '@/@core/utils/dom'
 
 // 数据列表
 const dataList = ref<Site[]>([])
@@ -15,17 +14,12 @@ const isRefreshed = ref(false)
 // 新增站点对话框
 const siteAddDialog = ref(false)
 
-// 延迟加载
-let defer = (_: number) => true
-
 // 获取站点列表数据
 async function fetchData() {
   try {
     dataList.value = await api.get('site/')
     isRefreshed.value = true
-    defer = useDefer(dataList.value.length)
+  } catch (error) {
-  }
-  catch (error) {
     console.error(error)
   }
 }
@@ -35,32 +29,10 @@ onBeforeMount(fetchData)
 </script>
 
 <template>
-  <div
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-    v-if="!isRefreshed"
+  <div v-if="dataList.length > 0" class="grid gap-3 grid-site-card">
-    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+    <div v-for="(data, index) in dataList" :key="index">
-  >
+      <SiteCard :key="data.id" :site="data" @remove="fetchData" @update="fetchData" />
-    <VProgressCircular
-      v-if="!isRefreshed"
-      size="48"
-      indeterminate
-      color="primary"
-    />
-  </div>
-  <div
-    v-if="dataList.length > 0"
-    class="grid gap-3 grid-site-card"
-  >
-    <div
-      v-for="(data, index) in dataList"
-      :key="index"
-    >
-      <SiteCard
-        v-if="defer(index)"
-        :key="data.id"
-        :site="data"
-        @remove="fetchData"
-        @update="fetchData"
-      />
     </div>
   </div>
   <NoDataFound
@@ -70,21 +42,18 @@ onBeforeMount(fetchData)
     error-description="已添加并支持的站点将会在这里显示。"
   />
   <!-- 新增站点按钮 -->
-  <VFab
+  <VFab icon="mdi-plus" location="bottom end" size="x-large" fixed app appear @click="siteAddDialog = true" />
-    icon="mdi-plus"
-    location="bottom end"
-    size="x-large"
-    fixed
-    app
-    appear
-    @click="siteAddDialog = true"
-  />
   <!-- 新增站点弹窗 -->
-  <SiteAddEditForm
+  <SiteAddEditDialog
     v-if="siteAddDialog"
     v-model="siteAddDialog"
     oper="add"
-    @save="siteAddDialog = false; fetchData()"
+    @save="
+      () => {
+        siteAddDialog = false
+        fetchData()
+      }
+    "
     @close="siteAddDialog = false"
   />
 </template>

src/views/subscribe/FullCalendarView.vue

@@ -155,7 +155,7 @@ onMounted(() => {
         </VCard>
       </div>
       <div class="md:hidden">
-        <VTooltip :text="`${arg.event.title} ${arg.event.extendedProps.subtitle}`">
+        <VTooltip :text="`${arg.event.title} 第 ${arg.event.extendedProps.subtitle} 集`">
           <template #activator="{ props }">
             <VImg
               height="60"
@@ -384,8 +384,8 @@ onMounted(() => {
 }
 
 .v-application .fc .fc-daygrid-day-number {
-  padding-block: 0rem;
+  padding-block: 0;
-  padding-inline: 0rem;
+  padding-inline: 0;
 }
 
 .v-application .fc .fc-list-event-dot {
@@ -435,7 +435,7 @@ onMounted(() => {
   margin-inline-end: 0.25rem;
 }
 
-@media (max-width: 1264px) {
+@media (width <= 1264px) {
   .v-application .fc .fc-toolbar-chunk .fc-button-group .fc-drawerToggler-button {
     display: block !important;
   }
@@ -481,10 +481,10 @@ onMounted(() => {
 }
 
 .v-application .fc .fc-button-primary {
-  background-color: transparent;
   border: none;
-  outline: none;
+  background-color: transparent;
   color: var(--v-theme-on-surface);
+  outline: none;
 }
 
 .v-application .fc .fc-button-primary:hover {
@@ -492,7 +492,7 @@ onMounted(() => {
   color: rgb(var(--v-theme-primary));
 }
 
-@media (max-width: 776px) {
+@media (width <= 776px) {
   .fc-daygrid-event-harness {
     display: flex;
     align-items: center;

src/views/subscribe/SubscribeListView.vue

@@ -4,7 +4,8 @@ import api from '@/api'
 import type { Subscribe } from '@/api/types'
 import NoDataFound from '@/components/NoDataFound.vue'
 import SubscribeCard from '@/components/cards/SubscribeCard.vue'
-import SubscribeEditForm from '@/components/form/SubscribeEditForm.vue'
+import SubscribeEditDialog from '@/components/dialog/SubscribeEditDialog.vue'
+import SubscribeHistoryDialog from '@/components/dialog/SubscribeHistoryDialog.vue'
 import store from '@/store'
 
 // 输入参数
@@ -21,13 +22,15 @@ const dataList = ref<Subscribe[]>([])
 // 弹窗
 const subscribeEditDialog = ref(false)
 
+// 历史记录弹窗
+const historyDialog = ref(false)
+
 // 获取订阅列表数据
 async function fetchData() {
   try {
     dataList.value = await api.get('subscribe/')
     isRefreshed.value = true
-  }
+  } catch (error) {
-  catch (error) {
     console.error(error)
   }
 }
@@ -47,36 +50,18 @@ function onRefresh() {
 
 // 过滤数据，管理员用户显示全部，非管理员只显示自己的订阅
 const filteredDataList = computed(() => {
-// 从Vuex Store中获取用户信息
+  // 从Vuex Store中获取用户信息
   const superUser = store.state.auth.superUser
   const userName = store.state.auth.userName
-  if (superUser)
+  if (superUser) return dataList.value.filter(data => data.type === props.type)
-    return dataList.value.filter(data => data.type === props.type)
+  else return dataList.value.filter(data => data.type === props.type && data.username === userName)
-  else
-    return dataList.value.filter(data => data.type === props.type && (data.username === userName))
 })
 </script>
 
 <template>
-  <div
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-    v-if="!isRefreshed"
+  <PullRefresh v-model="loading" @refresh="onRefresh">
-    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+    <div v-if="filteredDataList.length > 0" class="mx-3 grid gap-4 grid-subscribe-card p-1">
-  >
-    <VProgressCircular
-      v-if="!isRefreshed"
-      size="48"
-      indeterminate
-      color="primary"
-    />
-  </div>
-  <PullRefresh
-    v-model="loading"
-    @refresh="onRefresh"
-  >
-    <div
-      v-if="filteredDataList.length > 0"
-      class="grid gap-3 grid-subscribe-card p-1"
-    >
       <SubscribeCard
         v-for="data in filteredDataList"
         :key="data.id"
@@ -94,7 +79,8 @@ const filteredDataList = computed(() => {
   </PullRefresh>
   <!-- 底部操作按钮 -->
   <VFab
-    icon="mdi-file-document-edit"
+    v-if="store.state.auth.superUser"
+    icon="mdi-clipboard-edit"
     location="bottom end"
     size="x-large"
     fixed
@@ -102,8 +88,20 @@ const filteredDataList = computed(() => {
     appear
     @click="subscribeEditDialog = true"
   />
+  <VFab
+    v-if="store.state.auth.superUser"
+    icon="mdi-history"
+    color="info"
+    location="bottom end"
+    class="mb-2"
+    size="x-large"
+    fixed
+    app
+    appear
+    @click="historyDialog = true"
+  />
   <!-- 订阅编辑弹窗 -->
-  <SubscribeEditForm
+  <SubscribeEditDialog
     v-if="subscribeEditDialog"
     v-model="subscribeEditDialog"
     :default="true"
@@ -111,11 +109,24 @@ const filteredDataList = computed(() => {
     @save="subscribeEditDialog = false"
     @close="subscribeEditDialog = false"
   />
+  <!-- 历史记录弹窗 -->
+  <SubscribeHistoryDialog
+    v-if="historyDialog"
+    v-model="historyDialog"
+    :type="props.type"
+    @close="historyDialog = false"
+    @save="
+      () => {
+        historyDialog = false
+        fetchData()
+      }
+    "
+  />
 </template>
 
 <style lang="scss">
 .grid-subscribe-card {
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
   padding-block-end: 1rem;
 }
 </style>