diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts
index c57e42b1..0604cfbf 100644
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@@ -2,13 +2,11 @@ import type { Recordable } from '@vben/types';
 
 import { h } from 'vue';
 
-import { IconifyIcon } from '@vben/icons';
-import { $te } from '@vben/locales';
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
-import { get, isFunction, isString } from '@vben/utils';
+import { get } from '@vben/utils';
 
 import { objectOmit } from '@vueuse/core';
-import { Button, Image, Popconfirm, Switch, Tag } from 'ant-design-vue';
+import { Button, Image, Switch, Tag } from 'ant-design-vue';
 
 import { $t } from '#/locales';
 
@@ -121,138 +119,6 @@ setupVbenVxeTable({
       },
     });
 
-    /**
-     * 注册表格的操作按钮渲染器
-     */
-    vxeUI.renderer.add('CellOperation', {
-      renderTableDefault({ attrs, options, props }, { column, row }) {
-        const defaultProps = { size: 'small', type: 'link', ...props };
-        let align = 'end';
-        switch (column.align) {
-          case 'center': {
-            align = 'center';
-            break;
-          }
-          case 'left': {
-            align = 'start';
-            break;
-          }
-          default: {
-            align = 'end';
-            break;
-          }
-        }
-        const presets: Recordable<Recordable<any>> = {
-          delete: {
-            danger: true,
-            text: $t('common.delete'),
-          },
-          edit: {
-            text: $t('common.edit'),
-          },
-        };
-        const operations: Array<Recordable<any>> = (
-          options || ['edit', 'delete']
-        )
-          .map((opt) => {
-            if (isString(opt)) {
-              return presets[opt]
-                ? { code: opt, ...presets[opt], ...defaultProps }
-                : {
-                    code: opt,
-                    text: $te(`common.${opt}`) ? $t(`common.${opt}`) : opt,
-                    ...defaultProps,
-                  };
-            } else {
-              return { ...defaultProps, ...presets[opt.code], ...opt };
-            }
-          })
-          .map((opt) => {
-            const optBtn: Recordable<any> = {};
-            Object.keys(opt).forEach((key) => {
-              optBtn[key] = isFunction(opt[key]) ? opt[key](row) : opt[key];
-            });
-            return optBtn;
-          })
-          .filter((opt) => opt.show !== false);
-
-        function renderBtn(opt: Recordable<any>, listen = true) {
-          return h(
-            Button,
-            {
-              ...props,
-              ...opt,
-              icon: undefined,
-              onClick: listen
-                ? () =>
-                    attrs?.onClick?.({
-                      code: opt.code,
-                      row,
-                    })
-                : undefined,
-            },
-            {
-              default: () => {
-                const content = [];
-                if (opt.icon) {
-                  content.push(
-                    h(IconifyIcon, { class: 'size-5', icon: opt.icon }),
-                  );
-                }
-                content.push(opt.text);
-                return content;
-              },
-            },
-          );
-        }
-
-        function renderConfirm(opt: Recordable<any>) {
-          return h(
-            Popconfirm,
-            {
-              getPopupContainer(el) {
-                return el.closest('tbody') || document.body;
-              },
-              placement: 'topLeft',
-              title: $t('ui.actionTitle.delete', [attrs?.nameTitle || '']),
-              ...props,
-              ...opt,
-              icon: undefined,
-              onConfirm: () => {
-                attrs?.onClick?.({
-                  code: opt.code,
-                  row,
-                });
-              },
-            },
-            {
-              default: () => renderBtn({ ...opt }, false),
-              description: () =>
-                h(
-                  'div',
-                  { class: 'truncate' },
-                  $t('ui.actionMessage.deleteConfirm', [
-                    row[attrs?.nameField || 'name'],
-                  ]),
-                ),
-            },
-          );
-        }
-
-        const btns = operations.map((opt) =>
-          opt.code === 'delete' ? renderConfirm(opt) : renderBtn(opt),
-        );
-        return h(
-          'div',
-          {
-            class: 'flex table-operations',
-            style: { justifyContent: align },
-          },
-          btns,
-        );
-      },
-    });
-
     // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
     // vxeUI.formats.add
   },
