From 13122c91e15771a2581db17216ff877f749c3cdf Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sat, 27 Dec 2025 20:51:52 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=AF=8F=E6=9C=88?=
 =?UTF-8?q?=E6=94=B6=E7=9B=8A=E9=A1=B5=E9=9D=A2=E5=8F=8A=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=9B=B4=E6=96=B0=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E4=BB=A5=E6=94=AF=E6=8C=81=E6=96=B0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                           |   5 +
 .../revenue/monthly/components/overview.vue   |  45 +++++
 .../revenue/monthly/components/recent.vue     | 162 ++++++++++++++++++
 .../monthly/components/revenue-source.vue     |  95 ++++++++++
 .../revenue/monthly/components/trend.vue      |  59 +++++++
 src/views/revenue/monthly/index.vue           |  60 +++++++
 src/views/user/components/my-revenue.vue      |   9 +-
 7 files changed, 434 insertions(+), 1 deletion(-)
 create mode 100644 src/views/revenue/monthly/components/overview.vue
 create mode 100644 src/views/revenue/monthly/components/recent.vue
 create mode 100644 src/views/revenue/monthly/components/revenue-source.vue
 create mode 100644 src/views/revenue/monthly/components/trend.vue
 create mode 100644 src/views/revenue/monthly/index.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 6f6909b..665b9de 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -64,6 +64,11 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import("@/views/revenue/total/index.vue"),
     meta: { requiresAuth: true },
   },
