{"_id":"@bm-fe/components-vue2","_rev":"3-b406bec0c454336fdffb8b7c9829ffe8","name":"@bm-fe/components-vue2","dist-tags":{"beta":"0.1.1-beta.0","latest":"0.1.1-beta.1"},"versions":{"0.1.1-beta.0":{"name":"@bm-fe/components-vue2","version":"0.1.1-beta.0","keywords":["vue2","element-ui","patch","design-tokens","bitmart"],"author":{"name":"BitMart FE Team"},"license":"ISC","_id":"@bm-fe/components-vue2@0.1.1-beta.0","maintainers":[{"name":"jack_dhl","email":"hihuilong@gmail.com"},{"name":"vincent.bian","email":"macisi528@gmail.com"}],"dist":{"shasum":"8b363e791abd4ba1aa31f83fc75a691dbd977b08","tarball":"https://registry.npmjs.org/@bm-fe/components-vue2/-/components-vue2-0.1.1-beta.0.tgz","fileCount":13,"integrity":"sha512-YFHr6CF5k8q1buy5xLFbhdnOLEN0zrrXGtybNEko08yyjdBJ2iptcsTD9VwHWUbriXkbPFBGCLrqBfW5A+Mxtw==","signatures":[{"sig":"MEYCIQC9Iuw6YR5T5wVHRF5eziCLXlA30Y0fpO9g6ir9sAy6qAIhAJ11+coQZ3Xlda1shdgJ1CxCACMxHhI3qKJJpo2W4Rg0","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":732906},"main":"dist/index.umd.js","_from":"file:bm-fe-components-vue2-0.1.1-beta.0.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.umd.js"},"./patch":"./dist/patch/element-ui.css","./style.css":"./dist/patch/element-ui.css","./patch/vars":"./dist/patch/element-ui-vars.css","./style-vars.css":"./dist/patch/element-ui-vars.css"},"scripts":{"test":"echo 'Tests not implemented'","build":"npm run generate:vars &&npx tsx scripts/build-theme.ts","generate:vars":"npx tsx scripts/generate-vars.ts"},"_npmUser":{"name":"vincent.bian","email":"macisi528@gmail.com"},"_resolved":"/private/var/folders/jm/hzbb9m313tb0xlyd494ps4vh0000gn/T/f316b720317d4545ce57e0031fb1d78d/bm-fe-components-vue2-0.1.1-beta.0.tgz","_integrity":"sha512-YFHr6CF5k8q1buy5xLFbhdnOLEN0zrrXGtybNEko08yyjdBJ2iptcsTD9VwHWUbriXkbPFBGCLrqBfW5A+Mxtw==","repository":{"url":"https://gitlab.bitmartpro.com/exchange/web-frontend/infra/design-tokens.git","type":"git","directory":"packages/components-vue2"},"_npmVersion":"10.8.2","description":"BitMart Vue 2 Element UI 自定义主题（基于 Design Tokens）","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@bm-fe/design-tokens":"1.0.1-beta.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.0","postcss":"^8.5.6","element-ui":"^2.15.14","postcss-merge-rules":"^7.0.7","@vue/composition-api":"^1.7.2","vue-template-compiler":"^2.7.14","postcss-discard-duplicates":"^7.0.2"},"peerDependencies":{"vue":"^2.7.0","element-ui":"^2.15.0"},"_npmOperationalInternal":{"tmp":"tmp/components-vue2_0.1.1-beta.0_1767773038051_0.29361041844897895","host":"s3://npm-registry-packages-npm-production"}},"0.1.1-beta.1":{"name":"@bm-fe/components-vue2","version":"0.1.1-beta.1","keywords":["vue2","element-ui","patch","design-tokens","bitmart"],"author":{"name":"BitMart FE Team"},"license":"ISC","_id":"@bm-fe/components-vue2@0.1.1-beta.1","maintainers":[{"name":"jack_dhl","email":"hihuilong@gmail.com"},{"name":"vincent.bian","email":"macisi528@gmail.com"}],"dist":{"shasum":"9472c39f2a99699df06487193e2884efa1fdb89f","tarball":"https://registry.npmjs.org/@bm-fe/components-vue2/-/components-vue2-0.1.1-beta.1.tgz","fileCount":13,"integrity":"sha512-2R1M+flNLq6bNhyCim3QBZEz1TbIv4cSnG2zZCUTjej6vL5KvCt3paTUZI/nzM8T12XqIgJXlosvAG6Urdw5vw==","signatures":[{"sig":"MEUCIBdpvtD6hu6k3YHtx3MhsBOE56BgtxX96GhKFhYJkbYtAiEAuxsqoCtppgBkHWChctIRCci64NBhdu+gQzhh8Bikx8g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":735588},"main":"dist/index.umd.js","_from":"file:bm-fe-components-vue2-0.1.1-beta.1.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.umd.js"},"./patch":"./dist/patch/element-ui.css","./style.css":"./dist/patch/element-ui.css","./patch/vars":"./dist/patch/element-ui-vars.css","./style-vars.css":"./dist/patch/element-ui-vars.css"},"scripts":{"test":"echo 'Tests not implemented'","build":"npm run generate:vars &&npx tsx scripts/build-theme.ts","generate:vars":"npx tsx scripts/generate-vars.ts"},"_npmUser":{"name":"vincent.bian","email":"macisi528@gmail.com"},"_resolved":"/private/var/folders/jm/hzbb9m313tb0xlyd494ps4vh0000gn/T/fd5893c6b142313f727a1e37bcc28352/bm-fe-components-vue2-0.1.1-beta.1.tgz","_integrity":"sha512-2R1M+flNLq6bNhyCim3QBZEz1TbIv4cSnG2zZCUTjej6vL5KvCt3paTUZI/nzM8T12XqIgJXlosvAG6Urdw5vw==","repository":{"url":"https://gitlab.bitmartpro.com/exchange/web-frontend/infra/design-tokens.git","type":"git","directory":"packages/components-vue2"},"_npmVersion":"10.8.2","description":"BitMart Vue 2 Element UI 自定义主题（基于 Design Tokens）","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@bm-fe/design-tokens":"1.0.1-beta.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.0","postcss":"^8.5.6","element-ui":"^2.15.14","postcss-merge-rules":"^7.0.7","@vue/composition-api":"^1.7.2","vue-template-compiler":"^2.7.14","postcss-discard-duplicates":"^7.0.2"},"peerDependencies":{"vue":"^2.7.0","element-ui":"^2.15.0"},"_npmOperationalInternal":{"tmp":"tmp/components-vue2_0.1.1-beta.1_1773825368782_0.8123235447142754","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-01-07T08:03:57.949Z","modified":"2026-04-08T01:49:19.637Z","0.1.1-beta.0":"2026-01-07T08:03:58.224Z","0.1.1-beta.1":"2026-03-18T09:16:08.917Z"},"author":{"name":"BitMart FE Team"},"license":"ISC","keywords":["vue2","element-ui","patch","design-tokens","bitmart"],"repository":{"url":"https://gitlab.bitmartpro.com/exchange/web-frontend/infra/design-tokens.git","type":"git","directory":"packages/components-vue2"},"description":"BitMart Vue 2 Element UI 自定义主题（基于 Design Tokens）","maintainers":[{"email":"zanell@ponyft.com","name":"zanell"},{"email":"hihuilong@gmail.com","name":"jack_dhl"},{"email":"macisi528@gmail.com","name":"vincent.bian"}],"readme":"# @bm-fe/components-vue2\n\nBitMart Vue 2 Element UI 自定义主题，基于 Design Tokens 生成，支持亮色/深色模式切换。\n\n## 安装\n\nnpm install @bm-fe/components-vue2 @bm-fe/design-tokens element-ui## 使用方式\n\n### 方式一：仅亮色主题\n\n适用于不需要深色模式切换的项目。\ncript\nimport Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport '@bm-fe/design-tokens/dist/css/fonts.css'; // 字体文件（可选）\nimport '@bm-fe/design-tokens/dist/css/variables.css'; // 基础 CSS 变量\nimport 'element-ui/lib/theme-chalk/index.css'; // Element UI 基础样式\nimport '@bm-fe/components-vue2/patch'; // Element UI 主题补丁\n\nVue.use(ElementUI);### 方式二：支持深色模式切换（推荐）\n\n适用于需要运行时主题切换的项目。\nvascript\nimport Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport '@bm-fe/design-tokens/dist/css/fonts.css'; // 字体文件（可选）\nimport '@bm-fe/design-tokens/dist/themes/light/variables.css'; // 亮色主题变量\nimport '@bm-fe/design-tokens/dist/themes/dark/variables.css'; // 深色主题变量\nimport 'element-ui/lib/theme-chalk/index.css'; // Element UI 基础样式\nimport '@bm-fe/components-vue2/patch'; // Element UI 基础主题补丁\nimport '@bm-fe/components-vue2/patch/vars'; // Element UI CSS 变量覆盖层（支持深色模式）\n\nVue.use(ElementUI);### 主题切换\n\n引入 CSS 变量覆盖层后，可以通过设置 `data-theme` 属性来切换主题：\n\n// 切换到深色模式\ndocument.documentElement.setAttribute('data-theme', 'dark');\n\n// 切换到亮色模式\ndocument.documentElement.setAttribute('data-theme', 'light');\n\n// 移除主题属性，使用默认（亮色）\ndocument.documentElement.removeAttribute('data-theme');\n## 文件说明\n\n| 文件路径 | 说明 | 必需性 |\n|---------|------|--------|\n| `@bm-fe/design-tokens/dist/css/variables.css` | 基础 CSS 变量（Primitive + Semantic） | ✅ 必需 |\n| `@bm-fe/design-tokens/dist/themes/light/variables.css` | 亮色主题变量 | ✅ 深色模式必需 |\n| `@bm-fe/design-tokens/dist/themes/dark/variables.css` | 深色主题变量 | ✅ 深色模式必需 |\n| `@bm-fe/components-vue2/patch` | Element UI 基础主题补丁 | ✅ 必需 |\n| `@bm-fe/components-vue2/patch/vars` | Element UI CSS 变量覆盖层 | ⚠️ 深色模式必需 |\n\n## 导出路径\n\n本包提供以下导出路径：\n\n// 基础主题补丁（仅亮色）\nimport '@bm-fe/components-vue2/patch';\n// 或\nimport '@bm-fe/components-vue2/style.css';\n\n// CSS 变量覆盖层（支持深色模式）\nimport '@bm-fe/components-vue2/patch/vars';\n// 或\nimport '@bm-fe/components-vue2/style-vars.css';## 特性\n\n- ✅ 基于 Design Tokens，确保设计一致性\n- ✅ 支持运行时主题切换（亮色/深色）\n- ✅ 自动生成 Element UI CSS 变量映射\n- ✅ 覆盖 Element UI 组件样式，适配 BitMart 设计规范\n- ✅ 支持所有 Element UI 组件（Button、Input、Table、Dialog 等）\n\n## 构建\n\n本包的主题文件通过构建脚本自动生成：\n\n# 生成 CSS 变量覆盖层\nnpm run generate:vars\n\n# 构建完整主题\nnpm run build## 维护说明\n\n### `patch.css` 文件\n\n`src/theme/patch.css` 是手动维护的文件，包含：\n- Element UI 组件的额外样式覆盖\n- 使用 Design Tokens CSS 变量的样式规则\n\n**何时更新**：\n- 需要添加新的 Element UI 组件样式覆盖\n- 需要调整现有组件的样式细节\n- 需要使用新的 Design Tokens 变量\n\n**注意事项**：\n- 只使用 Design Tokens 定义的 CSS 变量，不要硬编码颜色值\n- 修改后需要重新构建：`npm run build`\n\n### `element-ui-vars.css` 文件\n\n`dist/patch/element-ui-vars.css` 由 `scripts/generate-vars.ts` 自动生成，包含：\n- Element UI CSS 变量定义（`:root` 和 `[data-theme=\"dark\"]`）\n- 基于 Design Tokens 主题数据生成\n\n**何时更新**：\n- 修改 `tokens/themes/light.json` 或 `tokens/themes/dark.json` 后\n- 运行 `npm run generate:vars` 重新生成\n\n**注意事项**：\n- ⚠️ 此文件由脚本自动生成，请勿手动修改\n- 修改 Design Tokens 后需要先构建 `@bm-fe/design-tokens`，再运行生成脚本\n\n## 开发\n\n# 安装依赖\npnpm install\n\n# 生成 CSS 变量覆盖层\npnpm run generate:vars\n\n# 构建主题\npnpm run build## 相关链接\n\n- [Design Tokens 文档](../../design-tokens/README.md)\n- [Element UI 文档](https://element.eleme.cn/)\n","readmeFilename":"README.md"}