feat: 添加空状态组件，优化数据为空时的展示效果

src/ui/empty/index.vue

@@ -0,0 +1,25 @@
+<script lang='ts' setup>
+import empty from "@/assets/images/empty.png?url";
+
+withDefaults(defineProps<{
+  image?: string;
+  title?: string;
+}>(), {
+  image: empty,
+  title: "暂无数据",
+});
+</script>
+
+<template>
+  <div class="flex flex-col-center space-y-2 my-4">
+    <slot name="icon">
+      <img :src="empty" class="w-22 h-22 object-contain">
+    </slot>
+    <div class="text-sm text-text-400">
+      {{ title }}
+    </div>
+    <slot name="extra" />
+  </div>
+</template>
+
+<style lang='css' scoped></style>

src/ui/index.ts

@@ -36,5 +36,6 @@ declare module "vue" {
     UiTag: typeof import("./tag/index.vue")["default"];
     UiTextareaLabel: typeof import("./textarea-label/index.vue")["default"];
     UiBackButton: typeof import("./back-button/index.vue")["default"];
+    UiEmpty: typeof import("./empty/index.vue")["default"];
   }
 }

src/views/riwa/components/rwa.vue

@@ -22,34 +22,39 @@ function handleClick(item: RwaData) {
     <div class="text-md font-semibold">
       RWA产品
     </div>
-    <div v-for="item in data?.data" :key="item.id" class="card" @click="handleClick(item)">
+    <template v-if="data?.data.length === 0">
-      <div class="flex justify-between items-center mb-2 h-10">
+      <ui-empty />
-        <div class="flex items-center">
+    </template>
-          <CryptocurrencyColorNuls class="text-2xl inline-block mr-2" />
+    <template v-else>
-          <div class="flex items-center gap-2">
+      <div v-for="item in data?.data" :key="item.id" class="card" @click="handleClick(item)">
-            <div class="text-md font-medium">
+        <div class="flex justify-between items-center mb-2 h-10">
-              {{ item.product.name }}/{{ item.product.code }}
+          <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>
-            <ui-tag size="small" type="secondary">
-              {{ item.product.category?.name }}
-            </ui-tag>
           </div>
+
+          <ion-button size="small">
+            <ion-icon slot="start" :icon="cartOutline" />
+            <span>购 入</span>
+          </ion-button>
         </div>
 
-        <ion-button size="small">
+        <div class="text-sm font-semibold mb-2 text-text-300">
-          <ion-icon slot="start" :icon="cartOutline" />
+          阶段：{{ item.editionName }}
-          <span>购 入</span>
+        </div>
-        </ion-button>
-      </div>
 
-      <div class="text-sm font-semibold mb-2 text-text-300">
+        <div class="text-2xl font-bold mb-2">
-        阶段：{{ item.editionName }}
+          {{ formatAmountWithSplit(item.totalSupply) }}
+        </div>
       </div>
-
+    </template>
-      <div class="text-2xl font-bold mb-2">
-        {{ formatAmountWithSplit(item.totalSupply) }}
-      </div>
-    </div>
   </div>
 </template>