feat: 新增 notivue

README.md

@@ -16,7 +16,6 @@
 ### 功能
 
 - [x] 载入动画
-- [x] 搜索引擎切换
 - [x] 时间及天气显示
 - [x] 快捷方式自定义
 - [x] 网站背景自定义

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^1.4.0",
     "fetch-jsonp": "^1.3.0",
+    "notivue": "^1.1.3",
     "pinia": "^2.1.4",
     "pinia-plugin-persistedstate": "^3.2.0",
     "sass": "^1.64.1",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   fetch-jsonp:
     specifier: ^1.3.0
     version: 1.3.0
+  notivue:
+    specifier: ^1.1.3
+    version: 1.1.3
   pinia:
     specifier: ^2.1.4
     version: 2.1.4(vue@3.3.4)
@@ -585,6 +588,11 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
+  /notivue@1.1.3:
+    resolution: {integrity: sha512-Pjn3sRmqzcvkPorlcv1FyoUbtfCmv6u6Sn/0THdYzjW9Mt6W43Sq1q5HnC6WBzTqEofNW0ggTYWoyilMn/6h6Q==}
+    requiresBuild: true
+    dev: false
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 

src/App.vue

@@ -7,6 +7,10 @@
       <WeatherTime />
       <SearchInp />
       <Footer />
+      <!-- Notivue -->
+      <Notivue v-slot="item">
+        <Notifications :item="item" />
+      </Notivue>
     </main>
     <div v-else id="loading">
       <img src="/icon/logo.png" alt="logo" class="logo" />
@@ -17,6 +21,7 @@
 
 <script setup>
 import { statusStore } from "@/stores";
+import { Notivue, Notifications } from "notivue";
 import Cover from "@/components/Cover.vue";
 import WeatherTime from "@/components/WeatherTime.vue";
 import SearchInp from "@/components/SearchInp.vue";

src/components/SearchInp.vue

@@ -42,10 +42,12 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import { statusStore, setStore } from "@/stores";
+import { usePush } from "notivue";
 import Suggestions from "@/components/Suggestions.vue";
 
 const set = setStore();
 const status = statusStore();
+const push = usePush();
 
 // 搜索框配置
 const inputTip = import.meta.env.VITE_INPUT_TIP ?? "想要搜点什么";
@@ -107,6 +109,7 @@ const toSearch = (val, type = 1) => {
   } else {
     status.setSiteStatus("focus");
     searchInputRef.value?.focus();
+    push.info({ message: "请输入搜索内容", duration: 1000 });
   }
 };
 

src/components/Suggestions.vue

@@ -27,7 +27,7 @@
             class="s-result"
             @click="toSearch(keyWord, 2)"
           >
-            <SvgIcon iconName="icon-translation" />
+            <SvgIcon iconName="icon-translation-two" />
             <span class="text">快捷翻译：{{ keyWord }}</span>
           </div>
           <!-- 直接访问 -->
@@ -231,13 +231,14 @@ defineExpose({ keyboardEvents });
   top: 0;
   left: 0;
   width: 100%;
-  max-height: 338px;
-  overflow-y: hidden;
+  max-height: 44vh;
+  overflow-y: auto;
   color: var(--main-text-color);
   background-color: var(--main-background-light-color);
   backdrop-filter: blur(30px) saturate(1.25);
   border-radius: 16px;
   transition: height 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
+  z-index: 1;
   .all-result,
   .special-result {
     .s-result {

src/main.js

@@ -5,7 +5,12 @@ import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 // IconFont
 import SvgIcon from "@/components/SvgIcon.vue";
 import "@/utils/iconfont.js";
+// Notivue
+import { notivue } from "notivue";
+import "notivue/notifications.css"; // Only needed if using built-in notifications
+import "notivue/animations.css"; // Only needed if using built-in animations
 
+// 主组件
 import App from "@/App.vue";
 
 // 全局样式
@@ -19,5 +24,9 @@ pinia.use(piniaPluginPersistedstate);
 
 // 挂载
 app.use(pinia);
+app.use(notivue, {
+  pauseOnHover: false,
+  limit: 1,
+});
 app.component("SvgIcon", SvgIcon);
 app.mount("#app");

src/stores/setData.js

@@ -8,6 +8,9 @@ const useSetDataStore = defineStore("setData", {
       backgroundType: 0,
       // 壁纸遮罩
       showBackgroundGray: true,
+      // 默认搜索引擎
+      searchEngine: null,
+      lastSearchEngine: null,
       // 清空搜索框
       showCleanInput: true,
       // 搜索框自动 focus

src/style/global.scss

@@ -1,6 +1,7 @@
 :root {
   --body-background-color: #333333;
   --main-text-color: #ffffff;
+  --main-text-grey-color: #eeeeee;
   --main-text-hover-color: #555555;
   --main-background-color: #00000040;
   --main-background-light-color: #ffffff30;
@@ -66,6 +67,24 @@ body {
   transform: scale(0.6);
 }
 
+// Notivue
+.Notivue__notification {
+  background-color: var(--main-background-light-color);
+  // backdrop-filter: blur(30px) saturate(1.25);
+  border-radius: 25px;
+  .Notivue__icon,
+  .Notivue__close {
+    display: none;
+  }
+  .Notivue__content {
+    padding: 0.5rem;
+    .Notivue__content-message {
+      text-align: center;
+      color: var(--main-text-grey-color);
+    }
+  }
+}
+
 // 全局动画
 @keyframes fade-up-in {
   0% {