实现完整的登录注册功能并优化前端组件

- 实现登录页面:
  - 添加登录和注册表单切换功能
  - 使用antd-mobile组件(Form, Input, Button, Toast)
  - 白色背景设计,标题使用主题色
  - 表单验证和错误提示
  - 已登录用户自动重定向

- 完善用户认证:
  - 路由保护,未登录用户重定向到登录页
  - 用户信息保存到localStorage
  - Profile页面支持退出登录

- 后端改进:
  - 启用CORS中间件支持跨域请求

- 更新开发规范:
  - 在CLAUDE.md中添加前端开发规范
  - 明确UI组件使用原则:优先使用antd-mobile组件

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

Co-Authored-By: Claude <noreply@anthropic.com>

CLAUDE.md

@@ -104,3 +104,25 @@ go test -v ./...
 - 在 `internal/models/` 中添加模型
 - 考虑使用 GORM 或类似的 ORM
 - 在 main.go 或单独的包中添加数据库初始化
+
+## 前端开发规范
+
+### UI 组件使用原则
+**重要**: 在开发前端页面时,必须优先使用 UI 框架的组件。
+
+- **优先使用 antd-mobile 组件**: 项目使用 antd-mobile 作为 UI 框架,开发时应优先查找并使用框架提供的组件
+- **常用组件示例**:
+  - 表单输入: 使用 `Input` 组件,而非原生 `<input>`
+  - 按钮: 使用 `Button` 组件,而非原生 `<button>`
+  - 表单: 使用 `Form` 和 `Form.Item` 组件
+  - 提示信息: 使用 `Toast` 组件,而非自定义提示框
+  - 对话框: 使用 `Dialog` 组件
+  - 列表: 使用 `List` 组件
+- **仅在必要时自定义**: 只有当 antd-mobile 没有提供对应组件时,才使用自定义组件
+- **样式处理**: 使用 CSS Modules (`.module.less`) 编写组件样式,避免全局样式污染
+
+### 前端项目结构
+- **web/src/pages/** - 页面组件
+- **web/src/components/** - 可复用组件
+- **web/src/pages/*.module.less** - 页面样式文件 (CSS Modules)
+

main.go

@@ -12,6 +12,7 @@ func main() {
 	r := gin.Default()
 
 	// 应用自定义中间件
+	r.Use(middleware.CORS())
 	r.Use(middleware.Logger())
 
 	// 静态文件服务

web/src/pages/Login.less

@@ -1,222 +0,0 @@
-// 变量定义
-@primary-color: #1677ff;
-@primary-hover: #40a9ff;
-@bg-color: #f5f5f5;
-@white: #fff;
-@text-color: #262626;
-@text-secondary: #999;
-@border-color: #d9d9d9;
-@input-bg: #f5f5f5;
-@shadow-sm: 0 2px 8px rgba(22, 119, 255, 0.15);
-@shadow-md: 0 4px 12px rgba(22, 119, 255, 0.25);
-@shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
-
-// 页面容器
-.login-page {
-  min-height: 100vh;
-  background-color: @bg-color;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-}
-
-// 登录内容卡片
-.login-content {
-  width: 100%;
-  max-width: 400px;
-  background: @white;
-  border-radius: 12px;
-  padding: 40px 32px;
-  box-shadow: @shadow-lg;
-
-  // 头部
-  .login-header {
-    text-align: center;
-    margin-bottom: 32px;
-
-    h1 {
-      font-size: 32px;
-      font-weight: bold;
-      color: @primary-color;
-      margin-bottom: 8px;
-    }
-
-    p {
-      font-size: 14px;
-      color: @text-secondary;
-    }
-  }
-
-  // Tabs 样式
-  .adm-tabs {
-    --active-line-color: @primary-color;
-    --active-title-color: @primary-color;
-  }
-
-  .adm-tabs-header {
-    border-bottom: 1px solid #f0f0f0;
-  }
-
-  .adm-tabs-tab {
-    font-size: 16px;
-    padding: 12px 0;
-  }
-
-  .adm-tabs-content {
-    padding-top: 24px;
-  }
-
-  // Form 样式
-  .adm-form {
-    --border-inner: none;
-    --border-top: none;
-    --border-bottom: none;
-  }
-
-  .adm-form-item {
-    margin-bottom: 16px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  // Input 样式
-  .adm-input-wrapper {
-    position: relative;
-    background: @input-bg !important;
-    border: 1px solid @border-color !important;
-    border-radius: 8px !important;
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
-    transition: all 0.3s ease !important;
-    min-height: 48px;
-    display: flex;
-    align-items: center;
-
-    &:hover {
-      border-color: @primary-hover !important;
-      background: #fafafa !important;
-    }
-
-    &:focus-within {
-      background: @white !important;
-      border-color: @primary-color !important;
-      border-width: 2px !important;
-      box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1) !important;
-    }
-  }
-
-  .adm-input {
-    --font-size: 15px;
-    --placeholder-color: #bfbfbf;
-    --color: @text-color;
-    padding: 12px 16px;
-    font-weight: 400;
-    background: transparent !important;
-    border: none !important;
-
-    input {
-      background: transparent !important;
-    }
-
-    &::placeholder {
-      font-weight: 400;
-    }
-  }
-
-  // Button 样式
-  .adm-button {
-    --border-radius: 8px;
-    font-size: 16px;
-    font-weight: 600;
-    height: 50px;
-    margin-top: 24px;
-    box-shadow: @shadow-sm;
-    transition: all 0.3s ease;
-
-    &:hover {
-      box-shadow: @shadow-md;
-      transform: translateY(-1px);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 1px 4px rgba(22, 119, 255, 0.2);
-    }
-  }
-
-  // 输入框图标
-  .adm-form-item:first-child .adm-input-wrapper::before {
-    content: '👤';
-    position: absolute;
-    left: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 18px;
-    opacity: 0.5;
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .adm-form-item:first-child .adm-input {
-    padding-left: 44px;
-  }
-
-  .adm-form-item:nth-child(2) .adm-input-wrapper::before {
-    content: '🔒';
-    position: absolute;
-    left: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 18px;
-    opacity: 0.5;
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .adm-form-item:nth-child(2) .adm-input {
-    padding-left: 44px;
-  }
-
-  .adm-form-item:nth-child(3) .adm-input-wrapper::before {
-    content: '✨';
-    position: absolute;
-    left: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 18px;
-    opacity: 0.5;
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .adm-form-item:nth-child(3) .adm-input {
-    padding-left: 44px;
-  }
-}
-
-// 移动端适配
-@media (max-width: 768px) {
-  .login-page {
-    background-color: @white;
-    padding: 0;
-    align-items: flex-start;
-  }
-
-  .login-content {
-    max-width: 100%;
-    min-height: 100vh;
-    border-radius: 0;
-    padding: 60px 24px 24px;
-    box-shadow: none;
-  }
-
-  .login-header {
-    margin-bottom: 40px;
-
-    h1 {
-      font-size: 36px;
-    }
-  }
-}

web/src/pages/Login.module.less

@@ -0,0 +1,124 @@
+.container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  padding: 40px 20px;
+  max-width: 400px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: #888;
+  margin: 0 0 10px 0;
+}
+
+.title {
+  font-size: 48px;
+  font-weight: 700;
+  color: var(--adm-color-primary);
+  margin: 0;
+  text-align: center;
+  letter-spacing: 2px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  input {
+    padding: 12px 16px;
+    border: 2px solid #e1e8ed;
+    border-radius: 8px;
+    font-size: 15px;
+    transition: all 0.3s;
+    outline: none;
+    background: white;
+
+    &:focus {
+      border-color: #667eea;
+      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+
+    &:disabled {
+      background-color: #f5f5f5;
+      cursor: not-allowed;
+    }
+
+    &::placeholder {
+      color: #aaa;
+    }
+  }
+}
+
+.error {
+  padding: 12px;
+  background-color: #fee;
+  border: 2px solid #fcc;
+  border-radius: 8px;
+  color: #c33;
+  font-size: 14px;
+  text-align: center;
+  animation: shake 0.5s;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-10px); }
+  75% { transform: translateX(10px); }
+}
+
+.switchMode {
+  margin-top: 20px;
+  text-align: center;
+  width: 100%;
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .linkBtn {
+    background: none;
+    border: none;
+    color: #667eea;
+    font-weight: 600;
+    cursor: pointer;
+    padding: 0 0 0 5px;
+    transition: color 0.3s;
+
+    &:hover:not(:disabled) {
+      color: #764ba2;
+      text-decoration: underline;
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+}

web/src/pages/Login.tsx

@@ -1,34 +1,65 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import {
+import { Button, Input, Form, Toast } from 'antd-mobile'
-  Form,
+import styles from './Login.module.less'
-  Input,
+
-  Button,
+interface LoginResponse {
-  Toast,
+  success: boolean
-  Tabs,
+  message: string
-} from 'antd-mobile'
+  data?: {
-import axios from 'axios'
+    token: string
-import './Login.less'
+    user: {
+      username: string
+      avatar: string
+      nickname: string
+    }
+  }
+}
 
 const Login: React.FC = () => {
   const navigate = useNavigate()
+  const [isLogin, setIsLogin] = useState(true)
   const [loading, setLoading] = useState(false)
-  const [activeTab, setActiveTab] = useState('login')
 
-  const onLogin = async (values: { username: string; password: string }) => {
+  // 表单字段
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [nickname, setNickname] = useState('')
+
+  // 如果已登录，重定向到首页
+  useEffect(() => {
+    const token = localStorage.getItem('token')
+    if (token) {
+      navigate('/', { replace: true })
+    }
+  }, [navigate])
+
+  // 处理登录
+  const handleLogin = async () => {
+    if (!username || !password) {
+      Toast.show({
+        icon: 'fail',
+        content: '请输入用户名和密码',
+      })
+      return
+    }
+
     setLoading(true)
     try {
-      const response = await axios.post('/api/login', {
+      const response = await fetch('http://localhost:8080/api/login', {
-        username: values.username,
+        method: 'POST',
-        password: values.password,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password }),
       })
 
-      if (response.data.success) {
+      const data: LoginResponse = await response.json()
-        const { token, user } = response.data.data
 
-        // 保存token和用户信息
+      if (data.success && data.data) {
-        localStorage.setItem('token', token)
+        // 保存token到localStorage
-        localStorage.setItem('userInfo', JSON.stringify(user))
+        localStorage.setItem('token', data.data.token)
+        localStorage.setItem('user', JSON.stringify(data.data.user))
 
         Toast.show({
           icon: 'success',
@@ -40,35 +71,54 @@ const Login: React.FC = () => {
       } else {
         Toast.show({
           icon: 'fail',
-          content: response.data.message || '登录失败',
+          content: data.message || '登录失败',
         })
       }
-    } catch (error: any) {
+    } catch (err) {
-      console.error('登录失败:', error)
       Toast.show({
         icon: 'fail',
-        content: error.response?.data?.message || '登录失败，请检查网络连接',
+        content: '网络错误，请稍后重试',
       })
+      console.error('登录错误:', err)
     } finally {
       setLoading(false)
     }
   }
 
-  const onRegister = async (values: { username: string; password: string; nickname?: string }) => {
+  // 处理注册
+  const handleRegister = async () => {
+    if (!username || !password) {
+      Toast.show({
+        icon: 'fail',
+        content: '请输入用户名和密码',
+      })
+      return
+    }
+
+    if (password.length < 6) {
+      Toast.show({
+        icon: 'fail',
+        content: '密码长度至少6位',
+      })
+      return
+    }
+
     setLoading(true)
     try {
-      const response = await axios.post('/api/register', {
+      const response = await fetch('http://localhost:8080/api/register', {
-        username: values.username,
+        method: 'POST',
-        password: values.password,
+        headers: {
-        nickname: values.nickname || values.username,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password, nickname }),
       })
 
-      if (response.data.success) {
+      const data: LoginResponse = await response.json()
-        const { token, user } = response.data.data
 
-        // 保存token和用户信息
+      if (data.success && data.data) {
-        localStorage.setItem('token', token)
+        // 保存token到localStorage
-        localStorage.setItem('userInfo', JSON.stringify(user))
+        localStorage.setItem('token', data.data.token)
+        localStorage.setItem('user', JSON.stringify(data.data.user))
 
         Toast.show({
           icon: 'success',
@@ -80,109 +130,100 @@ const Login: React.FC = () => {
       } else {
         Toast.show({
           icon: 'fail',
-          content: response.data.message || '注册失败',
+          content: data.message || '注册失败',
         })
       }
-    } catch (error: any) {
+    } catch (err) {
-      console.error('注册失败:', error)
       Toast.show({
         icon: 'fail',
-        content: error.response?.data?.message || '注册失败，请检查网络连接',
+        content: '网络错误，请稍后重试',
       })
+      console.error('注册错误:', err)
     } finally {
       setLoading(false)
     }
   }
 
   return (
-    <div className="login-page">
+    <div className={styles.container}>
-      <div className="login-content">
+      <div className={styles.header}>
-        <div className="login-header">
+        <p className={styles.subtitle}>欢迎使用AnKao题库系统</p>
-          <h1>AnKao</h1>
+        <h1 className={styles.title}>AnKao</h1>
-          <p>欢迎使用AnKao题库系统</p>
       </div>
 
-        <Tabs
-          activeKey={activeTab}
-          onChange={(key) => setActiveTab(key)}
-          style={{ '--title-font-size': '16px' }}
-        >
-          <Tabs.Tab title="登录" key="login">
       <Form
-              onFinish={onLogin}
         layout="vertical"
-              footer={
+        onFinish={isLogin ? handleLogin : handleRegister}
+        className={styles.form}
+      >
+        <Form.Item label="用户名">
+          <Input
+            value={username}
+            onChange={setUsername}
+            placeholder="请输入用户名"
+            disabled={loading}
+            clearable
+          />
+        </Form.Item>
+
+        <Form.Item label="密码">
+          <Input
+            type="password"
+            value={password}
+            onChange={setPassword}
+            placeholder={isLogin ? '请输入密码' : '请输入密码（至少6位）'}
+            disabled={loading}
+            clearable
+          />
+        </Form.Item>
+
+        {!isLogin && (
+          <Form.Item label="昵称（可选）">
+            <Input
+              value={nickname}
+              onChange={setNickname}
+              placeholder="请输入昵称"
+              disabled={loading}
+              clearable
+            />
+          </Form.Item>
+        )}
+
         <Button
-                  block
           type="submit"
           color="primary"
-                  size="large"
-                  loading={loading}
-                >
-                  登录
-                </Button>
-              }
-            >
-              <Form.Item
-                name="username"
-                rules={[{ required: true, message: '请输入用户名' }]}
-              >
-                <Input placeholder="请输入用户名" clearable />
-              </Form.Item>
-
-              <Form.Item
-                name="password"
-                rules={[{ required: true, message: '请输入密码' }]}
-              >
-                <Input type="password" placeholder="请输入密码" clearable />
-              </Form.Item>
-            </Form>
-          </Tabs.Tab>
-
-          <Tabs.Tab title="注册" key="register">
-            <Form
-              onFinish={onRegister}
-              layout="vertical"
-              footer={
-                <Button
           block
-                  type="submit"
-                  color="primary"
-                  size="large"
           loading={loading}
+          disabled={loading}
         >
-                  注册
+          {isLogin ? '登录' : '注册'}
         </Button>
-              }
-            >
-              <Form.Item
-                name="username"
-                rules={[
-                  { required: true, message: '请输入用户名' },
-                  { min: 3, message: '用户名至少3个字符' },
-                ]}
-              >
-                <Input placeholder="请输入用户名" clearable />
-              </Form.Item>
-
-              <Form.Item
-                name="password"
-                rules={[
-                  { required: true, message: '请输入密码' },
-                  { min: 6, message: '密码至少6个字符' },
-                ]}
-              >
-                <Input type="password" placeholder="请输入密码" clearable />
-              </Form.Item>
-
-              <Form.Item
-                name="nickname"
-              >
-                <Input placeholder="请输入昵称（可选）" clearable />
-              </Form.Item>
       </Form>
-          </Tabs.Tab>
+
-        </Tabs>
+      <div className={styles.switchMode}>
+        {isLogin ? (
+          <p>
+            还没有账号？
+            <button
+              onClick={() => setIsLogin(false)}
+              className={styles.linkBtn}
+              disabled={loading}
+            >
+              立即注册
+            </button>
+          </p>
+        ) : (
+          <p>
+            已有账号？
+            <button
+              onClick={() => setIsLogin(true)}
+              className={styles.linkBtn}
+              disabled={loading}
+            >
+              立即登录
+            </button>
+          </p>
+        )}
       </div>
     </div>
   )

web/src/pages/Profile.module.less

@@ -3,7 +3,7 @@
 @text-secondary: #999;
 
 // 页面容器
-.profile-page {
+.page {
   min-height: 100vh;
   background-color: @bg-color;
   padding: 16px;
@@ -11,32 +11,32 @@
 }
 
 // 用户卡片
-.user-card {
+.userCard {
   margin-bottom: 16px;
 }
 
-.user-info {
+.userInfo {
   display: flex;
   align-items: center;
   gap: 16px;
 }
 
-.user-details {
+.userDetails {
   flex: 1;
 }
 
-.user-nickname {
+.userNickname {
   font-size: 20px;
   font-weight: bold;
   margin-bottom: 4px;
 }
 
-.user-username {
+.userUsername {
   font-size: 14px;
   color: @text-secondary;
 }
 
 // 登出容器
-.logout-container {
+.logoutContainer {
   margin-top: 24px;
 }

web/src/pages/Profile.tsx

@@ -14,7 +14,7 @@ import {
   FileOutline,
   UserOutline,
 } from 'antd-mobile-icons'
-import './Profile.less'
+import styles from './Profile.module.less'
 
 interface UserInfo {
   username: string
@@ -29,7 +29,7 @@ const Profile: React.FC = () => {
   useEffect(() => {
     // 从 localStorage 获取用户信息
     const token = localStorage.getItem('token')
-    const savedUserInfo = localStorage.getItem('userInfo')
+    const savedUserInfo = localStorage.getItem('user')
 
     if (token && savedUserInfo) {
       try {
@@ -47,7 +47,7 @@ const Profile: React.FC = () => {
 
     if (result) {
       localStorage.removeItem('token')
-      localStorage.removeItem('userInfo')
+      localStorage.removeItem('user')
       setUserInfo(null)
       Toast.show('已退出登录')
       navigate('/login')
@@ -59,29 +59,29 @@ const Profile: React.FC = () => {
   }
 
   return (
-    <div className="profile-page">
+    <div className={styles.page}>
       {/* 用户信息卡片 */}
