feat: 更新新闻相关功能，整合 API 数据获取，优化新闻列表展示和详情页面

src/views/riwa/components/news.vue

@@ -1,34 +1,17 @@
 <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" });
-}
+import type { NewData } from "@/api/types";
+import { client, safeClient } from "@/api";
 
 const router = useRouter();
+const { data } = await safeClient(() => client.api.news.get({
+  query: {
+    limit: 10,
+    offset: 0,
+  },
+}));
 
-function openNewsDetail(item: NewsItem) {
-  router.push(`/news/${item.id}`);
+function openNewsDetail(item: NewData) {
+  router.push(`/new/${item.id}`);
 }
 </script>
 
@@ -38,37 +21,30 @@ function openNewsDetail(item: NewsItem) {
       动态新闻
     </div>
 
-    <!-- 新闻列表 -->
     <div class="space-y-3">
       <div
-        v-for="item in data"
+        v-for="item in data?.data"
         :key="item.id"
         class="flex gap-3 p-3 rounded-lg bg-(--ion-color-faint) transition-colors cursor-pointer"
+        @click="openNewsDetail(item)"
       >
-        <!-- 缩略图 -->
         <div class="shrink-0">
           <img
-            :src="item.thumbnail"
+            :src="item.thumbnailId!"
             :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 }}
+            {{ item.summary }}
           </p>
-
-          <!-- 时间 -->
           <div class="text-xs mt-1">
-            {{ formatTime(item.time) }}
+            {{ useDateFormat(item.createdAt, 'YY/MM/DD') }}
           </div>
         </div>
       </div>