Skip to content

Commit 3b86c4a

Browse files
hsingyinhsingyin
committed
fix: 修复PWA下标签栏样式问题（订阅管理、文件管理）
1 parent bea8d1a commit 3b86c4a

File tree

6 files changed

+82
-69
lines changed

6 files changed

+82
-69
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sub-store-front-end",
3-
"version": "2.15.74",
3+
"version": "2.15.75",
44
"private": true,
55
"scripts": {
66
"dev": "vite --host",

‎src/components/NavBar.vue‎

Lines changed: 7 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ import { computed, ref, watchEffect, onMounted } from "vue";
9696
import { useI18n } from "vue-i18n";
9797
import { useRoute, useRouter } from "vue-router";
9898
import { useGlobalStore } from "@/store/global";
99+
import { useSystemStore } from "@/store/system";
99100
import { useSettingsStore } from '@/store/settings';
100101
import { storeToRefs } from "pinia";
101102
import { Toast } from "@nutui/nutui";
@@ -111,49 +112,21 @@ const router = useRouter();
111112
const route = useRoute();
112113
const methodStore = useMethodStore()
113114
const globalStore = useGlobalStore();
115+
const systemStore = useSystemStore();
114116
const showLangSwitchPopup = ref(false);
115117
const langList = ["zh", "en"];
116118
const settingsStore = useSettingsStore();
117119
const { changeAppearanceSetting } = settingsStore;
118120
const { appearanceSetting } = storeToRefs(settingsStore);
119-
// const { isSimpleMode, showFloatingRefreshButton } = storeToRefs(globalStore);
120-
const isLandscape = ref(false);
121-
const isSmall = ref(false);
122-
const screenWidth = ref(window.innerWidth);
123-
const screenHeight = ref(window.innerHeight);
124-
125-
const handleResize = () => {
126-
screenWidth.value = window.innerWidth;
127-
screenHeight.value = window.innerHeight;
128-
};
121+
// 从systemStore获取状态
122+
const { isPWA, isLandscape, isSmall } = storeToRefs(systemStore);
129123
130124
onMounted(() => {
131-
window.addEventListener("resize", handleResize);
132-
});
133-
const isPWA = ref(
134-
(window.matchMedia("(display-mode: standalone)").matches &&
135-
!/Android/.test(navigator.userAgent)) ||
136-
false
137-
);
138-
139-
// isPWA.value = true;
140-
// isSmall.value = true;
141-
142-
const navBarHeight = computed(() => {
143-
return isPWA.value && !isLandscape.value ? (isSmall.value ? "78px" : "95px") : "56px";
125+
systemStore.initSystemState();
144126
});
145127
146-
const navBartop = computed(() => {
147-
return isPWA.value && !isLandscape.value ? (isSmall.value ? "38px" : "55px") : "0px";
148-
});
149-
150-
const navBartopRight = computed(() => {
151-
return isPWA.value && !isLandscape.value ? (isSmall.value ? "52px" : "65px") : "15px";
152-
});
153-
154-
const Pwa_top = computed(() => {
155-
return isPWA.value ? (isSmall.value ? "20px" : "45px") : "45px";
156-
});
128+
// 使用systemStore中的计算属性
129+
const { navBarHeight, navBartop, navBartopRight, pwaTopPadding: Pwa_top } = storeToRefs(systemStore);
157130
158131
const isNeedBack = computed(() => {
159132
return route.meta.needNavBack ?? false;
@@ -245,11 +218,6 @@ const refresh = async () => {
245218
}, 1000);
246219
}
247220
};
248-
watchEffect(() => {
249-
handleResize();
250-
isSmall.value = screenHeight.value < 750 || /iPad/.test(navigator.userAgent);
251-
isLandscape.value = screenWidth.value > screenHeight.value;
252-
});
253221
</script>
254222

255223
<style lang="scss">

