feat 规则页面拆分

src/views/setting/AccountSettingRule.vue

@@ -1,15 +1,6 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
 import api from '@/api'
-import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
-
-// 规则卡片类型
-interface FilterCard {
-  // 优先级
-  pri: string
-  // 已选规则
-  rules: string[]
-}
 
 // 提示框
 const $toast = useToast()
@@ -23,41 +14,12 @@ const TorrentPriorityItems = [
   { title: '做种数优先', value: 'seeder' },
 ]
 
-// 规则卡片列表
-const filterCards = ref<FilterCard[]>([])
-
-// 洗版规则卡片列表
-const filterCards2 = ref<FilterCard[]>([])
-
 // 包含与排除规则
 const defaultIncludeExcludeFilter = ref({
   include: '',
   exclude: '',
 })
 
-// 查询已设置过滤规则
-async function queryCustomFilters(ruleType: string) {
-  try {
-    const result: { [key: string]: any } = await api.get(`system/setting/${ruleType}`)
-    if (result.success) {
-      // 保存的是个字符串，需要分割成数组
-      const groups = result.data?.value?.split('>') ?? []
-
-      // 生成规则卡片
-      const cards = ruleType === 'FilterRules' ? filterCards : filterCards2
-      cards.value = groups?.map((group: string, index: number) => {
-        return {
-          pri: (index + 1).toString(),
-          rules: group.split('&'),
-        }
-      })
-    }
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-
 // 查询种子优先规则
 async function queryTorrentPriority() {
   try {
@@ -86,37 +48,6 @@ async function queryIncludeExcludeFilter() {
   }
 }
 
-// 保存用户设置的规则
-async function saveCustomFilters(ruleType: string) {
-  try {
-    // 有值才处理
-    let value = ''
-    if (filterCards.value.length !== 0) {
-      // 将卡片规则接装为字符串
-      const cards = ruleType === 'FilterRules' ? filterCards : filterCards2
-      value = cards.value
-        .filter(card => card.rules.length > 0)
-        .map(card => card.rules.join('&'))
-        .join('>')
-    }
-    // 保存
-    const result: { [key: string]: any } = await api.post(
-      `system/setting/${ruleType}`,
-      value,
-    )
-
-    const msg = ruleType === 'FilterRules' ? '过滤规则' : '洗版规则'
-
-    if (result.success)
-      $toast.success(`${msg}保存成功`)
-    else
-      $toast.error(`${msg}保存失败！`)
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-
 // 保存种子优先规则
 async function saveTorrentPriority() {
   try {
@@ -153,127 +84,14 @@ async function saveIncludeExcludeFilter() {
   }
 }
 
-// 更新规则卡片的值
-function updateFilterCardValue(pri: string, rules: string[]) {
-  const card = filterCards.value.find(card => card.pri === pri)
-  if (card)
-    card.rules = rules
-}
-
-// 更新洗版规则卡片的值
-function updateFilterCardValue2(pri: string, rules: string[]) {
-  const card = filterCards2.value.find(card => card.pri === pri)
-  if (card)
-    card.rules = rules
-}
-
-// 移除卡片
-function filterCardClose(ruleType: string, pri: string) {
-  // 将pri对应的卡片从列表中删除，并更新剩余卡片的序号
-  const updatedCards = (ruleType === 'FilterRules' ? filterCards.value : filterCards2.value)
-    .filter(card => card.pri !== pri)
-    .map((card, index) => {
-      card.pri = (index + 1).toString()
-      return card
-    })
-  // 更新 filterCards.value
-  if (ruleType === 'FilterRules')
-    filterCards.value = updatedCards
-  else
-    filterCards2.value = updatedCards
-}
-
-// 增加卡片
-function addFilterCard(ruleType: string) {
-  const cards = ruleType === 'FilterRules' ? filterCards : filterCards2
-  // 优先级
-  const pri = (cards.value.length + 1).toString()
-
-  // 新卡片
-  const newCard: FilterCard = { pri, rules: [] }
-
-  // 添加到列表
-  cards.value.push(newCard)
-}
-
 onMounted(() => {
   queryTorrentPriority()
-  queryCustomFilters('FilterRules')
-  queryCustomFilters('FilterRules2')
   queryIncludeExcludeFilter()
 })
 </script>
 
 <template>
   <VRow>
-    <VCol cols="12">
-      <VCard title="过滤规则">
-        <VCardSubtitle> 设置在搜索和订阅时默认使用的过滤规则 </VCardSubtitle>
-        <VCardItem>
-          <div class="grid gap-3 grid-filterrule-card">
-            <FilterRuleCard
-              v-for="(card, index) in filterCards"
-              :key="index"
-              :pri="card.pri"
-              :rules="card.rules"
-              @changed="updateFilterCardValue"
-              @close="filterCardClose('FilterRules', card.pri)"
-            />
-          </div>
-        </VCardItem>
-        <VCardItem>
-          <VBtn
-            type="submit"
-            class="me-2"
-            @click="saveCustomFilters('FilterRules')"
-          >
-            保存
-          </VBtn>
-          <VBtn
-            color="success"
-            variant="tonal"
-            @click="addFilterCard('FilterRules')"
-          >
-            <VIcon icon="mdi-plus" />
-            <span class="d-none d-sm-block">增加规则</span>
-          </VBtn>
-        </VCardItem>
-      </VCard>
-    </VCol>
-    <VCol cols="12">
-      <VCard title="洗版规则">
-        <VCardSubtitle> 设置在订阅洗版时使用的过滤规则，匹配优先级1时洗版完成 </VCardSubtitle>
-        <VCardItem>
-          <div class="grid gap-3 grid-filterrule-card">
-            <FilterRuleCard
-              v-for="(card, index) in filterCards2"
-              :key="index"
-              :pri="card.pri"
-              :rules="card.rules"
-              @changed="updateFilterCardValue2"
-              @close="filterCardClose('FilterRules2', card.pri)"
-            />
-          </div>
-        </VCardItem>
-        <VCardItem>
-          <VBtn
-            type="submit"
-            class="me-2"
-            @click="saveCustomFilters('FilterRules2')"
-          >
-            保存
-          </VBtn>
-          <VBtn
-            color="success"
-            variant="tonal"
-            @click="addFilterCard('FilterRules2')"
-          >
-            <VIcon icon="mdi-plus" />
-            <span class="d-none d-sm-block">增加规则</span>
-          </VBtn>
-        </VCardItem>
-      </VCard>
-    </VCol>
     <VCol cols="12">
       <VCard title="下载优先规则">
         <VCardText>

src/views/setting/AccountSettingSearch.vue

@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toast-notification'
+import api from '@/api'
+import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
+import type { Site } from '@/api/types'
+
+// 规则卡片类型
+interface FilterCard {
+  // 优先级
+  pri: string
+  // 已选规则
+  rules: string[]
+}
+
+// 提示框
+const $toast = useToast()
+
+// 规则卡片列表
+const filterCards = ref<FilterCard[]>([])
+
+// 所有站点
+const allSites = ref<Site[]>([])
+
+// 选中订阅站点
+const selectedSites = ref<number[]>([])
+
+// 查询已设置优先级规则
+async function queryCustomFilters() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/SearchFilterRules')
+    if (result.success) {
+      // 保存的是个字符串，需要分割成数组
+      const groups = result.data?.value?.split('>') ?? []
+
+      // 生成规则卡片
+      filterCards.value = groups?.map((group: string, index: number) => {
+        return {
+          pri: (index + 1).toString(),
+          rules: group.split('&'),
+        }
+      })
+    }
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+// 保存用户设置的规则
+async function saveCustomFilters() {
+  try {
+    // 有值才处理
+    let value = ''
+    if (filterCards.value.length !== 0) {
+      // 将卡片规则接装为字符串
+      value = filterCards.value
+        .filter(card => card.rules.length > 0)
+        .map(card => card.rules.join('&'))
+        .join('>')
+    }
+    // 保存
+    const result: { [key: string]: any } = await api.post(
+      'system/setting/SearchFilterRules',
+      value,
+    )
+
+    if (result.success)
+      $toast.success('搜索优先级保存成功')
+    else
+      $toast.error('搜索优先级保存失败！')
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+// 更新规则卡片的值
+function updateFilterCardValue(pri: string, rules: string[]) {
+  const card = filterCards.value.find(card => card.pri === pri)
+  if (card)
+    card.rules = rules
+}
+
+// 移除卡片
+function filterCardClose(pri: string) {
+  // 将pri对应的卡片从列表中删除，并更新剩余卡片的序号
+  const updatedCards = filterCards.value
+    .filter(card => card.pri !== pri)
+    .map((card, index) => {
+      card.pri = (index + 1).toString()
+      return card
+    })
+  // 更新 filterCards.value
+  filterCards.value = updatedCards
+}
+
+// 增加卡片
+function addFilterCard() {
+  // 优先级
+  const pri = (filterCards.value.length + 1).toString()
+
+  // 新卡片
+  const newCard: FilterCard = { pri, rules: [] }
+
+  // 添加到列表
+  filterCards.value.push(newCard)
+}
+
+// 查询所有站点
+async function querySites() {
+  try {
+    const data: Site[] = await api.get('site')
+
+    // 过滤站点，只有启用的站点才显示
+    allSites.value = data.filter(item => item.is_active)
+    querySelectedSites()
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+// 查询用户选中的站点
+async function querySelectedSites() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/IndexerSites')
+
+    selectedSites.value = result.data?.value ?? []
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+// 保存用户选中的站点
+async function saveSelectedSites() {
+  try {
+    // 用户名密码
+    const result: { [key: string]: any } = await api.post('system/setting/IndexerSites', selectedSites.value)
+
+    if (result.success)
+      $toast.success('搜索站点保存成功')
+    else
+      $toast.error('搜索站点保存失败！')
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+onMounted(() => {
+  queryCustomFilters()
+  querySites()
+})
+</script>
+
+<template>
+  <VRow>
+    <VCol cols="12">
+      <VCard title="搜索站点">
+        <VCardSubtitle> 只有选中的站点才会在搜索中使用。</VCardSubtitle>
+
+        <VCardItem>
+          <VChipGroup v-model="selectedSites" column multiple>
+            <VChip
+              v-for="site in allSites"
+              :key="site.id"
+              :color="selectedSites.includes(site.id) ? 'primary' : ''"
+              filter
+              variant="outlined"
+              :value="site.id"
+            >
+              {{ site.name }}
+            </VChip>
+          </VChipGroup>
+        </VCardItem>
+
+        <VCardItem>
+          <VBtn type="submit" @click="saveSelectedSites">
+            保存
+          </VBtn>
+        </VCardItem>
+      </VCard>
+    </VCol>
+    <VCol cols="12">
+      <VCard title="搜索优先级">
+        <VCardSubtitle> 设置在搜索时默认使用的优先级排序，未在优先级中的资源将不在搜索结果中显示。 </VCardSubtitle>
+        <VCardItem>
+          <div class="grid gap-3 grid-filterrule-card">
+            <FilterRuleCard
+              v-for="(card, index) in filterCards"
+              :key="index"
+              :pri="card.pri"
+              :rules="card.rules"
+              @changed="updateFilterCardValue"
+              @close="filterCardClose(card.pri)"
+            />
+          </div>
+        </VCardItem>
+        <VCardItem>
+          <VBtn
+            type="submit"
+            class="me-2"
+            @click="saveCustomFilters()"
+          >
+            保存
+          </VBtn>
+          <VBtn
+            color="success"
+            variant="tonal"
+            @click="addFilterCard()"
+          >
+            <VIcon icon="mdi-plus" />
+          </VBtn>
+        </VCardItem>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
+
+<style lang="scss">
+.grid-filterrule-card {
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  padding-block-end: 1rem;
+}
+</style>

src/views/setting/AccountSettingSite.vue

@@ -1,19 +1,10 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
 import api from '@/api'
-import type { Site } from '@/api/types'
 
 // 提示框
 const $toast = useToast()
 
-// 选中搜索站点
-const selectedSites = ref<number[]>([])
-// 选中订阅站点
-const selectedRssSites = ref<number[]>([])
-
-// 所有站点
-const allSites = ref<Site[]>([])
-
 // 站点重置
 const isConfirmResetSites = ref(false)
 
@@ -23,76 +14,6 @@ const resetSitesText = ref('重置站点数据')
 // 站点重置按钮可用状态
 const resetSitesDisabled = ref(false)
 
-// 查询所有站点
-async function querySites() {
-  try {
-    const data: Site[] = await api.get('site')
-
-    // 过滤站点，只有启用的站点才显示
-    allSites.value = data.filter(item => item.is_active)
-    querySelectedSites()
-    querySelectedRssSites()
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-
-// 查询用户选中的站点
-async function querySelectedSites() {
-  try {
-    const result: { [key: string]: any } = await api.get('system/setting/IndexerSites')
-
-    selectedSites.value = result.data?.value ?? []
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-
-// 保存用户选中的站点
-async function saveSelectedSites() {
-  try {
-    // 用户名密码
-    const result: { [key: string]: any } = await api.post('system/setting/IndexerSites', selectedSites.value)
-
-    if (result.success)
-      $toast.success('搜索站点保存成功')
-    else
-      $toast.error('搜索站点保存失败！')
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-
-// 查询用户选中的订阅站点
-async function querySelectedRssSites() {
-  try {
-    const result: { [key: string]: any } = await api.get('system/setting/RssSites')
-
-    selectedRssSites.value = result.data?.value ?? []
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-
-// 保存用户选中的订阅站点
-async function saveSelectedRssSites() {
-  try {
-    const result: { [key: string]: any } = await api.post('system/setting/RssSites', selectedRssSites.value)
-
-    if (result.success)
-      $toast.success('订阅站点保存成功')
-    else
-      $toast.error('订阅站点保存失败！')
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-
 // 重置站点
 async function resetSites() {
   try {
@@ -100,13 +21,12 @@ async function resetSites() {
     resetSitesText.value = '正在重置...'
 
     const result: { [key: string]: any } = await api.get('site/reset')
-    if (result.success) {
+    if (result.success)
       $toast.success('站点重置成功，请等待CookieCloud同步完成！')
-      querySites()
-    }
-    else {
+
+    else
       $toast.error('站点重置失败！')
-    }
+
     resetSitesDisabled.value = false
     resetSitesText.value = '重置站点数据'
   }
@@ -114,66 +34,10 @@ async function resetSites() {
     console.log(error)
   }
 }
-
-onMounted(() => {
-  querySites()
-})
 </script>
 
 <template>
   <VRow>
-    <VCol cols="12">
-      <VCard title="搜索站点">
-        <VCardSubtitle> 只有选中的站点才会在搜索中使用</VCardSubtitle>
-
-        <VCardItem>
-          <VChipGroup v-model="selectedSites" column multiple>
-            <VChip
-              v-for="site in allSites"
-              :key="site.id"
-              :color="selectedSites.includes(site.id) ? 'primary' : ''"
-              filter
-              variant="outlined"
-              :value="site.id"
-            >
-              {{ site.name }}
-            </VChip>
-          </VChipGroup>
-        </VCardItem>
-
-        <VCardItem>
-          <VBtn type="submit" @click="saveSelectedSites">
-            保存
-          </VBtn>
-        </VCardItem>
-      </VCard>
-    </VCol>
-    <VCol cols="12">
-      <VCard title="订阅站点">
-        <VCardSubtitle> 只有选中的站点才会在订阅中使用</VCardSubtitle>
-
-        <VCardItem>
-          <VChipGroup v-model="selectedRssSites" column multiple>
-            <VChip
-              v-for="site in allSites"
-              :key="site.id"
-              :color="selectedRssSites.includes(site.id) ? 'primary' : ''"
-              filter
-              variant="outlined"
-              :value="site.id"
-            >
-              {{ site.name }}
-            </VChip>
-          </VChipGroup>
-        </VCardItem>
-
-        <VCardItem>
-          <VBtn type="submit" @click="saveSelectedRssSites">
-            保存
-          </VBtn>
-        </VCardItem>
-      </VCard>
-    </VCol>
     <VCol cols="12">
       <VCard title="站点重置">
         <VCardText>

src/views/setting/AccountSettingSubscribe.vue

@@ -0,0 +1,277 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toast-notification'
+import api from '@/api'
+import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
+import type { Site } from '@/api/types'
+
+// 规则卡片类型
+interface FilterCard {
+  // 优先级
+  pri: string
+  // 已选规则
+  rules: string[]
+}
+
+// 提示框
+const $toast = useToast()
+
+// 订阅规则卡片列表
+const subscribeFilterCards = ref<FilterCard[]>([])
+
+// 洗版规则卡片列表
+const bestVersionFilterCards = ref<FilterCard[]>([])
+
+// 所有站点
+const allSites = ref<Site[]>([])
+
+// 选中订阅站点
+const selectedRssSites = ref<number[]>([])
+
+// 查询用户选中的订阅站点
+async function querySelectedRssSites() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/RssSites')
+
+    selectedRssSites.value = result.data?.value ?? []
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+// 保存用户选中的订阅站点
+async function saveSelectedRssSites() {
+  try {
+    const result: { [key: string]: any } = await api.post('system/setting/RssSites', selectedRssSites.value)
+
+    if (result.success)
+      $toast.success('订阅站点保存成功')
+    else
+      $toast.error('订阅站点保存失败！')
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+// 查询所有站点
+async function querySites() {
+  try {
+    const data: Site[] = await api.get('site')
+
+    // 过滤站点，只有启用的站点才显示
+    allSites.value = data.filter(item => item.is_active)
+    querySelectedRssSites()
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+// 查询已设置优先级规则
+async function queryCustomFilters(ruleType: string) {
+  try {
+    const result: { [key: string]: any } = await api.get(`system/setting/${ruleType}`)
+    if (result.success) {
+      // 保存的是个字符串，需要分割成数组
+      const groups = result.data?.value?.split('>') ?? []
+
+      // 生成规则卡片
+      const cards = ruleType === 'SubscribeFilterRules' ? subscribeFilterCards : bestVersionFilterCards
+      cards.value = groups?.map((group: string, index: number) => {
+        return {
+          pri: (index + 1).toString(),
+          rules: group.split('&'),
+        }
+      })
+    }
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+// 保存用户设置的规则
+async function saveCustomFilters(ruleType: string) {
+  try {
+    // 有值才处理
+    let value = ''
+    const cards = ruleType === 'SubscribeFilterRules' ? subscribeFilterCards : bestVersionFilterCards
+    if (cards.value.length !== 0) {
+      // 将卡片规则接装为字符串
+      value = cards.value
+        .filter(card => card.rules.length > 0)
+        .map(card => card.rules.join('&'))
+        .join('>')
+    }
+    // 保存
+    const result: { [key: string]: any } = await api.post(
+      `system/setting/${ruleType}`,
+      value,
+    )
+
+    const msg = ruleType === 'SubscribeFilterRules' ? '订阅优先级' : '洗版优先级'
+
+    if (result.success)
+      $toast.success(`${msg}保存成功`)
+    else
+      $toast.error(`${msg}保存失败！`)
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+// 更新规则卡片的值
+function updateFilterCardValue(pri: string, rules: string[]) {
+  const card = subscribeFilterCards.value.find(card => card.pri === pri)
+  if (card)
+    card.rules = rules
+}
+
+// 更新洗版规则卡片的值
+function updateFilterCardValue2(pri: string, rules: string[]) {
+  const card = bestVersionFilterCards.value.find(card => card.pri === pri)
+  if (card)
+    card.rules = rules
+}
+
+// 移除卡片
+function filterCardClose(ruleType: string, pri: string) {
+  // 将pri对应的卡片从列表中删除，并更新剩余卡片的序号
+  const updatedCards = (ruleType === 'SubscribeFilterRules' ? subscribeFilterCards.value : bestVersionFilterCards.value)
+    .filter(card => card.pri !== pri)
+    .map((card, index) => {
+      card.pri = (index + 1).toString()
+      return card
+    })
+  // 更新 subscribeFilterCards.value
+  if (ruleType === 'SubscribeFilterRules')
+    subscribeFilterCards.value = updatedCards
+  else
+    bestVersionFilterCards.value = updatedCards
+}
+
+// 增加卡片
+function addFilterCard(ruleType: string) {
+  const cards = ruleType === 'SubscribeFilterRules' ? subscribeFilterCards : bestVersionFilterCards
+  // 优先级
+  const pri = (cards.value.length + 1).toString()
+
+  // 新卡片
+  const newCard: FilterCard = { pri, rules: [] }
+
+  // 添加到列表
+  cards.value.push(newCard)
+}
+
+onMounted(() => {
+  querySites()
+  queryCustomFilters('SubscribeFilterRules')
+  queryCustomFilters('BestVersionFilterRules')
+})
+</script>
+
+<template>
+  <VRow>
+    <VCol cols="12">
+      <VCard title="订阅站点">
+        <VCardSubtitle> 只有选中的站点才会在订阅中使用。</VCardSubtitle>
+
+        <VCardItem>
+          <VChipGroup v-model="selectedRssSites" column multiple>
+            <VChip
+              v-for="site in allSites"
+              :key="site.id"
+              :color="selectedRssSites.includes(site.id) ? 'primary' : ''"
+              filter
+              variant="outlined"
+              :value="site.id"
+            >
+              {{ site.name }}
+            </VChip>
+          </VChipGroup>
+        </VCardItem>
+
+        <VCardItem>
+          <VBtn type="submit" @click="saveSelectedRssSites">
+            保存
+          </VBtn>
+        </VCardItem>
+      </VCard>
+    </VCol>
+    <VCol cols="12">
+      <VCard title="订阅优先级">
+        <VCardSubtitle> 设置在正常订阅时默认使用的优先级，未在优先级中的资源将不会自动下载。 </VCardSubtitle>
+        <VCardItem>
+          <div class="grid gap-3 grid-filterrule-card">
+            <FilterRuleCard
+              v-for="(card, index) in subscribeFilterCards"
+              :key="index"
+              :pri="card.pri"
+              :rules="card.rules"
+              @changed="updateFilterCardValue"
+              @close="filterCardClose('SubscribeFilterRules', card.pri)"
+            />
+          </div>
+        </VCardItem>
+        <VCardItem>
+          <VBtn
+            type="submit"
+            class="me-2"
+            @click="saveCustomFilters('SubscribeFilterRules')"
+          >
+            保存
+          </VBtn>
+          <VBtn
+            color="success"
+            variant="tonal"
+            @click="addFilterCard('SubscribeFilterRules')"
+          >
+            <VIcon icon="mdi-plus" />
+          </VBtn>
+        </VCardItem>
+      </VCard>
+    </VCol>
+    <VCol cols="12">
+      <VCard title="洗版优先级">
+        <VCardSubtitle> 设置在订阅洗版时使用的优先级，匹配优先级1时洗版完成。 </VCardSubtitle>
+        <VCardItem>
+          <div class="grid gap-3 grid-filterrule-card">
+            <FilterRuleCard
+              v-for="(card, index) in bestVersionFilterCards"
+              :key="index"
+              :pri="card.pri"
+              :rules="card.rules"
+              @changed="updateFilterCardValue2"
+              @close="filterCardClose('BestVersionFilterRules', card.pri)"
+            />
+          </div>
+        </VCardItem>
+        <VCardItem>
+          <VBtn
+            type="submit"
+            class="me-2"
+            @click="saveCustomFilters('BestVersionFilterRules')"
+          >
+            保存
+          </VBtn>
+          <VBtn
+            color="success"
+            variant="tonal"
+            @click="addFilterCard('BestVersionFilterRules')"
+          >
+            <VIcon icon="mdi-plus" />
+          </VBtn>
+        </VCardItem>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
+
+<style lang="scss">
+.grid-filterrule-card {
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  padding-block-end: 1rem;
+}
+</style>