feat: 更新 @riwa/api-types 依赖版本至 0.0.128，并优化关于页面和基础组件的展示逻辑

src/views/trade-tokenized/components/base.vue

@@ -6,52 +6,140 @@ const props = defineProps<{
 }>();
 
 const { t } = useI18n();
+const tradingViewInst = useTemplateRef<HTMLDivElement>("tradingViewInst");
+
+useTradingView(tradingViewInst, {
+  type: "Area",
+  data: computed(() => [
+    {
+      time: "2024-01-01",
+      value: 1000,
+    },
+    {
+      time: "2024-02-01",
+      value: 1200,
+    },
+    {
+      time: "2024-03-01",
+      value: 900,
+    },
+    {
+      time: "2024-04-01",
+      value: 1400,
+    },
+    {
+      time: "2024-05-01",
+      value: 1300,
+    },
+  ]),
+  weightChartOptions: {
+    height: 150,
+    rightPriceScale: {
+      visible: false,
+    },
+    leftPriceScale: {
+      visible: false,
+    },
+  },
+});
 </script>
 
 <template>
   <div class="mt-2">
-    <div>
+    <div ref="tradingViewInst" />
+
+    <div class="mt-5">
       <div class="font-semibold">
-        关于
+        代币信息
       </div>
-      <div class="text-xs mt-2">
-        {{ data?.product?.description || t('market.tradeRwa.noDescription') }}
+
+      <div class="item">
+        <div class="label">
+          代币符号
+        </div>
+        <div class="value">
+          {{ data?.assetCode }}
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">
+          关联资产
+        </div>
+        <div class="value">
+          {{ data?.product?.name }}
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">
+          总供应量
+        </div>
+        <div class="value">
+          {{ data?.totalSupply }}
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">
+          市值
+        </div>
+        <div class="value">
+          ${{ data?.product?.estimatedValue }}
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">
+          24小时成交量
+        </div>
+        <div class="value">
+          $500000
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">
+          创建时间
+        </div>
+        <div class="value">
+          {{ useDateFormat(data?.createdAt, 'YYYY/MM/DD') }}
+        </div>
       </div>
     </div>
 
-    <!-- Rwa fields -->
-    <ion-grid class="mt-5 text-sm space-y-5">
-      <ion-row>
-        <ion-col>
-          <div class="label">
-            {{ t('market.tradeRwa.fields.productCode') }}
-          </div>
-          <div>{{ data?.product?.code }}</div>
-        </ion-col>
-        <ion-col>
-          <div class="label">
-            市值
-          </div>
-          <div>${{ formatAmountWithUnit(data?.product?.estimatedValue) }}</div>
-        </ion-col>
-      </ion-row>
-      <ion-row>
-        <ion-col>
-          <div class="label">
-            链类型
-          </div>
-          <div>{{ data?.chainType }}</div>
-        </ion-col>
-        <ion-col>
-          <div class="label">
-            {{ t('market.tradeRwa.fields.totalSupply') }}
-          </div>
-          <div>{{ Number(data?.totalSupply) }}{{ t('market.tradeRwa.units.shares') }}</div>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
+    <div class="mt-5 space-y-4">
+      <div class="font-semibold">
+        市场数据
+      </div>
+      <div class="flex items-center gap-2">
+        <Icon icon="hugeicons:trade-up" class="text-success" />
+        <div class="text-sm">
+          价格变动
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="label">
+          24小时
+        </div>
+        <div class="value">
+          +1.66%
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">
+          7天
+        </div>
+        <div class="value">
+          -5.98%
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">
+          30天
+        </div>
+        <div class="value">
+          -10.24%
+        </div>
+      </div>
+    </div>
 
-    <!-- Rwa status -->
     <div class="mt-5">
       <div class="font-semibold">
         资产状态
@@ -69,4 +157,10 @@ const { t } = useI18n();
 .label {
   @apply text-(--ion-text-color-step-300) mb-1 text-sm;
 }
+.item {
+  @apply flex justify-between items-center mt-3;
+}
+.value {
+  @apply text-sm font-semibold;
+}
 </style>