feat:对接日志管理

package.json

@@ -62,9 +62,11 @@
     "nprogress": "0.2.0",
     "pinia": "3.0.0",
     "tailwind-merge": "3.0.1",
+    "tinymce": "^7",
     "vue": "3.5.13",
     "vue-draggable-plus": "0.6.0",
     "vue-i18n": "11.1.1",
+    "vue-json-pretty": "^2.4.0",
     "vue-router": "4.5.0"
   },
   "devDependencies": {

src/components/custom/dict-tag.vue

@@ -2,11 +2,12 @@
 import { computed, useAttrs } from 'vue';
 import type { TagProps } from 'naive-ui';
 import { useDict } from '@/hooks/business/dict';
+import { isNotNull } from '@/utils/common';
 
 defineOptions({ name: 'DictTag' });
 
 interface Props {
-  value?: string;
+  value?: string | number;
   dictCode?: string;
   immediate?: boolean;
   dictData?: Api.System.DictData;
@@ -26,10 +27,10 @@ const dictTagData = computed(() => {
   if (props.dictData) {
     return props.dictData;
   }
-
+  // 避免 props.value 为 0 时，无法触发
-  if (props.dictCode && props.value) {
+  if (props.dictCode && isNotNull(props.value)) {
     const { transformDictData } = useDict(props.dictCode, props.immediate);
-    return transformDictData(props.value);
+    return transformDictData(String(props.value));
   }
 
   return null;

src/components/custom/json-preview.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
+import { computed } from 'vue';
+
+interface Props {
+  // 需要展示的json数据
+  data: any;
+  // 数据深度
+  deep?: number;
+  // 是否显示双引号
+  showDoubleQuotes?: boolean;
+  // 是否显示数组/对象的长度
+  showLength?: boolean;
+  // 是否显示线条
+  showLine?: boolean;
+  // 是否显示行号
+  showLineNumber?: boolean;
+  // 是否显示图标
+  showIcon?: boolean;
+  // 是否显示选择控制器
+  showSelectController?: boolean;
+  // 默认展开层级
+  collapsedLevel?: number;
+  // 是否高亮鼠标悬停的节点
+  highlightMouseoverNode?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  deep: 3,
+  showDoubleQuotes: true,
+  showLength: false,
+  showLine: true,
+  showLineNumber: false,
+  showIcon: true,
+  showSelectController: false,
+  collapsedLevel: 1,
+  highlightMouseoverNode: false
+});
+
+// 计算属性：格式化JSON数据
+const jsonData = computed(() => {
+  if (!props.data) return null;
+  try {
+    return typeof props.data === 'string' ? JSON.parse(props.data) : props.data;
+  } catch {
+    return null;
+  }
+});
+</script>
+
+<template>
+  <div class="json-preview">
+    <template v-if="jsonData">
+      <VueJsonPretty
+        :data="jsonData"
+        :deep="deep"
+        :show-double-quotes="showDoubleQuotes"
+        :show-length="showLength"
+        :show-line="showLine"
+        :show-line-number="showLineNumber"
+        :show-icon="showIcon"
+        :show-select-controller="showSelectController"
+        :collapsed-level="collapsedLevel"
+        :highlight-mouseover-node="highlightMouseoverNode"
+      />
+    </template>
+    <span v-else-if="props.data">{{ props.data }}</span>
+    <div v-else class="empty-data">暂无数据</div>
+  </div>
+</template>
+
+<style lang="scss">
+html[class='dark'] {
+  .vjs-tree-node:hover {
+    background-color: #7c7777;
+  }
+}
+.json-preview {
+  width: 100%;
+  max-height: 500px;
+  overflow-y: auto;
+  @include scrollbar();
+  .empty-data {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: #999;
+    font-size: 14px;
+  }
+}
+</style>

src/hooks/common/table.ts

@@ -16,7 +16,7 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
 
   const isMobile = computed(() => appStore.isMobile);
 
-  const { apiFn, apiParams, immediate, showTotal } = config;
+  const { apiFn, apiParams, immediate, showTotal = true } = config;
 
   const SELECTION_KEY = '__selection__';
 

src/locales/langs/en-us.ts

@@ -176,7 +176,10 @@ const local: App.I18n.Schema = {
     system_tenant: 'Tenant Management',
     system_config: 'Config Management',
     system_dept: 'Dept Management',
-    system_post: 'Post Management'
+    system_post: 'Post Management',
+    monitor: 'Monitor Management',
+    'monitor_login-infor': 'Login Log',
+    'monitor_oper-log': 'Operate Log'
   },
   page: {
     login: {

src/locales/langs/zh-cn.ts

@@ -176,7 +176,10 @@ const local: App.I18n.Schema = {
     system_tenant: '租户管理',
     system_config: '参数设置',
     system_dept: '部门管理',
-    system_post: '岗位管理'
+    system_post: '岗位管理',
+    monitor: '系统监控',
+    'monitor_login-infor': '登录日志',
+    'monitor_oper-log': '操作日志'
   },
   page: {
     login: {

src/router/elegant/imports.ts

@@ -21,6 +21,8 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   "iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
   login: () => import("@/views/_builtin/login/index.vue"),
   home: () => import("@/views/home/index.vue"),
+  "monitor_login-infor": () => import("@/views/monitor/login-infor/index.vue"),
+  "monitor_oper-log": () => import("@/views/monitor/oper-log/index.vue"),
   system_config: () => import("@/views/system/config/index.vue"),
   system_dept: () => import("@/views/system/dept/index.vue"),
   system_dict_data: () => import("@/views/system/dict/data/index.vue"),

src/router/elegant/routes.ts

@@ -75,6 +75,35 @@ export const generatedRoutes: GeneratedRoute[] = [
       hideInMenu: true
     }
   },
+  {
+    name: 'monitor',
+    path: '/monitor',
+    component: 'layout.base',
+    meta: {
+      title: 'monitor',
+      i18nKey: 'route.monitor'
+    },
+    children: [
+      {
+        name: 'monitor_login-infor',
+        path: '/monitor/login-infor',
+        component: 'view.monitor_login-infor',
+        meta: {
+          title: 'monitor_login-infor',
+          i18nKey: 'route.monitor_login-infor'
+        }
+      },
+      {
+        name: 'monitor_oper-log',
+        path: '/monitor/oper-log',
+        component: 'view.monitor_oper-log',
+        meta: {
+          title: 'monitor_oper-log',
+          i18nKey: 'route.monitor_oper-log'
+        }
+      }
+    ]
+  },
   {
     name: 'system',
     path: '/system',

src/router/elegant/transform.ts

@@ -169,6 +169,9 @@ const routeMap: RouteMap = {
   "home": "/home",
   "iframe-page": "/iframe-page/:url",
   "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
+  "monitor": "/monitor",
+  "monitor_login-infor": "/monitor/login-infor",
+  "monitor_oper-log": "/monitor/oper-log",
   "system": "/system",
   "system_config": "/system/config",
   "system_dept": "/system/dept",

src/service/api/monitor/login-infor.ts

@@ -0,0 +1,36 @@
+import { request } from '@/service/request';
+
+/** 获取系统访问记录列表 */
+export function fetchGetLoginInforList(params?: Api.Monitor.LoginInforSearchParams) {
+  return request<Api.Monitor.LoginInforList>({
+    url: '/monitor/logininfor/list',
+    method: 'get',
+    params
+  });
+}
+
+/** 新增系统访问记录 */
+export function fetchCreateLoginInfor(data: Api.Monitor.LoginInforOperateParams) {
+  return request<boolean>({
+    url: '/monitor/logininfor',
+    method: 'post',
+    data
+  });
+}
+
+/** 修改系统访问记录 */
+export function fetchUpdateLoginInfor(data: Api.Monitor.LoginInforOperateParams) {
+  return request<boolean>({
+    url: '/monitor/logininfor',
+    method: 'put',
+    data
+  });
+}
+
+/** 批量删除系统访问记录 */
+export function fetchBatchDeleteLoginInfor(infoIds: CommonType.IdType[]) {
+  return request<boolean>({
+    url: `/monitor/logininfor/${infoIds.join(',')}`,
+    method: 'delete'
+  });
+}

src/service/api/monitor/oper-log.ts

@@ -0,0 +1,26 @@
+import { request } from '@/service/request';
+
+/** 获取操作日志记录列表 */
+export function fetchGetOperLogList(params?: Api.Monitor.OperLogSearchParams) {
+  return request<Api.Monitor.OperLogList>({
+    url: '/monitor/operlog/list',
+    method: 'get',
+    params
+  });
+}
+
+/** 批量删除操作日志记录 */
+export function fetchBatchDeleteOperLog(operIds: CommonType.IdType[]) {
+  return request<boolean>({
+    url: `/monitor/operlog/${operIds.join(',')}`,
+    method: 'delete'
+  });
+}
+
+/** 清理操作日志记录 */
+export function fetchCleanOperLog() {
+  return request<boolean>({
+    url: '/monitor/operlog/clean',
+    method: 'delete'
+  });
+}

src/service/api/system/config.ts

@@ -1,36 +1,43 @@
 import { request } from '@/service/request';
 
 /** 获取参数配置列表 */
-export function fetchGetConfigList (params?: Api.System.ConfigSearchParams) {
+export function fetchGetConfigList(params?: Api.System.ConfigSearchParams) {
-    return request<Api.System.ConfigList>({
+  return request<Api.System.ConfigList>({
-        url: '/system/config/list',
+    url: '/system/config/list',
-        method: 'get',
+    method: 'get',
-        params
+    params
-    });
+  });
 }
 
 /** 新增参数配置 */
-export function fetchCreateConfig (data: Api.System.ConfigOperateParams) {
+export function fetchCreateConfig(data: Api.System.ConfigOperateParams) {
-    return request<boolean>({
+  return request<boolean>({
-        url: '/system/config',
+    url: '/system/config',
-        method: 'post',
+    method: 'post',
-        data
+    data
-    });
+  });
 }
 
 /** 修改参数配置 */
-export function fetchUpdateConfig (data: Api.System.ConfigOperateParams) {
+export function fetchUpdateConfig(data: Api.System.ConfigOperateParams) {
-    return request<boolean>({
+  return request<boolean>({
-        url: '/system/config',
+    url: '/system/config',
-        method: 'put',
+    method: 'put',
-        data
+    data
-    });
+  });
 }
 
 /** 批量删除参数配置 */
-export function fetchBatchDeleteConfig (configIds: CommonType.IdType[]) {
+export function fetchBatchDeleteConfig(configIds: CommonType.IdType[]) {
-    return request<boolean>({
+  return request<boolean>({
-        url: `/system/config/${configIds.join(',')}`,
+    url: `/system/config/${configIds.join(',')}`,
-        method: 'delete'
+    method: 'delete'
-    });
+  });
+}
+/** 刷新缓存 */
+export function fetchRefreshCache() {
+  return request<boolean>({
+    url: `/system/config/refreshCache`,
+    method: 'delete'
+  });
 }

src/service/api/system/dict.ts

@@ -49,3 +49,10 @@ export function fetchBatchDeleteDictType(dictIds: CommonType.IdType[]) {
     method: 'delete'
   });
 }
+/** 刷新缓存 */
+export function fetchRefreshCache() {
+  return request<boolean>({
+    url: `/system/dict/type/refreshCache`,
+    method: 'delete'
+  });
+}

src/theme/settings.ts

@@ -1,15 +1,15 @@
 /** Default theme settings */
 export const themeSettings: App.Theme.ThemeSetting = {
-  themeScheme: 'auto',
+  themeScheme: 'light',
   grayscale: false,
   colourWeakness: false,
   recommendColor: false,
-  themeColor: '#0E42D2',
+  themeColor: '#646CFF',
   otherColor: {
-    info: '#0E42D2',
+    info: '#646CFF',
-    success: '#009A29',
+    success: '#52C41A',
-    warning: '#D25F00',
+    warning: '#FAAD14',
-    error: '#CB2634'
+    error: '#F5222D'
   },
   isInfoFollowPrimary: true,
   resetCacheStrategy: 'close',

src/typings/api/monitor.api.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Namespace Api
+ *
+ * All backend api type
+ */
+declare namespace Api {
+  /**
+   * namespace Monitor
+   *
+   * backend api module: "monitor"
+   */
+  namespace Monitor {
+    /** oper log */
+    type OperLog = Common.CommonRecord<{
+      /** 日志主键 */
+      operId: CommonType.IdType;
+      /** 租户编号 */
+      tenantId: CommonType.IdType;
+      /** 系统模块 */
+      title: string;
+      /** 操作类型 */
+      businessType: number;
+      /** 方法名称 */
+      method: string;
+      /** 请求方式 */
+      requestMethod: string;
+      /** 操作类别 */
+      operatorType: number;
+      /** 操作人员 */
+      operName: string;
+      /** 部门名称 */
+      deptName: string;
+      /** 请求URL */
+      operUrl: string;
+      /** 操作IP */
+      operIp: string;
+      /** 操作地点 */
+      operLocation: string;
+      /** 请求参数 */
+      operParam: string;
+      /** 返回参数 */
+      jsonResult: string;
+      /** 操作状态 */
+      status: number;
+      /** 错误消息 */
+      errorMsg: string;
+      /** 操作时间 */
+      operTime: string;
+      /** 消耗时间 */
+      costTime: number;
+    }>;
+
+    /** oper log search params */
+    type OperLogSearchParams = CommonType.RecordNullable<
+      Pick<Api.Monitor.OperLog, 'title' | 'businessType' | 'operName' | 'operIp' | 'status' | 'operTime'> &
+        Api.Common.CommonSearchParams
+    >;
+
+    /** oper log list */
+    type OperLogList = Api.Common.PaginatingQueryRecord<OperLog>;
+
+    /** login infor */
+    type LoginInfor = Common.CommonRecord<{
+      /** 访问ID */
+      infoId: CommonType.IdType;
+      /** 租户编号 */
+      tenantId: CommonType.IdType;
+      /** 用户账号 */
+      userName: string;
+      /** 客户端 */
+      clientKey: string;
+      /** 设备类型 */
+      deviceType: string;
+      /** 登录IP地址 */
+      ipaddr: string;
+      /** 登录地点 */
+      loginLocation: string;
+      /** 浏览器类型 */
+      browser: string;
+      /** 操作系统 */
+      os: string;
+      /** 登录状态（0成功 1失败） */
+      status: string;
+      /** 提示消息 */
+      msg: string;
+      /** 访问时间 */
+      loginTime: string;
+    }>;
+
+    /** login infor search params */
+    type LoginInforSearchParams = CommonType.RecordNullable<
+      Pick<Api.Monitor.LoginInfor, 'userName' | 'ipaddr' | 'status'> & Api.Common.CommonSearchParams
+    >;
+
+    /** login infor list */
+    type LoginInforList = Api.Common.PaginatingQueryRecord<LoginInfor>;
+  }
+}

src/typings/components.d.ts

@@ -50,6 +50,7 @@ declare module 'vue' {
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     'IconMingcute:questionLine': typeof import('~icons/mingcute/question-line')['default']
     IconUilSearch: typeof import('~icons/uil/search')['default']
+    JsonPreview: typeof import('./../components/custom/json-preview.vue')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
     MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']

src/typings/elegant-router.d.ts

@@ -23,6 +23,9 @@ declare module "@elegant-router/types" {
     "home": "/home";
     "iframe-page": "/iframe-page/:url";
     "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
+    "monitor": "/monitor";
+    "monitor_login-infor": "/monitor/login-infor";
+    "monitor_oper-log": "/monitor/oper-log";
     "system": "/system";
     "system_config": "/system/config";
     "system_dept": "/system/dept";
@@ -72,6 +75,7 @@ declare module "@elegant-router/types" {
     | "home"
     | "iframe-page"
     | "login"
+    | "monitor"
     | "system"
     | "tool"
   >;
@@ -96,6 +100,8 @@ declare module "@elegant-router/types" {
     | "iframe-page"
     | "login"
     | "home"
+    | "monitor_login-infor"
+    | "monitor_oper-log"
     | "system_config"
     | "system_dept"
     | "system_dict_data"

src/utils/format.ts

@@ -0,0 +1,61 @@
+/**
+ * 获取请求方法标签类型
+ *
+ * @param method 请求方法
+ * @returns 标签类型
+ */
+export function getRequestMethodTagType(method: string): NaiveUI.ThemeColor {
+  const methodUpper = method.toUpperCase();
+  const colors: { [key: string]: NaiveUI.ThemeColor } = {
+    DELETE: 'error',
+    GET: 'success',
+    POST: 'primary',
+    PUT: 'warning'
+  };
+
+  return colors[methodUpper] ?? 'default';
+}
+
+const browserOptions = [
+  { icon: 'logos:chrome', value: 'chrome' },
+  { icon: 'logos:microsoft-edge', value: 'edge' },
+  { icon: 'logos:firefox', value: 'firefox' },
+  { icon: 'logos:opera', value: 'opera' },
+  { icon: 'logos:safari', value: 'safari' },
+  { icon: 'ic:baseline-wechat', value: 'micromessenger' },
+  { icon: 'ic:baseline-wechat', value: 'windowswechat' },
+  { icon: 'arcticons:quark-browser', value: 'quark' },
+  { icon: 'ic:baseline-wechat', value: 'wxwork' },
+  { icon: 'simple-icons:tencentqq', value: 'qq' },
+  { icon: 'arcticons:dingtalk', value: 'dingtalk' },
+  { icon: 'arcticons:uc-browser', value: 'uc' },
+  { icon: 'ri:baidu-fill', value: 'baidu' }
+];
+const osOptions = [
+  { icon: 'devicon:windows8', value: 'windows' },
+  { icon: 'wpf:macoss', value: 'osx' },
+  { icon: 'devicon:linux', value: 'linux' },
+  { icon: 'material-icon-theme:android:', value: 'android' },
+  { icon: 'wpf:iphone', value: 'ios' }
+];
+/**
+ * 获取浏览器图标
+ *
+ * @param browser 浏览器
+ * @returns 浏览器图标
+ */
+export function getBrowserIcon(browser: string): string {
+  const icon = browserOptions.find(item => browser.toLocaleLowerCase().includes(item.value));
+  return icon?.icon ?? 'stash:browser-light';
+}
+
+/**
+ * 获取操作系统图标
+ *
+ * @param os 操作系统
+ * @returns 操作系统图标
+ */
+export function getOsIcon(os: string): string {
+  const icon = osOptions.find(item => os.toLocaleLowerCase().includes(item.value));
+  return icon?.icon ?? 'mingcute:device-fill';
+}

src/views/monitor/login-infor/index.vue

@@ -0,0 +1,208 @@
+<script setup lang="tsx">
+import { NButton } from 'naive-ui';
+import { fetchBatchDeleteLoginInfor, fetchGetLoginInforList } from '@/service/api/monitor/login-infor';
+import { $t } from '@/locales';
+import { useAuth } from '@/hooks/business/auth';
+import { useAppStore } from '@/store/modules/app';
+import { useDownload } from '@/hooks/business/download';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { useDict } from '@/hooks/business/dict';
+import DictTag from '@/components/custom/dict-tag.vue';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+import { getBrowserIcon, getOsIcon } from '@/utils/format';
+import LoginInforSearch from './modules/login-infor-search.vue';
+import LoginInforViewDrawer from './modules/login-infor-view-drawer.vue';
+defineOptions({
+  name: 'LoginInforList'
+});
+
+const appStore = useAppStore();
+const { download } = useDownload();
+const { hasAuth } = useAuth();
+
+useDict('sys_common_status');
+useDict('sys_device_type');
+
+const {
+  columns,
+  columnChecks,
+  data,
+  getData,
+  getDataByPage,
+  loading,
+  mobilePagination,
+  searchParams,
+  resetSearchParams
+} = useTable({
+  apiFn: fetchGetLoginInforList,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+    // the value can not be undefined, otherwise the property in Form will not be reactive
+    userName: null,
+    ipaddr: null,
+    status: null
+  },
+  columns: () => [
+    {
+      type: 'selection',
+      align: 'center',
+      width: 48
+    },
+    {
+      key: 'index',
+      title: $t('common.index'),
+      align: 'center',
+      width: 64
+    },
+    {
+      key: 'userName',
+      title: '用户账号',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'deviceType',
+      title: '设备类型',
+      align: 'center',
+      minWidth: 120,
+      render: row => {
+        return <DictTag size="small" value={row.deviceType} dict-code="sys_device_type" />;
+      }
+    },
+    {
+      key: 'ipaddr',
+      title: '登录IP地址',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'loginLocation',
+      title: '登录地点',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'browser',
+      title: '浏览器类型',
+      align: 'center',
+      minWidth: 120,
+      render: row => {
+        return (
+          <div class="flex items-center gap-2">
+            <SvgIcon icon={getBrowserIcon(row.browser)} />
+            {row.browser}
+          </div>
+        );
+      }
+    },
+    {
+      key: 'os',
+      title: '操作系统',
+      align: 'center',
+      ellipsis: {
+        tooltip: true
+      },
+      minWidth: 120,
+      render: row => {
+        const osName = row.os?.split(' or ')[0] ?? '';
+        return (
+          <div class="flex items-center gap-2">
+            <SvgIcon icon={getOsIcon(osName)} />
+            {osName}
+          </div>
+        );
+      }
+    },
+    {
+      key: 'status',
+      title: '登录状态',
+      align: 'center',
+      minWidth: 120,
+      render: row => {
+        return <DictTag size="small" value={row.status} dict-code="sys_common_status" />;
+      }
+    },
+    {
+      key: 'loginTime',
+      title: '访问时间',
+      align: 'center',
+      ellipsis: {
+        tooltip: true
+      },
+      minWidth: 120
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 130,
+      render: row => {
+        const viewBtn = () => {
+          return (
+            <NButton type="primary" ghost size="small" onClick={() => view(row.infoId!)}>
+              详情
+            </NButton>
+          );
+        };
+        return <div class="flex-center gap-8px">{viewBtn()}</div>;
+      }
+    }
+  ]
+});
+
+const { drawerVisible, editingData, handleEdit, checkedRowKeys, onBatchDeleted } = useTableOperate(data, getData);
+
+async function handleBatchDelete() {
+  // request
+  const { error } = await fetchBatchDeleteLoginInfor(checkedRowKeys.value);
+  if (error) return;
+  onBatchDeleted();
+}
+
+async function view(infoId: CommonType.IdType) {
+  handleEdit('infoId', infoId);
+}
+
+async function handleExport() {
+  download('/monitor/logininfor/export', searchParams, `登录日志记录_${new Date().getTime()}.xlsx`);
+}
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <LoginInforSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
+    <NCard title="登录日志列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="columnChecks"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          :show-add="false"
+          :show-delete="hasAuth('monitor:logininfor:remove')"
+          :show-export="hasAuth('monitor:logininfor:export')"
+          @delete="handleBatchDelete"
+          @export="handleExport"
+          @refresh="getData"
+        />
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        size="small"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="962"
+        :loading="loading"
+        remote
+        :row-key="row => row.infoId"
+        :pagination="mobilePagination"
+        class="sm:h-full"
+      />
+      <LoginInforViewDrawer v-model:visible="drawerVisible" :row-data="editingData" />
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>

src/views/monitor/login-infor/modules/login-infor-search.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { useNaiveForm } from '@/hooks/common/form';
+import { useDict } from '@/hooks/business/dict';
+defineOptions({
+  name: 'LoginInforSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+
+const model = defineModel<Api.Monitor.LoginInforSearchParams>('model', { required: true });
+
+useDict('sys_common_status');
+
+async function reset() {
+  await restoreValidation();
+  emit('reset');
+}
+
+async function search() {
+  await validate();
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :bordered="false" size="small" class="card-wrapper">
+    <NCollapse>
+      <NCollapseItem :title="$t('common.search')" name="user-search">
+        <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
+          <NGrid responsive="screen" item-responsive>
+            <NFormItemGi span="24 s:12 m:6" label="IP地址" path="ipaddr" class="pr-24px">
+              <NInput v-model:value="model.ipaddr" placeholder="请输入登录IP地址" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="用户账号" path="userName" class="pr-24px">
+              <NInput v-model:value="model.userName" placeholder="请输入用户账号" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="登录状态" path="status" class="pr-24px">
+              <DictSelect
+                v-model:value="model.status"
+                placeholder="请选择登录状态"
+                dict-code="sys_common_status"
+                clearable
+              />
+            </NFormItemGi>
+            <NFormItemGi span="24" class="pr-24px">
+              <NSpace class="w-full" justify="end">
+                <NButton @click="reset">
+                  <template #icon>
+                    <icon-ic-round-refresh class="text-icon" />
+                  </template>
+                  {{ $t('common.reset') }}
+                </NButton>
+                <NButton type="primary" ghost @click="search">
+                  <template #icon>
+                    <icon-ic-round-search class="text-icon" />
+                  </template>
+                  {{ $t('common.search') }}
+                </NButton>
+              </NSpace>
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+      </NCollapseItem>
+    </NCollapse>
+  </NCard>
+</template>
+
+<style scoped></style>

src/views/monitor/login-infor/modules/login-infor-view-drawer.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { useDict } from '@/hooks/business/dict';
+import { getBrowserIcon, getOsIcon } from '@/utils/format';
+defineOptions({
+  name: 'LoginInforViewDrawer'
+});
+
+interface Props {
+  /** the edit row data */
+  rowData: Api.Monitor.LoginInfor | null;
+}
+
+const props = defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+useDict('sys_device_type');
+useDict('sys_common_status');
+
+const title = '登录信息详情';
+
+function closeDrawer() {
+  visible.value = false;
+}
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NDescriptions label-placement="left" :column="1" size="small" bordered>
+        <NDescriptionsItem label="用户账号">
+          {{ props.rowData?.userName }}
+        </NDescriptionsItem>
+        <NDescriptionsItem label="客户端">
+          {{ props.rowData?.clientKey }}
+        </NDescriptionsItem>
+        <NDescriptionsItem label="设备类型">
+          <DictTag size="small" :value="props.rowData?.deviceType" dict-code="sys_device_type" />
+        </NDescriptionsItem>
+        <NDescriptionsItem label="登录IP地址">
+          {{ props.rowData?.ipaddr }}
+        </NDescriptionsItem>
+        <NDescriptionsItem label="登录地点">
+          {{ props.rowData?.loginLocation }}
+        </NDescriptionsItem>
+        <NDescriptionsItem label="浏览器类型">
+          <div class="flex items-center gap-2">
+            <SvgIcon :icon="getBrowserIcon(props.rowData?.browser ?? '')" />
+            {{ props.rowData?.browser }}
+          </div>
+        </NDescriptionsItem>
+        <NDescriptionsItem label="操作系统">
+          <div class="flex items-center gap-2">
+            <SvgIcon :icon="getOsIcon(props.rowData?.os ?? '')" />
+            {{ props.rowData?.os }}
+          </div>
+        </NDescriptionsItem>
+        <NDescriptionsItem label="登录状态">
+          <DictTag size="small" :value="props.rowData?.status" dict-code="sys_common_status" />
+        </NDescriptionsItem>
+        <NDescriptionsItem label="提示消息">
+          {{ props.rowData?.msg }}
+        </NDescriptionsItem>
+        <NDescriptionsItem label="访问时间">
+          {{ props.rowData?.loginTime }}
+        </NDescriptionsItem>
+      </NDescriptions>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.close') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>

src/views/monitor/oper-log/index.vue

@@ -0,0 +1,208 @@
+<script setup lang="tsx">
+import { NButton } from 'naive-ui';
+import { fetchBatchDeleteOperLog, fetchCleanOperLog, fetchGetOperLogList } from '@/service/api/monitor/oper-log';
+import { $t } from '@/locales';
+import { useAuth } from '@/hooks/business/auth';
+import { useAppStore } from '@/store/modules/app';
+import { useDownload } from '@/hooks/business/download';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import DictTag from '@/components/custom/dict-tag.vue';
+import { useDict } from '@/hooks/business/dict';
+import OperLogViewDrawer from './modules/oper-log-view-drawer.vue';
+import OperLogSearch from './modules/oper-log-search.vue';
+defineOptions({
+  name: 'OperLogList'
+});
+
+useDict('sys_common_status');
+useDict('sys_oper_type');
+
+const appStore = useAppStore();
+const { download } = useDownload();
+const { hasAuth } = useAuth();
+
+const {
+  columns,
+  columnChecks,
+  data,
+  getData,
+  getDataByPage,
+  loading,
+  mobilePagination,
+  searchParams,
+  resetSearchParams
+} = useTable({
+  apiFn: fetchGetOperLogList,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+    // the value can not be undefined, otherwise the property in Form will not be reactive
+    title: null,
+    businessType: null,
+    operName: null,
+    operIp: null,
+    status: null,
+    operTime: null
+  },
+  columns: () => [
+    {
+      type: 'selection',
+      align: 'center',
+      width: 48
+    },
+    {
+      key: 'index',
+      title: $t('common.index'),
+      align: 'center',
+      width: 64
+    },
+    {
+      key: 'title',
+      title: '系统模块',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'businessType',
+      title: '操作类型',
+      align: 'center',
+      minWidth: 120,
+      render(row) {
+        return <DictTag size="small" value={row.businessType} dictCode="sys_oper_type" />;
+      }
+    },
+    {
+      key: 'operName',
+      title: '操作人员',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'operIp',
+      title: '操作IP',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'operLocation',
+      title: '操作地点',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'status',
+      title: '操作状态',
+      align: 'center',
+      minWidth: 120,
+      render(row) {
+        return <DictTag size="small" value={row.status} dictCode="sys_common_status" />;
+      }
+    },
+    {
+      key: 'operTime',
+      title: '操作时间',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'costTime',
+      title: '消耗时间',
+      align: 'center',
+      minWidth: 120,
+      render(row) {
+        return `${row.costTime} ms`;
+      }
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 130,
+      render: row => {
+        const viewBtn = () => {
+          return (
+            <NButton type="primary" ghost size="small" onClick={() => view(row.operId!)}>
+              详情
+            </NButton>
+          );
+        };
+        return <div class="flex-center gap-8px">{viewBtn()}</div>;
+      }
+    }
+  ]
+});
+
+const { drawerVisible, editingData, handleEdit, checkedRowKeys, onBatchDeleted } = useTableOperate(data, getData);
+
+async function handleBatchDelete() {
+  // request
+  const { error } = await fetchBatchDeleteOperLog(checkedRowKeys.value);
+  if (error) return;
+  onBatchDeleted();
+}
+async function view(operId: CommonType.IdType) {
+  handleEdit('operId', operId);
+}
+
+async function handleExport() {
+  download('/monitor/operlog/export', searchParams, `操作日志_${new Date().getTime()}.xlsx`);
+}
+
+async function handleCleanOperLog() {
+  const { error } = await fetchCleanOperLog();
+  if (error) return;
+  window.$message?.success('清理成功');
+  await getData();
+}
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <OperLogSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
+    <NCard title="操作日志列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+      <template #header-extra>
+        <NSpace>
+          <NPopconfirm v-if="hasAuth('monitor:operlog:remove')" @positive-click="() => handleCleanOperLog()">
+            <template #trigger>
+              <NButton type="warning" ghost size="small">
+                <template #icon>
+                  <icon-ic-round-delete class="text-icon" />
+                </template>
+                清空
+              </NButton>
+            </template>
+            确认清空操作日志？
+          </NPopconfirm>
+          <TableHeaderOperation
+            v-model:columns="columnChecks"
+            :disabled-delete="checkedRowKeys.length === 0"
+            :loading="loading"
+            :show-add="false"
+            :show-delete="hasAuth('monitor:operlog:remove')"
+            :show-export="hasAuth('monitor:operlog:export')"
+            @delete="handleBatchDelete"
+            @export="handleExport"
+            @refresh="getData"
+          />
+        </NSpace>
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        size="small"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="962"
+        :loading="loading"
+        remote
+        :row-key="row => row.operId"
+        :pagination="mobilePagination"
+        class="sm:h-full"
+      />
+      <OperLogViewDrawer v-model:visible="drawerVisible" :row-data="editingData" />
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>

src/views/monitor/oper-log/modules/oper-log-search.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { useNaiveForm } from '@/hooks/common/form';
+import { useDict } from '@/hooks/business/dict';
+defineOptions({
+  name: 'OperLogSearch'
+});
+
+useDict('sys_oper_type');
+useDict('sys_common_status');
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+
+const model = defineModel<Api.Monitor.OperLogSearchParams>('model', { required: true });
+
+async function reset() {
+  await restoreValidation();
+  emit('reset');
+}
+
+async function search() {
+  await validate();
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :bordered="false" size="small" class="card-wrapper">
+    <NCollapse>
+      <NCollapseItem :title="$t('common.search')" name="user-search">
+        <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
+          <NGrid responsive="screen" item-responsive>
+            <NFormItemGi span="24 s:12 m:6" label="系统模块" path="title" class="pr-24px">
+              <NInput v-model:value="model.title" placeholder="请输入系统模块" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="操作类型" path="businessType" class="pr-24px">
+              <DictSelect
+                v-model:value="model.businessType"
+                placeholder="请选择操作类型"
+                dict-code="sys_oper_type"
+                clearable
+              />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="操作人员" path="operName" class="pr-24px">
+              <NInput v-model:value="model.operName" placeholder="请输入操作人员" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="操作IP" path="operIp" class="pr-24px">
+              <NInput v-model:value="model.operIp" placeholder="请输入操作IP" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="操作状态" path="status" class="pr-24px">
+              <DictSelect
+                v-model:value="model.status"
+                placeholder="请选择操作状态"
+                dict-code="sys_common_status"
+                clearable
+              />
+            </NFormItemGi>
+            <NFormItemGi span="24" class="pr-24px">
+              <NSpace class="w-full" justify="end">
+                <NButton @click="reset">
+                  <template #icon>
+                    <icon-ic-round-refresh class="text-icon" />
+                  </template>
+                  {{ $t('common.reset') }}
+                </NButton>
+                <NButton type="primary" ghost @click="search">
+                  <template #icon>
+                    <icon-ic-round-search class="text-icon" />
+                  </template>
+                  {{ $t('common.search') }}
+                </NButton>
+              </NSpace>
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+      </NCollapseItem>
+    </NCollapse>
+  </NCard>
+</template>
+
+<style scoped></style>

src/views/monitor/oper-log/modules/oper-log-view-drawer.vue

@@ -0,0 +1,71 @@
+<script setup lang="tsx">
+import { NDescriptions, NDescriptionsItem, NTag } from 'naive-ui';
+import { $t } from '@/locales';
+import DictTag from '@/components/custom/dict-tag.vue';
+import { getRequestMethodTagType } from '@/utils/format';
+defineOptions({
+  name: 'OperLogViewDrawer'
+});
+
+interface Props {
+  /** the edit row data */
+  rowData: Api.Monitor.OperLog | null;
+}
+
+const props = defineProps<Props>();
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+const title = '操作日志详情';
+
+function closeDrawer() {
+  visible.value = false;
+}
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NDescriptions label-class="min-w-100px" :column="1" size="small" bordered label-placement="left">
+        <NDescriptionsItem label="日志编号">{{ props.rowData?.operId }}</NDescriptionsItem>
+        <NDescriptionsItem label="操作状态">
+          <DictTag size="small" :value="props.rowData?.status" dict-code="sys_common_status" />
+        </NDescriptionsItem>
+        <NDescriptionsItem label="系统模块">
+          <NSpace>
+            <NTag size="small" type="primary">{{ props.rowData?.title }}模块</NTag>
+            <DictTag size="small" :value="props.rowData?.businessType" dict-code="sys_oper_type" />
+          </NSpace>
+        </NDescriptionsItem>
+        <NDescriptionsItem label="操作信息">
+          {{ props.rowData?.operName }} | {{ props.rowData?.deptName }} | {{ props.rowData?.operIp }} |
+          {{ props.rowData?.operLocation }}
+        </NDescriptionsItem>
+        <NDescriptionsItem label="请求信息">
+          <NSpace>
+            <NTag size="small" :type="getRequestMethodTagType(props.rowData?.requestMethod ?? '')">
+              {{ `${props.rowData?.requestMethod?.toUpperCase()}请求` }}
+            </NTag>
+            {{ props.rowData?.operUrl }}
+          </NSpace>
+        </NDescriptionsItem>
+        <NDescriptionsItem label="操作时间">{{ props.rowData?.operTime }}</NDescriptionsItem>
+        <NDescriptionsItem label="请求参数">
+          <JsonPreview :data="props.rowData?.operParam" />
+        </NDescriptionsItem>
+        <NDescriptionsItem label="返回参数">
+          <JsonPreview :data="props.rowData?.jsonResult" />
+        </NDescriptionsItem>
+        <NDescriptionsItem label="消耗时间">
+          {{ `${props.rowData?.costTime} ms` }}
+        </NDescriptionsItem>
+        <NDescriptionsItem label="错误消息">{{ props.rowData?.errorMsg }}</NDescriptionsItem>
+      </NDescriptions>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.close') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>

src/views/system/config/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { NButton, NPopconfirm } from 'naive-ui';
-import { fetchBatchDeleteConfig, fetchGetConfigList } from '@/service/api/system/config';
+import { fetchBatchDeleteConfig, fetchGetConfigList, fetchRefreshCache } from '@/service/api/system/config';
 import { $t } from '@/locales';
 import { useAuth } from '@/hooks/business/auth';
 import { useAppStore } from '@/store/modules/app';
@@ -169,6 +169,13 @@ async function edit(configId: CommonType.IdType) {
 async function handleExport() {
   download('/system/config/export', searchParams, `参数配置_${new Date().getTime()}.xlsx`);
 }
+
+async function handleRefreshCache() {
+  const { error } = await fetchRefreshCache();
+  if (error) return;
+  window.$message?.success('刷新缓存成功');
+  await getData();
+}
 </script>
 
 <template>
@@ -176,18 +183,23 @@ async function handleExport() {
     <ConfigSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
     <NCard title="参数配置列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
-        <TableHeaderOperation
+        <NSpace>
-          v-model:columns="columnChecks"
+          <NButton v-if="hasAuth('system:config:remove')" type="warning" ghost size="small" @click="handleRefreshCache">
-          :disabled-delete="checkedRowKeys.length === 0"
+            刷新缓存
-          :loading="loading"
+          </NButton>
-          :show-add="hasAuth('system:config:add')"
+          <TableHeaderOperation
-          :show-delete="hasAuth('system:config:remove')"
+            v-model:columns="columnChecks"
-          :show-export="hasAuth('system:config:export')"
+            :disabled-delete="checkedRowKeys.length === 0"
-          @add="handleAdd"
+            :loading="loading"
-          @delete="handleBatchDelete"
+            :show-add="hasAuth('system:config:add')"
-          @export="handleExport"
+            :show-delete="hasAuth('system:config:remove')"
-          @refresh="getData"
+            :show-export="hasAuth('system:config:export')"
-        />
+            @add="handleAdd"
+            @delete="handleBatchDelete"
+            @export="handleExport"
+            @refresh="getData"
+          />
+        </NSpace>
       </template>
       <NDataTable
         v-model:checked-row-keys="checkedRowKeys"

src/views/system/dict/type/index.vue

@@ -2,7 +2,7 @@
 import { NButton, NPopconfirm } from 'naive-ui';
 import { ref } from 'vue';
 import type { TableDataWithIndex } from '@sa/hooks';
-import { fetchBatchDeleteDictType, fetchGetDictTypeList } from '@/service/api/system/dict';
+import { fetchBatchDeleteDictType, fetchGetDictTypeList, fetchRefreshCache } from '@/service/api/system/dict';
 import { $t } from '@/locales';
 import { useAuth } from '@/hooks/business/auth';
 import { useAppStore } from '@/store/modules/app';
@@ -170,6 +170,13 @@ async function edit(dictId: CommonType.IdType) {
 async function handleExport() {
   download('/system/dict/type/export', searchParams, `字典类型_${new Date().getTime()}.xlsx`);
 }
+
+async function handleRefreshCache() {
+  const { error } = await fetchRefreshCache();
+  if (error) return;
+  window.$message?.success('刷新缓存成功');
+  await getData();
+}
 </script>
 
 <template>
@@ -177,18 +184,23 @@ async function handleExport() {
     <DictTypeSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
     <NCard title="字典类型列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
-        <TableHeaderOperation
+        <NSpace>
-          v-model:columns="columnChecks"
+          <NButton v-if="hasAuth('system:dict:remove')" type="warning" ghost size="small" @click="handleRefreshCache">
-          :disabled-delete="checkedRowKeys.length === 0"
+            刷新缓存
-          :loading="loading"
+          </NButton>
-          :show-add="hasAuth('system:dict:add')"
+          <TableHeaderOperation
-          :show-delete="hasAuth('system:dict:remove')"
+            v-model:columns="columnChecks"
-          :show-export="hasAuth('system:dict:export')"
+            :disabled-delete="checkedRowKeys.length === 0"
-          @add="handleAdd"
+            :loading="loading"
-          @delete="handleBatchDelete"
+            :show-add="hasAuth('system:dict:add')"
-          @export="handleExport"
+            :show-delete="hasAuth('system:dict:remove')"
-          @refresh="getData"
+            :show-export="hasAuth('system:dict:export')"
-        />
+            @add="handleAdd"
+            @delete="handleBatchDelete"
+            @export="handleExport"
+            @refresh="getData"
+          />
+        </NSpace>
       </template>
       <NDataTable
         v-model:checked-row-keys="checkedRowKeys"