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

components.d.ts

@@ -64,6 +64,7 @@ declare module 'vue' {
     UiResult: typeof import('./src/components/ui/result/index.vue')['default']
     UiTabPane: typeof import('./src/components/ui/tab-pane/index.vue')['default']
     UiTabs: typeof import('./src/components/ui/tabs/index.vue')['default']
+    UiTag: typeof import('./src/components/ui/tag/index.vue')['default']
   }
 }
 
@@ -121,4 +122,5 @@ declare global {
   const UiResult: typeof import('./src/components/ui/result/index.vue')['default']
   const UiTabPane: typeof import('./src/components/ui/tab-pane/index.vue')['default']
   const UiTabs: typeof import('./src/components/ui/tabs/index.vue')['default']
+  const UiTag: typeof import('./src/components/ui/tag/index.vue')['default']
 }

src/components/ui/tag/index.vue

@@ -0,0 +1,48 @@
+<script lang='ts' setup>
+const { type = "primary", size = "medium", round = false } = defineProps<{
+  type?: "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger";
+  size?: "small" | "medium" | "large";
+  round?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="ui-tag rounded-md" :class="[type, size, { 'rounded-full': round }]">
+    <slot />
+  </div>
+</template>
+
+<style lang='css' scoped>
+@reference "tailwindcss";
+
+.ui-tag {
+  @apply px-3 py-1 text-xs;
+}
+.ui-tag.primary {
+  @apply bg-(--ion-color-primary) text-white;
+}
+.ui-tag.secondary {
+  @apply bg-(--ion-color-secondary) text-white;
+}
+.ui-tag.tertiary {
+  @apply bg-(--ion-color-tertiary) text-white;
+}
+.ui-tag.success {
+  @apply bg-(--ion-color-success) text-white;
+}
+.ui-tag.warning {
+  @apply bg-(--ion-color-warning) text-white;
+}
+.ui-tag.danger {
+  @apply bg-(--ion-color-danger) text-white;
+}
+.ui-tag.small {
+  @apply text-xs px-2 py-0.5;
+}
+.ui-tag.medium {
+  @apply text-sm px-3 py-1;
+}
+.ui-tag.large {
+  @apply text-base px-4 py-2;
+}
+</style>

src/router/index.ts

@@ -66,6 +66,11 @@ const routes: Array<RouteRecordRaw> = [
     path: "/trade-settings/bank-management/add",
     component: () => import("@/views/trade-settings/bank-management/add.vue"),
   },
+  {
+    path: "/trade-rwa/:id",
+    props: true,
+    component: () => import("@/views/trade-rwa/index.vue"),
+  },
 ];
 
 const router = createRouter({

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">
+  <div class="space-y-3 antialiased mt-5">
-    <ion-item>
+    <ion-grid>
-      <ion-grid>
+      <ion-row class="ion-align-items-center text-xs text-text-500">
-        <ion-row class="ion-align-items-center text-xs">
+        <ion-col size="6">
-          <ion-col size="6">
+          <div>{{ t('market.rwaList.nameCode') }}</div>
-            <div>{{ t('market.rwaList.nameCode') }}</div>
+        </ion-col>
-          </ion-col>
+        <ion-col>
-          <ion-col>
+          <div class="text-right">
-            <div class="text-right">
+            {{ t('market.rwaList.stage') }}
-              {{ t('market.rwaList.stage') }}
+          </div>
-            </div>
+        </ion-col>
-          </ion-col>
+        <ion-col>
-          <ion-col>
+          <div class="text-right">
-            <div class="text-right">
+            {{ t('market.rwaList.issueDate') }}
-              {{ t('market.rwaList.issueDate') }}
+          </div>
-            </div>
+        </ion-col>
-          </ion-col>
+        <ion-col>
-          <ion-col>
+          <div class="text-right">
-            <div class="text-right">
+            {{ t('market.rwaList.subscriptionPrice') }}
-              {{ t('market.rwaList.subscriptionPrice') }}
+          </div>
-            </div>
+        </ion-col>
-          </ion-col>
+      </ion-row>
-        </ion-row>
+    </ion-grid>
-      </ion-grid>
+    <div v-for="item in data" :key="item.id" @click="gotoTradeRwa(item.id)">
-    </ion-item>
-    <ion-item v-for="item in data" :key="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">
+              <div class="flex items-center space-x-2">
-                {{ item.product?.code }}
+                <div class="text-xs text-text-500">
-              </p>
+                  {{ 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>
+    </div>
-  </ion-list>
+  </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">
+    <IonHeader class="ion-no-border">
-      <ion-searchbar :placeholder="t('market.search.placeholder')" />
+      <ion-toolbar class="ui-toolbar">
-      <Category v-model="query!.categoryId" />
+        <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">