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 });
         },
     },