diff --git a/backend/controller/role.py b/backend/controller/role.py
index d9e1222..c103ccd 100644
--- a/backend/controller/role.py
+++ b/backend/controller/role.py
@@ -62,8 +62,8 @@ async def role_put(pk: int, data: RoleIn) -> Response:
 
 async def role_query(query: RoleQuery) -> Response[ListAll[list[RoleRead]]]:
     """post条件查询角色表"""
-    limit = query.size
-    skip = (query.offset - 1) * limit
-    del query.offset, query.size
-    users, count = await get_roles(skip, limit, query.dict())
+    size = query.limit
+    skip = (query.offset - 1) * size
+    del query.offset, query.limit
+    users, count = await get_roles(skip, size, query.dict())
     return Response(data=ListAll(total=count, items=users))
diff --git a/backend/dbhelper/role.py b/backend/dbhelper/role.py
index 4c9a4a0..6e91526 100644
--- a/backend/dbhelper/role.py
+++ b/backend/dbhelper/role.py
@@ -38,7 +38,7 @@ async def get_roles(skip: int, limit: int, kwargs: dict = None):
         kwargs = {f"{k}__contains": v for k, v in kwargs.items()}
     else:
         kwargs = {}
-    result = RoleModel.filter(status__not=9, **kwargs).all().order_by("-created")
+    result = RoleModel.filter(**kwargs).all().order_by("-created")
     return await result.offset(skip).limit(limit), await result.count()
 
 
diff --git a/backend/mini.db b/backend/mini.db
index 60e7509..e2a2455 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
new file mode 100644
index 0000000..2644cf9
Binary files /dev/null and b/backend/mini.db-shm differ
diff --git a/backend/mini.db-wal b/backend/mini.db-wal
new file mode 100644
index 0000000..015d765
Binary files /dev/null and b/backend/mini.db-wal differ
diff --git a/backend/router/url.py b/backend/router/url.py
index 29111c0..d0d6d51 100644
--- a/backend/router/url.py
+++ b/backend/router/url.py
@@ -157,7 +157,9 @@ routes = [
         summary="查询角色拥有权限",
         **has_perm
     ),
-    Route.put("/role", endpoint=role_put, tags=["角色管理"], summary="角色更新", **has_perm),
+    Route.put(
+        "/role/{pk}", endpoint=role_put, tags=["角色管理"], summary="角色更新", **has_perm
+    ),
     Route.post(
         "/role/query", endpoint=role_query, tags=["角色管理"], summary="角色条件查询", **has_perm
     ),
diff --git a/backend/tests/test_case.py b/backend/tests/test_case.py
index 4d708a7..8e68bc3 100644
--- a/backend/tests/test_case.py
+++ b/backend/tests/test_case.py
@@ -247,7 +247,7 @@ params = [
             type=2,
             component=None,
             pid=4,
-            identifier="",
+            identifier="role:query",
             api="/role/query",
             method="POST",
         ).dict(),
@@ -276,7 +276,7 @@ params = [
             component=None,
             pid=4,
             identifier="role:update",
-            api="/role",
+            api="/role/{pk}",
             method="PUT",
         ).dict(),
     ),
diff --git a/frontend/src/service/role.js b/frontend/src/service/role.js
index 5336e77..209e025 100644
--- a/frontend/src/service/role.js
+++ b/frontend/src/service/role.js
@@ -1,9 +1,44 @@
 import request from '@/utils/request'
 
 // 获取角色列表, 需要考虑创建用户选择角色应该是所有未被删除的情况
