AnCao/web/src/components/DemoButton.tsx
yanlongqi e722180c07 重构UI框架并实现响应式设计
- 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>
2025-11-04 13:03:59 +08:00

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