feat: add api and role related simple views (#13)

Author: wu-clan

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

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

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';

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;
+}
+
 /**
  * 获取用户所有菜单
  */

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');
+}

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

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"
   }
 }

apps/web-antd/src/locales/langs/zh-CN/page.json

@@ -39,6 +39,7 @@
     "created_time": "创建时间",
     "id": "序号",
     "mark": "备注",
-    "operation": "操作"
+    "operation": "操作",
+    "updated_time": "更新时间"
   }
 }