From afb52e1a73070b0ea1a508d23e47d092d43019fc Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Thu, 8 Jan 2026 23:25:17 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=96=B0=E9=97=BB?=
 =?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?=E6=96=B0=E9=97=BB=E7=9A=84=E5=88=9B=E5=BB=BA=E3=80=81=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=92=8C=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA=EF=BC=8C?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=9B=B8=E5=85=B3=E8=B7=AF=E7=94=B1=E5=92=8C?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                       |   2 +-
 pnpm-lock.yaml                     |  12 +-
 src/router/elegant/imports.ts      |   1 +
 src/router/elegant/routes.ts       |   9 ++
 src/router/elegant/transform.ts    |   1 +
 src/typings/elegant-router.d.ts    |   3 +
 src/views/news/components/add.vue  | 200 ++++++++++++++++++++++++++++
 src/views/news/components/edit.vue | 202 +++++++++++++++++++++++++++++
 src/views/news/index.vue           | 191 +++++++++++++++++++++++++++
 9 files changed, 614 insertions(+), 7 deletions(-)
 create mode 100644 src/views/news/components/add.vue
 create mode 100644 src/views/news/components/edit.vue
 create mode 100644 src/views/news/index.vue

diff --git a/package.json b/package.json
index ec4960c..bb4d352 100644
--- 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.7:9527/api/riwa-eden-0.0.102.tgz",
+    "@riwa/api-types": "http://192.168.1.7:9527/api/riwa-eden-0.0.107.tgz",
     "@sa/axios": "workspace:*",
     "@sa/color": "workspace:*",
     "@sa/hooks": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 34f220f..b4d4a85 100644
--- 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.7:9527/api/riwa-eden-0.0.102.tgz
-        version: '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.102.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.7:9527/api/riwa-eden-0.0.107.tgz
+        version: '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.107.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
@@ -1083,9 +1083,9 @@ packages:
   '@quansync/fs@0.1.6':
     resolution: {integrity: sha512-zoA8SqQO11qH9H8FCBR7NIbowYARIPmBz3nKjgAaOUDi/xPAAu1uAgebtV7KXHTc6CDZJVRZ1u4wIGvY5CWYaw==}
 
