diff --git a/pages/api/optionAmount.ts b/pages/api/optionAmount.ts
index 8155b587d34f389f04dcf1ef34136fb23bc7535b..979021f940275282893b040bc32f516f33855dae 100644
--- a/pages/api/optionAmount.ts
+++ b/pages/api/optionAmount.ts
@@ -4,22 +4,47 @@ import { NextApiRequest, NextApiResponse } from 'next'
 interface Item {
   key: string;
   name: string;
-  age: number;
+  age: string;
   address: string;
+  uuid: string;
 }
 
+// 26 个英文字母 生成随机英文名
+const letters = 'abcdefghijklmnopqrstuvwxyz'.split('');
+const randomLetter = () => letters[Math.floor(Math.random() * 26)];
+const randomName = () => `${randomLetter()}${randomLetter()}${randomLetter()}${randomLetter()}${randomLetter()}`;
+// 随机生成 1980 ~ 2000年的年月日日期
+const randomDate = () => {
+  const start = new Date(1980, 1, 1);
+  const end = new Date(2000, 1, 1);
+  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleString();
+};
+// 随机生成 2~4位的汉字
+const randomChinese = () => {
+  const str = '兰亭临帖行书如行云流水月下门推心细如妳脚步碎忙不迭千年碑易拓却难拓妳的美真迹绝真心能给谁牧笛横吹黄酒小菜又几碟夕阳余晖如妳的羞怯似醉摹本易写而墨香不退与妳共留余味一行朱砂到底圈了谁';
+  let result = '';
+  for (let i = 0; i < Math.floor(Math.random() * 3) + 2; i++) {
+    result += str[Math.floor(Math.random() * 90)];
+  }
+  return result;
+};
+
+
 export default async function handle(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
   const { method, body } = req
   const originData: Item[] = [];
-  for (let i = 0; i < 100; i++) {
+  for (let i = 0; i < 5; i++) {
     originData.push({
       key: i.toString(),
-      name: `Edward ${i}`,
-      age: 32,
-      address: `London Park no. ${i}`,
+      // 生成随机中文名字
+      uuid: Math.random().toString(36).substr(2, 5).toUpperCase(),
+      // 随机生成英文姓名
+      name: randomChinese(),
+      age: randomDate(),
+      address: `百度大厦. ${i} 号院`,
     });
   }
 
diff --git a/pages/api/save.ts b/pages/api/save.ts
new file mode 100644
index 0000000000000000000000000000000000000000..274be44b61fe238cdba9d65c11c28753021948d7
--- /dev/null
+++ b/pages/api/save.ts
@@ -0,0 +1,10 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+
+export default async function handle(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { body } = req
+  return res.status(200).json({ success: true, message: '保存成功', body})
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index b2048a70a57d6eae4b312b957cc3c99d682498c9..b9b3f8c23e4ea00bd293dbf81f0ff8e2a5b6077d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,73 +1,148 @@
-import React, { useState, useEffect } from 'react';
-import { Popconfirm, Table, Typography } from 'antd';
+import React, { useState, useEffect } from 'react'
+import {
+  Popconfirm,
+  Table,
+  Typography,
+  Input,
+  InputNumber,
+  message,
+} from 'antd'
 
 interface Item {
-  key: string;
-  name: string;
-  age: number;
-  address: string;
+  key: string
+  name: string
+  age: number
+  address: string
 }
 
-const originData: Item[] = [];
+const originData: Item[] = []
 for (let i = 0; i < 100; i++) {
   originData.push({
     key: i.toString(),
     name: `Edward ${i}`,
     age: 32,
     address: `London Park no. ${i}`,
-  });
+  })
 }
 
-const Home: React.FC = () => {
-  const [data, setData] = useState(originData);
-  const [editingKey, setEditingKey] = useState('');
+const getTableData = async () => {
+  const res = await fetch('/api/optionAmount').then((res) => res.json())
+  if (res.success) {
+    return res.data
+  }
+  return []
+}
+
+const updateItem = async (messageApi: any, item: Item) => {
+  const res = await fetch('/api/save', {
+    method: 'post',
+    body: JSON.stringify(item),
+  })
 
+  if (res.success) {
+    messageApi.success('success')
+  }
+}
+
+const Home: React.FC = () => {
+  const [messageApi, contextHolder] = message.useMessage()
 
-  const isEditing = (record: Item) => record.key === editingKey;
+  const [data, setData] = useState(originData)
+  const [editingKey, setEditingKey] = useState('')
+  const [itemData, setItemData] = useState<any>()
+  const isEditing = (record: Item) => record.key === editingKey
 
   useEffect(() => {
     console.log('home')
+    getTableData().then((resData) => {
+      const tableData = resData.map((item: any) => {
+        const age =
+          new Date().getFullYear() -
+          new Date('1995-7-24 09:13:10').getFullYear()
+        return {
+          ...item,
+          age,
+        }
+      })
+
+      setData(tableData)
+    })
   }, [])
+
   const edit = (record: Partial<Item> & { key: React.Key }) => {
+    setEditingKey(record.key)
+    setItemData(record)
     console.log('edit')
-  };
+  }
 
   const cancel = () => {
-    setEditingKey('取消');
-  };
+    setEditingKey('取消')
+  }
 
   const save = async (key: React.Key) => {
     console.log('save')
-  };
 
+    updateItem(messageApi, itemData)
+  }
 
   const columns = [
     {
       title: 'name',
       dataIndex: 'name',
       width: '25%',
-      editable: true,
+      render: (text: any, record: Item) => {
+        return (
+          <>
+            {!isEditing(record) && <span>{text}</span>}
+            {isEditing(record) && (
+              <Input
+                value={itemData.name}
+                onChange={(e) => {
+                  setItemData({ ...itemData, name: e.target.value })
+                }}
+              />
+            )}
+          </>
+        )
+      },
     },
     {
       title: 'age',
       dataIndex: 'age',
       width: '15%',
-      editable: true,
+      render: (text: any, record: Item) => {
+        return (
+          <>
+            {!isEditing(record) && <span>{text}</span>}
+            {isEditing(record) && (
+              <InputNumber
+                value={itemData.age}
+                onChange={(val) => {
+                  console.log(val)
+                  setItemData({ ...itemData, age: val })
+                }}
+              />
+            )}
+          </>
+        )
+      },
     },
     {
       title: 'address',
       dataIndex: 'address',
       width: '40%',
-      editable: true,
     },
     {
       title: 'operation',
       dataIndex: 'operation',
       render: (_: any, record: Item) => {
-        const editable = isEditing(record);
+        const editable = isEditing(record)
         return editable ? (
           <span>
-            <Typography.Link onClick={() => save(record.key)} style={{ marginRight: 8 }}>
+            <Typography.Link
+              onClick={() => save(record.key)}
+              style={{ marginRight: 8 }}
+            >
               Save
             </Typography.Link>
             <Popconfirm title="Sure to cancel?" onConfirm={cancel}>
@@ -75,26 +150,28 @@ const Home: React.FC = () => {
             </Popconfirm>
           </span>
         ) : (
-          <Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
+          <Typography.Link
+            disabled={editingKey !== ''}
+            onClick={() => edit(record)}
+          >
             Edit
           </Typography.Link>
-        );
+        )
       },
     },
-  ];
-
+  ]
 
   return (
-      <Table
-        bordered
-        dataSource={data}
-        columns={columns}
-        rowClassName="editable-row"
-        pagination={{
-          onChange: cancel,
-        }}
-      />
-  );
-};
+    <Table
+      bordered
+      dataSource={data}
+      columns={columns}
+      rowClassName="editable-row"
+      pagination={{
+        onChange: cancel,
+      }}
+    />
+  )
+}
 
 export default Home