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..80178c41c39c5bde075f42e5bda555441afc68af
--- /dev/null
+++ b/pages/api/save.ts
@@ -0,0 +1,13 @@
+import { message } from 'antd';
+import { NextApiRequest, NextApiResponse } from 'next'
+
+
+
+
+export default async function handle(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { body } = req
+  return res.status(200).json({ success: false, message: '保存失败', body})
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index bf45bcde54cc8460c6916ffd30abe51ce42d76cb..cce58176852f8435abc8d1ffb1d477b255bfc0b6 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,7 @@
+
 import type { NextPage } from 'next'
 import React, { useState, useEffect } from 'react';
-import { Form, Input, InputNumber, Popconfirm, Table, Typography } from 'antd';
+import { Form, Input, InputNumber, Popconfirm, Table, Typography, message } from 'antd';
 
 interface Item {
   key: string;
@@ -61,20 +62,65 @@ const Home: React.FC = () => {
 
   const isEditing = (record: Item) => record.key === editingKey;
 
+  const getList = () => {
+    fetch('/api/optionAmount').then(response => {
+      return response.json()
+    }).then(data => {
+      // console.log(data)
+      const arr = data.data || [];
+      arr.map(item => {
+        item.age= +((new Date().getTime() - new Date(item.age).getTime())/(365*24*3600000)).toFixed(0)
+      })
+      setData(data.data || [])
+      setEditingKey('')
+    })
+  }
+
   useEffect(() => {
     console.log('home')
-    
+    getList()
   }, [])
   const edit = (record: Partial<Item> & { key: React.Key }) => {
     console.log('edit')
+    form.setFieldsValue({
+      name: '',
+      age: '',
+      address: '',
+      ...record
+    })
+    setEditingKey(record.key)
   };
 
   const cancel = () => {
     console.log('cancel')
+    setEditingKey('')
   };
 
   const save = async (key: React.Key) => {
     console.log('save')
+    form.validateFields().then(data => {
+      console.log(data)
+      if(data.age > 120) {
+        message.warning('年龄不能大于120')
+        return
+      }
+      fetch('/api/save', {
+        method: 'post',
+        body: JSON.stringify(data)
+      }).then(response => {
+        return response.json()
+      }).then(data => {
+        console.log(data)
+        if(data.success) {
+          getList()
+        }else{
+          message.warning(data.message)
+        }
+      }).catch((err) => {
+        console.log(err)
+        message.warning('保存失败！')       
+      })
+    })
   };