@bm-fe/components-vue2

BitMart Vue 2 Element UI 自定义主题，基于 Design Tokens 生成，支持亮色/深色模式切换。

安装

npm install @bm-fe/components-vue2 @bm-fe/design-tokens element-ui## 使用方式

方式一：仅亮色主题

适用于不需要深色模式切换的项目。 cript import Vue from 'vue'; import ElementUI from 'element-ui'; import '@bm-fe/design-tokens/dist/css/fonts.css'; // 字体文件（可选） import '@bm-fe/design-tokens/dist/css/variables.css'; // 基础 CSS 变量 import 'element-ui/lib/theme-chalk/index.css'; // Element UI 基础样式 import '@bm-fe/components-vue2/patch'; // Element UI 主题补丁

Vue.use(ElementUI);### 方式二：支持深色模式切换（推荐）

适用于需要运行时主题切换的项目。 vascript import Vue from 'vue'; import ElementUI from 'element-ui'; import '@bm-fe/design-tokens/dist/css/fonts.css'; // 字体文件（可选） import '@bm-fe/design-tokens/dist/themes/light/variables.css'; // 亮色主题变量 import '@bm-fe/design-tokens/dist/themes/dark/variables.css'; // 深色主题变量 import 'element-ui/lib/theme-chalk/index.css'; // Element UI 基础样式 import '@bm-fe/components-vue2/patch'; // Element UI 基础主题补丁 import '@bm-fe/components-vue2/patch/vars'; // Element UI CSS 变量覆盖层（支持深色模式）

Vue.use(ElementUI);### 主题切换

引入 CSS 变量覆盖层后，可以通过设置 data-theme 属性来切换主题：

// 切换到深色模式 document.documentElement.setAttribute('data-theme', 'dark');

// 切换到亮色模式 document.documentElement.setAttribute('data-theme', 'light');

// 移除主题属性，使用默认（亮色） document.documentElement.removeAttribute('data-theme');

文件说明

| 文件路径 | 说明 | 必需性 | |---------|------|--------| | @bm-fe/design-tokens/dist/css/variables.css | 基础 CSS 变量（Primitive + Semantic） | ✅ 必需 | | @bm-fe/design-tokens/dist/themes/light/variables.css | 亮色主题变量 | ✅ 深色模式必需 | | @bm-fe/design-tokens/dist/themes/dark/variables.css | 深色主题变量 | ✅ 深色模式必需 | | @bm-fe/components-vue2/patch | Element UI 基础主题补丁 | ✅ 必需 | | @bm-fe/components-vue2/patch/vars | Element UI CSS 变量覆盖层 | ⚠️ 深色模式必需 |

导出路径

本包提供以下导出路径：

// 基础主题补丁（仅亮色） import '@bm-fe/components-vue2/patch'; // 或 import '@bm-fe/components-vue2/style.css';

// CSS 变量覆盖层（支持深色模式） import '@bm-fe/components-vue2/patch/vars'; // 或 import '@bm-fe/components-vue2/style-vars.css';## 特性

• ✅ 基于 Design Tokens，确保设计一致性
• ✅ 支持运行时主题切换（亮色/深色）
• ✅ 自动生成 Element UI CSS 变量映射
• ✅ 覆盖 Element UI 组件样式，适配 BitMart 设计规范
• ✅ 支持所有 Element UI 组件（Button、Input、Table、Dialog 等）

构建

本包的主题文件通过构建脚本自动生成：

生成 CSS 变量覆盖层

npm run generate:vars

构建完整主题

npm run build## 维护说明

patch.css 文件

src/theme/patch.css 是手动维护的文件，包含：

• Element UI 组件的额外样式覆盖
• 使用 Design Tokens CSS 变量的样式规则

何时更新：

• 需要添加新的 Element UI 组件样式覆盖
• 需要调整现有组件的样式细节
• 需要使用新的 Design Tokens 变量

注意事项：

• 只使用 Design Tokens 定义的 CSS 变量，不要硬编码颜色值
• 修改后需要重新构建：npm run build

element-ui-vars.css 文件

dist/patch/element-ui-vars.css 由 scripts/generate-vars.ts 自动生成，包含：

• Element UI CSS 变量定义（:root 和 [data-theme="dark"]）
• 基于 Design Tokens 主题数据生成

何时更新：

• 修改 tokens/themes/light.json 或 tokens/themes/dark.json 后
• 运行 npm run generate:vars 重新生成

注意事项：

• ⚠️ 此文件由脚本自动生成，请勿手动修改
• 修改 Design Tokens 后需要先构建 @bm-fe/design-tokens，再运行生成脚本

开发

安装依赖

pnpm install

生成 CSS 变量覆盖层

pnpm run generate:vars

构建主题

pnpm run build## 相关链接

• Design Tokens 文档
• Element UI 文档