fix: 修复切换引擎时翻译未跟随

package.json

@@ -15,6 +15,7 @@
     "pinia": "^2.1.4",
     "pinia-plugin-persistedstate": "^3.2.0",
     "sass": "^1.64.1",
+    "vite-plugin-pwa": "^0.16.4",
     "vue": "^3.3.4",
     "vue3-perfect-scrollbar": "^1.6.1"
   },

src/assets/defaultEngine.json

@@ -2,21 +2,25 @@
   "baidu": {
     "name": "百度",
     "url": "https://www.baidu.com/s?wd=",
+    "translation": "https://fanyi.baidu.com/#zh/en/",
     "icon": "baidu"
   },
   "bing": {
     "name": "必应",
     "url": "https://www.bing.com/search?q=",
+    "translation": "https://www.bing.com/translator?text=",
     "icon": "bing"
   },
   "google": {
     "name": "谷歌",
     "url": "https://www.google.com/search?q=",
+    "translation": "https://translate.google.com/?text=",
     "icon": "google"
   },
   "sogou": {
     "name": "搜狗",
     "url": "https://www.sogou.com/sogou?query=",
+    "translation": "https://fanyi.sogou.com/text?keyword=",
     "icon": "sogou"
   },
   "duckduckgo": {
@@ -27,11 +31,13 @@
   "yandex": {
     "name": "Yandex",
     "url": "https://yandex.com/search/?text=",
+    "translation": "https://translate.yandex.com/?text=",
     "icon": "yandex"
   },
   "search-360": {
     "name": "360 搜索",
     "url": "https://www.so.com/s?q=",
+    "translation": "https://fanyi.so.com/#",
     "icon": "search-360"
   },
   "weibo": {

src/components/SearchEngine.vue

@@ -6,7 +6,7 @@
           <div
             v-for="(item, key) in defaultEngine"
             :key="key"
-            class="engine"
+            :class="['engine', key === set.searchEngine ? 'choose' : null]"
             @click="changeSearchEngine(key)"
           >
             <SvgIcon :iconName="`icon-${key}`" />
@@ -78,9 +78,12 @@ const changeSearchEngine = (key) => {
           text-overflow: ellipsis;
           white-space: nowrap;
         }
+        &.choose {
+          background-color: var(--main-background-hover-color);
+        }
         &:hover {
           background-color: var(--main-background-hover-color);
-          box-shadow: 0 0 0px 2px #ffffff30;
+          box-shadow: 0 0 0px 2px var(--main-background-hover-color);
         }
       }
       @media (max-width: 798px) {

src/components/SearchInp.vue

@@ -13,10 +13,12 @@
       @animationend="inputAnimationEnd"
     >
       <div class="engine" title="切换搜索引擎" @click="changeEngine">
-        <SvgIcon
-          :iconName="`icon-${defaultEngine[set.searchEngine].icon}`"
-          className="baidu"
-        />
+        <Transition name="fade" mode="out-in">
+          <SvgIcon
+            :iconName="`icon-${defaultEngine[set.searchEngine].icon}`"
+            :key="set.searchEngine"
+          />
+        </Transition>
       </div>
       <input
         class="input"
@@ -92,25 +94,33 @@ const toSearch = (val, type = 1) => {
   };
   // 是否为空
   if (searchValue) {
+    const searchFormat = encodeURIComponent(searchValue);
     console.log("前往搜索：" + searchValue, type);
-    // 1 默认 / 2 快捷翻译 / 3 电子邮件 / 4 直接访问
     switch (type) {
+      // 默认搜索
       case 1:
         const engine = defaultEngine[set.searchEngine];
-        const value = encodeURIComponent(searchValue);
-        jumpLink(engine.url + value);
+        jumpLink(engine.url + searchFormat);
         break;
+      // 快捷翻译
       case 2:
-        jumpLink(`https://fanyi.baidu.com/#en/zh/${searchValue}`);
+        const hasTranslation = defaultEngine[set.searchEngine]?.translation;
+        jumpLink(
+          hasTranslation
+            ? hasTranslation + searchFormat
+            : `https://fanyi.baidu.com/#en/zh/${searchFormat}`
+        );
         break;
+      // 电子邮件
       case 3:
-        jumpLink(`mailto:${searchValue}`);
+        jumpLink(`mailto:${searchFormat}`);
         break;
+      // 直接访问
       case 4:
         const urlRegex = /^(https?:\/\/)/i;
-        const url = urlRegex.test(searchValue)
-          ? searchValue
-          : `//${searchValue}`;
+        const url = urlRegex.test(searchFormat)
+          ? searchFormat
+          : `//${searchFormat}`;
         jumpLink(url);
         break;
       default:

src/stores/setData.js

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

vite.config.js

@@ -1,10 +1,54 @@
 import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    // PWA
+    VitePWA({
+      registerType: "autoUpdate",
+      workbox: {
+        clientsClaim: true,
+        skipWaiting: true,
+        cleanupOutdatedCaches: true,
+        runtimeCaching: [
+          {
+            urlPattern: /(.*?)\.(woff2|woff|ttf)/,
+            handler: "CacheFirst",
+            options: {
+              cacheName: "file-cache",
+            },
+          },
+          {
+            urlPattern: /(.*?)\.(webp|png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/,
+            handler: "CacheFirst",
+            options: {
+              cacheName: "image-cache",
+            },
+          },
+        ],
+      },
+      manifest: {
+        name: "Snavigation",
+        short_name: "Snavigation",
+        description: "一个极致简约的导航页",
+        display: "standalone",
+        start_url: "/",
+        theme_color: "#fff",
+        background_color: "#efefef",
+        icons: [
+          {
+            src: "/icon/logo-144.png",
+            sizes: "144x144",
+            type: "image/png",
+          },
+        ],
+      },
+    }),
+  ],
   server: {
     host: "0.0.0.0",
     port: 5588,