🍵 失控进化 · 浆果制茶工作台

一款为游戏《失控进化》设计的浆果种植与茶合成交互规划工具。

✨ 功能特色

🎒 浆果背包管理

支持按 组 + 零头 的方式输入每种浆果库存（1 组 = 20 个）
实时显示总个数与消耗进度条
默认初始库存可直接修改

🌾 种植田地可视化

20 块田 × 9 格 = 180 格 完整模拟游戏农田
点击格子循环切换浆果颜色（蓝 → 红 → 黄 → 绿 → 白 → 清空）
每格收获 3 个浆果，实时计算预计产量

🧠 智能种植推荐

勾选你想要生产的茶种类，系统自动计算最优颜色分配比例
算法基于配方需求加权评分，最大化合成产出
也可完全手动调整每种颜色的种植格数

⚗️ 合成工作台（核心）

6 种茶 × 低阶/高阶 = 12 个合成按钮
按钮实时显示当前库存可合成的最大杯数
材料不足时自动变灰禁用
点击即扣料，所有茶的可合成数 即时刷新
支持 撤销上一步 和 一键重置

📊 实时信息面板

当前库存：组 + 零头 + 进度条
已合成清单：可逐杯删除返还材料
剩余可合成预览：一眼看遍所有茶的产能

🎨 视觉与动效

自然田园风 UI（草绿、木质色调、柔和圆角）
合成时浆果飞入茶卡动画
Toast 提示反馈
响应式布局，支持手机访问

📖 茶配方一览

茶名	低阶配方	高阶配方
🪵 木头茶	8蓝 + 8红	32蓝 + 32红
💎 矿物茶	8黄 + 8蓝	32黄 + 32蓝
🛡️ 抗污染茶	8红 + 8绿	32红 + 32绿
♻️ 废料茶	8黄 + 8白	32黄 + 32白
❤️ 回血茶	16红	64红
🩸 血量茶	12红 + 4黄	48红 + 16黄

🚀 快速开始

# 安装依赖
npm install

本地开发（热更新）

npm run dev
# 访问 http://localhost:5173

本地静态构建 & 部署

如果你想把构建产物放到自己的服务器、Nginx、或任意静态托管（根目录 /）：

# 构建（base 路径为 /）
npm run build:local

# 预览构建结果
npm run preview

构建产物在 dist/ 目录，直接复制到任意 Web 服务器即可使用。

常见本地部署方式

Nginx

将 dist/ 目录内容复制到 Nginx 站点目录，配置：

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Docker

FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build:local

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

Vercel / Netlify

直接导入 GitHub 仓库，构建命令设为 npm run build:local，输出目录设为 dist。平台会自动处理路由。

🌐 GitHub Pages 部署

本项目内置了 GitHub Actions 工作流，推送 main 分支即自动部署：

# 构建命令（自动带 /EvolutionBerryPlanner/ 路径前缀）
npm run build

首次启用： 进入仓库 Settings → Pages，将 Source 设为 GitHub Actions。

部署完成后访问：https://你的用户名.github.io/EvolutionBerryPlanner/

💡 npm run build 和 npm run build:local 的唯一区别是资源路径前缀：

build → 适合 GitHub Pages（子路径 /EvolutionBerryPlanner/）

build:local → 适合根域名或本地服务器（/）

🛠️ 技术栈

Vue 3 — Composition API + <script setup>
TypeScript — 完整类型定义
Vite — 极速构建
GitHub Actions — 自动部署到 GitHub Pages
纯前端实现，所有计算在浏览器本地完成，无需后端

📁 项目结构

src/
├── main.ts                  # 应用入口
├── App.vue                  # 主布局 + 合成动画
├── types.ts                 # 类型定义 & 常量 & 茶配方
├── style.css                # 全局田园风样式
├── composables/
│   └── useGameState.ts      # 核心游戏逻辑 & 状态管理
└── components/
    ├── InventoryPanel.vue   # 浆果背包面板
    ├── FieldView.vue        # 田地可视化网格
    ├── PlantAlloc.vue       # 种植分配 & 智能推荐
    ├── CraftBench.vue       # 合成工作台
    ├── InfoPanel.vue        # 实时库存 & 合成清单
    └── PreviewPanel.vue     # 剩余可合成预览

📄 License

MIT

FilesExpand file tree

README.md

Latest commit

History