+  {
+    path: "/revenue/monthly",
+    component: () => import("@/views/revenue/monthly/index.vue"),
+    meta: { requiresAuth: true },
+  },
   {
     path: "/wallet/bill",
     component: () => import("@/views/wallet/bill.vue"),
diff --git a/src/views/revenue/monthly/components/overview.vue b/src/views/revenue/monthly/components/overview.vue
new file mode 100644
index 0000000..9dbe149
--- /dev/null
+++ b/src/views/revenue/monthly/components/overview.vue
@@ -0,0 +1,45 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div class="bg-text-900 rounded-xl p-7">
+    <div>
+      <div class="text-sm mb-2">
+        本月总收益
+      </div>
+      <div class="text-4xl font-bold">
+        {{ formatAmountWithSplit(38450.20) }}
+      </div>
+      <div class="flex items-center gap-2 text-xs mt-1">
+        <div>本月日均</div>
+        <div>{{ formatAmountWithSplit(1423.34) }}</div>
+      </div>
+    </div>
+    <div class="h-px bg-text-800 my-5" />
+    <div class="flex justify-around">
+      <div class="flex-col-center">
+        <div class="text-base font-bold">
+          {{ formatAmountWithSplit(1256.80) }}
+        </div>
+        <div class="text-xs">
+          昨日收益
+        </div>
+      </div>
+      <div class="h-auto w-px bg-text-800" />
+      <div class="flex-col-center">
+        <div class="text-base font-bold">
+          {{ formatAmountWithSplit(125680.50) }}
+        </div>
+        <div class="text-xs">
+          累计总收益
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped>
+h4 {
+  font-size: var(--title-font-size);
+}
+</style>
diff --git a/src/views/revenue/monthly/components/recent.vue b/src/views/revenue/monthly/components/recent.vue
new file mode 100644
index 0000000..8509c39
--- /dev/null
+++ b/src/views/revenue/monthly/components/recent.vue
@@ -0,0 +1,162 @@
+<script lang='ts' setup>
+
+</script>
+
+<template>
+  <ion-list>
+    <ion-list-header>
+      <ion-label>
+        <h4>本月记录</h4>
+      </ion-label>
+      <ion-button class="text-sm">
+        查看全部
+      </ion-button>
+    </ion-list-header>
+    <ion-item>
+      <div class="flex justify-between w-full items-center py-4">
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center gap-2">
+            <div class="text-sm font-medium">
+              分红收益
+            </div>
+            <ion-badge class="text-xs p-1" color="success">
+              已完成
+            </ion-badge>
+          </div>
+          <div class="text-sm font-medium">
+            纽约曼哈顿中心公寓
+          </div>
+          <div class="text-xs text-text-400">
+            NYC-001
+          </div>
+        </div>
+        <div class="text-right">
+          <div class="text-base font-semibold">
+            {{ formatAmountWithSplit(520.5) }}
+          </div>
+          <div class="text-xs text-text-400">
+            12/27
+          </div>
+        </div>
+      </div>
+    </ion-item>
+    <ion-item>
+      <div class="flex justify-between w-full items-center py-4">
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center gap-2">
+            <div class="text-sm font-medium">
+              资产增值
+            </div>
+            <ion-badge class="text-xs p-1" color="success">
+              已完成
+            </ion-badge>
+          </div>
+          <div class="text-sm font-medium">
+            旧金山商业地产
+          </div>
+          <div class="text-xs text-text-400">
+            SF-002
+          </div>
+        </div>
+        <div class="text-right">
+          <div class="text-base font-semibold">
+            {{ formatAmountWithSplit(320.8) }}
+          </div>
+          <div class="text-xs text-text-400">
+            12/27
+          </div>
+        </div>
+      </div>
+    </ion-item>
+    <ion-item>
+      <div class="flex justify-between w-full items-center py-4">
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center gap-2">
+            <div class="text-sm font-medium">
+              交易收益
+            </div>
+            <ion-badge class="text-xs p-1" color="success">
+              已完成
+            </ion-badge>
+          </div>
+          <div class="text-sm font-medium">
+            洛杉矶住宅楼
+          </div>
+          <div class="text-xs text-text-400">
+            LA-003
+          </div>
+        </div>
+        <div class="text-right">
+          <div class="text-base font-semibold">
+            {{ formatAmountWithSplit(215.5) }}
+          </div>
+          <div class="text-xs text-text-400">
+            12/26
+          </div>
+        </div>
+      </div>
+    </ion-item>
+    <ion-item>
+      <div class="flex justify-between w-full items-center py-4">
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center gap-2">
+            <div class="text-sm font-medium">
+              分红收益
+            </div>
+            <ion-badge class="text-xs p-1" color="warning">
+              待确认
+            </ion-badge>
+          </div>
+          <div class="text-sm font-medium">
+            迈阿密海景别墅
+          </div>
+          <div class="text-xs text-text-400">
+            MIA-004
+          </div>
+        </div>
+        <div class="text-right">
+          <div class="text-base font-semibold">
+            {{ formatAmountWithSplit(680.2) }}
+          </div>
+          <div class="text-xs text-text-400">
+            12/26
+          </div>
+        </div>
+      </div>
+    </ion-item>
+    <ion-item>
+      <div class="flex justify-between w-full items-center py-4">
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center gap-2">
+            <div class="text-sm font-medium">
+              资产增值
+            </div>
+            <ion-badge class="text-xs p-1" color="success">
+              已完成
+            </ion-badge>
+          </div>
+          <div class="text-sm font-medium">
+            芝加哥写字楼
+          </div>
+          <div class="text-xs text-text-400">
+            CHI-005
+          </div>
+        </div>
+        <div class="text-right">
+          <div class="text-base font-semibold">
+            {{ formatAmountWithSplit(450.6) }}
+          </div>
+          <div class="text-xs text-text-400">
+            12/25
+          </div>
+        </div>
+      </div>
+    </ion-item>
+  </ion-list>
+</template>
+
+<style lang='css' scoped>
+h4 {
+  font-size: var(--title-font-size);
+}
+</style>
diff --git a/src/views/revenue/monthly/components/revenue-source.vue b/src/views/revenue/monthly/components/revenue-source.vue
new file mode 100644
index 0000000..e8b8b96
--- /dev/null
+++ b/src/views/revenue/monthly/components/revenue-source.vue
@@ -0,0 +1,95 @@
+<script lang='ts' setup>
+
+</script>
+
+<template>
+  <div>
+    <h4>本月收益来源</h4>
+    <div class="card">
+      <div class="flex justify-between items-center mb-2">
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 bg-green-700 rounded-full" />
+          <div class="text-sm font-semibold">
+            分红收益
+          </div>
+        </div>
+        <div class="text-base font-semibold">
+          {{ formatAmountWithSplit(26145.60) }}
+        </div>
+      </div>
+      <div class="flex justify-between items-center mb-2">
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 " />
+          <div class="text-xs">
+            38项
+          </div>
+        </div>
+        <div class="text-xs text-text-200">
+          68.02%
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="flex justify-between items-center mb-2">
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 bg-gray-700 rounded-full" />
+          <div class="text-sm font-semibold">
+            资产增值
+          </div>
+        </div>
+        <div class="text-base font-semibold">
+          {{ formatAmountWithSplit(9820.40) }}
+        </div>
+      </div>
+      <div class="flex justify-between items-center mb-2">
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 " />
+          <div class="text-xs">
+            15项
+          </div>
+        </div>
+        <div class="text-xs text-text-200">
+          25.54%
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="flex justify-between items-center mb-2">
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 bg-yellow-500 rounded-full" />
+          <div class="text-sm font-semibold">
+            交易收益
+          </div>
+        </div>
+        <div class="text-base font-semibold">
+          {{ formatAmountWithSplit(2484.20) }}
+        </div>
+      </div>
+      <div class="flex justify-between items-center mb-2">
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 " />
+          <div class="text-xs">
+            27项
+          </div>
+        </div>
+        <div class="text-xs text-text-200">
+          6.44%
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped>
+@reference "tailwindcss";
+
+h4 {
+  font-size: var(--title-font-size);
+}
+
+.card {
+  @apply bg-(--ion-text-color-step-950) rounded-xl p-3 mt-3;
+}
+</style>
diff --git a/src/views/revenue/monthly/components/trend.vue b/src/views/revenue/monthly/components/trend.vue
new file mode 100644
index 0000000..97cfdbe
--- /dev/null
+++ b/src/views/revenue/monthly/components/trend.vue
@@ -0,0 +1,59 @@
+<script lang='ts' setup>
+const tradingViewInst = useTemplateRef<HTMLDivElement>("tradingViewInst");
+
+useTradingView(tradingViewInst, {
+  type: "Area",
+  data: [
+    {
+      time: "2025-12-01",
+      value: 1100.50,
+    },
+    {
+      time: "2025-12-05",
+      value: 1300.80,
+    },
+    {
+      time: "2025-12-10",
+      value: 1450.20,
+    },
+    {
+      time: "2025-12-15",
+      value: 1200.60,
+    },
+    {
+      time: "2025-12-20",
+      value: 1350.90,
+    },
+    {
+      time: "2025-12-25",
+      value: 1380.40,
+    },
+    {
+      time: "2025-12-27",
+      value: 1256.80,
+    },
+  ],
+  weightChartOptions: {
+    height: 150,
+    rightPriceScale: {
+      visible: false,
+    },
+    leftPriceScale: {
+      visible: false,
+    },
+  },
+});
+</script>
+
+<template>
+  <div>
+    <h4>本月收益趋势</h4>
+    <div ref="tradingViewInst" />
+  </div>
+</template>
+
+<style lang='css' scoped>
+h4 {
+  font-size: var(--title-font-size);
+}
+</style>
diff --git a/src/views/revenue/monthly/index.vue b/src/views/revenue/monthly/index.vue
new file mode 100644
index 0000000..e57bc62
--- /dev/null
+++ b/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>
diff --git a/src/views/user/components/my-revenue.vue b/src/views/user/components/my-revenue.vue
index 8dde79c..22fe9fc 100644
--- a/src/views/user/components/my-revenue.vue
+++ b/src/views/user/components/my-revenue.vue
@@ -7,6 +7,10 @@ const router = useRouter();
 function navigateToTotal() {
   router.push("/revenue/total");
 }
+
+function navigateToMonthly() {
+  router.push("/revenue/monthly");
+}
 </script>
 
 <template>
@@ -24,7 +28,10 @@ function navigateToTotal() {
           {{ t("asset.revenue.totalRevenue") }}
         </div>
       </div>
-      <div class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70">
+      <div
+        class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
+        @click="navigateToMonthly"
+      >
         <ion-icon :icon="calendarOutline" class="text-2xl text-primary" />
         <div class="text-xs">
           {{ t("asset.revenue.monthlyRevenue") }}