feat: add log related simple views (#12)

Author: wu-clan

apps/web-antd/src/adapter/vxe-table.ts

@@ -1,8 +1,16 @@
+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 { objectOmit } from '@vueuse/core';
+import { Button, Image, Popconfirm, Switch, Tag } from 'ant-design-vue';
 
-import { Button, Image } from 'ant-design-vue';
+import { $t } from '#/locales';
 
 import { useVbenForm } from './form';
 
@@ -15,7 +23,7 @@ setupVbenVxeTable({
         columnConfig: {
           resizable: true,
         },
-        minHeight: 180,
+        minHeight: 320,
         formConfig: {
           // 全局禁用vxe-table的表单配置，使用formOptions
           enabled: false,
@@ -36,6 +44,15 @@ setupVbenVxeTable({
       },
     });
 
+    /**
+     * 解决vxeTable在热更新时可能会出错的问题
+     */
+    vxeUI.renderer.forEach((_item, key) => {
+      if (key.startsWith('Cell')) {
+        vxeUI.renderer.delete(key);
+      }
+    });
+
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
     vxeUI.renderer.add('CellImage', {
       renderTableDefault(_renderOpts, params) {
@@ -56,6 +73,186 @@ setupVbenVxeTable({
       },
     });
 
+    // 单元格渲染：Tag
+    vxeUI.renderer.add('CellTag', {
+      renderTableDefault({ options, props }, { column, row }) {
+        const value = get(row, column.field);
+        const tagOptions = options ?? [
+          { color: 'success', label: $t('common.enabled'), value: 1 },
+          { color: 'error', label: $t('common.disabled'), value: 0 },
+        ];
+        const tagItem = tagOptions.find((item) => item.value === value);
+        return h(
+          Tag,
+          {
+            ...props,
+            ...objectOmit(tagItem ?? {}, ['label']),
+          },
+          { default: () => tagItem?.label ?? value },
+        );
+      },
+    });
+
+    vxeUI.renderer.add('CellSwitch', {
+      renderTableDefault({ attrs, props }, { column, row }) {
+        const loadingKey = `__loading_${column.field}`;
+        const finallyProps = {
+          checkedChildren: $t('common.enabled'),
+          checkedValue: 1,
+          unCheckedChildren: $t('common.disabled'),
+          unCheckedValue: 0,
+          ...props,
+          checked: row[column.field],
+          loading: row[loadingKey] ?? false,
+          'onUpdate:checked': onChange,
+        };
+        async function onChange(newVal: any) {
+          row[loadingKey] = true;
+          try {
+            const result = await attrs?.beforeChange?.(newVal, row);
+            if (result !== false) {
+              row[column.field] = newVal;
+            }
+          } finally {
+            row[loadingKey] = false;
+          }
+        }
+        return h(Switch, finallyProps);
+      },
+    });
+
+    /**
+     * 注册表格的操作按钮渲染器
+     */
+    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
   },
@@ -64,4 +261,12 @@ setupVbenVxeTable({
 
 export { useVbenVxeGrid };
 
+export type OnActionClickParams<T = Recordable<any>> = {
+  code: string;
+  row: T;
+};
+
+export type OnActionClickFn<T = Recordable<any>> = (
+  params: OnActionClickParams<T>,
+) => void;
 export type * from '@vben/plugins/vxe-table';

apps/web-antd/src/api/index.ts

@@ -1,3 +1,4 @@
 export * from './auth';
+export * from './log';
 export * from './menu';
 export * from './user';

apps/web-antd/src/api/log.ts

@@ -0,0 +1,55 @@
+import type { PaginationResult } from '#/types';
+
+import { requestClient } from './request';
+
+export interface LoginLogParams {
+  username?: string;
+  status?: number;
+  ip?: string;
+  page?: number;
+  size?: number;
+}
+
+export interface LoginLogResult {
+  id: number;
+  username: string;
+  status: 0 | 1;
+  ip: string;
+  country?: string;
+  region?: string;
+  os?: string;
+  browser?: string;
+  device?: string;
+  msg: string;
+  login_time: string;
+}
+
+export type OperaLogParams = LoginLogParams;
+
+export interface OperaLogResult {
+  id: number;
+  trace_id: string;
+  username?: string;
+  method: string;
+  title: string;
+  path: string;
+  ip: string;
+  country?: string;
+  os?: string;
+  browser?: string;
+  device?: string;
+  args?: JSON;
+  status: 0 | 1;
+  code: string;
+  msg: string;
+  cost_time: number;
+  opera_time: string;
+}
+
+export function getLoginLogListApi(params: LoginLogParams) {
+  return requestClient.get<PaginationResult>('/api/v1/logs/login', { params });
+}
+
+export function getOperaLogListApi(params: OperaLogParams) {
+  return requestClient.get<PaginationResult>('/api/v1/logs/opera', { params });
+}

apps/web-antd/src/locales/langs/en-US/page.json

@@ -13,6 +13,11 @@
     "title": "Dashboard",
     "workspace": "Workspace"
   },
+  "form": {
+    "query": "Query",
+    "select": "Please select",
+    "status": "Status"
+  },
   "menu": {
     "admin": "System Admin",
     "automation": "System Auto",
@@ -29,5 +34,11 @@
     "sysMenu": "System User",
     "sysRole": "System Role",
     "sysUser": "System User"
+  },
+  "table": {
+    "created_time": "Create Time",
+    "id": "ID",
+    "mark": "Mark",
+    "operation": "Operation"
   }
 }

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

@@ -13,6 +13,11 @@
     "title": "概览",
     "workspace": "工作台"
   },
+  "form": {
+    "query": "查询",
+    "select": "请选择",
+    "status": "状态"
+  },
   "menu": {
     "admin": "系统管理",
     "automation": "系统自动化",
@@ -29,5 +34,11 @@
     "sysMenu": "系统菜单",
     "sysRole": "系统角色",
     "sysUser": "系统角色"
+  },
+  "table": {
+    "created_time": "创建时间",
+    "id": "序号",
+    "mark": "备注",
+    "operation": "操作"
   }
 }

apps/web-antd/src/types/index.ts

@@ -0,0 +1 @@
+export * from './pagination';

apps/web-antd/src/types/pagination.ts

@@ -0,0 +1,10 @@
+interface PaginationResult {
+  items: Array<any>;
+  page: number;
+  size: number;
+  total: number;
+  total_pages: number;
+  links: any;
+}
+
+export type { PaginationResult };