diff --git a/src/components/ErrorDialog.vue b/src/components/ErrorDialog.vue
new file mode 100644
index 0000000..fb0568f
--- /dev/null
+++ b/src/components/ErrorDialog.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { ElIcon, ElSwitch } from "element-plus";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+
+defineOptions({
+    name: 'ErrorDialog',
+});
+
+// 定义 Props 类型
+interface ErrorDialogProps {
+    err: AxiosInterceptorError;
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<ErrorDialogProps>(), {});
+
+// 定义 State 类型
+interface ErrorDialogState {
+    show: boolean;
+}
+
+// state 属性
+const state = reactive<ErrorDialogState>({
+    show: false,
+});
+
+// 定义 Data 类型
+interface ErrorDialogData {
+}
+
+// 内部数据
+const data: ErrorDialogData = {};
+
+interface ErrorDialogExpose {
+    state: ErrorDialogState;
+    data: ErrorDialogData;
+}
+
+const expose: ErrorDialogExpose = {
+    state,
+    data,
+};
+// 定义组件公开内容
+defineExpose(expose);
+
+export type {
+    ErrorDialogProps,
+    ErrorDialogState,
+}
+</script>
+
+<template>
+    <div class="error-dialog flex-column-container">
+        <div class="flex-row-container">
+            <ElIcon :size="20" style="color: #ff4d4f;">
+                <CircleCloseFilled/>
+            </ElIcon>
+            <div class="flex-item-fill">
+                {{ props.err?.message }}
+            </div>
+            <div v-if="props.err?.data?.error">
+                <ElSwitch size="small" v-model="state.show"/>
+                查看详情
+            </div>
+        </div>
+        <div v-if="props.err?.data?.error && state.show" class="show-details flex-item-fill">
+            <pre class="show-details-pre">{{ props.err?.data?.error }}</pre>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.show-details-pre {
+    width: 790px;
+    height: 470px;
+    overflow: auto;
+    padding: 0;
+}
+</style>
+
+<style>
+.el-dialog:has(> .el-dialog__body > .error-dialog) {
+    min-height: 160px;
+}
+
+.el-dialog:has(> .el-dialog__body > .error-dialog > .show-details) {
+    height: 600px !important;
+}
+</style>
diff --git a/src/config.ts b/src/config.ts
index 0c8fb1e..6d3d16b 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -2,6 +2,8 @@ import type { InternalAxiosRequestConfig } from "axios";
 import { Constant, initGlobalConfig } from "@ease-forge/shared";
 import { initGlobalConfigWithRuntime } from "@ease-forge/runtime";
 import router from "@/router";
+import { createVNode } from "vue";
+import ErrorDialog from "@/components/ErrorDialog.vue";
 
 function globalConfig() {
     window.globalConfig.customAxios = axiosInstance => {
@@ -30,6 +32,7 @@ function globalConfig() {
                     status: response?.status ?? -1,
                     title: "系统错误",
                     message: "",
+                    data: response?.data,
                 };
                 if (!error || !response) {
                     err.message = "请求服务端异常";
@@ -46,7 +49,18 @@ function globalConfig() {
                         err.message = message ?? Constant.defHttpErrorMsg[response.status] ?? "服务器异常";
                     }
                 }
-                system.msg(err.message);
+                system.showDialog(createVNode(ErrorDialog, {
+                    err,
+                }), {
+                    title: '业务异常',
+                    width: 800,
+                    height: 120,
+                    showClose: true,
+                    showMax: false,
+                    showCancelButton: false,
+                    showOkButton: true,
+                    okButtonText: "关闭",
+                }).finally();
                 return Promise.reject(err);
             },
         );
diff --git a/src/views/user/roles.vue b/src/views/user/roles.vue
index f592f69..63e2baa 100644
--- a/src/views/user/roles.vue
+++ b/src/views/user/roles.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { createVNode, reactive } from "vue";
 import { ElButton } from "element-plus";
-import { Delete, Plus, Search } from "@element-plus/icons-vue";
+import { Delete, EditPen, Plus, Search } from "@element-plus/icons-vue";
 import DataForm from "@/components/data-form/DataForm.vue";
 import type { FormField } from "@/components/data-form/DataFormTypes.ts";
 import { AgGridVue } from "ag-grid-vue3";
-import type { GridOptions } from "ag-grid-enterprise";
+import type { GridOptions, IServerSideGetRowsParams } from "ag-grid-enterprise";
 import type { GridApi, GridReadyEvent } from "ag-grid-community";
 import { localeText as localeTextCn } from "@/components/yvTable/yv-aggrid-cn.locale";