-export function getRoles(parms) {
+export function getRoles(params) {
   return request({
     url: '/role',
-    parms
+    params
+  })
+}
+
+// 条件查询
+export function queryRole(data) {
+  return request({
+    url: '/role/query',
+    method: 'post',
+    data
+  })
+}
+
+// 删除
+export function delRole(id) {
+  return request({
+    url: `/role/${id}`,
+    method: 'delete'
+  })
+}
+
+// 创建
+export function addRole(data) {
+  return request({
+    url: '/role',
+    method: 'post',
+    data
+  })
+}
+
+// 修改
+export function putRole(id, data) {
+  return request({
+    url: `/role/${id}`,
+    method: 'put',
+    data
   })
 }
diff --git a/frontend/src/views/main/system/role/conf.js b/frontend/src/views/main/system/role/conf.js
new file mode 100644
index 0000000..288de5b
--- /dev/null
+++ b/frontend/src/views/main/system/role/conf.js
@@ -0,0 +1,49 @@
+export const columns = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    key: 'id'
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    key: 'name'
+  },
+  {
+    title: '描述',
+    dataIndex: 'remark',
+    key: 'remark'
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status'
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created',
+    key: 'created'
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'modified',
+    key: 'modified'
+  },
+  {
+    title: '操作',
+    key: 'action'
+  }
+]
+
+export const addRoleRules = [
+  {
+    name: [
+      { required: true, message: '请输入名称', trigger: 'blur' },
+      { min: 3, max: 12, message: '3-12', trigger: 'blur' }
+    ],
+    remark: [
+      { required: true, message: '请输入描述', trigger: 'blur' },
+      { min: 1, max: 20, message: '1~20', trigger: 'blur' }
+    ]
+  }
+]
diff --git a/frontend/src/views/main/system/role/role.vue b/frontend/src/views/main/system/role/role.vue
index dc6f494..678a2a9 100644
--- a/frontend/src/views/main/system/role/role.vue
+++ b/frontend/src/views/main/system/role/role.vue
@@ -1,7 +1,268 @@
-<script setup></script>
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+
+import { PlusOutlined } from '@ant-design/icons-vue'
+
+import { getRoles, queryRole, delRole, putRole, addRole } from '@/service/role'
+import { columns, addRoleRules } from './conf'
+import { formatTime } from '@/utils/format'
+import { message } from 'ant-design-vue'
+
+/**查询表单响应式数据 */
+const queryFormRef = ref()
+
+const queryForm = reactive({
+  name: ''
+})
+
+// 是否查询
+const isQuery = ref(false)
+
+// 列表数据
+const dataSource = ref([])
+
+//分页响应式配置
+const pagination = reactive({
+  current: 1, //当前页
+  pageSize: 5, // 每页数量
+  // showSizeChanger: true,
+  total: 0,
+  pageSizeOptions: ['5', '10', '50'],
+  showTotal: (total) => `共 ${total} 条数据`,
+  onChange: (page, pageSize) => {
+    pagination.current = page
+    pagination.pageSize = pageSize
+    getPageData()
+  }
+})
+
+onMounted(() => {
+  getPageData()
+})
+
+// 获取页面数据
+const getPageData = () => {
+  let offset = pagination.current
+  let limit = pagination.pageSize
+  if (!isQuery.value) {
+    getRoles({ offset, limit }).then((res) => {
+      dataSource.value = res.data.items
+      pagination.total = res.data.total
+    })
+  } else {
+    queryRole({ offset, limit, name: queryForm.name }).then((res) => {
+      dataSource.value = res.data.items
+      pagination.total = res.data.total
+    })
+  }
+}
+
+// 点击查询事件
+const clickQuery = () => {
+  isQuery.value = true
+  getPageData()
+}
+
+// 重置搜索框
+const resetQueryForm = () => {
+  queryFormRef.value.resetFields()
+  isQuery.value = false
+  getPageData()
+}
+
+// 删除
+const delClick = (record) => {
+  delRole(record.id)
+  getPageData()
+}
+
+/**新增角色 */
+const addVisible = ref(false)
+const formRef = ref(null)
+const newRoleForm = reactive({
+  name: '',
+  remark: ''
+})
+
+const addClick = () => {
+  addVisible.value = !addVisible.value
+}
+
+// 新增modal 确定的回调
+const onOk = () => {
+  formRef.value.validateFields().then(() => {
+    // 表单验证通过
+    addRole(newRoleForm).then((res) => {
+      if (res.msg === '请求成功') {
+        message.success('新增成功')
+        // 1. 关闭 modal
+        addVisible.value = !addVisible.value
+        // 2. 重置响应式数据
+        formRef.value.resetFields()
+        // 3. 刷新页面数据
+        getPageData()
+      }
+    })
+  })
+}
+
+// 新增modal 取消回调
+const onCancel = () => {
+  // 2. 重置响应式数据
+  formRef.value.resetFields()
+}
+
+/**更新 */
+
+const putClick = (record) => {
+  // 打开编辑的modal
+  putVisible.value = !putVisible.value
+  putId.value = record.id
+  putRoleForm.name = record.name
+  putRoleForm.remark = record.remark
+}
+
+const putVisible = ref(false)
+
+const putRoleFormRef = ref()
+const putRoleForm = reactive({
+  name: '',
+  remark: ''
+})
+const putId = ref()
+
+//modal 事件
+const onOkPut = () => {
+  //校验数据
+  putRoleFormRef.value.validateFields().then(() => {
+    //验证通过
+    putRole(putId.value, putRoleForm).then((res) => {
+      if (res.msg === '请求成功') {
+        message.success('修改成功')
+        // 1. 关闭 modal
+        putVisible.value = !putVisible.value
+        // 2. 重置响应式数据
+        putRoleFormRef.value.resetFields()
+        // 3. 重新拉取数据
+        getPageData()
+      }
+    })
+  })
+}
+
+const onCancelPut = () => {
+  putRoleFormRef.value.resetFields()
+}
+</script>
 
 <template>
-  <div>role</div>
+  <div class="user">
+    <!-- 查询 -->
+    <div class="search">
+      <a-form ref="queryFormRef" layout="inline" :model="queryForm">
+        <a-form-item label="名称" name="name">
+          <a-input placeholder="角色名称" v-model:value="queryForm.name"> </a-input>
+        </a-form-item>
+        <a-form-item v-per="'role:query'">
+          <a-button type="primary" @click="clickQuery">查询</a-button>
+          <a-button style="margin-left: 10px" @click="resetQueryForm">重置</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+
+    <!-- 列表 -->
+    <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="{ y: 'calc(100vh - 460px)' }"
+          :data-source="dataSource"
+          :pagination="pagination"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'status'">
+              <a-tag :color="record.status !== 9 ? 'green' : 'red'">
+                {{ record.status !== 9 ? '正常' : '删除' }}
+              </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>
+
+    <!-- 新增 -->
+    <a-modal
+      v-model:visible="addVisible"
+      title="新建角色"
+      ok-text="创建"
+      cancel-text="取消"
+      @ok="onOk"
+      @cancel="onCancel"
+    >
+      <a-form ref="formRef" :model="newRoleForm" :rules="addRoleRules">
+        <a-form-item name="name" label="名称">
+          <a-input v-model:value="newRoleForm.name" />
+        </a-form-item>
+        <a-form-item name="remark" label="描述">
+          <a-input v-model:value="newRoleForm.remark" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- 修改用户 -->
+    <a-modal
+      v-model:visible="putVisible"
+      title="编辑角色"
+      ok-text="确认"
+      cancel-text="取消"
+      @ok="onOkPut"
+      @cancel="onCancelPut"
+    >
+      <a-form ref="putRoleFormRef" :model="putRoleForm" :rules="putUserRules">
+        <a-form-item name="name" label="名称">
+          <a-input v-model:value="putRoleForm.name" />
+        </a-form-item>
+        <a-form-item name="remark" label="描述">
+          <a-input v-model:value="putRoleForm.remark" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </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>