# game-library-web

**Repository Path**: lionhonor/game-library-web

## Basic Information

- **Project Name**: game-library-web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-10
- **Last Updated**: 2025-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 赛博朋克游戏集锦 🎮

一个现代化的赛博朋克风格游戏展示平台，专为移动端和H5设计，提供沉浸式的游戏浏览体验。

## ✨ 项目特色

- 🎨 **赛博朋克视觉设计** - 霓虹色彩、毛玻璃效果、动态背景
- 📱 **移动端优先** - 完全响应式设计，完美适配手机和平板
- 🖼️ **图片轮播** - 支持触摸拖拽和自动切换的游戏截图展示
- 🏷️ **游戏标签** - 直观的游戏类型标签系统
- 🔄 **下拉刷新** - 原生下拉刷新体验
- ⚡ **高性能** - 基于Vite构建，快速开发和部署

## 🛠️ 技术栈

- **前端框架**: React 18 + TypeScript
- **构建工具**: Vite 6
- **UI组件库**: HeroUI 2.7
- **样式框架**: Tailwind CSS 3.4
- **图标库**: Iconify React
- **动画库**: Framer Motion
- **开发工具**: ESLint + Prettier

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- pnpm (推荐) 或 npm

### 安装依赖

```bash
# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install
```

### 开发运行

```bash
# 启动开发服务器
pnpm dev

# 或使用 npm
npm run dev
```

访问 `http://localhost:9100` 查看项目

### 构建部署

```bash
# 构建生产版本
pnpm build

# 预览构建结果
pnpm preview

# 或使用 npm
npm run build
npm run preview
```

## 📁 项目结构

```
game-library-web/
├── src/
│   ├── components/          # 组件目录
│   │   ├── GameTab.tsx     # 游戏卡片组件
│   │   ├── PullToRefresh.tsx # 下拉刷新组件
│   │   └── CyberpunkBackground.tsx # 背景组件
│   ├── App.tsx             # 主应用组件
│   ├── main.tsx            # 应用入口
│   └── index.css           # 全局样式
├── plugins/                # Vite插件
├── public/                 # 静态资源
├── tailwind.config.js      # Tailwind配置
├── vite.config.ts          # Vite配置
├── tsconfig.json           # TypeScript配置
└── package.json            # 项目配置
```

## 🎯 核心功能

### 游戏展示

- 支持多分类游戏展示（基础游戏、中级游戏、高级定制游戏）
- 每个游戏支持多张截图轮播
- 手机游戏比例（9:16）图片展示
- 游戏类型标签系统

### 交互体验

- 触摸拖拽切换图片
- 自动图片轮播（5秒间隔）
- 下拉刷新功能
- 响应式导航栏

### 视觉设计

- 赛博朋克主题色彩
- 霓虹发光效果
- 毛玻璃背景
- 动态背景动画

## 🔧 二次开发指南

### 添加新游戏

在 `src/App.tsx` 中的 `games` 数组添加新游戏：

```typescript
{
  id: 10,
  name: "新游戏名称",
  images: [
    "图片URL1",
    "图片URL2",
    "图片URL3"
  ],
  link: "游戏链接",
  gameTypes: ["类型1", "类型2", "类型3"]
}
```

### 修改主题色彩

在 `tailwind.config.js` 中修改霓虹色彩：

```javascript
colors: {
  'neon-blue': '#00f3ff',    // 霓虹蓝
  'neon-pink': '#ff00ff',    // 霓虹粉
  'neon-green': '#39ff14',   // 霓虹绿
}
```

### 自定义组件样式

所有组件都使用 Tailwind CSS 类名，可以直接修改类名来调整样式：

- `GameTab.tsx` - 游戏卡片样式
- `App.tsx` - 导航栏和布局样式
- `CyberpunkBackground.tsx` - 背景效果

### 调整轮播设置

在 `GameTab.tsx` 中修改自动轮播间隔：

```typescript
// 修改这个值来调整轮播间隔（毫秒）
setInterval(() => {
    // ...
}, 5000); // 当前为5秒
```

### 添加新的游戏分类

在 `games` 数组中添加新的分类对象：

```typescript
{
  category: "新分类名称",
  items: [
    // 游戏列表
  ]
}
```

## 🎨 样式系统

### 主要CSS类

- `.glitch-text` - 故障文字效果
- `.neon-*` - 霓虹色彩系列
- `.backdrop-blur-*` - 毛玻璃效果
- `.shadow-neon` - 霓虹阴影效果

### 响应式断点

- `sm:` - >= 640px
- `md:` - >= 768px
- `lg:` - >= 1024px
- `xl:` - >= 1280px

## 📱 移动端优化

- 触摸友好的交互设计
- 响应式字体和间距
- 优化的触摸目标大小
- 流畅的手势操作
- 适配不同屏幕尺寸

## 🔍 开发工具

### 代码检查

```bash
# 运行ESLint检查
pnpm lint

# 或使用 npm
npm run lint
```

### 类型检查

```bash
# TypeScript类型检查
npx tsc --noEmit
```

## 🌐 部署建议

### 静态部署

项目构建后生成静态文件，可部署到：

- Vercel
- Netlify
- GitHub Pages
- 任何静态文件服务器

### 环境变量

如需配置API地址等，可在 `.env` 文件中设置：

```env
VITE_API_URL=https://your-api.com
VITE_APP_TITLE=赛博朋克游戏集锦
```

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 🆘 常见问题

### Q: 如何修改端口号？

A: 在 `vite.config.ts` 中修改 `port` 配置

### Q: 如何添加新的图标？

A: 使用 Iconify React，在 [Iconify](https://iconify.design/) 查找图标名称

### Q: 如何优化加载性能？

A: 可以使用图片懒加载、代码分割等技术

### Q: 如何自定义动画效果？

A: 使用 Framer Motion 库添加自定义动画

---

**享受编码！** 🚀