feat: 新增交易对管理功能，包括添加交易对的组件和视图；更新相关路由和类型定义

2025-12-24 20:42:39 +07:00
parent 75867d6845
commit f2f311fdab
9 changed files with 409 additions and 9 deletions
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
    "@better-scroll/core": "2.5.1",
    "@elysiajs/eden": "^1.4.5",
    "@iconify/vue": "5.0.0",
-    "@riwa/api-types": "http://192.168.1.27:9527/api/riwa-api-types-0.0.64.tgz",
+    "@riwa/api-types": "http://192.168.1.27:9527/api/riwa-api-types-0.0.66.tgz",
    "@sa/axios": "workspace:*",
    "@sa/color": "workspace:*",
    "@sa/hooks": "workspace:*",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ importers:
        specifier: 5.0.0
        version: 5.0.0(vue@3.5.25(typescript@5.9.3))
      '@riwa/api-types':
-        specifier: http://192.168.1.27:9527/api/riwa-api-types-0.0.64.tgz
-        version: http://192.168.1.27:9527/api/riwa-api-types-0.0.64.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@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.66.tgz
+        version: http://192.168.1.27:9527/api/riwa-api-types-0.0.66.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@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)))
      '@sa/axios':
        specifier: workspace:*
        version: link:packages/axios
@@ -1068,9 +1068,9 @@ packages:
  '@quansync/fs@0.1.6':
    resolution: {integrity: sha512-zoA8SqQO11qH9H8FCBR7NIbowYARIPmBz3nKjgAaOUDi/xPAAu1uAgebtV7KXHTc6CDZJVRZ1u4wIGvY5CWYaw==}

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

@@ -5057,7 +5057,7 @@ snapshots:
    dependencies:
      quansync: 0.3.0

-  '@riwa/api-types@http://192.168.1.27:9527/api/riwa-api-types-0.0.64.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@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.66.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@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.19(@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/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@@ -25,6 +25,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
  rwa_product: () => import("@/views/rwa/product/index.vue"),
  rwa_producttype: () => import("@/views/rwa/productType/index.vue"),
  rwa_subscribe: () => import("@/views/rwa/subscribe/index.vue"),
+  tradingpairs: () => import("@/views/tradingPairs/index.vue"),
  transfer: () => import("@/views/transfer/index.vue"),
  user_bank: () => import("@/views/user/bank/index.vue"),
  user_bankcard: () => import("@/views/user/bankcard/index.vue"),
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -215,14 +215,24 @@ export const generatedRoutes: GeneratedRoute[] = [
      }
    ]
  },