diff --git a/apps/web-antd/src/api/api.ts b/apps/web-antd/src/api/api.ts
new file mode 100644
index 00000000..3ee51be3
--- /dev/null
+++ b/apps/web-antd/src/api/api.ts
@@ -0,0 +1,26 @@
+import type { PaginationResult } from '#/types';
+
+import { requestClient } from './request';
+
+export interface SysApiParams {
+  name?: string;
+  method?: string;
+  path?: string;
+  page?: number;
+  size?: number;
+}
+
+export interface SysApiResult {
+  id: number;
+  name: string;
+  method: string;
+  path: string;
+  remark?: string;
+}
+
+/**
+ * 获取系统 API 列表
+ */
+export function getSysApiList(params: SysApiParams) {
+  return requestClient.get<PaginationResult>('/api/v1/sys/apis', { params });
+}
diff --git a/apps/web-antd/src/api/index.ts b/apps/web-antd/src/api/index.ts
index 36952791..02d6e790 100644
--- a/apps/web-antd/src/api/index.ts
+++ b/apps/web-antd/src/api/index.ts
@@ -1,4 +1,7 @@
+export * from './api';
 export * from './auth';
 export * from './log';
 export * from './menu';
+export * from './monitor';
+export * from './role';
 export * from './user';
diff --git a/apps/web-antd/src/api/menu.ts b/apps/web-antd/src/api/menu.ts
index 49badff2..6d2bc9c8 100644
--- a/apps/web-antd/src/api/menu.ts
+++ b/apps/web-antd/src/api/menu.ts
@@ -2,6 +2,24 @@ import type { RouteRecordStringComponent } from '@vben/types';
 
 import { requestClient } from '#/api/request';
 
+export interface SysMenuResult {
+  id: number;
+  title: string;
+  name: string;
+  path: string;
+  sort: number;
+  icon?: string;
+  type: number;
+  component?: string;
+  perms?: string;
+  status: 0 | 1;
+  display: 0 | 1;
+  cache: 0 | 1;
+  remark?: string;
+  parent_id?: number;
+  created_time: string;
+}
+
 /**
  * 获取用户所有菜单
  */
diff --git a/apps/web-antd/src/api/monitor.ts b/apps/web-antd/src/api/monitor.ts
new file mode 100644
index 00000000..2460f2a3
--- /dev/null
+++ b/apps/web-antd/src/api/monitor.ts
@@ -0,0 +1,22 @@
+import { requestClient } from './request';
+
+export interface ServerMonitorResult {
+  cpu: Record<string, any>;
+  mem: Record<string, any>;
+  sys: Record<string, any>;
+  disk: Record<string, any>[];
+  service: Record<string, any>;
+}
+
+export interface RedisMonitorResult {
+  info: Record<string, any>;
+  stats: Record<string, any>[];
+}
+
+export function getServerMonitor() {
+  return requestClient.get<ServerMonitorResult>('/api/v1/monitors/server');
+}
+
+export function getRedisMonitor() {
+  return requestClient.get<RedisMonitorResult>('/api/v1/monitors/redis');
+}
diff --git a/apps/web-antd/src/api/role.ts b/apps/web-antd/src/api/role.ts
new file mode 100644
index 00000000..1f09403f
--- /dev/null
+++ b/apps/web-antd/src/api/role.ts
@@ -0,0 +1,27 @@
+import type { SysMenuResult } from '.';
+
+import { requestClient } from './request';
+
+export interface SysRoleParams {
+  name?: string;
+  status?: number;
+  page?: number;
+  size?: number;
+}
+
+export interface SysRoleResult {
+  id: number;
+  name: string;
+  status: number;
+  remark?: string;
+  created_time: string;
+  updated_time: string;
+  menus?: SysMenuResult[];
+}
+
+/**
+ * 获取系统角色列表
+ */
+export function getSysRoleList(params: SysRoleParams) {
+  return requestClient.get<SysRoleResult>('/api/v1/sys/roles', { params });
+}
diff --git a/apps/web-antd/src/locales/langs/en-US/page.json b/apps/web-antd/src/locales/langs/en-US/page.json
index 7f01ac8c..738bd7c9 100644
--- a/apps/web-antd/src/locales/langs/en-US/page.json
+++ b/apps/web-antd/src/locales/langs/en-US/page.json
@@ -39,6 +39,7 @@
     "created_time": "Create Time",
     "id": "ID",
     "mark": "Mark",
-    "operation": "Operation"
+    "operation": "Operation",
+    "updated_time": "Update time"
   }
 }
diff --git a/apps/web-antd/src/locales/langs/zh-CN/page.json b/apps/web-antd/src/locales/langs/zh-CN/page.json
index 38ce74b6..fb5860ee 100644
--- a/apps/web-antd/src/locales/langs/zh-CN/page.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/page.json
@@ -39,6 +39,7 @@
     "created_time": "创建时间",
     "id": "序号",
     "mark": "备注",