‎src/store/system.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { defineStore } from 'pinia';
2+
3+
export const useSystemStore = defineStore('systemStore', {
4+
state: () => {
5+
return {
6+
isPWA: (window.matchMedia("(display-mode: standalone)").matches &&
7+
!/Android/.test(navigator.userAgent)) || false,
8+
isLandscape: window.innerWidth > window.innerHeight,
9+
isSmall: window.innerHeight < 750 || /iPad/.test(navigator.userAgent),
10+
screenWidth: window.innerWidth,
11+
screenHeight: window.innerHeight,
12+
statusBarHeight: 0
13+
};
14+
},
15+
getters: {
16+
navBarHeight: (state) => {
17+
return state.isPWA && !state.isLandscape ? (state.isSmall ? "78px" : "95px") : "56px";
18+
},
19+
navBartop: (state) => {
20+
return state.isPWA && !state.isLandscape ? (state.isSmall ? "38px" : "55px") : "0px";
21+
},
22+
navBartopRight: (state) => {
23+
return state.isPWA && !state.isLandscape ? (state.isSmall ? "52px" : "65px") : "15px";
24+
},
25+
pwaTopPadding: (state) => {
26+
return state.isPWA ? (state.isSmall ? "20px" : "45px") : "45px";
27+
}
28+
},
29+
actions: {
30+
handleResize() {
31+
this.screenWidth = window.innerWidth;
32+
this.screenHeight = window.innerHeight;
33+
this.isSmall = this.screenHeight < 750 || /iPad/.test(navigator.userAgent);
34+
this.isLandscape = this.screenWidth > this.screenHeight;
35+
// console.log(`isPWA: ${this.isPWA}, Screen resized: ${this.screenWidth}x${this.screenHeight}, isSmall: ${this.isSmall}, isLandscape: ${this.isLandscape}`);
36+
},
37+
setStatusBarHeight(height: number) {
38+
this.statusBarHeight = height;
39+
},
40+
setIsPWA(isPWA: boolean) {
41+
this.isPWA = isPWA;
42+
},
43+
initSystemState() {
44+
this.isPWA = (window.matchMedia("(display-mode: standalone)").matches &&
45+
!/Android/.test(navigator.userAgent)) || false;
46+
this.handleResize();
47+
48+
// 监听屏幕尺寸变化
49+
window.addEventListener("resize", () => this.handleResize());
50+
}
51+
},
52+
});

‎src/types/store/systemStore.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
declare interface SystemStoreState {
2+
isPWA: boolean;
3+
isLandscape: boolean;
4+
isSmall: boolean;
5+
screenWidth: number;
6+
screenHeight: number;
7+
statusBarHeight: number;
8+
}

