@melt-js/comps-bag-sys

@melt-js/comps-bag-sys 是官方提供的系统设置示例插件，放的是常规设置、高级设置、插件管理这类页面。

这个包真正想说明的是一条边界：宿主框架可以提供设置能力的壳，但具体的设置页面和配置流程，最好还是留在插件层。

安装

pnpm add @melt-js/libs-bag-entry @melt-js/comps-bag-sys

宿主项目需要自行提供 vue、vue-router，并通常会和 @melt-js/libs-bag-host 一起使用。

它带了什么

• /sys-setting: 常规设置页
• /sys-setting/advanced: 高级设置页
• /sys-setting/plugins: 插件管理页
• 一组对应的系统设置菜单
• zh-CN / en 多语言文案

怎么接进去

import { bootstrapPlugins } from '@melt-js/libs-bag-entry'
import sysSettingPlugin from '@melt-js/comps-bag-sys'

await bootstrapPlugins({
  app,
  router,
  i18n,
  plugins: [sysSettingPlugin]
})

一般拿它做什么

• 作为官方“系统设置业务插件”的参考实现
• 作为插件管理页的落点，配合 @melt-js/libs-bag-entry 暴露的运行时工具展示插件清单
• 作为你自己项目里设置中心的起步模板

这份示例的特点

• 插件 ID: plugin-sys-setting
• 默认排序: 100
• 页面范围: 常规设置、高级设置、插件管理
• 菜单分组: sys-setting-group
• 多语言: 内置中文和英文文案

边界

• 它不是宿主框架本体，不应该整包并进 @melt-js/libs-bag-host。
• @melt-js/libs-bag-host 负责布局、权限、插件引导、缓存、主题这些框架层能力。
• @melt-js/comps-bag-sys 负责具体的系统设置业务页，包括插件管理这种偏运营、偏配置的页面。
• 这么拆的好处很直接：宿主层能保持通用，不会被某一个项目的设置中心绑死。

一般会搭什么

• @melt-js/libs-bag-entry：提供插件协议、运行时清单和基础后台组件
• @melt-js/libs-bag-host：把系统设置插件挂到宿主应用里

构建

pnpm build   # vite build（默认开启 javascript-obfuscator 混淆 + 注释清理）→ vue-tsc 生成 d.ts

• 混淆参数与仓库内其它 comps-* 包一致：标识符重命名 + 字符串数组（30%），不开控制流平坦化 / 死代码注入 / 自保护 / 调试保护；
• renameGlobals / renameProperties 关闭：插件对象的 id / name / routes / meta 等字段名不变，宿主照常读取；
• 产物里的注释（/*!、@license、@preserve、@__PURE__）会被清空；
• 混淆后不再输出 source map；
• 排查产物：HEL_OBFUSCATE=0 pnpm build（关闭混淆并恢复 source map）。