feat: 更新 @riwa/api-types 依赖版本至 0.0.139；重构交易页面以优化数据展示和格式化逻辑

pnpm-lock.yaml

@@ -103,8 +103,8 @@ catalogs:
       specifier: ^8.7.11
       version: 8.7.11
     '@riwa/api-types':
-      specifier: http://192.168.1.7:9528/api/riwa-eden-0.0.138.tgz
+      specifier: http://192.168.1.7:9528/api/riwa-eden-0.0.139.tgz
-      version: 0.0.138
+      version: 0.0.139
     '@tailwindcss/vite':
       specifier: ^4.1.18
       version: 4.1.18
@@ -322,7 +322,7 @@ importers:
         version: 8.7.11(@stencil/core@4.39.0)(vue-router@4.6.3(vue@3.5.25(typescript@5.9.3)))(vue@3.5.25(typescript@5.9.3))
       '@riwa/api-types':
         specifier: 'catalog:'
-        version: '@riwa/eden@http://192.168.1.7:9528/api/riwa-eden-0.0.138.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
+        version: '@riwa/eden@http://192.168.1.7:9528/api/riwa-eden-0.0.139.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
       '@tailwindcss/vite':
         specifier: 'catalog:'
         version: 4.1.18(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
@@ -3062,9 +3062,9 @@ packages:
   '@remirror/core-constants@3.0.0':
     resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
 
-  '@riwa/eden@http://192.168.1.7:9528/api/riwa-eden-0.0.138.tgz':
+  '@riwa/eden@http://192.168.1.7:9528/api/riwa-eden-0.0.139.tgz':
-    resolution: {tarball: http://192.168.1.7:9528/api/riwa-eden-0.0.138.tgz}
+    resolution: {tarball: http://192.168.1.7:9528/api/riwa-eden-0.0.139.tgz}
-    version: 0.0.138
+    version: 0.0.139
     peerDependencies:
       '@elysiajs/eden': ^1.4.5
 
@@ -12419,7 +12419,7 @@ snapshots:
 
   '@remirror/core-constants@3.0.0': {}
 
-  '@riwa/eden@http://192.168.1.7:9528/api/riwa-eden-0.0.138.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
+  '@riwa/eden@http://192.168.1.7:9528/api/riwa-eden-0.0.139.tgz(@elysiajs/eden@1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
     dependencies:
       '@elysiajs/eden': 1.4.5(elysia@1.4.18(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3))
 

pnpm-workspace.yaml

@@ -34,7 +34,7 @@ catalog:
   '@ionic/cli': ^7.2.1
   '@ionic/vue': ^8.7.11
   '@ionic/vue-router': ^8.7.11
-  '@riwa/api-types': http://192.168.1.7:9528/api/riwa-eden-0.0.138.tgz
+  '@riwa/api-types': http://192.168.1.7:9528/api/riwa-eden-0.0.139.tgz
   '@tailwindcss/vite': ^4.1.18
   '@types/lodash-es': ^4.17.12
   '@types/node': ^24.10.2

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

@@ -1,5 +1,7 @@
 <script lang='ts' setup>
 import type { TradableData } from "@/api/types";
+import dayjs from "dayjs";
+import { client, safeClient } from "@/api";
 
 const props = defineProps<{
   data: TradableData | null;
@@ -7,31 +9,21 @@ const props = defineProps<{
 
 const { t } = useI18n();
 const tradingViewInst = useTemplateRef<HTMLDivElement>("tradingViewInst");
+const { data: tickerData } = safeClient(client.api.market_data.pairs.ticker.get({
+  query: { symbol: props.data?.asset?.tradingPairsAsBase[0].symbol || "" },
+}));
 
 useTradingView(tradingViewInst, {
   type: "Area",
-  data: computed(() => [
+  data: async () => {
-    {
+    const { data } = safeClient(client.api.market_cap.history.get({
-      time: "2024-01-01",
+      query: { symbol: props.data?.asset?.tradingPairsAsBase[0].symbol || "" },
-      value: 1000,
+    }));
-    },
+    return data.value?.map(item => ({
-    {
+      time: dayjs(item.ts).format("YYYY-MM-DD"),
-      time: "2024-02-01",
+      value: item.marketCapUsd,
-      value: 1200,
+    })) || [];
-    },
+  },
-    {
-      time: "2024-03-01",
-      value: 900,
-    },
-    {
-      time: "2024-04-01",
-      value: 1400,
-    },
-    {
-      time: "2024-05-01",
-      value: 1300,
-    },
-  ]),
   weightChartOptions: {
     height: 150,
     rightPriceScale: {
@@ -74,7 +66,7 @@ useTradingView(tradingViewInst, {
           总供应量
         </div>
         <div class="value">
-          {{ data?.totalSupply }}
+          {{ Number(data?.totalSupply).toString() }}
         </div>
       </div>
       <div class="item">
@@ -82,7 +74,7 @@ useTradingView(tradingViewInst, {
           市值
         </div>
         <div class="value">
-          ${{ data?.product?.estimatedValue }}
+          ${{ Number(data?.product?.estimatedValue).toString() }}
         </div>
       </div>
       <div class="item">
@@ -119,7 +111,7 @@ useTradingView(tradingViewInst, {
           24小时
         </div>
         <div class="value">
-          +1.66%
+          {{ tickerData?.changePercent || '-' }}%
         </div>
       </div>
       <div class="item">
@@ -127,7 +119,7 @@ useTradingView(tradingViewInst, {
           7天
         </div>
         <div class="value">
-          -5.98%
+          -%
         </div>
       </div>
       <div class="item">
@@ -135,19 +127,10 @@ useTradingView(tradingViewInst, {
           30天
         </div>
         <div class="value">
-          -10.24%
+          -%
         </div>
       </div>
     </div>
-
-    <div class="mt-5">
-      <div class="font-semibold">
-        资产状态
-      </div>
-      <div class="text-xs mt-2">
-        {{ data?.status }}
-      </div>
-    </div>
   </div>
 </template>
 

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

@@ -18,12 +18,93 @@ const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
 
 const tradingViewInst = useTemplateRef<TradingViewInst>("tradingViewInst");
 const symbol = computed(() => props.data?.asset?.tradingPairsAsBase[0].symbol || "");
-
 const { data } = await safeClient(client.api.trading_pairs.orderbook.get({ query: { symbol: symbol.value, depth: 30 } }));
+const { data: tickerData } = await safeClient(client.api.market_data.pairs.ticker.get({ query: { symbol: symbol.value } }));
+
+// 格式化价格显示
+function formatPrice(value: string | undefined) {
+  if (!value)
+    return "--";
+  return Number(value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 });
+}
+
+// 格式化百分比
+function formatPercent(value: string | undefined) {
+  if (value === undefined || value === null)
+    return "--";
+  const sign = Number(value) > 0 ? "+" : "";
+  return `${sign}${Number(value).toFixed(2)}%`;
+}
+
+// 格式化交易量
+function formatVolume(value: string | undefined) {
+  if (!value)
+    return "--";
+  if (Number(value) >= 1e9)
+    return `${(Number(value) / 1e9).toFixed(2)}B`;
+  if (Number(value) >= 1e6)
+    return `${(Number(value) / 1e6).toFixed(2)}M`;
+  if (Number(value) >= 1e3)
+    return `${(Number(value) / 1e3).toFixed(2)}K`;
+  return Number(value).toFixed(2);
+}
+
+// 判断涨跌颜色类
+const priceChangeClass = computed(() => {
+  const change = Number(tickerData.value?.change) || 0;
+  if (change > 0)
+    return "text-[var(--ion-color-success)]";
+  if (change < 0)
+    return "text-[var(--ion-color-danger)]";
+  return "text-text-500";
+});
 </script>
 
 <template>
-  <TradingViewChart v-if="symbol" ref="tradingViewInst" class="mb-5" height="300px" :symbol="symbol" :options="tradingviewOptions" />
+  <!-- 24小时价格信息 -->
+  <div>
+    <div class="flex items-baseline justify-between mb-3">
+      <!-- 当前价格 -->
+      <div class="flex items-baseline gap-2">
+        <div class="text-2xl font-semibold" :class="priceChangeClass">
+          {{ formatPrice(tickerData?.close) }}
+        </div>
+        <div class="text-sm" :class="priceChangeClass">
+          {{ formatPercent(tickerData?.changePercent) }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 24h 数据 -->
+    <div class="grid grid-cols-3 gap-3 text-sm">
+      <div>
+        <div class="text-text-500 text-xs mb-1">
+          24h 高
+        </div>
+        <div class="font-medium">
+          {{ formatPrice(tickerData?.high) }}
+        </div>
+      </div>
+      <div>
+        <div class="text-text-500 text-xs mb-1">
+          24h 低
+        </div>
+        <div class="font-medium">
+          {{ formatPrice(tickerData?.low) }}
+        </div>
+      </div>
+      <div>
+        <div class="text-text-500 text-xs mb-1">
+          24h 量
+        </div>
+        <div class="font-medium">
+          {{ formatVolume(tickerData?.baseVolume) }}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <TradingViewChart v-if="symbol" ref="tradingViewInst" class="my-5" height="300px" :symbol="symbol" :options="tradingviewOptions" />
 
   <ui-tabs size="small" class="my-3">
     <ui-tab-pane name="order_book" title="订单表">

src/views/trade-tokenized/index.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
   id: string;
 }>();
 
-const { data } = safeClient(client.api.rwa.tokenization.tradable_products({ id: props.id }).get());
+const { data } = await safeClient(client.api.rwa.tokenization.tradable_products({ id: props.id }).get());
 
 const { t } = useI18n();
 const router = useRouter();