diff --git a/package.json b/package.json
index 44a13a80467d499937c57165d8424a8e9e72f340..9dcc2c266b38656e947a1767d8b2e3ef4b55adad 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.8",
     "@types/react-router": "^5.1.15",
+    "ahooks": "^2.10.9",
     "antd": "^4.16.3",
     "axios": "^0.21.1",
     "dayjs": "^1.10.5",
diff --git a/src/api/auth/user.ts b/src/api/auth/user.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e931a5741f474fd169110b38c67ca45ab1d286c5
--- /dev/null
+++ b/src/api/auth/user.ts
@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+import { UserListParams } from '@/interface/auth/user'
+
+/**
+ * 获取用户列表
+ * @param {UserListParams} data
+ * return
+ */
+export function getUserList(data: UserListParams): Promise<null> {
+  return request.get('/api/auth/user/page', data)
+}
diff --git a/src/hooks/auth/user.ts b/src/hooks/auth/user.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e897bad8c87b0fb8636a40c7cd4ea4bdfdfc62b5
--- /dev/null
+++ b/src/hooks/auth/user.ts
@@ -0,0 +1,20 @@
+import { getUserList } from '@/api/auth/user'
+import { useEffect, useState } from 'react'
+import { UserListParams } from '@/interface/auth/user'
+
+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)
+  }
+  useEffect(() => {
+    setLoading(true)
+    getUserData(tableParams)
+  }, [tableParams])
+
+  return { loading, userList, setUserList, setTableParams }
+}
diff --git a/src/interface/ahooks.ts b/src/interface/ahooks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fe33d23f5ad459b8d2ffea33a484754a187a0021
--- /dev/null
+++ b/src/interface/ahooks.ts
@@ -0,0 +1,4 @@
+export interface antdTableResult<T> {
+  total: number;
+  list: Array<T>;
+}
diff --git a/src/interface/auth/user.ts b/src/interface/auth/user.ts
new file mode 100644
index 0000000000000000000000000000000000000000..911a00310ff2dd16b366a1941ef2ee6bb46f8db6
--- /dev/null
+++ b/src/interface/auth/user.ts
@@ -0,0 +1,45 @@
+// 获取用户列表的参数
+export interface UserListParams {
+  current: number
+  size: number
+  loginName?: string
+  nickName?: string
+  isLockout?: string
+  protectEmail?: string
+  protectPhone?: string
+  createTimeStart?: string
+  createTimeEnd?: 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
+  loginName: string
+  isLockout?: number
+  lockTime?: string
+  nickName?: string
+  protectEmail?: string
+  protectPhone?: string
+  psdWrongTime?: number
+  storeId?: number
+  createTime?: string
+  updateTime?: string
+  lastLoginTime?: string
+}
diff --git a/src/router/asyncRoutes.ts b/src/router/asyncRoutes.ts
index 8c62250b85425cd5b0dc378d521c66e247fac112..7f608479900f7a29b23ec5a6e65b6f094dbbd7b4 100644
--- a/src/router/asyncRoutes.ts
+++ b/src/router/asyncRoutes.ts
@@ -5,5 +5,6 @@ export default {
   overview: lazy(() => import('@/views/dashboard')),
   shopOverview: lazy(() => import('@/views/shop/overview')),
   shopDecoration: lazy(() => import('@/views/shop/decoration')),
-  authMenu: lazy(() => import('@/views/auth/menu/index')),
+  authMenu: lazy(() => import('@/views/auth/menu')),
+  authUser: lazy(() => import('@/views/auth/user')),
 }
diff --git a/src/views/auth/menu/index.tsx b/src/views/auth/menu/index.tsx
index bb67eea8eddefe4dce7687181c276b3d4f3dc2b7..3d12338302cf949cad2de9b946f0b9a300f46b6e 100644
--- a/src/views/auth/menu/index.tsx
+++ b/src/views/auth/menu/index.tsx
@@ -1,3 +1,4 @@
+import View from '@/components/View'
 import React, { useState } from 'react'
 import { useMenuTreeTable } from '@/hooks/auth/menu'
 import { Table, Button, Tooltip, Popconfirm, message, Input, Modal, Form, InputNumber, TreeSelect } from 'antd'
@@ -172,7 +173,7 @@ const AuthMenu: React.FC = () => {
     },
   ]
   return (
-    <div className="app-auth-menu">
+    <View className="app-auth-menu">
       <div className="menu-top-bar">
         <div className="left-search">
           <Input allowClear name="code" value={params.code} onChange={changeParams} placeholder="请输入菜单编码" />
@@ -221,7 +222,7 @@ const AuthMenu: React.FC = () => {
           </Form.Item>
         </Form>
       </Modal>
-    </div>
+    </View>
   )
 }
 export default AuthMenu
