yanlongqi ac3249a4a4 优化题目列表页面UI和交互体验
主要改进:
1. 优化题目标题布局
   - 调整标题大小为 level 5,更加精致
   - 添加占位元素使标题真正居中显示
   - 优化标题与返回按钮的视觉平衡

2. 统一标签样式
   - 题目列表中的标签改为统一的蓝色分类标签
   - 题目顺序调整:「第X题」在前,分类标签在后
   - 移除题目ID显示,界面更简洁

3. 优化题目导航抽屉
   - 导航抽屉从按题型分组改为按分类分组
   - 使用统一的蓝色分类标签
   - 题号网格显示题目序号而非题目ID
   - 与答题页面QuestionCard保持统一的视觉风格

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 22:27:55 +08:00
2025-11-05 09:37:29 +08:00
2025-11-05 09:37:29 +08:00
2025-11-05 09:37:29 +08:00

AnKao Web 项目

这是一个使用Go语言和Gin框架构建的Web应用项目。

项目结构

AnKao/
├── main.go              # 主程序入口
├── internal/            # 私有应用代码
│   ├── handlers/        # HTTP请求处理器
│   ├── middleware/      # 中间件
│   └── models/          # 数据模型
├── pkg/                 # 公共库代码
│   └── config/          # 配置管理
├── web/                 # 前端项目目录
│   ├── src/             # 源代码
│   │   ├── pages/       # 页面组件
│   │   ├── components/  # 可复用组件
│   │   └── main.tsx     # 入口文件
│   ├── vite.config.ts   # Vite配置(含API代理)
│   └── package.json     # 前端依赖
├── go.mod               # Go模块文件
├── CLAUDE.md            # 开发规范文档
└── README.md            # 项目说明

快速开始

后端服务器

# 安装依赖
go mod tidy

# 运行服务器
go run main.go

服务器将在 http://localhost:8080 启动

前端开发服务器

# 进入前端目录
cd web

# 安装依赖 (使用 yarn)
yarn install

# 运行开发服务器
yarn dev

前端开发服务器将在 http://localhost:3000 启动

