# icutool-ark-web **Repository Path**: plusboy/icutool-ark-web ## Basic Information - **Project Name**: icutool-ark-web - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-09 - **Last Updated**: 2026-03-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 方舟游戏管理系统 一个现代化的游戏后台管理系统，基于Vue 3 + Vite + Node 18开发。 ## ✨ 功能特性 - 🎮 **登录认证** - 安全的用户登录和Token管理 - 📊 **仪表盘** - 实时查看系统统计信息 - 📦 **物品管理** - 灵活的物品发放系统，支持搜索和筛选 - 🎛️ **服务器控制** - 发送公告、玩家管理、在线玩家监控 - 🌍 **环境区分** - 支持开发、生产等多环境配置 - 📱 **响应式设计** - 完美适配各种设备 - 🎨 **现代UI** - 美观的渐变色设计和流畅动画 ## 🚀 快速开始 ### 环境要求 - Node 18+ - npm 或 yarn ### 安装依赖 ```bash npm install ``` ### 开发模式 ```bash npm run dev ``` 项目将在 `http://localhost:5173` 启动 ### 生产构建 ```bash npm run build ``` ### 预览生产版本 ```bash npm run preview ``` ## 📋 项目结构 ``` src/ ├── components/ # Vue组件 │ ├── Navigation.vue # 导航栏 │ └── Modal.vue # 模态对话框 ├── pages/ # 页面组件 │ ├── Login.vue # 登录页面 │ ├── Dashboard.vue # 仪表盘 │ ├── Items.vue # 物品发放 │ ├── System.vue # 系统控制 │ └── NotFound.vue # 404页面 ├── api/ # API接口 │ ├── http.js # Axios实例和拦截器 │ ├── user.js # 用户接口 │ └── game.js # 游戏相关接口 ├── composables/ # 组合式API │ └── useNotification.js # 通知功能 ├── router/ # Vue Router配置 │ └── index.js ├── style/ # 样式文件 │ └── notification.scss # 通知样式 ├── style.scss # 全局样式 ├── App.vue # 根组件 └── main.js # 入口文件 ``` ## ⚙️ 环境配置 项目通过环境文件实现多环境支持： ### 开发环境 (`.env.development`) ```env VITE_APP_TITLE=方舟游戏管理系统 - 开发环境 VITE_API_BASE_URL=http://localhost:8080 VITE_API_TIMEOUT=30000 VITE_APP_ENV=development ``` ### 生产环境 (`.env.production`) ```env VITE_APP_TITLE=方舟游戏管理系统 VITE_API_BASE_URL=https://api.example.com VITE_API_TIMEOUT=30000 VITE_APP_ENV=production ``` ## 🔑 主要功能说明 ### 登录认证 - 用户输入用户名和密码 - 系统调用 `/user/login` API进行验证 - Token保存到localStorage - 自动跳转到仪表盘 ### 物品发放 - 搜索和筛选物品 - 支持按玩家ID、物品类型等多维度搜索 - 灵活的分页展示 - 弹窗式发放表单 ### 系统控制 - 📢 发送公告给所有在线玩家 - 👢 将指定玩家下线 - ⚔️ 在游戏中杀死玩家 - 👥 查看在线玩家列表 - 📋 操作日志记录 ## 🌐 API接口规范 ### 响应格式 所有API响应遵循统一格式： ```json { "status": 1000, "data": {}, "desc": "成功" } ``` - `status` - 状态码，1000表示成功 - `data` - 返回数据 - `desc` - 描述信息 ### 主要接口 #### 用户相关 - `POST /user/login` - 用户登录 - `GET /user/info` - 获取用户信息 - `POST /user/logout` - 用户登出 #### 游戏相关 - `GET /game/items` - 获取物品列表 - `POST /game/distribute` - 发放物品 - `POST /game/broadcast` - 发送公告 - `POST /game/kick` - 下线玩家 - `POST /game/kill` - 杀死玩家 - `GET /game/online-players` - 获取在线玩家 ## 🎯 技术栈 - **框架** - Vue 3 (Composition API) - **构建工具** - Vite - **路由** - Vue Router 4 - **HTTP客户端** - Axios - **样式** - SCSS - **状态管理** - Pinia (可选) ## 🎨 UI设计亮点 - 渐变色配色方案 (#667eea → #764ba2) - 平滑的过渡和动画 - 清晰的视觉层次 - 充分的空间和内边距 - 统一的组件设计 - 卡片式布局 - 响应式网格系统 ## 🔐 安全特性 - Token-based认证 - 自动Token更新和检验 - 401错误自动跳转登录 - 敏感操作提示确认 ## 📱 浏览器兼容性 - Chrome (推荐) - Firefox - Safari - Edge ## 📝 开发指南 ### 添加新页面 1. 在 `src/pages/` 创建Vue组件 2. 在 `src/router/index.js` 中添加路由 3. 在Navigation中添加导航链接 ### 添加新API 1. 在 `src/api/` 创建新的接口文件 2. 使用 `http` 实例发送请求 3. 在页面中导入并使用 ### 修改样式 - 全局样式：`src/style.scss` - 通知样式：`src/style/notification.scss` - 组件样式：各组件内的 `