diff --git a/src/api/system/role/index.ts b/src/api/system/role/index.ts
index 8d8682b7..04789d8f 100644
--- a/src/api/system/role/index.ts
+++ b/src/api/system/role/index.ts
@@ -22,6 +22,13 @@ export interface UpdateStatusReqVO {
   status: number
 }
 
+export interface RoleExportReqVO {
+  name?: string
+  code?: string
+  status?: number
+  createTime?: Date[]
+}
+
 // 查询角色列表
 export const getRolePageApi = (params: RolePageReqVO) => {
   return defHttp.get({ url: '/system/role/page', params })
@@ -56,3 +63,8 @@ export const updateRoleStatusApi = (data: UpdateStatusReqVO) => {
 export const deleteRoleApi = (id: number) => {
   return defHttp.delete({ url: '/system/role/delete?id=' + id })
 }
+
+// 导出角色
+export const exportRoleApi = (params: RoleExportReqVO) => {
+  return defHttp.download({ url: '/system/post/export', params }, '导出角色.xls')
+}
diff --git a/src/enums/systemEnum.ts b/src/enums/systemEnum.ts
new file mode 100644
index 00000000..07311d3d
--- /dev/null
+++ b/src/enums/systemEnum.ts
@@ -0,0 +1,334 @@
+// ========== 静态变量 ==========
+
+/**
+ * 全局通用状态枚举
+ */
+export const CommonStatusEnum = {
+  ENABLE: 0, // 开启
+  DISABLE: 1 // 禁用
+}
+
+/**
+ * 菜单的类型枚举
+ */
+export const SystemMenuTypeEnum = {
+  DIR: 1, // 目录
+  MENU: 2, // 菜单
+  BUTTON: 3 // 按钮
+}
+
+/**
+ * 角色的类型枚举
+ */
+export const SystemRoleTypeEnum = {
+  SYSTEM: 1, // 内置角色
+  CUSTOM: 2 // 自定义角色
+}
+
+/**
+ * 数据权限的范围枚举
+ */
+export const SystemDataScopeEnum = {
+  ALL: 1, // 全部数据权限
+  DEPT_CUSTOM: 2, // 指定部门数据权限
+  DEPT_ONLY: 3, // 部门数据权限
+  DEPT_AND_CHILD: 4, // 部门及以下数据权限
+  DEPT_SELF: 5 // 仅本人数据权限
+}
+
+/**
+ * 代码生成模板类型
+ */
+export const InfraCodegenTemplateTypeEnum = {
+  CRUD: 1, // 基础 CRUD
+  TREE: 2, // 树形 CRUD
+  SUB: 3 // 主子表 CRUD
+}
+
+/**
+ * 任务状态的枚举
+ */
+export const InfraJobStatusEnum = {
+  INIT: 0, // 初始化中
+  NORMAL: 1, // 运行中
+  STOP: 2 // 暂停运行
+}
+
+/**
+ * API 异常数据的处理状态
+ */
+export const InfraApiErrorLogProcessStatusEnum = {
+  INIT: 0, // 未处理
+  DONE: 1, // 已处理
+  IGNORE: 2 // 已忽略
+}
+
+/**
+ * 用户的社交平台的类型枚举
+ */
+export const SystemUserSocialTypeEnum = {
+  DINGTALK: {
+    title: '钉钉',
+    type: 20,
+    source: 'dingtalk',
+    img: 'https://s1.ax1x.com/2022/05/22/OzMDRs.png'
+  },
+  WECHAT_ENTERPRISE: {
+    title: '企业微信',
+    type: 30,
+    source: 'wechat_enterprise',
+    img: 'https://s1.ax1x.com/2022/05/22/OzMrzn.png'
+  }
+}
+
+/**
+ * 支付渠道枚举
+ */
+export const PayChannelEnum = {
+  WX_PUB: {
+    code: 'wx_pub',
+    name: '微信 JSAPI 支付'
+  },
+  WX_LITE: {
+    code: 'wx_lite',
+    name: '微信小程序支付'
+  },
+  WX_APP: {
+    code: 'wx_app',
+    name: '微信 APP 支付'
+  },
+  ALIPAY_PC: {
+    code: 'alipay_pc',
+    name: '支付宝 PC 网站支付'
+  },
+  ALIPAY_WAP: {
+    code: 'alipay_wap',
+    name: '支付宝 WAP 网站支付'
+  },
+  ALIPAY_APP: {
+    code: 'alipay_app',
+    name: '支付宝 APP 支付'
+  },
+  ALIPAY_QR: {
+    code: 'alipay_qr',
+    name: '支付宝扫码支付'
+  },
+  ALIPAY_BAR: {
+    code: 'alipay_bar',
+    name: '支付宝条码支付'
+  }
+}
+
+/**
+ * 支付的展示模式每局
+ */
+export const PayDisplayModeEnum = {
+  URL: {
+    mode: 'url'
+  },
+  IFRAME: {
+    mode: 'iframe'
+  },
+  FORM: {
+    mode: 'form'
+  },
+  QR_CODE: {
+    mode: 'qr_code'
+  }
+}
+
+/**
+ * 支付类型枚举
+ */
+export const PayType = {
+  WECHAT: 'WECHAT',
+  ALIPAY: 'ALIPAY'
+}
+
+/**
+ * 支付订单状态枚举
+ */
+export const PayOrderStatusEnum = {
+  WAITING: {
+    status: 0,
+    name: '未支付'
+  },
+  SUCCESS: {
+    status: 10,
+    name: '已支付'
+  },
+  CLOSED: {
+    status: 20,
+    name: '支付关闭'
+  }
+}
+
+/**
+ * 支付订单回调状态枚举
+ */
+export const PayOrderNotifyStatusEnum = {
+  NO: {
+    status: 0,
+    name: '未通知'
+  },
+  SUCCESS: {
+    status: 10,
+    name: '通知成功'
+  },
+  FAILURE: {
+    status: 20,
+    name: '通知失败'
+  }
+}
+
+/**
+ * 支付订单退款状态枚举
+ */
+export const PayOrderRefundStatusEnum = {
+  NO: {
+    status: 0,
+    name: '未退款'
+  },
+  SOME: {
+    status: 10,
+    name: '部分退款'
+  },
+  ALL: {
+    status: 20,
+    name: '全部退款'
+  }
+}
+
+/**
+ * 支付退款订单状态枚举
+ */
+export const PayRefundStatusEnum = {
+  CREATE: {
+    status: 0,
+    name: '退款订单生成'
+  },
+  SUCCESS: {
+    status: 1,
+    name: '退款成功'
+  },
+  FAILURE: {
+    status: 2,
+    name: '退款失败'
+  },
+  PROCESSING_NOTIFY: {
+    status: 3,
+    name: '退款中，渠道通知结果'
+  },
+  PROCESSING_QUERY: {
+    status: 4,
+    name: '退款中，系统查询结果'
+  },
+  UNKNOWN_RETRY: {
+    status: 5,
+    name: '状态未知，请重试'
+  },
+  UNKNOWN_QUERY: {
+    status: 6,
+    name: '状态未知，系统查询结果'
+  },
+  CLOSE: {
+    status: 99,
+    name: '退款关闭'
+  }
+}
+
+/**
+ * 商品 SPU 状态
+ */
+export const ProductSpuStatusEnum = {
+  RECYCLE: {
+    status: -1,
+    name: '回收站'
+  },
+  DISABLE: {
+    status: 0,
+    name: '下架'
+  },
+  ENABLE: {
+    status: 1,
+    name: '上架'
+  }
+}
+
+/**
+ * 优惠类型枚举
+ */
+export const PromotionDiscountTypeEnum = {
+  PRICE: {
+    type: 1,
+    name: '满减'
+  },
+  PERCENT: {
+    type: 2,
+    name: '折扣'
+  }
+}
+
+/**
+ * 优惠劵模板的有限期类型的枚举
+ */
+export const CouponTemplateValidityTypeEnum = {
+  DATE: {
+    type: 1,
+    name: '固定日期可用'
+  },
+  TERM: {
+    type: 2,
+    name: '领取之后可用'
+  }
+}
+
+/**
+ * 营销的商品范围枚举
+ */
+export const PromotionProductScopeEnum = {
+  ALL: {
+    scope: 1,
+    name: '全部商品参与'
+  },
+  SPU: {
+    scope: 2,
+    name: '指定商品参与'
+  }
+}
+
+/**
+ * 营销的条件类型枚举
+ */
+export const PromotionConditionTypeEnum = {
+  PRICE: {
+    type: 10,
+    name: '满 N 元'
+  },
+  COUNT: {
+    type: 20,
+    name: '满 N 件'
+  }
+}
+
+/**
+ * 促销活动的状态枚举
+ */
+export const PromotionActivityStatusEnum = {
+  WAIT: {
+    type: 10,
+    name: '未开始'
+  },
+  RUN: {
+    type: 20,
+    name: '进行中'
+  },
+  END: {
+    type: 30,
+    name: '已结束'
+  },
+  CLOSE: {
+    type: 40,
+    name: '已关闭'
+  }
+}
diff --git a/src/views/system/errorCode/index.vue b/src/views/system/errorCode/index.vue
index ac4bcd17..ff660575 100644
--- a/src/views/system/errorCode/index.vue
+++ b/src/views/system/errorCode/index.vue
@@ -11,11 +11,13 @@
             :actions="[
               {
                 icon: 'clarity:note-edit-line',
+                label: '修改',
                 onClick: handleEdit.bind(null, record)
               },
               {
                 icon: 'ant-design:delete-outlined',
                 color: 'error',
+                label: '删除',
                 popConfirm: {
                   title: '是否确认删除',
                   placement: 'left',
@@ -87,15 +89,8 @@ async function handleExport() {
 }
 
 async function handleDelete(record: Recordable) {
-  createConfirm({
-    title: '删除',
-    iconType: 'warning',
-    content: '是否要删除数据？',
-    async onOk() {
-      await deleteErrorCodeApi(record.id)
-      createMessage.success('删除成功')
-      reload()
-    }
-  })
+  await deleteErrorCodeApi(record.id)
+  createMessage.success('删除成功')
+  reload()
 }
 </script>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index b31e2826..b21e4dae 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -12,11 +12,13 @@
             :actions="[
               {
                 icon: 'clarity:note-edit-line',
+                label: '修改',
                 onClick: handleEdit.bind(null, record)
               },
               {
                 icon: 'ant-design:delete-outlined',
                 color: 'error',
+                label: '删除',
                 popConfirm: {
                   title: '是否确认删除',
                   placement: 'left',
@@ -40,7 +42,7 @@ import DeptModel from './MenuModel.vue'
 import { useMessage } from '@/hooks/web/useMessage'
 import { handleTree } from '@/utils/tree'
 
-const { createConfirm, createMessage } = useMessage()
+const { createMessage } = useMessage()
 const [registerModal, { openModal }] = useModal()
 
 const [register, { expandAll, collapseAll, getForm, reload }] = useTable({
@@ -86,15 +88,8 @@ function handleEdit(record: Recordable) {
 }
 
 async function handleDelete(record: Recordable) {
-  createConfirm({
-    title: '删除',
-    iconType: 'warning',
-    content: '是否要删除数据？',
-    async onOk() {
-      await deleteMenuApi(record.id)
-      createMessage.success('删除成功')
-      reload()
-    }
-  })
+  await deleteMenuApi(record.id)
+  createMessage.success('删除成功')
+  reload()
 }
 </script>
diff --git a/src/views/system/menu/menu.data.ts b/src/views/system/menu/menu.data.ts
index a7500fcc..846208dc 100644
--- a/src/views/system/menu/menu.data.ts
+++ b/src/views/system/menu/menu.data.ts
@@ -2,6 +2,7 @@ import Icon from '@/components/Icon'
 import { listSimpleMenusApi } from '@/api/system/menu'
 import { BasicColumn, FormSchema, useRender } from '@/components/Table'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { SystemMenuTypeEnum } from '@/enums/systemEnum'
 import { h } from 'vue'
 
 export const columns: BasicColumn[] = [
@@ -113,7 +114,7 @@ export const formSchema: FormSchema[] = [
     label: '菜单图标',
     field: 'icon',
     component: 'IconPicker',
-    ifShow: ({ values }) => values.type !== 3
+    ifShow: ({ values }) => values.type !== SystemMenuTypeEnum.BUTTON
   },
   {
     label: '显示排序',
@@ -126,25 +127,29 @@ export const formSchema: FormSchema[] = [
     field: 'path',
     required: true,
     component: 'Input',
-    ifShow: ({ values }) => values.type !== 3
+    helpMessage: '访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头',
+    ifShow: ({ values }) => values.type !== SystemMenuTypeEnum.BUTTON
   },
   {
     label: '权限标识',
     field: 'permission',
     component: 'Input',
-    ifShow: ({ values }) => values.type !== 1
+    helpMessage: 'Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission("system:user:list")`)',
+    ifShow: ({ values }) => values.type !== SystemMenuTypeEnum.DIR
   },
   {
     label: '组件路径',
     field: 'component',
     component: 'Input',
-    ifShow: ({ values }) => values.type === 2
+    helpMessage: '例如：system/user/index',
+    ifShow: ({ values }) => values.type === SystemMenuTypeEnum.MENU
   },
   {
     label: '组件名称',
     field: 'componentName',
     component: 'Input',
-    ifShow: ({ values }) => values.type === 2
+    helpMessage: '例如：SystemUser',
+    ifShow: ({ values }) => values.type === SystemMenuTypeEnum.MENU
   },
   {
     label: '菜单状态',
@@ -152,6 +157,7 @@ export const formSchema: FormSchema[] = [
     required: true,
     component: 'RadioButtonGroup',
     defaultValue: 0,
+    helpMessage: '选择停用时，路由将不会出现在侧边栏，也不能被访问',
     componentProps: {
       options: getIntDictOptions(DICT_TYPE.COMMON_STATUS)
     }
@@ -166,7 +172,8 @@ export const formSchema: FormSchema[] = [
         { label: '隐藏', key: false, value: false }
       ]
     },
-    ifShow: ({ values }) => values.type !== 3
+    helpMessage: '选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问',
+    ifShow: ({ values }) => values.type !== SystemMenuTypeEnum.BUTTON
   },
   {
     label: '总是显示',
@@ -178,7 +185,8 @@ export const formSchema: FormSchema[] = [
         { label: '隐藏', key: false, value: false }
       ]
     },
-    ifShow: ({ values }) => values.type !== 3
+    helpMessage: '选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单',
+    ifShow: ({ values }) => values.type !== SystemMenuTypeEnum.BUTTON
   },
   {
     label: '是否缓存',
@@ -190,6 +198,7 @@ export const formSchema: FormSchema[] = [
         { label: '不缓存', key: false, value: false }
       ]
     },
-    ifShow: ({ values }) => values.type === 2
+    helpMessage: '选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段',
+    ifShow: ({ values }) => values.type === SystemMenuTypeEnum.MENU
   }
 ]
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index 8ee936b7..6d3558d9 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -10,11 +10,13 @@
             :actions="[
               {
                 icon: 'clarity:note-edit-line',
+                label: '修改',
                 onClick: handleEdit.bind(null, record)
               },
               {
                 icon: 'ant-design:delete-outlined',
                 color: 'error',
+                label: '删除',
                 popConfirm: {
                   title: '是否确认删除',
                   placement: 'left',
@@ -37,7 +39,7 @@ import NoticeModal from './NoticeModel.vue'
 import { columns, searchFormSchema } from './notice.data'
 import { useMessage } from '@/hooks/web/useMessage'
 
-const { createConfirm, createMessage } = useMessage()
+const { createMessage } = useMessage()
 const [registerModal, { openModal }] = useModal()
 const [registerTable, { reload }] = useTable({
   title: '公告列表',
@@ -72,15 +74,8 @@ function handleEdit(record: Recordable) {
 }
 
 async function handleDelete(record: Recordable) {
-  createConfirm({
-    title: '删除',
-    iconType: 'warning',
-    content: '是否要删除数据？',
-    async onOk() {
-      await deleteNoticeApi(record.id)
-      createMessage.success('删除成功')
-      reload()
-    }
-  })
+  await deleteNoticeApi(record.id)
+  createMessage.success('删除成功')
+  reload()
 }
 </script>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index 6481b440..778ef3fb 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -11,11 +11,13 @@
             :actions="[
               {
                 icon: 'clarity:note-edit-line',
+                label: '修改',
                 onClick: handleEdit.bind(null, record)
               },
               {
                 icon: 'ant-design:delete-outlined',
                 color: 'error',
+                label: '删除',
                 popConfirm: {
                   title: '是否确认删除',
                   placement: 'left',
@@ -87,15 +89,8 @@ async function handleExport() {
 }
 
 async function handleDelete(record: Recordable) {
-  createConfirm({
-    title: '删除',
-    iconType: 'warning',
-    content: '是否要删除数据？',
-    async onOk() {
-      await deletePostApi(record.id)
-      createMessage.success('删除成功')
-      reload()
-    }
-  })
+  await deletePostApi(record.id)
+  createMessage.success('删除成功')
+  reload()
 }
 </script>
diff --git a/src/views/system/role/RoleModel.vue b/src/views/system/role/RoleModel.vue
new file mode 100644
index 00000000..aa31f957
--- /dev/null
+++ b/src/views/system/role/RoleModel.vue
@@ -0,0 +1,58 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup name="RoleModal">
+import { ref, computed, unref } from 'vue'
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { BasicForm, useForm } from '@/components/Form'
+import { formSchema } from './role.data'
+import { createRoleApi, getRoleApi, updateRoleApi } from '@/api/system/role'
+
+const emit = defineEmits(['success', 'register'])
+const isUpdate = ref(true)
+const rowId = ref()
+
+const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+  labelWidth: 100,
+  baseColProps: { span: 24 },
+  schemas: formSchema,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23
+  }
+})
+
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  resetFields()
+  setModalProps({ confirmLoading: false })
+  isUpdate.value = !!data?.isUpdate
+
+  if (unref(isUpdate)) {
+    const res = await getRoleApi(data.record.id)
+    rowId.value = res.id
+    setFieldsValue({
+      ...res
+    })
+  }
+})
+
+const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'))
+
+async function handleSubmit() {
+  try {
+    const values = await validate()
+    setModalProps({ confirmLoading: true })
+    if (unref(isUpdate)) {
+      await updateRoleApi(values)
+    } else {
+      await createRoleApi(values)
+    }
+    closeModal()
+    emit('success')
+  } finally {
+    setModalProps({ confirmLoading: false })
+  }
+}
+</script>
diff --git a/src/views/system/role/RoleScopeModel.vue b/src/views/system/role/RoleScopeModel.vue
new file mode 100644
index 00000000..b324ab6e
--- /dev/null
+++ b/src/views/system/role/RoleScopeModel.vue
@@ -0,0 +1,58 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup name="RoleModal">
+import { ref, computed, unref } from 'vue'
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { BasicForm, useForm } from '@/components/Form'
+import { dataScopeFormSchema } from './role.data'
+import { createRoleApi, getRoleApi, updateRoleApi } from '@/api/system/role'
+
+const emit = defineEmits(['success', 'register'])
+const isUpdate = ref(true)
+const rowId = ref()
+
+const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+  labelWidth: 100,
+  baseColProps: { span: 24 },
+  schemas: dataScopeFormSchema,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23
+  }
+})
+
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  resetFields()
+  setModalProps({ confirmLoading: false })
+  isUpdate.value = !!data?.isUpdate
+
+  if (unref(isUpdate)) {
+    const res = await getRoleApi(data.record.id)
+    rowId.value = res.id
+    setFieldsValue({
+      ...res
+    })
+  }
+})
+
+const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'))
+
+async function handleSubmit() {
+  try {
+    const values = await validate()
+    setModalProps({ confirmLoading: true })
+    if (unref(isUpdate)) {
+      await updateRoleApi(values)
+    } else {
+      await createRoleApi(values)
+    }
+    closeModal()
+    emit('success')
+  } finally {
+    setModalProps({ confirmLoading: false })
+  }
+}
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 3b64cfc4..77519787 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,3 +1,106 @@
 <template>
-  <div>开发中</div>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增 </a-button>
+        <a-button type="warning" @click="handleExport"> 导出 </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                label: '修改',
+                onClick: handleEdit.bind(null, record)
+              },
+              {
+                icon: 'clarity:note-edit-line',
+                label: '菜单权限',
+                onClick: handleEdit.bind(null, record)
+              },
+              {
+                icon: 'clarity:note-edit-line',
+                label: '数据权限',
+                onClick: handleEdit.bind(null, record)
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                label: '删除',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record)
+                }
+              }
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <RoleModel @register="registerModal" @success="reload()" />
+  </div>
 </template>
