优化: 重构项目结构并修复字段配置保存问题

- 删除旧的独立子项目（admin、display），统一使用单应用架构 - 将 AdminLayout.vue 重命名为 Admin.vue - 在管理后台添加大屏预览快捷按钮 - 修复字段配置修改后刷新页面丢失的问题 - 新增 updateFields 方法确保字段配置持久化到 IndexedDB - 更新 IFLOW.md 和 README.md 文档 - 清理未使用的文件和测试数据
2026-01-16 14:07:51 +08:00
parent f19b1427b5
commit 466b8408ab
45 changed files with 695 additions and 9338 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -11,7 +11,7 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
-.playwright-mcp
+.playwright-mcp/

 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
--- a/.playwright-mcp/display-all-fields.png
+++ b/.playwright-mcp/display-all-fields.png
--- a/.playwright-mcp/display-grid-layout.png
+++ b/.playwright-mcp/display-grid-layout.png
--- a/IFLOW.md
+++ b/IFLOW.md
@@ -0,0 +1,215 @@
+# Rolling Draw - 抽奖系统
+
+## 项目概述
+
+Rolling Draw 是一个基于 Vue 3 的现代化抽奖系统，提供完整的管理后台和大屏展示功能。系统支持自定义字段、批量导入、多轮次抽奖、中奖记录导出等功能，适用于各类活动抽奖场景。
+
+**作者：** 上海潘哆呐科技有限公司  
+**技术栈：** Vue 3 + Vite + Vue Router + Pinia + Element Plus + IndexedDB
+
+## 项目结构
+
+```
+rollingDraw/
+├── src/
+│   ├── views/
+│   │   ├── Admin.vue              # 管理后台布局
+│   │   ├── Display.vue            # 大屏展示页面
+│   │   └── admin/
+│   │       ├── Participants.vue   # 参与者管理
+│   │       ├── Prizes.vue         # 奖品管理
+│   │       ├── Rounds.vue         # 轮次管理
+│   │       └── Winners.vue        # 中奖记录
+│   ├── router/
+│   │   └── index.js               # 路由配置
+│   ├── store/
+│   │   └── index.js               # Pinia 状态管理
+│   ├── styles/
+│   │   ├── element-plus.css       # Element Plus 样式覆盖
+│   │   ├── global.css             # 全局样式
+│   │   └── variables.css          # CSS 变量定义
+│   ├── App.vue                    # 主应用组件
+│   └── main.js                    # 应用入口
+├── utils/
+│   └── indexedDB.js               # IndexedDB 工具封装
+├── index.html                     # HTML 模板
+├── package.json                   # 项目配置
+├── vite.config.js                 # Vite 配置
+└── .gitignore                     # Git 忽略文件
+```
+
+## 技术栈
+
+### 核心框架
+- **Vue 3** (v3.4.0) - 渐进式 JavaScript 框架
+- **Vite** (v5.0.0) - 下一代前端构建工具
+- **Vue Router** (v4.2.5) - 官方路由管理器
+- **Pinia** (v2.1.7) - Vue 状态管理库
+
+### UI 组件库
+- **Element Plus** (v2.5.0) - Vue 3 组件库
+- **@element-plus/icons-vue** (v2.3.1) - Element Plus 图标库
+
+### 数据持久化
+- **IndexedDB** - 浏览器本地数据库，用于存储抽奖数据
+- **localStorage** - 用于跨标签页通信
+
+## 主要功能
+
+### 1. 参与者管理
+- ✅ 单个添加参与者
+- ✅ 批量导入（CSV 格式）
+- ✅ 导出参与者名单
+- ✅ 自定义字段配置
+- ✅ 删除参与者
+- ✅ 清空名单
+
+### 2. 奖品管理
+- ✅ 添加奖品
+- ✅ 设置库存数量
+- ✅ 实时库存管理
+- ✅ 删除奖品
+
+### 3. 轮次管理
+- ✅ 创建抽奖轮次
+- ✅ 关联奖品
+- ✅ 设置抽取人数
+- ✅ 轮次状态跟踪
+
+### 4. 抽奖控制
+- ✅ 开始/停止抽奖
+- ✅ Fisher-Yates 洗牌算法
+- ✅ 防重复中奖
+- ✅ 库存自动扣减
+- ✅ 重置抽奖数据
+
+### 5. 中奖记录
+- ✅ 实时记录中奖信息
+- ✅ 导出中奖名单
+- ✅ 按轮次筛选
+
+### 6. 大屏展示
+- ✅ 滚动动画效果
+- ✅ 结果展示模式
+- ✅ 自定义背景图片
+- ✅ 快捷键控制
+- ✅ 多列布局支持
+
+### 7. 数据同步
+- ✅ IndexedDB 本地存储
+- ✅ 跨标签页实时同步
+- ✅ 数据持久化
+
+## 路由配置
+
+| 路径 | 组件 | 说明 |
+|------|------|------|
+| `/` | 重定向到 `/admin/participants` | 默认路由 |
+| `/admin/participants` | Participants.vue | 参与者管理 |
+| `/admin/prizes` | Prizes.vue | 奖品管理 |
+| `/admin/rounds` | Rounds.vue | 轮次管理 |
+| `/admin/winners` | Winners.vue | 中奖记录 |
+| `/display` | Display.vue | 大屏展示 |
+
+## 数据存储
+
+### IndexedDB 数据结构
+- **lottery_fields** - 字段配置
+- **lottery_participants** - 参与者列表
+- **lottery_prizes** - 奖品列表
+- **lottery_rounds** - 轮次列表
+- **lottery_winners** - 中奖记录
+- **lottery_isRolling** - 抽奖状态
+- **lottery_currentRound** - 当前轮次
+- **lottery_displayMode** - 显示模式
+- **lottery_backgroundImage** - 背景图片
+- **lottery_columnsPerRow** - 每行列数
+
+## 快捷键
+
+### 大屏展示端
+- **← →** - 切换轮次
+- **Space** - 开始/停止抽奖
+
+## 开发指南
+
+### 安装依赖
+```bash
+npm install
+```
+
+### 启动开发服务器
+```bash
+npm run dev
+```
+
+### 构建生产版本
+```bash
+npm run build
+```
+
+### 预览生产构建
+```bash
+npm run preview
+```
+
+## 项目特性
+
+### 响应式设计
+- 支持桌面端和大屏展示
+- 自适应布局
+- 流畅的动画效果
+
+### 数据安全
+- 本地存储，无需服务器
+- 数据持久化
+- 防止重复中奖
+
+### 扩展性
+- 自定义字段配置
+- 可配置的轮次和奖品
+- 灵活的展示布局
+
+## 注意事项
+
+1. **数据备份**：建议定期导出参与者名单和中奖记录进行备份
+2. **浏览器兼容性**：需要支持 IndexedDB 的现代浏览器
+3. **图片限制**：背景图片最大支持 10MB
+4. **CSV 格式**：导入文件第一行为字段名，后续行为数据
+
+## 技术亮点
+
+- **Vue 3 Composition API** - 更好的代码组织和复用
+- **Pinia 状态管理** - 轻量级、类型友好的状态管理
+- **IndexedDB** - 大容量本地数据存储
+- **Fisher-Yates 洗牌算法** - 公平的随机抽取
+- **跨标签页同步** - 实时数据更新
+- **CSS 变量** - 主题定制和样式管理
+
+## 开发规范
+
+### 代码风格
+- 使用 Vue 3 Composition API
+- 使用 `<script setup>` 语法糖
+- 遵循 ESLint 规则
+- 组件命名使用 PascalCase
+
+### 命名规范
+- 文件名：PascalCase (组件) / kebab-case (工具)
+- 变量名：camelCase
+- 常量名：UPPER_SNAKE_CASE
+- 函数名：camelCase
+
+### 目录结构
+- 组件放在 `src/views/` 目录
+- 工具函数放在 `utils/` 目录
+- 样式文件放在 `src/styles/` 目录
+
+## 许可证
+
+版权所有 © 上海潘哆呐科技有限公司
+
+## 联系方式
+
+- **邮箱**: work@pandorastudio.cn
+- **公司**: 上海潘哆呐科技有限公司
--- a/README.md
+++ b/README.md
@@ -1,71 +1,128 @@
-# 抽奖系统
+# Rolling Draw 抽奖系统

-基于 Vue 3 + Vite + Element Plus 开发的现代化抽奖系统，支持名单管理、奖品配置、多轮抽奖等功能。
+<div align="center">

