diff --git a/src/api/app/approle.ts b/src/api/app/approle.ts
new file mode 100644
index 00000000..92d241e3
--- /dev/null
+++ b/src/api/app/approle.ts
@@ -0,0 +1,64 @@
+import request from "/@/utils/request";
+
+export function fetchList(query: any) {
+  return request({
+    url: '/admin/approle/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function list() {
+  return request({
+    url: '/admin/approle/list',
+    method: 'get'
+  })
+}
+
+export function addObj(obj: any) {
+  return request({
+    url: '/admin/approle',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function getObj(id: string) {
+  return request({
+    url: '/admin/approle/' + id,
+    method: 'get'
+  })
+}
+
+export function delObj(id: string) {
+  return request({
+    url: '/admin/approle/' + id,
+    method: 'delete'
+  })
+}
+
+export function putObj(obj: any) {
+  return request({
+    url: '/admin/approle',
+    method: 'put',
+    data: obj
+  })
+}
+
+export function fetchRoleTree(roleId: string) {
+  return request({
+    url: '/admin/appmenu/tree/' + roleId,
+    method: 'get'
+  })
+}
+
+export function permissionUpd(roleId: string, menuIds: string) {
+  return request({
+    url: '/admin/approle/menu',
+    method: 'put',
+    data: {
+      roleId: roleId,
+      menuIds: menuIds
+    }
+  })
+}
diff --git a/src/api/app/approlemenu.ts b/src/api/app/approlemenu.ts
new file mode 100644
index 00000000..44198478
--- /dev/null
+++ b/src/api/app/approlemenu.ts
@@ -0,0 +1,39 @@
+import request from "/@/utils/request";
+
+export function fetchList(query: any) {
+  return request({
+    url: '/admin/approlemenu/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addObj(obj: any) {
+  return request({
+    url: '/admin/approlemenu',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function getObj(id:string) {
+  return request({
+    url: '/admin/approlemenu/' + id,
+    method: 'get'
+  })
+}
+
+export function delObj(id:string) {
+  return request({
+    url: '/admin/approlemenu/' + id,
+    method: 'delete'
+  })
+}
+
+export function putObj(obj: string) {
+  return request({
+    url: '/admin/approlemenu',
+    method: 'put',
+    data: obj
+  })
+}
diff --git a/src/api/app/appuser.ts b/src/api/app/appuser.ts
new file mode 100644
index 00000000..aaa1ce38
--- /dev/null
+++ b/src/api/app/appuser.ts
@@ -0,0 +1,39 @@
+import request from "/@/utils/request"
+
+export function fetchList(query: any) {
+  return request({
+    url: '/admin/appuser/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addObj(obj: any) {
+  return request({
+    url: '/admin/appuser',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function getObj(id: string) {
+  return request({
+    url: '/admin/appuser/' + id,
+    method: 'get'
+  })
+}
+
+export function delObj(id: string) {
+  return request({
+    url: '/admin/appuser/' + id,
+    method: 'delete'
+  })
+}
+
+export function putObj(obj: any) {
+  return request({
+    url: '/admin/appuser',
+    method: 'put',
+    data: obj
+  })
+}
diff --git a/src/api/app/appuserrole.ts b/src/api/app/appuserrole.ts
new file mode 100644
index 00000000..46b49fa7
--- /dev/null
+++ b/src/api/app/appuserrole.ts
@@ -0,0 +1,39 @@
+import request from "/@/utils/request"
+
+export function fetchList(query: any) {
+  return request({
+    url: '/admin/appuserrole/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addObj(obj: any) {
+  return request({
+    url: '/admin/appuserrole',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function getObj(id: string) {
+  return request({
+    url: '/admin/appuserrole/' + id,
+    method: 'get'
+  })
+}
+
+export function delObj(id: string) {
+  return request({
+    url: '/admin/appuserrole/' + id,
+    method: 'delete'
+  })
+}
+
+export function putObj(obj: any) {
+  return request({
+    url: '/admin/appuserrole',
+    method: 'put',
+    data: obj
+  })
+}
diff --git a/src/views/app/appmenu/form.vue b/src/views/app/appmenu/form.vue
index 54998a55..b419c1d6 100644
--- a/src/views/app/appmenu/form.vue
+++ b/src/views/app/appmenu/form.vue
@@ -39,7 +39,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="12" class="mb20" v-if="state.ruleForm.menuType !== '1'">
-          <el-form-item :label="$t('sysmenu.keepAlive')" prop="keepAlive">
+          <el-form-item :label="$t('sysmenu.visible')" prop="visible">
             <el-radio-group v-model="state.ruleForm.visible">
               <el-radio-button label="1">显示</el-radio-button>
               <el-radio-button label="0">隐藏</el-radio-button>
diff --git a/src/views/app/appmenu/i18n/en.ts b/src/views/app/appmenu/i18n/en.ts
index fb074e10..2ae2254e 100644
--- a/src/views/app/appmenu/i18n/en.ts
+++ b/src/views/app/appmenu/i18n/en.ts
@@ -5,7 +5,7 @@ export default {
         sortOrder: 'sortOrder',
         path: 'path',
         menuType: 'menuType',
-        keepAlive: 'keepAlive',
+        visible: 'visible',
         permission: 'permission',
         inputNameTip: 'input name',
         parentId: 'parent menu'
diff --git a/src/views/app/appmenu/i18n/zh-cn.ts b/src/views/app/appmenu/i18n/zh-cn.ts
index 08335e86..c5644cd4 100644
--- a/src/views/app/appmenu/i18n/zh-cn.ts
+++ b/src/views/app/appmenu/i18n/zh-cn.ts
@@ -5,7 +5,7 @@ export default {
         sortOrder: '排序',
         path: '路由路径',
         menuType: '菜单类型',
-        keepAlive: '缓冲',
+        visible: '显示状态',
         permission: '权限标识',
         inputNameTip: '请输入菜单名称',
         parentId: '上级菜单'
diff --git a/src/views/app/appmenu/index.vue b/src/views/app/appmenu/index.vue
index 8794b12a..d7a2ed16 100644
--- a/src/views/app/appmenu/index.vue
+++ b/src/views/app/appmenu/index.vue
@@ -19,15 +19,14 @@
 				<el-table-column prop="path" :label="$t('appmenu.path')" show-overflow-tooltip></el-table-column>
 				<el-table-column :label="$t('appmenu.menuType')" show-overflow-tooltip>
 					<template #default="scope">
-						<el-tag v-if="scope.row.menuType === '0'" type="success">左菜单</el-tag>
-						<el-tag v-if="scope.row.menuType === '2'" type="success">顶菜单</el-tag>
-						<el-tag v-if="scope.row.menuType === '1'" type="info">按钮</el-tag>
+						<el-tag v-if="scope.row.menuType === '0'" type="success">页面</el-tag>
+						<el-tag v-if="scope.row.menuType === '2'" type="success">按钮</el-tag>
 					</template>
 				</el-table-column>
-				<el-table-column :label="$t('appmenu.keepAlive')" show-overflow-tooltip>
+				<el-table-column :label="$t('appmenu.visible')" show-overflow-tooltip>
 					<template #default="scope">
-						<el-tag v-if="scope.row.keepAlive === '0'" type="info">关闭</el-tag>
-						<el-tag v-if="scope.row.keepAlive === '1'" type="success">开启</el-tag>
+						<el-tag v-if="scope.row.visible === '0'" type="info">关闭</el-tag>
+						<el-tag v-if="scope.row.visible === '1'" type="success">开启</el-tag>
 					</template>
 				</el-table-column>
 				<el-table-column prop="permission" :label="$t('appmenu.permission')"
diff --git a/src/views/app/approle/form.vue b/src/views/app/approle/form.vue
new file mode 100644
index 00000000..87cbd4fe
--- /dev/null
+++ b/src/views/app/approle/form.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-dialog :title="form.roleId ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
+    :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules"  label-width="90px">
+      <el-row :gutter="35">
+        <el-col :span="12" class="mb20">
+          <el-form-item label="角色名称" prop="roleName">
+            <el-input v-model="form.roleName" placeholder="请输入角色名称" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="角色标识" prop="roleCode">
+            <el-input v-model="form.roleCode" placeholder="请输入角色标识" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+          <el-form-item label="角色描述" prop="roleDesc">
+            <el-input v-model="form.roleDesc" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="visible = false" >{{ $t('common.cancelButtonText') }}</el-button>
+        <el-button type="primary" @click="onSubmit" >{{ $t('common.confirmButtonText') }}</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="systemRoleDialog">import { rule } from '/@/utils/validate';
+
+// 定义子组件向父组件传值/事件
+const emit = defineEmits(['refresh']);
+import { useMessage } from "/@/hooks/message";
+import { getObj, addObj, putObj } from '/@/api/app/approle'
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n();
+
+// 定义变量内容
+const dataFormRef = ref();
+const deptTreeRef = ref()
+const visible = ref(false)
+
+// 提交表单数据
+const form = reactive({
+  roleId: '',
+  roleName: '',
+  roleCode: '',
+  roleDesc: '',
+  dsType: 0,
+  dsScope: ''
+});
+
+// 页面对应元数据
+const dataForm = reactive({
+  deptData: [],
+  checkedDsScope: [],
+  deptProps: {
+    children: 'children',
+    label: 'name',
+    value: 'id'
+  }
+});
+
+// 定义校验规则
+const dataRules = ref(
+  {
+    roleName: [
+        { required: true, message: '角色名称不能为空', trigger: 'blur' },
+        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+    ],
+    roleCode: [
+      { required: true, message: '角色标识不能为空', trigger: 'blur' },
+      { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
+      { validator: rule.validatorKey, trigger: 'blur' }
+    ],
+    roleDesc: [{ max: 128, message: '长度在 128 个字符内', trigger: 'blur' }],
+    dsType: [{ required: true, message: "请选择数据权限类型", trigger: "blur" }]
+  }
+)
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.roleId = ''
+
+  // 重置表单数据
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields()
+  }
+
+  // 获取角色信息
+  if (id) {
+    form.roleId = id
+    getRoleData(id)
+  }
+};
+
+// 提交
+const onSubmit = () => {
+  if (form.dsType === 1) {
+    form.dsScope = deptTreeRef.value.getCheckedKeys().join(',')
+  } else {
+    form.dsScope = ''
+  }
+
+  dataFormRef.value.validate((valid: boolean) => {
+    if (!valid) {
+      return false
+    }
+
+    // 更新
+    if (form.roleId) {
+      putObj(form).then(() => {
+        useMessage().success(t('common.editSuccessText'))
+        visible.value = false // 关闭弹窗
+        emit('refresh')
+      }).catch((err: any) => {
+        useMessage().error(err.msg)
+      })
+    } else {
+      addObj(form).then(() => {
+        useMessage().success(t('common.addSuccessText'))
+        visible.value = false // 关闭弹窗
+        emit('refresh')
+      }).catch((err: any) => {
+        useMessage().error(err.msg)
+      })
+    }
+  })
+
+
+};
+
+// 初始化角色数据
+const getRoleData = (id: string) => {
+  // 获取部门数据
+  getObj(id).then((res: any) => {
+    Object.assign(form, res.data)
+    if (res.data.dsScope) {
+      dataForm.checkedDsScope = (res.data.dsScope).split(',')
+    } else {
+      dataForm.checkedDsScope = []
+    }
+  })
+};
+
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
diff --git a/src/views/app/approle/i18n/en.ts b/src/views/app/approle/i18n/en.ts
new file mode 100644
index 00000000..bdd51ee5
--- /dev/null
+++ b/src/views/app/approle/i18n/en.ts
@@ -0,0 +1,8 @@
+export default {
+    approle: {
+        index: 'index',
+        roleName: 'roleName',
+        inputRoleNameTip: 'input roleName',
+        permissionTip: 'grant',
+    }
+}
diff --git a/src/views/app/approle/i18n/zh-cn.ts b/src/views/app/approle/i18n/zh-cn.ts
new file mode 100644
index 00000000..7eec22ef
--- /dev/null
+++ b/src/views/app/approle/i18n/zh-cn.ts
@@ -0,0 +1,8 @@
+export default {
+    approle: {
+        index: '序号',
+        roleName: '角色名',
+        inputRoleNameTip: '请输入角色名称',
+        permissionTip: '授权',
+    }
+}
diff --git a/src/views/app/approle/index.vue b/src/views/app/approle/index.vue
new file mode 100644
index 00000000..9b4dc534
--- /dev/null
+++ b/src/views/app/approle/index.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="layout-padding">
+    <el-card shadow="hover" class="layout-padding-auto">
+      <el-row shadow="hover" v-show="showSearch" class="mb8">
+        <el-form :model="state.queryForm" ref="queryRef" :inline="true">
+          <el-form-item :label="$t('approle.roleName')" prop="roleName">
+            <el-input :placeholder="$t('approle.inputRoleNameTip')" v-model="state.queryForm.roleName"
+              style="max-width: 180px" />
+          </el-form-item>
+          <el-form-item class="ml2">
+            <el-button icon="search" type="primary" @click="getDataList">
+              {{ $t('common.queryBtn') }}
+            </el-button>
+            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <el-button icon="folder-add" type="primary" class="ml10" @click="roleDialogRef.openDialog()" v-auth="'app_approle_add'">
+            {{ $t('common.addBtn') }}
+          </el-button>
+          <el-button icon="upload-filled" type="primary" class="ml10" @click="excelUploadRef.show()" v-auth="'app_approle_export'">
+            {{ $t('common.importBtn') }}
+          </el-button>
+          <el-button icon="Download" type="primary" class="ml10" @click="exportExcel">
+            {{ $t('common.exportBtn') }}
+          </el-button>
+          <el-button :disabled="multiple" icon="Delete" type="primary" class="ml10" v-auth="'app_approle_del'"
+            @click="handleDelete(undefined)">
+            {{ $t('common.delBtn') }}
+          </el-button>
+          <right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px"
+            @queryTable="getDataList"></right-toolbar>
+        </div>
+      </el-row>
+      <el-table :data="state.dataList" v-loading="state.loading" style="width: 100%"
+        @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column type="index" label="序号" width="80" />
+        <el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="roleCode" label="角色标识" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="roleDesc" label="角色描述" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
+        <el-table-column :label="$t('common.action')" width="150">
+          <template #default="scope">
+            <el-button text type="primary" v-auth="'app_approle_edit'"
+              @click="roleDialogRef.openDialog(scope.row.roleId)">{{ $t('common.editBtn') }}</el-button>
+
+            <el-button text type="primary" v-auth="'app_approle_del'" @click="handleDelete(scope.row)">{{
+              $t('common.delBtn')
+            }}</el-button>
+
+            <el-button text type="primary" @click="permessionRef.openDialog(scope.row)" v-auth="'app_approle_perm'">{{
+              $t('approle.permissionTip')
+            }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </el-card>
+
+    <!-- 角色编辑、新增  -->
+    <role-dialog ref="roleDialogRef" @refresh="getDataList()" />
+    <!-- 导入角色 -->
+    <upload-excel ref="excelUploadRef" :title="$t('sysuser.importUserTip')" url="/admin/role/import"
+      temp-url="/admin/sys-file/local/file/role.xlsx" @refreshDataList="getDataList" />
+    <!-- 授权 -->
+    <permession ref="permessionRef" />
+  </div>
+</template>
+
+<script setup lang="ts" name="systemRole">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObj } from "/@/api/app/approle";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { useI18n } from "vue-i18n";
+
+// 引入组件
+const RoleDialog = defineAsyncComponent(() => import('./form.vue'));
+const Permession = defineAsyncComponent(() => import('./permession.vue'))
+const { t } = useI18n()
+
+// 定义变量内容
+const roleDialogRef = ref()
+const permessionRef = ref()
+const excelUploadRef = ref()
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选rows
+const selectObjs = ref([])
+// 是否可以多选
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {
+    roleName: ''
+  },
+  pageList: fetchList // H
+});
+
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  downBlobFile
+} = useTable(state)
+
+
+// 清空搜索条件
+const resetQuery = () => {
+  queryRef.value.resetFields()
+  getDataList()
+}
+
+// 多选事件
+const handleSelectionChange = (val: any) => {
+  selectObjs.value = val
+  multiple.value = !val.length
+}
+
+// 导出excel
+const exportExcel = () => {
+  downBlobFile('/admin/approle/export', state.queryForm, 'approle.xlsx')
+}
+
+// 删除角色
+const handleDelete = (row: any) => {
+  if (!row) {
+    selectObjs.value.forEach((val: any) => {
+      handleDelete(val)
+    });
+    return
+  }
+
+  useMessageBox().confirm(`${t('common.delConfirmText')}：${row.roleName}?`)
+    .then(() => {
+      delObj(row.roleId).then(() => {
+        getDataList();
+        useMessage().success(t('common.delSuccessText'));
+      }).catch((err: any) => {
+        useMessage().error(err.msg)
+      })
+    })
+};
+</script>
diff --git a/src/views/app/approle/permession.vue b/src/views/app/approle/permession.vue
new file mode 100644
index 00000000..6a91a48c
--- /dev/null
+++ b/src/views/app/approle/permession.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="system-role-dialog-container">
+    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" draggable>
+      <el-tree
+          ref="menuTree"
+          :data="state.treeData"
+          :default-checked-keys="state.checkedKeys"
+          :check-strictly="false"
+          :props="state.defaultProps"
+          class="filter-tree"
+          node-key="id"
+          highlight-current
+          show-checkbox
+          default-expand-all/>
+
+      <template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
+				</span>
+      </template>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script setup lang="ts" name="role-permession">
+import {fetchRoleTree, permissionUpd} from '/@/api/app/approle'
+import {pageList} from '/@/api/app/appmenu'
+import {useMessage} from "/@/hooks/message";
+import {Ref} from "vue";
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n();
+
+
+const menuTree = ref()
+
+const state = reactive({
+  checkedKeys: [] as any[],
+  treeData: [] as any[],
+  defaultProps: {
+    label: 'name',
+    value: 'id'
+  },
+  roleId: '',
+  dialog: {
+    isShowDialog: false,
+    title: '分配权限',
+    submitTxt: '更新',
+  },
+});
+
+const checkedKeys: Ref<any[]> = ref([])
+
+// 打开弹窗
+const openDialog = (row: any) => {
+  state.checkedKeys = []
+  state.treeData = []
+  checkedKeys.value = []
+  state.roleId = row.roleId
+  fetchRoleTree(row.roleId).then(res => {
+    checkedKeys.value = res.data
+    return pageList()
+  }).then(r => {
+    state.treeData = r.data
+    state.checkedKeys = resolveAllEunuchNodeId(state.treeData, checkedKeys.value, [])
+  })
+  state.dialog.isShowDialog = true;
+};
+
+// 关闭弹窗
+const closeDialog = () => {
+  state.dialog.isShowDialog = false;
+};
+// 取消
+const onCancel = () => {
+  closeDialog();
+};
+const onSubmit = () => {
+  const menuIds = menuTree.value.getCheckedKeys().join(',').concat(',').concat(menuTree.value.getHalfCheckedKeys().join(','))
+  permissionUpd(state.roleId, menuIds).then(() => {
+    state.dialog.isShowDialog = false;
+    useMessage().success(t('common.editSuccessText'))
+  })
+
+}
+
+const resolveAllEunuchNodeId = (json: any[], idArr: any[], temp: any[]) => {
+  for (let i = 0; i < json.length; i++) {
+    const item = json[i]
+    // 国际化
+    item.name = t(item.name)
+    // 存在子节点，递归遍历;不存在子节点，将json的id添加到临时数组中
+    if (item.children && item.children.length !== 0) {
+      resolveAllEunuchNodeId(item.children, idArr, temp)
+    } else {
+      temp.push(idArr.filter(id => id === item.id))
+    }
+  }
+  return temp
+}
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/app/appuser/form.vue b/src/views/app/appuser/form.vue
new file mode 100644
index 00000000..41555eef
--- /dev/null
+++ b/src/views/app/appuser/form.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="system-user-dialog-container">
+    <el-dialog :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
+      :close-on-click-modal="false" draggable>
+      <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" size="default" label-width="90px">
+        <el-row :gutter="24">
+          <el-col :span="12" class="mb20">
+            <el-form-item :label="$t('appuser.username')" prop="username">
+              <el-input v-model="dataForm.username" placeholder="请输入用户名" :disabled="dataForm.userId !== ''"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="mb20">
+            <el-form-item :label="$t('appuser.password')" prop="password">
+              <el-input v-model="dataForm.password" type="password" placeholder="请输入密码" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="mb20">
+            <el-form-item :label="$t('appuser.name')" prop="name">
+              <el-input v-model="dataForm.name" placeholder="请输入姓名" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="mb20">
+            <el-form-item :label="$t('appuser.phone')" prop="phone">
+              <el-input v-model="dataForm.phone" placeholder="请输入手机号" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="mb20">
+            <el-form-item :label="$t('appuser.role')" prop="role">
+              <el-select v-model="dataForm.role" placeholder="请选择角色" clearable class="w100" multiple>
+                <el-option v-for="item in roleData" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="mb20">
+            <el-form-item :label="$t('appuser.email')" prop="email">
+              <el-input v-model="dataForm.email" placeholder="请输入邮箱" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="mb20">
+            <el-form-item :label="$t('appuser.nickname')" prop="nickname">
+              <el-input v-model="dataForm.nickname" placeholder="请输入昵称" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="mb20">
+            <el-form-item :label="$t('appuser.lockFlag')" prop="lockFlag">
+              <el-radio-group v-model="dataForm.lockFlag">
+                <el-radio :label="item.value" v-for="(item, index) in lock_flag" border :key="index">{{ item.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="visible = false" size="default">{{ $t('common.cancelButtonText') }}</el-button>
+          <el-button type="primary" @click="onSubmit" size="default">{{ $t('common.confirmButtonText') }}</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="systemUserDialog">
+import { getObj, addObj, putObj } from '/@/api/app/appuser'
+import { list as roleList } from '/@/api/app/approle'
+import { useDict } from "/@/hooks/dict";
+import { useI18n } from "vue-i18n";
+import { useMessage } from '/@/hooks/message';
+
+const { t } = useI18n()
+
+// 定义刷新表格emit
+const emit = defineEmits(['refresh']);
+// @ts-ignore
+const { lock_flag } = useDict('lock_flag')
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const roleData = ref<any[]>([])
+
+const dataForm = reactive({
+  userId: '',
+  username: '',
+  password: '' as String | undefined,
+  salt: '',
+  wxOpenid: '',
+  qqOpenid: '',
+  lockFlag: '0',
+  phone: '' as String | undefined,
+  deptId: '',
+  roleList: [],
+  postList: [],
+  nickname: '',
+  name: '',
+  email: '',
+  post: [] as String[],
+  role: [] as String[],
+});
+
+
+const dataRules = ref(
+  {
+    username: [{ required: true, message: "用户名不能为空", trigger: "blur" }, {
+      min: 5,
+      max: 20,
+      message: "用户名称长度必须介于 5 和 20 之间",
+      trigger: "blur"
+    }],
+    password: [{ required: true, message: "密码不能为空", trigger: "blur" }, {
+      min: 6,
+      max: 20,
+      message: "用户密码长度必须介于 6 和 20 之间",
+      trigger: "blur"
+    }],
+    name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
+    role: [{ required: true, message: "角色不能为空", trigger: "blur" }],
+    phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }, {
+      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+      message: "请输入正确的手机号码",
+      trigger: "blur"
+    }],
+    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }]
+  }
+)
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  dataForm.userId = ''
+
+  // 重置表单数据
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields()
+  }
+
+  // 修改获取用户信息
+  if (id) {
+    dataForm.userId = id
+    getUserData(id)
+  }
+  getRoleData()
+};
+
+// 提交
+const onSubmit = () => {
+  dataFormRef.value.validate((valid: boolean) => {
+    if (!valid) {
+      return false
+    }
+    // 更新方法
+    if (dataForm.userId) {
+      if (dataForm.phone && dataForm.phone.indexOf("*") >= 0) {
+        dataForm.phone = undefined
+      }
+      if (dataForm.password && dataForm.password.indexOf("******") >= 0) {
+        dataForm.password = undefined
+      }
+      putObj(dataForm).then(() => {
+        useMessage().success(t('common.editSuccessText'))
+        visible.value = false; // 关闭弹窗
+        emit('refresh');
+      }).catch(err => {
+        useMessage().error(err.msg)
+      })
+    } else {  // 新增方法
+      if (dataForm.phone && dataForm.phone.indexOf("*") > 0) {
+        dataForm.phone = undefined
+      }
+      addObj(dataForm).then(() => {
+        useMessage().success(t('common.addSuccessText'))
+        visible.value = false // 关闭弹窗
+        emit('refresh')
+      }).catch(err => {
+        useMessage().error(err.msg)
+      })
+    }
+  })
+
+};
+
+// 初始化部门数据
+const getUserData = (id: string) => {
+  // 获取部门数据
+  getObj(id).then(res => {
+    Object.assign(dataForm, res.data)
+    dataForm.password = '******'
+    if (res.data.roleList) {
+      dataForm.role = []
+      res.data.roleList.map((item: any) => {
+        dataForm.role.push(item.roleId)
+      })
+    }
+  })
+};
+
+// 角色数据
+const getRoleData = () => {
+  roleList().then(res => {
+    roleData.value = res.data
+  })
+}
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
diff --git a/src/views/app/appuser/i18n/en.ts b/src/views/app/appuser/i18n/en.ts
new file mode 100644
index 00000000..69a1a406
--- /dev/null
+++ b/src/views/app/appuser/i18n/en.ts
@@ -0,0 +1,20 @@
+export default {
+    appuser: {
+        index: 'index',
+        username: 'username',
+        name: 'name',
+        phone: 'phone',
+        post: 'post',
+        role: 'role',
+        lockFlag: 'lockFlag',
+        createTime: 'createTime',
+        password: 'password',
+        dept: 'dept',
+        email: 'email',
+        nickname: 'nickname',
+        inputUsernameTip: 'input username',
+        inputPhoneTip: 'input phone',
+        inputNameTip: 'input name',
+        importUserTip: 'user import'
+    }
+}
diff --git a/src/views/app/appuser/i18n/zh-cn.ts b/src/views/app/appuser/i18n/zh-cn.ts
new file mode 100644
index 00000000..3d7691a4
--- /dev/null
+++ b/src/views/app/appuser/i18n/zh-cn.ts
@@ -0,0 +1,21 @@
+export default {
+    appuser: {
+        index: '序号',
+        username: '用户名',
+        name: '姓名',
+        phone: '手机号',
+        post: '岗位',
+        role: '角色',
+        lockFlag: '状态',
+        createTime: '创建时间',
+        password: '密码',
+        dept: '部门',
+        email: '邮箱',
+        nickname: '昵称',
+        inputUsernameTip: '请输入用户名',
+        inputPhoneTip: '请输入手机号',
+        inputNameTip: '请输入姓名',
+        importUserTip: '用户导入'
+    },
+
+}
diff --git a/src/views/app/appuser/index.vue b/src/views/app/appuser/index.vue
new file mode 100644
index 00000000..194ea85b
--- /dev/null
+++ b/src/views/app/appuser/index.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="layout-padding">
+    <el-card shadow="hover" class="layout-padding-auto">
+          <el-row v-show="showSearch" class="mb8">
+            <el-form :model="state.queryForm" ref="queryRef" :inline="true">
+              <el-form-item :label="$t('appuser.username')" prop="username">
+                <el-input v-model="state.queryForm.username" :placeholder="$t('appuser.inputUsernameTip')" clearable
+                  style="width: 240px" @keyup.enter="getDataList" />
+              </el-form-item>
+              <el-form-item :label="$t('appuser.phone')" prop="phone">
+                <el-input v-model="state.queryForm.phone" :placeholder="$t('appuser.inputPhoneTip')" clearable
+                  style="width: 240px" @keyup.enter="getDataList" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
+                <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+              </el-form-item>
+            </el-form>
+          </el-row>
+          <el-row>
+            <div class="mb8" style="width: 100%">
+              <el-button icon="folder-add" type="primary" class="ml10" @click="userDialogRef.openDialog()"
+                v-auth="'sys_user_add'">
+                {{ $t('common.addBtn') }}
+              </el-button>
+              <el-button icon="upload-filled" type="primary" class="ml10" @click="excelUploadRef.show()"
+                v-auth="'sys_user_add'">
+                {{ $t('common.importBtn') }}
+              </el-button>
+              <el-button icon="Download" type="primary" class="ml10" @click="exportExcel" v-auth="'sys_user_export'">
+                {{ $t('common.exportBtn') }}
+              </el-button>
+              <el-button :disabled="multiple" icon="Delete" type="primary" class="ml10" v-auth="'sys_user_del'"
+                @click="handleDelete(undefined)">
+                {{ $t('common.delBtn') }}
+              </el-button>
+              <right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px"
+                @queryTable="getDataList"></right-toolbar>
+            </div>
+          </el-row>
+          <el-table :data="state.dataList" v-loading="state.loading" style="width: 100%"
+            @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="50" align="center" />
+            <el-table-column type="index" :label="$t('appuser.index')" width="80" />
+            <el-table-column prop="username" :label="$t('appuser.username')" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="name" :label="$t('appuser.name')" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="phone" :label="$t('appuser.phone')" show-overflow-tooltip></el-table-column>
+            <el-table-column :label="$t('appuser.role')" show-overflow-tooltip>
+              <template #default="scope">
+                <el-tag v-for="(item, index) in scope.row.roleList" type="success" :key="index">{{ item.roleName }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('appuser.lockFlag')" show-overflow-tooltip>
+              <template #default="scope">
+                <dict-tag :options="lock_flag" :value="scope.row.lockFlag"></dict-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" :label="$t('appuser.createTime')"
+              show-overflow-tooltip></el-table-column>
+            <el-table-column :label="$t('common.action')" width="100">
+              <template #default="scope">
+                <el-button   text type="primary" @click="userDialogRef.openDialog(scope.row.userId)"
+                  v-auth="'sys_user_edit'"> {{
+                    $t('common.editBtn')
+                  }}
+                </el-button>
+                <el-button   text type="primary" @click="handleDelete(scope.row)" v-auth="'sys_user_del'">
+                  {{ $t('common.delBtn') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination">
+          </pagination>
+
+        </el-card>
+    <user-form ref="userDialogRef" @refresh="getDataList()" />
+
+    <upload-excel ref="excelUploadRef" :title="$t('appuser.importUserTip')" url="/admin/user/import"
+      temp-url="/admin/sys-file/local/file/user.xlsx" @refreshDataList="getDataList" />
+  </div>
+</template>
+
+<script setup lang="ts" name="systemUser">
+import { fetchList, delObj } from '/@/api/app/appuser'
+import { BasicTableProps, useTable } from '/@/hooks/table'
+import { useDict } from '/@/hooks/dict'
+import { useMessage, useMessageBox } from '/@/hooks/message'
+import { useI18n } from 'vue-i18n'
+
+// 动态引入组件
+const UserForm = defineAsyncComponent(() => import('./form.vue'));
+
+const { lock_flag } = useDict('lock_flag')
+const { t } = useI18n()
+
+// 定义变量内容
+const userDialogRef = ref();
+const excelUploadRef = ref();
+const queryRef = ref();
+const showSearch = ref(true)
+
+
+// 多选rows
+const selectObjs = ref([]);
+// 是否可以多选
+const multiple = ref(true);
+
+// 定义表格查询、后台调用的API
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {
+    username: '',
+    phone: ''
+  },
+  pageList: fetchList
+});
+
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  downBlobFile
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  queryRef.value.resetFields()
+  getDataList()
+}
+
+
+// 多选事件
+const handleSelectionChange = (val: any) => {
+  selectObjs.value = val
+  multiple.value = !val.length
+}
+
+// 导出excel
+const exportExcel = () => {
+  downBlobFile('/admin/appuser/export', state.queryForm, 'users.xlsx')
+}
+
+// 删除用户
+const handleDelete = (row: any) => {
+  if (!row) {
+    selectObjs.value.forEach(val => {
+      handleDelete(val)
+    });
+    return
+  }
+
+  useMessageBox().confirm(`${t('common.delConfirmText')}：${row.username} ?`).then(() => {
+    // 删除用户的接口
+    delObj(row.userId).then(() => {
+      getDataList();
+      useMessage().success(t('common.delSuccessText'))
+    }).catch(err => {
+      useMessage().error(err.msg)
+    })
+  })
+};
+</script>