‎src/views/File.vue‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,7 @@ import FileListItem from "@/components/FileListItem.vue";
215215
import { useGlobalStore } from "@/store/global";
216216
import { useSubsStore } from "@/store/subs";
217217
import { useSettingsStore } from '@/store/settings';
218+
import { useSystemStore } from "@/store/system";
218219
import { useMethodStore } from '@/store/methodStore';
219220
import { initStores } from "@/utils/initApp";
220221
import { useI18n } from "vue-i18n";
@@ -253,9 +254,10 @@ const restoreIsLoading = ref(false);
253254
const addSubBtnIsVisible = ref(false);
254255
const subsStore = useSubsStore();
255256
const globalStore = useGlobalStore();
257+
const systemStore = useSystemStore();
256258
const settingsStore = useSettingsStore();
257259
const { appearanceSetting } = storeToRefs(settingsStore);
258-
260+
const { navBarHeight } = storeToRefs(systemStore);
259261
const { hasFiles, files } = storeToRefs(subsStore);
260262
const {
261263
// isSimpleMode,
@@ -312,13 +314,9 @@ const updateRadioWrapperHeight = () => {
312314
}
313315
});
314316
};
315-
const isPWA = ref(
316-
(window.matchMedia("(display-mode: standalone)").matches &&
317-
!/Android/.test(navigator.userAgent)) ||
318-
false
319-
);
320-
const navBarHeight = computed(() => {
321-
return isPWA.value ? `${44 + 32 + bottomSafeArea.value}px` : `${44 + 12 + bottomSafeArea.value}px`;
317+
318+
const tagNavBarHeight = computed(() => {
319+
return navBarHeight.value;
322320
});
323321
324322
watch(tag, () => {
@@ -694,7 +692,7 @@ const shouldShowElement = (element) => {
694692
flex-wrap: wrap;
695693
position: fixed;
696694
padding: 10px;
697-
top: v-bind(navBarHeight);
695+
top: v-bind(tagNavBarHeight);
698696
z-index: 10;
699697
backdrop-filter: blur(var(--nav-bar-blur));
700698
-webkit-backdrop-filter: blur(var(--nav-bar-blur));

‎src/views/Sub.vue‎

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -262,22 +262,12 @@ import SubListItem from "@/components/SubListItem.vue";
262262
import { useBackend } from "@/hooks/useBackend";
263263
import { useAppNotifyStore } from "@/store/appNotify";
264264
import { useGlobalStore } from "@/store/global";
265+
import { useSystemStore } from "@/store/system";
265266
import { useMethodStore } from '@/store/methodStore';
266267
import { useSettingsStore } from '@/store/settings';
267268
import { useSubsStore } from "@/store/subs";
268269
import { initStores } from "@/utils/initApp";
269270
import { isMobile } from "@/utils/isMobile";
270-
271-
272-
273-
274-
275-
276-
277-
278-
279-
280-
281271
const { env } = useBackend();
282272
const { showNotify } = useAppNotifyStore();
283273
const subsApi = useSubsApi();
@@ -291,6 +281,7 @@ const addSubBtnIsVisible = ref(false);
291281
const methodStore = useMethodStore();
292282
const subsStore = useSubsStore();
293283
const globalStore = useGlobalStore();
284+
const systemStore = useSystemStore();
294285
const settingsStore = useSettingsStore();
295286
const { hasSubs, hasCollections, subs, collections } = storeToRefs(subsStore);
296287
const { appearanceSetting } = storeToRefs(settingsStore);
@@ -301,13 +292,17 @@ const {
301292
bottomSafeArea,
302293
// showFloatingRefreshButton,
303294
} = storeToRefs(globalStore);
295+
const { navBarHeight } = storeToRefs(systemStore);
304296
const swipeDisabled = ref(false);
305297
const touchStartY = ref(null);
306298
const touchStartX = ref(null);
307299
const sortFailed = ref(false);
308300
const hasUntagged = ref(false);
309301
const hasLocal = ref(false);
310302
const hasRemote = ref(false);
303+
const tagNavBarHeight = computed(() => {
304+
return navBarHeight.value;
305+
});
311306
const getTag = () => {
312307
return localStorage.getItem('sub-tag') || 'all';
313308
};
@@ -434,14 +429,6 @@ const updateRadioWrapperHeight = () => {
434429
}
435430
});
436431
};
437-
const isPWA = ref(
438-
(window.matchMedia("(display-mode: standalone)").matches &&
439-
!/Android/.test(navigator.userAgent)) ||
440-
false
441-
);
442-
const navBarHeight = computed(() => {
443-
return isPWA.value ? `${44 + 32 + bottomSafeArea.value}px` : `${44 + 12 + bottomSafeArea.value}px`;
444-
});
445432
446433
watch(tag, () => {
447434
updateRadioWrapperHeight();
@@ -829,7 +816,7 @@ const importTips = () => {
829816
flex-wrap: wrap;
830817
position: fixed;
831818
padding: 10px;
832-
top: v-bind(navBarHeight);
819+
top: v-bind(tagNavBarHeight);
833820
z-index: 10;
834821
backdrop-filter: blur(var(--nav-bar-blur));
835822
-webkit-backdrop-filter: blur(var(--nav-bar-blur));

0 commit comments

Comments
 (0)