{"_id":"@bm-fe/components-vue3","_rev":"3-fb747215e97688f6882eafbfb3e1f7d3","name":"@bm-fe/components-vue3","dist-tags":{"beta":"0.1.1-beta.0","latest":"0.1.1-beta.1"},"versions":{"0.1.1-beta.0":{"name":"@bm-fe/components-vue3","version":"0.1.1-beta.0","keywords":["vue3","element-plus","patch","design-tokens","bitmart"],"author":{"name":"BitMart FE Team"},"license":"ISC","_id":"@bm-fe/components-vue3@0.1.1-beta.0","maintainers":[{"name":"jack_dhl","email":"hihuilong@gmail.com"},{"name":"vincent.bian","email":"macisi528@gmail.com"}],"dist":{"shasum":"56fde3eb7a9af135c94378ea4cc49e4592797bf3","tarball":"https://registry.npmjs.org/@bm-fe/components-vue3/-/components-vue3-0.1.1-beta.0.tgz","fileCount":9,"integrity":"sha512-5vfaOuQKaqPjgZRM3jcqwL5IGLWqtx39k/smOtNoJArrRYgf+qAp9ejLBUWRTVfA9onlOkJeiGORZC2TcAEL/w==","signatures":[{"sig":"MEUCIQCtg/Xhb2XAPQ3kDH6RBdVA+QQLcA0OyCslTZYUrFXk/wIgNYynS0JBUYi237LXKfz3ozMnyX2AKeU4rw10+ypjmB0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11801},"main":"dist/index.umd.js","_from":"file:bm-fe-components-vue3-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-plus.css","./style.css":"./dist/patch/element-plus.css"},"scripts":{"dev":"vite","lint":"eslint src --ext .vue,.ts","test":"echo 'Tests not implemented'","build":"vite build && vue-tsc --emitDeclarationOnly && npm run copy:css","copy:css":"node -e \"require('fs').mkdirSync('dist/patch', {recursive: true}); require('fs').copyFileSync('src/patch/element-plus.css', 'dist/patch/element-plus.css')\"","type-check":"vue-tsc --noEmit"},"_npmUser":{"name":"vincent.bian","email":"macisi528@gmail.com"},"_resolved":"/private/var/folders/jm/hzbb9m313tb0xlyd494ps4vh0000gn/T/9d7d435ccb695e96fd4583862888a820/bm-fe-components-vue3-0.1.1-beta.0.tgz","_integrity":"sha512-5vfaOuQKaqPjgZRM3jcqwL5IGLWqtx39k/smOtNoJArrRYgf+qAp9ejLBUWRTVfA9onlOkJeiGORZC2TcAEL/w==","repository":{"url":"https://gitlab.bitmartpro.com/exchange/web-frontend/infra/design-tokens.git","type":"git","directory":"packages/components-vue3"},"_npmVersion":"10.8.2","description":"BitMart Vue 3 Element Plus 样式 Patch（基于 Design Tokens）","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@bm-fe/design-tokens":"1.0.1-beta.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.0"},"peerDependencies":{"vue":"^3.3.0","element-plus":"^2.4.0"},"_npmOperationalInternal":{"tmp":"tmp/components-vue3_0.1.1-beta.0_1767773037367_0.039064074789804115","host":"s3://npm-registry-packages-npm-production"}},"0.1.1-beta.1":{"name":"@bm-fe/components-vue3","version":"0.1.1-beta.1","keywords":["vue3","element-plus","patch","design-tokens","bitmart"],"author":{"name":"BitMart FE Team"},"license":"ISC","_id":"@bm-fe/components-vue3@0.1.1-beta.1","maintainers":[{"name":"jack_dhl","email":"hihuilong@gmail.com"},{"name":"vincent.bian","email":"macisi528@gmail.com"}],"dist":{"shasum":"3aac629fd6449c73a22481401cc699d6e2694d3c","tarball":"https://registry.npmjs.org/@bm-fe/components-vue3/-/components-vue3-0.1.1-beta.1.tgz","fileCount":12,"integrity":"sha512-8cqaMzc4msBVRA4UGeDQRe+AUGsFnVYQVrjdcV4QN6L6/eTjgPVGCUyN5LVj0GOQcZZbpOrCyDf70YplHhiN+Q==","signatures":[{"sig":"MEYCIQD/fw+ZmagpzqkBZFLON8CJfn10NDKkPdZmDANcvqr5ngIhAMO65zuZIFWNjf7S8nS/zIFgx/Ku5IgqTX87ogrfOXWI","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35871},"main":"dist/index.umd.js","_from":"file:bm-fe-components-vue3-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-plus.css","./style.css":"./dist/patch/element-plus.css","./patch/vars":"./dist/patch/element-plus-vars.css","./style-vars.css":"./dist/patch/element-plus-vars.css"},"scripts":{"dev":"vite","lint":"eslint src --ext .vue,.ts","test":"echo 'Tests not implemented'","build":"npm run generate:vars && vite build && vue-tsc --emitDeclarationOnly && npx tsx scripts/build-theme.ts","type-check":"vue-tsc --noEmit","generate:vars":"npx tsx scripts/generate-vars.ts"},"_npmUser":{"name":"vincent.bian","email":"macisi528@gmail.com"},"_resolved":"/private/var/folders/jm/hzbb9m313tb0xlyd494ps4vh0000gn/T/d48be0518b4b6f6a7943dc596691ca09/bm-fe-components-vue3-0.1.1-beta.1.tgz","_integrity":"sha512-8cqaMzc4msBVRA4UGeDQRe+AUGsFnVYQVrjdcV4QN6L6/eTjgPVGCUyN5LVj0GOQcZZbpOrCyDf70YplHhiN+Q==","repository":{"url":"https://gitlab.bitmartpro.com/exchange/web-frontend/infra/design-tokens.git","type":"git","directory":"packages/components-vue3"},"_npmVersion":"10.8.2","description":"BitMart Vue 3 Element Plus 样式 Patch（基于 Design Tokens）","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@bm-fe/design-tokens":"1.0.1-beta.3"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.7.0","vue":"^3.3.0","lodash":"^4.17.21","postcss":"^8.5.6","postcss-discard-duplicates":"^7.0.2"},"peerDependencies":{"vue":"^3.3.0","element-plus":"^2.4.0"},"_npmOperationalInternal":{"tmp":"tmp/components-vue3_0.1.1-beta.1_1773825368567_0.6209561747862211","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-01-07T08:03:57.279Z","modified":"2026-04-08T01:49:18.735Z","0.1.1-beta.0":"2026-01-07T08:03:57.517Z","0.1.1-beta.1":"2026-03-18T09:16:08.704Z"},"author":{"name":"BitMart FE Team"},"license":"ISC","keywords":["vue3","element-plus","patch","design-tokens","bitmart"],"repository":{"url":"https://gitlab.bitmartpro.com/exchange/web-frontend/infra/design-tokens.git","type":"git","directory":"packages/components-vue3"},"description":"BitMart Vue 3 Element Plus 样式 Patch（基于 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-vue3\n\nBitMart Vue 3 Element Plus 自定义主题，基于 Design Tokens 生成，支持亮色/深色模式切换。\n\nElement Plus 原生支持 CSS 变量，通过定义变量即可实现样式定制，无需大量 patch CSS。\n\n## 安装\n\n```bash\nnpm install @bm-fe/components-vue3 @bm-fe/design-tokens element-plus\n```\n\n## 使用方式\n\n### 方式一：仅亮色主题\n\n适用于不需要深色模式切换的项目。\n\n```typescript\nimport { createApp } from 'vue';\nimport ElementPlus from 'element-plus';\nimport '@bm-fe/design-tokens/dist/css/fonts.css'; // 字体文件（可选）\nimport '@bm-fe/design-tokens/dist/css/variables.css'; // 基础 CSS 变量\nimport 'element-plus/dist/index.css'; // Element Plus 基础样式\nimport '@bm-fe/components-vue3/patch'; // Element Plus 主题补丁\n\nconst app = createApp(App);\napp.use(ElementPlus);\n```\n\n### 方式二：支持深色模式切换（推荐）\n\n适用于需要运行时主题切换的项目。\n\n```typescript\nimport { createApp } from 'vue';\nimport ElementPlus from 'element-plus';\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-plus/dist/index.css'; // Element Plus 基础样式\nimport '@bm-fe/components-vue3/patch'; // Element Plus 基础主题补丁\nimport '@bm-fe/components-vue3/patch/vars'; // Element Plus CSS 变量覆盖层（支持深色模式）\n\nconst app = createApp(App);\napp.use(ElementPlus);\n```\n\n### 主题切换\n\n引入 CSS 变量覆盖层后，可以通过设置 `data-theme` 属性来切换主题：\n\n```typescript\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| 文件路径 | 说明 | 必需性 |\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-vue3/patch` | Element Plus 基础主题补丁 | ✅ 必需 |\n| `@bm-fe/components-vue3/patch/vars` | Element Plus CSS 变量覆盖层 | ⚠️ 深色模式必需 |\n\n## 导出路径\n\n本包提供以下导出路径：\n\n```typescript\n// 基础主题补丁（仅亮色）\nimport '@bm-fe/components-vue3/patch';\n// 或\nimport '@bm-fe/components-vue3/style.css';\n\n// CSS 变量覆盖层（支持深色模式）\nimport '@bm-fe/components-vue3/patch/vars';\n// 或\nimport '@bm-fe/components-vue3/style-vars.css';\n```\n\n## 特性\n\n- ✅ 基于 Design Tokens，确保设计一致性\n- ✅ 支持运行时主题切换（亮色/深色）\n- ✅ 自动生成 Element Plus CSS 变量映射\n- ✅ Element Plus 原生支持 CSS 变量，无需大量 patch\n- ✅ 覆盖 Element Plus 组件样式，适配 BitMart 设计规范\n- ✅ 支持所有 Element Plus 组件（Button、Input、Table、Dialog 等）\n\n## 构建\n\n本包的主题文件通过构建脚本自动生成：\n\n```bash\n# 生成 CSS 变量覆盖层\nnpm run generate:vars\n\n# 构建完整主题\nnpm run build\n```\n\n## 维护说明\n\n### `patch.css` 文件\n\n`src/theme/patch.css` 是手动维护的文件，包含：\n- 无法通过 CSS 变量实现的样式覆盖（如 clip-path、特殊尺寸等）\n- Element Plus 原生支持 CSS 变量，大部分样式通过变量定义即可实现\n\n**何时更新**：\n- 需要添加无法通过变量实现的特殊样式覆盖\n- 需要调整现有组件的特殊样式细节\n\n**注意事项**：\n- 优先使用 CSS 变量，其次才使用 patch\n- 修改后需要重新构建：`npm run build`\n\n### `element-plus-vars.css` 文件\n\n`dist/patch/element-plus-vars.css` 由 `scripts/generate-vars.ts` 自动生成，包含：\n- Element Plus CSS 变量定义（`:root` 和 `[data-theme=\"dark\"]`）\n- 基于 Design Tokens 主题数据生成\n- 完整的色阶（light-3, light-5, light-7, light-8, light-9, dark-2）\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```bash\n# 安装依赖\npnpm install\n\n# 生成 CSS 变量覆盖层\npnpm run generate:vars\n\n# 构建主题\npnpm run build\n```\n\n## 相关链接\n\n- [Design Tokens 文档](../../design-tokens/README.md)\n- [Element Plus 文档](https://element-plus.org/)\n","readmeFilename":"README.md"}