diff --git a/src/api/auth/user.ts b/src/api/auth/user.ts
index e931a5741f474fd169110b38c67ca45ab1d286c5..7f47834a1c2941de3e45a66302ae822537d8a9f6 100644
--- a/src/api/auth/user.ts
+++ b/src/api/auth/user.ts
@@ -1,11 +1,19 @@
 import request from '@/utils/request'
-import { UserListParams } from '@/interface/auth/user'
+import { UserAddParams, UserListParams, UserListRes } from '@/interface/auth/user'
 
-/**
- * 获取用户列表
- * @param {UserListParams} data
- * return
- */
-export function getUserList(data: UserListParams): Promise<null> {
+// 获取用户列表
+export function getUserList(data: UserListParams): Promise<UserListRes> {
   return request.get('/api/auth/user/page', data)
 }
+// 新增用户
+export function addUserApi(data: UserAddParams) {
+  return request.post('/api/auth/user', data)
+}
+// 修改用户
+export function updateUserApi(id:number, data:UserAddParams) {
+  return request.put(`/api/auth/user/${id}`, data)
+}
+// 删除用户
+export function deleteUserApi(id:number) {
+  return request.delete(`/api/auth/user/${id}`)
+}
diff --git a/src/hooks/auth/user.ts b/src/hooks/auth/user.ts
index e897bad8c87b0fb8636a40c7cd4ea4bdfdfc62b5..db2aa9f32828d56fd30a5b2c43467fccf5d23ded 100644
--- a/src/hooks/auth/user.ts
+++ b/src/hooks/auth/user.ts
@@ -1,20 +1,25 @@
 import { getUserList } from '@/api/auth/user'
-import { useEffect, useState } from 'react'
-import { UserListParams } from '@/interface/auth/user'
+import { UserListParams, UserListRes } from '@/interface/auth/user'
+import { PaginatedParams } from 'ahooks/lib/useAntdTable'
+import { antdTableResult } from '@/interface/ahooks'
 
-export function useUserTable() {
-  const [userList, setUserList] = useState<any>([])
-  const [loading, setLoading] = useState<boolean>(false)
-  const [tableParams, setTableParams] = useState<UserListParams>({ current: 1, size: 10 })
-  // 获取用户表格数据
-  const getUserData = async (params: UserListParams) => {
-    const res = await getUserList(params)
-    setUserList(res)
+/**
+ * @description: 定义useAntdTable第一个参数，调用获取表格数据接口
+ * @param current 当前页
+ * @param pageSize 每页条数
+ * @param formData 表格参数
+ * @return {*} 表格数据和total
+ */
+export const getUserData = async (
+  { current, pageSize }: PaginatedParams[0],
+  formData: UserListParams,
+): Promise<antdTableResult<UserListRes>> => {
+  const params = { ...formData }
+  params.current = current
+  params.size = pageSize
+  const res: any = await getUserList(params)
+  return {
+    total: res.total,
+    list: res.records,
   }
-  useEffect(() => {
-    setLoading(true)
-    getUserData(tableParams)
-  }, [tableParams])
-
-  return { loading, userList, setUserList, setTableParams }
 }
diff --git a/src/interface/auth/user.ts b/src/interface/auth/user.ts
index 911a00310ff2dd16b366a1941ef2ee6bb46f8db6..851954fa3f1fbcf7f66ddbc73e9358c037bef0b1 100644
--- a/src/interface/auth/user.ts
+++ b/src/interface/auth/user.ts
@@ -1,7 +1,4 @@
-// 获取用户列表的参数
-export interface UserListParams {
-  current: number
-  size: number
+interface UserType {
   loginName?: string
   nickName?: string
   isLockout?: string
@@ -10,36 +7,35 @@ export interface UserListParams {
   createTimeStart?: string
   createTimeEnd?: string
 }
-
+// 获取用户列表的参数
+export interface UserListParams extends UserType{
+  current: number
+  size: number
+}
+// 用户列表表格数据
+export interface UserTableType extends UserType{
+  id: number
+  password: string
+  lockTime?: string
+  psdWrongTime?: number
+  storeId?: number
+  lastLoginTime?: string
+}
 // 用户列表接口返回值
 export interface UserListRes {
-  countId?: string
   current: number
-  hitCount?: boolean
-  maxLimit?: number
-  optimizeCountSql?: boolean
   pages: number
   orders?: Array<any>
   records: Array<UserTableType>
-  searchCount?: boolean
   size: number
   total: number
   [props: string]: any
 }
-
-// 用户列表表格数据
-export interface UserTableType {
-  id: number
-  password: string
+// 新增用户接口参数
+export interface UserAddParams {
   loginName: string
-  isLockout?: number
-  lockTime?: string
-  nickName?: string
-  protectEmail?: string
-  protectPhone?: string
-  psdWrongTime?: number
-  storeId?: number
-  createTime?: string
-  updateTime?: string
-  lastLoginTime?: string
+  nickName: string
+  password: string
+  protectEmail: string
+  protectPhone: string
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index ffa78ffdfc57ce1dea3087b9dd326ddebc977d0b..81c41a3cf17b0885c5fc21ca4a22fe96abe08524 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,4 +1,5 @@
 // 所有页面主样式
 body{
   background:#fff;
-}
\ No newline at end of file
+  min-width: 980px;
+}
diff --git a/src/views/auth/menu/index.scss b/src/views/auth/menu/index.scss
index 9ae09bedf0f4abc96036060e750472a8ff7f0b3e..4628fdc3ce296c164a6dead1eb8da28ad9405b26 100644
--- a/src/views/auth/menu/index.scss
+++ b/src/views/auth/menu/index.scss
@@ -8,6 +8,7 @@
       display: flex;
       align-items: center;
       width: 30%;
+      min-width: 320px;
       max-width: 500px;
       .search-btn {
         margin-left: 5px;
diff --git a/src/views/auth/user/index.scss b/src/views/auth/user/index.scss
index b438ccc2c2ad749373447fe6dde3cf1113de3fc7..ff0eb4a1b865829060a34afffeaec80d08d1c727 100644
--- a/src/views/auth/user/index.scss
+++ b/src/views/auth/user/index.scss
@@ -8,8 +8,11 @@
       flex-wrap: wrap;
       .ant-form-item {
         width: 33%;
-        max-width: 450px;
+        max-width: 350px;
         padding: 0 20px;
+        .ant-form-item-label {
+          min-width: 75px;
+        }
       }
     }
   }
diff --git a/src/views/auth/user/index.tsx b/src/views/auth/user/index.tsx
index d6ba5e9bd0d10f713f9881905a3b53b3bfdf3554..0d0cdec6f8dded16e43a248baaf38c53e0e7d4af 100644
--- a/src/views/auth/user/index.tsx
+++ b/src/views/auth/user/index.tsx
@@ -1,52 +1,91 @@
 import View from '@/components/View'
-import React, { FC } from 'react'
-import { useAntdTable } from 'ahooks'
-import { getUserList } from '@/api/auth/user'
-import { PaginatedParams } from 'ahooks/lib/useAntdTable'
-import { Button, Form, Input, Popconfirm, Row, Table, Tooltip } from 'antd'
+import { Button, DatePicker, Form, Input, message, Modal, Popconfirm, Select, Table, Tooltip } from 'antd'
 import { DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons'
-import { UserListParams, UserListRes } from '@/interface/auth/user'
-import { antdTableResult } from '@/interface/ahooks'
+import React, { FC, useState } from 'react'
+import { useAntdTable, useBoolean } from 'ahooks'
+import { getUserData } from '@/hooks/auth/user'
+import { addUserApi, deleteUserApi, updateUserApi } from '@/api/auth/user'
+// import { UserAddParams } from '@/interface/auth/user'
 import './index.scss'
 
-/**
- * @description: 定义useAntdTable第一个参数，调用获取表格数据接口
- * @param {*} 传入current，size和筛选表单
- * @return {*} 表格数据和total
- */
-const getUserData = async (
-  { current, pageSize }: PaginatedParams[0],
-  formData: UserListParams,
-): Promise<antdTableResult<UserListRes>> => {
-  const params = { ...formData }
-  params.current = current
-  params.size = pageSize
-  const res: any = await getUserList(params)
-  return {
-    total: res.total,
-    list: res.records,
-  }
+// userForm配置
+const userFormConfig = [
+  { label: '登录名', name: 'loginName', rules: [{ required: true, message: '请输入内容' }] },
+  { label: '昵称', name: 'nickName', rules: [{ required: true, message: '请输入内容' }] },
+  { label: '密码', name: 'password', rules: [{ required: true, message: '请输入内容' }] },
+  { label: '密保邮箱', name: 'protectEmail', rules: [{ required: true, message: '请输入内容' }] },
+  { label: '密码手机', name: 'protectPhone', rules: [{ required: true, message: '请输入内容' }] },
+]
+// 创建FormItem
+const getUserFormItem = () => {
+  const children = []
+  userFormConfig.forEach((item, index) => {
+    children.push(
+      <Form.Item key={index} label={item.label} name={item.name} rules={item.rules}>
+        <Input />
+      </Form.Item>,
+    )
+  })
+  return children
 }
 
 const AuthUser:FC = () => {
   // 获取表单实例
-  const [form] = Form.useForm()
+  const [tableForm] = Form.useForm()
+  const [userForm] = Form.useForm()
+  const { Option } = Select
+  // 弹窗标题、控制、加载变量
+  const [modalTitle, setModalTitle] = useState<string>('创建用户')
+  const [visible, { setTrue, setFalse }] = useBoolean(false)
+  const [loading, { setTrue: loadingTrue, setFalse: loadingFalse }] = useBoolean(false)
+  const [currentId, setCurrentId] = useState<number>(null)
   // ahooks定义表格数据和方法
   const { tableProps, search } = useAntdTable(getUserData, {
     defaultPageSize: 10,
-    form,
+    form: tableForm,
   })
   // 表单重置和搜索方法
   const { submit, reset } = search
 
-  const addUser = () => {
-    console.log(1)
+  const addUserModal = () => {
+    setModalTitle('创建用户')
+    userForm.resetFields()
+    setTrue()
   }
-  const editUser = (params) => {
-    console.log(params)
+  const updateUserModal = (params) => {
+    setCurrentId(params.id)
+    setModalTitle('修改用户')
+    userForm.setFieldsValue(params)
+    setTrue()
   }
-  const deleteUser = (id) => {
-    console.log(id)
+  const submitUserForm = () => {
+    loadingTrue()
+    userForm.validateFields().then((values) => {
+      if (modalTitle === '创建用户') {
+        addUserApi(values).then(() => {
+          message.success('创建用户成功')
+          setFalse()
+          loadingFalse()
+          reset()
+        }).catch(loadingFalse)
+      } else if (modalTitle === '修改用户') {
+        updateUserApi(currentId, values).then(() => {
+          message.success('修改用户成功')
+          setFalse()
+          loadingFalse()
+          reset()
+        }).catch(loadingFalse)
+      }
+    }).catch((info) => {
+      loadingFalse()
+      console.log(info)
+    })
+  }
+  const deleteUserBtn = (id: number) => {
+    deleteUserApi(id).then(() => {
+      message.success('删除用户成功！')
+      reset()
+    })
   }
   const columns = [
     {
@@ -104,13 +143,13 @@ const AuthUser:FC = () => {
               shape="circle"
               style={{ marginRight: '5px' }}
               type="primary"
-              onClick={() => editUser(record)}
+              onClick={() => updateUserModal(record)}
               icon={<FormOutlined />}
             />
           </Tooltip>
           <Popconfirm
             title={`确认删除用户 ${record.nickName} 吗？`}
-            onConfirm={() => deleteUser(record.id)}
+            onConfirm={() => deleteUserBtn(record.id)}
             okText="确认"
             cancelText="取消"
           >
@@ -129,7 +168,7 @@ const AuthUser:FC = () => {
           labelCol={{ span: 6 }}
           wrapperCol={{ span: 18 }}
           name="menu-item-form"
-          form={form}
+          form={tableForm}
         >
           <Form.Item label="登录名" name="loginName">
             <Input />
@@ -138,7 +177,10 @@ const AuthUser:FC = () => {
             <Input />
           </Form.Item>
           <Form.Item label="账号状态" name="isLockout">
-            <Input />
+            <Select>
+              <Option value="0">正常</Option>
+              <Option value="1">已锁定</Option>
+            </Select>
           </Form.Item>
           <Form.Item label="密保邮箱" name="protectEmail">
             <Input />
@@ -147,23 +189,37 @@ const AuthUser:FC = () => {
             <Input />
           </Form.Item>
           <Form.Item label="创建时间" name="createTimeStart">
-            <Input />
-          </Form.Item>
-          <Form.Item label="结束时间" name="createTimeEnd">
-            <Input />
+            <DatePicker style={{ width: '100%' }} />
           </Form.Item>
-          <Row style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Form.Item>
             <Button type="primary" onClick={submit}>搜索</Button>
-            <Button onClick={reset} style={{ marginLeft: 16 }}>重置</Button>
-          </Row>
+            <Button onClick={reset} style={{ marginLeft: 10 }}>重置</Button>
+          </Form.Item>
         </Form>
       </div>
       <div className="user-top-bar">
-        <Button type="primary" icon={<PlusOutlined />} onClick={addUser}>创建用户</Button>
+        <Button type="primary" icon={<PlusOutlined />} onClick={addUserModal}>创建用户</Button>
       </div>
       <div className="user-table">
         <Table columns={columns} rowKey={(record) => record.id} {...tableProps} />
       </div>
+      <Modal
+        title={modalTitle}
+        visible={visible}
+        confirmLoading={loading}
+        onCancel={setFalse}
+        onOk={submitUserForm}
+        width={400}
+      >
+        <Form
+          labelCol={{ span: 6 }}
+          wrapperCol={{ span: 18 }}
+          name="menu-item-form"
+          form={userForm}
+        >
+          {getUserFormItem}
+        </Form>
+      </Modal>
     </View>
   )
 }