+import { Request } from "@ease-forge/shared";
 
 // 定义 Props 类型
 interface ComponentProps {
@@ -18,12 +19,14 @@ const props = withDefaults(defineProps<ComponentProps>(), {});
 
 // 定义 State 类型
 interface ComponentState {
+    loading: boolean;
     queryData: any;
     grid1Data: Array<any>;
 }
 
 // state 属性
 const state = reactive<ComponentState>({
+    loading: false,
     queryData: {},
     grid1Data: [],
 });
@@ -63,6 +66,7 @@ const data: ComponentData = {
         // suppressLoadingOverlay: true,
         // 选择行配置
         rowSelection: "single",
+        rowModelType: "serverSide",
         columnDefs: [
             { field: 'id', headerName: 'id', editable: false, hide: true },
             { field: 'roleCode', headerName: '角色编号', editable: false },
@@ -77,19 +81,128 @@ const data: ComponentData = {
         paginationPageSize: 50,
         // suppressPaginationPanel
         onGridReady(event: GridReadyEvent) {
-            data.api = event.api
+            data.api = event.api;
+            data.api.setServerSideDatasource({ getRows: serverSideDatasource });
         },
     },
 };
 
+function reload() {
+    data.api.paginationGoToPage(0);
+    data.api.setServerSideDatasource({ getRows: serverSideDatasource });
+}
+
+function serverSideDatasource(params: IServerSideGetRowsParams) {
+    const { startRow, endRow } = params.request;
+    console.log("startRow, endRow ", params.request);
+    const pageSize = endRow - startRow;
+    const pageNo = Math.floor(startRow / pageSize) + 1;
+    state.loading = true;
+    Request.request.get<PageData>(
+        "/api/workbench/UserPermissions@queryRole",
+        {
+            params: {
+                ...state.queryData,
+                pageSize,
+                pageNo,
+            },
+        },
+    ).then(page => {
+        params.success({ rowData: page.records, rowCount: page.total })
+    }).finally(() => state.loading = false);
+}
+
+function addOrUpdate(add: boolean = true) {
+    let row = {};
+    let ref;
+    if (!add) {
+        const select = data.api?.getSelectedRows()?.[0];
+        if (!select) {
+            system.msg("未选择数据行");
+            return;
+        }
+        row = select;
+    }
+    system.showDialog(createVNode(DataForm, {
+        refCallback: v => ref = v,
+        data: row,
+        formFields: [
+            {
+                dataPath: 'roleCode', label: '角色编号', input: 'Input',
+                inputProps: {
+                    placeholder: '角色编号',
+                    disabled: !add,
+                }
+            },
+            {
+                dataPath: 'roleName', label: '角色名称', input: 'Input',
+                inputProps: {
+                    placeholder: '角色名称'
+                }
+            },
+            {
+                dataPath: 'isEnable', label: '启用', input: 'Switch',
+                inputProps: {
+                    inactiveValue: 0,
+                    activeValue: 1,
+                    inlinePrompt: true,
+                    inactiveText: "禁用",
+                    activeText: "启用",
+                },
+            },
+        ],
+        rules: {
+            roleCode: [
+                { required: true, message: "角色编号必填", trigger: "blur" },
+            ],
+            roleName: [
+                { required: true, message: "角色名称必填", trigger: "blur" },
+            ],
+        },
+        showMessage: true,
+        columnCount: 1,
+        labelWidth: '90px'
+    }), {
+        title: `${add ? "新增" : "编辑"}用户`,
+        width: 480,
+        height: 300,
+        showClose: true,
+        showMax: false,
+        showCancelButton: true,
+        showOkButton: true,
+        okButtonText: '确定',
+        cancelButtonText: '取消',
+        manualClose: async (close) => {
+            await ref.data.formRef.validate();
+            Request.request.post(`/api/workbench/UserPermissions@${add ? "addRole" : "updateRole"}`, row).then(() => {
+                close();
+                reload();
+            });
+        },
+    }).then().finally()
+}
+
+function delRole() {
+    const select = data.api?.getSelectedRows()?.[0];
+    if (!select) {
+        system.msg("未选择数据行");
+        return;
+    }
+    system.confirm(`是否删除用户: ${select.loginName}?`).then(() => {
+        Request.request.post(`/api/workbench/UserPermissions@delRole?id=${select.id}`).then(() => {
+            reload();
+        });
+    });
+}
 </script>
 
 <template>
     <div class="dashboard flex-column-container">
         <div class="tools flex-item-fixed">
-            <ElButton :icon="Search">查询</ElButton>
-            <ElButton :icon="Plus">新增</ElButton>
-            <ElButton :icon="Delete" type="danger" :plain="true">删除</ElButton>
+            <ElButton :icon="Search" :loading="state.loading" @click="reload">查询</ElButton>
+            <ElButton :icon="Plus" @click="addOrUpdate(true)">新增</ElButton>
+            <ElButton :icon="EditPen" @click="addOrUpdate(false)">编辑</ElButton>
+            <ElButton :icon="Delete" type="danger" :plain="true" @click="delRole">删除</ElButton>
         </div>
         <DataForm
             class="query-form flex-item-fixed"
diff --git a/src/views/user/users.vue b/src/views/user/users.vue
index 0a6b8fb..e54f662 100644
--- a/src/views/user/users.vue
+++ b/src/views/user/users.vue
@@ -80,10 +80,10 @@ const data: ComponentData = {
         ],
         pagination: true,
         paginationPageSize: 50,
-        cacheBlockSize: 50,
+        // cacheBlockSize: 50,
         // suppressPaginationPanel
         onGridReady(event: GridReadyEvent) {
-            data.api = event.api
+            data.api = event.api;
             data.api.setServerSideDatasource({ getRows: serverSideDatasource });
         },
     },