mirror of
https://github.com/caojiezi2003/Snavigation.git
synced 2024-11-23 10:59:46 +00:00
feat: 支持自定义搜索引擎与壁纸
This commit is contained in:
imsyy
parent
9aaa9bfea6
commit
2806b05b8a
@ -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",
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
:deep(.scrollbar) {
|
||||
max-height: calc(460px - 84px);
|
||||
}
|
||||
:deep(.set-item) {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
border: none;
|
||||
box-shadow: var(--main-box-shadow);
|
||||
--n-color: var(--main-background-light-color);
|
||||
.n-card__content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.desc {
|
||||
.all {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
:deep(.scrollbar) {
|
||||
max-height: calc(460px - 84px);
|
||||
}
|
||||
:deep(.set-item) {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
border: none;
|
||||
box-shadow: var(--main-box-shadow);
|
||||
--n-color: var(--main-background-light-color);
|
||||
.n-card__content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
.desc {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
@media (max-width: 720px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.name {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tip {
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
.name {
|
||||
display: flex;
|
||||
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 {
|
||||
width: 200px;
|
||||
@media (max-width: 768px) {
|
||||
width: 140px;
|
||||
min-width: 140px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&.big {
|
||||
height: 80%;
|
||||
|
||||
@ -1,176 +1,211 @@
|
||||
<template>
|
||||
<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' }"
|
||||
>
|
||||
<div class="desc">
|
||||
<div class="name">
|
||||
<span class="title">壁纸偏好</span>
|
||||
<span class="tip"
|
||||
>除默认以外的其他选项可能会导致页面载入缓慢</span
|
||||
>
|
||||
</div>
|
||||
<n-space>
|
||||
<Transition name="fade" mode="out-in">
|
||||
<n-button
|
||||
v-if="backgroundType !== 0"
|
||||
strong
|
||||
secondary
|
||||
@click="changeBackground(0, true)"
|
||||
>
|
||||
恢复默认
|
||||
<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',
|
||||
}"
|
||||
>
|
||||
<div class="desc">
|
||||
<div class="name">
|
||||
<span class="title">壁纸偏好</span>
|
||||
<span class="tip">
|
||||
除默认以外的其他选项可能会导致页面载入缓慢
|
||||
</span>
|
||||
</div>
|
||||
<n-space>
|
||||
<Transition name="fade" mode="out-in">
|
||||
<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-button strong secondary @click="customCover">
|
||||
自定义
|
||||
</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
<n-grid
|
||||
class="cover-selete"
|
||||
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)"
|
||||
</n-space>
|
||||
</div>
|
||||
<n-grid
|
||||
class="cover-selete"
|
||||
responsive="screen"
|
||||
cols="2 s:3 m:4 l:4"
|
||||
:x-gap="16"
|
||||
:y-gap="16"
|
||||
>
|
||||
<span class="name" v-html="item.name" />
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</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="
|
||||
() => {
|
||||
status.setSiteStatus('focus');
|
||||
status.setEngineChangeStatus(true);
|
||||
}
|
||||
"
|
||||
>
|
||||
前往调整
|
||||
</n-button>
|
||||
</n-card>
|
||||
<n-card class="set-item">
|
||||
<div class="name">
|
||||
<span class="title">搜索建议</span>
|
||||
<span class="tip">是否显示搜索建议</span>
|
||||
</div>
|
||||
<n-switch v-model:value="showSuggestions" :round="false" />
|
||||
</n-card>
|
||||
<n-card class="set-item">
|
||||
<div class="name">
|
||||
<span class="title">跳转方式</span>
|
||||
<span class="tip">全站链接跳转方式</span>
|
||||
</div>
|
||||
<n-select
|
||||
class="set"
|
||||
v-model:value="urlJumpType"
|
||||
:options="urlJumpTypeOptions"
|
||||
<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>
|
||||
</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="
|
||||
() => {
|
||||
status.setSiteStatus('focus');
|
||||
status.setEngineChangeStatus(true);
|
||||
}
|
||||
"
|
||||
>
|
||||
前往调整
|
||||
</n-button>
|
||||
</n-card>
|
||||
<n-card class="set-item">
|
||||
<div class="name">
|
||||
<span class="title">搜索建议</span>
|
||||
<span class="tip">是否显示搜索建议</span>
|
||||
</div>
|
||||
<n-switch v-model:value="showSuggestions" :round="false" />
|
||||
</n-card>
|
||||
<n-card class="set-item">
|
||||
<div class="name">
|
||||
<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-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-form-item>
|
||||
</n-form>
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button strong secondary @click="customCoverModal = false">
|
||||
取消
|
||||
</n-button>
|
||||
</n-card>
|
||||
</n-scrollbar>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
<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">
|
||||
|
||||
@ -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("壁纸加载失败，已临时切换回默认");
|
||||
};
|
||||
|
||||
|
||||
@ -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 = () => {
|
||||
$message.info("即将支持");
|
||||
const setCustomEngine = (e) => {
|
||||
e.preventDefault();
|
||||
customEngineRef.value?.validate((errors) => {
|
||||
if (!errors) {
|
||||
set.setSearchEngine(customEngineValue.value.url, true);
|
||||
customEngineModal.value = false;
|
||||
$message.success("已启用自定义搜索引擎");
|
||||
} else {
|
||||
$message.error("请检查您的输入");
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -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];
|
||||
jumpLink(engine.url + searchFormat);
|
||||
if (set.searchEngine !== "custom") {
|
||||
const engine = defaultEngine[set.searchEngine];
|
||||
jumpLink(engine?.url + searchFormat);
|
||||
} else {
|
||||
jumpLink(set.customEngineUrl + searchFormat);
|
||||
}
|
||||
break;
|
||||
// 快捷翻译
|
||||
case 2:
|
||||
|
||||
@ -189,6 +189,7 @@ const keyboardEvents = (keyCode, event) => {
|
||||
toSearch(mainInput.value, 1);
|
||||
}
|
||||
} catch (error) {
|
||||
$message.error("出现问题，请尝试重置程序");
|
||||
console.error("键盘事件出现错误：" + error);
|
||||
}
|
||||
};
|
||||
|
||||
@ -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;
|
||||
},
|
||||
// 恢复数据
|
||||
|
||||
@ -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 动画
|
||||
|
||||
Loading…
Reference in New Issue
Block a user