Refactor code structure for improved readability and maintainability

APP_UPDATE.md

@@ -20,16 +20,16 @@
 
 ```vue
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted } from "vue";
 
-const { checkAndPromptUpdate } = useAppUpdate()
+const { checkAndPromptUpdate } = useAppUpdate();
 
 onMounted(async () => {
   // 应用启动 3 秒后检查更新
   setTimeout(() => {
-    checkAndPromptUpdate()
-  }, 3000)
-})
+    checkAndPromptUpdate();
+  }, 3000);
+});
 </script>
 ```
 
@@ -38,6 +38,18 @@ onMounted(async () => {
 在设置页面添加"检查更新"按钮：
 
 ```vue
+<script setup lang="ts">
+const {
+  isChecking,
+  currentVersion,
+  checkAndPromptUpdate,
+} = useAppUpdate();
+
+async function handleCheckUpdate() {
+  await checkAndPromptUpdate();
+}
+</script>
+
 <template>
   <ion-page>
     <ion-header>
@@ -59,18 +71,6 @@ onMounted(async () => {
     </ion-content>
   </ion-page>
 </template>
-
-<script setup lang="ts">
-const {
-  isChecking,
-  currentVersion,
-  checkAndPromptUpdate,
-} = useAppUpdate()
-
-async function handleCheckUpdate() {
-  await checkAndPromptUpdate()
-}
-</script>
 ```
 
 ### 3. 自定义更新提示
@@ -86,19 +86,20 @@ const {
   updateMessage,
   checkForUpdate,
   openStoreUpdate,
-} = useAppUpdate()
+} = useAppUpdate();
 
 async function checkUpdate() {
-  const result = await checkForUpdate()
+  const result = await checkForUpdate();
 
   if (result.hasUpdate) {
     // 自定义提示逻辑
     if (result.forceUpdate) {
       // 强制更新 - 阻止用户继续使用
-      showForceUpdateModal()
-    } else {
+      showForceUpdateModal();
+    }
+    else {
       // 可选更新 - 显示提示但允许跳过
-      showOptionalUpdateToast()
+      showOptionalUpdateToast();
     }
   }
 }
@@ -108,26 +109,28 @@ async function checkUpdate() {
 ### 4. 显示版本信息
 
 ```vue
+<script setup lang="ts">
+import { onMounted } from "vue";
+
+const { currentVersion, hasUpdate, getCurrentVersion, checkForUpdate } = useAppUpdate();
+
+onMounted(async () => {
+  await getCurrentVersion();
+  await checkForUpdate();
+});
+</script>
+
 <template>
   <ion-item>
     <ion-label>
       <h2>应用版本</h2>
       <p>{{ currentVersion || '获取中...' }}</p>
     </ion-label>
-    <ion-badge v-if="hasUpdate" color="danger">有更新</ion-badge>
+    <ion-badge v-if="hasUpdate" color="danger">
+      有更新
+    </ion-badge>
   </ion-item>
 </template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue'
-
-const { currentVersion, hasUpdate, getCurrentVersion, checkForUpdate } = useAppUpdate()
-
-onMounted(async () => {
-  await getCurrentVersion()
-  await checkForUpdate()
-})
-</script>
 ```
 
 ## API 参考