feat: 使用 Hook 形式获取 Runtime 信息

src/hooks/app/useRuntime.ts

+export interface Runtime {
+    app: Ref<PlusRuntimeWidgetInfo>
+}
+
+export function useRuntime(): Runtime {
+    const app = ref<PlusRuntimeWidgetInfo>({})
+
+    onMounted(() => {
+        // 获取应用信息
+        // #ifdef APP-PLUS
+        plus.runtime.getProperty(plus.runtime.appid, (info) => {
+            app.value = info
+        })
+        // #endif
+    })
+
+    return {
+        app,
+    }
+}

src/pages/index/index.vue

 <script setup lang="ts">
     import dayjs from 'dayjs'
     import { checkUpgrade } from '@/utils/upgrade'
+    import { useRuntime } from '@/hooks/app/useRuntime'
 
+    const { app } = useRuntime()
     const year = ref(dayjs().year())
     const title = ref('Hello World')
-    const version = ref()
-
-    // #ifdef APP-PLUS
-    plus.runtime.getProperty(plus.runtime.appid, (info) => {
-        version.value = info.version
-    })
-    // #endif
+    const version = computed(() => app.value.version)
 
     onMounted(() => {
         // test API
@@ -41,7 +37,7 @@
 
 <template>
     <view class="content">
-        <fui-avatar src="/static/logo.png" radius="14" background="transparent" @click="surprise" />
+        <fui-avatar src="/static/logo.png" radius="14" size="large" background="transparent" @click="surprise" />
         <view class="info">
             <text class="title">{{ title }}</text>
             <text class="title">{{ $t('app.hello') }}</text>
@@ -70,7 +66,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        margin: 50rpx 0 30rpx 0;
+        margin: 30rpx 0;
     }
 
     .title {