feat: 添加 UiTag 组件，更新路由和市场视图，优化用户体验

src/views/chat/index.vue

@@ -5,7 +5,7 @@ import IcOutlineCleaningServices from "~icons/ic/outline-cleaning-services";
 
 <template>
   <IonPage>
-    <IonHeader>
+    <IonHeader class="ion-no-border">
       <ion-toolbar class="ui-toolbar">
         <ion-button slot="start" fill="clear">
           <IcOutlineCleaningServices slot="icon-only" />

src/views/market/components/rwa-list.vue

@@ -1,50 +1,63 @@
 <script lang='ts' setup>
 import type { RwaData } from "@/api/types";
+import CryptocurrencyColorAppc from "~icons/cryptocurrency-color/appc";
+import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
 
 defineProps<{
   data: RwaData["data"];
 }>();
 
 const { t } = useI18n();
+const router = useRouter();
+
+function gotoTradeRwa(id: string) {
+  router.push(`/trade-rwa/${id}`);
+}
 </script>
 
 <template>
-  <ion-list lines="none" class="space-y-2">
-    <ion-item>
-      <ion-grid>
-        <ion-row class="ion-align-items-center text-xs">
-          <ion-col size="6">
-            <div>{{ t('market.rwaList.nameCode') }}</div>
-          </ion-col>
-          <ion-col>
-            <div class="text-right">
-              {{ t('market.rwaList.stage') }}
-            </div>
-          </ion-col>
-          <ion-col>
-            <div class="text-right">
-              {{ t('market.rwaList.issueDate') }}
-            </div>
-          </ion-col>
-          <ion-col>
-            <div class="text-right">
-              {{ t('market.rwaList.subscriptionPrice') }}
-            </div>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </ion-item>
-    <ion-item v-for="item in data" :key="item.id">
+  <div class="space-y-3 antialiased mt-5">
+    <ion-grid>
+      <ion-row class="ion-align-items-center text-xs text-text-500">
+        <ion-col size="6">
+          <div>{{ t('market.rwaList.nameCode') }}</div>
+        </ion-col>
+        <ion-col>
+          <div class="text-right">
+            {{ t('market.rwaList.stage') }}
+          </div>
+        </ion-col>
+        <ion-col>
+          <div class="text-right">
+            {{ t('market.rwaList.issueDate') }}
+          </div>
+        </ion-col>
+        <ion-col>
+          <div class="text-right">
+            {{ t('market.rwaList.subscriptionPrice') }}
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+    <div v-for="item in data" :key="item.id" @click="gotoTradeRwa(item.id)">
       <ion-grid>
         <ion-row class="ion-align-items-center space-y-5">
-          <ion-col size="6">
+          <ion-col size="6" class="flex items-center">
+            <div class="mr-3">
+              <CryptocurrencyColorNuls class="text-3xl" />
+            </div>
             <div>
-              <div class="font-semibold mb-1 truncate">
+              <div class="text-sm font-semibold mb-1 truncate">
                 {{ item.product?.name }}
               </div>
-              <p class="text-xs text-text-500 font-bold">
-                {{ item.product?.code }}
-              </p>
+              <div class="flex items-center space-x-2">
+                <div class="text-xs text-text-500">
+                  {{ item.product?.code }}
+                </div>
+                <div class="text-xs rounded-md px-1 py-0.5 bg-text-800">
+                  {{ item.product?.code }}
+                </div>
+              </div>
             </div>
           </ion-col>
           <ion-col>
@@ -66,8 +79,8 @@ const { t } = useI18n();
           </ion-col>
         </ion-row>
       </ion-grid>
-    </ion-item>
-  </ion-list>
+    </div>
+  </div>
 </template>
 
 <style lang='css' scoped></style>

src/views/market/index.vue

@@ -60,15 +60,20 @@ onBeforeMount(() => {
 
 <template>
   <IonPage>
-    <IonHeader class="ion-padding ui-header">
-      <ion-searchbar :placeholder="t('market.search.placeholder')" />
-      <Category v-model="query!.categoryId" />
+    <IonHeader class="ion-no-border">
+      <ion-toolbar class="ui-toolbar">
+        <ion-title>{{ t('market.title') }}</ion-title>
+      </ion-toolbar>
+      <ion-toolbar class="ui-toolbar">
+        <ion-searchbar :placeholder="t('market.search.placeholder')" />
+      </ion-toolbar>
     </IonHeader>
     <IonContent :fullscreen="true" class="ion-padding">
       <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
         <ion-refresher-content />
       </ion-refresher>
 
+      <Category v-model="query!.categoryId" />
       <RwaList :data="rwaData" />
 
       <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">

src/views/trade-rwa/index.vue

@@ -0,0 +1,26 @@
+<script lang='ts' setup>
+import { client, safeClient } from "@/api";
+
+const props = defineProps<{
+  id: string;
+}>();
+
+const { data } = safeClient(client.api.rwa.subscription({ orderId: props.id }).get());
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>RWA Trade</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ion-padding>
+        RWA Trade Page
+      </ion-padding>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped></style>

src/views/user/index.vue

@@ -22,7 +22,7 @@ async function handleRefresh(event: RefresherCustomEvent) {
 
 <template>
   <IonPage>
-    <ion-header>
+    <ion-header class="ion-no-border">
       <ion-toolbar class="ui-toolbar">
         <div slot="end">
           <ion-button fill="clear">