{"_id":"@blueking/monitor-vue2-host","_rev":"4-00a683493917ba92ec3d33b1fb4aac21","name":"@blueking/monitor-vue2-host","dist-tags":{"alpha":"2.0.2-beta.5","latest":"2.0.7"},"versions":{"2.0.2-beta.5":{"name":"@blueking/monitor-vue2-host","version":"2.0.2-beta.5","keywords":["@blueking","@blueking/monitor-vue2-host"],"author":{"name":"bkfe"},"license":"MIT","_id":"@blueking/monitor-vue2-host@2.0.2-beta.5","maintainers":[{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"56bb8d20d5d1530594c9c6bc4c0241845a0bf6a6","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-host/-/monitor-vue2-host-2.0.2-beta.5.tgz","fileCount":11,"integrity":"sha512-LSMfpYFPwGbQWW85nAsz3dNfNOxcVAZSy7/IAgwh+hLZDoiGXjXLisTEZFWFIQE8f5kx0LbczZ47ql87+RWmDg==","signatures":[{"sig":"MEQCID5Z+920OrwlvPZj84iP8K9mXDboaWw8ECxyxrYkSapPAiBnMfLG528liPtUIYna9mq422dexMKNBT1dok8scx5UhQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28894218},"main":"index.js","module":"index.js","exports":{".":"./index.js","./index.css":"./index.css"},"scripts":{},"_npmUser":{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"},"_npmVersion":"11.7.0","description":"蓝鲸监控告警中心与 Trace 检索的可嵌入 Vue3 子应用，供 Vue2 宿主（APM 等）挂载","directories":{},"_nodeVersion":"22.20.0","dependencies":{"dayjs":"^1.11.18","echarts":"^5.6.0","monaco-editor":"0.44.0","@blueking/bkui-library":"0.0.0-beta.6","@prometheus-io/lezer-promql":"0.305.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/monitor-vue2-host_2.0.2-beta.5_1789046144626_0.12467432862331895","host":"s3://npm-registry-packages-npm-production"}},"0.0.0-beta.1":{"name":"@blueking/monitor-vue2-host","version":"0.0.0-beta.1","keywords":["@blueking","@blueking/monitor-vue2-host"],"author":{"name":"bkfe"},"license":"MIT","_id":"@blueking/monitor-vue2-host@0.0.0-beta.1","maintainers":[{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"b3546816e01bf6cc14975130bc98a39db9cfd881","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-host/-/monitor-vue2-host-0.0.0-beta.1.tgz","fileCount":11,"integrity":"sha512-qjkQA1IkU5uKBd+rsrSRHXe7AVNrxPN0b5dNH8VEkNzNX+NzDA1gNFJnQjrM8PQdFu/ZUXBATkcSuVwJITcyZw==","signatures":[{"sig":"MEUCIQCJy/z9gBbtClHpxR4dXFWUXz59vZS+2B7S+cXC87juOwIgTEc78jGn5ZwvjSLpT/rExfkrrm38whmXwFtrzwZQ1FE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEQCIHuqyG1+4Qn0V13oxa5mCQq3yVzJDShKv+YylX+zmi0fAiB8Nlb56vNCylG/psUXAvWqsdK3xgH7rnZNTiKV4RLKpg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28894218},"main":"index.js","module":"index.js","exports":{".":"./index.js","./index.css":"./index.css"},"scripts":{},"_npmUser":{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"},"_npmVersion":"11.7.0","description":"蓝鲸监控告警中心与 Trace 检索的可嵌入 Vue3 子应用，供 Vue2 宿主（APM 等）挂载","directories":{},"_nodeVersion":"22.20.0","dependencies":{"dayjs":"^1.11.18","echarts":"^5.6.0","monaco-editor":"0.44.0","@blueking/bkui-library":"0.0.0-beta.6","@prometheus-io/lezer-promql":"0.305.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/monitor-vue2-host_0.0.0-beta.1_1789046649406_0.5455556062785181","host":"s3://npm-registry-packages-npm-production"}},"2.0.6":{"name":"@blueking/monitor-vue2-host","version":"2.0.6","keywords":["@blueking","@blueking/monitor-vue2-host"],"author":{"name":"bkfe"},"license":"MIT","_id":"@blueking/monitor-vue2-host@2.0.6","maintainers":[{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"f6923d917e3422ce1ffafa45bac0b3bbfeee6800","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-host/-/monitor-vue2-host-2.0.6.tgz","fileCount":11,"integrity":"sha512-FVTF4E8WukOswbHnf9vm35/FihfGqgpuGfJ6MHzZsETFSM0vcCZKxCg8kw9WMAv4UNuGmmuAyrFO1qxCISyqFw==","signatures":[{"sig":"MEUCIDIBIwTvPe8yOAxcdGM8Q/mokmZBtTjDgwuNrJ94KwZXAiEAo/denARuC4MFB3MzTpXfM+PYN1/0YEMvW2u/BuSVweA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIEqDzKTLId6+w2q24ZSZQQ7Bvy4BJFJtMjLQZ2fjziJYAiEAnEoDWqFX1/sGKQx8HmVlEsRsD2YAmJGbICSiVPza2xk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28894211},"main":"index.js","module":"index.js","exports":{".":"./index.js","./index.css":"./index.css"},"scripts":{},"_npmUser":{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"},"_npmVersion":"11.7.0","description":"蓝鲸监控告警中心与 Trace 检索的可嵌入 Vue3 子应用，供 Vue2 宿主（APM 等）挂载","directories":{},"_nodeVersion":"22.20.0","dependencies":{"dayjs":"^1.11.18","echarts":"^5.6.0","monaco-editor":"0.44.0","@blueking/bkui-library":"0.0.0-beta.6","@prometheus-io/lezer-promql":"0.305.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/monitor-vue2-host_2.0.6_1789046760910_0.8099399982111608","host":"s3://npm-registry-packages-npm-production"}},"2.0.7":{"_id":"@blueking/monitor-vue2-host@2.0.7","dist":{"shasum":"cb2f947a9be697c5876646306a2653637b479bf4","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-host/-/monitor-vue2-host-2.0.7.tgz","fileCount":11,"integrity":"sha512-xVoedY9ngU5P/WeTG+buvi0OgtoNcTqyEXJVfs7WgUJONwDkywbtXZadbwccCsyEux3Rg22n2mU/kql18KCYJg==","signatures":[{"sig":"MEYCIQC6faTyeGYRZe8fp0aWodFGYUaaAPZI3hP+VNaDYci9PQIhALKh5cDNsMTqWmjZHfmRCFDC6A3FsYBsKNIO6iQbuqLV","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEirpTPSGv/NVDsHbWZgJXvAMDVQ8g4k7x1j5431o2PQAiEAn14EhhzlNQsRRvrY5gx2CznaddhW5fMqJuRpW1e1W5s="}],"unpackedSize":28894280},"main":"index.js","name":"@blueking/monitor-vue2-host","author":{"name":"bkfe"},"module":"index.js","exports":{".":"./index.js","./index.css":"./index.css"},"license":"MIT","scripts":{},"version":"2.0.7","_npmUser":{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"},"keywords":["@blueking","@blueking/monitor-vue2-host"],"_npmVersion":"11.7.0","description":"蓝鲸监控告警中心与 Trace 检索的可嵌入 Vue3 子应用，供 Vue2 宿主（APM 等）挂载","directories":{},"maintainers":[{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"}],"_nodeVersion":"22.20.0","dependencies":{"dayjs":"^1.11.18","echarts":"^5.6.0","monaco-editor":"0.44.0","@blueking/bkui-library":"0.0.0-beta.6","@prometheus-io/lezer-promql":"0.305.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/monitor-vue2-host_2.0.7_1789093205299_0.5859216576010458"}}},"time":{"created":"2026-09-10T13:15:44.511Z","modified":"2026-09-11T02:20:05.669Z","2.0.2-beta.5":"2026-09-10T13:15:44.906Z","0.0.0-beta.1":"2026-09-10T13:24:09.630Z","2.0.6":"2026-09-10T13:26:01.118Z","2.0.7":"2026-09-11T02:20:05.500Z"},"author":{"name":"bkfe"},"license":"MIT","keywords":["@blueking","@blueking/monitor-vue2-host"],"description":"蓝鲸监控告警中心与 Trace 检索的可嵌入 Vue3 子应用，供 Vue2 宿主（APM 等）挂载","maintainers":[{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"}],"readme":"# @blueking/monitor-vue2-host\n\n> 把蓝鲸监控的**告警中心**与 **Trace 检索**（`src/trace`，Vue3 + TSX 工程）打成可嵌入的 Vue3 子应用，\n> 供 **Vue2 宿主**（APM 等）在自己的页面里挂载，无需整站迁移到 Vue3。\n>\n> 如果你的工程本身是 Vue3、只想复用单个组件（检索筛选、PromQL 编辑器、图表等），\n> 请改用 [`@blueking/monitor-vue3-components`](https://www.npmjs.com/package/@blueking/monitor-vue3-components)。\n\n---\n\n## 1. 安装与使用\n\n```bash\nnpm install @blueking/monitor-vue2-host\n```\n\n产物：`index.js`（ESM 入口，代码按需拆成同目录若干 chunk）、`index.css`（样式）、`readme.md`。\n\n```ts\n// 样式需要引入一次（建议放在宿主组件或应用入口）\nimport '@blueking/monitor-vue2-host/index.css';\n\n// 入口较大，建议按需动态加载\nconst { mountAlarmCenter } = await import('@blueking/monitor-vue2-host');\n\nconst handle = mountAlarmCenter(el, {\n  props: { timeRange, refreshInterval, timezone, queryString },\n  onEvent: (event, ...args) => {\n    /* 子应用事件回传宿主，例如 conditionChange / queryStringChange */\n  },\n});\n\nhandle.update({ timeRange: next }); // 增量推送 props，触发子应用响应式更新\nhandle.unmount(); // 宿主销毁前必须调用，否则内存泄漏\n```\n\n`mountTraceExplore` 用法完全一致。子应用的 Vue3 实例（router / pinia / i18n）由包内自行创建，\n宿主只需提供一个挂载节点。\n\n## 2. 导出\n\n| 导出名 | 说明 |\n| --- | --- |\n| `mountAlarmCenter(el, options)` | 挂载告警中心，返回 `{ update, unmount }` |\n| `mountTraceExplore(el, options)` | 挂载 Trace 检索，返回 `{ update, unmount }` |\n| `AlarmCenterApm` / `TraceExploreApm` | 两块能力的根组件，供已有 Vue3 应用直接渲染（需自备 router / pinia / i18n） |\n| 类型 | `MountOptions` / `MountHandle` / `BridgeProps` / `BridgeEmit` |\n\n## 3. 运行环境与依赖\n\n以下依赖被声明为 `external`，需可从宿主工程解析到（已列在本包 `dependencies` 中，正常安装即可获得）：\n\n| 依赖 | 用途 |\n| --- | --- |\n| `@blueking/bkui-library` | **Vue3 运行时**，包内所有 `vue` 导入都指向它 |\n| `monitor-api` / `monitor-common` / `monitor-ui` / `monitor-pc` / `monitor-static` | 蓝鲸监控工程内的请求层、公共能力与图标资源 |\n| `echarts` / `monaco-editor` / `dayjs` / `@prometheus-io/lezer-promql` | 体积较大且宿主通常已有 |\n\n> **Vue3 运行时不叫 `vue`**：包内不存在对裸 `vue` 的引用，运行时统一从 `@blueking/bkui-library`\n> （内容即 `export * from '@vue/runtime-dom'`）获取，因此 Vue2 宿主安装本包不会与自己的 `vue`（v2）冲突。\n\n> **`monitor-*` 是工程内包**：全部由宿主提供（蓝鲸监控仓库内经 pnpm workspace 软链自动满足）。\n> `monitor-api` 尤其不能各带一份，否则会出现两套请求拦截器与登录态。**因此本包只面向蓝鲸监控工程内部使用。**\n\n> **类名前缀是 `bkmv3-`**：包内蓝鲸组件类名统一改写为该前缀（如 `.bkmv3-button`），\n> 与宿主自带的 Vue2 版 `.bk-*` 样式隔离。覆盖样式请以 `.bkmv3-*` 书写。\n\n## 4. 宿主接入注意\n\n- **挂载期间的 `window.i18n`**：子应用加载时会临时使用宿主的 `window.i18n`，宿主可在 `await import`\n  前后保存并恢复，避免全局被污染（参考 monitor-ui 内 `apm-alarm-center` 容器的实现）。\n- **异步挂载竞态**：`mount` 是在 `await import` 之后调用的，宿主组件若在此期间被销毁，需用标志位跳过挂载。\n- **嵌入态差异**：包内通过 `src/trace/common/embed-context.ts` 的运行时上下文识别「已被宿主嵌入」，\n  据此收敛查询的业务范围、隐藏宿主已提供的筛选控件、调整弹层样式，无需宿主额外配置。\n","readmeFilename":"readme.md"}