-    "operation": "操作"
+    "operation": "操作",
+    "updated_time": "更新时间"
   }
 }
diff --git a/apps/web-antd/src/views/admin/api/index.vue b/apps/web-antd/src/views/admin/api/index.vue
index 0102cc38..caa6f516 100644
--- a/apps/web-antd/src/views/admin/api/index.vue
+++ b/apps/web-antd/src/views/admin/api/index.vue
@@ -1,5 +1,118 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SysApiResult } from '#/api';
+
+import { Page } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysApiList } from '#/api';
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    collapsed: true,
+    showCollapseButton: true,
+    submitButtonOptions: {
+      content: $t('page.form.query'),
+    },
+    schema: [
+      {
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入 API 名称',
+        },
+        fieldName: 'name',
+        label: '名称',
+      },
+      {
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入请求方法',
+        },
+        fieldName: 'method',
+        label: '请求方法',
+      },
+      {
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入 API 路径',
+        },
+        fieldName: 'path',
+        label: '请求路径',
+      },
+    ],
+  },
+  gridOptions: {
+    rowConfig: {
+      keyField: 'id',
+    },
+    checkboxConfig: {
+      highlight: true,
+    },
+    exportConfig: {},
+    printConfig: {},
+    toolbarConfig: {
+      export: true,
+      print: true,
+      refresh: { code: 'query' },
+      custom: true,
+      zoom: true,
+    },
+    columns: [
+      { field: 'checkbox', type: 'checkbox', align: 'left', width: 50 },
+      {
+        field: 'seq',
+        title: $t('page.table.id'),
+        type: 'seq',
+        width: 50,
+      },
+      { field: 'name', title: 'API 名称', width: 250 },
+      {
+        field: 'method',
+        title: '请求方法',
+        cellRender: {
+          name: 'CellTag',
+          options: [
+            { color: 'processing', label: 'GET', value: 'GET' },
+            { color: 'success', label: 'POST', value: 'POST' },
+            { color: 'cyan', label: 'PUT', value: 'PUT' },
+            { color: 'error', label: 'PUT', value: 'DELETE' },
+          ],
+        },
+        width: 250,
+      },
+      { field: 'path', title: 'API 路径', align: 'left', width: 350 },
+      { field: 'remark', title: $t('page.table.mark'), align: 'left' },
+      {
+        field: 'created_time',
+        title: $t('page.table.created_time'),
+        width: 168,
+      },
+      {
+        field: 'operation',
+        title: $t('page.table.operation'),
+        align: 'center',
+        fixed: 'right',
+        width: 130,
+      },
+    ],
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSysApiList({
+            page: page.currentPage,
+            size: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  } as VxeTableGridOptions<SysApiResult>,
+});
+</script>
+
 <template>
-  <div>
-    <h1>home page</h1>
-  </div>
+  <Page>
+    <Grid />
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/admin/role/index.vue b/apps/web-antd/src/views/admin/role/index.vue
index 0102cc38..01b4196e 100644
--- a/apps/web-antd/src/views/admin/role/index.vue
+++ b/apps/web-antd/src/views/admin/role/index.vue
@@ -1,5 +1,119 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SysRoleResult } from '#/api';
+
+import { Page } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysRoleList } from '#/api';
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    collapsed: true,
+    showCollapseButton: true,
+    submitButtonOptions: {
+      content: $t('page.form.query'),
+    },
+    schema: [
+      {
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入角色名称',
+        },
+        fieldName: 'name',
+        label: '角色名称',
+      },
+      {
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '已启用',
+              value: 1,
+            },
+            {
+              label: '已停用',
+              value: 1,
+            },
+          ],
+          placeholder: $t('page.form.select'),
+        },
+        fieldName: 'status',
+        label: $t('page.form.status'),
+      },
+    ],
+  },
+  gridOptions: {
+    rowConfig: {
+      keyField: 'id',
+    },
+    checkboxConfig: {
+      highlight: true,
+    },
+    minHeight: 180,
+    exportConfig: {},
+    printConfig: {},
+    toolbarConfig: {
+      export: true,
+      print: true,
+      refresh: { code: 'query' },
+      custom: true,
+      zoom: true,
+    },
+    columns: [
+      { field: 'checkbox', type: 'checkbox', align: 'left', width: 50 },
+      {
+        field: 'seq',
+        title: $t('page.table.id'),
+        type: 'seq',
+        width: 50,
+      },
+      { field: 'name', title: '角色名称' },
+      {
+        field: 'status',
+        title: '状态',
+        cellRender: {
+          name: 'CellTag',
+        },
+      },
+      { field: 'remark', title: $t('page.table.mark'), align: 'left' },
+      {
+        field: 'created_time',
+        title: $t('page.table.created_time'),
+        width: 168,
+      },
+      {
+        field: 'created_time',
+        title: $t('page.table.updated_time'),
+        width: 168,
+      },
+      {
+        field: 'operation',
+        title: $t('page.table.operation'),
+        align: 'center',
+        fixed: 'right',
+        width: 130,
+      },
+    ],
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSysRoleList({
+            page: page.currentPage,
+            size: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  } as VxeTableGridOptions<SysRoleResult>,
+});
+</script>
+
 <template>
