TrangleAgent/Frontend/README.md

三角洲机构 - TRPG跑团在线工具

基于Vue3 + Ant Design Vue构建的TRPG跑团在线工具网站，遵循TRTC三角洲机构规则。

功能特性

用户系统

• 用户注册/登录（账号、密码、姓名）
• 用户信息管理

房间系统

• 创建房间，房间号可分享
• 加入房间（通过房间号）
• 房间内角色：主持人（Host）和玩家（PL）
• 房间信息展示

骰子系统

• 支持常见骰子：D3、D4、D6、D12、D20
• 玩家初始投掷：4个D4
• 混沌值机制：
  • 每个不是3的D4给主持人加1点混沌值
  • 玩家投出3个3（可通过消耗属性值达到）不会产生混沌值
  • 每个不是3的骰子都会变成混沌值
  • 混沌值所有人可见
  • 主持人可以消耗混沌值
• 投掷历史记录

总部/分部管理系统

• 创建分部
• 解散分部
• 发布招聘信息（经理权限）
• 查看招聘信息（所有分部成员）
• 分部信息管理（散一端、天气系统）

异常管理系统

• 添加异常（名称、类型、特殊能力、焦点、领域）
• 异常收容
• 异常解决
• 异常分类：未收容、已收容、已解决
• 天气系统设置
• 散一端管理

技术栈

• Vue 3 (Composition API)
• Ant Design Vue 4.x
• Vue Router 4
• Pinia (状态管理)
• Vite (构建工具)

项目结构

src/
├── views/          # 页面组件
│   ├── Login.vue          # 登录页
│   ├── Register.vue      # 注册页
│   ├── Home.vue          # 主页
│   ├── Room.vue          # 房间页
│   ├── Organization.vue  # 总部/分部管理
│   └── Anomaly.vue       # 异常管理
├── stores/         # Pinia状态管理
│   ├── user.js           # 用户状态
│   ├── room.js           # 房间状态
│   ├── organization.js   # 组织状态
│   └── anomaly.js        # 异常状态
├── router/         # 路由配置
├── utils/          # 工具函数
└── main.js         # 入口文件

快速开始

安装依赖

npm install

开发运行

npm run dev

访问 http://localhost:3000

构建生产版本

npm run build

使用说明

1. 注册/登录

• 首次使用需要注册账号（账号、密码、姓名）
• 注册成功后自动登录

2. 创建/加入房间

• 在主页可以创建新房间或通过房间号加入现有房间
• 创建房间后自动成为主持人
• 房间号可以分享给其他玩家

3. 使用骰子系统

• 玩家初始投掷：进入房间后，玩家可以投掷4个D4
• 混沌值规则：
  • 如果投出的4个D4中，3的数量少于3个，会产生混沌值
  • 玩家可以通过消耗属性值来增加3的数量
  • 如果最终达到3个3，则不会产生混沌值
  • 每个不是3的D4会产生1点混沌值
• 普通投掷：可以选择D3/D4/D6/D12/D20进行投掷
• 消耗混沌值：只有主持人可以消耗混沌值

4. 总部/分部管理

• 经理可以创建分部、发布招聘信息
• 所有成员可以查看招聘信息
• 每个分部可以设置天气和散一端

5. 异常管理

• 添加异常时需要填写：名称、类型、特殊能力、焦点、领域
• 异常类型：实体、概念、地点、现象
• 异常领域：现实、记忆、时间、空间、生命、死亡、知识、情感
• 异常状态流转：未收容 → 已收容 → 已解决

注意事项

• 当前版本使用localStorage进行数据存储（纯前端）
• 刷新页面后数据会保留
• 如需后端支持，需要对接相应的API接口

开发计划

• WebSocket实时通信
• 后端API集成
• 数据持久化
• 更多骰子类型和规则
• 角色属性管理
• 跑团记录导出