mirror of
https://github.com/caojiezi2003/Snavigation.git
synced 2024-11-10 06:39:45 +00:00
feat: 新增 notivue
This commit is contained in:
parent
6084f75913
commit
82d822d8a6
@ -16,7 +16,6 @@
|
||||
### 功能
|
||||
|
||||
- [x] 载入动画
|
||||
- [x] 搜索引擎切换
|
||||
- [x] 时间及天气显示
|
||||
- [x] 快捷方式自定义
|
||||
- [x] 网站背景自定义
|
||||
|
@ -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",
|
||||
|
@ -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==}
|
||||
|
||||
|
@ -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";
|
||||
|
@ -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 });
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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");
|
||||
|
@ -8,6 +8,9 @@ const useSetDataStore = defineStore("setData", {
|
||||
backgroundType: 0,
|
||||
// 壁纸遮罩
|
||||
showBackgroundGray: true,
|
||||
// 默认搜索引擎
|
||||
searchEngine: null,
|
||||
lastSearchEngine: null,
|
||||
// 清空搜索框
|
||||
showCleanInput: true,
|
||||
// 搜索框自动 focus
|
||||
|
@ -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
Loading…
Reference in New Issue
Block a user