root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Seven
2026-01-14 03:03:45 +07:00
parent 26ba611095
commit 4553978fab
5 changed files with 111 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pnpm-lock.yaml generated
View File

@@ -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
version: 0.0.138
specifier: http://192.168.1.7:9528/api/riwa-eden-0.0.139.tgz
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':
resolution: {tarball: http://192.168.1.7:9528/api/riwa-eden-0.0.138.tgz}
version: 0.0.138
'@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.139.tgz}
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))

2
pnpm-workspace.yaml
View File

@@ -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

55
src/views/trade-tokenized/components/base.vue
View File

@@ -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(() => [
{
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,
},
]),
data: async () => {
const { data } = safeClient(client.api.market_cap.history.get({
query: { symbol: props.data?.asset?.tradingPairsAsBase[0].symbol || "" },
}));
return data.value?.map(item => ({
time: dayjs(item.ts).format("YYYY-MM-DD"),
value: item.marketCapUsd,
})) || [];
},
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>

85
src/views/trade-tokenized/components/market.vue
View File

@@ -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="订单表">

2
src/views/trade-tokenized/index.vue
View File

@@ -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();