feat: 更新生产和测试环境的服务地址；升级 @riwa/api-types 依赖至 0.0.70；新增交易对编辑功能

2026-01-04 12:02:18 +07:00
parent 2eab7c5365
commit db5683c533
9 changed files with 296 additions and 51 deletions
--- a/src/views/tradingPairs/components/add.vue
+++ b/src/views/tradingPairs/components/add.vue
@@ -28,7 +28,6 @@ const form = ref<Body>({
  isActive: true,
  marginEnabled: false,
  maxLeverage: null,
-  futuresEnabled: false,
  spotEnabled: true
 });

@@ -48,11 +47,20 @@ const rules: FormRules = {
  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'] }]
+  makerFeeRate: [{ required: true, message: '请输入挂单手续费率', trigger: ['blur', 'change'] }],
+  takerFeeRate: [{ required: true, message: '请输入成交手续费率', trigger: ['blur', 'change'] }]
 };

 const showMaxLeverage = computed(() => form.value.marginEnabled);
+const { data: assets } = safeClient(client.api.admin.assets.get());
+const assetsOption = computed(() => {
+  return assets.value?.data
+    .filter(item => item.code !== 'USDT')
+    .map(item => ({
+      label: item.code,
+      value: item.code
+    }));
+});

 // 同步数字输入到表单字符串
 function syncNumberToString() {
@@ -92,21 +100,22 @@ function handleSubmit() {
      :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" />
+          <NSelect
+            :value="form.baseAsset || undefined"
+            :options="assetsOption"
+            placeholder="如：BTC"
+            @update:value="val => (form.baseAsset = val)"
+          />
        </NFormItemGi>

        <NFormItemGi path="quoteAsset" label="计价资产代码">
-          <NInput v-model:value="form.quoteAsset" placeholder="如：USDT" />
+          <NInput v-model:value="form.quoteAsset" placeholder="如：USDT" readonly disabled />
        </NFormItemGi>
      </NGrid>

@@ -134,8 +143,8 @@ function handleSubmit() {
        </NFormItemGi>
      </NGrid>

-      <NFormItem path="iconUrl" label="交易对图标 URL">
-        <NInput v-model:value="form.iconUrl" placeholder="请输入图标链接" />
+      <NFormItem path="iconUrl" label="交易对图标">
+        <IconPicker v-model="form.iconUrl" :collections="['cryptocurrency-color']" />
      </NFormItem>

      <NFormItem path="description" label="交易对描述">
@@ -143,28 +152,24 @@ function handleSubmit() {
      </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 path="isActive" label="是否启用">
+          <NSwitch v-model:value="form.isActive" />
        </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>
+        <NFormItemGi 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>
+        </NFormItemGi>
+      </NGrid>

      <NSpace justify="end">
        <NButton type="primary" ghost @click="$emit('close')">取 消</NButton>
--- a/src/views/tradingPairs/components/edit.vue
+++ b/src/views/tradingPairs/components/edit.vue
@@ -0,0 +1,186 @@
+<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: 'TradingPairEdit'
+});
+
+const props = defineProps<{
+  data: Body;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const formInst = useTemplateRef<FormInst>('formInst');
+const form = ref<Body>({
+  symbol: props.data.symbol,
+  name: props.data.name,
+  baseAsset: props.data.baseAsset,
+  quoteAsset: props.data.quoteAsset,
+  description: props.data.description,
+  minOrderAmount: props.data.minOrderAmount,
+  minOrderQuantity: props.data.minOrderQuantity,
+  makerFeeRate: props.data.makerFeeRate,
+  takerFeeRate: props.data.takerFeeRate,
+  iconUrl: props.data.iconUrl,
+  isActive: props.data.isActive,
+  marginEnabled: props.data.marginEnabled,
+  maxLeverage: props.data.maxLeverage,
+  spotEnabled: props.data.spotEnabled
+});
+
+// 用于表单输入的临时数字值
+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: '请输入挂单手续费率', trigger: ['blur', 'change'] }],
+  takerFeeRate: [{ required: true, message: '请输入成交手续费率', trigger: ['blur', 'change'] }]
+};
+
+const showMaxLeverage = computed(() => form.value.marginEnabled);
+const { data: assets } = safeClient(client.api.admin.assets.get());
+const assetsOption = computed(() => {
+  return assets.value?.data
+    .filter(item => item.code !== 'USDT')
+    .map(item => ({
+      label: item.code,
+      value: item.code
+    }));
+});
+
+// 同步数字输入到表单字符串
+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({ symbol: props.data.symbol }).patch({
+          ...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="name" label="交易对显示名称">
+        <NInput v-model:value="form.name" placeholder="如：比特币/泰达币" />
+      </NFormItem>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi path="baseAsset" label="基础资产代码">
+          <NSelect
+            :value="form.baseAsset || undefined"
+            :options="assetsOption"
+            placeholder="如：BTC"
+            @update:value="val => (form.baseAsset = val)"
+          />
+        </NFormItemGi>
+
+        <NFormItemGi path="quoteAsset" label="计价资产代码">
+          <NInput v-model:value="form.quoteAsset" placeholder="如：USDT" readonly disabled />
+        </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="交易对图标">
+        <IconPicker v-model="form.iconUrl" :collections="['cryptocurrency-color']" />
+      </NFormItem>
+
+      <NFormItem path="description" label="交易对描述">
+        <NInput v-model:value="form.description" type="textarea" placeholder="请输入交易对描述" />
+      </NFormItem>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi path="spotEnabled" label="是否支持现货交易">
+          <NSwitch v-model:value="form.spotEnabled" />
+        </NFormItemGi>
+
+        <NFormItemGi path="isActive" label="是否启用">
+          <NSwitch v-model:value="form.isActive" />
+        </NFormItemGi>
+
+        <NFormItemGi path="marginEnabled" label="是否支持杠杆交易">
+          <NSwitch v-model:value="form.marginEnabled" />
+        </NFormItemGi>
+
+        <NFormItemGi 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>
+        </NFormItemGi>
+      </NGrid>
+
+      <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
@@ -4,6 +4,7 @@ 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';
+import Edit from './components/edit.vue';

 const dialog = useDialog();
 const tableInst = useTemplateRef<TableInst>('tableInst');
@@ -41,16 +42,9 @@ const columns: TableBaseColumns = [
    key: 'quoteAsset',
    width: 130
  },
+
  {
-    title: '描述',
-    key: 'description',
-    width: 200,
-    ellipsis: {
-      tooltip: true
-    }
-  },
-  {
-    title: 'Maker 手续费率',
+    title: '挂单手续费率',
    key: 'makerFeeRate',
    width: 140,
    render: row => {
@@ -58,7 +52,7 @@ const columns: TableBaseColumns = [
    }
  },
  {
-    title: 'Taker 手续费率',
+    title: '成交手续费率',
    key: 'takerFeeRate',
    width: 140,
    render: row => {
@@ -99,19 +93,19 @@ const columns: TableBaseColumns = [
  },
  {
    title: '价格小数位数',
-    key: 'priceScale',
+    key: 'pricePrecision',
    width: 120,
    align: 'center'
  },
  {
    title: '数量小数位数',
-    key: 'quantityScale',
+    key: 'quantityPrecision',
    width: 120,
    align: 'center'
  },
  {
    title: '排序权重',
-    key: 'sortWeight',
+    key: 'sortOrder',
    width: 100,
    align: 'center'
  },
@@ -131,6 +125,45 @@ const columns: TableBaseColumns = [
        }
      );
    }
+  },
+  {
+    title: '描述',
+    key: 'description',
+    width: 200
+  },
+  {
+    title: '操作',
+    fixed: 'right',
+    key: 'operation',
+    width: 200,
+    operations: (row: any) => [
+      {
+        contentText: '编辑',
+        ghost: true,
+        size: 'small',
+        onClick: () => {
+          handleEdit(row);
+        }
+      },
+      {
+        contentText: '删除',
+        type: 'error',
+        ghost: true,
+        size: 'small',
+        onClick: () => {
+          dialog.create({
+            title: '删除确认',
+            content: '确认删除该交易对吗，删除后不可恢复。',
+            positiveText: '确认',
+            negativeText: '取消',
+            onPositiveClick: async () => {
+              await safeClient(() => client.api.admin.trading_pairs({ symbol: row.symbol }).delete());
+              tableInst.value?.reload();
+            }
+          });
+        }
+      }
+    ]
  }
 ];

@@ -170,8 +203,8 @@ const filterColumns: TableFilterColumns = [
      placeholder: '请选择状态',
      clearable: true,
      options: [
-        { label: '支持', value: true },
-        { label: '不支持', value: false }
+        { label: '激活', value: true },
+        { label: '未激活', value: false }
      ]
    }
  }
@@ -180,6 +213,7 @@ const filterColumns: TableFilterColumns = [
 function handleAdd() {
  const dialogInstance = dialog.create({
    title: '添加交易对',
+    showIcon: false,
    content: () =>
      h(Add, {
        onClose: () => {
@@ -191,6 +225,22 @@ function handleAdd() {
    closable: true
  });
 }
+function handleEdit(row: any) {
+  const dialogInstance = dialog.create({
+    title: '编辑交易对',
+    showIcon: false,
+    content: () =>
+      h(Edit, {
+        data: row,
+        onClose: () => {
+          dialogInstance?.destroy();
+          tableInst.value?.reload();
+        }
+      }),
+    style: { width: '800px' },
+    closable: true
+  });
+}
 </script>

 <template>
@@ -199,6 +249,7 @@ function handleAdd() {
    :columns="columns"
    :filter-columns="filterColumns"
    :fetch-data="fetchData"
+    :scroll-x="3000"
    @add="handleAdd"
  />
 </template>