需求变更:Web 端只保留业务需求,反向代理交由另外的服务处理, 本项目仅提供 IIS / nginx 反代说明文档,不部署反代。 主要改动: - web-server: 新增管理端静态托管(ADMIN_DIR、SPA 深链接回退), 反代因此只需一条全匹配转发规则;新增 adminDir 配置项 - deploy/install.sh: 删除 nginx 安装与站点配置逻辑,改为原生 Linux 服务部署(systemd → OpenRC → SysVinit → 后台进程四级降级), 打印反代交接指引 - deploy/ctl.sh: 启停/状态/日志脚本 - deploy/proxy/: 新增反代说明文档(README.md、nginx.conf.example、 web.config.example),标注上传上限与超时必须同步调整 - 删除 deploy/nginx/、web-server/admin/nginx.conf、Dockerfile、 docker-compose.yml、.dockerignore - scripts/package-release.sh: 锚定排除规则 + 产物完整性校验 - 文档同步:README.txt、DSH.md、project.yaml、tasks/008、tasks/010
1.9 KiB
1.9 KiB
T-WEB-008 歌曲管理界面
- 状态:done
- 依赖:T-WEB-003
目标
React 管理端的歌曲管理页面:列表、检索、新建/编辑、音频上传与试听、删除。
load
DSH.md
contracts/rest-api.yaml # 锚点:#/paths/~1api~1songs、#/components/schemas/Song
contracts/data-models.md # 锚点:§2 Song
web-server/admin/src/**
web-server/admin/package.json
交付物
web-server/admin/(React 18 + Vite + TypeScript):
| 路径 | 说明 |
|---|---|
src/pages/SongsPage.tsx |
歌曲列表 + 分页 + 检索(q / status / artist) |
src/components/SongForm* |
新建/编辑表单,含来源五元组 |
src/api/client.ts |
fetch 封装;非 2xx 抛 ApiError,兼容 Nest 的 message: string[] |
src/api/types.ts |
与契约对齐的 TypeScript 类型 |
src/styles.css |
无 UI 框架,纯 CSS |
页面能力
- 分页表格 + 关键词/状态/歌手过滤
- 新建与编辑:曲名、歌手、专辑、语言、时长(秒输入 → 毫秒提交)、BPM、 难度 1–5、标签(逗号分隔)、状态、来源五元组
- 音频上传(
POST /api/songs/:id/audio,字段名file)与<audio controls>试听 - 删除需二次确认(软删除)
- 客户端校验:曲名/歌手与来源五项必填,
sourceUrl必须以http开头 - 加载中 / 空列表 / 请求失败三态均有明确反馈,绝不出现白屏
验收
cd web-server/admin
npm run build # tsc -b && vite build 必须成功
构建与运行
- 开发:
npm run dev(5173,/api与/health代理到localhost:3000) - 生产:
npm run build产物由后端服务自身托管(ADMIN_DIR,含 SPA 回退),反向代理只需整体转发到后端端口(见deploy/proxy/README.md) VITE_API_BASE可覆盖 API 基地址;留空表示同源