{"_id":"@blueking/apm-vue3-for-vue2","name":"@blueking/apm-vue3-for-vue2","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@blueking/apm-vue3-for-vue2","version":"0.0.1","description":"蓝鲸监控 APM 用的 Vue3→Vue2 组件库：把告警中心与 Trace 检索打成可嵌入 Vue3 子应用，供 Vue2 宿主挂载","scripts":{},"main":"index.js","module":"index.js","exports":{".":"./index.js","./index.css":"./index.css"},"author":{"name":"bkfe"},"license":"MIT","keywords":["@blueking","apm","vue3","vue2","@blueking/apm-vue3-for-vue2"],"dependencies":{"@blueking/bkui-library":"0.0.0-beta.6","@prometheus-io/lezer-promql":"0.305.0","@toast-ui/editor":"^3.2.2","@toast-ui/editor-plugin-code-syntax-highlight":"^3.1.0","dayjs":"^1.11.18","echarts":"^5.6.0","monaco-editor":"0.44.0"},"_id":"@blueking/apm-vue3-for-vue2@0.0.1","_nodeVersion":"22.20.0","_npmVersion":"11.7.0","dist":{"integrity":"sha512-NJWotNHKCI2vWMyOfcVYVj2oozT1NqzO/2+W+jFuvY0rUazqk0oEYhxiTFIULSdrrujIjdoDo1ofndiNQnsoEw==","shasum":"597df12a55c0d6dcebfd8554f4e90ae47db352c8","tarball":"https://registry.npmjs.org/@blueking/apm-vue3-for-vue2/-/apm-vue3-for-vue2-0.0.1.tgz","fileCount":11,"unpackedSize":26641883,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDV0EAhlHb5JjrAu/aZgRUABvBLcM4g74bQNueYlKZIIgIgHyuoXssDowFc/ecNYnCHQ3dG3Wu2NjjduXkU5osb19c="}]},"_npmUser":{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"},"directories":{},"maintainers":[{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/apm-vue3-for-vue2_0.0.1_1789098331416_0.05727833203089472"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-11T03:45:31.245Z","0.0.1":"2026-09-11T03:45:31.663Z","modified":"2026-09-11T03:45:31.855Z"},"maintainers":[{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"}],"description":"蓝鲸监控 APM 用的 Vue3→Vue2 组件库：把告警中心与 Trace 检索打成可嵌入 Vue3 子应用，供 Vue2 宿主挂载","keywords":["@blueking","apm","vue3","vue2","@blueking/apm-vue3-for-vue2"],"author":{"name":"bkfe"},"license":"MIT","readme":"# @blueking/apm-vue3-for-vue2\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/apm-vue3-for-vue2\n```\n\n产物：`index.js`（ESM 入口，代码按需拆成同目录若干 chunk）、`index.css`（样式）、`readme.md`。\n\n```ts\n// 样式需要引入一次（建议放在宿主组件或应用入口）\nimport '@blueking/apm-vue3-for-vue2/index.css';\n\n// 入口较大，建议按需动态加载\nconst { mountAlarmCenter } = await import('@blueking/apm-vue3-for-vue2');\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","_rev":"1-89cab99f35d42f53343bc099263f2e9b"}