@ruovea/log

日志模块，以 pnpm 源码包 形式提供给各宿主项目复用。

• 不打 dist、不发 npm——exports 直指 ./src/*，由宿主 Vite 编译
• 依赖注入解耦——request / auth / i18n / 文件下载函数 由宿主装配时注入
• 零侵入——包内不含 /@/ 等宿主别名引用，可独立运行，不绑定特定宿主

覆盖：操作日志（logop）/ 异常日志（logex）/ 访问日志（logvis）/ 差异日志（logdiff）共 4 个子模块。

一、目录结构

src/
├─ index.ts          # 入口：导出 LogPlugin + API + 类型
├─ plugin.ts         # Vue install（校验必填项 / provide / mergeLocaleMessage）
├─ context.ts        # InjectionKey + useLogContext()
├─ types.ts          # LogPluginOptions / LogEndpoints
├─ routes.ts         # 4 条静态路由（可选使用）+ 动态组件映射表
├─ api/
│  ├─ index.ts       # 4 个子模块共 20+ API 函数
│  ├─ http.ts        # request 注入点
│  ├─ endpoints.ts   # URL 前缀（可覆盖）
│  ├─ op.ts          # 操作日志 CRUD + 清空 / 批量删除 / 导出
│  ├─ ex.ts          # 异常日志 CRUD + 清空 / 导出
│  ├─ vis.ts         # 访问日志 CRUD + 清空 / 批量删除 / 登录统计
│  └─ diff.ts        # 差异日志 CRUD + 清空
├─ i18n/locales/     # 6 语言（en / fr-fr / ja-jp / vi-vn / zh-cn / zh-tw）
└─ views/log/
   ├─ logop/index.vue     # 操作日志列表页
   ├─ logex/index.vue     # 异常日志列表页
   ├─ logvis/index.vue    # 访问日志列表页
   └─ logdiff/index.vue   # 差异日志列表页

二、宿主接入

2.1 安装

宿主 package.json 用 link: 协议指向本仓库：

{
  "dependencies": {
    "@ruovea/log": "link:../../log-module/packages/log"
  }
}

cd <宿主> && pnpm install   # 建立 link

2.2 装配插件

// plugins/log.ts
import type { App } from 'vue';
import { LogPlugin } from '@ruovea/log';
import request from '/@/utils/request';
import { auth } from '/@/utils/authFunction';
import { i18n } from '/@/i18n/index';
import commonFunction from '/@/utils/commonFunction';

export function setupLog(app: App) {
  const { downloadByData, getFileName } = commonFunction();
  app.use(LogPlugin, {
    request: request as any,
    auth,
    i18n: i18n as any,
    downloadByData,
    getFileName,
  });
}

// main.ts
import { setupLog } from '/@/plugins/log';
// ... app.use(pinia) 之后
setupLog(app);

2.3 后端动态路由映射

// router/backEnd.ts
import { logDynamicComponents } from '@ruovea/log';

export function dynamicImport(dynamicViewsModules: Record<string, Function>, component: string) {
  if (logDynamicComponents[component]) return logDynamicComponents[component];
  // ... 原有逻辑
}

三、LogPluginOptions 说明

| 字段 | 必填 | 说明 | |---|---|---| | request | ✅ | 宿主 axios 实例（已配 baseURL / token / 拦截器） | | auth | ➖ | (code: string) => boolean，按钮权限校验，缺省 () => true | | i18n | ➖ | 宿主 vue-i18n 实例（用于 mergeLocaleMessage） | | endpoints | ➖ | 覆盖 API URL 前缀（见下方 Endpoints 章节） | | registerI18n | ➖ | 是否自动 merge i18n，默认 true | | downloadByData | ➖ | 文件下载函数（导出日志用），缺省时导出按钮无效果 | | getFileName | ➖ | 从响应头获取文件名函数，配合 downloadByData 使用 |

i18n 注入约定

包内视图使用 message.log.op.xxx / message.log.ex.xxx / message.log.vis.xxx / message.log.diff.xxx 格式的 key。插件 merge 时同时注册到顶层和 message 层，兼容宿主两级结构。

四、Endpoints 说明

interface LogEndpoints {
  // 操作日志
  sysLogOpPages:              '/SysLogOp/Pages'
  sysLogOpData:               '/SysLogOp/Data'
  sysLogOpDeleteData:         '/SysLogOp/DeleteData'
  sysLogOpClear:              '/SysLogOp/Clear'
  sysLogOpClearByTimeRange:   '/SysLogOp/ClearByTimeRange/clear-by-time'
  sysLogOpBatchDelete:        '/SysLogOp/BatchDelete/batch-delete'
  sysLogOpExport:             '/SysLogOp/Export'
  // 异常日志
  sysLogExPages:              '/SysLogEx/Pages'
  sysLogExData:               '/SysLogEx/Data'
  sysLogExDeleteData:         '/SysLogEx/DeleteData'
  sysLogExClear:              '/SysLogEx/Clear'
  sysLogExExport:             '/SysLogEx/Export'
  // 访问日志
  sysLogVisPages:             '/SysLogVis/Pages'
  sysLogVisData:              '/SysLogVis/Data'
  sysLogVisDeleteData:        '/SysLogVis/DeleteData/delete'
  sysLogVisClear:             '/SysLogVis/Clear/clear'
  sysLogVisClearByTimeRange:  '/SysLogVis/ClearByTimeRange/clear-by-time'
  sysLogVisBatchDelete:       '/SysLogVis/BatchDelete/batch-delete'
  sysLogVisLoginStatistics:   '/SysLogVis/LoginStatistics/login-statistics'
  // 差异日志
  sysLogDiffPages:            '/SysLogDiff/Pages'
  sysLogDiffData:             '/SysLogDiff/Data'
  sysLogDiffClear:            '/SysLogDiff/Clear'
  sysLogDiffClearByTimeRange: '/SysLogDiff/ClearByTimeRange/clear-by-time'
}

五、权限编码清单

| 编码 | 位置 | 说明 | |---|---|---| | sysLogOp:page | 操作日志列表 | 查询按钮 | | sysLogOp:delete | 操作日志列表 | 删除按钮 | | sysLogOp:clear | 操作日志列表 | 清空按钮 | | sysLogEx:page | 异常日志列表 | 查询按钮 | | sysLogEx:delete | 异常日志列表 | 删除按钮 | | sysLogEx:clear | 异常日志列表 | 清空按钮 | | sysLogVis:page | 访问日志列表 | 查询按钮 | | sysLogVis:delete | 访问日志列表 | 删除按钮 | | sysLogVis:clear | 访问日志列表 | 清空按钮 | | sysLogDiff:page | 差异日志列表 | 查询按钮 | | sysLogDiff:clear | 差异日志列表 | 清空按钮 |

六、路由

| path | name | keepAlive | 说明 | |---|---|---|---| | /system/log/logop | sysOpLog | ✅ | 操作日志列表 | | /system/log/logvis | sysVisLog | ✅ | 访问日志列表 | | /system/log/logex | sysLogEx | ✅ | 异常日志列表 | | /system/log/logdiff | sysLogDiff | ✅ | 差异日志列表 |

路由 meta.title 使用 i18n key（如 message.log.op.title），由包内 locale 文件提供。

七、Vite 预构建排除

⚠️ 宿主 vite.config.ts 的 optimizeDeps.exclude 必须包含 @ruovea/log，否则会出现"页面进入即报『查询失败』、但 Network 面板无任何请求"的诡异现象。

现象

• 日志列表页一打开就 ElMessage.error('查询失败')；
• 浏览器 DevTools Network 面板没有发出任何 HTTP 请求；
• 控制台抛出 [@ruovea/log] request 未注入，请先 install 插件。

根因

本包是 pnpm 源码包，package.json 的 exports 把 . 与 ./api 都指向 ./src/*。若不排除预构建，Vite 会把主入口 @ruovea/log 预打包成 node_modules/.vite/deps/@ruovea_log.js，但 ./api 子路径仍走源码 src/api/index.ts → src/api/http.ts。两端各持一份模块级 _request：

• main.ts 中 setupLog(app) → LogPlugin.install → __setRequest(request) 写入的是预构建产物里的 _request；
• 视图层 import { apiSysLogOpPagesPost } from '@ruovea/log/api' 拿到的是源码 http.ts 的 _request，永远是 undefined；
• 视图调 API → http() → throw → catch → ElMessage.error('查询失败')，全程不进 axios，所以无网络请求。

修复

宿主 vite.config.ts：

optimizeDeps: {
    exclude: ['vue-demi', '@ruovea/log'],
},

改完清除 Vite 预构建缓存后重启 dev：

rm -rf Web/node_modules/.vite/deps
pnpm dev

验证

重启后进入"操作日志 / 访问日志 / 异常日志 / 差异日志"菜单，DevTools Network 应能看到对应 GET /SysLogOp/Pages?... 等请求，列表正常渲染。

八、License

MIT