From b3555196713e69717a29191fe4485b42f4f81807 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sat, 27 Dec 2025 20:21:15 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=9C=80=E8=BF=91?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95=E5=92=8C=E6=94=B6=E7=9B=8A=E6=9D=A5=E6=BA=90?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=9B=B4=E6=96=B0=E6=80=BB=E8=A7=88?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BB=A5=E9=9B=86=E6=88=90=E6=96=B0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../income/total/components/overview.vue      |   6 +-
 src/views/income/total/components/recent.vue  | 110 ++++++++++++++++++
 .../total/components/revenue-source.vue       |  95 +++++++++++++++
 src/views/income/total/components/trend.vue   |   6 +-
 src/views/income/total/index.vue              |  12 +-
 5 files changed, 226 insertions(+), 3 deletions(-)
 create mode 100644 src/views/income/total/components/recent.vue
 create mode 100644 src/views/income/total/components/revenue-source.vue

diff --git a/src/views/income/total/components/overview.vue b/src/views/income/total/components/overview.vue
index 3afb0ca..6e287dd 100644
--- a/src/views/income/total/components/overview.vue
+++ b/src/views/income/total/components/overview.vue
@@ -38,4 +38,8 @@
   </div>
 </template>
 
-<style lang='css' scoped></style>
+<style lang='css' scoped>
+h4 {
+  font-size: var(--title-font-size);
+}
+</style>
diff --git a/src/views/income/total/components/recent.vue b/src/views/income/total/components/recent.vue
new file mode 100644
index 0000000..19fcfac
--- /dev/null
+++ b/src/views/income/total/components/recent.vue
@@ -0,0 +1,110 @@
+<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">
+            SF-002
+          </div>
+        </div>
+        <div class="text-right">
+          <div class="text-base font-semibold">
+            {{ formatAmountWithSplit(520.5) }}
+          </div>
+          <div class="text-xs text-text-400">
+            今天
+          </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(520.5) }}
+          </div>
+          <div class="text-xs text-text-400">
+            今天
+          </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(520.5) }}
+          </div>
+          <div class="text-xs text-text-400">
+            今天
+          </div>
+        </div>
+      </div>
+    </ion-item>
+  </ion-list>
+</template>
+
+<style lang='css' scoped>
+h4 {
+  font-size: var(--title-font-size);
+  font-weight: bold;
+}
+ion-badge {
+  font-size: 10px;
+}
+</style>
diff --git a/src/views/income/total/components/revenue-source.vue b/src/views/income/total/components/revenue-source.vue
new file mode 100644
index 0000000..d6b1ba7
--- /dev/null
+++ b/src/views/income/total/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(85321.32) }}
+        </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">
+            125项
+          </div>
+        </div>
+        <div class="text-xs text-text-200">
+          69.42%
+        </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(32642.6) }}
+        </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">
+            45项
+          </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(8110.4) }}
+        </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">
+            89项
+          </div>
+        </div>
+        <div class="text-xs text-text-200">
+          5.04%
+        </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/income/total/components/trend.vue b/src/views/income/total/components/trend.vue
index 2ba4e05..4c4cd95 100644
--- a/src/views/income/total/components/trend.vue
+++ b/src/views/income/total/components/trend.vue
@@ -56,4 +56,8 @@ useTradingView(tradingViewInst, {
   </div>
 </template>
 
-<style lang='css' scoped></style>
+<style lang='css' scoped>
+h4 {
+  font-size: var(--title-font-size);
+}
+</style>
diff --git a/src/views/income/total/index.vue b/src/views/income/total/index.vue
index 206ec6c..9dfba15 100644
--- a/src/views/income/total/index.vue
+++ b/src/views/income/total/index.vue
@@ -2,6 +2,8 @@
 import type { RefresherCustomEvent } from "@ionic/vue";
 import { mockClient } from "@/api";
 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();
@@ -44,10 +46,18 @@ onMounted(() => {
         <ion-refresher-content />
       </ion-refresher>
 
-      <div>
+      <div class="container">
         <Overview />
         <Trend />
+        <RevenueSource />
+        <Recent />
       </div>
     </ion-content>
   </ion-page>
 </template>
+
+<style lang='css' scoped>
+.container {
+  --title-font-size: 16px;
+}
+</style>