-  '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.102.tgz':
-    resolution: {tarball: http://192.168.1.7:9527/api/riwa-eden-0.0.102.tgz}
-    version: 0.0.102
+  '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.107.tgz':
+    resolution: {tarball: http://192.168.1.7:9527/api/riwa-eden-0.0.107.tgz}
+    version: 0.0.107
     peerDependencies:
       '@elysiajs/eden': ^1.4.5
 
@@ -5080,7 +5080,7 @@ snapshots:
     dependencies:
       quansync: 0.3.0
 
-  '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.102.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/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.107.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))
 
diff --git a/src/router/elegant/imports.ts b/src/router/elegant/imports.ts
index 3e4d1c9..ba095be 100644
--- a/src/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@@ -24,6 +24,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   bank: () => import("@/views/bank/index.vue"),
   deposit_fiat: () => import("@/views/deposit/fiat/index.vue"),
   home: () => import("@/views/home/index.vue"),
+  news: () => import("@/views/news/index.vue"),
   notification: () => import("@/views/notification/index.vue"),
   rwa_product: () => import("@/views/rwa/product/index.vue"),
   rwa_producttype: () => import("@/views/rwa/productType/index.vue"),
diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts
index 76d0298..ee0b932 100644
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -116,6 +116,15 @@ export const generatedRoutes: GeneratedRoute[] = [
       hideInMenu: true
     }
   },
+  {
+    name: 'news',
+    path: '/news',
+    component: 'layout.base$view.news',
+    meta: {
+      title: 'news',
+      i18nKey: 'route.news'
+    }
+  },
   {
     name: 'notification',
     path: '/notification',
diff --git a/src/router/elegant/transform.ts b/src/router/elegant/transform.ts
index ab462eb..2a8b4be 100644
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@@ -173,6 +173,7 @@ const routeMap: RouteMap = {
   "home": "/home",
   "iframe-page": "/iframe-page/:url",
   "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
+  "news": "/news",
   "notification": "/notification",
   "rwa": "/rwa",
   "rwa_product": "/rwa/product",
diff --git a/src/typings/elegant-router.d.ts b/src/typings/elegant-router.d.ts
index b47155a..5422faf 100644
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@@ -27,6 +27,7 @@ declare module "@elegant-router/types" {
     "home": "/home";
     "iframe-page": "/iframe-page/:url";
     "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
+    "news": "/news";
     "notification": "/notification";
     "rwa": "/rwa";
     "rwa_product": "/rwa/product";
@@ -82,6 +83,7 @@ declare module "@elegant-router/types" {
     | "home"
     | "iframe-page"
     | "login"
+    | "news"
     | "notification"
     | "rwa"
     | "tokenization"
@@ -113,6 +115,7 @@ declare module "@elegant-router/types" {
     | "bank"
     | "deposit_fiat"
     | "home"
+    | "news"
     | "notification"
     | "rwa_product"
     | "rwa_producttype"
diff --git a/src/views/news/components/add.vue b/src/views/news/components/add.vue
new file mode 100644
index 0000000..f2a9480
--- /dev/null
+++ b/src/views/news/components/add.vue
@@ -0,0 +1,200 @@
+<script lang="ts" setup>
+import { computed, h, ref, useTemplateRef } from 'vue';
+import type { FormInst, FormRules } from 'naive-ui';
+import { NInput, useDialog } from 'naive-ui';
+import { client, safeClient } from '@/service/api';
+import UploadS3 from '@/components/upload/index.vue';
+
+defineOptions({ name: 'AddNews' });
+
+type Body = CommonType.TreatyBody<typeof client.api.admin.news.post>;
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const formRef = useTemplateRef<FormInst | null>('formRef');
+const dialog = useDialog();
+
+const form = ref<Body>({
+  title: '',
+  content: '',
+  categoryId: '',
+  attachmentIds: [],
+  isPinned: false
+});
+
+// 获取分类列表
+const { data: categories, execute: refreshCategories } = safeClient(() =>
+  client.api.admin.news_categories.get({
+    query: {
+      pageIndex: 1,
+      pageSize: 100
+    }
+  })
+);
+
+const categoryOptions = computed(
+  () =>
+    categories.value?.data.map(cat => ({
+      label: cat.name,
+      value: cat.id
+    })) || []
+);
+
+// 新增分类
+function handleAddCategory() {
+  const categoryName = ref('');
+
+  dialog.create({
+    title: '新增分类',
+    content: () =>
+      h('div', { class: 'py-4' }, [
+        h('div', { class: 'mb-2 text-14px' }, '分类名称'),
+        h(NInput, {
+          value: categoryName.value,
+          placeholder: '请输入分类名称',
+          'onUpdate:value': (val: string) => {
+            categoryName.value = val;
+          }
+        })
+      ]),
+    positiveText: '创建',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      if (!categoryName.value.trim()) {
+        window.$message?.error('请输入分类名称');
+        return false;
+      }
+      const { data } = await safeClient(() =>
+        client.api.admin.news_categories.post({
+          name: categoryName.value
+        })
+      );
+      if (data) {
+        window.$message?.success('分类创建成功');
+        await refreshCategories();
+        form.value.categoryId = data.value?.id;
+      }
+    }
+  });
+}
+
+const rules: FormRules = {
+  title: [
+    {
+      required: true,
+      message: '请输入新闻标题',
+      trigger: ['blur', 'input']
+    },
+    {
+      min: 2,
+      max: 200,
+      message: '标题长度应在2-200个字符之间',
+      trigger: ['blur', 'input']
+    }
+  ],
+  content: [
+    {
+      required: true,
+      message: '请输入新闻内容',
+      trigger: ['blur', 'input']
+    },
+    {
+      min: 10,
+      message: '内容至少10个字符',
+      trigger: ['blur', 'input']
+    }
+  ],
+  categoryId: [
+    {
+      required: true,
+      message: '请选择新闻分类',
+      trigger: 'change'
+    }
+  ]
+};
+
+async function handleSubmit() {
+  formRef.value?.validate(async errors => {
+    if (!errors) {
+      const { data } = await safeClient(() =>
+        client.api.admin.news.post({
+          ...form.value
+        })
+      );
+      if (data) {
+        window.$message?.success('新闻创建成功');
+        emit('close');
+      }
+    }
+  });
+}
+</script>
+
+<template>
+  <NForm
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    label-width="100px"
+    label-placement="left"
+    require-mark-placement="left"
+  >
+    <NFormItem label="新闻标题" path="title">
+      <NInput v-model:value="form.title" placeholder="请输入新闻标题" maxlength="200" show-count />
+    </NFormItem>
+
+    <NFormItem label="新闻分类" path="categoryId">
+      <NSelect v-model:value="form.categoryId" :options="categoryOptions" placeholder="请选择新闻分类" class="flex-1">
+        <template #action>
+          <div class="px-3 py-2">
+            <NButton size="small" type="primary" block @click.stop="handleAddCategory">
+              <template #icon>
+                <icon-ic-round-plus class="text-icon" />
+              </template>
+              新增分类
+            </NButton>
+          </div>
+        </template>
+      </NSelect>
+    </NFormItem>
+
+    <NFormItem label="新闻内容" path="content">
+      <NInput
+        v-model:value="form.content"
+        type="textarea"
+        placeholder="请输入新闻内容"
+        :rows="10"
+        maxlength="10000"
+        show-count
+      />
+    </NFormItem>
+
+    <NFormItem label="附件上传" path="attachmentIds">
+      <UploadS3
+        :model-value="form.attachmentIds || []"
+        :max-size="20"
+        :max-files="10"
+        accept="*/*"
+        placeholder="上传附件"
+        :fetch-options="{ businessType: 'other' }"
+        @update:model-value="evt => (form.attachmentIds = evt)"
+      />
+    </NFormItem>
+
+    <NFormItem label="置顶显示" path="isPinned">
+      <NSwitch v-model:value="form.isPinned">
+        <template #checked>是</template>
+        <template #unchecked>否</template>
+      </NSwitch>
+    </NFormItem>
+
+    <NSpace justify="end" class="mt-4">
+      <NButton @click="$emit('close')">取消</NButton>
+      <NButton type="primary" @click="handleSubmit">创建新闻</NButton>
+    </NSpace>
+  </NForm>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/views/news/components/edit.vue b/src/views/news/components/edit.vue
new file mode 100644
index 0000000..cd177f0
--- /dev/null
+++ b/src/views/news/components/edit.vue
@@ -0,0 +1,202 @@
+<script lang="ts" setup>
+import { computed, h, ref, useTemplateRef } from 'vue';
+import type { FormInst, FormRules } from 'naive-ui';
+import { NInput, useDialog } from 'naive-ui';
+import type { Treaty } from '@elysiajs/eden';
+import { client, safeClient } from '@/service/api';
+import UploadS3 from '@/components/upload/index.vue';
+
+defineOptions({ name: 'EditNews' });
+
+type Data = Treaty.Data<typeof client.api.admin.news.get>['data'][number];
+type Body = CommonType.TreatyBody<typeof client.api.admin.news.post>;
+
+const props = defineProps<{
+  data: Data;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const formRef = useTemplateRef<FormInst | null>('formRef');
+const dialog = useDialog();
+
+const form = ref<Body>({
+  ...props.data
+});
+
+// 获取分类列表
+const { data: categories, execute: refreshCategories } = safeClient(() =>
+  client.api.admin.news_categories.get({
+    query: {
+      pageIndex: 1,
+      pageSize: 100
+    }
+  })
+);
+
+const categoryOptions = computed(
+  () =>
+    categories.value?.data.map(cat => ({
+      label: cat.name,
+      value: cat.id
+    })) || []
+);
+
+// 新增分类
+function handleAddCategory() {
+  const categoryName = ref('');
+
+  dialog.create({
+    title: '新增分类',
+    content: () =>
+      h('div', { class: 'py-4' }, [
+        h('div', { class: 'mb-2 text-14px' }, '分类名称'),
+        h(NInput, {
+          value: categoryName.value,
+          placeholder: '请输入分类名称',
+          'onUpdate:value': (val: string) => {
+            categoryName.value = val;
+          }
+        })
+      ]),
+    positiveText: '创建',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      if (!categoryName.value.trim()) {
+        window.$message?.error('请输入分类名称');
+        return false;
+      }
+      const { data } = await safeClient(() =>
+        client.api.admin.news_categories.post({
+          name: categoryName.value
+        })
+      );
+      if (data) {
+        window.$message?.success('分类创建成功');
+        await refreshCategories();
+        form.value.categoryId = data.value?.id;
+      }
+    }
+  });
+}
+
+const rules: FormRules = {
+  title: [
+    {
+      required: true,
+      message: '请输入新闻标题',
+      trigger: ['blur', 'input']
+    },
+    {
+      min: 2,
+      max: 200,
+      message: '标题长度应在2-200个字符之间',
+      trigger: ['blur', 'input']
+    }
+  ],
+  content: [
+    {
+      required: true,
+      message: '请输入新闻内容',
+      trigger: ['blur', 'input']
+    },
+    {
+      min: 10,
+      message: '内容至少10个字符',
+      trigger: ['blur', 'input']
+    }
+  ],
+  categoryId: [
+    {
+      required: true,
+      message: '请选择新闻分类',
+      trigger: 'change'
+    }
+  ]
+};
+
+async function handleSubmit() {
+  formRef.value?.validate(async errors => {
+    if (!errors) {
+      const { data } = await safeClient(() =>
+        client.api.admin.news({ id: props.data.id }).patch({
+          ...form.value
+        })
+      );
+      if (data) {
+        window.$message?.success('新闻更新成功');
+        emit('close');
+      }
+    }
+  });
+}
+</script>
+
+<template>
+  <NForm
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    label-width="100px"
+    label-placement="left"
+    require-mark-placement="left"
+  >
+    <NFormItem label="新闻标题" path="title">
+      <NInput v-model:value="form.title" placeholder="请输入新闻标题" maxlength="200" show-count />
+    </NFormItem>
+
+    <NFormItem label="新闻分类" path="categoryId">
+      <NSelect v-model:value="form.categoryId" :options="categoryOptions" placeholder="请选择新闻分类" class="flex-1">
+        <template #action>
+          <div class="px-3 py-2">
+            <NButton size="small" type="primary" block @click.stop="handleAddCategory">
+              <template #icon>
+                <icon-ic-round-plus class="text-icon" />
+              </template>
+              新增分类
+            </NButton>
+          </div>
+        </template>
+      </NSelect>
+    </NFormItem>
+
+    <NFormItem label="新闻内容" path="content">
+      <NInput
+        v-model:value="form.content"
+        type="textarea"
+        placeholder="请输入新闻内容"
+        :rows="10"
+        maxlength="10000"
+        show-count
+      />
+    </NFormItem>
+
+    <NFormItem label="附件上传" path="attachmentIds">
+      <UploadS3
+        :model-value="form.attachmentIds || []"
+        :max-size="20"
+        :max-files="10"
+        accept="*/*"
+        placeholder="上传附件"
+        :fetch-options="{ businessType: 'news_attachment' }"
+        @update:model-value="evt => (form.attachmentIds = evt)"
+      />
+    </NFormItem>
+
+    <NFormItem label="置顶显示" path="isPinned">
+      <NSwitch v-model:value="form.isPinned">
+        <template #checked>是</template>
+        <template #unchecked>否</template>
+      </NSwitch>
+    </NFormItem>
+
+    <NSpace justify="end" class="mt-4">
+      <NButton @click="$emit('close')">取消</NButton>
+      <NButton type="primary" @click="handleSubmit">更新新闻</NButton>
+    </NSpace>
+  </NForm>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
new file mode 100644
index 0000000..25540d8
--- /dev/null
+++ b/src/views/news/index.vue
@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+import { h, useTemplateRef } from 'vue';
+import { useDateFormat } from '@vueuse/core';
+import { NButton, NSelect, NSpace, 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');
+const { data: categories } = safeClient(
+  client.api.admin.news_categories.get({
+    query: {
+      pageIndex: 1,
+      pageSize: 100
+    }
+  })
+);
+
+const fetchData: TableFetchData = ({ pagination, filter }) => {
+  return safeClient(() =>
+    client.api.admin.news.get({
+      query: {
+        ...pagination,
+        ...filter
+      }
+    })
+  );
+};
+
+const columns: TableBaseColumns = [
+  {
+    title: '新闻标题',
+    key: 'title',
+    width: 250,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '分类',
+    key: 'category.name',
+    width: 120
+  },
+  {
+    title: '内容预览',
+    key: 'content',
+    width: 300,
+    ellipsis: { tooltip: true }
+  },
+  {
+    title: '附件数',
+    key: 'attachmentIds',
+    width: 100,
+    render: (row: any) => row.attachmentIds?.length || 0
+  },
+  {
+    title: '置顶',
+    key: 'isPinned',
+    width: 80,
+    render: row =>
+      h(
+        NTag,
+        { type: row.isPinned ? 'warning' : 'default', size: 'small' },
+        { default: () => (row.isPinned ? '是' : '否') }
+      )
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    width: 180,
+    render: (row: any) => {
+      return useDateFormat(row.createdAt, 'YYYY-MM-DD HH:mm:ss').value;
+    }
+  },
+  {
+    title: '操作',
+    key: 'operations',
+    width: 150,
+    fixed: 'right',
+    render: (row: any) =>
+      h(
+        NSpace,
+        { size: 'small' },
+        {
+          default: () => [
+            h(
+              NButton,
+              {
+                size: 'small',
+                type: 'primary',
+                text: true,
+                onClick: () => handleEdit(row)
+              },
+              { default: () => '编辑' }
+            ),
+            h(
+              NButton,
+              {
+                size: 'small',
+                type: 'error',
+                text: true,
+                onClick: () => handleDelete(row.id)
+              },
+              { default: () => '删除' }
+            )
+          ]
+        }
+      )
+  }
+];
+
+const filterColumns: TableFilterColumns = [
+  {
+    key: 'isPinned',
+    title: '置顶状态',
+    component: NSelect,
+    componentProps: {
+      options: [
+        { label: '全部', value: '' },
+        { label: '已置顶', value: 'true' },
+        { label: '未置顶', value: 'false' }
+      ]
+    }
+  }
+];
+
+function handleAdd() {
+  const dialogInstance = dialog.create({
+    title: '创建新闻',
+    content: () =>
+      h(Add, {
+        onClose: () => {
+          dialogInstance.destroy();
+          tableInst.value?.reload();
+        }
+      }),
+    style: { width: '600px' },
+    showIcon: false
+  });
+}
+
+function handleEdit(row: any) {
+  const dialogInstance = dialog.create({
+    title: '编辑新闻',
+    content: () =>
+      h(Edit, {
+        data: row,
+        onClose: () => {
+          dialogInstance.destroy();
+          tableInst.value?.reload();
+        }
+      }),
+    style: { width: '800px' },
+    showIcon: false
+  });
+}
+
+function handleDelete(id: string) {
+  dialog.warning({
+    title: '确认删除',
+    content: '确定要删除这条新闻吗？此操作不可恢复。',
+    positiveText: '删除',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      const { data } = await safeClient(() =>
+        client.api.admin.news({ id }).delete({
+          params: { id }
+        })
+      );
+      if (data) {
+        window.$message?.success('删除成功');
+        tableInst.value?.reload();
+      }
+    }
+  });
+}
+</script>
+
+<template>
+  <TableBase
+    ref="tableInst"
+    show-header-operation
+    :columns="columns"
+    :filter-columns="filterColumns"
+    :fetch-data="fetchData"
+    :scroll-x="800"
+    @add="handleAdd"
+  />
+</template>
+
+<style lang="css" scoped></style>