diff --git b/api.ts a/api.ts
new file mode 100644
index 0000000..76fdf78
--- /dev/null
+++ a/api.ts
@@ -0,0 +1,30 @@
+import type { http } from "@/typing/http";
+import { ARCHIVES_HOST } from "@/utils/host";
+import request from "@/utils/request";
+
+/**
+ * @description: 分页获取<feewee>替换name</feewee>
+ * @param {<feewee>替换name</feewee>.QueryParams} params
+ * @return {http.PromisePageResp<<feewee>替换name</feewee>.ListVO>}
+ */
+export function get<feewee>替换name</feewee>ListApi(params: <feewee>替换name</feewee>.QueryParams): http.PromisePageResp<<feewee>替换name</feewee>.ListVO> {
+  return request.get(`API url`, { params });
+}
+
+/**
+ * @description: 保存<feewee>替换name</feewee>
+ * @param {<feewee>替换name</feewee>.ListVO} params
+ * @return {http.PromiseResp<string>}
+ */
+export function save<feewee>替换name</feewee>Api(params: <feewee>替换name</feewee>.ListVO): http.PromiseResp<string> {
+  return request.post(`API url`, params);
+}
+
+/**
+ * @description: 删除<feewee>替换name</feewee>
+ * @param {number} id
+ * @return {http.PromiseResp<string>}
+ */
+export function delete<feewee>替换name</feewee>Api(id: number): http.PromiseResp<string> {
+  return request.get(`API url`, { params: { id } });
+}
diff --git b/components/Filter.tsx a/components/Filter.tsx
new file mode 100644
index 0000000..b678ebe
--- /dev/null
+++ a/components/Filter.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { Button, Row, Input } from "antd";
+import { PlusOutlined } from "@ant-design/icons";
+import { useStore } from "../index";
+import FeeweeFilterOption from "@/pages/notice/components/FeeweeFilterOption";
+
+export default function Filter() {
+  const { pagination, setOpen } = useStore();
+
+  return (
+    <Row justify="space-between" style={{ marginBottom: 10 }}>
+      <div
+        style={{
+          display: "flex",
+          flex: 1,
+          justifyContent: "start",
+          flexWrap: "wrap",
+          gap: 10,
+        }}
+      >
+        <FeeweeFilterOption title="关键字">
+          <Input.Search
+            style={{ minWidth: 260 }}
+            allowClear
+            placeholder="请输入关键字搜索"
+            value={pagination.innerParams.keyWords}
+            onChange={(e) => pagination.setParams({ keyWords: e.target.value })}
+            onSearch={() => pagination.setParams({ current: 1 }, true)}
+          />
+        </FeeweeFilterOption>
+      </div>
+      <Button
+        icon={<PlusOutlined />}
+        type="primary"
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        新增
+      </Button>
+    </Row>
+  );
+}
diff --git b/components/List.tsx a/components/List.tsx
new file mode 100644
index 0000000..f1e7ae1
--- /dev/null
+++ a/components/List.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { Divider, message, Popconfirm, Popover, Table } from "antd";
+import { delete<feewee>替换name</feewee>Api } from "../api";
+import { useStore } from "../index";
+
+export default function List() {
+  const { pagination, setCurrent, setOpen } = useStore();
+
+  function editItem(item: <feewee>替换name</feewee>.ListVO) {
+    setCurrent(item);
+    setOpen(true);
+  }
+
+  function deleteItem(id: number) {
+    const hide = message.loading('删除中，请稍后...', 0);
+    delete<feewee>替换name</feewee>Api(id)
+      .then((res) => {
+        hide();
+        message.success(res.result);
+        pagination.setLoading(true);
+      })
+      .catch((error) => {
+        hide();
+        message.error(error.message);
+      });
+  }
+
+  return (
+    <Table dataSource={pagination.list} rowKey="id" loading={pagination.loading} pagination={pagination.paginationConfig}>
+      <Table.Column title="name" align="left" dataIndex="name" />
+      <Table.Column
+        title="操作"
+        align="left"
+        render={(record: <feewee>替换name</feewee>.ListVO) => (
+          <>
+            <a>编辑</a>
+            <Divider type="vertical" />
+            <Popconfirm title={<span>确定删除？</span>} onConfirm={() => deleteItem(record.id || -1)}>
+              <a style={{ color: 'red' }}>删除</a>
+            </Popconfirm>
+          </>
+        )}
+      />
+    </Table>
+  );
+}
diff --git b/components/Modal.tsx a/components/Modal.tsx
new file mode 100644
index 0000000..62e9113
--- /dev/null
+++ a/components/Modal.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import { Form, Input, message, Modal as AntdModal, Spin } from "antd";
+import { save<feewee>替换name</feewee>Api } from "../api";
+import { useStore } from "../index";
+
+export default function Modal() {
+  const { pagination, current, setCurrent, open, setOpen } = useStore();
+  const [form] = Form.useForm();
+  const [confirmLoading, setConfirmLoading] = useState(false);
+
+  useEffect(() => {
+    if (open && current) {
+      form.setFieldsValue(current);
+    } else {
+      form.resetFields();
+    }
+  }, [open, current]);
+
+  function onOk(val: any) {
+    const hide = message.loading('提交中，请稍后...', 0);
+    setConfirmLoading(true);
+    const params: <feewee>替换name</feewee>.ListVO = {
+      ...val,
+      id: current?.id,
+    };
+    save<feewee>替换name</feewee>Api(params)
+      .then((res) => {
+        hide();
+        setConfirmLoading(false);
+        message.success(res.result);
+        onCancel();
+        pagination.setLoading(true);
+      })
+      .catch((error) => {
+        hide();
+        setConfirmLoading(false);
+        message.error(error.message);
+      });
+  }
+
+  function onCancel() {
+    setCurrent(undefined);
+    setOpen(false);
+  }
+
+  return (
+    <AntdModal
+      title={`${current ? '编辑' : '添加'}<feewee>替换name</feewee>`}
+      open={open}
+      maskClosable={false}
+      onOk={form.submit}
+      confirmLoading={confirmLoading}
+      onCancel={onCancel}
+    >
+      <Spin spinning={confirmLoading}>
+        <Form form={form} onFinish={onOk}>
+          <Form.Item label="name" name="name" rules={[{ required: true, message: "请填写name" }]}>
+            <Input allowClear placeholder="请填写name" />
+          </Form.Item>
+        </Form>
+      </Spin>
+    </AntdModal>
+  );
+}
diff --git b/index.tsx a/index.tsx
new file mode 100644
index 0000000..24f1519
--- /dev/null
+++ a/index.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { ConfigProvider } from "antd";
+import zhCN from "antd/lib/locale-provider/zh_CN";
+import { PageHeaderWrapper } from "@ant-design/pro-layout";
+import { createStore } from "@/hooks/moz";
+import store from './store';
+import Filter from './components/Filter';
+import List from './components/List';
+import Modal from './components/Modal';
+
+export const { Provider, useStore } = createStore(store);
+
+export default () => <Provider><<feewee>替换name</feewee> /></Provider>;
+
+function <feewee>替换name</feewee>() {
+  return (
+    <PageHeaderWrapper title="不购买商业险白名单">
+      <ConfigProvider locale={zhCN}>
+        <Card bordered={false}>
+          <Filter />
+          <List />
+          <Modal />
+        </Card>
+      </ConfigProvider>
+    </PageHeaderWrapper>
+  );
+}
diff --git b/interface.d.ts a/interface.d.ts
new file mode 100644
index 0000000..5ab3f23
--- /dev/null
+++ a/interface.d.ts
@@ -0,0 +1,5 @@
+declare namespace <feewee>替换name</feewee> {
+  interface QueryParams {}
+
+  interface ListVO {}
+}
diff --git b/store.ts a/store.ts
new file mode 100644
index 0000000..22d6f90
--- /dev/null
+++ a/store.ts
@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import usePagination from "@/hooks/usePagination";
+import { get<feewee>替换name</feewee>ListApi } from "./api";
+
+export default function useStore() {
+  const pagination = usePagination(get<feewee>替换name</feewee>ListApi);
+  const [open, setOpen] = useState(false);
+  const [current, setCurrent] = useState<<feewee>替换name</feewee>.ListVO>();
+
+  return {
+    pagination,
+    open,
+    setOpen,
+    current,
+    setCurrent,
+  };
+}