release

# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.

.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-3",
+  "version": "1.8.4",
   "private": true,
   "bin": "dist/service.js",
   "scripts": {
@@ -81,6 +81,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
-    class="absolute right-3 top-3"
-    @click.stop="onClick"
-  >
+  <IconBtn :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3'" @click.stop="onClick">
     <VIcon icon="mdi-close" />
   </IconBtn>
 </template>

src/@core/components/LoadingBanner.vue

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

src/@core/components/StatIcon.vue

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

src/@core/utils/formatters.ts

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

src/@core/utils/index.ts

@@ -33,12 +33,16 @@ export function isToday(date: Date) {
   )
 }
 
-// 计算时间差，返回xx天/xx小时/xx分钟/xx秒
+/**
+ * 计算时间差，返回xx天/xx小时/xx分钟/xx秒
+ *
+ * @deprecated 建议使用：@core/utils/formatters.ts formatDateDifference
+ */
 export function calculateTimeDifference(inputTime: string): string {
   if (!inputTime)
     return ''
 
-  const inputDate = new Date(inputTime)
+  const inputDate = new Date(inputTime.replaceAll(/-/g, '/'))
   const currentDate = new Date()
 
   const timeDifference = currentDate.getTime() - inputDate.getTime()
@@ -70,7 +74,7 @@ export function calculateTimeDiff(inputTime: string): string {
     return ''
 
   // 使用当前时区
-  const inputDate = new Date(inputTime)
+  const inputDate = new Date(inputTime.replaceAll(/-/g, '/'))
   const currentDate = new Date()
 
   const timeDifference = currentDate.getTime() - inputDate.getTime()

src/App.vue

@@ -1,13 +1,9 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
 import { useTheme } from 'vuetify'
-
+import api from '@/api'
 import store from './store'
 
-import { fixArrayAt } from '@/@core/utils/compatibility'
-
-// 修复低版本Safari等浏览器数组不支持at函数的问题
-fixArrayAt()
 
 // 提示框
 const $toast = useToast()
@@ -41,10 +37,30 @@ function startSSEMessager() {
   }
 }
 
+// 加载用户监控面板配置
+async function loadDashboardConfig() {
+  const response = await api.get('/user/config/Dashboard')
+  if (response && response.data && response.data.value) {
+      const data = JSON.stringify(response.data.value)
+      if (data != localStorage.getItem("MP_DASHBOARD")) {
+        localStorage.setItem("MP_DASHBOARD", data)
+      }
+    }
+}
+
+// 尝试加载用户监控面板配置（本地无配置时才加载）
+async function tryLoadDashboardConfig() {
+  if (localStorage.getItem("MP_DASHBOARD")) {
+    return
+  }
+  await loadDashboardConfig()
+}
+
 // 页面加载时，加载当前用户数据
 onBeforeMount(async () => {
   setTheme()
   startSSEMessager()
+  await tryLoadDashboardConfig()
 })
 </script>
 

src/api/types.ts

@@ -88,6 +88,9 @@ export interface Subscribe {
 
   // 保存目录
   save_path: string
+
+  // 时间
+  date: string
 }
 
 // 历史记录
@@ -505,6 +508,33 @@ export interface Site {
   is_active: boolean
 }
 
+// 站点使用统计
+export interface SiteStatistic {
+
+  // 站点主域名Key
+  domain?: string
+
+  // 成功次数
+  success?: number
+
+  // 失败次数
+  fail?: number
+
+  // 平均耗时
+  seconds?: number
+
+  // 最后一次访问状态 0-成功 1-失败
+  lst_state?: number
+
+  // 最后访问时间
+  lst_mod_date?: string
+
+  // 耗时记录 JSON
+  note?: string
+
+
+}
+
 // 正在下载
 export interface DownloadingInfo {
 

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 Toolbar from './filebrowser/Toolbar.vue'
+import FileList from './filebrowser/FileList.vue'
+import FileToolbar from './filebrowser/FileToolbar.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/cards/BackdropCard.vue

@@ -25,7 +25,7 @@ function goPlay() {
 // 计算图片地址
 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>
 

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/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,7 +1,7 @@
 <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'
@@ -157,7 +157,7 @@ async function addSubscribe(season = 0) {
 
     // 弹出订阅编辑弹窗
     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
@@ -313,11 +313,16 @@ async function getMediaSeasons() {
 }
 
 // 查询订阅弹窗规则
-async function querySubscribeRules() {
+async function queryDefaultSubscribeConfig() {
   try {
-    const result: { [key: string]: any } = await api.get(
-      'system/setting/DefaultFilterRules',
-    )
+    let subscribe_config_url = ''
+    if (props.media?.type === '电影')
+      subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
+    else
+      subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
+
+    const result: { [key: string]: any } = await api.get(subscribe_config_url)
+
     if (result.data?.value)
       return result.data.value.show_edit_dialog
   }
@@ -364,14 +369,16 @@ function getExistText(season: number) {
 }
 
 // 打开详情页
-function goMediaDetail() {
-  router.push({
-    path: '/media',
-    query: {
-      mediaid: getMediaId(),
-      type: props.media?.type,
-    },
-  })
+function goMediaDetail(isHovering = false) {
+  if (isHovering) {
+    router.push({
+      path: '/media',
+      query: {
+        mediaid: getMediaId(),
+        type: props.media?.type,
+      },
+    })
+  }
 }
 
 // 开始搜索
@@ -400,7 +407,7 @@ const getImgUrl: Ref<string> = computed(() => {
   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
 })
@@ -416,14 +423,14 @@ function getSeasonPoster(posterPath: string) {
 function formatAirDate(airDate: string) {
   if (!airDate)
     return ''
-  const date = new Date(airDate)
+  const date = new Date(airDate.replaceAll(/-/g, '/'))
   return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
 }
 // 从yyyy-mm-dd中提取年份
 function getYear(airDate: string) {
   if (!airDate)
     return ''
-  const date = new Date(airDate)
+  const date = new Date(airDate.replaceAll(/-/g, '/'))
   return date.getFullYear()
 }
 </script>
@@ -440,7 +447,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"
@@ -592,7 +599,7 @@ function getYear(airDate: string) {
     </VCard>
   </VBottomSheet>
   <!-- 订阅编辑弹窗 -->
-  <SubscribeEditForm
+  <SubscribeEditDialog
     v-if="subscribeEditDialog"
     v-model="subscribeEditDialog"
     :subid="subscribeId"

src/components/cards/PluginAppCard.vue

@@ -91,7 +91,7 @@ const iconPath: Ref<string> = computed(() => {
     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}`
 })

src/components/cards/PluginCard.vue

@@ -11,6 +11,10 @@ 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'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const props = defineProps({
@@ -58,7 +62,7 @@ const pluginInfoDialog = ref(false)
 const progressText = ref('正在更新插件...')
 
 // 插件数据页面配置项
-let pluginPageItems = reactive([])
+let pluginPageItems = ref([])
 
 // 图片是否加载完成
 const isImageLoaded = ref(false)
@@ -70,12 +74,15 @@ const imageLoadError = ref(false)
 const releaseDialog = ref(false)
 
 // 监听动作标识，如为true则打开详情
-watch(() => props.action, (newAction, oldAction) => {
-  if (newAction && !oldAction) {
-    openPluginDetail()
-    emit('actionDone')
-  }
-})
+watch(
+  () => props.action,
+  (newAction, oldAction) => {
+    if (newAction && !oldAction) {
+      openPluginDetail()
+      emit('actionDone')
+    }
+  },
+)
 
 // 图片加载完成
 async function imageLoaded() {
@@ -90,7 +97,7 @@ function showUpdateHistory() {
   // 检查当前版本是否有更新日志
   if (isNullOrEmptyObject(props.plugin?.history)) {
     updatePlugin()
-  } else{
+  } else {
     releaseDialog.value = true
   }
 }
@@ -110,11 +117,10 @@ async function uninstallPlugin() {
     },
   })
 
-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return
 
   try {
-  // 显示等待提示框
+    // 显示等待提示框
     progressDialog.value = true
     progressText.value = `正在卸载 ${props.plugin?.plugin_name} ...`
     const result: { [key: string]: any } = await api.delete(`plugin/${props.plugin?.id}`)
@@ -125,12 +131,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 +145,9 @@ async function loadPluginForm() {
     const result: { [key: string]: any } = await api.get(`plugin/form/${props.plugin?.id}`)
     if (result) {
       pluginFormItems = result.conf
-      if (result.model)
-        pluginConfigForm.value = result.model
+      if (result.model) pluginConfigForm.value = result.model
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -154,10 +156,8 @@ async function loadPluginForm() {
 async function loadPluginPage() {
   try {
     const result: [] = await api.get(`plugin/page/${props.plugin?.id}`)
-    if (result)
-      pluginPageItems = result
-  }
-  catch (error) {
+    if (result) pluginPageItems.value = result
+  } catch (error) {
     console.error(error)
   }
 }
@@ -166,10 +166,8 @@ async function loadPluginPage() {
 async function loadPluginConf() {
   try {
     const result: { [key: string]: any } = await api.get(`plugin/${props.plugin?.id}`)
-    if (!isNullOrEmptyObject(result))
-      pluginConfigForm.value = result
-  }
-  catch (error) {
+    if (!isNullOrEmptyObject(result)) pluginConfigForm.value = result
+  } catch (error) {
     console.error(error)
   }
 }
@@ -187,13 +185,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 +215,10 @@ async function showPluginConfig() {
 
 // 计算图标路径
 const iconPath: Ref<string> = computed(() => {
-  if (imageLoadError.value)
-    return noImage
+  if (imageLoadError.value) return noImage
   // 如果是网络图片则使用代理后返回
   if (props.plugin?.plugin_icon?.startsWith('http'))
-    return `${import.meta.env.VITE_API_BASE_URL}system/img/1/${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}`
 })
@@ -243,8 +238,7 @@ async function resetPlugin() {
     },
   })
 
-  if (!isConfirmed)
-    return
+  if (!isConfirmed) return
 
   try {
     const result: { [key: string]: any } = await api.get(`plugin/reset/${props.plugin?.id}`)
@@ -252,12 +246,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 +262,12 @@ async function updatePlugin() {
     progressDialog.value = true
     progressText.value = `正在更新 ${props.plugin?.plugin_name} ...`
 
-    const result: { [key: string]: any } = await api.get(
-      `plugin/install/${props.plugin?.id}`,
-      {
-        params: {
-          repo_url: props.plugin?.repo_url,
-          force: true,
-        },
+    const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
+      params: {
+        repo_url: props.plugin?.repo_url,
+        force: true,
       },
-    )
+    })
 
     // 隐藏等待提示框
     progressDialog.value = false
@@ -288,12 +277,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 +293,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)
-    showPluginInfo()
-  else
-    showPluginConfig()
+  if (props.plugin?.has_page) showPluginInfo()
+  else showPluginConfig()
 }
 
 // 弹出菜单
@@ -391,41 +378,26 @@ const dropdownItems = ref([
 ])
 
 // 监听插件状态变化
-watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
-  const updateItemIndex = dropdownItems.value.findIndex(item => item.value === 3)
-  if (updateItemIndex !== -1)
-    dropdownItems.value[updateItemIndex].show = newHasUpdate
-})
+watch(
+  () => props.plugin?.has_update,
+  (newHasUpdate, oldHasUpdate) => {
+    const updateItemIndex = dropdownItems.value.findIndex(item => item.value === 3)
+    if (updateItemIndex !== -1) dropdownItems.value[updateItemIndex].show = newHasUpdate
+  },
+)
 </script>
 
 <template>
   <!-- 插件卡片 -->
-  <VCard
-    v-if="isVisible"
-    :width="props.width"
-    :height="props.height"
-    @click="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"
-        />
+  <VCard v-if="isVisible" :width="props.width" :height="props.height" @click="openPluginDetail">
+    <div class="relative pa-4 text-center card-cover-blurred" :style="{ background: `${backgroundColor}` }">
+      <div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 left-1">
+        <VIcon icon="mdi-new-box" class="text-white" />
       </div>
       <div class="me-n3 absolute top-0 right-3">
         <IconBtn>
           <VIcon icon="mdi-dots-vertical" class="text-white" />
-          <VMenu
-            activator="parent"
-            close-on-content-click
-          >
+          <VMenu activator="parent" close-on-content-click>
             <VList>
               <VListItem
                 v-for="(item, i) in dropdownItems"
@@ -444,9 +416,7 @@ watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
           </VMenu>
         </IconBtn>
       </div>
-      <VAvatar
-        size="8rem"
-      >
+      <VAvatar size="8rem">
         <VImg
           ref="imageRef"
           :src="iconPath"
@@ -465,116 +435,63 @@ watch(() => props.plugin?.has_update, (newHasUpdate, oldHasUpdate) => {
     <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>
       {{ props.plugin?.plugin_desc }}
     </VCardText>
   </VCard>
+
   <!-- 插件配置页面 -->
-  <VDialog
-    v-model="pluginConfigDialog"
-    scrollable
-    max-width="60rem"
-  >
-    <VCard
-      :title="`${props.plugin?.plugin_name} - 配置`"
-      class="rounded-t"
-    >
-      <DialogCloseBtn @click="pluginConfigDialog = false" />
+  <VDialog v-model="pluginConfigDialog" scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
+    <VCard :title="`${props.plugin?.plugin_name} - 配置`" class="rounded-t">
+      <DialogCloseBtn v-model="pluginConfigDialog" />
       <VCardText>
-        <FormRender
-          v-for="(item, index) in pluginFormItems"
-          :key="index"
-          :config="item"
-          :form="pluginConfigForm"
-        />
+        <FormRender v-for="(item, index) in pluginFormItems" :key="index" :config="item" :form="pluginConfigForm" />
       </VCardText>
       <VCardActions>
-        <VBtn v-if="pluginPageItems.length > 0" @click="showPluginInfo">
-          查看数据
-        </VBtn>
+        <VBtn v-if="pluginPageItems.length > 0" @click="showPluginInfo"> 查看数据 </VBtn>
         <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="savePluginConf"
-        >
-          保存
-        </VBtn>
+        <VBtn variant="tonal" @click="savePluginConf"> 保存 </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>
 
   <!-- 插件数据页面 -->
-  <VDialog
-    v-model="pluginInfoDialog"
-    scrollable
-    max-width="80rem"
-  >
-    <VCard
-      :title="`${props.plugin?.plugin_name}`"
-      class="rounded-t"
-    >
-      <DialogCloseBtn @click="pluginInfoDialog = false" />
+  <VDialog v-model="pluginInfoDialog" scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
+    <VCard :title="`${props.plugin?.plugin_name}`" class="rounded-t">
+      <DialogCloseBtn v-model="pluginInfoDialog" />
       <VCardText>
-        <PageRender
-          v-for="(item, index) in pluginPageItems"
-          :key="index"
-          :config="item"
-        />
+        <PageRender @action="loadPluginPage" v-for="(item, index) in pluginPageItems" :key="index" :config="item" />
       </VCardText>
       <VCardActions>
-        <VBtn
-          @click="showPluginConfig"
-        >
-          配置
-        </VBtn>
+        <VBtn @click="showPluginConfig"> 配置 </VBtn>
         <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="pluginInfoDialog = false"
-        >
-          关闭
-        </VBtn>
+        <VBtn variant="tonal" @click="pluginInfoDialog = false"> 关闭 </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>
+
   <!-- 更新插件进度框 -->
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
+  <VDialog v-model="progressDialog" :scrim="false" width="25rem">
+    <VCard color="primary">
       <VCardText class="text-center">
         {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
+        <VProgressLinear indeterminate color="white" class="mb-0 mt-1" />
       </VCardText>
     </VCard>
   </VDialog>
+
   <!-- 更新日志 -->
-  <VDialog
-    v-if="releaseDialog"
-    v-model="releaseDialog"
-    width="600"
-    scrollable
-  >
+  <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
     <VCard>
       <DialogCloseBtn @click="releaseDialog = false" />
       <VCardTitle>{{ props.plugin?.plugin_name }} 更新说明</VCardTitle>
       <VersionHistory :history="props.plugin?.history" />
       <VCardText>
-        <VBtn
-          @click="updatePlugin"
-          block
-        >
+        <VBtn @click="updatePlugin" block>
           <template #prepend>
             <VIcon icon="mdi-arrow-up-circle-outline" />
           </template>
@@ -592,7 +509,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

@@ -31,12 +31,12 @@ const getImgUrl = computed(() => {
   if (imageLoadError.value)
     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() {
-  if (props.media?.link)
+function goPlay(isHovering = false) {
+  if (props.media?.link && isHovering)
     window.open(props.media?.link, '_blank')
 }
 </script>
@@ -53,7 +53,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"

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'
+
+// 显示器宽度
+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)
-      $toast.success(`${cardProps.site?.name} 连通性测试成功，可正常使用！`)
-    else
-      $toast.error(`${cardProps.site?.name} 连通性测试失败：${result.message}`)
+    if (result.success) $toast.success(`${cardProps.site?.name} 连通性测试成功，可正常使用！`)
+    else $toast.error(`${cardProps.site?.name} 连通性测试失败：${result.message}`)
 
     testButtonText.value = '测试'
     testButtonDisable.value = false
+
+    getSiteStats()
+  } catch (error) {
+    console.error(error)
   }
-  catch (error) {
+}
+
+// 查询站点使用统计
+async function getSiteStats() {
+  try {
+    siteStats.value = await api.get(`site/statistic/${cardProps.site?.domain}`)
+  } catch (error) {
     console.error(error)
   }
 }
@@ -101,8 +116,7 @@ async function handleResourceBrowse() {
 // 调用API，更新站点Cookie UA
 async function updateSiteCookie() {
   try {
-    if (!userPwForm.value.username || !userPwForm.value.password)
-      return
+    if (!userPwForm.value.username || !userPwForm.value.password) return
 
     // 更新按钮状态
     siteCookieDialog.value = false
@@ -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(
-      `site/cookie/${cardProps.site?.id}`,
-      {
-        params: {
-          username: userPwForm.value.username,
-          password: userPwForm.value.password,
-          code: userPwForm.value.code,
-        },
+    const result: { [key: string]: any } = await api.get(`site/cookie/${cardProps.site?.id}`, {
+      params: {
+        username: userPwForm.value.username,
+        password: userPwForm.value.password,
+        code: userPwForm.value.code,
       },
-    )
+    })
 
-    if (result.success)
-      $toast.success(`${cardProps.site?.name} 更新Cookie & UA 成功！`)
-    else
-      $toast.error(`${cardProps.site?.name} 更新失败：${result.message}`)
+    if (result.success) $toast.success(`${cardProps.site?.name} 更新Cookie & UA 成功！`)
+    else $toast.error(`${cardProps.site?.name} 更新失败：${result.message}`)
 
     progressDialog.value = false
     updateButtonDisable.value = false
-  }
-  catch (error) {
+  } 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
-        class="absolute right-2 bottom-2 rounded"
-        variant="flat"
-        rounded="0"
-      >
+      <VAvatar class="absolute right-2 bottom-2 rounded" variant="flat" rounded="0">
         <VImg :src="siteIcon" />
       </VAvatar>
     </template>
+
     <VCardItem>
       <VCardTitle class="font-bold">
         <span @click.stop="openSitePage">{{ cardProps.site?.name }}</span>
       </VCardTitle>
       <VCardSubtitle>
-        {{ cardProps.site?.url }}
+        <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
-        v-if="cardProps.site?.render === 1"
-        text="浏览器仿真"
-      >
+      <VTooltip v-if="cardProps.site?.render === 1" text="浏览器仿真">
         <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-apple-safari"
-          />
+          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-apple-safari" />
         </template>
       </VTooltip>
 
-      <VTooltip
-        v-if="cardProps.site?.proxy === 1"
-        text="代理"
-      >
+      <VTooltip v-if="cardProps.site?.proxy === 1" text="代理">
         <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-network-outline"
-          />
+          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-network-outline" />
         </template>
       </VTooltip>
 
-      <VTooltip
-        v-if="cardProps.site?.limit_interval"
-        text="流控"
-      >
+      <VTooltip v-if="cardProps.site?.limit_interval" text="流控">
         <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-speedometer"
-          />
+          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-speedometer" />
         </template>
       </VTooltip>
 
-      <VTooltip
-        v-if="cardProps.site?.filter"
-        text="过滤"
-      >
+      <VTooltip v-if="cardProps.site?.filter" text="过滤">
         <template #activator="{ props }">
-          <VIcon
-            color="primary"
-            class="me-2"
-            v-bind="props"
-            icon="mdi-filter-cog-outline"
-          />
+          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-filter-cog-outline" />
         </template>
       </VTooltip>
     </VCardText>
 
-    <VDivider
-      class="opacity-75"
-      style="border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));"
-    />
+    <VDivider class="opacity-75" style="border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity))" />
 
     <VCardActions>
-      <VBtn
-        v-if="!cardProps.site?.public"
-        :disabled="updateButtonDisable"
-        @click.stop="handleSiteUpdate"
-      >
+      <VBtn v-if="!cardProps.site?.public" :disabled="updateButtonDisable" @click.stop="handleSiteUpdate">
         <template #prepend>
           <VIcon icon="mdi-refresh" />
         </template>
         更新
       </VBtn>
-      <VBtn
-        :disabled="testButtonDisable"
-        @click.stop="testSite"
-      >
+      <VBtn :disabled="testButtonDisable" @click.stop="testSite">
         <template #prepend>
           <VIcon icon="mdi-link" />
         </template>
@@ -266,49 +249,29 @@ onMounted(() => {
     </VCardActions>
   </VCard>
   <!-- 更新站点Cookie & UA弹窗 -->
-  <VDialog
-    v-model="siteCookieDialog"
-    max-width="50rem"
-  >
+  <VDialog v-model="siteCookieDialog" max-width="50rem" :fullscreen="!display.mdAndUp.value">
     <!-- Dialog Content -->
     <VCard title="更新站点Cookie & UA">
+      <DialogCloseBtn @click="siteCookieDialog = false" />
       <VCardText>
         <VForm @submit.prevent="() => {}">
           <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="userPwForm.username"
-                label="用户名"
-                :rules="[requiredValidator]"
-              />
+            <VCol cols="12" md="4">
+              <VTextField v-model="userPwForm.username" label="用户名" :rules="[requiredValidator]" />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VTextField
                 v-model="userPwForm.password"
                 label="密码"
                 :type="isPasswordVisible ? 'text' : 'password'"
-                :append-inner-icon="
-                  isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
-                "
+                :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
                 :rules="[requiredValidator]"
                 @click:append-inner="isPasswordVisible = !isPasswordVisible"
                 @keydown.enter="updateSiteCookie"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VTextField
-                v-model="userPwForm.code"
-                label="两步验证"
-              />
+            <VCol cols="12" md="4">
+              <VTextField v-model="userPwForm.code" label="两步验证" />
             </VCol>
           </VRow>
         </VForm>
@@ -316,20 +279,20 @@ onMounted(() => {
 
       <VCardActions>
         <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="updateSiteCookie"
-        >
-          开始更新
-        </VBtn>
+        <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,21 +313,11 @@ onMounted(() => {
       </VCardText>
     </VCard>
   </VDialog>
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
+  <VDialog v-model="progressDialog" :scrim="false" width="25rem">
+    <VCard color="primary">
       <VCardText class="text-center">
         {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
+        <VProgressLinear indeterminate color="white" class="mb-0 mt-1" />
       </VCardText>
     </VCard>
   </VDialog>

src/components/cards/SubscribeCard.vue

@@ -1,7 +1,7 @@
 <script lang='ts' setup>
 import { useToast } from 'vue-toast-notification'
-import SubscribeEditForm from '../form/SubscribeEditForm.vue'
-import { calculateTimeDifference } from '@/@core/utils'
+import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
+import { formatDateDifference } from '@/@core/utils/formatters'
 import { formatSeason } from '@/@core/utils/formatters'
 import api from '@/api'
 import type { Subscribe } from '@/api/types'
@@ -26,11 +26,9 @@ const subscribeEditDialog = ref(false)
 
 // 上一次更新时间
 const lastUpdateText = ref(
-  `${
-    props.media?.last_update
-      ? `${calculateTimeDifference(props.media?.last_update || '')}前`
-      : ''
-  }`,
+    props.media && props.media.last_update
+    ? formatDateDifference(props.media.last_update)
+    : '',
 )
 
 // 图片加载完成响应
@@ -284,7 +282,7 @@ const dropdownItems = ref([
     />
   </VCard>
   <!-- 订阅编辑弹窗 -->
-  <SubscribeEditForm
+  <SubscribeEditDialog
     v-if="subscribeEditDialog"
     v-model="subscribeEditDialog"
     :subid="props.media?.id"

src/components/cards/TorrentCard.vue

@@ -293,7 +293,7 @@ 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"

src/components/dialog/ImportCodeDialog.vue

@@ -0,0 +1,45 @@
+<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="tonal"
+          @click="handleImport"
+        >
+          导入
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/ReorganizeDialog.vue

@@ -1,9 +1,13 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
-import TmdbSelectorCard from '../cards/TmdbSelectorCard.vue'
+import TmdbSelector from '../misc/TmdbSelector.vue'
 import store from '@/store'
 import api from '@/api'
 import { numberValidator } from '@/@validators'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const props = defineProps({
@@ -55,7 +59,6 @@ const transferForm = reactive({
   episode_part: '',
   episode_offset: null,
   min_filesize: 0,
-
 })
 
 watchEffect(() => {
@@ -72,7 +75,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 +92,7 @@ function stopLoadingProgress() {
 // 整理文件
 // eslint-disable-next-line sonarjs/cognitive-complexity
 async function transfer() {
-  if (!props.logids && !props.path)
-    return
+  if (!props.logids && !props.path) return
 
   // 显示进度条
   progressDialog.value = true
@@ -100,32 +102,33 @@ async function transfer() {
   if (props.path) {
     // 文件整理
     try {
-      const result: { [key: string]: any } = await api.post('transfer/manual', {}, {
-        params: transferForm,
-      })
+      const result: { [key: string]: any } = await api.post(
+        'transfer/manual',
+        {},
+        {
+          params: transferForm,
+        },
+      )
       // 显示结果
-      if (result.success)
-        $toast.success(`${props.path} 整理完成！`)
-
-      else
-        $toast.error(`${props.path} 整理失败：${result.message}！`)
-    }
-    catch (e) {
+      if (result.success) $toast.success(`${props.path} 整理完成！`)
+      else $toast.error(`${props.path} 整理失败：${result.message}！`)
+    } catch (e) {
       console.log(e)
     }
-  }
-  else if (props.logids) {
+  } else if (props.logids) {
     // 日志整理
     for (const logid of props.logids) {
       transferForm.logid = logid
       try {
-        const result: { [key: string]: any } = await api.post('transfer/manual', {}, {
-          params: transferForm,
-        })
-        if (!result.success)
-          $toast.error(`历史记录 ${logid} 重新整理失败：${result.message}！`)
-      }
-      catch (e) {
+        const result: { [key: string]: any } = await api.post(
+          'transfer/manual',
+          {},
+          {
+            params: transferForm,
+          },
+        )
+        if (!result.success) $toast.error(`历史记录 ${logid} 重新整理失败：${result.message}！`)
+      } catch (e) {
         console.log(e)
       }
     }
@@ -141,10 +144,7 @@ async function transfer() {
 </script>
 
 <template>
-  <VDialog
-    scrollable
-    max-width="60rem"
-  >
+  <VDialog scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
     <VCard
       :title="`${props.path ? `整理 - ${props.path}` : `整理 - 共 ${props.logids?.length} 条记录`}`"
       class="rounded-t"
@@ -153,10 +153,7 @@ async function transfer() {
       <VCardText class="pt-2">
         <VForm @submit.prevent="() => {}">
           <VRow>
-            <VCol
-              cols="12"
-              md="8"
-            >
+            <VCol cols="12" md="8">
               <VTextField
                 v-model="transferForm.target"
                 label="目的路径"
@@ -164,10 +161,7 @@ async function transfer() {
                 hint="留空将自动整理到媒体库目录"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VSelect
                 v-model="transferForm.transfer_type"
                 label="整理方式"
@@ -184,20 +178,18 @@ async function transfer() {
             </VCol>
           </VRow>
           <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VSelect
                 v-model="transferForm.type_name"
                 label="类型"
-                :items="[{ title: '自动', value: '' }, { title: '电影', value: '电影' }, { title: '电视剧', value: '电视剧' }]"
+                :items="[
+                  { title: '自动', value: '' },
+                  { title: '电影', value: '电影' },
+                  { title: '电视剧', value: '电视剧' },
+                ]"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VTextField
                 v-model="transferForm.tmdbid"
                 :disabled="transferForm.type_name === ''"
@@ -209,10 +201,7 @@ async function transfer() {
                 @click:append-inner="tmdbSelectorDialog = true"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VSelect
                 v-show="transferForm.type_name === '电视剧'"
                 v-model.number="transferForm.season"
@@ -267,49 +256,23 @@ async function transfer() {
         </VForm>
       </VCardText>
       <VCardActions>
-        <VBtn depressed @click="emit('close')">
-          取消
-        </VBtn>
+        <VBtn depressed @click="emit('close')"> 取消 </VBtn>
         <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="transfer"
-        >
-          开始整理
-        </VBtn>
+        <VBtn variant="tonal" @click="transfer"> 开始整理 </VBtn>
       </VCardActions>
     </VCard>
     <!-- 手动整理进度框 -->
-    <VDialog
-      v-model="progressDialog"
-      :scrim="false"
-      width="25rem"
-    >
-      <VCard
-        color="primary"
-      >
+    <VDialog v-model="progressDialog" :scrim="false" width="25rem">
+      <VCard color="primary">
         <VCardText class="text-center">
           {{ progressText }}
-          <VProgressLinear
-            v-if="progressValue"
-            color="white"
-            class="mb-0 mt-1"
-            :model-value="progressValue"
-          />
+          <VProgressLinear v-if="progressValue" color="white" class="mb-0 mt-1" :model-value="progressValue" />
         </VCardText>
       </VCard>
     </VDialog>
     <!-- TMDB ID搜索框 -->
-    <VDialog
-      v-model="tmdbSelectorDialog"
-      width="40rem"
-      scrollable
-      max-height="85vh"
-    >
-      <TmdbSelectorCard
-        v-model="transferForm.tmdbid"
-        @close="tmdbSelectorDialog = false"
-      />
+    <VDialog v-model="tmdbSelectorDialog" width="40rem" scrollable max-height="85vh">
+      <TmdbSelector v-model="transferForm.tmdbid" @close="tmdbSelectorDialog = false" />
     </VDialog>
   </VDialog>
 </template>

src/components/dialog/SiteAddEditDialog.vue

@@ -4,6 +4,10 @@ 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'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 输入参数
 const props = defineProps({
@@ -48,8 +52,7 @@ const priorityItems = ref(
 
 // 监控输入参数
 watchEffect(async () => {
-  if (props.siteid)
-    fetchSiteInfo()
+  if (props.siteid) fetchSiteInfo()
 })
 
 // 查询站点信息
@@ -58,27 +61,24 @@ async function fetchSiteInfo() {
     siteForm.value = await api.get(`site/${props.siteid}`)
     siteForm.value.proxy = siteForm.value.proxy === 1
     siteForm.value.render = siteForm.value.render === 1
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
 
 // 调用API 新增站点
 async function addSite() {
-  if (!siteForm.value?.url)
-    return
+  if (!siteForm.value?.url) return
   startNProgress()
   try {
     const result: { [key: string]: string } = await api.post('site/', siteForm.value)
     if (result.success) {
       $toast.success('新增站点成功')
       emit('save')
+    } else {
+      $toast.error(`新增站点失败：${result.message}`)
     }
-
-    else { $toast.error(`新增站点失败：${result.message}`) }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
   doneNProgress()
@@ -88,12 +88,9 @@ async function addSite() {
 async function deleteSiteInfo() {
   try {
     const result: { [key: string]: any } = await api.delete(`site/${siteForm.value?.id}`)
-    if (result.success)
-      emit('remove')
-
+    if (result.success) emit('remove')
     else $toast.error(`${siteForm.value?.name} 删除失败：${result.message}`)
-  }
-  catch (error) {
+  } catch (error) {
     $toast.error(`${siteForm.value?.name} 删除失败！`)
     console.error(error)
   }
@@ -107,10 +104,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 +116,7 @@ async function updateSiteInfo() {
 </script>
 
 <template>
-  <VDialog
-    scrollable
-    :close-on-back="false"
-    persistent
-    eager
-    max-width="60rem"
-  >
+  <VDialog scrollable :close-on-back="false" persistent eager max-width="60rem" :fullscreen="!display.mdAndUp.value">
     <VCard
       :title="`${props.oper === 'add' ? '新增' : '编辑'}站点${props.oper !== 'add' ? ` - ${siteForm.name}` : ''}`"
       class="rounded-t"
@@ -134,10 +125,7 @@ async function updateSiteInfo() {
       <VCardText class="pt-2">
         <VForm @submit.prevent="() => {}">
           <VRow>
-            <VCol
-              cols="12"
-              md="6"
-            >
+            <VCol cols="12" md="6">
               <VTextField
                 v-model="siteForm.url"
                 label="站点地址"
@@ -145,10 +133,7 @@ async function updateSiteInfo() {
                 hint="格式：http://www.example.com/"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="3"
-            >
+            <VCol cols="12" md="3">
               <VSelect
                 v-model="siteForm.pri"
                 label="优先级"
@@ -157,15 +142,8 @@ async function updateSiteInfo() {
                 hint="站点资源下载优先级，优先级数字越小越优先下载"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="3"
-            >
-              <VSelect
-                v-model="siteForm.is_active"
-                :items="statusItems"
-                label="状态"
-              />
+            <VCol cols="12" md="3">
+              <VSelect v-model="siteForm.is_active" :items="statusItems" label="状态" />
             </VCol>
           </VRow>
           <VRow>
@@ -192,10 +170,7 @@ async function updateSiteInfo() {
             </VCol>
           </VRow>
           <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VTextField
                 v-model="siteForm.limit_interval"
                 label="单位周期（秒）"
@@ -203,10 +178,7 @@ async function updateSiteInfo() {
                 hint="设定站点限流的单位周期，单位为秒，0为不限流"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VTextField
                 v-model="siteForm.limit_count"
                 label="访问次数"
@@ -214,10 +186,7 @@ async function updateSiteInfo() {
                 hint="设定单位周期内站点允许的访问次数，0为不限制"
               />
             </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
+            <VCol cols="12" md="4">
               <VTextField
                 v-model="siteForm.limit_seconds"
                 label="访问间隔（秒）"
@@ -227,20 +196,10 @@ async function updateSiteInfo() {
             </VCol>
           </VRow>
           <VRow>
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <VSwitch
-                v-model="siteForm.proxy"
-                label="代理"
-                hint="站点是否需要代理访问，需要设置好代理服务器信息"
-              />
+            <VCol cols="12" md="6">
+              <VSwitch v-model="siteForm.proxy" label="代理" hint="站点是否需要代理访问，需要设置好代理服务器信息" />
             </VCol>
-            <VCol
-              cols="12"
-              md="6"
-            >
+            <VCol cols="12" md="6">
               <VSwitch
                 v-model="siteForm.render"
                 label="仿真"
@@ -251,36 +210,11 @@ async function updateSiteInfo() {
         </VForm>
       </VCardText>
       <VCardActions>
-        <VBtn
-          v-if="props.oper === 'add'"
-          @click="emit('close')"
-        >
-          取消
-        </VBtn>
-        <VBtn
-          v-else
-          color="error"
-          @click="deleteSiteInfo"
-        >
-          删除
-        </VBtn>
+        <VBtn 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"
-          @click="addSite"
-        >
-          新增
-        </VBtn>
-        <VBtn
-          v-else
-          color="primary"
-          variant="tonal"
-          @click="updateSiteInfo"
-        >
-          保存
-        </VBtn>
+        <VBtn v-if="props.oper === 'add'" color="primary" variant="tonal" @click="addSite"> 新增 </VBtn>
+        <VBtn v-else color="primary" variant="tonal" @click="updateSiteInfo"> 保存 </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>

src/components/dialog/SubscribeEditDialog.vue

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

src/components/dialog/SubscribeHistoryDialog.vue

@@ -0,0 +1,216 @@
+<script lang="ts" setup>
+import api from '@/api'
+import { Subscribe } from '@/api/types'
+import { formatDateDifference } from '@core/utils/formatters'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+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>
+    <!-- 进度框 -->
+    <VDialog v-model="progressDialog" :scrim="false" width="25rem">
+      <VCard color="primary">
+        <VCardText class="text-center">
+          {{ progressText }}
+          <VProgressLinear indeterminate color="white" class="mb-0 mt-1" />
+        </VCardText>
+      </VCard>
+    </VDialog>
+  </VDialog>
+</template>

src/components/filebrowser/FileList.vue

@@ -4,7 +4,7 @@ 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'
@@ -535,7 +535,7 @@ onMounted(() => {
     </VCard>
   </VDialog>
   <!-- 文件整理弹窗 -->
-  <ReorganizeForm
+  <ReorganizeDialog
     v-if="transferPopper"
     v-model="transferPopper"
     :path="currentItem?.path"
@@ -589,4 +589,11 @@ onMounted(() => {
 .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/render/PageRender.vue

@@ -1,13 +1,20 @@
 <script lang="ts" setup>
+import { isNullOrEmptyObject } from '@/@core/utils'
+import api from '@/api'
 import { type PropType, ref } from 'vue'
 
+// 定议外部事件
+const emit = defineEmits(['action'])
+
 // 组件接口
 interface RenderProps {
   component: string
   text: string
   html: string
   content?: any
+  slots?: any
   props?: any
+  events?: any
 }
 
 // 输入参数
@@ -15,33 +22,64 @@ const elementProps = defineProps({
   config: Object as PropType<RenderProps>,
 })
 
-// 配置元素
-const formItem = ref<RenderProps>(elementProps.config ?? {
-  component: 'div',
-  text: '',
-  html: '',
-  props: {},
-  content: [],
-})
+// 元素API事件响应
+async function commonAction(api_path: string, method: string, params = {}) {
+  if (!api_path || !method) return
+  if (method.toUpperCase() === 'GET') {
+    await api.get(api_path, {
+      params: params,
+    })
+  } else {
+    await api.post(api_path, params)
+  }
+  emit('action')
+}
+
+// 组装事件
+let componentEvents: { [key: string]: any } = {}
+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
+  }
+} else {
+  componentEvents = {}
+}
 </script>
 
 <template>
   <Component
-    :is="formItem.component"
-    v-if="!formItem.html"
-    v-bind="formItem.props"
+    :is="elementProps.config?.component"
+    v-if="!elementProps.config?.html"
+    v-bind="elementProps.config?.props"
+    v-on="componentEvents"
   >
-    {{ formItem.text }}
+    {{ elementProps.config?.text }}
+    <template v-for="(content, name) in elementProps.config?.slots || []" :key="name" v-slot:[name]="{ _props }">
+      <slot :name="name" v-bind="_props">
+        <PageRender
+          v-for="(slotItem, slotIndex) in content || []"
+          :key="slotIndex"
+          :config="slotItem"
+          @action="emit('action')"
+        />
+      </slot>
+    </template>
     <PageRender
-      v-for="(innerItem, innerIndex) in (formItem.content || [])"
+      v-for="(innerItem, innerIndex) in elementProps.config?.content || []"
       :key="innerIndex"
       :config="innerItem"
+      @action="emit('action')"
     />
   </Component>
   <Component
-    :is="formItem.component"
-    v-if="formItem.html"
-    v-bind="formItem.props"
-    v-html="formItem.html"
+    :is="elementProps.config?.component"
+    v-if="elementProps.config?.html"
+    v-bind="elementProps.config?.props"
+    v-html="elementProps.config?.html"
+    v-on="componentEvents"
   />
 </template>

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
-        class="me-2"
-        v-bind="props"
-      >
+      <IconBtn 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
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-          >
-            <VListItem
-              class="pa-4"
-              @click="nameTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e">
+            <VListItem class="pa-4" @click="nameTestDialog = true">
+              <VAvatar size="48" variant="tonal">
                 <VIcon icon="mdi-text-recognition" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                识别
-              </h6>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">识别</h6>
               <span class="text-sm">名称识别测试</span>
             </VListItem>
           </VCol>
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="ruleTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
+            <VListItem class="pa-4" @click="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>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">优先级</h6>
               <span class="text-sm">优先级规则测试</span>
             </VListItem>
           </VCol>
         </VRow>
         <VRow class="ma-0 mt-n1 border-t">
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="loggingDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
+            <VListItem class="pa-4" @click="loggingDialog = true">
+              <VAvatar size="48" variant="tonal">
                 <VIcon icon="mdi-file-document-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                日志
-              </h6>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">日志</h6>
               <span class="text-sm">实时日志</span>
             </VListItem>
           </VCol>
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="netTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon" @click="() => {}">
+            <VListItem class="pa-4" @click="netTestDialog = true">
+              <VAvatar size="48" variant="tonal">
                 <VIcon icon="mdi-network-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                网络
-              </h6>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">网络</h6>
               <span class="text-sm">网速连通性测试</span>
             </VListItem>
           </VCol>
         </VRow>
         <VRow class="ma-0 mt-n1 border-t">
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="systemTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
+            <VListItem class="pa-4" @click="systemTestDialog = true">
+              <VAvatar size="48" variant="tonal">
                 <VIcon icon="mdi-cog-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                系统
-              </h6>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">系统</h6>
               <span class="text-sm">健康检查</span>
             </VListItem>
           </VCol>
-          <VCol
-            cols="6"
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="messageDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
+            <VListItem class="pa-4" @click="messageDialog = true">
+              <VAvatar size="48" variant="tonal">
                 <VIcon icon="mdi-message-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
-                消息
-              </h6>
+              <h6 class="text-base font-weight-medium mt-2 mb-0">消息</h6>
               <span class="text-sm">消息中心</span>
             </VListItem>
           </VCol>
@@ -241,37 +170,30 @@ onMounted(() => {
     </VCard>
   </VMenu>
   <!-- 名称测试弹窗 -->
-  <VDialog
-    v-if="nameTestDialog"
-    v-model="nameTestDialog"
-    max-width="50rem"
-  >
+  <VDialog v-if="nameTestDialog" v-model="nameTestDialog" max-width="50rem" scrollable>
     <VCard title="名称识别测试">
       <DialogCloseBtn @click="nameTestDialog = false" />
-      <VCardItem>
+      <VCardText>
         <NameTestView />
-      </VCardItem>
+      </VCardText>
     </VCard>
   </VDialog>
   <!-- 网络测试弹窗 -->
-  <VDialog
-    v-if="netTestDialog"
-    v-model="netTestDialog"
-    max-width="35rem"
-  >
+  <VDialog v-if="netTestDialog" v-model="netTestDialog" max-width="35rem" max-height="85vh" scrollable>
     <VCard title="网络测试">
       <DialogCloseBtn @click="netTestDialog = false" />
-      <VCardItem>
+      <VCardText>
         <NetTestView />
-      </VCardItem>
+      </VCardText>
     </VCard>
   </VDialog>
   <!-- 实时日志弹窗 -->
   <VDialog
     v-if="loggingDialog"
     v-model="loggingDialog"
-    class="w-full lg:w-4/5"
     scrollable
+    max-width="70rem"
+    :fullscreen="!display.mdAndUp.value"
   >
     <VCard>
       <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
-    v-if="ruleTestDialog"
-    v-model="ruleTestDialog"
-    max-width="50rem"
-    scrollable
-  >
+  <VDialog v-if="ruleTestDialog" v-model="ruleTestDialog" max-width="50rem" scrollable>
     <VCard title="优先级测试">
       <DialogCloseBtn @click="ruleTestDialog = false" />
       <VCardText>
@@ -306,12 +225,7 @@ onMounted(() => {
     </VCard>
   </VDialog>
   <!-- 系统健康检查弹窗 -->
-  <VDialog
-    v-if="systemTestDialog"
-    v-model="systemTestDialog"
-    max-width="50rem"
-    scrollable
-  >
+  <VDialog v-if="systemTestDialog" v-model="systemTestDialog" max-width="35rem" max-height="85vh" 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
-              color="primary"
-              :disabled="sendButtonDisabled"
-              @click="sendMessage"
-            >
-              发送
-            </VBtn>
+            <VBtn color="primary" :disabled="sendButtonDisabled" @click="sendMessage"> 发送 </VBtn>
           </template>
         </VTextField>
       </VCardItem>

src/main.ts

@@ -17,7 +17,13 @@ import '@styles/styles.scss'
 import 'vue-toast-notification/dist/theme-bootstrap.css'
 import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar';
 import 'vue3-perfect-scrollbar/style.css';
+import DialogCloseBtn from '@/@core/components/DialogCloseBtn.vue'
+import { fixArrayAt } from '@/@core/utils/compatibility'
 
+// 修复低版本Safari等浏览器数组不支持at函数的问题
+fixArrayAt()
+
+// 加载字体
 loadFonts()
 
 // 创建Vue实例
@@ -26,6 +32,7 @@ const app = createApp(App)
 // 注册全局组件
 app.component('VAceEditor', VAceEditor)
   .component('VApexChart', VueApexCharts)
+  .component('VDialogCloseBtn', DialogCloseBtn)
 
 // 注册插件
 app

src/pages/dashboard.vue

@@ -9,6 +9,12 @@ 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 api from '@/api'
+import { isNullOrEmptyObject } from '@/@core/utils'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 仪表盘配置
 const dashboard_names = {
@@ -40,146 +46,86 @@ const default_config = {
   playing: true,
   latest: true,
 }
+
+// 初始化默认值
 const config = ref(JSON.parse(localStorage.getItem('MP_DASHBOARD') || '{}'))
-if (Object.keys(config.value).length === 0) {
+if (isNullOrEmptyObject(config.value)) {
   config.value = default_config
-  localStorage.setItem('MP_DASHBOARD', JSON.stringify(config.value))
 }
 
 // 设置项目
 function setDashboardConfig() {
-  localStorage.setItem('MP_DASHBOARD', JSON.stringify(config.value))
+  const data = JSON.stringify(config.value)
+  localStorage.setItem('MP_DASHBOARD', data)
+  // 保存到服务端
+  api.post('/user/config/Dashboard', data, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
   dialog.value = false
 }
 </script>
 
 <template>
   <!-- 底部操作按钮 -->
-  <VFab
-    icon="mdi-view-dashboard-edit"
-    location="bottom end"
-    size="x-large"
-    fixed
-    app
-    appear
-    @click="dialog = true"
-  />
+  <VFab icon="mdi-view-dashboard-edit" location="bottom end" size="x-large" fixed app appear @click="dialog = true" />
   <VRow class="match-height">
-    <VCol
-      v-if="config.storage"
-      cols="12"
-      md="4"
-    >
+    <VCol v-if="config.storage" cols="12" md="4">
       <AnalyticsStorage />
     </VCol>
 
-    <VCol
-      v-if="config.mediaStatistic"
-      cols="12"
-      md="8"
-    >
+    <VCol v-if="config.mediaStatistic" cols="12" md="8">
       <AnalyticsMediaStatistic />
     </VCol>
 
-    <VCol
-      v-if="config.weeklyOverview"
-      cols="12"
-      md="4"
-    >
+    <VCol v-if="config.weeklyOverview" cols="12" md="4">
       <AnalyticsWeeklyOverview />
     </VCol>
 
-    <VCol
-      v-if="config.speed"
-      cols="12"
-      md="4"
-    >
+    <VCol v-if="config.speed" cols="12" md="4">
       <AnalyticsSpeed />
     </VCol>
 
-    <VCol
-      v-if="config.scheduler"
-      cols="12"
-      md="4"
-    >
+    <VCol v-if="config.scheduler" cols="12" md="4">
       <AnalyticsScheduler />
     </VCol>
 
-    <VCol
-      v-if="config.cpu"
-      cols="12"
-      md="6"
-    >
+    <VCol v-if="config.cpu" cols="12" md="6">
       <AnalyticsCpu />
     </VCol>
 
-    <VCol
-      v-if="config.memory"
-      cols="12"
-      md="6"
-    >
+    <VCol v-if="config.memory" cols="12" md="6">
       <AnalyticsMemory />
     </VCol>
 
-    <VCol
-      v-if="config.library"
-      cols="12"
-    >
+    <VCol v-if="config.library" cols="12">
       <MediaServerLibrary />
     </VCol>
 
-    <VCol
-      v-if="config.playing"
-      cols="12"
-    >
+    <VCol v-if="config.playing" cols="12">
       <MediaServerPlaying />
     </VCol>
 
-    <VCol
-      v-if="config.latest"
-      cols="12"
-    >
+    <VCol v-if="config.latest" cols="12">
       <MediaServerLatest />
     </VCol>
   </VRow>
   <!-- 弹窗，根据配置生成选项 -->
-  <VDialog
-    v-model="dialog"
-    max-width="600"
-    scrollable
-  >
+  <VDialog v-model="dialog" max-width="40rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard title="设置仪表板">
       <VCardText>
         <VRow>
-          <VCol
-            v-for="(item, key) in dashboard_names"
-            :key="key"
-            cols="12"
-            md="4"
-          >
-            <VCheckbox
-              v-model="config[key]"
-              :label="dashboard_names[key]"
-            />
+          <VCol v-for="(item, key) in dashboard_names" :key="key" cols="12" md="4" sm="4">
+            <VCheckbox v-model="config[key]" :label="dashboard_names[key]" />
           </VCol>
         </VRow>
       </VCardText>
       <VCardActions>
-        <VBtn
-          color="primary"
-          @click="dialog = false"
-        >
-          取消
-        </VBtn>
+        <VBtn color="primary" @click="dialog = false"> 取消 </VBtn>
         <VSpacer />
-        <VBtn
-          color="primary"
-          variant="tonal"
-          @click="setDashboardConfig"
-        >
-          保存
-        </VBtn>
+        <VBtn color="primary" variant="tonal" @click="setDashboardConfig"> 保存 </VBtn>
       </VCardActions>
     </VCard>
-  </vdialog>
+  </VDialog>
 </template>

src/pages/login.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { debounce } from 'lodash'
 import { VForm } from 'vuetify/components/VForm'
 import { useStore } from 'vuex'
 import { requiredValidator } from '@/@validators'
@@ -48,9 +49,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 +64,32 @@ async function fetchOTP() {
     .catch((error: any) => {
       console.log(error)
     })
+}, 500)
+
+// 加载用户监控面板配置
+async function loadDashboardConfig() {
+  const response = await api.get('/user/config/Dashboard')
+  if (response && response.data && response.data.value) {
+    const data = JSON.stringify(response.data.value)
+    if (data != localStorage.getItem('MP_DASHBOARD')) {
+      localStorage.setItem('MP_DASHBOARD', data)
+    }
+  }
+}
+
+// 尝试加载用户监控面板配置（本地无配置时才加载）
+async function tryLoadDashboardConfig() {
+  if (localStorage.getItem('MP_DASHBOARD')) {
+    return
+  }
+  await loadDashboardConfig()
+}
+
+async function afterLogin() {
+  // 尝试加载用户监控面板配置（本地无配置时才加载）
+  await tryLoadDashboardConfig()
+  // 跳转到首页或回原始页面
+  router.push(store.state.auth.originalPath ?? '/')
 }
 
 // 登录获取token事件
@@ -103,21 +129,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)
-        errorMessage.value = '登录失败，请检查网络连接'
-      else if (error.response.status === 401)
-        errorMessage.value = '登录失败，请检查用户名、密码或双重验证是否正确'
-      else if (error.response.status === 403)
-        errorMessage.value = '登录失败，您没有权限访问'
-      else if (error.response.status === 500)
-        errorMessage.value = '登录失败，服务器错误'
-      else
-        errorMessage.value = `登录失败 ${error.response.status}，请检查用户名、密码或双重验证码是否正确`
+      if (!error.response) errorMessage.value = '登录失败，请检查网络连接'
+      else if (error.response.status === 401) errorMessage.value = '登录失败，请检查用户名、密码或双重验证是否正确'
+      else if (error.response.status === 403) errorMessage.value = '登录失败，您没有权限访问'
+      else if (error.response.status === 500) errorMessage.value = '登录失败，服务器错误'
+      else errorMessage.value = `登录失败 ${error.response.status}，请检查用户名、密码或双重验证码是否正确`
     })
 }
 
@@ -130,8 +151,7 @@ onMounted(() => {
   // 如果token存在，且保持登录状态为true，则跳转到首页
   if (token && remember) {
     router.push('/')
-  }
-  else {
+  } else {
     // 获取背景图片
     fetchBackgroundImage()
   }
@@ -160,16 +180,11 @@ onMounted(() => {
             </div>
           </template>
 
-          <VCardTitle class="font-weight-semibold text-2xl text-uppercase">
-            MoviePilot
-          </VCardTitle>
+          <VCardTitle class="font-weight-semibold text-2xl text-uppercase"> MoviePilot </VCardTitle>
         </VCardItem>
 
         <VCardText>
-          <VForm
-            ref="refForm"
-            @submit.prevent="() => {}"
-          >
+          <VForm ref="refForm" @submit.prevent="() => {}">
             <VRow>
               <!-- username -->
               <VCol cols="12">
@@ -188,42 +203,22 @@ onMounted(() => {
                   v-model="form.password"
                   label="密码"
                   :type="isPasswordVisible ? 'text' : 'password'"
-                  :append-inner-icon="
-                    isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
-                  "
+                  :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
                   :rules="[requiredValidator]"
                   @click:append-inner="isPasswordVisible = !isPasswordVisible"
                 />
               </VCol>
               <VCol cols="12">
-                <VTextField
-                  v-if="isOTP"
-                  v-model="form.otp_password"
-                  label="双重验证码"
-                  type="input"
-                />
+                <VTextField v-if="isOTP" v-model="form.otp_password" label="双重验证码" type="input" />
                 <!-- remember me checkbox -->
                 <div class="d-flex align-center justify-space-between flex-wrap">
-                  <VCheckbox
-                    v-model="form.remember"
-                    label="保持登录"
-                    required
-                  />
+                  <VCheckbox v-model="form.remember" label="保持登录" required />
                 </div>
               </VCol>
               <VCol cols="12">
                 <!-- login button -->
-                <VBtn
-                  block
-                  type="submit"
-                  @click="login"
-                >
-                  登录
-                </VBtn>
-                <div
-                  v-if="errorMessage"
-                  class="text-error mt-2 text-shadow"
-                >
+                <VBtn block type="submit" @click="login"> 登录 </VBtn>
+                <div v-if="errorMessage" class="text-error mt-2 text-shadow">
                   {{ errorMessage }}
                 </div>
               </VCol>
@@ -236,7 +231,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/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">
-    <VProgressCircular v-if="!keyword" size="48" indeterminate color="primary" />
-    <VProgressCircular v-if="keyword" class="mb-3" color="primary" :model-value="progressValue" size="64" />
-    <span>{{ progressText }}</span>
-  </div>
+  <LoadingBanner 
+    v-if="!isRefreshed" 
+    class="mt-12"
+    :text="progressText"
+    :progress="progressValue"
+  />
   <NoDataFound
     v-if="dataList.length === 0 && isRefreshed"
     :error-title="errorTitle"

src/views/discover/MediaCardListView.vue

@@ -52,70 +52,63 @@ async function fetchData({ done }: { done: any }) {
     // 如果正在加载中，直接返回
     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 {
       // 加载一次
+      // 设置加载中
+      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
-
-    // 返回加载成功
-    done('ok')
   }
   catch (error) {
     console.error(error)
-
     // 返回加载失败
     done('error')
   }
@@ -123,16 +116,10 @@ async function fetchData({ done }: { done: any }) {
 </script>
 
 <template>
-  <div
+  <LoadingBanner
     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>
+    class="mt-12"
+  />
   <VInfiniteScroll
     mode="intersect"
     side="end"
@@ -141,6 +128,7 @@ async function fetchData({ done }: { done: any }) {
     @load="fetchData"
   >
     <template #loading />
+    <template #empty />
     <div
       v-if="dataList.length > 0"
       class="grid gap-4 grid-media-card mx-3"

src/views/discover/MediaDetailView.vue

@@ -8,7 +8,7 @@ import NoDataFound from '@/components/NoDataFound.vue'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import { formatSeason } from '@/@core/utils/formatters'
 import router from '@/router'
-import SubscribeEditForm from '@/components/form/SubscribeEditForm.vue'
+import SubscribeEditDialog from '@/components/dialog/SubscribeEditDialog.vue'
 
 // 输入参数
 const mediaProps = defineProps({
@@ -46,11 +46,6 @@ const seasonsSubscribed = ref<{ [key: number]: boolean }>({})
 // 订阅编号
 const subscribeId = ref<number>()
 
-// 订阅规则
-const subscribeRules = ref({
-  show_edit_dialog: false,
-})
-
 // 获得mediaid
 function getMediaId() {
   return mediaDetail.value?.tmdb_id
@@ -230,9 +225,12 @@ async function addSubscribe(season = 0) {
     )
 
     // 显示编辑弹窗
-    if (result.success && subscribeRules.value.show_edit_dialog) {
-      subscribeId.value = result.data.id
-      subscribeEditDialog.value = true
+    if (result.success) {
+      const show_edit_dialog = await queryDefaultSubscribeConfig()
+      if (show_edit_dialog) {
+        subscribeId.value = result.data.id
+        subscribeEditDialog.value = true
+      }
     }
   }
   catch (error) {
@@ -290,20 +288,6 @@ async function removeSubscribe(season: number) {
   doneNProgress()
 }
 
-// 查询订阅弹窗规则
-async function querySubscribeRules() {
-  try {
-    const result: { [key: string]: any } = await api.get(
-      'system/setting/DefaultFilterRules',
-    )
-    if (result.data?.value)
-      subscribeRules.value = result.data?.value
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-
 // 订阅按钮响应
 function handleSubscribe(season = 0) {
   if (isSubscribed.value)
@@ -450,23 +434,35 @@ async function handlePlay() {
   }
 }
 
+async function queryDefaultSubscribeConfig() {
+  try {
+    let subscribe_config_url = ''
+    if (mediaProps.type === '电影')
+      subscribe_config_url = 'system/setting/DefaultMovieSubscribeConfig'
+    else
+      subscribe_config_url = 'system/setting/DefaultTvSubscribeConfig'
+
+    const result: { [key: string]: any } = await api.get(subscribe_config_url)
+
+    if (result.data?.value)
+      return result.data.value.show_edit_dialog
+  }
+  catch (error) {
+    console.log(error)
+  }
+  return false
+}
+
 onBeforeMount(() => {
   getMediaDetail()
-  querySubscribeRules()
 })
 </script>
 
 <template>
-  <div
+  <LoadingBanner
     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>
+    class="mt-12"
+  />
   <div v-if="mediaDetail.tmdb_id || mediaDetail.douban_id || mediaDetail.bangumi_id" class="max-w-8xl mx-auto px-4">
     <template v-if="mediaDetail.backdrop_path || mediaDetail.poster_path">
       <div class="vue-media-back absolute left-0 top-0 w-full h-96">
@@ -506,7 +502,7 @@ onBeforeMount(() => {
           </span>
         </div>
         <div class="media-actions">
-          <VBtn v-if="mediaDetail.tmdb_id || mediaDetail.douban_id || mediaDetail.bangumi_id" variant="tonal" color="info" class="mb-2">
+          <VBtn v-if="(mediaDetail.tmdb_id || mediaDetail.douban_id || mediaDetail.bangumi_id) && mediaDetail.imdb_id" variant="tonal" color="info" class="mb-2">
             <template #prepend>
               <VIcon icon="mdi-magnify" />
             </template>
@@ -532,6 +528,12 @@ onBeforeMount(() => {
               </VList>
             </VMenu>
           </VBtn>
+          <VBtn v-if="(mediaDetail.tmdb_id || mediaDetail.douban_id || mediaDetail.bangumi_id) && !mediaDetail.imdb_id" variant="tonal" color="info" class="mb-2" @click="handleSearch('title')">
+            <template #prepend>
+              <VIcon icon="mdi-magnify" />
+            </template>
+            搜索资源
+          </VBtn>
           <VBtn v-if="mediaDetail.type === '电影' || mediaDetail.douban_id || mediaDetail.bangumi_id" class="ms-2 mb-2" :color="getSubscribeColor" variant="tonal" @click="handleSubscribe(0)">
             <template #prepend>
               <VIcon :icon="getSubscribeIcon" />
@@ -638,16 +640,10 @@ onBeforeMount(() => {
                 </VExpansionPanelTitle>
                 <VExpansionPanelText>
                   <template #default>
-                    <div
+                    <LoadingBanner
                       v-if="!seasonEpisodesInfo[season.season_number || 0]"
-                      class="mt-3 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-                    >
-                      <VProgressCircular
-                        size="48"
-                        indeterminate
-                        color="primary"
-                      />
-                    </div>
+                      class="mt-3"
+                    />
                     <div class="flex flex-col justify-center divide-y divide-gray-700">
                       <div v-for="episode in seasonEpisodesInfo[season.season_number || 0]" :key="episode.episode_number" class="flex flex-col space-y-4 py-4 xl:flex-row xl:space-y-4 xl:space-x-4">
                         <div class="flex-1">
@@ -849,7 +845,7 @@ onBeforeMount(() => {
     error-description="未识别到媒体信息。"
   />
   <!-- 订阅编辑弹窗 -->
-  <SubscribeEditForm
+  <SubscribeEditDialog
     v-model="subscribeEditDialog"
     :subid="subscribeId"
     @close="subscribeEditDialog = false"

src/views/discover/PersonCardListView.vue

@@ -42,74 +42,67 @@ async function fetchData({ done }: { done: any }) {
     // 如果正在加载中，直接返回
     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: {
             page: page.value,
           },
         })
-
+        // 取消加载中
+        loading.value = false
         // 标计为已请求完成
         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++
       }
     }
     else {
       // 加载一次
+      // 设置加载中
+      loading.value = true
       // 请求API
       currData.value = await api.get(props.apipath, {
         params: {
           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
       }
-
-      // 合并数据
-      dataList.value = [...dataList.value, ...currData.value]
-
-      // 页码+1
-      page.value++
+      // 取消加载中
+      loading.value = false
     }
-
-    // 取消加载中
-    loading.value = false
-
-    // 返回加载成功
-    done('ok')
   }
   catch (error) {
     console.error(error)
-
     // 返回加载失败
     done('error')
   }
@@ -117,16 +110,10 @@ async function fetchData({ done }: { done: any }) {
 </script>
 
 <template>
-  <div
+  <LoadingBanner
     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>
+    class="mt-12"
+  />
   <VInfiniteScroll
     mode="intersect"
     side="end"
@@ -135,6 +122,7 @@ async function fetchData({ done }: { done: any }) {
     @load="fetchData"
   >
     <template #loading />
+    <template #empty />
     <div
       v-if="dataList.length > 0 && props.type === 'tmdb'"
       class="grid gap-4 grid-media-card mx-3"

src/views/discover/PersonDetailView.vue

@@ -48,16 +48,10 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div
+  <LoadingBanner
     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>
+    class="mt-12"
+  />
   <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 ">
       <VAvatar

src/views/plugin/PluginCardListView.vue

@@ -6,6 +6,10 @@ 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'
+
+// 显示器宽度
+const display = useDisplay()
 
 // 已安装插件列表
 const dataList = ref<Plugin[]>([])
@@ -58,15 +62,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(
-      `plugin/install/${item?.id}`,
-      {
-        params: {
-          repo_url: item?.repo_url,
-          force: item?.has_update,
-        },
+    const result: { [key: string]: any } = await api.get(`plugin/install/${item?.id}`, {
+      params: {
+        repo_url: item?.repo_url,
+        force: item?.has_update,
       },
-    )
+    })
 
     // 隐藏等待提示框
     progressDialog.value = false
@@ -76,12 +77,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 +91,7 @@ function openPlugin(item: Plugin) {
   if (item.installed === true) {
     // 标记插件动作
     pluginActions.value[item.id || '0'] = true
-  }
-  else {
+  } else {
     // 如果是未安装插件则安装
     installPlugin(item)
   }
@@ -113,11 +111,10 @@ function pluginIconError(item: Plugin) {
 // 插件图标地址
 function pluginIcon(item: Plugin) {
   // 如果图片加载错误
-  if (pluginIconLoaded.value[item.id || '0'] === false)
-    return noImage
+  if (pluginIconLoaded.value[item.id || '0'] === false) 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}`
 }
@@ -145,8 +142,7 @@ async function fetchInstalledPlugins() {
       },
     })
     isRefreshed.value = true
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -171,8 +167,7 @@ async function fetchUninstalledPlugins() {
         }
       }
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -181,8 +176,7 @@ async function fetchUninstalledPlugins() {
 async function getPluginStatistics() {
   try {
     PluginStatistics.value = await api.get('plugin/statistic')
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
@@ -196,8 +190,7 @@ function refreshData() {
 // 对uninstalledList进行排序，按PluginStatistics倒序
 const sortedUninstalledList = computed(() => {
   const list = uninstalledList.value.filter(item => !item.has_update)
-  if (PluginStatistics.value.length === 0)
-    return list
+  if (PluginStatistics.value.length === 0) return list
   return list.sort((a, b) => {
     return PluginStatistics.value[b.id || '0'] - PluginStatistics.value[a.id || '0']
   })
@@ -211,21 +204,8 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div
-    v-if="!isRefreshed"
-    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-  >
-    <VProgressCircular
-      v-if="!isRefreshed"
-      size="48"
-      indeterminate
-      color="primary"
-    />
-  </div>
-  <div
-    v-if="dataList.length > 0"
-    class="grid gap-4 grid-plugin-card"
-  >
+  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
+  <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}`"
@@ -244,15 +224,7 @@ onBeforeMount(() => {
     error-description="点击右下角按钮，前往插件市场安装插件。"
   />
   <!-- App市场 -->
-  <VFab
-    icon="mdi-store-plus"
-    location="bottom end"
-    size="x-large"
-    fixed
-    app
-    appear
-    @click="PluginAppDialog = true"
-  />
+  <VFab icon="mdi-store-plus" location="bottom end" size="x-large" fixed app appear @click="PluginAppDialog = true" />
   <VDialog
     v-if="PluginAppDialog"
     v-model="PluginAppDialog"
@@ -272,30 +244,14 @@ onBeforeMount(() => {
           <VSpacer />
 
           <VToolbarItems>
-            <VBtn
-              size="x-large"
-              @click="pluginDialogClose"
-            >
-              <VIcon
-                color="white"
-                icon="mdi-close"
-              />
+            <VBtn size="x-large" @click="pluginDialogClose">
+              <VIcon color="white" icon="mdi-close" />
             </VBtn>
           </VToolbarItems>
         </VToolbar>
       </div>
       <VCardText>
-        <div
-          v-if="!isAppMarketLoaded"
-          class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-        >
-          <VProgressCircular
-            v-if="!isAppMarketLoaded"
-            size="48"
-            indeterminate
-            color="primary"
-          />
-        </div>
+        <LoadingBanner v-if="!isAppMarketLoaded" class="mt-12" />
         <div v-if="isAppMarketLoaded" class="grid gap-4 grid-plugin-card">
           <PluginAppCard
             v-for="data in sortedUninstalledList"
@@ -333,12 +289,10 @@ onBeforeMount(() => {
     scrollable
     :z-index="1010"
     max-width="40rem"
-    max-height="85vh"
+    :max-height="!display.mdAndUp.value ? '' : '85vh'"
+    :fullscreen="!display.mdAndUp.value"
   >
-    <VCard
-      class="mx-auto"
-      width="100%"
-    >
+    <VCard class="mx-auto" width="100%">
       <VToolbar flat class="p-0">
         <VTextField
           v-model="keyword"
@@ -352,20 +306,12 @@ onBeforeMount(() => {
         />
       </VToolbar>
       <DialogCloseBtn @click="closeSearchDialog" />
-      <VList
-        v-if="filterPlugins.length > 0"
-        lines="two"
-      >
+      <VList v-if="filterPlugins.length > 0" lines="two">
         <template v-for="(item, i) in filterPlugins" :key="i">
-          <VListItem
-            @click="openPlugin(item)"
-          >
+          <VListItem @click="openPlugin(item)">
             <template #prepend>
               <VAvatar>
-                <VImg
-                  :src="pluginIcon(item)"
-                  @error="pluginIconError(item)"
-                >
+                <VImg :src="pluginIcon(item)" @error="pluginIconError(item)">
                   <template #placeholder>
                     <div class="w-full h-full">
                       <VSkeletonLoader class="object-cover aspect-w-1 aspect-h-1" />
@@ -376,13 +322,7 @@ onBeforeMount(() => {
             </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"
-              />
+              <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>
@@ -391,21 +331,11 @@ onBeforeMount(() => {
     </VCard>
   </VDialog>
   <!-- 安装插件进度框 -->
-  <VDialog
-    v-model="progressDialog"
-    :scrim="false"
-    width="25rem"
-  >
-    <VCard
-      color="primary"
-    >
+  <VDialog v-model="progressDialog" :scrim="false" width="25rem">
+    <VCard color="primary">
       <VCardText class="text-center">
         {{ progressText }}
-        <VProgressLinear
-          indeterminate
-          color="white"
-          class="mb-0 mt-1"
-        />
+        <VProgressLinear indeterminate color="white" class="mb-0 mt-1" />
       </VCardText>
     </VCard>
   </VDialog>

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"
-  >
-    <VProgressCircular
-      v-if="!isRefreshed"
-      size="48"
-      indeterminate
-      color="primary"
-    />
-  </div>
+    class="mt-12"
+  />
   <PullRefresh
     v-model="loading"
     @refresh="onRefresh"

src/views/reorganize/TransferHistoryView.vue

@@ -1,9 +1,10 @@
 <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'
 
 // 提示框
 const $toast = useToast()
@@ -28,27 +29,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 +59,13 @@ const headers = [
 ]
 
 const pageRange = [
-  {title: '25', value: 25},
-  {title: '50', value: 50},
-  {title: '100', value: 100},
-  {title: '1000', value: 1000},
-  {title: 'All', value: -1}]
+  { title: '25', value: 25 },
+  { title: '50', value: 50 },
+  { title: '100', value: 100 },
+  { title: '500', value: 500 },
+  { title: '1000', value: 1000 },
+  { title: 'All', value: -1 },
+]
 
 // 数据列表
 const dataList = ref<TransferHistory[]>([])
@@ -112,30 +115,32 @@ const TransferDict: { [key: string]: string } = {
 
 // 分页提示
 const pageTip = computed(() => {
-  const begin  = unref(itemsPerPage) * (unref(currentPage) - 1) + 1
-  const end = unref(itemsPerPage) * unref(currentPage) === -1 ? 'ALL' : unref(itemsPerPage) * unref(currentPage) 
+  const begin = unref(itemsPerPage) * (unref(currentPage) - 1) + 1
+  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 +155,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 +163,9 @@ async function fetchData(page = currentPage.value, count = itemsPerPage.value) {
 
 // 根据 type 返回不同的图标
 function getIcon(type: string) {
-  if (type === '电影')
-    return 'mdi-movie'
-  else if (type === '电视剧')
-    return 'mdi-television-classic'
-  else
-    return 'mdi-help-circle'
+  if (type === '电影') return 'mdi-movie'
+  else if (type === '电视剧') return 'mdi-television-classic'
+  else return 'mdi-help-circle'
 }
 
 // 删除历史记录
@@ -184,10 +185,8 @@ async function remove(item: TransferHistory, deleteSrc: boolean, deleteDest: boo
       data: item,
     })
 
-    if (!result.success)
-      $toast.error(`删除失败: ${result.msg}`)
-  }
-  catch (error) {
+    if (!result.success) $toast.error(`删除失败: ${result.msg}`)
+  } catch (error) {
     console.error(error)
   }
 }
@@ -196,8 +195,7 @@ async function remove(item: TransferHistory, deleteSrc: boolean, deleteDest: boo
 async function removeSingle(deleteSrc: boolean, deleteDest: boolean) {
   // 关闭弹窗
   deleteConfirmDialog.value = false
-  if (!currentHistory.value)
-    return
+  if (!currentHistory.value) return
 
   // 删除
   await remove(currentHistory.value, deleteSrc, deleteDest)
@@ -211,8 +209,7 @@ async function removeBatch(deleteSrc: boolean, deleteDest: boolean) {
   deleteConfirmDialog.value = false
   // 总条数
   const total = selected.value.length
-  if (total === 0)
-    return
+  if (total === 0) return
 
   // 已处理条数
   let handled = 0
@@ -237,16 +234,13 @@ async function removeBatch(deleteSrc: boolean, deleteDest: boolean) {
 
 // 响应删除操作
 async function deleteConfirmHandler(deleteSrc: boolean, deleteDest: boolean) {
-  if (currentHistory.value)
-    await removeSingle(deleteSrc, deleteDest)
-  else
-    await removeBatch(deleteSrc, deleteDest)
+  if (currentHistory.value) await removeSingle(deleteSrc, deleteDest)
+  else await removeBatch(deleteSrc, deleteDest)
 }
 
 // 批量删除历史记录
 async function removeHistoryBatch() {
-  if (selected.value.length === 0)
-    return
+  if (selected.value.length === 0) return
 
   // 清空当前操作记录
   currentHistory.value = undefined
@@ -257,26 +251,20 @@ async function removeHistoryBatch() {
 
 // 计算根路径
 function getRootPath(path: string, type: string, category: string) {
-  if (!path)
-    return ''
+  if (!path) return ''
 
   let index = -2
-  if (type !== '电影')
-    index = -3
+  if (type !== '电影') index = -3
 
-  if (category)
-    index -= 1
+  if (category) index -= 1
 
-  if (path.includes('/'))
-    return path.split('/').slice(0, index).join('/')
-  else
-    return path.split('\\').slice(0, index).join('\\')
+  if (path.includes('/')) return path.split('/').slice(0, index).join('/')
+  else return path.split('\\').slice(0, index).join('\\')
 }
 
 // 批量重新整理
 async function retransferBatch() {
-  if (selected.value.length === 0)
-    return
+  if (selected.value.length === 0) return
 
   // 清空当前操作记录
   currentHistory.value = undefined
@@ -292,8 +280,7 @@ async function retransferBatch() {
     const category = selected.value[0].category ?? ''
     // 计算根路径
     redoTarget.value = getRootPath(dest, mediaType, category)
-  }
-  else {
+  } else {
     redoTarget.value = ''
   }
   // 打开识别弹窗
@@ -329,7 +316,6 @@ const dropdownItems = ref([
 
 // 初始加载数据
 onMounted(fetchData)
-
 </script>
 
 <template>
@@ -337,9 +323,7 @@ onMounted(fetchData)
     <VCardItem>
       <VCardTitle>
         <VRow>
-          <VCol cols="4" md="6">
-            历史记录
-          </VCol>
+          <VCol cols="4" md="6"> 历史记录 </VCol>
           <VCol cols="8" md="6" class="flex">
             <VCombobox
               key="search_navbar"
@@ -378,15 +362,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,14 +381,10 @@ onMounted(fetchData)
         </VChip>
       </template>
       <template #item.status="{ item }">
-        <VChip v-if="item?.status" color="success" size="small">
-          成功
-        </VChip>
+        <VChip v-if="item?.status" color="success" size="small"> 成功 </VChip>
         <v-tooltip v-else :text="item?.errmsg">
           <template #activator="{ props }">
-            <VChip v-bind="props" color="error" size="small">
-              失败
-            </VChip>
+            <VChip v-bind="props" color="error" size="small"> 失败 </VChip>
           </template>
         </v-tooltip>
       </template>
@@ -429,22 +412,13 @@ onMounted(fetchData)
           </VMenu>
         </IconBtn>
       </template>
-      <template #no-data>
-        没有数据
-      </template>
+      <template #no-data> 没有数据 </template>
     </VDataTableVirtual>
     <div class="flex items-center justify-end">
       <div class="w-auto">
-        <VSelect
-          v-model="itemsPerPage"
-          :items="pageRange"
-          density="compact"
-          variant="solo"
-          flat
-          size="small"
-        />
+        <VSelect v-model="itemsPerPage" :items="pageRange" density="compact" variant="solo" flat />
       </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 +437,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>
-        <VBtn color="warning" class="mb-2 mx-2" @click="deleteConfirmHandler(true, false)">
-          删除历史记录和源文件
-        </VBtn>
+        <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 color="info" class="mb-2 mx-2" @click="deleteConfirmHandler(false, true)">
           删除历史记录和媒体库文件
         </VBtn>
@@ -479,7 +449,7 @@ onMounted(fetchData)
     </VCard>
   </VBottomSheet>
   <!-- 文件整理弹窗 -->
-  <ReorganizeForm
+  <ReorganizeDialog
     v-if="redoDialog"
     v-model="redoDialog"
     :logids="redoIds"
@@ -531,4 +501,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(
-      'system/env',
-    )
+    const result: { [key: string]: any } = await api.get('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(
-      'system/versions',
-    )
+    const result: { [key: string]: any } = await api.get('system/versions')
 
     allRelease.value = result.data ?? []
 
     // 最新版本
-    if (allRelease.value.length > 0)
-      latestRelease.value = allRelease.value[0].tag_name
-  }
-  catch (error) {
+    if (allRelease.value.length > 0) latestRelease.value = allRelease.value[0].tag_name
+  } 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">
-          关于 MoviePilot
-        </h3>
+        <h3 class="heading">关于 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>
+              <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.VERSION }}</code>
-                  <a 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">
+                  <a
+                    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>
+              <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.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>
+              <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.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>
+              <dt class="block text-sm font-bold">配置目录</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>
+              <dt class="block text-sm font-bold">数据目录</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>
+              <dt class="block text-sm font-bold">时区</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>
+        <h3 class="heading">支援</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><dd class="flex text-sm sm:col-span-2 sm:mt-0">
+              <dt class="block text-sm font-bold">文档</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><dd class="flex text-sm sm:col-span-2 sm:mt-0">
+              <dt class="block text-sm font-bold">问题反馈</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>
+              <dt class="block text-sm font-bold">发布频道</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>
+        <h3 class="heading">软件版本</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

@@ -252,362 +252,364 @@ onMounted(() => {
 </script>
 
 <template>
-  <VRow>
-    <VCol cols="12">
-      <VCard title="个人信息">
-        <VCardText class="d-flex">
-          <!-- 👉 Avatar -->
-          <VAvatar
-            rounded="lg"
-            size="100"
-            class="me-6"
-            :image="accountInfo.avatar"
-          />
+  <div>
+    <VRow>
+      <VCol cols="12">
+        <VCard title="个人信息">
+          <VCardText class="d-flex">
+            <!-- 👉 Avatar -->
+            <VAvatar
+              rounded="lg"
+              size="100"
+              class="me-6"
+              :image="accountInfo.avatar"
+            />
 
-          <!-- 👉 Upload Photo -->
-          <form class="d-flex flex-column justify-center gap-5">
-            <div class="d-flex flex-wrap gap-2">
-              <VBtn
-                color="primary"
-                @click="refInputEl?.click()"
-              >
-                <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">
-                  保存
+            <!-- 👉 Upload Photo -->
+            <form class="d-flex flex-column justify-center gap-5">
+              <div class="d-flex flex-wrap gap-2">
+                <VBtn
+                  color="primary"
+                  @click="refInputEl?.click()"
+                >
+                  <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>
+                </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"
-      cols="12"
+    <!-- 双重验证弹窗 -->
+    <VDialog
+      v-model="otpDialog"
+      max-width="45rem"
+      persistent
+      z-index="1010"
     >
-      <!-- 👉 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>
-  </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>
+      <!-- 开启双重验证弹窗内容 -->
+      <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>
-        </VForm>
-      </VCardText>
-    </VCard>
-  </VDialog>
+          <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>
+        </VCardText>
+      </VCard>
+    </VDialog>
+  </div>
 </template>

src/views/setting/AccountSettingSearch.vue

@@ -4,7 +4,7 @@ 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 {
@@ -420,7 +420,7 @@ onMounted(() => {
     width="60rem"
     scrollable
   >
-    <ImportCodeForm
+    <ImportCodeDialog
       v-model="importCodeString"
       title="导入优先级规则"
       @close="importCodeDialog = false"

src/views/setting/AccountSettingSubscribe.vue

@@ -4,7 +4,7 @@ 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 {
@@ -41,8 +41,7 @@ const defaultFilterRules = ref({
   exclude: '',
   movie_size: '',
   tv_size: '',
-  min_seeders: 0,
-  show_edit_dialog: false,
+  min_seeders: 0
 })
 
 // 订阅模式选择项
@@ -622,13 +621,6 @@ onMounted(() => {
                   hint="小于该值的资源将被过滤掉，0表示不过滤"
                 />
               </VCol>
-              <VCol cols="12" md="6">
-                <VSwitch
-                  v-model="defaultFilterRules.show_edit_dialog"
-                  label="订阅时编辑更多规则"
-                  hint="开启后，添加订阅时将自动弹出订阅编辑框，要设置更多订阅选项"
-                />
-              </VCol>
             </VRow>
           </VForm>
         </VCardText>
@@ -648,7 +640,7 @@ onMounted(() => {
     width="60rem"
     scrollable
   >
-    <ImportCodeForm
+    <ImportCodeDialog
       v-model="importCodeString"
       title="导入优先级规则"
       @close="importCodeDialog = false"

src/views/site/SiteCardListView.vue

@@ -3,7 +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'
 
 // 数据列表
@@ -35,17 +35,10 @@ onBeforeMount(fetchData)
 </script>
 
 <template>
-  <div
+  <LoadingBanner
     v-if="!isRefreshed"
-    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-  >
-    <VProgressCircular
-      v-if="!isRefreshed"
-      size="48"
-      indeterminate
-      color="primary"
-    />
-  </div>
+    class="mt-12"
+  />
   <div
     v-if="dataList.length > 0"
     class="grid gap-3 grid-site-card"
@@ -80,7 +73,7 @@ onBeforeMount(fetchData)
     @click="siteAddDialog = true"
   />
   <!-- 新增站点弹窗 -->
-  <SiteAddEditForm
+  <SiteAddEditDialog
     v-if="siteAddDialog"
     v-model="siteAddDialog"
     oper="add"

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-inline: 0rem;
+  padding-block: 0;
+  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,6 +22,9 @@ const dataList = ref<Subscribe[]>([])
 // 弹窗
 const subscribeEditDialog = ref(false)
 
+// 历史记录弹窗
+const historyDialog = ref(false)
+
 // 获取订阅列表数据
 async function fetchData() {
   try {
@@ -58,17 +62,10 @@ const filteredDataList = computed(() => {
 </script>
 
 <template>
-  <div
+  <LoadingBanner
     v-if="!isRefreshed"
-    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
-  >
-    <VProgressCircular
-      v-if="!isRefreshed"
-      size="48"
-      indeterminate
-      color="primary"
-    />
-  </div>
+    class="mt-12"
+  />
   <PullRefresh
     v-model="loading"
     @refresh="onRefresh"
@@ -102,8 +99,19 @@ const filteredDataList = computed(() => {
     appear
     @click="subscribeEditDialog = true"
   />
+  <VFab
+    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,6 +119,14 @@ 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">

src/views/system/MessageView.vue

@@ -55,38 +55,39 @@ async function loadMessages({ done }: { done: any }) {
     done('ok')
     return
   }
-  // 设置加载中
-  loading.value = true
   try {
+    // 设置加载中
+    loading.value = true
     currData.value = await api.get('message/web', {
       params: {
         page: page.value,
         size: 20,
       },
     })
+    // 已加载过
+    isLoaded.value = true
     if (currData.value.length > 0) {
       // 取最后一条时间为存量消息最新时间
       lastTime.value = currData.value[currData.value.length - 1].reg_time ?? ''
       // 合并数据
       messages.value = [...currData.value, ...messages.value]
-      // 加载完成
-      done('ok')
       if (page.value === 1) {
         // 滚动到底部
         emit('scroll')
-        // 监听SSE消息
-        startSSEMessager()
       }
       // 页码+1
       page.value++
+      // 完成
+      done('ok')
     }
     else {
-      done('ok')
-      // 监听SSE消息
-      startSSEMessager()
+      // 没有新数据
+      done('empty')
     }
+    // 取消加载中
     loading.value = false
-    isLoaded.value = true
+    // 监听SSE消息
+    startSSEMessager()
   }
   catch (error) {
     console.error(error)
@@ -99,7 +100,7 @@ function compareTime(time1: string, time2: string) {
     return -1
   if (!time2)
     return 1
-  return new Date(time1).getTime() - new Date(time2).getTime()
+  return new Date(time1.replaceAll(/-/g, '/')).getTime() - new Date(time2.replaceAll(/-/g, '/')).getTime()
 }
 
 onBeforeUnmount(() => {
@@ -110,20 +111,18 @@ onBeforeUnmount(() => {
 
 <template>
   <VInfiniteScroll
-    mode="intersect"
+    :mode="!isLoaded ? 'intersect' : 'manual'"
     side="start"
     :items="messages"
     class="overflow-hidden"
     @load="loadMessages"
+    load-more-text="加载更多 ..."
   >
     <template #loading>
-      <VProgressCircular
-        v-if="loading"
-        indeterminate
-        size="48"
-        class="mb-5"
-        color="primary"
-      />
+      <LoadingBanner />
+    </template>
+    <template #empty>
+      没有更多数据
     </template>
     <div>
       <VRow

src/views/system/ModuleTestView.vue

@@ -32,26 +32,22 @@ async function moduleTest(index: number) {
     if (result.success) {
       target.state = 'success'
       target.name = `${target.name} - 正常`
-    }
-    else if (result.message?.includes('模块未加载')) {
+    } else if (result.message?.includes('模块未加载')) {
       target.state = ''
       target.name = `${target.name} - 未启用`
-    }
-    else {
+    } else {
       target.state = 'error'
       target.name = `${target.name} - 错误！`
       target.errmsg = result.message
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
 // 加载
 onMounted(async () => {
   // 逐个检查所有模块
-  for (let i = 0; i < modules.value.length; i++)
-    await moduleTest(i)
+  for (let i = 0; i < modules.value.length; i++) await moduleTest(i)
 })
 </script>
 
@@ -66,10 +62,7 @@ onMounted(async () => {
   >
     {{ module.errmsg }}
     <template #append>
-      <VProgressCircular
-        v-if="module.loading"
-        indeterminate
-      />
+      <VProgressCircular v-if="module.loading" indeterminate />
     </template>
   </VAlert>
 </template>

yarn.lock

@@ -3057,6 +3057,11 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+dayjs@^1.11.10:
+  version "1.11.10"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -6482,6 +6487,7 @@ stop-iteration-iterator@^1.0.0:
     internal-slot "^1.0.4"
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6555,6 +6561,7 @@ stringify-object@^3.3.0:
     is-regexp "^1.0.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==