优化 iOS PWA 下状态栏样式

sub-store-org · Jan 28, 2024 · 32de8d1 · 32de8d1
1 parent 8e0cc8a
commit 32de8d1
Show file tree

Hide file tree

Showing 8 changed files with 204 additions and 123 deletions.
diff --git a/index.html b/index.html
@@ -3,18 +3,21 @@
 
 <head>
   <meta charset="UTF-8" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <!-- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
   <meta http-equiv="Pragma" content="no-cache" /> -->
   <meta http-equiv="Expires" content="0" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <title>Sub Store</title>
   <meta name="description" content="A sub-converter running in a Progressive Web App" />
   <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
   <link rel="alternate icon" href="/favicon.ico" type="image/png" sizes="16x16" />
   <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
   <link rel="mask-icon" href="/favicon.svg" color="#FFFFFF" />
-  <meta id="theme__color" name="theme-color" content="#000" />
+  <!-- <meta id="theme__color" name="theme-color" content="#000" /> -->
   <link rel="manifest" href="/manifest.json" />
   <style>
     body {
@@ -23,6 +26,7 @@
       overflow-x: hidden;
       overflow-y: auto;
     }
+
     html {
       width: 100%;
       background: #f2f2f2;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.104",
+  "version": "2.14.106",
   "private": true,
   "scripts": {
     "dev": "vite --host",

diff --git a/public/manifest.json b/public/manifest.json
@@ -2,8 +2,6 @@
   "name": "Sub Store",
   "short_name": "Sub Store",
   "description": "A sub-converter running in a Progressive Web App",
-  "theme_color": "#121212",
-  "background_color": "#121212",
   "id": "/",
   "start_url": "/",
   "scope": "/",

diff --git a/src/App.vue b/src/App.vue
@@ -7,85 +7,90 @@
 </template>
 
 <script setup lang="ts">
-  // import GlobalNotify from '@/components/GlobalNotify.vue';
-  import NavBar from '@/components/NavBar.vue';
-  import { useThemes } from '@/hooks/useThemes';
-  import { useGlobalStore } from '@/store/global';
-  import { useSubsStore } from '@/store/subs';
-  import { getFlowsUrlList } from '@/utils/getFlowsUrlList';
-  import { initStores } from '@/utils/initApp';
-  import { storeToRefs } from 'pinia';
-  import { ref, watchEffect, onMounted } from 'vue';
-  import { useHostAPI } from '@/hooks/useHostAPI'; //onMounted
+// import GlobalNotify from '@/components/GlobalNotify.vue';
+import NavBar from "@/components/NavBar.vue";
+import { useThemes } from "@/hooks/useThemes";
+import { useGlobalStore } from "@/store/global";
+import { useSubsStore } from "@/store/subs";
+import { getFlowsUrlList } from "@/utils/getFlowsUrlList";
+import { initStores } from "@/utils/initApp";
+import { storeToRefs } from "pinia";
+import { ref, watchEffect, onMounted } from "vue";
+import { useHostAPI } from "@/hooks/useHostAPI"; //onMounted
 
-  const subsStore = useSubsStore();
+const subsStore = useSubsStore();
 
-  const globalStore = useGlobalStore();
+const globalStore = useGlobalStore();
 
-  const { subs, flows } = storeToRefs(subsStore);
+const { subs, flows } = storeToRefs(subsStore);
 
-  const allLength = ref(null);
+const allLength = ref(null);
 
-  // 处于 pwa 且屏幕底部有小白条时将底部安全距离写入 global store
-  type NavigatorExtend = Navigator & {
-    standalone?: boolean;
-  };
-  const navigator: NavigatorExtend = window.navigator;
+// 处于 pwa 且屏幕底部有小白条时将底部安全距离写入 global store
+type NavigatorExtend = Navigator & {
+  standalone?: boolean;
+};
+const navigator: NavigatorExtend = window.navigator;
 
-  // 判断是否为非全面屏设备
-  function isLegacyDevices() {
+// 判断是否为非全面屏设备
+function isLegacyDevices() {
   const screenWidth = window.screen.width;
   const screenHeight = window.screen.height;
-  if ((screenWidth === 375 && screenHeight === 667) || (screenWidth === 414 && screenHeight === 736)) {
+  if (
+    (screenWidth === 375 && screenHeight === 667) ||
+    (screenWidth === 414 && screenHeight === 736)
+  ) {
     return true;
   }
   return false;
 }
 
-  globalStore.setBottomSafeArea((navigator.standalone && !isLegacyDevices()) ? 18 : 0);
+globalStore.setBottomSafeArea(
+  navigator.standalone && !isLegacyDevices() ? 18 : 0
+);
 
-  // 如果带有 url 参数配置 api，则将其添加到 api 列表并切换
-  const { handleUrlQuery } = useHostAPI();
-  handleUrlQuery({
-    errorCb: async () => initStores(true, true, false),
-  });
+// 如果带有 url 参数配置 api，则将其添加到 api 列表并切换
+const { handleUrlQuery } = useHostAPI();
+handleUrlQuery({
+  errorCb: async () => initStores(true, true, false),
+});
 
-  // 初始化颜色主题
-  useThemes();
+// 初始化颜色主题
+useThemes();
 
-  // 初始化应用数据（顶部通知）
-  //   initStores(true, true, false);
+// 初始化应用数据（顶部通知）
+//   initStores(true, true, false);
 
-  // 设置流量刷新状态
-  watchEffect(() => {
-    allLength.value = getFlowsUrlList(subs.value).length;
-    const currentLength = Object.keys(flows.value).length;
-    globalStore.setFlowFetching(allLength.value !== currentLength);
-  });
+// 设置流量刷新状态
+watchEffect(() => {
+  allLength.value = getFlowsUrlList(subs.value).length;
+  const currentLength = Object.keys(flows.value).length;
+  globalStore.setFlowFetching(allLength.value !== currentLength);
+});
 </script>
 
 <style lang="scss">
-  #app {
-    font-family: 'Roboto', 'nutui-iconfont', 'Noto Sans', Arial, 'PingFang SC',
-      'Source Han Sans SC', 'Source Han Sans CN', 'Microsoft YaHei', 'ST Heiti',
-      SimHei, sans-serif;
+#app {
+  font-family: "Roboto", "nutui-iconfont", "Noto Sans", Arial, "PingFang SC",
+    "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "ST Heiti",
+    SimHei, sans-serif;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  min-height: 100vh;
+  width: 100%;
+  background: var(--background-color);
+  overflow: hidden;
+
+  .page-body {
+    // overflow: hidden;
+    flex: 1;
     display: flex;
     flex-direction: column;
-    position: absolute;
-    min-height: 100%;
-    width: 100%;
-
-    background: var(--background-color);
-    overflow: hidden;
-
-    .page-body {
-      // overflow: hidden;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: auto;
-    }
-
-    overflow-y: auto;
+    overflow: auto;
   }
+
+  overflow-y: auto;
+}
+
 </style>
diff --git a/src/changelogs/2024-01-29.md b/src/changelogs/2024-01-29.md
@@ -0,0 +1,9 @@
+---
+date: 2024-01-29
+---
+
+### UI
+
+- 优化 iOS PWA 下状态栏样式
+
+- 适配桌面端左右滑动