feat: 支持自定义搜索引擎与壁纸

package.json

@@ -1,7 +1,7 @@
 {
   "name": "snavigation",
   "private": true,
-  "version": "2.0.0 beta 4",
+  "version": "2.0.0 beta 5",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

src/components/AllFunc/AllBox.vue

@@ -4,7 +4,7 @@
       <n-h6 prefix="bar"> 常用 </n-h6>
     </n-tab-pane>
     <n-tab-pane name="note" tab="便签"> 即将完善 </n-tab-pane>
-    <n-tab-pane name="more" tab="更多"> 还能有啥呢 😢 </n-tab-pane>
+    <n-tab-pane name="more" tab="待办"> 还能有啥呢 😢 </n-tab-pane>
   </n-tabs>
 </template>
 

src/components/AllFunc/AllFunc.vue

@@ -28,7 +28,9 @@ const status = statusStore();
   border-radius: 8px;
   transition: opacity 0.3s, transform 0.3s, margin-top 0.3s, height 0.3s;
   z-index: 2;
-
+  .all {
+    overflow: hidden;
+    height: 100%;
     :deep(.scrollbar) {
       max-height: calc(460px - 84px);
     }
@@ -50,6 +52,13 @@ const status = statusStore();
           align-items: center;
           justify-content: space-between;
           width: 100%;
+          @media (max-width: 720px) {
+            flex-direction: column;
+            align-items: flex-start;
+            .name {
+              margin-bottom: 8px;
+            }
+          }
         }
         .name {
           display: flex;
@@ -74,6 +83,7 @@ const status = statusStore();
         margin-bottom: 0;
       }
     }
+  }
   &.big {
     height: 80%;
     margin-top: 0 !important;

src/components/AllFunc/AllSet.vue

@@ -1,18 +1,22 @@
 <template>
+  <div class="all">
     <n-tabs class="set" size="large" justify-content="space-evenly" animated>
       <n-tab-pane name="main" tab="基础设置">
         <n-scrollbar class="scrollbar">
           <n-h6 prefix="bar"> 壁纸 </n-h6>
           <n-card
             class="set-item cover"
-          :content-style="{ flexDirection: 'column', alignItems: 'flex-start' }"
+            :content-style="{
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+            }"
           >
             <div class="desc">
               <div class="name">
                 <span class="title">壁纸偏好</span>
-              <span class="tip"
+                <span class="tip">
-                >除默认以外的其他选项可能会导致页面载入缓慢</span
+                  除默认以外的其他选项可能会导致页面载入缓慢
-              >
+                </span>
               </div>
               <n-space>
                 <Transition name="fade" mode="out-in">
@@ -25,8 +29,11 @@
                     恢复默认
                   </n-button>
                 </Transition>
-              <n-button strong secondary @click="customCover">
+                <n-button strong secondary @click="customCoverModal = true">
-                自定义
+                  <template v-if="backgroundType === 4" #icon>
+                    <SvgIcon iconName="icon-confirm" />
+                  </template>
+                  {{ backgroundType === 4 ? "已开启自定义" : "自定义" }}
                 </n-button>
               </n-space>
             </div>
@@ -166,11 +173,39 @@
         </n-scrollbar>
       </n-tab-pane>
     </n-tabs>
+    <!-- 自定义壁纸 -->
+    <n-modal
+      preset="card"
+      title="自定义壁纸"
+      v-model:show="customCoverModal"
+      :bordered="false"
+    >
+      <n-form>
+        <n-form-item label="自定义壁纸链接">
+          <n-input
+            clearable
+            type="text"
+            v-model:value="customCoverUrl"
+            placeholder="请输入自定义壁纸链接"
+          />
+        </n-form-item>
+      </n-form>
+      <template #footer>
+        <n-space justify="end">
+          <n-button strong secondary @click="customCoverModal = false">
+            取消
+          </n-button>
+          <n-button strong secondary @click="setCustomCover"> 确认 </n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
 </template>
 
 <script setup>
