A collection of reusable UI components for React applications within the mathwiz ecosystem.
npm install @mathwiz/ui-components一个基于 React + TypeScript + Vite + Storybook 构建的小学数学益智教育网站 UI 组件库。专注于开发高质量、可复用的 UI 组件，支持小学数学教育平台的快速开发。
- 包名: @mathwiz/ui-components
- 版本: 0.1.8
- 描述: A collection of reusable UI components for React applications within the mathwiz ecosystem.
- GitHub: https://github.com/moleusher/mathwiz-UI
- Storybook: 本地开发地址
bash
npm install
`$3
bash
启动开发服务器
npm run dev # 端口 5173启动 Storybook
npm run storybook # 端口 6006运行测试
npm test # 运行所有测试
npm run test:watch # 监听模式运行测试
npm run test:coverage # 生成测试覆盖率报告构建项目
npm run build # 构建生产版本
npm run build-storybook # 构建 Storybook
`$3
bash
检查端口占用
netstat -ano | findstr :6007
netstat -ano | findstr :6006强制结束进程
taskkill //F //PID
`📚 导出的组件
$3
- Button - 按钮组件
- ContentAccordion - 内容折叠面板
- Sidebar - 侧边栏组件
- MathWizHeader - 网站头部组件
- Submenu - 下拉菜单组件
- UserProfile - 用户资料组件$3
- RadarChart - 雷达图组件
- AbilityAssessmentDashboard - 能力评估仪表板
- AbilityProgressBar - 能力进度条
- PersonalizedAdvicePanel - 个性化建议面板
- RecommendationCard - 推荐卡片$3
- GradeUnitBrowserPage - 年级单元浏览页面
- GradeUnitBrowserProvider - 年级单元浏览上下文$3
- MathSessionPage - 完整的数学练习页面
- MathSessionContainer - 数学练习业务容器
- MathCard - 题目展示组件
- MathGraph - 几何图形组件
- useSessionStore - 数学练习状态管理
- useSessionCalculations - 会话计算 Hook
- useGeometryManagement - 几何图形管理 Hook
- useSessionEventHandlers - 事件处理 Hook$3
- 数据类型 - 完整的 TypeScript 类型定义
- 工具函数 - 几何计算等工具函数
- 数据配置 - 课程数据、用户进度等🎨 样式参数化配置
$3
#### 变体 (variant)
-
- 主色渐变
- secondary - 副色渐变
- gradient - 自定义渐变
- solid - 纯色背景
- bordered - 边框样式#### 颜色主题 (color)
-
default - 默认主题
- primary - 主色主题
- success - 成功色主题
- warning - 警告色主题
- danger - 危险色主题#### Logo 尺寸 (logoSize)
-
sm - 小号
- md - 中号 (默认)
- lg - 大号
- xl - 超大号#### 探索按钮变体 (exploreButtonVariant)
-
solid - 实心按钮
- bordered - 边框按钮
- light - 轻量按钮
- flat - 扁平按钮
- faded - 淡化按钮
- shadow - 阴影按钮$3
`typescript
import { MathWizHeader } from '@mathwiz/ui-components';// 基本使用
color="success"
logoText="MathWiz"
/>
// 自定义渐变
gradientFrom="#8b5cf6"
gradientTo="#06b6d4"
gradientVia="#3b82f6"
height={80}
exploreButtonVariant="shadow"
exploreButtonColor="primary"
/>
// 纯色主题
background="#f4f4f5"
logoColor="#18181b"
exploreButtonVariant="bordered"
exploreButtonColor="primary"
/>
`🚀 在实际项目中使用
$3
bash
安装组件库
npm install @mathwiz/ui-components安装必需的第三方依赖
npm install @heroui/react@^2.8.4
npm install lucide-react@^0.541.0
npm install zustand@^5.0.8
`$3
#### HeroUI 依赖
- 版本:
- 作用: 提供基础 UI 组件和样式系统
- 必需: 所有组件都依赖 HeroUI 的样式和主题系统#### 其他依赖
-
- 图标库
- zustand@^5.0.8 - 状态管理$3
必须在项目根组件中使用
包装，因为组件库的所有组件都依赖 HeroUI 的样式系统：`typescript
import React from 'react';
import { HeroUIProvider } from '@heroui/react';
import { MathWizHeader, GradeUnitBrowserPage, GradeUnitBrowserProvider } from '@mathwiz/ui-components';function App() {
return (
{/ 使用组件库组件 /}
variant="gradient"
exploreItems={[
{ id: 'grade-1', label: '一年级', status: 'new' },
{ id: 'grade-2', label: '二年级', status: '10%' }
]}
userData={{
id: 'user-123',
name: '学生用户',
avatar: '/avatars/student.png',
level: 5,
badges: ['math-beginner']
}}
/>
userId="student-123"
onLearnAction={(item) => console.log('学习:', item)}
/>
export default App;
`
#### 1. 基础页面布局
`typescript
import React from 'react';
import { HeroUIProvider } from '@heroui/react';
import {
MathWizHeader,
Sidebar,
GradeUnitBrowserPage,
GradeUnitBrowserProvider
} from '@mathwiz/ui-components';
function MathLearningApp() {
return (
variant="gradient"
userData={{
id: 'user-123',
name: '小明同学',
avatar: '/avatars/xiaoming.png',
level: 5,
badges: ['math-beginner', 'quick-learner']
}}
/>
userId="user-123"
onLearnAction={(item) => {
// 处理学习动作
console.log('开始学习:', item.title);
}}
/>
);
}
`
#### 2. 雷达能力评估页面
`typescript
import React from 'react';
import { HeroUIProvider } from '@heroui/react';
import {
MathWizHeader,
AbilityAssessmentDashboard,
RadarChart,
PersonalizedAdvicePanel
} from '@mathwiz/ui-components';
function AbilityAssessmentPage() {
const abilityData = {
math: 85,
logic: 70,
geometry: 90,
algebra: 65,
statistics: 75
};
return (
background="#f8fafc"
logoColor="#1e293b"
exploreButtonVariant="bordered"
/>
weaknesses={['代数', '逻辑推理']}
recommendations={[
'建议加强代数基础练习',
'多做逻辑推理题目',
'保持几何学习的优势'
]}
/>
#### 3. 自定义主题配置
typescript
import React from 'react';
import { HeroUIProvider, createTheme } from '@heroui/react';
import { MathWizHeader } from '@mathwiz/ui-components';// 自定义主题
const customTheme = createTheme({
type: "light",
theme: {
colors: {
primary: '#8b5cf6',
secondary: '#06b6d4',
success: '#10b981',
warning: '#f59e0b',
danger: '#ef4444'
}
}
});
function CustomThemeApp() {
return (
color="primary"
logoText="MathWiz"
exploreButtonVariant="solid"
exploreButtonColor="primary"
/>
{/ 其他组件 /}
);
}
`$3
从版本 0.1.6 开始，组件库使用 CSS 自动注入技术，所有样式会自动注入到 JavaScript bundle 中：
#### 技术实现
- 使用
插件
- 运行时自动创建