HB Theme Provider

支持多种 UI 库和 ECharts 的 React 和 Vue 通用主题提供器。

安装

npm install hb-theme-provider

特性

• 🎨 React 和 Vue 通用主题管理
• 📊 ECharts 主题集成
  • 内置了多个 ECharts 主题（'default'、'theme1'、'theme2'），在使用 echarts.init 时可通过第二个参数指定主题名称。例如：echarts.init(dom, 'default')。
• 🎯 Ant Design 主题支持
• 🎨 Material-UI 主题支持
• 🎨 Element-Ui 主题支持
• 🔄 实时主题切换

入口点

• hb-theme-provider - 仅 React 构建（无 Vue 依赖）
• hb-theme-provider/react - 仅 React 构建（无 Vue 依赖）
• hb-theme-provider/vue - 仅 Vue 构建（无 React 依赖）

React 用法

import React, { useRef, useEffect } from 'react';
import { ReactThemeProvider, useTheme } from 'hb-theme-provider/react';
import * as echarts from 'echarts';

function App() {
    return (
        <ReactThemeProvider
            id="your-theme-location-id" // /resources/theme/square/themeA
            extrenals={['antd', 'echarts', 'mui']}
        >
            <YourComponent />
        </ReactThemeProvider>
    );
}

function YourComponent() {
    const theme = useTheme();
    const ref = useRef();

    //echarts主题 使用示例 需要写主题名称 defualt | theme1 | theme2
    useEffect(() => {
        const chart = echarts.init(ref.current, 'defualt');
        const option = {
            ...
        }
        chart.setOption(option)
        ()=> chart.dispose()
    });

    return (
        <div>
            Current theme: {JSON.stringify(theme)}
            <div ref={ref} style={{ width: '100%', height: '300px' }}></div>
        </div>
    );
}

Vue 用法

// main.ts
import ThemeProvider from 'hb-theme-provider/vue';

app.component('ThemeProvider', ThemeProvider);

<!-- App.vue -->
<template>
    <ThemeProvider :id="themeId" :external="['element', 'echarts']">
        <YouVueComponent />
    </ThemeProvider>
</template>

<!-- YouVueComponent.vue -->
<template>
    <div :style="{ fontSize: theme.fontSizeHeading1 }">vue</div>
</template>

<script setup>
import { useTheme } from 'hb-theme-provider/vue';

const theme = useTheme();
</script>

依赖指南

核心依赖

该包本身具有以下对等依赖：

{
    "peerDependencies": {
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "vue": "^3.0.0"
    }
}

按框架分类的外部 UI 框架依赖

React 外部 UI 框架依赖

| 外部 UI 框架依赖 | 必需依赖 | 描述 | | ---------------- | ----------------------------- | -------------------- | | antd | antd, @ant-design/cssinjs | Ant Design 主题支持 | | echarts | echarts | ECharts 主题集成 | | mui | @emotion/styled | Material-UI 主题支持 |

Vue 外部 UI 框架依赖

| 外部 UI 框架依赖 | 必需依赖 | 描述 | | ---------------- | --------- | --------------------- | | element | 无 | Element Plus 主题支持 | | echarts | echarts | ECharts 主题集成 |

安装示例

React 配合 Ant Design 和 ECharts

npm install hb-theme-provider antd @ant-design/cssinjs echarts

React 配合 Material-UI 和 ECharts

npm install hb-theme-provider @mui/material @emotion/react @emotion/styled echarts

Vue 配合 Element Plus 和 ECharts

npm install hb-theme-provider element-plus echarts

配置选项

ThemeProvider 属性

| 属性 | 类型 | 默认值 | 描述 | | ----------- | ----------------------------------------------- | ------ | -------------------- | | id | string | - | 主题本地地址 ID | | extrenals | ('antd' \| 'echarts' \| 'mui' \| 'element')[] | [] | 外部 Ui 框架依赖列表 |

故障排除

TypeScript 配置

如果遇到模块解析问题，请更新您的 tsconfig.json：

{
    "compilerOptions": {
        "moduleResolution": "bundler"
        // 或者 "node16" 或 "nodenext"
    }
}

ECharts 全局注册

如果遇到 ECharts 模块解析问题，可以全局注册：

// 在主入口文件中
import * as echarts from 'echarts';
window.echarts = echarts;

常见问题

1. 模块未找到：确保使用正确的导入路径（/react 或 /vue）
2. 外部依赖不工作：验证是否已安装所有必需的依赖
3. TypeScript 错误：检查 tsconfig.json 中的 moduleResolution 设置
4. vue 项目下多层主题嵌套 弹窗样式问题：如有个主题嵌套问题，请使用 import { useThemeClassName } from 'hb-theme-provider/vue'; const themeClassName = useThemeClassName(); 在组件中手动添加 :popper-class="themeClassName" 或者:append-to-body ="flase"

MIT