Tsumugiboshi/src/components/ApiTabs.js

import React from 'react';
import {
    Tabs,
    Tab,
    TextField,
    Button,
    Paper,
    Typography,
    Grid,
    Box,
    Select,
    MenuItem,
    InputLabel,
    FormControl,
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    Snackbar,
    Alert,
    Radio,
    RadioGroup,
    FormControlLabel
} from '@mui/material';
import { setCookie } from '../utils/cookies';

function ApiTabs({
    tabValue,
    setTabValue,
    qrInput,
    setQrInput,
    userId,
    setUserId,
    response,
    setResponse,
    musicData,
    setMusicData,
    apiBase,
    setApiBase,
    backends,
    setBackends,
    isDialogOpen,
    setIsDialogOpen,
    newBackend,
    setNewBackend,
    snackbarOpen,
    setSnackbarOpen,
    snackbarMessage,
    setSnackbarMessage
}) {
    const handleTabChange = (event, newValue) => {
        setTabValue(newValue);
    };

    const handleUserIdChange = (event) => {
        const value = event.target.value;
        setUserId(value);
        setCookie('userId', value);
        setMusicData(prev => ({ ...prev, userId: parseInt(value) || 0 }));
    };

    const handleBackendChange = (event) => {
        const value = event.target.value;
        setApiBase(value);
        localStorage.setItem('apiBase', value);
    };

    const handleAddBackend = () => {
        if (!newBackend.label || !newBackend.value) {
            setSnackbarMessage('请填写完整的后端信息');
            setSnackbarOpen(true);
            return;
        }

        const updatedBackends = [...backends, newBackend];
        setBackends(updatedBackends);
        localStorage.setItem('customBackends', JSON.stringify(
            updatedBackends.slice(PRESET_BACKENDS.length)
        ));
        setIsDialogOpen(false);
        setNewBackend({ label: '', value: '' });
    };

    return (
        <>
            <Paper elevation={3} sx={{ p: 3, mb: 4 }}>
                <Typography variant="h4" gutterBottom>
                    API调试工具
                </Typography>
                <div className="tabs-container">
                    <div className="scrollable-tabs">
                        <Tabs
                            value={tabValue}
                            onChange={handleTabChange}
                            variant="scrollable"
                            scrollButtons="auto"
                        >
                            <Tab label="二维码解析" />
                            <Tab label="音乐数据" />
                        </Tabs>
                    </div>
                </div>

                <Box sx={{ mt: 3 }}>
                    <Grid container spacing={3}>
                        <Grid item xs={12} md={6}>
                            <TextField
                                fullWidth
                                label="用户ID"
                                value={userId}
                                onChange={handleUserIdChange}
                                variant="outlined"
                            />
                        </Grid>
                        <Grid item xs={12} md={6}>
                            <FormControl fullWidth>
                                <InputLabel>后端环境</InputLabel>
                                <Select
                                    value={apiBase}
                                    onChange={handleBackendChange}
                                    label="后端环境"
                                >
                                    {backends.map((backend, index) => (
                                        <MenuItem key={index} value={backend.value}>
                                            {backend.label}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </FormControl>
                        </Grid>
                    </Grid>

                    {tabValue === 0 && (
                        <Box sx={{ mt: 3 }}>
                            <TextField
                                fullWidth
                                multiline
                                rows={4}
                                label="二维码内容"
                                value={qrInput}
                                onChange={(e) => setQrInput(e.target.value)}
                                variant="outlined"
                            />
                        </Box>
                    )}

                    {tabValue === 1 && (
                        <Box sx={{ mt: 3 }}>
                            <Grid container spacing={2}>
                                {Object.entries(musicData.music).map(([key, value]) => (
                                    <Grid item xs={12} sm={6} md={4} key={key}>
                                        <TextField
                                            fullWidth
                                            label={key}
                                            type="number"
                                            value={value}
                                            onChange={(e) => {
                                                const newValue = parseInt(e.target.value) || 0;
                                                setMusicData(prev => ({
                                                    ...prev,
                                                    music: {
                                                        ...prev.music,
                                                        [key]: newValue
                                                    }
                                                }));
                                            }}
                                            variant="outlined"
                                        />
                                    </Grid>
                                ))}
                            </Grid>
                        </Box>
                    )}

                    {response && (
                        <Box sx={{ mt: 3 }}>
                            <Typography variant="h6" gutterBottom>
                                响应结果
                            </Typography>
                            <pre>{JSON.stringify(response, null, 2)}</pre>
                        </Box>
                    )}
                </Box>
            </Paper>

            <Dialog open={isDialogOpen} onClose={() => setIsDialogOpen(false)}>
                <DialogTitle>添加自定义后端</DialogTitle>
                <DialogContent>
                    <TextField
                        autoFocus
                        margin="dense"
                        label="名称"
                        fullWidth
                        value={newBackend.label}
                        onChange={(e) => setNewBackend(prev => ({ ...prev, label: e.target.value }))}
                    />
                    <TextField
                        margin="dense"
                        label="地址"
                        fullWidth
                        value={newBackend.value}
                        onChange={(e) => setNewBackend(prev => ({ ...prev, value: e.target.value }))}
                    />
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setIsDialogOpen(false)}>取消</Button>
                    <Button onClick={handleAddBackend}>添加</Button>
                </DialogActions>
            </Dialog>

            <Snackbar
                open={snackbarOpen}
                autoHideDuration={6000}
                onClose={() => setSnackbarOpen(false)}
            >
                <Alert
                    onClose={() => setSnackbarOpen(false)}
                    severity="error"
                    sx={{ width: '100%' }}
                >
                    {snackbarMessage}
                </Alert>
            </Snackbar>
        </>
    );
}

export default ApiTabs;