diff --git a/src/api/auth/menu.ts b/src/api/auth/menu.ts
index a83c59245b206f4745194bf3c80b62db1c4ea609..cc2df748785dd56a117afdc6aa4c22f2300e11b9 100644
--- a/src/api/auth/menu.ts
+++ b/src/api/auth/menu.ts
@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import { SaveMenu } from '@/interface/auth/menu'
 // import { ResMenuTree, MenuQuery, SaveMenu } from '@/model/system/MenuTree'
 
 /**
@@ -14,7 +15,7 @@ export function getTreeMenu(data: any): Promise<null> {
  * @param data
  * @returns
  */
-export function addMenu(data: any): Promise<null> {
+export function addMenu(data:SaveMenu): Promise<null> {
   const params = data // 解决eslint提示 禁止对函数参数再赋值
   if (params.parentId == null) params.parentId = 0
   return request.post('/api/auth/module', params)
@@ -24,7 +25,7 @@ export function addMenu(data: any): Promise<null> {
  * @param data
  * @returns
  */
-export function updateMenu(data: any): Promise<null> {
+export function updateMenu(data: SaveMenu): Promise<null> {
   const params = data // 解决eslint提示 禁止对函数参数再赋值
   if (params.parentId == null) params.parentId = 0
   return request.put(`/api/auth/module/${params.id}`, params)
diff --git a/src/hooks/auth/menu.ts b/src/hooks/auth/menu.ts
index 92792cecafa8d57eb7a9982f966198abfa179d6e..0c3728fc3b9199bed9129e07ceb17c6c86740811 100644
--- a/src/hooks/auth/menu.ts
+++ b/src/hooks/auth/menu.ts
@@ -1,20 +1,41 @@
-import { getTreeMenu } from '@/api/auth/menu'
+import { getTreeMenu, addMenu, updateMenu, removeMenu } from '@/api/auth/menu'
 import { useEffect, useState } from 'react'
+import { MenuSearchParams, SaveMenu } from '@/interface/auth/menu'
 
 export function useMenuTreeTable() {
-  const [tableData, setTableData] = useState([])
+  const [menuTableData, setMenuTableData] = useState([])
   const [loading, setLoading] = useState(false)
-  const tableParams = {
+  const tableParams: MenuSearchParams = {
     name: '',
     code: '',
   }
+  // 获取菜单表格数据
+  const getMenuData = async (searchParams) => {
+    const res = await getTreeMenu(searchParams)
+    setMenuTableData(res)
+  }
+  // 新增菜单
+  const addMenuApi = async (params: SaveMenu) => {
+    const res = await addMenu(params)
+    return res
+  }
+  // 修改菜单
+  const updateMenuApi = async (params: SaveMenu) => {
+    const res = await updateMenu(params)
+    return res
+  }
+
+  // 删除
+  const removeMenuApi = async (id: number) => {
+    const res = await removeMenu(id)
+    return res
+  }
 
   useEffect(() => {
     setLoading(true)
-    const fetchData = async() => {
-      const result = await getTreeMenu(tableParams)
-    }
+    getMenuData(tableParams)
+    // eslint-disable-next-line
   }, [])
 
-  return { loading, tableData, setTableData }
+  return { loading, menuTableData, setMenuTableData, getMenuData, addMenuApi, updateMenuApi, removeMenuApi }
 }
diff --git a/src/interface/auth/menu.ts b/src/interface/auth/menu.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d8942ed2eeb934b7af4a6456ffe532d5672ea678
--- /dev/null
+++ b/src/interface/auth/menu.ts
@@ -0,0 +1,14 @@
+export interface MenuSearchParams {
+  name?: string // 菜单名
+  code?: string // 菜单编码
+}
+// 新增/修改菜单请求
+export interface SaveMenu {
+  id?: number // 菜单id
+  name: string // 菜单名
+  code: string // 菜单编码
+  parentId?: number // 父级id
+  path?: string // 菜单路径
+  weight: number // 权重
+  iconClass: string // 图标名称 antd
+}
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index a97a362764e70f2e3ef7176deb9124f0f547abac..b62d67ec9553cd1b59999689cc9df0c27ce281a1 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -19,6 +19,7 @@ const AppLayout: FC<RouteComponentProps> = () => {
   }
   useEffect(() => {
     setUserStore()
+    // eslint-disable-next-line
   }, [userData])
 
   return (
diff --git a/src/router/asyncRoutes.ts b/src/router/asyncRoutes.ts
index b7aebf25f6160e8a505f40eea756fd93e51c8758..8c62250b85425cd5b0dc378d521c66e247fac112 100644
--- a/src/router/asyncRoutes.ts
+++ b/src/router/asyncRoutes.ts
@@ -5,5 +5,5 @@ 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')),
+  authMenu: lazy(() => import('@/views/auth/menu/index')),
 }
diff --git a/src/views/auth/menu/index.scss b/src/views/auth/menu/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9ae09bedf0f4abc96036060e750472a8ff7f0b3e
--- /dev/null
+++ b/src/views/auth/menu/index.scss
@@ -0,0 +1,26 @@
+.app-auth-menu {
+  .menu-top-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    .left-search {
+      display: flex;
+      align-items: center;
+      width: 30%;
+      max-width: 500px;
+      .search-btn {
+        margin-left: 5px;
+      }
+    }
+  }
+}
+.button-box {
+  text-align: center;
+}
+.action-th {
+  background: red;
+}
+.ant-table-thead > tr > th:last-child {
+  text-align: center;
+}
diff --git a/src/views/auth/menu/index.tsx b/src/views/auth/menu/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9533be3d5d7dd8079b8980b3b2d71f0815b999b5
--- /dev/null
+++ b/src/views/auth/menu/index.tsx
@@ -0,0 +1,225 @@
+import React, { useState } from 'react'
+import { useMenuTreeTable } from '@/hooks/auth/menu'
+import { Table, Button, Tooltip, Popconfirm, message, Input, Modal, Form } from 'antd'
+import { DeleteOutlined, FormOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons'
+import { MenuSearchParams, SaveMenu } from '@/interface/auth/menu'
+import './index.scss'
+
+const AuthMenu: React.FC = () => {
+  // 获取表格数据，刷新表格方法
+  const { menuTableData, getMenuData, addMenuApi, removeMenuApi, updateMenuApi } = useMenuTreeTable()
+  const [params, setParams] = useState<MenuSearchParams>({
+    code: '',
+    name: '',
+  })
+  const [visible, setVisible] = useState(false)
+  const [confirmLoading, setConfirmLoading] = useState(false)
+  const [modalTitle, setModalTitle] = useState('添加菜单')
+  const menuForm: SaveMenu = {
+    id: undefined, // 菜单id
+    name: '', // 菜单名
+    code: '', // 菜单编码
+    parentId: undefined, // 父级id
+    path: '', // 菜单路径
+    weight: 999, // 权重
+    iconClass: '', // 图标名称 antd
+  }
+  // 获取表单实例用form.setFieldsValue更新数据
+  const [form] = Form.useForm()
+  // 打开弹窗
+  const showModal = () => {
+    setVisible(true)
+  }
+  // 参数变化后搜索函数
+  const changeParams = (e) => {
+    setParams({
+      ...params,
+      [e.target.name]: e.target.value,
+    })
+  }
+  const searchMenuList = () => {
+    getMenuData(params)
+  }
+  // 添加/修改菜单方法
+  const openMenuForm = (text, record: any) => {
+    console.log(record, text)
+    setModalTitle(text)
+    switch (text) {
+      case '编辑菜单':
+        form.setFieldsValue({
+          id: record.id,
+          name: record.name,
+          code: record.code,
+          parentId: record.parentId,
+          path: record.path,
+          weight: record.weight,
+          iconClass: record.iconClass,
+        })
+        break
+      case '新增菜单':
+        form.setFieldsValue({
+          id: undefined,
+          name: '',
+          code: '',
+          parentId: undefined,
+          path: '',
+          weight: 999,
+          iconClass: '',
+        })
+        break
+      default:
+        break
+    }
+    showModal()
+    console.log(menuForm)
+  }
+  // 新增、编辑菜单
+  const saveMenuForm = () => {
+    setConfirmLoading(true)
+    const currentForm = form.getFieldsValue()
+    switch (modalTitle) {
+      case '新增菜单':
+        addMenuApi(currentForm).then(() => {
+          setConfirmLoading(false)
+          setVisible(false)
+          message.success('保存菜单成功')
+          getMenuData({})
+        }).catch((err) => {
+          setConfirmLoading(false)
+          message.error(err)
+        })
+        break
+      case '编辑菜单':
+        updateMenuApi(currentForm).then(() => {
+          setConfirmLoading(false)
+          setVisible(false)
+          message.success('保存菜单成功')
+          getMenuData({})
+        }).catch((err) => {
+          setConfirmLoading(false)
+          message.error(err)
+        })
+        break
+      default:
+        break
+    }
+  }
+  // 删除菜单方法
+  const deleteMenu = (id: number) => {
+    console.log(id)
+    removeMenuApi(id).then(() => {
+      message.success('菜单删除成功！')
+      getMenuData({})
+    }).catch((err) => {
+      message.error(err)
+    })
+  }
+  const columns = [
+    {
+      title: '菜单编码',
+      dataIndex: 'code',
+      key: 'code',
+    },
+    {
+      title: '菜单名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '菜单路径',
+      dataIndex: 'path',
+      key: 'path',
+    },
+    {
+      title: '权重',
+      dataIndex: 'weight',
+      key: 'weight',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+    },
+    {
+      title: '操作',
+      dataIndex: '',
+      key: 'action',
+      className: 'aciton-th',
+      width: 120,
+      // fixed: 'right',
+      render: (text, record) => (
+        <div className="button-box">
+          <Tooltip title="编辑">
+            <Button shape="circle" style={{ marginRight: '5px' }} type="primary" onClick={() => openMenuForm('编辑菜单', record)} icon={<FormOutlined />} />
+          </Tooltip>
+          <Popconfirm
+            title={`确认删除菜单 ${record.name} 吗？`}
+            onConfirm={() => deleteMenu(record.id)}
+            okText="确认"
+            cancelText="取消"
+          >
+            <Tooltip title="删除">
+              <Button type="primary" shape="circle" danger icon={<DeleteOutlined />} />
+            </Tooltip>
+          </Popconfirm>
+        </div>
+      ),
+    },
+  ]
+  return (
+    <div className="app-auth-menu">
+      <div className="menu-top-bar">
+        <div className="left-search">
+          <Input allowClear name="code" value={params.code} onChange={changeParams} placeholder="请输入菜单编码" />
+          <Input allowClear name="name" value={params.name} onChange={changeParams} placeholder="请输入菜单名称" />
+          <Tooltip title="搜索">
+            <Button type="primary" size="small" className="search-btn" shape="circle" onClick={searchMenuList} icon={<SearchOutlined />} />
+          </Tooltip>
+        </div>
+        <Button type="primary" icon={<PlusOutlined />} onClick={() => openMenuForm('新增菜单', null)}>添加菜单</Button>
+      </div>
+      <div className="menu-table">
+        <Table columns={columns} dataSource={menuTableData} rowKey={(record) => record.id} pagination={false} />
+      </div>
+      <Modal
+        title={modalTitle}
+        visible={visible}
+        onOk={saveMenuForm}
+        confirmLoading={confirmLoading}
+        onCancel={() => setVisible(false)}
+      >
+        <Form
+          labelCol={{ span: 4 }}
+          wrapperCol={{ span: 18 }}
+          name="menu-item-form"
+          form={form}
+          onFinish={saveMenuForm}
+          initialValues={menuForm}
+        >
+          <Form.Item label="菜单ID" name="id">
+            <Input />
+          </Form.Item>
+          <Form.Item label="菜单名" name="name">
+            <Input />
+          </Form.Item>
+          <Form.Item label="菜单编码" name="code">
+            <Input />
+          </Form.Item>
+          <Form.Item label="父级ID" name="parentId">
+            <Input />
+          </Form.Item>
+          <Form.Item label="菜单路径" name="path">
+            <Input />
+          </Form.Item>
+          <Form.Item label="权重" name="weight">
+            <Input />
+          </Form.Item>
+          <Form.Item label="icon名称" name="iconClass">
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  )
+}
+export default AuthMenu