Refactor code structure for improved readability and maintainability

packages/distribute/components/PWAInstallBanner.vue

@@ -1,59 +1,59 @@
 <script setup lang="ts">
-const { t } = useI18n()
-const { canInstall, isInstalled, install } = usePWAInstall()
-const installing = ref(false)
-const dismissed = ref(false)
+const { t } = useI18n();
+const { canInstall, isInstalled, install } = usePWAInstall();
+const installing = ref(false);
+const dismissed = ref(false);
 
 // 从 localStorage 读取是否已关闭，但只在未安装状态下有效
 onMounted(() => {
   // 如果应用未安装，检查用户是否之前关闭过横幅
   if (!isInstalled.value) {
-    dismissed.value = localStorage.getItem('pwa-banner-dismissed') === 'true'
+    dismissed.value = localStorage.getItem("pwa-banner-dismissed") === "true";
   }
   else {
     // 如果应用已安装，清除关闭记录（为了卸载后能再次提示）
-    localStorage.removeItem('pwa-banner-dismissed')
+    localStorage.removeItem("pwa-banner-dismissed");
   }
-})
+});
 
 // 监听安装状态变化
 watch(isInstalled, (newValue) => {
   if (newValue) {
     // 应用安装后，清除关闭记录
-    localStorage.removeItem('pwa-banner-dismissed')
-    dismissed.value = false
+    localStorage.removeItem("pwa-banner-dismissed");
+    dismissed.value = false;
   }
-})
+});
 
 // 监听 canInstall 变化（卸载后会重新触发 beforeinstallprompt）
 watch(canInstall, (newValue) => {
   if (newValue && !isInstalled.value) {
     // 如果可以安装且未安装，清除之前的关闭记录
     // 这样卸载后再次访问就会重新显示横幅
-    localStorage.removeItem('pwa-banner-dismissed')
-    dismissed.value = false
+    localStorage.removeItem("pwa-banner-dismissed");
+    dismissed.value = false;
   }
-})
+});
 
 async function handleInstall() {
-  installing.value = true
+  installing.value = true;
   try {
-    const success = await install()
+    const success = await install();
     if (success) {
-      console.log('PWA 安装成功')
+      console.log("PWA 安装成功");
     }
   }
   finally {
-    installing.value = false
+    installing.value = false;
   }
 }
 
 function dismissBanner() {
-  dismissed.value = true
-  localStorage.setItem('pwa-banner-dismissed', 'true')
+  dismissed.value = true;
+  localStorage.setItem("pwa-banner-dismissed", "true");
 }
 
-const showBanner = computed(() => canInstall.value && !isInstalled.value && !dismissed.value)
+const showBanner = computed(() => canInstall.value && !isInstalled.value && !dismissed.value);
 </script>
 
 <template>
@@ -73,7 +73,7 @@ const showBanner = computed(() => canInstall.value && !isInstalled.value && !dis
       <div class="absolute inset-0 bg-linear-to-br from-primary-50/80 via-blue-50/50 to-purple-50/80 dark:from-primary-950/50 dark:via-blue-950/30 dark:to-purple-950/50" />
       <div class="absolute top-0 right-0 w-64 h-64 bg-primary-500/10 rounded-full blur-3xl" />
       <div class="absolute bottom-0 left-0 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl" />
-      
+
       <!-- 内容 -->
       <div class="relative z-10 flex items-center gap-4">
         <!-- 图标 -->