From 32de8d1c623f2fd8ce3c9ffaff25e3519a815e60 Mon Sep 17 00:00:00 2001 From: K <704496037@qq.com> Date: Mon, 29 Jan 2024 05:13:50 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20iOS=20PWA=20=E4=B8=8B?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=A0=8F=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 8 +- package.json | 2 +- public/manifest.json | 2 - src/App.vue | 121 ++++++++++++----------- src/changelogs/2024-01-29.md | 9 ++ src/components/NavBar.vue | 143 +++++++++++++++++++--------- src/store/appNotify.ts | 40 +++++--- src/types/store/appNotifyStore.d.ts | 2 + 8 files changed, 204 insertions(+), 123 deletions(-) create mode 100644 src/changelogs/2024-01-29.md diff --git a/index.html b/index.html index 3f3b49ece..c684f916d 100644 --- a/index.html +++ b/index.html @@ -3,18 +3,21 @@ + + - + Sub Store - + diff --git a/src/changelogs/2024-01-29.md b/src/changelogs/2024-01-29.md new file mode 100644 index 000000000..37a534e13 --- /dev/null +++ b/src/changelogs/2024-01-29.md @@ -0,0 +1,9 @@ +--- +date: 2024-01-29 +--- + +### UI + +- 优化 iOS PWA 下状态栏样式 + +- 适配桌面端左右滑动 diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index 27b8639d1..096a7a6c0 100644 --- a/src/components/NavBar.vue +++ b/src/components/NavBar.vue @@ -1,39 +1,77 @@ diff --git a/src/store/appNotify.ts b/src/store/appNotify.ts index 9cf8c2f37..615a63f31 100644 --- a/src/store/appNotify.ts +++ b/src/store/appNotify.ts @@ -1,15 +1,23 @@ -import { defineStore } from 'pinia'; +import { defineStore } from "pinia"; import { toast } from "vue3-toastify"; import "vue3-toastify/dist/index.css"; -export const useAppNotifyStore = defineStore('appNotify', { +const isPWA = () => { + return ( + (window.matchMedia("(display-mode: standalone)").matches && + !/Android/.test(navigator.userAgent)) || + false + ); +}; +export const useAppNotifyStore = defineStore("appNotify", { state: (): AppNotifyStoreState => { return { isVisible: false, - title: '', - content: '', - type: 'primary', + title: "", + content: "", + type: "primary", duration: 800, + navBartop: isPWA() ? 60 : 0, }; }, getters: {}, @@ -25,25 +33,31 @@ export const useAppNotifyStore = defineStore('appNotify', { // this.setVisible(false); // }, this.duration); // 防止重复通知 持续时间过长 let html = `${title}`; - if (content != null && content !== '') { + if (content != null && content !== "") { html += `
${content}`; } // primary，success ，danger，warning // info, success, warning, error, default - const types = {primary: 'INFO', success: 'SUCCESS', danger: 'ERROR', warning: 'WARNING'}; + const types = { + primary: "INFO", + success: "SUCCESS", + danger: "ERROR", + warning: "WARNING", + }; toast(html, { - theme: 'colored', - type: toast.TYPE[types[type] || 'DEFAULT'], - position: 'top-center', - transition: 'slide', + theme: "colored", + type: toast.TYPE[types[type] || "DEFAULT"], + position: "top-center", + transition: "slide", dangerouslyHTMLString: true, closeButton: true, pauseOnHover: true, pauseOnFocusLoss: true, closeOnClick: false, autoClose: duration || 2500, - style: { zIndex: 65535 } - }) + style: { zIndex: 65535, paddingTop: this.navBartop + "px" }, + // PWA 时添加通知顶部边距 + }); }, setVisible(isVisible: boolean) { this.isVisible = isVisible; diff --git a/src/types/store/appNotifyStore.d.ts b/src/types/store/appNotifyStore.d.ts index 2fc42697b..5aad16078 100644 --- a/src/types/store/appNotifyStore.d.ts +++ b/src/types/store/appNotifyStore.d.ts @@ -4,6 +4,7 @@ interface AppNotifyStoreState { content?: string; type?: 'primary' | 'success' | 'danger' | 'warning'; duration?: number; + navBartop?: number; } type NotifySettings = { @@ -11,4 +12,5 @@ type NotifySettings = { content?: string; type?: 'primary' | 'success' | 'danger' | 'warning'; duration?: number; + navBartop?: number; };