复刻出这个页面组织成ai提示词
我来先探索项目结构，了解现有的代码组织方式，然后制定实现计划。
四种角色通过统一登录页入口，根据权限进入不同页面：
-
管理员 → 后台管理（赛事/表单/赛制/系统配置）
-
运营 → 选手管理/评审管理/场次管理
-
评委 → 评审工作台
-
选手 → 报名/排行榜/战力值明细角色权限与页面对应
┌────────┬────────────────────────────┬─────────────┐
│ 角色 │ 登录后入口 │ 前端项目 │
├────────┼────────────────────────────┼─────────────┤
│ 管理员 │ /dashboard (后台首页) │ admin/ │
├────────┼────────────────────────────┼─────────────┤
│ 运营 │ /player (选手管理) │ admin/ │
├────────┼────────────────────────────┼─────────────┤
│ 评委 │ /review (评审工作台) │ admin/ │
├────────┼────────────────────────────┼─────────────┤
│ 选手 │ /event/discover (赛事发现) │ player-web/ │
└────────┴────────────────────────────┴─────────────┘
┌────────┬──────────┬─────────────┐
│ 角色 │ 用户名 │ 密码 │
├────────┼──────────┼─────────────┤
│ 管理员 │ admin │ admin123 │
├────────┼──────────┼─────────────┤
│ 运营 │ operator │ operator123 │
├────────┼──────────┼─────────────┤
│ 评委 │ judge │ judge123 │
└────────┴──────────┴─────────────┘
根据 CLAUDE.md，启动命令：
cd E:\app\code\demo\decx2
安装依赖（如未安装）
npm install
启动后端 (NestJS 端口 4000)
npm run dev:backend
启动管理端 (Vue 端口 3000) - 新窗口
npm run dev:admin
启动选手端 (Vue 端口 3001) - 新窗口
npm run dev:player
访问地址：
-
后端 API：http://localhost:4000/api
┌─────────────────────┬──────────────────────────────────┐
│ 命令 │ 说明 │
├─────────────────────┼──────────────────────────────────┤
│ npm run dev:backend │ 启动 NestJS API 服务 (端口 4000) │
├─────────────────────┼──────────────────────────────────┤
│ npm run dev:admin │ 启动 Admin 管理端 (端口 3000) │
├─────────────────────┼──────────────────────────────────┤
│ npm run dev:player │ 启动 Player 选手端 (端口 3001) │
└─────────────────────┴──────────────────────────────────┘
我找到了画布的实现。现在我来为画布添加高度和宽度范围约束，使内容在指定范围内，超出时
可以滚动。
主要修改点：
-
添加画布尺寸配置（最小/最大高度、宽度）
-
用一个固定高度的容器包裹内容区域
-
超出时启用滚动