✨ 支持查询

src/pages/WIKI/Namecard.vue

@@ -1,84 +1,143 @@
 <template>
   <div class="tw-nc-box">
-    <!-- todo search -->
-    <v-virtual-scroll :items="AppNameCardsData" :item-height="80" class="cards-list">
-      <template #default="{ item }">
-        <v-list
-          :style="{ backgroundImage: `url(${item.bg})` }"
-          class="card-box"
-          @click="toNameCard(item)"
-        >
-          <v-list-item :title="item.name" :subtitle="item.desc">
-            <template #prepend>
-              <v-img width="80px" style="margin-right: 10px" :src="item.icon" />
-            </template>
-          </v-list-item>
-        </v-list>
-      </template>
-    </v-virtual-scroll>
-    <ToNamecard v-model="visible" :data="curNameCard">
-      <template #left>
-        <div class="card-arrow left" @click="switchCard(false)">
-          <img src="../../assets/icons/arrow-right.svg" alt="right" />
-        </div>
-      </template>
-      <template #right>
-        <div class="card-arrow" @click="switchCard(true)">
-          <img src="../../assets/icons/arrow-right.svg" alt="right" />
-        </div>
-      </template>
-    </ToNamecard>
+    <v-text-field
+      v-model="search"
+      prepend-inner-icon="mdi-magnify"
+      label="搜索"
+      hide-details
+      variant="outlined"
+      @click:prepend-inner="searchNamecard"
+      @keyup.enter="searchNamecard"
+    />
+    <div class="tw-nc-list">
+      <v-virtual-scroll :items="sortNameCardsData" :item-height="80" class="cards-list">
+        <template #default="{ item }">
+          <v-list
+            :style="{ backgroundImage: item.name === '原神·印象' ? 'none' : `url(${item.bg})` }"
+            class="card-box"
+            @click="toNameCard(item)"
+          >
+            <v-list-item :title="item.name" :subtitle="item.desc">
+              <template #prepend>
+                <v-img width="80px" style="margin-right: 10px" :src="item.icon" />
+              </template>
+            </v-list-item>
+          </v-list>
+        </template>
+      </v-virtual-scroll>
+    </div>
   </div>
+  <ToNamecard v-model="visible" :data="curNameCard">
+    <template #left>
+      <div class="card-arrow left" @click="switchCard(false)">
+        <img src="../../assets/icons/arrow-right.svg" alt="right" />
+      </div>
+    </template>
+    <template #right>
+      <div class="card-arrow" @click="switchCard(true)">
+        <img src="../../assets/icons/arrow-right.svg" alt="right" />
+      </div>
+    </template>
+  </ToNamecard>
 </template>
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 
+import showSnackbar from "../../components/func/snackbar";
 import ToNamecard from "../../components/overlay/to-namecard.vue";
 import { AppNameCardsData } from "../../data";
 
 const curNameCard = ref<TGApp.App.NameCard.Item>();
+const sortNameCardsData = ref<TGApp.App.NameCard.Item[]>([]);
+const curIndex = ref(0);
+const total = ref(0);
 const visible = ref(false);
+const search = ref("");
 
 onMounted(() => {
-  curNameCard.value = AppNameCardsData[0];
+  sortData(AppNameCardsData);
 });
 
+function sortData(data: TGApp.App.NameCard.Item[]) {
+  sortNameCardsData.value = data.sort((a, b) => a.type - b.type || a.index - b.index);
+  curIndex.value = 0;
+  total.value = sortNameCardsData.value.length;
+  curNameCard.value = sortNameCardsData.value[curIndex.value];
+  showSnackbar({
+    text: `共搜索到 ${sortNameCardsData.value.length} 个结果`,
+    color: "success",
+  });
+}
+
 function toNameCard(item: TGApp.App.NameCard.Item) {
   curNameCard.value = item;
+  curIndex.value = sortNameCardsData.value.findIndex((i) => i.name === item.name);
   visible.value = true;
 }
 
 function switchCard(isNext: boolean) {
-  const index = AppNameCardsData.findIndex((item) => item.name === curNameCard.value?.name);
-  if (index === -1) return;
   if (isNext) {
-    if (index === AppNameCardsData.length - 1) {
-      curNameCard.value = AppNameCardsData[0];
+    if (curIndex.value === total.value - 1) {
+      showSnackbar({
+        text: "已经是最后一个了",
+        color: "warn",
+      });
+      return;
+    }
+    curIndex.value++;
+  } else {
+    if (curIndex.value === 0) {
+      showSnackbar({
+        text: "已经是第一个了",
+        color: "warn",
+      });
+      return;
+    }
+    curIndex.value--;
+  }
+  curNameCard.value = sortNameCardsData.value[curIndex.value];
+}
+
+function searchNamecard() {
+  if (!search.value) {
+    sortData(AppNameCardsData);
+  } else if (search.value === "") {
+    if (sortNameCardsData.value.length === AppNameCardsData.length) {
+      showSnackbar({
+        text: "请先输入搜索内容",
+        color: "warn",
+      });
     } else {
-      curNameCard.value = AppNameCardsData[index + 1];
+      sortData(AppNameCardsData);
     }
   } else {
-    if (index === 0) {
-      curNameCard.value = AppNameCardsData[AppNameCardsData.length - 1];
-    } else {
-      curNameCard.value = AppNameCardsData[index - 1];
-    }
+    const searchResult = AppNameCardsData.filter((item) => {
+      return item.name.includes(search.value) || item.desc.includes(search.value);
+    });
+    sortData(searchResult);
   }
 }
 </script>
 <style lang="css" scoped>
 .tw-nc-box {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+}
+
+.tw-nc-list {
   overflow: auto;
-  width: 100%;
-  height: 100%;
-  padding: 10px;
+  height: calc(100vh - 100px);
+  padding-right: 10px;
 }
 
 .card-box {
   width: 100%;
+  height: 80px;
   border: 1px solid var(--common-shadow-2);
   border-radius: 10px 50px 50px 10px;
   margin-bottom: 10px;
+  background-color: var(--box-bg-1);
   background-position: right;
   background-repeat: no-repeat;
   cursor: pointer;