diff --git a/src/views/auth/user/index.scss b/src/views/auth/user/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b438ccc2c2ad749373447fe6dde3cf1113de3fc7
--- /dev/null
+++ b/src/views/auth/user/index.scss
@@ -0,0 +1,23 @@
+.app-auth-user {
+  .filter-form {
+    margin-bottom: 20px;
+    background-color: #fff;
+    padding: 16px;
+    .ant-form {
+      display: flex;
+      flex-wrap: wrap;
+      .ant-form-item {
+        width: 33%;
+        max-width: 450px;
+        padding: 0 20px;
+      }
+    }
+  }
+  .user-top-bar {
+    text-align: right;
+    margin-bottom: 20px;
+  }
+  .user-table {
+    overflow: auto;
+  }
+}
diff --git a/src/views/auth/user/index.tsx b/src/views/auth/user/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d6ba5e9bd0d10f713f9881905a3b53b3bfdf3554
--- /dev/null
+++ b/src/views/auth/user/index.tsx
@@ -0,0 +1,171 @@
+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 { DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons'
+import { UserListParams, UserListRes } from '@/interface/auth/user'
+import { antdTableResult } from '@/interface/ahooks'
+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,
+  }
+}
+
+const AuthUser:FC = () => {
+  // 获取表单实例
+  const [form] = Form.useForm()
+  // ahooks定义表格数据和方法
+  const { tableProps, search } = useAntdTable(getUserData, {
+    defaultPageSize: 10,
+    form,
+  })
+  // 表单重置和搜索方法
+  const { submit, reset } = search
+
+  const addUser = () => {
+    console.log(1)
+  }
+  const editUser = (params) => {
+    console.log(params)
+  }
+  const deleteUser = (id) => {
+    console.log(id)
+  }
+  const columns = [
+    {
+      title: '登录名',
+      dataIndex: 'loginName',
+      key: 'loginName',
+      width: 100,
+      ellipsis: true,
+    },
+    {
+      title: '昵称',
+      dataIndex: 'nickName',
+      key: 'nickName',
+      width: 150,
+      ellipsis: true,
+    },
+    {
+      title: '账号状态',
+      dataIndex: 'isLockout',
+      key: 'isLockout',
+      width: 100,
+      align: 'center' as 'center',
+    },
+    {
+      title: '密保邮箱',
+      dataIndex: 'protectEmail',
+      key: 'protectEmail',
+      width: 150,
+    },
+    {
+      title: '密保手机',
+      dataIndex: 'protectPhone',
+      key: 'protectPhone',
+      width: 120,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 200,
+      align: 'center' as 'center',
+    },
+    {
+      title: '操作',
+      dataIndex: '',
+      key: 'action',
+      className: 'aciton-th',
+      width: 120,
+      align: 'center' as 'center',
+      fixed: 'right' as 'right',
+      render: (text, record) => (
+        <div className="button-box">
+          <Tooltip title="编辑">
+            <Button
+              shape="circle"
+              style={{ marginRight: '5px' }}
+              type="primary"
+              onClick={() => editUser(record)}
+              icon={<FormOutlined />}
+            />
+          </Tooltip>
+          <Popconfirm
+            title={`确认删除用户 ${record.nickName} 吗？`}
+            onConfirm={() => deleteUser(record.id)}
+            okText="确认"
+            cancelText="取消"
+          >
+            <Tooltip title="删除">
+              <Button type="primary" shape="circle" danger icon={<DeleteOutlined />} />
+            </Tooltip>
+          </Popconfirm>
+        </div>
+      ),
+    },
+  ]
+  return (
+    <View className="app-auth-user">
+      <div className="filter-form">
+        <Form
+          labelCol={{ span: 6 }}
+          wrapperCol={{ span: 18 }}
+          name="menu-item-form"
+          form={form}
+        >
+          <Form.Item label="登录名" name="loginName">
+            <Input />
+          </Form.Item>
+          <Form.Item label="昵称" name="nickName">
+            <Input />
+          </Form.Item>
+          <Form.Item label="账号状态" name="isLockout">
+            <Input />
+          </Form.Item>
+          <Form.Item label="密保邮箱" name="protectEmail">
+            <Input />
+          </Form.Item>
+          <Form.Item label="密保手机" name="protectPhone">
+            <Input />
+          </Form.Item>
+          <Form.Item label="创建时间" name="createTimeStart">
+            <Input />
+          </Form.Item>
+          <Form.Item label="结束时间" name="createTimeEnd">
+            <Input />
+          </Form.Item>
+          <Row style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Button type="primary" onClick={submit}>搜索</Button>
+            <Button onClick={reset} style={{ marginLeft: 16 }}>重置</Button>
+          </Row>
+        </Form>
+      </div>
+      <div className="user-top-bar">
+        <Button type="primary" icon={<PlusOutlined />} onClick={addUser}>创建用户</Button>
+      </div>
+      <div className="user-table">
+        <Table columns={columns} rowKey={(record) => record.id} {...tableProps} />
+      </div>
+    </View>
+  )
+}
+
+export default AuthUser