✨ feat: 优化pwa安装功能

index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <link rel="manifest" href="/manifest.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-    <meta name="theme-color" content="#165dff" />
+    <meta name="theme-color" content="#ffffff" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
     <meta name="apple-mobile-web-app-title" content="RunForge" />

public/manifest.webmanifest

@@ -6,8 +6,9 @@
   "start_url": "/",
   "scope": "/",
   "display": "standalone",
+  "display_override": ["window-controls-overlay", "standalone"],
   "background_color": "#ffffff",
-  "theme_color": "#165dff",
+  "theme_color": "#ffffff",
   "icons": [
     {
       "src": "/logo.svg",

src/components/Header/index.vue

@@ -61,8 +61,9 @@
 
 <script setup>
 import { useUserStore } from '@/store/modules/user'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { Message, Modal } from '@arco-design/web-vue'
+import { setPwaThemeColor } from '@/utils/pwaTheme'
 
 const props = defineProps({
     color: {
@@ -72,6 +73,8 @@ const props = defineProps({
 })
 
 const user = ref('')
+onMounted(() => setPwaThemeColor('#78e6bd'))
+
 const getuser = async () => {
     const userStore = useUserStore()
     const userInfo = await userStore.getInfo()
@@ -110,6 +113,22 @@ getuser()
     padding: clamp(12px, 2vh, 16px) 0;
     box-sizing: border-box;
     user-select: none;
+    -webkit-app-region: drag;
+}
+
+.site-header :deep(button),
+.site-header :deep(a),
+.site-header :deep(.arco-dropdown),
+.logo {
+    -webkit-app-region: no-drag;
+}
+
+@media (display-mode: window-controls-overlay) {
+    .site-header {
+        right: auto;
+        width: env(titlebar-area-width, 100%);
+        padding-top: max(clamp(12px, 2vh, 16px), env(titlebar-area-height, 0px));
+    }
 }
 
 .header-inner {

src/components/Navbar/index.vue

@@ -124,10 +124,11 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import { useUserStore } from '@/store'
 import { isElectron } from '@/utils/electron'
+import { setPwaThemeColor } from '@/utils/pwaTheme'
 
 const userStore = useUserStore();
 
@@ -135,6 +136,8 @@ const avatar = computed(() => {
   return userStore.avatar;
 })
 
+onMounted(() => setPwaThemeColor('#ffffff'))
+
 const handleLogout = () => {
   Modal.confirm({
     title: '退出登录',
@@ -229,6 +232,19 @@ function maximizeWindow() {
   }
 }
 
+@media (display-mode: window-controls-overlay) {
+  .navbar {
+    border-top: 1px solid transparent;
+  }
+
+  .right-side {
+    padding-right: max(
+      30px,
+      calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 12px)
+    );
+  }
+}
+
 .actions {
   color: rgb(var(--gray-8));
   -webkit-app-region: no-drag;

src/utils/pwaTheme.js

@@ -0,0 +1,6 @@
+export function setPwaThemeColor(color) {
+  if (!window.matchMedia('(display-mode: window-controls-overlay)').matches) return
+
+  const themeColor = document.querySelector('meta[name="theme-color"]')
+  themeColor?.setAttribute('content', color)
+}