feat 自定义订阅

2026-05-20 07:40:12 +08:00 · 2023-08-10 12:42:15 +08:00
parent 2ddc112e0a
commit f7d55421b0
11 changed files with 851 additions and 16 deletions
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -481,7 +481,7 @@ export interface NotExistMediaInfo {
  episodes: number[]

  // 总集数
-  total_episodes: number
+  total_episode: number

  // 开始集
  start_episode: number
@@ -635,7 +635,7 @@ export interface MetaInfo {
  end_season?: number

  // 总集数
-  total_episodes: number
+  total_episode: number

  // 识别的开始集
  begin_episode?: number
@@ -848,3 +848,50 @@ export interface Setting {
  // Plex Token
  PLEX_TOKEN: string
 }
+
+// 自定义订阅
+export interface Rss {
+  id?: number
+  // 名称
+  name?: string
+  // RSS地址
+  url?: string
+  // 类型
+  type?: string
+  // 标题
+  title?: string
+  // 年份
+  year?: string
+  // TMDBID
+  tmdbid?: number
+  // 季号
+  season?: number
+  // 海报
+  poster?: string
+  // 背景图
+  backdrop?: string
+  // 评分
+  vote?: number
+  // 简介
+  description?: string
+  // 总集数
+  total_episode?: number
+  // 包含
+  include?: string
+  // 排除
+  exclude?: string
+  // 洗版
+  best_version?: number
+  // 是否使用代理服务器
+  proxy?: number
+  // 保存路径
+  save_path?: string
+  // 已处理数量
+  processed?: number
+  // 附加信息
+  note?: string
+  // 最后更新时间
+  last_update?: string
+  // 状态 0-停用，1-启用
+  state?: number
+}
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -261,7 +261,7 @@ async function checkSeasonsNotExists() {
        let state = 0
        if (item.episodes.length === 0)
          state = 2
-        else if (item.episodes.length < item.total_episodes)
+        else if (item.episodes.length < item.total_episode)
          state = 1

        seasonsNotExisted.value[item.season] = state
--- a/src/components/cards/RssCard.vue
+++ b/src/components/cards/RssCard.vue
@@ -0,0 +1,440 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toast-notification'
+import { calculateTimeDifference } from '@/@core/utils'
+import { formatSeason } from '@/@core/utils/formatters'
+import api from '@/api'
+import type { Rss, Site } from '@/api/types'
+
+// 输入参数
+const props = defineProps({
+  media: Object as PropType<Rss>,
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['remove', 'save'])
+
+// 提示框
+const $toast = useToast()
+
+// 图片是否加载完成
+const imageLoaded = ref(false)
+
+// 订阅弹窗
+const rssInfoDialog = ref(false)
+
+// 站点名称
+const siteName = ref('')
+
+// 订阅编辑表单
+const rssForm = reactive({
+  id: props.media?.id,
+  // RSS地址
+  url: props.media?.url,
+  // 类型
+  type: props.media?.type,
+  // 标题
+  title: props.media?.title,
+  // 年份
+  year: props.media?.year,
+  // TMDBID
+  tmdbid: props.media?.tmdbid,
+  // 季号
+  season: props.media?.season,
+  // 总集数
+  total_episode: props.media?.total_episode,
+  // 包含
+  include: props.media?.include,
+  // 排除
+  exclude: props.media?.exclude,
+  // 洗版
+  best_version: props.media?.best_version,
+  // 是否使用代理服务器
+  proxy: props.media?.proxy,
+  // 保存路径
+  save_path: props.media?.save_path,
+  // 状态 0-停用，1-启用
+  state: props.media?.state,
+
+})
+
+// 上一次更新时间
+const lastUpdateText = ref(
+  `${
+    props.media?.last_update
+      ? `${calculateTimeDifference(props.media?.last_update || '')}前`
+      : ''
+  }`,
+)
+
+// 图片加载完成响应
+function imageLoadHandler() {
+  imageLoaded.value = true
+}
+
+// 根据 type 返回不同的图标
+function getIcon() {
+  if (props.media?.type === '电影')
+    return 'mdi-movie'
+  else if (props.media?.type === '电视剧')
+    return 'mdi-television-classic'
+  else
+    return 'mdi-help-circle'
+}
+
+// 计算文本颜色
+function getTextColor() {
+  return imageLoaded.value ? 'white' : ''
+}
+
+// 计算文本类
+function getTextClass() {
+  return imageLoaded.value ? 'text-white' : ''
+}
+
+// 删除订阅
+async function removerRss() {
+  try {
+    const result: { [key: string]: any } = await api.delete(
+      `rss/${props.media?.id}`,
+    )
+
+    if (result.success) {
+      // 通知父组件刷新
+      emit('remove')
+    }
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
+
+// 调用API修改订阅
+async function updateRssInfo() {
+  rssInfoDialog.value = false
+  try {
+    const result: { [key: string]: any } = await api.put('rss', rssForm)
+
+    // 提示
+    if (result.success) {
+      $toast.success(`${props.media?.name} 更新成功！`)
+      // 通知父组件刷新
+      emit('remove')
+    }
+    else { $toast.error(`${props.media?.name} 更新失败：${result.message}！`) }
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
+
+// 查询站点名称
+async function querySiteName() {
+  try {
+    const result: Site = await api.get(
+      `site/domain/${props.media?.url?.split('/')[2]}`,
+    )
+
+    if (result)
+      siteName.value = result.name
+  }
+  catch (e) {
+    // 截取URL中的主域名作为站点名称
+    siteName.value = props.media?.url?.split('/')[2] || '未知'
+    console.log(e)
+  }
+}
+
+// 编辑订阅响应
+async function editRssDialog() {
+  rssInfoDialog.value = true
+}
+
+// 生成1到50季的下拉框选项
+const seasonItems = ref(
+  Array.from({ length: 50 }, (_, i) => i + 1).map(item => ({
+    title: `第 ${item} 季`,
+    value: item,
+  })),
+)
+
+// 弹出菜单
+const dropdownItems = ref([
+  {
+    title: '编辑',
+    value: 1,
+    props: {
+      prependIcon: 'mdi-file-edit-outline',
+      click: editRssDialog,
+    },
+  },
+  {
+    title: '取消订阅',
+    value: 3,
+    props: {
+      prependIcon: 'mdi-trash-can-outline',
+      color: 'error',
+      click: removerRss,
+    },
+  },
+])
+
+onMounted(() => {
+  querySiteName()
+})
+</script>
+
+<template>
+  <VCard
+    :key="props.media?.id"
+    :class="`${rssForm.best_version ? 'outline-dashed outline-1' : ''}`"
+    @click="editRssDialog"
+  >
+    <template #image>
+      <VImg
+        :src="props.media?.backdrop || props.media?.poster"
+        aspect-ratio="2/3"
+        cover
+        class="brightness-50"
+        @load="imageLoadHandler"
+      />
+    </template>
+    <VCardItem>
+      <template #prepend>
+        <VIcon
+          size="1.9rem"
+          :color="getTextColor()"
+          :icon="getIcon()"
+        />
+      </template>
+      <VCardTitle :class="getTextClass()">
+        {{ props.media?.name }}
+        {{ formatSeason(props.media?.season ? props.media?.season.toString() : "") }}
+      </VCardTitle>
+      <template #append>
+        <div class="me-n3">
+          <IconBtn>
+            <VIcon
+              icon="mdi-dots-vertical"
+              :color="getTextColor()"
+            />
+            <VMenu
+              activator="parent"
+              close-on-content-click
+            >
+              <VList>
+                <VListItem
+                  v-for="(item, i) in dropdownItems"
+                  :key="i"
+                  variant="plain"
+                  :base-color="item.props.color"
+                  @click="item.props.click"
+                >
+                  <template #prepend>
+                    <VIcon :icon="item.props.prependIcon" />
+                  </template>
+                  <VListItemTitle v-text="item.title" />
+                </VListItem>
+              </VList>
+            </VMenu>
+          </IconBtn>
+        </div>
+      </template>
+    </VCardItem>
+
+    <VCardText>
+      <p
+        class="clamp-text mb-0"
+        :class="getTextClass()"
+      >
+        {{ props.media?.description }}
+      </p>
+    </VCardText>
+
+    <VCardText class="d-flex justify-space-between align-center flex-wrap">
+      <div class="d-flex align-center">
+        <IconBtn
+          icon="mdi-star"
+          :color="getTextColor()"
+          class="me-1"
+        />
+        <span
+          class="text-subtitle-2 me-4"
+          :class="getTextClass()"
+        >{{
+          props.media?.vote
+        }}</span>
+        <IconBtn
+          v-bind="props"
+          icon="mdi-progress-clock"
+          :color="getTextColor()"
+          class="me-1"
+        />
+        <span
+          class="text-subtitle-2 me-4"
+          :class="getTextClass()"
+        >{{ props.media?.processed || 0 }}</span>
+        <IconBtn
+          v-if="siteName"
+          icon="mdi-web"
+          :color="getTextColor()"
+          class="me-1"
+        />
+        <span
+          v-if="siteName"
+          class="text-subtitle-2 me-4"
+          :class="getTextClass()"
+        >
+          {{ siteName }}
+        </span>
+      </div>
+    </VCardText>
+    <VCardText
+      v-if="lastUpdateText"
+      class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300"
+    >
+      <VIcon
+        icon="mdi-download"
+        class="me-1"
+      /> {{ lastUpdateText }}
+    </VCardText>
+  </VCard>
+  <!-- 订阅编辑弹窗 -->
+  <VDialog
+    v-model="rssInfoDialog"
+    max-width="1000"
+    persistent
+    scrollable
+  >
+    <!-- Dialog Content -->
+    <VCard :title="`订阅 - ${props.media?.name}`">
+      <VCardText class="pt-2">
+        <VForm @submit.prevent="() => {}">
+          <VRow>
+            <VCol
+              cols="12"
+            >
+              <VTextField
+                v-model="rssForm.url"
+                label="RSS地址"
+                placeholder="https://example.com/rss"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VSelect
+                v-model="rssForm.type"
+                label="类型"
+                :items="[{ title: '电影', value: '电影' }, { title: '电视剧', value: '电视剧' }]"
+                readonly
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VTextField
+                v-model="rssForm.title"
+                label="标题"
+                readonly
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VTextField
+                v-model="rssForm.year"
+                label="年份"
+                readonly
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VSelect
+                v-model="rssForm.season"
+                label="季"
+                :items="seasonItems"
+                readonly
+              />
+            </VCol>
+            <VCol
+              cols="12"
+            >
+              <VTextField
+                v-model="rssForm.include"
+                label="包含"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+            >
+              <VTextField
+                v-model="rssForm.exclude"
+                label="排除"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+            >
+              <VTextField
+                v-model="rssForm.save_path"
+                label="保存路径"
+                placeholder="留空自动"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VSelect
+                v-model="rssForm.state"
+                label="状态"
+                :items="[{
+                  title: '启用',
+                  value: 1,
+                }, {
+                  title: '停用',
+                  value: 0,
+                }]"
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VSwitch
+                v-model="rssForm.best_version"
+                label="洗版"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VSwitch
+                v-model="rssForm.proxy"
+                label="代理服务器"
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+
+      <VCardActions>
+        <VBtn @click="rssInfoDialog = false">
+          取消
+        </VBtn>
+        <VSpacer />
+        <VBtn @click="updateRssInfo">
+          确定
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -11,12 +11,12 @@ const props = defineProps({
  media: Object as PropType<Subscribe>,
 })

+// 定义触发的自定义事件
+const emit = defineEmits(['remove', 'save'])
+
 // 提示框
 const $toast = useToast()

-// 是否显示卡片
-const cardState = ref(true)
-
 // 图片是否加载完成
 const imageLoaded = ref(false)

@@ -112,8 +112,10 @@ async function removeSubscribe() {
      `subscribe/${props.media?.id}`,
    )

-    if (result.success)
-      cardState.value = false
+    if (result.success) {
+      // 通知父组件刷新
+      emit('remove')
+    }
  }
  catch (e) {
    console.log(e)
@@ -143,10 +145,12 @@ async function updateSubscribeInfo() {
    const result: { [key: string]: any } = await api.put('subscribe', subscribeForm)

    // 提示
-    if (result.success)
+    if (result.success) {
      $toast.success(`${props.media?.name} 更新成功！`)
-    else
-      $toast.error(`${props.media?.name} 更新失败：${result.message}！`)
+      // 通知父组件刷新
+      emit('remove')
+    }
+    else { $toast.error(`${props.media?.name} 更新失败：${result.message}！`) }
  }
  catch (e) {
    console.log(e)
@@ -220,7 +224,6 @@ const dropdownItems = ref([

 <template>
  <VCard
-    v-if="cardState"
    :key="props.media?.id"
    :class="`${subscribeForm.best_version ? 'outline-dashed outline-1' : ''}`"
    @click="editSubscribeDialog"
--- a/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -100,6 +100,13 @@ import UserProfile from '@/layouts/components/UserProfile.vue'
          to: '/subscribe-tv',
        }"
      />
+      <VerticalNavLink
+        :item="{
+          title: '自定义',
+          icon: 'mdi-rss',
+          to: '/subscribe-rss',
+        }"
+      />
      <VerticalNavLink
        :item="{
          title: '日历',
--- a/src/pages/subscribe-rss.vue
+++ b/src/pages/subscribe-rss.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import RssListView from '@/views/subscribe/RssListView.vue'
+</script>
+
+<template>
+  <div>
+    <RssListView />
+  </div>
+</template>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -48,6 +48,13 @@ const router = createRouter({
            requiresAuth: true,
          },
        },
+        {
+          path: 'subscribe-rss',
+          component: () => import('../pages/subscribe-rss.vue'),
+          meta: {
+            requiresAuth: true,
+          },
+        },
        {
          path: 'calendar',
          component: () => import('../pages/calendar.vue'),
--- a/src/views/discover/MediaDetailView.vue
+++ b/src/views/discover/MediaDetailView.vue
@@ -134,7 +134,7 @@ async function checkSeasonsNotExists() {
        let state = 0
        if (item.episodes.length === 0)
          state = 2
-        else if (item.episodes.length < item.total_episodes)
+        else if (item.episodes.length < item.total_episode)
          state = 1
        if (state !== 2)
          isExists.value = true
--- a/src/views/discover/PersonCardListView.vue
+++ b/src/views/discover/PersonCardListView.vue
@@ -147,9 +147,9 @@ async function fetchData({ done }: { done: any }) {
    </div>
    <NoDataFound
      v-if="dataList.length === 0 && isRefreshed"
-      error-code="500"
-      error-title="出错啦！"
-      error-description="无法获取到媒体信息，请检查网络连接。"
+      error-code="404"
+      error-title="没有数据"
+      error-description="无法获取到TMDB媒体信息。"
    />
  </VInfiniteScroll>
 </template>
--- a/src/views/subscribe/RssListView.vue
+++ b/src/views/subscribe/RssListView.vue
@@ -0,0 +1,320 @@
+<script lang="ts" setup>
+import PullRefresh from 'pull-refresh-vue3'
+import { useToast } from 'vue-toast-notification'
+import api from '@/api'
+import type { Rss } from '@/api/types'
+import NoDataFound from '@/components/NoDataFound.vue'
+import RssCard from '@/components/cards/RssCard.vue'
+import { numberValidator, requiredValidator } from '@/@validators'
+import { doneNProgress, startNProgress } from '@/api/nprogress'
+
+// 提示框
+const $toast = useToast()
+
+// 是否刷新过
+const isRefreshed = ref(false)
+
+// 新增按钮文本
+const addBtnText = ref('新增订阅')
+// 新增按钮状态
+const addBtnState = ref(false)
+
+// 新增自定义订阅对话框
+const rssAddDialog = ref(false)
+
+// 新增订阅表单
+const rssForm = reactive({
+  // RSS地址
+  url: '',
+  // 类型
+  type: '电影',
+  // 标题
+  title: '',
+  // 年份
+  year: '',
+  // 季号
+  season: 1,
+  // 包含
+  include: '',
+  // 排除
+  exclude: '',
+  // 洗版
+  best_version: false,
+  // 是否使用代理服务器
+  proxy: false,
+  // 保存路径
+  save_path: '',
+  // 状态 0-停用，1-启用
+  state: 1,
+
+})
+
+// 数据列表
+const dataList = ref<Rss[]>([])
+
+// 获取订阅列表数据
+async function fetchData() {
+  try {
+    dataList.value = await api.get('rss')
+    isRefreshed.value = true
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+// 调用API 新增自定义订阅
+async function addRss() {
+  if (!rssForm.url || !rssForm.title)
+    return
+
+  startNProgress()
+
+  addBtnText.value = '新增中...'
+  addBtnState.value = true
+
+  if (rssForm.type === '电影')
+    rssForm.season = 0
+
+  try {
+    const result: { [key: string]: string } = await api.post('rss', rssForm)
+    if (result.success) {
+      $toast.success('新增自定义订阅成功')
+      fetchData()
+    }
+
+    else { $toast.error(`新增自定义订阅失败：${result.message}`) }
+    // 刷新数据
+    rssAddDialog.value = false
+  }
+  catch (error) {
+    console.error(error)
+  }
+
+  doneNProgress()
+
+  addBtnText.value = '新增订阅'
+  addBtnState.value = false
+}
+
+// 生成1到50季的下拉框选项
+const seasonItems = ref(
+  Array.from({ length: 50 }, (_, i) => i + 1).map(item => ({
+    title: `第 ${item} 季`,
+    value: item,
+  })),
+)
+
+// 加载时获取数据
+onBeforeMount(fetchData)
+
+// 刷新状态
+const loading = ref(false)
+
+// 下拉刷新
+function onRefresh() {
+  loading.value = true
+  fetchData()
+  loading.value = false
+}
+</script>
+
+<template>
+  <div
+    v-if="!isRefreshed"
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+  >
+    <VProgressCircular
+      v-if="!isRefreshed"
+      size="48"
+      indeterminate
+      color="primary"
+    />
+  </div>
+  <PullRefresh
+    v-model="loading"
+    @refresh="onRefresh"
+  >
+    <div
+      v-if="dataList.length > 0"
+      class="grid gap-3 grid-rss-card p-1"
+    >
+      <RssCard
+        v-for="data in dataList"
+        :key="data.id"
+        :media="data"
+        @remove="fetchData"
+        @save="fetchData"
+      />
+    </div>
+    <NoDataFound
+      v-if="dataList.length === 0 && isRefreshed"
+      error-code="404"
+      error-title="没有自定义订阅"
+      error-description="点击右下角按钮新增订阅。"
+    />
+  </PullRefresh>
+
+  <!-- 新增订阅 -->
+  <VDialog
+    v-model="rssAddDialog"
+    max-width="800"
+    transition="dialog-bottom-transition"
+  >
+    <!-- Dialog Activator -->
+    <template #activator="{ props }">
+      <VBtn
+        icon="mdi-plus"
+        v-bind="props"
+        size="x-large"
+        class="fixed right-5 bottom-5"
+      />
+    </template>
+
+    <!-- Dialog Content -->
+    <VCard title="新增自定义订阅">
+      <VCardText>
+        <VForm @submit.prevent="() => {}">
+          <VRow>
+            <VCol
+              cols="12"
+            >
+              <VTextField
+                v-model="rssForm.url"
+                label="RSS地址"
+                placeholder="https://example.com/rss"
+                :rules="[requiredValidator]"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VSelect
+                v-model="rssForm.type"
+                label="类型"
+                :items="[{ title: '电影', value: '电影' }, { title: '电视剧', value: '电视剧' }]"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VTextField
+                v-model="rssForm.title"
+                label="标题"
+                :rules="[requiredValidator]"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VTextField
+                v-model="rssForm.year"
+                label="年份"
+                :rules="[numberValidator]"
+              />
+            </VCol>
+            <VCol
+              v-if="rssForm.type === '电视剧'"
+              cols="12"
+              md="6"
+            >
+              <VSelect
+                v-model="rssForm.season"
+                label="季"
+                :items="seasonItems"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+            >
+              <VTextField
+                v-model="rssForm.include"
+                label="包含"
+                placeholder="支持正则表达式"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+            >
+              <VTextField
+                v-model="rssForm.exclude"
+                label="排除"
+                placeholder="支持正则表达式"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+            >
+              <VTextField
+                v-model="rssForm.save_path"
+                label="保存路径"
+                placeholder="留空自动"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VSelect
+                v-model="rssForm.state"
+                label="状态"
+                :items="[{
+                  title: '启用',
+                  value: 1,
+                }, {
+                  title: '停用',
+                  value: 0,
+                }]"
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VSwitch
+                v-model="rssForm.best_version"
+                label="洗版"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VSwitch
+                v-model="rssForm.proxy"
+                label="代理服务器"
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+      <VCardActions>
+        <VBtn
+          @click="rssAddDialog = false"
+        >
+          取消
+        </VBtn>
+        <VSpacer />
+        <VBtn
+          color="primary"
+          :disabled="addBtnState"
+          @click="addRss"
+        >
+          {{ addBtnText }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss">
+.grid-rss-card {
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  padding-block-end: 1rem;
+}
+</style>
--- a/src/views/subscribe/SubscribeListView.vue
+++ b/src/views/subscribe/SubscribeListView.vue
@@ -70,6 +70,8 @@ const filteredDataList = computed(() => {
        v-for="data in filteredDataList"
        :key="data.id"
        :media="data"
+        @remove="fetchData"
+        @save="fetchData"
      />
    </div>
    <NoDataFound