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,51 +28,61 @@ const status = statusStore();
   border-radius: 8px;
   transition: opacity 0.3s, transform 0.3s, margin-top 0.3s, height 0.3s;
   z-index: 2;
-
+  .all {
-  :deep(.scrollbar) {
+    overflow: hidden;
-    max-height: calc(460px - 84px);
+    height: 100%;
-  }
+    :deep(.scrollbar) {
-  :deep(.set-item) {
+      max-height: calc(460px - 84px);
-    width: 100%;
+    }
-    border-radius: 8px;
+    :deep(.set-item) {
-    margin-bottom: 12px;
+      width: 100%;
-    border: none;
+      border-radius: 8px;
-    box-shadow: var(--main-box-shadow);
+      margin-bottom: 12px;
-    --n-color: var(--main-background-light-color);
+      border: none;
-    .n-card__content {
+      box-shadow: var(--main-box-shadow);
-      display: flex;
+      --n-color: var(--main-background-light-color);
-      flex-direction: row;
+      .n-card__content {
-      align-items: center;
-      justify-content: space-between;
-      .desc {
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
-        width: 100%;
+        .desc {
-      }
+          display: flex;
-      .name {
+          flex-direction: row;
-        display: flex;
+          align-items: center;
-        flex-direction: column;
+          justify-content: space-between;
-        .title {
+          width: 100%;
-          font-size: 16px;
+          @media (max-width: 720px) {
+            flex-direction: column;
+            align-items: flex-start;
+            .name {
+              margin-bottom: 8px;
+            }
+          }
         }
-        .tip {
+        .name {
-          font-size: 13px;
+          display: flex;
-          opacity: 0.8;
+          flex-direction: column;
+          .title {
+            font-size: 16px;
+          }
+          .tip {
+            font-size: 13px;
+            opacity: 0.8;
+          }
+        }
+        .set {
+          width: 200px;
+          @media (max-width: 768px) {
+            width: 140px;
+            min-width: 140px;
+          }
         }
       }
-      .set {
+      &:last-child {
-        width: 200px;
+        margin-bottom: 0;
-        @media (max-width: 768px) {
-          width: 140px;
-          min-width: 140px;
-        }
       }
     }
-    &:last-child {
-      margin-bottom: 0;
-    }
   }
   &.big {
     height: 80%;

src/components/AllFunc/AllSet.vue

@@ -1,176 +1,211 @@
 <template>
-  <n-tabs class="set" size="large" justify-content="space-evenly" animated>
+  <div class="all">
-    <n-tab-pane name="main" tab="基础设置">
+    <n-tabs class="set" size="large" justify-content="space-evenly" animated>
-      <n-scrollbar class="scrollbar">
+      <n-tab-pane name="main" tab="基础设置">
-        <n-h6 prefix="bar"> 壁纸 </n-h6>
+        <n-scrollbar class="scrollbar">
-        <n-card
+          <n-h6 prefix="bar"> 壁纸 </n-h6>
-          class="set-item cover"
+          <n-card
-          :content-style="{ flexDirection: 'column', alignItems: 'flex-start' }"
+            class="set-item cover"
-        >
+            :content-style="{
-          <div class="desc">
+              flexDirection: 'column',
-            <div class="name">
+              alignItems: 'flex-start',
-              <span class="title">壁纸偏好</span>
+            }"
-              <span class="tip"
+          >
-                >除默认以外的其他选项可能会导致页面载入缓慢</span
+            <div class="desc">
-              >
+              <div class="name">
-            </div>
+                <span class="title">壁纸偏好</span>
-            <n-space>
+                <span class="tip">
-              <Transition name="fade" mode="out-in">
+                  除默认以外的其他选项可能会导致页面载入缓慢
-                <n-button
+                </span>
-                  v-if="backgroundType !== 0"
+              </div>
-                  strong
+              <n-space>
-                  secondary
+                <Transition name="fade" mode="out-in">
-                  @click="changeBackground(0, true)"
+                  <n-button
-                >
+                    v-if="backgroundType !== 0"
-                  恢复默认
+                    strong
+                    secondary
+                    @click="changeBackground(0, true)"
+                  >
+                    恢复默认
+                  </n-button>
+                </Transition>
+                <n-button strong secondary @click="customCoverModal = true">
+                  <template v-if="backgroundType === 4" #icon>
+                    <SvgIcon iconName="icon-confirm" />
+                  </template>
+                  {{ backgroundType === 4 ? "已开启自定义" : "自定义" }}
                 </n-button>
-              </Transition>
+              </n-space>
-              <n-button strong secondary @click="customCover">
+            </div>
-                自定义
+            <n-grid
-              </n-button>
+              class="cover-selete"
-            </n-space>
+              responsive="screen"
-          </div>
+              cols="2 s:3 m:4 l:4"
-          <n-grid
+              :x-gap="16"
-            class="cover-selete"
+              :y-gap="16"
-            responsive="screen"
-            cols="2 s:3 m:4 l:4"
-            :x-gap="16"
-            :y-gap="16"
-          >
-            <n-grid-item
-              v-for="(item, index) in backgroundTypeArr"
-              :key="index"
-              :class="index === backgroundType ? 'item check' : 'item'"
-              @click="changeBackground(index)"
             >
-              <span class="name" v-html="item.name" />
+              <n-grid-item
-            </n-grid-item>
+                v-for="(item, index) in backgroundTypeArr"
-          </n-grid>
+                :key="index"
-        </n-card>
+                :class="index === backgroundType ? 'item check' : 'item'"
-        <n-h6 prefix="bar"> 搜索 </n-h6>
+                @click="changeBackground(index)"
-        <n-card class="set-item">
+              >
-          <div class="name">
+                <span class="name" v-html="item.name" />
-            <span class="title">搜索引擎</span>
+              </n-grid-item>
-            <span class="tip">切换或自定义搜索引擎</span>
+            </n-grid>
-          </div>
+          </n-card>
-          <n-button
+          <n-h6 prefix="bar"> 搜索 </n-h6>
-            strong
+          <n-card class="set-item">
-            secondary
+            <div class="name">
-            @click="
+              <span class="title">搜索引擎</span>
-              () => {
+              <span class="tip">切换或自定义搜索引擎</span>
-                status.setSiteStatus('focus');
+            </div>
-                status.setEngineChangeStatus(true);
+            <n-button
-              }
+              strong
-            "
+              secondary
-          >
+              @click="
-            前往调整
+                () => {
-          </n-button>
+                  status.setSiteStatus('focus');
-        </n-card>
+                  status.setEngineChangeStatus(true);
-        <n-card class="set-item">
+                }
-          <div class="name">
+              "
-            <span class="title">搜索建议</span>
+            >
-            <span class="tip">是否显示搜索建议</span>
+              前往调整
-          </div>
+            </n-button>
-          <n-switch v-model:value="showSuggestions" :round="false" />
+          </n-card>
-        </n-card>
+          <n-card class="set-item">
-        <n-card class="set-item">
+            <div class="name">
-          <div class="name">
+              <span class="title">搜索建议</span>
-            <span class="title">跳转方式</span>
+              <span class="tip">是否显示搜索建议</span>
-            <span class="tip">全站链接跳转方式</span>
+            </div>
-          </div>
+            <n-switch v-model:value="showSuggestions" :round="false" />
-          <n-select
+          </n-card>
-            class="set"
+          <n-card class="set-item">
-            v-model:value="urlJumpType"
+            <div class="name">
-            :options="urlJumpTypeOptions"
+              <span class="title">跳转方式</span>
+              <span class="tip">全站链接跳转方式</span>
+            </div>
+            <n-select
+              class="set"
+              v-model:value="urlJumpType"
+              :options="urlJumpTypeOptions"
+            />
+          </n-card>
+        </n-scrollbar>
+      </n-tab-pane>
+      <n-tab-pane name="personalization" tab="个性调整">
+        <n-scrollbar class="scrollbar">
+          <n-h6 prefix="bar"> 壁纸 </n-h6>
+          <n-card class="set-item">
+            <div class="name">
+              <span class="title">壁纸遮罩</span>
+              <span class="tip">壁纸周围是否显示暗色遮罩</span>
+            </div>
+            <n-switch v-model:value="showBackgroundGray" :round="false" />
+          </n-card>
+          <n-h6 prefix="bar"> 天气与时间 </n-h6>
+          <n-card class="set-item">
+            <div class="name">
+              <span class="title">时间显秒</span>
+              <span class="tip">是否在分钟后面显示秒数</span>
+            </div>
+            <n-switch v-model:value="showSeconds" :round="false" />
+          </n-card>
+          <n-card class="set-item">
+            <div class="name">
+              <span class="title">时钟显零</span>
+              <span class="tip">是否在时钟小于 10 时补 0</span>
+            </div>
+            <n-switch v-model:value="showZeroTime" :round="false" />
+          </n-card>
+          <n-h6 prefix="bar"> 搜索框 </n-h6>
+          <n-card class="set-item">
+            <div class="name">
+              <span class="title">自动聚焦</span>
+              <span class="tip">打开网站时自动聚焦搜索框</span>
+            </div>
+            <n-switch v-model:value="autoFocus" :round="false" />
+          </n-card>
+          <n-card class="set-item">
+            <div class="name">
+              <span class="title">自动失焦</span>
+              <span class="tip">跳转搜索后搜索框自动失焦</span>
+            </div>
+            <n-switch v-model:value="autoInputBlur" :round="false" />
+          </n-card>
+        </n-scrollbar>
+      </n-tab-pane>
+      <n-tab-pane name="other" tab="其他设置">
+        <n-scrollbar class="scrollbar">
+          <n-h6 prefix="bar"> 重置 </n-h6>
+          <n-card class="set-item">
+            <div class="name">
+              <span class="title">站点重置</span>
+              <span class="tip">若站点显示异常或出现问题时可尝试此操作</span>
+            </div>
+            <n-button strong secondary @click="resetSite"> 重置 </n-button>
+          </n-card>
+          <n-h6 prefix="bar"> 备份 </n-h6>
+          <n-card class="set-item">
+            <div class="name">
+              <span class="title">站点备份</span>
+              <span class="tip">将站点配置及个性化内容进行备份</span>
+            </div>
+            <n-button strong secondary @click="backupSite"> 备份 </n-button>
+          </n-card>
+          <n-h6 prefix="bar"> 恢复 </n-h6>
+          <n-card class="set-item">
+            <div class="name">
+              <span class="title">数据恢复</span>
+              <span class="tip">将备份的站点内容进行恢复</span>
+            </div>
+            <input
+              ref="recoverRef"
+              type="file"
+              style="display: none"
+              accept=".json"
+              @change="recoverSite"
+            />
+            <n-button strong secondary @click="recoverRef?.click()">
+              恢复
+            </n-button>
+          </n-card>
+        </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-card>
+        </n-form-item>
-      </n-scrollbar>
+      </n-form>
-    </n-tab-pane>
+      <template #footer>
-    <n-tab-pane name="personalization" tab="个性调整">
+        <n-space justify="end">
-      <n-scrollbar class="scrollbar">
+          <n-button strong secondary @click="customCoverModal = false">
-        <n-h6 prefix="bar"> 壁纸 </n-h6>
+            取消
-        <n-card class="set-item">
-          <div class="name">
-            <span class="title">壁纸遮罩</span>
-            <span class="tip">壁纸周围是否显示暗色遮罩</span>
-          </div>
-          <n-switch v-model:value="showBackgroundGray" :round="false" />
-        </n-card>
-        <n-h6 prefix="bar"> 天气与时间 </n-h6>
-        <n-card class="set-item">
-          <div class="name">
-            <span class="title">时间显秒</span>
-            <span class="tip">是否在分钟后面显示秒数</span>
-          </div>
-          <n-switch v-model:value="showSeconds" :round="false" />
-        </n-card>
-        <n-card class="set-item">
-          <div class="name">
-            <span class="title">时钟显零</span>
-            <span class="tip">是否在时钟小于 10 时补 0</span>
-          </div>
-          <n-switch v-model:value="showZeroTime" :round="false" />
-        </n-card>
-        <n-h6 prefix="bar"> 搜索框 </n-h6>
-        <n-card class="set-item">
-          <div class="name">
-            <span class="title">自动聚焦</span>
-            <span class="tip">打开网站时自动聚焦搜索框</span>
-          </div>
-          <n-switch v-model:value="autoFocus" :round="false" />
-        </n-card>
-        <n-card class="set-item">
-          <div class="name">
-            <span class="title">自动失焦</span>
-            <span class="tip">跳转搜索后搜索框自动失焦</span>
-          </div>
-          <n-switch v-model:value="autoInputBlur" :round="false" />
-        </n-card>
-      </n-scrollbar>
-    </n-tab-pane>
-    <n-tab-pane name="other" tab="其他设置">
-      <n-scrollbar class="scrollbar">
-        <n-h6 prefix="bar"> 重置 </n-h6>
-        <n-card class="set-item">
-          <div class="name">
-            <span class="title">站点重置</span>
-            <span class="tip">若站点显示异常或出现问题时可尝试此操作</span>
-          </div>
-          <n-button strong secondary @click="resetSite"> 重置 </n-button>
-        </n-card>
-        <n-h6 prefix="bar"> 备份 </n-h6>
-        <n-card class="set-item">
-          <div class="name">
-            <span class="title">站点备份</span>
-            <span class="tip">将站点配置及个性化内容进行备份</span>
-          </div>
-          <n-button strong secondary @click="backupSite"> 备份 </n-button>
-        </n-card>
-        <n-h6 prefix="bar"> 恢复 </n-h6>
-        <n-card class="set-item">
-          <div class="name">
-            <span class="title">数据恢复</span>
-            <span class="tip">将备份的站点内容进行恢复</span>
-          </div>
-          <input
-            ref="recoverRef"
-            type="file"
-            style="display: none"
-            accept=".json"
-            @change="recoverSite"
-          />
-          <n-button strong secondary @click="recoverRef?.click()">
-            恢复
           </n-button>
-        </n-card>
+          <n-button strong secondary @click="setCustomCover"> 确认 </n-button>
-      </n-scrollbar>
+        </n-space>
-    </n-tab-pane>
+      </template>
-  </n-tabs>
+    </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:
-        const engine = defaultEngine[set.searchEngine];
+        if (set.searchEngine !== "custom") {
-        jumpLink(engine.url + searchFormat);
+          const engine = defaultEngine[set.searchEngine];
+          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) {
       // 储存上次
-      this.lastSearchEngine = this.searchEngine;
+      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 动画