✨ 新增内置搜索功能

public/config.js

@@ -9,6 +9,7 @@ window.$$nazhuaConfig = {
   // lightBackground: true, // 启用了浅色系背景图，会强制关闭点点背景
   // showFireworks: true, // 是否显示烟花，建议开启浅色系背景
   // showLantern: true, // 是否显示灯笼
+  enableInnerSearch: true, // 启用内部搜索
   // listServerItemTypeToggle: true, // 服务器列表项类型切换
   // listServerItemType: 'row', // 服务器列表项类型 card/row row列表模式移动端自动切换至card
   // listServerStatusType: 'progress', // 服务器状态类型--列表

src/layout/components/search-box.vue

@@ -0,0 +1,328 @@
+<template>
+  <transition name="fadeIn">
+    <div
+      v-if="show"
+      class="search-box-background"
+      @click="closeSearchBox"
+    />
+  </transition>
+  <transition name="fadeIn">
+    <div
+      v-if="show"
+      class="search-box-group"
+    >
+      <div class="search-box">
+        <input
+          ref="searchInputRef"
+          v-model.trim="searchWord"
+          type="text"
+          placeholder="可搜索服务器名称、标签、系统、国别代码"
+          class="search-box-input"
+          @input="onSearchInput"
+          @keydown.enter="onSearchInput"
+          @blur="onSearchInput"
+        />
+        <span
+          v-if="searchWord"
+          class="clear-btn"
+          @click="clearSearchWord"
+        >
+          <i class="clear-icon ri-close-fill" />
+        </span>
+      </div>
+      <div class="result-server-list-container">
+        <div class="search-list">
+          <search-list-item
+            v-for="item in searchResult"
+            :key="item.ID"
+            :info="item"
+            @open-detail="openDetail"
+          />
+        </div>
+      </div>
+    </div>
+  </transition>
+
+  <div
+    class="search-active-btn"
+    @click="activeSearchBox"
+  >
+    <span class="icon">
+      <i class="ri-search-eye-line" />
+    </span>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 搜索盒子
+ */
+
+import {
+  computed,
+  ref,
+  onMounted,
+  onUnmounted,
+} from 'vue';
+import {
+  useStore,
+} from 'vuex';
+import {
+  useRouter,
+} from 'vue-router';
+
+import SearchListItem from './search-list-item.vue';
+
+const router = useRouter();
+const store = useStore();
+const serverList = computed(() => store.state.serverList);
+
+const show = ref(false);
+const searchWord = ref('');
+const searchResult = ref([]);
+const searchInputRef = ref(null);
+
+let handleSearchTimer = null;
+function handleSearch() {
+  if (handleSearchTimer) {
+    clearTimeout(handleSearchTimer);
+  }
+  if (!searchWord.value) {
+    searchResult.value = [...serverList.value];
+    return;
+  }
+  handleSearchTimer = setTimeout(() => {
+    handleSearchTimer = null;
+    searchResult.value = serverList.value.filter((item) => {
+      {
+        const matched = item.Name.toLowerCase().includes(searchWord.value.toLowerCase());
+        if (matched) {
+          return true;
+        }
+      }
+      if (item?.PublicNote?.planDataMod) {
+        const {
+          networkRoute = '',
+          extra = '',
+        } = item.PublicNote.planDataMod;
+        return [
+          networkRoute.toLowerCase().includes(searchWord.value.toLowerCase()),
+          extra.toLowerCase().includes(searchWord.value.toLowerCase()),
+          (item.Host.Platform || '').toLowerCase().includes(searchWord.value.toLowerCase()),
+          (item.Host.CountryCode || '').toLowerCase().includes(searchWord.value.toLowerCase()),
+        ].some((match) => match);
+      }
+      return false;
+    });
+  }, 200);
+}
+
+function onSearchInput() {
+  handleSearch();
+}
+
+function clearSearchWord() {
+  searchWord.value = '';
+  searchResult.value = [...serverList.value];
+}
+
+function activeSearchBox() {
+  searchWord.value = '';
+  searchResult.value = [...serverList.value];
+  show.value = true;
+  // 锁定页面滚动
+  document.body.style.overflow = 'hidden';
+
+  // 聚焦到搜索框
+  setTimeout(() => {
+    searchInputRef.value.focus();
+  }, 30);
+}
+
+function closeSearchBox() {
+  show.value = false;
+  document.body.style.overflow = '';
+}
+
+function openDetail(info) {
+  router.push({
+    name: 'ServerDetail',
+    params: {
+      serverId: info.ID,
+    },
+  });
+  closeSearchBox();
+}
+
+function handleKeyDown(event) {
+  if (event.ctrlKey && event.key === 'k') {
+    event.stopPropagation();
+    event.preventDefault();
+    if (show.value) {
+      closeSearchBox();
+    } else {
+      activeSearchBox();
+    }
+  }
+}
+
+function handleEscKey(event) {
+  if (!show.value) {
+    return;
+  }
+  if (event.key === 'Escape') {
+    closeSearchBox();
+    event.stopPropagation();
+    event.preventDefault();
+  }
+}
+
+onMounted(() => {
+  // 监听按下快捷键 Ctrl+K 打开搜索框
+  window.addEventListener('keydown', handleKeyDown);
+  // 监听按下 Esc 关闭搜索框
+  window.addEventListener('keydown', handleEscKey);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+  window.removeEventListener('keydown', handleEscKey);
+});
+</script>
+
+<style lang="scss" scoped>
+.search-box-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+}
+
+.search-box-group {
+  position: fixed;
+  left: 50%;
+  top: 150px;
+  z-index: 1010;
+  transform: translate(-50%, 0);
+  width: 600px;
+  padding: 30px;
+  border-radius: 12px;
+  background-color: rgba(#000, 0.9);
+
+  @media screen and (max-width: 640px) {
+    width: auto;
+    top: 100px;
+    left: 20px;
+    right: 20px;
+    padding: 20px;
+    transform: translate(0, 0);
+  }
+
+  .search-box {
+    position: relative;
+    width: 100%;
+    padding-right: 40px;
+    border-radius: 20px;
+    background: #eee;
+
+    .search-box-input {
+      width: 100%;
+      height: 40px;
+      padding: 0 15px;
+      color: #234;
+      font-size: 14px;
+      background: transparent;
+      border: none;
+      outline: none;
+      transition: 0.3s;
+    }
+
+    .clear-btn {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      cursor: pointer;
+      transition: 0.3s;
+
+      .clear-icon {
+        font-size: 20px;
+        color: #666;
+      }
+
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+
+  .search-list {
+    margin-top: 10px;
+    height: 300px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    @media screen and (max-width: 640px) {
+      height: 50vh;
+    }
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 4px;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+}
+
+.search-active-btn {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 10;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(#000, 0.7);
+  cursor: pointer;
+  transition: 0.3s;
+
+  .icon {
+    line-height: 1;
+    font-size: 24px;
+    color: #eee;
+  }
+
+  &:hover {
+    background: rgba(#000, 0.9);
+  }
+}
+
+.fadeIn-enter-active,
+.fadeIn-leave-active {
+  transition: opacity 0.3s ease-in-out;
+}
+.fadeIn-enter-from,
+.fadeIn-leave-to {
+  opacity: 0;
+}
+</style>

src/layout/components/search-list-item.vue

@@ -0,0 +1,104 @@
+<template>
+  <div
+    class="search-list-item"
+    @click="openDetail"
+  >
+    <div class="server-name">
+      {{ info.Name }}
+    </div>
+    <div class="server-tag-list">
+      <span
+        v-for="(tagItem, index) in tagList"
+        :key="`${tagItem}_${index}`"
+        class="tag-item"
+        :class="{
+          'has-sarasa-term': $hasSarasaTerm && config.nazhua.disableSarasaTermSC !== true,
+        }"
+      >
+        {{ tagItem }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 搜索后的单条展示
+ */
+
+import {
+  computed,
+} from 'vue';
+
+import config from '@/config';
+
+const props = defineProps({
+  info: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emits = defineEmits([
+  'open-detail',
+]);
+
+const tagList = computed(() => {
+  const list = [];
+  const {
+    networkRoute,
+    extra,
+  } = props?.info?.PublicNote?.planDataMod || {};
+  if (networkRoute) {
+    list.push(...networkRoute.split(','));
+  }
+  if (extra) {
+    list.push(...extra.split(','));
+  }
+  // 列表最多显示3个标签
+  return list.slice(0, 3);
+});
+
+function openDetail() {
+  emits('open-detail', props.info);
+}
+
+</script>
+
+<style lang="scss" scoped>
+.search-list-item {
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  .server-name {
+    flex: 1;
+    line-height: 30px;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .server-tag-list {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 30px;
+
+    .tag-item {
+      height: 18px;
+      padding: 0 4px;
+      line-height: 18px;
+      font-size: 12px;
+      color: var(--public-note-tag-color);
+      background: var(--public-note-tag-bg);
+      text-shadow: 1px 1px 2px rgba(#000, 0.2);
+      border-radius: 4px;
+
+      &.has-sarasa-term {
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>

src/layout/main.vue

@@ -11,6 +11,10 @@
       <layout-header />
       <slot />
       <layout-footer />
+
+      <search-box
+        v-if="enableInnerSearch"
+      />
     </div>
     <template v-if="config.nazhua.showFireworks">
       <fireworks />
@@ -31,6 +35,7 @@ import Fireworks from '@/components/fireworks.vue';
 import Lantern from '@/components/lantern.vue';
 import LayoutHeader from './components/header.vue';
 import LayoutFooter from './components/footer.vue';
+import SearchBox from './components/search-box.vue';
 
 const layoutGroupStyle = computed(() => {
   const style = {};
@@ -48,6 +53,8 @@ const layoutBGStyle = computed(() => {
   }
   return style;
 });
+
+const enableInnerSearch = computed(() => config.nazhua.enableInnerSearch);
 </script>
 
 <style lang="scss" scoped>