-  <div>
-    <h1>home page</h1>
-  </div>
+  <Page>
+    <Grid />
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/log/login/index.vue b/apps/web-antd/src/views/log/login/index.vue
index 172ae149..2ff418cc 100644
--- a/apps/web-antd/src/views/log/login/index.vue
+++ b/apps/web-antd/src/views/log/login/index.vue
@@ -80,7 +80,7 @@ const [Grid] = useVbenVxeGrid({
       { field: 'username', title: '用户名' },
       {
         field: 'status',
-        title: '登录状态',
+        title: '状态',
         cellRender: {
           name: 'CellTag',
           options: [
diff --git a/apps/web-antd/src/views/log/opera/index.vue b/apps/web-antd/src/views/log/opera/index.vue
index 67fbf3c1..4afd240a 100644
--- a/apps/web-antd/src/views/log/opera/index.vue
+++ b/apps/web-antd/src/views/log/opera/index.vue
@@ -97,7 +97,7 @@ const [Grid] = useVbenVxeGrid({
       { field: 'path', title: '请求路径', width: 150 },
       {
         field: 'status',
-        title: '操作状态',
+        title: '状态',
         cellRender: {
           name: 'CellTag',
           options: [
diff --git a/apps/web-antd/src/views/monitor/redis/index.vue b/apps/web-antd/src/views/monitor/redis/index.vue
index 0102cc38..26fbfb3d 100644
--- a/apps/web-antd/src/views/monitor/redis/index.vue
+++ b/apps/web-antd/src/views/monitor/redis/index.vue
@@ -1,5 +1,60 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+
+import { getRedisMonitor } from '#/api';
+import ActiveSeries from '#/views/monitor/redis/components/active-series.vue';
+import CommandsSeries from '#/views/monitor/redis/components/commands-series.vue';
+
+const loading = ref<boolean>(false);
+const redisInfo = ref<Record<string, any>>({});
+const redisStats = ref<Record<string, any>[]>([]);
+
+const usedMemory = ref<number>(0);
+const redisUsedMemory = computed(() => [
+  {
+    name: '已使用内存',
+    value: usedMemory.value,
+  },
+]);
+
+const fetchRedisData = async () => {
+  loading.value = true;
+  try {
+    const res = await getRedisMonitor();
+    redisInfo.value = res.info;
+    redisStats.value = res.stats;
+  } catch {
+    // console.error(err);
+  } finally {
+    loading.value = false;
+  }
+};
+fetchRedisData();
+
+watch(redisInfo, (val) => {
+  usedMemory.value = Number.parseFloat(
+    (Number(val.used_memory) / 1024 / 1024).toFixed(2),
+  );
+});
+</script>
+
 <template>
-  <div>
-    <h1>home page</h1>
-  </div>
+  <a-card title="基本信息" :loading="loading" class="info-card">
+    <a-descriptions>
+      <a-descriptions-item label="Test">123</a-descriptions-item>
+    </a-descriptions>
+  </a-card>
+  <a-space style="padding-top: 22px" />
+  <a-row :gutter="20">
+    <a-col :span="12">
+      <a-card title="命令统计" :loading="loading" class="info-card">
+        <CommandsSeries :stats="redisStats" />
+      </a-card>
+    </a-col>
+    <a-col :span="12">
+      <a-card title="已使用内存" :loading="loading" class="info-card">
+        <ActiveSeries :memory="redisUsedMemory" />
+      </a-card>
+    </a-col>
+  </a-row>
 </template>