@ylzcc/general-ui - React 题目组件库

这是一个专门用于题目展示和交互的 React 组件库，包含多种题型组件如单选题、多选题、问答题等。

项目结构

my-packages/
├── packages/          # 组件库源码目录
│   ├── Button/        # Button 组件
│   │   ├── Button.tsx
│   │   ├── index.tsx
│   │   └── styles/
│   └── index.ts       # 组件库入口文件
├── example/           # 演示页面目录
│   ├── App.tsx
│   ├── App.css
│   └── main.tsx
├── lib/               # 打包输出目录
├── vite.config.ts     # Vite 配置
└── package.json

功能特性

• ✅ 使用 Vite 构建，支持快速开发和热更新
• ✅ TypeScript 支持，提供完整的类型定义
• ✅ 组件样式使用 Less 预处理器
• ✅ 支持 ES Module 和 UMD 两种模块格式
• ✅ 自动生成 TypeScript 声明文件
• ✅ 演示页面用于开发调试

开发命令

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173 查看演示页面

构建组件库

npm run build

构建结果输出到 lib/ 目录

代码检查

npm run lint

安装

npm install @ylzcc/general-ui
# 或
yarn add @ylzcc/general-ui

安装依赖

组件库依赖以下包，请确保在您的项目中安装：

npm install @wangeditor/editor @wangeditor/editor-for-react

组件使用

导入组件和样式

// 导入组件
import { QuestionRadio, QuestionMultiple, QuestionAnswer, QuestionCcm } from '@ylzcc/general-ui';
// 导入样式（重要！）
import '@ylzcc/general-ui/style.css';

// 或者单独导入组件
import { QuestionRadio } from '@ylzcc/general-ui';
import '@ylzcc/general-ui/style.css';

单选题组件

import { QuestionRadio, useRadioQuestion } from '@ylzcc/general-ui';
import '@ylzcc/general-ui/style.css';

function App() {
  const { questionData, handleAnswer } = useRadioQuestion({
    // 题目配置
  });

  return (
    <QuestionRadio
      data={questionData}
      onAnswer={handleAnswer}
    />
  );
}

多选题组件

import { QuestionMultiple, useMultipleQuestion } from '@ylzcc/general-ui';
import '@ylzcc/general-ui/style.css';

function App() {
  const { questionData, handleAnswer } = useMultipleQuestion({
    // 题目配置
  });

  return (
    <QuestionMultiple
      data={questionData}
      onAnswer={handleAnswer}
    />
  );
}

问答题组件

import { QuestionAnswer, useAnswerQuestion } from '@ylzcc/general-ui';
import '@ylzcc/general-ui/style.css';

function App() {
  const { questionData, handleAnswer } = useAnswerQuestion({
    // 题目配置
  });

  return (
    <QuestionAnswer
      data={questionData}
      onAnswer={handleAnswer}
    />
  );
}

重要提示

1. 必须导入CSS样式：使用组件时请确保导入 @ylzcc/general-ui/style.css
2. React版本要求：需要 React >= 18.2.0
3. 依赖安装：请安装 @wangeditor/editor 和 @wangeditor/editor-for-react

发布到 npm

1. 登录 npm 账号

npm login

2. 发布包

npm publish

技术栈

• 构建工具: Vite
• 框架: React 18+
• 语言: TypeScript
• 样式: Less
• 打包: Rollup (Vite 内置)
• 类型检查: TypeScript
• 代码规范: ESLint

参考资料

• Vite 官方文档
• 使用 Vite 从零开始构建 React 组件库