\r\n```\r\n\r\n### 动态条码\r\n\r\n```jsx\r\nfunction DynamicBarcode() {\r\n const [barcodeValue, setBarcodeValue] = useState('SAMPLE123');\r\n const [format, setFormat] = useState('CODE128');\r\n \r\n return (\r\n \r\n setBarcodeValue(e.target.value)}\r\n placeholder=\"输入条码内容\"\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```bash\r\n# 克隆项目\r\ngit clone \r\ncd barcode-component\r\n\r\n# 安装依赖\r\nnpm install\r\n\r\n# 启动开发服务器\r\nnpm run dev\r\n```\r\n\r\n### 构建打包\r\n\r\n```bash\r\n# 构建所有版本\r\nnpm run build\r\n\r\n# 构建 CommonJS 版本\r\nnpm run build:lib\r\n\r\n# 构建 ES Module 版本\r\nnpm run build:es\r\n\r\n# 构建 UMD 版本\r\nnpm run build:umd\r\n```\r\n\r\n### 目录结构\r\n\r\n```\r\nbarcode-component/\r\n├── src/\r\n│ ├── BarcodeComponent.jsx # 主组件\r\n│ ├── barcode-meta.js # 组件元数据\r\n│ └── index.js # 入口文件\r\n├── public/\r\n│ └── index.html # 演示页面\r\n├── lib/ # CommonJS 构建输出\r\n├── es/ # ES Module 构建输出\r\n├── dist/ # UMD 构建输出\r\n├── package.json\r\n├── webpack.config.js\r\n└── README.md\r\n```\r\n\r\n## 🔍 注意事项\r\n\r\n### 条形码内容要求\r\n\r\n- **EAN13**: 必须是 12 或 13 位数字\r\n- **EAN8**: 必须是 7 或 8 位数字\r\n- **UPC**: 必须是 11 或 12 位数字\r\n- **CODE39**: 支持数字、大写字母和 `-.$+%/` 符号\r\n- **CODE128**: 支持完整 ASCII 字符集\r\n\r\n### 错误处理\r\n\r\n组件内置错误处理机制，当条形码生成失败时会在 Canvas 上显示错误信息。\r\n\r\n### 性能优化\r\n\r\n- 使用 `React.memo` 避免不必要的重渲染\r\n- 仅在必要属性变化时重新生成条形码\r\n- Canvas 复用避免频繁创建销毁\r\n\r\n## 🤝 贡献指南\r\n\r\n欢迎提交 Issue 和 Pull Request！\r\n\r\n1. Fork 本仓库\r\n2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)\r\n3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)\r\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\r\n5. 开启 Pull Request\r\n\r\n## 📄 许可证\r\n\r\nMIT License - 详见 [LICENSE](LICENSE) 文件\r\n\r\n## 🆘 常见问题\r\n\r\n### Q: 如何在低代码引擎中使用？\r\n\r\nA: 参考上面的快速开始部分，需要先注册组件到设计器中。\r\n\r\n### Q: 支持二维码吗？\r\n\r\nA: 当前版本只支持条形码，二维码支持计划在下个版本中添加。\r\n\r\n### Q: 如何自定义更多样式？\r\n\r\nA: 可以通过 CSS 类名或内联样式对组件容器进行样式定制。\r\n\r\n### Q: 条形码模糊怎么办？\r\n\r\nA: 尝试调整 `width` 和 `height` 参数，或者在高 DPI 屏幕上使用更大的尺寸。\r\n\r\n---\r\n\r\n如有问题或建议，请提交 [Issue](https://github.com/your-org/barcode-component/issues) 或联系维护者。","readmeFilename":"README.md"}