feat 订阅实时编辑

src/api/types.ts

@@ -77,8 +77,8 @@ export interface Subscribe {
   // 订阅站点
   sites: number[]
 
-  // 是否洗版
+  // 是否洗版，数字或者boolean
-  best_version: number
+  best_version: any
 
   // 当前优先级
   current_priority: number

src/components/cards/MediaCard.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { PropType, Ref } from 'vue'
 import { useToast } from 'vue-toast-notification'
+import SubscribeEditForm from '../form/SubscribeEditForm.vue'
 import { formatSeason } from '@/@core/utils/formatters'
 import api from '@/api'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
@@ -39,6 +40,12 @@ const seasonsNotExisted = ref<{ [key: number]: number }>({})
 // 订阅季弹窗
 const subscribeSeasonDialog = ref(false)
 
+// 订阅编辑弹窗
+const subscribeEditDialog = ref(false)
+
+// 订阅ID
+const subscribeId = ref(0)
+
 // 季详情
 const seasonInfos = ref<TmdbSeason[]>([])
 
@@ -136,6 +143,12 @@ async function addSubscribe(season = 0) {
       result.message,
       best_version,
     )
+
+    // 弹出订阅编辑弹窗
+    if (result.success) {
+      subscribeId.value = result.data.id
+      subscribeEditDialog.value = true
+    }
   }
   catch (error) {
     console.error(error)
@@ -480,7 +493,7 @@ function getYear(airDate: string) {
     inset
     scrollable
   >
-    <VCard>
+    <VCard class="rounded-t">
       <DialogCloseBtn @click="subscribeSeasonDialog = false" />
       <VCardTitle class="pe-10">
         订阅 - {{ props.media?.title }}
@@ -557,6 +570,14 @@ function getYear(airDate: string) {
       </div>
     </VCard>
   </VBottomSheet>
+  <!-- 订阅编辑弹窗 -->
+  <SubscribeEditForm
+    v-model="subscribeEditDialog"
+    :subid="subscribeId"
+    @close="subscribeEditDialog = false"
+    @save="subscribeEditDialog = false"
+    @remove="() => { subscribeEditDialog = false; handleCheckSubscribe(); }"
+  />
 </template>
 
 <style lang="scss">

src/components/cards/SubscribeCard.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
+import SubscribeEditForm from '../form/SubscribeEditForm.vue'
 import { calculateTimeDifference } from '@/@core/utils'
 import { formatSeason } from '@/@core/utils/formatters'
-import { numberValidator } from '@/@validators'
 import api from '@/api'
-import type { Site, Subscribe } from '@/api/types'
+import type { Subscribe } from '@/api/types'
 
 // 输入参数
 const props = defineProps({
@@ -21,19 +21,7 @@ const $toast = useToast()
 const imageLoaded = ref(false)
 
 // 订阅弹窗
-const subscribeInfoDialog = ref(false)
+const subscribeEditDialog = ref(false)
-
-// 站点数据列表
-const siteList = ref<Site[]>([])
-
-// 站点选择下载框
-const selectSitesOptions = ref<{ [key: number]: string }[]>([])
-
-// 订阅编辑表单
-const subscribeForm = reactive<any>(props.media ?? {})
-
-// 类型转换
-subscribeForm.best_version = subscribeForm.best_version === 1
 
 // 上一次更新时间
 const lastUpdateText = ref(
@@ -114,58 +102,9 @@ async function searchSubscribe() {
   }
 }
 
-// 调用API修改订阅
-async function updateSubscribeInfo() {
-  subscribeInfoDialog.value = false
-  try {
-    const result: { [key: string]: any } = await api.put('subscribe/', subscribeForm)
-
-    // 提示
-    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 loadSites() {
-  try {
-    const data: Site[] = await api.get('site/rss')
-
-    // 过滤站点，只有启用的站点才显示
-    siteList.value = data.filter(item => item.is_active)
-  }
-  catch (error) {
-    console.error(error)
-  }
-}
-
-// 获取站点列表选择框数据
-async function getSiteList() {
-  // 加载订阅站点列表
-  if (!siteList.value.length)
-    await loadSites()
-
-  const maps = siteList.value.map((item) => {
-    return {
-      title: item.name,
-      value: item.id,
-    }
-  })
-
-  selectSitesOptions.value = maps.flat()
-}
-
 // 编辑订阅响应
 async function editSubscribeDialog() {
-  await getSiteList()
+  subscribeEditDialog.value = true
-  subscribeInfoDialog.value = true
 }
 
 // 弹出菜单
@@ -196,96 +135,12 @@ const dropdownItems = ref([
     },
   },
 ])
-
-// 质量选择框数据
-const qualityOptions = ref([
-  {
-    title: '全部',
-    value: '',
-  },
-  {
-    title: '蓝光原盘',
-    value: 'Blu-?Ray.+VC-?1|Blu-?Ray.+AVC|UHD.+blu-?ray.+HEVC|MiniBD',
-  },
-  {
-    title: 'Remux',
-    value: 'Remux',
-  },
-  {
-    title: 'BluRay',
-    value: 'Blu-?Ray',
-  },
-  {
-    title: 'UHD',
-    value: 'UHD|UltraHD',
-  },
-  {
-    title: 'WEB-DL',
-    value: 'WEB-?DL|WEB-?RIP',
-  },
-  {
-    title: 'HDTV',
-    value: 'HDTV',
-  },
-  {
-    title: 'H265',
-    value: '[Hx].?265|HEVC',
-  },
-  {
-    title: 'H264',
-    value: '[Hx].?264|AVC',
-  },
-])
-
-// 分辨率选择框数据
-const resolutionOptions = ref([
-  {
-    title: '全部',
-    value: '',
-  },
-  {
-    title: '4k',
-    value: '4K|2160p|x2160',
-  },
-  {
-    title: '1080p',
-    value: '1080[pi]|x1080',
-  },
-  {
-    title: '720p',
-    value: '720[pi]|x720',
-  },
-])
-
-// 特效选择框数据
-const effectOptions = ref([
-  {
-    title: '全部',
-    value: '',
-  },
-  {
-    title: '杜比视界',
-    value: 'Dolby[\\s.]+Vision|DOVI|[\\s.]+DV[\\s.]+',
-  },
-  {
-    title: '杜比全景声',
-    value: 'Dolby[\\s.]*\\+?Atmos|Atmos',
-  },
-  {
-    title: 'HDR',
-    value: '[\\s.]+HDR[\\s.]+|HDR10|HDR10\\+',
-  },
-  {
-    title: 'SDR',
-    value: '[\\s.]+SDR[\\s.]+',
-  },
-])
 </script>
 
 <template>
   <VCard
     :key="props.media?.id"
-    :class="`${subscribeForm.best_version ? 'outline-dashed outline-1' : ''}`"
+    :class="`${props.media?.best_version ? 'outline-dashed outline-1' : ''}`"
     @click="editSubscribeDialog"
   >
     <template #image>
@@ -407,133 +262,11 @@ const effectOptions = ref([
     />
   </VCard>
   <!-- 订阅编辑弹窗 -->
-  <VDialog
+  <SubscribeEditForm
-    v-model="subscribeInfoDialog"
+    v-model="subscribeEditDialog"
-    max-width="50rem"
+    :subid="props.media?.id"
-    persistent
+    @remove="() => { emit('remove');subscribeEditDialog = false; }"
-    scrollable
+    @save="() => { emit('save');subscribeEditDialog = false; }"
-  >
+    @close="subscribeEditDialog = false"
-    <!-- Dialog Content -->
+  />
-    <VCard :title="`订阅 - ${props.media?.name}`">
-      <VCardText class="pt-2">
-        <DialogCloseBtn @click="subscribeInfoDialog = false" />
-        <VForm @submit.prevent="() => {}">
-          <VRow>
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <VTextField
-                v-model="subscribeForm.keyword"
-                label="搜索关键词"
-              />
-            </VCol>
-            <VCol
-              v-if="props.media?.type === '电视剧'"
-              cols="12"
-              md="3"
-            >
-              <VTextField
-                v-model="subscribeForm.total_episode"
-                label="总集数"
-                :rules="[numberValidator]"
-              />
-            </VCol>
-            <VCol
-              v-if="props.media?.type === '电视剧'"
-              cols="12"
-              md="3"
-            >
-              <VTextField
-                v-model="subscribeForm.start_episode"
-                label="开始集数"
-                :rules="[numberValidator]"
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.quality"
-                label="质量"
-                :items="qualityOptions"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.resolution"
-                label="分辨率"
-                :items="resolutionOptions"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <VSelect
-                v-model="subscribeForm.effect"
-                label="特效"
-                :items="effectOptions"
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <VTextField
-                v-model="subscribeForm.include"
-                label="包含（关键字、正则式）"
-              />
-            </VCol>
-            <VCol
-              cols="12"
-              md="6"
-            >
-              <VTextField
-                v-model="subscribeForm.exclude"
-                label="排除（关键字、正则式）"
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol cols="12">
-              <VSelect
-                v-model="subscribeForm.sites"
-                :items="selectSitesOptions"
-                chips
-                label="订阅站点"
-                multiple
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol cols="12">
-              <VSwitch
-                v-model="subscribeForm.best_version"
-                label="洗版"
-              />
-            </VCol>
-          </VRow>
-        </VForm>
-      </VCardText>
-
-      <VCardActions>
-        <VBtn @click="subscribeInfoDialog = false">
-          取消
-        </VBtn>
-        <VSpacer />
-        <VBtn @click="updateSubscribeInfo">
-          确定
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
 </template>

src/components/form/SubscribeEditForm.vue

@@ -0,0 +1,348 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toast-notification'
+import { numberValidator } from '@/@validators'
+import api from '@/api'
+import type { Site, Subscribe } from '@/api/types'
+
+// 输入参数
+const props = defineProps({
+  subid: Number,
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['remove', 'save', 'close'])
+
+// 站点数据列表
+const siteList = ref<Site[]>([])
+
+// 站点选择下载框
+const selectSitesOptions = ref<{ [key: number]: string }[]>([])
+
+// 订阅编辑表单
+let subscribeForm = reactive<Subscribe>({
+  id: props.subid ?? 0,
+  keyword: '',
+  quality: '',
+  resolution: '',
+  effect: '',
+  include: '',
+  exclude: '',
+  total_episode: 0,
+  start_episode: 0,
+  best_version: 0,
+  sites: [],
+  type: '',
+  name: '',
+  year: '',
+  tmdbid: 0,
+  state: '',
+  last_update: '',
+  username: '',
+  current_priority: 0,
+})
+
+// 提示框
+const $toast = useToast()
+
+// 调用API修改订阅
+async function updateSubscribeInfo() {
+  try {
+    subscribeForm.best_version = subscribeForm.best_version ? 1 : 0
+    const result: { [key: string]: any } = await api.put('subscribe/', subscribeForm)
+    // 提示
+    if (result.success) {
+      $toast.success(`${subscribeForm.name} 更新成功！`)
+      // 通知父组件刷新
+      emit('save')
+    }
+    else { $toast.error(`${subscribeForm.name} 更新失败：${result.message}！`) }
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
+
+// 获取站点列表数据
+async function loadSites() {
+  try {
+    const data: Site[] = await api.get('site/rss')
+
+    // 过滤站点，只有启用的站点才显示
+    siteList.value = data.filter(item => item.is_active)
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+// 获取站点列表选择框数据
+async function getSiteList() {
+  // 加载订阅站点列表
+  if (!siteList.value.length)
+    await loadSites()
+
+  const maps = siteList.value.map((item) => {
+    return {
+      title: item.name,
+      value: item.id,
+    }
+  })
+
+  selectSitesOptions.value = maps.flat()
+}
+
+// 获取订阅信息
+async function getSubscribeInfo() {
+  try {
+    const result: Subscribe = await api.get(
+      `subscribe/${props.subid}`,
+    )
+    subscribeForm = result
+    subscribeForm.best_version = subscribeForm.best_version === 1
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
+
+// 删除订阅
+async function removeSubscribe() {
+  try {
+    const result: { [key: string]: any } = await api.delete(
+      `subscribe/${props.subid}`,
+    )
+
+    if (result.success) {
+      // 通知父组件刷新
+      emit('remove')
+    }
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
+
+// 质量选择框数据
+const qualityOptions = ref([
+  {
+    title: '全部',
+    value: '',
+  },
+  {
+    title: '蓝光原盘',
+    value: 'Blu-?Ray.+VC-?1|Blu-?Ray.+AVC|UHD.+blu-?ray.+HEVC|MiniBD',
+  },
+  {
+    title: 'Remux',
+    value: 'Remux',
+  },
+  {
+    title: 'BluRay',
+    value: 'Blu-?Ray',
+  },
+  {
+    title: 'UHD',
+    value: 'UHD|UltraHD',
+  },
+  {
+    title: 'WEB-DL',
+    value: 'WEB-?DL|WEB-?RIP',
+  },
+  {
+    title: 'HDTV',
+    value: 'HDTV',
+  },
+  {
+    title: 'H265',
+    value: '[Hx].?265|HEVC',
+  },
+  {
+    title: 'H264',
+    value: '[Hx].?264|AVC',
+  },
+])
+
+// 分辨率选择框数据
+const resolutionOptions = ref([
+  {
+    title: '全部',
+    value: '',
+  },
+  {
+    title: '4k',
+    value: '4K|2160p|x2160',
+  },
+  {
+    title: '1080p',
+    value: '1080[pi]|x1080',
+  },
+  {
+    title: '720p',
+    value: '720[pi]|x720',
+  },
+])
+
+// 特效选择框数据
+const effectOptions = ref([
+  {
+    title: '全部',
+    value: '',
+  },
+  {
+    title: '杜比视界',
+    value: 'Dolby[\\s.]+Vision|DOVI|[\\s.]+DV[\\s.]+',
+  },
+  {
+    title: '杜比全景声',
+    value: 'Dolby[\\s.]*\\+?Atmos|Atmos',
+  },
+  {
+    title: 'HDR',
+    value: '[\\s.]+HDR[\\s.]+|HDR10|HDR10\\+',
+  },
+  {
+    title: 'SDR',
+    value: '[\\s.]+SDR[\\s.]+',
+  },
+])
+
+// 初始化
+onMounted(async () => {
+  // 加载订阅站点列表
+  getSiteList()
+  // 加载订阅信息
+  getSubscribeInfo()
+})
+</script>
+
+<template>
+  <VBottomSheet
+    inset
+    scrollable
+  >
+    <VCard
+      :title="`编辑订阅 - ${subscribeForm?.name}`"
+      class="rounded-t"
+    >
+      <VCardText class="pt-2">
+        <DialogCloseBtn @click="emit('close')" />
+        <VForm @submit.prevent="() => {}">
+          <VRow>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VTextField
+                v-model="subscribeForm.keyword"
+                label="搜索关键词"
+              />
+            </VCol>
+            <VCol
+              v-if="subscribeForm?.type === '电视剧'"
+              cols="12"
+              md="3"
+            >
+              <VTextField
+                v-model="subscribeForm.total_episode"
+                label="总集数"
+                :rules="[numberValidator]"
+              />
+            </VCol>
+            <VCol
+              v-if="subscribeForm?.type === '电视剧'"
+              cols="12"
+              md="3"
+            >
+              <VTextField
+                v-model="subscribeForm.start_episode"
+                label="开始集数"
+                :rules="[numberValidator]"
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol
+              cols="12"
+              md="4"
+            >
+              <VSelect
+                v-model="subscribeForm.quality"
+                label="质量"
+                :items="qualityOptions"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="4"
+            >
+              <VSelect
+                v-model="subscribeForm.resolution"
+                label="分辨率"
+                :items="resolutionOptions"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="4"
+            >
+              <VSelect
+                v-model="subscribeForm.effect"
+                label="特效"
+                :items="effectOptions"
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VTextField
+                v-model="subscribeForm.include"
+                label="包含（关键字、正则式）"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VTextField
+                v-model="subscribeForm.exclude"
+                label="排除（关键字、正则式）"
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="12">
+              <VSelect
+                v-model="subscribeForm.sites"
+                :items="selectSitesOptions"
+                chips
+                label="订阅站点"
+                multiple
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="12">
+              <VSwitch
+                v-model="subscribeForm.best_version"
+                label="洗版"
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+
+      <VCardActions>
+        <VBtn color="error" @click="removeSubscribe">
+          删除
+        </VBtn>
+        <VSpacer />
+        <VBtn @click="updateSubscribeInfo">
+          保存
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VBottomSheet>
+</template>

src/views/discover/MediaDetailView.vue

@@ -8,6 +8,7 @@ import NoDataFound from '@/components/NoDataFound.vue'
 import { doneNProgress, startNProgress } from '@/api/nprogress'
 import { formatSeason } from '@/@core/utils/formatters'
 import router from '@/router'
+import SubscribeEditForm from '@/components/form/SubscribeEditForm.vue'
 
 // 输入参数
 const mediaProps = defineProps({
@@ -21,6 +22,9 @@ const $toast = useToast()
 // 媒体详情
 const mediaDetail = ref<MediaInfo>({} as MediaInfo)
 
+// 订阅编辑弹窗
+const subscribeEditDialog = ref(false)
+
 // 本地是否存在
 const isExists = ref(false)
 
@@ -39,6 +43,9 @@ const seasonsNotExisted = ref<{ [key: number]: number }>({})
 // 各季的订阅状态
 const seasonsSubscribed = ref<{ [key: number]: boolean }>({})
 
+// 订阅编号
+const subscribeId = ref(0)
+
 // 调用API查询详情
 async function getMediaDetail() {
   if (mediaProps.mediaid && mediaProps.type) {
@@ -211,6 +218,12 @@ async function addSubscribe(season = 0) {
       result.message,
       best_version,
     )
+
+    // 显示编辑弹窗
+    if (result.success) {
+      subscribeId.value = result.data.id
+      subscribeEditDialog.value = true
+    }
   }
   catch (error) {
     console.error(error)
@@ -684,6 +697,20 @@ onBeforeMount(() => {
     error-title="出错啦！"
     error-description="未识别到TMDB媒体信息。"
   />
+  <!-- 订阅编辑弹窗 -->
+  <SubscribeEditForm
+    v-model="subscribeEditDialog"
+    :subid="subscribeId"
+    @close="subscribeEditDialog = false"
+    @save="subscribeEditDialog = false"
+    @remove="() => {
+      subscribeEditDialog = false;
+      if (mediaDetail.type === '电影')
+        checkMovieSubscribed()
+      else
+        checkSeasonsSubscribed();
+    }"
+  />
 </template>
 
 <style lang="scss">