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 @@
+
+
-
+
-
+ "
+ >
{{ $t(`navBar.langSwitcher.cellTitle`) }}
-
+
-
+
@@ -41,12 +79,12 @@
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;
};