yanlongqi 9540478583 重构登录页面UI并完善项目文档
主要改动:
- 重新设计登录页面,使用原生input替代antd-mobile组件以更好控制样式
- 添加密码可见性切换功能(眼睛图标)
- 实现登录/注册切换UI,注册链接移至底部
- 优化输入框样式,添加明显的边框和背景色
- 实现移动端防缩放功能(touch-action + JS事件监听)
- 配置Vite代理解决CORS问题,API请求使用相对路径
- 完善CLAUDE.md和README.md文档,添加文档同步更新规范
- 更新技术栈说明,明确使用yarn作为包管理工具

技术细节:
- 渐变背景(紫色主题)
- 白色输入框带半透明边框,聚焦时显示光晕效果
- 防止移动端双指缩放和双击缩放
- Vite代理配置: /api/* -> http://localhost:8080

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 00:35:17 +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/questions - 获取题目列表
  • GET /api/questions/random - 获取随机题目
  • GET /api/questions/:id - 获取指定题目
  • POST /api/submit - 提交答案
  • GET /api/statistics - 获取统计数据
  • POST /api/reset - 重置进度

其他

  • 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 结构
  • 健康检查端点
  • 用户登录系统基于JSON文件存储
  • 题目练习功能
  • 答题统计功能
  • React + TypeScript + Vite 前端
  • Ant Design Mobile UI组件库

用户系统

用户数据存储在 users.json 文件中,格式如下:

{
  "用户名": {
    "password": "密码",
    "avatar": "头像URL",
    "nickname": "昵称"
  }
}

测试账号

  • 用户名: admin / 密码: 123456
  • 用户名: test / 密码: test123

前端开发

前端项目位于 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 结构
  • 健康检查端点
  • 用户登录和注册系统基于JSON文件存储
  • 题目练习功能
  • 答题统计功能

前端特性

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

技术栈

后端

  • Go 1.25.1
  • Gin v1.11.0 - Web 框架

前端

  • 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%