bug-extractor-plugin 0.1.0

package/README.md

@@ -0,0 +1,192 @@
+# 嵌入式自动化 Bug 提取插件
+
+一个可嵌入各业务子系统的 Bug 自动提取插件，支持自动捕获接口错误、截图标注、多格式导出。
+
+## 功能特性
+
+- 🎯 **自动捕获接口错误** - 自动拦截 HTTP 请求错误，无需修改业务代码
+- 📸 **截图标注** - 自动截图 + 手动标注（矩形、箭头、文字、马赛克）
+- 📤 **多格式导出** - 支持 JSON / Markdown / CSV / Word / PDF 五种格式
+- 🔄 **批量导出** - 支持多选 Bug 一键导出
+- 🌐 **双模式接入** - 支持 npm 包和 iframe 两种接入方式
+- 🎨 **Vue 3 + TypeScript** - 现代化技术栈，类型安全
+
+## 技术栈
+
+- **框架**: Vue 3.4+ (Composition API)
+- **语言**: TypeScript 5.3+
+- **构建**: Vite 5.0+
+- **UI**: Element Plus 2.5+
+- **截图**: html-to-image
+- **导出**: docx / jspdf
+
+## 快速开始
+
+### 安装
+
+```bash
+npm install @bug-extractor/plugin
+```
+
+### Vue 3 项目接入
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import BugExtractor from '@bug-extractor/plugin'
+import App from './App.vue'
+
+const app = createApp(App)
+
+// 初始化插件
+BugExtractor.init({
+  system: 'BDC',
+  autoScreenshot: true,
+  screenshotOptions: { delay: 800 },
+  ignore: {
+    urls: ['/api/heartbeat'],
+    statusCodes: [401, 403],
+  },
+})
+
+// 注册插件
+app.use(BugExtractor.VuePlugin)
+app.mount('#app')
+```
+
+```vue
+<!-- App.vue -->
+<template>
+  <div id="app">
+    <router-view />
+    <BugExtractorToolbar />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BugExtractorToolbar } from '@bug-extractor/plugin'
+</script>
+```
+
+### iframe 模式接入
+
+```html
+<!-- 宿主 HTML -->
+<script src="https://plugin.example.com/bug-extractor-host.js"></script>
+
+<script>
+  // 注册截图钩子
+  window.BugExtractorScreenshot = async () => {
+    const { toJpeg } = await import('html-to-image');
+    return await toJpeg(document.body, { quality: 0.6 });
+  };
+
+  // 初始化插件
+  const adapter = new window.BugExtractor.IframeHostAdapter({
+    system: 'BDC',
+    pluginUrl: '//plugin.example.com/extractor.html',
+  });
+
+  adapter.init('//plugin.example.com/extractor.html', (bug) => {
+    console.log('捕获到 Bug:', bug);
+  });
+</script>
+```
+
+## 配置选项
+
+```typescript
+interface BugExtractorConfig {
+  // 系统标识
+  system: string;
+  
+  // 是否启用自动截图
+  autoScreenshot?: boolean;
+  
+  // 截图配置
+  screenshotOptions?: {
+    quality?: number;        // 图片质量 0-1
+    maxSize?: number;        // 最大文件大小（字节）
+    delay?: number;          // 延迟截图时间（毫秒）
+    showFlash?: boolean;     // 是否显示截图提示
+  };
+  
+  // 忽略规则
+  ignore?: {
+    urls?: (string | RegExp)[];      // 忽略的 URL
+    statusCodes?: number[];          // 忽略的状态码
+    businessCodes?: string[];        // 忽略的业务错误码
+    methods?: string[];              // 忽略的请求方法
+    filter?: (error: any) => boolean; // 自定义过滤函数
+  };
+  
+  // 回调函数
+  onBugCaptured?: (bug: BugReport) => void;
+}
+```
+
+## 导出格式
+
+| 格式 | 用途 | 特点 |
+|------|------|------|
+| JSON | 标准数据 | 适合系统对接 |
+| Markdown | 文档报告 | 适合 Git 归档 |
+| CSV | 表格数据 | 适合 Excel 分析 |
+| Word | 可编辑文档 | 适合协作打印 |
+| PDF | 只读文档 | 适合归档提交 |
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建库文件
+npm run build:lib
+
+# 运行测试
+npm run test
+
+# 运行测试（带覆盖率）
+npm run test:coverage
+
+# 类型检查
+npm run type-check
+```
+
+## 目录结构
+
+```
+bug-extractor-plugin/
+├── src/                    # 演示应用
+├── packages/               # 核心代码
+│   ├── core/              # 核心逻辑层（纯 TS）
+│   │   ├── interceptors/  # HTTP 拦截器
+│   │   ├── services/      # 核心服务
+│   │   └── exporters/     # 导出器
+│   ├── ui/                # UI 组件层（Vue 3）
+│   │   └── components/    # Vue 组件
+│   ├── adapters/          # 适配层
+│   │   ├── npm-adapter.ts
+│   │   └── iframe-adapter.ts
+│   └── types/             # 类型定义
+├── tests/                 # 测试文件
+│   ├── unit/             # 单元测试
+│   └── e2e/              # E2E 测试
+└── docs/                  # 文档
+```
+
+## 浏览器支持
+
+- Chrome >= 80
+- Firefox >= 78
+- Safari >= 13
+- Edge >= 80
+- 国产信创浏览器（基于 Chromium）
+
+## License
+
+MIT

package/dist/bug-extractor.es.js

@@ -0,0 +1,32 @@
+import { B as r, a as s, b as t, C as o, E as i, d as p, F as n, H as l, I as c, J as E, M as d, N as g, P as x, S, W as v, e as m, f as u, h as b, i as f, j as A, k as B, l as C, o as h, s as I, m as P, t as k, n as F, p as H } from "./index-iouTpRcq.js";
+export {
+  r as BugBuilderService,
+  s as BugDialog,
+  t as BugStoreService,
+  o as CsvExporter,
+  i as ErrorClassifier,
+  p as ExportService,
+  n as FloatingToolbar,
+  l as HttpInterceptor,
+  c as IframeAdapter,
+  E as JsonExporter,
+  d as MarkdownExporter,
+  g as NpmAdapter,
+  x as PdfExporter,
+  S as ScreenshotService,
+  v as WordExporter,
+  m as bindEvents,
+  u as clearElement,
+  b as createAdapter,
+  f as createAutoAdapter,
+  A as createElement,
+  B as debounce,
+  C as getExportService,
+  h as on,
+  I as setPosition,
+  P as setVisible,
+  k as throttle,
+  F as toggleClass,
+  H as transition
+};
+//# sourceMappingURL=bug-extractor.es.js.map

package/dist/bug-extractor.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bug-extractor.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}