✨ 角色wiki筛选 #87

src/pages/WIKI/Character.vue

@@ -1,19 +1,28 @@
 <template>
   <div class="wc-box">
-    <div class="wc-list">
-      <TwcListItem
-        v-for="item in cardsInfo"
-        v-model:cur-item="curItem"
-        :key="item.id"
-        :data="item"
-        @click="switchC(item)"
-        mode="character"
-      />
+    <div class="wc-left">
+      <div class="wc-select">
+        <v-btn @click="showSelect = true">
+          <span>筛选角色</span>
+        </v-btn>
+        <v-btn @click="resetSelect = true">重置筛选</v-btn>
+      </div>
+      <div class="wc-list">
+        <TwcListItem
+          v-for="item in cardsInfo"
+          v-model:cur-item="curItem"
+          :key="item.id"
+          :data="item"
+          @click="switchC(item)"
+          mode="character"
+        />
+      </div>
     </div>
     <div class="wc-detail">
       <TwcCharacter :item="curItem" @error="toOuter(curItem)" />
     </div>
   </div>
+  <TwoSelectC v-model="showSelect" @select-c="handleSelect" v-model:reset="resetSelect" />
 </template>
 <script lang="ts" setup>
 import { onBeforeMount, ref } from "vue";
@@ -23,19 +32,22 @@ import showConfirm from "../../components/func/confirm";
 import showSnackbar from "../../components/func/snackbar";
 import TwcCharacter from "../../components/wiki/twc-character.vue";
 import TwcListItem from "../../components/wiki/twc-list-item.vue";
+import TwoSelectC, { SelectedCValue } from "../../components/wiki/two-select-c.vue";
 import { AppCharacterData } from "../../data";
 import Mys from "../../plugins/Mys";
 import { createTGWindow } from "../../utils/TGWindow";
 
 const id = useRoute().params.id.toString() ?? "0";
-const cardsInfo = AppCharacterData;
+const showSelect = ref(false);
+const resetSelect = ref(false);
+const cardsInfo = ref(AppCharacterData);
 const curItem = ref<TGApp.App.Character.WikiBriefInfo>();
 
 onBeforeMount(() => {
   if (id === "0") {
-    curItem.value = cardsInfo[0];
+    curItem.value = cardsInfo.value[0];
   } else {
-    const item = cardsInfo.find((item) => item.id.toString() === id);
+    const item = cardsInfo.value.find((item) => item.id.toString() === id);
     if (item) {
       curItem.value = item;
     } else {
@@ -43,11 +55,33 @@ onBeforeMount(() => {
         text: `角色 ${id} 不存在`,
         color: "warn",
       });
-      curItem.value = cardsInfo[0];
+      curItem.value = cardsInfo.value[0];
     }
   }
 });
 
+function handleSelect(val: SelectedCValue) {
+  showSelect.value = false;
+  const filterC = AppCharacterData.filter((item) => {
+    if (!val.star.includes(item.star)) return false;
+    if (!val.weapon.includes(item.weapon)) return false;
+    if (!val.elements.includes(item.element)) return false;
+    return val.area.includes(item.area);
+  });
+  if (filterC.length === 0) {
+    showSnackbar({
+      text: "未找到符合条件的角色，已重置筛选条件",
+      color: "warn",
+    });
+    resetSelect.value = true;
+    return;
+  }
+  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> {
   if (item.id === 10000005 || item.id === 10000007) {
     await toOuter(item);
@@ -84,16 +118,33 @@ async function toOuter(item?: TGApp.App.Character.WikiBriefInfo): Promise<void>
 .wc-box {
   position: relative;
   display: flex;
-  max-height: calc(100vh - 40px);
+  height: calc(100vh - 40px);
   column-gap: 10px;
 }
 
+.wc-left {
+  display: flex;
+  width: 500px;
+  height: 100%;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.wc-select {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
 .wc-list {
+  position: relative;
   display: grid;
   width: 500px;
-  max-height: 100%;
+  height: calc(100% - 40px);
   padding-right: 10px;
   gap: 10px;
+  grid-auto-rows: 45px;
   grid-template-columns: repeat(3, minmax(100px, 1fr));
   overflow-y: auto;
 }