- UI框架:从 antd-mobile 迁移到 Ant Design,支持更好的跨平台体验 - 响应式设计:实现移动端、平板、PC端全方位适配 - 移动端:保留底部导航栏,优化触摸交互 - PC端:隐藏底部导航,采用居中布局 - 样式重构:所有组件样式迁移到 CSS Modules(.module.less) - 功能优化: - 练习题答题改进:始终返回正确答案便于用户学习 - 添加题目编号字段(question_id) - 修复判断题选项:由 A/B 改为 true/false - 组件优化: - TabBarLayout 重构,支持响应式显示/隐藏 - 所有页面组件采用 Ant Design 组件替换原 antd-mobile 组件 - 统一使用 @ant-design/icons 图标库 - 文档同步:更新 CLAUDE.md 中 UI 组件使用规范和响应式设计说明 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
35 lines
850 B
TypeScript
35 lines
850 B
TypeScript
import React from 'react'
|
|
import { Button, Space } from 'antd'
|
|
import styles from './DemoButton.module.less'
|
|
|
|
interface DemoButtonProps {
|
|
text?: string
|
|
onClick?: () => void
|
|
}
|
|
|
|
const DemoButton: React.FC<DemoButtonProps> = ({
|
|
text = '示例按钮',
|
|
onClick
|
|
}) => {
|
|
return (
|
|
<div className={styles.container}>
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|
<Button type="primary" block onClick={onClick}>
|
|
{text} - Primary
|
|
</Button>
|
|
<Button type="default" block onClick={onClick}>
|
|
{text} - Default
|
|
</Button>
|
|
<Button type="dashed" block onClick={onClick}>
|
|
{text} - Dashed
|
|
</Button>
|
|
<Button type="primary" danger block onClick={onClick}>
|
|
{text} - Danger
|
|
</Button>
|
|
</Space>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DemoButton
|