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

package.json

@@ -35,7 +35,7 @@
     "@elysiajs/eden": "^1.4.5",
     "@ionic/vue": "^8.7.11",
     "@ionic/vue-router": "^8.7.11",
-    "@riwa/api-types": "http://192.168.1.7:9527/api/riwa-eden-0.0.126.tgz",
+    "@riwa/api-types": "http://192.168.1.7:9527/api/riwa-eden-0.0.128.tgz",
     "@tailwindcss/vite": "^4.1.18",
     "@vee-validate/zod": "^4.15.1",
     "@vueuse/core": "^14.1.0",

pnpm-lock.yaml

@@ -69,8 +69,8 @@ importers:
         specifier: ^8.7.11
         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: http://192.168.1.7:9527/api/riwa-eden-0.0.126.tgz
+        specifier: http://192.168.1.7:9527/api/riwa-eden-0.0.128.tgz
-        version: '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.126.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:9527/api/riwa-eden-0.0.128.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: ^4.1.18
         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))
@@ -2804,9 +2804,9 @@ packages:
   '@remirror/core-constants@3.0.0':
     resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
 
-  '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.126.tgz':
+  '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.128.tgz':
-    resolution: {tarball: http://192.168.1.7:9527/api/riwa-eden-0.0.126.tgz}
+    resolution: {tarball: http://192.168.1.7:9527/api/riwa-eden-0.0.128.tgz}
-    version: 0.0.126
+    version: 0.0.128
     peerDependencies:
       '@elysiajs/eden': ^1.4.5
 
@@ -12161,7 +12161,7 @@ snapshots:
 
   '@remirror/core-constants@3.0.0': {}
 
-  '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.126.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:9527/api/riwa-eden-0.0.128.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))
 

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

@@ -4,12 +4,23 @@ import type { TradableData } from "@/api/types";
 const props = defineProps<{
   data: TradableData | null;
 }>();
+
+const { t } = useI18n();
 </script>
 
 <template>
-  <div class="mt-2">
+  <div>
-    <!-- document -->
     <div>
+      <div class="font-semibold">
+        关于
+      </div>
+      <div class="text-xs mt-2">
+        {{ data?.product?.description || t('market.tradeRwa.noDescription') }}
+      </div>
+    </div>
+
+    <!-- document -->
+    <div class="mt-5">
       <div class="font-semibold mb-4">
         相关文档
       </div>

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 -->
+    <div class="mt-5 space-y-4">
-    <ion-grid class="mt-5 text-sm space-y-5">
+      <div class="font-semibold">
-      <ion-row>
+        市场数据
-        <ion-col>
+      </div>
-          <div class="label">
+      <div class="flex items-center gap-2">
-            {{ t('market.tradeRwa.fields.productCode') }}
+        <Icon icon="hugeicons:trade-up" class="text-success" />
-          </div>
+        <div class="text-sm">
-          <div>{{ data?.product?.code }}</div>
+          价格变动
-        </ion-col>
+        </div>
-        <ion-col>
+      </div>
-          <div class="label">
+
-            市值
+      <div class="item">
-          </div>
+        <div class="label">
-          <div>${{ formatAmountWithUnit(data?.product?.estimatedValue) }}</div>
+          24小时
-        </ion-col>
+        </div>
-      </ion-row>
+        <div class="value">
-      <ion-row>
+          +1.66%
-        <ion-col>
+        </div>
-          <div class="label">
+      </div>
-            链类型
+      <div class="item">
-          </div>
+        <div class="label">
-          <div>{{ data?.chainType }}</div>
+          7天
-        </ion-col>
+        </div>
-        <ion-col>
+        <div class="value">
-          <div class="label">
+          -5.98%
-            {{ t('market.tradeRwa.fields.totalSupply') }}
+        </div>
-          </div>
+      </div>
-          <div>{{ Number(data?.totalSupply) }}{{ t('market.tradeRwa.units.shares') }}</div>
+      <div class="item">
-        </ion-col>
+        <div class="label">
-      </ion-row>
+          30天
-    </ion-grid>
+        </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>

src/views/trade-tokenized/index.vue

@@ -53,13 +53,13 @@ function gotoTrade(mode: TradeTypeEnum) {
       </div>
 
       <ui-tabs size="small" class="my-3">
-        <ui-tab-pane name="market" title="行情">
+        <ui-tab-pane name="overview" :title="t('market.tradeRwa.tabs.overview')" lazy>
-          <Market :data="data" />
-        </ui-tab-pane>
-        <ui-tab-pane name="overview" :title="t('market.tradeRwa.tabs.overview')">
           <Base :data="data" />
         </ui-tab-pane>
-        <ui-tab-pane name="about" title="相关文档">
+        <ui-tab-pane name="market" title="行情" lazy>
+          <Market :data="data" />
+        </ui-tab-pane>
+        <ui-tab-pane name="about" title="相关文档" lazy>
           <About :data="data" />
         </ui-tab-pane>
       </ui-tabs>