{"_id":"@bankesuoma/tools","_rev":"2-cf624593c99f60e651740c3ee0f9e7e3","name":"@bankesuoma/tools","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@bankesuoma/tools","version":"1.0.0","_id":"@bankesuoma/tools@1.0.0","maintainers":[{"name":"bankesuoma","email":"suhao80231@163.com"}],"dist":{"shasum":"2ab0f1ab01d2720e1c7cae182813b63f56b452d3","tarball":"https://registry.npmjs.org/@bankesuoma/tools/-/tools-1.0.0.tgz","fileCount":35,"integrity":"sha512-vdqYTiUZeE8avslkKpNDZ651rS6xECwLtN0JiNVnC3qheY3uZEWZ345bGZiMYCGIsKCoo4zR6G2Tlk2f6S+2Ng==","signatures":[{"sig":"MEUCIGIuzpyJkEIPuoUdu26hc+irA5abuJYe2Ku0qkrT30wVAiEAmcGbWurlYjioY9RCeCNqfhh10CNhI8p9JA9rfPr5GoE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106493},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./vue":{"types":"./dist/guide/vue.d.ts","import":"./dist/guide/vue.mjs","require":"./dist/guide/vue.js"},"./guide":{"types":"./dist/guide/index.d.ts","import":"./dist/guide/index.mjs","require":"./dist/guide/index.js"},"./react":{"types":"./dist/guide/react.d.ts","import":"./dist/guide/react.mjs","require":"./dist/guide/react.js"}},"scripts":{"dev":"rollup -c -w","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"bankesuoma","email":"suhao80231@163.com"},"_npmVersion":"10.9.3","directories":{},"_nodeVersion":"22.20.0","dependencies":{"react-dom":"^19.2.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","rollup":"^4.60.1","typescript":"^6.0.2","@types/react":"^19.2.14","@rollup/plugin-alias":"^5.0.0","@rollup/plugin-commonjs":"^29.0.2","@rollup/plugin-typescript":"^12.3.0","@rollup/plugin-node-resolve":"^16.0.3"},"peerDependencies":{"vue":">=3.0.0","react":"^19.2.5"},"peerDependenciesMeta":{"vue":{"optional":true},"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/tools_1.0.0_1775817351326_0.3621564367641972","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bankesuoma/tools","version":"1.0.1","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^19.2.5","vue":">=3.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"vue":{"optional":true}},"exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"},"./guide":{"import":"./dist/guide/index.mjs","require":"./dist/guide/index.js","types":"./dist/guide/index.d.ts"},"./react":{"import":"./dist/guide/react.mjs","require":"./dist/guide/react.js","types":"./dist/guide/react.d.ts"},"./vue":{"import":"./dist/guide/vue.mjs","require":"./dist/guide/vue.js","types":"./dist/guide/vue.d.ts"}},"publishConfig":{"access":"public"},"devDependencies":{"@rollup/plugin-alias":"^5.0.0","@rollup/plugin-commonjs":"^29.0.2","@rollup/plugin-node-resolve":"^16.0.3","@rollup/plugin-typescript":"^12.3.0","@types/react":"^19.2.14","rollup":"^4.60.1","tsup":"^8.5.1","typescript":"^6.0.2"},"dependencies":{"react-dom":"^19.2.5"},"_id":"@bankesuoma/tools@1.0.1","gitHead":"d39747b1396f5a00017ddfc8dd6745b8e5351803","description":"一个功能强大的前端工具库，提供用户引导系统等实用功能。","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-K75iDJL7l6XM5gRcliF04CHI3W6HWnzL40aH6kOFvzp5UIhMoS+9ySIYYr/8TUgf6NJG6VyyDavsNrQtDmBmrg==","shasum":"2af8f526db2bf3f8ed712e6d37aaca8bf0b3ec13","tarball":"https://registry.npmjs.org/@bankesuoma/tools/-/tools-1.0.1.tgz","fileCount":10,"unpackedSize":25628,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGf5Hw6SZ+yK5vNzvduUPN+Pn1TGcpJFuh0Cndto6fmsAiEA++JiRLt59oKUnANlqYltJxx2Q5aa9IB33KBhLy1Hyxs="}]},"_npmUser":{"name":"bankesuoma","email":"suhao80231@163.com"},"directories":{},"maintainers":[{"name":"bankesuoma","email":"suhao80231@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tools_1.0.1_1775817976896_0.06939651964164306"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T10:35:51.211Z","modified":"2026-04-10T10:46:17.118Z","1.0.0":"2026-04-10T10:35:51.463Z","1.0.1":"2026-04-10T10:46:17.024Z"},"maintainers":[{"name":"bankesuoma","email":"suhao80231@163.com"}],"readme":"# @bankesuoma/tools\r\n\r\n一个功能强大的前端工具库，提供用户引导系统等实用功能。\r\n\r\n## 📦 安装\r\n\r\n### 使用 npm\r\n```bash\r\nnpm install @bankesuoma/tools\r\n```\r\n\r\n### 使用 yarn\r\n```bash\r\nyarn add @bankesuoma/tools\r\n```\r\n\r\n### 使用 pnpm\r\n```bash\r\npnpm add @bankesuoma/tools\r\n```\r\n\r\n## 🚀 功能特性\r\n\r\n- **用户引导系统**：支持多步骤引导，高亮目标元素，智能提示框定位\r\n- **跨框架支持**：同时支持原生JavaScript、React和Vue\r\n- **响应式设计**：自动适应不同屏幕尺寸\r\n- **丰富的配置选项**：可自定义内边距、颜色、回调等\r\n- **性能优化**：使用requestAnimationFrame和ResizeObserver确保流畅体验\r\n- **键盘支持**：支持方向键导航和ESC键关闭\r\n\r\n## 📖 使用指南\r\n\r\n### 1. 原生 JavaScript\r\n\r\n```javascript\r\nimport { Guide } from '@bankesuoma/tools/guide';\r\n\r\n// 定义引导步骤\r\nconst steps = [\r\n  {\r\n    element: '#first-element',\r\n    title: '欢迎使用',\r\n    content: '这是第一个引导步骤，点击下一步继续',\r\n    padding: 10\r\n  },\r\n  {\r\n    element: '.second-element',\r\n    title: '功能介绍',\r\n    content: '这是第二个引导步骤，展示了另一个功能',\r\n    allowClick: true\r\n  }\r\n];\r\n\r\n// 创建引导实例\r\nconst guide = new Guide(steps, {\r\n  padding: 10,\r\n  maskColor: 'rgba(0, 0, 0, 0.7)',\r\n  accentColor: '#2563eb',\r\n  allowCloseOnClickMask: false,\r\n  onStart: () => console.log('引导开始'),\r\n  onEnd: () => console.log('引导结束'),\r\n  onStepChange: (index) => console.log('当前步骤:', index)\r\n});\r\n\r\n// 启动引导\r\nguide.start();\r\n```\r\n\r\n### 2. React\r\n\r\n```jsx\r\nimport { useReactGuide } from '@bankesuoma/tools/guide';\r\n\r\nfunction App() {\r\n  const steps = [\r\n    {\r\n      element: '#react-element',\r\n      title: 'React 引导',\r\n      content: '这是 React 版本的引导示例',\r\n    }\r\n  ];\r\n\r\n  const { start } = useReactGuide(steps);\r\n\r\n  return (\r\n    <div>\r\n      <div id=\"react-element\">目标元素</div>\r\n      <button onClick={start}>开始引导</button>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### 3. Vue\r\n\r\n```vue\r\n<template>\r\n  <div>\r\n    <div class=\"vue-element\">目标元素</div>\r\n    <button @click=\"startGuide\">开始引导</button>\r\n  </div>\r\n</template>\r\n\r\n<script setup>\r\nimport { useVueGuide } from '@bankesuoma/tools/guide';\r\n\r\nconst steps = [\r\n  {\r\n    element: '.vue-element',\r\n    title: 'Vue 引导',\r\n    content: '这是 Vue 版本的引导示例',\r\n  }\r\n];\r\n\r\nconst { start: startGuide } = useVueGuide(steps);\r\n</script>\r\n```\r\n\r\n## 📚 API 文档\r\n\r\n### Guide 类\r\n\r\n#### 构造函数\r\n\r\n```typescript\r\nconst guide = new Guide(steps: GuideStep[], options?: GuideOptions);\r\n```\r\n\r\n#### 方法\r\n\r\n| 方法名 | 描述 | 参数 | 返回值 |\r\n|-------|------|------|--------|\r\n| `start()` | 启动引导流程 | 无 | `Promise<void>` |\r\n| `next()` | 进入下一步 | 无 | `void` |\r\n| `prev()` | 返回上一步 | 无 | `void` |\r\n| `destroy()` | 销毁引导实例 | 无 | `void` |\r\n\r\n### 类型定义\r\n\r\n#### GuideStep\r\n\r\n| 属性 | 类型 | 描述 | 是否必填 | 默认值 |\r\n|------|------|------|----------|--------|\r\n| `element` | `string` | CSS 选择器 | 是 | - |\r\n| `title` | `string` | 引导标题 | 是 | - |\r\n| `content` | `string` | 引导内容 | 是 | - |\r\n| `padding` | `number` | 高亮区域内边距 | 否 | 10 |\r\n| `allowClick` | `boolean` | 是否允许点击高亮元素 | 否 | false |\r\n| `onBeforeShow` | `() => void \\| Promise<void>` | 显示前的钩子 | 否 | - |\r\n\r\n#### GuideOptions\r\n\r\n| 属性 | 类型 | 描述 | 是否必填 | 默认值 |\r\n|------|------|------|----------|--------|\r\n| `padding` | `number` | 全局内边距 | 否 | 10 |\r\n| `maskColor` | `string` | 遮罩颜色 | 否 | 'rgba(0, 0, 0, 0.7)' |\r\n| `accentColor` | `string` | 主题色 (按钮颜色) | 否 | '#2563eb' |\r\n| `allowCloseOnClickMask` | `boolean` | 点击遮罩是否关闭 | 否 | false |\r\n| `onStart` | `() => void` | 开始回调 | 否 | - |\r\n| `onEnd` | `() => void` | 结束/跳过回调 | 否 | - |\r\n| `onStepChange` | `(index: number) => void` | 步骤切换回调 | 否 | - |\r\n\r\n## 🔧 高级配置\r\n\r\n### 异步钩子\r\n\r\n```javascript\r\nconst steps = [\r\n  {\r\n    element: '#async-element',\r\n    title: '异步操作',\r\n    content: '等待异步操作完成后显示',\r\n    onBeforeShow: async () => {\r\n      // 执行异步操作\r\n      await new Promise(resolve => setTimeout(resolve, 1000));\r\n      console.log('异步操作完成');\r\n    }\r\n  }\r\n];\r\n```\r\n\r\n### 响应式设计\r\n\r\n引导系统会自动处理窗口大小变化和滚动事件，确保提示框始终在合适的位置。\r\n\r\n### 键盘导航\r\n\r\n- `→` 或 `右箭头`：下一步\r\n- `←` 或 `左箭头`：上一步\r\n- `Esc` 或 `ESC`：关闭引导\r\n\r\n## 🎯 浏览器支持\r\n\r\n- Chrome (最新版本)\r\n- Firefox (最新版本)\r\n- Safari (最新版本)\r\n- Edge (最新版本)\r\n\r\n## 📁 项目结构\r\n\r\n```\r\n@bankesuoma/tools/\r\n├── src/\r\n│   ├── guide/\r\n│   │   ├── core.ts        # 核心实现\r\n│   │   ├── index.ts       # 导出入口\r\n│   │   ├── react.tsx      # React 适配\r\n│   │   └── vue.ts         # Vue 适配\r\n│   └── index.ts           # 主入口\r\n├── dist/                  # 构建输出\r\n├── package.json\r\n└── README.md\r\n```\r\n\r\n## 🤝 贡献\r\n\r\n欢迎提交 Issue 和 Pull Request！\r\n\r\n### 开发流程\r\n\r\n1. 克隆仓库\r\n2. 安装依赖：`npm install`\r\n3. 开发模式：`npm run dev`\r\n4. 构建：`npm run build`\r\n\r\n## 📄 许可证\r\n\r\nMIT License\r\n\r\n## 📞 联系方式\r\n\r\n- 作者：Banke Suoma\r\n- 邮箱：your-email@example.com\r\n\r\n---\r\n\r\n**享受使用 @bankesuoma/tools！** 🎉","readmeFilename":"README.md","description":"一个功能强大的前端工具库，提供用户引导系统等实用功能。"}