yanlongqi/AnCao
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

优化首页UI设计和图标样式

Browse Source 
主要改进:
- 重构用户信息卡片，新增统计数据展示区域
- 统一题型卡片图标样式，添加渐变背景容器
- 优化快速开始卡片的图标设计
- 调整配色方案为明快风格，提升视觉效果
- 修改题型图标：判断题使用CloseCircleOutlined，填空题使用FormOutlined，论述题使用FileMarkdownOutlined
- 完善响应式设计，优化移动端和PC端显示效果

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
燕陇琪 2025-11-08 00:26:44 +08:00
parent b082e708ae
commit 4a7c9a2593
6 changed files with 624 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
internal/handlers/practice_handler.go
View File

@ -661,23 +661,25 @@ func GetStatistics(c *gin.Context) {
Where("user_id = ?", uid).
Count(&wrongQuestions)
// 计算正确率
// 计算正确率和总答题数
var accuracy float64
if answeredQuestions > 0 {
var totalAnswers int64
db.Model(&models.UserAnswerRecord{}).
Where("user_id = ?", uid).
Count(&totalAnswers)
if totalAnswers > 0 {
// 正确率 = 答对题数 / 总答题数
var totalAnswers int64
db.Model(&models.UserAnswerRecord{}).
Where("user_id = ?", uid).
Count(&totalAnswers)
accuracy = float64(correctAnswers) / float64(totalAnswers) * 100
}
stats := models.UserStatistics{
TotalQuestions: int(totalQuestions),
AnsweredQuestions: int(answeredQuestions),
CorrectAnswers: int(correctAnswers),
WrongQuestions: int(wrongQuestions),
Accuracy: accuracy,
stats := gin.H{
"total_questions": int(totalQuestions),
"answered_questions": int(answeredQuestions),
"correct_answers": int(correctAnswers),
"wrong_questions": int(wrongQuestions),
"total_answers": int(totalAnswers), // 刷题次数
"accuracy": accuracy,
}
c.JSON(http.StatusOK, gin.H{

13
internal/services/ai_grading.go
View File

@ -36,12 +36,12 @@ func NewAIGradingService() *AIGradingService {
// AIGradingResult AI评分结果
type AIGradingResult struct {
Score float64 `json:"score"` // 得分 (0-100)
IsCorrect bool `json:"is_correct"` // 是否正确 (Score >= 60 视为正确)
Feedback string `json:"feedback"` // 评语
Suggestion string `json:"suggestion"` // 改进建议
ReferenceAnswer string `json:"reference_answer"` // 参考答案（论述题）
ScoringRationale string `json:"scoring_rationale"` // 评分依据
Score float64 `json:"score"` // 得分 (0-100)
IsCorrect bool `json:"is_correct"` // 是否正确 (Score >= 60 视为正确)
Feedback string `json:"feedback"` // 评语
Suggestion string `json:"suggestion"` // 改进建议
ReferenceAnswer string `json:"reference_answer"` // 参考答案（论述题）
ScoringRationale string `json:"scoring_rationale"` // 评分依据
}
// GradeEssay 对论述题进行AI评分（不需要标准答案）
@ -275,7 +275,6 @@ func (s *AIGradingService) ExplainQuestionStream(writer http.ResponseWriter, que
1. **必须基于保密法规**：解析时必须引用相关法规条文，说明依据哪些具体法律法规
2. **必须实事求是**：只基于题目内容、标准答案和实际法规进行解析
3. **不要胡编乱造**：如果某些信息不确定或题目没有提供，请如实说明，不要编造法规条文
4. **使用Markdown格式**：使用标题、列表、加粗等markdown语法使内容更清晰易读
解析内容要求：
- **知识点**：说明题目考查的核心知识点，指出涉及哪些保密法规

2
pkg/config/config.go
View File

@ -78,7 +78,7 @@ func (c *DatabaseConfig) GetDSN() string {
// GetAIConfig 获取AI服务配置
// 优先使用环境变量，如果没有设置则使用默认值
func GetAIConfig() *AIConfig {
baseURL := getEnv("AI_BASE_URL", "https://ai.yuchat.top")
baseURL := getEnv("AI_BASE_URL", "http://172.20.0.117")
apiKey := getEnv("AI_API_KEY", "sk-OKBmOpJx855juSOPU14cWG6Iz87tZQuv3Xg9PiaJYXdHoKcN")
model := getEnv("AI_MODEL", "deepseek-v3")

538
web/src/pages/Home.module.less
View File

@ -8,7 +8,7 @@
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-items: center;
margin-bottom: 24px;
.headerLeft {
@ -29,62 +29,196 @@
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}
.titleRow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 4px;
}
.title {
color: #1d1d1f !important;
margin-bottom: 4px !important;
margin-bottom: 0 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
font-weight: 700;
}
.totalBadge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
border: 1px solid #91d5ff;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
color: #0958d9;
line-height: 1;
box-shadow: 0 2px 4px rgba(9, 88, 217, 0.1);
}
.subtitle {
color: #6e6e73;
font-size: 14px;
}
.userInfo {
background: rgba(255, 255, 255, 0.85);
padding: 12px 16px;
background: #fff;
padding: 20px;
border-radius: 16px;
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.04),
0 1px 3px rgba(0, 0, 0, 0.02),
0 0 0 1px rgba(0, 0, 0, 0.03);
border: 0.5px solid rgba(0, 0, 0, 0.04);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.06);
transition: box-shadow 0.2s ease;
min-width: 520px;
&:hover {
background: rgba(255, 255, 255, 0.95);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.06),
0 2px 6px rgba(0, 0, 0, 0.04),
0 0 0 1px rgba(0, 0, 0, 0.04);
transform: translateY(-2px);
.userInfoContent {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.avatarWrapper {
position: relative;
flex-shrink: 0;
.userAvatar {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 2px solid #fff;
}
.avatarBadge {
position: absolute;
bottom: -2px;
right: -2px;
width: 22px;
height: 22px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
font-size: 12px;
:global {
.anticon {
&.anticon-check-circle {
color: #52c41a;
}
&.anticon-setting {
color: #ff4d4f;
}
}
}
}
}
.userDetails {
display: flex;
flex-direction: column;
gap: 3px;
gap: 4px;
flex: 1;
min-width: 0;
.userNickname {
color: #1d1d1f !important;
font-size: 15px;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
line-height: 1.3;
}
.userUsername {
color: #6e6e73 !important;
font-size: 12px;
line-height: 1.2;
font-size: 13px;
line-height: 1.3;
}
.userType {
font-size: 11px;
color: #6e6e73;
.userTypeBadge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
background: linear-gradient(135deg, #e6f7ff 0%, #d6f0ff 100%);
border-radius: 8px;
border: 1px solid #91caff;
width: fit-content;
margin-top: 2px;
.badgeIcon {
font-size: 12px;
color: #1890ff;
}
.userTypeText {
font-size: 12px;
color: #1890ff;
font-weight: 500;
line-height: 1;
}
}
}
.dropdownTrigger {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
&:hover {
background: #f5f5f5;
}
&:active {
background: #e8e8e8;
}
.dropdownIcon {
font-size: 12px;
color: #8c8c8c;
}
}
.userStatsRow {
display: flex;
align-items: center;
justify-content: space-around;
gap: 12px;
.statItem {
flex: 1;
text-align: center;
padding: 8px 4px;
border-radius: 8px;
background: #fafafa;
.statValue {
font-size: 18px;
font-weight: 700;
color: #1890ff;
line-height: 1.3;
margin-bottom: 2px;
}
.statLabel {
font-size: 11px;
color: #8c8c8c;
font-weight: 500;
}
}
.statDivider {
width: 1px;
height: 24px;
background: #e8e8e8;
}
}
}
@ -121,6 +255,83 @@
gap: 8px;
font-weight: 700;
font-size: 18px !important;
:global {
.anticon {
font-size: 20px;
color: #1890ff;
}
}
}
}
.progressSection {
margin-bottom: 24px;
.sectionTitle {
color: #1d1d1f !important;
margin-bottom: 16px !important;
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 18px !important;
}
.progressCard {
border-radius: 16px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
height: 100%;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
:global {
.ant-card-body {
padding: 20px;
}
}
.progressCardContent {
display: flex;
align-items: center;
gap: 16px;
}
.progressIcon {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.progressInfo {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
.progressLabel {
font-size: 12px;
line-height: 1;
}
.progressValue {
margin: 4px 0 0 0 !important;
font-size: 28px !important;
font-weight: 700;
line-height: 1;
color: #1d1d1f;
}
}
}
}
@ -146,8 +357,23 @@
0 0 0 1px rgba(0, 0, 0, 0.04);
}
.typeIconWrapper {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
border: 1.5px solid;
transition: all 0.3s ease;
}
.typeIcon {
margin-bottom: 10px;
font-size: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.typeTitle {
@ -173,6 +399,13 @@
gap: 8px;
font-weight: 700;
font-size: 18px !important;
:global {
.anticon {
font-size: 20px;
color: #73d13d;
}
}
}
.quickCard {
@ -197,6 +430,22 @@
0 0 0 1px rgba(0, 0, 0, 0.04);
}
}
.quickIconWrapper {
width: 56px;
height: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1.5px solid;
transition: all 0.3s ease;
}
.quickIcon {
font-size: 28px;
}
}
// 响应式设计 - 移动端 (< 768px)
@ -224,27 +473,104 @@
height: 48px;
}
.titleRow {
gap: 8px;
flex-wrap: wrap;
}
.title {
font-size: 22px !important;
}
.totalBadge {
padding: 3px 8px;
font-size: 12px;
border-radius: 16px;
}
.subtitle {
font-size: 13px;
}
.userInfo {
width: 100%;
padding: 8px 12px;
min-width: auto;
padding: 16px;
border-radius: 12px;
:global {
.ant-space {
width: 100%;
justify-content: space-between;
.userInfoContent {
gap: 12px;
margin-bottom: 12px;
padding-bottom: 12px;
}
.avatarWrapper {
.userAvatar {
width: 48px !important;
height: 48px !important;
}
.ant-btn {
font-size: 12px;
padding: 4px 8px;
.avatarBadge {
width: 20px;
height: 20px;
font-size: 11px;
bottom: -1px;
right: -1px;
}
}
.userDetails {
gap: 3px;
.userNickname {
font-size: 15px !important;
}
.userUsername {
font-size: 12px !important;
}
.userTypeBadge {
padding: 3px 8px;
margin-top: 1px;
.badgeIcon {
font-size: 10px;
}
.userTypeText {
font-size: 10px;
}
}
}
.dropdownTrigger {
width: 24px;
height: 24px;
.dropdownIcon {
font-size: 11px;
}
}
.userStatsRow {
gap: 8px;
.statItem {
padding: 6px 4px;
border-radius: 6px;
.statValue {
font-size: 16px;
}
.statLabel {
font-size: 10px;
}
}
.statDivider {
height: 20px;
}
}
}
@ -273,11 +599,59 @@
}
}
.progressSection {
margin-bottom: 16px;
.sectionTitle {
font-size: 16px !important;
margin-bottom: 12px !important;
}
.progressCard {
border-radius: 12px;
:global {
.ant-card-body {
padding: 16px;
}
}
.progressIcon {
width: 48px;
height: 48px;
border-radius: 10px;
:global {
svg {
font-size: 20px !important;
}
}
}
.progressInfo {
.progressLabel {
font-size: 11px;
}
.progressValue {
font-size: 22px !important;
}
}
}
}
.typeCard {
border-radius: 12px;
.typeIconWrapper {
width: 56px;
height: 56px;
border-radius: 12px;
margin-bottom: 10px;
}
.typeIcon {
font-size: 32px !important;
font-size: 28px;
}
.typeTitle {
@ -312,6 +686,16 @@
}
}
}
.quickIconWrapper {
width: 48px;
height: 48px;
border-radius: 12px;
}
.quickIcon {
font-size: 24px;
}
}
}
@ -326,11 +710,38 @@
.title {
font-size: 28px !important;
}
.userInfo {
min-width: 450px;
.avatarWrapper .userAvatar {
width: 52px !important;
height: 52px !important;
}
.userStatsRow .statItem {
.statValue {
font-size: 17px;
}
}
}
}
.typeCard {
.typeIconWrapper {
width: 60px;
height: 60px;
border-radius: 14px;
}
.typeIcon {
font-size: 36px !important;
font-size: 30px;
}
}
.progressSection {
.sectionTitle {
font-size: 17px !important;
}
}
}
@ -354,6 +765,47 @@
.subtitle {
font-size: 15px;
}
.userInfo {
min-width: 560px;
.avatarWrapper .userAvatar {
width: 60px !important;
height: 60px !important;
}
.userDetails {
.userNickname {
font-size: 17px !important;
}
.userUsername {
font-size: 14px !important;
}
.userTypeBadge {
padding: 5px 12px;
.badgeIcon {
font-size: 12px;
}
.userTypeText {
font-size: 12px;
}
}
}
.userStatsRow .statItem {
.statValue {
font-size: 20px;
}
.statLabel {
font-size: 12px;
}
}
}
}
.statsCard {
@ -368,6 +820,14 @@
}
}
.progressSection {
margin-bottom: 32px;
.sectionTitle {
font-size: 20px !important;
}
}
.quickStart {
.sectionTitle {
font-size: 20px !important;

177
web/src/pages/Home.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Card, Statistic, Row, Col, Typography, message, Space, Avatar, Button, Modal, Form, Radio, Alert, Input, Switch, InputNumber, Divider, Badge, Dropdown } from 'antd'
import { Typography, message, Space, Avatar, Button, Modal, Form, Radio, Alert, Input, Switch, InputNumber, Divider, Dropdown, Row, Col, Card } from 'antd'
import type { MenuProps } from 'antd'
import {
FileTextOutlined,
@ -15,7 +15,10 @@ import {
UnorderedListOutlined as ListOutlined,
LockOutlined,
IdcardOutlined,
DownOutlined,
MoreOutlined,
CloseCircleOutlined,
FormOutlined,
FileMarkdownOutlined,
} from '@ant-design/icons'
import * as questionApi from '../api/question'
import { fetchWithAuth } from '../utils/request'
@ -24,48 +27,48 @@ import styles from './Home.module.less'
const { Title, Paragraph, Text } = Typography
// 题型配置 - 使用数据库中的实际类型
// 题型配置 - 使用数据库中的实际类型，采用明快的配色方案
const questionTypes = [
{
key: 'multiple-choice',
title: '选择题',
icon: <CheckCircleOutlined />,
color: '#1677ff',
color: '#1890ff', // 明亮的蓝色
description: '基础知识考察',
},
{
key: 'multiple-selection',
title: '多选题',
icon: <UnorderedListOutlined />,
color: '#52c41a',
color: '#52c41a', // 明亮的绿色
description: '综合能力提升',
},
{
key: 'true-false',
title: '判断题',
icon: <CheckCircleOutlined />,
color: '#fa8c16',
icon: <CloseCircleOutlined />,
color: '#fa8c16', // 明亮的橙色
description: '快速判断训练',
},
{
key: 'fill-in-blank',
title: '填空题',
icon: <FileTextOutlined />,
color: '#722ed1',
icon: <FormOutlined />,
color: '#faad14', // 明亮的金色
description: '填空补充练习',
},
{
key: 'short-answer',
title: '简答题',
icon: <EditOutlined />,
color: '#eb2f96',
color: '#722ed1', // 明亮的紫色
description: '深度理解练习',
},
{
key: 'essay', // 特殊标识，根据用户类型动态路由
title: '论述题',
icon: <FileTextOutlined />,
color: '#f759ab',
icon: <FileMarkdownOutlined />,
color: '#eb2f96', // 明亮的粉色
description: '深度分析与表达',
},
]
@ -93,6 +96,7 @@ const Home: React.FC = () => {
answered_questions: 0,
correct_answers: 0,
wrong_questions: 0,
total_answers: 0,
accuracy: 0,
})
@ -360,75 +364,74 @@ const Home: React.FC = () => {
<div className={styles.logoArea}>
<img src="/icon.svg" alt="AnKao Logo" className={styles.logo} />
<div>
<Title level={2} className={styles.title}>AnKao 刷题</Title>
<div className={styles.titleRow}>
<Title level={2} className={styles.title}>AnKao 刷题</Title>
<span className={styles.totalBadge}>{statistics.total_questions} 题</span>
</div>
<Paragraph className={styles.subtitle}>安全保密考试题库</Paragraph>
</div>
</div>
</div>
{/* 用户信息 */}
{userInfo && (
<Dropdown menu={{ items: userMenuItems }} trigger={['click']}>
<div className={styles.userInfo}>
<Space size="middle">
<div className={styles.userInfo}>
<div className={styles.userInfoContent}>
<div className={styles.avatarWrapper}>
<Avatar
src={userInfo.avatar || undefined}
size={44}
size={56}
icon={<UserOutlined />}
className={styles.userAvatar}
/>
<div className={styles.userDetails}>
<Text strong className={styles.userNickname}>{userInfo.nickname}</Text>
<Text type="secondary" className={styles.userUsername}>@{userInfo.username}</Text>
<Badge
color={userInfo.user_type ? '#52c41a' : '#ff4d4f'}
text={
<Text className={styles.userType}>
{getUserTypeText(userInfo.user_type)}
</Text>
}
/>
<div className={styles.avatarBadge}>
{userInfo.user_type ? (
<CheckCircleOutlined />
) : (
<SettingOutlined />
)}
</div>
<DownOutlined style={{ fontSize: '12px', color: '#8c8c8c' }} />
</Space>
</div>
<div className={styles.userDetails}>
<Text strong className={styles.userNickname}>{userInfo.nickname}</Text>
<Text type="secondary" className={styles.userUsername}>@{userInfo.username}</Text>
<div className={styles.userTypeBadge}>
<IdcardOutlined className={styles.badgeIcon} />
<Text className={styles.userTypeText}>
{getUserTypeText(userInfo.user_type)}
</Text>
</div>
</div>
<Dropdown menu={{ items: userMenuItems }} trigger={['click']} placement="bottomRight">
<div className={styles.dropdownTrigger}>
<MoreOutlined className={styles.dropdownIcon} />
</div>
</Dropdown>
</div>
</Dropdown>
<div className={styles.userStatsRow}>
<div className={styles.statItem}>
<div className={styles.statValue}>{statistics.total_answers}</div>
<div className={styles.statLabel}>刷题次数</div>
</div>
<div className={styles.statDivider}></div>
<div className={styles.statItem}>
<div className={styles.statValue}>{statistics.answered_questions}</div>
<div className={styles.statLabel}>已刷</div>
</div>
<div className={styles.statDivider}></div>
<div className={styles.statItem}>
<div className={styles.statValue}>{statistics.wrong_questions}</div>
<div className={styles.statLabel}>错题本数</div>
</div>
<div className={styles.statDivider}></div>
<div className={styles.statItem}>
<div className={styles.statValue}>{statistics.accuracy.toFixed(0)}%</div>
<div className={styles.statLabel}>准确率</div>
</div>
</div>
</div>
)}
</div>
{/* 统计卡片 */}
<Card className={styles.statsCard}>
<Row gutter={[16, 16]}>
<Col xs={12} sm={12} md={6}>
<Statistic
title="题库总数"
value={statistics.total_questions}
valueStyle={{ color: '#1677ff', fontSize: '24px' }}
/>
</Col>
<Col xs={12} sm={12} md={6}>
<Statistic
title="已答题数"
value={statistics.answered_questions}
valueStyle={{ color: '#52c41a', fontSize: '24px' }}
/>
</Col>
<Col xs={12} sm={12} md={6}>
<Statistic
title="错题数量"
value={statistics.wrong_questions}
valueStyle={{ color: '#ff4d4f', fontSize: '24px' }}
/>
</Col>
<Col xs={12} sm={12} md={6}>
<Statistic
title="正确率"
value={statistics.accuracy.toFixed(0)}
suffix="%"
valueStyle={{ color: '#fa8c16', fontSize: '24px' }}
/>
</Col>
</Row>
</Card>
{/* 题型选择 */}
<div className={styles.typeSection}>
<Title level={4} className={styles.sectionTitle}>
@ -448,8 +451,16 @@ const Home: React.FC = () => {
}
}}
>
<div className={styles.typeIcon} style={{ color: type.color, fontSize: '40px' }}>
{type.icon}
<div
className={styles.typeIconWrapper}
style={{
background: `linear-gradient(135deg, ${type.color}15 0%, ${type.color}08 100%)`,
borderColor: `${type.color}30`
}}
>
<div className={styles.typeIcon} style={{ color: type.color }}>
{type.icon}
</div>
</div>
<Title level={5} className={styles.typeTitle}>{type.title}</Title>
<Paragraph type="secondary" className={styles.typeDesc}>{type.description}</Paragraph>
@ -472,8 +483,14 @@ const Home: React.FC = () => {
onClick={() => navigate('/wrong-questions')}
>
<Space align="center" size="middle" style={{ width: '100%' }}>
<div className={styles.quickIcon}>
<BookOutlined style={{ fontSize: '32px', color: '#ff4d4f' }} />
<div
className={styles.quickIconWrapper}
style={{
background: 'linear-gradient(135deg, #fff1f0 0%, #ffe7e6 100%)',
borderColor: '#ffccc7'
}}
>
<BookOutlined className={styles.quickIcon} style={{ color: '#ff4d4f' }} />
</div>
<div style={{ flex: 1 }}>
<Title level={5} style={{ margin: 0 }}>错题本</Title>
@ -490,8 +507,14 @@ const Home: React.FC = () => {
onClick={() => navigate('/question-list')}
>
<Space align="center" size="middle" style={{ width: '100%' }}>
<div className={styles.quickIcon}>
<ListOutlined style={{ fontSize: '32px', color: '#1677ff' }} />
<div
className={styles.quickIconWrapper}
style={{
background: 'linear-gradient(135deg, #e6f7ff 0%, #d6f0ff 100%)',
borderColor: '#91caff'
}}
>
<ListOutlined className={styles.quickIcon} style={{ color: '#1890ff' }} />
</div>
<div style={{ flex: 1 }}>
<Title level={5} style={{ margin: 0 }}>题目列表</Title>
@ -510,8 +533,14 @@ const Home: React.FC = () => {
onClick={() => navigate('/question-management')}
>
<Space align="center" size="middle" style={{ width: '100%' }}>
<div className={styles.quickIcon}>
<SettingOutlined style={{ fontSize: '32px', color: '#13c2c2' }} />
<div
className={styles.quickIconWrapper}
style={{
background: 'linear-gradient(135deg, #e6fffb 0%, #d6f5f0 100%)',
borderColor: '#87e8de'
}}
>
<SettingOutlined className={styles.quickIcon} style={{ color: '#36cfc9' }} />
</div>
<div style={{ flex: 1 }}>
<Title level={5} style={{ margin: 0 }}>题库管理</Title>

1
web/src/types/question.ts
View File

@ -48,6 +48,7 @@ export interface Statistics {
answered_questions: number
correct_answers: number
wrong_questions: number
total_answers: number // 刷题次数
accuracy: number
}