init

2026-03-20 21:41:00 +08:00
commit 3d1d4cf506
53 changed files with 7105 additions and 0 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>考试信息管理系统</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "exam-registration-admin",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.5",
+    "pinia": "^2.1.7",
+    "ant-design-vue": "^4.1.0",
+    "dayjs": "^1.11.10",
+    "axios": "^1.6.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.8"
+  }
+}
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,24 @@
+<template>
+  <a-config-provider :locale="zhCN">
+    <router-view />
+  </a-config-provider>
+</template>
+
+<script setup>
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
+</script>
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>
--- a/frontend/src/api/exam.js
+++ b/frontend/src/api/exam.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 获取考试列表
+export function getExamList(params) {
+  return request({
+    url: '/exams',
+    method: 'get',
+    params
+  })
+}
+
+// 获取考试详情
+export function getExamDetail(id) {
+  return request({
+    url: `/exams/${id}`,
+    method: 'get'
+  })
+}
+
+// 创建考试
+export function createExam(data) {
+  return request({
+    url: '/exams',
+    method: 'post',
+    data
+  })
+}
+
+// 更新考试
+export function updateExam(id, data) {
+  return request({
+    url: `/exams/${id}`,
+    method: 'put',
+    data
+  })
+}
+
+// 删除考试
+export function deleteExam(id) {
+  return request({
+    url: `/exams/${id}`,
+    method: 'delete'
+  })
+}
--- a/frontend/src/api/notice.js
+++ b/frontend/src/api/notice.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 获取通知列表
+export function getNoticeList(params) {
+  return request({
+    url: '/notices',
+    method: 'get',
+    params
+  })
+}
+
+// 获取通知详情
+export function getNoticeDetail(id) {
+  return request({
+    url: `/notices/${id}`,
+    method: 'get'
+  })
+}
+
+// 创建通知
+export function createNotice(data) {
+  return request({
+    url: '/notices',
+    method: 'post',
+    data
+  })
+}
+
+// 更新通知
+export function updateNotice(id, data) {
+  return request({
+    url: `/notices/${id}`,
+    method: 'put',
+    data
+  })
+}
+
+// 删除通知
+export function deleteNotice(id) {
+  return request({
+    url: `/notices/${id}`,
+    method: 'delete'
+  })
+}
--- a/frontend/src/api/registration.js
+++ b/frontend/src/api/registration.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+// 创建报名
+export function createRegistration(data) {
+  return request({
+    url: '/registrations',
+    method: 'post',
+    data
+  })
+}
+
+// 获取报名列表
+export function getRegistrationList(params) {
+  return request({
+    url: '/registrations',
+    method: 'get',
+    params
+  })
+}
+
+// 更新报名信息
+export function updateRegistration(id, data) {
+  return request({
+    url: `/registrations/${id}`,
+    method: 'put',
+    data
+  })
+}
+
+// 取消报名
+export function deleteRegistration(id) {
+  return request({
+    url: `/registrations/${id}`,
+    method: 'delete'
+  })
+}
+
+// 审核报名
+export function auditRegistration(id, data) {
+  return request({
+    url: `/registrations/${id}/audit`,
+    method: 'put',
+    data
+  })
+}
--- a/frontend/src/api/score.js
+++ b/frontend/src/api/score.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+// 录入成绩
+export function createScore(data) {
+  return request({
+    url: '/scores',
+    method: 'post',
+    data
+  })
+}
+
+// 批量录入成绩
+export function batchCreateScores(data) {
+  return request({
+    url: '/scores/batch',
+    method: 'post',
+    data
+  })
+}
+
+// 查询个人成绩
+export function getMyScore(examId) {
+  return request({
+    url: `/scores/exam/${examId}`,
+    method: 'get'
+  })
+}
+
+// 获取成绩列表
+export function getScoreList(params) {
+  return request({
+    url: '/scores',
+    method: 'get',
+    params
+  })
+}
+
+// 发布成绩
+export function publishScore(id) {
+  return request({
+    url: `/scores/${id}/publish`,
+    method: 'put'
+  })
+}
+
+// 删除成绩
+export function deleteScore(id) {
+  return request({
+    url: `/scores/${id}`,
+    method: 'delete'
+  })
+}
--- a/frontend/src/api/user.js
+++ b/frontend/src/api/user.js
@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+
+// 用户登录
+export function login(data) {
+  return request({
+    url: '/login',
+    method: 'post',
+    data
+  })
+}
+
+// 用户注册
+export function register(data) {
+  return request({
+    url: '/register',
+    method: 'post',
+    data
+  })
+}
+
+// 获取当前用户信息
+export function getUserInfo() {
+  return request({
+    url: '/user/info',
+    method: 'get'
+  })
+}
+
+// 更新用户信息
+export function updateUserInfo(data) {
+  return request({
+    url: '/user/info',
+    method: 'put',
+    data
+  })
+}
--- a/frontend/src/layouts/BasicLayout.vue
+++ b/frontend/src/layouts/BasicLayout.vue
@@ -0,0 +1,160 @@
+<template>
+  <a-layout class="layout">
+    <a-layout-header class="header">
+      <div class="logo">考试信息管理系统</div>
+      <a-menu theme="dark" mode="horizontal" v-model:selectedKeys="selectedKeys">
+        <a-menu-item key="dashboard">
+          <template #icon><DashboardOutlined /></template>
+          <router-link to="/dashboard">首页</router-link>
+        </a-menu-item>
+        <a-menu-item key="exam">
+          <template #icon><BookOutlined /></template>
+          <router-link to="/exam/list">考试管理</router-link>
+        </a-menu-item>
+        <a-sub-menu key="registration">
+          <template #title>报名管理</template>
+          <template #icon><FileOutlined /></template>
+          <a-menu-item key="my-registration">
+            <router-link to="/registration/my">我的报名</router-link>
+          </a-menu-item>
+          <a-menu-item key="registration-list">
+            <router-link to="/registration/list">报名列表</router-link>
+          </a-menu-item>
+        </a-sub-menu>
+        <a-menu-item key="notice">
+          <template #icon><BellOutlined /></template>
+          <router-link to="/notice/list">考试通知</router-link>
+        </a-menu-item>
+        <a-sub-menu key="score">
+          <template #title>成绩管理</template>
+          <template #icon><TrophyOutlined /></template>
+          <a-menu-item key="score-query">
+            <router-link to="/score/query">成绩查询</router-link>
+          </a-menu-item>
+          <a-menu-item key="score-manage">
+            <router-link to="/score/manage">成绩录入</router-link>
+          </a-menu-item>
+        </a-sub-menu>
+        <a-menu-item key="profile">
+          <template #icon><UserOutlined /></template>
+          <router-link to="/user/profile">个人中心</router-link>
+        </a-menu-item>
+      </a-menu>
+      <div class="user-info">
+        <a-dropdown>
+          <span class="ant-dropdown-link" @click.prevent>
+            {{ userInfo?.username }}
+            <DownOutlined />
+          </span>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="logout" @click="handleLogout">退出登录</a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </div>
+    </a-layout-header>
+    <a-layout-content class="content">
+      <router-view />
+    </a-layout-content>
+    <a-layout-footer class="footer">
+      考试信息管理系统 ©2024 Created by Exam Team
+    </a-layout-footer>
+  </a-layout>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { message } from 'ant-design-vue'
+import {
+  DashboardOutlined,
+  BookOutlined,
+  FileOutlined,
+  BellOutlined,
+  TrophyOutlined,
+  UserOutlined,
+  DownOutlined
+} from '@ant-design/icons-vue'
+import { getUserInfo } from '@/api/user'
+
+const router = useRouter()
+const route = useRoute()
+const selectedKeys = ref([])
+const userInfo = ref(null)
+
+onMounted(async () => {
+  try {
+    userInfo.value = await getUserInfo()
+  } catch (error) {
+    console.error(error)
+  }
+})
+
+// 根据当前路由更新菜单选中状态
+const updateSelectedKeys = () => {
+  const path = route.path
+  if (path.includes('/exam')) {
+    selectedKeys.value = ['exam']
+  } else if (path.includes('/registration')) {
+    selectedKeys.value = ['registration']
+  } else if (path.includes('/notice')) {
+    selectedKeys.value = ['notice']
+  } else if (path.includes('/score')) {
+    selectedKeys.value = ['score']
+  } else if (path.includes('/user')) {
+    selectedKeys.value = ['profile']
+  } else {
+    selectedKeys.value = ['dashboard']
+  }
+}
+
+updateSelectedKeys()
+
+const handleLogout = () => {
+  localStorage.removeItem('token')
+  message.success('已退出登录')
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+.layout {
+  min-height: 100vh;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+}
+
+.logo {
+  color: white;
+  font-size: 20px;
+  font-weight: bold;
+  margin-right: 40px;
+}
+
+.content {
+  margin: 24px 16px;
+  padding: 24px;
+  background: #fff;
+  min-height: 280px;
+}
+
+.user-info {
+  color: white;
+}
+
+.ant-dropdown-link {
+  color: white;
+  cursor: pointer;
+}
+
+.footer {
+  text-align: center;
+  color: rgba(255, 255, 255, 0.65);
+}
+</style>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import Antd from 'ant-design-vue'
+import App from './App.vue'
+import router from './router'
+import 'ant-design-vue/dist/reset.css'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(pinia)
+app.use(router)
+app.use(Antd)
+
+app.mount('#app')
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -0,0 +1,85 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/Login.vue')
+  },
+  {
+    path: '/',
+    redirect: '/dashboard'
+  },
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: () => import('@/layouts/BasicLayout.vue'),
+    children: [
+      {
+        path: '',
+        name: 'DashboardHome',
+        component: () => import('@/views/Dashboard.vue')
+      },
+      {
+        path: '/exam/list',
+        name: 'ExamList',
+        component: () => import('@/views/exam/ExamList.vue')
+      },
+      {
+        path: '/exam/detail/:id',
+        name: 'ExamDetail',
+        component: () => import('@/views/exam/ExamDetail.vue')
+      },
+      {
+        path: '/registration/list',
+        name: 'RegistrationList',
+        component: () => import('@/views/registration/RegistrationList.vue')
+      },
+      {
+        path: '/registration/my',
+        name: 'MyRegistration',
+        component: () => import('@/views/registration/MyRegistration.vue')
+      },
+      {
+        path: '/notice/list',
+        name: 'NoticeList',
+        component: () => import('@/views/notice/NoticeList.vue')
+      },
+      {
+        path: '/score/query',
+        name: 'ScoreQuery',
+        component: () => import('@/views/score/ScoreQuery.vue')
+      },
+      {
+        path: '/score/manage',
+        name: 'ScoreManage',
+        component: () => import('@/views/score/ScoreManage.vue')
+      },
+      {
+        path: '/user/profile',
+        name: 'UserProfile',
+        component: () => import('@/views/user/UserProfile.vue')
+      }
+    ]
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+// 路由守卫
+router.beforeEach((to, from, next) => {
+  const token = localStorage.getItem('token')
+  
+  if (to.path !== '/login' && !token) {
+    next('/login')
+  } else if (to.path === '/login' && token) {
+    next('/')
+  } else {
+    next()
+  }
+})
+
+export default router
--- a/frontend/src/utils/request.js
+++ b/frontend/src/utils/request.js
@@ -0,0 +1,46 @@
+import axios from 'axios'
+import { message } from 'ant-design-vue'
+
+const request = axios.create({
+  baseURL: '/api',
+  timeout: 10000
+})
+
+// 请求拦截器
+request.interceptors.request.use(
+  config => {
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+request.interceptors.response.use(
+  response => {
+    const res = response.data
+    if (res.code !== 200) {
+      message.error(res.msg || '请求失败')
+      
+      // 未授权，跳转登录页
+      if (res.code === 401) {
+        localStorage.removeItem('token')
+        window.location.href = '/login'
+      }
+      
+      return Promise.reject(new Error(res.msg || '请求失败'))
+    }
+    return res.data
+  },
+  error => {
+    message.error(error.message || '网络错误')
+    return Promise.reject(error)
+  }
+)
+
+export default request
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="dashboard">
+    <a-row :gutter="[24, 24]">
+      <a-col :span="6">
+        <a-statistic title="考试总数" :value="examCount" />
+      </a-col>
+      <a-col :span="6">
+        <a-statistic title="报名总数" :value="registrationCount" />
+      </a-col>
+      <a-col :span="6">
+        <a-statistic title="通知总数" :value="noticeCount" />
+      </a-col>
+      <a-col :span="6">
+        <a-statistic title="我的成绩" :value="scoreCount" />
+      </a-col>
+    </a-row>
+
+    <a-divider />
+
+    <a-row :gutter="24">
+      <a-col :span="12">
+        <a-card title="最新考试" :bordered="false">
+          <a-list
+            item-layout="horizontal"
+            :data-source="recentExams"
+          >
+            <template #renderItem="{ item }">
+              <a-list-item>
+                <a-list-item-meta
+                  :description="item.start_time"
+                >
+                  <template #title>
+                    <a>{{ item.title }}</a>
+                  </template>
+                </a-list-item-meta>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-card>
+      </a-col>
+      <a-col :span="12">
+        <a-card title="最新通知" :bordered="false">
+          <a-list
+            item-layout="horizontal"
+            :data-source="recentNotices"
+          >
+            <template #renderItem="{ item }">
+              <a-list-item>
+                <a-list-item-meta
+                  :description="item.publish_time"
+                >
+                  <template #title>
+                    <a>{{ item.title }}</a>
+                  </template>
+                </a-list-item-meta>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { getExamList } from '@/api/exam'
+import { getNoticeList } from '@/api/notice'
+import { getRegistrationList } from '@/api/registration'
+import { getScoreList } from '@/api/score'
+
+const examCount = ref(0)
+const registrationCount = ref(0)
+const noticeCount = ref(0)
+const scoreCount = ref(0)
+
+const recentExams = ref([])
+const recentNotices = ref([])
+
+const fetchDashboardData = async () => {
+  try {
+    const [examRes, noticeRes, regRes, scoreRes] = await Promise.all([
+      getExamList({ page: 1, pageSize: 5 }),
+      getNoticeList({ page: 1, pageSize: 5 }),
+      getRegistrationList({ page: 1, pageSize: 1 }),
+      getScoreList({ page: 1, pageSize: 1 })
+    ])
+    
+    examCount.value = examRes.total || 0
+    noticeCount.value = noticeRes.total || 0
+    registrationCount.value = regRes.total || 0
+    scoreCount.value = scoreRes.total || 0
+    
+    recentExams.value = examRes.list || []
+    recentNotices.value = noticeRes.list || []
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+onMounted(() => {
+  fetchDashboardData()
+})
+</script>
+
+<style scoped>
+.dashboard {
+  padding: 24px;
+}
+</style>
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="login-container">
+    <a-card class="login-card" :bodyStyle="{ padding: '40px' }">
+      <h1 class="login-title">考试信息管理系统</h1>
+      <a-form
+        :model="formState"
+        @finish="handleLogin"
+        layout="vertical"
+      >
+        <a-form-item
+          label="用户名"
+          name="username"
+          :rules="[{ required: true, message: '请输入用户名' }]"
+        >
+          <a-input v-model:value="formState.username" placeholder="请输入用户名" />
+        </a-form-item>
+
+        <a-form-item
+          label="密码"
+          name="password"
+          :rules="[{ required: true, message: '请输入密码' }]"
+        >
+          <a-input-password v-model:value="formState.password" placeholder="请输入密码" />
+        </a-form-item>
+
+        <a-form-item>
+          <a-button type="primary" htmlType="submit" block size="large" :loading="loading">
+            登录
+          </a-button>
+        </a-form-item>
+
+        <div class="register-link">
+          还没有账号？<router-link to="/register">立即注册</router-link>
+        </div>
+      </a-form>
+    </a-card>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
+import { login } from '@/api/user'
+
+const router = useRouter()
+const loading = ref(false)
+
+const formState = reactive({
+  username: '',
+  password: ''
+})
+
+const handleLogin = async () => {
+  loading.value = true
+  try {
+    const res = await login(formState)
+    localStorage.setItem('token', res.token)
+    message.success('登录成功')
+    router.push('/')
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.login-card {
+  width: 400px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.login-title {
+  text-align: center;
+  margin-bottom: 30px;
+  color: #1890ff;
+  font-size: 24px;
+}
+
+.register-link {
+  text-align: center;
+  margin-top: 16px;
+}
+</style>
--- a/frontend/src/views/Register.vue
+++ b/frontend/src/views/Register.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="register-container">
+    <a-card class="register-card" :bodyStyle="{ padding: '40px' }">
+      <h1 class="register-title">用户注册</h1>
+      <a-form
+        :model="formState"
+        @finish="handleRegister"
+        layout="vertical"
+      >
+        <a-form-item
+          label="用户名"
+          name="username"
+          :rules="[
+            { required: true, message: '请输入用户名' },
+            { min: 3, max: 20, message: '用户名长度在 3-20 个字符' }
+          ]"
+        >
+          <a-input v-model:value="formState.username" placeholder="请输入用户名" />
+        </a-form-item>
+
+        <a-form-item
+          label="密码"
+          name="password"
+          :rules="[
+            { required: true, message: '请输入密码' },
+            { min: 6, message: '密码长度至少 6 位' }
+          ]"
+        >
+          <a-input-password v-model:value="formState.password" placeholder="请输入密码" />
+        </a-form-item>
+
+        <a-form-item
+          label="确认密码"
+          name="confirmPassword"
+          :rules="[
+            { required: true, message: '请确认密码' },
+            { validator: validateConfirmPassword }
+          ]"
+        >
+          <a-input-password v-model:value="formState.confirmPassword" placeholder="请再次输入密码" />
+        </a-form-item>
+
+        <a-form-item label="真实姓名">
+          <a-input v-model:value="formState.realName" placeholder="请输入真实姓名" />
+        </a-form-item>
+
+        <a-form-item label="身份证号">
+          <a-input v-model:value="formState.idCard" placeholder="请输入身份证号" />
+        </a-form-item>
+
+        <a-form-item label="邮箱">
+          <a-input v-model:value="formState.email" placeholder="请输入邮箱" />
+        </a-form-item>
+
+        <a-form-item label="手机号">
+          <a-input v-model:value="formState.phone" placeholder="请输入手机号" />
+        </a-form-item>
+
+        <a-form-item>
+          <a-button type="primary" htmlType="submit" block size="large" :loading="loading">
+            注册
+          </a-button>
+        </a-form-item>
+
+        <div class="login-link">
+          已有账号？<router-link to="/login">立即登录</router-link>
+        </div>
+      </a-form>
+    </a-card>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
+import { register } from '@/api/user'
+
+const router = useRouter()
+const loading = ref(false)
+
+const formState = reactive({
+  username: '',
+  password: '',
+  confirmPassword: '',
+  realName: '',
+  idCard: '',
+  email: '',
+  phone: ''
+})
+
+const validateConfirmPassword = ({ formData }) => {
+  if (formData.password !== formData.confirmPassword) {
+    return Promise.reject('两次输入的密码不一致')
+  }
+  return Promise.resolve()
+}
+
+const handleRegister = async () => {
+  loading.value = true
+  try {
+    const { confirmPassword, ...registerData } = formState
+    await register(registerData)
+    message.success('注册成功，请登录')
+    router.push('/login')
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.register-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.register-card {
+  width: 450px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.register-title {
+  text-align: center;
+  margin-bottom: 30px;
+  color: #1890ff;
+  font-size: 24px;
+}
+
+.login-link {
+  text-align: center;
+  margin-top: 16px;
+}
+</style>
--- a/frontend/src/views/exam/ExamDetail.vue
+++ b/frontend/src/views/exam/ExamDetail.vue
@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <a-page-header 
+      title="考试详情" 
+      @back="$router.back()"
+    />
+    
+    <a-card :loading="loading">
+      <a-descriptions bordered :column="2">
+        <a-descriptions-item label="考试名称">{{ exam.title }}</a-descriptions-item>
+        <a-descriptions-item label="考试代码">{{ exam.code }}</a-descriptions-item>
+        <a-descriptions-item label="考试科目">{{ exam.subject || '-' }}</a-descriptions-item>
+        <a-descriptions-item label="考试地点">{{ exam.exam_location || '-' }}</a-descriptions-item>
+        <a-descriptions-item label="考试费用">{{ exam.exam_fee }} 元</a-descriptions-item>
+        <a-descriptions-item label="最大人数">{{ exam.max_candidates === 0 ? '不限制' : exam.max_candidates }}</a-descriptions-item>
+        <a-descriptions-item label="报名开始时间">{{ formatTime(exam.registration_start) }}</a-descriptions-item>
+        <a-descriptions-item label="报名截止时间">{{ formatTime(exam.registration_end) }}</a-descriptions-item>
+        <a-descriptions-item label="考试开始时间">{{ formatTime(exam.start_time) }}</a-descriptions-item>
+        <a-descriptions-item label="考试结束时间">{{ formatTime(exam.end_time) }}</a-descriptions-item>
+        <a-descriptions-item label="状态">
+          <a-badge
+            :text="statusText(exam.status)"
+            :color="statusColor(exam.status)"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item label="创建时间">{{ formatTime(exam.created_at) }}</a-descriptions-item>
+        <a-descriptions-item label="考试描述" :span="2">
+          <div style="white-space: pre-wrap">{{ exam.description || '-' }}</div>
+        </a-descriptions-item>
+      </a-descriptions>
+      
+      <a-divider />
+      
+      <div class="actions">
+        <a-button type="primary" size="large" @click="handleRegister" v-if="canRegister">
+          立即报名
+        </a-button>
+        <a-button size="large" @click="$router.push('/registration/my')">
+          我的报名
+        </a-button>
+      </div>
+    </a-card>
+    
+    <!-- 相关通知 -->
+    <a-card title="相关通知" style="margin-top: 24px">
+      <a-list
+        item-layout="horizontal"
+        :data-source="noticeList"
+      >
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <a-list-item-meta
+              :description="item.publish_time"
+            >
+              <template #title>
+                <a @click="viewNotice(item)">{{ item.title }}</a>
+              </template>
+            </a-list-item-meta>
+            <a-badge
+              :text="noticeTypeText(item.type)"
+              :color="noticeTypeColor(item.type)"
+            />
+          </a-list-item>
+        </template>
+      </a-list>
+    </a-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
+import { getExamDetail } from '@/api/exam'
+import { getNoticeList } from '@/api/notice'
+import { createRegistration } from '@/api/registration'
+import dayjs from 'dayjs'
+
+const route = useRoute()
+const router = useRouter()
+const loading = ref(false)
+
+const exam = ref({})
+const noticeList = ref([])
+const canRegister = ref(false)
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    exam.value = await getExamDetail(route.params.id)
+    
+    // 判断是否可以报名
+    const now = dayjs()
+    const regStart = dayjs(exam.value.registration_start)
+    const regEnd = dayjs(exam.value.registration_end)
+    
+    canRegister.value = now.isAfter(regStart) && now.isBefore(regEnd) && exam.value.status === 1
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const fetchNotices = async () => {
+  try {
+    const res = await getNoticeList({
+      exam_id: route.params.id,
+      page: 1,
+      pageSize: 5
+    })
+    noticeList.value = res.list || []
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const handleRegister = async () => {
+  try {
+    await createRegistration({
+      exam_id: exam.value.id,
+      remark: ''
+    })
+    message.success('报名成功，请等待审核')
+    router.push('/registration/my')
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const viewNotice = (notice) => {
+  // TODO: 查看通知详情
+  message.info(`查看通知：${notice.title}`)
+}
+
+const formatTime = (time) => {
+  return time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '-'
+}
+
+const statusText = (status) => {
+  const map = { 1: '未开始', 2: '进行中', 3: '已结束' }
+  return map[status] || '未知'
+}
+
+const statusColor = (status) => {
+  const map = { 1: 'blue', 2: 'green', 3: 'gray' }
+  return map[status] || 'default'
+}
+
+const noticeTypeText = (type) => {
+  const map = { 1: '普通', 2: '重要', 3: '紧急' }
+  return map[type] || '未知'
+}
+
+const noticeTypeColor = (type) => {
+  const map = { 1: 'blue', 2: 'orange', 3: 'red' }
+  return map[type] || 'default'
+}
+
+onMounted(() => {
+  fetchData()
+  fetchNotices()
+})
+</script>
+
+<style scoped>
+.actions {
+  text-align: center;
+  padding: 24px 0;
+}
+
+.actions button {
+  margin: 0 8px;
+}
+</style>
--- a/frontend/src/views/exam/ExamList.vue
+++ b/frontend/src/views/exam/ExamList.vue
@@ -0,0 +1,256 @@
+<template>
+  <div>
+    <a-page-header title="考试列表" />
+    
+    <a-card>
+      <div class="table-operator">
+        <a-button type="primary" @click="handleCreate">
+          <template #icon><PlusOutlined /></template>
+          发布考试
+        </a-button>
+      </div>
+
+      <a-table
+        :columns="columns"
+        :data-source="dataList"
+        :loading="loading"
+        :pagination="pagination"
+        @change="handleTableChange"
+        rowKey="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'status'">
+            <a-badge
+              :text="statusText(record.status)"
+              :color="statusColor(record.status)"
+            />
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a-button type="link" size="small" @click="handleView(record)">详情</a-button>
+              <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+              <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 新增/编辑对话框 -->
+    <a-modal
+      :visible="modalVisible"
+      :title="modalTitle"
+      width="800px"
+      @ok="handleSubmit"
+      @cancel="modalVisible = false"
+      :confirmLoading="submitting"
+    >
+      <a-form :model="formState" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
+        <a-form-item label="考试名称" required>
+          <a-input v-model:value="formState.title" placeholder="请输入考试名称" />
+        </a-form-item>
+        <a-form-item label="考试代码" required>
+          <a-input v-model:value="formState.code" placeholder="请输入考试代码" />
+        </a-form-item>
+        <a-form-item label="考试科目">
+          <a-input v-model:value="formState.subject" placeholder="请输入考试科目" />
+        </a-form-item>
+        <a-form-item label="考试地点">
+          <a-input v-model:value="formState.examLocation" placeholder="请输入考试地点" />
+        </a-form-item>
+        <a-form-item label="考试费用">
+          <a-input-number v-model:value="formState.examFee" :min="0" :step="0.01" style="width: 100%" />
+        </a-form-item>
+        <a-form-item label="最大人数">
+          <a-input-number v-model:value="formState.maxCandidates" :min="0" style="width: 100%" />
+        </a-form-item>
+        <a-form-item label="报名开始时间" required>
+          <a-date-picker v-model:value="formState.registrationStart" showTime style="width: 100%" />
+        </a-form-item>
+        <a-form-item label="报名截止时间" required>
+          <a-date-picker v-model:value="formState.registrationEnd" showTime style="width: 100%" />
+        </a-form-item>
+        <a-form-item label="考试开始时间" required>
+          <a-date-picker v-model:value="formState.startTime" showTime style="width: 100%" />
+        </a-form-item>
+        <a-form-item label="考试结束时间" required>
+          <a-date-picker v-model:value="formState.endTime" showTime style="width: 100%" />
+        </a-form-item>
+        <a-form-item label="考试描述">
+          <a-textarea v-model:value="formState.description" :rows="4" placeholder="请输入考试描述" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { PlusOutlined } from '@ant-design/icons-vue'
+import { getExamList, createExam, updateExam, deleteExam } from '@/api/exam'
+import dayjs from 'dayjs'
+
+const loading = ref(false)
+const submitting = ref(false)
+const modalVisible = ref(false)
+const modalTitle = ref('发布考试')
+const editingId = ref(null)
+
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '考试名称', dataIndex: 'title', ellipsis: true },
+  { title: '考试代码', dataIndex: 'code', width: 120 },
+  { title: '考试科目', dataIndex: 'subject', width: 100 },
+  { title: '考试地点', dataIndex: 'examLocation', width: 150, ellipsis: true },
+  { title: '考试费用', dataIndex: 'examFee', width: 100 },
+  { title: '状态', dataIndex: 'status', width: 100 },
+  { title: '操作', dataIndex: 'action', width: 200, fixed: 'right' }
+]
+
+const dataList = ref([])
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showTotal: (total) => `共 ${total} 条`
+})
+
+const formState = reactive({
+  title: '',
+  code: '',
+  subject: '',
+  examLocation: '',
+  examFee: 0,
+  maxCandidates: 0,
+  registrationStart: null,
+  registrationEnd: null,
+  startTime: null,
+  endTime: null,
+  description: ''
+})
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const res = await getExamList({
+      page: pagination.current,
+      pageSize: pagination.pageSize
+    })
+    dataList.value = res.list || []
+    pagination.total = res.total || 0
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleTableChange = (pag) => {
+  pagination.current = pag.current
+  pagination.pageSize = pag.pageSize
+  fetchData()
+}
+
+const handleCreate = () => {
+  modalTitle.value = '发布考试'
+  editingId.value = null
+  resetForm()
+  modalVisible.value = true
+}
+
+const handleEdit = (record) => {
+  modalTitle.value = '编辑考试'
+  editingId.value = record.id
+  
+  Object.keys(formState).forEach(key => {
+    if (key.includes('Time') || key.includes('Start') || key.includes('End')) {
+      formState[key] = record[key] ? dayjs(record[key]) : null
+    } else {
+      formState[key] = record[key] || (key === 'examFee' || key === 'maxCandidates' ? 0 : '')
+    }
+  })
+  
+  modalVisible.value = true
+}
+
+const handleView = (record) => {
+  // TODO: 查看详情
+  message.info(`查看考试详情：${record.title}`)
+}
+
+const handleDelete = (record) => {
+  $confirm({
+    title: '确认删除',
+    content: `确定要删除考试"${record.title}"吗？`,
+    onOk: async () => {
+      try {
+        await deleteExam(record.id)
+        message.success('删除成功')
+        fetchData()
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  })
+}
+
+const handleSubmit = async () => {
+  submitting.value = true
+  try {
+    const data = { ...formState }
+    
+    // 转换日期格式
+    Object.keys(data).forEach(key => {
+      if (data[key] && dayjs.isDayjs(data[key])) {
+        data[key] = data[key].format('YYYY-MM-DD HH:mm:ss')
+      }
+    })
+    
+    if (editingId.value) {
+      await updateExam(editingId.value, data)
+      message.success('更新成功')
+    } else {
+      await createExam(data)
+      message.success('创建成功')
+    }
+    
+    modalVisible.value = false
+    fetchData()
+  } catch (error) {
+    console.error(error)
+  } finally {
+    submitting.value = false
+  }
+}
+
+const resetForm = () => {
+  Object.keys(formState).forEach(key => {
+    formState[key] = key === 'examFee' || key === 'maxCandidates' ? 0 : ''
+    if (key.includes('Time') || key.includes('Start') || key.includes('End')) {
+      formState[key] = null
+    }
+  })
+}
+
+const statusText = (status) => {
+  const map = { 1: '未开始', 2: '进行中', 3: '已结束' }
+  return map[status] || '未知'
+}
+
+const statusColor = (status) => {
+  const map = { 1: 'blue', 2: 'green', 3: 'gray' }
+  return map[status] || 'default'
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.table-operator {
+  margin-bottom: 16px;
+}
+</style>
--- a/frontend/src/views/notice/NoticeList.vue
+++ b/frontend/src/views/notice/NoticeList.vue
@@ -0,0 +1,255 @@
+<template>
+  <div>
+    <a-page-header title="考试通知" />
+    
+    <a-card>
+      <div class="table-operator">
+        <a-button type="primary" @click="handleCreate">
+          <template #icon><PlusOutlined /></template>
+          发布通知
+        </a-button>
+      </div>
+
+      <a-table
+        :columns="columns"
+        :data-source="dataList"
+        :loading="loading"
+        :pagination="pagination"
+        @change="handleTableChange"
+        rowKey="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'type'">
+            <a-badge
+              :text="noticeTypeText(record.type)"
+              :color="noticeTypeColor(record.type)"
+            />
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a-button type="link" size="small" @click="handleView(record)">详情</a-button>
+              <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+              <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 新增/编辑对话框 -->
+    <a-modal
+      :visible="modalVisible"
+      :title="modalTitle"
+      width="700px"
+      @ok="handleSubmit"
+      @cancel="modalVisible = false"
+      :confirmLoading="submitting"
+    >
+      <a-form :model="formState" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
+        <a-form-item label="通知标题" required>
+          <a-input v-model:value="formState.title" placeholder="请输入通知标题" />
+        </a-form-item>
+        <a-form-item label="关联考试" required>
+          <a-select v-model:value="formState.exam_id" placeholder="请选择关联考试">
+            <a-select-option v-for="exam in examList" :key="exam.id" :value="exam.id">
+              {{ exam.title }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="通知类型" required>
+          <a-select v-model:value="formState.type" placeholder="请选择通知类型">
+            <a-select-option :value="1">普通通知</a-select-option>
+            <a-select-option :value="2">重要通知</a-select-option>
+            <a-select-option :value="3">紧急通知</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="通知内容" required>
+          <a-textarea v-model:value="formState.content" :rows="8" placeholder="请输入通知内容" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- 详情对话框 -->
+    <a-modal
+      :visible="detailModalVisible"
+      :title="currentNotice.title"
+      @cancel="detailModalVisible = false"
+      :footer="null"
+    >
+      <a-descriptions bordered :column="1">
+        <a-descriptions-item label="关联考试">{{ currentNotice.exam?.title }}</a-descriptions-item>
+        <a-descriptions-item label="通知类型">
+          <a-badge
+            :text="noticeTypeText(currentNotice.type)"
+            :color="noticeTypeColor(currentNotice.type)"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item label="发布时间">{{ currentNotice.publish_time }}</a-descriptions-item>
+        <a-descriptions-item label="通知内容">
+          <div style="white-space: pre-wrap">{{ currentNotice.content }}</div>
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { PlusOutlined } from '@ant-design/icons-vue'
+import { getNoticeList, createNotice, updateNotice, deleteNotice } from '@/api/notice'
+import { getExamList } from '@/api/exam'
+
+const loading = ref(false)
+const submitting = ref(false)
+const modalVisible = ref(false)
+const detailModalVisible = ref(false)
+const modalTitle = ref('发布通知')
+const editingId = ref(null)
+
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '通知标题', dataIndex: 'title', ellipsis: true },
+  { title: '关联考试', dataIndex: ['exam', 'title'], ellipsis: true },
+  { title: '通知类型', dataIndex: 'type', width: 100 },
+  { title: '发布时间', dataIndex: 'publish_time', width: 180 },
+  { title: '操作', dataIndex: 'action', width: 200, fixed: 'right' }
+]
+
+const dataList = ref([])
+const examList = ref([])
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showTotal: (total) => `共 ${total} 条`
+})
+
+const formState = reactive({
+  title: '',
+  exam_id: null,
+  type: 1,
+  content: ''
+})
+
+const currentNotice = ref({})
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const res = await getNoticeList({
+      page: pagination.current,
+      pageSize: pagination.pageSize
+    })
+    dataList.value = res.list || []
+    pagination.total = res.total || 0
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const fetchExamList = async () => {
+  try {
+    const res = await getExamList({ page: 1, pageSize: 100 })
+    examList.value = res.list || []
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const handleTableChange = (pag) => {
+  pagination.current = pag.current
+  pagination.pageSize = pag.pageSize
+  fetchData()
+}
+
+const handleCreate = () => {
+  modalTitle.value = '发布通知'
+  editingId.value = null
+  resetForm()
+  modalVisible.value = true
+}
+
+const handleEdit = (record) => {
+  modalTitle.value = '编辑通知'
+  editingId.value = record.id
+  
+  Object.keys(formState).forEach(key => {
+    formState[key] = record[key] !== undefined ? record[key] : null
+  })
+  
+  modalVisible.value = true
+}
+
+const handleView = (record) => {
+  currentNotice.value = record
+  detailModalVisible.value = true
+}
+
+const handleDelete = (record) => {
+  $confirm({
+    title: '确认删除',
+    content: `确定要删除通知"${record.title}"吗？`,
+    onOk: async () => {
+      try {
+        await deleteNotice(record.id)
+        message.success('删除成功')
+        fetchData()
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  })
+}
+
+const handleSubmit = async () => {
+  submitting.value = true
+  try {
+    if (editingId.value) {
+      await updateNotice(editingId.value, formState)
+      message.success('更新成功')
+    } else {
+      await createNotice(formState)
+      message.success('创建成功')
+    }
+    
+    modalVisible.value = false
+    fetchData()
+  } catch (error) {
+    console.error(error)
+  } finally {
+    submitting.value = false
+  }
+}
+
+const resetForm = () => {
+  formState.title = ''
+  formState.exam_id = null
+  formState.type = 1
+  formState.content = ''
+}
+
+const noticeTypeText = (type) => {
+  const map = { 1: '普通', 2: '重要', 3: '紧急' }
+  return map[type] || '未知'
+}
+
+const noticeTypeColor = (type) => {
+  const map = { 1: 'blue', 2: 'orange', 3: 'red' }
+  return map[type] || 'default'
+}
+
+onMounted(() => {
+  fetchData()
+  fetchExamList()
+})
+</script>
+
+<style scoped>
+.table-operator {
+  margin-bottom: 16px;
+}
+</style>
--- a/frontend/src/views/registration/MyRegistration.vue
+++ b/frontend/src/views/registration/MyRegistration.vue
@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <a-page-header title="我的报名" />
+    
+    <a-card>
+      <a-table
+        :columns="columns"
+        :data-source="dataList"
+        :loading="loading"
+        :pagination="pagination"
+        @change="handleTableChange"
+        rowKey="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'status'">
+            <a-badge
+              :text="registrationStatusText(record.status)"
+              :color="registrationStatusColor(record.status)"
+            />
+          </template>
+          <template v-if="column.key === 'payment_status'">
+            <a-badge
+              :text="record.payment_status === 1 ? '已支付' : '未支付'"
+              :color="record.payment_status === 1 ? 'green' : 'red'"
+            />
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a-button type="link" size="small" @click="handleViewDetail(record)">详情</a-button>
+              <a-button 
+                v-if="record.status === 0" 
+                type="link" 
+                size="small" 
+                danger 
+                @click="handleCancel(record)"
+              >
+                取消
+              </a-button>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 报名对话框 -->
+    <a-modal
+      :visible="modalVisible"
+      :title="'报名详情'"
+      width="700px"
+      @cancel="modalVisible = false"
+      :footer="null"
+    >
+      <a-descriptions bordered :column="2">
+        <a-descriptions-item label="考试名称">{{ currentRecord.exam?.title }}</a-descriptions-item>
+        <a-descriptions-item label="考试代码">{{ currentRecord.exam?.code }}</a-descriptions-item>
+        <a-descriptions-item label="准考证号">{{ currentRecord.ticket_number || '待生成' }}</a-descriptions-item>
+        <a-descriptions-item label="考场座位">{{ currentRecord.exam_seat || '待安排' }}</a-descriptions-item>
+        <a-descriptions-item label="报名状态">
+          <a-badge
+            :text="registrationStatusText(currentRecord.status)"
+            :color="registrationStatusColor(currentRecord.status)"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item label="支付状态">
+          <a-badge
+            :text="currentRecord.payment_status === 1 ? '已支付' : '未支付'"
+            :color="currentRecord.payment_status === 1 ? 'green' : 'red'"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item label="审核意见" :span="2">{{ currentRecord.audit_comment || '-' }}</a-descriptions-item>
+        <a-descriptions-item label="备注" :span="2">{{ currentRecord.remark || '-' }}</a-descriptions-item>
+      </a-descriptions>
+      
+      <div class="ticket-actions" v-if="currentRecord.status === 1 && currentRecord.ticket_number">
+        <a-button type="primary" block @click="handleDownloadTicket">
+          <template #icon><DownloadOutlined /></template>
+          下载准考证
+        </a-button>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { DownloadOutlined } from '@ant-design/icons-vue'
+import { getRegistrationList, deleteRegistration } from '@/api/registration'
+
+const loading = ref(false)
+const modalVisible = ref(false)
+const currentRecord = ref({})
+
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '考试名称', dataIndex: ['exam', 'title'], ellipsis: true },
+  { title: '考试代码', dataIndex: ['exam', 'code'], width: 120 },
+  { title: '准考证号', dataIndex: 'ticket_number', width: 150 },
+  { title: '考场座位', dataIndex: 'exam_seat', width: 100 },
+  { title: '报名状态', dataIndex: 'status', width: 100 },
+  { title: '支付状态', dataIndex: 'payment_status', width: 100 },
+  { title: '操作', dataIndex: 'action', width: 150, fixed: 'right' }
+]
+
+const dataList = ref([])
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showTotal: (total) => `共 ${total} 条`
+})
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const res = await getRegistrationList({
+      page: pagination.current,
+      pageSize: pagination.pageSize
+    })
+    dataList.value = res.list || []
+    pagination.total = res.total || 0
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleTableChange = (pag) => {
+  pagination.current = pag.current
+  pagination.pageSize = pag.pageSize
+  fetchData()
+}
+
+const handleViewDetail = (record) => {
+  currentRecord.value = record
+  modalVisible.value = true
+}
+
+const handleCancel = (record) => {
+  $confirm({
+    title: '确认取消',
+    content: `确定要取消这次报名吗？`,
+    onOk: async () => {
+      try {
+        await deleteRegistration(record.id)
+        message.success('取消成功')
+        fetchData()
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  })
+}
+
+const handleDownloadTicket = () => {
+  // TODO: 实现准考证下载功能
+  message.info(`下载准考证：${currentRecord.value.ticket_number}`)
+}
+
+const registrationStatusText = (status) => {
+  const map = { 0: '待审核', 1: '已通过', 2: '已拒绝', 3: '已取消' }
+  return map[status] || '未知'
+}
+
+const registrationStatusColor = (status) => {
+  const map = { 0: 'orange', 1: 'green', 2: 'red', 3: 'gray' }
+  return map[status] || 'default'
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.ticket-actions {
+  margin-top: 24px;
+}
+</style>
--- a/frontend/src/views/registration/RegistrationList.vue
+++ b/frontend/src/views/registration/RegistrationList.vue
@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <a-page-header title="报名列表" />
+    
+    <a-card>
+      <a-form layout="inline" :model="searchForm">
+        <a-form-item label="考试 ID">
+          <a-input-number v-model:value="searchForm.examId" placeholder="请输入考试 ID" style="width: 150px" />
+        </a-form-item>
+        <a-form-item label="审核状态">
+          <a-select v-model:value="searchForm.status" placeholder="请选择状态" style="width: 120px" allowClear>
+            <a-select-option :value="0">待审核</a-select-option>
+            <a-select-option :value="1">已通过</a-select-option>
+            <a-select-option :value="2">已拒绝</a-select-option>
+            <a-select-option :value="3">已取消</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item>
+          <a-button type="primary" @click="handleSearch">查询</a-button>
+          <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
+        </a-form-item>
+      </a-form>
+
+      <a-divider />
+
+      <a-table
+        :columns="columns"
+        :data-source="dataList"
+        :loading="loading"
+        :pagination="pagination"
+        @change="handleTableChange"
+        rowKey="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'status'">
+            <a-badge
+              :text="registrationStatusText(record.status)"
+              :color="registrationStatusColor(record.status)"
+            />
+          </template>
+          <template v-if="column.key === 'payment_status'">
+            <a-badge
+              :text="record.payment_status === 1 ? '已支付' : '未支付'"
+              :color="record.payment_status === 1 ? 'green' : 'red'"
+            />
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a-button type="link" size="small" @click="handleView(record)">详情</a-button>
+              <a-button 
+                v-if="record.status === 0" 
+                type="link" 
+                size="small" 
+                @click="handleAudit(record, 1)"
+              >
+                通过
+              </a-button>
+              <a-button 
+                v-if="record.status === 0" 
+                type="link" 
+                size="small" 
+                danger 
+                @click="handleAudit(record, 2)"
+              >
+                拒绝
+              </a-button>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 审核对话框 -->
+    <a-modal
+      :visible="auditModalVisible"
+      :title="'审核报名'"
+      @ok="handleAuditSubmit"
+      @cancel="auditModalVisible = false"
+      :confirmLoading="auditing"
+    >
+      <a-form :model="auditForm" layout="vertical">
+        <a-form-item label="审核意见">
+          <a-textarea 
+            v-model:value="auditForm.comment" 
+            :rows="4" 
+            placeholder="请输入审核意见" 
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { getRegistrationList, auditRegistration } from '@/api/registration'
+
+const loading = ref(false)
+const auditing = ref(false)
+const auditModalVisible = ref(false)
+const currentRegId = ref(null)
+
+const searchForm = reactive({
+  examId: null,
+  status: null
+})
+
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '用户 ID', dataIndex: 'user_id', width: 100 },
+  { title: '考试 ID', dataIndex: 'exam_id', width: 100 },
+  { title: '准考证号', dataIndex: 'ticket_number', width: 150 },
+  { title: '考场座位', dataIndex: 'exam_seat', width: 100 },
+  { title: '报名状态', dataIndex: 'status', width: 100 },
+  { title: '支付状态', dataIndex: 'payment_status', width: 100 },
+  { title: '操作', dataIndex: 'action', width: 200, fixed: 'right' }
+]
+
+const dataList = ref([])
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showTotal: (total) => `共 ${total} 条`
+})
+
+const auditForm = reactive({
+  comment: ''
+})
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const params = {
+      page: pagination.current,
+      pageSize: pagination.pageSize
+    }
+    if (searchForm.examId) params.exam_id = searchForm.examId
+    if (searchForm.status !== null) params.status = searchForm.status
+    
+    const res = await getRegistrationList(params)
+    dataList.value = res.list || []
+    pagination.total = res.total || 0
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleTableChange = (pag) => {
+  pagination.current = pag.current
+  pagination.pageSize = pag.pageSize
+  fetchData()
+}
+
+const handleSearch = () => {
+  pagination.current = 1
+  fetchData()
+}
+
+const handleReset = () => {
+  searchForm.examId = null
+  searchForm.status = null
+  handleSearch()
+}
+
+const handleView = (record) => {
+  // TODO: 查看详情
+  message.info(`查看报名详情：${record.id}`)
+}
+
+const handleAudit = (record, status) => {
+  currentRegId.value = record.id
+  auditForm.comment = ''
+  auditModalVisible.value = true
+}
+
+const handleAuditSubmit = async () => {
+  auditing.value = true
+  try {
+    await auditRegistration(currentRegId.value, {
+      status: auditForm.comment ? 2 : 1, // 有意见可能是拒绝
+      comment: auditForm.comment
+    })
+    message.success('审核成功')
+    auditModalVisible.value = false
+    fetchData()
+  } catch (error) {
+    console.error(error)
+  } finally {
+    auditing.value = false
+  }
+}
+
+const registrationStatusText = (status) => {
+  const map = { 0: '待审核', 1: '已通过', 2: '已拒绝', 3: '已取消' }
+  return map[status] || '未知'
+}
+
+const registrationStatusColor = (status) => {
+  const map = { 0: 'orange', 1: 'green', 2: 'red', 3: 'gray' }
+  return map[status] || 'default'
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.table-operator {
+  margin-bottom: 16px;
+}
+</style>
--- a/frontend/src/views/score/ScoreManage.vue
+++ b/frontend/src/views/score/ScoreManage.vue
@@ -0,0 +1,329 @@
+<template>
+  <div>
+    <a-page-header title="成绩录入" />
+    
+    <a-card>
+      <a-form layout="inline" :model="searchForm">
+        <a-form-item label="选择考试">
+          <a-select 
+            v-model:value="searchForm.examId" 
+            placeholder="请选择考试" 
+            style="width: 300px"
+            @change="handleExamChange"
+          >
+            <a-select-option v-for="exam in examList" :key="exam.id" :value="exam.id">
+              {{ exam.title }} ({{ exam.code }})
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item>
+          <a-button type="primary" @click="handleSearch">查询</a-button>
+        </a-form-item>
+      </a-form>
+
+      <a-divider />
+
+      <div class="table-operator">
+        <a-button type="primary" @click="handleBatchAdd">
+          <template #icon><PlusOutlined /></template>
+          批量录入
+        </a-button>
+        <a-button @click="handleExport">
+          <template #icon><DownloadOutlined /></template>
+          导出成绩
+        </a-button>
+      </div>
+
+      <a-table
+        :columns="columns"
+        :data-source="dataList"
+        :loading="loading"
+        :pagination="pagination"
+        @change="handleTableChange"
+        rowKey="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'pass'">
+            <a-badge
+              :text="record.pass ? '及格' : '不及格'"
+              :color="record.pass ? 'green' : 'red'"
+            />
+          </template>
+          <template v-if="column.key === 'published'">
+            <a-switch
+              v-model:checked="record.published"
+              checked-children="已发布"
+              un-checked-children="未发布"
+              @change="handlePublishChange(record)"
+            />
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+              <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 新增/编辑成绩对话框 -->
+    <a-modal
+      :visible="modalVisible"
+      :title="modalTitle"
+      width="600px"
+      @ok="handleSubmit"
+      @cancel="modalVisible = false"
+      :confirmLoading="submitting"
+    >
+      <a-form :model="formState" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
+        <a-form-item label="考试" required>
+          <a-select 
+            v-model:value="formState.exam_id" 
+            placeholder="请选择考试"
+            :disabled="!!editingId"
+          >
+            <a-select-option v-for="exam in examList" :key="exam.id" :value="exam.id">
+              {{ exam.title }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="用户 ID" required>
+          <a-input-number v-model:value="formState.user_id" placeholder="请输入用户 ID" style="width: 100%" />
+        </a-form-item>
+        <a-form-item label="分数" required>
+          <a-input-number v-model:value="formState.score" :min="0" :max="formState.total_score || 100" step="0.5" style="width: 100%" />
+        </a-form-item>
+        <a-form-item label="总分">
+          <a-input-number v-model:value="formState.total_score" :min="0" step="1" style="width: 100%" />
+        </a-form-item>
+        <a-form-item label="备注">
+          <a-textarea v-model:value="formState.remark" :rows="3" placeholder="请输入备注" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- 批量录入对话框 -->
+    <a-modal
+      :visible="batchModalVisible"
+      :title="'批量录入成绩'"
+      width="800px"
+      @ok="handleBatchSubmit"
+      @cancel="batchModalVisible = false"
+      :confirmLoading="batchSubmitting"
+    >
+      <a-alert
+        message="请按以下格式输入成绩（JSON 格式）"
+        description='[{"user_id": 1, "score": 85}, {"user_id": 2, "score": 90}]'
+        type="info"
+        show-icon
+        style="margin-bottom: 16px"
+      />
+      <a-textarea
+        v-model:value="batchData"
+        :rows="10"
+        placeholder='请输入 JSON 数据，例如：[{"user_id": 1, "score": 85}, {"user_id": 2, "score": 90}]'
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { PlusOutlined, DownloadOutlined } from '@ant-design/icons-vue'
+import { getScoreList, createScore, updateScore, deleteScore, batchCreateScores, publishScore } from '@/api/score'
+import { getExamList } from '@/api/exam'
+
+const loading = ref(false)
+const submitting = ref(false)
+const batchSubmitting = ref(false)
+const modalVisible = ref(false)
+const batchModalVisible = ref(false)
+const modalTitle = ref('录入成绩')
+const editingId = ref(null)
+
+const searchForm = reactive({
+  examId: null
+})
+
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '用户 ID', dataIndex: 'user_id', width: 100 },
+  { title: '考试名称', dataIndex: ['exam', 'title'], ellipsis: true },
+  { title: '分数', dataIndex: 'score', width: 100 },
+  { title: '总分', dataIndex: 'total_score', width: 100 },
+  { title: '是否及格', dataIndex: 'pass', width: 100 },
+  { title: '排名', dataIndex: 'rank', width: 80 },
+  { title: '发布状态', dataIndex: 'published', width: 120 },
+  { title: '操作', dataIndex: 'action', width: 150, fixed: 'right' }
+]
+
+const dataList = ref([])
+const examList = ref([])
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showTotal: (total) => `共 ${total} 条`
+})
+
+const formState = reactive({
+  exam_id: null,
+  user_id: null,
+  score: 0,
+  total_score: 100,
+  remark: ''
+})
+
+const batchData = ref('')
+
+const fetchData = async () => {
+  if (!searchForm.examId) {
+    dataList.value = []
+    pagination.total = 0
+    return
+  }
+  
+  loading.value = true
+  try {
+    const res = await getScoreList({
+      page: pagination.current,
+      pageSize: pagination.pageSize,
+      exam_id: searchForm.examId
+    })
+    dataList.value = res.list || []
+    pagination.total = res.total || 0
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const fetchExamList = async () => {
+  try {
+    const res = await getExamList({ page: 1, pageSize: 100 })
+    examList.value = res.list || []
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const handleTableChange = (pag) => {
+  pagination.current = pag.current
+  pagination.pageSize = pag.pageSize
+  fetchData()
+}
+
+const handleExamChange = () => {
+  pagination.current = 1
+  fetchData()
+}
+
+const handleSearch = () => {
+  pagination.current = 1
+  fetchData()
+}
+
+const handleBatchAdd = () => {
+  batchData.value = ''
+  batchModalVisible.value = true
+}
+
+const handleExport = () => {
+  // TODO: 实现导出功能
+  message.info('导出功能开发中')
+}
+
+const handleEdit = (record) => {
+  modalTitle.value = '编辑成绩'
+  editingId.value = record.id
+  
+  Object.keys(formState).forEach(key => {
+    formState[key] = record[key] !== undefined ? record[key] : null
+  })
+  
+  modalVisible.value = true
+}
+
+const handleDelete = (record) => {
+  $confirm({
+    title: '确认删除',
+    content: `确定要删除该成绩记录吗？`,
+    onOk: async () => {
+      try {
+        await deleteScore(record.id)
+        message.success('删除成功')
+        fetchData()
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  })
+}
+
+const handlePublishChange = async (record) => {
+  try {
+    await publishScore(record.id)
+    message.success(record.published ? '发布成功' : '取消发布成功')
+  } catch (error) {
+    console.error(error)
+    record.published = !record.published
+  }
+}
+
+const handleSubmit = async () => {
+  submitting.value = true
+  try {
+    const data = { ...formState }
+    
+    if (editingId.value) {
+      await updateScore(editingId.value, data)
+      message.success('更新成功')
+    } else {
+      await createScore(data)
+      message.success('创建成功')
+    }
+    
+    modalVisible.value = false
+    fetchData()
+  } catch (error) {
+    console.error(error)
+  } finally {
+    submitting.value = false
+  }
+}
+
+const handleBatchSubmit = async () => {
+  batchSubmitting.value = true
+  try {
+    const scores = JSON.parse(batchData.value)
+    scores.forEach(score => {
+      score.exam_id = searchForm.examId
+    })
+    
+    await batchCreateScores(scores)
+    message.success('批量录入成功')
+    batchModalVisible.value = false
+    fetchData()
+  } catch (error) {
+    message.error('JSON 格式错误，请检查输入')
+  } finally {
+    batchSubmitting.value = false
+  }
+}
+
+onMounted(() => {
+  fetchExamList()
+})
+</script>
+
+<style scoped>
+.table-operator {
+  margin-bottom: 16px;
+  display: flex;
+  gap: 8px;
+}
+</style>
--- a/frontend/src/views/score/ScoreQuery.vue
+++ b/frontend/src/views/score/ScoreQuery.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <a-page-header title="成绩查询" />
+    
+    <a-card>
+      <a-form layout="inline" :model="searchForm">
+        <a-form-item label="考试名称">
+          <a-input v-model:value="searchForm.examTitle" placeholder="请输入考试名称" style="width: 200px" />
+        </a-form-item>
+        <a-form-item>
+          <a-button type="primary" @click="handleSearch">查询</a-button>
+          <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
+        </a-form-item>
+      </a-form>
+
+      <a-divider />
+
+      <a-table
+        :columns="columns"
+        :data-source="dataList"
+        :loading="loading"
+        :pagination="pagination"
+        @change="handleTableChange"
+        rowKey="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'pass'">
+            <a-badge
+              :text="record.pass ? '及格' : '不及格'"
+              :color="record.pass ? 'green' : 'red'"
+            />
+          </template>
+          <template v-if="column.key === 'published'">
+            <a-badge
+              :text="record.published ? '已发布' : '未发布'"
+              :color="record.published ? 'blue' : 'gray'"
+            />
+          </template>
+          <template v-if="column.key === 'score'">
+            {{ record.score }} / {{ record.total_score }}
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { getScoreList } from '@/api/score'
+
+const loading = ref(false)
+const searchForm = reactive({
+  examTitle: ''
+})
+
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '考试名称', dataIndex: ['exam', 'title'], ellipsis: true },
+  { title: '考试科目', dataIndex: ['exam', 'subject'], width: 100 },
+  { title: '分数', dataIndex: 'score', width: 150 },
+  { title: '排名', dataIndex: 'rank', width: 80 },
+  { title: '是否及格', dataIndex: 'pass', width: 100 },
+  { title: '发布状态', dataIndex: 'published', width: 100 },
+  { title: '备注', dataIndex: 'remark', width: 200, ellipsis: true }
+]
+
+const dataList = ref([])
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showTotal: (total) => `共 ${total} 条`
+})
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const res = await getScoreList({
+      page: pagination.current,
+      pageSize: pagination.pageSize
+    })
+    dataList.value = res.list || []
+    pagination.total = res.total || 0
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleTableChange = (pag) => {
+  pagination.current = pag.current
+  pagination.pageSize = pag.pageSize
+  fetchData()
+}
+
+const handleSearch = () => {
+  pagination.current = 1
+  fetchData()
+}
+
+const handleReset = () => {
+  searchForm.examTitle = ''
+  handleSearch()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
--- a/frontend/src/views/user/UserProfile.vue
+++ b/frontend/src/views/user/UserProfile.vue
@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <a-page-header title="个人中心" />
+    
+    <a-card>
+      <a-row :gutter="24">
+        <a-col :span="8">
+          <a-card title="基本信息" :bordered="false">
+            <a-descriptions bordered :column="1">
+              <a-descriptions-item label="用户名">{{ userInfo?.username }}</a-descriptions-item>
+              <a-descriptions-item label="角色">
+                <a-badge 
+                  :text="userInfo?.role === 'admin' ? '管理员' : '普通用户'" 
+                  :color="userInfo?.role === 'admin' ? 'red' : 'blue'"
+                />
+              </a-descriptions-item>
+              <a-descriptions-item label="状态">
+                <a-badge 
+                  :text="userInfo?.status === 1 ? '正常' : '禁用'" 
+                  :color="userInfo?.status === 1 ? 'green' : 'gray'"
+                />
+              </a-descriptions-item>
+              <a-descriptions-item label="注册时间">{{ userInfo?.created_at }}</a-descriptions-item>
+            </a-descriptions>
+          </a-card>
+        </a-col>
+        
+        <a-col :span="16">
+          <a-card title="修改信息" :bordered="false">
+            <a-form :model="formState" layout="vertical">
+              <a-form-item label="真实姓名">
+                <a-input v-model:value="formState.real_name" placeholder="请输入真实姓名" />
+              </a-form-item>
+              
+              <a-form-item label="身份证号">
+                <a-input v-model:value="formState.id_card" placeholder="请输入身份证号" />
+              </a-form-item>
+              
+              <a-form-item label="邮箱">
+                <a-input v-model:value="formState.email" placeholder="请输入邮箱" />
+              </a-form-item>
+              
+              <a-form-item label="手机号">
+                <a-input v-model:value="formState.phone" placeholder="请输入手机号" />
+              </a-form-item>
+              
+              <a-form-item>
+                <a-button type="primary" @click="handleSubmit" :loading="submitting">
+                  保存修改
+                </a-button>
+              </a-form-item>
+            </a-form>
+          </a-card>
+        </a-col>
+      </a-row>
+      
+      <a-divider />
+      
+      <a-card title="修改密码" :bordered="false" style="margin-top: 24px">
+        <a-form :model="passwordForm" layout="vertical" style="max-width: 500px">
+          <a-form-item label="当前密码" required>
+            <a-input-password v-model:value="passwordForm.old_password" placeholder="请输入当前密码" />
+          </a-form-item>
+          
+          <a-form-item label="新密码" required>
+            <a-input-password v-model:value="passwordForm.new_password" placeholder="请输入新密码" />
+          </a-form-item>
+          
+          <a-form-item label="确认新密码" required>
+            <a-input-password v-model:value="passwordForm.confirm_password" placeholder="请再次输入新密码" />
+          </a-form-item>
+          
+          <a-form-item>
+            <a-button type="primary" @click="handlePasswordChange" :loading="passwordChanging">
+              修改密码
+            </a-button>
+          </a-form-item>
+        </a-form>
+      </a-card>
+    </a-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { getUserInfo, updateUserInfo } from '@/api/user'
+
+const submitting = ref(false)
+const passwordChanging = ref(false)
+
+const userInfo = ref(null)
+
+const formState = reactive({
+  real_name: '',
+  id_card: '',
+  email: '',
+  phone: ''
+})
+
+const passwordForm = reactive({
+  old_password: '',
+  new_password: '',
+  confirm_password: ''
+})
+
+const fetchUserInfo = async () => {
+  try {
+    userInfo.value = await getUserInfo()
+    
+    // 填充表单
+    formState.real_name = userInfo.value.real_name || ''
+    formState.id_card = userInfo.value.id_card || ''
+    formState.email = userInfo.value.email || ''
+    formState.phone = userInfo.value.phone || ''
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const handleSubmit = async () => {
+  submitting.value = true
+  try {
+    await updateUserInfo(formState)
+    message.success('更新成功')
+    fetchUserInfo()
+  } catch (error) {
+    console.error(error)
+  } finally {
+    submitting.value = false
+  }
+}
+
+const handlePasswordChange = async () => {
+  if (passwordForm.new_password !== passwordForm.confirm_password) {
+    message.error('两次输入的新密码不一致')
+    return
+  }
+  
+  if (passwordForm.new_password.length < 6) {
+    message.error('新密码长度至少 6 位')
+    return
+  }
+  
+  passwordChanging.value = true
+  try {
+    // TODO: 实现修改密码接口
+    message.success('密码修改成功，请重新登录')
+    localStorage.removeItem('token')
+    setTimeout(() => {
+      window.location.href = '/login'
+    }, 1000)
+  } catch (error) {
+    console.error(error)
+  } finally {
+    passwordChanging.value = false
+  }
+}
+
+onMounted(() => {
+  fetchUserInfo()
+})
+</script>
+
+<style scoped>
+:deep(.ant-descriptions-item-label) {
+  width: 100px;
+}
+</style>
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  },
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true
+      }
+    }
+  }
+})