+<script lang="ts" setup name="Role">
+import { BasicTable, useTable, TableAction } from '@/components/Table'
+import { RoleExportReqVO, deleteRoleApi, exportRoleApi, getRolePageApi } from '@/api/system/role'
+import { useModal } from '@/components/Modal'
+import RoleModel from './RoleModel.vue'
+import { columns, searchFormSchema } from './role.data'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+
+const { t } = useI18n()
+const { createConfirm, createMessage } = useMessage()
+const [registerModal, { openModal }] = useModal()
+const [registerTable, { getForm, reload }] = useTable({
+  title: '角色列表',
+  api: getRolePageApi,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema
+  },
+  useSearchForm: true,
+  showTableSetting: true,
+  showIndexColumn: false,
+  actionColumn: {
+    width: 240,
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right'
+  }
+})
+
+function handleCreate() {
+  openModal(true, {
+    isUpdate: false
+  })
+}
+
+function handleEdit(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true
+  })
+}
+
+async function handleExport() {
+  createConfirm({
+    title: '导出',
+    iconType: 'warning',
+    content: '是否要导出数据？',
+    async onOk() {
+      await exportRoleApi(getForm().getFieldsValue() as RoleExportReqVO)
+      createMessage.success(t('common.exportSuccessText'))
+    }
+  })
+}
+
+async function handleDelete(record: Recordable) {
+  await deleteRoleApi(record.id)
+  createMessage.success('删除成功')
+  reload()
+}
+</script>
diff --git a/src/views/system/role/role.data.ts b/src/views/system/role/role.data.ts
new file mode 100644
index 00000000..f7145366
--- /dev/null
+++ b/src/views/system/role/role.data.ts
@@ -0,0 +1,167 @@
+import { BasicColumn, FormSchema, useRender } from '@/components/Table'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { listSimpleDeptApi } from '@/api/system/dept'
+import { SystemDataScopeEnum } from '@/enums/systemEnum'
+
+export const columns: BasicColumn[] = [
+  {
+    title: '角色编号',
+    dataIndex: 'id',
+    width: 120
+  },
+  {
+    title: '角色名称',
+    dataIndex: 'name',
+    width: 150
+  },
+  {
+    title: '角色标识',
+    dataIndex: 'code',
+    width: 150
+  },
+  {
+    title: '角色类型',
+    dataIndex: 'type',
+    width: 150,
+    customRender: ({ text }) => {
+      return useRender.renderDict(text, DICT_TYPE.SYSTEM_ROLE_TYPE)
+    }
+  },
+  {
+    title: '显示顺序',
+    dataIndex: 'sort',
+    width: 120
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 180,
+    customRender: ({ text }) => {
+      return useRender.renderDict(text, DICT_TYPE.COMMON_STATUS)
+    }
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+    customRender: ({ text }) => {
+      return useRender.renderDate(text)
+    }
+  }
+]
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '角色名称',
+    field: 'name',
+    component: 'Input',
+    colProps: { span: 8 }
+  },
+  {
+    label: '角色标识',
+    field: 'code',
+    component: 'Input',
+    colProps: { span: 8 }
+  },
+  {
+    label: '状态',
+    field: 'status',
+    component: 'Select',
+    componentProps: {
+      options: getIntDictOptions(DICT_TYPE.COMMON_STATUS)
+    },
+    colProps: { span: 8 }
+  },
+  {
+    label: '创建时间',
+    field: 'createTime',
+    component: 'RangePicker',
+    colProps: { span: 8 }
+  }
+]
+
+export const formSchema: FormSchema[] = [
+  {
+    label: '编号',
+    field: 'id',
+    show: false,
+    component: 'Input'
+  },
+  {
+    label: '角色名称',
+    field: 'name',
+    required: true,
+    component: 'Input'
+  },
+  {
+    label: '角色标识',
+    field: 'code',
+    required: true,
+    component: 'Input'
+  },
+  {
+    label: '角色顺序',
+    field: 'sort',
+    required: true,
+    component: 'InputNumber'
+  },
+  {
+    label: '状态',
+    field: 'status',
+    component: 'Select',
+    defaultValue: 0,
+    componentProps: {
+      options: getIntDictOptions(DICT_TYPE.COMMON_STATUS)
+    }
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea'
+  }
+]
+
+export const dataScopeFormSchema: FormSchema[] = [
+  {
+    label: '编号',
+    field: 'id',
+    show: false,
+    component: 'Input'
+  },
+  {
+    label: '角色名称',
+    field: 'name',
+    dynamicDisabled: true,
+    component: 'Input'
+  },
+  {
+    label: '角色标识',
+    field: 'code',
+    dynamicDisabled: true,
+    component: 'Input'
+  },
+  {
+    label: '权限范围',
+    field: 'dataScope',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: getIntDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE)
+    }
+  },
+  {
+    label: '数据权限',
+    field: 'status',
+    component: 'ApiTreeSelect',
+    ifShow: ({ values }) => values.dataScope === SystemDataScopeEnum.DEPT_CUSTOM,
+    componentProps: {
+      api: () => listSimpleDeptApi(),
+      fieldNames: {
+        label: 'name',
+        key: 'id',
+        value: 'id'
+      },
+      handleTree: 'id'
+    }
+  }
+]
diff --git a/src/views/system/sensitiveWord/index.vue b/src/views/system/sensitiveWord/index.vue
index f64359e8..75283b66 100644
--- a/src/views/system/sensitiveWord/index.vue
+++ b/src/views/system/sensitiveWord/index.vue
@@ -11,11 +11,13 @@
             :actions="[
               {
                 icon: 'clarity:note-edit-line',
+                label: '修改',
                 onClick: handleEdit.bind(null, record)
               },
               {
                 icon: 'ant-design:delete-outlined',
                 color: 'error',
+                label: '删除',
                 popConfirm: {
                   title: '是否确认删除',
                   placement: 'left',
@@ -92,15 +94,8 @@ async function handleExport() {
 }
 
 async function handleDelete(record: Recordable) {
-  createConfirm({
-    title: '删除',
-    iconType: 'warning',
-    content: '是否要删除数据？',
-    async onOk() {
-      await deleteSensitiveWordApi(record.id)
-      createMessage.success('删除成功')
-      reload()
-    }
-  })
+  await deleteSensitiveWordApi(record.id)
+  createMessage.success('删除成功')
+  reload()
 }
 </script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 6beeca8a..ee2e9ac7 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -4,6 +4,7 @@
     <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
       <template #toolbar>
         <a-button type="primary" @click="handleCreate">新增账号</a-button>
+        <a-button type="warning" @click="handleExport"> 导出 </a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
@@ -11,13 +12,13 @@
             :actions="[
               {
                 icon: 'clarity:note-edit-line',
-                tooltip: '编辑用户资料',
+                label: '编辑',
                 onClick: handleEdit.bind(null, record)
               },
               {
                 icon: 'ant-design:delete-outlined',
                 color: 'error',
-                tooltip: '删除此账号',
+                label: '删除',
                 popConfirm: {
                   title: '是否确认删除',
                   placement: 'left',
@@ -39,14 +40,16 @@ import { useModal } from '@/components/Modal'
 import UserModel from './UserModel.vue'
 import DeptTree from './DeptTree.vue'
 import { columns, searchFormSchema } from './user.data'
-import { deleteUserApi, getUserPageApi } from '@/api/system/user'
+import { UserExportReqVO, deleteUserApi, exportUserApi, getUserPageApi } from '@/api/system/user'
+import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 
+const { t } = useI18n()
 const { createConfirm, createMessage } = useMessage()
 const [registerModal, { openModal }] = useModal()
 const searchInfo = reactive<Recordable>({})
 
-const [registerTable, { reload, updateTableDataRecord }] = useTable({
+const [registerTable, { getForm, reload, updateTableDataRecord }] = useTable({
   title: '账号列表',
   api: getUserPageApi,
   columns,
@@ -72,6 +75,18 @@ function handleCreate() {
   })
 }
 
+async function handleExport() {
+  createConfirm({
+    title: '导出',
+    iconType: 'warning',
+    content: '是否要导出数据？',
+    async onOk() {
+      await exportUserApi(getForm().getFieldsValue() as UserExportReqVO)
+      createMessage.success(t('common.exportSuccessText'))
+    }
+  })
+}
+
 function handleEdit(record: Recordable) {
   openModal(true, {
     record,
@@ -80,16 +95,9 @@ function handleEdit(record: Recordable) {
 }
 
 async function handleDelete(record: Recordable) {
-  createConfirm({
-    title: '删除',
-    iconType: 'warning',
-    content: '是否要删除数据？',
-    async onOk() {
-      await deleteUserApi(record.id)
-      createMessage.success('删除成功')
-      reload()
-    }
-  })
+  await deleteUserApi(record.id)
+  createMessage.success('删除成功')
+  reload()
 }
 
 function handleSuccess({ isUpdate, values }) {