-## 项目简介
+![Vue 3](https://img.shields.io/badge/Vue-3.4.0-4FC08D?style=flat&logo=vue.js&logoColor=white)
+![Vite](https://img.shields.io/badge/Vite-5.0.0-646CFF?style=flat&logo=vite&logoColor=white)
+![Element Plus](https://img.shields.io/badge/Element%20Plus-2.5.0-409EFF?style=flat&logo=element&logoColor=white)
+![License](https://img.shields.io/badge/License-Proprietary-ff69b4)

-这是一个功能完整的抽奖系统，适用于年会、活动抽奖等场景。系统采用前后端分离架构，数据存储在浏览器本地 IndexedDB 中，无需后端服务器即可运行。
+一个功能强大、界面美观的现代化抽奖系统

-### 主要特性
+[在线演示](#) · [功能特性](#功能特性) · [快速开始](#快速开始) · [使用文档](#使用文档)

- 📋 **名单管理**：支持CSV批量导入/导出，支持自定义字段配置
- 🎁 **奖品管理**：灵活配置奖品和库存数量
- 🔄 **多轮抽奖**：支持多轮次抽奖，每轮可设置不同奖品和人数
- 📺 **大屏展示**：独立的展示端，支持滚动动画效果
- ⌨️ **快捷键操作**：支持键盘快捷键控制抽奖流程
- 🎨 **背景自定义**：支持自定义大屏背景图片
- 💾 **本地存储**：使用 IndexedDB 本地存储，无需服务器
+</div>

-## 技术栈
+---

- **框架**：Vue 3.4.0
- **构建工具**：Vite 5.0.0
- **路由**：Vue Router 4.2.5
- **状态管理**：Pinia 2.1.7
- **UI组件库**：Element Plus 2.5.0
- **数据存储**：IndexedDB
+## 📖 项目简介

-## 项目结构
+Rolling Draw 是一个基于 Vue 3 + Vite 开发的现代化抽奖系统，提供完整的管理后台和大屏展示功能。系统支持自定义字段、批量导入、多轮次抽奖、中奖记录导出等功能，适用于年会抽奖、活动抽奖等各类场景。

-```
-rollingDraw/
-├── src/                      # 主应用源码
-│   ├── views/               # 页面组件
-│   │   ├── admin/          # 管理端页面
-│   │   │   ├── Participants.vue  # 名单管理
-│   │   │   ├── Prizes.vue        # 奖品管理
-│   │   │   ├── Rounds.vue        # 轮次管理
-│   │   │   └── Winners.vue       # 中奖记录
-│   │   ├── Admin.vue       # 管理端入口
-│   │   ├── Display.vue     # 展示端入口
-│   │   └── AdminLayout.vue # 管理端布局
-│   ├── router/             # 路由配置
-│   ├── store/              # 状态管理
-│   └── styles/             # 样式文件
-├── admin/                  # 独立管理端应用
-├── display/                # 独立展示端应用
-├── utils/                  # 工具类
-│   └── indexedDB.js        # IndexedDB封装
-├── index.html              # 入口HTML
-├── vite.config.js          # Vite配置
-└── package.json            # 项目配置
-```
+### ✨ 核心特点

-## 快速开始
+- 🎨 **现代化界面** - 基于 Element Plus 的精美 UI 设计
+- 📱 **响应式设计** - 完美适配桌面端和大屏展示
+- 💾 **本地存储** - 基于 IndexedDB 的数据持久化
+- 🔄 **实时同步** - 支持跨标签页数据同步
+- 🎯 **公平抽奖** - 采用 Fisher-Yates 洗牌算法
+- 📊 **数据管理** - 支持导入导出，方便数据管理
+- ⌨️ **快捷操作** - 大屏端支持快捷键控制
+
+---
+
+## 🚀 功能特性
+
+### 参与者管理
+- ✅ 单个添加参与者
+- ✅ 批量导入（支持 CSV 格式）
+- ✅ 导出参与者名单
+- ✅ 自定义字段配置
+- ✅ 删除参与者
+- ✅ 清空名单
+
+### 奖品管理
+- ✅ 添加奖品
+- ✅ 设置库存数量
+- ✅ 实时库存管理
+- ✅ 删除奖品
+
+### 轮次管理
+- ✅ 创建抽奖轮次
+- ✅ 关联奖品
+- ✅ 设置抽取人数
+- ✅ 轮次状态跟踪
+
+### 抽奖控制
+- ✅ 开始/停止抽奖
+- ✅ Fisher-Yates 洗牌算法
+- ✅ 防重复中奖
+- ✅ 库存自动扣减
+- ✅ 重置抽奖数据
+
+### 中奖记录
+- ✅ 实时记录中奖信息
+- ✅ 导出中奖名单
+- ✅ 按轮次筛选
+
+### 大屏展示
+- ✅ 滚动动画效果
+- ✅ 结果展示模式
+- ✅ 自定义背景图片
+- ✅ 快捷键控制（← → 切换轮次，Space 开始/停止）
+- ✅ 多列布局支持（可配置每行列数）
+
+---
+
+## 🛠️ 技术栈
+
+### 核心框架
+- **Vue 3** (v3.4.0) - 渐进式 JavaScript 框架
+- **Vite** (v5.0.0) - 下一代前端构建工具
+- **Vue Router** (v4.2.5) - 官方路由管理器
+- **Pinia** (v2.1.7) - Vue 状态管理库
+
+### UI 组件库
+- **Element Plus** (v2.5.0) - Vue 3 组件库
+- **@element-plus/icons-vue** (v2.3.1) - Element Plus 图标库
+
+### 数据持久化
+- **IndexedDB** - 浏览器本地数据库
+- **localStorage** - 跨标签页通信
+
+---
+
+## 📦 安装
+
+### 环境要求
+
+- Node.js >= 16.0.0
+- npm >= 8.0.0

 ### 安装依赖

 ```bash
+# 克隆项目
+git clone https://git.pandorastudio.cn/product/rollingDraw.git
+
+# 进入项目目录
+cd rollingDraw
+
+# 安装依赖
 npm install
 ```

+---
+
+## 🎬 快速开始
+
 ### 开发模式

 ```bash
 npm run dev
 ```

-访问 http://localhost:5173
+访问 [http://localhost:5173](http://localhost:5173) 查看应用

 ### 构建生产版本

@@ -73,91 +130,212 @@ npm run dev
 npm run build
 ```

-### 预览生产版本
+构建产物将生成在 `dist` 目录
+
+### 预览生产构建

 ```bash
 npm run preview
 ```

-## 功能说明
+---

-### 管理端（/admin）
+## 📂 项目结构

-#### 名单管理
- **单个添加**：通过表单逐个添加参与者
- **批量导入**：支持 CSV 文件批量导入
-  - CSV 格式：第一行为字段名，后续行为数据
-  - 示例：
-    ```csv
-    姓名,部门,工号
-    张三,技术部,001
-    李四,市场部,002
-    ```
- **字段配置**：自定义参与者字段（姓名、部门、工号等）
- **导出名单**：将当前名单导出为 CSV 文件
- **清空名单**：一键清空所有参与者
+```
+rollingDraw/
+├── src/
+│   ├── views/
+│   │   ├── Admin.vue              # 管理后台布局
+│   │   ├── Display.vue            # 大屏展示页面
+│   │   └── admin/
+│   │       ├── Participants.vue   # 参与者管理
+│   │       ├── Prizes.vue         # 奖品管理
+│   │       ├── Rounds.vue         # 轮次管理
+│   │       └── Winners.vue        # 中奖记录
+│   ├── router/
+│   │   └── index.js               # 路由配置
+│   ├── store/
+│   │   └── index.js               # Pinia 状态管理
+│   ├── styles/
+│   │   ├── element-plus.css       # Element Plus 样式覆盖
+│   │   ├── global.css             # 全局样式
+│   │   └── variables.css          # CSS 变量定义
+│   ├── App.vue                    # 主应用组件
+│   └── main.js                    # 应用入口
+├── utils/
+│   └── indexedDB.js               # IndexedDB 工具封装
+├── index.html                     # HTML 模板
+├── package.json                   # 项目配置
+├── vite.config.js                 # Vite 配置
+└── README.md                      # 项目文档
+```

-#### 奖品管理
- 添加奖品（名称、库存数量）
- 查看奖品使用情况（已用/总库存）
- 删除奖品
+---

-#### 轮次管理
- 创建抽奖轮次
- 为每个轮次配置奖品和抽取人数
- 查看轮次完成状态
- 删除轮次
+## 📖 使用文档

-#### 中奖记录
- 查看所有中奖记录
- 导出中奖名单
- 清空中奖记录（重置抽奖）
+### 路由说明

-#### 背景设置
- 上传自定义背景图片（支持 JPG、PNG、GIF）
- 预览背景效果
- 清除背景图片
+| 路径 | 组件 | 说明 |
+|------|------|------|
+| `/` | 重定向 | 默认重定向到参与者管理 |
+| `/admin/participants` | Participants | 参与者管理页面 |
+| `/admin/prizes` | Prizes | 奖品管理页面 |
+| `/admin/rounds` | Rounds | 轮次管理页面 |
+| `/admin/winners` | Winners | 中奖记录页面 |
+| `/display` | Display | 大屏展示页面 |

-### 展示端（/display）
+### 快捷键

-#### 显示模式
- **滚动模式**：抽奖时名单滚动显示
- **结果模式**：展示中奖者名单，支持多列布局
+#### 大屏展示端
+- **← →** - 切换轮次
+- **Space** - 开始/停止抽奖

-#### 快捷键
- `←` `→`：切换抽奖轮次
- `Space`：开始/停止抽奖
+### CSV 导入格式

-## 数据存储
+```
+姓名,部门,工号
+张三,技术部,1001
+李四,市场部,1002
+王五,财务部,1003
+```

-系统使用浏览器本地 IndexedDB 存储数据，数据库名称为 `LotteryDB`，包含以下数据：
+**注意：**
+- 第一行为字段名
+- 后续行为数据
+- 支持中文字段名
+- 使用逗号分隔

- `participants`：参与者名单
- `prizes`：奖品列表
- `rounds`：抽奖轮次
- `winners`：中奖记录
- `fields`：字段配置
- `backgroundImage`：背景图片
+### 数据存储

-**注意**：清除浏览器数据会导致所有抽奖数据丢失，请定期导出备份。
+系统使用 IndexedDB 存储所有数据，包括：

-## 开发说明
+- **lottery_fields** - 字段配置
+- **lottery_participants** - 参与者列表
+- **lottery_prizes** - 奖品列表
+- **lottery_rounds** - 轮次列表
+- **lottery_winners** - 中奖记录
+- **lottery_isRolling** - 抽奖状态
+- **lottery_currentRound** - 当前轮次
+- **lottery_displayMode** - 显示模式
+- **lottery_backgroundImage** - 背景图片
+- **lottery_columnsPerRow** - 每行列数

-### 路径别名
+---

- `@`：指向 `src/` 目录
- `@utils`：指向 `utils/` 目录
+## 🔧 开发指南

-### 样式变量
+### 代码规范

-项目使用 CSS 变量定义主题颜色和样式，可在 `src/styles/variables.css` 中修改。
+- 使用 Vue 3 Composition API
+- 使用 `<script setup>` 语法糖
+- 遵循 ESLint 规则
+- 组件命名使用 PascalCase

-## 作者
+### 命名规范

-上海潘哆呐科技有限公司
+- 文件名：PascalCase (组件) / kebab-case (工具)
+- 变量名：camelCase
+- 常量名：UPPER_SNAKE_CASE
+- 函数名：camelCase

-邮箱：work@pandorastudio.cn
+### 添加新功能

-## 许可证
+1. 在 `src/views/` 创建新组件
+2. 在 `src/router/index.js` 添加路由
+3. 在 `src/store/index.js` 添加状态管理
+4. 在相应页面添加入口

-私有项目
+---
+
+## 🎨 自定义样式
+
+### CSS 变量
+
+在 `src/styles/variables.css` 中定义了全局 CSS 变量：
+
+```css
+:root {
+  /* 颜色 */
+  --color-primary: #409EFF;
+  --color-secondary: #67C23A;
+  --color-accent: #E6A23C;
+  
+  /* 间距 */
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  
+  /* 字体 */
+  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+```
+
+### 主题定制
+
+修改 `src/styles/variables.css` 中的 CSS 变量即可自定义主题。
+
+---
+
+## ⚠️ 注意事项
+
+1. **数据备份**：建议定期导出参与者名单和中奖记录进行备份
+2. **浏览器兼容性**：需要支持 IndexedDB 的现代浏览器（Chrome、Firefox、Edge、Safari）
+3. **图片限制**：背景图片最大支持 10MB
+4. **CSV 格式**：导入文件第一行为字段名，后续行为数据
+5. **数据清理**：使用浏览器清除缓存会删除所有数据
+
+---
+
+## 🐛 常见问题
+
+### Q: 数据会丢失吗？
+A: 数据存储在浏览器的 IndexedDB 中，清除浏览器缓存会丢失数据，建议定期导出备份。
+
+### Q: 支持哪些浏览器？
+A: 支持所有现代浏览器（Chrome、Firefox、Edge、Safari）的最新版本。
+
+### Q: 可以同时打开多个标签页吗？
+A: 可以，系统支持跨标签页数据同步。
+
+### Q: 如何清空所有数据？
+A: 在管理后台的"中奖记录"页面点击"清空"按钮。
+
+### Q: 抽奖算法公平吗？
+A: 采用 Fisher-Yates 洗牌算法，确保每个参与者被抽中的概率相同。
+
+---
+
+## 📄 许可证
+
+版权所有 © 2025 上海潘哆呐科技有限公司
+
+---
+
+## 📞 联系方式
+
+- **公司**: 上海潘哆呐科技有限公司
+- **邮箱**: work@pandorastudio.cn
+- **项目地址**: https://git.pandorastudio.cn/product/rollingDraw.git
+
+---
+
+## 🙏 致谢
+
+感谢以下开源项目：
+
+- [Vue.js](https://vuejs.org/)
+- [Vite](https://vitejs.dev/)
+- [Element Plus](https://element-plus.org/)
+- [Pinia](https://pinia.vuejs.org/)
+
+---
+
+<div align="center">
+
+**如果这个项目对你有帮助，请给一个 ⭐️**
+
+Made with ❤️ by Pandora Studio
+
+</div>
--- a/admin/.gitignore
+++ b/admin/.gitignore
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
--- a/admin/index.html
+++ b/admin/index.html
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>admin</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
--- a/admin/package-lock.json
+++ b/admin/package-lock.json
--- a/admin/package.json
+++ b/admin/package.json
@@ -1,21 +0,0 @@
-{
-  "name": "admin",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.3",
-    "typescript": "~5.9.3",
-    "vite": "^7.2.4"
-  },
-  "dependencies": {
-    "@element-plus/icons-vue": "^2.3.2",
-    "element-plus": "^2.13.1",
-    "pinia": "^3.0.4"
-  }
-}
--- a/admin/public/vite.svg
+++ b/admin/public/vite.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/admin/src/App.vue
+++ b/admin/src/App.vue
--- a/admin/src/counter.ts
+++ b/admin/src/counter.ts
@@ -1,9 +0,0 @@
-export function setupCounter(element: HTMLButtonElement) {
-  let counter = 0
-  const setCounter = (count: number) => {
-    counter = count
-    element.innerHTML = `count is ${counter}`
-  }
-  element.addEventListener('click', () => setCounter(counter + 1))
-  setCounter(0)
-}
--- a/admin/src/main.js
+++ b/admin/src/main.js
@@ -1,23 +0,0 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import App from './App.vue'
-
-// 引入全局样式
-import './styles/variables.css'
-import './styles/global.css'
-import './styles/components.css'
-import './styles/element-plus.css'
-
-const app = createApp(App)
-app.use(createPinia())
-app.use(ElementPlus)
-
-// 注册所有图标
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-
-app.mount('#app')
--- a/admin/src/main.ts
+++ b/admin/src/main.ts
@@ -1,24 +0,0 @@
-import './style.css'
-import typescriptLogo from './typescript.svg'
-import viteLogo from '/vite.svg'
-import { setupCounter } from './counter.ts'
-
-document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="${viteLogo}" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://www.typescriptlang.org/" target="_blank">
-      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
-    </a>
-    <h1>Vite + TypeScript</h1>
-    <div class="card">
-      <button id="counter" type="button"></button>
-    </div>
-    <p class="read-the-docs">
-      Click on the Vite and TypeScript logos to learn more
-    </p>
-  </div>
-`
-
-setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
--- a/admin/src/store/index.js
+++ b/admin/src/store/index.js
@@ -1,491 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref, watch } from 'vue'
-import { indexedDB } from '@utils/indexedDB'
-
-export const useLotteryStore = defineStore('lottery', () => {
-  // 状态
-  const fields = ref([])
-  const participants = ref([])
-  const prizes = ref([])
-  const rounds = ref([])
-  const winners = ref([])
-  const isRolling = ref(false)
-  const currentRound = ref(null)
-  const displayMode = ref('scroll')
-  const backgroundImage = ref('')
-  const isInitialized = ref(false)
-
-  // 初始化 - 从IndexedDB加载数据
-  const initialize = async () => {
-    if (isInitialized.value) return
-    
-    try {
-      const data = await indexedDB.getAll()
-      
-      fields.value = data.lottery_fields || []
-      participants.value = data.lottery_participants || []
-      prizes.value = data.lottery_prizes || []
-      rounds.value = data.lottery_rounds || []
-      winners.value = data.lottery_winners || []
-      isRolling.value = data.lottery_isRolling === 'true'
-      currentRound.value = data.lottery_currentRound || null
-      displayMode.value = data.lottery_displayMode || 'scroll'
-      backgroundImage.value = data.lottery_backgroundImage || ''
-      
-      isInitialized.value = true
-    } catch (error) {
-      console.error('Failed to initialize from IndexedDB:', error)
-      // 使用默认值
-      fields.value = [{key: 'name', label: '姓名', required: true}]
-      isInitialized.value = true
-    }
-  }
-
-  // 保存单个数据到IndexedDB
-  const saveData = async (key, value) => {
-    try {
-      console.log(`Saving ${key} to IndexedDB...`)
-      // 深拷贝数据以避免Vue响应式包装器
-      const clonedValue = JSON.parse(JSON.stringify(value))
-      await indexedDB.set(key, clonedValue)
-      
-      // 触发localStorage事件通知其他标签页
-      localStorage.setItem('lottery_data_changed', Date.now().toString())
-      
-      console.log(`Successfully saved ${key}`)
-    } catch (error) {
-      console.error(`Failed to save ${key} to IndexedDB:`, error)
-      throw error
-    }
-  }
-
-  // ============ 字段管理 ============
-  const addField = async (field) => {
-    const newField = {
-      id: Date.now(),
-      key: field.key,
-      label: field.label,
-      required: field.required || false
-    }
-    fields.value.push(newField)
-    await saveData('lottery_fields', fields.value)
-  }
-
-  const updateField = async (field) => {
-    const index = fields.value.findIndex(f => f.id === field.id)
-    if (index > -1) {
-      fields.value[index] = field
-      await saveData('lottery_fields', fields.value)
-    }
-  }
-
-  const removeField = async (id) => {
-    const index = fields.value.findIndex(f => f.id === id)
-    if (index > -1) {
-      fields.value.splice(index, 1)
-      await saveData('lottery_fields', fields.value)
-    }
-  }
-
-  // ============ 参与者管理 ============
-  const addParticipant = async (data) => {
-    const participant = { id: Date.now(), ...data }
-    participants.value.push(participant)
-    await saveData('lottery_participants', participants.value)
-  }
-
-  const updateParticipant = async (id, data) => {
-    const index = participants.value.findIndex(p => p.id === id)
-    if (index > -1) {
-      participants.value[index] = { ...participants.value[index], ...data }
-      await saveData('lottery_participants', participants.value)
-    }
-  }
-
-  const removeParticipant = async (id) => {
-    const index = participants.value.findIndex(p => p.id === id)
-    if (index > -1) {
-      participants.value.splice(index, 1)
-      await saveData('lottery_participants', participants.value)
-    }
-  }
-
-  const clearParticipants = async () => {
-    participants.value = []
-    await saveData('lottery_participants', participants.value)
-  }
-
-  const importParticipantsFromFile = (file) => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader()
-      reader.onload = async (e) => {
-        try {
-          const content = e.target.result
-          const lines = content.split('\n').map(l => l.trim()).filter(l => l)
-          
-          // 检测是否是CSV格式（包含逗号）
-          const isCSV = lines.some(line => line.includes(','))
-          
-          if (isCSV) {
-            // CSV格式导入
-            const headers = lines[0].split(',').map(h => h.trim())
-            const data = []
-            
-            // 自动添加缺失的字段到配置
-            headers.forEach(header => {
-              if (!fields.value.some(f => f.key === header)) {
-                fields.value.push({
-                  id: Date.now() + Math.random(),
-                  key: header,
-                  label: header,
-                  required: false
-                })
-              }
-            })
-            
-            // 保存更新后的字段配置
-            await saveData('lottery_fields', fields.value)
-            
-            for (let i = 1; i < lines.length; i++) {
-              const values = lines[i].split(',').map(v => v.trim())
-              const participant = { id: Date.now() + i }
-              headers.forEach((header, index) => {
-                participant[header] = values[index] || ''
-              })
-              data.push(participant)
-            }
-            
-            participants.value.push(...data)
-            await saveData('lottery_participants', participants.value)
-            resolve(data.length)
-          } else {
-            // 简单文本格式导入（每行一个姓名）
-            const data = lines.map(line => ({
-              id: Date.now() + Math.random(),
-              name: line
-            }))
-            participants.value.push(...data)
-            await saveData('lottery_participants', participants.value)
-            resolve(data.length)
-          }
-        } catch (error) {
-          reject(error)
-        }
-      }
-      reader.onerror = () => reject(new Error('文件读取失败'))
-      reader.readAsText(file)
-    })
-  }
-
-  // ============ 奖品管理 ============
-  const addPrize = async (prize) => {
-    prizes.value.push({
-      id: Date.now(),
-      name: prize.name,
-      stock: parseInt(prize.stock) || 0,
-      used: 0
-    })
-    await saveData('lottery_prizes', prizes.value)
-  }
-
-  const updatePrize = async (prize) => {
-    const index = prizes.value.findIndex(p => p.id === prize.id)
-    if (index > -1) {
-      prizes.value[index] = prize
-      await saveData('lottery_prizes', prizes.value)
-    }
-  }
-
-  const removePrize = async (id) => {
-    const index = prizes.value.findIndex(p => p.id === id)
-    if (index > -1) {
-      prizes.value.splice(index, 1)
-      await saveData('lottery_prizes', prizes.value)
-    }
-  }
-
-  const getPrizeAvailable = (prizeId) => {
-    const prize = prizes.value.find(p => p.id === prizeId)
-    return prize ? prize.stock - prize.used : 0
-  }
-
-  // ============ 轮次管理 ============
-  const addRound = async (round) => {
-    rounds.value.push({
-      id: Date.now(),
-      name: round.name,
-      prizeId: round.prizeId,
-      count: parseInt(round.count) || 1,
-      completed: false
-    })
-    await saveData('lottery_rounds', rounds.value)
-  }
-
-  const updateRound = async (round) => {
-    const index = rounds.value.findIndex(r => r.id === round.id)
-    if (index > -1) {
-      rounds.value[index] = round
-      await saveData('lottery_rounds', rounds.value)
-    }
-  }
-
-  const removeRound = async (id) => {
-    const index = rounds.value.findIndex(r => r.id === id)
-    if (index > -1) {
-      rounds.value.splice(index, 1)
-      await saveData('lottery_rounds', rounds.value)
-    }
-  }
-
-  const getPrizeForRound = (roundId) => {
-    const round = rounds.value.find(r => r.id === roundId)
-    if (!round) return null
-    return prizes.value.find(p => p.id === round.prizeId)
-  }
-
-  // ============ 抽奖控制 ============
-  const startLottery = async (round) => {
-    const prize = getPrizeForRound(round.id)
-    if (!prize) {
-      throw new Error('奖品不存在')
-    }
-    if (prize.used >= prize.stock) {
-      throw new Error('奖品库存不足')
-    }
-    if (round.completed) {
-      throw new Error('该轮次已完成')
-    }
-    if (participants.value.length === 0) {
-      throw new Error('参与者名单为空')
-    }
-
-    currentRound.value = round
-    isRolling.value = true
-    displayMode.value = 'scroll'
-    
-    await saveData('lottery_currentRound', currentRound.value)
-    await saveData('lottery_isRolling', isRolling.value)
-    await saveData('lottery_displayMode', displayMode.value)
-  }
-
-  const stopLottery = async () => {
-    if (!currentRound.value) return
-
-    const round = rounds.value.find(r => r.id === currentRound.value.id)
-    const prize = prizes.value.find(p => p.id === round.prizeId)
-
-    // 获取可用的参与者（未中奖）
-    const availableParticipants = participants.value.filter(
-      p => !winners.value.some(w => w.id === p.id)
-    )
-
-    // 计算本次抽奖人数
-    const maxAvailable = prize.stock - prize.used
-    const roundCount = Math.min(round.count, maxAvailable, availableParticipants.length)
-
-    if (roundCount === 0) {
-      isRolling.value = false
-      displayMode.value = 'result'
-      await saveData('lottery_isRolling', isRolling.value)
-      await saveData('lottery_displayMode', displayMode.value)
-      return
-    }
-
-    // 随机抽取
-    const shuffled = [...availableParticipants].sort(() => Math.random() - 0.5)
-    const newWinners = shuffled.slice(0, roundCount)
-
-    // 记录中奖者
-    newWinners.forEach(participant => {
-      winners.value.push({
-        id: participant.id,
-        ...participant,
-        prizeId: prize.id,
-        prizeName: prize.name,
-        roundId: round.id,
-        roundName: round.name,
-        time: new Date().toISOString()
-      })
-    })
-
-    // 更新奖品使用量
-    prize.used += roundCount
-
-    // 更新轮次状态
-    round.completed = roundCount >= round.count || prize.used >= prize.stock
-
-    isRolling.value = false
-    displayMode.value = 'result'
-
-    await saveData('lottery_winners', winners.value)
-    await saveData('lottery_prizes', prizes.value)
-    await saveData('lottery_rounds', rounds.value)
-    await saveData('lottery_isRolling', isRolling.value)
-    await saveData('lottery_displayMode', displayMode.value)
-  }
-
-  const resetLottery = async () => {
-    winners.value = []
-    isRolling.value = false
-    currentRound.value = null
-    displayMode.value = 'scroll'
-
-    // 重置奖品使用量
-    prizes.value.forEach(p => {
-      p.used = 0
-    })
-
-    // 重置轮次状态
-    rounds.value.forEach(r => {
-      r.completed = false
-    })
-
-    await saveData('lottery_winners', winners.value)
-    await saveData('lottery_isRolling', isRolling.value)
-    await saveData('lottery_currentRound', currentRound.value)
-    await saveData('lottery_displayMode', displayMode.value)
-    await saveData('lottery_prizes', prizes.value)
-    await saveData('lottery_rounds', rounds.value)
-  }
-
-  // ============ 导出功能 ============
-  const exportWinners = () => {
-    if (winners.value.length === 0) return
-    
-    // 获取所有字段
-    const participantFields = Object.keys(winners.value[0]).filter(
-      key => !['id', 'prizeId', 'prizeName', 'roundId', 'roundName', 'time'].includes(key)
-    )
-    
-    const headers = [...participantFields, '奖品', '轮次', '时间']
-    const rows = winners.value.map(w => {
-      const row = {}
-      participantFields.forEach(field => {
-        row[field] = w[field] || ''
-      })
-      row['奖品'] = w.prizeName
-      row['轮次'] = w.roundName
-      row['时间'] = new Date(w.time).toLocaleString()
-      return row
-    })
-
-    // 转换为CSV格式
-    const csv = [headers.join(','), ...rows.map(row => headers.map(h => row[h]).join(','))].join('\n')
-
-    // 创建下载
-    const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' })
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement('a')
-    link.href = url
-    link.download = `中奖名单_${new Date().toLocaleDateString()}.csv`
-    link.click()
-    URL.revokeObjectURL(url)
-  }
-
-  const exportParticipants = () => {
-    if (participants.value.length === 0) return
-    
-    // 获取所有字段
-    const allKeys = new Set()
-    participants.value.forEach(p => {
-      Object.keys(p).forEach(key => {
-        if (key !== 'id') allKeys.add(key)
-      })
-    })
-    
-    const headers = Array.from(allKeys)
-    const rows = participants.value.map(p => headers.map(h => p[h] || '').join(','))
-
-    const csv = [headers.join(','), ...rows].join('\n')
-    const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' })
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement('a')
-    link.href = url
-    link.download = `抽奖名单_${new Date().toLocaleDateString()}.csv`
-    link.click()
-    URL.revokeObjectURL(url)
-  }
-
-  // ============ 显示控制 ============
-  const switchDisplayMode = async (mode) => {
-    displayMode.value = mode
-    await saveData('lottery_displayMode', displayMode.value)
-  }
-
-  const setBackgroundImage = async (imageData) => {
-    try {
-      console.log('setBackgroundImage called with image data length:', imageData ? imageData.length : 0)
-      await saveData('lottery_backgroundImage', imageData)
-      backgroundImage.value = imageData
-      console.log('setBackgroundImage completed successfully')
-    } catch (error) {
-      console.error('Failed to save background image:', error)
-      throw new Error('保存背景图片失败')
-    }
-  }
-
-  const clearBackgroundImage = async () => {
-    try {
-      await indexedDB.delete('lottery_backgroundImage')
-      backgroundImage.value = ''
-    } catch (error) {
-      console.error('Failed to clear background image:', error)
-      throw new Error('清除背景图片失败')
-    }
-  }
-
-  return {
-    // 状态
-    fields,
-    participants,
-    prizes,
-    rounds,
-    winners,
-    isRolling,
-    currentRound,
-    displayMode,
-    backgroundImage,
-    isInitialized,
-
-    // 初始化
-    initialize,
-
-    // 字段管理
-    addField,
-    updateField,
-    removeField,
-
-    // 参与者管理
-    addParticipant,
-    updateParticipant,
-    removeParticipant,
-    clearParticipants,
-    importParticipantsFromFile,
-
-    // 奖品管理
-    addPrize,
-    updatePrize,
-    removePrize,
-    getPrizeAvailable,
-
-    // 轮次管理
-    addRound,
-    updateRound,
-    removeRound,
-    getPrizeForRound,
-
-    // 抽奖控制
-    startLottery,
-    stopLottery,
-    resetLottery,
-
-    // 导出功能
-    exportWinners,
-    exportParticipants,
-
-    // 显示控制
-    switchDisplayMode,
-    setBackgroundImage,
-    clearBackgroundImage
-  }
-})
--- a/admin/src/style.css
+++ b/admin/src/style.css
@@ -1,97 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  padding: 0;
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
--- a/admin/src/styles/components.css
+++ b/admin/src/styles/components.css
@@ -1,249 +0,0 @@
-/* 组件样式 */
-
-/* ===== 按钮组件 ===== */
-.el-button {
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-medium);
-  border-radius: var(--border-radius-md);
-  transition: var(--transition-normal);
-  box-shadow: var(--shadow-small);
-}
-
-.el-button--primary {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
-}
-
-.el-button--primary:hover {
-  background-color: var(--color-secondary);
-  border-color: var(--color-secondary);
-  box-shadow: var(--shadow-button);
-}
-
-.el-button--success {
-  background-color: var(--color-success);
-  border-color: var(--color-success);
-}
-
-.el-button--warning {
-  background-color: var(--color-warning);
-  border-color: var(--color-warning);
-}
-
-.el-button--danger {
-  background-color: var(--color-danger);
-  border-color: var(--color-danger);
-}
-
-/* ===== 卡片组件 ===== */
-.el-card {
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-medium);
-  border: 1px solid var(--color-border);
-}
-
-.el-card__header {
-  font-family: var(--font-family-secondary);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-lg);
-  color: var(--color-text-primary);
-  padding: var(--spacing-xl);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.el-card__body {
-  padding: var(--spacing-xl);
-}
-
-/* ===== 表单组件 ===== */
-.el-form-item__label {
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-}
-
-.el-input__wrapper {
-  border-radius: var(--border-radius-md);
-  transition: var(--transition-normal);
-}
-
-.el-input__wrapper:hover {
-  box-shadow: var(--shadow-small);
-}
-
-.el-input__wrapper.is-focus {
-  box-shadow: var(--shadow-medium);
-}
-
-/* ===== 表格组件 ===== */
-.el-table {
-  border-radius: var(--border-radius-lg);
-  overflow: hidden;
-}
-
-.el-table th.el-table__cell {
-  background-color: var(--color-primary);
-  color: var(--color-text-white);
-  font-family: var(--font-family-secondary);
-  font-weight: var(--font-weight-semibold);
-}
-
-.el-table tr {
-  transition: var(--transition-background);
-}
-
-.el-table--enable-row-hover .el-table__body tr:hover > td {
-  background-color: rgba(var(--color-secondary-rgb), 0.1);
-}
-
-/* ===== 对话框组件 ===== */
-.el-dialog {
-  border-radius: var(--border-radius-xl);
-  box-shadow: var(--shadow-large);
-}
-
-.el-dialog__header {
-  font-family: var(--font-family-secondary);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-xl);
-  color: var(--color-text-primary);
-  padding: var(--spacing-2xl);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.el-dialog__body {
-  padding: var(--spacing-2xl);
-}
-
-.el-dialog__footer {
-  padding: var(--spacing-xl) var(--spacing-2xl);
-  border-top: 1px solid var(--color-border);
-}
-
-/* ===== 标签组件 ===== */
-.el-tag {
-  border-radius: var(--border-radius-md);
-  font-weight: var(--font-weight-medium);
-}
-
-.el-tag--success {
-  background-color: rgba(var(--color-success), 0.1);
-  color: var(--color-success);
-  border-color: var(--color-success);
-}
-
-.el-tag--warning {
-  background-color: rgba(var(--color-warning), 0.1);
-  color: var(--color-warning);
-  border-color: var(--color-warning);
-}
-
-.el-tag--danger {
-  background-color: rgba(var(--color-danger), 0.1);
-  color: var(--color-danger);
-  border-color: var(--color-danger);
-}
-
-/* ===== 消息提示组件 ===== */
-.el-message {
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-large);
-  font-family: var(--font-family-primary);
-}
-
-.el-message--success {
-  background-color: var(--color-success);
-  border-color: var(--color-success);
-}
-
-.el-message--warning {
-  background-color: var(--color-warning);
-  border-color: var(--color-warning);
-}
-
-.el-message--error {
-  background-color: var(--color-danger);
-  border-color: var(--color-danger);
-}
-
-/* ===== 自定义卡片样式 ===== */
-.custom-card {
-  background: var(--color-background);
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-medium);
-  padding: var(--spacing-2xl);
-  transition: var(--transition-normal);
-}
-
-.custom-card:hover {
-  box-shadow: var(--shadow-large);
-  transform: translateY(-2px);
-}
-
-/* ===== 标题样式 ===== */
-.page-title {
-  font-family: var(--font-family-secondary);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-3xl);
-  color: var(--color-primary);
-  margin-bottom: var(--spacing-xl);
-}
-
-.section-title {
-  font-family: var(--font-family-secondary);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-xl);
-  color: var(--color-text-primary);
-  margin-bottom: var(--spacing-lg);
-  padding-bottom: var(--spacing-sm);
-  border-bottom: 2px solid var(--color-secondary);
-}
-
-/* ===== 统计卡片 ===== */
-.stat-card {
-  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
-  color: var(--color-text-white);
-  border-radius: var(--border-radius-xl);
-  padding: var(--spacing-2xl);
-  box-shadow: var(--shadow-large);
-}
-
-.stat-card .stat-value {
-  font-family: var(--font-family-secondary);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-4xl);
-  margin-bottom: var(--spacing-sm);
-}
-
-.stat-card .stat-label {
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-md);
-  opacity: 0.9;
-}
-
-/* ===== 操作按钮组 ===== */
-.action-buttons {
-  display: flex;
-  gap: var(--spacing-md);
-  flex-wrap: wrap;
-}
-
-/* ===== 表单区域 ===== */
-.form-section {
-  background: var(--color-background);
-  border-radius: var(--border-radius-lg);
-  padding: var(--spacing-2xl);
-  box-shadow: var(--shadow-medium);
-  margin-bottom: var(--spacing-xl);
-}
-
-.form-section-title {
-  font-family: var(--font-family-secondary);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-lg);
-  color: var(--color-text-primary);
-  margin-bottom: var(--spacing-lg);
-  padding-bottom: var(--spacing-sm);
-  border-bottom: 1px solid var(--color-border);
-}
--- a/admin/src/styles/element-plus.css
+++ b/admin/src/styles/element-plus.css
@@ -1,567 +0,0 @@
-/* Element Plus 组件样式覆盖 - 基于参考项目设计 */
-
-/* ===== 按钮组件 ===== */
-.el-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-sm);
-  border: 1px solid transparent;
-  border-radius: var(--border-radius-md);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  font-family: var(--font-family-primary);
-  text-decoration: none;
-  cursor: pointer;
-  transition: var(--transition-color), var(--transition-background), var(--transition-border), var(--transition-box-shadow), var(--transition-transform);
-  background: none;
-  color: var(--color-text-primary);
-  padding: var(--spacing-lg) var(--spacing-xl);
-}
-
-.el-button:focus {
-  outline: 2px solid var(--color-secondary);
-  outline-offset: 2px;
-}
-
-.el-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.el-button--primary {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: var(--color-text-white);
-  box-shadow: var(--shadow-button);
-}
-
-.el-button--primary:hover {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
-}
-
-.el-button--primary:active {
-  transform: translateY(0);
-  box-shadow: var(--shadow-button);
-}
-
-.el-button--success {
-  background: var(--color-success);
-  border-color: var(--color-success);
-  color: var(--color-text-white);
-  box-shadow: 0 4px 16px rgba(var(--color-success-rgb), 0.3);
-}
-
-.el-button--success:hover {
-  background: var(--color-success);
-  border-color: var(--color-success);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(var(--color-success-rgb), 0.4);
-}
-
-.el-button--success:active {
-  transform: translateY(0);
-  box-shadow: 0 4px 16px rgba(var(--color-success-rgb), 0.3);
-}
-
-.el-button--danger {
-  background: var(--color-danger);
-  border-color: var(--color-danger);
-  color: var(--color-text-white);
-  box-shadow: 0 4px 16px rgba(var(--color-danger-rgb), 0.3);
-}
-
-.el-button--danger:hover {
-  background: var(--color-danger);
-  border-color: var(--color-danger);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(var(--color-danger-rgb), 0.4);
-}
-
-.el-button--danger:active {
-  transform: translateY(0);
-  box-shadow: 0 4px 16px rgba(var(--color-danger-rgb), 0.3);
-}
-
-.el-button--warning {
-  background: var(--color-warning);
-  border-color: var(--color-warning);
-  color: var(--color-text-white);
-  box-shadow: 0 4px 16px rgba(var(--color-warning-rgb), 0.3);
-}
-
-.el-button--warning:hover {
-  background: var(--color-warning);
-  border-color: var(--color-warning);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(var(--color-warning-rgb), 0.4);
-}
-
-.el-button--warning:active {
-  transform: translateY(0);
-  box-shadow: 0 4px 16px rgba(var(--color-warning-rgb), 0.3);
-}
-
-.el-button--info {
-  background: var(--color-info);
-  border-color: var(--color-info);
-  color: var(--color-text-white);
-  box-shadow: 0 4px 16px rgba(var(--color-info-rgb), 0.3);
-}
-
-.el-button--info:hover {
-  background: var(--color-info);
-  border-color: var(--color-info);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(var(--color-info-rgb), 0.4);
-}
-
-.el-button--info:active {
-  transform: translateY(0);
-  box-shadow: 0 4px 16px rgba(var(--color-info-rgb), 0.3);
-}
-
-.el-button--default {
-  background: var(--color-background);
-  border-color: var(--color-border);
-  color: var(--color-text-primary);
-}
-
-.el-button--default:hover {
-  background: rgba(var(--color-primary-rgb), 0.1);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
-.el-button--default:active {
-  transform: translateY(0);
-}
-
-.el-button--small {
-  padding: var(--spacing-sm) var(--spacing-lg);
-  font-size: var(--font-size-sm);
-  height: var(--button-height-sm);
-}
-
-.el-button--small.el-button--primary:hover,
-.el-button--small.el-button--success:hover,
-.el-button--small.el-button--info:hover,
-.el-button--small.el-button--warning:hover,
-.el-button--small.el-button--danger:hover {
-  transform: translateY(-1px);
-}
-
-.el-button--small.el-button--primary:active,
-.el-button--small.el-button--success:active,
-.el-button--small.el-button--info:active,
-.el-button--small.el-button--warning:active,
-.el-button--small.el-button--danger:active {
-  transform: translateY(0);
-}
-
-.el-button.is-circle {
-  border-radius: var(--border-radius-full);
-}
-
-.el-button.is-link {
-  border: none;
-  background: transparent;
-  box-shadow: none;
-  padding: var(--spacing-sm) var(--spacing-md);
-}
-
-.el-button.is-link:hover {
-  background: transparent;
-  transform: none;
-  box-shadow: none;
-}
-
-.el-button--text {
-  border: none;
-  background: transparent;
-  box-shadow: none;
-  color: var(--color-text-primary);
-}
-
-.el-button--text:hover {
-  background: rgba(var(--color-primary-rgb), 0.1);
-  color: var(--color-primary);
-  transform: none;
-}
-
-/* ===== 卡片组件 ===== */
-.el-card {
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-small);
-  border: 1px solid var(--color-border);
-}
-
-.el-card__header {
-  font-family: var(--font-family-secondary);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-lg);
-  color: var(--color-text-primary);
-  padding: var(--spacing-xl);
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-background);
-}
-
-.el-card__body {
-  padding: var(--spacing-xl);
-  background: var(--color-background);
-}
-
-/* ===== 表格组件 ===== */
-.el-table {
-  border-radius: var(--border-radius-lg);
-  overflow: hidden;
-  box-shadow: var(--shadow-small);
-  font-family: var(--font-family-primary);
-}
-
-.el-table .el-table__header-wrapper {
-  background: var(--color-background);
-}
-
-.el-table th {
-  background: var(--color-background);
-  color: var(--color-text-primary);
-  font-weight: var(--font-weight-semibold);
-  font-family: var(--font-family-secondary);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.el-table td {
-  color: var(--color-text-primary);
-  border-bottom: 1px solid var(--color-border);
-  font-size: var(--font-size-base);
-}
-
-.el-table .el-table__row:hover > td {
-  background: rgba(var(--color-primary-rgb), 0.05);
-}
-
-.el-table .el-table__row {
-  transition: var(--transition-background);
-}
-
-/* ===== 对话框组件 ===== */
-.el-dialog {
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-large);
-  overflow: hidden;
-}
-
-.el-dialog__header {
-  background: var(--color-primary);
-  color: var(--color-text-white);
-  padding: var(--spacing-2xl);
-  border-bottom: none;
-}
-
-.el-dialog__title {
-  color: var(--color-text-white);
-  font-weight: var(--font-weight-semibold);
-  font-family: var(--font-family-secondary);
-}
-
-.el-dialog__headerbtn {
-  position: absolute;
-  top: 50%;
-  right: var(--spacing-lg);
-  transform: translateY(-50%);
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius-full);
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  transition: var(--transition-background), var(--transition-transform);
-}
-
-.el-dialog__headerbtn .el-dialog__close {
-  color: var(--color-text-white);
-  font-size: 16px;
-  font-weight: var(--font-weight-bold);
-}
-
-.el-dialog__headerbtn:hover {
-  background: rgba(255, 255, 255, 0.2);
-  transform: translateY(-50%) scale(1.1);
-}
-
-.el-dialog__body {
-  padding: var(--spacing-2xl);
-}
-
-.el-dialog__footer {
-  padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl);
-  border-top: 1px solid var(--color-border);
-  text-align: right;
-}
-
-/* ===== 表单组件 ===== */
-.el-form-item__label {
-  color: var(--color-text-primary);
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-primary);
-  font-size: var(--font-size-base);
-}
-
-.el-input__wrapper {
-  border-radius: var(--border-radius-md);
-  border: 1px solid var(--color-border);
-  background: var(--color-background);
-  transition: var(--transition-border), var(--transition-box-shadow);
-  box-shadow: none;
-}
-
-.el-input__wrapper:hover {
-  border-color: var(--color-primary);
-  box-shadow: none;
-}
-
-.el-input__wrapper.is-focus {
-  border-color: var(--color-primary);
-  box-shadow: var(--shadow-small);
-}
-
-.el-input__inner::placeholder {
-  color: var(--color-text-light);
-}
-
-.el-textarea__inner {
-  border-radius: var(--border-radius-md);
-  border: 1px solid var(--color-border);
-  background: var(--color-background);
-  transition: var(--transition-border), var(--transition-box-shadow);
-  font-family: var(--font-family-primary);
-  font-size: var(--font-size-base);
-  color: var(--color-text-primary);
-  line-height: var(--line-height-relaxed);
-  box-shadow: none;
-}
-
-.el-textarea__inner:hover {
-  border-color: var(--color-primary);
-  box-shadow: none;
-}
-
-.el-textarea__inner:focus {
-  border-color: var(--color-primary);
-  box-shadow: var(--shadow-small);
-}
-
-.el-textarea__inner::placeholder {
-  color: var(--color-text-light);
-}
-
-/* ===== 选择器组件 ===== */
-.el-select .el-input__wrapper {
-  border-radius: var(--border-radius-md);
-  box-shadow: none;
-}
-
-.el-select-dropdown {
-  border-radius: var(--border-radius-lg);
-  border: none;
-  box-shadow: var(--shadow-large);
-  padding: var(--spacing-md);
-}
-
-.el-select-dropdown__item {
-  border-radius: var(--border-radius-md);
-  padding: var(--spacing-lg) var(--spacing-xl);
-  transition: var(--transition-color), var(--transition-background);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-}
-
-.el-select-dropdown__item:hover {
-  background: rgba(var(--color-primary-rgb), 0.1);
-  color: var(--color-primary);
-}
-
-.el-select-dropdown__item.is-selected {
-  background: var(--color-primary);
-  color: var(--color-text-white);
-}
-
-/* ===== 数字输入框 ===== */
-.el-input-number {
-  width: 100px;
-}
-
-.el-input-number .el-input__wrapper {
-  border-radius: var(--border-radius-sm);
-  border: 1px solid var(--color-border);
-  background: var(--color-background);
-  transition: var(--transition-border), var(--transition-box-shadow);
-  box-shadow: none;
-}
-
-.el-input-number .el-input__wrapper:hover {
-  border-color: var(--color-primary);
-  box-shadow: none;
-}
-
-.el-input-number .el-input__wrapper.is-focus {
-  border-color: var(--color-primary);
-  box-shadow: var(--shadow-small);
-}
-
-/* ===== 上传组件 ===== */
-.el-upload-dragger {
-  border-radius: var(--border-radius-lg);
-  border: 2px dashed var(--color-border);
-  transition: var(--transition-border), var(--transition-background);
-}
-
-.el-upload-dragger:hover {
-  border-color: var(--color-primary);
-  background: rgba(var(--color-primary-rgb), 0.05);
-}
-
-/* ===== 标签组件 ===== */
-.el-tag {
-  border-radius: var(--border-radius-full);
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-primary);
-}
-
-.el-tag--success {
-  background: var(--color-success);
-  border-color: var(--color-success);
-  color: var(--color-text-white);
-}
-
-.el-tag--info {
-  background: var(--color-info);
-  border-color: var(--color-info);
-  color: var(--color-text-white);
-}
-
-.el-tag--warning {
-  background: var(--color-warning);
-  border-color: var(--color-warning);
-  color: var(--color-text-white);
-}
-
-.el-tag--danger {
-  background: var(--color-danger);
-  border-color: var(--color-danger);
-  color: var(--color-text-white);
-}
-
-/* ===== 消息提示 ===== */
-.el-message {
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-large);
-  font-family: var(--font-family-primary);
-}
-
-.el-message--success {
-  background: var(--color-success);
-  border-color: var(--color-success);
-}
-
-.el-message--warning {
-  background: var(--color-warning);
-  border-color: var(--color-warning);
-}
-
-.el-message--error {
-  background: var(--color-danger);
-  border-color: var(--color-danger);
-}
-
-.el-message--info {
-  background: var(--color-info);
-  border-color: var(--color-info);
-}
-
-/* ===== 复选框 ===== */
-.el-checkbox {
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-medium);
-}
-
-.el-checkbox__input.is-checked .el-checkbox__inner {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
-}
-
-.el-checkbox__inner:hover {
-  border-color: var(--color-primary);
-}
-
-/* ===== 分页 ===== */
-.el-pagination {
-  font-family: var(--font-family-primary);
-  font-size: var(--font-size-base);
-}
-
-.el-pagination .el-pager li {
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-  border-radius: var(--border-radius-sm);
-  margin: 0 2px;
-  transition: var(--transition-color), var(--transition-background);
-}
-
-.el-pagination .el-pager li.active {
-  background: var(--color-primary);
-  color: var(--color-text-white);
-}
-
-.el-pagination .el-pager li:hover {
-  color: var(--color-text-primary);
-}
-
-.el-pagination button {
-  border-radius: var(--border-radius-sm);
-}
-
-/* ===== 开关 ===== */
-.el-switch {
-  --el-switch-on-color: var(--color-success);
-}
-
-.el-switch__core {
-  border-radius: var(--border-radius-full);
-}
-
-/* ===== 下拉菜单 ===== */
-.el-dropdown-menu {
-  border-radius: var(--border-radius-lg);
-  border: none;
-  box-shadow: var(--shadow-large);
-  padding: var(--spacing-md);
-  background: var(--color-background);
-  overflow: hidden;
-  font-family: var(--font-family-primary);
-}
-
-.el-dropdown-menu__item {
-  border-radius: var(--border-radius-md);
-  padding: var(--spacing-lg) var(--spacing-xl);
-  transition: var(--transition-color), var(--transition-background);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-}
-
-.el-dropdown-menu__item:hover {
-  background: rgba(var(--color-primary-rgb), 0.1);
-  color: var(--color-primary);
-}
-
-.el-dropdown-menu__item.is-divided {
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
-  margin-top: 8px;
-  padding-top: 16px;
-}
--- a/admin/src/styles/global.css
+++ b/admin/src/styles/global.css
@@ -1,322 +0,0 @@
-/* 全局基础样式 */
-
-/* ===== 重置样式 ===== */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-body {
-  font-family: var(--font-family-primary);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-normal);
-  line-height: var(--line-height-normal);
-  color: var(--color-text-primary);
-  background-color: var(--color-background);
-  overflow-x: hidden;
-}
-
-/* ===== 通用样式 ===== */
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-family-secondary);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--line-height-tight);
-  margin-bottom: var(--spacing-md);
-  color: var(--color-text-primary);
-}
-
-h1 {
-  font-size: var(--font-size-4xl);
-}
-
-h2 {
-  font-size: var(--font-size-3xl);
-}
-
-h3 {
-  font-size: var(--font-size-2xl);
-}
-
-h4 {
-  font-size: var(--font-size-xl);
-}
-
-h5 {
-  font-size: var(--font-size-lg);
-}
-
-h6 {
-  font-size: var(--font-size-md);
-}
-
-p {
-  margin-bottom: var(--spacing-md);
-  color: var(--color-text-secondary);
-}
-
-a {
-  color: var(--color-secondary);
-  text-decoration: none;
-  transition: var(--transition-color);
-}
-
-a:hover {
-  color: var(--color-primary);
-}
-
-ul, ol {
-  margin-bottom: var(--spacing-md);
-  padding-left: var(--spacing-2xl);
-}
-
-li {
-  margin-bottom: var(--spacing-sm);
-  color: var(--color-text-secondary);
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
-
-/* ===== 工具类 ===== */
-.container {
-  width: 100%;
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0 var(--spacing-lg);
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-primary {
-  color: var(--color-primary);
-}
-
-.text-secondary {
-  color: var(--color-secondary);
-}
-
-.text-muted {
-  color: var(--color-text-light);
-}
-
-.font-bold {
-  font-weight: var(--font-weight-bold);
-}
-
-.font-semibold {
-  font-weight: var(--font-weight-semibold);
-}
-
-.font-medium {
-  font-weight: var(--font-weight-medium);
-}
-
-/* ===== 间距工具类 ===== */
-.m-0 { margin: 0; }
-.mt-0 { margin-top: 0; }
-.mr-0 { margin-right: 0; }
-.mb-0 { margin-bottom: 0; }
-.ml-0 { margin-left: 0; }
-.mx-0 { margin-left: 0; margin-right: 0; }
-.my-0 { margin-top: 0; margin-bottom: 0; }
-
-.m-1 { margin: var(--spacing-xs); }
-.mt-1 { margin-top: var(--spacing-xs); }
-.mr-1 { margin-right: var(--spacing-xs); }
-.mb-1 { margin-bottom: var(--spacing-xs); }
-.ml-1 { margin-left: var(--spacing-xs); }
-.mx-1 { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
-.my-1 { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
-
-.m-2 { margin: var(--spacing-sm); }
-.mt-2 { margin-top: var(--spacing-sm); }
-.mr-2 { margin-right: var(--spacing-sm); }
-.mb-2 { margin-bottom: var(--spacing-sm); }
-.ml-2 { margin-left: var(--spacing-sm); }
-.mx-2 { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
-.my-2 { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
-
-.m-3 { margin: var(--spacing-md); }
-.mt-3 { margin-top: var(--spacing-md); }
-.mr-3 { margin-right: var(--spacing-md); }
-.mb-3 { margin-bottom: var(--spacing-md); }
-.ml-3 { margin-left: var(--spacing-md); }
-.mx-3 { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
-.my-3 { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
-
-.m-4 { margin: var(--spacing-lg); }
-.mt-4 { margin-top: var(--spacing-lg); }
-.mr-4 { margin-right: var(--spacing-lg); }
-.mb-4 { margin-bottom: var(--spacing-lg); }
-.ml-4 { margin-left: var(--spacing-lg); }
-.mx-4 { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
-.my-4 { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
-
-.p-0 { padding: 0; }
-.pt-0 { padding-top: 0; }
-.pr-0 { padding-right: 0; }
-.pb-0 { padding-bottom: 0; }
-.pl-0 { padding-left: 0; }
-.px-0 { padding-left: 0; padding-right: 0; }
-.py-0 { padding-top: 0; padding-bottom: 0; }
-
-.p-1 { padding: var(--spacing-xs); }
-.pt-1 { padding-top: var(--spacing-xs); }
-.pr-1 { padding-right: var(--spacing-xs); }
-.pb-1 { padding-bottom: var(--spacing-xs); }
-.pl-1 { padding-left: var(--spacing-xs); }
-.px-1 { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
-.py-1 { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
-
-.p-2 { padding: var(--spacing-sm); }
-.pt-2 { padding-top: var(--spacing-sm); }
-.pr-2 { padding-right: var(--spacing-sm); }
-.pb-2 { padding-bottom: var(--spacing-sm); }
-.pl-2 { padding-left: var(--spacing-sm); }
-.px-2 { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
-.py-2 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
-
-.p-3 { padding: var(--spacing-md); }
-.pt-3 { padding-top: var(--spacing-md); }
-.pr-3 { padding-right: var(--spacing-md); }
-.pb-3 { padding-bottom: var(--spacing-md); }
-.pl-3 { padding-left: var(--spacing-md); }
-.px-3 { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
-.py-3 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
-
-.p-4 { padding: var(--spacing-lg); }
-.pt-4 { padding-top: var(--spacing-lg); }
-.pr-4 { padding-right: var(--spacing-lg); }
-.pb-4 { padding-bottom: var(--spacing-lg); }
-.pl-4 { padding-left: var(--spacing-lg); }
-.px-4 { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
-.py-4 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
-
-/* ===== Flexbox 工具类 ===== */
-.d-flex {
-  display: flex;
-}
-
-.flex-row {
-  flex-direction: row;
-}
-
-.flex-column {
-  flex-direction: column;
-}
-
-.justify-start {
-  justify-content: flex-start;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.align-start {
-  align-items: flex-start;
-}
-
-.align-center {
-  align-items: center;
-}
-
-.align-end {
-  align-items: flex-end;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-/* ===== 滚动条样式 ===== */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--color-border);
-  border-radius: var(--border-radius-sm);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-text-light);
-  border-radius: var(--border-radius-sm);
-  transition: var(--transition-background);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-secondary);
-}
-
-/* ===== Vue 应用样式 ===== */
-#app {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 过渡动画 */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity var(--transition-normal);
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.slide-fade-enter-active {
-  transition: all var(--transition-normal) ease-out;
-}
-
-.slide-fade-leave-active {
-  transition: all var(--transition-fast) ease-in;
-}
-
-.slide-fade-enter-from {
-  transform: translateY(-10px);
-  opacity: 0;
-}
-
-.slide-fade-leave-to {
-  transform: translateY(10px);
-  opacity: 0;
-}
--- a/admin/src/styles/variables.css
+++ b/admin/src/styles/variables.css
@@ -1,163 +0,0 @@
-/* 全局样式变量 - 基于琳盛网站设计系统 */
-
-/* ===== 色彩系统 ===== */
-:root {
-  /* 主色调 - 深棕红色 */
-  --color-primary: rgb(29, 17, 17);
-  --color-primary-rgb: 29, 17, 17;
-  
-  /* 次要色 - 青绿色 */
-  --color-secondary: rgb(0, 165, 141);
-  --color-secondary-rgb: 0, 165, 141;
-  
-  /* 强调色 - 深蓝色 */
-  --color-accent: rgb(34, 37, 121);
-  --color-accent-rgb: 34, 37, 121;
-  
-  /* 背景色 */
-  --color-background: rgb(255, 255, 255);
-  --color-background-rgb: 255, 255, 255;
-  
-  /* 文字颜色 */
-  --color-text-primary: rgb(29, 17, 17);
-  --color-text-secondary: rgb(64, 64, 64);
-  --color-text-light: rgb(120, 120, 120);
-  --color-text-white: rgb(255, 255, 255);
-  
-  /* 边框颜色 */
-  --color-border: rgb(225, 225, 225);
-  --color-border-light: rgba(0, 0, 0, 0.1);
-  
-  /* 状态颜色 */
-  --color-success: rgb(0, 165, 141);
-  --color-warning: rgb(243, 156, 18);
-  --color-danger: rgb(220, 53, 69);
-  --color-info: rgb(23, 162, 184);
-  
-  /* 阴影 */
-  --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.05);
-  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.1);
-  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.15);
-  --shadow-button: 0 4px 16px rgba(var(--color-primary-rgb), 0.3);
-}
-
-/* ===== 字体系统 ===== */
-:root {
-  /* 主字体 - Poppins */
-  --font-family-primary: 'Poppins', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  
-  /* 辅助字体 - Montserrat */
-  --font-family-secondary: 'Montserrat', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  
-  /* 等宽字体 */
-  --font-family-mono: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
-  
-  /* 字体大小 */
-  --font-size-xs: 12px;
-  --font-size-sm: 13px;
-  --font-size-base: 14px;
-  --font-size-md: 16px;
-  --font-size-lg: 18px;
-  --font-size-xl: 20px;
-  --font-size-2xl: 24px;
-  --font-size-3xl: 28px;
-  --font-size-4xl: 32px;
-  
-  /* 字体粗细 */
-  --font-weight-light: 300;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  
-  /* 行高 */
-  --line-height-tight: 1.2;
-  --line-height-normal: 1.4;
-  --line-height-relaxed: 1.6;
-  --line-height-loose: 1.8;
-}
-
-/* ===== 间距系统 ===== */
-:root {
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 12px;
-  --spacing-lg: 16px;
-  --spacing-xl: 20px;
-  --spacing-2xl: 24px;
-  --spacing-3xl: 32px;
-  --spacing-4xl: 40px;
-  --spacing-5xl: 48px;
-}
-
-/* ===== 圆角系统 ===== */
-:root {
-  --border-radius-none: 0px;
-  --border-radius-sm: 4px;
-  --border-radius-md: 8px;
-  --border-radius-lg: 12px;
-  --border-radius-xl: 16px;
-  --border-radius-2xl: 20px;
-  --border-radius-full: 50%;
-}
-
-/* ===== 过渡动画 ===== */
-:root {
-  --transition-fast: 0.15s ease;
-  --transition-normal: 0.3s ease;
-  --transition-slow: 0.5s ease;
-  
-  /* 简化的过渡效果 */
-  --transition-color: color var(--transition-normal);
-  --transition-background: background-color var(--transition-normal);
-  --transition-border: border-color var(--transition-normal);
-  --transition-transform: transform var(--transition-normal);
-  --transition-box-shadow: box-shadow var(--transition-normal);
-}
-
-/* ===== 断点系统 ===== */
-:root {
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-  --breakpoint-2xl: 1400px;
-}
-
-/* ===== Z-index 层级 ===== */
-:root {
-  --z-index-dropdown: 1000;
-  --z-index-sticky: 1020;
-  --z-index-fixed: 1030;
-  --z-index-modal-backdrop: 1040;
-  --z-index-modal: 1050;
-  --z-index-popover: 1060;
-  --z-index-tooltip: 1070;
-}
-
-/* ===== 组件特定变量 ===== */
-:root {
-  /* 按钮高度 */
-  --button-height-sm: 32px;
-  --button-height-md: 40px;
-  --button-height-lg: 48px;
-  --button-height-xl: 56px;
-  
-  /* 输入框高度 */
-  --input-height-sm: 32px;
-  --input-height-md: 40px;
-  --input-height-lg: 48px;
-  
-  /* 侧边栏 */
-  --sidebar-width-collapsed: 80px;
-  --sidebar-width-expanded: 260px;
-  --sidebar-height: 80px;
-  
-  /* 头部导航 */
-  --header-height: 108px;
-  
-  /* 卡片 */
-  --card-padding: var(--spacing-2xl);
-  --card-border-radius: var(--border-radius-lg);
-  --card-shadow: var(--shadow-medium);
-}
--- a/admin/src/typescript.svg
+++ b/admin/src/typescript.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>
--- a/admin/tsconfig.json
+++ b/admin/tsconfig.json
@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}
--- a/admin/vite.config.js
+++ b/admin/vite.config.js
@@ -1,13 +0,0 @@
-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'),
-      '@utils': path.resolve(__dirname, '../utils')
-    }
-  }
-})
--- a/display/.gitignore
+++ b/display/.gitignore
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
--- a/display/index.html
+++ b/display/index.html
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>display</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
--- a/display/package-lock.json
+++ b/display/package-lock.json
--- a/display/package.json
+++ b/display/package.json
@@ -1,20 +0,0 @@
-{
-  "name": "display",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.3",
-    "typescript": "~5.9.3",
-    "vite": "^7.2.4"
-  },
-  "dependencies": {
-    "element-plus": "^2.13.1",
-    "pinia": "^3.0.4"
-  }
-}
--- a/display/public/vite.svg
+++ b/display/public/vite.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/display/src/App.vue
+++ b/display/src/App.vue
@@ -1,451 +0,0 @@
-<template>
-  <div class="display-container" @keydown="handleKeydown" tabindex="0">
-    <!-- 快捷键提示 -->
-    <div class="shortcut-hints" v-if="!store.isRolling">
-      <div class="hint-item">
-        <span class="key">← →</span>
-        <span class="desc">切换轮次</span>
-      </div>
-      <div class="hint-item">
-        <span class="key">Space</span>
-        <span class="desc">开始/停止</span>
-      </div>
-    </div>
-
-    <!-- 当前轮次信息 -->
-    <div class="current-round-info" v-if="selectedRound">
-      <div class="round-name">{{ selectedRound.name }}</div>
-      <div class="prize-name">{{ getPrizeName(selectedRound.prizeId) }}</div>
-    </div>
-
-    <!-- 滚动模式 -->
-    <div v-if="store.displayMode === 'scroll'" class="scroll-mode">
-      <div class="scroll-list" :style="{ transform: `translateY(${scrollOffset}px)` }">
-        <div 
-          v-for="(person, index) in displayList" 
-          :key="person.id || index" 
-          class="scroll-item"
-          :class="{ 'highlight': index === highlightIndex }"
-        >
-          {{ getParticipantName(person) }}
-        </div>
-      </div>
-    </div>
-
-    <!-- 抽奖结果模式 -->
-    <div v-else class="result-mode">
-      <div class="winners-list">
-        <div 
-          v-for="(winner, index) in currentWinners" 
-          :key="winner.id || index" 
-          class="winner-item"
-          :style="{ animationDelay: `${index * 0.2}s` }"
-        >
-          <div class="winner-name">{{ getParticipantName(winner) }}</div>
-          <div class="winner-info" v-if="store.fields.length > 1">
-            {{ getParticipantDetails(winner) }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 状态指示器 -->
-    <div class="status-indicator" :class="{ 'active': store.isRolling }">
-      {{ store.isRolling ? '抽奖中...' : '等待抽奖' }}
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useLotteryStore } from './store'
-
-const store = useLotteryStore()
-
-const selectedRound = ref(null)
-const scrollOffset = ref(0)
-const highlightIndex = ref(0)
-let scrollInterval = null
-let highlightInterval = null
-
-const displayList = computed(() => {
-  if (store.participants.length === 0) return ['暂无名单']
-  return store.participants
-})
-
-const getPrizeName = (prizeId) => {
-  const prize = store.prizes.find(p => p.id === prizeId)
-  return prize ? prize.name : ''
-}
-
-const getParticipantName = (person) => {
-  if (typeof person === 'string') return person
-  
-  // 首先尝试从配置的字段中查找 name 字段
-  const nameField = store.fields.find(f => f.key === 'name')
-  if (nameField && person[nameField.key]) {
-    return person[nameField.key]
-  }
-  
-  // 如果没有 name 字段，尝试从配置的字段中找第一个有值的
-  const firstFieldWithValue = store.fields.find(f => person[f.key])
-  if (firstFieldWithValue) {
-    return person[firstFieldWithValue.key]
-  }
-  
-  // 如果配置的字段都没有值，尝试从参与者对象的所有字段中找
-  const allKeys = Object.keys(person).filter(key => key !== 'id')
-  if (allKeys.length > 0) {
-    // 优先找包含 "name" 的字段
-    const nameKey = allKeys.find(key => key.toLowerCase().includes('name'))
-    if (nameKey) {
-      return person[nameKey]
-    }
-    // 否则返回第一个字段的值
-    return person[allKeys[0]]
-  }
-  
-  return JSON.stringify(person)
-}
-
-const getParticipantDetails = (person) => {
-  const details = []
-  
-  // 首先显示配置的字段
-  store.fields.forEach(field => {
-    if (field.key !== 'name' && person[field.key]) {
-      details.push(`${field.label}: ${person[field.key]}`)
-    }
-  })
-  
-  // 如果配置的字段没有显示任何内容，尝试显示所有字段
-  if (details.length === 0) {
-    const allKeys = Object.keys(person).filter(key => key !== 'id')
-    allKeys.forEach(key => {
-      if (key.toLowerCase() !== 'name' && person[key]) {
-        details.push(`${key}: ${person[key]}`)
-      }
-    })
-  }
-  
-  return details.join(' | ')
-}
-
-const currentWinners = computed(() => {
-  if (!store.currentRound) return []
-  return store.winners
-    .filter(w => w.roundId === store.currentRound.id)
-    .sort((a, b) => new Date(a.time) - new Date(b.time))
-})
-
-const handleKeydown = (e) => {
-  // 空格键：开始/停止抽奖
-  if (e.code === 'Space') {
-    e.preventDefault()
-    if (store.isRolling) {
-      handleStopLottery()
-    } else if (selectedRound.value && !selectedRound.value.completed) {
-      handleStartLottery()
-    }
-  }
-  // 左右方向键：切换轮次
-  else if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {
-    e.preventDefault()
-    if (store.rounds.length === 0) return
-    
-    let currentIndex = -1
-    if (selectedRound.value) {
-      currentIndex = store.rounds.findIndex(r => r.id === selectedRound.value.id)
-    }
-    
-    if (e.code === 'ArrowLeft') {
-      // 向左切换
-      currentIndex = currentIndex <= 0 ? store.rounds.length - 1 : currentIndex - 1
-    } else {
-      // 向右切换
-      currentIndex = currentIndex >= store.rounds.length - 1 ? 0 : currentIndex + 1
-    }
-    
-    selectRound(store.rounds[currentIndex])
-  }
-}
-
-const selectRound = (round) => {
-  selectedRound.value = round
-}
-
-const handleStartLottery = () => {
-  if (!selectedRound.value) return
-  try {
-    store.startLottery(selectedRound.value)
-    startScroll()
-  } catch (error) {
-    alert(error.message)
-  }
-}
-
-const handleStopLottery = () => {
-  store.stopLottery()
-  stopScroll()
-}
-
-const startScroll = () => {
-  if (scrollInterval) clearInterval(scrollInterval)
-  if (highlightInterval) clearInterval(highlightInterval)
-
-  scrollInterval = setInterval(() => {
-    scrollOffset.value -= 2
-    if (Math.abs(scrollOffset.value) >= 60) {
-      scrollOffset.value = 0
-    }
-  }, 50)
-
-  highlightInterval = setInterval(() => {
-    highlightIndex.value = (highlightIndex.value + 1) % displayList.value.length
-  }, 300)
-}
-
-const stopScroll = () => {
-  if (scrollInterval) {
-    clearInterval(scrollInterval)
-    scrollInterval = null
-  }
-  if (highlightInterval) {
-    clearInterval(highlightInterval)
-    highlightInterval = null
-  }
-}
-
-onMounted(() => {
-  // 自动聚焦以便接收键盘事件
-  document.querySelector('.display-container')?.focus()
-  
-  if (store.displayMode === 'scroll' && store.isRolling) {
-    startScroll()
-  }
-})
-
-onUnmounted(() => {
-  stopScroll()
-  store.stopSync()
-})
-</script>
-
-<style scoped>
-.display-container {
-  width: 100vw;
-  height: 100vh;
-  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  outline: none;
-  font-family: var(--font-family-primary);
-}
-
-.display-container::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: v-bind('store.backgroundImage ? `url(${store.backgroundImage})` : "none"');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  z-index: 0;
-}
-
-.display-container::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.3);
-  z-index: 1;
-}
-
-.display-container > * {
-  position: relative;
-  z-index: 2;
-}
-
-/* 快捷键提示 */
-.shortcut-hints {
-  position: fixed;
-  top: var(--spacing-xl);
-  left: var(--spacing-xl);
-  display: flex;
-  gap: var(--spacing-lg);
-  z-index: 100;
-}
-
-.hint-item {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: var(--border-radius-md);
-  padding: var(--spacing-md) var(--spacing-lg);
-  backdrop-filter: blur(10px);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.key {
-  background: var(--color-secondary);
-  color: var(--color-text-white);
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-radius: var(--border-radius-sm);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-sm);
-  min-width: 30px;
-  text-align: center;
-  box-shadow: 0 2px 8px rgba(var(--color-secondary-rgb), 0.3);
-}
-
-.desc {
-  color: var(--color-text-white);
-  font-size: var(--font-size-sm);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-medium);
-}
-
-/* 当前轮次信息 */
-.current-round-info {
-  text-align: center;
-  margin-bottom: var(--spacing-4xl);
-}
-
-.round-name {
-  font-size: var(--font-size-4xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-white);
-  margin-bottom: var(--spacing-lg);
-  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
-  font-family: var(--font-family-secondary);
-}
-
-.prize-name {
-  font-size: 64px;
-  font-weight: var(--font-weight-bold);
-  color: var(--color-secondary);
-  text-shadow: 0 0 30px rgba(var(--color-secondary-rgb), 0.8);
-  font-family: var(--font-family-secondary);
-}
-
-/* 滚动模式 */
-.scroll-mode {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.scroll-list {
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.1s linear;
-}
-
-.scroll-item {
-  font-size: var(--font-size-4xl);
-  font-weight: var(--font-weight-bold);
-  color: rgba(255, 255, 255, 0.6);
-  padding: var(--spacing-md) var(--spacing-3xl);
-  text-align: center;
-  white-space: nowrap;
-  transition: var(--transition-normal);
-  font-family: var(--font-family-secondary);
-}
-
-.scroll-item.highlight {
-  color: var(--color-text-white);
-  font-size: 72px;
-  text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
-  transform: scale(1.2);
-}
-
-/* 结果模式 */
-.result-mode {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.winners-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 30px;
-  justify-content: center;
-  max-width: 1200px;
-}
-
-.winner-item {
-  font-size: 56px;
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-white);
-  padding: var(--spacing-xl) var(--spacing-4xl);
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: var(--border-radius-xl);
-  backdrop-filter: blur(10px);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-  animation: fadeInUp 0.6s ease forwards;
-  opacity: 0;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--font-family-secondary);
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* 状态指示器 */
-.status-indicator {
-  position: fixed;
-  bottom: var(--spacing-4xl);
-  right: var(--spacing-4xl);
-  padding: var(--spacing-lg) var(--spacing-3xl);
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 50px;
-  color: var(--color-text-white);
-  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-semibold);
-  backdrop-filter: blur(10px);
-  transition: var(--transition-normal);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  font-family: var(--font-family-secondary);
-}
-
-.status-indicator.active {
-  background: rgba(var(--color-secondary-rgb), 0.3);
-  animation: pulse 1.5s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-}
-</style>
--- a/display/src/counter.ts
+++ b/display/src/counter.ts
@@ -1,9 +0,0 @@
-export function setupCounter(element: HTMLButtonElement) {
-  let counter = 0
-  const setCounter = (count: number) => {
-    counter = count
-    element.innerHTML = `count is ${counter}`
-  }
-  element.addEventListener('click', () => setCounter(counter + 1))
-  setCounter(0)
-}
--- a/display/src/main.js
+++ b/display/src/main.js
@@ -1,9 +0,0 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import App from './App.vue'
-import './styles/variables.css'
-import './style.css'
-
-const app = createApp(App)
-app.use(createPinia())
-app.mount('#app')
--- a/display/src/main.ts
+++ b/display/src/main.ts
@@ -1,24 +0,0 @@
-import './style.css'
-import typescriptLogo from './typescript.svg'
-import viteLogo from '/vite.svg'
-import { setupCounter } from './counter.ts'
-
-document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="${viteLogo}" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://www.typescriptlang.org/" target="_blank">
-      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
-    </a>
-    <h1>Vite + TypeScript</h1>
-    <div class="card">
-      <button id="counter" type="button"></button>
-    </div>
-    <p class="read-the-docs">
-      Click on the Vite and TypeScript logos to learn more
-    </p>
-  </div>
-`
-
-setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
--- a/display/src/store/index.js
+++ b/display/src/store/index.js
@@ -1,153 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref, watch } from 'vue'
-import { indexedDB } from '@utils/indexedDB'
-
-export const useLotteryStore = defineStore('lottery', () => {
-  // 初始化数据
-  const fields = ref([])
-  const participants = ref([])
-  const prizes = ref([])
-  const rounds = ref([])
-  const winners = ref([])
-  const isRolling = ref(false)
-  const currentRound = ref(null)
-  const displayMode = ref('scroll')
-  const backgroundImage = ref('')
-  const isInitialized = ref(false)
-
-  // 从IndexedDB初始化数据
-  const initFromIndexedDB = async () => {
-    if (isInitialized.value) return
-    
-    try {
-      console.log('Display: Initializing from IndexedDB...')
-      const data = await indexedDB.getAll()
-      console.log('Display: Retrieved data keys:', Object.keys(data))
-      
-      fields.value = data.lottery_fields || []
-      participants.value = data.lottery_participants || []
-      prizes.value = data.lottery_prizes || []
-      rounds.value = data.lottery_rounds || []
-      winners.value = data.lottery_winners || []
-      isRolling.value = data.lottery_isRolling === 'true'
-      currentRound.value = data.lottery_currentRound || null
-      displayMode.value = data.lottery_displayMode || 'scroll'
-      backgroundImage.value = data.lottery_backgroundImage || ''
-      
-      console.log('Display: Initialized background image:', backgroundImage.value ? 'Yes' : 'No')
-      console.log('Display: Initialization completed')
-      
-      isInitialized.value = true
-    } catch (error) {
-      console.error('Display: Failed to initialize from IndexedDB:', error)
-      // 使用默认值
-      fields.value = [{key: 'name', label: '姓名', required: true}]
-      isInitialized.value = true
-    }
-  }
-
-  // 初始化
-  initFromIndexedDB()
-
-  // 监听localStorage变化来触发数据同步
-  const handleStorageChange = (e) => {
-    if (e.key === 'lottery_data_changed') {
-      console.log('Display: Storage change detected, reloading data...')
-      initFromIndexedDB()
-    }
-  }
-
-  if (typeof window !== 'undefined') {
-    window.addEventListener('storage', handleStorageChange)
-  }
-
-  // 轮询同步IndexedDB数据（作为备用）
-  let syncInterval = null
-  const startSync = () => {
-    if (syncInterval) return
-    
-    console.log('Display: Starting sync interval...')
-    
-    syncInterval = setInterval(async () => {
-      try {
-        const data = await indexedDB.getAll()
-        
-        // 只更新变化的值，避免不必要的重渲染
-        if (JSON.stringify(data.lottery_fields) !== JSON.stringify(fields.value)) {
-          fields.value = data.lottery_fields || []
-        }
-        if (JSON.stringify(data.lottery_participants) !== JSON.stringify(participants.value)) {
-          participants.value = data.lottery_participants || []
-        }
-        if (JSON.stringify(data.lottery_prizes) !== JSON.stringify(prizes.value)) {
-          prizes.value = data.lottery_prizes || []
-        }
-        if (JSON.stringify(data.lottery_rounds) !== JSON.stringify(rounds.value)) {
-          rounds.value = data.lottery_rounds || []
-        }
-        if (JSON.stringify(data.lottery_winners) !== JSON.stringify(winners.value)) {
-          winners.value = data.lottery_winners || []
-        }
-        if (data.lottery_isRolling !== isRolling.value) {
-          isRolling.value = data.lottery_isRolling === 'true'
-        }
-        if (JSON.stringify(data.lottery_currentRound) !== JSON.stringify(currentRound.value)) {
-          currentRound.value = data.lottery_currentRound || null
-        }
-        if (data.lottery_displayMode !== displayMode.value) {
-          displayMode.value = data.lottery_displayMode || 'scroll'
-        }
-        if (data.lottery_backgroundImage !== backgroundImage.value) {
-          console.log('Display: Background image changed from', backgroundImage.value ? 'Yes' : 'No', 'to', data.lottery_backgroundImage ? 'Yes' : 'No')
-          backgroundImage.value = data.lottery_backgroundImage || ''
-        }
-      } catch (error) {
-        console.error('Display: Failed to sync data from IndexedDB:', error)
-      }
-    }, 1000) // 每秒同步一次
-  }
-
-  const stopSync = () => {
-    if (syncInterval) {
-      clearInterval(syncInterval)
-      syncInterval = null
-    }
-    if (typeof window !== 'undefined') {
-      window.removeEventListener('storage', handleStorageChange)
-    }
-  }
-
-  // 启动同步
-  startSync()
-
-  // ============ 只读方法 ============
-  const getPrizeForRound = (roundId) => {
-    const round = rounds.value.find(r => r.id === roundId)
-    if (!round) return null
-    return prizes.value.find(p => p.id === round.prizeId)
-  }
-
-  const switchDisplayMode = (mode) => {
-    displayMode.value = mode
-  }
-
-  return {
-    // 状态
-    fields,
-    participants,
-    prizes,
-    rounds,
-    winners,
-    isRolling,
-    currentRound,
-    displayMode,
-    backgroundImage,
-    isInitialized,
-
-    // 只读方法
-    getPrizeForRound,
-    switchDisplayMode,
-    startSync,
-    stopSync
-  }
-})
--- a/display/src/style.css
+++ b/display/src/style.css
@@ -1,30 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  padding: 0;
-  margin: 0;
-  width: 100vw;
-  height: 100vh;
-}
--- a/display/src/styles/variables.css
+++ b/display/src/styles/variables.css
@@ -1,93 +0,0 @@
-:root {
-  /* 颜色系统 - 参考项目配色 */
-  --color-primary: rgb(29, 17, 17);
-  --color-primary-rgb: 29, 17, 17;
-  
-  --color-secondary: rgb(0, 165, 141);
-  --color-secondary-rgb: 0, 165, 141;
-  
-  --color-accent: rgb(34, 37, 121);
-  --color-accent-rgb: 34, 37, 121;
-  
-  --color-success: rgb(0, 165, 141);
-  --color-warning: rgb(255, 193, 7);
-  --color-danger: rgb(220, 53, 69);
-  --color-info: rgb(23, 162, 184);
-  
-  --color-text-primary: rgb(51, 51, 51);
-  --color-text-secondary: rgb(108, 117, 125);
-  --color-text-light: rgb(173, 181, 189);
-  --color-text-white: rgb(255, 255, 255);
-  
-  --color-background: rgb(248, 249, 250);
-  --color-border: rgb(222, 226, 230);
-  --color-border-light: rgb(233, 236, 239);
-  
-  /* 字体系统 */
-  --font-family-primary: 'Poppins', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-family-secondary: 'Montserrat', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  
-  --font-size-xs: 12px;
-  --font-size-sm: 14px;
-  --font-size-base: 16px;
-  --font-size-lg: 18px;
-  --font-size-xl: 20px;
-  --font-size-2xl: 24px;
-  --font-size-3xl: 32px;
-  --font-size-4xl: 48px;
-  
-  --font-weight-light: 300;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  
-  /* 间距系统 */
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 12px;
-  --spacing-lg: 16px;
-  --spacing-xl: 20px;
-  --spacing-2xl: 24px;
-  --spacing-3xl: 32px;
-  --spacing-4xl: 40px;
-  
-  /* 圆角系统 */
-  --border-radius-sm: 4px;
-  --border-radius-md: 8px;
-  --border-radius-lg: 12px;
-  --border-radius-xl: 16px;
-  --border-radius-full: 50%;
-  
-  /* 阴影系统 */
-  --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.08);
-  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
-  --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.16);
-  --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.15);
-  
-  /* 过渡动画 */
-  --transition-fast: 0.15s ease;
-  --transition-normal: 0.3s ease;
-  --transition-slow: 0.5s ease;
-  --transition-color: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
-  --transition-background: background-color 0.3s ease;
-  --transition-border: border-color 0.3s ease;
-  --transition-box-shadow: box-shadow 0.3s ease;
-  --transition-transform: transform 0.3s ease;
-  
-  /* 行高 */
-  --line-height-tight: 1.2;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-  
-  /* 布局 */
-  --header-height: 64px;
-  --sidebar-height: 64px;
-  --button-height-sm: 32px;
-  --button-height-md: 40px;
-  --button-height-lg: 48px;
-  
-  /* 卡片 */
-  --card-border-radius: 12px;
-  --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
--- a/display/src/typescript.svg
+++ b/display/src/typescript.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>
--- a/display/tsconfig.json
+++ b/display/tsconfig.json
@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}
--- a/display/vite.config.js
+++ b/display/vite.config.js
@@ -1,13 +0,0 @@
-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'),
-      '@utils': path.resolve(__dirname, '../utils')
-    }
-  }
-})
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,7 +9,7 @@ const router = createRouter({
    },
    {
      path: '/admin',
-      component: () => import('@/views/AdminLayout.vue'),
+      component: () => import('@/views/Admin.vue'),
      children: [
        {
          path: 'participants',
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -112,6 +112,11 @@ export const useLotteryStore = defineStore('lottery', () => {
    }
  }

+  const updateFields = async (newFields) => {
+    fields.value = newFields
+    await saveData('lottery_fields', fields.value)
+  }
+
  // ============ 参与者管理 ============
  const addParticipant = async (participant) => {
    participants.value.push(participant)
@@ -454,6 +459,7 @@ export const useLotteryStore = defineStore('lottery', () => {
    addField,
    updateField,
    removeField,
+    updateFields,

    // 参与者管理
    addParticipant,
--- a/src/views/.gitkeep
+++ b/src/views/.gitkeep
@@ -1 +0,0 @@
-# Views directory
--- a/src/views/Admin.vue
+++ b/src/views/Admin.vue
--- a/src/views/AdminLayout.vue
+++ b/src/views/AdminLayout.vue
@@ -1,412 +0,0 @@
-<template>
-  <div class="admin-layout">
-    <el-container>
-      <el-header>
-        <div class="header-content">
-          <h1>抽奖管理系统</h1>
-          <div style="display: flex; gap: 10px">
-            <el-button type="info" @click="openDisplaySettings">
-              <el-icon><Setting /></el-icon>
-              显示设置
-            </el-button>
-            <el-button type="info" @click="showBackgroundDialog = true">
-              <el-icon><Picture /></el-icon>
-              背景设置
-            </el-button>
-            <el-button type="info" @click="showShortcutGuide = true">
-              <el-icon><QuestionFilled /></el-icon>
-              快捷键指南
-            </el-button>
-          </div>
-        </div>
-      </el-header>
-      
-      <el-container>
-        <el-aside width="200px">
-          <el-menu
-            :default-active="activeMenu"
-            router
-            class="admin-menu"
-          >
-            <el-menu-item index="/admin/participants">
-              <el-icon><User /></el-icon>
-              <span>名单管理</span>
-            </el-menu-item>
-            <el-menu-item index="/admin/prizes">
-              <el-icon><Present /></el-icon>
-              <span>奖品管理</span>
-            </el-menu-item>
-            <el-menu-item index="/admin/rounds">
-              <el-icon><List /></el-icon>
-              <span>轮次管理</span>
-            </el-menu-item>
-            <el-menu-item index="/admin/winners">
-              <el-icon><Trophy /></el-icon>
-              <span>中奖记录</span>
-            </el-menu-item>
-          </el-menu>
-        </el-aside>
-        
-        <el-main>
-          <router-view></router-view>
-        </el-main>
-      </el-container>
-    </el-container>
-    
-    <!-- 快捷键指南对话框 -->
-    <el-dialog v-model="showShortcutGuide" title="大屏端快捷键指南" width="500px">
-      <div class="shortcut-guide">
-        <div class="shortcut-item">
-          <span class="shortcut-key">← →</span>
-          <span class="shortcut-desc">切换轮次（左右方向键）</span>
-        </div>
-        <div class="shortcut-item">
-          <span class="shortcut-key">Space</span>
-          <span class="shortcut-desc">开始/停止抽奖</span>
-        </div>
-      </div>
-      <template #footer>
-        <el-button type="primary" @click="showShortcutGuide = false">知道了</el-button>
-      </template>
-    </el-dialog>
-    
-    <!-- 背景图片配置对话框 -->
-    <el-dialog v-model="showBackgroundDialog" title="大屏端背景图片" width="500px">
-      <div class="background-config">
-        <div v-if="store.backgroundImage" class="current-background">
-          <div class="background-label">当前背景图片：</div>
-          <img :src="store.backgroundImage" class="background-preview" />
-          <el-button type="danger" @click="clearBackgroundImage" style="margin-top: 10px">
-            清除背景
-          </el-button>
-        </div>
-        
-        <div class="upload-section">
-          <div class="background-label">上传新背景：</div>
-          <el-upload
-            :auto-upload="false"
-            :on-change="handleBackgroundChange"
-            :limit="1"
-            accept="image/*"
-            drag
-          >
-            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-            <div class="el-upload__text">
-              拖拽图片到此处或 <em>点击上传</em>
-            </div>
-            <template #tip>
-              <div class="el-upload__tip">
-                支持 JPG、PNG、GIF 等图片格式，最大支持10MB
-              </div>
-            </template>
-          </el-upload>
-          
-          <div v-if="backgroundImagePreview" class="preview-section">
-            <div class="background-label">预览：</div>
-            <img :src="backgroundImagePreview" class="background-preview" />
-          </div>
-        </div>
-      </div>
-      <template #footer>
-        <el-button @click="showBackgroundDialog = false">取消</el-button>
-        <el-button type="primary" @click="saveBackgroundImage" :disabled="!backgroundImagePreview">保存</el-button>
-      </template>
-    </el-dialog>
-    
-    <!-- 显示设置对话框 -->
-    <el-dialog v-model="showDisplaySettingsDialog" title="大屏端显示设置" width="400px">
-      <el-form label-width="120px">
-        <el-form-item label="每行显示人数">
-          <el-input-number 
-            v-model="tempColumnsPerRow" 
-            :min="1" 
-            :max="10" 
-            :step="1"
-          />
-          <div style="margin-top: 8px; color: var(--color-text-light); font-size: 12px;">
-            设置大屏端名单每行显示的人数，建议值：2-5
-          </div>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="showDisplaySettingsDialog = false">取消</el-button>
-        <el-button type="primary" @click="saveDisplaySettings">保存</el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
-import { useLotteryStore } from '../store'
-import { User, Present, List, Trophy, Picture, QuestionFilled, UploadFilled, Setting } from '@element-plus/icons-vue'
-import { ElMessage } from 'element-plus'
-
-const route = useRoute()
-const store = useLotteryStore()
-
-const activeMenu = computed(() => route.path)
-
-// 初始化store
-onMounted(async () => {
-  await store.initialize()
-})
-
-// 快捷键指南
-const showShortcutGuide = ref(false)
-
-// 显示设置
-const showDisplaySettingsDialog = ref(false)
-const tempColumnsPerRow = ref(3)
-
-const openDisplaySettings = () => {
-  tempColumnsPerRow.value = store.columnsPerRow
-  showDisplaySettingsDialog.value = true
-}
-
-const saveDisplaySettings = async () => {
-  try {
-    await store.setColumnsPerRow(tempColumnsPerRow.value)
-    showDisplaySettingsDialog.value = false
-    ElMessage.success('显示设置已保存')
-  } catch (error) {
-    ElMessage.error('保存显示设置失败：' + error.message)
-  }
-}
-
-// 背景图片配置
-const showBackgroundDialog = ref(false)
-const backgroundImageFile = ref(null)
-const backgroundImagePreview = ref('')
-
-const handleBackgroundChange = (file) => {
-  const maxSize = 10 * 1024 * 1024
-  if (file.raw.size > maxSize) {
-    ElMessage.error('图片大小不能超过10MB，请使用较小的图片')
-    backgroundImageFile.value = null
-    backgroundImagePreview.value = ''
-    return
-  }
-
-  backgroundImageFile.value = file.raw
-  
-  const reader = new FileReader()
-  reader.onload = (e) => {
-    backgroundImagePreview.value = e.target.result
-  }
-  reader.readAsDataURL(file.raw)
-}
-
-const saveBackgroundImage = async () => {
-  if (backgroundImagePreview.value) {
-    try {
-      await store.setBackgroundImage(backgroundImagePreview.value)
-      showBackgroundDialog.value = false
-      backgroundImagePreview.value = ''
-      backgroundImageFile.value = null
-      ElMessage.success('背景图片已设置')
-    } catch (error) {
-      ElMessage.error('保存背景图片失败：' + error.message)
-    }
-  } else {
-    ElMessage.warning('请选择图片')
-  }
-}
-
-const clearBackgroundImage = async () => {
-  try {
-    await store.clearBackgroundImage()
-    ElMessage.success('背景图片已清除')
-  } catch (error) {
-    ElMessage.error('清除背景图片失败：' + error.message)
-  }
-}
-</script>
-
-<style scoped>
-.admin-layout {
-  min-height: 100vh;
-  background: var(--color-background);
-  font-family: var(--font-family-primary);
-}
-
-.el-header {
-  background: var(--color-background);
-  border-bottom: 1px solid var(--color-border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 var(--spacing-2xl);
-  box-shadow: var(--shadow-small);
-  position: relative;
-  z-index: 10;
-  height: var(--header-height);
-}
-
-.el-header::before {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--color-secondary);
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.el-header h1 {
-  margin: 0;
-  font-family: var(--font-family-secondary);
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-primary);
-}
-
-.el-header .el-button {
-  background: transparent;
-  border: 1px solid var(--color-border);
-  color: var(--color-text-primary);
-  transition: var(--transition-color), var(--transition-background);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-medium);
-  border-radius: var(--border-radius-md);
-  padding: var(--spacing-md) var(--spacing-xl);
-}
-
-.el-header .el-button:hover {
-  background: rgba(var(--color-primary-rgb), 0.1);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-  transform: none;
-}
-
-.el-aside {
-  background: var(--color-background);
-  border-right: 1px solid var(--color-border);
-  padding: var(--spacing-lg) 0;
-}
-
-.admin-menu {
-  border: none;
-  background: transparent;
-}
-
-.admin-menu .el-menu-item {
-  margin: var(--spacing-sm) var(--spacing-lg);
-  border-radius: var(--border-radius-md);
-  color: var(--color-text-primary);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-medium);
-}
-
-.admin-menu .el-menu-item:hover {
-  background: rgba(var(--color-primary-rgb), 0.1);
-  color: var(--color-primary);
-}
-
-.admin-menu .el-menu-item.is-active {
-  background: var(--color-primary);
-  color: var(--color-text-white);
-}
-
-.admin-menu .el-menu-item .el-icon {
-  margin-right: var(--spacing-sm);
-}
-
-.el-main {
-  padding: var(--spacing-3xl);
-  max-width: 1400px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-/* 快捷键指南样式 */
-.shortcut-guide {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  gap: var(--spacing-3xl);
-  padding: var(--spacing-2xl) 0;
-}
-
-.shortcut-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: var(--spacing-xl);
-  min-width: 140px;
-}
-
-.shortcut-key {
-  background: var(--color-secondary);
-  color: var(--color-text-white);
-  font-family: var(--font-family-secondary);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-3xl);
-  margin-bottom: var(--spacing-md);
-  box-shadow: 0 4px 12px rgba(var(--color-secondary-rgb), 0.3);
-  padding: var(--spacing-md) var(--spacing-lg);
-  border-radius: var(--border-radius-lg);
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  min-width: 80px;
-  text-align: center;
-}
-
-.shortcut-desc {
-  color: var(--color-text-light);
-  font-size: var(--font-size-base);
-  text-align: center;
-  line-height: var(--line-height-relaxed);
-  font-family: var(--font-family-primary);
-}
-
-/* 背景图片配置样式 */
-.background-config {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xl);
-}
-
-.current-background {
-  padding: var(--spacing-lg);
-  background: var(--color-border-light);
-  border-radius: var(--border-radius-md);
-  border: 1px solid var(--color-border);
-}
-
-.upload-section {
-  padding: var(--spacing-lg);
-  background: var(--color-border-light);
-  border-radius: var(--border-radius-md);
-  border: 1px solid var(--color-border);
-}
-
-.background-label {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
-  margin-bottom: var(--spacing-md);
-}
-
-.background-preview {
-  width: 100%;
-  max-width: 400px;
-  max-height: 250px;
-  object-fit: cover;
-  border-radius: var(--border-radius-md);
-  border: 1px solid var(--color-border);
-}
-
-.preview-section {
-  margin-top: var(--spacing-lg);
-  padding-top: var(--spacing-lg);
-  border-top: 1px solid var(--color-border);
-}
-</style>
--- a/src/views/admin/Participants.vue
+++ b/src/views/admin/Participants.vue
@@ -4,82 +4,42 @@
      <div class="card-header">
        <span>名单管理</span>
        <div>
-          <el-button type="info" size="small" @click="showFieldConfig">
-            字段配置
-          </el-button>
-          <el-button type="primary" size="small" @click="showImportDialog = true">
-            导入
-          </el-button>
-          <el-button type="success" size="small" @click="exportParticipants">
-            导出
-          </el-button>
-          <el-button type="danger" size="small" @click="clearParticipants">
-            清空
-          </el-button>
+          <el-button type="info" size="small" @click="showFieldConfig"> 字段配置 </el-button>
+          <el-button type="primary" size="small" @click="showImportDialog = true"> 导入 </el-button>
+          <el-button type="success" size="small" @click="exportParticipants"> 导出 </el-button>
+          <el-button type="danger" size="small" @click="clearParticipants"> 清空 </el-button>
        </div>
      </div>
    </template>
-    
+
    <!-- 单个添加表单 -->
    <div class="single-add-form">
      <el-form :model="newParticipantData" label-width="80px" size="small">
-        <el-form-item
-          v-for="field in store.fields"
-          :key="field.id"
-          :label="field.label"
-          :required="field.required"
-        >
-          <el-input
-            v-model="newParticipantData[field.key]"
-            :placeholder="`输入${field.label}`"
-          />
+        <el-form-item v-for="field in store.fields" :key="field.id" :label="field.label" :required="field.required">
+          <el-input v-model="newParticipantData[field.key]" :placeholder="`输入${field.label}`" />
        </el-form-item>
        <el-form-item>
-          <el-button type="primary" @click="addParticipant" style="width: 100%">
-            添加
-          </el-button>
+          <el-button type="primary" @click="addParticipant" style="width: 100%"> 添加 </el-button>
        </el-form-item>
      </el-form>
    </div>
-    
+
    <!-- 参与者表格 -->
    <div class="participant-table">
      <el-table :data="store.participants" style="width: 100%" stripe max-height="400">
-        <el-table-column
-          v-for="field in store.fields"
-          :key="field.id"
-          :prop="field.key"
-          :label="field.label"
-          :min-width="120"
-          show-overflow-tooltip
-        />
+        <el-table-column v-for="field in store.fields" :key="field.id" :prop="field.key" :label="field.label" :min-width="120" show-overflow-tooltip />
        <el-table-column label="操作" fixed="right" width="150" align="center">
          <template #default="{ row }">
-            <el-button
-              type="primary"
-              size="small"
-              @click="showParticipantDetail(row)"
-              v-if="store.fields.length > 1"
-            >
-              详情
-            </el-button>
-            <el-button
-              type="danger"
-              size="small"
-              @click="removeParticipant(row.id)"
-            >
-              删除
-            </el-button>
+            <el-button type="primary" size="small" @click="showParticipantDetail(row)" v-if="store.fields.length > 1"> 详情 </el-button>
+            <el-button type="danger" size="small" @click="removeParticipant(row.id)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
-    
-    <div class="participant-count">
-      共 {{ store.participants.length }} 人
-    </div>
+
+    <div class="participant-count"> 共 {{ store.participants.length }} 人 </div>
  </el-card>
-  
+
  <!-- 字段配置对话框 -->
  <el-dialog v-model="showFieldDialog" title="字段配置" width="600px">
    <div class="field-config">
@@ -98,25 +58,14 @@
      <el-button type="primary" @click="saveFields">保存</el-button>
    </template>
  </el-dialog>
-  
+
  <!-- 导入对话框 -->
  <el-dialog v-model="showImportDialog" title="导入名单" width="500px">
-    <el-upload
-      ref="uploadRef"
-      :auto-upload="false"
-      :on-change="handleFileChange"
-      :limit="1"
-      accept=".csv"
-      drag
-    >
+    <el-upload ref="uploadRef" :auto-upload="false" :on-change="handleFileChange" :limit="1" accept=".csv" drag>
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-      <div class="el-upload__text">
-        拖拽文件到此处或 <em>点击上传</em>
-      </div>
+      <div class="el-upload__text"> 拖拽文件到此处或 <em>点击上传</em> </div>
      <template #tip>
-        <div class="el-upload__tip">
-          支持 .csv 格式文件，第一行为字段名，后续行为数据
-        </div>
+        <div class="el-upload__tip"> 支持 .csv 格式文件，第一行为字段名，后续行为数据 </div>
      </template>
    </el-upload>
    <template #footer>
@@ -153,27 +102,31 @@ const addField = () => {
    id: Date.now(),
    key: '',
    label: '',
-    required: false
+    required: false,
  })
 }

-const removeField = (id) => {
+const removeField = id => {
  const index = tempFields.value.findIndex(f => f.id === id)
  if (index > -1) {
    tempFields.value.splice(index, 1)
  }
 }

-const saveFields = () => {
+const saveFields = async () => {
  const validFields = tempFields.value.filter(f => f.key && f.label)
  if (validFields.length === 0) {
    ElMessage.error('至少需要一个有效字段')
    return
  }
-  
-  store.fields.splice(0, store.fields.length, ...validFields)
-  showFieldDialog.value = false
-  ElMessage.success('字段配置已保存')
+
+  try {
+    await store.updateFields(validFields)
+    showFieldDialog.value = false
+    ElMessage.success('字段配置已保存')
+  } catch (error) {
+    ElMessage.error('保存字段配置失败：' + error.message)
+  }
 }

 // 名单管理
@@ -189,9 +142,13 @@ const initNewParticipantData = () => {
  })
 }

-watch(() => store.fields, () => {
-  initNewParticipantData()
-}, { deep: true })
+watch(
+  () => store.fields,
+  () => {
+    initNewParticipantData()
+  },
+  { deep: true }
+)

 initNewParticipantData()

@@ -201,33 +158,33 @@ const addParticipant = () => {
    ElMessage.error(`请填写必填字段：${missingFields.map(f => f.label).join('、')}`)
    return
  }
-  
+
  const hasValue = Object.values(newParticipantData.value).some(v => v && v.trim())
  if (!hasValue) {
    ElMessage.error('请至少填写一个字段')
    return
  }
-  
+
  store.addParticipant({
    id: Date.now(),
-    ...newParticipantData.value
+    ...newParticipantData.value,
  })
-  
+
  initNewParticipantData()
  ElMessage.success('添加成功')
 }

-const showParticipantDetail = (person) => {
+const showParticipantDetail = person => {
  const details = []
-  
+
  store.fields.forEach(field => {
    details.push(`${field.label}: ${person[field.key] || '-'}`)
  })
-  
+
  const allKeys = Object.keys(person).filter(key => key !== 'id')
  const configuredKeys = store.fields.map(f => f.key)
  const unconfiguredKeys = allKeys.filter(key => !configuredKeys.includes(key))
-  
+
  if (unconfiguredKeys.length > 0) {
    details.push('')
    details.push('未配置字段:')
@@ -235,21 +192,21 @@ const showParticipantDetail = (person) => {
      details.push(`${key}: ${person[key]}`)
    })
  }
-  
+
  ElMessage({
    message: details.join('\n'),
    type: 'info',
    duration: 0,
-    showClose: true
+    showClose: true,
  })
 }

-const removeParticipant = (id) => {
+const removeParticipant = id => {
  store.removeParticipant(id)
  ElMessage.success('删除成功')
 }

-const handleFileChange = (file) => {
+const handleFileChange = file => {
  selectedFile.value = file.raw
 }

@@ -279,21 +236,19 @@ const clearParticipants = () => {
    ElMessage.warning('名单已经是空的')
    return
  }
-  
-  ElMessageBox.confirm(
-    '确定要清空所有名单吗？此操作不可恢复。',
-    '确认清空',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }
-  ).then(() => {
-    store.clearParticipants()
-    ElMessage.success('已清空名单')
-  }).catch(() => {
-    // 用户取消操作
+
+  ElMessageBox.confirm('确定要清空所有名单吗？此操作不可恢复。', '确认清空', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
  })
+    .then(() => {
+      store.clearParticipants()
+      ElMessage.success('已清空名单')
+    })
+    .catch(() => {
+      // 用户取消操作
+    })
 }
 </script>

@@ -449,4 +404,4 @@ const clearParticipants = () => {
  box-shadow: var(--shadow-small);
  transform: none;
 }
-</style>
+</style>
--- a/test_participants.csv
+++ b/test_participants.csv
@@ -1,6 +0,0 @@
-姓名,部门,职位
-张三,技术部,工程师
-李四,产品部,产品经理
-王五,市场部,市场专员
-赵六,人事部,HR
-钱七,财务部,会计
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>