feat: 新增 notivue

This commit is contained in:
imsyy 2023-07-30 18:39:43 +08:00
parent 6084f75913
commit 82d822d8a6
10 changed files with 53 additions and 5 deletions

View File

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

View File

@ -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",

View File

@ -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==}

View File

@ -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";

View File

@ -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 });
}
};

View File

@ -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 {

View File

@ -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");

View File

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

View File

@ -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% {

File diff suppressed because one or more lines are too long