feat: 添加我的发行申请页面及相关组件，更新路由和国际化支持

2025-12-21 21:19:46 +07:00
parent 2e4d7143e5
commit 00f27bf50a
15 changed files with 466 additions and 12 deletions
--- a/components.d.ts
+++ b/components.d.ts
@@ -70,7 +70,6 @@ declare module 'vue' {
    UiTabPane: typeof import('./src/components/ui/tab-pane/index.vue')['default']
    UiTabs: typeof import('./src/components/ui/tabs/index.vue')['default']
    UiTag: typeof import('./src/components/ui/tag/index.vue')['default']
-    UiTextarea: typeof import('./src/components/ui/textarea/index.vue')['default']
    UiTextareaLabel: typeof import('./src/components/ui/textarea-label/index.vue')['default']
  }
 }
@@ -135,6 +134,5 @@ declare global {
  const UiTabPane: typeof import('./src/components/ui/tab-pane/index.vue')['default']
  const UiTabs: typeof import('./src/components/ui/tabs/index.vue')['default']
  const UiTag: typeof import('./src/components/ui/tag/index.vue')['default']
-  const UiTextarea: typeof import('./src/components/ui/textarea/index.vue')['default']
  const UiTextareaLabel: typeof import('./src/components/ui/textarea-label/index.vue')['default']
 }
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
    "@elysiajs/eden": "^1.4.5",
    "@ionic/vue": "^8.7.11",
    "@ionic/vue-router": "^8.7.11",
-    "@riwa/api-types": "http://192.168.1.27:9527/api/riwa-api-types-0.0.40.tgz",
+    "@riwa/api-types": "http://192.168.1.27:9527/api/riwa-api-types-0.0.41.tgz",
    "@tailwindcss/vite": "^4.1.18",
    "@vee-validate/yup": "^4.15.1",
    "@vueuse/core": "^14.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,8 +54,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.27:9527/api/riwa-api-types-0.0.40.tgz
-        version: http://192.168.1.27:9527/api/riwa-api-types-0.0.40.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)))
+        specifier: http://192.168.1.27:9527/api/riwa-api-types-0.0.41.tgz
+        version: http://192.168.1.27:9527/api/riwa-api-types-0.0.41.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))
@@ -1354,9 +1354,9 @@ packages:
    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}

-  '@riwa/api-types@http://192.168.1.27:9527/api/riwa-api-types-0.0.40.tgz':
-    resolution: {tarball: http://192.168.1.27:9527/api/riwa-api-types-0.0.40.tgz}
-    version: 0.0.40
+  '@riwa/api-types@http://192.168.1.27:9527/api/riwa-api-types-0.0.41.tgz':
+    resolution: {tarball: http://192.168.1.27:9527/api/riwa-api-types-0.0.41.tgz}
+    version: 0.0.41
    peerDependencies:
      '@elysiajs/eden': ^1.4.5

@@ -6453,7 +6453,7 @@ snapshots:

  '@pkgr/core@0.2.9': {}

-  '@riwa/api-types@http://192.168.1.27:9527/api/riwa-api-types-0.0.40.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/api-types@http://192.168.1.27:9527/api/riwa-api-types-0.0.41.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))

--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -49,6 +49,8 @@ export type AvailableSubscriptionBody = TreatyQuery<typeof client.api.rwa.subscr

 export type RwaData = Treaty.Data<typeof client.api.rwa.subscription.available_editions.get>["data"][number];

+export type MyIssueRwaData = Treaty.Data<typeof client.api.rwa.issuance.products.get>["data"][number];
+
 export type MySubscribeRwaData = Treaty.Data<typeof client.api.rwa.subscription.my_subscriptions.get>;

 export type MySubscribeRwaBody = TreatyQuery<typeof client.api.rwa.subscription.my_subscriptions.get>;
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -123,7 +123,8 @@
    "title": "Trade",
    "settings": {
      "bankManagement": "Bank Card",
-      "mySubscribe": "Subscribe"
+      "mySubscribe": "Subscribe",
+      "myIssues": "My Issues"
    }
  },
  "asset": {
@@ -221,6 +222,16 @@
      "revenueDetails": "Revenue Details"
    }
  },
