⚡️ 调整角色筛选逻辑

src/components/wiki/two-select-c.vue

@@ -20,7 +20,7 @@
           <div v-for="(item, index) in selectWeaponList" :key="index">
             <v-item v-slot="{ isSelected, toggle }" :value="item">
               <v-btn @click="toggle" :color="isSelected ? 'primary' : ''">
-                <img :alt="`${item}元素`" :src="`/icon/weapon/${item}.webp`" class="two-sci-icon" />
+                <img :alt="`${item}`" :src="`/icon/weapon/${item}.webp`" class="two-sci-icon" />
                 <span>{{ item }}</span>
               </v-btn>
             </v-item>
@@ -88,12 +88,12 @@ export interface SelectedCValue {
   area: string[];
 }
 
-interface TwoSelectProps {
+interface TwoSelectCProps {
   modelValue: boolean;
   reset: boolean;
 }
 
-interface TwoSelectEmits {
+interface TwoSelectCEmits {
   (e: "update:modelValue", value: boolean): void;
 
   (e: "update:reset", value: boolean): void;
@@ -101,8 +101,8 @@ interface TwoSelectEmits {
   (e: "select-c", value: SelectedCValue): void;
 }
 
-const props = defineProps<TwoSelectProps>();
-const emits = defineEmits<TwoSelectEmits>();
+const props = defineProps<TwoSelectCProps>();
+const emits = defineEmits<TwoSelectCEmits>();
 
 const visible = computed({
   get() {
@@ -130,13 +130,11 @@ watch(
       selectedElements.value = selectElementList;
       selectedArea.value = selectAreaList;
       reset.value = false;
-      confirmSelect();
     }
   },
 );
 
 function onCancel() {
-  console.log(selectedElements.value);
   visible.value = false;
 }
 

src/pages/WIKI/Character.vue

@@ -9,9 +9,9 @@
       </div>
       <div class="wc-list">
         <TwcListItem
-          v-for="item in cardsInfo"
+          v-for="(item, index) in cardsInfo"
           v-model:cur-item="curItem"
-          :key="item.id"
+          :key="index"
           :data="item"
           @click="switchC(item)"
           mode="character"
@@ -25,7 +25,7 @@
   <TwoSelectC v-model="showSelect" @select-c="handleSelect" v-model:reset="resetSelect" />
 </template>
 <script lang="ts" setup>
-import { onBeforeMount, ref } from "vue";
+import { onBeforeMount, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 
 import showConfirm from "../../components/func/confirm";
@@ -60,6 +60,10 @@ onBeforeMount(() => {
   }
 });
 
+watch(resetSelect, (val) => {
+  if (val) cardsInfo.value = AppCharacterData;
+});
+
 function handleSelect(val: SelectedCValue) {
   showSelect.value = false;
   const filterC = AppCharacterData.filter((item) => {
@@ -70,16 +74,15 @@ function handleSelect(val: SelectedCValue) {
   });
   if (filterC.length === 0) {
     showSnackbar({
-      text: "未找到符合条件的角色，已重置筛选条件",
+      text: "未找到符合条件的角色",
       color: "warn",
     });
-    resetSelect.value = true;
     return;
   }
+  showSnackbar({
+    text: `筛选出符合条件的角色 ${filterC.length} 个`,
+  });
   cardsInfo.value = filterC;
-  if (!filterC.find((item) => item.id === curItem.value?.id)) {
-    curItem.value = filterC[0];
-  }
 }
 
 async function switchC(item: TGApp.App.Character.WikiBriefInfo): Promise<void> {