feat: 添加新闻组件，整合动态新闻数据并优化RWA组件展示

src/views/riwa/components/news.vue

@@ -0,0 +1,74 @@
+<script lang='ts' setup>
+import type { NewsItem } from "@/mocks/data/news";
+import { mockClient } from "@/api";
+
+// TODO: 后续从API获取新闻数据
+const { data } = mockClient<NewsItem[]>("news");
+
+function formatTime(time: string) {
+  const date = new Date(time);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const hours = Math.floor(diff / (1000 * 60 * 60));
+
+  if (hours < 1) {
+    const minutes = Math.floor(diff / (1000 * 60));
+    return `${minutes}分钟前`;
+  }
+  if (hours < 24) {
+    return `${hours}小时前`;
+  }
+  const days = Math.floor(hours / 24);
+  if (days < 7) {
+    return `${days}天前`;
+  }
+  return date.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
+}
+</script>
+
+<template>
+  <div class="mt-5">
+    <div class="text-md font-semibold mb-4">
+      动态新闻
+    </div>
+
+    <!-- 新闻列表 -->
+    <div class="space-y-3">
+      <div
+        v-for="item in data"
+        :key="item.id"
+        class="flex gap-3 p-3 rounded-lg bg-(--ion-color-light) transition-colors cursor-pointer"
+      >
+        <!-- 缩略图 -->
+        <div class="shrink-0">
+          <img
+            :src="item.thumbnail"
+            :alt="item.title"
+            class="w-20 h-20 rounded-lg object-cover"
+          >
+        </div>
+
+        <!-- 内容 -->
+        <div class="flex-1 min-w-0 flex flex-col justify-between">
+          <!-- 标题 -->
+          <div class="text-md font-medium line-clamp-1">
+            {{ item.title }}
+          </div>
+
+          <!-- 描述 -->
+          <p class="text-xs line-clamp-2 mt-1">
+            {{ item.description }}
+          </p>
+
+          <!-- 时间 -->
+          <div class="text-xs mt-1">
+            {{ formatTime(item.time) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped>
+</style>

src/views/riwa/components/rwa.vue

@@ -1,4 +1,6 @@
 <script lang='ts' setup>
+import { cartOutline } from "ionicons/icons";
+import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
 import { client, safeClient } from "@/api";
 
 const { data } = safeClient(client.api.rwa.subscription.available_editions.get({
@@ -10,8 +12,52 @@ const { data } = safeClient(client.api.rwa.subscription.available_editions.get({
 
 <template>
   <div>
-    {{ data }}
+    <div class="text-md font-semibold">
+      RWA产品
+    </div>
+    <div v-for="item in data?.data" :key="item.id" class="card">
+      <div class="flex justify-between items-center mb-2 h-10">
+        <div class="flex items-center">
+          <CryptocurrencyColorNuls class="text-2xl inline-block mr-2" />
+          <div class="flex items-center gap-2">
+            <div class="text-md font-medium">
+              {{ item.product.name }}/{{ item.product.code }}
+            </div>
+            <ui-tag size="small" type="secondary">
+              {{ item.product.category?.name }}
+            </ui-tag>
+          </div>
+        </div>
+
+        <ion-button size="small">
+          <ion-icon slot="start" :icon="cartOutline" />
+          <span>购 入</span>
+        </ion-button>
+      </div>
+
+      <div class="text-sm font-semibold mb-2 text-text-300">
+        阶段：{{ item.editionName }}
+      </div>
+
+      <div class="text-2xl font-bold mb-2">
+        {{ formatAmountWithSplit(item.totalSupply) }}
+      </div>
+    </div>
   </div>
 </template>
 
-<style lang='css' scoped></style>
+<style lang='css' scoped>
+.card {
+  padding: 16px;
+  border-radius: 8px;
+  margin-top: 12px;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
+}
+ion-button {
+  --padding-start: 12px;
+  --padding-end: 12px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --border-radius: 8px;
+}
+</style>

src/views/riwa/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import IconParkOutlineApplicationMenu from "~icons/icon-park-outline/application-menu";
+import News from "./components/news.vue";
 import Rwa from "./components/rwa.vue";
 </script>
 
@@ -16,8 +17,9 @@ import Rwa from "./components/rwa.vue";
         <ion-title>首页</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content :fullscreen="true">
+    <ion-content :fullscreen="true" class="ion-padding">
       <Rwa />
+      <News />
     </ion-content>
   </ion-page>
 </template>