+  "myIssues": {
+    "title": "My Issuance Applications",
+    "search": "Search",
+    "list": {
+      "nameCode": "Name/Code",
+      "createdAt": "Created Time",
+      "status": "Status"
+    },
+    "loadMore": "Load More"
+  },
  "market": {
    "title": "Market",
    "search": {
--- a/src/locales/zh-CN.json
+++ b/src/locales/zh-CN.json
@@ -123,7 +123,8 @@
    "title": "交易",
    "settings": {
      "bankManagement": "银行卡管理",
-      "mySubscribe": "我的申购"
+      "mySubscribe": "我的申购",
+      "myIssues": "我的发行"
    }
  },
  "asset": {
@@ -221,6 +222,16 @@
      "revenueDetails": "收益明细"
    }
  },
+  "myIssues": {
+    "title": "我的发行申请",
+    "search": "搜索",
+    "list": {
+      "nameCode": "名称/代码",
+      "createdAt": "创建时间",
+      "status": "状态"
+    },
+    "loadMore": "加载更多"
+  },
  "market": {
    "title": "市场",
    "search": {
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -116,6 +116,24 @@ const routes: Array<RouteRecordRaw> = [
    component: () => import("@/views/trade-settings/my-subscribe/index.vue"),
    meta: { requiresAuth: true },
  },
+  {
+    path: "/trade-settings/my-issues",
+    component: () => import("@/views/trade-settings/my-issues/outlet.vue"),
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: "",
+        component: () => import("@/views/trade-settings/my-issues/index.vue"),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: ":id",
+        props: true,
+        component: () => import("@/views/trade-settings/my-issues/detail.vue"),
+        meta: { requiresAuth: true },
+      },
+    ],
+  },
  {
    path: "/trade-settings/bank-management/add",
    component: () => import("@/views/trade-settings/bank-management/add.vue"),
--- a/src/views/trade-settings/my-issues/components/about.vue
+++ b/src/views/trade-settings/my-issues/components/about.vue
@@ -0,0 +1,23 @@
+<script lang='ts' setup>
+import type { MyIssueRwaData } from "@/api/types";
+
+const props = defineProps<{
+  data: MyIssueRwaData | null;
+}>();
+</script>
+
+<template>
+  <div class="mt-2">
+    <!-- document -->
+    <div class="mt-5">
+      <div class="font-semibold">
+        相关文档
+      </div>
+      <div class="text-xs mt-2">
+        {{ data?.proofDocuments }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/trade-settings/my-issues/components/base.vue
+++ b/src/views/trade-settings/my-issues/components/base.vue
@@ -0,0 +1,60 @@
+<script lang='ts' setup>
+import type { MyIssueRwaData } from "@/api/types";
+
+const props = defineProps<{
+  data: MyIssueRwaData | null;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="mt-2">
+    <!-- Rwa about -->
+    <div class="mt-5">
+      <div class="font-semibold">
+        {{ t('market.tradeRwa.about') }}
+      </div>
+      <div class="text-xs mt-2">
+        {{ data?.description || t('market.tradeRwa.noDescription') }}
+      </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?.code }}</div>
+        </ion-col>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.valuation') }}
+          </div>
+          <div>${{ formatAmount(data?.estimatedValue) }}</div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+
+    <!-- Rwa status -->
+    <div class="mt-5">
+      <div class="font-semibold">
+        资产状态
+      </div>
+      <div class="text-xs mt-2">
+        {{ data?.status }}
+      </div>
+    </div>
+
+    <!-- Rwa status history -->
+    <div class="mt-5">
+      <div class="font-semibold">
+        状态历史
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/trade-settings/my-issues/components/category.vue
+++ b/src/views/trade-settings/my-issues/components/category.vue
@@ -0,0 +1,47 @@
+<script lang='ts' setup>
+import { client, safeClient } from "@/api";
+
+const { t } = useI18n();
+const model = defineModel({ type: String, default: "" });
+
+const { data: categories } = await safeClient(() => client.api.rwa.category.categories.get());
+</script>
+
+<template>
+  <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 = ''">
+        {{ t('market.category.all') }}
+      </div>
+      <div
+        v-for="item in categories?.data"
+        :key="item.id"
+        class="item"
+        :class="{ active: model === item.id }"
+        @click="model = item.id"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+  </ion-content>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+ion-content::part(scroll) {
+  scrollbar-width: none;
+}
+
+.item {
+  @apply px-3 py-1 rounded-full text-xs transition-all;
+}
+.ion-palette-dark {
+  .item {
+    @apply bg-(--ion-color-step-800);
+  }
+}
+.item.active {
+  @apply bg-(--ion-color-success) text-white;
+}
+</style>
--- a/src/views/trade-settings/my-issues/components/rwa-list.vue
+++ b/src/views/trade-settings/my-issues/components/rwa-list.vue
@@ -0,0 +1,73 @@
+<script lang='ts' setup>
+import type { MyIssueRwaData } from "@/api/types";
+import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
+
+defineProps<{
+  data: MyIssueRwaData[];
+}>();
+
+const { t } = useI18n();
+const router = useRouter();
+
+function gotoTradeRwa(id: string) {
+  router.push(`/trade-settings/my-issues/${id}`);
+}
+</script>
+
+<template>
+  <div class="space-y-3 antialiased mt-5">
+    <ion-grid>
+      <ion-row class="ion-align-items-center text-xs text-text-500">
+        <ion-col size="6">
+          <div>{{ t('myIssues.list.nameCode') }}</div>
+        </ion-col>
+        <ion-col>
+          <div class="text-right">
+            {{ t('myIssues.list.createdAt') }}
+          </div>
+        </ion-col>
+        <ion-col>
+          <div class="text-right">
+            {{ t('myIssues.list.status') }}
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+    <div v-for="item in data" :key="item.id" @click="gotoTradeRwa(item.id)">
+      <ion-grid>
+        <ion-row class="ion-align-items-center my-5">
+          <ion-col size="6" class="flex items-center">
+            <div class="mr-3">
+              <CryptocurrencyColorNuls class="text-3xl" />
+            </div>
+            <div>
+              <div class="text-sm font-semibold mb-1 truncate">
+                {{ item?.name }}
+              </div>
+              <div class="flex items-center space-x-2">
+                <div class="text-xs text-text-500">
+                  {{ item?.code }}
+                </div>
+                <div class="text-xs rounded-md px-1 py-0.5 bg-text-800">
+                  {{ item.category?.name }}
+                </div>
+              </div>
+            </div>
+          </ion-col>
+          <ion-col>
+            <div class="text-xs text-right">
+              {{ useDateFormat(item.createdAt!, 'MM/DD HH:mm').value }}
+            </div>
+          </ion-col>
+          <ion-col>
+            <div class="text-sm font-bold text-primary text-right">
+              {{ item.status }}
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/trade-settings/my-issues/detail.vue
+++ b/src/views/trade-settings/my-issues/detail.vue
@@ -0,0 +1,99 @@
+<script lang='ts' setup>
+import type { MyIssueRwaData } from "@/api/types";
+import { toastController } from "@ionic/vue";
+import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
+import IcSharpEditNote from "~icons/ic/sharp-edit-note";
+import { client, safeClient } from "@/api";
+import RwaAbout from "./components/about.vue";
+import RwaBase from "./components/base.vue";
+
+const props = defineProps<{
+  id: string;
+}>();
+
+const { t } = useI18n();
+const router = useRouter();
+
+const model = useTemplateRef<ModalInstance>("model");
+const { data } = safeClient(client.api.rwa.issuance.products({ id: props.id }).get());
+
+async function handleSubscribe(val: number) {
+  await safeClient(client.api.rwa.subscription.apply.post({
+    editionId: props.id,
+    quantity: String(val),
+  }));
+  const toast = await toastController.create({
+    message: t("market.tradeRwa.subscribeSuccess"),
+    duration: 2000,
+    position: "bottom",
+    color: "success",
+  });
+
+  await toast.present();
+  model.value?.$el.dismiss();
+}
+function gotoEdit() {
+  router.push({ name: "trade-rwa-edit" });
+}
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ui-toolbar">
+        <ion-back-button slot="start" text="" />
+        <ion-title>
+          {{ data?.code }}
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true" class="ion-padding">
+      <div>
+        <div class="flex items-center space-x-2">
+          <CryptocurrencyColorNuls class="text-3xl" />
+
+          <div class="mr-2">
+            <div class="text-lg font-semibold">
+              {{ data?.name }}
+            </div>
+            <div class="text-xs text-gray-500 font-semibold">
+              {{ data?.category?.name }}
+            </div>
+          </div>
+        </div>
+        <div class="flex items-center my-3" @click="gotoEdit">
+          <IcSharpEditNote class="inline-block text-xl mr-1 text-text-500" />
+          <div class="text-xs">
+            编辑资产
+          </div>
+        </div>
+      </div>
+
+      <ui-tabs size="small">
+        <ui-tab-pane name="overview" :title="t('market.tradeRwa.tabs.overview')">
+          <RwaBase :data="data" />
+        </ui-tab-pane>
+        <ui-tab-pane name="about" title="相关文档">
+          <RwaAbout :data="data" />
+        </ui-tab-pane>
+      </ui-tabs>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.label {
+  @apply text-gray-500 mb-1;
+}
+
+ion-button {
+  width: 100%;
+  min-height: 40px;
+}
+
+ion-button::part(native) {
+  min-height: 40px;
+}
+</style>
--- a/src/views/trade-settings/my-issues/index.vue
+++ b/src/views/trade-settings/my-issues/index.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
+import type { AvailableSubscriptionBody, MyIssueRwaData } from "@/api/types";
+import { client, safeClient } from "@/api";
+import Category from "./components/category.vue";
+import RwaList from "./components/rwa-list.vue";
+
+const { t } = useI18n();
+
+const [query] = useResetRef<AvailableSubscriptionBody>({
+  limit: 20,
+  offset: 0,
+  categoryId: "",
+});
+const rwaData = ref<MyIssueRwaData[]>([]);
+const isFinished = ref(false);
+
+async function fetchRwaData() {
+  const { data } = await safeClient(() => client.api.rwa.issuance.products.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);
+}
+
+async function handleInfinite(event: InfiniteScrollCustomEvent) {
+  if (isFinished.value) {
+    event.target.complete();
+    event.target.disabled = true;
+    return;
+  }
+  query.value.offset! += query.value.limit!;
+  await fetchRwaData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
+
+watch(() => query.value.categoryId, async () => {
+  resetRwaData();
+  await fetchRwaData();
+});
+
+onBeforeMount(() => {
+  fetchRwaData();
+});
+</script>
+
+<template>
+  <IonPage>
+    <IonHeader class="ion-no-border">
+      <ion-toolbar class="ui-toolbar">
+        <ion-title>{{ t('myIssues.title') }}</ion-title>
+      </ion-toolbar>
+      <ion-toolbar class="ui-toolbar px-3">
+        <ion-searchbar :placeholder="t('myIssues.search')" />
+      </ion-toolbar>
+    </IonHeader>
+    <IonContent :fullscreen="true" class="ion-padding">
+      <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
+        <ion-refresher-content />
+      </ion-refresher>
+
+      <Category v-model="query!.categoryId" />
+      <RwaList :data="rwaData" />
+
+      <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
+        <ion-infinite-scroll-content
+          loading-spinner="bubbles"
+          :loading-text="t('myIssues.loadMore')"
+        />
+      </ion-infinite-scroll>
+    </IonContent>
+  </IonPage>
+</template>
+
+<style scoped>
+ion-searchbar {
+  padding: 0;
+}
+</style>
--- a/src/views/trade-settings/my-issues/outlet.vue
+++ b/src/views/trade-settings/my-issues/outlet.vue
@@ -0,0 +1,13 @@
+<script lang='ts' setup>
+const { t } = useI18n();
+</script>
+
+<template>
+  <IonPage>
+    <IonContent :fullscreen="true" class="ion-padding">
+      <ion-router-outlet />
+    </IonContent>
+  </IonPage>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/views/user/components/trade-settings.vue
+++ b/src/views/user/components/trade-settings.vue
@@ -1,5 +1,5 @@
 <script lang='ts' setup>
-import { cardOutline, documentOutline } from "ionicons/icons";
+import { cardOutline, documentOutline, documentTextOutline } from "ionicons/icons";

 const { t } = useI18n();
 </script>
@@ -22,6 +22,12 @@ const { t } = useI18n();
          {{ t('trade.settings.mySubscribe') }}
        </div>
      </div>
+      <div class="col-span-1 flex-col-center gap-2" @click="$router.push('/trade-settings/my-issues')">
+        <ion-icon :icon="documentTextOutline" />
+        <div class="text-xs">
+          {{ t('trade.settings.myIssues') }}
+        </div>
+      </div>
    </div>
  </div>
 </template>