{"_id":"@blueking/status-tag-web-component","_rev":"4-0847fedc16baff11fa4fc7ea673faf71","name":"@blueking/status-tag-web-component","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@blueking/status-tag-web-component","version":"1.0.0","keywords":["web-component","status-tag","i18n","framework-agnostic","typescript","shadow-dom","custom-elements"],"author":{"name":"Your Name","email":"your.email@example.com"},"license":"MIT","_id":"@blueking/status-tag-web-component@1.0.0","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"homepage":"https://github.com/forrany/status-tag-component.git","bugs":{"url":"https://github.com/forrany/status-tag-component/issues"},"dist":{"shasum":"efd8d3e334b2a2b8b58d742199e3ea93d216aa9e","tarball":"https://registry.npmjs.org/@blueking/status-tag-web-component/-/status-tag-web-component-1.0.0.tgz","fileCount":7,"integrity":"sha512-Ph3AwwWLx1lEidVG3jiRut0LJRCdi/ersCpVV1XcuhaDzwgNLbSOFRfJmCFtXXRjrHC2h2il35bMCMOmGSyVJA==","signatures":[{"sig":"MEUCIQC8yjNXe1AX3rd2K5NHDT07p/YqBvPRLLCrtrMWjVv75gIgH7gtJHAeZpGMBVMk+KkxP7Rs26lyd+cYRmZcrzLhdyU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37046},"main":"dist/status-tag.umd.js","types":"dist/index.d.ts","module":"dist/status-tag.mjs","engines":{"node":">=16.0.0"},"gitHead":"3a4a20e745064db66ebbbfabcb77209c3d45c8a6","scripts":{"dev":"vite","build":"tsc && vite build","clean":"rm -rf dist","preview":"vite preview"},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"repository":{"url":"git+https://github.com/forrany/status-tag-component.git","type":"git"},"_npmVersion":"10.8.2","description":"A framework-agnostic Status Tag Web Component with i18n support","directories":{},"_nodeVersion":"20.19.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","terser":"^5.44.0","typescript":"^5.3.0","@types/node":"^20.10.0","sass-embedded":"^1.93.3"},"_npmOperationalInternal":{"tmp":"tmp/status-tag-web-component_1.0.0_1762411551841_0.1824401535611846","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@blueking/status-tag-web-component","version":"1.0.1","keywords":["web-component","status-tag","i18n","framework-agnostic","typescript","shadow-dom","custom-elements"],"author":{"name":"Vincent Ko"},"license":"MIT","_id":"@blueking/status-tag-web-component@1.0.1","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"homepage":"https://github.com/forrany/status-tag-component.git","bugs":{"url":"https://github.com/forrany/status-tag-component/issues"},"dist":{"shasum":"ed8c4eadcf1f3ca524d339777346b8278f04d84f","tarball":"https://registry.npmjs.org/@blueking/status-tag-web-component/-/status-tag-web-component-1.0.1.tgz","fileCount":7,"integrity":"sha512-s13Sp1HyL01EonGaCe/IQpfeGNYxDxdwNX+8fLp5U0tBvtBhQQUJ9MHkM7PYAWVUtLMdAf1bgqsoSkOo/b88Iw==","signatures":[{"sig":"MEYCIQCxJ7IerDtcQ2oBhGMbIFoaIUViTleCGCgj4GRvvqJb6QIhAOZGh2cpcoXt1BNnS+qTJh2JciEo1PjOqznUi70PgWJd","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37188},"main":"dist/status-tag.umd.js","types":"dist/index.d.ts","module":"dist/status-tag.mjs","engines":{"node":">=16.0.0"},"gitHead":"3a4a20e745064db66ebbbfabcb77209c3d45c8a6","scripts":{"dev":"vite","build":"tsc && vite build","clean":"rm -rf dist","preview":"vite preview"},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"repository":{"url":"git+https://github.com/forrany/status-tag-component.git","type":"git"},"_npmVersion":"10.8.2","description":"A framework-agnostic Status Tag Web Component with i18n support","directories":{},"_nodeVersion":"20.19.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","terser":"^5.44.0","typescript":"^5.3.0","@types/node":"^20.10.0","sass-embedded":"^1.93.3"},"_npmOperationalInternal":{"tmp":"tmp/status-tag-web-component_1.0.1_1762412085272_0.3470793225184907","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@blueking/status-tag-web-component","version":"1.0.2","keywords":["web-component","status-tag","i18n","framework-agnostic","typescript","shadow-dom","custom-elements"],"author":{"name":"Vincent Ko"},"license":"MIT","_id":"@blueking/status-tag-web-component@1.0.2","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"homepage":"https://github.com/forrany/status-tag-component.git","bugs":{"url":"https://github.com/forrany/status-tag-component/issues"},"dist":{"shasum":"8873cc13bff444d4bb7024000493259a7ea1adec","tarball":"https://registry.npmjs.org/@blueking/status-tag-web-component/-/status-tag-web-component-1.0.2.tgz","fileCount":7,"integrity":"sha512-+CWQAB4Os8E2negI+C2COLEY72xXoVBjw0oAWtaZZGtAa5yid16uTfcpByt2jeeUmBYe8jghojLdvQyfMSBKkA==","signatures":[{"sig":"MEUCIQCtrTLI77voUF2UvX+A8aZ0rAy62JL8f2rRcRpCsAjirQIgAhdLzOkNLjBe7YSwnKcHnH4h2sQYoNBDmzrI8wypu58=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37172},"main":"dist/status-tag.umd.js","types":"dist/index.d.ts","module":"dist/status-tag.mjs","engines":{"node":">=16.0.0"},"gitHead":"eada69535084a16f8329b2ca873a88fb003fc0a7","scripts":{"dev":"vite","build":"tsc && vite build","clean":"rm -rf dist","preview":"vite preview"},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"repository":{"url":"git+https://github.com/forrany/status-tag-component.git","type":"git"},"_npmVersion":"10.8.2","description":"A framework-agnostic Status Tag Web Component with i18n support","directories":{},"_nodeVersion":"20.19.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","terser":"^5.44.0","typescript":"^5.3.0","@types/node":"^20.10.0","sass-embedded":"^1.93.3"},"_npmOperationalInternal":{"tmp":"tmp/status-tag-web-component_1.0.2_1762412525089_0.8059703539449647","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-11-06T06:45:51.658Z","modified":"2026-01-15T04:04:04.958Z","1.0.0":"2025-11-06T06:45:52.036Z","1.0.1":"2025-11-06T06:54:45.443Z","1.0.2":"2025-11-06T07:02:05.296Z"},"bugs":{"url":"https://github.com/forrany/status-tag-component/issues"},"author":{"name":"Vincent Ko"},"license":"MIT","homepage":"https://github.com/forrany/status-tag-component.git","keywords":["web-component","status-tag","i18n","framework-agnostic","typescript","shadow-dom","custom-elements"],"repository":{"url":"git+https://github.com/forrany/status-tag-component.git","type":"git"},"description":"A framework-agnostic Status Tag Web Component with i18n support","maintainers":[{"email":"contactus_bk@tencent.com","name":"blueking-magicbox"}],"readme":"# Status Tag Web Component\n\n
\n\n![](https://pic-bed-1302552283.cos.ap-guangzhou.myqcloud.com/undefined20251106111525432.png?imageSlim)\n\n**一个无框架依赖的状态标签 Web Component，支持国际化，适用于任何前端项目**\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue.svg)](https://www.typescriptlang.org/)\n[![Web Component](https://img.shields.io/badge/Web%20Component-Native-green.svg)](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components)\n\n
\n\n---\n\n## ✨ 特性\n\n- ✅ **无框架依赖** - 原生 Web Component，可在任何项目中使用\n- ✅ **100% 还原设计** - 严格按照原始 SCSS 实现，包括 22px 高度、6px 圆点、12px SVG 图标等\n- ✅ **样式隔离** - 使用 Shadow DOM，避免样式冲突\n- ✅ **国际化支持** - 内置中英文，可扩展其他语言\n- ✅ **智能匹配** - 支持大小写不敏感的状态匹配\n- ✅ **自定义配置** - 支持自定义状态映射\n- ✅ **轻量级** - 压缩后约 12KB（gzip: 3.1KB）\n- ✅ **SVG 内联** - 无需外部图片依赖\n- ✅ **TypeScript** - 完整的类型支持\n\n## 🚀 快速开始\n\n### NPM 安装\n\n```bash\nnpm install @blueking/status-tag-web-component\n```\n\n### CDN 引入（开发测试）\n\n```html\n\n\n\n\n\n```\n\n> **注意**: 正式的 CDN 链接将在发布到 npm 后提供。可使用本地文件或私有部署的方式。\n\n### 基础使用\n\n```html\n\n\n\n \n Status Tag 示例\n\n\n
\n \n \n \n \n \n
\n\n \n\n\n```\n\n#### 国际化自动检测\n\n组件会自动检测语言设置，优先级如下：\n\n1. **手动设置 `locale` 属性**（最高优先级）\n ```html\n \n ```\n\n2. **Cookie `blueking_language`**（自动检测）\n - `blueking_language=en` → 英文显示\n - 其他值或未设置 → 中文显示（默认）\n ```html\n \n \n ```\n\n3. **默认值**：`zh-CN`（中文）\n\n这使得组件可以无缝集成到现有的国际化系统中。\n\n## 📚 详细文档\n\n### API 文档\n\n#### 属性\n\n| 属性名 | 类型 | 必填 | 默认值 | 说明 |\n|--------|------|------|--------|------|\n| `status` | string | ✅ | - | 状态值（如：'running', 'stop', 'warning' 等） |\n| `locale` | string | ❌ | 'zh-CN' | 语言设置，支持 'zh-CN' 和 'en-US' |\n| `status-map` | string (JSON) | ❌ | - | 自定义状态映射配置（JSON 字符串） |\n\n#### 支持的默认状态\n\n| 状态 | 中文文本 | 英文文本 | 主题 |\n|------|----------|----------|------|\n| `loading` | 加载中 | Loading | 蓝色 |\n| `running` | 运行中 | Running | 绿色 |\n| `stop` | 已停止 | Stopped | 灰色 |\n| `warning` | 警告 | Warning | 橙色 |\n| `unknown` | 未知 | Unknown | 黄橙色 |\n\n### 设计规范\n\n#### 视觉规格\n\n- **容器高度**: 22px\n- **内边距**: 0 8px\n- **圆角**: 13px\n- **字体**: 12px / 700 (bold)\n- **Loading 图标**: 12×12px SVG 背景图，带旋转动画\n- **Dot 图标**: 6×6px，带光晕效果（::before 伪元素，透明度 0.2）\n\n#### 配色方案\n\n| 状态 | 背景色 | 文字色 | 边框 | 图标 |\n|------|--------|--------|------|------|\n| loading | #EDF4FF | #699DF4 | 1px solid #CDDFFE | 12×12 SVG 图标 |\n| running | #EBFAEF | #299E56 | 1px solid #CBF0DA | #E5F6EA + 1px solid #3FC06D |\n| stop | #F5F7FA | #979BA5 | 1px solid #EAEBF0 | #F0F1F5 + 1px solid #C4C6CC |\n| warning | #FDF4E9 | #F59500 | 1px solid #FCE5C0 | #FCE5C0 + 1px solid #F59500 |\n| unknown | #fff3e8 | #ff9c01 | 无边框 | #ff9c01 |\n\n### 智能匹配\n\n组件会自动处理不同的大小写格式：\n\n```html\n\n\n\n\n\n\n\n```\n\n### 高级用法\n\n#### 1. 自定义状态映射\n\n您可以完全自定义状态文本和主题：\n\n```html\n\n\n\n\n\n```\n\n#### 2. 动态更新\n\n```javascript\n// 通过 JavaScript 动态更新\nconst tag = document.querySelector('status-tag');\n\n// 方式1: 使用属性\ntag.setAttribute('status', 'running');\n\n// 方式2: 使用属性访问器\ntag.status = 'running';\n\n// 动态切换语言\ntag.locale = 'en-US';\n\n// 动态更新状态映射\ntag.statusMap = {\n custom_status: { text: 'Custom Status', theme: 'warning' }\n};\n```\n\n#### 3. React 中使用\n\n```tsx\nimport { useEffect, useRef } from 'react';\n\n// 基础用法\nfunction StatusDisplay({ status, locale = 'zh-CN' }) {\n return React.createElement('status-tag', {\n 'attr-status': status,\n 'attr-locale': locale\n });\n}\n\n// 使用 ref 控制\nfunction ControlledStatus() {\n const ref = useRef(null);\n\n useEffect(() => {\n if (ref.current) {\n ref.current.setAttribute('status', 'running');\n ref.current.setAttribute('locale', 'zh-CN');\n }\n }, []);\n\n return React.createElement('status-tag', { ref });\n}\n\n// 在列表中使用\nfunction StatusList({ items }) {\n return (\n
\n {items.map(item => (\n
\n {item.name}\n \n
\n ))}\n
\n );\n}\n```\n\n#### 4. Vue 3 中使用\n\n```vue\n\n\n\n```\n\n#### 5. Vue 2 中使用\n\n```vue\n\n\n\n```\n\n#### 6. Angular 中使用\n\n```typescript\nimport { Component, Input } from '@angular/core';\n\n@Component({\n selector: 'app-status-demo',\n template: `\n
\n {{ title }}\n \n
\n `\n})\nexport class StatusDemoComponent {\n @Input() title = '状态显示';\n @Input() status = 'running';\n @Input() locale = 'zh-CN';\n\n // 动态更新状态\n changeStatus() {\n const statuses = ['loading', 'running', 'stop', 'warning'];\n const currentIndex = statuses.indexOf(this.status);\n this.status = statuses[(currentIndex + 1) % statuses.length];\n }\n}\n```\n\n```typescript\n// app.module.ts 中导入\nimport { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule],\n bootstrap: [AppComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA] // 允许使用自定义元素\n})\nexport class AppModule { }\n```\n\n#### 7. 在原生 JavaScript 中使用\n\n```javascript\n// 动态创建组件\nfunction createStatusTag(status, locale = 'zh-CN') {\n const tag = document.createElement('status-tag');\n tag.setAttribute('status', status);\n tag.setAttribute('locale', locale);\n return tag;\n}\n\n// 添加到页面\ndocument.body.appendChild(createStatusTag('running'));\n\n// 事件监听\ndocument.addEventListener('DOMContentLoaded', () => {\n const tags = document.querySelectorAll('status-tag');\n tags.forEach(tag => {\n console.log('Status:', tag.getAttribute('status'));\n });\n});\n\n// 响应状态变化\nconst observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === 'attributes' && mutation.attributeName === 'status') {\n console.log('Status changed to:', mutation.target.getAttribute('status'));\n }\n });\n});\n\nconst tag = document.querySelector('status-tag');\nobserver.observe(tag, { attributes: true });\n```\n\n## 🔧 开发指南\n\n### 环境要求\n\n- Node.js >= 16\n- npm >= 8\n\n### 安装依赖\n\n```bash\nnpm install\n```\n\n### 开发模式\n\n```bash\nnpm run dev\n```\n\n### 构建\n\n```bash\nnpm run build\n```\n\n### 清理\n\n```bash\nnpm run clean\n```\n\n### 项目结构\n\n```\nstatus-tag-component/\n├── src/\n│ ├── components/\n│ │ └── status-tag.ts # 组件核心逻辑（内联样式 + SVG）\n│ ├── locales/\n│ │ ├── zh-CN.json # 中文语言包\n│ │ └── en-US.json # 英文语言包\n│ ├── utils/\n│ │ └── i18n.ts # 国际化工具\n│ ├── types.ts # 类型定义\n│ └── index.ts # 入口文件\n├── examples/ # 示例文件\n│ ├── basic.html # 基础示例\n│ ├── final-test.html # 完整测试\n│ └── final-test-v2.html # 样式验证测试\n├── dist/ # 构建输出\n├── public/\n│ └── loading-color.svg # SVG 图标源文件\n├── package.json\n├── tsconfig.json\n├── vite.config.ts\n├── README.md\n├── MIGRATION.md # 从 Vue 迁移指南\n└── PROJECT_SUMMARY.md # 项目总结\n```\n\n## 🌐 浏览器兼容性\n\n| 浏览器 | 版本 |\n|--------|------|\n| Chrome | >= 54 |\n| Firefox | >= 63 |\n| Safari | >= 10.1 |\n| Edge | >= 79 |\n| iOS Safari | >= 10.3 |\n| Android Chrome | >= 54 |\n\n## ❓ 常见问题\n\n### Q: 样式没有生效怎么办？\n\nA: 确保在组件加载后再设置属性：\n\n```javascript\n// 错误方式\nconst tag = document.createElement('status-tag');\ntag.status = 'running'; // 可能在组件未初始化时就设置了\ndocument.body.appendChild(tag);\n\n// 正确方式\nconst tag = document.createElement('status-tag');\ndocument.body.appendChild(tag);\ntag.status = 'running'; // 在添加到 DOM 后设置\n```\n\n### Q: 如何在 React 中正确使用？\n\nA: 使用 `useEffect` 确保在组件挂载后设置属性：\n\n```tsx\nfunction StatusTag({ status }) {\n const ref = useRef(null);\n\n useEffect(() => {\n if (ref.current) {\n ref.current.setAttribute('status', status);\n }\n }, [status]);\n\n return ;\n}\n```\n\n### Q: 如何自定义样式？\n\nA: 由于使用 Shadow DOM，需要通过 `::part` 选择器或使用 `CSSStyleSheet`：\n\n```javascript\n// 方法1: 使用 ::part（如果组件支持）\nconst style = document.createElement('style');\nstyle.textContent = `\n status-tag::part(container) {\n /* 自定义样式 */\n }\n`;\n\n// 方法2: 修改组件内部样式（需要直接操作 shadowRoot）\nconst tag = document.querySelector('status-tag');\nconst shadowStyle = tag.shadowRoot.querySelector('style');\nshadowStyle.textContent += `\n .bkbase-status-tag {\n /* 添加自定义样式 */\n }\n`;\n```\n\n### Q: 如何添加新语言？\n\nA: 只需两步：\n\n1. 在 `src/locales/` 添加语言文件（如 `ja-JP.json`）\n2. 在 `src/utils/i18n.ts` 中注册\n\n```typescript\n// src/utils/i18n.ts\nimport jaJP from '../locales/ja-JP.json';\n\nconst resources = {\n 'zh-CN': zhCN,\n 'en-US': enUS,\n 'ja-JP': jaJP // 添加新语言\n};\n```\n\n### Q: 性能如何？\n\nA: 组件非常轻量：\n- **UMD 版本**: 8KB (gzip: 2.95KB)\n- **ES Module 版本**: 12KB (gzip: 3.27KB)\n- **首次渲染**: < 1ms\n- **属性更新**: < 0.5ms\n\n## 📝 许可证\n\nMIT License - 详见 [LICENSE](LICENSE) 文件\n\n## 🤝 贡献\n\n欢迎提交 Issue 和 Pull Request！\n\n### 贡献流程\n\n1. Fork 本项目到您的仓库\n2. 创建特性分支 (`git checkout -b feature/amazing-feature`)\n3. 提交更改 (`git commit -m 'Add some amazing feature'`)\n4. 推送到分支 (`git push origin feature/amazing-feature`)\n5. 创建 Pull Request\n\n## 📖 相关文档\n\n- [完整文档](./README.md)\n- [迁移指南](./MIGRATION.md) - 从 Vue 迁移指南\n- [项目总结](./PROJECT_SUMMARY.md) - 项目总结\n- [快速上手](./QUICKSTART.md) - 5 分钟上手指南\n- [使用指南](./USAGE.md) - 详细使用说明\n- [examples/final-test-v2.html](./examples/final-test-v2.html) - 完整测试页面\n\n## ⭐ 致谢\n\n感谢所有为这个项目做出贡献的开发者！\n\n---\n\n
\n\n**如果这个项目对您有帮助，请给我们一个 ⭐️！**\n\n[NPM 包](https://www.npmjs.com/package/@blueking/status-tag-web-component) · [GitHub 仓库](https://github.com/forrany/status-tag-component) · [提交 Issue](https://github.com/forrany/status-tag-component/issues)\n\n
\n","readmeFilename":"README.md"}