diff --git a/src/api/system/role.js b/src/api/system/role.js
new file mode 100644
index 0000000..8fda311
--- /dev/null
+++ b/src/api/system/role.js
@@ -0,0 +1,44 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+// 角色新增
+export function addRole(data) {
+  return request({
+    url: getUrl('/sysRole/create'),
+    method: 'post',
+    data
+  })
+}
+
+//角色编辑
+export function updateRole(data) {
+  return request({
+    url: getUrl('/sysRole/update'),
+    method: 'post',
+    data
+  })
+}
+// 角色删除
+export function deleteRole(data) {
+  return request({
+    url: getUrl('/sysRole/delete'),
+    method: 'post',
+    data
+  })
+}
+// 查询角色详情
+export function queryRoleDetail(params) {
+  return request({
+    url: getUrl('/sysRole/query'),
+    method: 'get',
+    params: params
+  })
+}
+// 角色分页查询
+export function getRolePage(data) {
+  return request({
+    url: getUrl('/sysRole/page'),
+    method: 'post',
+    data
+  })
+}
diff --git a/src/views/system/role/components/RoleDialog.vue b/src/views/system/role/components/RoleDialog.vue
new file mode 100644
index 0000000..7210772
--- /dev/null
+++ b/src/views/system/role/components/RoleDialog.vue
@@ -0,0 +1,135 @@
+<template>
+  <el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body @close="handleClose">
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="角色名称" prop="roleName">
+            <el-input v-model="form.roleName" placeholder="请输入角色名称" clearable size="small" :disabled="isView" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="角色编码" prop="roleCode">
+            <el-input v-model="form.roleCode" placeholder="请输入角色编码" clearable size="small" :disabled="isView" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="角色描述" prop="remark">
+            <el-input v-model="form.remark" placeholder="请输入角色描述" clearable size="small" :disabled="isView" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer" v-if="!isView">
+      <el-button type="primary" size="small" :loading="loading" @click="submitForm">确 定</el-button>
+      <el-button size="small" @click="handleClose">取 消</el-button>
+    </div>
+    <div slot="footer" class="dialog-footer" v-else>
+      <el-button size="small" @click="handleClose">关 闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addRole, updateRole } from '@/api/system/role'
+
+export default {
+  name: 'RoleDialog',
+  props: {
+    title: {
+      type: String,
+      default: '添加角色'
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    roleData: {
+      type: Object,
+      default: () => ({})
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    },
+    isView: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      form: {
+        roleName: '',
+        roleCode: '',
+        remark: ''
+      },
+      rules: {
+        roleCode: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
+        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
+      },
+      loading: false
+    }
+  },
+  watch: {
+    roleData: {
+      handler(val) {
+        if (val && Object.keys(val).length > 0) {
+          this.form = { ...val }
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.$emit('update:visible', false)
+    },
+    submitForm() {
+      // 查看模式下不允许提交
+      if (this.isView) {
+        return
+      }
+
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.loading = true
+          const submitData = { ...this.form }
+
+          // 根据是否是编辑模式调用不同的API
+          const apiRequest = this.isEdit ? updateRole(submitData) : addRole(submitData)
+
+          apiRequest
+            .then(response => {
+              if (response.code === '0') {
+                this.$message.success(this.isEdit ? '修改成功' : '添加成功')
+                this.$emit('submit', submitData)
+                this.handleClose()
+                this.form = {}
+              } else {
+                this.$message.error(response.msg || (this.isEdit ? '修改失败' : '添加失败'))
+                this.form = {}
+              }
+            })
+            .catch(error => {
+              this.$message.error(this.isEdit ? '修改角色出错' : '添加角色出错')
+            })
+            .finally(() => {
+              this.loading = false
+            })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index a729bbb..7949112 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -5,105 +5,183 @@
         <el-form :model="queryParams" label-width="100px" class="demo-form-inline">
           <el-row>
             <el-col :span="6">
-              <el-form-item label="规则类型">
-                <el-select v-model="queryParams.type" placeholder="全部规则" clearable style="width: 100%" size="small">
-                  <el-option label="全部规则" value="" />
-                  <el-option label="规则一" value="1" />
-                  <el-option label="规则二" value="2" />
-                </el-select>
+              <el-form-item label="角色名称">
+                <el-input v-model="queryParams.roleNameLike" placeholder="请输入角色名称" clearable size="small" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="规则名称">
-                <el-input v-model="queryParams.name" placeholder="请输入规则名称" clearable size="small" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="创建时间">
-                <el-date-picker
-                  v-model="queryParams.dateRange"
-                  type="daterange"
-                  range-separator="-"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  value-format="yyyy-MM-dd"
-                  style="width: 100%"
-                  size="small"
-                />
+              <el-form-item label="角色编码">
+                <el-input v-model="queryParams.roleCodeLike" placeholder="请输入角色编码" clearable size="small" />
               </el-form-item>
             </el-col>
+          </el-row>
+          <el-row>
             <el-col :span="6">
               <el-form-item>
                 <el-button type="primary" size="medium" @click="handleQuery">查询</el-button>
                 <el-button type="primary" plain size="medium" @click="resetQuery">重置</el-button>
+                <el-button type="primary" plain size="medium" @click="handleAdd">新增</el-button>
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
       </div>
 
-      <el-table v-loading="loading" :data="roleList">
-        <el-table-column type="index" label="序号" width="50" />
-        <el-table-column prop="name" label="角色名称" />
-        <el-table-column prop="code" label="角色编码" />
-        <el-table-column prop="description" label="角色描述" />
-        <el-table-column prop="status" label="状态">
-          <template slot-scope="scope">
-            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-              {{ scope.row.status === 1 ? '启用' : '禁用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="250">
-          <template slot-scope="scope">
-            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
-            <el-button type="text" @click="handlePermission(scope.row)">权限设置</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-pagination
-        :current-page.sync="queryParams.pageNum"
-        :page-size.sync="queryParams.pageSize"
-        :total="total"
-        :page-sizes="[10, 20, 30, 50]"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+      <r-table
+        :columns="tableConfig.columns"
+        :data="tableData"
+        :deletion="false"
+        :total="tableConfig.total"
+        @currentChange="handleCurrentChange"
+        @sizeChange="handleSizeChange"
+        :currentPage="tableConfig.currentPage"
+        :pageSize="tableConfig.pageSize"
       />
     </el-card>
+
+    <!-- 角色新增弹窗 -->
+    <role-dialog :visible.sync="dialogVisible" :title="dialogTitle" :is-edit="isEdit" :is-view="isView" :role-data="currentRoleData" @submit="handleSubmit" />
   </div>
 </template>
 
 <script>
+import { getRolePage, deleteRole, queryRoleDetail } from '@/api/system/role'
+import RoleDialog from '@/views/system/role/components/RoleDialog'
+
 export default {
   name: 'RoleManage',
+  components: {
+    RoleDialog
+  },
   data() {
     return {
       loading: false,
+      dialogVisible: false,
+      resetPasswordVisible: false,
+      dialogTitle: '添加角色',
+      isEdit: false,
+      isView: false,
+      currentRoleData: {},
       total: 0,
       roleList: [],
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        type: '',
-        name: '',
-        dateRange: []
-      }
+        roleCodeLike: '',
+        roleNameLike: ''
+      },
+      // 表格配置项
+      tableConfig: {
+        total: 0,
+        currentPage: 1,
+        pageSize: 10,
+        columns: [
+          { prop: 'roleCode', key: '角色编码' },
+          { prop: 'roleName', key: '角色名称' },
+          { prop: 'remark', key: '角色描述' },
+          {
+            key: '操作',
+            render: (h, params) => {
+              return h('div', [
+                h(
+                  'el-button',
+                  {
+                    props: { type: 'text', size: 'mini' },
+                    on: { click: () => this.handleEdit(params.row) }
+                  },
+                  '编辑'
+                ),
+                // h(
+                //   'el-button',
+                //   {
+                //     props: { type: 'text', size: 'mini' },
+                //     on: { click: () => this.handleInfoVisible(params.row) }
+                //   },
+                //   '查看详情'
+                // ),
+                h(
+                  'el-button',
+                  {
+                    props: { type: 'text', size: 'mini', style: 'color: #F56C6C' },
+                    on: { click: () => this.handleDelete(params.row) }
+                  },
+                  '删除'
+                )
+              ])
+            }
+          }
+        ]
+      },
+      tableData: []
     }
   },
+  created() {
+    this.getRoleList()
+  },
   methods: {
+    // 获取角色列表
+    getRoleList() {
+      this.loading = true
+      const params = { ...this.queryParams }
+
+      getRolePage(params)
+        .then(response => {
+          if (response.code === '0') {
+            this.tableData = response.content.content.list || []
+            this.tableConfig.total = response.content.content.total || 0
+          } else {
+            this.$message.error(response.msg || '获取角色列表失败')
+          }
+        })
+        .catch(error => {
+          this.$message.error('获取用户列表出错', error)
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
     handleQuery() {
-      // TODO: 实现查询逻辑
+      this.queryParams.page = 1
+      this.getRoleList()
     },
     resetQuery() {
-      this.queryParams.type = ''
-      this.queryParams.name = ''
-      this.queryParams.dateRange = []
+      this.queryParams.roleCodeLike = ''
+      this.queryParams.roleNameLike = ''
       this.handleQuery()
     },
+    handleAdd() {
+      this.isEdit = false
+      this.isView = false
+      this.currentRoleData = {}
+      this.dialogVisible = true
+      this.dialogTitle = '添加角色'
+    },
     handleEdit(row) {
-      // TODO: 实现编辑逻辑
+      this.isEdit = true
+      this.isView = false
+      this.dialogTitle = '编辑角色'
+      this.loading = true
+
+      // 获取用户详情
+      queryRoleDetail({ id: row.id })
+        .then(response => {
+          if (response.code === '0') {
+            this.currentRoleData = response.content.content || {}
+            this.dialogVisible = true
+          } else {
+            this.$message.error(response.msg || '获取角色详情失败')
+          }
+        })
+        .catch(error => {
+          console.error('获取角色详情出错：', error)
+          this.$message.error('获取角色详情出错')
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    handleSubmit() {
+      this.getRoleList() // 提交后刷新列表
     },
     handlePermission(row) {
       // TODO: 实现权限设置逻辑
@@ -115,6 +193,35 @@ export default {
     handleCurrentChange(val) {
       this.queryParams.pageNum = val
       this.handleQuery()
+    },
+    handleDelete(row) {
+      this.$confirm('确认删除该角色吗？', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.loading = true
+          // 将id放入数组中传递
+          deleteRole([row.id])
+            .then(response => {
+              if (response.code === '0') {
+                this.$message.success('删除成功')
+                this.getRoleList()
+              } else {
+                this.$message.error(response.msg || '删除失败')
+              }
+            })
+            .catch(error => {
+              this.$message.error('删除角色出错', error)
+            })
+            .finally(() => {
+              this.loading = false
+            })
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
     }
   }
 }