101 lines
3.2 KiB
JavaScript
101 lines
3.2 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Card, Button, Space, Typography, Tag, List, Badge, Empty, Skeleton } from 'antd';
|
|
import {
|
|
CloudOutlined,
|
|
PhoneOutlined,
|
|
DesktopOutlined,
|
|
AppleOutlined,
|
|
RobotOutlined,
|
|
WindowsOutlined,
|
|
RightOutlined
|
|
} from '@ant-design/icons';
|
|
import httpService from '../services/httpService';
|
|
import { buildApiUrl, API_ENDPOINTS } from '../config/api';
|
|
|
|
const { Title, Text } = Typography;
|
|
|
|
const ClientDownloads = () => {
|
|
const [clients, setClients] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetchClients();
|
|
}, []);
|
|
|
|
const fetchClients = async () => {
|
|
try {
|
|
const response = await httpService.get(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.PUBLIC_LIST));
|
|
setClients(response.data.clients || []);
|
|
} catch (error) {
|
|
console.error('获取下载列表失败:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const getPlatformIcon = (platformCode) => {
|
|
const code = platformCode.toLowerCase();
|
|
if (code.includes('win')) return <WindowsOutlined />;
|
|
if (code.includes('mac') || code.includes('ios')) return <AppleOutlined />;
|
|
if (code.includes('android')) return <RobotOutlined />;
|
|
return <DesktopOutlined />;
|
|
};
|
|
|
|
if (loading) return <Skeleton active />;
|
|
|
|
return (
|
|
<div className="client-downloads-modern">
|
|
<Title level={4} style={{ marginBottom: 24 }}>
|
|
<Space><CloudOutlined /> 客户端下载</Space>
|
|
</Title>
|
|
|
|
{clients.length === 0 ? (
|
|
<Empty description="暂无可用下载版本" />
|
|
) : (
|
|
<List
|
|
grid={{ gutter: 16, xs: 1, sm: 2, md: 3 }}
|
|
dataSource={clients}
|
|
renderItem={client => (
|
|
<List.Item>
|
|
<Card hoverable style={{ borderRadius: 12 }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
|
<Space>
|
|
<div style={{
|
|
width: 40, height: 40, background: '#f0f7ff',
|
|
borderRadius: 8, display: 'flex', alignItems: 'center',
|
|
justifyContent: 'center', color: '#1677ff', fontSize: 20
|
|
}}>
|
|
{getPlatformIcon(client.platform_code)}
|
|
</div>
|
|
<div>
|
|
<Text strong>{client.platform_name_cn || client.platform_code}</Text>
|
|
{client.is_latest && <Badge status="success" text="最新" style={{ marginLeft: 8 }} />}
|
|
</div>
|
|
</Space>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: 16 }}>
|
|
<Text type="secondary" size="small">版本: </Text>
|
|
<Text strong>{client.version}</Text>
|
|
</div>
|
|
|
|
<Button
|
|
type="primary"
|
|
block
|
|
icon={<CloudOutlined />}
|
|
href={client.download_url}
|
|
target="_blank"
|
|
>
|
|
立即下载
|
|
</Button>
|
|
</Card>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ClientDownloads;
|