600 lines
21 KiB
React
600 lines
21 KiB
React
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import {
|
|||
|
|
Download,
|
|||
|
|
Plus,
|
|||
|
|
Edit,
|
|||
|
|
Trash2,
|
|||
|
|
Smartphone,
|
|||
|
|
Monitor,
|
|||
|
|
Apple,
|
|||
|
|
Search,
|
|||
|
|
X,
|
|||
|
|
ChevronDown,
|
|||
|
|
ChevronUp
|
|||
|
|
} from 'lucide-react';
|
|||
|
|
import apiClient from '../utils/apiClient';
|
|||
|
|
import { buildApiUrl, API_ENDPOINTS } from '../config/api';
|
|||
|
|
import './ClientManagement.css';
|
|||
|
|
|
|||
|
|
const ClientManagement = ({ user }) => {
|
|||
|
|
const [clients, setClients] = useState([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [showCreateModal, setShowCreateModal] = useState(false);
|
|||
|
|
const [showEditModal, setShowEditModal] = useState(false);
|
|||
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
|||
|
|
const [selectedClient, setSelectedClient] = useState(null);
|
|||
|
|
const [filterPlatformType, setFilterPlatformType] = useState('');
|
|||
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|||
|
|
const [expandedNotes, setExpandedNotes] = useState({});
|
|||
|
|
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
platform_type: 'mobile',
|
|||
|
|
platform_name: 'ios',
|
|||
|
|
version: '',
|
|||
|
|
version_code: '',
|
|||
|
|
download_url: '',
|
|||
|
|
file_size: '',
|
|||
|
|
release_notes: '',
|
|||
|
|
is_active: true,
|
|||
|
|
is_latest: false,
|
|||
|
|
min_system_version: ''
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const platformOptions = {
|
|||
|
|
mobile: [
|
|||
|
|
{ value: 'ios', label: 'iOS', icon: <Apple size={16} /> },
|
|||
|
|
{ value: 'android', label: 'Android', icon: <Smartphone size={16} /> }
|
|||
|
|
],
|
|||
|
|
desktop: [
|
|||
|
|
{ value: 'windows', label: 'Windows', icon: <Monitor size={16} /> },
|
|||
|
|
{ value: 'mac_intel', label: 'Mac (Intel)', icon: <Apple size={16} /> },
|
|||
|
|
{ value: 'mac_m', label: 'Mac (M系列)', icon: <Apple size={16} /> },
|
|||
|
|
{ value: 'linux', label: 'Linux', icon: <Monitor size={16} /> }
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchClients();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const fetchClients = async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const response = await apiClient.get(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.LIST));
|
|||
|
|
console.log('Client downloads response:', response);
|
|||
|
|
setClients(response.data.clients || []);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取客户端列表失败:', error);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCreate = async () => {
|
|||
|
|
try {
|
|||
|
|
// 验证必填字段
|
|||
|
|
if (!formData.version_code || !formData.version || !formData.download_url) {
|
|||
|
|
alert('请填写所有必填字段');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const payload = {
|
|||
|
|
...formData,
|
|||
|
|
version_code: parseInt(formData.version_code, 10),
|
|||
|
|
file_size: formData.file_size ? parseInt(formData.file_size, 10) : null
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 验证转换后的数字
|
|||
|
|
if (isNaN(payload.version_code)) {
|
|||
|
|
alert('版本代码必须是有效的数字');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (formData.file_size && isNaN(payload.file_size)) {
|
|||
|
|
alert('文件大小必须是有效的数字');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
await apiClient.post(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.CREATE), payload);
|
|||
|
|
setShowCreateModal(false);
|
|||
|
|
resetForm();
|
|||
|
|
fetchClients();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('创建客户端失败:', error);
|
|||
|
|
alert(error.response?.data?.message || '创建失败,请重试');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleUpdate = async () => {
|
|||
|
|
try {
|
|||
|
|
// 验证必填字段
|
|||
|
|
if (!formData.version_code || !formData.version || !formData.download_url) {
|
|||
|
|
alert('请填写所有必填字段');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const payload = {
|
|||
|
|
version: formData.version,
|
|||
|
|
version_code: parseInt(formData.version_code, 10),
|
|||
|
|
download_url: formData.download_url,
|
|||
|
|
file_size: formData.file_size ? parseInt(formData.file_size, 10) : null,
|
|||
|
|
release_notes: formData.release_notes,
|
|||
|
|
is_active: formData.is_active,
|
|||
|
|
is_latest: formData.is_latest,
|
|||
|
|
min_system_version: formData.min_system_version
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 验证转换后的数字
|
|||
|
|
if (isNaN(payload.version_code)) {
|
|||
|
|
alert('版本代码必须是有效的数字');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (formData.file_size && isNaN(payload.file_size)) {
|
|||
|
|
alert('文件大小必须是有效的数字');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
await apiClient.put(
|
|||
|
|
buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.UPDATE(selectedClient.id)),
|
|||
|
|
payload
|
|||
|
|
);
|
|||
|
|
setShowEditModal(false);
|
|||
|
|
resetForm();
|
|||
|
|
fetchClients();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('更新客户端失败:', error);
|
|||
|
|
alert(error.response?.data?.message || '更新失败,请重试');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDelete = async () => {
|
|||
|
|
try {
|
|||
|
|
await apiClient.delete(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.DELETE(selectedClient.id)));
|
|||
|
|
setShowDeleteModal(false);
|
|||
|
|
setSelectedClient(null);
|
|||
|
|
fetchClients();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('删除客户端失败:', error);
|
|||
|
|
alert('删除失败,请重试');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const openEditModal = (client) => {
|
|||
|
|
setSelectedClient(client);
|
|||
|
|
setFormData({
|
|||
|
|
platform_type: client.platform_type,
|
|||
|
|
platform_name: client.platform_name,
|
|||
|
|
version: client.version,
|
|||
|
|
version_code: String(client.version_code),
|
|||
|
|
download_url: client.download_url,
|
|||
|
|
file_size: client.file_size ? String(client.file_size) : '',
|
|||
|
|
release_notes: client.release_notes || '',
|
|||
|
|
is_active: client.is_active,
|
|||
|
|
is_latest: client.is_latest,
|
|||
|
|
min_system_version: client.min_system_version || ''
|
|||
|
|
});
|
|||
|
|
setShowEditModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const openDeleteModal = (client) => {
|
|||
|
|
setSelectedClient(client);
|
|||
|
|
setShowDeleteModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const resetForm = () => {
|
|||
|
|
setFormData({
|
|||
|
|
platform_type: 'mobile',
|
|||
|
|
platform_name: 'ios',
|
|||
|
|
version: '',
|
|||
|
|
version_code: '',
|
|||
|
|
download_url: '',
|
|||
|
|
file_size: '',
|
|||
|
|
release_notes: '',
|
|||
|
|
is_active: true,
|
|||
|
|
is_latest: false,
|
|||
|
|
min_system_version: ''
|
|||
|
|
});
|
|||
|
|
setSelectedClient(null);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getPlatformLabel = (platformName) => {
|
|||
|
|
const allOptions = [...platformOptions.mobile, ...platformOptions.desktop];
|
|||
|
|
const option = allOptions.find(opt => opt.value === platformName);
|
|||
|
|
return option ? option.label : platformName;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const formatFileSize = (bytes) => {
|
|||
|
|
if (!bytes) return '-';
|
|||
|
|
const mb = bytes / (1024 * 1024);
|
|||
|
|
return `${mb.toFixed(2)} MB`;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const toggleNotes = (clientId) => {
|
|||
|
|
setExpandedNotes(prev => ({
|
|||
|
|
...prev,
|
|||
|
|
[clientId]: !prev[clientId]
|
|||
|
|
}));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const filteredClients = clients.filter(client => {
|
|||
|
|
if (filterPlatformType && client.platform_type !== filterPlatformType) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (searchQuery) {
|
|||
|
|
const query = searchQuery.toLowerCase();
|
|||
|
|
return (
|
|||
|
|
client.version.toLowerCase().includes(query) ||
|
|||
|
|
getPlatformLabel(client.platform_name).toLowerCase().includes(query) ||
|
|||
|
|
(client.release_notes && client.release_notes.toLowerCase().includes(query))
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const groupedClients = {
|
|||
|
|
mobile: filteredClients.filter(c => c.platform_type === 'mobile'),
|
|||
|
|
desktop: filteredClients.filter(c => c.platform_type === 'desktop')
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return <div className="client-management-loading">加载中...</div>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="client-management-page">
|
|||
|
|
<div className="client-management-header">
|
|||
|
|
<h1>客户端下载管理</h1>
|
|||
|
|
<button className="btn-create" onClick={() => setShowCreateModal(true)}>
|
|||
|
|
<Plus size={18} />
|
|||
|
|
<span>新增客户端</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="client-filters">
|
|||
|
|
<div className="search-box">
|
|||
|
|
<Search size={18} />
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="搜索版本号、平台或更新说明..."
|
|||
|
|
value={searchQuery}
|
|||
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|||
|
|
/>
|
|||
|
|
{searchQuery && (
|
|||
|
|
<button className="clear-search" onClick={() => setSearchQuery('')}>
|
|||
|
|
<X size={16} />
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="platform-filters">
|
|||
|
|
<button
|
|||
|
|
className={`filter-btn ${filterPlatformType === '' ? 'active' : ''}`}
|
|||
|
|
onClick={() => setFilterPlatformType('')}
|
|||
|
|
>
|
|||
|
|
全部
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className={`filter-btn ${filterPlatformType === 'mobile' ? 'active' : ''}`}
|
|||
|
|
onClick={() => setFilterPlatformType('mobile')}
|
|||
|
|
>
|
|||
|
|
<Smartphone size={16} />
|
|||
|
|
<span>移动端</span>
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className={`filter-btn ${filterPlatformType === 'desktop' ? 'active' : ''}`}
|
|||
|
|
onClick={() => setFilterPlatformType('desktop')}
|
|||
|
|
>
|
|||
|
|
<Monitor size={16} />
|
|||
|
|
<span>桌面端</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="clients-sections">
|
|||
|
|
{['mobile', 'desktop'].map(type => {
|
|||
|
|
const typeClients = groupedClients[type];
|
|||
|
|
if (typeClients.length === 0 && filterPlatformType && filterPlatformType !== type) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div key={type} className="client-section">
|
|||
|
|
<h2 className="section-title">
|
|||
|
|
{type === 'mobile' ? <Smartphone size={20} /> : <Monitor size={20} />}
|
|||
|
|
<span>{type === 'mobile' ? '移动端' : '桌面端'}</span>
|
|||
|
|
<span className="count">({typeClients.length})</span>
|
|||
|
|
</h2>
|
|||
|
|
|
|||
|
|
{typeClients.length === 0 ? (
|
|||
|
|
<div className="empty-state">暂无客户端</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="clients-grid">
|
|||
|
|
{typeClients.map(client => (
|
|||
|
|
<div key={client.id} className={`client-card ${!client.is_active ? 'inactive' : ''}`}>
|
|||
|
|
<div className="card-header">
|
|||
|
|
<div className="platform-info">
|
|||
|
|
<h3>{getPlatformLabel(client.platform_name)}</h3>
|
|||
|
|
{client.is_latest && <span className="badge-latest">最新</span>}
|
|||
|
|
{!client.is_active && <span className="badge-inactive">未启用</span>}
|
|||
|
|
</div>
|
|||
|
|
<div className="card-actions">
|
|||
|
|
<button
|
|||
|
|
className="btn-icon btn-edit"
|
|||
|
|
onClick={() => openEditModal(client)}
|
|||
|
|
title="编辑"
|
|||
|
|
>
|
|||
|
|
<Edit size={16} />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="btn-icon btn-delete"
|
|||
|
|
onClick={() => openDeleteModal(client)}
|
|||
|
|
title="删除"
|
|||
|
|
>
|
|||
|
|
<Trash2 size={16} />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="card-body">
|
|||
|
|
<div className="info-row">
|
|||
|
|
<span className="label">版本:</span>
|
|||
|
|
<span className="value">{client.version}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="info-row">
|
|||
|
|
<span className="label">版本代码:</span>
|
|||
|
|
<span className="value">{client.version_code}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="info-row">
|
|||
|
|
<span className="label">文件大小:</span>
|
|||
|
|
<span className="value">{formatFileSize(client.file_size)}</span>
|
|||
|
|
</div>
|
|||
|
|
{client.min_system_version && (
|
|||
|
|
<div className="info-row">
|
|||
|
|
<span className="label">系统要求:</span>
|
|||
|
|
<span className="value">{client.min_system_version}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{client.release_notes && (
|
|||
|
|
<div className="release-notes">
|
|||
|
|
<div
|
|||
|
|
className="notes-header"
|
|||
|
|
onClick={() => toggleNotes(client.id)}
|
|||
|
|
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
|
|||
|
|
>
|
|||
|
|
<span className="label">更新说明</span>
|
|||
|
|
{expandedNotes[client.id] ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
|
|||
|
|
</div>
|
|||
|
|
{expandedNotes[client.id] && (
|
|||
|
|
<p>{client.release_notes}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<div className="download-link">
|
|||
|
|
<a href={client.download_url} target="_blank" rel="noopener noreferrer">
|
|||
|
|
<Download size={14} />
|
|||
|
|
<span>查看下载链接</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 创建/编辑模态框 */}
|
|||
|
|
{(showCreateModal || showEditModal) && (
|
|||
|
|
<div className="modal-overlay" onClick={() => {
|
|||
|
|
setShowCreateModal(false);
|
|||
|
|
setShowEditModal(false);
|
|||
|
|
resetForm();
|
|||
|
|
}}>
|
|||
|
|
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<div className="modal-header">
|
|||
|
|
<h2>{showEditModal ? '编辑客户端' : '新增客户端'}</h2>
|
|||
|
|
<button
|
|||
|
|
className="close-btn"
|
|||
|
|
onClick={() => {
|
|||
|
|
setShowCreateModal(false);
|
|||
|
|
setShowEditModal(false);
|
|||
|
|
resetForm();
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="modal-body">
|
|||
|
|
<div className="form-row">
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label>平台类型 *</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.platform_type}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const newType = e.target.value;
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
platform_type: newType,
|
|||
|
|
platform_name: platformOptions[newType][0].value
|
|||
|
|
});
|
|||
|
|
}}
|
|||
|
|
disabled={showEditModal}
|
|||
|
|
>
|
|||
|
|
<option value="mobile">移动端</option>
|
|||
|
|
<option value="desktop">桌面端</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label>具体平台 *</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.platform_name}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, platform_name: e.target.value })}
|
|||
|
|
disabled={showEditModal}
|
|||
|
|
>
|
|||
|
|
{platformOptions[formData.platform_type].map(option => (
|
|||
|
|
<option key={option.value} value={option.value}>
|
|||
|
|
{option.label}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-row">
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label>版本号 *</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="例如: 1.0.0"
|
|||
|
|
value={formData.version}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, version: e.target.value })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label>版本代码 *</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
placeholder="例如: 1000"
|
|||
|
|
value={formData.version_code}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const value = e.target.value;
|
|||
|
|
// 只允许空字符串或正整数
|
|||
|
|
if (value === '' || /^\d+$/.test(value)) {
|
|||
|
|
setFormData({ ...formData, version_code: value });
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
min="0"
|
|||
|
|
step="1"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label>下载链接 *</label>
|
|||
|
|
<input
|
|||
|
|
type="url"
|
|||
|
|
placeholder="https://..."
|
|||
|
|
value={formData.download_url}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, download_url: e.target.value })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-row">
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label>文件大小 (字节)</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
placeholder="例如: 52428800"
|
|||
|
|
value={formData.file_size}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const value = e.target.value;
|
|||
|
|
// 只允许空字符串或正整数
|
|||
|
|
if (value === '' || /^\d+$/.test(value)) {
|
|||
|
|
setFormData({ ...formData, file_size: value });
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
min="0"
|
|||
|
|
step="1"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label>最低系统版本</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="例如: iOS 13.0"
|
|||
|
|
value={formData.min_system_version}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, min_system_version: e.target.value })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label>更新说明</label>
|
|||
|
|
<textarea
|
|||
|
|
rows={6}
|
|||
|
|
placeholder="请输入更新说明..."
|
|||
|
|
value={formData.release_notes}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, release_notes: e.target.value })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-row">
|
|||
|
|
<div className="form-group checkbox-group">
|
|||
|
|
<label>
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={formData.is_active}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
|
|||
|
|
/>
|
|||
|
|
<span>启用</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="form-group checkbox-group">
|
|||
|
|
<label>
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={formData.is_latest}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, is_latest: e.target.checked })}
|
|||
|
|
/>
|
|||
|
|
<span>设为最新版本</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="modal-actions">
|
|||
|
|
<button
|
|||
|
|
className="btn-cancel"
|
|||
|
|
onClick={() => {
|
|||
|
|
setShowCreateModal(false);
|
|||
|
|
setShowEditModal(false);
|
|||
|
|
resetForm();
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="btn-submit"
|
|||
|
|
onClick={showEditModal ? handleUpdate : handleCreate}
|
|||
|
|
>
|
|||
|
|
{showEditModal ? '保存' : '创建'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 删除确认模态框 */}
|
|||
|
|
{showDeleteModal && selectedClient && (
|
|||
|
|
<div className="modal-overlay" onClick={() => setShowDeleteModal(false)}>
|
|||
|
|
<div className="delete-modal" onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<h3>确认删除</h3>
|
|||
|
|
<p>
|
|||
|
|
确定要删除 <strong>{getPlatformLabel(selectedClient.platform_name)}</strong> 版本{' '}
|
|||
|
|
<strong>{selectedClient.version}</strong> 吗？此操作无法撤销。
|
|||
|
|
</p>
|
|||
|
|
<div className="modal-actions">
|
|||
|
|
<button className="btn-cancel" onClick={() => setShowDeleteModal(false)}>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<button className="btn-delete" onClick={handleDelete}>
|
|||
|
|
确定删除
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default ClientManagement;
|