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

feat: 更新环境配置，添加 API 地址，优化数据获取逻辑，支持振动反馈功能

Browse Source
This commit is contained in:
Seven
2025-12-18 22:23:18 +07:00
parent 6ceb80e6f2
commit f570cbce84
20 changed files with 259 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/api/index.ts
View File

@@ -1,5 +1,5 @@
import type { App } from "@riwa/api-types";
import type { Awaitable } from "@vueuse/core";
import type { WatchSource } from "vue";
import { treaty } from "@elysiajs/eden";
import { toastController } from "@ionic/vue";
@@ -12,26 +12,42 @@ const client = treaty<App>(window.location.origin, {
export interface SafeClientOptions {
silent?: boolean;
immediate?: boolean;
watchSource?: WatchSource; // 用于监听的响应式数据源
}
export interface SafeClientReturn<T, E> {
data: Ref<T | null>;
error: Ref<E | null>;
refresh: () => Promise<void>;
isPending: Ref<boolean>;
execute: () => Promise<void>;
onFetchResponse: (callback: (data: T, error: E) => void) => void;
stopWatching?: () => void;
}
export function safeClient<T, E>(
requestPromise: () => Promise<{ data: T; error: E }>,
requestPromise: (() => Promise<{ data: T; error: E }>) | Promise<{ data: T; error: E }>,
options: SafeClientOptions = {},
): SafeClientReturn<T, E> & Promise<SafeClientReturn<T, E>> {
const { immediate = true } = options;
const { immediate = true, watchSource } = options;
const data = ref<T | null>(null);
const error = ref<E | null>(null);
const isPending = ref(false);
let responseCallback: ((data: T, error: E) => void) | null = null;
let stopWatcher: (() => void) | undefined;
const execute = async () => {
const res = await requestPromise();
isPending.value = true;
let request: () => Promise<{ data: T; error: E }>;
if (typeof requestPromise !== "function") {
request = () => Promise.resolve(requestPromise);
}
else {
request = requestPromise;
}
const res = await request().finally(() => {
isPending.value = false;
});
if (res.error) {
let errMsg = "";
@@ -44,6 +60,7 @@ export function safeClient<T, E>(
else if (res.error && "value" in (res.error as unknown as object)) {
errMsg = String((res.error as unknown as { value: string }).value);
}
// if(res.error && typeof res.error === 'object' && 'err' in res.error) {
if (!options.silent) {
const toast = await toastController.create({
message: errMsg,
@@ -69,17 +86,35 @@ export function safeClient<T, E>(
responseCallback = callback;
}
function stopWatching() {
if (stopWatcher) {
stopWatcher();
stopWatcher = undefined;
}
}
// 如果提供了 watchSource，则监听其变化
if (watchSource) {
stopWatcher = watch(
watchSource,
() => {
execute();
},
{ immediate: false }, // 不立即执行，避免与 immediate 选项冲突
);
}
const result: SafeClientReturn<T, E> = {
data: data as Ref<T | null>,
error: error as Ref<E | null>,
refresh: execute,
isPending,
execute,
onFetchResponse,
stopWatching,
};
// 创建一个 Promise 并在其上添加属性
const promise = immediate ? execute().then(() => result) : Promise.resolve(result);
// 将 result 的属性添加到 promise 上
Object.assign(promise, result);
return promise as SafeClientReturn<T, E> & Promise<SafeClientReturn<T, E>>;

2
src/api/types.ts
View File

@@ -45,3 +45,5 @@ export type SupportBanksData = Treaty.Data<typeof client.api.bank_account.banks.
export type AvailableSubscriptionData = Treaty.Data<typeof client.api.rwa.subscription.available_editions.get>;
export type AvailableSubscriptionBody = TreatyQuery<typeof client.api.rwa.subscription.available_editions.get>;
export type RwaData = Treaty.Data<typeof client.api.rwa.subscription.available_editions.get>;

10
src/components/ui/datetime/index.vue
View File

@@ -3,14 +3,20 @@ import type { FieldBindingObject } from "vee-validate";
interface Props extends FieldBindingObject {
label?: string;
formatterValue?: (value: string) => string;
format?: (value: string) => string;
}
const props = defineProps<Props>();
function handleChange(value: string) {
const formattedValue = useDateFormat(value, "YYYY/MM/DD").value;
const formattedValue = props.formatterValue ? props.formatterValue(value) : new Date(value).toISOString();
props.onChange(formattedValue);
}
function formatDisplay(value: string) {
return props.format ? props.format(value) : useDateFormat(value, "YYYY/MM/DD").value;
}
</script>
<template>
@@ -20,7 +26,7 @@ function handleChange(value: string) {
</ion-label>
<ion-datetime-button datetime="datetime" color="primary">
<div slot="date-target">
{{ props.value }}
{{ formatDisplay(props.value) }}
</div>
</ion-datetime-button>
<ion-modal :keep-contents-mounted="true">

4
src/theme/ionic.css
View File

@@ -12,6 +12,10 @@
--border-radius: 8px;
}
.ui-header {
background: var(--ion-color-primary-contrast);
}
ion-datetime.ui-datetime {
--background: rgb(255 255 255);
--background-rgb: 255, 255, 255;

5
src/views/issue/issuing-apply/index.vue
View File

@@ -9,7 +9,6 @@ import Done from "./done.vue";
import IssuePeriod from "./issue-period.vue";
const { t } = useI18n();
const now = useNow();
const { data: categories, onFetchResponse } = await safeClient(() => client.api.rwa.issuance.categories.get());
const step = useRouteQuery<number>("step", 1, { transform: v => Number(v), mode: "push" });
@@ -22,9 +21,9 @@ const initialData: RwaIssuanceProductBody = {
editions: [
{
editionName: "",
launchDate: useDateFormat(now.value, "YYYY/MM/DD").value,
launchDate: new Date(),
perUserLimit: "",
subscriptionDeadline: useDateFormat(now.value, "YYYY/MM/DD").value,
subscriptionDeadline: new Date(),
totalSupply: "",
unitPrice: "",
dividendRate: "",

11
src/views/issue/issuing-apply/issue-period.vue
View File

@@ -18,9 +18,9 @@ const now = useNow();
const initialIssuePeriod: RwaIssuanceProductBody["editions"][0] = {
editionName: "",
launchDate: useDateFormat(now.value, "YYYY/MM/DD").value,
launchDate: new Date(),
perUserLimit: "",
subscriptionDeadline: useDateFormat(now.value, "YYYY/MM/DD").value,
subscriptionDeadline: new Date(),
totalSupply: "",
unitPrice: "",
dividendRate: "",
@@ -47,6 +47,11 @@ const schema = toTypedSchema(yup.object({
function handleSubmit(values: GenericObject) {
emit("submit", values.editions);
}
function handleChange(event: Event) {
debugger;
const input = event.target as HTMLInputElement;
return new Date(input.value);
}
</script>
<template>
@@ -71,6 +76,7 @@ function handleSubmit(values: GenericObject) {
<ui-datetime
v-bind="field"
:label="t('asset.issue.apply.launchDate')"
:formatter-value="(val) => new Date(val).toISOString()"
/>
</template>
</Field>
@@ -113,6 +119,7 @@ function handleSubmit(values: GenericObject) {
<ui-datetime
v-bind="field"
:label="t('asset.issue.apply.subscriptionDeadline')"
:formatter-value="(val) => new Date(val).toISOString()"
/>
</template>
</Field>

2
src/views/market/components/category.vue
View File

@@ -7,7 +7,7 @@ const { data: categories } = await safeClient(() => client.api.rwa.issuance.cate
</script>
<template>
<ion-content :scroll-x="true" :scroll-y="false" class="w-full h-10">
<ion-content :scroll-x="true" :scroll-y="false" class="w-full h-6">
<div class="flex items-center whitespace-nowrap space-x-4">
<div class="item" :class="{ active: model === '' }" @click="model = ''">
全部

71
src/views/market/components/rwa-list.vue Normal file
View File

@@ -0,0 +1,71 @@
<script lang='ts' setup>
import type { RwaData } from "@/api/types";
defineProps<{
data: RwaData["data"];
}>();
</script>
<template>
<ion-list lines="none" class="space-y-2">
<ion-item>
<ion-grid>
<ion-row class="ion-align-items-center text-xs">
<ion-col size="6">
<div>名称/代码</div>
</ion-col>
<ion-col>
<div class="text-right">
阶段
</div>
</ion-col>
<ion-col>
<div class="text-right">
发行日期
</div>
</ion-col>
<ion-col>
<div class="text-right">
申购单价
</div>
</ion-col>
</ion-row>
</ion-grid>
</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">
<div>
<div class="font-semibold mb-1 truncate">
{{ item.product?.name }}
</div>
<p class="text-xs text-text-500 font-bold">
{{ item.product?.code }}
</p>
</div>
</ion-col>
<ion-col>
<div class="text-xs text-right">
{{ item.editionName }}
</div>
</ion-col>
<ion-col>
<div class="text-xs text-right">
{{ useDateFormat(item.launchDate!, 'MM/DD') }}
</div>
</ion-col>
<ion-col>
<div v-if="item.unitPrice" class="text-right">
<div class="text-lg font-bold text-primary">
${{ Number(item.unitPrice) }}
</div>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-list>
</template>
<style lang='css' scoped></style>

122
src/views/market/index.vue
View File

@@ -1,80 +1,86 @@
<script setup lang="ts">
import type { AvailableSubscriptionBody } from "@/api/types";
import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
import type { AvailableSubscriptionBody, RwaData } from "@/api/types";
import { client, safeClient } from "@/api";
import Category from "./components/category.vue";
import RwaList from "./components/rwa-list.vue";
const [query] = useResetRef<AvailableSubscriptionBody>({
pageIndex: 1,
pageSize: 20,
limit: 20,
offset: 0,
categoryId: "",
});
const { data, refresh } = safeClient(() => client.api.rwa.subscription.available_editions.get({
query: query.value,
}));
const tradingViewContainer = useTemplateRef<HTMLDivElement>("tradingViewContainer");
const rwaData = ref<RwaData["data"]>([]);
const isFinished = ref(false);
const tradingViewData = ref<any[]>([{ open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876 }, { open: 9.55, high: 10.30, low: 9.42, close: 9.94, time: 1642514276 }, { open: 9.94, high: 10.17, low: 9.92, close: 9.78, time: 1642600676 }, { open: 9.78, high: 10.59, low: 9.18, close: 9.51, time: 1642687076 }, { open: 9.51, high: 10.46, low: 9.10, close: 10.17, time: 1642773476 }, { open: 10.17, high: 10.96, low: 10.16, close: 10.47, time: 1642859876 }, { open: 10.47, high: 11.39, low: 10.40, close: 10.81, time: 1642946276 }, { open: 10.81, high: 11.60, low: 10.30, close: 10.75, time: 1643032676 }, { open: 10.75, high: 11.60, low: 10.49, close: 10.93, time: 1643119076 }, { open: 10.93, high: 11.53, low: 10.76, close: 10.96, time: 1643205476 }]);
async function fetchRwaData() {
const { data } = await safeClient(() => client.api.rwa.subscription.available_editions.get({
query: query.value,
}));
rwaData.value.push(...(data.value?.data || []));
isFinished.value = (data.value?.data.length || 0) < query.value.limit!;
}
function resetRwaData() {
query.value.offset = 0;
rwaData.value = [];
isFinished.value = false;
}
async function handleRefresh(event: RefresherCustomEvent) {
resetRwaData();
await fetchRwaData();
setTimeout(() => {
event.target.complete();
}, 500);
}
setInterval(() => {
const lastData = tradingViewData.value[tradingViewData.value.length - 1];
const lastClose = lastData.close;
const lastTime = lastData.time;
const changePercent = (Math.random() - 0.5) * 0.04;
const open = lastClose;
const close = open * (1 + changePercent);
const volatility = Math.random() * 0.02;
const high = Math.max(open, close) * (1 + volatility);
const low = Math.min(open, close) * (1 - volatility);
const newTime = lastTime + 60;
const newData = {
open: Number(open.toFixed(2)),
high: Number(high.toFixed(2)),
low: Number(low.toFixed(2)),
close: Number(close.toFixed(2)),
time: newTime,
};
tradingViewData.value.push(newData);
if (tradingViewData.value.length > 50) {
tradingViewData.value.shift();
async function handleInfinite(event: InfiniteScrollCustomEvent) {
if (isFinished.value) {
event.target.complete();
event.target.disabled = true;
return;
}
}, 1000);
query.value.offset! += query.value.limit!;
await fetchRwaData();
setTimeout(() => {
event.target.complete();
}, 500);
}
const { resize } = useTradingView(tradingViewContainer, {
data: tradingViewData,
watch(() => query.value.categoryId, async () => {
resetRwaData();
await fetchRwaData();
});
watch(query, () => {
refresh();
}, { deep: true });
onBeforeMount(() => {
fetchRwaData();
});
</script>
<template>
<IonPage>
<IonHeader>
<IonToolbar class="ui-toolbar">
<ion-title>Market</ion-title>
</IonToolbar>
<ion-toolbar class="ui-toolbar">
<ion-searchbar />
</ion-toolbar>
<IonHeader class="ion-padding ui-header">
<ion-searchbar placeholder=" Search" />
<Category v-model="query!.categoryId" />
</IonHeader>
<IonContent :fullscreen="true" class="ion-padding">
<ui-tabs sticky>
<ui-tab-pane name="spot" title="Digital Products" class="py-5">
<Category v-model="query!.categoryId" />
<ion-content :scroll-y="true" />
<div ref="tradingViewContainer" class="w-full h-80" />
</ui-tab-pane>
<ui-tab-pane name="futures" title="Tokenized Products" class="py-5">
<div>Futures Market Content</div>
</ui-tab-pane>
</ui-tabs>
<ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
<ion-refresher-content />
</ion-refresher>
<RwaList :data="rwaData" />
<ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
<ion-infinite-scroll-content
loading-spinner="bubbles"
loading-text="加载更多..."
/>
</ion-infinite-scroll>
</IonContent>
</IonPage>
</template>
<style scoped>
ion-searchbar {
padding: 0;
}
</style>

12
src/views/trade-settings/bank-management/index.vue
View File

@@ -13,7 +13,7 @@ const { t } = useI18n();
const router = useRouter();
const { updateBankAccounts } = useWalletStore();
const { data, refresh, onFetchResponse } = await safeClient(() => client.api.bank_account.get());
const { data, execute, onFetchResponse } = await safeClient(() => client.api.bank_account.get());
const bankCards = computed(() => data.value?.data || []);
onFetchResponse((data) => {
@@ -64,7 +64,7 @@ async function handleSetDefault(card: any) {
});
await toast.present();
refresh();
execute();
}
// 删除银行卡
@@ -89,7 +89,7 @@ async function handleDeleteCard(card: any) {
color: "success",
});
await toast.present();
refresh();
execute();
},
},
],
@@ -99,7 +99,7 @@ async function handleDeleteCard(card: any) {
}
onUpdated(() => {
refresh();
execute();
});
</script>
@@ -115,7 +115,7 @@ onUpdated(() => {
<IonContent :fullscreen="true">
<div class="min-h-full">
<div v-if="bankCards?.length === 0" class="flex flex-col items-center justify-center min-h-[60vh] p-8 text-center">
<div class="w-20 h-20 rounded-full bg-linear-to-br from-indigo-500 to-purple-600 flex items-center justify-center mb-6 shadow-lg shadow-indigo-500/30">
<div class="w-20 h-20 rounded-full bg-[#171717] flex items-center justify-center mb-6 shadow-lg">
<ion-icon :icon="cardOutline" class="text-4xl text-white" />
</div>
<h3 class="text-xl font-semibold text-#151515 dark:text-white mb-2">
@@ -126,7 +126,7 @@ onUpdated(() => {
</p>
<ion-button
expand="block"
class="h-12 font-semibold"
color="success"
@click="handleAddCard"
>
<ion-icon slot="start" :icon="addOutline" />

16
src/views/user/index.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import type { RefresherCustomEvent } from "@ionic/vue";
import { notificationsOutline, scanOutline, settingsOutline } from "ionicons/icons";
import Asset from "./components/asset.vue";
import IssuingAsset from "./components/issuing-asset.vue";
@@ -6,6 +7,17 @@ import MyRevenue from "./components/my-revenue.vue";
import TradeSettings from "./components/trade-settings.vue";
import UserInfo from "./components/user-info.vue";
import WalletCard from "./components/wallet-card.vue";
const { vibrate } = useHaptics();
const walletStore = useWalletStore();
async function handleRefresh(event: RefresherCustomEvent) {
vibrate();
await walletStore.initializeWallet();
setTimeout(() => {
event.target.complete();
}, 500);
}
</script>
<template>
@@ -26,6 +38,10 @@ import WalletCard from "./components/wallet-card.vue";
</ion-toolbar>
</ion-header>
<IonContent :fullscreen="true" class="ion-padding">
<ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
<ion-refresher-content />
</ion-refresher>
<div class="flex flex-col space-y-5">
<UserInfo />
<WalletCard />