TERES_web_frontend/src/pages/knowledge/components/GeneralForm.tsx

import React, { useRef } from 'react';
import { type UseFormReturn } from 'react-hook-form';
import {
  Box,
  Typography,
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Grid,
  Avatar,
  Button,
  IconButton,
  CircularProgress,
} from '@mui/material';
import {
  PhotoCamera as PhotoCameraIcon,
  Delete as DeleteIcon,
  Save as SaveIcon,
} from '@mui/icons-material';

export interface BasicFormData {
  name: string;
  description: string;
  permission: string;
  avatar?: string;
}

interface GeneralFormProps {
  form: UseFormReturn<BasicFormData>;
  onSubmit: (data: BasicFormData) => void;
  isSubmitting?: boolean;
  onCancel?: () => void;
  disabled?: boolean;
  submitButtonText?: string;
  cancelButtonText?: string;
}

function GeneralForm({ 
  form, 
  onSubmit, 
  isSubmitting = false, 
  onCancel, 
  disabled = false,
  submitButtonText = '提交',
  cancelButtonText = '取消'
}: GeneralFormProps) {
  const fileInputRef = useRef<HTMLInputElement>(null);

  // 处理头像上传
  const handleAvatarUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      // 检查文件类型
      if (!file.type.startsWith('image/')) {
        alert('请选择图片文件');
        return;
      }

      // 检查文件大小 (限制为 2MB)
      if (file.size > 2 * 1024 * 1024) {
        alert('图片大小不能超过 2MB');
        return;
      }

      const reader = new FileReader();
      reader.onload = (e) => {
        const base64String = e.target?.result as string;
        form.setValue('avatar', base64String);
      };
      reader.readAsDataURL(file);
    }
  };

  // 删除头像
  const handleAvatarDelete = () => {
    form.setValue('avatar', undefined);
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const avatarValue = form.watch('avatar');

  return (
    <Box>
      <Typography variant="h6" gutterBottom>
        基础信息
      </Typography>

      <Grid container spacing={3}>
        {/* 头像上传 */}
        <Grid size={12}>
          <Typography variant="subtitle2" gutterBottom>
            头像
          </Typography>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <Avatar
              src={avatarValue}
              sx={{ width: 80, height: 80 }}
            >
              {!avatarValue && form.watch('name')?.charAt(0)?.toUpperCase()}
            </Avatar>
            <Box>
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                style={{ display: 'none' }}
                onChange={handleAvatarUpload}
                disabled={disabled}
              />
              <Button
                variant="outlined"
                startIcon={<PhotoCameraIcon />}
                onClick={() => fileInputRef.current?.click()}
                disabled={disabled}
                size="small"
                sx={{ mr: 1 }}
              >
                选择图片
              </Button>
              {avatarValue && (
                <IconButton
                  onClick={handleAvatarDelete}
                  disabled={disabled}
                  size="small"
                  color="error"
                >
                  <DeleteIcon />
                </IconButton>
              )}
            </Box>
          </Box>
          <Typography variant="caption" color="text.secondary">
            支持 PNG、JPG 格式，文件大小不超过 2MB
          </Typography>
        </Grid>

        {/* 知识库名称 */}
        <Grid size={12}>
          <TextField
            fullWidth
            label="知识库名称"
            placeholder="请输入知识库名称"
            disabled={disabled}
            {...form.register('name', {
              required: '请输入知识库名称',
              minLength: {
                value: 2,
                message: '知识库名称至少需要2个字符',
              },
              maxLength: {
                value: 50,
                message: '知识库名称不能超过50个字符',
              },
            })}
            error={!!form.formState.errors.name}
            helperText={form.formState.errors.name?.message?.toString() || '请输入知识库名称'}
          />
        </Grid>

        {/* 描述 */}
        <Grid size={12}>
          <TextField
            fullWidth
            multiline
            rows={4}
            label="描述"
            placeholder="请输入知识库描述"
            disabled={disabled}
            {...form.register('description', {
              maxLength: {
                value: 500,
                message: '描述不能超过500个字符',
              },
            })}
            error={!!form.formState.errors.description}
            helperText={form.formState.errors.description?.message?.toString() || '请输入知识库描述'}
          />
        </Grid>

        {/* 权限设置 */}
        <Grid size={{xs:12,sm:6}}>
          <FormControl fullWidth disabled={disabled}>
            <InputLabel>权限设置</InputLabel>
            <Select
              label="权限设置"
              {...form.register('permission')}
              value={form.watch('permission') || 'me'}
            >
              <MenuItem value="me">仅自己</MenuItem>
              <MenuItem value="team">团队可见</MenuItem>
            </Select>
          </FormControl>
        </Grid>

        {/* 操作按钮 */}
        <Grid size={12}>
          <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end', mt: 2 }}>
            {onCancel && (
              <Button
                variant="outlined"
                onClick={onCancel}
                disabled={isSubmitting}
              >
                {cancelButtonText}
              </Button>
            )}
            <Button
              variant="contained"
              onClick={form.handleSubmit(onSubmit)}
              disabled={disabled || isSubmitting}
              startIcon={isSubmitting ? <CircularProgress size={20} /> : <SaveIcon />}
            >
              {submitButtonText}
            </Button>
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
}

export default GeneralForm;