init
This commit is contained in:
hxt
@@ -11,6 +11,7 @@ import Battles from "./pages/Battles";
|
|||||||
import News from "./pages/News";
|
import News from "./pages/News";
|
||||||
import Community from "./pages/Community";
|
import Community from "./pages/Community";
|
||||||
import LoginModal from "./components/LoginModal";
|
import LoginModal from "./components/LoginModal";
|
||||||
|
import Lineup from "./pages/Lineup";
|
||||||
|
|
||||||
// 导入类型定义
|
// 导入类型定义
|
||||||
import { Skill, ImprintConcentration } from './pages/CharacterDetail';
|
import { Skill, ImprintConcentration } from './pages/CharacterDetail';
|
||||||
@@ -132,6 +133,7 @@ const App: React.FC = () => {
|
|||||||
<Route path="/news" element={<News />} />
|
<Route path="/news" element={<News />} />
|
||||||
<Route path="/builds" element={<Builds />} />
|
<Route path="/builds" element={<Builds />} />
|
||||||
<Route path="/battles" element={<Battles />} />
|
<Route path="/battles" element={<Battles />} />
|
||||||
|
<Route path="/lineup" element={<Lineup />} />
|
||||||
<Route path="/community" element={<Community />} />
|
<Route path="/community" element={<Community />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
42
src/api/gvg.ts
Normal file
42
src/api/gvg.ts
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
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
Normal file
31
src/api/gvg/index.ts
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
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 })
|
||||||
|
}
|
||||||
@@ -61,6 +61,16 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
|||||||
>
|
>
|
||||||
对战信息
|
对战信息
|
||||||
</Link>
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/lineup"
|
||||||
|
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||||
|
location.pathname === "/lineup"
|
||||||
|
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
|
||||||
|
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||||
|
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||||
|
>
|
||||||
|
对战阵容
|
||||||
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/news"
|
to="/news"
|
||||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
|
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||||
@@ -147,6 +157,16 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
|||||||
>
|
>
|
||||||
对战信息
|
对战信息
|
||||||
</Link>
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/lineup"
|
||||||
|
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
|
||||||
|
location.pathname === "/lineup"
|
||||||
|
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
|
||||||
|
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||||
|
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||||
|
>
|
||||||
|
对战阵容
|
||||||
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/news"
|
to="/news"
|
||||||
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
|
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
|
||||||
|
|||||||
377
src/pages/Lineup.tsx
Normal file
377
src/pages/Lineup.tsx
Normal file
@@ -0,0 +1,377 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { getGvgTeamList, GvgTeam, GvgTeamQueryParams } from '../api/gvg';
|
||||||
|
|
||||||
|
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 [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);
|
||||||
|
setError(null);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch lineups:', err);
|
||||||
|
setError('获取阵容数据失败，请稍后再试');
|
||||||
|
// Use mock data as fallback
|
||||||
|
setLineups(mockLineups);
|
||||||
|
} 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", "爆发", "控制", "持续", "防守", "快速"];
|
||||||
|
|
||||||
|
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()));
|
||||||
|
|
||||||
|
// 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">
|
||||||
|
{/* 背景装饰 */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-b from-[#1A1412] via-[#2A211E] to-[#1A1412]"></div>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative py-24">
|
||||||
|
<h1 className="text-4xl font-bold text-center mb-8">
|
||||||
|
<span className="bg-clip-text text-transparent bg-gradient-to-r from-[#E6B17E] via-[#C17F59] to-[#A66D4F]">
|
||||||
|
对战阵容推荐
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{/* 搜索和筛选组件 */}
|
||||||
|
<div className="sticky top-0 z-50 bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-6 rounded-lg mb-8 border border-[#C17F59]/30 backdrop-blur-sm">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="搜索阵容"
|
||||||
|
className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm w-full text-[#E6B17E] placeholder-[#9B8579] focus:border-[#C17F59] focus:outline-none"
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 难度筛选 */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
<button
|
||||||
|
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||||
|
selectedDifficulty === "All"
|
||||||
|
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||||
|
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||||
|
}`}
|
||||||
|
onClick={() => setSelectedDifficulty("All")}
|
||||||
|
>
|
||||||
|
全部难度
|
||||||
|
</button>
|
||||||
|
{difficulties.map((difficulty) => (
|
||||||
|
<button
|
||||||
|
key={difficulty}
|
||||||
|
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||||
|
selectedDifficulty === difficulty
|
||||||
|
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||||
|
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||||
|
}`}
|
||||||
|
onClick={() => setSelectedDifficulty(difficulty)}
|
||||||
|
>
|
||||||
|
{difficulty}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 标签筛选 */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{availableTags.map((tag) => (
|
||||||
|
<button
|
||||||
|
key={tag}
|
||||||
|
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||||
|
selectedTags.includes(tag)
|
||||||
|
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||||
|
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||||
|
}`}
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedTags(prev =>
|
||||||
|
prev.includes(tag)
|
||||||
|
? prev.filter(t => t !== tag)
|
||||||
|
: [...prev, tag]
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 加载状态 */}
|
||||||
|
{loading && (
|
||||||
|
<div className="flex justify-center items-center py-12">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[#E6B17E]"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 错误提示 */}
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-900/50 border border-red-500 text-red-200 px-4 py-3 rounded mb-6">
|
||||||
|
{error}
|
||||||
|
</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)}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
))}
|
||||||
|
</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>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<p className="text-[#9B8579]">{lineup.equipmentInfo}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 神器信息 */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">神器信息</h4>
|
||||||
|
<p className="text-[#9B8579]">{lineup.artifacts}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{/* 前置条件 */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">前置条件</h4>
|
||||||
|
<p className="text-[#9B8579]">{lineup.prerequisites}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 重要提示 */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">重要提示</h4>
|
||||||
|
<p className="text-[#9B8579]">{lineup.importantNotes}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Lineup;
|
||||||
42
src/utils/request.ts
Normal file
42
src/utils/request.ts
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
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
|
||||||
Reference in New Issue
Block a user