-import { h, ref } from "vue";
+import { ref, onMounted } from "vue";
 import {
+  NH6,
   NTabs,
   NTabPane,
   NSpace,
@@ -181,15 +216,20 @@ import {
   NButton,
   NGrid,
   NGridItem,
-  NH6,
+  NModal,
+  NForm,
+  NFormItem,
+  NInput,
 } from "naive-ui";
 import { storeToRefs } from "pinia";
 import { setStore, statusStore } from "@/stores";
+import identifyInput from "@/utils/identifyInput";
 
 const set = setStore();
 const status = statusStore();
 const {
   backgroundType,
+  backgroundCustom,
   showBackgroundGray,
   autoFocus,
   autoInputBlur,
@@ -199,6 +239,8 @@ const {
   urlJumpType,
 } = storeToRefs(set);
 const recoverRef = ref(null);
+const customCoverModal = ref(false);
+const customCoverUrl = ref("");
 
 // 壁纸类别
 const backgroundTypeArr = [
@@ -227,16 +269,6 @@ const changeBackground = (type, reset = false) => {
   $message.success(`已切换为${backgroundTypeArr[type].name}，刷新后生效`);
 };
 
-// 自定义壁纸
-const customCover = () => {
-  $dialog.warning({
-    title: "警告",
-    content: "你确定？",
-    positiveText: "确定",
-    negativeText: "不确定",
-  });
-};
-
 // 链接跳转方式
 const urlJumpTypeOptions = [
   {
@@ -249,6 +281,18 @@ const urlJumpTypeOptions = [
   },
 ];
 
+// 自定义壁纸
+const setCustomCover = () => {
+  if (identifyInput(customCoverUrl.value) === "url") {
+    backgroundType.value = 4;
+    backgroundCustom.value = customCoverUrl.value;
+    customCoverModal.value = false;
+    $message.error("已切换为自定义壁纸，刷新后生效");
+  } else {
+    $message.error("请输入正确的网址");
+  }
+};
+
 // 站点重置
 const resetSite = () => {
   $dialog.warning({
@@ -328,6 +372,11 @@ const recoverSite = async () => {
     $message.error("站点数据恢复失败，请重试");
   }
 };
+
+onMounted(() => {
+  // 检测是否存在自定义壁纸
+  if (backgroundCustom.value) customCoverUrl.value = backgroundCustom.value;
+});
 </script>
 
 <style lang="scss">

src/components/Cover.vue

@@ -46,7 +46,11 @@ const setBgUrl = () => {
     case 3:
       bgUrl.value = "https://api.aixiaowai.cn/api/api.php";
       break;
+    case 4:
+      bgUrl.value = set.backgroundCustom;
+      break;
     default:
+      bgUrl.value = `/background/bg${bgRandom}.jpg`;
       break;
   }
 };
@@ -68,7 +72,7 @@ const imgAnimationEnd = () => {
 // 图片显示失败
 const imgLoadError = () => {
   bgUrl.value = `/background/bg${bgRandom}.jpg`;
-  console.error("图片加载失败：", bgUrl.value);
+  console.error("壁纸加载失败：", bgUrl.value);
   $message.error("壁纸加载失败，已临时切换回默认");
 };
 

src/components/SearchInput/SearchEngine.vue

@@ -18,24 +18,98 @@
             <SvgIcon :iconName="`icon-${key}`" />
             <span class="name">{{ item.name }}</span>
           </n-grid-item>
-          <n-grid-item class="engine" @click="customEngine">
+          <n-grid-item
+            :class="['engine', set.searchEngine === 'custom' ? 'choose' : null]"
+            @click="customEngineClick"
+          >
             <SvgIcon iconName="icon-custom" />
             <span class="name">自定义</span>
           </n-grid-item>
+          <n-grid-item class="engine" @click="customEngineModal = true">
+            <SvgIcon iconName="icon-custom" />
+            <span class="name">自定义配置</span>
+          </n-grid-item>
         </n-grid>
       </n-scrollbar>
+      <!-- 自定义搜索引擎 -->
+      <n-modal
+        preset="card"
+        title="自定义搜索引擎"
+        v-model:show="customEngineModal"
+        :bordered="false"
+      >
+        <n-form
+          ref="customEngineRef"
+          :rules="customEngineRules"
+          :label-width="80"
+          :model="customEngineValue"
+        >
+          <n-form-item label="自定义搜索引擎地址" path="url">
+            <n-input
+              clearable
+              type="text"
+              v-model:value="customEngineValue.url"
+              placeholder="请输入自定义搜索引擎地址"
+            />
+          </n-form-item>
+        </n-form>
+        <template #footer>
+          <n-space justify="end">
+            <n-button strong secondary @click="customEngineModal = false">
+              取消
+            </n-button>
+            <n-button strong secondary @click="setCustomEngine">
+              确认
+            </n-button>
+          </n-space>
+        </template>
+      </n-modal>
     </div>
   </Transition>
 </template>
 
 <script setup>
-import { NScrollbar, NGrid, NGridItem } from "naive-ui";
+import { ref } from "vue";
+import {
+  NSpace,
+  NButton,
+  NScrollbar,
+  NGrid,
+  NGridItem,
+  NModal,
+  NForm,
+  NFormItem,
+  NInput,
+} from "naive-ui";
 import { statusStore, setStore } from "@/stores";
 import defaultEngine from "@/assets/defaultEngine.json";
 
 const set = setStore();
 const status = statusStore();
 
+// 自定义搜索引擎数据
+const customEngineRef = ref(null);
+const customEngineModal = ref(false);
+const customEngineValue = ref({
+  url: set.customEngineUrl,
+});
+const customEngineRules = {
+  url: {
+    required: true,
+    validator(rule, value) {
+      if (!value) {
+        return new Error("请输入自定义搜索引擎地址");
+      } else if (
+        !/^https:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,}(\/\S*)?$/.test(value)
+      ) {
+        return new Error("请检查是否为网址且是否为 https:// 开头");
+      }
+      return true;
+    },
+    trigger: ["input", "blur"],
+  },
+};
+
 // 更换搜索引擎
 const changeSearchEngine = (key) => {
   // 获取元素
@@ -46,9 +120,28 @@ const changeSearchEngine = (key) => {
   mainInput?.focus();
 };
 
+// 点击自定义搜索引擎
+const customEngineClick = () => {
+  if (set.customEngineUrl) {
+    changeSearchEngine("custom");
+  } else {
+    $message.info("无自定义数据，请配置");
+    customEngineModal.value = true;
+  }
+};
+
 // 自定义搜索引擎
-const customEngine = () => {
+const setCustomEngine = (e) => {
-  $message.info("即将支持");
+  e.preventDefault();
+  customEngineRef.value?.validate((errors) => {
+    if (!errors) {
+      set.setSearchEngine(customEngineValue.value.url, true);
+      customEngineModal.value = false;
+      $message.success("已启用自定义搜索引擎");
+    } else {
+      $message.error("请检查您的输入");
+    }
+  });
 };
 </script>
 

src/components/SearchInput/SearchInp.vue

@@ -23,7 +23,11 @@
       <div class="engine" title="切换搜索引擎" @click="changeEngine">
         <Transition name="fade" mode="out-in">
           <SvgIcon
-            :iconName="`icon-${defaultEngine[set.searchEngine].icon}`"
+            :iconName="`icon-${
+              set.searchEngine !== 'custom'
+                ? defaultEngine[set.searchEngine]?.icon
+                : 'custom'
+            }`"
             :key="set.searchEngine"
           />
         </Transition>
@@ -108,8 +112,12 @@ const toSearch = (val, type = 1) => {
     switch (type) {
       // 默认搜索
       case 1:
+        if (set.searchEngine !== "custom") {
           const engine = defaultEngine[set.searchEngine];
-        jumpLink(engine.url + searchFormat);
+          jumpLink(engine?.url + searchFormat);
+        } else {
+          jumpLink(set.customEngineUrl + searchFormat);
+        }
         break;
       // 快捷翻译
       case 2:

src/components/SearchInput/Suggestions.vue

@@ -189,6 +189,7 @@ const keyboardEvents = (keyCode, event) => {
       toSearch(mainInput.value, 1);
     }
   } catch (error) {
+    $message.error("出现问题，请尝试重置程序");
     console.error("键盘事件出现错误：" + error);
   }
 };

src/stores/setData.js

@@ -12,7 +12,7 @@ const useSetDataStore = defineStore("setData", {
       // 搜索引擎
       searchEngine: "bing",
       lastSearchEngine: "bing",
-      customEngine: {},
+      customEngineUrl: "",
       // 清空搜索框
       showCleanInput: true,
       // 搜索框自动 focus
@@ -33,10 +33,17 @@ const useSetDataStore = defineStore("setData", {
     };
   },
   actions: {
-    setSearchEngine(value) {
+    setSearchEngine(value, custom = false) {
       // 储存上次
+      if (this.searchEngine !== "custom") {
         this.lastSearchEngine = this.searchEngine;
+      }
       // 设置新引擎
+      if (custom) {
+        this.customEngineUrl = value;
+        this.searchEngine = "custom";
+        return;
+      }
       this.searchEngine = value;
     },
     // 恢复数据

src/style/global.scss

@@ -97,6 +97,7 @@ body {
   // n-dialog
   .n-dialog {
     border-radius: 8px;
+    box-shadow: none;
     --n-icon-color: var(--main-text-color);
     --n-color: var(--main-background-light-color);
     .n-dialog__title {
@@ -127,6 +128,14 @@ body {
       --n-color-hover: var(--main-background-hover-color);
     }
   }
+  .n-modal {
+    width: 60vw;
+    max-width: 700px;
+    min-width: min(24rem, 100vw);
+    border-radius: 8px;
+    box-shadow: none;
+    --n-color-modal: var(--main-background-light-color);
+  }
 }
 
 // Transition 动画