diff --git a/backend/dbhelper/role.py b/backend/dbhelper/role.py
index 6e91526..512d6fe 100644
--- a/backend/dbhelper/role.py
+++ b/backend/dbhelper/role.py
@@ -11,7 +11,7 @@ async def get_role_menus(rid: int):
     db = connections.get("default")
     return await db.execute_query_dict(
         """
-        select m.id, m.name, m.meta, m.path, m.type, m.component, m.pid, m.identifier 
+        select m.id, m.name, m.meta, m.path, m.type, m.component, m.pid, m.identifier, m.api, m.method
         FROM sys_menu as m, sys_role_menu WHERE m.id = sys_role_menu.mid
         AND sys_role_menu.rid = (?) AND sys_role_menu.`status` = 1""",
         [rid],
diff --git a/backend/mini.db b/backend/mini.db
index e2a2455..5bd9955 100644
Binary files a/backend/mini.db and b/backend/mini.db differ
diff --git a/backend/mini.db-shm b/backend/mini.db-shm
deleted file mode 100644
index 2644cf9..0000000
Binary files a/backend/mini.db-shm and /dev/null differ
diff --git a/backend/mini.db-wal b/backend/mini.db-wal
deleted file mode 100644
index 015d765..0000000
Binary files a/backend/mini.db-wal and /dev/null differ
diff --git a/frontend/src/service/menu.js b/frontend/src/service/menu.js
new file mode 100644
index 0000000..822cfcb
--- /dev/null
+++ b/frontend/src/service/menu.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 获取角色列表, 需要考虑创建用户选择角色应该是所有未被删除的情况
+export function getMenus(params) {
+  return request({
+    url: '/menu',
+    params
+  })
+}
+
+// 条件查询
+export function queryMenu(data) {
+  return request({
+    url: '/menu/query',
+    method: 'post',
+    data
+  })
+}
+
+// 删除
+export function delMenu(id) {
+  return request({
+    url: `/menu/${id}`,
+    method: 'delete'
+  })
+}
+
+// 创建
+export function addMenu(data) {
+  return request({
+    url: '/menu',
+    method: 'post',
+    data
+  })
+}
+
+// 修改
+export function putMenu(id, data) {
+  return request({
+    url: `/menu/${id}`,
+    method: 'put',
+    data
+  })
+}
diff --git a/frontend/src/views/main/system/menu/conf.js b/frontend/src/views/main/system/menu/conf.js
new file mode 100644
index 0000000..4a6d970
--- /dev/null
+++ b/frontend/src/views/main/system/menu/conf.js
@@ -0,0 +1,67 @@
+export const columns = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 120
+  },
+  {
+    title: '图标',
+    dataIndex: 'meta',
+    key: 'meta',
+    width: 60
+  },
+  {
+    title: '路由',
+    dataIndex: 'path',
+    key: 'path',
+    width: 120
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    key: 'type',
+    width: 80
+  },
+  {
+    title: '组件路径',
+    dataIndex: 'component',
+    key: 'component',
+    width: 120
+  },
+  {
+    title: '权限标识',
+    dataIndex: 'identifier',
+    key: 'identifier',
+    width: 120
+  },
+  {
+    title: '请求接口',
+    dataIndex: 'api',
+    key: 'api',
+    width: 80
+  },
+  {
+    title: '请求方法',
+    dataIndex: 'method',
+    key: 'method',
+    width: 80
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created',
+    key: 'created',
+    width: 80
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'modified',
+    key: 'modified',
+    width: 80
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 120
+  }
+]
diff --git a/frontend/src/views/main/system/menu/menu.vue b/frontend/src/views/main/system/menu/menu.vue
index 162e162..03b8044 100644
--- a/frontend/src/views/main/system/menu/menu.vue
+++ b/frontend/src/views/main/system/menu/menu.vue
@@ -1,7 +1,95 @@
-<script setup></script>
+<script setup>
+import { PlusOutlined } from '@ant-design/icons-vue'
+
+import { columns } from './conf'
+import { formatTime } from '@/utils/format'
+import { userStore } from '@/stores/user'
+import { loadIconCpn } from '@/utils/loadCpn'
+
+// 列表数据
+const dataSource = userStore().userMenus
+
+// 菜单类型隐射
+
+const menuType = {
+  0: '目录',
+  1: '菜单',
+  2: '按钮'
+}
+
+const methodColor = {
+  GET: '#61AFFE',
+  POST: '#49CC90',
+  DELETE: '#F93E3E',
+  PUT: '#FCA130'
+}
+
+//
+const addClick = () => {
+  console.log('点击')
+}
+</script>
 
 <template>
-  <div>menu</div>
+  <div class="user">
+    <!-- 列表 -->
+    <div class="data">
+      <a-card title="菜单列表"
+        ><template #extra>
+          <a-button type="primary" v-per="'role:create'" @click="addClick">
+            <template #icon><plus-outlined /></template>
+            新增</a-button
+          >
+        </template>
+
+        <!-- 数据 -->
+        <a-table
+          :columns="columns"
+          :scroll="{ x: 1600, y: 'calc(100vh - 380px)' }"
+          :data-source="dataSource"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'meta'">
+              <component :is="loadIconCpn(record.meta?.icon)"></component>
+            </template>
+            <template v-if="column.key === 'type'">
+              {{ menuType[record.type] }}
+            </template>
+            <template v-if="column.key === 'method'">
+              <a-tag :color="methodColor[record.method]">{{ record.method }}</a-tag>
+            </template>
+            <template v-else-if="column.key === 'created'">
+              {{ formatTime(record.created) }}
+            </template>
+            <template v-else-if="column.key === 'modified'">
+              {{ formatTime(record.modified) }}
+            </template>
+            <template v-else-if="column.key === 'action'">
+              <span>
+                <a v-per="'role:update'" @click="putClick(record)">编辑</a>
+                <a-divider type="vertical" />
+                <template v-if="record.status !== 9">
+                  <a v-per="'role:delete'" @click="delClick(record)">删除</a>
+                </template>
+              </span>
+            </template>
+          </template>
+        </a-table>
+      </a-card>
+    </div>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.search {
+  display: flex;
+  /* justify-content: center; */
+  align-content: center;
+  margin-bottom: 16px;
+  padding: 24px;
+  background: #fff;
+}
+.data {
+  margin-top: 20px;
+}
+</style>