kever/epic-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
hu xiaotong
2025-04-23 16:57:01 +08:00
parent 85c381ab50
commit 1d74593cea
12 changed files with 562 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/api/gvg.ts
View File

@@ -1,42 +0,0 @@
import { request } from '@/utils/request'
// 查询参数接口
export interface GvgTeamQueryParams {
defenseHeroes?: string[]
attackHeroes?: string[]
equipmentInfo?: string
artifacts?: string
battleStrategy?: string
pageNum?: number
pageSize?: number
}
// 阵容数据接口
export interface GvgTeam {
id: number
defenseHeroes: string[]
attackHeroes: string[]
equipmentInfo: string
artifacts: string
battleStrategy: string
prerequisites: string
importantNotes: string
createTime: string
updateTime: string
}
// 分页响应接口
export interface PageResult<T> {
total: number
list: T[]
}
// 查询 GVG 阵容列表
export const getGvgTeamList = (params: GvgTeamQueryParams) => {
return request.get<PageResult<GvgTeam>>('/api/gvg/team/list', { params })
}
// 获取 GVG 阵容详情
export const getGvgTeamDetail = (id: number) => {
return request.get<GvgTeam>(`/api/gvg/team/${id}`)
}

31
src/api/gvg/index.ts
View File

@@ -1,31 +0,0 @@
import { request } from '@/utils/request'
export interface GvgTeam {
id: number
defenseHeroes: string[]
attackHeroes: string[]
equipmentInfo: string
artifacts: string
battleStrategy: string
prerequisites: string
importantNotes: string
createTime: string
}
export interface GvgTeamQueryParams {
pageNum?: number
pageSize?: number
defenseHeroes?: string
attackHeroes?: string
equipmentInfo?: string
}
export interface PageResult<T> {
total: number
list: T[]
}
// Get GVG team list
export const getGvgTeamList = (params: GvgTeamQueryParams) => {
return request.get<PageResult<GvgTeam>>('/epic/hero/team/list', { params })
}

60
src/api/index.ts Normal file
View File

@@ -0,0 +1,60 @@
import { Api } from "../utils/axios/config";
import type { AxiosRequestConfig } from "axios";
// 查询参数接口
export interface GvgTeamQueryParams {
defenseHeroes?: string[];
attackHeroes?: string[];
equipmentInfo?: string;
artifacts?: string[];
battleStrategy?: string;
pageNum?: number;
pageSize?: number;
}
// 英雄信息接口
export interface HeroInfo {
heroCode: string;
headImgUrl: string;
}
// 阵容数据接口
export interface GvgTeam {
id: number;
defenseHeroes: string[];
defenseHeroInfos: HeroInfo[];
attackHeroes: string[];
attackHeroInfos: HeroInfo[];
equipmentInfo: string;
artifacts: string;
battleStrategy: string;
prerequisites: string;
importantNotes: string;
}
// 分页响应接口
export interface PageResult<T> {
total: number;
list: T[];
}
export interface Response<T> {
code: number;
data: T;
msg: string;
}
// 查询 GVG 阵容列表
export const getGvgTeamList = async () => {
const response = await Api.get<GvgTeam[]>("/epic/hero/team-list");
return response;
};
// 获取 GVG 阵容详情
export const getGvgTeamDetail = async (id: number) => {
const response = await Api.get<Response<GvgTeam>>(`/api/gvg/team/${id}`);
if (response.code === 0) {
return response.data;
}
throw new Error(response.msg || "获取阵容详情失败");
};

215
src/pages/Lineup.tsx
View File

