High Command Ui

高级命令UI

高级命令MCP服务器的现代交互式网络用户界面。这个React+TypeScript应用程序提供了一个类似聊天的提示界面，用于与High Command战略管理系统进行交互。

特性

• 💬 交互式聊天界面 -发送命令并接收实时响应
• 📊 活动数据显示 -查看战争状态和战役统计数据
• 🎖️ 战略提示 -用自然语言查询高级指挥系统
• ⚡ 实时更新 -来自高级命令MCP服务器的实时数据
• 🎨 现代用户界面 -具有军事美学的黑暗主题

可用命令

• War Status -获取当前活动状态
• List Planets -查看活动中的所有行星
• Show Factions -显示派系信息
• Get Biomes -行星生物群落信息
• Get Statistics -全球游戏统计

项目结构

src/
├── components/
│   ├── ChatInterface.tsx    # Main chat UI component
│   ├── ChatInterface.css    # Chat styling
│   ├── DataDisplay.tsx      # Campaign data viewer
│   └── DataDisplay.css      # Data display styling
├── services/
│   └── api.ts              # High Command API client
├── App.tsx                 # Main application component
├── App.css                 # App styling
├── index.css               # Global styles
└── main.tsx                # Entry point

设置和安装

使用Make（推荐）

make install    # Install dependencies
make dev        # Start development server (port 3000)
make build      # Build for production
make preview    # Preview production build
make clean      # Clean build artifacts
make info       # Show project info

使用npm

1. 安装依赖项：

npm install

1. 启动开发服务器：

npm run dev

申请将于 http://localhost:3000

生产大楼

npm run build
npm run preview

Docker支持

使用Make命令

make docker-build   # Build Docker image
make docker-run     # Run production container on port 3000
make docker-stop    # Stop and remove container
make docker-clean   # Remove Docker image
make docker-dev     # Run development container with hot reload

直接使用Docker

生产建设：

docker build -t high-command-ui:latest .
docker run -d -p 3000:3000 -e API_URL=http://localhost:3001/api high-command-ui:latest

热重载开发：

docker build -t high-command-ui:dev -f Dockerfile.dev .
docker run -it -v $(pwd):/app -p 3000:3000 -e NODE_ENV=development high-command-ui:dev npm run dev

使用Docker Compose

生产堆栈：

docker-compose up -d

开发堆栈：

docker-compose -f docker-compose.dev.yml up

Docker文件

• Dockerfile -使用Alpine Linux进行多阶段生产构建
• Dockerfile.dev -热模块更换开发环境
• docker-compose.yml -具有高级命令API的生产组合堆栈
• Docker先生 -从Docker构建中排除不必要的文件

配置

应用程序使用环境变量进行配置。创建一个 .env 使用您的设置在项目根目录中创建文件：

cp .env.example .env

环境变量

• VITE_API_URL -高命令API服务器基本URL（默认值： http://localhost:5000)
• VITE_MCP_URL -MCP服务器端点（默认值： http://localhost:8000)

示例 .env 文件：

VITE_API_URL=http://localhost:5000
VITE_MCP_URL=http://localhost:8000

对于Docker部署，您可以传递环境变量：

docker run -e VITE_API_URL=http://api-server:5000 -p 3000:3000 high-command-ui:latest

API集成

UI通过REST端点与高命令MCP服务器通信：

可用端点

• POST /api/command -执行战略命令
• GET /api/war-status -获取当前战争状态
• GET /api/campaign -获取活动信息
• GET /api/planets -列出所有行星
• GET /api/factions -获取派系数据
• GET /api/biomes -获取生物信息
• GET /api/statistics -获取游戏统计数据
• GET /api/planets/:index -获取特定行星状态

测试

High Command UI包括全面的单元和E2E测试覆盖。

单元测试

单元测试由以下提供动力 维测试 使用React测试库进行组件测试。

运行单元测试：

npm run test                # Run all unit tests
npm run test:ui            # Open Vitest UI dashboard
npm run test:coverage      # Generate coverage report

测试文件：

• src/test/api.test.ts -API高级命令服务测试
• src/test/claude.test.ts -Claude AI服务测试
• src/test/ChatInterface.test.tsx -聊天组件测试
• src/test/DataDisplay.test.tsx -数据显示组件测试

测试覆盖范围包括：

• ✅ API服务方法和错误处理
• ✅ Claude服务集成和工具管理
• ✅ 组件渲染和用户交互
• ✅ 消息提交和键盘处理
• ✅ 加载状态和错误边界
• ✅ 数据格式化和显示

UI/E2E测试

端到端测试由以下设备供电 剧作家 用于全面的浏览器自动化测试。

运行E2E测试：

npm run test:e2e           # Run all E2E tests
npx playwright test --ui   # Interactive test mode
npx playwright show-report # View HTML test report

测试文件：

• e2e/chat.spec.ts -聊天界面集成测试

E2E测试覆盖范围包括：

• ✅ 加载时显示欢迎消息
• ✅ 消息发送和响应显示
• ✅ 快速操作按钮执行
• ✅ 选项卡导航（控制台、银河、新闻等）
• ✅ 加载状态显示
• ✅ 键盘输入和Enter键提交
• ✅ 错误处理和API不可用
• ✅ 响应中的Markdown渲染
• ✅ 多条连续消息
• ✅ 快速消息提交处理

测试配置

• Vitest配置： vitest.config.ts -单元测试转轮配置
• 编剧配置： playwright.config.ts -E2E测试流道配置
• 测试设置： src/test/setup.ts -全局测试设置、模拟和夹具

在CI/CD中运行测试

# Run all tests
npm run test && npm run test:e2e

# Generate coverage report
npm run test:coverage

测试配置为通过Playwright在Chromium、Firefox和WebKit浏览器上运行。

技术

• 反应18 -UI框架
• TypeScript -类型安全开发
• 维特 -快速构建工具和开发服务器
• CSS3 -现代风格与动画
• 维测试 -单元测试框架
• 剧作家 -E2E测试自动化
• React测试库 -组件测试工具

人工智能集成

克劳德·海库4.5

高级命令UI集成 克劳德·海库4.5 用于高级自然语言处理和战术决策支持。Claude分析用户查询并利用MCP（模型上下文协议）工具：

• 查询智能 -理解复杂的战略查询和命令
• 情境感知 -维护多回合互动的对话历史记录
• 工具集成 -自动选择并执行适当的MCP工具：

- get_war_status -检索当前活动状态 - get_planets -查询行星数据 - get_campaign_info -获取活动详细信息 - get_factions -获取派系信息 - get_biomes -检索生物群落数据 - get_statistics -获取游戏统计数据

配置：

• 集 VITE_CLAUDE_API_KEY 使用Anthropic API键的环境变量
• 当API密钥存在时，Claude会自动启用
• 如果未配置API密钥，则返回到关键字匹配

系统提示功能：

• ✨ 使用Markdown格式化响应（无表格管道）
• 📊 清晰的数据展示，带有标题和要点
• 🎯 地狱潜水员2指挥部的战术决策支持
• 🚀 基于Haiku模型的快速推理优化

许可证

根据Apache许可证2.0版授权。看 许可证 全文。

版权所有2026 DataKnifeAI