refactor: Update FilterRuleGroupCard.vue to add support for selecting media categories

src/api/types.ts

@@ -971,6 +971,8 @@ export interface FilterRuleGroup {
   name: string
   // 规则串
   rule_string?: string
-  // 适用类媒体类别 None-全部 电影/电视剧
+  // 适用类媒体类型 None-全部 电影/电视剧
   media_type?: string
+  // # 适用媒体类别 None-全部 对应二级分类
+  category?: string
 }

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>

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"
               />