-      <Card className="user-card">
+      <Card className={styles.userCard}>
         {userInfo ? (
-          <div className="user-info">
+          <div className={styles.userInfo}>
             <Avatar
               src={userInfo.avatar || undefined}
               style={{ '--size': '64px' }}
             >
               {!userInfo.avatar && <UserOutline fontSize={32} />}
             </Avatar>
-            <div className="user-details">
+            <div className={styles.userDetails}>
-              <div className="user-nickname">{userInfo.nickname}</div>
+              <div className={styles.userNickname}>{userInfo.nickname}</div>
-              <div className="user-username">@{userInfo.username}</div>
+              <div className={styles.userUsername}>@{userInfo.username}</div>
             </div>
           </div>
         ) : (
-          <div className="user-info">
+          <div className={styles.userInfo}>
             <Avatar style={{ '--size': '64px' }}>
               <UserOutline fontSize={32} />
             </Avatar>
-            <div className="user-details">
+            <div className={styles.userDetails}>
-              <div className="user-nickname">未登录</div>
+              <div className={styles.userNickname}>未登录</div>
               <Button
                 color="primary"
                 size="small"
@@ -117,7 +117,7 @@ const Profile: React.FC = () => {
 
       {/* 退出登录按钮 */}
       {userInfo && (
-        <div className="logout-container">
+        <div className={styles.logoutContainer}>
           <Button block color="danger" onClick={handleLogout}>
             退出登录
           </Button>

web/src/pages/Question.less

@@ -1,209 +0,0 @@
-// 变量定义
-@bg-color: #f5f5f5;
-@white: #fff;
-@primary-color: #1677ff;
-@text-color: #333;
-@text-secondary: #666;
-@text-tertiary: #888;
-@border-color: #e8e8e8;
-@shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);
-@shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.08);
-@success-bg: #f6ffed;
-@success-border: #b7eb8f;
-@success-color: #52c41a;
-@error-bg: #fff2f0;
-@error-border: #ffccc7;
-@error-color: #ff4d4f;
-
-// 页面容器
-.question-page {
-  min-height: 100vh;
-  background: @bg-color;
-  padding-bottom: 80px;
-}
-
-// 头部
-.header {
-  background: @white;
-  padding: 16px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: @shadow-light;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-
-  h1 {
-    margin: 0;
-    font-size: 20px;
-    font-weight: 600;
-    color: @primary-color;
-  }
-}
-
-// 内容区域
-.content {
-  padding: 16px;
-}
-
-// 题目部分
-.question-header {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.question-number {
-  font-size: 14px;
-  color: @text-secondary;
-  margin-bottom: 12px;
-}
-
-.question-content {
-  font-size: 18px;
-  font-weight: 500;
-  color: @text-color;
-  line-height: 1.6;
-  margin-bottom: 8px;
-}
-
-// 答案结果
-.answer-result {
-  margin-top: 20px;
-  padding: 16px;
-  border-radius: 8px;
-  background: @success-bg;
-  border: 1px solid @success-border;
-
-  &.wrong {
-    background: @error-bg;
-    border: 1px solid @error-border;
-  }
-
-  .result-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 8px;
-  }
-
-  &.correct .result-icon {
-    color: @success-color;
-  }
-
-  &.wrong .result-icon {
-    color: @error-color;
-  }
-
-  .result-text {
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 12px;
-    text-align: center;
-  }
-
-  .correct-answer {
-    font-size: 14px;
-    color: @text-secondary;
-    margin-bottom: 8px;
-  }
-
-  .explanation {
-    font-size: 14px;
-    color: @text-tertiary;
-    line-height: 1.5;
-    margin-top: 8px;
-    padding-top: 8px;
-    border-top: 1px solid @border-color;
-  }
-}
-
-// 按钮组
-.button-group {
-  margin-top: 24px;
-}
-
-.action-buttons {
-  display: flex;
-  gap: 8px;
-  padding: 16px;
-  background: @white;
-  position: sticky;
-  bottom: 0;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
-
-  button {
-    flex: 1;
-  }
-}
-
-// 统计内容
-.stats-content {
-  padding: 20px;
-
-  h2 {
-    margin: 0 0 20px 0;
-    text-align: center;
-    font-size: 20px;
-  }
-}
-
-.stat-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 0;
-  border-bottom: 1px solid #f0f0f0;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  span {
-    font-size: 16px;
-    color: @text-secondary;
-  }
-
-  strong {
-    font-size: 20px;
-    color: @primary-color;
-  }
-}
-
-// 筛选内容
-.filter-content {
-  padding: 20px;
-
-  h2 {
-    margin: 0 0 20px 0;
-    text-align: center;
-    font-size: 20px;
-  }
-}
-
-.filter-group {
-  margin-bottom: 20px;
-
-  p {
-    margin: 0 0 12px 0;
-    font-size: 14px;
-    color: @text-secondary;
-    font-weight: 500;
-  }
-}
-
-// 覆盖 antd-mobile 样式
-.adm-card {
-  border-radius: 12px;
-  box-shadow: @shadow-medium;
-}
-
-.adm-list-item {
-  padding: 12px 16px;
-}
-
-.adm-modal-body {
-  max-height: 70vh;
-  overflow-y: auto;
-}

web/src/pages/Question.module.less

@@ -0,0 +1,212 @@
+// 变量定义
+@bg-color: #f5f5f5;
+@white: #fff;
+@primary-color: #1677ff;
+@text-color: #333;
+@text-secondary: #666;
+@text-tertiary: #888;
+@border-color: #e8e8e8;
+@shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);
+@shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.08);
+@success-bg: #f6ffed;
+@success-border: #b7eb8f;
+@success-color: #52c41a;
+@error-bg: #fff2f0;
+@error-border: #ffccc7;
+@error-color: #ff4d4f;
+
+// 使用 :global 包裹所有样式，因为 Question 组件使用直接类名
+:global {
+  // 页面容器
+  .question-page {
+    min-height: 100vh;
+    background: @bg-color;
+    padding-bottom: 80px;
+  }
+
+  // 头部
+  .header {
+    background: @white;
+    padding: 16px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: @shadow-light;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+    h1 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: @primary-color;
+    }
+  }
+
+  // 内容区域
+  .content {
+    padding: 16px;
+  }
+
+  // 题目部分
+  .question-header {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .question-number {
+    font-size: 14px;
+    color: @text-secondary;
+    margin-bottom: 12px;
+  }
+
+  .question-content {
+    font-size: 18px;
+    font-weight: 500;
+    color: @text-color;
+    line-height: 1.6;
+    margin-bottom: 8px;
+  }
+
+  // 答案结果
+  .answer-result {
+    margin-top: 20px;
+    padding: 16px;
+    border-radius: 8px;
+    background: @success-bg;
+    border: 1px solid @success-border;
+
+    &.wrong {
+      background: @error-bg;
+      border: 1px solid @error-border;
+    }
+
+    .result-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 8px;
+    }
+
+    &.correct .result-icon {
+      color: @success-color;
+    }
+
+    &.wrong .result-icon {
+      color: @error-color;
+    }
+
+    .result-text {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 12px;
+      text-align: center;
+    }
+
+    .correct-answer {
+      font-size: 14px;
+      color: @text-secondary;
+      margin-bottom: 8px;
+    }
+
+    .explanation {
+      font-size: 14px;
+      color: @text-tertiary;
+      line-height: 1.5;
+      margin-top: 8px;
+      padding-top: 8px;
+      border-top: 1px solid @border-color;
+    }
+  }
+
+  // 按钮组
+  .button-group {
+    margin-top: 24px;
+  }
+
+  .action-buttons {
+    display: flex;
+    gap: 8px;
+    padding: 16px;
+    background: @white;
+    position: sticky;
+    bottom: 0;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+
+    button {
+      flex: 1;
+    }
+  }
+
+  // 统计内容
+  .stats-content {
+    padding: 20px;
+
+    h2 {
+      margin: 0 0 20px 0;
+      text-align: center;
+      font-size: 20px;
+    }
+  }
+
+  .stat-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid #f0f0f0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    span {
+      font-size: 16px;
+      color: @text-secondary;
+    }
+
+    strong {
+      font-size: 20px;
+      color: @primary-color;
+    }
+  }
+
+  // 筛选内容
+  .filter-content {
+    padding: 20px;
+
+    h2 {
+      margin: 0 0 20px 0;
+      text-align: center;
+      font-size: 20px;
+    }
+  }
+
+  .filter-group {
+    margin-bottom: 20px;
+
+    p {
+      margin: 0 0 12px 0;
+      font-size: 14px;
+      color: @text-secondary;
+      font-weight: 500;
+    }
+  }
+
+  // 覆盖 antd-mobile 样式
+  .adm-card {
+    border-radius: 12px;
+    box-shadow: @shadow-medium;
+  }
+
+  .adm-list-item {
+    padding: 12px 16px;
+  }
+
+  .adm-modal-body {
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+}

web/src/pages/Question.tsx

@@ -22,7 +22,7 @@ import {
 } from 'antd-mobile-icons'
 import type { Question, AnswerResult } from '../types/question'
 import * as questionApi from '../api/question'
-import './Question.less'
+import './Question.module.less'
 
 const QuestionPage: React.FC = () => {
   const [currentQuestion, setCurrentQuestion] = useState<Question | null>(null)