feat: 添加每月收益页面及相关组件，更新路由以支持新功能

src/views/revenue/monthly/index.vue

@@ -0,0 +1,60 @@
+<script lang='ts' setup>
+import type { RefresherCustomEvent } from "@ionic/vue";
+import Overview from "./components/overview.vue";
+import Recent from "./components/recent.vue";
+import RevenueSource from "./components/revenue-source.vue";
+import Trend from "./components/trend.vue";
+
+const { t } = useI18n();
+const { vibrate } = useHaptics();
+
+const loading = ref(true);
+
+async function loadIncomeData() {
+  loading.value = true;
+  useTimeoutFn(() => {
+    loading.value = false;
+  }, 800);
+}
+
+async function handleRefresh(event: RefresherCustomEvent) {
+  vibrate();
+  useTimeoutFn(() => {
+    event.target.complete();
+  }, 800);
+}
+
+onMounted(() => {
+  loadIncomeData();
+});
+</script>
+
+<template>
+  <ion-page>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ui-toolbar">
+        <ui-back-button slot="start" />
+        <ion-title>{{ t("asset.revenue.monthlyRevenue") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true" class="ion-padding">
+      <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
+        <ion-refresher-content />
+      </ion-refresher>
+
+      <div class="container">
+        <Overview />
+        <Trend />
+        <RevenueSource />
+        <Recent />
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped>
+.container {
+  --title-font-size: 16px;
+}
+</style>