From 4c8fc46ad4068b9ac64f274c52a7be2230e1e970 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sun, 4 Jan 2026 13:50:32 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=B5=84=E4=BA=A7?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=8C=85=E6=8B=AC?=
 =?UTF-8?q?=E8=B5=84=E4=BA=A7=E6=B7=BB=E5=8A=A0=E5=92=8C=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=9B=E6=9B=B4=E6=96=B0=E8=B5=84=E4=BA=A7?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=98=BE=E7=A4=BA=E5=92=8C=E8=BF=87=E6=BB=A4?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/asset/components/add.vue  | 213 +++++++++++++++++++++++++++
 src/views/asset/components/edit.vue | 218 ++++++++++++++++++++++++++++
 src/views/asset/index.vue           | 205 ++++++++++++++++++++++++--
 3 files changed, 624 insertions(+), 12 deletions(-)
 create mode 100644 src/views/asset/components/add.vue
 create mode 100644 src/views/asset/components/edit.vue

diff --git a/src/views/asset/components/add.vue b/src/views/asset/components/add.vue
new file mode 100644
index 0000000..f87a6ab
--- /dev/null
+++ b/src/views/asset/components/add.vue
@@ -0,0 +1,213 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import type { FormInst, FormItemRule } from 'naive-ui';
+import { NButton, NForm, NFormItem, NFormItemGi, NGrid, NInput, NInputNumber, NSpace, NSwitch } from 'naive-ui';
+import { client, safeClient } from '@/service/api';
+
+type Asset = CommonType.TreatyBody<typeof client.api.admin.assets.post>;
+
+defineOptions({
+  name: 'AssetEdit'
+});
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const formRef = ref<FormInst | null>(null);
+const loading = ref(false);
+
+const formModel = reactive<Asset>({
+  code: '',
+  name: '',
+  iconUrl: '',
+  maxWithdrawPerDay: '',
+  maxWithdrawPerTx: '',
+  minDeposit: '',
+  minWithdraw: '',
+  withdrawFeeFixed: '',
+  withdrawFeeRate: '',
+  tradeEnabled: false,
+  transferEnabled: false,
+  withdrawEnabled: false,
+  depositEnabled: false,
+  isActive: false,
+  isRwaAsset: false,
+  sortOrder: 1
+});
+
+// 用于表单输入的临时数字值
+const tempValues = ref({
+  maxWithdrawPerDay: 0,
+  maxWithdrawPerTx: 0,
+  minDeposit: 0,
+  minWithdraw: 0,
+  withdrawFeeFixed: 0,
+  withdrawFeeRate: 0, // 转换为百分比
+  sortOrder: 0
+});
+
+const rules: Record<string, FormItemRule | FormItemRule[]> = {
+  code: { required: true, message: '请输入资产代码', trigger: 'blur' },
+  name: { required: true, message: '请输入资产名称', trigger: 'blur' },
+  iconUrl: { required: true, message: '请输入图标地址', trigger: 'blur' },
+  minDeposit: { required: true, message: '请输入最小充值金额', trigger: 'blur' },
+  minWithdraw: { required: true, message: '请输入最小提现金额', trigger: 'blur' },
+  withdrawFeeFixed: { required: true, message: '请输入提现固定手续费', trigger: 'blur' },
+  withdrawFeeRate: { required: true, message: '请输入提现手续费率', trigger: 'blur' }
+};
+
+// 同步数字输入到表单字符串
+function syncNumberToString() {
+  formModel.maxWithdrawPerDay = tempValues.value.maxWithdrawPerDay.toString();
+  formModel.maxWithdrawPerTx = tempValues.value.maxWithdrawPerTx.toString();
+  formModel.minDeposit = tempValues.value.minDeposit.toString();
+  formModel.minWithdraw = tempValues.value.minWithdraw.toString();
+  formModel.withdrawFeeFixed = tempValues.value.withdrawFeeFixed.toString();
+  formModel.withdrawFeeRate = (tempValues.value.withdrawFeeRate / 100).toString(); // 转回小数
+  formModel.sortOrder = tempValues.value.sortOrder;
+}
+
+async function handleSubmit() {
+  syncNumberToString();
+  await formRef.value?.validate();
+  loading.value = true;
+  await safeClient(() =>
+    client.api.admin.assets.post({
+      ...formModel
+    })
+  );
+  loading.value = false;
+  window.$message?.success('更新成功');
+  emit('close');
+}
+
+function handleCancel() {
+  emit('close');
+}
+</script>
+
+<template>
+  <div class="my-10">
+    <NForm ref="formRef" :model="formModel" :rules="rules" label-placement="left" :label-width="140">
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi label="资产代码" path="code">
+          <NInput v-model:value="formModel.code" placeholder="请输入资产代码" />
+        </NFormItemGi>
+
+        <NFormItemGi label="资产名称" path="name">
+          <NInput v-model:value="formModel.name" placeholder="请输入资产名称" />
+        </NFormItemGi>
+      </NGrid>
+
+      <NFormItem label="图标地址" path="iconUrl">
+        <IconPicker v-model="formModel.iconUrl" :collections="['cryptocurrency-color']" />
+      </NFormItem>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi label="每日最大提现金额" path="maxWithdrawPerDay">
+          <NInputNumber
+            v-model:value="tempValues.maxWithdrawPerDay"
+            placeholder="请输入每日最大提现金额"
+            :min="0"
+            :precision="2"
+            class="w-full"
+          />
+        </NFormItemGi>
+
+        <NFormItemGi label="单笔最大提现金额" path="maxWithdrawPerTx">
+          <NInputNumber
+            v-model:value="tempValues.maxWithdrawPerTx"
+            placeholder="请输入单笔最大提现金额"
+            :min="0"
+            :precision="2"
+            class="w-full"
+          />
+        </NFormItemGi>
+      </NGrid>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi label="最小充值金额" path="minDeposit">
+          <NInputNumber
+            v-model:value="tempValues.minDeposit"
+            placeholder="请输入最小充值金额"
+            :min="0"
+            :precision="2"
+            class="w-full"
+          />
+        </NFormItemGi>
+
+        <NFormItemGi label="最小提现金额" path="minWithdraw">
+          <NInputNumber
+            v-model:value="tempValues.minWithdraw"
+            placeholder="请输入最小提现金额"
+            :min="0"
+            :precision="2"
+            class="w-full"
+          />
+        </NFormItemGi>
+      </NGrid>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi label="提现固定手续费" path="withdrawFeeFixed">
+          <NInputNumber
+            v-model:value="tempValues.withdrawFeeFixed"
+            placeholder="请输入提现固定手续费"
+            :min="0"
+            :precision="2"
+            class="w-full"
+          />
+        </NFormItemGi>
+
+        <NFormItemGi label="提现手续费率" path="withdrawFeeRate">
+          <NInputNumber
+            v-model:value="tempValues.withdrawFeeRate"
+            placeholder="请输入提现手续费率"
+            :min="0"
+            :max="100"
+            :precision="4"
+            class="w-full"
+          >
+            <template #suffix>%</template>
+          </NInputNumber>
+        </NFormItemGi>
+      </NGrid>
+
+      <NFormItem label="排序" path="sortOrder">
+        <NInputNumber v-model:value="tempValues.sortOrder" placeholder="请输入排序" :min="0" class="w-full" />
+      </NFormItem>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi label="是否可交易">
+          <NSwitch v-model:value="formModel.tradeEnabled" />
+        </NFormItemGi>
+
+        <NFormItemGi label="是否可转账">
+          <NSwitch v-model:value="formModel.transferEnabled" />
+        </NFormItemGi>
+
+        <NFormItemGi label="是否可提现">
+          <NSwitch v-model:value="formModel.withdrawEnabled" />
+        </NFormItemGi>
+
+        <NFormItemGi label="是否可充值">
+          <NSwitch v-model:value="formModel.depositEnabled" />
+        </NFormItemGi>
+
+        <NFormItemGi label="是否启用">
+          <NSwitch v-model:value="formModel.isActive" />
+        </NFormItemGi>
+
+        <NFormItemGi label="是否为 RWA 资产">
+          <NSwitch v-model:value="formModel.isRwaAsset" />
+        </NFormItemGi>
+      </NGrid>
+
+      <NSpace justify="end">
+        <NButton type="primary" ghost @click="handleCancel">取消</NButton>
+        <NButton type="primary" :loading="loading" @click="handleSubmit">创建</NButton>
+      </NSpace>
+    </NForm>
+  </div>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/views/asset/components/edit.vue b/src/views/asset/components/edit.vue
new file mode 100644
index 0000000..e751edf
--- /dev/null
+++ b/src/views/asset/components/edit.vue
@@ -0,0 +1,218 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import type { FormInst, FormItemRule } from 'naive-ui';
+import { NButton, NForm, NFormItem, NFormItemGi, NGrid, NInput, NInputNumber, NSpace, NSwitch } from 'naive-ui';
+import { client, safeClient } from '@/service/api';
+
+type Asset = CommonType.TreatyBody<typeof client.api.admin.assets.post>;
+
+defineOptions({
+  name: 'AssetEdit'
+});
+
+const props = defineProps<{
+  data: Asset;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const formRef = ref<FormInst | null>(null);
+const loading = ref(false);
+
+const formModel = reactive<Partial<Asset>>({
+  code: props.data.code,
+  name: props.data.name,
+  iconUrl: props.data.iconUrl,
+  maxWithdrawPerDay: props.data.maxWithdrawPerDay,
+  maxWithdrawPerTx: props.data.maxWithdrawPerTx,
+  minDeposit: props.data.minDeposit,
+  minWithdraw: props.data.minWithdraw,
+  withdrawFeeFixed: props.data.withdrawFeeFixed,
+  withdrawFeeRate: props.data.withdrawFeeRate,
+  tradeEnabled: props.data.tradeEnabled,
+  transferEnabled: props.data.transferEnabled,
+  withdrawEnabled: props.data.withdrawEnabled,
+  depositEnabled: props.data.depositEnabled,
+  isActive: props.data.isActive,
+  isRwaAsset: props.data.isRwaAsset,
+  sortOrder: props.data.sortOrder
+});
+
+// 用于表单输入的临时数字值
+const tempValues = ref({
+  maxWithdrawPerDay: Number(props.data.maxWithdrawPerDay) || 0,
+  maxWithdrawPerTx: Number(props.data.maxWithdrawPerTx) || 0,
+  minDeposit: Number(props.data.minDeposit) || 0,
+  minWithdraw: Number(props.data.minWithdraw) || 0,
+  withdrawFeeFixed: Number(props.data.withdrawFeeFixed) || 0,
+  withdrawFeeRate: Number(props.data.withdrawFeeRate) * 100 || 0, // 转换为百分比
+  sortOrder: Number(props.data.sortOrder) || 0
+});
+
+const rules: Record<string, FormItemRule | FormItemRule[]> = {
+  code: { required: true, message: '请输入资产代码', trigger: 'blur' },
+  name: { required: true, message: '请输入资产名称', trigger: 'blur' },
+  iconUrl: { required: true, message: '请输入图标地址', trigger: 'blur' },
+  minDeposit: { required: true, message: '请输入最小充值金额', trigger: 'blur' },
+  minWithdraw: { required: true, message: '请输入最小提现金额', trigger: 'blur' },
+  withdrawFeeFixed: { required: true, message: '请输入提现固定手续费', trigger: 'blur' },
+  withdrawFeeRate: { required: true, message: '请输入提现手续费率', trigger: 'blur' }
+};
+
+// 同步数字输入到表单字符串
+function syncNumberToString() {
+  formModel.maxWithdrawPerDay = tempValues.value.maxWithdrawPerDay.toString();
+  formModel.maxWithdrawPerTx = tempValues.value.maxWithdrawPerTx.toString();
+  formModel.minDeposit = tempValues.value.minDeposit.toString();
+  formModel.minWithdraw = tempValues.value.minWithdraw.toString();
+  formModel.withdrawFeeFixed = tempValues.value.withdrawFeeFixed.toString();
+  formModel.withdrawFeeRate = (tempValues.value.withdrawFeeRate / 100).toString(); // 转回小数
+  formModel.sortOrder = tempValues.value.sortOrder;
+}
+
+async function handleSubmit() {
+  syncNumberToString();
+  await formRef.value?.validate();
+  loading.value = true;
+  await safeClient(() =>
+    client.api.admin.assets({ code: props.data.code }).patch({
+      ...formModel
+    })
+  );
+  loading.value = false;
+  window.$message?.success('更新成功');
+  emit('close');
+}
+
+function handleCancel() {
+  emit('close');
+}
+</script>
+
+<template>
+  <div class="my-10">
+    <NForm ref="formRef" :model="formModel" :rules="rules" label-placement="left" :label-width="140">
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi label="资产代码" path="code">
+          <NInput v-model:value="formModel.code" placeholder="请输入资产代码" />
+        </NFormItemGi>
+
+        <NFormItemGi label="资产名称" path="name">
+          <NInput v-model:value="formModel.name" placeholder="请输入资产名称" />
+        </NFormItemGi>
+      </NGrid>
+
+      <NFormItem label="图标地址" path="iconUrl">
+        <IconPicker v-model="formModel.iconUrl" :collections="['cryptocurrency-color']" />
+      </NFormItem>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi label="每日最大提现金额" path="maxWithdrawPerDay">
+          <NInputNumber
+            v-model:value="tempValues.maxWithdrawPerDay"
+            placeholder="请输入每日最大提现金额"
+            :min="0"
+            :precision="2"
+            class="w-full"
+          />
+        </NFormItemGi>
+
+        <NFormItemGi label="单笔最大提现金额" path="maxWithdrawPerTx">
+          <NInputNumber
+            v-model:value="tempValues.maxWithdrawPerTx"
+            placeholder="请输入单笔最大提现金额"
+            :min="0"
+            :precision="2"
+            class="w-full"
+          />
+        </NFormItemGi>
+      </NGrid>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi label="最小充值金额" path="minDeposit">
+          <NInputNumber
+            v-model:value="tempValues.minDeposit"
+            placeholder="请输入最小充值金额"
+            :min="0"
+            :precision="2"
+            class="w-full"
+          />
+        </NFormItemGi>
+
+        <NFormItemGi label="最小提现金额" path="minWithdraw">
+          <NInputNumber
+            v-model:value="tempValues.minWithdraw"
+            placeholder="请输入最小提现金额"
+            :min="0"
+            :precision="2"
+            class="w-full"
+          />
+        </NFormItemGi>
+      </NGrid>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi label="提现固定手续费" path="withdrawFeeFixed">
+          <NInputNumber
+            v-model:value="tempValues.withdrawFeeFixed"
+            placeholder="请输入提现固定手续费"
+            :min="0"
+            :precision="2"
+            class="w-full"
+          />
+        </NFormItemGi>
+
+        <NFormItemGi label="提现手续费率" path="withdrawFeeRate">
+          <NInputNumber
+            v-model:value="tempValues.withdrawFeeRate"
+            placeholder="请输入提现手续费率"
+            :min="0"
+            :max="100"
+            :precision="4"
+            class="w-full"
+          >
+            <template #suffix>%</template>
+          </NInputNumber>
+        </NFormItemGi>
+      </NGrid>
+
+      <NFormItem label="排序" path="sortOrder">
+        <NInputNumber v-model:value="tempValues.sortOrder" placeholder="请输入排序" :min="0" class="w-full" />
+      </NFormItem>
+
+      <NGrid :cols="2" :x-gap="12">
+        <NFormItemGi label="是否可交易">
+          <NSwitch v-model:value="formModel.tradeEnabled" />
+        </NFormItemGi>
+
+        <NFormItemGi label="是否可转账">
+          <NSwitch v-model:value="formModel.transferEnabled" />
+        </NFormItemGi>
+
+        <NFormItemGi label="是否可提现">
+          <NSwitch v-model:value="formModel.withdrawEnabled" />
+        </NFormItemGi>
+
+        <NFormItemGi label="是否可充值">
+          <NSwitch v-model:value="formModel.depositEnabled" />
+        </NFormItemGi>
+
+        <NFormItemGi label="是否启用">
+          <NSwitch v-model:value="formModel.isActive" />
+        </NFormItemGi>
+
+        <NFormItemGi label="是否为 RWA 资产">
+          <NSwitch v-model:value="formModel.isRwaAsset" />
+        </NFormItemGi>
+      </NGrid>
+
+      <NSpace justify="end">
+        <NButton type="primary" ghost @click="handleCancel">取消</NButton>
+        <NButton type="primary" :loading="loading" @click="handleSubmit">提交</NButton>
+      </NSpace>
+    </NForm>
+  </div>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/views/asset/index.vue b/src/views/asset/index.vue
index fa45ac2..6657606 100644
--- a/src/views/asset/index.vue
+++ b/src/views/asset/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { useTemplateRef } from 'vue';
+import { h, useTemplateRef } from 'vue';
+import { useDateFormat } from '@vueuse/core';
+import { NSelect, useDialog } from 'naive-ui';
 import { client, safeClient } from '@/service/api';
 import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+import Edit from './components/edit.vue';
+import Add from './components/add.vue';
 
+const dialog = useDialog();
 const tableInst = useTemplateRef<TableInst>('tableInst');
 
 const fetchData: TableFetchData = ({ pagination, filter }) => {
@@ -15,37 +21,210 @@ const fetchData: TableFetchData = ({ pagination, filter }) => {
 
 const columns: TableBaseColumns = [
   {
-    title: 'ID',
-    key: 'id'
+    title: '代码',
+    key: 'code',
+    fixed: 'left'
   },
   {
-    title: '资产代码',
-    key: 'assetCode'
+    title: '名称',
+    key: 'name'
+  },
+
+  {
+    title: '图标',
+    key: 'iconUrl',
+    width: 80,
+    render: (row: any) => {
+      return h(SvgIcon, { icon: row.iconUrl, class: 'w-6 h-6' });
+    }
   },
   {
-    title: '资产名称',
-    key: 'assetName'
+    title: '每日最大提现金额',
+    key: 'maxWithdrawPerDay',
+    render: (row: any) => {
+      return Number(row.maxWithdrawPerDay).toFixed(2) ?? '无限制';
+    }
   },
   {
-    title: '资产类型',
-    key: 'assetType'
+    title: '单笔最大提现金额',
+    key: 'maxWithdrawPerTx',
+    render: (row: any) => {
+      return Number(row.maxWithdrawPerTx).toFixed(2) ?? '无限制';
+    }
+  },
+  {
+    title: '最小充值金额',
+    key: 'minDeposit',
+    render: (row: any) => {
+      return Number(row.minDeposit).toFixed(2);
+    }
+  },
+  {
+    title: '最小提现金额',
+    key: 'minWithdraw',
+    render: (row: any) => {
+      return Number(row.minWithdraw).toFixed(2);
+    }
+  },
+
+  {
+    title: '提现固定手续费',
+    key: 'withdrawFeeFixed',
+    render: (row: any) => {
+      return Number(row.withdrawFeeFixed).toFixed(2);
+    }
+  },
+  {
+    title: '提现手续费率',
+    key: 'withdrawFeeRate',
+    render: (row: any) => {
+      return `${Number(row.withdrawFeeRate).toFixed(4)}%`;
+    }
+  },
+  {
+    title: '是否可交易',
+    key: 'tradeEnabled',
+    render: (row: any) => {
+      return row.tradeEnabled ? '是' : '否';
+    }
+  },
+  {
+    title: '是否可转账',
+    key: 'transferEnabled',
+    render: (row: any) => {
+      return row.transferEnabled ? '是' : '否';
+    }
+  },
+  {
+    title: '是否可提现',
+    key: 'withdrawEnabled',
+    render: (row: any) => {
+      return row.withdrawEnabled ? '是' : '否';
+    }
+  },
+  {
+    title: '是否可充值',
+    key: 'depositEnabled',
+    render: (row: any) => {
+      return row.depositEnabled ? '是' : '否';
+    }
+  },
+  {
+    title: '是否启用',
+    key: 'isActive',
+    render: (row: any) => {
+      return row.isActive ? '是' : '否';
+    }
+  },
+  {
+    title: '是否为 RWA 资产',
+    key: 'isRwaAsset',
+    render: (row: any) => {
+      return row.isRwaAsset ? '是' : '否';
+    }
+  },
+  {
+    title: '排序',
+    key: 'sortOrder'
   },
   {
     title: '创建时间',
-    key: 'createdAt'
+    key: 'createdAt',
+    render: (row: any) => {
+      return useDateFormat(row.createdAt, 'YYYY-MM-DD HH:mm').value;
+    }
+  },
+  {
+    title: '操作',
+    fixed: 'right',
+    key: 'operation',
+    width: 200,
+    operations: (row: any) => [
+      {
+        contentText: '编辑',
+        ghost: true,
+        size: 'small',
+        onClick: () => {
+          handleEdit(row);
+        }
+      },
+      {
+        contentText: '删除',
+        ghost: true,
+        type: 'error',
+        size: 'small',
+        onClick: () => {
+          dialog.create({
+            title: '删除确认',
+            content: '确认删除该资产吗，删除后不可恢复。',
+            positiveText: '确认',
+            negativeText: '取消',
+            onPositiveClick: async () => {
+              await safeClient(() => client.api.admin.assets({ code: row.code }).delete());
+              tableInst.value?.reload();
+            }
+          });
+        }
+      }
+    ]
   }
 ];
 
 const filterColumns: TableFilterColumns = [
   {
     title: '资产代码',
-    key: 'assetCode'
+    key: 'code'
   },
   {
     title: '资产名称',
-    key: 'assetName'
+    key: 'name'
+  },
+  {
+    title: '是否激活',
+    key: 'isActive',
+    component: NSelect,
+    componentProps: {
+      placeholder: '请选择状态',
+      clearable: true,
+      options: [
+        { label: '激活', value: true },
+        { label: '未激活', value: false }
+      ]
+    }
   }
 ];
+function handleAdd() {
+  const dialogInstance = dialog.create({
+    title: '新建资产',
+    showIcon: false,
+    content: () =>
+      h(Add, {
+        onClose: () => {
+          dialogInstance?.destroy();
+          tableInst.value?.reload();
+        }
+      }),
+    style: { width: '800px' },
+    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>
@@ -55,6 +234,8 @@ const filterColumns: TableFilterColumns = [
     :fetch-data="fetchData"
     show-header-operation
     :filter-columns="filterColumns"
+    :scroll-x="3000"
+    @add="handleAdd"
   />
 </template>