de8480a328
主要改动： 1. 组件拆分：将Question.tsx(605行)拆分为4个子组件(303行) - QuestionProgress: 进度条和统计显示 - QuestionCard: 题目卡片和答题界面 - AnswerResult: 答案结果展示 - CompletionSummary: 完成统计摘要 2. 新增功能： - 答题进度条：显示当前进度、正确数、错误数 - 进度保存：使用localStorage持久化答题进度 - 完成统计：答完所有题目后显示统计摘要和正确率 - 从第一题开始：改为顺序答题而非随机 3. UI优化： - 移除右上角统计按钮 - 移除底部随机题目、题目列表、筛选按钮 - 移除"开始xxx答题"提示消息 - 简化页面布局 4. 代码优化： - 提高代码可维护性和可测试性 - 单一职责原则，每个组件负责一个特定功能 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import React from 'react'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import { Card, List, Button, Typography, Descriptions } from 'antd'
|
||
import { LeftOutlined } from '@ant-design/icons'
|
||
import styles from './About.module.less'
|
||
|
||
const { Title } = Typography
|
||
|
||
const About: React.FC = () => {
|
||
const navigate = useNavigate()
|
||
|
||
return (
|
||
<div className={styles.container}>
|
||
<div className={styles.content}>
|
||
<div className={styles.header}>
|
||
<Button
|
||
type="text"
|
||
icon={<LeftOutlined />}
|
||
onClick={() => navigate(-1)}
|
||
style={{ color: 'white' }}
|
||
>
|
||
返回
|
||
</Button>
|
||
<Title level={3} style={{ color: 'white', margin: 0 }}>关于</Title>
|
||
<div style={{ width: 48 }} />
|
||
</div>
|
||
|
||
<Card title="项目信息" className={styles.card}>
|
||
<Descriptions column={1}>
|
||
<Descriptions.Item label="版本">1.0.0</Descriptions.Item>
|
||
<Descriptions.Item label="开发者">AnKao Team</Descriptions.Item>
|
||
<Descriptions.Item label="许可证">MIT</Descriptions.Item>
|
||
</Descriptions>
|
||
</Card>
|
||
|
||
<Card title="功能特性" className={styles.card}>
|
||
<List
|
||
dataSource={[
|
||
'✅ 响应式设计（支持移动端和PC端）',
|
||
'✅ TypeScript 类型安全',
|
||
'✅ Vite 快速构建',
|
||
'✅ Ant Design 组件库',
|
||
'✅ React Router 路由',
|
||
'✅ API 代理配置',
|
||
]}
|
||
renderItem={(item) => <List.Item>{item}</List.Item>}
|
||
/>
|
||
</Card>
|
||
|
||
<Button
|
||
type="primary"
|
||
size="large"
|
||
block
|
||
onClick={() => navigate('/')}
|
||
className={styles.homeButton}
|
||
>
|
||
返回首页
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default About
|