由 THBWiki 与 VoileLabs 共同开发的 “中文东方人气投票 第十一回” 前端部分。
比起旧的系统,本届多出了以下功能:
- 全新设计的 UI,支持全响应式布局,更好的兼容手机端
- 精简的登陆逻辑,支持邮箱/手机号登陆和旧版邮箱密码登陆
- 深度拆分的问卷,问卷变短,针对性变强的同时,也将问卷数据实时存入本地,防止意外退出/刷新界面的时候还得重新填写问卷
- 图形化的投票界面,更多丰富的图形效果,规避了文字过多导致的杂乱,看起来更加简洁直观
- 更广泛的搜索系统,即使不知道名字也可以通过出场作品和外号来搜索到自己喜欢的角色/曲目,甚至支持拼音搜索(如“mls”可以搜索到魔理沙)
需求文档: https://github.com/PatchyVideo/Touhou-Vote/blob/dev/doc/VoileLabs-人气投票项目-需求文档.docx
需求文档(投票结果页面):https://github.com/PatchyVideo/Touhou-Vote/blob/dev/doc/VoileLabs-人气投票项目-需求文档-投票结果页面.docx
路线图: https://github.com/PatchyVideo/Touhou-Vote/blob/dev/doc/ROADMAP.md
调查问卷大纲: https://github.com/PatchyVideo/Touhou-Vote/blob/dev/doc/OUTLINE-Questionnaire.md
范围一览: https://github.com/PatchyVideo/Touhou-Vote/blob/dev/doc/VOTEDETAIL.md
完整版(含 500 白屏 / 无报错白屏 / API 404 等坑的排查表)见 doc/LOCAL_DEV.md。下面是速览。
# 拉取项目
$ git clone https://github.com/PatchyVideo/Touhou-Vote.git
$ cd Touhou-Vote
# 安装依赖(pnpm workspace,勿用 npm/yarn install)
$ pnpm i# 生成 GraphQL Schema —— 必须先于 dev,否则 500 白屏
# (产物被 gitignore;默认 schema 地址已过期,需显式指定)
$ GRAPHQL_SCHEMA_URL=http://154.37.215.62:18000/graphql pnpm vote:codegen
# 启动本地调试 —— 端口 5175,务必访问 http://localhost:5175/v11/ (带 /v11/)
$ pnpm vote:dev
# 构建 & 运行
$ pnpm vote:build
$ pnpm vote:serve# 启动本地调试
$ pnpm nav:dev
# 构建 & 运行
$ pnpm nav:build
$ pnpm nav:serve# 生成 GraphQL Schema
$ pnpm result:codegen
# 启动本地调试
$ pnpm result:dev
# 构建 & 运行
$ pnpm result:build
$ pnpm result:serve