refactor: migrate all dialogs to a centralized shared dialog management system using useSharedDialog composable

src/components/cards/CustomRuleCard.vue

@@ -1,14 +1,9 @@
 <script lang="ts" setup>
-import { CustomRule } from '@/api/types'
-import { useToast } from 'vue-toastification'
+import type { CustomRule } from '@/api/types'
 import filter_svg from '@images/svg/filter.svg'
-import { cloneDeep } from 'lodash-es'
-import { innerFilterRules } from '@/api/constants'
-import { useI18n } from 'vue-i18n'
-import { useDisplay } from 'vuetify'
+import { openSharedDialog } from '@/composables/useSharedDialog'
 
-// 显示器宽度
-const display = useDisplay()
+const CustomRuleInfoDialog = defineAsyncComponent(() => import('@/components/dialog/CustomRuleInfoDialog.vue'))
 
 // 输入参数
 const props = defineProps({
@@ -24,206 +19,47 @@ const props = defineProps({
   },
 })
 
-// 提示框
-const $toast = useToast()
-const { t } = useI18n()
-
 // 定义触发的自定义事件
 const emit = defineEmits(['close', 'change', 'done'])
 
-// 规则详情弹窗
-const ruleInfoDialog = ref(false)
-
-// 规则详情
-const ruleInfo = ref<CustomRule>({
-  id: '',
-  name: '',
-  include: '',
-  exclude: '',
-  size_range: '',
-  seeders: '',
-  publish_time: '',
-})
-
-// 打开详情弹窗
+/** 打开共享自定义规则配置弹窗。 */
 function openRuleInfoDialog() {
-  // 深复制
-  ruleInfo.value = cloneDeep(props.rule)
-  ruleInfoDialog.value = true
+  openSharedDialog(
+    CustomRuleInfoDialog,
+    {
+      rule: props.rule,
+      rules: props.rules,
+    },
+    {
+      change: (...args: unknown[]) => emit('change', ...args),
+      done: () => emit('done'),
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
 }
 
-// 保存详情数据
-function saveRuleInfo() {
-  // 有空值
-  if (!ruleInfo.value.id || !ruleInfo.value.name) {
-    if (!ruleInfo.value.id && !ruleInfo.value.name) {
-      $toast.error(t('customRule.error.emptyIdName'))
-    }
-    return
-  }
-  // 检查ID是否在内置的规则中
-  if (innerFilterRules.find(option => option.value === ruleInfo.value.id)) {
-    $toast.error(t('customRule.error.idOccupied'))
-    return
-  }
-  // 检查规则名称是否在内置的规则中
-  if (innerFilterRules.find(option => option.title === ruleInfo.value.name)) {
-    $toast.error(t('customRule.error.nameOccupied'))
-    return
-  }
-  // ID已存在
-  if (ruleInfo.value.id !== props.rule.id && props.rules.find(rule => rule.id === ruleInfo.value.id)) {
-    $toast.error(t('customRule.error.idExists', { id: ruleInfo.value.id }))
-    return
-  }
-  // 规则名称已存在
-  if (ruleInfo.value.name !== props.rule.name && props.rules.find(rule => rule.name === ruleInfo.value.name)) {
-    $toast.error(t('customRule.error.nameExists', { name: ruleInfo.value.name }))
-    return
-  }
-  // 保存数据
-  ruleInfoDialog.value = false
-  emit('change', ruleInfo.value, props.rule.id)
-  emit('done')
-}
-
-// 验证规则ID输入
-function validateRuleId() {
-  // 只允许英文和数字，不允许空格
-  ruleInfo.value.id = ruleInfo.value.id.replace(/[^a-zA-Z0-9]/g, '')
-}
-
-// 按钮点击
+/** 关闭自定义规则卡片。 */
 function onClose() {
   emit('close')
 }
 </script>
 
 <template>
-  <div>
-    <VCard variant="tonal" class="app-card-shell" @click="openRuleInfoDialog">
-      <span class="app-card-top-action absolute top-3 right-12">
-        <IconBtn @click.stop>
-          <VIcon class="cursor-move" icon="mdi-drag" />
-        </IconBtn>
-      </span>
-      <VDialogCloseBtn @click="onClose" />
-      <VCardText class="app-card-summary app-card-summary--double-action app-card-summary--title-subtitle">
-        <div class="app-card-summary__content">
-          <h5 class="app-card-summary__title text-h6">{{ props.rule.name }}</h5>
-          <div class="app-card-summary__subtitle text-body-1">{{ props.rule.id }}</div>
-        </div>
-        <div class="app-card-summary__media" aria-hidden="true">
-          <VImg :src="filter_svg" contain class="app-card-summary__image" />
-        </div>
-      </VCardText>
-    </VCard>
-    <VDialog
-      v-if="ruleInfoDialog"
-      v-model="ruleInfoDialog"
-      scrollable
-      max-width="40rem"
-      :fullscreen="!display.mdAndUp.value"
-    >
-      <VCard>
-        <VCardItem>
-          <template #prepend>
-            <VIcon icon="mdi-filter-outline" class="me-2" />
-          </template>
-          <VCardTitle>{{ t('customRule.title', { id: props.rule.id }) }}</VCardTitle>
-        </VCardItem>
-        <VDialogCloseBtn v-model="ruleInfoDialog" />
-        <VDivider />
-        <VCardText>
-          <VForm>
-            <VRow>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="ruleInfo.id"
-                  :label="t('customRule.field.ruleId')"
-                  :placeholder="t('customRule.placeholder.ruleId')"
-                  :hint="t('customRule.hint.ruleId')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-identifier"
-                  @input="validateRuleId"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="ruleInfo.name"
-                  :label="t('customRule.field.ruleName')"
-                  :placeholder="t('customRule.placeholder.ruleName')"
-                  :hint="t('customRule.hint.ruleName')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VTextField
-                  v-model="ruleInfo.include"
-                  :label="t('customRule.field.include')"
-                  :placeholder="t('customRule.placeholder.include')"
-                  :hint="t('customRule.hint.include')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-plus-circle"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VTextField
-                  v-model="ruleInfo.exclude"
-                  :label="t('customRule.field.exclude')"
-                  :placeholder="t('customRule.placeholder.exclude')"
-                  :hint="t('customRule.hint.exclude')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-minus-circle"
-                />
-              </VCol>
-              <VCol cols="6">
-                <VTextField
-                  v-model="ruleInfo.size_range"
-                  :label="t('customRule.field.sizeRange')"
-                  :placeholder="t('customRule.placeholder.sizeRange')"
-                  :hint="t('customRule.hint.sizeRange')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-harddisk"
-                />
-              </VCol>
-              <VCol cols="6">
-                <VTextField
-                  v-model="ruleInfo.seeders"
-                  :label="t('customRule.field.seeders')"
-                  :placeholder="t('customRule.placeholder.seeders')"
-                  :hint="t('customRule.hint.seeders')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-account-group"
-                />
-              </VCol>
-              <VCol cols="6">
-                <VTextField
-                  v-model="ruleInfo.publish_time"
-                  :label="t('customRule.field.publishTime')"
-                  :placeholder="t('customRule.placeholder.publishTime')"
-                  :hint="t('customRule.hint.publishTime')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-calendar-clock"
-                />
-              </VCol>
-            </VRow>
-          </VForm>
-        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn @click="saveRuleInfo" prepend-icon="mdi-content-save" class="px-5">{{
-            t('customRule.action.confirm')
-          }}</VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-  </div>
+  <VCard variant="tonal" class="app-card-shell" @click="openRuleInfoDialog">
+    <span class="app-card-top-action absolute top-3 right-12">
+      <IconBtn @click.stop>
+        <VIcon class="cursor-move" icon="mdi-drag" />
+      </IconBtn>
+    </span>
+    <VDialogCloseBtn @click="onClose" />
+    <VCardText class="app-card-summary app-card-summary--double-action app-card-summary--title-subtitle">
+      <div class="app-card-summary__content">
+        <h5 class="app-card-summary__title text-h6">{{ props.rule.name }}</h5>
+        <div class="app-card-summary__subtitle text-body-1">{{ props.rule.id }}</div>
+      </div>
+      <div class="app-card-summary__media" aria-hidden="true">
+        <VImg :src="filter_svg" contain class="app-card-summary__image" />
+      </div>
+    </VCardText>
+  </VCard>
 </template>

src/components/cards/DownloaderCard.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
 import api from '@/api'
 import { formatFileSize } from '@/@core/utils/formatters'
-import { DownloaderConf } from '@/api/types'
-import { useToast } from 'vue-toastification'
-import type { DownloaderInfo } from '@/api/types'
+import type { DownloaderConf, DownloaderInfo } from '@/api/types'
 import { getLogoUrl } from '@/utils/imageUtils'
-import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
-import { downloaderDict, storageAttributes } from '@/api/constants'
-import { useDisplay } from 'vuetify'
+import { downloaderDict } from '@/api/constants'
 import { useBackground } from '@/composables/useBackground'
+import { openSharedDialog } from '@/composables/useSharedDialog'
 
-// 显示器宽度
-const display = useDisplay()
+const DownloaderInfoDialog = defineAsyncComponent(() => import('@/components/dialog/DownloaderInfoDialog.vue'))
 
 // 获取i18n实例
 const { t } = useI18n()
@@ -40,98 +36,18 @@ const props = defineProps({
 // 定义触发的自定义事件
 const emit = defineEmits(['close', 'done', 'change'])
 
-// 提示框
-const $toast = useToast()
-
 // 上传速率
 const upload_rate = ref(0)
 
 // 下载速度
 const download_rate = ref(0)
 
-// 下载器详情弹窗
-const downloaderInfoDialog = ref(false)
-
-// 表单
-const downloaderForm = ref()
-
-// 路径前缀选项
-const prefixOptions = computed(() => {
-  return storageAttributes.map(item => ({
-    title: t(`storage.${item.type}`),
-    value: item.type,
-  }))
-})
-
-function getStorageType(path: string) {
-  if (!path) return 'local'
-  // 查找匹配的存储类型
-  const storage = storageAttributes.find(s => s.type !== 'local' && path.startsWith(`${s.type}:`))
-  return storage?.type || 'local'
-}
-
-function storage2Prefix(storage: string) {
-  return storage === 'local' ? '' : storage + ':'
-}
-
-// 获取存储路径前后缀
-function parseStoragePath(path: string): [prefix: string, suffix: string] {
-  if (!path) return ['', '']
-  const storage = getStorageType(path)
-  const prefix = storage2Prefix(storage)
-  return [prefix, path.slice(prefix.length)]
-}
-
-// 更新存储路径前缀
-function updateStoragePrefix(row: PathMappingRow, storage: string) {
-  const [, currentSuffix] = parseStoragePath(row.storage)
-  const prefix = storage2Prefix(storage)
-  row.storage = prefix + currentSuffix
-}
-
-// 更新存储路径后缀
-function updateStorageSuffix(row: PathMappingRow, suffix: string) {
-  const [currentPrefix] = parseStoragePath(row.storage)
-  row.storage = currentPrefix + suffix
-}
-
-const pathValidationRules = [
-  (v: string) => !!v || t('downloader.pathMappingRequired'),
-  (v: string) => v.startsWith('/') || t('downloader.pathMappingError'),
-]
-
-// 下载器详情
-const downloaderInfo = ref<DownloaderConf>({
-  name: '',
-  type: '',
-  default: false,
-  enabled: false,
-  config: {},
-  path_mapping: [],
-})
-
-// 路径映射行定义
-interface PathMappingRow {
-  id: string
-  storage: string
-  download: string
-}
-
-// 路径映射行数据
-const pathMappingRows = ref<PathMappingRow[]>([])
-
-// 生成随机ID
-function generateId() {
-  return Math.random().toString(36).substring(2, 9)
-}
-
 // 下载器是否应该刷新数据的计算属性
 const shouldRefresh = computed(() => props.allowRefresh && props.downloader.enabled)
 
-// 调用API查询下载器数据
+/** 调用 API 查询下载器实时速率数据。 */
 async function loadDownloaderInfo() {
   if (!shouldRefresh.value) {
-    // 当下载器被禁用时，重置速率数据
     upload_rate.value = 0
     download_rate.value = 0
     return
@@ -152,51 +68,20 @@ async function loadDownloaderInfo() {
   }
 }
 
-// 打开详情弹窗
+/** 打开共享下载器配置弹窗。 */
 function openDownloaderInfoDialog() {
-  // 深复制
-  downloaderInfo.value = cloneDeep(props.downloader)
-  // 初始化路径映射行数据
-  pathMappingRows.value = (downloaderInfo.value.path_mapping || []).map(item => ({
-    id: generateId(),
-    storage: item[0],
-    download: item[1],
-  }))
-  downloaderInfoDialog.value = true
-}
-
-// 保存详情数据
-async function saveDownloaderInfo() {
-  // 表单校验
-  const { valid } = await downloaderForm.value?.validate()
-  if (!valid) return
-
-  // 同步路径映射数据
-  downloaderInfo.value.path_mapping = pathMappingRows.value.map(row => [row.storage, row.download])
-
-  // 为空不保存，跳出警告框
-  if (!downloaderInfo.value.name) {
-    $toast.error(t('downloader.nameRequired'))
-    return
-  }
-  // 重名判断
-  if (props.downloaders.some(item => item.name === downloaderInfo.value.name && item !== props.downloader)) {
-    $toast.error(t('downloader.nameDuplicate'))
-    return
-  }
-  // 默认下载器去重
-  if (downloaderInfo.value.default) {
-    props.downloaders.forEach(item => {
-      if (item.default && item !== props.downloader) {
-        item.default = false
-        $toast.info(t('downloader.defaultChanged'))
-      }
-    })
-  }
-  // 执行保存
-  downloaderInfoDialog.value = false
-  emit('change', downloaderInfo.value, props.downloader.name)
-  emit('done')
+  openSharedDialog(
+    DownloaderInfoDialog,
+    {
+      downloader: props.downloader,
+      downloaders: props.downloaders,
+    },
+    {
+      change: (...args: unknown[]) => emit('change', ...args),
+      done: () => emit('done'),
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
 }
 
 // 根据存储类型选择图标
@@ -213,21 +98,7 @@ const getIcon = computed(() => {
   }
 })
 
-// 添加路径映射
-function addPathMapping() {
-  pathMappingRows.value.push({
-    id: generateId(),
-    storage: '',
-    download: '',
-  })
-}
-
-// 移除路径映射
-function removePathMapping(index: number) {
-  pathMappingRows.value.splice(index, 1)
-}
-
-// 按钮点击
+/** 关闭下载器卡片。 */
 function onClose() {
   emit('close')
 }
@@ -236,9 +107,9 @@ function onClose() {
 const { stop: stopRefresh } = useConditionalDataRefresh(
   `downloader-${props.downloader.name}`,
   loadDownloaderInfo,
-  shouldRefresh, // 响应式条件：只有当allowRefresh为true且downloader启用时才运行
-  3000, // 3秒间隔
-  true, // 立即执行一次
+  shouldRefresh,
+  3000,
+  true,
 )
 
 onUnmounted(() => {
@@ -247,379 +118,44 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div>
-    <VHover v-slot="hover">
-      <VCard
-        v-bind="hover.props"
-        variant="tonal"
-        class="app-card-shell"
-        @click="openDownloaderInfoDialog"
-        :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
-      >
-        <VDialogCloseBtn @click="onClose" />
-        <span class="app-card-top-action absolute top-3 right-12">
-          <IconBtn @click.stop>
-            <VIcon class="cursor-move" icon="mdi-drag" />
-          </IconBtn>
-        </span>
-        <VCardText class="app-card-summary app-card-summary--double-action">
-          <div class="app-card-summary__content">
-            <div class="app-card-summary__title-row">
-              <VBadge
-                v-if="props.downloader.default && props.downloader.enabled"
-                dot
-                inline
-                color="success"
-                class="me-1"
-              />
-              <span class="app-card-summary__title text-h6">{{ downloader.name }}</span>
-            </div>
-            <div
-              v-if="downloaderDict[downloader.type] && props.downloader.enabled"
-              class="app-card-summary__meta text-sm"
-            >
-              <span class="app-card-summary__meta-item">{{ `↑ ${formatFileSize(upload_rate, 1)}/s` }}</span>
-              <span class="app-card-summary__meta-item">{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
-            </div>
-            <div v-else-if="!downloaderDict[downloader.type]" class="app-card-summary__subtitle text-sm">
-              自定义下载器
-            </div>
-          </div>
-          <div class="app-card-summary__media" aria-hidden="true">
-            <VImg :src="getIcon" contain class="app-card-summary__image" />
-          </div>
-        </VCardText>
-      </VCard>
-    </VHover>
-
-    <VDialog
-      v-if="downloaderInfoDialog"
-      v-model="downloaderInfoDialog"
-      scrollable
-      max-width="40rem"
-      :fullscreen="!display.mdAndUp.value"
+  <VHover v-slot="hover">
+    <VCard
+      v-bind="hover.props"
+      variant="tonal"
+      class="app-card-shell"
+      @click="openDownloaderInfoDialog"
+      :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
     >
-      <VCard>
-        <VCardItem class="py-2">
-          <template #prepend>
-            <VIcon icon="mdi-download" class="me-2" />
-          </template>
-          <VCardTitle>{{ t('common.config') }}</VCardTitle>
-          <VCardSubtitle>{{ props.downloader.name }}</VCardSubtitle>
-        </VCardItem>
-        <VDialogCloseBtn v-model="downloaderInfoDialog" />
-        <VDivider />
-        <VCardText>
-          <VForm ref="downloaderForm">
-            <VRow>
-              <VCol cols="12" md="6">
-                <VSwitch v-model="downloaderInfo.enabled" :label="t('downloader.enabled')" />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VSwitch
-                  v-model="downloaderInfo.default"
-                  :label="t('downloader.default')"
-                  :disabled="!downloaderInfo.enabled"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-if="downloaderInfo.type == 'qbittorrent'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.name"
-                  :label="t('downloader.name')"
-                  :placeholder="t('downloader.nameRequired')"
-                  :hint="t('downloader.name')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.host"
-                  :label="t('downloader.host')"
-                  placeholder="http(s)://ip:port"
-                  :hint="t('downloader.host')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VTextField
-                  v-model="downloaderInfo.config.apikey"
-                  type="password"
-                  :label="t('downloader.apiKey')"
-                  :hint="t('downloader.qbittorrentApiKeyHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-key-variant"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.username"
-                  :label="t('downloader.username')"
-                  :hint="t('downloader.username')"
-                  :disabled="!!downloaderInfo.config.apikey"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-account"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.password"
-                  type="password"
-                  :label="t('downloader.password')"
-                  :hint="t('downloader.password')"
-                  :disabled="!!downloaderInfo.config.apikey"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-lock"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VSwitch
-                  v-model="downloaderInfo.config.category"
-                  :label="t('downloader.category')"
-                  :hint="t('downloader.category')"
-                  persistent-hint
-                  active
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VSwitch
-                  v-model="downloaderInfo.config.sequentail"
-                  :label="t('downloader.sequentail')"
-                  :hint="t('downloader.sequentail')"
-                  persistent-hint
-                  active
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VSwitch
-                  v-model="downloaderInfo.config.force_resume"
-                  :label="t('downloader.force_resume')"
-                  :hint="t('downloader.force_resume')"
-                  persistent-hint
-                  active
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VSwitch
-                  v-model="downloaderInfo.config.first_last_piece"
-                  :label="t('downloader.first_last_piece')"
-                  :hint="t('downloader.first_last_piece')"
-                  persistent-hint
-                  active
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else-if="downloaderInfo.type == 'transmission'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.name"
-                  :label="t('downloader.name')"
-                  :placeholder="t('downloader.nameRequired')"
-                  :hint="t('downloader.name')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.host"
-                  :label="t('downloader.host')"
-                  placeholder="http(s)://ip:port"
-                  :hint="t('downloader.host')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.username"
-                  :label="t('downloader.username')"
-                  :hint="t('downloader.username')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-account"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.password"
-                  type="password"
-                  :label="t('downloader.password')"
-                  :hint="t('downloader.password')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-lock"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else-if="downloaderInfo.type == 'rtorrent'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.name"
-                  :label="t('downloader.name')"
-                  :placeholder="t('downloader.nameRequired')"
-                  :hint="t('downloader.name')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.host"
-                  :label="t('downloader.host')"
-                  placeholder="http(s)://ip:port/RPC2"
-                  :hint="t('downloader.rtorrentHostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.username"
-                  :label="t('downloader.username')"
-                  :hint="t('downloader.username')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-account"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.config.password"
-                  type="password"
-                  :label="t('downloader.password')"
-                  :hint="t('downloader.password')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-lock"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.type"
-                  :label="t('downloader.type')"
-                  :hint="t('downloader.customTypeHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-cog"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="downloaderInfo.name"
-                  :label="t('downloader.name')"
-                  :hint="t('downloader.nameRequired')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-            </VRow>
-            <VRow>
-              <VCol cols="12">
-                <VDivider class="my-2">
-                  <span class="text-body-1 font-weight-medium">{{ t('downloader.pathMapping') }}</span>
-                </VDivider>
-
-                <div v-if="pathMappingRows.length === 0" class="text-center py-2">
-                  <VIcon icon="mdi-folder-network" size="48" class="text-disabled mb-1" />
-                  <div class="text-body-2 text-disabled">{{ t('common.noData') }}</div>
-                </div>
-
-                <VCard v-for="(row, index) in pathMappingRows" :key="row.id" variant="outlined" class="my-2">
-                  <VCardText class="pa-3">
-                    <VRow align="center" no-gutters>
-                      <VCol cols="12" class="mb-2">
-                        <div class="d-flex align-center mb-1">
-                          <VIcon icon="mdi-folder-outline" size="18" class="me-1 text-primary" />
-                          <span class="text-caption text-medium-emphasis">{{ t('downloader.storagePath') }}</span>
-                        </div>
-                        <VRow no-gutters>
-                          <VCol cols="12" sm="4" class="pe-2">
-                            <VSelect
-                              :model-value="getStorageType(row.storage)"
-                              :items="prefixOptions"
-                              density="compact"
-                              variant="outlined"
-                              hide-details
-                              @update:model-value="v => updateStoragePrefix(row, v)"
-                            />
-                          </VCol>
-                          <VCol cols="12" sm="8">
-                            <VTextField
-                              :model-value="parseStoragePath(row.storage)[1]"
-                              :placeholder="'/path/to/storage'"
-                              density="compact"
-                              variant="outlined"
-                              hide-details="auto"
-                              :rules="pathValidationRules"
-                              @update:model-value="v => updateStorageSuffix(row, v)"
-                            />
-                          </VCol>
-                        </VRow>
-                      </VCol>
-
-                      <VCol cols="12" class="mb-1">
-                        <div class="d-flex align-center justify-center my-1">
-                          <VIcon icon="mdi-arrow-down" size="18" class="text-medium-emphasis" />
-                        </div>
-                        <div class="d-flex align-center mb-1">
-                          <VIcon icon="mdi-download-outline" size="18" class="me-1 text-success" />
-                          <span class="text-caption text-medium-emphasis">{{ t('downloader.downloadPath') }}</span>
-                        </div>
-                        <VTextField
-                          v-model="row.download"
-                          :placeholder="'/path/to/download'"
-                          density="compact"
-                          variant="outlined"
-                          hide-details="auto"
-                          :rules="pathValidationRules"
-                        />
-                      </VCol>
-
-                      <VCol cols="12" class="d-flex justify-end pt-1">
-                        <IconBtn variant="text" color="error" size="small" @click="removePathMapping(index)">
-                          <VIcon icon="mdi-delete-outline" />
-                        </IconBtn>
-                      </VCol>
-                    </VRow>
-                  </VCardText>
-                </VCard>
-
-                <VBtn
-                  variant="tonal"
-                  color="primary"
-                  prepend-icon="mdi-plus-circle-outline"
-                  @click="addPathMapping"
-                  class="mt-1"
-                  size="small"
-                >
-                  {{ t('common.add') }} {{ t('downloader.pathMapping') }}
-                </VBtn>
-              </VCol>
-            </VRow>
-          </VForm>
-        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn @click="saveDownloaderInfo" prepend-icon="mdi-content-save" class="px-5">
-            {{ t('common.save') }}
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-  </div>
+      <VDialogCloseBtn @click="onClose" />
+      <span class="app-card-top-action absolute top-3 right-12">
+        <IconBtn @click.stop>
+          <VIcon class="cursor-move" icon="mdi-drag" />
+        </IconBtn>
+      </span>
+      <VCardText class="app-card-summary app-card-summary--double-action">
+        <div class="app-card-summary__content">
+          <div class="app-card-summary__title-row">
+            <VBadge
+              v-if="props.downloader.default && props.downloader.enabled"
+              dot
+              inline
+              color="success"
+              class="me-1"
+            />
+            <span class="app-card-summary__title text-h6">{{ downloader.name }}</span>
+          </div>
+          <div v-if="downloaderDict[downloader.type] && props.downloader.enabled" class="app-card-summary__meta text-sm">
+            <span class="app-card-summary__meta-item">{{ `↑ ${formatFileSize(upload_rate, 1)}/s` }}</span>
+            <span class="app-card-summary__meta-item">{{ `↓ ${formatFileSize(download_rate, 1)}/s` }}</span>
+          </div>
+          <div v-else-if="!downloaderDict[downloader.type]" class="app-card-summary__subtitle text-sm">
+            {{ t('setting.system.custom') }}
+          </div>
+        </div>
+        <div class="app-card-summary__media" aria-hidden="true">
+          <VImg :src="getIcon" contain class="app-card-summary__image" />
+        </div>
+      </VCardText>
+    </VCard>
+  </VHover>
 </template>

src/components/cards/FilterRuleGroupCard.vue

@@ -1,23 +1,14 @@
 <script lang="ts" setup>
-import { copyToClipboard } from '@/@core/utils/navigator'
-import { CustomRule, FilterRuleGroup } from '@/api/types'
-import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
-import { useToast } from 'vue-toastification'
+import type { CustomRule, FilterRuleGroup } from '@/api/types'
 import filter_group_svg from '@images/svg/filter-group.svg'
-import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
-import { useDisplay } from 'vuetify'
+import { openSharedDialog } from '@/composables/useSharedDialog'
 
-// 显示器宽度
-const display = useDisplay()
+const FilterRuleGroupInfoDialog = defineAsyncComponent(() => import('@/components/dialog/FilterRuleGroupInfoDialog.vue'))
 
 // 获取i18n实例
 const { t } = useI18n()
 
-// 规则组详情弹窗内才需要拖拽和导入代码，避免规则组卡片列表首屏带入重交互依赖。
-const Draggable = defineAsyncComponent(() => import('vuedraggable').then(module => module.default))
-const ImportCodeDialog = defineAsyncComponent(() => import('@/components/dialog/ImportCodeDialog.vue'))
-
 // 输入参数
 const props = defineProps({
   // 单个规则组
@@ -39,287 +30,52 @@ const props = defineProps({
   custom_rules: Array as PropType<CustomRule[]>,
 })
 
-// 规则卡片类型
-interface FilterCard {
-  // 优先级
-  pri: string
-  // 已选规则
-  rules: string[]
-}
-
-// 提示框
-const $toast = useToast()
-
 // 定义触发的自定义事件
 const emit = defineEmits(['close', 'change', 'done'])
 
-// 规则详情弹窗
-const groupInfoDialog = ref(false)
-
-// 规则详情
-const groupInfo = ref<FilterRuleGroup>({
-  name: props.group?.name ?? '',
-  rule_string: props.group?.rule_string ?? '',
-  media_type: props.group?.media_type ?? '',
-  category: props.group?.category ?? '',
-})
-
-// 媒体类型字典
-const mediaTypeItems = [
-  { title: t('common.all'), value: '' },
-  { title: t('mediaType.movie'), value: '电影' },
-  { title: t('mediaType.tv'), value: '电视剧' },
-]
-
-// 根据选中的媒体类型，获取对应的媒体类别
-const getCategories = computed(() => {
-  const default_value = [{ title: t('common.all'), value: '' }]
-  if (!props.categories || !groupInfo.value.media_type || !props.categories[groupInfo.value.media_type]) {
-    return default_value
-  }
-  return default_value.concat(props.categories[groupInfo.value.media_type] || [])
-})
-
-// 规则组规则卡片列表
-const filterRuleCards = ref<FilterCard[]>([])
-
-// 导入代码弹窗
-const importCodeDialog = ref(false)
-
-// 导入代码类型
-const importCodeType = ref('')
-
-// 更新规则卡片的值
-function updateFilterCardValue(pri: string, rules: string[]) {
-  const card = filterRuleCards.value.find(card => card.pri === pri)
-  if (card && Array.isArray(rules)) card.rules = rules
+/** 打开共享过滤规则组配置弹窗。 */
+function openGroupInfoDialog() {
+  openSharedDialog(
+    FilterRuleGroupInfoDialog,
+    {
+      group: props.group,
+      groups: props.groups,
+      categories: props.categories,
+      custom_rules: props.custom_rules,
+    },
+    {
+      change: (...args: unknown[]) => emit('change', ...args),
+      done: () => emit('done'),
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
 }
 
-// 移除卡片
-function filterCardClose(pri: string) {
-  filterRuleCards.value = filterRuleCards.value
-    .filter(card => card.pri !== pri)
-    .map((card, index) => {
-      card.pri = (index + 1).toString()
-      return card
-    })
-}
-
-// 分享规则
-async function shareRules() {
-  if (filterRuleCards.value.length === 0) return
-
-  const value = filterRuleCards.value
-    .filter(card => Array.isArray(card.rules) && card.rules.length > 0)
-    .map(card => card.rules.join('&'))
-    .join('>')
-
-  try {
-    let success
-    success = copyToClipboard(value)
-    if (await success) $toast.success(t('filterRule.shareSuccess'))
-    else $toast.error(t('filterRule.shareFailed'))
-  } catch (error) {
-    $toast.error(t('filterRule.shareFailed'))
-    console.error(error)
-  }
-}
-
-// 导入规则
-async function importRules(ruleType: string) {
-  importCodeType.value = ruleType
-  importCodeDialog.value = true
-}
-
-// 保存导入的代码，直接覆盖原有值
-function saveCodeString(type: string, code: any) {
-  try {
-    code = code.value
-    if (type === 'priority') {
-      // 解析值
-      if (!code) return
-      // 首尾增加空格
-      if (!code.startsWith(' ')) code = ` ${code}`
-      if (!code.endsWith(' ')) code = `${code} `
-      const groups = code.split('>')
-      filterRuleCards.value = groups.map((group: string, index: number) => ({
-        pri: (index + 1).toString(),
-        rules: group.split('&').filter(rule => rule),
-      }))
-    }
-  } catch (error) {
-    $toast.error(t('filterRule.importFailed'))
-    console.error(error)
-  }
-}
-
-// 增加卡片
-function addFilterCard() {
-  const pri = (filterRuleCards.value.length + 1).toString()
-  const newCard: FilterCard = { pri, rules: [] }
-  filterRuleCards.value.push(newCard)
-}
-
-// 根据列表的拖动顺序更新优先级
-function dragOrderEnd() {
-  filterRuleCards.value.forEach((card, index) => {
-    card.pri = (index + 1).toString()
-  })
-}
-
-// 打开详情弹窗
-function opengroupInfoDialog() {
-  groupInfo.value = cloneDeep(props.group)
-  if (props.group.rule_string) {
-    filterRuleCards.value = props.group.rule_string.split('>').map((group: string, index: number) => ({
-      pri: (index + 1).toString(),
-      rules: group.split('&').filter(rule => rule),
-    }))
-  }
-  groupInfoDialog.value = true
-}
-
-// 保存详情数据
-function saveGroupInfo() {
-  if (!groupInfo.value.name.trim()) {
-    $toast.error(t('filterRule.nameRequired'))
-    return
-  }
-  if (props.groups.some(item => item.name === groupInfo.value.name && item !== props.group)) {
-    $toast.error(t('filterRule.nameDuplicate'))
-    return
-  }
-
-  groupInfoDialog.value = false
-  groupInfo.value.rule_string = filterRuleCards.value
-    .filter(card => Array.isArray(card.rules) && card.rules.length > 0)
-    .map(card => card.rules.join('&'))
-    .join('>')
-  emit('change', groupInfo.value, props.group.name)
-  emit('done')
-}
-
-// 按钮点击
+/** 关闭过滤规则组卡片。 */
 function onClose() {
   emit('close')
 }
 </script>
 
 <template>
-  <div>
-    <VCard variant="tonal" class="app-card-shell" @click="opengroupInfoDialog">
-      <span class="app-card-top-action absolute top-3 right-12">
-        <IconBtn @click.stop>
-          <VIcon class="cursor-move" icon="mdi-drag" />
-        </IconBtn>
-      </span>
-      <VDialogCloseBtn @click="onClose" />
-      <VCardText class="app-card-summary app-card-summary--double-action app-card-summary--title-subtitle">
-        <div class="app-card-summary__content">
-          <h5 class="app-card-summary__title text-h6">{{ props.group.name }}</h5>
-          <div class="app-card-summary__subtitle text-body-1">
-            <span v-if="!props.group.category">{{ props.group.media_type || t('common.all') }}</span>
-            <span v-else>{{ props.group.category }}</span>
-          </div>
+  <VCard variant="tonal" class="app-card-shell" @click="openGroupInfoDialog">
+    <span class="app-card-top-action absolute top-3 right-12">
+      <IconBtn @click.stop>
+        <VIcon class="cursor-move" icon="mdi-drag" />
+      </IconBtn>
+    </span>
+    <VDialogCloseBtn @click="onClose" />
+    <VCardText class="app-card-summary app-card-summary--double-action app-card-summary--title-subtitle">
+      <div class="app-card-summary__content">
+        <h5 class="app-card-summary__title text-h6">{{ props.group.name }}</h5>
+        <div class="app-card-summary__subtitle text-body-1">
+          <span v-if="!props.group.category">{{ props.group.media_type || t('common.all') }}</span>
+          <span v-else>{{ props.group.category }}</span>
         </div>
-        <div class="app-card-summary__media" aria-hidden="true">
-          <VImg :src="filter_group_svg" contain class="app-card-summary__image" />
-        </div>
-      </VCardText>
-    </VCard>
-    <VDialog
-      v-if="groupInfoDialog"
-      v-model="groupInfoDialog"
-      scrollable
-      max-width="80rem"
-      :fullscreen="!display.mdAndUp.value"
-    >
-      <VCard :title="`${props.group.name} - ${t('filterRule.title')}`">
-        <VDialogCloseBtn v-model="groupInfoDialog" />
-        <VDivider />
-        <VCardItem class="pt-1">
-          <VRow class="mt-1">
-            <VCol cols="12" md="6">
-              <VTextField
-                v-model="groupInfo.name"
-                :label="t('filterRule.groupName')"
-                :placeholder="t('filterRule.nameRequired')"
-                :hint="t('filterRule.groupName')"
-                persistent-hint
-                active
-                prepend-inner-icon="mdi-label"
-              />
-            </VCol>
-            <VCol cols="6" md="3">
-              <VAutocomplete
-                v-model="groupInfo.media_type"
-                :label="t('filterRule.mediaType')"
-                :items="mediaTypeItems"
-                :hint="t('filterRule.mediaType')"
-                persistent-hint
-                active
-                prepend-inner-icon="mdi-movie-open"
-              />
-            </VCol>
-            <VCol cols="6" md="3">
-              <VAutocomplete
-                v-model="groupInfo.category"
-                :items="getCategories"
-                :label="t('filterRule.category')"
-                :hint="t('filterRule.category')"
-                persistent-hint
-                active
-                prepend-inner-icon="mdi-folder-open"
-              />
-            </VCol>
-          </VRow>
-        </VCardItem>
-        <VCardText>
-          <Draggable
-            v-model="filterRuleCards"
-            handle=".cursor-move"
-            item-key="pri"
-            tag="div"
-            @end="dragOrderEnd"
-            :component-data="{ 'class': 'grid gap-3 grid-filterrule-card' }"
-          >
-            <template #item="{ element }">
-              <FilterRuleCard
-                :pri="element.pri"
-                :maxpri="filterRuleCards.length.toString()"
-                :rules="element.rules"
-                :custom_rules="props.custom_rules"
-                @changed="updateFilterCardValue"
-                @close="filterCardClose(element.pri)"
-              />
-            </template>
-          </Draggable>
-          <div class="text-center" v-if="filterRuleCards.length == 0">{{ t('filterRule.add') }}</div>
-        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn color="primary" @click="addFilterCard">
-            <VIcon icon="mdi-plus" />
-          </VBtn>
-          <VBtn color="success" @click="importRules('priority')">
-            <VIcon icon="mdi-import" />
-          </VBtn>
-          <VBtn color="info" @click="shareRules">
-            <VIcon icon="mdi-share" />
-          </VBtn>
-          <VSpacer />
-          <VBtn @click="saveGroupInfo" prepend-icon="mdi-content-save" class="px-5">
-            {{ t('common.save') }}
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-    <ImportCodeDialog
-      v-if="importCodeDialog"
-      v-model="importCodeDialog"
-      :title="t('filterRule.import')"
-      :dataType="importCodeType"
-      @close="importCodeDialog = false"
-      @save="saveCodeString"
-    />
-  </div>
+      </div>
+      <div class="app-card-summary__media" aria-hidden="true">
+        <VImg :src="filter_group_svg" contain class="app-card-summary__image" />
+      </div>
+    </VCardText>
+  </VCard>
 </template>

src/components/cards/MediaCard.vue

@@ -8,12 +8,10 @@ import { doneNProgress, startNProgress } from '@/api/nprogress'
 import type { MediaInfo, Subscribe, MediaSeason, Site } from '@/api/types'
 import router from '@/router'
 import { useUserStore, useGlobalSettingsStore } from '@/stores'
-import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
-import SearchSiteDialog from '@/components/dialog/SearchSiteDialog.vue'
-import SubscribeSeasonDialog from '../dialog/SubscribeSeasonDialog.vue'
 import { useI18n } from 'vue-i18n'
 import { mediaTypeDict } from '@/api/constants'
 import { hasPermission } from '@/utils/permission'
+import { openSharedDialog } from '@/composables/useSharedDialog'
 import {
   getCachedMediaExistsStatus,
   getCachedMediaSubscribeStatus,
@@ -21,6 +19,10 @@ import {
   setCachedMediaSubscribeStatus,
 } from '@/utils/mediaStatusCache'
 
+const SearchSiteDialog = defineAsyncComponent(() => import('@/components/dialog/SearchSiteDialog.vue'))
+const SubscribeEditDialog = defineAsyncComponent(() => import('../dialog/SubscribeEditDialog.vue'))
+const SubscribeSeasonDialog = defineAsyncComponent(() => import('../dialog/SubscribeSeasonDialog.vue'))
+
 // 国际化
 const { t } = useI18n()
 
@@ -59,15 +61,6 @@ const isSubscribed = ref(false)
 // 本地存在状态
 const isExists = ref(false)
 
-// 订阅季弹窗
-const subscribeSeasonDialog = ref(false)
-
-// 订阅编辑弹窗
-const subscribeEditDialog = ref(false)
-
-// 订阅ID
-const subscribeId = ref<number>()
-
 // 选中的订阅季
 const seasonsSelected = ref<MediaSeason[]>([])
 
@@ -93,12 +86,48 @@ const selectedSites = ref<number[]>([])
 // 搜索菜单显示状态
 const searchMenuShow = ref(false)
 
-// 选择站点对话框
-const chooseSiteDialog = ref(false)
-
 // 选择的剧集组
 const episodeGroup = ref('')
 
+// 打开订阅季选择弹窗，避免每个媒体卡片都持有弹窗实例。
+function openSubscribeSeasonDialog() {
+  openSharedDialog(
+    SubscribeSeasonDialog,
+    { media: props.media },
+    {
+      subscribe: subscribeSeasons,
+    },
+    { closeOn: ['close', 'subscribe'] },
+  )
+}
+
+// 打开订阅编辑弹窗，保存、关闭或删除时释放共享弹窗实例。
+function openSubscribeEditDialog(subid: number) {
+  openSharedDialog(
+    SubscribeEditDialog,
+    { subid },
+    {
+      remove: onRemoveSubscribe,
+    },
+    { closeOn: ['close', 'save', 'remove'] },
+  )
+}
+
+// 打开站点选择弹窗，并把选择结果交回当前媒体卡片继续搜索。
+function openSearchSiteDialog() {
+  openSharedDialog(
+    SearchSiteDialog,
+    {
+      sites: allSites.value,
+      selected: selectedSites.value,
+    },
+    {
+      search: searchSites,
+    },
+    { closeOn: ['close', 'search'] },
+  )
+}
+
 // 查询所有站点
 async function querySites() {
   try {
@@ -157,7 +186,7 @@ async function handleAddSubscribe() {
   if (props.media?.type === '电视剧') {
     // 弹出季选择列表，支持多选
     seasonsSelected.value = []
-    subscribeSeasonDialog.value = true
+    openSubscribeSeasonDialog()
   } else {
     // 电影
     addSubscribe()
@@ -199,8 +228,7 @@ async function addSubscribe(season: number | null = null, best_version: number =
     if (result.success && seasonsSelected.value.length <= 1) {
       const show_edit_dialog = await queryDefaultSubscribeConfig()
       if (show_edit_dialog) {
-        subscribeId.value = result.data.id
-        subscribeEditDialog.value = true
+        openSubscribeEditDialog(result.data.id)
       }
     }
   } catch (error) {
@@ -330,7 +358,6 @@ function handleSubscribe() {
 
 // 订阅多季
 function subscribeSeasons(seasons: MediaSeason[], seasonNoExists: { [key: number]: number }, groudId: string) {
-  subscribeSeasonDialog.value = false
   episodeGroup.value = groudId
   seasonsSelected.value = seasons || []
   seasonsSelected.value.forEach(season => {
@@ -375,7 +402,7 @@ async function clickSearch() {
     await querySelectedSites()
   }
   if (allSites.value?.length > 0) {
-    chooseSiteDialog.value = true
+    openSearchSiteDialog()
   } else {
     handleSearch()
   }
@@ -399,7 +426,6 @@ function handleSearch() {
 
 // 搜索多站点
 function searchSites(sites: number[]) {
-  chooseSiteDialog.value = false
   selectedSites.value = sites
   handleSearch()
 }
@@ -449,7 +475,7 @@ const getImgUrl: Ref<string> = computed(() => {
 
 // 移除订阅
 function onRemoveSubscribe() {
-  subscribeEditDialog.value = false
+  isSubscribed.value = false
 }
 
 // 获取媒体类型文本
@@ -565,32 +591,6 @@ onBeforeUnmount(() => {
       </div>
     </template>
   </VHover>
-  <!-- 订阅季弹窗 -->
-  <subscribeSeasonDialog
-    v-if="subscribeSeasonDialog"
-    v-model="subscribeSeasonDialog"
-    :media="media"
-    @subscribe="subscribeSeasons"
-    @close="subscribeSeasonDialog = false"
-  />
-  <!-- 订阅编辑弹窗 -->
-  <SubscribeEditDialog
-    v-if="subscribeEditDialog"
-    v-model="subscribeEditDialog"
-    :subid="subscribeId"
-    @close="subscribeEditDialog = false"
-    @save="subscribeEditDialog = false"
-    @remove="onRemoveSubscribe"
-  />
-  <!-- 站点选择对话框 -->
-  <SearchSiteDialog
-    v-if="chooseSiteDialog"
-    v-model="chooseSiteDialog"
-    :sites="allSites"
-    :selected="selectedSites"
-    @search="searchSites"
-    @close="chooseSiteDialog = false"
-  />
 </template>
 <style scoped>
 .media-card-title {

src/components/cards/MediaServerCard.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import { MediaServerConf, MediaServerLibrary, MediaStatistic } from '@/api/types'
-import { useToast } from 'vue-toastification'
-import { getLogoUrl } from '@/utils/imageUtils'
 import api from '@/api'
-import { cloneDeep } from 'lodash-es'
+import type { MediaServerConf, MediaStatistic } from '@/api/types'
+import { getLogoUrl } from '@/utils/imageUtils'
 import { useI18n } from 'vue-i18n'
 import { mediaServerDict } from '@/api/constants'
-import { useDisplay } from 'vuetify'
+import { openSharedDialog } from '@/composables/useSharedDialog'
 
-// 显示器宽度
-const display = useDisplay()
+const MediaServerInfoDialog = defineAsyncComponent(() => import('@/components/dialog/MediaServerInfoDialog.vue'))
 
 // 获取i18n实例
 const { t } = useI18n()
@@ -28,9 +25,6 @@ const props = defineProps({
   },
 })
 
-// 提示框
-const $toast = useToast()
-
 // 定义触发的自定义事件
 const emit = defineEmits(['close', 'done', 'change'])
 
@@ -53,67 +47,20 @@ const infoItems = ref([
   },
 ])
 
-// 同步媒体库选项
-const librariesOptions = ref<{ title: string; value: string | undefined }[]>([
-  {
-    title: t('common.all'),
-    value: 'all',
-  },
-])
-
-const ugreenScanModeOptions = computed(() => [
-  { title: t('mediaserver.scanModeOptions.newAndModified'), value: 'new_and_modified' },
-  { title: t('mediaserver.scanModeOptions.supplementMissing'), value: 'supplement_missing' },
-  { title: t('mediaserver.scanModeOptions.fullOverride'), value: 'full_override' },
-])
-
-// 媒体服务器详情弹窗
-const mediaServerInfoDialog = ref(false)
-
-// 媒体服务器详情
-const mediaServerInfo = ref<MediaServerConf>({
-  name: '',
-  type: '',
-  enabled: false,
-  config: {},
-})
-
-// 打开详情弹窗
+/** 打开共享媒体服务器配置弹窗。 */
 function openMediaServerInfoDialog() {
-  loadLibrary(props.mediaserver.name)
-  // 深复制
-  mediaServerInfo.value = cloneDeep(props.mediaserver)
-  if (mediaServerInfo.value.type === 'ugreen') {
-    mediaServerInfo.value.config = mediaServerInfo.value.config || {}
-    if (!mediaServerInfo.value.config.scan_mode) {
-      mediaServerInfo.value.config.scan_mode = 'supplement_missing'
-    }
-    if (mediaServerInfo.value.config.verify_ssl === undefined) {
-      mediaServerInfo.value.config.verify_ssl = true
-    }
-  }
-  mediaServerInfoDialog.value = true
-  if (!props.mediaserver.sync_libraries) {
-    mediaServerInfo.value.sync_libraries = ['all']
-  }
-}
-
-// 保存详情数据
-function saveMediaServerInfo() {
-  // 为空不保存，跳出警告框
-  if (!mediaServerInfo.value.name) {
-    $toast.error(t('common.nameRequired'))
-    return
-  }
-  // 重名判断
-  if (props.mediaservers.some(item => item.name === mediaServerInfo.value.name && item !== props.mediaserver)) {
-    $toast.error(t('common.nameExists', { name: mediaServerInfo.value.name }))
-    return
-  }
-  // 执行保存
-  mediaServerInfoDialog.value = false
-  emit('change', mediaServerInfo.value, props.mediaserver.name)
-  emit('done')
+  openSharedDialog(
+    MediaServerInfoDialog,
+    {
+      mediaserver: props.mediaserver,
+      mediaservers: props.mediaservers,
+    },
+    {
+      change: (...args: unknown[]) => emit('change', ...args),
+      done: () => emit('done'),
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
 }
 
 // 根据存储类型选择图标
@@ -136,12 +83,12 @@ const getIcon = computed(() => {
   }
 })
 
-// 按钮点击
+/** 关闭媒体服务器卡片。 */
 function onClose() {
   emit('close')
 }
 
-// 调用API加载媒体统计数据
+/** 调用 API 加载媒体服务器统计数据。 */
 async function loadMediaStatistic() {
   try {
     const res: MediaStatistic = await api.get('dashboard/statistic', {
@@ -174,529 +121,33 @@ async function loadMediaStatistic() {
   }
 }
 
-// 调用API查询媒体库
-async function loadLibrary(server: string) {
-  try {
-    const result: MediaServerLibrary[] = await api.get('mediaserver/library', { params: { server } })
-    if (result && result.length > 0) {
-      librariesOptions.value = result.map(item => ({
-        title: item.name,
-        value: item.id?.toString(),
-      }))
-    } else {
-      librariesOptions.value = []
-    }
-    librariesOptions.value.unshift({
-      title: t('common.all'),
-      value: 'all',
-    })
-  } catch (e) {
-    console.log(e)
-  }
-}
-
 onMounted(() => {
   loadMediaStatistic()
 })
 </script>
-<template>
-  <div>
-    <VCard variant="tonal" class="app-card-shell" @click="openMediaServerInfoDialog">
-      <VDialogCloseBtn @click="onClose" />
-      <VCardText class="app-card-summary app-card-summary--single-action">
-        <div class="app-card-summary__content">
-          <div class="app-card-summary__title text-h6">{{ mediaserver.name }}</div>
-          <div
-            v-if="mediaServerDict[mediaserver.type] && mediaserver.enabled"
-            class="grid min-h-6 grid-cols-3 gap-2 text-sm text-medium-emphasis"
-          >
-            <span v-for="item in infoItems" :key="item.title" class="flex min-w-0 items-center">
-              <VIcon rounded :icon="item.avatar" class="me-1 shrink-0" />
-              <span class="truncate">{{ item.amount }}</span>
-            </span>
-          </div>
-          <div v-else-if="!mediaServerDict[mediaserver.type]" class="app-card-summary__subtitle text-sm">
-            自定义媒体服务器
-          </div>
-        </div>
-        <div class="app-card-summary__media" aria-hidden="true">
-          <VImg :src="getIcon" contain class="app-card-summary__image" />
-        </div>
-      </VCardText>
-    </VCard>
 
-    <VDialog
-      v-if="mediaServerInfoDialog"
-      v-model="mediaServerInfoDialog"
-      scrollable
-      max-width="40rem"
-      :fullscreen="!display.mdAndUp.value"
-    >
-      <VCard>
-        <VCardItem class="py-2">
-          <template #prepend>
-            <VIcon icon="mdi-cog" class="me-2" />
-          </template>
-          <VCardTitle>{{ t('common.config') }}</VCardTitle>
-          <VCardSubtitle>{{ props.mediaserver.name }}</VCardSubtitle>
-        </VCardItem>
-        <VDialogCloseBtn v-model="mediaServerInfoDialog" />
-        <VDivider />
-        <VCardText>
-          <VForm>
-            <VRow>
-              <VCol cols="12" md="6">
-                <VSwitch v-model="mediaServerInfo.enabled" :label="t('mediaserver.enableMediaServer')" />
-              </VCol>
-            </VRow>
-            <VRow v-if="mediaServerInfo.type == 'emby'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.name"
-                  :label="t('common.name')"
-                  :placeholder="t('mediaserver.nameRequired')"
-                  :hint="t('mediaserver.serverAlias')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.host"
-                  :label="t('mediaserver.host')"
-                  :placeholder="t('mediaserver.hostPlaceholder')"
-                  :hint="t('mediaserver.hostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.play_host"
-                  :label="t('mediaserver.playHost')"
-                  :placeholder="t('mediaserver.playHostPlaceholder')"
-                  :hint="t('mediaserver.playHostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-play-network"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.username"
-                  :label="t('mediaserver.username')"
-                  :hint="t('mediaserver.usernameHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-account"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.apikey"
-                  :label="t('mediaserver.apiKey')"
-                  :hint="t('mediaserver.embyApiKeyHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-key"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VAutocomplete
-                  v-model="mediaServerInfo.sync_libraries"
-                  :label="t('mediaserver.syncLibraries')"
-                  :items="librariesOptions"
-                  chips
-                  multiple
-                  clearable
-                  :hint="t('mediaserver.syncLibrariesHint')"
-                  persistent-hint
-                  active
-                  append-inner-icon="mdi-refresh"
-                  prepend-inner-icon="mdi-library"
-                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else-if="mediaServerInfo.type == 'zspace'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.name"
-                  :label="t('common.name')"
-                  :placeholder="t('mediaserver.nameRequired')"
-                  :hint="t('mediaserver.serverAlias')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.host"
-                  :label="t('mediaserver.host')"
-                  :placeholder="t('mediaserver.hostPlaceholder')"
-                  :hint="t('mediaserver.hostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VTextField
-                  v-model="mediaServerInfo.config.play_host"
-                  :label="t('mediaserver.playHost')"
-                  :placeholder="t('mediaserver.playHostPlaceholder')"
-                  :hint="t('mediaserver.playHostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-play-network"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.username"
-                  :label="t('mediaserver.username')"
-                  :hint="t('mediaserver.usernameHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-account"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  type="password"
-                  v-model="mediaServerInfo.config.password"
-                  :label="t('mediaserver.password')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-lock"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VAutocomplete
-                  v-model="mediaServerInfo.sync_libraries"
-                  :label="t('mediaserver.syncLibraries')"
-                  :items="librariesOptions"
-                  chips
-                  multiple
-                  clearable
-                  :hint="t('mediaserver.syncLibrariesHint')"
-                  persistent-hint
-                  active
-                  append-inner-icon="mdi-refresh"
-                  prepend-inner-icon="mdi-library"
-                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else-if="mediaServerInfo.type == 'jellyfin'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.name"
-                  :label="t('common.name')"
-                  :placeholder="t('mediaserver.nameRequired')"
-                  :hint="t('mediaserver.serverAlias')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.host"
-                  :label="t('mediaserver.host')"
-                  :placeholder="t('mediaserver.hostPlaceholder')"
-                  :hint="t('mediaserver.hostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.play_host"
-                  :label="t('mediaserver.playHost')"
-                  :placeholder="t('mediaserver.playHostPlaceholder')"
-                  :hint="t('mediaserver.playHostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-play-network"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.apikey"
-                  :label="t('mediaserver.apiKey')"
-                  :hint="t('mediaserver.jellyfinApiKeyHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-key"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VAutocomplete
-                  v-model="mediaServerInfo.sync_libraries"
-                  :label="t('mediaserver.syncLibraries')"
-                  :items="librariesOptions"
-                  chips
-                  multiple
-                  clearable
-                  :hint="t('mediaserver.syncLibrariesHint')"
-                  persistent-hint
-                  active
-                  append-inner-icon="mdi-refresh"
-                  prepend-inner-icon="mdi-library"
-                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else-if="mediaServerInfo.type == 'trimemedia'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.name"
-                  :label="t('common.name')"
-                  :placeholder="t('mediaserver.nameRequired')"
-                  :hint="t('mediaserver.serverAlias')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.host"
-                  :label="t('mediaserver.host')"
-                  :placeholder="t('mediaserver.hostPlaceholder')"
-                  :hint="t('mediaserver.hostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VTextField
-                  v-model="mediaServerInfo.config.play_host"
-                  :label="t('mediaserver.playHost')"
-                  :placeholder="t('mediaserver.playHostPlaceholder')"
-                  :hint="t('mediaserver.playHostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-play-network"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.username"
-                  :label="t('mediaserver.username')"
-                  active
-                  prepend-inner-icon="mdi-account"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  type="password"
-                  v-model="mediaServerInfo.config.password"
-                  :label="t('mediaserver.password')"
-                  active
-                  prepend-inner-icon="mdi-lock"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VAutocomplete
-                  v-model="mediaServerInfo.sync_libraries"
-                  :label="t('mediaserver.syncLibraries')"
-                  :items="librariesOptions"
-                  chips
-                  multiple
-                  clearable
-                  :hint="t('mediaserver.syncLibrariesHint')"
-                  persistent-hint
-                  active
-                  append-inner-icon="mdi-refresh"
-                  prepend-inner-icon="mdi-library"
-                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else-if="mediaServerInfo.type == 'ugreen'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.name"
-                  :label="t('common.name')"
-                  :placeholder="t('mediaserver.nameRequired')"
-                  :hint="t('mediaserver.serverAlias')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.host"
-                  :label="t('mediaserver.host')"
-                  :placeholder="t('mediaserver.hostPlaceholder')"
-                  :hint="t('mediaserver.hostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VTextField
-                  v-model="mediaServerInfo.config.play_host"
-                  :label="t('mediaserver.playHost')"
-                  :placeholder="t('mediaserver.playHostPlaceholder')"
-                  :hint="t('mediaserver.playHostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-play-network"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.username"
-                  :label="t('mediaserver.username')"
-                  active
-                  prepend-inner-icon="mdi-account"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  type="password"
-                  v-model="mediaServerInfo.config.password"
-                  :label="t('mediaserver.password')"
-                  active
-                  prepend-inner-icon="mdi-lock"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VAutocomplete
-                  v-model="mediaServerInfo.sync_libraries"
-                  :label="t('mediaserver.syncLibraries')"
-                  :items="librariesOptions"
-                  chips
-                  multiple
-                  clearable
-                  :hint="t('mediaserver.syncLibrariesHint')"
-                  persistent-hint
-                  active
-                  append-inner-icon="mdi-refresh"
-                  prepend-inner-icon="mdi-library"
-                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VSelect
-                  v-model="mediaServerInfo.config.scan_mode"
-                  :label="t('mediaserver.scanMode')"
-                  :items="ugreenScanModeOptions"
-                  :hint="t('mediaserver.scanModeHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-radar"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VSwitch
-                  v-model="mediaServerInfo.config.verify_ssl"
-                  :label="t('mediaserver.verifySsl')"
-                  :hint="t('mediaserver.verifySslHint')"
-                  persistent-hint
-                  color="primary"
-                  inset
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else-if="mediaServerInfo.type == 'plex'">
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.name"
-                  :label="t('common.name')"
-                  :placeholder="t('mediaserver.nameRequired')"
-                  :hint="t('mediaserver.serverAlias')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.host"
-                  :label="t('mediaserver.host')"
-                  :placeholder="t('mediaserver.hostPlaceholder')"
-                  :hint="t('mediaserver.hostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-server"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.play_host"
-                  :label="t('mediaserver.playHost')"
-                  :placeholder="t('mediaserver.playHostPlaceholder')"
-                  :hint="t('mediaserver.playHostHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-play-network"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.config.token"
-                  :label="t('mediaserver.plexToken')"
-                  :hint="t('mediaserver.plexTokenHint')"
-                  persistent-hint
-                  active
-                  prepend-inner-icon="mdi-key"
-                />
-              </VCol>
-              <VCol cols="12">
-                <VAutocomplete
-                  v-model="mediaServerInfo.sync_libraries"
-                  :label="t('mediaserver.syncLibraries')"
-                  :items="librariesOptions"
-                  chips
-                  multiple
-                  clearable
-                  :hint="t('mediaserver.syncLibrariesHint')"
-                  persistent-hint
-                  active
-                  append-inner-icon="mdi-refresh"
-                  prepend-inner-icon="mdi-library"
-                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
-                />
-              </VCol>
-            </VRow>
-            <VRow v-else>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="mediaServerInfo.type"
-                  :label="t('mediaserver.type')"
-                  :hint="t('mediaserver.customTypeHint')"
-                  persistent-hint
-                  prepend-inner-icon="mdi-cog"
-                />
-              </VCol>
-              <VCol cols="12" md="6">
-                <VTextField
-                  :label="t('common.name')"
-                  :hint="t('mediaserver.nameRequired')"
-                  persistent-hint
-                  prepend-inner-icon="mdi-label"
-                />
-              </VCol>
-            </VRow>
-          </VForm>
-        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn @click="saveMediaServerInfo" prepend-icon="mdi-content-save" class="px-5">
-            {{ t('common.confirm') }}
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-  </div>
+<template>
+  <VCard variant="tonal" class="app-card-shell" @click="openMediaServerInfoDialog">
+    <VDialogCloseBtn @click="onClose" />
+    <VCardText class="app-card-summary app-card-summary--single-action">
+      <div class="app-card-summary__content">
+        <div class="app-card-summary__title text-h6">{{ mediaserver.name }}</div>
+        <div
+          v-if="mediaServerDict[mediaserver.type] && mediaserver.enabled"
+          class="grid min-h-6 grid-cols-3 gap-2 text-sm text-medium-emphasis"
+        >
+          <span v-for="item in infoItems" :key="item.title" class="flex min-w-0 items-center">
+            <VIcon rounded :icon="item.avatar" class="me-1 shrink-0" />
+            <span class="truncate">{{ item.amount }}</span>
+          </span>
+        </div>
+        <div v-else-if="!mediaServerDict[mediaserver.type]" class="app-card-summary__subtitle text-sm">
+          {{ t('setting.system.custom') }}
+        </div>
+      </div>
+      <div class="app-card-summary__media" aria-hidden="true">
+        <VImg :src="getIcon" contain class="app-card-summary__image" />
+      </div>
+    </VCardText>
+  </VCard>
 </template>

src/components/cards/PluginAppCard.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { useToast } from 'vue-toastification'
-import VersionHistory from '../misc/VersionHistory.vue'
-import api from '@/api'
 import type { Plugin } from '@/api/types'
 import { getLogoUrl } from '@/utils/imageUtils'
 import { getDominantColor } from '@/@core/utils/image'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { formatDownloadCount } from '@/@core/utils/formatters'
-import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
 import { useI18n } from 'vue-i18n'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const PluginMarketDetailDialog = defineAsyncComponent(() => import('@/components/dialog/PluginMarketDetailDialog.vue'))
+const PluginVersionHistoryDialog = defineAsyncComponent(() => import('@/components/dialog/PluginVersionHistoryDialog.vue'))
 
 // 输入参数
 const props = defineProps({
@@ -30,15 +30,6 @@ const backgroundColor = ref('#28A9E1')
 // 图片对象
 const imageRef = ref<any>()
 
-// 提示框
-const $toast = useToast()
-
-// 进度框
-const progressDialog = ref(false)
-
-// 进度框文本
-const progressText = ref('')
-
 // 获取当前插件的标签
 const pluginLabels = computed(() => {
   if (!props.plugin?.plugin_label) return []
@@ -55,12 +46,6 @@ const isImageLoaded = ref(false)
 // 图片是否加载失败
 const imageLoadError = ref(false)
 
-// 更新日志弹窗
-const releaseDialog = ref(false)
-
-// 插件详情弹窗
-const detailDialog = ref(false)
-
 // 图片加载完成
 async function imageLoaded() {
   isImageLoaded.value = true
@@ -69,39 +54,6 @@ async function imageLoaded() {
   backgroundColor.value = await getDominantColor(imageElement)
 }
 
-// 安装插件
-async function installPlugin() {
-  try {
-    // 显示等待提示框
-    progressDialog.value = true
-    progressText.value = t('plugin.installing', {
-      name: props.plugin?.plugin_name,
-      version: props?.plugin?.plugin_version,
-    })
-
-    const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
-      params: {
-        repo_url: props.plugin?.repo_url,
-        force: props.plugin?.has_update,
-      },
-    })
-
-    // 隐藏等待提示框
-    progressDialog.value = false
-
-    if (result.success) {
-      $toast.success(t('plugin.installSuccess', { name: props.plugin?.plugin_name }))
-      detailDialog.value = false
-      // 通知父组件刷新
-      emit('install')
-    } else {
-      $toast.error(t('plugin.installFailed', { name: props.plugin?.plugin_name, message: result.message }))
-    }
-  } catch (error) {
-    console.error(error)
-  }
-}
-
 // 计算图标路径
 const iconPath: Ref<string> = computed(() => {
   if (imageLoadError.value) return getLogoUrl('plugin')
@@ -142,7 +94,27 @@ function visitPluginPage() {
 
 // 显示更新日志
 function showUpdateHistory() {
-  releaseDialog.value = true
+  openSharedDialog(
+    PluginVersionHistoryDialog,
+    { plugin: props.plugin },
+    {},
+    { closeOn: ['close', 'update:modelValue'] },
+  )
+}
+
+/** 打开共享插件市场详情弹窗。 */
+function showPluginDetail() {
+  openSharedDialog(
+    PluginMarketDetailDialog,
+    {
+      plugin: props.plugin,
+      count: props.count,
+    },
+    {
+      install: () => emit('install'),
+    },
+    { closeOn: ['close', 'install', 'update:modelValue'] },
+  )
 }
 
 // 弹出菜单
@@ -166,6 +138,7 @@ const dropdownItems = ref([
     },
   },
 ])
+
 </script>
 
 <template>
@@ -176,7 +149,7 @@ const dropdownItems = ref([
           v-bind="hover.props"
           :width="props.width"
           :height="props.height"
-          @click="detailDialog = true"
+          @click="showPluginDetail"
           class="flex flex-col h-full"
           :class="{
             'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
@@ -270,77 +243,5 @@ const dropdownItems = ref([
         </VCard>
       </template>
     </VHover>
-    <!-- 安装插件进度框 -->
-    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
-    <!-- 更新日志 -->
-    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" max-height="85vh" scrollable>
-      <VCard :title="t('plugin.updateHistoryTitle', { name: props.plugin?.plugin_name })">
-        <VDialogCloseBtn @click="releaseDialog = false" />
-        <VDivider />
-        <VersionHistory :history="props.plugin?.history" />
-      </VCard>
-    </VDialog>
-    <!-- 插件详情-->
-    <VDialog v-if="detailDialog" v-model="detailDialog" max-width="30rem">
-      <VCard>
-        <VDialogCloseBtn @click="detailDialog = false" />
-        <VCardText>
-          <VCol>
-            <div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
-              <div class="mx-auto mt-5">
-                <VAvatar size="64">
-                  <VImg
-                    ref="imageRef"
-                    :src="iconPath"
-                    aspect-ratio="4/3"
-                    cover
-                    @load="imageLoaded"
-                    @error="imageLoadError = true"
-                  />
-                </VAvatar>
-              </div>
-              <div class="flex-grow">
-                <VCardItem>
-                  <VCardTitle class="text-center text-md-left">
-                    {{ props.plugin?.plugin_name }}
-                  </VCardTitle>
-                  <VCardSubtitle
-                    class="text-center text-md-left break-words whitespace-break-spaces line-clamp-4 overflow-hidden text-ellipsis ..."
-                  >
-                    {{ props.plugin?.plugin_desc }}
-                  </VCardSubtitle>
-                  <VList lines="one">
-                    <VListItem class="ps-0">
-                      <VListItemTitle class="text-center text-md-left">
-                        <span class="font-weight-medium">{{ t('common.version') }}：</span>
-                        <span class="text-body-1"> v{{ props.plugin?.plugin_version }}</span>
-                      </VListItemTitle>
-                    </VListItem>
-                    <VListItem class="ps-0">
-                      <VListItemTitle class="text-center text-md-left">
-                        <span class="font-weight-medium">{{ t('common.author') }}：</span>
-                        <span class="text-body-1 cursor-pointer" @click="visitPluginPage">
-                          {{ props.plugin?.plugin_author }}
-                        </span>
-                      </VListItemTitle>
-                    </VListItem>
-                  </VList>
-                  <div class="text-center text-md-left">
-                    <VBtn color="primary" @click="installPlugin" prepend-icon="mdi-download">{{
-                      t('plugin.installToLocal')
-                    }}</VBtn>
-                    <div class="text-xs mt-2" v-if="props.count">
-                      <VIcon icon="mdi-fire" />{{
-                        t('plugin.totalDownloads', { count: formatDownloadCount(props.count) })
-                      }}
-                    </div>
-                  </div>
-                </VCardItem>
-              </div>
-            </div>
-          </VCol>
-        </VCardText>
-      </VCard>
-    </VDialog>
   </div>
 </template>

src/components/cards/PluginCard.vue

@@ -7,18 +7,17 @@ import { isNullOrEmptyObject } from '@core/utils'
 import { getLogoUrl } from '@/utils/imageUtils'
 import { getDominantColor } from '@/@core/utils/image'
 import { formatDownloadCount } from '@/@core/utils/formatters'
-import VersionHistory from '@/components/misc/VersionHistory.vue'
-import ProgressDialog from '../dialog/ProgressDialog.vue'
-import PluginConfigDialog from '../dialog/PluginConfigDialog.vue'
-import PluginDataDialog from '../dialog/PluginDataDialog.vue'
-import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
-
-// 显示器宽度
-const display = useDisplay()
+import { useI18n } from 'vue-i18n'
+import { openSharedDialog } from '@/composables/useSharedDialog'
 
 // 插件日志面板只有点击“查看日志”时才需要，延后加载可减轻插件列表首屏。
-const LoggingView = defineAsyncComponent(() => import('@/views/system/LoggingView.vue'))
+const PluginConfigDialog = defineAsyncComponent(() => import('../dialog/PluginConfigDialog.vue'))
+const PluginDataDialog = defineAsyncComponent(() => import('../dialog/PluginDataDialog.vue'))
+const ProgressDialog = defineAsyncComponent(() => import('../dialog/ProgressDialog.vue'))
+const PluginCloneDialog = defineAsyncComponent(() => import('../dialog/PluginCloneDialog.vue'))
+const PluginLogDialog = defineAsyncComponent(() => import('../dialog/PluginLogDialog.vue'))
+const PluginVersionHistoryDialog = defineAsyncComponent(() => import('../dialog/PluginVersionHistoryDialog.vue'))
 
 // 输入参数
 const props = defineProps({
@@ -39,6 +38,9 @@ const emit = defineEmits(['remove', 'save', 'actionDone'])
 // 多语言
 const { t } = useI18n()
 
+// 显示器宽度
+const display = useDisplay()
+
 // 背景颜色
 const backgroundColor = ref('#28A9E1')
 
@@ -54,24 +56,9 @@ const createConfirm = useConfirm()
 // 本身是否可见
 const isVisible = ref(true)
 
-// 插件配置页面
-const pluginConfigDialog = ref(false)
-
 // 菜单显示状态
 const menuVisible = ref(false)
 
-// 进度框
-const progressDialog = ref(false)
-
-// 插件数据页面
-const pluginInfoDialog = ref(false)
-
-// 实时日志弹窗
-const loggingDialog = ref(false)
-
-// 进度框文本
-const progressText = ref('正在更新插件...')
-
 // 用户头像是否加载完成
 const isAvatarLoaded = ref(false)
 
@@ -81,20 +68,20 @@ const isImageLoaded = ref(false)
 // 图片是否加载失败
 const imageLoadError = ref(false)
 
-// 更新日志弹窗
-const releaseDialog = ref(false)
+let progressDialogController: ReturnType<typeof openSharedDialog> | null = null
+let cloneDialogController: ReturnType<typeof openSharedDialog> | null = null
 
-// 插件分身对话框
-const pluginCloneDialog = ref(false)
+/** 打开插件操作进度弹窗，插件卡片自身不再持有进度弹窗实例。 */
+function showPluginProgress(text: string) {
+  progressDialogController?.close()
+  progressDialogController = openSharedDialog(ProgressDialog, { text }, {}, { closeOn: false })
+}
 
-// 插件分身表单
-const cloneForm = ref({
-  suffix: '',
-  name: '',
-  description: '',
-  version: '',
-  icon: '',
-})
+/** 关闭当前插件操作进度弹窗。 */
+function closePluginProgress() {
+  progressDialogController?.close()
+  progressDialogController = null
+}
 
 // 监听动作标识，如为true则打开详情
 watch(
@@ -121,7 +108,12 @@ function showUpdateHistory() {
   if (isNullOrEmptyObject(props.plugin?.history)) {
     updatePlugin()
   } else {
-    releaseDialog.value = true
+    openSharedDialog(
+      PluginVersionHistoryDialog,
+      { plugin: props.plugin, showUpdateAction: true },
+      { update: updatePlugin },
+      { closeOn: ['close', 'update', 'update:modelValue'] },
+    )
   }
 }
 
@@ -136,11 +128,10 @@ async function uninstallPlugin() {
 
   try {
     // 显示等待提示框
-    progressDialog.value = true
-    progressText.value = t('plugin.uninstalling', { name: props.plugin?.plugin_name })
+    showPluginProgress(t('plugin.uninstalling', { name: props.plugin?.plugin_name }))
     const result: { [key: string]: any } = await api.delete(`plugin/${props.plugin?.id}`)
     // 隐藏等待提示框
-    progressDialog.value = false
+    closePluginProgress()
     if (result.success) {
       $toast.success(t('plugin.uninstallSuccess', { name: props.plugin?.plugin_name }))
 
@@ -155,21 +146,34 @@ async function uninstallPlugin() {
       )
     }
   } catch (error) {
+    closePluginProgress()
     console.error(error)
   }
 }
 
 // 显示插件数据
 async function showPluginInfo() {
-  pluginConfigDialog.value = false
-  pluginInfoDialog.value = true
+  openSharedDialog(
+    PluginDataDialog,
+    { plugin: props.plugin },
+    {
+      switch: showPluginConfig,
+    },
+    { closeOn: ['close', 'switch'] },
+  )
 }
 
 // 显示插件配置
 async function showPluginConfig() {
-  // 显示对话框
-  pluginInfoDialog.value = false
-  pluginConfigDialog.value = true
+  openSharedDialog(
+    PluginConfigDialog,
+    { plugin: props.plugin },
+    {
+      save: configDone,
+      switch: showPluginInfo,
+    },
+    { closeOn: ['close', 'save', 'switch'] },
+  )
 }
 
 // 计算图标路径
@@ -223,10 +227,8 @@ async function resetPlugin() {
 // 更新插件
 async function updatePlugin() {
   try {
-    releaseDialog.value = false
     // 显示等待提示框
-    progressDialog.value = true
-    progressText.value = t('plugin.updating', { name: props.plugin?.plugin_name })
+    showPluginProgress(t('plugin.updating', { name: props.plugin?.plugin_name }))
 
     const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
       params: {
@@ -236,7 +238,7 @@ async function updatePlugin() {
     })
 
     // 隐藏等待提示框
-    progressDialog.value = false
+    closePluginProgress()
 
     if (result.success) {
       $toast.success(t('plugin.updateSuccess', { name: props.plugin?.plugin_name }))
@@ -252,6 +254,7 @@ async function updatePlugin() {
       )
     }
   } catch (error) {
+    closePluginProgress()
     console.error(error)
   }
 }
@@ -261,14 +264,6 @@ function visitAuthorPage() {
   window.open(props.plugin?.author_url, '_blank')
 }
 
-// 查看日志URL
-function openLoggerWindow() {
-  const url = `${
-    import.meta.env.VITE_API_BASE_URL
-  }system/logging?length=-1&logfile=plugins/${props.plugin?.id?.toLowerCase()}.log`
-  window.open(url, '_blank')
-}
-
 // 打开插件详情
 function openPluginDetail() {
   if (props.plugin?.has_page) showPluginInfo()
@@ -285,58 +280,61 @@ function handleCardClick() {
 
 // 配置完成
 function configDone() {
-  pluginConfigDialog.value = false
   emit('save')
 }
 
-// 显示插件分身对话框
+/** 显示插件分身共享弹窗。 */
 function showPluginClone() {
-  cloneForm.value = {
-    suffix: '',
-    name: t('plugin.cloneDefaultName', { name: props.plugin?.plugin_name }),
-    description: t('plugin.cloneDefaultDescription', { description: props.plugin?.plugin_desc }),
-    version: props.plugin?.plugin_version || '1.0',
-    icon: props.plugin?.plugin_icon || '',
-  }
-  pluginCloneDialog.value = true
+  cloneDialogController?.close()
+  cloneDialogController = openSharedDialog(
+    PluginCloneDialog,
+    { plugin: props.plugin },
+    { clone: executePluginClone },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
 }
 
 // 执行插件分身
-async function executePluginClone() {
-  if (!cloneForm.value.suffix.trim()) {
+async function executePluginClone(cloneForm: { suffix: string; name: string; description: string; version: string; icon: string }) {
+  if (!cloneForm.suffix.trim()) {
     $toast.error(t('plugin.suffixRequired'))
     return
   }
 
   try {
-    progressDialog.value = true
-    progressText.value = t('plugin.cloning', { name: props.plugin?.plugin_name })
+    showPluginProgress(t('plugin.cloning', { name: props.plugin?.plugin_name }))
 
     const result: { [key: string]: any } = await api.post(`plugin/clone/${props.plugin?.id}`, {
-      suffix: cloneForm.value.suffix.trim(),
-      name: cloneForm.value.name.trim(),
-      description: cloneForm.value.description.trim(),
-      version: cloneForm.value.version.trim(),
-      icon: cloneForm.value.icon.trim(),
+      suffix: cloneForm.suffix.trim(),
+      name: cloneForm.name.trim(),
+      description: cloneForm.description.trim(),
+      version: cloneForm.version.trim(),
+      icon: cloneForm.icon.trim(),
     })
 
-    progressDialog.value = false
+    closePluginProgress()
 
     if (result.success) {
-      $toast.success(t('plugin.cloneSuccess', { name: cloneForm.value.name }))
-      pluginCloneDialog.value = false
+      $toast.success(t('plugin.cloneSuccess', { name: cloneForm.name }))
+      cloneDialogController?.close()
+      cloneDialogController = null
       // 通知父组件刷新
       emit('remove')
     } else {
       $toast.error(t('plugin.cloneFailed', { message: result.message }))
     }
   } catch (error) {
-    progressDialog.value = false
+    closePluginProgress()
     $toast.error(t('plugin.cloneFailedGeneral'))
     console.error(error)
   }
 }
 
+onUnmounted(() => {
+  closePluginProgress()
+  cloneDialogController?.close()
+})
+
 // 弹出菜单
 const dropdownItems = ref([
   {
@@ -404,7 +402,7 @@ const dropdownItems = ref([
     props: {
       prependIcon: 'mdi-file-document-outline',
       click: () => {
-        loggingDialog.value = true
+        openSharedDialog(PluginLogDialog, { plugin: props.plugin }, {}, { closeOn: ['close', 'update:modelValue'] })
       },
     },
   },
@@ -549,183 +547,6 @@ watch(
       </template>
     </VHover>
 
-    <!-- 插件配置页面 -->
-    <PluginConfigDialog
-      v-if="pluginConfigDialog"
-      v-model="pluginConfigDialog"
-      :plugin="props.plugin"
-      @save="configDone"
-      @close="pluginConfigDialog = false"
-      @switch="showPluginInfo"
-    />
-
-    <!-- 插件数据页面 -->
-    <PluginDataDialog
-      v-if="pluginInfoDialog"
-      v-model="pluginInfoDialog"
-      :plugin="props.plugin"
-      @close="pluginInfoDialog = false"
-      @switch="showPluginConfig"
-    />
-
-    <!-- 进度框 -->
-    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
-
-    <!-- 更新日志 -->
-    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable max-height="85vh">
-      <VCard :title="t('plugin.updateHistoryTitle', { name: props.plugin?.plugin_name })">
-        <VDialogCloseBtn @click="releaseDialog = false" />
-        <VDivider />
-        <VersionHistory :history="props.plugin?.history" />
-        <VDivider />
-        <VCardItem>
-          <VBtn @click="updatePlugin" block>
-            <template #prepend>
-              <VIcon icon="mdi-arrow-up-circle-outline" />
-            </template>
-            {{ t('plugin.updateToLatest') }}
-          </VBtn>
-        </VCardItem>
-      </VCard>
-    </VDialog>
-
-    <!-- 实时日志弹窗 -->
-    <VDialog
-      v-if="loggingDialog"
-      v-model="loggingDialog"
-      scrollable
-      max-width="72rem"
-      :fullscreen="!display.mdAndUp.value"
-    >
-      <VCard>
-        <VDialogCloseBtn @click="loggingDialog = false" />
-        <VCardItem>
-          <VCardTitle class="d-inline-flex">
-            <VIcon icon="mdi-file-document" class="me-2" />
-            {{ t('plugin.logTitle') }}
-            <a class="mx-2 d-inline-flex align-center cursor-pointer" @click="openLoggerWindow">
-              <VChip color="grey-darken-1" size="small" class="ml-2">
-                <VIcon icon="mdi-open-in-new" size="small" start />
-                {{ t('common.openInNewWindow') }}
-              </VChip>
-            </a>
-          </VCardTitle>
-        </VCardItem>
-        <VDivider />
-        <VCardText class="pa-0">
-          <LoggingView :logfile="`plugins/${props.plugin?.id?.toLowerCase()}.log`" />
-        </VCardText>
-      </VCard>
-    </VDialog>
-
-    <!-- 插件分身对话框 -->
-    <VDialog
-      v-if="pluginCloneDialog"
-      v-model="pluginCloneDialog"
-      width="600"
-      scrollable
-      :fullscreen="!display.mdAndUp.value"
-    >
-      <VCard>
-        <VCardItem class="py-2">
-          <template #prepend>
-            <VIcon icon="mdi-content-copy" class="me-2" />
-          </template>
-          <VCardTitle>{{ t('plugin.cloneTitle') }}</VCardTitle>
-          <VCardSubtitle>{{ t('plugin.cloneSubtitle', { name: props.plugin?.plugin_name }) }}</VCardSubtitle>
-        </VCardItem>
-        <VDialogCloseBtn @click="pluginCloneDialog = false" />
-        <VDivider />
-        <VCardText>
-          <VForm>
-            <VRow>
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="cloneForm.suffix"
-                  :label="t('plugin.suffix') + ' *'"
-                  :placeholder="t('plugin.suffixPlaceholder')"
-                  :hint="t('plugin.suffixHint')"
-                  persistent-hint
-                  :rules="[
-                    v => !!v || t('plugin.suffixRequired'),
-                    v => /^[a-zA-Z0-9]+$/.test(v) || t('plugin.suffixFormatError'),
-                    v => v.length <= 20 || t('plugin.suffixLengthError'),
-                  ]"
-                  required
-                  prepend-inner-icon="mdi-tag"
-                />
-              </VCol>
-
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="cloneForm.name"
-                  :label="t('plugin.cloneName')"
-                  :placeholder="t('plugin.cloneNamePlaceholder')"
-                  :hint="t('plugin.cloneNameHint')"
-                  persistent-hint
-                  prepend-inner-icon="mdi-rename-box"
-                />
-              </VCol>
-
-              <VCol cols="12">
-                <VTextField
-                  v-model="cloneForm.description"
-                  :label="t('plugin.cloneDescriptionLabel')"
-                  :placeholder="t('plugin.cloneDescriptionPlaceholder')"
-                  :hint="t('plugin.cloneDescriptionHint')"
-                  persistent-hint
-                  prepend-inner-icon="mdi-text"
-                />
-              </VCol>
-
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="cloneForm.version"
-                  :label="t('plugin.cloneVersion')"
-                  :placeholder="t('plugin.cloneVersionPlaceholder')"
-                  :hint="t('plugin.cloneVersionHint')"
-                  persistent-hint
-                  prepend-inner-icon="mdi-numeric"
-                />
-              </VCol>
-
-              <VCol cols="12" md="6">
-                <VTextField
-                  v-model="cloneForm.icon"
-                  :label="t('plugin.cloneIcon')"
-                  :placeholder="t('plugin.cloneIconPlaceholder')"
-                  :hint="t('plugin.cloneIconHint')"
-                  persistent-hint
-                  prepend-inner-icon="mdi-image"
-                />
-              </VCol>
-
-              <!-- 重要提醒 -->
-              <VCol cols="12">
-                <VAlert type="warning" variant="tonal" density="compact" class="mt-2" icon="mdi-alert-circle-outline">
-                  <div class="text-body-2">
-                    <strong>{{ t('common.notice') }}</strong
-                    >：{{ t('plugin.cloneNotice') }}
-                  </div>
-                </VAlert>
-              </VCol>
-            </VRow>
-          </VForm>
-        </VCardText>
-        <VCardActions class="pt-3">
-          <VSpacer />
-          <VBtn
-            color="primary"
-            @click="executePluginClone"
-            prepend-icon="mdi-content-copy"
-            class="px-5"
-            :disabled="!cloneForm.suffix.trim()"
-          >
-            {{ t('plugin.createClone') }}
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
   </div>
 </template>
 

src/components/cards/PluginFolderCard.vue

@@ -3,6 +3,10 @@ import { useToast } from 'vue-toastification'
 import { useConfirm } from '@/composables/useConfirm'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const PluginFolderRenameDialog = defineAsyncComponent(() => import('@/components/dialog/PluginFolderRenameDialog.vue'))
+const PluginFolderSettingsDialog = defineAsyncComponent(() => import('@/components/dialog/PluginFolderSettingsDialog.vue'))
 
 // 文件夹配置接口
 interface FolderConfig {
@@ -48,15 +52,7 @@ const createConfirm = useConfirm()
 
 // 菜单显示状态
 const menuVisible = ref(false)
-
-// 重命名对话框
-const renameDialog = ref(false)
-
-// 设置对话框
-const settingDialog = ref(false)
-
-// 新名称
-const newFolderName = ref('')
+let renameDialogController: ReturnType<typeof openSharedDialog> | null = null
 
 // 默认颜色
 const defaultColor = '#2196F3'
@@ -66,104 +62,35 @@ const defaultIcon = 'mdi-folder'
 const defaultGradient =
   'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(33, 150, 243, 0.7) 0%, rgba(33, 150, 243, 0.8s) 100%)'
 
-// 文件夹设置
-const folderSettings = ref<FolderConfig>({
-  background: '',
-  icon: defaultIcon,
-  color: defaultColor,
-  gradient: defaultGradient,
-  showIcon: true,
-})
-
 // 计算背景图片
 const backgroundImage = computed(() => {
-  return props.folderConfig.background || folderSettings.value.background
+  return props.folderConfig.background
 })
 
-// 预设图标选项
-const iconOptions = [
-  'mdi-folder',
-  'mdi-folder-star',
-  'mdi-folder-heart',
-  'mdi-folder-cog',
-  'mdi-folder-music',
-  'mdi-folder-image',
-  'mdi-folder-video',
-  'mdi-folder-download',
-  'mdi-folder-network',
-  'mdi-folder-special',
-]
-
-// 预设颜色选项
-const colorOptions = [
-  '#2196F3', // 蓝色
-  '#4CAF50', // 绿色
-  '#FF9800', // 橙色
-  '#9C27B0', // 紫色
-  '#F44336', // 红色
-  '#607D8B', // 蓝灰色
-  '#795548', // 棕色
-  '#E91E63', // 粉色
-]
-
-// 预设渐变选项
-const gradientOptions = [
-  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(33, 150, 243, 0.7) 0%, rgba(33, 150, 243, 0.8) 100%)',
-  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(76, 175, 80, 0.7) 0%, rgba(76, 175, 80, 0.8) 100%)',
-  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(255, 152, 0, 0.7) 0%, rgba(255, 152, 0, 0.8) 100%)',
-  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(156, 39, 176, 0.7) 0%, rgba(156, 39, 176, 0.8) 100%)',
-  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(244, 67, 54, 0.7) 0%, rgba(244, 67, 54, 0.8) 100%)',
-  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(96, 125, 139, 0.7) 0%, rgba(96, 125, 139, 0.8) 100%)',
-  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(233, 30, 99, 0.7) 0%, rgba(233, 30, 99, 0.8) 100%)',
-  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(63, 81, 181, 0.7) 0%, rgba(156, 39, 176, 0.8) 100%)',
-]
-
 // 计算背景渐变
 const backgroundGradient = computed(() => {
   const config = props.folderConfig || {}
-  const settings = folderSettings.value
-
-  return config.gradient || settings.gradient || gradientOptions[0]
+  return config.gradient || defaultGradient
 })
 
 // 计算图标
 const folderIcon = computed(() => {
   const config = props.folderConfig || {}
-  const settings = folderSettings.value
-
-  return config.icon || settings.icon || defaultIcon
+  return config.icon || defaultIcon
 })
 
 // 计算图标颜色
 const iconColor = computed(() => {
   const config = props.folderConfig || {}
-  const settings = folderSettings.value
-
-  return config.color || settings.color || defaultColor
+  return config.color || defaultColor
 })
 
 // 计算是否显示图标
 const shouldShowIcon = computed(() => {
   const config = props.folderConfig || {}
-  const settings = folderSettings.value
-
-  return config.showIcon !== undefined ? config.showIcon : settings.showIcon !== undefined ? settings.showIcon : true
+  return config.showIcon !== undefined ? config.showIcon : true
 })
 
-// 监听props变化，更新本地设置
-watch(
-  () => props.folderConfig,
-  newConfig => {
-    if (newConfig) {
-      folderSettings.value = {
-        ...folderSettings.value,
-        ...newConfig,
-      }
-    }
-  },
-  { deep: true, immediate: true },
-)
-
 // 打开文件夹
 function openFolder() {
   emit('open', props.folderName)
@@ -177,27 +104,34 @@ function handleCardClick() {
   openFolder()
 }
 
-// 重命名文件夹
+/** 打开文件夹重命名共享弹窗。 */
 function showRenameDialog() {
-  newFolderName.value = props.folderName || ''
-  renameDialog.value = true
+  renameDialogController?.close()
+  renameDialogController = openSharedDialog(
+    PluginFolderRenameDialog,
+    { folderName: props.folderName },
+    { rename: confirmRename },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
 }
 
 // 确认重命名
-async function confirmRename() {
-  if (!newFolderName.value.trim()) {
+async function confirmRename(newFolderName: string) {
+  if (!newFolderName.trim()) {
     $toast.error(t('folder.folderNameCannotBeEmpty'))
     return
   }
 
-  if (newFolderName.value === props.folderName) {
-    renameDialog.value = false
+  if (newFolderName === props.folderName) {
+    renameDialogController?.close()
+    renameDialogController = null
     return
   }
 
   try {
-    emit('rename', props.folderName, newFolderName.value)
-    renameDialog.value = false
+    emit('rename', props.folderName, newFolderName)
+    renameDialogController?.close()
+    renameDialogController = null
   } catch (error) {
     console.error(error)
   }
@@ -221,28 +155,24 @@ async function deleteFolder() {
 
 // 显示设置对话框
 function showSettingDialog() {
-  folderSettings.value = {
-    background: props.folderConfig?.background || '',
-    icon: props.folderConfig?.icon || defaultIcon,
-    color: props.folderConfig?.color || defaultColor,
-    gradient: props.folderConfig?.gradient || gradientOptions[0],
-    showIcon: props.folderConfig?.showIcon !== undefined ? props.folderConfig.showIcon : true,
-  }
-  settingDialog.value = true
+  openSharedDialog(
+    PluginFolderSettingsDialog,
+    { folderConfig: props.folderConfig },
+    { save: saveSettings },
+    { closeOn: ['close', 'save', 'update:modelValue'] },
+  )
 }
 
 // 保存设置
-function saveSettings() {
-  const config = {
-    ...props.folderConfig,
-    ...folderSettings.value,
-  }
-
+function saveSettings(config: FolderConfig) {
   emit('update-config', props.folderName, config)
-  settingDialog.value = false
   $toast.success(t('folder.folderSettingsSaved'))
 }
 
+onUnmounted(() => {
+  renameDialogController?.close()
+})
+
 // 弹出菜单
 const dropdownItems = ref([
   {
@@ -361,139 +291,6 @@ const dropdownItems = ref([
         </VCard>
       </template>
     </VHover>
-
-    <!-- 重命名对话框 -->
-    <VDialog v-if="renameDialog" v-model="renameDialog" max-width="400">
-      <VCard>
-        <VCardItem>
-          <template #prepend>
-            <VIcon icon="mdi-pencil" class="me-2" />
-          </template>
-          <VCardTitle>{{ t('folder.renameFolder') }}</VCardTitle>
-        </VCardItem>
-        <VDialogCloseBtn @click="renameDialog = false" />
-        <VDivider />
-        <VCardText>
-          <VTextField
-            v-model="newFolderName"
-            :label="t('folder.folderName')"
-            variant="outlined"
-            autofocus
-            @keyup.enter="confirmRename"
-          />
-        </VCardText>
-        <VCardActions>
-          <VSpacer />
-          <VBtn color="primary" prepend-icon="mdi-check" class="px-5" @click="confirmRename">确认</VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-
-    <!-- 设置对话框 -->
-    <VDialog
-      v-if="settingDialog"
-      v-model="settingDialog"
-      max-width="600"
-      scrollable
-      :fullscreen="!display.mdAndUp.value"
-    >
-      <VCard>
-        <VDialogCloseBtn @click="settingDialog = false" />
-        <VCardItem>
-          <VCardTitle>
-            <VIcon icon="mdi-palette" class="mr-2" />
-            {{ t('folder.folderAppearanceSettings') }}
-          </VCardTitle>
-        </VCardItem>
-        <VDivider />
-        <VCardText>
-          <VRow>
-            <!-- 显示图标开关 -->
-            <VCol cols="12">
-              <VSwitch
-                v-model="folderSettings.showIcon"
-                :label="t('folder.showFolderIcon')"
-                color="primary"
-                hide-details
-              />
-            </VCol>
-
-            <!-- 图标选择 -->
-            <VCol v-if="folderSettings.showIcon" cols="12" md="6">
-              <VCardSubtitle class="pa-0 mb-2">{{ t('folder.icon') }}</VCardSubtitle>
-              <div class="icon-grid">
-                <VBtn
-                  v-for="icon in iconOptions"
-                  icon
-                  :key="icon"
-                  :variant="folderSettings.icon === icon ? 'tonal' : 'text'"
-                  :color="folderSettings.icon === icon ? 'primary' : 'default'"
-                  size="large"
-                  class="ma-1"
-                  @click="folderSettings.icon = icon"
-                >
-                  <VIcon :icon="icon" size="24" />
-                </VBtn>
-              </div>
-            </VCol>
-
-            <!-- 颜色选择 -->
-            <VCol v-if="folderSettings.showIcon" cols="12" md="6">
-              <VCardSubtitle class="pa-0 mb-2">{{ t('folder.iconColor') }}</VCardSubtitle>
-              <div class="color-grid">
-                <VBtn
-                  v-for="color in colorOptions"
-                  :key="color"
-                  :variant="folderSettings.color === color ? 'tonal' : 'text'"
-                  :color="color"
-                  size="large"
-                  class="ma-1 color-btn"
-                  :style="{ backgroundColor: color }"
-                  @click="folderSettings.color = color"
-                >
-                  <VIcon v-if="folderSettings.color === color" icon="mdi-check" color="white" />
-                </VBtn>
-              </div>
-            </VCol>
-
-            <!-- 渐变背景选择 -->
-            <VCol cols="12">
-              <VCardSubtitle class="pa-0 mb-2">{{ t('folder.backgroundGradient') }}</VCardSubtitle>
-              <div class="gradient-grid">
-                <VBtn
-                  v-for="(gradient, index) in gradientOptions"
-                  :key="index"
-                  :variant="folderSettings.gradient === gradient ? 'tonal' : 'text'"
-                  class="ma-1 gradient-btn"
-                  :style="{ background: gradient }"
-                  size="large"
-                  @click="folderSettings.gradient = gradient"
-                >
-                  <VIcon v-if="folderSettings.gradient === gradient" icon="mdi-check" color="white" />
-                </VBtn>
-              </div>
-            </VCol>
-
-            <!-- 自定义背景图片 -->
-            <VCol cols="12">
-              <VTextField
-                v-model="folderSettings.background"
-                :label="t('folder.customBackgroundImageURL')"
-                placeholder="https://example.com/image.jpg"
-                variant="outlined"
-                :hint="t('folder.customBackgroundImageHint')"
-                persistent-hint
-                prepend-inner-icon="mdi-image"
-              />
-            </VCol>
-          </VRow>
-        </VCardText>
-        <VCardActions>
-          <VSpacer />
-          <VBtn color="primary" prepend-icon="mdi-content-save" class="px-5" @click="saveSettings">保存</VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
   </div>
 </template>
 

src/components/cards/SiteCard.vue

@@ -3,10 +3,6 @@ import type { PropType } from 'vue'
 import { getLogoUrl } from '@/utils/imageUtils'
 import { useToast } from 'vue-toastification'
 import { useI18n } from 'vue-i18n'
-import SiteAddEditDialog from '../dialog/SiteAddEditDialog.vue'
-import SiteUserDataDialog from '../dialog/SiteUserDataDialog.vue'
-import SiteResourceDialog from '../dialog/SiteResourceDialog.vue'
-import SiteCookieUpdateDialog from '../dialog/SiteCookieUpdateDialog.vue'
 import api from '@/api'
 import type { Site, SiteStatistic, SiteUserData } from '@/api/types'
 import { isNullOrEmptyObject } from '@/@core/utils'
@@ -14,6 +10,12 @@ import { formatFileSize } from '@/@core/utils/formatters'
 import { useConfirm } from '@/composables/useConfirm'
 import { getCachedSiteIcon } from '@/utils/siteIconCache'
 import { useDisplay } from 'vuetify'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const SiteAddEditDialog = defineAsyncComponent(() => import('../dialog/SiteAddEditDialog.vue'))
+const SiteCookieUpdateDialog = defineAsyncComponent(() => import('../dialog/SiteCookieUpdateDialog.vue'))
+const SiteResourceDialog = defineAsyncComponent(() => import('../dialog/SiteResourceDialog.vue'))
+const SiteUserDataDialog = defineAsyncComponent(() => import('../dialog/SiteUserDataDialog.vue'))
 
 // 显示器宽度
 const display = useDisplay()
@@ -51,18 +53,6 @@ const testButtonText = ref(t('site.testConnectivity'))
 // 测试按钮可用性
 const testButtonDisable = ref(false)
 
-// 更新站点Cookie UA弹窗
-const siteCookieDialog = ref(false)
-
-// 站点编辑弹窗
-const siteEditDialog = ref(false)
-
-// 资源浏览弹窗
-const resourceDialog = ref(false)
-
-// 用户数据弹窗
-const siteUserDataDialog = ref(false)
-
 // 查询站点图标
 async function getSiteIcon() {
   const siteId = cardProps.site?.id
@@ -105,17 +95,44 @@ async function testSite() {
 
 // 打开更新站点Cookie UA弹窗
 async function handleSiteUpdate() {
-  siteCookieDialog.value = true
+  openSharedDialog(
+    SiteCookieUpdateDialog,
+    { site: cardProps.site },
+    {
+      done: onSiteCookieUpdated,
+    },
+    { closeOn: ['close', 'done'] },
+  )
 }
 
 // 打开资源浏览弹窗
 async function handleResourceBrowse() {
-  resourceDialog.value = true
+  openSharedDialog(
+    SiteResourceDialog,
+    { site: cardProps.site },
+    {
+      close: onSiteResourceDone,
+    },
+    { closeOn: ['close'] },
+  )
 }
 
 // 打开站点用户数据弹窗
 async function handleSiteUserData() {
-  siteUserDataDialog.value = true
+  openSharedDialog(SiteUserDataDialog, { site: cardProps.site }, {}, { closeOn: ['close'] })
+}
+
+// 打开站点编辑弹窗
+function handleSiteEdit() {
+  openSharedDialog(
+    SiteAddEditDialog,
+    { siteid: cardProps.site?.id },
+    {
+      save: saveSite,
+      remove: () => emit('remove'),
+    },
+    { closeOn: ['close', 'save', 'remove'] },
+  )
 }
 
 // 打开站点页面
@@ -199,20 +216,17 @@ const getDownloadPercent = computed(() => {
 
 // 保存站点
 function saveSite() {
-  siteEditDialog.value = false
   emit('update')
 }
 
 // 更新站点Cookie UA后的回调
 function onSiteCookieUpdated() {
-  siteCookieDialog.value = false
   // Cookie更新后刷新统计数据
   emit('refresh-stats', cardProps.site?.domain)
 }
 
 // 资源浏览弹窗关闭后的回调
 function onSiteResourceDone() {
-  resourceDialog.value = false
   // 资源操作完成后刷新统计数据
   emit('refresh-stats', cardProps.site?.domain)
 }
@@ -390,7 +404,7 @@ onMounted(() => {
           <VIcon icon="mdi-dots-vertical" size="20" />
           <VMenu :activator="'parent'" :close-on-content-click="true" :location="'left'">
             <VList>
-              <VListItem @click="siteEditDialog = true" base-color="info">
+              <VListItem @click="handleSiteEdit" base-color="info">
                 <template #prepend>
                   <VIcon icon="mdi-file-edit-outline" size="20" />
                 </template>
@@ -407,35 +421,6 @@ onMounted(() => {
         </VBtn>
       </VSheet>
     </VCard>
-
-    <!-- 对话框组件 -->
-    <SiteCookieUpdateDialog
-      v-if="siteCookieDialog"
-      v-model="siteCookieDialog"
-      :site="cardProps.site"
-      @close="siteCookieDialog = false"
-      @done="onSiteCookieUpdated"
-    />
-    <SiteAddEditDialog
-      v-if="siteEditDialog"
-      v-model="siteEditDialog"
-      :siteid="cardProps.site?.id"
-      @save="saveSite"
-      @remove="emit('remove')"
-      @close="siteEditDialog = false"
-    />
-    <SiteUserDataDialog
-      v-if="siteUserDataDialog"
-      v-model="siteUserDataDialog"
-      :site="cardProps.site"
-      @close="siteUserDataDialog = false"
-    />
-    <SiteResourceDialog
-      v-if="resourceDialog"
-      v-model="resourceDialog"
-      :site="cardProps.site"
-      @close="onSiteResourceDone"
-    />
   </div>
 </template>
 

src/components/cards/StorageCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { StorageConf } from '@/api/types'
+import type { StorageConf } from '@/api/types'
 import { formatBytes } from '@core/utils/formatters'
 import storage_png from '@images/misc/storage.png'
 import alipan_png from '@images/misc/alipan.webp'
@@ -9,18 +9,17 @@ import alist_png from '@images/misc/openlist.svg'
 import custom_png from '@images/misc/database.png'
 import smb_png from '@images/misc/smb.png'
 import api from '@/api'
-import AliyunAuthDialog from '../dialog/AliyunAuthDialog.vue'
-import U115AuthDialog from '../dialog/U115AuthDialog.vue'
-import RcloneConfigDialog from '../dialog/RcloneConfigDialog.vue'
-import AlistConfigDialog from '../dialog/AlistConfigDialog.vue'
-import SmbConfigDialog from '../dialog/SmbConfigDialog.vue'
 import { useToast } from 'vue-toastification'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { useI18n } from 'vue-i18n'
-import { useDisplay } from 'vuetify'
+import { openSharedDialog } from '@/composables/useSharedDialog'
 
-// 显示器宽度
-const display = useDisplay()
+const AliyunAuthDialog = defineAsyncComponent(() => import('../dialog/AliyunAuthDialog.vue'))
+const U115AuthDialog = defineAsyncComponent(() => import('../dialog/U115AuthDialog.vue'))
+const RcloneConfigDialog = defineAsyncComponent(() => import('../dialog/RcloneConfigDialog.vue'))
+const AlistConfigDialog = defineAsyncComponent(() => import('../dialog/AlistConfigDialog.vue'))
+const SmbConfigDialog = defineAsyncComponent(() => import('../dialog/SmbConfigDialog.vue'))
+const StorageCustomConfigDialog = defineAsyncComponent(() => import('../dialog/StorageCustomConfigDialog.vue'))
 
 // 国际化
 const { t } = useI18n()
@@ -50,53 +49,34 @@ const used = computed(() => {
   return total.value - available.value
 })
 
-// 存储
-const storage_ref = ref(props.storage)
-
-// 自定义存储名称
-const customName = ref(props.storage.name)
-
-// 自定义存储类型
-const storageType = ref(props.storage.type)
-
-// 阿里云盘认证对话框
-const aliyunAuthDialog = ref(false)
-// 115网盘认证对话框
-const u115AuthDialog = ref(false)
-// Rclone配置对话框
-const rcloneConfigDialog = ref(false)
-// AList配置对话框
-const aListConfigDialog = ref(false)
-// SMB配置对话框
-const smbConfigDialog = ref(false)
-// 自定义存储配置对话框
-const customConfigDialog = ref(false)
-
-// 打开存储对话框
+/** 打开指定类型的共享存储配置弹窗。 */
 function openStorageDialog() {
-  switch (props.storage.type) {
-    case 'alipan':
-      aliyunAuthDialog.value = true
-      break
-    case 'u115':
-      u115AuthDialog.value = true
-      break
-    case 'rclone':
-      rcloneConfigDialog.value = true
-      break
-    case 'alist':
-      aListConfigDialog.value = true
-      break
-    case 'smb':
-      smbConfigDialog.value = true
-      break
-    case 'local':
-      $toast.info(t('storage.noConfigNeeded'))
-      break
-    default:
-      customConfigDialog.value = true
-      break
+  const dialogMap: Record<string, Component> = {
+    alipan: AliyunAuthDialog,
+    u115: U115AuthDialog,
+    rclone: RcloneConfigDialog,
+    alist: AlistConfigDialog,
+    smb: SmbConfigDialog,
   }
+
+  if (props.storage.type === 'local') {
+    $toast.info(t('storage.noConfigNeeded'))
+    return
+  }
+
+  const dialog = dialogMap[props.storage.type] || StorageCustomConfigDialog
+  const dialogProps = dialog === StorageCustomConfigDialog
+    ? { storage: props.storage }
+    : { conf: props.storage.config || {} }
+
+  openSharedDialog(
+    dialog,
+    dialogProps,
+    {
+      done: handleDone,
+    },
+    { closeOn: ['close', 'done', 'update:modelValue'] },
+  )
 }
 
 // 根据存储类型选择图标
@@ -135,7 +115,7 @@ const usage = computed(() => {
   return Math.round((used.value / (total.value || 1)) * 1000) / 10
 })
 
-// 查询存储信息
+/** 查询存储空间使用信息。 */
 async function queryStorage() {
   try {
     const data: { total: number; available: number } = await api.get(`storage/usage/${props.storage.type}`)
@@ -146,123 +126,34 @@ async function queryStorage() {
   }
 }
 
-// 完成配置后的处理
-function handleDone() {
-  aliyunAuthDialog.value = false
-  u115AuthDialog.value = false
-  rcloneConfigDialog.value = false
-  aListConfigDialog.value = false
-  smbConfigDialog.value = false
-  customConfigDialog.value = false
-  // 更新存储
-  storage_ref.value.name = customName.value
-  storage_ref.value.type = storageType.value
-  emit('done', storage_ref.value)
+/** 完成配置后的处理并通知父级刷新。 */
+function handleDone(storage?: StorageConf) {
+  emit('done', storage || props.storage)
 }
 
 onMounted(() => {
   queryStorage()
 })
 
-// 关闭
+/** 关闭存储卡片。 */
 function onClose() {
   emit('close')
 }
 </script>
+
 <template>
-  <div>
-    <VCard variant="tonal" @click="openStorageDialog">
-      <VDialogCloseBtn @click="onClose" class="absolute top-1 right-1" />
-      <VCardText class="flex justify-space-between align-center gap-3">
-        <div class="align-self-start flex-1">
-          <h5 class="text-h6 mb-1">{{ storage.name }}</h5>
-          <div class="mb-3 text-sm" v-if="total">{{ formatBytes(used, 1) }} / {{ formatBytes(total, 1) }}</div>
-          <div v-else-if="isNullOrEmptyObject(storage.config)">{{ t('storage.notConfigured') }}</div>
-        </div>
-        <VImg :src="getIcon" cover class="mt-8" max-width="3rem" min-width="3rem" />
-      </VCardText>
-      <div class="w-full absolute bottom-0">
-        <VProgressLinear v-if="usage > 0" :model-value="usage" :bg-color="progressColor" :color="progressColor" />
+  <VCard variant="tonal" @click="openStorageDialog">
+    <VDialogCloseBtn @click="onClose" class="absolute top-1 right-1" />
+    <VCardText class="flex justify-space-between align-center gap-3">
+      <div class="align-self-start flex-1">
+        <h5 class="text-h6 mb-1">{{ storage.name }}</h5>
+        <div class="mb-3 text-sm" v-if="total">{{ formatBytes(used, 1) }} / {{ formatBytes(total, 1) }}</div>
+        <div v-else-if="isNullOrEmptyObject(storage.config)">{{ t('storage.notConfigured') }}</div>
       </div>
-    </VCard>
-    <AliyunAuthDialog
-      v-if="aliyunAuthDialog"
-      v-model="aliyunAuthDialog"
-      :conf="props.storage.config || {}"
-      @close="aliyunAuthDialog = false"
-      @done="handleDone"
-    />
-    <U115AuthDialog
-      v-if="u115AuthDialog"
-      v-model="u115AuthDialog"
-      :conf="props.storage.config || {}"
-      @close="u115AuthDialog = false"
-      @done="handleDone"
-    />
-    <RcloneConfigDialog
-      v-if="rcloneConfigDialog"
-      v-model="rcloneConfigDialog"
-      :conf="props.storage.config || {}"
-      @close="rcloneConfigDialog = false"
-      @done="handleDone"
-    />
-    <AlistConfigDialog
-      v-if="aListConfigDialog"
-      v-model="aListConfigDialog"
-      :conf="props.storage.config || {}"
-      @close="aListConfigDialog = false"
-      @done="handleDone"
-    />
-    <SmbConfigDialog
-      v-if="smbConfigDialog"
-      v-model="smbConfigDialog"
-      :conf="props.storage.config || {}"
-      @close="smbConfigDialog = false"
-      @done="handleDone"
-    />
-    <VDialog
-      v-if="customConfigDialog"
-      v-model="customConfigDialog"
-      scrollable
-      max-width="30rem"
-      :fullscreen="!display.mdAndUp.value"
-    >
-      <VCard>
-        <VCardItem>
-          <template #prepend>
-            <VIcon icon="mdi-cog" />
-          </template>
-          <VCardTitle>{{ t('storage.custom') }}</VCardTitle>
-          <VDialogCloseBtn v-model="customConfigDialog" />
-        </VCardItem>
-        <VDivider />
-        <VCardText>
-          <VRow>
-            <VCol cols="12" md="6">
-              <VTextField
-                v-model="storageType"
-                :label="t('storage.type')"
-                :hint="t('storage.customTypeHint')"
-                persistent-hint
-                prepend-inner-icon="mdi-database"
-              />
-            </VCol>
-            <VCol cols="12" md="6">
-              <VTextField
-                v-model="customName"
-                :label="t('storage.name')"
-                persistent-hint
-                prepend-inner-icon="mdi-label"
-              />
-            </VCol>
-          </VRow>
-        </VCardText>
-        <VCardActions class="pt-3">
-          <VBtn @click="handleDone" prepend-icon="mdi-content-save" class="px-5">
-            {{ t('common.save') }}
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-  </div>
+      <VImg :src="getIcon" cover class="mt-8" max-width="3rem" min-width="3rem" />
+    </VCardText>
+    <div class="w-full absolute bottom-0">
+      <VProgressLinear v-if="usage > 0" :model-value="usage" :bg-color="progressColor" :color="progressColor" />
+    </div>
+  </VCard>
 </template>

src/components/cards/SubscribeCard.vue

@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toastification'
 import { useConfirm } from '@/composables/useConfirm'
-import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
-import SubscribeFilesDialog from '../dialog/SubscribeFilesDialog.vue'
-import SubscribeShareDialog from '../dialog/SubscribeShareDialog.vue'
 import { formatDateDifference, formatSeason } from '@/@core/utils/formatters'
 import api from '@/api'
 import type { Subscribe } from '@/api/types'
@@ -11,6 +8,11 @@ import router from '@/router'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
 import { useGlobalSettingsStore } from '@/stores'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const SubscribeEditDialog = defineAsyncComponent(() => import('../dialog/SubscribeEditDialog.vue'))
+const SubscribeFilesDialog = defineAsyncComponent(() => import('../dialog/SubscribeFilesDialog.vue'))
+const SubscribeShareDialog = defineAsyncComponent(() => import('../dialog/SubscribeShareDialog.vue'))
 
 // 显示器宽度
 const display = useDisplay()
@@ -52,15 +54,6 @@ const $toast = useToast()
 // 图片是否加载完成
 const imageLoaded = ref(false)
 
-// 订阅弹窗
-const subscribeEditDialog = ref(false)
-
-// 订阅文件信息弹窗
-const subscribeFilesDialog = ref(false)
-
-// 分享订阅弹窗
-const subscribeShareDialog = ref(false)
-
 // 当前的订阅状态
 const subscribeState = ref<string>(props.media?.state ?? 'P')
 
@@ -176,12 +169,22 @@ async function resetSubscribe() {
 
 //  分享订阅
 async function shareSubscribe() {
-  subscribeShareDialog.value = true
+  if (!props.media) return
+
+  openSharedDialog(SubscribeShareDialog, { sub: props.media }, {}, { closeOn: ['close'] })
 }
 
 // 编辑订阅响应
 async function editSubscribeDialog() {
-  subscribeEditDialog.value = true
+  openSharedDialog(
+    SubscribeEditDialog,
+    { subid: props.media?.id },
+    {
+      remove: onSubscribeEditRemove,
+      save: onSubscribeEditSave,
+    },
+    { closeOn: ['close', 'save', 'remove'] },
+  )
 }
 
 // 获得mediaid
@@ -207,7 +210,7 @@ async function viewMediaDetail() {
 
 // 查看文件详情
 async function viewSubscribeFiles() {
-  subscribeFilesDialog.value = true
+  openSharedDialog(SubscribeFilesDialog, { subid: props.media?.id }, {}, { closeOn: ['close'] })
 }
 
 // 弹出菜单
@@ -320,13 +323,11 @@ const posterUrl = computed(() => {
 
 // 订阅编辑保存
 function onSubscribeEditSave() {
-  subscribeEditDialog.value = false
   emit('save')
 }
 
 // 订阅编辑取消
 function onSubscribeEditRemove() {
-  subscribeEditDialog.value = false
   emit('remove')
 }
 
@@ -484,30 +485,6 @@ function handleCardClick() {
         </div>
       </template>
     </VHover>
-    <!-- 订阅编辑弹窗 -->
-    <SubscribeEditDialog
-      v-if="subscribeEditDialog"
-      v-model="subscribeEditDialog"
-      :subid="props.media?.id"
-      @remove="onSubscribeEditRemove"
-      @save="onSubscribeEditSave"
-      @close="subscribeEditDialog = false"
-    />
-
-    <!-- 订阅文件信息弹窗 -->
-    <SubscribeFilesDialog
-      v-if="subscribeFilesDialog"
-      v-model="subscribeFilesDialog"
-      :subid="props.media?.id"
-      @close="subscribeFilesDialog = false"
-    />
-    <!-- 分享订阅弹窗 -->
-    <SubscribeShareDialog
-      v-if="subscribeShareDialog"
-      v-model="subscribeShareDialog"
-      :sub="props.media"
-      @close="subscribeShareDialog = false"
-    />
   </div>
 </template>
 <style lang="scss" scoped>

src/components/cards/SubscribeShareCard.vue

@@ -2,9 +2,11 @@
 import { formatDateDifference } from '@/@core/utils/formatters'
 import type { SubscribeShare } from '@/api/types'
 import router from '@/router'
-import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
-import ForkSubscribeDialog from '../dialog/ForkSubscribeDialog.vue'
 import { useGlobalSettingsStore } from '@/stores'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const ForkSubscribeDialog = defineAsyncComponent(() => import('../dialog/ForkSubscribeDialog.vue'))
+const SubscribeEditDialog = defineAsyncComponent(() => import('../dialog/SubscribeEditDialog.vue'))
 
 // 输入参数
 const props = defineProps({
@@ -22,15 +24,6 @@ const globalSettings = globalSettingsStore.globalSettings
 // 图片是否加载完成
 const imageLoaded = ref(false)
 
-// 订阅编辑弹窗
-const subscribeEditDialog = ref(false)
-
-// 复用订阅弹窗
-const forkSubscribeDialog = ref(false)
-
-// 订阅ID
-const subscribeId = ref<number>()
-
 // 图片加载完成响应
 function imageLoadHandler() {
   imageLoaded.value = true
@@ -78,19 +71,24 @@ async function viewMediaDetail() {
 
 // 复用订阅
 function showForkSubscribe() {
-  forkSubscribeDialog.value = true
+  openSharedDialog(
+    ForkSubscribeDialog,
+    { media: props.media },
+    {
+      fork: finishForkSubscribe,
+      delete: doDelete,
+    },
+    { closeOn: ['close', 'fork', 'delete'] },
+  )
 }
 
 // 完成复用订阅
 function finishForkSubscribe(subid: number) {
-  subscribeId.value = subid
-  forkSubscribeDialog.value = false
-  subscribeEditDialog.value = true
+  openSharedDialog(SubscribeEditDialog, { subid }, {}, { closeOn: ['close', 'save', 'remove'] })
 }
 
 // 删除订阅分享时处理
 function doDelete() {
-  forkSubscribeDialog.value = false
   // 通知父组件刷新
   emit('delete')
 }
@@ -167,24 +165,6 @@ function doDelete() {
         </div>
       </template>
     </VHover>
-    <!-- 订阅编辑弹窗 -->
-    <SubscribeEditDialog
-      v-if="subscribeEditDialog"
-      v-model="subscribeEditDialog"
-      :subid="subscribeId"
-      @close="subscribeEditDialog = false"
-      @save="subscribeEditDialog = false"
-      @remove="subscribeEditDialog = false"
-    />
-    <!-- 复用订阅弹窗 -->
-    <ForkSubscribeDialog
-      v-if="forkSubscribeDialog"
-      v-model="forkSubscribeDialog"
-      :media="props.media"
-      @close="forkSubscribeDialog = false"
-      @fork="finishForkSubscribe"
-      @delete="doDelete"
-    />
   </div>
 </template>
 <style lang="scss" scoped>

src/components/cards/TorrentCard.vue

@@ -3,10 +3,13 @@ import type { PropType } from 'vue'
 import { formatFileSize, formatDateDifference } from '@/@core/utils/formatters'
 import api from '@/api'
 import type { Context } from '@/api/types'
-import AddDownloadDialog from '../dialog/AddDownloadDialog.vue'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { getCachedSiteIcon } from '@/utils/siteIconCache'
 import { downloadedTorrentMap, markTorrentDownloaded } from '@/utils/torrentDownloadCache'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const AddDownloadDialog = defineAsyncComponent(() => import('../dialog/AddDownloadDialog.vue'))
+const TorrentMoreSourcesDialog = defineAsyncComponent(() => import('../dialog/TorrentMoreSourcesDialog.vue'))
 
 // 输入参数
 const props = defineProps({
@@ -16,9 +19,6 @@ const props = defineProps({
   height: String,
 })
 
-// 更多来源界面
-const showMoreTorrents = ref(false)
-
 // 种子信息
 const torrent = ref(props.torrent?.torrent_info)
 
@@ -36,18 +36,14 @@ const siteIcons = ref<Record<number, string>>({})
 
 const isDownloaded = computed(() => Boolean(torrent.value?.enclosure && downloadedTorrentMap[torrent.value.enclosure]))
 
-// 添加下载对话框
-const addDownloadDialog = ref(false)
-
 // 添加下载成功
 function addDownloadSuccess(url: string) {
-  addDownloadDialog.value = false
   markTorrentDownloaded(url)
 }
 
 // 添加下载失败
 function addDownloadError(error: string) {
-  addDownloadDialog.value = false
+  console.error(error)
 }
 
 // 查询站点图标
@@ -77,7 +73,21 @@ async function handleAddDownload(item: Context | null = null) {
     downloadItem.value = item
   }
   // 打开下载对话框
-  addDownloadDialog.value = true
+  openSharedDialog(
+    AddDownloadDialog,
+    {
+      title: `${downloadItem.value?.media_info?.title_year || downloadItem.value?.meta_info?.name} ${
+        downloadItem.value?.meta_info?.season_episode
+      }`,
+      media: downloadItem.value?.media_info,
+      torrent: downloadItem.value?.torrent_info,
+    },
+    {
+      done: addDownloadSuccess,
+      error: addDownloadError,
+    },
+    { closeOn: ['close', 'done', 'error'] },
+  )
 }
 
 // 打开种子详情页面
@@ -103,21 +113,23 @@ function getPromotionClass(downloadVolumeFactor: number | undefined, uploadVolum
   else return ''
 }
 
-// 获取优惠标签类
-function getPromotionChipClass(downloadVolumeFactor: number | undefined, uploadVolumeFactor: number | undefined) {
-  if (!downloadVolumeFactor) return 'chip-free'
-  if (downloadVolumeFactor === 0) return 'chip-free'
-  else if (downloadVolumeFactor < 1) return 'chip-discount'
-  else if (uploadVolumeFactor !== undefined && uploadVolumeFactor > 1) return 'chip-bonus'
-  else return ''
-}
-
 // 打开更多来源对话框
 async function openMoreTorrentsDialog() {
   props.more?.forEach(t => {
     return getSiteIcon(t.torrent_info?.site)
   })
-  showMoreTorrents.value = true
+  openSharedDialog(
+    TorrentMoreSourcesDialog,
+    {
+      items: props.more || [],
+      siteIcons: siteIcons.value,
+    },
+    {
+      download: handleAddDownload,
+      detail: openTorrentDetail,
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
 }
 
 watch(
@@ -276,7 +288,7 @@ watch(
             class="pa-1 d-flex align-center"
             @click.stop="openMoreTorrentsDialog"
           >
-            <VIcon :icon="showMoreTorrents ? 'mdi-chevron-up' : 'mdi-chevron-down'" size="small" class="mr-1"></VIcon>
+            <VIcon icon="mdi-chevron-down" size="small" class="mr-1"></VIcon>
             更多来源 ({{ props.more.length }})
           </VBtn>
         </div>
@@ -294,105 +306,6 @@ watch(
         </div>
       </VCardActions>
     </VCard>
-
-    <!-- 更多来源对话框 -->
-    <VDialog v-model="showMoreTorrents" max-width="25rem" location="center">
-      <VCard>
-        <VCardTitle class="py-3 d-flex align-center">
-          <span>其他来源</span>
-          <VSpacer />
-          <VBtn variant="text" size="small" icon="mdi-close" @click.stop="showMoreTorrents = false"></VBtn>
-        </VCardTitle>
-
-        <VDivider />
-
-        <VCardText class="more-sources-content pa-0">
-          <VList lines="one" density="compact">
-            <VListItem
-              v-for="(item, index) in props.more"
-              :key="index"
-              @click.stop="handleAddDownload(item)"
-              class="hover:bg-primary-lighten-5"
-            >
-              <template v-slot:prepend>
-                <div class="d-flex align-center gap-1">
-                  <VImg
-                    v-if="siteIcons[item.torrent_info?.site || 0]"
-                    :src="siteIcons[item.torrent_info?.site || 0]"
-                    :alt="item.torrent_info?.site_name"
-                    width="16"
-                    height="16"
-                    class="rounded"
-                  />
-                  <VAvatar v-else size="16" class="text-caption bg-surface-variant">
-                    {{ item.torrent_info?.site_name?.substring(0, 1) }}
-                  </VAvatar>
-                  <span class="text-body-2 font-weight-bold">{{ item.torrent_info.site_name }}</span>
-
-                  <VChip
-                    v-if="item.meta_info?.season_episode"
-                    class="chip-season rounded-sm ml-1"
-                    size="x-small"
-                    variant="elevated"
-                  >
-                    {{ item.meta_info.season_episode }}
-                  </VChip>
-
-                  <VChip
-                    v-if="item.torrent_info?.downloadvolumefactor !== 1 || item.torrent_info?.uploadvolumefactor !== 1"
-                    :class="
-                      getPromotionChipClass(
-                        item.torrent_info?.downloadvolumefactor,
-                        item.torrent_info?.uploadvolumefactor,
-                      )
-                    "
-                    size="x-small"
-                    variant="elevated"
-                    class="rounded-sm ml-1"
-                  >
-                    {{ item.torrent_info?.volume_factor }}
-                  </VChip>
-                </div>
-              </template>
-
-              <template v-slot:append>
-                <div class="d-flex align-center gap-2">
-                  <span class="text-caption font-weight-bold text-primary">
-                    {{ formatFileSize(item.torrent_info?.size) }}
-                  </span>
-                  <span class="d-flex align-center text-caption font-weight-bold">
-                    <VIcon size="small" color="success" icon="mdi-arrow-up" class="mr-1"></VIcon>
-                    {{ item.torrent_info?.seeders }}
-                  </span>
-                  <span>
-                    <VIcon
-                      @click.stop="openTorrentDetail(item)"
-                      size="small"
-                      color="secondary"
-                      icon="mdi-arrow-top-right"
-                      class="mr-1"
-                    ></VIcon>
-                  </span>
-                </div>
-              </template>
-            </VListItem>
-          </VList>
-        </VCardText>
-      </VCard>
-    </VDialog>
-
-    <AddDownloadDialog
-      v-if="addDownloadDialog"
-      v-model="addDownloadDialog"
-      :title="`${downloadItem?.media_info?.title_year || downloadItem?.meta_info?.name} ${
-        downloadItem?.meta_info?.season_episode
-      }`"
-      :media="downloadItem?.media_info"
-      :torrent="downloadItem?.torrent_info"
-      @done="addDownloadSuccess"
-      @error="addDownloadError"
-      @close="addDownloadDialog = false"
-    />
   </div>
 </template>
 
@@ -403,11 +316,6 @@ watch(
   inset-inline-end: 0;
 }
 
-.more-sources-content {
-  max-block-size: 60vh;
-  overflow-y: auto;
-}
-
 /* 卡片悬停效果 */
 .torrent-card {
   border: 1px solid transparent;

src/components/cards/TorrentItem.vue

@@ -3,9 +3,11 @@ import type { PropType } from 'vue'
 import { formatFileSize, formatDateDifference } from '@/@core/utils/formatters'
 import api from '@/api'
 import type { Context } from '@/api/types'
-import AddDownloadDialog from '../dialog/AddDownloadDialog.vue'
 import { getCachedSiteIcon } from '@/utils/siteIconCache'
 import { downloadedTorrentMap, markTorrentDownloaded } from '@/utils/torrentDownloadCache'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const AddDownloadDialog = defineAsyncComponent(() => import('../dialog/AddDownloadDialog.vue'))
 
 // 输入参数
 const props = defineProps({
@@ -26,9 +28,6 @@ const siteIcon = ref('')
 
 const isDownloaded = computed(() => Boolean(torrent.value?.enclosure && downloadedTorrentMap[torrent.value.enclosure]))
 
-// 添加下载对话框
-const addDownloadDialog = ref(false)
-
 // 查询站点图标
 async function getSiteIcon() {
   if (!torrent?.value?.site) {
@@ -73,18 +72,29 @@ function getPromotionChipClass(downloadVolumeFactor: number | undefined, uploadV
 // 询问并添加下载
 async function handleAddDownload() {
   // 打开下载对话框
-  addDownloadDialog.value = true
+  openSharedDialog(
+    AddDownloadDialog,
+    {
+      title: `${media.value?.title_year || meta.value?.name} ${meta.value?.season_episode || ''}`,
+      media: media.value,
+      torrent: torrent.value,
+    },
+    {
+      done: addDownloadSuccess,
+      error: addDownloadError,
+    },
+    { closeOn: ['close', 'done', 'error'] },
+  )
 }
 
 // 添加下载成功
 function addDownloadSuccess(url: string) {
-  addDownloadDialog.value = false
   markTorrentDownloaded(url)
 }
 
 // 添加下载失败
 function addDownloadError(error: string) {
-  addDownloadDialog.value = false
+  console.error(error)
 }
 
 // 打开种子详情页面
@@ -241,17 +251,6 @@ watch(
         </div>
       </template>
     </VListItem>
-
-    <AddDownloadDialog
-      v-if="addDownloadDialog"
-      v-model="addDownloadDialog"
-      :title="`${media?.title_year || meta?.name} ${meta?.season_episode || ''}`"
-      :media="media"
-      :torrent="torrent"
-      @done="addDownloadSuccess"
-      @error="addDownloadError"
-      @close="addDownloadDialog = false"
-    />
   </div>
 </template>
 

src/components/cards/UserCard.vue

@@ -5,9 +5,11 @@ import { useUserStore } from '@/stores'
 import avatar1 from '@images/avatars/avatar-1.png'
 import { useToast } from 'vue-toastification'
 import { useConfirm } from '@/composables/useConfirm'
-import UserAddEditDialog from '@/components/dialog/UserAddEditDialog.vue'
 import { useDisplay } from 'vuetify'
 import { useI18n } from 'vue-i18n'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const UserAddEditDialog = defineAsyncComponent(() => import('@/components/dialog/UserAddEditDialog.vue'))
 
 // 国际化
 const { t } = useI18n()
@@ -46,9 +48,6 @@ const emit = defineEmits(['remove', 'save'])
 // 确认框
 const createConfirm = useConfirm()
 
-// 用户信息弹窗
-const userEditDialog = ref(false)
-
 // 提示框
 const $toast = useToast()
 
@@ -104,12 +103,22 @@ async function removeUser() {
 
 // 编辑用户
 function editUser() {
-  userEditDialog.value = true
+  openSharedDialog(
+    UserAddEditDialog,
+    {
+      username: props.user?.name,
+      usernames: props.users.map(item => item.name),
+      oper: 'edit',
+    },
+    {
+      save: onUserUpdate,
+    },
+    { closeOn: ['close', 'save'] },
+  )
 }
 
 // 用户更新完成时
 function onUserUpdate() {
-  userEditDialog.value = false
   emit('save')
 }
 
@@ -124,7 +133,7 @@ onMounted(() => {
       !props.user.is_active ? 'opacity-85 bg-surface-lighten-1' : '',
     ]"
     class="user-card flex flex-column h-full"
-    @click="userEditDialog = true"
+    @click="editUser"
   >
     <div class="user-card__body flex-grow flex-grow-1">
       <!-- 用户头像和基本信息 -->
@@ -294,17 +303,6 @@ onMounted(() => {
       </VCardText>
     </div>
   </VCard>
-
-  <!-- 用户编辑弹窗 -->
-  <UserAddEditDialog
-    v-if="userEditDialog"
-    v-model="userEditDialog"
-    :username="props.user?.name"
-    :usernames="props.users.map(item => item.name)"
-    oper="edit"
-    @save="onUserUpdate"
-    @close="userEditDialog = false"
-  />
 </template>
 
 <style scoped>

src/components/cards/WorkflowShareCard.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { formatDateDifference } from '@/@core/utils/formatters'
 import type { WorkflowShare } from '@/api/types'
-import ForkWorkflowDialog from '../dialog/ForkWorkflowDialog.vue'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const ForkWorkflowDialog = defineAsyncComponent(() => import('../dialog/ForkWorkflowDialog.vue'))
 
 // 输入参数
 const props = defineProps({
@@ -15,9 +17,6 @@ const props = defineProps({
 // 定义删除事件
 const emit = defineEmits(['delete', 'update'])
 
-// 复用工作流弹窗
-const forkWorkflowDialog = ref(false)
-
 // 工作流ID
 const workflowId = ref<string>()
 
@@ -65,19 +64,28 @@ onMounted(() => {
 
 // 复用工作流
 function showForkWorkflow() {
-  forkWorkflowDialog.value = true
+  openSharedDialog(
+    ForkWorkflowDialog,
+    {
+      workflow: props.workflow,
+      eventTypes: props.eventTypes,
+    },
+    {
+      fork: finishForkWorkflow,
+      delete: doDelete,
+    },
+    { closeOn: ['close', 'fork', 'delete'] },
+  )
 }
 
 // 完成复用工作流
 function finishForkWorkflow(wid: string) {
   workflowId.value = wid
-  forkWorkflowDialog.value = false
   emit('update')
 }
 
 // 删除工作流分享时处理
 function doDelete() {
-  forkWorkflowDialog.value = false
   // 通知父组件刷新
   emit('delete')
 }
@@ -134,15 +142,5 @@ function doDelete() {
         </div>
       </template>
     </VHover>
-    <!-- 复用工作流弹窗 -->
-    <ForkWorkflowDialog
-      v-if="forkWorkflowDialog"
-      v-model="forkWorkflowDialog"
-      :workflow="props.workflow"
-      :event-types="props.eventTypes"
-      @close="forkWorkflowDialog = false"
-      @fork="finishForkWorkflow"
-      @delete="doDelete"
-    />
   </div>
 </template>

src/components/cards/WorkflowTaskCard.vue

@@ -2,11 +2,13 @@
 import { Workflow } from '@/api/types'
 import { useToast } from 'vue-toastification'
 import { useConfirm } from '@/composables/useConfirm'
-import WorkflowAddEditDialog from '@/components/dialog/WorkflowAddEditDialog.vue'
-import WorkflowActionsDialog from '@/components/dialog/WorkflowActionsDialog.vue'
-import WorkflowShareDialog from '@/components/dialog/WorkflowShareDialog.vue'
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const WorkflowActionsDialog = defineAsyncComponent(() => import('@/components/dialog/WorkflowActionsDialog.vue'))
+const WorkflowAddEditDialog = defineAsyncComponent(() => import('@/components/dialog/WorkflowAddEditDialog.vue'))
+const WorkflowShareDialog = defineAsyncComponent(() => import('@/components/dialog/WorkflowShareDialog.vue'))
 
 const { t } = useI18n()
 
@@ -31,15 +33,6 @@ const $toast = useToast()
 // 确认框
 const createConfirm = useConfirm()
 
-// 编辑对话框
-const editDialog = ref(false)
-
-// 流程对话框
-const flowDialog = ref(false)
-
-// 分享对话框
-const shareDialog = ref(false)
-
 // 加载中
 const loading = ref(false)
 
@@ -51,24 +44,35 @@ const getEventTypeText = (eventTypeValue: string) => {
 
 // 编辑任务
 function handleEdit(item: Workflow) {
-  editDialog.value = true
+  openSharedDialog(
+    WorkflowAddEditDialog,
+    { workflow: item },
+    {
+      save: editDone,
+    },
+    { closeOn: ['close', 'save'] },
+  )
 }
 
 // 编辑流程
 function handleFlow(item: Workflow) {
-  flowDialog.value = true
+  openSharedDialog(
+    WorkflowActionsDialog,
+    { workflow: item },
+    {
+      save: editDone,
+    },
+    { closeOn: ['close', 'save'] },
+  )
 }
 
 // 分享工作流
 function handleShare(item: Workflow) {
-  shareDialog.value = true
+  openSharedDialog(WorkflowShareDialog, { workflow: item }, {}, { closeOn: ['close'] })
 }
 
 // 编辑完成
 function editDone() {
-  editDialog.value = false
-  flowDialog.value = false
-  shareDialog.value = false
   emit('refresh')
 }
 
@@ -365,23 +369,5 @@ const resolveProgress = (item: Workflow) => {
         </VCardText>
       </VCard>
     </VHover>
-    <!-- 流程对话框 -->
-    <WorkflowActionsDialog
-      v-if="flowDialog"
-      v-model="flowDialog"
-      @close="flowDialog = false"
-      @save="editDone"
-      :workflow="workflow"
-    />
-    <!-- 编辑对话框 -->
-    <WorkflowAddEditDialog
-      v-if="editDialog"
-      v-model="editDialog"
-      @close="editDialog = false"
-      @save="editDone"
-      :workflow="workflow"
-    />
-    <!-- 分享对话框 -->
-    <WorkflowShareDialog v-if="shareDialog" v-model="shareDialog" :workflow="workflow" @close="shareDialog = false" />
   </div>
 </template>

src/components/dialog/CacheReidentifyDialog.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = withDefaults(
+  defineProps<{
+    itemTitle?: string
+    loading?: boolean
+    modelValue?: boolean
+    recognizeSource?: string
+  }>(),
+  {
+    itemTitle: '',
+    loading: false,
+    modelValue: true,
+    recognizeSource: '',
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'confirm', payload: { doubanId?: string; tmdbId?: number }): void
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const tmdbId = ref<number | undefined>()
+const doubanId = ref<string | undefined>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+// 提交重新识别参数给缓存页执行接口调用。
+function submitReidentify() {
+  emit('confirm', {
+    doubanId: doubanId.value,
+    tmdbId: tmdbId.value,
+  })
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" scrollable max-width="35rem">
+    <VCard>
+      <VCardItem class="py-2">
+        <template #prepend>
+          <VIcon>mdi-text-recognition</VIcon>
+        </template>
+        <VCardTitle>{{ t('setting.cache.reidentifyDialog.title') }}</VCardTitle>
+        <VCardSubtitle>{{ props.itemTitle }}</VCardSubtitle>
+      </VCardItem>
+      <VDialogCloseBtn v-model="visible" />
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VTextField
+              v-if="props.recognizeSource === 'themoviedb'"
+              v-model="tmdbId"
+              :label="t('setting.cache.reidentifyDialog.tmdbId')"
+              :hint="t('setting.cache.reidentifyDialog.tmdbIdHint')"
+              clearable
+              prepend-inner-icon="mdi-id-card"
+              persistent-hint
+            />
+            <VTextField
+              v-else
+              v-model="doubanId"
+              :label="t('setting.cache.reidentifyDialog.doubanId')"
+              :hint="t('setting.cache.reidentifyDialog.doubanIdHint')"
+              clearable
+              prepend-inner-icon="mdi-id-card"
+              persistent-hint
+            />
+          </VCol>
+        </VRow>
+        <VAlert type="info" variant="tonal" class="mt-4">
+          {{ t('setting.cache.reidentifyDialog.autoHint') }}
+        </VAlert>
+      </VCardText>
+
+      <VCardActions>
+        <VSpacer />
+        <VBtn color="primary" :loading="props.loading" prepend-icon="mdi-check" @click="submitReidentify">
+          {{ t('setting.cache.reidentifyDialog.confirm') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/ContentToggleSettingsDialog.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { useDisplay } from 'vuetify'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const display = useDisplay()
+
+type UnknownRecord = Record<string, any>
+
+const props = withDefaults(
+  defineProps<{
+    colors?: Record<string, string>
+    enabled: Record<string, boolean>
+    elevated?: boolean
+    hint: string
+    items: UnknownRecord[]
+    labelGetter?: (item: UnknownRecord) => string
+    modelValue?: boolean
+    selectAllText?: string
+    selectNoneText?: string
+    showBulkActions?: boolean
+    switchLabel?: string
+    title: string
+    valueGetter?: (item: UnknownRecord) => string
+  }>(),
+  {
+    colors: () => ({}),
+    elevated: false,
+    labelGetter: undefined,
+    modelValue: true,
+    selectAllText: '',
+    selectNoneText: '',
+    showBulkActions: false,
+    switchLabel: '',
+    valueGetter: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'save', payload: { elevated: boolean; enabled: Record<string, boolean> }): void
+  (event: 'update:elevated', value: boolean): void
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const localEnabled = ref<Record<string, boolean>>({})
+const localElevated = ref(props.elevated)
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+const elevatedValue = computed({
+  get: () => localElevated.value,
+  set: value => {
+    localElevated.value = value
+    emit('update:elevated', value)
+  },
+})
+
+watch(
+  () => [props.enabled, props.elevated, props.items],
+  () => {
+    resetLocalSettings()
+  },
+  { deep: true, immediate: true },
+)
+
+// 重置弹窗内部设置副本，避免直接修改父级 props。
+function resetLocalSettings() {
+  localEnabled.value = { ...props.enabled }
+  localElevated.value = props.elevated
+}
+
+// 获取设置项的稳定键值。
+function getItemValue(item: UnknownRecord) {
+  return props.valueGetter?.(item) ?? String(item.id ?? item.title ?? item.name ?? '')
+}
+
+// 获取设置项展示名称。
+function getItemLabel(item: UnknownRecord) {
+  return props.labelGetter?.(item) ?? String(item.attrs?.title ?? item.name ?? item.title ?? '')
+}
+
+// 切换单个设置项的启用状态。
+function toggleItem(item: UnknownRecord) {
+  const key = getItemValue(item)
+  localEnabled.value[key] = !localEnabled.value[key]
+}
+
+// 批量设置所有项目启用状态。
+function setAllItems(value: boolean) {
+  props.items.forEach(item => {
+    localEnabled.value[getItemValue(item)] = value
+  })
+}
+
+// 提交通用内容开关设置。
+function submitSettings() {
+  emit('save', {
+    elevated: localElevated.value,
+    enabled: { ...localEnabled.value },
+  })
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" width="35rem" class="settings-dialog" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard class="settings-card">
+      <VCardItem class="settings-card-header">
+        <VCardTitle>
+          <VIcon icon="mdi-tune" size="small" class="me-2" />
+          {{ props.title }}
+        </VCardTitle>
+        <VDialogCloseBtn v-model="visible" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <p class="settings-hint">{{ props.hint }}</p>
+        <div class="settings-grid">
+          <div
+            v-for="item in props.items"
+            :key="getItemValue(item)"
+            class="setting-item"
+            :class="{ 'enabled': localEnabled[getItemValue(item)] }"
+            :style="{ '--item-color': props.colors[getItemValue(item)] }"
+            @click="toggleItem(item)"
+          >
+            <div class="setting-item-inner">
+              <div class="setting-check">
+                <VIcon
+                  :icon="localEnabled[getItemValue(item)] ? 'mdi-check-circle' : 'mdi-circle-outline'"
+                  :color="localEnabled[getItemValue(item)] ? 'primary' : undefined"
+                  size="small"
+                />
+              </div>
+              <span class="setting-label">{{ getItemLabel(item) }}</span>
+            </div>
+          </div>
+        </div>
+        <p v-if="props.switchLabel" class="mt-3">
+          <VSwitch v-model="elevatedValue" :label="props.switchLabel" />
+        </p>
+      </VCardText>
+      <VCardActions class="pt-3">
+        <VBtn v-if="props.showBulkActions" variant="text" @click="setAllItems(true)">
+          {{ props.selectAllText }}
+        </VBtn>
+        <VBtn v-if="props.showBulkActions" variant="text" @click="setAllItems(false)">
+          {{ props.selectNoneText }}
+        </VBtn>
+        <VSpacer />
+        <VBtn color="primary" class="px-5" @click="submitSettings">
+          <template #prepend>
+            <VIcon icon="mdi-content-save" />
+          </template>
+          {{ t('common.save') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped>
+.settings-card-header {
+  padding-block: 16px;
+  padding-inline: 20px;
+}
+
+.settings-hint {
+  color: rgba(var(--v-theme-on-surface), 0.7);
+  font-size: 0.9rem;
+  margin-block-end: 16px;
+}
+
+.settings-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+}
+
+.setting-label {
+  flex: 1;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  font-size: 0.9rem;
+  font-weight: 500;
+  line-height: 1.2;
+  transition: color 0.2s ease;
+}
+
+.setting-item {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 8px;
+  background-color: rgba(var(--v-theme-surface-variant), 0.3);
+  cursor: pointer;
+  padding-block: 10px;
+  padding-inline: 12px;
+  transition: all 0.2s ease;
+}
+
+.setting-item::before {
+  position: absolute;
+  background: linear-gradient(90deg, var(--item-color, rgb(var(--v-theme-primary))) 0%, transparent 100%);
+  content: '';
+  inline-size: 3px;
+  inset-block: 0;
+  inset-inline-start: 0;
+  opacity: 0.3;
+  transition: opacity 0.2s ease;
+}
+
+.setting-item.enabled {
+  border-color: rgba(var(--v-theme-primary), 0.4);
+  background-color: rgba(var(--v-theme-primary), 0.08);
+}
+
+.setting-item.enabled::before {
+  opacity: 1;
+}
+
+.setting-item-inner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.setting-check {
+  display: flex;
+  flex-shrink: 0;
+}
+</style>

src/components/dialog/CustomCssDialog.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { useDisplay } from 'vuetify'
+import { useI18n } from 'vue-i18n'
+
+// 国际化
+const { t } = useI18n()
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = withDefaults(
+  defineProps<{
+    css?: string
+    editorTheme?: string
+    modelValue?: boolean
+  }>(),
+  {
+    css: '',
+    editorTheme: 'monokai',
+    modelValue: true,
+  },
+)
+
+// 定义触发的自定义事件
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'save', css: string): void
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+// 弹窗显示状态
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+// 正在编辑的 CSS 内容
+const editableCSS = ref(props.css)
+
+watch(
+  () => props.css,
+  value => {
+    editableCSS.value = value
+  },
+)
+
+/** 提交当前 CSS 内容给调用方保存。 */
+function submitCustomCSS() {
+  emit('save', editableCSS.value)
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-palette" class="me-2" />
+          {{ t('theme.custom') }}
+        </VCardTitle>
+        <VDialogCloseBtn v-model="visible" />
+      </VCardItem>
+      <VDivider />
+      <VAceEditor v-model:value="editableCSS" lang="css" :theme="props.editorTheme" class="w-full min-h-[30rem]" />
+      <VDivider />
+      <VCardText class="text-center">
+        <VBtn @click="submitCustomCSS" class="w-1/2">
+          <template #prepend>
+            <VIcon icon="mdi-content-save" />
+          </template>
+          {{ t('common.save') }}
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/CustomRuleInfoDialog.vue

@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+import { innerFilterRules } from '@/api/constants'
+import type { CustomRule } from '@/api/types'
+import { cloneDeep } from 'lodash-es'
+import { useToast } from 'vue-toastification'
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  // 单条规则
+  rule: {
+    type: Object as PropType<CustomRule>,
+    required: true,
+  },
+  // 所有规则
+  rules: {
+    type: Array as PropType<CustomRule[]>,
+    required: true,
+  },
+})
+
+// 提示框
+const $toast = useToast()
+const { t } = useI18n()
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close', 'change', 'done'])
+
+// 规则详情弹窗
+const ruleInfoDialog = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+// 规则详情
+const ruleInfo = ref<CustomRule>({
+  id: '',
+  name: '',
+  include: '',
+  exclude: '',
+  size_range: '',
+  seeders: '',
+  publish_time: '',
+})
+
+/** 初始化规则编辑表单数据。 */
+function initializeRuleInfo() {
+  ruleInfo.value = cloneDeep(props.rule)
+}
+
+/** 保存规则编辑结果并通知父级刷新。 */
+function saveRuleInfo() {
+  if (!ruleInfo.value.id || !ruleInfo.value.name) {
+    if (!ruleInfo.value.id && !ruleInfo.value.name) {
+      $toast.error(t('customRule.error.emptyIdName'))
+    }
+    return
+  }
+  if (innerFilterRules.find(option => option.value === ruleInfo.value.id)) {
+    $toast.error(t('customRule.error.idOccupied'))
+    return
+  }
+  if (innerFilterRules.find(option => option.title === ruleInfo.value.name)) {
+    $toast.error(t('customRule.error.nameOccupied'))
+    return
+  }
+  if (ruleInfo.value.id !== props.rule.id && props.rules.find(rule => rule.id === ruleInfo.value.id)) {
+    $toast.error(t('customRule.error.idExists', { id: ruleInfo.value.id }))
+    return
+  }
+  if (ruleInfo.value.name !== props.rule.name && props.rules.find(rule => rule.name === ruleInfo.value.name)) {
+    $toast.error(t('customRule.error.nameExists', { name: ruleInfo.value.name }))
+    return
+  }
+  ruleInfoDialog.value = false
+  emit('change', ruleInfo.value, props.rule.id)
+  emit('done')
+}
+
+/** 规范化规则 ID 输入，只保留英文和数字。 */
+function validateRuleId() {
+  ruleInfo.value.id = ruleInfo.value.id.replace(/[^a-zA-Z0-9]/g, '')
+}
+
+onMounted(() => {
+  initializeRuleInfo()
+})
+</script>
+
+<template>
+  <VDialog
+    v-if="ruleInfoDialog"
+    v-model="ruleInfoDialog"
+    scrollable
+    max-width="40rem"
+    :fullscreen="!display.mdAndUp.value"
+  >
+    <VCard>
+      <VCardItem>
+        <template #prepend>
+          <VIcon icon="mdi-filter-outline" class="me-2" />
+        </template>
+        <VCardTitle>{{ t('customRule.title', { id: props.rule.id }) }}</VCardTitle>
+      </VCardItem>
+      <VDialogCloseBtn v-model="ruleInfoDialog" />
+      <VDivider />
+      <VCardText>
+        <VForm>
+          <VRow>
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="ruleInfo.id"
+                :label="t('customRule.field.ruleId')"
+                :placeholder="t('customRule.placeholder.ruleId')"
+                :hint="t('customRule.hint.ruleId')"
+                persistent-hint
+                active
+                prepend-inner-icon="mdi-identifier"
+                @input="validateRuleId"
+              />
+            </VCol>
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="ruleInfo.name"
+                :label="t('customRule.field.ruleName')"
+                :placeholder="t('customRule.placeholder.ruleName')"
+                :hint="t('customRule.hint.ruleName')"
+                persistent-hint
+                active
+                prepend-inner-icon="mdi-label"
+              />
+            </VCol>
+            <VCol cols="12">
+              <VTextField
+                v-model="ruleInfo.include"
+                :label="t('customRule.field.include')"
+                :placeholder="t('customRule.placeholder.include')"
+                :hint="t('customRule.hint.include')"
+                persistent-hint
+                active
+                prepend-inner-icon="mdi-plus-circle"
+              />
+            </VCol>
+            <VCol cols="12">
+              <VTextField
+                v-model="ruleInfo.exclude"
+                :label="t('customRule.field.exclude')"
+                :placeholder="t('customRule.placeholder.exclude')"
+                :hint="t('customRule.hint.exclude')"
+                persistent-hint
+                active
+                prepend-inner-icon="mdi-minus-circle"
+              />
+            </VCol>
+            <VCol cols="6">
+              <VTextField
+                v-model="ruleInfo.size_range"
+                :label="t('customRule.field.sizeRange')"
+                :placeholder="t('customRule.placeholder.sizeRange')"
+                :hint="t('customRule.hint.sizeRange')"
+                persistent-hint
+                active
+                prepend-inner-icon="mdi-harddisk"
+              />
+            </VCol>
+            <VCol cols="6">
+              <VTextField
+                v-model="ruleInfo.seeders"
+                :label="t('customRule.field.seeders')"
+                :placeholder="t('customRule.placeholder.seeders')"
+                :hint="t('customRule.hint.seeders')"
+                persistent-hint
+                active
+                prepend-inner-icon="mdi-account-group"
+              />
+            </VCol>
+            <VCol cols="6">
+              <VTextField
+                v-model="ruleInfo.publish_time"
+                :label="t('customRule.field.publishTime')"
+                :placeholder="t('customRule.placeholder.publishTime')"
+                :hint="t('customRule.hint.publishTime')"
+                persistent-hint
+                active
+                prepend-inner-icon="mdi-calendar-clock"
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+      <VCardActions class="pt-3">
+        <VBtn @click="saveRuleInfo" prepend-icon="mdi-content-save" class="px-5">
+          {{ t('customRule.action.confirm') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/DiscoverTabOrderDialog.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import draggable from 'vuedraggable'
+import type { DiscoverSource } from '@/api/types'
+import { useDisplay } from 'vuetify'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const display = useDisplay()
+
+const props = withDefaults(
+  defineProps<{
+    colors?: Record<string, string>
+    modelValue?: boolean
+    tabs: DiscoverSource[]
+  }>(),
+  {
+    colors: () => ({}),
+    modelValue: true,
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'save', tabs: DiscoverSource[]): void
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const localTabs = ref<DiscoverSource[]>([])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+watch(
+  () => props.tabs,
+  () => {
+    resetLocalTabs()
+  },
+  { deep: true, immediate: true },
+)
+
+// 重置弹窗内部排序副本。
+function resetLocalTabs() {
+  localTabs.value = props.tabs.map(item => ({ ...item }))
+}
+
+// 保存当前拖拽后的发现标签顺序。
+function submitOrder() {
+  emit('save', localTabs.value)
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="35rem" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-order-alphabetical-ascending" size="small" class="me-2" />
+          {{ t('discover.setTabOrder') }}
+        </VCardTitle>
+        <VDialogCloseBtn v-model="visible" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <p class="settings-hint">{{ t('discover.dragToReorder') }}</p>
+        <draggable
+          v-model="localTabs"
+          handle=".cursor-move"
+          item-key="mediaid_prefix"
+          tag="div"
+          :component-data="{ 'class': 'settings-grid' }"
+        >
+          <template #item="{ element }">
+            <VCard
+              variant="text"
+              class="setting-item enabled"
+              :style="{ '--item-color': props.colors[element.mediaid_prefix] }"
+            >
+              <div class="setting-item-inner">
+                <span class="setting-label">{{ element.name }}</span>
+                <VIcon icon="mdi-drag" class="drag-icon cursor-move" />
+              </div>
+            </VCard>
+          </template>
+        </draggable>
+      </VCardText>
+      <VCardActions class="pt-3">
+        <VSpacer />
+        <VBtn @click="submitOrder">
+          <template #prepend>
+            <VIcon icon="mdi-content-save" />
+          </template>
+          {{ t('common.save') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped>
+.settings-hint {
+  color: rgba(var(--v-theme-on-surface), 0.7);
+  font-size: 0.9rem;
+  margin-block-end: 16px;
+}
+
+.settings-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+}
+
+.setting-item {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-primary), 0.3);
+  border-radius: 8px;
+  background-color: rgba(var(--v-theme-primary), 0.08);
+  cursor: grab;
+  padding-block: 10px;
+  padding-inline: 12px;
+}
+
+.setting-item::before {
+  position: absolute;
+  background-color: var(--item-color, #4caf50);
+  block-size: 100%;
+  content: '';
+  inline-size: 4px;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.setting-item-inner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.setting-label {
+  flex: 1;
+  color: rgba(var(--v-theme-primary), 0.9);
+  font-size: 0.9rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.drag-icon {
+  opacity: 0.5;
+}
+
+@media (width <= 600px) {
+  .settings-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>

src/components/dialog/DownloaderInfoDialog.vue

@@ -0,0 +1,507 @@
+<script setup lang="ts">
+import type { DownloaderConf } from '@/api/types'
+import { storageAttributes } from '@/api/constants'
+import { cloneDeep } from 'lodash-es'
+import { useToast } from 'vue-toastification'
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 获取i18n实例
+const { t } = useI18n()
+
+// 定义输入
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  downloader: {
+    type: Object as PropType<DownloaderConf>,
+    required: true,
+  },
+  downloaders: {
+    type: Array as PropType<DownloaderConf[]>,
+    required: true,
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close', 'change', 'done'])
+
+// 提示框
+const $toast = useToast()
+
+// 表单
+const downloaderForm = ref()
+
+// 下载器详情弹窗
+const downloaderInfoDialog = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+// 下载器详情
+const downloaderInfo = ref<DownloaderConf>({
+  name: '',
+  type: '',
+  default: false,
+  enabled: false,
+  config: {},
+  path_mapping: [],
+})
+
+// 路径映射行定义
+interface PathMappingRow {
+  id: string
+  storage: string
+  download: string
+}
+
+// 路径映射行数据
+const pathMappingRows = ref<PathMappingRow[]>([])
+
+// 路径前缀选项
+const prefixOptions = computed(() => {
+  return storageAttributes.map(item => ({
+    title: t(`storage.${item.type}`),
+    value: item.type,
+  }))
+})
+
+/** 获取路径所属的存储类型。 */
+function getStorageType(path: string) {
+  if (!path) return 'local'
+  const storage = storageAttributes.find(s => s.type !== 'local' && path.startsWith(`${s.type}:`))
+  return storage?.type || 'local'
+}
+
+/** 将存储类型转换为路径前缀。 */
+function storage2Prefix(storage: string) {
+  return storage === 'local' ? '' : storage + ':'
+}
+
+/** 拆分存储路径的前缀和真实路径。 */
+function parseStoragePath(path: string): [prefix: string, suffix: string] {
+  if (!path) return ['', '']
+  const storage = getStorageType(path)
+  const prefix = storage2Prefix(storage)
+  return [prefix, path.slice(prefix.length)]
+}
+
+/** 更新单行路径映射的存储前缀。 */
+function updateStoragePrefix(row: PathMappingRow, storage: string) {
+  const [, currentSuffix] = parseStoragePath(row.storage)
+  const prefix = storage2Prefix(storage)
+  row.storage = prefix + currentSuffix
+}
+
+/** 更新单行路径映射的存储路径主体。 */
+function updateStorageSuffix(row: PathMappingRow, suffix: string) {
+  const [currentPrefix] = parseStoragePath(row.storage)
+  row.storage = currentPrefix + suffix
+}
+
+const pathValidationRules = [
+  (v: string) => !!v || t('downloader.pathMappingRequired'),
+  (v: string) => v.startsWith('/') || t('downloader.pathMappingError'),
+]
+
+/** 生成路径映射行使用的临时唯一 ID。 */
+function generateId() {
+  return Math.random().toString(36).substring(2, 9)
+}
+
+/** 初始化下载器编辑表单数据。 */
+function initializeDownloaderInfo() {
+  downloaderInfo.value = cloneDeep(props.downloader)
+  pathMappingRows.value = (downloaderInfo.value.path_mapping || []).map(item => ({
+    id: generateId(),
+    storage: item[0],
+    download: item[1],
+  }))
+}
+
+/** 保存下载器编辑结果并通知父级刷新。 */
+async function saveDownloaderInfo() {
+  const { valid } = (await downloaderForm.value?.validate()) || { valid: true }
+  if (!valid) return
+
+  downloaderInfo.value.path_mapping = pathMappingRows.value.map(row => [row.storage, row.download])
+
+  if (!downloaderInfo.value.name) {
+    $toast.error(t('downloader.nameRequired'))
+    return
+  }
+  if (props.downloaders.some(item => item.name === downloaderInfo.value.name && item !== props.downloader)) {
+    $toast.error(t('downloader.nameDuplicate'))
+    return
+  }
+  if (downloaderInfo.value.default) {
+    props.downloaders.forEach(item => {
+      if (item.default && item !== props.downloader) {
+        item.default = false
+        $toast.info(t('downloader.defaultChanged'))
+      }
+    })
+  }
+  downloaderInfoDialog.value = false
+  emit('change', downloaderInfo.value, props.downloader.name)
+  emit('done')
+}
+
+/** 新增一行路径映射。 */
+function addPathMapping() {
+  pathMappingRows.value.push({
+    id: generateId(),
+    storage: '',
+    download: '',
+  })
+}
+
+/** 移除指定位置的路径映射。 */
+function removePathMapping(index: number) {
+  pathMappingRows.value.splice(index, 1)
+}
+
+onMounted(() => {
+  initializeDownloaderInfo()
+})
+</script>
+
+<template>
+  <VDialog
+      v-if="downloaderInfoDialog"
+      v-model="downloaderInfoDialog"
+      scrollable
+      max-width="40rem"
+      :fullscreen="!display.mdAndUp.value"
+    >
+      <VCard>
+        <VCardItem class="py-2">
+          <template #prepend>
+            <VIcon icon="mdi-download" class="me-2" />
+          </template>
+          <VCardTitle>{{ t('common.config') }}</VCardTitle>
+          <VCardSubtitle>{{ props.downloader.name }}</VCardSubtitle>
+        </VCardItem>
+        <VDialogCloseBtn v-model="downloaderInfoDialog" />
+        <VDivider />
+        <VCardText>
+          <VForm ref="downloaderForm">
+            <VRow>
+              <VCol cols="12" md="6">
+                <VSwitch v-model="downloaderInfo.enabled" :label="t('downloader.enabled')" />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSwitch
+                  v-model="downloaderInfo.default"
+                  :label="t('downloader.default')"
+                  :disabled="!downloaderInfo.enabled"
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="downloaderInfo.type == 'qbittorrent'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.name"
+                  :label="t('downloader.name')"
+                  :placeholder="t('downloader.nameRequired')"
+                  :hint="t('downloader.name')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-label"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.host"
+                  :label="t('downloader.host')"
+                  placeholder="http(s)://ip:port"
+                  :hint="t('downloader.host')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-server"
+                />
+              </VCol>
+              <VCol cols="12">
+                <VTextField
+                  v-model="downloaderInfo.config.apikey"
+                  type="password"
+                  :label="t('downloader.apiKey')"
+                  :hint="t('downloader.qbittorrentApiKeyHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-key-variant"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.username"
+                  :label="t('downloader.username')"
+                  :hint="t('downloader.username')"
+                  :disabled="!!downloaderInfo.config.apikey"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-account"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.password"
+                  type="password"
+                  :label="t('downloader.password')"
+                  :hint="t('downloader.password')"
+                  :disabled="!!downloaderInfo.config.apikey"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-lock"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSwitch
+                  v-model="downloaderInfo.config.category"
+                  :label="t('downloader.category')"
+                  :hint="t('downloader.category')"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSwitch
+                  v-model="downloaderInfo.config.sequentail"
+                  :label="t('downloader.sequentail')"
+                  :hint="t('downloader.sequentail')"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSwitch
+                  v-model="downloaderInfo.config.force_resume"
+                  :label="t('downloader.force_resume')"
+                  :hint="t('downloader.force_resume')"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSwitch
+                  v-model="downloaderInfo.config.first_last_piece"
+                  :label="t('downloader.first_last_piece')"
+                  :hint="t('downloader.first_last_piece')"
+                  persistent-hint
+                  active
+                />
+              </VCol>
+            </VRow>
+            <VRow v-else-if="downloaderInfo.type == 'transmission'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.name"
+                  :label="t('downloader.name')"
+                  :placeholder="t('downloader.nameRequired')"
+                  :hint="t('downloader.name')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-label"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.host"
+                  :label="t('downloader.host')"
+                  placeholder="http(s)://ip:port"
+                  :hint="t('downloader.host')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-server"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.username"
+                  :label="t('downloader.username')"
+                  :hint="t('downloader.username')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-account"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.password"
+                  type="password"
+                  :label="t('downloader.password')"
+                  :hint="t('downloader.password')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-lock"
+                />
+              </VCol>
+            </VRow>
+            <VRow v-else-if="downloaderInfo.type == 'rtorrent'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.name"
+                  :label="t('downloader.name')"
+                  :placeholder="t('downloader.nameRequired')"
+                  :hint="t('downloader.name')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-label"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.host"
+                  :label="t('downloader.host')"
+                  placeholder="http(s)://ip:port/RPC2"
+                  :hint="t('downloader.rtorrentHostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-server"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.username"
+                  :label="t('downloader.username')"
+                  :hint="t('downloader.username')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-account"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.config.password"
+                  type="password"
+                  :label="t('downloader.password')"
+                  :hint="t('downloader.password')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-lock"
+                />
+              </VCol>
+            </VRow>
+            <VRow v-else>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.type"
+                  :label="t('downloader.type')"
+                  :hint="t('downloader.customTypeHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-cog"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="downloaderInfo.name"
+                  :label="t('downloader.name')"
+                  :hint="t('downloader.nameRequired')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-label"
+                />
+              </VCol>
+            </VRow>
+            <VRow>
+              <VCol cols="12">
+                <VDivider class="my-2">
+                  <span class="text-body-1 font-weight-medium">{{ t('downloader.pathMapping') }}</span>
+                </VDivider>
+
+                <div v-if="pathMappingRows.length === 0" class="text-center py-2">
+                  <VIcon icon="mdi-folder-network" size="48" class="text-disabled mb-1" />
+                  <div class="text-body-2 text-disabled">{{ t('common.noData') }}</div>
+                </div>
+
+                <VCard v-for="(row, index) in pathMappingRows" :key="row.id" variant="outlined" class="my-2">
+                  <VCardText class="pa-3">
+                    <VRow align="center" no-gutters>
+                      <VCol cols="12" class="mb-2">
+                        <div class="d-flex align-center mb-1">
+                          <VIcon icon="mdi-folder-outline" size="18" class="me-1 text-primary" />
+                          <span class="text-caption text-medium-emphasis">{{ t('downloader.storagePath') }}</span>
+                        </div>
+                        <VRow no-gutters>
+                          <VCol cols="12" sm="4" class="pe-2">
+                            <VSelect
+                              :model-value="getStorageType(row.storage)"
+                              :items="prefixOptions"
+                              density="compact"
+                              variant="outlined"
+                              hide-details
+                              @update:model-value="v => updateStoragePrefix(row, v)"
+                            />
+                          </VCol>
+                          <VCol cols="12" sm="8">
+                            <VTextField
+                              :model-value="parseStoragePath(row.storage)[1]"
+                              :placeholder="'/path/to/storage'"
+                              density="compact"
+                              variant="outlined"
+                              hide-details="auto"
+                              :rules="pathValidationRules"
+                              @update:model-value="v => updateStorageSuffix(row, v)"
+                            />
+                          </VCol>
+                        </VRow>
+                      </VCol>
+
+                      <VCol cols="12" class="mb-1">
+                        <div class="d-flex align-center justify-center my-1">
+                          <VIcon icon="mdi-arrow-down" size="18" class="text-medium-emphasis" />
+                        </div>
+                        <div class="d-flex align-center mb-1">
+                          <VIcon icon="mdi-download-outline" size="18" class="me-1 text-success" />
+                          <span class="text-caption text-medium-emphasis">{{ t('downloader.downloadPath') }}</span>
+                        </div>
+                        <VTextField
+                          v-model="row.download"
+                          :placeholder="'/path/to/download'"
+                          density="compact"
+                          variant="outlined"
+                          hide-details="auto"
+                          :rules="pathValidationRules"
+                        />
+                      </VCol>
+
+                      <VCol cols="12" class="d-flex justify-end pt-1">
+                        <IconBtn variant="text" color="error" size="small" @click="removePathMapping(index)">
+                          <VIcon icon="mdi-delete-outline" />
+                        </IconBtn>
+                      </VCol>
+                    </VRow>
+                  </VCardText>
+                </VCard>
+
+                <VBtn
+                  variant="tonal"
+                  color="primary"
+                  prepend-icon="mdi-plus-circle-outline"
+                  @click="addPathMapping"
+                  class="mt-1"
+                  size="small"
+                >
+                  {{ t('common.add') }} {{ t('downloader.pathMapping') }}
+                </VBtn>
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+        <VCardActions class="pt-3">
+          <VBtn @click="saveDownloaderInfo" prepend-icon="mdi-content-save" class="px-5">
+            {{ t('common.save') }}
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+</template>

src/components/dialog/FileNewFolderDialog.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'create'): void
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'update:name', value: string): void
+}>()
+
+const { t } = useI18n()
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+const folderName = computed({
+  get: () => props.name,
+  set: value => emit('update:name', value),
+})
+
+// 关闭新建目录弹窗并通知共享弹窗 Host 回收实例。
+function closeDialog() {
+  emit('close')
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <VDialog v-model="dialogVisible" max-width="35rem">
+    <VCard>
+      <VCardItem>
+        <template #prepend>
+          <VIcon icon="mdi-folder-plus-outline" class="me-2" />
+        </template>
+        <VCardTitle>{{ t('file.newFolder') }}</VCardTitle>
+      </VCardItem>
+      <VDialogCloseBtn @click="closeDialog" />
+      <VDivider />
+      <VCardText>
+        <VTextField v-model="folderName" :label="t('common.name')" prepend-inner-icon="mdi-format-text" />
+      </VCardText>
+      <VCardActions>
+        <div class="flex-grow-1" />
+        <VBtn :disabled="!folderName" prepend-icon="mdi-folder-plus" class="px-5 me-3" @click="emit('create')">
+          {{ t('common.create') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/FileRenameDialog.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { FileItem } from '@/api/types'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  item: Object as PropType<FileItem>,
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  recursive: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'auto-name'): void
+  (event: 'close'): void
+  (event: 'rename'): void
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'update:name', value: string): void
+  (event: 'update:recursive', value: boolean): void
+}>()
+
+const { t } = useI18n()
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+const renameName = computed({
+  get: () => props.name,
+  set: value => emit('update:name', value),
+})
+
+const includeSubfolders = computed({
+  get: () => props.recursive,
+  set: value => emit('update:recursive', value),
+})
+
+// 关闭弹窗并通知共享弹窗 Host 回收当前实例。
+function closeDialog() {
+  emit('close')
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <VDialog v-model="dialogVisible" max-width="35rem">
+    <VCard>
+      <VCardItem>
+        <template #prepend>
+          <VIcon icon="mdi-pencil" class="me-2" />
+        </template>
+        <VCardTitle>{{ t('file.rename') }}</VCardTitle>
+      </VCardItem>
+      <VDialogCloseBtn @click="closeDialog" />
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VTextField
+              v-model="renameName"
+              :label="t('file.newName')"
+              :loading="loading"
+              prepend-inner-icon="mdi-format-text"
+            />
+          </VCol>
+          <VCol v-if="item && item.type == 'dir'" cols="12">
+            <VSwitch v-model="includeSubfolders" :label="t('file.includeSubfolders')" />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <VCardActions>
+        <VBtn color="success" prepend-icon="mdi-magic" class="px-5 me-3" @click="emit('auto-name')">
+          {{ t('file.autoRecognizeName') }}
+        </VBtn>
+        <VBtn :disabled="!renameName" prepend-icon="mdi-check" class="px-5 me-3" @click="emit('rename')">
+          {{ t('common.confirm') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/FilterRuleGroupInfoDialog.vue

@@ -0,0 +1,314 @@
+<script lang="ts" setup>
+import { copyToClipboard } from '@/@core/utils/navigator'
+import { CustomRule, FilterRuleGroup } from '@/api/types'
+import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+import { useToast } from 'vue-toastification'
+import { cloneDeep } from 'lodash-es'
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 获取i18n实例
+const { t } = useI18n()
+
+// 规则组详情弹窗内才需要拖拽和导入代码，避免规则组卡片列表首屏带入重交互依赖。
+const Draggable = defineAsyncComponent(() => import('vuedraggable').then(module => module.default))
+const ImportCodeDialog = defineAsyncComponent(() => import('@/components/dialog/ImportCodeDialog.vue'))
+
+// 输入参数
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  // 单个规则组
+  group: {
+    type: Object as PropType<FilterRuleGroup>,
+    required: true,
+  },
+  // 所有规则组
+  groups: {
+    type: Array as PropType<FilterRuleGroup[]>,
+    required: true,
+  },
+  // 媒体类型字典
+  categories: {
+    type: Object as PropType<{ [key: string]: any }>,
+    required: true,
+  },
+  // 自定义规则列表
+  custom_rules: Array as PropType<CustomRule[]>,
+})
+
+// 规则卡片类型
+interface FilterCard {
+  // 优先级
+  pri: string
+  // 已选规则
+  rules: string[]
+}
+
+// 提示框
+const $toast = useToast()
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close', 'change', 'done'])
+
+// 规则详情弹窗
+const groupInfoDialog = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+// 规则详情
+const groupInfo = ref<FilterRuleGroup>({
+  name: props.group?.name ?? '',
+  rule_string: props.group?.rule_string ?? '',
+  media_type: props.group?.media_type ?? '',
+  category: props.group?.category ?? '',
+})
+
+// 媒体类型字典
+const mediaTypeItems = [
+  { title: t('common.all'), value: '' },
+  { title: t('mediaType.movie'), value: '电影' },
+  { title: t('mediaType.tv'), value: '电视剧' },
+]
+
+// 根据选中的媒体类型，获取对应的媒体类别
+const getCategories = computed(() => {
+  const default_value = [{ title: t('common.all'), value: '' }]
+  if (!props.categories || !groupInfo.value.media_type || !props.categories[groupInfo.value.media_type]) {
+    return default_value
+  }
+  return default_value.concat(props.categories[groupInfo.value.media_type] || [])
+})
+
+// 规则组规则卡片列表
+const filterRuleCards = ref<FilterCard[]>([])
+
+
+/** 更新指定优先级规则卡片的选中规则。 */
+function updateFilterCardValue(pri: string, rules: string[]) {
+  const card = filterRuleCards.value.find(card => card.pri === pri)
+  if (card && Array.isArray(rules)) card.rules = rules
+}
+
+/** 移除指定优先级规则卡片并重排优先级。 */
+function filterCardClose(pri: string) {
+  filterRuleCards.value = filterRuleCards.value
+    .filter(card => card.pri !== pri)
+    .map((card, index) => {
+      card.pri = (index + 1).toString()
+      return card
+    })
+}
+
+/** 将当前规则组规则串复制到剪贴板。 */
+async function shareRules() {
+  if (filterRuleCards.value.length === 0) return
+
+  const value = filterRuleCards.value
+    .filter(card => Array.isArray(card.rules) && card.rules.length > 0)
+    .map(card => card.rules.join('&'))
+    .join('>')
+
+  try {
+    let success
+    success = copyToClipboard(value)
+    if (await success) $toast.success(t('filterRule.shareSuccess'))
+    else $toast.error(t('filterRule.shareFailed'))
+  } catch (error) {
+    $toast.error(t('filterRule.shareFailed'))
+    console.error(error)
+  }
+}
+
+/** 打开共享导入弹窗并导入规则串。 */
+async function importRules(ruleType: string) {
+  openSharedDialog(
+    ImportCodeDialog,
+    {
+      title: t('filterRule.import'),
+      dataType: ruleType,
+    },
+    {
+      save: saveCodeString,
+    },
+    { closeOn: ['close', 'save'] },
+  )
+}
+
+/** 保存导入的规则代码并覆盖当前规则卡片。 */
+function saveCodeString(type: string, code: any) {
+  try {
+    code = code.value
+    if (type === 'priority') {
+      // 解析值
+      if (!code) return
+      // 首尾增加空格
+      if (!code.startsWith(' ')) code = ` ${code}`
+      if (!code.endsWith(' ')) code = `${code} `
+      const groups = code.split('>')
+      filterRuleCards.value = groups.map((group: string, index: number) => ({
+        pri: (index + 1).toString(),
+        rules: group.split('&').filter(rule => rule),
+      }))
+    }
+  } catch (error) {
+    $toast.error(t('filterRule.importFailed'))
+    console.error(error)
+  }
+}
+
+/** 新增一个空的规则优先级卡片。 */
+function addFilterCard() {
+  const pri = (filterRuleCards.value.length + 1).toString()
+  const newCard: FilterCard = { pri, rules: [] }
+  filterRuleCards.value.push(newCard)
+}
+
+/** 根据列表的拖动顺序更新优先级。 */
+function dragOrderEnd() {
+  filterRuleCards.value.forEach((card, index) => {
+    card.pri = (index + 1).toString()
+  })
+}
+
+/** 初始化规则组编辑数据。 */
+function opengroupInfoDialog() {
+  groupInfo.value = cloneDeep(props.group)
+  if (props.group.rule_string) {
+    filterRuleCards.value = props.group.rule_string.split('>').map((group: string, index: number) => ({
+      pri: (index + 1).toString(),
+      rules: group.split('&').filter(rule => rule),
+    }))
+  }
+  groupInfoDialog.value = true
+}
+
+/** 保存规则组编辑结果并通知父级刷新。 */
+function saveGroupInfo() {
+  if (!groupInfo.value.name.trim()) {
+    $toast.error(t('filterRule.nameRequired'))
+    return
+  }
+  if (props.groups.some(item => item.name === groupInfo.value.name && item !== props.group)) {
+    $toast.error(t('filterRule.nameDuplicate'))
+    return
+  }
+
+  groupInfoDialog.value = false
+  groupInfo.value.rule_string = filterRuleCards.value
+    .filter(card => Array.isArray(card.rules) && card.rules.length > 0)
+    .map(card => card.rules.join('&'))
+    .join('>')
+  emit('change', groupInfo.value, props.group.name)
+  emit('done')
+}
+
+/** 关闭规则组编辑弹窗。 */
+function onClose() {
+  emit('close')
+}
+
+
+onMounted(() => {
+  opengroupInfoDialog()
+})
+</script>
+
+<template>
+  <VDialog
+    v-if="groupInfoDialog"
+    v-model="groupInfoDialog"
+    scrollable
+    max-width="80rem"
+    :fullscreen="!display.mdAndUp.value"
+  >
+      <VCard :title="`${props.group.name} - ${t('filterRule.title')}`">
+        <VDialogCloseBtn v-model="groupInfoDialog" />
+        <VDivider />
+        <VCardItem class="pt-1">
+          <VRow class="mt-1">
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="groupInfo.name"
+                :label="t('filterRule.groupName')"
+                :placeholder="t('filterRule.nameRequired')"
+                :hint="t('filterRule.groupName')"
+                persistent-hint
+                active
+                prepend-inner-icon="mdi-label"
+              />
+            </VCol>
+            <VCol cols="6" md="3">
+              <VAutocomplete
+                v-model="groupInfo.media_type"
+                :label="t('filterRule.mediaType')"
+                :items="mediaTypeItems"
+                :hint="t('filterRule.mediaType')"
+                persistent-hint
+                active
+                prepend-inner-icon="mdi-movie-open"
+              />
+            </VCol>
+            <VCol cols="6" md="3">
+              <VAutocomplete
+                v-model="groupInfo.category"
+                :items="getCategories"
+                :label="t('filterRule.category')"
+                :hint="t('filterRule.category')"
+                persistent-hint
+                active
+                prepend-inner-icon="mdi-folder-open"
+              />
+            </VCol>
+          </VRow>
+        </VCardItem>
+        <VCardText>
+          <Draggable
+            v-model="filterRuleCards"
+            handle=".cursor-move"
+            item-key="pri"
+            tag="div"
+            @end="dragOrderEnd"
+            :component-data="{ 'class': 'grid gap-3 grid-filterrule-card' }"
+          >
+            <template #item="{ element }">
+              <FilterRuleCard
+                :pri="element.pri"
+                :maxpri="filterRuleCards.length.toString()"
+                :rules="element.rules"
+                :custom_rules="props.custom_rules"
+                @changed="updateFilterCardValue"
+                @close="filterCardClose(element.pri)"
+              />
+            </template>
+          </Draggable>
+          <div class="text-center" v-if="filterRuleCards.length == 0">{{ t('filterRule.add') }}</div>
+        </VCardText>
+        <VCardActions class="pt-3">
+          <VBtn color="primary" @click="addFilterCard">
+            <VIcon icon="mdi-plus" />
+          </VBtn>
+          <VBtn color="success" @click="importRules('priority')">
+            <VIcon icon="mdi-import" />
+          </VBtn>
+          <VBtn color="info" @click="shareRules">
+            <VIcon icon="mdi-share" />
+          </VBtn>
+          <VSpacer />
+          <VBtn @click="saveGroupInfo" prepend-icon="mdi-content-save" class="px-5">
+            {{ t('common.save') }}
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+</template>

src/components/dialog/LlmProviderAuthDialog.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { LlmProviderAuthSession } from '@/composables/useLlmProviderDirectory'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = withDefaults(
+  defineProps<{
+    authSession?: LlmProviderAuthSession | null
+    modelValue?: boolean
+    polling?: boolean
+    popupBlocked?: boolean
+  }>(),
+  {
+    authSession: null,
+    modelValue: true,
+    polling: false,
+    popupBlocked: false,
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'openAuthPage'): void
+  (event: 'poll'): void
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+// 关闭授权弹窗并通知调用方停止轮询。
+function closeDialog() {
+  visible.value = false
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="560">
+    <VCard>
+      <VCardTitle>{{ t('setting.system.llmProviderAuthDialogTitle') }}</VCardTitle>
+      <VCardText class="d-flex flex-column ga-4">
+        <VAlert v-if="props.authSession?.instructions" type="info" variant="tonal">
+          {{ props.authSession.instructions }}
+        </VAlert>
+
+        <VAlert v-if="props.popupBlocked" type="warning" variant="tonal">
+          {{ t('setting.system.llmProviderPopupBlocked') }}
+        </VAlert>
+
+        <div v-if="props.authSession?.user_code">
+          <div class="text-caption text-medium-emphasis mb-1">{{ t('setting.system.llmProviderDeviceCode') }}</div>
+          <div class="text-h5 font-weight-bold">{{ props.authSession.user_code }}</div>
+        </div>
+
+        <div v-if="props.authSession?.message" class="text-body-2">
+          {{ props.authSession.message }}
+        </div>
+
+        <div class="d-flex flex-wrap ga-2">
+          <VBtn color="primary" prepend-icon="mdi-open-in-new" @click="emit('openAuthPage')">
+            {{ t('setting.system.llmProviderOpenAuthPage') }}
+          </VBtn>
+          <VBtn variant="tonal" prepend-icon="mdi-refresh" :loading="props.polling" @click="emit('poll')">
+            {{ t('setting.system.llmProviderCheckAuthStatus') }}
+          </VBtn>
+        </div>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn variant="text" @click="closeDialog">
+          {{ t('common.close') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/LoginMfaDialog.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = withDefaults(
+  defineProps<{
+    errorMessage?: string
+    modelValue?: boolean
+    otpPassword?: string
+    passkeyLoading?: boolean
+  }>(),
+  {
+    errorMessage: '',
+    modelValue: true,
+    otpPassword: '',
+    passkeyLoading: false,
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'otp'): void
+  (event: 'passkey'): void
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'update:otpPassword', value: string): void
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+const otpValue = computed({
+  get: () => props.otpPassword,
+  set: value => emit('update:otpPassword', value),
+})
+
+// 提交 OTP 登录请求。
+function submitOtp() {
+  emit('otp')
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="400" persistent>
+    <VCard>
+      <VCardTitle class="text-h5 text-center mt-4 pb-2">{{ t('login.secondaryVerification') }}</VCardTitle>
+      <VCardText class="pt-0">
+        <p class="text-center mb-4">{{ t('login.mfa.selectVerificationMethod') }}</p>
+
+        <VCard variant="tonal" class="mb-3">
+          <VCardText>
+            <VForm @submit.prevent="submitOtp">
+              <VTextField
+                v-model="otpValue"
+                :label="t('login.otpCode')"
+                :placeholder="t('login.otpPlaceholder')"
+                type="text"
+                name="otp"
+                id="otp"
+                autocomplete="one-time-code"
+                inputmode="numeric"
+                prepend-inner-icon="mdi-shield-key"
+                class="mb-2"
+              />
+              <VBtn block type="submit" color="primary" :disabled="!otpValue">
+                {{ t('login.loginWithOtp') }}
+              </VBtn>
+            </VForm>
+          </VCardText>
+        </VCard>
+
+        <VCard variant="tonal">
+          <VCardText>
+            <p class="text-body-2 mb-2">{{ t('login.orUsePasskey') }}</p>
+            <VBtn
+              block
+              variant="tonal"
+              color="success"
+              class="passkey-btn"
+              prepend-icon="material-symbols:passkey"
+              :loading="props.passkeyLoading"
+              @click="emit('passkey')"
+            >
+              {{ t('login.verifyWithPasskey') }}
+            </VBtn>
+          </VCardText>
+        </VCard>
+
+        <VAlert v-if="props.errorMessage" type="error" variant="tonal" class="mt-3">
+          {{ props.errorMessage }}
+        </VAlert>
+
+        <VBtn block variant="text" class="mt-4" @click="visible = false">{{ t('common.cancel') }}</VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/MediaServerInfoDialog.vue

@@ -0,0 +1,601 @@
+<script setup lang="ts">
+import api from '@/api'
+import type { MediaServerConf, MediaServerLibrary } from '@/api/types'
+import { cloneDeep } from 'lodash-es'
+import { useToast } from 'vue-toastification'
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 获取i18n实例
+const { t } = useI18n()
+
+// 定义输入
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  mediaserver: {
+    type: Object as PropType<MediaServerConf>,
+    required: true,
+  },
+  mediaservers: {
+    type: Array as PropType<MediaServerConf[]>,
+    required: true,
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close', 'done', 'change'])
+
+// 提示框
+const $toast = useToast()
+
+// 媒体服务器详情弹窗
+const mediaServerInfoDialog = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+// 媒体服务器详情
+const mediaServerInfo = ref<MediaServerConf>({
+  name: '',
+  type: '',
+  enabled: false,
+  config: {},
+})
+
+// 同步媒体库选项
+const librariesOptions = ref<{ title: string; value: string | undefined }[]>([
+  {
+    title: t('common.all'),
+    value: 'all',
+  },
+])
+
+const ugreenScanModeOptions = computed(() => [
+  { title: t('mediaserver.scanModeOptions.newAndModified'), value: 'new_and_modified' },
+  { title: t('mediaserver.scanModeOptions.supplementMissing'), value: 'supplement_missing' },
+  { title: t('mediaserver.scanModeOptions.fullOverride'), value: 'full_override' },
+])
+
+/** 初始化媒体服务器编辑表单数据。 */
+function initializeMediaServerInfo() {
+  loadLibrary(props.mediaserver.name)
+  mediaServerInfo.value = cloneDeep(props.mediaserver)
+  if (mediaServerInfo.value.type === 'ugreen') {
+    mediaServerInfo.value.config = mediaServerInfo.value.config || {}
+    if (!mediaServerInfo.value.config.scan_mode) {
+      mediaServerInfo.value.config.scan_mode = 'supplement_missing'
+    }
+    if (mediaServerInfo.value.config.verify_ssl === undefined) {
+      mediaServerInfo.value.config.verify_ssl = true
+    }
+  }
+  if (!props.mediaserver.sync_libraries) {
+    mediaServerInfo.value.sync_libraries = ['all']
+  }
+}
+
+/** 保存媒体服务器编辑结果并通知父级刷新。 */
+function saveMediaServerInfo() {
+  if (!mediaServerInfo.value.name) {
+    $toast.error(t('common.nameRequired'))
+    return
+  }
+  if (props.mediaservers.some(item => item.name === mediaServerInfo.value.name && item !== props.mediaserver)) {
+    $toast.error(t('common.nameExists', { name: mediaServerInfo.value.name }))
+    return
+  }
+  mediaServerInfoDialog.value = false
+  emit('change', mediaServerInfo.value, props.mediaserver.name)
+  emit('done')
+}
+
+/** 调用 API 查询指定媒体服务器的媒体库列表。 */
+async function loadLibrary(server: string) {
+  try {
+    const result: MediaServerLibrary[] = await api.get('mediaserver/library', { params: { server } })
+    if (result && result.length > 0) {
+      librariesOptions.value = result.map(item => ({
+        title: item.name,
+        value: item.id?.toString(),
+      }))
+    } else {
+      librariesOptions.value = []
+    }
+    librariesOptions.value.unshift({
+      title: t('common.all'),
+      value: 'all',
+    })
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+onMounted(() => {
+  initializeMediaServerInfo()
+})
+</script>
+
+<template>
+  <VDialog
+      v-if="mediaServerInfoDialog"
+      v-model="mediaServerInfoDialog"
+      scrollable
+      max-width="40rem"
+      :fullscreen="!display.mdAndUp.value"
+    >
+      <VCard>
+        <VCardItem class="py-2">
+          <template #prepend>
+            <VIcon icon="mdi-cog" class="me-2" />
+          </template>
+          <VCardTitle>{{ t('common.config') }}</VCardTitle>
+          <VCardSubtitle>{{ props.mediaserver.name }}</VCardSubtitle>
+        </VCardItem>
+        <VDialogCloseBtn v-model="mediaServerInfoDialog" />
+        <VDivider />
+        <VCardText>
+          <VForm>
+            <VRow>
+              <VCol cols="12" md="6">
+                <VSwitch v-model="mediaServerInfo.enabled" :label="t('mediaserver.enableMediaServer')" />
+              </VCol>
+            </VRow>
+            <VRow v-if="mediaServerInfo.type == 'emby'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.name"
+                  :label="t('common.name')"
+                  :placeholder="t('mediaserver.nameRequired')"
+                  :hint="t('mediaserver.serverAlias')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-label"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.host"
+                  :label="t('mediaserver.host')"
+                  :placeholder="t('mediaserver.hostPlaceholder')"
+                  :hint="t('mediaserver.hostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-server"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.play_host"
+                  :label="t('mediaserver.playHost')"
+                  :placeholder="t('mediaserver.playHostPlaceholder')"
+                  :hint="t('mediaserver.playHostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-play-network"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.username"
+                  :label="t('mediaserver.username')"
+                  :hint="t('mediaserver.usernameHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-account"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.apikey"
+                  :label="t('mediaserver.apiKey')"
+                  :hint="t('mediaserver.embyApiKeyHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-key"
+                />
+              </VCol>
+              <VCol cols="12">
+                <VAutocomplete
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  prepend-inner-icon="mdi-library"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
+            </VRow>
+            <VRow v-else-if="mediaServerInfo.type == 'zspace'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.name"
+                  :label="t('common.name')"
+                  :placeholder="t('mediaserver.nameRequired')"
+                  :hint="t('mediaserver.serverAlias')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-label"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.host"
+                  :label="t('mediaserver.host')"
+                  :placeholder="t('mediaserver.hostPlaceholder')"
+                  :hint="t('mediaserver.hostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-server"
+                />
+              </VCol>
+              <VCol cols="12">
+                <VTextField
+                  v-model="mediaServerInfo.config.play_host"
+                  :label="t('mediaserver.playHost')"
+                  :placeholder="t('mediaserver.playHostPlaceholder')"
+                  :hint="t('mediaserver.playHostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-play-network"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.username"
+                  :label="t('mediaserver.username')"
+                  :hint="t('mediaserver.usernameHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-account"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  type="password"
+                  v-model="mediaServerInfo.config.password"
+                  :label="t('mediaserver.password')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-lock"
+                />
+              </VCol>
+              <VCol cols="12">
+                <VAutocomplete
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  prepend-inner-icon="mdi-library"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
+            </VRow>
+            <VRow v-else-if="mediaServerInfo.type == 'jellyfin'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.name"
+                  :label="t('common.name')"
+                  :placeholder="t('mediaserver.nameRequired')"
+                  :hint="t('mediaserver.serverAlias')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-label"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.host"
+                  :label="t('mediaserver.host')"
+                  :placeholder="t('mediaserver.hostPlaceholder')"
+                  :hint="t('mediaserver.hostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-server"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.play_host"
+                  :label="t('mediaserver.playHost')"
+                  :placeholder="t('mediaserver.playHostPlaceholder')"
+                  :hint="t('mediaserver.playHostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-play-network"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.apikey"
+                  :label="t('mediaserver.apiKey')"
+                  :hint="t('mediaserver.jellyfinApiKeyHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-key"
+                />
+              </VCol>
+              <VCol cols="12">
+                <VAutocomplete
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  prepend-inner-icon="mdi-library"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
+            </VRow>
+            <VRow v-else-if="mediaServerInfo.type == 'trimemedia'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.name"
+                  :label="t('common.name')"
+                  :placeholder="t('mediaserver.nameRequired')"
+                  :hint="t('mediaserver.serverAlias')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-label"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.host"
+                  :label="t('mediaserver.host')"
+                  :placeholder="t('mediaserver.hostPlaceholder')"
+                  :hint="t('mediaserver.hostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-server"
+                />
+              </VCol>
+              <VCol cols="12">
+                <VTextField
+                  v-model="mediaServerInfo.config.play_host"
+                  :label="t('mediaserver.playHost')"
+                  :placeholder="t('mediaserver.playHostPlaceholder')"
+                  :hint="t('mediaserver.playHostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-play-network"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.username"
+                  :label="t('mediaserver.username')"
+                  active
+                  prepend-inner-icon="mdi-account"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  type="password"
+                  v-model="mediaServerInfo.config.password"
+                  :label="t('mediaserver.password')"
+                  active
+                  prepend-inner-icon="mdi-lock"
+                />
+              </VCol>
+              <VCol cols="12">
+                <VAutocomplete
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  prepend-inner-icon="mdi-library"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
+            </VRow>
+            <VRow v-else-if="mediaServerInfo.type == 'ugreen'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.name"
+                  :label="t('common.name')"
+                  :placeholder="t('mediaserver.nameRequired')"
+                  :hint="t('mediaserver.serverAlias')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-label"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.host"
+                  :label="t('mediaserver.host')"
+                  :placeholder="t('mediaserver.hostPlaceholder')"
+                  :hint="t('mediaserver.hostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-server"
+                />
+              </VCol>
+              <VCol cols="12">
+                <VTextField
+                  v-model="mediaServerInfo.config.play_host"
+                  :label="t('mediaserver.playHost')"
+                  :placeholder="t('mediaserver.playHostPlaceholder')"
+                  :hint="t('mediaserver.playHostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-play-network"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.username"
+                  :label="t('mediaserver.username')"
+                  active
+                  prepend-inner-icon="mdi-account"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  type="password"
+                  v-model="mediaServerInfo.config.password"
+                  :label="t('mediaserver.password')"
+                  active
+                  prepend-inner-icon="mdi-lock"
+                />
+              </VCol>
+              <VCol cols="12">
+                <VAutocomplete
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  prepend-inner-icon="mdi-library"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSelect
+                  v-model="mediaServerInfo.config.scan_mode"
+                  :label="t('mediaserver.scanMode')"
+                  :items="ugreenScanModeOptions"
+                  :hint="t('mediaserver.scanModeHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-radar"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VSwitch
+                  v-model="mediaServerInfo.config.verify_ssl"
+                  :label="t('mediaserver.verifySsl')"
+                  :hint="t('mediaserver.verifySslHint')"
+                  persistent-hint
+                  color="primary"
+                  inset
+                />
+              </VCol>
+            </VRow>
+            <VRow v-else-if="mediaServerInfo.type == 'plex'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.name"
+                  :label="t('common.name')"
+                  :placeholder="t('mediaserver.nameRequired')"
+                  :hint="t('mediaserver.serverAlias')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-label"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.host"
+                  :label="t('mediaserver.host')"
+                  :placeholder="t('mediaserver.hostPlaceholder')"
+                  :hint="t('mediaserver.hostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-server"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.play_host"
+                  :label="t('mediaserver.playHost')"
+                  :placeholder="t('mediaserver.playHostPlaceholder')"
+                  :hint="t('mediaserver.playHostHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-play-network"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.config.token"
+                  :label="t('mediaserver.plexToken')"
+                  :hint="t('mediaserver.plexTokenHint')"
+                  persistent-hint
+                  active
+                  prepend-inner-icon="mdi-key"
+                />
+              </VCol>
+              <VCol cols="12">
+                <VAutocomplete
+                  v-model="mediaServerInfo.sync_libraries"
+                  :label="t('mediaserver.syncLibraries')"
+                  :items="librariesOptions"
+                  chips
+                  multiple
+                  clearable
+                  :hint="t('mediaserver.syncLibrariesHint')"
+                  persistent-hint
+                  active
+                  append-inner-icon="mdi-refresh"
+                  prepend-inner-icon="mdi-library"
+                  @click:append-inner="loadLibrary(mediaServerInfo.name)"
+                />
+              </VCol>
+            </VRow>
+            <VRow v-else>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="mediaServerInfo.type"
+                  :label="t('mediaserver.type')"
+                  :hint="t('mediaserver.customTypeHint')"
+                  persistent-hint
+                  prepend-inner-icon="mdi-cog"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  :label="t('common.name')"
+                  :hint="t('mediaserver.nameRequired')"
+                  persistent-hint
+                  prepend-inner-icon="mdi-label"
+                />
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+        <VCardActions class="pt-3">
+          <VBtn @click="saveMediaServerInfo" prepend-icon="mdi-content-save" class="px-5">
+            {{ t('common.confirm') }}
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+</template>

src/components/dialog/NotificationTemplateEditorDialog.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { useDisplay } from 'vuetify'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const display = useDisplay()
+
+const props = withDefaults(
+  defineProps<{
+    content?: string
+    editorTheme?: string
+    modelValue?: boolean
+    subtitle?: string
+    templateType?: string
+  }>(),
+  {
+    content: '{}',
+    editorTheme: 'monokai',
+    modelValue: true,
+    subtitle: '',
+    templateType: '',
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'save', value: string): void
+  (event: 'update:content', value: string): void
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+const editableContent = ref(props.content)
+
+watch(
+  () => props.content,
+  value => {
+    editableContent.value = value
+  },
+)
+
+watch(editableContent, value => {
+  emit('update:content', value)
+})
+
+// 提交通知模板内容，由调用方负责保存到后端。
+function submitTemplate() {
+  emit('save', editableContent.value)
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="50rem" :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VCardItem class="py-2">
+        <template #prepend>
+          <VIcon icon="mdi-code-json" class="me-2" />
+        </template>
+        <VCardTitle>
+          {{ t('setting.notification.templateConfigTitle') }}
+        </VCardTitle>
+        <VCardSubtitle>
+          {{ props.subtitle }}
+        </VCardSubtitle>
+        <VDialogCloseBtn v-model="visible" />
+      </VCardItem>
+      <VCardText class="py-0">
+        <VAceEditor
+          :key="`${props.templateType}-jinja2-json`"
+          v-model:value="editableContent"
+          lang="jinja2_json"
+          :theme="props.editorTheme"
+          class="w-full h-full min-h-[30rem] rounded"
+        />
+      </VCardText>
+      <VCardActions class="pt-3">
+        <VBtn color="primary" prepend-icon="mdi-content-save" class="px-5" @click="submitTemplate">
+          {{ t('common.save') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/OfflineStatusDialog.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { useGlobalOfflineStatus } from '@/composables/useOfflineStatus'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    type?: 'offline' | 'online'
+  }>(),
+  {
+    modelValue: true,
+    type: 'offline',
+  },
+)
+
+const { t } = useI18n()
+const { isOnline, canPerformNetworkAction, getOfflineMessage } = useGlobalOfflineStatus()
+
+// 重试连接
+const retrying = ref(false)
+
+/** 尝试请求静态资源来触发网络状态重新检测。 */
+async function handleRetry() {
+  if (retrying.value) return
+
+  retrying.value = true
+
+  try {
+    await fetch('/favicon.ico?' + new Date().getTime(), {
+      method: 'HEAD',
+      cache: 'no-cache',
+    })
+
+    setTimeout(() => {
+      retrying.value = false
+    }, 1000)
+  } catch (error) {
+    retrying.value = false
+  }
+}
+
+// 状态文本
+const statusText = computed(() => {
+  if (props.type === 'online') {
+    return t('app.onlineMessage')
+  }
+  return getOfflineMessage()
+})
+
+// 图标
+const statusIcon = computed(() => {
+  return props.type === 'online' ? 'mdi-wifi' : 'mdi-wifi-off'
+})
+
+// 颜色主题
+const colorTheme = computed(() => {
+  return props.type === 'online' ? 'success' : 'error'
+})
+</script>
+
+<template>
+  <VDialog :model-value="props.modelValue" persistent max-width="420" scrollable>
+    <VCard class="offline-dialog">
+      <div class="status-icon-wrapper">
+        <div class="status-icon-bg">
+          <VIcon :icon="statusIcon" size="48" :color="colorTheme" />
+        </div>
+      </div>
+
+      <VCardText class="text-center">
+        <h2 class="offline-title mb-4">
+          {{ props.type === 'online' ? t('app.online') : t('app.offline') }}
+        </h2>
+
+        <p class="offline-message mb-6">
+          {{ statusText }}
+        </p>
+
+        <div class="action-section mb-6">
+          <VBtn
+            v-if="props.type === 'offline'"
+            :loading="retrying"
+            :color="colorTheme"
+            size="default"
+            variant="flat"
+            @click="handleRetry"
+          >
+            <VIcon icon="mdi-refresh" class="me-2" />
+            {{ retrying ? t('common.checking') : t('common.retry') }}
+          </VBtn>
+        </div>
+
+        <div class="status-indicators">
+          <VChip
+            :color="isOnline ? 'success' : 'error'"
+            :prepend-icon="isOnline ? 'mdi-wifi' : 'mdi-wifi-off'"
+            variant="tonal"
+            size="small"
+            class="me-2"
+          >
+            {{ isOnline ? t('common.networkOnline') : t('common.networkOffline') }}
+          </VChip>
+
+          <VChip
+            :color="canPerformNetworkAction ? 'success' : 'warning'"
+            :prepend-icon="canPerformNetworkAction ? 'mdi-check-circle' : 'mdi-alert-circle'"
+            variant="tonal"
+            size="small"
+          >
+            {{ canPerformNetworkAction ? t('common.serviceAvailable') : t('common.serviceUnavailable') }}
+          </VChip>
+        </div>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped>
+.offline-dialog {
+  border-radius: 16px;
+}
+
+.status-icon-wrapper {
+  padding-block: 24px 0;
+  padding-inline: 24px;
+  text-align: center;
+}
+
+.status-icon-bg {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  animation: icon-pulse 3s ease-in-out infinite;
+  background: rgba(var(--v-theme-surface-variant), 0.5);
+  block-size: 80px;
+  inline-size: 80px;
+  margin-block: 0;
+  margin-inline: auto;
+}
+
+.status-icon-bg::before {
+  position: absolute;
+  z-index: -1;
+  border-radius: 50%;
+  animation: icon-glow 2s ease-in-out infinite alternate;
+  background: linear-gradient(45deg, rgb(var(--v-theme-primary)), rgb(var(--v-theme-secondary)));
+  content: '';
+  inset: -3px;
+  opacity: 0.1;
+}
+
+@keyframes icon-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+@keyframes icon-glow {
+  0% {
+    opacity: 0.1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0.3;
+    transform: scale(1.1);
+  }
+}
+</style>

src/components/dialog/PluginCloneDialog.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import type { Plugin } from '@/api/types'
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 多语言
+const { t } = useI18n()
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  plugin: {
+    type: Object as PropType<Plugin>,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close', 'clone'])
+
+// 弹窗显示状态
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+// 插件分身表单
+const cloneForm = ref({
+  suffix: '',
+  name: '',
+  description: '',
+  version: '',
+  icon: '',
+})
+
+/** 初始化插件分身表单。 */
+function initializeCloneForm() {
+  cloneForm.value = {
+    suffix: '',
+    name: t('plugin.cloneDefaultName', { name: props.plugin?.plugin_name }),
+    description: t('plugin.cloneDefaultDescription', { description: props.plugin?.plugin_desc }),
+    version: props.plugin?.plugin_version || '1.0',
+    icon: props.plugin?.plugin_icon || '',
+  }
+}
+
+/** 提交插件分身表单。 */
+function submitClone() {
+  emit('clone', { ...cloneForm.value })
+}
+
+onMounted(() => {
+  initializeCloneForm()
+})
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" width="600" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VCardItem class="py-2">
+        <template #prepend>
+          <VIcon icon="mdi-content-copy" class="me-2" />
+        </template>
+        <VCardTitle>{{ t('plugin.cloneTitle') }}</VCardTitle>
+        <VCardSubtitle>{{ t('plugin.cloneSubtitle', { name: props.plugin?.plugin_name }) }}</VCardSubtitle>
+      </VCardItem>
+      <VDialogCloseBtn v-model="visible" />
+      <VDivider />
+      <VCardText>
+        <VForm>
+          <VRow>
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="cloneForm.suffix"
+                :label="t('plugin.suffix') + ' *'"
+                :placeholder="t('plugin.suffixPlaceholder')"
+                :hint="t('plugin.suffixHint')"
+                persistent-hint
+                :rules="[
+                  v => !!v || t('plugin.suffixRequired'),
+                  v => /^[a-zA-Z0-9]+$/.test(v) || t('plugin.suffixFormatError'),
+                  v => v.length <= 20 || t('plugin.suffixLengthError'),
+                ]"
+                required
+                prepend-inner-icon="mdi-tag"
+              />
+            </VCol>
+
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="cloneForm.name"
+                :label="t('plugin.cloneName')"
+                :placeholder="t('plugin.cloneNamePlaceholder')"
+                :hint="t('plugin.cloneNameHint')"
+                persistent-hint
+                prepend-inner-icon="mdi-rename-box"
+              />
+            </VCol>
+
+            <VCol cols="12">
+              <VTextField
+                v-model="cloneForm.description"
+                :label="t('plugin.cloneDescriptionLabel')"
+                :placeholder="t('plugin.cloneDescriptionPlaceholder')"
+                :hint="t('plugin.cloneDescriptionHint')"
+                persistent-hint
+                prepend-inner-icon="mdi-text"
+              />
+            </VCol>
+
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="cloneForm.version"
+                :label="t('plugin.cloneVersion')"
+                :placeholder="t('plugin.cloneVersionPlaceholder')"
+                :hint="t('plugin.cloneVersionHint')"
+                persistent-hint
+                prepend-inner-icon="mdi-numeric"
+              />
+            </VCol>
+
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="cloneForm.icon"
+                :label="t('plugin.cloneIcon')"
+                :placeholder="t('plugin.cloneIconPlaceholder')"
+                :hint="t('plugin.cloneIconHint')"
+                persistent-hint
+                prepend-inner-icon="mdi-image"
+              />
+            </VCol>
+
+            <VCol cols="12">
+              <VAlert type="warning" variant="tonal" density="compact" class="mt-2" icon="mdi-alert-circle-outline">
+                <div class="text-body-2">
+                  <strong>{{ t('common.notice') }}</strong
+                  >：{{ t('plugin.cloneNotice') }}
+                </div>
+              </VAlert>
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+      <VCardActions class="pt-3">
+        <VSpacer />
+        <VBtn
+          color="primary"
+          @click="submitClone"
+          prepend-icon="mdi-content-copy"
+          class="px-5"
+          :disabled="!cloneForm.suffix.trim()"
+          :loading="props.loading"
+        >
+          {{ t('plugin.createClone') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/PluginFolderCreateDialog.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'create'): void
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'update:name', value: string): void
+}>()
+
+const { t } = useI18n()
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+const folderName = computed({
+  get: () => props.name,
+  set: value => emit('update:name', value),
+})
+
+// 关闭插件文件夹新建弹窗。
+function closeDialog() {
+  emit('close')
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <VDialog v-model="dialogVisible" max-width="400">
+    <VCard>
+      <VDialogCloseBtn @click="closeDialog" />
+      <VCardItem>
+        <VCardTitle>{{ t('plugin.newFolder') }}</VCardTitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VTextField
+          v-model="folderName"
+          :label="t('plugin.folderName')"
+          variant="outlined"
+          @keyup.enter="emit('create')"
+        />
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn color="primary" prepend-icon="mdi-folder-plus" class="px-5" @click="emit('create')">
+          {{ t('plugin.create') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/PluginFolderRenameDialog.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+// 多语言
+const { t } = useI18n()
+
+// 输入参数
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  folderName: {
+    type: String,
+    default: '',
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close', 'rename'])
+
+// 新名称
+const newFolderName = ref(props.folderName)
+
+// 弹窗显示状态
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+/** 提交文件夹重命名。 */
+function confirmRename() {
+  emit('rename', newFolderName.value)
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="400">
+    <VCard>
+      <VCardItem>
+        <template #prepend>
+          <VIcon icon="mdi-pencil" class="me-2" />
+        </template>
+        <VCardTitle>{{ t('folder.renameFolder') }}</VCardTitle>
+      </VCardItem>
+      <VDialogCloseBtn v-model="visible" />
+      <VDivider />
+      <VCardText>
+        <VTextField
+          v-model="newFolderName"
+          :label="t('folder.folderName')"
+          variant="outlined"
+          autofocus
+          @keyup.enter="confirmRename"
+        />
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn color="primary" prepend-icon="mdi-check" class="px-5" @click="confirmRename">确认</VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/PluginFolderSettingsDialog.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+interface FolderConfig {
+  plugins?: string[]
+  order?: number
+  background?: string
+  icon?: string
+  color?: string
+  gradient?: string
+  showIcon?: boolean
+}
+
+// 多语言
+const { t } = useI18n()
+
+// 响应式显示
+const display = useDisplay()
+
+// 默认颜色
+const defaultColor = '#2196F3'
+// 默认图标
+const defaultIcon = 'mdi-folder'
+
+// 预设图标选项
+const iconOptions = [
+  'mdi-folder',
+  'mdi-folder-star',
+  'mdi-folder-heart',
+  'mdi-folder-cog',
+  'mdi-folder-music',
+  'mdi-folder-image',
+  'mdi-folder-video',
+  'mdi-folder-download',
+  'mdi-folder-network',
+  'mdi-folder-special',
+]
+
+// 预设颜色选项
+const colorOptions = [
+  '#2196F3',
+  '#4CAF50',
+  '#FF9800',
+  '#9C27B0',
+  '#F44336',
+  '#607D8B',
+  '#795548',
+  '#E91E63',
+]
+
+// 预设渐变选项
+const gradientOptions = [
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(33, 150, 243, 0.7) 0%, rgba(33, 150, 243, 0.8) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(76, 175, 80, 0.7) 0%, rgba(76, 175, 80, 0.8) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(255, 152, 0, 0.7) 0%, rgba(255, 152, 0, 0.8) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(156, 39, 176, 0.7) 0%, rgba(156, 39, 176, 0.8) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(244, 67, 54, 0.7) 0%, rgba(244, 67, 54, 0.8) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(96, 125, 139, 0.7) 0%, rgba(96, 125, 139, 0.8) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(233, 30, 99, 0.7) 0%, rgba(233, 30, 99, 0.8) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(63, 81, 181, 0.7) 0%, rgba(156, 39, 176, 0.8) 100%)',
+]
+
+// 输入参数
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  folderConfig: {
+    type: Object as PropType<FolderConfig>,
+    default: () => ({}),
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close', 'save'])
+
+// 文件夹设置
+const folderSettings = ref<FolderConfig>({
+  background: '',
+  icon: defaultIcon,
+  color: defaultColor,
+  gradient: gradientOptions[0],
+  showIcon: true,
+})
+
+// 设置对话框
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+/** 初始化文件夹外观设置。 */
+function initializeSettings() {
+  folderSettings.value = {
+    background: props.folderConfig?.background || '',
+    icon: props.folderConfig?.icon || defaultIcon,
+    color: props.folderConfig?.color || defaultColor,
+    gradient: props.folderConfig?.gradient || gradientOptions[0],
+    showIcon: props.folderConfig?.showIcon !== undefined ? props.folderConfig.showIcon : true,
+  }
+}
+
+/** 保存文件夹外观设置。 */
+function saveSettings() {
+  emit('save', {
+    ...props.folderConfig,
+    ...folderSettings.value,
+  })
+}
+
+onMounted(() => {
+  initializeSettings()
+})
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="600" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VDialogCloseBtn v-model="visible" />
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-palette" class="mr-2" />
+          {{ t('folder.folderAppearanceSettings') }}
+        </VCardTitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VSwitch v-model="folderSettings.showIcon" :label="t('folder.showFolderIcon')" color="primary" hide-details />
+          </VCol>
+
+          <VCol v-if="folderSettings.showIcon" cols="12" md="6">
+            <VCardSubtitle class="pa-0 mb-2">{{ t('folder.icon') }}</VCardSubtitle>
+            <div class="icon-grid">
+              <VBtn
+                v-for="icon in iconOptions"
+                icon
+                :key="icon"
+                :variant="folderSettings.icon === icon ? 'tonal' : 'text'"
+                :color="folderSettings.icon === icon ? 'primary' : 'default'"
+                size="large"
+                class="ma-1"
+                @click="folderSettings.icon = icon"
+              >
+                <VIcon :icon="icon" size="24" />
+              </VBtn>
+            </div>
+          </VCol>
+
+          <VCol v-if="folderSettings.showIcon" cols="12" md="6">
+            <VCardSubtitle class="pa-0 mb-2">{{ t('folder.iconColor') }}</VCardSubtitle>
+            <div class="color-grid">
+              <VBtn
+                v-for="color in colorOptions"
+                :key="color"
+                :variant="folderSettings.color === color ? 'tonal' : 'text'"
+                :color="color"
+                size="large"
+                class="ma-1 color-btn"
+                :style="{ backgroundColor: color }"
+                @click="folderSettings.color = color"
+              >
+                <VIcon v-if="folderSettings.color === color" icon="mdi-check" color="white" />
+              </VBtn>
+            </div>
+          </VCol>
+
+          <VCol cols="12">
+            <VCardSubtitle class="pa-0 mb-2">{{ t('folder.backgroundGradient') }}</VCardSubtitle>
+            <div class="gradient-grid">
+              <VBtn
+                v-for="(gradient, index) in gradientOptions"
+                :key="index"
+                :variant="folderSettings.gradient === gradient ? 'tonal' : 'text'"
+                class="ma-1 gradient-btn"
+                :style="{ background: gradient }"
+                size="large"
+                @click="folderSettings.gradient = gradient"
+              >
+                <VIcon v-if="folderSettings.gradient === gradient" icon="mdi-check" color="white" />
+              </VBtn>
+            </div>
+          </VCol>
+
+          <VCol cols="12">
+            <VTextField
+              v-model="folderSettings.background"
+              :label="t('folder.customBackgroundImageURL')"
+              placeholder="https://example.com/image.jpg"
+              variant="outlined"
+              :hint="t('folder.customBackgroundImageHint')"
+              persistent-hint
+              prepend-inner-icon="mdi-image"
+            />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn color="primary" prepend-icon="mdi-content-save" class="px-5" @click="saveSettings">保存</VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/PluginLogDialog.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { Plugin } from '@/api/types'
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+const LoggingView = defineAsyncComponent(() => import('@/views/system/LoggingView.vue'))
+
+// 多语言
+const { t } = useI18n()
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  plugin: {
+    type: Object as PropType<Plugin>,
+    required: true,
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close'])
+
+// 弹窗显示状态
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+/** 打开当前插件日志的新窗口。 */
+function openLoggerWindow() {
+  const url = `${
+    import.meta.env.VITE_API_BASE_URL
+  }system/logging?length=-1&logfile=plugins/${props.plugin?.id?.toLowerCase()}.log`
+  window.open(url, '_blank')
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" scrollable max-width="72rem" :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VDialogCloseBtn v-model="visible" />
+      <VCardItem>
+        <VCardTitle class="d-inline-flex">
+          <VIcon icon="mdi-file-document" class="me-2" />
+          {{ t('plugin.logTitle') }}
+          <a class="mx-2 d-inline-flex align-center cursor-pointer" @click="openLoggerWindow">
+            <VChip color="grey-darken-1" size="small" class="ml-2">
+              <VIcon icon="mdi-open-in-new" size="small" start />
+              {{ t('common.openInNewWindow') }}
+            </VChip>
+          </a>
+        </VCardTitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText class="pa-0">
+        <LoggingView :logfile="`plugins/${props.plugin?.id?.toLowerCase()}.log`" />
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/PluginMarketDetailDialog.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+import api from '@/api'
+import type { Plugin } from '@/api/types'
+import { formatDownloadCount } from '@/@core/utils/formatters'
+import { getLogoUrl } from '@/utils/imageUtils'
+import { useToast } from 'vue-toastification'
+import { useI18n } from 'vue-i18n'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const ProgressDialog = defineAsyncComponent(() => import('@/components/dialog/ProgressDialog.vue'))
+
+// 多语言
+const { t } = useI18n()
+
+// 提示框
+const $toast = useToast()
+
+// 输入参数
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  plugin: {
+    type: Object as PropType<Plugin>,
+    required: true,
+  },
+  count: Number,
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close', 'install'])
+
+// 弹窗显示状态
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+// 图片对象
+const imageRef = ref<any>()
+
+// 图片是否加载失败
+const imageLoadError = ref(false)
+
+let progressDialogController: ReturnType<typeof openSharedDialog> | null = null
+
+/** 打开插件安装进度弹窗。 */
+function showInstallProgress(text: string) {
+  progressDialogController?.close()
+  progressDialogController = openSharedDialog(ProgressDialog, { text }, {}, { closeOn: false })
+}
+
+/** 关闭插件安装进度弹窗。 */
+function closeInstallProgress() {
+  progressDialogController?.close()
+  progressDialogController = null
+}
+
+/** 计算插件图标路径。 */
+function pluginIconPath() {
+  if (imageLoadError.value) return getLogoUrl('plugin')
+  if (props.plugin?.plugin_icon?.startsWith('http'))
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(
+      props.plugin?.plugin_icon,
+    )}&cache=true`
+
+  return `./plugin_icon/${props.plugin?.plugin_icon}`
+}
+
+/** 访问插件项目或作者页面。 */
+function visitPluginPage() {
+  let repoUrl = props.plugin?.repo_url
+  if (props.plugin?.is_local || repoUrl?.startsWith('local://')) {
+    repoUrl = props.plugin?.author_url
+  }
+  if (repoUrl) {
+    if (repoUrl.includes('raw.githubusercontent.com')) {
+      if (!repoUrl.endsWith('/')) repoUrl += '/'
+
+      if (repoUrl.split('/').length < 6) repoUrl = `${repoUrl}main/`
+
+      try {
+        const [user, repo] = repoUrl.split('/').slice(-4, -2)
+        repoUrl = `https://github.com/${user}/${repo}`
+      } catch (error) {
+        return
+      }
+    }
+  } else {
+    repoUrl = props.plugin?.author_url
+  }
+  window.open(repoUrl, '_blank')
+}
+
+/** 安装插件并通知父级刷新市场列表。 */
+async function installPlugin() {
+  try {
+    showInstallProgress(
+      t('plugin.installing', {
+        name: props.plugin?.plugin_name,
+        version: props?.plugin?.plugin_version,
+      }),
+    )
+
+    const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
+      params: {
+        repo_url: props.plugin?.repo_url,
+        force: props.plugin?.has_update,
+      },
+    })
+
+    closeInstallProgress()
+
+    if (result.success) {
+      $toast.success(t('plugin.installSuccess', { name: props.plugin?.plugin_name }))
+      visible.value = false
+      emit('install')
+    } else {
+      $toast.error(t('plugin.installFailed', { name: props.plugin?.plugin_name, message: result.message }))
+    }
+  } catch (error) {
+    closeInstallProgress()
+    console.error(error)
+  }
+}
+
+onUnmounted(() => {
+  closeInstallProgress()
+})
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="30rem">
+    <VCard>
+      <VDialogCloseBtn v-model="visible" />
+      <VCardText>
+        <VCol>
+          <div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
+            <div class="mx-auto mt-5">
+              <VAvatar size="64">
+                <VImg
+                  ref="imageRef"
+                  :src="pluginIconPath()"
+                  aspect-ratio="4/3"
+                  cover
+                  @error="imageLoadError = true"
+                />
+              </VAvatar>
+            </div>
+            <div class="flex-grow">
+              <VCardItem>
+                <VCardTitle class="text-center text-md-left">
+                  {{ props.plugin?.plugin_name }}
+                </VCardTitle>
+                <VCardSubtitle
+                  class="text-center text-md-left break-words whitespace-break-spaces line-clamp-4 overflow-hidden text-ellipsis ..."
+                >
+                  {{ props.plugin?.plugin_desc }}
+                </VCardSubtitle>
+                <VList lines="one">
+                  <VListItem class="ps-0">
+                    <VListItemTitle class="text-center text-md-left">
+                      <span class="font-weight-medium">{{ t('common.version') }}：</span>
+                      <span class="text-body-1"> v{{ props.plugin?.plugin_version }}</span>
+                    </VListItemTitle>
+                  </VListItem>
+                  <VListItem class="ps-0">
+                    <VListItemTitle class="text-center text-md-left">
+                      <span class="font-weight-medium">{{ t('common.author') }}：</span>
+                      <span class="text-body-1 cursor-pointer" @click="visitPluginPage">
+                        {{ props.plugin?.plugin_author }}
+                      </span>
+                    </VListItemTitle>
+                  </VListItem>
+                </VList>
+                <div class="text-center text-md-left">
+                  <VBtn color="primary" @click="installPlugin" prepend-icon="mdi-download">
+                    {{ t('plugin.installToLocal') }}
+                  </VBtn>
+                  <div class="text-xs mt-2" v-if="props.count">
+                    <VIcon icon="mdi-fire" />
+                    {{ t('plugin.totalDownloads', { count: formatDownloadCount(props.count) }) }}
+                  </div>
+                </div>
+              </VCardItem>
+            </div>
+          </div>
+        </VCol>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/PluginSearchDialog.vue

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import { getLogoUrl } from '@/utils/imageUtils'
+import type { Plugin } from '@/api/types'
+import { useDisplay } from 'vuetify'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  keyword: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  plugins: {
+    type: Array as PropType<Plugin[]>,
+    default: () => [],
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'open-plugin', plugin: Plugin): void
+  (event: 'update:keyword', value: string): void
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const { t } = useI18n()
+const display = useDisplay()
+const pluginIconLoaded = ref<Record<string, boolean>>({})
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+const searchKeyword = computed({
+  get: () => props.keyword,
+  set: value => emit('update:keyword', value),
+})
+
+// 返回插件图标地址，并在远程图标失败后回退到默认图标。
+function pluginIcon(item: Plugin) {
+  if (pluginIconLoaded.value[item.id || '0'] === false) return getLogoUrl('plugin')
+  if (item?.plugin_icon?.startsWith('http')) {
+    return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(item?.plugin_icon)}&cache=true`
+  }
+
+  return `./plugin_icon/${item?.plugin_icon}`
+}
+
+// 标记指定插件图标加载失败。
+function pluginIconError(item: Plugin) {
+  pluginIconLoaded.value[item.id || '0'] = false
+}
+
+// 获取插件标签列表。
+function pluginLabels(label: string | undefined) {
+  if (!label) return []
+  return label.split(',')
+}
+
+// 关闭搜索弹窗并通知共享弹窗 Host 回收实例。
+function closeDialog() {
+  emit('close')
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <VDialog
+    v-model="dialogVisible"
+    scrollable
+    max-width="40rem"
+    :max-height="!display.mdAndUp.value ? '' : '85vh'"
+    :fullscreen="!display.mdAndUp.value"
+  >
+    <VCard class="mx-auto" width="100%">
+      <VToolbar flat class="p-0">
+        <VTextField
+          v-model="searchKeyword"
+          :label="t('plugin.searchPlugins')"
+          single-line
+          :placeholder="t('plugin.searchPlaceholder')"
+          variant="solo"
+          prepend-inner-icon="mdi-magnify"
+          flat
+          class="mx-1"
+        />
+      </VToolbar>
+      <VDialogCloseBtn @click="closeDialog" />
+      <VList v-if="plugins.length > 0" lines="two">
+        <VVirtualScroll :items="plugins">
+          <template #default="{ item }">
+            <VListItem @click="emit('open-plugin', item)">
+              <template #prepend>
+                <VAvatar>
+                  <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" />
+                      </div>
+                    </template>
+                  </VImg>
+                </VAvatar>
+              </template>
+              <VListItemTitle>
+                {{ item.plugin_name }}<span class="text-sm ms-2 mt-1 text-gray-500">v{{ item?.plugin_version }}</span>
+                <VIcon v-if="item.installed" color="success" icon="mdi-check-circle" class="ms-2" size="small" />
+              </VListItemTitle>
+              <VListItemSubtitle>
+                <VChip
+                  v-for="label in pluginLabels(item.plugin_label)"
+                  :key="label"
+                  variant="tonal"
+                  size="small"
+                  class="me-1 my-1"
+                  color="info"
+                  label
+                >
+                  {{ label }}
+                </VChip>
+                {{ item.plugin_desc }}
+              </VListItemSubtitle>
+            </VListItem>
+          </template>
+        </VVirtualScroll>
+      </VList>
+    </VCard>
+  </VDialog>
+</template>
+

src/components/dialog/PluginVersionHistoryDialog.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { Plugin } from '@/api/types'
+import VersionHistory from '@/components/misc/VersionHistory.vue'
+import { useI18n } from 'vue-i18n'
+
+// 多语言
+const { t } = useI18n()
+
+// 输入参数
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  plugin: {
+    type: Object as PropType<Plugin>,
+    required: true,
+  },
+  showUpdateAction: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close', 'update'])
+
+// 弹窗显示状态
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+/** 触发插件更新操作。 */
+function handleUpdate() {
+  emit('update')
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" width="600" max-height="85vh" scrollable>
+    <VCard :title="t('plugin.updateHistoryTitle', { name: props.plugin?.plugin_name })">
+      <VDialogCloseBtn v-model="visible" />
+      <VDivider />
+      <VersionHistory :history="props.plugin?.history" />
+      <template v-if="props.showUpdateAction">
+        <VDivider />
+        <VCardItem>
+          <VBtn @click="handleUpdate" block>
+            <template #prepend>
+              <VIcon icon="mdi-arrow-up-circle-outline" />
+            </template>
+            {{ t('plugin.updateToLatest') }}
+          </VBtn>
+        </VCardItem>
+      </template>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/ProgressDialog.vue

@@ -7,6 +7,9 @@ const props = defineProps({
   value: Number,
   text: String,
 })
+
+// 有明确进度值时显示确定进度，否则显示不确定进度条。
+const hasProgressValue = computed(() => typeof props.value === 'number' && Number.isFinite(props.value))
 </script>
 <template>
   <!-- Progress Dialog -->
@@ -14,7 +17,12 @@ const props = defineProps({
     <VCard elevation="3" color="primary">
       <VCardText class="text-center">
         {{ props.text || t('dialog.progress.processing') }}
-        <VProgressLinear color="white" class="mb-0 mt-1" :model-value="props.value" indeterminate />
+        <VProgressLinear
+          color="white"
+          class="mb-0 mt-1"
+          :model-value="hasProgressValue ? props.value : undefined"
+          :indeterminate="!hasProgressValue"
+        />
       </VCardText>
     </VCard>
   </VDialog>

src/components/dialog/SharedDialogHost.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import type { SharedDialogEntry } from '@/composables/useSharedDialog'
+import { closeSharedDialog, useSharedDialog } from '@/composables/useSharedDialog'
+
+const { dialogs } = useSharedDialog()
+type ReadonlySharedDialogEntry = Readonly<SharedDialogEntry> & {
+  readonly closeOn: readonly string[]
+  readonly events: Readonly<SharedDialogEntry['events']>
+  readonly props: Readonly<SharedDialogEntry['props']>
+}
+
+// 关闭弹窗并同步组件自身的 v-model 状态。
+function closeEntry(entry: ReadonlySharedDialogEntry) {
+  closeSharedDialog(entry.id)
+}
+
+// 处理弹窗内部 v-model 变化，用户点击遮罩或返回键关闭时也能释放实例。
+function handleModelUpdate(entry: ReadonlySharedDialogEntry, value: boolean) {
+  if (!value) closeSharedDialog(entry.id)
+}
+
+// 转发业务事件给调用方，并按配置自动关闭当前弹窗。
+function handleDialogEvent(entry: ReadonlySharedDialogEntry, eventName: string, args: any[]) {
+  entry.events[eventName]?.(...args)
+
+  if (entry.closeOn.includes(eventName) && (eventName !== 'update:modelValue' || args[0] === false)) {
+    closeEntry(entry)
+  }
+}
+
+// 生成动态组件事件监听器，让不同业务弹窗复用同一个 Host。
+function createDialogListeners(entry: ReadonlySharedDialogEntry) {
+  const listeners: Record<string, (...args: any[]) => void> = {}
+
+  listeners['update:modelValue'] = value => {
+    handleModelUpdate(entry, Boolean(value))
+    entry.events['update:modelValue']?.(value)
+  }
+
+  Object.keys(entry.events).forEach(eventName => {
+    if (eventName === 'update:modelValue') return
+
+    listeners[eventName] = (...args: any[]) => handleDialogEvent(entry, eventName, args)
+  })
+
+  entry.closeOn.forEach(eventName => {
+    if (!listeners[eventName]) {
+      listeners[eventName] = (...args: any[]) => handleDialogEvent(entry, eventName, args)
+    }
+  })
+
+  return listeners
+}
+</script>
+
+<template>
+  <Component
+    :is="entry.component"
+    v-for="entry in dialogs"
+    :key="entry.id"
+    v-bind="{ ...entry.props, modelValue: entry.visible }"
+    v-on="createDialogListeners(entry)"
+  />
+</template>

src/components/dialog/ShortcutLogDialog.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+const LoggingView = defineAsyncComponent(() => import('@/views/system/LoggingView.vue'))
+
+// 国际化
+const { t } = useI18n()
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close'])
+
+// 弹窗显示状态
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+/** 拼接全部日志 URL。 */
+function allLoggingUrl() {
+  return `${import.meta.env.VITE_API_BASE_URL}system/logging?length=-1`
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VDialogCloseBtn v-model="visible" />
+      <VCardItem>
+        <VCardTitle class="d-inline-flex">
+          <VIcon icon="mdi-file-document" class="me-2" />
+          {{ t('shortcut.log.subtitle') }}
+          <a class="mx-2 d-inline-flex align-center" :href="allLoggingUrl()" target="_blank">
+            <VChip color="grey-darken-1" size="small" class="ml-2">
+              <VIcon icon="mdi-open-in-new" size="small" start />
+              {{ t('common.openInNewWindow') }}
+            </VChip>
+          </a>
+        </VCardTitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText class="pa-0">
+        <LoggingView logfile="moviepilot.log" />
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/ShortcutMessageDialog.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import api from '@/api'
+import { clearAppBadge } from '@/utils/badge'
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+const MessageView = defineAsyncComponent(() => import('@/views/system/MessageView.vue'))
+
+type MessageViewExpose = {
+  pauseSSE?: () => void
+  resumeSSE?: () => void
+  refreshLatestMessages?: () => Promise<void> | void
+  forceScrollToEnd?: () => void
+}
+
+// 国际化
+const { t } = useI18n()
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close'])
+
+// 弹窗显示状态
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+// 输入消息
+const user_message = ref('')
+
+// 发送按钮是否可用
+const sendButtonDisabled = ref(false)
+
+// 消息视图引用
+const messageViewRef = ref<MessageViewExpose | null>(null)
+
+/** 发送 Web 消息。 */
+async function sendMessage() {
+  const messageText = user_message.value.trim()
+  if (!messageText) {
+    return
+  }
+
+  try {
+    sendButtonDisabled.value = true
+    await api.post(`message/web?text=${encodeURIComponent(messageText)}`)
+    user_message.value = ''
+    messageViewRef.value?.forceScrollToEnd?.()
+  } catch (error) {
+    console.error(error)
+  } finally {
+    sendButtonDisabled.value = false
+  }
+}
+
+watch(visible, async newValue => {
+  if (newValue) {
+    await nextTick()
+    messageViewRef.value?.resumeSSE?.()
+    messageViewRef.value?.forceScrollToEnd?.()
+
+    window.setTimeout(() => {
+      void clearAppBadge()
+    }, 500)
+
+    return
+  }
+
+  messageViewRef.value?.pauseSSE?.()
+})
+
+onMounted(async () => {
+  await nextTick()
+  messageViewRef.value?.resumeSSE?.()
+  messageViewRef.value?.forceScrollToEnd?.()
+
+  window.setTimeout(() => {
+    void clearAppBadge()
+  }, 500)
+})
+
+onUnmounted(() => {
+  messageViewRef.value?.pauseSSE?.()
+})
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-message" class="me-2" />
+          {{ t('shortcut.message.subtitle') }}
+        </VCardTitle>
+        <VDialogCloseBtn v-model="visible" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <MessageView ref="messageViewRef" />
+      </VCardText>
+      <VDivider />
+      <VCardActions class="pa-4">
+        <div class="d-flex w-100 gap-2">
+          <VTextField
+            v-model="user_message"
+            variant="outlined"
+            hide-details
+            density="compact"
+            :placeholder="t('common.inputMessage')"
+            @keyup.enter="sendMessage"
+          />
+          <VBtn
+            variant="elevated"
+            :disabled="sendButtonDisabled"
+            @click="sendMessage"
+            :loading="sendButtonDisabled"
+            color="primary"
+            prepend-icon="mdi-send"
+            >{{ t('common.send') }}
+          </VBtn>
+        </div>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/ShortcutToolDialog.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 输入参数
+const props = withDefaults(
+  defineProps<{
+    bodyClass?: string
+    cardClass?: string
+    icon?: string
+    maxWidth?: string
+    modelValue?: boolean
+    subtitle?: string
+    title: string
+    view: Component
+    viewProps?: Record<string, unknown>
+  }>(),
+  {
+    bodyClass: '',
+    cardClass: '',
+    icon: 'mdi-cog',
+    maxWidth: '35rem',
+    modelValue: true,
+    viewProps: () => ({}),
+  },
+)
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close'])
+
+// 弹窗显示状态
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" :max-width="props.maxWidth" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard :class="props.cardClass">
+      <VCardItem>
+        <VCardTitle>
+          <VIcon :icon="props.icon" class="me-2" />
+          {{ props.title }}
+        </VCardTitle>
+        <VCardSubtitle v-if="props.subtitle">{{ props.subtitle }}</VCardSubtitle>
+        <VDialogCloseBtn v-model="visible" />
+      </VCardItem>
+      <VDivider />
+      <VCardText :class="props.bodyClass">
+        <Component :is="props.view" v-bind="props.viewProps" />
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped>
+.system-health-dialog-card {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.system-health-dialog-body {
+  /* 弹窗正文本身不滚动，滚动只交给健康检查结果列表。 */
+  display: flex;
+  flex: 1 1 auto;
+  block-size: min(42rem, calc(100dvh - 8rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
+  min-block-size: 0;
+  overflow: hidden !important;
+}
+
+:global(.v-dialog--fullscreen) .system-health-dialog-body {
+  block-size: auto;
+}
+</style>

src/components/dialog/StorageCustomConfigDialog.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { StorageConf } from '@/api/types'
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 国际化
+const { t } = useI18n()
+
+// 定义输入
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  storage: {
+    type: Object as PropType<StorageConf>,
+    required: true,
+  },
+})
+
+// 定义事件
+const emit = defineEmits(['update:modelValue', 'close', 'done'])
+
+// 自定义存储名称
+const customName = ref(props.storage.name)
+
+// 自定义存储类型
+const storageType = ref(props.storage.type)
+
+// 自定义存储配置对话框
+const customConfigDialog = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+/** 保存自定义存储基础信息并通知父级刷新。 */
+function handleDone() {
+  const nextStorage = {
+    ...props.storage,
+    name: customName.value,
+    type: storageType.value,
+  }
+  customConfigDialog.value = false
+  emit('done', nextStorage)
+}
+</script>
+
+<template>
+  <VDialog
+    v-if="customConfigDialog"
+    v-model="customConfigDialog"
+    scrollable
+    max-width="30rem"
+    :fullscreen="!display.mdAndUp.value"
+  >
+    <VCard>
+      <VCardItem>
+        <template #prepend>
+          <VIcon icon="mdi-cog" />
+        </template>
+        <VCardTitle>{{ t('storage.custom') }}</VCardTitle>
+        <VDialogCloseBtn v-model="customConfigDialog" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12" md="6">
+            <VTextField
+              v-model="storageType"
+              :label="t('storage.type')"
+              :hint="t('storage.customTypeHint')"
+              persistent-hint
+              prepend-inner-icon="mdi-database"
+            />
+          </VCol>
+          <VCol cols="12" md="6">
+            <VTextField
+              v-model="customName"
+              :label="t('storage.name')"
+              persistent-hint
+              prepend-inner-icon="mdi-label"
+            />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <VCardActions class="pt-3">
+        <VBtn @click="handleDone" prepend-icon="mdi-content-save" class="px-5">
+          {{ t('common.save') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/TorrentAllFiltersDialog.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { useDisplay } from 'vuetify'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const display = useDisplay()
+
+const props = withDefaults(
+  defineProps<{
+    filterForm: Record<string, string[]>
+    filterOptions: Record<string, string[]>
+    filterTitles: Record<string, string>
+    modelValue?: boolean
+  }>(),
+  {
+    modelValue: true,
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'clearAllFilters'): void
+  (event: 'clearFilter', key: string): void
+  (event: 'close'): void
+  (event: 'selectAll', key: string): void
+  (event: 'update:filterForm', key: string, values: string[]): void
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+const selectedCount = computed(() => {
+  return Object.values(props.filterForm).reduce((count, values) => count + values.length, 0)
+})
+
+// 给定过滤类型返回不同图标。
+function getFilterIcon(key: string) {
+  const icons: Record<string, string> = {
+    site: 'mdi-server-network',
+    season: 'mdi-television-classic',
+    freeState: 'mdi-gift-outline',
+    resolution: 'mdi-monitor-screenshot',
+    videoCode: 'mdi-video-vintage',
+    edition: 'mdi-quality-high',
+    releaseGroup: 'mdi-account-group-outline',
+  }
+  return icons[key] || 'mdi-filter-variant'
+}
+
+// 将筛选值变化回传给过滤条。
+function updateFilter(key: string, values: string[]) {
+  emit('update:filterForm', key, values)
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="50rem" location="center" scrollable :fullscreen="!display.mdAndUp.value">
+    <VCard>
+      <VDialogCloseBtn v-model="visible" />
+      <VCardTitle class="py-3 d-flex align-center">
+        <VIcon icon="mdi-filter-variant" class="me-2"></VIcon>
+        <span>{{ t('torrent.allFilters') }}</span>
+        <VSpacer />
+        <VBtn
+          v-if="selectedCount > 0"
+          class="me-10"
+          variant="text"
+          size="small"
+          color="error"
+          @click="emit('clearAllFilters')"
+        >
+          {{ t('torrent.clearAll') }}
+        </VBtn>
+      </VCardTitle>
+      <VDivider />
+      <VCardText>
+        <div class="all-filters-grid">
+          <VCard
+            v-for="(title, key) in props.filterTitles"
+            :key="key"
+            v-show="props.filterOptions[key].length > 0"
+            variant="tonal"
+            class="filter-section"
+          >
+            <VCardItem class="py-2">
+              <template #prepend>
+                <VIcon :icon="getFilterIcon(String(key))" class="me-2"></VIcon>
+              </template>
+              <VCardTitle>{{ title }}</VCardTitle>
+              <template #append>
+                <VBtn variant="text" size="small" color="primary" @click="emit('selectAll', String(key))">
+                  {{ t('torrent.selectAll') }}
+                </VBtn>
+                <VBtn
+                  v-if="props.filterForm[key].length > 0"
+                  variant="text"
+                  size="small"
+                  color="error"
+                  @click="emit('clearFilter', String(key))"
+                >
+                  {{ t('torrent.clear') }}
+                </VBtn>
+              </template>
+            </VCardItem>
+            <VCardText>
+              <VChipGroup
+                :model-value="props.filterForm[key]"
+                column
+                multiple
+                class="filter-options"
+                @update:model-value="(val: string[]) => updateFilter(String(key), val)"
+              >
+                <VChip
+                  v-for="option in props.filterOptions[key]"
+                  :key="option"
+                  :value="option"
+                  filter
+                  variant="elevated"
+                  class="ma-1 filter-chip"
+                  size="small"
+                >
+                  {{ option }}
+                </VChip>
+              </VChipGroup>
+            </VCardText>
+          </VCard>
+        </div>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped>
+.all-filters-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+}
+</style>

src/components/dialog/TorrentMoreSourcesDialog.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import type { Context } from '@/api/types'
+import { formatFileSize } from '@/@core/utils/formatters'
+
+// 输入参数
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+  items: {
+    type: Array as PropType<Context[]>,
+    default: () => [],
+  },
+  siteIcons: {
+    type: Object as PropType<Record<number, string>>,
+    default: () => ({}),
+  },
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['update:modelValue', 'close', 'download', 'detail'])
+
+// 弹窗显示状态
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+/** 获取优惠标签类。 */
+function getPromotionChipClass(downloadVolumeFactor: number | undefined, uploadVolumeFactor: number | undefined) {
+  if (!downloadVolumeFactor) return 'chip-free'
+  if (downloadVolumeFactor === 0) return 'chip-free'
+  else if (downloadVolumeFactor < 1) return 'chip-discount'
+  else if (uploadVolumeFactor !== undefined && uploadVolumeFactor > 1) return 'chip-bonus'
+  else return ''
+}
+
+/** 选择更多来源进行下载。 */
+function handleDownload(item: Context) {
+  emit('download', item)
+}
+
+/** 打开种子详情页。 */
+function handleDetail(item: Context) {
+  emit('detail', item)
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="25rem" location="center">
+    <VCard>
+      <VCardTitle class="py-3 d-flex align-center">
+        <span>其他来源</span>
+        <VSpacer />
+        <VBtn variant="text" size="small" icon="mdi-close" @click.stop="visible = false"></VBtn>
+      </VCardTitle>
+
+      <VDivider />
+
+      <VCardText class="more-sources-content pa-0">
+        <VList lines="one" density="compact">
+          <VListItem
+            v-for="(item, index) in props.items"
+            :key="index"
+            @click.stop="handleDownload(item)"
+            class="hover:bg-primary-lighten-5"
+          >
+            <template v-slot:prepend>
+              <div class="d-flex align-center gap-1">
+                <VImg
+                  v-if="props.siteIcons[item.torrent_info?.site || 0]"
+                  :src="props.siteIcons[item.torrent_info?.site || 0]"
+                  :alt="item.torrent_info?.site_name"
+                  width="16"
+                  height="16"
+                  class="rounded"
+                />
+                <VAvatar v-else size="16" class="text-caption bg-surface-variant">
+                  {{ item.torrent_info?.site_name?.substring(0, 1) }}
+                </VAvatar>
+                <span class="text-body-2 font-weight-bold">{{ item.torrent_info.site_name }}</span>
+
+                <VChip
+                  v-if="item.meta_info?.season_episode"
+                  class="chip-season rounded-sm ml-1"
+                  size="x-small"
+                  variant="elevated"
+                >
+                  {{ item.meta_info.season_episode }}
+                </VChip>
+
+                <VChip
+                  v-if="item.torrent_info?.downloadvolumefactor !== 1 || item.torrent_info?.uploadvolumefactor !== 1"
+                  :class="
+                    getPromotionChipClass(
+                      item.torrent_info?.downloadvolumefactor,
+                      item.torrent_info?.uploadvolumefactor,
+                    )
+                  "
+                  size="x-small"
+                  variant="elevated"
+                  class="rounded-sm ml-1"
+                >
+                  {{ item.torrent_info?.volume_factor }}
+                </VChip>
+              </div>
+            </template>
+
+            <template v-slot:append>
+              <div class="d-flex align-center gap-2">
+                <span class="text-caption font-weight-bold text-primary">
+                  {{ formatFileSize(item.torrent_info?.size) }}
+                </span>
+                <span class="d-flex align-center text-caption font-weight-bold">
+                  <VIcon size="small" color="success" icon="mdi-arrow-up" class="mr-1"></VIcon>
+                  {{ item.torrent_info?.seeders }}
+                </span>
+                <span>
+                  <VIcon
+                    @click.stop="handleDetail(item)"
+                    size="small"
+                    color="secondary"
+                    icon="mdi-arrow-top-right"
+                    class="mr-1"
+                  ></VIcon>
+                </span>
+              </div>
+            </template>
+          </VListItem>
+        </VList>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped>
+.more-sources-content {
+  max-block-size: 60vh;
+  overflow-y: auto;
+}
+</style>

src/components/dialog/TorrentSingleFilterDialog.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = withDefaults(
+  defineProps<{
+    filterForm: Record<string, string[]>
+    filterKey: string
+    filterOptions: Record<string, string[]>
+    filterTitle: string
+    modelValue?: boolean
+  }>(),
+  {
+    modelValue: true,
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'clearFilter', key: string): void
+  (event: 'close'): void
+  (event: 'selectAll', key: string): void
+  (event: 'update:filterForm', key: string, values: string[]): void
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+const filterValues = computed(() => props.filterForm[props.filterKey] ?? [])
+const options = computed(() => props.filterOptions[props.filterKey] ?? [])
+
+// 给定过滤类型返回不同图标。
+function getFilterIcon(key: string) {
+  const icons: Record<string, string> = {
+    site: 'mdi-server-network',
+    season: 'mdi-television-classic',
+    freeState: 'mdi-gift-outline',
+    resolution: 'mdi-monitor-screenshot',
+    videoCode: 'mdi-video-vintage',
+    edition: 'mdi-quality-high',
+    releaseGroup: 'mdi-account-group-outline',
+  }
+  return icons[key] || 'mdi-filter-variant'
+}
+
+// 将当前筛选值变化回传给过滤条。
+function updateFilter(values: string[]) {
+  emit('update:filterForm', props.filterKey, values)
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="25rem" max-height="85vh" location="center" scrollable>
+    <VCard>
+      <VCardTitle class="py-3 d-flex align-center">
+        <VIcon :icon="getFilterIcon(props.filterKey)" class="me-2"></VIcon>
+        <span>{{ props.filterTitle }}</span>
+        <VSpacer />
+        <VBtn
+          v-if="filterValues.length > 0"
+          variant="text"
+          size="small"
+          color="error"
+          @click="emit('clearFilter', props.filterKey)"
+        >
+          {{ t('torrent.clear') }}
+        </VBtn>
+        <VBtn variant="text" size="small" color="primary" @click="emit('selectAll', props.filterKey)">
+          {{ t('torrent.selectAll') }}
+        </VBtn>
+      </VCardTitle>
+      <VDivider />
+      <VCardText>
+        <VChipGroup
+          :model-value="filterValues"
+          column
+          multiple
+          class="filter-options"
+          @update:model-value="updateFilter"
+        >
+          <VChip
+          v-for="option in options"
+            :key="option"
+            :value="option"
+            filter
+            variant="elevated"
+            class="ma-1 filter-chip"
+            size="small"
+          >
+            {{ option }}
+          </VChip>
+        </VChipGroup>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn color="primary" prepend-icon="mdi-check" class="px-5" @click="visible = false">
+          {{ t('torrent.confirm') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/TransferHistoryDeleteDialog.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    title?: string
+  }>(),
+  {
+    modelValue: true,
+    title: '',
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'delete', deleteSrc: boolean, deleteDest: boolean): void
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+// 选择删除范围并通知历史列表执行实际删除。
+function selectDeleteMode(deleteSrc: boolean, deleteDest: boolean) {
+  emit('delete', deleteSrc, deleteDest)
+}
+</script>
+
+<template>
+  <VBottomSheet v-if="visible" v-model="visible" inset>
+    <VCard class="text-center">
+      <VDialogCloseBtn v-model="visible" />
+      <VCardTitle class="pe-10">
+        {{ props.title }}
+      </VCardTitle>
+      <div class="d-flex flex-column flex-lg-row justify-center my-3">
+        <VBtn color="primary" class="mb-2 mx-2" @click="selectDeleteMode(false, false)">
+          {{ $t('transferHistory.deleteRecordOnly') }}
+        </VBtn>
+        <VBtn color="warning" class="mb-2 mx-2" @click="selectDeleteMode(true, false)">
+          {{ $t('transferHistory.deleteSourceOnly') }}
+        </VBtn>
+        <VBtn color="info" class="mb-2 mx-2" @click="selectDeleteMode(false, true)">
+          {{ $t('transferHistory.deleteDestOnly') }}
+        </VBtn>
+        <VBtn color="error" class="mb-2 mx-2" @click="selectDeleteMode(true, true)">
+          {{ $t('transferHistory.deleteAll') }}
+        </VBtn>
+      </div>
+    </VCard>
+  </VBottomSheet>
+</template>

src/components/dialog/TransparencySettingsDialog.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { useTransparencySettings } from '@/composables/useTransparencySettings'
+import { useI18n } from 'vue-i18n'
+
+// 国际化
+const { t } = useI18n()
+
+// 输入参数
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+  }>(),
+  {
+    modelValue: true,
+  },
+)
+
+// 定义触发的自定义事件
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+// 弹窗显示状态
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+const {
+  adjustTransparency,
+  backgroundBlur,
+  backgroundPosterOpacity,
+  currentPresetLevel,
+  onBackgroundBlurChange,
+  onBackgroundPosterOpacityChange,
+  onBlurChange,
+  onOpacityChange,
+  resetTransparencySettings,
+  transparencyBlur,
+  transparencyOpacity,
+} = useTransparencySettings()
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="30rem">
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-opacity" class="me-2" />
+          {{ t('theme.transparencyAdjust') }}
+        </VCardTitle>
+        <VDialogCloseBtn v-model="visible" />
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <div class="space-y-6">
+          <div>
+            <div class="d-flex align-center justify-space-between mb-2">
+              <span class="text-body-2">{{ t('theme.transparencyOpacity') }}</span>
+              <span class="text-caption">{{ Math.round(transparencyOpacity * 100) }}%</span>
+            </div>
+            <VSlider
+              v-model="transparencyOpacity"
+              :min="0"
+              :max="1"
+              :step="0.01"
+              color="primary"
+              @update:model-value="onOpacityChange"
+            />
+          </div>
+
+          <div>
+            <div class="d-flex align-center justify-space-between mb-2">
+              <span class="text-body-2">{{ t('theme.transparencyBlur') }}</span>
+              <span class="text-caption">{{ transparencyBlur }}px</span>
+            </div>
+            <VSlider
+              v-model="transparencyBlur"
+              :min="0"
+              :max="30"
+              :step="1"
+              color="primary"
+              @update:model-value="onBlurChange"
+            />
+          </div>
+
+          <div>
+            <div class="d-flex align-center justify-space-between mb-2">
+              <span class="text-body-2">{{ t('theme.backgroundPosterOpacity') }}</span>
+              <span class="text-caption">{{ Math.round(backgroundPosterOpacity * 100) }}%</span>
+            </div>
+            <VSlider
+              v-model="backgroundPosterOpacity"
+              :min="0"
+              :max="1"
+              :step="0.01"
+              color="primary"
+              @update:model-value="onBackgroundPosterOpacityChange"
+            />
+          </div>
+
+          <div>
+            <div class="d-flex align-center justify-space-between mb-2">
+              <span class="text-body-2">{{ t('theme.backgroundBlur') }}</span>
+              <span class="text-caption">{{ backgroundBlur }}px</span>
+            </div>
+            <VSlider
+              v-model="backgroundBlur"
+              :min="0"
+              :max="30"
+              :step="1"
+              color="primary"
+              @update:model-value="onBackgroundBlurChange"
+            />
+          </div>
+
+          <div>
+            <span class="text-body-2 d-block mb-2">{{ t('common.preset') }}</span>
+            <VBtnGroup density="compact" variant="outlined" class="w-full">
+              <VBtn
+                size="small"
+                :color="currentPresetLevel === 'low' ? 'primary' : undefined"
+                @click="adjustTransparency('low')"
+                class="flex-1"
+              >
+                {{ t('theme.transparencyLow') }}
+              </VBtn>
+              <VBtn
+                size="small"
+                :color="currentPresetLevel === 'medium' ? 'primary' : undefined"
+                @click="adjustTransparency('medium')"
+                class="flex-1"
+              >
+                {{ t('theme.transparencyMedium') }}
+              </VBtn>
+              <VBtn
+                size="small"
+                :color="currentPresetLevel === 'high' ? 'primary' : undefined"
+                @click="adjustTransparency('high')"
+                class="flex-1"
+              >
+                {{ t('theme.transparencyHigh') }}
+              </VBtn>
+            </VBtnGroup>
+          </div>
+        </div>
+      </VCardText>
+      <VDivider />
+      <VCardText class="text-center">
+        <VBtn @click="resetTransparencySettings" variant="outlined" class="me-2">
+          <template #prepend>
+            <VIcon icon="mdi-refresh" />
+          </template>
+          {{ t('theme.transparencyReset') }}
+        </VBtn>
+        <VBtn @click="visible = false" color="primary">
+          {{ t('common.confirm') }}
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/VerifyPasswordDialog.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    text?: string
+    title?: string
+  }>(),
+  {
+    modelValue: true,
+    text: '',
+    title: '',
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'confirm', password: string): void
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const password = ref('')
+const passwordVisible = ref(false)
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+// 提交当前输入的密码给调用方继续业务验证。
+function submitPassword() {
+  emit('confirm', password.value)
+}
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="30rem">
+    <VCard>
+      <VCardTitle class="text-h5 text-center mt-4">{{ props.title }}</VCardTitle>
+      <VCardText>
+        <p class="mb-4">{{ props.text }}</p>
+        <VForm @submit.prevent="submitPassword">
+          <VTextField
+            v-model="password"
+            :type="passwordVisible ? 'text' : 'password'"
+            :label="t('user.password')"
+            :append-inner-icon="passwordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+            variant="outlined"
+            prepend-inner-icon="mdi-lock"
+            autocomplete="current-password"
+            @click:append-inner="passwordVisible = !passwordVisible"
+          />
+          <div class="d-flex justify-end gap-4 mt-4">
+            <VBtn variant="outlined" color="secondary" @click="visible = false">
+              {{ t('common.cancel') }}
+            </VBtn>
+            <VBtn type="submit" color="primary">
+              {{ t('common.confirm') }}
+            </VBtn>
+          </div>
+        </VForm>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/filebrowser/FileList.vue

@@ -3,18 +3,21 @@ import type { AxiosRequestConfig, AxiosInstance } from 'axios'
 import type { PropType } from 'vue'
 import { useConfirm } from '@/composables/useConfirm'
 import { useToast } from 'vue-toastification'
-import ReorganizeDialog from '../dialog/ReorganizeDialog.vue'
 import { formatBytes } from '@core/utils/formatters'
 import type { Context, EndPoints, FileItem } from '@/api/types'
 import api from '@/api'
-import ProgressDialog from '../dialog/ProgressDialog.vue'
 import { useDisplay } from 'vuetify'
-import MediaInfoDialog from '../dialog/MediaInfoDialog.vue'
 import { useI18n } from 'vue-i18n'
 import { useBackground } from '@/composables/useBackground'
 import { usePWA } from '@/composables/usePWA'
 import { useAvailableHeight } from '@/composables/useAvailableHeight'
 import { useKeepAliveRefresh, type KeepAliveRefreshContext } from '@/composables/useKeepAliveRefresh'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const FileRenameDialog = defineAsyncComponent(() => import('../dialog/FileRenameDialog.vue'))
+const MediaInfoDialog = defineAsyncComponent(() => import('../dialog/MediaInfoDialog.vue'))
+const ProgressDialog = defineAsyncComponent(() => import('../dialog/ProgressDialog.vue'))
+const ReorganizeDialog = defineAsyncComponent(() => import('../dialog/ReorganizeDialog.vue'))
 
 // 国际化
 const { t } = useI18n()
@@ -76,9 +79,6 @@ const loading = ref(true)
 // 重命名loading
 const renameLoading = ref(false)
 
-// 识别进度条
-const progressDialog = ref(false)
-
 // 识别进度文本
 const progressText = ref(t('common.pleaseWait'))
 
@@ -94,12 +94,6 @@ const filter = ref('')
 // 是否忽略大小写
 const ignoreCase = ref(true)
 
-// 重命名弹窗
-const renamePopper = ref(false)
-
-// 整理弹窗
-const transferPopper = ref(false)
-
 // 新名称
 const newName = ref('')
 
@@ -156,8 +150,20 @@ function setItemSelected(item: FileItem, checked: boolean) {
 // 识别结果
 const nameTestResult = ref<Context>()
 
-// 识别结果对话框
-const nameTestDialog = ref(false)
+let renameDialogController: ReturnType<typeof openSharedDialog> | null = null
+let progressDialogController: ReturnType<typeof openSharedDialog> | null = null
+
+// 打开共享进度弹窗并记录控制器，方便 SSE 更新文本和进度值。
+function openProgressDialog(text = progressText.value, value = progressValue.value) {
+  progressDialogController?.close()
+  progressDialogController = openSharedDialog(ProgressDialog, { text, value }, {}, { closeOn: false })
+}
+
+// 关闭当前共享进度弹窗。
+function closeProgressDialog() {
+  progressDialogController?.close()
+  progressDialogController = null
+}
 
 // 弹出菜单
 const dropdownItems = ref<{ [key: string]: any }[]>([])
@@ -318,17 +324,18 @@ async function batchDelete() {
   if (!confirmed) return
 
   // 显示进度条
-  progressDialog.value = true
   progressValue.value = 0
+  openProgressDialog(progressText.value, progressValue.value)
 
   // 删除选中的项目
   selected.value.every(async item => {
     progressText.value = t('file.deleting', { name: item.name })
+    progressDialogController?.updateProps({ text: progressText.value })
     await deleteItem(item, false)
   })
 
   // 关闭进度条
-  progressDialog.value = false
+  closeProgressDialog()
 
   // 重新加载
   list_files()
@@ -408,12 +415,39 @@ function showRenmae(item: FileItem) {
   currentItem.value = item
   newName.value = item.name
   renameAll.value = false
-  renamePopper.value = true
+  openRenameDialog()
+}
+
+// 打开共享重命名弹窗，并双向同步当前文件名和递归选项。
+function openRenameDialog() {
+  renameDialogController = openSharedDialog(
+    FileRenameDialog,
+    {
+      item: currentItem.value,
+      loading: renameLoading.value,
+      name: newName.value,
+      recursive: renameAll.value,
+    },
+    {
+      'auto-name': get_recommend_name,
+      rename,
+      'update:name': (value: string) => {
+        newName.value = value
+        renameDialogController?.updateProps({ name: value })
+      },
+      'update:recursive': (value: boolean) => {
+        renameAll.value = value
+        renameDialogController?.updateProps({ recursive: value })
+      },
+    },
+    { closeOn: ['close'] },
+  )
 }
 
 // 调用API获取新名称
 async function get_recommend_name() {
   renameLoading.value = true
+  renameDialogController?.updateProps({ loading: true })
   try {
     const result: { [key: string]: any } = await api.get('transfer/name', {
       params: {
@@ -430,23 +464,21 @@ async function get_recommend_name() {
     console.error(error)
   }
   renameLoading.value = false
+  renameDialogController?.updateProps({ loading: false, name: newName.value })
 }
 
 // 重命名
 async function rename() {
   emit('loading', true)
 
-  // 关闭弹窗
-  renamePopper.value = false
-
   // 显示进度条
-  progressDialog.value = true
   progressValue.value = 0
   if (renameAll.value) {
     progressText.value = t('file.renamingAll', { path: currentItem.value?.path })
   } else {
     progressText.value = t('file.renaming', { name: currentItem.value?.name })
   }
+  openProgressDialog(progressText.value, progressValue.value)
   if (renameAll.value) {
     startLoadingProgress()
   }
@@ -471,11 +503,13 @@ async function rename() {
   if (renameAll.value) {
     stopLoadingProgress()
   }
-  progressDialog.value = false
+  closeProgressDialog()
 
   // 通知重新加载
   newName.value = ''
   renameAll.value = false
+  renameDialogController?.close()
+  renameDialogController = null
   emit('loading', false)
   emit('renamed')
 }
@@ -483,21 +517,35 @@ async function rename() {
 // 显示整理对话框
 function showTransfer(item: FileItem) {
   transferItems.value = [item]
-  transferPopper.value = true
+  openTransferDialog()
 }
 
 // 显示批量整理对话框
 function showBatchTransfer() {
   transferItems.value = dedupeFileItems(selected.value)
-  transferPopper.value = true
+  openTransferDialog()
 }
 
 // 整理完成
 function transferDone() {
-  transferPopper.value = false
   list_files()
 }
 
+// 打开共享文件整理弹窗，整理完成后刷新当前目录。
+function openTransferDialog() {
+  openSharedDialog(
+    ReorganizeDialog,
+    {
+      items: transferItems.value,
+      target_storage: inProps.item.storage,
+    },
+    {
+      done: transferDone,
+    },
+    { closeOn: ['close', 'done'] },
+  )
+}
+
 // 将文件修改时间（timestape）转换为本地时间
 function formatTime(timestape: number) {
   return new Date(timestape * 1000).toLocaleString()
@@ -528,7 +576,6 @@ watch(
     selected.value = []
     // 关闭弹窗
     nameTestResult.value = undefined
-    nameTestDialog.value = false
     // 重置菜单
     dropdownItems.value = [
       {
@@ -591,19 +638,22 @@ watch(
 async function recognize(path: string) {
   try {
     // 显示进度条
-    progressDialog.value = true
     progressText.value = t('file.recognizing', { path })
     progressValue.value = 0
+    openProgressDialog(progressText.value, progressValue.value)
     nameTestResult.value = await api.get('media/recognize_file', {
       params: {
         path,
       },
     })
     // 关闭进度条
-    progressDialog.value = false
+    closeProgressDialog()
     if (!nameTestResult.value) $toast.error(t('file.recognizeFailed', { path }))
-    nameTestDialog.value = !!nameTestResult.value?.meta_info?.name
+    if (nameTestResult.value?.meta_info?.name) {
+      openSharedDialog(MediaInfoDialog, { context: nameTestResult.value }, {}, { closeOn: ['close'] })
+    }
   } catch (error) {
+    closeProgressDialog()
     console.error(error)
   }
 }
@@ -621,16 +671,17 @@ async function scrape(item: FileItem, confirm: boolean = true) {
     }
 
     // 显示进度条
-    progressDialog.value = true
     progressText.value = t('file.scraping', { path: item.path })
+    openProgressDialog(progressText.value)
 
     const result: { [key: string]: any } = await api.post(`media/scrape/${inProps.item.storage}`, item)
 
     // 关闭进度条
-    progressDialog.value = false
+    closeProgressDialog()
     if (!result.success) $toast.error(result.message)
     else $toast.success(t('file.scrapeCompleted', { path: item.path }))
   } catch (error) {
+    closeProgressDialog()
     console.error(error)
   }
 }
@@ -655,6 +706,7 @@ function handleProgressMessage(event: MessageEvent) {
   if (progress) {
     progressText.value = progress.text
     progressValue.value = progress.value
+    progressDialogController?.updateProps({ text: progressText.value, value: progressValue.value })
   }
 }
 
@@ -686,6 +738,8 @@ useKeepAliveRefresh(list_files, {
 onUnmounted(() => {
   revokeCurrentImgLink()
   stopLoadingProgress()
+  closeProgressDialog()
+  renameDialogController?.close()
 })
 </script>
 
@@ -850,59 +904,5 @@ onUnmounted(() => {
         {{ t('file.emptyDirectory') }}
       </VCardText>
     </VCard>
-    <!-- 重命名弹窗 -->
-    <VDialog v-if="renamePopper" v-model="renamePopper" max-width="35rem">
-      <VCard>
-        <VCardItem>
-          <template #prepend>
-            <VIcon icon="mdi-pencil" class="me-2" />
-          </template>
-          <VCardTitle>{{ t('file.rename') }}</VCardTitle>
-        </VCardItem>
-        <VDialogCloseBtn @click="renamePopper = false" />
-        <VDivider />
-        <VCardText>
-          <VRow>
-            <VCol cols="12">
-              <VTextField
-                v-model="newName"
-                :label="t('file.newName')"
-                :loading="renameLoading"
-                prepend-inner-icon="mdi-format-text"
-              />
-            </VCol>
-            <VCol cols="12" v-if="currentItem && currentItem.type == 'dir'">
-              <VSwitch v-model="renameAll" :label="t('file.includeSubfolders')" />
-            </VCol>
-          </VRow>
-        </VCardText>
-        <VCardActions>
-          <VBtn color="success" @click="get_recommend_name" prepend-icon="mdi-magic" class="px-5 me-3">
-            {{ t('file.autoRecognizeName') }}
-          </VBtn>
-          <VBtn :disabled="!newName" @click="rename" prepend-icon="mdi-check" class="px-5 me-3">
-            {{ t('common.confirm') }}
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-    <!-- 文件整理弹窗 -->
-    <ReorganizeDialog
-      v-if="transferPopper"
-      v-model="transferPopper"
-      :items="transferItems"
-      :target_storage="inProps.item.storage"
-      @done="transferDone"
-      @close="transferPopper = false"
-    />
-    <!-- 进度框 -->
-    <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" :value="progressValue" />
-    <!-- 识别结果对话框 -->
-    <MediaInfoDialog
-      v-if="nameTestDialog"
-      v-model="nameTestDialog"
-      :context="nameTestResult"
-      @close="nameTestDialog = false"
-    />
   </div>
 </template>

src/components/filebrowser/FileToolbar.vue

@@ -3,6 +3,9 @@ import type { AxiosRequestConfig, AxiosInstance } from 'axios'
 import type { EndPoints, FileItem } from '@/api/types'
 import { useDisplay } from 'vuetify'
 import { useI18n } from 'vue-i18n'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const FileNewFolderDialog = defineAsyncComponent(() => import('../dialog/FileNewFolderDialog.vue'))
 
 // 国际化
 const { t } = useI18n()
@@ -39,11 +42,9 @@ const inProps = defineProps({
 // 对外事件
 const emit = defineEmits(['storagechanged', 'pathchanged', 'loading', 'foldercreated', 'sortchanged'])
 
-// 新建文件夹名称
-const newFolderPopper = ref(false)
-
 // 新建文件名称
 const newFolderName = ref('')
+let newFolderDialogController: ReturnType<typeof openSharedDialog> | null = null
 
 // 调整排序方式
 function changeSort() {
@@ -105,7 +106,8 @@ async function mkdir() {
   // 调API
   await inProps.axios.request(config)
 
-  newFolderPopper.value = false
+  newFolderDialogController?.close()
+  newFolderDialogController = null
   newFolderName.value = ''
   emit('loading', false)
 
@@ -115,7 +117,18 @@ async function mkdir() {
 
 function openNewFolderDialog() {
   newFolderName.value = ''
-  newFolderPopper.value = true
+  newFolderDialogController = openSharedDialog(
+    FileNewFolderDialog,
+    { name: newFolderName.value },
+    {
+      create: mkdir,
+      'update:name': (value: string) => {
+        newFolderName.value = value
+        newFolderDialogController?.updateProps({ name: value })
+      },
+    },
+    { closeOn: ['close'] },
+  )
 }
 
 // 计算排序图标
@@ -124,6 +137,10 @@ const sortIcon = computed(() => {
   else return 'mdi-sort-alphabetical-ascending'
 })
 
+onUnmounted(() => {
+  newFolderDialogController?.close()
+})
+
 defineExpose({
   openNewFolderDialog,
 })
@@ -176,32 +193,8 @@ defineExpose({
     <IconBtn v-if="pathSegments.length > 0" @click="goUp">
       <VIcon icon="mdi-arrow-up-bold-outline" />
     </IconBtn>
-    <!-- 新建文件夹 -->
-    <VDialog v-model="newFolderPopper" max-width="35rem">
-      <template v-if="showNewFolderButton" #activator="{ props }">
-        <IconBtn v-bind="props">
-          <VIcon icon="mdi-folder-plus-outline" />
-        </IconBtn>
-      </template>
-      <VCard>
-        <VCardItem>
-          <template #prepend>
-            <VIcon icon="mdi-folder-plus-outline" class="me-2" />
-          </template>
-          <VCardTitle>{{ t('file.newFolder') }}</VCardTitle>
-        </VCardItem>
-        <VDialogCloseBtn @click="newFolderPopper = false" />
-        <VDivider />
-        <VCardText>
-          <VTextField v-model="newFolderName" :label="t('common.name')" prepend-inner-icon="mdi-format-text" />
-        </VCardText>
-        <VCardActions>
-          <div class="flex-grow-1" />
-          <VBtn :disabled="!newFolderName" @click="mkdir" prepend-icon="mdi-folder-plus" class="px-5 me-3">
-            {{ t('common.create') }}
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
+    <IconBtn v-if="showNewFolderButton" @click="openNewFolderDialog">
+      <VIcon icon="mdi-folder-plus-outline" />
+    </IconBtn>
   </VToolbar>
 </template>

src/components/filter/TorrentFilterBar.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { useDisplay } from 'vuetify'
 import { useEventListener } from '@vueuse/core'
+import { openSharedDialog } from '@/composables/useSharedDialog'
 
-// 显示器宽度
-const display = useDisplay()
+const TorrentAllFiltersDialog = defineAsyncComponent(() => import('@/components/dialog/TorrentAllFiltersDialog.vue'))
+const TorrentSingleFilterDialog = defineAsyncComponent(() => import('@/components/dialog/TorrentSingleFilterDialog.vue'))
 
 // 国际化
 const { t } = useI18n()
@@ -41,15 +41,11 @@ const emit = defineEmits<{
 }>()
 
 // 过滤菜单相关
-const filterMenuOpen = ref(false)
 const currentFilter = ref('site')
 const currentFilterTitle = computed(() => props.filterTitles[currentFilter.value])
-const currentFilterOptions = computed(() => {
-  return props.filterOptions[currentFilter.value]
-})
 
-// 添加全部筛选菜单相关
-const allFilterMenuOpen = ref(false)
+let allFilterDialogController: ReturnType<typeof openSharedDialog> | null = null
+let filterDialogController: ReturnType<typeof openSharedDialog> | null = null
 
 // 计算已选择的过滤条件数量
 const getFilterCount = computed(() => {
@@ -85,18 +81,97 @@ function getFilterIcon(key: string) {
   return icons[key] || 'mdi-filter-variant'
 }
 
-// 开关全部筛选菜单
-function toggleAllFilterMenu() {
-  allFilterMenuOpen.value = !allFilterMenuOpen.value
+// 生成全部筛选共享弹窗的最新参数。
+function getAllFiltersDialogProps() {
+  return {
+    filterForm: props.filterForm,
+    filterOptions: props.filterOptions,
+    filterTitles: props.filterTitles,
+  }
 }
 
-// 添加toggleFilterMenu函数
+// 生成单项筛选共享弹窗的最新参数。
+function getSingleFilterDialogProps() {
+  return {
+    filterForm: props.filterForm,
+    filterKey: currentFilter.value,
+    filterOptions: props.filterOptions,
+    filterTitle: currentFilterTitle.value,
+  }
+}
+
+// 关闭全部筛选共享弹窗。
+function closeAllFilterDialog() {
+  allFilterDialogController?.close()
+  allFilterDialogController = null
+}
+
+// 关闭单项筛选共享弹窗。
+function closeFilterDialog() {
+  filterDialogController?.close()
+  filterDialogController = null
+}
+
+// 打开全部筛选共享弹窗。
+function openAllFilterDialog() {
+  allFilterDialogController?.close()
+  allFilterDialogController = openSharedDialog(
+    TorrentAllFiltersDialog,
+    getAllFiltersDialogProps(),
+    {
+      clearAllFilters,
+      clearFilter,
+      close: () => {
+        allFilterDialogController = null
+      },
+      selectAll,
+      'update:filterForm': handleFilterChange,
+      'update:modelValue': (value: boolean) => {
+        if (!value) allFilterDialogController = null
+      },
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
+}
+
+// 打开单项筛选共享弹窗。
+function openFilterDialog() {
+  if (filterDialogController) {
+    filterDialogController.updateProps(getSingleFilterDialogProps())
+    return
+  }
+
+  filterDialogController = openSharedDialog(
+    TorrentSingleFilterDialog,
+    getSingleFilterDialogProps(),
+    {
+      clearFilter,
+      close: () => {
+        filterDialogController = null
+      },
+      selectAll,
+      'update:filterForm': handleFilterChange,
+      'update:modelValue': (value: boolean) => {
+        if (!value) filterDialogController = null
+      },
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
+}
+
+// 开关全部筛选菜单。
+function toggleAllFilterMenu() {
+  if (allFilterDialogController) closeAllFilterDialog()
+  else openAllFilterDialog()
+}
+
+// 切换单项筛选共享弹窗。
 function toggleFilterMenu(key: string) {
-  if (currentFilter.value === key && filterMenuOpen.value) {
-    filterMenuOpen.value = false
+  if (currentFilter.value === key && filterDialogController) {
+    closeFilterDialog()
   } else {
     currentFilter.value = key
-    filterMenuOpen.value = true
+    openFilterDialog()
   }
 }
 
@@ -519,138 +594,6 @@ onMounted(() => {
     </div>
   </VCard>
 
-  <!-- 全部筛选弹窗 -->
-  <VDialog
-    v-model="allFilterMenuOpen"
-    max-width="50rem"
-    location="center"
-    scrollable
-    :fullscreen="!display.mdAndUp.value"
-  >
-    <VCard>
-      <VDialogCloseBtn @click="allFilterMenuOpen = false" />
-      <VCardTitle class="py-3 d-flex align-center">
-        <VIcon icon="mdi-filter-variant" class="me-2"></VIcon>
-        <span>{{ t('torrent.allFilters') }}</span>
-        <VSpacer />
-        <VBtn
-          v-if="getFilterCount > 0"
-          class="me-10"
-          variant="text"
-          size="small"
-          color="error"
-          @click="clearAllFilters"
-        >
-          {{ t('torrent.clearAll') }}
-        </VBtn>
-      </VCardTitle>
-      <VDivider />
-      <VCardText>
-        <div class="all-filters-grid">
-          <VCard
-            v-for="(title, key) in filterTitles"
-            variant="tonal"
-            :key="key"
-            class="filter-section"
-            v-show="filterOptions[key].length > 0"
-          >
-            <VCardItem class="py-2">
-              <template #prepend>
-                <VIcon :icon="getFilterIcon(key)" class="me-2"></VIcon>
-              </template>
-              <VCardTitle>{{ title }}</VCardTitle>
-              <template #append>
-                <VBtn variant="text" size="small" color="primary" @click="selectAll(key)">
-                  {{ t('torrent.selectAll') }}
-                </VBtn>
-                <VBtn
-                  v-if="filterForm[key].length > 0"
-                  variant="text"
-                  size="small"
-                  color="error"
-                  @click="clearFilter(key)"
-                >
-                  {{ t('torrent.clear') }}
-                </VBtn>
-              </template>
-            </VCardItem>
-            <VCardText>
-              <VChipGroup
-                :model-value="filterForm[key]"
-                @update:model-value="(val: string[]) => handleFilterChange(key, val)"
-                column
-                multiple
-                class="filter-options"
-              >
-                <VChip
-                  v-for="option in filterOptions[key]"
-                  :key="option"
-                  :value="option"
-                  filter
-                  variant="elevated"
-                  class="ma-1 filter-chip"
-                  size="small"
-                >
-                  {{ option }}
-                </VChip>
-              </VChipGroup>
-            </VCardText>
-          </VCard>
-        </div>
-      </VCardText>
-    </VCard>
-  </VDialog>
-
-  <!-- 筛选弹窗 -->
-  <VDialog v-model="filterMenuOpen" max-width="25rem" max-height="85vh" location="center" scrollable>
-    <VCard>
-      <VCardTitle class="py-3 d-flex align-center">
-        <VIcon :icon="getFilterIcon(currentFilter)" class="me-2"></VIcon>
-        <span>{{ currentFilterTitle }}</span>
-        <VSpacer />
-        <VBtn
-          v-if="filterForm[currentFilter].length > 0"
-          variant="text"
-          size="small"
-          color="error"
-          @click="clearFilter(currentFilter)"
-        >
-          {{ t('torrent.clear') }}
-        </VBtn>
-        <VBtn variant="text" size="small" color="primary" @click="selectAll(currentFilter)">
-          {{ t('torrent.selectAll') }}
-        </VBtn>
-      </VCardTitle>
-      <VDivider />
-      <VCardText>
-        <VChipGroup
-          :model-value="filterForm[currentFilter]"
-          @update:model-value="(val: string[]) => handleFilterChange(currentFilter, val)"
-          column
-          multiple
-          class="filter-options"
-        >
-          <VChip
-            v-for="option in currentFilterOptions"
-            :key="option"
-            :value="option"
-            filter
-            variant="elevated"
-            class="ma-1 filter-chip"
-            size="small"
-          >
-            {{ option }}
-          </VChip>
-        </VChipGroup>
-      </VCardText>
-      <VCardActions>
-        <VSpacer />
-        <VBtn color="primary" prepend-icon="mdi-check" class="px-5" @click="filterMenuOpen = false">
-          {{ t('torrent.confirm') }}
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
 </template>
 
 <style scoped>
@@ -814,16 +757,6 @@ onMounted(() => {
   text-align: center;
 }
 
-.all-filters-grid {
-  display: grid;
-  gap: 24px;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-}
-
-.filter-section {
-  background-color: rgba(var(--v-theme-surface-variant), 0.08);
-}
-
 @media (width <= 600px) {
   .filter-toolbar-card {
     border-radius: 8px;

src/components/render/PageRender.vue

@@ -2,8 +2,10 @@
 import { isNullOrEmptyObject } from '@/@core/utils'
 import api from '@/api'
 import { type PropType } from 'vue'
-import ProgressDialog from '../dialog/ProgressDialog.vue'
 import { RenderProps } from '@/api/types'
+import { openSharedDialog } from '@/composables/useSharedDialog'
+
+const ProgressDialog = defineAsyncComponent(() => import('../dialog/ProgressDialog.vue'))
 
 // 定议外部事件
 const emit = defineEmits(['action'])
@@ -13,16 +15,27 @@ const props = defineProps({
   config: Object as PropType<RenderProps>,
 })
 
-// 进度框
-const progressDialog = ref(false)
-
 // 进度框文本
 const progressText = ref('正在处理...')
 
+let progressDialogController: ReturnType<typeof openSharedDialog> | null = null
+
+// 打开共享进度弹窗，避免渲染节点直接持有弹窗实例。
+function openProgressDialog() {
+  progressDialogController?.close()
+  progressDialogController = openSharedDialog(ProgressDialog, { text: progressText.value }, {}, { closeOn: false })
+}
+
+// 关闭当前共享进度弹窗。
+function closeProgressDialog() {
+  progressDialogController?.close()
+  progressDialogController = null
+}
+
 // 元素API事件响应
 async function commonAction(api_path: string, method: string, params = {}) {
   if (!api_path || !method) return
-  progressDialog.value = true
+  openProgressDialog()
   try {
     if (method.toUpperCase() === 'GET') {
       await api.get(api_path, {
@@ -34,8 +47,9 @@ async function commonAction(api_path: string, method: string, params = {}) {
     emit('action')
   } catch (error) {
     console.error(error)
+  } finally {
+    closeProgressDialog()
   }
-  progressDialog.value = false
 }
 
 // 组装事件
@@ -70,6 +84,4 @@ watchEffect(() => {
     v-html="config?.html"
     v-on="componentEvents"
   />
-  <!-- 进度框 -->
-  <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
 </template>