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>