From d15c0a23c43946813ced0a169f7b3cc1feac55cd Mon Sep 17 00:00:00 2001
From: lyq0314 <2169694180@qq.com>
Date: Wed, 10 Jun 2026 08:14:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=80=E6=96=B0=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 270 +++++--
app.html | 1 +
assets/css/style.css | 783 +++++++++++++++++++-
assets/js/app-main.js | 1591 ++++++++++++++++++++++++++++++++++-------
assets/js/app.js | 760 --------------------
assets/js/common.js | 29 +-
assets/js/config.js | 7 +
assets/js/login.js | 139 +++-
assets/js/register.js | 10 +-
login.html | 38 +-
register.html | 11 +-
11 files changed, 2468 insertions(+), 1171 deletions(-)
delete mode 100644 assets/js/app.js
create mode 100644 assets/js/config.js
diff --git a/README.md b/README.md
index 2c86140..e252409 100644
--- a/README.md
+++ b/README.md
@@ -1,53 +1,107 @@
-
# 运动会报名系统
## 项目简介
-这是一个基于 Spring Boot 和前端技术栈开发的运动会报名系统，用于管理学校运动会的项目报名工作。
+这是一个基于 Spring Boot + 原生 Web 前端技术栈开发的运动会报名管理系统，支持学生在线报名运动会项目、管理员统一管理用户与报名数据。
+
+---
## 技术栈
### 后端
-- Java 8+
-- Spring Boot 2.x
-- MyBatis
-- MySQL 数据库
+| 技术 | 版本 | 说明 |
+|------|------|------|
+| Java | 8+ | 开发语言 |
+| Spring Boot | 2.x | 核心框架 |
+| MyBatis | 3.x | ORM 框架 |
+| MySQL | 5.7+ | 关系型数据库 |
+| Maven | 3.6+ | 项目构建 |
### 前端
-- HTML5 / CSS3 / JavaScript
-- Bootstrap 样式框架
+| 技术 | 说明 |
+|------|------|
+| HTML5 | 页面结构 |
+| CSS3 | 样式设计（纯原生，无框架依赖） |
+| JavaScript (ES5) | 交互逻辑（纯原生，无框架依赖） |
+
+---
## 项目结构
```
运动会报名/
-├── backend/ # 后端代码
-│ ├── src/main/java/ # Java 源代码
-│ ├── src/main/resources/ # 配置文件
-│ └── pom.xml # Maven 配置
-├── frontend/ # 前端代码
-│ ├── assets/ # 静态资源
-│ │ ├── css/ # 样式文件
-│ │ └── js/ # JavaScript 文件
-│ ├── index.html # 首页
-│ ├── login.html # 登录页
-│ ├── register.html # 注册页
-│ └── app.html # 主应用页面
-└── README.md # 项目说明
+├── backend/ # 后端 Spring Boot 项目
+│ ├── src/main/java/ # Java 源代码
+│ │ └── com/sports/ # 主包
+│ │ ├── controller/ # 控制器层
+│ │ ├── service/ # 业务逻辑层
+│ │ ├── mapper/ # 数据访问层
+│ │ ├── entity/ # 实体类
+│ │ ├── vo/ # 视图对象
+│ │ ├── dto/ # 数据传输对象
+│ │ └── config/ # 配置类
+│ ├── src/main/resources/ # 配置文件
+│ │ ├── application.properties # 应用配置
+│ │ ├── schema.sql # 数据库表结构
+│ │ └── data.sql # 初始数据
+│ ├── API文档.md # 接口文档
+│ └── pom.xml # Maven 配置
+│
+└── frontend/ # 前端项目
+ ├── assets/
+ │ ├── css/
+ │ │ ├── style.css # 全局样式（830 行）
+ │ │ ├── login.css # 登录/注册页样式
+ │ │ └── app.css # 主应用页样式
+ │ └── js/
+ │ ├── common.js # 公共工具库（API 请求、消息提示等）
+ │ ├── login.js # 登录页逻辑
+ │ ├── register.js # 注册页逻辑
+ │ ├── app-main.js # 主应用页核心逻辑（714 行）
+ │ └── app.js # 备用页面逻辑
+ ├── login.html # 登录页面
+ ├── register.html # 注册页面
+ ├── app.html # 主应用页面（登录后跳转）
+ └── README.md # 项目说明（本文件）
```
-## 功能模块
+---
+
+## 页面说明
-### 用户功能
-- 用户注册与登录
-- 个人信息管理
-- 运动会项目浏览
-- 项目报名与取消
+### login.html — 登录页
+- 用户输入 **登录账号** + **密码** + **图形验证码**
+- 验证码为 Canvas 绘制的 4 位随机字符
+- 登录成功后将用户信息存入 `sessionStorage`，跳转至 `app.html`
+- 包含"去注册"按钮跳转至注册页
-### 管理员功能
-- 用户信息管理
-- 报名总览查看
-- 报名记录统计
+### register.html — 注册页
+- 填写完整的个人信息（身份证号、姓名、手机号、性别、学院、班级、学号、类别）
+- 注册成功后自动登录并跳转至 `app.html`
+- 包含"返回登录"按钮
+
+### app.html — 主应用页
+- **顶栏**：系统标题 + 当前用户名 + 退出登录按钮
+- **左侧导航**：根据角色（学生/管理员）显示对应菜单
+- **右侧内容区**：动态渲染对应功能模块
+
+#### 学生菜单
+| 菜单项 | 功能 |
+|--------|------|
+| 个人信息 | 查看并维护当前登录人员的基础资料 |
+| 运动会报名 | 浏览所有项目并完成报名，也可查看自己的报名信息 |
+
+#### 管理员菜单
+| 菜单项 | 功能 |
+|--------|------|
+| 运动会管理 | 查看后台首页和系统概览 |
+| 团体信息管理 | 维护参赛团体与组织信息 |
+| 用户信息管理 | 查看、维护用户资料并执行账号管理操作 |
+| 报名管理 | 查看全部报名记录并进行管理 |
+| 赛事管理 | 管理所有运动会赛事项目 |
+| 系统管理 | 系统配置、权限设置和运行维护 |
+
+---
## 快速开始
@@ -55,53 +109,161 @@
- JDK 8 或更高版本
- Maven 3.6+
- MySQL 5.7+
+- 任意现代浏览器（推荐 Chrome / Edge）
-### 数据库配置
-
-创建数据库并导入初始数据：
+### 1. 数据库配置
```sql
-CREATE DATABASE sports_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+CREATE DATABASE IF NOT EXISTS sports_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE sports_db;
```
-导入 `backend/src/main/resources/schema.sql` 和 `backend/src/main/resources/data.sql`
+然后导入 `backend/src/main/resources/schema.sql` 和 `data.sql` 初始化表结构和数据。
-### 启动后端服务
+### 2. 修改后端配置
+
+编辑 `backend/src/main/resources/application.properties`：
+
+```properties
+spring.datasource.url=jdbc:mysql://localhost:3306/sports_db?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
+spring.datasource.username=你的数据库用户名
+spring.datasource.password=你的数据库密码
+server.port=8080
+```
+
+### 3. 启动后端
```bash
cd backend
mvn spring-boot:run
```
-### 启动前端服务
+后端默认运行在 `http://localhost:8080`。
-使用任意 HTTP 服务器启动前端，例如：
+### 4. 启动前端
+**方式一：Python HTTP 服务器**
```bash
cd frontend
-python -m http.server 8080
+python -m http.server 5500
```
+访问 `http://localhost:5500/login.html`
+
+**方式二：VS Code Live Server**
+- 安装 Live Server 插件
+- 右键 `login.html` → "Open with Live Server"
-### 访问地址
+**方式三：直接打开文件（file:// 协议）**
+- 直接双击 `login.html`
+- 前端会自动将 API 请求指向 `http://localhost:8080`
-- 前端页面: http://localhost:8080
-- 后端 API: http://localhost:8081
+> **注意**：前端 JS 会自动检测协议——如果通过 `file://` 打开，API 地址自动指向 `http://localhost:8080`；否则指向当前域名 + 端口 8080。
+
+---
## 默认账号
-| 账号 | 密码 | 角色 |
-|------|------|------|
+| 登录账号 | 密码 | 角色 |
+|----------|------|------|
| admin | admin | 管理员 |
-| student | student | 普通用户 |
+| student | student | 普通学生 |
+
+---
+
+## 系统架构
+
+```
+┌─────────────────────────────────────┐
+│ 前端 (Native Web) │
+│ login.html → app.html │
+│ common.js 提供 Ajax 工具库 │
+└──────────────┬──────────────────────┘
+ │ HTTP (JSON)
+ │ Session + Cookie 认证
+┌──────────────▼──────────────────────┐
+│ 后端 (Spring Boot) │
+│ Controller → Service → Mapper │
+│ /api/auth/* 无需认证 │
+│ /api/** 需登录 │
+│ /api/admin/** 需 ADMIN 角色 │
+└──────────────┬──────────────────────┘
+ │ JDBC
+┌──────────────▼──────────────────────┐
+│ MySQL 数据库 │
+└─────────────────────────────────────┘
+```
+
+### 认证流程
+
+1. 用户在登录页提交账号密码
+2. 后端验证通过后写入 Session（`session.currentUserId`）
+3. 前端收到用户信息后存入 `sessionStorage`，跳转至 `app.html`
+4. `app.html` 加载后调用 `/api/auth/me` 验证登录状态
+5. 验证通过则初始化用户数据、加载侧边栏和主页内容
+6. 后续 API 请求自动携带 Cookie（Session）
+
+### 前端核心逻辑 (app-main.js)
+
+- `loadCurrentUser()` → 调用 `/api/auth/me` 获取当前用户
+- `buildApp()` → 渲染侧边栏 + 初始化数据
+- `renderSidebar()` → 根据角色（学生/管理员）渲染导航菜单
+- `renderCurrentView()` → 根据当前选中菜单渲染内容区域
+- `loadEventData()` → 加载赛事数据
+- `loadAdminData()` → 加载管理员相关数据
+
+---
+
+## API 接口概览
+
+详细的接口文档请参考 `backend/API文档.md`。
+
+### 认证接口 `/api/auth`
+| 方法 | 路径 | 说明 |
+|------|------|------|
+| POST | /api/auth/login | 用户登录 |
+| POST | /api/auth/register | 用户注册 |
+| GET | /api/auth/me | 获取当前登录用户信息 |
+| POST | /api/auth/logout | 退出登录 |
+
+### 赛事接口 `/api/events`
+| 方法 | 路径 | 说明 |
+|------|------|------|
+| GET | /api/events | 获取所有赛事 |
+| GET | /api/events/my | 获取我的报名 |
+| POST | /api/events/{id}/register | 报名赛事 |
+| DELETE | /api/events/{id}/register | 取消报名 |
+
+### 管理员接口 `/api/admin`
+| 方法 | 路径 | 说明 |
+|------|------|------|
+| GET | /api/admin/users | 获取所有用户 |
+| GET | /api/admin/registrations | 获取所有报名记录 |
+| GET | /api/admin/events | 获取赛事管理数据 |
+| POST | /api/admin/users/{id}/reset-password | 重置用户密码 |
+| POST | /api/admin/users/{id}/disable | 禁用用户 |
+| POST | /api/admin/users/{id}/enable | 启用用户 |
+| DELETE | /api/admin/users/{id} | 删除用户 |
+
+---
+
+## 编码说明
+
+- 所有前端 HTML/CSS/JS 文件均使用 **UTF-8 编码**
+- 如遇中文乱码，请检查文件是否以 UTF-8 格式保存
+- 后端使用 UTF-8 编码，数据库使用 utf8mb4
+
+---
+
+## 常见问题
-## 开发说明
+### Q: 登录后页面卡在"加载中..."
+**A:** 请检查：
+1. 后端服务是否已启动（`http://localhost:8080`）
+2. 浏览器控制台是否有跨域或网络错误
+3. JS 文件编码是否为 UTF-8（不是 GBK）
-### 代码规范
-- Java 代码遵循 Spring 编码规范
-- JavaScript 代码使用 ES6+ 语法
-- 数据库表名使用下划线命名
+### Q: 注册时身份证号怎么填？
+**A:** 15 位或 18 位的有效身份证号，如 `110101200001010000`。
-### 注意事项
-- 开发环境下请确保 MySQL 服务已启动
-- 修改配置文件后需要重启服务才能生效
+### Q: 如何添加新的赛事项目？
+**A:** 使用管理员账号登录，在"赛事管理"模块中操作，或直接在数据库中插入数据。
\ No newline at end of file
diff --git a/app.html b/app.html
index a239687..c54263b 100644
--- a/app.html
+++ b/app.html
@@ -35,6 +35,7 @@
+
diff --git a/assets/css/style.css b/assets/css/style.css
index 4fcf920..c44a56f 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,4 +1,4 @@
-:root {
+:root {
--surface: rgba(255, 255, 255, 0.92);
--text: #1f2937;
--muted: #6b7280;
@@ -38,6 +38,7 @@ select {
display: none !important;
}
+/* ========== 认证页面 ========== */
.auth-page {
display: flex;
align-items: center;
@@ -135,6 +136,7 @@ select {
margin-bottom: 24px;
}
+/* ========== 表单 ========== */
.form-grid {
display: grid;
gap: 18px;
@@ -168,7 +170,6 @@ select {
outline: none;
}
-/* 下拉列表通用样式 */
select {
appearance: none;
-webkit-appearance: none;
@@ -179,24 +180,20 @@ select {
background-size: 16px;
}
-/* 学院下拉列表选项样式 */
select[name="college"] option {
padding: 6px 16px;
line-height: 1.3;
}
-/* 学院下拉列表占位符样式 */
select[name="college"] option[value=""] {
color: var(--muted);
display: none;
}
-/* 未选择时显示占位符颜色 */
select[name="college"]:invalid {
color: var(--muted);
}
-/* 选择后显示正常颜色 */
select[name="college"]:valid {
color: var(--text);
}
@@ -263,6 +260,7 @@ select[name="college"]:valid {
color: var(--danger);
}
+/* ========== 应用布局 ========== */
.app-body {
padding: 24px;
}
@@ -411,49 +409,208 @@ select[name="college"]:valid {
margin-bottom: 18px;
}
-.event-table {
+/* ========== 通用数据表格 ========== */
+.table-wrapper {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+.data-table {
width: 100%;
border-collapse: collapse;
- border-radius: 18px;
+ border-radius: 14px;
overflow: hidden;
- background: rgba(255, 255, 255, 0.86);
+ background: #fff;
+ font-size: 13px;
+ min-width: 700px;
+ box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}
-.event-table th,
-.event-table td {
- padding: 15px 14px;
- text-align: left;
- border-bottom: 1px solid rgba(226, 232, 240, 0.9);
- font-size: 14px;
+.data-table thead {
+ background: linear-gradient(135deg, #0f766e, #14b8a6);
+ color: #fff;
}
-.event-table th:last-child,
-.event-table td:last-child {
+.data-table thead th {
+ padding: 14px 12px;
text-align: center;
+ font-weight: 700;
+ font-size: 13px;
+ white-space: nowrap;
+ border-right: 1px solid rgba(255, 255, 255, 0.15);
+ letter-spacing: 0.5px;
}
-.event-table th {
- background: rgba(15, 118, 110, 0.08);
- color: #115e59;
+.data-table thead th:last-child {
+ border-right: none;
+}
+
+.data-table tbody td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #e2e8f0;
+ vertical-align: middle;
+ white-space: nowrap;
+}
+
+.data-table tbody tr:nth-child(even) {
+ background: #f8fafc;
+}
+
+.data-table tbody tr:nth-child(odd) {
+ background: #ffffff;
+}
+
+.data-table tbody tr:hover {
+ background: #e6f7f5;
}
-.event-table tr:last-child td {
+.data-table tbody tr:last-child td {
border-bottom: none;
}
+.data-table .actions-cell {
+ white-space: nowrap;
+ text-align: center;
+ min-width: 200px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ justify-content: center;
+ align-items: center;
+ padding: 10px 6px !important;
+}
+
+/* ========== 状态标签 ========== */
+.status-active {
+ display: inline-block;
+ padding: 4px 12px;
+ border-radius: 999px;
+ background: #d1fae5;
+ color: #065f46;
+ font-size: 12px;
+ font-weight: 700;
+}
+
+.status-disabled {
+ display: inline-block;
+ padding: 4px 12px;
+ border-radius: 999px;
+ background: #fee2e2;
+ color: #991b1b;
+ font-size: 12px;
+ font-weight: 700;
+}
+
+/* ========== 按钮样式 ========== */
.action-btn {
- padding: 10px 16px;
- border-radius: 12px;
- background: linear-gradient(135deg, var(--primary), var(--primary-light));
- color: #fff;
+ padding: 8px 14px;
+ border-radius: 8px;
+ border: none;
+ cursor: pointer;
font-weight: 700;
+ font-size: 12px;
+ white-space: nowrap;
+ transition: all 0.2s ease;
+ color: #fff;
+ background: linear-gradient(135deg, var(--primary), var(--primary-light));
+}
+
+.action-btn:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25);
}
.action-btn[disabled] {
background: rgba(148, 163, 184, 0.6);
cursor: not-allowed;
+ transform: none;
+ box-shadow: none;
+}
+
+.action-btn.small-btn {
+ padding: 7px 14px;
+ font-size: 12px;
+ border-radius: 8px;
+ min-width: 56px;
+ text-align: center;
}
+.action-btn.cancel-btn {
+ background: linear-gradient(135deg, #f59e0b, #d97706);
+}
+
+.action-btn.register-btn {
+ background: linear-gradient(135deg, var(--primary), var(--primary-light));
+}
+
+.action-btn.danger-btn {
+ background: linear-gradient(135deg, #ef4444, #dc2626);
+}
+
+.edit-user-btn {
+ background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
+}
+
+.reset-password-btn {
+ background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
+}
+
+.disable-user-btn {
+ background: linear-gradient(135deg, #f59e0b, #d97706) !important;
+}
+
+.enable-user-btn {
+ background: linear-gradient(135deg, #10b981, #059669) !important;
+}
+
+.delete-user-btn {
+ background: linear-gradient(135deg, #ef4444, #dc2626) !important;
+}
+
+.edit-event-btn {
+ background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
+}
+
+.delete-event-btn {
+ background: linear-gradient(135deg, #ef4444, #dc2626) !important;
+}
+
+/* ========== 上传区域 ========== */
+.upload-area {
+ padding: 18px;
+ border-radius: 18px;
+ background: rgba(248, 250, 252, 0.96);
+ border: 1px dashed rgba(148, 163, 184, 0.55);
+}
+
+.upload-hint {
+ margin-bottom: 18px;
+ padding: 14px 18px;
+ background: #fefce8;
+ border-left: 4px solid #f59e0b;
+ border-radius: 10px;
+ font-size: 13px;
+ line-height: 1.8;
+}
+
+.upload-hint p {
+ margin: 4px 0;
+ color: #78350f;
+}
+
+.upload-actions {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ flex-wrap: wrap;
+}
+
+.upload-file-name {
+ font-size: 13px;
+ color: var(--muted);
+}
+
+/* ========== 空状态 ========== */
.empty-state {
padding: 32px 20px;
text-align: center;
@@ -462,7 +619,73 @@ select[name="college"]:valid {
border: 1px dashed rgba(148, 163, 184, 0.45);
}
-/* 分页样式 */
+/* ========== 可折叠导航菜单 ========== */
+.nav-group {
+ display: grid;
+ gap: 4px;
+}
+
+.nav-parent {
+ width: 100%;
+ text-align: left;
+ padding: 14px 16px;
+ border-radius: 18px;
+ background: transparent;
+ color: rgba(255, 255, 255, 0.9);
+ font-weight: 700;
+ border: 1px solid transparent;
+ cursor: pointer;
+ transition: background 0.2s ease;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.nav-parent:hover,
+.nav-parent.expanded {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.nav-arrow {
+ display: inline-block;
+ font-size: 10px;
+ transition: transform 0.2s ease;
+}
+
+.nav-parent.expanded .nav-arrow {
+ transform: rotate(90deg);
+}
+
+.nav-children {
+ display: none;
+ padding-left: 12px;
+ margin: 2px 0 6px;
+ border-left: 2px solid rgba(255, 255, 255, 0.15);
+}
+
+.nav-children.open {
+ display: grid;
+ gap: 4px;
+}
+
+.nav-sub {
+ background: rgba(255, 255, 255, 0.06);
+ border: 1px solid transparent;
+ padding: 12px 16px;
+ font-size: 14px;
+}
+
+.nav-sub:hover {
+ background: rgba(255, 255, 255, 0.12);
+}
+
+.nav-sub.active {
+ background: rgba(255, 255, 255, 0.14);
+ color: #ffffff;
+ border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* ========== 分页 ========== */
.pagination {
display: flex;
justify-content: center;
@@ -509,28 +732,513 @@ select[name="college"]:valid {
color: var(--muted);
}
-@media (max-width: 960px) {
+/* ========== 工具栏 ========== */
+.toolbar-row {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ flex-wrap: wrap;
+ margin-bottom: 12px;
+}
+
+.search-input {
+ flex: 1;
+ min-width: 200px;
+ border: 1px solid var(--line);
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 16px;
+ padding: 10px 16px;
+ outline: none;
+ font-size: 14px;
+}
+
+.search-input:focus {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
+}
+
+/* ========== 仪表盘 ========== */
+.dashboard-shell {
+ display: grid;
+ gap: 16px;
+}
+
+.dashboard-top,
+.dashboard-bottom {
+ display: grid;
+ gap: 16px;
+}
+
+.dashboard-top {
+ grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
+}
+
+.dashboard-bottom {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.dashboard-hero-card,
+.metric-card,
+.dashboard-panel,
+.donut-panel {
+ border-radius: 22px;
+ background: rgba(255, 255, 255, 0.92);
+ border: 1px solid rgba(226, 232, 240, 0.92);
+}
+
+.dashboard-hero-card {
+ padding: 22px 24px;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) 280px;
+ gap: 20px;
+ align-items: center;
+ background:
+ radial-gradient(circle at top right, rgba(20, 184, 166, 0.18), transparent 35%),
+ linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(255, 255, 255, 0.94));
+}
+
+.dashboard-hero-card.compact {
+ grid-template-columns: 1fr;
+ align-items: stretch;
+}
+
+.dashboard-hero-copy {
+ display: grid;
+ align-content: start;
+ gap: 10px;
+}
+
+.dashboard-kicker {
+ margin: 0 0 8px;
+ font-size: 13px;
+ font-weight: 700;
+ color: #0f766e;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.dashboard-hero h3 {
+ margin: 0 0 8px;
+ font-size: 28px;
+}
+
+.dashboard-actions {
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+ margin-top: 6px;
+}
+
+.dashboard-metrics {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 14px;
+}
+
+.metric-card {
+ padding: 18px 20px;
+ box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
+}
+
+.metric-label,
+.metric-hint,
+.ranking-item p,
+.upcoming-item p,
+.timeline-content p,
+.timeline-content span {
+ color: var(--muted);
+}
+
+.metric-label {
+ display: block;
+ font-size: 13px;
+ font-weight: 700;
+ margin-bottom: 12px;
+}
+
+.metric-value {
+ display: block;
+ font-size: 32px;
+ line-height: 1;
+ margin-bottom: 10px;
+}
+.metric-hint {
+ margin: 0;
+ font-size: 13px;
+}
+
+.dashboard-panel {
+ padding: 20px 22px;
+ min-height: 0;
+}
+
+.dashboard-stat-list,
+.mini-bars,
+.ranking-list,
+.upcoming-list,
+.timeline-list {
+ display: grid;
+ gap: 14px;
+}
+
+.dashboard-stat-row,
+.mini-bar-text,
+.ranking-head {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 12px;
+}
+
+.dashboard-stat-row {
+ padding: 14px 0;
+ border-bottom: 1px solid rgba(226, 232, 240, 0.88);
+}
+
+.dashboard-stat-row:last-child {
+ border-bottom: none;
+ padding-bottom: 0;
+}
+
+.mini-bar-track {
+ height: 10px;
+ border-radius: 999px;
+ overflow: hidden;
+ background: rgba(226, 232, 240, 0.92);
+}
+
+.mini-bar-track span {
+ display: block;
+ height: 100%;
+ border-radius: inherit;
+ background: linear-gradient(90deg, #0f766e, #14b8a6);
+}
+
+.timeline-item,
+.upcoming-item,
+.ranking-item {
+ border-radius: 18px;
+ background: rgba(248, 250, 252, 0.92);
+ border: 1px solid rgba(226, 232, 240, 0.88);
+}
+
+.timeline-item {
+ display: flex;
+ gap: 14px;
+ padding: 16px 18px;
+}
+
+.timeline-dot {
+ width: 12px;
+ min-width: 12px;
+ height: 12px;
+ margin-top: 6px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #0f766e, #14b8a6);
+ box-shadow: 0 0 0 6px rgba(20, 184, 166, 0.12);
+}
+
+.timeline-content strong,
+.upcoming-item strong,
+.ranking-item strong {
+ display: block;
+}
+
+.timeline-content p,
+.timeline-content span,
+.upcoming-item p,
+.upcoming-item span,
+.ranking-item p,
+.ranking-meta {
+ margin: 6px 0 0;
+ font-size: 13px;
+}
+
+.upcoming-item,
+.ranking-item {
+ padding: 16px 18px;
+}
+
+.ranking-index {
+ font-size: 12px;
+ font-weight: 700;
+ color: #0f766e;
+}
+
+.dashboard-empty {
+ padding: 26px 18px;
+ border-radius: 18px;
+ text-align: center;
+ color: var(--muted);
+ background: rgba(248, 250, 252, 0.86);
+ border: 1px dashed rgba(148, 163, 184, 0.45);
+}
+
+.donut-layout {
+ display: grid;
+ grid-template-columns: 160px minmax(0, 1fr);
+ gap: 16px;
+ align-items: center;
+}
+
+.donut-chart {
+ width: 160px;
+ height: 160px;
+ border-radius: 50%;
+ display: grid;
+ place-items: center;
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+}
+
+.donut-hole {
+ width: 96px;
+ height: 96px;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.96);
+ display: grid;
+ place-items: center;
+ text-align: center;
+ box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
+}
+
+.donut-hole strong {
+ font-size: 26px;
+ line-height: 1;
+}
+
+.donut-hole span {
+ font-size: 12px;
+ color: var(--muted);
+}
+
+.donut-legend {
+ display: grid;
+ gap: 10px;
+}
+
+.donut-legend-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.donut-dot {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ flex: 0 0 12px;
+}
+
+.donut-legend-text strong {
+ display: block;
+ font-size: 14px;
+}
+
+.donut-legend-text p {
+ margin: 4px 0 0;
+ color: var(--muted);
+ font-size: 12px;
+}
+
+.category-overview-list {
+ display: grid;
+ gap: 14px;
+}
+
+.category-overview-item {
+ display: grid;
+ gap: 8px;
+}
+
+.category-overview-head {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 12px;
+}
+
+.category-overview-head strong {
+ font-size: 14px;
+}
+
+.category-overview-head span {
+ color: var(--muted);
+ font-size: 12px;
+ white-space: nowrap;
+}
+
+.category-overview-track {
+ height: 12px;
+ border-radius: 999px;
+ overflow: hidden;
+ background: rgba(226, 232, 240, 0.92);
+}
+
+.category-overview-fill {
+ display: block;
+ height: 100%;
+ border-radius: inherit;
+}
+
+.category-overview-fill.fill-0 {
+ background: linear-gradient(90deg, #0f766e, #14b8a6);
+}
+
+.category-overview-fill.fill-1 {
+ background: linear-gradient(90deg, #2563eb, #60a5fa);
+}
+
+.category-overview-fill.fill-2 {
+ background: linear-gradient(90deg, #f97316, #fb923c);
+}
+
+.category-overview-fill.fill-3 {
+ background: linear-gradient(90deg, #e11d48, #fb7185);
+}
+
+.category-overview-fill.fill-4 {
+ background: linear-gradient(90deg, #8b5cf6, #a78bfa);
+}
+
+.compact-ranking-list,
+.compact-feed-list {
+ display: grid;
+ gap: 12px;
+}
+
+.compact-ranking-item,
+.compact-feed-item {
+ display: grid;
+ align-items: center;
+ gap: 12px;
+ padding: 14px 16px;
+ border-radius: 18px;
+ background: rgba(248, 250, 252, 0.92);
+ border: 1px solid rgba(226, 232, 240, 0.88);
+}
+
+.compact-ranking-item {
+ grid-template-columns: 34px minmax(0, 1fr) auto;
+}
+
+.compact-rank-no {
+ width: 34px;
+ height: 34px;
+ border-radius: 50%;
+ display: grid;
+ place-items: center;
+ background: linear-gradient(135deg, #0f766e, #14b8a6);
+ color: #fff;
+ font-weight: 700;
+}
+
+.compact-ranking-main strong,
+.compact-feed-body strong {
+ display: block;
+}
+
+.compact-ranking-main p,
+.compact-feed-body p {
+ margin: 4px 0 0;
+ color: var(--muted);
+ font-size: 13px;
+}
+
+.compact-rank-badge,
+.compact-feed-tag {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 28px;
+ padding: 0 10px;
+ border-radius: 999px;
+ background: rgba(15, 118, 110, 0.12);
+ color: #0f766e;
+ font-size: 12px;
+ font-weight: 700;
+}
+
+.compact-feed-item {
+ grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
+.compact-feed-time {
+ color: var(--muted);
+ font-size: 12px;
+ white-space: nowrap;
+}
+
+/* ========== 记住账号 ========== */
+.remember-inline {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ white-space: nowrap;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 600;
+}
+
+/* ========== 验证码 ========== */
+.captcha-row {
+ display: grid;
+ grid-template-columns: 1fr 140px auto;
+ gap: 12px;
+ align-items: center;
+}
+
+.captcha-row input {
+ min-width: 0;
+}
+
+.captcha-row canvas {
+ border-radius: 14px;
+ border: 1px solid var(--line);
+ cursor: pointer;
+ background: #fff;
+}
+
+/* ========== 响应式 ========== */
+@media (max-width: 960px) {
.login-shell,
.register-shell,
.main-layout,
.profile-grid,
.summary-grid,
+ .dashboard-top,
+ .dashboard-bottom,
+ .dashboard-metrics,
.two-columns {
grid-template-columns: 1fr;
}
.topbar,
+ .dashboard-hero-card,
.content-header,
.section-head {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
+
+ .dashboard-hero-card {
+ grid-template-columns: 1fr;
+ }
+
+ .donut-layout {
+ grid-template-columns: 1fr;
+ justify-items: center;
+ }
}
-@media (max-width: 640px) {
+@media (max-width: 720px) {
+ .captcha-row {
+ grid-template-columns: 1fr;
+ }
+}
+@media (max-width: 640px) {
body,
.app-body {
padding: 14px;
@@ -541,8 +1249,21 @@ select[name="college"]:valid {
align-items: stretch;
}
- .event-table {
- display: block;
- overflow-x: auto;
+ .data-table {
+ min-width: auto;
+ }
+
+ .dashboard-hero,
+ .dashboard-panel,
+ .dashboard-hero-card,
+ .metric-card,
+ .donut-panel {
+ padding: 18px;
+ }
+
+ .compact-ranking-item,
+ .compact-feed-item {
+ grid-template-columns: 1fr;
+ align-items: start;
}
}
diff --git a/assets/js/app-main.js b/assets/js/app-main.js
index ce2b005..40f5fac 100644
--- a/assets/js/app-main.js
+++ b/assets/js/app-main.js
@@ -14,9 +14,27 @@ document.addEventListener('DOMContentLoaded', function () {
events: [],
myEvents: [],
adminUsers: [],
+ allAdminUsers: [],
adminRegistrations: [],
adminEvents: [],
- editingEventId: null
+ dashboardStats: {
+ onlineUsers: 0
+ },
+ editingEventId: null,
+ editingUserId: null,
+ userPage: 1,
+ userPageSize: 8,
+ userKeyword: '',
+ userTotal: 0,
+ eventPage: 1,
+ eventPageSize: 8,
+ eventTotal: 0,
+ adminEventPage: 1,
+ adminEventPageSize: 8,
+ adminEventTotal: 0,
+ athletePage: 1,
+ athletePageSize: 8,
+ athleteTotal: 0
};
var genderOptions = ['男', '女'];
@@ -43,18 +61,31 @@ document.addEventListener('DOMContentLoaded', function () {
var categoryOptions = ['青年组', '老年组'];
var studentMenus = [
- { key: 'profile', label: '个人信息', desc: '查看并修改个人信息。' },
+ { key: 'profile-view', label: '查看信息', desc: '查看当前账号信息。' },
+ { key: 'profile-edit', label: '修改信息', desc: '修改个人资料。' },
{ key: 'events', label: '运动会报名', desc: '查看项目、报名和取消报名。' }
];
var adminMenus = [
{ key: 'admin-home', label: '运动会管理', desc: '查看系统概览。' },
+ {
+ label: '用户信息管理',
+ children: [
+ { key: 'user-list', label: '用户列表', desc: '查询、导出、重置密码及禁用等操作。' },
+ { key: 'user-add', label: '新增用户', desc: '新增系统用户或批量上传。' }
+ ]
+ },
{ key: 'team-info', label: '团体信息管理', desc: '管理学院、班级等团体信息。' },
- { key: 'user-manage', label: '用户信息管理', desc: '管理用户资料、权限和状态。' },
- { key: 'event-manage', label: '项目管理', desc: '新增、编辑和删除比赛项目。' },
- { key: 'athlete-manage', label: '参赛运动员管理', desc: '查看所有已报名人员和项目。' },
+ {
+ label: '项目管理',
+ children: [
+ { key: 'event-list', label: '项目列表', desc: '查看、编辑和删除比赛项目。' },
+ { key: 'event-add', label: '新增项目', desc: '新增比赛项目。' }
+ ]
+ },
+ { key: 'athlete-manage', label: '参赛运动员管理', desc: '查看所有已报名人员。' },
{ key: 'score-manage', label: '参赛成绩管理', desc: '录入和维护成绩。' },
- { key: 'record-manage', label: '项目记录管理', desc: '维护项目记录和赛事资料。' },
+ { key: 'record-manage', label: '项目记录管理', desc: '维护项目记录。' },
{ key: 'system-manage', label: '系统管理', desc: '维护系统配置。' }
];
@@ -72,20 +103,83 @@ document.addEventListener('DOMContentLoaded', function () {
}
function getMeta(viewKey) {
- var menu = getMenus().find(function (item) {
- return item.key === viewKey;
- });
- return menu || { label: '系统首页', desc: '欢迎进入运动会报名系统。' };
+ var menus = getMenus();
+ for (var i = 0; i < menus.length; i++) {
+ var item = menus[i];
+ if (item.key === viewKey) return item;
+ if (item.children) {
+ for (var j = 0; j < item.children.length; j++) {
+ if (item.children[j].key === viewKey) return item.children[j];
+ }
+ }
+ }
+ return { label: '系统首页', desc: '欢迎进入运动会报名系统。' };
+ }
+
+ function isParentActive(item) {
+ if (item.key === state.currentView) return true;
+ if (item.children) {
+ for (var i = 0; i < item.children.length; i++) {
+ if (item.children[i].key === state.currentView) return true;
+ }
+ }
+ return false;
}
function renderSidebar() {
- sidebarNav.innerHTML = getMenus().map(function (item) {
- return '