注意: 前端使用 Vite 代理,所有 /api/* 请求会自动转发到后端服务器,无需配置 CORS。

API端点

用户相关

  • POST /api/login - 用户登录
  • POST /api/register - 用户注册

练习题相关

  • GET /api/practice/questions - 获取练习题目列表 (支持分页和类型过滤)
  • GET /api/practice/questions/random - 获取随机练习题目
  • GET /api/practice/questions/:id - 获取指定练习题目
  • POST /api/practice/submit - 提交练习答案 (简答题自动AI评分)
  • GET /api/practice/types - 获取题型列表

其他

  • GET /api/health - 健康检查端点

开发

安装依赖

go mod tidy

构建

go build -o bin/server.exe main.go

运行编译后的程序

# Windows
.\bin\server.exe

# Linux/Mac
./bin/server

特性

  • 基于 Gin 框架的高性能 HTTP 服务器
  • 自定义日志中间件
  • RESTful API 结构
  • 健康检查端点
  • 用户登录系统基于PostgreSQL数据库
  • 题目练习功能
  • 答题统计功能
  • AI智能评分 - 简答题使用AI进行智能评分和反馈
  • React + TypeScript + Vite 前端
  • Ant Design Mobile UI组件库

数据库配置

项目使用 PostgreSQL 数据库存储用户数据。

数据库连接信息

数据库配置位于 pkg/config/config.go

  • 主机: pgsql.yuchat.top
  • 端口: 5432
  • 数据库: ankao
  • 用户: postgres

数据库表结构

users 表

  • id - 主键
  • username - 用户名(唯一索引)
  • password - 密码bcrypt加密
  • avatar - 头像URL
  • nickname - 昵称
  • created_at - 创建时间
  • updated_at - 更新时间
  • deleted_at - 软删除时间

practice_questions 表

  • id - 主键
  • question_id - 题目ID唯一索引来自JSON数据
  • type - 题型fill-in-blank/true-false/multiple-choice/multiple-selection/short-answer
  • type_name - 题型名称(中文)
  • question - 题目内容
  • answer_data - 答案数据JSON格式
  • options_data - 选项数据JSON格式选择题使用
  • created_at - 创建时间
  • updated_at - 更新时间
  • deleted_at - 软删除时间

数据导入

首次运行项目需要导入练习题数据:

# 确保 practice_question_pool.json 文件在项目根目录
go run scripts/import_questions.go

导入脚本会读取 practice_question_pool.json 文件并导入到数据库共包含236道练习题涵盖

  • 填空题 (80道)
  • 判断题 (80道)
  • 单选题 (40道)
  • 多选题 (30道)
  • 简答题 (6道) - 支持AI智能评分

AI评分配置

项目使用AI对简答题进行智能评分。AI服务配置位于 pkg/config/config.go

默认配置

  • API地址: https://ai.yuchat.top
  • 模型: deepseek-v3
  • 评分方式: 基于题目和标准答案AI会给出分数(0-100)、评语和改进建议

环境变量配置(可选)

可以通过环境变量覆盖默认配置:

export AI_BASE_URL="你的API地址"
export AI_API_KEY="你的API密钥"
export AI_MODEL="你的模型名称"

AI评分返回格式

对简答题提交答案时,响应会包含 ai_grading 字段:

{
  "success": true,
  "data": {
    "correct": true,
    "user_answer": "用户的答案",
    "correct_answer": "标准答案",
    "ai_grading": {
      "score": 85,
      "feedback": "答案基本正确,要点全面",
      "suggestion": "可以补充一些具体的例子"
    }
  }
}

前端开发

前端项目位于 web/ 目录,使用 yarn 作为包管理工具。

安装依赖

cd web
yarn install

运行开发服务器

yarn dev

开发服务器运行在 http://localhost:3000

构建生产版本

yarn build

API代理

开发环境下Vite已配置代理前端 /api/* 请求会自动转发到 http://localhost:8080无需担心CORS问题。

页面结构

  • 登录页 (/login) - 用户登录和注册,支持密码可见性切换
  • 首页 (/) - 题目练习、随机题目、题目列表、筛选等功能
  • 我的 (/profile) - 用户信息、退出登录

特性

后端特性

  • 基于 Gin 框架的高性能 HTTP 服务器
  • 自定义日志中间件
  • RESTful API 结构
  • 健康检查端点
  • 用户登录和注册系统基于PostgreSQL数据库
  • 密码bcrypt加密存储
  • 练习题管理系统236道练习题5种题型
  • 支持分页查询和题型筛选
  • 随机题目推送功能
  • AI智能评分系统 - 使用deepseek-v3对简答题进行智能评分和反馈

前端特性

  • React + TypeScript + Vite 技术栈
  • Ant Design Mobile UI组件库
  • 移动端优化,防止双指缩放
  • CSS Modules 样式隔离
  • 现代化的登录/注册界面
  • 密码可见性切换功能

技术栈

后端

  • Go 1.25.1
  • Gin v1.11.0 - Web 框架
  • GORM v1.31.1 - ORM框架
  • PostgreSQL - 数据库
  • bcrypt - 密码加密
  • go-openai v1.41.2 - OpenAI SDK (用于AI评分)

前端

  • React 18 - UI框架
  • TypeScript - 类型安全
  • Vite - 构建工具
  • Ant Design Mobile - UI组件库
  • React Router - 路由管理
  • Less - CSS预处理器
  • Yarn - 包管理工具

开发工具

  • API代理配置Vite
  • CSS Modules
  • 清晰的项目架构,易于扩展
Description
保密考试刷题
http://ankao.yuchat.top
Readme 3 MiB
Languages
TypeScript 53.7%
Go 30.6%
Less 15.1%
HTML 0.6%