@ruovea/config

系统参数配置模块，以 pnpm 源码包 形式提供给各宿主项目复用。

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

一、目录结构

src/
├─ index.ts          # 入口：导出 ConfigPlugin + API + 类型
├─ plugin.ts         # Vue install（校验必填项 / provide / mergeLocaleMessage）
├─ context.ts        # InjectionKey + useConfigContext()
├─ types.ts          # ConfigPluginOptions / ConfigEndpoints / AccountTypeEnum
├─ routes.ts         # 1 条静态路由（可选使用）
├─ api/
│  ├─ index.ts       # 13 个 API 函数
│  ├─ http.ts        # request 注入点
│  ├─ endpoints.ts   # URL 前缀（可覆盖）
│  └─ config.ts      # 系统参数配置 CRUD + 缓存 / 分组 / 系统信息
├─ i18n/locales/     # 6 语言（en / fr-fr / ja-jp / vi-vn / zh-cn / zh-tw）
└─ views/config/
   ├─ index.vue                  # 配置列表页（依赖宿主 Table / TableSearch / ModifyRecord）
   └─ component/editConfig.vue   # 新增/编辑弹窗

二、宿主接入

2.1 安装

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

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

cd <config-module 目录> && pnpm install   # 包内依赖
cd <宿主> && pnpm install                  # 建立 link

2.2 装配插件

// plugins/config.ts
import type { App } from 'vue';
import { defineAsyncComponent } from 'vue';
import { ConfigPlugin } from '@ruovea/config';
import request from '/@/utils/request';
import { auth } from '/@/utils/authFunction';
import { i18n } from '/@/i18n/index';
import { useUserInfo } from '/@/stores/userInfo';

export function setupConfig(app: App) {
  const { userInfos } = useUserInfo();
  app.use(ConfigPlugin, {
    request: request as any,
    auth,
    i18n: i18n as any,
    components: {
      Table: defineAsyncComponent(() => import('/@/components/table/index.vue')),
      TableSearch: defineAsyncComponent(() => import('/@/components/table/search.vue')),
      ModifyRecord: defineAsyncComponent(() => import('/@/components/table/modifyRecord.vue')),
    },
    currentUser: { accountType: userInfos.accountType },
  });
}

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

注意：useUserInfo() 必须在 app.use(pinia) 之后调用，因此 setupConfig 也需在 pinia 之后执行。

2.3 后端动态路由映射

// router/backEnd.ts
import { configDynamicComponents } from '@ruovea/config';

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

三、ConfigPluginOptions 说明

| 字段 | 必填 | 说明 | |---|---|---| | request | ✅ | 宿主 axios 实例（已配 baseURL / token / 拦截器） | | components.Table | ✅ | 宿主表格组件 | | components.TableSearch | ➖ | 宿主搜索表单组件，缺省时列表页无搜索区 | | components.ModifyRecord | ➖ | 宿主修改记录组件，缺省时显示原始 remark 字段 | | currentUser | ➖ | 宿主当前用户信息，accountType === 2 时显示内置参数单选 | | auth | ➖ | (code: string) => boolean，按钮权限校验，缺省 () => true | | i18n | ➖ | 宿主 vue-i18n 实例（用于 mergeLocaleMessage） | | endpoints | ➖ | 覆盖 API URL 前缀 | | registerI18n | ➖ | 是否自动 merge i18n，默认 true |

i18n 注入约定

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

内置参数 / 状态列的翻译

列表中"内置参数"（sysFlag，0/1）与"状态"（isDisable，0/1）两列直接使用包内 i18n 翻译，不依赖 <g-sys-dict> 全局组件：

• sysFlag === 1 → t('message.common.yes')（是）
• sysFlag === 0 → t('message.common.no')（否）
• isDisable === 1 → t('message.common.disable')（禁用）
• isDisable === 0 → t('message.common.enable')（启用）

6 种语言（zh-cn / zh-tw / en / fr-fr / ja-jp / vi-vn）均已在 src/i18n/locales/*.ts 提供 common.yes / common.no / common.enable / common.disable 翻译。

四、Endpoints 说明

interface ConfigEndpoints {
  sysConfigPages:        '/SysConfig/Pages'
  sysConfigData:         '/SysConfig/Data'
  sysConfigAddData:      '/SysConfig/AddData'
  sysConfigUpdateData:   '/SysConfig/UpdateData'
  sysConfigDeleteData:   '/SysConfig/DeleteData'
  sysConfigBatchDelete:  '/SysConfig/BatchDelete'
  sysConfigConfigCache:  '/SysConfig/ConfigCache'
  sysConfigConfigCaches: '/SysConfig/ConfigCaches'
  sysConfigConfig:       '/SysConfig/Config'
  sysConfigConfigs:      '/SysConfig/Configs'
  sysConfigDemoEnvFlag:  '/SysConfig/DemoEnvFlag'
  sysConfigGroupList:    '/SysConfig/GroupList'
  sysConfigSysInfo:      '/SysConfig/SysInfo'
}

五、权限编码清单

| 编码 | 位置 | 说明 | |---|---|---| | sysConfig:addData | 配置列表 | 新增按钮 | | sysConfig:updateData | 配置列表 | 编辑按钮 | | sysConfig:deleteData | 配置列表 | 删除按钮 | | sysConfig:batchDelete | 配置列表 | 批量删除按钮 + 控制多选列显示 |

六、路由

| path | name | keepAlive | 说明 | |---|---|---|---| | /system/config | sysConfig | ✅ | 系统参数配置列表 |

路由 meta.title 使用硬编码中文 '系统参数配置'，菜单国际化通过包内 locale 文件的 router.sysConfig 键实现。

七、Vite 预构建排除

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

现象

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

根因

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

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

修复

宿主 vite.config.ts：

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

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

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

验证

重启后进入"系统参数配置"菜单，DevTools Network 应能看到 GET /SysConfig/Pages?... 请求，列表正常渲染。

八、License

MIT