refactor: update fetch page

Author: cwandev

app/pages/prose/index.vue

@@ -9,15 +9,34 @@ definePageMeta({
 
 const proseStore = useProseStore()
 
-async function fetchData() {
-  await proseStore.fetchProse()
+function fetch() {
+  proseStore.fetchProse()
 }
 
-fetchData()
+function clear() {
+  proseStore.clearProse()
+}
 </script>
 
 <template>
   <div>
-    {{ proseStore.prose }}
+    <div class="h-300 flex items-center justify-center rounded-15 bg-white p-16 dark:bg-[--van-background-2]">
+      <div v-if="proseStore.prose" class="text-16 leading-26">
+        {{ proseStore.prose }}
+      </div>
+
+      <ClientOnly v-else>
+        <van-empty :description="$t('prose_page.btn_empty_desc')" />
+      </ClientOnly>
+    </div>
+
+    <van-space class="m-10" direction="vertical" fill>
+      <van-button type="primary" round block @click="fetch">
+        {{ $t('prose_page.btn_fetch') }}
+      </van-button>
+      <van-button type="default" round block @click="clear">
+        {{ $t('prose_page.btn_clear') }}
+      </van-button>
+    </van-space>
   </div>
 </template>

i18n/locales/en-US.json

@@ -8,7 +8,7 @@
     "unocssExample": "🎨 Unocss example",
     "keepAlive": "🧡 KeepAlive Demo",
     "persistPiniaState": "💾 Persist Pinia State",
-    "fetch": "🌐 Network Request"
+    "fetch": "🏄 Network Request"
   },
   "tabbar": {
     "home": "Home",
@@ -33,5 +33,10 @@
     "label": "This is a simple example of persisting Pinia state. To verify its effectiveness, you can refresh the interface and observe it.",
     "label_num": "Number",
     "btn_add": "Add"
+  },
+  "prose_page": {
+    "btn_fetch": "Fetch",
+    "btn_clear": "Clear",
+    "btn_empty_desc": "No data"
   }
 }

i18n/locales/zh-CN.json

@@ -8,7 +8,7 @@
     "unocssExample": "🎨 Unocss 示例",
     "keepAlive": "🧡 KeepAlive 演示",
     "persistPiniaState": "💾 持久化 Pinia 状态",
-    "fetch": "🌐 网络请求"
+    "fetch": "🏄 网络请求"
   },
   "tabbar": {
     "home": "主页",
@@ -33,5 +33,10 @@
     "label": "这是一个简单的持久化 Pinia 状态的例子。为了验证其有效性，你可以刷新界面并观察它。",
     "label_num": "数字",
     "btn_add": "增加"
+  },
+  "prose_page": {
+    "btn_fetch": "拉取",
+    "btn_clear": "清空",
+    "btn_empty_desc": "暂无数据"
   }
 }