@@ -1,74 +1,32 @@
import React, { useState, useEffect } from "react";
import { useNavigate } from 'react-router-dom';
import { getGvgTeamList, GvgTeam, GvgTeamQueryParams } from '../api/gvg';
import * as EpicApi from '@/api/index';
const Lineup: React.FC = () => {
const [selectedDifficulty, setSelectedDifficulty] = useState<string>("All");
const [selectedTags, setSelectedTags] = useState<string[]>([]);
const [searchTerm, setSearchTerm] = useState<string>("");
const [lineups, setLineups] = useState<GvgTeam[]>([]);
const [lineups, setLineups] = useState<EpicApi.GvgTeam[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const [pageNum, setPageNum] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(10);
const [total, setTotal] = useState<number>(0);
const navigate = useNavigate();
// Fetch data from API
useEffect(() => {
const fetchLineups = async () => {
setLoading(true);
try {
const params: GvgTeamQueryParams = {
pageNum,
pageSize,
// Add other filters as needed
};
const response = await getGvgTeamList(params);
setLineups(response.list);
setTotal(response.total);
const data = await EpicApi.getGvgTeamList();
setLineups(data);
setError(null);
} catch (err) {
console.error('Failed to fetch lineups:', err);
setError('获取阵容数据失败，请稍后再试');
// Use mock data as fallback
setLineups(mockLineups);
setError(err instanceof Error ? err.message : '获取阵容数据失败，请稍后再试');
} finally {
setLoading(false);
}
};
fetchLineups();
}, [pageNum, pageSize]);
// Mock data for fallback
const mockLineups: GvgTeam[] = [
{
id: 1,
defenseHeroes: ["暗影刺客", "元素法师", "圣骑士", "治疗师"],
attackHeroes: ["暗影刺客", "元素法师", "圣骑士", "治疗师"],
equipmentInfo: "攻击套 + 暴击套",
artifacts: "攻击力 + 暴击率",
battleStrategy: "以高爆发伤害为主的阵容，适合快速结束战斗",
prerequisites: "需要高星级角色和优质装备",
importantNotes: "注意控制技能释放时机",
createTime: "2023-01-01",
updateTime: "2023-01-01"
},
{
id: 2,
defenseHeroes: ["龙骑士", "冰霜法师", "守护者", "圣光牧师"],
attackHeroes: ["龙骑士", "冰霜法师", "守护者", "圣光牧师"],
equipmentInfo: "生命套 + 防御套",
artifacts: "生命值 + 防御力",
battleStrategy: "以持续输出和防御为主的阵容，适合持久战",
prerequisites: "需要高生命值和防御力的角色",
importantNotes: "注意保持治疗技能的持续释放",
createTime: "2023-01-02",
updateTime: "2023-01-02"
}
];
}, []);
const difficulties = ["简单", "中等", "困难"];
const availableTags = ["PVP", "PVE", "爆发", "控制", "持续", "防守", "快速"];
@@ -76,35 +34,22 @@ const Lineup: React.FC = () => {
const filteredLineups = lineups.filter(lineup => {
const matchesSearch =
lineup.battleStrategy.toLowerCase().includes(searchTerm.toLowerCase()) ||
lineup.defenseHeroes.some((hero: string) => hero.toLowerCase().includes(searchTerm.toLowerCase())) ||
lineup.attackHeroes.some((hero: string) => hero.toLowerCase().includes(searchTerm.toLowerCase()));
lineup.defenseHeroes.some(hero => hero.toLowerCase().includes(searchTerm.toLowerCase())) ||
lineup.attackHeroes.some(hero => hero.toLowerCase().includes(searchTerm.toLowerCase()));
// Since we don't have difficulty in the API data, we'll use a simple filter
// 根据阵容的难度进行筛选
const matchesDifficulty = selectedDifficulty === "All" ||
(selectedDifficulty === "简单" && lineup.id % 3 === 1) ||
(selectedDifficulty === "中等" && lineup.id % 3 === 2) ||
(selectedDifficulty === "困难" && lineup.id % 3 === 0);
// Since we don't have tags in the API data, we'll use a simple filter
// 根据标签进行筛选
const matchesTags = selectedTags.length === 0 ||
selectedTags.some(tag => lineup.battleStrategy.toLowerCase().includes(tag.toLowerCase()));
return matchesSearch && matchesDifficulty && matchesTags;
});
const handleLineupClick = (id: number) => {
navigate(`/lineup/${id}`);
};
const handlePageChange = (newPage: number) => {
setPageNum(newPage);
};
const handlePageSizeChange = (newSize: number) => {
setPageSize(newSize);
setPageNum(1); // Reset to first page when changing page size
};
return (
<div className="min-h-screen bg-[#1A1412] text-white font-sans relative">
{/* 背景装饰 */}
@@ -198,54 +143,44 @@ const Lineup: React.FC = () => {
</div>
)}
{/* 阵容列表 - 列表格式 */}
{/* 阵容列表 */}
{!loading && (
<div className="space-y-4">
{filteredLineups.map((lineup) => (
<div
key={lineup.id}
className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 cursor-pointer backdrop-blur-sm"
onClick={() => handleLineupClick(lineup.id)}
className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 backdrop-blur-sm"
>
<div className="p-6">
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
<div>
<h3 className="text-xl font-bold text-[#E6B17E] mb-2">阵容 #{lineup.id}</h3>
<p className="text-[#9B8579]">{lineup.battleStrategy}</p>
</div>
<div className="mt-4 md:mt-0 flex items-center">
<span className="text-[#C17F59] text-sm mr-2">创建时间:</span>
<span className="text-[#E6B17E]">{lineup.createTime}</span>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
{/* 防守阵容 */}
<div>
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">防守阵容</h4>
<div className="flex flex-wrap gap-2">
{lineup.defenseHeroes.map((hero: string, index: number) => (
<span
key={index}
className="px-3 py-1 bg-[#1A1412] text-[#C17F59] text-sm rounded-full border border-[#C17F59]/30"
>
{hero}
</span>
<h4 className="text-lg font-semibold text-[#E6B17E] mb-4">防守阵容</h4>
<div className="flex flex-wrap gap-4">
{lineup.defenseHeroInfos.map((hero, index) => (
<div key={index} className="flex flex-col items-center">
<img
src={hero.headImgUrl}
alt={hero.heroCode}
className="w-16 h-16 rounded-full border-2 border-[#C17F59]/30 hover:border-[#C17F59] transition-colors duration-300"
/>
</div>
))}
</div>
</div>
{/* 进攻阵容 */}
<div>
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">进攻阵容</h4>
<div className="flex flex-wrap gap-2">
{lineup.attackHeroes.map((hero: string, index: number) => (
<span
key={index}
className="px-3 py-1 bg-[#1A1412] text-[#C17F59] text-sm rounded-full border border-[#C17F59]/30"
>
{hero}
</span>
<h4 className="text-lg font-semibold text-[#E6B17E] mb-4">进攻阵容</h4>
<div className="flex flex-wrap gap-4">
{lineup.attackHeroInfos.map((hero, index) => (
<div key={index} className="flex flex-col items-center">
<img
src={hero.headImgUrl}
alt={hero.heroCode}
className="w-16 h-16 rounded-full border-2 border-[#C17F59]/30 hover:border-[#C17F59] transition-colors duration-300"
/>
</div>
))}
</div>
</div>
@@ -283,92 +218,6 @@ const Lineup: React.FC = () => {
))}
</div>
)}
{/* 分页控件 */}
{!loading && total > 0 && (
<div className="flex justify-center items-center mt-8">
<div className="flex space-x-2">
<button
className={`px-3 py-1 rounded-md ${
pageNum === 1
? "bg-[#1A1412] text-[#9B8579] cursor-not-allowed"
: "bg-[#2A211E] text-[#E6B17E] hover:bg-[#C17F59] hover:text-[#1A1412]"
}`}
onClick={() => pageNum > 1 && handlePageChange(pageNum - 1)}
disabled={pageNum === 1}
>
上一页
</button>
{Array.from({ length: Math.ceil(total / pageSize) }, (_, i) => i + 1)
.filter(page =>
page === 1 ||
page === Math.ceil(total / pageSize) ||
(page >= pageNum - 1 && page <= pageNum + 1)
)
.map((page, index, array) => {
// Add ellipsis if there's a gap
if (index > 0 && page - array[index - 1] > 1) {
return (
<React.Fragment key={`ellipsis-${page}`}>
<span className="px-2 py-1 text-[#9B8579]">...</span>
<button
className={`px-3 py-1 rounded-md ${
pageNum === page
? "bg-[#C17F59] text-[#1A1412]"
: "bg-[#2A211E] text-[#E6B17E] hover:bg-[#C17F59] hover:text-[#1A1412]"
}`}
onClick={() => handlePageChange(page)}
>
{page}
</button>
</React.Fragment>
);
}
return (
<button
key={page}
className={`px-3 py-1 rounded-md ${
pageNum === page
? "bg-[#C17F59] text-[#1A1412]"
: "bg-[#2A211E] text-[#E6B17E] hover:bg-[#C17F59] hover:text-[#1A1412]"
}`}
onClick={() => handlePageChange(page)}
>
{page}
</button>
);
})}
<button
className={`px-3 py-1 rounded-md ${
pageNum === Math.ceil(total / pageSize)
? "bg-[#1A1412] text-[#9B8579] cursor-not-allowed"
: "bg-[#2A211E] text-[#E6B17E] hover:bg-[#C17F59] hover:text-[#1A1412]"
}`}
onClick={() => pageNum < Math.ceil(total / pageSize) && handlePageChange(pageNum + 1)}
disabled={pageNum === Math.ceil(total / pageSize)}
>
下一页
</button>
</div>
<div className="ml-4 flex items-center">
<span className="text-[#9B8579] mr-2">每页显示:</span>
<select
className="bg-[#1A1412] border border-[#C17F59]/30 text-[#E6B17E] px-2 py-1 rounded-md"
value={pageSize}
onChange={(e) => handlePageSizeChange(Number(e.target.value))}
>
<option value={5}>5</option>
<option value={10}>10</option>
<option value={20}>20</option>
<option value={50}>50</option>
</select>
</div>
</div>
)}
</div>
</div>
);

149
src/utils/axios/config.ts Normal file
View File

@@ -0,0 +1,149 @@
import axios from 'axios';
import type { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios';
// 请求参数类型
export type RequestParams = Record<string, string | number | boolean | null | undefined | string[]>;
// 创建axios实例
const instance: AxiosInstance = axios.create({
baseURL: process.env.VITE_API_BASE_URL,
timeout: 15000,
headers: {
'Content-Type': 'application/json',
},
});
// 请求拦截器
instance.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
// 从localStorage获取token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error: AxiosError) => {
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
(response: AxiosResponse) => {
const { data } = response;
// 这里可以根据后端的数据结构进行调整
if (data.code === 200 || data.code === 0) {
return data.data;
}
return Promise.reject(new Error(data.message || '请求失败'));
},
(error: AxiosError) => {
if (error.response) {
switch (error.response.status) {
case 401:
// 未授权，清除token并跳转到登录页
localStorage.removeItem('token');
window.location.href = '/login';
break;
case 403:
// 权限不足
console.error('没有权限访问该资源');
break;
case 404:
console.error('请求的资源不存在');
break;
case 500:
console.error('服务器错误');
break;
default:
console.error('未知错误');
}
}
return Promise.reject(error);
}
);
// 通用的 API 请求方法
export const Api = {
/**
* GET请求
* @param url - 请求地址
* @param params - 请求参数
* @param config - axios配置
*/
async get<T>(url: string, params?: RequestParams, config?: AxiosRequestConfig): Promise<T> {
return instance.get(url, { params, ...config });
},
/**
* POST请求
* @param url - 请求地址
* @param data - 请求数据
* @param config - axios配置
*/
async post<T>(url: string, data?: RequestParams, config?: AxiosRequestConfig): Promise<T> {
return instance.post(url, data, config);
},
/**
* PUT请求
* @param url - 请求地址
* @param data - 请求数据
* @param config - axios配置
*/
async put<T>(url: string, data?: RequestParams, config?: AxiosRequestConfig): Promise<T> {
return instance.put(url, data, config);
},
/**
* DELETE请求
* @param url - 请求地址
* @param config - axios配置
*/
async delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
return instance.delete(url, config);
},
/**
* 上传文件
* @param url - 请求地址
* @param file - 文件
* @param config - axios配置
*/
async upload<T>(url: string, file: File, config?: AxiosRequestConfig): Promise<T> {
const formData = new FormData();
formData.append('file', file);
return instance.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
...config,
});
},
/**
* 下载文件
* @param url - 请求地址
* @param filename - 文件名
* @param config - axios配置
*/
async download(url: string, filename?: string, config?: AxiosRequestConfig): Promise<void> {
const response = await instance.get(url, {
responseType: 'blob',
...config,
});
const blob = new Blob([response.data]);
const downloadUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = downloadUrl;
link.download = filename || 'download';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(downloadUrl);
},
};
export default instance;

42
src/utils/request.ts
View File

@@ -1,42 +0,0 @@
import axios from 'axios'
// 获取环境变量
const getBaseUrl = () => {
if (process.env.NODE_ENV === 'development') {
return 'http://localhost:8080'
}
return 'https://api.your-domain.com'
}
// 创建 axios 实例
const instance = axios.create({
baseURL: getBaseUrl(),
timeout: 10000,
headers: {
'Content-Type': 'application/json'
}
})
// 请求拦截器
instance.interceptors.request.use(
(config) => {
// 这里可以添加 token 等认证信息
return config
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截器
instance.interceptors.response.use(
(response) => {
return response.data
},
(error) => {
// 这里可以统一处理错误
return Promise.reject(error)
}
)
export const request = instance