OTTOMANIA 投票站前端。基于 Vue 3 + Vite + Vuetify 3 的单页应用。
Frontend of the OTTOMANIA vote site — a single-page app built with Vue 3 + Vite + Vuetify 3.
- 作品浏览：响应式作品卡片网格，支持按总票数 / 总得分 / 平均分 / 中位数 / 投稿时间排序
- 在线投票：填写 B 站用户名（实时校验）、评分（1–100）与短评提交投票；投票人资料保存在本机 Cookie，下次自动填入
- 评论查看：按分数段着色展示每部作品的全部投票短评
- 历届活动：当期活动走后端 API 实时数据，往期活动（2023 / 2024）读取静态归档数据；每届有独立的主题配色、Logo、背景与 BGM
- BGM 播放器：Web Audio 无缝循环，随机选曲、播放 / 暂停 / 切歌
- 开屏动画：当期活动首次访问播放 Splash（可跳过，仅播放一次）
- 其他：随机观看一个作品、组委成员与活动声明弹窗、DQ 作品封面模糊与角标
前置要求： Node.js 18+（推荐 20），以及本地运行的后端 API（默认 http://localhost:5138）
npm install
npm run dev开发服务器启动后访问 http://localhost:5173，/api 请求由 Vite 代理到本地后端。
npm run dev # 开发服务器（热更新）
npm run build # 生产构建（输出到 dist/）
npm run preview # 预览生产构建| 变量 | 说明 |
|---|---|
VITE_API_BASE |
API 基础地址。默认留空：开发环境走 Vite 代理，生产环境走同源 /api（由 nginx 反代） |
VITE_SPLASH_BGM |
Splash 音效路径，默认 /splash-bgm.mp3 |
每届活动对应 src/config/events/<year>.js 中的一个配置文件，可设置站点标题、主题调色板（src/config/eventPalettes.js）、Logo / 背景图、BGM 清单、是否开放投票、数据源（api 实时 / static 静态归档）等。静态归档数据位于 public/events/<year>/（works.json、votes/）。
仓库包含多阶段构建的 Dockerfile（Node 构建 → nginx 运行）。nginx 提供静态页面，并将 /api 反代到后端（目标地址见 nginx.conf，按需修改）：
docker build -t ottomad-vote-front .
docker run -d -p 80:80 ottomad-vote-front├── public/
│ ├── bgm/ # 当期 BGM 音频（清单见 bgm-manifest.json）
│ └── events/<year>/ # 历届活动静态归档（works.json、votes/、背景、Logo、BGM）
├── src/
│ ├── views/ # 页面视图
│ ├── components/ # Vue 组件（作品卡片、投票 / 评论弹窗、BGM 播放器、Splash 等）
│ ├── composables/ # 组合式函数（数据加载、BGM、主题、投票人资料等）
│ ├── config/ # API 实例、活动配置与调色板
│ ├── constants/ # 站点常量、排序模式
│ ├── data/ # 组委名单、活动声明
│ ├── plugins/ # Vuetify、webfontloader
│ ├── router/ # 路由
│ └── utils/ # 工具函数
├── nginx.conf # 生产 nginx 配置（静态站 + /api 反代）
└── Dockerfile # 生产镜像（构建 + nginx）
- Browse works: responsive card grid, sortable by vote count / total score / average / median / submit date
- Online voting: submit a vote with your Bilibili username (validated in real time), a score (1–100) and a comment; voter profile is stored in a local cookie and auto-filled next time
- Comments: view all vote comments for each work, color-coded by score tier
- Event archive: the current event loads live data from the backend API, while past events (2023 / 2024) load static archived data; each edition has its own color palette, logo, background and BGM
- BGM player: seamless looping via Web Audio, with random track selection, play / pause / skip
- Splash screen: an intro animation shown once on the first visit of the current event (skippable)
- Extras: watch a random work, committee / statement dialogs, blurred covers and badges for DQ works
Prerequisites: Node.js 18+ (20 recommended), and the backend API running locally (default http://localhost:5138)
npm install
npm run devOpen http://localhost:5173. /api requests are proxied by Vite to the local backend.
npm run dev # Dev server with hot reload
npm run build # Production build (outputs to dist/)
npm run preview # Preview the production build| Variable | Description |
|---|---|
VITE_API_BASE |
API base URL. Empty by default: the Vite proxy is used in development, and same-origin /api (behind nginx) in production |
VITE_SPLASH_BGM |
Splash sound effect path, defaults to /splash-bgm.mp3 |
Each event edition has a config file at src/config/events/<year>.js, defining the site title, color palette (src/config/eventPalettes.js), logo / background images, BGM manifest, voting availability, and the data source (api for live data / static for archived data). Static archive data lives in public/events/<year>/ (works.json, votes/).
A multi-stage Dockerfile is included (Node build → nginx runtime). nginx serves the static files and reverse-proxies /api to the backend (see nginx.conf for the upstream address; adjust as needed):
docker build -t ottomad-vote-front .
docker run -d -p 80:80 ottomad-vote-front├── public/
│ ├── bgm/ # BGM audio for the current event (see bgm-manifest.json)
│ └── events/<year>/ # Static archives per edition (works.json, votes/, bg, logo, BGM)
├── src/
│ ├── views/ # Page views
│ ├── components/ # Vue components (work cards, vote / comment dialogs, BGM player, splash, etc.)
│ ├── composables/ # Composables (data loading, BGM, theme, voter profile, etc.)
│ ├── config/ # API client, event configs and palettes
│ ├── constants/ # Site constants, sort modes
│ ├── data/ # Committee list, event statement
│ ├── plugins/ # Vuetify, webfontloader
│ ├── router/ # Routes
│ └── utils/ # Utility functions
├── nginx.conf # Production nginx config (static site + /api reverse proxy)
└── Dockerfile # Production image (build + nginx)