refactor: Update FilterRuleGroupCard.vue to add support for selecting…

… media categories
jxxghp · Sep 12, 2024 · 5ad25ff · 5ad25ff
1 parent 04e1b52
commit 5ad25ff
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 3 deletions.
diff --git a/src/api/types.ts b/src/api/types.ts
@@ -971,6 +971,8 @@ export interface FilterRuleGroup {
  name: string
  // 规则串
  rule_string?: string
- // 适用类媒体类别 None-全部 电影/电视剧
+ // 适用类媒体类型 None-全部 电影/电视剧
  media_type?: string
+ // # 适用媒体类别 None-全部 对应二级分类
+ category?: string
 }
diff --git a/src/components/cards/FilterRuleGroupCard.vue b/src/components/cards/FilterRuleGroupCard.vue
@@ -13,6 +13,10 @@ const props = defineProps({
  type: Object as PropType<FilterRuleGroup>,
  required: true,
  },
+ categories: {
+ type: Object as PropType<{ [key: string]: any }>,
+ required: true,
+ },
  custom_rules: Array as PropType<CustomRule[]>,
 })
 
@@ -38,6 +42,7 @@ const groupInfo = ref<FilterRuleGroup>({
  name: '',
  rule_string: '',
  media_type: '',
+ category: '',
 })
 
 // 规则组名称
@@ -50,6 +55,14 @@ const mediaTypeItems = [
  { title: '电视剧', value: '电视剧' },
 ]
 
+// 根据选中的媒体类型，获取对应的媒体类别
+const getCategories = computed(() => {
+ const default_value = [{ title: '全部', 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[]>([])
 
@@ -167,6 +180,15 @@ function savegroupInfo() {
  emit('change', groupInfo.value)
 }
 
+// 监听适用媒体类型数据变化
+watch(
+ () => groupInfo.value.media_type,
+ () => {
+ // 适用媒体类型变化时，清空适用媒体类别
+ groupInfo.value.category = ''
+ },
+)
+
 // 按钮点击
 function onClose() {
  emit('close')
@@ -180,7 +202,10 @@ function onClose() {
  <VCardText class="flex justify-space-between align-center gap-3">
  <div class="align-self-start">
  <h5 class="text-h6 mb-1">{{ props.group.name }}</h5>
- <div class="text-body-1 mb-3">{{ props.group.media_type || '通用' }}</div>
+ <div class="text-body-1 mb-3">
+ <span v-if="!props.group.category">{{ props.group.media_type || '通用' }}</span>
+ <span v-else>{{ props.group.category }}</span>
+ </div>
  </div>
  <VImg :src="filter_group_svg" cover class="mt-10" max-width="3rem" />
  </VCardText>
@@ -194,9 +219,12 @@ function onClose() {
  <VCol cols="12" md="6">
  <VTextField v-model="groupName" label="规则组名称" />
  </VCol>
- <VCol cols="12" md="6">
+ <VCol cols="6" md="3">
  <VSelect v-model="groupInfo.media_type" label="适用媒体类型" :items="mediaTypeItems" />
  </VCol>
+ <VCol cols="6" md="3">
+ <VSelect v-model="groupInfo.category" :items="getCategories" label="适用媒体类别" />
+ </VCol>
  </VRow>
  </VCardText>
  <VCardText>

diff --git a/src/views/setting/AccountSettingRule.vue b/src/views/setting/AccountSettingRule.vue
@@ -17,6 +17,9 @@ const filterRuleGroups = ref<FilterRuleGroup[]>([])
 // 种子优先规则
 const selectedTorrentPriority = ref<string>('seeder')
 
+// 二级分类策略
+const mediaCategories = ref<{ [key: string]: any }>({})
+
 // 提示框
 const $toast = useToast()
 
@@ -27,6 +30,15 @@ const TorrentPriorityItems = [
  { title: '资源做种数优先', value: 'seeder' },
 ]
 
+// 调用API查询自动分类配置
+async function loadMediaCategories() {
+ try {
+ mediaCategories.value = await api.get('media/category')
+ } catch (error) {
+ console.log(error)
+ }
+}
+
 // 保存自定义规则
 async function saveCustomRules() {
  try {
@@ -141,6 +153,7 @@ async function saveTorrentPriority() {
 
 // 加载数据
 onMounted(() => {
+ loadMediaCategories()
  queryCustomRules()
  queryFilterRuleGroups()
  queryTorrentPriority()
@@ -194,6 +207,7 @@ onMounted(() => {
  <FilterRuleGroupCard
  :group="element"
  :custom_rules="customRules"
+ :categories="mediaCategories"
  @close="removeFilterRuleGroup(element)"
  @change="changeRuleGroup"
  />