-   {
+  {
    name: 'transfer',
    path: '/transfer',
    component: 'layout.base$view.transfer',
    meta: {
      title: 'transfer',
      i18nKey: 'route.transfer',
-      order: 4
+      order: 5
+    }
+  },
+  {
+    name: 'tradingpairs',
+    path: '/tradingpairs',
+    component: 'layout.base$view.tradingpairs',
+    meta: {
+      title: 'tradingpairs',
+      i18nKey: 'route.tradingpairs',
+      order: 6
    }
  },
 ];
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@@ -175,6 +175,7 @@ const routeMap: RouteMap = {
  "rwa_product": "/rwa/product",
  "rwa_producttype": "/rwa/producttype",
  "rwa_subscribe": "/rwa/subscribe",
+  "tradingpairs": "/tradingpairs",
  "transfer": "/transfer",
  "user": "/user",
  "user_bank": "/user/bank",
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -59,6 +59,7 @@ declare module 'vue' {
    NEmpty: typeof import('naive-ui')['NEmpty']
    NForm: typeof import('naive-ui')['NForm']
    NFormItem: typeof import('naive-ui')['NFormItem']
+    NFormItemGi: typeof import('naive-ui')['NFormItemGi']
    NGi: typeof import('naive-ui')['NGi']
    NGrid: typeof import('naive-ui')['NGrid']
    NInput: typeof import('naive-ui')['NInput']
@@ -148,6 +149,7 @@ declare global {
  const NEmpty: typeof import('naive-ui')['NEmpty']
  const NForm: typeof import('naive-ui')['NForm']
  const NFormItem: typeof import('naive-ui')['NFormItem']
+  const NFormItemGi: typeof import('naive-ui')['NFormItemGi']
  const NGi: typeof import('naive-ui')['NGi']
  const NGrid: typeof import('naive-ui')['NGrid']
  const NInput: typeof import('naive-ui')['NInput']
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@@ -29,6 +29,7 @@ declare module "@elegant-router/types" {
    "rwa_product": "/rwa/product";
    "rwa_producttype": "/rwa/producttype";
    "rwa_subscribe": "/rwa/subscribe";
+    "tradingpairs": "/tradingpairs";
    "transfer": "/transfer";
    "user": "/user";
    "user_bank": "/user/bank";
@@ -77,6 +78,7 @@ declare module "@elegant-router/types" {
    | "iframe-page"
    | "login"
    | "rwa"
+    | "tradingpairs"
    | "transfer"
    | "user"
    | "withdraw"
@@ -106,6 +108,7 @@ declare module "@elegant-router/types" {
    | "rwa_product"
    | "rwa_producttype"
    | "rwa_subscribe"
+    | "tradingpairs"
    | "transfer"
    | "user_bank"
    | "user_bankcard"
--- a/src/views/tradingPairs/components/add.vue
+++ b/src/views/tradingPairs/components/add.vue
@@ -0,0 +1,177 @@
+<script lang="ts" setup>
+import { computed, ref, useTemplateRef } from 'vue';
+import type { FormInst, FormRules } from 'naive-ui';
+import { client, safeClient } from '@/service/api';
+
+type Body = CommonType.TreatyBody<typeof client.api.admin.trading_pairs.post>;
+
+defineOptions({
+  name: 'TradingPairAdd'
+});
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const formInst = useTemplateRef<FormInst>('formInst');
+const form = ref<Body>({
+  symbol: '',
+  name: '',
+  baseAsset: '',
+  quoteAsset: 'USDT',
+  description: '',
+  minOrderAmount: '0',
+  minOrderQuantity: '0',
+  makerFeeRate: '0',
+  takerFeeRate: '0',
+  iconUrl: '',
+  isActive: true,
+  marginEnabled: false,
+  maxLeverage: null,
+  futuresEnabled: false,
+  spotEnabled: true
+});
+
+// 用于表单输入的临时数字值
+const tempValues = ref({
+  minOrderAmount: 0,
+  minOrderQuantity: 0,
+  makerFeeRate: 0,
+  takerFeeRate: 0,
+  maxLeverage: 1
+});
+
+const rules: FormRules = {
+  symbol: [{ required: true, message: '请输入交易对标识', trigger: ['blur', 'input'] }],
+  name: [{ required: true, message: '请输入交易对显示名称', trigger: ['blur', 'input'] }],
+  baseAsset: [{ required: true, message: '请输入基础资产代码', trigger: ['blur', 'input'] }],
+  quoteAsset: [{ required: true, message: '请输入计价资产代码', trigger: ['blur', 'input'] }],
+  minOrderAmount: [{ required: true, message: '请输入最小下单金额', trigger: ['blur', 'change'] }],
+  minOrderQuantity: [{ required: true, message: '请输入最小下单数量', trigger: ['blur', 'change'] }],
+  makerFeeRate: [{ required: true, message: '请输入Maker手续费率', trigger: ['blur', 'change'] }],
+  takerFeeRate: [{ required: true, message: '请输入Taker手续费率', trigger: ['blur', 'change'] }]
+};
+
+const showMaxLeverage = computed(() => form.value.marginEnabled);
+
+// 同步数字输入到表单字符串
+function syncNumberToString() {
+  form.value.minOrderAmount = tempValues.value.minOrderAmount.toString();
+  form.value.minOrderQuantity = tempValues.value.minOrderQuantity.toString();
+  form.value.makerFeeRate = (tempValues.value.makerFeeRate / 100).toString();
+  form.value.takerFeeRate = (tempValues.value.takerFeeRate / 100).toString();
+  if (form.value.marginEnabled) {
+    form.value.maxLeverage = tempValues.value.maxLeverage;
+  } else {
+    form.value.maxLeverage = null;
+  }
+}
+
+function handleSubmit() {
+  formInst.value?.validate(async errors => {
+    if (!errors) {
+      syncNumberToString();
+      await safeClient(() =>
+        client.api.admin.trading_pairs.post({
+          ...form.value
+        })
+      );
+      emit('close');
+    }
+  });
+}
+</script>
+
+<template>
+  <div class="my-10">
+    <NForm
+      ref="formInst"
+      :model="form"
+      label-width="140px"
+      label-placement="left"
+      :rules="rules"
+      require-mark-placement="left"
+    >
+      <NFormItem path="symbol" label="交易对标识">
+        <NInput v-model:value="form.symbol" placeholder="如：BTC/USDT" />
+      </NFormItem>
+
+      <NFormItem path="name" label="交易对显示名称">
+        <NInput v-model:value="form.name" placeholder="如：比特币/泰达币" />
+      </NFormItem>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi path="baseAsset" label="基础资产代码">
+          <NInput v-model:value="form.baseAsset" placeholder="如：BTC" />
+        </NFormItemGi>
+
+        <NFormItemGi path="quoteAsset" label="计价资产代码">
+          <NInput v-model:value="form.quoteAsset" placeholder="如：USDT" />
+        </NFormItemGi>
+      </NGrid>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi path="minOrderAmount" label="最小下单金额（USDT）">
+          <NInputNumber v-model:value="tempValues.minOrderAmount" :min="0" :precision="2" class="w-full" />
+        </NFormItemGi>
+
+        <NFormItemGi path="minOrderQuantity" label="最小下单数量">
+          <NInputNumber v-model:value="tempValues.minOrderQuantity" :min="0" :precision="8" class="w-full" />
+        </NFormItemGi>
+      </NGrid>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi path="makerFeeRate" label="挂单手续费率">
+          <NInputNumber v-model:value="tempValues.makerFeeRate" :min="0" :max="100" :step="0.01" class="w-full">
+            <template #suffix>%</template>
+          </NInputNumber>
+        </NFormItemGi>
+
+        <NFormItemGi path="takerFeeRate" label="成交手续费率">
+          <NInputNumber v-model:value="tempValues.takerFeeRate" :min="0" :max="100" :step="0.01" class="w-full">
+            <template #suffix>%</template>
+          </NInputNumber>
+        </NFormItemGi>
+      </NGrid>
+
+      <NFormItem path="iconUrl" label="交易对图标 URL">
+        <NInput v-model:value="form.iconUrl" placeholder="请输入图标链接" />
+      </NFormItem>
+
+      <NFormItem path="description" label="交易对描述">
+        <NInput v-model:value="form.description" type="textarea" placeholder="请输入交易对描述" />
+      </NFormItem>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi path="isActive" label="是否启用">
+          <NSwitch v-model:value="form.isActive" />
+        </NFormItemGi>
+
+        <NFormItemGi path="spotEnabled" label="是否支持现货交易">
+          <NSwitch v-model:value="form.spotEnabled" />
+        </NFormItemGi>
+
+        <NFormItemGi path="futuresEnabled" label="是否支持合约交易">
+          <NSwitch v-model:value="form.futuresEnabled" />
+        </NFormItemGi>
+
+        <NFormItemGi path="marginEnabled" label="是否支持杠杆交易">
+          <NSwitch v-model:value="form.marginEnabled" />
+        </NFormItemGi>
+      </NGrid>
+
+      <NFormItem v-if="showMaxLeverage" path="maxLeverage" label="最大杠杆倍数">
+        <NInputNumber v-model:value="tempValues.maxLeverage" :min="1" :max="100" :precision="0" class="w-full">
+          <template #suffix>倍</template>
+        </NInputNumber>
+      </NFormItem>
+
+      <NSpace justify="end">
+        <NButton type="primary" ghost @click="$emit('close')">取 消</NButton>
+        <NButton type="primary" @click="handleSubmit">创 建</NButton>
+      </NSpace>
+    </NForm>
+  </div>
+</template>
+
+<style lang="css" scoped></style>
--- a/src/views/tradingPairs/index.vue
+++ b/src/views/tradingPairs/index.vue
@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import { h, useTemplateRef } from 'vue';
+import { NInput, NSelect, NTag, useDialog } from 'naive-ui';
+import { client, safeClient } from '@/service/api';
+import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
+import Add from './components/add.vue';
+
+const dialog = useDialog();
+const tableInst = useTemplateRef<TableInst>('tableInst');
+
+const fetchData: TableFetchData = ({ pagination, filter }) => {
+  return safeClient(() =>
+    client.api.admin.trading_pairs.get({
+      query: {
+        ...pagination,
+        ...filter
+      }
+    })
+  );
+};
+
+const columns: TableBaseColumns = [
+  {
+    title: '交易对标识',
+    key: 'symbol',
+    width: 150,
+    fixed: 'left'
+  },
+  {
+    title: '名称',
+    key: 'name',
+    width: 150
+  },
+  {
+    title: '基础资产代码',
+    key: 'baseAsset',
+    width: 130
+  },
+  {
+    title: '计价资产代码',
+    key: 'quoteAsset',
+    width: 130
+  },
+  {
+    title: '描述',
+    key: 'description',
+    width: 200,
+    ellipsis: {
+      tooltip: true
+    }
+  },
+  {
+    title: 'Maker 手续费率',
+    key: 'makerFeeRate',
+    width: 140,
+    render: row => {
+      return `${(Number(row.makerFeeRate) * 100).toFixed(2)}%`;
+    }
+  },
+  {
+    title: 'Taker 手续费率',
+    key: 'takerFeeRate',
+    width: 140,
+    render: row => {
+      return `${(Number(row.takerFeeRate) * 100).toFixed(2)}%`;
+    }
+  },
+  {
+    title: '最小下单金额（USDT）',
+    key: 'minOrderAmount',
+    width: 170,
+    render: row => {
+      return Number(row.minOrderAmount).toFixed(2);
+    }
+  },
+  {
+    title: '最大下单金额（USDT）',
+    key: 'maxOrderAmount',
+    width: 170,
+    render: row => {
+      return Number(row.maxOrderAmount).toFixed(2);
+    }
+  },
+  {
+    title: '最小下单数量',
+    key: 'minOrderQuantity',
+    width: 130,
+    render: row => {
+      return Number(row.minOrderQuantity).toFixed(8);
+    }
+  },
+  {
+    title: '最大下单数量',
+    key: 'maxOrderQuantity',
+    width: 130,
+    render: row => {
+      return Number(row.maxOrderQuantity).toFixed(8);
+    }
+  },
+  {
+    title: '价格小数位数',
+    key: 'priceScale',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '数量小数位数',
+    key: 'quantityScale',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '排序权重',
+    key: 'sortWeight',
+    width: 100,
+    align: 'center'
+  },
+  {
+    title: '是否支持现货交易',
+    key: 'isActive',
+    width: 140,
+    align: 'center',
+    render: row => {
+      return h(
+        NTag,
+        {
+          type: row.isActive ? 'success' : 'error'
+        },
+        {
+          default: () => (row.isActive ? '支持' : '不支持')
+        }
+      );
+    }
+  }
+];
+
+const filterColumns: TableFilterColumns = [
+  {
+    title: '关键词',
+    key: 'keyword',
+    component: NInput,
+    componentProps: {
+      placeholder: '请输入交易对名称或标识',
+      clearable: true
+    }
+  },
+  {
+    title: '基础资产',
+    key: 'baseAsset',
+    component: NInput,
+    componentProps: {
+      placeholder: '请输入基础资产代码',
+      clearable: true
+    }
+  },
+  {
+    title: '计价资产',
+    key: 'quoteAsset',
+    component: NInput,
+    componentProps: {
+      placeholder: '请输入计价资产代码',
+      clearable: true
+    }
+  },
+  {
+    title: '是否激活',
+    key: 'isActive',
+    component: NSelect,
+    componentProps: {
+      placeholder: '请选择状态',
+      clearable: true,
+      options: [
+        { label: '支持', value: true },
+        { label: '不支持', value: false }
+      ]
+    }
+  }
+];
+
+function handleAdd() {
+  const dialogInstance = dialog.create({
+    title: '添加交易对',
+    content: () =>
+      h(Add, {
+        onClose: () => {
+          dialogInstance?.destroy();
+          tableInst.value?.reload();
+        }
+      }),
+    style: { width: '800px' },
+    closable: true
+  });
+}
+</script>
+
+<template>
+  <TableBase
+    ref="tableInst"
+    :columns="columns"
+    :filter-columns="filterColumns"
+    :fetch-data="fetchData"
+    @add="handleAdd"
+  />
+</template>
+
+<style lang="css" scoped></style>