# 投票系统

**Repository Path**: rymaker/voting-system

## Basic Information

- **Project Name**: 投票系统
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-24
- **Last Updated**: 2026-02-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
  <img src="public/logo.svg" alt="ModernVote Logo" width="120" height="120">
  
  # ModernVote
  
  🗳️ 现代化在线投票系统 | Modern Online Voting System
  
  [![Nuxt](https://img.shields.io/badge/Nuxt-3.x-00DC82?style=flat&logo=nuxt.js)](https://nuxt.com)
  [![Vue](https://img.shields.io/badge/Vue-3.x-4FC08D?style=flat&logo=vue.js)](https://vuejs.org)
  [![TypeORM](https://img.shields.io/badge/TypeORM-0.3-E83524?style=flat&logo=typeorm)](https://typeorm.io)
  [![MySQL](https://img.shields.io/badge/MySQL-8.0-4479A1?style=flat&logo=mysql)](https://www.mysql.com)
  
  [在线演示](#) | [功能特性](#功能特性) | [快速开始](#快速开始) | [文档](#文档)
</div>

---

## 📖 简介

ModernVote 是一个基于 Nuxt 3 + Vue 3 + TypeORM + MySQL 构建的现代化在线投票系统。它提供了简洁优雅的用户界面、强大的管理后台和完善的投票功能，适用于各种投票场景。

### ✨ 功能特性

#### 🎯 核心功能
- **投票管理** - 创建、编辑、删除投票，支持多选项
- **实时统计** - 实时显示投票结果和统计数据
- **防重复投票** - 基于 IP 和浏览器指纹的防重复机制
- **响应式设计** - 完美适配桌面端和移动端

#### 🔐 管理后台
- **安全认证** - 基于 Token 的管理员认证系统
- **数据概览** - 投票总数、活跃投票、总票数统计
- **投票管理** - 完整的 CRUD 操作界面
- **状态管理** - 草稿、进行中、已结束状态切换

#### 🎨 用户体验
- **炫酷动画** - 粒子特效、渐变色、流畅过渡动画
- **现代 UI** - 采用 Naive UI 组件库，界面简洁美观
- **移动优先** - rem 适配方案，完美支持移动设备
- **暗色模式** - 柔和的渐变背景，护眼舒适

#### 🚀 技术亮点
- **SSR/CSR** - 支持服务端渲染和客户端渲染
- **TypeORM** - 强大的 ORM 框架，支持多种数据库
- **Pinia** - 现代化的状态管理，支持持久化
- **Docker** - 容器化部署，一键启动

---

## 🛠️ 技术栈

### 前端
- **框架**: Nuxt 3 + Vue 3
- **状态管理**: Pinia + pinia-plugin-persistedstate
- **UI 组件**: Naive UI
- **样式**: SCSS + PostCSS
- **动画**: Anime.js + CSS Animations
- **HTTP 客户端**: Axios

### 后端
- **运行时**: Nitro (Nuxt Server)
- **ORM**: TypeORM
- **数据库**: MySQL 8.0
- **认证**: bcrypt + Token

### 开发工具
- **包管理**: npm/yarn/pnpm
- **容器化**: Docker + Docker Compose
- **代码规范**: ESLint + Prettier

---

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- MySQL >= 8.0
- npm/yarn/pnpm

### 安装步骤

1. **克隆项目**
```bash
git clone https://github.com/yourusername/modernvote.git
cd modernvote
```

2. **安装依赖**
```bash
npm install
# 或
yarn install
# 或
pnpm install
```

3. **配置环境变量**
```bash
cp .env.example .env
```

编辑 `.env` 文件，配置数据库连接：
```env
# 数据库配置
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=modernvote

# 管理员账户（可选）
ADMIN_USERNAME=admin
ADMIN_PASSWORD=admin123
```

4. **启动开发服务器**
```bash
npm run dev
```

访问 http://localhost:3000

### 🐳 Docker 部署

使用 Docker Compose 一键启动：

```bash
# 开发环境
docker-compose -f docker-compose.dev.yml up -d

# 生产环境
docker-compose up -d
```

---

## 📁 项目结构

```
modernvote/
├── assets/                 # 静态资源
│   └── styles/            # 样式文件
│       ├── components/    # 组件样式
│       ├── pages/         # 页面样式
│       └── Variables.scss # 全局变量
├── components/            # Vue 组件
│   ├── AppHeader.vue      # 头部组件
│   ├── VoteCard.vue       # 投票卡片
│   └── OptionItem.vue     # 选项组件
├── composables/           # 组合式函数
│   └── useVoting.js       # 投票逻辑
├── middleware/            # 中间件
│   ├── admin-auth.js      # 管理员认证
│   └── guest-only.js      # 访客专用
├── pages/                 # 页面
│   ├── index.vue          # 首页
│   ├── admin/             # 管理后台
│   │   ├── index.vue      # 登录页
│   │   └── dashboard.vue  # 控制台
│   └── vote/              # 投票页面
│       └── index.vue      # 投票详情
├── plugins/               # 插件
│   ├── naive-ui.ts        # Naive UI
│   └── pinia-persist.client.js # Pinia 持久化
├── public/                # 公共文件
│   ├── logo.svg           # Logo
│   └── favicon.svg        # 图标
├── server/                # 服务端
│   ├── api/               # API 接口
│   │   ├── admin/         # 管理员接口
│   │   └── votes/         # 投票接口
│   ├── database/          # 数据库
│   │   ├── index.ts       # 数据库连接
│   │   └── seed.ts        # 种子数据
│   ├── entities/          # 实体定义
│   │   ├── Vote.ts        # 投票实体
│   │   ├── VoteOption.ts  # 选项实体
│   │   ├── VoteRecord.ts  # 投票记录
│   │   └── Admin.ts       # 管理员实体
│   └── plugins/           # 服务端插件
│       └── database.ts    # 数据库初始化
├── stores/                # 状态管理
│   ├── admin.js           # 管理员状态
│   └── vote.js            # 投票状态
├── utils/                 # 工具函数
│   └── request.js         # HTTP 请求封装
├── .env.example           # 环境变量示例
├── docker-compose.yml     # Docker 配置
├── nuxt.config.ts         # Nuxt 配置
└── package.json           # 项目配置
```

---

## 🎯 核心功能说明

### 投票功能

#### 创建投票
1. 登录管理后台
2. 点击"创建投票"
3. 填写标题、描述、选项
4. 设置状态（草稿/进行中/已结束）
5. 提交创建

#### 参与投票
1. 访问首页查看投票列表
2. 点击投票卡片进入详情
3. 选择选项并提交
4. 查看实时统计结果

#### 管理投票
1. 登录管理后台（默认账号：admin/admin123）
2. 在"投票管理"中查看所有投票
3. 编辑、删除或修改状态
4. 查看数据统计

### 防重复投票

系统通过以下方式防止重复投票：
- **IP 地址检测** - 记录投票者 IP
- **浏览器指纹** - 基于浏览器特征生成唯一标识
- **数据库记录** - 存储投票记录，查询验证

---

## 🔧 配置说明

### 数据库配置

在 `.env` 文件中配置：

```env
DB_HOST=localhost        # 数据库主机
DB_PORT=3306            # 数据库端口
DB_USER=root            # 数据库用户名
DB_PASSWORD=password    # 数据库密码
DB_NAME=modernvote      # 数据库名称
```

### 管理员配置

首次启动会自动创建默认管理员账户：
- 用户名: `admin`
- 密码: `admin123`

可通过环境变量自定义：
```env
ADMIN_USERNAME=your_admin
ADMIN_PASSWORD=your_password
```

### 移动端适配

项目使用 `postcss-pxtorem` 进行移动端适配：
- 设计稿宽度: 375px
- rootValue: 37.5
- 最小转换值: 2px

---

## 📚 API 文档

### 投票接口

#### 获取投票列表
```http
GET /api/votes
```

#### 获取投票详情
```http
GET /api/votes/detail?id={voteId}
```

#### 创建投票
```http
POST /api/votes
Content-Type: application/json

{
  "title": "投票标题",
  "description": "投票描述",
  "status": "active",
  "options": ["选项1", "选项2", "选项3"]
}
```

#### 提交投票
```http
POST /api/votes/submit
Content-Type: application/json

{
  "voteId": "uuid",
  "optionId": "uuid",
  "fingerprint": "browser_fingerprint"
}
```

#### 更新投票
```http
PUT /api/votes/update?id={voteId}
Content-Type: application/json

{
  "title": "新标题",
  "description": "新描述",
  "status": "closed"
}
```

#### 删除投票
```http
DELETE /api/votes/remove?id={voteId}
```

#### 获取统计数据
```http
GET /api/votes/stats
```

### 管理员接口

#### 登录
```http
POST /api/admin/login
Content-Type: application/json

{
  "username": "admin",
  "password": "admin123"
}
```

#### 验证 Token
```http
GET /api/admin/verify
Authorization: Bearer {token}
```

详细 API 文档请查看 [API.md](./API.md)

---

## 🎨 自定义主题

### 修改颜色

编辑 `assets/styles/Variables.scss`：

```scss
// 主色调
$primary-color: #667eea;
$secondary-color: #764ba2;

// 渐变色
$gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
```

### 修改 Logo

替换 `public/logo.svg` 和 `public/favicon.svg` 文件。

Logo 设计说明请查看 [LOGO_DESIGN.md](./.qoder/LOGO_DESIGN.md)

---

## 🚢 部署

### 生产环境构建

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

### Docker 部署

```bash
# 构建镜像
docker build -t modernvote .

# 运行容器
docker run -p 3000:3000 modernvote
```

### 使用 Docker Compose

```bash
docker-compose up -d
```

---

## 🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

---

## 📝 开发日志

- [x] 基础投票功能
- [x] 管理后台
- [x] 防重复投票
- [x] 响应式设计
- [x] Docker 支持
- [x] 数据库迁移
- [x] Token 缓存
- [x] Logo 设计
- [ ] 多语言支持
- [ ] 数据导出
- [ ] 邮件通知
- [ ] 投票时间限制

---

## 📄 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

---

## 🙏 致谢

- [Nuxt](https://nuxt.com) - 强大的 Vue 框架
- [Naive UI](https://www.naiveui.com) - 优秀的 Vue 3 组件库
- [TypeORM](https://typeorm.io) - 强大的 ORM 框架
- [Anime.js](https://animejs.com) - 轻量级动画库

---

## 📧 联系方式

- 项目主页: [GitHub](https://github.com/yourusername/modernvote)
- 问题反馈: [Issues](https://github.com/yourusername/modernvote/issues)
- 邮箱: your.email@example.com

---

<div align="center">
  Made with ❤️ by ModernVote Team
  
  ⭐ 如果这个项目对你有帮助，请给一个 Star！
</div>